diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 7a1b90a..ef9d7df 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -25,8 +25,31 @@ jobs:
       - name: Run oxlint
         run: bun run lint
 
+  format:
+      name: Format Check
+      runs-on: ubuntu-latest
+      steps:
+        - uses: actions/checkout@v5
+
+        - name: Setup Bun
+          uses: oven-sh/setup-bun@v2
+
+        - name: Install dependencies
+          run: bun install
+
+        - name: Check code format
+          run: bun run format:check
+
+        - name: Setup Rust
+          uses: dtolnay/rust-toolchain@stable
+
+        - name: Check Rust formatting
+          working-directory: ./desktop/src-tauri
+          run: cargo fmt --check
+
   test:
-    needs: lint
+    name: Test
+    needs: [lint, format]
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
@@ -44,10 +67,6 @@ jobs:
       - name: Install dependencies
         run: bun install
       
-      - name: Check Rust formatting
-        working-directory: ./desktop/src-tauri
-        run: cargo fmt --check
-      
       - name: Run Rust tests
         working-directory: ./desktop/src-tauri
         run: cargo test
diff --git a/.prettierrc.json b/.prettierrc.json
new file mode 100644
index 0000000..544138b
--- /dev/null
+++ b/.prettierrc.json
@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}
diff --git a/bun.lock b/bun.lock
index 8c12623..baf4dc6 100644
--- a/bun.lock
+++ b/bun.lock
@@ -10,7 +10,7 @@
         "@types/better-sqlite3": "^7.6.13",
         "concurrently": "^9.2.1",
         "cross-env": "^10.1.0",
-        "oxlint": "^1.28.0",
+        "prettier": "^3.6.2",
         "wait-on": "^8.0.4",
       },
     },
@@ -173,22 +173,6 @@
 
     "@octokit/webhooks-methods": ["@octokit/webhooks-methods@6.0.0", "", {}, "sha512-MFlzzoDJVw/GcbfzVC1RLR36QqkTLUf79vLVO3D+xn7r0QgxnFoLZgtrzxiQErAjFUOdH6fas2KeQJ1yr/qaXQ=="],
 
-    "@oxlint/darwin-arm64": ["@oxlint/darwin-arm64@1.28.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-H7J41/iKbgm7tTpdSnA/AtjEAhxyzNzCMKWtKU5wDuP2v39jrc3fasQEJruk6hj1YXPbJY4N+1nK/jE27GMGDQ=="],
-
-    "@oxlint/darwin-x64": ["@oxlint/darwin-x64@1.28.0", "", { "os": "darwin", "cpu": "x64" }, "sha512-bGsSDEwpyYzNc6FIwhTmbhSK7piREUjMlmWBt7eoR3ract0+RfhZYYG4se1Ngs+4WOFC0B3gbv23fyF+cnbGGQ=="],
-
-    "@oxlint/linux-arm64-gnu": ["@oxlint/linux-arm64-gnu@1.28.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-eNH/evMpV3xAA4jIS8dMLcGkM/LK0WEHM0RO9bxrHPAwfS72jhyPJtd0R7nZhvhG6U1bhn5jhoXbk1dn27XIAQ=="],
-
-    "@oxlint/linux-arm64-musl": ["@oxlint/linux-arm64-musl@1.28.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-ickvpcekNeRLND3llndiZOtJBb6LDZqNnZICIDkovURkOIWPGJGmAxsHUOI6yW6iny9gLmIEIGl/c1b5nFk6Ag=="],
-
-    "@oxlint/linux-x64-gnu": ["@oxlint/linux-x64-gnu@1.28.0", "", { "os": "linux", "cpu": "x64" }, "sha512-DkgAh4LQ8NR3DwTT7/LGMhaMau0RtZkih91Ez5Usk7H7SOxo1GDi84beE7it2Q+22cAzgY4hbw3c6svonQTjxg=="],
-
-    "@oxlint/linux-x64-musl": ["@oxlint/linux-x64-musl@1.28.0", "", { "os": "linux", "cpu": "x64" }, "sha512-VBnMi3AJ2w5p/kgeyrjcGOKNY8RzZWWvlGHjCJwzqPgob4MXu6T+5Yrdi7EVJyIlouL8E3LYPYjmzB9NBi9gZw=="],
-
-    "@oxlint/win32-arm64": ["@oxlint/win32-arm64@1.28.0", "", { "os": "win32", "cpu": "arm64" }, "sha512-tomhIks+4dKs8axB+s4GXHy+ZWXhUgptf1XnG5cZg8CzRfX4JFX9k8l2fPUgFwytWnyyvZaaXLRPWGzoZ6yoHQ=="],
-
-    "@oxlint/win32-x64": ["@oxlint/win32-x64@1.28.0", "", { "os": "win32", "cpu": "x64" }, "sha512-4+VO5P/UJ2nq9sj6kQToJxFy5cKs7dGIN2DiUSQ7cqyUi7EKYNQKe+98HFcDOjtm33jQOQnc4kw8Igya5KPozg=="],
-
     "@rollup/rollup-android-arm-eabi": ["@rollup/rollup-android-arm-eabi@4.52.3", "", { "os": "android", "cpu": "arm" }, "sha512-h6cqHGZ6VdnwliFG1NXvMPTy/9PS3h8oLh7ImwR+kl+oYnQizgjxsONmmPSb2C66RksfkfIxEVtDSEcJiO0tqw=="],
 
     "@rollup/rollup-android-arm64": ["@rollup/rollup-android-arm64@4.52.3", "", { "os": "android", "cpu": "arm64" }, "sha512-wd+u7SLT/u6knklV/ifG7gr5Qy4GUbH2hMWcDauPFJzmCZUAJ8L2bTkVXC2niOIxp8lk3iH/QX8kSrUxVZrOVw=="],
@@ -489,8 +473,6 @@
 
     "oniguruma-to-es": ["oniguruma-to-es@4.3.3", "", { "dependencies": { "oniguruma-parser": "^0.12.1", "regex": "^6.0.1", "regex-recursion": "^6.0.2" } }, "sha512-rPiZhzC3wXwE59YQMRDodUwwT9FZ9nNBwQQfsd1wfdtlKEyCdRV0avrTcSZ5xlIvGRVPd/cx6ZN45ECmS39xvg=="],
 
-    "oxlint": ["oxlint@1.28.0", "", { "optionalDependencies": { "@oxlint/darwin-arm64": "1.28.0", "@oxlint/darwin-x64": "1.28.0", "@oxlint/linux-arm64-gnu": "1.28.0", "@oxlint/linux-arm64-musl": "1.28.0", "@oxlint/linux-x64-gnu": "1.28.0", "@oxlint/linux-x64-musl": "1.28.0", "@oxlint/win32-arm64": "1.28.0", "@oxlint/win32-x64": "1.28.0" }, "peerDependencies": { "oxlint-tsgolint": ">=0.4.0" }, "optionalPeers": ["oxlint-tsgolint"], "bin": { "oxlint": "bin/oxlint", "oxc_language_server": "bin/oxc_language_server" } }, "sha512-gE97d0BcIlTTSJrim395B49mIbQ9VO8ZVoHdWai7Svl+lEeUAyCLTN4d7piw1kcB8VfgTp1JFVlAvMPD9GewMA=="],
-
     "package-manager-detector": ["package-manager-detector@1.5.0", "", {}, "sha512-uBj69dVlYe/+wxj8JOpr97XfsxH/eumMt6HqjNTmJDf/6NO9s+0uxeOneIz3AsPt2m6y9PqzDzd3ATcU17MNfw=="],
 
     "path-key": ["path-key@3.1.1", "", {}, "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q=="],
