diff --git a/client/cypress/integration/frontend/portfolio/project-entry.spec.js b/client/cypress/integration/frontend/portfolio/project-entry.spec.js
index ad16cd1a..3d75845d 100644
--- a/client/cypress/integration/frontend/portfolio/project-entry.spec.js
+++ b/client/cypress/integration/frontend/portfolio/project-entry.spec.js
@@ -1,3 +1,5 @@
+import {PROJECT_ENTRY_TEMPLATE} from '../../../../src/consts/strings.consts';
+
 describe('Project Entry', () => {
   const operations = {
     MeQuery: {
@@ -106,7 +108,7 @@ describe('Project Entry', () => {
     //   cy.get('[data-cy=text-form-input]').type('Stay with Rocket\nMeet Quill');
     // });
     cy.getByDataCy('modal-title').should('contain', 'Beitrag erfassen');
-    cy.getByDataCy('text-form-input').should('exist');
+    cy.getByDataCy('project-entry-textarea').should('exist');
     cy.getByDataCy('use-template-button').should('exist').click();
     cy.getByDataCy('upload-document-button').should('exist');
     cy.getByDataCy('modal-save-button').click();
@@ -125,7 +127,7 @@ describe('Project Entry', () => {
     });
     cy.getByDataCy('activity-input').should('not.exist');
 
-    cy.getByDataCy('text-form-input').clear().type('Defeat Thanos');
+    cy.getByDataCy('project-entry-textarea').clear().type('Defeat Thanos');
     cy.get('[data-cy=modal-save-button]').click();
     cy.get('.project-entry__paragraph:first-of-type').contains('Defeat Thanos');
   });
@@ -142,4 +144,11 @@ describe('Project Entry', () => {
 
     cy.get('.project-entry').should('have.length', 0);
   });
+
+  it('should use the template', () => {
+    cy.visit('/portfolio/groot');
+    cy.get('[data-cy=add-project-entry]:first-of-type').click();
+    cy.getByDataCy('use-template-button').click();
+    cy.getByDataCy('project-entry-textarea').should('have.value', PROJECT_ENTRY_TEMPLATE);
+  });
 });
diff --git a/client/src/components/content-blocks/DocumentBlock.vue b/client/src/components/content-blocks/DocumentBlock.vue
index 3c48b33e..78381085 100644
--- a/client/src/components/content-blocks/DocumentBlock.vue
+++ b/client/src/components/content-blocks/DocumentBlock.vue
@@ -42,9 +42,7 @@
 </script>
 
 <style scoped lang="scss">
-  @import '@/styles/_variables.scss';
-  @import '@/styles/_functions.scss';
-  @import '@/styles/_mixins.scss';
+  @import "~styles/helpers";
 
   .document-block {
     display: grid;
diff --git a/client/src/components/content-blocks/assignment/SubmissionForm.vue b/client/src/components/content-blocks/assignment/SubmissionForm.vue
index 472d418c..e3f2ac1a 100644
--- a/client/src/components/content-blocks/assignment/SubmissionForm.vue
+++ b/client/src/components/content-blocks/assignment/SubmissionForm.vue
@@ -26,20 +26,10 @@
         @click="$emit('spellcheck')"
       >{{ spellcheckText }}
       </button>
-      <div v-if="userInput.document">
-        <document-block
-          :value="{url: userInput.document}"
-          show-trash-icon
-          @trash="changeDocumentUrl('')"
-        />
-      </div>
-
-      <simple-file-upload
-        :value="userInput.document"
-        class="submission-form-container__document"
+      <file-upload
+        :document="userInput.document"
         v-if="allowsDocuments"
-        @link-change-url="changeDocumentUrl"
-      />
+        @change-document-url="changeDocumentUrl"/>
       <slot/>
     </div>
 
@@ -55,8 +45,8 @@
 <script>
   import SubmissionInput from '@/components/content-blocks/assignment/SubmissionInput';
   import FinalSubmission from '@/components/content-blocks/assignment/FinalSubmission';
-  import SimpleFileUpload from '@/components/SimpleFileUpload';
   import DocumentBlock from '@/components/content-blocks/DocumentBlock';
+  import FileUpload from '@/components/ui/file-upload/FileUpload';
 
   export default {
     props: {
@@ -68,24 +58,24 @@
       document: String,
       readOnly: {
         type: Boolean,
-        default: false
+        default: false,
       },
       spellcheck: {
         type: Boolean,
-        default: false
+        default: false,
       },
       spellcheckLoading: {
         type: Boolean,
-        default: false
+        default: false,
       },
-      sharedMsg: String
+      sharedMsg: String,
     },
 
     components: {
+      FileUpload,
       SubmissionInput,
       FinalSubmission,
-      SimpleFileUpload,
-      DocumentBlock
+      DocumentBlock,
     },
 
     computed: {
@@ -107,7 +97,7 @@
         } else {
           return 'Wird geprüft...';
         }
-      }
+      },
     },
 
     methods: {
@@ -119,7 +109,7 @@
       },
       changeDocumentUrl(documentUrl) {
         this.$emit('changeDocumentUrl', documentUrl);
-      }
+      },
     },
 
   };
