From c71feaae1a910371d1b947738dbc8503376452f0 Mon Sep 17 00:00:00 2001
From: Ranveer Soni <git@ranveersoni.me>
Date: Tue, 9 Jun 2026 11:34:05 +0530
Subject: [PATCH] feat(fix): safari issues, optimization, react issues, visual
 bugs

---
 app/api/github/releases/route.ts              |   6 +-
 app/games/opengraph-image.tsx                 |   1 -
 app/games/page.tsx                            |   3 +-
 app/games/twitter-image.tsx                   |   1 -
 app/kb/[category]/[article]/page.tsx          |  12 +-
 app/kb/[category]/page.tsx                    |  16 +-
 app/kb/page.tsx                               |  12 +-
 app/maintenance/page.tsx                      |  16 +-
 app/opengraph-image.tsx                       |   1 -
 app/page.tsx                                  |   6 +
 app/twitter-image.tsx                         |   1 -
 app/vps/opengraph-image.tsx                   |   1 -
 app/vps/twitter-image.tsx                     |   1 -
 package.json                                  |   3 +-
 .../changelog/components/changelog-card.tsx   |  13 +-
 .../changelog/components/changelog-list.tsx   | 193 ++++--------------
 .../components/changelog-pagination.tsx       |  93 +++++++++
 .../changelog/components/changelog-search.tsx |   1 +
 .../changelog/components/changelog-stats.tsx  |  52 +++++
 packages/changelog/hooks/use-changelog.ts     |  64 +++---
 packages/core/hooks/use-currency.tsx          |  96 ++++-----
 packages/core/hooks/use-locale.tsx            |  28 ++-
 packages/core/hooks/use-mobile.ts             |  20 +-
 packages/core/products/server.ts              |  37 ++--
 packages/kb/components/kb-article-card.tsx    |   2 +-
 packages/kb/components/kb-article.tsx         |  19 +-
 packages/kb/components/kb-breadcrumb.tsx      |   2 +-
 packages/kb/components/kb-category-card.tsx   |   2 +-
 packages/kb/components/kb-search.tsx          | 146 ++++++++-----
 packages/kb/components/kb-sidebar.tsx         |  28 +--
 packages/kb/lib/kb.ts                         |  12 +-
 .../components/Layouts/About/about-page.tsx   |   2 +-
 .../ui/components/Layouts/Contact/contact.tsx |   2 +-
 .../ui/components/Layouts/Games/game-faq.tsx  |   2 +-
 .../Layouts/Games/game-features.tsx           |   2 +-
 .../ui/components/Layouts/Games/game-hero.tsx |   2 +
 .../components/Layouts/Games/game-pricing.tsx |  32 +--
 packages/ui/components/Layouts/Home/about.tsx |   2 +-
 packages/ui/components/Layouts/Home/faq.tsx   |  10 +-
 .../ui/components/Layouts/Home/features.tsx   |   4 +-
 .../components/Layouts/Home/hero-graphic.tsx  |  53 +++--
 .../ui/components/Layouts/Home/hero-stats.tsx |  50 +++++
 packages/ui/components/Layouts/Home/hero.tsx  |  92 +--------
 .../ui/components/Layouts/Home/services.tsx   |   2 +-
 .../components/Layouts/Nodes/nodes-client.tsx |  11 +-
 .../ui/components/Layouts/VPS/vps-hub.tsx     |  19 +-
 .../ui/components/Layouts/VPS/vps-pricing.tsx |   1 +
 packages/ui/components/Static/footer.tsx      |  29 ++-
 packages/ui/components/Static/navigation.tsx  |  39 ++--
 packages/ui/components/scroll-to-hash.tsx     |  18 +-
 packages/ui/components/ui/alert-dialog.tsx    |   2 +-
 packages/ui/components/ui/badge.tsx           |   2 +-
 packages/ui/components/ui/button-group.tsx    |   1 -
 packages/ui/components/ui/button-variants.ts  |  33 +++
 packages/ui/components/ui/button.tsx          |  37 +---
 packages/ui/components/ui/calendar.tsx        |   7 +-
 packages/ui/components/ui/carousel.tsx        |  56 ++---
 packages/ui/components/ui/chart.tsx           |  12 +-
 packages/ui/components/ui/field.tsx           |  17 +-
 packages/ui/components/ui/input-group.tsx     |   9 +
 .../ui/components/ui/language-selector.tsx    |  10 +-
 packages/ui/components/ui/navigation-menu.tsx |   1 -
 packages/ui/components/ui/pagination.tsx      |   4 +-
 packages/ui/components/ui/sidebar.tsx         |  48 ++---
 packages/ui/components/ui/slider.tsx          |  18 +-
 packages/ui/components/ui/toggle-group.tsx    |   2 +-
 packages/ui/components/ui/toggle-variants.ts  |  23 +++
 packages/ui/components/ui/toggle.tsx          |  27 +--
 68 files changed, 810 insertions(+), 759 deletions(-)
 create mode 100644 packages/changelog/components/changelog-pagination.tsx
 create mode 100644 packages/changelog/components/changelog-stats.tsx
 create mode 100644 packages/ui/components/Layouts/Home/hero-stats.tsx
 create mode 100644 packages/ui/components/ui/button-variants.ts
 create mode 100644 packages/ui/components/ui/toggle-variants.ts

