diff --git a/pages/editor.html b/pages/editor.html
index 64f38f5b..ccbb2daf 100644
--- a/pages/editor.html
+++ b/pages/editor.html
@@ -1,32 +1,47 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Code Editor Layout</title>
     <!-- Bootstrap CSS CDN -->
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" xintegrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
+        xintegrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
     <!-- Bootstrap Icons CDN for checkmark -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
     <!-- Prism.js CSS for syntax highlighting -->
     <link href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet" />
-    
+
     <style>
         /* Custom CSS Variables for the new theme */
         :root {
-            --cc-bg-primary: #000000; /* Black background */
-            --cc-panel-bg: #1a1a1a; /* Dark gray for panels */
-            --cc-text-light: #f8f9fa; /* Light text */
-            --cc-text-secondary: #adb5bd; /* Secondary text */
-            --cc-grabber-bg: #333333; /* Darker grabber */
-            --cc-heading-challenge: #4FC3F7; /* Light blue for challenge heading */
-            --cc-heading-code: #69F0AE; /* Light green for code heading */
-            --cc-heading-output: #FF8A65; /* Light orange for output heading */
-            --cc-code-area-bg: #121212; /* Very dark gray for code/output areas */
-            --cc-btn-primary: #007bff; /* Standard Bootstrap primary blue */
-            --cc-btn-success: #28a745; /* Standard Bootstrap success green */
-            --cc-btn-warning: #ffc107; /* Standard Bootstrap warning yellow */
-            --cc-btn-info: #17a2b8; /* Standard Bootstrap info cyan */
+            --cc-bg-primary: #000000;
+            /* Black background */
+            --cc-panel-bg: #1a1a1a;
+            /* Dark gray for panels */
+            --cc-text-light: #f8f9fa;
+            /* Light text */
+            --cc-text-secondary: #adb5bd;
+            /* Secondary text */
+            --cc-grabber-bg: #333333;
+            /* Darker grabber */
+            --cc-heading-challenge: #4FC3F7;
+            /* Light blue for challenge heading */
+            --cc-heading-code: #69F0AE;
+            /* Light green for code heading */
+            --cc-heading-output: #FF8A65;
+            /* Light orange for output heading */
+            --cc-code-area-bg: #121212;
+            /* Very dark gray for code/output areas */
+            --cc-btn-primary: #007bff;
+            /* Standard Bootstrap primary blue */
+            --cc-btn-success: #28a745;
+            /* Standard Bootstrap success green */
+            --cc-btn-warning: #ffc107;
+            /* Standard Bootstrap warning yellow */
+            --cc-btn-info: #17a2b8;
+            /* Standard Bootstrap info cyan */
         }
 
         /* Apply custom variables */
@@ -34,86 +49,118 @@
             background-color: var(--cc-bg-primary);
             color: var(--cc-text-light);
             font-family: "Inter", sans-serif;
-            overflow: hidden; /* Prevent body scroll due to resizing */
+            overflow: hidden;
+            /* Prevent body scroll due to resizing */
         }
-        a{
-          text-decoration: none;
-          color:white
+
+        a {
+            text-decoration: none;
+            color: white
         }
-        .grid-container { /* Updated: Grid layout to adjust the alignment of the buttons */
+
+        .grid-container {
+            /* Updated: Grid layout to adjust the alignment of the buttons */
             display: grid;
             /* Updated: Horizontal split with three columns */
             grid-template-rows: 1fr;
-            grid-template-columns: 1fr 8px 2fr 8px 1fr; /* Columns for panels and grabbers */
-            height: calc(100vh - 80px); /* Full height minus header */
+            grid-template-columns: 1fr 8px 2fr 8px 1fr;
+            /* Columns for panels and grabbers */
+            height: calc(100vh - 80px);
+            /* Full height minus header */
             width: 100vw;
-            overflow: hidden; /* Prevent content overflow during resize */
-            padding-top: 0.5rem; /* Add small top padding */
+            overflow: hidden;
+            /* Prevent content overflow during resize */
+            padding-top: 0.5rem;
+            /* Add small top padding */
         }
 
         .panel {
-            overflow:scroll; /* Allow content to scroll within panels */
+            overflow: scroll;
+            /* Allow content to scroll within panels */
             padding: 1rem;
             display: flex;
             flex-direction: column;
-            border-radius: 0.5rem; /* Rounded corners for panels */
-            background-color: var(--cc-panel-bg); /* Custom panel background */
-            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5) !important; /* Darker shadow */
+            border-radius: 0.5rem;
+            /* Rounded corners for panels */
+            background-color: var(--cc-panel-bg);
+            /* Custom panel background */
+            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5) !important;
+            /* Darker shadow */
         }
 
         .grabber {
             /* Updated: Vertical grabbers for horizontal resizing */
             width: 8px;
             height: 100%;
-            cursor: ew-resize; /* East-west resize cursor */
-            background-color: var(--cc-grabber-bg); /* Custom grabber background */
-            z-index: 10; /* Ensure grabbers are above panel content */
+            cursor: ew-resize;
+            /* East-west resize cursor */
+            background-color: var(--cc-grabber-bg);
+            /* Custom grabber background */
+            z-index: 10;
+            /* Ensure grabbers are above panel content */
             transition: background-color 0.2s ease;
-            border-radius: 0.25rem; /* Slightly rounded grabbers */
+            border-radius: 0.25rem;
+            /* Slightly rounded grabbers */
         }
 
         .grabber:hover {
-            background-color: #a0aec0; /* Lighter gray on hover (can be adjusted) */
+            background-color: #a0aec0;
+            /* Lighter gray on hover (can be adjusted) */
         }
 
         /* Specific text colors for headings */
