diff --git a/app/components/automates/add.hbs b/app/components/automates/add.hbs
new file mode 100644
index 0000000000000000000000000000000000000000..d550a2b547f9b1f78abbf6516e11b00f95811c11
--- /dev/null
+++ b/app/components/automates/add.hbs
@@ -0,0 +1,40 @@
+<div class="mb-3">
+  <label for="name" class="form-label">Name</label>
+  <input type="email" class="form-control" id="name" placeholder="name@example.com" />
+</div>
+<div class="mb-3">
+  <label for="match" class="form-label">Match</label>
+  <input type="text" class="form-control" id="match" />
+</div>
+<div class="mb-3">
+  <label for="matching_algorithm" class="form-label">Matching Algorithm</label>
+  <select class="form-select" aria-label="Any">
+    <option value="1" selected>Any</option>
+    <option value="2">All</option>
+    <option value="3">Literal</option>
+    <option value="4">Regular Expression</option>
+  </select>
+</div>
+<div class="mb-3">
+  <input type="checkbox" class="form-control-checkbox" id="is_case_sensitive" />
+  <label for="is_case_sensitive" class="form-label">Is case sensitive</label>
+</div>
+<div class="mb-3">
+  <label for="tags" class="form-label">Tags</label>
+  <input type="text" class="form-control" id="tags" />
+  <small class="form-text text-muted">
+    These tags will be assigned to matched document.
+  </small>
+</div>
+<div class="mb-3">
+  <label for="matching_algorithm" class="form-label">Destination Folder</label>
+  <select class="form-select">
+    <option value="1">---</option>
+    <option value="2">My Documents</option>
+    <option value="3">Some Other Folder</option>
+  </select>
+</div>
+<div class="mb-3">
+  <Button::Submit @onClick={{this.onSubmit}} />
+  <Button::Cancel @route="automates"/>
+</div>
\ No newline at end of file
diff --git a/app/components/automates/add.js b/app/components/automates/add.js
new file mode 100644
index 0000000000000000000000000000000000000000..5fe5503701855f927e78d72023e763bb1b59b4fc
--- /dev/null
+++ b/app/components/automates/add.js
@@ -0,0 +1,20 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+
+
+class AddAutomateComponent extends Component {
+  /*
+  Component/Form to create new automate.
+  */
+
+  @service store;
+
+  @action
+  onSubmit() {
+  }
+
+}
+
+export default AddAutomateComponent;
\ No newline at end of file
diff --git a/app/components/button/cancel.hbs b/app/components/button/cancel.hbs
new file mode 100644
index 0000000000000000000000000000000000000000..fcf9b963110d1b3cd38f796a551514d7c556d90b
--- /dev/null
+++ b/app/components/button/cancel.hbs
@@ -0,0 +1,15 @@
+{{#if @route}}
+  <LinkTo
+      @route={{@route}}
+      class="btn btn-light btn-flat">
+        {{this.text}}
+  </LinkTo>
+{{else}}
+  <button
+    class="btn btn-light btn-flat"
+    type="button"
+    {{on "click" @onClick}}>
+      <i class="bi bi-x mx-1"></i>
+    {{this.text}}
+  </button>
+{{/if}}
diff --git a/app/components/button/cancel.js b/app/components/button/cancel.js
new file mode 100644
index 0000000000000000000000000000000000000000..625e4c812863d25e020689ddd4c32a0b4c7411d3
--- /dev/null
+++ b/app/components/button/cancel.js
@@ -0,0 +1,32 @@
+import Component from '@glimmer/component';
+
+
+class ButtonCancelComponent extends Component {
+  /*
+  "Cancel Button" component. Renders a button as either
+  html <a> tag or as <button>.
+
+  Arguments:
+    @route - if `route` argument is provided, button will
+      be rendered as <a>.
+    @onClick - if `onClick` argument is provided - button
+      will be rendered as <button>.
+    @text - button's text. Default value is "Cancel".
+
+  Examples:
+
+    Render component as <button> with `onClick` handler:
+
+      <Button::Cancel @onClick={{this.onCancel}} />
+
+    Render componet as <a> with given route:
+
+      <Button::Cancel @route="automates" />
+  */
+
+  get text() {
+    return this.args.text || "Cancel";
+  }
+}
+
+export default ButtonCancelComponent;
\ No newline at end of file
diff --git a/app/components/button/submit.hbs b/app/components/button/submit.hbs
new file mode 100644
index 0000000000000000000000000000000000000000..8e8f37aa1076159132d21643a6578a347257b137
--- /dev/null
+++ b/app/components/button/submit.hbs
@@ -0,0 +1,15 @@
+{{#if @route}}
+  <LinkTo
+      @route={{@route}}
+      class="bi bi-check-lg">
+        {{this.text}}
+  </LinkTo>
+{{else}}
+  <button
+    class="btn btn-primary mx-2"
+    type="button"
+    {{on "click" @onClick}}>
+      <i class="bi bi-check-lg"></i>
+    {{this.text}}
+  </button>
+{{/if}}
diff --git a/app/components/button/submit.js b/app/components/button/submit.js
new file mode 100644
index 0000000000000000000000000000000000000000..8cc3c7a20859f638d2b00c8618859c70bb18fa68
--- /dev/null
+++ b/app/components/button/submit.js
@@ -0,0 +1,32 @@
+import Component from '@glimmer/component';
+
+
+class ButtonSubmitComponent extends Component {
+  /*
+  "Submit Button" component. Renders a button as either
+  html <a> tag or as <button>.
+
+  Arguments:
+    @route - if `route` argument is provided, button will
+      be rendered as <a>.
+    @onClick - if `onClick` argument is provided - button
+      will be rendered as <button>.
+    @text - button's text. Default value is "Submit".
+
+  Examples:
+
+    Render component as <button> with `onClick` handler:
+
+      <Button::Submit @onClick={{this.onCancel}} />
+
+    Render componet as <a> with given route:
+
+      <Button::Submit @route="automates" />
+  */
+
+  get text() {
+    return this.args.text || "Submit";
+  }
+}
+
+export default ButtonSubmitComponent;
\ No newline at end of file
diff --git a/app/templates/automates/add.hbs b/app/templates/automates/add.hbs
index 61cd364a01ec710ba90d2cd09a7654ce47a13923..b6889cea87f5be49efebceb9f69f3d92e16e3272 100644
--- a/app/templates/automates/add.hbs
+++ b/app/templates/automates/add.hbs
@@ -1 +1,3 @@
-<h1>New Automate</h1>
\ No newline at end of file
+<h1>New Automate</h1>
+
+<Automates::Add />
\ No newline at end of file