diff --git a/components/PinnedItem.vue b/components/PinnedItem.vue
index 73c6bb7b..7e32dee1 100644
--- a/components/PinnedItem.vue
+++ b/components/PinnedItem.vue
@@ -19,54 +19,177 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <https://www.gnu.org/licenses/>. -->
 
 <template>
-  <Tooltip v-if="isActivePin">
-    <template #trigger>
-      <nuxt-link :to="'/kanban/' + props.board.id">
-        <div class="bg-elevation-3 transition-button rounded-md p-2">
-          <PhArticle class="size-7" />
+  <ContextMenuRoot>
+    <ContextMenuTrigger>
+      <Tooltip v-if="isActivePin">
+        <template #trigger>
+          <nuxt-link :to="'/kanban/' + props.board.id">
+            <div class="bg-elevation-3 transition-button rounded-md p-2">
+              <component :is="selectedIcon" class="size-7" />
+            </div>
+          </nuxt-link>
+        </template>
+
+        <template #content>
+          {{ props.board.title }}
+        </template>
+      </Tooltip>
+
+      <Tooltip v-else>
+        <template #trigger>
+          <nuxt-link :to="'/kanban/' + props.board.id">
+            <div class="bg-elevation-2-hover transition-button rounded-md p-2">
+              <component :is="selectedIcon" class="size-7" />
+            </div>
+          </nuxt-link>
+        </template>
+
+        <template #content>
+          {{ props.board.title }}
+        </template>
+      </Tooltip>
+    </ContextMenuTrigger>
+
+    <ContextMenuPortal to=".default-layout">
+      <ContextMenuContent
+        class="text-normal bg-primary-darker border-elevation-1 icon-menu z-[999] min-w-[240px] rounded-md border p-1 shadow-lg"
+      >
+        <div class="flex flex-col gap-1 px-2 py-1.5">
+          <span class="text-sm font-medium">Change Icon</span>
+          <input
+            v-model="searchQuery"
+            type="text"
+            placeholder="Search icons..."
+            class="bg-elevation-2 focus:ring-accent mt-1 w-full rounded px-2 py-1 text-sm focus:outline-none focus:ring-1"
+          />
         </div>
-      </nuxt-link>
-    </template>
-
-    <template #content>
-      {{ props.board.title }}
-    </template>
-  </Tooltip>
-
-  <Tooltip v-else>
-    <template #trigger>
-      <nuxt-link :to="'/kanban/' + props.board.id">
-        <div class="bg-elevation-2-hover transition-button rounded-md p-2">
-          <PhArticle class="size-7" />
+        <ContextMenuSeparator class="bg-elevation-1 my-1 h-px" />
+
+        <div v-if="searchQuery" class="max-h-[300px] overflow-y-auto">
+          <div class="grid grid-cols-4 gap-1 p-1">
+            <ContextMenuItem
+              v-for="icon in searchResults"
+              :key="icon.name"
+              class="bg-elevation-2-hover flex cursor-pointer items-center justify-center rounded-md p-2"
+              :class="{ 'bg-elevation-3': selectedIconName === icon.name }"
+              @click="selectIcon(icon.component, icon.name)"
+            >
+              <Tooltip>
+                <template #trigger>
+                  <component :is="icon.component" class="size-5" />
+                </template>
+                <template #content>{{ icon.name }}</template>
+              </Tooltip>
+            </ContextMenuItem>
+          </div>
         </div>
-      </nuxt-link>
-    </template>
 
-    <template #content>
-      {{ props.board.title }}
-    </template>
-  </Tooltip>
+        <div v-else class="max-h-[400px] overflow-y-auto">
+          <div v-for="category in categories" :key="category">
+            <ContextMenuLabel class="px-2 py-1.5 text-sm">{{
+              category
+            }}</ContextMenuLabel>
+            <div class="grid grid-cols-4 gap-1 p-1">
+              <ContextMenuItem
+                v-for="icon in getIconsByCategory(category)"
+                :key="icon.name"
+                class="bg-elevation-2-hover flex cursor-pointer items-center justify-center rounded-md p-2"
+                :class="{ 'bg-elevation-3': selectedIconName === icon.name }"
+                @click="selectIcon(icon.component, icon.name)"
+              >
+                <Tooltip>
+                  <template #trigger>
+                    <component :is="icon.component" class="size-5" />
+                  </template>
+                  <template #content>{{ icon.name }}</template>
+                </Tooltip>
+              </ContextMenuItem>
+            </div>
+            <ContextMenuSeparator
+              v-if="category !== categories[categories.length - 1]"
+              class="bg-elevation-1 my-1 h-px"
+            />
+          </div>
+        </div>
+      </ContextMenuContent>
+    </ContextMenuPortal>
+  </ContextMenuRoot>
 </template>
 
 <script setup lang="ts">
 import emitter from "@/utils/emitter";
