diff --git a/src/components/pages/Expense/Common/ExpenseEditPage.css b/src/components/pages/Expense/Common/ExpenseEditPage.css
index b4731ce..91a85e2 100644
--- a/src/components/pages/Expense/Common/ExpenseEditPage.css
+++ b/src/components/pages/Expense/Common/ExpenseEditPage.css
@@ -4,32 +4,36 @@
     justify-content: center;
     align-items: center;
     height: 100vh;
+    overflow: hidden;
     position: relative;
     font-family: 'Montserrat', sans-serif;
 }
 
 .backIcon {
     position: absolute;
-    top: 20px;
-    left: 20px;
+    top: 10px;
+    margin: 35px;
+    left: 10px;
 }
 
 .arrow-icon {
-    font-size: 24px;
+    font-size: 18px;
     cursor: pointer;
 }
 
 .edit-content {
 
-    padding: 20px;
+   padding: 30px;
+    margin-bottom: 30px;
     border-radius: 8px;
-    /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
     width: 100%;
     max-width: 400px;
 }
 
 .edit-titles h1 {
     color: #fff;
+    margin-bottom: 30px;
     font-size: 30px;
     margin: 0px 0;
     text-align: center;
@@ -37,6 +41,7 @@
 
 .edit-datetime {
     color: #fff;
+    margin-bottom: 30px;
     font-size: 18px;
     text-align: center;
     margin-bottom: 10px;
@@ -44,6 +49,7 @@
 
 .edit-fields {
     color: #fff;
+    padding: 10px 10px;
     margin-bottom: 15px;
     width: 93%;
 }
@@ -51,14 +57,15 @@
 .edit-fields label {
     display: block;
     margin-bottom: 9px;
+    
 }
 
 .edit-fields input {
     width: 100%;
     padding: 10px;
-    border: 1px solid #555;
+    /* border: 1px solid #555; */
     border-radius: 4px;
-    background-color: #3A3A3A;
+    /* background-color: #3A3A3A; */
     color: #fff;
     font-size: 16px;
 }
@@ -68,14 +75,14 @@
     display: flex;
     justify-content: center;
     margin-top: 30px;
+    gap: 5px;
     width: 100%;
 }
 
 .edit-btn {
-
     position: relative;
-    width: 150px;
-    height: 60px;
+    width: 130px;
+    height: 50px;
     color: #fff;
     justify-content: center;
     align-items: center;
@@ -90,8 +97,8 @@
 
 .edit-btn-2 {
     position: relative;
-    width: 150px;
-    height: 60px;
+    width: 130px;
+    height: 50px;
     color: #fff;
     justify-content: center;
     align-items: center;
@@ -106,14 +113,26 @@
 
 @media (max-width: 768px) {
     .edit-titles h1 {
+        
         font-size: 24px;
     }
 
     .edit-datetime {
+        
         font-size: 16px;
     }
 
     .edit-buttons div {
         font-size: 14px;
     }
-}
\ No newline at end of file
+
+    
+}
+@media (min-width: 1024px) {
+    .edit-btn, .edit-btn-2 {
+        width: 250px;
+        height: 50px;
+        font-size: 20px;
+    }
+}
+
diff --git a/src/components/pages/Expense/Common/TotalExpenseSuccessfully.css b/src/components/pages/Expense/Common/TotalExpenseSuccessfully.css
index 2a5f553..c7c81fe 100644
--- a/src/components/pages/Expense/Common/TotalExpenseSuccessfully.css
+++ b/src/components/pages/Expense/Common/TotalExpenseSuccessfully.css
@@ -5,17 +5,21 @@
     justify-content: center;
     align-items: center;
     height: 100vh;
+    font-family: 'Montserrat', sans-serif;
+    color: white;
     position: relative;
 }
 
 .arrows {
     position: absolute;
-    top: 20px;
-    left: 20px;
+    top: 10px;
+    margin: 35px;
+    left: 10px;
 }
 
 .arrow-icon-1 {
-    font-size: 24px;
+    font-size: 18px;
+
     cursor: pointer;
 }
 
@@ -30,13 +34,13 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    margin-bottom: 10px;
+    margin-bottom: 0px;
 }
 
 .success-title h1 {
     color: #fff;
     font-size: 30px;
-    margin-top: 10px;
+    margin-top: 0px;
     text-align: center;
 }
 
@@ -52,14 +56,14 @@
 .success-button {
     display: flex;
     justify-content: center;
-    gap: 20px;
-    margin-top: 20px;
+    gap: 10px;
+    margin-top: 10px;
 }
 
 .btn-view  {
     position: relative; 
-    width: 120px;
-    height: 40px; 
+    width: 100px;
+    height: 30px; 
     color: #fff;
     justify-content: center;
     align-items: center;
@@ -73,8 +77,8 @@
 }
 .btn-back {
     position: relative; 
-    width: 120px;
-    height: 40px; 
+    width: 100px;
+    height: 30px; 
     color: #fff;
     justify-content: center;
     align-items: center;
@@ -88,24 +92,11 @@
 }
 
 
-
 .success-date-time{
     color: #fff;
 }
 
 
