diff --git a/package-lock.json b/package-lock.json
index 96e0063..bec316b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "markdown-it": "^13.0.2",
         "markdown-parser-react": "^1.1.2",
+        "prop-type": "^0.0.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-icons": "^4.11.0",
@@ -17,6 +18,7 @@
         "react-router-dom": "^6.16.0"
       },
       "devDependencies": {
+        "@tailwindcss/typography": "^0.5.10",
         "@types/react": "^18.2.15",
         "@types/react-dom": "^18.2.7",
         "@vitejs/plugin-react": "^4.0.3",
@@ -938,6 +940,34 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/@tailwindcss/typography": {
+      "version": "0.5.10",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.10.tgz",
+      "integrity": "sha512-Pe8BuPJQJd3FfRnm6H0ulKIGoMEQS+Vq01R6M5aCrFB/ccR/shT+0kXLjouGC1gFLm9hopTFN+DMP0pfwRWzPw==",
+      "dev": true,
+      "dependencies": {
+        "lodash.castarray": "^4.4.0",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.merge": "^4.6.2",
+        "postcss-selector-parser": "6.0.10"
+      },
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders"
+      }
+    },
+    "node_modules/@tailwindcss/typography/node_modules/postcss-selector-parser": {
+      "version": "6.0.10",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+      "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+      "dev": true,
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.2",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.2.tgz",
@@ -3180,6 +3210,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash.castarray": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
+      "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
+      "dev": true
+    },
+    "node_modules/lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+      "dev": true
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -4216,6 +4258,12 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prop-type": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/prop-type/-/prop-type-0.0.1.tgz",
+      "integrity": "sha512-6+7BTexA1dif2J3zyeVZB5sn3KVb/7iRJKruWTHpeHD99rUmWTHp7Vp51rPGPIa9av4HX1g+2D2gdIAWOhI7gw==",
+      "deprecated": "this package is no longer maintained and propably broken"
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
diff --git a/package.json b/package.json
index 4519a5c..916905e 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "markdown-it": "^13.0.2",
     "markdown-parser-react": "^1.1.2",
