diff --git a/src/App.vue b/src/App.vue
index 57b5de4..07859fb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,7 +3,6 @@
     <v-app :style="{ background: $vuetify.theme.themes.light.background }">
       <v-content>
         <Appbar></Appbar>
-        <!-- <vue-page-transition name="fade-in-right"> -->
         <vue-page-transition name="fade">
           <router-view></router-view>
         </vue-page-transition>
@@ -15,9 +14,31 @@
 
 <script>
 import Appbar from "@/components/Appbar";
+import Welcome from "./views/stripe-appbar/Welcome";
+import WelcomeSecondary from "./views/stripe-appbar/WelcomeSecondary";
+import Random from "./views/stripe-appbar/Random"
+
 export default {
   name: "App",
-  components: { Appbar }
+  components: { Appbar },
+  data() {
+    return {
+      menu: [
+        {
+          title: "Welcome",
+          dropdown: "welcome",
+          content: Welcome,
+          secondary: WelcomeSecondary,
+          element: "span"
+        },
+        {
+          title: "Random",
+          dropdown: "random",
+          content: Random
+        }
+      ]
+    };
+  }
 };
 </script>
 
@@ -26,4 +47,11 @@ export default {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+.content {
+  padding: 20px;
+}
+.content--secondary {
+  padding: 20px;
+}
 </style>
diff --git a/src/components/Appbar.vue b/src/components/Appbar.vue
index 09715c0..6897969 100644
--- a/src/components/Appbar.vue
+++ b/src/components/Appbar.vue
@@ -9,43 +9,29 @@
     >
       <v-row>
         <v-spacer></v-spacer>
-        <v-col cols="4" class="d-flex justify-start align-content-center">
+        <v-col
+          cols="4"
+          class="d-flex justify-start align-center align-content-center"
+        >
           <router-link :to="{ name: 'Home' }" class="routerLink">
             <v-toolbar-title class="title">
               <p class="mb-0">Savvy Firebase Tutorial</p>
             </v-toolbar-title>
           </router-link>
         </v-col>
-        <v-col cols="4" class="d-flex justify-end align-self-center">
-          <router-link
-            :to="{ name: 'Playground' }"
-            class="routerLink ma-0 pr-2"
+        <v-col cols="4" class="d-flex justify-end">
+          <vsm-menu
+            ref="header"
+            :menu="menu"
+            :screen-offset="250"
+            :base-width="380"
+            :base-height="400"
           >
-            <p class="mb-0 underline">
-              Playground
-            </p>
-          </router-link>
-          <router-link
-            :to="{ name: 'Backgrounds' }"
-            class="routerLink ma-0 pr-2"
-          >
-            <p class="mb-0 underline">
-              Backgrounds
-            </p>
-          </router-link>
-          <router-link :to="{ name: 'Triangle' }" class="routerLink ma-0 pr-2">
-            <p class="mb-0 underline">
-              Triangle
-            </p>
-          </router-link>
-          <router-link :to="{ name: 'Login' }" class="routerLink ma-0 pr-2">
-            <p class=" mb-0 underline">
-              Sign In
-            </p>
-          </router-link>
-          <router-link :to="{ name: 'Login' }" class="routerLink ma-0">
-            <p class="mb-0 underline">Register</p>
-          </router-link>
+            <template #default="data">
+              <component :is="data.item.content" class="content" />
+              <component :is="data.item.secondary" class="content--secondary" />
+            </template>
+          </vsm-menu>
         </v-col>
         <v-spacer></v-spacer>
       </v-row>
@@ -54,8 +40,37 @@
 </template>
 
 <script>
+import Welcome from "../views/stripe-appbar/Welcome";
+import WelcomeSecondary from "../views/stripe-appbar/WelcomeSecondary";
+import Random from "../views/stripe-appbar/Random";
+
 export default {
-  name: "Appbar"
+  name: "Appbar",
+  data() {
+    return {
+      menu: [
+        {
+          title: "Welcome",
+          dropdown: "welcome",
+          content: Welcome,
+          secondary: WelcomeSecondary
+        },
+        {
+          title: "Random",
+          dropdown: "random",
+          content: Random
+        }
+      ]
+    };
+  },
+  methods: {
+    onOpenDropdown() {
+      console.log("onOpenDropdown");
+    },
+    onCloseDropdown() {
+      console.log("onCloseDropdown");
+    }
+  }
 };
 </script>
 
diff --git a/src/components/AppbarOld.vue b/src/components/AppbarOld.vue
new file mode 100644
index 0000000..09715c0
--- /dev/null
+++ b/src/components/AppbarOld.vue
@@ -0,0 +1,86 @@
+<template>
+  <div>
+    <v-app-bar
+      flat
+      app
+      hide-on-scroll
+      color="rgba(93.3%, 93.3%, 93.3%, 0.5)"
+      v-if="!this.$store.getters.fullScreen"
+    >
+      <v-row>
+        <v-spacer></v-spacer>
+        <v-col cols="4" class="d-flex justify-start align-content-center">
+          <router-link :to="{ name: 'Home' }" class="routerLink">
+            <v-toolbar-title class="title">
+              <p class="mb-0">Savvy Firebase Tutorial</p>
+            </v-toolbar-title>
+          </router-link>
+        </v-col>
+        <v-col cols="4" class="d-flex justify-end align-self-center">
+          <router-link
+            :to="{ name: 'Playground' }"
+            class="routerLink ma-0 pr-2"
+          >
+            <p class="mb-0 underline">
+              Playground
+            </p>
+          </router-link>
+          <router-link
+            :to="{ name: 'Backgrounds' }"
+            class="routerLink ma-0 pr-2"
+          >
+            <p class="mb-0 underline">
+              Backgrounds
+            </p>
+          </router-link>
+          <router-link :to="{ name: 'Triangle' }" class="routerLink ma-0 pr-2">
+            <p class="mb-0 underline">
+              Triangle
+            </p>
+          </router-link>
+          <router-link :to="{ name: 'Login' }" class="routerLink ma-0 pr-2">
+            <p class=" mb-0 underline">
+              Sign In
+            </p>
+          </router-link>
+          <router-link :to="{ name: 'Login' }" class="routerLink ma-0">
+            <p class="mb-0 underline">Register</p>
+          </router-link>
+        </v-col>
+        <v-spacer></v-spacer>
+      </v-row>
+    </v-app-bar>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Appbar"
+};
+</script>
+
+<style lang="scss" scoped>
+.routerLink {
+  text-decoration: none;
+  color: $mainColor;
+}
+.underline {
+  position: relative;
+}
+.underline::after {
+  position: absolute;
+  content: "";
+  height: 0.1em;
+  top: 100%;
+  background: currentColor;
+  z-index: -1;
+  left: 0;
+  right: 0;
+  transform: scaleX(0);
+  transition: transform 0.5s cubic-bezier(0.95, 0.05, 0.795, 0.035) 50ms;
+}
+.underline:hover::after {
+  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
+  transform: scaleX(1);
+}
+</style>
diff --git a/src/components/StripeAppbar.vue b/src/components/StripeAppbar.vue
new file mode 100644
index 0000000..35ea186
--- /dev/null
+++ b/src/components/StripeAppbar.vue
@@ -0,0 +1,15 @@
+<template>
+    <div>
+
+    </div>
+</template>
+
+<script>
+    export default {
+
+    }
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/views/stripe-appbar/Random.vue b/src/views/stripe-appbar/Random.vue
new file mode 100644
index 0000000..4f3cf86
--- /dev/null
+++ b/src/views/stripe-appbar/Random.vue
@@ -0,0 +1,28 @@
+<template>
+  <v-container style="width: 300px; height: 300px;">
+    <v-row>
+      <v-col>
+        <v-card flat>
+          <p class="ma-0 pa-0 headline">Random Content</p>
+          Random content that doesn't fit.
+        </v-card>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col>
+        <v-card flat>
+          <ul>
+            <li>Item one</li>
+            <li>Item two</li>
+          </ul>
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/stripe-appbar/Welcome.vue b/src/views/stripe-appbar/Welcome.vue
new file mode 100644
index 0000000..68915b1
--- /dev/null
+++ b/src/views/stripe-appbar/Welcome.vue
@@ -0,0 +1,21 @@
+<template>
+  <v-container>
+    <v-row>
+      <v-col>
+        <v-card flat class="ma-0 pa-0">
+          <p class="headline">Welcome Pages</p>
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.centre-text {
+  text-align: center;
+}
+</style>
diff --git a/src/views/stripe-appbar/WelcomeSecondary.vue b/src/views/stripe-appbar/WelcomeSecondary.vue
new file mode 100644
index 0000000..b25e710
--- /dev/null
+++ b/src/views/stripe-appbar/WelcomeSecondary.vue
@@ -0,0 +1,19 @@
+<template>
+<v-container>
+    <v-row>
+        <v-col style="width: 300px;">
+            Welcome Secondary Content
+        </v-col>
+    </v-row>
+</v-container>
+</template>
+
+<script>
+    export default {
+
+    }
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/temp.md b/temp.md
index 21080cd..15073df 100644
--- a/temp.md
+++ b/temp.md
@@ -121,8 +121,8 @@ You can use an svg (from envato) as a fullscreen background image. To do this yo
 If you do not need a transparent appbar:
 
 - Set an image
