diff --git a/app.py b/app.py
index 9781c0a..d651a80 100644
--- a/app.py
+++ b/app.py
@@ -1,4 +1,4 @@
-from flask import Flask, render_template, request, redirect
+from flask import Flask, render_template, request, redirect, jsonify, Response
 import sqlite3
 from flask_sqlalchemy import SQLAlchemy
 
@@ -274,7 +274,7 @@ def edit_employee(id):
     employee = Employee.query.get(id)
     if request.method == 'GET':
         return render_template('edit_employee.html', employee=employee, locations=locations)
-    
+
     if  request.method == 'POST':
         employee.employee_name = request.form['employee_name']
         employee.gender = request.form['gender']
@@ -286,7 +286,7 @@ def edit_employee(id):
         db.session.commit()
         return redirect('/employee')
 
-@app.route('/edit_equipment<int:barcode_number>', methods=['GET' ,'POST' ])
+@app.route('/edit_equipment<int:barcode_number>',  methods=['GET' ,'POST' ])
 def edit_equipment(barcode_number):
     locations = Location.query.all()
     employees = Employee.query.all()
@@ -336,5 +336,40 @@ def employee_index():
     employees = Employee.query.all()
     return render_template ('employeeList.html', employees = employees) 
 
+@app.route('/search', methods=['GET'])
+def search():
+    res = None
+    entity = request.args.get('entity')
+    query = request.args.get('query')
+
+    if entity == 'location':
+        data = Location.query.filter(Location.location_name.contains(query)).all()
+        res = jsonify([{ 
+            "location_name": r.location_name, "number_of_offices": r.number_of_offices, "head_quater_contact": r.number_of_offices
+        } for r in data])
+
+    elif entity == 'employee':
+        data = Employee.query.filter(Employee.employee_name.contains(query)).all()
+        res = jsonify([{ 
+            "employee_name": r.employee_name, "gender": r.gender, "title": r.title, "type": r.type, "phone_number": r.phone_number, "department": r.department, "location_id": r.location_id
+        } for r in data])
+
+    elif entity == 'equipment':
+        data = Equipment.query.filter(Equipment.type.contains(query)).all()
+        res = jsonify([{ 
+            "type": r.type, "serial_number": r.serial_number, "model_number": r.model_number, "purchase_date": r.purchase_date, "employee": r.employee, "location_id": r.location_id
+        } for r in data])
+
+    elif entity == 'purchase':
+        data = Purchases.query.filter(Purchases.store.contains(query)).all()
+        res = jsonify([{ 
+            "date": r.date, "store": r.store, "warranty_period": r.warranty_period, 
+        } for r in data])
+        
+    else:
+        res = Response("Invalid entity", status=400)
+
+    return res
+
 if __name__ == '__main__':
     app.run(host='localhost', port=8080, debug=True)
diff --git a/instance/OIS.db b/instance/OIS.db
deleted file mode 100644
index f521d4e..0000000
Binary files a/instance/OIS.db and /dev/null differ
diff --git a/static/index.js b/static/index.js
index 4960648..6fbdbf0 100644
--- a/static/index.js
+++ b/static/index.js
@@ -1,3 +1,24 @@
+$(document).ready(function() {
+    $('#search-button').click(function() {
+      var query = $('#query').val();
+      $.ajax({
+        url: '/search',
+        type: 'GET',
+        data: { query: query },
+        success: function(response) {
+          var results = response;
+          var resultsHtml = '';
+          for (var i = 0; i < results.length; i++) {
+            resultsHtml += '<p>' + results[i] + '</p>';
+          }
+          $('#search-results').html(resultsHtml);
+        },
+        error: function(error) {
+          console.log('Search request failed:', error);
+        }
+      });
+    });
+  });
 // javascript code
 
 // function updateLocationCount() {
@@ -12,3 +33,4 @@
 
 // // Call the updateLocationCount function every 5 seconds
 // setInterval(updateLocationCount, 1000);
