diff --git a/index.html b/index.html
index 095cf02f..74b83d6a 100644
--- a/index.html
+++ b/index.html
@@ -11,117 +11,127 @@
     <link rel="stylesheet" href="./src/Styles/Style.css">
     <link rel="stylesheet" href="./src/Styles/contact_us_style.css">
     <link rel="stylesheet" href="./src/Styles/Responsive.css">
-   <link rel="stylesheet" href="src/Styles/scroll.css">
-
+    <link rel="stylesheet" href="src/Styles/scroll.css">
+    <link rel="stylesheet" href="src/Styles/signup.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
         integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
         crossorigin="anonymous" referrerpolicy="no-referrer" />
-<!-- <style> -->
+    <!-- <style> -->
 
 
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
-    
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
+        integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
+        crossorigin="anonymous" referrerpolicy="no-referrer" />
+
     <button id="darkModeToggle">🌓</button>
 
-<style>
-    
-    body {
-        transition: background-color 0.3s, color 0.3s;
-    }
-    .dark-mode {
-        background-color: #1a1a1a;
-        color: #ffffff;
-    }
-    .dark-mode .container {
-        background-image: linear-gradient(120deg, #3a0033, #001a33, #1a0033);
-        color:#007bff;
-    }
-    .dark-mode .canvas-container {
-        background: #2a2a2a;
-        box-shadow: 0 4px 20px rgba(255, 255, 255, 0.1);
-    }
-    .dark-mode #mainCanvas {
-        border-color: #ffffff;
-        box-shadow: 0 2px 10px rgba(255, 255, 255, 0.2);
-        background-color: #333333;
-    }
-    .dark-mode .btn {
-        background-color: #444444;
-        color: #ffffff;
-    }
-    .dark-mode .form-control {
-        background-color: #333333;
-        color: #ffffff;
-    }
-    .dark-mode #userForm {
-        background-color: #444444;
-    }
-    .dark-mode .footer {
-        background-color: #333333;
-        color: #ffffff;
-    }
-    .dark-mode .footer .share a {
-        color: #ffffff;
-    }
-    .dark-mode .custom-popup {
-        background-color: rgba(255,255,255,0.1);
-    }
-    .dark-mode .popup-content {
-        background-color: #333333;
-        color: #ffffff;
-    }
-    #darkModeToggle {
-        position: fixed;
-        top: 20px;
-        right: 20px;
-        z-index: 1000;
-        background-color: #333333;
-        color: #ffffff;
-        border: none;
-        border-radius: 50%;
-        width: 50px;
-        height: 50px;
-        font-size: 24px;
-        cursor: pointer;
-        transition: background-color 0.3s, color 0.3s;
-    }
-    .dark-mode #darkModeToggle {
-        background-color: #ffffff;
-        color: #333333;
-    }
-    
+    <style>
+        body {
+            transition: background-color 0.3s, color 0.3s;
+        }
+
+        .dark-mode {
+            background-color: #1a1a1a;
+            color: #ffffff;
+        }
+
+        .dark-mode .container {
+            background-image: linear-gradient(120deg, #3a0033, #001a33, #1a0033);
+            color: #007bff;
+        }
 
+        .dark-mode .canvas-container {
+            background: #2a2a2a;
+            box-shadow: 0 4px 20px rgba(255, 255, 255, 0.1);
+        }
+
+        .dark-mode #mainCanvas {
+            border-color: #ffffff;
+            box-shadow: 0 2px 10px rgba(255, 255, 255, 0.2);
+            background-color: #333333;
+        }
 
-</style>
+        .dark-mode .btn {
+            background-color: #444444;
+            color: #ffffff;
+        }
+
+        .dark-mode .form-control {
+            background-color: #333333;
+            color: #ffffff;
+        }
 
-<script>
-    const darkModeToggle = document.getElementById('darkModeToggle');
-    const body = document.body;
+        .dark-mode #userForm {
+            background-color: #444444;
+        }
 
-    function enableDarkMode() {
-        body.classList.add('dark-mode');
-        localStorage.setItem('darkMode', 'enabled');
-    }
+        .dark-mode .footer {
+            background-color: #333333;
+            color: #ffffff;
+        }
 
-    function disableDarkMode() {
-        body.classList.remove('dark-mode');
-        localStorage.setItem('darkMode', 'disabled');
-    }
+        .dark-mode .footer .share a {
+            color: #ffffff;
+        }
 
-    darkModeToggle.addEventListener('click', () => {
-        if (body.classList.contains('dark-mode')) {
-            disableDarkMode();
-        } else {
-            enableDarkMode();
+        .dark-mode .custom-popup {
+            background-color: rgba(255, 255, 255, 0.1);
+        }
+
+        .dark-mode .popup-content {
+            background-color: #333333;
+            color: #ffffff;
+        }
+
+        #darkModeToggle {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            z-index: 1000;
+            background-color: #333333;
+            color: #ffffff;
+            border: none;
+            border-radius: 50%;
+            width: 50px;
+            height: 50px;
+            font-size: 24px;
+            cursor: pointer;
+            transition: background-color 0.3s, color 0.3s;
+        }
+
+        .dark-mode #darkModeToggle {
+            background-color: #ffffff;
+            color: #333333;
+        }
+    </style>
+
+    <script>
+        const darkModeToggle = document.getElementById('darkModeToggle');
+        const body = document.body;
+
+        function enableDarkMode() {
+            body.classList.add('dark-mode');
+            localStorage.setItem('darkMode', 'enabled');
+        }
+
+        function disableDarkMode() {
+            body.classList.remove('dark-mode');
+            localStorage.setItem('darkMode', 'disabled');
         }
-    });
 
-    if (localStorage.getItem('darkMode') === 'enabled') {
-        enableDarkMode();
-    }
-</script>
-<style>
-        
+        darkModeToggle.addEventListener('click', () => {
+            if (body.classList.contains('dark-mode')) {
+                disableDarkMode();
+            } else {
+                enableDarkMode();
+            }
+        });
+
+        if (localStorage.getItem('darkMode') === 'enabled') {
+            enableDarkMode();
+        }
+    </script>
+    <style>
         body {
             overflow-x: hidden;
             background-color: #ffffff;
@@ -136,14 +146,14 @@
         }
 
 
-        
+
 
         /* }
 
 
             background-image: linear-gradient(120deg, #fbccff, #d8f9ff, #d4c6ff);        } */
 
