diff --git a/src/frontend/src/components/ProjectDetailsV2/Comments.tsx b/src/frontend/src/components/ProjectDetailsV2/Comments.tsx
index 14d55059d7..24f84b79f9 100644
--- a/src/frontend/src/components/ProjectDetailsV2/Comments.tsx
+++ b/src/frontend/src/components/ProjectDetailsV2/Comments.tsx
@@ -72,19 +72,41 @@ const Comments = () => {
             {projectCommentsList?.length > 0 ? (
               <div className="fmtm-flex fmtm-flex-col fmtm-gap-4 fmtm-mb-1">
                 {projectCommentsList?.map((projectComment, i) => (
-                  <div key={i} className="fmtm-flex fmtm-w-full fmtm-gap-4 fmtm-px-2">
+                  <div
+                    key={i}
+                    className="fmtm-flex fmtm-w-full fmtm-gap-4 fmtm-px-2 fmtm-border-b fmtm-border-[#e9e9e9] sm:fmtm-border-white fmtm-pb-3"
+                  >
                     <div className="fmtm-h-8 fmtm-w-8 fmtm-rounded-full fmtm-flex fmtm-justify-center fmtm-items-center fmtm-bg-white">
                       <AssetModules.PersonIcon color="success" sx={{ fontSize: '30px' }} />
                     </div>
-                    <div className=" fmtm-flex-1">
+                    <div className="fmtm-flex-1 fmtm-flex fmtm-flex-col fmtm-gap-1">
                       <div className="fmtm-flex fmtm-gap-3 fmtm-items-center">
                         <p>{projectComment?.commented_by}</p>
-                        <p className="fmtm-text-sm fmtm-text-gray-600">
-                          {projectComment?.created_at?.split('T')[0]} {projectComment?.created_at?.split('T')[1]}
-                        </p>
                       </div>
-                      <div className="fmtm-mt-2">
-                        <RichTextEditor editorHtmlContent={projectComment?.comment} editable={false} />
+                      <div>
+                        <RichTextEditor
+                          editorHtmlContent={projectComment?.comment}
+                          editable={false}
+                          className="sm:!fmtm-bg-[#f5f5f5] !fmtm-rounded-none !fmtm-border-none"
+                        />
+                      </div>
+                      <div className="fmtm-flex fmtm-items-center fmtm-justify-between">
+                        <p className="fmtm-font-archivo fmtm-text-sm fmtm-text-[#7A7676]">#{selectedTask}</p>
+                        <div className="fmtm-flex fmtm-items-center fmtm-gap-2">
+                          <div className="fmtm-flex fmtm-items-center fmtm-mb-1">
+                            <AssetModules.AccessTimeIcon
+                              className="fmtm-text-primaryRed"
+                              style={{ fontSize: '20px' }}
+                            />
+                          </div>
+                          <p className="fmtm-font-archivo fmtm-text-sm fmtm-text-[#7A7676] fmtm-flex fmtm-gap-2">
+                            <span>{projectComment?.created_at?.split('T')[0]}</span>
+                            <span>
+                              {projectComment?.created_at?.split('T')[1].split(':')[0]}:
+                              {projectComment?.created_at?.split('T')[1].split(':')[1]}
+                            </span>
+                          </p>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -96,7 +118,7 @@ const Comments = () => {
           </div>
         )}
       </div>
-      <div className="fmtm-pt-2">
+      <div className="fmtm-pt-2 sm:fmtm-max-h-[235px] sm:fmtm-overflow-scroll sm:scrollbar">
         <RichTextEditor
           editorHtmlContent={comment}
           setEditorHtmlContent={(content) => setComment(content)}
@@ -108,7 +130,7 @@ const Comments = () => {
         <div className="fmtm-w-1/2">
           <Button
             type="button"
-            btnText="Cancel"
+            btnText="CLEAR COMMENT"
             btnType="other"
             className="!fmtm-rounded !fmtm-py-[3px] fmtm-w-full fmtm-flex fmtm-justify-center"
             onClick={() => {
@@ -120,7 +142,7 @@ const Comments = () => {
         <div className="fmtm-w-1/2">
           <Button
             type="button"
-            btnText="Save Comment"
+            btnText="SAVE COMMENT"
             btnType="primary"
             className="!fmtm-rounded fmtm-w-full fmtm-flex fmtm-justify-center"
             onClick={handleComment}
diff --git a/src/frontend/src/components/ProjectDetailsV2/Instructions.tsx b/src/frontend/src/components/ProjectDetailsV2/Instructions.tsx
index 18bdba6fda..dbba6d21f5 100644
--- a/src/frontend/src/components/ProjectDetailsV2/Instructions.tsx
+++ b/src/frontend/src/components/ProjectDetailsV2/Instructions.tsx
@@ -5,7 +5,11 @@ const Instructions = ({ instructions }: { instructions: string }) => {
   return (
     <div className="fmtm-overflow-y-scroll scrollbar">
       {instructions ? (
-        <RichTextEditor editorHtmlContent={instructions} editable={false} />
+        <RichTextEditor
+          editorHtmlContent={instructions}
+          editable={false}
+          className="fmtm-p-2 sm:fmtm-p-0 sm:!fmtm-bg-[#f5f5f5] !fmtm-rounded-none !fmtm-border-none"
+        />
       ) : (
         <p className="fmtm-mt-5 fmtm-text-center fmtm-text-xl fmtm-text-gray-400">No Instructions!</p>
       )}
diff --git a/src/frontend/src/components/common/Editor/Editor.tsx b/src/frontend/src/components/common/Editor/Editor.tsx
index 89a90c33da..ac591fb77a 100644
--- a/src/frontend/src/components/common/Editor/Editor.tsx
+++ b/src/frontend/src/components/common/Editor/Editor.tsx
@@ -21,6 +21,7 @@ type RichTextEditorProps = {
   setEditorHtmlContent?: (content: string) => any;
   editable: boolean;
   isEditorEmpty?: (status: boolean) => void;
+  className?: string;
 };
 
 const extensions = [
@@ -40,7 +41,13 @@ const extensions = [
   }),
 ];
 
-const RichTextEditor = ({ editorHtmlContent, setEditorHtmlContent, editable, isEditorEmpty }: RichTextEditorProps) => {
+const RichTextEditor = ({
+  editorHtmlContent,
+  setEditorHtmlContent,
+  editable,
+  isEditorEmpty,
+  className,
+}: RichTextEditorProps) => {
   const dispatch = useDispatch();
   const editor = useEditor({
     extensions,
@@ -74,9 +81,9 @@ const RichTextEditor = ({ editorHtmlContent, setEditorHtmlContent, editable, isE
   }
 
   return (
-    <div className="fmtm-border-[1px] fmtm-border-gray-300 fmtm-rounded-md fmtm-bg-white">
+    <div className={`fmtm-border-[1px] fmtm-border-gray-300 fmtm-rounded-md fmtm-bg-white ${className}`}>
       {editable && <Toolbar editor={editor} />}
-      <EditorContent editor={editor} className={`${editable ? 'fmtm-min-h-[150px]' : 'fmtm-min-h-[50px]'}`} />
+      <EditorContent editor={editor} className={`${editable ? 'fmtm-min-h-[150px] fmtm-p-4' : 'fmtm-min-h-[50px]'}`} />
     </div>
   );
 };
diff --git a/src/frontend/src/components/common/Editor/editorStyles.scss b/src/frontend/src/components/common/Editor/editorStyles.scss
index 14926353c8..2158a34ffd 100644
--- a/src/frontend/src/components/common/Editor/editorStyles.scss
+++ b/src/frontend/src/components/common/Editor/editorStyles.scss
@@ -3,7 +3,6 @@
   &:focus-visible {
     outline: none;
   }
-  padding: 15px;
 
   > * + * {
     margin-top: 0.75em;