From 43f8ac0792d2fdf18efdaceec632f99d130ead35 Mon Sep 17 00:00:00 2001
From: karrot0 <karrotgaming1@gmail.com>
Date: Wed, 5 Nov 2025 21:34:04 -0500
Subject: [PATCH 1/3] feat: Added Extensions to the Extension Route and
 Extension Details

---
 .../theme/components/ExtensionDetails.vue     |  218 +++
 .../theme/components/ExtensionList.css        | 1546 +++++++++++++++++
 .../theme/components/ExtensionList.vue        |  800 +++++++++
 .../theme/components/ExtensionSearch.vue      |  223 +++
 src/.vitepress/theme/index.ts                 |    8 +-
 src/.vitepress/theme/lib/extensions.ts        |  380 ++++
 src/extension-list.md                         |    4 +-
 7 files changed, 3177 insertions(+), 2 deletions(-)
 create mode 100644 src/.vitepress/theme/components/ExtensionDetails.vue
 create mode 100644 src/.vitepress/theme/components/ExtensionList.css
 create mode 100644 src/.vitepress/theme/components/ExtensionList.vue
 create mode 100644 src/.vitepress/theme/components/ExtensionSearch.vue
 create mode 100644 src/.vitepress/theme/lib/extensions.ts

diff --git a/src/.vitepress/theme/components/ExtensionDetails.vue b/src/.vitepress/theme/components/ExtensionDetails.vue
new file mode 100644
index 0000000..e8fed64
--- /dev/null
+++ b/src/.vitepress/theme/components/ExtensionDetails.vue
@@ -0,0 +1,218 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref } from "vue";
+import {
+  getContentRatingBg,
+  getContentRatingColor,
+  type Extension,
+} from "../lib/extensions";
+
+interface Props {
+  extension: Extension | null;
+  show: boolean;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  hide: [];
+  install: [extension: Extension];
+}>();
+
+const detailsContainer = ref<HTMLElement | null>(null);
+const windowWidth = ref(1024); // Default desktop width
+
+const isMobile = computed(() => windowWidth.value < 768);
+
+const handleResize = () => {
+  windowWidth.value = window.innerWidth;
+};
+
+const handleScroll = (event: Event) => {
+  if (!isMobile.value) return; // Only handle scroll on mobile
+
+  const target = event.target as HTMLElement;
+  if (target.scrollTop < -50) {
+    emit("hide");
+  }
+};
+
+const handleInstall = () => {
+  if (props.extension) {
+    emit("install", props.extension);
+  }
+};
+
+onMounted(() => {
+  windowWidth.value = window.innerWidth;
+  window.addEventListener("resize", handleResize);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("resize", handleResize);
+});
+</script>
+
+<template>
+  <div
+    v-if="show && extension"
+    class="details-overlay"
+    :class="{ desktop: !isMobile }"
+    @click="$emit('hide')"
+  >
+    <div
+      ref="detailsContainer"
+      class="details-container"
+      :class="{ desktop: !isMobile }"
+      @click.stop
+      @scroll="handleScroll"
+    >
+      <!-- Mobile handle bar -->
+      <div v-if="isMobile" class="details-handle">
+        <div class="handle-bar" />
+      </div>
+
+      <!-- Desktop close button -->
+      <button v-else class="details-close-btn" @click="$emit('hide')">
+        <svg
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+        >
+          <line x1="18" y1="6" x2="6" y2="18" />
+          <line x1="6" y1="6" x2="18" y2="18" />
+        </svg>
+      </button>
+
+      <div class="details-content" :class="{ desktop: !isMobile }">
+        <div class="details-header">
+          <img
+            :src="extension.iconUrl"
+            :alt="`${extension.name} icon`"
+            class="details-icon"
+            @error="
+              (e) =>
+                ((e.target as HTMLImageElement).src =
+                  'https://paperback.moe/pb-placeholder.png')
+            "
+          />
+          <div class="details-header-text">
+            <h2 class="details-title">
+              {{ extension.name }}
+            </h2>
+            <span class="details-source-badge" :class="extension.source">
+              {{
+                extension.source === "inkdex"
+                  ? "Inkdex"
+                  : extension.repoId || extension.source
+              }}
+            </span>
+          </div>
+        </div>
+
+        <div v-if="extension.metadata" class="details-meta">
+          <div class="details-section">
+            <h3>Content Rating</h3>
+            <span
+              class="details-rating-badge"
+              :style="{
+                color: getContentRatingColor(extension.metadata.contentRating),
+                backgroundColor: getContentRatingBg(
+                  extension.metadata.contentRating,
+                ),
+              }"
+            >
+              {{ extension.metadata.contentRating }}
+            </span>
+          </div>
+
+          <div v-if="extension.metadata.language" class="details-section">
+            <h3>Language</h3>
+            <span class="details-language-badge">{{
+              extension.metadata.language
+            }}</span>
+          </div>
+
+          <div v-if="extension.metadata.version" class="details-section">
+            <h3>Version</h3>
+            <span class="details-version-badge">{{
+              extension.metadata.version
+            }}</span>
+          </div>
+
+          <div
+            v-if="
+              extension.metadata.badges && extension.metadata.badges.length > 0
+            "
+            class="details-section"
+          >
+            <h3>Tags</h3>
+            <div class="details-badges">
+              <span
+                v-for="badge in extension.metadata.badges"
+                :key="badge.label"
+                class="details-genre-badge"
+                :style="{
+                  color: badge.textColor,
+                  backgroundColor: badge.backgroundColor,
+                }"
+              >
+                {{ badge.label }}
+              </span>
+            </div>
+          </div>
+
+          <div
+            v-if="
+              extension.metadata.developers &&
+              extension.metadata.developers.length > 0
+            "
+            class="details-section"
+          >
+            <h3>Developers</h3>
+            <div class="details-developers">
+              <div
+                v-for="dev in extension.metadata.developers"
+                :key="dev.name"
+                class="details-developer"
+              >
+                <span class="dev-name">{{ dev.name }}</span>
+                <a
+                  v-if="dev.github"
+                  :href="dev.github"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="dev-link"
+                >
+                  GitHub
+                </a>
+                <a
+                  v-if="dev.website"
+                  :href="dev.website"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="dev-link"
+                >
+                  Website
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div v-if="extension.metadata?.description" class="details-description">
+          <h3>Description</h3>
+          <p>{{ extension.metadata.description }}</p>
+        </div>
+
+        <div class="details-actions">
+          <button class="details-install-btn" @click="handleInstall">
+            Install Extension
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/.vitepress/theme/components/ExtensionList.css b/src/.vitepress/theme/components/ExtensionList.css
new file mode 100644
index 0000000..06817bf
--- /dev/null
+++ b/src/.vitepress/theme/components/ExtensionList.css
@@ -0,0 +1,1546 @@
+.extension-list {
+  margin: 2rem 0;
+}
+.loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  padding: 3rem 1rem;
+  color: var(--vp-c-text-2);
+  text-align: center;
+}
+.spinner {
+  width: 24px;
+  height: 24px;
+  border: 3px solid var(--vp-c-bg-soft);
+  border-top: 3px solid var(--vp-c-brand);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+@keyframes spin {
+  0% {
+  transform: rotate(0deg);
+}
+100% {
+  transform: rotate(360deg);
+}
+}.error {
+  padding: 1rem;
+  background: var(--vp-c-danger-soft);
+  border: 1px solid var(--vp-c-danger);
+  border-radius: 8px;
+  color: var(--vp-c-danger);
+}
+.search-section {
+  background: #18181b;
+  border: 1px solid var(--vp-c-border);
+  border-radius: 12px;
+  padding: 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-bottom: 2rem;
+}
+.search-bar {
+  width: 100%}
+.search-input-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.search-icon {
+  position: absolute;
+  left: 1rem;
+  color: var(--vp-c-text-2);
+  pointer-events: none;
+  display: flex;
+}
+.search-input {
+  width: 100%;
+  padding: .75rem 1rem .75rem 2.75rem;
+  background: var(--vp-c-bg-soft);
+  border: 1px solid #fff0;
+  border-radius: 8px;
+  color: var(--vp-c-text-1);
+  font-size: .95rem;
+  transition: all 0.2s ease;
+}
+.search-input:focus {
+  outline: none;
+  background: var(--vp-c-bg);
+  border-color: var(--vp-c-brand);
+  box-shadow: 0 0 0 2px var(--vp-c-brand-soft);
+}
+.search-input::-webkit-search-cancel-button {
+  display: none;
+}
+.clear-btn {
+  position: absolute;
+  right: .5rem;
+  background: none;
+  border: none;
+  color: var(--vp-c-text-2);
+  font-size: 1.2rem;
+  cursor: pointer;
+  padding: .5rem;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+  min-width: 36px;
+  min-height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.clear-btn:hover {
+  background: var(--vp-c-bg);
+  color: var(--vp-c-text-1);
+}
+.search-shortcut {
+  display: flex;
+  gap: .25rem;
+  align-items: center;
+  position: absolute;
+  right: .75rem;
+}
+.search-shortcut kbd {
+  padding: .2rem .4rem;
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-border);
+  border-radius: 4px;
+  font-size: .7rem;
+  color: var(--vp-c-text-2);
+  font-family: inherit;
+}
+.filters-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+.select-group {
+  display: flex;
+  gap: .75rem;
+  flex: 1;
+  min-width: 280px;
+}
+.select-wrapper {
+  position: relative;
+  flex: 1;
+}
+.custom-select {
+  width: 100%;
+  appearance: none;
+  -webkit-appearance: none;
+  background: var(--vp-c-bg-soft);
+  border: 1px solid #fff0;
+  border-radius: 8px;
+  padding: .6rem 2rem .6rem 1rem;
+  color: var(--vp-c-text-1);
+  font-size: .9rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+.custom-select:hover {
+  background: var(--vp-c-bg);
+  border-color: var(--vp-c-border);
+}
+.custom-select:focus {
+  outline: none;
+  border-color: var(--vp-c-brand);
+}
+.select-arrow {
+  position: absolute;
+  right: .8rem;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: .7rem;
+  color: var(--vp-c-text-2);
+  pointer-events: none;
+}
+.toggles-group {
+  display: flex;
+  gap: .75rem;
+}
+.toggle-btn {
+  display: flex;
+  align-items: center;
+  padding: .6rem 1rem;
+  background: var(--vp-c-bg-soft);
+  border: 1px solid #fff0;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  user-select: none;
+  color: var(--vp-c-text-2);
+}
+.toggle-btn:hover {
+  background: var(--vp-c-bg);
+  border-color: var(--vp-c-border);
+  color: var(--vp-c-text-1);
+}
+.toggle-btn.active {
+  background: var(--vp-c-danger-soft);
+  color: var(--vp-c-danger);
+  border-color: var(--vp-c-danger-soft);
+}
+.hidden-checkbox {
+  display: none;
+}
+.toggle-label {
+  font-size: .9rem;
+  font-weight: 500;
+}
+.action-btn {
+  display: flex;
+  align-items: center;
+  gap: .5rem;
+  padding: .6rem 1rem;
+  background: var(--vp-c-bg-soft);
+  border: 1px solid #fff0;
+  border-radius: 8px;
+  color: var(--vp-c-text-1);
+  font-size: .9rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+.action-btn:hover {
+  background: var(--vp-c-bg);
+  border-color: var(--vp-c-border);
+}
+.action-btn.active {
+  background: var(--vp-c-brand);
+  color: #fff;
+}
+.filter-count {
+  background: rgb(255 255 255 / .25);
+  padding: .1rem .4rem;
+  border-radius: 10px;
+  font-size: .75rem;
+  min-width: 1.2rem;
+  text-align: center;
+}
+.expand-icon {
+  font-size: .65rem;
+  transition: transform 0.2s ease;
+}
+.expand-icon.expanded {
+  transform: rotate(180deg);
+}
+.btn-icon {
+  font-size: 1rem;
+}
+@media (max-width:640px) {
+  .filters-row {
+  flex-direction: column;
+  align-items: stretch;
+}
+.select-group {
+  flex-direction: column;
+}
+.toggles-group {
+  justify-content: space-between;
+}
+.toggle-btn, .action-btn {
+  flex: 1;
+  justify-content: center;
+}
+}.results-summary {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+  padding: .75rem 0;
+  border-bottom: 1px solid var(--vp-c-border);
+}
+.results-count {
+  font-size: .9rem;
+  color: var(--vp-c-text-2);
+}
+.active-filters {
+  display: flex;
+  gap: .5rem;
+  flex-wrap: wrap;
+}
+.filter-tag {
+  padding: .25rem .5rem;
+  background: var(--vp-c-brand-soft);
+  color: var(--vp-c-brand);
+  border-radius: 4px;
+  font-size: .8rem;
+  font-weight: 500;
+}
+.filter-tag.nsfw-active {
+  background: var(--vp-c-danger-soft);
+  color: var(--vp-c-danger);
+}
+.extensions-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 1.5rem;
+  margin: 1.5rem 0;
+}
+.extension-card {
+  padding: 1.5rem;
+  border: 1px solid var(--vp-c-border);
+  border-radius: 12px;
+  background: #18181b;
+  color: #fff;
+  transition: all 0.3s ease;
+  cursor: pointer;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%}
+.extension-card:hover {
+  border-color: var(--vp-c-brand);
+  box-shadow: 0 4px 12px rgb(0 0 0 / .1);
+}
+.extension-card:active {
+  transform: scale(.98);
+  transition: transform 0.1s ease;
+}
+.extension-card.selected {
+  border-color: var(--vp-c-brand);
+  box-shadow: 0 0 0 3px var(--vp-c-brand-soft);
+  background: var(--vp-c-brand-dimm);
+}
+.extension-card.nsfw-blur {
+  position: relative;
+  overflow: hidden;
+  background: #18181b;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 200px;
+  background-repeat: no-repeat;
+  background-attachment: scroll;
+  transition: all 0.6s cubic-bezier(.4, 0, .2, 1);
+}
+.extension-card.nsfw-blur::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(135deg, rgb(0 0 0 / .03) 0%, rgb(0 0 0 / .15) 100%);
+  backdrop-filter: blur(30px);
+  z-index: 1;
+  transition: all 0.6s cubic-bezier(.4, 0, .2, 1);
+}
+.extension-card.nsfw-blur .extension-header, .extension-card.nsfw-blur .extension-meta, .extension-card.nsfw-blur .extension-actions, .extension-card.nsfw-blur .selected-indicator {
+  opacity: 0;
+}
+.extension-header {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 1rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--vp-c-divider);
+  transition: opacity 0.6s cubic-bezier(.4, 0, .2, 1);
+}
+.extension-icon {
+  width: 56px;
+  height: 56px;
+  border-radius: 12px;
+  object-fit: cover;
+  flex-shrink: 0;
+  box-shadow: 0 2px 8px rgb(0 0 0 / .1);
+}
+.extension-header-text {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  min-width: 0;
+}
+.extension-name {
+  margin: 0!important;
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: #fff;
+  line-height: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.extension-source {
+  margin: 0;
+}
+.source-badge {
+  padding: .2rem .4rem;
+  border-radius: 6px;
+  font-size: .7rem;
+  font-weight: 500;
+  text-transform: uppercase;
+}
+.source-badge.inkdex {
+  background: var(--vp-c-brand-soft);
+  color: var(--vp-c-brand);
+}
+.source-badge.karrot {
+  background: var(--vp-c-warning-soft);
+  color: var(--vp-c-warning);
+}
+.extension-meta {
+  margin-bottom: 1rem;
+  transition: opacity 0.6s cubic-bezier(.4, 0, .2, 1);
+}
+.extension-description {
+  margin-bottom: .5rem;
+  color: #fff;
+  font-size: .9rem;
+  line-height: 1.4;
+  display: -webkit-box;
+  line-clamp: 2;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.content-rating {
+  margin-bottom: .5rem;
+}
+.rating-badge {
+  display: inline-block;
+  padding: .05rem .25rem;
+  border-radius: 6px;
+  font-size: .7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+.header-badges {
+  display: flex;
+  gap: .5rem;
+  margin-top: .25rem;
+  align-items: center;
+}
+.version-badge {
+  display: inline-block;
+  padding: .05rem .3rem;
+  border-radius: 6px;
+  font-size: .7rem;
+  font-weight: 500;
+  background: var(--vp-c-bg-soft);
+  color: var(--vp-c-text-2);
+  border: 1px solid var(--vp-c-border);
+}
+.extension-badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: .25rem;
+  margin-bottom: .5rem;
+}
+.genre-badge {
+  padding: .1rem .3rem;
+  border-radius: 8px;
+  font-size: .65rem;
+  font-weight: 500;
+  white-space: nowrap;
+}
+.extension-language {
+  margin-bottom: .5rem;
+}
+.language-badge {
+  padding: .1rem .3rem;
+  border-radius: 8px;
+  font-size: .65rem;
+  font-weight: 500;
+  background: var(--vp-c-bg);
+  color: var(--vp-c-text-2);
+  border: 1px solid var(--vp-c-border);
+}
+.extension-actions {
+  display: flex;
+  gap: .5rem;
+  margin-top: auto;
+  transition: opacity 0.6s cubic-bezier(.4, 0, .2, 1);
+}
+.details-btn {
+  padding: .75rem 1rem;
+  border-radius: 4px;
+  text-decoration: none;
+  font-size: .9rem;
+  font-weight: 500;
+  transition: all 0.2s ease;
+  display: inline-block;
+  text-align: center;
+  flex: 1;
+  background: #fff0;
+  color: var(--vp-c-text-2);
+  border: 1px solid var(--vp-c-border);
+  cursor: pointer;
+  min-height: 44px;
+}
+.details-btn:hover {
+  background: var(--vp-c-bg-soft);
+  border-color: var(--vp-c-text-2);
+  color: var(--vp-c-text-1);
+}
+.details-btn:active {
+  background: var(--vp-c-bg);
+  transform: scale(.98);
+}
+.selected-indicator {
+  margin-top: .5rem;
+  padding: .5rem;
+  background: var(--vp-c-brand-soft);
+  border-radius: 4px;
+  text-align: center;
+}
+.selected-checkmark {
+  color: var(--vp-c-brand);
+  font-weight: 600;
+  font-size: .9rem;
+}
+.floating-install-btn {
+  position: fixed;
+  bottom: 2rem;
+  right: 2rem;
+  z-index: 100;
+}
+.install-selected-btn {
+  display: flex;
+  align-items: center;
+  gap: .75rem;
+  padding: 1rem 1.5rem;
+  background: var(--vp-c-brand);
+  color: #fff;
+  border: none;
+  border-radius: 50px;
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  box-shadow: 0 4px 12px rgb(0 0 0 / .2);
+  transition: all 0.3s ease;
+  min-height: 48px;
+  min-width: 48px;
+}
+.install-selected-btn:hover {
+  background: var(--vp-c-brand-dark);
+  box-shadow: 0 6px 16px rgb(0 0 0 / .3);
+}
+.install-selected-btn:active {
+  transform: scale(.95);
+  box-shadow: 0 2px 8px rgb(0 0 0 / .2);
+}
+.selected-count {
+  background: rgb(255 255 255 / .25);
+  padding: .25rem .6rem;
+  border-radius: 50px;
+  font-size: .9rem;
+}
+.no-results {
+  text-align: center;
+  padding: 3rem 1rem;
+  color: var(--vp-c-text-2);
+}
+.no-results-icon {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+}
+.no-results h3 {
+  margin: 0 0 .5rem 0;
+  color: var(--vp-c-text-1);
+}
+.no-results p {
+  margin: 0 0 1.5rem 0;
+}
+.clear-search-btn {
+  padding: .75rem 1rem;
+  background: var(--vp-c-brand);
+  color: #fff;
+  border: 1px solid var(--vp-c-brand);
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: .9rem;
+  transition: all 0.2s ease;
+  min-height: 44px;
+}
+.clear-search-btn:hover {
+  background: var(--vp-c-brand-dark);
+  border-color: var(--vp-c-brand-dark);
+}
+.clear-search-btn:active {
+  transform: scale(.98);
+}
+.stats {
+  margin-top: 2rem;
+  padding: 1rem;
+  background: var(--vp-c-bg-soft);
+  border-radius: 8px;
+  text-align: center;
+  color: var(--vp-c-text-2);
+  font-size: .9rem;
+}
+@media (max-width:1200px) {
+  .extensions-grid {
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 1.25rem;
+}
+}@media (max-width:1024px) {
+  .extensions-grid {
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: 1rem;
+}
+}@media (max-width:768px) {
+  .search-section {
+  padding: 1rem;
+}
+.filter-section {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: .75rem;
+}
+.nsfw-toggle {
+  margin-top: .25rem;
+}
+.results-summary {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: .5rem;
+}
+.extensions-grid {
+  grid-template-columns: repeat(2, 1fr);
+  gap: .75rem;
+}
+.extension-card {
+  padding: 1rem;
+}
+.extension-card.nsfw-blur {
+  min-height: 160px;
+}
+.extension-header {
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: .5rem;
+}
+.extension-icon {
+  width: 48px;
+  height: 48px;
+}
+.extension-header-text {
+  align-items: center;
+}
+.extension-name {
+  font-size: .9rem;
+}
+.source-badge {
+  font-size: .65rem;
+  padding: .2rem .4rem;
+}
+.extension-badges {
+  justify-content: center;
+}
+.genre-badge {
+  font-size: .6rem;
+  padding: .1rem .25rem;
+  border-radius: 10px;
+}
+.rating-badge {
+  font-size: .65rem;
+  padding: .1rem .25rem;
+  border-radius: 8px;
+}
+.extension-actions {
+  margin-top: auto;
+}
+.details-btn {
+  font-size: .8rem;
+  padding: .4rem .75rem;
+  min-height: 40px;
+}
+.floating-install-btn {
+  bottom: 1.5rem;
+  right: 1.5rem;
+  left: 1.5rem;
+  width: calc(100vw - 3rem);
+  max-width: none;
+}
+.install-selected-btn {
+  padding: 1rem 1.5rem;
+  font-size: .95rem;
+  min-height: 48px;
+  width: 100%;
+  justify-content: center;
+}
+}@media (max-width:480px) {
+  .extensions-grid {
+  grid-template-columns: 1fr;
+  gap: .5rem;
+}
+.extension-card {
+  padding: .75rem;
+}
+.extension-icon {
+  width: 40px;
+  height: 40px;
+}
+.extension-name {
+  font-size: .85rem;
+}
+.details-btn {
+  font-size: .75rem;
+  padding: .35rem .6rem;
+}
+}.details-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgb(0 0 0 / .5);
+  backdrop-filter: blur(4px);
+  z-index: 1000;
+}
+.details-overlay.desktop {
+  background: rgb(0 0 0 / .3);
+}
+.details-container {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  max-height: 80vh;
+  background: var(--vp-c-bg);
+  border-radius: 20px 20px 0 0;
+  box-shadow: 0 -4px 20px rgb(0 0 0 / .3);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+.details-container.desktop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: auto;
+  width: 400px;
+  max-width: 90vw;
+  max-height: 100vh;
+  border-radius: 0;
+  border-left: 1px solid var(--vp-c-border);
+}
+.details-handle {
+  display: flex;
+  justify-content: center;
+  padding: 12px;
+  border-bottom: 1px solid var(--vp-c-border);
+}
+.handle-bar {
+  width: 40px;
+  height: 4px;
+  background: var(--vp-c-border);
+  border-radius: 2px;
+}
+.details-close-btn {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  background: none;
+  border: none;
+  color: var(--vp-c-text-2);
+  cursor: pointer;
+  padding: 12px;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+  z-index: 10;
+  min-width: 44px;
+  min-height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.details-close-btn:hover {
+  background: var(--vp-c-bg-soft);
+  color: var(--vp-c-text-1);
+}
+.details-close-btn:active {
+  background: var(--vp-c-bg);
+  transform: scale(.95);
+}
+.details-content {
+  padding: 1.5rem;
+  padding-bottom: 2rem;
+}
+.details-content.desktop {
+  padding: 2rem;
+  padding-top: 3rem;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.details-header {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+.details-icon {
+  width: 64px;
+  height: 64px;
+  border-radius: 16px;
+  object-fit: cover;
+  flex-shrink: 0;
+  box-shadow: 0 2px 8px rgb(0 0 0 / .1);
+}
+.details-header-text {
+  flex: 1;
+}
+.details-title {
+  margin: 0 0 .5rem 0;
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+}
+.details-source-badge {
+  padding: .25rem .75rem;
+  border-radius: 6px;
+  font-size: .8rem;
+  font-weight: 500;
+  text-transform: uppercase;
+}
+.details-source-badge.inkdex {
+  background: var(--vp-c-brand-soft);
+  color: var(--vp-c-brand);
+}
+.details-source-badge.karrot {
+  background: var(--vp-c-warning-soft);
+  color: var(--vp-c-warning);
+}
+.details-meta {
+  display: grid;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+.details-section h3 {
+  margin: 0 0 .5rem 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+}
+.details-rating-badge {
+  padding: .5rem 1rem;
+  border-radius: 8px;
+  font-size: .9rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  display: inline-block;
+}
+.details-language-badge, .details-version-badge {
+  padding: .25rem .75rem;
+  border-radius: 6px;
+  font-size: .9rem;
+  background: var(--vp-c-bg-soft);
+  color: var(--vp-c-text-2);
+  border: 1px solid var(--vp-c-border);
+  display: inline-block;
+}
+.details-badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: .5rem;
+}
+.details-genre-badge {
+  padding: .2rem .6rem;
+  border-radius: 8px;
+  font-size: .75rem;
+  font-weight: 500;
+  white-space: nowrap;
+}
+.details-developers {
+  display: flex;
+  flex-direction: column;
+  gap: .75rem;
+}
+.details-developer {
+  display: flex;
+  align-items: center;
+  gap: .75rem;
+  flex-wrap: wrap;
+}
+.dev-name {
+  font-weight: 500;
+  color: var(--vp-c-text-1);
+}
+.dev-link {
+  font-size: .8rem;
+  color: var(--vp-c-brand);
+  text-decoration: none;
+  padding: .2rem .5rem;
+  border-radius: 4px;
+  background: var(--vp-c-brand-soft);
+  transition: all 0.2s ease;
+}
+.dev-link:hover {
+  background: var(--vp-c-brand);
+  color: #fff;
+}
+.details-description {
+  margin-bottom: 2rem;
+  padding: 1rem;
+  background: var(--vp-c-bg-soft);
+  border-radius: 8px;
+  border: 1px solid var(--vp-c-border);
+}
+.details-description h3 {
+  margin: 0 0 .75rem 0;
+  font-size: 1.1rem;
+  color: var(--vp-c-text-1);
+}
+.details-description p {
+  margin: 0;
+  color: var(--vp-c-text-2);
+  line-height: 1.6;
+}
+.details-actions {
+  display: flex;
+  justify-content: center;
+  padding-top: 1rem;
+  border-top: 1px solid var(--vp-c-border);
+  margin-top: auto;
+}
+.details-install-btn {
+  padding: 1rem 2rem;
+  background: var(--vp-c-brand);
+  color: #fff;
+  border: none;
+  border-radius: 50px;
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  box-shadow: 0 4px 12px rgb(0 0 0 / .2);
+  transition: all 0.3s ease;
+  min-height: 48px;
+  width: 100%;
+  max-width: 300px;
+}
+.details-install-btn:hover {
+  background: var(--vp-c-brand-dark);
+  box-shadow: 0 4px 12px rgb(0 0 0 / .2);
+}
+.details-install-btn:active {
+  transform: scale(.98);
+  box-shadow: 0 2px 8px rgb(0 0 0 / .2);
+}
+@media (max-width:767px) {
+  .details-container.desktop {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  top: auto;
+  width: auto;
+  max-width: none;
+  max-height: 80vh;
+  border-radius: 20px 20px 0 0;
+  border-left: none;
+}
+.details-content.desktop {
+  padding: 1.5rem;
+  padding-bottom: 2rem;
+  padding-top: 1.5rem;
+  height: auto;
+  display: block;
+}
+.details-close-btn {
+  display: none;
+}
+.details-handle {
+  display: flex;
+}
+.details-install-btn {
+  padding: 1rem 1.5rem;
+  font-size: .95rem;
+  min-height: 48px;
+  max-width: none;
+}
+}@media (max-width:360px) {
+  .extensions-grid {
+  grid-template-columns: 1fr;
+  gap: .5rem;
+}
+.extension-card {
+  padding: .5rem;
+}
+.extension-card.nsfw-blur {
+  min-height: 140px;
+}
+.extension-icon {
+  width: 36px;
+  height: 36px;
+}
+.extension-name {
+  font-size: .8rem;
+}
+.search-section {
+  padding: .75rem;
+}
+.search-input {
+  font-size: .9rem;
+  padding: .6rem .8rem;
+}
+.clear-btn {
+  min-width: 40px;
+  min-height: 40px;
+  padding: .5rem;
+}
+.rating-filter {
+  font-size: .85rem;
+  padding: .6rem .5rem;
+  min-height: 40px;
+}
+.nsfw-label {
+  font-size: .85rem;
+}
+.nsfw-checkbox {
+  width: 16px;
+  height: 16px;
+}
+.details-btn {
+  font-size: .7rem;
+  padding: .3rem .5rem;
+  min-height: 36px;
+}
+.floating-install-btn {
+  bottom: 1rem;
+  left: 1rem;
+  right: 1rem;
+  width: calc(100vw - 2rem);
+}
+.install-selected-btn {
+  font-size: .9rem;
+  padding: .8rem 1rem;
+  min-height: 44px;
+}
+}.repo-manager-section {
+  margin-bottom: 2rem;
+}
+.repo-manager-toggle {
+  background: var(--vp-c-brand);
+  color: #fff;
+  border: 1px solid var(--vp-c-brand);
+  border-radius: 4px;
+  padding: .4rem .8rem;
+  cursor: pointer;
+  font-size: .8rem;
+  transition: all 0.2s ease;
+  min-height: 40px;
+}
+.repo-manager-toggle:hover {
+  background: var(--vp-c-brand-dark);
+  border-color: var(--vp-c-brand-dark);
+}
+.repo-manager-toggle:active {
+  transform: scale(.98);
+}
+.repo-manager {
+  background: #18181b;
+  border: 1px solid var(--vp-c-border);
+  border-radius: 8px;
+  padding: 1.5rem;
+  margin-top: 1rem;
+}
+.repo-manager h3 {
+  margin: 0 0 1rem 0;
+  color: #fff;
+  font-size: 1.1rem;
+}
+.add-repo-form {
+  display: flex;
+  gap: .5rem;
+  margin-bottom: 1rem;
+  flex-wrap: wrap;
+}
+.repo-input {
+  flex: 1;
+  min-width: 150px;
+  padding: .75rem;
+  border: 1px solid var(--vp-c-border);
+  border-radius: 4px;
+  background: #18181b;
+  color: #fff;
+  font-size: .9rem;
+}
+.repo-input:focus {
+  outline: none;
+  border-color: var(--vp-c-brand);
+}
+.add-repo-btn {
+  background: var(--vp-c-success);
+  color: #fff;
+  border: 1px solid var(--vp-c-success);
+  border-radius: 4px;
+  padding: .75rem 1rem;
+  cursor: pointer;
+  font-size: .9rem;
+  transition: all 0.2s ease;
+  min-height: 44px;
+}
+.add-repo-btn:hover {
+  background: var(--vp-c-success-dark);
+  border-color: var(--vp-c-success-dark);
+}
+.add-repo-btn:active {
+  transform: scale(.98);
+}
+.custom-repos-list {
+  display: flex;
+  flex-direction: column;
+  gap: .5rem;
+}
+.custom-repo-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem;
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-border);
+  border-radius: 4px;
+}
+.repo-display-name {
+  color: var(--vp-c-text-1);
+  font-weight: 500;
+}
+.remove-repo-btn {
+  background: var(--vp-c-danger);
+  color: #fff;
+  border: 1px solid var(--vp-c-danger);
+  border-radius: 4px;
+  padding: .5rem 1rem;
+  cursor: pointer;
+  font-size: .8rem;
+  transition: all 0.2s ease;
+}
+.remove-repo-btn:hover {
+  background: var(--vp-c-danger-dark);
+  border-color: var(--vp-c-danger-dark);
+}
+.remove-repo-btn:active {
+  transform: scale(.98);
+}
+.no-custom-repos {
+  text-align: center;
+  color: var(--vp-c-text-2);
+  font-style: italic;
+  padding: 1rem;
+}
+.advanced-filters {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
+  opacity: 0;
+  padding: 0;
+  border-top: 0 solid var(--vp-c-border);
+}
+.advanced-filters.expanded {
+  max-height: 500px;
+  opacity: 1;
+  padding-top: 1rem;
+  border-top: 1px solid var(--vp-c-border);
+  margin-top: 1rem;
+}
+.filter-group {
+  margin-bottom: 1rem;
+}
+.filter-group:last-of-type {
+  margin-bottom: .5rem;
+}
+.filter-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: .5rem;
+}
+.filter-label {
+  font-size: .85rem;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+  text-transform: uppercase;
+  letter-spacing: .025em;
+}
+.clear-filter-btn {
+  background: none;
+  border: none;
+  color: var(--vp-c-text-2);
+  font-size: .75rem;
+  cursor: pointer;
+  padding: .2rem .5rem;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+}
+.clear-filter-btn:hover {
+  background: var(--vp-c-bg-soft);
+  color: var(--vp-c-text-1);
+}
+.filter-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: .4rem;
+}
+.filter-chip {
+  padding: .35rem .7rem;
+  background: var(--vp-c-bg-soft);
+  border: 1px solid #fff0;
+  border-radius: 20px;
+  color: var(--vp-c-text-2);
+  font-size: .8rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+}
+.filter-chip:hover {
+  background: var(--vp-c-bg);
+  border-color: var(--vp-c-border);
+  color: var(--vp-c-text-1);
+}
+.filter-chip.active {
+  background: var(--vp-c-brand);
+  color: #fff;
+  border-color: var(--vp-c-brand);
+}
+.filter-actions {
+  display: flex;
+  justify-content: flex-end;
+  padding-top: .75rem;
+  border-top: 1px solid var(--vp-c-border);
+  margin-top: .75rem;
+}
+.clear-all-btn {
+  background: none;
+  border: 1px solid var(--vp-c-border);
+  color: var(--vp-c-text-2);
+  font-size: .8rem;
+  padding: .5rem 1rem;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+.clear-all-btn:hover {
+  background: var(--vp-c-danger-soft);
+  border-color: var(--vp-c-danger);
+  color: var(--vp-c-danger);
+}
+.filter-tag.language-tag {
+  background: var(--vp-c-indigo-soft);
+  color: var(--vp-c-indigo-1);
+}
+.filter-tag.genre-tag {
+  background: var(--vp-c-purple-soft);
+  color: var(--vp-c-purple-1);
+}
+.filter-tag.source-tag {
+  background: var(--vp-c-green-soft);
+  color: var(--vp-c-green-1);
+}
+.filter-tag.rating-tag {
+  background: var(--vp-c-yellow-soft);
+  color: var(--vp-c-yellow-1);
+}
+.filter-tag.rating-tag.rating-safe {
+  background: var(--vp-c-green-soft);
+  color: var(--vp-c-green-1);
+}
+.filter-tag.rating-tag.rating-mature {
+  background: var(--vp-c-yellow-soft);
+  color: var(--vp-c-yellow-1);
+}
+.filter-tag.rating-tag.rating-adult {
+  background: var(--vp-c-red-soft);
+  color: var(--vp-c-red-1);
+}
+.filter-chip.rating-safe.active {
+  background: var(--vp-c-green-soft);
+  color: var(--vp-c-green-1);
+  border-color: var(--vp-c-green-2);
+}
+.filter-chip.rating-mature.active {
+  background: var(--vp-c-yellow-soft);
+  color: var(--vp-c-yellow-1);
+  border-color: var(--vp-c-yellow-2);
+}
+.filter-chip.rating-adult.active {
+  background: var(--vp-c-red-soft);
+  color: var(--vp-c-red-1);
+  border-color: var(--vp-c-red-2);
+}
+.repos-section {
+  border-top-color: var(--vp-c-border);
+}
+.add-repo-inline {
+  display: flex;
+  gap: .5rem;
+}
+.repo-input-inline {
+  flex: 1;
+  padding: .5rem .75rem;
+  background: var(--vp-c-bg-soft);
+  border: 1px solid #fff0;
+  border-radius: 8px;
+  color: var(--vp-c-text-1);
+  font-size: .85rem;
+  transition: all 0.2s ease;
+}
+.repo-input-inline:focus {
+  outline: none;
+  border-color: var(--vp-c-brand);
+  background: var(--vp-c-bg);
+}
+.repo-input-inline::placeholder {
+  color: var(--vp-c-text-3);
+}
+.add-repo-btn-inline {
+  padding: .5rem 1rem;
+  background: var(--vp-c-brand);
+  border: none;
+  border-radius: 8px;
+  color: #fff;
+  font-size: .85rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+}
+.add-repo-btn-inline:hover {
+  background: var(--vp-c-brand-dark);
+}
+.add-repo-btn-inline:disabled {
+  opacity: .6;
+  cursor: not-allowed;
+}
+.repo-chip {
+  display: flex;
+  align-items: center;
+  gap: .4rem;
+  padding: .35rem .5rem .35rem .75rem;
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-border);
+  border-radius: 20px;
+  color: var(--vp-c-text-1);
+  font-size: .8rem;
+}
+.repo-chip-name {
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.repo-chip-remove {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  background: #fff0;
+  border: none;
+  border-radius: 50%;
+  color: var(--vp-c-text-2);
+  font-size: .7rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+.repo-chip-remove:hover {
+  background: var(--vp-c-danger-soft);
+  color: var(--vp-c-danger);
+}
+.no-repos-hint {
+  padding: .75rem;
+  text-align: center;
+  color: var(--vp-c-text-3);
+  font-size: .85rem;
+  font-style: italic;
+}
+.extension-search-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgb(0 0 0 / .6);
+  backdrop-filter: blur(4px);
+  z-index: 9999;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 10vh;
+}
+.extension-search-modal {
+  width: 100%;
+  max-width: 600px;
+  margin: 0 1rem;
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-border);
+  border-radius: 12px;
+  box-shadow: 0 25px 50px -12px rgb(0 0 0 / .5);
+  overflow: hidden;
+}
+.search-header {
+  padding: 1rem;
+  border-bottom: 1px solid var(--vp-c-border);
+}
+.search-input-wrapper {
+  display: flex;
+  align-items: center;
+  gap: .75rem;
+}
+.search-icon {
+  color: var(--vp-c-text-2);
+  flex-shrink: 0;
+}
+.search-input {
+  flex: 1;
+  background: #fff0;
+  border: none;
+  font-size: 1.1rem;
+  color: var(--vp-c-text-1);
+  outline: none;
+}
+.search-input::placeholder {
+  color: var(--vp-c-text-3);
+}
+.search-kbd {
+  padding: .2rem .5rem;
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-border);
+  border-radius: 4px;
+  font-size: .75rem;
+  color: var(--vp-c-text-2);
+  font-family: inherit;
+}
+.search-results {
+  max-height: 400px;
+  overflow-y: auto;
+}
+.search-loading, .search-empty, .search-hint {
+  padding: 2rem;
+  text-align: center;
+  color: var(--vp-c-text-2);
+}
+.search-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: .75rem;
+}
+.spinner {
+  width: 20px;
+  height: 20px;
+  border: 2px solid var(--vp-c-bg-soft);
+  border-top-color: var(--vp-c-brand);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+@keyframes spin {
+  to {
+  transform: rotate(360deg);
+}
+}.results-list {
+  padding: .5rem;
+}
+.result-item {
+  display: flex;
+  align-items: center;
+  gap: .75rem;
+  width: 100%;
+  padding: .75rem;
+  background: #fff0;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  text-align: left;
+  transition: background 0.15s;
+}
+.result-item:hover, .result-item.selected {
+  background: var(--vp-c-bg-soft);
+}
+.result-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+.result-info {
+  flex: 1;
+  min-width: 0;
+}
+.result-name {
+  font-weight: 500;
+  color: var(--vp-c-text-1);
+  display: flex;
+  align-items: center;
+  gap: .5rem;
+}
+.result-rating {
+  font-size: .7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  display: inline-block;
+  padding: .05rem .25rem;
+  border-radius: 6px;
+}
+.result-description {
+  font-size: .85rem;
+  color: var(--vp-c-text-2);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.result-source {
+  font-size: .75rem;
+  color: var(--vp-c-text-3);
+  text-transform: uppercase;
+  flex-shrink: 0;
+}
+.search-footer {
+  padding: .75rem 1rem;
+  border-top: 1px solid var(--vp-c-border);
+  background: var(--vp-c-bg-soft);
+}
+.footer-hint {
+  display: flex;
+  gap: .5rem;
+  align-items: center;
+  justify-content: center;
+  font-size: .8rem;
+  color: var(--vp-c-text-2);
+}
+.footer-hint kbd {
+  padding: .15rem .4rem;
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-border);
+  border-radius: 4px;
+  font-size: .7rem;
+  font-family: inherit;
+}
+.modal-enter-active, .modal-leave-active {
+  transition: opacity 0.2s ease;
+}
+.modal-enter-active .extension-search-modal, .modal-leave-active .extension-search-modal {
+  transition: transform 0.2s ease, opacity 0.2s ease;
+}
+.modal-enter-from, .modal-leave-to {
+  opacity: 0;
+}
+.modal-enter-from .extension-search-modal, .modal-leave-to .extension-search-modal {
+  transform: scale(.95);
+  opacity: 0;
+}
+@media (max-width:768px) {
+  .extension-header {
+  flex-direction: row;
+  align-items: center;
+  text-align: left;
+  gap: .75rem;
+}
+.extension-header-text {
+  align-items: flex-start;
+}
+.extension-badges {
+  justify-content: flex-start;
+}
+}
diff --git a/src/.vitepress/theme/components/ExtensionList.vue b/src/.vitepress/theme/components/ExtensionList.vue
new file mode 100644
index 0000000..2547c7a
--- /dev/null
+++ b/src/.vitepress/theme/components/ExtensionList.vue
@@ -0,0 +1,800 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from "vue";
+import ExtensionDetails from "./ExtensionDetails.vue";
+import "./ExtensionList.css";
+import {
+  buildBaseUrl,
+  getContentRatingBg,
+  getContentRatingColor,
+  saveCustomRepos as saveRepos,
+  useExtensions,
+  type Extension,
+} from "../lib/extensions";
+
+const {
+  extensions,
+  loading,
+  error,
+  customRepos,
+  loadRepos,
+  fetchAllExtensions,
+  addCustomRepo: addRepo,
+  removeCustomRepo: removeRepo,
+} = useExtensions();
+
+const searchQuery = ref("");
+const selectedRatings = ref<Set<string>>(new Set());
+const selectedExtensions = ref<Set<string>>(new Set());
+const selectedExtension = ref<Extension | null>(null);
+const showDetails = ref(false);
+const showRepoManager = ref(false);
+const newRepoUrl = ref("");
+const selectedSources = ref<Set<string>>(new Set());
+const checkingRepo = ref(false);
+const selectedLanguages = ref<Set<string>>(new Set());
+const selectedGenres = ref<Set<string>>(new Set());
+const filtersExpanded = ref(false);
+
+const availableRatings = ["SAFE", "MATURE", "ADULT"];
+
+const showNSFW = computed(() => {
+  return (
+    selectedRatings.value.has("MATURE") || selectedRatings.value.has("ADULT")
+  );
+});
+
+const availableSources = computed(() => {
+  const sources = ["inkdex"];
+  customRepos.value.forEach((repo) => {
+    sources.push(repo.id);
+  });
+  return sources;
+});
+
+const getSourceDisplayName = (sourceId: string) => {
+  if (sourceId === "inkdex") return "Inkdex";
+  const repo = customRepos.value.find((r) => r.id === sourceId);
+  return repo?.displayName || sourceId;
+};
+
+const availableLanguages = computed(() => {
+  const languages = new Set<string>();
+  extensions.value.forEach((ext) => {
+    if (ext.metadata?.language) {
+      languages.add(ext.metadata.language);
+    }
+  });
+  return Array.from(languages).sort();
+});
+
+const availableGenres = computed(() => {
+  const genres = new Set<string>();
+  extensions.value.forEach((ext) => {
+    if (ext.metadata?.badges) {
+      ext.metadata.badges.forEach((badge) => {
+        genres.add(badge.label);
+      });
+    }
+  });
+  return Array.from(genres).sort();
+});
+
+const filteredExtensions = computed(() => {
+  return extensions.value.filter((extension) => {
+    const matchesSearch =
+      searchQuery.value === "" ||
+      extension.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
+      extension.source
+        .toLowerCase()
+        .includes(searchQuery.value.toLowerCase()) ||
+      (extension.metadata?.description &&
+        extension.metadata.description
+          .toLowerCase()
+          .includes(searchQuery.value.toLowerCase())) ||
+      (extension.metadata?.badges &&
+        extension.metadata.badges.some((badge) =>
+          badge.label.toLowerCase().includes(searchQuery.value.toLowerCase()),
+        ));
+
+    const matchesRating =
+      selectedRatings.value.size === 0 ||
+      (extension.metadata?.contentRating &&
+        selectedRatings.value.has(extension.metadata.contentRating));
+
+    const matchesSource =
+      selectedSources.value.size === 0 ||
+      selectedSources.value.has(extension.source);
+
+    const matchesLanguage =
+      selectedLanguages.value.size === 0 ||
+      (extension.metadata?.language &&
+        selectedLanguages.value.has(extension.metadata.language));
+
+    const matchesGenre =
+      selectedGenres.value.size === 0 ||
+      (extension.metadata?.badges &&
+        extension.metadata.badges.some((badge) =>
+          selectedGenres.value.has(badge.label),
+        ));
+
+    return (
+      matchesSearch &&
+      matchesRating &&
+      matchesSource &&
+      matchesLanguage &&
+      matchesGenre
+    );
+  });
+});
+
+const toggleLanguage = (language: string) => {
+  if (selectedLanguages.value.has(language)) {
+    selectedLanguages.value.delete(language);
+  } else {
+    selectedLanguages.value.add(language);
+  }
+  selectedLanguages.value = new Set(selectedLanguages.value);
+};
+
+const toggleGenre = (genre: string) => {
+  if (selectedGenres.value.has(genre)) {
+    selectedGenres.value.delete(genre);
+  } else {
+    selectedGenres.value.add(genre);
+  }
+  selectedGenres.value = new Set(selectedGenres.value);
+};
+
+const toggleSource = (source: string) => {
+  if (selectedSources.value.has(source)) {
+    selectedSources.value.delete(source);
+  } else {
+    selectedSources.value.add(source);
+  }
+  selectedSources.value = new Set(selectedSources.value);
+};
+
+const toggleRating = (rating: string) => {
+  if (selectedRatings.value.has(rating)) {
+    selectedRatings.value.delete(rating);
+  } else {
+    selectedRatings.value.add(rating);
+  }
+  selectedRatings.value = new Set(selectedRatings.value);
+};
+
+const clearAllFilters = () => {
+  selectedLanguages.value = new Set();
+  selectedGenres.value = new Set();
+  selectedSources.value = new Set();
+  selectedRatings.value = new Set();
+};
+
+const clearSearch = () => {
+  searchQuery.value = "";
+  selectedRatings.value = new Set();
+  selectedSources.value = new Set();
+  selectedLanguages.value = new Set();
+  selectedGenres.value = new Set();
+};
+
+const toggleExtension = (extension: Extension) => {
+  const key = `${extension.source}-${extension.name}`;
+  if (selectedExtensions.value.has(key)) {
+    selectedExtensions.value.delete(key);
+  } else {
+    selectedExtensions.value.add(key);
+  }
+};
+
+const getBaseUrl = (source: string) => {
+  if (source === "inkdex") {
+    return "https://raw.githubusercontent.com/inkdex/extensions/master/0.9/stable";
+  }
+  const repo = customRepos.value.find((r) => r.id === source);
+  if (repo) {
+    return buildBaseUrl(repo);
+  }
+  return "";
+};
+
+const installSelectedExtensions = () => {
+  if (selectedExtensions.value.size === 0) {
+    alert("Please select at least one extension");
+    return;
+  }
+
+  const extensionsToInstall = Array.from(selectedExtensions.value)
+    .map((key) => {
+      const extension = extensions.value.find(
+        (ext) => `${ext.source}-${ext.name}` === key,
+      );
+      if (!extension) return null;
+      return [extension.name, getBaseUrl(extension.source)];
+    })
+    .filter(Boolean);
+
+  const installUrl = `paperback://installExtensions?data=${btoa(JSON.stringify(extensionsToInstall))}`;
+  window.location.href = installUrl;
+};
+
+const installExtension = (extension: Extension) => {
+  const extensionToInstall = [extension.name, getBaseUrl(extension.source)];
+  const installUrl = `paperback://installExtensions?data=${btoa(JSON.stringify([extensionToInstall]))}`;
+  window.location.href = installUrl;
+};
+
+const showExtensionDetails = (extension: Extension) => {
+  selectedExtension.value = extension;
+  showDetails.value = true;
+};
+
+const hideExtensionDetails = () => {
+  showDetails.value = false;
+  selectedExtension.value = null;
+};
+
+const addCustomRepo = async () => {
+  if (!newRepoUrl.value.trim()) {
+    alert("Please enter a repository URL");
+    return;
+  }
+
+  checkingRepo.value = true;
+
+  try {
+    const result = await addRepo(newRepoUrl.value);
+
+    if (!result.success) {
+      alert(result.error);
+      return;
+    }
+
+    newRepoUrl.value = "";
+    loading.value = true;
+    await fetchAllExtensions();
+  } catch (e) {
+    alert("An error occurred while adding the repository");
+    console.error(e);
+  } finally {
+    checkingRepo.value = false;
+  }
+};
+
+const removeCustomRepo = async (repoId: string) => {
+  removeRepo(repoId);
+  loading.value = true;
+  await fetchAllExtensions();
+};
+
+const handleAddRepoFromUrl = async () => {
+  if (typeof window === "undefined") return;
+
+  const urlParams = new URLSearchParams(window.location.search);
+  const repoParam = urlParams.get("add-repo");
+
+  if (repoParam) {
+    const repoUrl = decodeURIComponent(repoParam);
+
+    checkingRepo.value = true;
+    const result = await addRepo(repoUrl);
+    checkingRepo.value = false;
+
+    if (result.success) {
+      await fetchAllExtensions();
+    }
+
+    urlParams.delete("add-repo");
+    const newUrl = urlParams.toString()
+      ? `${window.location.pathname}?${urlParams.toString()}`
+      : window.location.pathname;
+    window.history.replaceState({}, "", newUrl);
+  }
+};
+
+onMounted(async () => {
+  loadRepos();
+  await fetchAllExtensions();
+
+  const urlParams = new URLSearchParams(window.location.search);
+  const searchParam = urlParams.get("search");
+  if (searchParam) {
+    searchQuery.value = searchParam;
+  }
+
+  await handleAddRepoFromUrl();
+});
+</script>
+
+<template>
+  <div class="extension-list">
+    <div v-if="loading" class="loading">
+      <div class="spinner" />
+      Loading extensions...
+    </div>
+
+    <div v-else-if="error" class="error">
+      Error loading extensions: {{ error }}
+    </div>
+
+    <div v-else>
+      <!-- Search and Filter Section -->
+      <div class="search-section">
+        <div class="search-bar">
+          <div class="search-input-container">
+            <span class="search-icon">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="18"
+                height="18"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <circle cx="11" cy="11" r="8" />
+                <line x1="21" y1="21" x2="16.65" y2="16.65" />
+              </svg>
+            </span>
+            <input
+              v-model="searchQuery"
+              type="text"
+              placeholder="Search extensions..."
+              class="search-input"
+            />
+            <span
+              v-if="
+                !searchQuery &&
+                selectedRatings.size === 0 &&
+                selectedSources.size === 0 &&
+                selectedLanguages.size === 0 &&
+                selectedGenres.size === 0
+              "
+              class="search-shortcut"
+            >
+              <kbd>⌘</kbd><kbd>⇧</kbd><kbd>K</kbd>
+            </span>
+            <button
+              v-if="
+                searchQuery ||
+                selectedRatings.size > 0 ||
+                selectedSources.size > 0 ||
+                selectedLanguages.size > 0 ||
+                selectedGenres.size > 0
+              "
+              class="clear-btn"
+              title="Clear search"
+              @click="clearSearch"
+            >
+              ✕
+            </button>
+          </div>
+        </div>
+
+        <div class="filters-row">
+          <div class="toggles-group">
+            <button
+              class="action-btn"
+              :class="{
+                active:
+                  filtersExpanded ||
+                  selectedSources.size > 0 ||
+                  selectedRatings.size > 0 ||
+                  selectedLanguages.size > 0 ||
+                  selectedGenres.size > 0,
+              }"
+              @click="filtersExpanded = !filtersExpanded"
+            >
+              <span class="btn-text">Filters</span>
+              <span
+                v-if="
+                  selectedSources.size +
+                    selectedRatings.size +
+                    selectedLanguages.size +
+                    selectedGenres.size >
+                  0
+                "
+                class="filter-count"
+                >{{
+                  selectedSources.size +
+                  selectedRatings.size +
+                  selectedLanguages.size +
+                  selectedGenres.size
+                }}</span
+              >
+              <span class="expand-icon" :class="{ expanded: filtersExpanded }"
+                >▼</span
+              >
+            </button>
+
+            <button
+              class="action-btn"
+              :class="{ active: showRepoManager || customRepos.length > 0 }"
+              @click="showRepoManager = !showRepoManager"
+            >
+              <span class="btn-text">Repos</span>
+              <span v-if="customRepos.length > 0" class="filter-count">{{
+                customRepos.length
+              }}</span>
+              <span class="expand-icon" :class="{ expanded: showRepoManager }"
+                >▼</span
+              >
+            </button>
+          </div>
+        </div>
+
+        <!-- Collapsible Filters Section -->
+        <div class="advanced-filters" :class="{ expanded: filtersExpanded }">
+          <div class="filter-group">
+            <div class="filter-header">
+              <span class="filter-label">Content Rating</span>
+              <button
+                v-if="selectedRatings.size > 0"
+                class="clear-filter-btn"
+                @click="selectedRatings = new Set()"
+              >
+                Clear
+              </button>
+            </div>
+            <div class="filter-chips">
+              <button
+                v-for="rating in availableRatings"
+                :key="rating"
+                class="filter-chip"
+                :class="{
+                  active: selectedRatings.has(rating),
+                  'rating-safe': rating === 'SAFE',
+                  'rating-mature': rating === 'MATURE',
+                  'rating-adult': rating === 'ADULT',
+                }"
+                @click="toggleRating(rating)"
+              >
+                {{ rating }}
+              </button>
+            </div>
+          </div>
+
+          <div class="filter-group">
+            <div class="filter-header">
+              <span class="filter-label">Sources</span>
+              <button
+                v-if="selectedSources.size > 0"
+                class="clear-filter-btn"
+                @click="selectedSources = new Set()"
+              >
+                Clear
+              </button>
+            </div>
+            <div class="filter-chips">
+              <button
+                v-for="source in availableSources"
+                :key="source"
+                class="filter-chip"
+                :class="{ active: selectedSources.has(source) }"
+                @click="toggleSource(source)"
+              >
+                {{ getSourceDisplayName(source) }}
+              </button>
+            </div>
+          </div>
+
+          <div class="filter-group">
+            <div class="filter-header">
+              <span class="filter-label">Languages</span>
+              <button
+                v-if="selectedLanguages.size > 0"
+                class="clear-filter-btn"
+                @click="selectedLanguages = new Set()"
+              >
+                Clear
+              </button>
+            </div>
+            <div class="filter-chips">
+              <button
+                v-for="language in availableLanguages"
+                :key="language"
+                class="filter-chip"
+                :class="{ active: selectedLanguages.has(language) }"
+                @click="toggleLanguage(language)"
+              >
+                {{ language }}
+              </button>
+            </div>
+          </div>
+
+          <div class="filter-group">
+            <div class="filter-header">
+              <span class="filter-label">Genres</span>
+              <button
+                v-if="selectedGenres.size > 0"
+                class="clear-filter-btn"
+                @click="selectedGenres = new Set()"
+              >
+                Clear
+              </button>
+            </div>
+            <div class="filter-chips">
+              <button
+                v-for="genre in availableGenres"
+                :key="genre"
+                class="filter-chip"
+                :class="{ active: selectedGenres.has(genre) }"
+                @click="toggleGenre(genre)"
+              >
+                {{ genre }}
+              </button>
+            </div>
+          </div>
+
+          <div
+            v-if="selectedLanguages.size > 0 || selectedGenres.size > 0"
+            class="filter-actions"
+          >
+            <button class="clear-all-btn" @click="clearAllFilters">
+              Clear All Filters
+            </button>
+          </div>
+        </div>
+
+        <!-- Collapsible Repository Manager -->
+        <div
+          class="advanced-filters repos-section"
+          :class="{ expanded: showRepoManager }"
+        >
+          <div class="filter-group">
+            <div class="filter-header">
+              <span class="filter-label">Add Repository</span>
+            </div>
+            <div class="add-repo-inline">
+              <input
+                v-model="newRepoUrl"
+                type="text"
+                placeholder="owner/repo or https://github.com/owner/repo"
+                class="repo-input-inline"
+                @keyup.enter="addCustomRepo"
+              />
+              <button
+                class="add-repo-btn-inline"
+                :disabled="checkingRepo"
+                @click="addCustomRepo"
+              >
+                {{ checkingRepo ? "Adding..." : "Add" }}
+              </button>
+            </div>
+          </div>
+
+          <div v-if="customRepos.length > 0" class="filter-group">
+            <div class="filter-header">
+              <span class="filter-label">Custom Repositories</span>
+              <button
+                v-if="customRepos.length > 0"
+                class="clear-filter-btn"
+                @click="customRepos.forEach((r) => removeCustomRepo(r.id))"
+              >
+                Remove All
+              </button>
+            </div>
+            <div class="filter-chips">
+              <div v-for="repo in customRepos" :key="repo.id" class="repo-chip">
+                <span class="repo-chip-name">{{ repo.displayName }}</span>
+                <button
+                  class="repo-chip-remove"
+                  @click="removeCustomRepo(repo.id)"
+                >
+                  ✕
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <div v-if="customRepos.length === 0" class="no-repos-hint">
+            <span
+              >No custom repositories added. Add a GitHub repository
+              above.</span
+            >
+          </div>
+        </div>
+      </div>
+
+      <!-- Results Summary -->
+      <div class="results-summary">
+        <span class="results-count">
+          Showing {{ filteredExtensions.length }} of
+          {{ extensions.length }} extensions
+        </span>
+        <span
+          v-if="
+            searchQuery ||
+            selectedRatings.size > 0 ||
+            selectedSources.size > 0 ||
+            selectedLanguages.size > 0 ||
+            selectedGenres.size > 0
+          "
+          class="active-filters"
+        >
+          <span v-if="searchQuery" class="filter-tag"
+            >Search: "{{ searchQuery }}"</span
+          >
+          <span
+            v-for="rating in selectedRatings"
+            :key="`rating-${rating}`"
+            class="filter-tag rating-tag"
+            :class="`rating-${rating.toLowerCase()}`"
+            >{{ rating }}</span
+          >
+          <span
+            v-for="source in selectedSources"
+            :key="`source-${source}`"
+            class="filter-tag source-tag"
+            >{{ getSourceDisplayName(source) }}</span
+          >
+          <span
+            v-for="lang in selectedLanguages"
+            :key="`lang-${lang}`"
+            class="filter-tag language-tag"
+            >{{ lang }}</span
+          >
+          <span
+            v-for="genre in selectedGenres"
+            :key="`genre-${genre}`"
+            class="filter-tag genre-tag"
+            >{{ genre }}</span
+          >
+        </span>
+      </div>
+
+      <div class="extensions-grid">
+        <div
+          v-for="extension in filteredExtensions"
+          :key="`${extension.source}-${extension.name}`"
+          class="extension-card"
+          :class="{
+            selected: selectedExtensions.has(
+              `${extension.source}-${extension.name}`,
+            ),
+            'nsfw-blur':
+              !showNSFW &&
+              extension.metadata &&
+              (extension.metadata.contentRating === 'MATURE' ||
+                extension.metadata.contentRating === 'ADULT'),
+          }"
+          :style="
+            !showNSFW &&
+            extension.metadata &&
+            (extension.metadata.contentRating === 'MATURE' ||
+              extension.metadata.contentRating === 'ADULT')
+              ? {
+                  backgroundImage: `url(${extension.iconUrl})`,
+                  backgroundSize: '100% 100%',
+                  backgroundPosition: 'center',
+                  backgroundRepeat: 'no-repeat',
+                }
+              : {}
+          "
+          @click="toggleExtension(extension)"
+        >
+          <div class="extension-header">
+            <img
+              :src="extension.iconUrl"
+              :alt="`${extension.name} icon`"
+              class="extension-icon"
+              loading="lazy"
+              @error="
+                (e) =>
+                  ((e.target as HTMLImageElement).src =
+                    'https://paperback.moe/pb-placeholder.png')
+              "
+            />
+            <div class="extension-header-text">
+              <h3 class="extension-name">
+                {{ extension.name }}
+              </h3>
+              <div v-if="extension.metadata" class="header-badges">
+                <span
+                  class="rating-badge"
+                  :style="{
+                    color: getContentRatingColor(
+                      extension.metadata.contentRating,
+                    ),
+                    backgroundColor: getContentRatingBg(
+                      extension.metadata.contentRating,
+                    ),
+                  }"
+                >
+                  {{ extension.metadata.contentRating }}
+                </span>
+                <span class="version-badge"
+                  >v{{ extension.metadata.version }}</span
+                >
+              </div>
+            </div>
+          </div>
+
+          <div v-if="extension.metadata" class="extension-meta">
+            <div
+              v-if="extension.metadata.description"
+              class="extension-description"
+            >
+              {{ extension.metadata.description }}
+            </div>
+
+            <div
+              v-if="
+                extension.metadata.badges &&
+                extension.metadata.badges.length > 0
+              "
+              class="extension-badges"
+            >
+              <span
+                v-for="badge in extension.metadata.badges.slice(0, 3)"
+                :key="badge.label"
+                class="genre-badge"
+                :style="{
+                  color: badge.textColor,
+                  backgroundColor: badge.backgroundColor,
+                }"
+              >
+                {{ badge.label }}
+              </span>
+            </div>
+
+            <div v-if="extension.metadata.language" class="extension-language">
+              <span class="language-badge">{{
+                extension.metadata.language
+              }}</span>
+            </div>
+          </div>
+
+          <div class="extension-actions" @click.stop>
+            <button
+              class="details-btn"
+              @click="showExtensionDetails(extension)"
+            >
+              Details
+            </button>
+          </div>
+
+          <div
+            v-if="
+              selectedExtensions.has(`${extension.source}-${extension.name}`)
+            "
+            class="selected-indicator"
+          >
+            <span class="selected-checkmark">✓ Selected</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Floating Install Button -->
+      <div v-if="selectedExtensions.size > 0" class="floating-install-btn">
+        <button class="install-selected-btn" @click="installSelectedExtensions">
+          <span>Install Selected</span>
+          <span class="selected-count">{{ selectedExtensions.size }}</span>
+        </button>
+      </div>
+
+      <div v-if="filteredExtensions.length === 0" class="no-results">
+        <div class="no-results-icon">🔍</div>
+        <h3>No sources found</h3>
+        <p>Try adjusting your search terms or filters.</p>
+        <button class="clear-search-btn" @click="clearSearch">
+          Clear Search
+        </button>
+      </div>
+
+      <div v-if="!loading && !error" class="stats">
+        Total sources: {{ extensions.length }}
+      </div>
+    </div>
+
+    <!-- Extension Details Component -->
+    <ExtensionDetails
+      :extension="selectedExtension"
+      :show="showDetails"
+      @hide="hideExtensionDetails"
+      @install="installExtension"
+    />
+  </div>
+</template>
diff --git a/src/.vitepress/theme/components/ExtensionSearch.vue b/src/.vitepress/theme/components/ExtensionSearch.vue
new file mode 100644
index 0000000..40dce22
--- /dev/null
+++ b/src/.vitepress/theme/components/ExtensionSearch.vue
@@ -0,0 +1,223 @@
+<script setup lang="ts">
+import { useRouter } from "vitepress";
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
+import {
+  getContentRatingBg,
+  getContentRatingColor,
+  useExtensions,
+  type Extension,
+} from "../lib/extensions";
+
+const router = useRouter();
+
+const { extensions, loading, loadRepos, fetchAllExtensions } = useExtensions();
+
+const isOpen = ref(false);
+const searchQuery = ref("");
+const selectedIndex = ref(0);
+const searchInputRef = ref<HTMLInputElement | null>(null);
+
+const filteredExtensions = computed(() => {
+  if (!searchQuery.value.trim()) return [];
+
+  const query = searchQuery.value.toLowerCase();
+  return extensions.value
+    .filter((ext) => {
+      return (
+        ext.name.toLowerCase().includes(query) ||
+        ext.metadata?.description?.toLowerCase().includes(query) ||
+        ext.metadata?.badges?.some((b) => b.label.toLowerCase().includes(query))
+      );
+    })
+    .slice(0, 10);
+});
+
+const open = () => {
+  isOpen.value = true;
+  selectedIndex.value = 0;
+  nextTick(() => {
+    searchInputRef.value?.focus();
+  });
+};
+
+const close = () => {
+  isOpen.value = false;
+  searchQuery.value = "";
+  selectedIndex.value = 0;
+};
+
+const selectExtension = (ext: Extension) => {
+  router.go(`/extension-list?search=${encodeURIComponent(ext.name)}`);
+  close();
+};
+
+const handleKeydown = (e: KeyboardEvent) => {
+  if (!isOpen.value) {
+    if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === "K") {
+      e.preventDefault();
+      open();
+    }
+    return;
+  }
+
+  switch (e.key) {
+    case "Escape":
+      e.preventDefault();
+      close();
+      break;
+    case "ArrowDown":
+      e.preventDefault();
+      if (filteredExtensions.value.length > 0) {
+        selectedIndex.value = Math.min(
+          selectedIndex.value + 1,
+          filteredExtensions.value.length - 1,
+        );
+      }
+      break;
+    case "ArrowUp":
+      e.preventDefault();
+      selectedIndex.value = Math.max(selectedIndex.value - 1, 0);
+      break;
+    case "Enter": {
+      e.preventDefault();
+      const selected = filteredExtensions.value[selectedIndex.value];
+      if (selected) {
+        selectExtension(selected);
+      }
+      break;
+    }
+  }
+};
+
+watch(searchQuery, () => {
+  selectedIndex.value = 0;
+});
+
+onMounted(() => {
+  loadRepos();
+  fetchAllExtensions(false);
+  document.addEventListener("keydown", handleKeydown);
+});
+
+onUnmounted(() => {
+  document.removeEventListener("keydown", handleKeydown);
+});
+
+defineExpose({ open });
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="modal">
+      <div v-if="isOpen" class="extension-search-overlay" @click.self="close">
+        <div class="extension-search-modal">
+          <div class="search-header">
+            <div class="search-input-wrapper">
+              <svg
+                class="search-icon"
+                xmlns="http://www.w3.org/2000/svg"
+                width="20"
+                height="20"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <circle cx="11" cy="11" r="8" />
+                <line x1="21" y1="21" x2="16.65" y2="16.65" />
+              </svg>
+              <input
+                ref="searchInputRef"
+                v-model="searchQuery"
+                type="text"
+                placeholder="Search extensions..."
+                class="search-input"
+                @keydown.stop
+              />
+              <kbd class="search-kbd">⇧K</kbd>
+            </div>
+          </div>
+
+          <div class="search-results">
+            <div v-if="loading" class="search-loading">
+              <div class="spinner" />
+              <span>Loading extensions...</span>
+            </div>
+
+            <div
+              v-else-if="searchQuery && filteredExtensions.length === 0"
+              class="search-empty"
+            >
+              <span>No extensions found for "{{ searchQuery }}"</span>
+            </div>
+
+            <div v-else-if="!searchQuery" class="search-hint">
+              <span
+                >Type to search extensions by name, description, or tags</span
+              >
+            </div>
+
+            <div v-else class="results-list">
+              <button
+                v-for="(ext, index) in filteredExtensions"
+                :key="`${ext.source}-${ext.name}`"
+                class="result-item"
+                :class="{ selected: index === selectedIndex }"
+                @click="selectExtension(ext)"
+                @mouseenter="selectedIndex = index"
+              >
+                <img
+                  :src="ext.iconUrl"
+                  :alt="ext.name"
+                  class="result-icon"
+                  @error="
+                    (e) =>
+                      ((e.target as HTMLImageElement).src =
+                        'https://paperback.moe/pb-placeholder.png')
+                  "
+                />
+                <div class="result-info">
+                  <div class="result-name">
+                    {{ ext.metadata?.name || ext.name }}
+                    <span
+                      v-if="ext.metadata?.contentRating"
+                      class="result-rating"
+                      :style="{
+                        color: getContentRatingColor(
+                          ext.metadata.contentRating,
+                        ),
+                        backgroundColor: getContentRatingBg(
+                          ext.metadata.contentRating,
+                        ),
+                      }"
+                    >
+                      {{ ext.metadata.contentRating }}
+                    </span>
+                  </div>
+                  <div
+                    v-if="ext.metadata?.description"
+                    class="result-description"
+                  >
+                    {{ ext.metadata.description }}
+                  </div>
+                </div>
+                <div class="result-source">
+                  {{ ext.source }}
+                </div>
+              </button>
+            </div>
+          </div>
+
+          <div class="search-footer">
+            <div class="footer-hint">
+              <kbd>↑</kbd><kbd>↓</kbd> to navigate <kbd>↵</kbd> to select
+              <kbd>ESC</kbd> to close
+            </div>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
diff --git a/src/.vitepress/theme/index.ts b/src/.vitepress/theme/index.ts
index c94b32f..86304e8 100644
--- a/src/.vitepress/theme/index.ts
+++ b/src/.vitepress/theme/index.ts
@@ -6,18 +6,24 @@ import type { Theme } from "vitepress";
 import DefaultTheme from "vitepress/theme";
 import { h } from "vue";
 import "./style.css";
