diff --git a/app.vue b/app.vue
index a1c271a..cd79df2 100644
--- a/app.vue
+++ b/app.vue
@@ -23,7 +23,7 @@ useHead({
     },
   ],
   bodyAttrs: {
-    class: "dark:bg-surface-900 dark:text-gray-300",
+    class: "bg-surface-200/80 dark:bg-surface-900 dark:text-gray-300",
   },
 })
 </script>
diff --git a/assets/base.css b/assets/base.css
index da645e8..858b012 100644
--- a/assets/base.css
+++ b/assets/base.css
@@ -43,18 +43,18 @@
   --p-primary-700: #23514e;
   --p-primary-900: #1c4240;
 
-  --p-surface-0: #ffffff;
-  --p-surface-50: #f8fafc;
-  --p-surface-100: #f1f5f9;
-  --p-surface-200: #e2e8f0;
-  --p-surface-300: #cbd5e1;
-  --p-surface-400: #94a3b8;
-  --p-surface-500: #64748b;
-  --p-surface-600: #475569;
-  --p-surface-700: #23514e;
-  --p-surface-800: #121d31;
-  --p-surface-900: #0f172a;
-  --p-surface-950: #030e0d;
+  --p-surface-0: hsl(0 0% 100%);
+  --p-surface-50: hsl(210 40% 98%);
+  --p-surface-100: hsl(210 32% 91%);
+  --p-surface-200: hsl(210 35% 80%);
+  --p-surface-300: hsl(213 27% 84%);
+  --p-surface-400: hsl(215 20% 65%);
+  --p-surface-500: hsl(215 16% 47%);
+  --p-surface-600: hsl(215 19% 35%);
+  --p-surface-700: hsl(219 35% 17%);
+  --p-surface-800: hsl(219 46% 13%);
+  --p-surface-900: hsl(222 47% 11%);
+  --p-surface-950: hsl(175 65% 3%);
 
   --p-content-border-radius: 0.5rem;
 }
