diff --git a/src/App.tsx b/src/App.tsx
index 1ca66a4..2f57b2f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,10 +1,8 @@
-import type { Component } from 'solid-js';
-
+import type { Component } from "solid-js";
+import AppRouter from "./routes";
 
 const App: Component = () => {
-  return (
-    <p>Solid INIT</p>
-  );
+  return <AppRouter />;
 };
 
 export default App;
diff --git a/src/index.tsx b/src/index.tsx
index 1b58b09..2edee34 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,7 +1,15 @@
 /* @refresh reload */
-import { render } from 'solid-js/web';
+import { render } from "solid-js/web";
 
-import './index.css';
-import App from './App';
+import "./index.css";
+import App from "./App";
+import { Router } from "@solidjs/router";
 
-render(() => <App />, document.getElementById('main-container') as HTMLElement);
+render(
+  () => (
+    <Router>
+      <App />
+    </Router>
+  ),
+  document.getElementById("main-container") as HTMLElement
+);
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
new file mode 100644
index 0000000..f7d3398
--- /dev/null
+++ b/src/routes/index.tsx
@@ -0,0 +1,21 @@
+import { Route, Routes } from "@solidjs/router";
+import { Component, lazy } from "solid-js";
+
+const Home = lazy(() => import("./views/home/Home"));
+const AuthLayout = lazy(() => import("./views/auth/AuthLayout"));
+const Login = lazy(() => import("./views/auth/Login"));
+const Register = lazy(() => import("./views/auth/Register"));
+
+const AppRouter: Component = () => {
+  return (
+    <Routes>
+      <Route path="/" element={<Home />}></Route>
+      <Route path="/auth" element={<AuthLayout />}>
+        <Route path="/login" element={<Login />}></Route>
+        <Route path="/register" element={<Register />}></Route>
+      </Route>
+    </Routes>
+  );
+};
+
+export default AppRouter;
diff --git a/src/routes/views/MainLayout.tsx b/src/routes/views/MainLayout.tsx
new file mode 100644
index 0000000..3fb9407
--- /dev/null
+++ b/src/routes/views/MainLayout.tsx
@@ -0,0 +1,13 @@
+interface MainViewProps {
+    // add props here
+}
+
+function MainView(props: MainViewProps) {
+    return (
+        <div>
+            <h2>MainView</h2>
+        </div>
+    )
+}
+
+export default MainView;
\ No newline at end of file
diff --git a/src/routes/views/auth/AuthLayout.tsx b/src/routes/views/auth/AuthLayout.tsx
new file mode 100644
index 0000000..68a0b6d
--- /dev/null
+++ b/src/routes/views/auth/AuthLayout.tsx
@@ -0,0 +1,16 @@
+import type { Component } from "solid-js";
+import { Outlet } from "@solidjs/router";
+
+const AuthLayout: Component = () => {
+  return (
+    <div>
+      <header>Head</header>
+      <div>
+        <Outlet />
+      </div>
+      <footer>Footer</footer>
+    </div>
+  );
+}
+
+export default AuthLayout;
diff --git a/src/routes/views/auth/Login.tsx b/src/routes/views/auth/Login.tsx
new file mode 100644
index 0000000..cb560ac
--- /dev/null
+++ b/src/routes/views/auth/Login.tsx
@@ -0,0 +1,10 @@
+import type { Component } from "solid-js";
+const Login: Component = () => {
+    return (
+        <div>
+            <h2>Login</h2>
+        </div>
+    )
+}
+
+export default Login;
\ No newline at end of file
diff --git a/src/routes/views/auth/Register.tsx b/src/routes/views/auth/Register.tsx
new file mode 100644
index 0000000..d91fb9c
--- /dev/null
+++ b/src/routes/views/auth/Register.tsx
@@ -0,0 +1,10 @@
+import type { Component } from "solid-js";
+const Register: Component = () => {
+    return (
+        <div>
+            <h2>Register</h2>
+        </div>
+    )
+}
+
+export default Register;
\ No newline at end of file
diff --git a/src/routes/views/home/Home.tsx b/src/routes/views/home/Home.tsx
new file mode 100644
index 0000000..17d66d8
--- /dev/null
+++ b/src/routes/views/home/Home.tsx
@@ -0,0 +1,11 @@
+import type { Component } from "solid-js";
+
+const Home: Component = () => {
+    return (
+        <div>
+            <h2>Home</h2>
+        </div>
+    )
+}
+
+export default Home;
\ No newline at end of file