-/* Mobile responsiveness */
-@media (max-width: 768px) {
-    .btn-view, .btn-back {
-        padding: 12px 20px;
-        font-size: 16px;
-    }
-}
-
-
-
-
-/* Mobile responsiveness */
 @media (max-width: 768px) {
     .success-message h2 {
         font-size: 20px;
@@ -114,4 +105,21 @@
     .success-title h1 {
         font-size: 24px;
     }
+  
+    
 }
+@media (min-width: 1024px) {
+    .btn-view, .btn-back {
+        width: 200px;
+        height: 50px;
+        font-size: 20px;
+    }
+
+    .success-title h1 {
+        font-size: 32px;
+    }
+
+    .success-message h2 {
+        font-size: 26px;
+    }
+}
\ No newline at end of file
diff --git a/src/components/pages/Expense/Common/TotalExpenseSuccessfully.js b/src/components/pages/Expense/Common/TotalExpenseSuccessfully.js
index 5673059..ad21114 100644
--- a/src/components/pages/Expense/Common/TotalExpenseSuccessfully.js
+++ b/src/components/pages/Expense/Common/TotalExpenseSuccessfully.js
@@ -22,7 +22,7 @@ function TotalExpenseSuccessfully() {
     const dataToStore = {
       incomeRecord: {
         dateTime: formattedDateTime,
-        entryId: entryId || "Not provided",  // Fallback in case entryId is undefined
+        entryId: entryId || "Not provided",  
       },
     };
     console.log(JSON.stringify(dataToStore));
@@ -33,7 +33,7 @@ function TotalExpenseSuccessfully() {
   };
 
   const handleViewRecordsClick = () => {
-    // Pass entryId to the /records route when navigating
+    
     navigate("/expense-records", { state: { entryId } });
     console.log(entryId);
   };
diff --git a/src/components/pages/Expense/ExpenseAmount/ExpenseAmount.css b/src/components/pages/Expense/ExpenseAmount/ExpenseAmount.css
index 32d38ed..813729a 100644
--- a/src/components/pages/Expense/ExpenseAmount/ExpenseAmount.css
+++ b/src/components/pages/Expense/ExpenseAmount/ExpenseAmount.css
@@ -5,13 +5,12 @@
   justify-content: center;
   padding: 10px;
   margin: 0 auto;
-  max-width: 500px;
+  max-width: 90vw; 
   background-color: #1e1e1e;
   border-radius: 10px;
   text-align: center;
 }
 
-
 .backarrow {
   /* position: absolute; */
   width: 100%;
@@ -20,16 +19,17 @@
 }
 
 
-.arrowbtn {
-  position: absolute;
-  left: 0;
-  top: 50%;
-  margin: 30px 10px;
-  /* transform: translateY(-50%); */
-  font-size: 24px;
-  color: #333;
-  cursor: pointer;
-}
+
+  .arrowbtn {
+    position: absolute;
+    left: 0;
+    top: 50%;
+    margin: 20px 10px;
+    font-size: 4vw; /* Responsive font-size */
+    color: #333;
+    cursor: pointer;
+  }
+
 
 
 .amount-titles {
@@ -102,7 +102,6 @@
 }
 
 
-
 @media (max-width: 600px) {
   .amount-container {
     padding: 10px;
@@ -115,11 +114,11 @@
 
   .arrowbtn {
     position: absolute;
-    left: 0;
+    /* left: 3%; */
     top: 50%;
-    margin: 30px 10px;
+    margin: 17px 30px;
     /* transform: translateX(-20%); */
-    font-size: 24px;
+    font-size: 18px;
     color: #333;
     cursor: pointer;
   }
@@ -129,7 +128,7 @@
   }
 
   .rupess_section {
-    gap: 10px;
+    gap: 20px;
   }
 
   .coin {
@@ -138,7 +137,7 @@
     padding: 15px;
 
   }
-
+ 
   .coin-value {
     font-size: 26px;
   }
@@ -159,7 +158,6 @@
 
 }
 
-
 @media (min-width: 1024px) {
   .amount-container {
     max-width: 800px;
@@ -171,6 +169,11 @@
     height: 100px;
   }
 
+  .arrowbtn {
+    font-size: 18px;
+    margin: 27px 21px;
+  }
+
   .coin-value {
     font-size: 20px;
   }
@@ -197,8 +200,8 @@
   }
 
   .arrowbtn {
-    font-size: 20px;
-    margin: 20px 8px;
+    font-size: 18px;
+    margin: 27px 21px;
   }
 
   .amount-titles {
@@ -206,7 +209,7 @@
   }
 
   .rupess_section {
-    gap: 8px;
+    gap: 20px;
     margin-top: 10px;
   }
 
diff --git a/src/components/pages/Expense/ExpenseAmount/TotalExpenseAmount.css b/src/components/pages/Expense/ExpenseAmount/TotalExpenseAmount.css
index 6f9b908..c731755 100644
--- a/src/components/pages/Expense/ExpenseAmount/TotalExpenseAmount.css
+++ b/src/components/pages/Expense/ExpenseAmount/TotalExpenseAmount.css
@@ -1,9 +1,9 @@
 body {
   margin: 0;
-  overflow: hidden; /* Disable page scrolling */
+  overflow: hidden; 
 }
 
-/* Centered container without scrolling */
+
 .total-amount-container {
   display: flex;
   flex-direction: column;
@@ -117,7 +117,7 @@ body {
   @media (max-width: 480px) {
     .total-amount-container {
       /* padding: 15px;  */
-      margin: 40px 0px ;
+      margin: 20px 0px 0px 0px ;
     }
   
     .add-entry-1,
diff --git a/src/components/pages/Expense/ExpenseCategory/ExpenseCategory.css b/src/components/pages/Expense/ExpenseCategory/ExpenseCategory.css
index 1a1336e..d437270 100644
--- a/src/components/pages/Expense/ExpenseCategory/ExpenseCategory.css
+++ b/src/components/pages/Expense/ExpenseCategory/ExpenseCategory.css
@@ -7,10 +7,11 @@
   background-color: #1e1e1e;
   color: white;
   width: 100%;
-  
   padding: 10px;
 }
 
+
+
 .arrow {
   position: absolute;
   top: 10px;
@@ -35,11 +36,11 @@
   font-size: 20px;
   margin-right: 4px;
   color: #fff;
-  margin-bottom: 20px; 
+  margin-bottom: 20px; /* Add 10px space below category titles */
 }
 
 .category-display {
-  margin: 35px 0 10px 0; 
+  margin: 35px 0 10px 0; /* 10px space below the display box */
   width: 150px;
   height: 30px;
   background: #1E1E1E;
@@ -54,7 +55,7 @@
 }
 
 
-.category-icon {
+.category01 {
   width: 30px;
   /* top: 10px; */
   justify-content: center;
@@ -106,6 +107,33 @@ border-radius: 8px;
 transition: border-color 0.3s ease, background-color 0.3s ease;
 }
 
+.add-category {
+  display: flex;
+  align-items: center;
+  margin-top: 10px;
+}
+
+.texts {
+  flex: 1;
+  padding: 5px;
+  margin-right: 10px;
+}
+
+.add-button {
+  padding: 10px 14px;
+  margin: 15px;
+  background-color: #2a2a2a;
+  color: white;
+  border: none;
+  border-radius: 3px;
+  cursor: pointer;
+}
+
+.add-button:hover {
+  background-color: #2a2a2a;
+}
+
+
 @media (max-width: 768px) {
   .category-titles {
     font-size: 20px; 
@@ -113,7 +141,7 @@ transition: border-color 0.3s ease, background-color 0.3s ease;
 
  
 
-  .category-icon {
+  .category01 {
     width: 35px;
     margin: 10px;
     height: 3px;
@@ -137,7 +165,7 @@ transition: border-color 0.3s ease, background-color 0.3s ease;
 
   }
 
-  .category-icon {
+  .category01 {
     width: 30px;
     margin: 7px;
     height: 30px;
@@ -157,45 +185,49 @@ transition: border-color 0.3s ease, background-color 0.3s ease;
 
 @media (max-width: 375px) {
   .category-container {
-    
-    padding: 0;
+    padding: 0; 
+  }
+
+  .arrow-icon {
+    font-size: 18px;
+    margin: 27px 21px;
   }
 
   .arrow {
     top: 30px; 
-    left: 20px;
+    left: 30px;
+    
   }
 
   .category-display {
-    width: 120px; 
-    height: 20px;
-    margin: 15px auto; 
-    font-size: 14px; 
+    width: 120px;
+    height: 25px;
+    margin: 35px auto; 
+    font-size: 14px;
   }
 
   .category-titles {
-    font-size: 13px;  
-    justify-content: center;
-    /* align-items: center; */
-    margin-right: 5px; 
+    font-size: 14px;
+    margin-right: 2px; 
   }
 
-  .category-icons {
-    width: 20px;
-    margin: 3px;
-    height: 20px;
+  .category01 {
+    width: 25px; 
+    height: 25px;
+    margin: 5px;
   }
+
   .cat-item {
-    min-width: 40px; 
-    font-size: 9px; 
-    padding: 6px; 
+    min-width: 50px;
+    font-size: 10px; 
+    padding: 8px; 
     margin: 6px;
   }
 
   .texts {
-    width: 80%; 
-    font-size: 14px; 
-    padding: 8px; 
-    margin: 15px 0;
+    width: 50%; 
+    font-size: 10px; 
+    padding: 8px;
+    margin: 15px 0; 
   }
 }
diff --git a/src/components/pages/Expense/ExpenseCategory/ExpenseCategory.js b/src/components/pages/Expense/ExpenseCategory/ExpenseCategory.js
index 009187d..29a715d 100644
--- a/src/components/pages/Expense/ExpenseCategory/ExpenseCategory.js
+++ b/src/components/pages/Expense/ExpenseCategory/ExpenseCategory.js
@@ -74,7 +74,7 @@ function ExpenseCategory() {
 
             <div className='category-display'>
                 <h3 className="category-titles">Categories</h3>
-                <img src={categoryImage} alt="categoryIcon" className="category-icon" />
+                <img src={categoryImage} alt="categoryIcon" className="category01" />
             </div>
 
             <section className='category-list'>
diff --git a/src/components/pages/Expense/ExpensePage/ExpensePage.css b/src/components/pages/Expense/ExpensePage/ExpensePage.css
index be977d3..c25bbc9 100644
--- a/src/components/pages/Expense/ExpensePage/ExpensePage.css
+++ b/src/components/pages/Expense/ExpensePage/ExpensePage.css
@@ -140,7 +140,7 @@
       padding: 10px;
     }
   
-    .amount-icon, .category-icon {
+    .amount-icon, .category{
       width: 40px;
       height: 40px;
       margin: 2px;
@@ -157,4 +157,36 @@
     font-size: 18px;
     }
   }
-  
\ No newline at end of file
+  
+  
+/* Styles for screens with a width of 375px */
+@media (max-width: 375px) {
+  .arrow-icon {
+    font-size: 12px;
+  }
+
+  .expense-title {
+    font-size: 18px;
+  }
+
+  .expense-date {
+    font-size: 12px;
+  }
+
+  .button-container {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .amount-btn, .category-btn {
+    width: 90%;
+    font-size: 14px;
+    padding: 12px;
+  }
+
+  .category{
+    width: 25px;
+    height: 25px;
+    margin-bottom: 5px;
+  }
+}
diff --git a/src/components/pages/Expense/ExpenseRecords/ExpenseRecords.css b/src/components/pages/Expense/ExpenseRecords/ExpenseRecords.css
index 6eea478..65abdb7 100644
--- a/src/components/pages/Expense/ExpenseRecords/ExpenseRecords.css
+++ b/src/components/pages/Expense/ExpenseRecords/ExpenseRecords.css
@@ -1,23 +1,23 @@
 
-
 .container {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     height: 100vh;
-    color: white;
     position: relative;
 }
 
 .back_arrows {
     position: absolute;
-    top: 20px;
-    left: 20px;
+    top: 10px;
+    margin: 35px;
+    left: 10px;;
 }
 
 .arrow-icon {
-    font-size: 24px;
+    font-size: 18px;
+    margin: 9px 0px 0px 0px;
     cursor: pointer;
 }
 
@@ -29,9 +29,9 @@
 }
 
 .success-titles h1 {
-    color: #fff;
+    color: #4CAF50;
     font-size: 30px;
-    margin: 10px 0; 
+    margin: 0 0; 
     text-align: center;
 }
 
@@ -45,35 +45,37 @@
     text-align: center;
     font-size: 24px; 
     color: #4CAF50; 
-    margin: 10px 0;
+    margin: 0px 0;
+    padding: 30px;
 }
-  
-  .categories {
-    margin-top: 10px; 
+
+
+.categories {
+    margin-top: 0px; 
     display: flex;
     justify-content: space-between;
     align-items: center; 
+   
 }
-  
-  .categories h3 {
+
+.categories h3 {
     font-size: 15px; 
     color: #9e9696;
-   /* margin: 0px 0px 0px 0px; */
-   /* padding: 5px; */
+   
 }
-  
-  .categories ul {
+
+.categories ul {
     list-style-type: none; 
     padding: 5px;
-  
-  }
-  
-  .categories li {
+    
+}
+
+.categories li {
     font-size: 16px;
     color: #deb1b1; 
     border-bottom: 1px solid #e0e0e0; 
     padding: 8px 0; 
-  }
+}
 
 /* Mobile responsiveness */
 @media (max-width: 768px) {
@@ -84,47 +86,32 @@
     .success-datetime {
         font-size: 16px;
     }
-}
 
-.total-amount {
-    color: #fff;
-    font-size: 12px;
-    margin: 20px 0; 
-}
+    .total-amount {
+        color: #4CAF50;
+        font-size: 12px;
+        margin: 0px 0; 
+    }
 
-.categories {
-    color: #fff;
-    font-size: 10px;
-    margin: 10px 0; 
+    .categories {
+        color: #fff;
+        font-size: 10px;
+        margin: 10px 0; 
+    }
 }
 
 .success-buttons {
     display: flex;
     justify-content: center;
-    gap: 20px;
-    margin-top: 20px;
+    gap: 10px;
+    margin-top: 0px;
 }
 
-.btn-home {
-    position: relative; 
-    width: 150px;
-    height: 60px; 
-    color: #fff;
-    justify-content: center;
-    align-items: center;
-    background: #1E1E1E;
-    box-shadow: -8px -8px 12px rgba(50, 50, 51, 0.66), 8px 8px 16px #040404, inset -2px -2px 2px rgba(4, 4, 4, 0.64), inset 2px 2px 2px rgba(39, 39, 44, 0.56);
-    border-radius: 24px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-right: 10px;
-
-}
+.btn-home,
 .btn-edit {
     position: relative; 
-    width: 150px;
-    height: 60px; 
+    width: 140px;
+    height: 50px;  
     color: #fff;
     justify-content: center;
     align-items: center;
@@ -135,7 +122,82 @@
     justify-content: center;
     align-items: center;
     margin-right: 10px;
+}
 
+@media (min-width: 1024px) {
+    .btn-edit, .btn-home {
+        width: 200px;
+        height: 50px;
+        font-size: 20px;
+    }
+
+    .total-amount {
+        color: #4CAF50;
+        font-size: 12px;
+        margin: 0px 0; 
+    }
+}
+
+/* Screen size 375px */
+@media screen and (max-width: 375px) {
+    .success-titles h1 {
+        font-size: 20px;
+    }
+
+    .success-datetime {
+        font-size: 14px;
+    }
+
+    .total-amount {
+        font-size: 18px;
+        /* padding: 20px; */
+    }
+
+    .categories li {
+        font-size: 14px;
+    }
+
+    
 }
 
 
+
+/* Screen size 687px */
+@media screen and (max-width: 687px) {
+    .success-titles h1 {
+        font-size: 22px;
+    }
+
+    .success-datetime {
+        font-size: 16px;
+    }
+
+    .total-amount {
+        font-size: 20px;
+        padding: 25px;
+    }
+
+    .categories li {
+        font-size: 15px;
+    }
+}
+
+/* Screen size 745px */
+@media screen and (max-width: 745px) {
+    .success-titles h1 {
+        font-size: 24px;
+    }
+
+    .success-datetime {
+        font-size: 16px;
+    }
+
+    .total-amount {
+        font-size: 12px;
+        
+    }
+
+    .categories li {
+        font-size: 16px;
+    }
+}
diff --git a/src/components/pages/Expense/ExpenseSuccessfully/ExpenseSuccessfully.css b/src/components/pages/Expense/ExpenseSuccessfully/ExpenseSuccessfully.css
index 370f024..4a3c4da 100644
--- a/src/components/pages/Expense/ExpenseSuccessfully/ExpenseSuccessfully.css
+++ b/src/components/pages/Expense/ExpenseSuccessfully/ExpenseSuccessfully.css
@@ -1,10 +1,3 @@
-body {
-    background-color: #1E1E1E;
-    margin: 20px;
-    padding: 0;
-    font-family: Arial, sans-serif;
-}
-
 
 .Payment-container {
     display: flex;
@@ -16,40 +9,35 @@ body {
 }
 
 .arrow {
-    font-size: 24px;
+    font-size: 18px;
     cursor: pointer;
 }
 
-
 .arr {
     position: absolute;
-    top: 20px;
-    left: 20px;
+    top: 10px;
+    left: 0px;
 }
 
-
-.income-date {
+.expense-date {
     color: #fff;
     font-size: 18px; 
     text-align: center; 
-    margin-bottom: 10px; 
+    margin-bottom: 0px; 
 }
 
-
 .payment-title {
     text-align: center;
-    margin-bottom: 10px;
+    margin-bottom: 30px;
 }
 
-
 .payment-title h1 {
     color: #fff;
-    font-size: 30px;
-    margin: 10px 0; 
+    font-size: 30px; 
+    margin: 0px 0; 
     text-align: center;
 }
 
-
 .payment-content {
     display: flex;
     flex-direction: column;
@@ -57,7 +45,6 @@ body {
     justify-content: center;
 }
 
-
 .payment-animation {
     display: flex;
     justify-content: center;
@@ -65,15 +52,13 @@ body {
     margin-bottom: 10px;
 }
 
-
 .payment-message h2 {
     color: #fff;
-    font-size: 24px;
+    font-size: 24px; 
     text-align: center;
     margin-bottom: 20px;
 }
 
-
 .payment-buttons {
     display: flex;
     justify-content: center;
@@ -81,11 +66,10 @@ body {
     margin-top: 20px;
 }
 
-
-.btn1 {
+.btn1, .bt_11 {
     position: relative; 
-    width: 150px;
-    height: 60px; 
+    width: 130px;   
+    height: 40px;  
     color: #fff;
     justify-content: center;
     align-items: center;
@@ -98,82 +82,64 @@ body {
     margin-right: 10px;
 }
 
-
-.bt_11 {
-    position: relative; 
-    width: 150px;
-    height: 60px; 
-    color: #fff;
-    justify-content: center;
-    align-items: center;
-    background: #1E1E1E;
-    box-shadow: -8px -8px 12px rgba(50, 50, 51, 0.66), 8px 8px 16px #040404, inset -2px -2px 2px rgba(4, 4, 4, 0.64), inset 2px 2px 2px rgba(39, 39, 44, 0.56);
-    border-radius: 24px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-right: 10px;
-}
-
-
-
-
+/* Small screens (up to 600px) */
 @media (max-width: 600px) {
     .payment-title h1 {
-        font-size: 24px;
+        font-size: 16px; 
     }
 
-    .income-date {
-        font-size: 16px;
+    .expense-date {
+        font-size: 12px; 
     }
 
     .payment-message h2 {
-        font-size: 20px;
+        font-size: 14px; 
     }
 
     .btn1, .bt_11 {
         width: 120px;
-        height: 50px;
-        font-size: 16px;
+        height: 40px;
+        font-size: 14px;
     }
 
     .arr {
-        top: 10px;
-        left: 10px;
+        top: 0px;
+        left: 0px;
     }
 }
 
 
 @media (max-width: 1024px) {
     .payment-title h1 {
-        font-size: 28px;
+        font-size: 22px;
     }
 
-    .income-date {
-        font-size: 16px;
+    .expense-date {
+        font-size: 14px;
     }
 
     .payment-message h2 {
-        font-size: 22px;
+        font-size: 18px;
     }
 
     .btn1, .bt_11 {
         width: 140px;
-        height: 55px;
-        font-size: 18px;
+        height: 50px;
+        font-size: 16px;
     }
 
     .arr {
-        top: 15px;
-        left: 15px;
+        top: 0;
+        left: 0px;
+        margin: 5px;
     }
 }
 
-
+/* Large screens (1025px and up) */
 @media (min-width: 1025px) {
     .btn1, .bt_11 {
-        width: 160px;
-        height: 60px;
+        width: 190px;
+        height: 50px;
         font-size: 18px;
     }
 
diff --git a/src/components/pages/Expense/ExpenseSuccessfully/ExpenseSuccessfully.js b/src/components/pages/Expense/ExpenseSuccessfully/ExpenseSuccessfully.js
index e430b3b..0865df0 100644
--- a/src/components/pages/Expense/ExpenseSuccessfully/ExpenseSuccessfully.js
+++ b/src/components/pages/Expense/ExpenseSuccessfully/ExpenseSuccessfully.js
@@ -19,7 +19,7 @@ function ExpenseSuccessfully() {
   }, []);
 
   const handleBackClick = () => {
-    navigate("/expense-edit");
+    navigate("/expense-editPage");
   };
 
   const handleBackToHome = () => {
@@ -40,7 +40,7 @@ function ExpenseSuccessfully() {
     <div className="Payment-container">
       <div className="payment-title">
         <h1>Expense</h1>
-        <p className="income-date">{formattedDate}</p>
+        <p className="expense-date">{formattedDate}</p>
         <div className="arr">
           <FontAwesomeIcon
             icon={faArrowLeft}
diff --git a/src/components/pages/Income/Amount/AmountPage.css b/src/components/pages/Income/Amount/AmountPage.css
index d8bee16..c3a553a 100644
--- a/src/components/pages/Income/Amount/AmountPage.css
+++ b/src/components/pages/Income/Amount/AmountPage.css
@@ -18,7 +18,7 @@
   position: relative;
   width: 100%;
   text-align: center; 
-  margin-bottom: 50px;
+  margin-bottom: 30px;
 }
 
 
@@ -27,7 +27,7 @@
   left: 0; 
   top: 50%;
   margin: 30px 10px;
-  /* transform: translateY(-50%); */
+  transform: translateY(90%);
   font-size: 24px;
   color: #333;
   cursor: pointer;
diff --git a/src/components/pages/Income/Amount/EntriesList.js b/src/components/pages/Income/Amount/EntriesList.js
index 2a0a80e..ecc92e1 100644
--- a/src/components/pages/Income/Amount/EntriesList.js
+++ b/src/components/pages/Income/Amount/EntriesList.js
@@ -51,7 +51,7 @@ function EntriesList() {
         id: new Date().getTime(),
         amount: repeatEntry.amount,
         category: repeatEntry.category,
-        type: repeatEntry.type, // Ensure type is included
+        type: repeatEntry.type, 
       };
 
       const updatedEntries = [...entries, newEntry];
diff --git a/src/components/pages/Income/Category/Category.css b/src/components/pages/Income/Category/Category.css
index 97be0f1..93071b0 100644
--- a/src/components/pages/Income/Category/Category.css
+++ b/src/components/pages/Income/Category/Category.css
@@ -140,7 +140,11 @@ transition: border-color 0.3s ease, background-color 0.3s ease;
     font-size: 20px; 
   }
 
- 
+  .category01 {
+    width: 28px; 
+    height: 28px;
+    margin: 5px;
+  }
 
   .category-icon {
     width: 35px;
@@ -187,28 +191,28 @@ transition: border-color 0.3s ease, background-color 0.3s ease;
 @media (max-width: 375px) {
   .category-container {
     
-    padding: 0; /* Reduce padding for a more compact layout */
+    padding: 0
   }
 
   .arrow {
-    top: 30px; /* Adjust positioning of the arrow */
+    top: 30px; 
     left: 20px;
   }
 
   .category-display {
-    width: 120px; /* Adjust width to fit smaller screens */
+    width: 120px; 
     height: 25px;
-    margin: 15px auto; /* Center and reduce margins */
-    font-size: 14px; /* Adjust font size for smaller display */
+    margin: 15px auto; 
+    font-size: 14px; 
   }
 
   .category-titles {
-    font-size: 16px; /* Reduce font size */
-    margin-right: 2px; /* Adjust spacing */
+    font-size: 16px; 
+    margin-right: 2px; 
   }
 
   .category-icon {
-    width: 25px; /* Reduce size of icons */
+    width: 25px; 
     height: 25px;
     margin: 5px;
   }
diff --git a/src/components/pages/Income/Category/Category.js b/src/components/pages/Income/Category/Category.js
index c4d2979..5d53d0f 100644
--- a/src/components/pages/Income/Category/Category.js
+++ b/src/components/pages/Income/Category/Category.js
@@ -72,7 +72,7 @@ function Category() {
 
             <div className='category-display'>
                 <h3 className="category-titles">Categories</h3>
-                <img src={categoryImage} alt="categoryIcon" className="category-icon" />
+                <img src={categoryImage} alt="categoryIcon" className="category01" />
             </div>
 
             <section className='category-list'>
diff --git a/src/components/pages/Income/Common/IncomeEdit.css b/src/components/pages/Income/Common/IncomeEdit.css
index 78d2b28..c728b07 100644
--- a/src/components/pages/Income/Common/IncomeEdit.css
+++ b/src/components/pages/Income/Common/IncomeEdit.css
@@ -1,5 +1,3 @@
-
-
 .incomeedit-containers {
     display: flex;
     flex-direction: column;
@@ -12,8 +10,8 @@
 
 .backIcon {
     position: absolute;
-    top: 20px;
-    left: 20px;
+    top: 0px;
+    left: 0px;
 }
 
 .arrow-icon {
@@ -22,62 +20,67 @@
 }
 
 .edit-content {
-  
-    padding: 20px;
+
+    padding: 10px;
+    margin-bottom: 30px;
     border-radius: 8px;
     /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); */
-    width: 100%; 
-    max-width: 400px; 
+    width: 100%;
+    max-width: 400px;
 }
 
 .edit-titles h1 {
     color: #fff;
+    margin-bottom: 30px;
     font-size: 30px;
-    margin: 0px 0; 
+    margin: 0px 0;
     text-align: center;
 }
 
 .edit-datetime {
     color: #fff;
-    font-size: 18px; 
+    margin-bottom: 30px;
+    font-size: 18px;
     text-align: center;
-    margin-bottom: 10px; 
+    margin-bottom: 10px;
 }
 
 .edit-fields {
     color: #fff;
-    margin-bottom: 15px; 
+    margin-bottom: 15px;
     width: 93%;
 }
 
 .edit-fields label {
     display: block;
-    margin-bottom: 9px; 
+    margin-bottom: 9px;
+    
 }
 
 .edit-fields input {
-    width: 100%; 
-    padding: 10px; 
-    border: 1px solid #555; 
-    border-radius: 4px; 
-    background-color: #3A3A3A;
-    color: #fff; 
-    font-size: 16px; 
+    width: 100%;
+    padding: 10px;
+    /* border: 1px solid #555; */
+    border-radius: 4px;
+    /* background-color: #3A3A3A; */
+    color: #fff;
+    font-size: 16px;
 }
 
-/* Button styling */
+
 .edit-buttons {
     display: flex;
-    justify-content: center; 
+    justify-content: center;
     margin-top: 30px;
-    width: 100%; 
+    gap: 5px;
+    width: 100%;
 }
 
 .edit-btn {
-    /* item */
-    position: relative; 
-    width: 150px;
-    height: 60px; 
+
+    position: relative;
+    width: 130px;
+    height: 50px;
     color: #fff;
     justify-content: center;
     align-items: center;
@@ -91,9 +94,9 @@
 }
 
 .edit-btn-2 {
-    position: relative; 
-    width: 150px;
-    height: 60px; 
+    position: relative;
+    width: 130px;
+    height: 50px;
     color: #fff;
     justify-content: center;
     align-items: center;
@@ -108,17 +111,26 @@
 
 @media (max-width: 768px) {
     .edit-titles h1 {
-        font-size: 24px; 
+        
+        font-size: 24px;
     }
 
     .edit-datetime {
-        font-size: 16px; 
+        
+        font-size: 16px;
     }
 
     .edit-buttons div {
         font-size: 14px;
     }
+
+    
+}
+@media (min-width: 1024px) {
+    .edit-btn, .edit-btn-2 {
+        width: 250px;
+        height: 50px;
+        font-size: 20px;
+    }
 }
 
-
-
diff --git a/src/components/pages/Income/Income/IncomePage.css b/src/components/pages/Income/Income/IncomePage.css
index b60e121..e9c9bbb 100644
--- a/src/components/pages/Income/Income/IncomePage.css
+++ b/src/components/pages/Income/Income/IncomePage.css
@@ -1,9 +1,8 @@
-/* IncomePage.css */
 
-/* Main container */
 .income-container {
   max-width: 800px;
   margin: 0 auto;
+  font-family: 'Montserrat', sans-serif;
   padding: 20px;
  justify-content: center;
   border-radius: 10px;
@@ -14,14 +13,15 @@
 .arrow-container {
   position: relative;
   width: 100%;
-  text-align: center; /* Center the title and date */
+  margin: 10px;
+  text-align: center;
   margin-bottom: 20px;
 }
 
-/* Arrow icon */
+
 .arrow-icon {
   position: absolute;
-  left: 0; /* Place the arrow on the left */
+  left: 0; 
   top: 50%;
   margin: 40px 5px;
   transform: translateY(-50%);
@@ -30,7 +30,7 @@
   cursor: pointer;
 }
 
-/* Title */
+
 .income-title {
   font-size: 24px;
   color: #fff;
@@ -40,16 +40,16 @@
   margin-top: 10px; 
 }
 
-/* Date and time */
+
 .income-date {
   font-size: 14px;
   color: #fff;
   font-family: 'Montserrat', sans-serif;
-  text-align: center; /* Center the date */
+  text-align: center; 
   margin: 10px;
 }
 
-/* Button container */
+
 .button-container {
   display: flex;
   font-family: 'Montserrat', sans-serif;
@@ -111,21 +111,21 @@
 
 
 
-/* Icons in buttons */
+
  .category-icon {
   width: 30px;
   height: 30px;
   margin-bottom: 10px;
 }
 
-/* Responsive styling */
-
-/* Mobile-specific styles */
 @media (max-width: 600px) {
 
-
+  .arrow-container{
+    margin: 20px;
+  }
   .arrow-icon {
     font-size: 15px;
+ 
   }
 
   .expense-title {
@@ -166,3 +166,37 @@
   font-size: 18px;
   }
 }
+
+/* Styles for screens with a width of 375px */
+@media (max-width: 375px) {
+  .arrow-container {
+    font-size: 12px;
+  }
+
+
+
+  .income-title {
+    font-size: 18px;
+  }
+
+  .income-date {
+    font-size: 12px;
+  }
+
+  .button-container {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .amount-btn, .category-btn {
+    width: 90%;
+    font-size: 14px;
+    padding: 12px;
+  }
+
+  .category-icon {
+    width: 25px;
+    height: 25px;
+    margin-bottom: 5px;
+  }
+}
diff --git a/src/components/pages/Income/Income/IncomeSuccessfully.css b/src/components/pages/Income/Income/IncomeSuccessfully.css
index 370f024..2a7e1fe 100644
--- a/src/components/pages/Income/Income/IncomeSuccessfully.css
+++ b/src/components/pages/Income/Income/IncomeSuccessfully.css
@@ -1,11 +1,10 @@
 body {
     background-color: #1E1E1E;
     margin: 20px;
+    font-family: 'Montserrat', sans-serif;
     padding: 0;
-    font-family: Arial, sans-serif;
 }
 
-
 .Payment-container {
     display: flex;
     flex-direction: column;
@@ -20,36 +19,31 @@ body {
     cursor: pointer;
 }
 
-
 .arr {
     position: absolute;
-    top: 20px;
-    left: 20px;
+    top: 10px;
+    left: 10px;
 }
 
-
-.income-date {
+.expense-date {
     color: #fff;
     font-size: 18px; 
     text-align: center; 
-    margin-bottom: 10px; 
+    margin-bottom: 0px; 
 }
 
-
 .payment-title {
     text-align: center;
-    margin-bottom: 10px;
+    margin-bottom: 30px;
 }
 
-
 .payment-title h1 {
     color: #fff;
-    font-size: 30px;
-    margin: 10px 0; 
+    font-size: 30px; /* Default font size */
+    margin: 0px 0; 
     text-align: center;
 }
 
-
 .payment-content {
     display: flex;
     flex-direction: column;
@@ -57,7 +51,6 @@ body {
     justify-content: center;
 }
 
-
 .payment-animation {
     display: flex;
     justify-content: center;
@@ -65,15 +58,13 @@ body {
     margin-bottom: 10px;
 }
 
-
 .payment-message h2 {
     color: #fff;
-    font-size: 24px;
+    font-size: 24px; /* Default font size */
     text-align: center;
     margin-bottom: 20px;
 }
 
-
 .payment-buttons {
     display: flex;
     justify-content: center;
@@ -81,11 +72,10 @@ body {
     margin-top: 20px;
 }
 
-
-.btn1 {
+.btn1, .bt_11 {
     position: relative; 
-    width: 150px;
-    height: 60px; 
+    width: 130px;   /* Default width */
+    height: 40px;   /* Default height */
     color: #fff;
     justify-content: center;
     align-items: center;
@@ -98,69 +88,50 @@ body {
     margin-right: 10px;
 }
 
-
-.bt_11 {
-    position: relative; 
-    width: 150px;
-    height: 60px; 
-    color: #fff;
-    justify-content: center;
-    align-items: center;
-    background: #1E1E1E;
-    box-shadow: -8px -8px 12px rgba(50, 50, 51, 0.66), 8px 8px 16px #040404, inset -2px -2px 2px rgba(4, 4, 4, 0.64), inset 2px 2px 2px rgba(39, 39, 44, 0.56);
-    border-radius: 24px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-right: 10px;
-}
-
-
-
-
+/* Small screens (up to 600px) */
 @media (max-width: 600px) {
     .payment-title h1 {
-        font-size: 24px;
+        font-size: 16px; /* Smaller font size */
     }
 
-    .income-date {
-        font-size: 16px;
+    .expense-date {
+        font-size: 12px; /* Smaller font size */
     }
 
     .payment-message h2 {
-        font-size: 20px;
+        font-size: 14px; /* Smaller font size */
     }
 
     .btn1, .bt_11 {
         width: 120px;
-        height: 50px;
-        font-size: 16px;
+        height: 40px;
+        font-size: 14px;
     }
 
     .arr {
-        top: 10px;
-        left: 10px;
+        top: 0px;
+        left: 0px;
     }
 }
 
-
+/* Medium screens (601px to 1024px) */
 @media (max-width: 1024px) {
     .payment-title h1 {
-        font-size: 28px;
+        font-size: 22px;
     }
 
-    .income-date {
-        font-size: 16px;
+    .expense-date {
+        font-size: 14px;
     }
 
     .payment-message h2 {
-        font-size: 22px;
+        font-size: 18px;
     }
 
     .btn1, .bt_11 {
         width: 140px;
-        height: 55px;
-        font-size: 18px;
+        height: 50px;
+        font-size: 16px;
     }
 
     .arr {
@@ -169,11 +140,11 @@ body {
     }
 }
 
-
+/* Large screens (1025px and up) */
 @media (min-width: 1025px) {
     .btn1, .bt_11 {
-        width: 160px;
-        height: 60px;
+        width: 190px;
+        height: 50px;
         font-size: 18px;
     }
 
diff --git a/src/components/pages/Income/Records/Records.css b/src/components/pages/Income/Records/Records.css
index 64190a6..b96817c 100644
--- a/src/components/pages/Income/Records/Records.css
+++ b/src/components/pages/Income/Records/Records.css
@@ -1,11 +1,9 @@
 
-
 .container {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
-      font-family: 'Montserrat', sans-serif;
     height: 100vh;
     color: white;
     position: relative;
@@ -13,12 +11,13 @@
 
 .back_arrows {
     position: absolute;
-    top: 20px;
-    left: 20px;
+    top: 0px;
+    left: 0px;
 }
 
 .arrow-icon {
     font-size: 24px;
+    margin: 22px 10px 0px 10px;
     cursor: pointer;
 }
 
@@ -42,11 +41,12 @@
     text-align: center; 
 }
 
-.total-amount h2 {
+.total-amount {
+    text-align: center;
     font-size: 24px; 
     color: #4CAF50; 
-    margin: 10px 0; 
-  }
+    margin: 10px 0;
+}
   
   .categories {
     margin-top: 10px; 
@@ -63,7 +63,7 @@
 }
   
   .categories ul {
-    list-style-type: none;
+    list-style-type: none; 
     padding: 5px;
   
   }
@@ -72,10 +72,10 @@
     font-size: 16px;
     color: #deb1b1; 
     border-bottom: 1px solid #e0e0e0; 
-    padding: 8px 0;
+    padding: 8px 0; 
   }
 
-
+/* Mobile responsiveness */
 @media (max-width: 768px) {
     .success-titles h1 {
         font-size: 24px; 
@@ -87,13 +87,11 @@
 }
 
 .total-amount {
-    text-align: center;
-    font-size: 24px; 
-    color: #4CAF50; 
-    margin: 10px 0;
+    color: #fff;
+    font-size: 12px;
+    margin: 20px 0; 
 }
 
-
 .categories {
     color: #fff;
     font-size: 10px;
@@ -103,14 +101,14 @@
 .success-buttons {
     display: flex;
     justify-content: center;
-    gap: 20px;
-    margin-top: 20px;
+    gap: 10px;
+    margin-top: 0px;
 }
 
 .btn-home {
     position: relative; 
-    width: 150px;
-    height: 60px; 
+    width: 140px;
+    height: 50px;  
     color: #fff;
     justify-content: center;
     align-items: center;
@@ -125,8 +123,8 @@
 }
 .btn-edit {
     position: relative; 
-    width: 150px;
-    height: 60px; 
+    width: 140px;
+    height: 50px; 
     color: #fff;
     justify-content: center;
     align-items: center;
@@ -140,4 +138,18 @@
 
 }
 
+@media (min-width: 1024px) {
+    .btn-edit, .btn-home {
+        width: 200px;
+        height: 50px;
+        font-size: 20px;
+    }
 
+    .success-title h1 {
+        font-size: 32px;
+    }
+
+    .success-message h2 {
+        font-size: 26px;
+    }
+}
diff --git a/src/components/pages/Income/Records/Records.js b/src/components/pages/Income/Records/Records.js
index a2782ff..ab40978 100644
--- a/src/components/pages/Income/Records/Records.js
+++ b/src/components/pages/Income/Records/Records.js
@@ -65,6 +65,7 @@ function Records() {
   };
 
   return (
+
     <div className="container">
       <div className="back_arrows">
         <FontAwesomeIcon