diff --git a/src/AppFooter.vue b/src/AppFooter.vue
index 7e6037a5e..25e9bc828 100644
--- a/src/AppFooter.vue
+++ b/src/AppFooter.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="content-section layout-footer clearfix">
-        <span>PrimeVUE 1.0.0-beta.1</span>
+        <span>PrimeVUE 1.0.0-beta.3</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>
diff --git a/src/AppTopBar.vue b/src/AppTopBar.vue
index 064ea648a..fbd98e4bb 100644
--- a/src/AppTopBar.vue
+++ b/src/AppTopBar.vue
@@ -13,6 +13,8 @@
                 <transition name="p-input-overlay" @enter="onThemesMenuEnter" @leave="onThemesMenuLeave">
                     <ul v-if="themesMenuVisible">
                         <li class="topbar-submenu-header">THEMING</li>
+                        <li><router-link to="/theming" @click.native="hideThemesMenu()"><i class="pi pi-fw pi-file"/><span>Guide</span></router-link></li>
+                        <li><a href="https://www.primefaces.org/designer/primevue"><i class="pi pi-fw pi-cog" /><span>Designer</span></a></li>
                         <li><router-link to="/icons" @click.native="hideThemesMenu()"><i class="pi pi-fw pi-search"/><span>Icons</span></router-link></li>
                         <li class="topbar-submenu-header">FREE THEMES</li>
                         <li><a href="#" @click="changeTheme($event, 'nova-light', false)"><img src="./assets/images/layouts/themeswitcher-nova-light.png" alt="Nova Light" /><span>Nova Light</span></a></li>
diff --git a/src/assets/images/primevue-designer.jpg b/src/assets/images/primevue-designer.jpg
new file mode 100644
index 000000000..210a4bdff
Binary files /dev/null and b/src/assets/images/primevue-designer.jpg differ
diff --git a/src/router.js b/src/router.js
index 4555d43b8..d4686d12d 100644
--- a/src/router.js
+++ b/src/router.js
@@ -20,6 +20,11 @@ export default new Router({
 			path: '/support',
 			name: 'support',
 			component: () => import('./views/support/Support.vue')
+        },
+        {
+			path: '/theming',
+			name: 'theming',
+			component: () => import('./views/theming/Theming.vue')
 		},
 		{
 			path: '/icons',
diff --git a/src/views/theming/Theming.vue b/src/views/theming/Theming.vue
new file mode 100644
index 000000000..64594b6c2
--- /dev/null
+++ b/src/views/theming/Theming.vue
@@ -0,0 +1,37 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>Theming</h1>
+                <p>Choose from a variety of premium themes or develop your own theme using PrimeVue Theme Designer API.</p>
+            </div>
+        </div>
+
+        <div class="content-section documentation">
+            <h3 style="margin-top:0">Theme Designer API</h3>
+            <p><a href="https://www.primefaces.org/designer/primevue">Designer API</a> is the ultimate tool to create your own PrimeVue experience powered by a SASS based theme engine 
+                with 500+ variables and a demo application. In addition, PrimeVue only ships the generated CSS of <b>Nova</b>, <b>Luna</b> and <b>Rhea</b> themes whereas Designer provides
+                full access to the whole SASS structure and the variables of these pre-built themes.</p>
+
+            <p>Whether you have your own style guide or just need a custom theme, Designer API is the right tool to design and bring them to existence.</p>
+            
+            <p>Visit <a href="https://www.primefaces.org/designer/primevue">Designer API HomePage</a> for more information and live demos.</p>
+            <a href="http://www.primefaces.org/designer/primevue" class="designer-image">
+                <img alt="PrimeVue Designer" src="../../assets/images/primevue-designer.jpg" style="width: 100%" />
+            </a>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style scoped>
+.designer-image {
+    display: block;
+    margin-top: 30px;
+}
+</style>