diff --git a/resources/js/Components/ApplicationLogo.jsx b/resources/js/Components/ApplicationLogo.jsx
index e4dca63..dff3bfd 100644
--- a/resources/js/Components/ApplicationLogo.jsx
+++ b/resources/js/Components/ApplicationLogo.jsx
@@ -2,6 +2,6 @@ import React from 'react';
 
 export default function ApplicationLogo({ className }) {
     return (
-        <p>Monitor Doc</p>
+        <p className={className}>Monitor Doc</p>
     );
 }
diff --git a/resources/js/Components/Checkbox.jsx b/resources/js/Components/Checkbox.jsx
index 2f6a528..9334c82 100644
--- a/resources/js/Components/Checkbox.jsx
+++ b/resources/js/Components/Checkbox.jsx
@@ -6,7 +6,7 @@ export default function Checkbox({ name, value, handleChange }) {
             type="checkbox"
             name={name}
             value={value}
-            className="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
+            className="rounded text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
             onChange={(e) => handleChange(e)}
         />
     );
diff --git a/resources/js/Components/Dropdown.jsx b/resources/js/Components/Dropdown.jsx
index 8e393a2..3f02d42 100644
--- a/resources/js/Components/Dropdown.jsx
+++ b/resources/js/Components/Dropdown.jsx
@@ -30,7 +30,7 @@ const Trigger = ({ children }) => {
     );
 };
 
