diff --git a/src/App.css b/src/App.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/App.jsx b/src/App.jsx
new file mode 100644
index 0000000..4872856
--- /dev/null
+++ b/src/App.jsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import SignIn from './pages/auth/SignIn';
+import { ProtectedRoute } from './ProtectedRoute';
+import NotFound from './pages/blank/NotFound';
+import { getSessionData } from './components/Global/Formatter';
+
+// dashboard
+import Home from './pages/home/Home';
+import Blank from './pages/blank/Blank';
+
+// master
+import IndexDevice from './pages/master/device/IndexDevice';
+
+// Setting
+
+const App = () => {
+    const session = getSessionData();
+    // console.log(session);
+
+    const isAdmin =
+        session?.user?.role_id != `${import.meta.env.VITE_ROLE_VENDOR}` &&
+        session?.user?.role_id &&
+        session?.user?.role_id != null &&
+        session?.user?.role_id != 0;
+
+    return (
+        <BrowserRouter
+            future={{
+                v7_startTransition: true,
+                v7_relativeSplatPath: true,
+            }}
+        >
+            <Routes>
+                {isAdmin ? (
+                    <Route path="/" element={<Navigate to="/dashboard/home" />} />
+                ) : (
+                    <Route path="/" element={<Navigate to="/dashboard/home-vendor" />} />
+                )}
+
+                <Route path="/signin" element={<SignIn />} />
+                <Route path="/dashboard" element={<ProtectedRoute />}>
+                    <Route path="home" element={<Home />} />
+                    <Route path="blank" element={<Blank />} />
+                </Route>
+
+                <Route path="/master" element={<ProtectedRoute />}>
+                    <Route path="device" element={<IndexDevice />} />
+                </Route>
+
+                <Route path="*" element={<NotFound />} />
+            </Routes>
+        </BrowserRouter>
+    );
+};
+
+export default App;
diff --git a/src/ProtectedRoute.jsx b/src/ProtectedRoute.jsx
new file mode 100644
index 0000000..1015c1f
--- /dev/null
+++ b/src/ProtectedRoute.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { Navigate, Outlet } from 'react-router-dom';
+import MainLayout from './layout/MainLayout';
+
+import { getSessionData } from './components/Global/Formatter';
+
+export const ProtectedRoute = () => {
+    const session = getSessionData();
+    // console.log(session);
+
+    const isAuthenticated = session?.auth ?? false;
+    if (!isAuthenticated) {
+        return <Navigate to="/signin" replace />;
+    }
+    return (
+        <MainLayout>
+            <Outlet />
+        </MainLayout>
+    );
+};
diff --git a/src/Utils/Auth/Logout.jsx b/src/Utils/Auth/Logout.jsx
new file mode 100644
index 0000000..957d1aa
--- /dev/null
+++ b/src/Utils/Auth/Logout.jsx
@@ -0,0 +1,7 @@
+const handleLogOut = () => {
+    localStorage.removeItem('Auth');
+    localStorage.removeItem('session');
+    window.location.replace('/signin');
+}
+
+export default handleLogOut;
\ No newline at end of file
diff --git a/src/Utils/Auth/SignIn.jsx b/src/Utils/Auth/SignIn.jsx
new file mode 100644
index 0000000..e038f6a
--- /dev/null
+++ b/src/Utils/Auth/SignIn.jsx
@@ -0,0 +1,32 @@
+import { login } from '../../api/auth';
+import { encryptData } from '../../components/Global/Formatter';
+import { NotifAlert } from '../../components/Global/ToastNotif';
+
+const handleSignIn = async (values) => {
+
+    const response = await login(values);
+
+    // return false
+    if (response?.status == 200) {
+        /* you can change this according to your authentication protocol */
+        let token = JSON.stringify(response.data?.token);
+        let role = JSON.stringify(response.data?.user?.role_id);
+
+        localStorage.setItem('token', token);
+        response.data.auth = true;
+        localStorage.setItem('session', encryptData(response?.data));
+        if (role === `${import.meta.env.VITE_ROLE_VENDOR}`) {
+            window.location.replace('/dashboard/home-vendor');
+        } else {
+            window.location.replace('/dashboard/home');
+        }
+    } else {
+        NotifAlert({
+            icon: 'error',
+            title: 'Gagal',
+            message: response?.data?.message || 'Terjadi kesalahan saat menyimpan data.',
+        });
+    }
+};
+
+export default handleSignIn;
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..30d122f
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,21 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  /* color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424; */
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  margin: 0;
+  height: 100vh;
+}
+
+html body {
+  margin: 0;
+  height: 100vh;
+}
\ No newline at end of file
diff --git a/src/main.jsx b/src/main.jsx
new file mode 100644
index 0000000..a76e718
--- /dev/null
+++ b/src/main.jsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+import './index.css'
+import { BreadcrumbProvider } from './layout/LayoutBreadcrumb.jsx';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <BreadcrumbProvider>
+        <App />
+    </BreadcrumbProvider>
+  </React.StrictMode>,
+)