diff --git a/admin/vendor-card.php b/admin/vendor-card.php
index 79fea72..f348835 100644
--- a/admin/vendor-card.php
+++ b/admin/vendor-card.php
@@ -80,564 +80,12 @@ $products = productList();
         <!-- LEFT MAIN SIDEBAR -->
         <?php include 'left-main-sidebar.php' ?>
 
+        <!-- HEADER -->
+        <?php include 'header.php' ?>
+
         <!-- PAGE WRAPPER -->
         <div class="ec-page-wrapper">
 
-            <!-- Header -->
-            <header class="ec-main-header" id="header">
-                <nav class="navbar navbar-static-top navbar-expand-lg">
-                    <!-- Sidebar toggle button -->
-                    <button id="sidebar-toggler" class="sidebar-toggle"></button>
-                    <!-- search form -->
-                    <div class="search-form d-lg-inline-block">
-                        <div class="input-group">
-                            <input type="text" name="query" id="search-input" class="form-control" placeholder="search.." autofocus autocomplete="off" />
-                            <button type="button" name="search" id="search-btn" class="btn btn-flat">
-                                <i class="mdi mdi-magnify"></i>
-                            </button>
-                        </div>
-                        <div id="search-results-container">
-                            <ul id="search-results"></ul>
-                        </div>
-                    </div>
-
-                    <!-- navbar right -->
-                    <div class="navbar-right">
-                        <ul class="nav navbar-nav">
-                            <!-- User Account -->
-                            <li class="dropdown user-menu">
-                                <button class="dropdown-toggle nav-link ec-drop" data-bs-toggle="dropdown" aria-expanded="false">
-                                    <img src="assets/img/user/user.png" class="user-image" alt="User Image" />
-                                </button>
-                                <ul class="dropdown-menu dropdown-menu-right ec-dropdown-menu">
-                                    <!-- User image -->
-                                    <li class="dropdown-header">
-                                        <img src="assets/img/user/user.png" class="img-circle" alt="User Image" />
-                                        <div class="d-inline-block">
-                                            John Deo <small class="pt-1">john.example@gmail.com</small>
-                                        </div>
-                                    </li>
-                                    <li>
-                                        <a href="user-profile.html">
-                                            <i class="mdi mdi-account"></i> My Profile
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a href="#">
-                                            <i class="mdi mdi-email"></i> Message
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a href="#"> <i class="mdi mdi-diamond-stone"></i> Projects </a>
-                                    </li>
-                                    <li class="right-sidebar-in">
-                                        <a href="javascript:0"> <i class="mdi mdi-settings-outline"></i> Setting </a>
-                                    </li>
-                                    <li class="dropdown-footer">
-                                        <a href="/logout.php"> <i class="mdi mdi-logout"></i> Log Out </a>
-                                    </li>
-                                </ul>
-                            </li>
-                            <li class="dropdown notifications-menu custom-dropdown">
-                                <button class="dropdown-toggle notify-toggler custom-dropdown-toggler">
-                                    <i class="mdi mdi-bell-outline"></i>
-                                </button>
-
-                                <div class="card card-default dropdown-notify dropdown-menu-right mb-0">
-                                    <div class="card-header card-header-border-bottom px-3">
-                                        <h2>Notifications</h2>
-                                    </div>
-
-                                    <div class="card-body px-0 py-0">
-                                        <ul class="nav nav-tabs nav-style-border p-0 justify-content-between" id="myTab" role="tablist">
-                                            <li class="nav-item mx-3 my-0 py-0">
-                                                <a href="#" class="nav-link active pb-3" id="home2-tab" data-bs-toggle="tab" data-bs-target="#home2" role="tab" aria-controls="home2" aria-selected="true">All (10)</a>
-                                            </li>
-
-                                            <li class="nav-item mx-3 my-0 py-0">
-                                                <a href="#" class="nav-link pb-3" id="profile2-tab" data-bs-toggle="tab" data-bs-target="#profile2" role="tab" aria-controls="profile2" aria-selected="false">Msgs (5)</a>
-                                            </li>
-
-                                            <li class="nav-item mx-3 my-0 py-0">
-                                                <a href="#" class="nav-link pb-3" id="contact2-tab" data-bs-toggle="tab" data-bs-target="#contact2" role="tab" aria-controls="contact2" aria-selected="false">Others (5)</a>
-                                            </li>
-                                        </ul>
-
-                                        <div class="tab-content" id="myTabContent3">
-                                            <div class="tab-pane fade show active" id="home2" role="tabpanel">
-                                                <ul class="list-unstyled" data-simplebar style="height: 360px">
-                                                    <li>
-                                                        <a href="javscript:void(0)" class="media media-message media-notification">
-                                                            <div class="position-relative mr-3">
-                                                                <img class="rounded-circle" src="assets/img/user/u2.jpg" alt="Image">
-                                                                <span class="status away"></span>
-                                                            </div>
-                                                            <div class="media-body d-flex justify-content-between">
-                                                                <div class="message-contents">
-                                                                    <h4 class="title">Nitin</h4>
-                                                                    <p class="last-msg">Lorem ipsum dolor sit, amet
-                                                                        consectetur adipisicing elit. Nam itaque
-                                                                        doloremque odio, eligendi delectus vitae.</p>
-
-                                                                    <span class="font-size-12 font-weight-medium text-secondary">
-                                                                        <i class="mdi mdi-clock-outline"></i> 30 min
-                                                                        ago...
-                                                                    </span>
-                                                                </div>
-                                                            </div>
-                                                        </a>
-                                                    </li>
-
-                                                    <li>
-                                                        <a href="javscript:void(0)" class="media media-message media-notification media-active">
-                                                            <div class="position-relative mr-3">
-                                                                <img class="rounded-circle" src="assets/img/user/u1.jpg" alt="Image">
-                                                                <span class="status active"></span>
-                                                            </div>
-                                                            <div class="media-body d-flex justify-content-between">
-                                                                <div class="message-contents">
-                                                                    <h4 class="title">Lovina</h4>
-                                                                    <p class="last-msg">Donec mattis augue a nisl
-                                                                        consequat, nec imperdiet ex rutrum. Fusce et
-                                                                        vehicula enim. Sed in enim eu odio vehic.</p>
-
-                                                                    <span class="font-size-12 font-weight-medium text-white">
-                                                                        <i class="mdi mdi-clock-outline"></i> Just
-                                                                        now...
-                                                                    </span>
-                                                                </div>
-                                                            </div>
-                                                        </a>
-                                                    </li>
-
-                                                    <li>
-                                                        <a href="javscript:void(0)" class="media media-message media-notification">
-                                                            <div class="position-relative mr-3">
-                                                                <img class="rounded-circle" src="assets/img/user/u5.jpg" alt="Image">
-                                                                <span class="status away"></span>
-                                                            </div>
-                                                            <div class="media-body d-flex justify-content-between">
-                                                                <div class="message-contents">
-                                                                    <h4 class="title">Crinali</h4>
-                                                                    <p class="last-msg">Lorem ipsum dolor sit, amet
-                                                                        consectetur adipisicing elit. Nam itaque
-                                                                        doloremque odio, eligendi delectus vitae.</p>
-
-                                                                    <span class="font-size-12 font-weight-medium text-secondary">
-                                                                        <i class="mdi mdi-clock-outline"></i> 1 hrs
-                                                                        ago...
-                                                                    </span>
-                                                                </div>
-                                                            </div>
-                                                        </a>
-                                                    </li>
-
-                                                    <li>
-                                                        <a href="javscript:void(0)" class="media media-message media-notification event-active">
-
-                                                            <div class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-info text-white">
-                                                                <i class="mdi mdi-calendar-check font-size-20"></i>
-                                                            </div>
-
-                                                            <div class="media-body d-flex justify-content-between">
-                                                                <div class="message-contents">
-                                                                    <h4 class="title">Upcomming event added</h4>
-                                                                    <p class="last-msg font-size-14">03/Jan/2020 (1pm -
-                                                                        2pm)</p>
-
-                                                                    <span class="font-size-12 font-weight-medium text-secondary">
-                                                                        <i class="mdi mdi-clock-outline"></i> 10 min
-                                                                        ago...
-                                                                    </span>
-                                                                </div>
-                                                            </div>
-                                                        </a>
-                                                    </li>
-
-                                                    <li>
-                                                        <a href="javscript:void(0)" class="media media-message media-notification">
-
-                                                            <div class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-warning text-white">
-                                                                <i class="mdi mdi-chart-areaspline font-size-20"></i>
-                                                            </div>
-
-                                                            <div class="media-body d-flex justify-content-between">
-                                                                <div class="message-contents">
-                                                                    <h4 class="title">Yearly Sales report</h4>
-                                                                    <p class="last-msg font-size-14">Lorem ipsum dolor
-                                                                        sit, amet consectetur adipisicing elit. Nam
-                                                                        itaque doloremque odio, eligendi delectus vitae.
-                                                                    </p>
-
-                                                                    <span class="font-size-12 font-weight-medium text-secondary">
-                                                                        <i class="mdi mdi-clock-outline"></i> 1 hrs
-                                                                        ago...
-                                                                    </span>
-                                                                </div>
-                                                            </div>
-                                                        </a>
-                                                    </li>
-
-                                                    <li>
-                                                        <a href="javscript:void(0)" class="media media-message media-notification">
-
-                                                            <div class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-primary text-white">
-                                                                <i class="mdi mdi-account-multiple-check font-size-20"></i>
-                                                            </div>
-
-                                                            <div class="media-body d-flex justify-content-between">
-                                                                <div class="message-contents">
-                                                                    <h4 class="title">New request</h4>
-                                                                    <p class="last-msg font-size-14">Add Dany Jones as
-                                                                        your contact consequat nec imperdiet ex rutrum.
-                                                                        Fusce et vehicula enim. Sed in enim.</p>
-
-                                                                    <span class="my-1 btn btn-sm btn-success">Accept</span>
-                                                                    <span class="my-1 btn btn-sm btn-secondary">Delete</span>
-
-                                                                    <span class="font-size-12 font-weight-medium text-secondary d-block">
-                                                                        <i class="mdi mdi-clock-outline"></i> 5 min
-                                                                        ago...
-                                                                    </span>
-                                                                </div>
-                                                            </div>
-                                                        </a>
-                                                    </li>
-
-                                                    <li>
-                                                        <a href="javscript:void(0)" class="media media-message media-notification">
-
-                                                            <div class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-danger text-white">
-                                                                <i class="mdi mdi-server-network-off font-size-20"></i>
-                                                            </div>
-
-                                                            <div class="media-body d-flex justify-content-between">
-                                                                <div class="message-contents">
-                                                                    <h4 class="title">Server overloaded</h4>
-                                                                    <p class="last-msg font-size-14">Donec mattis augue
-                                                                        a nisl consequat, nec imperdiet ex rutrum. Fusce
-                                                                        et vehicula enim. Sed in enim eu odio vehic.</p>
-
-                                                                    <span class="font-size-12 font-weight-medium text-secondary">
-                                                                        <i class="mdi mdi-clock-outline"></i> 30 min
-                                                                        ago...
-                                                                    </span>
-                                                                </div>
-                                                            </div>
-                                                        </a>
-                                                    </li>
-
-                                                    <li>
-                                                        <a href="javscript:void(0)" class="media media-message media-notification">
-
-                                                            <div class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-purple text-white">
-                                                                <i class="mdi mdi-playlist-check font-size-20"></i>
-                                                            </div>
-
-                                                            <div class="media-body d-flex justify-content-between">
-                                                                <div class="message-contents">
-                                                                    <h4 class="title">Task complete</h4>
-                                                                    <p class="last-msg font-size-14">Nam ut nisi erat.
-                                                                        Ut quis tortor varius, hendrerit arcu quis,
-                                                                        congue nisl. In scelerisque, sem ut ve.</p>
-
-                                                                    <span class="font-size-12 font-weight-medium text-secondary">
-                                                                        <i class="mdi mdi-clock-outline"></i> 2 hrs
-                                                                        ago...
-                                                                    </span>
-                                                                </div>
-                                                            </div>
-                                                        </a>
-                                                    </li>
-
-                                                </ul>
-                                            </div>
-
-                                            <div class="tab-pane fade" id="profile2" role="tabpanel">
-                                                <ul class="list-unstyled" data-simplebar style="height: 360px">
-                                                    <li>
-                                                        <a href="javscript:void(0)" class="media media-message media-notification">
-                                                            <div class="position-relative mr-3">
-                                                                <img class="rounded-circle" src="assets/img/user/u6.jpg" alt="Image">
-                                                                <span class="status away"></span>
-                                                            </div>
-                                                            <div class="media-body d-flex justify-content-between">
-                                                                <div class="message-contents">
-                                                                    <h4 class="title">Hardiko</h4>
-                                                                    <p class="last-msg">Donec mattis augue a nisl
-                                                                        consequat, nec imperdiet ex rutrum. Fusce et
-                                                                        vehicula enim. Sed in enim eu odio vehic.</p>
-
-                                                                    <span class="font-size-12 font-weight-medium text-secondary">
-                                                                        <i class="mdi mdi-clock-outline"></i> 1 hrs
-                                                                        ago...
-                                                                    </span>
-                                                                </div>
-                                                            </div>
-                                                        </a>
-                                                    </li>
-
-                                                    <li>
-                                                        <a href="javscript:void(0)" class="media media-message media-notification">
-                                                            <div class="position-relative mr-3">
-                                                                <img class="rounded-circle" src="assets/img/user/u7.jpg" alt="Image">
-                                                                <span class="status away"></span>
-                                                            </div>
-                                                            <div class="media-body d-flex justify-content-between">
-                                                                <div class="message-contents">
-                                                                    <h4 class="title">Browin</h4>
-                                                                    <p class="last-msg">Nam ut nisi erat. Ut quis tortor
-                                                                        varius, hendrerit arcu quis, congue nisl. In
-                                                                        scelerisque, sem ut ve.</p>
-
-                                                                    <span class="font-size-12 font-weight-medium text-secondary">
-                                                                        <i class="mdi mdi-clock-outline"></i> 1 hrs
-                                                                        ago...
-                                                                    </span>
-                                                                </div>
-                                                            </div>
-                                                        </a>
-                                                    </li>
-
-                                                    <li>
-                                                        <a href="javscript:void(0)" class="media media-message media-notification media-active">
-                                                            <div class="position-relative mr-3">
-                                                                <img class="rounded-circle" src="assets/img/user/u1.jpg" alt="Image">
-                                                                <span class="status active"></span>
-                                                            </div>
-                                                            <div class="media-body d-flex justify-content-between">
-                                                                <div class="message-contents">
-                                                                    <h4 class="title">jenelia</h4>
-                                                                    <p class="last-msg">Donec mattis augue a nisl
-                                                                        consequat, nec imperdiet ex rutrum. Fusce et
-                                                                        vehicula enim. Sed in enim eu odio vehic.</p>
-
-                                                                    <span class="font-size-12 font-weight-medium text-white">
-                                                                        <i class="mdi mdi-clock-outline"></i> Just
-                                                                        now...
-                                                                    </span>
-                                                                </div>
-                                                            </div>
-                                                        </a>
-                                                    </li>
-
-                                                    <li>
-                                                        <a href="javscript:void(0)" class="media media-message media-notification">
-                                                            <div class="position-relative mr-3">
-                                                                <img class="rounded-circle" src="assets/img/user/u2.jpg" alt="Image">
-                                                                <span class="status away"></span>
-                                                            </div>
-                                                            <div class="media-body d-flex justify-content-between">
-                                                                <div class="message-contents">
-                                                                    <h4 class="title">Bhavlio</h4>
-                                                                    <p class="last-msg">Lorem ipsum dolor sit, amet
-                                                                        consectetur adipisicing elit. Nam itaque
-                                                                        doloremque odio, eligendi delectus vitae.</p>
-
-                                                                    <span class="font-size-12 font-weight-medium text-secondary">
-                                                                        <i class="mdi mdi-clock-outline"></i> 1 hrs
-                                                                        ago...
-                                                                    </span>
-                                                                </div>
-                                                            </div>
-                                                        </a>
-                                                    </li>
-
-                                                    <li>
-                                                        <a href="javscript:void(0)" class="media media-message media-notification">
-                                                            <div class="position-relative mr-3">
-                                                                <img class="rounded-circle" src="assets/img/user/u5.jpg" alt="Image">
-                                                                <span class="status away"></span>
-                                                            </div>
-                                                            <div class="media-body d-flex justify-content-between">
-                                                                <div class="message-contents">
-                                                                    <h4 class="title">Browini</h4>
-                                                                    <p class="last-msg">Lorem ipsum dolor sit, amet
-                                                                        consectetur adipisicing elit. Nam itaque
-                                                                        doloremque odio, eligendi delectus vitae.</p>
-
-                                                                    <span class="font-size-12 font-weight-medium text-secondary">
-                                                                        <i class="mdi mdi-clock-outline"></i> 1 hrs
-                                                                        ago...
-                                                                    </span>
-                                                                </div>
-                                                            </div>
-                                                        </a>
-                                                    </li>
-
-                                                </ul>
-                                            </div>
-
-                                            <div class="tab-pane fade" id="contact2" role="tabpanel">
-                                                <ul class="list-unstyled" data-simplebar style="height: 360px">
-                                                    <li>
-                                                        <a href="javscript:void(0)" class="media media-message media-notification event-active">
-
-                                                            <div class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-info text-white">
-                                                                <i class="mdi mdi-calendar-check font-size-20"></i>
-                                                            </div>
-
-                                                            <div class="media-body d-flex justify-content-between">
-                                                                <div class="message-contents">
-                                                                    <h4 class="title">Upcomming event added</h4>
-                                                                    <p class="last-msg font-size-14">03/Jan/2020 (1pm -
-                                                                        2pm)</p>
-
-                                                                    <span class="font-size-12 font-weight-medium text-secondary">
-                                                                        <i class="mdi mdi-clock-outline"></i> 10 min
-                                                                        ago...
-                                                                    </span>
-                                                                </div>
-                                                            </div>
-                                                        </a>
-                                                    </li>
-
-                                                    <li>
-                                                        <a href="javscript:void(0)" class="media media-message media-notification">
-
-                                                            <div class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-warning text-white">
-                                                                <i class="mdi mdi-chart-areaspline font-size-20"></i>
-                                                            </div>
-
-                                                            <div class="media-body d-flex justify-content-between">
-                                                                <div class="message-contents">
-                                                                    <h4 class="title">New Sales report</h4>
-                                                                    <p class="last-msg font-size-14">Lorem ipsum dolor
-                                                                        sit, amet consectetur adipisicing elit. Nam
-                                                                        itaque doloremque odio, eligendi delectus vitae.
-                                                                    </p>
-
-                                                                    <span class="font-size-12 font-weight-medium text-secondary">
-                                                                        <i class="mdi mdi-clock-outline"></i> 1 hrs
-                                                                        ago...
-                                                                    </span>
-                                                                </div>
-                                                            </div>
-                                                        </a>
-                                                    </li>
-
-                                                    <li>
-                                                        <a href="javscript:void(0)" class="media media-message media-notification">
-
-                                                            <div class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-primary text-white">
-                                                                <i class="mdi mdi-account-multiple-check font-size-20"></i>
-                                                            </div>
-
-                                                            <div class="media-body d-flex justify-content-between">
-                                                                <div class="message-contents">
-                                                                    <h4 class="title">New Request</h4>
-                                                                    <p class="last-msg font-size-14">Add Dany Jones as
-                                                                        your contact consequat nec imperdiet ex rutrum.
-                                                                        Fusce et vehicula enim. Sed in enim.</p>
-
-                                                                    <span class="my-1 btn btn-sm btn-success">Accept</span>
-                                                                    <span class="my-1 btn btn-sm btn-secondary">Delete</span>
-
-                                                                    <span class="font-size-12 font-weight-medium text-secondary d-block">
-                                                                        <i class="mdi mdi-clock-outline"></i> 5 min
-                                                                        ago...
-                                                                    </span>
-                                                                </div>
-                                                            </div>
-                                                        </a>
-                                                    </li>
-
-                                                    <li>
-                                                        <a href="javscript:void(0)" class="media media-message media-notification">
-
-                                                            <div class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-danger text-white">
-                                                                <i class="mdi mdi-server-network-off font-size-20"></i>
-                                                            </div>
-
-                                                            <div class="media-body d-flex justify-content-between">
-                                                                <div class="message-contents">
-                                                                    <h4 class="title">Server overloaded</h4>
-                                                                    <p class="last-msg font-size-14">Donec mattis augue
-                                                                        a nisl consequat, nec imperdiet ex rutrum. Fusce
-                                                                        et vehicula enim. Sed in enim eu odio vehic.</p>
-
-                                                                    <span class="font-size-12 font-weight-medium text-secondary">
-                                                                        <i class="mdi mdi-clock-outline"></i> 30 min
-                                                                        ago...
-                                                                    </span>
-                                                                </div>
-                                                            </div>
-                                                        </a>
-                                                    </li>
-
-                                                    <li>
-                                                        <a href="javscript:void(0)" class="media media-message media-notification">
-
-                                                            <div class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-purple text-white">
-                                                                <i class="mdi mdi-playlist-check font-size-20"></i>
-                                                            </div>
-
-                                                            <div class="media-body d-flex justify-content-between">
-                                                                <div class="message-contents">
-                                                                    <h4 class="title">New Task complete</h4>
-                                                                    <p class="last-msg font-size-14">Nam ut nisi erat.
-                                                                        Ut quis tortor varius, hendrerit arcu quis,
-                                                                        congue nisl. In scelerisque, sem ut ve.</p>
-
-                                                                    <span class="font-size-12 font-weight-medium text-secondary">
-                                                                        <i class="mdi mdi-clock-outline"></i> 2 hrs
-                                                                        ago...
-                                                                    </span>
-                                                                </div>
-                                                            </div>
-                                                        </a>
-                                                    </li>
-                                                </ul>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-
-                                <ul class="dropdown-menu dropdown-menu-right d-none">
-                                    <li class="dropdown-header">You have 5 notifications</li>
-                                    <li>
-                                        <a href="#">
-                                            <i class="mdi mdi-account-plus"></i> New user registered
-                                            <span class=" font-size-12 d-inline-block float-right"><i class="mdi mdi-clock-outline"></i> 10 AM</span>
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a href="#">
-                                            <i class="mdi mdi-account-remove"></i> User deleted
-                                            <span class=" font-size-12 d-inline-block float-right"><i class="mdi mdi-clock-outline"></i> 07 AM</span>
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a href="#">
-                                            <i class="mdi mdi-chart-areaspline"></i> Sales report is ready
-                                            <span class=" font-size-12 d-inline-block float-right"><i class="mdi mdi-clock-outline"></i> 12 PM</span>
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a href="#">
-                                            <i class="mdi mdi-account-supervisor"></i> New client
-                                            <span class=" font-size-12 d-inline-block float-right"><i class="mdi mdi-clock-outline"></i> 10 AM</span>
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a href="#">
-                                            <i class="mdi mdi-server-network-off"></i> Server overloaded
-                                            <span class=" font-size-12 d-inline-block float-right"><i class="mdi mdi-clock-outline"></i> 05 AM</span>
-                                        </a>
-                                    </li>
-                                    <li class="dropdown-footer">
-                                        <a class="text-center" href="#"> View All </a>
-                                    </li>
-                                </ul>
-                            </li>
-                            <li class="right-sidebar-in right-sidebar-2-menu">
-                                <i class="mdi mdi-settings-outline mdi-spin"></i>
-                            </li>
-                        </ul>
-                    </div>
-                </nav>
-            </header>
-
             <!-- CONTENT WRAPPER -->
             <div class="ec-content-wrapper ec-vendor-wrapper">
                 <div class="content">