+import ExtensionList from "./components/ExtensionList.vue";
+import ExtensionSearch from "./components/ExtensionSearch.vue";
 
 export default {
   extends: DefaultTheme,
   Layout: () => {
     return h(DefaultTheme.Layout, null, {
       // https://vitepress.dev/guide/extending-default-theme#layout-slots
+      "layout-bottom": () =>
+        h("ClientOnly", null, {
+          default: () => h(ExtensionSearch),
+        }),
     });
   },
   enhanceApp({ app, router, siteData }) {
     void app;
     void router;
     void siteData;
-    // ...
+    app.component("ExtensionList", ExtensionList);
   },
 } satisfies Theme;
diff --git a/src/.vitepress/theme/lib/extensions.ts b/src/.vitepress/theme/lib/extensions.ts
new file mode 100644
index 0000000..e5758ef
--- /dev/null
+++ b/src/.vitepress/theme/lib/extensions.ts
@@ -0,0 +1,380 @@
+/* SPDX-License-Identifier: GPL-3.0-or-later */
+/* Copyright © 2025 Inkdex */
+
+import { ref } from "vue";
+
+export interface GitHubFile {
+  name: string;
+  path: string;
+  type: "file" | "dir";
+  html_url: string;
+  download_url?: string;
+}
+
+export interface ExtensionMetadata {
+  id: string;
+  name: string;
+  description: string;
+  version: string;
+  icon: string;
+  language: string | null;
+  contentRating: "SAFE" | "MATURE" | "ADULT";
+  badges: Array<{
+    label: string;
+    textColor: string;
+    backgroundColor: string;
+  }>;
+  capabilities: number | number[];
+  developers: Array<{
+    name: string;
+    website?: string | null;
+    github?: string | null;
+  }>;
+}
+
+export interface Extension {
+  name: string;
+  source: string;
+  url: string;
+  html_url: string;
+  metadata?: ExtensionMetadata;
+  iconUrl?: string;
+  repoId?: string;
+}
+
+export interface CustomRepository {
+  id: string;
+  name: string;
+  owner: string;
+  branch: string;
+  displayName: string;
+}
+
+const STORAGE_KEY = "inkdex-custom-repos";
+const DEFAULT_REPOS: Omit<CustomRepository, "displayName">[] = [
+  { id: "inkdex", name: "extensions", owner: "inkdex", branch: "master" },
+];
+
+export const getContentRatingColor = (rating: string): string => {
+  switch (rating) {
+    case "ADULT":
+      return "var(--vp-c-danger)";
+    case "MATURE":
+      return "var(--vp-c-warning)";
+    case "SAFE":
+      return "var(--vp-c-success)";
+    default:
+      return "var(--vp-c-text-2)";
+  }
+};
+
+export const getContentRatingBg = (rating: string): string => {
+  switch (rating) {
+    case "ADULT":
+      return "var(--vp-c-danger-soft)";
+    case "MATURE":
+      return "var(--vp-c-warning-soft)";
+    case "SAFE":
+      return "var(--vp-c-success-soft)";
+    default:
+      return "var(--vp-c-bg-soft)";
+  }
+};
+
+export const buildIconUrl = (
+  repo: { owner: string; name: string; branch: string },
+  extensionId: string,
+  iconPath: string,
+): string => {
+  return `https://${repo.owner}.github.io/${repo.name}/0.9/stable/${extensionId}/static/${iconPath}`;
+};
+
+export const buildBaseUrl = (repo: {
+  owner: string;
+  name: string;
+  branch: string;
+}): string => {
+  return `https://raw.githubusercontent.com/${repo.owner}/${repo.name}/${repo.branch}/0.9/stable`;
+};
+
+// Local Storage
+export const loadCustomRepos = (): CustomRepository[] => {
+  if (typeof localStorage === "undefined") return [];
+
+  const stored = localStorage.getItem(STORAGE_KEY);
+  if (stored) {
+    try {
+      return JSON.parse(stored);
+    } catch (e) {
+      console.error("Failed to parse custom repos from localStorage:", e);
+      return [];
+    }
+  }
+  return [];
+};
+
+export const saveCustomRepos = (repos: CustomRepository[]): void => {
+  if (typeof localStorage === "undefined") return;
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(repos));
+};
+
+export const fetchVersioningJson = async (repo: {
+  owner: string;
+  name: string;
+  branch: string;
+}): Promise<{ sources: ExtensionMetadata[] } | null> => {
+  try {
+    const response = await fetch(
+      `https://raw.githubusercontent.com/${repo.owner}/${repo.name}/${repo.branch}/0.9/stable/versioning.json`,
+    );
+    if (!response.ok) return null;
+    return await response.json();
+  } catch (e) {
+    console.warn(
+      `Failed to fetch metadata from ${repo.owner}/${repo.name}:`,
+      e,
+    );
+    return null;
+  }
+};
+
+export const fetchRepoContents = async (repo: {
+  owner: string;
+  name: string;
+  branch: string;
+}): Promise<GitHubFile[] | null> => {
+  try {
+    const response = await fetch(
+      `https://api.github.com/repos/${repo.owner}/${repo.name}/contents/0.9/stable?ref=${repo.branch}`,
+    );
+    if (!response.ok) return null;
+    return await response.json();
+  } catch (e) {
+    console.warn(`Failed to fetch from ${repo.owner}/${repo.name}:`, e);
+    return null;
+  }
+};
+
+export const checkBranchExists = async (
+  owner: string,
+  name: string,
+  branch: string,
+): Promise<boolean> => {
+  try {
+    const response = await fetch(
+      `https://api.github.com/repos/${owner}/${name}/branches/${branch}`,
+    );
+    return response.ok;
+  } catch {
+    return false;
+  }
+};
+
+export const getDefaultBranch = async (
+  owner: string,
+  name: string,
+): Promise<string> => {
+  try {
+    const response = await fetch(
+      `https://api.github.com/repos/${owner}/${name}`,
+    );
+    if (response.ok) {
+      const data = await response.json();
+      return data.default_branch;
+    }
+  } catch {
+    // Fall through to default
+  }
+  return "main";
+};
+
+export const useExtensions = () => {
+  const extensions = ref<Extension[]>([]);
+  const loading = ref(true);
+  const error = ref<string | null>(null);
+  const customRepos = ref<CustomRepository[]>([]);
+
+  const loadRepos = () => {
+    customRepos.value = loadCustomRepos();
+  };
+
+  const getAllRepos = (): CustomRepository[] => {
+    const defaultWithDisplay = DEFAULT_REPOS.map((r) => ({
+      ...r,
+      displayName: `${r.owner}/${r.name}`,
+    }));
+    return [...defaultWithDisplay, ...customRepos.value];
+  };
+
+  const fetchAllExtensions = async (includeContents = true): Promise<void> => {
+    loading.value = true;
+    error.value = null;
+
+    try {
+      const allRepos = getAllRepos();
+
+      const metadataPromises = allRepos.map(async (repo) => {
+        const data = await fetchVersioningJson(repo);
+        return data ? { repo, data } : null;
+      });
+
+      const metadataResults = (await Promise.all(metadataPromises)).filter(
+        (r) => r !== null,
+      );
+
+      let contentsResults: Array<{
+        repo: CustomRepository;
+        data: GitHubFile[];
+      }> = [];
+      if (includeContents) {
+        const contentsPromises = allRepos.map(async (repo) => {
+          const data = await fetchRepoContents(repo);
+          return data ? { repo, data } : null;
+        });
+        contentsResults = (await Promise.all(contentsPromises)).filter(
+          (r) => r !== null,
+        ) as Array<{ repo: CustomRepository; data: GitHubFile[] }>;
+      }
+
+      const allExtensions: Extension[] = [];
+
+      for (const metaResult of metadataResults) {
+        if (!metaResult) continue;
+        const { repo, data } = metaResult;
+
+        const metadataMap = new Map(
+          data.sources.map((source: ExtensionMetadata) => [source.id, source]),
+        );
+
+        if (includeContents) {
+          const contentsResult = contentsResults.find(
+            (c) => c.repo.id === repo.id,
+          );
+          if (contentsResult) {
+            const repoExtensions = contentsResult.data
+              .filter((item: GitHubFile) => item.type === "dir")
+              .map((item: GitHubFile) => {
+                const extensionMetadata = metadataMap.get(item.name) as
+                  | ExtensionMetadata
+                  | undefined;
+                return {
+                  name: item.name,
+                  source: repo.id,
+                  url: `${buildBaseUrl(repo)}/${item.name}/index.js`,
+                  html_url: item.html_url,
+                  metadata: extensionMetadata,
+                  repoId: repo.id,
+                  iconUrl: extensionMetadata?.icon
+                    ? buildIconUrl(repo, item.name, extensionMetadata.icon)
+                    : "https://paperback.moe/pb-placeholder.png",
+                };
+              });
+            allExtensions.push(...repoExtensions);
+          }
+        } else {
+          for (const source of data.sources) {
+            allExtensions.push({
+              name: source.id,
+              source: repo.id,
+              url: `${buildBaseUrl(repo)}/${source.id}/index.js`,
+              html_url: `https://github.com/${repo.owner}/${repo.name}/tree/${repo.branch}/0.9/stable/${source.id}`,
+              metadata: source,
+              repoId: repo.id,
+              iconUrl: source.icon
+                ? buildIconUrl(repo, source.id, source.icon)
+                : "https://paperback.moe/pb-placeholder.png",
+            });
+          }
+        }
+      }
+
+      extensions.value = allExtensions.sort((a, b) =>
+        a.name.localeCompare(b.name),
+      );
+    } catch (e) {
+      error.value = e instanceof Error ? e.message : "An error occurred";
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  const addCustomRepo = async (
+    repoUrl: string,
+  ): Promise<{ success: boolean; error?: string }> => {
+    let owner = "";
+    let name = "";
+    let branch = "";
+
+    const url = repoUrl.trim();
+
+    if (url.includes("github.com/")) {
+      const match = url.match(
+        // eslint-disable-next-line
+        /github\.com\/([^\/]+)\/([^\/]+)(?:\/tree\/([^\/]+))?/,
+      );
+      if (match) {
+        owner = match[1] || "";
+        name = match[2] || "";
+        if (match[3]) branch = match[3];
+      }
+    } else if (url.includes("/")) {
+      const parts = url.split("/");
+      if (parts.length >= 2) {
+        owner = parts[0] || "";
+        name = parts[1] || "";
+      }
+    }
+
+    if (!owner || !name) {
+      return {
+        success: false,
+        error:
+          "Invalid repository URL. Please use format: owner/repo or https://github.com/owner/repo",
+      };
+    }
+
+    name = name.replace(/\.git$/, "");
+
+    // Auto-detect branch
+    if (!branch) {
+      const hasGhPages = await checkBranchExists(owner, name, "gh-pages");
+      branch = hasGhPages ? "gh-pages" : await getDefaultBranch(owner, name);
+    }
+
+    const id = `${owner}-${name}`;
+    const existing = customRepos.value.find((r) => r.id === id);
+    if (existing) {
+      return { success: false, error: "This repository is already added" };
+    }
+
+    const repo: CustomRepository = {
+      id,
+      name,
+      owner,
+      branch,
+      displayName: `${owner}/${name}`,
+    };
+
+    customRepos.value.push(repo);
+    saveCustomRepos(customRepos.value);
+
+    return { success: true };
+  };
+
+  const removeCustomRepo = (repoId: string): void => {
+    customRepos.value = customRepos.value.filter((r) => r.id !== repoId);
+    saveCustomRepos(customRepos.value);
+  };
+
+  return {
+    extensions,
+    loading,
+    error,
+    customRepos,
+    loadRepos,
+    getAllRepos,
+    fetchAllExtensions,
+    addCustomRepo,
+    removeCustomRepo,
+  };
+};
diff --git a/src/extension-list.md b/src/extension-list.md
index d3dc441..2d67837 100644
--- a/src/extension-list.md
+++ b/src/extension-list.md
@@ -3,4 +3,6 @@
 
 # Extensions
 
-Coming soon!
+<ClientOnly>
+  <ExtensionList />
+</ClientOnly>

From 0f8054247e76077dd6581069f3a28749d9918825 Mon Sep 17 00:00:00 2001
From: Eduard Smet <contact@celarye.dev>
Date: Mon, 15 Dec 2025 19:07:22 +0100
Subject: [PATCH 2/3] feat: Various extension list improvements

---
 .../theme/components/ExtensionDetails.vue     |  273 ++--
 .../theme/components/ExtensionList.css        | 1227 +++++++++--------
 .../theme/components/ExtensionList.vue        |  788 +++++++----
 .../theme/components/ExtensionSearch.vue      |    4 +-
 src/.vitepress/theme/lib/extensions.ts        |  227 ++-
 src/extension-list.md                         |    2 +-
 6 files changed, 1537 insertions(+), 984 deletions(-)

diff --git a/src/.vitepress/theme/components/ExtensionDetails.vue b/src/.vitepress/theme/components/ExtensionDetails.vue
index e8fed64..1176baa 100644
--- a/src/.vitepress/theme/components/ExtensionDetails.vue
+++ b/src/.vitepress/theme/components/ExtensionDetails.vue
@@ -1,11 +1,20 @@
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref } from "vue";
+import { watch } from "vue";
 import {
   getContentRatingBg,
   getContentRatingColor,
+  getLanguageEmoji,
+  getLanguageName,
+  hasChapterProviding,
+  hasCloudflareBypassProviding,
+  hasMangaProgressProviding,
   type Extension,
 } from "../lib/extensions";
 
+const formatRating = (rating: string) => {
+  return rating.charAt(0) + rating.slice(1).toLowerCase();
+};
+
 interface Props {
   extension: Extension | null;
   show: boolean;
@@ -18,61 +27,29 @@ const emit = defineEmits<{
   install: [extension: Extension];
 }>();
 
-const detailsContainer = ref<HTMLElement | null>(null);
-const windowWidth = ref(1024); // Default desktop width
-
-const isMobile = computed(() => windowWidth.value < 768);
-
-const handleResize = () => {
-  windowWidth.value = window.innerWidth;
-};
-
-const handleScroll = (event: Event) => {
-  if (!isMobile.value) return; // Only handle scroll on mobile
-
-  const target = event.target as HTMLElement;
-  if (target.scrollTop < -50) {
-    emit("hide");
-  }
-};
-
 const handleInstall = () => {
   if (props.extension) {
     emit("install", props.extension);
   }
 };
 
-onMounted(() => {
-  windowWidth.value = window.innerWidth;
-  window.addEventListener("resize", handleResize);
-});
-
-onUnmounted(() => {
-  window.removeEventListener("resize", handleResize);
-});
+// Disable scrolling when modal is open
+watch(
+  () => props.show,
+  (isOpen) => {
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+  },
+);
 </script>
 
 <template>
-  <div
-    v-if="show && extension"
-    class="details-overlay"
-    :class="{ desktop: !isMobile }"
-    @click="$emit('hide')"
-  >
-    <div
-      ref="detailsContainer"
-      class="details-container"
-      :class="{ desktop: !isMobile }"
-      @click.stop
-      @scroll="handleScroll"
-    >
-      <!-- Mobile handle bar -->
-      <div v-if="isMobile" class="details-handle">
-        <div class="handle-bar" />
-      </div>
-
-      <!-- Desktop close button -->
-      <button v-else class="details-close-btn" @click="$emit('hide')">
+  <div v-if="show && extension" class="details-overlay" @click="$emit('hide')">
+    <div ref="detailsContainer" class="details-modal" @click.stop>
+      <button class="details-close-btn" @click="$emit('hide')">
         <svg
           width="24"
           height="24"
@@ -86,7 +63,7 @@ onUnmounted(() => {
         </svg>
       </button>
 
-      <div class="details-content" :class="{ desktop: !isMobile }">
+      <div class="details-content">
         <div class="details-header">
           <img
             :src="extension.iconUrl"
@@ -95,90 +72,125 @@ onUnmounted(() => {
             @error="
               (e) =>
                 ((e.target as HTMLImageElement).src =
-                  'https://paperback.moe/pb-placeholder.png')
+                  'https://paperback.moe/pb-logo.png')
             "
           />
           <div class="details-header-text">
             <h2 class="details-title">
               {{ extension.name }}
             </h2>
-            <span class="details-source-badge" :class="extension.source">
-              {{
-                extension.source === "inkdex"
-                  ? "Inkdex"
-                  : extension.repoId || extension.source
-              }}
-            </span>
+            <div v-if="extension.metadata" class="details-header-badges">
+              <span
+                class="details-rating-badge"
+                :style="{
+                  color: getContentRatingColor(
+                    extension.metadata.contentRating,
+                  ),
+                  backgroundColor: getContentRatingBg(
+                    extension.metadata.contentRating,
+                  ),
+                }"
+              >
+                {{ formatRating(extension.metadata.contentRating) }}
+              </span>
+              <span
+                v-if="extension.metadata.version"
+                class="details-version-badge"
+              >
+                v{{ extension.metadata.version }}
+              </span>
+            </div>
           </div>
         </div>
 
-        <div v-if="extension.metadata" class="details-meta">
-          <div class="details-section">
-            <h3>Content Rating</h3>
+        <div v-if="extension.metadata?.description" class="details-description">
+          <h3>Description</h3>
+          <p>{{ extension.metadata.description }}</p>
+        </div>
+
+        <div v-if="extension.metadata?.capabilities" class="details-section">
+          <h3>Services</h3>
+          <div class="details-services">
             <span
-              class="details-rating-badge"
-              :style="{
-                color: getContentRatingColor(extension.metadata.contentRating),
-                backgroundColor: getContentRatingBg(
-                  extension.metadata.contentRating,
-                ),
-              }"
+              v-if="hasChapterProviding(extension.metadata.capabilities)"
+              class="service-badge service-content"
+              >Content Service</span
+            >
+            <span
+              v-if="hasMangaProgressProviding(extension.metadata.capabilities)"
+              class="service-badge service-tracker"
+              >Tracker Service</span
+            >
+            <span
+              v-if="
+                hasCloudflareBypassProviding(extension.metadata.capabilities)
+              "
+              class="service-badge service-cloudflare"
+              >Cloudflare</span
             >
-              {{ extension.metadata.contentRating }}
-            </span>
           </div>
+        </div>
 
-          <div v-if="extension.metadata.language" class="details-section">
-            <h3>Language</h3>
-            <span class="details-language-badge">{{
-              extension.metadata.language
-            }}</span>
-          </div>
+        <div v-if="extension.metadata?.language" class="details-section">
+          <h3>Language</h3>
+          <span class="language-badge">
+            <template v-if="getLanguageEmoji(extension.metadata.language)"
+              >{{
+                getLanguageEmoji(extension.metadata.language)
+              }}&nbsp;</template
+            >{{ getLanguageName(extension.metadata.language) }}
+          </span>
+        </div>
 
-          <div v-if="extension.metadata.version" class="details-section">
-            <h3>Version</h3>
-            <span class="details-version-badge">{{
-              extension.metadata.version
-            }}</span>
+        <div
+          v-if="
+            extension.metadata?.badges && extension.metadata.badges.length > 0
+          "
+          class="details-section"
+        >
+          <h3>Badges</h3>
+          <div class="details-badges">
+            <span
+              v-for="badge in extension.metadata.badges"
+              :key="badge.label"
+              class="genre-badge"
+              :style="{
+                color: badge.textColor,
+                backgroundColor: badge.backgroundColor,
+              }"
+            >
+              {{ badge.label }}
+            </span>
           </div>
+        </div>
 
-          <div
-            v-if="
-              extension.metadata.badges && extension.metadata.badges.length > 0
-            "
-            class="details-section"
-          >
-            <h3>Tags</h3>
-            <div class="details-badges">
-              <span
-                v-for="badge in extension.metadata.badges"
-                :key="badge.label"
-                class="details-genre-badge"
-                :style="{
-                  color: badge.textColor,
-                  backgroundColor: badge.backgroundColor,
-                }"
-              >
-                {{ badge.label }}
-              </span>
-            </div>
-          </div>
+        <div class="details-section">
+          <h3>Repository</h3>
+          <span class="source-badge">
+            {{
+              extension.source === "inkdex"
+                ? "Inkdex"
+                : extension.repoId || extension.source
+            }}
+          </span>
+        </div>
 
-          <div
-            v-if="
-              extension.metadata.developers &&
-              extension.metadata.developers.length > 0
-            "
-            class="details-section"
-          >
-            <h3>Developers</h3>
-            <div class="details-developers">
-              <div
-                v-for="dev in extension.metadata.developers"
-                :key="dev.name"
-                class="details-developer"
-              >
-                <span class="dev-name">{{ dev.name }}</span>
+        <div
+          v-if="
+            extension.metadata?.developers &&
+            extension.metadata.developers.length > 0
+          "
+          class="details-section"
+        >
+          <h3>Developers</h3>
+          <div class="details-developers">
+            <div
+              v-for="dev in extension.metadata.developers"
+              :key="dev.name"
+              class="details-developer"
+            >
+              <div class="dev-name">{{ dev.name }}</div>
+              <div v-if="dev.github || dev.website" class="dev-links">
                 <a
                   v-if="dev.github"
                   :href="dev.github"
@@ -186,6 +198,15 @@ onUnmounted(() => {
                   rel="noopener noreferrer"
                   class="dev-link"
                 >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    fill="currentColor"
+                  >
+                    <path
+                      d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
+                    />
+                  </svg>
                   GitHub
                 </a>
                 <a
@@ -195,6 +216,21 @@ onUnmounted(() => {
                   rel="noopener noreferrer"
                   class="dev-link"
                 >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  >
+                    <circle cx="12" cy="12" r="10"></circle>
+                    <line x1="2" y1="12" x2="22" y2="12"></line>
+                    <path
+                      d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"
+                    ></path>
+                  </svg>
                   Website
                 </a>
               </div>
@@ -202,13 +238,8 @@ onUnmounted(() => {
           </div>
         </div>
 
-        <div v-if="extension.metadata?.description" class="details-description">
-          <h3>Description</h3>
-          <p>{{ extension.metadata.description }}</p>
-        </div>
-
         <div class="details-actions">
-          <button class="details-install-btn" @click="handleInstall">
+          <button class="details-install-btn btn-brand" @click="handleInstall">
             Install Extension
           </button>
         </div>
diff --git a/src/.vitepress/theme/components/ExtensionList.css b/src/.vitepress/theme/components/ExtensionList.css
index 06817bf..64cb884 100644
--- a/src/.vitepress/theme/components/ExtensionList.css
+++ b/src/.vitepress/theme/components/ExtensionList.css
@@ -1,3 +1,94 @@
+/* Reusable Components */
+.btn-brand {
+  background: var(--vp-button-brand-bg);
+  color: var(--vp-button-brand-text);
+  border: none;
+  font-weight: 600;
+}
+.btn-brand:hover:not(:disabled) {
+  background: var(--vp-button-brand-hover-bg);
+}
+.btn-brand:active:not(:disabled) {
+  background: var(--vp-button-brand-active-bg);
+}
+.btn-brand:disabled {
+  opacity: .5;
+  cursor: not-allowed;
+}
+
+/* Input button shared styles */
+.input-btn {
+  position: absolute;
+  right: .5rem;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: .5rem .75rem;
+  line-height: 1;
+  font-size: .85rem;
+  border-radius: 8px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+.input-btn:focus-visible {
+  outline: 2px solid var(--vp-c-brand);
+  outline-offset: 2px;
+}
+.input-btn.btn-secondary {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-border);
+}
+.input-btn.btn-secondary:hover {
+  background: var(--vp-c-bg-alt);
+  border-color: var(--vp-c-border);
+}
+.input-btn.btn-brand {
+  border: none;
+}
+
+.btn-secondary {
+  padding: .75rem .85rem;
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  color: var(--vp-c-text-2);
+  font-size: .85rem;
+  cursor: pointer;
+  border-radius: 8px;
+  transition: all 0.2s ease;
+  font-weight: 500;
+  line-height: 1;
+}
+.btn-secondary:hover {
+  background: var(--vp-c-bg);
+  border-color: var(--vp-c-border);
+  color: var(--vp-c-text-1);
+}
+.btn-secondary:focus-visible {
+  outline: 2px solid var(--vp-c-brand);
+  outline-offset: 2px;
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: .25rem .5rem;
+  border-radius: 8px;
+  font-size: .7rem;
+  font-weight: 600;
+  gap: .25rem;
+}
+
+.section-heading {
+  margin: 0 0 .75rem 0;
+  font-size: .85rem;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+}
+
 .extension-list {
   margin: 2rem 0;
 }
@@ -41,78 +132,45 @@
   display: flex;
   flex-direction: column;
   gap: 1rem;
-  margin-bottom: 2rem;
+  margin-bottom: 1.5rem;
 }
 .search-bar {
   width: 100%}
-.search-input-container {
+.extension-list .search-input-container {
   position: relative;
   display: flex;
   align-items: center;
 }
-.search-icon {
+.extension-list .search-icon {
   position: absolute;
   left: 1rem;
-  color: var(--vp-c-text-2);
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--vp-c-text-3);
   pointer-events: none;
-  display: flex;
+  z-index: 1;
 }
-.search-input {
+.extension-list .search-input {
   width: 100%;
-  padding: .75rem 1rem .75rem 2.75rem;
+  padding: .75rem 1rem .75rem 2.5rem;
   background: var(--vp-c-bg-soft);
-  border: 1px solid #fff0;
+  border: 1px solid var(--vp-c-divider);
   border-radius: 8px;
   color: var(--vp-c-text-1);
   font-size: .95rem;
   transition: all 0.2s ease;
 }
-.search-input:focus {
+.extension-list .search-input:focus {
   outline: none;
-  background: var(--vp-c-bg);
+  background: var(--vp-c-bg-soft);
   border-color: var(--vp-c-brand);
   box-shadow: 0 0 0 2px var(--vp-c-brand-soft);
 }
-.search-input::-webkit-search-cancel-button {
+.extension-list .search-input::-webkit-search-cancel-button {
   display: none;
 }
-.clear-btn {
-  position: absolute;
-  right: .5rem;
-  background: none;
-  border: none;
-  color: var(--vp-c-text-2);
-  font-size: 1.2rem;
-  cursor: pointer;
-  padding: .5rem;
-  border-radius: 4px;
-  transition: all 0.2s ease;
-  min-width: 36px;
-  min-height: 36px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.clear-btn:hover {
-  background: var(--vp-c-bg);
-  color: var(--vp-c-text-1);
-}
-.search-shortcut {
-  display: flex;
-  gap: .25rem;
-  align-items: center;
-  position: absolute;
-  right: .75rem;
-}
-.search-shortcut kbd {
-  padding: .2rem .4rem;
-  background: var(--vp-c-bg);
-  border: 1px solid var(--vp-c-border);
-  border-radius: 4px;
-  font-size: .7rem;
-  color: var(--vp-c-text-2);
-  font-family: inherit;
-}
+
+
 .filters-row {
   display: flex;
   justify-content: space-between;
@@ -193,42 +251,70 @@
   font-size: .9rem;
   font-weight: 500;
 }
+/* Action buttons (Filters, Repositories) */
 .action-btn {
-  display: flex;
-  align-items: center;
-  gap: .5rem;
-  padding: .6rem 1rem;
+  position: relative;
+  padding: 0 1.75rem 0 .85rem;
   background: var(--vp-c-bg-soft);
-  border: 1px solid #fff0;
+  border: 1px solid var(--vp-c-divider);
   border-radius: 8px;
-  color: var(--vp-c-text-1);
-  font-size: .9rem;
+  color: var(--vp-c-text-2);
+  font-size: .85rem;
   font-weight: 500;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+  line-height: 1;
+  white-space: nowrap;
+  display: inline-flex;
+  align-items: center;
+  gap: .5rem;
+  height: 2.5rem;
 }
 .action-btn:hover {
   background: var(--vp-c-bg);
+  color: var(--vp-c-text-1);
   border-color: var(--vp-c-border);
 }
 .action-btn.active {
-  background: var(--vp-c-brand);
-  color: #fff;
+  background: var(--vp-button-brand-bg);
+  color: var(--vp-button-brand-text);
+  border-color: var(--vp-button-brand-bg);
 }
-.filter-count {
+.action-btn .btn-text {
+  line-height: 1;
+}
+.action-btn .filter-count {
   background: rgb(255 255 255 / .25);
-  padding: .1rem .4rem;
+  padding: .2rem .4rem;
   border-radius: 10px;
   font-size: .75rem;
   min-width: 1.2rem;
   text-align: center;
+  line-height: 1;
+  flex-shrink: 0;
+  visibility: hidden;
+  width: 0;
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+}
+.action-btn .filter-count:not(:empty) {
+  visibility: visible;
+  width: auto;
+  min-width: 1.2rem;
+  padding: .2rem .4rem;
 }
-.expand-icon {
+.action-btn .expand-icon {
+  position: absolute;
+  right: .5rem;
+  top: 50%;
+  transform: translateY(-50%);
   font-size: .65rem;
+  line-height: 1;
   transition: transform 0.2s ease;
 }
-.expand-icon.expanded {
-  transform: rotate(180deg);
+.action-btn .expand-icon.expanded {
+  transform: translateY(-50%) rotate(180deg);
 }
 .btn-icon {
   font-size: 1rem;
@@ -250,8 +336,9 @@
 }
 }.results-summary {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: .5rem;
   margin-bottom: 1rem;
   padding: .75rem 0;
   border-bottom: 1px solid var(--vp-c-border);
@@ -260,10 +347,25 @@
   font-size: .9rem;
   color: var(--vp-c-text-2);
 }
+.hidden-count {
+  color: var(--vp-c-text-3);
+  font-style: italic;
+  white-space: nowrap;
+}
+@media (max-width: 768px) {
+  .hidden-count {
+    display: block;
+    margin-top: .25rem;
+    white-space: normal;
+  }
+}
 .active-filters {
   display: flex;
   gap: .5rem;
-  flex-wrap: wrap;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: thin;
+  max-width: 100%;
 }
 .filter-tag {
   padding: .25rem .5rem;
@@ -272,16 +374,22 @@
   border-radius: 4px;
   font-size: .8rem;
   font-weight: 500;
+  white-space: nowrap;
+  flex-shrink: 0;
 }
 .filter-tag.nsfw-active {
   background: var(--vp-c-danger-soft);
   color: var(--vp-c-danger);
 }
+.filter-tag.negated-tag {
+  text-decoration: line-through;
+  opacity: 0.7;
+}
 .extensions-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  grid-template-columns: 1fr;
   gap: 1.5rem;
-  margin: 1.5rem 0;
+  margin: 1.5rem 0 1rem 0;
 }
 .extension-card {
   padding: 1.5rem;
@@ -308,34 +416,7 @@
   box-shadow: 0 0 0 3px var(--vp-c-brand-soft);
   background: var(--vp-c-brand-dimm);
 }
-.extension-card.nsfw-blur {
-  position: relative;
-  overflow: hidden;
-  background: #18181b;
-  border-radius: 12px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 200px;
-  background-repeat: no-repeat;
-  background-attachment: scroll;
-  transition: all 0.6s cubic-bezier(.4, 0, .2, 1);
-}
-.extension-card.nsfw-blur::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: linear-gradient(135deg, rgb(0 0 0 / .03) 0%, rgb(0 0 0 / .15) 100%);
-  backdrop-filter: blur(30px);
-  z-index: 1;
-  transition: all 0.6s cubic-bezier(.4, 0, .2, 1);
-}
-.extension-card.nsfw-blur .extension-header, .extension-card.nsfw-blur .extension-meta, .extension-card.nsfw-blur .extension-actions, .extension-card.nsfw-blur .selected-indicator {
-  opacity: 0;
-}
+
 .extension-header {
   display: flex;
   align-items: center;
@@ -346,8 +427,8 @@
   transition: opacity 0.6s cubic-bezier(.4, 0, .2, 1);
 }
 .extension-icon {
-  width: 56px;
-  height: 56px;
+  width: 72px;
+  height: 72px;
   border-radius: 12px;
   object-fit: cover;
   flex-shrink: 0;
@@ -357,7 +438,7 @@
   flex: 1;
   display: flex;
   flex-direction: column;
-  gap: 0;
+  gap: .5rem;
   min-width: 0;
 }
 .extension-name {
@@ -370,30 +451,33 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.extension-repo {
+  display: flex;
+}
 .extension-source {
   margin: 0;
 }
 .source-badge {
-  padding: .2rem .4rem;
-  border-radius: 6px;
+  padding: .25rem .5rem;
+  border-radius: 8px;
   font-size: .7rem;
   font-weight: 500;
-  text-transform: uppercase;
-}
-.source-badge.inkdex {
   background: var(--vp-c-brand-soft);
   color: var(--vp-c-brand);
-}
-.source-badge.karrot {
-  background: var(--vp-c-warning-soft);
-  color: var(--vp-c-warning);
+  white-space: nowrap;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 }
 .extension-meta {
   margin-bottom: 1rem;
   transition: opacity 0.6s cubic-bezier(.4, 0, .2, 1);
+  display: flex;
+  flex-direction: column;
+  gap: .5rem;
 }
 .extension-description {
-  margin-bottom: .5rem;
   color: #fff;
   font-size: .9rem;
   line-height: 1.4;
@@ -403,16 +487,22 @@
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
+.extension-meta .extension-repo {
+  order: 10;
+  margin-top: auto;
+  padding-top: .25rem;
+}
 .content-rating {
   margin-bottom: .5rem;
 }
 .rating-badge {
-  display: inline-block;
-  padding: .05rem .25rem;
-  border-radius: 6px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: .25rem .5rem;
+  border-radius: 8px;
   font-size: .7rem;
   font-weight: 600;
-  text-transform: uppercase;
 }
 .header-badges {
   display: flex;
@@ -421,82 +511,120 @@
   align-items: center;
 }
 .version-badge {
-  display: inline-block;
-  padding: .05rem .3rem;
-  border-radius: 6px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: .25rem .5rem;
+  border-radius: 8px;
   font-size: .7rem;
   font-weight: 500;
   background: var(--vp-c-bg-soft);
   color: var(--vp-c-text-2);
-  border: 1px solid var(--vp-c-border);
+  border: 1px solid var(--vp-c-divider);
 }
 .extension-badges {
   display: flex;
-  flex-wrap: wrap;
   gap: .25rem;
-  margin-bottom: .5rem;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: thin;
 }
 .genre-badge {
-  padding: .1rem .3rem;
+  padding: .25rem .5rem;
   border-radius: 8px;
-  font-size: .65rem;
+  font-size: .7rem;
+  font-weight: 500;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.extension-tags-row {
+  display: flex;
+  gap: .5rem;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: thin;
+}
+.extension-services {
+  display: flex;
+  gap: .25rem;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: thin;
+}
+.service-badge {
+  padding: .25rem .5rem;
+  border-radius: 8px;
+  font-size: .7rem;
   font-weight: 500;
   white-space: nowrap;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.service-badge.service-content {
+  background: #3b82f626;
+  color: #3b82f6;
+}
+.service-badge.service-tracker {
+  background: #10b98126;
+  color: #10b981;
+}
+.service-badge.service-cloudflare {
+  background: #ef444426;
+  color: #ef4444;
 }
 .extension-language {
-  margin-bottom: .5rem;
 }
 .language-badge {
-  padding: .1rem .3rem;
+  padding: .25rem .5rem;
   border-radius: 8px;
-  font-size: .65rem;
+  font-size: .7rem;
   font-weight: 500;
-  background: var(--vp-c-bg);
+  background: var(--vp-c-bg-soft);
   color: var(--vp-c-text-2);
-  border: 1px solid var(--vp-c-border);
+  white-space: nowrap;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 }
-.extension-actions {
+.card-badges {
   display: flex;
   gap: .5rem;
+  align-items: center;
+}
+.extension-footer {
   margin-top: auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: .75rem;
+}
+.extension-actions {
+  display: flex;
+  gap: .75rem;
+  align-items: center;
+  margin-left: auto;
   transition: opacity 0.6s cubic-bezier(.4, 0, .2, 1);
 }
 .details-btn {
   padding: .75rem 1rem;
-  border-radius: 4px;
   text-decoration: none;
   font-size: .9rem;
   font-weight: 500;
   transition: all 0.2s ease;
   display: inline-block;
   text-align: center;
-  flex: 1;
-  background: #fff0;
-  color: var(--vp-c-text-2);
-  border: 1px solid var(--vp-c-border);
   cursor: pointer;
-  min-height: 44px;
-}
-.details-btn:hover {
-  background: var(--vp-c-bg-soft);
-  border-color: var(--vp-c-text-2);
-  color: var(--vp-c-text-1);
-}
-.details-btn:active {
-  background: var(--vp-c-bg);
-  transform: scale(.98);
+  white-space: nowrap;
 }
 .selected-indicator {
-  margin-top: .5rem;
-  padding: .5rem;
-  background: var(--vp-c-brand-soft);
-  border-radius: 4px;
-  text-align: center;
-}
-.selected-checkmark {
   color: var(--vp-c-brand);
   font-weight: 600;
-  font-size: .9rem;
+  font-size: .85rem;
+  white-space: nowrap;
+  flex-shrink: 0;
 }
 .floating-install-btn {
   position: fixed;
@@ -508,24 +636,19 @@
   display: flex;
   align-items: center;
   gap: .75rem;
-  padding: 1rem 1.5rem;
-  background: var(--vp-c-brand);
-  color: #fff;
-  border: none;
+  padding: .7rem 1rem;
   border-radius: 50px;
-  font-size: 1rem;
+  font-size: .9rem;
   font-weight: 600;
-  cursor: pointer;
   box-shadow: 0 4px 12px rgb(0 0 0 / .2);
-  transition: all 0.3s ease;
-  min-height: 48px;
-  min-width: 48px;
+  height: 3rem;
+  min-width: 4rem;
+  justify-content: center;
 }
-.install-selected-btn:hover {
-  background: var(--vp-c-brand-dark);
+.install-selected-btn:hover:not(:disabled) {
   box-shadow: 0 6px 16px rgb(0 0 0 / .3);
 }
-.install-selected-btn:active {
+.install-selected-btn:active:not(:disabled) {
   transform: scale(.95);
   box-shadow: 0 2px 8px rgb(0 0 0 / .2);
 }
@@ -536,38 +659,42 @@
   font-size: .9rem;
 }
 .no-results {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
   text-align: center;
   padding: 3rem 1rem;
   color: var(--vp-c-text-2);
 }
 .no-results-icon {
   font-size: 3rem;
-  margin-bottom: 1rem;
+  line-height: 1;
 }
 .no-results h3 {
-  margin: 0 0 .5rem 0;
+  margin: 0;
   color: var(--vp-c-text-1);
 }
 .no-results p {
-  margin: 0 0 1.5rem 0;
+  margin: 0;
 }
 .clear-search-btn {
   padding: .75rem 1rem;
-  background: var(--vp-c-brand);
-  color: #fff;
-  border: 1px solid var(--vp-c-brand);
-  border-radius: 4px;
-  cursor: pointer;
+  border-radius: 8px;
   font-size: .9rem;
-  transition: all 0.2s ease;
   min-height: 44px;
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  color: var(--vp-c-text-2);
 }
 .clear-search-btn:hover {
-  background: var(--vp-c-brand-dark);
-  border-color: var(--vp-c-brand-dark);
+  background: var(--vp-c-bg);
+  color: var(--vp-c-text-1);
+  border-color: var(--vp-c-border);
 }
-.clear-search-btn:active {
-  transform: scale(.98);
+.clear-search-btn:focus-visible {
+  outline: 2px solid var(--vp-c-brand);
+  outline-offset: 2px;
 }
 .stats {
   margin-top: 2rem;
@@ -578,109 +705,29 @@
   color: var(--vp-c-text-2);
   font-size: .9rem;
 }
-@media (max-width:1200px) {
+@media (min-width:720px) {
   .extensions-grid {
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 1.25rem;
-}
-}@media (max-width:1024px) {
-  .extensions-grid {
-  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
-  gap: 1rem;
-}
-}@media (max-width:768px) {
-  .search-section {
-  padding: 1rem;
-}
-.filter-section {
-  flex-direction: column;
-  align-items: flex-start;
-  gap: .75rem;
-}
-.nsfw-toggle {
-  margin-top: .25rem;
-}
-.results-summary {
-  flex-direction: column;
-  align-items: flex-start;
-  gap: .5rem;
-}
-.extensions-grid {
-  grid-template-columns: repeat(2, 1fr);
-  gap: .75rem;
-}
-.extension-card {
-  padding: 1rem;
-}
-.extension-card.nsfw-blur {
-  min-height: 160px;
-}
-.extension-header {
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-  gap: .5rem;
-}
-.extension-icon {
-  width: 48px;
-  height: 48px;
-}
-.extension-header-text {
-  align-items: center;
-}
-.extension-name {
-  font-size: .9rem;
-}
-.source-badge {
-  font-size: .65rem;
-  padding: .2rem .4rem;
-}
-.extension-badges {
-  justify-content: center;
-}
-.genre-badge {
-  font-size: .6rem;
-  padding: .1rem .25rem;
-  border-radius: 10px;
-}
-.rating-badge {
-  font-size: .65rem;
-  padding: .1rem .25rem;
-  border-radius: 8px;
-}
-.extension-actions {
-  margin-top: auto;
-}
-.details-btn {
-  font-size: .8rem;
-  padding: .4rem .75rem;
-  min-height: 40px;
-}
-.floating-install-btn {
-  bottom: 1.5rem;
-  right: 1.5rem;
-  left: 1.5rem;
-  width: calc(100vw - 3rem);
-  max-width: none;
-}
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  }
+}@media (min-width:500px) {
 .install-selected-btn {
   padding: 1rem 1.5rem;
   font-size: .95rem;
-  min-height: 48px;
-  width: 100%;
-  justify-content: center;
+  height: 3.5rem;
 }
-}@media (max-width:480px) {
-  .extensions-grid {
-  grid-template-columns: 1fr;
-  gap: .5rem;
+}@media (min-width:700px) {
+.install-selected-btn {
+  padding: 0 2rem;
+  font-size: 1.05rem;
+  height: 4rem;
 }
+}@media (max-width:480px) {
 .extension-card {
   padding: .75rem;
 }
 .extension-icon {
-  width: 40px;
-  height: 40px;
+  width: 48px;
+  height: 48px;
 }
 .extension-name {
   font-size: .85rem;
@@ -695,331 +742,266 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgb(0 0 0 / .5);
+  background: rgb(0 0 0 / .6);
   backdrop-filter: blur(4px);
   z-index: 1000;
-}
-.details-overlay.desktop {
-  background: rgb(0 0 0 / .3);
-}
-.details-container {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  max-height: 80vh;
-  background: var(--vp-c-bg);
-  border-radius: 20px 20px 0 0;
-  box-shadow: 0 -4px 20px rgb(0 0 0 / .3);
-  overflow-y: auto;
-  overscroll-behavior: contain;
-}
-.details-container.desktop {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: auto;
-  width: 400px;
-  max-width: 90vw;
-  max-height: 100vh;
-  border-radius: 0;
-  border-left: 1px solid var(--vp-c-border);
-}
-.details-handle {
   display: flex;
+  align-items: center;
   justify-content: center;
-  padding: 12px;
-  border-bottom: 1px solid var(--vp-c-border);
+  padding: 2rem;
 }
-.handle-bar {
-  width: 40px;
-  height: 4px;
-  background: var(--vp-c-border);
-  border-radius: 2px;
+.details-modal {
+  position: relative;
+  background: var(--vp-c-bg);
+  border-radius: 12px;
+  box-shadow: 0 25px 50px -12px rgb(0 0 0 / .5);
+  width: 100%;
+  max-width: 600px;
+  max-height: calc(100vh - 4rem);
+  overflow-y: auto;
+  border: 1px solid var(--vp-c-border);
 }
 .details-close-btn {
   position: absolute;
-  top: 16px;
-  right: 16px;
-  background: none;
-  border: none;
+  top: 1rem;
+  right: 1rem;
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-border);
   color: var(--vp-c-text-2);
   cursor: pointer;
-  padding: 12px;
+  padding: .5rem;
   border-radius: 6px;
   transition: all 0.2s ease;
   z-index: 10;
-  min-width: 44px;
-  min-height: 44px;
+  width: 36px;
+  height: 36px;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 .details-close-btn:hover {
-  background: var(--vp-c-bg-soft);
+  background: var(--vp-c-bg);
   color: var(--vp-c-text-1);
+  border-color: var(--vp-c-text-2);
 }
 .details-close-btn:active {
-  background: var(--vp-c-bg);
   transform: scale(.95);
 }
 .details-content {
   padding: 1.5rem;
-  padding-bottom: 2rem;
-}
-.details-content.desktop {
-  padding: 2rem;
-  padding-top: 3rem;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
 }
 .details-header {
   display: flex;
   align-items: center;
   gap: 1rem;
-  margin-bottom: 1.5rem;
+  margin-bottom: 1rem;
+  padding-right: 2.5rem;
   padding-bottom: 1rem;
   border-bottom: 1px solid var(--vp-c-divider);
 }
 .details-icon {
-  width: 64px;
-  height: 64px;
-  border-radius: 16px;
+  width: 80px;
+  height: 80px;
+  border-radius: 12px;
   object-fit: cover;
   flex-shrink: 0;
   box-shadow: 0 2px 8px rgb(0 0 0 / .1);
 }
 .details-header-text {
   flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: .5rem;
+  min-width: 0;
 }
 .details-title {
-  margin: 0 0 .5rem 0;
+  margin: 0;
   font-size: 1.5rem;
   font-weight: 600;
   color: var(--vp-c-text-1);
+  line-height: 1.2;
+  border: none;
+  padding: 0;
 }
-.details-source-badge {
-  padding: .25rem .75rem;
-  border-radius: 6px;
-  font-size: .8rem;
-  font-weight: 500;
-  text-transform: uppercase;
+.details-content h2 {
+  margin: 0;
+  border: none;
+  padding: 0;
 }
-.details-source-badge.inkdex {
-  background: var(--vp-c-brand-soft);
-  color: var(--vp-c-brand);
+.details-header-badges {
+  display: flex;
+  gap: .5rem;
+  align-items: center;
+  flex-wrap: wrap;
 }
-.details-source-badge.karrot {
-  background: var(--vp-c-warning-soft);
-  color: var(--vp-c-warning);
+
+.details-section {
+  margin-bottom: 1rem;
 }
-.details-meta {
-  display: grid;
-  gap: 1rem;
-  margin-bottom: 1.5rem;
+.details-section:last-of-type {
+  margin-bottom: 0;
 }
 .details-section h3 {
   margin: 0 0 .5rem 0;
-  font-size: 1rem;
+  font-size: .9rem;
   font-weight: 600;
   color: var(--vp-c-text-1);
 }
+.details-description {
+  margin-bottom: 1rem;
+}
+.details-description h3 {
+  margin: 0 0 .5rem 0;
+  font-size: .9rem;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+}
+.details-description p {
+  margin: 0;
+  line-height: 1.6;
+  color: var(--vp-c-text-2);
+}
 .details-rating-badge {
-  padding: .5rem 1rem;
+  padding: .25rem .5rem;
   border-radius: 8px;
-  font-size: .9rem;
+  font-size: .7rem;
   font-weight: 600;
-  text-transform: uppercase;
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 }
-.details-language-badge, .details-version-badge {
-  padding: .25rem .75rem;
-  border-radius: 6px;
-  font-size: .9rem;
+
+.details-version-badge {
+  padding: .25rem .5rem;
+  border-radius: 8px;
+  font-size: .7rem;
+  font-weight: 500;
   background: var(--vp-c-bg-soft);
   color: var(--vp-c-text-2);
-  border: 1px solid var(--vp-c-border);
-  display: inline-block;
+  border: 1px solid var(--vp-c-divider);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 }
-.details-badges {
+.details-services {
   display: flex;
-  flex-wrap: wrap;
   gap: .5rem;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: thin;
 }
-.details-genre-badge {
-  padding: .2rem .6rem;
-  border-radius: 8px;
-  font-size: .75rem;
-  font-weight: 500;
-  white-space: nowrap;
+
+.details-badges {
+  display: flex;
+  gap: .5rem;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: thin;
 }
 .details-developers {
   display: flex;
   flex-direction: column;
-  gap: .75rem;
+  gap: .5rem;
+  padding-left: 1rem;
 }
 .details-developer {
   display: flex;
-  align-items: center;
-  gap: .75rem;
-  flex-wrap: wrap;
+  flex-direction: column;
+  gap: .5rem;
 }
 .dev-name {
   font-weight: 500;
   color: var(--vp-c-text-1);
+  font-size: .9rem;
+}
+.dev-links {
+  display: flex;
+  gap: .5rem;
+  flex-wrap: wrap;
 }
 .dev-link {
-  font-size: .8rem;
+  font-size: .85rem;
   color: var(--vp-c-brand);
   text-decoration: none;
-  padding: .2rem .5rem;
-  border-radius: 4px;
-  background: var(--vp-c-brand-soft);
+  padding: .4rem .75rem;
+  border-radius: 8px;
+  background: transparent;
   transition: all 0.2s ease;
+  border: 1px solid var(--vp-c-divider);
+  display: inline-flex;
+  align-items: center;
+  gap: .5rem;
+  width: fit-content;
 }
 .dev-link:hover {
-  background: var(--vp-c-brand);
-  color: #fff;
+  background: var(--vp-c-bg-soft);
+  border-color: var(--vp-c-brand);
+}
+.dev-link svg {
+  width: 14px;
+  height: 14px;
 }
 .details-description {
-  margin-bottom: 2rem;
-  padding: 1rem;
-  background: var(--vp-c-bg-soft);
-  border-radius: 8px;
-  border: 1px solid var(--vp-c-border);
+  margin-bottom: 1rem;
 }
 .details-description h3 {
-  margin: 0 0 .75rem 0;
-  font-size: 1.1rem;
+  margin: 0 0 .5rem 0;
+  font-size: .9rem;
+  font-weight: 600;
   color: var(--vp-c-text-1);
 }
 .details-description p {
   margin: 0;
   color: var(--vp-c-text-2);
   line-height: 1.6;
+  font-size: .95rem;
 }
 .details-actions {
   display: flex;
   justify-content: center;
-  padding-top: 1rem;
-  border-top: 1px solid var(--vp-c-border);
-  margin-top: auto;
+  margin-top: 1.5rem;
 }
 .details-install-btn {
-  padding: 1rem 2rem;
-  background: var(--vp-c-brand);
-  color: #fff;
-  border: none;
-  border-radius: 50px;
-  font-size: 1rem;
-  font-weight: 600;
-  cursor: pointer;
-  box-shadow: 0 4px 12px rgb(0 0 0 / .2);
-  transition: all 0.3s ease;
-  min-height: 48px;
+  padding: .85rem 2rem;
+  border-radius: 8px;
+  font-size: .95rem;
+  min-height: 44px;
   width: 100%;
-  max-width: 300px;
 }
-.details-install-btn:hover {
-  background: var(--vp-c-brand-dark);
+.details-install-btn:hover:not(:disabled) {
+  background: var(--vp-button-brand-hover-bg);
   box-shadow: 0 4px 12px rgb(0 0 0 / .2);
 }
-.details-install-btn:active {
-  transform: scale(.98);
-  box-shadow: 0 2px 8px rgb(0 0 0 / .2);
-}
-@media (max-width:767px) {
-  .details-container.desktop {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  top: auto;
-  width: auto;
-  max-width: none;
-  max-height: 80vh;
-  border-radius: 20px 20px 0 0;
-  border-left: none;
-}
-.details-content.desktop {
-  padding: 1.5rem;
-  padding-bottom: 2rem;
-  padding-top: 1.5rem;
-  height: auto;
-  display: block;
-}
-.details-close-btn {
-  display: none;
-}
-.details-handle {
-  display: flex;
-}
-.details-install-btn {
-  padding: 1rem 1.5rem;
-  font-size: .95rem;
-  min-height: 48px;
-  max-width: none;
-}
-}@media (max-width:360px) {
-  .extensions-grid {
-  grid-template-columns: 1fr;
-  gap: .5rem;
-}
-.extension-card {
-  padding: .5rem;
-}
-.extension-card.nsfw-blur {
-  min-height: 140px;
-}
-.extension-icon {
-  width: 36px;
-  height: 36px;
-}
-.extension-name {
-  font-size: .8rem;
-}
-.search-section {
-  padding: .75rem;
-}
-.search-input {
-  font-size: .9rem;
-  padding: .6rem .8rem;
-}
-.clear-btn {
-  min-width: 40px;
-  min-height: 40px;
-  padding: .5rem;
-}
-.rating-filter {
-  font-size: .85rem;
-  padding: .6rem .5rem;
-  min-height: 40px;
-}
-.nsfw-label {
-  font-size: .85rem;
-}
-.nsfw-checkbox {
-  width: 16px;
-  height: 16px;
-}
-.details-btn {
-  font-size: .7rem;
-  padding: .3rem .5rem;
-  min-height: 36px;
-}
-.floating-install-btn {
-  bottom: 1rem;
-  left: 1rem;
-  right: 1rem;
-  width: calc(100vw - 2rem);
-}
-.install-selected-btn {
-  font-size: .9rem;
-  padding: .8rem 1rem;
-  min-height: 44px;
-}
+.details-install-btn:active:not(:disabled) {
+  background: var(--vp-button-brand-active-bg);
+  transform: translateY(0);
+  box-shadow: 0 2px 6px rgb(0 0 0 / .2);
+}
+@media (max-width:600px) {
+  .details-overlay {
+    padding: 1rem;
+  }
+  .details-modal {
+    max-height: calc(100vh - 2rem);
+  }
+  .details-content {
+    padding: 1.5rem;
+  }
+  .details-header {
+    padding-right: 0;
+    margin-bottom: 1.5rem;
+  }
+  .details-icon {
+    width: 64px;
+    height: 64px;
+  }
+  .details-title {
+    font-size: 1.4rem;
+  }
+  .details-close-btn {
+    top: .75rem;
+    right: .75rem;
+  }
 }.repo-manager-section {
   margin-bottom: 2rem;
 }
@@ -1062,7 +1044,7 @@
 .repo-input {
   flex: 1;
   min-width: 150px;
-  padding: .75rem;
+  padding: .75rem !important;
   border: 1px solid var(--vp-c-border);
   border-radius: 4px;
   background: #18181b;
@@ -1073,28 +1055,14 @@
   outline: none;
   border-color: var(--vp-c-brand);
 }
-.add-repo-btn {
-  background: var(--vp-c-success);
-  color: #fff;
-  border: 1px solid var(--vp-c-success);
-  border-radius: 4px;
-  padding: .75rem 1rem;
-  cursor: pointer;
-  font-size: .9rem;
-  transition: all 0.2s ease;
-  min-height: 44px;
-}
-.add-repo-btn:hover {
-  background: var(--vp-c-success-dark);
-  border-color: var(--vp-c-success-dark);
-}
-.add-repo-btn:active {
-  transform: scale(.98);
-}
+
 .custom-repos-list {
   display: flex;
-  flex-direction: column;
   gap: .5rem;
+  overflow-x: auto;
+  overflow-y: hidden;
+  white-space: nowrap;
+  scrollbar-width: thin;
 }
 .custom-repo-item {
   display: flex;
@@ -1104,6 +1072,8 @@
   background: var(--vp-c-bg);
   border: 1px solid var(--vp-c-border);
   border-radius: 4px;
+  flex-shrink: 0;
+  min-width: 250px;
 }
 .repo-display-name {
   color: var(--vp-c-text-1);
@@ -1133,19 +1103,27 @@
   padding: 1rem;
 }
 .advanced-filters {
+  position: relative;
   max-height: 0;
   overflow: hidden;
-  transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
+  transition: max-height 0.3s ease, opacity 0.3s ease, margin-top 0.3s ease, padding-top 0.3s ease, border-top-width 0.3s ease;
   opacity: 0;
-  padding: 0;
+  margin-top: -1rem;
+  padding-top: 0;
   border-top: 0 solid var(--vp-c-border);
 }
 .advanced-filters.expanded {
   max-height: 500px;
   opacity: 1;
+  margin-top: 0;
   padding-top: 1rem;
   border-top: 1px solid var(--vp-c-border);
-  margin-top: 1rem;
+}
+.filters-header {
+  position: absolute;
+  top: 1rem;
+  right: 0;
+  z-index: 10;
 }
 .filter-group {
   margin-bottom: 1rem;
@@ -1153,92 +1131,144 @@
 .filter-group:last-of-type {
   margin-bottom: .5rem;
 }
+.repos-filter-group {
+  position: relative;
+}
+
 .filter-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: .5rem;
 }
+.repos-filter-header {
+  margin-bottom: 0.5rem;
+}
+.repos-clear-btn {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 1;
+}
 .filter-label {
-  font-size: .85rem;
+  font-size: .95rem;
   font-weight: 600;
   color: var(--vp-c-text-1);
-  text-transform: uppercase;
-  letter-spacing: .025em;
 }
-.clear-filter-btn {
-  background: none;
-  border: none;
-  color: var(--vp-c-text-2);
-  font-size: .75rem;
-  cursor: pointer;
+.badge-mode-toggle {
   padding: .2rem .5rem;
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
   border-radius: 4px;
+  color: var(--vp-c-text-2);
+  font-size: .7rem;
+  font-weight: 600;
+  cursor: pointer;
   transition: all 0.2s ease;
+  min-width: 42px;
+  font-family: monospace;
+  letter-spacing: 0.5px;
 }
-.clear-filter-btn:hover {
-  background: var(--vp-c-bg-soft);
+.badge-mode-toggle:hover {
+  background: var(--vp-c-bg);
   color: var(--vp-c-text-1);
+  border-color: var(--vp-c-brand);
+}
+.clear-filter-btn {
+  padding: .2rem .5rem;
+  font-size: .75rem;
 }
 .filter-chips {
   display: flex;
-  flex-wrap: wrap;
   gap: .4rem;
+  overflow-x: auto;
+  overflow-y: hidden;
+  white-space: nowrap;
+  scrollbar-width: thin;
 }
 .filter-chip {
   padding: .35rem .7rem;
   background: var(--vp-c-bg-soft);
-  border: 1px solid #fff0;
+  border: 1px solid var(--vp-c-divider);
   border-radius: 20px;
   color: var(--vp-c-text-2);
   font-size: .8rem;
   cursor: pointer;
   transition: all 0.2s ease;
   white-space: nowrap;
+  flex-shrink: 0;
 }
 .filter-chip:hover {
   background: var(--vp-c-bg);
-  border-color: var(--vp-c-border);
   color: var(--vp-c-text-1);
+  border-color: var(--vp-c-border);
+}
+.filter-chip:focus-visible {
+  outline: 2px solid var(--vp-c-brand);
+  outline-offset: 2px;
 }
 .filter-chip.active {
   background: var(--vp-c-brand);
   color: #fff;
   border-color: var(--vp-c-brand);
 }
+.filter-chip.negated {
+  background: #18181b;
+  color: #71717a;
+  border-color: #27272a;
+  text-decoration: line-through;
+}
+.filter-chip.service-content.active {
+  background: #3b82f6;
+  border-color: #3b82f6;
+}
+.filter-chip.service-tracker.active {
+  background: #10b981;
+  border-color: #10b981;
+}
+.filter-chip.service-cloudflare.active {
+  background: #ef4444;
+  border-color: #ef4444;
+}
+.filter-chip.filter-language.active {
+  background: #0891b2;
+  border-color: #0891b2;
+}
+.filter-chip.filter-badge.active {
+  background: #8b5cf6;
+  border-color: #8b5cf6;
+}
 .filter-actions {
   display: flex;
   justify-content: flex-end;
   padding-top: .75rem;
-  border-top: 1px solid var(--vp-c-border);
+  border-top: 1px solid var(--vp-c-divider);
   margin-top: .75rem;
 }
-.clear-all-btn {
-  background: none;
-  border: 1px solid var(--vp-c-border);
-  color: var(--vp-c-text-2);
-  font-size: .8rem;
-  padding: .5rem 1rem;
-  border-radius: 6px;
-  cursor: pointer;
-  transition: all 0.2s ease;
+
+.filter-tag.language-tag {
+  background: #0891b226;
+  color: #0891b2;
 }
-.clear-all-btn:hover {
-  background: var(--vp-c-danger-soft);
-  border-color: var(--vp-c-danger);
-  color: var(--vp-c-danger);
+.filter-tag.label-tag {
+  background: #8b5cf626;
+  color: #8b5cf6;
 }
-.filter-tag.language-tag {
-  background: var(--vp-c-indigo-soft);
-  color: var(--vp-c-indigo-1);
+.filter-tag.repository-tag {
+  background: var(--vp-c-bg-soft);
+  color: var(--vp-c-text-2);
 }
-.filter-tag.genre-tag {
-  background: var(--vp-c-purple-soft);
-  color: var(--vp-c-purple-1);
+.filter-tag.service-tag.service-content {
+  background: #3b82f626;
+  color: #3b82f6;
 }
-.filter-tag.source-tag {
-  background: var(--vp-c-green-soft);
-  color: var(--vp-c-green-1);
+.filter-tag.service-tag.service-tracker {
+  background: #10b98126;
+  color: #10b981;
+}
+.filter-tag.service-tag.service-cloudflare {
+  background: #ef444426;
+  color: #ef4444;
 }
 .filter-tag.rating-tag {
   background: var(--vp-c-yellow-soft);
@@ -1274,63 +1304,55 @@
 .repos-section {
   border-top-color: var(--vp-c-border);
 }
-.add-repo-inline {
-  display: flex;
-  gap: .5rem;
-}
-.repo-input-inline {
-  flex: 1;
-  padding: .5rem .75rem;
-  background: var(--vp-c-bg-soft);
-  border: 1px solid #fff0;
-  border-radius: 8px;
-  color: var(--vp-c-text-1);
-  font-size: .85rem;
-  transition: all 0.2s ease;
-}
-.repo-input-inline:focus {
-  outline: none;
-  border-color: var(--vp-c-brand);
-  background: var(--vp-c-bg);
+.extension-list .repo-input-container {
+  margin-bottom: 0;
 }
-.repo-input-inline::placeholder {
-  color: var(--vp-c-text-3);
-}
-.add-repo-btn-inline {
-  padding: .5rem 1rem;
-  background: var(--vp-c-brand);
-  border: none;
-  border-radius: 8px;
-  color: #fff;
-  font-size: .85rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  white-space: nowrap;
-}
-.add-repo-btn-inline:hover {
-  background: var(--vp-c-brand-dark);
-}
-.add-repo-btn-inline:disabled {
-  opacity: .6;
-  cursor: not-allowed;
+.extension-list .repo-input {
+  padding-right: 5rem;
 }
+
 .repo-chip {
   display: flex;
   align-items: center;
-  gap: .4rem;
-  padding: .35rem .5rem .35rem .75rem;
   background: var(--vp-c-bg-soft);
-  border: 1px solid var(--vp-c-border);
+  border: 1px solid var(--vp-c-divider);
   border-radius: 20px;
-  color: var(--vp-c-text-1);
   font-size: .8rem;
+  transition: all 0.2s ease;
+}
+.repo-chip.active {
+  background: var(--vp-c-brand);
+  border-color: var(--vp-c-brand);
+}
+.repo-chip.negated {
+  background: #18181b;
+  border-color: #27272a;
+}
+.repo-chip.negated .repo-chip-name {
+  color: #71717a;
+  text-decoration: line-through;
 }
 .repo-chip-name {
+  padding: .35rem .7rem;
   max-width: 200px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  color: var(--vp-c-text-2);
+  border: none;
+  background: transparent;
+  cursor: default;
+  flex: 1;
+}
+.repo-chip-name.clickable {
+  cursor: pointer;
+  transition: color 0.2s ease;
+}
+.repo-chip-name.clickable:hover {
+  color: var(--vp-c-text-1);
+}
+.repo-chip.active .repo-chip-name {
+  color: #fff;
 }
 .repo-chip-remove {
   display: flex;
@@ -1338,17 +1360,24 @@
   justify-content: center;
   width: 18px;
   height: 18px;
-  background: #fff0;
+  background: transparent;
   border: none;
   border-radius: 50%;
-  color: var(--vp-c-text-2);
+  color: var(--vp-c-text-3);
   font-size: .7rem;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: color 0.2s ease;
+  flex-shrink: 0;
+  padding-right: .5rem;
 }
 .repo-chip-remove:hover {
-  background: var(--vp-c-danger-soft);
-  color: var(--vp-c-danger);
+  color: var(--vp-c-text-1);
+}
+.repo-chip.active .repo-chip-remove {
+  color: rgba(255, 255, 255, 0.7);
+}
+.repo-chip.active .repo-chip-remove:hover {
+  color: #fff;
 }
 .no-repos-hint {
   padding: .75rem;
@@ -1390,6 +1419,8 @@
 .search-icon {
   color: var(--vp-c-text-2);
   flex-shrink: 0;
+  width: 14px;
+  height: 14px;
 }
 .search-input {
   flex: 1;
diff --git a/src/.vitepress/theme/components/ExtensionList.vue b/src/.vitepress/theme/components/ExtensionList.vue
index 2547c7a..cdd3b49 100644
--- a/src/.vitepress/theme/components/ExtensionList.vue
+++ b/src/.vitepress/theme/components/ExtensionList.vue
@@ -6,6 +6,12 @@ import {
   buildBaseUrl,
   getContentRatingBg,
   getContentRatingColor,
+  getLanguageEmoji,
+  getLanguageName,
+  hasChapterProviding,
+  hasCloudflareBypassProviding,
+  hasMangaProgressProviding,
+  normalizeLanguageTag,
   saveCustomRepos as saveRepos,
   useExtensions,
   type Extension,
@@ -24,18 +30,58 @@ const {
 
 const searchQuery = ref("");
 const selectedRatings = ref<Set<string>>(new Set());
+const negatedRatings = ref<Set<string>>(new Set());
 const selectedExtensions = ref<Set<string>>(new Set());
 const selectedExtension = ref<Extension | null>(null);
 const showDetails = ref(false);
 const showRepoManager = ref(false);
 const newRepoUrl = ref("");
 const selectedSources = ref<Set<string>>(new Set());
+const negatedSources = ref<Set<string>>(new Set());
 const checkingRepo = ref(false);
 const selectedLanguages = ref<Set<string>>(new Set());
-const selectedGenres = ref<Set<string>>(new Set());
+const negatedLanguages = ref<Set<string>>(new Set());
+const selectedLabels = ref<Set<string>>(new Set());
+const negatedLabels = ref<Set<string>>(new Set());
+const badgeFilterMode = ref<"any" | "all">("any");
+const selectedServices = ref<Set<string>>(new Set());
+const negatedServices = ref<Set<string>>(new Set());
 const filtersExpanded = ref(false);
 
 const availableRatings = ["SAFE", "MATURE", "ADULT"];
+const availableServices = ["Content Service", "Tracker Service", "Cloudflare"];
+
+const formatRating = (rating: string) => {
+  return rating.charAt(0) + rating.slice(1).toLowerCase();
+};
+
+const isValidRepoUrl = computed(() => {
+  const url = newRepoUrl.value.trim();
+  if (!url) return false;
+
+  // Match github.com URLs only
+  if (
+    /^https?:\/\/(www\.)?github\.com\/[a-zA-Z0-9_-]+\/[a-zA-Z0-9_-]+/.test(url)
+  )
+    return true;
+
+  return false;
+});
+
+// Set SAFE as default on mount
+onMounted(async () => {
+  selectedRatings.value = new Set(["SAFE"]);
+  loadRepos();
+  await fetchAllExtensions();
+
+  const urlParams = new URLSearchParams(window.location.search);
+  const searchParam = urlParams.get("search");
+  if (searchParam) {
+    searchQuery.value = searchParam;
+  }
+
+  await handleAddRepoFromUrl();
+});
 
 const showNSFW = computed(() => {
   return (
@@ -64,19 +110,60 @@ const availableLanguages = computed(() => {
       languages.add(ext.metadata.language);
     }
   });
-  return Array.from(languages).sort();
+
+  const validTags = new Set([
+    "en",
+    "es",
+    "fr",
+    "de",
+    "it",
+    "pt",
+    "ru",
+    "ja",
+    "zh",
+    "ko",
+    "ar",
+    "tr",
+    "pl",
+    "nl",
+    "id",
+    "th",
+    "vi",
+    "hi",
+  ]);
+
+  return Array.from(languages).sort((a, b) => {
+    const aLower = a.toLowerCase();
+    const bLower = b.toLowerCase();
+
+    // Multi always first
+    if (aLower === "multi") return -1;
+    if (bLower === "multi") return 1;
+
+    // Valid IETF tags come before invalid ones
+    const aNormalized = normalizeLanguageTag(a);
+    const bNormalized = normalizeLanguageTag(b);
+    const aValid = validTags.has(aNormalized);
+    const bValid = validTags.has(bNormalized);
+
+    if (aValid && !bValid) return -1;
+    if (!aValid && bValid) return 1;
+
+    // Both valid or both invalid - sort alphabetically
+    return a.localeCompare(b);
+  });
 });
 
-const availableGenres = computed(() => {
-  const genres = new Set<string>();
+const availableLabels = computed(() => {
+  const labels = new Set<string>();
   extensions.value.forEach((ext) => {
     if (ext.metadata?.badges) {
       ext.metadata.badges.forEach((badge) => {
-        genres.add(badge.label);
+        labels.add(badge.label);
       });
     }
   });
-  return Array.from(genres).sort();
+  return Array.from(labels).sort();
 });
 
 const filteredExtensions = computed(() => {
@@ -97,85 +184,182 @@ const filteredExtensions = computed(() => {
         ));
 
     const matchesRating =
-      selectedRatings.value.size === 0 ||
-      (extension.metadata?.contentRating &&
-        selectedRatings.value.has(extension.metadata.contentRating));
+      (selectedRatings.value.size === 0 ||
+        (extension.metadata?.contentRating &&
+          selectedRatings.value.has(extension.metadata.contentRating))) &&
+      !(
+        extension.metadata?.contentRating &&
+        negatedRatings.value.has(extension.metadata.contentRating)
+      );
 
     const matchesSource =
-      selectedSources.value.size === 0 ||
-      selectedSources.value.has(extension.source);
+      (selectedSources.value.size === 0 ||
+        selectedSources.value.has(extension.source)) &&
+      !negatedSources.value.has(extension.source);
 
     const matchesLanguage =
-      selectedLanguages.value.size === 0 ||
-      (extension.metadata?.language &&
-        selectedLanguages.value.has(extension.metadata.language));
+      (selectedLanguages.value.size === 0 ||
+        (extension.metadata?.language &&
+          selectedLanguages.value.has(extension.metadata.language))) &&
+      !(
+        extension.metadata?.language &&
+        negatedLanguages.value.has(extension.metadata.language)
+      );
 
-    const matchesGenre =
-      selectedGenres.value.size === 0 ||
-      (extension.metadata?.badges &&
-        extension.metadata.badges.some((badge) =>
-          selectedGenres.value.has(badge.label),
-        ));
+    const matchesLabel =
+      (selectedLabels.value.size === 0 ||
+        (extension.metadata?.badges &&
+          (badgeFilterMode.value === "any"
+            ? extension.metadata.badges.some((badge) =>
+                selectedLabels.value.has(badge.label),
+              )
+            : Array.from(selectedLabels.value).every((label) =>
+                extension.metadata?.badges?.some(
+                  (badge) => badge.label === label,
+                ),
+              )))) &&
+      !Array.from(negatedLabels.value).some(
+        (label) =>
+          extension.metadata?.badges &&
+          extension.metadata.badges.some((badge) => badge.label === label),
+      );
+
+    const matchesService =
+      (selectedServices.value.size === 0 ||
+        (extension.metadata?.capabilities &&
+          Array.from(selectedServices.value).every((service) => {
+            if (!extension.metadata?.capabilities) return false;
+            if (service === "Content Service")
+              return hasChapterProviding(extension.metadata.capabilities);
+            if (service === "Tracker Service")
+              return hasMangaProgressProviding(extension.metadata.capabilities);
+            if (service === "Cloudflare")
+              return hasCloudflareBypassProviding(
+                extension.metadata.capabilities,
+              );
+            return false;
+          }))) &&
+      !Array.from(negatedServices.value).some((service) => {
+        if (!extension.metadata?.capabilities) return false;
+        if (service === "Content Service")
+          return hasChapterProviding(extension.metadata.capabilities);
+        if (service === "Tracker Service")
+          return hasMangaProgressProviding(extension.metadata.capabilities);
+        if (service === "Cloudflare")
+          return hasCloudflareBypassProviding(extension.metadata.capabilities);
+        return false;
+      });
 
     return (
       matchesSearch &&
       matchesRating &&
       matchesSource &&
       matchesLanguage &&
-      matchesGenre
+      matchesLabel &&
+      matchesService
     );
   });
 });
 
 const toggleLanguage = (language: string) => {
+  // Three-state: unselected → selected → negated → unselected
   if (selectedLanguages.value.has(language)) {
     selectedLanguages.value.delete(language);
+    negatedLanguages.value.add(language);
+  } else if (negatedLanguages.value.has(language)) {
+    negatedLanguages.value.delete(language);
   } else {
     selectedLanguages.value.add(language);
   }
   selectedLanguages.value = new Set(selectedLanguages.value);
+  negatedLanguages.value = new Set(negatedLanguages.value);
 };
 
-const toggleGenre = (genre: string) => {
-  if (selectedGenres.value.has(genre)) {
-    selectedGenres.value.delete(genre);
+const toggleLabel = (label: string) => {
+  // Three-state: unselected → selected → negated → unselected
+  if (selectedLabels.value.has(label)) {
+    selectedLabels.value.delete(label);
+    negatedLabels.value.add(label);
+  } else if (negatedLabels.value.has(label)) {
+    negatedLabels.value.delete(label);
   } else {
-    selectedGenres.value.add(genre);
+    selectedLabels.value.add(label);
   }
-  selectedGenres.value = new Set(selectedGenres.value);
+  selectedLabels.value = new Set(selectedLabels.value);
+  negatedLabels.value = new Set(negatedLabels.value);
+};
+
+const toggleBadgeFilterMode = () => {
+  badgeFilterMode.value = badgeFilterMode.value === "any" ? "all" : "any";
 };
 
 const toggleSource = (source: string) => {
+  // Three-state: unselected → selected → negated → unselected
   if (selectedSources.value.has(source)) {
     selectedSources.value.delete(source);
+    negatedSources.value.add(source);
+  } else if (negatedSources.value.has(source)) {
+    negatedSources.value.delete(source);
   } else {
     selectedSources.value.add(source);
   }
   selectedSources.value = new Set(selectedSources.value);
+  negatedSources.value = new Set(negatedSources.value);
+};
+
+const toggleService = (service: string) => {
+  // Three-state: unselected → selected → negated → unselected
+  if (selectedServices.value.has(service)) {
+    selectedServices.value.delete(service);
+    negatedServices.value.add(service);
+  } else if (negatedServices.value.has(service)) {
+    negatedServices.value.delete(service);
+  } else {
+    selectedServices.value.add(service);
+  }
+  selectedServices.value = new Set(selectedServices.value);
+  negatedServices.value = new Set(negatedServices.value);
 };
 
 const toggleRating = (rating: string) => {
+  // Three-state: unselected → selected → negated → unselected
   if (selectedRatings.value.has(rating)) {
     selectedRatings.value.delete(rating);
+    negatedRatings.value.add(rating);
+  } else if (negatedRatings.value.has(rating)) {
+    negatedRatings.value.delete(rating);
   } else {
     selectedRatings.value.add(rating);
   }
   selectedRatings.value = new Set(selectedRatings.value);
+  negatedRatings.value = new Set(negatedRatings.value);
 };
 
 const clearAllFilters = () => {
   selectedLanguages.value = new Set();
-  selectedGenres.value = new Set();
+  negatedLanguages.value = new Set();
+  selectedLabels.value = new Set();
+  negatedLabels.value = new Set();
   selectedSources.value = new Set();
+  negatedSources.value = new Set();
   selectedRatings.value = new Set();
+  negatedRatings.value = new Set();
+  selectedServices.value = new Set();
+  negatedServices.value = new Set();
 };
 
 const clearSearch = () => {
   searchQuery.value = "";
   selectedRatings.value = new Set();
+  negatedRatings.value = new Set();
   selectedSources.value = new Set();
+  negatedSources.value = new Set();
   selectedLanguages.value = new Set();
-  selectedGenres.value = new Set();
+  negatedLanguages.value = new Set();
+  selectedLabels.value = new Set();
+  negatedLabels.value = new Set();
+  selectedServices.value = new Set();
+  negatedServices.value = new Set();
 };
 
 const toggleExtension = (extension: Extension) => {
@@ -199,21 +383,27 @@ const getBaseUrl = (source: string) => {
 };
 
 const installSelectedExtensions = () => {
-  if (selectedExtensions.value.size === 0) {
-    alert("Please select at least one extension");
+  const extensionsToInstall =
+    selectedExtensions.value.size === 0
+      ? filteredExtensions.value.map((ext) => [
+          ext.name,
+          getBaseUrl(ext.source),
+        ])
+      : Array.from(selectedExtensions.value)
+          .map((key) => {
+            const extension = extensions.value.find(
+              (ext) => `${ext.source}-${ext.name}` === key,
+            );
+            if (!extension) return null;
+            return [extension.name, getBaseUrl(extension.source)];
+          })
+          .filter(Boolean);
+
+  if (extensionsToInstall.length === 0) {
+    alert("No extensions to install");
     return;
   }
 
-  const extensionsToInstall = Array.from(selectedExtensions.value)
-    .map((key) => {
-      const extension = extensions.value.find(
-        (ext) => `${ext.source}-${ext.name}` === key,
-      );
-      if (!extension) return null;
-      return [extension.name, getBaseUrl(extension.source)];
-    })
-    .filter(Boolean);
-
   const installUrl = `paperback://installExtensions?data=${btoa(JSON.stringify(extensionsToInstall))}`;
   window.location.href = installUrl;
 };
@@ -246,25 +436,37 @@ const addCustomRepo = async () => {
     const result = await addRepo(newRepoUrl.value);
 
     if (!result.success) {
+      // Silently fail if repository is already added
+      if (result.error?.includes("already added")) {
+        newRepoUrl.value = "";
+        checkingRepo.value = false;
+        return;
+      }
       alert(result.error);
+      checkingRepo.value = false;
       return;
     }
 
     newRepoUrl.value = "";
-    loading.value = true;
-    await fetchAllExtensions();
+
+    // Fetch extensions dynamically without showing loading spinner
+    await fetchAllExtensions(true, false);
+    checkingRepo.value = false;
   } catch (e) {
     alert("An error occurred while adding the repository");
     console.error(e);
-  } finally {
     checkingRepo.value = false;
   }
 };
 
 const removeCustomRepo = async (repoId: string) => {
+  // Remove from selected sources if it was selected
+  if (selectedSources.value.has(repoId)) {
+    selectedSources.value.delete(repoId);
+  }
   removeRepo(repoId);
-  loading.value = true;
-  await fetchAllExtensions();
+  // Fetch extensions dynamically without showing loading spinner
+  await fetchAllExtensions(true, false);
 };
 
 const handleAddRepoFromUrl = async () => {
@@ -291,19 +493,6 @@ const handleAddRepoFromUrl = async () => {
     window.history.replaceState({}, "", newUrl);
   }
 };
-
-onMounted(async () => {
-  loadRepos();
-  await fetchAllExtensions();
-
-  const urlParams = new URLSearchParams(window.location.search);
-  const searchParam = urlParams.get("search");
-  if (searchParam) {
-    searchQuery.value = searchParam;
-  }
-
-  await handleAddRepoFromUrl();
-});
 </script>
 
 <template>
@@ -322,53 +511,32 @@ onMounted(async () => {
       <div class="search-section">
         <div class="search-bar">
           <div class="search-input-container">
-            <span class="search-icon">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="18"
-                height="18"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              >
-                <circle cx="11" cy="11" r="8" />
-                <line x1="21" y1="21" x2="16.65" y2="16.65" />
-              </svg>
-            </span>
+            <svg
+              class="search-icon"
+              width="14"
+              height="14"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
+                clip-rule="evenodd"
+              />
+            </svg>
             <input
               v-model="searchQuery"
               type="text"
               placeholder="Search extensions..."
               class="search-input"
             />
-            <span
-              v-if="
-                !searchQuery &&
-                selectedRatings.size === 0 &&
-                selectedSources.size === 0 &&
-                selectedLanguages.size === 0 &&
-                selectedGenres.size === 0
-              "
-              class="search-shortcut"
-            >
-              <kbd>⌘</kbd><kbd>⇧</kbd><kbd>K</kbd>
-            </span>
             <button
-              v-if="
-                searchQuery ||
-                selectedRatings.size > 0 ||
-                selectedSources.size > 0 ||
-                selectedLanguages.size > 0 ||
-                selectedGenres.size > 0
-              "
-              class="clear-btn"
+              v-if="searchQuery"
+              class="input-btn btn-secondary"
               title="Clear search"
-              @click="clearSearch"
+              @click="searchQuery = ''"
             >
-              ✕
+              Clear
             </button>
           </div>
         </div>
@@ -380,28 +548,40 @@ onMounted(async () => {
               :class="{
                 active:
                   filtersExpanded ||
-                  selectedSources.size > 0 ||
                   selectedRatings.size > 0 ||
+                  negatedRatings.size > 0 ||
                   selectedLanguages.size > 0 ||
-                  selectedGenres.size > 0,
+                  negatedLanguages.size > 0 ||
+                  selectedLabels.size > 0 ||
+                  negatedLabels.size > 0 ||
+                  selectedServices.size > 0 ||
+                  negatedServices.size > 0,
               }"
               @click="filtersExpanded = !filtersExpanded"
             >
               <span class="btn-text">Filters</span>
               <span
                 v-if="
-                  selectedSources.size +
-                    selectedRatings.size +
+                  selectedRatings.size +
+                    negatedRatings.size +
                     selectedLanguages.size +
-                    selectedGenres.size >
+                    negatedLanguages.size +
+                    selectedLabels.size +
+                    negatedLabels.size +
+                    selectedServices.size +
+                    negatedServices.size >
                   0
                 "
                 class="filter-count"
                 >{{
-                  selectedSources.size +
                   selectedRatings.size +
+                  negatedRatings.size +
                   selectedLanguages.size +
-                  selectedGenres.size
+                  negatedLanguages.size +
+                  selectedLabels.size +
+                  negatedLabels.size +
+                  selectedServices.size +
+                  negatedServices.size
                 }}</span
               >
               <span class="expand-icon" :class="{ expanded: filtersExpanded }"
@@ -411,13 +591,20 @@ onMounted(async () => {
 
             <button
               class="action-btn"
-              :class="{ active: showRepoManager || customRepos.length > 0 }"
+              :class="{
+                active:
+                  showRepoManager ||
+                  selectedSources.size > 0 ||
+                  negatedSources.size > 0,
+              }"
               @click="showRepoManager = !showRepoManager"
             >
-              <span class="btn-text">Repos</span>
-              <span v-if="customRepos.length > 0" class="filter-count">{{
-                customRepos.length
-              }}</span>
+              <span class="btn-text">Repositories</span>
+              <span
+                v-if="selectedSources.size + negatedSources.size > 0"
+                class="filter-count"
+                >{{ selectedSources.size + negatedSources.size }}</span
+              >
               <span class="expand-icon" :class="{ expanded: showRepoManager }"
                 >▼</span
               >
@@ -427,16 +614,28 @@ onMounted(async () => {
 
         <!-- Collapsible Filters Section -->
         <div class="advanced-filters" :class="{ expanded: filtersExpanded }">
+          <div class="filters-header">
+            <button
+              v-if="
+                selectedRatings.size > 0 ||
+                negatedRatings.size > 0 ||
+                selectedLanguages.size > 0 ||
+                negatedLanguages.size > 0 ||
+                selectedLabels.size > 0 ||
+                negatedLabels.size > 0 ||
+                selectedServices.size > 0 ||
+                negatedServices.size > 0
+              "
+              class="btn-secondary clear-filters-btn"
+              @click="clearAllFilters"
+            >
+              Clear Filters
+            </button>
+          </div>
+
           <div class="filter-group">
             <div class="filter-header">
               <span class="filter-label">Content Rating</span>
-              <button
-                v-if="selectedRatings.size > 0"
-                class="clear-filter-btn"
-                @click="selectedRatings = new Set()"
-              >
-                Clear
-              </button>
             </div>
             <div class="filter-chips">
               <button
@@ -445,37 +644,37 @@ onMounted(async () => {
                 class="filter-chip"
                 :class="{
                   active: selectedRatings.has(rating),
+                  negated: negatedRatings.has(rating),
                   'rating-safe': rating === 'SAFE',
                   'rating-mature': rating === 'MATURE',
                   'rating-adult': rating === 'ADULT',
                 }"
                 @click="toggleRating(rating)"
               >
-                {{ rating }}
+                {{ formatRating(rating) }}
               </button>
             </div>
           </div>
 
           <div class="filter-group">
             <div class="filter-header">
-              <span class="filter-label">Sources</span>
-              <button
-                v-if="selectedSources.size > 0"
-                class="clear-filter-btn"
-                @click="selectedSources = new Set()"
-              >
-                Clear
-              </button>
+              <span class="filter-label">Services</span>
             </div>
             <div class="filter-chips">
               <button
-                v-for="source in availableSources"
-                :key="source"
+                v-for="service in availableServices"
+                :key="service"
                 class="filter-chip"
-                :class="{ active: selectedSources.has(source) }"
-                @click="toggleSource(source)"
+                :class="{
+                  active: selectedServices.has(service),
+                  negated: negatedServices.has(service),
+                  'service-content': service === 'Content Service',
+                  'service-tracker': service === 'Tracker Service',
+                  'service-cloudflare': service === 'Cloudflare',
+                }"
+                @click="toggleService(service)"
               >
-                {{ getSourceDisplayName(source) }}
+                {{ service }}
               </button>
             </div>
           </div>
@@ -483,59 +682,56 @@ onMounted(async () => {
           <div class="filter-group">
             <div class="filter-header">
               <span class="filter-label">Languages</span>
-              <button
-                v-if="selectedLanguages.size > 0"
-                class="clear-filter-btn"
-                @click="selectedLanguages = new Set()"
-              >
-                Clear
-              </button>
             </div>
             <div class="filter-chips">
               <button
                 v-for="language in availableLanguages"
                 :key="language"
-                class="filter-chip"
-                :class="{ active: selectedLanguages.has(language) }"
+                class="filter-chip filter-language"
+                :class="{
+                  active: selectedLanguages.has(language),
+                  negated: negatedLanguages.has(language),
+                }"
                 @click="toggleLanguage(language)"
               >
-                {{ language }}
+                <template v-if="getLanguageEmoji(language)"
+                  >{{ getLanguageEmoji(language) }}&nbsp;</template
+                >{{ getLanguageName(language) }}
               </button>
             </div>
           </div>
 
           <div class="filter-group">
             <div class="filter-header">
-              <span class="filter-label">Genres</span>
+              <span class="filter-label">Badges</span>
               <button
-                v-if="selectedGenres.size > 0"
-                class="clear-filter-btn"
-                @click="selectedGenres = new Set()"
+                class="badge-mode-toggle"
+                :title="
+                  badgeFilterMode === 'any'
+                    ? 'Match ANY selected badge (OR)'
+                    : 'Match ALL selected badges (AND)'
+                "
+                @click="toggleBadgeFilterMode"
               >
-                Clear
+                <span v-if="badgeFilterMode === 'any'">OR</span>
+                <span v-else>AND</span>
               </button>
             </div>
             <div class="filter-chips">
               <button
-                v-for="genre in availableGenres"
-                :key="genre"
-                class="filter-chip"
-                :class="{ active: selectedGenres.has(genre) }"
-                @click="toggleGenre(genre)"
+                v-for="label in availableLabels"
+                :key="label"
+                class="filter-chip filter-badge"
+                :class="{
+                  active: selectedLabels.has(label),
+                  negated: negatedLabels.has(label),
+                }"
+                @click="toggleLabel(label)"
               >
-                {{ genre }}
+                {{ label }}
               </button>
             </div>
           </div>
-
-          <div
-            v-if="selectedLanguages.size > 0 || selectedGenres.size > 0"
-            class="filter-actions"
-          >
-            <button class="clear-all-btn" @click="clearAllFilters">
-              Clear All Filters
-            </button>
-          </div>
         </div>
 
         <!-- Collapsible Repository Manager -->
@@ -547,17 +743,17 @@ onMounted(async () => {
             <div class="filter-header">
               <span class="filter-label">Add Repository</span>
             </div>
-            <div class="add-repo-inline">
+            <div class="search-input-container repo-input-container">
               <input
                 v-model="newRepoUrl"
                 type="text"
-                placeholder="owner/repo or https://github.com/owner/repo"
-                class="repo-input-inline"
+                placeholder="https://github.com/owner/repo"
+                class="search-input repo-input"
                 @keyup.enter="addCustomRepo"
               />
               <button
-                class="add-repo-btn-inline"
-                :disabled="checkingRepo"
+                class="input-btn btn-brand add-repo-btn"
+                :disabled="checkingRepo || !isValidRepoUrl"
                 @click="addCustomRepo"
               >
                 {{ checkingRepo ? "Adding..." : "Add" }}
@@ -565,52 +761,74 @@ onMounted(async () => {
             </div>
           </div>
 
-          <div v-if="customRepos.length > 0" class="filter-group">
-            <div class="filter-header">
-              <span class="filter-label">Custom Repositories</span>
-              <button
-                v-if="customRepos.length > 0"
-                class="clear-filter-btn"
-                @click="customRepos.forEach((r) => removeCustomRepo(r.id))"
-              >
-                Remove All
-              </button>
+          <div class="filter-group repos-filter-group">
+            <div class="filter-header repos-filter-header">
+              <span class="filter-label">Installed Repositories</span>
             </div>
+            <button
+              v-if="selectedSources.size > 0"
+              class="btn-secondary clear-filters-btn repos-clear-btn"
+              @click="selectedSources = new Set()"
+            >
+              Clear Filters
+            </button>
             <div class="filter-chips">
-              <div v-for="repo in customRepos" :key="repo.id" class="repo-chip">
-                <span class="repo-chip-name">{{ repo.displayName }}</span>
+              <div
+                v-for="source in availableSources"
+                :key="source"
+                class="repo-chip"
+                :class="{
+                  active: selectedSources.has(source),
+                  negated: negatedSources.has(source),
+                }"
+              >
+                <button
+                  class="repo-chip-name clickable"
+                  @click="toggleSource(source)"
+                >
+                  {{ getSourceDisplayName(source) }}
+                </button>
                 <button
+                  v-if="source !== 'inkdex'"
                   class="repo-chip-remove"
-                  @click="removeCustomRepo(repo.id)"
+                  @click="removeCustomRepo(source)"
                 >
                   ✕
                 </button>
               </div>
             </div>
           </div>
-
-          <div v-if="customRepos.length === 0" class="no-repos-hint">
-            <span
-              >No custom repositories added. Add a GitHub repository
-              above.</span
-            >
-          </div>
         </div>
       </div>
 
       <!-- Results Summary -->
       <div class="results-summary">
         <span class="results-count">
-          Showing {{ filteredExtensions.length }} of
-          {{ extensions.length }} extensions
+          <template v-if="filteredExtensions.length === extensions.length">
+            Showing {{ extensions.length }} extensions
+          </template>
+          <template v-else>
+            Showing {{ filteredExtensions.length }} of
+            {{ extensions.length }} extensions
+            <span class="hidden-count">
+              ({{ extensions.length - filteredExtensions.length }} hidden
+              because of filters)
+            </span>
+          </template>
         </span>
         <span
           v-if="
             searchQuery ||
             selectedRatings.size > 0 ||
-            selectedSources.size > 0 ||
+            negatedRatings.size > 0 ||
             selectedLanguages.size > 0 ||
-            selectedGenres.size > 0
+            negatedLanguages.size > 0 ||
+            selectedLabels.size > 0 ||
+            negatedLabels.size > 0 ||
+            selectedSources.size > 0 ||
+            negatedSources.size > 0 ||
+            selectedServices.size > 0 ||
+            negatedServices.size > 0
           "
           class="active-filters"
         >
@@ -622,13 +840,19 @@ onMounted(async () => {
             :key="`rating-${rating}`"
             class="filter-tag rating-tag"
             :class="`rating-${rating.toLowerCase()}`"
-            >{{ rating }}</span
+            >{{ formatRating(rating) }}</span
           >
+
           <span
-            v-for="source in selectedSources"
-            :key="`source-${source}`"
-            class="filter-tag source-tag"
-            >{{ getSourceDisplayName(source) }}</span
+            v-for="service in selectedServices"
+            :key="`service-${service}`"
+            class="filter-tag service-tag"
+            :class="{
+              'service-content': service === 'Content Service',
+              'service-tracker': service === 'Tracker Service',
+              'service-cloudflare': service === 'Cloudflare',
+            }"
+            >{{ service }}</span
           >
           <span
             v-for="lang in selectedLanguages"
@@ -637,10 +861,52 @@ onMounted(async () => {
             >{{ lang }}</span
           >
           <span
-            v-for="genre in selectedGenres"
-            :key="`genre-${genre}`"
-            class="filter-tag genre-tag"
-            >{{ genre }}</span
+            v-for="label in selectedLabels"
+            :key="`label-${label}`"
+            class="filter-tag label-tag"
+            >{{ label }}</span
+          >
+          <span
+            v-for="source in selectedSources"
+            :key="`source-${source}`"
+            class="filter-tag source-tag repository-tag"
+            >{{ getSourceDisplayName(source) }}</span
+          >
+          <span
+            v-for="rating in negatedRatings"
+            :key="`negated-rating-${rating}`"
+            class="filter-tag rating-tag negated-tag"
+            :class="`rating-${rating.toLowerCase()}`"
+            >{{ formatRating(rating) }}</span
+          >
+          <span
+            v-for="service in negatedServices"
+            :key="`negated-service-${service}`"
+            class="filter-tag service-tag negated-tag"
+            :class="{
+              'service-content': service === 'Content Service',
+              'service-tracker': service === 'Tracker Service',
+              'service-cloudflare': service === 'Cloudflare',
+            }"
+            >{{ service }}</span
+          >
+          <span
+            v-for="lang in negatedLanguages"
+            :key="`negated-lang-${lang}`"
+            class="filter-tag language-tag negated-tag"
+            >{{ lang }}</span
+          >
+          <span
+            v-for="label in negatedLabels"
+            :key="`negated-label-${label}`"
+            class="filter-tag label-tag negated-tag"
+            >{{ label }}</span
+          >
+          <span
+            v-for="source in negatedSources"
+            :key="`negated-source-${source}`"
+            class="filter-tag source-tag repository-tag negated-tag"
+            >{{ getSourceDisplayName(source) }}</span
           >
         </span>
       </div>
@@ -654,25 +920,7 @@ onMounted(async () => {
             selected: selectedExtensions.has(
               `${extension.source}-${extension.name}`,
             ),
-            'nsfw-blur':
-              !showNSFW &&
-              extension.metadata &&
-              (extension.metadata.contentRating === 'MATURE' ||
-                extension.metadata.contentRating === 'ADULT'),
           }"
-          :style="
-            !showNSFW &&
-            extension.metadata &&
-            (extension.metadata.contentRating === 'MATURE' ||
-              extension.metadata.contentRating === 'ADULT')
-              ? {
-                  backgroundImage: `url(${extension.iconUrl})`,
-                  backgroundSize: '100% 100%',
-                  backgroundPosition: 'center',
-                  backgroundRepeat: 'no-repeat',
-                }
-              : {}
-          "
           @click="toggleExtension(extension)"
         >
           <div class="extension-header">
@@ -684,14 +932,14 @@ onMounted(async () => {
               @error="
                 (e) =>
                   ((e.target as HTMLImageElement).src =
-                    'https://paperback.moe/pb-placeholder.png')
+                    'https://paperback.moe/pb-logo.png')
               "
             />
             <div class="extension-header-text">
               <h3 class="extension-name">
                 {{ extension.name }}
               </h3>
-              <div v-if="extension.metadata" class="header-badges">
+              <div v-if="extension.metadata" class="card-badges">
                 <span
                   class="rating-badge"
                   :style="{
@@ -703,7 +951,7 @@ onMounted(async () => {
                     ),
                   }"
                 >
-                  {{ extension.metadata.contentRating }}
+                  {{ formatRating(extension.metadata.contentRating) }}
                 </span>
                 <span class="version-badge"
                   >v{{ extension.metadata.version }}</span
@@ -720,15 +968,40 @@ onMounted(async () => {
               {{ extension.metadata.description }}
             </div>
 
-            <div
-              v-if="
-                extension.metadata.badges &&
-                extension.metadata.badges.length > 0
-              "
-              class="extension-badges"
-            >
+            <div class="extension-tags-row">
+              <span
+                v-if="
+                  extension.metadata.capabilities &&
+                  hasChapterProviding(extension.metadata.capabilities)
+                "
+                class="service-badge service-content"
+                >Content Service</span
+              >
               <span
-                v-for="badge in extension.metadata.badges.slice(0, 3)"
+                v-if="
+                  extension.metadata.capabilities &&
+                  hasMangaProgressProviding(extension.metadata.capabilities)
+                "
+                class="service-badge service-tracker"
+                >Tracker Service</span
+              >
+              <span
+                v-if="
+                  extension.metadata.capabilities &&
+                  hasCloudflareBypassProviding(extension.metadata.capabilities)
+                "
+                class="service-badge service-cloudflare"
+                >Cloudflare</span
+              >
+              <span v-if="extension.metadata.language" class="language-badge">
+                <template v-if="getLanguageEmoji(extension.metadata.language)"
+                  >{{
+                    getLanguageEmoji(extension.metadata.language)
+                  }}&nbsp;</template
+                >{{ getLanguageName(extension.metadata.language) }}
+              </span>
+              <span
+                v-for="badge in extension.metadata.badges?.slice(0, 3)"
                 :key="badge.label"
                 class="genre-badge"
                 :style="{
@@ -740,53 +1013,56 @@ onMounted(async () => {
               </span>
             </div>
 
-            <div v-if="extension.metadata.language" class="extension-language">
-              <span class="language-badge">{{
-                extension.metadata.language
-              }}</span>
+            <div class="extension-repo">
+              <span class="source-badge">
+                {{ getSourceDisplayName(extension.source) }}
+              </span>
             </div>
           </div>
 
-          <div class="extension-actions" @click.stop>
-            <button
-              class="details-btn"
-              @click="showExtensionDetails(extension)"
+          <div class="extension-footer">
+            <span
+              v-if="
+                selectedExtensions.has(`${extension.source}-${extension.name}`)
+              "
+              class="selected-indicator"
             >
-              Details
-            </button>
-          </div>
-
-          <div
-            v-if="
-              selectedExtensions.has(`${extension.source}-${extension.name}`)
-            "
-            class="selected-indicator"
-          >
-            <span class="selected-checkmark">✓ Selected</span>
+              ✓ Selected
+            </span>
+            <div class="extension-actions" @click.stop>
+              <button
+                class="btn-secondary details-btn"
+                @click="showExtensionDetails(extension)"
+              >
+                Details
+              </button>
+            </div>
           </div>
         </div>
       </div>
 
       <!-- Floating Install Button -->
-      <div v-if="selectedExtensions.size > 0" class="floating-install-btn">
-        <button class="install-selected-btn" @click="installSelectedExtensions">
-          <span>Install Selected</span>
-          <span class="selected-count">{{ selectedExtensions.size }}</span>
+      <div v-if="filteredExtensions.length > 0" class="floating-install-btn">
+        <button
+          class="install-selected-btn btn-brand"
+          @click="installSelectedExtensions"
+        >
+          <span v-if="selectedExtensions.size === 0">Install All</span>
+          <span v-else>Install Selected</span>
+          <span v-if="selectedExtensions.size > 0" class="selected-count">{{
+            selectedExtensions.size
+          }}</span>
         </button>
       </div>
 
       <div v-if="filteredExtensions.length === 0" class="no-results">
         <div class="no-results-icon">🔍</div>
-        <h3>No sources found</h3>
+        <h3>No extensions found</h3>
         <p>Try adjusting your search terms or filters.</p>
-        <button class="clear-search-btn" @click="clearSearch">
-          Clear Search
+        <button class="clear-search-btn btn-brand" @click="clearSearch">
+          Clear Search & Filters
         </button>
       </div>
-
-      <div v-if="!loading && !error" class="stats">
-        Total sources: {{ extensions.length }}
-      </div>
     </div>
 
     <!-- Extension Details Component -->
diff --git a/src/.vitepress/theme/components/ExtensionSearch.vue b/src/.vitepress/theme/components/ExtensionSearch.vue
index 40dce22..c3e67f7 100644
--- a/src/.vitepress/theme/components/ExtensionSearch.vue
+++ b/src/.vitepress/theme/components/ExtensionSearch.vue
@@ -116,8 +116,6 @@ defineExpose({ open });
               <svg
                 class="search-icon"
                 xmlns="http://www.w3.org/2000/svg"
-                width="20"
-                height="20"
                 viewBox="0 0 24 24"
                 fill="none"
                 stroke="currentColor"
@@ -175,7 +173,7 @@ defineExpose({ open });
                   @error="
                     (e) =>
                       ((e.target as HTMLImageElement).src =
-                        'https://paperback.moe/pb-placeholder.png')
+                        'https://paperback.moe/pb-logo.png')
                   "
                 />
                 <div class="result-info">
diff --git a/src/.vitepress/theme/lib/extensions.ts b/src/.vitepress/theme/lib/extensions.ts
index e5758ef..d494e97 100644
--- a/src/.vitepress/theme/lib/extensions.ts
+++ b/src/.vitepress/theme/lib/extensions.ts
@@ -81,6 +81,124 @@ export const getContentRatingBg = (rating: string): string => {
   }
 };
 
+// Map common language strings to valid IETF language tags
+export const normalizeLanguageTag = (language: string | null): string => {
+  if (!language) return "en";
+
+  const langMap: Record<string, string> = {
+    english: "en",
+    en: "en",
+    spanish: "es",
+    es: "es",
+    french: "fr",
+    fr: "fr",
+    german: "de",
+    de: "de",
+    italian: "it",
+    it: "it",
+    portuguese: "pt",
+    pt: "pt",
+    russian: "ru",
+    ru: "ru",
+    japanese: "ja",
+    ja: "ja",
+    chinese: "zh",
+    zh: "zh",
+    korean: "ko",
+    ko: "ko",
+    arabic: "ar",
+    ar: "ar",
+    turkish: "tr",
+    tr: "tr",
+    polish: "pl",
+    pl: "pl",
+    dutch: "nl",
+    nl: "nl",
+    indonesian: "id",
+    id: "id",
+    thai: "th",
+    th: "th",
+    vietnamese: "vi",
+    vi: "vi",
+    hindi: "hi",
+    hi: "hi",
+  };
+
+  const normalized = language.toLowerCase().trim();
+  return langMap[normalized] || normalized;
+};
+
+// Get full language name from language code
+export const getLanguageName = (language: string | null): string => {
+  if (!language) return "English";
+
+  const normalized = normalizeLanguageTag(language);
+
+  if (normalized.toLowerCase() === "multi") {
+    return "Multi Language";
+  }
+
+  const languageNames: Record<string, string> = {
+    en: "English",
+    es: "Spanish",
+    fr: "French",
+    de: "German",
+    it: "Italian",
+    pt: "Portuguese",
+    ru: "Russian",
+    ja: "Japanese",
+    zh: "Chinese",
+    ko: "Korean",
+    ar: "Arabic",
+    tr: "Turkish",
+    pl: "Polish",
+    nl: "Dutch",
+    id: "Indonesian",
+    th: "Thai",
+    vi: "Vietnamese",
+    hi: "Hindi",
+  };
+
+  return (
+    languageNames[normalized] ||
+    normalized.charAt(0).toUpperCase() + normalized.slice(1)
+  );
+};
+
+// Get flag emoji for language code
+export const getLanguageEmoji = (language: string | null): string | null => {
+  if (!language) return null;
+
+  const normalized = normalizeLanguageTag(language);
+
+  if (normalized.toLowerCase() === "multi") {
+    return "🌐";
+  }
+
+  const emojiMap: Record<string, string> = {
+    en: "🇬🇧",
+    es: "🇪🇸",
+    fr: "🇫🇷",
+    de: "🇩🇪",
+    it: "🇮🇹",
+    pt: "🇵🇹",
+    ru: "🇷🇺",
+    ja: "🇯🇵",
+    zh: "🇨🇳",
+    ko: "🇰🇷",
+    ar: "🇸🇦",
+    tr: "🇹🇷",
+    pl: "🇵🇱",
+    nl: "🇳🇱",
+    id: "🇮🇩",
+    th: "🇹🇭",
+    vi: "🇻🇳",
+    hi: "🇮🇳",
+  };
+
+  return emojiMap[normalized] || null;
+};
+
 export const buildIconUrl = (
   repo: { owner: string; name: string; branch: string },
   extensionId: string,
@@ -97,6 +215,86 @@ export const buildBaseUrl = (repo: {
   return `https://raw.githubusercontent.com/${repo.owner}/${repo.name}/${repo.branch}/0.9/stable`;
 };
 
+// Cache for API responses (1 minute TTL)
+const CACHE_TTL = 60 * 1000; // 1 minute in milliseconds
+const CACHE_STORAGE_KEY = "inkdex_api_cache";
+
+interface CacheEntry {
+  data: any;
+  timestamp: number;
+}
+
+interface CacheStorage {
+  [key: string]: CacheEntry;
+}
+
+const loadCache = (): CacheStorage => {
+  if (typeof localStorage === "undefined") return {};
+  try {
+    const stored = localStorage.getItem(CACHE_STORAGE_KEY);
+    return stored ? JSON.parse(stored) : {};
+  } catch {
+    return {};
+  }
+};
+
+const saveCache = (cache: CacheStorage): void => {
+  if (typeof localStorage === "undefined") return;
+  try {
+    localStorage.setItem(CACHE_STORAGE_KEY, JSON.stringify(cache));
+  } catch (e) {
+    console.warn("Failed to save cache to localStorage:", e);
+  }
+};
+
+const getCachedData = (key: string): any | null => {
+  const cache = loadCache();
+  const cached = cache[key];
+  if (!cached) return null;
+
+  const isExpired = Date.now() - cached.timestamp > CACHE_TTL;
+  if (isExpired) {
+    delete cache[key];
+    saveCache(cache);
+    return null;
+  }
+
+  return cached.data;
+};
+
+const setCachedData = (key: string, data: any): void => {
+  const cache = loadCache();
+  cache[key] = { data, timestamp: Date.now() };
+  saveCache(cache);
+};
+
+// Capability flags (SourceIntents)
+const CAPABILITY_CHAPTER_PROVIDING = 1 << 0; // 1
+const CAPABILITY_MANGA_PROGRESS_PROVIDING = 1 << 1; // 2
+const CAPABILITY_CLOUDFLARE_BYPASS_PROVIDING = 1 << 4; // 16
+
+export const hasCapability = (
+  capabilities: number | number[],
+  flag: number,
+): boolean => {
+  if (Array.isArray(capabilities)) {
+    return capabilities.includes(flag);
+  }
+  return (capabilities & flag) === flag;
+};
+
+export const hasChapterProviding = (capabilities: number | number[]): boolean =>
+  hasCapability(capabilities, CAPABILITY_CHAPTER_PROVIDING);
+
+export const hasMangaProgressProviding = (
+  capabilities: number | number[],
+): boolean => hasCapability(capabilities, CAPABILITY_MANGA_PROGRESS_PROVIDING);
+
+export const hasCloudflareBypassProviding = (
+  capabilities: number | number[],
+): boolean =>
+  hasCapability(capabilities, CAPABILITY_CLOUDFLARE_BYPASS_PROVIDING);
+
 // Local Storage
 export const loadCustomRepos = (): CustomRepository[] => {
   if (typeof localStorage === "undefined") return [];
@@ -123,12 +321,18 @@ export const fetchVersioningJson = async (repo: {
   name: string;
   branch: string;
 }): Promise<{ sources: ExtensionMetadata[] } | null> => {
+  const cacheKey = `versioning:${repo.owner}/${repo.name}/${repo.branch}`;
+  const cached = getCachedData(cacheKey);
+  if (cached) return cached;
+
   try {
     const response = await fetch(
       `https://raw.githubusercontent.com/${repo.owner}/${repo.name}/${repo.branch}/0.9/stable/versioning.json`,
     );
     if (!response.ok) return null;
-    return await response.json();
+    const data = await response.json();
+    setCachedData(cacheKey, data);
+    return data;
   } catch (e) {
     console.warn(
       `Failed to fetch metadata from ${repo.owner}/${repo.name}:`,
@@ -143,12 +347,18 @@ export const fetchRepoContents = async (repo: {
   name: string;
   branch: string;
 }): Promise<GitHubFile[] | null> => {
+  const cacheKey = `contents:${repo.owner}/${repo.name}/${repo.branch}`;
+  const cached = getCachedData(cacheKey);
+  if (cached) return cached;
+
   try {
     const response = await fetch(
       `https://api.github.com/repos/${repo.owner}/${repo.name}/contents/0.9/stable?ref=${repo.branch}`,
     );
     if (!response.ok) return null;
-    return await response.json();
+    const data = await response.json();
+    setCachedData(cacheKey, data);
+    return data;
   } catch (e) {
     console.warn(`Failed to fetch from ${repo.owner}/${repo.name}:`, e);
     return null;
@@ -206,8 +416,13 @@ export const useExtensions = () => {
     return [...defaultWithDisplay, ...customRepos.value];
   };
 
-  const fetchAllExtensions = async (includeContents = true): Promise<void> => {
-    loading.value = true;
+  const fetchAllExtensions = async (
+    includeContents = true,
+    showLoading = true,
+  ): Promise<void> => {
+    if (showLoading) {
+      loading.value = true;
+    }
     error.value = null;
 
     try {
@@ -294,7 +509,9 @@ export const useExtensions = () => {
     } catch (e) {
       error.value = e instanceof Error ? e.message : "An error occurred";
     } finally {
-      loading.value = false;
+      if (showLoading) {
+        loading.value = false;
+      }
     }
   };
 
diff --git a/src/extension-list.md b/src/extension-list.md
index 2d67837..1a908bd 100644
--- a/src/extension-list.md
+++ b/src/extension-list.md
@@ -1,7 +1,7 @@
 <!-- SPDX-License-Identifier: GPL-3.0-or-later -->
 <!-- Copyright © 2025 Inkdex -->
 
-# Extensions
+# Extension List
 
 <ClientOnly>
   <ExtensionList />

From 046eeb7e335b5e2a7455d0a007587d4b96f17592 Mon Sep 17 00:00:00 2001
From: Eduard Smet <contact@celarye.dev>
Date: Tue, 16 Dec 2025 01:11:56 +0100
Subject: [PATCH 3/3] feat: Style the registry installation link like a button

---
 .../theme/components/ExtensionList.css        | 30 +++++++++++++++++++
 src/extension-list.md                         |  2 ++
 src/installation.md                           | 10 +++----
 3 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/src/.vitepress/theme/components/ExtensionList.css b/src/.vitepress/theme/components/ExtensionList.css
index 64cb884..ee772e9 100644
--- a/src/.vitepress/theme/components/ExtensionList.css
+++ b/src/.vitepress/theme/components/ExtensionList.css
@@ -16,6 +16,36 @@
   cursor: not-allowed;
 }
 
+/* Install Registry Button */
+.install-registry-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem 2rem;
+  border-radius: 50px;
+  font-size: 1.05rem;
+  text-decoration: none !important;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  margin: 1.5rem auto;
+  box-shadow: 0 4px 12px rgb(0 0 0 / .2);
+  min-height: 4rem;
+  color: var(--vp-button-brand-text) !important;
+  background: var(--vp-button-brand-bg);
+  border: none;
+  font-weight: 600;
+}
+.install-registry-btn:hover {
+  box-shadow: 0 6px 16px rgb(0 0 0 / .3);
+  background: var(--vp-button-brand-hover-bg);
+  color: var(--vp-button-brand-text) !important;
+}
+.install-registry-btn:active {
+  transform: scale(.95);
+  box-shadow: 0 2px 8px rgb(0 0 0 / .2);
+  background: var(--vp-button-brand-active-bg);
+}
+
 /* Input button shared styles */
 .input-btn {
   position: absolute;
diff --git a/src/extension-list.md b/src/extension-list.md
index 1a908bd..651fb5a 100644
--- a/src/extension-list.md
+++ b/src/extension-list.md
@@ -3,6 +3,8 @@
 
 # Extension List
 
+Search and filter through all available extensions by language, content rating, badges, and services to find exactly what you need. Install extensions individually or add custom repositories to filter through as well.
+
 <ClientOnly>
   <ExtensionList />
 </ClientOnly>
diff --git a/src/installation.md b/src/installation.md
index 761b6bd..b229006 100644
--- a/src/installation.md
+++ b/src/installation.md
@@ -19,9 +19,11 @@ Extensions listed here are compatible with Paperback version 0.9. If you're usin
 
 The extension registry contains all extensions contributed by the Inkdex community.
 
-Click the installation link below to add it to your Paperback app.
+Click the button below to add it to your Paperback app.
 
-# [**Install**](<paperback://addRepo?displayName=Inkdex%20Extensions%20(0.9)&url=https%3A%2F%2Finkdex.github.io%2Fextensions%2F0.9%2Fstable>)
+<div align="center">
+  <a href="paperback://addRepo?displayName=Inkdex%20Extensions%20(0.9)&url=https%3A%2F%2Finkdex.github.io%2Fextensions%2F0.9%2Fstable" class="install-registry-btn btn-brand">Install Registry</a>
+</div>
 
 ::: details Install Manually
 
@@ -32,6 +34,4 @@ Click the installation link below to add it to your Paperback app.
 
 The registry is hosted on GitHub and can be found [here](https://github.com/inkdex/extensions). It is completely automated, for more info you can join our [Discord server](https://discord.gg/inkdex) and ask us about it!
 
-## Extension List
-
-<ExtensionList />
+For a more detailed browsing experience, visit our [extension list page](/extension-list) where you can search, filter, and install extensions individually.