diff --git a/templates/bg.jpg b/templates/bg.jpg
new file mode 100644
index 0000000..2ca89dd
Binary files /dev/null and b/templates/bg.jpg differ
diff --git a/templates/table.html b/templates/table.html
index f47bb0d..7440f99 100644
--- a/templates/table.html
+++ b/templates/table.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <title>{{.ClassName}} Time Table</title>
+    <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700&display=swap" rel="stylesheet">
     <link
       href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css"
       rel="stylesheet"
@@ -23,249 +24,259 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <style>
       body {
-        background-image: url("/static/table-background.webp");
-        background-size: cover;
+        background: black;
+        background-image: 
+          linear-gradient(to right, #ffffff20 1px, transparent 1px),
+          linear-gradient(to bottom, rgba(255, 255, 255, 0.121) 1px, transparent 1px);
+        background-size: 40px 40px;
+        font-family: "Rubik", sans-serif !important;
+        color: #fff;
+        margin: 0;
+        padding: 0;
       }
+
       .container {
         display: flex;
         flex-direction: column;
         align-items: center;
       }
 
-      /* Center the buttons */
+      /* Buttons */
       .button-container {
-        margin-top: 20px;
+        margin: 20px auto;
         display: flex;
         justify-content: center;
         gap: 20px;
+        flex-wrap: wrap;
       }
 
-      .table-responsive {
-        padding: 3%;
-        max-width: 90%;
+      .btn {
+        border-radius: 12px;
+        padding: 10px 18px;
+        font-weight: 500;
+        box-shadow: 0 4px 10px rgba(0,0,0,0.4);
+        transition: all 0.3s ease-in-out;
       }
 
-      .contribution-banner {
-        background-color: #212529;
-        color: #ffffff;
-        text-align: center;
-        padding: 10px;
-        margin-top: 20px;
-        font-size: 0.9rem;
+      .btn:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 6px 14px rgba(0,0,0,0.5);
       }
 
-      @media print {
-        body {
-          margin: 0;
-          padding: 0;
-          font-family: Arial, sans-serif;
-        }
+      .header-day {
+        background: #3b3f45 !important;
+        font-weight: bold !important;
+        color: #CFDDF7 !important;
+      }
 
-        @page {
-          size: A4 portrait;
-          margin: 0.5in;
-        }
+      .header-time {
+        background: #3b3f45 !important;
+        font-weight: bold !important;
+        color: #CFDDF7 !important;
+      }
 
-        .table-responsive {
-          width: 100%;
-          max-width: 100%;
-          overflow: visible;
-        }
+      /* Timetable container */
+      .table-responsive {
+        padding: 2%;
+        max-width: 100%;
+        border-radius: 16px;
+        overflow-x: auto;
+      }
 
-        .table, .table td {
-          font-size: 11px;
-          padding: 3px;
-          line-height: 1.4;
-        }
+      /* Table styling */
+      .table {
+        border-collapse: separate;
+        border-spacing: 10px;
+        background: transparent;
+        width: 100%;
+        table-layout: fixed;
+      }
 
-        #timetable {
-          margin-bottom: 5px;
-          page-break-before: auto;
-          page-break-after: auto;
-          max-width: 100%;
-        }
+      .table td {
+        border: none;
+        border-radius: 12px;
+        padding: 12px;
+        font-size: clamp(0.6rem, 1.5vw, 0.95rem);
+        font-weight: 500;
+        text-align: center;
+        color: #f1f1f1;
+        box-shadow: 0 3px 10px rgba(0,0,0,0.3);
+        transition: transform 0.25s ease, box-shadow 0.25s ease;
+        vertical-align: middle;
+        height: 100%;
+      }
 
-        footer {
-          width: 100%;
-          text-align: center;
-          font-size: 8px;
-          margin-top: 10px;
-          padding: 5px 0;
-          line-height: 1;
-          page-break-before: auto;
-        }
+      .table td div {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 60px;
+      padding: 5px;
+      word-wrap: break-word;
+      overflow-wrap: break-word;
+      white-space: normal;          
+      text-align: center;
+      font-size: clamp(0.55rem, 1.2vw, 0.85rem);  /* auto shrink on small screens */
+      line-height: 1.2;
+    }
 
-        footer p {
-          margin: 0;
-        }
 
-        footer .text-warning {
-          display: none; /* Removes "Project Contributors" line */
-        }
+      .table td:hover {
+        transform: scale(1.03);
+        box-shadow: 0 6px 16px rgba(0,0,0,0.4);
+      }
 
-        footer img {
-          display: block;
-          margin: 0 auto;
-          width: 200px;
-          height: auto;
-        }
+      /* Color themes for subjects */
+      .bg-success { background: #24272C !important; }
+      .bg-danger {
+        background: radial-gradient(circle at center, rgba(0,198,92,0.6) 5%, rgba(46,204,113,0.05) 100%) !important;
+      }
+      .bg-primary {
+        background: radial-gradient(circle at center, rgba(225,0,4,0.6) 5%, rgba(42,8,8,0.95) 100%)!important;
+      }
+      .bg-warning {
+        background: radial-gradient(circle at center, rgba(67,70,248,0.6) 5%, rgba(20,30,60,0.95) 100%)!important;
+      }
+      .bg-dark { background: #24272c !important; }
+      .bg-info { background: linear-gradient(135deg, #00c6ff, #0072ff) !important; }
 
-        footer .text-danger {
-          font-size: 10px;
-          line-height: 1.2;
-          margin-bottom: 5px;
-        }
+      /* Footer */
+      footer {
+        background: #111;
+        color: #bbb;
+        padding: 15px;
+        font-size: 0.85rem;
+        border-top: 1px solid #333;
+      }
+      footer a { color: #4da8ff; text-decoration: none; font-weight: 500; }
+      footer a:hover { text-decoration: underline; }
 
-        #timetable {
-          margin-bottom: 5px;
-          page-break-before: auto; 
-          page-break-after: auto;
-        }
+      /* responsive contributors images  */
+     footer p img {
+      max-width: 90%;      
+      height: auto;        
+      display: block;      
+      margin: 0 auto;      
+    }
 
-        header {
-          display: none;
+       /* ultra-small screens  */
+      @media (max-width: 400px) {
+        footer p img {
+          max-width: 100%;   
         }
+      }
 
-        body {
-          padding: 0;
-          margin: 0;
-        }
 
-        footer {
-          max-height: 100px; /* Compress banner height */
-        }
+      @media (max-width: 600px) {
+      .table td div {
+        font-size: 0.5rem;   
+        padding: 3px;
+        line-height: 1.1;
       }
+    }
 
+      /* for ultra-small screens  */
+      @media (max-width: 400px) {
+        .table td {
+          padding: 6px 4px; 
+        }
+        .table td div {
+          font-size: 0.4rem; 
+          word-break: break-word; 
+          line-height: 1.05;
+        }
+      }
 
 
+      @media print {
+        body { margin: 0; padding: 0; font-family: Arial, sans-serif; }
+        @page { size: A4 portrait; margin: 0.5in; }
+        .table-responsive { width: 100%; max-width: 100%; overflow: visible; }
+        .table, .table td { font-size: 11px; padding: 3px; line-height: 1.4; }
+        #timetable { margin-bottom: 5px; page-break-before: auto; page-break-after: auto; max-width: 100%; }
+        footer { width: 100%; text-align: center; font-size: 8px; margin-top: 10px; padding: 5px 0; line-height: 1; }
+        footer .text-warning { display: none; }
+        footer img { display: block; margin: 0 auto; width: 200px; height: auto; }
+        footer .text-danger { font-size: 10px; line-height: 1.2; margin-bottom: 5px; }
+        header { display: none; }
+        footer { max-height: 100px; }
+      }
     </style>
   </head>
 
   <body>
-    <header
-      style="
-        margin: 1rem auto;
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        align-items: center;
-        width: 95vw;
-      "
-    >
-      <a class="left" href="https://github.com/MicrosoftStudentChapter/time-table/issues">
-        <img
-          alt="GitHub issues"
-          src="https://img.shields.io/github/issues/MicrosoftStudentChapter/time-table?style=flat&logo=github"
-        />
+    <header style="margin:1rem auto;display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:95vw;">
+      <a href="https://github.com/MicrosoftStudentChapter/time-table/issues">
+        <img alt="GitHub issues" src="https://img.shields.io/github/issues/MicrosoftStudentChapter/time-table?style=flat&logo=github"/>
       </a>
-      <a class="right" href="https://github.com/MicrosoftStudentChapter/time-table">
-        <img
-          alt="GitHub Repo stars"
-          src="https://img.shields.io/github/stars/MicrosoftStudentChapter/time-table?style=flat&logo=github"
-        />
+      <a href="https://github.com/MicrosoftStudentChapter/time-table">
+        <img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/MicrosoftStudentChapter/time-table?style=flat&logo=github"/>
       </a>
     </header>
 
-    <!-- Center the Save as PNG and Print buttons -->
     <div class="button-container">
       <button id="saveAsPng" class="btn btn-primary">Save as PNG</button>
       <button id="printPdf" class="btn btn-success">Print to PDF</button>
     </div>
 
-    <div class="table-responsive" id="timetable">
-      <table class="table table-dark table-hover" id="table">
-        {{range .Data}}
-        <tr class="row">
-          {{range .}}
-          <td
-            class="bg-{{.Color}} col tablemain"
-            style="
-              overflow-x: auto;
-              overflow-y: auto;
-              max-height: 100px;
-              text-align: center;
-              margin: 0rem 0.3rem 0.5rem 0.3rem;
-              border-radius: 0.5rem;
-            "
-          >
-            {{.Course}}
-          </td>
+    <table class="table table-dark table-hover" id="table">
+      {{range $rowIndex, $row := .Data}}
+      <tr>
+        {{range $colIndex, $cell := $row}}
+          {{if eq $cell.Color "dark"}}
+            {{if eq $rowIndex 0}}
+              <td class="header-day"><div>{{$cell.Course}}</div></td>
+            {{else if eq $colIndex 0}}
+              <td class="header-time"><div>{{$cell.Course}}</div></td>
+            {{else}}
+              <td class="bg-dark empty"><div>{{$cell.Course}}</div></td>
+            {{end}}
+          {{else}}
+            <td class="bg-{{$cell.Color}}"><div>{{$cell.Course}}</div></td>
           {{end}}
-        </tr>
         {{end}}
-      </table>
-    </div>
-
-    <!-- <footer class="footer mt-2 mb-2 pb-2 pt-2 bg-dark">
-      <p style="text-align: center" class="text-danger">
-        Made by Utkarsh Tripathi &nbsp;
-        <a href="https://github.com/MicrosoftStudentChapter" class="badge badge-success">Github</a>
-        <a
-          href="https://www.linkedin.com/in/utkarsh-tripathi-80a0ab192/"
-          class="badge badge-primary"
-          >Linkedin</a
-        >
-        <a href="https://utkarssh.tech" class="badge badge-dark">Website</a>
-      </p>
-    </footer> -->
+      </tr>
+      {{end}}
+    </table>
 
     <footer class="footer mt-2 mb-2 pb-2 pt-2 bg-dark">
       <p style="text-align: center" class="text-danger">
         Made by Utkarsh Tripathi &nbsp;
-        <a href="https://github.com/utkarsh-1905" class="badge badge-success"
-          >Github</a
-        >
-        <a
-          href="https://www.linkedin.com/in/utkarsh-tripathi-80a0ab192/"
-          class="badge badge-primary"
-          >Linkedin</a
-        >
-        <!-- <a href="https://utkarssh.tech" class="badge badge-dark">Website</a> -->
-      </p>
-      <p style="text-align: center" class="text-warning">
-        Project contributors
+        <a href="https://github.com/utkarsh-1905" class="badge badge-success">Github</a>
+        <a href="https://www.linkedin.com/in/utkarsh-tripathi-80a0ab192/" class="badge badge-primary">Linkedin</a>
       </p>
+      <p style="text-align: center" class="text-warning">Project contributors</p>
       <p style="text-align: center">
-        <a
-          href="https://github.com/MicrosoftStudentChapter/time-table/graphs/contributors"
-        >
+        <a href="https://github.com/MicrosoftStudentChapter/time-table/graphs/contributors">
           <img src="https://contrib.rocks/image?repo=MicrosoftStudentChapter/time-table" />
         </a>
       </p>
     </footer>
 
-    <!-- Add JavaScript for Save as PNG and Print -->
     <script>
-      // Save as PNG logic
-      document.getElementById("saveAsPng").addEventListener("click", function () {
-        const timetableElement = document.getElementById("timetable");
-
-        html2canvas(timetableElement, {
-          backgroundColor: null, // Ensures transparency matches your theme
-        }).then((canvas) => {
+    document.getElementById("saveAsPng").addEventListener("click", function () {
+      const timetableElement = document.getElementById("table"); // fixed id
+      html2canvas(timetableElement, { backgroundColor: "#000" }) // better visibility
+        .then((canvas) => {
           const link = document.createElement("a");
           link.download = "timetable.png";
           link.href = canvas.toDataURL("image/png");
           link.click();
-        }).catch((error) => {
+        })
+        .catch((error) => {
           console.error("Error saving PNG:", error);
         });
-      });
-
-      // Print to PDF logic
-      document.getElementById("printPdf").addEventListener("click", function () {
-        const originalContent = document.body.innerHTML;
-        const printContent = document.getElementById("timetable").outerHTML;
-        const footerContent = document.querySelector("footer").outerHTML;
-
-        document.body.innerHTML = printContent + footerContent;
+    });
 
-        window.print();
+    document.getElementById("printPdf").addEventListener("click", function () {
+      const originalContent = document.body.innerHTML;
+      const printContent = document.getElementById("table").outerHTML; // fixed id
+      const footerContent = document.querySelector("footer").outerHTML;
+      document.body.innerHTML = printContent + footerContent;
+      window.print();
+      document.body.innerHTML = originalContent;
+    });
+  </script>
 
-        // Restore the original content after print
-        document.body.innerHTML = originalContent;
-        window.location.reload();
-      });
-    </script>
   </body>
-</html>
+</html>
\ No newline at end of file
