diff --git a/app/pages/dashboard-advertisements/index.tsx b/app/pages/dashboard-advertisements/index.tsx
index 495ac30..6a596e6 100644
--- a/app/pages/dashboard-advertisements/index.tsx
+++ b/app/pages/dashboard-advertisements/index.tsx
@@ -1,4 +1,5 @@
-import { Field, Input, Label } from '@headlessui/react'
+import { Field, Input, Label, Select } from '@headlessui/react'
+import { MagnifyingGlassIcon } from '@heroicons/react/20/solid'
 import { useState } from 'react'
 import { twMerge } from 'tailwind-merge'
 
@@ -81,7 +82,8 @@ export const AdvertisementsPage = ({
   return (
     <div className="relative">
       <TitleDashboard title="Advertisement" />
-      {listAdvertisement && (
+
+      {!listAdvertisement && (
         <div className="flex gap-5">
           <div className="w-[400px] rounded-xl bg-gray-50 py-6">
             <Field className="mb-6">
@@ -132,23 +134,59 @@ export const AdvertisementsPage = ({
               </div>
             </div>
           )}
-          <Button
-            size="lg"
-            className="mt-6 ml-auto flex-none rounded"
-            onClick={switchView}
-          >
-            List Advertisement
-          </Button>
         </div>
       )}
 
-      {!listAdvertisement && (
-        <UiTable
-          data={dataBanner}
-          columns={dataColumns}
-          slots={dataSlot}
-          title="Daftar Banner"
-        />
+      {listAdvertisement && (
+        <>
+          <div className="mb-8 flex items-end justify-between">
+            <div className="flex items-center gap-5 rounded-lg bg-gray-50 text-[#363636]">
+              <div className="w-[400px]">
+                <Field>
+                  <Label className="mb-2 block text-sm font-medium">
+                    Cari Banner
+                  </Label>
+                  <div className="relative">
+                    <Input
+                      type="text"
+                      placeholder="Cari Nama"
+                      className="w-full rounded-lg bg-white p-2 pr-10 pl-4 shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
+                    />
+                    <div className="absolute inset-y-0 right-0 flex items-center pr-3">
+                      <MagnifyingGlassIcon className="h-5 w-5" />
+                    </div>
+                  </div>
+                </Field>
+              </div>
+
+              <div className="w-[235px]">
+                <Field>
+                  <Label className="mb-2 block text-sm font-medium">
+                    Status
+                  </Label>
+                  <Select className="w-full rounded-lg bg-white p-2 shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none">
+                    <option>Pilih Status</option>
+                    <option>Aktif</option>
+                    <option>Nonaktif</option>
+                  </Select>
+                </Field>
+              </div>
+            </div>
+            <Button
+              onClick={switchView}
+              className="text-md rounded-md"
+              size="lg"
+            >
+              Create New
+            </Button>
+          </div>
+          <UiTable
+            data={dataBanner}
+            columns={dataColumns}
+            slots={dataSlot}
+            title="Daftar Banner"
+          />
+        </>
       )}
     </div>
   )