-import { PhArticle } from "@phosphor-icons/vue";
+import { useTauriStore } from "@/stores/tauriStore";
 import type { Board } from "@/types/kanban-types";
+import {
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuPortal,
+  ContextMenuRoot,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+} from "radix-vue";
+import type { Component } from "vue";
+import {
+  availableIcons,
+  categories,
+  getIconsByCategory,
+  searchIcons,
+} from "@/utils/iconManager";
+
+interface PinnedIcons {
+  [key: string]: string;
+}
 
 const props = defineProps<{
   board: Board;
 }>();
 
+const store = useTauriStore().store;
 const isActivePin = ref(false);
 const router = useRouter();
+const searchQuery = ref("");
+
+const selectedIconName = ref("article");
+const selectedIcon = ref<Component>(availableIcons[0].component);
+
+const searchResults = computed(() => {
+  if (!searchQuery.value) return [];
+  return searchIcons(searchQuery.value);
+});
 
 onMounted(async () => {
   emitter.on("openKanbanPage", onNavigation);
   emitter.on("closeKanbanPage", onNavigation);
 
+  const savedIcons = ((await store.get("pinnedIcons")) as PinnedIcons) || {};
+  if (savedIcons[props.board.id]) {
+    const savedIcon = availableIcons.find(
+      (icon) => icon.name === savedIcons[props.board.id]
+    );
+    if (savedIcon) {
+      selectedIcon.value = savedIcon.component;
+      selectedIconName.value = savedIcon.name;
+    }
+  }
+
   onNavigation();
 });
 
+onUnmounted(() => {
+  emitter.off("openKanbanPage");
+  emitter.off("closeKanbanPage");
+});
+
+const selectIcon = async (icon: Component, name: string) => {
+  selectedIcon.value = icon;
+  selectedIconName.value = name;
+
+  const savedIcons = ((await store.get("pinnedIcons")) as PinnedIcons) || {};
+  savedIcons[props.board.id] = name;
+  await store.set("pinnedIcons", savedIcons);
+};
+
 const onNavigation = () => {
   isActivePin.value = false;
 
@@ -75,3 +198,28 @@ const onNavigation = () => {
   }
 };
 </script>