-    - with `position: absolute;`
-    - with `height: calc(100vh - 64px)`
+  - with `position: absolute;`
+  - with `height: calc(100vh - 64px)`
 
 ## Images that autoscale (zoom)
 
@@ -147,9 +147,8 @@ Open the EPS file in Graphic. Hide and delete all the layers you don't need. Whe
 You can have the appbar be transparent to have a background image fullscreen. To do this you should:
 
 - Set an image
-    - with `position: absolute;`
-    -
-
+  - with `position: absolute;`
+  -
 
 ## To Do
 
@@ -198,19 +197,14 @@ Medium: `960px >< 1264px`
 
 When at width of image background, can set to right:0 to crop from left, and left:0 to crop from right.
 
-
-
-
-
 Doc setting an image as background without transparent appbar
- Should show how to dynamically change height and left/right based on viewport (shorter appbar on small)
+Should show how to dynamically change height and left/right based on viewport (shorter appbar on small)
 
 Doc setting an image with transparent appbar
- Rather than change height you need to set top to negative
+Rather than change height you need to set top to negative
 
 Have examples of both of these to refer back to^
 
-
 ## Stripe appbar menu
 
 Install with yarn:
@@ -219,9 +213,79 @@ Install with yarn:
 Add to `main.js`:
 
 ```javascript
-import Vue from 'Vue'
-import VueStripeMenu from 'vue-stripe-menu'
-Vue.use(VueStripeMenu)
+import Vue from "Vue";
+import VueStripeMenu from "vue-stripe-menu";
+Vue.use(VueStripeMenu);
 // Import build styles
-import 'vue-stripe-menu/dist/vue-stripe-menu.css'
+import "vue-stripe-menu/dist/vue-stripe-menu.css";
 ```
