diff --git a/src/components/BlogContent.jsx b/src/components/BlogContent.jsx
index 00c7a29..90f8506 100644
--- a/src/components/BlogContent.jsx
+++ b/src/components/BlogContent.jsx
@@ -27,7 +27,9 @@ const BlogContent = ({ blogsData }) => {
                     </div>
                     <div className="pt-10">
 
-                        <ReactMarkdown className="prose max-w-full lg:px-24 prose-headings:text-white prose-p:text-white">
+                        <ReactMarkdown className="prose md:p-1 lg:p-2 prose-pre:mx-auto prose-pre:max-w-[250px] ss:prose-pre:max-w-full prose-headings:text-white 
+                         prose-p:text-white prose-ul: text-white prose-img:max-w-[330px] prose-img:mx-auto sm:prose-img:max-w-[500px]
+                         prose-strong:text-white sm:sm:text-base md:text-lg lg:text-xl">
                         
                             {blog.attributes.blogContent}
                            
@@ -40,7 +42,7 @@ const BlogContent = ({ blogsData }) => {
                                 src={`http://localhost:1337${blog.attributes.authorProfileImg.data.attributes.url}`}
                                 alt={blog.attributes.author}
                             />
-                            <p className="text-gray-300 py-2">Written by:</p>
+                            <p className="text-gray-300 py-2 overflow-hidden">Written by:</p>
                             <div className="text-gray-300">{blog.attributes.author}</div>
                             <div className="text-gray-300 mt-2">{blog.attributes.date}</div>
                         </div>
diff --git a/src/components/Blogs.jsx b/src/components/Blogs.jsx
index ee59ee4..6c2978b 100644
--- a/src/components/Blogs.jsx
+++ b/src/components/Blogs.jsx
@@ -3,9 +3,6 @@ import { Link } from 'react-router-dom';
 
 const Blogs = ({blogsData}) => {
 
-  console.log("blogpage");
-  console.log(blogsData);
-
 {/*
   const blogitems = [
     {
@@ -62,7 +59,7 @@ const Blogs = ({blogsData}) => {
 
     <div className='w-ful dark:bg-gray-900 text-white p-6'>
       <div className='max-w-[1340px] mx-auto'>
-        <div className='grid ss:grid-cols-2 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-10 py-24 px-4 my-10'>
+        <div className='grid lg:mt-16 ss:grid-cols-2 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-10 py-24 lg:px-4 my-10'>
 
           {
             blogsData.data.map((blog) =>
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index c5587d3..cf12775 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -5,7 +5,7 @@ import { HiOutlineMail, HiGlobe } from 'react-icons/hi';
 const Footer = () => {
   return (
     <div className='w-full dark:bg-gray-900 text-gray-300'>
-      <div className='max-w-[1340px]  dark:bg-slate-800 mx-auto my-0 px-4 sm:px-6 rounded-2xl drop-shadow-xl shadow-inner'>
+      <div className='max-w-[1340px]  dark:bg-slate-900 mx-auto my-0 px-4 sm:px-6  drop-shadow-xl shadow-inner'>
         <div className=' py-6 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 gap-10 text-center'>
           {/* Footer Column 1 */}
           <div>
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index cb9c6aa..d973c28 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -10,14 +10,14 @@ const Navbar = () => {
     return (
         <div className='w-full h-[100px] m-auto z-10 fixed'>
 
-            <div className=" mx-auto p-5 md:px-6  flex justify-between items-center md:max-w-[1340px] rounded-2xl dark:bg-slate-800 drop-shadow-lg">
+            <div className=" mx-auto p-5 md:px-6  flex justify-between items-center md:max-w-[1340px]  dark:bg-slate-900 drop-shadow-lg">
                 <div className="flex items-center">
                     {/*<img src={logo} alt="logo" className="sm:ml-10 ss:ml-10 md:ml-3 opacity-[55%} w-full h-[90px] py-1" /> */}
-                    <h1 className="text-white text-2xl sm:text-3xl font-bold m-auto px-5 uppercase">Darshan.Blog</h1>
+                    <h1 className=" text-slate-300 text-lg sm:text-xl font-bold m-auto px-5 uppercase tracking-widest">{'</Dev.Darshan>'}</h1>
                 </div>
                 <div className="flex items-center">
                    
-                    <ul className="hidden md:flex uppercase text-white font-bold ">
+                    <ul className="hidden md:flex uppercase text-white font-bold tracking-wide	 ">
                         <li className="p-6">Home</li>
                         <li className="p-6">Post</li>
                         <li className="p-6">About</li>
@@ -29,7 +29,7 @@ const Navbar = () => {
 
             </div>
 
-            <ul className={toggle ? "md:hidden px-8 py-10 absolute dark:bg-slate-800 w-full uppercase text-white font-bold" : "hidden"}>
+            <ul className={toggle ? "md:hidden px-8 py-10 absolute dark:bg-slate-900 w-full uppercase text-slate-300 font-bold" : "hidden"}>
                 <li className="p-3">Home</li>
                 <li className="p-3">Post</li>
                 <li className="p-3">About</li>
diff --git a/tailwind.config.js b/tailwind.config.js
index faaa787..b4237f5 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -14,20 +14,7 @@ export default {
       },
       fontFamily: {
         poppins: ["Poppins", "sans-serif"],
-      },
-      typography: {
-        // Customize the prose class styles
-        prose: {
-          color: '#ffff', // Set the text color to white
-        },
-        // You can also customize specific elements within prose
-        'h1': {
-          color: '#FFA500', // Set the color for h1 headings
-        },
-        'p': {
-          color: '#CCCCCC', // Set the color for paragraphs
-        },
-      },
+      }
     },
     screens: {
       xs: "480px",