diff --git a/frontend/src/components/Comment/Comments.css b/frontend/src/components/Comment/Comment.css
similarity index 92%
rename from frontend/src/components/Comment/Comments.css
rename to frontend/src/components/Comment/Comment.css
index d98f1d6..8a35612 100644
--- a/frontend/src/components/Comment/Comments.css
+++ b/frontend/src/components/Comment/Comment.css
@@ -3,7 +3,7 @@
   padding: 15px;
   margin-bottom: 10px;
   background-color: #fff;
-  border: 1px solid #ccc; /* Add border around the comment */
+  border: 1px solid #ccc;
   border-radius: 8px;
   display: flex;
 }
diff --git a/frontend/src/components/Comment/Comment.jsx b/frontend/src/components/Comment/Comment.jsx
new file mode 100644
index 0000000..3e7b034
--- /dev/null
+++ b/frontend/src/components/Comment/Comment.jsx
@@ -0,0 +1,63 @@
+import React from "react";
+import { LikeCommentButton } from "../Like/Like";
+import "./Comment.css";
+
+const Comment = ({ comments, loggedInUser, fetchComments }) => {
+  const addOrdinalSuffix = (day) => {
+    if (day === 1 || day === 21 || day === 31) return day + "st";
+    if (day === 2 || day === 22) return day + "nd";
+    if (day === 3 || day === 23) return day + "rd";
+    return day + "th";
+  };
+
+  const formatDate = (createdAt) => {
+    const date = new Date(createdAt);
+    const day = addOrdinalSuffix(date.getDate());
+    const month = date.toLocaleString("en-GB", { month: "short" });
+    const time = date.toLocaleString("en-GB", {
+      hour: "numeric",
+      minute: "numeric",
+    });
+
+    return `${day} ${month} ${date.getFullYear()} at ${time}`;
+  };
+
+  return (
+    <div>
+      <div>
+        {comments.map((comment) => (
+          <div className="comment-container" key={comment._id}>
+            <div className="comment-content">
+              <div className="comment-user">
+                <img
+                  className="comment-profilePicture"
+                  src={comment.user.profilePicture}
+                  alt={comment.user.fullName}
+                />
+                <div className="comment-date-and-name">
+                  <div className="comment-fullName">
+                    {comment.user.fullName}
+                  </div>
+                  <div className="comment-date">
+                    {formatDate(comment.createdAt)}
+                  </div>
+                </div>
+              </div>
+              <div className="comment-text">{comment.comment_text}</div>
+              <div className="comment-like-button">
+                <LikeCommentButton
+                  commentId={comment._id}
+                  isLiked={comment.likedBy.includes(loggedInUser)}
+                  updateCommentLikeFeed={fetchComments}
+                />
+              </div>
+              <div className="comment-like-count">{comment.likedBy.length}</div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Comment;
diff --git a/frontend/src/components/Comment/Comments.jsx b/frontend/src/components/Comment/Comments.jsx
index 7155b43..95131b6 100644
--- a/frontend/src/components/Comment/Comments.jsx
+++ b/frontend/src/components/Comment/Comments.jsx
@@ -1,11 +1,10 @@
 import React, { useState, useEffect } from "react";
 import { getComments } from "../../services/comments";
-import { LikeCommentButton } from "../Like/Like";
+import Comment from "./Comment";
 import CreateComment from "./CreateComment";
-import "./Comments.css";
 
 const Comments = ({ postId }) => {
-  const [commentData, setCommentData] = useState([]);
+  const [comments, setComments] = useState([]);
 
   const loggedInUser = localStorage.getItem("userId");
 
@@ -15,7 +14,7 @@ const Comments = ({ postId }) => {
       getComments(postId, token) // Fetch comments for the specific post
         .then((data) => {
           console.log("Received comment data:", data);
-          setCommentData(data.comments);
+          setComments(data.comments);
         })
         .catch((error) => console.error("Error fetching comments:", error));
     }
@@ -25,62 +24,17 @@ const Comments = ({ postId }) => {
     fetchComments();
   }, []);
 
-  const addOrdinalSuffix = (day) => {
-    if (day === 1 || day === 21 || day === 31) return day + "st";
-    if (day === 2 || day === 22) return day + "nd";
-    if (day === 3 || day === 23) return day + "rd";
-    return day + "th";
-  };
-
   return (
-    <div>
+    <>
       <div className="create-comment">
         <CreateComment postId={postId} updateCommentFeed={fetchComments} />
       </div>
-      <div>
-        {commentData.map((comment) => {
-          const date = new Date(comment.createdAt);
-          const day = addOrdinalSuffix(date.getDate());
-          const month = date.toLocaleString("en-GB", { month: "short" });
-          const time = date.toLocaleString("en-GB", {
-            hour: "numeric",
-            minute: "numeric",
-          });
-
-          const formattedDate = `${day} ${month} ${date.getFullYear()} at ${time}`;
-
-          return (
-            <div className="comment-container" key={comment._id}>
-              <div className="comment-content">
-                <div className="comment-user">
-                  <img
-                    className="comment-profilePicture"
-                    src={comment.user.profilePicture}
-                  />
-                  <div className="comment-date-and-name">
-                    <div className="comment-fullName">
-                      {comment.user.fullName}
-                    </div>
-                    <div className="comment-date">{formattedDate}</div>
-                  </div>
-                </div>
-                <div className="comment-text">{comment.comment_text}</div>
-                <div className="comment-like-button">
-                  <LikeCommentButton
-                    commentId={comment._id}
-                    isLiked={comment.likedBy.includes(loggedInUser)}
-                    updateCommentLikeFeed={fetchComments}
-                  />
-                </div>
-                <div className="comment-like-count">
-                  {comment.likedBy.length}
-                </div>
-              </div>
-            </div>
-          );
-        })}
-      </div>
-    </div>
+      <Comment
+        comments={comments}
+        loggedInUser={loggedInUser}
+        fetchComments={fetchComments}
+      />
+    </>
   );
 };
 
diff --git a/frontend/src/components/NavBar/Navbar.css b/frontend/src/components/NavBar/Navbar.css
index 03d44ce..74ec439 100644
--- a/frontend/src/components/NavBar/Navbar.css
+++ b/frontend/src/components/NavBar/Navbar.css
@@ -5,7 +5,7 @@
   width: 100%;
   display: flex;
   justify-content: space-between; /* Add this to push the profile picture to the left and links to the right */
-  align-items: center; /* Center vertically */
+  align-items: center;
   padding: 5px;
   background-color: #1b83a4;
   z-index: 999;
@@ -36,14 +36,9 @@
 }
 
 .navbar__right a:hover {
-  color: #ffffff; /* Change text color on hover */
-  background-color: rgba(
-    255,
-    255,
-    255,
-    0.1
-  ); /* Change background color on hover */
-  border-color: #fff; /* Change border color on hover */
+  color: #ffffff;
+  background-color: rgba(255, 255, 255, 0.1);
+  border-color: #fff;
 }
 
 .navbar__right a {
@@ -59,11 +54,11 @@
 }
 
 .navbar_profile_pic {
-  width: 45px; /* Adjust size as needed */
-  height: 45px; /* Adjust size as needed */
+  width: 45px;
+  height: 45px;
   border-radius: 50%;
 
-  margin-left: 10px; /* Add margin between image and text */
+  margin-left: 10px;
   margin-top: 5px;
   margin-bottom: 5px;
 }
diff --git a/frontend/src/components/Post/CreatePost.css b/frontend/src/components/Post/CreatePost.css
index 207c3bb..0248709 100644
--- a/frontend/src/components/Post/CreatePost.css
+++ b/frontend/src/components/Post/CreatePost.css
@@ -30,7 +30,6 @@
   float: right;
 }
 
-/* Hover state */
 .image-button:hover {
-  background-color: #ffffff; /* Change background color on hover */
+  background-color: #ffffff;
 }
diff --git a/frontend/src/components/Post/Posts.css b/frontend/src/components/Post/Post.css
similarity index 100%
rename from frontend/src/components/Post/Posts.css
rename to frontend/src/components/Post/Post.css
diff --git a/frontend/src/components/Post/Post.jsx b/frontend/src/components/Post/Post.jsx
new file mode 100644
index 0000000..895ecd1
--- /dev/null
+++ b/frontend/src/components/Post/Post.jsx
@@ -0,0 +1,66 @@
+import React, { useEffect } from "react";
+import { LikePostButton } from "../Like/Like";
+import Comments from "../Comment/Comments";
+import "./Post.css";
+
+const Post = ({ posts, loggedInUser, fetchPosts }) => {
+  const addOrdinalSuffix = (day) => {
+    if (day === 1 || day === 21 || day === 31) return day + "st";
+    if (day === 2 || day === 22) return day + "nd";
+    if (day === 3 || day === 23) return day + "rd";
+    return day + "th";
+  };
+
+  const formatDate = (createdAt) => {
+    const date = new Date(createdAt);
+    const day = addOrdinalSuffix(date.getDate());
+    const month = date.toLocaleString("en-GB", { month: "short" });
+    const time = date.toLocaleString("en-GB", {
+      hour: "numeric",
+      minute: "numeric",
+    });
+
+    return `${day} ${month} ${date.getFullYear()} at ${time}`;
+  };
+
+  return (
+    <>
+      <div>
+        {posts.map((post) => (
+          <div className="post" key={post._id}>
+            <div className="post-border">
+              <div className="post-header-container">
+                <img
+                  className="post-profile_picture"
+                  src={post.user.profilePicture}
+                  alt="Profile"
+                />
+                <div>
+                  <div className="post-user-fullName">{post.user.fullName}</div>
+                  <div className="post-date">{formatDate(post.createdAt)}</div>
+                </div>
+              </div>
+              {post.image && (
+                <img className="post_image" src={post.image} alt="Post" />
+              )}
+              <div className="post-message">{post.message}</div>
+              <div className="post-like-button">
+                <LikePostButton
+                  postId={post._id}
+                  isLiked={post.likedBy.includes(loggedInUser)}
+                  updatePostLikeFeed={fetchPosts}
+                />
+              </div>
+              <div className="post-like-counter">{post.likedBy.length}</div>
+            </div>
+            <div>
+              <Comments postId={post._id} />
+            </div>
+          </div>
+        ))}
+      </div>
+    </>
+  );
+};
+
+export default Post;
diff --git a/frontend/src/components/Post/Posts.jsx b/frontend/src/components/Post/Posts.jsx
index 6394eed..d7aa45f 100644
--- a/frontend/src/components/Post/Posts.jsx
+++ b/frontend/src/components/Post/Posts.jsx
@@ -1,10 +1,8 @@
 import React, { useState, useEffect } from "react";
 import { getPosts } from "../../services/posts";
-import { LikePostButton } from "../Like/Like";
 import CreatePost from "./CreatePost";
+import Post from "./Post";
 import { useNavigate } from "react-router-dom";
-import Comments from "../Comment/Comments";
-import "./Posts.css";
 
 const Posts = () => {
   const [posts, setPosts] = useState([]);
@@ -32,67 +30,20 @@ const Posts = () => {
     fetchPosts();
   }, []);
 
-  const addOrdinalSuffix = (day) => {
-    if (day === 1 || day === 21 || day === 31) return day + "st";
-    if (day === 2 || day === 22) return day + "nd";
-    if (day === 3 || day === 23) return day + "rd";
-    return day + "th";
-  };
-
   return (
     <>
       <div className="createpost">
         <CreatePost updatePostFeed={fetchPosts} />
       </div>
       <div>
-        {posts.map((post) => {
-          const date = new Date(post.createdAt);
-          const day = addOrdinalSuffix(date.getDate());
-          const month = date.toLocaleString("en-GB", { month: "short" });
-          const time = date.toLocaleString("en-GB", {
-            hour: "numeric",
-            minute: "numeric",
-          });
-
-          const formattedDate = `${day} ${month} ${date.getFullYear()} at ${time}`;
-
-          return (
-            <div className="post" key={post._id}>
-              <div className="post-border">
-                <div className="post-header-container">
-                  <img
-                    className="post-profile_picture"
-                    src={post.user.profilePicture}
-                    alt="Profile"
-                  />
-                  <div>
-                    <div className="post-user-fullName">
-                      {post.user.fullName}
-                    </div>
-                    <div className="post-date">{formattedDate}</div>
-                  </div>
-                </div>
-                {post.image && (
-                  <img className="post_image" src={post.image} alt="Post" />
-                )}
-                <div className="post-message">{post.message}</div>
-                <div className="post-like-button">
-                  <LikePostButton
-                    postId={post._id}
-                    isLiked={post.likedBy.includes(loggedInUser)}
-                    updatePostLikeFeed={fetchPosts}
-                  />
-                </div>
-                <div className="post-like-counter">{post.likedBy.length}</div>
-              </div>
-              <div>
-                <Comments postId={post._id} />
-              </div>
-            </div>
-          );
-        })}
+        <Post
+          posts={posts}
+          loggedInUser={loggedInUser}
+          fetchPosts={fetchPosts}
+        />
       </div>
     </>
   );
 };
+
 export default Posts;
diff --git a/frontend/src/components/User/userDetails.css b/frontend/src/components/User/userDetails.css
index afa4d36..9f0b77d 100644
--- a/frontend/src/components/User/userDetails.css
+++ b/frontend/src/components/User/userDetails.css
@@ -1,54 +1,50 @@
-/* userDetails.css */
-
 .user-details-container {
-    max-width: 500px;
-    margin: 0 auto;
-    padding: 30px;
-    border: 2px solid #ccc;
-    border-radius: 12px;
-    background-color: #fff;
-    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
+  max-width: 500px;
+  margin: 0 auto;
+  padding: 30px;
+  border: 2px solid #ccc;
+  border-radius: 12px;
+  background-color: #fff;
+  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
 }
 
 .user-details-container h1 {
-    font-size: 28px;
-    margin-bottom: 30px;
-    text-align: center;
+  font-size: 28px;
+  margin-bottom: 30px;
+  text-align: center;
 }
 
 .user-details-container .user-info {
-    display: flex;
-    align-items: center;
-    margin-bottom: 30px;
+  display: flex;
+  align-items: center;
+  margin-bottom: 30px;
 }
 
 .user-details-container .user-info img {
-    width: 120px;
-    height: 120px;
-    border-radius: 12px; /* Make the border-radius match the border-radius of the container */
-    margin-right: 30px;
-    object-fit: cover; /* Ensure the image covers the entire container */
+  width: 120px;
+  height: 120px;
+  border-radius: 12px;
+  margin-right: 30px;
+  object-fit: cover; /* Ensure the image covers the entire container */
 }
 
 .user-details-container .user-info .user-name {
-    font-size: 24px;
-    font-weight: bold;
+  font-size: 24px;
+  font-weight: bold;
 }
-/*neeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeewwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww*/
 
 .profile_pic {
-	animation: swirl-in-top-fwd 0.6s ease-out both;
+  animation: swirl-in-top-fwd 0.6s ease-out both;
 }
- @keyframes swirl-in-top-fwd {
-    0% {
-      transform: rotate(-540deg) scale(0);
-      transform-origin: 50% 0;
-      opacity: 0;
-    }
-    100% {
-      transform: rotate(0) scale(1);
-      transform-origin: 50% 0;
-      opacity: 1;
-    }
+@keyframes swirl-in-top-fwd {
+  0% {
+    transform: rotate(-540deg) scale(0);
+    transform-origin: 50% 0;
+    opacity: 0;
+  }
+  100% {
+    transform: rotate(0) scale(1);
+    transform-origin: 50% 0;
+    opacity: 1;
   }
-  
\ No newline at end of file
+}