+
+You should create Vue components for the content you want to display on hover.
+
+To use these in the appbar component, import the components:
+
+```javascript
+import Welcome from "./views/stripe-appbar/Welcome";
+import WelcomeSecondary from "./views/stripe-appbar/WelcomeSecondary";
+```
+
+Then you should create a menu object in `data`:
+
+```javascript
+data() {
+return {
+    menu: [
+    {
+        title: "Welcome",
+        dropdown: "welcome",
+        content: Welcome,
+        secondary: WelcomeSecondary,
+        element: "span"
+    },
+    {
+        title: "Welcome",
+        dropdown: "welcome",
+        content: Welcome,
+        secondary: WelcomeSecondary
+    }
+    ]
+};
+}
+```
+
+Then in the html you should create the appbar layout you need:
+
+```html
+<vsm-menu ref="header" :menu="menu" :screen-offset="25">
+  <template #default="data">
+    <component :is="data.item.content" class="content" />
+    <component :is="data.item.secondary" class="content--secondary" />
+  </template>
+</vsm-menu>
+```
+
+You can use css to control how the components should be rendered:
+
+```css
+.content {
+  padding: 20px;
+}
+.content--secondary {
+  padding: 20px;
+}
+```
+
+To control the width, you should set the `width` in the css in the components themsevles:
+
+```html
+<v-container>
+  <v-row>
+    <v-col style="width: 300px;">
+      Welcome Secondary Content
+    </v-col>
+  </v-row>
+</v-container>
+```
+
+To have two menu content sections top and bottom: use `content` and `secondary`.
+To have two menu content sections side by side: create the full layout in the Vue component.