+
+<style scoped>
+.overflow-y-auto::-webkit-scrollbar {
+  width: 8px;
+}
+
+.overflow-y-auto::-webkit-scrollbar-track {
+  background: var(--elevation-2);
+  border-radius: 4px;
+}
+
+.overflow-y-auto::-webkit-scrollbar-thumb {
+  background: var(--elevation-3);
+  border-radius: 4px;
+}
+
+.overflow-y-auto::-webkit-scrollbar-thumb:hover {
+  background: var(--elevation-4);
+}
+
+.overflow-y-auto {
+  scrollbar-width: thin;
+  scrollbar-color: var(--elevation-3) var(--elevation-2);
+}
+</style>
diff --git a/utils/iconManager.ts b/utils/iconManager.ts
new file mode 100644
index 00000000..5fa5034f
--- /dev/null
+++ b/utils/iconManager.ts
@@ -0,0 +1,197 @@
+import {
+  PhArticle,
+  PhNotepad,
+  PhListChecks,
+  PhBookmark,
+  PhFlag,
+  PhStar,
+  PhPushPin,
+  // Add more icons here
+  PhNote,
+  PhBookmarks,
+  PhFiles,
+  PhFolder,
+  PhFolderOpen,
+  PhClipboard,
+  PhClipboardText,
+  PhKanban,
+  PhChartBar,
+  PhGraph,
+  PhBriefcase,
+  PhTarget,
+  PhLightbulb,
+  PhRocket,
+} from "@phosphor-icons/vue";
+import type { Component } from "vue";
+
+export interface IconDefinition {
+  name: string;
+  component: Component;
+  category: string;
+  tags?: string[];
+}
+
+const iconCategories = [
+  "Common",
+  "Documents",
+  "Organization",
+  "Project Management",
+  "Misc",
+] as const;
+
+export type IconCategory = (typeof iconCategories)[number];
+
+export const availableIcons: IconDefinition[] = [
+  // Common icons
+  {
+    name: "article",
+    component: PhArticle,
+    category: "Common",
+    tags: ["document", "paper", "file"],
+  },
+  {
+    name: "star",
+    component: PhStar,
+    category: "Common",
+    tags: ["favorite", "important"],
+  },
+  {
+    name: "pin",
+    component: PhPushPin,
+    category: "Common",
+    tags: ["pinned", "save"],
+  },
+
+  // Documents
+  {
+    name: "notepad",
+    component: PhNotepad,
+    category: "Documents",
+    tags: ["notes", "write"],
+  },
+  {
+    name: "note",
+    component: PhNote,
+    category: "Documents",
+    tags: ["memo", "write"],
+  },
+  {
+    name: "clipboard",
+    component: PhClipboard,
+    category: "Documents",
+    tags: ["tasks", "list"],
+  },
+  {
+    name: "clipboard-text",
+    component: PhClipboardText,
+    category: "Documents",
+    tags: ["tasks", "list", "notes"],
+  },
+
+  // Organization
+  {
+    name: "folder",
+    component: PhFolder,
+    category: "Organization",
+    tags: ["directory", "storage"],
+  },
+  {
+    name: "folder-open",
+    component: PhFolderOpen,
+    category: "Organization",
+    tags: ["directory", "storage"],
+  },
+  {
+    name: "files",
+    component: PhFiles,
+    category: "Organization",
+    tags: ["documents", "multiple"],
+  },
+
+  // Project Management
+  {
+    name: "kanban",
+    component: PhKanban,
+    category: "Project Management",
+    tags: ["board", "tasks"],
+  },
+  {
+    name: "list",
+    component: PhListChecks,
+    category: "Project Management",
+    tags: ["tasks", "todo"],
+  },
+  {
+    name: "chart",
+    component: PhChartBar,
+    category: "Project Management",
+    tags: ["stats", "progress"],
+  },
+  {
+    name: "graph",
+    component: PhGraph,
+    category: "Project Management",
+    tags: ["analytics", "progress"],
+  },
+  {
+    name: "target",
+    component: PhTarget,
+    category: "Project Management",
+    tags: ["goal", "aim"],
+  },
+
+  // Misc
+  {
+    name: "bookmark",
+    component: PhBookmark,
+    category: "Misc",
+    tags: ["save", "mark"],
+  },
+  {
+    name: "bookmarks",
+    component: PhBookmarks,
+    category: "Misc",
+    tags: ["save", "multiple"],
+  },
+  {
+    name: "flag",
+    component: PhFlag,
+    category: "Misc",
+    tags: ["mark", "important"],
+  },
+  {
+    name: "briefcase",
+    component: PhBriefcase,
+    category: "Misc",
+    tags: ["work", "business"],
+  },
+  {
+    name: "lightbulb",
+    component: PhLightbulb,
+    category: "Misc",
+    tags: ["idea", "creative"],
+  },
+  {
+    name: "rocket",
+    component: PhRocket,
+    category: "Misc",
+    tags: ["launch", "start"],
+  },
+];
+
+export const getIconsByCategory = (
+  category: IconCategory
+): IconDefinition[] => {
+  return availableIcons.filter((icon) => icon.category === category);
+};
+
+export const searchIcons = (query: string): IconDefinition[] => {
+  const searchTerm = query.toLowerCase();
+  return availableIcons.filter(
+    (icon) =>
+      icon.name.toLowerCase().includes(searchTerm) ||
+      icon.tags?.some((tag) => tag.toLowerCase().includes(searchTerm))
+  );
+};
+
+export const categories = iconCategories;
diff --git a/yarn.lock b/yarn.lock
index 973dbef7..50f671f8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1972,7 +1972,7 @@
   resolved "https://registry.yarnpkg.com/@tauri-apps/cli-win32-x64-msvc/-/cli-win32-x64-msvc-1.6.3.tgz#a78f5ccabbaca1d7ac3ce2acab2b1bd0276b53c4"
   integrity sha512-HUkWZ+lYHI/Gjkh2QjHD/OBDpqLVmvjZGpLK9losur1Eg974Jip6k+vsoTUxQBCBDfj30eDBct9E1FvXOspWeg==
 
-"@tauri-apps/cli@1.6.3":
+"@tauri-apps/cli@^1.6.3":
   version "1.6.3"
   resolved "https://registry.yarnpkg.com/@tauri-apps/cli/-/cli-1.6.3.tgz#75e23dea0b67774fc6f150d637a0dbecf1f9592c"
   integrity sha512-q46umd6QLRKDd4Gg6WyZBGa2fWvk0pbeUA5vFomm4uOs1/17LIciHv2iQ4UD+2Yv5H7AO8YiE1t50V0POiEGEw==