diff --git a/.env b/.env
new file mode 100644
index 0000000..49597e7
--- /dev/null
+++ b/.env
@@ -0,0 +1,7 @@
+REACT_APP_API_KEY="AIzaSyD9tMXwqU7ijIKnQu0vsX1UoR9FM_w7r2E"
+REACT_APP_AUTH_DOMAIN="blog-5814a.firebaseapp.com"
+REACT_APP_PROJECT_ID="blog-5814a"
+REACT_APP_STORAGE_BUCKET="blog-5814a.appspot.com"
+REACT_APP_MESSAGE_SENDER_ID="787500061298"
+REACT_APP_APP_ID="1:787500061298:web:242f526d6800f0bbbf68eb"
+GENERATE_SOURCEMAP=false
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index f0ec407..5a04d4c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "@testing-library/user-event": "^13.5.0",
         "boxicons": "^2.1.4",
         "firebase": "^9.15.0",
+        "jodit-react": "^1.3.39",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-modal": "^3.16.1",
@@ -5861,6 +5862,15 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/autobind-decorator": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/autobind-decorator/-/autobind-decorator-2.4.0.tgz",
+      "integrity": "sha512-OGYhWUO72V6DafbF8PM8rm3EPbfuyMZcJhtm5/n26IDwO18pohE4eNazLoCGhPiXOCD0gEGmrbU3849QvM8bbw==",
+      "engines": {
+        "node": ">=8.10",
+        "npm": ">=6.4.1"
+      }
+    },
     "node_modules/autoprefixer": {
       "version": "10.4.14",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.14.tgz",
@@ -12604,6 +12614,27 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/jodit": {
+      "version": "3.24.9",
+      "resolved": "https://registry.npmjs.org/jodit/-/jodit-3.24.9.tgz",
+      "integrity": "sha512-t2d73v7GFbGI08ZzdCTwrzi8ZtoOG4icGzD6IIN2e+ghlpUKYxcHZ/Rmy6/mc6055172z+tv7QSr9BcOz6IOFQ==",
+      "dependencies": {
+        "autobind-decorator": "^2.4.0",
+        "core-js": "^3.28.0"
+      }
+    },
+    "node_modules/jodit-react": {
+      "version": "1.3.39",
+      "resolved": "https://registry.npmjs.org/jodit-react/-/jodit-react-1.3.39.tgz",
+      "integrity": "sha512-uZSRadPlgvcB6Wn54RGZ6XQEN+JHj0dB1SI4OH42yTC5WTeoYavksUwzCgFuQF4+janjSCxn0CXNqzd0MJEhVw==",
+      "dependencies": {
+        "jodit": "^3.20.2"
+      },
+      "peerDependencies": {
+        "react": "~0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "~0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -22770,6 +22801,11 @@
       "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
       "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg=="
     },
+    "autobind-decorator": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/autobind-decorator/-/autobind-decorator-2.4.0.tgz",
+      "integrity": "sha512-OGYhWUO72V6DafbF8PM8rm3EPbfuyMZcJhtm5/n26IDwO18pohE4eNazLoCGhPiXOCD0gEGmrbU3849QvM8bbw=="
+    },
     "autoprefixer": {
       "version": "10.4.14",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.14.tgz",
@@ -27681,6 +27717,23 @@
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.18.2.tgz",
       "integrity": "sha512-QAdOptna2NYiSSpv0O/BwoHBSmz4YhpzJHyi+fnMRTXFjp7B8i/YG5Z8IfusxB1ufjcD2Sre1F3R+nX3fvy7gg=="
     },