@@ -651,8 +99,16 @@ $products = productList();
                             </button>
                         </div>
                     </div>
-
+                    
                     <div class="card card-default p-4 ec-card-space">
+                            <div class="col-lg-6 col-md-12">
+                                <form style="display:flex; margin-bottom:50px;" method="POST" action="vendor-card-action.php">
+                                    <input type="text" name="search" class="form-control" id="searchProduct" placeholder="search with vendor name..">
+                                    <button class="submit" type="submit" id="search-btn" class="btn btn-flat">
+                                        <i class="mdi mdi-magnify" style="font-size:20px; color:gray; margin-left:-40px;"></i>
+                                    </button> 
+                                </form>
+                            </div>
                         <div class="ec-vendor-card mt-m-24px row">
 
                             <?php
@@ -665,6 +121,27 @@ $products = productList();
                             $start = ($currentpage - 1) * $vendorsPerPage;
                             $end = $start + $vendorsPerPage - 1;
 
+                            $vendorsCopy = $vendors;
+											
+                            if (!empty($_GET['search']) ) {
+                                $filteredProducts=[];
+                                foreach ($vendorsCopy as $result) {
+                                $vendorName = strtolower($result['user_login']);
+                                    if (
+                                        strpos($vendorName,$_GET['search'])!==false
+                                    ) {
+                                        $filteredProducts[] = $result;
+                                    } else{
+                                    }
+                                }
+
+                                $vendors = $filteredProducts;
+                                $totalVendors = count($filteredProducts);
+                                // $vendorsPerPage = 20;
+                            }
+                            if ($totalVendors == 0) {
+                                echo '<p style="padding-top:30px; padding-left:20px;">No Vendor Found.</p>';
+                            }
                             // $vendors = vendorList();
                             for ($x = $start; $x <= $end && $x < $totalVendors; $x++) {
                                 $vendor = $vendors[$x];
@@ -684,7 +161,7 @@ $products = productList();
                                                     if (isset($vendor['vendor_image']) && !empty($vendor['vendor_image'])) {
                                                         echo '<img src="' . $vendor['vendor_image'] . '" class="img-fluid rounded-circle" alt="Avatar Image" style="width: 150px; height: 150px; object-fit: cover; border-radius: 50%;"> ';
                                                     } else {
-                                                        echo '<img src="assets/img/vendor/u1.jpg" class="img-fluid rounded-circle" alt="Placeholder Image">';
+                                                        echo '<img src="https://api.obanana.com/images/storage/web_images/1710214273217-no_image.png" class="img-fluid rounded-circle" alt="Placeholder Image">';
                                                     }
                                                     ?>
                                                 </div>
@@ -694,15 +171,15 @@ $products = productList();
                                                 <ul class="list-unstyled">
                                                     <li class="d-flex mb-1">
                                                         <i class="mdi mdi-cellphone-basic mr-1"></i>
-                                                        <span>
+                                                        <span style="font-size:13px;">
                                                             <?php
-                                                            echo isset($vendor['phone']) && !empty($vendor['phone']) ? $vendor['phone'] : 'No Number yet';
+                                                            echo isset($vendor['phone']) && !empty($vendor['phone']) ? $vendor['phone']: 'No Number yet';
                                                             ?>
                                                         </span>
                                                     </li>
                                                     <li class="d-flex">
                                                         <i class="mdi mdi-email mr-1"></i>
-                                                        <span>
+                                                        <span style="font-size:13px;">
                                                             <?php
                                                             echo isset($vendor['user_email']) && !empty($vendor['user_email']) ? $vendor['user_email'] : 'No Email yet';
                                                             ?>