diff --git a/cpsquad/app/Blog-section/page.jsx b/cpsquad/app/Blog-section/page.jsx
new file mode 100644
index 0000000..a249205
--- /dev/null
+++ b/cpsquad/app/Blog-section/page.jsx
@@ -0,0 +1,42 @@
+"use client";
+
+import Link  from "next/link";
+import { Button } from "../component/ui/button";
+
+const BlogSection = () => {
+  return (
+    <div className="relative flex min-h-screen items-center justify-center overflow-hidden bg-[#0b0b0b]">
+      {/* 🔹 Animated Laser Background */}
+      <div className="absolute inset-0 z-0">
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,_rgba(0,255,102,0.08),_transparent_70%)] animate-pulse"></div>
+        <div className="absolute inset-0 bg-[repeating-linear-gradient(45deg,_rgba(0,255,102,0.05)_0px,_rgba(0,255,102,0.05)_1px,_transparent_1px,_transparent_20px)] blur-[2px] opacity-70 animate-slowPulse"></div>
+        <div className="absolute inset-0 bg-[url('/images/blog-bg.jpg')] bg-cover bg-center opacity-10 mix-blend-overlay"></div>
+      </div>
+
+      {/* 🔹 Content */}
+      <div className="relative z-10 text-center space-y-6 px-6 animate-fadeUp">
+        <h1 className="text-5xl sm:text-6xl md:text-7xl font-bold text-white drop-shadow-[0_0_10px_rgba(0,255,102,0.3)]">
+          Explore Our <span className="text-[#00ff66]">Blog</span>
+        </h1>
+        <p className="text-xl text-gray-300 max-w-2xl mx-auto">
+          Discover insightful articles on web development, design, and technology
+        </p>
+        <Link href="/blogs">
+          <Button
+            className="bg-[#00A63E] hover:bg-[#00ff66] text-white px-8 py-6 text-lg rounded-lg shadow-lg 
+            hover:shadow-[0_0_25px_rgba(0,255,102,0.4)] transition-all duration-300"
+          >
+            View All Blogs
+          </Button>
+        </Link>
+      </div>
+
+      {/* 🔹 Optional Floating Lights */}
+      <div className="absolute w-[300px] h-[300px] bg-[#00ff66]/10 rounded-full blur-3xl top-10 left-10 animate-pulse"></div>
+      <div className="absolute w-[250px] h-[250px] bg-[#00A63E]/10 rounded-full blur-3xl bottom-10 right-10 animate-pulse"></div>
+    </div>
+  );
+};
+
+export default BlogSection;
+
diff --git a/cpsquad/app/blogs/page.jsx b/cpsquad/app/blogs/page.jsx
new file mode 100644
index 0000000..5f11803
--- /dev/null
+++ b/cpsquad/app/blogs/page.jsx
@@ -0,0 +1,32 @@
+"use client";
+import BlogCard from "../component/BlogCard/BlogCard";
+import blogdata from "../lib/data/blogdata"; // adjust path if your data file is elsewhere
+
+export default function BlogsPage() {
+  return (
+    <section className="relative min-h-screen flex flex-col justify-center items-center overflow-hidden px-[25px] sm:px-6 lg:px-8">
+      {/* 🔹 Foreground content */}
+      <div className="relative z-10 w-full max-w-[1200px] text-center text-white">
+        <h2 className="text-4xl md:text-6xl font-bold tracking-tight mb-8 drop-shadow-[0_0_12px_#00ff88]">
+          ALL BLOGS_
+        </h2>
+
+        <div className="grid gap-6 sm:gap-8 lg:gap-10 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-5 mb-12">
+          {blogdata.map((item) => (
+            <BlogCard
+              key={item.id}
+              title={item.title}
+              excerpt={item.excerpt}
+              image={item.image}
+              slug={item.slug}
+              category={item.category}
+              date={item.date}
+              author={item.author}
+              readTime={item.readTime}
+            />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/cpsquad/app/component/Navbar/MobileMenu/MobileMenu.jsx b/cpsquad/app/component/Navbar/MobileMenu/MobileMenu.jsx
index a10a47d..3023c37 100644
--- a/cpsquad/app/component/Navbar/MobileMenu/MobileMenu.jsx
+++ b/cpsquad/app/component/Navbar/MobileMenu/MobileMenu.jsx
@@ -25,7 +25,7 @@ const MobileMenu = ({ pathname, closeMenu }) => {
     { href: "/", label: "Home" },
     { href: "/events", label: "Events" },
     { href: "/members", label: "Members" },
-    { href: "/blogs", label: "Blogs" },
+    { href: "/Blog-section", label: "Blogs" },
   ];
 
   const containerVariants = {
diff --git a/cpsquad/app/component/Navbar/NavLinks.jsx b/cpsquad/app/component/Navbar/NavLinks.jsx
index 8ca456c..e95e3ef 100644
--- a/cpsquad/app/component/Navbar/NavLinks.jsx
+++ b/cpsquad/app/component/Navbar/NavLinks.jsx
@@ -20,7 +20,7 @@ const NavLinks = ({ pathname }) => {
   const links = [
     { href: "/events", label: "Events" },
     { href: "/members", label: "Members" },
-    { href: "/blogs", label: "Blogs" },
+    { href: "/Blog-section", label: "Blogs" },
   ];
 
   return (
diff --git a/cpsquad/app/component/ui/button.jsx b/cpsquad/app/component/ui/button.jsx
new file mode 100644
index 0000000..aff1aa6
--- /dev/null
+++ b/cpsquad/app/component/ui/button.jsx
@@ -0,0 +1,37 @@
+import React from "react";
+
+const Button = ({
+  children,
+  onClick,
+  className = "",
+  variant = "default",
+  size = "md",
+  ...props
+}) => {
+  const base =
+    "inline-flex items-center justify-center rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50";
+
+  const variants = {
+    default: "bg-green-500 text-white hover:bg-green-600",
+    outline: "border border-gray-400 text-gray-700 hover:bg-gray-100",
+    ghost: "text-gray-700 hover:bg-gray-100",
+  };
+
+  const sizes = {
+    sm: "px-3 py-1 text-sm",
+    md: "px-4 py-2 text-base",
+    lg: "px-5 py-3 text-lg",
+  };
+
+  const styles = `${base} ${variants[variant] || ""} ${
+    sizes[size] || ""
+  } ${className}`;
+
+  return (
+    <button onClick={onClick} className={styles} {...props}>
+      {children}
+    </button>
+  );
+};
+
+export { Button };
diff --git a/cpsquad/app/page.js b/cpsquad/app/page.js
index 7b92eab..70836ca 100644
--- a/cpsquad/app/page.js
+++ b/cpsquad/app/page.js
@@ -3,6 +3,7 @@ import Image from "next/image";
 import React, { useState, useRef } from "react";
 import BlogCard from "./component/BlogCard/BlogCard";
 import blogdata from "./lib/data/blogdata.js";
+import BlogSection from "./Blog-section/page";
 import Link from "next/link";
 
 export default function Home() {
@@ -103,37 +104,7 @@ export default function Home() {
       </section>
 
       {/* Blogs Section */}
-      <section id="blogs" className="px-[25px] sm:px-6 lg:px-8 max-w-[1200px] mx-auto ">
-        <div className="flex justify-center  ">
-          <h2 className="text-4xl md:text-6xl font-bold tracking-tight">
-            OUR BLOGS_
-          </h2>
-        </div>
-
-        <div className="grid gap-6 sm:gap-8 lg:gap-10 
-                sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-5 mb-12">
-          {blogdata.slice(0, 3).map((item, id) => (
-            <BlogCard
-              key={item.id}
-              title={item.title}
-              excerpt={item.excerpt}
-              image={item.image}
-              slug={item.slug}
-              category={item.category}
-              date={item.date}
-              author={item.author}
-              readTime={item.readTime}
-            />
-          ))}
-        </div>
-        <Link href="/blogs">
-          <div className="flex justify-center items-center mb-[80px] ">
-            <button className="bg-gray-700 w-[150px] py-3 hover:bg-gray-800 transition-all duration-300">
-              View more
-            </button>
-          </div>
-        </Link>
-      </section>
+      <BlogSection />
     </div>
   );
 }
diff --git a/cpsquad/package-lock.json b/cpsquad/package-lock.json
index fbfed99..6b62df7 100644
--- a/cpsquad/package-lock.json
+++ b/cpsquad/package-lock.json
@@ -8,6 +8,7 @@
       "name": "cpsquad",
       "version": "0.1.0",
       "dependencies": {
+        "@radix-ui/react-slot": "^1.2.3",
         "framer-motion": "^12.23.24",
         "next": "15.5.5",
         "react": "19.1.0",
@@ -17,6 +18,8 @@
       "devDependencies": {
         "@eslint/eslintrc": "^3",
         "@tailwindcss/postcss": "^4",
+        "@types/node": "24.9.2",
+        "@types/react": "^19.2.2",
         "eslint": "^9",
         "eslint-config-next": "15.5.5",
         "tailwindcss": "^4"
@@ -960,6 +963,39 @@
         "node": ">=12.4.0"
       }
     },
+    "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==",
+      "license": "MIT",
+      "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-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "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/@rtsao/scc": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
@@ -1351,6 +1387,26 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/node": {
+      "version": "24.9.2",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.9.2.tgz",
+      "integrity": "sha512-uWN8YqxXxqFMX2RqGOrumsKeti4LlmIMIyV0lgut4jx7KQBcBiW6vkDtIBvHnHIquwNfJhk8v2OtmO8zXWHfPA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~7.16.0"
+      }
+    },
+    "node_modules/@types/react": {
+      "version": "19.2.2",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz",
+      "integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.46.1",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.46.1.tgz",
@@ -2380,6 +2436,13 @@
         "node": ">= 8"
       }
     },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "devOptional": true,
+      "license": "MIT"
+    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -5983,6 +6046,13 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/undici-types": {
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
+      "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/unrs-resolver": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/unrs-resolver/-/unrs-resolver-1.11.1.tgz",
diff --git a/cpsquad/package.json b/cpsquad/package.json
index 1bb79bf..747e116 100644
--- a/cpsquad/package.json
+++ b/cpsquad/package.json
@@ -9,18 +9,18 @@
     "lint": "eslint"
   },
   "dependencies": {
-    "next": "15.5.5",
-    "react": "19.1.0",
-    "react-dom": "19.1.0",
-    "react-icons": "^5.5.0",
+    "@radix-ui/react-slot": "^1.2.3",
     "framer-motion": "^12.23.24",
     "next": "15.5.5",
     "react": "19.1.0",
-    "react-dom": "19.1.0"
+    "react-dom": "19.1.0",
+    "react-icons": "^5.5.0"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
     "@tailwindcss/postcss": "^4",
+    "@types/node": "24.9.2",
+    "@types/react": "^19.2.2",
     "eslint": "^9",
     "eslint-config-next": "15.5.5",
     "tailwindcss": "^4"
diff --git a/cpsquad/tsconfig.json b/cpsquad/tsconfig.json
new file mode 100644
index 0000000..f619795
--- /dev/null
+++ b/cpsquad/tsconfig.json
@@ -0,0 +1,35 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "noEmit": true,
+    "incremental": true,
+    "module": "esnext",
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
+  "include": [
+    "next-env.d.ts",
+    ".next/types/**/*.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}