diff --git a/package-lock.json b/package-lock.json
index 89fbbbad..cf9df4f0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -280,7 +280,6 @@
       "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-5.40.0.tgz",
       "integrity": "sha512-nlr/MMgoLNUHcfWC5Ns2ENrzKx9x51orPc6wJ8Ignv1DsrUmKm0LUih+Tj3J+kxYofzqQIQRU495d4xn3ozMbg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@algolia/client-common": "5.40.0",
         "@algolia/requester-browser-xhr": "5.40.0",
@@ -441,7 +440,6 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.4.tgz",
       "integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.3",
@@ -2276,7 +2274,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -2299,7 +2296,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -2409,7 +2405,6 @@
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
       "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -2831,7 +2826,6 @@
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
       "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -3819,7 +3813,6 @@
       "resolved": "https://registry.npmjs.org/@docusaurus/plugin-content-docs/-/plugin-content-docs-3.9.2.tgz",
       "integrity": "sha512-C5wZsGuKTY8jEYsqdxhhFOe1ZDjH0uIYJ9T/jebHwkyxqnr4wW0jTkB72OMqNjsoQRcb0JN3PcSeTwFlVgzCZg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@docusaurus/core": "3.9.2",
         "@docusaurus/logger": "3.9.2",
@@ -5928,7 +5921,6 @@
       "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz",
       "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@emotion/memoize": "^0.8.1"
       }
@@ -6201,7 +6193,6 @@
       "resolved": "https://registry.npmjs.org/@firebase/app/-/app-0.9.13.tgz",
       "integrity": "sha512-GfiI1JxJ7ecluEmDjPzseRXk/PX31hS7+tjgBopL7XjB2hLUdR+0FTMXy2Q3/hXezypDvU6or7gVFizDESrkXw==",
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "@firebase/component": "0.6.4",
         "@firebase/logger": "0.4.0",
@@ -6259,7 +6250,6 @@
       "resolved": "https://registry.npmjs.org/@firebase/app-compat/-/app-compat-0.2.13.tgz",
       "integrity": "sha512-j6ANZaWjeVy5zg6X7uiqh6lM6o3n3LD1+/SJFNs9V781xyryyZWXe+tmnWNWPkP086QfJoNkWN9pMQRqSG4vMg==",
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "@firebase/app": "0.9.13",
         "@firebase/component": "0.6.4",
@@ -6272,8 +6262,7 @@
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/@firebase/app-types/-/app-types-0.9.0.tgz",
       "integrity": "sha512-AeweANOIo0Mb8GiYm3xhTEBVCmPwTYAu9Hcd2qSkLuga/6+j9b1Jskl5bpiSQWy9eJ/j5pavxj6eYogmnuzm+Q==",
-      "license": "Apache-2.0",
-      "peer": true
+      "license": "Apache-2.0"
     },
     "node_modules/@firebase/auth": {
       "version": "0.23.2",
@@ -6683,7 +6672,6 @@
       "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.3.tgz",
       "integrity": "sha512-DY02CRhOZwpzO36fHpuVysz6JZrscPiBXD0fXp6qSrL9oNOx5KWICKdR95C0lSITzxp0TZosVyHqzatE8JbcjA==",
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.1.0"
       }
@@ -7300,7 +7288,6 @@
       "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-3.1.1.tgz",
       "integrity": "sha512-f++rKLQgUVYDAtECQ6fn/is15GkEH9+nZPM3MS0RcxVqoTfawHvDlSCH7JbMhAM6uJ32v3eXLvLmLvjGu7PTQw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/mdx": "^2.0.0"
       },
@@ -7963,7 +7950,6 @@
       "resolved": "https://registry.npmjs.org/@svgr/core/-/core-8.1.0.tgz",
       "integrity": "sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/core": "^7.21.3",
         "@svgr/babel-preset": "8.1.0",
@@ -8480,8 +8466,7 @@
         }
       ],
       "hasInstallScript": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@tsparticles/interaction-external-attract": {
       "version": "3.9.1",
@@ -9434,7 +9419,6 @@
       "integrity": "sha512-/EEvYBdT3BflCWvTMO7YkYBHVE9Ci6XdqZciZANQgKpaiDRGOLIlRo91jbTNRQjgPFWVaRxcYc0luVNFitz57A==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "@types/react": "^19.2.0"
       }
@@ -9612,7 +9596,6 @@
       "integrity": "sha512-BnOroVl1SgrPLywqxyqdJ4l3S2MsKVLDVxZvjI1Eoe8ev2r3kGDo+PcMihNmDE+6/KjkTubSJnmqGZZjQSBq/g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.46.2",
         "@typescript-eslint/types": "8.46.2",
@@ -10071,7 +10054,6 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -10157,7 +10139,6 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
       "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -10203,7 +10184,6 @@
       "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-5.40.0.tgz",
       "integrity": "sha512-a9aIL2E3Z7uYUPMCmjMFFd5MWhn+ccTubEvnMy7rOTZCB62dXBJtz0R5BZ/TPuX3R9ocBsgWuAbGWQ+Ph4Fmlg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@algolia/abtesting": "1.6.0",
         "@algolia/client-abtesting": "5.40.0",
@@ -10962,7 +10942,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.9",
         "caniuse-lite": "^1.0.30001746",
@@ -11317,7 +11296,6 @@
       "resolved": "https://registry.npmjs.org/chevrotain/-/chevrotain-11.0.3.tgz",
       "integrity": "sha512-ci2iJH6LeIkvP9eJW6gpueU8cnZhv85ELY8w8WiFtNjMHA5ad6pQLaJo9mEly/9qUyCpvqX8/POVUTf18/HFdw==",
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "@chevrotain/cst-dts-gen": "11.0.3",
         "@chevrotain/gast": "11.0.3",
@@ -12208,7 +12186,6 @@
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
       "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -12539,7 +12516,6 @@
       "resolved": "https://registry.npmjs.org/cytoscape/-/cytoscape-3.33.1.tgz",
       "integrity": "sha512-iJc4TwyANnOGR1OmWhsS9ayRS3s+XQ185FmuHObThD+5AeJCakAAbWv8KimMTt08xCCLNgneQwFp+JRJOr9qGQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10"
       }
@@ -12961,7 +12937,6 @@
       "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
       "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
       "license": "ISC",
-      "peer": true,
       "engines": {
         "node": ">=12"
       }
@@ -13555,8 +13530,7 @@
       "version": "8.6.0",
       "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.6.0.tgz",
       "integrity": "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/embla-carousel-autoplay": {
       "version": "8.6.0",
@@ -13942,7 +13916,6 @@
       "integrity": "sha512-t5aPOpmtJcZcz5UJyY2GbvpDlsK5E8JqRqoKtfiKE3cNh437KIqfJr3A3AKf5k64NPx6d0G3dno6XDY05PqPtw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -14775,7 +14748,6 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -14903,7 +14875,6 @@
       "resolved": "https://registry.npmjs.org/firebase/-/firebase-9.23.0.tgz",
       "integrity": "sha512-/4lUVY0lUvBDIaeY1q6dUYhS8Sd18Qb9CgWkPZICUo9IXpJNCEagfNZXBBFCkMTTN5L5gx2Hjr27y21a9NzUcA==",
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "@firebase/analytics": "0.10.0",
         "@firebase/analytics-compat": "0.2.6",
@@ -21110,7 +21081,6 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -21884,7 +21854,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -22788,7 +22757,6 @@
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
       "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -23402,7 +23370,6 @@
       "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "prettier": "bin/prettier.cjs"
       },
@@ -23809,7 +23776,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -23822,7 +23788,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.2"
@@ -23888,7 +23853,6 @@
       "resolved": "https://registry.npmjs.org/@docusaurus/react-loadable/-/react-loadable-6.0.0.tgz",
       "integrity": "sha512-YMMxTUQV/QFSnbgrP3tjDzLHRg7vsbMn8e9HAa8o/1iXoiomo48b7sk/kkmWEuWNDPJVlKSJRB6Y2fHqdJk+SQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/react": "*"
       },
@@ -23917,7 +23881,6 @@
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz",
       "integrity": "sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.12.13",
         "history": "^4.9.0",
