diff --git a/app/blogs/[slug]/page.tsx b/app/blogs/[slug]/page.tsx
index bdfcb68..4cb3d60 100644
--- a/app/blogs/[slug]/page.tsx
+++ b/app/blogs/[slug]/page.tsx
@@ -10,6 +10,7 @@ import { PortableText } from "@portabletext/react";
 type Blog = {
   _id: string;
   title: string;
+  slug: { current: string };
   mainImage?: { asset: { url: string } };
   author?: { name: string };
   body?: any; // PortableText content
@@ -17,23 +18,23 @@ type Blog = {
   category?: string;
 };
 
-async function getBlogs(): Promise<Blog[]> {
-  const query = `*[_type=="blog"]|order(publishedAt desc)[0...50]{
+async function getBlogBySlug(slug: string): Promise<Blog | null> {
+  const query = `*[_type=="blog" && slug.current == $slug][0]{
     _id,
     title,
+    slug,
     "mainImage": mainImage.asset->{url},
     "author": author-> { name },
     body,
     publishedAt,
     category
   }`;
-  return client.fetch(query);
+  return client.fetch(query, { slug });
 }
 
 export default function BlogDetailPage() {
   const params = useParams();
   const slug = params.slug as string;
-  const numericId = parseInt(slug, 10);
 
   const [blog, setBlog] = useState<Blog | null>(null);
   const [loading, setLoading] = useState(true);
@@ -46,10 +47,10 @@ export default function BlogDetailPage() {
     const fetchBlog = async () => {
       try {
         setLoading(true);
-        const blogs = await getBlogs();
+        const fetchedBlog = await getBlogBySlug(slug);
 
-        if (numericId > 0 && numericId <= blogs.length) {
-          setBlog(blogs[numericId - 1]);
+        if (fetchedBlog) {
+          setBlog(fetchedBlog);
         } else {
           setError("Blog not found.");
         }
@@ -61,7 +62,7 @@ export default function BlogDetailPage() {
       }
     };
     fetchBlog();
-  }, [numericId]);
+  }, [slug]);
 
   if (loading) return <p className="text-center mt-10">Loading blog...</p>;
   if (error) return <p className="text-center mt-10 text-red-600">{error}</p>;
diff --git a/app/blogs/page.tsx b/app/blogs/page.tsx
index 8f35ff5..0edac55 100644
--- a/app/blogs/page.tsx
+++ b/app/blogs/page.tsx
@@ -8,6 +8,7 @@ import { useState, useEffect } from "react";
 type Blog = {
   _id: string;
   title: string;
+  slug: { current: string };
   mainImage?: { asset: { url: string } };
   author?: { name: string };
   excerpt?: string;
@@ -19,6 +20,7 @@ async function getBlogs(): Promise<Blog[]> {
   const query = `*[_type=="blog"]|order(publishedAt desc)[0...50]{
     _id,
     title,
+    slug,
     "mainImage": mainImage.asset->{url},
     "author": author-> { name },
     excerpt,
@@ -59,30 +61,27 @@ export default function BlogsPage() {
       <h1 className="text-4xl font-bold text-center mb-12 text-blue-500">Blogs</h1> 
  
       <section className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3 bg-black width-full px-20 pb-8">
-        {blogs.map((blog, index) => {
-          const numericId = index + 1; // Numeric ID
-          return (
-            <article key={blog._id} className="border rounded-lg overflow-hidden shadow-sm hover:shadow-md flex flex-col">
-              {blog.mainImage?.url && (
-                <div className="relative w-full h-56">
-                  <Image src={blog.mainImage.url} alt={blog.title} fill className="object-cover" />
-                </div>
-              )}
-              <div className="p-4 flex flex-col flex-1 justify-between">
-                <h2 className="text-xl font-semibold mb-2">{blog.title}</h2>
-                {blog.excerpt && <p className="text-gray-700 line-clamp-3">{blog.excerpt}</p>}
-                <div className="mt-4">
-                  <Link
-                    href={`/blogs/${numericId}`}
-                    className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition text-sm"
-                  >
-                    View Blog
-                  </Link>
-                </div>
+        {blogs.map((blog) => (
+          <article key={blog._id} className="border rounded-lg overflow-hidden shadow-sm hover:shadow-md flex flex-col">
+            {blog.mainImage?.url && (
+              <div className="relative w-full h-56">
+                <Image src={blog.mainImage.url} alt={blog.title} fill className="object-cover" />
               </div>
-            </article>
-          );
-        })}
+            )}
+            <div className="p-4 flex flex-col flex-1 justify-between">
+              <h2 className="text-xl font-semibold mb-2">{blog.title}</h2>
+              {blog.excerpt && <p className="text-gray-700 line-clamp-3">{blog.excerpt}</p>}
+              <div className="mt-4">
+                <Link
+                  href={`/blogs/${blog.slug.current}`}
+                  className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition text-sm"
+                >
+                  View Blog
+                </Link>
+              </div>
+            </div>
+          </article>
+        ))}
       </section>
     </main>
   );