-            
+
 
 
         .header {
@@ -158,7 +168,7 @@
             align-items: center;
             justify-content: center;
             background: #d1d7ff;
-            color: #ffffff;
+            color: #cff9a3;
             border-radius: 10px;
             box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
             padding: 20px;
@@ -168,7 +178,8 @@
 
         #mainCanvas {
             width: 100%;
-            height: auto; /* Adjust height dynamically */
+            height: auto;
+            /* Adjust height dynamically */
             max-width: 100%;
             border: 2px solid #000000;
             border-radius: 10px;
@@ -289,7 +300,7 @@
 
 
         /* Custom scrollbar for Chrome, Safari, and Opera */
-      
+
 
         h5 {
             color: #eeff00;
@@ -297,19 +308,20 @@
             font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
 
         }
-        
 
-.footer {
-    width: 100%;
-    background-color: #2c3e5e; /*updated this color */
-    color: #c23e3e;
-    text-align: center;
-    border-start-start-radius: 5px;
-    padding: 35px 350px;
-    font-family: 'Arial', sans-serif;
-    position: relative;
-    margin-top: 20px;
-}
+
+        .footer {
+            width: 100%;
+            background-color: #2c3e5e;
+            /*updated this color */
+            color: #c23e3e;
+            text-align: center;
+            border-start-start-radius: 5px;
+            padding: 35px 350px;
+            font-family: 'Arial', sans-serif;
+            position: relative;
+            margin-top: 20px;
+        }
 
 
         .footer .share {
@@ -348,15 +360,17 @@
         .footer .credit span:hover {
             color: #f1c40f;
         }
+
         .dark-mode h2 {
-            color: #ffffff; /* White text for h2 in dark mode */
+            color: #ffffff;
+            /* White text for h2 in dark mode */
         }
 
-    /* General h2 styling */
+        /* General h2 styling */
         h2 {
-        font-size: 24px;
-        margin: 0;
-        font-weight: bold;
+            font-size: 24px;
+            margin: 0;
+            font-weight: bold;
         }
 
 
@@ -375,18 +389,17 @@
             }
         }
 
-        
-                
-            /* Custom scrollbar for Chrome, Safari, and Opera */
-    
 
-h2{
-    margin-top: 50px;
-   color: black;
-   font-size: 50px;
-   font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
-}
 
+        /* Custom scrollbar for Chrome, Safari, and Opera */
+
+
+        h2 {
+            margin-top: 50px;
+            color: black;
+            font-size: 50px;
+            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+        }
     </style>
     <style>
         /* Circle styles */
@@ -403,45 +416,53 @@
             transition: transform 0.1s ease-out;
         }
 