diff --git a/client/src/components/icons/DocumentIcon.vue b/client/src/components/icons/DocumentIcon.vue
index 0b93fbed..ef1842c2 100644
--- a/client/src/components/icons/DocumentIcon.vue
+++ b/client/src/components/icons/DocumentIcon.vue
@@ -1,8 +1,7 @@
 <template>
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 100 100"
-    id="shape">
+    viewBox="0 0 100 100">
     <path
       d="M22.64,5.3a8.38,8.38,0,0,0-8.37,8.37V86.33a8.38,8.38,0,0,0,8.37,8.37H77.36a8.38,8.38,0,0,0,8.37-8.37v-57L61.39,5.3ZM79.17,88.08a2.74,2.74,0,0,1-2.11.94H22.34a3,3,0,0,1-3-3V13.37a3,3,0,0,1,3-3H54V28.32a7.78,7.78,0,0,0,7.77,7.77H79.75V85.73A2.85,2.85,0,0,1,79.17,88.08ZM62.11,31a2.34,2.34,0,0,1-2.39-2.39V11.15L79.58,31Z"/>
     <path
diff --git a/client/src/components/icons/DocumentWithLinesIcon.vue b/client/src/components/icons/DocumentWithLinesIcon.vue
new file mode 100644
index 00000000..9d52d39a
--- /dev/null
+++ b/client/src/components/icons/DocumentWithLinesIcon.vue
@@ -0,0 +1,37 @@
+<template>
+  <svg
+    viewBox="0 0 51 51"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <rect
+      width="51"
+      height="51"
+      fill="white"/>
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M12.185 4C9.87483 4.00276 8.00276 5.87483 8 8.185V44.515C8.00276 46.8252 9.87483 48.6972 12.185 48.7H39.545C41.8552 48.6972 43.7272 46.8252 43.73 44.515V16.015L31.56 4H12.185ZM40.45 45.39C40.1848 45.6945 39.7987 45.8665 39.395 45.86H12.035C11.2066 45.86 10.535 45.1884 10.535 44.36V8.035C10.535 7.20657 11.2066 6.535 12.035 6.535H27.865V15.51C27.8678 17.6545 29.6055 19.3922 31.75 19.395H40.74V44.215C40.8227 44.6303 40.7164 45.0609 40.45 45.39ZM31.0674 16.5076C31.293 16.7332 31.601 16.8569 31.92 16.85H40.655L30.725 6.925V15.655C30.7181 15.974 30.8418 16.282 31.0674 16.5076Z"
+      fill="#333333"/>
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M15 26.25C15 25.5596 15.5596 25 16.25 25H35.75C36.4404 25 37 25.5596 37 26.25C37 26.9404 36.4404 27.5 35.75 27.5H16.25C15.5596 27.5 15 26.9404 15 26.25Z"
+      fill="#333333"/>
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M15 33.25C15 32.5596 15.5596 32 16.25 32H35.75C36.4404 32 37 32.5596 37 33.25C37 33.9404 36.4404 34.5 35.75 34.5H16.25C15.5596 34.5 15 33.9404 15 33.25Z"
+      fill="#333333"/>
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M15 40.25C15 39.5596 15.5596 39 16.25 39H35.75C36.4404 39 37 39.5596 37 40.25C37 40.9404 36.4404 41.5 35.75 41.5H16.25C15.5596 41.5 15 40.9404 15 40.25Z"
+      fill="#333333"/>
+  </svg>
+
+</template>
+
+<style scoped lang="scss">
+  @import '~styles/helpers';
+
+</style>
diff --git a/client/src/components/portfolio/NewProjectEntryWizard.vue b/client/src/components/portfolio/NewProjectEntryWizard.vue
index 53931b18..c73f80e0 100644
--- a/client/src/components/portfolio/NewProjectEntryWizard.vue
+++ b/client/src/components/portfolio/NewProjectEntryWizard.vue
@@ -19,7 +19,7 @@
     data() {
       return {
         projectEntry: {
-          content: '',
+          description: '',
           documentUrl: ''
         }
       };
diff --git a/client/src/components/portfolio/ProjectEntryForm.vue b/client/src/components/portfolio/ProjectEntryForm.vue
index dce6209c..d21d8c5c 100644
--- a/client/src/components/portfolio/ProjectEntryForm.vue
+++ b/client/src/components/portfolio/ProjectEntryForm.vue
@@ -7,13 +7,28 @@
       Beitrag erfassen
     </h2>
     <div class="project-entry-modal">
-      <text-form
-        :value="content"
-        @change="localProjectEntry.content = $event"/>
-      <document-form
-        :value="document"
-        :index="0"
-        @link-change-url="setDocumentUrl"/>
+      <div class="project-entry-modal__form-field">
+        <textarea
+          :value="localProjectEntry.description"
+          class="project-entry-modal__textarea"
+          data-cy="project-entry-textarea"
+          @input="localProjectEntry.description = $event.target.value"
+        />
+
+        <div class="project-entry-modal__buttons">
+          <button-with-icon-and-text
+            icon="document-with-lines-icon"
+            data-cy="use-template-button"
+            text="Vorlage nutzen"
+            @click.native="useTemplate" />
+
+          <file-upload
+            :with-text="true"
+            :document="localProjectEntry.documentUrl"
+            data-cy="upload-document-button"
+            @change-document-url="setDocumentUrl" />
+        </div>
+      </div>
     </div>
     <div slot="footer">
       <a
@@ -32,6 +47,12 @@
   import TextFormWithHelpText from '@/components/content-forms/TextFormWithHelpText';
   import DocumentForm from '@/components/content-forms/DocumentForm';
   import TextForm from '@/components/content-forms/TextForm';
+  import DocumentIcon from '@/components/icons/DocumentIcon';
+  import NoteIcon from '@/components/icons/NoteIcon';
+  import ButtonWithIconAndText from '@/components/ui/ButtonWithIconAndText';
+  import SimpleFileUpload from '@/components/ui/file-upload/SimpleFileUpload';
+  import FileUpload from '@/components/ui/file-upload/FileUpload';
+  import {PROJECT_ENTRY_TEMPLATE} from '@/consts/strings.consts';
 
   export default {
     props: {
@@ -42,6 +63,11 @@
     },
 
     components: {
+      FileUpload,
+      SimpleFileUpload,
+      ButtonWithIconAndText,
+      NoteIcon,
+      DocumentIcon,
       TextForm,
       DocumentForm,
       Modal,
@@ -56,23 +82,13 @@
       };
     },
 
-    computed: {
-      document() {
-        return this.localProjectEntry.documentUrl > '' ? {
-          url: this.localProjectEntry.documentUrl,
-        } : {};
-      },
-      content() {
-        return {
-          text: this.localProjectEntry.content,
-        };
-      },
-    },
-
     methods: {
       setDocumentUrl(url) {
         this.localProjectEntry.documentUrl = url;
       },
+      useTemplate() {
+        this.localProjectEntry.description = `${this.localProjectEntry.description}${PROJECT_ENTRY_TEMPLATE}`;
+      },
     },
   };
 </script>
