diff --git a/src/components/UserPortal/PostCard/PostCard.module.css b/src/components/UserPortal/PostCard/PostCard.module.css
deleted file mode 100644
index e8edc2d82c..0000000000
--- a/src/components/UserPortal/PostCard/PostCard.module.css
+++ /dev/null
@@ -1,183 +0,0 @@
-.cardStyles {
-  width: 20rem;
-  background-color: white;
-  padding: 0;
-  border: none !important;
-  outline: none !important;
-}
-
-.cardHeader {
-  display: flex;
-  width: 100%;
-  padding-inline: 0;
-  padding-block: 0;
-  flex-direction: row;
-  gap: 0.5rem;
-  align-items: center;
-  background-color: white;
-  border-bottom: 1px solid #dddddd;
-}
-
-.creator {
-  display: flex;
-  width: 100%;
-  padding-inline: 1rem;
-  padding-block: 0;
-  flex-direction: row;
-  gap: 0.5rem;
-  align-items: center;
-}
-.creator p {
-  margin-bottom: 0;
-  font-weight: 500;
-}
-.creator svg {
-  width: 2rem;
-  height: 2rem;
-}
-
-.customToggle {
-  padding: 0;
-  background: none;
-  border: none;
-  margin-right: 1rem;
-  --bs-btn-active-bg: none;
-}
-.customToggle svg {
-  color: black;
-}
-
-.customToggle::after {
-  content: none;
-}
-.customToggle:hover,
-.customToggle:focus,
-.customToggle:active {
-  background: none;
-  border: none;
-}
-.customToggle svg {
-  color: black;
-}
-
-.cardBody div {
-  padding: 0.5rem;
-}
-
-.imageContainer {
-  max-width: 100%;
-}
-
-.cardTitle {
-  --max-lines: 1;
-  display: -webkit-box;
-  overflow: hidden;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: var(--max-lines);
-
-  font-size: 1.3rem !important;
-  font-weight: 600;
-}
-
-.date {
-  font-weight: 600;
-}
-
-.cardText {
-  --max-lines: 2;
-  display: -webkit-box;
-  overflow: hidden;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: var(--max-lines);
-
-  padding-top: 0;
-  font-weight: 300;
-  margin-top: 0.7rem !important;
-  text-align: justify;
-}
-
-.viewBtn {
-  display: flex;
-  justify-content: flex-end;
-  margin: 0.5rem;
-}
-.viewBtn Button {
-  padding-inline: 1rem;
-}
-
-.cardActions {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 1px;
-  justify-content: flex-end;
-}
-
-.cardActionBtn {
-  background-color: rgba(0, 0, 0, 0);
-  padding: 0;
-  border: none;
-  color: black;
-}
-
-.cardActionBtn:hover {
-  background-color: ghostwhite;
-  border: none;
-  color: black !important;
-}
-
-.creatorNameModal {
-  display: flex;
-  flex-direction: row;
-  gap: 5px;
-  align-items: center;
-  margin-bottom: 10px;
-}
-
-.modalActions {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 1rem;
-  margin: 5px 0px;
-}
-
-.textModal {
-  margin-top: 10px;
-}
-
-.colorPrimary {
-  background: #31bb6b;
-  color: white;
-  cursor: pointer;
-}
-
-.commentContainer {
-  overflow: auto;
-  max-height: 18rem;
-  padding-bottom: 1rem;
-}
-
-.modalFooter {
-  background-color: white;
-  position: absolute;
-  width: calc(100% - 1rem);
-  padding-block: 0.5rem;
-  display: flex;
-  flex-direction: column;
-  border-top: 1px solid #dddddd;
-  bottom: 0;
-  right: 0.5rem;
-  margin-left: 1rem;
-}
-
-.inputArea {
-  border: none;
-  outline: none;
-  background-color: #f1f3f6;
-}
-
-.postImage {
-  height: 300px;
-  object-fit: cover;
-}
diff --git a/src/components/UserPortal/PostCard/PostCard.tsx b/src/components/UserPortal/PostCard/PostCard.tsx
index f8fcdaebca..064d3f4661 100644
--- a/src/components/UserPortal/PostCard/PostCard.tsx
+++ b/src/components/UserPortal/PostCard/PostCard.tsx
@@ -33,7 +33,7 @@ import {
 import CommentCard from '../CommentCard/CommentCard';
 import { errorHandler } from 'utils/errorHandler';
 import useLocalStorage from 'utils/useLocalstorage';
-import styles from './PostCard.module.css';
+import styles from './../../../style/app.module.css';
 import UserDefault from '../../../assets/images/defaultImg.png';
 
 interface InterfaceCommentCardProps {
@@ -272,7 +272,7 @@ export default function postCard(props: InterfacePostCard): JSX.Element {
   return (
     <Col key={props.id} className="d-flex justify-content-center my-2">
       <Card className={`${styles.cardStyles}`}>
-        <Card.Header className={`${styles.cardHeader}`}>
+        <Card.Header className={`${styles.cardHeaderPostCard}`}>
           <div className={`${styles.creator}`}>
             <AccountCircleIcon className="my-2" />
             <p>{postCreator}</p>
@@ -316,7 +316,7 @@ export default function postCard(props: InterfacePostCard): JSX.Element {
           }
         />
         <Card.Body className="pb-0">
-          <Card.Title className={`${styles.cardTitle}`}>
+          <Card.Title className={`${styles.cardTitlePostCard}`}>
             {props.title}
           </Card.Title>
           <Card.Subtitle style={{ color: '#808080' }}>
@@ -355,7 +355,7 @@ export default function postCard(props: InterfacePostCard): JSX.Element {
           </div>
           <div className="w-50 p-2 position-relative">
             <div className="d-flex justify-content-between align-items-center">
-              <div className={`${styles.cardHeader} p-0`}>
+              <div className={`${styles.cardHeaderPostCard} p-0`}>
                 <AccountCircleIcon className="my-2" />
                 <p>{postCreator}</p>
               </div>
diff --git a/src/style/app.module.css b/src/style/app.module.css
index 6329ead1a4..9021a300f4 100644
--- a/src/style/app.module.css
+++ b/src/style/app.module.css
@@ -29,6 +29,7 @@
   --tablerow-bg-color: #eff1f7;
   --row-background: var(--bs-white, white);
   --font-size-header: 16px;
+  --input-area-color: #f1f3f6;
 }
 .fonts {
   color: #707070;
@@ -2329,3 +2330,189 @@ button[data-testid='createPostBtn'] {
   width: 1rem;
   margin-right: 8px;
 }
+
+/* PostCard.tsx */
+
+.cardStyles {
+  width: 20rem;
+  background-color: white;
+  padding: 0;
+  border: none !important;
+  outline: none !important;
+}
+
+.cardHeaderPostCard {
+  display: flex;
+  width: 100%;
+  padding-inline: 0;
+  padding-block: 0;
+  flex-direction: row;
+  gap: 0.5rem;
+  align-items: center;
+  background-color: white;
+  border-bottom: 1px solid #dddddd;
+}
+
+.creator {
+  display: flex;
+  width: 100%;
+  padding-inline: 1rem;
+  padding-block: 0;
+  flex-direction: row;
+  gap: 0.5rem;
+  align-items: center;
+}
+.creator p {
+  margin-bottom: 0;
+  font-weight: 500;
+}
+.creator svg {
+  width: 2rem;
+  height: 2rem;
+}
+
+.customToggle {
+  padding: 0;
+  background: none;
+  border: none;
+  margin-right: 1rem;
+  --bs-btn-active-bg: none;
+}
+.customToggle svg {
+  color: black;
+}
+
+.customToggle::after {
+  content: none;
+}
+.customToggle:hover,
+.customToggle:focus,
+.customToggle:active {
+  background: none;
+  border: none;
+}
+.customToggle svg {
+  color: black;
+}
+
+.cardBodyPostCard div {
+  padding: 0.5rem;
+}
+
+.imageContainerPostCard {
+  max-width: 100%;
+}
+
+.cardTitlePostCard {
+  --max-lines: 1;
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--max-lines);
+
+  font-size: 1.3rem !important;
+  font-weight: 600;
+}
+
+.date {
+  font-weight: 600;
+}
+
+.cardText {
+  --max-lines: 2;
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--max-lines);
+
+  padding-top: 0;
+  font-weight: 300;
+  margin-top: 0.7rem !important;
+  text-align: justify;
+}
+
+.viewBtn {
+  display: flex;
+  justify-content: flex-end;
+  margin: 0.5rem;
+}
+.viewBtn Button {
+  padding-inline: 1rem;
+}
+.cardActions {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 1px;
+  justify-content: flex-end;
+}
+
+.cardActionBtn {
+.cardActionBtn {
+  background-color: rgba(0, 0, 0, 0);
+  padding: 0;
+  border: none;
+  color: black;
+  transition: background-color 0.2s ease;
+}
+
+.cardActionBtn:hover,
+.cardActionBtn:focus {
+  background-color: ghostwhite;
+  border: none;
+  color: black !important;
+  outline: 2px solid var(--subtle-blue-grey);
+  outline-offset: 2px;
+}
+
+.creatorNameModal {
+  display: flex;
+  flex-direction: row;
+  gap: 5px;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.modalActions {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 1rem;
+  margin: 5px 0px;
+}
+
+.textModal {
+  margin-top: 10px;
+}
+
+.colorPrimary {
+  background: var(--subtle-blue-grey);
+  color: var(--bs-white);
+  cursor: pointer;
+}
+
+.commentContainer {
+  overflow: auto;
+  max-height: 18rem;
+  padding-bottom: 1rem;
+}
+
+.modalFooter {
+  background-color: var(--bs-white);
+  width: 100%;
+  padding-block: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  border-top: 1px solid var(--input-shadow-color);
+}
+
+.inputArea {
+  border: none;
+  outline: none;
+  background-color: var(--input-area-color);
+}
+
+.postImage {
+  height: 300px;
+  object-fit: cover;
+}