diff --git a/links.md b/links.md
index 1b7abff..23fec8d 100644
--- a/links.md
+++ b/links.md
@@ -1,30 +1,78 @@
-Vue resources/references
+# Vue resources/references
+
+## Javascript
+
+Babel ES2015 guide (good overview to JS)
+<https://babeljs.io/docs/en/learn>
+
+## Interesting projects/things
+
+### Strapi
+
+<https://strapi.io/>
+
+Strapi is a opensource headless CMS. You can self-host and use it as an admin page to generate content. You can then write a front-end, and have it consume your Strapi endpoints to display content.
+
+A good tutorial to follow is:
+
+<https://strapi.io/blog/build-a-blog-using-nuxt-strapi-and-apollo/>
+
+This will use Nuxt and Strapi to create a blog.
+
+### Pug
+
+<https://itnext.io/pug-js-to-make-your-life-easier-with-html-templates-9c62273626e0?gi=1d44eb088155>
+
+Pug is a HTML templating engine that lets you write simplified HTML which it will render into full html. It has additional features, like loops/condititons/includes to do fancier stuff than with pure HTML.
+
+## Vuejs
+
+### General (vue)
 
 Awesome Vue
-https://github.com/ais-one/vue-crud-x
+<https://github.com/ais-one/vue-crud-x>
+
+### Extensions
 
 Real time data-table editing in Vue:
-https://www.freecodecamp.org/news/how-to-build-a-real-time-editable-data-table-in-vue-js-46b7f0b11684/
+<https://www.freecodecamp.org/news/how-to-build-a-real-time-editable-data-table-in-vue-js-46b7f0b11684/>
 
 Integrating a datetime into a datatable CRUD:
-https://www.reddit.com/r/vuejs/comments/apdm4u/how_to_integrate_a_datepicker_like_this_in/
+<https://www.reddit.com/r/vuejs/comments/apdm4u/how_to_integrate_a_datepicker_like_this_in/>
 
 Vuetify CRUD datatables:
-https://github.com/ais-one/vue-crud-x
+<https://github.com/ais-one/vue-crud-x>
 
 Loading bar component for top of page:
-https://medium.com/js-dojo/how-to-visualize-application-loading-state-in-vuetify-44f0f0242094
-https://gist.github.com/AlexeyIsavnin/c24d7ae75bfdb599907bd36d6bfc0344
+<https://medium.com/js-dojo/how-to-visualize-application-loading-state-in-vuetify-44f0f0242094>
+<https://gist.github.com/AlexeyIsavnin/c24d7ae75bfdb599907bd36d6bfc0344>
+
+### Tutorials/Guides (vue)
 
 Using AJAX and rate limiting with lodash:
-https://vuejs.org/v2/guide/computed.html#Watchers
+<https://vuejs.org/v2/guide/computed.html#Watchers>
+
+### References
 
 Composition API in Vue3:
-https://css-tricks.com/an-early-look-at-the-vue-3-composition-api-in-the-wild/?ref=madewithvuejs.com
+<https://css-tricks.com/an-early-look-at-the-vue-3-composition-api-in-the-wild/?ref=madewithvuejs.com>
 
-Libraries that work with Vue:
+## Interesting designs
 
-JS library to simplify working with arrays, numbers, objects, strings, etc.
+### Sites
 
+- <https://binbytes.com>
 
-- Document steps of creating js files for aws
+### Fonts
+
+- `Rene bieder campton`
+
+## Nuxt
+
+### General (nuxt)
+
+<https://github.com/nuxt-community/awesome-nuxt>
+
+### Tutorials/Guides (nuxt)
+
+<https://strapi.io/blog/build-a-blog-using-nuxt-strapi-and-apollo/>
diff --git a/notes.md b/notes.md
index 78c4789..20af9c9 100644
--- a/notes.md
+++ b/notes.md
@@ -333,3 +333,113 @@ Portals will literally render the data where it needs to, then transport it to w
 
 Advanced Vue Component Design course
 https://adamwathan.me/advanced-vue-component-design/
