adding latest

src/App.vue

@@ -1,13 +1,8 @@
 <template>
-  <v-app>
+  <v-app :style="{ background: $vuetify.theme.themes.light.background }">
     <v-content>
       <Appbar></Appbar>
       <router-view></router-view>
-      <v-container>
-        <v-row>
-          Test
-        </v-row>
-      </v-container>
     </v-content>
   </v-app>
 </template>

src/components/Appbar.vue

@@ -1,29 +1,59 @@
 <template>
-  <v-container>
-    <v-app-bar flat color="indigo" app class="mb-6">
-      <!-- <template v-slot:img="{ props }">
-        <v-img bind="props"></v-img>
-      </template> -->
+  <!-- <v-container class="pb-0"> -->
+  <div>
+    <v-app-bar flat color="indigo" app class="hidden-md-and-up">
       <v-row>
-        <v-col>
-          <v-toolbar-title class="appTitle" d-flex justify-space-around mb-6>
-            Savvy Firebase tutorial
+        <v-col cols="8" class="appTitle d-flex justify-start">
+          <v-toolbar-title>
+            Savvy Firebase
           </v-toolbar-title>
         </v-col>
-        <v-spacer> </v-spacer>
-        <v-col cols="2">
+        <v-col cols="4" class="d-flex justify-end">
           <v-btn color="primary">
             Sign In
           </v-btn>
         </v-col>
-        <!-- <v-btn icon="">
-        <v-icon>
-          mdi-home
-        </v-icon>
-      </v-btn> -->
+        <!-- <v-col>
+          <v-btn color="primary">
+            Register
+          </v-btn>
+        </v-col> -->
       </v-row>
     </v-app-bar>
-  </v-container>
+    <v-app-bar
+      flat
+      app
+      class="hidden-sm-and-down"
+      src="https://www.stellamccartney.com/cloud/smcwp/uploads/2016/01/1920x1080-black-solid-color-background.jpg"
+    >
+      <template v-slot:img="{ props }">
+        <v-img
+          v-bind="props"
+          gradient="to top right, rgba(100,115,201,.7), rgba(25,32,72,.7)"
+        ></v-img>
+      </template>
+      <v-row>
+        <v-col cols="2"></v-col>
+        <v-col cols="4" class="appTitle d-flex justify-start">
+          <v-toolbar-title>
+            Savvy Firebase Tutorial
+          </v-toolbar-title>
+        </v-col>
+        <v-col>
+          <v-spacer> </v-spacer>
+        </v-col>
+        <v-col cols="2">
+          <v-btn color="primary" class="mr-2">
+            Sign In
+          </v-btn>
+          <v-btn color="primary">
+            Register
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-app-bar>
+    <!-- </v-container> -->
+  </div>
 </template>
 
 <script>

src/plugins/vuetify.js

@@ -7,5 +7,12 @@ Vue.use(Vuetify);
 export default new Vuetify({
   icons: {
     iconfont: "mdi"
+  },
+  theme: {
+      themes: {
+          light: {
+              background: "#EEEEEE"
+          }
+      }
   }
 });

src/views/Home.vue

@@ -1,7 +1,9 @@
 <template>
   <v-container>
     <v-row>
-      Hello
+      <v-col>
+        Hello
+      </v-col>
     </v-row>
   </v-container>
 </template>