diff --git a/Website/404.html b/Website/404.html
index 8beb945a1..eee43159f 100644
--- a/Website/404.html
+++ b/Website/404.html
@@ -5,7 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Page Not Found | ML Repos</title>
-    <link rel="icon" href="logo-bg.png" type="image/png">
+    <link rel="icon" href="/assets/recode-hive.png" type="image/png">
     <style>
         body {
             display: flex;
@@ -36,7 +36,7 @@
             position: absolute;
             width: 80px;
             height: 80px;
-            background-image: url('logo-bg.png');
+            background-image: url('/assets/recode-hive.png');
             background-size: contain;
             background-repeat: no-repeat;
             cursor: pointer;
@@ -188,7 +188,7 @@ <h1>404 - Page Not Found</h1>
     </div>
 
     <!-- // linking script -->
-    <script src="js/404.js"></script>
+    <script src="/js/404.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/Website/about.html b/Website/about.html
index 761fd882c..b3c246a5c 100644
--- a/Website/about.html
+++ b/Website/about.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>About | ML Repos</title>
-    <link rel="icon" href="logo-bg.png" type="image/png">
+    <link rel="icon" href="/assets/recode-hive.png" type="image/png">
 </head>
 <body>
     <h1>This is the about page</h1>
diff --git a/Website/assets/chatbot.png b/Website/assets/chatbot.png
new file mode 100644
index 000000000..02034479b
Binary files /dev/null and b/Website/assets/chatbot.png differ
diff --git a/Website/contact.html b/Website/contact.html
index 8f3a381d9..29af1b11b 100644
--- a/Website/contact.html
+++ b/Website/contact.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Contact | ML Repos</title>
-    <link rel="icon" href="logo-bg.png" type="image/png">
+    <link rel="icon" href="/assets/recode-hive.png" type="image/png">
 </head>
 <body>
     <h1>This is the Contact page</h1>
diff --git a/Website/faq.html b/Website/faq.html
index 25e3202de..651c24dfe 100644
--- a/Website/faq.html
+++ b/Website/faq.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>FAQ | ML Repos</title>
-    <link rel="icon" href="logo-bg.png" type="image/png">
+    <link rel="icon" href="/assets/recode-hive.png" type="image/png">
 </head>
 <body>
     <h1>This is the FAQ page</h1>
diff --git a/Website/index.html b/Website/index.html
index 70980d147..a04126ca9 100644
--- a/Website/index.html
+++ b/Website/index.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Machine Learning Repositories</title>
     <link rel="stylesheet" href="styles.css">
-    <link rel="icon" href="logo-bg.png" type="image/png"> <!-- Added favicon -->
+    <link rel="icon" href="/assets/recode-hive.png" type="image/png"> <!-- Added favicon -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 </head>
@@ -191,8 +191,8 @@ <h3>Recommendation Models</h3>
 
     <!-- Chatbot Button -->
     <div class="chatbot-button" id="chatbot-button">
-        <!-- <img src="logo-bg.png" height="50px" width="50px"> -->
-        <svg fill="#444" width="163px" height="163px" viewBox="-0.96 -0.96 25.92 25.92" xmlns="http://www.w3.org/2000/svg" stroke="#444" stroke-width="0.00024000000000000003"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#fff" stroke-width="0.096"></g><g id="SVGRepo_iconCarrier"><path d="M21.928 11.607c-.202-.488-.635-.605-.928-.633V8c0-1.103-.897-2-2-2h-6V4.61c.305-.274.5-.668.5-1.11a1.5 1.5 0 0 0-3 0c0 .442.195.836.5 1.11V6H5c-1.103 0-2 .897-2 2v2.997l-.082.006A1 1 0 0 0 1.99 12v2a1 1 0 0 0 1 1H3v5c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2v-5a1 1 0 0 0 1-1v-1.938a1.006 1.006 0 0 0-.072-.455zM5 20V8h14l.001 3.996L19 12v2l.001.005.001 5.995H5z"></path><ellipse cx="8.5" cy="12" rx="1.5" ry="2"></ellipse><ellipse cx="15.5" cy="12" rx="1.5" ry="2"></ellipse><path d="M8 16h8v2H8z"></path></g></svg>
+        <img src="assets/chatbot.png" height="50px" width="50px" id="chatbot-img" class="floating">
+        <!-- <svg fill="#444" width="163px" height="163px" viewBox="-0.96 -0.96 25.92 25.92" xmlns="http://www.w3.org/2000/svg" stroke="#444" stroke-width="0.00024000000000000003"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#fff" stroke-width="0.096"></g><g id="SVGRepo_iconCarrier"><path d="M21.928 11.607c-.202-.488-.635-.605-.928-.633V8c0-1.103-.897-2-2-2h-6V4.61c.305-.274.5-.668.5-1.11a1.5 1.5 0 0 0-3 0c0 .442.195.836.5 1.11V6H5c-1.103 0-2 .897-2 2v2.997l-.082.006A1 1 0 0 0 1.99 12v2a1 1 0 0 0 1 1H3v5c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2v-5a1 1 0 0 0 1-1v-1.938a1.006 1.006 0 0 0-.072-.455zM5 20V8h14l.001 3.996L19 12v2l.001.005.001 5.995H5z"></path><ellipse cx="8.5" cy="12" rx="1.5" ry="2"></ellipse><ellipse cx="15.5" cy="12" rx="1.5" ry="2"></ellipse><path d="M8 16h8v2H8z"></path></g></svg> -->
     </div>
 
      <!-- Chatbox -->
diff --git a/Website/logo-bg.png b/Website/logo-bg.png
deleted file mode 100644
index 723e7279f..000000000
Binary files a/Website/logo-bg.png and /dev/null differ
diff --git a/Website/organization.html b/Website/organization.html
index 55be5f105..6a78ac6e2 100644
--- a/Website/organization.html
+++ b/Website/organization.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Organization | ML Repos</title>
-    <link rel="icon" href="logo-bg.png" type="image/png">
+    <link rel="icon" href="/assets/recode-hive.png" type="image/png">
 </head>
 <body>
     <h1>This is the Organization page</h1>
diff --git a/Website/styles.css b/Website/styles.css
index 9f1a537dc..e9d43d71e 100644
--- a/Website/styles.css
+++ b/Website/styles.css
@@ -74,11 +74,374 @@
       height: 30px;
       margin-right: 10px;
     }
