diff --git a/firebase.md b/firebase.md
index c8e4a38..8618c31 100644
--- a/firebase.md
+++ b/firebase.md
@@ -266,3 +266,99 @@ Then you can wrap the appbar in a `v-if`:
       v-if="!this.$store.getters.fullScreen"
     >
 ```
+
+## Change default font colour
+
+In `_variables.scss` create a variable with the colour you want:
+
+```scss
+$mainColor: #323947;
+```
+
+Then create a new class `fontColor` to apply to the router, and edit the default `theme--light` class for Vuetify to apply this colour:
+
+```scss
+.theme--light.v-application,
+.fontColor,
+.theme--light.v-sheet {
+  color: $mainColor !important;
+  // color: red !important;
+}
+```
+
+Then in `App.vue` apply the `fontColor` class to the `<v-app>`:
+
+```html
+    <v-app
+      :style="{ background: $vuetify.theme.themes.light.background }"
+      class="fontColor"
+    >
+```
+
+## Grids
+
+<https://vuetifyjs.com/en/components/grids/#row-and-column-breakpoints>
+
+In addition to using the flex classes you can use the grid system. The grid system allows you to create rows and columns and use props to control how the content should be displayed.
+
+This playground demonstrates what `align` and `justify` can do:
+<https://vuetifyjs.com/en/components/grids/#playground>
+
+The grid system applies to `<v-row>` and you can use the following props:
+
+- `align` controls the y-axis. You have `start`, `center`, `end`, `baseline` and `stretch`.
+- `justify` controls the x-axis. You have `start`, `center`, `end`, `space-around` and `space-between`.
+
+For `<v-col>` only `align-self` is available. To align content on a column, or any other element like a card, you should use the same classes as in the flex system. For example:
+
+```html
+<v-col cols="5" align-self="start" class="d-flex justify-end pr-0">
+```
+
+## Container filling whole page
+
+A container should be used whenever you want to use `<v-col>` and `<v-row>`. To make this container fill the whole page (and be able to use `align` props and flex classes) you should specify the following two props:
+
+- `fill-height`
+- `fluid`.
+
+## Helper classes
+
+### Spacing
+
+<https://vuetifyjs.com/en/styles/spacing/>
+
+You can use classes like `ma-2` and `pd-3` to control margin/padding in directions for any component.
+
+See the playground for a quick demonstration on what each one does:
+
+<https://vuetifyjs.com/en/styles/spacing/#playground>
+
+## Typography
+
+There are quite a few helper classes available to control font sizes and styles.
+
+<https://vuetifyjs.com/en/styles/typography/>
+
+There are two types of styles: Typography Display Classes and Style and Weight Classes.
+
+Examples include `.display-2` and `.font-weight-black`.
+
+### Replace Vuetify default font with own
+
+Fonts needed to replace the Roboto default:
+
+- Thin
+- Regular
+- Medium
+- Light
+- Condensed Light (Light)
+- Bold
+- Black
+- italic
+- Light italic
+- Medium italic
+- Bold italic
+
+If font styles dont exist then substitute them with the closest type.
+
diff --git a/src/App.vue b/src/App.vue
index 4f1f133..f37d35e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -22,21 +22,18 @@ export default {
 
   components: { Appbar },
 
-  data: () => ({
-    video: require("./assets/videos/optical.mp4")
-  })
+  // data: () => {
+  //   video: require("./assets/videos/optical.mp4")
+  // }
 };
 </script>
 
 <style lang="scss">
 #app {
-  font-family: $gilroy, sans-serif, Arial, Helvetica;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  // font-family: $gilroy, sans-serif, Arial, Helvetica;
+  // -webkit-font-smoothing: antialiased;
+  // -moz-osx-font-smoothing: grayscale;
 }
 
-.fontColor, .theme--light.v-application, .theme--light.v-sheet {
-  // color: $mainColor !important;
-  color: $mainColor !important;
-}
+
 </style>
diff --git a/src/assets/fonts/Gilroy-Black.otf b/src/assets/fonts/Gilroy-Black.otf
new file mode 100644
index 0000000..1a3128f
Binary files /dev/null and b/src/assets/fonts/Gilroy-Black.otf differ
diff --git a/src/assets/fonts/Gilroy-BoldItalic.otf b/src/assets/fonts/Gilroy-BoldItalic.otf
new file mode 100644
index 0000000..cce5a2f
Binary files /dev/null and b/src/assets/fonts/Gilroy-BoldItalic.otf differ
diff --git a/src/assets/fonts/Gilroy-Light.otf b/src/assets/fonts/Gilroy-Light.otf
new file mode 100644
index 0000000..e806e29
Binary files /dev/null and b/src/assets/fonts/Gilroy-Light.otf differ
diff --git a/src/assets/fonts/Gilroy-LightItalic.otf b/src/assets/fonts/Gilroy-LightItalic.otf
new file mode 100644
index 0000000..0c155da
Binary files /dev/null and b/src/assets/fonts/Gilroy-LightItalic.otf differ
diff --git a/src/assets/fonts/Gilroy-Medium.otf b/src/assets/fonts/Gilroy-Medium.otf
new file mode 100644
index 0000000..45f97ad
Binary files /dev/null and b/src/assets/fonts/Gilroy-Medium.otf differ
diff --git a/src/assets/fonts/Gilroy-MediumItalic.otf b/src/assets/fonts/Gilroy-MediumItalic.otf
new file mode 100644
index 0000000..b413f93
Binary files /dev/null and b/src/assets/fonts/Gilroy-MediumItalic.otf differ
diff --git a/src/assets/fonts/Gilroy-RegularItalic.otf b/src/assets/fonts/Gilroy-RegularItalic.otf
new file mode 100644
index 0000000..1806cf3
Binary files /dev/null and b/src/assets/fonts/Gilroy-RegularItalic.otf differ
diff --git a/src/assets/fonts/Gilroy-Thin.otf b/src/assets/fonts/Gilroy-Thin.otf
new file mode 100644
index 0000000..e2897de
Binary files /dev/null and b/src/assets/fonts/Gilroy-Thin.otf differ
diff --git a/src/components/Appbar.vue b/src/components/Appbar.vue
index 17bd44e..f8d4041 100644
--- a/src/components/Appbar.vue
+++ b/src/components/Appbar.vue
@@ -25,9 +25,11 @@
       <v-row>
         <v-col cols="2"></v-col>
         <v-col cols="4" class="d-flex justify-start">
-          <v-toolbar-title class="appTitle">
-            Savvy Firebase Tutorial
-          </v-toolbar-title>
+          <router-link :to="{ name: 'Home' }" class="routerLink">
+            <v-toolbar-title class="font-weight-bold">
+              Savvy Firebase Tutorial
+            </v-toolbar-title>
+          </router-link>
         </v-col>
         <v-col cols="4" class="d-flex justify-end align-self-center">
           <router-link :to="{ name: 'Login' }" class="routerLink">
@@ -48,12 +50,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.appTitle {
-  font-family: $gilroy-bold;
-}
+// .appTitle {
+//   // font-family: $gilroy-bold;
+// }
 
 .routerLink {
   text-decoration: none;
-  color: $mainColor
+  color: $mainColor;
 }
 </style>
diff --git a/src/components/LoginFull.vue b/src/components/LoginFull.vue
index f3036ac..2594805 100644
--- a/src/components/LoginFull.vue
+++ b/src/components/LoginFull.vue
@@ -2,13 +2,18 @@
   <video-background
     :src="video"
     style=" height: 100vh;"
-    overlay="linear-gradient(45deg,#2a4ae430,#fb949e6b)"
+    overlay="linear-gradient(to right, #05193799, #10183d90, #1e164090, #2b114290, #39094190)"
   >
+  <LoginForm></LoginForm>
   </video-background>
 </template>
 
 <script>
+import LoginForm from "../views/forms/LoginForm";
 export default {
+  components: {
+    LoginForm,
+  },
   data() {
     return {
       video: require("../assets/videos/optical.mp4")
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index c84907f..708a38b 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -1,27 +1,141 @@
+// Import custom fonts
+
 @font-face {
-  font-family: "Gilroy";
+  font-family: "Gilroy-Thin";
+  src: url("~@/assets/fonts/Gilroy-Thin.otf") format("opentype");
+}
+
+@font-face {
+  font-family: "Gilroy-Regular";
   src: url("~@/assets/fonts/Gilroy-Regular.otf") format("opentype");
 }
 
 @font-face {
-  font-family: "Gilroy-bold";
+  font-family: "Gilroy-Medium";
+  src: url("~@/assets/fonts/Gilroy-Medium.otf") format("opentype");
+}
+
+@font-face {
+  font-family: "Gilroy-Light";
+  src: url("~@/assets/fonts/Gilroy-Light.otf") format("opentype");
+}
+
+@font-face {
+  font-family: "Gilroy-Condensed-Light";
+  src: url("~@/assets/fonts/Gilroy-Light.otf") format("opentype");
+}
+
+@font-face {
+  font-family: "Gilroy-Bold";
   src: url("~@/assets/fonts/Gilroy-Bold.otf") format("opentype");
 }
 
-$gilroy: "Gilroy", sans-serif !default;
-$gilroy-bold: "Gilroy-bold", sans-serif !default;
+@font-face {
+  font-family: "Gilroy-Black";
+  src: url("~@/assets/fonts/Gilroy-Black.otf") format("opentype");
+}
+
+@font-face {
+  font-family: "Gilroy-Italic";
+  src: url("~@/assets/fonts/Gilroy-RegularItalic.otf") format("opentype");
+}
+
+@font-face {
+  font-family: "Gilroy-LightItalic";
+  src: url("~@/assets/fonts/Gilroy-LightItalic.otf") format("opentype");
+}
+
+@font-face {
+  font-family: "Gilroy-MediumItalic";
+  src: url("~@/assets/fonts/Gilroy-MediumItalic.otf") format("opentype");
+}
+
+@font-face {
+  font-family: "Gilroy-BoldItalic";
+  src: url("~@/assets/fonts/Gilroy-BoldItalic.otf") format("opentype");
+}
+
+// Set font variables
+
+$Gilroy-Thin: "Gilroy-Thin", sans-serif !default;
+$Gilroy-Regular: "Gilroy-Regular", sans-serif !default;
+$Gilroy-Medium: "Gilroy-Medium", sans-serif !default;
+$Gilroy-Light: "Gilroy-Light", sans-serif !default;
+$Gilroy-Condensed-Light: "Gilroy-Condensed-Light", sans-serif !default;
+$Gilroy-Bold: "Gilroy-Bold", sans-serif !default;
+$Gilroy-Black: "Gilroy-Black", sans-serif !default;
+$Gilroy-Italic: "Gilroy-Italic", sans-serif !default;
+$Gilroy-LightItalic: "Gilroy-LightItalic", sans-serif !default;
+$Gilroy-MediumItalic: "Gilroy-MediumItalic", sans-serif !default;
+$Gilroy-BoldItalic: "Gilroy-BoldItalic", sans-serif !default;
+
+// Replace default body fonts
 
 @import "../../node_modules/vuetify/src/styles/styles.sass";
-$body-font-family: $gilroy;
-$heading-font-family: $gilroy;
+$body-font-family: $Gilroy-Regular;
+$heading-font-family: $Gilroy-Regular;
 
 @import "~vuetify/src/styles/settings/variables";
-$body-font-family: $gilroy;
-$heading-font-family: $gilroy;
+$body-font-family: $Gilroy-Regular;
+$heading-font-family: $Gilroy-Regular;
+
+// Replace typography fonts
+
+.v-application {
+  font-family: $Gilroy-Regular !important;
+  .display-4,
+  .display-3 {
+    font-family: $Gilroy-Light !important;
+  }
+  .display-2,
+  .display-1,
+  .headline,
+  .subtitle-1,
+  .body-1,
+  .body-2,
+  .caption,
+  .overline,
+  .font-regular,
+  .font-weight-regular {
+    font-family: $Gilroy-Regular !important;
+  }
+  .title,
+  .subtitle-2,
+  .font-weight-medium {
+    font-family: $Gilroy-Medium !important;
+  }
+  .font-weight-light {
+    font-family: $Gilroy-Condensed-Light !important;
+  }
+  .font-weight-thin {
+    font-family: $Gilroy-Thin !important;
+  }
+  .font-weight-bold {
+    font-family: $Gilroy-Bold !important;
+  }
+  .font-weight-black {
+    font-family: $Gilroy-Black !important;
+  }
+  .font-italic {
+    font-family: $Gilroy-Italic !important;
+  }
+  .font-italic.font-weight-light {
+    font-family: $Gilroy-LightItalic !important;
+  }
+  .font-italic.font-weight-medium {
+    font-family: $Gilroy-MediumItalic !important;
+  }
+  .font-italic.font-weight-bold {
+    font-family: $Gilroy-BoldItalic !important;
+  }
+}
+
+// Change default font colour
 
 $mainColor: #323947;
 
-.fontColor, .theme--light.v-application, .theme--light.v-sheet {
-  // color: $mainColor !important;
-  color: red !important;
+.theme--light.v-application,
+.fontColor,
+.theme--light.v-sheet {
+  color: $mainColor !important;
 }
diff --git a/src/views/forms/LoginForm.vue b/src/views/forms/LoginForm.vue
new file mode 100644
index 0000000..92e36dd
--- /dev/null
+++ b/src/views/forms/LoginForm.vue
@@ -0,0 +1,42 @@
+<template>
+  <v-container fill-height fluid>
+    <!-- <v-form v-model="valid"> -->
+      <v-row >
+        <v-col cols="5" align-self="start" class="d-flex justify-end pr-0">
+          <v-card color="rgb(0, 0, 0, 0)" flat>
+            <h1 class="whiteText display-2 font-weight-bold">Savvy Firebase Tutorial</h1>
+            <span class="whiteText">Log in or create an account.</span>
+          </v-card>
+        </v-col>
+        <v-spacer></v-spacer>
+        <v-col cols="6" align-self="center" class="d-flex justify-start">
+          <v-card color="rgb(0, 0, 0, 0)" flat>
+            <h1 class="whiteText">Hello</h1>
+            <h1 class="whiteText">Hello</h1>
+            <h1 class="whiteText">Hello</h1>
+            <h1 class="whiteText">Hello</h1>
+            <h1 class="whiteText">Hello</h1>
+            <h1 class="whiteText">Hello</h1>
+          </v-card>
+        </v-col>
+      </v-row>
+    <!-- </v-form> -->
+  </v-container>
+</template>
+
+<script>
+export default {
+  name: "LoginForm",
+  data() {
+    return {
+      valid: false
+    };
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.whiteText {
+  color: white;
+}
+</style>