diff --git a/src/App.tsx b/src/App.tsx
index 68fd30a442780a806502d6eb452c59d320d8e826..ad41f4eb1cc01e1081c4208deb767a13450fe425 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -16,7 +16,7 @@ function App() {
           <img src={reactLogo} className="logo react" alt="React logo" />
         </a>
       </div>
-      <h1>Karsus</h1>
+      <h1>Kars</h1>
       <div className="card">
         <button onClick={() => setCount((count) => count + 1)}>
           count is {count}
diff --git a/src/main.tsx b/src/main.tsx
index 3d7150da80e43e3650342aa4758fa8b74e95d6d6..19743f9155420eb2e22a7cb2595b806cde440b7f 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,10 +1,70 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
+// import App from './App.tsx'
 import './index.css'
+import ClassOwner from './pages/ClassOwner.tsx'
+import ClassOwnerDetail from './pages/ClassOwnerDetail.tsx'
+import ClassPublic from './pages/ClassPublic.tsx'
+import ClassPublicDetail from './pages/ClassPublicDetail.tsx'
+import InstructorData from './pages/InstructorData.tsx'
+import LoginPage from './pages/LoginPage.tsx'
+import StudentData from './pages/StudentData.tsx'
+import UserData from './pages/UserData.tsx'
+import VehicleDataAdmin from './pages/VehicleDataAdmin.tsx'
+import VehicleDataOwner from './pages/VehicleDataOwner.tsx'
+import {
+  createBrowserRouter,
+  RouterProvider,
+} from "react-router-dom";
+
+
+// INI MASIH PLACEHOLDER, ROUTING AKAN DILAKUKAN NANTI SETELAH AUTH SELESAI
+// PLACEHOLDER UNTUK PENGEMBANGAN FE
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <ClassPublic />
+  },
+  {
+    path: "/login",
+    element: <LoginPage />
+  },
+  {
+    path: "/classpublicdetail",
+    element: <ClassPublicDetail />
+  },
+  {
+    path: "/studentdata",
+    element: <StudentData />
+  },
+  {
+    path: "/userdata",
+    element: <UserData />
+  },
+  {
+    path: "/vehicledataadmin",
+    element: <VehicleDataAdmin />
+  },
+  {
+    path: "/vehicledataowner",
+    element: <VehicleDataOwner />
+  },
+  {
+    path: "/instructordata",
+    element: <InstructorData />
+  },
+  {
+    path: "/classowner",
+    element: <ClassOwner/>
+  },
+  {
+    path: "/classownerdetail",
+    element: <ClassOwnerDetail/>
+  }
+]);
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
+    <RouterProvider router={router} />
   </React.StrictMode>,
 )
diff --git a/src/pages/ClassOwner.tsx b/src/pages/ClassOwner.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..642c72bc12f42ecdc59aa1b2ea52f34e3995b8ab
--- /dev/null
+++ b/src/pages/ClassOwner.tsx
@@ -0,0 +1,7 @@
+export default function ClassOwner(){
+    return(<>
+    <h1>
+        This is the class owner page
+    </h1>
+    </>)
+}
\ No newline at end of file
diff --git a/src/pages/ClassOwnerDetail.tsx b/src/pages/ClassOwnerDetail.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..b63cd00cf46f0db2bd6857e18367f1e9f64e148e
--- /dev/null
+++ b/src/pages/ClassOwnerDetail.tsx
@@ -0,0 +1,7 @@
+export default function ClassOwnerDetail(){
+    return(<>
+    <h1>
+        This is the class owner detail page
+    </h1>
+    </>)
+}
\ No newline at end of file
diff --git a/src/pages/ClassPublic.tsx b/src/pages/ClassPublic.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..1c384f9ecd8d15371008bdfb3576d8bcc9a7c98c
--- /dev/null
+++ b/src/pages/ClassPublic.tsx
@@ -0,0 +1,7 @@
+export default function ClassPublic(){
+    return(<>
+    <h1>
+        This is the class public page
+    </h1>
+    </>)
+}
\ No newline at end of file
diff --git a/src/pages/ClassPublicDetail.tsx b/src/pages/ClassPublicDetail.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..b354c2fba0265650cb3f02b6ee49306f644f55a1
--- /dev/null
+++ b/src/pages/ClassPublicDetail.tsx
@@ -0,0 +1,7 @@
+export default function ClassPublicDetail(){
+    return(<>
+    <h1>
+        This is the class public detail page
+    </h1>
+    </>)
+}
\ No newline at end of file
diff --git a/src/pages/InstructorData.tsx b/src/pages/InstructorData.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..51a0bed3cfa1c099096f54e8200b5cb55c08789a
--- /dev/null
+++ b/src/pages/InstructorData.tsx
@@ -0,0 +1,7 @@
+export default function InstructorData(){
+    return(<>
+    <h1>
+        This is the instructor page
+    </h1>
+    </>)
+}
\ No newline at end of file
diff --git a/src/pages/LoginPage.tsx b/src/pages/LoginPage.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..83cf2f2172bd753300ac922708d3dbc0861d7e23
--- /dev/null
+++ b/src/pages/LoginPage.tsx
@@ -0,0 +1,7 @@
+export default function LoginPage(){
+    return(<>
+    <h1>
+        This is the login Page
+    </h1>
+    </>)
+}
\ No newline at end of file
diff --git a/src/pages/StudentData.tsx b/src/pages/StudentData.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ef1f9760b1214db083421100a673b19f53245c58
--- /dev/null
+++ b/src/pages/StudentData.tsx
@@ -0,0 +1,7 @@
+export default function StudentData(){
+    return(<>
+    <h1>
+        This is the student data page
+    </h1>
+    </>)
+}
\ No newline at end of file
diff --git a/src/pages/UserData.tsx b/src/pages/UserData.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c7c0d0840f61675d791c070b45a9416e49348bf6
--- /dev/null
+++ b/src/pages/UserData.tsx
@@ -0,0 +1,7 @@
+export default function UserData(){
+    return(<>
+    <h1>
+        This is the user data
+    </h1>
+    </>)
+}
\ No newline at end of file
diff --git a/src/pages/VehicleDataAdmin.tsx b/src/pages/VehicleDataAdmin.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d8a3ed080fc63974003f797f10bad069782bda29
--- /dev/null
+++ b/src/pages/VehicleDataAdmin.tsx
@@ -0,0 +1,7 @@
+export default function VehicleDataAdmin(){
+    return(<>
+    <h1>
+        This is the vehicle admin
+    </h1>
+    </>)
+}
\ No newline at end of file
diff --git a/src/pages/VehicleDataOwner.tsx b/src/pages/VehicleDataOwner.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..191ada56cb9be1da862f2f364b2188a421f22133
--- /dev/null
+++ b/src/pages/VehicleDataOwner.tsx
@@ -0,0 +1,7 @@
+export default function VehicleDataOwner(){
+    return(<>
+    <h1>
+        This is the vehicle data owner
+    </h1>
+    </>)
+}
\ No newline at end of file