diff --git a/app/pages/dashboard-advertisements/index.tsx b/app/pages/dashboard-advertisements/index.tsx
index 3016786..495ac30 100644
--- a/app/pages/dashboard-advertisements/index.tsx
+++ b/app/pages/dashboard-advertisements/index.tsx
@@ -3,6 +3,7 @@ import { useState } from 'react'
 import { twMerge } from 'tailwind-merge'
 
 import { PlusIcon } from '~/components/icons/plus'
+import { Button } from '~/components/ui/button'
 import { UiTable } from '~/components/ui/table'
 import { TitleDashboard } from '~/components/ui/title-dashboard'
 import { BANNER } from '~/data/contents'
@@ -19,6 +20,7 @@ export const AdvertisementsPage = ({
 }: BannerUploadProperties) => {
   const [banner, setBanner] = useState<File | null>()
   const [link, setLink] = useState<string>('')
+  const [listAdvertisement, setListAdvertisement] = useState(true)
 
   const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0] || undefined
@@ -72,66 +74,82 @@ export const AdvertisementsPage = ({
     },
   }
 
+  const switchView = () => {
+    setListAdvertisement(!listAdvertisement)
+  }
+
   return (
     <div className="relative">
       <TitleDashboard title="Advertisement" />
-      <div className="flex gap-5">
-        <div className="w-[400px] rounded-xl bg-gray-50 py-6">
-          <Field className="mb-6">
-            <Label className="mb-2 block text-sm font-bold text-gray-700">
-              Banner Design
-            </Label>
-            <Label
-              htmlFor="banner-upload"
-              className="flex cursor-pointer items-center justify-between rounded-lg border-2 border-gray-300 p-3 hover:bg-gray-100 focus:ring-[#5363AB]"
-            >
-              <span className="text-gray-500">
-                {banner ? banner.name : 'Upload Banner'}
-              </span>
-              <PlusIcon className="h-4 w-4 text-gray-500" />
-            </Label>
-            <Input
-              id="banner-upload"
-              type="file"
-              accept="image/*"
-              // className="hidden"
-              onChange={handleFileChange}
-              aria-label="Upload Banner"
-            />
-          </Field>
-
-          <Field>
-            <Label className="mb-2 block text-sm font-bold text-gray-700">
-              Link Banner
-            </Label>
-            <Input
-              type="text"
-              placeholder="Link Banner"
-              className="w-full rounded-lg border-2 border-gray-300 p-3 hover:bg-gray-100 focus:ring-2 focus:ring-[#5363AB] focus:outline-none"
-              value={link}
-              onChange={handleLinkChange}
-              aria-label="Link Banner"
-            />
-          </Field>
-        </div>
-        {banner && (
-          <div className="h-[100px] w-[200px] shadow-2xl">
-            <div className="mb-4">
-              <img
-                src={URL.createObjectURL(banner)}
-                alt="Banner Preview"
-                className="h-max-[350px] rasio-15-1 w-full rounded-lg"
+      {listAdvertisement && (
+        <div className="flex gap-5">
+          <div className="w-[400px] rounded-xl bg-gray-50 py-6">
+            <Field className="mb-6">
+              <Label className="mb-2 block text-sm font-bold text-gray-700">
+                Banner Design
+              </Label>
+              <Label
+                htmlFor="banner-upload"
+                className="flex cursor-pointer items-center justify-between rounded-lg border-2 border-gray-300 p-3 hover:bg-gray-100 focus:ring-[#5363AB]"
+              >
+                <span className="text-gray-500">
+                  {banner ? banner.name : 'Upload Banner'}
+                </span>
+                <PlusIcon className="h-4 w-4 text-gray-500" />
+              </Label>
+              <Input
+                id="banner-upload"
+                type="file"
+                accept="image/*"
+                // className="hidden"
+                onChange={handleFileChange}
+                aria-label="Upload Banner"
               />
-            </div>
+            </Field>
+
+            <Field>
+              <Label className="mb-2 block text-sm font-bold text-gray-700">
+                Link Banner
+              </Label>
+              <Input
+                type="text"
+                placeholder="Link Banner"
+                className="w-full rounded-lg border-2 border-gray-300 p-3 hover:bg-gray-100 focus:ring-2 focus:ring-[#5363AB] focus:outline-none"
+                value={link}
+                onChange={handleLinkChange}
+                aria-label="Link Banner"
+              />
+            </Field>
           </div>
-        )}
-      </div>
-      <UiTable
-        data={dataBanner}
-        columns={dataColumns}
-        slots={dataSlot}
-        title="Daftar Banner"
-      />
+          {banner && (
+            <div className="h-[100px] w-[200px] shadow-2xl">
+              <div className="mb-4">
+                <img
+                  src={URL.createObjectURL(banner)}
+                  alt="Banner Preview"
+                  className="h-max-[350px] rasio-15-1 w-full rounded-lg"
+                />
+              </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"
+        />
+      )}
     </div>
   )
 }