diff --git a/application/config/routes.php b/application/config/routes.php
index 92e526a..fc85526 100644
--- a/application/config/routes.php
+++ b/application/config/routes.php
@@ -21,4 +21,9 @@ $route['edit/(:num)'] = 'Form_controller/edit_form/$1';
 
 $route['form_preview/(:num)'] = 'forms/preview_back/$1';
 $route['responses/(:num)'] = 'Response_submit/view_responses/$1';
-$route['designform'] = 'homepage/design_form';
+$route['designform/(:num)'] = 'homepage/design_form/$1';
+$route['response_preview/(:num)'] = 'forms/response_preview/$1';
+
+$route['title'] = 'homepage/title';
+
+// $route['designform'] = 'homepage/design_form';
diff --git a/application/controllers/Form.php b/application/controllers/Form.php
index 5077544..67d5edd 100644
--- a/application/controllers/Form.php
+++ b/application/controllers/Form.php
@@ -23,4 +23,14 @@ class Form extends CI_Controller {
 
         echo json_encode($response);
     }
+
+    public function view($form_id) {
+        $data['title'] = $this->Form_model->get_form_title($form_id);
+
+        if ($data['title'] === null) {
+            show_404(); // Show 404 if form_id is invalid
+        }
+
+		$this->load->view('templates/forms_ui',$data);
+    }
 }