-        .text-challenge-heading { color: var(--cc-heading-challenge) !important; }
-        .text-code-heading { color: var(--cc-heading-code) !important; }
-        .text-output-heading { color: var(--cc-heading-output) !important; }
+        .text-challenge-heading {
+            color: var(--cc-heading-challenge) !important;
+        }
+
+        .text-code-heading {
+            color: var(--cc-heading-code) !important;
+        }
+
+        .text-output-heading {
+            color: var(--cc-heading-output) !important;
+        }
 
         /* Code editor and output area background */
-        #code-editor, #output-area {
+        #code-editor,
+        #output-area {
             background-color: var(--cc-code-area-bg) !important;
-            color: var(--cc-text-light) !important; /* Ensure text is light */
-            border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle border */
+            color: var(--cc-text-light) !important;
+            /* Ensure text is light */
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            /* Subtle border */
         }
 
         /* Adjust Bootstrap button styles for the dark theme */
         .btn-custom-blue {
-            background-color: #007bff; /* A shade of blue similar to the image's button */
+            background-color: #007bff;
+            /* A shade of blue similar to the image's button */
             border-color: #007bff;
             color: white;
             transition: background-color 0.2s ease, border-color 0.2s ease;
             padding-bottom: 10px;
         }
+
         .btn-custom-blue:hover {
             background-color: #0056b3;
             border-color: #0056b3;
         }
 
         .btn-custom-orange {
-            background-color: #fd7e14; /* A shade of orange */
+            background-color: #fd7e14;
+            /* A shade of orange */
             border-color: #fd7e14;
             color: white;
             transition: background-color 0.2s ease, border-color 0.2s ease;
         }
+
         .btn-custom-orange:hover {
             background-color: #e66a00;
             border-color: #e66a00;
         }
-        
     </style>
 </head>
+
 <body class="bg-dark text-light">
     <header style="background: #1a1a1a; padding: 1rem 0; border-bottom: 1px solid #333;">
         <div class="container-fluid">
@@ -121,31 +168,69 @@
                 <div style="display: flex; align-items: center; gap: 2rem;">
                     <div style="font-size: 1.5rem; font-weight: 700; color: #4FC3F7;">CodeClip</div>
                     <nav style="display: flex; gap: 1.5rem;">
-                        <a href="/CodeClip"  style="color: #f8f9fa; text-decoration: none; padding: 0.5rem 1rem; border-radius: 0.5rem; transition: background 0.2s;">Home</a>
-                        <a href="/CodeClip/pages/challenges.html"  style="color: #f8f9fa; text-decoration: none; padding: 0.5rem 1rem; border-radius: 0.5rem; transition: background 0.2s;">Challenges</a>
-                        <a href="/CodeClip/pages/editor.html"  style="color: #4FC3F7; text-decoration: none; padding: 0.5rem 1rem; border-radius: 0.5rem; background: rgba(79, 195, 247, 0.1);">Editor</a>
-                        <a href="/CodeClip/pages/profile.html"  style="color: #f8f9fa; text-decoration: none; padding: 0.5rem 1rem; border-radius: 0.5rem; transition: background 0.2s;">Profile</a>
+                        <a href="/CodeClip"
+                            style="color: #f8f9fa; text-decoration: none; padding: 0.5rem 1rem; border-radius: 0.5rem; transition: background 0.2s;">Home</a>
+                        <a href="/CodeClip/pages/challenges.html"
+                            style="color: #f8f9fa; text-decoration: none; padding: 0.5rem 1rem; border-radius: 0.5rem; transition: background 0.2s;">Challenges</a>
+                        <a href="/CodeClip/pages/editor.html"
+                            style="color: #4FC3F7; text-decoration: none; padding: 0.5rem 1rem; border-radius: 0.5rem; background: rgba(79, 195, 247, 0.1);">Editor</a>
+                        <a href="/CodeClip/pages/profile.html"
+                            style="color: #f8f9fa; text-decoration: none; padding: 0.5rem 1rem; border-radius: 0.5rem; transition: background 0.2s;">Profile</a>
                     </nav>
                 </div>
                 <div>