+
+
+
+## javascript
+
+### new
+
+Javascript isn't like python where you can map an object to something else using ducktyping. In javascript if you want to map an object to something else, you need to use `new`.
+
+https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new
+
+```javascript
+function Car(make, model, year) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+}
+
+const car1 = new Car('Eagle', 'Talon TSi', 1993);
+
+console.log(car1.make);
+// expected output: "Eagle"
+```
+
+## Adding custom CSS site-wide
+https://css-tricks.com/how-to-import-a-sass-file-into-every-vue-component-in-an-app/
+https://joshuatz.com/posts/2019/vue-mixing-sass-with-scss-with-vuetify-as-an-example/#easy-solution
+
+Custom css (to apply a font for example) can be done so you don't need to import a `css` file in each component.
+
+All fonts should go in `./src/assets/fonts`.
+
+1. Create `./src/scss/_variables.scss`
+2. In here create any custom css you need
+
+```scss
+@font-face {
+  font-family: "Campton";
+  src: url("~@/assets/fonts/Rene_Bieder-Campton_Medium.otf") format("opentype");
+}
+
+$my-font-family: "Campton", sans-serif !default;
+
+@import "~vuetify/src/styles/styles.sass";
+$body-font-family: "Times New Roman", Times, serif;
+
+@import "~vuetify/src/styles/settings/variables";
+$body-font-family: "Times New Roman", Times, serif;
+
+$mycol: purple;
+```
+
+3. Create `vue.config.js` in the root of the project (next to `package.json`).
+4. Add the following to compile custom css:
+
+```javascript
+module.exports = {
+  css: {
+    loaderOptions: {
+      scss: {
+        // sassOptions: { indentedSyntax: true },
+        prependData: `
+          @import "@/scss/_variables.scss";
+        `
+      }
+    }
+  },
+  transpileDependencies: ["vuetify"]
+};
+```
+5. In `App.vue` you can set the font for the whole project.
+
+```scss
+#app {
+  font-family: "Campton", sans-serif, Arial, Helvetica,;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: $mycol;
+  margin-top: 60px;
+}
+```
+
+## Import shortcuts using `@`
+
+Both `~@` and `@` resolve to `./src`.
+
+You use `~@` when in Vue components/js when set up with the vue cli.
+
+You use `@` when in `scss`/`css` files - it's provided by webpack.
+
+
+## Import and syntax
+https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
+
+https://vueschool.io/articles/vuejs-tutorials/lazy-loading-and-code-splitting-in-vue-js/
+
+In javascript you can use several ways to import modules.
+
+`import { function } from "module";` is used if you want to import a specific function/class etc from a `.js` file. You can chain the imports with a comma between them. These have to be javascript objects.
+
+`import defaultExport from "module";` is used to import the default exports from a `.js` file. The name you give it you will use to reference it (like doing `import module as name` in python).
+
+You can also use lazy loading - only loading the components/modules you need when you need them. You can see this being used in the `./src/router/index.js`
+
+```javascript
+component: () =>
+      import(/* webpackChunkName: "signup" */ "../views/SignUp.vue")
+```
+
+The difference between `require` and `import`: `import` is better to use as it's a function, whereas `require` is a js library. `require` is synchronous but `import` can be asynchronous, and supports lazy loading.
diff --git a/src/App.vue b/src/App.vue
index 5f589d2..6e8a64f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <v-card color="grey lighten-4" flat height="200px">
+    <v-card color="grey lighten-4" flat height="100px">
       <v-toolbar :color="''" :dark="true">
         <v-app-bar-nav-icon></v-app-bar-nav-icon>
         <v-toolbar-title>AWS Login Tutorial</v-toolbar-title>
@@ -16,27 +16,75 @@
         </v-btn>
       </v-toolbar>
     </v-card>