+    "prop-type": "^0.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.11.0",
@@ -19,6 +20,7 @@
     "react-router-dom": "^6.16.0"
   },
   "devDependencies": {
+    "@tailwindcss/typography": "^0.5.10",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@vitejs/plugin-react": "^4.0.3",
diff --git a/src/components/BlogContent.jsx b/src/components/BlogContent.jsx
index b855d8b..b29fb3a 100644
--- a/src/components/BlogContent.jsx
+++ b/src/components/BlogContent.jsx
@@ -2,7 +2,6 @@ import { useParams } from 'react-router-dom';
 import ReactMarkdown from 'react-markdown';
 
 
-
 const BlogContent = ({ blogsData }) => {
 
     console.log(blogsData);
@@ -12,104 +11,44 @@ const BlogContent = ({ blogsData }) => {
     if (blog) {
         let arr = blogsData.data.filter(blog => blog.id == id)
         blog = arr[0];
-        console.log(blog.attributes.blogContent);
     }
     else {
         blog = {};
     }
 
-
-
-    { /*const blog = {
-        "id": 1,
-        'title': 'Blog 1',
-        'desc': "Lorem Ipsum has been the industry's standard dummy text ever since the 1500s",
-        'coverImg': 'https://mir-s3-cdn-cf.behance.net/project_modules/fs/876c22100707927.5f0ec9851cb08.png',
-        'content': 'Intro to Web3 Day 1: Intro to Web3 What is Web3To put it simply, Web3 is the latest version of what we know as the internet. In this version, people have full ownership of their content, data and assets. There are also no middlemen involved, which is presently the case with large corporations and governments controlling and regulating whatever goes on the internet. In some areas, you may read some terms like decentralized and democratization of the internet being used for Web3, which can be sort of confusing. But for now, think of decentralization as not being controlled and monitored by others, rather, by yourself. Web1 = read  Web1 happened when the internet was officially introduced in the 1980s onwards. Few individuals or groups created content',
-        'author': 'Darshan Bajgain',
-        'date': 'October 5, 2023', 
-        'authorProfileImg': 'https://media.licdn.com/dms/image/D5603AQHiTbxjVI1AEQ/profile-displayphoto-shrink_800_800/0/1682674343890?e=1701907200&v=beta&t=0ASP4jhQWmTvpo5NIi96n_Mq_OQHR83mG9_MqbbKNrE' 
+      // Define custom styles for ReactMarkdown components
+      const customComponents = {
+        p: ({ node, ...props }) => <p style={{ color: 'white' }} {...props} />,
+        h1: ({ node, ...props }) => <h1 style={{ color: 'white' }} {...props} />,
+        // Add more elements as needed
     };
-*/}
-    {/*
-     const blogitems = [
-        {
-            "id": 1,
-            'title': 'Blog 1',
-            'desc': 'lorep ipsum random text higlights',
-            'coverImg': 'https://i.ytimg.com/vi/kFARYsqwlJI/maxresdefault.jpg',
-            'content': 'Intro to Web3 Day 1: Intro to Web3 What is Web3To put it simply, Web3 is the latest version of what we know as the internet. In this version, people have full ownership of their content, data and assets. There are also no middlemen involved, which is presently the case with large corporations and governments controlling and regulating whatever goes on the internet. In some areas, you may read some terms like decentralized and democratization of the internet being used for Web3, which can be sort of confusing. But for now, think of decentralization as not being controlled and monitored by others, rather, by yourself. Web1 = read  Web1 happened when the internet was officially introduced in the 1980s onwards. Few individuals or groups created content',
-            'author': 'Darshan Bajgain',
-            'date': 'October 5, 2023',
-            'authorProfileImg': 'https://media.licdn.com/dms/image/D5603AQHiTbxjVI1AEQ/profile-displayphoto-shrink_800_800/0/1682674343890?e=1701907200&v=beta&t=0ASP4jhQWmTvpo5NIi96n_Mq_OQHR83mG9_MqbbKNrE'
-
-        },
-        {
-            "id": 2,
-            'title': 'How to wrtie a blog in modern way',
-            'desc': 'lorep ipsum random text higlights',
-            'coverImg': 'https://img.freepik.com/free-vector/blog-concept-illustration-idea-posting-sharing-following_613284-2970.jpg?w=1380&t=st=1695738861~exp=1695739461~hmac=e80be39b6e02cbc5f8d54b37ebc26609ebaa86d7654ce67d1460cd1d66375c7f',
-            'content': 'Intro to Web3 Day 1: Intro to Web3 What is Web3To put it simply, Web3 is the latest version of what we know as the internet. In this version, people have full ownership of their content, data and assets. There are also no middlemen involved, which is presently the case with large corporations and governments controlling and regulating whatever goes on the internet. In some areas, you may read some terms like decentralized and democratization of the internet being used for Web3, which can be sort of confusing. But for now, think of decentralization as not being controlled and monitored by others, rather, by yourself. Web1 = read  Web1 happened when the internet was officially introduced in the 1980s onwards. Few individuals or groups created content',
-            'author': 'Darshan Bajgain',
-            'date': 'October 5, 2023',
-            'authorProfileImg': 'https://media.licdn.com/dms/image/D5603AQHiTbxjVI1AEQ/profile-displayphoto-shrink_800_800/0/1682674343890?e=1701907200&v=beta&t=0ASP4jhQWmTvpo5NIi96n_Mq_OQHR83mG9_MqbbKNrE'
-
-        },
-        {
-            "id": 3,
-            'title': 'Creating this blog using React, Tailwind and Strapi CMS',
-            'desc': 'lorep ipsum random text higlights',
-            'coverImg': 'https://miro.medium.com/v2/resize:fit:1400/1*y5d-je-3BZUrgg0Hxf7CyA.png',
-            'content': 'Intro to Web3 Day 1: Intro to Web3 What is Web3To put it simply, Web3 is the latest version of what we know as the internet. In this version, people have full ownership of their content, data and assets. There are also no middlemen involved, which is presently the case with large corporations and governments controlling and regulating whatever goes on the internet. In some areas, you may read some terms like decentralized and democratization of the internet being used for Web3, which can be sort of confusing. But for now, think of decentralization as not being controlled and monitored by others, rather, by yourself. Web1 = read  Web1 happened when the internet was officially introduced in the 1980s onwards. Few individuals or groups created content',
-            'author': 'Darshan Bajgain',
-            'date': 'October 5, 2023',
-            'authorProfileImg': 'https://media.licdn.com/dms/image/D5603AQHiTbxjVI1AEQ/profile-displayphoto-shrink_800_800/0/1682674343890?e=1701907200&v=beta&t=0ASP4jhQWmTvpo5NIi96n_Mq_OQHR83mG9_MqbbKNrE'
-
-        },
-        {
-            "id": 4,
-            'title': 'How to install JDK in Linux Mint Cinnamon',
-            'desc': 'lorep ipsum random text higlights',
-            'coverImg': 'https://i.ytimg.com/vi/kFARYsqwlJI/maxresdefault.jpg',
-            'content': 'Intro to Web3 Day 1: Intro to Web3 What is Web3To put it simply, Web3 is the latest version of what we know as the internet. In this version, people have full ownership of their content, data and assets. There are also no middlemen involved, which is presently the case with large corporations and governments controlling and regulating whatever goes on the internet. In some areas, you may read some terms like decentralized and democratization of the internet being used for Web3, which can be sort of confusing. But for now, think of decentralization as not being controlled and monitored by others, rather, by yourself. Web1 = read  Web1 happened when the internet was officially introduced in the 1980s onwards. Few individuals or groups created content',
-            'author': 'Darshan Bajgain',
-            'date': 'October 5, 2023',
-            'authorProfileImg': 'https://media.licdn.com/dms/image/D5603AQHiTbxjVI1AEQ/profile-displayphoto-shrink_800_800/0/1682674343890?e=1701907200&v=beta&t=0ASP4jhQWmTvpo5NIi96n_Mq_OQHR83mG9_MqbbKNrE'
-
-        },
-
-    ]
-
-
-*/}
-
-
-
-
 
     return (
         <div className="w-full py-16 px-8 relative bg-gray-800">
             <div className='max-w-[1340px] mx-auto pt-24'>
                 <div className="flex flex-col items-center">
-                    <h1 className="md:text-4xl text-2xl text-white font-bold mb-4 p-2">{blog.attributes.blogTitle}</h1>
-                    <div className="max-w-full md:max-w-2xl">
+                    <h1 className="md:text-4xl text-2xl text-white font-bold mb-4 pt-4">{blog.attributes.blogTitle}</h1>
+                    <div className="max-w-full md:max-w-2xl pt-8">
                         <img className='w-full h-auto mb-4' src={`http://localhost:1337${blog.attributes.coverImg.data.attributes.url}`} alt={blog.attributes.blogTitle} />
                     </div>
-                    <div className="pt-4 lg:px-12 text-white">
+                    <div className="pt-10">
 
-                        <ReactMarkdown className='line-break'>
+                        <ReactMarkdown className="prose max-w-full lg:px-24 prose-headings:text-white prose-p:text-white">
+                        
                             {blog.attributes.blogContent}
+                           
+
                         </ReactMarkdown>
 
-                        <div className="flex flex-col items-center max-w-[400px] mx-auto py-6 bg-slate-800 rounded-2xl mt-8">
+                        <div className="flex flex-col items-center max-w-[400px] mx-auto py-6 bg-slate-800 rounded-2xl mt-16">
                             <img
                                 className="w-16 h-16 rounded-full mb-2"
                                 src={`http://localhost:1337${blog.attributes.authorProfileImg.data.attributes.url}`}
                                 alt={blog.attributes.author}
                             />
-                            <p className="text-gray-400 py-2">Written by:</p>
-                            <div className="text-gray-400">{blog.attributes.author}</div>
-                            <div className="text-gray-400 mt-2">{blog.attributes.date}</div>
+                            <p className="text-gray-300 py-2">Written by:</p>
+                            <div className="text-gray-300">{blog.attributes.author}</div>
+                            <div className="text-gray-300 mt-2">{blog.attributes.date}</div>
                         </div>
                     </div>
                 </div>
diff --git a/tailwind.config.js b/tailwind.config.js
index 6cf306c..faaa787 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -15,6 +15,19 @@ 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",
@@ -25,5 +38,7 @@ export default {
       xl: "1700px",
     },
   },
-  plugins: [],
+  plugins: [
+    require('@tailwindcss/typography'),
+  ],
 }
\ No newline at end of file