diff --git a/src/components/PostCard.jsx b/src/components/PostCard.jsx
index 3f290ff..6247403 100644
--- a/src/components/PostCard.jsx
+++ b/src/components/PostCard.jsx
@@ -1,5 +1,6 @@
 import toast from "react-hot-toast";
 import { usePosts } from "../context/postContext";
+import ReactMarkdown from "react-markdown";
 import { useNavigate } from "react-router-dom";
 import moment from "moment";
 import logoImg from "../Images/postimg.jpg";
@@ -123,10 +124,12 @@ export function PostCard({ post }) {
 
       <div className="p-6">
         <h2 className="text-xl text-gray-800 font-semibold">{post.title}</h2>
-        <p className="text-lg font font-thin  text-black text-justify">
+
+        <ReactMarkdown className="text-lg font font-thin text-black text-justify">
           {post.description}
-        </p>
-      <h4 className="text-gray-400 capitalize my-2"> Source:{post.source}</h4>
+        </ReactMarkdown>
+
+        <h4 className="text-gray-400 capitalize my-2"> Source:{post.source}</h4>
       </div>
     </article>
   );
diff --git a/src/components/PostCardUser.jsx b/src/components/PostCardUser.jsx
index 1ac8052..a696402 100644
--- a/src/components/PostCardUser.jsx
+++ b/src/components/PostCardUser.jsx
@@ -1,17 +1,18 @@
 import moment from "moment";
+import ReactMarkdown from "react-markdown";
 import { insertMedia } from "./PostCard";
 import logoImg from "../Images/postimg.jpg";
 
 export function PostCardUser({ post }) {
   const normalDate = moment(post.createdAt).format("DD/MM/YYYY");
-  
+
   return (
     <article className="container mx-auto max-w-2xl bg-white rounded shadow-lg hover:scale-105 hover:shadow-2xl transform transition-all duration-500 m-10">
       <header className="flex items-center justify-between px-4">
         <div className="flex justify-between items-center py-4">
           <img className="w-12 rounded-full" src={logoImg} alt="logo" />
           <div className="ml-3">
-          <h1 className="text-xl font-bold text-gray-800 cursor-pointer">
+            <h1 className="text-xl font-bold text-gray-800 cursor-pointer">
               {post.author}
             </h1>
             <p className="text-sm text-gray-800 hover:underline cursor-pointer">
@@ -42,10 +43,13 @@ export function PostCardUser({ post }) {
 
       <div className="p-6">
         <h2 className="text-xl text-gray-800 font-semibold">{post.title}</h2>
-        <p className="text-lg font font-thin text-black text-justify">
+        <ReactMarkdown className="text-lg font font-thin text-black text-justify">
           {post.description}
-        </p>
-        <h4 className="text-gray-400 capitalize my-2"> Source:{post.source}</h4>
+        </ReactMarkdown>
+        <h4 className="text-gray-400 capitalize my-2">
+          {" "}
+          Source: {post.source}
+        </h4>
       </div>
     </article>
   );
diff --git a/src/pages/PostForm.js b/src/pages/PostForm.js
index bb1d34c..02a1413 100644
--- a/src/pages/PostForm.js
+++ b/src/pages/PostForm.js
@@ -1,8 +1,8 @@
+import React, { useState, useEffect } from "react";
 import { Formik, Form, Field, ErrorMessage } from "formik";
 import { usePosts } from "../context/postContext";
 import { useNavigate, useParams } from "react-router-dom";
 import * as Yup from "yup";
-import { useEffect, useState } from "react";
 import { Toaster, toast } from "react-hot-toast";
 import { getPostsRequest } from "../api/posts";
 
@@ -38,7 +38,7 @@ export function PostForm() {
   return (
     <div className="flex items-center justify-center">
       <div className="bg-blue-950 p-10 shadow-md shadow-black mt-7 animate-fade-down animate-once animate-duration-500 animate-ease-linear">
-        <header className="flex justify between items-center py-4 text-white">
+        <header className="flex justify-between items-center py-4 text-white">
           <h3 className="text-xl">New Post</h3>
         </header>
 
@@ -106,6 +106,7 @@ export function PostForm() {
                 name="description"
                 className="text-red-400 text-sm"
               />
+
               <label
                 htmlFor="categories"
                 className="text-sm block font-bold text-gray-400"
@@ -167,9 +168,9 @@ export function PostForm() {
                 onChange={(e) => {
                   const selectedImage = e.target.files[0];
                   setFieldValue("image", selectedImage);
-                  
+
                   const imageUrl = URL.createObjectURL(selectedImage);
-                 
+
                   document.getElementById("image-preview").src = imageUrl;
                 }}
               />