+    "jodit": {
+      "version": "3.24.9",
+      "resolved": "https://registry.npmjs.org/jodit/-/jodit-3.24.9.tgz",
+      "integrity": "sha512-t2d73v7GFbGI08ZzdCTwrzi8ZtoOG4icGzD6IIN2e+ghlpUKYxcHZ/Rmy6/mc6055172z+tv7QSr9BcOz6IOFQ==",
+      "requires": {
+        "autobind-decorator": "^2.4.0",
+        "core-js": "^3.28.0"
+      }
+    },
+    "jodit-react": {
+      "version": "1.3.39",
+      "resolved": "https://registry.npmjs.org/jodit-react/-/jodit-react-1.3.39.tgz",
+      "integrity": "sha512-uZSRadPlgvcB6Wn54RGZ6XQEN+JHj0dB1SI4OH42yTC5WTeoYavksUwzCgFuQF4+janjSCxn0CXNqzd0MJEhVw==",
+      "requires": {
+        "jodit": "^3.20.2"
+      }
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
diff --git a/package.json b/package.json
index 16d1212..80ae964 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "@testing-library/user-event": "^13.5.0",
     "boxicons": "^2.1.4",
     "firebase": "^9.15.0",
+    "jodit-react": "^1.3.39",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-modal": "^3.16.1",
diff --git a/src/pages/Blogpost.js b/src/pages/Blogpost.js
index 7ee2986..123ca64 100644
--- a/src/pages/Blogpost.js
+++ b/src/pages/Blogpost.js
@@ -10,6 +10,7 @@ const Blogpost = () => {
   const [postLists, setPostList] = useState([]);
   const [post, setPost] = useState();
   const navigate = useNavigate();
+
   useEffect(() => {
     console.log(postId.blogname);
     const getPosts = async () => {
@@ -30,9 +31,11 @@ const Blogpost = () => {
     navigator.clipboard.writeText(`https://blogweet.vercel.app${s}`);
     toast(`Your link has been pasted to your Clipboard. Enjoy!`);
   };
-  // const postInfo = postLists.filter((x) => x.id === postId.blogname)[0];
-  // console.log(Array.of(postInfo)[0]);
-  // const post = Array.of(postInfo)[0];
+
+  const renderPostContent = () => {
+    return { __html: post.postText };
+  };
+
   return (
     <div className="blogpage">
       {post && (
@@ -76,10 +79,10 @@ const Blogpost = () => {
             </div>
           </div>
           <hr />
-          <div className="blogContent">
-            <img src={post.image} alt={post.title} />
-            <p>{post.postText}</p>
-          </div>
+          <div
+            className="blogContent"
+            dangerouslySetInnerHTML={renderPostContent()}
+          ></div>
         </>
       )}
       <ToastContainer
diff --git a/src/pages/CreatePost.css b/src/pages/CreatePost.css
new file mode 100644
index 0000000..0e79189
--- /dev/null
+++ b/src/pages/CreatePost.css
@@ -0,0 +1,30 @@
+/* CreatePost.css */
+
+.jodit-editor-container {
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    padding: 8px;
+  }
+  
+  .jodit-editor-container .jodit-wysiwyg {
+    font-family: Arial, sans-serif;
+    font-size: 12px;
+    color: #333;
+  }
+  
+  .jodit-editor-container .jodit-wysiwyg p {
+    margin: 0;
+  }
+  
+  .jodit-editor-container .jodit-wysiwyg ul,
+  .jodit-editor-container .jodit-wysiwyg ol {
+    padding-left: 20px;
+  }
+  
+  .jodit-editor-container .jodit-wysiwyg ul li,
+  .jodit-editor-container .jodit-wysiwyg ol li {
+    margin-bottom: 5px;
+  }
+  
+  /* Add any additional styles as per your preference */
+  
\ No newline at end of file
diff --git a/src/pages/CreatePost.js b/src/pages/CreatePost.js
index 15eb424..e384a73 100644
--- a/src/pages/CreatePost.js
+++ b/src/pages/CreatePost.js
@@ -1,29 +1,42 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef,useMemo } from "react";
 import { addPostToDb } from "../utils/firebase";
 import { useNavigate } from "react-router-dom";
-import Modal from "./Modal"; // Import the Modal component
+import Modal from "./Modal";
+import "jodit";
+import "jodit/build/jodit.min.css";
+import JoditEditor from "jodit-react";
+import "./CreatePost.css"; // Import your custom CSS file
 
 function CreatePost({ isAuth }) {
   const [title, setTitle] = useState("");
   const [postText, setPostText] = useState("");
-  const [image, setImage] = useState("");
-  const [modalMessage, setModalMessage] = useState(""); // State for the modal message
-  const [showModal, setShowModal] = useState(false); // State to control the modal visibility
+  const [imageUrl, setImageUrl] = useState("");
+  const [uploadedImage, setUploadedImage] = useState("");
+  const [modalMessage, setModalMessage] = useState("");
+  const [showModal, setShowModal] = useState(false);
+  const editorRef = useRef(null);
   let navigate = useNavigate();
 
+  const config = useMemo(
+    () => ({
+        readonly: false, 
+    }),
+    []
+);
+
   const createPost = async () => {
-    if (!title || !postText || !image) {
-      setModalMessage("Please fill all the fields"); // Set the modal message
-      setShowModal(true); // Show the modal
+    if (!title || !postText || (!imageUrl && !uploadedImage)) {
+      setModalMessage("Please fill all the fields");
+      setShowModal(true);
       return;
     }
-    console.log(title, postText, image);
+    console.log(title, postText, imageUrl || uploadedImage);
     if (getWordCount(postText) < 20) {
-      setModalMessage("The post must contain at least 20 words."); // Set the modal message
-      setShowModal(true); // Show the modal
+      setModalMessage("The post must contain at least 20 words.");
+      setShowModal(true);
       return;
     }
-    await addPostToDb(title, postText, image);
+    await addPostToDb(title, postText, imageUrl || uploadedImage);
     navigate("/");
   };
 
@@ -31,11 +44,44 @@ function CreatePost({ isAuth }) {
     if (!isAuth) {
       navigate("/login");
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const hanldleImageUpload = (e) => {
-    setImage(e.target.value);
+  const handleImageUpload = (e) => {
+    const file = e.target.files[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        setUploadedImage(reader.result);
+        setImageUrl("");
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  const handleImageUrlChange = (e) => {
+    setUploadedImage("");
+    setImageUrl(e.target.value);
+  };
+
+  const fetchImageUrl = async () => {
+    try {
+      const response = await fetch(imageUrl);
+      if (response.ok) {
+        const blob = await response.blob();
+        const reader = new FileReader();
+        reader.onloadend = () => {
+          setUploadedImage(reader.result);
+        };
+        reader.readAsDataURL(blob);
+      } else {
+        setModalMessage("Failed to fetch the image from the provided URL");
+        setShowModal(true);
+      }
+    } catch (error) {
+      console.error("Error fetching image URL:", error);
+      setModalMessage("Failed to fetch the image from the provided URL");
+      setShowModal(true);
+    }
   };
 
   const getWordCount = (text) => {
@@ -46,12 +92,16 @@ function CreatePost({ isAuth }) {
     setShowModal(false);
   };
 
+  const handleEditorChange = (value) => {
+    setPostText(value);
+  };
+
   return (
     <div className="createPostPage">
       <div className="cpContainer">
         <h1>Create A Post</h1>
-        <div className="inputGp">
-          <label> Title:</label>
+        <div className="inputGp mt">
+          <label>Title:</label>
           <input
             placeholder="Title..."
             value={title}
@@ -59,22 +109,34 @@ function CreatePost({ isAuth }) {
           />
         </div>
         <div className="inputGp">
-          <label> Post:</label>
-          <textarea
-            placeholder="Post..."
-            value={postText}
-            onChange={(e) => setPostText(e.target.value)}
-          />
+          <label>Post:</label>
+          <div className="jodit-editor-container">
+            <JoditEditor
+              ref={editorRef}
+              value={postText}
+              onChange={handleEditorChange}
+              config={config}
+            />
+          </div>
         </div>
         <div className="inputImg">
-          <label> Image Link</label>
+          <label>Image Upload:</label>
           <div className="cont">
-            <input placeholder="https://" onChange={hanldleImageUpload} />
-            <img src={image} alt="Uploaded preview" />
+            <input type="file" accept="image/*" onChange={handleImageUpload} />
+            {uploadedImage && <img src={uploadedImage} alt="Uploaded preview" />}
           </div>
         </div>
+        <div className="inputGp">
+          <label>Image URL:</label>
+          <input
+            placeholder="Image URL..."
+            value={imageUrl}
+            onChange={handleImageUrlChange}
+          />
+          {imageUrl && <button onClick={fetchImageUrl}>Fetch Image</button>}
+        </div>
 
-        <button onClick={createPost}> Submit Post </button>
+        <button onClick={createPost}>Submit Post</button>
       </div>
 
       {showModal && <Modal message={modalMessage} closeModal={closeModal} />}
diff --git a/src/pages/Home.js b/src/pages/Home.js
index 8cab67b..e0a59a3 100644
--- a/src/pages/Home.js
+++ b/src/pages/Home.js
@@ -170,6 +170,7 @@ function Home({ isAuth }) {
                 </div>
                 <div className="postTextContainer">
                   <div style={{ height: "70px", overflow: "hidden" }}>
+                <div dangerouslySetInnerHTML={{ __html: post.postText }} />
                     {post.postText.substr(
                       0,
                       Math.min(post.postText.length, 200)