+
diff --git a/templates/employeeList.html b/templates/employeeList.html
index 3df2410..a3889ef 100644
--- a/templates/employeeList.html
+++ b/templates/employeeList.html
@@ -8,12 +8,41 @@
     rel="stylesheet"
     href="{{ url_for('static', filename='main.css') }}"
     />
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-</head>
+
+    <script>
+      $(document).ready(function(){
+         $('#search-button').on('click', function(){
+            var query = $('#query').val();
+            $.get('/search', {entity: 'employee', query: query}, function(data){
+               $('#table-results').empty();
+               data.forEach(function(employee){
+                  $('#table-results').append(`
+                  <tr>
+                    <td>${ employee.employee_name }</td>
+                    <td>${ employee.gender}</td>
+                    <td>${ employee.title}</td>
+                    <td>${ employee.type}</td>
+                    <td>${ employee.phone_number}</td>
+                    <td>${ employee.department}</td>
+                    <td>${ employee.location_id}</td>
+                    <td class="action">
+                      <a href="/edit_employee/employee.id"><i class="fa fa-edit" style="font-size:24px"></i></a>
+                      <a href="/delete_employee/employee.id"><i class="fa fa-trash-o" style="font-size:24px"></i></a>
+                    </td>
+                  </tr>
+                  `);
+               });
+            });
+         });
+      });
+    </script>
+  </head>
 <body>
-    <div class="header">
-        <input type="search" id="query" name="search" placeholder="Search...">
-        <button>Submit</button>
+    <div class="header"> 
+        <input type="search" id="query" name="search" placeholder="Search by Employee Name...">
+        <button id="search-button">Submit</button>
         <a href="#"><img src="{{ url_for('static', filename='logo.png') }}" alt=""></a>
     </div>
 
@@ -53,7 +82,7 @@ <h1 class="marquee">Welcome To Our Online Inventory System</h1>
             <th>Actions</th>
           </tr>
         </thead>
-        <tbody>
+        <tbody id="table-results">
           {% for employee in employees  %}
             <tr>
               <td>{{ employee.employee_name }}</td>
diff --git a/templates/equipmentList.html b/templates/equipmentList.html
index 04c4f8d..0958edd 100644
--- a/templates/equipmentList.html
+++ b/templates/equipmentList.html
@@ -8,12 +8,40 @@
     rel="stylesheet"
     href="{{ url_for('static', filename='main.css') }}"
     />
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+
+    <script>
+      $(document).ready(function(){
+         $('#search-button').on('click', function(){
+            var query = $('#query').val();
+            $.get('/search', {entity: 'equipment', query: query}, function(data){
+               $('#table-results').empty();
+               data.forEach(function(equip){
+                  $('#table-results').append(`
+                  <tr>
+                    <td>${ equip.type }</td>
+                    <td>${ equip.serial_number}</td>
+                    <td>${ equip.model_number}</td>
+                    <td>${ equip.purchase_date}</td>
+                    <td>${ equip.employee}}</td>
+                    <td>${ equip.location_id}</td>
+                    <td class="action">
+                      <a href="/edit_equipment/equip.barcode_number"><i class="fa fa-edit" style="font-size:24px"></i></a>
+                      <a href="/delete_equipment/equip.barcode_number"><i class="fa fa-trash-o" style="font-size:24px"></i></a>
+                    </td>
+                  </tr>
+                  `);
+               });
+            });
+         });
+      });
+    </script>
 </head>
 <body>
     <div class="header">
-        <input type="search" id="query" name="search" placeholder="Search...">
-        <button>Submit</button>
+        <input type="search" id="query" name="search" placeholder="Search by Type...">
+        <button id="search-button">Submit</button>
         <a href="#"><img src="{{ url_for('static', filename='logo.png') }}" alt=""></a>
     </div>
 
@@ -52,7 +80,7 @@ <h1 class="marquee">Welcome To Our Online Inventory System</h1>
             <th>Actions</th>
           </tr>
         </thead>
-        <tbody>
+        <tbody id="table-results">
           {% for equip in equipment %}
             <tr>
               <td>{{ equip.type }}</td>
