diff --git a/next.config.mjs b/next.config.mjs
index c50b89d..9c9d64b 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -3,7 +3,6 @@ const nextConfig = {
   images: {
     domains: ["avatars.githubusercontent.com"],
   },
-  output: "export", // Add this line for static exports
 };
 
 export default nextConfig;
diff --git a/public/favicons/site.webmanifest b/public/favicons/site.webmanifest
deleted file mode 100644
index e4e0b8d..0000000
--- a/public/favicons/site.webmanifest
+++ /dev/null
@@ -1 +0,0 @@
-{"name":"zobaidulkazi","short_name":"zobaidulkazi","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
\ No newline at end of file
diff --git a/public/site.webmanifest b/public/site.webmanifest
new file mode 100644
index 0000000..49bd131
--- /dev/null
+++ b/public/site.webmanifest
@@ -0,0 +1,20 @@
+{
+  "name": "Your App Name",
+  "short_name": "AppName",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#000000",
+  "icons": [
+    {
+      "src": "/icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}
diff --git a/src/app/blogs/[bId]/page.tsx b/src/app/blogs/[bId]/page.tsx
new file mode 100644
index 0000000..991a57d
--- /dev/null
+++ b/src/app/blogs/[bId]/page.tsx
@@ -0,0 +1,88 @@
+// src/app/blogs/[bId]/page.tsx
+
+import { notFound } from "next/navigation";
+import { fetchBlogById, fetchBlogs } from "@/lib/blogBid";
+
+interface BlogProps {
+  params: {
+    bId: string;
+  };
+}
+
+interface Blog {
+  _id: string;
+  bId: number;
+  author: {
+    id: string;
+    username: string;
+    fullname: string;
+  };
+  title: string;
+  subtitle: string;
+  description: string;
+  code: string;
+  image: string;
+  url: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export async function generateStaticParams() {
+  const blogs = await fetchBlogs();
+  return blogs.map((blog: Blog) => ({
+    bId: blog.bId.toString(), // Use bId as a string
+  }));
+}
+
+const BlogPage: React.FC<BlogProps> = async ({ params }) => {
+  const bId = parseInt(params.bId, 10); // Convert bId to a number
+
+  const blog = await fetchBlogById(bId);
+
+  if (!blog) {
+    return notFound();
+  }
+
+  return (
+    <div className="max-w-3xl mx-auto p-6 bg-gray-100 dark:bg-gray-900 min-h-screen">
+      <h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-4">
+        {blog.title}
+      </h1>
+      <h2 className="text-2xl text-gray-600 dark:text-gray-300 mb-4">
+        {blog.subtitle}
+      </h2>
+      <img
+        src={blog.image}
+        alt={blog.title}
+        className="w-full h-auto rounded-lg mb-6 shadow-md"
+      />
+      <p className="text-lg text-gray-800 dark:text-gray-300 mb-4">
+        {blog.description}
+      </p>
+      <a
+        href={blog.url}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="text-blue-500 dark:text-blue-400 hover:underline mb-6 block"
+      >
+        Read more
+      </a>
+      <div className="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-md mb-6 relative">
+        <h3 className="text-xl text-gray-900 dark:text-white mb-2">
+          Code Example
+        </h3>
+        <pre className="bg-gray-900 dark:bg-black text-green-400 p-4 rounded-lg overflow-auto">
+          {blog.code}
+        </pre>
+      </div>
+      <p className="text-sm text-gray-500 dark:text-gray-400">
+        Author: {blog.author.fullname}
+      </p>
+      <p className="text-sm text-gray-500 dark:text-gray-400">
+        Created at: {new Date(blog.createdAt).toLocaleDateString()}
+      </p>
+    </div>
+  );
+};
+
+export default BlogPage;
diff --git a/src/app/blogs/bId.tsx b/src/app/blogs/bId.tsx
deleted file mode 100644
index 8268db7..0000000
--- a/src/app/blogs/bId.tsx
+++ /dev/null
@@ -1,185 +0,0 @@
-"use client"; // Add this line at the top
-
-import React from "react";
-import { motion } from "framer-motion";
-import create from "zustand";
-import Link from "next/link";
-import NotFoundPage from "@/app/not-found";
-import Loading from "@/components/common/Loading";
-
-interface BlogStore {
-  copied: boolean;
-  setCopied: (value: boolean) => void;
-}
-
-const useBlogStore = create<BlogStore>((set) => ({
-  copied: false,
-  setCopied: (value) => set({ copied: value }),
-}));
-
-interface Author {
-  id: string;
-  username: string;
-  fullname: string;
-}
-
-interface Blog {
-  _id: string;
-  bId: number;
-  author: Author;
-  title: string;
-  subtitle: string;
-  description: string;
-  code: string;
-  image: string;
-  url: string;
-  createdAt: string;
-  updatedAt: string;
-}
-
-interface BlogDetailsProps {
-  params: {
-    bId: string;
-  };
-}
-
-const BlogDetails: React.FC<BlogDetailsProps> = ({ params }) => {
-  const { bId } = params;
-  const { copied, setCopied } = useBlogStore();
-  const currentBlogId = parseInt(bId, 10); // Convert blog ID to a number
-
-  const [blog, setBlog] = React.useState<Blog | null>(null);
-  const [loading, setLoading] = React.useState(true);
-
-  const fetchBlogDetails = async (id: number) => {
-    try {
-      const response = await fetch(
-        `https://message-aether.onrender.com/api/blog/${id}`
-      );
-      const data = await response.json();
-      if (data.success && data.data) {
-        setBlog(data.data);
-      }
-    } catch (error) {
-      console.error("Error fetching blog details:", error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  React.useEffect(() => {
-    fetchBlogDetails(currentBlogId);
-  }, [currentBlogId]);
-
-  const copyToClipboard = (code: string) => {
-    navigator.clipboard.writeText(code);
-    setCopied(true);
-    setTimeout(() => {
-      setCopied(false);
-    }, 2000); // Reset after 2 seconds
-  };
-
-  const nextBlogId = currentBlogId + 1;
-  const prevBlogId = currentBlogId - 1;
-
-  if (loading) {
-    return <Loading />;
-  }
-
-  if (!blog) {
-    return <NotFoundPage />;
-  }
-
-  return (
-    <div className="max-w-3xl mx-auto p-6 bg-gray-100 dark:bg-gray-900 min-h-screen">
-      <motion.h1
-        className="text-4xl font-bold text-gray-900 dark:text-white mb-4"
-        initial={{ opacity: 0, y: -50 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.5 }}
-      >
-        {blog.title}
-      </motion.h1>
-      <motion.h2
-        className="text-2xl text-gray-600 dark:text-gray-300 mb-4"
-        initial={{ opacity: 0, y: -50 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.6 }}
-      >
-        {blog.subtitle}
-      </motion.h2>
-      <motion.img
-        src={blog.image}
-        alt={blog.title}
-        className="w-full h-auto rounded-lg mb-6 shadow-md"
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        transition={{ duration: 0.7 }}
-      />
-      <p className="text-lg text-gray-800 dark:text-gray-300 mb-4">
-        {blog.description}
-      </p>
-      <a
-        href={blog.url}
-        target="_blank"
-        rel="noopener noreferrer"
-        className="text-blue-500 dark:text-blue-400 hover:underline mb-6 block"
-      >
-        Read more
-      </a>
-      <motion.div
-        className="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-md mb-6 relative"
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        transition={{ duration: 0.8 }}
-      >
-        <h3 className="text-xl text-gray-900 dark:text-white mb-2">
-          Code Example
-        </h3>
-        <pre className="bg-gray-900 dark:bg-black text-green-400 p-4 rounded-lg overflow-auto">
-          {blog.code}
-        </pre>
-        <button
-          onClick={() => copyToClipboard(blog.code)}
-          className={`absolute top-4 right-4 text-sm py-2 px-4 rounded-lg ${
-            copied ? "bg-green-500" : "bg-blue-500"
-          } text-white transition`}
-        >
-          {copied ? "Copied!" : "Copy Code"}
-        </button>
-      </motion.div>
-      <p className="text-sm text-gray-500 dark:text-gray-400">
-        Author: {blog.author.fullname}
-      </p>
-      <p className="text-sm text-gray-500 dark:text-gray-400">
-        Created at: {new Date(blog.createdAt).toLocaleDateString()}
-      </p>
-      <div className="flex justify-between mt-8">
-        {prevBlogId > 0 ? (
-          <Link href={`/blogs/${prevBlogId}`}>
-            <button className="bg-gray-600 text-white py-2 px-4 rounded hover:bg-gray-700 transition-all duration-300 focus:outline-none active:scale-95">
-              Previous
-            </button>
-          </Link>
-        ) : (
-          <button className="bg-gray-600 text-white py-2 px-4 rounded opacity-50 cursor-not-allowed">
-            Previous
-          </button>
-        )}
-        {true ? ( // Assuming there are always subsequent blogs; adjust based on actual data
-          <Link href={`/blogs/${nextBlogId}`}>
-            <button className="bg-gray-600 text-white py-2 px-4 rounded hover:bg-gray-700 transition-all duration-300 focus:outline-none active:scale-95">
-              Next
-            </button>
-          </Link>
-        ) : (
-          <button className="bg-gray-600 text-white py-2 px-4 rounded opacity-50 cursor-not-allowed">
-            Next
-          </button>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default BlogDetails;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 0ee6865..57bd8a7 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -30,6 +30,7 @@ export default function RootLayout({
         sizes="180x180"
         href={metaDataLinks.faviconLinkAppleTouchIcon}
       />
+      <link rel="manifest" href="/site.webmanifest" />
       <link
         rel="icon"
         type="image/png"
diff --git a/src/lib/blogBid.ts b/src/lib/blogBid.ts
new file mode 100644
index 0000000..50ea477
--- /dev/null
+++ b/src/lib/blogBid.ts
@@ -0,0 +1,19 @@
+// src/lib/blogs.ts
+
+export async function fetchBlogs() {
+  const response = await fetch("https://message-aether.onrender.com/api/blogs");
+  if (!response.ok) {
+    throw new Error("Failed to fetch blogs");
+  }
+  return response.json();
+}
+
+export async function fetchBlogById(id: number) {
+  const response = await fetch(
+    `https://message-aether.onrender.com/api/blog/${id}`
+  );
+  if (!response.ok) {
+    return null;
+  }
+  return response.json();
+}