diff --git a/package-lock.json b/package-lock.json
index e5437e3..505459f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -50,7 +50,7 @@
         "prettier": "^3.0.1",
         "prettier-plugin-tailwindcss": "^0.4.1",
         "tailwindcss": "^3.4.17",
-        "vite": "^4.5.5"
+        "vite": "^4.5.9"
       }
     },
     "node_modules/@alloc/quick-lru": {
@@ -5373,7 +5373,6 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.9.tgz",
       "integrity": "sha512-qK9W4xjgD3gXbC0NmdNFFnVFLMWSNiR3swj957yutwzzN16xF/E7nmtAyp1rT9hviDroQANjE4HK3H4WqWdFtw==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "esbuild": "^0.18.10",
         "postcss": "^8.4.27",
@@ -8660,7 +8659,7 @@
         "tailwind-merge": "^2.5.4",
         "tailwindcss": "^3.4.17",
         "tailwindcss-animate": "^1.0.7",
-        "vite": "^4.5.5",
+        "vite": "^4.5.9",
         "zxcvbn": "^4.4.2"
       },
       "dependencies": {
diff --git a/package.json b/package.json
index 36418f7..9e2c05e 100644
--- a/package.json
+++ b/package.json
@@ -52,6 +52,6 @@
     "prettier": "^3.0.1",
     "prettier-plugin-tailwindcss": "^0.4.1",
     "tailwindcss": "^3.4.17",
-    "vite": "^4.5.5"
+    "vite": "^4.5.9"
   }
 }
diff --git a/src/components/rent/RentCalculator.css b/src/components/rent/RentCalculator.css
index 5c17151..09c82cd 100644
--- a/src/components/rent/RentCalculator.css
+++ b/src/components/rent/RentCalculator.css
@@ -34,11 +34,9 @@
     border-radius: 5px;
   }
 
-  .calculate-btn {
+  .calculate-btn, .reset-btn {
     width: 100%;
     padding: 10px;
-    background-color: #2ec4b6;
-    color: white;
     font-size: 16px;
     border: none;
     border-radius: 5px;
@@ -46,13 +44,66 @@
     transition: background-color 0.3s ease;
   }
 
+  .calculate-btn {
+    background-color: #2ec4b6;
+    color: white;
+  }
+  
   .calculate-btn:hover {
     background-color: #238e8b;
   }
-
-  .result {
+  
+  .reset-btn {
+    margin-top: 10px;
+    background-color: #f44336; /* Red color */
+    color: white;
+  }
+  
+  .reset-btn:hover {
+    background-color: #d32f2f;
+  }
+  
+  /* Rent Summary Card */
+  .summary-card {
     margin-top: 20px;
+    padding: 15px;
+    border-radius: 8px;
+    background-color: #ffffff;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    text-align: left;
+    animation: fadeIn 0.5s ease-in-out;
+  }
+  
+  .summary-card h2 {
+    font-size: 20px;
+    color: #333;
+    margin-bottom: 10px;
+  }
+  
+  .summary-card p {
+    font-size: 16px;
+    color: #555;
+    margin: 5px 0;
+  }
+  
+  .summary-card hr {
+    margin: 10px 0;
+    border: 1px solid #ddd;
+  }
+  
+  .summary-card h3 {
     font-size: 18px;
-    font-weight: bold;
     color: #2ec4b6;
+    font-weight: bold;
+  }
+  
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(-10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
   }
\ No newline at end of file
diff --git a/src/components/rent/RentCalculator.jsx b/src/components/rent/RentCalculator.jsx
index feb050b..d8e85dd 100644
--- a/src/components/rent/RentCalculator.jsx
+++ b/src/components/rent/RentCalculator.jsx
@@ -7,6 +7,14 @@ const RentCalculator = () => {
   const [waterBill, setWaterBill] = useState('');
   const [otherFees, setOtherFees] = useState('');
   const [totalRent, setTotalRent] = useState(null);
+  const [showSummary, setShowSummary] = useState(false);
+
+  const formatCurrency = (value) => {
+    return new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: "USD",
+    }).format(value || 0);
+  };
 
   const calculateTotalRent = () => {
     const rent = parseFloat(baseRent) || 0;
@@ -14,13 +22,24 @@ const RentCalculator = () => {
     const water = parseFloat(waterBill) || 0;
     const other = parseFloat(otherFees) || 0;
     const total = rent + power + water + other;
+    
     setTotalRent(total);
+    setShowSummary(true); 
   };
 
-  return (
+  const resetForm = () => {
+    setBaseRent("");
+    setPowerBill("");
+    setWaterBill("");
+    setOtherFees("");
+    setTotalRent(null);
+    setShowSummary(false);
+  };
 
+  return (
     <div id="RentCalculator" className="rent-calculator">
       <h1>Monthly Rent Calculator</h1>
+
       <div className="input-group">
         <label>Base Rent ($):</label>
         <input
@@ -30,6 +49,7 @@ const RentCalculator = () => {
           placeholder="Enter base rent amount"
         />
       </div>
+
       <div className="input-group">
         <label>Power Bill ($):</label>
         <input
@@ -39,6 +59,7 @@ const RentCalculator = () => {
           placeholder="Enter power bill amount"
         />
       </div>
+
       <div className="input-group">
         <label>Water Bill ($):</label>
         <input
@@ -48,6 +69,7 @@ const RentCalculator = () => {
           placeholder="Enter water bill amount"
         />
       </div>
+
       <div className="input-group">
         <label>Other Fees ($):</label>
         <input
@@ -57,16 +79,32 @@ const RentCalculator = () => {
           placeholder="Enter other fees"
         />
       </div>
+
       <button onClick={calculateTotalRent} className="calculate-btn">
-        Calculate Total Rent
-      </button>
-      {totalRent !== null && (
-        <div className="result">
-          <h2>Total Monthly Rent: ${totalRent.toFixed(2)}</h2>
-        </div>
-      )}
+  Calculate Total Rent
+</button>
+
+{showSummary && (
+  <>
+    <div className="summary-card">
+      <h2>🏠 Rent Summary</h2>
+      <p><strong>Base Rent:</strong> {formatCurrency(baseRent)}</p>
+      <p><strong>Power Bill:</strong> {formatCurrency(powerBill)}</p>
+      <p><strong>Water Bill:</strong> {formatCurrency(waterBill)}</p>
+      <p><strong>Other Fees:</strong> {formatCurrency(otherFees)}</p>
+      <hr />
+      <h3>Total Monthly Rent: {formatCurrency(totalRent)}</h3>
+    </div>
+
+    <button onClick={resetForm} className="reset-btn">
+      Reset
+    </button>
+  </>
+)}
+
+
     </div>
   );
 };
 
-export default RentCalculator;
\ No newline at end of file
+export default RentCalculator;