diff --git a/src/apis/action.ts b/src/apis/action.ts
index 90c89e9..c200ee4 100644
--- a/src/apis/action.ts
+++ b/src/apis/action.ts
@@ -1,10 +1,6 @@
-import network from "@/utils/network";
-import {
-    Action,
-    ActionHistory,
-    DispatchActionRequest,
-    LastActionResponse
-} from './action.types'
+import network from '@/utils/network';
+
+import { Action, ActionHistory, DispatchActionRequest, LastActionResponse } from './action.types';
 
 const dispatchAction = (request: DispatchActionRequest) => network.post("/action/dispatch", JSON.stringify(request))
 const getActions = (device_id: number): Promise<Action[]> => network.get(`/action/available?device_id=${device_id}`)
diff --git a/src/apis/action.types.ts b/src/apis/action.types.ts
index 188b2e7..5bc252d 100644
--- a/src/apis/action.types.ts
+++ b/src/apis/action.types.ts
@@ -1,4 +1,4 @@
-import { ActionIcon, ActionSource, ActionType, ActionValue } from "@/constants/action"
+import { ActionIcon, ActionSource, ActionType, ActionValue } from '@/constants/action';
 
 export type Action = {
     id: number,
diff --git a/src/apis/report.ts b/src/apis/report.ts
index 5642866..9704941 100644
--- a/src/apis/report.ts
+++ b/src/apis/report.ts
@@ -1,5 +1,6 @@
-import network from "@/utils/network";
-import { GetSensorReportRequest, SensorReport } from "./report.types";
+import network from '@/utils/network';
+
+import { GetSensorReportRequest, SensorReport } from './report.types';
 
 const getSensorReport = (request: GetSensorReportRequest): Promise<SensorReport> => network.post(`/chart`, JSON.stringify(request))
 
diff --git a/src/apis/report.types.ts b/src/apis/report.types.ts
index c712db2..1eb86c0 100644
--- a/src/apis/report.types.ts
+++ b/src/apis/report.types.ts
@@ -1,4 +1,4 @@
-import { SensorType } from "@/constants/sensor"
+import { SensorType } from '@/constants/sensor';
 
 export type GetSensorReportRequest = {
     start_time: string
diff --git a/src/apis/scheduler.ts b/src/apis/scheduler.ts
index 457a3ef..341dde7 100644
--- a/src/apis/scheduler.ts
+++ b/src/apis/scheduler.ts
@@ -1,5 +1,6 @@
-import network from "@/utils/network";
-import { CreateSchedulerRequest, ScheduledTask } from "./scheduler.types";
+import network from '@/utils/network';
+
+import { CreateSchedulerRequest, ScheduledTask } from './scheduler.types';
 
 const createSchedule = (request: CreateSchedulerRequest) => network.post("/schedule", JSON.stringify(request))
 const deleteSchedule = (id: number) => network.delete(`/schedule?id=${id}`)
diff --git a/src/apis/scheduler.types.ts b/src/apis/scheduler.types.ts
index b4b72df..6b39728 100644
--- a/src/apis/scheduler.types.ts
+++ b/src/apis/scheduler.types.ts
@@ -1,6 +1,7 @@
-import { SchedulerRecurringMode } from "@/constants/scheduler"
-import { DispatchActionRequest } from "./action.types"
-import { ScheduleStatus } from "@/constants/action"
+import { ScheduleStatus } from '@/constants/action';
+import { SchedulerRecurringMode } from '@/constants/scheduler';
+
+import { DispatchActionRequest } from './action.types';
 
 export type CreateSchedulerRequest = {
     name: string
diff --git a/src/apis/setting.ts b/src/apis/setting.ts
index d1e98a1..a80e1b3 100644
--- a/src/apis/setting.ts
+++ b/src/apis/setting.ts
@@ -1,5 +1,6 @@
-import network from "@/utils/network";
-import { Actuator } from "./setting.types";
+import network from '@/utils/network';
+
+import { Actuator } from './setting.types';
 
 const getActuators = (device_id: number): Promise<Actuator[]> => network.get(`/actuators?device_id=${device_id}`)
 const updateActuator = (actuator: Actuator) => network.patch('/actuator', JSON.stringify(actuator))
diff --git a/src/apis/setting.types.ts b/src/apis/setting.types.ts
index 7340e46..48fec84 100644
--- a/src/apis/setting.types.ts
+++ b/src/apis/setting.types.ts
@@ -1,4 +1,4 @@
-import { ActionIcon, ActionType } from "@/constants/action"
+import { ActionIcon, ActionType } from '@/constants/action';
 
 export type Actuator = {
     id: number,
diff --git a/src/apis/user.ts b/src/apis/user.ts
index 13dbd41..fb05780 100644
--- a/src/apis/user.ts
+++ b/src/apis/user.ts
@@ -1,6 +1,7 @@
-import network from "@/utils/network";
-import { AuthRequest, AuthResponse } from "./user.types";
-import { UserInfo } from "@/stores/auh.types";
+import { UserInfo } from '@/stores/auh.types';
+import network from '@/utils/network';
+
+import { AuthRequest, AuthResponse } from './user.types';
 
 const getUserInfo = async (): Promise<UserInfo> => network.get('/users/info')
 const getUserList = async (): Promise<UserInfo[]> => network.get('/users')
diff --git a/src/components/confirmation-dialog/index.tsx b/src/components/confirmation-dialog/index.tsx
index 9f38642..deef1e5 100644
--- a/src/components/confirmation-dialog/index.tsx
+++ b/src/components/confirmation-dialog/index.tsx
@@ -1,5 +1,8 @@
-import { Button, DialogContent, DialogTitle, Modal as JoyModal, ModalDialog, Typography } from "@mui/joy";
-import { Transition, TransitionStatus } from "react-transition-group";
+import { Transition, TransitionStatus } from 'react-transition-group';
+
+import {
+    Button, DialogContent, DialogTitle, Modal as JoyModal, ModalDialog, Typography
+} from '@mui/joy';
 
 type ModalTransition = {
     [key in TransitionStatus]: React.CSSProperties;
diff --git a/src/components/loading/index.tsx b/src/components/loading/index.tsx
new file mode 100644
index 0000000..a627565
--- /dev/null
+++ b/src/components/loading/index.tsx
@@ -0,0 +1,16 @@
+import { LinearProgress } from '@mui/joy';
+
+const Loading = ({ loading, children }: LoadingProps) => {
+    if (loading) {
+        return <LinearProgress sx={{ mt: 2 }} />
+    }
+
+    return <>{children}</>
+}
+
+type LoadingProps = {
+    loading: boolean,
+    children: any
+}
+
+export default Loading
\ No newline at end of file
diff --git a/src/components/modal/index.tsx b/src/components/modal/index.tsx
index 50e0309..5c26da8 100644
--- a/src/components/modal/index.tsx
+++ b/src/components/modal/index.tsx
@@ -1,7 +1,9 @@
-import { Button, ColorPaletteProp, DialogContent, DialogTitle, Modal as JoyModal, ModalDialog, VariantProp } from "@mui/joy";
-import { Box } from "@mui/system";
-import { Transition, TransitionStatus } from "react-transition-group";
+import { Transition, TransitionStatus } from 'react-transition-group';
 
+import {
+    Button, ColorPaletteProp, DialogContent, DialogTitle, Modal as JoyModal, ModalDialog,
+    VariantProp, Box
+} from '@mui/joy';
 
 type ModalTransition = {
     [key in TransitionStatus]: React.CSSProperties;
diff --git a/src/constants/action.ts b/src/constants/action.ts
index ca32776..d374607 100644
--- a/src/constants/action.ts
+++ b/src/constants/action.ts
@@ -1,8 +1,8 @@
+import BoltIcon from '@mui/icons-material/Bolt';
 import FluorescentIcon from '@mui/icons-material/Fluorescent';
+import ForestIcon from '@mui/icons-material/Forest';
 import WaterDropIcon from '@mui/icons-material/WaterDrop';
 import WbIncandescentIcon from '@mui/icons-material/WbIncandescent';
-import BoltIcon from '@mui/icons-material/Bolt';
-import ForestIcon from '@mui/icons-material/Forest';
 
 export enum ActionSource {
     User = 1,
diff --git a/src/main.tsx b/src/main.tsx
index 6e09733..089a5fa 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,23 +1,24 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import { initializeApp } from "firebase/app";
-import { getAnalytics } from "firebase/analytics";
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
-import dayjs from 'dayjs';
-import timezone from 'dayjs/plugin/timezone';
-import utc from 'dayjs/plugin/utc';
-import App from './pages/App.tsx'
-import 'dayjs/locale/id'
-
+import 'dayjs/locale/id';
 import '@fontsource/inter/400.css';
 import '@fontsource/inter/500.css';
 import '@fontsource/inter/600.css';
 import '@fontsource/inter/700.css';
+import './index.css';
+
+import dayjs from 'dayjs';
+import timezone from 'dayjs/plugin/timezone';
+import utc from 'dayjs/plugin/utc';
+import { getAnalytics } from 'firebase/analytics';
+import { initializeApp } from 'firebase/app';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
 
-import './index.css'
 import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+
+import App from '@/pages/App.tsx';
 
 const firebaseConfig = {
   apiKey: "AIzaSyDybZITMkE7sCujRU-MlJlSmwmg9agdBbA",
diff --git a/src/pages/App.tsx b/src/pages/App.tsx
index adf040b..fb1a6ae 100644
--- a/src/pages/App.tsx
+++ b/src/pages/App.tsx
@@ -1,10 +1,12 @@
-import { Box, Button, LinearProgress, Snackbar, Typography } from '@mui/joy';
 import './App.css';
 
-import { Outlet, RouterProvider, createRootRoute, createRoute, createRouter, redirect } from '@tanstack/react-router';
 import useAuthStore from '@/stores/auth';
 import useNotification from '@/stores/notification';
+import { Box, Button, LinearProgress, Snackbar, Typography } from '@mui/joy';
 import { useQueryClient } from '@tanstack/react-query';
+import {
+    createRootRoute, createRoute, createRouter, Outlet, redirect, RouterProvider
+} from '@tanstack/react-router';
 
 const Root = () => {
   const notification = useNotification()
diff --git a/src/pages/auth/index.tsx b/src/pages/auth/index.tsx
index cdd8d21..ccbbe39 100644
--- a/src/pages/auth/index.tsx
+++ b/src/pages/auth/index.tsx
@@ -1,14 +1,14 @@
-import { Button, CircularProgress, Link, Typography } from "@mui/joy"
-import { Grid, TextField } from "@mui/material"
-import { createLazyRoute, useNavigate } from "@tanstack/react-router"
+import { useEffect, useState } from 'react';
 
-import icon from '@/assets/icon.png'
-import { useEffect, useState } from "react"
-import userAPI from '@/apis/user'
-import { useMutation, useQuery } from "@tanstack/react-query"
-import { AuthRequest } from "@/apis/user.types"
-import useAuthStore from "@/stores/auth"
-import useNotification from "@/stores/notification"
+import userAPI from '@/apis/user';
+import { AuthRequest } from '@/apis/user.types';
+import icon from '@/assets/icon.png';
+import useAuthStore from '@/stores/auth';
+import useNotification from '@/stores/notification';
+import { Button, CircularProgress, Link, Typography } from '@mui/joy';
+import { Grid, TextField } from '@mui/material';
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { createLazyRoute, useNavigate } from '@tanstack/react-router';
 
 const Auth = () => {
     const [isLoginState, setIsLoginState] = useState(true)
diff --git a/src/pages/home/admin/index.tsx b/src/pages/home/admin/index.tsx
index 2ebf2fa..334f1a9 100644
--- a/src/pages/home/admin/index.tsx
+++ b/src/pages/home/admin/index.tsx
@@ -1,15 +1,16 @@
-import Modal from "@/components/modal"
-import { Card, Chip, Grid, Option, Select, Typography } from "@mui/joy"
-import { Box, TextField } from "@mui/material"
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
-import { createLazyRoute } from "@tanstack/react-router"
-
-import settingAPI from '@/apis/setting'
-import userAPI from '@/apis/user'
-import { useState } from "react"
-import { Actuator } from "@/apis/setting.types"
-import { UserInfo } from "@/stores/auh.types"
-import useNotification from "@/stores/notification"
+import { useState } from 'react';
+
+import settingAPI from '@/apis/setting';
+import { Actuator } from '@/apis/setting.types';
+import userAPI from '@/apis/user';
+import Loading from '@/components/loading';
+import Modal from '@/components/modal';
+import { UserInfo } from '@/stores/auh.types';
+import useNotification from '@/stores/notification';
+import { Card, Chip, Grid, Option, Select, Typography } from '@mui/joy';
+import { Box, TextField } from '@mui/material';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { createLazyRoute } from '@tanstack/react-router';
 
 type itemState = Actuator | UserInfo | null
 
@@ -44,9 +45,9 @@ const renderModalBody = (item: itemState, mutator: (item: itemState) => void): J
     return (
         <Grid container flexDirection='column' gap={2}>
             <TextField label="Name" value={actuator.name} onChange={e => mutator({ ...item, name: e.target.value })} />
-            <Grid container justifyContent='space-between' direction='row' >
-                <TextField label="Pin Number" value={actuator.pin_number} onChange={e => mutator({ ...item, pin_number: Number(e.target.value) })} />
-                <TextField label="Terminal Number" value={actuator.terminal_number} onChange={e => mutator({ ...item, terminal_number: Number(e.target.value) })} />
+            <Grid container justifyContent='space-between' direction='row' gap={2}>
+                <TextField sx={{ flex: 1 }} label="Pin Number" value={actuator.pin_number} onChange={e => mutator({ ...item, pin_number: Number(e.target.value) })} />
+                <TextField sx={{ flex: 1 }} label="Terminal Number" value={actuator.terminal_number} onChange={e => mutator({ ...item, terminal_number: Number(e.target.value) })} />
             </Grid>
         </Grid >
     )
@@ -109,33 +110,37 @@ const Admin = () => {
             <Box sx={{ px: 2 }} className="fade">
                 <Typography sx={{ mt: 4 }} level="h2" fontWeight='500'>Admin Panel</Typography>
                 <Typography sx={{ mt: 2 }} level="h4">Users</Typography>
-                <Grid container sx={{ mt: 1 }} flexDirection='column' gap={2}>
-                    {usersQuery.data?.map(user => (
-                        <Card key={user.user_id} onClick={() => handleCardClick(user)}>
-                            <Box display='flex' justifyContent='space-between'>
-                                <Box>
-                                    {user.name}
-                                    {user.role == 99 && <Chip sx={{ ml: 2 }} color="danger">Admin</Chip>}
+                <Loading loading={usersQuery.isLoading}>
+                    <Grid container sx={{ mt: 1 }} flexDirection='column' gap={2}>
+                        {usersQuery.data?.map(user => (
+                            <Card key={user.user_id} onClick={() => handleCardClick(user)}>
+                                <Box display='flex' justifyContent='space-between'>
+                                    <Box>
+                                        {user.name}
+                                        {user.role == 99 && <Chip sx={{ ml: 2 }} size="sm" color="danger">Admin</Chip>}
+                                    </Box>
+                                    <Chip color={user.is_active ? 'success' : 'danger'}>{user.is_active ? "Active" : "Not Active"}</Chip>
                                 </Box>
-                                <Chip color={user.is_active ? 'success' : 'danger'}>{user.is_active ? "Active" : "Not Active"}</Chip>
-                            </Box>
-                        </Card>
-                    ))}
-                </Grid>
+                            </Card>
+                        ))}
+                    </Grid>
+                </Loading>
                 <Typography sx={{ mt: 2 }} level="h4">Panels</Typography>
-                <Grid container sx={{ mt: 1 }} flexDirection='column' gap={2}>
-                    {actuatorsQuery.data?.map(actuator => (
-                        <Card key={actuator.id} onClick={() => handleCardClick(actuator)}>
-                            <Box display='flex' justifyContent='space-between'>
-                                {actuator.name}
-                                <Grid container gap={1}>
-                                    <Chip color="primary">Pin: {actuator.pin_number}</Chip>
-                                    <Chip color="warning">{actuator.terminal_number}</Chip>
-                                </Grid>
-                            </Box>
-                        </Card>
-                    ))}
-                </Grid>
+                <Loading loading={actuatorsQuery.isLoading}>
+                    <Grid container sx={{ mt: 1 }} flexDirection='column' gap={2}>
+                        {actuatorsQuery.data?.map(actuator => (
+                            <Card key={actuator.id} onClick={() => handleCardClick(actuator)}>
+                                <Box display='flex' justifyContent='space-between'>
+                                    {actuator.name}
+                                    <Grid container gap={1}>
+                                        <Chip color="primary">Pin: {actuator.pin_number}</Chip>
+                                        <Chip color="warning">{actuator.terminal_number}</Chip>
+                                    </Grid>
+                                </Box>
+                            </Card>
+                        ))}
+                    </Grid>
+                </Loading>
             </Box >
             <Modal
                 title={renderModalTitle(selectedItem)}
diff --git a/src/pages/home/dashboard/index.tsx b/src/pages/home/dashboard/index.tsx
index fcf52e7..738171e 100644
--- a/src/pages/home/dashboard/index.tsx
+++ b/src/pages/home/dashboard/index.tsx
@@ -1,23 +1,19 @@
-import { Box, Button, Card, Chip, CircularProgress, Grid, LinearProgress, Link, Typography } from '@mui/joy'
-import { useMutation, useQueries, useQuery, useQueryClient } from '@tanstack/react-query'
-import actionAPI from '@/apis/action'
-import userAPI from '@/apis/user'
-import reportAPI from '@/apis/report'
-import { ActionSource, getActionIcon, getActionValueText } from '@/constants/action'
-import {
-    Action,
-    ActionHistory,
-    DispatchActionRequest,
-} from '@/apis/action.types'
-import React, { useEffect, useRef, useState } from 'react'
-import { LineChart } from '@mui/x-charts/LineChart'
-import { SensorReport } from '@/apis/report.types'
-import dayjs, { Dayjs } from 'dayjs'
-import { SensorType } from '@/constants/sensor'
+import dayjs, { Dayjs } from 'dayjs';
+import React, { useEffect, useRef, useState } from 'react';
 
-import icon from '@/assets/icon.png'
-import useTabStore from '@/stores/tab'
-import { createLazyRoute } from '@tanstack/react-router'
+import actionAPI from '@/apis/action';
+import { Action, ActionHistory, DispatchActionRequest } from '@/apis/action.types';
+import reportAPI from '@/apis/report';
+import { SensorReport } from '@/apis/report.types';
+import userAPI from '@/apis/user';
+import icon from '@/assets/icon.png';
+import Loading from '@/components/loading';
+import { ActionSource, getActionIcon, getActionValueText } from '@/constants/action';
+import { SensorType } from '@/constants/sensor';
+import { Box, Button, Card, Chip, Grid, Link, Typography } from '@mui/joy';
+import { LineChart } from '@mui/x-charts/LineChart';
+import { useMutation, useQueries, useQuery, useQueryClient } from '@tanstack/react-query';
+import { createLazyRoute, useNavigate } from '@tanstack/react-router';
 
 const initialReportState = {
     [SensorType.SoilMoisture]: {
@@ -41,7 +37,7 @@ const Dashboard = () => {
     const [mutationLoading, setMutationLoading] = useState<{ [key: string]: boolean }>({})
     const [reportStartTime, setReportStartTime] = useState<Dayjs>(createDateHourDayJSNow().add(-1, "hour"))
     const sensorReportCardRef = useRef<HTMLElement>()
-    const { setTab } = useTabStore()
+    const navigate = useNavigate()
 
     const userInfoQuery = useQuery({
         queryFn: userAPI.getUserInfo,
@@ -133,11 +129,7 @@ const Dashboard = () => {
         <Card sx={{ mt: 2, gap: 0, pt: 3, overflow: 'hidden' }} variant='soft'>
             <Box ref={sensorReportCardRef}>
                 <Typography fontSize="1rem">Kelembapan Tanah</Typography>
-                {soilMoistureSensorReportQuery.isLoading ? (
-                    <Grid container justifyContent='center'>
-                        <CircularProgress />
-                    </Grid>
-                ) : (
+                <Loading loading={soilMoistureSensorReportQuery.isLoading}>
                     <LineChart
                         xAxis={[{
                             dataKey: 'time',
@@ -172,35 +164,37 @@ const Dashboard = () => {
                         }}
                         width={sensorReportCardRef?.current?.clientWidth || 0}
                     />
-                )}
+                </Loading>
             </Box>
         </Card>
         <Typography sx={{ mt: 4 }} fontSize='1.2rem' fontWeight='600'>Panel Kontrol</Typography>
-        {actions.isLoading ? <LinearProgress sx={{ mt: 2 }} /> :
-            (actions.data?.length || 0) == 0 ? (
-                <Typography color="neutral" fontSize="sm" textAlign="center" sx={{ mt: 2 }}>
-                    Panel aktif tidak ditemukan. Pastikan panel di halaman <Link onClick={() => setTab(3)} fontWeight='600'>pengaturan</Link> telah aktif
-                </Typography>
-            ) :
-                <Box sx={{ display: 'grid', gap: 2, mt: 2, gridTemplateColumns: '1fr 1fr' }}>
-                    {actions.data?.map((action, index) => {
-                        const state = actionStates[index]
-                        return <ButtonCard
-                            key={index}
-                            id={index}
-                            title={action.name}
-                            Icon={getActionIcon(action.icon)}
-                            on={state.data?.value || false}
-                            onText={getActionValueText(action.type, true)}
-                            offText={getActionValueText(action.type, false)}
-                            isLoading={state?.isLoading || mutationLoading[action.id]}
-                            onClick={() => mutateState(action.id, !state.data?.value)} />
-                    })}
-                </Box>
-        }
+        <Loading loading={actions.isLoading}>
+            {
+                (actions.data?.length || 0) == 0 ? (
+                    <Typography color="neutral" fontSize="sm" textAlign="center" sx={{ mt: 2 }}>
+                        Panel aktif tidak ditemukan. Pastikan panel di halaman <Link onClick={() => navigate({ to: '/setting' })} fontWeight='600'>pengaturan</Link> telah aktif
+                    </Typography>
+                ) :
+                    <Box sx={{ display: 'grid', gap: 2, mt: 2, gridTemplateColumns: '1fr 1fr' }}>
+                        {actions.data?.map((action, index) => {
+                            const state = actionStates[index]
+                            return <ButtonCard
+                                key={index}
+                                id={index}
+                                title={action.name}
+                                Icon={getActionIcon(action.icon)}
+                                on={state.data?.value || false}
+                                onText={getActionValueText(action.type, true)}
+                                offText={getActionValueText(action.type, false)}
+                                isLoading={state?.isLoading || mutationLoading[action.id]}
+                                onClick={() => mutateState(action.id, !state.data?.value)} />
+                        })}
+                    </Box>
+            }
+        </Loading>
         <Box sx={{ mt: 0 }}>
             <Typography sx={{ mt: 4 }} fontSize='1.2rem' fontWeight='600'>Riwayat Kontrol</Typography>
-            {actionHistoriesQuery.isLoading ? <LinearProgress sx={{ mt: 2 }} /> : (
+            <Loading loading={actionHistoriesQuery.isLoading}>
                 <Grid container direction='column' sx={{ mt: 2 }} gap={2}>
                     {actionHistoriesQuery.data?.map(history => {
                         const Icon = getActionIcon(history.action.icon)
@@ -226,7 +220,7 @@ const Dashboard = () => {
                         )
                     })}
                 </Grid>
-            )}
+            </Loading>
         </Box>
     </Box>
 }
@@ -255,10 +249,7 @@ const appendReportData = (prev: SensorReport, report?: SensorReport): SensorRepo
         data: [...prev.data.slice(report.data.length), ...report.data]
     }
 }
-const createDateHourDayJSNow = () => {
-    return dayjs()
-        .set("second", 0)
-}
+const createDateHourDayJSNow = () => dayjs().set("second", 0)
 
 const generateGreetingMessage = () => {
     const date = new Date()
diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
index 7bc6a9b..9fa6acf 100644
--- a/src/pages/home/index.tsx
+++ b/src/pages/home/index.tsx
@@ -1,15 +1,16 @@
-import ListItemDecorator from '@mui/joy/ListItemDecorator';
-import Tabs from '@mui/joy/Tabs';
-import TabList from '@mui/joy/TabList';
-import Tab, { tabClasses } from '@mui/joy/Tab';
+import userAPI from '@/apis/user';
+import { UserInfo } from '@/stores/auh.types';
+import AdminPanelSettingsIcon from '@mui/icons-material/AdminPanelSettings';
 import HomeRoundedIcon from '@mui/icons-material/HomeRounded';
 import ScheduleIcon from '@mui/icons-material/Schedule';
 import SettingIcon from '@mui/icons-material/Settings';
-import { Outlet, createLazyRoute, useNavigate, useRouterState } from '@tanstack/react-router';
-import { Grid } from '@mui/joy';
+import { Grid, Typography } from '@mui/joy';
+import ListItemDecorator from '@mui/joy/ListItemDecorator';
+import Tab, { tabClasses } from '@mui/joy/Tab';
+import TabList from '@mui/joy/TabList';
+import Tabs from '@mui/joy/Tabs';
 import { useQuery } from '@tanstack/react-query';
-import userAPI from '@/apis/user'
-import { UserInfo } from '@/stores/auh.types';
+import { createLazyRoute, Outlet, useNavigate, useRouterState } from '@tanstack/react-router';
 
 const colors = ['primary', 'danger', 'success', 'warning'] as const;
 const tabs = [
@@ -89,7 +90,7 @@ const BottomNavigation = () => {
                 <ListItemDecorator>
                     <HomeRoundedIcon />
                 </ListItemDecorator>
-                Dashboard
+                <Typography fontSize='sm'>Dashboard</Typography>
             </Tab>
             <Tab
                 orientation="vertical"
@@ -98,7 +99,7 @@ const BottomNavigation = () => {
                 <ListItemDecorator>
                     <ScheduleIcon />
                 </ListItemDecorator>
-                Penjadwalan
+                <Typography fontSize='sm'>Penjadwalan</Typography>
             </Tab>
             <Tab
                 orientation="vertical"
@@ -107,7 +108,7 @@ const BottomNavigation = () => {
                 <ListItemDecorator>
                     <SettingIcon />
                 </ListItemDecorator>
-                Pengaturan
+                <Typography fontSize='sm'>Pengaturan</Typography>
             </Tab>
             {userInfo.data?.role == 99 && (
                 <Tab
@@ -115,9 +116,9 @@ const BottomNavigation = () => {
                     {...(currentIndex === 3 && { color: colors[3] })}
                 >
                     <ListItemDecorator>
-                        <SettingIcon />
+                        <AdminPanelSettingsIcon />
                     </ListItemDecorator>
-                    Admin
+                    <Typography fontSize='sm'>Admin</Typography>
                 </Tab>
             )}
         </TabList>
diff --git a/src/pages/home/schedule/index.tsx b/src/pages/home/schedule/index.tsx
index a8437d5..1c00f14 100644
--- a/src/pages/home/schedule/index.tsx
+++ b/src/pages/home/schedule/index.tsx
@@ -1,29 +1,32 @@
-import { DispatchActionRequest } from "@/apis/action.types";
+import dayjs, { Dayjs } from 'dayjs';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+import { DispatchActionRequest } from '@/apis/action.types';
 import schedulerAPI from '@/apis/scheduler';
-import { CreateSchedulerRequest, ScheduledTask } from "@/apis/scheduler.types";
-import { ActionType, ActionTypeValues, ScheduleStatusNames } from "@/constants/action";
-import { SchedulerRecurringMode } from "@/constants/scheduler";
-import { styled } from '@mui/material/styles';
+import { CreateSchedulerRequest, ScheduledTask } from '@/apis/scheduler.types';
+import settingAPI from '@/apis/setting';
+import ConfirmationDialog from '@/components/confirmation-dialog';
+import Loading from '@/components/loading';
+import Modal from '@/components/modal';
+import { ActionType, ActionTypeValues, ScheduleStatusNames } from '@/constants/action';
+import { defaultDateTimeFormat } from '@/constants/date';
+import { SchedulerRecurringMode } from '@/constants/scheduler';
+import useNotification from '@/stores/notification';
 import Add from '@mui/icons-material/Add';
 import DeleteIcon from '@mui/icons-material/Delete';
-import { Box, Button, Card, CardContent, Grid, LinearProgress, Link, Option, Select, Tab, TabList, Tabs, Typography, tabClasses } from "@mui/joy";
-import { TimePicker } from "@mui/x-date-pickers";
-import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
-import { renderTimeViewClock } from '@mui/x-date-pickers/timeViewRenderers';
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import dayjs, { Dayjs } from "dayjs";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import Modal from '@/components/modal';
-import { Collapse, TextField } from "@mui/material";
+import {
+    Box, Button, Card, CardContent, Grid, Link, Option, Select, Tab, tabClasses, TabList, Tabs,
+    Typography
+} from '@mui/joy';
 import IconButton, { IconButtonProps } from '@mui/joy/IconButton';
-import { defaultDateTimeFormat } from "@/constants/date";
-import ConfirmationDialog from "@/components/confirmation-dialog"
-
-import settingAPI from "@/apis/setting"
-import useTabStore from "@/stores/tab";
-import { createLazyRoute } from "@tanstack/react-router";
-import useNotification from "@/stores/notification";
+import { Collapse, TextField } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { TimePicker } from '@mui/x-date-pickers';
+import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
+import { renderTimeViewClock } from '@mui/x-date-pickers/timeViewRenderers';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { createLazyRoute, useNavigate } from '@tanstack/react-router';
 
 const scheduleModeTabMap: { [key: number]: SchedulerRecurringMode } = {
     0: SchedulerRecurringMode.NONE,
@@ -74,9 +77,7 @@ const Schedule = () => {
         onSuccess: () => {
             queryClient.invalidateQueries({ queryKey: [schedulerAPI.QUERY_KEY_GET_UPCOMING_SCHEDULES, 1] })
             setIsAddModalOpen(false)
-            setExpandedSchedule({
-                id: -1,
-            })
+            setExpandedSchedule(null)
             notification.fire("Berhasil mengubah jadwal")
         },
     })
@@ -89,11 +90,9 @@ const Schedule = () => {
     const [scheduleModeIndex, setScheduleModeIndex] = useState<number>(0)
     const [scheduleTime, setScheduleTime] = useState<Dayjs>(generateDefaultDateTime())
     const [actions, setActions] = useState<DispatchActionRequest[]>([])
-    const [expandedSchedule, setExpandedSchedule] = useState<Partial<ScheduledTask>>({
-        id: -1,
-    })
-    const setTab = useTabStore(store => store.setTab)
+    const [expandedSchedule, setExpandedSchedule] = useState<ScheduledTask | null>(null)
     const notification = useNotification()
+    const navigate = useNavigate()
 
     const upcomingSchedules = useMemo(() => upcomingSchedulesQuery.data, [upcomingSchedulesQuery.data])
     const actuators = useMemo(() => [...actuatorsQuery.data || []], [actuatorsQuery.data])
@@ -117,7 +116,7 @@ const Schedule = () => {
         setScheduleModeIndex(0)
         setScheduleTime(generateDefaultDateTime())
         setActions([])
-        setExpandedSchedule({ id: -1 })
+        setExpandedSchedule(null)
         setIsAddModalOpen(true)
     }
 
@@ -135,16 +134,16 @@ const Schedule = () => {
     }, [scheduleName, scheduleDescription, scheduleModeIndex, scheduleTime, actions, duration, addScheduleMutation])
 
     const handleExpandSchedule = (schedule: ScheduledTask) => {
-        setExpandedSchedule(currentSchedule => schedule.id == currentSchedule.id ? { id: -1 } : schedule)
+        setExpandedSchedule(currentSchedule => schedule.id == currentSchedule?.id ? null : schedule)
     }
 
     const handleDeleteSchedule = () => {
-        if (!expandedSchedule.id) return
+        if (!expandedSchedule) return
         deleteScheduleMutation.mutate(expandedSchedule.id as number)
     }
 
     const handleEditSchedule = () => {
-        if (!expandedSchedule.id) return
+        if (!expandedSchedule) return
         updateScheduleMutation.mutate({
             ...expandedSchedule as ScheduledTask,
             name: scheduleName,
@@ -157,6 +156,7 @@ const Schedule = () => {
     }
 
     const handleEditScheduleAction = () => {
+        if (!expandedSchedule) return
         setScheduleName(expandedSchedule.name || "")
         setScheduleDescription(expandedSchedule.description || "")
         setScheduleDuration(expandedSchedule.duration || 0)
@@ -183,7 +183,7 @@ const Schedule = () => {
 
     // Reset schedule time when mode changes
     useEffect(() => {
-        if ((expandedSchedule.id || 0) > 0) return
+        if (!expandedSchedule || expandedSchedule.id > 0) return
         setScheduleTime(generateDefaultDateTime())
     }, [scheduleModeIndex, expandedSchedule])
 
@@ -199,51 +199,52 @@ const Schedule = () => {
                         startDecorator={<Add />}
                         onClick={handleAddNewSchedule}
                     >Tambah Jadwal</Button>
-                    {upcomingSchedulesQuery.isLoading && <LinearProgress />}
-                    {!upcomingSchedulesQuery.isLoading && !upcomingSchedules?.length && <Typography color="neutral" fontSize='sm'>Tidak ada Jadwal</Typography>}
-                    {upcomingSchedules?.map((schedule) => (
-                        <Card key={schedule.id} variant="soft">
-                            <Grid container width='100%' justifyContent='space-between'>
-                                <Box>
-                                    <Typography sx={{ m: 0 }} fontWeight='600'>{schedule.name}</Typography>
-                                    <Typography color="primary" fontSize='sm'>{dayjs(schedule.next_run_at).format(defaultDateTimeFormat)}</Typography>
-                                </Box>
-                                <ExpandMore
-                                    expand={expandedSchedule.id === schedule.id}
-                                    onClick={() => handleExpandSchedule(schedule)}>
-                                    <ExpandMoreIcon />
-                                </ExpandMore>
-                            </Grid>
-                            <Collapse in={expandedSchedule.id == schedule.id} timeout="auto" unmountOnExit>
-                                <CardContent>
-                                    {schedule.description && <Box sx={{ mt: 2 }}>
-                                        <Typography fontSize='sm' fontWeight={600}>Deskripsi</Typography>
-                                        <Typography fontSize='sm'>{schedule.description}</Typography>
-                                    </Box>}
-                                    {schedule.last_run_at && (
+                    <Loading loading={upcomingSchedulesQuery.isLoading}>
+                        {!upcomingSchedulesQuery.isLoading && !upcomingSchedules?.length && <Typography color="neutral" fontSize='sm'>Tidak ada Jadwal</Typography>}
+                        {upcomingSchedules?.map((schedule) => (
+                            <Card key={schedule.id} variant="soft">
+                                <Grid container width='100%' justifyContent='space-between'>
+                                    <Box>
+                                        <Typography sx={{ m: 0 }} fontWeight='600'>{schedule.name}</Typography>
+                                        <Typography color="primary" fontSize='sm'>{dayjs(schedule.next_run_at).format(defaultDateTimeFormat)}</Typography>
+                                    </Box>
+                                    <ExpandMore
+                                        expand={expandedSchedule?.id === schedule.id}
+                                        onClick={() => handleExpandSchedule(schedule)}>
+                                        <ExpandMoreIcon />
+                                    </ExpandMore>
+                                </Grid>
+                                <Collapse in={expandedSchedule?.id == schedule.id} timeout="auto" unmountOnExit>
+                                    <CardContent>
+                                        {schedule.description && <Box sx={{ mt: 2 }}>
+                                            <Typography fontSize='sm' fontWeight={600}>Deskripsi</Typography>
+                                            <Typography fontSize='sm'>{schedule.description}</Typography>
+                                        </Box>}
+                                        {schedule.last_run_at && (
+                                            <Box sx={{ mt: 2 }}>
+                                                <Typography fontSize='sm' fontWeight={600}>Waktu Eksekusi Terakhir</Typography>
+                                                <Typography fontSize='sm'>{dayjs(schedule.last_run_at).format(defaultDateTimeFormat)}</Typography>
+                                            </Box>
+                                        )}
                                         <Box sx={{ mt: 2 }}>
-                                            <Typography fontSize='sm' fontWeight={600}>Waktu Eksekusi Terakhir</Typography>
-                                            <Typography fontSize='sm'>{dayjs(schedule.last_run_at).format(defaultDateTimeFormat)}</Typography>
+                                            <Typography fontSize='sm' fontWeight={600}>Status Terakhir</Typography>
+                                            <Typography fontSize='sm'>{ScheduleStatusNames[schedule.last_run_status]}</Typography>
                                         </Box>
-                                    )}
-                                    <Box sx={{ mt: 2 }}>
-                                        <Typography fontSize='sm' fontWeight={600}>Status Terakhir</Typography>
-                                        <Typography fontSize='sm'>{ScheduleStatusNames[schedule.last_run_status]}</Typography>
-                                    </Box>
-                                    <Box alignSelf='flex-end' gap={1} display='flex'>
-                                        <Button onClick={handleEditScheduleAction}>Ubah</Button>
-                                        <Button color="danger" onClick={() => setIsDeleteConfirmationOpen(true)}>Hapus</Button>
-                                    </Box>
-                                </CardContent>
-                            </Collapse>
-                        </Card>
-                    ))}
+                                        <Box alignSelf='flex-end' gap={1} display='flex'>
+                                            <Button onClick={handleEditScheduleAction}>Ubah</Button>
+                                            <Button color="danger" onClick={() => setIsDeleteConfirmationOpen(true)}>Hapus</Button>
+                                        </Box>
+                                    </CardContent>
+                                </Collapse>
+                            </Card>
+                        ))}
+                    </Loading>
                 </Grid >
             </Box>
 
             {/* Add / Update Schedule Dialog */}
             <Modal
-                title={(expandedSchedule.id || 0) > 0 ? "Ubah Jadwal" : "Tambah Jadwal"}
+                title={expandedSchedule ? "Ubah Jadwal" : "Tambah Jadwal"}
                 isOpen={isAddModalOpen}
                 onClose={() => setIsAddModalOpen(false)}
                 buttonActions={[
@@ -252,7 +253,7 @@ const Schedule = () => {
                         variant: 'solid',
                         color: 'primary',
                         loading: addScheduleMutation.isPending || updateScheduleMutation.isPending,
-                        onClick: (expandedSchedule.id || 0) > 0 ? handleEditSchedule : handleSaveSchedule,
+                        onClick: expandedSchedule ? handleEditSchedule : handleSaveSchedule,
                     },
                     {
                         label: 'Tutup',
@@ -263,10 +264,7 @@ const Schedule = () => {
                 ]}
             >
                 <Grid container direction='column' gap={2}>
-                    <form style={{
-                        display: 'grid',
-                        gap: '1em'
-                    }}>
+                    <form style={{ display: 'grid', gap: '1em' }}>
                         <TextField size="small" label="Nama" value={scheduleName} onChange={e => setScheduleName(e.target.value)} />
                         <TextField size="small" multiline minRows={2} label="Deskripsi" value={scheduleDescription} onChange={e => setScheduleDescription(e.target.value)} />
                         <Tabs value={scheduleModeIndex} onChange={(_, val) => setScheduleModeIndex(val as number)} >
@@ -323,7 +321,7 @@ const Schedule = () => {
                             defaultAddActionRequest.actuator_id && <Button variant="soft" startDecorator={<Add />} color="primary" onClick={() => setActions(prev => ([...prev, { ...defaultAddActionRequest as DispatchActionRequest }]))}>Tambah Aksi</Button>
                             : (
                                 <Typography color="neutral" fontSize="sm" textAlign="center">
-                                    Tidak bisa menambah aksi karena tidak ada panel yang aktif. Pastikan panel pada <Link onClick={() => setTab(3)} fontWeight='600'>pengaturan</Link> telah aktif
+                                    Tidak bisa menambah aksi karena tidak ada panel yang aktif. Pastikan panel pada <Link onClick={() => navigate({ to: '/setting' })} fontWeight='600'>pengaturan</Link> telah aktif
                                 </Typography>
                             )}
                     </form>
@@ -332,13 +330,13 @@ const Schedule = () => {
 
             {/* Confirmation Dialog */}
             <ConfirmationDialog
-                description={`Apakah anda yakin untuk menghapus jadwal ${expandedSchedule.name} ? Anda perlu membuat jadwal baru jika ingin mengembalikan`}
+                description={`Apakah anda yakin untuk menghapus jadwal ${expandedSchedule?.name} ? Anda perlu membuat jadwal baru jika ingin mengembalikan`}
                 isOpen={isDeleteConfirmationOpen}
                 cancelText="Batalkan"
                 okText="Hapus"
                 onCancel={() => setIsDeleteConfirmationOpen(false)}
                 onOk={handleDeleteSchedule}
-                title={`Hapus jadwal ${expandedSchedule.name}`}
+                title={`Hapus jadwal ${expandedSchedule?.name}`}
             />
         </>
     )
diff --git a/src/pages/home/setting/index.tsx b/src/pages/home/setting/index.tsx
index 315908e..8eb41fa 100644
--- a/src/pages/home/setting/index.tsx
+++ b/src/pages/home/setting/index.tsx
@@ -1,16 +1,19 @@
-import { Box, Card, Chip, Grid, LinearProgress, Select, Option, Typography, Button } from "@mui/joy"
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
-import settingAPI from '@/apis/setting'
-import userAPI from '@/apis/user'
-import { ActionIcon, getActionIcon } from "@/constants/action"
-import Modal from "@/components/modal"
-import { TextField } from "@mui/material"
-import { useState } from "react"
-import { Actuator } from "@/apis/setting.types"
-import { createLazyRoute, useNavigate } from "@tanstack/react-router"
-import ConfirmationDialog from "@/components/confirmation-dialog"
-import useAuthStore from "@/stores/auth"
-import useNotification from "@/stores/notification"
+import { useState } from 'react';
+
+import settingAPI from '@/apis/setting';
+import { Actuator } from '@/apis/setting.types';
+import userAPI from '@/apis/user';
+import ConfirmationDialog from '@/components/confirmation-dialog';
+import Modal from '@/components/modal';
+import { ActionIcon, getActionIcon } from '@/constants/action';
+import useAuthStore from '@/stores/auth';
+import useNotification from '@/stores/notification';
+import {
+    Box, Button, Card, Chip, Grid, LinearProgress, Option, Select, Typography
+} from '@mui/joy';
+import { TextField } from '@mui/material';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { createLazyRoute, useNavigate } from '@tanstack/react-router';
 
 const Setting = () => {
     const [selectedPanel, setSelectedPanel] = useState<Actuator | null>()
diff --git a/src/stores/auth.ts b/src/stores/auth.ts
index d1b7cbc..1b08e0d 100644
--- a/src/stores/auth.ts
+++ b/src/stores/auth.ts
@@ -1,6 +1,7 @@
-import { create } from "zustand";
-import { AuthStore } from "./auh.types";
-import { createJSONStorage, persist } from "zustand/middleware";
+import { create } from 'zustand';
+import { createJSONStorage, persist } from 'zustand/middleware';
+
+import { AuthStore } from './auh.types';
 
 const useAuthStore = create<AuthStore>()(
     persist(
diff --git a/src/stores/notification.ts b/src/stores/notification.ts
index 7ac2c51..bd35936 100644
--- a/src/stores/notification.ts
+++ b/src/stores/notification.ts
@@ -1,5 +1,6 @@
-import { create } from "zustand"
-import { NotificationStore, NotificationType } from "./notification.types"
+import { create } from 'zustand';
+
+import { NotificationStore, NotificationType } from './notification.types';
 
 const useNotification = create<NotificationStore>()(
     (set) => ({
diff --git a/src/stores/tab.ts b/src/stores/tab.ts
deleted file mode 100644
index 059e02c..0000000
--- a/src/stores/tab.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { create } from "zustand";
-import { TabState } from "./tab.types";
-
-const useTabStore = create<TabState>()(
-    (set) => ({
-        tab: 1,
-        setTab: (tab: number) => set({ tab })
-    })
-)
-
-export default useTabStore
\ No newline at end of file
diff --git a/src/stores/tab.types.ts b/src/stores/tab.types.ts
deleted file mode 100644
index 4d3f879..0000000
--- a/src/stores/tab.types.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export interface TabState {
-    tab: number,
-    setTab: (tab: number) => void
-}
\ No newline at end of file
diff --git a/src/utils/network.ts b/src/utils/network.ts
index dfb695c..eb2cb07 100644
--- a/src/utils/network.ts
+++ b/src/utils/network.ts
@@ -1,4 +1,4 @@
-import useAuthStore from "@/stores/auth"
+import useAuthStore from '@/stores/auth';
 
 const BASE_URL = import.meta.env.VITE_BASE_URL