diff --git a/.gitignore b/.gitignore
index 2c7f28e..ff32fa6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -21,6 +21,11 @@
 /.next/
 /out/
 
+# nuxt
+.nuxt
+.nitro
+.output
+
 # production
 /build
 
@@ -47,3 +52,17 @@ next-env.d.ts
 # wrangler files
 .wrangler
 .dev.vars
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# Logs
+logs
+*.log
+
+# Cache
+.cache
+.parcel-cache
diff --git a/README.md b/README.md
index 46b19c1..30317af 100644
--- a/README.md
+++ b/README.md
@@ -33,19 +33,19 @@ Try it online: [cloudmark.site](https://cloudmark.site)
 
 ### Prerequisites
 
-- Node.js 15+ and pnpm
+- Node.js 18+ and npm/yarn
 - Cloudflare account (for preview and deployment)
 
 ### Install Dependencies
 
 ```bash
-pnpm install
+npm install
 ```
 
 ### Development Mode
 
 ```bash
-pnpm dev
+npm run dev
 ```
 
 Visit [http://localhost:3000](http://localhost:3000) to see the result.
@@ -53,13 +53,13 @@ Visit [http://localhost:3000](http://localhost:3000) to see the result.
 ### Local Preview with Cloudflare Pages
 
 ```bash
-pnpm preview
+npm run preview
 ```
 
 ### Build and Deploy
 
 ```bash
-pnpm deploy
+npm run deploy
 ```
 
 ## Cloudflare Configuration
@@ -85,11 +85,27 @@ Cloudmark uses Cloudflare KV to store bookmark data. You need to:
 
 ## Technology Stack
 
-- [Next.js](https://nextjs.org/) - React framework
+- [Nuxt 3](https://nuxt.com/) - Vue.js framework
+- [Vue 3](https://vuejs.org/) - Progressive JavaScript framework
 - [Cloudflare Pages](https://pages.cloudflare.com/) - Hosting and serverless functions
 - [Cloudflare KV](https://developers.cloudflare.com/workers/runtime-apis/kv/) - Data storage
 - [Tailwind CSS](https://tailwindcss.com/) - Styling
-- [Next-Intl](https://next-intl-docs.vercel.app/) - Internationalization
+- [Vue i18n](https://vue-i18n.intlify.dev/) - Internationalization
+- [TypeScript](https://www.typescriptlang.org/) - Type safety
+
+## Migration from Next.js
+
+This project has been migrated from Next.js + React to Nuxt 3 + Vue 3. Key changes include:
+
+- **Framework**: Next.js → Nuxt 3
+- **UI Library**: React → Vue 3 with Composition API
+- **Routing**: Next.js Router → Vue Router (via Nuxt)
+- **State Management**: React hooks → Vue Composition API
+- **Server**: Next.js API Routes → Nuxt 3 Server API
+- **Internationalization**: next-intl → Vue i18n
+- **Build**: Next.js build → Nitro (Nuxt's build engine)
+
+All functionality has been preserved while modernizing the tech stack.
 
 ## License
 
diff --git a/assets/css/main.css b/assets/css/main.css
new file mode 100644
index 0000000..b58c4d4
--- /dev/null
+++ b/assets/css/main.css
@@ -0,0 +1,209 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96%;
+    --secondary-foreground: 222.2 84% 4.9%;
+    --muted: 210 40% 96%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96%;
+    --accent-foreground: 222.2 84% 4.9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* Custom animations */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateX(-30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.animate-fadeIn {
+  animation: fadeIn 0.6s ease-out forwards;
+}
+
+.animate-fadeUp {
+  animation: fadeUp 0.6s ease-out forwards;
+}
+
+.animate-scaleIn {
+  animation: scaleIn 0.6s ease-out forwards;
+}
+
+.animate-slideIn {
+  animation: slideIn 0.6s ease-out forwards;
+}
+
+/* Animation delays */
+.animation-delay-200 {
+  animation-delay: 200ms;
+}
+
+.animation-delay-400 {
+  animation-delay: 400ms;
+}
+
+.animation-delay-600 {
+  animation-delay: 600ms;
+}
+
+.animation-delay-700 {
+  animation-delay: 700ms;
+}
+
+.animation-delay-800 {
+  animation-delay: 800ms;
+}
+
+.animation-delay-900 {
+  animation-delay: 900ms;
+}
+
+/* Stagger animations */
+.stagger-container {
+  --stagger-delay: 100ms;
+}
+
+.stagger-item {
+  opacity: 0;
+  animation: fadeIn 0.6s ease-out forwards;
+}
+
+.stagger-item:nth-child(1) { animation-delay: calc(1 * var(--stagger-delay)); }
+.stagger-item:nth-child(2) { animation-delay: calc(2 * var(--stagger-delay)); }
+.stagger-item:nth-child(3) { animation-delay: calc(3 * var(--stagger-delay)); }
+.stagger-item:nth-child(4) { animation-delay: calc(4 * var(--stagger-delay)); }
+.stagger-item:nth-child(5) { animation-delay: calc(5 * var(--stagger-delay)); }
+.stagger-item:nth-child(6) { animation-delay: calc(6 * var(--stagger-delay)); }
+.stagger-item:nth-child(7) { animation-delay: calc(7 * var(--stagger-delay)); }
+.stagger-item:nth-child(8) { animation-delay: calc(8 * var(--stagger-delay)); }
+.stagger-item:nth-child(9) { animation-delay: calc(9 * var(--stagger-delay)); }
+
+/* Interactive elements */
+.hover-scale {
+  transition: transform 0.2s ease-in-out;
+}
+
+.hover-scale:hover {
+  transform: scale(1.05);
+}
+
+.active-scale:active {
+  transform: scale(0.95);
+}
+
+/* Feature card animations */
+.feature-card {
+  transition: all 0.3s ease;
+}
+
+.feature-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+}
+
+/* Delay classes for animations */
+.delay-100 { animation-delay: 100ms; }
+.delay-200 { animation-delay: 200ms; }
+.delay-300 { animation-delay: 300ms; }
+.delay-400 { animation-delay: 400ms; }
+.delay-500 { animation-delay: 500ms; }
+.delay-600 { animation-delay: 600ms; }
+.delay-700 { animation-delay: 700ms; }
+.delay-800 { animation-delay: 800ms; }
+.delay-900 { animation-delay: 900ms; }
\ No newline at end of file
diff --git a/components/AppFooter.vue b/components/AppFooter.vue
new file mode 100644
index 0000000..541e12c
--- /dev/null
+++ b/components/AppFooter.vue
@@ -0,0 +1,24 @@
+<template>
+  <footer class="border-t border-border/40 mt-auto">
+    <div class="container flex flex-col gap-2 py-6 text-center">
+      <p class="text-xs text-muted-foreground">
+        Released under the AGPL License.
+      </p>
+      <p class="text-xs text-muted-foreground">
+        Copyright © {{ currentYear }}
+        <NuxtLink
+          to="https://github.com/wesleyel"
+          class="hover:text-primary"
+          target="_blank"
+          external
+        >
+          Wesley Yang
+        </NuxtLink>
+      </p>
+    </div>
+  </footer>
+</template>
+
+<script setup lang="ts">
+const currentYear = new Date().getFullYear()
+</script>
\ No newline at end of file
diff --git a/components/AppHeader.vue b/components/AppHeader.vue
new file mode 100644
index 0000000..93398c5
--- /dev/null
+++ b/components/AppHeader.vue
@@ -0,0 +1,52 @@
+<template>
+  <header class="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+    <div class="container flex h-14 items-center">
+      <!-- Logo -->
+      <NuxtLink
+        to="/"
+        class="flex items-center space-x-2 transition-transform duration-200 hover:scale-105"
+      >
+        <img
+          src="/icon1.svg"
+          alt="Cloudmark logo"
+          width="24"
+          height="24"
+          class="h-6 w-6 text-primary"
+        />
+        <span class="font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-purple-500">
+          Cloudmark
+        </span>
+      </NuxtLink>
+
+      <!-- Navigation -->
+      <nav class="ml-auto flex gap-2 sm:gap-4 items-center">
+        <NuxtLink
+          to="/doc"
+          class="flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium text-muted-foreground hover:text-primary hover:bg-primary/5 transition-colors duration-200"
+          prefetch
+        >
+          <Icon name="lucide:file-text" class="h-4 w-4" />
+          <span class="hidden sm:inline">{{ $t('Navigation.quickstart') }}</span>
+        </NuxtLink>
+        
+        <NuxtLink
+          to="https://github.com/wesleyel/cloudmark"
+          external
+          target="_blank"
+          class="flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium text-muted-foreground hover:text-primary hover:bg-primary/5 transition-colors duration-200"
+        >
+          <Icon name="lucide:github" class="h-4 w-4" />
+          <span class="hidden sm:inline">{{ $t('Navigation.github') }}</span>
+        </NuxtLink>
+        
+        <div class="pl-1 border-border/40">
+          <LanguageSwitcher />
+        </div>
+      </nav>
+    </div>
+  </header>
+</template>
+
+<script setup lang="ts">
+const { t } = useI18n()
+</script>
\ No newline at end of file
diff --git a/components/BookmarkCard.vue b/components/BookmarkCard.vue
new file mode 100644
index 0000000..dd5cc47
--- /dev/null
+++ b/components/BookmarkCard.vue
@@ -0,0 +1,130 @@
+<template>
+  <div class="group relative h-full">
+    <div class="relative h-full bg-card rounded-xl border border-border/60 hover:border-border/80 transition-all duration-300 overflow-hidden shadow-sm hover:shadow-md">
+      <!-- 悬停时的渐变背景 -->
+      <div class="absolute inset-0 bg-gradient-to-br from-blue-500/5 via-transparent to-purple-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+      
+      <!-- 卡片内容 -->
+      <div class="relative flex flex-col h-full p-6">
+        <!-- 头部：图标和操作按钮 -->
+        <div class="flex items-start justify-between gap-4 mb-4">
+          <div class="flex-shrink-0">
+            <img
+              :src="bookmark.favicon"
+              :alt="`${bookmark.title} favicon`"
+              class="w-8 h-8 rounded-sm object-cover"
+              loading="lazy"
+              @error="onFaviconError"
+            />
+          </div>
+          
+          <div class="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
+            <DialogEdit
+              :bookmark="bookmark"
+              :mark="mark"
+              :categories="categories"
+              @bookmark-updated="(updatedBookmark) => $emit('bookmark-updated', updatedBookmark)"
+            />
+            <DialogDelete
+              :bookmark="bookmark"
+              :mark="mark"
+              @bookmark-deleted="() => $emit('bookmark-deleted')"
+            />
+          </div>
+        </div>
+
+        <!-- 标题和链接 -->
+        <div class="flex-1 min-h-0">
+          <a
+            :href="bookmark.url"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="block group-hover:text-primary transition-colors duration-200"
+          >
+            <h3 class="font-semibold text-lg mb-2 line-clamp-2 leading-tight">
+              {{ bookmark.title }}
+            </h3>
+          </a>
+          
+          <!-- 描述 -->
+          <p
+            v-if="bookmark.description"
+            class="text-muted-foreground text-sm line-clamp-3 mb-4"
+          >
+            {{ bookmark.description }}
+          </p>
+        </div>
+
+        <!-- 底部：分类和时间 -->
+        <div class="flex items-center justify-between gap-2 pt-4 border-t border-border/40">
+          <span class="inline-flex items-center px-2 py-1 rounded-md text-xs font-medium bg-secondary/50 text-secondary-foreground">
+            {{ bookmark.category }}
+          </span>
+          
+          <time 
+            :datetime="bookmark.createdAt"
+            class="text-xs text-muted-foreground"
+            :title="`Created: ${formatDate(bookmark.createdAt)}`"
+          >
+            {{ formatRelativeTime(bookmark.createdAt) }}
+          </time>
+        </div>
+      </div>
+
+      <!-- 外部链接指示器 -->
+      <div class="absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
+        <Icon name="lucide:external-link" class="h-4 w-4 text-muted-foreground" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { BookmarkInstance } from '~/types'
+import { format, formatDistanceToNow } from 'date-fns'
+
+interface Props {
+  bookmark: BookmarkInstance
+  mark: string
+  categories: string[]
+}
+
+interface Emits {
+  (e: 'bookmark-updated', bookmark: BookmarkInstance): void
+  (e: 'bookmark-deleted'): void
+}
+
+const props = defineProps<Props>()
+defineEmits<Emits>()
+
+// Fallback for broken favicons
+const onFaviconError = (event: Event) => {
+  const img = event.target as HTMLImageElement
+  img.src = `https://www.google.com/s2/favicons?domain=${getDomain(props.bookmark.url)}&sz=32`
+}
+
+// Date formatting utilities
+const formatDate = (dateString: string) => {
+  return format(new Date(dateString), 'PPp')
+}
+
+const formatRelativeTime = (dateString: string) => {
+  return formatDistanceToNow(new Date(dateString), { addSuffix: true })
+}
+</script>
+
+<style scoped>
+.line-clamp-2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.line-clamp-3 {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+</style>
\ No newline at end of file
diff --git a/components/BookmarkUI.vue b/components/BookmarkUI.vue
new file mode 100644
index 0000000..e3ef6f2
--- /dev/null
+++ b/components/BookmarkUI.vue
@@ -0,0 +1,182 @@
+<template>
+  <div class="container relative">
+    <!-- 悬浮导航 -->
+    <FloatingNav :categories="validCategories" :bookmarks-data="bookmarksData" />
+
+    <!-- 装饰背景元素 -->
+    <div class="fixed inset-0 -z-10">
+      <div class="absolute top-0 right-0 w-[40rem] h-[40rem] bg-blue-500/10 rounded-full blur-3xl transform -translate-y-12 translate-x-12" />
+      <div class="absolute bottom-0 left-0 w-[50rem] h-[50rem] bg-purple-500/10 rounded-full blur-3xl transform translate-y-12 -translate-x-12" />
+      <div class="absolute bottom-1/3 right-1/4 w-[30rem] h-[30rem] bg-indigo-500/5 rounded-full blur-3xl" />
+    </div>
+
+    <div class="py-12 lg:py-16 scroll-smooth">
+      <DemoBanner :mark="mark" />
+
+      <!-- 标题区域 -->
+      <div class="title-area flex flex-col md:flex-row justify-between items-start md:items-center mb-10 gap-6">
+        <div>
+          <div class="title-text flex items-center gap-2 mb-2">
+            <h1 class="text-3xl font-bold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-blue-500 via-indigo-500 to-purple-500">
+              {{ $t('BookmarksPage.title') }}
+            </h1>
+          </div>
+          <p class="subtitle-text text-muted-foreground">
+            {{ $t('BookmarksPage.collection', { mark }) }}
+          </p>
+        </div>
+
+        <div class="flex flex-col sm:flex-row gap-3">
+          <DialogAdd
+            :mark="mark"
+            :categories="categories"
+            @bookmark-added="onBookmarkAdded"
+          />
+
+          <div>
+            <BookmarkletButton :mark="mark" :base-url="baseUrl" />
+            <div class="hidden sm:flex items-center mt-1 text-xs text-muted-foreground">
+              <span class="animate-pulse">↑</span>
+              <span class="ml-1">{{ $t('BookmarksPage.dragTip') }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 书签列表 -->
+      <div v-if="bookmarksData && bookmarksData.bookmarks.length > 0 && validCategories.length > 0" class="stagger-container space-y-8">
+        <div
+          v-for="(category, categoryIndex) in validCategories"
+          :key="category"
+          :id="`category-${category}`"
+          :class="`stagger-item delay-${categoryIndex * 100} overflow-hidden scroll-mt-24`"
+        >
+          <template v-if="getCategoryBookmarks(category).length > 0">
+            <div class="flex items-center gap-2 mb-4">
+              <div class="flex items-center px-3 py-1.5 bg-primary/10 text-primary rounded-lg">
+                <Icon name="lucide:layers" class="h-4 w-4 mr-2 opacity-70" />
+                <h3 class="text-md font-medium">{{ category }}</h3>
+              </div>
+              <div class="text-sm text-muted-foreground">
+                ({{ getCategoryBookmarks(category).length }})
+              </div>
+            </div>
+            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+              <div
+                v-for="(bookmark, index) in getCategoryBookmarks(category)"
+                :key="bookmark.uuid"
+                :class="`h-full w-full delay-${(index % 9) * 100}`"
+              >
+                <BookmarkCard
+                  :bookmark="bookmark"
+                  :mark="mark"
+                  :categories="categories"
+                  @bookmark-updated="onUpdateBookmark"
+                  @bookmark-deleted="() => onDeleteBookmark(bookmark.uuid)"
+                />
+              </div>
+            </div>
+          </template>
+        </div>
+      </div>
+
+      <!-- 空状态 -->
+      <div v-else class="empty-state text-center py-16 px-4">
+        <div class="max-w-md mx-auto">
+          <div class="bg-card/50 backdrop-blur-sm border border-border/60 rounded-xl p-8 shadow-sm">
+            <div class="flex justify-center mb-4">
+              <div class="relative w-16 h-16 flex items-center justify-center">
+                <div class="absolute inset-0 bg-blue-500/10 rounded-full blur-md"></div>
+                <Icon name="lucide:search" class="h-8 w-8 text-muted-foreground" />
+              </div>
+            </div>
+            <p class="text-muted-foreground text-lg mb-6">
+              {{ $t('BookmarksPage.noBookmarks') }}
+            </p>
+            <div class="hover-scale flex justify-center">
+              <DialogAdd
+                :mark="mark"
+                :categories="categories"
+                @bookmark-added="onBookmarkAdded"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { BookmarkInstance, BookmarksData } from '~/types'
+
+interface Props {
+  mark: string
+  bookmarksData: BookmarksData | null
+  categories: string[]
+  baseUrl: string
+}
+
+const props = defineProps<Props>()
+
+const { t } = useI18n()
+
+// Reactive state
+const currentBookmarksData = ref<BookmarksData | null>(props.bookmarksData)
+
+// Computed properties
+const validCategories = computed(() => 
+  props.categories.filter((cat) => cat.trim() !== "")
+)
+
+// Methods
+const getCategoryBookmarks = (category: string) => {
+  if (!currentBookmarksData.value) return []
+  return currentBookmarksData.value.bookmarks.filter(
+    (b) => b.category === category
+  )
+}
+
+const refreshBookmarks = () => {
+  navigateTo(`/${props.mark}`)
+}
+
+const onBookmarkAdded = (bookmark: BookmarkInstance) => {
+  if (currentBookmarksData.value) {
+    currentBookmarksData.value = {
+      ...currentBookmarksData.value,
+      bookmarks: [...currentBookmarksData.value.bookmarks, bookmark],
+    }
+    refreshBookmarks()
+  }
+}
+
+const onUpdateBookmark = (bookmark: BookmarkInstance) => {
+  if (currentBookmarksData.value) {
+    currentBookmarksData.value = {
+      ...currentBookmarksData.value,
+      bookmarks: currentBookmarksData.value.bookmarks.map((b) =>
+        b.uuid === bookmark.uuid ? bookmark : b
+      ),
+    }
+    refreshBookmarks()
+  }
+}
+
+const onDeleteBookmark = (uuid: string) => {
+  if (currentBookmarksData.value) {
+    currentBookmarksData.value = {
+      ...currentBookmarksData.value,
+      bookmarks: currentBookmarksData.value.bookmarks.filter(
+        (b) => b.uuid !== uuid
+      ),
+    }
+    refreshBookmarks()
+  }
+}
+
+// Watch for props changes
+watch(() => props.bookmarksData, (newData) => {
+  currentBookmarksData.value = newData
+})
+</script>
\ No newline at end of file
diff --git a/components/BookmarkletButton.vue b/components/BookmarkletButton.vue
new file mode 100644
index 0000000..f3e2d0e
--- /dev/null
+++ b/components/BookmarkletButton.vue
@@ -0,0 +1,60 @@
+<template>
+  <button
+    ref="bookmarkletRef"
+    @click="copyBookmarklet"
+    class="inline-flex items-center gap-2 rounded-lg border border-input bg-background px-4 py-2 text-sm font-medium shadow-sm hover:bg-accent hover:text-accent-foreground transition-colors"
+    :title="$t('Components.BookmarkletButton.dragToBookmarks')"
+  >
+    <Icon name="lucide:bookmark" class="h-4 w-4" />
+    {{ $t('Components.BookmarkletButton.bookmarklet') }}
+  </button>
+</template>
+
+<script setup lang="ts">
+import { toast } from 'vue-sonner'
+
+interface Props {
+  mark: string
+  baseUrl: string
+}
+
+const props = defineProps<Props>()
+const { t } = useI18n()
+
+const bookmarkletRef = ref<HTMLElement>()
+
+const bookmarkletCode = computed(() => {
+  return `javascript:(function(){
+    const url = encodeURIComponent(window.location.href);
+    const title = encodeURIComponent(document.title);
+    const bookmarkUrl = '${props.baseUrl}/api/bookmarks/add?mark=${props.mark}&url=' + url + '&title=' + title;
+    window.open(bookmarkUrl, '_blank');
+  })();`
+})
+
+const copyBookmarklet = async () => {
+  try {
+    await navigator.clipboard.writeText(bookmarkletCode.value)
+    toast.success(t('Components.BookmarkletButton.copied'))
+  } catch (error) {
+    console.error('Failed to copy bookmarklet:', error)
+    toast.error(t('Components.BookmarkletButton.copyFailed'))
+  }
+}
+
+// Set up bookmarklet as draggable link
+onMounted(() => {
+  if (bookmarkletRef.value) {
+    const element = bookmarkletRef.value as HTMLAnchorElement
+    element.href = bookmarkletCode.value
+    element.draggable = true
+    
+    element.addEventListener('dragstart', (e) => {
+      if (e.dataTransfer) {
+        e.dataTransfer.setData('text/uri-list', bookmarkletCode.value)
+        e.dataTransfer.setData('text/plain', bookmarkletCode.value)
+      }
+    })
+  }
+})
+</script>
\ No newline at end of file
diff --git a/components/DemoBanner.vue b/components/DemoBanner.vue
new file mode 100644
index 0000000..7624c53
--- /dev/null
+++ b/components/DemoBanner.vue
@@ -0,0 +1,45 @@
+<template>
+  <div v-if="isDemoMark(mark)" class="mb-8">
+    <div class="bg-gradient-to-r from-yellow-50 to-orange-50 dark:from-yellow-900/20 dark:to-orange-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4">
+      <div class="flex items-start gap-3">
+        <Icon name="lucide:info" class="h-5 w-5 text-yellow-600 dark:text-yellow-400 flex-shrink-0 mt-0.5" />
+        <div class="flex-1">
+          <h3 class="font-medium text-yellow-800 dark:text-yellow-200 mb-1">
+            {{ $t('Components.DemoBanner.title') }}
+          </h3>
+          <p class="text-sm text-yellow-700 dark:text-yellow-300 mb-3">
+            {{ $t('Components.DemoBanner.description') }}
+          </p>
+          <div class="flex flex-wrap gap-2">
+            <NuxtLink
+              to="/"
+              class="inline-flex items-center gap-1 px-3 py-1.5 text-xs font-medium bg-yellow-100 dark:bg-yellow-800 text-yellow-800 dark:text-yellow-200 rounded-md hover:bg-yellow-200 dark:hover:bg-yellow-700 transition-colors"
+            >
+              <Icon name="lucide:home" class="h-3 w-3" />
+              {{ $t('Components.DemoBanner.goHome') }}
+            </NuxtLink>
+            <NuxtLink
+              to="/doc"
+              class="inline-flex items-center gap-1 px-3 py-1.5 text-xs font-medium bg-blue-100 dark:bg-blue-800 text-blue-800 dark:text-blue-200 rounded-md hover:bg-blue-200 dark:hover:bg-blue-700 transition-colors"
+            >
+              <Icon name="lucide:book-open" class="h-3 w-3" />
+              {{ $t('Components.DemoBanner.learnMore') }}
+            </NuxtLink>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { isDemoMark } from '~/types'
+
+interface Props {
+  mark: string
+}
+
+defineProps<Props>()
+
+const { t } = useI18n()
+</script>
\ No newline at end of file
diff --git a/components/DialogAdd.vue b/components/DialogAdd.vue
new file mode 100644
index 0000000..ab94b71
--- /dev/null
+++ b/components/DialogAdd.vue
@@ -0,0 +1,198 @@
+<template>
+  <Dialog v-model:open="isOpen">
+    <DialogTrigger as-child>
+      <button
+        class="inline-flex items-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow hover:bg-primary/90 transition-colors"
+      >
+        <Icon name="lucide:plus" class="h-4 w-4" />
+        {{ $t('Components.DialogAdd.addBookmark') }}
+      </button>
+    </DialogTrigger>
+    
+    <DialogContent class="sm:max-w-[425px]">
+      <DialogHeader>
+        <DialogTitle>{{ $t('Components.DialogAdd.title') }}</DialogTitle>
+        <DialogDescription>
+          {{ $t('Components.DialogAdd.description') }}
+        </DialogDescription>
+      </DialogHeader>
+      
+      <form @submit.prevent="handleSubmit" class="space-y-4">
+        <div class="space-y-2">
+          <label for="url" class="text-sm font-medium">
+            {{ $t('Components.DialogAdd.url') }} <span class="text-destructive">*</span>
+          </label>
+          <input
+            id="url"
+            v-model="form.url"
+            type="url"
+            placeholder="https://example.com"
+            class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+            required
+          />
+        </div>
+        
+        <div class="space-y-2">
+          <label for="title" class="text-sm font-medium">
+            {{ $t('Components.DialogAdd.title_label') }} <span class="text-destructive">*</span>
+          </label>
+          <input
+            id="title"
+            v-model="form.title"
+            type="text"
+            placeholder="Bookmark title"
+            class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+            required
+          />
+        </div>
+        
+        <div class="space-y-2">
+          <label for="description" class="text-sm font-medium">
+            {{ $t('Components.DialogAdd.description') }}
+          </label>
+          <textarea
+            id="description"
+            v-model="form.description"
+            placeholder="Optional description"
+            rows="3"
+            class="flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+          />
+        </div>
+        
+        <div class="space-y-2">
+          <label for="category" class="text-sm font-medium">
+            {{ $t('Components.DialogAdd.category') }} <span class="text-destructive">*</span>
+          </label>
+          <select
+            id="category"
+            v-model="form.category"
+            class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+            required
+          >
+            <option value="">{{ $t('Components.DialogAdd.selectCategory') }}</option>
+            <option v-for="category in categories" :key="category" :value="category">
+              {{ category }}
+            </option>
+          </select>
+        </div>
+        
+        <div class="flex justify-end gap-3 pt-4">
+          <button
+            type="button"
+            @click="isOpen = false"
+            class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2"
+          >
+            {{ $t('Components.DialogAdd.cancel') }}
+          </button>
+          <button
+            type="submit"
+            :disabled="isSubmitting"
+            class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2"
+          >
+            <Icon v-if="isSubmitting" name="lucide:loader-2" class="mr-2 h-4 w-4 animate-spin" />
+            {{ $t('Components.DialogAdd.add') }}
+          </button>
+        </div>
+      </form>
+    </DialogContent>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import type { BookmarkInstance } from '~/types'
+import { defaultCategory } from '~/types'
+import { toast } from 'vue-sonner'
+import { 
+  Dialog, 
+  DialogContent, 
+  DialogDescription, 
+  DialogHeader, 
+  DialogTitle, 
+  DialogTrigger 
+} from 'radix-vue'
+
+interface Props {
+  mark: string
+  categories: string[]
+}
+
+interface Emits {
+  (e: 'bookmark-added', bookmark: BookmarkInstance): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+const { t } = useI18n()
+
+// State
+const isOpen = ref(false)
+const isSubmitting = ref(false)
+
+// Form data
+const form = reactive({
+  url: '',
+  title: '',
+  description: '',
+  category: defaultCategory
+})
+
+// Reset form
+const resetForm = () => {
+  form.url = ''
+  form.title = ''
+  form.description = ''
+  form.category = defaultCategory
+}
+
+// Handle form submission
+const handleSubmit = async () => {
+  if (isSubmitting.value) return
+  
+  isSubmitting.value = true
+  
+  try {
+    const bookmarkData = {
+      mark: props.mark,
+      url: form.url.trim(),
+      title: form.title.trim(),
+      description: form.description.trim(),
+      category: form.category
+    }
+
+    const newBookmark = await $fetch<BookmarkInstance>('/api/bookmarks/add', {
+      method: 'POST',
+      body: bookmarkData
+    })
+
+    emit('bookmark-added', newBookmark)
+    toast.success(t('Components.DialogAdd.success'))
+    isOpen.value = false
+    resetForm()
+  } catch (error: any) {
+    console.error('Error adding bookmark:', error)
+    toast.error(error.data?.message || t('Components.DialogAdd.error'))
+  } finally {
+    isSubmitting.value = false
+  }
+}
+
+// Auto-fill title from URL
+watch(() => form.url, async (newUrl) => {
+  if (newUrl && !form.title) {
+    try {
+      // Try to extract domain as fallback title
+      const domain = new URL(newUrl).hostname.replace('www.', '')
+      form.title = domain.charAt(0).toUpperCase() + domain.slice(1)
+    } catch {
+      // Invalid URL, ignore
+    }
+  }
+})
+
+// Reset form when dialog closes
+watch(isOpen, (open) => {
+  if (!open) {
+    resetForm()
+  }
+})
+</script>
\ No newline at end of file
diff --git a/components/DialogDelete.vue b/components/DialogDelete.vue
new file mode 100644
index 0000000..c7deb5c
--- /dev/null
+++ b/components/DialogDelete.vue
@@ -0,0 +1,123 @@
+<template>
+  <Dialog v-model:open="isOpen">
+    <DialogTrigger as-child>
+      <button
+        class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-destructive hover:text-destructive-foreground h-8 w-8"
+        :title="$t('Components.DialogDelete.delete')"
+      >
+        <Icon name="lucide:trash-2" class="h-4 w-4" />
+      </button>
+    </DialogTrigger>
+    
+    <DialogContent class="sm:max-w-[425px]">
+      <DialogHeader>
+        <DialogTitle class="flex items-center gap-2">
+          <Icon name="lucide:alert-triangle" class="h-5 w-5 text-destructive" />
+          {{ $t('Components.DialogDelete.title') }}
+        </DialogTitle>
+        <DialogDescription>
+          {{ $t('Components.DialogDelete.description') }}
+        </DialogDescription>
+      </DialogHeader>
+      
+      <div class="bg-muted/50 rounded-lg p-4 my-4">
+        <div class="flex items-start gap-3">
+          <img
+            :src="bookmark.favicon"
+            :alt="`${bookmark.title} favicon`"
+            class="w-6 h-6 rounded-sm object-cover flex-shrink-0 mt-0.5"
+            loading="lazy"
+          />
+          <div class="flex-1 min-w-0">
+            <h4 class="font-medium text-sm truncate">{{ bookmark.title }}</h4>
+            <p class="text-xs text-muted-foreground truncate">{{ bookmark.url }}</p>
+            <div class="flex items-center gap-2 mt-1">
+              <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-secondary text-secondary-foreground">
+                {{ bookmark.category }}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      <p class="text-sm text-muted-foreground">
+        {{ $t('Components.DialogDelete.warning') }}
+      </p>
+      
+      <div class="flex justify-end gap-3 pt-4">
+        <button
+          type="button"
+          @click="isOpen = false"
+          class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2"
+        >
+          {{ $t('Components.DialogDelete.cancel') }}
+        </button>
+        <button
+          type="button"
+          @click="handleDelete"
+          :disabled="isDeleting"
+          class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-destructive text-destructive-foreground hover:bg-destructive/90 h-10 px-4 py-2"
+        >
+          <Icon v-if="isDeleting" name="lucide:loader-2" class="mr-2 h-4 w-4 animate-spin" />
+          {{ $t('Components.DialogDelete.deleteButton') }}
+        </button>
+      </div>
+    </DialogContent>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import type { BookmarkInstance } from '~/types'
+import { toast } from 'vue-sonner'
+import { 
+  Dialog, 
+  DialogContent, 
+  DialogDescription, 
+  DialogHeader, 
+  DialogTitle, 
+  DialogTrigger 
+} from 'radix-vue'
+
+interface Props {
+  bookmark: BookmarkInstance
+  mark: string
+}
+
+interface Emits {
+  (e: 'bookmark-deleted'): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+const { t } = useI18n()
+
+// State
+const isOpen = ref(false)
+const isDeleting = ref(false)
+
+// Handle delete
+const handleDelete = async () => {
+  if (isDeleting.value) return
+  
+  isDeleting.value = true
+  
+  try {
+    await $fetch('/api/bookmarks/delete', {
+      method: 'POST',
+      body: {
+        mark: props.mark,
+        uuid: props.bookmark.uuid
+      }
+    })
+
+    emit('bookmark-deleted')
+    toast.success(t('Components.DialogDelete.success'))
+    isOpen.value = false
+  } catch (error: any) {
+    console.error('Error deleting bookmark:', error)
+    toast.error(error.data?.message || t('Components.DialogDelete.error'))
+  } finally {
+    isDeleting.value = false
+  }
+}
+</script>
\ No newline at end of file
diff --git a/components/DialogEdit.vue b/components/DialogEdit.vue
new file mode 100644
index 0000000..7698b82
--- /dev/null
+++ b/components/DialogEdit.vue
@@ -0,0 +1,190 @@
+<template>
+  <Dialog v-model:open="isOpen">
+    <DialogTrigger as-child>
+      <button
+        class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-8 w-8"
+        :title="$t('Components.DialogEdit.edit')"
+      >
+        <Icon name="lucide:edit-2" class="h-4 w-4" />
+      </button>
+    </DialogTrigger>
+    
+    <DialogContent class="sm:max-w-[425px]">
+      <DialogHeader>
+        <DialogTitle>{{ $t('Components.DialogEdit.title') }}</DialogTitle>
+        <DialogDescription>
+          {{ $t('Components.DialogEdit.description') }}
+        </DialogDescription>
+      </DialogHeader>
+      
+      <form @submit.prevent="handleSubmit" class="space-y-4">
+        <div class="space-y-2">
+          <label for="edit-url" class="text-sm font-medium">
+            {{ $t('Components.DialogEdit.url') }} <span class="text-destructive">*</span>
+          </label>
+          <input
+            id="edit-url"
+            v-model="form.url"
+            type="url"
+            placeholder="https://example.com"
+            class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+            required
+          />
+        </div>
+        
+        <div class="space-y-2">
+          <label for="edit-title" class="text-sm font-medium">
+            {{ $t('Components.DialogEdit.title_label') }} <span class="text-destructive">*</span>
+          </label>
+          <input
+            id="edit-title"
+            v-model="form.title"
+            type="text"
+            placeholder="Bookmark title"
+            class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+            required
+          />
+        </div>
+        
+        <div class="space-y-2">
+          <label for="edit-description" class="text-sm font-medium">
+            {{ $t('Components.DialogEdit.description') }}
+          </label>
+          <textarea
+            id="edit-description"
+            v-model="form.description"
+            placeholder="Optional description"
+            rows="3"
+            class="flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+          />
+        </div>
+        
+        <div class="space-y-2">
+          <label for="edit-category" class="text-sm font-medium">
+            {{ $t('Components.DialogEdit.category') }} <span class="text-destructive">*</span>
+          </label>
+          <select
+            id="edit-category"
+            v-model="form.category"
+            class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+            required
+          >
+            <option value="">{{ $t('Components.DialogEdit.selectCategory') }}</option>
+            <option v-for="category in categories" :key="category" :value="category">
+              {{ category }}
+            </option>
+          </select>
+        </div>
+        
+        <div class="flex justify-end gap-3 pt-4">
+          <button
+            type="button"
+            @click="isOpen = false"
+            class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2"
+          >
+            {{ $t('Components.DialogEdit.cancel') }}
+          </button>
+          <button
+            type="submit"
+            :disabled="isSubmitting"
+            class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2"
+          >
+            <Icon v-if="isSubmitting" name="lucide:loader-2" class="mr-2 h-4 w-4 animate-spin" />
+            {{ $t('Components.DialogEdit.save') }}
+          </button>
+        </div>
+      </form>
+    </DialogContent>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import type { BookmarkInstance } from '~/types'
+import { toast } from 'vue-sonner'
+import { 
+  Dialog, 
+  DialogContent, 
+  DialogDescription, 
+  DialogHeader, 
+  DialogTitle, 
+  DialogTrigger 
+} from 'radix-vue'
+
+interface Props {
+  bookmark: BookmarkInstance
+  mark: string
+  categories: string[]
+}
+
+interface Emits {
+  (e: 'bookmark-updated', bookmark: BookmarkInstance): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+const { t } = useI18n()
+
+// State
+const isOpen = ref(false)
+const isSubmitting = ref(false)
+
+// Form data
+const form = reactive({
+  url: '',
+  title: '',
+  description: '',
+  category: ''
+})
+
+// Initialize form with bookmark data
+const initializeForm = () => {
+  form.url = props.bookmark.url
+  form.title = props.bookmark.title
+  form.description = props.bookmark.description || ''
+  form.category = props.bookmark.category
+}
+
+// Handle form submission
+const handleSubmit = async () => {
+  if (isSubmitting.value) return
+  
+  isSubmitting.value = true
+  
+  try {
+    const bookmarkData = {
+      mark: props.mark,
+      uuid: props.bookmark.uuid,
+      url: form.url.trim(),
+      title: form.title.trim(),
+      description: form.description.trim(),
+      category: form.category
+    }
+
+    const updatedBookmark = await $fetch<BookmarkInstance>('/api/bookmarks/update', {
+      method: 'POST',
+      body: bookmarkData
+    })
+
+    emit('bookmark-updated', updatedBookmark)
+    toast.success(t('Components.DialogEdit.success'))
+    isOpen.value = false
+  } catch (error: any) {
+    console.error('Error updating bookmark:', error)
+    toast.error(error.data?.message || t('Components.DialogEdit.error'))
+  } finally {
+    isSubmitting.value = false
+  }
+}
+
+// Initialize form when dialog opens
+watch(isOpen, (open) => {
+  if (open) {
+    initializeForm()
+  }
+})
+
+// Initialize form on mount
+onMounted(() => {
+  initializeForm()
+})
+</script>
\ No newline at end of file
diff --git a/components/FloatingNav.vue b/components/FloatingNav.vue
new file mode 100644
index 0000000..b2672f6
--- /dev/null
+++ b/components/FloatingNav.vue
@@ -0,0 +1,38 @@
+<template>
+  <div
+    v-if="categories.length > 1"
+    class="fixed bottom-6 left-1/2 transform -translate-x-1/2 z-40"
+  >
+    <div class="bg-background/95 backdrop-blur-sm border border-border/60 rounded-full px-4 py-2 shadow-lg">
+      <nav class="flex items-center space-x-1">
+        <button
+          v-for="category in categories"
+          :key="category"
+          @click="scrollToCategory(category)"
+          class="px-3 py-1.5 text-sm font-medium text-muted-foreground hover:text-primary hover:bg-primary/10 rounded-full transition-colors"
+          :title="`Go to ${category}`"
+        >
+          {{ category }}
+        </button>
+      </nav>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { BookmarksData } from '~/types'
+
+interface Props {
+  categories: string[]
+  bookmarksData: BookmarksData | null
+}
+
+defineProps<Props>()
+
+const scrollToCategory = (category: string) => {
+  const element = document.getElementById(`category-${category}`)
+  if (element) {
+    element.scrollIntoView({ behavior: 'smooth', block: 'start' })
+  }
+}
+</script>
\ No newline at end of file
diff --git a/components/LanguageSwitcher.vue b/components/LanguageSwitcher.vue
new file mode 100644
index 0000000..f954897
--- /dev/null
+++ b/components/LanguageSwitcher.vue
@@ -0,0 +1,38 @@
+<template>
+  <DropdownMenu>
+    <DropdownMenuTrigger as-child>
+      <button
+        class="flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium text-muted-foreground hover:text-primary hover:bg-primary/5 transition-colors duration-200"
+      >
+        <Icon name="lucide:globe" class="h-4 w-4" />
+        <span class="hidden sm:inline">{{ currentLocale.name }}</span>
+      </button>
+    </DropdownMenuTrigger>
+    
+    <DropdownMenuContent align="end">
+      <DropdownMenuItem
+        v-for="locale in availableLocales"
+        :key="locale.code"
+        @click="switchLocale(locale.code)"
+        :class="{ 'bg-accent': locale.code === $i18n.locale.value }"
+      >
+        {{ locale.name }}
+      </DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</template>
+
+<script setup lang="ts">
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from 'radix-vue'
+
+const { locale, locales, setLocale } = useI18n()
+
+const availableLocales = computed(() => locales.value)
+const currentLocale = computed(() => 
+  availableLocales.value.find(l => l.code === locale.value) || availableLocales.value[0]
+)
+
+const switchLocale = async (code: string) => {
+  await setLocale(code)
+}
+</script>
\ No newline at end of file
diff --git a/data/demo.ts b/data/demo.ts
new file mode 100644
index 0000000..5057e1b
--- /dev/null
+++ b/data/demo.ts
@@ -0,0 +1,108 @@
+import type { BookmarksData } from "~/types"
+
+// 演示用的书签数据
+export const DEMO_BOOKMARKS_DATA: BookmarksData = {
+  mark: "demo",
+  bookmarks: [
+    {
+      uuid: "4d283ee2-1c03-4d39-89e4-910989028ae1",
+      url: "https://chat.openai.com",
+      title: "ChatGPT",
+      favicon: "https://chat.openai.com/favicon.ico",
+      createdAt: new Date(2023, 0, 1).toISOString(),
+      modifiedAt: new Date(2023, 0, 1).toISOString(),
+      category: "AI工具",
+      description: "OpenAI开发的对话式人工智能助手",
+    },
+    {
+      uuid: "62e24d2a-a1ab-49f3-899c-6b9212077605",
+      url: "https://github.com",
+      title: "GitHub",
+      favicon: "https://github.com/favicon.ico",
+      createdAt: new Date(2023, 0, 2).toISOString(),
+      modifiedAt: new Date(2023, 0, 2).toISOString(),
+      category: "开发工具",
+      description: "全球最大的代码托管平台",
+    },
+    {
+      uuid: "67d1a74c-5f5d-4734-b22b-823848fea115",
+      url: "https://reactjs.org",
+      title: "React",
+      favicon: "https://reactjs.org/favicon.ico",
+      createdAt: new Date(2023, 0, 3).toISOString(),
+      modifiedAt: new Date(2023, 0, 3).toISOString(),
+      category: "开发工具",
+      description: "用于构建用户界面的JavaScript库",
+    },
+    {
+      uuid: "e1cd6e04-0f83-41cd-a99b-4d4bc26b015f",
+      url: "https://nextjs.org",
+      title: "Next.js",
+      favicon: "https://nextjs.org/favicon.ico",
+      createdAt: new Date(2023, 0, 4).toISOString(),
+      modifiedAt: new Date(2023, 0, 4).toISOString(),
+      category: "开发工具",
+      description: "React框架，用于生产环境的应用",
+    },
+    {
+      uuid: "06acb5e2-4373-4aaf-900d-f4e740267501",
+      url: "https://www.coursera.org",
+      title: "Coursera",
+      favicon: "https://www.coursera.org/favicon.ico",
+      createdAt: new Date(2023, 0, 5).toISOString(),
+      modifiedAt: new Date(2023, 0, 5).toISOString(),
+      category: "学习资源",
+      description: "提供来自世界各地大学的在线课程",
+    },
+    {
+      uuid: "f36a531c-10e3-42b3-953c-52ac74668cbf",
+      url: "https://www.figma.com",
+      title: "Figma",
+      favicon: "https://www.figma.com/favicon.ico",
+      createdAt: new Date(2023, 0, 6).toISOString(),
+      modifiedAt: new Date(2023, 0, 6).toISOString(),
+      category: "设计资源",
+      description: "基于浏览器的界面设计工具",
+    },
+    {
+      uuid: "8db6a3e1-a4ec-4a7c-94e5-3524b627cdc6",
+      url: "https://news.ycombinator.com",
+      title: "Hacker News",
+      favicon: "https://news.ycombinator.com/favicon.ico",
+      createdAt: new Date(2023, 0, 7).toISOString(),
+      modifiedAt: new Date(2023, 0, 7).toISOString(),
+      category: "新闻资讯",
+      description: "专注于计算机科学和创业的社交新闻网站",
+    },
+    {
+      uuid: "276b97ba-1596-4553-b4a1-014b92d83d8f",
+      url: "https://claude.ai",
+      title: "Claude AI",
+      favicon: "https://claude.ai/favicon.ico",
+      createdAt: new Date(2023, 0, 8).toISOString(),
+      modifiedAt: new Date(2023, 0, 8).toISOString(),
+      category: "AI工具",
+      description: "Anthropic开发的AI助手",
+    },
+    {
+      uuid: "b063e870-a9e6-4fc1-8f17-f425e0e9b346",
+      url: "https://www.midjourney.com",
+      title: "Midjourney",
+      favicon: "https://www.midjourney.com/favicon.ico",
+      createdAt: new Date(2023, 0, 9).toISOString(),
+      modifiedAt: new Date(2023, 0, 9).toISOString(),
+      category: "AI工具",
+      description: "AI图像生成工具",
+    },
+    {
+      uuid: "289309e8-1728-42cd-8a1a-5ba4216ba60b",
+      url: "https://tailwindcss.com",
+      title: "Tailwind CSS",
+      favicon: "https://tailwindcss.com/favicon.ico",
+      createdAt: new Date(2023, 0, 10).toISOString(),
+      modifiedAt: new Date(2023, 0, 10).toISOString(),
+      category: "开发工具",
+      description: "功能类优先的CSS框架",
+    },
+  ],
+}
\ No newline at end of file
diff --git a/env.d.ts b/env.d.ts
index a0baef0..2e09a21 100644
--- a/env.d.ts
+++ b/env.d.ts
@@ -1,5 +1,16 @@
 // Generated by Wrangler by running `wrangler types --env-interface CloudflareEnv env.d.ts`
 
+/// <reference types="@cloudflare/workers-types" />
+
 interface CloudflareEnv {
   cloudmark: KVNamespace;
 }
+
+declare module 'h3' {
+  interface H3EventContext {
+    cloudflare?: {
+      env: CloudflareEnv;
+      ctx: ExecutionContext;
+    };
+  }
+}
diff --git a/layouts/default.vue b/layouts/default.vue
new file mode 100644
index 0000000..e05816d
--- /dev/null
+++ b/layouts/default.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="min-h-screen flex flex-col relative overflow-hidden bg-[radial-gradient(ellipse_at_top_right,rgba(147,51,234,0.15),transparent_70%),radial-gradient(ellipse_at_right,rgba(59,130,246,0.15),transparent_70%)]">
+    <!-- Header -->
+    <AppHeader />
+    
+    <!-- Main Content -->
+    <main class="flex-1">
+      <slot />
+    </main>
+    
+    <!-- Footer -->
+    <AppFooter />
+    
+    <!-- Toast Provider -->
+    <Toaster />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Toaster } from 'vue-sonner'
+
+useHead({
+  htmlAttrs: {
+    class: '!scroll-smooth'
+  },
+  link: [
+    { rel: 'dns-prefetch', href: 'https://www.google-analytics.com' },
+    { rel: 'preconnect', href: 'https://www.google-analytics.com' }
+  ]
+})
+</script>
\ No newline at end of file
diff --git a/locales/en.json b/locales/en.json
new file mode 100644
index 0000000..ea94c90
--- /dev/null
+++ b/locales/en.json
@@ -0,0 +1,200 @@
+{
+  "HomePage": {
+    "quickstart": "Quick Start",
+    "title": "Your Universal Bookmark Manager",
+    "description": "Save and organize your bookmarks with one click. Access them anywhere, anytime.",
+    "features": {
+      "save": {
+        "title": "One-Click Save",
+        "desc": "Save any webpage to your collection with a simple drag and drop installation."
+      },
+      "categorize": {
+        "title": "Smart Categories",
+        "desc": "Automatically categorize your bookmarks for better organization."
+      },
+      "access": {
+        "title": "Access Anywhere",
+        "desc": "Sync across devices, access your bookmarks anywhere."
+      },
+      "share": {
+        "title": "Share & Collaborate",
+        "desc": "Easily share bookmark collections and collaborate with others."
+      }
+    }
+  },
+  "NotFoundPage": {
+    "title": "404: This page could not be found.",
+    "errorCode": "404",
+    "description": "This page could not be found."
+  },
+  "DocPage": {
+    "title": "Cloudmark Quick Start",
+    "description": "Cross-device, cross-browser cloud bookmark management tool",
+    "loading": "Loading...",
+    "intro": {
+      "title": "What is Cloudmark?",
+      "description": "Cloudmark is a cloud-based bookmark collection tool that allows you to save and organize web bookmarks with one click and access them from any device.",
+      "features": {
+        "title": "Key Features",
+        "oneClick": "One-click saving of current webpage",
+        "cloud": "Cloud storage for cross-device access",
+        "categories": "Organize and filter bookmarks by categories",
+        "custom": "Customizable bookmark collections",
+        "sorting": "Multiple sorting and layout options",
+        "multilingual": "Multilingual interface support"
+      }
+    },
+    "setup": {
+      "title": "Set Up Your Bookmarklet",
+      "markName": {
+        "title": "Set Your Bookmark Name",
+        "placeholder": "Name your bookmark ID",
+        "description": "This name will be used for your bookmark collection and can only contain letters, numbers, underscores, and hyphens.",
+        "button": "Generate Random"
+      },
+      "bookmarklet": {
+        "title": "Install Bookmark Tool",
+        "saveButton": "Save to {mark}",
+        "openButton": "Open {mark} Bookmarks",
+        "dragTip": "Drag to bookmark bar",
+        "description": "Drag the button above to your browser's bookmark bar to save the current webpage anytime."
+      },
+      "code": {
+        "title": "View Bookmarklet Code",
+        "copied": "Copied"
+      }
+    },
+    "usage": {
+      "title": "How to Use Cloudmark",
+      "steps": {
+        "setup": {
+          "title": "Set Up Your Bookmarklet",
+          "description": "Follow the instructions above to create your bookmark collection name and add the bookmarklet to your browser's bookmark bar. Each bookmark collection name corresponds to a separate bookmark collection."
+        },
+        "save": {
+          "title": "Save Webpages to Your Collection",
+          "description": "When browsing a webpage, click the Cloudmark bookmarklet in your bookmark bar to open the bookmark addition page. Fill in the category and description (optional), then save."
+        },
+        "access": {
+          "title": "Access Your Bookmark Collection",
+          "description": "Access {baseUrl}/{mark} to view and manage all your saved bookmarks. You can access this URL from any device or browser."
+        },
+        "manage": {
+          "title": "Organize and Manage Your Bookmarks",
+          "description": "You can edit or delete bookmarks, change category views, sort by different criteria, and use category filters to quickly find the bookmarks you need."
+        }
+      }
+    },
+    "demo": {
+      "title": "Want to Experience Cloudmark?",
+      "description": "Try all the features of Cloudmark without creating a bookmark collection",
+      "button": "View Demo"
+    },
+    "navigation": {
+      "intro": "Introduction",
+      "setup": "Setup",
+      "usage": "Usage",
+      "demo": "Demo"
+    }
+  },
+  "Navigation": {
+    "quickstart": "Quick Start",
+    "github": "GitHub",
+    "switchLanguage": "Switch Language"
+  },
+  "BookmarksPage": {
+    "title": "Bookmarks",
+    "collection": "Collection {mark}",
+    "addBookmark": "Add Bookmark",
+    "noBookmarks": "No bookmarks yet",
+    "addFirstBookmark": "Add your first bookmark",
+    "loading": "Loading bookmarks...",
+    "bookmarkletTip": "Drag this button to your bookmarks bar to save pages with one click",
+    "saveButton": "Save to {mark}",
+    "dragTip": "Drag to bookmarks bar",
+    "demoMode": "Demo Mode",
+    "demoDescription": "This is a demo collection. You can freely add, edit, and delete bookmarks. All changes will only affect your local view and won't be saved to the server.",
+    "createOwn": "Create Your Own",
+    "success": "Success",
+    "error": "Error",
+    "warning": "Warning",
+    "info": "Information"
+  },
+  "Components": {
+    "MarkInput": {
+      "label": "Bookmark Mark",
+      "placeholder": "Enter custom mark",
+      "randomButton": "Random",
+      "description": "The mark will be used to distinguish different bookmark collections. It's recommended to use meaningful phrases. Current mark: "
+    },
+    "BookmarkCard": {
+      "visit": "Visit",
+      "edit": "Edit",
+      "delete": "Delete",
+      "deleteConfirm": "Are you sure you want to delete this bookmark?"
+    },
+    "BookmarkDialog": {
+      "addTitle": "Add Bookmark",
+      "addDescription": "Add a new bookmark to collection {mark}",
+      "editTitle": "Edit Bookmark",
+      "editDescription": "Edit bookmark information",
+      "deleteTitle": "Delete Bookmark",
+      "deleteDescription": "Are you sure you want to delete bookmark \"{title}\"?",
+      "deleteConfirmation": "This action cannot be undone. The bookmark will be permanently removed from your collection.",
+      "url": "URL",
+      "urlPlaceholder": "Enter bookmark URL",
+      "urlDescription": "The URL of the webpage you want to bookmark",
+      "title": "Title",
+      "titlePlaceholder": "Enter bookmark title",
+      "titleDescription": "A descriptive title for your bookmark",
+      "description": "Description",
+      "descriptionPlaceholder": "Enter bookmark description (optional)",
+      "descriptionDescription": "Add some notes about this bookmark",
+      "category": "Category",
+      "categoryPlaceholder": "Select a category",
+      "categoryDescription": "Choose a category to organize your bookmarks",
+      "newCategory": "New Category",
+      "newCategoryPlaceholder": "Enter new category name",
+      "existingCategory": "Existing Categories",
+      "backToCategories": "Back to categories",
+      "cancel": "Cancel",
+      "reset": "Reset",
+      "addButton": "Add Bookmark",
+      "updateButton": "Update Bookmark",
+      "deleteButton": "Delete Bookmark",
+      "adding": "Adding...",
+      "updating": "Updating...",
+      "deleting": "Deleting...",
+      "addSuccess": "Bookmark added successfully",
+      "updateSuccess": "Bookmark updated successfully",
+      "deleteSuccess": "Bookmark deleted successfully",
+      "errors": {
+        "urlRequired": "URL is required",
+        "invalidUrl": "Please enter a valid URL",
+        "categoryRequired": "Category is required",
+        "addFailed": "Failed to add bookmark",
+        "updateFailed": "Failed to update bookmark",
+        "deleteFailed": "Failed to delete bookmark"
+      },
+      "addBookmark": "Add Bookmark",
+      "delete": "Delete bookmark",
+      "edit": "Edit bookmark"
+    },
+    "FloatingNav": {
+      "title": "Categories",
+      "expandNav": "Expand Navigation",
+      "collapseNav": "Collapse Navigation",
+      "jumpToCategory": "Jump to {category}"
+    }
+  },
+  "Notifications": {
+    "success": "Success",
+    "error": "Error",
+    "warning": "Warning",
+    "info": "Information",
+    "bookmarkAdded": "Bookmark added successfully",
+    "bookmarkExists": "Bookmark with this URL already exists",
+    "urlRequired": "URL is required",
+    "processingError": "Error processing bookmark"
+  }
+}
diff --git a/locales/zh.json b/locales/zh.json
new file mode 100644
index 0000000..c954e6e
--- /dev/null
+++ b/locales/zh.json
@@ -0,0 +1,200 @@
+{
+  "HomePage": {
+    "quickstart": "快速入门",
+    "title": "你的通用书签管理器",
+    "description": "一键保存和整理书签。随时随地访问。",
+    "features": {
+      "save": {
+        "title": "一键收藏",
+        "desc": "通过简单的拖拽安装，一键保存任何网页到您的收藏夹。"
+      },
+      "categorize": {
+        "title": "智能分类",
+        "desc": "自动对书签进行分类，让您的收藏更有条理。"
+      },
+      "access": {
+        "title": "随处访问",
+        "desc": "跨设备同步，随时随地访问您的书签收藏。"
+      },
+      "share": {
+        "title": "分享协作",
+        "desc": "轻松与他人分享书签集合，协同整理资源。"
+      }
+    }
+  },
+  "NotFoundPage": {
+    "title": "404: 无法找到此页面。",
+    "errorCode": "404",
+    "description": "无法找到此页面。"
+  },
+  "DocPage": {
+    "title": "Cloudmark 快速入门",
+    "description": "跨设备、跨浏览器的云端书签管理工具",
+    "loading": "加载中...",
+    "intro": {
+      "title": "什么是 Cloudmark？",
+      "description": "Cloudmark 是一个基于云的书签收集工具，允许您一键保存和组织网页书签，并从任何设备访问。",
+      "features": {
+        "title": "主要特点",
+        "oneClick": "一键保存当前浏览页面",
+        "cloud": "云端存储确保跨设备访问",
+        "categories": "按分类整理和筛选书签",
+        "custom": "可自定义的书签集合",
+        "sorting": "支持多种排序和布局视图",
+        "multilingual": "支持多语言界面"
+      }
+    },
+    "setup": {
+      "title": "设置您的 Bookmarklet",
+      "markName": {
+        "title": "设置书签的名称",
+        "placeholder": "为您的书签 ID 取个名字",
+        "description": "此名称将用于您的书签集合，只能包含字母、数字、下划线和连字符。",
+        "button": "随机生成"
+      },
+      "bookmarklet": {
+        "title": "安装书签工具",
+        "saveButton": "保存到 {mark}",
+        "openButton": "打开 {mark} 书签",
+        "dragTip": "拖动到书签栏",
+        "description": "将上面的按钮拖动到您的浏览器书签栏，以便随时保存当前浏览的网页。"
+      },
+      "code": {
+        "title": "查看 Bookmarklet 代码",
+        "copied": "已复制"
+      }
+    },
+    "usage": {
+      "title": "如何使用 Cloudmark",
+      "steps": {
+        "setup": {
+          "title": "设置您的 Bookmarklet",
+          "description": "按照上面的说明创建您的书签集合名称并将 bookmarklet 添加到您的浏览器书签栏中。每个书签集合名称对应一个独立的书签集合。"
+        },
+        "save": {
+          "title": "保存网页到您的集合",
+          "description": "当您浏览网页时，点击书签栏中的 Cloudmark bookmarklet，会打开添加书签的页面。填写分类和描述（可选），然后保存即可。"
+        },
+        "access": {
+          "title": "访问您的书签集合",
+          "description": "通过访问 {baseUrl}/{mark} 可以查看和管理您保存的所有书签。您可以在任何设备和浏览器上访问这个 URL。"
+        },
+        "manage": {
+          "title": "整理和管理您的书签",
+          "description": "您可以编辑或删除书签，更改分类视图，按不同条件排序，以及使用分类筛选器快速找到您需要的书签。"
+        }
+      }
+    },
+    "demo": {
+      "title": "想要体验 Cloudmark？",
+      "description": "不需要创建书签集合，直接体验 Cloudmark 的全部功能",
+      "button": "查看演示"
+    },
+    "navigation": {
+      "intro": "简介",
+      "setup": "设置",
+      "usage": "使用方法",
+      "demo": "演示"
+    }
+  },
+  "Navigation": {
+    "quickstart": "快速入门",
+    "github": "GitHub",
+    "switchLanguage": "切换语言"
+  },
+  "BookmarksPage": {
+    "title": "书签收藏",
+    "collection": "收藏集 {mark}",
+    "addBookmark": "添加书签",
+    "noBookmarks": "暂无书签",
+    "addFirstBookmark": "添加第一个书签",
+    "loading": "正在加载书签...",
+    "bookmarkletTip": "拖拽此按钮到书签栏，一键保存网页到此收藏",
+    "saveButton": "保存到 {mark}",
+    "dragTip": "拖拽到书签栏",
+    "demoMode": "演示模式",
+    "demoDescription": "这是一个演示集合，您可以自由添加、编辑和删除书签，所有操作仅在本地生效，不会保存到服务器。",
+    "createOwn": "创建自己的收藏",
+    "success": "成功",
+    "error": "错误",
+    "warning": "警告",
+    "info": "信息"
+  },
+  "Components": {
+    "MarkInput": {
+      "label": "书签标记",
+      "placeholder": "输入自定义标记",
+      "randomButton": "随机生成",
+      "description": "标记将用于区分不同的书签收藏，建议使用有意义的词组。当前标记："
+    },
+    "BookmarkCard": {
+      "visit": "访问",
+      "edit": "编辑",
+      "delete": "删除",
+      "deleteConfirm": "确定要删除这个书签吗？"
+    },
+    "BookmarkDialog": {
+      "addTitle": "添加书签",
+      "addDescription": "添加新书签到 {mark} 收藏夹",
+      "editTitle": "编辑书签",
+      "editDescription": "编辑书签信息",
+      "deleteTitle": "删除书签",
+      "deleteDescription": "确定要删除书签 \"{title}\" 吗？",
+      "deleteConfirmation": "此操作无法撤销，删除后书签将从您的收藏中永久移除。",
+      "url": "网址",
+      "urlPlaceholder": "输入书签网址",
+      "urlDescription": "您想要收藏的网页地址",
+      "title": "标题",
+      "titlePlaceholder": "输入书签标题",
+      "titleDescription": "为您的书签添加一个描述性的标题",
+      "description": "描述",
+      "descriptionPlaceholder": "输入书签描述（可选）",
+      "descriptionDescription": "添加一些关于这个书签的备注",
+      "category": "分类",
+      "categoryPlaceholder": "选择分类",
+      "categoryDescription": "选择一个分类来组织您的书签",
+      "newCategory": "新建分类",
+      "newCategoryPlaceholder": "输入新分类名称",
+      "existingCategory": "现有分类",
+      "backToCategories": "返回分类列表",
+      "cancel": "取消",
+      "reset": "重置",
+      "addButton": "添加书签",
+      "updateButton": "更新书签",
+      "deleteButton": "删除书签",
+      "adding": "添加中...",
+      "updating": "更新中...",
+      "deleting": "删除中...",
+      "addSuccess": "书签添加成功",
+      "updateSuccess": "书签更新成功",
+      "deleteSuccess": "书签删除成功",
+      "errors": {
+        "urlRequired": "请输入网址",
+        "invalidUrl": "请输入有效的网址",
+        "categoryRequired": "请选择分类",
+        "addFailed": "添加书签失败",
+        "updateFailed": "更新书签失败",
+        "deleteFailed": "删除书签失败"
+      },
+      "addBookmark": "添加书签",
+      "delete": "删除书签",
+      "edit": "编辑"
+    },
+    "FloatingNav": {
+      "title": "分类导航",
+      "expandNav": "展开导航",
+      "collapseNav": "折叠导航",
+      "jumpToCategory": "跳转到{category}分类"
+    }
+  },
+  "Notifications": {
+    "success": "成功",
+    "error": "错误",
+    "warning": "警告",
+    "info": "通知",
+    "bookmarkAdded": "书签已成功添加",
+    "bookmarkExists": "该 URL 的书签已存在",
+    "urlRequired": "URL 是必需的",
+    "processingError": "处理书签时出错"
+  }
+}
diff --git a/nuxt.config.ts b/nuxt.config.ts
new file mode 100644
index 0000000..e6dace6
--- /dev/null
+++ b/nuxt.config.ts
@@ -0,0 +1,97 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  devtools: { enabled: true },
+  
+  // Modules
+  modules: [
+    '@nuxtjs/tailwindcss',
+    '@nuxtjs/i18n',
+    '@vueuse/nuxt',
+    '@nuxt/icon',
+    '@nuxtjs/cloudflare'
+  ],
+
+  // CSS
+  css: ['~/assets/css/main.css'],
+
+  // TypeScript configuration
+  typescript: {
+    strict: true,
+    typeCheck: true
+  },
+
+  // Internationalization
+  i18n: {
+    strategy: 'prefix_except_default',
+    defaultLocale: 'en',
+    locales: [
+      { code: 'en', name: 'English', file: 'en.json' },
+      { code: 'zh', name: '中文', file: 'zh.json' }
+    ],
+    langDir: 'locales/',
+    detectBrowserLanguage: {
+      useCookie: true,
+      cookieKey: 'i18n_redirected',
+      redirectOn: 'root'
+    }
+  },
+
+  // App configuration
+  app: {
+    head: {
+      title: 'Cloudmark - Your Universal Bookmark Manager',
+      meta: [
+        { charset: 'utf-8' },
+        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+        { 
+          name: 'description', 
+          content: 'Save and access your bookmarks from anywhere with Cloudmark, the seamless cloud bookmarking tool for professionals and casual users alike'
+        },
+        {
+          name: 'keywords',
+          content: 'cloudmark,cloud mark,bookmarks,book mark manager,bookmark manager,bookmark managers,bookmark organizer,bookmark saver,bookmarks manager,bookmark editor,web tool,productivity'
+        }
+      ],
+      link: [
+        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
+      ]
+    }
+  },
+
+  // Runtime config
+  runtimeConfig: {
+    public: {
+      baseUrl: process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:3000'
+    }
+  },
+
+  // Nitro configuration for Cloudflare
+  nitro: {
+    preset: 'cloudflare-pages',
+    experimental: {
+      wasm: true
+    }
+  },
+
+  // Development server
+  devServer: {
+    port: 3000
+  },
+
+  // Build configuration
+  build: {
+    transpile: ['lucide-vue-next']
+  },
+
+  // Cloudflare module configuration
+  cloudflare: {
+    pages: {
+      routes: {
+        exclude: ['/api/*']
+      }
+    }
+  },
+
+  // SSR configuration
+  ssr: true
+})
\ No newline at end of file
diff --git a/package.json b/package.json
index 17a6eff..13a0e73 100644
--- a/package.json
+++ b/package.json
@@ -3,64 +3,48 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev --turbopack",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint",
-    "preview": "opennextjs-cloudflare && wrangler dev",
-    "deploy": "opennextjs-cloudflare && wrangler deploy",
-    "cf-typegen": "wrangler types --env-interface CloudflareEnv env.d.ts",
-    "analyze": "ANALYZE=true next build"
+    "dev": "nuxt dev",
+    "build": "nuxt build",
+    "start": "nuxt start",
+    "preview": "nuxt preview",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "deploy": "nuxt build && wrangler deploy",
+    "cf-typegen": "wrangler types --env-interface CloudflareEnv types/env.d.ts"
   },
   "dependencies": {
-    "@hookform/resolvers": "^4.1.3",
-    "@next/third-parties": "^15.1.7",
-    "@radix-ui/react-alert-dialog": "^1.1.6",
-    "@radix-ui/react-dialog": "^1.1.6",
-    "@radix-ui/react-dropdown-menu": "^2.1.6",
-    "@radix-ui/react-label": "^2.1.2",
-    "@radix-ui/react-scroll-area": "^1.2.3",
-    "@radix-ui/react-select": "^2.1.6",
-    "@radix-ui/react-slot": "^1.1.2",
-    "@radix-ui/react-tabs": "^1.1.3",
+    "@headlessui/vue": "^1.7.23",
+    "@nuxt/icon": "^1.9.0",
+    "@nuxtjs/cloudflare": "^0.4.0",
+    "@nuxtjs/i18n": "^9.0.5",
+    "@nuxtjs/tailwindcss": "^6.13.2",
+    "@vueform/valibot": "^1.6.0",
+    "@vueuse/core": "^11.4.0",
+    "@vueuse/nuxt": "^11.4.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
-    "lucide-react": "^0.475.0",
-    "next": "15.1.6",
-    "next-intl": "^3.26.5",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "react-hook-form": "^7.54.2",
-    "sonner": "^2.0.1",
+    "lucide-vue-next": "^0.475.0",
+    "nuxt": "^3.15.1",
+    "radix-vue": "^1.9.14",
     "tailwind-merge": "^3.0.2",
     "tailwindcss-animate": "^1.0.7",
-    "zod": "^3.24.2",
-    "zsa": "^0.6.0",
-    "zsa-react": "^0.2.3"
+    "valibot": "^0.42.1",
+    "vue": "^3.5.14",
+    "vue-router": "^4.5.0",
+    "vue-sonner": "^1.2.1",
+    "zod": "^3.24.2"
   },
   "devDependencies": {
     "@cloudflare/workers-types": "^4.20250214.0",
-    "@eslint/eslintrc": "^3",
-    "@next/bundle-analyzer": "^15.1.6",
-    "@opennextjs/cloudflare": "^0.5.4",
+    "@nuxt/eslint": "^0.8.0",
     "@types/node": "^20",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
     "eslint": "^9",
-    "eslint-config-next": "15.1.6",
+    "nitropack": "^2.10.4",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
     "typescript": "^5",
-    "vercel": "^41.2.0",
     "wrangler": "^3.109.3"
   },
-  "packageManager": "pnpm@9.14.4",
-  "pnpm": {
-    "onlyBuiltDependencies": [
-      "esbuild",
-      "sharp",
-      "workerd"
-    ]
-  }
+  "packageManager": "npm@10.8.2"
 }
diff --git a/pages/[mark].vue b/pages/[mark].vue
new file mode 100644
index 0000000..e600e48
--- /dev/null
+++ b/pages/[mark].vue
@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <BookmarkUI 
+      :mark="mark"
+      :bookmarks-data="bookmarksData"
+      :categories="categories"
+      :base-url="baseUrl"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { BookmarksData } from '~/types'
+
+const route = useRoute()
+const mark = route.params.mark as string
+
+// Fetch bookmark data
+const { data: bookmarksData } = await useFetch<BookmarksData | null>(`/api/bookmarks/${mark}`)
+
+// Get categories
+const categories = computed(() => getCategories(bookmarksData.value))
+
+// Get base URL
+const baseUrl = getBaseUrl()
+
+// SEO
+useHead({
+  title: `Bookmarks - ${mark} | Cloudmark`,
+  meta: [
+    {
+      name: 'description',
+      content: `Bookmark collection for ${mark} - Cloudmark`
+    }
+  ]
+})
+
+// Handle URL query parameters for toast messages
+const query = route.query
+if (query.status && query.message) {
+  const { $toast } = useNuxtApp()
+  const variant = query.status === 'success' ? 'success' : 
+                 query.status === 'error' ? 'error' : 
+                 query.status === 'warning' ? 'warning' : 'info'
+  
+  const message = decodeURIComponent(query.message as string)
+  
+  nextTick(() => {
+    $toast[variant](message)
+  })
+}
+</script>
\ No newline at end of file
diff --git a/pages/doc.vue b/pages/doc.vue
new file mode 100644
index 0000000..1af3aa9
--- /dev/null
+++ b/pages/doc.vue
@@ -0,0 +1,202 @@
+<template>
+  <div class="container relative">
+    <!-- 装饰背景元素 -->
+    <div class="fixed inset-0 -z-10">
+      <div class="absolute top-0 right-0 w-[40rem] h-[40rem] bg-blue-500/10 rounded-full blur-3xl transform -translate-y-12 translate-x-12" />
+      <div class="absolute bottom-0 left-0 w-[50rem] h-[50rem] bg-purple-500/10 rounded-full blur-3xl transform translate-y-12 -translate-x-12" />
+    </div>
+
+    <div class="py-12 lg:py-16">
+      <!-- 标题 -->
+      <div class="text-center mb-12">
+        <h1 class="text-4xl font-bold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-blue-500 via-indigo-500 to-purple-500 mb-4">
+          {{ $t('DocPage.title') }}
+        </h1>
+        <p class="text-xl text-muted-foreground max-w-2xl mx-auto">
+          {{ $t('DocPage.description') }}
+        </p>
+      </div>
+
+      <!-- 快速开始步骤 -->
+      <div class="max-w-4xl mx-auto">
+        <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
+          <!-- 步骤1 -->
+          <div class="bg-card rounded-xl border border-border/60 p-6 hover:shadow-md transition-shadow">
+            <div class="flex items-center gap-3 mb-4">
+              <div class="w-8 h-8 rounded-full bg-blue-500/10 flex items-center justify-center">
+                <span class="text-blue-500 font-bold">1</span>
+              </div>
+              <h3 class="text-lg font-semibold">{{ $t('DocPage.step1.title') }}</h3>
+            </div>
+            <p class="text-muted-foreground mb-4">{{ $t('DocPage.step1.description') }}</p>
+            <div class="space-y-2">
+              <input
+                v-model="customMark"
+                type="text"
+                :placeholder="$t('DocPage.step1.placeholder')"
+                class="w-full px-3 py-2 text-sm border border-input rounded-md bg-background"
+                @input="generateBookmarkletUrl"
+              />
+              <button
+                @click="generateRandomMarkId"
+                class="w-full px-3 py-2 text-sm bg-secondary text-secondary-foreground rounded-md hover:bg-secondary/80 transition-colors"
+              >
+                {{ $t('DocPage.step1.random') }}
+              </button>
+            </div>
+          </div>
+
+          <!-- 步骤2 -->
+          <div class="bg-card rounded-xl border border-border/60 p-6 hover:shadow-md transition-shadow">
+            <div class="flex items-center gap-3 mb-4">
+              <div class="w-8 h-8 rounded-full bg-green-500/10 flex items-center justify-center">
+                <span class="text-green-500 font-bold">2</span>
+              </div>
+              <h3 class="text-lg font-semibold">{{ $t('DocPage.step2.title') }}</h3>
+            </div>
+            <p class="text-muted-foreground mb-4">{{ $t('DocPage.step2.description') }}</p>
+            <div v-if="bookmarkletUrl" class="space-y-2">
+              <div class="p-3 bg-secondary/50 rounded-md border border-dashed border-border">
+                <a
+                  :href="bookmarkletUrl"
+                  @click.prevent="copyBookmarklet"
+                  class="text-sm text-blue-600 hover:text-blue-700 break-all cursor-pointer"
+                  :title="$t('DocPage.step2.dragTip')"
+                >
+                  📚 Save to {{ customMark || 'my-bookmarks' }}
+                </a>
+              </div>
+              <p class="text-xs text-muted-foreground">{{ $t('DocPage.step2.dragTip') }}</p>
+            </div>
+          </div>
+
+          <!-- 步骤3 -->
+          <div class="bg-card rounded-xl border border-border/60 p-6 hover:shadow-md transition-shadow">
+            <div class="flex items-center gap-3 mb-4">
+              <div class="w-8 h-8 rounded-full bg-purple-500/10 flex items-center justify-center">
+                <span class="text-purple-500 font-bold">3</span>
+              </div>
+              <h3 class="text-lg font-semibold">{{ $t('DocPage.step3.title') }}</h3>
+            </div>
+            <p class="text-muted-foreground mb-4">{{ $t('DocPage.step3.description') }}</p>
+            <div v-if="bookmarksUrl" class="space-y-2">
+              <NuxtLink
+                :to="bookmarksUrl"
+                class="inline-block w-full px-3 py-2 text-sm text-center bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors"
+              >
+                {{ $t('DocPage.step3.visit') }}
+              </NuxtLink>
+              <p class="text-xs text-muted-foreground break-all">{{ baseUrl }}{{ bookmarksUrl }}</p>
+            </div>
+          </div>
+        </div>
+
+        <!-- 特性说明 -->
+        <div class="mt-16">
+          <h2 class="text-2xl font-bold text-center mb-8">{{ $t('DocPage.features.title') }}</h2>
+          <div class="grid gap-6 md:grid-cols-2">
+            <div
+              v-for="(feature, index) in features"
+              :key="index"
+              class="flex gap-4 p-6 bg-card/50 rounded-xl border border-border/60"
+            >
+              <div class="flex-shrink-0">
+                <Icon :name="feature.icon" class="h-6 w-6 text-primary" />
+              </div>
+              <div>
+                <h3 class="font-semibold mb-2">{{ feature.title }}</h3>
+                <p class="text-muted-foreground text-sm">{{ feature.description }}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 示例 -->
+        <div class="mt-16 text-center">
+          <h2 class="text-2xl font-bold mb-4">{{ $t('DocPage.demo.title') }}</h2>
+          <p class="text-muted-foreground mb-6">{{ $t('DocPage.demo.description') }}</p>
+          <NuxtLink
+            to="/demo"
+            class="inline-flex items-center gap-2 px-6 py-3 bg-secondary text-secondary-foreground rounded-lg hover:bg-secondary/80 transition-colors"
+          >
+            <Icon name="lucide:play" class="h-4 w-4" />
+            {{ $t('DocPage.demo.button') }}
+          </NuxtLink>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { toast } from 'vue-sonner'
+
+const { t } = useI18n()
+
+// Reactive state
+const customMark = ref('')
+const bookmarkletUrl = ref('')
+const bookmarksUrl = ref('')
+const baseUrl = getBaseUrl()
+
+// Features data
+const features = computed(() => [
+  {
+    icon: 'lucide:shield-check',
+    title: t('DocPage.features.noRegistration.title'),
+    description: t('DocPage.features.noRegistration.description')
+  },
+  {
+    icon: 'lucide:bookmark-plus',
+    title: t('DocPage.features.oneClick.title'),
+    description: t('DocPage.features.oneClick.description')
+  },
+  {
+    icon: 'lucide:tag',
+    title: t('DocPage.features.categories.title'),
+    description: t('DocPage.features.categories.description')
+  },
+  {
+    icon: 'lucide:globe',
+    title: t('DocPage.features.crossDevice.title'),
+    description: t('DocPage.features.crossDevice.description')
+  }
+])
+
+// Methods
+const generateRandomMarkId = () => {
+  customMark.value = generateRandomMark()
+  generateBookmarkletUrl()
+}
+
+const generateBookmarkletUrl = () => {
+  const mark = customMark.value || 'my-bookmarks'
+  bookmarkletUrl.value = `javascript:(function(){let m='${mark}',u=encodeURIComponent(location.href),t=encodeURIComponent(document.title);window.open('${baseUrl}/api/bookmarks/add?mark='+m+'&title='+t+'&url='+u, '_blank').focus()})()`
+  bookmarksUrl.value = `/${mark}`
+}
+
+const copyBookmarklet = async () => {
+  try {
+    await navigator.clipboard.writeText(bookmarkletUrl.value)
+    toast.success(t('DocPage.step2.copied'))
+  } catch (error) {
+    toast.error(t('DocPage.step2.copyFailed'))
+  }
+}
+
+// Initialize with random mark
+onMounted(() => {
+  generateRandomMarkId()
+})
+
+// SEO
+useHead({
+  title: 'Quick Start Guide | Cloudmark',
+  meta: [
+    {
+      name: 'description',
+      content: 'Learn how to use Cloudmark in 3 simple steps. Create your bookmark collection and start saving links instantly.'
+    }
+  ]
+})
+</script>
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
new file mode 100644
index 0000000..e928364
--- /dev/null
+++ b/pages/index.vue
@@ -0,0 +1,116 @@
+<template>
+  <div class="container relative">
+    <!-- 装饰背景元素 -->
+    <div class="fixed inset-0 -z-10">
+      <div class="absolute top-0 right-0 w-[40rem] h-[40rem] bg-blue-500/10 rounded-full blur-3xl transform -translate-y-12 translate-x-12" />
+      <div class="absolute bottom-0 left-0 w-[50rem] h-[50rem] bg-purple-500/10 rounded-full blur-3xl transform translate-y-12 -translate-x-12" />
+      <div class="absolute bottom-1/3 right-1/4 w-[30rem] h-[30rem] bg-indigo-500/5 rounded-full blur-3xl" />
+    </div>
+
+    <!-- Hero 区域 -->
+    <div class="flex flex-col items-center text-center pt-16 lg:pt-24 pb-8 max-w-3xl mx-auto animate-fadeIn">
+      <!-- Logo 和主标题 -->
+      <div class="relative mb-3 animate-scaleIn">
+        <h1 class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-500 via-indigo-500 to-purple-500">
+          Cloudmark
+        </h1>
+        <div class="absolute -inset-1 bg-blue-500/20 rounded-full blur-xl -z-10" />
+      </div>
+
+      <h2 class="text-4xl sm:text-5xl md:text-6xl font-bold tracking-tight text-foreground mb-6 animate-fadeIn animation-delay-400">
+        {{ $t('HomePage.title') }}
+      </h2>
+
+      <p class="text-xl text-muted-foreground mb-8 max-w-xl animate-fadeIn animation-delay-600">
+        {{ $t('HomePage.description') }}
+      </p>
+
+      <!-- GitHub Star Badge -->
+      <div class="mb-8 animate-fadeIn animation-delay-700">
+        <a
+          href="https://github.com/wesleyel/cloudmark"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <img
+            src="https://img.shields.io/github/stars/wesleyel/cloudmark?style=social"
+            alt="GitHub stars"
+            class="transition-transform hover:scale-105"
+          />
+        </a>
+      </div>
+
+      <div class="flex gap-4">
+        <div class="animate-fadeUp animation-delay-800 hover-scale active-scale">
+          <NuxtLink
+            to="/doc"
+            class="inline-flex items-center gap-2 rounded-full bg-primary px-8 py-3 text-base font-medium text-primary-foreground shadow hover:bg-primary/90 transition-colors"
+          >
+            {{ $t('HomePage.quickstart') }}
+            <Icon name="lucide:arrow-right" class="h-4 w-4" />
+          </NuxtLink>
+        </div>
+
+        <div class="animate-fadeUp animation-delay-900 hover-scale active-scale">
+          <NuxtLink
+            to="/demo"
+            class="inline-flex items-center gap-2 rounded-full border border-input bg-background px-8 py-3 text-base font-medium shadow-sm hover:bg-accent hover:text-accent-foreground transition-colors"
+          >
+            Demo
+            <Icon name="lucide:external-link" class="h-4 w-4" />
+          </NuxtLink>
+        </div>
+      </div>
+    </div>
+
+    <!-- 特性卡片 -->
+    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 py-12 stagger-container">
+      <div
+        v-for="(key, index) in featureKeys"
+        :key="key"
+        :class="`relative rounded-xl border border-border/60 bg-card/50 backdrop-blur-sm p-6 transition-all stagger-item feature-card animation-delay-${index * 100}`"
+      >
+        <div class="absolute top-0 right-0 w-12 h-12 rounded-full bg-gradient-to-br from-blue-500/20 to-purple-500/20 blur-lg -z-10 transform -translate-y-1/4 translate-x-1/4" />
+        <h3 class="font-semibold mb-3 text-xl">
+          {{ $t(`HomePage.features.${key}.title`) }}
+        </h3>
+        <p class="text-muted-foreground">
+          {{ $t(`HomePage.features.${key}.desc`) }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { t } = useI18n()
+
+// Get feature keys dynamically from the translation messages
+const featureKeys = computed(() => {
+  const messages = (useNuxtApp().$i18n as any).getLocaleMessage(useI18n().locale.value)
+  return Object.keys(messages.HomePage?.features || {})
+})
+
+// SEO
+useHead({
+  title: 'Cloudmark - Your Universal Bookmark Manager',
+  meta: [
+    {
+      name: 'description',
+      content: 'Save and access your bookmarks from anywhere with Cloudmark, the seamless cloud bookmarking tool for professionals and casual users alike'
+    },
+    {
+      property: 'og:title',
+      content: 'Cloudmark - Your Universal Bookmark Manager'
+    },
+    {
+      property: 'og:description',
+      content: 'Save and access your bookmarks from anywhere with Cloudmark'
+    },
+    {
+      property: 'og:image',
+      content: '/og-image-en.png'
+    }
+  ]
+})
+</script>
\ No newline at end of file
diff --git a/plugins/toast.client.ts b/plugins/toast.client.ts
new file mode 100644
index 0000000..71dd0a9
--- /dev/null
+++ b/plugins/toast.client.ts
@@ -0,0 +1,14 @@
+import { toast } from 'vue-sonner'
+
+export default defineNuxtPlugin(() => {
+  return {
+    provide: {
+      toast: {
+        success: (message: string) => toast.success(message),
+        error: (message: string) => toast.error(message),
+        warning: (message: string) => toast.warning(message),
+        info: (message: string) => toast.info(message),
+      }
+    }
+  }
+})
\ No newline at end of file
diff --git a/server/api/bookmarks/[mark].get.ts b/server/api/bookmarks/[mark].get.ts
new file mode 100644
index 0000000..d792938
--- /dev/null
+++ b/server/api/bookmarks/[mark].get.ts
@@ -0,0 +1,44 @@
+import type { BookmarksData } from '~/types'
+import { isDemoMark } from '~/types'
+import { DEMO_BOOKMARKS_DATA } from '~/data/demo'
+
+export default defineEventHandler(async (event) => {
+  const mark = getRouterParam(event, 'mark')
+  
+  if (!mark) {
+    throw createError({
+      statusCode: 400,
+      statusMessage: 'Mark parameter is required'
+    })
+  }
+
+  const isDemo = isDemoMark(mark)
+  if (isDemo) {
+    return DEMO_BOOKMARKS_DATA
+  }
+
+  try {
+    // For Cloudflare KV storage
+    const env = event.context.cloudflare?.env
+    if (!env?.cloudmark) {
+      throw createError({
+        statusCode: 500,
+        statusMessage: 'KV storage not available'
+      })
+    }
+
+    const bookmarksData = await env.cloudmark.get<BookmarksData>(mark, 'json')
+    
+    if (!bookmarksData) {
+      return null
+    }
+
+    return bookmarksData
+  } catch (error) {
+    console.error('Error fetching bookmarks:', error)
+    throw createError({
+      statusCode: 500,
+      statusMessage: 'Failed to fetch bookmarks'
+    })
+  }
+})
\ No newline at end of file
diff --git a/server/api/bookmarks/add.ts b/server/api/bookmarks/add.ts
new file mode 100644
index 0000000..2d37f2e
--- /dev/null
+++ b/server/api/bookmarks/add.ts
@@ -0,0 +1,183 @@
+import type { BookmarkInstance, BookmarksData } from '~/types'
+import { isDemoMark, defaultCategory } from '~/types'
+import { bookmarkSchema } from '~/utils/schema'
+
+function generateUUID(): string {
+  return crypto.randomUUID()
+}
+
+function createDefaultBookmarksData(mark: string): BookmarksData {
+  return {
+    mark,
+    bookmarks: [],
+  }
+}
+
+async function getFavicon(url: string, size: number = 64): Promise<string> {
+  const domain = new URL(url).hostname.replace("www.", "")
+  return `https://www.google.com/s2/favicons?domain=${domain}&sz=${size}`
+}
+
+export default defineEventHandler(async (event) => {
+  const method = getMethod(event)
+  
+  if (method === 'GET') {
+    // Handle bookmarklet GET request
+    const query = getQuery(event)
+    const { mark, title = 'Untitled', url } = query
+    
+    if (!mark || !url) {
+      throw createError({
+        statusCode: 400,
+        statusMessage: 'Mark and URL parameters are required'
+      })
+    }
+
+    const formData = {
+      mark: mark as string,
+      url: url as string,
+      title: title as string,
+      category: defaultCategory
+    }
+
+    // Validate data
+    const result = bookmarkSchema.safeParse(formData)
+    if (!result.success) {
+      throw createError({
+        statusCode: 400,
+        statusMessage: 'Invalid data: ' + result.error.message
+      })
+    }
+
+    const data = result.data
+    const isDemo = isDemoMark(data.mark)
+    
+    if (isDemo) {
+      throw createError({
+        statusCode: 400,
+        statusMessage: 'Demo mode - cannot add bookmarks'
+      })
+    }
+
+    try {
+      const env = event.context.cloudflare?.env
+      if (!env?.cloudmark) {
+        throw createError({
+          statusCode: 500,
+          statusMessage: 'KV storage not available'
+        })
+      }
+
+      let bookmarksData = await env.cloudmark.get<BookmarksData>(data.mark, 'json')
+      if (!bookmarksData) {
+        bookmarksData = createDefaultBookmarksData(data.mark)
+      }
+
+      // Check if bookmark already exists
+      if (bookmarksData.bookmarks.find((b) => b.url === data.url)) {
+        throw createError({
+          statusCode: 409,
+          statusMessage: `Bookmark ${data.title} (${data.url}) already exists`
+        })
+      }
+
+      const uuid = generateUUID()
+      const favicon = await getFavicon(data.url)
+      const newBookmark: BookmarkInstance = {
+        uuid,
+        url: data.url,
+        title: data.title,
+        description: data.description || '',
+        category: data.category,
+        favicon,
+        createdAt: new Date().toISOString(),
+        modifiedAt: new Date().toISOString(),
+      }
+
+      bookmarksData.bookmarks.push(newBookmark)
+      await env.cloudmark.put(data.mark, JSON.stringify(bookmarksData))
+
+      // Redirect back to bookmark page with success message
+      return sendRedirect(event, `/${data.mark}?status=success&message=${encodeURIComponent('Bookmark added successfully')}`)
+    } catch (error: any) {
+      console.error('Error adding bookmark:', error)
+      return sendRedirect(event, `/${data.mark}?status=error&message=${encodeURIComponent(error.message || 'Failed to add bookmark')}`)
+    }
+  }
+
+  if (method === 'POST') {
+    // Handle form POST request
+    const body = await readBody(event)
+    
+    // Validate data
+    const result = bookmarkSchema.safeParse(body)
+    if (!result.success) {
+      throw createError({
+        statusCode: 400,
+        statusMessage: 'Invalid data: ' + result.error.message
+      })
+    }
+
+    const data = result.data
+    const isDemo = isDemoMark(data.mark)
+    
+    if (isDemo) {
+      throw createError({
+        statusCode: 400,
+        statusMessage: 'Demo mode - cannot add bookmarks'
+      })
+    }
+
+    try {
+      const env = event.context.cloudflare?.env
+      if (!env?.cloudmark) {
+        throw createError({
+          statusCode: 500,
+          statusMessage: 'KV storage not available'
+        })
+      }
+
+      let bookmarksData = await env.cloudmark.get<BookmarksData>(data.mark, 'json')
+      if (!bookmarksData) {
+        bookmarksData = createDefaultBookmarksData(data.mark)
+      }
+
+      // Check if bookmark already exists
+      if (bookmarksData.bookmarks.find((b) => b.url === data.url)) {
+        throw createError({
+          statusCode: 409,
+          statusMessage: `Bookmark ${data.title} (${data.url}) already exists`
+        })
+      }
+
+      const uuid = generateUUID()
+      const favicon = await getFavicon(data.url)
+      const newBookmark: BookmarkInstance = {
+        uuid,
+        url: data.url,
+        title: data.title,
+        description: data.description || '',
+        category: data.category,
+        favicon,
+        createdAt: new Date().toISOString(),
+        modifiedAt: new Date().toISOString(),
+      }
+
+      bookmarksData.bookmarks.push(newBookmark)
+      await env.cloudmark.put(data.mark, JSON.stringify(bookmarksData))
+
+      return newBookmark
+    } catch (error: any) {
+      console.error('Error adding bookmark:', error)
+      throw createError({
+        statusCode: 500,
+        statusMessage: error.message || 'Failed to add bookmark'
+      })
+    }
+  }
+
+  throw createError({
+    statusCode: 405,
+    statusMessage: 'Method not allowed'
+  })
+})
\ No newline at end of file
diff --git a/server/api/bookmarks/delete.ts b/server/api/bookmarks/delete.ts
new file mode 100644
index 0000000..39336f1
--- /dev/null
+++ b/server/api/bookmarks/delete.ts
@@ -0,0 +1,72 @@
+import type { BookmarksData } from '~/types'
+import { isDemoMark } from '~/types'
+import { deleteBookmarkSchema } from '~/utils/schema'
+
+export default defineEventHandler(async (event) => {
+  if (getMethod(event) !== 'POST') {
+    throw createError({
+      statusCode: 405,
+      statusMessage: 'Method not allowed'
+    })
+  }
+
+  const body = await readBody(event)
+  
+  // Validate data
+  const result = deleteBookmarkSchema.safeParse(body)
+  if (!result.success) {
+    throw createError({
+      statusCode: 400,
+      statusMessage: 'Invalid data: ' + result.error.message
+    })
+  }
+
+  const data = result.data
+  const isDemo = isDemoMark(data.mark)
+  
+  if (isDemo) {
+    throw createError({
+      statusCode: 400,
+      statusMessage: 'Demo mode - cannot delete bookmarks'
+    })
+  }
+
+  try {
+    const env = event.context.cloudflare?.env
+    if (!env?.cloudmark) {
+      throw createError({
+        statusCode: 500,
+        statusMessage: 'KV storage not available'
+      })
+    }
+
+    const bookmarksData = await env.cloudmark.get<BookmarksData>(data.mark, 'json')
+    if (!bookmarksData) {
+      throw createError({
+        statusCode: 404,
+        statusMessage: `Bookmarks data for mark ${data.mark} not found`
+      })
+    }
+
+    const bookmarkIndex = bookmarksData.bookmarks.findIndex(
+      (b) => b.uuid === data.uuid
+    )
+    if (bookmarkIndex === -1) {
+      throw createError({
+        statusCode: 404,
+        statusMessage: `Bookmark with UUID ${data.uuid} not found`
+      })
+    }
+
+    bookmarksData.bookmarks.splice(bookmarkIndex, 1)
+    await env.cloudmark.put(data.mark, JSON.stringify(bookmarksData))
+
+    return { success: true }
+  } catch (error: any) {
+    console.error('Error deleting bookmark:', error)
+    throw createError({
+      statusCode: 500,
+      statusMessage: error.message || 'Failed to delete bookmark'
+    })
+  }
+})
\ No newline at end of file
diff --git a/server/api/bookmarks/update.ts b/server/api/bookmarks/update.ts
new file mode 100644
index 0000000..e00af35
--- /dev/null
+++ b/server/api/bookmarks/update.ts
@@ -0,0 +1,81 @@
+import type { BookmarkInstance, BookmarksData } from '~/types'
+import { isDemoMark } from '~/types'
+import { updateBookmarkSchema } from '~/utils/schema'
+
+export default defineEventHandler(async (event) => {
+  if (getMethod(event) !== 'POST') {
+    throw createError({
+      statusCode: 405,
+      statusMessage: 'Method not allowed'
+    })
+  }
+
+  const body = await readBody(event)
+  
+  // Validate data
+  const result = updateBookmarkSchema.safeParse(body)
+  if (!result.success) {
+    throw createError({
+      statusCode: 400,
+      statusMessage: 'Invalid data: ' + result.error.message
+    })
+  }
+
+  const data = result.data
+  const isDemo = isDemoMark(data.mark)
+  
+  if (isDemo) {
+    throw createError({
+      statusCode: 400,
+      statusMessage: 'Demo mode - cannot update bookmarks'
+    })
+  }
+
+  try {
+    const env = event.context.cloudflare?.env
+    if (!env?.cloudmark) {
+      throw createError({
+        statusCode: 500,
+        statusMessage: 'KV storage not available'
+      })
+    }
+
+    const bookmarksData = await env.cloudmark.get<BookmarksData>(data.mark, 'json')
+    if (!bookmarksData) {
+      throw createError({
+        statusCode: 404,
+        statusMessage: `Bookmarks data for mark ${data.mark} not found`
+      })
+    }
+
+    const bookmarkIndex = bookmarksData.bookmarks.findIndex(
+      (b) => b.uuid === data.uuid
+    )
+    if (bookmarkIndex === -1) {
+      throw createError({
+        statusCode: 404,
+        statusMessage: `Bookmark with UUID ${data.uuid} not found`
+      })
+    }
+
+    const updatedBookmark: BookmarkInstance = {
+      ...bookmarksData.bookmarks[bookmarkIndex],
+      url: data.url,
+      title: data.title,
+      description: data.description || '',
+      category: data.category,
+      modifiedAt: new Date().toISOString(),
+    }
+
+    bookmarksData.bookmarks[bookmarkIndex] = updatedBookmark
+    await env.cloudmark.put(data.mark, JSON.stringify(bookmarksData))
+
+    return updatedBookmark
+  } catch (error: any) {
+    console.error('Error updating bookmark:', error)
+    throw createError({
+      statusCode: 500,
+      statusMessage: error.message || 'Failed to update bookmark'
+    })
+  }
+})
\ No newline at end of file
diff --git a/types/index.ts b/types/index.ts
new file mode 100644
index 0000000..7300fa0
--- /dev/null
+++ b/types/index.ts
@@ -0,0 +1,37 @@
+export const defaultMark = "demo";
+export const defaultCategory = "General";
+
+export interface BookmarkInstance {
+  uuid: string;
+  url: string;
+  title: string;
+  description: string;
+  category: string;
+  favicon: string;
+  createdAt: string;
+  modifiedAt: string;
+}
+
+export interface BookmarksData {
+  mark: string;
+  bookmarks: BookmarkInstance[];
+}
+
+export function isDemoMark(mark: string): boolean {
+  return mark === defaultMark;
+}
+
+export interface Toast {
+  title: string;
+  description?: string;
+  variant?: 'default' | 'success' | 'error' | 'warning' | 'info';
+}
+
+export interface BookmarkFormData {
+  mark: string;
+  url: string;
+  title: string;
+  description?: string;
+  category: string;
+  uuid?: string;
+}
\ No newline at end of file
diff --git a/utils/index.ts b/utils/index.ts
new file mode 100644
index 0000000..cda5440
--- /dev/null
+++ b/utils/index.ts
@@ -0,0 +1,67 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+import type { BookmarksData } from "~/types"
+import { defaultCategory } from "~/types"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+export function getBaseUrl(): string {
+  const config = useRuntimeConfig()
+  return config.public.baseUrl || 'http://localhost:3000'
+}
+
+export function getCategories(bookmarksData: BookmarksData | null): string[] {
+  if (!bookmarksData || !bookmarksData.bookmarks) {
+    return [defaultCategory]
+  }
+  
+  const uniqueCategories = [
+    ...new Set(bookmarksData.bookmarks.map((bookmark) => bookmark.category))
+  ]
+
+  if (!uniqueCategories.includes(defaultCategory)) {
+    return [defaultCategory, ...uniqueCategories]
+  }
+
+  return [
+    defaultCategory,
+    ...uniqueCategories.filter((category) => category !== defaultCategory)
+  ]
+}
+
+export function getDomain(url: string): string {
+  return new URL(url).hostname.replace("www.", "")
+}
+
+export function generateRandomMark(): string {
+  const adjectives = [
+    "vacuous",
+    "tearful", 
+    "faint",
+    "jumbled",
+    "wandering",
+    "mature",
+    "savory",
+    "mighty",
+    "disgusted",
+    "abstracted",
+    "telling",
+  ]
+  const nouns = [
+    "person",
+    "inspector",
+    "significance", 
+    "chapter",
+    "reputation",
+    "outcome",
+    "association",
+    "failure",
+    "population",
+    "wealth",
+    "bird",
+  ]
+  const randomNum = Math.floor(Math.random() * 10000)
+  return `${adjectives[Math.floor(Math.random() * adjectives.length)]}-${nouns[Math.floor(Math.random() * nouns.length)]}-${randomNum}`
+}
\ No newline at end of file
diff --git a/utils/schema.ts b/utils/schema.ts
new file mode 100644
index 0000000..bc3e43c
--- /dev/null
+++ b/utils/schema.ts
@@ -0,0 +1,22 @@
+import { z } from 'zod'
+
+export const bookmarkSchema = z.object({
+  mark: z.string().min(1, 'Mark is required'),
+  url: z.string().url('Invalid URL'),
+  title: z.string().min(1, 'Title is required'),
+  description: z.string().optional(),
+  category: z.string().min(1, 'Category is required'),
+})
+
+export const updateBookmarkSchema = bookmarkSchema.extend({
+  uuid: z.string().min(1, 'UUID is required'),
+})
+
+export const deleteBookmarkSchema = z.object({
+  mark: z.string().min(1, 'Mark is required'),
+  uuid: z.string().min(1, 'UUID is required'),
+})
+
+export type BookmarkFormData = z.infer<typeof bookmarkSchema>
+export type UpdateBookmarkFormData = z.infer<typeof updateBookmarkSchema>
+export type DeleteBookmarkFormData = z.infer<typeof deleteBookmarkSchema>
\ No newline at end of file
diff --git a/wrangler.jsonc b/wrangler.jsonc
index f12f5e6..c602484 100644
--- a/wrangler.jsonc
+++ b/wrangler.jsonc
@@ -4,12 +4,12 @@
  */
 {
   "$schema": "node_modules/wrangler/config-schema.json",
-  "main": ".open-next/worker.js",
+  "main": ".output/server/index.mjs",
   "name": "cloudmark",
   "compatibility_date": "2025-02-14",
   "compatibility_flags": ["nodejs_compat"],
   "assets": {
-    "directory": ".open-next/assets",
+    "directory": ".output/public",
     "binding": "ASSETS",
   },
   "observability": {