diff --git a/templates/contributors.html b/templates/contributors.html
index f88e889..5fb5300 100644
--- a/templates/contributors.html
+++ b/templates/contributors.html
@@ -22,7 +22,7 @@
 </head>
 
 <body>
-    <a href="../index.html" class="homeBtn">
+    <a href="index.html" class="homeBtn">
         <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home" viewBox="0 0 25 24">
             <path d="M3 9L12 2l9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9z"/>
             <polyline points="9 22 9 12 15 12 15 22"/>
diff --git a/templates/feedback.html b/templates/feedback.html
new file mode 100644
index 0000000..970fc38
--- /dev/null
+++ b/templates/feedback.html
@@ -0,0 +1,195 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Feedback</title>
+    <link rel="stylesheet" href="styles.css"> <!-- Link to your CSS file -->
+
+    <style>
+
+        .feedback-page{
+
+        background:  #ea1515;
+
+        }       
+
+        /* Basic styles for the feedback box */
+        .feedback-box {
+
+            max-width: 600px;
+            height: 470px;
+            margin: 50px auto;
+            padding: 20px;
+            border: 1px solid #ccc;
+            border-radius: 10px;
+            background-color: #042405;
+
+        }
+
+            .star-rating {
+
+            display: flex;
+            justify-content: center;
+            margin-top: 10px;
+            flex-direction: row-reverse;
+            font-size: 70px;
+
+        }
+
+        .star-rating input {
+
+            display: none; /* Hide the radio buttons */
+
+        }
+
+        .star-rating label {
+
+            color: #026a06; /* Default star color */
+            cursor: pointer;
+
+        }
+
+        .star-rating input:checked ~ label {
+
+            color: #5cd961; /* Color for selected stars */
+
+        }
+
+        .star-rating label:hover,
+        .star-rating label:hover ~ label {
+
+            color: #5cd961; /* Hover effect */
+
+        }
+
+        .feed-msg {
+
+            font-size: 20px;
+            width: 100%;
+            height: 200px;
+            width: 580px;
+            padding: 10px;
+            margin-top: 10px;
+            border-radius: 5px;
+            border: 1px solid #ccc;
+            background: #c5f1db;
+
+        }
+
+        button {
+
+         padding: 10px 20px;
+         background-color: #4caf50;
+         color: white;
+         border: none;
+         cursor: pointer;
+         font-size: 16px;
+         transition: background-color 0.3s;
+         margin-left: 220px;
+         margin-top: 50px;
+
+        }
+
+    </style>
+
+</head>
+
+<body style="
+    background: #c5f1db;
+">
+
+    <header>
+
+        <h1 style="
+            /* align-items: center; */
+            text-align: center;
+            ">Feedback Page</h1>
+
+    </header>
+
+    <main>
+
+        <div class="feedback-box">
+            <form id="feedback-form" action="#" method="post">
+                <div class="star-rating" aria-label="Rating" role="radiogroup">
+                    <input type="radio" id="star5" name="rating" value="5">
+                    <label for="star5" title="5 stars">★</label>
+                    <input type="radio" id="star4" name="rating" value="4">
+                    <label for="star4" title="4 stars">★</label>
+                    <input type="radio" id="star3" name="rating" value="3">
+                    <label for="star3" title="3 stars">★</label>
+                    <input type="radio" id="star2" name="rating" value="2">
+                    <label for="star2" title="2 stars">★</label>
+                    <input type="radio" id="star1" name="rating" value="1">
+                    <label for="star1" title="1 star">★</label>
+                </div>
+
+                <textarea class="feed-msg" rows="7" cols="45" placeholder="Your Comments . . ." required></textarea><br>
+                <div class="feed-btn">
+                    <button style="border-radius: 10px;" type="submit">Submit Feedback</button>
+                </div>
+            </form>
+
+        </div>
+
+    </main>
+
+    <script>
+
+        document.getElementById('feedback-form').addEventListener('submit', function(event) {
+            event.preventDefault();
+            alert('Thank you for your feedback!');
+            // You can add more functionality here
+        });
+
+    </script>
+
+<script>
+    const coords = { x: 0, y: 0 };
+    const circles = document.querySelectorAll(".circle");
+
+
+    // Assign initial colors to the circles
+    circles.forEach(function (circle) {
+        circle.x = 0;
+        circle.y = 0;
+
+    });
+
+    window.addEventListener("mousemove", function (e) {
+        coords.x = e.clientX;
+        coords.y = e.clientY;
+
+    });
+
+    function animateCircles() {
+        let x = coords.x;
+        let y = coords.y;
+
+        circles.forEach(function (circle, index) {
+            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;
+
+            const nextCircle = circles[index + 1] || circles[0];
+            x += (nextCircle.x - x) * 0.3;
+            y += (nextCircle.y - y) * 0.3;
+        });
+
+        requestAnimationFrame(animateCircles);
+    }
+
+    animateCircles();
+
+</script>
+
+</body>
+
+</html>
+
+
diff --git a/templates/index.html b/templates/index.html
index a22688f..d8d06cc 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -6,6 +6,8 @@
     <title>NexTrade</title>
     <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link rel="stylesheet" href="styles.css"> <!-- Link to your CSS file -->
+
     <style>
         body {
             font-family: Arial, sans-serif;
@@ -364,8 +366,11 @@ <h2>Buy Stock</h2>
       
       <br>
       <footer class="footer">
+        <a href='feedback.html'>Feedback</a>
         <span id="copyright"></span> | 
         <a href="terms.html" target="_blank">Terms of Service</a>
+        <span id="copyright"></span> | 
+        <a href="./contributors.html" id="ourvisionlink">Our Contributors</a>
     </footer>
 
     
@@ -708,8 +713,6 @@ <h2>Buy Stock</h2>
         <script src="./assets/css/visitors.css"></script>
         <script src="visi.js"></script>
 
- contribute
-        <a href="./contributors.html" id="ourvisionlink">Our Contributors</a>
 
 </body>
 </html>
diff --git a/templates/styles.css b/templates/styles.css
new file mode 100644
index 0000000..b76bfe8
--- /dev/null
+++ b/templates/styles.css
@@ -0,0 +1,54 @@
+#nextLevelMessage {
+
+    display: none;
+    position: absolute;
+    top: 40%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 28px;
+    font-weight: bold;
+    color: white;
+    background-color: rgba(0, 0, 0, 0.7);
+    padding: 15px 20px;
+    border-radius: 10px;
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
+    text-align: center;
+    z-index: 1000; /* Make sure it's above other elements */
+
+}
+
+.hidden {
+
+    display: none;
+
+}
+
+FeedbackPage
+.feedback-button {
+
+    position: fixed; /* Fixes the button in place */
+    bottom: 20px; /* Distance from the bottom */
+    left: 20px; /* Distance from the left */
+    padding: 10px 15px; /* Add some padding */
+    border-radius: 10px; /* Rounded corners */
+    background-color: #f39c12; /* Button color */
+    color: white; /* Text color */
+    border: none; /* No border */
+    cursor: pointer; /* Pointer cursor on hover */
+    z-index: 1000; /* Ensure it's above other elements */
+    margin-left: 300px
+
+}
+
+.feedback-button:hover {
+
+    background-color: #e67e22; /* Darker shade on hover */
+
+}
+
+.feedback-page{
+
+    background:  #000000;
+
+}
+