\ No newline at end of file
diff --git a/application/controllers/Forms.php b/application/controllers/Forms.php
index d916740..4624c24 100644
--- a/application/controllers/Forms.php
+++ b/application/controllers/Forms.php
@@ -38,7 +38,7 @@ class Forms extends CI_Controller
         {
             if (!$this->session->userdata('logged_in')) {
                 // If not logged in, redirect to login page
-                redirect('users/login');
+                redirect('users/login/'.$form_id);
             }
         
             // Load the model that handles the form data
diff --git a/application/controllers/Home.php b/application/controllers/Homepage.php
similarity index 100%
rename from application/controllers/Home.php
rename to application/controllers/Homepage.php
diff --git a/application/controllers/New_form.php b/application/controllers/New_form.php
index 0d12807..4099bcc 100644
--- a/application/controllers/New_form.php
+++ b/application/controllers/New_form.php
@@ -1,36 +1,29 @@
 <?php
 class New_form extends CI_Controller
 {
-    public function create_form()
-    {
+    public function create_form() {
         if (!$this->session->userdata('logged_in')) {
             // If not logged in, redirect to login page
             redirect('users/login');
         }
+    
         $data['title'] = 'Form Details';
         $this->form_validation->set_rules('title', 'Title', 'required');
         $this->form_validation->set_rules('description', 'Description', 'required');
-
-
+    
         if ($this->form_validation->run() === FALSE) {
             $this->load->view('templates/header');
-            $this->load->view('templates/form_title',$data);
+            $this->load->view('templates/form_title', $data);
             $this->load->view('templates/footer');
         } else {
-            // $enc_password = md5($this->input->post('password'));
             $this->load->model('create_model');
-    // $user_id = $this->session->userdata('user_id');
-
-
-            $this->create_model->details();
-            // $this->user_model->register();
-
-
-            // $this->session->set_flashdata('user_registered', 'You are now registered and can log in');
-            redirect('designform');
+            $form_id = $this->create_model->details(); // Get the new form_id
+    
+            // Redirect to the form view with the form_id
+            redirect('form/view/' . $form_id);
         }
-
     }
+    
 }
 
 ?>
\ No newline at end of file
diff --git a/application/controllers/New_form_controller.php b/application/controllers/New_form_controller.php
index e42fea1..c49e72c 100644
--- a/application/controllers/New_form_controller.php
+++ b/application/controllers/New_form_controller.php
@@ -12,7 +12,6 @@ class New_form_controller extends CI_Controller {
 
         // Decode the formData from the POST request
         $formData = $this->input->post('formData');
-
         // Check if form_id is set in session
         $formId = $this->session->userdata('form_id');
         if ($formId) {
diff --git a/application/controllers/Publish_controller.php b/application/controllers/Publish_controller.php
index c159a7c..43ab23d 100644
--- a/application/controllers/Publish_controller.php
+++ b/application/controllers/Publish_controller.php
@@ -10,7 +10,7 @@ class Publish_controller extends CI_Controller {
             // If not logged in, redirect to login page
             redirect('users/login');
         }
-        $response_link = base_url("forms/response_preview/" . $form_id);
+        $response_link = base_url("response_preview/" . $form_id);
         $this->load->model('Publish_model');
         // Update is_published to 1 and set the response link
         $this->Publish_model->update_form($form_id, [
diff --git a/application/controllers/Users.php b/application/controllers/Users.php
index 9d42e47..f1f0e51 100644
--- a/application/controllers/Users.php
+++ b/application/controllers/Users.php
@@ -35,9 +35,10 @@ class Users extends CI_Controller
  * @return mixed(data return type)
  * @author torun
  */
-    public function login()
+    public function login($form_id = null)
     {
         $data['title'] = 'Sign In';
+        $data['form_id'] = $form_id;
 
         $this->form_validation->set_rules('username', 'Username', 'required');
         $this->form_validation->set_rules('password', 'Password', 'required');
@@ -71,7 +72,11 @@ class Users extends CI_Controller
                 // Set message
                 $this->session->set_flashdata('user_loggedin', 'You are now logged in');
 
-                redirect('home');
+                if ($form_id) {
+                    redirect('forms/response_preview/'.$form_id);
+                } else {
+                    redirect('home');                }
+             
             } else {
                 // Set message
                 $this->session->set_flashdata('login_failed', 'Login is invalid');
diff --git a/application/models/Create_model.php b/application/models/Create_model.php
index 1d4fd94..69b8bab 100644
--- a/application/models/Create_model.php
+++ b/application/models/Create_model.php
@@ -20,7 +20,7 @@ class Create_model extends CI_Model {
         $formId = $this->db->insert_id();
         $this->session->set_userdata('form_id', $formId);
 
-
+return $formId;
     }
 
 }
diff --git a/application/models/Form_model.php b/application/models/Form_model.php
index aad772a..b3969ac 100644
--- a/application/models/Form_model.php
+++ b/application/models/Form_model.php
@@ -37,4 +37,20 @@ class Form_model extends CI_Model {
             return true;
         }
     }
+    public function __construct() {
+        $this->load->database();
+    }
+
+    public function get_form_title($form_id) {
+        $this->db->select('title'); // Assuming the title column in the forms table is called 'title'
+        $this->db->from('forms');
+        $this->db->where('id', $form_id);
+        $query = $this->db->get();
+        
+        if ($query->num_rows() > 0) {
+            return $query->row()->title;
+        } else {
+            return null;
+        }
+    }
 }
\ No newline at end of file
diff --git a/application/views/Tables/draft.php b/application/views/Tables/draft.php
index f6f9d1c..19daee0 100644
--- a/application/views/Tables/draft.php
+++ b/application/views/Tables/draft.php
@@ -1,3 +1,8 @@
+<style>/* CSS styles */
+.title-column {
+    color: darkblue; /* Dark blue color for title */
+}
+</style>
 <div class="container">
     <div class="row">
         <div class="col-md-12 mt-4">
@@ -17,22 +22,24 @@ Drafts
                     <table id="basetable1" class="table table-bordered">
                         <thead>
                             <tr>
-                                <th>Form_Id</th>
+                                <th>Drafts</th>
                                 <th>Title</th>
-                                <th>Description</th>
                                 <th>Created On</th>
                                 <th>Edit</th>
                                 <th>Delete</th>
+                                <th>Preview</th>
                             </tr>
                         </thead>
                         <tbody>
-                            <?php foreach ($forms as $row): ?>
-                                <tr>
-                                    <td><?php echo $row->id; ?></td>
-                                    <td><a
-                                            href="<?php echo base_url('publish/' . $row->id); ?>"><?php echo $row->title; ?></a>
+                        <?php
+        $serialNumber = 1; // Initialize the counter variable
+        foreach ($forms as $row): ?>
+            <tr>
+                <td><?php echo $serialNumber++; ?></td>
+                <td class="title-column">
+                                        <?php echo $row->title; ?>
                                     </td>
-                                    <td><?php echo $row->description; ?></td>
+                                    
                                     <td><?php echo $row->created_at; ?></td>
                                     <td>
                                         <a href="<?php echo base_url('edit/' . $row->id); ?>"
@@ -42,6 +49,11 @@ Drafts
                                         <a href="<?php echo base_url('forms/delete/' . $row->id); ?>"
                                             class="btn btn-danger btn-sm" style=" background-color: rgb(103, 58, 183); border-color: rgb(103, 58, 183); color: white;">Delete</a>
                                     </td>
+                                    <td>
+                    <a href="<?php echo base_url('form_preview/' . $row->id); ?>">
+                        <i class="fas fa-eye"></i> <!-- Eye icon -->
+                    </a>
+                </td>
                                 </tr>
                             <?php endforeach; ?>
                         </tbody>
diff --git a/application/views/Tables/list_forms.php b/application/views/Tables/list_forms.php
index d7e00e9..ee98e4b 100644
--- a/application/views/Tables/list_forms.php
+++ b/application/views/Tables/list_forms.php
@@ -1,3 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <!-- Other head elements -->
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Form List</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <link rel="stylesheet" href="styles.css"> <!-- Link to your stylesheet -->
+</head>
+<body>
+    <style>/* CSS styles */
+.title-column {
+    color: darkblue; /* Dark blue color for title */
+}
+
+.draft-row {
+    background-color: #f0f0f0; /* Light grey background for draft status */
+}
+</style>
 <div class="container">
     <div class="row">
         <div class="col-md-12 mt-4 ">
@@ -14,27 +34,33 @@
                 </div>
                 <div class="card-body">
                     <!-- here your table will occur -->
-                    <table id = "basetable1" class="table table-bordered">
+                    <table id="basetable1" class="table table-bordered">
                         <thead>
                             <tr>
-                                <th>Form_Id</th>
+                                <th>Forms</th>
                                 <th>Title</th>
                                 <th>Description</th>
                                 <th>Created On</th>
                                 <th>Status</th>
+                                <th>Preview</th>
                             </tr>
                         </thead>
                         <tbody>
-                            <?php foreach ($forms as $row): ?>
-                                <tr>
-                                    <td><?php echo $row->id; ?></td>
-                                    <td><a
-                                            href="<?php echo base_url('publish/' . $row->id); ?>"><?php echo $row->title; ?></a>
+                            <?php
+                            $serialNumber = 1; // Initialize the counter variable
+                            foreach ($forms as $row): ?>
+                                <tr class="<?php echo ($row->is_published ? '' : 'draft-row'); ?>">
+                                    <td><?php echo $serialNumber++; ?></td> 
+                                    <td class="title-column">
+                                        <?php echo $row->title; ?>
                                     </td>
                                     <td><?php echo $row->description; ?></td>
                                     <td><?php echo $row->created_at; ?></td>
+                                    <td><?php echo ($row->is_published ? 'Published' : 'Draft'); ?></td>
                                     <td>
-                                        <?php echo ($row->is_published ? 'Published' : 'Draft'); ?>
+                                        <a href="<?php echo base_url('form_preview/' . $row->id); ?>">
+                                            <i class="fas fa-eye"></i> <!-- Eye icon -->
+                                        </a>
                                     </td>
                                 </tr>
                             <?php endforeach; ?>
@@ -45,3 +71,18 @@
         </div>
     </div>
 </div>
+
+<script>
+    function updateSerialNumbers() {
+        const table = document.getElementById('basetable1');
+        const rows = table.getElementsByTagName('tbody')[0].getElementsByTagName('tr');
+        for (let i = 0; i < rows.length; i++) {
+            rows[i].getElementsByClassName('serial-number')[0].innerText = i + 1;
+        }
+    }
+
+    document.addEventListener('DOMContentLoaded', updateSerialNumbers);
+    // If you have sorting functionality, call updateSerialNumbers after sorting
+</script>
+</body>
+</html>
diff --git a/application/views/edit_form_view.php b/application/views/edit_form_view.php
index fd53d9f..9407a22 100644
--- a/application/views/edit_form_view.php
+++ b/application/views/edit_form_view.php
@@ -4,12 +4,65 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Edit Form</title>
-    <link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://bootswatch.com/3/flatly/bootstrap.min.css">
     <link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/styles.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
+    <link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/header_new.css">
     <link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/jquery-ui.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
 </head>
 <body>
+    <!-- Navbar -->
+    <nav class="navbar navbar-custom">
+        <div class="container">
+            <?php if ($this->session->userdata('logged_in')): ?>
+                <div class="navbar-header">
+                    <a class="navbar-brand" href="<?php echo base_url(); ?>">Google Forms</a>
+                </div>
+            <?php endif; ?>
+
+            <div id="navbar">
+                <ul class="nav navbar-nav left">
+                    <?php if ($this->session->userdata('logged_in')): ?>
+                        <li><a href="<?php echo base_url(); ?>published_forms">Published Forms</a></li>
+                        <li><a href="<?php echo base_url(); ?>drafts">Drafts</a></li>
+                    <?php endif; ?>
+                </ul>
+                <ul class="nav navbar-nav right">
+                    <?php if (!$this->session->userdata('logged_in')): ?>
+                        <li><a href="<?php echo base_url(); ?>users/login">Login</a></li>
+                        <li><a href="<?php echo base_url(); ?>users/register">Register</a></li>
+                    <?php endif; ?>
+                    <?php if ($this->session->userdata('logged_in')): ?>
+                        <li><a href="<?php echo base_url(); ?>homepage/title">Create Form</a></li>
+                        <li><a href="<?php echo base_url(); ?>users/logout">Logout</a></li>
+                    <?php endif; ?>
+                </ul>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Alert Messages -->
+    <div class="container">
+        <?php if ($this->session->flashdata('user_registered')): ?>
+            <p class="alert alert-success"><?php echo $this->session->flashdata('user_registered'); ?></p>
+        <?php endif; ?>
+
+        <?php if ($this->session->flashdata('login_failed')): ?>
+            <p class="alert alert-danger"><?php echo $this->session->flashdata('login_failed'); ?></p>
+        <?php endif; ?>
+
+        <?php if ($this->session->flashdata('user_loggedin')): ?>
+            <p class="alert alert-success"><?php echo $this->session->flashdata('user_loggedin'); ?></p>
+        <?php endif; ?>
+
+        <?php if ($this->session->flashdata('user_loggedout')): ?>
+            <p class="alert alert-success"><?php echo $this->session->flashdata('user_loggedout'); ?></p>
+        <?php endif; ?>
+    </div>
+
+    <!-- Form Editor -->
     <div class="container">
         <div class="form-header">
             <button id="preview-btn" class="btn btn-info"><i class="fas fa-eye"></i></button>
@@ -55,8 +108,9 @@
                 </div>
             <?php endforeach; ?>
         </div>
-        <button id="submit-btn" class="btn btn-success" style="background-color: rgb(103, 58, 183); border-color: rgb(103, 58, 183); color: white; margin-left: 240px; margin-top: 20px">Submit</button>
+        <button id="submit-btn" class="btn btn-success btn-custom">Submit</button>
     </div>
+
     <script src="<?php echo base_url('assets/js/jquery.min.js'); ?>"></script>
     <script src="<?php echo base_url('assets/js/bootstrap.min.js'); ?>"></script>
     <script src="<?php echo base_url('assets/js/jquery-ui.js'); ?>"></script>
@@ -65,9 +119,33 @@
     <script>
 $(document).ready(function() {
     var base_url = '<?php echo base_url(); ?>';
+    var index = 1;
+    var activeSection = null;
+
+    function positionAddSectionButton() {
+        if (activeSection) {
+            var position = activeSection.position();
+            var buttonWidth = $('#add-section-btn').outerWidth();
+            var buttonHeight = $('#add-section-btn').outerHeight();
+
+            $('#add-section-btn').css({
+                position: 'absolute',
+                left: position.left - buttonWidth - 47 + 'px',
+                top: position.top + activeSection.height() / 2 - buttonHeight / 2 + 'px'
+            });
+        }
+    }
 
     // Add section button functionality
     $('#add-section-btn').on('click', function() {
+        createFormSection();
+        $('.form-section').removeClass('active');
+        activeSection = $('.form-section').last();
+        activeSection.addClass('active');
+        positionAddSectionButton();
+    });
+
+    function createFormSection() {
         var sectionHtml = `
             <div class="form-section" data-type="">
                 <div class="header-row">
@@ -86,44 +164,40 @@ $(document).ready(function() {
                     <span class="delete-section-icon"><i class="fas fa-trash-alt"></i></span>
                 </div>
                 <div class="options-container"></div>
-                <button class="btn btn-secondary add-option-btn" style="display: none;">Add Option</button>
+                <button class="btn btn-secondary add-option-btn">Add Option</button>
             </div>
         `;
         $('#form-container').append(sectionHtml);
-    });
+    }
 
-    // Add option button functionality
+    // Handle option button click
     $(document).on('click', '.add-option-btn', function() {
+        var $section = $(this).closest('.form-section');
         var optionHtml = `
             <div class="option">
-                <input type="text" class="form-control option-label" placeholder="Option">
+                <input type="text" class="form-control option-label" value="">
                 <span class="delete-option-icon">&times;</span>
             </div>
         `;
-        $(this).siblings('.options-container').append(optionHtml);
+        $section.find('.options-container').append(optionHtml);
     });
 
-    // Delete option functionality
-    $(document).on('click', '.delete-option-icon', function() {
-        $(this).parent().remove();
-    });
-
-    // Delete section functionality
+    // Handle delete section button click
     $(document).on('click', '.delete-section-icon', function() {
         $(this).closest('.form-section').remove();
     });
 
-    // Show/Hide "Add Option" button based on question type
-    $(document).on('change', '.custom-select', function() {
-        var type = $(this).val();
-        var $section = $(this).closest('.form-section');
-        if (type === 'multiple-choice' || type === 'checkboxes' || type === 'dropdown') {
-            $section.find('.add-option-btn').show();
-        } else {
-            $section.find('.add-option-btn').hide();
-        }
-    }).trigger('change'); // Trigger change to apply to existing sections
-    // Submit button functionality
+    // Handle delete option button click
+    $(document).on('click', '.delete-option-icon', function() {
+        $(this).closest('.option').remove();
+    });
+
+    // Handle preview button click
+    $('#preview-btn').on('click', function() {
+        alert('Preview functionality is not implemented.');
+    });
+
+    // Handle submit button click
     $('#submit-btn').on('click', function() {
         var formData = collectFormData();
         formData['form_id'] = <?php echo $form['id']; ?>;
@@ -195,9 +269,23 @@ $(document).ready(function() {
             }
         }
         return { isValid: true };
-    }
+    }   
+
+    // Initialize
+    $('.form-section').each(function() {
+        $(this).on('click', function() {
+            $('.form-section').removeClass('active');
+            $(this).addClass('active');
+            activeSection = $(this);
+            positionAddSectionButton();
+        });
+    });
+
+    // Handle window resize to reposition button
+    $(window).on('resize', function() {
+        positionAddSectionButton();
+    });
 });
     </script>
 </body>
 </html>
-</div>
diff --git a/application/views/form_preview.php b/application/views/form_preview.php
index fd32754..640ed41 100644
--- a/application/views/form_preview.php
+++ b/application/views/form_preview.php
@@ -5,81 +5,20 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Form Preview - Google Forms</title>
     <link rel="stylesheet" href="https://bootswatch.com/3/flatly/bootstrap.min.css">
-    <link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/form_preview_back.css">
-    <style>
-        body {
-            background-color: rgb(240, 235, 248);
-        }
-        .container {
-            margin-top: 30px;
-        }
-        .form-header {
-            background-color: white;
-            padding: 20px;
-            margin-left: 240px;
-            border-radius: 10px 10px 0 0;
-            display: flex;
-            flex-direction: column;
-            align-items: flex-start;
-            border-top: 10px solid rgb(103, 58, 183);
-            width: 56%;
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-            margin-bottom: 20px;
-        }
-        .form-header h2, .form-header h4 {
-            margin: 0;
-            text-align: left;
-        }
-        .form-header h4 {
-            color: rgba(0, 0, 0, 0.5);
-        }
-        .form-section {
-            background-color: white;
-            margin-bottom: 30px;
-            border-radius: 10px;
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-            padding: 20px;
-        }
-        .question-section {
-            margin-bottom: 10px;
-        }
-        .question-label {
-            font-weight: bold;
-        }
-        .options-container {
-            margin-top: 10px;
-        }
-        .option {
-            margin-bottom: 10px;
-            display: flex;
-            align-items: center;
-        }
-        .option input[type="checkbox"] {
-            margin-right: 10px;
-            width: 16px; /* Adjust size of checkbox */
-            height: 16px; /* Adjust size of checkbox */
-        }
-        .option input[type="radio"] {
-            margin-right: 10px;
-            width: 16px; /* Adjust size of radio button */
-            height: 16px; /* Adjust size of radio button */
-        }
-        .option label {
-            margin: 0;
-        }
-    </style>
+    <link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/form_preview.css">
 </head>
 <body>
 <div class="container">
     <div class="form-header">
         <h2><?php echo $form->title; ?></h2>
+        <br>
         <h4><?php echo $form->description; ?></h4>
     </div>
 
     <?php foreach ($questions as $question): ?>
         <div class="form-section">
             <div class="question-section">
-                <input type="text" class="form-control question-label" value="<?php echo $question->text; ?>" disabled>
+                <p class="question-label"><?php echo $question->text; ?></p>
             </div>
 
             <?php if ($question->type == 'multiple-choice'): ?>
@@ -119,8 +58,8 @@
             <?php endif; ?>
         </div>
     <?php endforeach; ?>
-
-    <a href="<?php echo base_url('Publish_controller/publish_form/'.$form->id); ?>" class="btn btn-success" style="margin-top: 20px; position: relative; left: 240px; background-color: rgb(103, 58, 183); border-color: rgb(103, 58, 183); color: white;">Publish</a>
-    </div>
+<a href="<?php echo base_url('Publish_controller/publish_form/'.$form->id); ?>" class="btn btn-success">Publish</a>
+    <br>
+</div>
 </body>
 </html>
diff --git a/application/views/form_preview_back.php b/application/views/form_preview_back.php
index 045418d..f1772d6 100644
--- a/application/views/form_preview_back.php
+++ b/application/views/form_preview_back.php
@@ -5,19 +5,21 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Form Preview - Google Forms</title>
     <link rel="stylesheet" href="https://bootswatch.com/3/flatly/bootstrap.min.css">
-    <link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/form_preview_back.css">
+    <link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/form_preview.css">
+   
 </head>
 <body>
 <div class="container">
     <div class="form-header">
         <h2><?php echo $form->title; ?></h2>
+        <br>
         <h4><?php echo $form->description; ?></h4>
     </div>
 
     <?php foreach ($questions as $question): ?>
         <div class="form-section">
             <div class="question-section">
-                <input type="text" class="form-control question-label" value="<?php echo $question->text; ?>" disabled>
+                <p class="question-label"><?php echo $question->text; ?></p>
             </div>
 
             <?php if ($question->type == 'multiple-choice'): ?>
@@ -57,8 +59,8 @@
             <?php endif; ?>
         </div>
     <?php endforeach; ?>
-
-    <a href="<?php echo base_url('published_forms'); ?>" class="btn btn-success" style="margin-top: 20px; position: relative; left: 240px; background-color: rgb(103, 58, 183); border-color: rgb(103, 58, 183); color: white; position: relative; left: 240px;">Back</a>
+<a href="<?php echo base_url('published_forms'); ?>" class="btn btn-success">Back</a>
+<br>
 </div>
 </body>
 </html>
diff --git a/application/views/publish_view.php b/application/views/publish_view.php
index e939504..3753352 100644
--- a/application/views/publish_view.php
+++ b/application/views/publish_view.php
@@ -1,3 +1,12 @@
+<style>/* CSS styles */
+.title-column {
+    color: darkblue; /* Dark blue color for title */
+}
+
+.draft-row {
+    background-color: #f0f0f0; /* Light grey background for draft status */
+}
+</style>
 <div class="container">
     <div class="row">
         <div class="col-md-12 mt-4">
@@ -17,27 +26,32 @@
                     <table id="basetable1" class="table table-bordered">
                         <thead>
                             <tr>
-                                <th>Form_Id</th>
+                                <th>Responses</th>
                                 <th>Title</th>
-                                <th>Description</th>
-                                <th>Response Link</th>
                                 <th>Status</th>
+                                <th>Response Link</th>
+                                <th>Preview</th>
                             </tr>
                         </thead>
                         <tbody>
-                            <?php foreach ($forms as $row): ?>
+                            <?php $serialNumber = 1;foreach ($forms as $row): ?>
                                 <tr>
-                                    <td><a href="<?php echo base_url('Response_submit/view/' . $row->id); ?>"><?php echo $row->id; ?></a></td>
-                                    <td>
-                                        <a href="<?php echo base_url('form_preview/' . $row->id); ?>"><?php echo $row->title; ?></a>
+                                <td><?php echo $serialNumber++; ?></td> 
+                                <td class="title-column">
+                                        <?php echo $row->title; ?>
+                                    </td>
+                                   
+                                    <td>
+                                        <a href="<?php echo base_url('Publish_controller/unpublish_form/' . $row->id); ?>" class="btn btn-danger btn-sm" style=" background-color: rgb(103, 58, 183); border-color: rgb(103, 58, 183); color: white;">Unpublish</a>
                                     </td>
-                                    <td><?php echo $row->description; ?></td>
                                     <td>
                                         <a href="<?php echo $row->response_link; ?>" target="_blank"><?php echo $row->response_link; ?></a>
                                     </td>
                                     <td>
-                                        <a href="<?php echo base_url('Publish_controller/unpublish_form/' . $row->id); ?>" class="btn btn-danger btn-sm" style=" background-color: rgb(103, 58, 183); border-color: rgb(103, 58, 183); color: white;">Unpublish</a>
-                                    </td>
+                    <a href="<?php echo base_url('form_preview/' . $row->id); ?>">
+                        <i class="fas fa-eye"></i> <!-- Eye icon -->
+                    </a>
+                </td>
                                 </tr>
                             <?php endforeach; ?>
                         </tbody>
diff --git a/application/views/response_submit.php b/application/views/response_submit.php
index c054d8c..d708c7a 100644
--- a/application/views/response_submit.php
+++ b/application/views/response_submit.php
@@ -8,21 +8,42 @@
     <link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/response_submit.css">
 
     <script>
-        function validateForm() {
-            let isValid = true;
-            document.querySelectorAll('.question-container').forEach(function(container) {
-                let isRequired = container.dataset.required === '1';
-                let inputs = container.querySelectorAll('input[type="text"], textarea, select, input[type="radio"]:checked, input[type="checkbox"]:checked');
-                if (isRequired && inputs.length === 0) {
-                    container.style.border = '2px solid red';
-                    isValid = false;
-                } else {
-                    container.style.border = 'none';
-                }
-            });
-            return isValid;
-        }
-    </script>
+    function validateForm() {
+        let isValid = true;
+        document.querySelectorAll('.question-container').forEach(function(container) {
+            let isRequired = container.dataset.required === '1';
+            let questionType = container.dataset.type;
+            let isAnswered = false;
+
+            // Select inputs relevant to the question type
+            let inputs = container.querySelectorAll('input[type="text"], textarea, select, input[type="radio"]:checked, input[type="checkbox"]:checked');
+            if (inputs.length > 0) {
+                inputs.forEach(function(input) {
+                    if (input.type === 'text' || input.tagName.toLowerCase() === 'textarea') {
+                        if (input.value.trim() !== '') {
+                            isAnswered = true;
+                        }
+                    } else if (input.type === 'radio' || input.type === 'checkbox') {
+                        isAnswered = true;
+                    } else if (input.tagName.toLowerCase() === 'select') {
+                        if (input.value.trim() !== '') {
+                            isAnswered = true;
+                        }
+                    }
+                });
+            }
+
+            if (isRequired && !isAnswered) {
+                container.style.border = '2px solid purple';
+                isValid = false;
+            } else {
+                container.style.border = 'none';
+            }
+        });
+        return isValid;
+    }
+</script>
+
 </head>
 <body>
 <div class="container">
diff --git a/application/views/templates/footer.php b/application/views/templates/footer.php
index 35490a2..31fdb4f 100644
--- a/application/views/templates/footer.php
+++ b/application/views/templates/footer.php
@@ -1,7 +1,22 @@
-<script>
+<!-- <script>
 $(document).ready(function(){
     $('#basetable1').DataTable({
         // "pagingType": "full_numbers"
     });
 });
+</script> -->
+
+<script>
+    $('#basetable1').DataTable({
+            "pagingType": "full_numbers", // Full pagination controls
+            "lengthMenu": [10, 25, 50], // Options for number of rows per page
+            "language": {
+                "search": "Filter records:", // Custom search label
+                "lengthMenu": "Show _MENU_ entries" // Custom length menu label
+            },
+            "columnDefs": [
+                { "orderable": false, "targets": 2 } // Disable sorting for the "View" column (index 2)
+            ],
+            "order": [[1, "desc"]] // Default sort by "Filled At" column (index 1) in descending order
+        });
 </script>
diff --git a/application/views/templates/form_title.php b/application/views/templates/form_title.php
index af75e00..c7a5d51 100644
--- a/application/views/templates/form_title.php
+++ b/application/views/templates/form_title.php
@@ -12,8 +12,7 @@
 <input type = "text" name ="description" class="form-control" placeholder = "Form Description" required autofocus>
 
 </div>
-<button type = "submit" class = "btn btn-primary btn-block">Create</button>
+<button type = "submit" class = "btn btn-primary btn-block" >Create</button>
 </div>
 </div>
-        
-<?php echo form_close(); ?>
+        
\ No newline at end of file
diff --git a/application/views/templates/forms_ui.php b/application/views/templates/forms_ui.php
index 60b90b7..dea9bc7 100644
--- a/application/views/templates/forms_ui.php
+++ b/application/views/templates/forms_ui.php
@@ -57,16 +57,18 @@
     </nav>
 
     <div class="container">
-        <div class="form-header">
-            <button id="preview-btn" class="btn btn-info"><i class="fas fa-eye"></i></button>
-            <h2>Untitled Form</h2>
-            <button id="add-section-btn" class="btn btn-primary">+</button>
-        </div>
-        <div id="form-container"></div>
-
-        <button id="submit-btn" class="btn btn-success" style="margin-left: 240px; margin-top: 20px ">Submit</button>
+    <div class="form-header">
+        <button id="preview-btn" class="btn btn-info"><i class="fas fa-eye"></i></button>
+        <h2><?php echo htmlspecialchars($title); ?></h2>
+        <!-- <h2>Untitled Form</h2> -->
 
+        <button id="add-section-btn" class="btn btn-primary">+</button>
     </div>
+    <div id="form-container"></div>
+
+    <button id="submit-btn" class="btn btn-success" style="margin-left: 240px; margin-top: 20px">Submit</button>
+</div>
+
 
     <script src="<?php echo base_url('assets/js/jquery.min.js'); ?>"></script>
     <script src="<?php echo base_url('assets/js/bootstrap.min.js'); ?>"></script>
diff --git a/application/views/templates/header.php b/application/views/templates/header.php
index 17cefbd..de0cf5c 100644
--- a/application/views/templates/header.php
+++ b/application/views/templates/header.php
@@ -9,12 +9,10 @@
     <link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/header_styles.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
     <link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/jquery-ui.css">
-    <link rel="stylesheet" href="https://cdn.datatables.net/2.1.0/css/dataTables.dataTables.css">
-
-    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
-<script src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js"></script>
-<script src="https://cdn.datatables.net/1.11.4/js/dataTables.bootstrap4.min.js"></script>
 
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
+<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
     
 </head>
 <body>
@@ -41,7 +39,7 @@
                     <li><a href="<?php echo base_url(); ?>users/register">Register</a></li>
                 <?php endif; ?>
                 <?php if ($this->session->userdata('logged_in')): ?>
-                    <li><a href="<?php echo base_url(); ?>homepage/title">Create Form</a></li>
+                    <li><a href="<?php echo base_url(); ?>title">Create Form</a></li>
                     <li><a href="<?php echo base_url(); ?>users/logout">Logout</a></li>
                 <?php endif; ?>
             </ul>
diff --git a/application/views/users/login.php b/application/views/users/login.php
index d3b1807..42ba6d7 100644
--- a/application/views/users/login.php
+++ b/application/views/users/login.php
@@ -1,4 +1,4 @@
-<?php echo form_open('users/login'); ?>
+<?php echo form_open('users/login/'.$form_id); ?>
 <div class="row">
 <div class="col-md-4 col-md-offset-4">
 <h1 class="text-center">
diff --git a/assets/css/form_preview.css b/assets/css/form_preview.css
new file mode 100644
index 0000000..858b6e9
--- /dev/null
+++ b/assets/css/form_preview.css
@@ -0,0 +1,68 @@
+body {
+    background-color: rgb(240, 235, 248);
+}
+.container {
+    margin-top: 30px;
+}
+.form-header {
+    background-color: white;
+    padding: 20px;
+    margin-left: 240px;
+    border-radius: 10px 10px 0 0;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    border-top: 10px solid rgb(103, 58, 183);
+    width: 56%;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    margin-bottom: 20px;
+}
+.form-header h2, .form-header h4 {
+    margin: 0;
+    text-align: left;
+}
+.form-header h4 {
+    color: rgba(0, 0, 0, 0.5);
+}
+.form-section {
+    background-color: white;
+    margin-bottom: 30px;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    padding: 20px;
+}
+.question-section {
+    margin-bottom: 10px;
+}
+.question-label {
+    font-weight: bold;
+}
+.options-container {
+    margin-top: 10px;
+}
+.option {
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+}
+.option input[type="checkbox"] {
+    margin-right: 10px;
+    width: 16px; /* Adjust size of checkbox */
+    height: 16px; /* Adjust size of checkbox */
+}
+.option input[type="radio"] {
+    margin-right: 10px;
+    width: 16px; /* Adjust size of radio button */
+    height: 16px; /* Adjust size of radio button */
+}
+.option label {
+    margin: 0;
+}
+.btn-success {
+    margin-top: 20px;
+    position: relative;
+    left: 240px;
+    background-color: rgb(103, 58, 183);
+    border-color: rgb(103, 58, 183);
+    color: white;
+}
diff --git a/assets/css/form_preview_back.css b/assets/css/form_preview_back.css
deleted file mode 100644
index 4e2c3ff..0000000
--- a/assets/css/form_preview_back.css
+++ /dev/null
@@ -1,51 +0,0 @@
-body { background-color: rgb(240, 235, 248); }
-.container { margin-top: 30px; }
-.form-header { 
-    background-color: white; 
-    padding: 20px; 
-    margin-left: 240px; 
-    border-radius: 10px 10px 0 0; 
-    display: flex; 
-    flex-direction: column; 
-    align-items: flex-start; 
-    border-top: 10px solid rgb(103, 58, 183); 
-    width: 56%; 
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
-    margin-bottom: 20px; 
-}
-.form-header h2 { margin: 0; }
-.form-header h4 { color: rgba(0, 0, 0, 0.5); }
-.form-section { 
-    background-color: white; 
-    margin-bottom: 30px; 
-    border-radius: 10px; 
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
-    padding: 20px; 
-}
-.question-section { 
-    margin-bottom: 10px; 
-}
-.question-label { 
-    font-weight: bold; 
-}
-.options-container { 
-    margin-top: 10px; 
-}
-.option { 
-    margin-bottom: 10px; 
-    display: flex; 
-    align-items: center; 
-}
-.option input[type="checkbox"] { 
-    margin-right: 10px; 
-    width: 16px; /* Adjust size of checkbox */
-    height: 16px; /* Adjust size of checkbox */
-}
-.option input[type="radio"] { 
-    margin-right: 10px; 
-    width: 16px; /* Adjust size of radio button */
-    height: 16px; /* Adjust size of radio button */
-}
-.option label { 
-    margin: 0; 
-}
\ No newline at end of file
diff --git a/assets/css/header_new.css b/assets/css/header_new.css
new file mode 100644
index 0000000..4e1acc1
--- /dev/null
+++ b/assets/css/header_new.css
@@ -0,0 +1,35 @@
+/* Navbar styles */
+.navbar-custom {
+    background-color: rgb(103, 58, 183); ; /* Customize this color */
+}
+
+/* Button positioning for section addition */
+#add-section-btn {
+    position: absolute;
+    /* Ensure proper positioning */
+}
+
+.form-section {
+    margin-bottom: 15px;
+    padding: 15px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+}
+
+.header-row {
+    display: flex;
+    align-items: center;
+}
+
+.header-row textarea,
+.header-row select {
+    margin-right: 10px;
+}
+.navbar-custom .navbar-brand {
+    color: #fff; /* Customize brand color */
+}
+
+.navbar-custom .navbar-nav li a {
+    color: #fff; /* Customize link color */
+}
+
diff --git a/assets/css/styles.css b/assets/css/styles.css
index c1eebd1..d7f13e8 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -3,6 +3,17 @@ body {
     background-color: rgb(240, 235, 248);
     font-family: Arial, sans-serif;
 }
+.form-section h2 { 
+    text-align: center; 
+    margin-bottom: 30px; 
+}
+
+.form-section .question-section { 
+    margin-bottom: 20px; 
+}
+/* Navbar custom styles */
+
+
 .container {
     position: relative;
     margin-top: 30px;
@@ -150,8 +161,8 @@ body {
 
 
 .add-option-btn {
-    background-color: #f0f0f0; 
-    color: #333; 
+    background-color: rgb(66, 133, 244); 
+    /* color: rgb(66, 133, 244); */
     margin-top: 11px;
     font-size: 0.9em;
 
@@ -228,4 +239,20 @@ table a:not(.btn):hover {
     background-color: rgb(103, 58, 183);
     border-color: rgb(103, 58, 183);
 } */
+.btn-custom {
+    margin-top: 20px;
+    position: relative;
+    left: 240px;
+    background-color: rgb(103, 58, 183);
+    border-color: rgb(103, 58, 183);
+    color: white;
+}
 
+/* Assuming you have a stylesheet named styles.css */
+.btn.btn-primary.btn-block {
+margin-top: 20px;
+position: relative;
+background-color: rgb(103, 58, 183);
+border-color: rgb(103, 58, 183);
+color: white;
+}
diff --git a/assets/js/scripts.js b/assets/js/scripts.js
index f30d96e..a7cb623 100644
--- a/assets/js/scripts.js
+++ b/assets/js/scripts.js
@@ -225,7 +225,7 @@ function addOption(type, container) {
             var questionData = {
                 text: $(this).find('.untitled-question').val(),
                 type: questionType,
-                required: $(this).find('.required-toggle').is(':checked'),
+                is_required: $(this).find('.required-toggle').is(':checked'),
                 options: []
             };
     
@@ -239,7 +239,7 @@ function addOption(type, container) {
             formData.questions.push(questionData);
         });
     
-        // console.log(formData);
+        console.log(formData);
         return formData;
     }
     
@@ -282,7 +282,7 @@ function addOption(type, container) {
                     window.location.href = base_url + 'Form_controller/index_forms';
                 } else {
                     alert(response.message);
-                    console.log(response);
+                    // console.log(response);
                 }
             },
             error: function(error) {