-                    <button class="btn btn-outline-light btn-sm">Save Code</button>
+                    <button id="saveCodeBtn" class="btn btn-outline-light btn-sm">Save Code</button>
+                </div>
+                <div id="saveMessage" style="display: none;" class="alert-box">
+                    ✅ Code saved successfully!
+                </div>
+
+                <div id="feedbackModal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%;
+                      background:rgba(0,0,0,0.5); z-index:1000; justify-content:center; align-items:center;">
+
+                    <div
+                        style="background:#fff; padding:20px; border-radius:8px; max-width:400px; width:90%; text-align:center;">
+                        <h4 style="margin-bottom:10px; color:black;">Enjoying the experience?</h4>
+                        <p style="margin-bottom:10px; color:black;">Please rate us</p>
+
+                        <div id="starRating"
+                            style="font-size: 24px; margin-bottom:10px; cursor:pointer; color: lightgray;">
+                            <span class="star" data-value="1">&#9733;</span>
+                            <span class="star" data-value="2">&#9733;</span>
+                            <span class="star" data-value="3">&#9733;</span>
+                            <span class="star" data-value="4">&#9733;</span>
+                            <span class="star" data-value="5">&#9733;</span>
+                        </div>
+
+                        <p style="margin-bottom:10px; color:black;">Leave your feedback below:</p>
+
+                        <textarea placeholder="Your feedback..." id="feedbackInput"
+                            style="width:100%; height:80px; resize:none;"></textarea><br><br>
+                        <button id="submitFeedback" class="feedback-btn submit-btn">Submit</button>
+                        <button id="cancelFeedback" class="feedback-btn cancel-btn"
+                            style="margin-left:10px;">Cancel</button>
+                    </div>
                 </div>
             </div>
         </div>
     </header>
 
     <div id="grid-container" class="grid-container">
-      
+
         <!-- Left Panel: Challenge Description -->
-        <div id="left-panel" class="panel m-2">  <!-- Changed margins to fix allignment -->
+        <div id="left-panel" class="panel m-2"> <!-- Changed margins to fix allignment -->
             <h2 class="h4 mb-3 text-challenge-heading">Challenge Description</h2>
             <div class="text-secondary flex-grow-1">
-                <p>Welcome to the coding challenge! Your task is to implement a function that reverses a given string. Consider edge cases such as empty strings or strings with special characters.</p>
+                <p>Welcome to the coding challenge! Your task is to implement a function that reverses a given string.
+                    Consider edge cases such as empty strings or strings with special characters.</p>
                 <h3 class="h5 mt-4 text-primary">Requirements:</h3>
                 <ul class="list-unstyled ms-4">
-                    <li><i class="bi bi-check-circle-fill text-success me-2"></i>The function should accept one argument: a string.</li>
-                    <li><i class="bi bi-check-circle-fill text-success me-2"></i>It should return the reversed string.</li>
-                    <li><i class="bi bi-check-circle-fill text-success me-2"></i>The solution must be efficient (e.g., O(n) time complexity).</li>
+                    <li><i class="bi bi-check-circle-fill text-success me-2"></i>The function should accept one
+                        argument: a string.</li>
+                    <li><i class="bi bi-check-circle-fill text-success me-2"></i>It should return the reversed string.
+                    </li>
+                    <li><i class="bi bi-check-circle-fill text-success me-2"></i>The solution must be efficient (e.g.,
+                        O(n) time complexity).</li>
                 </ul>
                 <h3 class="h5 mt-4 text-primary">Example:</h3>
                 <pre class="bg-dark p-3 rounded text-light-emphasis"><code>
@@ -164,7 +249,7 @@ <h3 class="h5 mt-4 text-primary">Example:</h3>
         <div id="grabber-1" class="grabber"></div>
 
         <!-- Center Panel: Code Editor -->