diff --git a/templates/locationList.html b/templates/locationList.html
index 1825a67..54e8ac8 100644
--- a/templates/locationList.html
+++ b/templates/locationList.html
@@ -4,16 +4,41 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Online Inventory System</title>
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <link
     rel="stylesheet"
     href="{{ url_for('static', filename='main.css') }}"
     />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+
+    <script>
+      $(document).ready(function(){
+         $('#search-button').on('click', function(){
+            var query = $('#query').val();
+            $.get('/search', {entity: 'location', query: query}, function(data){
+               $('#table-results').empty();
+               data.forEach(function(d){
+                  $('#table-results').append(`
+                  <tr>
+                    <td>${ d.location_name }</td>
+                    <td>${ d.number_of_offices}</td>
+                    <td>${ d.head_quater_contact}</td>
+                     <td class="action"> 
+                      <a href="/edit_location/location.id"><i class="fa fa-edit" style="font-size:24px"></i></a>
+                      <a href="/delete_location/location.id"><i class="fa fa-trash-o" style="font-size:24px"></i></a>
+                    </td>
+                  </tr>
+                  `);
+               });
+            });
+         });
+      });
+    </script>
 </head>
 <body>
     <div class="header">
-        <input type="search" id="query" name="search" placeholder="Search...">
-        <button>Submit</button>
+        <input type="search" id="query" name="search" placeholder="Search by Location Name...">
+        <button id="search-button">Submit</button>
         <a href="#"><img src="{{ url_for('static', filename='logo.png') }}" alt=""></a>
     </div>
 
@@ -37,6 +62,7 @@ <h1>Welcome To Our Online Inventory System</h1>
     </marquee> -->
     <div class="marquee-container">
       <h1 class="marquee">Welcome To Our Online Inventory System</h1>
+      <div id="results"></div>
     </div>
     <div class="location-form">
       <a href="/add-location" class="btn1">Add Location</a>
@@ -49,7 +75,7 @@ <h1 class="marquee">Welcome To Our Online Inventory System</h1>
             <th>Actions</th>
           </tr>
         </thead>
-        <tbody>
+        <tbody id="table-results">
           {% for location in locations  %}
             <tr>
               <td>{{ location.location_name }}</td>
diff --git a/templates/purchaseList.html b/templates/purchaseList.html
index 8c269f0..e318bbc 100644
--- a/templates/purchaseList.html
+++ b/templates/purchaseList.html
@@ -8,12 +8,37 @@
     rel="stylesheet"
     href="{{ url_for('static', filename='main.css') }}"
     />
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+
+    <script>
+        $(document).ready(function(){
+           $('#search-button').on('click', function(){
+              var query = $('#query').val();
+              $.get('/search', {entity: 'purchase', query: query}, function(data){
+                 $('#table-results').empty();
+                 data.forEach(function(purchase){
+                    $('#table-results').append(`
+                    <tr>
+                        <td>${ purchase.date }</td>
+                        <td>${ purchase.store }</td>
+                        <td>${ purchase.warranty_period }</td>   
+                        <td class="action">
+                            <a href="/edit_purchase/purchase.id"><i class="fa fa-edit" style="font-size:24px"></i></a>
+                            <a href="/delete_purchase/purchase.id"><i class="fa fa-trash-o" style="font-size:24px"></i></a>
+                        </td>
+                    </tr>
+                    `);
+                 });
+              });
+           });
+        });
+    </script>
 </head>
 <body>
     <div class="header">
-        <input type="search" id="query" name="search" placeholder="Search...">
-        <button>Submit</button>
+        <input type="search" id="query" name="search" placeholder="Search by Store...">
+        <button id="search-button">Submit</button>
         <a href="#"><img src="{{ url_for('static', filename='logo.png') }}" alt=""></a>
     </div>
 
@@ -49,7 +74,7 @@ <h1 class="marquee">Welcome To Our Online Inventory System</h1>
                     <th>Actions</th>
                 </tr>
             </thead>
-            <tbody>
+            <tbody id="table-results">
                 {% for purchase in purchases %}
                     <tr>
                         <td>{{ purchase.date }}</td>