diff --git a/collections/themes.json b/collections/themes.json
index 762570b..6ab3083 100644
--- a/collections/themes.json
+++ b/collections/themes.json
@@ -3,6 +3,7 @@
         "name" : "Anchor",
         "cover" : "https://cdn.devdojo.com/images/august2024/wave-anchor-theme.jpeg",
         "download" : "https://github.com/thedevdojo/wave/tree/main/resources/themes/anchor",
+        "preview" : "/wave/demo?theme=anchor",
         "slug" : "anchor",
         "description": "Anchor is the default theme available. This theme is clean with a sidebar app layout design.",
         "repo" : "https://github.com/thedevdojo/wave",
@@ -12,6 +13,7 @@
         "name" : "Blank",
         "cover" : "https://cdn.devdojo.com/images/august2024/blank.jpeg",
         "download" : "https://github.com/thedevdojo/blank/archive/refs/heads/main.zip",
+        "preview" : "/wave/demo?theme=blank",
         "slug" : "blank",
         "description": "This is a minimal blank theme that can be used to easily modify. It also contains a sidebar app layout.",
         "repo" : "https://github.com/thedevdojo/wave",
@@ -21,6 +23,7 @@
         "name" : "Cove",
         "cover" : "https://cdn.devdojo.com/images/august2024/cove-cover.jpeg",
         "download" : "https://github.com/thedevdojo/cove/archive/refs/heads/main.zip",
+        "preview" : "/wave/demo?theme=cove",
         "slug" : "cove",
         "description": "This blue colored theme is a good template for showcasing your SaaS. Top bar app layout",
         "repo" : "https://github.com/thedevdojo/wave",
@@ -30,6 +33,7 @@
         "name" : "Drift",
         "cover" : "https://cdn.devdojo.com/images/september2024/drift-theme.jpeg",
         "download" : "/wave/download/drift",
+        "preview" : "/wave/demo?theme=drift",
         "slug" : "drift",
         "description": "A clean and modern theme with a beautiful horizontal menu dashboard.",
         "repo" : "https://github.com/thedevdojo/wave",
@@ -39,6 +43,7 @@
         "name" : "Example",
         "cover" : "https://raw.githubusercontent.com/thedevdojo/example/main/theme.jpg",
         "download" : "https://github.com/thedevdojo/example/archive/refs/heads/main.zip",
+        "preview" : "https://github.com/thedevdojo/example/archive/refs/heads/main.zip",
         "slug" : "example",
         "description": "This is a simple starting point example theme.",
         "repo" : "https://github.com/thedevdojo/wave",
@@ -48,6 +53,7 @@
         "name" : "Fusion",
         "cover" : "https://cdn.devdojo.com/images/september2024/fusion-cover.jpeg",
         "download" : "/wave/download/fusion",
+        "preview" : "/wave/demo?theme=fusion",
         "slug" : "fusion",
         "description": "A modern and minimal dark theme for wave.",
         "repo" : "https://github.com/thedevdojo/wave",
diff --git a/includes/headerbar.html b/includes/headerbar.html
index c531dba..61ffdda 100644
--- a/includes/headerbar.html
+++ b/includes/headerbar.html
@@ -1,18 +1,4 @@
-<header
-    x-data="{ themeOpen: false, menuOpen: false, theme: 'anchor', themeImage: 'anchor', collapsed: false, isTouchDevice: false }" 
-    x-init="
-        iframe_src = demo_url + '?theme=' + theme;
-        $watch('theme', function(value){
-            iframe_src = demo_url + '?theme=' + theme;
-            themeOpen=false;
-            setTimeout(function(){
-                themeLoading=false;
-            }, 1500);
-        });
-
-        isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
-    "
-    class="relative z-[999999] ease-out duration-300" :class="{ '-mt-11' : collapsed }">
+<header class="relative z-[999999] ease-out duration-300" :class="{ '-mt-11' : collapsed }">
 
     <div x-show="themeOpen || menuOpen" x-on:click="menuOpen=false; themeOpen=false;" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0 z-20 bg-black/20 backdrop-blur" x-cloak></div>
 
diff --git a/layouts/plain.html b/layouts/plain.html
index 3fc5a01..32e73d7 100644
--- a/layouts/plain.html
+++ b/layouts/plain.html
@@ -13,7 +13,39 @@
     {tailwindcss}
 
 </head>
