diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 50b902d..5373295 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -7,16 +7,50 @@ import { Toaster } from "@/components/ui/sonner";
 
 <template>
   <div>
-    <header class="flex justify-end p-4 space-x-4">
-      <ThemeDropdown />
-      <ClientOnly>
-        <SignedOut>
-          <SignInDialog />
-        </SignedOut>
-        <SignedIn>
-          <UserButton />
-        </SignedIn>
-      </ClientOnly>
+    <header class="flex justify-between items-center p-4">
+      <div class="flex items-center space-x-6">
+        <NuxtLink to="/" class="text-xl font-semibold hover:opacity-80 transition-opacity">
+          helium
+        </NuxtLink>
+        <nav class="flex space-x-4">
+          <NuxtLink 
+            to="/" 
+            class="text-sm font-medium hover:text-primary transition-colors"
+            active-class="text-primary"
+          >
+            Home
+          </NuxtLink>
+          <NuxtLink 
+            to="/stream" 
+            class="text-sm font-medium hover:text-primary transition-colors"
+            active-class="text-primary"
+          >
+            Stream
+          </NuxtLink>
+          <ClientOnly>
+            <SignedIn>
+              <NuxtLink 
+                to="/presets" 
+                class="text-sm font-medium hover:text-primary transition-colors"
+                active-class="text-primary"
+              >
+                Presets
+              </NuxtLink>
+            </SignedIn>
+          </ClientOnly>
+        </nav>
+      </div>
+      <div class="flex space-x-4">
+        <ThemeDropdown />
+        <ClientOnly>
+          <SignedOut>
+            <SignInDialog />
+          </SignedOut>
+          <SignedIn>
+            <UserButton />
+          </SignedIn>
+        </ClientOnly>
+      </div>
     </header>
     <slot />
     <Toaster />
diff --git a/app/pages/presets/index.vue b/app/pages/presets/index.vue
index 8986339..a76eb1b 100644
--- a/app/pages/presets/index.vue
+++ b/app/pages/presets/index.vue
@@ -1,5 +1,13 @@
 <template>
-  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 px-4">
+  <div class="px-4">
+    <div class="flex justify-between items-center mb-6">
+      <h1 class="text-3xl font-bold">Presets</h1>
+      <Button @click="navigateTo('/presets/new')">
+        <Plus class="mr-2 h-4 w-4" />
+        Create New Preset
+      </Button>
+    </div>
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
     <div v-for="presetUser in data!.data" :key="presetUser.preset.id">
       <Card class="flex flex-col h-full">
         <CardHeader>
@@ -55,6 +63,7 @@
         </CardFooter>
       </Card>
     </div>
+    </div>
 
     <EditPresetDialog
       v-if="selectedPresetUser"
@@ -79,7 +88,7 @@ import {
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import EditPresetDialog from "~/components/app/EditPresetDialog.vue";
-import { Edit, Share2, Trash } from "lucide-vue-next";
+import { Edit, Share2, Trash, Plus } from "lucide-vue-next";
 import type { ApiResponse } from "~/lib/types/PresetGetResponse";
 
 const { user } = useUser();
diff --git a/nuxt.config.ts b/nuxt.config.ts
index b450184..493afb4 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -7,6 +7,9 @@ export default defineNuxtConfig({
   css: ["~/assets/css/tailwind.css"],
   vite: {
     plugins: [tailwindcss()],
+    server: {
+      allowedHosts: ["urods-79-145-156-36.a.free.pinggy.link"],
+    },
   },
   modules: [
     "shadcn-nuxt",