diff --git a/.gitignore b/.gitignore
index 0a60641..dae0d6e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -15,3 +15,6 @@ npm-debug.log
 yarn-error.log
 
 package-lock.json
+.idea/
+config/web-tinker.php
+public/vendor/web-tinker
diff --git a/composer.json b/composer.json
index bd27d79..083146b 100644
--- a/composer.json
+++ b/composer.json
@@ -22,7 +22,8 @@
         "fzaninotto/faker": "^1.9.1",
         "mockery/mockery": "^1.3.1",
         "nunomaduro/collision": "^4.1",
-        "phpunit/phpunit": "^8.5"
+        "phpunit/phpunit": "^8.5",
+        "spatie/laravel-web-tinker": "^1.7"
     },
     "config": {
         "optimize-autoloader": true,
diff --git a/composer.lock b/composer.lock
index db84d2b..87a3ea1 100644
--- a/composer.lock
+++ b/composer.lock
@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "d0ff9b31e0a9c20da145f26712575e63",
+    "content-hash": "bc656763558a52327994265003e73f70",
     "packages": [
         {
             "name": "asm89/stack-cors",
@@ -792,6 +792,7 @@
                     "email": "jakub.onderka@gmail.com"
                 }
             ],
+            "abandoned": "php-parallel-lint/php-console-color",
             "time": "2018-09-29T17:23:10+00:00"
         },
         {
@@ -838,6 +839,7 @@
                 }
             ],
             "description": "Highlight PHP code in terminal",
+            "abandoned": "php-parallel-lint/php-console-highlighter",
             "time": "2018-09-29T18:48:56+00:00"
         },
         {
@@ -6226,6 +6228,68 @@
             "homepage": "https://github.com/sebastianbergmann/version",
             "time": "2016-10-03T07:35:21+00:00"
         },