-<body class="w-screen overflow-hidden h-dvh" x-data="{ themeLoading:false, iframe_src: 'about:blank', demo_url: 'https://wavev3.devdojo.com', headerBarClasses: 'px-0' }">
+<body class="w-screen overflow-hidden h-dvh"
+    x-data="{ themeOpen: false, menuOpen: false, theme: 'anchor', themeImage: 'anchor', collapsed: false, isTouchDevice: false, themeLoading:false, iframe_src: 'about:blank', demo_url: 'https://wavev3.devdojo.com', headerBarClasses: 'px-0' }" 
+    x-init="
+        window.addEventListener('load', function() {
+            // Get the URL's query parameters
+            let urlParams = new URLSearchParams(window.location.search);
+
+            // console.log(urlParams);
+            // Get the value of the 'theme' parameter
+            let themeValue = urlParams.get('theme');
+
+            if(themeValue){
+                theme=themeValue;
+            }
+
+            iframe_src = demo_url + '?theme=' + theme;
+
+        //     setTimeout(function(){
+        //     $refs.iframe.contentWindow.location.reload(true);
+        // }, 2000);
+            isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+        });
+        
+
+        
+        $watch('theme', function(value){
+            iframe_src = demo_url + '?theme=' + theme;
+            themeOpen=false;
+            setTimeout(function(){
+                themeLoading=false;
+            }, 1500);
+        });
+    ">
     {slot}
 </body>
 </html>
diff --git a/pages/demo.html b/pages/demo.html
index 2e76171..f284a5e 100644
--- a/pages/demo.html
+++ b/pages/demo.html
@@ -3,7 +3,7 @@
 
         <include src="headerbar.html"></include>
 
-        <iframe :src="iframe_src" border="0" class="relative z-10 flex-1 w-screen bg-white h-100"></iframe>
+        <iframe id="iframe" x-ref="iframe" :src="iframe_src" border="0" class="relative z-10 flex-1 w-screen bg-white h-100"></iframe>
 
         <!-- <iframe src="https://wave.test" border="0" class="relative z-10 flex-1 w-screen bg-white h-100"></iframe> -->
 
diff --git a/pages/templates.html b/pages/templates.html
deleted file mode 100644
index 0c9f16a..0000000
--- a/pages/templates.html
+++ /dev/null
@@ -1 +0,0 @@
-<layout url="{ url('/themes') }" src="redirect.html"></layout>
\ No newline at end of file
diff --git a/pages/themes.html b/pages/themes.html
index c089f3d..1198bf5 100644
--- a/pages/themes.html
+++ b/pages/themes.html
@@ -11,21 +11,21 @@ <h1 class="text-3xl font-bold sm:text-4xl text-neutral-950 dark:text-neutral-100
             <div class="grid items-center justify-center w-full h-auto grid-cols-1 gap-6 mx-auto max-w-7xl sm:grid-cols-2 lg:grid-cols-3 md:gap-10">
                 
                 <ForEach collection="themes" as="theme">
-                    <div x-data @click="window.open('{theme.download}', '_blank')"
-                        class="flex w-full overflow-hidden transition-all duration-75 ease-out border rounded-md cursor-pointer opacity-95 border-neutral-200/80 dark:border-neutral-800 sm:rounded-xl sm:shadow-sm group hover:opacity-100">
+                    <div x-data
+                        class="flex w-full overflow-hidden transition-all duration-75 ease-out border rounded-md opacity-95 border-neutral-200/80 dark:border-neutral-800 sm:rounded-xl sm:shadow-sm hover:opacity-100">
                         <div class="flex flex-col">
