diff --git a/src/.vitepress/theme/components/ExtensionDetails.vue b/src/.vitepress/theme/components/ExtensionDetails.vue
new file mode 100644
index 0000000..1176baa
--- /dev/null
+++ b/src/.vitepress/theme/components/ExtensionDetails.vue
@@ -0,0 +1,249 @@
+<script setup lang="ts">
+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;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  hide: [];
+  install: [extension: Extension];
+}>();
+
+const handleInstall = () => {
+  if (props.extension) {
+    emit("install", props.extension);
+  }
+};
+
+// 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" @click="$emit('hide')">
+    <div ref="detailsContainer" class="details-modal" @click.stop>
+      <button 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">
+        <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-logo.png')
+            "
+          />
+          <div class="details-header-text">
+            <h2 class="details-title">
+              {{ extension.name }}
+            </h2>
+            <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?.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
+              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
+            >
+          </div>
+        </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?.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 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"
+            >
+              <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"
+                  target="_blank"
+                  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
+                  v-if="dev.website"
+                  :href="dev.website"
+                  target="_blank"
+                  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>
+            </div>
+          </div>
+        </div>
+
+        <div class="details-actions">
+          <button class="details-install-btn btn-brand" @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..ee772e9
--- /dev/null
+++ b/src/.vitepress/theme/components/ExtensionList.css
@@ -0,0 +1,1607 @@
+/* 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;
+}
+
+/* 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;
+  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;
+}
+.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: 1.5rem;
+}
+.search-bar {
+  width: 100%}
+.extension-list .search-input-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.extension-list .search-icon {
+  position: absolute;
+  left: 1rem;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--vp-c-text-3);
+  pointer-events: none;
+  z-index: 1;
+}
+.extension-list .search-input {
+  width: 100%;
+  padding: .75rem 1rem .75rem 2.5rem;
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  color: var(--vp-c-text-1);
+  font-size: .95rem;
+  transition: all 0.2s ease;
+}
+.extension-list .search-input:focus {
+  outline: none;
+  background: var(--vp-c-bg-soft);
+  border-color: var(--vp-c-brand);
+  box-shadow: 0 0 0 2px var(--vp-c-brand-soft);
+}
+.extension-list .search-input::-webkit-search-cancel-button {
+  display: none;
+}
+
+
+.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 buttons (Filters, Repositories) */
+.action-btn {
+  position: relative;
+  padding: 0 1.75rem 0 .85rem;
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  color: var(--vp-c-text-2);
+  font-size: .85rem;
+  font-weight: 500;
+  cursor: pointer;
+  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-button-brand-bg);
+  color: var(--vp-button-brand-text);
+  border-color: var(--vp-button-brand-bg);
+}
+.action-btn .btn-text {
+  line-height: 1;
+}
+.action-btn .filter-count {
+  background: rgb(255 255 255 / .25);
+  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;
+}
+.action-btn .expand-icon {
+  position: absolute;
+  right: .5rem;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: .65rem;
+  line-height: 1;
+  transition: transform 0.2s ease;
+}
+.action-btn .expand-icon.expanded {
+  transform: translateY(-50%) 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;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: .5rem;
+  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);
+}
+.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;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: thin;
+  max-width: 100%;
+}
+.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;
+  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: 1fr;
+  gap: 1.5rem;
+  margin: 1.5rem 0 1rem 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-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: 72px;
+  height: 72px;
+  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: .5rem;
+  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-repo {
+  display: flex;
+}
+.extension-source {
+  margin: 0;
+}
+.source-badge {
+  padding: .25rem .5rem;
+  border-radius: 8px;
+  font-size: .7rem;
+  font-weight: 500;
+  background: var(--vp-c-brand-soft);
+  color: var(--vp-c-brand);
+  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 {
+  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;
+}
+.extension-meta .extension-repo {
+  order: 10;
+  margin-top: auto;
+  padding-top: .25rem;
+}
+.content-rating {
+  margin-bottom: .5rem;
+}
+.rating-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: .25rem .5rem;
+  border-radius: 8px;
+  font-size: .7rem;
+  font-weight: 600;
+}
+.header-badges {
+  display: flex;
+  gap: .5rem;
+  margin-top: .25rem;
+  align-items: center;
+}
+.version-badge {
+  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-divider);
+}
+.extension-badges {
+  display: flex;
+  gap: .25rem;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: thin;
+}
+.genre-badge {
+  padding: .25rem .5rem;
+  border-radius: 8px;
+  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 {
+}
+.language-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);
+  white-space: nowrap;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.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;
+  text-decoration: none;
+  font-size: .9rem;
+  font-weight: 500;
+  transition: all 0.2s ease;
+  display: inline-block;
+  text-align: center;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.selected-indicator {
+  color: var(--vp-c-brand);
+  font-weight: 600;
+  font-size: .85rem;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.floating-install-btn {
+  position: fixed;
+  bottom: 2rem;
+  right: 2rem;
+  z-index: 100;
+}
+.install-selected-btn {
+  display: flex;
+  align-items: center;
+  gap: .75rem;
+  padding: .7rem 1rem;
+  border-radius: 50px;
+  font-size: .9rem;
+  font-weight: 600;
+  box-shadow: 0 4px 12px rgb(0 0 0 / .2);
+  height: 3rem;
+  min-width: 4rem;
+  justify-content: center;
+}
+.install-selected-btn:hover:not(:disabled) {
+  box-shadow: 0 6px 16px rgb(0 0 0 / .3);
+}
+.install-selected-btn:active:not(:disabled) {
+  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 {
+  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;
+  line-height: 1;
+}
+.no-results h3 {
+  margin: 0;
+  color: var(--vp-c-text-1);
+}
+.no-results p {
+  margin: 0;
+}
+.clear-search-btn {
+  padding: .75rem 1rem;
+  border-radius: 8px;
+  font-size: .9rem;
+  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-bg);
+  color: var(--vp-c-text-1);
+  border-color: var(--vp-c-border);
+}
+.clear-search-btn:focus-visible {
+  outline: 2px solid var(--vp-c-brand);
+  outline-offset: 2px;
+}
+.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 (min-width:720px) {
+  .extensions-grid {
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  }
+}@media (min-width:500px) {
+.install-selected-btn {
+  padding: 1rem 1.5rem;
+  font-size: .95rem;
+  height: 3.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: 48px;
+  height: 48px;
+}
+.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 / .6);
+  backdrop-filter: blur(4px);
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+}
+.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: 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: .5rem;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+  z-index: 10;
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.details-close-btn:hover {
+  background: var(--vp-c-bg);
+  color: var(--vp-c-text-1);
+  border-color: var(--vp-c-text-2);
+}
+.details-close-btn:active {
+  transform: scale(.95);
+}
+.details-content {
+  padding: 1.5rem;
+}
+.details-header {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 1rem;
+  padding-right: 2.5rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+.details-icon {
+  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;
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+  line-height: 1.2;
+  border: none;
+  padding: 0;
+}
+.details-content h2 {
+  margin: 0;
+  border: none;
+  padding: 0;
+}
+.details-header-badges {
+  display: flex;
+  gap: .5rem;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.details-section {
+  margin-bottom: 1rem;
+}
+.details-section:last-of-type {
+  margin-bottom: 0;
+}
+.details-section h3 {
+  margin: 0 0 .5rem 0;
+  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: .25rem .5rem;
+  border-radius: 8px;
+  font-size: .7rem;
+  font-weight: 600;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.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-divider);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.details-services {
+  display: flex;
+  gap: .5rem;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: thin;
+}
+
+.details-badges {
+  display: flex;
+  gap: .5rem;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: thin;
+}
+.details-developers {
+  display: flex;
+  flex-direction: column;
+  gap: .5rem;
+  padding-left: 1rem;
+}
+.details-developer {
+  display: flex;
+  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: .85rem;
+  color: var(--vp-c-brand);
+  text-decoration: none;
+  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-bg-soft);
+  border-color: var(--vp-c-brand);
+}
+.dev-link svg {
+  width: 14px;
+  height: 14px;
+}
+.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;
+  color: var(--vp-c-text-2);
+  line-height: 1.6;
+  font-size: .95rem;
+}
+.details-actions {
+  display: flex;
+  justify-content: center;
+  margin-top: 1.5rem;
+}
+.details-install-btn {
+  padding: .85rem 2rem;
+  border-radius: 8px;
+  font-size: .95rem;
+  min-height: 44px;
+  width: 100%;
+}
+.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: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;
+}
+.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 !important;
+  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);
+}
+
+.custom-repos-list {
+  display: flex;
+  gap: .5rem;
+  overflow-x: auto;
+  overflow-y: hidden;
+  white-space: nowrap;
+  scrollbar-width: thin;
+}
+.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;
+  flex-shrink: 0;
+  min-width: 250px;
+}
+.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 {
+  position: relative;
+  max-height: 0;
+  overflow: hidden;
+  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;
+  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);
+}
+.filters-header {
+  position: absolute;
+  top: 1rem;
+  right: 0;
+  z-index: 10;
+}
+.filter-group {
+  margin-bottom: 1rem;
+}
+.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: .95rem;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+}
+.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;
+}
+.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;
+  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 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);
+  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-divider);
+  margin-top: .75rem;
+}
+
+.filter-tag.language-tag {
+  background: #0891b226;
+  color: #0891b2;
+}
+.filter-tag.label-tag {
+  background: #8b5cf626;
+  color: #8b5cf6;
+}
+.filter-tag.repository-tag {
+  background: var(--vp-c-bg-soft);
+  color: var(--vp-c-text-2);
+}
+.filter-tag.service-tag.service-content {
+  background: #3b82f626;
+  color: #3b82f6;
+}
+.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);
+  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);
+}
+.extension-list .repo-input-container {
+  margin-bottom: 0;
+}
+.extension-list .repo-input {
+  padding-right: 5rem;
+}
+
+.repo-chip {
+  display: flex;
+  align-items: center;
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 20px;
+  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;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  background: transparent;
+  border: none;
+  border-radius: 50%;
+  color: var(--vp-c-text-3);
+  font-size: .7rem;
+  cursor: pointer;
+  transition: color 0.2s ease;
+  flex-shrink: 0;
+  padding-right: .5rem;
+}
+.repo-chip-remove:hover {
+  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;
+  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;
+  width: 14px;
+  height: 14px;
+}
+.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..cdd3b49
--- /dev/null
+++ b/src/.vitepress/theme/components/ExtensionList.vue
@@ -0,0 +1,1076 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from "vue";
+import ExtensionDetails from "./ExtensionDetails.vue";
+import "./ExtensionList.css";
+import {
+  buildBaseUrl,
+  getContentRatingBg,
+  getContentRatingColor,
+  getLanguageEmoji,
+  getLanguageName,
+  hasChapterProviding,
+  hasCloudflareBypassProviding,
+  hasMangaProgressProviding,
+  normalizeLanguageTag,
+  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 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 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 (
+    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);
+    }
+  });
+
+  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 availableLabels = computed(() => {
+  const labels = new Set<string>();
+  extensions.value.forEach((ext) => {
+    if (ext.metadata?.badges) {
+      ext.metadata.badges.forEach((badge) => {
+        labels.add(badge.label);
+      });
+    }
+  });
+  return Array.from(labels).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))) &&
+      !(
+        extension.metadata?.contentRating &&
+        negatedRatings.value.has(extension.metadata.contentRating)
+      );
+
+    const matchesSource =
+      (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))) &&
+      !(
+        extension.metadata?.language &&
+        negatedLanguages.value.has(extension.metadata.language)
+      );
+
+    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 &&
+      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 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 {
+    selectedLabels.value.add(label);
+  }
+  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();
+  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();
+  negatedLanguages.value = new Set();
+  selectedLabels.value = new Set();
+  negatedLabels.value = new Set();
+  selectedServices.value = new Set();
+  negatedServices.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 = () => {
+  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 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) {
+      // 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 = "";
+
+    // 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);
+    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);
+  // Fetch extensions dynamically without showing loading spinner
+  await fetchAllExtensions(true, false);
+};
+
+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);
+  }
+};
+</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">
+            <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"
+            />
+            <button
+              v-if="searchQuery"
+              class="input-btn btn-secondary"
+              title="Clear search"
+              @click="searchQuery = ''"
+            >
+              Clear
+            </button>
+          </div>
+        </div>
+
+        <div class="filters-row">
+          <div class="toggles-group">
+            <button
+              class="action-btn"
+              :class="{
+                active:
+                  filtersExpanded ||
+                  selectedRatings.size > 0 ||
+                  negatedRatings.size > 0 ||
+                  selectedLanguages.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="
+                  selectedRatings.size +
+                    negatedRatings.size +
+                    selectedLanguages.size +
+                    negatedLanguages.size +
+                    selectedLabels.size +
+                    negatedLabels.size +
+                    selectedServices.size +
+                    negatedServices.size >
+                  0
+                "
+                class="filter-count"
+                >{{
+                  selectedRatings.size +
+                  negatedRatings.size +
+                  selectedLanguages.size +
+                  negatedLanguages.size +
+                  selectedLabels.size +
+                  negatedLabels.size +
+                  selectedServices.size +
+                  negatedServices.size
+                }}</span
+              >
+              <span class="expand-icon" :class="{ expanded: filtersExpanded }"
+                >▼</span
+              >
+            </button>
+
+            <button
+              class="action-btn"
+              :class="{
+                active:
+                  showRepoManager ||
+                  selectedSources.size > 0 ||
+                  negatedSources.size > 0,
+              }"
+              @click="showRepoManager = !showRepoManager"
+            >
+              <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
+              >
+            </button>
+          </div>
+        </div>
+
+        <!-- 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>
+            </div>
+            <div class="filter-chips">
+              <button
+                v-for="rating in availableRatings"
+                :key="rating"
+                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)"
+              >
+                {{ formatRating(rating) }}
+              </button>
+            </div>
+          </div>
+
+          <div class="filter-group">
+            <div class="filter-header">
+              <span class="filter-label">Services</span>
+            </div>
+            <div class="filter-chips">
+              <button
+                v-for="service in availableServices"
+                :key="service"
+                class="filter-chip"
+                :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)"
+              >
+                {{ service }}
+              </button>
+            </div>
+          </div>
+
+          <div class="filter-group">
+            <div class="filter-header">
+              <span class="filter-label">Languages</span>
+            </div>
+            <div class="filter-chips">
+              <button
+                v-for="language in availableLanguages"
+                :key="language"
+                class="filter-chip filter-language"
+                :class="{
+                  active: selectedLanguages.has(language),
+                  negated: negatedLanguages.has(language),
+                }"
+                @click="toggleLanguage(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">Badges</span>
+              <button
+                class="badge-mode-toggle"
+                :title="
+                  badgeFilterMode === 'any'
+                    ? 'Match ANY selected badge (OR)'
+                    : 'Match ALL selected badges (AND)'
+                "
+                @click="toggleBadgeFilterMode"
+              >
+                <span v-if="badgeFilterMode === 'any'">OR</span>
+                <span v-else>AND</span>
+              </button>
+            </div>
+            <div class="filter-chips">
+              <button
+                v-for="label in availableLabels"
+                :key="label"
+                class="filter-chip filter-badge"
+                :class="{
+                  active: selectedLabels.has(label),
+                  negated: negatedLabels.has(label),
+                }"
+                @click="toggleLabel(label)"
+              >
+                {{ label }}
+              </button>
+            </div>
+          </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="search-input-container repo-input-container">
+              <input
+                v-model="newRepoUrl"
+                type="text"
+                placeholder="https://github.com/owner/repo"
+                class="search-input repo-input"
+                @keyup.enter="addCustomRepo"
+              />
+              <button
+                class="input-btn btn-brand add-repo-btn"
+                :disabled="checkingRepo || !isValidRepoUrl"
+                @click="addCustomRepo"
+              >
+                {{ checkingRepo ? "Adding..." : "Add" }}
+              </button>
+            </div>
+          </div>
+
+          <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="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(source)"
+                >
+                  ✕
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Results Summary -->
+      <div class="results-summary">
+        <span class="results-count">
+          <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 ||
+            negatedRatings.size > 0 ||
+            selectedLanguages.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"
+        >
+          <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()}`"
+            >{{ formatRating(rating) }}</span
+          >
+
+          <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"
+            :key="`lang-${lang}`"
+            class="filter-tag language-tag"
+            >{{ lang }}</span
+          >
+          <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>
+
+      <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}`,
+            ),
+          }"
+          @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-logo.png')
+              "
+            />
+            <div class="extension-header-text">
+              <h3 class="extension-name">
+                {{ extension.name }}
+              </h3>
+              <div v-if="extension.metadata" class="card-badges">
+                <span
+                  class="rating-badge"
+                  :style="{
+                    color: getContentRatingColor(
+                      extension.metadata.contentRating,
+                    ),
+                    backgroundColor: getContentRatingBg(
+                      extension.metadata.contentRating,
+                    ),
+                  }"
+                >
+                  {{ formatRating(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 class="extension-tags-row">
+              <span
+                v-if="
+                  extension.metadata.capabilities &&
+                  hasChapterProviding(extension.metadata.capabilities)
+                "
+                class="service-badge service-content"
+                >Content Service</span
+              >
+              <span
+                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="{
+                  color: badge.textColor,
+                  backgroundColor: badge.backgroundColor,
+                }"
+              >
+                {{ badge.label }}
+              </span>
+            </div>
+
+            <div class="extension-repo">
+              <span class="source-badge">
+                {{ getSourceDisplayName(extension.source) }}
+              </span>
+            </div>
+          </div>
+
+          <div class="extension-footer">
+            <span
+              v-if="
+                selectedExtensions.has(`${extension.source}-${extension.name}`)
+              "
+              class="selected-indicator"
+            >
+              ✓ 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="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 extensions found</h3>
+        <p>Try adjusting your search terms or filters.</p>
+        <button class="clear-search-btn btn-brand" @click="clearSearch">
+          Clear Search & Filters
+        </button>
+      </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..c3e67f7
--- /dev/null
+++ b/src/.vitepress/theme/components/ExtensionSearch.vue
@@ -0,0 +1,221 @@
+<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"
+                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-logo.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..d494e97
--- /dev/null
+++ b/src/.vitepress/theme/lib/extensions.ts
@@ -0,0 +1,597 @@
+/* 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)";
+  }
+};
+
+// 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,
+  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`;
+};
+
+// 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 [];
+
+  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> => {
+  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;
+    const data = await response.json();
+    setCachedData(cacheKey, data);
+    return data;
+  } 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> => {
+  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;
+    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;
+  }
+};
+
+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,
+    showLoading = true,
+  ): Promise<void> => {
+    if (showLoading) {
+      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 {
+      if (showLoading) {
+        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..651fb5a 100644
--- a/src/extension-list.md
+++ b/src/extension-list.md
@@ -1,6 +1,10 @@
 <!-- SPDX-License-Identifier: GPL-3.0-or-later -->
 <!-- Copyright © 2025 Inkdex -->
 
-# Extensions
+# Extension List
 
-Coming soon!
+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.