diff --git a/frontend/app/[topic]/TopicLayout.tsx b/frontend/app/[topic]/TopicLayout.tsx
index d44d173..5313a64 100644
--- a/frontend/app/[topic]/TopicLayout.tsx
+++ b/frontend/app/[topic]/TopicLayout.tsx
@@ -12,7 +12,7 @@ import { useEffect, useMemo, useState, useRef, useCallback } from "react";
 import { useTheme } from "../../src/context/ThemeContext";
 import { useGitHubStats } from "../../src/hooks/useGitHubStats"; 
 import { useRouter } from "next/navigation";
-import { FaGithub, FaLinkedin } from "react-icons/fa";
+import { FaGithub } from "react-icons/fa";
 import toast, { Toaster } from "react-hot-toast";
 import SearchPalette, { useSearchOSKey, SearchItem } from "../components/SearchPalette";
 import {
@@ -30,7 +30,6 @@ import {
   Workflow,
   X,
   Home,
-  Globe,
   GitPullRequest,
   GitMerge,
   CircleDot,
@@ -56,7 +55,6 @@ export default function TopicLayout({
   prevTopic?: { id: string; title?: string } | null;
   nextTopic?: { id: string; title?: string } | null;
 }) {
-  // Removed `darkMode` - we only need toggleTheme for the button!
   const { toggleTheme } = useTheme();
   const router = useRouter();
 
@@ -66,7 +64,7 @@ export default function TopicLayout({
   const [isMobileTocOpen, setIsMobileTocOpen] = useState(false);
   const [feedbackSubmitted, setFeedbackSubmitted] = useState(false);
 
-  const { modifierKey, isMounted } = useSearchOSKey();
+  const { modifierKey } = useSearchOSKey();
   const [expandedOutline, setExpandedOutline] = useState<Record<string, boolean>>({});
   const [activeOutlineId, setActiveOutlineId] = useState<string | null>(null);
 
@@ -215,7 +213,6 @@ export default function TopicLayout({
     });
   }, [outlineGroups]);
 
-  // REFACTORED: Converted all JS logic to pure Tailwind `dark:` classes
   const themeClasses = {
     page: "bg-[#FFFFFF] text-[#111111] dark:bg-[#050505] dark:text-[#F5F5F5]",
     sidebar: "bg-[#F7F7F7] dark:bg-[#101010]",
@@ -286,10 +283,8 @@ export default function TopicLayout({
 
   return (
     <div className={`${themeClasses.page} min-h-screen font-sans selection:bg-[#C699FF]/25 transition-colors duration-200 flex flex-col`}>
-
       <div ref={progressBarRef} className="fixed left-0 top-0 z-[100] h-[3px] bg-[#C699FF] will-change-[width]" style={{ width: "0%" }} />
 
-      {/* REFACTORED: Used !important classes to override react-hot-toast defaults via Tailwind instead of JS styles */}
       <Toaster 
         position="bottom-center" 
         toastOptions={{ 
@@ -297,7 +292,7 @@ export default function TopicLayout({
         }} 
       />
 
-    <SearchPalette 
+      <SearchPalette 
         isOpen={cmdOpen} 
         onClose={() => setCmdOpen(false)} 
         onToggle={() => setCmdOpen((prev) => !prev)}
@@ -306,7 +301,11 @@ export default function TopicLayout({
         placeholder="Search documentation or type a command..." 
       />
       
-      {isMobileMenuOpen && <div className="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm lg:hidden" onClick={() => setIsMobileMenuOpen(false)} />}
+      {/* STATIC NODE: Toggles visibility via CSS to prevent React DevTools mounting crashes */}
+      <div 
+        onClick={() => setIsMobileMenuOpen(false)}
+        className={`fixed inset-0 z-50 bg-black/50 backdrop-blur-sm lg:hidden transition-opacity duration-300 ${isMobileMenuOpen ? "opacity-100" : "opacity-0 pointer-events-none"}`} 
+      />
       
       <div className={`fixed bottom-0 left-0 top-0 z-50 w-[280px] transform border-r transition-transform duration-300 ease-in-out lg:hidden ${themeClasses.sidebar} ${themeClasses.border} ${isMobileMenuOpen ? "translate-x-0" : "-translate-x-full"}`}>
         <div className={`flex h-16 items-center justify-between border-b px-6 ${themeClasses.border}`}>
@@ -358,7 +357,6 @@ export default function TopicLayout({
             </button>
           </div>
 
-          {/* REFACTORED: Used CSS display classes instead of JS ternary for the text! */}
           <button onClick={toggleTheme} className={`shrink-0 flex justify-center items-center min-w-[70px] rounded-full border px-4 py-1.5 text-[11px] font-bold uppercase tracking-[0.2em] transition-colors ${themeClasses.border} ${themeClasses.inputBg} ${themeClasses.hoverAccent}`}>
             <span className="block dark:hidden">Dark</span>
             <span className="hidden dark:block">Light</span>
@@ -367,7 +365,6 @@ export default function TopicLayout({
       </header>
 
       <div className="flex-1 mx-auto flex w-full max-w-[1700px]">
-        
         <aside className={`sticky top-16 hidden h-[calc(100vh-4rem)] w-[280px] shrink-0 overflow-y-auto border-r lg:block ${themeClasses.sidebar} ${themeClasses.border}`}>
           <div className="px-5 py-8 pb-24">
              <button onClick={() => router.push("/")} className={`mb-8 flex items-center gap-2 text-[11px] font-bold uppercase tracking-[0.2em] ${themeClasses.muted} ${themeClasses.hoverAccent}`}>
@@ -397,17 +394,16 @@ export default function TopicLayout({
               <Home size={15} />
             </button>
             
-            {frontmatter?.category && (
-              <>
-                <ChevronRight size={14} className={`shrink-0 opacity-40 ${themeClasses.muted}`} />
-                <button 
-                  onClick={() => router.push("/")}
-                  className={`shrink-0 text-[13px] font-medium transition-colors ${themeClasses.muted} ${themeClasses.hoverAccent}`}
-                >
-                  {frontmatter.category}
-                </button>
-              </>
-            )}
+            {/* STATIC NODES: Toggles flex/hidden based on state. Prevents DevTools crashing during scroll. */}
+            <div className={`items-center gap-2 shrink-0 ${frontmatter?.category ? "flex" : "hidden"}`}>
+              <ChevronRight size={14} className={`opacity-40 ${themeClasses.muted}`} />
+              <button 
+                onClick={() => router.push("/")}
+                className={`text-[13px] font-medium transition-colors ${themeClasses.muted} ${themeClasses.hoverAccent}`}
+              >
+                {frontmatter?.category}
+              </button>
+            </div>
 
             <ChevronRight size={14} className={`shrink-0 opacity-40 ${themeClasses.muted}`} />
 
@@ -418,72 +414,67 @@ export default function TopicLayout({
               {currentTopicTitle}
             </button>
 
-            {activeGroupTitle && (
-              <>
-                <ChevronRight size={14} className={`shrink-0 opacity-40 ${themeClasses.muted}`} />
-                <button 
-                  onClick={() => activeGroupId && scrollToSection(activeGroupId)}
-                  className={`shrink-0 transition-colors text-[13px] font-medium ${!activeChildTitle ? "text-[#6f45d6] dark:text-[#C699FF]" : `${themeClasses.muted} ${themeClasses.hoverAccent}`}`}
-                >
-                  {activeGroupTitle}
-                </button>
-              </>
-            )}
+            <div className={`items-center gap-2 shrink-0 ${activeGroupTitle ? "flex" : "hidden"}`}>
+              <ChevronRight size={14} className={`opacity-40 ${themeClasses.muted}`} />
+              <button 
+                onClick={() => activeGroupId && scrollToSection(activeGroupId)}
+                className={`transition-colors text-[13px] font-medium ${!activeChildTitle ? "text-[#6f45d6] dark:text-[#C699FF]" : `${themeClasses.muted} ${themeClasses.hoverAccent}`}`}
+              >
+                {activeGroupTitle}
+              </button>
+            </div>
 
-            {activeChildTitle && (
-              <>
-                <ChevronRight size={14} className={`shrink-0 opacity-40 ${themeClasses.muted}`} />
-                <button
-                  onClick={() => activeChildId && scrollToSection(activeChildId)}
-                  className={`shrink-0 px-2 py-0.5 rounded text-[13px] font-medium bg-[#6f45d6]/10 text-[#6f45d6] dark:bg-[#C699FF]/15 dark:text-[#C699FF]`}
-                >
-                  {activeChildTitle}
-                </button>
-              </>
-            )}
+            <div className={`items-center gap-2 shrink-0 ${activeChildTitle ? "flex" : "hidden"}`}>
+              <ChevronRight size={14} className={`opacity-40 ${themeClasses.muted}`} />
+              <button
+                onClick={() => activeChildId && scrollToSection(activeChildId)}
+                className={`px-2 py-0.5 rounded text-[13px] font-medium bg-[#6f45d6]/10 text-[#6f45d6] dark:bg-[#C699FF]/15 dark:text-[#C699FF]`}
+              >
+                {activeChildTitle}
+              </button>
+            </div>
           </div>
 
           <div className="flex-1 px-5 pb-16 pt-6 md:px-10 lg:pt-10 xl:px-16 max-w-4xl mx-auto w-full">
             
-            {outlineGroups.length > 0 && (
-              <div className={`mb-8 rounded-xl border xl:hidden ${themeClasses.border} ${themeClasses.sidebar}`}>
-                <button onClick={() => setIsMobileTocOpen(!isMobileTocOpen)} className="flex w-full items-center justify-between px-4 py-3 text-sm font-semibold">
-                  <span className="flex items-center gap-2"><BookOpenText size={16} className="opacity-60" /> Table of Contents</span>
-                  <ChevronDown size={16} className={`transition-transform duration-200 opacity-60 ${isMobileTocOpen ? "rotate-180" : ""}`} />
-                </button>
-                <div className={`grid transition-all duration-200 ease-in-out ${isMobileTocOpen ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"}`}>
-                  <div className="overflow-hidden">
-                    <div className={`border-t px-4 py-4 space-y-4 ${themeClasses.border}`}>
-                      {outlineGroups.map((group) => (
-                        <div key={group.id} className="space-y-2">
-                          <a href={`#${group.id}`} onClick={(e) => { e.preventDefault(); scrollToSection(group.id); setIsMobileTocOpen(false); }} className={`block text-[14px] font-medium ${activeOutlineId === group.id ? "text-[#6f45d6] dark:text-[#C699FF]" : themeClasses.muted}`}>
-                            {group.title}
-                          </a>
-                          {group.items.length > 0 && (
-                            <div className={`ml-1 space-y-2 border-l pl-3 ${themeClasses.border}`}>
-                              {group.items.map((item) => (
-                                <a key={item.id} href={`#${item.id}`} onClick={(e) => { e.preventDefault(); scrollToSection(item.id); setIsMobileTocOpen(false); }} className={`block text-[13px] font-medium ${activeOutlineId === item.id ? "text-[#6f45d6] dark:text-[#C699FF]" : themeClasses.muted}`}>
-                                  {item.title}
-                                </a>
-                              ))}
-                            </div>
-                          )}
+            {/* STATIC NODE: Toggles block/hidden */}
+            <div className={`mb-8 rounded-xl border xl:hidden ${themeClasses.border} ${themeClasses.sidebar} ${outlineGroups.length > 0 ? "block" : "hidden"}`}>
+              <button onClick={() => setIsMobileTocOpen(!isMobileTocOpen)} className="flex w-full items-center justify-between px-4 py-3 text-sm font-semibold">
+                <span className="flex items-center gap-2"><BookOpenText size={16} className="opacity-60" /> Table of Contents</span>
+                <ChevronDown size={16} className={`transition-transform duration-200 opacity-60 ${isMobileTocOpen ? "rotate-180" : ""}`} />
+              </button>
+              <div className={`grid transition-all duration-200 ease-in-out ${isMobileTocOpen ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"}`}>
+                <div className="overflow-hidden">
+                  <div className={`border-t px-4 py-4 space-y-4 ${themeClasses.border}`}>
+                    {outlineGroups.map((group) => (
+                      <div key={group.id} className="space-y-2">
+                        <a href={`#${group.id}`} onClick={(e) => { e.preventDefault(); scrollToSection(group.id); setIsMobileTocOpen(false); }} className={`block text-[14px] font-medium ${activeOutlineId === group.id ? "text-[#6f45d6] dark:text-[#C699FF]" : themeClasses.muted}`}>
+                          {group.title}
+                        </a>
+                        <div className={`ml-1 space-y-2 border-l pl-3 ${themeClasses.border} ${group.items.length > 0 ? "block" : "hidden"}`}>
+                          {group.items.map((item) => (
+                            <a key={item.id} href={`#${item.id}`} onClick={(e) => { e.preventDefault(); scrollToSection(item.id); setIsMobileTocOpen(false); }} className={`block text-[13px] font-medium ${activeOutlineId === item.id ? "text-[#6f45d6] dark:text-[#C699FF]" : themeClasses.muted}`}>
+                              {item.title}
+                            </a>
+                          ))}
                         </div>
-                      ))}
-                    </div>
+                      </div>
+                    ))}
                   </div>
                 </div>
               </div>
-            )}
+            </div>
 
             <article className="prose prose-sm md:prose-base max-w-none dark:prose-invert">
               <h1 className="text-4xl font-extrabold tracking-tight sm:text-5xl mb-6 capitalize">{currentTopicTitle}</h1>
-              {frontmatter?.description && <p className={`text-lg md:text-xl ${themeClasses.muted} leading-relaxed mb-10`}>{frontmatter.description}</p>}
+              {/* STATIC NODE: Toggles block/hidden */}
+              <p className={`text-lg md:text-xl ${themeClasses.muted} leading-relaxed mb-10 ${frontmatter?.description ? "block" : "hidden"}`}>
+                {frontmatter?.description}
+              </p>
               {children}
             </article>
 
             <div className={`mt-10 xl:mt-16 flex flex-col items-center justify-center gap-10 border-t pt-10 ${themeClasses.border}`}>
-              
               <div className="relative flex items-center justify-center h-8 w-full">
                 <div className={`absolute inset-0 flex items-center justify-center w-full gap-4 transition-opacity duration-300 ${feedbackSubmitted ? "opacity-0 pointer-events-none" : "opacity-100"}`}>
                   <span className={`text-[13px] font-medium ${themeClasses.muted}`}>Was this page helpful?</span>
@@ -509,7 +500,6 @@ export default function TopicLayout({
                 </div>
               </div>
 
-              {/* REFACTORED: Completely eliminated JS conditional rendering for the GitHub widget */}
               <div className={`relative z-10 flex flex-col rounded-3xl border w-full max-w-2xl mx-auto shadow-sm overflow-hidden bg-white border-[#E5E5E5] dark:bg-[#0a0a0a] dark:border-[#333]`}>
                 <div className={`p-6 sm:p-8 border-b bg-zinc-50 border-[#E5E5E5] dark:bg-[#111] dark:border-[#333]`}>
                   <div className="flex items-start justify-between mb-8">
@@ -587,25 +577,24 @@ export default function TopicLayout({
 
                   <div className="flex flex-col sm:flex-row items-center justify-between gap-6">
                     <div className="flex items-center gap-3 w-full sm:w-auto justify-center sm:justify-start">
-                      {githubStats.contributors.length > 0 && (
-                        <>
-                          <div className="flex -space-x-4">
-                            {githubStats.contributors.slice(0, 5).map((user: any, idx: number) => (
-                              <img 
-                                key={user.id} 
-                                src={user.avatar_url} 
-                                alt={user.login}
-                                title={user.login}
-                                className={`h-10 w-10 rounded-full border-[3px] border-white dark:border-[#0a0a0a] shadow-md`}
-                                style={{ zIndex: 10 - idx, opacity: 1 - (idx * 0.12) }} 
-                              />
-                            ))}
-                          </div>
-                          <p className={`text-[11px] font-bold uppercase tracking-wider pl-1 ${themeClasses.muted}`}>
-                            {githubStats.contributors.length > 5 ? `+${githubStats.contributors.length - 5} Devs` : 'Contributors'}
-                          </p>
-                        </>
-                      )}
+                      {/* STATIC NODE: Toggles flex/hidden */}
+                      <div className={`items-center gap-3 ${githubStats.contributors.length > 0 ? "flex" : "hidden"}`}>
+                        <div className="flex -space-x-4">
+                          {githubStats.contributors.slice(0, 5).map((user: any, idx: number) => (
+                            <img 
+                              key={user.id} 
+                              src={user.avatar_url} 
+                              alt={user.login}
+                              title={user.login}
+                              className={`h-10 w-10 rounded-full border-[3px] border-white dark:border-[#0a0a0a] shadow-md`}
+                              style={{ zIndex: 10 - idx, opacity: 1 - (idx * 0.12) }} 
+                            />
+                          ))}
+                        </div>
+                        <p className={`text-[11px] font-bold uppercase tracking-wider pl-1 ${themeClasses.muted}`}>
+                          {githubStats.contributors.length > 5 ? `+${githubStats.contributors.length - 5} Devs` : 'Contributors'}
+                        </p>
+                      </div>
                     </div>
                     
                     <div className="flex gap-2 w-full sm:w-auto">
@@ -632,25 +621,26 @@ export default function TopicLayout({
             </div>
 
             <div className={`mt-12 flex items-center justify-between gap-4 border-t pt-8 ${themeClasses.border}`}>
-              {prevTopic ? (
+              {/* STATIC NODES: Replaced dynamic ternary with static layout toggled via CSS classes */}
+              <div className="flex w-1/2">
                 <button
-                  onClick={() => router.push(`/${prevTopic.id}`)}
-                  className={`flex w-1/2 flex-col items-start gap-1.5 rounded-xl border p-4 transition-colors hover:border-[#C699FF] ${themeClasses.border}`}
+                  onClick={() => prevTopic && router.push(`/${prevTopic.id}`)}
+                  className={`w-full flex-col items-start gap-1.5 rounded-xl border p-4 transition-colors hover:border-[#C699FF] ${themeClasses.border} ${prevTopic ? "flex" : "hidden"}`}
                 >
                   <span className={`text-[10px] uppercase tracking-[0.2em] opacity-60 ${themeClasses.muted}`}>Previous</span>
-                  <span className="text-sm font-semibold text-left">{prevTopic.title || prevTopic.id}</span>
+                  <span className="text-sm font-semibold text-left">{prevTopic?.title || prevTopic?.id}</span>
                 </button>
-              ) : <div className="w-1/2" />}
+              </div>
 
-              {nextTopic ? (
+              <div className="flex w-1/2 justify-end">
                 <button
-                  onClick={() => router.push(`/${nextTopic.id}`)}
-                  className={`flex w-1/2 flex-col items-end gap-1.5 rounded-xl border p-4 text-right transition-colors hover:border-[#C699FF] ${themeClasses.border}`}
+                  onClick={() => nextTopic && router.push(`/${nextTopic.id}`)}
+                  className={`w-full flex-col items-end gap-1.5 rounded-xl border p-4 text-right transition-colors hover:border-[#C699FF] ${themeClasses.border} ${nextTopic ? "flex" : "hidden"}`}
                 >
                   <span className={`text-[10px] uppercase tracking-[0.2em] opacity-60 ${themeClasses.muted}`}>Next</span>
-                  <span className="text-sm font-semibold text-right">{nextTopic.title || nextTopic.id}</span>
+                  <span className="text-sm font-semibold text-right">{nextTopic?.title || nextTopic?.id}</span>
                 </button>
-              ) : <div className="w-1/2" />}
+              </div>
             </div>
 
           </div>
@@ -668,15 +658,14 @@ export default function TopicLayout({
                       <a href={`#${group.id}`} onClick={(e) => { e.preventDefault(); scrollToSection(group.id); }} className={`block text-[13px] tracking-tight font-semibold leading-snug transition-colors mb-2 ${isActiveGroup ? "text-[#6f45d6] drop-shadow-[0_0_8px_rgba(111,69,214,0.4)] dark:text-[#C699FF] dark:drop-shadow-[0_0_8px_rgba(198,153,255,0.4)]" : `${themeClasses.muted} hover:text-current`}`}>
                         {group.title}
                       </a>
-                      {group.items.length > 0 && (
-                        <div className={`border-l ml-[3px] pl-3 mt-1 space-y-2 ${themeClasses.border}`}>
-                          {group.items.map((item) => (
-                            <a key={item.id} href={`#${item.id}`} onClick={(e) => { e.preventDefault(); scrollToSection(item.id); }} className={`block text-[12px] font-medium leading-snug transition-colors ${activeOutlineId === item.id ? "text-[#6f45d6] drop-shadow-[0_0_8px_rgba(111,69,214,0.4)] dark:text-[#C699FF] dark:drop-shadow-[0_0_8px_rgba(198,153,255,0.4)]" : `${themeClasses.muted} hover:text-current`}`}>
-                              {item.title}
-                            </a>
-                          ))}
-                        </div>
-                      )}
+                      {/* STATIC NODE: Toggles block/hidden */}
+                      <div className={`border-l ml-[3px] pl-3 mt-1 space-y-2 ${themeClasses.border} ${group.items.length > 0 ? "block" : "hidden"}`}>
+                        {group.items.map((item) => (
+                          <a key={item.id} href={`#${item.id}`} onClick={(e) => { e.preventDefault(); scrollToSection(item.id); }} className={`block text-[12px] font-medium leading-snug transition-colors ${activeOutlineId === item.id ? "text-[#6f45d6] drop-shadow-[0_0_8px_rgba(111,69,214,0.4)] dark:text-[#C699FF] dark:drop-shadow-[0_0_8px_rgba(198,153,255,0.4)]" : `${themeClasses.muted} hover:text-current`}`}>
+                            {item.title}
+                          </a>
+                        ))}
+                      </div>
                     </div>
                   );
                 })}
diff --git a/frontend/app/[topic]/loading.tsx b/frontend/app/[topic]/loading.tsx
new file mode 100644
index 0000000..b58ab41
--- /dev/null
+++ b/frontend/app/[topic]/loading.tsx
@@ -0,0 +1,123 @@
+import {Skeleton} from "../components/Skeleton";
+
+export default function TopicLoading() {
+  // Reusing the identical theme classes to ensure the skeleton flashes
+  // with the exact same background and border colors as the final layout.
+  const themeClasses = {
+    page: "bg-[#FFFFFF] text-[#111111] dark:bg-[#050505] dark:text-[#F5F5F5]",
+    sidebar: "bg-[#F7F7F7] dark:bg-[#101010]",
+    header: "bg-[#FFFFFF]/90 dark:bg-[#050505]/90",
+    border: "border-[#E5E5E5] dark:border-[#222222]",
+  };
+
+  return (
+    <div className={`${themeClasses.page} min-h-screen font-sans flex flex-col overflow-hidden`}>
+      {/* Header Placeholder */}
+      <header className={`sticky top-0 z-40 h-16 border-b ${themeClasses.border} ${themeClasses.header} backdrop-blur-md`}>
+        <div className="mx-auto flex h-full max-w-[1700px] items-center justify-between px-4 lg:px-6">
+          <div className="flex items-center gap-4">
+            {/* Mobile Menu Icon / Logo Placeholder */}
+            <Skeleton className="h-7 w-7 rounded-md lg:rounded-full" />
+            <Skeleton className="hidden lg:block h-4 w-16 rounded" />
+          </div>
+
+          <div className="flex-1 flex justify-center px-4 max-w-2xl mx-auto">
+            {/* Command Palette Search Placeholder */}
+            <Skeleton className="h-8 w-full rounded-full" />
+          </div>
+
+          {/* Theme Toggle Placeholder */}
+          <Skeleton className="shrink-0 h-8 w-[70px] rounded-full" />
+        </div>
+      </header>
+
+      <div className="flex-1 mx-auto flex w-full max-w-[1700px]">
+        
+        {/* Left Sidebar (Directory) Placeholder */}
+        <aside className={`sticky top-16 hidden h-[calc(100vh-4rem)] w-[280px] shrink-0 overflow-hidden border-r lg:block ${themeClasses.sidebar} ${themeClasses.border}`}>
+          <div className="px-5 py-8">
+            <Skeleton className="h-3 w-20 mb-8 rounded" />
+            <div className="space-y-4">
+              {[...Array(12)].map((_, i) => (
+                <div key={i} className="flex items-center gap-3">
+                  <Skeleton className="h-4 w-4 rounded shrink-0" />
+                  <Skeleton 
+                    variant="text" 
+                    className={`h-4 rounded ${i % 3 === 0 ? 'w-3/4' : i % 2 === 0 ? 'w-1/2' : 'w-5/6'}`} 
+                  />
+                </div>
+              ))}
+            </div>
+          </div>
+        </aside>
+
+        {/* Main Content Area */}
+        <main className="flex-1 min-w-0 flex flex-col relative">
+          
+          {/* Breadcrumbs Placeholder */}
+          <div className={`sticky top-16 z-30 flex items-center gap-3 py-3 px-5 md:px-10 xl:px-16 border-b ${themeClasses.border} ${themeClasses.header} backdrop-blur-md`}>
+            <Skeleton className="h-4 w-4 rounded" />
+            <Skeleton className="h-3 w-16 rounded" />
+            <Skeleton className="h-3 w-24 rounded" />
+          </div>
+
+          <div className="flex-1 px-5 pb-16 pt-6 md:px-10 lg:pt-10 xl:px-16 max-w-4xl mx-auto w-full">
+            
+            {/* Title & Description Placeholder */}
+            <Skeleton className="h-12 w-3/4 sm:w-1/2 mb-6 rounded-lg" />
+            <div className="space-y-3 mb-10">
+              <Skeleton variant="text" className="h-5 w-full rounded" />
+              <Skeleton variant="text" className="h-5 w-11/12 rounded" />
+            </div>
+
+            {/* Paragraph 1 Placeholder */}
+            <div className="space-y-4 mb-10">
+              <Skeleton variant="text" className="h-4 w-full rounded" />
+              <Skeleton variant="text" className="h-4 w-full rounded" />
+              <Skeleton variant="text" className="h-4 w-5/6 rounded" />
+            </div>
+
+            {/* Code Block Placeholder */}
+            <Skeleton className="h-64 w-full rounded-xl mb-10" />
+
+            {/* Subheading & Paragraph 2 Placeholder */}
+            <Skeleton className="h-8 w-1/3 mb-6 rounded" />
+            <div className="space-y-4 mb-10">
+              <Skeleton variant="text" className="h-4 w-full rounded" />
+              <Skeleton variant="text" className="h-4 w-11/12 rounded" />
+              <Skeleton variant="text" className="h-4 w-4/5 rounded" />
+            </div>
+            
+            {/* Secondary Code/Data Block Placeholder */}
+            <Skeleton className="h-32 w-full rounded-xl" />
+          </div>
+        </main>
+
+        {/* Right Sidebar (Table of Contents) Placeholder */}
+        <aside className={`sticky top-16 hidden h-[calc(100vh-4rem)] w-[260px] shrink-0 overflow-hidden border-l xl:block ${themeClasses.sidebar} ${themeClasses.border}`}>
+          <div className="px-6 py-10">
+            <Skeleton className="h-3 w-24 mb-6 rounded" />
+            <div className="space-y-5">
+              <div>
+                <Skeleton variant="text" className="h-3 w-3/4 rounded mb-3" />
+                <div className={`border-l ml-[3px] pl-3 space-y-3 ${themeClasses.border}`}>
+                  <Skeleton variant="text" className="h-2.5 w-4/5 rounded" />
+                  <Skeleton variant="text" className="h-2.5 w-5/6 rounded" />
+                </div>
+              </div>
+              <div>
+                <Skeleton variant="text" className="h-3 w-full rounded mb-3" />
+                <div className={`border-l ml-[3px] pl-3 space-y-3 ${themeClasses.border}`}>
+                  <Skeleton variant="text" className="h-2.5 w-2/3 rounded" />
+                </div>
+              </div>
+              <Skeleton variant="text" className="h-3 w-5/6 rounded" />
+              <Skeleton variant="text" className="h-3 w-4/5 rounded" />
+            </div>
+          </div>
+        </aside>
+
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/app/[topic]/opengraph-image.tsx b/frontend/app/[topic]/opengraph-image.tsx
index 326b7a9..f6d9046 100644
--- a/frontend/app/[topic]/opengraph-image.tsx
+++ b/frontend/app/[topic]/opengraph-image.tsx
@@ -2,21 +2,14 @@ import { ImageResponse } from 'next/og';
 
 export const runtime = 'edge';
 
-export const alt = 'RefMe Documentation';
+export const alt = 'RefMe_ | Technical Reference for Modern Developers';
 export const size = {
   width: 1200,
   height: 630,
 };
 export const contentType = 'image/png';
 
-export default async function Image({ params }: { params: Promise<{ topic: string }> }) {
-  const { topic } = await params;
-
-  const formattedTitle = topic
-    .split('-')
-    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-    .join(' ');
-
+export default async function Image() {
   return new ImageResponse(
     (
       <div
@@ -41,13 +34,32 @@ export default async function Image({ params }: { params: Promise<{ topic: strin
         />
 
         <div tw="flex items-center" style={{ zIndex: 10 }}>
+          {/* Note: The container wrapper below has a background and border. 
+              Since your SVG also has a background/border, you may want to strip 
+              the wrapper's bg/border if it looks like a box-inside-a-box, 
+              but it is technically sound as-is. */}
           <div
-            tw="flex items-center justify-center rounded-2xl bg-[#0F1115] text-white border border-white/10"
+            tw="flex items-center justify-center rounded-2xl bg-[#0F1115] text-white border border-white/10 overflow-hidden"
             style={{ width: '72px', height: '72px', boxShadow: '0 8px 32px rgba(0,0,0,0.4)' }}
           >
-            <span tw="font-black leading-none" style={{ fontSize: '36px', letterSpacing: '-0.14em' }}>
-              R<span tw="text-zinc-500">_</span>
-            </span>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="100%" height="100%">
+              <rect width="512" height="512" rx="116" fill="#09090b"/>
+              <rect x="6" y="6" width="500" height="500" rx="110" fill="none" stroke="#27272a" strokeWidth="4"/>
+              <g>
+                <text 
+                  x="150" 
+                  y="365" 
+                  fontFamily="system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" 
+                  fontWeight="900" 
+                  fontSize="290" 
+                  fill="#ffffff" 
+                  letterSpacing="-8"
+                >
+                  R
+                </text>
+                <rect x="350" y="325" width="55" height="24" rx="5" fill="#a1a1aa"/>
+              </g>
+            </svg>
           </div>
           <div tw="flex flex-row ml-6 items-center font-semibold uppercase" style={{ fontSize: '22px', letterSpacing: '0.28em' }}>
             <span tw="text-[#F5F5F5]">RefMe</span>
@@ -55,26 +67,26 @@ export default async function Image({ params }: { params: Promise<{ topic: strin
           </div>
         </div>
 
-        <div tw="flex flex-col mt-auto" style={{ zIndex: 10 }}>
+        <div tw="flex flex-col mt-auto" style={{ zIndex: 10, maxWidth: '960px' }}>
           <div 
             tw="flex font-semibold uppercase mb-4 opacity-90 text-[#C699FF]" 
             style={{ fontSize: '24px', letterSpacing: '0.2em' }}
           >
-            Reference Guide
+            Technical Reference
           </div>
           
           <div 
             tw="flex font-extrabold text-white leading-none" 
             style={{ fontSize: '110px', letterSpacing: '-0.04em' }}
           >
-            {formattedTitle}
+            RefMe_
           </div>
           
           <div 
             tw="flex mt-8 text-zinc-400 font-medium" 
-            style={{ fontSize: '36px', letterSpacing: '-0.02em' }}
+            style={{ fontSize: '32px', letterSpacing: '-0.01em', lineHeight: 1.4 }}
           >
-            The developer's quick-reference guide.
+            The ultimate centralized, fast, and minimal technical reference hub for modern full-stack development. Built for clarity and speed.
           </div>
         </div>
 
diff --git a/frontend/app/[topic]/page.tsx b/frontend/app/[topic]/page.tsx
index 06b1898..3307af2 100644
--- a/frontend/app/[topic]/page.tsx
+++ b/frontend/app/[topic]/page.tsx
@@ -1,3 +1,4 @@
+import type { Metadata } from "next";
 import { getAllTopics, getTopicBySlug } from "../../src/lib/mdx";
 import { MDXRemote } from "next-mdx-remote/rsc";
 import SkeletonTopic from "../components/SkeletonTopic";
@@ -20,6 +21,40 @@ const mdxComponents = {
   },
 };
 
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ topic: string }>;
+}): Promise<Metadata> {
+  const resolvedParams = await params;
+  const topicData = getTopicBySlug(resolvedParams.topic);
+
+  if (!topicData || !topicData.frontmatter) {
+    return {};
+  }
+
+  const { title, description } = topicData.frontmatter;
+  const pageTitle = `${title} | RefMe_`;
+
+  return {
+    title: pageTitle,
+    description: description,
+    openGraph: {
+      title: pageTitle,
+      description: description,
+      type: "article",
+    },
+    twitter: {
+      card: "summary_large_image",
+      title: pageTitle,
+      description: description,
+    },
+    alternates: {
+      canonical: `https://refmev1.vercel.app/${resolvedParams.topic}`,
+    },
+  };
+}
+
 export async function generateStaticParams() {
   const topics = getAllTopics();
   
@@ -58,6 +93,46 @@ export default async function TopicPage({
     );
   }
 
+  const { title, description, category } = topicData.frontmatter;
+  const pageUrl = `https://refmev1.vercel.app/${resolvedParams.topic}`;
+
+  const breadcrumbJsonLd = {
+    "@context": "https://schema.org",
+    "@type": "BreadcrumbList",
+    itemListElement: [
+      {
+        "@type": "ListItem",
+        position: 1,
+        name: "Home",
+        item: "https://refmev1.vercel.app",
+      },
+      {
+        "@type": "ListItem",
+        position: 2,
+        name: category || "Category",
+      },
+      {
+        "@type": "ListItem",
+        position: 3,
+        name: title,
+        item: pageUrl,
+      },
+    ],
+  };
+
+  const articleJsonLd = {
+    "@context": "https://schema.org",
+    "@type": "TechArticle",
+    headline: title,
+    description: description,
+    author: {
+      "@type": "Person",
+      name: "Yash Vardhan",
+      url: "https://www.linkedin.com/in/vardhan-yash3105/",
+    },
+    url: pageUrl,
+  };
+
   return (
     <TopicLayout
       frontmatter={topicData.frontmatter}
@@ -67,6 +142,14 @@ export default async function TopicPage({
       prevTopic={prevTopic}
       nextTopic={nextTopic}
     >
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbJsonLd) }}
+      />
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(articleJsonLd) }}
+      />
       <MDXRemote source={topicData.content} components={mdxComponents} />
     </TopicLayout>
   );
diff --git a/frontend/app/components/ClientCodeBlock.tsx b/frontend/app/components/ClientCodeBlock.tsx
index c3b819b..b592c0a 100644
--- a/frontend/app/components/ClientCodeBlock.tsx
+++ b/frontend/app/components/ClientCodeBlock.tsx
@@ -12,6 +12,7 @@ import { useTheme } from "../../src/context/ThemeContext";
 import { useState } from "react";
 import { Copy, Check, FileCode2 } from "lucide-react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import {Skeleton} from "../../app/components/Skeleton";
 
 export interface ClientCodeBlockProps {
   /** The raw code string to be highlighted */
@@ -203,11 +204,29 @@ export default function ClientCodeBlock({
       </div>
 
       <div className="w-full py-4 overflow-x-auto bg-[#F4F4F0] dark:bg-[#101010] transition-colors duration-200">
-        {/* Render a height-preserving invisible block before hydration, then swap to real highlighter */}
+        {/* Render a height-preserving invisible block before hydration, overlaid with Skeleton lines, then swap to real highlighter */}
         {!mounted ? (
-          <pre className="m-0 p-0 text-[0.9rem] leading-[1.7] opacity-0" aria-hidden="true">
-            <code>{code}</code>
-          </pre>
+          <div className="relative w-full">
+            <div 
+              className="absolute inset-0 flex flex-col gap-[10.5px] pl-[13px] pr-[16px] pt-[2px] overflow-hidden pointer-events-none" 
+              aria-hidden="true"
+            >
+              {Array.from({ length: Math.min(code.split('\n').length, 30) }).map((_, i) => {
+                // cycle through varied widths to mock natural code lines
+                const widths = ['w-3/4', 'w-1/2', 'w-5/6', 'w-2/3', 'w-1/3', 'w-4/5', 'w-[90%]', 'w-2/5', 'w-3/5', 'w-1/4'];
+                return (
+                  <Skeleton 
+                    key={i} 
+                    variant="text" 
+                    className={`h-[14px] rounded-sm ${widths[i % widths.length]}`} 
+                  />
+                );
+              })}
+            </div>
+            <pre className="m-0 p-0 text-[0.9rem] leading-[1.7] opacity-0" aria-hidden="true">
+              <code>{code}</code>
+            </pre>
+          </div>
         ) : (
           <SyntaxHighlighter
             language={language}
diff --git a/frontend/app/components/Footer.tsx b/frontend/app/components/Footer.tsx
index bcf6a26..7f8393c 100644
--- a/frontend/app/components/Footer.tsx
+++ b/frontend/app/components/Footer.tsx
@@ -60,7 +60,7 @@ export default function Footer() {
 
         <div
           aria-hidden="true"
-          className="relative w-full overflow-hidden pointer-events-none select-none"
+          className="hidden md:block relative w-full overflow-hidden pointer-events-none select-none "
           style={{ height: "clamp(65px, 10vw, 150px)" }}
         >
          <div
@@ -102,7 +102,7 @@ export default function Footer() {
         <div className="relative flex flex-col sm:flex-row items-center justify-between gap-4 pt-5 border-t border-[#E5E5E5] dark:border-[#333] text-[13px] font-medium text-zinc-500 dark:text-zinc-400">
           
           <div 
-            className="absolute top-0 left-0 w-full h-[95px] -translate-y-full pointer-events-none z-10 bg-[linear-gradient(to_top,#fafafa_10%,rgba(250,250,250,0.85)_40%,transparent_100%)] dark:bg-[linear-gradient(to_top,#050505_10%,rgba(5,5,5,0.85)_40%,transparent_100%)]"
+            className="absolute top-0 left-0 w-full h-[95px] hidden md:block -translate-y-full pointer-events-none z-10 bg-[linear-gradient(to_top,#fafafa_10%,rgba(250,250,250,0.85)_40%,transparent_100%)] dark:bg-[linear-gradient(to_top,#050505_10%,rgba(5,5,5,0.85)_40%,transparent_100%)]"
           />
 
           <p className="relative z-20">© 2026 RefMe</p>
diff --git a/frontend/app/components/Skeleton.tsx b/frontend/app/components/Skeleton.tsx
new file mode 100644
index 0000000..6604c32
--- /dev/null
+++ b/frontend/app/components/Skeleton.tsx
@@ -0,0 +1,48 @@
+
+import React from "react";
+
+export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: "block" | "circle" | "text";
+  lines?: number;
+}
+
+export function Skeleton({
+  variant = "block",
+  lines = 1,
+  className = "",
+  ...props
+}: SkeletonProps) {
+  const baseClass = "skeleton-base";
+
+  if (variant === "text") {
+    return (
+      <div 
+        className="flex w-full flex-col gap-2" 
+        aria-hidden="true" 
+        {...props}
+      >
+        {Array.from({ length: lines }).map((_, i) => {
+          const isLastLine = i === lines - 1 && lines > 1;
+          const widthClass = isLastLine ? "w-[60%]" : "w-full";
+          
+          return (
+            <div
+              key={i}
+              className={`${baseClass} h-4 rounded-md ${widthClass} ${className}`.trim()}
+            />
+          );
+        })}
+      </div>
+    );
+  }
+
+  const shapeClass = variant === "circle" ? "rounded-full" : "rounded-md";
+
+  return (
+    <div
+      aria-hidden="true"
+      className={`${baseClass} ${shapeClass} ${className}`.trim()}
+      {...props}
+    />
+  );
+}
\ No newline at end of file
diff --git a/frontend/app/components/SkeletonTopic.tsx b/frontend/app/components/SkeletonTopic.tsx
index a94cebe..31449ad 100644
--- a/frontend/app/components/SkeletonTopic.tsx
+++ b/frontend/app/components/SkeletonTopic.tsx
@@ -1,44 +1,64 @@
+import { Clock, Sparkles, FileCode2 } from "lucide-react";
+import { FaGithub } from "react-icons/fa";
+
 export default function SkeletonTopic({ topicKey }: { topicKey: string }) {
   return (
-    <div className='mx-auto max-w-3xl'>
-      <div className='overflow-hidden rounded-2xl border border-[#1F1F1F] bg-[#0B0B0B] shadow-[0_0_0_1px_rgba(255,255,255,0.02)]'>
-        <div className='border-b border-[#1F1F1F] bg-[#0E0E0E] px-6 py-4'>
-          <div className='inline-flex items-center gap-2 rounded-full border border-[#2A2A2A] bg-[#111111] px-3 py-1.5 text-[10px] font-medium uppercase tracking-[0.2em] text-[#B4B4B4]'>
-            Draft section
+    <div className="mx-auto max-w-3xl py-12 md:py-16">
+      <div className="overflow-hidden rounded-3xl border border-[#E5E5E5] bg-white shadow-sm transition-colors duration-200 dark:border-[#222222] dark:bg-[#0A0A0A]">
+        
+        {/* Header / Status Banner */}
+        <div className="flex items-center gap-3 border-b border-[#E5E5E5] bg-zinc-50 px-6 py-5 dark:border-[#222222] dark:bg-[#111111]">
+          <div className="flex items-center justify-center rounded-full bg-[#6f45d6]/10 p-2 text-[#6f45d6] dark:bg-[#C699FF]/15 dark:text-[#C699FF]">
+            <Clock size={16} strokeWidth={2.5} />
           </div>
+          <span className="text-xs font-bold uppercase tracking-[0.2em] text-zinc-600 dark:text-zinc-400">
+            Draft in Progress
+          </span>
         </div>
 
-        <div className='space-y-6 p-8 md:p-10'>
-          <div className='space-y-3'>
-            <h2 className='text-3xl font-semibold tracking-[-0.06em] text-white md:text-4xl'>
-              This topic is still being written.
+        {/* Main Content Area */}
+        <div className="space-y-8 p-6 sm:p-10">
+          <div className="space-y-4">
+            <h2 className="text-3xl font-extrabold tracking-tight text-black md:text-4xl dark:text-white">
+              Documentation in Progress
             </h2>
-            <p className='max-w-2xl text-base leading-7 text-[#B8B8B8]'>
-              The reference for <span className='font-medium text-[#C699FF]'>{topicKey}</span> is queued up for later, and it will be expanded into a full guide with examples, explanations, and patterns.
+            <p className="max-w-2xl text-base leading-relaxed text-zinc-600 dark:text-zinc-400">
+              The reference material for <span className="font-semibold text-[#6f45d6] dark:text-[#C699FF]">{topicKey}</span> is currently being developed. It will soon be expanded into a comprehensive guide featuring real-world applications, advanced patterns, and interactive examples.
             </p>
           </div>
 
-          <div className='flex flex-wrap gap-3 text-[11px] font-medium uppercase tracking-[0.2em] text-[#8B8B8B]'>
-            <span className='rounded-full border border-[#2A2A2A] bg-[#111111] px-3 py-1.5'>Examples</span>
-            <span className='rounded-full border border-[#2A2A2A] bg-[#111111] px-3 py-1.5'>Patterns</span>
-            <span className='rounded-full border border-[#2A2A2A] bg-[#111111] px-3 py-1.5'>Best practices</span>
+          {/* Feature Badges */}
+          <div className="flex flex-wrap gap-3">
+            {["Examples", "Patterns", "Best Practices"].map((badge) => (
+              <span 
+                key={badge} 
+                className="inline-flex items-center gap-2 rounded-xl border border-[#E5E5E5] bg-zinc-50 px-3.5 py-2 text-[12px] font-bold uppercase tracking-wide text-zinc-700 shadow-sm dark:border-[#333333] dark:bg-[#141414] dark:text-zinc-300"
+              >
+                <Sparkles size={14} className="text-[#6f45d6] dark:text-[#C699FF]" />
+                {badge}
+              </span>
+            ))}
           </div>
 
-          <div className='rounded-xl border border-[#1F1F1F] bg-[#101010] p-4'>
-            <p className='text-sm leading-7 text-[#D0D0D0]'>
-              Until then, you can explore the rest of the library or check the project author:
+          {/* Contributor Callout */}
+          <div className="mt-10 rounded-2xl border border-[#E5E5E5] bg-zinc-50 p-5 transition-colors dark:border-[#333333] dark:bg-[#141414]">
+            <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+              <p className="text-sm font-medium leading-relaxed text-zinc-600 dark:text-zinc-400">
+                Want to help speed this up or check the latest commits?
+              </p>
               <a
-                href='https://github.com/yash-pluto'
-                target='_blank'
-                rel='noopener noreferrer'
-                className='ml-2 font-medium text-[#C699FF] underline decoration-[#C699FF]/50 underline-offset-4 transition hover:text-[#D7B9FF]'
+                href="https://github.com/yash-pluto"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex shrink-0 items-center gap-2 rounded-xl border border-[#E5E5E5] bg-white px-4 py-2.5 text-[13px] font-bold text-zinc-800 transition-all hover:bg-zinc-100 dark:border-[#444] dark:bg-[#222] dark:text-zinc-200 dark:hover:bg-[#2A2A2A]"
               >
-                @Yash-pluto
+                <FaGithub size={16} />
+                <span>@Yash-pluto</span>
               </a>
-            </p>
+            </div>
           </div>
         </div>
       </div>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/app/favicon.ico b/frontend/app/favicon.ico
deleted file mode 100644
index 718d6fe..0000000
Binary files a/frontend/app/favicon.ico and /dev/null differ
diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index 023eda2..6c1143c 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -1,6 +1,5 @@
-/* app/globals.css */
 @import "tailwindcss";
-
+@custom-variant dark (&:where(.dark, .dark *));
 @theme {
   --font-sans: "Segoe UI", Inter, "Helvetica Neue", Arial, sans-serif;
   --font-mono: "SFMono-Regular", "Consolas", "Liberation Mono", monospace;
@@ -10,7 +9,6 @@
   scroll-behavior: smooth;
 }
 
-/* 1. REMOVE BROWSER SCROLLBARS GLOBALLY */
 ::-webkit-scrollbar {
   display: none;
 }
@@ -19,12 +17,10 @@ html {
   scrollbar-width: none;
 }
 
-/* 2. OPTIMIZE CODE BLOCKS */
 pre code {
   white-space: pre-wrap !important;
   word-wrap: break-word !important;
   font-family: var(--font-jetbrains-mono) !important;
-  /* Force all code blocks to use JetBrains */
   font-size: 0.9em;
 }
 
@@ -51,8 +47,42 @@ article iframe {
   max-width: 100%;
 }
 
-/* 3. SUBTLE TEXT SELECTION COLOR */
 ::selection {
   background-color: #c599ff6f !important;
   color: wheat !important;
+}
+@keyframes shimmer {
+  0% { background-position: -1000px 0; }
+  100% { background-position: 1000px 0; }
+}
+
+.skeleton-base {
+  background-color: #f1f5f9;
+  background-image: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(255, 255, 255, 0.6) 50%,
+    transparent 100%
+  );
+  background-repeat: no-repeat;
+  background-size: 1000px 100%;
+  animation: shimmer 1.8s ease-in-out infinite;
+}
+
+:is(.dark) .skeleton-base,
+.dark .skeleton-base {
+  background-color: #1e293b;
+  background-image: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(255, 255, 255, 0.06) 50%,
+    transparent 100%
+  );
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .skeleton-base {
+    animation: none !important;
+    background-image: none !important;
+  }
 }
\ No newline at end of file
diff --git a/frontend/app/icon.tsx b/frontend/app/icon.tsx
index 9d53580..8153dee 100644
--- a/frontend/app/icon.tsx
+++ b/frontend/app/icon.tsx
@@ -1,28 +1,47 @@
-import { ImageResponse } from "next/og";
+import { ImageResponse } from 'next/og';
 
-export const runtime = "edge";
-export const size = { width: 32, height: 32 };
-export const contentType = "image/png";
+export const runtime = 'edge';
+
+export const size = {
+  width: 512,
+  height: 512,
+};
+export const contentType = 'image/png';
 
 export default function Icon() {
   return new ImageResponse(
-    <div
-      style={{
-        fontSize: 22,
-        background: "#050505",
-        width: "100%",
-        height: "100%",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        color: "white",
-        borderRadius: "6px",
-        fontWeight: 900,
-        fontFamily: "sans-serif",
-      }}
-    >
-      R<span style={{ color: "#71717a" }}>_</span>
-    </div>,
-    { ...size },
+    (
+      <div
+        style={{
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="100%" height="100%">
+          <rect width="512" height="512" rx="116" fill="#09090b"/>
+          <rect x="6" y="6" width="500" height="500" rx="110" fill="none" stroke="#27272a" strokeWidth="4"/>
+          <g>
+            <text 
+              x="150" 
+              y="365" 
+              fontFamily="system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" 
+              fontWeight="900" 
+              fontSize="290" 
+              fill="#ffffff" 
+              letterSpacing="-8"
+            >
+              R
+            </text>
+            <rect x="350" y="325" width="55" height="24" rx="5" fill="#a1a1aa"/>
+          </g>
+        </svg>
+      </div>
+    ),
+    {
+      ...size,
+    }
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
index 5e33db0..abc5d8e 100644
--- a/frontend/app/layout.tsx
+++ b/frontend/app/layout.tsx
@@ -3,6 +3,11 @@ import "./globals.css";
 import { ThemeProvider } from "../src/context/ThemeContext";
 
 export const metadata: Metadata = {
+  metadataBase: new URL("https://refmev1.vercel.app"),
+  manifest: "/manifest.json",
+  alternates: {
+    canonical: "https://refmev1.vercel.app",
+  },
   title: "RefMe_ | Technical Reference for Modern Developers",
   description:
     "The ultimate centralized, fast, and minimal technical reference hub for modern full-stack development. Built for clarity and speed.",
@@ -24,16 +29,32 @@ export const metadata: Metadata = {
     title: "RefMe_ | Technical Reference",
     description:
       "The ultimate technical reference for modern full-stack development.",
-    url: "https://refme.vercel.app",
+    url: "https://refmev1.vercel.app",
     siteName: "RefMe",
     locale: "en_US",
     type: "website",
+    images: [
+      {
+        url: "/opengraph-image",
+        width: 1200,
+        height: 630,
+        alt: "RefMe_ | Technical Reference for Modern Developers",
+      },
+    ],
   },
   twitter: {
     card: "summary_large_image",
     title: "RefMe_ | Technical Reference",
     description:
       "The ultimate technical reference for modern full-stack development.",
+    images: [
+      {
+        url: "/opengraph-image",
+        width: 1200,
+        height: 630,
+        alt: "RefMe_ | Technical Reference for Modern Developers",
+      },
+    ],
   },
 };
 
@@ -42,6 +63,15 @@ export default function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
+  const websiteJsonLd = {
+    "@context": "https://schema.org",
+    "@type": "WebSite",
+    name: "RefMe",
+    url: "https://refmev1.vercel.app",
+    description:
+      "The ultimate centralized, fast, and minimal technical reference hub for modern full-stack development. Built for clarity and speed.",
+  };
+
   return (
     <html lang='en' className='h-full antialiased' suppressHydrationWarning>
       <head>
@@ -49,6 +79,10 @@ export default function RootLayout({
           name='viewport'
           content='width=device-width, initial-scale=1, maximum-scale=5'
         />
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{ __html: JSON.stringify(websiteJsonLd) }}
+        />
         <script
           suppressHydrationWarning
           dangerouslySetInnerHTML={{
diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
index 7e15e9f..5c37944 100644
--- a/frontend/app/page.tsx
+++ b/frontend/app/page.tsx
@@ -6,8 +6,10 @@ import { useRouter } from "next/navigation";
 import { useTheme } from "../src/context/ThemeContext";
 import { FaGithub, FaLinkedin } from "react-icons/fa";
 import SearchPalette, { useSearchOSKey, SearchItem } from "../app/components/SearchPalette";
+import { Skeleton } from "../app/components/Skeleton";
 import { motion, AnimatePresence, useReducedMotion } from "framer-motion";
 import Footer from "./components/Footer";
+import { useGitHubStats } from "../src/hooks/useGitHubStats"; 
 
 import {
   BadgeCheck,
@@ -162,25 +164,16 @@ function timeSince(dateString: string) {
 }
 
 export default function LandingPage() {
-  const { toggleTheme } = useTheme(); // No longer pulling in `darkMode` state!
+  const { toggleTheme } = useTheme();
   const router = useRouter();
   
   const [mounted, setMounted] = useState(false);
-  
   const [cmdOpen, setCmdOpen] = useState(false);
   const { modifierKey } = useSearchOSKey();
-  
   const shouldReduceMotion = useReducedMotion();
   
-  const [githubStats, setGithubStats] = useState({
-    stars: "-",
-    openIssues: "-",
-    openPrs: "-",
-    mergedPrs: "-",
-    lastPush: "",
-    contributors: [] as any[],
-    loading: true
-  });
+  // Clean, single-line hook consumption (replaces the massive inline fetch)
+  const githubStats = useGitHubStats();
 
   const [cycle, setCycle] = useState(0);
   const [activeTab, setActiveTab] = useState(0);
@@ -192,7 +185,6 @@ export default function LandingPage() {
     setMounted(true);
   }, []);
 
-  // Centralized Tailwind classes using dark: instead of JS ternary logic
   const themeClasses = {
     page: "bg-[#FFFFFF] text-[#111111] dark:bg-[#0a0a0a] dark:text-[#ededed]",
     header: "bg-[#FFFFFF]/95 dark:bg-[#0a0a0a]/95",
@@ -207,40 +199,6 @@ export default function LandingPage() {
     iconBoxHover: "group-hover:text-black dark:group-hover:text-white",
   };
 
-  useEffect(() => {
-    const fetchGitHubStats = async () => {
-      try {
-        const [repoRes, openPrsRes, mergedPrsRes, issuesRes, contributorsRes] = await Promise.all([
-          fetch('https://api.github.com/repos/yash-pluto/refme').catch(() => null),
-          fetch('https://api.github.com/search/issues?q=repo:yash-pluto/refme+is:pr+is:open').catch(() => null),
-          fetch('https://api.github.com/search/issues?q=repo:yash-pluto/refme+is:pr+is:merged').catch(() => null),
-          fetch('https://api.github.com/search/issues?q=repo:yash-pluto/refme+is:issue+is:open').catch(() => null),
-          fetch('https://api.github.com/repos/yash-pluto/refme/contributors').catch(() => null)
-        ]);
-
-        const repoData = repoRes && repoRes.ok ? await repoRes.json() : {};
-        const openPrsData = openPrsRes && openPrsRes.ok ? await openPrsRes.json() : {};
-        const mergedPrsData = mergedPrsRes && mergedPrsRes.ok ? await mergedPrsRes.json() : {};
-        const issuesData = issuesRes && issuesRes.ok ? await issuesRes.json() : {};
-        const contributorsData = contributorsRes && contributorsRes.ok ? await contributorsRes.json() : [];
-
-        setGithubStats({
-          stars: repoData.stargazers_count !== undefined ? repoData.stargazers_count.toString() : "-",
-          openIssues: issuesData.total_count !== undefined ? issuesData.total_count.toString() : "-",
-          openPrs: openPrsData.total_count !== undefined ? openPrsData.total_count.toString() : "-",
-          mergedPrs: mergedPrsData.total_count !== undefined ? mergedPrsData.total_count.toString() : "-",
-          lastPush: repoData.pushed_at || repoData.updated_at || "",
-          contributors: Array.isArray(contributorsData) ? contributorsData : [],
-          loading: false
-        });
-      } catch (error) {
-        setGithubStats(prev => ({ ...prev, loading: false }));
-      }
-    };
-
-    fetchGitHubStats();
-  }, []);
-
   useEffect(() => {
     const interval = setInterval(() => {
       setCycle(c => (c + 1) % 3);
@@ -249,7 +207,6 @@ export default function LandingPage() {
   }, []);
 
   useEffect(() => {
-    // Break the autoplay circuit entirely if user prefers reduced motion
     if (!isAutoPlaying || shouldReduceMotion) return;
     const interval = setInterval(() => {
       setActiveTab((prev) => (prev + 1) % REFERENCE_DATA.length);
@@ -303,7 +260,6 @@ export default function LandingPage() {
 
   const timeSinceStr = timeSince(githubStats.lastPush);
   
-  // Dynamic arrays converted to Tailwind
   const dynamicBuildStats = [
     { title: "Repository Synced", desc: `Last push: ${timeSinceStr}`, icon: <CheckCircle2 size={16} />, bg: "bg-black text-white dark:bg-white dark:text-black" },
     { title: "Active Contributors", desc: `${githubStats.contributors.length} devs building RefMe`, icon: <Code2 size={16} />, bg: "bg-zinc-100 text-black dark:bg-[#222] dark:text-white" },
@@ -321,36 +277,17 @@ export default function LandingPage() {
 
   const tabContentVariants = {
     hidden: { opacity: 0 },
-    visible: {
-      opacity: 1,
-      transition: {
-        staggerChildren: 0.08,
-        delayChildren: 0.1,
-      },
-    },
-    exit: {
-      opacity: 0,
-      transition: { duration: 0.15 }
-    }
+    visible: { opacity: 1, transition: { staggerChildren: 0.08, delayChildren: 0.1 } },
+    exit: { opacity: 0, transition: { duration: 0.15 } }
   };
 
   const isReducedMotionSafe = mounted && shouldReduceMotion;
 
   const itemVariants = {
-    hidden: { 
-      opacity: 0, 
-      y: isReducedMotionSafe ? 0 : 15 
-    },
+    hidden: { opacity: 0, y: isReducedMotionSafe ? 0 : 15 },
     visible: {
-      opacity: 1,
-      y: 0,
-      transition: isReducedMotionSafe 
-        ? { duration: 0.15 } 
-        : {
-            type: "spring" as const,
-            stiffness: 400,
-            damping: 30
-          }
+      opacity: 1, y: 0,
+      transition: isReducedMotionSafe ? { duration: 0.15 } : { type: "spring" as const, stiffness: 400, damping: 30 }
     },
   };
 
@@ -511,7 +448,11 @@ export default function LandingPage() {
                         <GitPullRequest size={16} className="text-emerald-500" />
                         <span className={`text-[11px] font-bold uppercase tracking-wider ${themeClasses.muted}`}>Open PRs</span>
                       </div>
-                      <span className={`text-3xl font-extrabold tracking-tight text-black dark:text-white`}>{githubStats.openPrs}</span>
+                      {githubStats.loading ? (
+                        <Skeleton className="h-9 w-12" />
+                      ) : (
+                        <span className={`text-3xl font-extrabold tracking-tight text-black dark:text-white`}>{githubStats.openPrs}</span>
+                      )}
                     </div>
                     
                     <div className={`flex flex-col justify-between p-4 rounded-xl border bg-white border-[#E5E5E5] shadow-sm dark:bg-[#141414] dark:border-[#333]`}>
@@ -519,7 +460,11 @@ export default function LandingPage() {
                         <GitMerge size={16} className="text-purple-500" />
                         <span className={`text-[11px] font-bold uppercase tracking-wider ${themeClasses.muted}`}>Merged</span>
                       </div>
-                      <span className={`text-3xl font-extrabold tracking-tight text-black dark:text-white`}>{githubStats.mergedPrs}</span>
+                      {githubStats.loading ? (
+                        <Skeleton className="h-9 w-12" />
+                      ) : (
+                        <span className={`text-3xl font-extrabold tracking-tight text-black dark:text-white`}>{githubStats.mergedPrs}</span>
+                      )}
                     </div>
 
                     <div className={`flex flex-col justify-between p-4 rounded-xl border bg-white border-[#E5E5E5] shadow-sm dark:bg-[#141414] dark:border-[#333]`}>
@@ -527,7 +472,11 @@ export default function LandingPage() {
                         <CircleDot size={16} className="text-emerald-500" />
                         <span className={`text-[11px] font-bold uppercase tracking-wider ${themeClasses.muted}`}>Issues</span>
                       </div>
-                      <span className={`text-3xl font-extrabold tracking-tight text-black dark:text-white`}>{githubStats.openIssues}</span>
+                      {githubStats.loading ? (
+                        <Skeleton className="h-9 w-12" />
+                      ) : (
+                        <span className={`text-3xl font-extrabold tracking-tight text-black dark:text-white`}>{githubStats.openIssues}</span>
+                      )}
                     </div>
 
                     <div className={`flex flex-col justify-between p-4 rounded-xl border bg-white border-[#E5E5E5] shadow-sm dark:bg-[#141414] dark:border-[#333]`}>
@@ -535,14 +484,32 @@ export default function LandingPage() {
                         <Star size={16} className="text-amber-500" />
                         <span className={`text-[11px] font-bold uppercase tracking-wider ${themeClasses.muted}`}>Stars</span>
                       </div>
-                      <span className={`text-3xl font-extrabold tracking-tight text-black dark:text-white`}>{githubStats.stars}</span>
+                      {githubStats.loading ? (
+                        <Skeleton className="h-9 w-12" />
+                      ) : (
+                        <span className={`text-3xl font-extrabold tracking-tight text-black dark:text-white`}>{githubStats.stars}</span>
+                      )}
                     </div>
 
                   </div>
 
                   <div className="flex flex-col sm:flex-row items-center justify-between gap-6">
                     <div className="flex items-center gap-3 w-full sm:w-auto justify-center sm:justify-start">
-                      {githubStats.contributors.length > 0 && (
+                      {githubStats.loading ? (
+                        <>
+                          <div className="flex -space-x-4">
+                            {[0, 1, 2, 3, 4].map((idx) => (
+                              <Skeleton
+                                key={idx}
+                                variant="circle"
+                                className={`h-10 w-10 border-[3px] border-white shadow-md dark:border-[#0a0a0a]`}
+                                style={{ zIndex: 10 - idx, opacity: 1 - (idx * 0.12) }}
+                              />
+                            ))}
+                          </div>
+                          <Skeleton className="h-3 w-24 ml-1" />
+                        </>
+                      ) : githubStats.contributors.length > 0 ? (
                         <>
                           <div className="flex -space-x-4">
                             {githubStats.contributors.slice(0, 5).map((user: any, idx: number) => (
@@ -560,7 +527,7 @@ export default function LandingPage() {
                             {githubStats.contributors.length > 5 ? `+${githubStats.contributors.length - 5} Contributors` : 'Contributors'}
                           </p>
                         </>
-                      )}
+                      ) : null}
                     </div>
                     
                     <a 
@@ -695,43 +662,57 @@ export default function LandingPage() {
         </div>
 
         <div className="flex flex-col lg:flex-row gap-6 lg:gap-8 items-stretch max-w-[1400px] mx-auto lg:h-[720px]">
-          <div className="w-full lg:w-[35%] flex flex-col gap-3 h-full">
-            {REFERENCE_DATA.map((cat, idx) => {
-              const isActive = activeTab === idx;
-              return (
-                <button
-                  key={cat.category}
-                  onClick={() => {
-                    setActiveTab(idx);
-                    setIsAutoPlaying(false);
-                  }}
-                  className={`flex items-start gap-4 p-5 rounded-2xl border text-left transition-all duration-300 ${
-                    isActive 
-                      ? "bg-white border-[#ccc] shadow-md dark:bg-[#1a1a1a] dark:border-[#444]"
-                      : "bg-zinc-50 border-transparent hover:bg-zinc-100 hover:border-[#E5E5E5] dark:bg-[#0a0a0a] dark:border-[#222] dark:hover:bg-[#111] dark:hover:border-[#333]"
-                  }`}
-                >
-                  <div className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border transition-colors ${
-                    isActive 
-                      ? "bg-zinc-100 border-[#ddd] text-black dark:bg-[#333] dark:border-[#555] dark:text-white"
-                      : "bg-white border-[#E5E5E5] text-zinc-500 dark:bg-[#111] dark:border-[#333] dark:text-zinc-400"
-                  }`}>
-                    {cat.icon}
-                  </div>
-                  <div>
-                    <h3 className={`text-base font-bold mb-1 transition-colors ${
-                      isActive ? "text-black dark:text-white" : "text-zinc-700 dark:text-zinc-300"
-                    }`}>
-                      {cat.category}
-                    </h3>
-                    <p className={`text-[13px] leading-relaxed ${themeClasses.muted}`}>
-                      {cat.desc}
-                    </p>
-                  </div>
-                </button>
-              );
-            })}
-          </div>
+<div className="w-full lg:w-[35%] flex flex-col gap-3 h-full">
+  {REFERENCE_DATA.map((cat, idx) => {
+    const isActive = activeTab === idx;
+    return (
+      <button
+        key={cat.category}
+        onClick={() => {
+          setActiveTab(idx);
+          setIsAutoPlaying(false); 
+        }}
+        className={`group relative flex items-start gap-4 p-5 rounded-2xl border text-left transition-all duration-300 ${
+          isActive 
+            ? "border-transparent" 
+            : "bg-zinc-50 border-transparent hover:bg-zinc-100 hover:border-[#E5E5E5] dark:bg-[#0a0a0a] dark:border-transparent dark:hover:bg-[#111] dark:hover:border-[#333]"
+        }`}
+      >
+        {/* The Animated Framer Motion Background */}
+        {isActive && (
+          <motion.div
+            layoutId="activeCategoryBg"
+            className="absolute inset-0 rounded-2xl bg-white border border-[#ccc] shadow-md dark:bg-[#1a1a1a] dark:border-[#444]"
+            initial={false}
+            transition={{ type: "spring", stiffness: 400, damping: 30 }}
+          />
+        )}
+        
+        {/* Content wrapped in relative z-10 to sit above the animated background */}
+        <div className={`relative z-10 flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border transition-colors ${
+          isActive 
+            ? "bg-zinc-100 border-[#ddd] text-black dark:bg-[#333] dark:border-[#555] dark:text-white"
+            : "bg-white border-[#E5E5E5] text-zinc-500 dark:bg-[#111] dark:border-[#333] dark:text-zinc-400 group-hover:text-black dark:group-hover:text-white group-hover:border-[#ccc] dark:group-hover:border-[#555]"
+        }`}>
+          {cat.icon}
+        </div>
+        
+        <div className="relative z-10">
+          <h3 className={`text-base font-bold mb-1 transition-colors ${
+            isActive ? "text-black dark:text-white" : "text-zinc-700 dark:text-zinc-300 group-hover:text-black dark:group-hover:text-white"
+          }`}>
+            {cat.category}
+          </h3>
+          <p className={`text-[13px] leading-relaxed transition-colors ${
+             isActive ? themeClasses.muted : "text-zinc-500 dark:text-zinc-400"
+          }`}>
+            {cat.desc}
+          </p>
+        </div>
+      </button>
+    );
+  })}
+</div>
 
           <div className={`w-full lg:w-[65%] rounded-3xl border p-6 sm:p-10 flex flex-col relative h-[600px] lg:h-full overflow-hidden bg-white border-[#E5E5E5] shadow-sm dark:bg-[#111] dark:border-[#333]`}>
             
diff --git a/frontend/public/manifest.json b/frontend/public/manifest.json
new file mode 100644
index 0000000..1094056
--- /dev/null
+++ b/frontend/public/manifest.json
@@ -0,0 +1,21 @@
+{
+  "name": "RefMe",
+  "short_name": "RefMe",
+  "description": "RefMe Application",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#050505",
+  "theme_color": "#050505",
+  "icons": [
+    {
+      "src": "/icon",
+      "sizes": "32x32",
+      "type": "image/png"
+    },
+    {
+      "src": "/apple-icon",
+      "sizes": "180x180",
+      "type": "image/png"
+    }
+  ]
+}
\ No newline at end of file