diff --git a/frontend/web-app/src/Components/AddNewPlantCard.tsx b/frontend/web-app/src/Components/AddNewPlantCard.tsx
new file mode 100644
index 0000000..d5762f9
--- /dev/null
+++ b/frontend/web-app/src/Components/AddNewPlantCard.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import '../Styles/custom/addNewPlantCard.css'
+
+function AddNewPlantCard() {
+  return (
+    <div className='addNewPlantCard'>
+        <div className='addNewPlantCard-text'>
+            Add a new plant
+        </div>
+        <div className='addNewPlantCard-icon'>
+            +
+        </div>
+    </div>
+  )
+}
+
+export default AddNewPlantCard
\ No newline at end of file
diff --git a/frontend/web-app/src/Components/PlantCard.tsx b/frontend/web-app/src/Components/PlantCard.tsx
index 23c7dcc..b43d915 100644
--- a/frontend/web-app/src/Components/PlantCard.tsx
+++ b/frontend/web-app/src/Components/PlantCard.tsx
@@ -1,10 +1,23 @@
 import React from 'react'
 import '../Styles/custom/plantCard.css'
+import dummyImage from '../Images/dummy-image.png'
 
-function PlantCard() {
+function PlantCard({status}: {status: string}) {
   return (
-    <div className='plantCard'>
-        
+    <div className={`plantCard ${status}`}>
+      {status==='dry'? <div className='plantCard-dry-status-indicator'><b>Water Me!</b></div> : null}
+      <img className='plantCard-image' src={dummyImage} alt='Error Img'/>
+      <div className='plantCard-detail'>
+        <div>
+          Name: <b>Red Rose</b>
+        </div>
+        <div>
+          Status: <b>Good</b>
+        </div>
+        <div>
+          Last Watered: <b>3:15 pm</b> on <b>2/6/2025</b>
+        </div>
+      </div>
     </div>
   )
 }
diff --git a/frontend/web-app/src/Pages/HomePage.tsx b/frontend/web-app/src/Pages/HomePage.tsx
index 03c9a0a..9e3dc36 100644
--- a/frontend/web-app/src/Pages/HomePage.tsx
+++ b/frontend/web-app/src/Pages/HomePage.tsx
@@ -2,6 +2,7 @@ import React, { useEffect } from 'react'
 import authController from '../Controller/AuthController'
 import '../Styles/custom/homePage.css'
 import PlantCard from '../Components/PlantCard'
+import AddNewPlantCard from '../Components/AddNewPlantCard'
 
 function HomePage() {
 // example of using APIs
@@ -22,7 +23,14 @@ function HomePage() {
     <div className='homePage'>
       <div className='nameBar'>Vy's Plants</div>
       <div className='plantViewer'>
-        <PlantCard />
+        <PlantCard status='dry'/>
+        <PlantCard status='good'/>
+        <PlantCard status='dry'/>
+        <PlantCard status='good'/>
+        <PlantCard status='good'/>
+        <PlantCard status='dry'/>
+        <PlantCard status='good'/>
+        <AddNewPlantCard />
       </div>
     </div>
   )
diff --git a/frontend/web-app/src/Styles/custom/addNewPlantCard.css b/frontend/web-app/src/Styles/custom/addNewPlantCard.css
new file mode 100644
index 0000000..04a8ce5
--- /dev/null
+++ b/frontend/web-app/src/Styles/custom/addNewPlantCard.css
@@ -0,0 +1,27 @@
+.addNewPlantCard{
+    height: 532px;
+    width: 356px;
+    border-radius: 18px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background-color: #E6F2D7;
+}
+
+
+.addNewPlantCard-text{
+    font-family: 'Poppins', sans-serif;
+    font-weight: 700;
+    font-size: 25px;
+    line-height: 37px;
+    margin-bottom: 22px;
+}
+
+.addNewPlantCard-icon{
+    font-family: 'Poppins', sans-serif;
+    font-weight: 700;
+    font-size: 100px;
+    line-height: 100px;
+}
+
diff --git a/frontend/web-app/src/Styles/custom/homePage.css b/frontend/web-app/src/Styles/custom/homePage.css
index f4cca6f..b478d47 100644
--- a/frontend/web-app/src/Styles/custom/homePage.css
+++ b/frontend/web-app/src/Styles/custom/homePage.css
@@ -3,7 +3,7 @@
 .homePage{
     display: flex;
     flex-direction: column;
-    padding: 44px 82px 0px 82px;
+    padding: 44px 82px 94px 82px;
 }
 
 .nameBar{
@@ -15,4 +15,9 @@
 
 .plantViewer{
     padding-top: 31px;
+    display: grid;
+    justify-content: center;
+    grid-template-columns: auto auto auto auto;
+    row-gap: 30px;
+    column-gap: 24px;
 }
\ No newline at end of file
diff --git a/frontend/web-app/src/Styles/custom/plantCard.css b/frontend/web-app/src/Styles/custom/plantCard.css
index a2e915e..667d539 100644
--- a/frontend/web-app/src/Styles/custom/plantCard.css
+++ b/frontend/web-app/src/Styles/custom/plantCard.css
@@ -3,6 +3,56 @@
 .plantCard{
     height: 532px;
     width: 356px;
-    background-color: #E6F2D7;
     border-radius: 18px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.good{
+    background-color: #E6F2D7;
+}
+
+.dry{
+    background-color: #F2DDD7;
+}
+
+.plantCard-image{
+    height: 326px;
+    width: 302px;
+    border-radius: 15px;
+    margin-top: 23px;
+}
+
+.plantCard-detail{
+    width: 302px;
+    height: 133px;
+    margin-top: 15px;
+}
+
+.plantCard-detail > *{
+    font-family: 'Poppins', sans-serif;
+    font-weight: 400;
+    font-size: 23px;
+    line-height: 34px;
+}
+
+.plantCard-dry-status-indicator{
+    background-color: #7CD1F0;
+    width: 150px;
+    height: 47px;
+    border-radius: 23px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    margin-top: 11px;
+    margin-left: 192px;
+}
+
+.plantCard-dry-status-indicator > * {
+    font-family: 'Poppins', sans-serif;
+    font-weight: 700;
+    font-size: 23px;
+    line-height: 34px;
 }
diff --git a/frontend/web-app/src/Styles/global.css b/frontend/web-app/src/Styles/global.css
index 95475e1..7e91d1c 100644
--- a/frontend/web-app/src/Styles/global.css
+++ b/frontend/web-app/src/Styles/global.css
@@ -6,6 +6,10 @@ html, body, #root, .App {
     margin: 0px;
 }
 
+body{
+    overflow: scroll;
+}
+
 .text-white{
     color: #FFFFFF;
 }