@@ -82,10 +98,46 @@
 
   .project-entry-modal {
     display: flex;
+    flex-direction: column;
+
+    &__form-field {
+      @include inputstyle;
+      padding: 0;
+      display: flex;
+      flex-direction: column;
+      grid-template-rows: auto 1rem;
+      grid-template-columns: 1fr 1fr;
+      width: 100%;
+    }
+
+    &__textarea {
+      @include auto-grow;
+      border: 0;
+      min-height: 400px;
+      padding: $medium-spacing;
+    }
+
+    &__buttons {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      padding: $medium-spacing;
+    }
+
+    &__button {
+      @include regular-text;
+
+      &--template {
+      }
+
+      &--document {
+      }
+    }
 
     &__heading {
       @include heading-3;
       margin-bottom: 0;
     }
+
   }
+
 </style>
diff --git a/client/src/components/ui/ButtonWithIconAndText.vue b/client/src/components/ui/ButtonWithIconAndText.vue
new file mode 100644
index 00000000..5a4cdb1f
--- /dev/null
+++ b/client/src/components/ui/ButtonWithIconAndText.vue
@@ -0,0 +1,51 @@
+<template>
+  <a class="button-with-icon-and-text">
+    <component
+      :is="icon"
+      class="button-with-icon-and-text__icon"/>
+    <span class="button-with-icon-and-text__text">{{ text }}</span>
+  </a>
+</template>
+
+<script>
+  import DocumentIcon from '@/components/icons/DocumentIcon';
+  import DocumentWithLinesIcon from '@/components/icons/DocumentWithLinesIcon';
+
+  export default {
+    props: {
+      icon: {
+        type: String,
+        default: ''
+      },
+      text: {
+        type: String,
+        default: ''
+      }
+    },
+
+    components: {
+      DocumentIcon,
+      DocumentWithLinesIcon
+    }
+  };
+</script>
+
+<style scoped lang="scss">
+  @import '~styles/helpers';
+
+  .button-with-icon-and-text {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    &__icon {
+      width: 24px;
+      height: 24px;
+      margin-right: $small-spacing;
+    }
+
+    &__text {
+      @include small-text;
+    }
+  }
+</style>
diff --git a/client/src/components/ui/file-upload/FileUpload.vue b/client/src/components/ui/file-upload/FileUpload.vue
new file mode 100644
index 00000000..09205266
--- /dev/null
+++ b/client/src/components/ui/file-upload/FileUpload.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="file-upload">
+    <template v-if="document">
+      <document-block
+        :value="{url: document}"
+        show-trash-icon
+        @trash="$emit('change-document-url', '')"
+      />
+
+    </template>
+    <template v-else>
+      <simple-file-upload
+        :with-text="withText"
+        :value="document"
+        @link-change-url="$emit('change-document-url', $event)"
+      />
+
+    </template>
+
+  </div>
+</template>
+
+<script>
+  import DocumentBlock from '@/components/content-blocks/DocumentBlock';
+  import SimpleFileUpload from '@/components/ui/file-upload/SimpleFileUpload';
+
+  export default {
+    props: {
+      document: {
+        type: String,
+        default: '',
+      },
+      withText: {
+        type: Boolean,
+        default: false
+      }
+    },
+    components: {SimpleFileUpload, DocumentBlock},
+  };
+</script>
+
+<style scoped lang="scss">
+  @import '~styles/helpers';
+
+</style>
diff --git a/client/src/components/ui/file-upload/SimpleFileUpload.vue b/client/src/components/ui/file-upload/SimpleFileUpload.vue
new file mode 100644
index 00000000..c6a3c8ad
--- /dev/null
+++ b/client/src/components/ui/file-upload/SimpleFileUpload.vue
@@ -0,0 +1,71 @@
+<template>
+  <div class="simple-file-upload">
+    <component
+      :is="button"
+      @click.native="clickUploadCare" />
+    <simple-file-upload-hidden-input @link-change-url="$emit('link-change-url', $event)" />
+  </div>
+</template>
+
+<script>
+
+  import DocumentIcon from '@/components/icons/DocumentIcon';
+  import SimpleFileUploadHiddenInput from '@/components/ui/file-upload/SimpleFileUploadHiddenInput';
+  import SimpleFileUploadIcon from '@/components/ui/file-upload/SimpleFileUploadIcon';
+  import SimpleFileUploadIconAndText from '@/components/ui/file-upload/SimpleFileUploadIconAndText';
+
+  export default {
+    props: {
+      value: {
+        type: String,
+        default: ''
+      },
+      withText: {
+        type: Boolean,
+        default: false
+      }
+    },
+
+    components: {
+      SimpleFileUploadHiddenInput,
+      DocumentIcon,
+      SimpleFileUploadIcon,
+      SimpleFileUploadIconAndText
+    },
+
+    computed: {
+      button() {
+        return this.withText ? 'simple-file-upload-icon-and-text' : 'simple-file-upload-icon';
+      }
+    },
+
+    methods: {
+      clickUploadCare() {
+        // workaround for styling the uploadcare widget
+        let button = this.$el.querySelector('.uploadcare--widget__button');
+        button.click();
+      }
+    },
+  };
+</script>
+
+<style scoped lang="scss">
+  @import "~styles/_helpers";
+
+  .simple-file-upload {
+    height: 25px;
+    overflow: hidden;
+    cursor: pointer;
+
+    &__link {
+      display: inline-block;
+      overflow: hidden;
+      width: 25px;
+      height: 25px;
+    }
+  }
+
+  /deep/ .uploadcare--widget {
+    display: none;
+  }
+</style>
diff --git a/client/src/components/ui/file-upload/SimpleFileUploadHiddenInput.vue b/client/src/components/ui/file-upload/SimpleFileUploadHiddenInput.vue
new file mode 100644
index 00000000..c8109914
--- /dev/null
+++ b/client/src/components/ui/file-upload/SimpleFileUploadHiddenInput.vue
@@ -0,0 +1,27 @@
+<template>
+  <input
+    type="hidden"
+    class="simple-file-upload-hidden-input"
+    role="uploadcare-uploader"
+    name="file-upload"
+    data-system-dialog
+    ref="uploadcare-filedialog">
+</template>
+
+<script>
+  import uploadcareWidget from 'uploadcare-widget';
+
+  export default {
+    mounted() {
+      let widget = uploadcareWidget.Widget('[role=uploadcare-uploader]');
+
+      widget.onChange(result => {
+        result.done(fileInfo => {
+          let urlWithFilename = fileInfo.cdnUrl + fileInfo.name;
+          this.$emit('link-change-url', urlWithFilename);
+        });
+      });
+    },
+
+  };
+</script>
diff --git a/client/src/components/ui/file-upload/SimpleFileUploadIcon.vue b/client/src/components/ui/file-upload/SimpleFileUploadIcon.vue
new file mode 100644
index 00000000..d7ed76c4
--- /dev/null
+++ b/client/src/components/ui/file-upload/SimpleFileUploadIcon.vue
@@ -0,0 +1,24 @@
+<template>
+  <a class="simple-file-upload-icon">
+    <document-icon class="simple-file-upload-icon__icon"/>
+  </a>
+</template>
+
+<script>
+  import DocumentIcon from '@/components/icons/DocumentIcon';
+
+  export default {
+    components: {DocumentIcon},
+  };
+</script>
+
+<style scoped lang="scss">
+  @import '~styles/helpers';
+
+  .simple-file-upload-icon {
+    &__icon {
+      width: 25px;
+      fill: $color-silver-dark;
+    }
+  }
+</style>
diff --git a/client/src/components/ui/file-upload/SimpleFileUploadIconAndText.vue b/client/src/components/ui/file-upload/SimpleFileUploadIconAndText.vue
new file mode 100644
index 00000000..7f43c1f9
--- /dev/null
+++ b/client/src/components/ui/file-upload/SimpleFileUploadIconAndText.vue
@@ -0,0 +1,13 @@
+<template>
+  <button-with-icon-and-text
+    icon="document-icon"
+    text="Dokument hochladen"
+  />
+</template>
+
+<script>
+  import ButtonWithIconAndText from '@/components/ui/ButtonWithIconAndText';
+  export default {
+    components: {ButtonWithIconAndText}
+  };
+</script>
diff --git a/client/src/components/SimpleFileUpload.vue b/client/src/components/ui/file-upload/SimpleFileUploadWithIcon.vue
similarity index 52%
rename from client/src/components/SimpleFileUpload.vue
rename to client/src/components/ui/file-upload/SimpleFileUploadWithIcon.vue
index aa5058db..de4f69e6 100644
--- a/client/src/components/SimpleFileUpload.vue
+++ b/client/src/components/ui/file-upload/SimpleFileUploadWithIcon.vue
@@ -1,41 +1,27 @@
 <template>
   <div class="simple-file-upload">
