diff --git a/package-lock.json b/package-lock.json
index 64540bb..4beeb54 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "@mdx-js/loader": "^3.1.0",
         "@mdx-js/react": "^3.1.0",
         "@next/mdx": "^15.1.6",
+        "@radix-ui/react-accordion": "^1.2.4",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
         "copy-to-clipboard": "^3.3.3",
@@ -1029,6 +1030,261 @@
         "url": "https://opencollective.com/unts"
       }
     },
+    "node_modules/@radix-ui/primitive": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.2.tgz",
+      "integrity": "sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA=="
+    },
+    "node_modules/@radix-ui/react-accordion": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.2.4.tgz",
+      "integrity": "sha512-SGCxlSBaMvEzDROzyZjsVNzu9XY5E28B3k8jOENyrz6csOv/pG1eHyYfLJai1n9tRjwG61coXDhfpgtxKxUv5g==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-collapsible": "1.1.4",
+        "@radix-ui/react-collection": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.3",
+        "@radix-ui/react-use-controllable-state": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collapsible": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.4.tgz",
+      "integrity": "sha512-u7LCw1EYInQtBNLGjm9nZ89S/4GcvX1UR5XbekEgnQae2Hkpq39ycJ1OhdeN1/JDfVNG91kWaWoest127TaEKQ==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-presence": "1.1.3",
+        "@radix-ui/react-primitive": "2.0.3",
+        "@radix-ui/react-use-controllable-state": "1.1.1",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collection": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.3.tgz",
+      "integrity": "sha512-mM2pxoQw5HJ49rkzwOs7Y6J4oYH22wS8BfK2/bBxROlI4xuR0c4jEenQP63LlTlDkO6Buj2Vt+QYAYcOgqtrXA==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.0.3",
+        "@radix-ui/react-slot": "1.2.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
+      "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-context": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-direction": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.1.tgz",
+      "integrity": "sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-id": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.1.tgz",
+      "integrity": "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-presence": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.3.tgz",
+      "integrity": "sha512-IrVLIhskYhH3nLvtcBLQFZr61tBG7wx7O3kEmdzcYwRGAEBmBicGGL7ATzNgruYJ3xBTbuzEEq9OXJM3PAX3tA==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.3.tgz",
+      "integrity": "sha512-Pf/t/GkndH7CQ8wE2hbkXA+WyZ83fhQQn5DDmwDiDo6AwN/fhaH8oqZ0jRjMrO2iaMhDi6P1HRx6AZwyMinY1g==",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slot": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.0.tgz",
+      "integrity": "sha512-ujc+V6r0HNDviYqIK3rW4ffgYiZ8g5DEHrGJVk4x7kTlLXRDILnKX9vAUYeIsLOoDpDJ0ujpqMkjH4w2ofuo6w==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",
+      "integrity": "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.1.tgz",
+      "integrity": "sha512-YnEXIy8/ga01Y1PN0VfaNH//MhA91JlEGVBDxDzROqwrAtG5Yr2QGEPz8A/rJA3C7ZAHryOYGaUv8fLSW2H/mg==",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
+      "integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@remix-run/router": {
       "version": "1.23.0",
       "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.0.tgz",
@@ -1158,7 +1414,7 @@
       "version": "18.3.6",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.6.tgz",
       "integrity": "sha512-nf22//wEbKXusP6E9pfOCDwFdHAX4u172eaJI4YkDRQEZiorm6KfYnSC2SWLDMVWUOWPERmJnN0ujeAfTBLvrw==",
-      "dev": true,
+      "devOptional": true,
       "peerDependencies": {
         "@types/react": "^18.0.0"
       }
diff --git a/package.json b/package.json
index b330c6f..7b30841 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "@mdx-js/loader": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
     "@next/mdx": "^15.1.6",
+    "@radix-ui/react-accordion": "^1.2.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "copy-to-clipboard": "^3.3.3",
diff --git a/src/components/About.tsx b/src/components/About.tsx
index 4843a96..0b33ba9 100644
--- a/src/components/About.tsx
+++ b/src/components/About.tsx
@@ -1,9 +1,132 @@
+import { FlagTriangleRight, GitCommitVertical, Signpost } from 'lucide-react';
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@/components/ui/Accordion';
 import BlurFade, { BLUR_FADE_DELAY } from '@/components/ui/BlurFade';
-import Highlight from '@/components/ui/Highlighter';
 import LinkWithArrow from '@/components/ui/LinkWithArrow';
+import StrikeHighlight from '@/components/ui/StrikeHighlighter';
 import { cn } from '@/lib/utils';
 
+type CustomAccordionItemDetails = {
+  value: string;
+  iconTitle: React.ReactNode;
+  title: string;
+  iconBody: React.ReactNode;
+  body: React.ReactNode[];
+};
+
+const AccordionForExtraInfo = (items: CustomAccordionItemDetails[] = []) => {
+  const AccordionItemCustom = ({
+    value,
+    iconTitle,
+    title,
+    iconBody,
+    body,
+  }: CustomAccordionItemDetails) => {
+    return (
+      <AccordionItem value={value}>
+        <AccordionTrigger className="text-black dark:text-white">
+          <span className="flex items-center gap-2">
+            {iconTitle}
+            <span>{title}</span>
+          </span>
+        </AccordionTrigger>
+        <AccordionContent className="ps-7 text-base">
+          <ul className="list-inside list-none space-y-1 text-gray-700 dark:text-gray-300">
+            {body.map((node, idx) => (
+              <li key={idx}>
+                {iconBody}
+                {node}
+              </li>
+            ))}
+          </ul>
+        </AccordionContent>
+      </AccordionItem>
+    );
+  };
+
+  return (
+    <Accordion type="single" collapsible>
+      {items.map((item, idx) => (
+        <AccordionItemCustom key={idx} {...item} />
+      ))}
+    </Accordion>
+  );
+};
+
 const About = () => {
+  const findMeDoingBody = [
+    <>
+      <StrikeHighlight text="re-watching" color="pink" /> any one of these series:{' '}
+      <StrikeHighlight text="Breaking Bad" color="pink" />,{' '}
+      <StrikeHighlight text="Silicon Valley" color="pink" />,{' '}
+      <StrikeHighlight text="South Park" color="pink" /> and{' '}
+      <StrikeHighlight text="The Office" color="pink" />.
+    </>,
+  ];
+  const thoseOfYouCuriousBody = [
+    <>
+      The favicon is a <StrikeHighlight text="4-hypercube graph" color="cyan" /> made via Python,
+      using NetworkX and Matplotlib. Check the{' '}
+      <LinkWithArrow
+        href="/icon.ico"
+        target="_blank"
+        className="mr-1 text-orange-500 hover:underline hover:underline-offset-2"
+      >
+        image
+      </LinkWithArrow>
+      out, learn{' '}
+      <LinkWithArrow
+        href="https://en.wikipedia.org/wiki/Hypercube_graph"
+        target="_blank"
+        className="mr-1 text-blue-violet-500 hover:underline hover:underline-offset-2"
+      >
+        more
+      </LinkWithArrow>{' '}
+      about hypercube graphs & here is the{' '}
+      <LinkWithArrow
+        href="https://github.com/steadyfall/steadyfall.github.io/blob/main/hypercube/generate.py"
+        target="_blank"
+        className="mr-1 text-firefly-600 hover:underline hover:underline-offset-2 dark:text-firefly-500"
+      >
+        code
+      </LinkWithArrow>{' '}
+      to generate it yourself.
+    </>,
+  ];
+  const itemsForExtraInfo: CustomAccordionItemDetails[] = [
+    {
+      value: 'findme',
+      iconTitle: (
+        <>
+          <Signpost className="h-4 w-4 opacity-90 md:h-5 md:w-5" aria-hidden="true" />
+        </>
+      ),
+      title: 'You can find me:',
+      iconBody: (
+        <>
+          <GitCommitVertical className="mr-1 inline-block h-4 w-4 align-middle md:h-5 md:w-5" />
+        </>
+      ),
+      body: findMeDoingBody,
+    },
+    {
+      value: 'curious',
+      iconTitle: (
+        <>
+          <FlagTriangleRight className="h-4 w-4 opacity-90 md:h-5 md:w-5" aria-hidden="true" />
+        </>
+      ),
+      title: 'For those of you curious:',
+      iconBody: <></>,
+      body: thoseOfYouCuriousBody,
+    },
+  ];
+
   return (
     <section id="about" className="mb-12">
       <BlurFade delay={BLUR_FADE_DELAY * 3}>
@@ -19,70 +142,17 @@ const About = () => {
       <BlurFade delay={BLUR_FADE_DELAY * 4}>
         <div className="text-gray-700 dark:text-gray-300">
           <p className="mb-2">
-            I am a <Highlight text="software developer" color="red" /> based in{' '}
-            <Highlight text="Toronto" color="red" /> and currently a <Highlight text="junior" />{' '}
-            pursuing a
-            <Highlight text="Computational Mathematics" /> major at the{' '}
-            <Highlight text="University of Waterloo" />. I am passionate about tech and innovation,
-            always exploring the{' '}
+            I am a <StrikeHighlight text="software developer" color="red" /> based in{' '}
+            <StrikeHighlight text="Toronto" color="red" /> and currently a{' '}
+            <StrikeHighlight text="junior" /> pursuing a{' '}
+            <StrikeHighlight text="Computational Mathematics" /> major at the{' '}
+            <StrikeHighlight text="University of Waterloo" />. I am passionate about tech and
+            innovation, always exploring the{' '}
             <span className="underline underline-offset-4">
               intersection of software development and AI.
             </span>
           </p>
-          {/* <p className="mb-2">
-              Outside of academics and professional career, I enjoy contributing to open-source projects, working on side projects, participating in hackathons and playing
-              table tennis, football, cricket and badminton. I also like to travel & explore new places, cuisines & restaurants.
-            </p> */}
-          {/* <div className="inline-flex flex-wrap gap-x-0.5 gap-y-1 mb-2 ">
-              <span>You can find me</span> <Highlight text="re-watching" color="pink"/> <span>any one of these TV series:</span>
-              <Highlight text="Silicon Valley" color="pink"/>,
-              <Highlight text="South Park" color="pink"/>,
-              <Highlight text="The Office" color="pink"/>,
-              <Highlight text="The Big Bang Theory" color="pink"/>,
-              <Highlight text="Suits" color="pink"/>,
-              <Highlight text="Brooklyn 9-9" color="pink"/>,
-              <Highlight text="How I Met Your Mother" color="pink"/>,
-              <Highlight text="Impractical Jokers" color="pink"/>.
-            </div> */}
-          <p className="mb-2">
-            You can find me <Highlight text="re-watching" color="pink" /> any one of these
-            series:&nbsp;
-            <Highlight text="Breaking Bad" color="pink" />
-            ,&nbsp;
-            <Highlight text="Silicon Valley" color="pink" />
-            ,&nbsp;
-            <Highlight text="South Park" color="pink" /> and{' '}
-            <Highlight text="The Office" color="pink" />.
-          </p>
-          <p className="mb-2">
-            For those of you curious, the favicon is a{' '}
-            <Highlight text="4-hypercube graph" color="cyan" /> made via Python, using NetworkX and
-            Matplotlib. Check the{' '}
-            <LinkWithArrow
-              href="/icon.ico"
-              target="_blank"
-              className="mr-1 text-orange-500 hover:underline hover:underline-offset-2"
-            >
-              image
-            </LinkWithArrow>
-            out, learn{' '}
-            <LinkWithArrow
-              href="https://en.wikipedia.org/wiki/Hypercube_graph"
-              target="_blank"
-              className="mr-1 text-blue-violet-500 hover:underline hover:underline-offset-2"
-            >
-              more
-            </LinkWithArrow>{' '}
-            about hypercube graphs & here is the{' '}
-            <LinkWithArrow
-              href="https://github.com/steadyfall/steadyfall.github.io/blob/main/hypercube/generate.py"
-              target="_blank"
-              className="mr-1 text-firefly-600 hover:underline hover:underline-offset-2 dark:text-firefly-500"
-            >
-              code
-            </LinkWithArrow>{' '}
-            to generate it yourself.
-          </p>
+          <div className="mb-2">{AccordionForExtraInfo(itemsForExtraInfo)}</div>
         </div>
       </BlurFade>
     </section>
diff --git a/src/components/Tiles/ExperienceTile.tsx b/src/components/Tiles/ExperienceTile.tsx
index 167034f..7b65b29 100644
--- a/src/components/Tiles/ExperienceTile.tsx
+++ b/src/components/Tiles/ExperienceTile.tsx
@@ -1,4 +1,4 @@
-import { Icon } from '@iconify/react';
+import { ChevronRight } from 'lucide-react';
 
 import { RecordTile } from '@/components/Tiles/RecordTile';
 
@@ -24,9 +24,7 @@ export function ExperienceTile({
       <ul className="list-inside list-none space-y-1 text-gray-700 dark:text-gray-300">
         {responsibilities.map((responsibility, index) => (
           <li key={index}>
-            <span className="mr-1 inline-block align-middle">
-              {<Icon icon={'icons8:angle-right'} inline={true} />}
-            </span>
+            {<ChevronRight className="mr-0.25 inline-block h-4 w-4 align-middle md:h-5 md:w-5" />}
             {responsibility}
           </li>
         ))}
diff --git a/src/components/ui/Accordion.tsx b/src/components/ui/Accordion.tsx
new file mode 100644
index 0000000..52ca804
--- /dev/null
+++ b/src/components/ui/Accordion.tsx
@@ -0,0 +1,54 @@
+'use client';
+
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item ref={ref} className={cn('', className)} {...props} />
+));
+AccordionItem.displayName = 'AccordionItem';
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        'flex flex-1 items-center justify-between py-2 transition-all hover:underline hover:underline-offset-2',
+        // "[&[data-state=open]>svg]:rotate-180",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      {/* <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" /> */}
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn('pb-4 pt-0', className)}>{children}</div>
+  </AccordionPrimitive.Content>
+));
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
diff --git a/src/components/ui/Highlighter.tsx b/src/components/ui/Highlighter.tsx
index af02f99..ed0a6cd 100644
--- a/src/components/ui/Highlighter.tsx
+++ b/src/components/ui/Highlighter.tsx
@@ -22,20 +22,21 @@ interface HighlightProps {
  *
  */
 export default function Highlight({ text, color = 'yellow' }: HighlightProps) {
-  let colorClass: string;
+  const colors: Record<string, string> = {
+    cyan: 'bg-cyan-200 dark:bg-cyan-500/30',
+    pink: 'bg-[#ffa7ee] dark:bg-[#f73ed2]/30',
+    'slate-blue': 'bg-[#a0a8ff] dark:bg-[#675bf9]/50',
+    red: 'bg-[#ffa0a0] dark:bg-[#f83b3b]/50',
+    yellow: 'bg-[#ffff77] dark:bg-[#fce913]/30',
+  };
 
-  if (color === 'cyan') {
-    colorClass = 'bg-cyan-200 dark:bg-cyan-500/30';
-  } else if (color === 'pink' || color === 'violet-web') {
-    colorClass = 'bg-[#ffa7ee] dark:bg-[#f73ed2]/30';
-  } else if (color === 'slate-blue') {
-    colorClass = 'bg-[#a0a8ff] dark:bg-[#675bf9]/50';
-  } else if (color === 'red') {
-    colorClass = 'bg-[#ffa0a0] dark:bg-[#f83b3b]/50';
-  } else {
-    // This covers "yellow", "lemon", "laser-lemon", and the default case
-    colorClass = 'bg-[#ffff77] dark:bg-[#fce913]/30';
+  if (color === 'violet-web') {
+    color = 'pink';
+  } else if (color === 'lemon' || color === 'laser-lemon') {
+    color = 'yellow';
   }
 
-  return <span className={cn('rounded px-1', colorClass)}>{text}</span>;
+  const colorClass = colors[color];
+
+  return <span className={cn('rounded-sm px-[0.1em]', colorClass)}>{text}</span>;
 }
diff --git a/src/components/ui/StrikeHighlighter.tsx b/src/components/ui/StrikeHighlighter.tsx
new file mode 100644
index 0000000..fbf35ed
--- /dev/null
+++ b/src/components/ui/StrikeHighlighter.tsx
@@ -0,0 +1,52 @@
+import { cn } from '@/lib/utils';
+
+interface StrikeHighlightProps {
+  text: string;
+  color?:
+    | 'cyan'
+    | 'pink'
+    | 'violet-web'
+    | 'slate-blue'
+    | 'red'
+    | 'yellow'
+    | 'lemon'
+    | 'laser-lemon';
+}
+
+/**
+ * Highlights the given text with the highlighter of specified color with a strikethrough effect.
+ *
+ * @param text - the text to be highlighted
+ * @param color - the color of the highlighter [cyan,pink,violet-web,slate-blue,red,yellow,lemon,laser-lemon]
+ * @returns Returns a `span` element with the highlighted text of specified color with strikethrough effect.
+ *
+ */
+export default function StrikeHighlight({ text, color = 'yellow' }: StrikeHighlightProps) {
+  const colors: Record<string, string> = {
+    cyan: 'bg-cyan-200 dark:bg-cyan-500/45',
+    pink: 'bg-[#ffa7ee] dark:bg-[#f73ed2]/50',
+    'slate-blue': 'bg-[#a0a8ff] dark:bg-[#675bf9]/50',
+    red: 'bg-[#ffa0a0] dark:bg-[#f83b3b]/45',
+    yellow: 'bg-[#ffff77] dark:bg-[#fce913]/35',
+  };
+
+  if (color === 'violet-web') {
+    color = 'pink';
+  } else if (color === 'lemon' || color === 'laser-lemon') {
+    color = 'yellow';
+  }
+
+  const colorClass = colors[color];
+
+  return (
+    <span className="relative inline-block">
+      <span
+        className={cn(
+          'absolute left-0 right-0 top-[60%] h-[0.6em] -translate-y-1/2 px-[0.1em]',
+          colorClass,
+        )}
+      ></span>
+      <span className="z-2 relative">{text}</span>
+    </span>
+  );
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 4385a4e..fa13336 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -160,6 +160,20 @@ const config: Config = {
           '950': '#013219',
         },
       },
+      keyframes: {
+        'accordion-down': {
+          from: { height: '0' },
+          to: { height: 'var(--radix-accordion-content-height)' },
+        },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: '0' },
+        },
+      },
+      animation: {
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+      },
     },
   },
   plugins: [],