diff --git a/src/App.css b/src/App.css
index 74b5e05..e69de29 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
diff --git a/src/components/pages/Expense/Common/ExpenseLayout.css b/src/components/pages/Expense/Common/ExpenseLayout.css
index e613387..1403cdb 100644
--- a/src/components/pages/Expense/Common/ExpenseLayout.css
+++ b/src/components/pages/Expense/Common/ExpenseLayout.css
@@ -1,7 +1,7 @@
 .layout-container {
-    display: flex;
+    /* display: flex;
     flex-direction: column;
-    min-height: 100vh; 
+    min-height: 100vh;  */
     font-family: 'Montserrat', sans-serif;
   }
   
diff --git a/src/components/pages/Expense/ExpenseAmount/ExpenseAmount.css b/src/components/pages/Expense/ExpenseAmount/ExpenseAmount.css
index 27e6b21..32d38ed 100644
--- a/src/components/pages/Expense/ExpenseAmount/ExpenseAmount.css
+++ b/src/components/pages/Expense/ExpenseAmount/ExpenseAmount.css
@@ -1,191 +1,230 @@
-
 .amount-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+  margin: 0 auto;
+  max-width: 500px;
+  background-color: #1e1e1e;
+  border-radius: 10px;
+  text-align: center;
+}
+
+
+.backarrow {
+  /* position: absolute; */
+  width: 100%;
+
+
+}
+
+
+.arrowbtn {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  margin: 30px 10px;
+  /* transform: translateY(-50%); */
+  font-size: 24px;
+  color: #333;
+  cursor: pointer;
+}
+
+
+.amount-titles {
+  font-size: 24px;
+  width: 100%;
+  color: #fff;
+  margin: 0 auto;
+  text-align: center;
+  flex-grow: 1;
+}
+
+
+.amount-display {
+  display: flex;
+    width: 150px; 
+    height: 30px;
+  align-items: center;
+  justify-content: center;
+  background: #1E1E1E;
+  box-shadow: 0px 0px 22.3px #E335DC, 0px 0px 2.9px #FFFFFF, inset -2px -2px 2px rgba(4, 4, 4, 0.64), inset 2px 2px 2px rgba(39, 39, 44, 0.56);
+  border-radius: 24px;
+  padding: 10px;
+  border-radius: 8px;
+  margin-bottom: 20px;
+}
+
+.total-amount {
+  font-size: 36px;
+  color: #fff;
+  margin-right: 10px;
+
+}
+
+
+.Rupeesicon {
+  width: 30px;
+  height: 30px;
+}
+
+
+.rupess_section {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 15px;
+  margin-top: 20px;
+}
+
+
+.coin {
+  width: 50px;
+  height: 50px;
+  background: #E335DC;
+  box-shadow: -10px -10px 12px rgba(50, 50, 51, 0.66), 10px 10px 16px #040404, inset -2px -2px 2px rgba(111, 0, 121, 0.64), inset 2px 2px 2px rgba(102, 0, 98, 0.56);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+  /* border: 2px solid #fff; */
+
+
+}
+
+.coin-value {
+  font-size: 24px;
+  font-weight: bold;
+  color: #fff;
+}
+
+
+
+@media (max-width: 600px) {
+  .amount-container {
     padding: 10px;
-    margin: 0 auto;
-    max-width: 500px;
-    background-color: #1e1e1e;
-    border-radius: 10px;
-    text-align: center;
+    max-width: 100%;
   }
-  
 
   .backarrow {
-    position: relative;
-    width: 100%;
-    text-align: center; 
-    margin-bottom: 50px;
+    justify-content: space-between;
   }
-  
-  
+
   .arrowbtn {
     position: absolute;
     left: 0;
     top: 50%;
     margin: 30px 10px;
-    /* transform: translateY(-50%); */
+    /* transform: translateX(-20%); */
     font-size: 24px;
     color: #333;
     cursor: pointer;
   }
-  
 
   .amount-titles {
-    font-size: 24px;
-    width: 100px;
-    color: #fff;
-    margin: 0 auto;
-    text-align: center;
-    flex-grow: 1;
+    font-size: 20px;
   }
-  
- 
-  .amount-display {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: #1E1E1E;
-    box-shadow: 0px 0px 22.3px #E335DC, 0px 0px 2.9px #FFFFFF, inset -2px -2px 2px rgba(4, 4, 4, 0.64), inset 2px 2px 2px rgba(39, 39, 44, 0.56);
-    border-radius: 24px;
-    padding: 10px;
-    border-radius: 8px;
-    margin-bottom: 20px;
+
+  .rupess_section {
+    gap: 10px;
   }
-  
+
+  .coin {
+    width: 50px;
+    height: 50px;
+    padding: 15px;
+
+  }
+
+  .coin-value {
+    font-size: 26px;
+  }
+
+  .Rupeesicon {
+    width: 33px;
+    height: 33px;
+  }
+
   .total-amount {
-    font-size: 36px;
-    color: #fff;
-    margin-right: 10px;
-  
+    font-size: 28px;
+  }
+
+
+  .coin:hover {
+    background-color: #4caf50;
+  }
+
+}
+
+
+@media (min-width: 1024px) {
+  .amount-container {
+    max-width: 800px;
+    padding: 20px;
+  }
+
+  .coin {
+    width: 100px;
+    height: 100px;
+  }
+
+  .coin-value {
+    font-size: 20px;
   }
-  
 
   .Rupeesicon {
     width: 30px;
     height: 30px;
+    padding: 10px;
+  }
+
+  .total-amount {
+    font-size: 40px;
+  }
+}
+
+@media (max-width: 375px) {
+  .amount-container {
+    padding: 0px;
+    max-width: 90%;
+  } 
+
+  .backarrow {
+    justify-content: space-between;
+  }
+
+  .arrowbtn {
+    font-size: 20px;
+    margin: 20px 8px;
+  }
+
+  .amount-titles {
+    font-size: 18px;
   }
-  
 
   .rupess_section {
-    display: flex;
-    justify-content: center;
-    flex-wrap: wrap;
-    gap: 15px;
-    margin-top: 20px;
+    gap: 8px;
+    margin-top: 10px;
   }
-  
- 
+
   .coin {
-    width: 50px;
-    height: 50px;
-    
-    background: #E335DC;
-      box-shadow: -10px -10px 12px rgba(50, 50, 51, 0.66), 10px 10px 16px #040404, inset -2px -2px 2px rgba(111, 0, 121, 0.64), inset 2px 2px 2px rgba(102, 0, 98, 0.56);
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-    /* border: 2px solid #fff; */
-    
-  
+    width: 40px;
+    height: 35px;
   }
-  
-  
-  
 
   .coin-value {
-    font-size: 24px;
-    font-weight: bold;
-    color: #fff;
+    font-size: 20px;
   }
 
-  
+  .Rupeesicon {
+    width: 25px;
+    height: 25px;
+  }
 
-  @media (max-width: 600px) {
-    .amount-container {
-      padding: 10px;
-      max-width: 100%;
-    }
-  
-    .backarrow {
-      justify-content: space-between;
-    }
-  
-    .arrowbtn {
-      position: absolute;
-      left: 0;
-      top: 50%;
-      margin: 30px 10px;
-      /* transform: translateX(-20%); */
-      font-size: 24px;
-      color: #333;
-      cursor: pointer;
-    }
-  
-    .amount-titles {
-      font-size: 20px;
-    }
-  
-    .rupess_section {
-      gap: 10px;
-    }
-  
-    .coin {
-      width: 50px;
-      height: 50px;
-      padding: 15px;
-      
-    }
-  
-    .coin-value {
-      font-size: 26px;
-    }
-  
-    .Rupeesicon {
-      width: 20px;
-      height: 20px;
-    }
-  
-    .total-amount {
-      font-size: 28px;
-    }
-  
-    
-  .coin:hover {
-    background-color: #4caf50;
+  .total-amount {
+    font-size: 26px;
   }
-  
-  }
-  
-
-  @media (min-width: 1024px) {
-    .amount-container {
-      max-width: 800px;
-      padding: 20px;
-    }
-  
-    .coin {
-      width: 100px;
-      height: 100px;
-    }
-  
-    .coin-value {
-      font-size: 20px;
-    }
-  
-    .Rupeesicon {
-      width: 30px;
-      height: 30px;
-      padding: 10px;
-    }
-  
-    .total-amount {
-      font-size: 40px;
-    }
-  }
-  
\ No newline at end of file
+}
diff --git a/src/components/pages/Expense/ExpenseAmount/TotalExpenseAmount.css b/src/components/pages/Expense/ExpenseAmount/TotalExpenseAmount.css
index b9a14d9..6f9b908 100644
--- a/src/components/pages/Expense/ExpenseAmount/TotalExpenseAmount.css
+++ b/src/components/pages/Expense/ExpenseAmount/TotalExpenseAmount.css
@@ -1,21 +1,28 @@
+body {
+  margin: 0;
+  overflow: hidden; /* Disable page scrolling */
+}
+
+/* Centered container without scrolling */
 .total-amount-container {
-    flex-direction: column;
-    position: absolute;
-    width: 80%;
-    max-width: 500px; 
-    height: auto;
-    top: 50%; 
-    left: 50%; 
-    transform: translate(-50%, -50%); 
-    color: white;
-    font-family: 'Montserrat', sans-serif;
-    background: #1e1e1e;
-    box-shadow: -8px -8px 12px rgba(50, 50, 51, 0.66), 8px 8px 16px #040404,
-      inset -2px -2px 2px rgba(255, 255, 255, 0.64),
-      inset 2px 2px 2px rgba(39, 39, 44, 0.56);
-    padding: 20px; 
-    box-sizing: border-box; 
-  }
+  display: flex;
+  flex-direction: column;
+  position: fixed; 
+  width: 80%;
+  max-width: 500px;
+  height: 340px;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: white;
+  font-family: 'Montserrat', sans-serif;
+  background: #1e1e1e;
+  box-shadow: -8px -8px 12px rgba(50, 50, 51, 0.66), 8px 8px 16px #040404,
+    inset -2px -2px 2px rgba(255, 255, 255, 0.64),
+    inset 2px 2px 2px rgba(39, 39, 44, 0.56);
+  padding: 8px;
+  box-sizing: border-box;
+}
   
   .input-group {
     display: flex; 
@@ -82,7 +89,7 @@
   @media (max-width: 768px) {
     .total-amount-container {
       width: 90%; 
-      top: 60%; 
+      top: 65%; 
     }
   
     .input-group {
diff --git a/src/components/pages/Expense/ExpenseCategory/ExpenseCategory.css b/src/components/pages/Expense/ExpenseCategory/ExpenseCategory.css
index b4d57ab..1a1336e 100644
--- a/src/components/pages/Expense/ExpenseCategory/ExpenseCategory.css
+++ b/src/components/pages/Expense/ExpenseCategory/ExpenseCategory.css
@@ -1,158 +1,201 @@
 
 .category-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: flex-start;
-    background-color: #1e1e1e;
-    color: white;
-    width: 100%;
-    padding: 10px;
-  }
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  background-color: #1e1e1e;
+  color: white;
+  width: 100%;
+  
+  padding: 10px;
+}
 
-  
+.arrow {
+  position: absolute;
+  top: 10px;
+  left: 30px;
+}
 
-  .arrow {
-    position: absolute;
-    top: 10px;
-    left: 30px;
-  }
-  
-  .arrow-icon {
-    font-size: 24px;
-  
-  }
+.arrow-icon {
+  font-size: 24px;
+
+}
 /*   
-  .category-header {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin: 20px 0;
-    width: 100%;
-    text-align: center;
-  } */
-  
-  .category-display {
-   margin: 30px;
-    width: 150px;
-    height: 30px;
-    /* left: calc(50% - 207px / 2 - 0.5px); */
-    top: 90px;
-    background: #1E1E1E;
-    box-shadow: 0px 0px 22.3px #00D092, 0px 0px 2.9px #FFFFFF, 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;
-    align-items: center;
-    justify-content: center;
-    padding: 10px;
-    border-radius: 8px;
-  }
-  
-  .category-titles {
-    font-size: 24px;
-    margin-right: 4px;
-  }
-  
-  .category-icon {
-    width: 30px;
-    /* top: 10px; */
-    justify-content: center;
-    align-items: center;
-    /* margin: 2px; */
-    height: 30px;
-  }
-  
+.category-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 20px 0;
+  width: 100%;
+  text-align: center;
+} */
 
-  .category-list {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    width: 100%;
-    margin-top: 20px;
-  }
-  
-  .cat-item {
-    background-color: #2a2a2a;
-    border-radius: 10px;
-    padding: 15px;
-    margin: 10px;
-    min-width: 120px;
-    text-align: center;
-    font-size: 18px;
-    transition: background-color 0.3s ease;
-    cursor: pointer;
-  }
-  .cat-item.selected {
-    background-color: #007BFF; 
-    color: white; 
-    border-radius: 5px; 
+.category-titles {
+  font-size: 20px;
+  margin-right: 4px;
+  color: #fff;
+  margin-bottom: 20px; 
+}
+
+.category-display {
+  margin: 35px 0 10px 0; 
+  width: 150px;
+  height: 30px;
+  background: #1E1E1E;
+  box-shadow: 0px 0px 22.3px #00D092, 0px 0px 2.9px #FFFFFF, 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;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+  border-radius: 8px;
+}
+
+
+.category-icon {
+  width: 30px;
+  /* top: 10px; */
+  justify-content: center;
+  align-items: center;
+  margin: 2px;
+  height: 30px;
+}
+
+
+.category-list {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  width: 100%;
+  margin-top: 0px;
+}
+
+.cat-item {
+  background-color: #2a2a2a;
+  border-radius: 10px;
+  padding: 10px;
+  margin: 10px;
+  min-width: 120px;
+  text-align: center;
+  font-size: 18px;
+  transition: background-color 0.3s ease;
+  cursor: pointer;
+}
+.cat-item.selected {
+  background-color: #007BFF; 
+  color: white; 
+  border-radius: 5px; 
 }
 
 .cat-item.selected {
-  background-color: #007bff; 
-  color: #fff; 
+background-color: #007bff; 
+color: #fff; 
 }
 
 .texts  {
-  width: 50%; 
-  padding: 10px;
-  margin: 20px 0;
-  font-size: 16px;
-  border-bottom: 1px solid #fafafa;
-  outline: none;
-  color: #ffffff;
-  border-radius: 8px;
-  transition: border-color 0.3s ease, background-color 0.3s ease;
+width: 50%; 
+padding: 10px;
+margin: 20px 0;
+font-size: 16px;
+border-bottom: 1px solid #fafafa;
+outline: none;
+color: #ffffff;
+border-radius: 8px;
+transition: border-color 0.3s ease, background-color 0.3s ease;
 }
-  
 
-
-
-  @media (max-width: 768px) {
-    .category-titles {
-      font-size: 20px; 
-    }
-  
-   
-
-    .category-icon {
-      width: 35px;
-      margin: 10px;
-      height: 35px;
-    }
-  
-    .cat-item {
-      min-width: 100px; 
-      font-size: 16px; 
-    }
+@media (max-width: 768px) {
+  .category-titles {
+    font-size: 20px; 
   }
-  
-  @media (max-width: 480px) {
-    .arrow {
-      top: 40px;
-      left: 40px;
-    }
-  
-    .category-titles {
-      font-size: 18px;
+
  
-    }
-  
-    .category-icon {
-      width: 30px;
-      margin: 7px;
-      height: 30px;
-    }
-  
-    .cat-item {
-      min-width: 80px; 
-      font-size: 14px;
-      padding: 10px;
-      margin: 8px;
-    }
-  
-    .category-container {
-      padding: 0px;
-    }
+
+  .category-icon {
+    width: 35px;
+    margin: 10px;
+    height: 3px;
   }
-  
\ No newline at end of file
+
+  .cat-item {
+    min-width: 100px; 
+    font-size: 16px; 
+  }
+}
+
+@media (max-width: 480px) {
+  .arrow {
+    top: 40px;
+    left: 40px;
+  }
+
+  .category-titles {
+    font-size: 18px;
+    color: #fff;
+
+  }
+
+  .category-icon {
+    width: 30px;
+    margin: 7px;
+    height: 30px;
+  }
+
+  .cat-item {
+    min-width: 80px; 
+    font-size: 14px;
+    padding: 10px;
+    margin: 8px;
+  }
+
+  .category-container {
+    padding: 0px;
+  }
+}
+
+@media (max-width: 375px) {
+  .category-container {
+    
+    padding: 0;
+  }
+
+  .arrow {
+    top: 30px; 
+    left: 20px;
+  }
+
+  .category-display {
+    width: 120px; 
+    height: 20px;
+    margin: 15px auto; 
+    font-size: 14px; 
+  }
+
+  .category-titles {
+    font-size: 13px;  
+    justify-content: center;
+    /* align-items: center; */
+    margin-right: 5px; 
+  }
+
+  .category-icons {
+    width: 20px;
+    margin: 3px;
+    height: 20px;
+  }
+  .cat-item {
+    min-width: 40px; 
+    font-size: 9px; 
+    padding: 6px; 
+    margin: 6px;
+  }
+
+  .texts {
+    width: 80%; 
+    font-size: 14px; 
+    padding: 8px; 
+    margin: 15px 0;
+  }
+}
diff --git a/src/components/pages/Expense/ExpenseCategory/ExpenseCategory.js b/src/components/pages/Expense/ExpenseCategory/ExpenseCategory.js
index 6b04f05..009187d 100644
--- a/src/components/pages/Expense/ExpenseCategory/ExpenseCategory.js
+++ b/src/components/pages/Expense/ExpenseCategory/ExpenseCategory.js
@@ -8,21 +8,18 @@ import '../ExpenseCategory/ExpenseCategory.css';
 
 
 function ExpenseCategory() {
-  
-
     const navigate = useNavigate();
     const [totalAmount, setTotalAmount, category, setCategory] = useOutletContext(); 
     const [categories, setCategories] = useState(["Hair", "Clothing", "Food", "Books", "Electronics", "Other"]);
     const [selectedCategories, setSelectedCategories] = useState([]);
     const [customCategoryCount, setCustomCategoryCount] = useState(0);
+    const [newCategory, setNewCategory] = useState('');
     const location = useLocation(); 
 
-
     const entryType = location.state?.entryType; 
 
     const handleBackClick = () => {
-        
-        navigate("/expense", { state: { entryType } }); 
+        navigate("/income", { state: { entryType } }); 
         console.log(entryType);  
     }
 
@@ -38,7 +35,8 @@ function ExpenseCategory() {
         }
     };
 
-    const handleAddCategory = (newCategory) => {
+    const handleAddCategory = () => {
+        if (newCategory.trim() === '') return;
         if (!categories.includes(newCategory)) {
             if (customCategoryCount < 3) {
                 const updatedCategories = [...categories, newCategory];
@@ -46,6 +44,7 @@ function ExpenseCategory() {
                 setCustomCategoryCount(customCategoryCount + 1);
                 localStorage.setItem('categories', JSON.stringify(updatedCategories));
                 alert(`Category "${newCategory}" added!`);
+                setNewCategory(''); // Clear input field after adding
             } else {
                 alert('You can only add up to three custom categories!');
             }
@@ -77,7 +76,7 @@ function ExpenseCategory() {
                 <h3 className="category-titles">Categories</h3>
                 <img src={categoryImage} alt="categoryIcon" className="category-icon" />
             </div>
-  
+
             <section className='category-list'>
                 {categories.map((cat, index) => (
                     <div 
@@ -90,20 +89,25 @@ function ExpenseCategory() {
                 ))}
             </section>
 
+            {/* Input and button for adding new category */}
             {customCategoryCount < 3 && (
-                <input className='texts'
-                    type="text" 
-                    placeholder="Add New Category" 
-                    onKeyDown={(e) => {
-                        if (e.key === 'Enter') {
-                            handleAddCategory(e.target.value);
-                            e.target.value = '';
-                        }
-                    }} 
-                />
+                <div className="add-category">
+                    <input 
+                        className='texts'
+                        type="text" 
+                        placeholder="Add New Category" 
+                        value={newCategory}
+                        onChange={(e) => setNewCategory(e.target.value)}
+                    />
+                    <button 
+                        className="add-button" 
+                        onClick={handleAddCategory}
+                    >
+                        Add
+                    </button>
+                </div>
             )}
         </div>
     );
 }
-
 export default ExpenseCategory;
diff --git a/src/components/pages/Expense/ExpensePage/ExpensePage.css b/src/components/pages/Expense/ExpensePage/ExpensePage.css
index 531bb19..be977d3 100644
--- a/src/components/pages/Expense/ExpensePage/ExpensePage.css
+++ b/src/components/pages/Expense/ExpensePage/ExpensePage.css
@@ -1,6 +1,6 @@
 
 .expense-container {
-    max-width: 800px;
+    max-width: 100%;
     margin: 0 auto;
     padding: 20px;
    justify-content: center;
diff --git a/src/components/pages/Income/Amount/TotalAmount.css b/src/components/pages/Income/Amount/TotalAmount.css
index 68e16c4..4ddd998 100644
--- a/src/components/pages/Income/Amount/TotalAmount.css
+++ b/src/components/pages/Income/Amount/TotalAmount.css
@@ -1,20 +1,26 @@
+body {
+  margin: 0;
+  overflow: hidden; 
+}
+
 .total-amount-container {
+  display: flex;
   flex-direction: column;
-  position: absolute;
+  position: relative; 
   width: 80%;
-  max-width: 500px; 
+  max-width: 500px;
   height: auto;
-  top: 50%; 
-  left: 50%; 
-  transform: translate(-50%, -50%); 
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
   color: white;
   font-family: 'Montserrat', sans-serif;
   background: #1e1e1e;
   box-shadow: -8px -8px 12px rgba(50, 50, 51, 0.66), 8px 8px 16px #040404,
     inset -2px -2px 2px rgba(255, 255, 255, 0.64),
     inset 2px 2px 2px rgba(39, 39, 44, 0.56);
-  padding: 20px; 
-  box-sizing: border-box; 
+  padding: 20px;
+  box-sizing: border-box;
 }
 
 .input-group {
@@ -75,14 +81,14 @@ input:focus {
   align-items: center;
   cursor: pointer;
 }
-.error-message{
+.error-message {
   color: red;
 }
 
 @media (max-width: 768px) {
   .total-amount-container {
     width: 90%; 
-    top: 60%; 
+    top: auto; 
   }
 
   .input-group {
@@ -119,3 +125,24 @@ input:focus {
     height: 40px;
   }
 }
+
+
+@media (max-width: 375px) {
+  .total-amount-container {
+    padding: 15px; 
+    margin: 20px; 
+    width: 95%; 
+  }
+
+  .amount-input,
+  .category-input {
+    min-width: 150px; 
+  }
+
+  .add-entry-1,
+  .add-entry-2 {
+    font-size: 12px;
+    height: 35px; 
+  }
+}
+ 
\ No newline at end of file
diff --git a/src/components/pages/Income/Category/Category.css b/src/components/pages/Income/Category/Category.css
index e7cccec..97be0f1 100644
--- a/src/components/pages/Income/Category/Category.css
+++ b/src/components/pages/Income/Category/Category.css
@@ -1,166 +1,229 @@
 
 .category-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: flex-start;
-    background-color: #1e1e1e;
-    color: white;
-    width: 100%;
-      font-family: 'Montserrat', sans-serif;
-    padding: 10px;
-  }
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  background-color: #1e1e1e;
+  color: white;
+  width: 100%;
+  
+  padding: 10px;
+}
 
-  
 
-  .arrow {
-    position: absolute;
-    top: 10px;
-    left: 30px;
-  }
-  
-  .arrow-icon {
-    font-size: 24px;
-    right: 85px;
-    bottom: 40px;
-  
-  }
+
+.arrow {
+  position: absolute;
+  top: 10px;
+  left: 30px;
+}
+
+.arrow-icon {
+  font-size: 24px;
+
+}
 /*   
-  .category-header {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin: 20px 0;
-    width: 100%;
-    text-align: center;
-  } */
-  
-  .category-display {
-   margin: 40px;
-    width: 10px;
-    height: 30px;
-    /* left: calc(50% - 207px / 2 - 0.5px); */
-    top: 90px;
-    background: #1E1E1E;
-    box-shadow: 0px 0px 22.3px #00D092, 0px 0px 2.9px #FFFFFF, 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;
-    align-items: center;
-    justify-content: center;
-    padding: 10px;
-    border-radius: 8px;
-  }
-  
-  .category-titles {
-    font-size: 24px;
-    color: #fff;
-    margin-right: 4px;
-  }
-  
-  .category-icon {
-    width: 30px;
-    /* top: 10px; */
-    justify-content: center;
-    align-items: center;
-    /* margin: 2px; */
-    height: 30px;
-  }
-  
+.category-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 20px 0;
+  width: 100%;
+  text-align: center;
+} */
 
-  .category-list {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    width: 100%;
-    margin-top: 20px;
-  }
-  
-  .cat-item {
-    background-color: #2a2a2a;
-    border-radius: 10px;
-    padding: 15px;
-    margin: 10px;
-    min-width: 120px;
-    text-align: center;
-    font-size: 18px;
-    transition: background-color 0.3s ease;
-    cursor: pointer;
-  }
-  .cat-item.selected {
-    background-color: #007BFF;
-    color: white;
-    border-radius: 5px; 
+.category-titles {
+  font-size: 20px;
+  margin-right: 4px;
+  color: #fff;
+  margin-bottom: 20px; /* Add 10px space below category titles */
+}
+
+.category-display {
+  margin: 35px 0 10px 0; /* 10px space below the display box */
+  width: 150px;
+  height: 30px;
+  background: #1E1E1E;
+  box-shadow: 0px 0px 22.3px #00D092, 0px 0px 2.9px #FFFFFF, 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;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+  border-radius: 8px;
+}
+
+
+.category-icon {
+  width: 30px;
+  /* top: 10px; */
+  justify-content: center;
+  align-items: center;
+  margin: 2px;
+  height: 30px;
+}
+
+
+.category-list {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  width: 100%;
+  margin-top: 0px;
+}
+
+.cat-item {
+  background-color: #2a2a2a;
+  border-radius: 10px;
+  padding: 10px;
+  margin: 10px;
+  min-width: 120px;
+  text-align: center;
+  font-size: 18px;
+  transition: background-color 0.3s ease;
+  cursor: pointer;
+}
+.cat-item.selected {
+  background-color: #007BFF; 
+  color: white; 
+  border-radius: 5px; 
 }
 
 .cat-item.selected {
-  background-color: #007bff; 
-  color: #fff; 
+background-color: #007bff; 
+color: #fff; 
 }
 
 .texts  {
-  width: 50%; 
-  padding: 10px;
-  margin: 20px 0;
-  font-size: 16px;
-  border-bottom: 1px solid #fafafa;
-  outline: none;
-  color: #ffffff;
-  border-radius: 8px;
-  transition: border-color 0.3s ease, background-color 0.3s ease;
+width: 50%; 
+padding: 10px;
+margin: 20px 0;
+font-size: 16px;
+border-bottom: 1px solid #fafafa;
+outline: none;
+color: #ffffff;
+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;
 }
-  
 
 
-  
-  /* Mobile responsiveness */
-  @media (max-width: 768px) {
-    .category-titles {
-      font-size: 20px;
-    }
-  
-    .category-container {
-      margin: 10px;
-    }
-
-    .category-icon {
-      width: 35px;
-      margin: 10px;
-      height: 35px;
-    }
-  
-    .cat-item {
-      min-width: 100px;
-      font-size: 16px; 
-    }
+@media (max-width: 768px) {
+  .category-titles {
+    font-size: 20px; 
   }
-  
-  @media (max-width: 480px) {
-    .arrow {
-      top: 30px;
-      left: 10px;
-    }
-  
-    .category-titles {
-      font-size: 18px;
+
  
-    }
-  
-    .category-icon {
-      width: 30px;
-      margin: 7px;
-      height: 30px;
-    }
-  
-    .cat-item {
-      min-width: 80px; 
-      font-size: 14px;
-      padding: 10px;
-      margin: 8px;
-    }
-  
-    .category-container {
-      padding: 0px;
-    }
+
+  .category-icon {
+    width: 35px;
+    margin: 10px;
+    height: 3px;
   }
-  
\ No newline at end of file
+
+  .cat-item {
+    min-width: 100px; 
+    font-size: 16px; 
+  }
+}
+
+@media (max-width: 480px) {
+  .arrow {
+    top: 40px;
+    left: 40px;
+  }
+
+  .category-titles {
+    font-size: 18px;
+    color: #fff;
+
+  }
+
+  .category-icon {
+    width: 30px;
+    margin: 7px;
+    height: 30px;
+  }
+
+  .cat-item {
+    min-width: 80px; 
+    font-size: 14px;
+    padding: 10px;
+    margin: 8px;
+  }
+
+  .category-container {
+    padding: 0px;
+  }
+}
+
+@media (max-width: 375px) {
+  .category-container {
+    
+    padding: 0; /* Reduce padding for a more compact layout */
+  }
+
+  .arrow {
+    top: 30px; /* Adjust positioning of the arrow */
+    left: 20px;
+  }
+
+  .category-display {
+    width: 120px; /* Adjust width to fit smaller screens */
+    height: 25px;
+    margin: 15px auto; /* Center and reduce margins */
+    font-size: 14px; /* Adjust font size for smaller display */
+  }
+
+  .category-titles {
+    font-size: 16px; /* Reduce font size */
+    margin-right: 2px; /* Adjust spacing */
+  }
+
+  .category-icon {
+    width: 25px; /* Reduce size of icons */
+    height: 25px;
+    margin: 5px;
+  }
+
+  .cat-item {
+    min-width: 70px;
+    font-size: 12px; 
+    padding: 8px; 
+    margin: 6px;
+  }
+
+  .texts {
+    width: 80%; 
+    font-size: 14px; 
+    padding: 8px;
+    margin: 15px 0; 
+  }
+}
diff --git a/src/components/pages/Income/Category/Category.js b/src/components/pages/Income/Category/Category.js
index 5cf8f7c..c4d2979 100644
--- a/src/components/pages/Income/Category/Category.js
+++ b/src/components/pages/Income/Category/Category.js
@@ -11,13 +11,12 @@ function Category() {
     const [categories, setCategories] = useState(["Hair", "Clothing", "Food", "Books", "Electronics", "Other"]);
     const [selectedCategories, setSelectedCategories] = useState([]);
     const [customCategoryCount, setCustomCategoryCount] = useState(0);
+    const [newCategory, setNewCategory] = useState('');
     const location = useLocation(); 
 
-
     const entryType = location.state?.entryType; 
 
     const handleBackClick = () => {
-        
         navigate("/income", { state: { entryType } }); 
         console.log(entryType);  
     }
@@ -34,7 +33,8 @@ function Category() {
         }
     };
 
-    const handleAddCategory = (newCategory) => {
+    const handleAddCategory = () => {
+        if (newCategory.trim() === '') return;
         if (!categories.includes(newCategory)) {
             if (customCategoryCount < 3) {
                 const updatedCategories = [...categories, newCategory];
@@ -42,6 +42,7 @@ function Category() {
                 setCustomCategoryCount(customCategoryCount + 1);
                 localStorage.setItem('categories', JSON.stringify(updatedCategories));
                 alert(`Category "${newCategory}" added!`);
+                setNewCategory(''); // Clear input field after adding
             } else {
                 alert('You can only add up to three custom categories!');
             }
@@ -73,7 +74,7 @@ function Category() {
                 <h3 className="category-titles">Categories</h3>
                 <img src={categoryImage} alt="categoryIcon" className="category-icon" />
             </div>
-  
+
             <section className='category-list'>
                 {categories.map((cat, index) => (
                     <div 
@@ -86,17 +87,23 @@ function Category() {
                 ))}
             </section>
 
+            {/* Input and button for adding new category */}
             {customCategoryCount < 3 && (
-                <input className='texts'
-                    type="text" 
-                    placeholder="Add New Category" 
-                    onKeyDown={(e) => {
-                        if (e.key === 'Enter') {
-                            handleAddCategory(e.target.value);
-                            e.target.value = '';
-                        }
-                    }} 
-                />
+                <div className="add-category">
+                    <input 
+                        className='texts'
+                        type="text" 
+                        placeholder="Add New Category" 
+                        value={newCategory}
+                        onChange={(e) => setNewCategory(e.target.value)}
+                    />
+                    <button 
+                        className="add-button" 
+                        onClick={handleAddCategory}
+                    >
+                        Add
+                    </button>
+                </div>
             )}
         </div>
     );
diff --git a/src/components/pages/Income/Home.css b/src/components/pages/Income/Home.css
index dfe1006..51f8e5b 100644
--- a/src/components/pages/Income/Home.css
+++ b/src/components/pages/Income/Home.css
@@ -123,7 +123,7 @@
   }
 
   .buttons {
-    max-width: 100%;
+    max-width: 80%;
   }
 
   .expense-btn, .income-btn {
diff --git a/src/index.css b/src/index.css
index ec2585e..e69de29 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,13 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}