-    <div id="nav">
-      <!-- <router-link to="/">Home</router-link> -->
-      <router-link to="/about">About</router-link>
-      <router-link to="/signUp">Sign Up</router-link>
-      <router-link to="/signupConfirm">Confirm</router-link>
-      <router-link to="/signIn">Sign In</router-link>
-    </div>
-    <router-view></router-view>
+    <v-app>
+      <div id="nav">
+        <router-link to="/">Home</router-link>
+        <router-link to="/about">About</router-link>
+        <router-link to="/signUp">Sign Up</router-link>
+        <router-link to="/signupConfirm">Confirm</router-link>
+        <router-link to="/signIn">Sign In</router-link>
+      </div>
+      <router-view></router-view>
+      <br />
+      <!-- <h1 v-if="this.email != null"> -->
+      <h1 v-if="this.userEmail != null">Hello {{ this.userEmail }}</h1>
+      <h1 v-else>Welcome!</h1>
+      <v-col cols="2">
+        <v-row justify-center>
+          <v-card class="pa-2 ma-2"
+            ><v-btn large color="primary" @click="dosignOut"
+              >Sign Out</v-btn
+            ></v-card
+          ></v-row
+        ></v-col
+      >
+    </v-app>
   </div>
 </template>
 
 <script>
-export default {};
+import { signOut } from "./utils/auth";
+// import { mapGetters } from "vuex";
+export default {
+  data() {
+    return {
+      email: null
+    };
+  },
+computed: {
+  userEmail() {
+    return this.$store.state.userEmail
+  }
+},
+  async created() {
+    try {
+      await this.$store.dispatch("fetchUser");
+    } catch (error) {
+      console.log(error);
+    } finally {
+      console.log("finally")
+      console.log(this.email)
+      console.log(this.$store.state.userEmail)
+      // this.email = this.$store.state.userEmail;
+    }
+  },
+  methods: {
+    async dosignOut() {
+      signOut();
+      this.$store.commit("user", null);
+      this.$store.commit("userEmail", null);
+      this.email = this.$store.userEmail;
+    }
+  }
+};
 </script>
 
-<style scoped>
+<style lang="scss">
 #app {
-  font-family: "Avenir", Arial, Helvetica, sans-serif;
+  font-family: "Campton", sans-serif, Arial, Helvetica;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  color: #2c3e50;
+  color: $mycol;
   margin-top: 60px;
 }
 </style>
diff --git a/src/assets/fonts/Rene-Bieder-Campton-Book.otf b/src/assets/fonts/Rene-Bieder-Campton-Book.otf
new file mode 100644
index 0000000..411a177
Binary files /dev/null and b/src/assets/fonts/Rene-Bieder-Campton-Book.otf differ
diff --git a/src/assets/fonts/Rene_Bieder-Campton_Medium.otf b/src/assets/fonts/Rene_Bieder-Campton_Medium.otf
new file mode 100644
index 0000000..a65ca2a
Binary files /dev/null and b/src/assets/fonts/Rene_Bieder-Campton_Medium.otf differ
diff --git a/src/router/index.js b/src/router/index.js
index 5b6177f..c8ad0c3 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -81,7 +81,7 @@ AmplifyEventBus.$on("authState", async state => {
   }
 });
 
