diff --git a/firebase.md b/firebase.md
index bb45945..ed48195 100644
--- a/firebase.md
+++ b/firebase.md
@@ -605,3 +605,144 @@ An example of passing a prepend icon to a `<v-text-field>`:
 
 Expects the v-img component. Scoped props should be applied with
 v-bind="props".
+
+## Forms
+
+Forms should be done dynamically - creating a `v-for` on a text field input. You should create all the props values in an object in `data`.
+
+The `<v-form>` should specify a `v-model` prop, which should reference a boolean on whether the form is valid or not. You should set a `ref` prop, which is the name you will refer to the form.
+
+```html
+<v-form
+  v-model="valid"
+  ref="form"
+  class="pt-4 d-flex flex-column align-center full-width"
+></v-form>
+```
+
+You would refer to this form with `this.$refs.form`.
+
+```html
+<v-text-field
+  v-for="field in formFields"
+  :key="field.name"
+  outlined
+  rounded
+  required
+  :type="field.password ? 'password' : 'text'"
+  background-color="rgb(100%, 100%, 100%, 10%)"
+  color="rgb(100%, 100%, 100%, 20%)"
+  class="white-placeholder full-width"
+  v-model="field.value"
+  :rules="field.rules"
+  :placeholder="field.placeholder"
+  :success="!!field.value"
+  @click:append="field.showIconData = !field.showIconData"
+>
+  <template #prepend-inner>
+    <v-icon color="white" class="pr-3">
+      {{ field.prependIcon }}
+    </v-icon>
+  </template>
+  <template #append>
+    <div class="innerIcon">
+      <v-btn
+        v-if="field.appendIconShow"
+        flat
+        icon
+        text
+        x-small
+        @click="
+          () => {
+            field.showIconData = !field.showIconData;
+            field.password = !field.password;
+          }
+        "
+      >
+        <v-icon color="white">
+          {{
+            field.showIconData
+              ? field.appendIconShow
+              : field.appendIconHide
+          }}
+        </v-icon>
+      </v-btn>
+    </div>
+  </template>
+</v-text-field>
+```
+
+Here we have created the text fields we want to render and we are looping over `formFields` to fill in the props and slots.
+
+```javascript
+{
+valid: false,
+load: false,
+formFields: [
+  {
+    name: "Email",
+    rules: [
+      v => !!v || "You must enter an email address.",
+      v => /.+@.+/.test(v) || "Email is not valid."
+    ],
+    placeholder: "Email",
+    successmessage: "Email is valid.",
+    prependIcon: "mdi-at",
+    value: ""
+  },
+  {
+    name: "Password",
+    rules: [
+      v => !!v || "You must enter a password.",
+      v => (v && v.length >= 8) || "Minimum 8 characters."
+    ],
+    placeholder: "Password",
+    successmessage: "Password is valid.",
+    prependIcon: "mdi-lock",
+    appendIconShow: "mdi-eye",
+    appendIconHide: "mdi-eye-off",
+    showIconData: false,
+    value: "",
+    password: true
+  }
+]
+}
+```
+
+This is the data object in the `<script>`. Here we define everything we need for the form, and specify all props needed for the form to work.
+
+### Validation
+
+Validating a form is done on the inputs that make up the form with the `rules` prop.
+This prop takes an array where each one of them must resolve to `true` in order for the form to be valid. We use arrow functions as the value of the input field is passed into the rules in order to check whether or not it is valud.
+
+### Submitting and check
+
+You should create a `<v-btn>` component and a method that will be called with `@click`.
+
+```html
+<v-btn
+  depressed
+  large
+  color="primary"
+  class="lighten-3"
+  :loading="load"
+  @click="submit"
+  >Submit</v-btn
+>
+```
+
+```javascript
+async submit() {
+  this.load = !this.load;
+  console.log("loading");
+  if (this.$refs.form.validate()) {
+    console.log("Success");
+  } else {
+    console.log("Not valid");
+    this.load = !this.load;
+  }
+}
+```
+
+Here we are checking the validity of the form, and enabling/disabling the loading prop based on whether or not the form is correct.
diff --git a/src/components/Appbar.vue b/src/components/Appbar.vue
index b1fa77a..75b723c 100644
--- a/src/components/Appbar.vue
+++ b/src/components/Appbar.vue
@@ -18,7 +18,6 @@
     <v-app-bar
       flat
       app