-const Content = ({ align = 'right', width = '48', contentClasses = 'py-1 bg-white', children }) => {
+const Content = ({ align = 'right', width = '48', contentClasses = 'py-1 bg-base-100', children }) => {
     const { open, setOpen } = useContext(DropDownContext);
 
     let alignmentClasses = 'origin-top';
@@ -76,7 +76,7 @@ const DropdownLink = ({ href, method = 'post', as = 'a', children }) => {
             href={href}
             method={method}
             as={as}
-            className="block w-full px-4 py-2 text-left text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out"
+            className="block w-full px-4 py-2 text-left text-sm leading-5 hover:bg-base-200 focus:outline-none transition duration-150 ease-in-out"
         >
             {children}
         </Link>
diff --git a/resources/js/Components/InputLabel.jsx b/resources/js/Components/InputLabel.jsx
index 93c0ade..2f5b985 100644
--- a/resources/js/Components/InputLabel.jsx
+++ b/resources/js/Components/InputLabel.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 export default function InputLabel({ forInput, value, className, children }) {
     return (
-        <label htmlFor={forInput} className={`block font-medium text-sm text-gray-700 ` + className}>
+        <label htmlFor={forInput} className={`block font-medium text-sm ` + className}>
             {value ? value : children}
         </label>
     );
diff --git a/resources/js/Components/ModalConfirm.jsx b/resources/js/Components/ModalConfirm.jsx
index f2f74f6..8bc5515 100644
--- a/resources/js/Components/ModalConfirm.jsx
+++ b/resources/js/Components/ModalConfirm.jsx
@@ -10,7 +10,7 @@ export default function ModalConfirm(props) {
 
     return (
         <div
-            className="modal"
+            className="modal modal-bottom sm:modal-middle pb-10"
             style={
                 isOpen
                     ? {
diff --git a/resources/js/Components/SidebarMenuItem.jsx b/resources/js/Components/SidebarMenuItem.jsx
index 4ba845f..8e0492a 100644
--- a/resources/js/Components/SidebarMenuItem.jsx
+++ b/resources/js/Components/SidebarMenuItem.jsx
@@ -4,7 +4,7 @@ import { Link } from '@inertiajs/inertia-react'
 export default function MenuItem({ routeName, name, active }) {
     return (
         <li>
-            <Link href={route(routeName)} className={`flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white ${route().current(active) ? 'bg-gray-100' : 'hover:bg-gray-100'} dark:hover:bg-gray-700`}>
+            <Link href={route(routeName)} className={`flex items-center p-2 text-base font-normal rounded-lg ${route().current(active) ? 'bg-base-200' : 'hover:bg-base-200'} `}>
             <span className="ml-3">{name}</span>
             </Link>
         </li>
diff --git a/resources/js/Layouts/AuthenticatedLayout.jsx b/resources/js/Layouts/AuthenticatedLayout.jsx
index 253b34b..bff9090 100644
--- a/resources/js/Layouts/AuthenticatedLayout.jsx
+++ b/resources/js/Layouts/AuthenticatedLayout.jsx
@@ -10,14 +10,14 @@ export default function Authenticated({ auth, children }) {
     const [showingNavigationDropdown, setShowingNavigationDropdown] = useState(false);
 
     return (
-        <div className="min-h-screen bg-gray-100">
-            <nav className="bg-white border-b border-gray-100">
+        <div className="min-h-screen bg-base-200">
+            <nav className="bg-base-100 border-b border-base-100">
                 <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                     <div className="flex justify-between h-16">
                         <div className="flex">
                             <div className="shrink-0 flex items-center">
                                 <Link href="/">
-                                    <ApplicationLogo className="block h-9 w-auto text-gray-500" />
+                                    <ApplicationLogo className="block h-9 w-auto" />
                                 </Link>
                             </div>
 
@@ -35,7 +35,7 @@ export default function Authenticated({ auth, children }) {
                                         <span className="inline-flex rounded-md">
                                             <button
                                                 type="button"
-                                                className="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:text-gray-700 focus:outline-none transition ease-in-out duration-150"
+                                                className="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md bg-base-100 focus:outline-none transition ease-in-out duration-150"
                                             >
                                                 {auth.user.name}
 
@@ -121,7 +121,7 @@ export default function Authenticated({ auth, children }) {
             <div className='flex flex-row md:mt-5 max-w-7xl mx-auto'>
                 <div className='w-auto hidden md:block'>
                     <aside className="ml-5 w-64" aria-label="Sidebar">
-                        <div className="overflow-y-auto py-4 px-3 bg-white rounded dark:bg-gray-800">
+                        <div className="overflow-y-auto py-4 px-3 bg-base-100 rounded">
                             <ul className="space-y-2">
                                 <MenuItem routeName='dashboard' active='dashboard' name='Dashboard' />
                                 <MenuItem routeName='docs.index' active='docs.*' name='Monitoring' />
diff --git a/resources/js/Layouts/GuestLayout.jsx b/resources/js/Layouts/GuestLayout.jsx
index d1e73e7..0c36d42 100644
--- a/resources/js/Layouts/GuestLayout.jsx
+++ b/resources/js/Layouts/GuestLayout.jsx
@@ -4,14 +4,8 @@ import { Link } from '@inertiajs/inertia-react';
 
 export default function Guest({ children }) {
     return (
-        <div className="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100">
-            <div>
-                <Link href="/">
-                    <ApplicationLogo className="w-20 h-20 fill-current text-gray-500" />
-                </Link>
-            </div>
-
-            <div className="w-full sm:max-w-md mt-6 px-6 py-4 bg-white shadow-md overflow-hidden sm:rounded-lg">
+        <div className="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-base-200">
+            <div className="card bg-base-100 w-full sm:max-w-md mt-6 px-6 py-4 shadow-md overflow-hidden sm:rounded-lg">
                 {children}
             </div>
         </div>
diff --git a/resources/js/Pages/Auth/Login.jsx b/resources/js/Pages/Auth/Login.jsx
index 74f6910..42f0350 100644
--- a/resources/js/Pages/Auth/Login.jsx
+++ b/resources/js/Pages/Auth/Login.jsx
@@ -6,6 +6,7 @@ import InputLabel from '@/Components/InputLabel';
 import PrimaryButton from '@/Components/PrimaryButton';
 import TextInput from '@/Components/TextInput';
 import { Head, Link, useForm } from '@inertiajs/inertia-react';
+import ApplicationLogo from '@/Components/ApplicationLogo';
 
 export default function Login({ status, canResetPassword }) {
     const { data, setData, post, processing, errors, reset } = useForm({
@@ -34,6 +35,11 @@ export default function Login({ status, canResetPassword }) {
         <GuestLayout>
             <Head title="Log in" />
 
+            <div className='mx-auto mt-5 mb-10'>
+                <Link href="/">
+                    <ApplicationLogo className="font-bold text-2xl" />
+                </Link>
+            </div>
             {status && <div className="mb-4 font-medium text-sm text-green-600">{status}</div>}
 
             <form onSubmit={submit}>
@@ -72,7 +78,7 @@ export default function Login({ status, canResetPassword }) {
                     <label className="flex items-center">
                         <Checkbox name="remember" value={data.remember} handleChange={onHandleChange} />
 
-                        <span className="ml-2 text-sm text-gray-600">Remember me</span>
+                        <span className="ml-2 text-sm ">Remember me</span>
                     </label>
                 </div>
 
diff --git a/resources/js/Pages/Dashboard.jsx b/resources/js/Pages/Dashboard.jsx
index 10aacc7..46c730a 100644
--- a/resources/js/Pages/Dashboard.jsx
+++ b/resources/js/Pages/Dashboard.jsx
@@ -11,8 +11,8 @@ export default function Dashboard(props) {
             <Head title="Dashboard" />
 
                 <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
-                    <div className="bg-white overflow-hidden shadow-sm sm:rounded-lg">
-                        <div className="p-6 bg-white border-b border-gray-200">You're logged in!</div>
+                    <div className="bg-base-100 overflow-hidden shadow-sm">
+                        <div className="p-6 bg-base-100 border-b border-base-200">You're logged in!</div>
                     </div>
                 </div>
         </AuthenticatedLayout>
diff --git a/resources/js/Pages/User/Index.jsx b/resources/js/Pages/User/Index.jsx
index ef83116..91c5f9e 100644
--- a/resources/js/Pages/User/Index.jsx
+++ b/resources/js/Pages/User/Index.jsx
@@ -55,83 +55,77 @@ export default function Users(props) {
         <AuthenticatedLayout
             auth={props.auth}
             errors={props.errors}
-            header={
-                <h2 className="font-semibold text-xl text-gray-800 leading-tight">
-                    Users
-                </h2>
-            }
         >
             <Head title="Users" />
-            <div className="">
-                <div className="flex flex-col w-full sm:px-6 lg:px-8 space-y-2">
-                    <div className="card bg-white w-full">
-                        <div className="card-body">
-                            <div className="flex w-full mb-4 justify-between">
-                                <div
-                                    className="btn btn-neutral"
-                                    onClick={() => toggle()}
-                                >
-                                    Tambah
-                                </div>
-                                <div className="form-control">
-                                    <input
-                                        type="text"
-                                        className="input input-bordered"
-                                        value={search}
-                                        onChange={(e) =>
-                                            setSearch(e.target.value)
-                                        }
-                                        placeholder="Search"
-                                    />
-                                </div>
+            <div className="flex flex-col w-full sm:px-6 lg:px-8 space-y-2">
+                <div className="card bg-base-100 w-full">
+                    <div className="card-body">
+                        <div className="flex w-full mb-4 justify-between">
+                            <div
+                                className="btn btn-neutral"
+                                onClick={() => toggle()}
+                            >
+                                Tambah
                             </div>
-                            <div className="overflow-x-auto">
-                                <table className="table w-full table-zebra">
-                                    <thead>
-                                        <tr>
-                                            <th>Id</th>
-                                            <th>Nama</th>
-                                            <th>Email</th>
-                                            <th></th>
-                                        </tr>
-                                    </thead>
-                                    <tbody>
-                                        {users?.map((user) => (
-                                            <tr key={user.id}>
-                                                <th>{user.id}</th>
-                                                <td>{user.name}</td>
-                                                <td>{user.email}</td>
-                                                <td className="text-right">
+                            <div className="form-control">
+                                <input
+                                    type="text"
+                                    className="input input-bordered"
+                                    value={search}
+                                    onChange={(e) =>
+                                        setSearch(e.target.value)
+                                    }
+                                    placeholder="Search"
+                                />
+                            </div>
+                        </div>
+                        <div className="overflow-x-auto">
+                            <table className="table w-full table-zebra">
+                                <thead>
+                                    <tr>
+                                        <th>Id</th>
+                                        <th>Nama</th>
+                                        <th>Email</th>
+                                        <th></th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    {users?.map((user) => (
+                                        <tr key={user.id}>
+                                            <th>{user.id}</th>
+                                            <td>{user.name}</td>
+                                            <td>{user.email}</td>
+                                            <td className="text-right">
+                                                <div
+                                                    className="btn btn-primary mx-1"
+                                                    onClick={() =>
+                                                        toggle(user)
+                                                    }
+                                                >
+                                                    Edit
+                                                </div>
+                                                {props.auth.user.id !==
+                                                    user.id && (
                                                     <div
-                                                        className="btn btn-primary mx-1"
+                                                        className="btn btn-secondary mx-1"
                                                         onClick={() =>
-                                                            toggle(user)
+                                                            handleDelete(user)
                                                         }
                                                     >
-                                                        Edit
+                                                        Delete
                                                     </div>
-                                                    {props.auth.user.id !==
-                                                        user.id && (
-                                                        <div
-                                                            className="btn btn-secondary mx-1"
-                                                            onClick={() =>
-                                                                handleDelete(user)
-                                                            }
-                                                        >
-                                                            Delete
-                                                        </div>
-                                                    )}
-                                                </td>
-                                            </tr>
-                                        ))}
-                                    </tbody>
-                                </table>
-                            </div>
-                            <Pagination links={links} />
+                                                )}
+                                            </td>
+                                        </tr>
+                                    ))}
+                                </tbody>
+                            </table>
                         </div>
+                        <Pagination links={links} />
                     </div>
                 </div>
             </div>
+            
             <UserFormModal
                 isOpen={formModal.isOpen}
                 toggle={toggle}
diff --git a/resources/js/Pages/User/UserFormModal.jsx b/resources/js/Pages/User/UserFormModal.jsx
index 1f0b6ec..6f7c7e6 100644
--- a/resources/js/Pages/User/UserFormModal.jsx
+++ b/resources/js/Pages/User/UserFormModal.jsx
@@ -56,7 +56,7 @@ export default function UserFormModal(props) {
 
     return (
         <div
-            className="modal"
+            className="modal modal-bottom sm:modal-middle pb-10"
             style={
                 isOpen
                     ? {
diff --git a/resources/views/app.blade.php b/resources/views/app.blade.php
index 6ce4dfe..69f553c 100644
--- a/resources/views/app.blade.php
+++ b/resources/views/app.blade.php
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" data-theme="corporate">
     <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
diff --git a/tailwind.config.js b/tailwind.config.js
index 31034b4..978f68a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -21,4 +21,8 @@ module.exports = {
         require('@tailwindcss/forms'),
         require("daisyui")
     ],
+
+    daisyui: {
+        themes: ["light", "dark", "corporate"],
+    },
 };