diff --git a/package-lock.json b/package-lock.json
index fdcddda..5a801e2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2992,9 +2992,9 @@
       "license": "MIT"
     },
     "node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3843,9 +3843,9 @@
       }
     },
     "node_modules/filelist/node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
diff --git a/src/components/ProjectCard/ProjectCard.module.scss b/src/components/ProjectCard/ProjectCard.module.scss
index 6db1de8..cf9663c 100644
--- a/src/components/ProjectCard/ProjectCard.module.scss
+++ b/src/components/ProjectCard/ProjectCard.module.scss
@@ -4,9 +4,16 @@
   border-radius: 12px;
   padding: 1rem;
   display: flex;
-  flex-direction: column;
+  flex-direction: column; //Default Vertical Layout
   gap: 1rem;
   transition: box-shadow 0.2s ease;
+
+  //For Mobile: Add horizontal layout (for screens < 640px)
+  @media (max-width:639px){
+    flex-direction: row;
+    gap: 0.75rem;
+    padding: 0.75rem;
+  }
 }
 
 .card:hover {
@@ -44,8 +51,28 @@
   display: flex;
   justify-content: center;
   align-items: center;
+
+  //For Mobile: Add smaller, fixed width
+  @media (max-width: 639px){
+    height: 80px;
+    width: 80px; //Maintain square shape
+    min-width: 80px;
+    border-radius: 6px;
+  }
 }
 
+  //Add new wrapper using flex to stack contents vertically on mobile
+  .content{
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    flex: 1; //Take remaining space on mobile
+
+    @media (max-width:639px){
+      gap:0.5rem;
+    }
+  }
+
 .preview img {
   width: 100%;
   height: 100%;
@@ -79,12 +106,23 @@
   font-size: 0.875rem;
   color: #334155;
   line-height: 1.4;
+
+  //For Mobile version
+  @media (max-width: 639px){
+    font-size: 0.8rem;
+    line-height: 1.3;
+  }
 }
 
 .tags {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
+
+  //For Mobile version
+  @media (max-width: 639px){
+    gap: 0.25rem;
+  }
 }
 
 .tag {
@@ -93,12 +131,23 @@
   padding: 0.25rem 0.5rem;
   font-size: 0.75rem;
   border-radius: 9999px;
+
+  //For Mobile version
+  @media (max-width: 639px){
+    font-size: 0.65rem;
+    padding: 0.2rem 0.4rem;
+  }
 }
 
 .links {
   display: flex;
   gap: 0.5rem;
   margin-top: auto;
+
+  //For Mobile version
+    @media (max-width: 639px) {
+      gap: 0.25rem;
+    }
 }
 
 .codeButton,
@@ -113,6 +162,13 @@
   border: 1px solid #e2e8f0;
   text-decoration: none;
   font-weight: 500;
+
+  //For Mobile version
+  @media (max-width: 639px){
+    font-size: 0.65rem;
+    height: 1.75rem;
+    padding:0 0.5rem;
+  }
 }
 
 .codeButton {
diff --git a/src/components/ProjectCard/ProjectCard.tsx b/src/components/ProjectCard/ProjectCard.tsx
index 726bb10..e4e8c90 100644
--- a/src/components/ProjectCard/ProjectCard.tsx
+++ b/src/components/ProjectCard/ProjectCard.tsx
@@ -22,13 +22,6 @@ export function ProjectCard({
 }: ProjectCardProps) {
   return (
     <div className={styles.card}>
-      <div className={styles.header}>
-        <div className={styles.titleSection}>
-          <h2 className={styles.title}>{title}</h2>
-          <p className={styles.author}>{author}</p>
-        </div>
-      </div>
-
       <div className={styles.preview}>
         {previewImageUrl ? (
           <img src={"/placeholder.svg"} alt={`${title} preview`} />
@@ -43,40 +36,50 @@ export function ProjectCard({
         )}
       </div>
 
-      <p className={styles.description}>{description}</p>
+      <div className={styles.content}>
+        <div className={styles.header}>
+          <div className={styles.titleSection}>
+            <h2 className={styles.title}>{title}</h2>
+            <p className={styles.author}>{author}</p>
+          </div>
+        </div>
 
-      <div className={styles.tags}>
-        {tags.slice(0, 3).map((tag) => (
-          <span className={styles.tag} key={tag}>
-            {tag}
-          </span>
-        ))}
-        {tags.length > 3 && (
-          <span className={styles.tag}>+{tags.length - 3}</span>
-        )}
-      </div>
 
-      <div className={styles.links}>
-        <a
-          href={githubUrl}
-          target="_blank"
-          rel="noopener noreferrer"
-          className={styles.codeButton}
-        >
-          <Github className={styles.icon} />
-          Code
-        </a>
-        {liveUrl && (
+        <p className={styles.description}>{description}</p>
+
+        <div className={styles.tags}>
+          {tags.slice(0, 3).map((tag) => (
+            <span className={styles.tag} key={tag}>
+              {tag}
+            </span>
+          ))}
+          {tags.length > 3 && (
+            <span className={styles.tag}>+{tags.length - 3}</span>
+          )}
+        </div>
+
+        <div className={styles.links}>
           <a
-            href={liveUrl}
+            href={githubUrl}
             target="_blank"
             rel="noopener noreferrer"
-            className={styles.demoButton}
+            className={styles.codeButton}
           >
-            <ExternalLink className={styles.icon} />
-            Demo
+            <Github className={styles.icon} />
+            Code
           </a>
-        )}
+          {liveUrl && (
+            <a
+              href={liveUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className={styles.demoButton}
+            >
+              <ExternalLink className={styles.icon} />
+              Demo
+            </a>
+          )}
+        </div>
       </div>
     </div>
   );