-        <div id="center-panel" class="panel m-2"> <!-- Changed margins to fix allignment -->
+        <div id="center-panel" class="panel m-2">
             <h2 class="h4 mb-1 text-code-heading">Code Editor</h2>
             <pre id="code-editor" class="bg-dark p-3 rounded flex-grow-1 overflow-auto "><code class="language-javascript" contenteditable="true">
 function reverseString(str) {
@@ -176,8 +261,133 @@ <h2 class="h4 mb-1 text-code-heading">Code Editor</h2>
             <button class="btn btn-custom-blue mt-2 px-4 py-2 rounded shadow">
                 Run Code
             </button>
+
+
         </div>
+        <style>
+            #starRating .star {
+                transition: color 0.2s;
+            }
+
+            #starRating .star.hover,
+            #starRating .star.selected {
+                color: gold;
+            }
+
+            .feedback-btn {
+                padding: 8px 16px;
+                color: black;
+                border: none;
+                border-radius: 4px;
+                cursor: pointer;
+                outline: none;
+                transition: background-color 0.3s ease;
+            }
+
+            /* Submit button */
+            .submit-btn {
+                background-color: #28a745;
+            }
 
+            .submit-btn:hover {
+                background-color: #218838;
+            }
+
+
+            .cancel-btn {
+                background-color: #dc3545;
+                margin-left: 10px;
+            }
+
+            .cancel-btn:hover {
+                background-color: #c82333;
+            }
+
+            .alert-box {
+                margin-top: 10px;
+                padding: 10px 15px;
+                background-color: #d8b4f8;
+                /* Light purple */
+                color: #3a0ca3;
+                border-radius: 5px;
+                font-weight: 500;
+                animation: fadeOut 3s forwards;
+            }
+
+            @keyframes fadeOut {
+                0% {
+                    opacity: 1;
+                }
+
+                80% {
+                    opacity: 1;
+                }
+
+                100% {
+                    opacity: 0;
+                    display: none;
+                }
+            }
+        </style>
+        <script>
+            const saveCodeBtn = document.getElementById("saveCodeBtn");
+            const feedbackModal = document.getElementById("feedbackModal");
+            const submitBtn = document.getElementById("submitFeedback");
+            const cancelBtn = document.getElementById("cancelFeedback");
+            const saveMsg = document.getElementById('saveMessage');
+
+            saveCodeBtn.addEventListener("click", () => {
+                feedbackModal.style.display = "flex";
+                saveMsg.style.display = 'block';
+                 setTimeout(() => {
+                    saveMsg.style.display = 'none';
+                }, 3000);
+            });
+
+            submitBtn.addEventListener("click", () => {
+                const feedback = document.getElementById("feedbackInput").value;
+                console.log("User feedback:", feedback);
+
+                feedbackModal.style.display = "none";
+            });
+
+            cancelBtn.addEventListener("click", () => {
+                feedbackModal.style.display = "none";
+            });
+
+
+            const stars = document.querySelectorAll("#starRating .star");
+            let selectedRating = 0;
+
+            stars.forEach((star, index) => {
+                // Hover effect
+                star.addEventListener("mouseover", () => {
+                    highlightStars(index);
+                });
+
+                star.addEventListener("mouseout", () => {
+                    highlightStars(selectedRating - 1);
+                });
+
+                // Click to select rating
+                star.addEventListener("click", () => {
+                    selectedRating = index + 1;
+                    highlightStars(index);
+                    console.log("Selected rating:", selectedRating);
+                });
+            });
+
+            function highlightStars(index) {
+                stars.forEach((star, i) => {
+                    if (i <= index) {
+                        star.classList.add("selected");
+                    } else {
+                        star.classList.remove("selected");
+                    }
+                });
+            }
+
+        </script>
         <!-- Grabber between center and right panels -->
         <div id="grabber-2" class="grabber"></div>
 
@@ -205,7 +415,9 @@ <h2 class="h4 mb-3 text-output-heading">Output / Test Results</h2>
     </div>
 
     <!-- Bootstrap JS CDN (optional, for components that need JS) -->
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" xintegrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
+        xintegrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
+        crossorigin="anonymous"></script>
     <script>
         document.addEventListener('DOMContentLoaded', () => {
             const gridContainer = document.getElementById('grid-container');
@@ -289,4 +501,5 @@ <h2 class="h4 mb-3 text-output-heading">Output / Test Results</h2>
     <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-javascript.min.js"></script>
 
 </body>
-</html>
+
+</html>
\ No newline at end of file
