diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index f046cef..65ce367 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -73,7 +73,8 @@ Thank you for your interest in contributing to BioBranch! This guide will help y
      npm install
      npm start
      ```
-   - For frontend changes:
+   - For frontend changes:cd server
+   
      ```bash
      cd site
      npm install
diff --git a/package-lock.json b/package-lock.json
index bc57870..a39f145 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,13 @@
 {
   "name": "bio-branch",
+  "version": "1.0.0",
   "lockfileVersion": 3,
   "requires": true,
-  "packages": {}
+  "packages": {
+    "": {
+      "name": "bio-branch",
+      "version": "1.0.0",
+      "license": "ISC"
+    }
+  }
 }
diff --git a/site/components/Faq.js b/site/components/Faq.js
index 7cac793..c514266 100644
--- a/site/components/Faq.js
+++ b/site/components/Faq.js
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { HelpCircle, Info, CheckCircle, XCircle } from 'lucide-react';
+import { HelpCircle, Info, CheckCircle, Settings } from 'lucide-react';
 
 const Faq = () => {
   const [activeIndex, setActiveIndex] = useState(null);
@@ -20,7 +20,7 @@ const Faq = () => {
     },
     {
       question: 'How can I create a BioTree?',
-      answer: 'To create your BioTree, simply sign up, create an account, and start adding your social media links to your profile. It’s quick and easy!',
+      answer: 'To create your BioTree, simply sign up, create an account, and start adding your social media links to your profile. It\'s quick and easy!',
       icon: <Info className="w-8 h-8 text-green-600" />
     },
     {
@@ -31,7 +31,7 @@ const Faq = () => {
     {
       question: 'Can I customize my BioTree?',
       answer: 'Absolutely! You can customize the appearance of your BioTree by selecting from various themes and layouts to match your personal style or brand.',
-      icon: <CheckCircle className="w-8 h-8 text-yellow-600" />
+      icon: <Settings className="w-8 h-8 text-purple-600" />
     }
   ];
 
@@ -40,44 +40,45 @@ const Faq = () => {
       <h2 className="text-4xl font-extrabold text-center mb-10 text-gray-800">Frequently Asked Questions</h2>
       <div className="space-y-8">
         {faqData.map((faq, index) => (
-          <div 
-            key={index} 
-            className={`faq-item-container bg-white rounded-lg shadow-lg p-6 flex transition-transform transform 
-            cursor-pointer hover:scale-105 hover:shadow-xl hover:bg-gray-50 duration-300 ease-in-out 
-            ${activeIndex === index ? 'bg-gray-100 border border-gray-300' : ''}`}
-            onMouseEnter={() => handleMouseEnter(index)}
-            onMouseLeave={handleMouseLeave}
-          >
-            <div className="flex items-start mb-2 space-x-4">
-              <div className="flex-shrink-0">
-                {/* Inline style for 360-degree rotation */}
-                <span
-                  style={{
-                    display: 'inline-block',
-                    transition: 'transform 0.3s ease-in-out',
-                    transform: activeIndex === index ? 'rotate(360deg)' : 'rotate(0deg)',
-                  }}
-                >
-                  {faq.icon}
-                </span>
-              </div>
-              <div>
-                <h3 className="text-2xl font-semibold text-gray-800">{faq.question}</h3>
-              </div>
-            </div>
-            <div
-              className={`overflow-hidden transition-all duration-700 ease-in-out 
-                ${activeIndex === index ? 'max-h-[200px] opacity-100' : 'max-h-0 opacity-0'}`}
-              style={{ height: activeIndex === index ? 'auto' : '0px' }}
-            >
-              <p className="text-gray-600 leading-relaxed transition-opacity duration-500">{faq.answer}</p>
-            </div>
-            <span className="text-sm text-gray-500 mt-2">{activeIndex === index ? 'Hide' : 'Show'} Answer</span>
-          </div>
+          <div
+  key={index}
+  className={`faq-item-container bg-white rounded-lg shadow-lg p-6 transition-transform transform
+  cursor-pointer hover:scale-105 hover:shadow-xl hover:bg-gray-50 duration-300 ease-in-out
+  ${activeIndex === index ? 'bg-gray-100 border border-gray-300' : ''}`}
+  onMouseEnter={() => handleMouseEnter(index)}
+  onMouseLeave={handleMouseLeave}
+  onClick={() => setActiveIndex(activeIndex === index ? null : index)} // Add this line
+>
+  <div className="flex items-start mb-4 space-x-4 justify-between">
+  <div className='flex'>
+    <div className="flex-shrink-0">
+      <span
+        style={{
+          display: 'inline-block',
+          transition: 'transform 0.3s ease-in-out',
+          transform: activeIndex === index ? 'rotate(360deg)' : 'rotate(0deg)',
+        }}
+      >
+        {faq.icon}
+      </span>
+    </div>
+   
+      <h3 className="text-2xl font-semibold text-gray-800 ml-4">{faq.question}</h3>
+    </div>
+    <span className="text-sm text-gray-500 mt-2 ml-auto">{activeIndex === index ? 'Hide' : 'Show'} Answer</span>
+  </div>
+  <div
+    className={`overflow-hidden transition-all duration-700 ease-in-out
+      ${activeIndex === index ? 'max-h-[200px] opacity-100' : 'max-h-0 opacity-0'}`}
+    style={{ height: activeIndex === index ? 'auto' : '0px' }}
+  >
+    <p className="text-gray-600 leading-relaxed transition-opacity duration-500 ml-12">{faq.answer}</p>
+  </div>
+</div>
         ))}
       </div>
     </div>
   );
 };
 
-export default Faq;
+export default Faq;
\ No newline at end of file
diff --git a/site/components/Footer.js b/site/components/Footer.js
index f3b6120..9815690 100644
--- a/site/components/Footer.js
+++ b/site/components/Footer.js
@@ -5,6 +5,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faInstagram, faDiscord, faFacebook, faTwitter, faWhatsapp } from '@fortawesome/free-brands-svg-icons'
 import '@fortawesome/fontawesome-free/css/all.min.css'
 
