diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index f16d021..357f749 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -22,80 +22,12 @@ on:
           - minor
           - major
 
-permissions:
-  contents: write
-  pull-requests: write
-
-concurrency:
-  group: "release"
-  cancel-in-progress: false
 
 jobs:
   release:
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v6
-
-      - name: "Update Dev Container Index"
-        run: bash ./scripts/update-data.sh
-
-      - name: "Bump to new version"
-        id: bump
-        run: |
-          _version=$(npm --no-git-tag-version version ${{ github.event.inputs.version || 'patch' }})
-
-          echo "new_version=$_version" >> $GITHUB_OUTPUT
-          echo "New version: $_version"
-
-      - name: "Create Pull Request"
-        id: cpr
-        uses: peter-evans/create-pull-request@v8
-        with:
-          token: ${{ secrets.RELEASE_PAT }}
-          title: "chore(release): bump version to ${{ env.NEW_VERSION }}"
-          body: "chore(release): bump version to ${{ env.NEW_VERSION }}"
-          commit-message: "chore(release): bump version to ${{ env.NEW_VERSION }}"
-          branch: "release-${{ env.NEW_VERSION }}"
-          delete-branch: true
-        env:
-          NEW_VERSION: ${{ steps.bump.outputs.new_version }}
-
-      - name: "Auto-merge PR"
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        run: |
-          gh pr merge --squash --auto "${{ steps.cpr.outputs.pull-request-number }}"
-
-      - name: "Wait for PR to merge"
-        if: steps.cpr.outputs.pull-request-number != ''
-        timeout-minutes: 3
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          PR_NUMBER: ${{ steps.cpr.outputs.pull-request-number }}
-        run: |
-          while true; do
-            STATE=$(gh pr view "$PR_NUMBER" --json state --template '{{.state}}')
-            if [ "$STATE" == "MERGED" ]; then
-              echo "PR merged."
-              break
-            fi
-            if [ "$STATE" == "CLOSED" ]; then
-              echo "PR closed without merging."
-              exit 1
-            fi
-            echo "State: $STATE. Waiting 3s..."
-            sleep 3
-          done
-
-      - name: "Release"
-        if: steps.cpr.outputs.pull-request-number != ''
-        env:
-          # https://docs.github.com/en/actions/how-tos/write-workflows/choose-when-workflows-run/trigger-a-workflow#triggering-a-workflow-from-a-workflow
-          GITHUB_TOKEN: ${{ secrets.RELEASE_PAT }}
-          NEW_VERSION: ${{ steps.bump.outputs.new_version }}
-        run: |
-          gh release create $NEW_VERSION \
-            --target main \
-            -t $NEW_VERSION
+    uses: drehelis/improved-chainsaw/.github/workflows/release.yml@main
+    with:
+      version: ${{ github.event.inputs.version || 'patch' }}
+      pre_release_command: "bash ./scripts/update-data.sh"
+      timeout_minutes: 5
+    secrets: inherit
diff --git a/src/components/layout/ActivityBar.vue b/src/components/layout/ActivityBar.vue
index ad8f0ee..08194aa 100644
--- a/src/components/layout/ActivityBar.vue
+++ b/src/components/layout/ActivityBar.vue
@@ -1,5 +1,11 @@
 <script setup lang="ts">
 import type { Section } from "../../types";