@@ -26413,8 +26376,7 @@
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "license": "0BSD",
-      "peer": true
+      "license": "0BSD"
     },
     "node_modules/tunnel-agent": {
       "version": "0.6.0",
@@ -26589,7 +26551,6 @@
       "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==",
       "devOptional": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -26984,7 +26945,6 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -27257,7 +27217,6 @@
       "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.102.1.tgz",
       "integrity": "sha512-7h/weGm9d/ywQ6qzJ+Xy+r9n/3qgp/thalBbpOi5i223dPXKi04IBtqPN9nTd+jBc7QKfvDbaBnFipYp4sJAUQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/eslint-scope": "^3.7.7",
         "@types/estree": "^1.0.8",
@@ -28076,7 +28035,6 @@
       "resolved": "https://registry.npmjs.org/zod/-/zod-4.1.12.tgz",
       "integrity": "sha512-JInaHOamG8pt5+Ey8kGmdcAcg3OL9reK8ltczgHTAwNhMys/6ThXHityHxVV2p3fkw/c+MAvBHFVYHFZDmjMCQ==",
       "license": "MIT",
-      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
diff --git a/src/components/blogCarousel/blogCard.tsx b/src/components/blogCarousel/blogCard.tsx
index 562fa5c9..1f3db7db 100644
--- a/src/components/blogCarousel/blogCard.tsx
+++ b/src/components/blogCarousel/blogCard.tsx
@@ -1,14 +1,10 @@
 "use client";
 import * as React from "react";
-import { useState } from "react";
-import { motion } from "framer-motion";
 import Link from "@docusaurus/Link";
 import { Card, CardContent } from "../ui/card";
 import { getAuthorNames } from "../../utils/authors";
 
 const BlogCard = ({ type, date, title, content, imageUrl, id, authors }) => {
-  const [isHovered, setIsHovered] = useState(false);
-
   if (!id || !type) {
     return <div>data not fetched properly, imageId and entryId not found</div>;
   }
@@ -36,19 +32,7 @@ const BlogCard = ({ type, date, title, content, imageUrl, id, authors }) => {
   const category = getCategory(title);
 
   return (
-    <motion.div
-      initial={{ opacity: 0, y: 40, scale: 0.95 }}
-      animate={{ opacity: 1, y: 0, scale: 1 }}
-      transition={{ duration: 0.6, ease: "easeOut" }}
-      whileHover={{
-        y: -8,
-        scale: 1.02,
-        transition: { duration: 0.4, ease: "easeOut" },
-      }}
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
-      className="relative h-full overflow-hidden transition-all duration-300"
-    >
+    <div className="relative h-full overflow-hidden">
       <Link
         to={`/blog/${id}`}
         className="text-decoration-none block h-full"
@@ -87,7 +71,7 @@ const BlogCard = ({ type, date, title, content, imageUrl, id, authors }) => {
           </div>
         </div>
       </Link>
-    </motion.div>
+    </div>
   );
 };
 
diff --git a/src/components/blogCarousel/blogCarousel.css b/src/components/blogCarousel/blogCarousel.css
index bc9923a0..b40238c6 100644
--- a/src/components/blogCarousel/blogCarousel.css
+++ b/src/components/blogCarousel/blogCarousel.css
@@ -1,16 +1,14 @@
-/* Blog Carousel Card Styles - Matching Blog Page Design */
+/* Blog Carousel Card Styles - Simple and Clean */
 
 /* Article Card */
 .article-card {
   background: white;
-  border-radius: 20px;
+  border-radius: 12px;
   overflow: hidden;
-  box-shadow:
-    0 4px 20px rgba(0, 0, 0, 0.08),
-    0 1px 3px rgba(0, 0, 0, 0.1);
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  transition: box-shadow 0.2s ease;
   position: relative;
-  border: 1px solid rgba(255, 255, 255, 0.8);
+  border: 1px solid rgba(0, 0, 0, 0.1);
   height: 100%;
   display: flex;
   flex-direction: column;
@@ -19,176 +17,87 @@
 [data-theme="dark"] .article-card {
   background: #242526;
   border: 1px solid rgba(74, 85, 104, 0.3);
-  box-shadow:
-    0 4px 20px rgba(0, 0, 0, 0.4),
-    0 1px 3px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
 }
 
-.article-card::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: linear-gradient(
-    135deg,
-    rgba(99, 102, 241, 0.02) 0%,
-    rgba(168, 85, 247, 0.02) 100%
-  );
-  opacity: 0;
-  transition: opacity 0.3s ease;
-  pointer-events: none;
+.article-card:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
 
-.article-card:hover::before {
-  opacity: 1;
+[data-theme="dark"] .article-card:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
 }
 
 .card-category {
   position: absolute;
-  top: 20px;
-  left: 20px;
-  background: linear-gradient(
-    135deg,
-    rgba(255, 255, 255, 0.95) 0%,
-    rgba(255, 255, 255, 0.9) 100%
-  );
+  top: 12px;
+  left: 12px;
+  background: rgba(255, 255, 255, 0.9);
   color: #6366f1;
-  padding: 8px 16px;
-  border-radius: 25px;
-  font-size: 12px;
-  font-weight: 700;
+  padding: 6px 12px;
+  border-radius: 16px;
+  font-size: 11px;
+  font-weight: 600;
   z-index: 2;
-  backdrop-filter: blur(20px);
+  backdrop-filter: blur(8px);
   border: 1px solid rgba(99, 102, 241, 0.1);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  transition: all 0.2s ease;
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }
 
 [data-theme="dark"] .card-category {
-  background: linear-gradient(
-    135deg,
-    rgba(36, 37, 38, 0.95) 0%,
-    rgba(26, 32, 44, 0.9) 100%
-  );
+  background: rgba(36, 37, 38, 0.9);
   color: #a78bfa;
   border: 1px solid rgba(167, 139, 250, 0.2);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-}
-
-.article-card:hover .card-category {
-  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
-  color: white;
-  transform: scale(1.05);
-}
-
-[data-theme="dark"] .article-card:hover .card-category {
-  background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
-  color: #1a202c;
 }
 
 .card-image {
   height: 200px;
   overflow: hidden;
   position: relative;
-  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
+  background: #f1f5f9;
   flex-shrink: 0;
 }
 
-.card-image::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: linear-gradient(
-    135deg,
-    rgba(99, 102, 241, 0.1) 0%,
-    rgba(168, 85, 247, 0.1) 100%
-  );
-  opacity: 0;
-  transition: opacity 0.3s ease;
-  z-index: 1;
-}
-
-.article-card:hover .card-image::before {
-  opacity: 1;
-}
-
 .card-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-  filter: brightness(1) saturate(1);
-}
-
-.article-card:hover .card-image img {
-  transform: scale(1.08);
-  filter: brightness(1.1) saturate(1.2);
+  transition: transform 0.2s ease;
 }
 
 .card-content {
-  padding: 24px;
-  position: relative;
-  background: linear-gradient(
-    135deg,
-    rgba(255, 255, 255, 0.95) 0%,
-    rgba(248, 250, 252, 0.95) 100%
-  );
+  padding: 20px;
   flex: 1;
   display: flex;
   flex-direction: column;
 }
 
-[data-theme="dark"] .card-content {
-  background: linear-gradient(
-    135deg,
-    rgba(36, 37, 38, 0.95) 0%,
-    rgba(26, 32, 44, 0.95) 100%
-  );
-}
-
 .card-title {
-  font-size: 18px;
-  font-weight: 700;
+  font-size: 16px;
+  font-weight: 600;
   color: #1e293b;
-  margin: 0 0 12px 0;
+  margin: 0 0 10px 0;
   line-height: 1.3;
-  letter-spacing: -0.01em;
-  transition: color 0.2s ease;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
 
-.article-card:hover .card-title {
-  color: #6366f1;
-}
-
 [data-theme="dark"] .card-title {
   color: #f1f5f9;
 }
 
-[data-theme="dark"] .article-card:hover .card-title {
-  color: #a78bfa;
-}
-
 .card-description {
   font-size: 14px;
   color: #64748b;
-  line-height: 1.6;
-  margin: 0 0 20px 0;
+  line-height: 1.5;
+  margin: 0 0 16px 0;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
-  font-weight: 400;
   flex: 1;
 }
 
@@ -200,33 +109,13 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 16px;
-  padding-bottom: 16px;
-  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
-  position: relative;
-  gap: 12px;
+  padding-top: 12px;
+  border-top: 1px solid rgba(226, 232, 240, 0.8);
+  gap: 10px;
 }
 
 [data-theme="dark"] .card-meta {
-  border-bottom-color: rgba(74, 85, 104, 0.3);
-}
-
-.card-meta::before {
-  content: "";
-  position: absolute;
-  bottom: -1px;
-  left: 0;
-  width: 40px;
-  height: 2px;
-  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
-  border-radius: 1px;
-  opacity: 0;
-  transition: all 0.3s ease;
-}
-
-.article-card:hover .card-meta::before {
-  opacity: 1;
-  width: 60px;
+  border-top-color: rgba(74, 85, 104, 0.3);
 }
 
 .card-author {
@@ -238,151 +127,93 @@
 }
 
 .author-avatar {
-  width: 28px;
-  height: 28px;
+  width: 24px;
+  height: 24px;
   border-radius: 50%;
-  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+  background: #6366f1;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 14px;
+  font-size: 12px;
   color: white;
   font-weight: 600;
-  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
   flex-shrink: 0;
-  transition: all 0.3s ease;
-}
-
-.author-avatar:hover {
-  transform: scale(1.1);
-  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
 }
 
 .author-name {
   font-size: 12px;
   color: #475569;
-  font-weight: 600;
+  font-weight: 500;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  transition: color 0.2s ease;
-}
-
-.author-name:hover {
-  color: #6366f1;
 }
 
 [data-theme="dark"] .author-name {
   color: #cbd5e1;
 }
 
-[data-theme="dark"] .author-name:hover {
-  color: #a78bfa;
-}
-
 .card-read-time {
   font-size: 11px;
   color: #94a3b8;
   font-weight: 500;
-  background: rgba(148, 163, 184, 0.1);
-  padding: 4px 8px;
-  border-radius: 12px;
   flex-shrink: 0;
 }
 
 [data-theme="dark"] .card-read-time {
   color: #64748b;
-  background: rgba(100, 116, 139, 0.2);
 }
 
 .card-read-more {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
+  display: inline-block;
   color: #6366f1;
   text-decoration: none;
   font-size: 13px;
-  font-weight: 700;
-  padding: 10px 16px;
-  border-radius: 12px;
-  background: linear-gradient(
-    135deg,
-    rgba(99, 102, 241, 0.1) 0%,
-    rgba(139, 92, 246, 0.1) 100%
-  );
-  border: 1px solid rgba(99, 102, 241, 0.2);
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  position: relative;
-  overflow: hidden;
-  margin-top: auto;
-}
-
-.card-read-more::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
-  transition: left 0.3s ease;
-  z-index: -1;
+  font-weight: 600;
+  margin-top: 12px;
 }
 
 .card-read-more:hover {
-  color: white;
-  transform: translateY(-2px);
-  box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3);
-}
-
-.card-read-more:hover::before {
-  left: 0;
+  color: #4f46e5;
 }
 
 [data-theme="dark"] .card-read-more {
   color: #a78bfa;
-  background: linear-gradient(
-    135deg,
-    rgba(167, 139, 250, 0.1) 0%,
-    rgba(192, 132, 252, 0.1) 100%
-  );
-  border-color: rgba(167, 139, 250, 0.2);
 }
 
 [data-theme="dark"] .card-read-more:hover {
-  color: white;
+  color: #c084fc;
 }
 
