diff --git a/app/Views/staff_form.php b/app/Views/staff_form.php
index 9a00b12..87caae6 100644
--- a/app/Views/staff_form.php
+++ b/app/Views/staff_form.php
@@ -51,7 +51,7 @@
 
                             <div class="form-group col-md-4">
                                 <label for="business">Business<span class="text-danger">*</span></label>
-                                <select  class="form-control business slect2_dropdown"  id="business_id" name="business_id"  parsley-trigger="change" required >
+                                <select  class="form-control business select2-dropdown"  id="business_id" name="business_id"  parsley-trigger="change" required >
                                     <option >Select Business</option>
                                     <?php foreach ($business as $key => $value) { ?>
                                         <option value="<?php echo $value['business_id']; ?>" <?php if(isset($staffData)){ echo ($staffData->business_id == $value['business_id']) ? 'selected' : '';} ?>>
@@ -62,7 +62,7 @@
                             </div>
                             <div class="form-group col-md-4">
                                 <label for="branch">Branch<span class="text-danger">*</span></label>
-                                <select  class="form-control branch slect2_dropdown" id="branch_id" name="branch_id"  parsley-trigger="change" required >
+                                <select  class="form-control branch select2-dropdown" id="branch_id" name="branch_id"  parsley-trigger="change" required >
                                     <option >Select Branch</option>
                                     <?php if(isset($staffData)){ foreach ($branch as $key => $value) { ?>
                                         <option value="<?php echo $value['branch_id']; ?>" <?php echo ($staffData->branch_id == $value['branch_id']) ? 'selected' : ''; ?>>
@@ -178,56 +178,47 @@
     </div> <!-- container -->
 
 </div> <!-- content -->
-
-
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"> </script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0/js/select2.min.js"> </script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-md5/2.19.0/js/md5.min.js"></script>
 <script>
 
     $(document).ready(function() {
-        // $('.slect2_dropdown').select2();
-        // $('.branch').select2();
-    });
+        $('.select2-dropdown').select2();
 
-    $('#business_id').change(function (params) {
-        var business_id = $(params.target).val();
-        if (business_id) {
-            var branch_list = <?php echo json_encode($branch); ?>;
-            
-            // Clear existing options or elements if needed
-            // $('.branch').empty(); // Clear previous options
-            
-            // Filter branch_list based on business_id
-            var filteredBranches = branch_list.filter(function(element) {
-                return element.business_id == business_id;
+        $('#business_id').change(function (params) {
+
+            var business_id = $(params.target).val();
+           
+            if (business_id) {
+                var branch_list = <?php echo json_encode($branch); ?>;
+              
+                var filteredBranches = branch_list.filter(function(element) {
+                    return element.business_id == business_id;
+                });
+
+               
+                $('#branch_id').empty();
+                    $('#branch_id option:not(:first)').remove();
+
+                    $('#branch_id').append($('<option>', {
+                        text: "Select Branch"
+                        }));
+                    $.each(filteredBranches, function(index, item) {
+                        console.log(item);
+                        $('#branch_id').append($('<option>', {
+                        value: item.branch_id,
+                        text: item.branch_name
+                        }));
+                    });
+                   
+            }
             });
 
-            // $('.branch').append("<option>Select Branch</option>");
-            // Append filtered branches to the select dropdown or another container
-            // filteredBranches.forEach(function(branch) {
-            $('#branch_id').empty();
-                $('#branch_id option:not(:first)').remove();
-
-                $('#branch_id').append($('<option>', {
-                      text: "Select Branch"
-                    }));
-                $.each(filteredBranches, function(index, item) {
-                    console.log(item);
-                    $('#branch_id').append($('<option>', {
-                      value: item.branch_id,
-                      text: item.branch_name
-                    }));
-                });
-                // Create an <option> element for each branch
-                // var option = $('<option>').val(branch.branch_id).text(branch.branch_name);
-                
-                // Append the option to the select dropdown
-                // $('.branch').append(option);
-            // });
-
-            // Optional: Trigger change event after appending options
-            // $('.branch').trigger('change');
-        }
     });
 
+ 
+
 
 </script>
     
diff --git a/app/Views/template_form.php b/app/Views/template_form.php
index 2a3549b..4c845c8 100644
--- a/app/Views/template_form.php
+++ b/app/Views/template_form.php
@@ -28,8 +28,8 @@
             
         <!-- start page title -->
         <div class="row">
-        <div class="col-lg-1"></div>
-            <div class="col-10">
+        <div class="col-lg-2"></div>
+            <div class="col-8">
                 <div class="page-title-box page-title-box-alt">
                     <h4 class="page-title"> <?php if(isset($templateData)){ echo 'Edit'; }else{ echo 'Create'; }  ?> Template</h4>
                     <div class="page-title-right">
@@ -42,14 +42,14 @@
                     </div>
                 </div>
             </div>
-          <div class="col-lg-1"></div>
+          <div class="col-lg-2"></div>
         </div>     
         <!-- end page title -->  
  
  
         <div class="row">
-        <div class="col-lg-1"></div>
-        <div class="col-lg-10">
+        <div class="col-lg-2"></div>
+        <div class="col-lg-8">
 
             <div class="card">
                 <div class="card-body">
@@ -114,7 +114,7 @@
                 </div>
             </div> <!-- end card -->
         </div>
-        <div class="col-lg-1"></div>
+        <div class="col-lg-2"></div>
         <!-- end col -->
 
     </div>