+import IconPresets from "../ui/icons/IconPresets.vue";
+import IconSettings from "../ui/icons/IconSettings.vue";
+import IconFeatures from "../ui/icons/IconFeatures.vue";
+import IconNetwork from "../ui/icons/IconNetwork.vue";
+import IconMounts from "../ui/icons/IconMounts.vue";
+import IconAdvanced from "../ui/icons/IconAdvanced.vue";
 
 defineProps<{
   activeSection: Section;
@@ -20,24 +26,15 @@ defineEmits<{
       :class="{ active: activeSection === 'presets' }"
       title="Presets (Quick Start)"
     >
-      <svg
-        class="w-6 h-6"
+      <IconPresets
+        class="w-6 h-6 transition-colors duration-200"
         :class="
           activeSection === 'presets'
             ? 'text-ide-text-bright'
             : 'text-ide-text-muted group-hover:text-ide-text'
         "
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke="currentColor"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="1.5"
-          d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"
-        />
-      </svg>
+        stroke-width="1.5"
+      />
     </div>
 
     <div
@@ -46,30 +43,15 @@ defineEmits<{
       :class="{ active: activeSection === 'general' }"
       title="General Settings"
     >
-      <svg
-        class="w-6 h-6"
+      <IconSettings
+        class="w-6 h-6 transition-colors duration-200"
         :class="
           activeSection === 'general'
             ? 'text-ide-text-bright'
             : 'text-ide-text-muted group-hover:text-ide-text'
         "
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke="currentColor"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="1.5"
-          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"
-          stroke-width="1.5"
-          d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-        />
-      </svg>
+        stroke-width="1.5"
+      />
     </div>
     <div
       @click="$emit('update:activeSection', 'features')"
@@ -77,24 +59,15 @@ defineEmits<{
       :class="{ active: activeSection === 'features' }"
       title="Features"
     >
-      <svg
-        class="w-6 h-6"
+      <IconFeatures
+        class="w-6 h-6 transition-colors duration-200"
         :class="
           activeSection === 'features'
             ? 'text-ide-text-bright'
             : 'text-ide-text-muted group-hover:text-ide-text'
         "
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke="currentColor"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="1.5"
-          d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9"
-        />
-      </svg>
+        stroke-width="1.5"
+      />
     </div>
     <div
       @click="$emit('update:activeSection', 'ports')"
@@ -102,24 +75,15 @@ defineEmits<{
       :class="{ active: activeSection === 'ports' }"
       title="Network & Ports"
     >
-      <svg
-        class="w-6 h-6"
+      <IconNetwork
+        class="w-6 h-6 transition-colors duration-200"
         :class="
           activeSection === 'ports'
             ? 'text-ide-text-bright'
             : 'text-ide-text-muted group-hover:text-ide-text'
         "
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke="currentColor"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="1.5"
-          d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.963 11.963 0 0112 10.5a11.963 11.963 0 01-7.843-2.918m15.686 0A8.996 8.996 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418"
-        />
-      </svg>
+        stroke-width="1.5"
+      />
     </div>
     <div
       @click="$emit('update:activeSection', 'mounts')"
@@ -127,24 +91,15 @@ defineEmits<{
       :class="{ active: activeSection === 'mounts' }"
       title="Mounts"
     >
-      <svg
-        class="w-6 h-6"
+      <IconMounts
+        class="w-6 h-6 transition-colors duration-200"
         :class="
           activeSection === 'mounts'
             ? 'text-ide-text-bright'
             : 'text-ide-text-muted group-hover:text-ide-text'
         "
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke="currentColor"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="1.5"
-          d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"
-        />
-      </svg>
+        stroke-width="1.5"
+      />
     </div>
     <div
       @click="$emit('update:activeSection', 'advanced')"
@@ -152,24 +107,15 @@ defineEmits<{
       :class="{ active: activeSection === 'advanced' }"
       title="Advanced & Hooks"
     >
-      <svg
-        class="w-6 h-6"
+      <IconAdvanced
+        class="w-6 h-6 transition-colors duration-200"
         :class="
           activeSection === 'advanced'
             ? 'text-ide-text-bright'
             : 'text-ide-text-muted group-hover:text-ide-text'
         "
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke="currentColor"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="1.5"
-          d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"
-        />
-      </svg>
+        stroke-width="1.5"
+      />
     </div>
   </aside>
 </template>
diff --git a/src/components/layout/CommandPalette.vue b/src/components/layout/CommandPalette.vue
index 1ada61f..863b1d2 100644
--- a/src/components/layout/CommandPalette.vue
+++ b/src/components/layout/CommandPalette.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { ref, computed, watch, useTemplateRef, nextTick } from "vue";
 import { useCommandPalette } from "../../composables/useCommandPalette";
+import IconSearch from "../ui/icons/IconSearch.vue";
+import IconFrown from "../ui/icons/IconFrown.vue";
 
 const {
   isOpen,
@@ -114,19 +116,7 @@ const groupedCommands = computed(() => {
             class="flex items-center gap-3 px-4 border-b border-ide-border bg-ide-sidebar"
           >
             <!-- Search Icon -->
-            <svg
-              class="w-4 h-4 text-ide-text-muted shrink-0"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-              />
-            </svg>
+            <IconSearch class="w-4 h-4 text-ide-text-muted shrink-0" />
 
             <input
               ref="input"
@@ -206,24 +196,11 @@ const groupedCommands = computed(() => {
               </template>
             </template>
 
-            <!-- Empty state -->
             <div
               v-else
               class="flex flex-col items-center justify-center py-12 text-ide-text-muted"
             >
-              <svg
-                class="w-8 h-8 mb-3 opacity-30"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="1.5"
-                  d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                />
-              </svg>
+              <IconFrown class="w-8 h-8 mb-3 opacity-30" stroke-width="1.5" />
               <p class="text-[11px]">
                 No commands match <em>{{ query }}</em>
               </p>
diff --git a/src/components/layout/EditorTabs.vue b/src/components/layout/EditorTabs.vue
index a6fc349..05cee72 100644
--- a/src/components/layout/EditorTabs.vue
+++ b/src/components/layout/EditorTabs.vue
@@ -2,6 +2,16 @@
 import { ref, onMounted, onUnmounted } from "vue";
 import { useResponsive } from "../../composables/useResponsive";
 import { URLS } from "../../constants/urls";
+import IconFile from "../ui/icons/IconFile.vue";
+import IconChevronRight from "../ui/icons/IconChevronRight.vue";
+import IconChevronDown from "../ui/icons/IconChevronDown.vue";
+import IconCopy from "../ui/icons/IconCopy.vue";
+import IconTerminal from "../ui/icons/IconTerminal.vue";
+import IconCheck from "../ui/icons/IconCheck.vue";
+import IconShare from "../ui/icons/IconShare.vue";
+import IconDownload from "../ui/icons/IconDownload.vue";
+import IconTrash from "../ui/icons/IconTrash.vue";
+import IconGithub from "../ui/icons/IconGithub.vue";
 
 defineProps<{
   copyStatus: "idle" | "copied";
@@ -63,21 +73,12 @@ onUnmounted(() => {
           @click="$emit('update:activeFile', file)"
         >
           <!-- Generic Document Icon for Desktop -->
-          <svg
+          <IconFile
             v-if="!isMobile"
-            class="w-3.5 h-3.5"
+            size="14"
             :class="activeFile === file ? 'opacity-80' : 'opacity-30'"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-            />
-          </svg>
+            stroke-width="2"
+          />
           <span>{{ file }}</span>
         </div>
       </div>
@@ -91,19 +92,7 @@ onUnmounted(() => {
         <div
           class="h-full flex items-center justify-end pr-1 text-ide-accent/40 lg:hidden"
         >
-          <svg
-            class="w-2.5 h-2.5"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="4"
-              d="M9 5l7 7-7 7"
-            />
-          </svg>
+          <IconChevronRight size="10" stroke-width="4" />
         </div>
       </div>
     </div>
@@ -117,38 +106,18 @@ onUnmounted(() => {
           :class="{ 'bg-ide-accent/10 text-ide-text-bright': showCopyMenu }"
           title="Copy Options"
         >
-          <svg
-            class="w-4 h-4 lg:w-3.5 lg:h-3.5"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m-3 8h3m-3 4h3"
-            />
-          </svg>
+          <IconCopy class="w-4 h-4 lg:w-3.5 lg:h-3.5" stroke-width="2" />
           <span
             v-if="!isMobile"
             class="text-[10px] font-bold uppercase tracking-widest"
             >Copy</span
           >
-          <svg
-            class="w-2.5 h-2.5 opacity-50 transition-transform duration-200"
+          <IconChevronDown
+            size="10"
+            stroke-width="3"
+            class="opacity-50 transition-transform duration-200"
             :class="{ 'rotate-180': showCopyMenu }"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="3"
-              d="M19 9l-7 7-7-7"
-            />
-          </svg>
+          />
         </button>
 
         <!-- Dropdown Menu -->
@@ -161,19 +130,11 @@ onUnmounted(() => {
             class="w-full flex items-center relative px-3 py-2 hover:bg-ide-accent/10 transition-colors group text-left"
           >
             <div class="flex items-center gap-2 flex-1 min-w-0 pr-6">
-              <svg
-                class="w-3.5 h-3.5 text-ide-text-muted group-hover:text-ide-accent transition-colors shrink-0"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-                />
-              </svg>
+              <IconFile
+                size="14"
+                class="text-ide-text-muted group-hover:text-ide-accent transition-colors shrink-0"
+                stroke-width="2"
+              />
               <div class="flex flex-col min-w-0">
                 <span
                   class="text-[10px] font-bold uppercase tracking-tight text-ide-text-bright truncate"
@@ -184,20 +145,12 @@ onUnmounted(() => {
                 >
               </div>
             </div>
-            <svg
+            <IconCheck
               v-if="copyStatus === 'copied'"
-              class="w-3.5 h-3.5 text-ide-green absolute right-3"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="3"
-                d="M5 13l4 4L19 7"
-              />
-            </svg>
+              size="14"
+              stroke-width="3"
+              class="text-ide-green absolute right-3"
+            />
           </button>
 
           <div class="h-px bg-ide-border mx-2 my-1"></div>
@@ -207,19 +160,11 @@ onUnmounted(() => {
             class="w-full flex items-center relative px-3 py-2 hover:bg-ide-accent/10 transition-colors group text-left"
           >
             <div class="flex items-center gap-2 flex-1 min-w-0 pr-6">
-              <svg
-                class="w-3.5 h-3.5 text-ide-text-muted group-hover:text-ide-accent transition-colors shrink-0"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
-                />
-              </svg>
+              <IconTerminal
+                size="14"
+                stroke-width="2"
+                class="text-ide-text-muted group-hover:text-ide-accent transition-colors shrink-0"
+              />
               <div class="flex flex-col min-w-0">
                 <span
                   class="text-[10px] font-bold uppercase tracking-tight text-ide-text-bright truncate"
@@ -230,20 +175,12 @@ onUnmounted(() => {
                 >
               </div>
             </div>
-            <svg
+            <IconCheck
               v-if="oneLinerStatus === 'copied'"
-              class="w-3.5 h-3.5 text-ide-green absolute right-3"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="3"
-                d="M5 13l4 4L19 7"
-              />
-            </svg>
+              size="14"
+              stroke-width="3"
+              class="text-ide-green absolute right-3"
+            />
           </button>
         </div>
       </div>
@@ -255,34 +192,16 @@ onUnmounted(() => {
           shareStatus === 'copied' ? 'Link Copied' : 'Share Configuration'
         "
       >
-        <svg
+        <IconShare
           v-if="shareStatus === 'idle'"
           class="w-4 h-4 lg:w-3.5 lg:h-3.5"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"
-          />
-        </svg>
-        <svg
+          stroke-width="2"
+        />
+        <IconCheck
           v-else
           class="w-4 h-4 lg:w-3.5 lg:h-3.5 text-ide-green"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="3"
-            d="M5 13l4 4L19 7"
-          />
-        </svg>
+          stroke-width="3"
+        />
         <span
           v-if="!isMobile"
           class="text-[10px] font-bold uppercase tracking-widest"
@@ -295,19 +214,7 @@ onUnmounted(() => {
         class="flex items-center gap-1.5 px-2 py-1.5 rounded hover:bg-ide-accent/10 transition-colors text-ide-text-muted hover:text-ide-text-bright"
         title="Download devcontainer.json"
       >
-        <svg
-          class="w-4 h-4 lg:w-3.5 lg:h-3.5"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M4 16v1a2 2 0 002 2h12a2 2 0 002-2v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
-          />
-        </svg>
+        <IconDownload class="w-4 h-4 lg:w-3.5 lg:h-3.5" stroke-width="2" />
         <span
           v-if="!isMobile"
           class="text-[10px] font-bold uppercase tracking-widest"
@@ -322,19 +229,7 @@ onUnmounted(() => {
         class="flex items-center gap-1.5 px-2 py-1.5 rounded hover:bg-ide-red/10 transition-colors text-ide-red/80 hover:text-ide-red group"
         title="Reset to Template"
       >
-        <svg
-          class="w-4 h-4 lg:w-3.5 lg:h-3.5"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <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>
+        <IconTrash class="w-4 h-4 lg:w-3.5 lg:h-3.5" stroke-width="2" />
         <span
           v-if="!isMobile"
           class="text-[10px] font-bold uppercase tracking-widest"
@@ -342,24 +237,17 @@ onUnmounted(() => {
         >
       </button>
 
-      <div class="w-px h-3 bg-ide-border mx-1"></div>
+      <div v-if="isMobile" class="w-px h-3 bg-ide-border mx-1"></div>
 
       <a
+        v-if="isMobile"
         :href="URLS.REPO_URL"
         target="_blank"
         rel="noopener noreferrer"
         class="flex items-center gap-1.5 px-2 py-1.5 rounded hover:bg-ide-accent/10 transition-colors text-ide-text-muted hover:text-ide-text group"
         title="View Source on GitHub"
       >
-        <svg
-          class="w-4 h-4 lg:w-3.5 lg:h-3.5"
-          fill="currentColor"
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-11.999-12-11.999z"
-          />
-        </svg>
+        <IconGithub size="14" />
       </a>
     </div>
   </div>
diff --git a/src/components/layout/MobileNav.vue b/src/components/layout/MobileNav.vue
index cd3c4c7..b02751e 100644
--- a/src/components/layout/MobileNav.vue
+++ b/src/components/layout/MobileNav.vue
@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import IconSliders from "../ui/icons/IconSliders.vue";
+import IconEye from "../ui/icons/IconEye.vue";
+
 defineProps<{
   activeView: "config" | "preview";
   version: string;
@@ -20,19 +23,7 @@ defineEmits<{
           : 'text-ide-text-muted/60'
       "
     >
-      <svg
-        class="w-6 h-6"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke="currentColor"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="1.5"
-          d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"
-        />
-      </svg>
+      <IconSliders size="24" stroke-width="1.5" />
       <span class="text-[10px] font-black uppercase tracking-widest"
         >Config</span
       >
@@ -47,25 +38,7 @@ defineEmits<{
           : 'text-ide-text-muted/60'
       "
     >
-      <svg
-        class="w-6 h-6"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke="currentColor"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="1.5"
-          d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-        />
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="1.5"
-          d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
-        />
-      </svg>
+      <IconEye size="24" stroke-width="1.5" />
       <span class="text-[10px] font-black uppercase tracking-widest"
         >Preview</span
       >
diff --git a/src/components/layout/StatusBar.vue b/src/components/layout/StatusBar.vue
index c6e9991..fdd6f0a 100644
--- a/src/components/layout/StatusBar.vue
+++ b/src/components/layout/StatusBar.vue
@@ -1,6 +1,10 @@
 <script setup lang="ts">
 import { useTheme } from "../../composables/useTheme";
 import { URLS } from "../../constants/urls";
+import IconChevronDown from "../ui/icons/IconChevronDown.vue";
+import IconCheck from "../ui/icons/IconCheck.vue";
+import IconGithub from "../ui/icons/IconGithub.vue";
+import IconCoffee from "../ui/icons/IconCoffee.vue";
 
 defineProps<{
   version: string;
@@ -36,20 +40,12 @@ const currentIndentName = (val: number) => {
           class="flex items-center gap-1.5 hover:text-ide-accent transition-colors font-black uppercase tracking-tight"
         >
           {{ currentTheme.name }}
-          <svg
-            class="w-2.5 h-2.5 opacity-50 transition-transform"
+          <IconChevronDown
+            size="10"
+            stroke-width="4"
+            class="opacity-50 transition-transform"
             :class="{ 'rotate-180': showThemeMenu }"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="4"
-              d="M19 9l-7 7-7-7"
-            />
-          </svg>
+          />
         </button>
 
         <!-- Themed Dropdown Menu -->
@@ -68,20 +64,12 @@ const currentIndentName = (val: number) => {
             }"
           >
             <span>{{ t.name }}</span>
-            <svg
+            <IconCheck
               v-if="currentThemeId === t.id"
-              class="w-3 h-3 text-ide-accent"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="3"
-                d="M5 13l4 4L19 7"
-              />
-            </svg>
+              size="12"
+              stroke-width="3"
+              class="text-ide-accent"
+            />
           </div>
         </div>
       </div>
@@ -107,20 +95,12 @@ const currentIndentName = (val: number) => {
           "
         >
           {{ currentIndentName(indentation) }}
-          <svg
+          <IconChevronDown
             v-if="indentEditable"
-            class="w-2.5 h-2.5 opacity-50 transition-transform"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="4"
-              d="M19 9l-7 7-7-7"
-            />
-          </svg>
+            size="10"
+            stroke-width="4"
+            class="opacity-50 transition-transform"
+          />
         </button>
         <!-- Note: Indent menu state management should probably be moved to a composable or shared in App.vue -->
         <slot name="indent-menu" />
@@ -131,18 +111,20 @@ const currentIndentName = (val: number) => {
         :href="URLS.REPO_URL"
         target="_blank"
         rel="noopener noreferrer"
-        class="hover:text-ide-accent transition-colors flex items-center gap-1 group"
-        title="GitHub Profile"
+        class="hover:text-ide-text-bright transition-colors flex items-center gap-1 group"
+        title="GitHub Repository"
       >
-        <svg
-          class="w-3.5 h-3.5 opacity-70 group-hover:opacity-100"
-          fill="currentColor"
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-11.999-12-11.999z"
-          />
-        </svg>
+        <IconGithub size="14" class="opacity-70 group-hover:opacity-100" />
+      </a>
+
+      <a
+        :href="URLS.BUY_ME_A_COFFEE"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="transition-colors flex items-center gap-1 group text-ide-bmc hover:opacity-80"
+        title="Buy me a coffee"
+      >
+        <IconCoffee size="14" />
       </a>
     </div>
   </footer>
diff --git a/src/components/ui/icons/IconAdvanced.vue b/src/components/ui/icons/IconAdvanced.vue
new file mode 100644
index 0000000..a0bb5f0
--- /dev/null
+++ b/src/components/ui/icons/IconAdvanced.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import IconBase from "./IconBase.vue";
+
+defineProps<{
+  size?: number | string;
+  strokeWidth?: number | string;
+}>();
+</script>
+
+<template>
+  <IconBase :size="size" :stroke-width="strokeWidth">
+    <path d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
+  </IconBase>
+</template>
diff --git a/src/components/ui/icons/IconBase.vue b/src/components/ui/icons/IconBase.vue
new file mode 100644
index 0000000..9054933
--- /dev/null
+++ b/src/components/ui/icons/IconBase.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+interface Props {
+  size?: number | string;
+  viewBox?: string;
+  strokeWidth?: number | string;
+}
+
+withDefaults(defineProps<Props>(), {
+  size: 24,
+  viewBox: "0 0 24 24",
+  strokeWidth: 2,
+});
+</script>
+
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    :width="size"
+    :height="size"
+    :viewBox="viewBox"
+    fill="none"
+    stroke="currentColor"
+    :stroke-width="strokeWidth"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="icon-base"
+    v-bind="$attrs"
+  >
+    <slot />
+  </svg>
+</template>
+
+<style scoped>
+.icon-base {
+  display: inline-block;
+  vertical-align: middle;
+  flex-shrink: 0;
+}
+</style>
diff --git a/src/components/ui/icons/IconCheck.vue b/src/components/ui/icons/IconCheck.vue
new file mode 100644
index 0000000..3e5ee55
--- /dev/null
+++ b/src/components/ui/icons/IconCheck.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import IconBase from "./IconBase.vue";
+
+defineProps<{
+  size?: number | string;
+  strokeWidth?: number | string;
+}>();
+</script>
+
+<template>
+  <IconBase :size="size" :stroke-width="strokeWidth">
+    <path d="M5 13l4 4L19 7" />
+  </IconBase>
+</template>
diff --git a/src/components/ui/icons/IconChevronDown.vue b/src/components/ui/icons/IconChevronDown.vue
new file mode 100644
index 0000000..578cc48
--- /dev/null
+++ b/src/components/ui/icons/IconChevronDown.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import IconBase from "./IconBase.vue";
+
+defineProps<{
+  size?: number | string;
+  strokeWidth?: number | string;
+}>();
+</script>
+
+<template>
+  <IconBase :size="size" :stroke-width="strokeWidth">
+    <path d="M19 9l-7 7-7-7" />
+  </IconBase>
+</template>
diff --git a/src/components/ui/icons/IconChevronRight.vue b/src/components/ui/icons/IconChevronRight.vue
new file mode 100644
index 0000000..b4bc215
--- /dev/null
+++ b/src/components/ui/icons/IconChevronRight.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import IconBase from "./IconBase.vue";
+
+defineProps<{
+  size?: number | string;
+  strokeWidth?: number | string;
+}>();
+</script>
+
+<template>
+  <IconBase :size="size" :stroke-width="strokeWidth">
+    <path d="M9 5l7 7-7 7" />
+  </IconBase>
+</template>
diff --git a/src/components/ui/icons/IconCoffee.vue b/src/components/ui/icons/IconCoffee.vue
new file mode 100644
index 0000000..840d513
--- /dev/null
+++ b/src/components/ui/icons/IconCoffee.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import IconBase from "./IconBase.vue";
+
+defineProps<{
+  size?: number | string;
+}>();
+</script>
+
+<template>
+  <IconBase
+    :size="size"
+    fill="currentColor"
+    stroke="none"
+    stroke-width="0"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M20.216 6.415l-.132-.666c-.119-.598-.388-1.163-1.001-1.379-.197-.069-.42-.098-.57-.241-.152-.143-.196-.366-.231-.572-.065-.378-.125-.756-.192-1.133-.057-.325-.102-.69-.25-.987-.195-.4-.597-.634-.996-.788a5.723 5.723 0 00-.626-.194c-1-.263-2.05-.36-3.077-.416a25.834 25.834 0 00-3.7.062c-.915.083-1.88.184-2.75.5-.318.116-.646.256-.888.501-.297.302-.393.77-.177 1.146.154.267.415.456.692.58.36.162.737.284 1.123.366 1.075.238 2.189.331 3.287.37 1.218.05 2.437.01 3.65-.118.299-.033.598-.073.896-.119.352-.054.578-.513.474-.834-.124-.383-.457-.531-.834-.473-.466.074-.96.108-1.382.146-1.177.08-2.358.082-3.536.006a22.228 22.228 0 01-1.157-.107c-.086-.01-.18-.025-.258-.036-.243-.036-.484-.08-.724-.13-.111-.027-.111-.185 0-.212h.005c.277-.06.557-.108.838-.147h.002c.131-.009.263-.032.394-.048a25.076 25.076 0 013.426-.12c.674.019 1.347.067 2.017.144l.228.031c.267.04.533.088.798.145.392.085.895.113 1.07.542.055.137.08.288.111.431l.319 1.484a.237.237 0 01-.199.284h-.003c-.037.006-.075.01-.112.015a36.704 36.704 0 01-4.743.295 37.059 37.059 0 01-4.699-.304c-.14-.017-.293-.042-.417-.06-.326-.048-.649-.108-.973-.161-.393-.065-.768-.032-1.123.161-.29.16-.527.404-.675.701-.154.316-.199.66-.267 1-.069.34-.176.707-.135 1.056.087.753.613 1.365 1.37 1.502a39.69 39.69 0 0011.343.376.483.483 0 01.535.53l-.071.697-1.018 9.907c-.041.41-.047.832-.125 1.237-.122.637-.553 1.028-1.182 1.171-.577.131-1.165.2-1.756.205-.656.004-1.31-.025-1.966-.022-.699.004-1.556-.06-2.095-.58-.475-.458-.54-1.174-.605-1.793l-.731-7.013-.322-3.094c-.037-.351-.286-.695-.678-.678-.336.015-.718.3-.678.679l.228 2.185.949 9.112c.147 1.344 1.174 2.068 2.446 2.272.742.12 1.503.144 2.257.156.966.016 1.942.053 2.892-.122 1.408-.258 2.465-1.198 2.616-2.657.34-3.332.683-6.663 1.024-9.995l.215-2.087a.484.484 0 01.39-.426c.402-.078.787-.212 1.074-.518.455-.488.546-1.124.385-1.766zm-1.478.772c-.145.137-.363.201-.578.233-2.416.359-4.866.54-7.308.46-1.748-.06-3.477-.254-5.207-.498-.17-.024-.353-.055-.47-.18-.22-.236-.111-.71-.054-.995.052-.26.152-.609.463-.646.484-.057 1.046.148 1.526.22.577.088 1.156.159 1.737.212 2.48.226 5.002.19 7.472-.14.45-.06.899-.13 1.345-.21.399-.072.84-.206 1.08.206.166.281.188.657.162.974a.544.544 0 01-.169.364zm-6.159 3.9c-.862.37-1.84.788-3.109.788a5.884 5.884 0 01-1.569-.217l.877 9.004c.065.78.717 1.38 1.5 1.38 0 0 1.243.065 1.658.065.447 0 1.786-.065 1.786-.065.783 0 1.434-.6 1.499-1.38l.94-9.95a3.996 3.996 0 00-1.322-.238c-.826 0-1.491.284-2.26.613z"
+    />
+  </IconBase>
+</template>
diff --git a/src/components/ui/icons/IconCopy.vue b/src/components/ui/icons/IconCopy.vue
new file mode 100644
index 0000000..0036353
--- /dev/null
+++ b/src/components/ui/icons/IconCopy.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import IconBase from "./IconBase.vue";
+
+defineProps<{
+  size?: number | string;
+  strokeWidth?: number | string;
+}>();
+</script>
+
+<template>
+  <IconBase :size="size" :stroke-width="strokeWidth">
+    <path
+      d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m-3 8h3m-3 4h3"
+    />
+  </IconBase>
+</template>
diff --git a/src/components/ui/icons/IconDownload.vue b/src/components/ui/icons/IconDownload.vue
new file mode 100644
index 0000000..05dab52
--- /dev/null
+++ b/src/components/ui/icons/IconDownload.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import IconBase from "./IconBase.vue";
+
+defineProps<{
+  size?: number | string;
+  strokeWidth?: number | string;
+}>();
+</script>
+
+<template>
+  <IconBase :size="size" :stroke-width="strokeWidth">
+    <path d="M4 16v1a2 2 0 002 2h12a2 2 0 002-2v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+  </IconBase>
+</template>
diff --git a/src/components/ui/icons/IconEye.vue b/src/components/ui/icons/IconEye.vue
new file mode 100644
index 0000000..ad0b045
--- /dev/null
+++ b/src/components/ui/icons/IconEye.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import IconBase from "./IconBase.vue";
+
+defineProps<{
+  size?: number | string;
+  strokeWidth?: number | string;
+}>();
+</script>
+
+<template>
+  <IconBase :size="size" :stroke-width="strokeWidth">
+    <path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+    <path
+      d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+    />
+  </IconBase>
+</template>
diff --git a/src/components/ui/icons/IconFeatures.vue b/src/components/ui/icons/IconFeatures.vue
new file mode 100644
index 0000000..e83fa1f
--- /dev/null
+++ b/src/components/ui/icons/IconFeatures.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import IconBase from "./IconBase.vue";
+
+defineProps<{
+  size?: number | string;
+  strokeWidth?: number | string;
+}>();
+</script>
+
+<template>
+  <IconBase :size="size" :stroke-width="strokeWidth">
+    <path
+      d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9"
+    />
+  </IconBase>
+</template>
diff --git a/src/components/ui/icons/IconFile.vue b/src/components/ui/icons/IconFile.vue
new file mode 100644
index 0000000..84bced3
--- /dev/null
+++ b/src/components/ui/icons/IconFile.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import IconBase from "./IconBase.vue";
+
+defineProps<{
+  size?: number | string;
+  strokeWidth?: number | string;
+}>();
+</script>
+
+<template>
+  <IconBase :size="size" :stroke-width="strokeWidth">
+    <path
+      d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+    />
+  </IconBase>
+</template>
diff --git a/src/components/ui/icons/IconFrown.vue b/src/components/ui/icons/IconFrown.vue
new file mode 100644
index 0000000..e5915a3
--- /dev/null
+++ b/src/components/ui/icons/IconFrown.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import IconBase from "./IconBase.vue";
+
+defineProps<{
+  size?: number | string;
+  strokeWidth?: number | string;
+}>();
+</script>
+
+<template>
+  <IconBase :size="size" :stroke-width="strokeWidth">
+    <path
+      d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+    />
+  </IconBase>
+</template>
diff --git a/src/components/ui/icons/IconGithub.vue b/src/components/ui/icons/IconGithub.vue
new file mode 100644
index 0000000..4d2e513
--- /dev/null
+++ b/src/components/ui/icons/IconGithub.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import IconBase from "./IconBase.vue";
+
+defineProps<{
+  size?: number | string;
+}>();
+</script>
+
+<template>
+  <IconBase :size="size" fill="currentColor" stroke="none" stroke-width="0">
+    <path
+      d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-11.999-12-11.999z"
+    />
+  </IconBase>
+</template>
diff --git a/src/components/ui/icons/IconMounts.vue b/src/components/ui/icons/IconMounts.vue
new file mode 100644
index 0000000..393559b
--- /dev/null
+++ b/src/components/ui/icons/IconMounts.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import IconBase from "./IconBase.vue";
+
+defineProps<{
+  size?: number | string;
+  strokeWidth?: number | string;
+}>();
+</script>
+
+<template>
+  <IconBase :size="size" :stroke-width="strokeWidth">
+    <path
+      d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"
+    />
+  </IconBase>
+</template>
diff --git a/src/components/ui/icons/IconNetwork.vue b/src/components/ui/icons/IconNetwork.vue
new file mode 100644
index 0000000..92ad063
--- /dev/null
+++ b/src/components/ui/icons/IconNetwork.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import IconBase from "./IconBase.vue";
+
+defineProps<{
+  size?: number | string;
+  strokeWidth?: number | string;
+}>();
+</script>
+
+<template>
+  <IconBase :size="size" :stroke-width="strokeWidth">
+    <path
+      d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.963 11.963 0 0112 10.5a11.963 11.963 0 01-7.843-2.918m15.686 0A8.996 8.996 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418"
+    />
+  </IconBase>
+</template>
diff --git a/src/components/ui/icons/IconPresets.vue b/src/components/ui/icons/IconPresets.vue
new file mode 100644
index 0000000..311cc04
--- /dev/null
+++ b/src/components/ui/icons/IconPresets.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import IconBase from "./IconBase.vue";
+
+defineProps<{
+  size?: number | string;
+  strokeWidth?: number | string;
+}>();
+</script>
+
+<template>
+  <IconBase :size="size" :stroke-width="strokeWidth">
+    <path
+      d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"
+    />
+  </IconBase>
+</template>
diff --git a/src/components/ui/icons/IconSearch.vue b/src/components/ui/icons/IconSearch.vue
new file mode 100644
index 0000000..dc05d16
--- /dev/null
+++ b/src/components/ui/icons/IconSearch.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import IconBase from "./IconBase.vue";
+
+defineProps<{
+  size?: number | string;
+  strokeWidth?: number | string;
+}>();
+</script>
+
+<template>
+  <IconBase :size="size" :stroke-width="strokeWidth">
+    <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+  </IconBase>
+</template>
diff --git a/src/components/ui/icons/IconSettings.vue b/src/components/ui/icons/IconSettings.vue
new file mode 100644
index 0000000..ba982c9
--- /dev/null
+++ b/src/components/ui/icons/IconSettings.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import IconBase from "./IconBase.vue";
+
+defineProps<{
+  size?: number | string;
+  strokeWidth?: number | string;
+}>();
+</script>
+
+<template>
+  <IconBase :size="size" :stroke-width="strokeWidth">
+    <path
+      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 d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+  </IconBase>
+</template>
diff --git a/src/components/ui/icons/IconShare.vue b/src/components/ui/icons/IconShare.vue
new file mode 100644
index 0000000..068bb8a
--- /dev/null
+++ b/src/components/ui/icons/IconShare.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import IconBase from "./IconBase.vue";
+
+defineProps<{
+  size?: number | string;
+  strokeWidth?: number | string;
+}>();
+</script>
+
+<template>
+  <IconBase :size="size" :stroke-width="strokeWidth">
+    <path
+      d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"
+    />
+  </IconBase>
+</template>
diff --git a/src/components/ui/icons/IconSliders.vue b/src/components/ui/icons/IconSliders.vue
new file mode 100644
index 0000000..f4c8df9
--- /dev/null
+++ b/src/components/ui/icons/IconSliders.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import IconBase from "./IconBase.vue";
+
+defineProps<{
+  size?: number | string;
+  strokeWidth?: number | string;
+}>();
+</script>
+
+<template>
+  <IconBase :size="size" :stroke-width="strokeWidth">
+    <path
+      d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"
+    />
+  </IconBase>
+</template>
diff --git a/src/components/ui/icons/IconTerminal.vue b/src/components/ui/icons/IconTerminal.vue
new file mode 100644
index 0000000..2b8e6e2
--- /dev/null
+++ b/src/components/ui/icons/IconTerminal.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import IconBase from "./IconBase.vue";
+
+defineProps<{
+  size?: number | string;
+  strokeWidth?: number | string;
+}>();
+</script>
+
+<template>
+  <IconBase :size="size" :stroke-width="strokeWidth">
+    <path
+      d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+    />
+  </IconBase>
+</template>
diff --git a/src/components/ui/icons/IconTrash.vue b/src/components/ui/icons/IconTrash.vue
new file mode 100644
index 0000000..2114904
--- /dev/null
+++ b/src/components/ui/icons/IconTrash.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import IconBase from "./IconBase.vue";
+
+defineProps<{
+  size?: number | string;
+  strokeWidth?: number | string;
+}>();
+</script>
+
+<template>
+  <IconBase :size="size" :stroke-width="strokeWidth">
+    <path
+      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"
+    />
+  </IconBase>
+</template>
diff --git a/src/constants/urls.ts b/src/constants/urls.ts
index 0b5bec7..007ea0c 100644
--- a/src/constants/urls.ts
+++ b/src/constants/urls.ts
@@ -21,6 +21,7 @@ export const URLS = {
 
   // External
   SIMPLE_ICONS_BASE: "https://cdn.simpleicons.org",
+  BUY_ME_A_COFFEE: "https://www.buymeacoffee.com/drehelis",
 };
 
 export const BASE_URL = import.meta.env.BASE_URL;
diff --git a/src/index.css b/src/index.css
index 631a9b2..1aba516 100644
--- a/src/index.css
+++ b/src/index.css
@@ -18,6 +18,7 @@
   --color-ide-text: var(--theme-text);
   --color-ide-text-muted: var(--theme-text-muted);
   --color-ide-text-bright: var(--theme-text-bright);
+  --color-ide-bmc: var(--bmc-color);
 
   --font-sans: "Geist", ui-sans-serif, system-ui;
   --font-mono: "Geist Mono", ui-monospace, SFMono-Regular;
@@ -42,6 +43,7 @@
 
   --mobile-nav-h: 4.5rem;
   --safe-bottom: env(safe-area-inset-bottom, 0px);
+  --bmc-color: #ffdd00;
 }
 
 .theme-dracula {
@@ -93,6 +95,7 @@
   --theme-text: #586e75;
   --theme-text-muted: #657b83;
   --theme-text-bright: #073642;
+  --bmc-color: #cb4b16; /* Same as theme-orange for high contrast on light bg */
 }
 
 @layer base {