diff --git a/src/App.vue b/src/App.vue
index e06a476..ac5529c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,15 +1,35 @@
 <template>
   <v-app>
     <v-main>
-      <component :is="module"></component>
+      <v-app-bar flat color="white">
+        <v-icon large left color="orange darken-4">mdi-weather-sunset</v-icon>
+
+        <v-toolbar-title v-if="$vuetify.breakpoint.mdAndUp"
+          >Demo aplikacji pogodowej</v-toolbar-title
+        >
+
+        <v-spacer></v-spacer>
+
+        <v-toolbar-items>
+          <v-btn text>
+            <span>Wyloguj</span>
+            <v-icon right>mdi-logout</v-icon>
+          </v-btn>
+        </v-toolbar-items>
+      </v-app-bar>
+      <v-row justify="center" class="ma-2">
+        <v-col cols="12" sm="11" md="10" lg="9" xl="8">
+          <component :is="module"></component>
+        </v-col>
+      </v-row>
     </v-main>
   </v-app>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
-import Login from "@/components/Login.vue";
-import Forecast from "@/components/Forecast.vue";
+import Login from "@/views/Login.vue";
+import Forecast from "@/views/Forecast.vue";
 
 @Component({
   components: {
@@ -25,5 +45,5 @@ export default class App extends Vue {
   get module() {
     return this.auth ? Forecast : Login;
   }
-};
+}
 </script>
diff --git a/src/components/Forecast.vue b/src/views/Forecast.vue
similarity index 67%
rename from src/components/Forecast.vue
rename to src/views/Forecast.vue
index a76f207..80871d5 100644
--- a/src/components/Forecast.vue
+++ b/src/views/Forecast.vue
@@ -1,5 +1,7 @@
 <template>
-  <p>Forecast</p>
+  <v-card flat tile>
+    <v-card-title>Prognoza pogody</v-card-title>
+  </v-card>
 </template>
 
 <script lang="ts">
diff --git a/src/components/Login.vue b/src/views/Login.vue
similarity index 100%
rename from src/components/Login.vue
rename to src/views/Login.vue