diff --git a/app/api/github/releases/route.ts b/app/api/github/releases/route.ts
index a736fd3..f6fa8c8 100644
--- a/app/api/github/releases/route.ts
+++ b/app/api/github/releases/route.ts
@@ -120,8 +120,10 @@ export async function GET(request: Request) {
   const { searchParams } = new URL(request.url)
   const repo = searchParams.get('repo') // Optional: filter by specific repo
   
-  const token = await getGithubToken()
-  const repositories = await getConfiguredRepositories()
+  const [token, repositories] = await Promise.all([
+    getGithubToken(),
+    getConfiguredRepositories(),
+  ])
 
   try {
     const reposToFetch = repo 
diff --git a/app/games/opengraph-image.tsx b/app/games/opengraph-image.tsx
index ccf8bdd..8f9548d 100644
--- a/app/games/opengraph-image.tsx
+++ b/app/games/opengraph-image.tsx
@@ -1,6 +1,5 @@
 import { OG_CONFIGS, OG_CONTENT_TYPE, OG_SIZE, makeOGImage } from '../_og/image-generator'
 
-export const runtime = 'edge'
 export const alt = 'NodeByte Game Server Hosting — Minecraft, Rust, Hytale & more'
 export const size = OG_SIZE
 export const contentType = OG_CONTENT_TYPE
diff --git a/app/games/page.tsx b/app/games/page.tsx
index bc2a1ef..04feb13 100644
--- a/app/games/page.tsx
+++ b/app/games/page.tsx
@@ -85,6 +85,7 @@ export default async function GamesPage() {
                   src={game.banner}
                   alt={game.name}
                   fill
+                  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
                   className="object-cover transition-transform duration-300 group-hover:scale-105"
                 />
                 <div className="absolute inset-0 bg-linear-to-t from-card to-transparent" />
@@ -124,7 +125,7 @@ export default async function GamesPage() {
                 {/* Features */}
                 <ul className="space-y-2 mb-6 flex-1">
                   {game.features.map((feature, i) => (
-                    <li key={i} className="flex items-center gap-2 text-sm text-muted-foreground">
+                    <li key={feature} className="flex items-center gap-2 text-sm text-muted-foreground">
                       <Check className="w-4 h-4 text-primary shrink-0" />
                       {feature}
                     </li>
diff --git a/app/games/twitter-image.tsx b/app/games/twitter-image.tsx
index ccf8bdd..8f9548d 100644
--- a/app/games/twitter-image.tsx
+++ b/app/games/twitter-image.tsx
@@ -1,6 +1,5 @@
 import { OG_CONFIGS, OG_CONTENT_TYPE, OG_SIZE, makeOGImage } from '../_og/image-generator'
 
-export const runtime = 'edge'
 export const alt = 'NodeByte Game Server Hosting — Minecraft, Rust, Hytale & more'
 export const size = OG_SIZE
 export const contentType = OG_CONTENT_TYPE
diff --git a/app/kb/[category]/[article]/page.tsx b/app/kb/[category]/[article]/page.tsx
index 3769581..1705b05 100644
--- a/app/kb/[category]/[article]/page.tsx
+++ b/app/kb/[category]/[article]/page.tsx
@@ -48,17 +48,19 @@ export async function generateStaticParams() {
 }
 
 export default async function ArticlePage({ params }: ArticlePageProps) {
-  const t = await getTranslations();
   const { category, article } = await params;
-  const articleData = await getArticle(category, article);
+  const [t, articleData, categories, articlesInCategory] = await Promise.all([
+    getTranslations(),
+    getArticle(category, article),
+    getCategories(),
+    getArticlesByCategory(category),
+  ]);
 
   if (!articleData) {
     notFound();
   }
 
-  const categories = await getCategories();
   const categoryData = categories.find((c) => c.slug === category);
-  const articlesInCategory = await getArticlesByCategory(category);
 
   // Prepare sidebar data
   const sidebarCategories: SidebarCategory[] = await Promise.all(
@@ -82,7 +84,7 @@ export default async function ArticlePage({ params }: ArticlePageProps) {
   const headings = extractHeadings(articleData.content);
 
   // Find adjacent articles for navigation
-  const sortedArticles = [...articlesInCategory].sort((a, b) => a.order - b.order);
+  const sortedArticles = articlesInCategory.toSorted((a, b) => a.order - b.order);
   const currentIndex = sortedArticles.findIndex((a) => a.slug === article);
   const previousArticle =
     currentIndex > 0
diff --git a/app/kb/[category]/page.tsx b/app/kb/[category]/page.tsx
index d855175..92e6127 100644
--- a/app/kb/[category]/page.tsx
+++ b/app/kb/[category]/page.tsx
@@ -36,8 +36,11 @@ interface CategoryPageProps {
 export async function generateMetadata({
   params,
 }: CategoryPageProps): Promise<Metadata> {
-  const { category } = await params;
-  const categories = await getCategories();
+  const [{ category }, categories] = await Promise.all([
+    params,
+    getCategories(),
+  ]);
+
   const categoryData = categories.find((c) => c.slug === category);
 
   if (!categoryData) {
@@ -60,16 +63,17 @@ export async function generateStaticParams() {
 }
 
 export default async function CategoryPage({ params }: CategoryPageProps) {
-  const t = await getTranslations();
   const { category } = await params;
-  const categories = await getCategories();
+  const [t, categories, articles] = await Promise.all([
+    getTranslations(),
+    getCategories(),
+    getArticlesByCategory(category),
+  ]);
   const categoryData = categories.find((c) => c.slug === category);
 
   if (!categoryData) {
     notFound();
   }
-
-  const articles = await getArticlesByCategory(category);
   const Icon = iconMap[categoryData.icon] || HelpCircle;
 
   return (
diff --git a/app/kb/page.tsx b/app/kb/page.tsx
index 0220c67..01a5203 100644
--- a/app/kb/page.tsx
+++ b/app/kb/page.tsx
@@ -25,13 +25,15 @@ export async function generateMetadata(): Promise<Metadata> {
 }
 
 export default async function KnowledgeBasePage() {
-  const t = await getTranslations();
-  const categories = await getCategories();
-  const allArticles = await getAllArticles();
+  const [t, categories, allArticles] = await Promise.all([
+    getTranslations(),
+    getCategories(),
+    getAllArticles(),
+  ]);
 
   // Get recent articles (last 5 by date)
-  const recentArticles = [...allArticles]
-    .sort((a, b) => {
+  const recentArticles = allArticles
+    .toSorted((a, b) => {
       const dateA = new Date(a.lastUpdated || 0).getTime();
       const dateB = new Date(b.lastUpdated || 0).getTime();
       return dateB - dateA;
diff --git a/app/maintenance/page.tsx b/app/maintenance/page.tsx
index 431ee67..54bf82b 100644
--- a/app/maintenance/page.tsx
+++ b/app/maintenance/page.tsx
@@ -1,6 +1,5 @@
-"use client"
-
-import { useTranslations } from "next-intl"
+import { getTranslations } from "next-intl/server"
+import { Metadata } from "next"
 import { AlertCircle, Wrench, Mail, MessageCircle } from "lucide-react"
 import { Button } from "@/packages/ui/components/ui/button"
 import { Card } from "@/packages/ui/components/ui/card"
@@ -8,8 +7,13 @@ import { Logo } from "@/packages/ui/components/logo"
 import Link from "next/link"
 import { LINKS } from "@/packages/core/constants/links"
 
-export default function MaintenancePage() {
-  const t = useTranslations("admin")
+export const metadata: Metadata = {
+  title: "Maintenance",
+  description: "We are currently performing scheduled maintenance.",
+}
+
+export default async function MaintenancePage() {
+  const t = await getTranslations("admin")
 
   return (
     <main className="min-h-screen flex items-center justify-center px-4 py-32 relative overflow-hidden">
@@ -32,7 +36,7 @@ export default function MaintenancePage() {
           <div className="flex justify-center mb-6">
             <div className="relative">
               <div className="absolute inset-0 bg-primary/30 blur-2xl rounded-full"></div>
-              <Wrench className="h-24 w-24 text-primary relative z-10 animate-bounce" />
+              <Wrench className="h-24 w-24 text-primary relative z-10 motion-safe:animate-pulse" />
             </div>
           </div>
         </div>
diff --git a/app/opengraph-image.tsx b/app/opengraph-image.tsx
index 4372e68..efcec49 100644
--- a/app/opengraph-image.tsx
+++ b/app/opengraph-image.tsx
@@ -1,6 +1,5 @@
 import { OG_CONFIGS, OG_CONTENT_TYPE, OG_SIZE, makeOGImage } from './_og/image-generator'
 
-export const runtime = 'edge'
 export const alt = 'NodeByte Hosting — Game Servers & VPS'
 export const size = OG_SIZE
 export const contentType = OG_CONTENT_TYPE
diff --git a/app/page.tsx b/app/page.tsx
index 9485ad0..144978f 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,3 +1,4 @@
+import { Metadata } from "next"
 import { Hero } from "@/packages/ui/components/Layouts/Home/hero"
 import { Features } from "@/packages/ui/components/Layouts/Home/features"
 import { About } from "@/packages/ui/components/Layouts/Home/about"
@@ -5,6 +6,11 @@ import { Services } from "@/packages/ui/components/Layouts/Home/services"
 import { FAQ } from "@/packages/ui/components/Layouts/Home/faq"
 import { ScrollToHash } from "@/packages/ui/components/scroll-to-hash"
 
+export const metadata: Metadata = {
+  title: "Home",
+  description: "Fast, reliable, and secure hosting for game servers and VPS. Instant deployment, enterprise DDoS protection, NVMe SSD storage, and 24/7 expert support.",
+}
+
 export default function Home() {
   return (
     <>
diff --git a/app/twitter-image.tsx b/app/twitter-image.tsx
index 4372e68..efcec49 100644
--- a/app/twitter-image.tsx
+++ b/app/twitter-image.tsx
@@ -1,6 +1,5 @@
 import { OG_CONFIGS, OG_CONTENT_TYPE, OG_SIZE, makeOGImage } from './_og/image-generator'
 
-export const runtime = 'edge'
 export const alt = 'NodeByte Hosting — Game Servers & VPS'
 export const size = OG_SIZE
 export const contentType = OG_CONTENT_TYPE
diff --git a/app/vps/opengraph-image.tsx b/app/vps/opengraph-image.tsx
index 7c186e1..a7a872c 100644
--- a/app/vps/opengraph-image.tsx
+++ b/app/vps/opengraph-image.tsx
@@ -1,6 +1,5 @@
 import { OG_CONFIGS, OG_CONTENT_TYPE, OG_SIZE, makeOGImage } from '../_og/image-generator'
 
-export const runtime = 'edge'
 export const alt = 'NodeByte VPS Hosting — AMD & Intel KVM VPS'
 export const size = OG_SIZE
 export const contentType = OG_CONTENT_TYPE
diff --git a/app/vps/twitter-image.tsx b/app/vps/twitter-image.tsx
index 7c186e1..a7a872c 100644
--- a/app/vps/twitter-image.tsx
+++ b/app/vps/twitter-image.tsx
@@ -1,6 +1,5 @@
 import { OG_CONFIGS, OG_CONTENT_TYPE, OG_SIZE, makeOGImage } from '../_og/image-generator'
 
-export const runtime = 'edge'
 export const alt = 'NodeByte VPS Hosting — AMD & Intel KVM VPS'
 export const size = OG_SIZE
 export const contentType = OG_CONTENT_TYPE
diff --git a/package.json b/package.json
index d645779..e49e1de 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,8 @@
     "postinstall": "git submodule update --init --recursive --remote",
     "translate": "bun run scripts/translate.ts",
     "translate:force": "bun run scripts/translate.ts --force",
-    "translate:dry": "bun run scripts/translate.ts --dry-run"
+    "translate:dry": "bun run scripts/translate.ts --dry-run",
+    "doctor": "npx react-doctor@latest"
   },
   "dependencies": {
     "@hookform/resolvers": "^3.10.0",
diff --git a/packages/changelog/components/changelog-card.tsx b/packages/changelog/components/changelog-card.tsx
index 305d793..8d5fc10 100644
--- a/packages/changelog/components/changelog-card.tsx
+++ b/packages/changelog/components/changelog-card.tsx
@@ -56,23 +56,17 @@ const TYPE_LABELS: Record<string, string> = {
 
 export function ChangelogCard({ release, translations, isLatest, isLinked, className }: ChangelogCardProps) {
   const [showAssets, setShowAssets] = useState(false)
-  const [expanded, setExpanded] = useState(isLinked ?? false)
   const [linkCopied, setLinkCopied] = useState(false)
+  const [userExpanded, setUserExpanded] = useState(false)
   
   const summary = extractSummary(release.body)
   const hasLongBody = (release.body?.length || 0) > 300
   const typeColor = TYPE_COLORS[release.type || 'improvement']
   const publishedDate = new Date(release.published_at || release.created_at)
   
-  // Create a unique anchor ID for this release
   const anchorId = `${release.repository.name}-${release.tag_name}`
 
-  // Expand when linked to directly
-  useEffect(() => {
-    if (isLinked) {
-      setExpanded(true)
-    }
-  }, [isLinked])
+  const expanded = userExpanded || (isLinked ?? false)
 
   const handleCopyLink = async () => {
     const url = `${window.location.origin}${window.location.pathname}#${anchorId}`
@@ -111,6 +105,7 @@ export function ChangelogCard({ release, translations, isLatest, isLinked, class
                 <Tooltip>
                   <TooltipTrigger asChild>
                     <button
+                      type="button"
                       onClick={handleCopyLink}
                       className="flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
                     >
@@ -217,7 +212,7 @@ export function ChangelogCard({ release, translations, isLatest, isLinked, class
               <Button
                 variant="ghost"
                 size="sm"
-                onClick={() => setExpanded(!expanded)}
+                onClick={() => setUserExpanded((v) => !v)}
                 className="mt-2 h-7 px-2 text-xs"
               >
                 {expanded ? (
diff --git a/packages/changelog/components/changelog-list.tsx b/packages/changelog/components/changelog-list.tsx
index 17c54bf..4db9930 100644
--- a/packages/changelog/components/changelog-list.tsx
+++ b/packages/changelog/components/changelog-list.tsx
@@ -1,16 +1,18 @@
 "use client"
 
-import { useState, useMemo, useEffect } from "react"
-import { Rocket, Package, GitBranch, Calendar, RefreshCw, SearchX, ChevronLeft, ChevronRight } from "lucide-react"
+import { useState, useEffect } from "react"
+import { RefreshCw, SearchX } from "lucide-react"
 import { useTranslations } from "next-intl"
 import { Card, CardContent } from "@/packages/ui/components/ui/card"
 import { Button } from "@/packages/ui/components/ui/button"
 import { Skeleton } from "@/packages/ui/components/ui/skeleton"
 import { ChangelogCard } from "./changelog-card"
+import { ChangelogStats } from "./changelog-stats"
+import { ChangelogPagination } from "./changelog-pagination"
 import { ChangelogSearch } from "./changelog-search"
 import { ChangelogFilters } from "./changelog-filters"
 import { useChangelogReleases } from "../hooks/use-changelog"
-import { filterReleases, formatRelativeTime, type ChangelogFilters as Filters } from "../lib/changelog"
+import { filterReleases, type ChangelogFilters as Filters } from "../lib/changelog"
 import { cn } from "@/packages/core/lib/utils"
 
 interface ChangelogListProps {
@@ -22,7 +24,7 @@ const ITEMS_PER_PAGE = 4
 export function ChangelogList({ className }: ChangelogListProps) {
   const t = useTranslations()
   const { releases, repositories, isLoading, error, lastUpdated, refetch } = useChangelogReleases()
-  
+
   const [filters, setFilters] = useState<Filters>({
     search: "",
     repository: null,
@@ -31,45 +33,40 @@ export function ChangelogList({ className }: ChangelogListProps) {
   const [currentPage, setCurrentPage] = useState(1)
   const [linkedReleaseId, setLinkedReleaseId] = useState<string | null>(null)
 
-  // Filter releases
-  const filteredReleases = useMemo(() => {
-    return filterReleases(releases, filters)
-  }, [releases, filters])
+  const filteredReleases = filterReleases(releases, filters)
 
-  // Calculate pagination
   const totalPages = Math.ceil(filteredReleases.length / ITEMS_PER_PAGE)
-  const startIndex = (currentPage - 1) * ITEMS_PER_PAGE
+  const safePage = Math.min(currentPage, Math.max(1, totalPages))
+  const startIndex = (safePage - 1) * ITEMS_PER_PAGE
   const paginatedReleases = filteredReleases.slice(startIndex, startIndex + ITEMS_PER_PAGE)
 
-  // Reset to page 1 when filters change
+  // Handle URL hash for direct release linking
   useEffect(() => {
-    setCurrentPage(1)
-  }, [filters])
+    if (releases.length === 0) return
+    const hash = window.location.hash.slice(1)
+    if (!hash) return
+    const releaseIndex = filteredReleases.findIndex(
+      r => `${r.repository.name}-${r.tag_name}` === hash || r.tag_name === hash
+    )
+    if (releaseIndex === -1) return
+    const page = Math.floor(releaseIndex / ITEMS_PER_PAGE) + 1
+    queueMicrotask(() => {
+      setLinkedReleaseId(hash)
+      setCurrentPage(page)
+    })
+  }, [releases, filteredReleases])
 
-  // Handle URL hash for direct release linking
+  // Scroll to linked release when linkedReleaseId changes
   useEffect(() => {
-    if (typeof window !== 'undefined' && releases.length > 0) {
-      const hash = window.location.hash.slice(1) // Remove #
-      if (hash) {
-        // Find the release and calculate which page it's on
-        const releaseIndex = filteredReleases.findIndex(
-          r => `${r.repository.name}-${r.tag_name}` === hash || r.tag_name === hash
-        )
-        if (releaseIndex !== -1) {
-          const page = Math.floor(releaseIndex / ITEMS_PER_PAGE) + 1
-          setCurrentPage(page)
-          setLinkedReleaseId(hash) // Track which release is linked
-          // Scroll to element after a small delay
-          setTimeout(() => {
-            const element = document.getElementById(hash)
-            if (element) {
-              element.scrollIntoView({ behavior: 'smooth', block: 'center' })
-            }
-          }, 100)
-        }
+    if (!linkedReleaseId) return
+    const timer = setTimeout(() => {
+      const element = document.getElementById(linkedReleaseId)
+      if (element) {
+        element.scrollIntoView({ behavior: 'smooth', block: 'center' })
       }
-    }
-  }, [releases, filteredReleases])
+    }, 100)
+    return () => clearTimeout(timer)
+  }, [linkedReleaseId])
 
   const handleClearFilters = () => {
     setFilters({ search: "", repository: null, type: null })
@@ -152,44 +149,7 @@ export function ChangelogList({ className }: ChangelogListProps) {
 
   return (
     <div className={cn("space-y-6", className)}>
-      {/* Stats */}
-      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
-        <Card>
-          <CardContent className="p-4 flex items-center gap-3">
-            <div className="p-2 bg-primary/10 rounded-lg">
-              <Rocket className="h-5 w-5 text-primary" />
-            </div>
-            <div>
-              <p className="text-sm text-muted-foreground">{t("changelog.stats.totalReleases")}</p>
-              <p className="text-2xl font-bold">{releases.length}</p>
-            </div>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardContent className="p-4 flex items-center gap-3">
-            <div className="p-2 bg-primary/10 rounded-lg">
-              <GitBranch className="h-5 w-5 text-primary" />
-            </div>
-            <div>
-              <p className="text-sm text-muted-foreground">{t("changelog.stats.repositories")}</p>
-              <p className="text-2xl font-bold">{repositories.length}</p>
-            </div>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardContent className="p-4 flex items-center gap-3">
-            <div className="p-2 bg-primary/10 rounded-lg">
-              <Calendar className="h-5 w-5 text-primary" />
-            </div>
-            <div>
-              <p className="text-sm text-muted-foreground">{t("changelog.stats.latestUpdate")}</p>
-              <p className="text-2xl font-bold">
-                {lastUpdated ? formatRelativeTime(lastUpdated) : '-'}
-              </p>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
+      <ChangelogStats totalReleases={releases.length} repositories={repositories} lastUpdated={lastUpdated} />
 
       {/* Search & Filters */}
       <div className="flex flex-col sm:flex-row gap-4">
@@ -261,84 +221,15 @@ export function ChangelogList({ className }: ChangelogListProps) {
             })}
           </div>
 
-          {/* Pagination Controls */}
-          {totalPages > 1 && (
-            <div className="flex items-center justify-center gap-2 pt-6">
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => handlePageChange(currentPage - 1)}
-                disabled={currentPage === 1}
-              >
-                <ChevronLeft className="h-4 w-4 mr-1" />
-                {t("changelog.pagination.previous")}
-              </Button>
-              
-              <div className="flex items-center gap-1">
-                {/* First page */}
-                {currentPage > 2 && (
-                  <>
-                    <Button
-                      variant={currentPage === 1 ? "default" : "ghost"}
-                      size="sm"
-                      onClick={() => handlePageChange(1)}
-                      className="w-9 h-9 p-0"
-                    >
-                      1
-                    </Button>
-                    {currentPage > 3 && (
-                      <span className="px-2 text-muted-foreground">...</span>
-                    )}
-                  </>
-                )}
-
-                {/* Pages around current */}
-                {Array.from({ length: totalPages }, (_, i) => i + 1)
-                  .filter(page => {
-                    if (totalPages <= 5) return true
-                    return Math.abs(page - currentPage) <= 1
-                  })
-                  .map(page => (
-                    <Button
-                      key={page}
-                      variant={currentPage === page ? "default" : "ghost"}
-                      size="sm"
-                      onClick={() => handlePageChange(page)}
-                      className="w-9 h-9 p-0"
-                    >
-                      {page}
-                    </Button>
-                  ))}
-
-                {/* Last page */}
-                {currentPage < totalPages - 1 && (
-                  <>
-                    {currentPage < totalPages - 2 && (
-                      <span className="px-2 text-muted-foreground">...</span>
-                    )}
-                    <Button
-                      variant={currentPage === totalPages ? "default" : "ghost"}
-                      size="sm"
-                      onClick={() => handlePageChange(totalPages)}
-                      className="w-9 h-9 p-0"
-                    >
-                      {totalPages}
-                    </Button>
-                  </>
-                )}
-              </div>
-
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => handlePageChange(currentPage + 1)}
-                disabled={currentPage === totalPages}
-              >
-                {t("changelog.pagination.next")}
-                <ChevronRight className="h-4 w-4 ml-1" />
-              </Button>
-            </div>
-          )}
+          <ChangelogPagination
+            currentPage={currentPage}
+            totalPages={totalPages}
+            onPageChange={handlePageChange}
+            translations={{
+              previous: t("changelog.pagination.previous"),
+              next: t("changelog.pagination.next"),
+            }}
+          />
         </>
       )}
     </div>
diff --git a/packages/changelog/components/changelog-pagination.tsx b/packages/changelog/components/changelog-pagination.tsx
new file mode 100644
index 0000000..a16e0dd
--- /dev/null
+++ b/packages/changelog/components/changelog-pagination.tsx
@@ -0,0 +1,93 @@
+"use client"
+
+import { ChevronLeft, ChevronRight } from "lucide-react"
+import { Button } from "@/packages/ui/components/ui/button"
+
+interface ChangelogPaginationProps {
+  currentPage: number
+  totalPages: number
+  onPageChange: (page: number) => void
+  translations: {
+    previous: string
+    next: string
+  }
+}
+
+export function ChangelogPagination({ currentPage, totalPages, onPageChange, translations }: ChangelogPaginationProps) {
+  if (totalPages <= 1) return null
+
+  return (
+    <div className="flex items-center justify-center gap-2 pt-6">
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() => onPageChange(currentPage - 1)}
+        disabled={currentPage === 1}
+      >
+        <ChevronLeft className="h-4 w-4 mr-1" />
+        {translations.previous}
+      </Button>
+
+      <div className="flex items-center gap-1">
+        {currentPage > 2 && (
+          <>
+            <Button
+              variant={currentPage === 1 ? "default" : "ghost"}
+              size="sm"
+              onClick={() => onPageChange(1)}
+              className="w-9 h-9 p-0"
+            >
+              1
+            </Button>
+            {currentPage > 3 && (
+              <span className="px-2 text-muted-foreground">...</span>
+            )}
+          </>
+        )}
+
+        {Array.from({ length: totalPages }, (_, i) => i + 1)
+          .filter(page => {
+            if (totalPages <= 5) return true
+            return Math.abs(page - currentPage) <= 1
+          })
+          .map(page => (
+            <Button
+              key={page}
+              variant={currentPage === page ? "default" : "ghost"}
+              size="sm"
+              onClick={() => onPageChange(page)}
+              className="w-9 h-9 p-0"
+            >
+              {page}
+            </Button>
+          ))}
+
+        {currentPage < totalPages - 1 && (
+          <>
+            {currentPage < totalPages - 2 && (
+              <span className="px-2 text-muted-foreground">...</span>
+            )}
+            <Button
+              variant={currentPage === totalPages ? "default" : "ghost"}
+              size="sm"
+              onClick={() => onPageChange(totalPages)}
+              className="w-9 h-9 p-0"
+            >
+              {totalPages}
+            </Button>
+          </>
+        )}
+      </div>
+
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() => onPageChange(currentPage + 1)}
+        disabled={currentPage === totalPages}
+      >
+        {translations.next}
+        <ChevronRight className="h-4 w-4 ml-1" />
+      </Button>
+    </div>
+  )
+}
diff --git a/packages/changelog/components/changelog-search.tsx b/packages/changelog/components/changelog-search.tsx
index 1958097..480d8d9 100644
--- a/packages/changelog/components/changelog-search.tsx
+++ b/packages/changelog/components/changelog-search.tsx
@@ -29,6 +29,7 @@ export function ChangelogSearch({
       />
       {value && (
         <button
+          type="button"
           onClick={() => onChange("")}
           className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors"
           aria-label="Clear search"
diff --git a/packages/changelog/components/changelog-stats.tsx b/packages/changelog/components/changelog-stats.tsx
new file mode 100644
index 0000000..08ba306
--- /dev/null
+++ b/packages/changelog/components/changelog-stats.tsx
@@ -0,0 +1,52 @@
+"use client"
+
+import { Rocket, GitBranch, Calendar } from "lucide-react"
+import { useTranslations } from "next-intl"
+import { Card, CardContent } from "@/packages/ui/components/ui/card"
+import { formatRelativeTime } from "../lib/changelog"
+
+interface ChangelogStatsProps {
+  totalReleases: number
+  repositories: string[]
+  lastUpdated: string | null
+}
+
+export function ChangelogStats({ totalReleases, repositories, lastUpdated }: ChangelogStatsProps) {
+  const t = useTranslations()
+
+  const stats = [
+    {
+      icon: Rocket,
+      label: t("changelog.stats.totalReleases"),
+      value: totalReleases.toString(),
+    },
+    {
+      icon: GitBranch,
+      label: t("changelog.stats.repositories"),
+      value: repositories.length.toString(),
+    },
+    {
+      icon: Calendar,
+      label: t("changelog.stats.latestUpdate"),
+      value: lastUpdated ? formatRelativeTime(lastUpdated) : '-',
+    },
+  ]
+
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+      {stats.map((stat) => (
+        <Card key={stat.label}>
+          <CardContent className="p-4 flex items-center gap-3">
+            <div className="p-2 bg-primary/10 rounded-lg">
+              <stat.icon className="h-5 w-5 text-primary" />
+            </div>
+            <div>
+              <p className="text-sm text-muted-foreground">{stat.label}</p>
+              <p className="text-2xl font-bold">{stat.value}</p>
+            </div>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  )
+}
diff --git a/packages/changelog/hooks/use-changelog.ts b/packages/changelog/hooks/use-changelog.ts
index f3889b9..6dcc8d9 100644
--- a/packages/changelog/hooks/use-changelog.ts
+++ b/packages/changelog/hooks/use-changelog.ts
@@ -1,7 +1,7 @@
 "use client"
 
-import { useState, useEffect, useCallback } from 'react'
-import type { GitHubRelease, ReleasesResponse } from '@/app/api/github/releases/route'
+import { useState, useEffect } from 'react'
+import type { ReleasesResponse } from '@/app/api/github/releases/route'
 import { detectReleaseType, type ChangelogRelease } from '../lib/changelog'
 
 interface UseChangelogReleasesOptions {
@@ -15,40 +15,42 @@ export function useChangelogReleases(options: UseChangelogReleasesOptions = {})
   const [error, setError] = useState<string | null>(null)
   const [lastUpdated, setLastUpdated] = useState<string | null>(null)
 
-  const fetchReleases = useCallback(async () => {
+  async function doFetch() {
+    const response = await fetch('/api/github/releases')
+    if (!response.ok) throw new Error('Failed to fetch releases')
+    const data: ReleasesResponse = await response.json()
+    const releasesWithType: ChangelogRelease[] = data.releases.map(release => ({
+      ...release,
+      type: detectReleaseType(release)
+    }))
+    setReleases(releasesWithType)
+    setRepositories(data.repositories)
+    setLastUpdated(data.lastUpdated)
+  }
+
+  const refetch = () => {
     setIsLoading(true)
     setError(null)
+    return doFetch().then(() => setIsLoading(false))
+  }
 
-    try {
-      const response = await fetch('/api/github/releases')
-      
-      if (!response.ok) {
-        throw new Error('Failed to fetch releases')
+  useEffect(() => {
+    if (options.initialReleases) return
+    let cancelled = false
+
+    async function run() {
+      try {
+        await doFetch()
+      } catch {
+        if (!cancelled) setError('Failed to fetch releases')
       }
-
-      const data: ReleasesResponse = await response.json()
-      
-      // Add type detection to each release
-      const releasesWithType: ChangelogRelease[] = data.releases.map(release => ({
-        ...release,
-        type: detectReleaseType(release)
-      }))
-
-      setReleases(releasesWithType)
-      setRepositories(data.repositories)
-      setLastUpdated(data.lastUpdated)
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'An error occurred')
-    } finally {
-      setIsLoading(false)
+      if (!cancelled) setIsLoading(false)
     }
-  }, [])
 
-  useEffect(() => {
-    if (!options.initialReleases) {
-      fetchReleases()
-    }
-  }, [fetchReleases, options.initialReleases])
+    run()
+
+    return () => { cancelled = true }
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
 
   return {
     releases,
@@ -56,6 +58,6 @@ export function useChangelogReleases(options: UseChangelogReleasesOptions = {})
     isLoading,
     error,
     lastUpdated,
-    refetch: fetchReleases
+    refetch
   }
 }
diff --git a/packages/core/hooks/use-currency.tsx b/packages/core/hooks/use-currency.tsx
index 96ef395..5edfa98 100644
--- a/packages/core/hooks/use-currency.tsx
+++ b/packages/core/hooks/use-currency.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { useState, useEffect, useCallback, createContext, useContext, type ReactNode } from "react"
+import { useState, useEffect, createContext, useContext, useSyncExternalStore, type ReactNode } from "react"
 import {
   type CurrencyCode,
   currencies,
@@ -22,60 +22,55 @@ interface CurrencyContextValue {
 
 const CurrencyContext = createContext<CurrencyContextValue | null>(null)
 
-// Build a rates lookup from the static currency definitions as initial fallback
 function buildFallbackRates(): Record<CurrencyCode, number> {
   return Object.fromEntries(
     Object.entries(currencies).map(([code, c]) => [code, c.rate])
   ) as Record<CurrencyCode, number>
 }
 
-export function CurrencyProvider({ children }: { children: ReactNode }) {
-  const [currency, setCurrencyState] = useState<CurrencyCode>("GBP")
-  const [mounted, setMounted] = useState(false)
-  const [liveRates, setLiveRates] = useState<Record<CurrencyCode, number>>(buildFallbackRates)
-
-  // Initialize currency from localStorage or browser locale, and fetch live rates
-  useEffect(() => {
-    setMounted(true)
+function getInitialCurrency(): CurrencyCode {
+  if (typeof window === 'undefined') return "GBP"
+  try {
     const stored = localStorage.getItem(CURRENCY_STORAGE_KEY) as CurrencyCode | null
-    if (stored && currencies[stored]) {
-      setCurrencyState(stored)
-    } else {
-      setCurrencyState(getDefaultCurrency())
-    }
-
-    // Fetch live exchange rates — falls back to cached or static if unavailable
-    const RATES_CACHE_KEY = "nb_currency_rates"
-    const RATES_CACHE_TTL = 3600_000 // 1 hour in ms
+    if (stored && currencies[stored]) return stored
+  } catch {}
+  return getDefaultCurrency()
+}
 
-    try {
-      const cached = localStorage.getItem(RATES_CACHE_KEY)
-      if (cached) {
-        const { rates, ts } = JSON.parse(cached) as { rates: Record<string, number>; ts: number }
-        if (Date.now() - ts < RATES_CACHE_TTL) {
-          setLiveRates((prev) => {
-            const updated = { ...prev }
-            for (const [code, rate] of Object.entries(rates)) {
-              if (code in updated) updated[code as CurrencyCode] = rate
-            }
-            return updated
-          })
-          return // skip network fetch — cache is fresh
+const RATES_CACHE_KEY = "nb_currency_rates"
+const RATES_CACHE_TTL = 3600_000
+
+function buildLiveRatesFromCache(): Record<CurrencyCode, number> {
+  try {
+    const cached = localStorage.getItem(RATES_CACHE_KEY)
+    if (cached) {
+      const { rates, ts } = JSON.parse(cached) as { rates: Record<string, number>; ts: number }
+      if (Date.now() - ts < RATES_CACHE_TTL) {
+        const merged = buildFallbackRates()
+        for (const [code, rate] of Object.entries(rates)) {
+          if (code in merged) merged[code as CurrencyCode] = rate
         }
+        return merged
       }
-    } catch {
-      // corrupted cache entry — ignore and fall through to fetch
     }
+  } catch {}
+  return buildFallbackRates()
+}
+
+export function CurrencyProvider({ children }: { children: ReactNode }) {
+  const [currency, setCurrencyState] = useState<CurrencyCode>(getInitialCurrency)
+  const mounted = useSyncExternalStore(() => () => {}, () => true, () => false)
+  const [liveRates, setLiveRates] = useState<Record<CurrencyCode, number>>(buildLiveRatesFromCache)
 
+  // Fetch live exchange rates
+  useEffect(() => {
     fetch("/api/currency/rates")
       .then((r) => r.json())
       .then((data: { rates?: Record<string, number> }) => {
         if (data.rates) {
           try {
             localStorage.setItem(RATES_CACHE_KEY, JSON.stringify({ rates: data.rates, ts: Date.now() }))
-          } catch {
-            // localStorage quota exceeded — ignore
-          }
+          } catch {}
           setLiveRates((prev) => {
             const updated = { ...prev }
             for (const [code, rate] of Object.entries(data.rates!)) {
@@ -85,32 +80,21 @@ export function CurrencyProvider({ children }: { children: ReactNode }) {
           })
         }
       })
-      .catch(() => {
-        // Silently fall back to static rates already in state
-      })
+      .catch(() => {})
   }, [])
 
-  const setCurrency = useCallback((newCurrency: CurrencyCode) => {
+  const setCurrency = (newCurrency: CurrencyCode) => {
     setCurrencyState(newCurrency)
-    localStorage.setItem(CURRENCY_STORAGE_KEY, newCurrency)
-  }, [])
+    try { localStorage.setItem(CURRENCY_STORAGE_KEY, newCurrency) } catch {}
+  }
 
-  const convert = useCallback(
-    (amountGBP: number) => Math.round(amountGBP * liveRates[currency] * 100) / 100,
-    [currency, liveRates]
-  )
+  const convert = (amountGBP: number) => Math.round(amountGBP * liveRates[currency] * 100) / 100
 
-  const format = useCallback(
-    (amount: number) => formatPrice(amount, currency),
-    [currency]
-  )
+  const format = (amount: number) => formatPrice(amount, currency)
 
-  const convertAndFormatFn = useCallback(
-    (amountGBP: number) => formatPrice(Math.round(amountGBP * liveRates[currency] * 100) / 100, currency),
-    [currency, liveRates]
-  )
+  const convertAndFormatFn = (amountGBP: number) =>
+    formatPrice(Math.round(amountGBP * liveRates[currency] * 100) / 100, currency)
 
-  // Prevent hydration mismatch by returning GBP during SSR
   const value: CurrencyContextValue = {
     currency: mounted ? currency : "GBP",
     setCurrency,
diff --git a/packages/core/hooks/use-locale.tsx b/packages/core/hooks/use-locale.tsx
index 76c5a54..c2d73f3 100644
--- a/packages/core/hooks/use-locale.tsx
+++ b/packages/core/hooks/use-locale.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { useState, useEffect, useCallback, createContext, useContext, type ReactNode } from "react"
+import { useState, createContext, useContext, type ReactNode } from "react"
 import { locales, localeNames, localeFlags, defaultLocale, LOCALE_COOKIE, type Locale } from "@/packages/i18n/config"
 
 interface LocaleContextValue {
@@ -13,28 +13,26 @@ interface LocaleContextValue {
 
 const LocaleContext = createContext<LocaleContextValue | null>(null)
 
-export function LocaleProvider({ children, initialLocale }: { children: ReactNode; initialLocale?: Locale }) {
-  const [locale, setLocaleState] = useState<Locale>(initialLocale || defaultLocale)
-
-  useEffect(() => {
-    // Read from cookie on mount
+function getInitialLocale(initialLocale?: Locale): Locale {
+  if (typeof window === 'undefined') return initialLocale || defaultLocale
+  try {
     const cookieLocale = document.cookie
       .split('; ')
       .find(row => row.startsWith(`${LOCALE_COOKIE}=`))
       ?.split('=')[1] as Locale | undefined
+    if (cookieLocale && locales.includes(cookieLocale)) return cookieLocale
+  } catch {}
+  return initialLocale || defaultLocale
+}
 
-    if (cookieLocale && locales.includes(cookieLocale)) {
-      setLocaleState(cookieLocale)
-    }
-  }, [])
+export function LocaleProvider({ children, initialLocale }: { children: ReactNode; initialLocale?: Locale }) {
+  const [locale, setLocaleState] = useState<Locale>(() => getInitialLocale(initialLocale))
 
-  const setLocale = useCallback((newLocale: Locale) => {
-    // Set cookie with 1 year expiry
+  const setLocale = (newLocale: Locale) => {
     document.cookie = `${LOCALE_COOKIE}=${newLocale}; path=/; max-age=${60 * 60 * 24 * 365}; SameSite=Lax`
     setLocaleState(newLocale)
-    // Hard reload to clear server-side translation cache and load new translations
     window.location.reload()
-  }, [])
+  }
 
   const value: LocaleContextValue = {
     locale,
@@ -59,5 +57,3 @@ export function useLocale() {
   return context
 }
 
-// Re-export types and constants for convenience
-export { locales, localeNames, localeFlags, defaultLocale, type Locale }
diff --git a/packages/core/hooks/use-mobile.ts b/packages/core/hooks/use-mobile.ts
index 4331d5c..bc1d528 100644
--- a/packages/core/hooks/use-mobile.ts
+++ b/packages/core/hooks/use-mobile.ts
@@ -3,17 +3,15 @@ import * as React from 'react'
 const MOBILE_BREAKPOINT = 768
 
 export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
-
-  React.useEffect(() => {
+  const subscribe = (callback: () => void) => {
     const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
-    const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    }
-    mql.addEventListener('change', onChange)
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    return () => mql.removeEventListener('change', onChange)
-  }, [])
+    mql.addEventListener('change', callback)
+    return () => mql.removeEventListener('change', callback)
+  }
+
+  const getSnapshot = () => window.innerWidth < MOBILE_BREAKPOINT
+
+  const getServerSnapshot = () => false
 
-  return !!isMobile
+  return React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
 }
diff --git a/packages/core/products/server.ts b/packages/core/products/server.ts
index 2824a8f..54f6764 100644
--- a/packages/core/products/server.ts
+++ b/packages/core/products/server.ts
@@ -7,36 +7,29 @@ import { getOverride } from "./override-store"
  * Plans with enabled=false are filtered out entirely (category shows OOS when all removed).
  * Plans with stock overridden show their OOS badge on the pricing card.
  */
+function applyOverrides<T extends { id: string }>(
+  category: string,
+  plans: T[],
+): T[] {
+  const result: T[] = []
+  for (const plan of plans) {
+    const ov = getOverride(`${category}-${plan.id}`)
+    if (ov && !ov.enabled) continue
+    result.push(ov ? { ...plan, stock: ov.stock } as T : plan)
+  }
+  return result
+}
+
 export function applyGamePlanOverrides(
   category: string,
   plans: GamePlanSpec[],
 ): GamePlanSpec[] {
-  return plans
-    .filter((plan) => {
-      const ov = getOverride(`${category}-${plan.id}`)
-      return ov ? ov.enabled : true
-    })
-    .map((plan) => {
-      const ov = getOverride(`${category}-${plan.id}`)
-      return ov ? { ...plan, stock: ov.stock } : plan
-    })
+  return applyOverrides(category, plans)
 }
 
-/**
- * Returns VPS plans with admin overrides applied.
- * Plans with enabled=false are filtered out entirely.
- */
 export function applyVpsPlanOverrides(
   category: string,
   plans: VpsPlanSpec[],
 ): VpsPlanSpec[] {
-  return plans
-    .filter((plan) => {
-      const ov = getOverride(`${category}-${plan.id}`)
-      return ov ? ov.enabled : true
-    })
-    .map((plan) => {
-      const ov = getOverride(`${category}-${plan.id}`)
-      return ov ? { ...plan, stock: ov.stock } : plan
-    })
+  return applyOverrides(category, plans)
 }
diff --git a/packages/kb/components/kb-article-card.tsx b/packages/kb/components/kb-article-card.tsx
index f7850f9..500779f 100644
--- a/packages/kb/components/kb-article-card.tsx
+++ b/packages/kb/components/kb-article-card.tsx
@@ -115,7 +115,7 @@ export function KBArticleList({
   showCategory = false,
   className,
 }: KBArticleListProps) {
-  const sortedArticles = [...articles].sort((a, b) => a.order - b.order);
+  const sortedArticles = articles.toSorted((a, b) => a.order - b.order);
 
   return (
     <div className={cn("flex flex-col gap-3", className)}>
diff --git a/packages/kb/components/kb-article.tsx b/packages/kb/components/kb-article.tsx
index ce278a1..4a6a506 100644
--- a/packages/kb/components/kb-article.tsx
+++ b/packages/kb/components/kb-article.tsx
@@ -101,7 +101,8 @@ export function KBArticle({
           prose-h3:text-xl prose-h3:font-semibold prose-h3:tracking-tight prose-h3:mt-8 prose-h3:mb-3
           prose-h4:text-lg prose-h4:font-semibold prose-h4:mt-6 prose-h4:mb-2
           prose-p:leading-7 prose-p:text-foreground/90
-          prose-a:text-primary prose-a:no-underline hover:prose-a:underline
+          prose-a:text-primary prose-a:no-underline prose-a:font-medium prose-a:decoration-primary/40 prose-a:underline-offset-4 prose-a:transition-colors
+          prose-a:hover:text-primary/85 prose-a:hover:underline
           prose-strong:text-foreground prose-strong:font-semibold
           prose-code:text-primary prose-code:bg-muted prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:font-mono prose-code:text-sm prose-code:before:content-none prose-code:after:content-none
           prose-pre:bg-muted prose-pre:border prose-pre:rounded-lg
@@ -143,14 +144,14 @@ export function KBArticle({
             {previousArticle ? (
               <Link
                 href={`/kb/${previousArticle.category}/${previousArticle.slug}`}
-                className="flex-1 group"
+                className="flex-1 group rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
               >
-                <div className="flex flex-col p-4 border rounded-lg hover:bg-accent transition-colors h-full">
-                  <span className="flex items-center gap-1 text-sm text-muted-foreground mb-1">
+                <div className="flex h-full flex-col rounded-lg border bg-card/60 p-4 transition-colors group-hover:border-primary/35 group-hover:bg-primary/5">
+                  <span className="mb-1 flex items-center gap-1 text-sm font-medium text-muted-foreground transition-colors group-hover:text-foreground">
                     <ChevronLeft className="h-4 w-4" />
                     {translations.previous}
                   </span>
-                  <span className="font-medium group-hover:text-primary transition-colors">
+                  <span className="font-semibold leading-snug text-foreground transition-colors group-hover:text-primary">
                     {previousArticle.title}
                   </span>
                 </div>
@@ -162,14 +163,14 @@ export function KBArticle({
             {nextArticle ? (
               <Link
                 href={`/kb/${nextArticle.category}/${nextArticle.slug}`}
-                className="flex-1 group"
+                className="flex-1 group rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
               >
-                <div className="flex flex-col items-end p-4 border rounded-lg hover:bg-accent transition-colors h-full text-right">
-                  <span className="flex items-center gap-1 text-sm text-muted-foreground mb-1">
+                <div className="flex h-full flex-col items-end rounded-lg border bg-card/60 p-4 text-right transition-colors group-hover:border-primary/35 group-hover:bg-primary/5">
+                  <span className="mb-1 flex items-center gap-1 text-sm font-medium text-muted-foreground transition-colors group-hover:text-foreground">
                     {translations.next}
                     <ChevronRight className="h-4 w-4" />
                   </span>
-                  <span className="font-medium group-hover:text-primary transition-colors">
+                  <span className="font-semibold leading-snug text-foreground transition-colors group-hover:text-primary">
                     {nextArticle.title}
                   </span>
                 </div>
diff --git a/packages/kb/components/kb-breadcrumb.tsx b/packages/kb/components/kb-breadcrumb.tsx
index 3ca847e..e8b8427 100644
--- a/packages/kb/components/kb-breadcrumb.tsx
+++ b/packages/kb/components/kb-breadcrumb.tsx
@@ -24,7 +24,7 @@ export function KBBreadcrumb({ items, className }: KBBreadcrumbProps) {
       </Link>
 
       {items.map((item, index) => (
-        <div key={index} className="flex items-center gap-1">
+        <div key={item.label} className="flex items-center gap-1">
           <ChevronRight className="h-4 w-4 text-muted-foreground" />
           {item.href ? (
             <Link
diff --git a/packages/kb/components/kb-category-card.tsx b/packages/kb/components/kb-category-card.tsx
index 84cf089..ce0eedb 100644
--- a/packages/kb/components/kb-category-card.tsx
+++ b/packages/kb/components/kb-category-card.tsx
@@ -89,7 +89,7 @@ interface KBCategoryGridProps {
 }
 
 export function KBCategoryGrid({ categories, className }: KBCategoryGridProps) {
-  const sortedCategories = [...categories].sort((a, b) => a.order - b.order);
+  const sortedCategories = categories.toSorted((a, b) => a.order - b.order);
 
   return (
     <div
diff --git a/packages/kb/components/kb-search.tsx b/packages/kb/components/kb-search.tsx
index 82263c8..f7a805a 100644
--- a/packages/kb/components/kb-search.tsx
+++ b/packages/kb/components/kb-search.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useMemo } from "react";
+import { useState } from "react";
 import { Search, X, FileText, Folder, Tag, Clock } from "lucide-react";
 import Link from "next/link";
 import { useTranslations } from "next-intl";
@@ -33,64 +33,40 @@ interface KBSearchProps {
   variant?: "inline" | "dialog";
 }
 
-export function KBSearch({ articles, className, variant = "inline" }: KBSearchProps) {
-  const t = useTranslations();
-  const [query, setQuery] = useState("");
-  const [isOpen, setIsOpen] = useState(false);
-
-  const results = useMemo(() => {
-    if (!query.trim()) return [];
-
-    const searchTerms = query.toLowerCase().split(/\s+/).filter(Boolean);
-
-    return articles
-      .map((article) => {
-        let score = 0;
-        const titleLower = article.title.toLowerCase();
-        const descLower = article.description.toLowerCase();
-        const excerptLower = article.excerpt?.toLowerCase() || "";
-        const tagsLower = article.tags?.map((t) => t.toLowerCase()) || [];
-
-        for (const term of searchTerms) {
-          // Title matches (highest weight)
-          if (titleLower.includes(term)) score += 10;
-          if (titleLower.startsWith(term)) score += 5;
-
-          // Description matches
-          if (descLower.includes(term)) score += 5;
-
-          // Tag matches
-          if (tagsLower.some((tag) => tag.includes(term))) score += 7;
-
-          // Content matches
-          if (excerptLower.includes(term)) score += 3;
-        }
-
-        return { ...article, score };
-      })
-      .filter((article) => article.score > 0)
-      .sort((a, b) => b.score - a.score)
-      .slice(0, 8);
-  }, [query, articles]);
-
-  const handleSelect = () => {
-    setQuery("");
-    setIsOpen(false);
+function SearchContent({
+  query,
+  onQueryChange,
+  results,
+  onSelect,
+  className,
+  translations,
+}: {
+  query: string;
+  onQueryChange: (value: string) => void;
+  results: SearchResult[];
+  onSelect: () => void;
+  className?: string;
+  translations: {
+    searchPlaceholder: string;
+    noResultsForQuery: string;
+    noResultsDescription: string;
+    minRead: string;
   };
-
-  const SearchContent = () => (
+}) {
+  return (
     <div className={cn("relative", className)}>
       <div className="relative">
         <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
         <Input
-          placeholder={t("kb.searchPlaceholder")}
+          placeholder={translations.searchPlaceholder}
           value={query}
-          onChange={(e) => setQuery(e.target.value)}
+          onChange={(e) => onQueryChange(e.target.value)}
           className="pl-9 pr-9"
         />
         {query && (
           <button
-            onClick={() => setQuery("")}
+            type="button"
+            onClick={() => onQueryChange("")}
             className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
           >
             <X className="h-4 w-4" />
@@ -104,7 +80,7 @@ export function KBSearch({ articles, className, variant = "inline" }: KBSearchPr
             <Link
               key={`${result.category}/${result.slug}`}
               href={`/kb/${result.category}/${result.slug}`}
-              onClick={handleSelect}
+              onClick={onSelect}
               className="block p-3 hover:bg-accent transition-colors border-b last:border-b-0"
             >
               <div className="flex items-start gap-3">
@@ -133,7 +109,7 @@ export function KBSearch({ articles, className, variant = "inline" }: KBSearchPr
                 </div>
                 <div className="flex items-center gap-1 text-xs text-muted-foreground shrink-0">
                   <Clock className="h-3 w-3" />
-                  {result.readingTime} {t("kb.minRead")}
+                  {result.readingTime} {translations.minRead}
                 </div>
               </div>
             </Link>
@@ -144,14 +120,59 @@ export function KBSearch({ articles, className, variant = "inline" }: KBSearchPr
       {query && results.length === 0 && (
         <div className="absolute top-full left-0 right-0 mt-2 bg-popover border rounded-lg shadow-lg z-50 p-6 text-center">
           <Search className="h-10 w-10 text-muted-foreground mx-auto mb-2" />
-          <p className="text-muted-foreground">{t("kb.noResults.forQuery")} &ldquo;{query}&rdquo;</p>
+          <p className="text-muted-foreground">{translations.noResultsForQuery} &ldquo;{query}&rdquo;</p>
           <p className="text-sm text-muted-foreground mt-1">
-            {t("kb.noResults.description")}
+            {translations.noResultsDescription}
           </p>
         </div>
       )}
     </div>
   );
+}
+
+export function KBSearch({ articles, className, variant = "inline" }: KBSearchProps) {
+  const t = useTranslations();
+  const [query, setQuery] = useState("");
+  const [isOpen, setIsOpen] = useState(false);
+
+  const results = (() => {
+    if (!query.trim()) return [];
+
+    const searchTerms = query.toLowerCase().split(/\s+/).filter(Boolean);
+
+    return articles
+      .flatMap((article) => {
+        let score = 0;
+        const titleLower = article.title.toLowerCase();
+        const descLower = article.description.toLowerCase();
+        const excerptLower = article.excerpt?.toLowerCase() || "";
+        const tagsLower = article.tags?.map((t) => t.toLowerCase()) || [];
+
+        for (const term of searchTerms) {
+          if (titleLower.includes(term)) score += 10;
+          if (titleLower.startsWith(term)) score += 5;
+          if (descLower.includes(term)) score += 5;
+          if (tagsLower.some((tag) => tag.includes(term))) score += 7;
+          if (excerptLower.includes(term)) score += 3;
+        }
+
+        return score > 0 ? [{ ...article, score }] : [];
+      })
+      .sort((a, b) => b.score - a.score)
+      .slice(0, 8);
+  })();
+
+  const handleSelect = () => {
+    setQuery("");
+    setIsOpen(false);
+  };
+
+  const searchTranslations = {
+    searchPlaceholder: t("kb.searchPlaceholder"),
+    noResultsForQuery: t("kb.noResults.forQuery"),
+    noResultsDescription: t("kb.noResults.description"),
+    minRead: t("kb.minRead"),
+  };
 
   if (variant === "dialog") {
     return (
@@ -170,14 +191,29 @@ export function KBSearch({ articles, className, variant = "inline" }: KBSearchPr
             <DialogTitle>{t("kb.search.dialogTitle")}</DialogTitle>
           </DialogHeader>
           <div className="p-4">
-            <SearchContent />
+            <SearchContent
+              query={query}
+              onQueryChange={setQuery}
+              results={results}
+              onSelect={handleSelect}
+              translations={searchTranslations}
+            />
           </div>
         </DialogContent>
       </Dialog>
     );
   }
 
-  return <SearchContent />;
+  return (
+    <SearchContent
+      query={query}
+      onQueryChange={setQuery}
+      results={results}
+      onSelect={handleSelect}
+      className={className}
+      translations={searchTranslations}
+    />
+  );
 }
 
 export default KBSearch;
diff --git a/packages/kb/components/kb-sidebar.tsx b/packages/kb/components/kb-sidebar.tsx
index 479ee62..822927e 100644
--- a/packages/kb/components/kb-sidebar.tsx
+++ b/packages/kb/components/kb-sidebar.tsx
@@ -71,16 +71,16 @@ export function KBSidebar({ categories, className }: KBSidebarProps) {
     );
   };
 
-  const sortedCategories = [...categories].sort((a, b) => a.order - b.order);
+  const sortedCategories = categories.toSorted((a, b) => a.order - b.order);
 
   return (
     <ScrollArea className={cn("h-[calc(100vh-8rem)]", className)}>
-      <nav className="space-y-1 pr-4">
+      <nav className="space-y-2 pr-3">
         {sortedCategories.map((category) => {
           const Icon = iconMap[category.icon] || HelpCircle;
           const isOpen = openCategories.includes(category.slug);
           const isCategoryActive = pathname.includes(`/kb/${category.slug}`);
-          const sortedArticles = [...category.articles].sort(
+          const sortedArticles = category.articles.toSorted(
             (a, b) => a.order - b.order
           );
 
@@ -92,23 +92,23 @@ export function KBSidebar({ categories, className }: KBSidebarProps) {
             >
               <CollapsibleTrigger
                 className={cn(
-                  "flex items-center justify-between w-full px-3 py-2 text-sm font-medium rounded-lg hover:bg-accent transition-colors",
-                  isCategoryActive && "bg-accent text-accent-foreground"
+                  "flex w-full items-center justify-between rounded-lg px-3 py-2 text-sm font-semibold text-foreground transition-colors hover:bg-muted hover:text-foreground",
+                  isCategoryActive && "bg-primary/10 text-primary hover:bg-primary/15 hover:text-primary"
                 )}
               >
-                <span className="flex items-center gap-2">
-                  <Icon className="h-4 w-4" />
+                <span className="flex min-w-0 items-center gap-2">
+                  <Icon className="h-4 w-4 shrink-0" />
                   {category.title}
                 </span>
                 <ChevronDown
                   className={cn(
-                    "h-4 w-4 text-muted-foreground transition-transform",
+                    "h-4 w-4 shrink-0 text-muted-foreground transition-transform",
                     isOpen && "rotate-180"
                   )}
                 />
               </CollapsibleTrigger>
-              <CollapsibleContent className="pt-1">
-                <ul className="space-y-1 ml-4 border-l pl-2">
+              <CollapsibleContent className="pt-1.5">
+                <ul className="ml-4 space-y-1 border-l border-border/70 pl-2">
                   {sortedArticles.map((article) => {
                     const articlePath = `/kb/${category.slug}/${article.slug}`;
                     const isActive = pathname === articlePath;
@@ -118,14 +118,14 @@ export function KBSidebar({ categories, className }: KBSidebarProps) {
                         <Link
                           href={articlePath}
                           className={cn(
-                            "flex items-center gap-2 px-3 py-1.5 text-sm rounded-lg hover:bg-accent transition-colors",
+                            "flex min-h-9 items-center gap-2 rounded-md px-3 py-2 text-sm leading-snug transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
                             isActive
-                              ? "bg-primary/10 text-primary font-medium"
+                              ? "bg-primary/10 font-semibold text-primary hover:bg-primary/15 hover:text-primary"
                               : "text-muted-foreground"
                           )}
                         >
-                          <FileText className="h-3.5 w-3.5" />
-                          <span className="truncate">{article.title}</span>
+                          <FileText className="h-3.5 w-3.5 shrink-0" />
+                          <span className="line-clamp-2">{article.title}</span>
                         </Link>
                       </li>
                     );
diff --git a/packages/kb/lib/kb.ts b/packages/kb/lib/kb.ts
index 00a23e5..f667b27 100644
--- a/packages/kb/lib/kb.ts
+++ b/packages/kb/lib/kb.ts
@@ -239,14 +239,10 @@ export async function getArticle(categorySlug: string, articleSlug: string): Pro
  */
 export async function getAllArticles(): Promise<KBArticleMeta[]> {
   const categories = await getCategories()
-  const allArticles: KBArticleMeta[] = []
-  
-  for (const cat of categories) {
-    const articles = await getArticlesByCategory(cat.slug)
-    allArticles.push(...articles)
-  }
-  
-  return allArticles
+  const articleArrays = await Promise.all(
+    categories.map((cat) => getArticlesByCategory(cat.slug))
+  )
+  return articleArrays.flat()
 }
 
 /**
diff --git a/packages/ui/components/Layouts/About/about-page.tsx b/packages/ui/components/Layouts/About/about-page.tsx
index 1be8ae8..a85f78b 100644
--- a/packages/ui/components/Layouts/About/about-page.tsx
+++ b/packages/ui/components/Layouts/About/about-page.tsx
@@ -200,7 +200,7 @@ export function AboutPage() {
           <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6 max-w-5xl mx-auto">
             {values.map((value, index) => (
               <Card
-                key={index}
+                key={value.title}
                 className={cn(
                   "group relative overflow-hidden border-border/50 bg-card/30 backdrop-blur-sm",
                   "hover:border-primary/30 transition-all duration-300"
diff --git a/packages/ui/components/Layouts/Contact/contact.tsx b/packages/ui/components/Layouts/Contact/contact.tsx
index 188640b..80bd0de 100644
--- a/packages/ui/components/Layouts/Contact/contact.tsx
+++ b/packages/ui/components/Layouts/Contact/contact.tsx
@@ -193,7 +193,7 @@ export function Contact() {
                 
                 <ul className="space-y-2 mb-6 flex-1">
                   {channel.features.map((feature, i) => (
-                    <li key={i} className="flex items-center gap-2 text-sm text-muted-foreground">
+                    <li key={feature} className="flex items-center gap-2 text-sm text-muted-foreground">
                       <CheckCircle2 className="w-4 h-4 text-primary shrink-0" />
                       {feature}
                     </li>
diff --git a/packages/ui/components/Layouts/Games/game-faq.tsx b/packages/ui/components/Layouts/Games/game-faq.tsx
index c879b2e..6692ba6 100644
--- a/packages/ui/components/Layouts/Games/game-faq.tsx
+++ b/packages/ui/components/Layouts/Games/game-faq.tsx
@@ -55,7 +55,7 @@ export function GameFAQ({ gameName, faqs }: GameFAQProps) {
           <Accordion type="single" collapsible className="space-y-4">
             {faqs.map((faq, index) => (
               <AccordionItem
-                key={index}
+                key={faq.question}
                 value={`item-${index}`}
                 className={cn(
                   "border border-border/50 rounded-xl overflow-hidden",
diff --git a/packages/ui/components/Layouts/Games/game-features.tsx b/packages/ui/components/Layouts/Games/game-features.tsx
index 195adf0..9403f36 100644
--- a/packages/ui/components/Layouts/Games/game-features.tsx
+++ b/packages/ui/components/Layouts/Games/game-features.tsx
@@ -95,7 +95,7 @@ export function GameFeatures({ gameName, features }: GameFeaturesProps) {
                 {/* Highlights */}
                 <ul className="space-y-2">
                   {feature.highlights.map((highlight, i) => (
-                    <li key={i} className="flex items-center gap-2 text-sm text-muted-foreground">
+                    <li key={highlight} className="flex items-center gap-2 text-sm text-muted-foreground">
                       <CheckCircle2 className="w-4 h-4 text-primary shrink-0" />
                       {highlight}
                     </li>
diff --git a/packages/ui/components/Layouts/Games/game-hero.tsx b/packages/ui/components/Layouts/Games/game-hero.tsx
index 1f0bb30..d4cd368 100644
--- a/packages/ui/components/Layouts/Games/game-hero.tsx
+++ b/packages/ui/components/Layouts/Games/game-hero.tsx
@@ -54,6 +54,7 @@ export function GameHero({
           src={banner}
           alt={name}
           fill
+          sizes="100vw"
           className="object-cover opacity-10 blur-sm"
           priority
         />
@@ -135,6 +136,7 @@ export function GameHero({
                 src={banner}
                 alt={name}
                 fill
+                sizes="(max-width: 768px) 100vw, 50vw"
                 className="object-cover"
                 priority
               />
diff --git a/packages/ui/components/Layouts/Games/game-pricing.tsx b/packages/ui/components/Layouts/Games/game-pricing.tsx
index ac36f0d..0fb8250 100644
--- a/packages/ui/components/Layouts/Games/game-pricing.tsx
+++ b/packages/ui/components/Layouts/Games/game-pricing.tsx
@@ -13,6 +13,21 @@ import { useTranslations } from "next-intl"
 import { LINKS } from "@/packages/core/constants/links"
 import type { ReactNode } from "react"
 
+const DEFAULT_HEADER_ICON = <Zap className="w-8 h-8" />
+
+function getFeatureIcon(feature: string) {
+  const f = feature.toLowerCase()
+  if (f.includes("ram") || f.includes("ddr") || f.includes("memory")) return <MemoryStick className="w-4 h-4 text-primary shrink-0" />
+  if (f.includes("storage") || f.includes("ssd") || f.includes("nvme") || f.includes("disk")) return <HardDrive className="w-4 h-4 text-primary shrink-0" />
+  if (f.includes("ryzen") || f.includes("intel") || f.includes("cpu") || f.includes("processor")) return <Cpu className="w-4 h-4 text-primary shrink-0" />
+  if (f.includes("ddos") || f.includes("protection") || f.includes("firewall")) return <Shield className="w-4 h-4 text-primary shrink-0" />
+  if (f.includes("database") || f.includes("mysql") || f.includes("mariadb")) return <Database className="w-4 h-4 text-primary shrink-0" />
+  if (f.includes("panel") || f.includes("control") || f.includes("dashboard")) return <Monitor className="w-4 h-4 text-primary shrink-0" />
+  if (f.includes("jar") || f.includes("plugin") || f.includes("mod") || f.includes("oxide") || f.includes("umod")) return <Package className="w-4 h-4 text-primary shrink-0" />
+  if (f.includes("uptime") || f.includes("sla")) return <Activity className="w-4 h-4 text-primary shrink-0" />
+  return <Check className="w-4 h-4 text-primary shrink-0" />
+}
+
 interface PricingPlan {
   name: string
   description: string
@@ -49,26 +64,13 @@ export function GamePricing({
   plans,
   comingSoon,
   outOfStock,
-  headerIcon = <Zap className="w-8 h-8" />,
+  headerIcon = DEFAULT_HEADER_ICON,
   headerGradient = "from-primary/20 via-primary/10 to-accent/5",
   headerIconBg = "bg-primary/10 text-primary",
 }: GamePricingProps) {
   const isOutOfStock = outOfStock || plans.length === 0
   const t = useTranslations()
 
-  function getFeatureIcon(feature: string) {
-    const f = feature.toLowerCase()
-    if (f.includes("ram") || f.includes("ddr") || f.includes("memory")) return <MemoryStick className="w-4 h-4 text-primary shrink-0" />
-    if (f.includes("storage") || f.includes("ssd") || f.includes("nvme") || f.includes("disk")) return <HardDrive className="w-4 h-4 text-primary shrink-0" />
-    if (f.includes("ryzen") || f.includes("intel") || f.includes("cpu") || f.includes("processor")) return <Cpu className="w-4 h-4 text-primary shrink-0" />
-    if (f.includes("ddos") || f.includes("protection") || f.includes("firewall")) return <Shield className="w-4 h-4 text-primary shrink-0" />
-    if (f.includes("database") || f.includes("mysql") || f.includes("mariadb")) return <Database className="w-4 h-4 text-primary shrink-0" />
-    if (f.includes("panel") || f.includes("control") || f.includes("dashboard")) return <Monitor className="w-4 h-4 text-primary shrink-0" />
-    if (f.includes("jar") || f.includes("plugin") || f.includes("mod") || f.includes("oxide") || f.includes("umod")) return <Package className="w-4 h-4 text-primary shrink-0" />
-    if (f.includes("uptime") || f.includes("sla")) return <Activity className="w-4 h-4 text-primary shrink-0" />
-    return <Check className="w-4 h-4 text-primary shrink-0" />
-  }
-
   const [search, setSearch] = useState("")
   const [sortOrder, setSortOrder] = useState<"default" | "asc" | "desc">("default")
 
@@ -267,7 +269,7 @@ export function GamePricing({
                       {/* Features */}
                       <ul className="space-y-2 mb-5 flex-1">
                         {plan.features.map((feature, i) => (
-                          <li key={i} className="flex items-center gap-2 text-sm text-muted-foreground">
+                          <li key={feature} className="flex items-center gap-2 text-sm text-muted-foreground">
                             {getFeatureIcon(feature)}
                             <span>{feature}</span>
                           </li>
diff --git a/packages/ui/components/Layouts/Home/about.tsx b/packages/ui/components/Layouts/Home/about.tsx
index 5c59deb..ef0f24a 100644
--- a/packages/ui/components/Layouts/Home/about.tsx
+++ b/packages/ui/components/Layouts/Home/about.tsx
@@ -95,7 +95,7 @@ export function About() {
         <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
           {values.map((value, index) => (
             <Card
-              key={index}
+              key={value.title}
               className={cn(
                 "group relative overflow-hidden border-border/50 bg-card/30 backdrop-blur-sm",
                 "hover:border-primary/30 transition-all duration-300"
diff --git a/packages/ui/components/Layouts/Home/faq.tsx b/packages/ui/components/Layouts/Home/faq.tsx
index 1467654..12314f9 100644
--- a/packages/ui/components/Layouts/Home/faq.tsx
+++ b/packages/ui/components/Layouts/Home/faq.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { useState, useMemo } from "react"
+import { useState } from "react"
 import { ChevronDown, Search, HelpCircle, MessageCircle } from "lucide-react"
 import { Button } from "@/packages/ui/components/ui/button"
 import Link from "next/link"
@@ -44,11 +44,11 @@ export function FAQ() {
     },
   ]
 
-  const filtered = useMemo(() => {
+  const filtered = (() => {
     if (!query.trim()) return faqs
     const q = query.toLowerCase()
     return faqs.filter((f) => f.question.toLowerCase().includes(q) || f.answer.toLowerCase().includes(q))
-  }, [query, faqs])
+  })()
 
   return (
     <section id="faq" className="py-24 sm:py-32 relative overflow-hidden">
@@ -80,6 +80,7 @@ export function FAQ() {
               <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground" />
               <input
                 type="text"
+                aria-label={t("faq.searchPlaceholder")}
                 placeholder={t("faq.searchPlaceholder")}
                 value={query}
                 onChange={(e) => setQuery(e.target.value)}
@@ -105,7 +106,7 @@ export function FAQ() {
               const isOpen = openIndex === index
               return (
                 <div
-                  key={index}
+                  key={faq.question}
                   className={cn(
                     "rounded-xl border border-border/50 bg-card/30 backdrop-blur-sm overflow-hidden",
                     "transition-all duration-300",
@@ -113,6 +114,7 @@ export function FAQ() {
                   )}
                 >
                   <button
+                    type="button"
                     onClick={() => setOpenIndex(isOpen ? null : index)}
                     className="w-full px-6 py-5 flex items-center justify-between text-left gap-4 group"
                     aria-expanded={isOpen}
diff --git a/packages/ui/components/Layouts/Home/features.tsx b/packages/ui/components/Layouts/Home/features.tsx
index f4ba04b..7d546ad 100644
--- a/packages/ui/components/Layouts/Home/features.tsx
+++ b/packages/ui/components/Layouts/Home/features.tsx
@@ -102,7 +102,7 @@ export function Features() {
         <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
           {features.map((feature, index) => (
             <Card
-              key={index}
+              key={feature.title}
               className={cn(
                 "group relative p-6 bg-card/30 backdrop-blur-sm border-border/50",
                 "hover:border-primary/30 hover:bg-card/50 transition-all duration-300",
@@ -125,7 +125,7 @@ export function Features() {
               {/* Highlights */}
               <ul className="space-y-2">
                 {feature.highlights.map((highlight, i) => (
-                  <li key={i} className="flex items-center gap-2 text-xs text-muted-foreground">
+                  <li key={highlight} className="flex items-center gap-2 text-xs text-muted-foreground">
                     <CheckCircle2 className="w-3.5 h-3.5 text-primary/60" />
                     {highlight}
                   </li>
diff --git a/packages/ui/components/Layouts/Home/hero-graphic.tsx b/packages/ui/components/Layouts/Home/hero-graphic.tsx
index 4712f0c..23bfa67 100644
--- a/packages/ui/components/Layouts/Home/hero-graphic.tsx
+++ b/packages/ui/components/Layouts/Home/hero-graphic.tsx
@@ -91,6 +91,14 @@ const ARC_PATHS = CONNECTIONS.map(c => {
   return gcPath(a.lat, a.lon, b.lat, b.lon, 50)
 })
 
+const GLOBE_DOTS: Array<{ lat: number; lon: number }> = []
+for (let lat = -85; lat <= 85; lat += DOT_DEG) {
+  const step = DOT_DEG / Math.max(Math.cos(lat * 0.017453), 0.28)
+  for (let lon = 0; lon < 360; lon += step) {
+    GLOBE_DOTS.push({ lat, lon })
+  }
+}
+
 // ─── Theme colours ────────────────────────────────────────────────────────────
 
 function cssHex(v: string, el: HTMLElement): string {
@@ -135,17 +143,30 @@ export default function HeroGraphic() {
   useEffect(() => {
     const cv = ref.current
     if (!cv) return
-    const dpr = Math.min(devicePixelRatio || 1, 2)
+    const ua = navigator.userAgent
+    const isWebKit = /AppleWebKit/i.test(ua) && !/(Chrome|Chromium|CriOS|Edg|OPR|Android)/i.test(ua)
+    const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches
+    const dpr = Math.min(devicePixelRatio || 1, isWebKit ? 1.5 : 2)
     cv.width = SIZE * dpr; cv.height = SIZE * dpr
     const ctx = cv.getContext("2d")!
     ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
 
     let raf = 0
     let t0: number | null = null
+    let lastFrame = 0
+    let visible = true
+    const frameInterval = isWebKit ? 1000 / 30 : 1000 / 60
 
     const draw = (ts: number) => {
+      raf = 0
+      if (!visible) return
+      if (ts - lastFrame < frameInterval) {
+        raf = requestAnimationFrame(draw)
+        return
+      }
+      lastFrame = ts
       if (!t0) t0 = ts
-      const sec = (ts - t0) / 1000
+      const sec = reduceMotion ? 0 : (ts - t0) / 1000
       const rot = sec * ROT_SPEED
       ctx.clearRect(0, 0, SIZE, SIZE)
 
@@ -162,15 +183,12 @@ export default function HeroGraphic() {
       ctx.strokeStyle = rgba(accent, 0.1); ctx.lineWidth = 0.8; ctx.stroke()
 
       /* ── dot grid ── */
-      for (let lat = -85; lat <= 85; lat += DOT_DEG) {
-        const step = DOT_DEG / Math.max(Math.cos(lat * 0.017453), 0.28)
-        for (let lon = 0; lon < 360; lon += step) {
-          const p = proj(lat, lon, rot)
-          if (p.z <= 0) continue
-          const idx = Math.min(DOT_ALPHA_LEVELS - 1, Math.floor((p.z / R) * DOT_ALPHA_LEVELS))
-          ctx.fillStyle = DOT_ALPHA_TABLE[idx]
-          ctx.fillRect(p.x - DOT_PX, p.y - DOT_PX, DOT_PX * 2, DOT_PX * 2)
-        }
+      for (const dot of GLOBE_DOTS) {
+        const p = proj(dot.lat, dot.lon, rot)
+        if (p.z <= 0) continue
+        const idx = Math.min(DOT_ALPHA_LEVELS - 1, Math.floor((p.z / R) * DOT_ALPHA_LEVELS))
+        ctx.fillStyle = DOT_ALPHA_TABLE[idx]
+        ctx.fillRect(p.x - DOT_PX, p.y - DOT_PX, DOT_PX * 2, DOT_PX * 2)
       }
 
       /* ── arcs + packets ── */
@@ -235,11 +253,20 @@ export default function HeroGraphic() {
         ctx.fillStyle = `rgba(255,255,255,${0.55 * d})`; ctx.fill()
       }
 
-      raf = requestAnimationFrame(draw)
+      if (!reduceMotion) raf = requestAnimationFrame(draw)
     }
 
+    const observer = new IntersectionObserver(([entry]) => {
+      visible = entry.isIntersecting
+      if (visible && !raf && !reduceMotion) raf = requestAnimationFrame(draw)
+    }, { rootMargin: "120px" })
+
+    observer.observe(cv)
     raf = requestAnimationFrame(draw)
-    return () => cancelAnimationFrame(raf)
+    return () => {
+      observer.disconnect()
+      cancelAnimationFrame(raf)
+    }
   }, [accent])
 
   return (
diff --git a/packages/ui/components/Layouts/Home/hero-stats.tsx b/packages/ui/components/Layouts/Home/hero-stats.tsx
new file mode 100644
index 0000000..71f87ac
--- /dev/null
+++ b/packages/ui/components/Layouts/Home/hero-stats.tsx
@@ -0,0 +1,50 @@
+import { Globe, Shield, Zap } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+type HeroStat = {
+  icon: "shield" | "zap" | "globe"
+  value: string
+  label: string
+  description: string
+  color: "primary" | "accent"
+}
+
+const icons = {
+  shield: Shield,
+  zap: Zap,
+  globe: Globe,
+}
+
+export function HeroStats({ stats }: { stats: readonly HeroStat[] }) {
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 pt-8">
+      {stats.map((stat) => {
+        const Icon = icons[stat.icon]
+
+        return (
+          <div
+            key={stat.label}
+            className={cn(
+              "group relative p-5 rounded-2xl border border-border/50 bg-card/30 backdrop-blur-sm",
+              "hover:border-primary/30 hover:bg-card/50 transition-all duration-300",
+              "hover:shadow-lg hover:shadow-primary/5"
+            )}
+          >
+            <div
+              className={cn(
+                "w-10 h-10 rounded-xl flex items-center justify-center mb-3",
+                stat.color === "primary" ? "bg-primary/10 text-primary" : "bg-accent/10 text-accent"
+              )}
+            >
+              <Icon className="w-5 h-5" />
+            </div>
+
+            <div className="text-2xl sm:text-3xl font-bold tracking-tight">{stat.value}</div>
+            <div className="text-sm font-medium text-muted-foreground mt-1">{stat.label}</div>
+            <p className="text-xs text-muted-foreground/70 mt-2 leading-relaxed">{stat.description}</p>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
diff --git a/packages/ui/components/Layouts/Home/hero.tsx b/packages/ui/components/Layouts/Home/hero.tsx
index 7363a49..6d1b83f 100644
--- a/packages/ui/components/Layouts/Home/hero.tsx
+++ b/packages/ui/components/Layouts/Home/hero.tsx
@@ -1,75 +1,37 @@
-"use client"
-
-import React, { useEffect, useState } from "react"
 import { Button } from "@/packages/ui/components/ui/button"
-import { ArrowRight, Shield, Zap, Globe, PartyPopper, Sparkles, Play } from "lucide-react"
+import { ArrowRight, Sparkles, Play } from "lucide-react"
 import Link from "next/link"
 import HeroGraphic from "./hero-graphic"
-import { cn } from "@/lib/utils"
+import { HeroStats } from "./hero-stats"
 import { useTranslations } from "next-intl"
 import { LINKS } from "@/packages/core/constants/links"
 
 export function Hero() {
   const t = useTranslations()
-  const [uptime, setUptime] = useState(0)
-  const [ping, setPing] = useState(120)
-
-  useEffect(() => {
-    // Animate uptime to 99.6
-    let start: number | null = null
-    const duration = 1200
-    const from = 95
-    const to = 99.6
-    function step(ts: number) {
-      if (!start) start = ts
-      const t = Math.min(1, (ts - start) / duration)
-      // Ease out cubic for smooth deceleration
-      const eased = 1 - Math.pow(1 - t, 3)
-      const v = from + (to - from) * eased
-      setUptime(Number(v.toFixed(1)))
-      if (t < 1) requestAnimationFrame(step)
-    }
-    requestAnimationFrame(step)
-
-    // Animate ping down to ~50ms
-    let pstart: number | null = null
-    const pduration = 1000
-    const pfrom = 120
-    const pto = 50
-    function pstep(ts: number) {
-      if (!pstart) pstart = ts
-      const t = Math.min(1, (ts - pstart) / pduration)
-      const eased = 1 - Math.pow(1 - t, 3)
-      const v = Math.round(pfrom + (pto - pfrom) * eased)
-      setPing(v)
-      if (t < 1) requestAnimationFrame(pstep)
-    }
-    requestAnimationFrame(pstep)
-  }, [])
 
   const stats = [
     {
-      icon: Shield,
-      value: `${uptime}%`,
+      icon: "shield",
+      value: "99.6%",
       label: t("hero.stats.uptime"),
       description: t("hero.stats.uptimeDesc"),
       color: "primary",
     },
     {
-      icon: Zap,
-      value: `≈${ping}ms`,
+      icon: "zap",
+      value: "≈50ms",
       label: t("hero.stats.ping"),
       description: t("hero.stats.pingDesc"),
       color: "accent",
     },
     {
-      icon: Globe,
+      icon: "globe",
       value: "24/7",
       label: t("hero.stats.support"),
       description: t("hero.stats.supportDesc"),
       color: "primary",
     },
-  ]
+  ] as const
 
   return (
     <section className="relative min-h-screen flex items-center justify-center overflow-hidden pt-32 pb-10">
@@ -136,41 +98,7 @@ export function Hero() {
             </div>
 
             {/* Stats Grid */}
-            <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 pt-8">
-              {stats.map((stat, index) => (
-                <div
-                  key={stat.label}
-                  className={cn(
-                    "group relative p-5 rounded-2xl border border-border/50 bg-card/30 backdrop-blur-sm",
-                    "hover:border-primary/30 hover:bg-card/50 transition-all duration-300",
-                    "hover:shadow-lg hover:shadow-primary/5"
-                  )}
-                >
-                  {/* Icon */}
-                  <div className={cn(
-                    "w-10 h-10 rounded-xl flex items-center justify-center mb-3",
-                    stat.color === "primary" ? "bg-primary/10 text-primary" : "bg-accent/10 text-accent"
-                  )}>
-                    <stat.icon className="w-5 h-5" />
-                  </div>
-                  
-                  {/* Value */}
-                  <div className="text-2xl sm:text-3xl font-bold tracking-tight">
-                    {stat.value}
-                  </div>
-                  
-                  {/* Label */}
-                  <div className="text-sm font-medium text-muted-foreground mt-1">
-                    {stat.label}
-                  </div>
-                  
-                  {/* Description */}
-                  <p className="text-xs text-muted-foreground/70 mt-2 leading-relaxed">
-                    {stat.description}
-                  </p>
-                </div>
-              ))}
-            </div>
+            <HeroStats stats={stats} />
           </div>
 
           {/* Right Content - Hero Graphic */}
@@ -214,4 +142,4 @@ export function Hero() {
       </div>
     </section>
   )
-}
\ No newline at end of file
+}
diff --git a/packages/ui/components/Layouts/Home/services.tsx b/packages/ui/components/Layouts/Home/services.tsx
index be5e4d7..b147267 100644
--- a/packages/ui/components/Layouts/Home/services.tsx
+++ b/packages/ui/components/Layouts/Home/services.tsx
@@ -85,7 +85,7 @@ export function Services() {
                 {/* Highlights */}
                 <ul className="space-y-2 mb-6 flex-1">
                   {service.highlights.map((highlight, i) => (
-                    <li key={i} className="flex items-center gap-2.5 text-sm text-muted-foreground">
+                    <li key={highlight} className="flex items-center gap-2.5 text-sm text-muted-foreground">
                       <Check className={cn("w-4 h-4 shrink-0", service.iconColor)} />
                       {highlight}
                     </li>
diff --git a/packages/ui/components/Layouts/Nodes/nodes-client.tsx b/packages/ui/components/Layouts/Nodes/nodes-client.tsx
index d886292..6309b4b 100644
--- a/packages/ui/components/Layouts/Nodes/nodes-client.tsx
+++ b/packages/ui/components/Layouts/Nodes/nodes-client.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { useState, useEffect } from "react"
+import { useState, useEffect, useSyncExternalStore } from "react"
 import {
   Server,
   MapPin,
@@ -284,8 +284,7 @@ export function NodesClient() {
   const nodes = STATIC_NODES
   const onlineCount = nodes.filter((n) => !n.isMaintenanceMode).length
   const maintenanceCount = nodes.filter((n) => n.isMaintenanceMode).length
-  const [hydrated, setHydrated] = useState(false)
-  useEffect(() => { setHydrated(true) }, [])
+  const hydrated = useSyncExternalStore(() => () => {}, () => true, () => false)
 
   return (
     <div className="relative overflow-hidden">
@@ -413,7 +412,7 @@ export function NodesClient() {
             <Accordion type="single" collapsible className="space-y-2">
               {FAQS.map((faq, i) => (
                 <AccordionItem
-                  key={i}
+                  key={faq.question}
                   value={`faq-${i}`}
                   className="border border-border/50 rounded-xl px-5 bg-card/30 backdrop-blur-sm data-[state=open]:border-primary/30 data-[state=open]:bg-card/50"
                 >
@@ -428,8 +427,8 @@ export function NodesClient() {
             </Accordion>
           ) : (
             <div className="space-y-2">
-              {FAQS.map((_, i) => (
-                <div key={i} className="border border-border/50 rounded-xl px-5 h-[52px] bg-card/30 animate-pulse" />
+              {FAQS.map((faq, i) => (
+                <div key={faq.question} className="border border-border/50 rounded-xl px-5 h-[52px] bg-card/30 animate-pulse" />
               ))}
             </div>
           )}
diff --git a/packages/ui/components/Layouts/VPS/vps-hub.tsx b/packages/ui/components/Layouts/VPS/vps-hub.tsx
index ad49b0b..92bbbd7 100644
--- a/packages/ui/components/Layouts/VPS/vps-hub.tsx
+++ b/packages/ui/components/Layouts/VPS/vps-hub.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { useState, useMemo } from "react"
+import { useState } from "react"
 import {
   Server,
   Search,
@@ -216,16 +216,10 @@ export function VpsHub({ plans }: VpsHubProps) {
   const [sort, setSort] = useState<SortKey>("default")
 
   // Derive which lineups/series actually exist in the plan list
-  const availableLineups = useMemo(
-    () => Array.from(new Set(plans.map((p) => p.lineup).filter(Boolean))) as Lineup[],
-    [plans],
-  )
-  const availableSeries = useMemo(
-    () => Array.from(new Set(plans.map((p) => p.series).filter(Boolean))) as Series[],
-    [plans],
-  )
+  const availableLineups = Array.from(new Set(plans.flatMap((p) => p.lineup ? [p.lineup] : []))) as Lineup[]
+  const availableSeries = Array.from(new Set(plans.flatMap((p) => p.series ? [p.series] : []))) as Series[]
 
-  const filtered = useMemo(() => {
+  const filtered = (() => {
     let result = [...plans]
     const q = search.trim().toLowerCase()
     if (q) {
@@ -242,7 +236,7 @@ export function VpsHub({ plans }: VpsHubProps) {
     if (sort === "asc") result.sort((a, b) => a.priceGBP - b.priceGBP)
     if (sort === "desc") result.sort((a, b) => b.priceGBP - a.priceGBP)
     return result
-  }, [plans, search, lineup, series, hardware, sort])
+  })()
 
   const hasActiveFilters = lineup !== "ALL" || series !== "ALL" || hardware !== "ALL" || search !== ""
 
@@ -320,6 +314,7 @@ export function VpsHub({ plans }: VpsHubProps) {
             {(["ALL", "amd", "intel"] as const).map((h) => (
               <button
                 key={h}
+                type="button"
                 onClick={() => setHardware(h)}
                 className={cn(
                   "px-3 py-1 rounded-full text-xs font-medium border transition-all",
@@ -339,6 +334,7 @@ export function VpsHub({ plans }: VpsHubProps) {
               availableLineups.includes(key) ? (
                 <button
                   key={key}
+                  type="button"
                   onClick={() => setLineup(lineup === key ? "ALL" : key)}
                   className={cn(
                     "inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-mono font-semibold border transition-all",
@@ -359,6 +355,7 @@ export function VpsHub({ plans }: VpsHubProps) {
             {availableSeries.map((s) => (
               <button
                 key={s}
+                type="button"
                 onClick={() => setSeries(series === s ? "ALL" : s)}
                 className={cn(
                   "px-3 py-1 rounded-full text-xs font-mono font-medium border transition-all",
diff --git a/packages/ui/components/Layouts/VPS/vps-pricing.tsx b/packages/ui/components/Layouts/VPS/vps-pricing.tsx
index d104ae6..63984d4 100644
--- a/packages/ui/components/Layouts/VPS/vps-pricing.tsx
+++ b/packages/ui/components/Layouts/VPS/vps-pricing.tsx
@@ -158,6 +158,7 @@ export function VpsPricing({ variant, plans, billingUrl }: VpsPricingProps) {
                   </div>
                 </div>
                 <button
+                  type="button"
                   onClick={copyPromoCode}
                   className="flex items-center gap-2 rounded-lg border border-primary/40 bg-primary/10 px-4 py-2 text-sm font-mono font-bold text-primary transition-colors hover:bg-primary/20"
                 >
diff --git a/packages/ui/components/Static/footer.tsx b/packages/ui/components/Static/footer.tsx
index bd1e02b..7a6692e 100644
--- a/packages/ui/components/Static/footer.tsx
+++ b/packages/ui/components/Static/footer.tsx
@@ -1,12 +1,13 @@
 "use client"
 
-import React, { useEffect, useState } from "react"
+import React, { useEffect, useState, useSyncExternalStore } from "react"
 import { SiDiscord, SiTrustpilot } from "react-icons/si"
 import { Github, Twitter, Mail, ExternalLink, Server, FileText, Scale, Headphones, AlertTriangle, Wrench, CheckCircle2 } from "lucide-react"
 import { usePathname } from "next/navigation"
 import Link from "next/link"
 import { cn } from "@/lib/utils"
 import { Logo } from "@/packages/ui/components/logo"
+import Image from "next/image"
 import { useTranslations } from "next-intl"
 import { LINKS } from "@/packages/core/constants/links"
 
@@ -257,7 +258,7 @@ export function Footer() {
         {/* Bottom Bar */}
         <div className="pt-8 border-t border-border/50">
           <div className="flex flex-col sm:flex-row items-center justify-between gap-4">
-            <p className="text-sm text-muted-foreground text-center sm:text-left">
+            <p className="text-sm text-muted-foreground text-center sm:text-left" suppressHydrationWarning>
               © {new Date().getFullYear()} NodeByte LTD. {t("footer.copyright")}
             </p>
             <div className="flex items-center gap-4 text-sm text-muted-foreground">
@@ -267,10 +268,12 @@ export function Footer() {
                 rel="noopener noreferrer"
                 className="opacity-70 hover:opacity-100 transition-opacity"
               >
-                <img 
+                <Image 
                   src="https://badges.crowdin.net/nodebyte/localized.svg" 
                   alt="Crowdin Localization" 
-                  className="h-5"
+                  width={88}
+                  height={20}
+                  className="h-5 w-auto"
                 />
               </a>
               <span className="hidden sm:inline">•</span>
@@ -317,16 +320,12 @@ function StatusIndicator() {
   useEffect(() => {
     let mounted = true
     ;(async () => {
-      try {
-        const res = await fetch("/api/instatus")
-        if (!res.ok) throw new Error(`Status ${res.status}`)
+      const res = await fetch("/api/instatus")
+      if (res.ok) {
         const data = await res.json()
-        if (!mounted) return
-        setStatus(data)
-      } catch (err) {
-        if (!mounted) return
-        // Fallback to UP status on error
-        setStatus({
+        if (mounted) setStatus(data)
+      } else {
+        if (mounted) setStatus({
           status: "UP",
           url: "https://nodebytestat.us",
           hasIncidents: false,
@@ -334,10 +333,8 @@ function StatusIndicator() {
           incidents: [],
           maintenances: [],
         })
-      } finally {
-        if (!mounted) return
-        setLoading(false)
       }
+      if (mounted) setLoading(false)
     })()
     return () => {
       mounted = false
diff --git a/packages/ui/components/Static/navigation.tsx b/packages/ui/components/Static/navigation.tsx
index f2cbd5f..b808848 100644
--- a/packages/ui/components/Static/navigation.tsx
+++ b/packages/ui/components/Static/navigation.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { useState, useEffect, useRef, useMemo } from "react"
+import { useState, useEffect, useRef } from "react"
 import { Button } from "@/packages/ui/components/ui/button"
 import {
   DropdownMenu,
@@ -24,8 +24,7 @@ export function Navigation() {
   const t = useTranslations()
   const mountedRef = useRef(false)
   
-  // Memoize menu items to prevent recreation on every render
-  const company = useMemo(() => [
+  const company = [
     {
       title: t("company.about.title"),
       href: "/about",
@@ -51,9 +50,9 @@ export function Navigation() {
       icon: ExternalLink,
       external: true,
     },
-  ], [t])
+  ]
 
-  const services = useMemo(() => [
+  const services = [
     {
       title: t("services.minecraft.title"),
       href: "/games/minecraft",
@@ -89,9 +88,9 @@ export function Navigation() {
       icon: Server,
       section: "vps",
     },
-  ], [t])
+  ]
 
-  const resources = useMemo(() => [
+  const resources = [
     {
       title: t("resources.clientArea.title"),
       href: LINKS.billing.login,
@@ -127,7 +126,7 @@ export function Navigation() {
       icon: Sparkles,
       external: false
     },
-  ], [t])
+  ]
 
   const [isScrolled, setIsScrolled] = useState(false)
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
@@ -140,7 +139,7 @@ export function Navigation() {
   const closeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
   const pathname = usePathname()
 
-  const navLabels = useMemo(() => ({
+  const navLabels = {
     company: t("nav.company"),
     services: t("nav.services"),
     resources: t("nav.resources"),
@@ -150,7 +149,7 @@ export function Navigation() {
     currency: t("nav.currency"),
     theme: t("nav.theme"),
     joinDiscord: t("nav.joinDiscord"),
-  }), [t])
+  }
 
   useEffect(() => {
     mountedRef.current = true
@@ -181,23 +180,18 @@ export function Navigation() {
   }
 
   useEffect(() => {
-    if (!mountedRef.current) return
     const handleScroll = () => {
       setIsScrolled(window.scrollY > 20)
     }
     window.addEventListener("scroll", handleScroll, { passive: true })
     return () => {
       window.removeEventListener("scroll", handleScroll)
-      // Clean up any pending close timer on unmount
       if (closeTimerRef.current) clearTimeout(closeTimerRef.current)
     }
   }, [])
 
   useEffect(() => {
-    setIsMobileMenuOpen(false)
-    setMobileCompanyOpen(false)
-    setMobileServicesOpen(false)
-    setMobileResourcesOpen(false)
+    queueMicrotask(() => setIsMobileMenuOpen(false))
   }, [pathname])
 
   // Prevent body scroll when mobile menu is open.
@@ -284,7 +278,7 @@ export function Navigation() {
                   onMouseLeave={() => closeDropdown(setCompanyOpen)}
                 >
                   <DropdownMenuTrigger asChild>
-                    <button className="inline-flex items-center gap-1 px-3 py-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors rounded-md hover:bg-accent/50">
+                    <button type="button" className="inline-flex items-center gap-1 px-3 py-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors rounded-md hover:bg-accent/50">
                       {t("nav.company")}
                       <ChevronDown className={cn(
                         "h-4 w-4 opacity-50 transition-transform duration-200",
@@ -330,7 +324,7 @@ export function Navigation() {
                   onMouseLeave={() => closeDropdown(setServicesOpen)}
                 >
                   <DropdownMenuTrigger asChild>
-                    <button className="inline-flex items-center gap-1 px-3 py-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors rounded-md hover:bg-accent/50">
+                    <button type="button" className="inline-flex items-center gap-1 px-3 py-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors rounded-md hover:bg-accent/50">
                       {t("nav.services")}
                       <ChevronDown className={cn(
                         "h-4 w-4 opacity-50 transition-transform duration-200",
@@ -401,7 +395,7 @@ export function Navigation() {
                   onMouseLeave={() => closeDropdown(setResourcesOpen)}
                 >
                   <DropdownMenuTrigger asChild>
-                    <button className="inline-flex items-center gap-1 px-3 py-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors rounded-md hover:bg-accent/50">
+                    <button type="button" className="inline-flex items-center gap-1 px-3 py-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors rounded-md hover:bg-accent/50">
                       {t("nav.resources")}
                       <ChevronDown className={cn(
                         "h-4 w-4 opacity-50 transition-transform duration-200",
@@ -516,11 +510,15 @@ export function Navigation() {
 
       {/* Mobile Menu Overlay */}
       <div
+        role="button"
+        tabIndex={0}
+        aria-label="Close menu"
         className={cn(
           "fixed inset-0 z-40 bg-black/60 backdrop-blur-sm lg:hidden transition-opacity duration-300",
           isMobileMenuOpen ? "opacity-100" : "opacity-0 pointer-events-none"
         )}
         onClick={() => setIsMobileMenuOpen(false)}
+        onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') setIsMobileMenuOpen(false) }}
       />
 
       {/* Mobile Menu Panel */}
@@ -535,6 +533,7 @@ export function Navigation() {
             {/* Company Dropdown */}
             <div className="mb-2">
               <button
+                type="button"
                 onClick={toggleMobileCompany}
                 className="flex items-center justify-between w-full p-3 rounded-xl hover:bg-accent/50 transition-colors"
               >
@@ -575,6 +574,7 @@ export function Navigation() {
             {/* Services Dropdown */}
             <div className="mb-2">
               <button
+                type="button"
                 onClick={toggleMobileServices}
                 className="flex items-center justify-between w-full p-3 rounded-xl hover:bg-accent/50 transition-colors"
               >
@@ -639,6 +639,7 @@ export function Navigation() {
             {/* Resources Dropdown */}
             <div className="mb-2">
               <button
+                type="button"
                 onClick={toggleMobileResources}
                 className="flex items-center justify-between w-full p-3 rounded-xl hover:bg-accent/50 transition-colors"
               >
diff --git a/packages/ui/components/scroll-to-hash.tsx b/packages/ui/components/scroll-to-hash.tsx
index 9e13450..85fc4d5 100644
--- a/packages/ui/components/scroll-to-hash.tsx
+++ b/packages/ui/components/scroll-to-hash.tsx
@@ -5,15 +5,15 @@ import { useEffect } from "react"
 export function ScrollToHash() {
   useEffect(() => {
     const hash = window.location.hash
-    if (hash) {
-      const id = hash.substring(1)
-      setTimeout(() => {
-        const element = document.getElementById(id)
-        if (element) {
-          element.scrollIntoView({ behavior: "smooth" })
-        }
-      }, 100)
-    }
+    if (!hash) return
+    const id = hash.substring(1)
+    const timer = setTimeout(() => {
+      const element = document.getElementById(id)
+      if (element) {
+        element.scrollIntoView({ behavior: "smooth" })
+      }
+    }, 100)
+    return () => clearTimeout(timer)
   }, [])
 
   return null
diff --git a/packages/ui/components/ui/alert-dialog.tsx b/packages/ui/components/ui/alert-dialog.tsx
index 53c6887..63e3185 100644
--- a/packages/ui/components/ui/alert-dialog.tsx
+++ b/packages/ui/components/ui/alert-dialog.tsx
@@ -4,7 +4,7 @@ import * as React from 'react'
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
 
 import { cn } from '@/lib/utils'
-import { buttonVariants } from '@/packages/ui/components/ui/button'
+import { buttonVariants } from '@/packages/ui/components/ui/button-variants'
 
 function AlertDialog({
   ...props
diff --git a/packages/ui/components/ui/badge.tsx b/packages/ui/components/ui/badge.tsx
index fc4126b..a7c21ac 100644
--- a/packages/ui/components/ui/badge.tsx
+++ b/packages/ui/components/ui/badge.tsx
@@ -43,4 +43,4 @@ function Badge({
   )
 }
 
-export { Badge, badgeVariants }
+export { Badge }
diff --git a/packages/ui/components/ui/button-group.tsx b/packages/ui/components/ui/button-group.tsx
index 5371c8e..6edf1d5 100644
--- a/packages/ui/components/ui/button-group.tsx
+++ b/packages/ui/components/ui/button-group.tsx
@@ -79,5 +79,4 @@ export {
   ButtonGroup,
   ButtonGroupSeparator,
   ButtonGroupText,
-  buttonGroupVariants,
 }
diff --git a/packages/ui/components/ui/button-variants.ts b/packages/ui/components/ui/button-variants.ts
new file mode 100644
index 0000000..3460afa
--- /dev/null
+++ b/packages/ui/components/ui/button-variants.ts
@@ -0,0 +1,33 @@
+import { cva } from 'class-variance-authority'
+
+export const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+        outline:
+          'border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost:
+          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+        icon: 'size-9',
+        'icon-sm': 'size-8',
+        'icon-lg': 'size-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
diff --git a/packages/ui/components/ui/button.tsx b/packages/ui/components/ui/button.tsx
index b748d36..6e49e75 100644
--- a/packages/ui/components/ui/button.tsx
+++ b/packages/ui/components/ui/button.tsx
@@ -1,40 +1,9 @@
 import * as React from 'react'
 import { Slot } from '@radix-ui/react-slot'
-import { cva, type VariantProps } from 'class-variance-authority'
+import { type VariantProps } from 'class-variance-authority'
 
 import { cn } from '@/lib/utils'
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-  {
-    variants: {
-      variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
-        destructive:
-          'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
-        outline:
-          'border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground',
-        secondary:
-          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        ghost:
-          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
-        link: 'text-primary underline-offset-4 hover:underline',
-      },
-      size: {
-        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
-        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
-        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
-        icon: 'size-9',
-        'icon-sm': 'size-8',
-        'icon-lg': 'size-10',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  },
-)
+import { buttonVariants } from './button-variants'
 
 function Button({
   className,
@@ -57,4 +26,4 @@ function Button({
   )
 }
 
-export { Button, buttonVariants }
+export { Button }
diff --git a/packages/ui/components/ui/calendar.tsx b/packages/ui/components/ui/calendar.tsx
index e62fc2a..1dbf81b 100644
--- a/packages/ui/components/ui/calendar.tsx
+++ b/packages/ui/components/ui/calendar.tsx
@@ -9,7 +9,8 @@ import {
 import { DayButton, DayPicker, getDefaultClassNames } from 'react-day-picker'
 
 import { cn } from '@/lib/utils'
-import { Button, buttonVariants } from '@/packages/ui/components/ui/button'
+import { Button } from '@/packages/ui/components/ui/button'
+import { buttonVariants } from '@/packages/ui/components/ui/button-variants'
 
 function Calendar({
   className,
@@ -30,8 +31,8 @@ function Calendar({
       showOutsideDays={showOutsideDays}
       className={cn(
         'bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent',
-        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
-        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        "rtl:**:[.rdp-button\\_next>svg]:rotate-180",
+        "rtl:**:[.rdp-button\\_previous>svg]:rotate-180",
         className,
       )}
       captionLayout={captionLayout}
diff --git a/packages/ui/components/ui/carousel.tsx b/packages/ui/components/ui/carousel.tsx
index 08b87a1..b03336b 100644
--- a/packages/ui/components/ui/carousel.tsx
+++ b/packages/ui/components/ui/carousel.tsx
@@ -60,49 +60,49 @@ function Carousel({
   )
   const [canScrollPrev, setCanScrollPrev] = React.useState(false)
   const [canScrollNext, setCanScrollNext] = React.useState(false)
+  const setApiRef = React.useRef(setApi)
 
-  const onSelect = React.useCallback((api: CarouselApi) => {
+  React.useEffect(() => {
+    setApiRef.current = setApi
+  }, [setApi])
+
+  const onSelectRef = React.useRef<((api: CarouselApi) => void) | null>(null)
+  const onSelect = (api: CarouselApi) => {
     if (!api) return
     setCanScrollPrev(api.canScrollPrev())
     setCanScrollNext(api.canScrollNext())
-  }, [])
+  }
+  React.useEffect(() => { onSelectRef.current = onSelect })
 
-  const scrollPrev = React.useCallback(() => {
+  const scrollPrev = () => {
     api?.scrollPrev()
-  }, [api])
+  }
 
-  const scrollNext = React.useCallback(() => {
+  const scrollNext = () => {
     api?.scrollNext()
-  }, [api])
-
-  const handleKeyDown = React.useCallback(
-    (event: React.KeyboardEvent<HTMLDivElement>) => {
-      if (event.key === 'ArrowLeft') {
-        event.preventDefault()
-        scrollPrev()
-      } else if (event.key === 'ArrowRight') {
-        event.preventDefault()
-        scrollNext()
-      }
-    },
-    [scrollPrev, scrollNext],
-  )
+  }
 
-  React.useEffect(() => {
-    if (!api || !setApi) return
-    setApi(api)
-  }, [api, setApi])
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === 'ArrowLeft') {
+      event.preventDefault()
+      scrollPrev()
+    } else if (event.key === 'ArrowRight') {
+      event.preventDefault()
+      scrollNext()
+    }
+  }
 
   React.useEffect(() => {
     if (!api) return
-    onSelect(api)
-    api.on('reInit', onSelect)
-    api.on('select', onSelect)
+    const handler = (api: CarouselApi) => onSelectRef.current?.(api)
+    queueMicrotask(() => handler(api))
+    api.on('reInit', handler)
+    api.on('select', handler)
 
     return () => {
-      api?.off('select', onSelect)
+      api?.off('select', handler)
     }
-  }, [api, onSelect])
+  }, [api])
 
   return (
     <CarouselContext.Provider
diff --git a/packages/ui/components/ui/chart.tsx b/packages/ui/components/ui/chart.tsx
index 421fe58..5ca6b63 100644
--- a/packages/ui/components/ui/chart.tsx
+++ b/packages/ui/components/ui/chart.tsx
@@ -128,7 +128,7 @@ function ChartTooltipContent({
   }) {
   const { config } = useChart()
 
-  const tooltipLabel = React.useMemo(() => {
+  const tooltipLabel = (() => {
     if (hideLabel || !payload?.length) {
       return null
     }
@@ -154,15 +154,7 @@ function ChartTooltipContent({
     }
 
     return <div className={cn('font-medium', labelClassName)}>{value}</div>
-  }, [
-    label,
-    labelFormatter,
-    payload,
-    hideLabel,
-    labelClassName,
-    config,
-    labelKey,
-  ])
+  })()
 
   if (!active || !payload?.length) {
     return null
diff --git a/packages/ui/components/ui/field.tsx b/packages/ui/components/ui/field.tsx
index f6abbdf..17e808d 100644
--- a/packages/ui/components/ui/field.tsx
+++ b/packages/ui/components/ui/field.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useMemo } from 'react'
+import * as React from 'react'
 import { cva, type VariantProps } from 'class-variance-authority'
 
 import { cn } from '@/lib/utils'
@@ -191,7 +191,7 @@ function FieldError({
 }: React.ComponentProps<'div'> & {
   errors?: Array<{ message?: string } | undefined>
 }) {
-  const content = useMemo(() => {
+  const content = (() => {
     if (children) {
       return children
     }
@@ -204,15 +204,10 @@ function FieldError({
       return errors[0].message
     }
 
-    return (
-      <ul className="ml-4 flex list-disc flex-col gap-1">
-        {errors.map(
-          (error, index) =>
-            error?.message && <li key={index}>{error.message}</li>,
-        )}
-      </ul>
-    )
-  }, [children, errors])
+    return errors.map((err, i) => (
+      <span key={i}>{err?.message}{i < errors.length - 1 && ', '}</span>
+    ))
+  })()
 
   if (!content) {
     return null
diff --git a/packages/ui/components/ui/input-group.tsx b/packages/ui/components/ui/input-group.tsx
index 876eb52..103c97f 100644
--- a/packages/ui/components/ui/input-group.tsx
+++ b/packages/ui/components/ui/input-group.tsx
@@ -73,6 +73,15 @@ function InputGroupAddon({
         }
         e.currentTarget.parentElement?.querySelector('input')?.focus()
       }}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          const input = e.currentTarget.parentElement?.querySelector('input')
+          if (input) {
+            e.preventDefault()
+            input.focus()
+          }
+        }
+      }}
       {...props}
     />
   )
diff --git a/packages/ui/components/ui/language-selector.tsx b/packages/ui/components/ui/language-selector.tsx
index 2e91051..2b2c1a4 100644
--- a/packages/ui/components/ui/language-selector.tsx
+++ b/packages/ui/components/ui/language-selector.tsx
@@ -52,6 +52,11 @@ const localeFlagComponents: Record<Locale, React.ComponentType<{ className?: str
   'zh-TW': Flags.TW,
 }
 
+function FlagIcon({ loc, className: flagClassName }: { loc: Locale; className?: string }) {
+  const FlagComponent = localeFlagComponents[loc]
+  return FlagComponent ? <FlagComponent className={flagClassName} /> : null
+}
+
 // Group locales by region for better organization
 const localeRegions: Record<string, Locale[]> = {
   'Popular': ['en', 'de-DE', 'fr-FR', 'es-ES', 'pt-BR'],
@@ -77,11 +82,6 @@ export function LanguageSelector({
   const [search, setSearch] = useState("")
   const [open, setOpen] = useState(false)
 
-  const FlagIcon = ({ loc, className: flagClassName }: { loc: Locale; className?: string }) => {
-    const FlagComponent = localeFlagComponents[loc]
-    return FlagComponent ? <FlagComponent className={flagClassName} /> : null
-  }
-
   // Filter locales based on search
   const filteredLocales = search
     ? locales.filter(loc => 
diff --git a/packages/ui/components/ui/navigation-menu.tsx b/packages/ui/components/ui/navigation-menu.tsx
index 53e7543..a21d2e4 100644
--- a/packages/ui/components/ui/navigation-menu.tsx
+++ b/packages/ui/components/ui/navigation-menu.tsx
@@ -162,5 +162,4 @@ export {
   NavigationMenuLink,
   NavigationMenuIndicator,
   NavigationMenuViewport,
-  navigationMenuTriggerStyle,
 }
diff --git a/packages/ui/components/ui/pagination.tsx b/packages/ui/components/ui/pagination.tsx
index cd3f803..e69cb2f 100644
--- a/packages/ui/components/ui/pagination.tsx
+++ b/packages/ui/components/ui/pagination.tsx
@@ -6,12 +6,12 @@ import {
 } from 'lucide-react'
 
 import { cn } from '@/lib/utils'
-import { Button, buttonVariants } from '@/packages/ui/components/ui/button'
+import { Button } from '@/packages/ui/components/ui/button'
+import { buttonVariants } from '@/packages/ui/components/ui/button-variants'
 
 function Pagination({ className, ...props }: React.ComponentProps<'nav'>) {
   return (
     <nav
-      role="navigation"
       aria-label="pagination"
       data-slot="pagination"
       className={cn('mx-auto flex w-full justify-center', className)}
diff --git a/packages/ui/components/ui/sidebar.tsx b/packages/ui/components/ui/sidebar.tsx
index 7472cf0..9d8aaf8 100644
--- a/packages/ui/components/ui/sidebar.tsx
+++ b/packages/ui/components/ui/sidebar.tsx
@@ -73,25 +73,25 @@ function SidebarProvider({
   // We use openProp and setOpenProp for control from outside the component.
   const [_open, _setOpen] = React.useState(defaultOpen)
   const open = openProp ?? _open
-  const setOpen = React.useCallback(
-    (value: boolean | ((value: boolean) => boolean)) => {
-      const openState = typeof value === 'function' ? value(open) : value
-      if (setOpenProp) {
-        setOpenProp(openState)
-      } else {
-        _setOpen(openState)
-      }
+  const setOpen = (value: boolean | ((value: boolean) => boolean)) => {
+    const openState = typeof value === 'function' ? value(open) : value
+    if (setOpenProp) {
+      setOpenProp(openState)
+    } else {
+      _setOpen(openState)
+    }
 
-      // This sets the cookie to keep the sidebar state.
-      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
-    },
-    [setOpenProp, open],
-  )
+    // This sets the cookie to keep the sidebar state.
+    document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+  }
 
   // Helper to toggle the sidebar.
-  const toggleSidebar = React.useCallback(() => {
+  const toggleSidebar = () => {
     return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
-  }, [isMobile, setOpen, setOpenMobile])
+  }
+
+  const toggleSidebarRef = React.useRef(toggleSidebar)
+  React.useEffect(() => { toggleSidebarRef.current = toggleSidebar })
 
   // Adds a keyboard shortcut to toggle the sidebar.
   React.useEffect(() => {
@@ -101,20 +101,19 @@ function SidebarProvider({
         (event.metaKey || event.ctrlKey)
       ) {
         event.preventDefault()
-        toggleSidebar()
+        toggleSidebarRef.current()
       }
     }
 
     window.addEventListener('keydown', handleKeyDown)
     return () => window.removeEventListener('keydown', handleKeyDown)
-  }, [toggleSidebar])
+  }, [])
 
   // We add a state so that we can do data-state="expanded" or "collapsed".
   // This makes it easier to style the sidebar with Tailwind classes.
   const state = open ? 'expanded' : 'collapsed'
 
-  const contextValue = React.useMemo<SidebarContextProps>(
-    () => ({
+  const contextValue: SidebarContextProps = {
       state,
       open,
       setOpen,
@@ -122,9 +121,7 @@ function SidebarProvider({
       openMobile,
       setOpenMobile,
       toggleSidebar,
-    }),
-    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
-  )
+    }
 
   return (
     <SidebarContext.Provider value={contextValue}>
@@ -284,6 +281,7 @@ function SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {
 
   return (
     <button
+      type="button"
       data-sidebar="rail"
       data-slot="sidebar-rail"
       aria-label="Toggle Sidebar"
@@ -606,10 +604,8 @@ function SidebarMenuSkeleton({
 }: React.ComponentProps<'div'> & {
   showIcon?: boolean
 }) {
-  // Random width between 50 to 90%.
-  const width = React.useMemo(() => {
-    return `${Math.floor(Math.random() * 40) + 50}%`
-  }, [])
+  // Width between 50 to 90% — deterministic from a stable id
+  const width = `${(parseInt(React.useId().slice(-4), 36) % 40) + 50}%`
 
   return (
     <div
diff --git a/packages/ui/components/ui/slider.tsx b/packages/ui/components/ui/slider.tsx
index 773e064..8ca5ee7 100644
--- a/packages/ui/components/ui/slider.tsx
+++ b/packages/ui/components/ui/slider.tsx
@@ -13,15 +13,11 @@ function Slider({
   max = 100,
   ...props
 }: React.ComponentProps<typeof SliderPrimitive.Root>) {
-  const _values = React.useMemo(
-    () =>
-      Array.isArray(value)
-        ? value
-        : Array.isArray(defaultValue)
-          ? defaultValue
-          : [min, max],
-    [value, defaultValue, min, max],
-  )
+  const _values = Array.isArray(value)
+    ? value
+    : Array.isArray(defaultValue)
+      ? defaultValue
+      : [min, max]
 
   return (
     <SliderPrimitive.Root
@@ -49,10 +45,10 @@ function Slider({
           }
         />
       </SliderPrimitive.Track>
-      {Array.from({ length: _values.length }, (_, index) => (
+      {_values.map((value, index) => (
         <SliderPrimitive.Thumb
           data-slot="slider-thumb"
-          key={index}
+          key={`thumb-${value}-${index}`}
           className="border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
         />
       ))}
diff --git a/packages/ui/components/ui/toggle-group.tsx b/packages/ui/components/ui/toggle-group.tsx
index 63f2e1a..279d611 100644
--- a/packages/ui/components/ui/toggle-group.tsx
+++ b/packages/ui/components/ui/toggle-group.tsx
@@ -5,7 +5,7 @@ import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'
 import { type VariantProps } from 'class-variance-authority'
 
 import { cn } from '@/lib/utils'
-import { toggleVariants } from '@/packages/ui/components/ui/toggle'
+import { toggleVariants } from '@/packages/ui/components/ui/toggle-variants'
 
 const ToggleGroupContext = React.createContext<
   VariantProps<typeof toggleVariants>
diff --git a/packages/ui/components/ui/toggle-variants.ts b/packages/ui/components/ui/toggle-variants.ts
new file mode 100644
index 0000000..2bc33e2
--- /dev/null
+++ b/packages/ui/components/ui/toggle-variants.ts
@@ -0,0 +1,23 @@
+import { cva } from 'class-variance-authority'
+
+export const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        outline:
+          'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground',
+      },
+      size: {
+        default: 'h-9 px-2 min-w-9',
+        sm: 'h-8 px-1.5 min-w-8',
+        lg: 'h-10 px-2.5 min-w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
diff --git a/packages/ui/components/ui/toggle.tsx b/packages/ui/components/ui/toggle.tsx
index ad6b286..e26dbc8 100644
--- a/packages/ui/components/ui/toggle.tsx
+++ b/packages/ui/components/ui/toggle.tsx
@@ -2,31 +2,10 @@
 
 import * as React from 'react'
 import * as TogglePrimitive from '@radix-ui/react-toggle'
-import { cva, type VariantProps } from 'class-variance-authority'
+import { type VariantProps } from 'class-variance-authority'
 
 import { cn } from '@/lib/utils'
-
-const toggleVariants = cva(
-  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
-  {
-    variants: {
-      variant: {
-        default: 'bg-transparent',
-        outline:
-          'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground',
-      },
-      size: {
-        default: 'h-9 px-2 min-w-9',
-        sm: 'h-8 px-1.5 min-w-8',
-        lg: 'h-10 px-2.5 min-w-10',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  },
-)
+import { toggleVariants } from './toggle-variants'
 
 function Toggle({
   className,
@@ -44,4 +23,4 @@ function Toggle({
   )
 }
 
-export { Toggle, toggleVariants }
+export { Toggle }