@@ -501,6 +483,8 @@
 
     "postcss": ["postcss@8.5.6", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg=="],
 
+    "prettier": ["prettier@3.6.2", "", { "bin": { "prettier": "bin/prettier.cjs" } }, "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ=="],
+
     "property-information": ["property-information@7.1.0", "", {}, "sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ=="],
 
     "proxy-from-env": ["proxy-from-env@1.1.0", "", {}, "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="],
diff --git a/desktop/src/App.vue b/desktop/src/App.vue
index add7352..146e49c 100644
--- a/desktop/src/App.vue
+++ b/desktop/src/App.vue
@@ -79,7 +79,7 @@ onMounted(async () => {
     console.log('Initializing database:', dbPath);
     db = await Database.load(dbPath);
     console.log('Database loaded:', db);
-    
+
     // Create table if it doesn't exist
     await db.execute(`
       CREATE TABLE IF NOT EXISTS notes (
@@ -89,7 +89,7 @@ onMounted(async () => {
       )
     `);
     console.log('Table created/verified');
-    
+
     await loadNotes();
     console.log('Notes loaded, count:', notes.value.length);
   } catch (error) {
@@ -99,15 +99,18 @@ onMounted(async () => {
 
 const loadNotes = async () => {
   try {
-    const result: Array<{ id: number; content: string; created_at: string }> = await db.select(
-      'SELECT id, content, created_at FROM notes ORDER BY created_at DESC'
+    const result: Array<{ id: number; content: string; created_at: string }> =
+      await db.select(
+        'SELECT id, content, created_at FROM notes ORDER BY created_at DESC',
+      );
+
+    notes.value = result.map(
+      (note: { id: number; content: string; created_at: string }) => ({
+        id: note.id,
+        content: note.content,
+        createdAt: new Date(note.created_at),
+      }),
     );
-    
-    notes.value = result.map((note: { id: number; content: string; created_at: string }) => ({
-      id: note.id,
-      content: note.content,
-      createdAt: new Date(note.created_at)
-    }));
   } catch (error) {
     console.error('Failed to load notes:', error);
   }
@@ -117,7 +120,7 @@ const loadNotes = async () => {
 const extractTags = (content: string): string[] => {
   const tagRegex = /#(\w+)/g;
   const matches = content.matchAll(tagRegex);
-  return Array.from(matches, m => m[1].toLowerCase());
+  return Array.from(matches, (m) => m[1].toLowerCase());
 };
 
 // Fuse.js configuration for fuzzy search
@@ -131,31 +134,33 @@ const fuseOptions = {
 
 const filteredNotes = computed(() => {
   let filtered = notes.value;
-  
+
   // Filter by search query using Fuse.js fuzzy search
   if (searchQuery.value.trim()) {
     const fuse = new Fuse(filtered, fuseOptions);
     const results = fuse.search(searchQuery.value);
-    filtered = results.map(result => result.item);
+    filtered = results.map((result) => result.item);
   }
-  
+
   // Filter by date
   if (selectedDate.value) {
-    filtered = filtered.filter(note => {
+    filtered = filtered.filter((note) => {
       const noteDate = new Date(note.createdAt);
       return noteDate.toDateString() === selectedDate.value!.toDateString();
     });
   }
-  
+
   // Filter by tags (AND logic - note must have ALL selected tags)
   if (selectedTags.value.length > 0) {
-    filtered = filtered.filter(note => {
+    filtered = filtered.filter((note) => {
       const tags = extractTags(note.content);
       // Check if note has ALL selected tags
-      return selectedTags.value.every(selectedTag => tags.includes(selectedTag));
+      return selectedTags.value.every((selectedTag) =>
+        tags.includes(selectedTag),
+      );
     });
   }
-  
+
   return filtered;
 });
 
@@ -169,16 +174,20 @@ const hasMoreNotes = computed(() => {
 });
 
 // Reset displayed count when filters change
-watch([searchQuery, selectedDate, selectedTags], () => {
-  displayedNotesCount.value = NOTES_PER_PAGE;
-}, { deep: true });
+watch(
+  [searchQuery, selectedDate, selectedTags],
+  () => {
+    displayedNotesCount.value = NOTES_PER_PAGE;
+  },
+  { deep: true },
+);
 
 // Infinite scroll handler
 const handleScroll = (event: Event) => {
   const target = event.target as HTMLElement;
   const scrollPosition = target.scrollTop + target.clientHeight;
   const scrollHeight = target.scrollHeight;
-  
+
   // Load more when user is within 200px of the bottom
   if (scrollHeight - scrollPosition < 200 && hasMoreNotes.value) {
     displayedNotesCount.value += NOTES_PER_PAGE;
@@ -191,25 +200,25 @@ const createNote = async (content: string) => {
       console.error('Database not initialized');
       return;
     }
-    
+
     const now = new Date().toISOString();
-    
+
     console.log('Creating note with content:', content);
-    
+
     const result = await db.execute(
       'INSERT INTO notes (content, created_at) VALUES ($1, $2)',
-      [content, now]
+      [content, now],
     );
-    
+
     console.log('Insert result:', result);
-    
+
     // Add to local array
     notes.value.unshift({
       id: result.lastInsertId,
       content,
-      createdAt: new Date(now)
+      createdAt: new Date(now),
     });
-    
+
     console.log('Note created successfully');
   } catch (error) {
     console.error('Failed to create note:', error);
@@ -219,7 +228,7 @@ const createNote = async (content: string) => {
 const deleteNote = async (id: number) => {
   try {
     await db.execute('DELETE FROM notes WHERE id = $1', [id]);
-    notes.value = notes.value.filter(note => note.id !== id);
+    notes.value = notes.value.filter((note) => note.id !== id);
   } catch (error) {
     console.error('Failed to delete note:', error);
   }
@@ -227,12 +236,12 @@ const deleteNote = async (id: number) => {
 
 const editNote = async (id: number, content: string) => {
   try {
-    await db.execute(
-      'UPDATE notes SET content = $1 WHERE id = $2',
-      [content, id]
-    );
-    
-    const note = notes.value.find(n => n.id === id);
+    await db.execute('UPDATE notes SET content = $1 WHERE id = $2', [
+      content,
+      id,
+    ]);
+
+    const note = notes.value.find((n) => n.id === id);
     if (note) {
       note.content = content;
     }
@@ -245,11 +254,10 @@ const editNote = async (id: number, content: string) => {
 <template>
   <!-- Custom blurred background -->
   <div class="app-background"></div>
-  
+
   <main class="main-container">
     <!-- Main Container - Apple-style centered layout with generous spacing -->
     <div class="content-wrapper">
-      
       <!-- Left Column - Search, Calendar and Tags (Glass Panel) -->
       <div class="left-column">
         <div class="left-panel">
@@ -257,7 +265,7 @@ const editNote = async (id: number, content: string) => {
           <div class="search-section">
             <SearchBar @update:search-query="searchQuery = $event" />
           </div>
-          
+
           <!-- Scrollable Content -->
           <div class="scrollable-content">
             <div class="calendar-wrapper">
@@ -269,7 +277,7 @@ const editNote = async (id: number, content: string) => {
                 @update:current-month="currentMonth = $event"
               />
             </div>
-            
+
             <div class="tags-wrapper">
               <TagsPanel
                 :notes="notes"
@@ -284,58 +292,71 @@ const editNote = async (id: number, content: string) => {
       <!-- Right Column - Notes Feed -->
       <div class="right-column">
         <!-- Notes Feed - Scrollable Container -->
-        <div 
+        <div
           ref="notesContainer"
           class="notes-feed-container"
           @scroll="handleScroll"
         >
-            <!-- Header -->
-            <NotesHeader 
-              :note-count="filteredNotes.length"
-              @open-settings="openSettings"
-            >
-              <template #theme-toggle>
-                <ThemeToggle />
-              </template>
-            </NotesHeader>
-            
-            <!-- Note Creator -->
-            <div class="note-creator-wrapper">
-              <NoteCreator @create="createNote" />
-            </div>
-            
-            <div v-if="filteredNotes.length > 0" class="notes-list">
-              <NoteItem
-                v-for="note in displayedNotes"
-                :key="note.id"
-                :note="note"
-                @delete="deleteNote"
-                @edit="editNote"
-              />
-              
-              <!-- Loading indicator when there are more notes -->
-              <div v-if="hasMoreNotes" class="loading-indicator">
-                <div class="loading-content">
-                  <svg class="spinner" fill="none" viewBox="0 0 24 24">
-                    <circle class="spinner-track" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                    <path class="spinner-path" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                  </svg>
-                  <span class="loading-text">
-                    Loading more notes... ({{ displayedNotes.length }} of {{ filteredNotes.length }})
-                  </span>
-                </div>
-              </div>
-              
-              <!-- End of list indicator -->
-              <div v-else class="end-indicator">
-                <p class="end-text">
-                  All {{ filteredNotes.length }} {{ filteredNotes.length === 1 ? 'note' : 'notes' }} loaded
-                </p>
+          <!-- Header -->
+          <NotesHeader
+            :note-count="filteredNotes.length"
+            @open-settings="openSettings"
+          >
+            <template #theme-toggle>
+              <ThemeToggle />
+            </template>
+          </NotesHeader>
+
+          <!-- Note Creator -->
+          <div class="note-creator-wrapper">
+            <NoteCreator @create="createNote" />
+          </div>
+
+          <div v-if="filteredNotes.length > 0" class="notes-list">
+            <NoteItem
+              v-for="note in displayedNotes"
+              :key="note.id"
+              :note="note"
+              @delete="deleteNote"
+              @edit="editNote"
+            />
+
+            <!-- Loading indicator when there are more notes -->
+            <div v-if="hasMoreNotes" class="loading-indicator">
+              <div class="loading-content">
+                <svg class="spinner" fill="none" viewBox="0 0 24 24">
+                  <circle
+                    class="spinner-track"
+                    cx="12"
+                    cy="12"
+                    r="10"
+                    stroke="currentColor"
+                    stroke-width="4"
+                  ></circle>
+                  <path
+                    class="spinner-path"
+                    fill="currentColor"
+                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                  ></path>
+                </svg>
+                <span class="loading-text">
+                  Loading more notes... ({{ displayedNotes.length }} of
+                  {{ filteredNotes.length }})
+                </span>
               </div>
             </div>
 
-            <!-- Empty State -->
-            <EmptyState v-else :has-date-filter="!!selectedDate" />
+            <!-- End of list indicator -->
+            <div v-else class="end-indicator">
+              <p class="end-text">
+                All {{ filteredNotes.length }}
+                {{ filteredNotes.length === 1 ? 'note' : 'notes' }} loaded
+              </p>
+            </div>
+          </div>
+
+          <!-- Empty State -->
+          <EmptyState v-else :has-date-filter="!!selectedDate" />
         </div>
       </div>
     </div>
diff --git a/desktop/src/components/Button.vue b/desktop/src/components/Button.vue
index a1d4863..d3a2436 100644
--- a/desktop/src/components/Button.vue
+++ b/desktop/src/components/Button.vue
@@ -25,20 +25,20 @@ const handleClick = () => {
 </script>
 
 <template>
-  <button 
-    @click="handleClick" 
+  <button
+    @click="handleClick"
     :disabled="disabled"
     :class="[
       'btn',
       `btn-${variant}`,
       `btn-${size}`,
       { 'btn-full-width': fullWidth },
-      { 'btn-disabled': disabled }
+      { 'btn-disabled': disabled },
     ]"
   >
     <!-- Shine effect on hover -->
     <span v-if="!disabled" class="btn-shine"></span>
-    
+
     <!-- Content -->
     <span class="btn-content">
       <slot />
@@ -92,7 +92,9 @@ const handleClick = () => {
 .btn-primary:not(.btn-disabled):hover {
   background-color: var(--color-text-secondary);
   border-color: var(--color-text-secondary);
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  box-shadow:
+    0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -2px rgba(0, 0, 0, 0.05);
 }
 
 .btn-primary:not(.btn-disabled):active {
@@ -116,7 +118,9 @@ const handleClick = () => {
 .btn-secondary:not(.btn-disabled):hover {
   border-color: var(--color-border-hover);
   background-color: var(--color-surface);
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  box-shadow:
+    0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -2px rgba(0, 0, 0, 0.05);
 }
 
 .btn-secondary:not(.btn-disabled):active {
@@ -139,7 +143,9 @@ const handleClick = () => {
 
 .btn-ghost:not(.btn-disabled):hover {
   background-color: var(--color-surface);
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  box-shadow:
+    0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -2px rgba(0, 0, 0, 0.05);
 }
 
 .btn-ghost:not(.btn-disabled):active {
diff --git a/desktop/src/components/CalendarView.vue b/desktop/src/components/CalendarView.vue
index fe49879..7379c53 100644
--- a/desktop/src/components/CalendarView.vue
+++ b/desktop/src/components/CalendarView.vue
@@ -37,32 +37,35 @@ const calendarDays = computed(() => {
   const days = [];
   const totalDays = daysInMonth.value;
   const firstDay = firstDayOfMonth.value;
-  
+
   // Add empty cells for days before the first day of the month
   for (let i = 0; i < firstDay; i++) {
     days.push(null);
   }
-  
+
   // Add the days of the month
   for (let i = 1; i <= totalDays; i++) {
     days.push(i);
   }
-  
+
   return days;
 });
 
 const monthName = computed(() => {
-  return props.currentMonth.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
+  return props.currentMonth.toLocaleDateString('en-US', {
+    month: 'long',
+    year: 'numeric',
+  });
 });
 
 const getNotesCountForDay = (day: number | null): number => {
   if (!day) return 0;
-  
+
   const year = props.currentMonth.getFullYear();
   const month = props.currentMonth.getMonth();
   const date = new Date(year, month, day);
-  
-  return props.notes.filter(note => {
+
+  return props.notes.filter((note) => {
     const noteDate = new Date(note.createdAt);
     return noteDate.toDateString() === date.toDateString();
   }).length;
@@ -70,32 +73,32 @@ const getNotesCountForDay = (day: number | null): number => {
 
 const isToday = (day: number | null): boolean => {
   if (!day) return false;
-  
+
   const today = new Date();
   const year = props.currentMonth.getFullYear();
   const month = props.currentMonth.getMonth();
   const date = new Date(year, month, day);
-  
+
   return date.toDateString() === today.toDateString();
 };
 
 const isSelected = (day: number | null): boolean => {
   if (!day || !props.selectedDate) return false;
-  
+
   const year = props.currentMonth.getFullYear();
   const month = props.currentMonth.getMonth();
   const date = new Date(year, month, day);
-  
+
   return date.toDateString() === props.selectedDate.toDateString();
 };
 
 const selectDate = (day: number | null) => {
   if (!day) return;
-  
+
   const year = props.currentMonth.getFullYear();
   const month = props.currentMonth.getMonth();
   const date = new Date(year, month, day);
-  
+
   if (props.selectedDate?.toDateString() === date.toDateString()) {
     emit('update:selectedDate', null); // Deselect if clicking the same date
   } else {
@@ -104,11 +107,23 @@ const selectDate = (day: number | null) => {
 };
 
 const previousMonth = () => {
-  emit('update:currentMonth', new Date(props.currentMonth.getFullYear(), props.currentMonth.getMonth() - 1));
+  emit(
+    'update:currentMonth',
+    new Date(
+      props.currentMonth.getFullYear(),
+      props.currentMonth.getMonth() - 1,
+    ),
+  );
 };
 
 const nextMonth = () => {
-  emit('update:currentMonth', new Date(props.currentMonth.getFullYear(), props.currentMonth.getMonth() + 1));
+  emit(
+    'update:currentMonth',
+    new Date(
+      props.currentMonth.getFullYear(),
+      props.currentMonth.getMonth() + 1,
+    ),
+  );
 };
 </script>
 
@@ -117,39 +132,73 @@ const nextMonth = () => {
     <!-- Calendar Header -->
     <div class="calendar-header">
       <div class="header-title">
-        <svg class="title-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
+        <svg
+          class="title-icon"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+          />
         </svg>
         <h2 class="title-text">Calendar</h2>
       </div>
-      
+
       <!-- Month Navigation -->
       <div class="month-navigation">
         <button @click="previousMonth" class="nav-button">
-          <svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/>
+          <svg
+            class="nav-icon"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M15 19l-7-7 7-7"
+            />
           </svg>
         </button>
-        
+
         <h3 class="month-name">{{ monthName }}</h3>
-        
+
         <button @click="nextMonth" class="nav-button">
-          <svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/>
+          <svg
+            class="nav-icon"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M9 5l7 7-7 7"
+            />
           </svg>
         </button>
       </div>
     </div>
-    
+
     <!-- Calendar Grid -->
     <div class="calendar-grid">
       <!-- Day Labels -->
       <div class="day-labels">
-        <div v-for="day in ['S', 'M', 'T', 'W', 'T', 'F', 'S']" :key="day" class="day-label">
+        <div
+          v-for="day in ['S', 'M', 'T', 'W', 'T', 'F', 'S']"
+          :key="day"
+          class="day-label"
+        >
           {{ day }}
         </div>
       </div>
-      
+
       <!-- Days -->
       <div class="days-grid">
         <button
@@ -161,24 +210,42 @@ const nextMonth = () => {
             'day-cell',
             { 'day-today': isToday(day) && !isSelected(day) },
             { 'day-selected': isSelected(day) },
-            { 'day-has-notes': day && !isToday(day) && !isSelected(day) && getNotesCountForDay(day) > 0 }
+            {
+              'day-has-notes':
+                day &&
+                !isToday(day) &&
+                !isSelected(day) &&
+                getNotesCountForDay(day) > 0,
+            },
           ]"
         >
           <span>{{ day || '' }}</span>
-          <span 
+          <span
             v-if="day && getNotesCountForDay(day) > 0"
-            :class="['note-indicator', { 'note-indicator-selected': isSelected(day) }]"
+            :class="[
+              'note-indicator',
+              { 'note-indicator-selected': isSelected(day) },
+            ]"
           ></span>
         </button>
       </div>
-      
+
       <!-- Selected Date Info -->
       <div v-if="selectedDate" class="selected-date-info">
         <div class="info-label">Filtering by date</div>
         <div class="info-date">
-          {{ selectedDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) }}
+          {{
+            selectedDate.toLocaleDateString('en-US', {
+              month: 'short',
+              day: 'numeric',
+              year: 'numeric',
+            })
+          }}
         </div>
-        <button @click="emit('update:selectedDate', null)" class="clear-filter-button">
+        <button
+          @click="emit('update:selectedDate', null)"
+          class="clear-filter-button"
+        >
           Clear filter
         </button>
       </div>
@@ -308,7 +375,9 @@ const nextMonth = () => {
   background-color: var(--color-text-primary);
   color: var(--color-background);
   font-weight: var(--font-weight-semibold);
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  box-shadow:
+    0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -2px rgba(0, 0, 0, 0.05);
 }
 
 .day-selected:hover {
diff --git a/desktop/src/components/EmptyState.vue b/desktop/src/components/EmptyState.vue
index 3b01980..ad6895a 100644
--- a/desktop/src/components/EmptyState.vue
+++ b/desktop/src/components/EmptyState.vue
@@ -4,7 +4,7 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  hasDateFilter: false
+  hasDateFilter: false,
 });
 </script>
 
@@ -12,24 +12,35 @@ const props = withDefaults(defineProps<Props>(), {
   <div class="empty-state">
     <!-- Icon -->
     <div class="empty-icon">
-      <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
-        <path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
+      <svg
+        class="icon"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        stroke-width="2"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+        />
       </svg>
     </div>
-    
+
     <!-- Title -->
     <div class="empty-title">
       {{ hasDateFilter ? 'No notes found' : 'No notes yet' }}
     </div>
-    
+
     <!-- Description -->
     <div class="empty-description">
-      {{ hasDateFilter 
-        ? 'No notes on this date. Try selecting a different date or create a new note.' 
-        : 'Start by creating your first note above.' 
+      {{
+        hasDateFilter
+          ? 'No notes on this date. Try selecting a different date or create a new note.'
+          : 'Start by creating your first note above.'
       }}
     </div>
-    
+
     <!-- Keyboard Shortcut Hint -->
     <div v-if="!hasDateFilter" class="keyboard-hint">
       <span class="hint-text">Quick tip:</span>
diff --git a/desktop/src/components/NoteCreator.vue b/desktop/src/components/NoteCreator.vue
index 8f75224..c7a034d 100644
--- a/desktop/src/components/NoteCreator.vue
+++ b/desktop/src/components/NoteCreator.vue
@@ -6,7 +6,7 @@ import Textarea from './Textarea.vue';
 const noteContent = ref('');
 
 const emit = defineEmits<{
-  'create': [content: string];
+  create: [content: string];
 }>();
 
 const charCount = computed(() => noteContent.value.length);
@@ -44,14 +44,10 @@ const handleKeydown = (e: KeyboardEvent) => {
     <div class="actions">
       <!-- Character Count & Hint -->
       <div class="actions-left">
-        <div class="char-count">
-          {{ charCount }} characters
-        </div>
-        <div class="keyboard-hint">
-          ⌘ + Enter to post
-        </div>
+        <div class="char-count">{{ charCount }} characters</div>
+        <div class="keyboard-hint">⌘ + Enter to post</div>
       </div>
-      
+
       <!-- Post Button -->
       <Button
         @click="createNote"
diff --git a/desktop/src/components/NoteItem.vue b/desktop/src/components/NoteItem.vue
index 176e7d8..dee450d 100644
--- a/desktop/src/components/NoteItem.vue
+++ b/desktop/src/components/NoteItem.vue
@@ -42,7 +42,7 @@ watch(
   () => props.note.content,
   () => {
     updateRenderedContent();
-  }
+  },
 );
 
 const startEditing = () => {
@@ -95,8 +95,8 @@ const formatDate = (date: Date) => {
 </script>
 
 <template>
-  <div 
-    @mouseenter="isHovered = true" 
+  <div
+    @mouseenter="isHovered = true"
     @mouseleave="isHovered = false"
     class="note-item"
   >
@@ -108,27 +108,45 @@ const formatDate = (date: Date) => {
 
       <!-- Action buttons (show on hover) -->
       <div class="action-buttons">
-        <button 
-          v-if="!isEditing" 
+        <button
+          v-if="!isEditing"
           @click.stop="startEditing"
           class="action-button"
           title="Edit note"
         >
-          <svg class="action-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
-            <path stroke-linecap="round" stroke-linejoin="round"
-              d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+          <svg
+            class="action-icon"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+            />
           </svg>
         </button>
 
-        <button 
-          v-if="!isEditing" 
+        <button
+          v-if="!isEditing"
           @click.stop="confirmDelete"
           class="action-button"
           title="Delete note"
         >
-          <svg class="action-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
-            <path stroke-linecap="round" stroke-linejoin="round"
-              d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+          <svg
+            class="action-icon"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+            />
           </svg>
         </button>
       </div>
@@ -145,11 +163,7 @@ const formatDate = (date: Date) => {
       />
 
       <div class="edit-actions">
-        <Button
-          @click="cancelEditing"
-          variant="ghost"
-          size="sm"
-        >
+        <Button @click="cancelEditing" variant="ghost" size="sm">
           Cancel
         </Button>
         <Button
@@ -169,17 +183,22 @@ const formatDate = (date: Date) => {
     <!-- Delete Confirmation Modal -->
     <Teleport to="body">
       <Transition name="modal">
-        <div 
-          v-if="showDeleteModal"
-          class="modal-overlay"
-          @click="cancelDelete"
-        >
+        <div v-if="showDeleteModal" class="modal-overlay" @click="cancelDelete">
           <div class="modal-content" @click.stop>
             <!-- Icon -->
             <div class="modal-icon">
-              <svg class="modal-icon-svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                  d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+              <svg
+                class="modal-icon-svg"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+                />
               </svg>
             </div>
 
@@ -188,7 +207,8 @@ const formatDate = (date: Date) => {
 
             <!-- Description -->
             <p class="modal-description">
-              This note will be permanently deleted. This action cannot be undone.
+              This note will be permanently deleted. This action cannot be
+              undone.
             </p>
 
             <!-- Actions -->
@@ -197,7 +217,12 @@ const formatDate = (date: Date) => {
                 Cancel
               </Button>
 
-              <Button @click="handleDelete" variant="primary" fullWidth size="sm">
+              <Button
+                @click="handleDelete"
+                variant="primary"
+                fullWidth
+                size="sm"
+              >
                 Delete
               </Button>
             </div>
@@ -346,7 +371,9 @@ const formatDate = (date: Date) => {
 
 .modal-enter-active .modal-content,
 .modal-leave-active .modal-content {
-  transition: transform 0.2s ease, opacity 0.2s ease;
+  transition:
+    transform 0.2s ease,
+    opacity 0.2s ease;
 }
 
 .modal-enter-from,
diff --git a/desktop/src/components/NotesHeader.vue b/desktop/src/components/NotesHeader.vue
index 0b38e28..b0504be 100644
--- a/desktop/src/components/NotesHeader.vue
+++ b/desktop/src/components/NotesHeader.vue
@@ -100,7 +100,8 @@ const handleSettingsClick = () => {
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+  box-shadow:
+    0 10px 15px -3px rgba(0, 0, 0, 0.1),
     0 4px 6px -2px rgba(0, 0, 0, 0.05);
 }
 
diff --git a/desktop/src/components/SearchBar.vue b/desktop/src/components/SearchBar.vue
index 90eb232..80a46a2 100644
--- a/desktop/src/components/SearchBar.vue
+++ b/desktop/src/components/SearchBar.vue
@@ -20,8 +20,18 @@ const clearSearch = () => {
 <template>
   <div class="search-container">
     <!-- Search Icon -->
-    <svg class="search-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-      <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+    <svg
+      class="search-icon"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      stroke-width="2"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+      />
     </svg>
 
     <!-- Search Input -->
@@ -33,9 +43,24 @@ const clearSearch = () => {
     />
 
     <!-- Clear Button -->
-    <button v-if="searchQuery" @click="clearSearch" class="clear-button" title="Clear search">
-      <svg class="clear-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
-        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+    <button
+      v-if="searchQuery"
+      @click="clearSearch"
+      class="clear-button"
+      title="Clear search"
+    >
+      <svg
+        class="clear-icon"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        stroke-width="2.5"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M6 18L18 6M6 6l12 12"
+        />
       </svg>
     </button>
   </div>
diff --git a/desktop/src/components/SettingsPanel.vue b/desktop/src/components/SettingsPanel.vue
index d57fd14..ef97788 100644
--- a/desktop/src/components/SettingsPanel.vue
+++ b/desktop/src/components/SettingsPanel.vue
@@ -29,13 +29,14 @@ const loadDatabaseInfo = async () => {
   try {
     const dbDir = await invoke<string>('get_database_directory_cmd');
     databaseDirectory.value = dbDir;
-    
+
     // Check if it's a custom location (not in default app data dir)
     // This is a simple heuristic - could be improved
-    isCustomLocation.value = dbDir.includes('Google Drive') || 
-                             dbDir.includes('OneDrive') || 
-                             dbDir.includes('Dropbox') ||
-                             !dbDir.includes('AppData'); // Windows
+    isCustomLocation.value =
+      dbDir.includes('Google Drive') ||
+      dbDir.includes('OneDrive') ||
+      dbDir.includes('Dropbox') ||
+      !dbDir.includes('AppData'); // Windows
   } catch (error) {
     console.error('Failed to get database directory:', error);
     databaseDirectory.value = 'Unknown';
@@ -49,11 +50,13 @@ const changeDatabaseLocation = async () => {
       multiple: false,
       title: 'Select Database Location',
     });
-    
+
     if (selected) {
       // Check if a database already exists at this location
-      const dbExists = await invoke<boolean>('check_database_exists_cmd', { directoryPath: selected });
-      
+      const dbExists = await invoke<boolean>('check_database_exists_cmd', {
+        directoryPath: selected,
+      });
+
       if (dbExists) {
         // Show conflict modal
         pendingDirectory.value = selected;
@@ -69,15 +72,19 @@ const changeDatabaseLocation = async () => {
   }
 };
 
-const applyDatabaseLocationChange = async (directory: string, overwrite: boolean, backup: boolean = false) => {
+const applyDatabaseLocationChange = async (
+  directory: string,
+  overwrite: boolean,
+  backup: boolean = false,
+) => {
   try {
-    const newPath = await invoke<string>('set_database_directory_cmd', { 
+    const newPath = await invoke<string>('set_database_directory_cmd', {
       directoryPath: directory,
       overwrite: overwrite,
-      backup: backup
+      backup: backup,
     });
     console.log('Database location changed to:', newPath);
-    
+
     // Reload the app to use new database location
     window.location.reload();
   } catch (error) {
@@ -116,14 +123,18 @@ const handleCancelConflict = () => {
 };
 
 const resetDatabaseLocation = async () => {
-  if (!confirm('Reset database location to default? The current database will be copied to the default location.')) {
+  if (
+    !confirm(
+      'Reset database location to default? The current database will be copied to the default location.',
+    )
+  ) {
     return;
   }
-  
+
   try {
     await invoke<string>('reset_database_directory_cmd');
     console.log('Database location reset to default');
-    
+
     // Reload the app to use default database location
     window.location.reload();
   } catch (error) {
@@ -143,7 +154,9 @@ const openDatabaseLocation = async () => {
 const createDatabaseBackup = async () => {
   try {
     const dbPath = await invoke<string>('get_database_path_cmd');
-    const backupPath = await invoke<string>('create_database_backup_cmd', { dbPath });
+    const backupPath = await invoke<string>('create_database_backup_cmd', {
+      dbPath,
+    });
     alert(`Backup created successfully!\n\nBackup location:\n${backupPath}`);
   } catch (error) {
     console.error('Failed to create database backup:', error);
@@ -157,17 +170,19 @@ const importDatabase = async () => {
       directory: false,
       multiple: false,
       title: 'Select Database File to Import',
-      filters: [{
-        name: 'Database',
-        extensions: ['db']
-      }]
+      filters: [
+        {
+          name: 'Database',
+          extensions: ['db'],
+        },
+      ],
     });
-    
+
     if (selected) {
       // Check if current database exists
       const currentDbPath = await invoke<string>('get_database_path_cmd');
       const dbExists = currentDbPath && currentDbPath.length > 0;
-      
+
       if (dbExists) {
         // Show import modal to ask about backup
         pendingImportPath.value = selected;
@@ -183,14 +198,17 @@ const importDatabase = async () => {
   }
 };
 
-const applyDatabaseImport = async (sourcePath: string, createBackup: boolean) => {
+const applyDatabaseImport = async (
+  sourcePath: string,
+  createBackup: boolean,
+) => {
   try {
-    await invoke<string>('import_database_cmd', { 
+    await invoke<string>('import_database_cmd', {
       sourcePath: sourcePath,
-      createBackup: createBackup
+      createBackup: createBackup,
     });
     console.log('Database imported successfully');
-    
+
     // Reload the app to use imported database
     window.location.reload();
   } catch (error) {
@@ -237,27 +255,34 @@ defineExpose({ openSettings });
 <template>
   <!-- Settings Modal Overlay -->
   <Transition name="modal">
-    <div 
-      v-if="isOpen" 
-      class="modal-overlay"
-      @click="closeSettings"
-    >
+    <div v-if="isOpen" class="modal-overlay" @click="closeSettings">
       <!-- Backdrop -->
       <div class="backdrop"></div>
-      
+
       <!-- Settings Panel -->
-      <div 
-        class="panel"
-        @click.stop
-      >
+      <div class="panel" @click.stop>
         <!-- Header -->
         <div class="panel-header">
           <div class="header-content">
             <div class="header-info">
               <div class="icon-container">
-                <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
+                <svg
+                  class="icon"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
+                  />
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                  />
                 </svg>
               </div>
               <div>
@@ -266,41 +291,77 @@ defineExpose({ openSettings });
               </div>
             </div>
             <button @click="closeSettings" class="close-button">
-              <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
+              <svg
+                class="icon"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                stroke-width="2"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M6 18L18 6M6 6l12 12"
+                />
               </svg>
             </button>
           </div>
         </div>
-        
+
         <!-- Settings Content -->
         <div class="panel-content">
           <!-- Database Section -->
           <div class="section">
             <h3 class="section-title">Database</h3>
-            
+
             <div class="section-items">
               <!-- Database Location Info -->
               <div class="info-card">
                 <div class="info-card-content">
                   <div class="info-card-main">
                     <div class="info-icon">
-                      <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/>
+                      <svg
+                        class="icon"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                        stroke-width="2"
+                      >
+                        <path
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
+                        />
                       </svg>
                     </div>
                     <div class="info-text">
                       <div class="info-header">
                         <p class="info-label">Database Location</p>
-                        <span v-if="isCustomLocation" class="badge">Custom</span>
+                        <span v-if="isCustomLocation" class="badge"
+                          >Custom</span
+                        >
                       </div>
                       <p class="info-path">{{ databaseDirectory }}</p>
                     </div>
                   </div>
                   <!-- Create Backup Button -->
-                  <button @click="createDatabaseBackup" class="backup-button" title="Create backup">
-                    <svg class="icon-sm" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
-                      <path stroke-linecap="round" stroke-linejoin="round" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"/>
+                  <button
+                    @click="createDatabaseBackup"
+                    class="backup-button"
+                    title="Create backup"
+                  >
+                    <svg
+                      class="icon-sm"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                      stroke-width="2"
+                    >
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"
+                      />
                     </svg>
                     <span class="backup-text">Backup</span>
                   </button>
@@ -311,71 +372,163 @@ defineExpose({ openSettings });
               <button @click="changeDatabaseLocation" class="action-button">
                 <div class="action-content">
                   <div class="action-icon">
-                    <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
-                      <path stroke-linecap="round" stroke-linejoin="round" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"/>
+                    <svg
+                      class="icon"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                      stroke-width="2"
+                    >
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"
+                      />
                     </svg>
                   </div>
                   <div class="action-text">
                     <p class="action-label">Change Database Location</p>
-                    <p class="action-description">Move database to cloud storage (OneDrive, Google Drive)</p>
+                    <p class="action-description">
+                      Move database to cloud storage (OneDrive, Google Drive)
+                    </p>
                   </div>
                 </div>
-                <svg class="chevron" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/>
+                <svg
+                  class="chevron"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M9 5l7 7-7 7"
+                  />
                 </svg>
               </button>
-              
+
               <!-- Reset to Default Location -->
-              <button v-if="isCustomLocation" @click="resetDatabaseLocation" class="action-button">
+              <button
+                v-if="isCustomLocation"
+                @click="resetDatabaseLocation"
+                class="action-button"
+              >
                 <div class="action-content">
                   <div class="action-icon">
-                    <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
-                      <path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
+                    <svg
+                      class="icon"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                      stroke-width="2"
+                    >
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+                      />
                     </svg>
                   </div>
                   <div class="action-text">
                     <p class="action-label">Reset to Default Location</p>
-                    <p class="action-description">Move database back to app data directory</p>
+                    <p class="action-description">
+                      Move database back to app data directory
+                    </p>
                   </div>
                 </div>
-                <svg class="chevron" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/>
+                <svg
+                  class="chevron"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M9 5l7 7-7 7"
+                  />
                 </svg>
               </button>
-              
+
               <!-- Open Database Location -->
               <button @click="openDatabaseLocation" class="action-button">
                 <div class="action-content">
                   <div class="action-icon">
-                    <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
-                      <path stroke-linecap="round" stroke-linejoin="round" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/>
+                    <svg
+                      class="icon"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                      stroke-width="2"
+                    >
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
+                      />
                     </svg>
                   </div>
                   <div class="action-text">
                     <p class="action-label">Open Database Location</p>
-                    <p class="action-description">View the database file in your file explorer</p>
+                    <p class="action-description">
+                      View the database file in your file explorer
+                    </p>
                   </div>
                 </div>
-                <svg class="chevron" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
+                <svg
+                  class="chevron"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+                  />
                 </svg>
               </button>
-              
+
               <!-- Import Database -->
               <button @click="importDatabase" class="action-button">
                 <div class="action-content">
                   <div class="action-icon">
-                    <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
-                      <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/>
+                    <svg
+                      class="icon"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                      stroke-width="2"
+                    >
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"
+                      />
                     </svg>
                   </div>
                   <div class="action-text">
                     <p class="action-label">Import Database</p>
-                    <p class="action-description">Import an existing database file from anywhere</p>
+                    <p class="action-description">
+                      Import an existing database file from anywhere
+                    </p>
                   </div>
                 </div>
-                <svg class="chevron" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/>
+                <svg
+                  class="chevron"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M9 5l7 7-7 7"
+                  />
                 </svg>
               </button>
             </div>
@@ -384,12 +537,22 @@ defineExpose({ openSettings });
           <!-- About Section -->
           <div class="section">
             <h3 class="section-title">About</h3>
-            
+
             <div class="about-card">
               <div class="about-content">
                 <div class="about-icon">
-                  <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
+                  <svg
+                    class="icon"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                    stroke-width="2"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+                    />
                   </svg>
                 </div>
                 <div>
@@ -406,18 +569,32 @@ defineExpose({ openSettings });
 
   <!-- Database Conflict Modal -->
   <Transition name="modal">
-    <div v-if="showConflictModal" class="modal-overlay conflict-modal" @click="handleCancelConflict">
+    <div
+      v-if="showConflictModal"
+      class="modal-overlay conflict-modal"
+      @click="handleCancelConflict"
+    >
       <!-- Backdrop -->
       <div class="backdrop"></div>
-      
+
       <!-- Conflict Dialog -->
       <div class="conflict-dialog" @click.stop>
         <!-- Header -->
         <div class="dialog-header">
           <div class="dialog-header-content">
             <div class="dialog-icon warning">
-              <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
+              <svg
+                class="icon"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                stroke-width="2"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+                />
               </svg>
             </div>
             <div>
@@ -426,61 +603,98 @@ defineExpose({ openSettings });
             </div>
           </div>
         </div>
-        
+
         <!-- Content -->
         <div class="dialog-content">
           <p class="dialog-description">
-            A database file already exists in the selected location. What would you like to do?
+            A database file already exists in the selected location. What would
+            you like to do?
           </p>
-          
+
           <div class="dialog-options">
             <!-- Use Existing Database -->
             <button @click="handleUseExisting" class="option-button">
               <div class="option-content">
                 <div class="option-icon blue">
-                  <svg class="icon-sm" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                  <svg
+                    class="icon-sm"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                    stroke-width="2"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+                    />
                   </svg>
                 </div>
                 <div class="option-text">
                   <p class="option-label">Use Existing Database</p>
-                  <p class="option-description">Keep the database that's already there</p>
+                  <p class="option-description">
+                    Keep the database that's already there
+                  </p>
                 </div>
               </div>
             </button>
-            
+
             <!-- Backup and Overwrite -->
             <button @click="handleBackupAndOverwrite" class="option-button">
               <div class="option-content">
                 <div class="option-icon green">
-                  <svg class="icon-sm" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"/>
+                  <svg
+                    class="icon-sm"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                    stroke-width="2"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"
+                    />
                   </svg>
                 </div>
                 <div class="option-text">
                   <p class="option-label">Backup & Replace</p>
-                  <p class="option-description">Create backup then overwrite with current notes</p>
+                  <p class="option-description">
+                    Create backup then overwrite with current notes
+                  </p>
                 </div>
               </div>
             </button>
-            
+
             <!-- Overwrite Existing -->
             <button @click="handleOverwriteExisting" class="option-button">
               <div class="option-content">
                 <div class="option-icon orange">
-                  <svg class="icon-sm" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
+                  <svg
+                    class="icon-sm"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                    stroke-width="2"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+                    />
                   </svg>
                 </div>
                 <div class="option-text">
                   <p class="option-label">Replace with Current Database</p>
-                  <p class="option-description">Overwrite with your current notes (cannot be undone)</p>
+                  <p class="option-description">
+                    Overwrite with your current notes (cannot be undone)
+                  </p>
                 </div>
               </div>
             </button>
           </div>
         </div>
-        
+
         <!-- Footer -->
         <div class="dialog-footer">
           <button @click="handleCancelConflict" class="cancel-button">
@@ -493,66 +707,107 @@ defineExpose({ openSettings });
 
   <!-- Database Import Modal -->
   <Transition name="modal">
-    <div v-if="showImportModal" class="modal-overlay import-modal" @click="handleCancelImport">
+    <div
+      v-if="showImportModal"
+      class="modal-overlay import-modal"
+      @click="handleCancelImport"
+    >
       <!-- Backdrop -->
       <div class="backdrop"></div>
-      
+
       <!-- Import Dialog -->
       <div class="import-dialog" @click.stop>
         <!-- Header -->
         <div class="dialog-header">
           <div class="dialog-header-content">
             <div class="dialog-icon blue">
-              <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/>
+              <svg
+                class="icon"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                stroke-width="2"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"
+                />
               </svg>
             </div>
             <div>
               <h3 class="dialog-title">Import Database</h3>
-              <p class="dialog-subtitle">This will replace your current database</p>
+              <p class="dialog-subtitle">
+                This will replace your current database
+              </p>
             </div>
           </div>
         </div>
-        
+
         <!-- Content -->
         <div class="dialog-content">
           <p class="dialog-description">
-            You have an existing database. Would you like to create a backup before importing?
+            You have an existing database. Would you like to create a backup
+            before importing?
           </p>
-          
+
           <div class="dialog-options">
             <!-- Import with Backup -->
             <button @click="handleImportWithBackup" class="option-button">
               <div class="option-content">
                 <div class="option-icon green">
-                  <svg class="icon-sm" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"/>
+                  <svg
+                    class="icon-sm"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                    stroke-width="2"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"
+                    />
                   </svg>
                 </div>
                 <div class="option-text">
                   <p class="option-label">Create Backup & Import</p>
-                  <p class="option-description">Backup current database before importing (recommended)</p>
+                  <p class="option-description">
+                    Backup current database before importing (recommended)
+                  </p>
                 </div>
               </div>
             </button>
-            
+
             <!-- Import without Backup -->
             <button @click="handleImportWithoutBackup" class="option-button">
               <div class="option-content">
                 <div class="option-icon orange">
-                  <svg class="icon-sm" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/>
+                  <svg
+                    class="icon-sm"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                    stroke-width="2"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"
+                    />
                   </svg>
                 </div>
                 <div class="option-text">
                   <p class="option-label">Import Without Backup</p>
-                  <p class="option-description">Replace current database (cannot be undone)</p>
+                  <p class="option-description">
+                    Replace current database (cannot be undone)
+                  </p>
                 </div>
               </div>
             </button>
           </div>
         </div>
-        
+
         <!-- Footer -->
         <div class="dialog-footer">
           <button @click="handleCancelImport" class="cancel-button">
@@ -655,7 +910,9 @@ defineExpose({ openSettings });
   align-items: center;
   justify-content: center;
   color: var(--color-text-secondary);
-  transition: background-color 0.3s, color 0.3s;
+  transition:
+    background-color 0.3s,
+    color 0.3s;
 }
 
 .close-button:hover {
@@ -1086,7 +1343,9 @@ defineExpose({ openSettings });
 .modal-leave-active .conflict-dialog,
 .modal-enter-active .import-dialog,
 .modal-leave-active .import-dialog {
-  transition: transform 0.3s ease, opacity 0.3s ease;
+  transition:
+    transform 0.3s ease,
+    opacity 0.3s ease;
 }
 
 .modal-enter-from .panel,
diff --git a/desktop/src/components/Tag.vue b/desktop/src/components/Tag.vue
index a48768e..1f887b6 100644
--- a/desktop/src/components/Tag.vue
+++ b/desktop/src/components/Tag.vue
@@ -44,7 +44,9 @@ const emit = defineEmits<{
 .tag-selected {
   background-color: var(--color-text-primary);
   color: var(--color-background);
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
   border-color: var(--color-text-primary);
 }
 
diff --git a/desktop/src/components/TagsPanel.vue b/desktop/src/components/TagsPanel.vue
index 68bb848..01024bc 100644
--- a/desktop/src/components/TagsPanel.vue
+++ b/desktop/src/components/TagsPanel.vue
@@ -23,7 +23,7 @@ const emit = defineEmits<{
 const extractTags = (content: string): string[] => {
   const tagRegex = /#(\w+)/g;
   const matches = content.matchAll(tagRegex);
-  return Array.from(matches, m => m[1].toLowerCase());
+  return Array.from(matches, (m) => m[1].toLowerCase());
 };
 
 // Get notes filtered by currently selected tags
@@ -31,37 +31,39 @@ const filteredNotes = computed(() => {
   if (props.selectedTags.length === 0) {
     return props.notes;
   }
-  
-  return props.notes.filter(note => {
+
+  return props.notes.filter((note) => {
     const tags = extractTags(note.content);
     // Note must have ALL selected tags
-    return props.selectedTags.every(selectedTag => tags.includes(selectedTag));
+    return props.selectedTags.every((selectedTag) =>
+      tags.includes(selectedTag),
+    );
   });
 });
 
 // Get all unique tags from filtered notes (contextual tags based on selection)
 const allTags = computed(() => {
   const tagSet = new Set<string>();
-  filteredNotes.value.forEach(note => {
+  filteredNotes.value.forEach((note) => {
     const tags = extractTags(note.content);
-    tags.forEach(tag => {
+    tags.forEach((tag) => {
       // Don't include already selected tags in the available list
       if (!props.selectedTags.includes(tag)) {
         tagSet.add(tag);
       }
     });
   });
-  
+
   // Add selected tags at the beginning
   const selectedTagsArray = [...props.selectedTags];
   const availableTags = Array.from(tagSet).sort();
-  
+
   return [...selectedTagsArray, ...availableTags];
 });
 
 // Get note count for each tag (considering current filter)
 const getNotesCountForTag = (tag: string): number => {
-  return filteredNotes.value.filter(note => {
+  return filteredNotes.value.filter((note) => {
     const tags = extractTags(note.content);
     return tags.includes(tag);
   }).length;
@@ -70,7 +72,7 @@ const getNotesCountForTag = (tag: string): number => {
 const toggleTag = (tag: string) => {
   const currentTags = [...props.selectedTags];
   const index = currentTags.indexOf(tag);
-  
+
   if (index > -1) {
     // Remove tag if already selected
     currentTags.splice(index, 1);
@@ -78,7 +80,7 @@ const toggleTag = (tag: string) => {
     // Add tag if not selected
     currentTags.push(tag);
   }
-  
+
   emit('update:selectedTags', currentTags);
 };
 
@@ -95,21 +97,35 @@ const isTagSelected = (tag: string) => {
   <div class="tags-panel">
     <div class="tags-header">
       <div class="header-title">
-        <svg class="title-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/>
+        <svg
+          class="title-icon"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"
+          />
         </svg>
         <h3 class="header-text">Tags</h3>
         <span v-if="selectedTags.length > 0" class="header-count">
           ({{ selectedTags.length }} selected)
         </span>
       </div>
-      
+
       <!-- Clear all button -->
-      <button v-if="selectedTags.length > 0" @click="clearAllTags" class="clear-button">
+      <button
+        v-if="selectedTags.length > 0"
+        @click="clearAllTags"
+        class="clear-button"
+      >
         Clear all
       </button>
     </div>
-    
+
     <div v-if="allTags.length > 0" class="tags-list">
       <Tag
         v-for="tag in allTags"
@@ -120,9 +136,10 @@ const isTagSelected = (tag: string) => {
         @click="toggleTag(tag)"
       />
     </div>
-    
+
     <div v-else class="empty-tags">
-      No tags yet. Add hashtags like <span class="example-tag">#ideas</span> to organize your notes.
+      No tags yet. Add hashtags like <span class="example-tag">#ideas</span> to
+      organize your notes.
     </div>
   </div>
 </template>
diff --git a/desktop/src/components/Textarea.vue b/desktop/src/components/Textarea.vue
index d934b25..054dab6 100644
--- a/desktop/src/components/Textarea.vue
+++ b/desktop/src/components/Textarea.vue
@@ -18,7 +18,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<{
   'update:modelValue': [value: string];
-  'keydown': [event: KeyboardEvent];
+  keydown: [event: KeyboardEvent];
 }>();
 
 const handleInput = (e: Event) => {
diff --git a/desktop/src/components/ThemeToggle.vue b/desktop/src/components/ThemeToggle.vue
index 85a06e2..30f8f6a 100644
--- a/desktop/src/components/ThemeToggle.vue
+++ b/desktop/src/components/ThemeToggle.vue
@@ -11,7 +11,9 @@ const applyTheme = (themeValue: Theme) => {
   if (themeValue === 'system') {
     // Remove both classes and let media query handle it
     document.body.classList.remove('dark', 'light');
-    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const prefersDark = window.matchMedia(
+      '(prefers-color-scheme: dark)',
+    ).matches;
     if (prefersDark) {
       document.body.classList.add('dark');
     }
@@ -74,11 +76,7 @@ const getThemeLabel = () => {
 </script>
 
 <template>
-  <button
-    @click="cycleTheme"
-    class="theme-toggle"
-    :title="getThemeLabel()"
-  >
+  <button @click="cycleTheme" class="theme-toggle" :title="getThemeLabel()">
     <!-- Sun Icon (Light Mode) -->
     <svg
       v-if="theme === 'light'"
@@ -90,7 +88,7 @@ const getThemeLabel = () => {
         d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z"
       />
     </svg>
-    
+
     <!-- Moon Icon (Dark Mode) -->
     <svg
       v-else-if="theme === 'dark'"
@@ -134,7 +132,9 @@ const getThemeLabel = () => {
 
 .theme-toggle:hover {
   transform: scale(1.05);
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  box-shadow:
+    0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -2px rgba(0, 0, 0, 0.05);
 }
 
 .theme-icon {
diff --git a/desktop/src/main.js b/desktop/src/main.js
index f0281d6..0317c34 100644
--- a/desktop/src/main.js
+++ b/desktop/src/main.js
@@ -1,34 +1,38 @@
-import { createApp } from "vue";
-import App from "./App.vue";
+import { createApp } from 'vue';
+import App from './App.vue';
 
 // Global function to copy code from code blocks
-window.copyCode = function(button) {
+window.copyCode = function (button) {
   const wrapper = button.closest('.code-block-wrapper');
-  const codeElement = wrapper.querySelector('pre code') || wrapper.querySelector('code');
-  
+  const codeElement =
+    wrapper.querySelector('pre code') || wrapper.querySelector('code');
+
   if (codeElement) {
     const code = codeElement.textContent || codeElement.innerText;
-    
+
     // Copy to clipboard
-    navigator.clipboard.writeText(code).then(() => {
-      // Show check icon
-      const copyIcon = button.querySelector('.copy-icon');
-      const checkIcon = button.querySelector('.check-icon');
-      
-      copyIcon.style.display = 'none';
-      checkIcon.style.display = 'block';
-      button.classList.add('copied');
-      
-      // Reset after 2 seconds
-      setTimeout(() => {
-        copyIcon.style.display = 'block';
-        checkIcon.style.display = 'none';
-        button.classList.remove('copied');
-      }, 2000);
-    }).catch(err => {
-      console.error('Failed to copy code:', err);
-    });
+    navigator.clipboard
+      .writeText(code)
+      .then(() => {
+        // Show check icon
+        const copyIcon = button.querySelector('.copy-icon');
+        const checkIcon = button.querySelector('.check-icon');
+
+        copyIcon.style.display = 'none';
+        checkIcon.style.display = 'block';
+        button.classList.add('copied');
+
+        // Reset after 2 seconds
+        setTimeout(() => {
+          copyIcon.style.display = 'block';
+          checkIcon.style.display = 'none';
+          button.classList.remove('copied');
+        }, 2000);
+      })
+      .catch((err) => {
+        console.error('Failed to copy code:', err);
+      });
   }
 };
 
-createApp(App).mount("#app");
+createApp(App).mount('#app');
diff --git a/desktop/src/styles/markdown.css b/desktop/src/styles/markdown.css
index 0e29894..ffa999f 100644
--- a/desktop/src/styles/markdown.css
+++ b/desktop/src/styles/markdown.css
@@ -4,7 +4,12 @@
 }
 
 /* Headings */
-.markdown h1, .markdown h2, .markdown h3, .markdown h4, .markdown h5, .markdown h6 {
+.markdown h1,
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
   color: var(--color-text-primary);
   font-weight: var(--font-weight-semibold);
   line-height: var(--line-height-tight);
@@ -12,24 +17,24 @@
   margin-bottom: 0.5em;
 }
 
-.markdown h1:first-child, 
-.markdown h2:first-child, 
+.markdown h1:first-child,
+.markdown h2:first-child,
 .markdown h3:first-child {
   margin-top: 0;
 }
 
-.markdown h1 { 
-  font-size: 1.75em; 
+.markdown h1 {
+  font-size: 1.75em;
   font-weight: var(--font-weight-bold);
   margin-bottom: 0.75em;
 }
 
-.markdown h2 { 
+.markdown h2 {
   font-size: 1.375em;
   font-weight: var(--font-weight-semibold);
 }
 
-.markdown h3 { 
+.markdown h3 {
   font-size: 1.125em;
   font-weight: var(--font-weight-semibold);
 }
@@ -111,7 +116,8 @@
 }
 
 /* Lists */
-.markdown ul, .markdown ol {
+.markdown ul,
+.markdown ol {
   margin: 0.75em 0;
   padding-left: 1.5em;
   list-style-position: inside;
@@ -137,13 +143,15 @@
 }
 
 /* Nested lists */
-.markdown ul ul, .markdown ol ul {
+.markdown ul ul,
+.markdown ol ul {
   list-style-type: circle;
   margin-top: 0.25em;
   margin-bottom: 0.25em;
 }
 
-.markdown ul ul ul, .markdown ol ul ul {
+.markdown ul ul ul,
+.markdown ol ul ul {
   list-style-type: square;
 }
 
@@ -190,7 +198,8 @@
   overflow: hidden;
 }
 
-.markdown th, .markdown td {
+.markdown th,
+.markdown td {
   border: 1px solid var(--color-border);
   padding: 0.5em 0.75em;
   text-align: left;
@@ -209,7 +218,7 @@
 }
 
 /* Checkboxes */
-.markdown input[type="checkbox"] {
+.markdown input[type='checkbox'] {
   margin-right: 0.5em;
   accent-color: var(--color-text-primary);
 }
@@ -376,7 +385,7 @@ body.dark .shiki-dark-theme {
   body:not(.light) .shiki-light-theme {
     display: none;
   }
-  
+
   body:not(.light) .shiki-dark-theme {
     display: block;
   }
diff --git a/desktop/src/styles/reset.css b/desktop/src/styles/reset.css
index 753e79e..27cad05 100644
--- a/desktop/src/styles/reset.css
+++ b/desktop/src/styles/reset.css
@@ -40,8 +40,14 @@ html,
     'Segoe UI Symbol',
     'Noto Color Emoji'
   ); /* 4 */
-  font-feature-settings: --theme(--default-font-feature-settings, normal); /* 5 */
-  font-variation-settings: --theme(--default-font-variation-settings, normal); /* 6 */
+  font-feature-settings: --theme(
+    --default-font-feature-settings,
+    normal
+  ); /* 5 */
+  font-variation-settings: --theme(
+    --default-font-variation-settings,
+    normal
+  ); /* 6 */
   -webkit-tap-highlight-color: transparent; /* 7 */
 }
 
@@ -121,8 +127,14 @@ pre {
     'Courier New',
     monospace
   ); /* 1 */
-  font-feature-settings: --theme(--default-mono-font-feature-settings, normal); /* 2 */
-  font-variation-settings: --theme(--default-mono-font-variation-settings, normal); /* 3 */
+  font-feature-settings: --theme(
+    --default-mono-font-feature-settings,
+    normal
+  ); /* 2 */
+  font-variation-settings: --theme(
+    --default-mono-font-variation-settings,
+    normal
+  ); /* 3 */
   font-size: 1em; /* 4 */
 }
 
diff --git a/desktop/src/styles/theme.css b/desktop/src/styles/theme.css
index d780d86..91d4cd9 100644
--- a/desktop/src/styles/theme.css
+++ b/desktop/src/styles/theme.css
@@ -25,10 +25,11 @@
   /* Darkest - dark backgrounds */
 
   /* Typography Scale */
-  --font-family-base: 'Space Mono', 'SF Mono', 'Roboto Mono', 'Consolas',
-    'Liberation Mono', monospace;
-  --font-family-mono: ui-monospace, 'SF Mono', Consolas, 'Liberation Mono',
-    Menlo, monospace;
+  --font-family-base:
+    'Space Mono', 'SF Mono', 'Roboto Mono', 'Consolas', 'Liberation Mono',
+    monospace;
+  --font-family-mono:
+    ui-monospace, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
 
   /* Font weight */
   --font-weight-regular: 400;
diff --git a/desktop/src/utils/markdown.ts b/desktop/src/utils/markdown.ts
index 6a4cbc0..7c98f03 100644
--- a/desktop/src/utils/markdown.ts
+++ b/desktop/src/utils/markdown.ts
@@ -33,15 +33,15 @@ async function initHighlighter() {
 const renderer = new marked.Renderer();
 
 // Custom link renderer to open links in new tab
-renderer.link = function(token: any) {
+renderer.link = function (token: any) {
   const { href, title, text } = token;
   const titleAttr = title ? ` title="${title}"` : '';
   return `<a href="${href}"${titleAttr} target="_blank" rel="noopener noreferrer">${text}</a>`;
 };
 
-renderer.code = function(token: any) {
+renderer.code = function (token: any) {
   const { text: code, lang: language } = token;
-  
+
   if (!highlighter || !language) {
     // Fallback to default - create basic code block
     const escapedCode = code
@@ -50,7 +50,7 @@ renderer.code = function(token: any) {
       .replace(/>/g, '&gt;')
       .replace(/"/g, '&quot;')
       .replace(/'/g, '&#039;');
-    
+
     return `
       <div class="code-block-wrapper">
         <div class="code-block-header">
@@ -75,12 +75,12 @@ renderer.code = function(token: any) {
       lang: language,
       theme: 'github-light',
     });
-    
+
     const darkHtml = highlighter.codeToHtml(code, {
       lang: language,
       theme: 'github-dark',
     });
-    
+
     // Wrap both versions with appropriate classes for theme switching
     return `
       <div class="code-block-wrapper">
diff --git a/package.json b/package.json
index 7cf519d..897323b 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,9 @@
     "dev": "cross-env TAURI_ENV_USE_TEST_DB=true bun run --filter desktop tauri dev",
     "prod": "bun run --filter desktop tauri dev",
     "lazy-release": "lazy-release",
-    "lint": "oxlint desktop/src/**/*.{ts,js,vue}"
+    "lint": "oxlint desktop/src/**/*.{ts,js,vue}",
+    "format": "prettier --write desktop/src/**",
+    "format:check": "prettier --check desktop/src/**"
   },
   "workspaces": [
     "desktop"
@@ -24,6 +26,7 @@
     "concurrently": "^9.2.1",
     "cross-env": "^10.1.0",
     "oxlint": "^1.28.0",
+    "prettier": "^3.6.2",
     "wait-on": "^8.0.4"
   }
 }