-    <a
-      class="simple-file-upload__link"
+    <button-with-icon-and-text
+      icon="document-icon"
+      text="Dokument hochladen"
       v-if="!value"
-      @click="clickUploadCare">
-      <document-icon class="simple-file-upload__icon"/>
-    </a>
-    <input
-      type="hidden"
-      role="uploadcare-uploader"
-      name="file-upload"
-      data-system-dialog
-      ref="uploadcare-filedialog">
+      @click.native="clickUploadCare"/>
+
+    <simple-file-upload-hidden-input @link-change-url="$emit('link-change-url', $event)"/>
   </div>
 </template>
 
 <script>
-  import uploadcareWidget from 'uploadcare-widget';
-
   import DocumentIcon from '@/components/icons/DocumentIcon';
+  import SimpleFileUploadHiddenInput from '@/components/ui/file-upload/SimpleFileUploadHiddenInput';
+  import ButtonWithIconAndText from '@/components/ui/ButtonWithIconAndText';
 
   export default {
     props: ['value'],
 
     components: {
-      DocumentIcon
-    },
-
-    mounted() {
-      let widget = uploadcareWidget.Widget('[role=uploadcare-uploader]');
-
-      widget.onChange(result => {
-        result.done(fileInfo => {
-          let urlWithFilename = fileInfo.cdnUrl + fileInfo.name;
-          this.$emit('link-change-url', urlWithFilename);
-        });
-      });
+      ButtonWithIconAndText,
+      SimpleFileUploadHiddenInput,
+      DocumentIcon,
     },
 
     methods: {
@@ -43,13 +29,13 @@
         // workaround for styling the uploadcare widget
         let button = this.$el.querySelector('.uploadcare--widget__button');
         button.click();
-      }
+      },
     },
   };
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
+  @import "~styles/_helpers";
 
   .simple-file-upload {
     width: 25px;
diff --git a/client/src/consts/strings.consts.js b/client/src/consts/strings.consts.js
new file mode 100644
index 00000000..f47b4cec
--- /dev/null
+++ b/client/src/consts/strings.consts.js
@@ -0,0 +1,10 @@
+export const PROJECT_ENTRY_TEMPLATE = `Tätigkeit:
+Was? Wie? Welche Mittel?
+
+
+Reflexion:
+Was ging gut? Was hatte ich für Schweirigkeiten? Was habe ich gelernt?
+
+
+Nächste Schritte:
+Wie geht es weiter? Wer macht was?`;
diff --git a/client/src/styles/_forms.scss b/client/src/styles/_forms.scss
index 8058fd4b..acf7197e 100644
--- a/client/src/styles/_forms.scss
+++ b/client/src/styles/_forms.scss
@@ -1,13 +1,3 @@
-@mixin inputstyle {
-  display: flex;
-  padding: 16px;
-  box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.15);
-  border-radius: 4px;
-  box-sizing: border-box;
-  border: 1px solid $color-silver-light;
-  max-width: 100%;
-  background-color: $color-white;
-}
 
 $icon-size: 20px;
 
@@ -39,9 +29,7 @@ $icon-size: 20px;
 }
 
 .skillbox-auto-grow {
-  overflow: hidden;
-  resize: none;
-  outline: 0;
+  @include auto-grow;
 }
 
 .base-input-container {
diff --git a/client/src/styles/_mixins.scss b/client/src/styles/_mixins.scss
index 4b6848b0..57b4fe9b 100644
--- a/client/src/styles/_mixins.scss
+++ b/client/src/styles/_mixins.scss
@@ -214,3 +214,20 @@
   max-width: 500px;
   margin-bottom: $large-spacing;
 }
+
+@mixin inputstyle {
+  display: flex;
+  padding: $medium-spacing;
+  box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.15);
+  border-radius: 4px;
+  box-sizing: border-box;
+  border: 1px solid $color-silver-light;
+  max-width: 100%;
+  background-color: $color-white;
+}
+
+@mixin auto-grow {
+  overflow: hidden;
+  resize: none;
+  outline: 0;
+}