-router.beforeResolve(async (to, from, next) => {
+router.beforeResolve(async (to, _from, next) => {
   console.log("router before resolve getting current user.")
   const user = await getUser();
   if (!user) {
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
new file mode 100644
index 0000000..ffae434
--- /dev/null
+++ b/src/scss/_variables.scss
@@ -0,0 +1,15 @@
+@font-face {
+  font-family: "Campton";
+  src: url("~@/assets/fonts/Rene_Bieder-Campton_Medium.otf") format("opentype");
+}
+
+// src/sass/main.scss
+$my-font-family: "Campton", sans-serif !default;
+
+@import "~vuetify/src/styles/styles.sass";
+$body-font-family: $my-font-family;
+
+@import "~vuetify/src/styles/settings/variables";
+$body-font-family: $my-font-family;
+
+$mycol: #1f366a;
diff --git a/src/store/index.js b/src/store/index.js
index a14b161..bcc8674 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -4,36 +4,46 @@ import { Auth } from "aws-amplify";
 
 Vue.use(Vuex);
 
-export default new Vuex.Store({
+const store = new Vuex.Store({
   state: {
     authorized: false,
-    user: null
+    user: null,
+    userEmail: null
   },
   mutations: {
     user(state, user) {
       state.authorized =
         !!user && user.attributes && user.attributes.email_verified;
       state.user = user;
+    },
+    userEmail(state, userEmail) {
+      state.userEmail = userEmail;
     }
   },
   actions: {
     async fetchUser({ commit }) {
       try {
-        const user = await Auth.currentAuthenticatedUser()
+        const user = await Auth.currentAuthenticatedUser();
         const expires =
           user.getSignInUserSession().getIdToken().payload.exp -
           Math.floor(new Date().getTime() / 1000);
         console.log(`Token expires in ${expires} seconds.`);
         commit("user", user);
+        commit("userEmail", user.attributes.email);
       } catch (err) {
         commit("user", null);
+        commit("userEmail", null);
       }
     }
   },
   modules: {},
-  getters: {
-    userEmail: state => {
-      return state.user.attributes.email;
-    }
-  }
+  // getters: {
+  //   userEmail: state => {
+  //     return state.userEmail;
+  //   }
+  // }
 });
+
+// store.dispatch.fetchUser()
+
+export default store;
diff --git a/src/utils/auth.js b/src/utils/auth.js
index 23a608d..9e3d061 100644
--- a/src/utils/auth.js
+++ b/src/utils/auth.js
@@ -3,7 +3,7 @@ import { AmplifyEventBus } from "aws-amplify-vue";
 
 async function getUser() {
   console.log("getting current user")
-  return await Auth.currentAuthenticatedUser()
+  return Auth.currentAuthenticatedUser()
     .then(user => {
       if (user && user.signInUserSession) {
         console.log("returning current signed in user")
@@ -51,7 +51,7 @@ async function confirmSignUp(username, code) {
   console.log(user);
 }
 
-function resendSignUp(username) {
+async function resendSignUp(username) {
   return Auth.resendSignUp(username)
     .then(() => {
       return "Success";
@@ -89,16 +89,17 @@ async function signIn(username, password) {
   }
 }
 
-function signOut() {
-  return Auth.signOut()
-    .then(data => {
-      AmplifyEventBus.$emit("authState", "signedOut");
-      return data;
-    })
-    .catch(err => {
-      console.log(err);
-      return err;
-    });
+async function signOut() {
+  try {
+    const data = await Auth.signOut();
+    AmplifyEventBus.$emit("authState", "signedOut");
+    // this.$store.dispatch("fetchUser")
+    return data;
+  }
+  catch (err) {
+    console.log(err);
+    return err;
+  }
 }
 
 export { getUser, signUp, confirmSignUp, resendSignUp, signIn, signOut };
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 058298f..0ad399d 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,28 +1,11 @@
 <template>
   <div>
-    <h1>Hello {{ this.currentUser }}</h1>
+    <!-- <h1>Hello {{ this.$store.getters.userEmail }}</h1> -->
   </div>
 </template>
 
 <script>
-import { mapGetters } from "vuex";
-export default {
-  async mounted() {
-    await this.$store.dispatch("fetchUser");
-  },
-  computed: {
-    ...mapGetters({ currentUser: "userEmail" })
-  },
-  methods: {
-    getUser() {
-      try {
-        return this.$store.getters.userEmail;
-      } catch (TypeError) {
-        // pass}
-      }
-    }
-  }
-};
+
 </script>
 
 <style lang="scss" scoped></style>
diff --git a/src/views/SignIn.vue b/src/views/SignIn.vue
index 2afbf51..2c2ee22 100644
--- a/src/views/SignIn.vue
+++ b/src/views/SignIn.vue
@@ -64,7 +64,13 @@ export default {
         console.log(
           `SIGN IN username: ${this.username}, password: ${this.password}`
         );
-        await signIn(this.username, this.password);
+        try {
+          await signIn(this.username, this.password);
+        } catch (err) {
+          console.log(err);
+        } finally {
+          this.$store.dispatch("fetchUser");
+        }
         console.log("Signed in");
       }
     }
diff --git a/vue.config.js b/vue.config.js
index ef6e86b..6b8e95b 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,5 +1,13 @@
 module.exports = {
-  "transpileDependencies": [
-    "vuetify"
-  ]
-}
\ No newline at end of file
+  css: {
+    loaderOptions: {
+      scss: {
+        // sassOptions: { indentedSyntax: true },
+        prependData: `
+          @import "@/scss/_variables.scss";
+        `
+      }
+    }
+  },
+  transpileDependencies: ["vuetify"]
+};