diff --git a/frontend/web-app/src/Components/AddNewPlantCard.tsx b/frontend/web-app/src/Components/AddNewPlantCard.tsx
index d5762f9..2cbd78f 100644
--- a/frontend/web-app/src/Components/AddNewPlantCard.tsx
+++ b/frontend/web-app/src/Components/AddNewPlantCard.tsx
@@ -1,5 +1,4 @@
 import React from 'react'
-import '../Styles/custom/addNewPlantCard.css'
 
 function AddNewPlantCard() {
   return (
diff --git a/frontend/web-app/src/Components/PlantDetailCard.tsx b/frontend/web-app/src/Components/PlantDetailCard.tsx
new file mode 100644
index 0000000..c023b77
--- /dev/null
+++ b/frontend/web-app/src/Components/PlantDetailCard.tsx
@@ -0,0 +1,38 @@
+import React from 'react'
+import dummyImage from '../Images/rose.png'
+
+function PlantDetailCard({status}: {status: string}) {
+  return (
+    <div className={`plant-detail-card font-poppins ${status}`}>
+        <div className='plant-detail-card-information'>
+            <div className='detail-and-image-container'>
+                <img className='plant-detail-card-image' src={dummyImage} alt='error img'/>
+                <div className='plant-detail-card-details'>
+                    <div>
+                        Name: <b>Red Rose</b>
+                    </div>
+                    <div>
+                        Status: <b>Good</b>
+                    </div>
+                    <div>
+                        Last Watered: <b>3:15pm</b> on <b>2/6/2025</b>
+                    </div>
+                    <div>
+                        Note: <b>Place this plant near the window</b>
+                    </div>
+                </div>
+            </div>
+            <div className='plant-detail-card-button-container'>
+                <img className='plant-detail-card-close-button' src='' alt='error img'/>
+                <button className='plant-detail-card-edit-button'>Edit</button>
+                <button className='plant-detail-card-delete-button'>Delete</button>
+            </div>
+        </div>
+        <div className='plant-detail-card-history'>
+
+        </div>
+    </div>
+  )
+}
+
+export default PlantDetailCard
\ No newline at end of file
diff --git a/frontend/web-app/src/Pages/PlantDetailPage.tsx b/frontend/web-app/src/Pages/PlantDetailPage.tsx
index bf669a2..e8b82fb 100644
--- a/frontend/web-app/src/Pages/PlantDetailPage.tsx
+++ b/frontend/web-app/src/Pages/PlantDetailPage.tsx
@@ -1,8 +1,12 @@
 import React from 'react'
+import '../Styles/custom/plantDetailPage.css'
+import PlantDetailCard from '../Components/PlantDetailCard'
 
 function PlantDetailPage() {
   return (
-    <div>PlantDetailPage</div>
+    <div className='plant-detail-page'>
+      <PlantDetailCard status='good' />
+    </div>
   )
 }
 
diff --git a/frontend/web-app/src/Styles/custom/addNewPlantCard.css b/frontend/web-app/src/Styles/custom/addNewPlantCard.css
deleted file mode 100644
index 04a8ce5..0000000
--- a/frontend/web-app/src/Styles/custom/addNewPlantCard.css
+++ /dev/null
@@ -1,27 +0,0 @@
-.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/plantCard.css b/frontend/web-app/src/Styles/custom/plantCard.css
index 667d539..4da5df6 100644
--- a/frontend/web-app/src/Styles/custom/plantCard.css
+++ b/frontend/web-app/src/Styles/custom/plantCard.css
@@ -9,14 +9,6 @@
     align-items: center;
 }
 
-.good{
-    background-color: #E6F2D7;
-}
-
-.dry{
-    background-color: #F2DDD7;
-}
-
 .plantCard-image{
     height: 326px;
     width: 302px;
@@ -56,3 +48,30 @@
     font-size: 23px;
     line-height: 34px;
 }
+
+.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/plantDetailPage.css b/frontend/web-app/src/Styles/custom/plantDetailPage.css
new file mode 100644
index 0000000..af962d5
--- /dev/null
+++ b/frontend/web-app/src/Styles/custom/plantDetailPage.css
@@ -0,0 +1,95 @@
+/* Plant Detail Page CSS */
+
+.plant-detail-page{
+    display: flex;
+    flex-direction: column;
+    padding: 41px 82px 34px 82px;
+    justify-content: center;
+    align-items: center;
+}
+
+.plant-detail-card{
+    width: 100%;
+    height: 800px;
+    border-radius: 37px;
+}
+
+.plant-detail-card-information{
+    display: flex;
+    flex-direction: row;
+    padding: 27px 100px 27px 100px;
+    justify-content: space-between;
+}
+
+.plant-detail-card-information > .detail-and-image-container{
+    display: flex;
+    flex-direction: row;
+}
+
+.plant-detail-card-details{
+    display: flex;
+    flex-direction: column;
+    margin-left: 41px;
+    font-weight: 400;
+    font-size: 25px;
+    line-height: 37px;
+    justify-content: space-between;
+}
+
+.plant-detail-card-details b{
+    font-weight: 700;
+}
+
+.plant-detail-card-image{
+    width: 196px;
+    height: 196px;
+}
+
+.plant-detail-card-button-container{
+    display: flex;
+    flex-direction: column;
+}
+
+.plant-detail-card-close-button{
+    margin-bottom: 31px;
+    width: 29px;
+    height: 29px;
+    align-self: flex-end;
+}
+
+.plant-detail-card-edit-button{
+    all: unset;
+    margin-bottom: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 123px;
+    height: 47px;
+    background-color: #AFD582;
+    border-radius: 15px;
+    font-weight: 700;
+    font-size: 25px;
+    transition: 0.4s;
+}
+
+.plant-detail-card-edit-button:hover{
+    background-color: #77B42D;
+}
+
+.plant-detail-card-delete-button{
+    all: unset;
+    width: 123px;
+    height: 47px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #EDAC9A;
+    border-radius: 15px;
+    font-weight: 700;
+    font-size: 25px;
+    transition: 0.4s;
+}
+
+.plant-detail-card-delete-button:hover{
+    background-color: red;
+}
diff --git a/frontend/web-app/src/Styles/global.css b/frontend/web-app/src/Styles/global.css
index 7e91d1c..8a84a44 100644
--- a/frontend/web-app/src/Styles/global.css
+++ b/frontend/web-app/src/Styles/global.css
@@ -13,3 +13,11 @@ body{
 .text-white{
     color: #FFFFFF;
 }
+
+.good{
+    background-color: #E6F2D7;
+}
+
+.dry{
+    background-color: #F2DDD7;
+}