-        .gtranslate_wrapper{
+        .gtranslate_wrapper {
             margin-left: 30px;
         }
-/* Common Styles */
-.theme-container {
-    padding: 2rem; /* Maintain padding for the container */
-    transition: background-color 0.3s, color 0.3s; /* Smooth transition */
-}
 
-/* Light Theme Styles */
-.theme-container {
-    background: linear-gradient(to right, #d1c4e9, #e1bee7); /* Light purple gradient background */
-}
-
-.theme-container .welcome-header {
-    color: #8e24aa; /* Base color for h2 in light theme */
-    text-shadow: 0 0 5px #9c27b0; /* Adjusted for sharper effect */
-}
-
-.theme-container .welcome-text {
-    color: #ecf0f1; /* Light text color for p in light theme */
-}
+        /* Common Styles */
+        .theme-container {
+            padding: 2rem;
+            /* Maintain padding for the container */
+            transition: background-color 0.3s, color 0.3s;
+            /* Smooth transition */
+        }
 
-/* Dark Theme Styles */
-.dark-mode .theme-container {
-    background-color: #1a1a1a; /* Dark background for dark mode */
-}
+        /* Light Theme Styles */
+        .theme-container {
+            background: linear-gradient(to right, #d1c4e9, #e1bee7);
+            /* Light purple gradient background */
+        }
 
-.dark-mode .theme-container .welcome-header {
-    color: #ffffff; /* White text for h2 in dark mode */
-    text-shadow: 0 0 5px #ffffff; /* Glowing white effect for dark mode */
-}
+        .theme-container .welcome-header {
+            color: #8e24aa;
+            /* Base color for h2 in light theme */
+            text-shadow: 0 0 5px #9c27b0;
+            /* Adjusted for sharper effect */
+        }
 
-.dark-mode .theme-container .welcome-text {
-    color: #b0b0b0; /* Light grey text color for p in dark mode */
-}
+        .theme-container .welcome-text {
+            color: #ecf0f1;
+            /* Light text color for p in light theme */
+        }
 
+        /* Dark Theme Styles */
+        .dark-mode .theme-container {
+            background-color: #1a1a1a;
+            /* Dark background for dark mode */
+        }
 
+        .dark-mode .theme-container .welcome-header {
+            color: #ffffff;
+            /* White text for h2 in dark mode */
+            text-shadow: 0 0 5px #ffffff;
+            /* Glowing white effect for dark mode */
+        }
 
+        .dark-mode .theme-container .welcome-text {
+            color: #b0b0b0;
+            /* Light grey text color for p in dark mode */
+        }
     </style>
 </head>
 
@@ -496,7 +517,10 @@
     <div class="container pt-2">
         <div class="header">
             <img src="" alt="">
-            <h1 class="display-4"><a href="/" style="color: inherit; text-decoration: none;">Creative Canvas Tool</a>
+            <h1 class="display-4"><a href="/" style="color: blueviolet; 
+            font-family: cursive;
+            text-decoration: none;
+            ">Creative Canvas Tool</a>
             </h1>
             <p class="lead">Design and create stunning visuals effortlessly!</p>
         </div>
@@ -520,7 +544,7 @@ <h1 class="display-4"><a href="/" style="color: inherit; text-decoration: none;"
                 </li>
                 <li class="nav-item">
                     <a class="nav-link" href="privacy.html">Privacy</a>
-                  </li>
+                </li>
                 <li class="nav-item">
                     <a class="nav-link" href="Blog_page.html">Blog</a>
                 </li>
@@ -529,7 +553,8 @@ <h1 class="display-4"><a href="/" style="color: inherit; text-decoration: none;"
                     <a class="nav-link" href="./Faq.html">FAQ</a>
                 </li>
 
-                <a class="nav-link" href="signup.html">Sign Up</a></li>
+                <a class="nav-link" href="signup.html">Sign Up</a>
+                </li>
                 <li class="nav-item">
                     <a class="nav-link" href="login.html">Login</a>
 
@@ -540,32 +565,40 @@ <h1 class="display-4"><a href="/" style="color: inherit; text-decoration: none;"
                 </li>
                 <li>
                     <div class="gtranslate_wrapper"></div>
-            <script>
-              window.gtranslateSettings = {
-                default_language: "en",
-                detect_browser_language: true,
-                wrapper_selector: ".gtranslate_wrapper",
-                flag_size: 16,
-              };
-            </script>
-            <script
-            src="https://cdn.gtranslate.net/widgets/latest/popup.js"
-            defer
-          ></script>
+                    <script>
+                        window.gtranslateSettings = {
+                            default_language: "en",
+                            detect_browser_language: true,
+                            wrapper_selector: ".gtranslate_wrapper",
+                            flag_size: 16,
+                        };
+                    </script>
+                    <script src="https://cdn.gtranslate.net/widgets/latest/popup.js" defer></script>
                 </li>
 
             </ul>
         </div>
         <div class="row text-center p-5 theme-container">
-            <h2 class="welcome-header">Welcome to the Canvas Editor!</h2>
-            <p class="welcome-text">Unleash your creativity with our powerful and easy-to-use canvas editor. <i class="fa-light fa-face-party"></i></p>
+            <h2 class="welcome-header">Welcome to the <span>Canvas Editor!</span></h2>
+            <p class="welcome-text" style="
+            background: linear-gradient(to right, #9060f9, #a755ef);
+            padding: 10px;
+            font-style: oblique;
+            font-weight: 300;
+            font: 200;">Unleash your creativity with our powerful and easy-to-use canvas editor. <i
+                    class="fa-light fa-face-party"></i></p>
         </div>
-        
+
         <div class="canvas-container">
 
-        
-            <b><h2>Draw Here !!!</h2></b>
-            
+
+            <b>
+                <h2 style="color: #da42df;
+            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+            font-style: italic;
+            ">Draw Here !!!</h2>
+            </b>
+
 
             <canvas id="mainCanvas"></canvas>
             <!-- <div class="p-3 bg-light rounded shadow">
@@ -653,21 +686,21 @@ <h2 style="color: white;">Welcome to the Canvas Editor!</h2>
                             </div>
                         </div>
                         <div class="wrapper edit">
-                            <button  type="button" class="btn btn-primary" id="drawTextBtn">
+                            <button type="button" class="btn btn-primary" id="drawTextBtn">
                                 <span></span>
                                 <span></span>
                                 <span></span>
                                 <span></span>
                                 Brush
                             </button>
-                            <button  type="button" class="btn btn-primary" id="clearCanvasBtn">
+                            <button type="button" class="btn btn-primary" id="clearCanvasBtn">
                                 <span></span>
                                 <span></span>
                                 <span></span>
                                 <span></span>
                                 Clear Canvas
                             </button>
-                            <button  type="button" class="btn btn-primary" id="eraserBtn">
+                            <button type="button" class="btn btn-primary" id="eraserBtn">
                                 <span></span>
                                 <span></span>
                                 <span></span>
@@ -683,28 +716,28 @@ <h2 style="color: white;">Welcome to the Canvas Editor!</h2>
                         </div> -->
                     </form>
                     <div class="tStyle d-md-flex justify-content-evenly gap-1">
-                        <button  type="button" class="btn btn-primary" id="capital">
+                        <button type="button" class="btn btn-primary" id="capital">
                             <span></span>
                             <span></span>
                             <span></span>
                             <span></span>
                             Uppercase
                         </button>
-                        <button  type="button" class="btn btn-primary" id="small">
+                        <button type="button" class="btn btn-primary" id="small">
                             <span></span>
                             <span></span>
                             <span></span>
                             <span></span>
                             Lowercase
                         </button>
-                        <button  type="button" class="btn btn-primary" id="bold">
+                        <button type="button" class="btn btn-primary" id="bold">
                             <span></span>
                             <span></span>
                             <span></span>
                             <span></span>
                             Bold
                         </button>
-                        <button  type="button" class="btn btn-primary" id="italic">
+                        <button type="button" class="btn btn-primary" id="italic">
                             <span></span>
                             <span></span>
                             <span></span>
@@ -719,21 +752,21 @@ <h2 style="color: white;">Welcome to the Canvas Editor!</h2>
                         <button class="btn btn-primary" id="italic">Italic</button>
                     </div> -->
                     <div class="rclStyle d-md-flex justify-content-evenly gap-1">
-                        <button  type="button" class="btn btn-success" id="rectangleBtn">
+                        <button type="button" class="btn btn-success" id="rectangleBtn">
                             <span></span>
                             <span></span>
                             <span></span>
                             <span></span>
                             Rectangle
                         </button>
-                        <button  type="button" class="btn btn-success" id="circleBtn">
+                        <button type="button" class="btn btn-success" id="circleBtn">
                             <span></span>
                             <span></span>
                             <span></span>
                             <span></span>
                             Circle
                         </button>
-                        <button  type="button" class="btn btn-success" id="linebtn">
+                        <button type="button" class="btn btn-success" id="linebtn">
                             <span></span>
                             <span></span>
                             <span></span>
@@ -756,183 +789,188 @@ <h2 style="color: white;">Welcome to the Canvas Editor!</h2>
                     </form>
                 </div>
 
-                
-        </div>
-
 
             </div>
-            <div class="container mt-5">
-                <!-- Contact Us Section -->
-                <section id="contact" class="contact-section text-center py-5">
-                    <h2 class="mb-4">Contact Us</h2>
-                  <div class="social-media-links">
-                    <img class="link-img" src="https://workik-widget-assets.s3.amazonaws.com/Footer1-83/v1/images/Icon-twitter.png">
-                    <img class="link-img" src="https://workik-widget-assets.s3.amazonaws.com/Footer1-83/v1/images/Icon-facebook.png">         
-                    <img class="link-img" src="https://workik-widget-assets.s3.amazonaws.com/Footer1-83/v1/images/Icon-google.png">
-                    <img class="link-img" src="https://workik-widget-assets.s3.amazonaws.com/Footer1-83/v1/images/Icon-instagram.png">
+
+
+        </div>
+        <div class="container mt-5">
+            <!-- Contact Us Section -->
+            <section id="contact" class="contact-section text-center py-5">
+                <h2 class="mb-4">Contact Us</h2>
+                <div class="social-media-links">
+                    <img class="link-img"
+                        src="https://workik-widget-assets.s3.amazonaws.com/Footer1-83/v1/images/Icon-twitter.png">
+                    <img class="link-img"
+                        src="https://workik-widget-assets.s3.amazonaws.com/Footer1-83/v1/images/Icon-facebook.png">
+                    <img class="link-img"
+                        src="https://workik-widget-assets.s3.amazonaws.com/Footer1-83/v1/images/Icon-google.png">
+                    <img class="link-img"
+                        src="https://workik-widget-assets.s3.amazonaws.com/Footer1-83/v1/images/Icon-instagram.png">
                 </div>
-                    <form id="contactForm" class="row g-3 justify-content-center">
-                        <!-- Name Field -->
-                        <div class="col-md-4">
-                            <div class="form-floating">
-                                <input type="text" class="form-control" id="name" name="name" placeholder="Your Name"
-                                    required>
-                                <label for="name">Your Name</label>
-                            </div>
+                <form id="contactForm" class="row g-3 justify-content-center">
+                    <!-- Name Field -->
+                    <div class="col-md-4">
+                        <div class="form-floating">
+                            <input type="text" class="form-control" id="name" name="name" placeholder="Your Name"
+                                required>
+                            <label for="name">Your Name</label>
                         </div>
-                        <!-- Email Field -->
-                        <div class="col-md-4">
-                            <div class="form-floating">
-                                <input type="email" class="form-control" id="email" name="email"
-                                    placeholder="Your Email" required>
-                                <label for="email">Your Email</label>
-                            </div>
+                    </div>
+                    <!-- Email Field -->
+                    <div class="col-md-4">
+                        <div class="form-floating">
+                            <input type="email" class="form-control" id="email" name="email" placeholder="Your Email"
+                                required>
+                            <label for="email">Your Email</label>
                         </div>
-                        <!-- Subject Field -->
-                        <div class="col-md-8">
-                            <div class="form-floating">
-                                <input type="text" class="form-control" id="subject" name="subject"
-                                    placeholder="Subject" required>
-                                <label for="subject">Subject</label>
-                            </div>
+                    </div>
+                    <!-- Subject Field -->
+                    <div class="col-md-8">
+                        <div class="form-floating">
+                            <input type="text" class="form-control" id="subject" name="subject" placeholder="Subject"
+                                required>
+                            <label for="subject">Subject</label>
                         </div>
+                    </div>
 
-                        <!-- Message Field -->
-                        <div class="col-md-8">
-                            <div class="form-floating">
-                                <textarea class="form-control" id="message" name="message" placeholder="Your Message"
-                                    style="height: 150px; align-items: center;" required></textarea>
-                                <label for="message">Your Message</label>
-                            </div>
-                        </div>
-                        <!-- Submit Button -->
-                        <div class="col-md-8">
-                            <button type="submit" class="btn btn-primary w-100 py-2">Submit</button>
-                        </div>
+                    <!-- Message Field -->
+                    <div class="col-md-8">
+                        <div class="form-floating">
+                            <textarea class="form-control" id="message" name="message" placeholder="Your Message"
+                                style="height: 150px; align-items: center;" required></textarea>
+                            <label for="message">Your Message</label>
                         </div>
-                    </form>
-                </section>
-            </div>
+                    </div>
+                    <!-- Submit Button -->
+                    <div class="col-md-8">
+                        <button type="submit" class="btn btn-primary w-100 py-2">Submit</button>
+                    </div>
         </div>
-        <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+        </form>
+        </section>
+    </div>
+    </div>
+    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 
                     </div>
                     Message Field -->
-                    <!-- <div class="col-md-8">
+    <!-- <div class="col-md-8">
                         <div class="form-floating">
                             <textarea class="form-control" id="message" name="message" placeholder="Your Message" style="height: 150px" required></textarea>
                             <label for="message">Your Message (minimum 20 characters)</label>
                         </div>
                     </div> -->
-                    <div class="container">
-                        <div class="cal">
-                            <h4>Your<br><span>Message</span></h4>
-                            <!-- <div class="input-box"> -->
-                                <textarea class="form-control" id="message" name="message" placeholder="Type your message here..." style="height: 350px; width: 800px;" required></textarea>
-                                
-                            
-                            <p id="result"></p>
-                        </div>
-                    <!-- Submit Button -->
-                    <div class="col-md-12 d-flex justify-content-center">
-                        <div class="col-md-8">
-                            <button type="submit" class="btn btn-primary w-100 py-2">Submit</button>
-                        </div>
-                    </div>
-                </form>
-            </div>
+    <div class="container">
+        <div class="cal">
+            <h4>Your<br><span>Message</span></h4>
+            <!-- <div class="input-box"> -->
+            <textarea class="form-control" id="message" name="message" placeholder="Type your message here..."
+                style="height: 350px; width: 800px;" required></textarea>
+
+
+            <p id="result"></p>
         </div>
-        
-        <!-- Custom Popup -->
-        <div id="customPopup" class="custom-popup">
-            <div class="popup-content">
-                <h3>Thank You!</h3>
-                <p>Your message has been sent successfully. We'll get back to you soon!</p>
-                <button id="closePopup" class="btn btn-primary">Close</button>
+        <!-- Submit Button -->
+        <div class="col-md-12 d-flex justify-content-center">
+            <div class="col-md-8">
+                <button type="submit" class="btn btn-primary w-100 py-2">Submit</button>
             </div>
         </div>
-        
-        <style>
-            .custom-popup {
-                display: none;
-                position: fixed;
-                z-index: 1000;
-                left: 0;
-                top: 0;
-                width: 100%;
-                height: 100%;
-                background-color: rgba(0,0,0,0.5);
-            }
-        
-            .popup-content {
-                background-color: black;
-                margin: 15% auto;
-                padding: 20px;
-                border: 1px solid #888;
-                width: 80%;
-                max-width: 500px;
-                border-radius: 5px;
-                text-align: center;
-                box-shadow: 0 4px 8px rgba(0,0,0,0.1);
-            }
-        
-            .popup-content h3 {
-                color: #007bff;
-                margin-bottom: 15px;
-            }
-        
-            .popup-content p {
-                margin-bottom: 20px;
-            }
-        </style>
-        
-        <script>
-            document.addEventListener('DOMContentLoaded', function() {
-                const contactForm = document.getElementById('contactForm');
-                const customPopup = document.getElementById('customPopup');
-                const closePopup = document.getElementById('closePopup');
-                
-                contactForm.addEventListener('submit', function(e) {
-                    e.preventDefault(); // Prevent the form from submitting normally
-                
-                    // Get form values
-                    const name = document.getElementById('name').value;
-                    const email = document.getElementById('email').value;
-                    const subject = document.getElementById('subject').value;
-                    const message = document.getElementById('message').value;
-                
-                    // Check if message is at least 20 characters long
-                    if (message.length < 20) {
-                        alert('Please enter a message with at least 20 characters.');
-                        return;
-                    }
-                
-                    // Here you would typically send the form data to a server
-                    console.log('Form submitted:', { name, email, subject, message });
-                
-                    // Show custom popup
-                    customPopup.style.display = 'block';
-                
-                    // Reset the form
-                    this.reset();
-                });
-                
-                // Close popup when the close button is clicked
-                closePopup.addEventListener('click', function() {
+        </form>
+    </div>
+    </div>
+
+    <!-- Custom Popup -->
+    <div id="customPopup" class="custom-popup">
+        <div class="popup-content">
+            <h3>Thank You!</h3>
+            <p>Your message has been sent successfully. We'll get back to you soon!</p>
+            <button id="closePopup" class="btn btn-primary">Close</button>
+        </div>
+    </div>
+
+    <style>
+        .custom-popup {
+            display: none;
+            position: fixed;
+            z-index: 1000;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.5);
+        }
+
+        .popup-content {
+            background-color: black;
+            margin: 15% auto;
+            padding: 20px;
+            border: 1px solid #888;
+            width: 80%;
+            max-width: 500px;
+            border-radius: 5px;
+            text-align: center;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        }
+
+        .popup-content h3 {
+            color: #007bff;
+            margin-bottom: 15px;
+        }
+
+        .popup-content p {
+            margin-bottom: 20px;
+        }
+    </style>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            const contactForm = document.getElementById('contactForm');
+            const customPopup = document.getElementById('customPopup');
+            const closePopup = document.getElementById('closePopup');
+
+            contactForm.addEventListener('submit', function (e) {
+                e.preventDefault(); // Prevent the form from submitting normally
+
+                // Get form values
+                const name = document.getElementById('name').value;
+                const email = document.getElementById('email').value;
+                const subject = document.getElementById('subject').value;
+                const message = document.getElementById('message').value;
+
+                // Check if message is at least 20 characters long
+                if (message.length < 20) {
+                    alert('Please enter a message with at least 20 characters.');
+                    return;
+                }
+
+                // Here you would typically send the form data to a server
+                console.log('Form submitted:', { name, email, subject, message });
+
+                // Show custom popup
+                customPopup.style.display = 'block';
+
+                // Reset the form
+                this.reset();
+            });
+
+            // Close popup when the close button is clicked
+            closePopup.addEventListener('click', function () {
+                customPopup.style.display = 'none';
+            });
+
+            // Close popup when clicking outside the popup content
+            window.addEventListener('click', function (event) {
+                if (event.target === customPopup) {
                     customPopup.style.display = 'none';
-                });
-                
-                // Close popup when clicking outside the popup content
-                window.addEventListener('click', function(event) {
-                    if (event.target === customPopup) {
-                        customPopup.style.display = 'none';
-                    }
-                });
+                }
             });
-        </script>
-          
+        });
+    </script>
+
     </div>
-        
+
     <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 
     
@@ -940,272 +978,272 @@ <h3>Thank You!</h3>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
     <script src="./src/Scripts/edit.js"></script> -->
 
-        <section class="footer" id="footer">
-            <!-- Added responsiveness to icons -->
-            <div class="share">
-                <a href="#" class="fab fa-facebook-f"></a>
-                <a href="#" class="fa-brands fa-x-twitter"></a> <!-- Updated X icon-->
-                <a href="#" class="fab fa-instagram"></a>
-                <a href="https://www.linkedin.com/in/anuragvishwakarma/" class="fa-brands fa-linkedin-in"></a>
-                <a href="#" class="fa-brands fa-pinterest"></a>
-            </div>
-
-            <div class="credit" style="font-size: 0.6rem;">
-                <p>
-                    Created by <a href="https://github.com/vishanurag">ANURAG VISHWAKARMA </a> | All rights reserved ©
-                    2024
-                </p>
-                <br>
-            </div>
-            <!-- Back to Top Button -->
-            <button id="BacktoTop">
-                <span>↑</span>
-            </button>
-        </section>
+    <section class="footer" id="footer">
+        <!-- Added responsiveness to icons -->
+        <div class="share">
+            <a href="#" class="fab fa-facebook-f"></a>
+            <a href="#" class="fa-brands fa-x-twitter"></a> <!-- Updated X icon-->
+            <a href="#" class="fab fa-instagram"></a>
+            <a href="https://www.linkedin.com/in/anuragvishwakarma/" class="fa-brands fa-linkedin-in"></a>
+            <a href="#" class="fa-brands fa-pinterest"></a>
+        </div>
 
-        <script src="src\Scripts\preloader.js"></script>
-        <script>
-            const scrollToTopBtn = document.getElementById("BacktoTop");
-            window.onscroll = function () {
-                scrollFunction();
-            };
+        <div class="credit" style="font-size: 0.6rem;">
+            <p>
+                Created by <a href="https://github.com/vishanurag">ANURAG VISHWAKARMA </a> | All rights reserved ©
+                2024
+            </p>
+            <br>
+        </div>
+        <!-- Back to Top Button -->
+        <button id="BacktoTop">
+            <span>↑</span>
+        </button>
+    </section>
+
+    <script src="src\Scripts\preloader.js"></script>
+    <script>
+        const scrollToTopBtn = document.getElementById("BacktoTop");
+        window.onscroll = function () {
+            scrollFunction();
+        };
+
+        function scrollFunction() {
+            if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
+                scrollToTopBtn.style.visibility = 'visible';
+                scrollToTopBtn.style.opacity = '1';
+            } else {
+                scrollToTopBtn.style.visibility = 'hidden';
+                scrollToTopBtn.style.opacity = '0';
+            }
+        }
 
-            function scrollFunction() {
-                if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
-                    scrollToTopBtn.style.visibility = 'visible';
-                    scrollToTopBtn.style.opacity = '1';
+        scrollToTopBtn.addEventListener("click", function () {
+            // Smooth scroll back to top
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+    </script>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            const fontBtn = document.getElementById('fontBtn');
+            const fontOptions = document.getElementById('fontOptions');
+            const options = document.querySelectorAll('.font-option');
+            const radius = 100;  // Increase this value to create more spacing between buttons
+            const startAngle = -30;  // Adjust this for positioning of the arc
+            const offsetX = 300;  // Move the arc further to the right
+            const offsetY = 70;  // Adjust vertical position of the arc
+
+            fontBtn.addEventListener('click', function (e) {
+                e.preventDefault();
+                fontOptions.style.display = fontOptions.style.display === 'none' ? 'block' : 'none';
+                if (fontOptions.style.display === 'block') {
+                    const totalOptions = options.length;
+                    options.forEach((option, index) => {
+                        const angle = (startAngle + index * (90 / (totalOptions - 1))) * (Math.PI / 180);
+                        const x = Math.cos(angle) * radius + offsetX + 20;
+                        const y = Math.sin(angle) * radius + offsetY + 50;
+                        option.style.transform = `translate(${x}px, ${y}px)`;
+                    });
                 } else {
-                    scrollToTopBtn.style.visibility = 'hidden';
-                    scrollToTopBtn.style.opacity = '0';
+                    options.forEach(option => {
+                        option.style.transform = 'translate(0, 0)';
+                    });
                 }
-            }
-
-            scrollToTopBtn.addEventListener("click", function () {
-                // Smooth scroll back to top
-                window.scrollTo({ top: 0, behavior: 'smooth' });
             });
-        </script>
-
-        <script>
-            document.addEventListener('DOMContentLoaded', function () {
-                const fontBtn = document.getElementById('fontBtn');
-                const fontOptions = document.getElementById('fontOptions');
-                const options = document.querySelectorAll('.font-option');
-                const radius = 100;  // Increase this value to create more spacing between buttons
-                const startAngle = -30;  // Adjust this for positioning of the arc
-                const offsetX = 300;  // Move the arc further to the right
-                const offsetY = 70;  // Adjust vertical position of the arc
-
-                fontBtn.addEventListener('click', function (e) {
-                    e.preventDefault();
-                    fontOptions.style.display = fontOptions.style.display === 'none' ? 'block' : 'none';
-                    if (fontOptions.style.display === 'block') {
-                        const totalOptions = options.length;
-                        options.forEach((option, index) => {
-                            const angle = (startAngle + index * (90 / (totalOptions - 1))) * (Math.PI / 180);
-                            const x = Math.cos(angle) * radius + offsetX + 20;
-                            const y = Math.sin(angle) * radius + offsetY + 50;
-                            option.style.transform = `translate(${x}px, ${y}px)`;
-                        });
-                    } else {
-                        options.forEach(option => {
-                            option.style.transform = 'translate(0, 0)';
-                        });
-                    }
-                });
 
-                options.forEach(option => {
-                    option.addEventListener('click', function (e) {
-                        e.preventDefault(); // Prevent default button action
-                        console.log(`${this.id} selected`);
-                    });
+            options.forEach(option => {
+                option.addEventListener('click', function (e) {
+                    e.preventDefault(); // Prevent default button action
+                    console.log(`${this.id} selected`);
                 });
             });
+        });
 
-            const mainCanvas = document.getElementById('mainCanvas');
-            const ctx = mainCanvas.getContext('2d');
-            let drawing = false;
-            let eraserMode = false;
-            let currentColor = '#000000'; // Default color
+        const mainCanvas = document.getElementById('mainCanvas');
+        const ctx = mainCanvas.getContext('2d');
+        let drawing = false;
+        let eraserMode = false;
+        let currentColor = '#000000'; // Default color
 
-            // Resize the canvas to fit the container
-            function resizeCanvas() {
-                mainCanvas.width = mainCanvas.offsetWidth;
-                mainCanvas.height = mainCanvas.offsetHeight;
-            }
-            window.addEventListener('resize', resizeCanvas);
-            resizeCanvas();
-
-            // Function to get the mouse or touch position
-            function getPosition(event) {
-                const rect = mainCanvas.getBoundingClientRect();
-                const x = (event.clientX || event.touches[0].clientX) - rect.left;
-                const y = (event.clientY || event.touches[0].clientY) - rect.top;
-                return { x, y };
-            }
+        // Resize the canvas to fit the container
+        function resizeCanvas() {
+            mainCanvas.width = mainCanvas.offsetWidth;
+            mainCanvas.height = mainCanvas.offsetHeight;
+        }
+        window.addEventListener('resize', resizeCanvas);
+        resizeCanvas();
+
+        // Function to get the mouse or touch position
+        function getPosition(event) {
+            const rect = mainCanvas.getBoundingClientRect();
+            const x = (event.clientX || event.touches[0].clientX) - rect.left;
+            const y = (event.clientY || event.touches[0].clientY) - rect.top;
+            return { x, y };
+        }
 
-            // Start drawing or erasing when the mouse or touch is pressed
-            function startDrawing(event) {
-                drawing = true;
-                const { x, y } = getPosition(event);
-                ctx.beginPath();
-                ctx.moveTo(x, y);
-            }
+        // Start drawing or erasing when the mouse or touch is pressed
+        function startDrawing(event) {
+            drawing = true;
+            const { x, y } = getPosition(event);
+            ctx.beginPath();
+            ctx.moveTo(x, y);
+        }
 
-            // Draw on the canvas or erase as the mouse moves or touch moves
-            function draw(event) {
-                if (drawing) {
-                    const { x, y } = getPosition(event);
-                    if (eraserMode) {
-                        // Erase by clearing a small area
-                        ctx.clearRect(x - 10, y - 10, 20, 20);
-                    } else {
-                        // Set the stroke color and draw
-                        ctx.strokeStyle = currentColor; // Use the selected color
-                        ctx.lineWidth = 5; // Set a line width
-                        ctx.lineTo(x, y);
-                        ctx.stroke();
-                    }
+        // Draw on the canvas or erase as the mouse moves or touch moves
+        function draw(event) {
+            if (drawing) {
+                const { x, y } = getPosition(event);
+                if (eraserMode) {
+                    // Erase by clearing a small area
+                    ctx.clearRect(x - 10, y - 10, 20, 20);
+                } else {
+                    // Set the stroke color and draw
+                    ctx.strokeStyle = currentColor; // Use the selected color
+                    ctx.lineWidth = 5; // Set a line width
+                    ctx.lineTo(x, y);
+                    ctx.stroke();
                 }
-                event.preventDefault(); // Prevent scrolling when touching the canvas
             }
+            event.preventDefault(); // Prevent scrolling when touching the canvas
+        }
 
-            // Stop drawing or erasing when the mouse is released or touch ends
-            function stopDrawing() {
-                drawing = false;
-                ctx.closePath();
-            }
+        // Stop drawing or erasing when the mouse is released or touch ends
+        function stopDrawing() {
+            drawing = false;
+            ctx.closePath();
+        }
 
-            //Event listeners for mouse interactions
-            mainCanvas.addEventListener('mousedown', startDrawing);
-            mainCanvas.addEventListener('mousemove', draw);
-            mainCanvas.addEventListener('mouseup', stopDrawing);
+        //Event listeners for mouse interactions
+        mainCanvas.addEventListener('mousedown', startDrawing);
+        mainCanvas.addEventListener('mousemove', draw);
+        mainCanvas.addEventListener('mouseup', stopDrawing);
 
-            // Event listeners for touch interactions
-            mainCanvas.addEventListener('touchstart', (event) => {
-                startDrawing(event);
-            });
-            mainCanvas.addEventListener('touchmove', (event) => {
-                draw(event);
-            });
-            mainCanvas.addEventListener('touchend', stopDrawing);
+        // Event listeners for touch interactions
+        mainCanvas.addEventListener('touchstart', (event) => {
+            startDrawing(event);
+        });
+        mainCanvas.addEventListener('touchmove', (event) => {
+            draw(event);
+        });
+        mainCanvas.addEventListener('touchend', stopDrawing);
 
-            // Clear the entire canvas
-            document.getElementById('clearCanvasBtn').addEventListener('click', () => {
-                ctx.clearRect(0, 0, mainCanvas.width, mainCanvas.height);
-            });
+        // Clear the entire canvas
+        document.getElementById('clearCanvasBtn').addEventListener('click', () => {
+            ctx.clearRect(0, 0, mainCanvas.width, mainCanvas.height);
+        });
 
-            // Toggle eraser mode
-            document.getElementById('eraserMode').addEventListener('click', () => {
-                eraserMode = !eraserMode;
-                mainCanvas.classList.toggle('eraser', eraserMode);
-                document.getElementById('eraserMode').textContent = eraserMode ? 'Drawing Mode' : 'Eraser Mode';
-            });
+        // Toggle eraser mode
+        document.getElementById('eraserMode').addEventListener('click', () => {
+            eraserMode = !eraserMode;
+            mainCanvas.classList.toggle('eraser', eraserMode);
+            document.getElementById('eraserMode').textContent = eraserMode ? 'Drawing Mode' : 'Eraser Mode';
+        });
 
-            // Change the current color when the color picker changes
-            document.getElementById('colorPicker').addEventListener('input', (event) => {
-                currentColor = event.target.value;
-            });
+        // Change the current color when the color picker changes
+        document.getElementById('colorPicker').addEventListener('input', (event) => {
+            currentColor = event.target.value;
+        });
 
-            // Download the canvas as an image
-            document.getElementById('mainCanvas').addEventListener('click', () => {
-                const link = document.createElement('a');
-                link.download = 'canvas-drawing.png';
-                link.href = mainCanvas.toDataURL('image/png');
-                link.click();
-            });
+        // Download the canvas as an image
+        document.getElementById('mainCanvas').addEventListener('click', () => {
+            const link = document.createElement('a');
+            link.download = 'canvas-drawing.png';
+            link.href = mainCanvas.toDataURL('image/png');
+            link.click();
+        });
 
-            let brushColor = '#000000';
-            let brushSize = 5;
+        let brushColor = '#000000';
+        let brushSize = 5;
 
-            // Set initial canvas dimensions
-            function setCanvasDimensions() {
-                mainCanvas.width = window.innerWidth - 40; // Adjust width
-                mainCanvas.height = 400; // Keep height fixed
-            }
-            setCanvasDimensions();
+        // Set initial canvas dimensions
+        function setCanvasDimensions() {
+            mainCanvas.width = window.innerWidth - 40; // Adjust width
+            mainCanvas.height = 400; // Keep height fixed
+        }
+        setCanvasDimensions();
 
-            // Brush size change
-            document.getElementById('brushSize').addEventListener('change', function () {
-                brushSize = this.value;
-            });
+        // Brush size change
+        document.getElementById('brushSize').addEventListener('change', function () {
+            brushSize = this.value;
+        });
 
-            // Color picker change
-            document.getElementById('colorPicker').addEventListener('change', function () {
-                brushColor = this.value;
-            });
+        // Color picker change
+        document.getElementById('colorPicker').addEventListener('change', function () {
+            brushColor = this.value;
+        });
 
-            // Background color change
-            document.getElementById('bgColorPicker').addEventListener('change', function () {
-                mainCanvas.style.backgroundColor = this.value;
-            });
-            // Function to set up the canvas background image
-            function setBackgroundImage(file) {
-                const reader = new FileReader();
-                reader.onload = function (e) {
-                    const img = new Image();
-                    img.onload = function () {
-                        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
-                    };
-                    img.src = e.target.result;
+        // Background color change
+        document.getElementById('bgColorPicker').addEventListener('change', function () {
+            mainCanvas.style.backgroundColor = this.value;
+        });
+        // Function to set up the canvas background image
+        function setBackgroundImage(file) {
+            const reader = new FileReader();
+            reader.onload = function (e) {
+                const img = new Image();
+                img.onload = function () {
+                    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
                 };
-                reader.readAsDataURL(file);
-            }
+                img.src = e.target.result;
+            };
+            reader.readAsDataURL(file);
+        }
 
-            // Drag and Drop Event Listeners for the Canvas
-            canvas.addEventListener('dragover', (event) => {
-                event.preventDefault();
-                canvas.style.border = '2px dashed #000';
-            });
+        // Drag and Drop Event Listeners for the Canvas
+        canvas.addEventListener('dragover', (event) => {
+            event.preventDefault();
+            canvas.style.border = '2px dashed #000';
+        });
 
-            canvas.addEventListener('dragleave', () => {
-                canvas.style.border = '1px solid #000';
-            });
+        canvas.addEventListener('dragleave', () => {
+            canvas.style.border = '1px solid #000';
+        });
 
-            canvas.addEventListener('drop', (event) => {
-                event.preventDefault();
-                canvas.style.border = '1px solid #000';
-                const file = event.dataTransfer.files[0];
-                if (file && file.type.startsWith('image/')) {
-                    setBackgroundImage(file);
-                } else {
-                    alert('Please drop a valid image file.');
-                }
-            });
+        canvas.addEventListener('drop', (event) => {
+            event.preventDefault();
+            canvas.style.border = '1px solid #000';
+            const file = event.dataTransfer.files[0];
+            if (file && file.type.startsWith('image/')) {
+                setBackgroundImage(file);
+            } else {
+                alert('Please drop a valid image file.');
+            }
+        });
 
 
-            // Background image upload
-            document.getElementById('bgImageUpload').addEventListener('change', function (event) {
-                const file = event.target.files[0];
-                const reader = new FileReader();
-                reader.onload = function (e) {
-                    const img = new Image();
-                    img.onload = function () {
-                        ctx.drawImage(img, 0, 0, mainCanvas.width, mainCanvas.height);
-                    };
-                    img.src = e.target.result;
+        // Background image upload
+        document.getElementById('bgImageUpload').addEventListener('change', function (event) {
+            const file = event.target.files[0];
+            const reader = new FileReader();
+            reader.onload = function (e) {
+                const img = new Image();
+                img.onload = function () {
+                    ctx.drawImage(img, 0, 0, mainCanvas.width, mainCanvas.height);
                 };
-                reader.readAsDataURL(file);
-            });
+                img.src = e.target.result;
+            };
+            reader.readAsDataURL(file);
+        });
 
 
-            // Clear canvas button
-            document.getElementById('clearCanvasBtn').addEventListener('click', () => {
-                ctx.clearRect(0, 0, mainCanvas.width, mainCanvas.height);
-                mainCanvas.style.backgroundColor = '#f0f0f0'; // Reset background color
-            });
+        // Clear canvas button
+        document.getElementById('clearCanvasBtn').addEventListener('click', () => {
+            ctx.clearRect(0, 0, mainCanvas.width, mainCanvas.height);
+            mainCanvas.style.backgroundColor = '#f0f0f0'; // Reset background color
+        });
 
-            // Eraser button
-            document.getElementById('eraserBtn').addEventListener('click', () => {
-                brushColor = '#ffffff'; // Set brush color to white
-            });
+        // Eraser button
+        document.getElementById('eraserBtn').addEventListener('click', () => {
+            brushColor = '#ffffff'; // Set brush color to white
+        });
 
-            // Resize canvas on window resize
-            window.addEventListener('resize', setCanvasDimensions);
+        // Resize canvas on window resize
+        window.addEventListener('resize', setCanvasDimensions);
 
 
         // Contact form submission
-        document.getElementById('contactForm').addEventListener('submit', function(e) {
+        document.getElementById('contactForm').addEventListener('submit', function (e) {
             e.preventDefault(); // Prevent the form from submitting normally
 
             // Get form values
@@ -1231,72 +1269,72 @@ <h3>Thank You!</h3>
             this.reset();
         });
 
-        </script>
+    </script>
+
+    <script>
+        // Coordinates for the cursor
+        const coords = { x: 0, y: 0 };
+        const circles = document.querySelectorAll(".circle");
+
+        // Colors for the circles
+        const colors = [
+            "#ffb56b", "#fdaf69", "#f89d63", "#f59761", "#ef865e", "#ec805d",
+            "#e36e5c", "#df685c", "#d5585c", "#d1525c", "#c5415d", "#c03b5d",
+            "#b22c5e", "#ac265e", "#9c155f", "#950f5f", "#830060", "#7c0060",
+            "#680060", "#60005f", "#48005f", "#3d005e"
+        ];
+
+        // Assign colors and initial position to each circle
+        circles.forEach(function (circle, index) {
+            circle.x = 0;
+            circle.y = 0;
+            circle.style.backgroundColor = colors[index % colors.length];
+        });
 
-        <script>
-            // Coordinates for the cursor
-            const coords = { x: 0, y: 0 };
-            const circles = document.querySelectorAll(".circle");
+        // Update the coordinates when the mouse moves
+        window.addEventListener("mousemove", function (e) {
+            coords.x = e.clientX;
+            coords.y = e.clientY;
+        });
 
-            // Colors for the circles
-            const colors = [
-                "#ffb56b", "#fdaf69", "#f89d63", "#f59761", "#ef865e", "#ec805d",
-                "#e36e5c", "#df685c", "#d5585c", "#d1525c", "#c5415d", "#c03b5d",
-                "#b22c5e", "#ac265e", "#9c155f", "#950f5f", "#830060", "#7c0060",
-                "#680060", "#60005f", "#48005f", "#3d005e"
-            ];
+        // Animation function to move the circles
+        function animateCircles() {
+            let x = coords.x;
+            let y = coords.y;
 
-            // Assign colors and initial position to each circle
             circles.forEach(function (circle, index) {
-                circle.x = 0;
-                circle.y = 0;
-                circle.style.backgroundColor = colors[index % colors.length];
+                // Update the position and scale of each circle
+                circle.style.left = x - 12 + "px";
+                circle.style.top = y - 12 + "px";
+                circle.style.scale = (circles.length - index) / circles.length;
+
+                circle.x = x;
+                circle.y = y;
+
+                // Get the next circle in the sequence
+                const nextCircle = circles[index + 1] || circles[0];
+                x += (nextCircle.x - x) * 0.3;
+                y += (nextCircle.y - y) * 0.3;
             });
 
-            // Update the coordinates when the mouse moves
-            window.addEventListener("mousemove", function (e) {
-                coords.x = e.clientX;
-                coords.y = e.clientY;
-            });
-
-            // Animation function to move the circles
-            function animateCircles() {
-                let x = coords.x;
-                let y = coords.y;
-
-                circles.forEach(function (circle, index) {
-                    // Update the position and scale of each circle
-                    circle.style.left = x - 12 + "px";
-                    circle.style.top = y - 12 + "px";
-                    circle.style.scale = (circles.length - index) / circles.length;
-
-                    circle.x = x;
-                    circle.y = y;
-
-                    // Get the next circle in the sequence
-                    const nextCircle = circles[index + 1] || circles[0];
-                    x += (nextCircle.x - x) * 0.3;
-                    y += (nextCircle.y - y) * 0.3;
-                });
-
-                // Repeat the animation
-                requestAnimationFrame(animateCircles);
-            }
+            // Repeat the animation
+            requestAnimationFrame(animateCircles);
+        }
 
-            // Start the animation
-            animateCircles();
-        </script>
-        <script>
-            window.embeddedChatbotConfig = {
-                chatbotId: "X6k1f9B5oxQr2T4-NzVxG",
-                domain: "www.chatbase.co"
-            }
-        </script>
-        <script src="https://www.chatbase.co/embed.min.js" chatbotId="X6k1f9B5oxQr2T4-NzVxG" domain="www.chatbase.co" defer>
-        </script>
+        // Start the animation
+        animateCircles();
+    </script>
+    <script>
+        window.embeddedChatbotConfig = {
+            chatbotId: "X6k1f9B5oxQr2T4-NzVxG",
+            domain: "www.chatbase.co"
+        }
+    </script>
+    <script src="https://www.chatbase.co/embed.min.js" chatbotId="X6k1f9B5oxQr2T4-NzVxG" domain="www.chatbase.co" defer>
+    </script>
 </body>
 
 
 </html>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/signup.html b/signup.html
index a01c1cca..c2676564 100644
--- a/signup.html
+++ b/signup.html
@@ -15,7 +15,7 @@
     <style>
         body {
             font-family: Arial, sans-serif;
-            background-color: #f7f7f7;
+            background-color: #ecbcdb;
             display: flex;
             justify-content: center;
             align-items: center;
@@ -157,7 +157,7 @@
     <div class="header-container">
     
         <div class="header">
-            <p class="lead" style="color: #000;">Design and create stunning visuals effortlessly!</p>
+            <p class="lead" style="color: #e568bfec;">Design and Create stunning visuals effortlessly!!</p>
         </div>
     <div class="row">
         <ul class="nav nav-tabs">
@@ -191,7 +191,7 @@
     </head>
     <body>
         <div id="login" class="form-container mt-5">
-            <h3 class="pb-4">CREATE YOUR ACCOUNT</h3>
+            <h3 class="pb-4" style="color: #33cc33;">CREATE YOUR ACCOUNT</h3>
             <form action="/signup" method="POST" onsubmit="return validatePassword()">
                 <div id="input">
                     <input type="text" name="username" placeholder="Username" required>
diff --git a/src/Styles/signup.css b/src/Styles/signup.css
index 666c5fb5..5db1c1d8 100644
--- a/src/Styles/signup.css
+++ b/src/Styles/signup.css
@@ -5,6 +5,30 @@
     backdrop-filter: blur(10px);
     border-radius: 5%;
 }
+/* Apply this style to your navigation links */
+.nav-link {
+  /* Initial gradient background */
+  background: linear-gradient(90deg, #3f51b5, #e34cb1);
+  padding: 0.5em 1em;
+  color: #dbefe8;
+  text-decoration: none;
+  transition: background-color 0.3s; /* Smooth transition */
+}
+
+/* Hover effect */
+.nav-link:hover {
+  background-color: #e91e63; /* Change to your desired hover color */
+  color: rgb(226, 232, 55);
+  text-shadow: #3f51b5;
+  font-size: large;
+  font-weight: bold;
+}
+
+.welcome-header span{
+    background: linear-gradient(45deg, #f03a55, #9733EE);
+  -webkit-background-clip: text; /* Clip the gradient to the text */
+  color: transparent; /* Make the original text transparent */
+}
 
 h3 {
     margin-top: 1em;
@@ -22,7 +46,10 @@ h3 {
     padding-left: 5px;
     padding-right: 5px;
 }
-
+#input:hover{
+    background-color: white;
+    color: green;
+}
 #input input {
     background: transparent;
     width: 85%;