-      class="hidden-sm-and-down"
       color="#EEEEEE"
       v-if="!this.$store.getters.fullScreen"
     >
diff --git a/src/views/forms/LoginForm.vue b/src/views/forms/LoginForm.vue
index 59a15c8..cbe8daa 100644
--- a/src/views/forms/LoginForm.vue
+++ b/src/views/forms/LoginForm.vue
@@ -42,41 +42,56 @@
           >
           <v-form
             v-model="valid"
+            ref="form"
             class="pt-4 d-flex flex-column align-center full-width"
           >
             <v-text-field
-              v-model="username"
+              v-for="field in formFields"
+              :key="field.name"
               outlined
               rounded
-              placeholder="Username"
+              required
+              :type="field.password ? 'password' : 'text'"
               background-color="rgb(100%, 100%, 100%, 10%)"
               color="rgb(100%, 100%, 100%, 20%)"
               class="white-placeholder full-width"
-              required
+              v-model="field.value"
+              :rules="field.rules"
+              :placeholder="field.placeholder"
+              :success="!!field.value"
+              @click:append="field.showIconData = !field.showIconData"
             >
               <template #prepend-inner>
                 <v-icon color="white" class="pr-3">
-                  mdi-account-circle
+                  {{ field.prependIcon }}
                 </v-icon>
               </template>
+              <template #append>
+                <div class="innerIcon">
+                  <v-btn
+                    v-if="field.appendIconShow"
+                    flat
+                    icon
+                    text
+                    x-small
+                    @click="
+                      () => {
+                        field.showIconData = !field.showIconData;
+                        field.password = !field.password;
+                      }
+                    "
+                  >
+                    <v-icon color="white">
+                      {{
+                        field.showIconData
+                          ? field.appendIconShow
+                          : field.appendIconHide
+                      }}
+                    </v-icon>
+                  </v-btn>
+                </div>
+              </template>
             </v-text-field>
-            <v-text-field
-              v-model="password"
-              outlined
-              rounded
-              type="password"
-              placeholder="Password"
-              background-color="rgb(100%, 100%, 100%, 10%)"
-              color="rgb(100%, 100%, 100%, 20%)"
-              class="white-placeholder full-width"
-              required
-            >
-              <template #prepend-inner>
-                <v-icon color="white" class="pr-3">
-                  mdi-lock
-                </v-icon>
-              </template></v-text-field
-            >
             <v-btn
               depressed
               large
@@ -101,9 +116,35 @@ export default {
   data() {
     return {
       valid: false,
-      username: "",
-      password: "",
-      load: false
+      load: false,
+      formFields: [
+        {
+          name: "Email",
+          rules: [
+            v => !!v || "You must enter an email address.",
+            v => /.+@.+/.test(v) || "Email is not valid."
+          ],
+          placeholder: "Email",
+          successmessage: "Email is valid.",
+          prependIcon: "mdi-at",
+          value: ""
+        },
+        {
+          name: "Password",
+          rules: [
+            v => !!v || "You must enter a password.",
+            v => (v && v.length >= 8) || "Minimum 8 characters."
+          ],
+          placeholder: "Password",
+          successmessage: "Password is valid.",
+          prependIcon: "mdi-lock",
+          appendIconShow: "mdi-eye",
+          appendIconHide: "mdi-eye-off",
+          showIconData: false,
+          value: "",
+          password: true
+        }
+      ]
     };
   },
   methods: {
@@ -112,8 +153,14 @@ export default {
       console.log("loading");
       if (this.$refs.form.validate()) {
         console.log("Success");
+      } else {
+        console.log("Not valid");
+        this.load = !this.load;
       }
     }
+  },
+  showPassword() {
+    //
   }
 };
 </script>
@@ -151,20 +198,4 @@ export default {
   color: white !important;
   opacity: 1;
 }
-
-.v-input__slot:hover {
-  border-color: #6fbd44;
-}
-
-.theme--light.v-text-field--outline:not(.v-input--is-focused):not(.v-input--has-state)
-  > .v-input__control
-  > .v-input__slot:hover {
-  border-width: 1px !important;
-  border-style: solid !important;
-  border-color: #6fbd44 !important;
-}
-
-.align-right {
-  text-align: right;
-}
 </style>