diff --git a/src/App.vue b/src/App.vue
index 378c6f946..85d7f22b7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,41 +1,25 @@
 <template>
     <div class="layout-wrapper">
-        <div class="layout-topbar">
-            <a class="menu-button"><i class="pi pi-bars"></i></a>
-            <router-link to="/" class="logo">
-                <img alt="logo" src="./assets/images/primevue-logo.png">
-            </router-link>
-            <ul class="topbar-menu">
-                <li><router-link to="/setup">Get Started</router-link></li>
-                <li class="topbar-menu-themes">
-                    <a>Themes</a>
-                    <ul>
-                        <li class="topbar-submenu-header">THEMING</li>
-                        <li class="topbar-submenu-header">FREE THEMES</li>
-                    </ul>
-                </li>
-                <li><router-link to="/support">Support</router-link></li>
-            </ul>
-        </div>
-        <div class="layout-sidebar">
-        </div>
+        <app-topbar />
+        <app-menu />
         <div class="layout-content">
             <router-view/>
-
-            <div class="content-section layout-footer clearfix">
-                <span>Released under the MIT License,  Copyright © 2018 <a href="http://www.primetek.com.tr" target="_blank" rel="noopener noreferrer">PrimeTek</a></span>
-                <div class="footer-links">
-                    <a href="https://github.com/primefaces/primevue"><i class=" icon-github fa fa-github-square"></i></a>
-                    <a href="https://twitter.com/primevue"><i class="icon-twitter fa fa-twitter-square"></i></a>
-                </div>
-            </div>
+            <app-footer />
         </div>
     </div>
 </template>
 
 <script>
-export default {
+import AppTopBar from '@/AppTopBar.vue';
+import AppMenu from '@/AppMenu.vue';
+import AppFooter from '@/AppFooter.vue';
 
+export default {
+    components: {
+        'app-topbar': AppTopBar,
+        'app-menu': AppMenu,
+        'app-footer': AppFooter
+    }
 }
 </script>
 
diff --git a/src/AppFooter.vue b/src/AppFooter.vue
new file mode 100644
index 000000000..207a8d95c
--- /dev/null
+++ b/src/AppFooter.vue
@@ -0,0 +1,9 @@
+<template>
+    <div class="content-section layout-footer clearfix">
+        <span>Released under the MIT License,  Copyright © 2018 <a href="http://www.primetek.com.tr" target="_blank" rel="noopener noreferrer">PrimeTek</a></span>
+        <div class="footer-links">
+            <a href="https://github.com/primefaces/primevue"><i class=" icon-github fa fa-github-square"></i></a>
+            <a href="https://twitter.com/primevue"><i class="icon-twitter fa fa-twitter-square"></i></a>
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/src/AppMenu.vue b/src/AppMenu.vue
new file mode 100644
index 000000000..6fc2c72ac
--- /dev/null
+++ b/src/AppMenu.vue
@@ -0,0 +1,10 @@
+<template>
+    <div class="layout-sidebar">
+    </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
\ No newline at end of file
diff --git a/src/AppTopBar.vue b/src/AppTopBar.vue
new file mode 100644
index 000000000..7ba845746
--- /dev/null
+++ b/src/AppTopBar.vue
@@ -0,0 +1,19 @@
+<template>
+    <div class="layout-topbar">
+        <a class="menu-button"><i class="pi pi-bars"></i></a>
+        <router-link to="/" class="logo">
+            <img alt="logo" src="./assets/images/primevue-logo.png">
+        </router-link>
+        <ul class="topbar-menu">
+            <li><router-link to="/setup">Get Started</router-link></li>
+            <li class="topbar-menu-themes">
+                <a>Themes</a>
+                <ul>
+                    <li class="topbar-submenu-header">THEMING</li>
+                    <li class="topbar-submenu-header">FREE THEMES</li>
+                </ul>
+            </li>
+            <li><router-link to="/support">Support</router-link></li>
+        </ul>
+    </div>
+</template>
\ No newline at end of file