+
+}
+
+#contributors {
+    padding: 40px;
+    background-color: #0a0a2e;
+    text-align: center;
+    animation: slideInRight 1s ease-in-out;
+}
+
+#contributors h2 {
+    font-size: 28px;
+    margin-bottom: 20px;
+    color: white;
+}
+
+/* Container for contributors grid */
+#contributors-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px; /* Reduced space between contributors */
+    justify-content: center;
+    padding: 20px; /* Padding around the grid */
+    background: linear-gradient(135deg, #121245, #121245); /* Subtle gradient background */
+    animation: slideInRight 1s ease-in-out;
+}
+
+/* Styling for individual contributor div */
+.contributor {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    max-width: 180px; /* Adjusted width for better visuals */
+    border: none; /* Remove default border */
+    border-radius: 15px; /* More rounded corners */
+    padding: 15px;
+    background: #0b0b38; /* White background */
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Enhanced shadow for depth */
+    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition effects */
+    animation: slideInRight 1s ease-in-out;
+}
+
+.contributor:hover {
+    transform: translateY(-8px); /* Slight lift effect on hover */
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Stronger shadow on hover */
+}
+
+/* Styling for contributor's image */
+.contributor-image {
+    width: 110px; /* Adjusted size */
+    height: 110px; /* Adjusted size */
+    border-radius: 50%; /* Circular image */
+    object-fit: cover; /* Ensure image covers area without distortion */
+    border: 3px solid #0366d6; /* Border around the image */
+    transition: border-color 0.3s ease; /* Smooth border color change */
+}
+
+.contributor-image:hover {
+    border-color: #024c8c; /* Darker border color on hover */
+}
+
+/* Styling for the GitHub profile link */
+.contributor-info {
+    margin-top: 10px; /* Adjusted space between image and link */
+}
+
+.contributor-github {
+    text-decoration: none;
+    color: white; /* GitHub blue color */
+    font-size: 14px; /* Slightly smaller font size */
+    font-weight: bold; /* Bold font */
+    background: linear-gradient(135deg, #1f1f65, #3c3c99); /* Gradient background */
+    padding: 8px 12px; /* Adjusted padding around the link */
+    border-radius: 20px; /* Rounded button shape */
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for button */
+    transition: background 0.3s ease, color 0.3s ease; /* Smooth transition effects */
+}
+
+.contributor-github:hover {
+    background: #0366d6; /* Darker background on hover */
+    color: #ffffff; /* White text color on hover */
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Stronger shadow on hover */
+}
+
+/* Styling for the heading with class 'contri-heading' */
+.contri-heading {
+    font-size: 2.5rem; /* Increase font size */
+    font-weight: 900; /* Bold font weight */
+    color: white; /* Dark color for better contrast */
+    animation: fadeIn 1s ease-in-out;
+   
+}
+
+/* Chatbot button */
+.chatbot-button {
+    position: fixed;
+    bottom: 25px;
+    right: 35px;
+    border: none;
+    border-radius: 50%;
+    width: 50px;
+    height: 50px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    font-size: 24px;
+    z-index: 100;
+    animation: fadeIn 1s ease-in-out;
+}
+
+.chatbot-button .floating {  
+    animation-name: floating;
+    animation-duration: 3s;
+    animation-iteration-count: infinite;
+    animation-timing-function: ease-in-out;
+}
+
+@keyframes floating {
+    from { transform: translate(0,  0px); }
+    65%  { transform: translate(0, 15px); }
+    to   { transform: translate(0, -0px); }    
+}
+
+
+/* Chatbox */
+.chatbot {
+    display: none;
+    flex-direction: column;
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    position: fixed;
+    bottom: 35px;
+    right: 55px;
+    width: 400px;
+    z-index: 1000;
+    transition: all 0.3s ease;
+    max-height: 600px; /* Adjust as needed */
+    overflow: hidden;
+    animation: fadeIn 1s ease-in-out;
+}
+
+.chatbot.active {
+    display: flex;
+}
+
+.chatbot-header {
+    background-color: #1a1a5e;
+    color: rgb(255, 250, 250);
+    padding: 15px;
+    border-radius: 8px 8px 0 0;
+    font-size: 16px;
+    font-weight: bold;
+    position: relative;
+}
+
+.chatbot-header .close-btn {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    cursor: pointer;
+    font-size: 20px;
+}
+
+.chatbot-messages {
+    flex-grow: 1;
+    overflow-y: auto;
+    padding: 10px;
+    animation: fadeIn 1s ease-in-out;
+}
+
+.message {
+    margin-bottom: 10px;
+}
+
+.message.bot {
+    text-align: left;
+}
+
+.message.user {
+    text-align: right;
+}
+
+.message .message-text {
+    display: inline-block;
+    padding: 10px;
+    border-radius: 10px;
+    max-width: 80%;
+}
+
+.message.bot .message-text {
+    background-color: #d1d0d0;
+}
+
+.message.user .message-text {
+    background-color: #1a1a5e;
+    color: rgb(254, 252, 252);
+    word-wrap: break-word;
+}
+
+.chatbot-questions {
+    padding: 15px;
+    background-color: #f4f1f1;
+}
+
+.chatbot-questions p {
+    font-size: 14px;
+    margin-bottom: 10px;
+}
+
+.chatbot-questions ul {
+    list-style: none;
+    padding: 0;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+}
+
+.chatbot-questions li {
+    background-color: #e8e5e5;
+    padding: 10px 15px;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+#question-list {
+    max-height: 200px; /* Adjust height as needed */
+    overflow-y: auto;  /* Enable vertical scrolling */
+    padding: 10px;
+    border: 1px solid #ccc;
+}
+
+.chatbot-questions li:hover {
+    background-color: #2f3a57;
+    color: rgb(255, 255, 255);
+}
+
+.chatbot-input-container {
+    display: flex;
+    padding: 15px;
+    background-color: #f9f9f9;
+    border-top: 1px solid #0f0a0a;
+}
+
+.chatbot-input-container input {
+    flex-grow: 1;
+    padding: 8px;
+    border: 1px solid #f8f2f2;
+    border-radius: 8px;
+}
+
+.chatbot-input-container button {
+    padding: 8px 15px;
+    margin-left: 10px;
+    border: none;
+    background-color: #2f3a57;
+    color: rgb(252, 251, 251);
+    border-radius: 8px;
+    cursor: pointer;
+}
+
+.chatbot-input-container button:hover {
+    background-color: #40486b;
+}
+
+ /* Styles for the go to top button */
+ #go-to-top {
+    display: none;
+    position: fixed;
+    bottom: 50px;
+    right: -50px;
+    width: 150px;
+    height: 30px;
+    background: none;
+    transform: rotate(-90deg);
+    color: rgb(75, 44, 228);
+    border: none;
+    font-size: 24px;
+    text-align: center;
+    line-height: 50px;
+    cursor: pointer;
+    transition: opacity 0.3s ease, transform 0.3s ease;
+    z-index: 1000;
+    animation: slideInRight 0.5s ease-in-out;
+}
+
+#go-to-top:hover {
+    color: black;
+    opacity: 0.9;
+}
+
+
+/* Milestones Progress Section */
+#milestones-progress {
+    margin: 50px 0;
+    padding: 20px;
+    background-color: #f9f9f9;
+}
+
+#milestones-progress h2 {
+    text-align: center;
+    font-size: 2em;
+    margin-bottom: 20px;
+    color: #333;
+    animation: slideInRight 1s ease-in-out;
+}
+
+.milestones-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    gap: 20px;
+}
+
+.milestone-card {
+    background-color: rgb(87, 251, 248);
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    border-left: 5px solid #054ffd;
+    transition: transform 0.3s ease;
+    animation: slideInRight 1s ease-in-out;
+}
+
+.milestone-card:hover {
+    transform: translateY(-5px);
+}
+
+.milestone-card h3 {
+    color: #333;
+    font-size: 1.25em;
+    margin-bottom: 10px;
+}
+
+.milestone-card p {
+    color: #666;
+    font-size: 0.9em;
+    margin-bottom: 15px;
+    line-height: 1.5;
+}
+
+.progress-bar {
+    background-color: rgb(116, 243, 209);
+    border-radius: 5px;
+    overflow: hidden;
+    margin-bottom: 10px;
+    height: 8px;
+    animation: slideInRight 1s ease-in-out;
+}
+
+.progress {
+    height: 100%;
+    background-color: #0366d6;
+    transition: width 0.4s ease;
+}
+
+/* Optional: Media Query for Responsive Design */
+@media (max-width: 600px) {
+    .milestones-grid {
+        grid-template-columns: 1fr;
+
     
     .logo-text {
       font-size: 18px;
       font-weight: bold;
       color: #f1f1f1;
+
     }
   
   .brand-name {