-/* Responsive adjustments for carousel cards */
+/* Responsive adjustments */
 @media (max-width: 768px) {
   .card-image {
     height: 160px;
   }
 
   .card-content {
-    padding: 20px;
+    padding: 16px;
   }
 
   .card-title {
-    font-size: 16px;
-    margin-bottom: 10px;
+    font-size: 15px;
+    margin-bottom: 8px;
   }
 
   .card-description {
     font-size: 13px;
-    margin-bottom: 16px;
+    margin-bottom: 12px;
     -webkit-line-clamp: 2;
   }
 
   .card-meta {
-    margin-bottom: 12px;
-    padding-bottom: 12px;
+    padding-top: 10px;
   }
 
   .author-avatar {
-    width: 24px;
-    height: 24px;
-    font-size: 12px;
+    width: 22px;
+    height: 22px;
+    font-size: 11px;
   }
 
   .author-name {
@@ -391,66 +222,9 @@
 
   .card-read-time {
     font-size: 10px;
-    padding: 3px 6px;
   }
 
   .card-read-more {
     font-size: 12px;
-    padding: 8px 12px;
   }
 }
-
-/* Smooth page transitions */
-.page-transition-enter {
-  opacity: 0;
-  transform: translateY(20px);
-}
-
-.page-transition-enter-active {
-  opacity: 1;
-  transform: translateY(0);
-  transition:
-    opacity 0.6s ease-out,
-    transform 0.6s ease-out;
-}
-
-.page-transition-exit {
-  opacity: 1;
-  transform: translateY(0);
-}
-
-.page-transition-exit-active {
-  opacity: 0;
-  transform: translateY(-20px);
-  transition:
-    opacity 0.4s ease-in,
-    transform 0.4s ease-in;
-}
-
-/* Blog Carousel Section Enhancements */
-.blog-carousel-section {
-  background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 50%, #e8ebff 100%);
-  padding: 5px;
-  position: relative;
-  overflow: hidden;
-}
-
-[data-theme="dark"] .blog-carousel-section {
-  background: linear-gradient(135deg, #1b1b1d 0%, #121212 50%, #1a202c 100%);
-}
-
-/* Enhanced Focus States */
-.article-card:focus-within {
-  outline: 2px solid #6366f1;
-  outline-offset: 4px;
-  border-radius: 24px;
-}
-
-/* Smooth Link Transitions */
-a[href*="/blog/"] {
-  transition: all 0.3s ease;
-}
-
-a[href*="/blog/"]:hover {
-  text-decoration: none;
-}
diff --git a/src/pages/blogs/blogs-new.css b/src/pages/blogs/blogs-new.css
index b568ff6c..075dd92f 100644
--- a/src/pages/blogs/blogs-new.css
+++ b/src/pages/blogs/blogs-new.css
@@ -1,1778 +1,632 @@
-/* Blog Page Styles - recode hive Design */
+/* GitHub-Inspired Blog Page Styles */
 * {
   box-sizing: border-box;
 }
 
-.blog-page {
-  font-family: "Inter", sans-serif;
-  background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 50%, #e8ebff 100%);
+/* Main Container */
+.github-blog-page {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
+  background: #ffffff;
   min-height: 100vh;
-  animation: pageSlideIn 0.8s ease-out;
-  position: relative;
-  overflow-x: hidden;
-}
-
-/* Dark theme support */
-[data-theme="dark"] .blog-page {
-  background: linear-gradient(135deg, #1b1b1d 0%, #121212 50%, #1a202c 100%);
-}
-
-@keyframes pageSlideIn {
-  0% {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* Navbar adjustments */
-:global(.navbar) {
-  backdrop-filter: blur(20px) !important;
-  background: rgba(255, 255, 255, 0.95) !important;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
-  transition: all 0.3s ease !important;
-  height: 60px !important;
-  min-height: 60px !important;
-}
-
-:global(.navbar--fixed-top) {
-  animation: navbarSlideDown 0.6s ease-out;
 }
 
-@keyframes navbarSlideDown {
-  0% {
-    transform: translateY(-100%);
-    opacity: 0;
-  }
-  100% {
-    transform: translateY(0);
-    opacity: 1;
-  }
+[data-theme="dark"] .github-blog-page {
+  background: #0d1117;
 }
 
-/* Hero Section */
-.blog-hero-section {
-  padding: 80px 20px 60px;
+/* Hero Section - GitHub Style */
+.github-hero {
+  background: #f6f8fa;
+  border-bottom: 1px solid #d0d7de;
+  padding: 48px 24px;
   text-align: center;
-  background: linear-gradient(
-    135deg,
-    #f8f9ff 0%,
-    #f0f2ff 30%,
-    #e8ebff 70%,
-    #f0f4ff 100%
-  );
-  position: relative;
-  overflow: hidden;
-  min-height: 50vh;
-  display: flex;
-  align-items: center;
-  margin-top: -10px;
-}
-
-[data-theme="dark"] .blog-hero-section {
-  background: linear-gradient(
-    135deg,
-    #1b1b1d 0%,
-    #121212 30%,
-    #1a202c 70%,
-    #242526 100%
-  );
-}
-
-.blog-hero-section::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background:
-    radial-gradient(
-      circle at 20% 30%,
-      rgba(99, 102, 241, 0.15) 0%,
-      transparent 40%
-    ),
-    radial-gradient(
-      circle at 80% 20%,
-      rgba(168, 85, 247, 0.12) 0%,
-      transparent 45%
-    ),
-    radial-gradient(
-      circle at 40% 80%,
-      rgba(236, 72, 153, 0.1) 0%,
-      transparent 50%
-    );
-  pointer-events: none;
-  animation: gradientShift 8s ease-in-out infinite;
-}
-
-.blog-hero-section::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%236366f1' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
-  pointer-events: none;
-  animation: float 20s linear infinite;
-}
-
-@keyframes gradientShift {
-  0%,
-  100% {
-    background:
-      radial-gradient(
-        circle at 20% 30%,
-        rgba(99, 102, 241, 0.15) 0%,
-        transparent 40%
-      ),
-      radial-gradient(
-        circle at 80% 20%,
-        rgba(168, 85, 247, 0.12) 0%,
-        transparent 45%
-      ),
-      radial-gradient(
-        circle at 40% 80%,
-        rgba(236, 72, 153, 0.1) 0%,
-        transparent 50%
-      );
-  }
-  50% {
-    background:
-      radial-gradient(
-        circle at 80% 70%,
-        rgba(99, 102, 241, 0.12) 0%,
-        transparent 45%
-      ),
-      radial-gradient(
-        circle at 20% 80%,
-        rgba(168, 85, 247, 0.15) 0%,
-        transparent 40%
-      ),
-      radial-gradient(
-        circle at 60% 20%,
-        rgba(236, 72, 153, 0.1) 0%,
-        transparent 50%
-      );
-  }
 }
 
-@keyframes float {
-  0% {
-    transform: translateY(0px) translateX(0px);
-  }
-  33% {
-    transform: translateY(-10px) translateX(5px);
-  }
-  66% {
-    transform: translateY(5px) translateX(-5px);
-  }
-  100% {
-    transform: translateY(0px) translateX(0px);
-  }
+[data-theme="dark"] .github-hero {
+  background: #161b22;
+  border-bottom: 1px solid #30363d;
 }
 
-/* Floating Particles */
-.floating-particles {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  pointer-events: none;
-  z-index: 0;
+.github-hero-content {
+  max-width: 1280px;
+  margin: 0 auto;
 }
 
-.particle {
-  position: absolute;
-  border-radius: 50%;
-  opacity: 0.6;
-  animation-timing-function: ease-in-out;
-  animation-iteration-count: infinite;
-}
-
-.particle-1 {
-  width: 8px;
-  height: 8px;
-  background: linear-gradient(45deg, #6366f1, #8b5cf6);
-  top: 20%;
-  left: 10%;
-  animation: particleFloat1 8s infinite;
-}
-
-.particle-2 {
-  width: 12px;
-  height: 12px;
-  background: linear-gradient(45deg, #a855f7, #ec4899);
-  top: 60%;
-  left: 80%;
-  animation: particleFloat2 10s infinite;
-}
-
-.particle-3 {
-  width: 6px;
-  height: 6px;
-  background: linear-gradient(45deg, #ec4899, #f59e0b);
-  top: 30%;
-  left: 70%;
-  animation: particleFloat3 12s infinite;
-}
-
-.particle-4 {
-  width: 10px;
-  height: 10px;
-  background: linear-gradient(45deg, #f59e0b, #10b981);
-  top: 80%;
-  left: 20%;
-  animation: particleFloat4 9s infinite;
-}
-
-.particle-5 {
-  width: 14px;
-  height: 14px;
-  background: linear-gradient(45deg, #10b981, #06b6d4);
-  top: 15%;
-  left: 90%;
-  animation: particleFloat5 11s infinite;
-}
-
-.particle-6 {
-  width: 7px;
-  height: 7px;
-  background: linear-gradient(45deg, #06b6d4, #6366f1);
-  top: 70%;
-  left: 5%;
-  animation: particleFloat6 13s infinite;
-}
-
-@keyframes particleFloat1 {
-  0%,
-  100% {
-    transform: translateY(0px) translateX(0px) rotate(0deg);
-  }
-  25% {
-    transform: translateY(-30px) translateX(20px) rotate(90deg);
-  }
-  50% {
-    transform: translateY(-10px) translateX(-15px) rotate(180deg);
-  }
-  75% {
-    transform: translateY(20px) translateX(10px) rotate(270deg);
-  }
+.github-hero-title {
+  font-size: 40px;
+  font-weight: 600;
+  color: #24292f;
+  margin: 0 0 12px 0;
+  line-height: 1.25;
 }
 
-@keyframes particleFloat2 {
-  0%,
-  100% {
-    transform: translateY(0px) translateX(0px) rotate(0deg);
-  }
-  33% {
-    transform: translateY(25px) translateX(-20px) rotate(120deg);
-  }
-  66% {
-    transform: translateY(-15px) translateX(25px) rotate(240deg);
-  }
+[data-theme="dark"] .github-hero-title {
+  color: #e6edf3;
 }
 
-@keyframes particleFloat3 {
-  0%,
-  100% {
-    transform: translateY(0px) translateX(0px) rotate(0deg);
-  }
-  50% {
-    transform: translateY(-40px) translateX(-30px) rotate(180deg);
-  }
+.github-hero-subtitle {
+  font-size: 16px;
+  color: #57606a;
+  margin: 0;
+  line-height: 1.5;
 }
 
-@keyframes particleFloat4 {
-  0%,
-  100% {
-    transform: translateY(0px) translateX(0px) rotate(0deg);
-  }
-  25% {
-    transform: translateY(-20px) translateX(30px) rotate(90deg);
-  }
-  50% {
-    transform: translateY(15px) translateX(-10px) rotate(180deg);
-  }
-  75% {
-    transform: translateY(-5px) translateX(-25px) rotate(270deg);
-  }
+[data-theme="dark"] .github-hero-subtitle {
+  color: #8b949e;
 }
 
-@keyframes particleFloat5 {
-  0%,
-  100% {
-    transform: translateY(0px) translateX(0px) rotate(0deg);
-  }
-  40% {
-    transform: translateY(30px) translateX(-35px) rotate(144deg);
-  }
-  80% {
-    transform: translateY(-25px) translateX(15px) rotate(288deg);
-  }
+/* Main Container with Sidebar */
+.github-blog-container {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 48px 24px;
+  display: grid;
+  grid-template-columns: 280px 1fr;
+  gap: 48px;
+  align-items: start;
 }
 
-@keyframes particleFloat6 {
-  0%,
-  100% {
-    transform: translateY(0px) translateX(0px) rotate(0deg);
-  }
-  30% {
-    transform: translateY(-35px) translateX(25px) rotate(108deg);
-  }
-  60% {
-    transform: translateY(20px) translateX(-20px) rotate(216deg);
-  }
-  90% {
-    transform: translateY(-10px) translateX(35px) rotate(324deg);
+@media (max-width: 1024px) {
+  .github-blog-container {
+    grid-template-columns: 1fr;
+    gap: 32px;
   }
 }
 
-.blog-hero-container {
-  max-width: 900px;
-  margin: 0 auto;
-  position: relative;
-  z-index: 1;
-}
-
-.hero-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 24px;
+/* Sidebar */
+.github-sidebar {
   position: relative;
 }
 
-.hero-content::before {
-  content: "";
-  position: absolute;
-  top: -60px;
-  left: -80px;
-  width: 120px;
-  height: 120px;
-  background: linear-gradient(45deg, #6366f1, #a855f7);
-  border-radius: 50%;
-  opacity: 0.08;
-  animation: floatLeft 6s ease-in-out infinite;
-  z-index: -1;
-}
-
-.hero-content::after {
-  content: "";
-  position: absolute;
-  top: 100px;
-  right: -60px;
-  width: 80px;
-  height: 80px;
-  background: linear-gradient(45deg, #ec4899, #f59e0b);
-  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
-  opacity: 0.08;
-  animation: floatRight 8s ease-in-out infinite;
-  z-index: -1;
-}
-
-@keyframes floatLeft {
-  0%,
-  100% {
-    transform: translateY(0px) rotate(0deg);
-  }
-  50% {
-    transform: translateY(-25px) rotate(180deg);
-  }
+.sidebar-sticky {
+  position: sticky;
+  top: 80px;
 }
 
-@keyframes floatRight {
-  0%,
-  100% {
-    transform: translateY(0px) rotate(0deg);
-  }
-  50% {
-    transform: translateY(20px) rotate(-180deg);
+@media (max-width: 1024px) {
+  .sidebar-sticky {
+    position: relative;
+    top: 0;
   }
 }
 
-.blog-main-title {
-  font-size: 64px;
-  font-weight: 900;
-  margin: 0;
-  line-height: 1.1;
-  color: #1e293b;
-  letter-spacing: -0.02em;
-  animation: titleSlideUp 1s ease-out;
-}
-
-[data-theme="dark"] .blog-main-title {
-  color: #f1f5f9;
+.sidebar-title {
+  font-size: 20px;
+  font-weight: 600;
+  color: #24292f;
+  margin: 0 0 16px 0;
+  line-height: 1.25;
 }
 
-@keyframes titleSlideUp {
-  0% {
-    opacity: 0;
-    transform: translateY(30px);
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
+[data-theme="dark"] .sidebar-title {
+  color: #e6edf3;
 }
 
-.gradient-text {
-  background: linear-gradient(
-    135deg,
-    #6366f1 0%,
-    #a855f7 30%,
-    #ec4899 70%,
-    #f59e0b 100%
-  );
-  background-size: 300% 300%;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  animation: gradientMove 4s ease-in-out infinite;
+/* Sidebar Search */
+.sidebar-search {
   position: relative;
+  margin-bottom: 24px;
 }
 
-.gradient-text::before {
-  content: attr(data-text);
+.sidebar-search-icon {
   position: absolute;
-  top: 0;
-  left: 0;
-  background: linear-gradient(
-    135deg,
-    #6366f1 0%,
-    #a855f7 30%,
-    #ec4899 70%,
-    #f59e0b 100%
-  );
-  background-size: 300% 300%;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  filter: blur(1px);
-  opacity: 0.5;
-  z-index: -1;
-  animation: gradientMove 4s ease-in-out infinite reverse;
-}
-
-@keyframes gradientMove {
-  0%,
-  100% {
-    background-position: 0% 50%;
-  }
-  50% {
-    background-position: 100% 50%;
-  }
-}
-
-.blog-main-subtitle {
-  font-size: 18px;
-  color: #64748b;
-  margin: 0;
-  line-height: 1.7;
-  max-width: 700px;
-  font-weight: 400;
-}
-
-[data-theme="dark"] .blog-main-subtitle {
-  color: #94a3b8;
-}
-
-.hero-stats {
-  display: flex;
-  align-items: center;
-  gap: 32px;
-  margin-top: 16px;
-  padding: 20px 32px;
-  background: rgba(255, 255, 255, 0.8);
-  border: 1px solid rgba(99, 102, 241, 0.1);
-  border-radius: 16px;
-  backdrop-filter: blur(10px);
-  box-shadow: 0 8px 32px rgba(99, 102, 241, 0.1);
-}
-
-.stat-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 4px;
+  left: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 16px;
+  height: 16px;
+  color: #57606a;
+  pointer-events: none;
 }
 
-.stat-number {
-  font-size: 24px;
-  font-weight: 700;
-  color: #1e293b;
-  line-height: 1;
+[data-theme="dark"] .sidebar-search-icon {
+  color: #8b949e;
 }
 
-.stat-label {
+.sidebar-search-input {
+  width: 100%;
+  padding: 8px 12px 8px 36px;
   font-size: 14px;
-  color: #64748b;
-  font-weight: 500;
+  line-height: 20px;
+  color: #24292f;
+  background-color: #f6f8fa;
+  border: 1px solid #d0d7de;
+  border-radius: 6px;
+  outline: none;
+  transition: all 0.15s ease;
 }
 
-.stat-divider {
-  width: 1px;
-  height: 32px;
-  background: linear-gradient(
-    to bottom,
-    transparent,
-    rgba(99, 102, 241, 0.2),
-    transparent
-  );
+[data-theme="dark"] .sidebar-search-input {
+  color: #e6edf3;
+  background-color: #0d1117;
+  border-color: #30363d;
 }
 
-/* Category Icons */
-.blog-category-icons {
-  display: flex;
-  justify-content: center;
-  gap: 40px;
-  margin: 40px 0;
-  flex-wrap: wrap;
+.sidebar-search-input:focus {
+  background-color: #ffffff;
+  border-color: #0969da;
+  box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.1);
 }
 
-.category-icon {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  cursor: pointer;
-  transition: transform 0.2s ease;
+[data-theme="dark"] .sidebar-search-input:focus {
+  background-color: #161b22;
+  border-color: #1f6feb;
+  box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.1);
 }
 
-.category-icon:hover {
-  transform: translateY(-2px);
+.sidebar-search-input::placeholder {
+  color: #57606a;
 }
 
-.icon-wrapper {
-  width: 48px;
-  height: 48px;
-  border-radius: 12px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: rgba(255, 255, 255, 0.8);
-  border: 1px solid rgba(99, 102, 241, 0.1);
-  transition: all 0.2s ease;
+[data-theme="dark"] .sidebar-search-input::placeholder {
+  color: #8b949e;
 }
 
-.icon-wrapper svg {
-  width: 24px;
-  height: 24px;
-  color: #6366f1;
+/* Sidebar Categories */
+.sidebar-categories {
+  margin-bottom: 32px;
+  padding-bottom: 24px;
+  border-bottom: 1px solid #d0d7de;
 }
 
-/* React Icons styling */
-.icon-wrapper {
-  color: #6366f1;
+[data-theme="dark"] .sidebar-categories {
+  border-bottom-color: #30363d;
 }
 
-.icon-wrapper.development {
-  background: rgba(99, 102, 241, 0.1);
-  color: #6366f1;
+.sidebar-categories-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #24292f;
+  margin: 0 0 8px 0;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
 }
 
-.icon-wrapper.design {
-  background: rgba(236, 72, 153, 0.1);
-  color: #ec4899;
+[data-theme="dark"] .sidebar-categories-title {
+  color: #e6edf3;
 }
 
-.icon-wrapper.ai-tech {
-  background: rgba(168, 85, 247, 0.1);
-  color: #a855f7;
+.sidebar-category-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
 }
 
-.icon-wrapper.innovation {
-  background: rgba(245, 158, 11, 0.1);
-  color: #f59e0b;
+.sidebar-category-list li {
+  margin: 0;
 }
 
-.category-icon span {
-  font-size: 12px;
-  color: #64748b;
+.sidebar-category-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 8px 12px;
+  font-size: 14px;
   font-weight: 500;
-}
-
-.explore-articles-btn {
-  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
-  color: white;
+  color: #57606a;
+  background: transparent;
   border: none;
-  padding: 14px 32px;
-  border-radius: 25px;
-  font-size: 16px;
-  font-weight: 600;
+  border-radius: 6px;
+  text-align: left;
   cursor: pointer;
-  transition: all 0.2s ease;
-  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
-  margin-top: 16px;
-}
-
-.explore-articles-btn:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);
-}
-
-/* Latest Articles Section */
-.latest-articles-section {
-  padding: 60px 20px 80px;
-  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
-  position: relative;
-  overflow: hidden;
-  margin-top: -20px;
-}
-
-[data-theme="dark"] .latest-articles-section {
-  background: linear-gradient(135deg, #121212 0%, #1a202c 100%);
-}
-
-.latest-articles-section::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background:
-    radial-gradient(
-      circle at 10% 20%,
-      rgba(99, 102, 241, 0.05) 0%,
-      transparent 50%
-    ),
-    radial-gradient(
-      circle at 90% 80%,
-      rgba(168, 85, 247, 0.05) 0%,
-      transparent 50%
-    );
-  pointer-events: none;
-}
-
-.articles-container {
-  max-width: 1200px;
-  margin: 0 auto;
-  position: relative;
-  z-index: 1;
-  animation: contentSlideUp 1s ease-out 0.3s both;
-}
-
-@keyframes contentSlideUp {
-  0% {
-    opacity: 0;
-    transform: translateY(30px);
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.section-header {
-  text-align: center;
-  margin-bottom: 64px;
-  position: relative;
-}
-
-.section-title {
-  font-size: 48px;
-  font-weight: 800;
-  color: #1e293b;
-  margin: 0 0 24px 0;
-  line-height: 1.1;
-  letter-spacing: -0.02em;
-  position: relative;
-}
-
-[data-theme="dark"] .section-title {
-  color: #f1f5f9;
-}
-
-.section-title::after {
-  content: "";
-  position: absolute;
-  bottom: -12px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 80px;
-  height: 4px;
-  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
-  border-radius: 2px;
-}
-
-.section-subtitle {
-  font-size: 18px;
-  color: #64748b;
-  margin: 0;
-  line-height: 1.6;
-  max-width: 600px;
-  margin: 0 auto;
-  font-weight: 400;
+  transition: all 0.15s ease;
 }
 
-[data-theme="dark"] .section-subtitle {
-  color: #94a3b8;
+[data-theme="dark"] .sidebar-category-item {
+  color: #8b949e;
 }
 
-/* Search Container */
-.search-container {
-  max-width: 600px;
-  margin: 30px auto 30px;
-  position: relative;
+.sidebar-category-item:hover {
+  background-color: #f6f8fa;
+  color: #24292f;
 }
 
-.search-container::before {
-  content: "";
-  position: absolute;
-  top: -20px;
-  left: -20px;
-  right: -20px;
-  bottom: -20px;
-  background: linear-gradient(45deg, #6366f1, #a855f7, #ec4899, #f59e0b);
-  background-size: 400% 400%;
-  border-radius: 32px;
-  opacity: 0.08;
-  animation: searchGlow 6s ease-in-out infinite;
-  z-index: -1;
-}
-
-@keyframes searchGlow {
-  0%,
-  100% {
-    background-position: 0% 50%;
-  }
-  50% {
-    background-position: 100% 50%;
-  }
+[data-theme="dark"] .sidebar-category-item:hover {
+  background-color: #161b22;
+  color: #e6edf3;
 }
 
-.search-wrapper {
-  position: relative;
-  display: flex;
-  align-items: center;
-  background: rgba(255, 255, 255, 0.95);
-  backdrop-filter: blur(30px);
-  border: 2px solid transparent;
-  border-radius: 12px;
-  padding: 0;
-  box-shadow:
-    0 20px 60px rgba(0, 0, 0, 0.08),
-    0 8px 32px rgba(99, 102, 241, 0.1),
-    0 0 0 1px rgba(255, 255, 255, 0.2) inset;
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-  background-image:
-    linear-gradient(white, white),
-    linear-gradient(135deg, #6366f1, #a855f7, #ec4899);
-  background-origin: border-box;
-  background-clip: padding-box, border-box;
-  animation: searchFloat 4s ease-in-out infinite;
-}
-
-[data-theme="dark"] .search-wrapper {
-  background: rgba(36, 37, 38, 0.95);
-  box-shadow:
-    0 20px 60px rgba(0, 0, 0, 0.4),
-    0 8px 32px rgba(99, 102, 241, 0.2),
-    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
-  background-image:
-    linear-gradient(rgba(36, 37, 38, 0.95), rgba(36, 37, 38, 0.95)),
-    linear-gradient(135deg, #6366f1, #a855f7, #ec4899);
-}
-
-@keyframes searchFloat {
-  0%,
-  100% {
-    transform: translateY(0px);
-  }
-  50% {
-    transform: translateY(-3px);
-  }
+.sidebar-category-item.active {
+  background-color: #ddf4ff;
+  color: #0969da;
+  font-weight: 600;
 }
 
-.search-wrapper:focus-within {
-  transform: translateY(-8px) scale(1.02);
-  box-shadow:
-    0 32px 80px rgba(0, 0, 0, 0.12),
-    0 16px 48px rgba(99, 102, 241, 0.2),
-    0 0 0 1px rgba(255, 255, 255, 0.3) inset;
-  animation-play-state: paused;
+[data-theme="dark"] .sidebar-category-item.active {
+  background-color: rgba(31, 111, 235, 0.15);
+  color: #58a6ff;
 }
 
-.search-icon {
-  position: relative;
-  left: auto;
-  top: auto;
-  transform: none;
-  width: 24px;
-  height: 24px;
-  color: #757575;
-  flex-shrink: 0;
-  display: flex;
+.category-count {
+  display: inline-flex;
   align-items: center;
   justify-content: center;
-  pointer-events: none;
-  stroke: #757575;
-}
-
-@keyframes iconPulse {
-  0%,
-  100% {
-    opacity: 0.8;
-    transform: scale(1);
-  }
-  50% {
-    opacity: 1;
-    transform: scale(1.05);
-  }
-}
-
-[data-theme="dark"] .search-icon {
-  color: #757575;
-  stroke: white;
-}
-
-.search-wrapper:focus-within .search-icon {
-  color: #757575;
-  animation-play-state: paused;
-  transform: translateY(-50%) scale(1.1);
-}
-
-.search-input {
-  flex: 1;
-  border: none;
-  outline: none;
-  font-size: 17px;
-  color: #1e293b;
-  background: transparent;
+  min-width: 20px;
+  padding: 0 6px;
+  font-size: 12px;
   font-weight: 500;
-  letter-spacing: 0.01em;
-  transition: all 0.2s ease;
-  padding: 16px 48px 16px 48px;
+  line-height: 18px;
+  color: #57606a;
+  background-color: rgba(175, 184, 193, 0.2);
+  border-radius: 2em;
 }
 
-.search-input:focus {
-  color: #0f172a;
+[data-theme="dark"] .category-count {
+  color: #8b949e;
+  background-color: rgba(139, 148, 158, 0.2);
 }
 
-[data-theme="dark"] .search-input {
-  color: #f1f5f9;
+.sidebar-category-item.active .category-count {
+  color: #0969da;
+  background-color: rgba(9, 105, 218, 0.15);
 }
 
-[data-theme="dark"] .search-input:focus {
-  color: #ffffff;
+[data-theme="dark"] .sidebar-category-item.active .category-count {
+  color: #58a6ff;
+  background-color: rgba(88, 166, 255, 0.15);
 }
 
-.search-input::placeholder {
-  color: #94a3b8;
-  font-weight: 400;
-  font-size: 14px;
+/* Sidebar Table of Contents */
+.sidebar-toc {
+  margin-bottom: 24px;
 }
 
-.clear-search-icon {
-  position: absolute;
-  right: 16px;
-  width: 24px;
-  height: 24px;
-  color: #758090;
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 6px;
-  border-radius: 50%;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  overflow: hidden;
-}
-
-.clear-search-icon::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: linear-gradient(45deg, #ef4444, #f97316);
-  border-radius: 50%;
-  opacity: 0;
-  transform: scale(0);
-  transition: all 0.3s ease;
-}
-
-.clear-search-icon:hover {
-  color: white;
-  transform: scale(1.1);
-}
-
-.clear-search-icon:hover::before {
-  opacity: 1;
-  transform: scale(1);
+.sidebar-toc-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #24292f;
+  margin: 0 0 8px 0;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
 }
 
-.clear-search-icon svg {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  z-index: 1;
-  transition: transform 0.2s ease;
-  stroke-width: 2.5;
+[data-theme="dark"] .sidebar-toc-title {
+  color: #e6edf3;
 }
 
-.clear-search-icon:hover svg {
-  transform: rotate(90deg);
+.sidebar-toc-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
 }
 
-.search-decoration {
-  display: none;
+.sidebar-toc-list li {
+  margin: 0 0 4px 0;
 }
 
-/* Search Results Info */
-.search-results-info {
-  text-align: center;
-  margin: 32px 0 24px;
-  padding: 16px 24px;
-  background: linear-gradient(
-    135deg,
-    rgba(99, 102, 241, 0.05) 0%,
-    rgba(168, 85, 247, 0.05) 100%
-  );
-  border-radius: 12px;
-  border: 1px solid rgba(99, 102, 241, 0.1);
-  max-width: 500px;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.search-results-info p {
-  font-size: 15px;
-  color: #475569;
-  margin: 0;
-  font-weight: 600;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
+.sidebar-toc-link {
+  display: block;
+  padding: 6px 12px;
+  font-size: 14px;
+  color: #57606a;
+  text-decoration: none;
+  border-radius: 6px;
+  transition: all 0.15s ease;
+  line-height: 1.4;
 }
 
-.search-results-info p::before {
-  content: "🔍";
-  font-size: 16px;
+[data-theme="dark"] .sidebar-toc-link {
+  color: #8b949e;
 }
 
-/* No Results State */
-.no-results {
-  grid-column: 1 / -1;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 300px;
-  text-align: center;
+.sidebar-toc-link:hover {
+  background-color: #f6f8fa;
+  color: #24292f;
+  text-decoration: none;
 }
 
-.no-results-content {
-  max-width: 400px;
+[data-theme="dark"] .sidebar-toc-link:hover {
+  background-color: #161b22;
+  color: #e6edf3;
 }
 
-.no-results-icon {
-  font-size: 48px;
-  margin-bottom: 16px;
-  opacity: 0.6;
+/* Main Content */
+.github-main-content {
+  min-width: 0;
 }
 
-.no-results h3 {
-  font-size: 24px;
-  font-weight: 600;
-  color: #1e293b;
-  margin: 0 0 8px 0;
+.github-search-results {
+  margin-bottom: 24px;
+  padding: 12px 16px;
+  background-color: #ddf4ff;
+  border: 1px solid #54aeff;
+  border-radius: 6px;
 }
 
-.no-results p {
-  font-size: 16px;
-  color: #64748b;
-  margin: 0 0 24px 0;
-  line-height: 1.5;
+[data-theme="dark"] .github-search-results {
+  background-color: rgba(31, 111, 235, 0.15);
+  border-color: #1f6feb;
 }
 
-.clear-search-btn {
-  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
-  color: white;
-  border: none;
-  padding: 12px 24px;
-  border-radius: 8px;
+.github-search-results p {
+  margin: 0;
   font-size: 14px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
+  color: #0969da;
+  font-weight: 500;
 }
 
-.clear-search-btn:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
+[data-theme="dark"] .github-search-results p {
+  color: #58a6ff;
 }
 
-/* Articles Grid */
-.articles-grid {
+/* Blog Grid */
+.github-blog-grid {
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
+  grid-template-columns: 1fr;
   gap: 32px;
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 20px;
-}
-
-/* Large Desktop - 3 columns */
-@media (min-width: 1200px) {
-  .articles-grid {
-    grid-template-columns: repeat(3, 1fr);
-    gap: 40px;
-    max-width: 1400px;
-  }
 }
 
-/* Desktop and Tablet - 2 columns */
-@media (max-width: 1199px) and (min-width: 768px) {
-  .articles-grid {
+@media (min-width: 768px) {
+  .github-blog-grid {
     grid-template-columns: repeat(2, 1fr);
-    gap: 32px;
-    max-width: 900px;
-  }
-}
-
-/* Small Tablet - 2 columns with smaller gap */
-@media (max-width: 767px) and (min-width: 576px) {
-  .articles-grid {
-    grid-template-columns: repeat(2, 1fr);
-    gap: 20px;
-    padding: 0 16px;
-    max-width: 600px;
-  }
-}
-
-/* Mobile - 1 column */
-@media (max-width: 575px) {
-  .articles-grid {
-    grid-template-columns: 1fr;
-    gap: 24px;
-    padding: 0 16px;
-    max-width: 400px;
   }
 }
 
-/* Article Card */
-.article-card {
-  background: white;
-  border-radius: 20px;
+/* Blog Card */
+.github-blog-card {
+  background: #ffffff;
+  border: 1px solid #d0d7de;
+  border-radius: 6px;
   overflow: hidden;
-  box-shadow:
-    0 4px 20px rgba(0, 0, 0, 0.08),
-    0 1px 3px rgba(0, 0, 0, 0.1);
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-  position: relative;
-  border: 1px solid rgba(255, 255, 255, 0.8);
-  animation: cardSlideIn 0.6s ease-out both;
-}
-
-[data-theme="dark"] .article-card {
-  background: #242526;
-  border: 1px solid rgba(74, 85, 104, 0.3);
-  box-shadow:
-    0 4px 20px rgba(0, 0, 0, 0.4),
-    0 1px 3px rgba(0, 0, 0, 0.3);
-}
-
-.article-card:nth-child(1) {
-  animation-delay: 0.1s;
-}
-.article-card:nth-child(2) {
-  animation-delay: 0.2s;
-}
-.article-card:nth-child(3) {
-  animation-delay: 0.3s;
-}
-.article-card:nth-child(4) {
-  animation-delay: 0.4s;
-}
-.article-card:nth-child(5) {
-  animation-delay: 0.5s;
-}
-.article-card:nth-child(6) {
-  animation-delay: 0.6s;
-}
-
-@keyframes cardSlideIn {
-  0% {
-    opacity: 0;
-    transform: translateY(40px) scale(0.95);
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}
-
-.article-card::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: linear-gradient(
-    135deg,
-    rgba(99, 102, 241, 0.02) 0%,
-    rgba(168, 85, 247, 0.02) 100%
-  );
-  opacity: 0;
-  transition: opacity 0.3s ease;
-  pointer-events: none;
-}
-
-.article-card:hover {
-  transform: translateY(-8px) scale(1.02);
-  box-shadow:
-    0 20px 60px rgba(0, 0, 0, 0.15),
-    0 8px 20px rgba(99, 102, 241, 0.1);
-}
-
-[data-theme="dark"] .article-card:hover {
-  box-shadow:
-    0 20px 60px rgba(0, 0, 0, 0.6),
-    0 8px 20px rgba(99, 102, 241, 0.2);
-}
-
-.article-card:hover::before {
-  opacity: 1;
-}
-
-.card-category {
-  position: absolute;
-  top: 20px;
-  left: 20px;
-  background: linear-gradient(
-    135deg,
-    rgba(255, 255, 255, 0.95) 0%,
-    rgba(255, 255, 255, 0.9) 100%
-  );
-  color: #6366f1;
-  padding: 8px 16px;
-  border-radius: 25px;
-  font-size: 12px;
-  font-weight: 700;
-  z-index: 2;
-  backdrop-filter: blur(20px);
-  border: 1px solid rgba(99, 102, 241, 0.1);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   transition: all 0.2s ease;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
 }
 
-[data-theme="dark"] .card-category {
-  background: linear-gradient(
-    135deg,
-    rgba(36, 37, 38, 0.95) 0%,
-    rgba(26, 32, 44, 0.9) 100%
-  );
-  color: #a78bfa;
-  border: 1px solid rgba(167, 139, 250, 0.2);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+[data-theme="dark"] .github-blog-card {
+  background: #161b22;
+  border-color: #30363d;
 }
 
-.article-card:hover .card-category {
-  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
-  color: white;
-  transform: scale(1.05);
+.github-blog-card:hover {
+  border-color: #0969da;
+  box-shadow: 0 3px 12px rgba(140, 149, 159, 0.15);
 }
 
-[data-theme="dark"] .article-card:hover .card-category {
-  background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
-  color: #1a202c;
+[data-theme="dark"] .github-blog-card:hover {
+  border-color: #1f6feb;
+  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
 }
 
-.card-image {
-  height: 220px;
-  overflow: hidden;
-  position: relative;
-  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
+.github-card-link {
+  display: block;
+  color: inherit;
+  text-decoration: none;
 }
 
-.card-image::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: linear-gradient(
-    135deg,
-    rgba(99, 102, 241, 0.1) 0%,
-    rgba(168, 85, 247, 0.1) 100%
-  );
-  opacity: 0;
-  transition: opacity 0.3s ease;
-  z-index: 1;
+.github-card-image {
+  width: 100%;
+  height: 200px;
+  overflow: hidden;
+  background: #f6f8fa;
 }
 
-.article-card:hover .card-image::before {
-  opacity: 1;
+[data-theme="dark"] .github-card-image {
+  background: #0d1117;
 }
 
-.card-image img {
+.github-card-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-  filter: brightness(1) saturate(1);
+  transition: transform 0.3s ease;
 }
 
-.article-card:hover .card-image img {
-  transform: scale(1.08);
-  filter: brightness(1.1) saturate(1.2);
+.github-blog-card:hover .github-card-image img {
+  transform: scale(1.05);
 }
 
-/* Responsive card image heights */
-@media (max-width: 767px) and (min-width: 576px) {
-  .card-image {
-    height: 160px; /* Smaller height for 2-column layout on small screens */
-  }
+.github-card-content {
+  padding: 16px;
 }
 
-@media (max-width: 575px) {
-  .card-image {
-    height: 200px; /* Larger height for single column on mobile */
-  }
+.github-card-meta {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12px;
 }
 
-.card-content {
-  padding: 28px;
-  position: relative;
-  background: linear-gradient(
-    135deg,
-    rgba(255, 255, 255, 0.95) 0%,
-    rgba(248, 250, 252, 0.95) 100%
-  );
+.github-card-category {
+  display: inline-block;
+  padding: 4px 8px;
+  font-size: 12px;
+  font-weight: 500;
+  color: #0969da;
+  background-color: #ddf4ff;
+  border-radius: 2em;
 }
 
-[data-theme="dark"] .card-content {
-  background: linear-gradient(
-    135deg,
-    rgba(36, 37, 38, 0.95) 0%,
-    rgba(26, 32, 44, 0.95) 100%
-  );
+[data-theme="dark"] .github-card-category {
+  color: #58a6ff;
+  background-color: rgba(31, 111, 235, 0.15);
 }
 
-.card-title {
-  font-size: 22px;
-  font-weight: 700;
-  color: #1e293b;
-  margin: 0 0 16px 0;
-  line-height: 1.3;
-  letter-spacing: -0.01em;
+.github-card-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #24292f;
+  margin: 0 0 8px 0;
+  line-height: 1.25;
   transition: color 0.2s ease;
 }
 
-.article-card:hover .card-title {
-  color: #6366f1;
+[data-theme="dark"] .github-card-title {
+  color: #e6edf3;
 }
 
-[data-theme="dark"] .card-title {
-  color: #f1f5f9;
+.github-blog-card:hover .github-card-title {
+  color: #0969da;
 }
 
-[data-theme="dark"] .article-card:hover .card-title {
-  color: #a78bfa;
+[data-theme="dark"] .github-blog-card:hover .github-card-title {
+  color: #58a6ff;
 }
 
-.card-description {
-  font-size: 15px;
-  color: #64748b;
-  line-height: 1.6;
-  margin: 0 0 24px 0;
+.github-card-description {
+  font-size: 14px;
+  color: #57606a;
+  line-height: 1.5;
+  margin: 0 0 16px 0;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
-  font-weight: 400;
-}
-
-[data-theme="dark"] .card-description {
-  color: #94a3b8;
-}
-
-/* Responsive card content */
-@media (max-width: 767px) and (min-width: 576px) {
-  .card-content {
-    padding: 20px;
-  }
-
-  .card-title {
-    font-size: 18px;
-    margin-bottom: 10px;
-    line-height: 1.4;
-  }
-
-  .card-description {
-    font-size: 13px;
-    margin-bottom: 16px;
-    -webkit-line-clamp: 2;
-  }
 }
 
-@media (max-width: 575px) {
-  .card-content {
-    padding: 24px;
-  }
-
-  .card-title {
-    font-size: 20px;
-    margin-bottom: 12px;
-  }
-
-  .card-description {
-    font-size: 14px;
-    margin-bottom: 20px;
-    -webkit-line-clamp: 3;
-  }
+[data-theme="dark"] .github-card-description {
+  color: #8b949e;
 }
 
-.card-meta {
+.github-card-footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 20px;
-  padding-bottom: 20px;
-  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
-  position: relative;
-  gap: 12px;
-  flex-wrap: wrap;
-}
-
-.card-meta::before {
-  content: "";
-  position: absolute;
-  bottom: -1px;
-  left: 0;
-  width: 40px;
-  height: 2px;
-  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
-  border-radius: 1px;
-  opacity: 0;
-  transition: all 0.3s ease;
+  padding-top: 16px;
+  border-top: 1px solid #d0d7de;
 }
 
-.article-card:hover .card-meta::before {
-  opacity: 1;
-  width: 80px;
+[data-theme="dark"] .github-card-footer {
+  border-top-color: #30363d;
 }
 
-.card-author {
+.github-card-author {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 8px;
   flex: 1;
-  min-width: 0; /* Allow text to shrink */
+  min-width: 0;
 }
 
-.author-avatar {
-  width: 32px;
-  height: 32px;
+.github-author-avatar {
+  width: 24px;
+  height: 24px;
   border-radius: 50%;
-  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+  background: linear-gradient(135deg, #0969da, #1f6feb);
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 16px;
-  color: white;
+  font-size: 12px;
+  color: #ffffff;
   font-weight: 600;
-  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
   flex-shrink: 0;
-  transition: all 0.3s ease;
 }
 
-.author-avatar:hover {
-  transform: scale(1.1);
-  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
-}
-
-.author-name {
+.github-author-name {
   font-size: 13px;
-  color: #475569;
-  font-weight: 600;
+  color: #57606a;
+  font-weight: 500;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: 100%;
-  position: relative;
-  cursor: help;
-  transition: color 0.2s ease;
-}
-
-.author-name:hover {
-  color: #6366f1;
 }
 
-[data-theme="dark"] .author-name {
-  color: #cbd5e1;
+[data-theme="dark"] .github-author-name {
+  color: #8b949e;
 }
 
-[data-theme="dark"] .author-name:hover {
-  color: #a78bfa;
-}
-
-/* Tooltip for author names */
-.author-name::after {
-  content: attr(data-full-name);
-  position: absolute;
-  bottom: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  background: rgba(0, 0, 0, 0.9);
-  color: white;
-  padding: 8px 12px;
-  border-radius: 6px;
-  font-size: 12px;
-  white-space: nowrap;
-  opacity: 0;
-  visibility: hidden;
-  transition: all 0.3s ease;
-  z-index: 1000;
-  pointer-events: none;
-  margin-bottom: 5px;
-}
-
-.author-name::before {
-  content: "";
-  position: absolute;
-  bottom: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  border: 5px solid transparent;
-  border-top-color: rgba(0, 0, 0, 0.9);
-  opacity: 0;
-  visibility: hidden;
-  transition: all 0.3s ease;
-  z-index: 1000;
-  pointer-events: none;
-}
-
-[data-theme="dark"] .author-name::after {
-  background: rgba(18, 18, 18, 0.95);
-  color: #f7fafc;
-}
-
-[data-theme="dark"] .author-name::before {
-  border-top-color: rgba(18, 18, 18, 0.95);
-}
-
-.author-name:hover::after,
-.author-name:hover::before {
-  opacity: 1;
-  visibility: visible;
-}
-
-.card-read-time {
+.github-card-read-time {
   font-size: 12px;
-  color: #94a3b8;
+  color: #57606a;
   font-weight: 500;
-  background: rgba(148, 163, 184, 0.1);
-  padding: 4px 8px;
-  border-radius: 12px;
-}
-
-[data-theme="dark"] .card-read-time {
-  color: #64748b;
-  background: rgba(100, 116, 139, 0.2);
+  flex-shrink: 0;
 }
 
-/* Responsive card meta */
-@media (max-width: 767px) and (min-width: 576px) {
-  .card-meta {
-    margin-bottom: 14px;
-    padding-bottom: 14px;
-  }
-
-  .author-avatar {
-    width: 26px;
-    height: 26px;
-    font-size: 11px;
-  }
-
-  .author-name {
-    font-size: 11px;
-  }
-
-  .card-read-time {
-    font-size: 10px;
-    padding: 2px 6px;
-  }
+[data-theme="dark"] .github-card-read-time {
+  color: #8b949e;
 }
 
-@media (max-width: 575px) {
-  .card-meta {
-    margin-bottom: 16px;
-    padding-bottom: 16px;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 8px;
-  }
-
-  .card-author {
-    width: 100%;
-    gap: 8px;
-  }
-
-  .author-avatar {
-    width: 28px;
-    height: 28px;
-    font-size: 12px;
-  }
-
-  .author-name {
-    font-size: 12px;
-    white-space: normal;
-    overflow: visible;
-    text-overflow: unset;
-    line-height: 1.3;
-  }
-
-  .card-read-time {
-    font-size: 11px;
-    padding: 3px 6px;
-    align-self: flex-end;
-    margin-top: -4px;
-  }
+/* No Results */
+.github-no-results {
+  grid-column: 1 / -1;
+  text-align: center;
+  padding: 64px 24px;
 }
 
-.card-read-more {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  color: #6366f1;
-  text-decoration: none;
-  font-size: 14px;
-  font-weight: 700;
-  padding: 12px 20px;
-  border-radius: 12px;
-  background: linear-gradient(
-    135deg,
-    rgba(99, 102, 241, 0.1) 0%,
-    rgba(139, 92, 246, 0.1) 100%
-  );
-  border: 1px solid rgba(99, 102, 241, 0.2);
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  position: relative;
-  overflow: hidden;
+.github-no-results-icon {
+  width: 48px;
+  height: 48px;
+  margin: 0 auto 16px;
+  color: #57606a;
 }
 
-.card-read-more::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
-  transition: left 0.3s ease;
-  z-index: -1;
+[data-theme="dark"] .github-no-results-icon {
+  color: #8b949e;
 }
 
-.card-read-more:hover {
-  color: white;
-  transform: translateY(-2px);
-  box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3);
+.github-no-results h3 {
+  font-size: 20px;
+  font-weight: 600;
+  color: #24292f;
+  margin: 0 0 8px 0;
 }
 
-.card-read-more:hover::before {
-  left: 0;
+[data-theme="dark"] .github-no-results h3 {
+  color: #e6edf3;
 }
 
-/* Responsive read more button */
-@media (max-width: 767px) and (min-width: 576px) {
-  .card-read-more {
-    font-size: 12px;
-    padding: 8px 14px;
-  }
+.github-no-results p {
+  font-size: 14px;
+  color: #57606a;
+  margin: 0 0 24px 0;
 }
 
-@media (max-width: 575px) {
-  .card-read-more {
-    font-size: 13px;
-    padding: 10px 16px;
-  }
+[data-theme="dark"] .github-no-results p {
+  color: #8b949e;
 }
 
-/* Comprehensive Responsive Design */
-
-/* Large Desktop */
-@media (min-width: 1400px) {
-  .articles-container {
-    max-width: 1400px;
-  }
-
-  .articles-grid {
-    gap: 48px;
-  }
+.github-clear-btn {
+  padding: 8px 16px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #ffffff;
+  background-color: #0969da;
+  border: 1px solid rgba(27, 31, 36, 0.15);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.15s ease;
 }
 
-/* Desktop */
-@media (max-width: 1199px) and (min-width: 992px) {
-  .section-title {
-    font-size: 42px;
-  }
-
-  .section-subtitle {
-    font-size: 17px;
-  }
+.github-clear-btn:hover {
+  background-color: #0860ca;
 }
 
-/* Tablet */
-@media (max-width: 991px) and (min-width: 768px) {
-  .blog-hero-section {
-    padding: 60px 20px 50px;
-  }
-
-  .blog-main-title {
-    font-size: 40px;
-  }
-
-  .blog-category-icons {
-    gap: 32px;
-  }
-
-  .section-title {
-    font-size: 36px;
-  }
-
-  .section-subtitle {
-    font-size: 16px;
-  }
-
-  .search-container {
-    max-width: 450px;
-  }
+[data-theme="dark"] .github-clear-btn {
+  background-color: #1f6feb;
+  border-color: rgba(240, 246, 252, 0.1);
 }
 
-/* Mobile Large */
-@media (max-width: 767px) and (min-width: 576px) {
-  .blog-hero-section {
-    padding: 50px 16px 40px;
-  }
-
-  .blog-main-title {
-    font-size: 32px;
-    margin-bottom: 20px;
-  }
-
-  .blog-main-subtitle {
-    font-size: 16px;
-    margin-bottom: 32px;
-  }
-
-  .blog-category-icons {
-    gap: 24px;
-    margin: 32px 0;
-  }
-
-  .icon-wrapper {
-    width: 44px;
-    height: 44px;
-  }
-
-  .section-title {
-    font-size: 32px;
-    margin-bottom: 20px;
-  }
-
-  .section-subtitle {
-    font-size: 15px;
-  }
-
-  .search-container {
-    max-width: 400px;
-    margin-top: 32px;
-  }
-
-  .latest-articles-section {
-    padding: 60px 16px;
-  }
+[data-theme="dark"] .github-clear-btn:hover {
+  background-color: #1a5cd7;
 }
 
-/* Mobile Small */
-@media (max-width: 575px) {
-  .blog-hero-section {
-    padding: 40px 16px 32px;
+/* Responsive */
+@media (max-width: 768px) {
+  .github-hero {
+    padding: 32px 16px;
   }
 
-  .blog-main-title {
+  .github-hero-title {
     font-size: 28px;
-    margin-bottom: 16px;
-    line-height: 1.2;
-  }
-
-  .blog-main-subtitle {
-    font-size: 15px;
-    margin-bottom: 28px;
-  }
-
-  .blog-category-icons {
-    gap: 20px;
-    margin: 28px 0;
-    flex-wrap: wrap;
-  }
-
-  .category-icon {
-    flex: 0 0 calc(50% - 10px);
-    max-width: calc(50% - 10px);
-  }
-
-  .icon-wrapper {
-    width: 40px;
-    height: 40px;
-  }
-
-  .category-icon span {
-    font-size: 11px;
   }
 
-  .explore-articles-btn {
-    padding: 12px 24px;
+  .github-hero-subtitle {
     font-size: 14px;
   }
 
-  .latest-articles-section {
-    padding: 50px 16px;
+  .github-blog-container {
+    padding: 32px 16px;
   }
 
-  .section-header {
-    margin-bottom: 48px;
-  }
-
-  .section-title {
-    font-size: 28px;
-    margin-bottom: 16px;
-  }
-
-  .section-subtitle {
-    font-size: 14px;
-  }
-
-  .search-container {
-    max-width: 100%;
-    margin-top: 28px;
-  }
-
-  .search-wrapper {
-    padding: 14px 16px;
+  .github-blog-grid {
+    grid-template-columns: 1fr;
+    gap: 24px;
   }
 
-  .search-icon {
-    width: 18px;
-    height: 18px;
-    margin-right: 12px;
+  .sidebar-categories {
+    margin-bottom: 24px;
+    padding-bottom: 16px;
   }
 
-  .search-input {
-    font-size: 15px;
+  .sidebar-toc {
+    margin-bottom: 16px;
   }
 }
diff --git a/src/pages/blogs/index.tsx b/src/pages/blogs/index.tsx
index b7edb1b9..f976b5a5 100644
--- a/src/pages/blogs/index.tsx
+++ b/src/pages/blogs/index.tsx
@@ -23,28 +23,65 @@ export default function Blogs(): React.JSX.Element {
   const { siteConfig } = useDocusaurusContext();
   const [searchTerm, setSearchTerm] = useState("");
   const [filteredBlogs, setFilteredBlogs] = useState(blogs);
+  const [selectedCategory, setSelectedCategory] = useState("All");
 
-  // Filter blogs based on search term
+  // Filter blogs based on search term and category
   useEffect(() => {
-    if (searchTerm.trim() === "") {
-      setFilteredBlogs(blogs);
-    } else {
-      const filtered = blogs.filter(
+    let filtered = blogs;
+
+    // Filter by category
+    if (selectedCategory !== "All") {
+      filtered = filtered.filter((blog) => {
+        const category = getCategory(blog.title);
+        return category === selectedCategory;
+      });
+    }
+
+    // Filter by search term
+    if (searchTerm.trim() !== "") {
+      filtered = filtered.filter(
         (blog) =>
           blog.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
-          blog.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
-          blog.tags?.some((tag) =>
-            tag.toLowerCase().includes(searchTerm.toLowerCase()),
-          ),
+          blog.description.toLowerCase().includes(searchTerm.toLowerCase()),
       );
-      setFilteredBlogs(filtered);
     }
-  }, [searchTerm]);
+
+    setFilteredBlogs(filtered);
+  }, [searchTerm, selectedCategory]);
 
   const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setSearchTerm(e.target.value);
   };
 
+  // Get category from blog title
+  const getCategory = (title: string) => {
+    if (
+      title.toLowerCase().includes("design") ||
+      title.toLowerCase().includes("ux")
+    )
+      return "Design";
+    if (
+      title.toLowerCase().includes("ai") ||
+      title.toLowerCase().includes("deepmind") ||
+      title.toLowerCase().includes("agent")
+    )
+      return "AI & Tech";
+    if (
+      title.toLowerCase().includes("github") ||
+      title.toLowerCase().includes("git")
+    )
+      return "Development";
+    if (
+      title.toLowerCase().includes("spark") ||
+      title.toLowerCase().includes("n8n") ||
+      title.toLowerCase().includes("automation")
+    )
+      return "Engineering";
+    return "Resources";
+  };
+
+  const categories = ["All", "Design", "AI & Tech", "Development", "Engineering", "Resources"];
+
   return (
     <Layout
       title={`Blogs from ${siteConfig.title}`}
@@ -63,147 +100,122 @@ export default function Blogs(): React.JSX.Element {
         />
       </Head>
 
-      <div className="blog-page">
-        {/* Background Geometric Shapes */}
-        <div className="bg-shapes">
-          <div className="bg-shape bg-shape-1"></div>
-          <div className="bg-shape bg-shape-2"></div>
-          <div className="bg-shape bg-shape-3"></div>
-          <div className="bg-shape bg-shape-4"></div>
-          <div className="bg-shape bg-shape-5"></div>
-        </div>
-
-        {/* Hero Section */}
-        <section className="blog-hero-section">
-          <div className="floating-particles">
-            <div className="particle particle-1"></div>
-            <div className="particle particle-2"></div>
-            <div className="particle particle-3"></div>
-            <div className="particle particle-4"></div>
-            <div className="particle particle-5"></div>
-            <div className="particle particle-6"></div>
-          </div>
-          <div className="blog-hero-container">
-            <div className="hero-content">
-              <h1 className="blog-main-title">
-                Welcome to <span className="gradient-text">recode hive</span>{" "}
-                Blogs
-              </h1>
-              <p className="blog-main-subtitle">
-                Discover comprehensive web development articles, tutorials, and
-                insights covering everything from HTML & CSS fundamentals to
-                advanced JavaScript, React, Node.js, Data Structures &
-                Algorithms, and cutting-edge technologies.
-              </p>
-            </div>
+      <div className="github-blog-page">
+        {/* Hero Section - GitHub Style */}
+        <section className="github-hero">
+          <div className="github-hero-content">
+            <h1 className="github-hero-title">The recode hive Blog</h1>
+            <p className="github-hero-subtitle">
+              Insights, updates, and best practices from the recode hive community
+            </p>
           </div>
         </section>
 
-        {/* Latest Articles Section */}
-        <section className="latest-articles-section">
-          <div className="articles-container">
-            <div className="section-header">
-              {/* Search Bar */}
-              <div className="search-container">
-                <div className="search-wrapper">
-                  <svg
-                    className="search-icon"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                  >
-                    <circle cx="11" cy="11" r="8"></circle>
-                    <path d="m21 21-4.35-4.35"></path>
-                  </svg>
-                  <input
-                    type="text"
-                    placeholder="Search article by title, topic"
-                    className="search-input"
-                    value={searchTerm}
-                    onChange={handleSearchChange}
-                  />
-                  {searchTerm && (
-                    <button
-                      className="clear-search-icon"
-                      onClick={() => setSearchTerm("")}
-                      aria-label="Clear search"
-                    >
-                      <svg
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
+        {/* Main Content with Sidebar */}
+        <div className="github-blog-container">
+          {/* Sidebar - Table of Contents */}
+          <aside className="github-sidebar">
+            <div className="sidebar-sticky">
+              <h3 className="sidebar-title">All articles</h3>
+              
+              {/* Search in Sidebar */}
+              <div className="sidebar-search">
+                <svg className="sidebar-search-icon" viewBox="0 0 16 16" fill="currentColor">
+                  <path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.5 4.5 0 1 0-8.997.001A4.5 4.5 0 0 0 11.5 7Z"></path>
+                </svg>
+                <input
+                  type="text"
+                  placeholder="Search articles..."
+                  className="sidebar-search-input"
+                  value={searchTerm}
+                  onChange={handleSearchChange}
+                />
+              </div>
+
+              {/* Category Filter */}
+              <div className="sidebar-categories">
+                <h4 className="sidebar-categories-title">Categories</h4>
+                <ul className="sidebar-category-list">
+                  {categories.map((category) => (
+                    <li key={category}>
+                      <button
+                        className={`sidebar-category-item ${selectedCategory === category ? "active" : ""}`}
+                        onClick={() => setSelectedCategory(category)}
                       >
-                        <line x1="18" y1="6" x2="6" y2="18"></line>
-                        <line x1="6" y1="6" x2="18" y2="18"></line>
-                      </svg>
-                    </button>
-                  )}
-                </div>
+                        {category}
+                        <span className="category-count">
+                          {category === "All" 
+                            ? blogs.length 
+                            : blogs.filter(b => getCategory(b.title) === category).length}
+                        </span>
+                      </button>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+
+              {/* Blog Table of Contents */}
+              <div className="sidebar-toc">
+                <h4 className="sidebar-toc-title">Recent posts</h4>
+                <ul className="sidebar-toc-list">
+                  {filteredBlogs.slice(0, 8).map((blog) => (
+                    <li key={blog.id}>
+                      <Link to={`/blog/${blog.slug}`} className="sidebar-toc-link">
+                        {blog.title}
+                      </Link>
+                    </li>
+                  ))}
+                </ul>
               </div>
             </div>
+          </aside>
 
-            {/* Search Results Counter */}
+          {/* Main Content Area */}
+          <main className="github-main-content">
             {searchTerm && (
-              <div className="search-results-info">
+              <div className="github-search-results">
                 <p>
                   {filteredBlogs.length > 0
-                    ? `Found ${filteredBlogs.length} article${filteredBlogs.length !== 1 ? "s" : ""} for "${searchTerm}"`
-                    : `No articles found for "${searchTerm}"`}
+                    ? `${filteredBlogs.length} article${filteredBlogs.length !== 1 ? "s" : ""} found`
+                    : `No articles found`}
                 </p>
               </div>
             )}
 
-            <div className="articles-grid">
+            <div className="github-blog-grid">
               {filteredBlogs.length > 0 ? (
-                filteredBlogs.map((blog, index) => (
-                  <BlogCard key={blog.id} blog={blog} index={index} />
+                filteredBlogs.map((blog) => (
+                  <BlogCard key={blog.id} blog={blog} getCategory={getCategory} />
                 ))
               ) : (
-                <div className="no-results">
-                  <div className="no-results-content">
-                    <div className="no-results-icon">🔍</div>
-                    <h3>No articles found</h3>
-                    <p>
-                      Try adjusting your search terms or browse all articles.
-                    </p>
-                    <button
-                      className="clear-search-btn"
-                      onClick={() => setSearchTerm("")}
-                    >
-                      Clear Search
-                    </button>
+                <div className="github-no-results">
+                  <div className="github-no-results-icon">
+                    <svg viewBox="0 0 16 16" fill="currentColor">
+                      <path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.5 4.5 0 1 0-8.997.001A4.5 4.5 0 0 0 11.5 7Z"></path>
+                    </svg>
                   </div>
+                  <h3>No articles found</h3>
+                  <p>Try adjusting your search or filters.</p>
+                  <button
+                    className="github-clear-btn"
+                    onClick={() => {
+                      setSearchTerm("");
+                      setSelectedCategory("All");
+                    }}
+                  >
+                    Clear filters
+                  </button>
                 </div>
               )}
             </div>
-          </div>
-        </section>
+          </main>
+        </div>
       </div>
     </Layout>
   );
 }
 
-const BlogCard = ({ blog, index }) => {
-  // Get category from blog title or description for demo purposes
-  const getCategory = (title) => {
-    if (
-      title.toLowerCase().includes("design") ||
-      title.toLowerCase().includes("ux")
-    )
-      return "Design";
-    if (
-      title.toLowerCase().includes("ai") ||
-      title.toLowerCase().includes("deepmind")
-    )
-      return "AI & Tech";
-    if (
-      title.toLowerCase().includes("github") ||
-      title.toLowerCase().includes("git")
-    )
-      return "Development";
-    return "Resources";
-  };
-
+const BlogCard = ({ blog, getCategory }) => {
   // Get authors for this blog post
   const getAuthors = (slug) => {
     const authors = authorMapping[slug] || ["recode hive Team"];
@@ -214,27 +226,28 @@ const BlogCard = ({ blog, index }) => {
   const authorName = getAuthors(blog.slug);
 
   return (
-    <div className="article-card">
-      <div className="card-category">{category}</div>
-      <div className="card-image">
-        <img src={blog.image} alt={blog.title} />
-      </div>
-      <div className="card-content">
-        <h3 className="card-title">{blog.title}</h3>
-        <p className="card-description">{blog.description}</p>
-        <div className="card-meta">
-          <div className="card-author">
-            <span className="author-avatar">👤</span>
-            <span className="author-name" data-full-name={authorName}>
-              {authorName}
-            </span>
+    <article className="github-blog-card">
+      <Link to={`/blog/${blog.slug}`} className="github-card-link">
+        <div className="github-card-image">
+          <img src={blog.image} alt={blog.title} loading="lazy" />
+        </div>
+        <div className="github-card-content">
+          <div className="github-card-meta">
+            <span className="github-card-category">{category}</span>
+          </div>
+          <h2 className="github-card-title">{blog.title}</h2>
+          <p className="github-card-description">{blog.description}</p>
+          <div className="github-card-footer">
+            <div className="github-card-author">
+              <div className="github-author-avatar">
+                {authorName.charAt(0).toUpperCase()}
+              </div>
+              <span className="github-author-name">{authorName}</span>
+            </div>
+            <span className="github-card-read-time">5 min read</span>
           </div>
-          <span className="card-read-time">5 min read</span>
         </div>
-        <Link to={`/blog/${blog.slug}`} className="card-read-more">
-          Read Article →
-        </Link>
-      </div>
-    </div>
+      </Link>
+    </article>
   );
 };