diff --git a/assets/main.css b/assets/main.css
index e54447b..a740c37 100644
--- a/assets/main.css
+++ b/assets/main.css
@@ -14,6 +14,9 @@ input {
 label {
   display: block;
   padding-block-start: 0.75rem;
+  line-height: 1;
+
+  @apply dark:text-gray-300;
 }
 
 button:disabled {
@@ -54,7 +57,7 @@ a {
 }
 
 .main-section {
-  @apply p-4 bg-slate-200 dark:bg-surface-800/70 rounded-lg;
+  @apply p-6 bg-slate-100 dark:bg-surface-800/70 rounded-lg;
 }
 
 table {
diff --git a/components/TheFooter.vue b/components/TheFooter.vue
index 69c0227..3e56f0a 100644
--- a/components/TheFooter.vue
+++ b/components/TheFooter.vue
@@ -1,5 +1,5 @@
 <template>
-  <footer class="dark:bg-surface-800">
+  <footer class="dark:bg-surface-700">
     <p>Klrfl, 2023.</p>
     <a class="block" href="https://github.com/pplg-smkmetland/metschoo-library">
       This website on Github
diff --git a/components/TheNavbar.vue b/components/TheNavbar.vue
index 72cad1a..c29b6c4 100644
--- a/components/TheNavbar.vue
+++ b/components/TheNavbar.vue
@@ -1,14 +1,19 @@
 <script setup lang="ts">
+import MdiHamburgerMenu from "~icons/mdi/hamburger-menu"
+import MdiClose from "~icons/mdi/close"
+
 const openNavBtn = ref(null)
 const closeNavBtn = ref(null)
 const navlinks = ref<HTMLUListElement | null>(null)
 
 function openNav() {
-  navlinks.value?.classList.add("active")
+  navlinks.value?.classList.remove("-translate-y-full")
+  navlinks.value?.classList.add("-translate-y-0")
 }
 
 function closeNav() {
-  navlinks.value?.classList.remove("active")
+  navlinks.value?.classList.add("-translate-y-full")
+  navlinks.value?.classList.remove("-translate-y-0")
 }
 
 const user = useSupabaseUser()
@@ -18,20 +23,25 @@ const isAdmin = computed(() =>
 </script>
 
 <template>
-  <nav class="bg-primary text-primary-contrast z-10 navbar shadow-md">
+  <nav
+    class="flex justify-between items-center sticky top-0 bg-primary dark:bg-surface-700/90 text-primary-contrast z-10 shadow-md navbar"
+  >
     <div class="logo">
-      <img src="/logo.svg" alt="Logo Metschoo Library" />
+      <img src="/logo.svg" alt="Logo Metschoo Library" class="h-14" />
     </div>
 
-    <ul ref="navlinks" class="nav-links">
-      <li class="nav-links__header">
+    <ul
+      ref="navlinks"
+      class="flex flex-col absolute top-0 left-0 -translate-y-full w-full md:flex-row md:relative md:translate-y-0 md:w-auto bg-inherit dark:bg-surface-700 transition-transform z-10"
+    >
+      <li class="flex justify-between md:hidden md:appearance-none">
         <div class="logo">
           <NuxtLink to="/">
-            <img src="/logo.svg" alt="Logo Metschoo Library" />
+            <img src="/logo.svg" alt="Logo Metschoo Library" height="50" class="w-16" />
           </NuxtLink>
         </div>
-        <button ref="closeNavBtn" class="nav-btn close" @click="closeNav">
-          <i class="fa-solid fa-xmark" />
+        <button ref="closeNavBtn" class="nav-btn" @click="closeNav">
+          <MdiClose />
         </button>
       </li>
       <li>
@@ -43,21 +53,22 @@ const isAdmin = computed(() =>
       <li>
         <NuxtLink class="nav-link" to="/wishlist"> Wishlist </NuxtLink>
       </li>
+
       <template v-if="user">
         <li v-if="!isAdmin">
-          <NuxtLink to="/profil" class="nav-link nav-link--cta"> Profil </NuxtLink>
+          <NuxtLink to="/profil" class="nav-link bg-primary-700"> Profil </NuxtLink>
         </li>
         <li v-else>
-          <NuxtLink to="/admin" class="nav-link nav-link--cta"> Admin </NuxtLink>
+          <NuxtLink to="/admin" class="nav-link bg-primary-700"> Admin </NuxtLink>
         </li>
       </template>
       <li v-else>
-        <NuxtLink to="/login" class="nav-link nav-link--cta"> Masuk </NuxtLink>
+        <NuxtLink to="/login" class="nav-link bg-primary-700"> Masuk </NuxtLink>
       </li>
     </ul>
 
-    <button ref="openNavBtn" class="nav-btn open" @click="openNav">
-      <i class="fa-solid fa-bars" />
+    <button ref="openNavBtn" class="nav-btn" @click="openNav">
+      <MdiHamburgerMenu />
     </button>
   </nav>
 </template>
@@ -65,94 +76,35 @@ const isAdmin = computed(() =>
 <style scoped>
 .navbar {
   grid-area: navbar;
-
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  position: sticky;
-  top: 0;
-}
-
-.logo img {
-  height: 3.5rem;
-}
-
-.nav-links {
-  background: inherit;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  width: 100%;
-
-  display: flex;
-  flex-direction: column;
-  position: absolute;
-  top: 0;
-  left: 0;
-  translate: 0 -100%;
-  transition: translate 200ms ease;
-}
-
-.nav-links.active {
-  translate: 0 0;
-  z-index: 10;
-}
-
-.nav-links__header {
-  padding-inline: 0.5rem;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
 }
 
 .nav-link,
 .nav-btn {
-  color: inherit;
-  text-decoration: none;
-  padding: 1rem;
-  display: block;
-  position: relative;
+  @apply text-gray-300/90 hover:text-gray-100 dark:hover:bg-surface-800 transition-colors p-4 block relative;
 }
 
-.nav-link--cta {
-  background: var(--primary-200);
+.nav-btn {
+  @apply md:hidden;
 }
 
-.nav-link.active::before {
+.nav-link::before {
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
-  height: 100%;
-  width: 0.4rem;
-  background: var(--nav-link-active);
-}
-
-@media (hover: hover) {
-  .nav-links a:hover {
-    background: var(--primary-200);
+  width: 100%;
+  height: 0.2rem;
+  transition: opacity 200ms ease;
+  opacity: 0;
+  background: var(--p-primary-700);
+
+  @media screen and (max-width: 50em) {
+    width: 0.2rem;
+    height: 100%;
   }
 }
 
-@media screen and (min-width: 50em) {
-  .nav-link.active::before {
-    height: 0.4rem;
-    width: 100%;
-  }
-
-  .nav-links {
-    flex-direction: row;
-    position: relative;
-    translate: 0;
-    width: auto;
-  }
-
-  .nav-links__header {
-    display: none;
-  }
-
-  .nav-btn {
-    display: none;
-  }
+.nav-link.router-link-active::before {
+  opacity: 1;
 }
 </style>
diff --git a/components/signIn/SignInForm.vue b/components/signIn/SignInForm.vue
index afebbf0..24d8a3f 100644
--- a/components/signIn/SignInForm.vue
+++ b/components/signIn/SignInForm.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { useDialog } from "@/composables"
 import { AuthError } from "@supabase/supabase-js"
 
 const isSigningIn = ref(false)
@@ -24,19 +23,25 @@ const data = ref({
   confirmPassword: "",
 })
 
-const { dialog } = useDialog()
-
 const authStore = useAuthStore()
 const router = useRouter()
 
+const toast = useToast()
 async function handleSignIn() {
   try {
     const error = await authStore.handleSignIn(data.value.email, data.value.password)
     if (error) throw error
     router.push("/")
   } catch (err) {
-    if (err instanceof AuthError) dialog.value.open(err.message)
-    else console.error((err as Error).message)
+    console.error(err)
+
+    if (err instanceof AuthError) {
+      toast.add({
+        severity: "error",
+        summary: "Gagal masuk!",
+        detail: "Ada sebuah kesalahan saat masuk. Silahkan coba lagi",
+      })
+    }
   }
 }
 
@@ -52,23 +57,40 @@ async function handleSignUp() {
     await authStore.handleSignUp(email, password)
     alert("Cek email lu ya buat verifikasi email!")
   } catch (err) {
-    if (err instanceof AuthError) dialog.value.open(err.message)
+    console.error(err)
+
+    if (err instanceof AuthError) {
+      toast.add({
+        severity: "error",
+        summary: "Gagal mendaftar!",
+        detail: "Ada sebuah kesalahan saat mendaftar. Silahkan coba lagi",
+      })
+    }
   }
 }
 </script>
 
 <template>
-  <div class="signin">
-    <h1 v-if="isSigningIn">
-      <span>Masuk</span>
-      <p>Masuk ke akun Metschoo Library yang sudah anda miliki!</p>
-    </h1>
-    <h1 v-else>
-      <span>Daftar</span>
-      <p>Buat akun Metschoo Library yang baru!</p>
-    </h1>
-
-    <div v-if="isSigningIn" class="form-container log-in">
+  <section
+    class="flex flex-col gap-4 flex-auto max-w-xl p-8 rounded-lg bg-surface-300 dark:bg-surface-700"
+  >
+    <header>
+      <template v-if="isSigningIn">
+        <h1 v-if="isSigningIn" class="text-center">
+          <span>Masuk</span>
+        </h1>
+        <p class="text-center m-0">Masuk ke akun Metschoo Library yang sudah anda miliki!</p>
+      </template>
+
+      <template v-else>
+        <h1 class="text-center">
+          <span>Daftar</span>
+        </h1>
+        <p class="text-center m-0">Buat akun Metschoo Library yang baru!</p>
+      </template>
+    </header>
+
+    <div v-if="isSigningIn" class="flex-1">
       <form class="flex flex-col gap-2" @submit.prevent="handleSignIn">
         <label for="login-email">Email</label>
         <InputText
@@ -91,7 +113,7 @@ async function handleSignUp() {
       </form>
     </div>
 
-    <div v-else class="form-container sign-up">
+    <div v-else class="flex-1">
       <form class="flex flex-col gap-2" @submit.prevent="handleSignUp">
         <label for="nama">Nama</label>
         <InputText id="nama" type="text" name="nama" placeholder="Siapa namamu?" required />
@@ -126,43 +148,6 @@ async function handleSignUp() {
     </div>
 
     <CTA :label="buttonLabel" text @click="handleSwitchForm" />
-  </div>
-
-  <TheDialog :is-open="dialog.isOpen" @dialog-close="dialog.close()">
-    <h2>Error!</h2>
-    {{ dialog.message }}
-  </TheDialog>
+    <Toast />
+  </section>
 </template>
-
-<style>
-.signin {
-  /* background-color: #a4c5c5; */
-  flex-basis: 60ch;
-  max-width: 60ch;
-  padding: 2rem;
-  outline: 2px solid #ddd;
-  border-radius: 0.5rem;
-
-  display: flex;
-  flex-direction: column;
-}
-
-.form-container {
-  flex-grow: 1;
-}
-
-.signin h1 {
-  text-align: center;
-}
-
-.signin p {
-  font-weight: 300;
-  font-size: large;
-}
-
-.signin .btn {
-  width: 100%;
-  text-align: center;
-  margin-block-start: 2rem;
-}
-</style>
diff --git a/layouts/admin.vue b/layouts/admin.vue
index eb76b55..d02dfd1 100644
--- a/layouts/admin.vue
+++ b/layouts/admin.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="wrapper">
+  <div class="grid flex-1 wrapper">
     <TheNavbar />
     <AdminSidebar />
-    <main class="dark:bg-surface-900 dark:text-white flex flex-col align-stretch gap-4">
+    <main class="flex flex-col align-stretch gap-4 mx-auto">
       <slot />
     </main>
   </div>
@@ -10,16 +10,15 @@
 
 <style scoped>
 .wrapper {
-  display: grid;
   grid-template-areas:
     "navbar navbar"
     "sidebar content";
   grid-template-columns: 25ch minmax(0, 1fr);
   grid-template-rows: min-content auto;
-  flex: 1;
 }
 
 main {
   grid-area: content;
+  width: min(150ch, 100%);
 }
 </style>
diff --git a/lib/peminjaman.ts b/lib/peminjaman.ts
index 511f179..e6b7c4c 100644
--- a/lib/peminjaman.ts
+++ b/lib/peminjaman.ts
@@ -3,12 +3,25 @@ import type { Database } from "@/types/database.types.ts"
 import type { AdminPeminjamanData } from "@/pages/admin/index.vue"
 import type { PeminjamanData } from "@/pages/profil/index.vue"
 
-export async function getAdminPeminjamanData(): Promise<AdminPeminjamanData> {
+export async function getPeminjamanData(
+  startDate?: Date | null,
+  endDate?: Date | null
+): Promise<PeminjamanData> {
   const supabase = useSupabaseClient<Database>()
+  let query = supabase
+    .from("peminjaman")
+    .select("*, peminjaman_state(name), pengguna(nama, kelas, jurusan), buku(*)")
+
+  if (startDate) {
+    query = query.gte("tgl_pinjam", startDate.toISOString())
+  }
+
+  if (endDate) {
+    query = query.lte("tgl_pinjam", endDate.toISOString())
+  }
+
   try {
-    const { data, error } = await supabase
-      .from("peminjaman")
-      .select("*, pengguna(nama, kelas, jurusan), buku(*)")
+    const { data, error } = await query
 
     if (error) throw error
     return data as AdminPeminjamanData
@@ -17,13 +30,3 @@ export async function getAdminPeminjamanData(): Promise<AdminPeminjamanData> {
     return []
   }
 }
-
-export async function getPeminjamanData(): Promise<PeminjamanData> {
-  const supabase = useSupabaseClient<Database>()
-
-  const peminjamanQuery = supabase.from("peminjaman").select("*, buku(*)")
-  const { data, error } = await peminjamanQuery
-
-  if (error) throw error
-  return data
-}
diff --git a/pages/admin/buku/tambah.vue b/pages/admin/buku/tambah.vue
index 7867c1d..beb5e16 100644
--- a/pages/admin/buku/tambah.vue
+++ b/pages/admin/buku/tambah.vue
@@ -96,7 +96,7 @@ const router = useRouter()
     <p>Ada kesalahan saat mengambil data buku. Silahkan coba lagi</p>
   </section>
 
-  <section v-else class="grid gap-8 buku-container">
+  <section v-else class="grid gap-8 buku-container main-section">
     <figure
       class="outline outline-2 outline-gray-300 dark:outline-gray-700 rounded-lg overflow-hidden"
     >
diff --git a/pages/admin/index.vue b/pages/admin/index.vue
index 41650cd..5d7d11f 100644
--- a/pages/admin/index.vue
+++ b/pages/admin/index.vue
@@ -28,7 +28,7 @@ const isLoading = ref(false)
 
 const peminjamanQuery = supabase
   .from("peminjaman")
-  .select("*, pengguna(nama, kelas, jurusan), buku(*)")
+  .select("*, peminjaman_state(name), pengguna(nama, kelas, jurusan), buku(*)")
 export type AdminPeminjamanData = QueryData<typeof peminjamanQuery>
 const peminjamanData = ref<AdminPeminjamanData>([])
 
diff --git a/pages/admin/peminjaman.vue b/pages/admin/peminjaman.vue
index 4c0e5e9..b5fb01a 100644
--- a/pages/admin/peminjaman.vue
+++ b/pages/admin/peminjaman.vue
@@ -2,8 +2,8 @@
 import LoadingSpinner from "@/components/LoadingSpinner.vue"
 import DataTable from "primevue/datatable"
 import Column from "primevue/column"
-import { getAdminPeminjamanData } from "@/lib/peminjaman"
-import type { AdminPeminjamanData } from "./index.vue"
+import { getPeminjamanData } from "@/lib/peminjaman"
+import type { Peminjaman } from "@/types"
 import { formatDate } from "#imports"
 
 useHead({
@@ -14,35 +14,23 @@ definePageMeta({
   layout: "admin",
 })
 
-const peminjamanData = ref<AdminPeminjamanData>([])
-
-const peminjamanDataWeek = computed(() => {
-  const now = new Date()
-  const nowAWeekLater = new Date().setDate(now.getDate() + 7)
-  const weekRange = nowAWeekLater - now.getTime()
-
-  return peminjamanData.value.filter(
-    (data) => now.getTime() - new Date(data.tgl_pinjam).getTime() < weekRange
-  )
-})
-
-const borrowPending = computed(() => {
-  return peminjamanData.value.filter(({ state_id }) => state_id === 1)
-})
-
-const returnPending = computed(() => {
-  return peminjamanData.value.filter(({ state_id }) => state_id === 4)
-})
+const peminjamanData = ref<Peminjaman[]>([])
+const startDate = ref<Date | null>(null)
+const endDate = ref<Date | null>(null)
 
 const isLoading = ref(false)
 
 onMounted(async () => {
+  handleFilterPeminjaman()
+})
+
+async function handleFilterPeminjaman() {
   isLoading.value = true
-  peminjamanData.value = await getAdminPeminjamanData()
+  peminjamanData.value = await getPeminjamanData(startDate.value, endDate.value)
   isLoading.value = false
-})
+}
 
-const lateClass = (data: AdminPeminjamanData[number]) => {
+const lateClass = (data: Peminjaman) => {
   if (data.tgl_kembali) {
     const isLate = new Date(data.tenggat_waktu).getTime() < new Date(data.tgl_kembali).getTime()
     return [{ late: isLate }]
@@ -55,105 +43,68 @@ const lateClass = (data: AdminPeminjamanData[number]) => {
 <template>
   <PageHeader heading="Data peminjaman" />
 
-  <DataTable :value="borrowPending" scrollable :loading="isLoading" striped-rows>
-    <template #header>
-      <h2>Belum dikonfirmasi</h2>
-    </template>
-
-    <template #empty>
-      <p>Belum ada yang meminjam</p>
-    </template>
-
-    <template #loading>
-      <LoadingSpinner />
-    </template>
-
-    <Column field="pengguna.nama" header="Peminjam" />
-    <Column field="buku.judul" header="Judul buku" />
-    <Column field="no_isbn" header="ISBN" />
-    <Column field="tgl_pinjam" header="Tanggal pinjam">
-      <template #body="slotProps">
-        {{ formatDate(new Date(slotProps.data.tgl_pinjam)) }}
-      </template>
-    </Column>
-    <Column field="tenggat_waktu" header="Tenggat waktu">
-      <template #body="slotProps">
-        {{ formatDate(new Date(slotProps.data.tenggat_waktu)) }}
+  <section class="main-section">
+    <h2>Belum dikonfirmasi</h2>
+
+    <form class="pt-8 pb-4 flex gap-4" @submit.prevent="handleFilterPeminjaman">
+      <FloatLabel>
+        <DatePicker
+          v-model="startDate"
+          :invalid="!endDate || !startDate || endDate < startDate"
+          input-id="start-date"
+        />
+        <label for="start-date">Tanggal awal</label>
+      </FloatLabel>
+
+      <FloatLabel>
+        <DatePicker
+          v-model="endDate"
+          :invalid="!endDate || !startDate || startDate < endDate"
+          input-id="end-date"
+        />
+        <label for="end-date">Tanggal akhir</label>
+      </FloatLabel>
+
+      <CTA type="submit" label="filter" class="ml-auto" />
+    </form>
+
+    <DataTable
+      :value="peminjamanData"
+      scrollable
+      :loading="isLoading"
+      striped-rows
+      paginator
+      :rows="20"
+    >
+      <template #empty>
+        <p>Belum ada yang meminjam</p>
       </template>
-    </Column>
-  </DataTable>
-
-  <DataTable :value="returnPending" scrollable>
-    <template #header>
-      <h2>Mau dikembalikan</h2>
-      <p>Buku yang mau dikembalikan</p>
-    </template>
-    <template #empty>
-      <p>Tidak ada data</p>
-    </template>
-
-    <Column field="pengguna.nama" header="Peminjam" />
-    <Column field="buku.judul" header="Judul buku" />
-    <Column field="tgl_pinjam" header="Tanggal pinjam" />
-  </DataTable>
-
-  <DataTable
-    :value="peminjamanDataWeek"
-    sort-field="tenggat_waktu"
-    :sort-order="-1"
-    scrollable
-    :row-class="lateClass"
-  >
-    <template #header>
-      <h2>Data peminjaman Seminggu terakhir</h2>
-    </template>
-
-    <template #empty>
-      <p>Tidak peminjaman selama seminggu terakhir.</p>
-    </template>
-
-    <Column field="pengguna.nama" header="Peminjam">
-      <template #body="slotProps">
-        <p>
-          <span>
-            {{ slotProps.data.pengguna.nama }}
-          </span>
-          -
-          <span>
-            {{ slotProps.data.pengguna.kelas }}
-            {{ slotProps.data.pengguna.jurusan }}
-          </span>
-        </p>
-      </template>
-    </Column>
 
-    <Column field="buku.judul" header="Judul">
-      <template #body="slotProps">
-        <NuxtLink :to="`/admin/buku/${slotProps.data.no_isbn}`">
-          {{ slotProps.data.buku.judul }}
-        </NuxtLink>
+      <template #loading>
+        <LoadingSpinner />
       </template>
-    </Column>
-    <Column field="no_isbn" header="ISBN" />
 
-    <Column field="tgl_pinjam" header="Tanggal Pinjam" sortable>
-      <template #body="slotProps">
-        {{ formatDate(new Date(slotProps.data.tgl_pinjam)) }}
-      </template>
-    </Column>
-
-    <Column field="tenggat_waktu" header="Tenggat Waktu" :sortable="true">
-      <template #body="slotProps">
-        {{ formatDate(new Date(slotProps.data.tenggat_waktu)) }}
-      </template>
-    </Column>
-
-    <Column field="tgl_kembali" header="Tanggal Kembali" sortable>
-      <template #body="slotProps">
-        {{ slotProps.data.tgl_kembali ? formatDate(new Date(slotProps.data.tgl_kembali)) : "-" }}
-      </template>
-    </Column>
-  </DataTable>
+      <Column field="pengguna.nama" header="Peminjam" />
+      <Column field="buku.judul" header="Judul buku" />
+      <Column field="no_isbn" header="ISBN" />
+      <Column field="tgl_pinjam" header="Tanggal pinjam" sortable>
+        <template #body="slotProps">
+          {{ formatDate(new Date(slotProps.data.tgl_pinjam)) }}
+        </template>
+      </Column>
+      <Column field="tenggat_waktu" header="Tenggat waktu" sortable>
+        <template #body="slotProps">
+          {{ formatDate(new Date(slotProps.data.tenggat_waktu)) }}
+        </template>
+      </Column>
+
+      <Column header="keterangan" field="state_id" sortable>
+        <template #body="slotProps">
+          {{ slotProps.data.peminjaman_state.name }}
+        </template>
+      </Column>
+    </DataTable>
+  </section>
 </template>
 
 <style>
diff --git a/pages/admin/pengguna.vue b/pages/admin/pengguna.vue
deleted file mode 100644
index ddc7741..0000000
--- a/pages/admin/pengguna.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script setup lang="ts">
-useHead({
-  title: "Pengguna",
-})
-
-definePageMeta({
-  layout: "admin",
-})
-</script>
-
-<template>
-  <PageHeader heading="Manajemen pengguna">
-    <p>Temukan pengguna dan kelola data mereka</p>
-  </PageHeader>
-</template>
diff --git a/pages/admin/pengguna/[id].vue b/pages/admin/pengguna/[id].vue
new file mode 100644
index 0000000..7fc6d9d
--- /dev/null
+++ b/pages/admin/pengguna/[id].vue
@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import { formatDate } from "#imports"
+import type { Peminjaman, Pengguna } from "~/types"
+import type { Database } from "~/types/database.types"
+
+definePageMeta({
+  layout: "default",
+})
+
+const route = useRoute()
+
+const supabase = useSupabaseClient<Database>()
+
+const isLoading = ref(false)
+const pengguna = ref<Pengguna | null>(null)
+const peminjaman = ref()
+
+onMounted(async () => {
+  isLoading.value = true
+  const userId = route.params.id
+
+  const { data, error } = await supabase.from("pengguna").select("*").eq("user_id", userId).single()
+  if (error) {
+    console.error(error)
+  }
+
+  pengguna.value = data
+
+  const { data: peminjamanData } = await supabase
+    .from("peminjaman")
+    .select("*, buku(judul)")
+    .order("tgl_pinjam", { ascending: true })
+    .eq("user_id", userId)
+  peminjaman.value = peminjamanData
+
+  isLoading.value = false
+})
+
+const keteranganText = (state_id: Peminjaman["state_id"]) => {
+  switch (state_id) {
+    case 1:
+      return "menunggu konfirmasi"
+    case 2:
+      return "sedang dipinjam"
+    case 3:
+      return "dibatalkan"
+    case 4:
+      return "menunggu konfirmasi pengembalian"
+    case 5:
+      return "dikembalikan"
+    case 6:
+      return "terlambat"
+  }
+}
+</script>
+
+<template>
+  <LoadingSpinner v-if="isLoading" />
+
+  <div v-if="!isLoading && !pengguna" class="max-w-100ch mx-auto">
+    <h1>pengguna tidak ditemukan!</h1>
+  </div>
+
+  <div v-else class="max-w-[100ch] mx-auto">
+    <PageHeader v-if="!pengguna" heading="gagal memuat pengguna!">
+      <p>Silahkan coba lagi.</p>
+    </PageHeader>
+
+    <PageHeader v-else :heading="pengguna.nama">
+      <routerLink to="/admin/pengguna">kembali</routerLink>
+
+      <p>kelas: {{ pengguna.kelas ? pengguna.kelas : "tidak ada kelas" }}</p>
+      <p>jurusan: {{ pengguna.jurusan ? pengguna.jurusan : "tidak ada jurusan" }}</p>
+    </PageHeader>
+
+    <Divider />
+
+    <div class="main-section">
+      <h2>Data peminjaman untuk {{ pengguna.nama }}</h2>
+
+      <DataTable :value="peminjaman">
+        <Column header="Buku">
+          <template #body="slotProps">
+            {{ slotProps.data.buku.judul }}
+          </template>
+        </Column>
+
+        <Column header="tanggal pinjam">
+          <template #body="slotProps">
+            {{ formatDate(new Date(slotProps.data.tgl_pinjam)) }}
+          </template>
+        </Column>
+
+        <Column header="tenggat waktu">
+          <template #body="slotProps">
+            {{ formatDate(new Date(slotProps.data.tenggat_waktu)) }}
+          </template>
+        </Column>
+
+        <Column header="tanggal kembali">
+          <template #body="{ data }">
+            <span
+              v-if="new Date(data.tenggat_waktu).getTime() < new Date(data.tgl_pinjam).getTime()"
+            >
+              terlambat
+            </span>
+            <span v-else>
+              {{ data.tgl_kembali ? formatDate(new Date(data.tgl_kembali)) : "-" }}
+            </span>
+          </template>
+        </Column>
+
+        <Column header="keterangan">
+          <template #body="slotProps">
+            {{ keteranganText(slotProps.data.state_id) }}
+          </template>
+        </Column>
+      </DataTable>
+    </div>
+
+    <section class="main-section">
+      <h2>Aksi</h2>
+
+      <div class="flex flex-col items-start gap-4">
+        <CTA label="edit" />
+        <CTA label="kirimkan email reset password" />
+        <CTA label="hapus" severity="danger" />
+      </div>
+    </section>
+  </div>
+</template>
diff --git a/pages/admin/pengguna/index.vue b/pages/admin/pengguna/index.vue
new file mode 100644
index 0000000..8acb013
--- /dev/null
+++ b/pages/admin/pengguna/index.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import type { Pengguna } from "~/types"
+import type { Database } from "~/types/database.types"
+
+useHead({
+  title: "Pengguna",
+})
+
+definePageMeta({
+  layout: "admin",
+})
+
+const supabase = useSupabaseClient<Database>()
+
+const toast = useToast()
+const penggunas = ref<Pengguna[] | null>([])
+const isLoading = ref(false)
+
+onMounted(async () => {
+  isLoading.value = true
+
+  const { data, error } = await supabase.from("pengguna").select("*, pengguna_roles(name)")
+  if (error) {
+    toast.add({
+      severity: "error",
+      summary: "Gagal mengambil data",
+      detail: "Gagal mengambil data pengguna, silahkan coba lagi.",
+    })
+  }
+
+  penggunas.value = data
+
+  isLoading.value = false
+})
+</script>
+
+<template>
+  <PageHeader heading="Manajemen pengguna">
+    <p>Temukan pengguna dan kelola data mereka</p>
+  </PageHeader>
+
+  <LoadingSpinner v-if="isLoading" />
+
+  <section v-if="!penggunas">
+    <p>Tidak ada pengguna di sini.</p>
+  </section>
+
+  <section v-else class="main-section">
+    <DataTable :value="penggunas" striped-rows>
+      <template #header>
+        <p>Menampilkan {{ penggunas.length }} pengguna.</p>
+      </template>
+
+      <Column header="No">
+        <template #body="slotProps">
+          {{ penggunas.indexOf(slotProps.data) + 1 }}
+        </template>
+      </Column>
+
+      <Column header="Nama" field="nama" sortable />
+      <Column header="Kelas" field="kelas" sortable />
+      <Column header="Jurusan" field="jurusan" />
+      <Column header="Role">
+        <template #body="slotProps">
+          {{ slotProps.data.pengguna_roles.name }}
+        </template>
+      </Column>
+
+      <Column header="Aksi">
+        <template #body="slotProps">
+          <NuxtLink :to="`/admin/pengguna/${slotProps.data.user_id}`">
+            <CTA label="edit" link />
+          </NuxtLink>
+        </template>
+      </Column>
+    </DataTable>
+  </section>
+</template>
diff --git a/pages/buku/[isbn].vue b/pages/buku/[isbn].vue
index d74e880..ebca07e 100644
--- a/pages/buku/[isbn].vue
+++ b/pages/buku/[isbn].vue
@@ -271,7 +271,9 @@ onMounted(() => (isClient.value = true))
     v-else-if="buku && isClient"
     class="main-section grid grid-cols-1 md:grid-cols-6 md:grid-rows-2 gap-4 justify-items-start"
   >
-    <figure class="col-span-1 md:col-span-2 md:row-span-2 place-self-center">
+    <figure
+      class="col-span-1 md:col-span-2 md:row-span-2 place-self-center relative dark:brightness-75 z-0"
+    >
       <img class="buku__gambar" :src="imgURL" alt="" width="400" height="600" />
       <img
         class="buku__gambar buku__gambar--bayangan"
@@ -423,7 +425,7 @@ onMounted(() => (isClient.value = true))
   bottom: -10px;
   left: 10px;
   opacity: 80%;
-  z-index: -2;
+  z-index: -1;
   filter: blur(10px);
 }
 
diff --git a/pages/login.vue b/pages/login.vue
index 5e50af9..5023f13 100644
--- a/pages/login.vue
+++ b/pages/login.vue
@@ -12,14 +12,7 @@ definePageMeta({
 })
 </script>
 <template>
-  <main>
+  <div class="flex justify-center min-h-[70vh]">
     <SignInForm />
-  </main>
+  </div>
 </template>
-
-<style scoped>
-main {
-  display: flex;
-  justify-content: center;
-}
-</style>
diff --git a/pages/profil/index.vue b/pages/profil/index.vue
index 1a2baa7..d8c3977 100644
--- a/pages/profil/index.vue
+++ b/pages/profil/index.vue
@@ -66,7 +66,7 @@ onMounted(async () => {
 
 <template>
   <div class="grid gap-4 grid-cols-1 lg:grid-cols-12 lg:grid-flow-dense max-w-screen-2xl mx-auto">
-    <PageHeader heading="Profil" class="col-span-full lg:col-span-9">
+    <PageHeader heading="Profil" class="col-span-full">
       <p>Selamat Datang di Profil kamu</p>
     </PageHeader>
 
diff --git a/supabase/migrations/20240619054023_remote_schema.sql b/supabase/migrations/20240619054023_remote_schema.sql
index ec89f6b..52a1deb 100644
--- a/supabase/migrations/20240619054023_remote_schema.sql
+++ b/supabase/migrations/20240619054023_remote_schema.sql
@@ -301,6 +301,9 @@ ALTER TABLE ONLY "public"."buku"
 ALTER TABLE ONLY "public"."wishlist"
     ADD CONSTRAINT "wishlist_no_isbn_fkey" FOREIGN KEY ("no_isbn") REFERENCES "public"."buku"("no_isbn") ON UPDATE CASCADE ON DELETE SET NULL;
 
+create role admin;
+grant authenticated to admin;
+
 CREATE POLICY "Enable all actions for admin" ON "public"."kategori_buku" TO "admin" USING (true);
 
 CREATE POLICY "Enable all for admin" ON "public"."buku" TO "admin" USING (true) WITH CHECK (true);
diff --git a/supabase/migrations/20240907110210_remote_schema.sql b/supabase/migrations/20240907110210_remote_schema.sql
new file mode 100644
index 0000000..e581ba8
--- /dev/null
+++ b/supabase/migrations/20240907110210_remote_schema.sql
@@ -0,0 +1,30 @@
+alter table "public"."pengguna" drop constraint "profiles_username_key";
+
+drop index if exists "public"."profiles_username_key";
+
+create policy "authenticated users can see if they can borrow"
+on "public"."peminjaman_state"
+as permissive
+for select
+to authenticated
+using (true);
+
+
+create policy "Allow all for admin"
+on "public"."pengguna_roles"
+as permissive
+for all
+to authenticated
+using (true)
+with check ((( SELECT ((auth.jwt() -> 'app_metadata'::text) -> 'role'::text)) ? 'super-admin'::text));
+
+
+create policy "Allow users to read roles"
+on "public"."pengguna_roles"
+as permissive
+for select
+to authenticated
+using (true);
+
+
+