diff --git a/assets/Xlogo.png b/assets/Xlogo.png
new file mode 100644
index 0000000..432a3aa
Binary files /dev/null and b/assets/Xlogo.png differ
diff --git a/assets/fork.png b/assets/fork.png
new file mode 100644
index 0000000..e262867
Binary files /dev/null and b/assets/fork.png differ
diff --git a/assets/github.png b/assets/github.png
new file mode 100644
index 0000000..30d1e71
Binary files /dev/null and b/assets/github.png differ
diff --git a/assets/linkedin.png b/assets/linkedin.png
new file mode 100644
index 0000000..f2bb083
Binary files /dev/null and b/assets/linkedin.png differ
diff --git a/assets/profile.jpg b/assets/profile.jpg
new file mode 100644
index 0000000..481d3c2
Binary files /dev/null and b/assets/profile.jpg differ
diff --git a/tool.py b/tool.py
index 7c18738..c5e0ad1 100644
--- a/tool.py
+++ b/tool.py
@@ -371,74 +371,150 @@ def display_df_web(df, heading, subheading):
     # Generate the complete HTML content with headings, CSS styles, and the
     # table
     html_content = f'''
-    <!DOCTYPE html>
-    <html>
-    <head>
-        <title>{heading}</title>
-        <style>
-        html, body {{
-            height: 100%;
-            text-align: center;
-            font-family: Tahoma, sans-serif;
-        }}
-
-        body {{
-            margin: 30px;
-        }}
-
-        table.table {{
-            border-collapse: separate;
-            border-spacing: 0;
-            min-width: 350px;
-            border: none;  /* Remove the border attribute */
-        }}
-
-        table.table tr th,
-        table.table tr td {{
-            border-right: 1px solid #bbb;
-            border-bottom: 1px solid #bbb;
-            padding: 5px;
-        }}
-
-        table.table tr th:first-child,
-        table.table tr td:first-child {{
-            border-left: 1px solid #bbb;
-        }}
-
-        table.table tr th {{
-            background: #eee;
-            border-top: 1px solid #bbb;
-            text-align: center;
-        }}
-
-        /* top-left border-radius */
-        table.table tr:first-child th:first-child {{
-            border-top-left-radius: 6px;
-        }}
-
-        /* top-right border-radius */
-        table.table tr:first-child th:last-child {{
-            border-top-right-radius: 6px;
-        }}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{ heading }</title>
+    <style>
+      html, body {{
+        height: 100%;
+        text-align: center;
+        font-family: Tahoma, sans-serif;
+        margin: 0;
+        padding: 0;
+    }}
+
+    body {{
+        margin: 30px;
+    }}
+    
+    /* Title bar styling */
+    .title-bar {{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+        background: #FFFFFF; /* Cool gradient color */
+        padding: 20px;
+        border-radius: 10px;  /* Rounded border */
+        margin-bottom: 25px;  /* Space between title bar and content */
+        height: 120px; /* Adjusted height */
+    }}
+
+    .title-bar h1 {{
+        font-size: 80px; /* Larger heading size */
+        color: #000000; /* Black font color */
+        font-family: "Anton", sans-serif; /* Updated to Anton font */
+        font-weight: 400;  /* Regular weight */
+    }}
+
+    .title-bar h2 {{
+        font-style: italic;
+        font-family: sans-serif;
+        font-size: 16px; /* Smaller subheading */
+        position: absolute;
+        top: 115px;  /* Move below the main heading */
+        right: 480px; /* Shifted right */
+        
+    }}
 
-        /* bottom-left border-radius */
-        table.table tr:last-child td:first-child {{
-            border-bottom-left-radius: 6px;
-        }}
 
-        /* bottom-right border-radius */
-        table.table tr:last-child td:last-child {{
-            border-bottom-right-radius: 6px;
-        }}
+.typing-text {{
+        font-size: 12px;
+        position: absolute;
+        top: 160px;
+        
+        font-style: italic;
+        color: #000000;
+        font-family: "Courier New", Courier, monospace;
+    }}
 
-        a {{
-            text-decoration: none;
-            color: #18272F;
-            font-weight: 700;
+    /* Profile and GitHub icons */
+    .icon-container {{
+        position: absolute;
+        bottom: 10px; /* Move to the bottom */
+        right: 10px;
+        display: flex;
+        align-items: center;
+    }}
+
+    /* General styling for all icons */
+.icon-container img {{
+    height: 25px; /* Slightly larger icon size for all */
+    width: 25px;
+    border-radius: 100%; /* Round border */
+    margin-left: 10px;
+    cursor: pointer;
+    transition: transform 0.3s ease; /* Hover effect transition */
+}}
+
+.icon-container img.github-icon,
+.icon-container img.linkedin-icon {{
+    height: 38px; 
+    width: 35px;
+    border-radius: 100%; 
+}}
+
+.icon-container img:hover {{
+    transform: scale(1.5);
+}}
+
+    /* Table styling */
+    table.table {{
+        border-collapse: separate;
+        border-spacing: 0;
+        min-width: 350px;
+        border: none;  /* Remove the border attribute */
+    }}
+
+    table.table tr th,
+    table.table tr td {{
+        border-right: 1px solid #bbb;
+        border-bottom: 1px solid #bbb;
+        padding: 5px;
+    }}
+
+    table.table tr th:first-child,
+    table.table tr td:first-child {{
+        border-left: 1px solid #bbb;
+    }}
+
+    table.table tr th {{
+        background: #eee;
+        border-top: 1px solid #bbb;
+        text-align: center;
+    }}
+
+    /* top-left border-radius */
+    table.table tr:first-child th:first-child {{
+        border-top-left-radius: 6px;
+    }}
+
+    /* top-right border-radius */
+    table.table tr:first-child th:last-child {{
+        border-top-right-radius: 6px;
+    }}
+
+    /* bottom-left border-radius */
+    table.table tr:last-child td:first-child {{
+        border-bottom-left-radius: 6px;
+    }}
+
+    /* bottom-right border-radius */
+    table.table tr:last-child td:last-child {{
+        border-bottom-right-radius: 6px;
+    }}
+
+    a {{
+        text-decoration: none;
+        color: #18272F;
+        font-weight: 700;
         position: relative;
-        }}
+    }}
 
-        a::before {{
+    a::before {{
         content: '';
         background-color: hsla(0, 100%, 50%, 0.236);
         position: absolute;
@@ -448,41 +524,161 @@ def display_df_web(df, heading, subheading):
         height: 8px;
         z-index: -1;
         transition: all .3s ease-in-out;
-        }}
+    }}
 
-        a:hover::before {{
+    a:hover::before {{
         bottom: 0;
         height: 100%;
         background-color: hsla(142, 61%, 58%, 0.359);
+    }}
+
+    /* Pagination button styling */
+    .dataTables_wrapper .dataTables_paginate .paginate_button {{
+        color: #555;
+        padding: 8px 16px;
+        border: 1px solid #ddd;
+        margin: 0 2px;
+        background-color: #f9f9f9;
+        cursor: pointer;
+        border-radius: 4px;
+    }}
+
+    .dataTables_wrapper .dataTables_paginate .paginate_button:hover {{
+        background-color: #eee;
+        color: #333;
+    }}
+
+    .dataTables_wrapper .dataTables_paginate .paginate_button.current {{
+        background-color: #007bff;
+        color: white;
+        border: 1px solid #007bff;
+    }}
+
+   /* Disabled button styling for Previous and Next buttons */
+.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
+.dataTables_wrapper .dataTables_paginate .previous.disabled,
+.dataTables_wrapper .dataTables_paginate .next.disabled {{
+    background-color: #f0f0f0 !important;
+    color: #aaa !important;
+    cursor: not-allowed !important;
+    border: 1px solid #ddd !important;
+}}
+
+/* Normal button styling for Previous and Next buttons */
+.dataTables_wrapper .dataTables_paginate .previous,
+.dataTables_wrapper .dataTables_paginate .next {{
+    background-color: #f9f9f9 !important;
+    color: #555 !important;
+    padding: 8px 16px !important;
+    border: 1px solid #ddd !important;
+    border-radius: 4px !important;
+    margin: 0 2px !important;
+    cursor: pointer !important;
+}}
+
+/* Hover state for Previous and Next buttons */
+.dataTables_wrapper .dataTables_paginate .previous:hover,
+.dataTables_wrapper .dataTables_paginate .next:hover {{
+    background-color: #eee !important;
+    color: #333 !important;
+}}
+
+/* Active/current page button */
+.dataTables_wrapper .dataTables_paginate .paginate_button.current {{
+    background-color: #007bff !important;
+    color: white !important;
+    border: 1px solid #007bff !important;
+}}
+    </style>
+
+    <!-- Importing the custom fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Anton&family=Qwitcher+Grypen:wght@400;700&display=swap" rel="stylesheet">
+
+    <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
+    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css">
+    <script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+
+    <!-- Title bar section -->
+    <div class="title-bar">
+        <h1><a>{ heading }</a></h1>
+        <h2><a>{ subheading }</a></h2>
+        <div class="typing-text" id="typing-text"></div>
+
+        <!-- Icon container -->
+        <div class="icon-container">
+     <a href="/ksauraj/jee_counsellor" target="_blank">
+        <img src="../assets/fork.png" alt="Fork repo Icon">
+    </a>
+    <a href="/ksauraj" target="_blank">
+        <img src="../assets/github.png" alt="GitHub Icon" class="github-icon">
+    </a>
+    <a href="https://sauraj.eu.org/#/" target="_blank">
+        <img src="../assets/profile.jpg" alt="Profile Icon">
+    </a>
+    <a href="https://x.com/ksauraj" target="_blank">
+        <img src="../assets/Xlogo.png" alt="Xlogo Icon">
+    </a>
+    
+    </a><a href="https://www.linkedin.com/in/sauraj-kumar-singh-807295226" target="_blank">
+        <img src="../assets/linkedin.png" alt="LinkedIn Icon" class="linkedin-icon">
+    </a>
+</div>
+
+    </div>
+
+
+
+    <!-- Table container -->
+    <div class="container">
+        { html_table }
+    </div>
+
+    <script> 
+    $(document).ready(function () {{ 
+        $('#tableID').DataTable({{ pageLength: 20 }}); }});
+         
+        document.addEventListener("DOMContentLoaded", function() {{
+        function typeText(text, elementId, speed) {{
+            let i = 0;
+            const animatedTextElement = document.getElementById(elementId);
+            function typeChar() {{
+                if (i < text.length) {{
+                    animatedTextElement.innerHTML += text.charAt(i);
+                    i++;
+                    setTimeout(typeChar, speed);  // Control speed of typing here
+                }}
+                else {{ 
+                    setTimeout(restartTyping, 1000);  // Delay before restarting the typing effect
+                }}
+            }}
+
+            function restartTyping() {{
+                animatedTextElement.innerHTML = "";  // Clear the text
+                i = 0;  // Reset index
+                typeChar();  // Restart typing
+            }}
+
+            typeChar();  // Start typing
         }}
 
-        table.table tbody tr:hover {{
-            background-color: rgba(159, 131, 86, 0.3);
-            filter: none;
-            transform: scale(1.005);
-        }}
-        </style>
-            <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
-    <script type="text/javascript"
-            src="https://code.jquery.com/jquery-3.5.1.js"> 
-        </script>
-        <link rel="stylesheet"
-            href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css"> 
-        <script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"> 
-        </script>
-    <body>
-        <h1><a href="/ksauraj/jee_counsellor">{heading}</a></h1>
-        <h2><a href="https://sauraj.eu.org">{subheading}</a></h2>
-        <div class="container">
-            {html_table}
-        </div>
-        <script> 
-
-          $(document).ready(function () {{ $('#tableID').DataTable({{ pageLength: 15  }}); }}); 
-        </script>
-    </body>
-    </html>
-    '''
+        // Start typing effect for the given text
+        const quote = "A command-line tool for JEE counselling assistance ";
+        typeText(quote, "typing-text", 100);  // 100ms delay for each character
+    }}); 
+    </script>
+</body>
+</html>
+
+
+'''
+
+
+
+   
 
     # Save the HTML content to the file
     with open(filename, "w") as file:
@@ -590,7 +786,8 @@ def filter_by_choices(choices, column_name, steps):
 
         os.system("cls" if os.name == "nt" else "clear")
         print(Fore.GREEN + ascii_art)
-        display_df_web(filtered_df, "JEE Counsellor", "-By Ksauraj")
+        display_df_web(filtered_df, "JEE COUNSELLOR", "~By Ksauraj")
+
         print(
             Fore.GREEN +
             "Congratulations! File successfully opened in browser. Please wait......" +
