diff --git a/components/TableContents.tsx b/components/TableContents.tsx
index 17906219..e19d860b 100644
--- a/components/TableContents.tsx
+++ b/components/TableContents.tsx
@@ -1,43 +1,64 @@
+"use client";
+
 import React, { useState, useEffect, useRef } from "react";
 import { sanitizeStringForURL } from "../utils/sanitizeStringForUrl";
 
+/* ---------------- Types ---------------- */
+
+type HeadingItem = {
+  id: string;
+  title: string;
+  type: "h1" | "h2" | "h3" | "h4";
+};
+
+type TOCProps = {
+  headings: HeadingItem[];
+  isList: boolean;
+  setIsList: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+type TOCItemProps = {
+  id: string;
+  title: string;
+  type: HeadingItem["type"];
+  activeId: string;
+  onClick: (id: string) => void;
+};
+
+/* ---------------- TOC Item ---------------- */
+
 function TOCItem({
   id,
   title,
   type,
   onClick,
-}: {
-  id: string;
-  title: string;
-  type: string;
-  onClick: (id: string) => void;
-}) {
-  const itemClasses = "mb-1 text-slate-600 space-y-1";
+  activeId,
+}: TOCItemProps) {
+  let marginLeft = "2rem";
 
-  // Calculate margin left based on heading type
-  let marginLeft;
   switch (type) {
     case "h1":
-      marginLeft = 0;
+      marginLeft = "0";
       break;
     case "h2":
-      marginLeft = "1rem"; // Adjust as needed
+      marginLeft = "1rem";
       break;
     case "h3":
-      marginLeft = "1.5rem"; // Adjust as needed
-      break;
-    case "h4":
-      marginLeft = "2rem"; // Adjust as needed
+      marginLeft = "1.5rem";
       break;
-    default:
-      marginLeft = "2rem"; // Default to h4 margin
   }
 
+  const isActive = activeId === id;
+
   return (
-    <li className={itemClasses} style={{ marginLeft }}>
+    <li data-toc-id={id} style={{ marginLeft }}>
       <button
         onClick={() => onClick(id)}
-        className="block w-full py-1 text-sm text-left text-black transition-all duration-150 ease-in-out rounded-md opacity-75 hover:text-orange-500 hover:opacity-100"
+        className={`block w-full py-1 text-sm text-left transition-all duration-150 rounded-md ${
+          isActive
+            ? "text-orange-500 font-medium opacity-100"
+            : "text-black opacity-75 hover:text-orange-500 hover:opacity-100"
+        }`}
       >
         {title}
       </button>
@@ -45,178 +66,166 @@ function TOCItem({
   );
 }
 
-export default function TOC({ headings, isList, setIsList }) {
-  const tocRef = useRef(null);
+/* ---------------- TOC ---------------- */
+
+export default function TOC({ headings, isList, setIsList }: TOCProps) {
+  const tocContainerRef = useRef<HTMLDivElement | null>(null);
+
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [activeId, setActiveId] = useState("");
+  const [isSmallScreen, setIsSmallScreen] = useState(false);
 
+  /* ---------------- Scroll Spy ---------------- */
   useEffect(() => {
-    if (!tocRef.current) return;
+    if (!headings.length) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const visible = entries.find((e) => e.isIntersecting);
+        if (visible) {
+          setActiveId(visible.target.id);
+        }
+      },
+      { rootMargin: "-40% 0px -40% 0px", threshold: 0.1 }
+    );
+
+    headings.forEach((h) => {
+      const id = sanitizeStringForURL(h.id, true);
+      const el = document.getElementById(id);
+      if (el) observer.observe(el);
+    });
+
+    return () => observer.disconnect();
+  }, [headings]);
 
-    const container = tocRef.current;
+  /* ---------------- Auto-switch list mode ---------------- */
+  useEffect(() => {
+    if (!tocContainerRef.current) return;
 
-    function resizeHandler() {
-      setIsList(container.clientHeight > window.innerHeight * 0.8);
-    }
+    const resizeHandler = () => {
+      setIsList(
+        tocContainerRef.current!.clientHeight >
+          window.innerHeight * 0.8
+      );
+    };
 
-    resizeHandler()
-    window.addEventListener("resize", resizeHandler)
+    resizeHandler();
+    window.addEventListener("resize", resizeHandler);
+    return () => window.removeEventListener("resize", resizeHandler);
+  }, [setIsList]);
 
-    return () => { window.removeEventListener("resize", resizeHandler) }
+  /* ---------------- Auto-scroll TOC ---------------- */
+  useEffect(() => {
+    if (!activeId || !tocContainerRef.current) return;
 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+    const activeEl = tocContainerRef.current.querySelector(
+      `[data-toc-id="${activeId}"]`
+    ) as HTMLElement | null;
 
+    activeEl?.scrollIntoView({ block: "nearest", behavior: "smooth" });
+  }, [activeId]);
+
+  /* ---------------- Scroll on click ---------------- */
+  const handleItemClick = (id: string) => {
+    const sanitizedId = sanitizeStringForURL(id, true);
+    const element = document.getElementById(sanitizedId);
+    if (!element) return;
 
-  const handleItemClick = (id) => {
-  const sanitizedId = sanitizeStringForURL(id, true);
-  const element = document.getElementById(sanitizedId);
-  if (element) {
-    const offset = 80; 
-    const offsetPosition = element.offsetTop - offset;
     window.scrollTo({
-      top: offsetPosition,
+      top: element.offsetTop - 80,
       behavior: "smooth",
     });
 
-    window.history.replaceState(null, null, `#${sanitizedId}`);
-  }
-};
-
-  // State to track screen width
-  const [isSmallScreen, setIsSmallScreen] = useState(false);
-
-  // Function to check if screen width is small
-  const checkScreenSize = () => {
-    setIsSmallScreen(window.innerWidth < 1024); // Adjust breakpoint as needed
+    window.history.replaceState(null, "", `#${sanitizedId}`);
+    setActiveId(sanitizedId);
   };
 
+  /* ---------------- Screen size ---------------- */
   useEffect(() => {
-    checkScreenSize(); // Initial check
-    window.addEventListener("resize", checkScreenSize); // Event listener for screen resize
-    return () => {
-      window.removeEventListener("resize", checkScreenSize); // Cleanup on component unmount
-    };
+    const resize = () => setIsSmallScreen(window.innerWidth < 1024);
+    resize();
+    window.addEventListener("resize", resize);
+    return () => window.removeEventListener("resize", resize);
   }, []);
 
-  // Render dropdown if on a small screen, otherwise render regular TOC
-  return isSmallScreen ? (
-    <>
-      <div className="w-full max-w-[700px] px-4 mx-auto top-20">
-        <div className="flex items-center justify-center text-center w-full">
-          <button
-            onClick={() => setIsDropdownOpen((prev) => !prev)}
-            className="text-gray-700 focus:outline-none flex items-center justify-between w-full px-4 py-2 bg-white border border-gray-300 rounded-md shadow-sm hover:border-gray-400 focus:shadow-outline gap-2 text-center"
-            aria-expanded={isDropdownOpen}
-            aria-controls="toc-dropdown"
-          >
-            <span className="text-lg font-semibold text-left flex-grow">
-              Table of Contents
-            </span>
-            <span className="text-sm">{isDropdownOpen ? "▲" : "▼"}</span>
-          </button>
-        </div>
+  /* ---------------- Mobile ---------------- */
+  if (isSmallScreen) {
+    return (
+      <div className="w-full max-w-[700px] px-4 mx-auto">
+        <button
+          onClick={() => setIsDropdownOpen((p) => !p)}
+          className="w-full px-4 py-2 bg-white border rounded-md flex justify-between"
+        >
+          <span className="font-semibold">Table of Contents</span>
+          <span>{isDropdownOpen ? "▲" : "▼"}</span>
+        </button>
 
         {isDropdownOpen && (
-          <div className="mt-2 max-h-[300px] overflow-y-auto border rounded-md shadow-md p-2 bg-white w-full md:w-auto">
-            <ul className="space-y-1">
-              {headings.map((item, index) => {
-                let indent = "";
-                switch (item.type) {
-                  case "h1":
-                    indent = "ml-0";
-                    break;
-                  case "h2":
-                    indent = "ml-4";
-                    break;
-                  case "h3":
-                    indent = "ml-8";
-                    break;
-                  case "h4":
-                    indent = "ml-12";
-                    break;
-                  default:
-                    indent = "ml-0";
-                }
-
-                return (
-                  <li
-                    key={item.id}
-                    className={`text-sm text-gray-700 hover:text-orange-500 ${indent}`}
+          <ul className="mt-2 space-y-1">
+            {headings.map((item) => {
+              const id = sanitizeStringForURL(item.id, true);
+              return (
+                <li key={id}>
+                  <button
+                    onClick={() => {
+                      handleItemClick(item.id);
+                      setIsDropdownOpen(false);
+                    }}
+                    className={`text-sm ${
+                      activeId === id
+                        ? "text-orange-500 font-medium"
+                        : "text-gray-700 hover:text-orange-500"
+                    }`}
                   >
-                    <button
-                      onClick={() => {
-                        const el = document.getElementById(item.id);
-                        if (el) {
-                          const offset = 80;
-                          window.scrollTo({
-                            top: el.offsetTop - offset,
-                            behavior: "smooth",
-                          });
-                          const sanitizedId = sanitizeStringForURL(item.title, true);
-                          window.history.replaceState(
-                            null,
-                            null,
-                            `#${sanitizedId}`
-                          );
-                          setIsDropdownOpen(false);
-                        }
-                      }}
-                      className="w-full text-left"
-                    >
-                      {item.title}
-                    </button>
-                  </li>
-                );
-              })}
-            </ul>
-          </div>
+                    {item.title}
+                  </button>
+                </li>
+              );
+            })}
+          </ul>
         )}
       </div>
-    </>
-  ) : (
-    <>
-      <div className="left-0 inline-block p-4 lg:hidden top-20">
-        <div className="mb-2 text-lg font-semibold">Table of Contents</div>
+    );
+  }
+
+  /* ---------------- Desktop ---------------- */
+  return (
+    <div
+      ref={tocContainerRef}
+      className="hidden lg:inline-block sticky top-24 p-4 max-h-[80vh] overflow-y-auto"
+    >
+      <div className="mb-2 text-lg font-semibold">Table of Contents</div>
+
+      {isList ? (
         <select
-          className="block w-full px-4 py-2 text-sm leading-tight bg-white border border-gray-300 rounded-md shadow-sm hover:border-gray-400 focus:outline-none focus:shadow-outline"
+          className="block w-full px-4 py-2 border rounded-md bg-white"
           onChange={(e) => handleItemClick(e.target.value)}
         >
-          {headings.map((item, index) => (
-            <option key={index} value={item.id}>
+          {headings.map((item) => (
+            <option key={item.id} value={item.id}>
               {item.title}
             </option>
           ))}
         </select>
-      </div>
-      <div className="hidden lg:inline-block left-0 top-20 bg-inherit p-4 sticky  ">
-        <div className="mb-2 text-lg font-semibold">Table of Contents</div>
-        {isList ? (
-          <select
-            className="block w-full px-4 py-2 text-sm leading-tight bg-white border border-gray-300 rounded-md shadow-sm hover:border-gray-400 focus:outline-none focus:shadow-outline"
-            onChange={(e) => handleItemClick(e.target.value)}
-          >
-            {headings.map((item, index) => (
-              <option key={index} value={item.id}>
-                {item.title}
-              </option>
-            ))}
-          </select>
-        ) : (
-          <nav ref={tocRef}>
-            <ul className="pl-0 leading-5">
-              {headings.map((item, index) => (
+      ) : (
+        <nav>
+          <ul className="space-y-1">
+            {headings.map((item) => {
+              const id = sanitizeStringForURL(item.id, true);
+              return (
                 <TOCItem
-                  key={index}
-                  id={item.id}
+                  key={id}
+                  id={id}
                   title={item.title}
                   type={item.type}
+                  activeId={activeId}
                   onClick={handleItemClick}
                 />
-              ))}
-            </ul>
-          </nav>
-        )}
-      </div>
-    </>
+              );
+            })}
+          </ul>
+        </nav>
+      )}
+    </div>
   );
 }
diff --git a/components/testimonials.tsx b/components/testimonials.tsx
index 662d8fb3..1692bdc8 100644
--- a/components/testimonials.tsx
+++ b/components/testimonials.tsx
@@ -1,42 +1,55 @@
+"use client";
+
 import React from "react";
+import Image from "next/image";
 import { useRouter } from "next/router";
 import { Marquee } from "./Marquee";
 import Tweets from "../services/Tweets";
+
+const fallbackAvatar =
+  "https://abs.twimg.com/sticky/default_profile_images/default_profile_400x400.png";
+
 const firstRow = Tweets.slice(0, Tweets.length / 2);
 const secondRow = Tweets.slice(Tweets.length / 2);
 
-const ReviewCard = ({
-  avatar,
-  name,
-  id,
-  content,
-  post,
-}: {
-  avatar: string;
-  name: string;
-  post: string;
-  id: string;
-  content: string;
-}) => {
+const ReviewCard = ({ avatar, name, id, content, post }) => {
   const { basePath } = useRouter();
-  const isExternal = typeof avatar === "string" && /^https?:\/\//i.test(avatar);
-  const proxiedAvatar = isExternal ? `${basePath}/api/proxy-image?url=${encodeURIComponent(avatar)}` : avatar;
+
+  // Validate post link
+  if (!post || !post.startsWith("https://")) return null;
+
+  let imgSrc = avatar || fallbackAvatar;
+
+  const isExternal = /^https?:\/\//i.test(imgSrc);
+  const isTwitterCDN =
+    imgSrc.includes("pbs.twimg.com") || imgSrc.includes("abs.twimg.com");
+
+  // Proxy only non-twitter external images
+  if (isExternal && !isTwitterCDN) {
+    imgSrc = `${basePath}/api/proxy-image?url=${encodeURIComponent(imgSrc)}`;
+  }
+
   return (
-    <a href={post} target="_blank" className="lg:mx-2">
-      <figure className="relative w-80 cursor-pointer overflow-hidden rounded-xl border  p-4  border-gray-950/[.1] bg-gray-950/[.01] hover:bg-gray-950/[.05]">
+    <a href={post} target="_blank" rel="noopener noreferrer" className="lg:mx-2">
+      <figure className="relative w-80 cursor-pointer overflow-hidden rounded-xl border p-4 border-gray-950/[.1] bg-gray-950/[.01] hover:bg-gray-950/[.05]">
         <div className="flex flex-row items-center gap-2">
-          <img
+          <Image
+            src={imgSrc}
+            width={32}
+            height={32}
+            alt={`${name} avatar`}
             className="rounded-full"
-            width="32"
-            height="32"
-            alt=""
-            src={proxiedAvatar}
+            onError={(e) => {
+              e.currentTarget.src = fallbackAvatar;
+            }}
           />
+
           <div className="flex flex-col">
             <figcaption className="text-sm font-bold">{name}</figcaption>
-            <p className="text-xs font-medium ">{id}</p>
+            <p className="text-xs font-medium">@{id}</p>
           </div>
         </div>
+
         <blockquote className="mt-2 text-sm">{content}</blockquote>
       </figure>
     </a>
@@ -45,24 +58,23 @@ const ReviewCard = ({
 
 const TwitterTestimonials = () => {
   return (
-    <div className="">
-          <h3 className="text-center lg:text-left bg-gradient-to-r from-orange-200 to-orange-100 bg-[length:100%_20px] bg-no-repeat bg-left-bottom w-max mb-6 text-3xl lg:text-4xl heading1 md:text-4xl font-bold tracking-tighter leading-tight mt-16">
-          What our community thinks
-        </h3>
-      <div className="relative flex mb-8  h-[700px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border  ">
-        
+    <div>
+      <h3 className="text-center lg:text-left bg-gradient-to-r from-orange-200 to-orange-100 bg-[length:100%_20px] bg-no-repeat bg-left-bottom w-max mb-6 text-3xl lg:text-4xl font-bold tracking-tighter leading-tight mt-16">
+        What our community thinks
+      </h3>
+
+      <div className="relative flex mb-8 h-[700px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border">
         <Marquee pauseOnHover className="[--duration:20s]">
           {firstRow.map((tweet) => (
             <ReviewCard key={tweet.id} {...tweet} />
           ))}
         </Marquee>
+
         <Marquee reverse pauseOnHover className="[--duration:20s]">
           {secondRow.map((tweet) => (
             <ReviewCard key={tweet.id} {...tweet} />
           ))}
         </Marquee>
-        <div className="pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-neutral-100 dark:from-background"></div>
-        <div className="pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-neutral-100 dark:from-background"></div>
       </div>
     </div>
   );
diff --git a/components/tweets.tsx b/components/tweets.tsx
index f7b81af6..ee46f48c 100644
--- a/components/tweets.tsx
+++ b/components/tweets.tsx
@@ -1,14 +1,32 @@
-import React from "react";
+"use client";
+
+import React, { useState } from "react";
 import Image from "next/image";
 import { useRouter } from "next/router";
 import Link from "next/link";
 
+const fallbackAvatar =
+  "https://abs.twimg.com/sticky/default_profile_images/default_profile_400x400.png";
+
 const Tweets = ({ avatar, name, id, post, content }) => {
   const { basePath } = useRouter();
-  const isExternal = typeof avatar === "string" && /^https?:\/\//i.test(avatar);
-  const proxiedAvatar = isExternal
-    ? `${basePath}/api/proxy-image?url=${encodeURIComponent(avatar)}`
-    : avatar;
+
+  let imgSrc = avatar || fallbackAvatar;
+
+  const isExternal = /^https?:\/\//i.test(imgSrc);
+  const isTwitterCDN =
+    imgSrc.includes("pbs.twimg.com") || imgSrc.includes("abs.twimg.com");
+
+  if (isExternal && !isTwitterCDN) {
+    imgSrc = `${basePath}/api/proxy-image?url=${encodeURIComponent(imgSrc)}`;
+  }
+
+  // ✅ HOOKS MUST COME BEFORE ANY RETURN
+  const [src, setSrc] = useState(imgSrc);
+
+  // ✅ Conditional return AFTER hooks
+  if (!post || !post.startsWith("https://")) return null;
+
   return (
     <Link
       href={post}
@@ -20,11 +38,14 @@ const Tweets = ({ avatar, name, id, post, content }) => {
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-4">
           <Image
-            src={proxiedAvatar}
-            alt={`${name}'s avatar`}
+            src={src}
+            alt={`${name} avatar`}
             width={48}
             height={48}
             className="rounded-full"
+            unoptimized
+            onError={() => setSrc(fallbackAvatar)}
+            loading="lazy"
           />
           <div>
             <p className="font-semibold text-lg text-gray-800">{name}</p>
@@ -32,16 +53,15 @@ const Tweets = ({ avatar, name, id, post, content }) => {
           </div>
         </div>
         <Image
-          src="/blog/favicon/x-twitter.svg" 
+          src="/blog/favicon/x-twitter.svg"
           width={20}
           height={20}
           alt="Twitter Icon"
         />
       </div>
-
       <p className="mt-4 text-gray-700">{content}</p>
     </Link>
   );
 };
 
-export default Tweets;
\ No newline at end of file
+export default Tweets;
diff --git a/services/Tweets.tsx b/services/Tweets.tsx
index 12492607..656e72fb 100644
--- a/services/Tweets.tsx
+++ b/services/Tweets.tsx
@@ -10,7 +10,7 @@ const Tweets = [
     },
     {
       avatar:
-        "https://pbs.twimg.com/profile_images/1422864637532332033/mC1Nx0vj_400x400.jpg",
+        "https://pbs.twimg.com/profile_images/2006390396847628288/cSHW1_MM_400x400.jpg",
       name: "matsuu@充電期間",
       id: "matsuu",
       post: "https://x.com/matsuu/status/1747448928575099236?s=20",
@@ -38,7 +38,7 @@ const Tweets = [
     },
     {
       avatar:
-        "https://pbs.twimg.com/profile_images/1653250498127089665/x5RJbLq5_400x400.jpg",
+        "https://pbs.twimg.com/profile_images/1942049397032034304/rTAx_nAm_400x400.jpg",
       name: "きょん/kyong",
       id: "kyongshiii06",
       post: "https://x.com/kyongshiii06/status/1746532217336250821?s=20",
@@ -47,7 +47,7 @@ const Tweets = [
     },
     {
       avatar:
-        "https://pbs.twimg.com/profile_images/1653250498127089665/x5RJbLq5_400x400.jpg",
+        "https://pbs.twimg.com/profile_images/1942049397032034304/rTAx_nAm_400x400.jpg",
       name: "きょん/kyong",
       id: "kyongshiii06",
       post: "https://x.com/kyongshiii06/status/1753030333128495470?s=20",
@@ -74,7 +74,7 @@ const Tweets = [
     },
     {
       avatar:
-        "https://pbs.twimg.com/profile_images/1712175220176355329/sLXbk_PZ_400x400.jpg",
+        "https://pbs.twimg.com/profile_images/1984184086991138817/FlSYVd74_400x400.jpg",
       name: "TadasG",
       id: "JustADude404",
       post: "https://x.com/JustADude404/status/1746888711491424681?s=20",
@@ -84,7 +84,7 @@ const Tweets = [
   
     {
       avatar:
-        "https://pbs.twimg.com/profile_images/1482259385959464960/1pQMXwj7_400x400.jpg",
+        "https://pbs.twimg.com/profile_images/1949818869377556480/lhgs3XQk_400x400.jpg",
       name: "yadon",
       id: "Seipann11",
       post: "https://x.com/Seipann11/status/1755989987039064103?s=20",
@@ -102,7 +102,7 @@ const Tweets = [
     },
     {
       avatar:
-        "https://pbs.twimg.com/profile_images/1604797450124144640/6G7KytX8_400x400.jpg",
+        "https://pbs.twimg.com/profile_images/1952462865153265664/w_wxnDll_400x400.jpg",
       name: "あんどーぼんばー",
       id: "AndooBomber",
       post: "https://x.com/AndooBomber/status/1747663021747691808?s=20",