-                            <div class="relative overflow-hidden">
-                                <img src="{theme.cover}" class="w-full relative z-10 group-hover:scale-[1.02] transition-all ease-out duration-300 overflow-hidden h-auto">
-                                <If condition="theme.access == 'pro'">
-                                    <span class="inline-flex absolute top-0 right-0 mr-2 mt-2 z-20 items-center gap-x-1.5 py-0.5 bg-blue-600 text-xs/5 text-white font-medium px-2 rounded-md">
-                                        <svg class="w-3 h-3 text-white fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z"/></svg>
-                                        <span>Pro</span>
-                                    </span>
-                                </If>
-                            </div>
-                            <div class="relative">
+                            <div @click="window.open('{theme.preview}', '_blank')" class="relative w-full cursor-pointer group">
+                                <div class="relative overflow-hidden">
+                                    <img src="{theme.cover}" class="w-full relative z-10 group-hover:scale-[1.02] transition-all ease-out duration-300 overflow-hidden h-auto">
+                                    <If condition="theme.access == 'pro'">
+                                        <span class="inline-flex absolute top-0 right-0 mr-2 mt-2 z-20 items-center gap-x-1.5 py-0.5 bg-blue-600 text-xs/5 text-white font-medium px-2 rounded-md">
+                                            <svg class="w-3 h-3 text-white fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z"/></svg>
+                                            <span>Pro</span>
+                                        </span>
+                                    </If>
+                                </div>
                                 <div class="flex items-center w-full p-5">
-                                    
+                                        
                                     <div class="relative flex flex-col items-start justify-start h-auto space-y-2">
                                         <h3 class="relative flex items-center -mt-px text-lg font-semibold leading-none text-neutral-800 dark:text-neutral-200 dark:group-hover:text-neutral-100 group-hover:text-neutral-900">
                                             <span>{theme.name}</span>
@@ -34,19 +34,33 @@ <h3 class="relative flex items-center -mt-px text-lg font-semibold leading-none
                                         <p class="text-sm text-black/60 dark:text-white/60 dark:group-hover:text-white/80 group-hover:text-black/80">{theme.description}</p>
                                     </div>
                                 </div>
+                            </div>
+                            <div class="relative">
                             
                                 
-                                <div class="flex justify-center p-3 border-t border-neutral-200 dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-800">
-                                    <If condition="theme.slug != 'anchor'">
-                                        <button class="inline-flex z-10 justify-center px-3.5 py-2.5 w-full text-sm font-semibold text-white bg-neutral-900 dark:bg-neutral-100 dark:text-neutral-900 hover:bg-white rounded-lg shadow-lg group hover:bg-black">
-                                            <span>Download {theme.name} Theme</span>
-                                        </button>
-                                    </If>
-                                    <If condition="theme.slug == 'anchor'">
-                                        <div class="px-3.5 py-2.5 w-full text-sm font-semibold text-center bg-white dark:bg-neutral-900 rounded-lg border dark:text-neutral-400 border-neutral-300 dark:border-neutral-700 border-dashed">
-                                            Default Theme Available in Wave
-                                        </div>
-                                    </If>
+                                <div class="flex justify-center px-2.5 py-2 border-t border-neutral-200 dark:border-neutral-700 bg-neutral-100 dark:bg-neutral-800">
+                                    <div class="relative flex items-center w-full space-x-2">
+                                        <If condition="theme.slug != 'anchor'">
+                                            <button @click="window.open('{theme.download}', '_blank')" class="z-10 inline-flex justify-center items-center space-x-1.5 w-full px-3 py-2 text-sm font-semibold text-white rounded-md shadow-lg group bg-neutral-900 hover:bg-black">
+                                                <span>Download</span>
+                                            </button>
+                                        </If>
+                                        <If condition="theme.slug == 'anchor'">
+                                            <div class="flex items-center justify-center w-full px-3 py-2 text-sm font-semibold text-center bg-white border border-dashed rounded-md dark:bg-neutral-900 dark:text-neutral-400 border-neutral-300 dark:border-neutral-700">
+                                                <span>Default Theme</span>
+                                            </div>
+                                        </If>
+                                        <If condition="theme.slug != 'example'">
+                                            <button @click="window.open('{theme.preview}', '_blank')" class="flex items-center justify-center w-full group px-3 py-2 border border-neutral-200/60 space-x-1.5 text-sm font-medium text-center duration-300 ease-out rounded-md bg-white text-neutral-800">
+                                                <span class="duration-300 ease-out">Preview</span>
+                                            </button>
+                                        </If>
+                                        <If condition="theme.slug == 'example'">
+                                            <div class="flex items-center justify-center w-full group cursor-not-allowed px-3 py-2 border border-neutral-200/60 space-x-1.5 text-sm font-medium text-center duration-300 ease-out rounded-md bg-neutral-100 text-neutral-800">
+                                                <span class="duration-300 ease-out">No Preview</span>
+                                            </div>
+                                        </If>
+                                    </div>
                                 </div>
                                 
                             </div>