+
 const Footer = () => {
 
   const iconStyle = {
@@ -19,13 +20,18 @@ const Footer = () => {
     transform: 'scale(1.2)', 
   };
 
+const Footer = () => { 
+
   return (
     
     <footer aria-label="Site Footer" className="relative bg-gray-900 text-white py-10 px-6">
 
       {/* Wave Effect (You can add SVG wave here for a design touch) */}
       <svg className="absolute top-0 left-0 right-0 -mt-1 h-8" viewBox="0 0 1440 320" xmlns="http://www.w3.org/2000/svg">
-        <path fill="#1a202c" fillOpacity="1" d="M0,224L48,208C96,192,192,160,288,160C384,160,480,192,576,186.7C672,181,768,139,864,133.3C960,128,1056,160,1152,176C1248,192,1344,192,1392,192L1440,192L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
+        <path fill="#1a202c" fillOpacity="1" 
+        // Insert necessary path of SVG wave
+        d="">
+        </path>
       </svg>
 
       <div className="container mx-auto flex flex-col md:flex-row items-center justify-between relative z-10 space-y-8 md:space-y-0">
@@ -33,9 +39,9 @@ const Footer = () => {
         {/* Left Section: Logo & Copyright */}
         <div className="flex flex-col items-center md:items-start">
           <Link href="/" className="text-2xl font-bold">
-            HireHUB
+            BioTree 
           </Link>
-          <p className="text-sm text-gray-400 mt-2">&copy; {new Date().getFullYear()} Your Company. All rights reserved.</p>
+          <p className="text-sm text-gray-400 mt-2">&copy; {new Date().getFullYear()} BioTree. All rights reserved.</p>
         </div>
 
 
@@ -133,19 +139,82 @@ const Footer = () => {
 
         {/* Right Section: Social Media Links */}
         <div className="flex space-x-6 md:order-2">
-          <Link href="https://twitter.com/yourprofile" target="_blank" aria-label="Twitter" className="text-gray-400 hover:text-blue-400 transition">
-            <svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-              {/* Add Twitter SVG Path */}
+          {/* NEW LOGOS with hover animation: Color change + Bouncing effect on Hover */}
+
+          {/* New Twitter Logo */}
+          {/* Added: Hover Change -> COLOR + Bouncing Effect on Hover */}
+          <Link href="https://twitter.com/yourprofile" target="_blank" aria-label="Twitter" className="relative group text-gray-400 hover:text-[#1DA1F2] transition transform hover:scale-110">
+            <span className="absolute inset-0 flex justify-center items-center overflow-visible">
+              {/* Adjusted size of the circle here */}
+              <span className="rounded-full bg-[#1DA1F2] opacity-0 scale-0 transition-transform duration-300 group-hover:opacity-100 group-hover:scale-125 z-1" style={{ width: '3rem', height: '1.7rem' }}> 
+              </span>
+            </span>
+            {/* On Hover: Icon color changes to white and circle changes to logo color */}
+            <svg
+              className="h-6 w-7 relative z-2 transition-transform duration-500 group-hover:-translate-y-1 group-hover:text-white"
+              fill="currentColor"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg">
+              {/* Added Twitter SVG Path */}
+              <path d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.949.555-2.002.959-3.127 1.184-.897-.959-2.178-1.558-3.594-1.558-2.723 0-4.927 2.204-4.927 4.917 0 .39.045.765.127 1.124-4.093-.205-7.719-2.165-10.148-5.144-.424.729-.666 1.574-.666 2.476 0 1.71.87 3.214 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.376 4.6 3.414-1.68 1.319-3.809 2.107-6.102 2.107-.39 0-.779-.023-1.17-.067 2.189 1.396 4.768 2.212 7.557 2.212 9.054 0 14.001-7.497 14.001-13.986 0-.21 0-.423-.015-.635.962-.694 1.8-1.562 2.462-2.548l-.047-.02z" />
             </svg>
           </Link>
-          <Link href="https://linkedin.com/in/yourprofile" target="_blank" aria-label="LinkedIn" className="text-gray-400 hover:text-blue-600 transition">
-            <svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-              {/* Add LinkedIn SVG Path */}
+
+          {/* New GitHub Logo */}
+          {/* Added: Hover Change -> COLOR + Bouncing Effect on Hover */}
+          <Link href="https://github.com/subhadipbhowmik/bio-branch" target="_blank" aria-label="GitHub" className="relative group text-gray-400 transition transform hover:scale-110">
+            <span className="absolute inset-0 flex justify-center items-center overflow-visible">
+              {/* Adjusted size of the circle here */}
+              <span className="rounded-full bg-[#181717] opacity-0 scale-0 transition-opacity transition-transform duration-300 group-hover:opacity-100 group-hover:scale-150 z-0" style={{ width: '3rem', height: '1.7rem' }}>
+              </span>
+            </span>
+            {/* On Hover: Icon color changes to white and circle changes to logo color */}
+            <svg
+              className="h-6 w-7 relative z-10 transition-transform duration-500 group-hover:-translate-y-1 group-hover:text-white"
+              fill="currentColor"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg">
+              {/* Added GitHub SVG Path */}
+              <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.387.6.113.82-.258.82-.577v-2.254c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.757-1.333-1.757-1.089-.744.084-.729.084-.729 1.205.084 1.838 1.237 1.838 1.237 1.07 1.835 2.807 1.304 3.492.998.108-.776.418-1.305.762-1.604-2.665-.303-5.467-1.334-5.467-5.93 0-1.31.468-2.381 1.236-3.221-.124-.303-.536-1.523.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.241 2.873.118 3.176.77.84 1.236 1.911 1.236 3.221 0 4.609-2.807 5.625-5.479 5.921.43.37.823 1.102.823 2.222v3.293c0 .322.218.694.825.576 4.765-1.588 8.202-6.084 8.202-11.386 0-6.627-5.373-12-12-12z" />
             </svg>
           </Link>
-          <Link href="https://github.com/yourprofile" target="_blank" aria-label="GitHub" className="text-gray-400 hover:text-blue-600 transition">
-            <svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-              {/* Add GitHub SVG Path */}
+
+          {/* New LinkedIn Logo */}
+          {/* Added: Hover Change -> COLOR + Bouncing Effect on Hover */}
+          <Link href="https://www.linkedin.com/in/shubhadip-bhowmik/" target="_blank" aria-label="LinkedIn" className="relative group text-gray-400 transition transform hover:scale-110">
+            <span className="absolute inset-0 flex justify-center items-center overflow-visible">
+              {/* Adjusted size of the circle here */}
+              <span
+                className="rounded-full bg-[#0077B5] opacity-0 scale-0 transition-opacity transition-transform duration-300 group-hover:opacity-100 group-hover:scale-125 z-0" style={{ width: '3.2rem', height: '1.8rem' }}>
+              </span>
+            </span>
+            {/* On Hover: Icon color changes to white and circle changes to logo color */}
+            <svg
+              className="h-6 w-7 relative z-10 transition-transform duration-500 group-hover:-translate-y-1 group-hover:text-white"
+              fill="currentColor"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg">
+              {/* Added LinkedIn SVG Path */}
+              <path d="M19 0h-14c-2.761 0-5 2.238-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.762-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.27c-.966 0-1.75-.784-1.75-1.75s.784-1.75 1.75-1.75 1.75.784 1.75 1.75-.784 1.75-1.75 1.75zm13.5 12.27h-3v-5.604c0-1.338-.026-3.066-1.867-3.066-1.867 0-2.154 1.459-2.154 2.969v5.701h-3v-11h2.888v1.503h.041c.403-.762 1.389-1.565 2.861-1.565 3.064 0 3.631 2.016 3.631 4.634v6.428z" />
+            </svg>
+          </Link>
+
+          {/* New Instagram Logo */}
+          {/* Added: Hover Change -> COLOR + Bouncing Effect on Hover */}
+          <Link href="https://instagram.com/yourprofile" target="_blank" aria-label="Instagram" className="relative group text-gray-400 transition transform hover:scale-110">
+            <span className="absolute inset-0 flex justify-center items-center overflow-visible">
+              {/* Adjusted size of the circle here */}
+              <span className="rounded-full bg-[#E1306C] transition-opacity transition-transform duration-300 opacity-0 scale-0 group-hover:opacity-100 group-hover:scale-150 z-0" style={{ width: '3rem', height: '1.8rem' }}>
+              </span>
+            </span>
+            {/* On Hover: Icon color changes to white and circle changes to logo color */}
+            <svg
+              className="h-6 w-7 relative z-10 transition-transform duration-500 group-hover:-translate-y-1 group-hover:text-white"
+              fill="currentColor"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg">
+              {/* Added Instagram SVG Path */}
+              <path d="M12 2.163c3.204 0 3.584.012 4.85.07 1.17.056 1.97.24 2.43.413a4.92 4.92 0 0 1 1.702 1.01c.5.5.84 1.09 1.01 1.702.173.46.357 1.26.413 2.43.058 1.267.07 1.647.07 4.85s-.012 3.584-.07 4.85c-.056 1.17-.24 1.97-.413 2.43a4.915 4.915 0 0 1-1.01 1.702 4.92 4.92 0 0 1-1.702 1.01c-.46.173-1.26.357-2.43.413-1.267.058-1.647.07-4.85.07s-3.584-.012-4.85-.07c-1.17-.056-1.97-.24-2.43-.413a4.92 4.92 0 0 1-1.702-1.01 4.915 4.915 0 0 1-1.01-1.702c-.173-.46-.357-1.26-.413-2.43-.058-1.267-.07-1.647-.07-4.85s.012-3.584.07-4.85c.056-1.17.24-1.97.413-2.43a4.92 4.92 0 0 1 1.01-1.702 4.915 4.915 0 0 1 1.702-1.01c.46-.173 1.26-.357 2.43-.413 1.267-.058 1.647-.07 4.85-.07m0-2.163C8.755 0 8.327.013 7.053.072 5.77.13 4.668.313 3.802.61a6.97 6.97 0 0 0-2.507 1.636A6.96 6.96 0 0 0 .61 4.755c-.297.866-.48 1.968-.538 3.251C0 8.327 0 8.755 0 12c0 3.245.013 3.673.072 4.947.058 1.283.241 2.385.538 3.251a6.96 6.96 0 0 0 1.636 2.507 6.97 6.97 0 0 0 2.507 1.636c.866.297 1.968.48 3.251.538 1.273.059 1.701.072 4.947.072s3.673-.013 4.947-.072c1.283-.058 2.385-.241 3.251-.538a6.97 6.97 0 0 0 2.507-1.636 6.96 6.96 0 0 0 1.636-2.507c.297-.866.48-1.968.538-3.251.059-1.273.072-1.701.072-4.947s-.013-3.673-.072-4.947c-.058-1.283-.241-2.385-.538-3.251a6.96 6.96 0 0 0-1.636-2.507A6.97 6.97 0 0 0 20.198.61c-.866-.297-1.968-.48-3.251-.538C15.673.013 15.245 0 12 0zM12 5.838a6.162 6.162 0 1 0 0 12.324A6.162 6.162 0 0 0 12 5.838zm0 10.162a3.999 3.999 0 1 1 0-7.998 3.999 3.999 0 0 1 0 7.998zm6.406-11.845a1.44 1.44 0 1 0 0-2.88 1.44 1.44 0 0 0 0 2.88z" />
             </svg>
           </Link>
         </div>
@@ -153,7 +222,7 @@ const Footer = () => {
 
       {/* Bottom Text */}
       <div className="text-center mt-10">
-        <p className="text-sm">&copy; 2024 Shubhadip Bhowmik. All rights reserved.</p>
+        <p className="text-sm">&copy; {new Date().getFullYear()} Shubhadip Bhowmik. All rights reserved.</p>
       </div>
     </footer>
   )
diff --git a/site/components/Navbar.js b/site/components/Navbar.js
index 36c05d0..a44038e 100644
--- a/site/components/Navbar.js
+++ b/site/components/Navbar.js
@@ -42,6 +42,9 @@ const NavBar = () => {
                 <li>
                     <Link href="/apply" className={`block py-2 w-[70px] justify-center text-center rounded-full hover:text-pink-400 hover:bg-green-400 pl-3 pr-4 ${currentRoute === '/apply' ? 'text-red-500 bg-blue-700 md:bg-transparent dark:text-blue-500' : 'text-gray-900 transition-all transform hover:scale-105 hover:shadow-2xl duration-300 ease-in-out text-green-500 cursor-default dark:text-white'}`}>Apply</Link>
                 </li>
+                <li>
+                    <Link href="/apply" className={`block py-2 w-fit justify-center text-center rounded-full hover:text-pink-400 hover:bg-green-400 pl-3 pr-4  ${currentRoute === '/apply' ? 'text-red-500 bg-blue-700 md:bg-transparent dark:text-blue-500' : 'text-gray-900 transition-all transform hover:scale-105 hover:shadow-2xl duration-300 ease-in-out text-green-500 cursor-default dark:text-white'}`}>Contributors</Link>
+                </li>
                 <li>
                     <Link href="/login" className={`block py-2 pl-3 pr-4 w-[70px] justify-center text-center rounded-full hover:text-pink-400 hover:bg-green-400 ${currentRoute === '/login' ? 'text-red-500 bg-blue-700 md:bg-transparent dark:text-blue-500' : 'text-gray-900 transition-all transform hover:scale-105 hover:shadow-2xl duration-300 ease-in-out cursor-default text-green-500'}`}>Login</Link>
                 </li>
diff --git a/site/components/ScrollToTopButton.js b/site/components/ScrollToTopButton.js
new file mode 100644
index 0000000..42cd589
--- /dev/null
+++ b/site/components/ScrollToTopButton.js
@@ -0,0 +1,41 @@
+import React, { useState, useEffect } from 'react';
+
+const ScrollToTopButton = () => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  // Show or hide the button based on scroll position
+  const toggleVisibility = () => {
+    if (window.scrollY > 200) {
+      setIsVisible(true);
+    } else {
+      setIsVisible(false);
+    }
+  };
+
+  // Scroll the window back to the top
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth'
+    });
+  };
+
+  useEffect(() => {
+    window.addEventListener('scroll', toggleVisibility);
+    return () => {
+      window.removeEventListener('scroll', toggleVisibility);
+    };
+  }, []);
+
+  return (
+    <div className="scroll-to-top">
+      {isVisible && (
+        <button onClick={scrollToTop} className="scroll-btn">
+          ↑ 
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default ScrollToTopButton;
\ No newline at end of file
diff --git a/site/package-lock.json b/site/package-lock.json
index 7f532db..5539d84 100644
--- a/site/package-lock.json
+++ b/site/package-lock.json
@@ -9,9 +9,12 @@
       "version": "0.1.0",
       "license": "ISC",
       "dependencies": {
+
         "@fortawesome/fontawesome-free": "^6.6.0",
         "@fortawesome/free-brands-svg-icons": "^6.6.0",
         "@fortawesome/react-fontawesome": "^0.2.2",
+        "@heroicons/react": "^2.1.5",
+
         "eslint": "8.37.0",
         "eslint-config-next": "13.2.4",
         "framer-motion": "^11.5.4",
@@ -91,6 +94,7 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+
     "node_modules/@fortawesome/fontawesome-common-types": {
       "version": "6.6.0",
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.6.0.tgz",
@@ -140,6 +144,14 @@
       "peerDependencies": {
         "@fortawesome/fontawesome-svg-core": "~1 || ~6",
         "react": ">=16.3"
+
+    "node_modules/@heroicons/react": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.1.5.tgz",
+      "integrity": "sha512-FuzFN+BsHa+7OxbvAERtgBTNeZpUjgM/MIizfVkSCL2/edriN0Hx/DWRCR//aPYwO5QX/YlgLGXk+E3PcfZwjA==",
+      "peerDependencies": {
+        "react": ">= 16"
+
       }
     },
     "node_modules/@humanwhocodes/config-array": {
@@ -3889,19 +3901,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/typescript": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.0.3.tgz",
-      "integrity": "sha512-xv8mOEDnigb/tN9PSMTwSEqAnUvkoXMQlicOb0IUVDBSQCgBSaAAROUZYy2IcUy5qU6XajK5jjjO7TMWqBTKZA==",
-      "peer": true,
-      "bin": {
-        "tsc": "bin/tsc",
-        "tsserver": "bin/tsserver"
-      },
-      "engines": {
-        "node": ">=12.20"
-      }
-    },
     "node_modules/unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
@@ -4100,6 +4099,7 @@
       "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.37.0.tgz",
       "integrity": "sha512-x5vzdtOOGgFVDCUs81QRB2+liax8rFg3+7hqM+QhBG0/G3F1ZsoYl97UrqgHgQ9KKT7G6c4V+aTUCgu/n22v1A=="
     },
+
     "@fortawesome/fontawesome-common-types": {
       "version": "6.6.0",
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.6.0.tgz",
@@ -4134,6 +4134,11 @@
       "requires": {
         "prop-types": "^15.8.1"
       }
+
+    "@heroicons/react": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.1.5.tgz",
+      "integrity": "sha512-FuzFN+BsHa+7OxbvAERtgBTNeZpUjgM/MIizfVkSCL2/edriN0Hx/DWRCR//aPYwO5QX/YlgLGXk+E3PcfZwjA==
     },
     "@humanwhocodes/config-array": {
       "version": "0.11.8",
@@ -4356,8 +4361,7 @@
     "acorn-jsx": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
-      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
-      "requires": {}
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ=="
     },
     "ajv": {
       "version": "6.12.6",
@@ -4639,6 +4643,7 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
+    
     "commander": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@@ -5125,8 +5130,7 @@
     "eslint-plugin-react-hooks": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz",
-      "integrity": "sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==",
-      "requires": {}
+      "integrity": "sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g=="
     },
     "eslint-scope": {
       "version": "7.1.1",
@@ -5730,8 +5734,9 @@
       "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
       "requires": {
         "argparse": "^2.0.1"
-      }
+      },
     },
+    
     "json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
@@ -5825,8 +5830,7 @@
     "lucide-react": {
       "version": "0.439.0",
       "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.439.0.tgz",
-      "integrity": "sha512-PafSWvDTpxdtNEndS2HIHxcNAbd54OaqSYJO90/b63rab2HWYqDbH194j0i82ZFdWOAcf0AHinRykXRRK2PJbw==",
-      "requires": {}
+      "integrity": "sha512-PafSWvDTpxdtNEndS2HIHxcNAbd54OaqSYJO90/b63rab2HWYqDbH194j0i82ZFdWOAcf0AHinRykXRRK2PJbw=="
     },
     "merge2": {
       "version": "1.4.1",
@@ -6646,12 +6650,6 @@
         "is-typed-array": "^1.1.9"
       }
     },
-    "typescript": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.0.3.tgz",
-      "integrity": "sha512-xv8mOEDnigb/tN9PSMTwSEqAnUvkoXMQlicOb0IUVDBSQCgBSaAAROUZYy2IcUy5qU6XajK5jjjO7TMWqBTKZA==",
-      "peer": true
-    },
     "unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
diff --git a/site/package.json b/site/package.json
index f1d59cf..60da82c 100644
--- a/site/package.json
+++ b/site/package.json
@@ -9,9 +9,12 @@
     "lint": "next lint"
   },
   "dependencies": {
+
     "@fortawesome/fontawesome-free": "^6.6.0",
     "@fortawesome/free-brands-svg-icons": "^6.6.0",
     "@fortawesome/react-fontawesome": "^0.2.2",
+
+    "@heroicons/react": "^2.1.5",
     "eslint": "8.37.0",
     "eslint-config-next": "13.2.4",
     "framer-motion": "^11.5.4",
diff --git a/site/pages/_app.js b/site/pages/_app.js
index 802cf94..cc3dc51 100644
--- a/site/pages/_app.js
+++ b/site/pages/_app.js
@@ -1,8 +1,10 @@
 import "../styles/globals.css";
+import "../styles/scrollToTopButton.css";
 import { useState, useEffect } from 'react';
 import { useRouter } from 'next/router';
 import Footer from "../components/Footer";
 import NavBar from "../components/Navbar";
+import ScrollToTopButton from "../components/ScrollToTopButton";
 import NProgress from 'nprogress';
 import '../public/nprogress.css';
 import { ToastContainer } from 'react-toastify';
@@ -108,5 +110,5 @@ export default function App({ Component, pageProps }) {
         </button>
       )}
     </>
-  )
+  );
 }
diff --git a/site/pages/contact.js b/site/pages/contact.js
index 02fad00..d0fc6a5 100644
--- a/site/pages/contact.js
+++ b/site/pages/contact.js
@@ -32,13 +32,12 @@ const Contact = () => {
 
   return (
     <div className="bg-white min-h-screen p-6">
-      <h2 className="text-2xl font-bold text-center mb-6">
+      <h2 className="text-3xl font-bold text-center mb-6">
         How would you like to contact Bio-branch?
       </h2>
       <div className="flex flex-wrap justify-center gap-6"> {/* Center the boxes with gap */}
         {/* Request a Call Box */}
-        <div className={`${styles.box} w-[90%] p-4 lg:w-1/3 text-center `}>
-          <h3 className="font-semibold text-xl mb-4">Request a Call</h3>
+
           <form onSubmit={handleRequestCall} className="flex flex-col gap-4">
             <input
               type="text"
@@ -87,7 +86,7 @@ const Contact = () => {
               className="border rounded p-2"
               required
             />
-            <button type="submit" className="bg-blue-500 text-white p-2 rounded">
+            <button type="submit" className="bg-blue-500 text-white p-2 rounded transition duration-800 ease-in-out hover:font-bold hover:text-[#e0ff4f]">
               Submit
             </button>
           </form>
@@ -95,14 +94,14 @@ const Contact = () => {
 
         {/* Support and Feedback Box */}
         <div className="w-full sm:w-2/3 lg:w-1/3 flex flex-col gap-4">
-          <div className={`${styles.box} p-7 mb-5`}>
-            <h3 className="font-semibold text-xl mb-4">Support</h3>
+          <div className={`${styles.box} p-7 md:mb-5`}>
+            <h3 className="font-bold text-xl mb-4 text-[#15616d]">Support</h3>
             <p>Phone: (123) 456-7890</p>
             <p>Email: support@bio-branch.com</p>
           </div>
           <div className={`${styles.box} p-7`}>
-            <h3 className="font-semibold text-xl mb-2">Feedback</h3>
-            <p>Your feedback is important to us! Please let us know your thoughts.</p>
+            <h3 className="font-bold text-xl mb-2  text-[#15616d]">Feedback</h3>
+            <p className='mb-1 '>Your feedback is important to us! Please let us know your thoughts.</p>
             <form onSubmit={handleFeedbackSubmit} className="flex flex-col">
               <textarea
                 placeholder="Your feedback here..."
@@ -111,7 +110,7 @@ const Contact = () => {
                 className="border rounded p-2 w-full"
                 required
               />
-              <button type="submit" className="bg-blue-500 text-white p-2 rounded mt-2">
+              <button type="submit" className="bg-blue-500 text-white p-2 rounded mt-2 transition duration-800 ease-in-out hover:font-bold hover:text-[#e0ff4f]">
                 Submit Feedback
               </button>
             </form>
diff --git a/site/pages/contributor.js b/site/pages/contributor.js
new file mode 100644
index 0000000..ddd0417
--- /dev/null
+++ b/site/pages/contributor.js
@@ -0,0 +1,230 @@
+import React, { useEffect, useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+
+const ContributorCard = ({ login, avatar_url, html_url, contributions, type }) => (
+  <motion.div
+    whileHover={{ y: -5, boxShadow: '0 10px 30px -15px rgba(0, 0, 0, 0.1)' }}
+    transition={{ type: 'spring', stiffness: 300 }}
+    className="bg-white rounded-xl shadow-md overflow-hidden border border-gray-200"
+  >
+    <div className="p-6 text-center">
+      <img src={avatar_url} alt={login} className="w-24 h-24 rounded-full mx-auto mb-4 border-4 border-gray-200" />
+      <h3 className="font-bold text-xl text-gray-800">{login}</h3>
+      <p className="text-sm text-gray-600 mb-2">{type}</p>
+      <div className="mt-4 bg-gray-100 rounded-full py-2 px-4 inline-block">
+        <span className="font-semibold text-gray-800">{contributions} contributions</span>
+      </div>
+    </div>
+    <div className="bg-gray-50 py-3 px-6 flex justify-between items-center">
+      <a 
+        href={html_url} 
+        target="_blank" 
+        rel="noopener noreferrer" 
+        className="text-gray-600 hover:text-gray-800 transition-colors flex items-center"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
+          <path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z" />
+          <path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z" />
+        </svg>
+        View Profile
+      </a>
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-gray-400">
+        <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
+      </svg>
+    </div>
+  </motion.div>
+);
+
+const StatCard = ({ label, value, icon }) => (
+  <motion.div 
+    initial={{ opacity: 0, y: 20 }}
+    animate={{ opacity: 1, y: 0 }}
+    transition={{ duration: 0.5 }}
+    className="bg-white rounded-xl shadow-md p-6 flex items-center border border-gray-200"
+  >
+    <div className="rounded-full bg-gray-100 p-3 mr-4">
+      {icon}
+    </div>
+    <div>
+      <h3 className="text-3xl font-bold text-gray-800">{value}</h3>
+      <p className="text-gray-600">{label}</p>
+    </div>
+  </motion.div>
+);
+
+export default function Contributor() {
+  const [contributors, setContributors] = useState([]);
+  const [repoStats, setRepoStats] = useState({ stars: 0, forks: 0, openIssues: 0 });
+  const [loading, setLoading] = useState(true);
+  const [email, setEmail] = useState('');
+  const [notification, setNotification] = useState({ show: false, message: '' });
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const contributorsResponse = await fetch('https://api.github.com/repos/subhadipbhowmik/bio-branch/contributors');
+        const contributorsData = await contributorsResponse.json();
+        setContributors(contributorsData);
+
+        const repoResponse = await fetch('https://api.github.com/repos/subhadipbhowmik/bio-branch');
+        const repoData = await repoResponse.json();
+        setRepoStats({
+          stars: repoData.stargazers_count,
+          forks: repoData.forks_count,
+          openIssues: repoData.open_issues_count,
+        });
+      } catch (error) {
+        console.error('Error fetching data:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    setNotification({ show: true, message: `Thank you for subscribing with ${email}. We'll keep you updated!` });
+    setEmail('');
+    setTimeout(() => setNotification({ show: false, message: '' }), 5000);
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      {/* Hero Section */}
+      <section className="relative h-[70vh] flex items-center justify-center text-center bg-cover bg-center" style={{backgroundImage: "url('https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=2850&q=80')"}}>
+        <div className="absolute inset-0 bg-black opacity-75" />
+        <div className="relative z-10 space-y-6 max-w-4xl mx-auto px-4">
+          <motion.h1 
+            className="text-5xl font-bold sm:text-6xl md:text-7xl text-white"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8 }}
+          >
+            Welcome to Biotree
+          </motion.h1>
+          <motion.p 
+            className="text-xl sm:text-2xl text-gray-200"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.2 }}
+          >
+            Empowering writers, one commit at a time
+          </motion.p>
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.4 }}
+          >
+            <button
+              className="mt-8 bg-white text-gray-900 hover:bg-gray-100 px-6 py-3 rounded-md text-lg font-semibold transition-colors duration-300"
+              onClick={() => document.getElementById('contribute').scrollIntoView({ behavior: 'smooth' })}
+            >
+              Become a Contributor
+            </button>
+          </motion.div>
+        </div>
+      </section>
+
+      {/* Stats Section */}
+      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
+        <div className="max-w-7xl mx-auto">
+          <h2 className="text-3xl font-bold text-center mb-12 text-gray-900">Project Statistics</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+            <StatCard 
+              label="Contributors" 
+              value={contributors.length} 
+              icon={<svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8 text-gray-600" viewBox="0 0 20 20" fill="currentColor">
+                <path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z" />
+              </svg>}
+            />
+            <StatCard 
+              label="Total Contributions" 
+              value={contributors.reduce((sum, contributor) => sum + contributor.contributions, 0)} 
+              icon={<svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8 text-gray-600" viewBox="0 0 20 20" fill="currentColor">
+                <path fillRule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clipRule="evenodd" />
+              </svg>}
+            />
+            <StatCard 
+              label="GitHub Stars" 
+              value={repoStats.stars} 
+              icon={<svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8 text-gray-600" viewBox="0 0 20 20" fill="currentColor">
+                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+              </svg>}
+            />
+            <StatCard 
+              label="Forks" 
+              value={repoStats.forks} 
+              icon={<svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8 text-gray-600" viewBox="0 0 20 20" fill="currentColor">
+                <path fillRule="evenodd" d="M7.707 3.293a1 1 0 010 1.414L5.414 7H11a7 7 0 017 7v2a1 1 0 11-2 0v-2a5 5 0 00-5-5H5.414l2.293 2.293a1 1 0 11-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clipRule="evenodd" />
+              </svg>}
+            />
+          </div>
+        </div>
+      </section>
+
+      {/* Contributors Grid */}
+      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-gray-100">
+        <div className="max-w-7xl mx-auto">
+          <h2 className="text-4xl font-bold text-center mb-12 text-gray-900">Meet Our Contributors</h2>
+          <AnimatePresence>
+            {loading ? (
+              <motion.div
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                className="flex justify-center items-center h-64"
+              >
+                <div className="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-gray-900"></div>
+              </motion.div>
+            ) : (
+              <motion.div
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8"
+              >
+                {contributors.map((contributor) => (
+                  <ContributorCard key={contributor.id} {...contributor} />
+                ))}
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </div>
+      </section>
+
+      {/* Call to Action */}
+      <section id="contribute" className="py-16 px-4 sm:px-6 lg:px-8 bg-gray-900 text-white">
+        <div className="max-w-4xl mx-auto  text-center">
+          <h2 className="text-4xl font-bold mb-6">Ready to Make an Impact?</h2>
+          <p className="text-xl mb-8 text-gray-300">
+            Join our community and help shape the future of Biotree.
+          </p>
+          <form onSubmit={handleSubmit} className="flex flex-col sm:flex-row gap-4 justify-center">
+            <input
+              type="email"
+              placeholder="Enter your email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              className="px-4 py-2 rounded-md text-gray-800 w-full sm:w-auto"
+            />
+            <button type="submit" className="bg-white text-gray-900 hover:bg-gray-100 px-6 py-2 rounded-md font-semibold transition-colors duration-300">
+              Get Started
+            </button>
+          </form>
+          {notification.show && (
+            <motion.div
+              initial={{ opacity: 0, y: 50 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: 50 }}
+              className="mt-4 p-4 bg-gray-800 text-white rounded-md"
+            >
+              {notification.message}
+            </motion.div>
+          )}
+        </div>
+      </section>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/site/pages/index.js b/site/pages/index.js
index 6055254..ca5e15f 100644
--- a/site/pages/index.js
+++ b/site/pages/index.js
@@ -4,8 +4,19 @@ import Creators from '@/components/Creators'
 import DetailsCard from '@/components/DetailsCard'
 import Faq from '@/components/Faq'
 import Process from '@/components/Process'
+import { useRef } from 'react';
+import { ChevronDoubleDownIcon } from '@heroicons/react/24/solid';
 
 export default function Home() {
+
+  // Scroll to the next section
+  const scrollToNextSection = () => {
+    window.scrollBy({
+      top: window.innerHeight,
+      behavior: 'smooth',
+    });
+  };
+
   return (
     <>
       <MyHead
@@ -16,6 +27,15 @@ export default function Home() {
       />
 
       <main className="w-full min-h-screen flex flex-col justify-center items-center">
+         {/* Scroll down button */}
+        <button 
+          onClick={scrollToNextSection}
+          className="fixed top-20 right-4 bg-blue-500 text-white p-2 rounded-full shadow-lg hover:bg-blue-600 transition-all z-10"
+          title="Scroll down"
+        >
+          {/* Double arrow icon */}
+          <ChevronDoubleDownIcon className="h-6 w-6"/>
+        </button>
         <Creators/>
         <DetailsCard/>
         <Faq/>
diff --git a/site/styles/globals.css b/site/styles/globals.css
index 6d4761a..a511a05 100644
--- a/site/styles/globals.css
+++ b/site/styles/globals.css
@@ -54,6 +54,18 @@ img{
   -webkit-user-drag: none;
 }
 
+nav{
+  position:fixed; /*making topnav bar fixed*/
+  top:0;
+  width:100%;
+  z-index: 1000; /* Make sure it stays above other elements */
+}
+
+/*adding space between topnavbar and creator list section*/
+.py-12{
+  margin-top:130px;
+}
+
 /* @media (prefers-color-scheme: dark) {
   html {
     color-scheme: dark;
diff --git a/site/styles/scrollToTopButton.css b/site/styles/scrollToTopButton.css
new file mode 100644
index 0000000..468f5c8
--- /dev/null
+++ b/site/styles/scrollToTopButton.css
@@ -0,0 +1,30 @@
+/* styles.css */
+.scroll-to-top {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    z-index: 1000;
+}
+  
+.scroll-btn {
+    /* background-color: #007bff; */
+    background-color: #723aeb;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 20px;
+    font-weight: bold;
+    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.4);
+    opacity: 0.9;
+}
+  
+.scroll-btn:hover {
+    opacity: 1;
+}
+  
+.scroll-btn:focus {
+    outline: none;
+}
+  
\ No newline at end of file
diff --git a/site/tailwind.config.js b/site/tailwind.config.js
index 16316d7..728e8c1 100644
--- a/site/tailwind.config.js
+++ b/site/tailwind.config.js
@@ -6,7 +6,13 @@ module.exports = {
     "./components/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        gray: {
+          900: 'rgb(7, 56, 65)', // Custom color for footer section
+        }
+      }
+    },
   },
   plugins: [],
   safelist: [