diff --git a/package-lock.json b/package-lock.json
index 5c35d07..5831e0e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -30,7 +30,7 @@
         "react-hot-toast": "^2.4.1",
         "react-icons": "^4.8.0",
         "react-markdown": "^9.0.0",
-        "react-router-dom": "^6.14.2",
+        "react-router-dom": "^6.21.1",
         "react-scripts": "5.0.1",
         "react-simplemde-editor": "^5.2.0",
         "simplemde": "^1.11.2",
@@ -3616,11 +3616,11 @@
       }
     },
     "node_modules/@remix-run/router": {
-      "version": "1.7.2",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.7.2.tgz",
-      "integrity": "sha512-7Lcn7IqGMV+vizMPoEl5F0XDshcdDYtMI6uJLQdQz5CfZAwy3vvGKYSUk789qndt5dEC4HfSjviSYlSoHGL2+A==",
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.14.1.tgz",
+      "integrity": "sha512-Qg4DMQsfPNAs88rb2xkdk03N3bjK4jgX5fR24eHCTR9q6PrhZQZ4UJBPzCHJkIpTRN1UKxx2DzjZmnC+7Lj0Ow==",
       "engines": {
-        "node": ">=14"
+        "node": ">=14.0.0"
       }
     },
     "node_modules/@rollup/plugin-babel": {
@@ -15475,29 +15475,29 @@
       }
     },
     "node_modules/react-router": {
-      "version": "6.14.2",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.14.2.tgz",
-      "integrity": "sha512-09Zss2dE2z+T1D03IheqAFtK4UzQyX8nFPWx6jkwdYzGLXd5ie06A6ezS2fO6zJfEb/SpG6UocN2O1hfD+2urQ==",
+      "version": "6.21.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.21.1.tgz",
+      "integrity": "sha512-W0l13YlMTm1YrpVIOpjCADJqEUpz1vm+CMo47RuFX4Ftegwm6KOYsL5G3eiE52jnJpKvzm6uB/vTKTPKM8dmkA==",
       "dependencies": {
-        "@remix-run/router": "1.7.2"
+        "@remix-run/router": "1.14.1"
       },
       "engines": {
-        "node": ">=14"
+        "node": ">=14.0.0"
       },
       "peerDependencies": {
         "react": ">=16.8"
       }
     },
     "node_modules/react-router-dom": {
-      "version": "6.14.2",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.14.2.tgz",
-      "integrity": "sha512-5pWX0jdKR48XFZBuJqHosX3AAHjRAzygouMTyimnBPOLdY3WjzUSKhus2FVMihUFWzeLebDgr4r8UeQFAct7Bg==",
+      "version": "6.21.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.21.1.tgz",
+      "integrity": "sha512-QCNrtjtDPwHDO+AO21MJd7yIcr41UetYt5jzaB9Y1UYaPTCnVuJq6S748g1dE11OQlCFIQg+RtAA1SEZIyiBeA==",
       "dependencies": {
-        "@remix-run/router": "1.7.2",
-        "react-router": "6.14.2"
+        "@remix-run/router": "1.14.1",
+        "react-router": "6.21.1"
       },
       "engines": {
-        "node": ">=14"
+        "node": ">=14.0.0"
       },
       "peerDependencies": {
         "react": ">=16.8",
diff --git a/package.json b/package.json
index 8904574..1c8cf0e 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
     "react-hot-toast": "^2.4.1",
     "react-icons": "^4.8.0",
     "react-markdown": "^9.0.0",
-    "react-router-dom": "^6.14.2",
+    "react-router-dom": "^6.21.1",
     "react-scripts": "5.0.1",
     "react-simplemde-editor": "^5.2.0",
     "simplemde": "^1.11.2",
diff --git a/src/App.js b/src/App.js
index 0dae341..886134e 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,4 +1,4 @@
-import { HomePage, PostForm, NotFoundPage } from "./pages/index";
+import { HomePage, PostForm, NotFoundPage, SubscriptionPage } from "./pages/index";
 import { Routes, Route } from "react-router-dom";
 import { PostProvider } from "./context/postContext";
 import { Toaster } from "react-hot-toast";
@@ -10,6 +10,7 @@ import Navbar from "./components/Navbar/Navbar";
 import ContactForm from "./pages/Contact";
 import { DefaultCarousel } from "./components/Carousel/Carousel";
 import UserList from "./pages/Users";
+import { PostDetailsCard } from "./components/PostDetailsCard";
 
 function App() {
   return (
@@ -23,11 +24,12 @@ function App() {
           <Route path="login" exact element={<Login />} />
           <Route path="/" exact element={<HomePageWithCarousel />} />
           <Route path="/contact" exact element={<ContactForm />} />
-
+          <Route path="/post/:id" exact element={<PostDetailsCard />} />
+          <Route path="/subscription" exact element={<SubscriptionPage />} />
           {/* Private routes */}
           <Route element={<RequiresAuth allowedRoles={["moderator"]} />}>
             <Route path="/admin" exact element={<HomePage />} />
-            <Route path="/posts/:id" element={<PostForm />} />
+            <Route path="/edit/:id" element={<PostForm />} />
             <Route path="/new" exact element={<PostForm />} />
             <Route path="/users" exact element={<UserList />} />
           </Route>
diff --git a/src/components/Comments.jsx b/src/components/Comments.jsx
new file mode 100644
index 0000000..b848635
--- /dev/null
+++ b/src/components/Comments.jsx
@@ -0,0 +1,128 @@
+import React from "react";
+import moment from "moment";
+import axios from "axios";
+import toast from "react-hot-toast";
+import Cookies from "js-cookie";
+import { useState } from "react";
+
+export const Comment = ({ comment, onDelete, onEdit }) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editedText, setEditedText] = useState(comment.text);
+
+  const handleDeleteComment = async () => {
+    try {
+      await axios.delete(
+        `http://localhost:4000/api/posts/${comment._id}/comments/`,
+        {
+          withCredentials: true,
+        }
+      );
+
+      onDelete(comment._id);
+
+      toast.success("Comment successfully deleted.");
+    } catch (error) {
+      toast.error("Error deleting the comment", error);
+    }
+  };
+
+  const handleEditComment = async () => {
+    try {
+      const response = await axios.put(
+        `http://localhost:4000/api/posts/${comment._id}/comments/`,
+        { text: editedText },
+        {
+          withCredentials: true,
+        }
+      );
+
+      if (onEdit) {
+        onEdit(response.data);
+      }
+
+      toast.success("Comment successfully edited.");
+      setIsEditing(false);
+    } catch (error) {
+      toast.error("Error editing the comment", error);
+    }
+  };
+
+  const canEditAndDelete =
+    comment?.commentator?.trim() === Cookies.get("username")?.trim();
+
+  return (
+    <div className="comentario mb-3">
+      <div className="comentario-info">
+        <strong className="text-base font-semibold text-gray-900">
+          {comment.commentator}
+        </strong>
+        <small className="text-sm font-normal text-gray-500 ml-1">
+          -{moment(comment.createdAt).format("DD/MM/YYYY")}
+          <span className="isolate inline-flex rounded-md shadow-sm">
+            {canEditAndDelete && (
+              <>
+                {isEditing ? (
+                  <>
+                    <button
+                      type="button"
+                      className="relative inline-flex items-center bg-white px-2 py-1 text-xs font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
+                      onClick={handleEditComment}
+                    >
+                      Save
+                    </button>
+                    <button
+                      type="button"
+                      className="relative -ml-px inline-flex items-center rounded-r-md bg-white px-2 py-1 text-xs font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
+                      onClick={() => setIsEditing(false)}
+                    >
+                      Cancel
+                    </button>
+                  </>
+                ) : (
+                  <>
+                    <button
+                      type="button"
+                      className="relative inline-flex items-center rounded-l-md bg-white px-2 py-1 text-xs font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
+                      onClick={() => setIsEditing(true)}
+                    >
+                      Edit
+                    </button>
+                    <button
+                      type="button"
+                      className="relative -ml-px inline-flex items-center bg-white px-2 py-1 text-xs font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
+                      onClick={handleDeleteComment}
+                    >
+                      Delete
+                    </button>
+                  </>
+                )}
+              </>
+            )}
+          </span>
+        </small>
+      </div>
+      {isEditing ? (
+        <textarea
+          value={editedText}
+          onChange={(e) => setEditedText(e.target.value)}
+          className="text-sm text-gray-600 border p-1 mt-2"
+        />
+      ) : (
+        <div className="text-sm text-gray-600">{comment.text}</div>
+      )}
+    </div>
+  );
+};
+
+export const Comments = ({ comments, onDeleteComment, onEditComment }) => (
+  <div className="comentarios">
+    {comments.map((comment) => (
+      <Comment
+        key={comment._id}
+        comment={comment}
+        onDelete={onDeleteComment}
+        onEdit={onEditComment}
+      />
+    ))}
+  </div>
+);
diff --git a/src/components/Navbar/Location.jsx b/src/components/Navbar/Location.jsx
new file mode 100644
index 0000000..44ab7f9
--- /dev/null
+++ b/src/components/Navbar/Location.jsx
@@ -0,0 +1,18 @@
+import { useLocation } from "react-router-dom";
+
+export const useRouteVariables = () => {
+  const location = useLocation();
+
+  return {
+    isLoginPage: location.pathname === "/login",
+    isHomePage: location.pathname === "/",
+    isSignupPage: location.pathname === "/signup",
+    isFormPage: location.pathname === "/new",
+    isAdminPage: location.pathname === "/admin",
+    userListPage: location.pathname === "/users",
+    isContactPage: location.pathname === "/contact",
+    isSubscribePage: location.pathname === "/subscription",
+    isDetailPage: location.pathname.startsWith("/post/"),
+    hideHomeLink: location.pathname.startsWith("/posts/"),
+  };
+};
diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx
index feaf65a..3a2098d 100644
--- a/src/components/Navbar/Navbar.jsx
+++ b/src/components/Navbar/Navbar.jsx
@@ -1,20 +1,25 @@
 import React, { useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faSignOutAlt } from "@fortawesome/free-solid-svg-icons";
-import { Link, useLocation } from "react-router-dom";
+import { Link } from "react-router-dom";
 import useAuth from "../../hooks/useAuth";
 import Cookies from "js-cookie";
-
+import { useLocation } from "react-router-dom";
+import { useRouteVariables } from "./Location";
 const Navbar = () => {
   const location = useLocation();
-  const isLoginPage = location.pathname === "/login";
-  const isHomePage = location.pathname === "/";
-  const isSignupPage = location.pathname === "/signup";
-  const isFormPage = location.pathname === "/new";
-  const isAdminPage = location.pathname === "/admin";
-  const userListPage = location.pathname === "/users";
-  const isContactPage = location.pathname === "/contact";
-  
+  const {
+    isLoginPage,
+    isSignupPage,
+    hideHomeLink,
+    isAdminPage,
+    isDetailPage,
+    isFormPage,
+    userListPage,
+    isSubscribePage,
+    isHomePage,
+    isContactPage,
+  } = useRouteVariables();
   const { setAuth } = useAuth();
 
   const handleLogout = () => {
@@ -32,7 +37,7 @@ const Navbar = () => {
   if (isLoginPage || isSignupPage) {
     return null;
   }
-  const hideHomeLink = location.pathname.startsWith("/posts/");
+
   return (
     <header className="antialiased bg-white dark-mode:bg-gray-900">
       <nav className="w-full text-gray-700 bg-white dark-mode:text-gray-200 dark-mode:bg-gray-800">
@@ -70,7 +75,7 @@ const Navbar = () => {
               open ? "flex" : "hidden"
             } pb-4 md:pb-0 md:flex md:justify-end md:flex-row navbar-transition animate-flip-down duration-700`}
           >
-            { !hideHomeLink &&!isAdminPage && !isFormPage && !userListPage && (
+            {!hideHomeLink && !isAdminPage && !isFormPage && !userListPage && (
               <Link
                 to="/"
                 className="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline hover:underline"
@@ -78,6 +83,18 @@ const Navbar = () => {
                 Home
               </Link>
             )}
+            {!hideHomeLink &&
+              !isAdminPage &&
+              !isFormPage &&
+              !userListPage &&
+              !isSubscribePage && (
+                <Link
+                  to="/subscription"
+                  className="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline hover:underline"
+                >
+                  Subscribe
+                </Link>
+              )}
 
             {!isHomePage && isAdminPage && (
               <Link
@@ -90,7 +107,9 @@ const Navbar = () => {
 
             {(!isHomePage || (userListPage && !isContactPage)) &&
               !isAdminPage &&
-              location.pathname !== "/contact" && (
+              !isSubscribePage &&
+              location.pathname !== "/contact" &&
+              !isDetailPage && (
                 <Link
                   to="/admin"
                   className="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline hover:underline"
diff --git a/src/components/PostCard.jsx b/src/components/PostCard.jsx
index 53f5ecd..f487d9b 100644
--- a/src/components/PostCard.jsx
+++ b/src/components/PostCard.jsx
@@ -1,7 +1,7 @@
 import toast from "react-hot-toast";
 import { usePosts } from "../context/postContext";
 import ReactMarkdown from "react-markdown";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, Link } from "react-router-dom";
 import moment from "moment";
 import logoImg from "../Images/postimg.jpg";
 
@@ -14,14 +14,22 @@ export function insertMedia(filePath) {
     extension === "png" ||
     extension === "gif"
   ) {
-    return <img src={filePath} alt="Imagen" />;
+    return <img src={filePath} alt="Imagen" className="w-full" />;
   } else if (
     extension === "mp4" ||
     extension === "webm" ||
     extension === "ogv"
   ) {
     return (
-      <video src={filePath} alt="Video" controls autoPlay muted loop></video>
+      <video
+        src={filePath}
+        alt="Video"
+        controls
+        autoPlay
+        muted
+        loop
+        className="w-full"
+      ></video>
     );
   } else {
     return <p>Unsupported file type</p>;
@@ -31,7 +39,6 @@ export function insertMedia(filePath) {
 export function PostCard({ post }) {
   const { deletePost } = usePosts();
   const navigate = useNavigate();
-
   const normalDate = moment(post.createdAt).format("DD/MM/YYYY");
 
   const handleDelete = (id) => {
@@ -101,7 +108,7 @@ export function PostCard({ post }) {
         <div>
           <button
             className="text-sm px-2 py-1 rounded-sm group relative overflow-hidden  bg-white  shadow m-1"
-            onClick={() => navigate(`/posts/${post._id}`)}
+            onClick={() => navigate(`/edit/${post._id}`)}
           >
             <div className="absolute inset-0 w-0 bg-cyan-300 transition-all duration-[250ms] ease-out group-hover:w-full"></div>
             <span className="relative text-black group-hover:text-white">
@@ -120,17 +127,23 @@ export function PostCard({ post }) {
         </div>
       </header>
 
-      {post.image && insertMedia(post.image.url)}
-
-      <div className="p-6">
-        <h2 className="text-xl text-gray-800 font-semibold">{post.title}</h2>
+      <Link to={`/post/${post._id}`} state={{ post }}>
+        {post.image && insertMedia(post.image.url)}
+        <div className="p-6">
+          <h2 className="text-xl text-gray-800 font-semibold">{post.title}</h2>
 
-        <ReactMarkdown className="text-lg font font-thin text-black text-justify">
-          {post.description}
-        </ReactMarkdown>
+          <ReactMarkdown className="text-lg font font-thin text-black text-justify">
+            {post.description
+              ? `${post.description.substr(0, 330)}...Read More`
+              : "not description"}
+          </ReactMarkdown>
 
-        <h4 className="text-gray-400 capitalize my-2"> Source: {post.source}</h4>
-      </div>
+          <h4 className="text-gray-400 capitalize my-2">
+            {" "}
+            Source: {post.source}
+          </h4>
+        </div>
+      </Link>
     </article>
   );
 }
diff --git a/src/components/PostCardUser.jsx b/src/components/PostCardUser.jsx
index a696402..c2791cf 100644
--- a/src/components/PostCardUser.jsx
+++ b/src/components/PostCardUser.jsx
@@ -2,55 +2,45 @@ import moment from "moment";
 import ReactMarkdown from "react-markdown";
 import { insertMedia } from "./PostCard";
 import logoImg from "../Images/postimg.jpg";
+import { Link } from "react-router-dom";
 
 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">
-              {post.author}
-            </h1>
-            <p className="text-sm text-gray-800 hover:underline cursor-pointer">
-              {normalDate}
-            </p>
-            <p className="text-blue-400 capitalize "> {post.categories}</p>
+    <Link to={`/post/${post._id}`} state={{ post }}>
+      <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">
+                {post.author}
+              </h1>
+              <p className="text-sm text-gray-800 hover:underline cursor-pointer">
+                {normalDate}
+              </p>
+              <p className="text-blue-400 capitalize ">{post.categories}</p>
+            </div>
           </div>
-        </div>
-        <div>
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            className="h-7 w-7 cursor-not-allowed"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
-            />
-          </svg>
-        </div>
-      </header>
+        </header>
 
-      {post.image && insertMedia(post.image.url)}
+        {post.image && insertMedia(post.image.url)}
 
-      <div className="p-6">
-        <h2 className="text-xl text-gray-800 font-semibold">{post.title}</h2>
-        <ReactMarkdown className="text-lg font font-thin text-black text-justify">
-          {post.description}
-        </ReactMarkdown>
-        <h4 className="text-gray-400 capitalize my-2">
-          {" "}
-          Source: {post.source}
-        </h4>
-      </div>
-    </article>
+        <div className="p-6">
+          <h2 className="text-xl text-gray-800 font-semibold">{post.title}</h2>
+          <ReactMarkdown className="text-lg font font-thin text-black text-justify">
+            {post.description
+              ? `${post.description.substr(0, 330)}...Read More`
+              : "not description"}
+          </ReactMarkdown>
+
+          <h4 className="text-gray-400 capitalize my-2">
+            {" "}
+            Source: {post.source}
+          </h4>
+        </div>
+      </article>
+    </Link>
   );
 }
diff --git a/src/components/PostDetailsCard.jsx b/src/components/PostDetailsCard.jsx
new file mode 100644
index 0000000..184494e
--- /dev/null
+++ b/src/components/PostDetailsCard.jsx
@@ -0,0 +1,156 @@
+import React, { useState } from "react";
+import moment from "moment";
+import ReactMarkdown from "react-markdown";
+import { insertMedia } from "./PostCard";
+import logoImg from "../Images/postimg.jpg";
+import axios from "axios";
+import { useLocation } from "react-router-dom";
+import { Comments } from "./Comments";
+import toast from "react-hot-toast";
+import { SocialShare } from "./SocialShare";
+import { usePosts } from "../context/postContext";
+
+export function PostDetailsCard() {
+  const { state } = useLocation();
+  const normalDate = moment(state.post.createdAt).format("DD/MM/YYYY");
+  const [commentText, setCommentText] = useState("");
+  const { getPost } = usePosts();
+  const [postData, setPostData] = useState(state.post);
+
+  const handleCommentSubmit = async (e) => {
+    e.preventDefault();
+
+    const postId = state.post._id;
+
+    try {
+      const response = await axios.post(
+        `http://localhost:4000/api/posts/${postId}/comments`,
+        { text: commentText },
+        {
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${""}`,
+          },
+        }
+      );
+
+      if (response.status === 201) {
+        toast.success("Successful comment");
+        setCommentText("");
+        const updatedPost = await getPost(postId);
+        setPostData(updatedPost);
+      } else {
+        toast.error("Error posting comment");
+      }
+    } catch (error) {
+      toast.error("This didn't work.");
+    }
+  };
+
+  const handleDeleteComment = async (deletedCommentId) => {
+    try {
+      setPostData((prevPostData) => ({
+        ...prevPostData,
+        comments: prevPostData.comments.filter(
+          (comment) => comment._id !== deletedCommentId
+        ),
+      }));
+    } catch (error) {
+      toast.error("Error deleting comment", error);
+    }
+  };
+
+  const handleEditComment = async (editedComment) => {
+    try {
+      setPostData((prevPostData) => ({
+        ...prevPostData,
+        comments: prevPostData.comments.map((comment) =>
+          comment._id === editedComment._id ? editedComment : comment
+        ),
+      }));
+    } catch (error) {
+      toast.error("Error editing comment", error);
+    }
+  };
+  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">
+              {postData.author}
+            </h1>
+            <p className="text-sm text-gray-800 hover:underline cursor-pointer">
+              {normalDate}
+            </p>
+            <p className="text-blue-400 capitalize ">{postData.categories}</p>
+          </div>
+        </div>
+        <div>
+          <SocialShare />
+        </div>
+      </header>
+
+      {postData.image && insertMedia(postData.image.url)}
+
+      <div className="p-6">
+        <h2 className="text-xl text-gray-800 font-semibold">
+          {postData.title}
+        </h2>
+        <ReactMarkdown className="text-lg font font-thin text-black text-justify">
+          {postData.description}
+        </ReactMarkdown>
+        <h4 className="text-gray-400 capitalize my-2">
+          Source: {postData.source}
+        </h4>
+
+        <form onSubmit={handleCommentSubmit}>
+          <label
+            htmlFor="commentText"
+            className="block text-gray-800 font-medium mb-1"
+          >
+            Write your comment:
+          </label>
+          <textarea
+            id="commentText"
+            name="commentText"
+            value={commentText}
+            onChange={(e) => setCommentText(e.target.value)}
+            rows={4}
+            placeholder="Type your comment..."
+            className="px-3 py-2 border shadow-sm border-gray-300 rounded-md w-full block placeholder:text-gray-400 placeholder-gray-500
+            focus:outline-none focus:ring-1 bg-gray-50 focus:ring-blue-600 focus:border-blue-600 text-sm"
+            required
+          />
+          <button
+            type="submit"
+            className="mt-2 inline-flex items-center justify-center text-gray-100 font-medium leading-none
+            bg-blue-600 rounded-md py-2 px-3 border border-transparent transform-gpu hover:-translate-y-0.5 
+            transition-all ease-in duration-300 hover:text-gray-200 hover:bg-blue-700 text-sm "
+          >
+            Send comment
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="h-4 w-4 ml-2 rotate-90 "
+              viewBox="0 0 20 20"
+              fill="currentColor"
+            >
+              <path d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z" />
+            </svg>
+          </button>
+        </form>
+
+        <div className="text-base font-bold text-gray-700 mt-3 my-2">
+          {postData.comments.length} Comment(s)
+        </div>
+
+        <Comments
+          comments={postData.comments}
+          onDeleteComment={handleDeleteComment}
+          onEditComment={handleEditComment}
+        />
+      </div>
+    </article>
+  );
+}
diff --git a/src/components/SocialShare.jsx b/src/components/SocialShare.jsx
new file mode 100644
index 0000000..fee3e23
--- /dev/null
+++ b/src/components/SocialShare.jsx
@@ -0,0 +1,39 @@
+import { Dropdown } from "flowbite-react";
+import { FaFacebook, FaWhatsapp, FaLinkedin } from "react-icons/fa";
+
+export function SocialShare() {
+  return (
+    <Dropdown label="Share">
+      <Dropdown.Header>
+        <span className="block text-sm">TechTalk</span>
+        <span className="block truncate text-sm font-medium">
+          help@techtalk12.com
+        </span>
+      </Dropdown.Header>
+      <Dropdown.Item
+        icon={FaFacebook}
+        href={`https://www.facebook.com/sharer/sharer.php?u=https://techtalk-frontend-eotw69lik-edwin6666.vercel.app`}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        Facebook
+      </Dropdown.Item>
+      <Dropdown.Item
+        icon={FaWhatsapp}
+        href={`https://api.whatsapp.com/send?text=https://techtalk-frontend-eotw69lik-edwin6666.vercel.app`}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        WhatsApp
+      </Dropdown.Item>
+      <Dropdown.Item
+        icon={FaLinkedin}
+        href={`http://www.linkedin.com/shareArticle?url=https://techtalk-frontend-eotw69lik-edwin6666.vercel.app`}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        Linkedin
+      </Dropdown.Item>
+    </Dropdown>
+  );
+}
diff --git a/src/pages/HomePage.js b/src/pages/HomePage.js
index 501e51c..90918a9 100644
--- a/src/pages/HomePage.js
+++ b/src/pages/HomePage.js
@@ -20,11 +20,11 @@ export function HomePage() {
     );
   }
 
-  const reversedPosts = [...posts].reverse();
+ 
 
   return (
     <main className="flex flex-row flex-wrap">
-      {reversedPosts.map((post) => (
+      {posts.map((post) => (
         <article key={post._id} className="m-4">
           <PostCard post={post} />
         </article>
diff --git a/src/pages/HomePageUser.js b/src/pages/HomePageUser.js
index d2ba200..3b3b0b5 100644
--- a/src/pages/HomePageUser.js
+++ b/src/pages/HomePageUser.js
@@ -21,13 +21,16 @@ export function HomePageUser() {
         );
     }
     
-    const reversedPosts = [...posts].reverse();
+   
 
     return (
-        <div className="grid gap-4 w-25">
-            {reversedPosts.map(post => (
-                <PostCardUser post={post} key={post._id}/>
-            ))}
-        </div>
-    );
-}
+        <main className="flex flex-row flex-wrap justify-center items-center">
+          {posts.map((post) => (
+            <article key={post._id} className="m-4">
+              <PostCardUser post={post} />
+            </article>
+          ))}
+        </main>
+        
+      );
+    }
diff --git a/src/pages/PostForm.js b/src/pages/PostForm.js
index f82d82a..0307ecf 100644
--- a/src/pages/PostForm.js
+++ b/src/pages/PostForm.js
@@ -51,7 +51,6 @@ export function PostForm() {
             title: Yup.string().required("Title is Required"),
             description: Yup.string().required("Description is Required"),
             categories: Yup.string().transform((value, originalValue) => {
-              // Convert the value to a string
               return originalValue ? originalValue.toString() : value;
             }).required("Categories is Required"),
             source: Yup.string(),
diff --git a/src/pages/SubscribePage.js b/src/pages/SubscribePage.js
new file mode 100644
index 0000000..e448856
--- /dev/null
+++ b/src/pages/SubscribePage.js
@@ -0,0 +1,125 @@
+import React, { useState } from "react";
+import axios from "axios";
+import { toast } from "react-hot-toast";
+import { Link } from "react-router-dom";
+
+export const SubscriptionPage = () => {
+  const [email, setEmail] = useState("");
+
+  const handleSubscribe = async (e) => {
+    e.preventDefault();
+
+    if (!email.trim()) {
+      toast.error("Please enter your email address.");
+      return;
+    }
+
+    try {
+      const response = await axios.post(
+        "http://localhost:4000/api/users/activate-subscription",
+        {
+          email: email,
+        }
+      );
+
+      if (response.status === 200) {
+        toast.success("Subscription successful!");
+        setEmail("");
+      } else {
+        toast.error("Failed to subscribe");
+      }
+    } catch (error) {
+      if (error.response && error.response.status === 404) {
+        toast.error("Email not registered with us.");
+      } else {
+        toast.error("An error occurred:", error);
+      }
+    }
+  };
+
+  const handleUnsubscribe = async (e) => {
+    e.preventDefault();
+
+    if (!email.trim()) {
+      toast.error("Please enter your email address.");
+      return;
+    }
+
+    try {
+      const response = await axios.post(
+        "http://localhost:4000/api/users/unsubscribe",
+        {
+          email: email,
+        }
+      );
+
+      if (response.status === 200) {
+        toast.success("Unsubscribe successful!");
+        setEmail("");
+      } else {
+        toast.error("Failed to unsubscribe");
+      }
+    } catch (error) {
+      if (error.response && error.response.status === 404) {
+        toast.error("Email not registered with us.");
+      } else {
+        toast.error("An error occurred:", error);
+      }
+    }
+  };
+
+  return (
+    <div className="flex items-center justify-center h-screen bg-black dark:bg-gray-900">
+      <div className="w-full md:max-w-[510px] mx-auto px-4">
+        <div className="flex justify-end">
+          <Link to="/">
+            <img
+              width="32"
+              height="32"
+              src="https://img.icons8.com/ios/50/ffffff/delete-sign--v1.png"
+              alt="delete-sign--v1"
+              className="cursor-pointer"
+            />
+          </Link>
+        </div>
+        <div className="text-white text-center mt-4">
+          <div className="font-semibold text-2xl pb-4">
+            Do you want to receive notifications when there is a new post?
+          </div>
+          <p className="text-sm md:text-base">
+            Enter your email address to which you wish to receive notifications
+            from us. If you are already subscribed and want to unsubscribe,
+            enter your email and click on the unsubscribe button.
+          </p>
+        </div>
+        <div className="flex flex-col mt-8">
+          <input
+            type="email"
+            id="email"
+            name="email"
+            required
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            className="bg-transparent border-2 rounded-full py-4 px-6 text-[16px] leading-[22.4px] font-light placeholder:text-white text-white"
+            placeholder="E-mail Address"
+          />
+          <div className="flex flex-col mt-4 md:mt-6 md:flex-row md:space-x-4">
+            <button
+              onClick={handleUnsubscribe}
+              className="flex-1 h-auto rounded-full bg-white text-black py-3 px-6 hover:bg-red-500"
+            >
+              <span className="text-teal-900 font-semibold">Unsubscribe</span>
+            </button>
+            <button
+              type="submit"
+              onClick={handleSubscribe}
+              className="flex-1 h-auto rounded-full bg-white text-black py-3 px-6 mt-4 md:mt-0 hover:bg-green-400"
+            >
+              <span className="text-teal-900 font-semibold">Subscribe</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/src/pages/index.js b/src/pages/index.js
index efc7606..ed83361 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,3 +1,4 @@
 export {HomePage }from "./HomePage";
 export {PostForm} from "./PostForm";
 export {NotFoundPage} from "./NotFoundPage";
+export {SubscriptionPage} from './SubscribePage';
\ No newline at end of file