diff --git a/00.backup/MarqueeTicker.vue b/00.backup/MarqueeTicker.vue
deleted file mode 100644
index 26f19c58..00000000
--- a/00.backup/MarqueeTicker.vue
+++ /dev/null
@@ -1,397 +0,0 @@
-<!-- This is a marquee ticker component that displays a list of cryptocurrencies and their prices. 
- It uses the CoinGecko API to fetch the data. 
- Worked on by Corey Stedman
- -->
-
-<template>
-  <div class="marquee-ticker">
-    <div class="marquee-container">
-      <div
-        class="marquee-content"
-        ref="marqueeContent"
-        :style="{ animationDuration: `${duration}s` }"
-      >
-        <div class="marquee-item">
-          <div
-            v-for="coin in coins"
-            :key="coin.id"
-            class="coin-item"
-            @click.stop="handleCoinClick(coin)"
-          >
-            <!-- This is the coin icon, had to prepend ./assets/cryptoicons/ to the path because it was not loading the icons -->
-            <img
-              :src="`./assets/icons/crypto/${coin.symbol.toLowerCase()}.svg`"
-              :alt="coin.symbol"
-              class="coin-icon"
-            />
-            <span class="coin-symbol">{{ coin.symbol }}</span>
-            <span
-              class="coin-price"
-              :class="{
-                'price-up': coin.priceChange > 0,
-                'price-down': coin.priceChange < 0
-              }"
-            >
-              ${{ formatPrice(coin.price) }} ({{
-                coin.priceChange > 0 ? '+' : ''
-              }}{{ coin.priceChange.toFixed(2) }}%)
-            </span>
-          </div>
-        </div>
-        <!-- Duplicate for seamless looping -->
-        <div class="marquee-item">
-          <div
-            v-for="coin in coins"
-            :key="`dup-${coin.id}`"
-            class="coin-item"
-            @click.stop="handleCoinClick(coin)"
-          >
-            <img
-              :src="`./assets/icons/crypto/${coin.symbol.toLowerCase()}.svg`"
-              :alt="coin.symbol"
-              class="coin-icon"
-            />
-            <span class="coin-symbol">{{ coin.symbol }}</span>
-            <span
-              class="coin-price"
-              :class="{
-                'price-up': coin.priceChange > 0,
-                'price-down': coin.priceChange < 0
-              }"
-            >
-              ${{ formatPrice(coin.price) }} ({{
-                coin.priceChange > 0 ? '+' : ''
-              }}{{ coin.priceChange.toFixed(2) }}%)
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Coin Details Modal -->
-    <div v-if="selectedCoin" class="coin-modal" @click="closeModal">
-      <div class="modal-content" @click.stop>
-        <div class="modal-header">
-          <img
-            :src="`./assets/icons/crypto/${selectedCoin.symbol.toLowerCase()}.svg`"
-            :alt="selectedCoin.symbol"
-            class="modal-coin-icon"
-          />
-          <div class="coin-title">
-            <h3>{{ selectedCoin.name }} ({{ selectedCoin.symbol }})</h3>
-          </div>
-        </div>
-        <div class="coin-metrics">
-          <p>{{ t('currentPrice') }} ${{ formatPrice(selectedCoin.price) }}</p>
-          <p>
-            {{ t('change24h') }}
-            <span
-              :class="selectedCoin.priceChange > 0 ? 'price-up' : 'price-down'"
-              >{{ selectedCoin.priceChange > 0 ? '+' : ''
-              }}{{ selectedCoin.priceChange.toFixed(2) }}%</span
-            >
-          </p>
-          <p>{{ t('marketCap') }} ${{ formatMarketCap(selectedCoin.marketCap) }}</p>
-        </div>
-        <a
-          :href="`https://gemini.com/share/jwqzg5fe`"
-          target="_blank"
-          class="gemini-link"
-        >
-          {{ t('tradeOnGemini') }}
-        </a>
-        <button @click="closeModal">{{ t('close') }}</button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { useI18n } from '@/composables/useI18n'
-import { COINBASE50 } from '@/lib/currencyCore/indexComposites/coinbase50'
-import { coinGeckoAPI } from '@/lib/currencyCore/aggregators/coinGeckoAPI'
-
-export default {
-  name: 'MarqueeTicker',
-  setup() {
-    const { t } = useI18n()
-    return { t }
-  },
-  data() {
-    return {
-      coins: [],
-      selectedCoin: null,
-      fetchInterval: null,
-      duration: 240,
-      isPaused: false,
-      isLoading: true,
-      loadingError: null
-    }
-  },
-  methods: {
-    // Helper function to shuffle an array (Fisher-Yates algorithm)
-    shuffleArray(array) {
-      const shuffled = [...array] // Create a copy to avoid modifying the original
-      for (let i = shuffled.length - 1; i > 0; i--) {
-        const j = Math.floor(Math.random() * (i + 1))
-        ;[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]] // Swap elements
-      }
-      return shuffled
-    },
-
-    async fetchCoinPrices() {
-      try {
-        this.isLoading = true
-        this.loadingError = null
-
-        // Randomize the coin list order before fetching
-        const randomizedCoins = this.shuffleArray(COINBASE50)
-
-        // Use CoinGecko API module
-        const coinIds = randomizedCoins.map((coin) => coin.id)
-        const data = await coinGeckoAPI.utils.fetchMarketData({
-          ids: coinIds,
-          vs_currency: 'usd',
-          order: 'market_cap_desc',
-          per_page: 50,
-          page: 1,
-          sparkline: false,
-          price_change_percentage: '24h'
-        })
-
-        // Map the data to our coins array, using only local icons
-        this.coins = randomizedCoins.map((coin) => {
-          const coinData = data.find((item) => item.id === coin.id)
-          return {
-            ...coin,
-            price: coinData?.current_price || 0,
-            priceChange: coinData?.price_change_percentage_24h || 0,
-            marketCap: coinData?.market_cap || 0
-          }
-        })
-
-        this.isLoading = false
-      } catch (error) {
-        console.error('Error fetching coin prices:', error)
-        this.loadingError = this.t('checkInternetConnection')
-        this.isLoading = false
-        this.coins = []
-      }
-    },
-
-    formatPrice(price) {
-      return new Intl.NumberFormat('en-US', {
-        minimumFractionDigits: 6,
-        maximumFractionDigits: 6
-      }).format(price)
-    },
-    formatMarketCap(marketCap) {
-      if (marketCap >= 1e12) return `${(marketCap / 1e12).toFixed(2)}T`
-      if (marketCap >= 1e9) return `${(marketCap / 1e9).toFixed(2)}B`
-      if (marketCap >= 1e6) return `${(marketCap / 1e6).toFixed(2)}M`
-      return marketCap.toFixed(2)
-    },
-    handleCoinClick(coin) {
-      this.selectedCoin = coin
-      this.isPaused = true
-      this.$refs.marqueeContent.style.animationPlayState = 'paused'
-    },
-    closeModal() {
-      this.selectedCoin = null
-      this.isPaused = false
-      this.$refs.marqueeContent.style.animationPlayState = 'running'
-    }
-  },
-  mounted() {
-    this.fetchCoinPrices()
-    // Set up interval to refresh prices every 5 minutes
-    this.fetchInterval = setInterval(this.fetchCoinPrices, 5 * 60 * 1000)
-  },
-  beforeUnmount() {
-    if (this.fetchInterval) clearInterval(this.fetchInterval)
-  }
-}
-</script>
-
-<style scoped>
-.marquee-ticker {
-  height: 36px;
-  background-color: #262b38;
-  overflow: hidden;
-  width: 100%;
-}
-
-.marquee-container {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  position: relative;
-}
-
-.marquee-content {
-  display: inline-flex;
-  height: 100%;
-  animation: marquee linear infinite;
-  position: absolute;
-}
-
-.marquee-item {
-  display: flex;
-  align-items: center;
-  height: 100%;
-  white-space: nowrap;
-}
-
-.coin-item {
-  display: inline-flex;
-  align-items: center;
-  padding: 0 20px; /* Increased padding from 10px to 20px for more spacing */
-  cursor: pointer;
-  height: 100%;
-  transition: background-color 0.2s;
-  position: relative;
-}
-
-/* Add separator between items */
-.coin-item:not(:last-child)::after {
-  content: '•';
-  position: absolute;
-  right: 0;
-  color: rgba(255, 255, 255, 0.3);
-}
-
-.coin-item:hover {
-  background-color: rgba(255, 255, 255, 0.1);
-}
-
-.coin-icon {
-  width: 20px;
-  height: 20px;
-  margin-right: 8px; /* Increased from 5px to 8px for more spacing */
-}
-
-.coin-symbol {
-  font-weight: bold;
-  margin-right: 8px; /* Increased from 5px to 8px for more spacing */
-  color: #fff;
-}
-
-.coin-price {
-  color: #fff;
-}
-
-.price-up {
-  color: #4ade80;
-}
-
-.price-down {
-  color: #f87171;
-}
-
-@keyframes marquee {
-  from {
-    transform: translateX(0);
-  }
-  to {
-    transform: translateX(-50%);
-  }
-}
-
-.coin-modal {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 1000;
-}
-
-.modal-content {
-  background-color: #262b38;
-  padding: 20px;
-  border-radius: 8px;
-  color: #fff;
-  max-width: 400px;
-  width: 90%;
-}
-
-.coin-metrics {
-  margin: 15px 0;
-  text-align: left; /* Explicitly set left alignment for the metrics content */
-  width: 100%;
-}
-
-.coin-metrics p {
-  margin: 8px 0;
-  text-align: left;
-}
-
-.modal-header {
-  display: flex;
-  align-items: center;
-  margin-bottom: 15px;
-  text-align: left;
-  width: 100%;
-  justify-content: flex-start;
-}
-
-.modal-coin-icon {
-  width: 36px;
-  height: 36px;
-  margin-right: 8px; /* Reduced from 12px to 8px to close the gap */
-  flex-shrink: 0;
-}
-
-.coin-title {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  width: calc(100% - 44px); /* Account for icon width + margin */
-}
-
-.modal-content h3 {
-  text-align: left;
-  margin: 0;
-  font-size: 1.5rem;
-  line-height: 1.2;
-  font-weight: 600;
-  width: 100%;
-}
-
-.gemini-link {
-  display: block; /* Changed from inline-block to block */
-  background-color: #4ade80;
-  color: #fff;
-  padding: 10px 16px;
-  border-radius: 4px;
-  text-decoration: none;
-  margin: 15px auto; /* Center the link with auto margins */
-  width: fit-content; /* Make the button only as wide as its content */
-  text-align: center;
-  font-weight: bold;
-}
-
-.gemini-link:hover {
-  background-color: #3acf70;
-}
-
-button {
-  background-color: #f87171;
-  color: #fff;
-  border: none;
-  padding: 8px 16px;
-  border-radius: 4px;
-  cursor: pointer;
-  margin-top: 10px;
-  display: block;
-  width: 100%;
-}
-
-button:hover {
-  background-color: #ef4444;
-}
-</style> 
\ No newline at end of file
diff --git a/00.backup/past.working/SideNav.vue b/00.backup/past.working/SideNav.vue
deleted file mode 100644
index 1db7b061..00000000
--- a/00.backup/past.working/SideNav.vue
+++ /dev/null
@@ -1,242 +0,0 @@
-<template>
-  <nav :class="['side-nav', menuType]">
-    <router-link
-      to="/keyfiles"
-      class="nav-item"
-      :class="{ active: $route.path === '/keyfiles' }"
-      title="Key Files"
-    >
-      <FileTextIcon :size="20" :color="pathColor('/keyfiles')" />
-      <span v-if="menuType === 'macro'" class="nav-text">Key Files</span>
-    </router-link>
-    
-    <router-link
-      to="/cryptocurrency"
-      class="nav-item"
-      :class="{ active: $route.path === '/cryptocurrency' }"
-      title="Cryptocurrency"
-    >
-      <CoinsIcon :size="20" :color="pathColor('/cryptocurrency')" />
-      <span v-if="menuType === 'macro'" class="nav-text">Cryptocurrency</span>
-    </router-link>
-    
-    <router-link
-      to="/cryptography"
-      class="nav-item"
-      :class="{ active: $route.path === '/cryptography' }"
-      title="Cryptography"
-    >
-      <LockIcon :size="20" :color="pathColor('/cryptography')" />
-      <span v-if="menuType === 'macro'" class="nav-text">Cryptography</span>
-    </router-link>
-
-    <!-- Divider -->
-    <div class="nav-divider"></div>
-    
-    <router-link
-      to="/networking"
-      class="nav-item"
-      :class="{ active: $route.path === '/networking' }"
-      title="Networking"
-    >
-      <NetworkIcon :size="20" :color="pathColor('/networking')" />
-      <span v-if="menuType === 'macro'" class="nav-text">Networking</span>
-    </router-link>
-    
-    <router-link
-      to="/techstack"
-      class="nav-item"
-      :class="{ active: $route.path === '/techstack' }"
-      title="Tech Stack"
-    >
-      <LayersIcon :size="20" :color="pathColor('/techstack')" />
-      <span v-if="menuType === 'macro'" class="nav-text">Tech Stack</span>
-    </router-link>
-    
-    <router-link
-      to="/repurposing"
-      class="nav-item"
-      :class="{ active: $route.path === '/repurposing' }"
-      title="Repurposing"
-    >
-      <RecycleIcon :size="20" :color="pathColor('/repurposing')" />
-      <span v-if="menuType === 'macro'" class="nav-text">Repurposing</span>
-    </router-link>
-    
-    <router-link
-      to="/build"
-      class="nav-item"
-      :class="{ active: $route.path === '/build' }"
-      title="Build"
-    >
-      <HammerIcon :size="20" :color="pathColor('/build')" />
-      <span v-if="menuType === 'macro'" class="nav-text">Build</span>
-    </router-link>
-    
-    <router-link
-      to="/package"
-      class="nav-item"
-      :class="{ active: $route.path === '/package' }"
-      title="Package"
-    >
-      <PackageIcon :size="20" :color="pathColor('/package')" />
-      <span v-if="menuType === 'macro'" class="nav-text">Package</span>
-    </router-link>
-    
-    <router-link
-      to="/publish"
-      class="nav-item"
-      :class="{ active: $route.path === '/publish' }"
-      title="Publish"
-    >
-      <UploadIcon :size="20" :color="pathColor('/publish')" />
-      <span v-if="menuType === 'macro'" class="nav-text">Publish</span>
-    </router-link>
-
-    <!-- Divider -->
-    <div class="nav-divider"></div>
-    
-    <router-link
-      to="/games"
-      class="nav-item"
-      :class="{ active: $route.path === '/games' }"
-      title="Games"
-    >
-      <GamepadIcon :size="20" :color="pathColor('/games')" />
-      <span v-if="menuType === 'macro'" class="nav-text">Games</span>
-    </router-link>
-    
-    <router-link
-      to="/sandbox"
-      class="nav-item"
-      :class="{ active: $route.path === '/sandbox' }"
-      title="Sandbox"
-    >
-      <TestTubeIcon :size="20" :color="pathColor('/sandbox')" />
-      <span v-if="menuType === 'macro'" class="nav-text">Sandbox</span>
-    </router-link>
-
-    <!-- Divider -->
-    <div class="nav-divider"></div>
-    
-    <router-link
-      to="/settings"
-      class="nav-item"
-      :class="{ active: $route.path.startsWith('/settings') }"
-      title="Settings"
-    >
-      <SettingsIcon :size="20" :color="pathColor('/settings')" />
-      <span v-if="menuType === 'macro'" class="nav-text">Settings</span>
-    </router-link>
-  </nav>
-</template>
-
-<script lang="ts">
-import { 
-  TestTubeIcon, 
-  FileTextIcon, 
-  CoinsIcon, 
-  LockIcon,
-  NetworkIcon,
-  LayersIcon,
-  RecycleIcon,
-  HammerIcon,
-  PackageIcon,
-  UploadIcon,
-  GamepadIcon,
-  SettingsIcon
-} from 'lucide-vue-next'
-import { useRoute } from 'vue-router'
-import { useMenuState } from '../../composables/useMenuState'
-
-export default {
-  name: 'SideNav',
-  components: {
-    TestTubeIcon,
-    FileTextIcon,
-    CoinsIcon,
-    LockIcon,
-    NetworkIcon,
-    LayersIcon,
-    RecycleIcon,
-    HammerIcon,
-    PackageIcon,
-    UploadIcon,
-    GamepadIcon,
-    SettingsIcon
-  },
-  setup() {
-    const route = useRoute()
-    const { menuType } = useMenuState()
-
-    const pathColor = (path: string) => {
-      const isActive = path === '/settings' 
-        ? route.path.startsWith('/settings')
-        : route.path === path
-      return isActive ? '#3b82f6' : '#6b7280'
-    }
-
-    return {
-      menuType,
-      pathColor
-    }
-  }
-}
-</script>
-
-<style scoped>
-.side-nav {
-  position: fixed;
-  top: 4rem;
-  left: 0;
-  height: calc(100vh - 4rem);
-  background-color: #f8fafc;
-  border-right: 1px solid #e2e8f0;
-  display: flex;
-  flex-direction: column;
-  padding: 1rem 0;
-  z-index: 999;
-  transition: width 0.3s ease;
-  overflow-y: auto;
-}
-
-.side-nav.macro {
-  width: 12rem;
-}
-
-.side-nav.micro {
-  width: 4rem;
-}
-
-.nav-item {
-  display: flex;
-  align-items: center;
-  padding: 0.75rem 1rem;
-  text-decoration: none;
-  color: #6b7280;
-  transition: background-color 0.2s ease;
-  border-radius: 0.5rem;
-  margin: 0 0.5rem;
-}
-
-.nav-item:hover {
-  background-color: #e2e8f0;
-}
-
-.nav-item.active {
-  background-color: #dbeafe;
-  color: #3b82f6;
-}
-
-.nav-text {
-  margin-left: 0.75rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-}
-
-.nav-divider {
-  height: 1px;
-  background-color: #e2e8f0;
-  margin: 1rem 0.5rem;
-}
-</style>
diff --git a/src/components/modals/settings/dashboard/dashboardNetworks.vue b/src/components/modals/settings/dashboard/dashboardNetworks.vue
new file mode 100644
index 00000000..024bc963
--- /dev/null
+++ b/src/components/modals/settings/dashboard/dashboardNetworks.vue
@@ -0,0 +1,536 @@
+<!--
+  Dashboard Networks Modal — Shows all RPC endpoints for a given currency.
+  Usage: <DashboardNetworks :currency="currency" :get-icon="getIcon" />
+-->
+
+<template>
+  <DialogRoot :open="modalOpen" @update:open="closeModal">
+    <DialogPortal>
+      <DialogOverlay class="rpc-overlay" />
+      <DialogContent class="rpc-modal" aria-describedby="rpc-modal-desc">
+        <div class="rpc-modal__header">
+          <div class="rpc-modal__title-row">
+            <img
+              v-if="modalCurrency && getIcon(modalCurrency.basicInfo.symbolTicker)"
+              :src="getIcon(modalCurrency.basicInfo.symbolTicker)"
+              :alt="modalCurrency?.basicInfo.symbolTicker"
+              class="rpc-modal__coin-icon"
+            />
+            <span v-else-if="modalCurrency" class="rpc-modal__coin-fallback">{{ modalCurrency.basicInfo.symbolTicker.slice(0, 2) }}</span>
+            <div>
+              <DialogTitle class="rpc-modal__title">{{ modalCurrency?.basicInfo.name }} RPC Endpoints</DialogTitle>
+              <p id="rpc-modal-desc" class="rpc-modal__subtitle">{{ modalCurrency?.basicInfo.symbolTicker.toUpperCase() }} — {{ modalEndpoints.length }} endpoint{{ modalEndpoints.length !== 1 ? 's' : '' }}</p>
+            </div>
+          </div>
+
+          <!-- Network filter tabs -->
+          <div class="rpc-modal__tabs">
+            <button
+              v-for="tab in modalNetworkTabs"
+              :key="tab"
+              class="rpc-modal__tab"
+              :class="{ 'rpc-modal__tab--active': modalNetworkFilter === tab }"
+              @click="modalNetworkFilter = tab"
+            >
+              {{ tab === 'all' ? 'All' : capitalize(tab) }}
+              <span class="rpc-modal__tab-count">{{ getTabCount(tab) }}</span>
+            </button>
+          </div>
+
+          <DialogClose class="rpc-modal__close" aria-label="Close">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <path d="M18 6 6 18M6 6l12 12" />
+            </svg>
+          </DialogClose>
+        </div>
+
+        <div class="rpc-modal__body">
+          <div v-if="filteredModalEndpoints.length === 0" class="rpc-modal__empty">
+            No endpoints found for this network.
+          </div>
+          <div
+            v-for="ep in filteredModalEndpoints"
+            :key="ep.url + ep.name"
+            class="rpc-endpoint-card"
+          >
+            <div class="rpc-endpoint-card__top">
+              <div class="rpc-endpoint-card__meta">
+                <span class="rpc-endpoint-card__name">{{ ep.name }}</span>
+                <span class="rpc-endpoint-card__badges">
+                  <span v-if="ep.network" class="rpc-badge" :class="`rpc-badge--${ep.network}`">{{ ep.network }}</span>
+                  <span v-if="ep.serviceType" class="rpc-badge rpc-badge--service">{{ ep.serviceType }}</span>
+                </span>
+              </div>
+              <button
+                class="rpc-endpoint-card__copy"
+                :aria-label="`Copy URL for ${ep.name}`"
+                @click="copyUrl(ep.url)"
+              >
+                <svg v-if="copiedUrl !== ep.url" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                  <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
+                  <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
+                </svg>
+                <svg v-else viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                  <path d="M20 6 9 17l-5-5" />
+                </svg>
+              </button>
+            </div>
+            <a :href="ep.url" target="_blank" rel="noopener noreferrer" class="rpc-endpoint-card__url">{{ ep.url }}</a>
+            <p v-if="ep.type" class="rpc-endpoint-card__type">{{ ep.type }}</p>
+            <p v-if="ep.description" class="rpc-endpoint-card__desc">{{ ep.description }}</p>
+            <div v-if="ep.npmPackage || ep.documentation" class="rpc-endpoint-card__links">
+              <a v-if="ep.npmPackage" :href="`https://www.npmjs.com/package/${ep.npmPackage}`" target="_blank" rel="noopener noreferrer" class="rpc-endpoint-card__link rpc-endpoint-card__link--npm">
+                <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M0 0v24h24V0zm4 4h16v11.3H12V8H8v7.3H4z"/></svg>
+                {{ ep.npmPackage }}
+              </a>
+              <a v-if="ep.documentation" :href="ep.documentation" target="_blank" rel="noopener noreferrer" class="rpc-endpoint-card__link rpc-endpoint-card__link--docs">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
+                Docs
+              </a>
+            </div>
+          </div>
+        </div>
+      </DialogContent>
+    </DialogPortal>
+  </DialogRoot>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import {
+  DialogRoot,
+  DialogPortal,
+  DialogOverlay,
+  DialogContent,
+  DialogTitle,
+  DialogClose,
+} from 'radix-vue'
+import type { CurrencyData } from '@/lib/cores/currencyCore/currencies'
+
+defineOptions({ name: 'DashboardNetworks' })
+
+interface Props {
+  getIcon: (ticker: string) => string | null
+}
+
+defineProps<Props>()
+
+interface RpcEndpoint {
+  name: string
+  url: string
+  port?: number
+  protocol?: string
+  type?: string
+  description?: string
+  npmPackage?: string
+  documentation?: string
+  network?: string
+  serviceType?: string
+}
+
+const modalOpen = ref(false)
+const modalCurrency = ref<CurrencyData | null>(null)
+const modalNetworkFilter = ref<string>('all')
+const copiedUrl = ref<string | null>(null)
+
+const modalEndpoints = computed<RpcEndpoint[]>(() => {
+  if (!modalCurrency.value) return []
+  const endpoints = (modalCurrency.value as Record<string, unknown>)['rpcEndpoints']
+  return Array.isArray(endpoints) ? (endpoints as RpcEndpoint[]) : []
+})
+
+const modalNetworkTabs = computed<string[]>(() => {
+  const networks = new Set<string>(['all'])
+  modalEndpoints.value.forEach((ep) => { if (ep.network) networks.add(ep.network) })
+  return Array.from(networks)
+})
+
+const filteredModalEndpoints = computed<RpcEndpoint[]>(() => {
+  if (modalNetworkFilter.value === 'all') return modalEndpoints.value
+  return modalEndpoints.value.filter((ep) => ep.network === modalNetworkFilter.value)
+})
+
+function getTabCount(tab: string): number {
+  if (tab === 'all') return modalEndpoints.value.length
+  return modalEndpoints.value.filter((ep) => ep.network === tab).length
+}
+
+function capitalize(str: string): string {
+  return str.charAt(0).toUpperCase() + str.slice(1)
+}
+
+function closeModal(open: boolean) {
+  if (!open) {
+    modalOpen.value = false
+    modalCurrency.value = null
+  }
+}
+
+let copyTimeout: ReturnType<typeof setTimeout> | null = null
+function copyUrl(url: string) {
+  navigator.clipboard.writeText(url).catch(() => {})
+  copiedUrl.value = url
+  if (copyTimeout) clearTimeout(copyTimeout)
+  copyTimeout = setTimeout(() => { copiedUrl.value = null }, 2000)
+}
+
+function open(currency: CurrencyData) {
+  modalCurrency.value = currency
+  modalNetworkFilter.value = 'all'
+  copiedUrl.value = null
+  modalOpen.value = true
+}
+
+defineExpose({ open })
+</script>
+
+<style>
+/* ── RPC Endpoints Modal ──────────────────────────────────────────────────── */
+
+.rpc-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.45);
+  z-index: 9998;
+  animation: rpc-fade-in 0.15s ease;
+}
+
+.rpc-modal {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 9999;
+  width: min(92vw, 52rem);
+  max-height: 85vh;
+  background: #fff;
+  border-radius: 0.75rem;
+  box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.25);
+  display: flex;
+  flex-direction: column;
+  animation: rpc-slide-in 0.18s ease;
+  overflow: hidden;
+}
+
+@keyframes rpc-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes rpc-slide-in {
+  from { opacity: 0; transform: translate(-50%, -48%); }
+  to { opacity: 1; transform: translate(-50%, -50%); }
+}
+
+.rpc-modal__header {
+  position: relative;
+  padding: 1.25rem 1.5rem 0;
+  border-bottom: 1px solid #e5e7eb;
+  flex-shrink: 0;
+}
+
+.rpc-modal__title-row {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+.rpc-modal__coin-icon {
+  width: 2.25rem;
+  height: 2.25rem;
+  object-fit: contain;
+  flex-shrink: 0;
+}
+
+.rpc-modal__coin-fallback {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  background: #e5e7eb;
+  border-radius: 0.375rem;
+  font-size: 0.7rem;
+  font-weight: 700;
+  color: #6b7280;
+  flex-shrink: 0;
+}
+
+.rpc-modal__title {
+  font-size: 1.125rem;
+  font-weight: 700;
+  color: #111827;
+  margin: 0;
+}
+
+.rpc-modal__subtitle {
+  font-size: 0.8125rem;
+  color: #6b7280;
+  margin: 0.125rem 0 0;
+}
+
+.rpc-modal__tabs {
+  display: flex;
+  gap: 0.25rem;
+  flex-wrap: wrap;
+  padding-bottom: 0.875rem;
+}
+
+.rpc-modal__tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.3125rem 0.75rem;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: #6b7280;
+  background: transparent;
+  border: 1px solid #e5e7eb;
+  border-radius: 9999px;
+  cursor: pointer;
+  transition: background 0.12s, color 0.12s, border-color 0.12s;
+}
+
+.rpc-modal__tab:hover {
+  background: #f3f4f6;
+  color: #374151;
+}
+
+.rpc-modal__tab--active {
+  background: #2563eb;
+  color: #fff;
+  border-color: #2563eb;
+}
+
+.rpc-modal__tab--active:hover {
+  background: #1d4ed8;
+  color: #fff;
+}
+
+.rpc-modal__tab-count {
+  font-size: 0.75rem;
+  background: rgba(0, 0, 0, 0.08);
+  border-radius: 9999px;
+  padding: 0 0.375rem;
+  line-height: 1.4;
+}
+
+.rpc-modal__tab--active .rpc-modal__tab-count {
+  background: rgba(255, 255, 255, 0.25);
+}
+
+.rpc-modal__close {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border: none;
+  background: #f3f4f6;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  color: #6b7280;
+  transition: background 0.12s, color 0.12s;
+}
+
+.rpc-modal__close svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.rpc-modal__close:hover {
+  background: #e5e7eb;
+  color: #111827;
+}
+
+.rpc-modal__body {
+  overflow-y: auto;
+  padding: 1rem 1.5rem 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.rpc-modal__empty {
+  text-align: center;
+  padding: 2rem;
+  color: #9ca3af;
+  font-size: 0.875rem;
+}
+
+/* ── Endpoint card ─────────────────────────────────────────────────────────── */
+
+.rpc-endpoint-card {
+  border: 1px solid #e5e7eb;
+  border-radius: 0.5rem;
+  padding: 0.875rem 1rem;
+  transition: box-shadow 0.12s;
+}
+
+.rpc-endpoint-card:hover {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+.rpc-endpoint-card__top {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.5rem;
+  margin-bottom: 0.25rem;
+}
+
+.rpc-endpoint-card__meta {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.rpc-endpoint-card__name {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #111827;
+}
+
+.rpc-endpoint-card__badges {
+  display: flex;
+  gap: 0.25rem;
+  flex-wrap: wrap;
+}
+
+.rpc-badge {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  padding: 0.125rem 0.5rem;
+  border-radius: 9999px;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+}
+
+.rpc-badge--mainnet {
+  background: #dcfce7;
+  color: #166534;
+}
+
+.rpc-badge--testnet {
+  background: #fef9c3;
+  color: #854d0e;
+}
+
+.rpc-badge--liquid,
+.rpc-badge--regtest,
+.rpc-badge--devnet,
+.rpc-badge--signet {
+  background: #f3e8ff;
+  color: #6b21a8;
+}
+
+.rpc-badge--service {
+  background: #e0f2fe;
+  color: #0369a1;
+}
+
+.rpc-endpoint-card__copy {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  flex-shrink: 0;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.25rem;
+  background: #fff;
+  color: #6b7280;
+  cursor: pointer;
+  transition: background 0.12s, color 0.12s;
+}
+
+.rpc-endpoint-card__copy svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+.rpc-endpoint-card__copy:hover {
+  background: #f3f4f6;
+  color: #111827;
+}
+
+.rpc-endpoint-card__url {
+  display: block;
+  font-size: 0.8125rem;
+  color: #2563eb;
+  text-decoration: none;
+  font-family: ui-monospace, monospace;
+  word-break: break-all;
+  margin-bottom: 0.25rem;
+}
+
+.rpc-endpoint-card__url:hover {
+  text-decoration: underline;
+}
+
+.rpc-endpoint-card__type {
+  font-size: 0.8125rem;
+  color: #6b7280;
+  margin: 0 0 0.25rem;
+  font-style: italic;
+}
+
+.rpc-endpoint-card__desc {
+  font-size: 0.8125rem;
+  color: #4b5563;
+  margin: 0 0 0.5rem;
+  line-height: 1.45;
+}
+
+.rpc-endpoint-card__links {
+  display: flex;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+.rpc-endpoint-card__link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  text-decoration: none;
+  border-radius: 0.25rem;
+  padding: 0.125rem 0.375rem;
+  transition: background 0.12s;
+}
+
+.rpc-endpoint-card__link svg {
+  width: 0.875rem;
+  height: 0.875rem;
+  flex-shrink: 0;
+}
+
+.rpc-endpoint-card__link--npm {
+  color: #cb3837;
+  background: #fff0f0;
+}
+
+.rpc-endpoint-card__link--npm svg {
+  fill: #cb3837;
+  stroke: none;
+}
+
+.rpc-endpoint-card__link--npm:hover {
+  background: #ffe0e0;
+}
+
+.rpc-endpoint-card__link--docs {
+  color: #374151;
+  background: #f3f4f6;
+}
+
+.rpc-endpoint-card__link--docs:hover {
+  background: #e5e7eb;
+}
+</style>
diff --git a/src/components/pageTabs/settings/DashboardSettings.vue b/src/components/pageTabs/settings/DashboardSettings.vue
index f7f784a8..4ad299d6 100644
--- a/src/components/pageTabs/settings/DashboardSettings.vue
+++ b/src/components/pageTabs/settings/DashboardSettings.vue
@@ -11,9 +11,17 @@
       <p class="dashboard-desc">
         Choose which currencies appear on your dashboard. At least one must remain active.
       </p>
-      <div class="dashboard-stats">
-        <span class="dashboard-stat">Active: {{ activeCount }} / {{ currenciesOrdered.length }}</span>
-      </div>
+    </div>
+
+    <div class="dashboard-toolbar">
+      <input
+        v-model="searchQuery"
+        type="search"
+        class="dashboard-search"
+        placeholder="Filter by name or ticker..."
+        aria-label="Filter currencies"
+      />
+      <span class="dashboard-stat">Active: {{ activeCount }} / {{ currenciesOrdered.length }} ({{ filteredCurrencies.length }} shown)</span>
     </div>
 
     <div class="dashboard-table-wrapper">
@@ -24,13 +32,15 @@
             <th class="dashboard-th dashboard-th--coin">Coin</th>
             <th class="dashboard-th dashboard-th--name">Name</th>
             <th class="dashboard-th dashboard-th--ticker">Ticker</th>
+            <th class="dashboard-th dashboard-th--tags">Tags</th>
+            <th class="dashboard-th dashboard-th--description">Description</th>
             <th class="dashboard-th dashboard-th--visibility">Visible</th>
             <th class="dashboard-th dashboard-th--network">Network</th>
           </tr>
         </thead>
         <tbody>
           <tr
-            v-for="(currency, index) in currenciesOrdered"
+            v-for="(currency, index) in filteredCurrencies"
             :key="currency.basicInfo.symbolTicker"
             class="dashboard-row"
           >
@@ -50,73 +60,77 @@
             <td class="dashboard-td dashboard-td--ticker">
               <span class="dashboard-ticker">{{ currency.basicInfo.symbolTicker.toUpperCase() }}</span>
             </td>
+            <td class="dashboard-td dashboard-td--tags">
+              <span class="dashboard-tags">{{ getTags(currency) }}</span>
+            </td>
+            <td class="dashboard-td dashboard-td--description">
+              <span class="dashboard-desc-cell" :title="currency.basicInfo.description">{{ truncateDesc(currency.basicInfo.description) }}</span>
+            </td>
             <td class="dashboard-td dashboard-td--visibility">
-              <SwitchRoot
-                :checked="visibilityToggles[currency.basicInfo.symbolTicker] ?? true"
-                :disabled="activeCount <= 1 && (visibilityToggles[currency.basicInfo.symbolTicker] ?? true)"
-                class="dashboard-switch"
-                @update:checked="(v) => toggleVisibility(currency.basicInfo.symbolTicker, v)"
+              <label
+                class="dashboard-toggle"
+                :class="{ 'dashboard-toggle--disabled': activeCount <= 1 && (visibilityToggles[currency.basicInfo.symbolTicker] ?? true) }"
               >
-                <SwitchThumb class="dashboard-switch-thumb" />
-              </SwitchRoot>
+                <input
+                  type="checkbox"
+                  :checked="visibilityToggles[currency.basicInfo.symbolTicker] ?? true"
+                  :disabled="activeCount <= 1 && (visibilityToggles[currency.basicInfo.symbolTicker] ?? true)"
+                  class="sr-only"
+                  :aria-label="`Toggle ${currency.basicInfo.name} visibility`"
+                  @change="toggleVisibility(currency.basicInfo.symbolTicker, ($event.target as HTMLInputElement).checked)"
+                />
+                <span class="dashboard-toggle-track" />
+              </label>
             </td>
             <td class="dashboard-td dashboard-td--network">
-              <SelectRoot
-                :model-value="networkSelection[currency.basicInfo.symbolTicker] ?? 'Mainnet'"
-                @update:model-value="(v) => selectNetwork(currency.basicInfo.symbolTicker, v)"
+              <button
+                class="dashboard-network-btn"
+                :aria-label="`View RPC endpoints for ${currency.basicInfo.name}`"
+                @click="openEndpointsModal(currency)"
               >
-                <SelectTrigger class="dashboard-select-trigger" aria-label="Select network">
-                  <SelectValue placeholder="Network" />
-                </SelectTrigger>
-                <SelectPortal>
-                  <SelectContent class="dashboard-select-content" position="popper" :side-offset="4">
-                    <SelectViewport class="dashboard-select-viewport">
-                      <SelectItem
-                        v-for="opt in networkOptions"
-                        :key="opt"
-                        :value="opt"
-                        class="dashboard-select-item"
-                      >
-                        <SelectItemText>{{ opt }}</SelectItemText>
-                      </SelectItem>
-                    </SelectViewport>
-                  </SelectContent>
-                </SelectPortal>
-              </SelectRoot>
+                <span class="dashboard-network-btn__label">
+                  {{ getEndpointCount(currency) }} endpoint{{ getEndpointCount(currency) !== 1 ? 's' : '' }}
+                </span>
+                <svg class="dashboard-network-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                  <circle cx="12" cy="12" r="10" />
+                  <path d="M2 12h20M12 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" />
+                </svg>
+              </button>
             </td>
           </tr>
         </tbody>
       </table>
     </div>
+
+    <DashboardNetworks ref="networksModal" :get-icon="getIcon" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
-import {
-  SwitchRoot,
-  SwitchThumb,
-  SelectRoot,
-  SelectTrigger,
-  SelectContent,
-  SelectItem,
-  SelectItemText,
-  SelectValue,
-  SelectPortal,
-  SelectViewport,
-} from 'radix-vue'
 import { allCurrencies, NETWORKS } from '@/lib/cores/currencyCore/currencies'
 import type { CurrencyData } from '@/lib/cores/currencyCore/currencies'
+import DashboardNetworks from '@/components/modals/settings/dashboard/dashboardNetworks.vue'
 
 defineOptions({ name: 'DashboardSettings' })
 
 const STORAGE_KEY_VISIBILITY = 'sparkplate_dashboard_visibility'
-const STORAGE_KEY_NETWORK = 'sparkplate_dashboard_network'
 
 const visibilityToggles = ref<Record<string, boolean>>({})
-const networkSelection = ref<Record<string, string>>({})
+const searchQuery = ref('')
 
-const networkOptions = ['Mainnet', 'Testnet']
+// ── RPC Endpoints modal ──────────────────────────────────────────────────────
+
+const networksModal = ref<InstanceType<typeof DashboardNetworks> | null>(null)
+
+function getEndpointCount(currency: CurrencyData): number {
+  const endpoints = (currency as Record<string, unknown>)['rpcEndpoints']
+  return Array.isArray(endpoints) ? endpoints.length : 0
+}
+
+function openEndpointsModal(currency: CurrencyData) {
+  networksModal.value?.open(currency)
+}
 
 const currenciesOrdered = computed(() => {
   return [...allCurrencies].sort((a, b) =>
@@ -124,10 +138,42 @@ const currenciesOrdered = computed(() => {
   ) as CurrencyData[]
 })
 
+const filteredCurrencies = computed(() => {
+  const q = searchQuery.value.trim().toLowerCase()
+  if (!q) return currenciesOrdered.value
+  return currenciesOrdered.value.filter(
+    (c) =>
+      c.basicInfo.name.toLowerCase().includes(q) ||
+      c.basicInfo.symbolTicker.toLowerCase().includes(q)
+  )
+})
+
 const activeCount = computed(() => {
   return Object.entries(visibilityToggles.value).filter(([, v]) => v).length
 })
 
+function getTags(currency: CurrencyData): string {
+  const parts: string[] = []
+  if (currency.technicalInfo?.proofingType) {
+    const pt = currency.technicalInfo.proofingType
+    if (pt === 'Proof of Stake') parts.push('PoS')
+    else if (pt === 'Proof of Work') parts.push('PoW')
+    else if (pt === 'Proof of Authority') parts.push('PoA')
+    else parts.push(pt)
+  }
+  if (currency.technicalInfo?.class) {
+    const cls = currency.technicalInfo.class
+    if (cls.includes('Layer 1')) parts.push('L1')
+    else if (cls.includes('Layer 2')) parts.push('L2')
+  }
+  return parts.length ? parts.join(', ') : '—'
+}
+
+function truncateDesc(text: string, max = 60): string {
+  if (!text || !text.trim()) return '—'
+  return text.length <= max ? text : text.slice(0, max).trim() + '…'
+}
+
 function getIcon(ticker: string): string | null {
   const n = NETWORKS.find((x) => x.ticker === ticker.toUpperCase())
   return n?.icon ?? null
@@ -139,11 +185,6 @@ function toggleVisibility(ticker: string, value: boolean) {
   saveVisibility()
 }
 
-function selectNetwork(ticker: string, network: string) {
-  networkSelection.value = { ...networkSelection.value, [ticker]: network }
-  saveNetwork()
-}
-
 function loadVisibility() {
   try {
     const raw = localStorage.getItem(STORAGE_KEY_VISIBILITY)
@@ -155,17 +196,6 @@ function loadVisibility() {
   }
 }
 
-function loadNetwork() {
-  try {
-    const raw = localStorage.getItem(STORAGE_KEY_NETWORK)
-    if (raw) {
-      networkSelection.value = { ...networkSelection.value, ...JSON.parse(raw) }
-    }
-  } catch {
-    // keep defaults
-  }
-}
-
 function saveVisibility() {
   try {
     localStorage.setItem(STORAGE_KEY_VISIBILITY, JSON.stringify(visibilityToggles.value))
@@ -174,17 +204,8 @@ function saveVisibility() {
   }
 }
 
-function saveNetwork() {
-  try {
-    localStorage.setItem(STORAGE_KEY_NETWORK, JSON.stringify(networkSelection.value))
-  } catch {
-    // ignore
-  }
-}
-
 onMounted(() => {
   loadVisibility()
-  loadNetwork()
   // Ensure all currencies have a visibility entry (default: true)
   const next: Record<string, boolean> = { ...visibilityToggles.value }
   let changed = false
@@ -225,14 +246,46 @@ onMounted(() => {
   line-height: 1.4;
 }
 
-.dashboard-stats {
+.dashboard-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+
+.dashboard-search {
+  flex: 1;
+  max-width: 20rem;
+  padding: 0.5rem 0.75rem 0.5rem 2rem;
+  font-size: 0.875rem;
+  color: #374151;
+  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 0.6rem center;
+  border: 1px solid #d1d5db;
+  border-radius: 0.375rem;
+  outline: none;
+
+  &::placeholder {
+    color: #9ca3af;
+  }
+
+  &:focus {
+    border-color: #2563eb;
+    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
+  }
+}
+
+.dashboard-stat {
   font-size: 0.875rem;
   font-weight: 500;
   color: #374151;
+  flex-shrink: 0;
 }
 
 .dashboard-table-wrapper {
   overflow-x: auto;
+  overflow-y: auto;
+  max-height: 60vh;
   border: 1px solid #e5e7eb;
   border-radius: 0.5rem;
 }
@@ -244,12 +297,16 @@ onMounted(() => {
 }
 
 .dashboard-th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
   text-align: left;
   padding: 0.75rem 1rem;
   font-weight: 600;
   color: #374151;
   background: #f9fafb;
   border-bottom: 1px solid #e5e7eb;
+  box-shadow: 0 1px 0 0 #e5e7eb;
 }
 
 .dashboard-th--index {
@@ -262,11 +319,59 @@ onMounted(() => {
   text-align: center;
 }
 
+.dashboard-th--name {
+  max-width: 12rem;
+  padding-right: 0.375rem;
+}
+
+.dashboard-td--name {
+  max-width: 12rem;
+  padding-right: 0.375rem;
+}
+
 .dashboard-th--ticker {
   width: 5rem;
+  padding-left: 0.375rem;
   text-align: center;
 }
 
+.dashboard-td--ticker {
+  padding-left: 0.375rem;
+}
+
+.dashboard-th--tags {
+  min-width: 5rem;
+  max-width: 8rem;
+}
+
+.dashboard-td--tags {
+  font-size: 0.8125rem;
+  color: #6b7280;
+}
+
+.dashboard-tags {
+  white-space: nowrap;
+}
+
+.dashboard-th--description {
+  min-width: 10rem;
+  max-width: 18rem;
+}
+
+.dashboard-td--description {
+  font-size: 0.8125rem;
+  color: #6b7280;
+  line-height: 1.35;
+}
+
+.dashboard-desc-cell {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
 .dashboard-th--visibility {
   width: 6rem;
   text-align: center;
@@ -276,6 +381,38 @@ onMounted(() => {
   width: 9rem;
 }
 
+// ── Network button ────────────────────────────────────────────────────────────
+
+.dashboard-network-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.375rem 0.625rem;
+  font-size: 0.8125rem;
+  color: #2563eb;
+  background: #eff6ff;
+  border: 1px solid #bfdbfe;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background 0.15s, border-color 0.15s;
+
+  &:hover {
+    background: #dbeafe;
+    border-color: #93c5fd;
+  }
+
+  &__label {
+    font-weight: 500;
+  }
+
+  &__icon {
+    width: 0.875rem;
+    height: 0.875rem;
+    flex-shrink: 0;
+  }
+}
+
 .dashboard-row {
   border-bottom: 1px solid #f3f4f6;
 
@@ -332,94 +469,57 @@ onMounted(() => {
   text-align: center;
 }
 
-.dashboard-switch {
+.dashboard-toggle {
   position: relative;
-  width: 2.25rem;
-  height: 1.25rem;
-  background: #d1d5db;
-  border-radius: 9999px;
+  display: inline-flex;
+  align-items: center;
   cursor: pointer;
-  transition: background 0.15s;
-
-  &[data-state='checked'] {
-    background: #2563eb;
-  }
+  flex-shrink: 0;
+}
 
-  &[data-disabled] {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
+.dashboard-toggle--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
 }
 
-.dashboard-switch-thumb {
-  display: block;
-  width: 1rem;
-  height: 1rem;
-  background: #fff;
+.dashboard-toggle-track {
+  position: relative;
+  width: 2.75rem;
+  height: 1.5rem;
   border-radius: 9999px;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-  transition: transform 0.15s;
-  transform: translateX(2px);
-
-  [data-state='checked'] & {
-    transform: translateX(1.125rem);
-  }
+  background: #d1d5db;
+  transition: background 0.2s;
+  border: none;
 }
 
-.dashboard-select-trigger {
-  display: inline-flex;
-  align-items: center;
-  justify-content: space-between;
-  min-width: 7rem;
-  padding: 0.5rem 0.75rem;
-  font-size: 0.875rem;
-  color: #374151;
+.dashboard-toggle-track::after {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: 9999px;
   background: #fff;
-  border: 1px solid #d1d5db;
-  border-radius: 0.375rem;
-  cursor: pointer;
-  outline: none;
-
-  &:hover {
-    border-color: #9ca3af;
-  }
-
-  &:focus-visible {
-    border-color: #2563eb;
-    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
-  }
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  transition: transform 0.2s;
 }
 
-.dashboard-td--network {
-  min-width: 9rem;
+.dashboard-toggle input:checked + .dashboard-toggle-track {
+  background: #3b82f6;
 }
-</style>
 
-<style>
-.dashboard-select-content {
-  min-width: 10rem;
-  background: #fff;
-  border: 1px solid #e5e7eb;
-  border-radius: 0.5rem;
-  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
-  padding: 0.25rem;
-  z-index: 10000;
+.dashboard-toggle input:checked + .dashboard-toggle-track::after {
+  transform: translateX(1.25rem);
 }
 
-.dashboard-select-viewport {
-  padding: 0;
-}
-
-.dashboard-select-item {
-  padding: 0.5rem 0.75rem;
-  font-size: 0.875rem;
-  border-radius: 0.25rem;
-  cursor: pointer;
+.dashboard-toggle input:focus-visible + .dashboard-toggle-track {
   outline: none;
+  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #3b82f6;
+}
 
-  &:hover,
-  &[data-highlighted] {
-    background: #f3f4f6;
-  }
+.dashboard-td--network {
+  min-width: 9rem;
 }
 </style>