+        {
+            "name": "spatie/laravel-web-tinker",
+            "version": "1.7.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/spatie/laravel-web-tinker.git",
+                "reference": "be6f2dedf85beede027112dee630b391c8dd49ee"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/spatie/laravel-web-tinker/zipball/be6f2dedf85beede027112dee630b391c8dd49ee",
+                "reference": "be6f2dedf85beede027112dee630b391c8dd49ee",
+                "shasum": ""
+            },
+            "require": {
+                "illuminate/cookie": "^5.8|^6.0|^7.0",
+                "illuminate/session": "^5.8|^6.0|^7.0",
+                "illuminate/support": "^5.8|^6.0|^7.0",
+                "laravel/tinker": "^1.0|^2.0",
+                "php": "^7.2"
+            },
+            "require-dev": {
+                "orchestra/testbench": "^3.8|^4.0|^5.0",
+                "phpunit/phpunit": "^8.0|^9.0"
+            },
+            "type": "library",
+            "extra": {
+                "laravel": {
+                    "providers": [
+                        "Spatie\\WebTinker\\WebTinkerServiceProvider"
+                    ]
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Spatie\\WebTinker\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Freek Van der Herten",
+                    "email": "freek@spatie.be",
+                    "homepage": "https://spatie.be",
+                    "role": "Developer"
+                }
+            ],
+            "description": "Artisan Tinker in your browser",
+            "homepage": "https://github.com/spatie/laravel-web-tinker",
+            "keywords": [
+                "Tinker",
+                "debug",
+                "development",
+                "laravel",
+                "spatie",
+                "web-tinker"
+            ],
+            "time": "2020-03-04T20:02:26+00:00"
+        },
         {
             "name": "theseer/tokenizer",
             "version": "1.1.3",
diff --git a/resources/js/components/InputField.vue b/resources/js/components/InputField.vue
index 61589d6..17b92b6 100644
--- a/resources/js/components/InputField.vue
+++ b/resources/js/components/InputField.vue
@@ -1,8 +1,8 @@
 <template>
-    <div class="relative">
+    <div class="relative mt-1">
         <label :for="name" class="pb-1">{{ label }}</label>
         <input :id="name" :type="type" :placeholder="placeholder" v-model="value" @input="updateField()" :class="errorClassObject()">
-        <p class="text-alert" v-text="errorMessage()">Error Here</p>
+        <p class="text-alert m-0" v-text="errorMessage()">Error Here</p>
     </div>
 </template>
 
@@ -10,9 +10,24 @@
 
     export default {
         name: "InputField",
-        props: [
-            'name', 'type', 'label', 'placeholder', 'errors', 'data',
-        ],
+        props: {
+            name: {
+                type: String,
+                required: true
+            },
+            type: {
+                type: String,
+                default: 'text'
+            },
+            label:  String,
+            placeholder: String,
+            required: {
+                type: Boolean,
+                default: false
+            },
+            errors: Object,
+            data: String,
+        },
         data: function () {
             return {
                 value: ''
@@ -20,12 +35,12 @@
         },
         computed: {
             hasError: function () {
-                return this.errors && this.errors[this.name] && this.errors[this.name].length > 0
+                return this.required && this.errors && this.errors[this.name] && this.errors[this.name].length > 0
             }
         },
         methods: {
             updateField: function () {
-                this.clearErrors(this.name)
+                this.clearErrors(this.name);
                 this.$emit('update:field', this.value)
             },
             errorMessage: function () {
diff --git a/resources/js/components/TextAreaField.vue b/resources/js/components/TextAreaField.vue
index 15c7349..2f87898 100644
--- a/resources/js/components/TextAreaField.vue
+++ b/resources/js/components/TextAreaField.vue
@@ -1,19 +1,32 @@
 <template>
-    <div class="relative">
+    <div class="relative mt-1">
         <label v-if="label" :for="name" class="pb-1">{{ label }}</label>
-        <textarea :id="name" type="text" v-model="value" @input="updateField()" :class="errorClassObject()" class="p-1">
-            {{ placeholder }}
-        </textarea>
-        <p class="text-alert" v-text="errorMessage()">Error Here</p>
+        <textarea :id="name" type="text" v-model="value" :placeholder="placeholder" @input="updateField()" :class="errorClassObject()" class="p-1">{{ data }}</textarea>
+        <p class="text-alert m-0" v-text="errorMessage()">Error Here</p>
     </div>
 </template>
 
 <script>
     export default {
         name: "TextAreaField",
-        props: [
-            'name', 'label', 'placeholder', 'errors', 'data',
-        ],
+        props: {
+            name: {
+                type: String,
+                required: true
+            },
+            type: {
+                type: String,
+                default: 'text'
+            },
+            label:  String,
+            placeholder: String,
+            required: {
+                type: Boolean,
+                default: false
+            },
+            errors: Object,
+            data: String,
+        },
         data: function () {
             return {
                 value: ''
@@ -21,12 +34,12 @@
         },
         computed: {
             hasError: function () {
-                return this.errors && this.errors[this.name] && this.errors[this.name].length > 0
+                return this.required && this.errors && this.errors[this.name] && this.errors[this.name].length > 0
             }
         },
         methods: {
             updateField: function () {
-                this.clearErrors(this.name)
+                this.clearErrors(this.name);
                 this.$emit('update:field', this.value)
             },
             errorMessage: function () {
@@ -52,7 +65,3 @@
         }
     }
 </script>
-
-<style scoped>
-
-</style>
diff --git a/resources/js/views/Memo/MemoCreate.vue b/resources/js/views/Memo/MemoCreate.vue
index 02930e0..45506a6 100755
--- a/resources/js/views/Memo/MemoCreate.vue
+++ b/resources/js/views/Memo/MemoCreate.vue
@@ -5,10 +5,10 @@
             <button @click="$router.back()" class="btn-alert mr-1">Cancel</button>
         </div>
         <form @submit.prevent="submitForm">
-            <InputField name="name" label="Title" placeholder="Your Title" @update:field="form.name = $event" :errors="errors" />
-            <TextAreaField class="memo-text-area" name="memo" placeholder="Your Memo" @update:field="form.memo = $event" :errors="errors" />
+            <InputField name="name" label="Title" placeholder="Your Title" required @update:field="form.name = $event" :errors="errors" />
+            <TextAreaField class="memo-text-area" name="memo" placeholder="Your Memo" required @update:field="form.memo = $event" :errors="errors" />
 
-            <div class="flex-end">
+            <div class="flex-end mt-1">
                 <button class="btn-primary">Add New Memo</button>
             </div>
         </form>
diff --git a/resources/js/views/Memo/MemoEdit.vue b/resources/js/views/Memo/MemoEdit.vue
index 5964a66..6f23e54 100755
--- a/resources/js/views/Memo/MemoEdit.vue
+++ b/resources/js/views/Memo/MemoEdit.vue
@@ -5,10 +5,10 @@
             <button class="btn-alert mr-1">Cancel</button>
         </div>
         <form @submit.prevent="submitForm">
-            <InputField name="name" :data="form.name" label="Title" placeholder="Your Title" @update:field="form.name = $event" :errors="errors" />
-            <TextAreaField class="memo-text-area" name="memo" :data="form.memo" placeholder="Your Memo" @update:field="form.memo = $event" :errors="errors" />
+            <InputField name="name" :data="form.name" label="Title" placeholder="Your Title" required @update:field="form.name = $event" :errors="errors" />
+            <TextAreaField class="memo-text-area" name="memo" :data="form.memo" placeholder="Your Memo" required @update:field="form.memo = $event" :errors="errors" />
 
-            <div class="flex-end">
+            <div class="flex-end mt-1">
                 <button class="btn-primary">Save</button>
             </div>
 
diff --git a/resources/js/views/Memo/MemoIndex.vue b/resources/js/views/Memo/MemoIndex.vue
index d2469e8..b437973 100755
--- a/resources/js/views/Memo/MemoIndex.vue
+++ b/resources/js/views/Memo/MemoIndex.vue
@@ -9,12 +9,10 @@
             <div v-if="memos.lenght === 0">
                 <p>No memos yet. <router-link to="/memos/create">Get Started ></router-link></p>
             </div>
-            <div v-for="memo in memos" class="card">
-                <router-link :to="'/memos/' + memo.data.memo_id">
-                    <h1>{{ memo.data.name }}</h1>
-                    <div class="memo-date">{{ memo.data.last_updated }}</div>
-                </router-link>
-            </div>
+            <router-link v-for="memo in memos" :key="memo.data.memo_id" :to="'/memos/' + memo.data.memo_id" class="card">
+                <h1>{{ memo.data.name }}</h1>
+                <div class="memo-date">{{ memo.data.last_updated }}</div>
+            </router-link>
         </div>
     </div>
 </template>
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index fce2f78..808ca6c 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -8,6 +8,7 @@
 
 @import "components/btn";
 @import "components/elements";
+@import "components/events";
 @import "components/main";
 @import "components/nav";
 @import "components/topbar";
diff --git a/resources/sass/components/events.scss b/resources/sass/components/events.scss
new file mode 100644
index 0000000..5b036cf
--- /dev/null
+++ b/resources/sass/components/events.scss
@@ -0,0 +1,7 @@
+.text-alert {
+    color: $error;
+}
+
+.error-field {
+    border-color: $error;
+}
diff --git a/resources/sass/pages/memos.scss b/resources/sass/pages/memos.scss
index 12f87bb..8ee3400 100644
--- a/resources/sass/pages/memos.scss
+++ b/resources/sass/pages/memos.scss
@@ -58,7 +58,7 @@
     }
 
     a {
-        color: $greyLight;
+        color: $mediumDark;
 
         &:hover {
             text-decoration: underline;
diff --git a/resources/sass/setup/_containers.scss b/resources/sass/setup/_containers.scss
index b92e70e..2e2ae67 100644
--- a/resources/sass/setup/_containers.scss
+++ b/resources/sass/setup/_containers.scss
@@ -11,13 +11,9 @@
     padding: 1rem;
     box-shadow: 1px 1px 2px $grey;
     border-radius: 2px;
-
-    a {
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        text-decoration: none;
-    }
+    text-decoration: none;
+    flex-direction: column;
+    justify-content: space-between;
 }