diff --git a/static/css/report_model.css b/static/css/report_model.css
index b42d5a8..5e1b203 100644
--- a/static/css/report_model.css
+++ b/static/css/report_model.css
@@ -1,3 +1,152 @@
+/* ================= RESET ================= */
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+/* ================= BODY ================= */
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  background-color: #f4f7f9;
+  height: 100vh;
+  overflow: hidden;
+  /* no scroll desktop */
+}
+
+/* ================= LINKS ================= */
+a {
+  text-decoration: none !important;
+  color: #007bff;
+}
+
+/* ================= NAVBAR ================= */
+.navbar {
+  width: 100%;
+  height: 60px;
+  background-color: #007bff;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  color: white;
+  z-index: 1000;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+.nav-left {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+
+.nav-logo {
+  height: 70px;
+  filter: brightness(0) invert(1);
+}
+
+.toggle-btn {
+  font-size: 26px;
+  cursor: pointer;
+}
+
+/* ================= SIDEBAR ================= */
+.sidebar {
+  width: 250px;
+  background: white;
+  height: calc(100vh - 60px);
+  position: fixed;
+  top: 60px;
+  left: 0;
+  padding-top: 20px;
+  border-right: 1px solid #d6d6d6;
+  display: flex;
+  flex-direction: column;
+}
+
+.sidebar.hide {
+  left: -250px;
+}
+
+.menu-items {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.menu-btn {
+  padding: 14px 20px;
+  font-size: 16px;
+  color: #007bff;
+  font-weight: 600;
+  cursor: pointer;
+  border-bottom: 1px solid #e5e5e5;
+}
+
+.menu-btn:hover {
+  background: #e9f3ff;
+}
+
+.submenu {
+  display: none;
+  background: #f4faff;
+}
+
+.submenu a {
+  padding: 12px 35px;
+  display: block;
+  color: #0056b3;
+}
+
+/* ================= MAIN ================= */
+.main {
+  margin-left: 250px;
+  margin-top: 60px;
+  width: calc(100% - 250px);
+  height: calc(100vh - 60px);
+  display: flex;
+  flex-direction: column;   /* 🔥 important */
+  padding: 20px 30px;
+}
+
+.main-top-bar {
+  width: 100%;
+  display: flex;
+  justify-content: flex-start;  /* or flex-end */
+  margin-bottom: 10px;
+}
+
+/* Back button styling */
+.back-btn {
+    padding: 8px 16px;
+    background-color: #6c757d;
+    color: #fff;
+    text-decoration: none;
+    border-radius: 6px;
+    font-size: 14px;
+    font-weight: 500;
+    transition: 0.2s ease;
+}
+
+.back-btn:hover {
+    background-color: #545b62;
+    transform: translateY(-1px);
+}
+/* ================= CONTAINER ================= */
+.container {
+  margin: auto;   /* 🔥 centers card vertically & horizontally */
+  width: 100%;
+  max-width: 680px;
+  background: #ffffff;
+  padding: 45px 55px;
+  border-radius: 14px;
+  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.12);
+  text-align: center;
+}
+
 /* ================= HEADING ================= */
 .container h2 {
   font-size: 28px;
@@ -91,6 +240,23 @@ button:hover {
     height: auto;
     padding: 20px 15px;
   }
+    .toggle-btn {
+    display: block;
+  }
+
+  .sidebar {
+    left: -100%;
+    width: 85%;
+    max-width: 280px;
+    transition: 0.3s;
+    z-index: 2000;
+    box-shadow: 4px 0 15px rgba(0,0,0,0.2);
+  }
+
+  .sidebar.show {
+    left: 0;
+  }
+
 
   .container {
     max-width: 100%;
diff --git a/static/index.css b/static/index.css
deleted file mode 100644
index 175fc97..0000000
--- a/static/index.css
+++ /dev/null
@@ -1,105 +0,0 @@
-body {
-    font-family: Arial, sans-serif;
-    background-color: #f2f6fc;
-    margin: 0;
-    padding: 0;
-}
-
-.container {
-    max-width: 800px;
-    margin: 40px auto;
-    padding: 30px;
-    background-color: #ffffff;
-    border-radius: 12px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-}
-
-h2 {
-    text-align: center;
-    color: #333;
-    margin-bottom: 20px;
-}
-
-form label {
-    display: block;
-    margin-top: 15px;
-    font-weight: 500;
-    color: #444;
-}
-
-form input[type="number"] {
-    width: 100%;
-    padding: 8px 10px;
-    margin-top: 5px;
-    border: 1px solid #ccc;
-    border-radius: 6px;
-    font-size: 14px;
-}
-
-form button {
-    margin-top: 25px;
-    background-color: #007BFF;
-    color: white;
-    padding: 12px 20px;
-    border: none;
-    border-radius: 6px;
-    font-size: 16px;
-    cursor: pointer;
-    width: 100%;
-    transition: background-color 0.3s ease;
-}
-
-form button:hover {
-    background-color: #0056b3;
-}
-
-input[type="file"] {
-    padding: 10px 12px;
-    border: 1px solid #ccc;
-    border-radius: 6px;
-    font-size: 16px;
-    transition: border-color 0.3s ease;
-}
-
-input[type="file"]:focus {
-    border-color: #007BFF;
-    outline: none;
-}
-
-
-/* Back button styling */
-.back-btn {
-    display: inline-block;
-    margin-bottom: 20px;
-    padding: 10px 18px;
-    background: #6c757d;
-    color: white;
-    font-size: 15px;
-    font-weight: 600;
-    border-radius: 6px;
-    text-decoration: none;
-    transition: background 0.3s ease;
-}
-
-.back-btn:hover {
-    background: #5a6268;
-}
-
-.form-group select {
-    width: 100%;
-    padding: 10px 12px;
-    border: 1px solid #cbd3da;
-    border-radius: 8px;
-    font-size: 16px;
-    background-color: #fdfdfd;
-    height: 40px;
-    cursor: pointer;
-    transition: all 0.25s ease-in-out;
-}
-
-.form-group select:focus {
-    border-color: #007BFF;
-    background: #ffffff;
-    box-shadow: 0 0 8px rgba(0, 123, 255, 0.25);
-    outline: none;
-}
\ No newline at end of file
diff --git a/static/js/mat_credit.js b/static/js/mat_credit.js
index 1327b12..8a2b527 100644
--- a/static/js/mat_credit.js
+++ b/static/js/mat_credit.js
@@ -65,6 +65,7 @@ function addRow() {
         <td><input></td>
         ${utilizedCols}
         <td><input></td>
+        <td><input></td>
         <td>
             <button onclick="saveRow(this)">Save</button>
         </td>
diff --git a/templates/ao_reports.html b/templates/ao_reports.html
index 09dd58c..ba4d5d3 100644
--- a/templates/ao_reports.html
+++ b/templates/ao_reports.html
@@ -7,6 +7,11 @@
 {% endblock %}
 
 {% block content %}
+<div class="main-top-bar">
+    <a href="{{ url_for('reports') }}" class="back-btn">
+        ← Back to Reports
+    </a>
+</div>
 <div class="container">
     <h2>Download Assessing Officer(AO) Report</h2>
     <form method="GET" action="{{ url_for('ao_report') }}" target="_blank">
diff --git a/templates/cit_reports.html b/templates/cit_reports.html
index be2e1c1..19cc781 100644
--- a/templates/cit_reports.html
+++ b/templates/cit_reports.html
@@ -7,6 +7,11 @@
 {% endblock %}
 
 {% block content %}
+<div class="main-top-bar">
+    <a href="{{ url_for('reports') }}" class="back-btn">
+        ← Back to Reports
+    </a>
+</div>
 <div class="container">
     <h2>Download CIT Report</h2>
     <form method="GET" action="{{ url_for('cit_report') }}" target="_blank">
diff --git a/templates/itat_reports.html b/templates/itat_reports.html
index bedee3e..ee11bac 100644
--- a/templates/itat_reports.html
+++ b/templates/itat_reports.html
@@ -7,6 +7,11 @@
 {% endblock %}
 
 {% block content %}
+<div class="main-top-bar">
+    <a href="{{ url_for('reports') }}" class="back-btn">
+        ← Back to Reports
+    </a>
+</div>
 <div class="container">
     <h2>Download Income Tax Appellate Tribunal(ITAT) Report</h2>
     <form method="GET" action="{{ url_for('itat_report') }}" target="_blank">
diff --git a/templates/itr_reports.html b/templates/itr_reports.html
index 3a53c02..0d672b7 100644
--- a/templates/itr_reports.html
+++ b/templates/itr_reports.html
@@ -7,6 +7,11 @@
 {% endblock %}
 
 {% block content %}
+<div class="main-top-bar">
+    <a href="{{ url_for('reports') }}" class="back-btn">
+        ← Back to Reports
+    </a>
+</div>
 <div class="container">
     <h2>Download Income Tax Return(ITR) Report</h2>
     <form method="GET" action="{{ url_for('itr_report') }}" target="_blank">