diff --git a/bin.png b/bin.png
new file mode 100644
index 0000000..81e7c49
Binary files /dev/null and b/bin.png differ
diff --git a/public/js/script.js b/public/js/script.js
index 27b014c..9fea1f5 100644
--- a/public/js/script.js
+++ b/public/js/script.js
@@ -227,6 +227,7 @@ document.addEventListener("DOMContentLoaded", function () {
     }
 
     function deleteOption(span) {
+        console.log("Yash");
         const optionDiv = span.parentElement;
         optionDiv.remove();
         updateAddButtonPosition();
@@ -247,7 +248,7 @@ document.addEventListener("DOMContentLoaded", function () {
         newQuestionDiv.className = "question";
         newQuestionDiv.innerHTML = `
           <div class="question mb-4 p-3 border rounded bg-white">
-                <select class="form-control question_type mb-3" onchange="changeQuestionType(this)">
+                <select class="form-control question_type mb-1" onchange="changeQuestionType(this)">
                     <option value="">Select Question Type</option>
                     <option value="multiple_choice">Multiple Choice</option>
                     <option value="checkbox">Checkbox</option>
@@ -255,16 +256,16 @@ document.addEventListener("DOMContentLoaded", function () {
                 </select>
                 <input type="text" name="question" class="form-control question-input mb-3" placeholder="Type your question here" />
                 <div class="options-container mb-3">
-                    <div class="option d-flex align-items-center mb-2">
+                    <div class="option d-flex align-items-center">
                         <input type="text" name="option" class="form-control option-input" placeholder="Option 1" />
                         <span class="delete-option ml-2 text-danger" onclick="deleteOption(this)" style="cursor: pointer;">&#10005;</span>
                     </div>
                 </div>
-                <button class="btn btn-secondary mb-2" onclick="addOption(this)">
+                <button class="btn btn-secondary" onclick="addOption(this)">
                     Add Option
                 </button>
-                <button class="btn btn-outline-danger btn-sm" id="moveUpButton" onclick="deleteQuestion(this);">
-                    <img src="public/images/bin.png" alt="" width="20px" height="20px" />
+                <button class="btn btn-md" id="moveUpButton" onclick="deleteQuestion(this);">
+                    <img src="/images/bin.png" alt="" width="20px" height="20px" />
                 </button>
             </div>
         `;
@@ -277,29 +278,36 @@ document.addEventListener("DOMContentLoaded", function () {
         let questionContainer = element.closest(".question");
         if (questionContainer) {
             questionContainer.remove();
+            questionCount--;
             updateAddButtonPosition();
         }
     }
 
     function updateAddButtonPosition() {
         const questions = questionsSection.querySelectorAll(".question");
-        const lastQuestion = questions[questions.length - 1];
+    const sidebar = document.getElementById("moveableDiv");
 
-        if (lastQuestion) {
-            const selectQuestionType = lastQuestion.querySelector(".question_type");
-            if (selectQuestionType) {
-                const sidebar = document.getElementById("moveableDiv");
-                const offset = selectQuestionType.offsetTop - sidebar.offsetHeight;
-                sidebar.style.transform = `translateY(${offset}px)`;
-                console.log(`Moving sidebar to: ${offset}px`);
-            } else {
-                console.warn("No .question_type found in last question.");
-            }
+    if (questions.length > 0) {
+        const lastQuestion = questions[questions.length - 1];
+        const offsetTop = lastQuestion.offsetTop;
+        const sidebarHeight = sidebar.offsetHeight;
+        const containerHeight = questionsSection.offsetHeight;
+
+        // Calculate the position of the last question relative to the top of the container
+        const newPosition = offsetTop + lastQuestion.offsetHeight;
+
+        // Ensure the sidebar stays within the bounds of the container
+        if (newPosition + sidebarHeight <= containerHeight) {
+            sidebar.style.transform = `translateY(${newPosition}px)`;
+            console.log(`Moving sidebar to: ${newPosition}px`);
         } else {
-            const sidebar = document.getElementById("moveableDiv");
-            sidebar.style.transform = `translateY(0px)`;
-            console.log(`Moving sidebar to: 0px`);
+            sidebar.style.transform = `translateY(${containerHeight - sidebarHeight}px)`;
+            console.log(`Moving sidebar to bottom of container`);
         }
+    } else {
+        sidebar.style.transform = `translateY(0px)`;
+        console.log("No questions, moving sidebar to top");
+    }
     }
 
     function saveForm() {
@@ -369,6 +377,7 @@ document.addEventListener("DOMContentLoaded", function () {
     window.addNewQuestion = addNewQuestion;
     window.deleteQuestion = deleteQuestion;
     window.addOption = addOption;
+    window.deleteOption = deleteOption;
     window.changeQuestionType = changeQuestionType;
     window.saveForm = saveForm;
 
diff --git a/resources/views/forms/create.blade.php b/resources/views/forms/create.blade.php
index e26974a..263b814 100644
--- a/resources/views/forms/create.blade.php
+++ b/resources/views/forms/create.blade.php
@@ -54,18 +54,18 @@
             </ul>
         </div>
     </div>
-    <div class="question_form bg-light p-4 rounded shadow-sm">
+    <div style="background-color: #f0ebf8; max-width: 100%" class="question_form p-4 rounded">
         <div class="section">
-            <div class="question_title_section mb-4">
+            <div class="question_title_section mb-1">
                 <div class="question_form_top">
-                    <input type="text" id="form-title" name="title" class="form-control form-control-lg mb-2" placeholder="Untitled Form" />
+                    <input type="text" id="form-title" name="title" class="form-control form-control-lg p-2 mb-2" placeholder="Untitled Form" />
                     <input type="text" name="description" id="form-description" class="form-control form-control-sm" placeholder="Form Description" />
                 </div>
             </div>
         </div>
         <div class="section" id="questions_section">
             <div class="question mb-4 p-3 border rounded bg-white">
-                <select class="form-control question_type mb-3" onchange="changeQuestionType(this)">
+                <select class="form-control question_type mb-1" onchange="changeQuestionType(this)">
                     <option value="">Select Question Type</option>
                     <option value="multiple_choice">Multiple Choice</option>
                     <option value="checkbox">Checkbox</option>
@@ -73,15 +73,15 @@
                 </select>
                 <input type="text" name="question" class="form-control question-input mb-3" placeholder="Type your question here" />
                 <div class="options-container mb-3">
-                    <div class="option d-flex align-items-center mb-2">
+                    <div class="option d-flex align-items-center">
                         <input type="text" name="option" class="form-control option-input" placeholder="Option 1" />
                         <span class="delete-option ml-2 text-danger" onclick="deleteOption(this)" style="cursor: pointer;">&#10005;</span>
                     </div>
                 </div>
-                <button class="btn btn-secondary mb-2" onclick="addOption(this)">
+                <button class="btn btn-secondary" onclick="addOption(this)">
                     Add Option
                 </button>
-                <button class="btn btn-outline-danger btn-sm" id="moveUpButton" onclick="deleteQuestion(this);">
+                <button class="btn btn-md" id="moveUpButton" onclick="deleteQuestion(this);">
                     <img src="{{ asset('images/bin.png') }}" alt="" width="20px" height="20px" />
                 </button>
             </div>
diff --git a/resources/views/forms/edit.blade.php b/resources/views/forms/edit.blade.php
index 8d781f9..a3fb83e 100644
--- a/resources/views/forms/edit.blade.php
+++ b/resources/views/forms/edit.blade.php
@@ -21,43 +21,43 @@
 </head>
 
 <body class="bg-light">
-    <div class="form_header shadow-md px-6 py-4 flex justify-between items-center" style="padding: 20px;">
-        <div class="form_header_left">
-            <img src={{ asset('images/google-form.png') }} class="form_header_icon" height="45px" width="40px" />
-            <input type="text" name="title" id="form-title-nav" placeholder="Untitled Form" class="form_name" />
-            <img src={{ asset('images/folder.png') }} alt="" class="form_header_icon" height="20px"
-                width="20px" />
-            <img src={{ asset('images/star.svg') }} alt="" class="form_header_icon" />
+    <nav class="bg-white p-1 shadow-md">
+        <div class="container mx-auto flex justify-between items-center">
+            <span style="color: rgb(103,58,183)" class="text-3xl font-bold font-sans"><a href="{{ url('/') }}" style="color: rgb(103,58,183)"
+                class="text-3xl font-bold font-sans">LaraForms</a> - Edit</span>
+            <div class="relative dropdown">
+                <button id="profileMenuButton" class="flex items-center focus:outline-none">
+                    <img src="{{ asset('images/user.png') }}" alt="Profile"
+                        class="w-10 h-10 rounded-full border-2 border-white">
+                </button>
+                <div id="profileMenu"
+                    class="dropdown-menu hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-2">
+                    <form method="POST" action="{{ route('logout') }}">
+                        @csrf
+                        <button type="submit" class="block px-4 py-2 text-gray-700 hover:bg-gray-200 w-full text-left">
+                            Logout
+                        </button>
+                    </form>
+                </div>
+            </div>
         </div>
-        <div class="form_header_right">
-            <span><img src={{ asset('images/palette-svgrepo-com.svg') }} alt="pallette" height="20px"
-                    width="20px" /></span>
-            <span><img src={{ asset('images/view.png') }} alt="eye" height="20px" width="20px"
-                onclick="previewForm()" /></span>
-            <span><img src={{ asset('images/undo.png') }} alt="" height="20px" width="20px" /></span>
-            <span><img src={{ asset('images/forward.png') }} alt="" height="20px" width="20px" /></span>
-            <button class="btn">Send</button>
-            <span><img src={{ asset('images/menu.png') }} alt="menu" height="30px" width="30px" /></span>
-            <span><img src={{ asset('images/user.png') }} alt="" height="30px" width="30px" /></span>
-        </div>
-    </div>
-
+    </nav>
 
     <div style="max-width: 700px" class="container">
         <form id="edit-form" method="POST" action="{{ route('forms.update', $form) }}" class="bg-white p-4 rounded shadow-sm">
             @csrf
             @method('PUT')
             <div class="form-group">
-                <input type="text" id="form-title" name="title" class="form-control form-control-lg mb-2" placeholder="Untitled Form" value="{{ $form->title }}" />
+                <input type="text" id="form-title" name="title" class="form-control form-control-lg text-black" placeholder="Untitled Form" value="{{ $form->title }}" />
             </div>
             <div class="form-group">
-                <input type="text" name="description" id="form-description" class="form-control form-control-sm" placeholder="Form Description" value="{{ $form->description }}" />
+                <input type="text" name="description" id="form-description" class="form-control form-control-sm text-black" placeholder="Form Description" value="{{ $form->description }}" />
             </div>
             <div id="questions-section">
                 @foreach ($questions as $index => $question)
                     <div class="question mb-4 p-3 border rounded bg-light" data-index="{{ $index }}">
                         <div class="form-group">
-                            <label for="question-type-{{ $index }}">Question Type</label>
+                            {{-- <label for="question-type-{{ $index }}">Question Type</label> --}}
                             <select class="form-control question-type" id="question-type-{{ $index }}" name="questions[{{ $index }}][type]">
                                 <option value="multiple_choice" {{ $question->type === 'multiple_choice' ? 'selected' : '' }}>Multiple Choice</option>
                                 <option value="checkbox" {{ $question->type === 'checkbox' ? 'selected' : '' }}>Checkbox</option>
@@ -65,7 +65,7 @@
                             </select>
                         </div>
                         <div class="form-group">
-                            <label for="question-text-{{ $index }}">Question Text</label>
+                            {{-- <label for="question-text-{{ $index }}">Question Text</label> --}}
                             <input type="text" id="question-text-{{ $index }}" name="questions[{{ $index }}][text]" class="form-control question-input" value="{{ $question->question_text }}" required>
                         </div>
                         <div class="form-group options-container">
diff --git a/resources/views/responses/viewResponses.blade.php b/resources/views/responses/viewResponses.blade.php
index eb4a537..24ac7e9 100644
--- a/resources/views/responses/viewResponses.blade.php
+++ b/resources/views/responses/viewResponses.blade.php
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="{{ asset('css/index.css') }}">
 </head>
 
-<body style="background-color: #f0ebf8" class="font-roboto text-gray-800">
+<body style="background-color: rgb(253, 251, 251)" class="font-roboto text-gray-800">
 
     <!-- Header -->
     <div class="bg-white shadow-md px-6 py-4 flex justify-between items-center">
@@ -55,16 +55,16 @@
         @else
         <div class="overflow-x-auto">
             <table class="min-w-full bg-white shadow-md rounded-lg overflow-hidden">
-                <thead class="bg-gray-200 text-gray-600 text-sm leading-normal">
+                <thead class="bg-gray-200 text-black text-sm leading-normal">
                     <tr>
                         <th class="py-3 px-6 text-left">User</th>
                         <th class="py-3 px-6 text-left">Submitted At</th>
                         <th class="py-3 px-6 text-left">Actions</th>
                     </tr>
                 </thead>
-                <tbody class="text-gray-600 text-sm font-light">
+                <tbody class="text-black text-sm font-light">
                     @foreach ($responses as $responseGroup)
-                    <tr class="border-b border-gray-200 hover:bg-gray-100">
+                    <tr class="border-b border-gray-200 text-gray-700   hover:bg-gray-100">
                         <td class="py-3 px-6 text-left">
                             {{ $responseGroup->first()->user->name ?? 'Anonymous' }}
                         </td>
@@ -74,7 +74,7 @@
                         <td class="py-3 px-6 text-left">
                             <a href="{{ route('responses.viewResponse', ['form' => $form, 'responseId' => $responseGroup->first()->response_id]) }}"
                                 target="_blank"
-                                class="text-blue-600 hover:text-blue-700 focus:outline-none">View Response</a>
+                                class="text-blue-600 hover:text-blue-700 hover:underline focus:outline-none">View Response</a>
                         </td>
                     </tr>
                     @endforeach