diff --git a/package.json b/package.json
index 44f14fa6..8b9c6f06 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,8 @@
     "@heroicons/react": "2.0.18",
     "@material-tailwind/react": "2.1.4",
     "apexcharts": "3.44.0",
+    "axios": "^1.12.2",
+    "jwt-decode": "^4.0.0",
     "prop-types": "15.8.1",
     "react": "18.2.0",
     "react-apexcharts": "1.4.1",
@@ -27,6 +29,6 @@
     "prettier": "3.0.3",
     "prettier-plugin-tailwindcss": "0.5.6",
     "tailwindcss": "3.3.4",
-    "vite": "4.5.0"
+    "vite": "^4.5.14"
   }
-}
\ No newline at end of file
+}
diff --git a/public/img/background.jpg b/public/img/background.jpg
new file mode 100644
index 00000000..fb14759e
Binary files /dev/null and b/public/img/background.jpg differ
diff --git a/public/img/pattern.png b/public/img/pattern.png
deleted file mode 100644
index 2b34e46f..00000000
Binary files a/public/img/pattern.png and /dev/null differ
diff --git a/src/App.jsx b/src/App.jsx
index 87826600..4995a483 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,12 +1,25 @@
 import { Routes, Route, Navigate } from "react-router-dom";
 import { Dashboard, Auth } from "@/layouts";
+import PrivateRoute from "../src/component/PrivateRoute";
 
 function App() {
   return (
     <Routes>
-      <Route path="/dashboard/*" element={<Dashboard />} />
+      {/* Dashboard'u sadece giriş yapmış kullanıcı görecek */}
+      <Route
+        path="/dashboard/*"
+        element={
+          <PrivateRoute>
+            <Dashboard />
+          </PrivateRoute>
+        }
+      />
+
+      {/* Auth sayfaları (giriş, kayıt) herkes görebilir */}
       <Route path="/auth/*" element={<Auth />} />
-      <Route path="*" element={<Navigate to="/dashboard/home" replace />} />
+
+      {/* Varsayılan yönlendirme */}
+      <Route path="*" element={<Navigate to="/auth/sign-in" replace />} />
     </Routes>
   );
 }
diff --git a/src/api/axiosConfig.js b/src/api/axiosConfig.js
new file mode 100644
index 00000000..8fabae67
--- /dev/null
+++ b/src/api/axiosConfig.js
@@ -0,0 +1,29 @@
+import axios from "axios";
+
+
+
+const apiClient = axios.create({
+    baseURL: "https://localhost:7093/api",
+});
+
+
+apiClient.interceptors.request.use(
+    (config) => {
+
+        const token = localStorage.getItem("authToken");
+
+
+        if (token) {
+
+            config.headers.Authorization = `Bearer ${token}`;
+        }
+
+        return config;
+    },
+    (error) => {
+
+        return Promise.reject(error);
+    }
+);
+
+export default apiClient;
\ No newline at end of file
diff --git a/src/component/PrivateRoute.jsx b/src/component/PrivateRoute.jsx
new file mode 100644
index 00000000..63f8e93b
--- /dev/null
+++ b/src/component/PrivateRoute.jsx
@@ -0,0 +1,15 @@
+import React from "react";
+import { Navigate } from "react-router-dom";
+
+const PrivateRoute = ({ children }) => {
+  const token = localStorage.getItem("authToken");
+
+  if (!token) {
+    // Token yoksa login sayfasına yönlendir
+    return <Navigate to="/auth/sign-in" replace />;
+  }
+
+  return children;
+};
+
+export default PrivateRoute;
diff --git a/src/context/index.jsx b/src/context/index.jsx
index 653a362d..232589ba 100644
--- a/src/context/index.jsx
+++ b/src/context/index.jsx
@@ -23,6 +23,10 @@ export function reducer(state, action) {
     }
     case "OPEN_CONFIGURATOR": {
       return { ...state, openConfigurator: action.value };
+    }
+      // YENİ: Kullanıcı rolünü ayarlamak için yeni case eklendi.
+    case "SET_USER_ROLE": {
+      return { ...state, userRole: action.value };
     }
     default: {
       throw new Error(`Unhandled action type: ${action.type}`);
@@ -38,18 +42,20 @@ export function MaterialTailwindControllerProvider({ children }) {
     transparentNavbar: true,
     fixedNavbar: false,
     openConfigurator: false,
+    // YENİ: userRole state'i eklendi. Sayfa yenilendiğinde rolün kaybolmaması için localStorage'dan okunuyor.
+    userRole: localStorage.getItem("userRole") || null,
   };
 
   const [controller, dispatch] = React.useReducer(reducer, initialState);
   const value = React.useMemo(
-    () => [controller, dispatch],
-    [controller, dispatch]
+      () => [controller, dispatch],
+      [controller, dispatch]
   );
 
   return (
-    <MaterialTailwind.Provider value={value}>
-      {children}
-    </MaterialTailwind.Provider>
+      <MaterialTailwind.Provider value={value}>
+        {children}
+      </MaterialTailwind.Provider>
   );
 }
 
@@ -58,7 +64,7 @@ export function useMaterialTailwindController() {
 
   if (!context) {
     throw new Error(
-      "useMaterialTailwindController should be used inside the MaterialTailwindControllerProvider."
+        "useMaterialTailwindController should be used inside the MaterialTailwindControllerProvider."
     );
   }
 
@@ -72,14 +78,18 @@ MaterialTailwindControllerProvider.propTypes = {
 };
 
 export const setOpenSidenav = (dispatch, value) =>
-  dispatch({ type: "OPEN_SIDENAV", value });
+    dispatch({ type: "OPEN_SIDENAV", value });
 export const setSidenavType = (dispatch, value) =>
-  dispatch({ type: "SIDENAV_TYPE", value });
+    dispatch({ type: "SIDENAV_TYPE", value });
 export const setSidenavColor = (dispatch, value) =>
-  dispatch({ type: "SIDENAV_COLOR", value });
+    dispatch({ type: "SIDENAV_COLOR", value });
 export const setTransparentNavbar = (dispatch, value) =>
-  dispatch({ type: "TRANSPARENT_NAVBAR", value });
+    dispatch({ type: "TRANSPARENT_NAVBAR", value });
 export const setFixedNavbar = (dispatch, value) =>
-  dispatch({ type: "FIXED_NAVBAR", value });
+    dispatch({ type: "FIXED_NAVBAR", value });
 export const setOpenConfigurator = (dispatch, value) =>
-  dispatch({ type: "OPEN_CONFIGURATOR", value });
+    dispatch({ type: "OPEN_CONFIGURATOR", value });
+
+
+export const setUserRole = (dispatch, value) =>
+    dispatch({ type: "SET_USER_ROLE", value });
\ No newline at end of file
diff --git a/src/layouts/dashboard.jsx b/src/layouts/dashboard.jsx
index 888a627a..3041b4a5 100644
--- a/src/layouts/dashboard.jsx
+++ b/src/layouts/dashboard.jsx
@@ -2,53 +2,53 @@ import { Routes, Route } from "react-router-dom";
 import { Cog6ToothIcon } from "@heroicons/react/24/solid";
 import { IconButton } from "@material-tailwind/react";
 import {
-  Sidenav,
-  DashboardNavbar,
-  Configurator,
-  Footer,
+  Sidenav,
+  DashboardNavbar,
+  Configurator,
+  Footer,
 } from "@/widgets/layout";
 import routes from "@/routes";
 import { useMaterialTailwindController, setOpenConfigurator } from "@/context";
 
 export function Dashboard() {
-  const [controller, dispatch] = useMaterialTailwindController();
-  const { sidenavType } = controller;
+  const [controller, dispatch] = useMaterialTailwindController();
+  const { sidenavType } = controller;
 
-  return (
-    <div className="min-h-screen bg-blue-gray-50/50">
-      <Sidenav
-        routes={routes}
-        brandImg={
-          sidenavType === "dark" ? "/img/logo-ct.png" : "/img/logo-ct-dark.png"
-        }
-      />
-      <div className="p-4 xl:ml-80">
-        <DashboardNavbar />
-        <Configurator />
-        <IconButton
-          size="lg"
-          color="white"
-          className="fixed bottom-8 right-8 z-40 rounded-full shadow-blue-gray-900/10"
-          ripple={false}
-          onClick={() => setOpenConfigurator(dispatch, true)}
-        >
-          <Cog6ToothIcon className="h-5 w-5" />
-        </IconButton>
-        <Routes>
-          {routes.map(
-            ({ layout, pages }) =>
-              layout === "dashboard" &&
-              pages.map(({ path, element }) => (
-                <Route exact path={path} element={element} />
-              ))
-          )}
-        </Routes>
-        <div className="text-blue-gray-600">
-          <Footer />
-        </div>
-      </div>
-    </div>
-  );
+  return (
+    <div className="min-h-screen bg-blue-gray-50/50">
+      <Sidenav
+        routes={routes}
+        brandImg={
+          sidenavType === "dark" ? "/img/logo-ct.png" : "/img/logo-ct-dark.png"
+        }
+      />
+      <div className="p-4 xl:ml-80">
+        <DashboardNavbar />
+        <Configurator />
+        <IconButton
+          size="lg"
+          color="white"
+          className="fixed bottom-8 right-8 z-40 rounded-full shadow-blue-gray-900/10"
+          ripple={false}
+          onClick={() => setOpenConfigurator(dispatch, true)}
+        >
+          <Cog6ToothIcon className="h-5 w-5" />
+        </IconButton>
+        <Routes>
+          {routes.map(
+            ({ layout, pages }) =>
+              layout === "dashboard" &&
+              pages.map(({ path, element }) => (
+                <Route exact path={path} element={element} />
+              ))
+          )}
+        </Routes>
+        <div className="text-blue-gray-600">
+          <Footer />
+        </div>
+      </div>
+    </div>
+  );
 }
 
 Dashboard.displayName = "/src/layout/dashboard.jsx";
diff --git a/src/pages/auth/index.js b/src/pages/auth/index.js
index ca1bbcb6..425a5351 100644
--- a/src/pages/auth/index.js
+++ b/src/pages/auth/index.js
@@ -1,2 +1,2 @@
 export * from "@/pages/auth/sign-in";
-export * from "@/pages/auth/sign-up";
+
diff --git a/src/pages/auth/sign-in.jsx b/src/pages/auth/sign-in.jsx
index 3b3da41a..9396ea96 100644
--- a/src/pages/auth/sign-in.jsx
+++ b/src/pages/auth/sign-in.jsx
@@ -1,126 +1,122 @@
+import React, { useState } from "react";
+import { Card, Input, Button, Typography } from "@material-tailwind/react";
+import { useNavigate } from "react-router-dom";
+import { jwtDecode } from "jwt-decode";
 import {
-  Card,
-  Input,
-  Checkbox,
-  Button,
-  Typography,
-} from "@material-tailwind/react";
-import { Link } from "react-router-dom";
-
+  useMaterialTailwindController,
+  setUserRole,
+} from "@/context";
+// 1. Kendi oluşturduğunuz apiClient'ı import edin
+import apiClient from "../../api/axiosConfig.js"
 
 export function SignIn() {
+  const [, dispatch] = useMaterialTailwindController();
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const navigate = useNavigate();
+
+  const handleSignIn = async () => {
+    const loginData = {
+      username: username,
+      password: password,
+    };
+
+    try {
+
+      const response = await apiClient.post("/Auth/Login", loginData);
+
+
+      const token = response.data;
+      console.log(token);
+
+      if (token) {
+        // 3. Token'ı localStorage'a kaydet. Bu, interceptor'ın çalışması için kritik.
+        localStorage.setItem("authToken", token);
+
+
+        // İYİ BİR PRATİK: Token'ı aldıktan sonra, interceptor'ın bir sonraki
+        // sayfa yenilemesini beklemeden çalışması için anında ayarlayın.
+        apiClient.defaults.headers.common['Authorization'] = `Bearer ${token}`;
+
+        console.log("Giriş Başarılı!");
+        const decodedToken = jwtDecode(token);
+        const userRoleClaim = decodedToken.role || decodedToken["http://schemas.microsoft.com/ws/2008/06/identity/claims/role"];
+        const userRole = userRoleClaim ? userRoleClaim.toLowerCase() : null;
+        console.log("Kullanıcı Rolü:", userRole);
+
+        if (userRole) {
+          setUserRole(dispatch, userRole);
+          localStorage.setItem("userRole", userRole);
+        }
+
+        navigate("/dashboard/home");
+      } else {
+        alert("Giriş başarılı ancak sunucudan geçerli bir token alınamadı.");
+      }
+    } catch (error) {
+      // 4. Geliştirilmiş hata yönetimi.
+      // axios, 4xx veya 5xx gibi başarısız statü kodlarında otomatik olarak hata fırlatır ve bu blok çalışır.
+      console.error("Giriş sırasında hata:", error);
+
+      if (error.response) {
+        // Sunucu bir hata koduyla (401, 404, 500 vb.) yanıt verdi.
+        alert("Kullanıcı adı veya şifre hatalı!");
+      } else if (error.request) {
+        // İstek yapıldı ancak sunucudan yanıt alınamadı (network hatası).
+        alert("Sunucuya bağlanılamadı. Ağ bağlantınızı kontrol edin.");
+      } else {
+        // İsteği hazırlarken bir hata oluştu.
+        alert("Beklenmedik bir hata oluştu.");
+      }
+    }
+  };
+
   return (
-    <section className="m-8 flex gap-4">
-      <div className="w-full lg:w-3/5 mt-24">
-        <div className="text-center">
-          <Typography variant="h2" className="font-bold mb-4">Sign In</Typography>
-          <Typography variant="paragraph" color="blue-gray" className="text-lg font-normal">Enter your email and password to Sign In.</Typography>
-        </div>
-        <form className="mt-8 mb-2 mx-auto w-80 max-w-screen-lg lg:w-1/2">
-          <div className="mb-1 flex flex-col gap-6">
-            <Typography variant="small" color="blue-gray" className="-mb-3 font-medium">
-              Your email
+      <section
+          className="min-h-screen flex items-center justify-center bg-cover bg-center"
+          style={{ backgroundImage: `url(/img/background.jpg)` }}
+      >
+        <Card className="w-full max-w-md p-8 bg-white/90 backdrop-blur-sm shadow-2xl rounded-2xl">
+          <div className="text-center">
+            <Typography variant="h2" className="font-bold mb-6 text-gray-800">
+              LOGO
             </Typography>
-            <Input
-              size="lg"
-              placeholder="name@mail.com"
-              className=" !border-t-blue-gray-200 focus:!border-t-gray-900"
-              labelProps={{
-                className: "before:content-none after:content-none",
-              }}
-            />
-            <Typography variant="small" color="blue-gray" className="-mb-3 font-medium">
-              Password
-            </Typography>
-            <Input
-              type="password"
-              size="lg"
-              placeholder="********"
-              className=" !border-t-blue-gray-200 focus:!border-t-gray-900"
-              labelProps={{
-                className: "before:content-none after:content-none",
-              }}
-            />
           </div>
-          <Checkbox
-            label={
-              <Typography
-                variant="small"
-                color="gray"
-                className="flex items-center justify-start font-medium"
-              >
-                I agree the&nbsp;
-                <a
-                  href="#"
-                  className="font-normal text-black transition-colors hover:text-gray-900 underline"
-                >
-                  Terms and Conditions
-                </a>
+          <div className="flex flex-col gap-6">
+            <div>
+              <Typography variant="small" color="blue-gray" className="mb-2 font-medium">
+                Kullanıcı Adı
               </Typography>
-            }
-            containerProps={{ className: "-ml-2.5" }}
-          />
-          <Button className="mt-6" fullWidth>
-            Sign In
-          </Button>
-
-          <div className="flex items-center justify-between gap-2 mt-6">
-            <Checkbox
-              label={
-                <Typography
-                  variant="small"
-                  color="gray"
-                  className="flex items-center justify-start font-medium"
-                >
-                  Subscribe me to newsletter
-                </Typography>
-              }
-              containerProps={{ className: "-ml-2.5" }}
-            />
-            <Typography variant="small" className="font-medium text-gray-900">
-              <a href="#">
-                Forgot Password
-              </a>
-            </Typography>
-          </div>
-          <div className="space-y-4 mt-8">
-            <Button size="lg" color="white" className="flex items-center gap-2 justify-center shadow-md" fullWidth>
-              <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <g clipPath="url(#clip0_1156_824)">
-                  <path d="M16.3442 8.18429C16.3442 7.64047 16.3001 7.09371 16.206 6.55872H8.66016V9.63937H12.9813C12.802 10.6329 12.2258 11.5119 11.3822 12.0704V14.0693H13.9602C15.4741 12.6759 16.3442 10.6182 16.3442 8.18429Z" fill="#4285F4" />
-                  <path d="M8.65974 16.0006C10.8174 16.0006 12.637 15.2922 13.9627 14.0693L11.3847 12.0704C10.6675 12.5584 9.7415 12.8347 8.66268 12.8347C6.5756 12.8347 4.80598 11.4266 4.17104 9.53357H1.51074V11.5942C2.86882 14.2956 5.63494 16.0006 8.65974 16.0006Z" fill="#34A853" />
-                  <path d="M4.16852 9.53356C3.83341 8.53999 3.83341 7.46411 4.16852 6.47054V4.40991H1.51116C0.376489 6.67043 0.376489 9.33367 1.51116 11.5942L4.16852 9.53356Z" fill="#FBBC04" />
-                  <path d="M8.65974 3.16644C9.80029 3.1488 10.9026 3.57798 11.7286 4.36578L14.0127 2.08174C12.5664 0.72367 10.6469 -0.0229773 8.65974 0.000539111C5.63494 0.000539111 2.86882 1.70548 1.51074 4.40987L4.1681 6.4705C4.8001 4.57449 6.57266 3.16644 8.65974 3.16644Z" fill="#EA4335" />
-                </g>
-                <defs>
-                  <clipPath id="clip0_1156_824">
-                    <rect width="16" height="16" fill="white" transform="translate(0.5)" />
-                  </clipPath>
-                </defs>
-              </svg>
-              <span>Sign in With Google</span>
-            </Button>
-            <Button size="lg" color="white" className="flex items-center gap-2 justify-center shadow-md" fullWidth>
-              <img src="/img/twitter-logo.svg" height={24} width={24} alt="" />
-              <span>Sign in With Twitter</span>
+              <Input
+                  size="lg"
+                  placeholder="Kullanıcı Adı"
+                  className="!border-t-blue-gray-200 focus:!border-t-gray-900"
+                  labelProps={{ className: "before:content-none after:content-none" }}
+                  value={username}
+                  onChange={(e) => setUsername(e.target.value)}
+              />
+            </div>
+            <div>
+              <Typography variant="small" color="blue-gray" className="mb-2 font-medium">
+                Şifre
+              </Typography>
+              <Input
+                  type="password"
+                  size="lg"
+                  placeholder="********"
+                  className="!border-t-blue-gray-200 focus:!border-t-gray-900"
+                  labelProps={{ className: "before:content-none after:content-none" }}
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+              />
+            </div>
+            <Button className="mt-4" fullWidth onClick={handleSignIn}>
+              Giriş Yap
             </Button>
           </div>
-          <Typography variant="paragraph" className="text-center text-blue-gray-500 font-medium mt-4">
-            Not registered?
-            <Link to="/auth/sign-up" className="text-gray-900 ml-1">Create account</Link>
-          </Typography>
-        </form>
-
-      </div>
-      <div className="w-2/5 h-full hidden lg:block">
-        <img
-          src="/img/pattern.png"
-          className="h-full w-full object-cover rounded-3xl"
-        />
-      </div>
-
-    </section>
+        </Card>
+      </section>
   );
 }
 
-export default SignIn;
+export default SignIn;
\ No newline at end of file
diff --git a/src/pages/dashboard/home.jsx b/src/pages/dashboard/home.jsx
index 2c700669..5cc98917 100644
--- a/src/pages/dashboard/home.jsx
+++ b/src/pages/dashboard/home.jsx
@@ -1,258 +1,21 @@
 import React from "react";
-import {
-  Typography,
-  Card,
-  CardHeader,
-  CardBody,
-  IconButton,
-  Menu,
-  MenuHandler,
-  MenuList,
-  MenuItem,
-  Avatar,
-  Tooltip,
-  Progress,
-} from "@material-tailwind/react";
-import {
-  EllipsisVerticalIcon,
-  ArrowUpIcon,
-} from "@heroicons/react/24/outline";
-import { StatisticsCard } from "@/widgets/cards";
-import { StatisticsChart } from "@/widgets/charts";
-import {
-  statisticsCardsData,
-  statisticsChartsData,
-  projectsTableData,
-  ordersOverviewData,
-} from "@/data";
-import { CheckCircleIcon, ClockIcon } from "@heroicons/react/24/solid";
+
+
 
 export function Home() {
-  return (
-    <div className="mt-12">
-      <div className="mb-12 grid gap-y-10 gap-x-6 md:grid-cols-2 xl:grid-cols-4">
-        {statisticsCardsData.map(({ icon, title, footer, ...rest }) => (
-          <StatisticsCard
-            key={title}
-            {...rest}
-            title={title}
-            icon={React.createElement(icon, {
-              className: "w-6 h-6 text-white",
-            })}
-            footer={
-              <Typography className="font-normal text-blue-gray-600">
-                <strong className={footer.color}>{footer.value}</strong>
-                &nbsp;{footer.label}
-              </Typography>
-            }
-          />
-        ))}
-      </div>
-      <div className="mb-6 grid grid-cols-1 gap-y-12 gap-x-6 md:grid-cols-2 xl:grid-cols-3">
-        {statisticsChartsData.map((props) => (
-          <StatisticsChart
-            key={props.title}
-            {...props}
-            footer={
-              <Typography
-                variant="small"
-                className="flex items-center font-normal text-blue-gray-600"
-              >
-                <ClockIcon strokeWidth={2} className="h-4 w-4 text-blue-gray-400" />
-                &nbsp;{props.footer}
-              </Typography>
-            }
-          />
-        ))}
-      </div>
-      <div className="mb-4 grid grid-cols-1 gap-6 xl:grid-cols-3">
-        <Card className="overflow-hidden xl:col-span-2 border border-blue-gray-100 shadow-sm">
-          <CardHeader
-            floated={false}
-            shadow={false}
-            color="transparent"
-            className="m-0 flex items-center justify-between p-6"
-          >
-            <div>
-              <Typography variant="h6" color="blue-gray" className="mb-1">
-                Projects
-              </Typography>
-              <Typography
-                variant="small"
-                className="flex items-center gap-1 font-normal text-blue-gray-600"
-              >
-                <CheckCircleIcon strokeWidth={3} className="h-4 w-4 text-blue-gray-200" />
-                <strong>30 done</strong> this month
-              </Typography>
-            </div>
-            <Menu placement="left-start">
-              <MenuHandler>
-                <IconButton size="sm" variant="text" color="blue-gray">
-                  <EllipsisVerticalIcon
-                    strokeWidth={3}
-                    fill="currenColor"
-                    className="h-6 w-6"
-                  />
-                </IconButton>
-              </MenuHandler>
-              <MenuList>
-                <MenuItem>Action</MenuItem>
-                <MenuItem>Another Action</MenuItem>
-                <MenuItem>Something else here</MenuItem>
-              </MenuList>
-            </Menu>
-          </CardHeader>
-          <CardBody className="overflow-x-scroll px-0 pt-0 pb-2">
-            <table className="w-full min-w-[640px] table-auto">
-              <thead>
-                <tr>
-                  {["companies", "members", "budget", "completion"].map(
-                    (el) => (
-                      <th
-                        key={el}
-                        className="border-b border-blue-gray-50 py-3 px-6 text-left"
-                      >
-                        <Typography
-                          variant="small"
-                          className="text-[11px] font-medium uppercase text-blue-gray-400"
-                        >
-                          {el}
-                        </Typography>
-                      </th>
-                    )
-                  )}
-                </tr>
-              </thead>
-              <tbody>
-                {projectsTableData.map(
-                  ({ img, name, members, budget, completion }, key) => {
-                    const className = `py-3 px-5 ${
-                      key === projectsTableData.length - 1
-                        ? ""
-                        : "border-b border-blue-gray-50"
-                    }`;
 
-                    return (
-                      <tr key={name}>
-                        <td className={className}>
-                          <div className="flex items-center gap-4">
-                            <Avatar src={img} alt={name} size="sm" />
-                            <Typography
-                              variant="small"
-                              color="blue-gray"
-                              className="font-bold"
-                            >
-                              {name}
-                            </Typography>
-                          </div>
-                        </td>
-                        <td className={className}>
-                          {members.map(({ img, name }, key) => (
-                            <Tooltip key={name} content={name}>
-                              <Avatar
-                                src={img}
-                                alt={name}
-                                size="xs"
-                                variant="circular"
-                                className={`cursor-pointer border-2 border-white ${
-                                  key === 0 ? "" : "-ml-2.5"
-                                }`}
-                              />
-                            </Tooltip>
-                          ))}
-                        </td>
-                        <td className={className}>
-                          <Typography
-                            variant="small"
-                            className="text-xs font-medium text-blue-gray-600"
-                          >
-                            {budget}
-                          </Typography>
-                        </td>
-                        <td className={className}>
-                          <div className="w-10/12">
-                            <Typography
-                              variant="small"
-                              className="mb-1 block text-xs font-medium text-blue-gray-600"
-                            >
-                              {completion}%
-                            </Typography>
-                            <Progress
-                              value={completion}
-                              variant="gradient"
-                              color={completion === 100 ? "green" : "blue"}
-                              className="h-1"
-                            />
-                          </div>
-                        </td>
-                      </tr>
-                    );
-                  }
-                )}
-              </tbody>
-            </table>
-          </CardBody>
-        </Card>
-        <Card className="border border-blue-gray-100 shadow-sm">
-          <CardHeader
-            floated={false}
-            shadow={false}
-            color="transparent"
-            className="m-0 p-6"
-          >
-            <Typography variant="h6" color="blue-gray" className="mb-2">
-              Orders Overview
-            </Typography>
-            <Typography
-              variant="small"
-              className="flex items-center gap-1 font-normal text-blue-gray-600"
-            >
-              <ArrowUpIcon
-                strokeWidth={3}
-                className="h-3.5 w-3.5 text-green-500"
-              />
-              <strong>24%</strong> this month
-            </Typography>
-          </CardHeader>
-          <CardBody className="pt-0">
-            {ordersOverviewData.map(
-              ({ icon, color, title, description }, key) => (
-                <div key={title} className="flex items-start gap-4 py-3">
-                  <div
-                    className={`relative p-1 after:absolute after:-bottom-6 after:left-2/4 after:w-0.5 after:-translate-x-2/4 after:bg-blue-gray-50 after:content-[''] ${
-                      key === ordersOverviewData.length - 1
-                        ? "after:h-0"
-                        : "after:h-4/6"
-                    }`}
-                  >
-                    {React.createElement(icon, {
-                      className: `!w-5 !h-5 ${color}`,
-                    })}
-                  </div>
-                  <div>
-                    <Typography
-                      variant="small"
-                      color="blue-gray"
-                      className="block font-medium"
-                    >
-                      {title}
-                    </Typography>
-                    <Typography
-                      as="span"
-                      variant="small"
-                      className="text-xs font-medium text-blue-gray-500"
-                    >
-                      {description}
-                    </Typography>
-                  </div>
-                </div>
-              )
-            )}
-          </CardBody>
-        </Card>
-      </div>
-    </div>
-  );
+  return (
+
+    <div className="mt-12">
+
+      {/* Boş bırakıldı */}
+
+    </div>
+
+  );
+
 }
 
-export default Home;
+
+
+export default Home;
\ No newline at end of file
diff --git a/src/pages/dashboard/index.js b/src/pages/dashboard/index.js
index 7651895e..400948f0 100644
--- a/src/pages/dashboard/index.js
+++ b/src/pages/dashboard/index.js
@@ -2,3 +2,7 @@ export * from "@/pages/dashboard/home";
 export * from "@/pages/dashboard/profile";
 export * from "@/pages/dashboard/tables";
 export * from "@/pages/dashboard/notifications";
+
+
+
+
diff --git a/src/pages/dashboard/notifications.jsx b/src/pages/dashboard/notifications.jsx
index f4be88b0..50e1f755 100644
--- a/src/pages/dashboard/notifications.jsx
+++ b/src/pages/dashboard/notifications.jsx
@@ -1,88 +1,151 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import {
   Typography,
-  Alert,
   Card,
   CardHeader,
   CardBody,
+  Button,
 } from "@material-tailwind/react";
-import { InformationCircleIcon } from "@heroicons/react/24/outline";
+import apiClient from "../../api/axiosConfig.js";
+import { AddRouteModal } from "@/widgets/layout/AddRouteModal";
+import { EditRouteModal } from "@/widgets/layout/EditRouteModal"; // 1. Edit modal'ı import et
 
 export function Notifications() {
-  const [showAlerts, setShowAlerts] = React.useState({
-    blue: true,
-    green: true,
-    orange: true,
-    red: true,
-  });
-  const [showAlertsWithIcon, setShowAlertsWithIcon] = React.useState({
-    blue: true,
-    green: true,
-    orange: true,
-    red: true,
-  });
-  const alerts = ["gray", "green", "orange", "red"];
+  const [routes, setRoutes] = useState([]);
+
+  // "Ekle" modalı için state'ler
+  const [addModalOpen, setAddModalOpen] = useState(false);
+  const handleOpenAddModal = () => setAddModalOpen(!addModalOpen);
+
+  // 2. "Düzenle" modalı için yeni state'ler
+  const [editModalOpen, setEditModalOpen] = useState(false);
+  const [currentRoute, setCurrentRoute] = useState(null); // Düzenlenecek güzergahı tutar
+
+  // Düzenleme modal'ını açan fonksiyon
+  const handleOpenEditModal = (route) => {
+    setCurrentRoute(route);
+    setEditModalOpen(true);
+  };
+
+  // Düzenleme modal'ını kapatan fonksiyon
+  const handleCloseEditModal = () => {
+    setEditModalOpen(false);
+    setCurrentRoute(null);
+  };
+
+  // Güzergah listesini API'den çeken ana fonksiyon
+  const fetchRoutes = async () => {
+    try {
+      const response = await apiClient.get("/admin/routes");
+      setRoutes(response.data);
+    } catch (error) {
+      console.error("Güzergahları çekerken hata oluştu:", error);
+    }
+  };
+
+  useEffect(() => {
+    fetchRoutes();
+  }, []);
+
+  // Ekleme, silme veya güncelleme sonrası listeyi yeniden çekmek için
+  const handleDataChange = () => {
+    fetchRoutes();
+  };
+
+  const handleDelete = async (routeId) => {
+    if (window.confirm("Bu güzergahı silmek istediğinizden emin misiniz?")) {
+      try {
+        await apiClient.delete(`/admin/routes/${routeId}`);
+        handleDataChange(); // Silme sonrası listeyi yenile
+      } catch (error) {
+        console.error("Güzergah silinirken hata oluştu:", error);
+      }
+    }
+  };
 
   return (
-    <div className="mx-auto my-20 flex max-w-screen-lg flex-col gap-8">
-      <Card>
-        <CardHeader
-          color="transparent"
-          floated={false}
-          shadow={false}
-          className="m-0 p-4"
-        >
-          <Typography variant="h5" color="blue-gray">
-            Alerts
-          </Typography>
-        </CardHeader>
-        <CardBody className="flex flex-col gap-4 p-4">
-          {alerts.map((color) => (
-            <Alert
-              key={color}
-              open={showAlerts[color]}
-              color={color}
-              onClose={() => setShowAlerts((current) => ({ ...current, [color]: false }))}
-            >
-              A simple {color} alert with an <a href="#">example link</a>. Give
-              it a click if you like.
-            </Alert>
-          ))}
-        </CardBody>
-      </Card>
-      <Card>
-        <CardHeader
-          color="transparent"
-          floated={false}
-          shadow={false}
-          className="m-0 p-4"
-        >
-          <Typography variant="h5" color="blue-gray">
-            Alerts with Icon
-          </Typography>
-        </CardHeader>
-        <CardBody className="flex flex-col gap-4 p-4">
-          {alerts.map((color) => (
-            <Alert
-              key={color}
-              open={showAlertsWithIcon[color]}
-              color={color}
-              icon={
-                <InformationCircleIcon strokeWidth={2} className="h-6 w-6" />
-              }
-              onClose={() => setShowAlertsWithIcon((current) => ({
-                ...current,
-                [color]: false,
-              }))}
+      <>
+        <AddRouteModal
+            open={addModalOpen}
+            handleOpen={handleOpenAddModal}
+            onRouteAdded={handleDataChange}
+        />
+
+        {/* 3. Yeni düzenleme modalını sayfaya ekle */}
+        <EditRouteModal
+            open={editModalOpen}
+            handleOpen={handleCloseEditModal}
+            routeToEdit={currentRoute}
+            onRouteUpdated={handleDataChange}
+        />
+
+        <div className="mx-auto my-20 flex max-w-screen-lg flex-col gap-8">
+          <Card>
+            <CardHeader
+                variant="gradient"
+                color="gray"
+                className="mb-4 p-6 flex justify-between items-center"
             >
-              A simple {color} alert with an <a href="#">example link</a>. Give
-              it a click if you like.
-            </Alert>
-          ))}
-        </CardBody>
-      </Card>
-    </div>
+              <Typography variant="h6" color="white">
+                Güzergahlar
+              </Typography>
+              <Button
+                  size="sm"
+                  className="bg-green-700 text-white hover:bg-green-800"
+                  onClick={handleOpenAddModal}
+              >
+                Güzergah Ekle
+              </Button>
+            </CardHeader>
+            <CardBody className="overflow-x-scroll px-0 pt-0 pb-2">
+              <table className="w-full min-w-[400px] table-auto">
+                <thead>
+                <tr>
+                  {["Güzergah", "İşlem"].map((el) => (
+                      <th key={el} className={`border-b border-blue-gray-50 py-3 px-5 text-left ${el === "İşlem" ? "text-right" : ""}`}>
+                        <Typography variant="small" className="text-[11px] font-bold uppercase text-blue-gray-400">
+                          {el}
+                        </Typography>
+                      </th>
+                  ))}
+                </tr>
+                </thead>
+                <tbody>
+                {routes.map((route) => (
+                    <tr key={route.id}>
+                      <td className="py-3 px-5 border-b border-blue-gray-50">
+                        <Typography variant="small" color="blue-gray" className="font-semibold">
+                          {route.routeName}
+                        </Typography>
+                      </td>
+                      <td className="py-3 px-5 border-b border-blue-gray-50 text-right space-x-1">
+                        {/* 4. Düzenle butonunun onClick olayını güncelle */}
+                        <Button
+                            size="sm"
+                            variant="text"
+                            color="blue"
+                            onClick={() => handleOpenEditModal(route)}
+                        >
+                          Düzenle
+                        </Button>
+                        <Button
+                            size="sm"
+                            variant="text"
+                            color="red"
+                            onClick={() => handleDelete(route.id)}
+                        >
+                          Sil
+                        </Button>
+                      </td>
+                    </tr>
+                ))}
+                </tbody>
+              </table>
+            </CardBody>
+          </Card>
+        </div>
+      </>
   );
 }
 
-export default Notifications;
+export default Notifications;
\ No newline at end of file
diff --git a/src/pages/dashboard/profile.jsx b/src/pages/dashboard/profile.jsx
index 0d9f0115..bc40433a 100644
--- a/src/pages/dashboard/profile.jsx
+++ b/src/pages/dashboard/profile.jsx
@@ -1,221 +1,122 @@
-import {
-  Card,
-  CardBody,
-  CardHeader,
-  CardFooter,
-  Avatar,
-  Typography,
-  Tabs,
-  TabsHeader,
-  Tab,
-  Switch,
-  Tooltip,
-  Button,
-} from "@material-tailwind/react";
-import {
-  HomeIcon,
-  ChatBubbleLeftEllipsisIcon,
-  Cog6ToothIcon,
-  PencilIcon,
-} from "@heroicons/react/24/solid";
-import { Link } from "react-router-dom";
-import { ProfileInfoCard, MessageCard } from "@/widgets/cards";
-import { platformSettingsData, conversationsData, projectsData } from "@/data";
+import React, { useState, useEffect } from "react";
+import { Card, CardHeader, CardBody, Typography, Button } from "@material-tailwind/react";
+import apiClient from "../../api/axiosConfig.js";
+import { AddUserModal } from "@/widgets/layout/AddUserModal";
+import { EditUserModal } from "@/widgets/layout/EditUserModal";
 
 export function Profile() {
+  const [users, setUsers] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  // Ekleme ve Düzenleme Modalları için state'ler
+  const [openAddModal, setOpenAddModal] = useState(false);
+  const [openEditModal, setOpenEditModal] = useState(false);
+  const [currentUser, setCurrentUser] = useState(null);
+
+  const handleOpenAddModal = () => setOpenAddModal(true);
+  const handleCloseAddModal = () => setOpenAddModal(false);
+
+  // Düzenleme modalını açan fonksiyon
+  const handleOpenEditModal = (user) => {
+    setCurrentUser(user);
+    setOpenEditModal(true);
+  };
+  // Düzenleme modalını kapatan fonksiyon
+  const handleCloseEditModal = () => {
+    setCurrentUser(null);
+    setOpenEditModal(false);
+  };
+
+  const fetchUsers = async () => {
+    try {
+      setLoading(true);
+      const response = await apiClient.get("/Users");
+      setUsers(response.data);
+      setError(null);
+    } catch (err) {
+      setError("Kullanıcı verileri yüklenirken bir hata oluştu.");
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchUsers();
+  }, []);
+
+  // Ekleme, silme veya güncelleme sonrası listeyi yeniden çek
+  const handleDataChange = () => {
+    fetchUsers();
+  };
+
+  const handleDeleteUser = async (userId, userName) => {
+    if (window.confirm(`'${userName}' adlı kullanıcıyı silmek istediğinizden emin misiniz?`)) {
+      try {
+        await apiClient.delete(`/Users/${userId}`);
+        handleDataChange(); // Silme sonrası listeyi yenile
+      } catch (err) {
+        alert("Kullanıcı silinirken bir hata oluştu.");
+        console.error(err);
+      }
+    }
+  };
+
+  if (loading) return <div className="mt-12 text-center"><Typography>Kullanıcılar Yükleniyor...</Typography></div>;
+  if (error) return <div className="mt-12 text-center"><Typography color="red">{error}</Typography></div>;
+
   return (
-    <>
-      <div className="relative mt-8 h-72 w-full overflow-hidden rounded-xl bg-[url('/img/background-image.png')] bg-cover	bg-center">
-        <div className="absolute inset-0 h-full w-full bg-gray-900/75" />
-      </div>
-      <Card className="mx-3 -mt-16 mb-6 lg:mx-4 border border-blue-gray-100">
-        <CardBody className="p-4">
-          <div className="mb-10 flex items-center justify-between flex-wrap gap-6">
-            <div className="flex items-center gap-6">
-              <Avatar
-                src="/img/bruce-mars.jpeg"
-                alt="bruce-mars"
-                size="xl"
-                variant="rounded"
-                className="rounded-lg shadow-lg shadow-blue-gray-500/40"
-              />
-              <div>
-                <Typography variant="h5" color="blue-gray" className="mb-1">
-                  Richard Davis
-                </Typography>
-                <Typography
-                  variant="small"
-                  className="font-normal text-blue-gray-600"
-                >
-                  CEO / Co-Founder
-                </Typography>
-              </div>
-            </div>
-            <div className="w-96">
-              <Tabs value="app">
-                <TabsHeader>
-                  <Tab value="app">
-                    <HomeIcon className="-mt-1 mr-2 inline-block h-5 w-5" />
-                    App
-                  </Tab>
-                  <Tab value="message">
-                    <ChatBubbleLeftEllipsisIcon className="-mt-0.5 mr-2 inline-block h-5 w-5" />
-                    Message
-                  </Tab>
-                  <Tab value="settings">
-                    <Cog6ToothIcon className="-mt-1 mr-2 inline-block h-5 w-5" />
-                    Settings
-                  </Tab>
-                </TabsHeader>
-              </Tabs>
-            </div>
-          </div>
-          <div className="gird-cols-1 mb-12 grid gap-12 px-4 lg:grid-cols-2 xl:grid-cols-3">
-            <div>
-              <Typography variant="h6" color="blue-gray" className="mb-3">
-                Platform Settings
-              </Typography>
-              <div className="flex flex-col gap-12">
-                {platformSettingsData.map(({ title, options }) => (
-                  <div key={title}>
-                    <Typography className="mb-4 block text-xs font-semibold uppercase text-blue-gray-500">
-                      {title}
-                    </Typography>
-                    <div className="flex flex-col gap-6">
-                      {options.map(({ checked, label }) => (
-                        <Switch
-                          key={label}
-                          id={label}
-                          label={label}
-                          defaultChecked={checked}
-                          labelProps={{
-                            className: "text-sm font-normal text-blue-gray-500",
-                          }}
-                        />
-                      ))}
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </div>
-            <ProfileInfoCard
-              title="Profile Information"
-              description="Hi, I'm Alec Thompson, Decisions: If you can't decide, the answer is no. If two equally difficult paths, choose the one more painful in the short term (pain avoidance is creating an illusion of equality)."
-              details={{
-                "first name": "Alec M. Thompson",
-                mobile: "(44) 123 1234 123",
-                email: "alecthompson@mail.com",
-                location: "USA",
-                social: (
-                  <div className="flex items-center gap-4">
-                    <i className="fa-brands fa-facebook text-blue-700" />
-                    <i className="fa-brands fa-twitter text-blue-400" />
-                    <i className="fa-brands fa-instagram text-purple-500" />
-                  </div>
-                ),
-              }}
-              action={
-                <Tooltip content="Edit Profile">
-                  <PencilIcon className="h-4 w-4 cursor-pointer text-blue-gray-500" />
-                </Tooltip>
-              }
-            />
-            <div>
-              <Typography variant="h6" color="blue-gray" className="mb-3">
-                Platform Settings
-              </Typography>
-              <ul className="flex flex-col gap-6">
-                {conversationsData.map((props) => (
-                  <MessageCard
-                    key={props.name}
-                    {...props}
-                    action={
-                      <Button variant="text" size="sm">
-                        reply
-                      </Button>
-                    }
-                  />
+      <>
+        <AddUserModal open={openAddModal} handleOpen={handleCloseAddModal} onUserAdded={handleDataChange} />
+        <EditUserModal open={openEditModal} handleOpen={handleCloseEditModal} userToEdit={currentUser} onUserUpdated={handleDataChange} />
+
+        <div className="mt-12 mb-8 flex flex-col gap-12">
+          <Card>
+            <CardHeader variant="gradient" color="gray" className="mb-4 p-6 flex justify-between items-center">
+              <Typography variant="h6" color="white">Kullanıcılar</Typography>
+              <Button size="sm" className="bg-green-700 text-white hover:bg-green-800" onClick={handleOpenAddModal}>
+                Kullanıcı Ekle
+              </Button>
+            </CardHeader>
+            <CardBody className="overflow-x-scroll px-0 pt-0 pb-2">
+              <table className="w-full min-w-[640px] table-auto">
+                <thead>
+                <tr>
+                  {["Tam Ad", "Plaka", "Telefon", "İşlem"].map((el) => (
+                      <th key={el} className={`border-b border-blue-gray-50 py-3 px-5 text-left ${el === "İşlem" ? "text-right" : ""}`}>
+                        <Typography variant="small" className="font-bold uppercase text-blue-gray-400">{el}</Typography>
+                      </th>
+                  ))}
+                </tr>
+                </thead>
+                <tbody>
+                {users.map((user) => (
+                    <tr key={user.id}>
+                      <td className="py-3 px-5 border-b border-blue-gray-50">
+                        <Typography className="text-sm font-semibold text-blue-gray-600">{user.fullName}</Typography>
+                      </td>
+                      <td className="py-3 px-5 border-b border-blue-gray-50">
+                        <Typography className="text-xs font-normal text-blue-gray-500">{user.licensePlate}</Typography>
+                      </td>
+                      <td className="py-3 px-5 border-b border-blue-gray-50">
+                        <Typography className="text-xs font-normal text-blue-gray-500">{user.phoneNumber}</Typography>
+                      </td>
+                      <td className="py-3 px-5 border-b border-blue-gray-50 text-right">
+                        {/* 3. Düzenle butonunun onClick olayı güncellendi */}
+                        <Button size="sm" variant="text" color="blue" onClick={() => handleOpenEditModal(user)}>Düzenle</Button>
+                        {/* 4. Buton boyutu `xs`'den `sm`'ye çevrildi */}
+                        <Button size="sm" variant="text" color="red" onClick={() => handleDeleteUser(user.id, user.fullName)}>Sil</Button>
+                      </td>
+                    </tr>
                 ))}
-              </ul>
-            </div>
-          </div>
-          <div className="px-4 pb-4">
-            <Typography variant="h6" color="blue-gray" className="mb-2">
-              Projects
-            </Typography>
-            <Typography
-              variant="small"
-              className="font-normal text-blue-gray-500"
-            >
-              Architects design houses
-            </Typography>
-            <div className="mt-6 grid grid-cols-1 gap-12 md:grid-cols-2 xl:grid-cols-4">
-              {projectsData.map(
-                ({ img, title, description, tag, route, members }) => (
-                  <Card key={title} color="transparent" shadow={false}>
-                    <CardHeader
-                      floated={false}
-                      color="gray"
-                      className="mx-0 mt-0 mb-4 h-64 xl:h-40"
-                    >
-                      <img
-                        src={img}
-                        alt={title}
-                        className="h-full w-full object-cover"
-                      />
-                    </CardHeader>
-                    <CardBody className="py-0 px-1">
-                      <Typography
-                        variant="small"
-                        className="font-normal text-blue-gray-500"
-                      >
-                        {tag}
-                      </Typography>
-                      <Typography
-                        variant="h5"
-                        color="blue-gray"
-                        className="mt-1 mb-2"
-                      >
-                        {title}
-                      </Typography>
-                      <Typography
-                        variant="small"
-                        className="font-normal text-blue-gray-500"
-                      >
-                        {description}
-                      </Typography>
-                    </CardBody>
-                    <CardFooter className="mt-6 flex items-center justify-between py-0 px-1">
-                      <Link to={route}>
-                        <Button variant="outlined" size="sm">
-                          view project
-                        </Button>
-                      </Link>
-                      <div>
-                        {members.map(({ img, name }, key) => (
-                          <Tooltip key={name} content={name}>
-                            <Avatar
-                              src={img}
-                              alt={name}
-                              size="xs"
-                              variant="circular"
-                              className={`cursor-pointer border-2 border-white ${
-                                key === 0 ? "" : "-ml-2.5"
-                              }`}
-                            />
-                          </Tooltip>
-                        ))}
-                      </div>
-                    </CardFooter>
-                  </Card>
-                )
-              )}
-            </div>
-          </div>
-        </CardBody>
-      </Card>
-    </>
+                </tbody>
+              </table>
+            </CardBody>
+          </Card>
+        </div>
+      </>
   );
 }
 
-export default Profile;
+export default Profile;
\ No newline at end of file
diff --git a/src/pages/dashboard/queuemanagementpage.jsx b/src/pages/dashboard/queuemanagementpage.jsx
new file mode 100644
index 00000000..a68e61ef
--- /dev/null
+++ b/src/pages/dashboard/queuemanagementpage.jsx
@@ -0,0 +1,187 @@
+import React, { useState, useEffect, useMemo } from "react";
+import {
+    Typography, Card, CardHeader, CardBody, Button, Select, Option, List, ListItem,
+} from "@material-tailwind/react";
+import apiClient from "../../api/axiosConfig.js";
+
+export function QueueManagementPage() {
+    // --- STATE TANIMLAMALARI ---
+    const [routes, setRoutes] = useState([]); // Tüm güzergahların listesi (sol panel)
+    const [allVehicles, setAllVehicles] = useState([]); // Tüm araçların listesi (dropdown için)
+    const [selectedRoute, setSelectedRoute] = useState(null); // Seçili olan güzergah
+    const [queuedVehicles, setQueuedVehicles] = useState([]); // Seçili güzergahın sırasındaki araçlar
+    const [vehicleToAdd, setVehicleToAdd] = useState(""); // Dropdown'dan seçilen araç ID'si
+    const [loadingQueue, setLoadingQueue] = useState(false); // Sıra yüklenirken gösterilecek spinner için
+
+    // --- VERİ ÇEKME İŞLEMLERİ ---
+
+    // 1. Bileşen ilk yüklendiğinde tüm güzergahları ve tüm araçları çek
+    useEffect(() => {
+        const fetchInitialData = async () => {
+            try {
+                const routesPromise = apiClient.get("/admin/routes");
+                const vehiclesPromise = apiClient.get("/admin/vehicles");
+
+                const [routesResponse, vehiclesResponse] = await Promise.all([routesPromise, vehiclesPromise]);
+
+                setRoutes(routesResponse.data);
+                setAllVehicles(vehiclesResponse.data);
+            } catch (error) {
+                console.error("Ana veriler çekilirken hata oluştu:", error);
+            }
+        };
+        fetchInitialData();
+    }, []);
+
+    // 2. Bir güzergah seçildiğinde, o güzergahın sırasını API'den çek
+    useEffect(() => {
+        if (selectedRoute) {
+            setLoadingQueue(true);
+            const fetchQueue = async () => {
+                try {
+                    const response = await apiClient.get(`/routes/${selectedRoute.id}/queue`);
+                    setQueuedVehicles(response.data);
+                } catch (error) {
+                    console.error(`Sıra çekilirken hata (Güzergah ID: ${selectedRoute.id}):`, error);
+                    setQueuedVehicles([]); // Hata durumunda listeyi boşalt
+                } finally {
+                    setLoadingQueue(false);
+                }
+            };
+            fetchQueue();
+        }
+    }, [selectedRoute]); // selectedRoute her değiştiğinde bu blok çalışır
+
+    // --- FONKSİYONLAR ---
+
+    const handleAddVehicleToQueue = async () => {
+        if (!vehicleToAdd || !selectedRoute) {
+            alert("Lütfen bir araç seçin.");
+            return;
+        }
+        try {
+            await apiClient.post(`/routes/${selectedRoute.id}/queue`, { vehicleId: vehicleToAdd });
+            // Başarılı ekleme sonrası sırayı anında güncelle (Refetch)
+            const response = await apiClient.get(`/routes/${selectedRoute.id}/queue`);
+            setQueuedVehicles(response.data);
+            setVehicleToAdd(""); // Dropdown'ı temizle
+        } catch (error) {
+            console.error("Sıraya araç eklenirken hata:", error);
+            alert(error.response?.data || "Araç sıraya eklenemedi.");
+        }
+    };
+
+    const handleRemoveVehicleFromQueue = async (vehicleId) => {
+        if (window.confirm("Bu aracı sıradan çıkarmak istediğinizden emin misiniz?")) {
+            try {
+                await apiClient.delete(`/routes/${selectedRoute.id}/queue/${vehicleId}`);
+                // Başarılı silme sonrası sırayı anında güncelle (Refetch)
+                const response = await apiClient.get(`/routes/${selectedRoute.id}/queue`);
+                setQueuedVehicles(response.data);
+            } catch (error) {
+                console.error("Araç sıradan çıkarılırken hata:", error);
+                alert("Araç sıradan çıkarılamadı.");
+            }
+        }
+    };
+
+    // KULLANICI DENEYİMİ İYİLEŞTİRMESİ: Mevcut sırada olan araçları, ekleme dropdown'ında gösterme.
+    const availableVehicles = useMemo(() => {
+        const queuedVehicleIds = new Set(queuedVehicles.map(v => v.id));
+        return allVehicles.filter(v => !queuedVehicleIds.has(v.id));
+    }, [allVehicles, queuedVehicles]);
+
+    return (
+        <div className="mt-12 mb-8">
+            <Card>
+                <CardHeader variant="gradient" color="gray" className="mb-8 p-6">
+                    <Typography variant="h6" color="white">
+                        Güzergah Sıra Yönetimi
+                    </Typography>
+                </CardHeader>
+                <CardBody className="p-6 flex flex-col lg:flex-row gap-8">
+                    {/* SOL PANEL: Güzergah Listesi */}
+                    <div className="lg:w-1/3">
+                        <Typography variant="h6" color="blue-gray" className="mb-4">Güzergah Seçin</Typography>
+                        <Card className="w-full border">
+                            <List>
+                                {routes.map(route => (
+                                    <ListItem
+                                        key={route.id}
+                                        onClick={() => setSelectedRoute(route)}
+                                        selected={selectedRoute?.id === route.id}
+                                    >
+                                        {route.routeName}
+                                    </ListItem>
+                                ))}
+                            </List>
+                        </Card>
+                    </div>
+
+                    {/* SAĞ PANEL: Sıra ve Ekleme Formu */}
+                    <div className="lg:w-2/3">
+                        {!selectedRoute ? (
+                            <div className="flex items-center justify-center h-full border-2 border-dashed rounded-lg">
+                                <Typography color="blue-gray">Lütfen bir güzergah seçin</Typography>
+                            </div>
+                        ) : (
+                            <div>
+                                {/* Sıradaki Araçlar Tablosu */}
+                                <Typography variant="h6" color="blue-gray" className="mb-4">
+                                    Sıradaki Araçlar: {selectedRoute.routeName}
+                                </Typography>
+                                <div className="overflow-x-auto border rounded-lg mb-8">
+                                    <table className="w-full min-w-[500px] table-auto">
+                                        <thead>
+                                        <tr>
+                                            {["Sıra", "Plaka", "Şoför", "İşlem"].map(el => (
+                                                <th key={el} className="border-b border-blue-gray-50 py-3 px-5 text-left">
+                                                    <Typography variant="small" className="font-bold uppercase text-blue-gray-400">{el}</Typography>
+                                                </th>
+                                            ))}
+                                        </tr>
+                                        </thead>
+                                        <tbody>
+                                        {loadingQueue ? (
+                                            <tr><td colSpan="4" className="text-center p-4">Yükleniyor...</td></tr>
+                                        ) : (
+                                            queuedVehicles.map((vehicle, index) => (
+                                                <tr key={vehicle.id}>
+                                                    <td className="py-3 px-5 border-b"><Typography className="font-semibold">#{index + 1}</Typography></td>
+                                                    <td className="py-3 px-5 border-b">{vehicle.licensePlate}</td>
+                                                    <td className="py-3 px-5 border-b">{vehicle.userFullName}</td>
+                                                    <td className="py-3 px-5 border-b">
+                                                        <Button color="red" size="sm" variant="text" onClick={() => handleRemoveVehicleFromQueue(vehicle.id)}>
+                                                            Çıkar
+                                                        </Button>
+                                                    </td>
+                                                </tr>
+                                            ))
+                                        )}
+                                        </tbody>
+                                    </table>
+                                </div>
+
+                                {/* Sıraya Araç Ekleme Formu */}
+                                <div className="flex items-end gap-4">
+                                    <div className="flex-grow">
+                                        <Select label="Sıraya Eklenecek Aracı Seçin" value={vehicleToAdd} onChange={(val) => setVehicleToAdd(val)}>
+                                            {availableVehicles.map(vehicle => (
+                                                <Option key={vehicle.id} value={String(vehicle.id)}>
+                                                    {vehicle.licensePlate} ({vehicle.userFullName})
+                                                </Option>
+                                            ))}
+                                        </Select>
+                                    </div>
+                                    <Button onClick={handleAddVehicleToQueue}>Sıraya Ekle</Button>
+                                </div>
+                            </div>
+                        )}
+                    </div>
+                </CardBody>
+            </Card>
+        </div>
+    );
+}
+
+export default QueueManagementPage;
\ No newline at end of file
diff --git a/src/pages/dashboard/tables.jsx b/src/pages/dashboard/tables.jsx
index 3d453ed7..0b583910 100644
--- a/src/pages/dashboard/tables.jsx
+++ b/src/pages/dashboard/tables.jsx
@@ -1,221 +1,129 @@
-import {
-  Card,
-  CardHeader,
-  CardBody,
-  Typography,
-  Avatar,
-  Chip,
-  Tooltip,
-  Progress,
-} from "@material-tailwind/react";
-import { EllipsisVerticalIcon } from "@heroicons/react/24/outline";
-import { authorsTableData, projectsTableData } from "@/data";
+import React, { useState, useEffect } from "react";
+import { Card, CardHeader, CardBody, Typography, Button } from "@material-tailwind/react";
+import apiClient from "../../api/axiosConfig.js";
+import { AddVehicleModal } from "@/widgets/layout/AddVehicleModal";
+import { EditVehicleModal } from "@/widgets/layout/EditVehicleModal";
 
 export function Tables() {
+  const [vehicles, setVehicles] = useState([]);
+
+  // "Ekle" modalı için state'ler
+  const [addModalOpen, setAddModalOpen] = useState(false);
+  const handleOpenAddModal = () => setAddModalOpen(!addModalOpen);
+
+  // "Düzenle" modalı için state'ler
+  const [editModalOpen, setEditModalOpen] = useState(false);
+  const [currentVehicle, setCurrentVehicle] = useState(null); // Düzenlenecek aracı tutar
+
+  // Düzenleme modal'ını açan fonksiyon
+  const handleOpenEditModal = (vehicle) => {
+    setCurrentVehicle(vehicle); // Hangi aracın düzenleneceğini state'e ata
+    setEditModalOpen(true);   // Modal'ı aç
+  };
+
+  // Düzenleme modal'ını kapatan fonksiyon
+  const handleCloseEditModal = () => {
+    setEditModalOpen(false);
+    setCurrentVehicle(null); // Modal kapanınca seçili aracı temizle
+  }
+
+  // Araç listesini API'den çeken ana fonksiyon
+  const fetchVehicles = async () => {
+    try {
+      const response = await apiClient.get("/admin/vehicles");
+      setVehicles(response.data);
+    } catch (error) {
+      console.error("Araçlar çekilirken bir hata oluştu:", error);
+    }
+  };
+
+  // Bileşen ilk yüklendiğinde araçları çek
+  useEffect(() => {
+    fetchVehicles();
+  }, []);
+
+  // Ekleme, silme veya güncelleme sonrası listeyi yeniden çekmek için
+  const handleDataChange = () => {
+    fetchVehicles();
+  };
+
+  // Araç silme fonksiyonu
+  const handleDelete = async (id) => {
+    if (window.confirm("Bu aracı silmek istediğinizden emin misiniz?")) {
+      try {
+        await apiClient.delete(`/admin/vehicles/${id}`);
+        handleDataChange(); // Silme sonrası listeyi yenile
+      } catch (error) {
+        alert("Araç silinirken bir sorun oluştu.");
+        console.error("Araç silinirken hata:", error);
+      }
+    }
+  };
+
   return (
-    <div className="mt-12 mb-8 flex flex-col gap-12">
-      <Card>
-        <CardHeader variant="gradient" color="gray" className="mb-8 p-6">
-          <Typography variant="h6" color="white">
-            Authors Table
-          </Typography>
-        </CardHeader>
-        <CardBody className="overflow-x-scroll px-0 pt-0 pb-2">
-          <table className="w-full min-w-[640px] table-auto">
-            <thead>
-              <tr>
-                {["author", "function", "status", "employed", ""].map((el) => (
-                  <th
-                    key={el}
-                    className="border-b border-blue-gray-50 py-3 px-5 text-left"
-                  >
-                    <Typography
-                      variant="small"
-                      className="text-[11px] font-bold uppercase text-blue-gray-400"
-                    >
-                      {el}
-                    </Typography>
-                  </th>
-                ))}
-              </tr>
-            </thead>
-            <tbody>
-              {authorsTableData.map(
-                ({ img, name, email, job, online, date }, key) => {
-                  const className = `py-3 px-5 ${
-                    key === authorsTableData.length - 1
-                      ? ""
-                      : "border-b border-blue-gray-50"
-                  }`;
+      <>
+        <AddVehicleModal
+            open={addModalOpen}
+            handleOpen={handleOpenAddModal}
+            onVehicleAdded={handleDataChange}
+        />
 
-                  return (
-                    <tr key={name}>
-                      <td className={className}>
-                        <div className="flex items-center gap-4">
-                          <Avatar src={img} alt={name} size="sm" variant="rounded" />
-                          <div>
-                            <Typography
-                              variant="small"
-                              color="blue-gray"
-                              className="font-semibold"
-                            >
-                              {name}
-                            </Typography>
-                            <Typography className="text-xs font-normal text-blue-gray-500">
-                              {email}
-                            </Typography>
-                          </div>
-                        </div>
-                      </td>
-                      <td className={className}>
-                        <Typography className="text-xs font-semibold text-blue-gray-600">
-                          {job[0]}
-                        </Typography>
-                        <Typography className="text-xs font-normal text-blue-gray-500">
-                          {job[1]}
-                        </Typography>
-                      </td>
-                      <td className={className}>
-                        <Chip
-                          variant="gradient"
-                          color={online ? "green" : "blue-gray"}
-                          value={online ? "online" : "offline"}
-                          className="py-0.5 px-2 text-[11px] font-medium w-fit"
-                        />
-                      </td>
-                      <td className={className}>
-                        <Typography className="text-xs font-semibold text-blue-gray-600">
-                          {date}
-                        </Typography>
-                      </td>
-                      <td className={className}>
-                        <Typography
-                          as="a"
-                          href="#"
-                          className="text-xs font-semibold text-blue-gray-600"
-                        >
-                          Edit
-                        </Typography>
-                      </td>
-                    </tr>
-                  );
-                }
-              )}
-            </tbody>
-          </table>
-        </CardBody>
-      </Card>
-      <Card>
-        <CardHeader variant="gradient" color="gray" className="mb-8 p-6">
-          <Typography variant="h6" color="white">
-            Projects Table
-          </Typography>
-        </CardHeader>
-        <CardBody className="overflow-x-scroll px-0 pt-0 pb-2">
-          <table className="w-full min-w-[640px] table-auto">
-            <thead>
-              <tr>
-                {["companies", "members", "budget", "completion", ""].map(
-                  (el) => (
-                    <th
-                      key={el}
-                      className="border-b border-blue-gray-50 py-3 px-5 text-left"
-                    >
-                      <Typography
-                        variant="small"
-                        className="text-[11px] font-bold uppercase text-blue-gray-400"
-                      >
-                        {el}
-                      </Typography>
-                    </th>
-                  )
-                )}
-              </tr>
-            </thead>
-            <tbody>
-              {projectsTableData.map(
-                ({ img, name, members, budget, completion }, key) => {
-                  const className = `py-3 px-5 ${
-                    key === projectsTableData.length - 1
-                      ? ""
-                      : "border-b border-blue-gray-50"
-                  }`;
+        <EditVehicleModal
+            open={editModalOpen}
+            handleOpen={handleCloseEditModal}
+            onVehicleUpdated={handleDataChange}
+            vehicleToEdit={currentVehicle}
+        />
 
+        <div className="mt-12 mb-8 flex flex-col gap-12">
+          <Card>
+            <CardHeader variant="gradient" color="gray" className="mb-4 p-6 flex justify-between items-center">
+              <Typography variant="h6" color="white">Araçlar</Typography>
+              <Button size="sm" className="bg-green-700 text-white" onClick={handleOpenAddModal}>Araç Ekle</Button>
+            </CardHeader>
+            <CardBody className="overflow-x-scroll px-0 pt-0 pb-2">
+              <table className="w-full min-w-[640px] table-auto">
+                <thead>
+                <tr>
+                  {["Plaka", "Şoför Adı", "Telefon", "İşlem"].map((el) => (
+                      <th key={el} className={`border-b border-blue-gray-50 py-3 px-5 text-left ${el === "İşlem" ? "text-right" : ""}`}>
+                        <Typography variant="small" className="font-bold uppercase text-blue-gray-400">{el}</Typography>
+                      </th>
+                  ))}
+                </tr>
+                </thead>
+                <tbody>
+                {vehicles.map((vehicle, key) => {
+                  const className = `py-3 px-5 ${key === vehicles.length - 1 ? "" : "border-b border-blue-gray-50"}`;
                   return (
-                    <tr key={name}>
-                      <td className={className}>
-                        <div className="flex items-center gap-4">
-                          <Avatar src={img} alt={name} size="sm" />
-                          <Typography
-                            variant="small"
-                            color="blue-gray"
-                            className="font-bold"
-                          >
-                            {name}
-                          </Typography>
-                        </div>
-                      </td>
-                      <td className={className}>
-                        {members.map(({ img, name }, key) => (
-                          <Tooltip key={name} content={name}>
-                            <Avatar
-                              src={img}
-                              alt={name}
-                              size="xs"
-                              variant="circular"
-                              className={`cursor-pointer border-2 border-white ${
-                                key === 0 ? "" : "-ml-2.5"
-                              }`}
-                            />
-                          </Tooltip>
-                        ))}
-                      </td>
-                      <td className={className}>
-                        <Typography
-                          variant="small"
-                          className="text-xs font-medium text-blue-gray-600"
-                        >
-                          {budget}
-                        </Typography>
-                      </td>
-                      <td className={className}>
-                        <div className="w-10/12">
-                          <Typography
-                            variant="small"
-                            className="mb-1 block text-xs font-medium text-blue-gray-600"
-                          >
-                            {completion}%
-                          </Typography>
-                          <Progress
-                            value={completion}
-                            variant="gradient"
-                            color={completion === 100 ? "green" : "gray"}
-                            className="h-1"
-                          />
-                        </div>
-                      </td>
-                      <td className={className}>
-                        <Typography
-                          as="a"
-                          href="#"
-                          className="text-xs font-semibold text-blue-gray-600"
-                        >
-                          <EllipsisVerticalIcon
-                            strokeWidth={2}
-                            className="h-5 w-5 text-inherit"
-                          />
-                        </Typography>
-                      </td>
-                    </tr>
+                      <tr key={vehicle.id}>
+                        <td className={className}>
+                          <Typography className="text-sm font-semibold text-blue-gray-600">{vehicle.licensePlate}</Typography>
+                        </td>
+                        <td className={className}>
+                          <Typography className="text-xs font-normal text-blue-gray-500">{vehicle.userFullName}</Typography>
+                        </td>
+                        <td className={className}>
+                          <Typography className="text-xs font-normal text-blue-gray-500">{vehicle.phoneNumber || "-"}</Typography>
+                        </td>
+                        <td className={`${className} text-right`}>
+                          <Button color="blue" size="sm" variant="text" onClick={() => handleOpenEditModal(vehicle)}>
+                            Düzenle
+                          </Button>
+                          <Button color="red" size="sm" variant="text" onClick={() => handleDelete(vehicle.id)}>
+                            Sil
+                          </Button>
+                        </td>
+                      </tr>
                   );
-                }
-              )}
-            </tbody>
-          </table>
-        </CardBody>
-      </Card>
-    </div>
+                })}
+                </tbody>
+              </table>
+            </CardBody>
+          </Card>
+        </div>
+      </>
   );
 }
 
-export default Tables;
+export default Tables;
\ No newline at end of file
diff --git a/src/routes.jsx b/src/routes.jsx
index 3a5a8da0..16f1eda9 100644
--- a/src/routes.jsx
+++ b/src/routes.jsx
@@ -5,9 +5,23 @@ import {
   InformationCircleIcon,
   ServerStackIcon,
   RectangleStackIcon,
+  TruckIcon,
+  MapIcon,
+  Squares2X2Icon,
+  QueueListIcon, // 1. YENİ: Sıra Yönetimi sayfası için gerekli ikonu import edelim
 } from "@heroicons/react/24/solid";
-import { Home, Profile, Tables, Notifications } from "@/pages/dashboard";
-import { SignIn, SignUp } from "@/pages/auth";
+
+// 1. YENİ: Yeni sayfa bileşenimizi de diğerlerinin yanına import edelim
+import {
+  Home,
+  Profile,
+  Tables,
+  Notifications,
+  QueueManagementPage
+} from "@/pages/dashboard";
+
+
+import { SignIn } from "@/pages/auth";
 
 const icon = {
   className: "w-5 h-5 text-inherit",
@@ -18,28 +32,40 @@ export const routes = [
     layout: "dashboard",
     pages: [
       {
-        icon: <HomeIcon {...icon} />,
-        name: "dashboard",
+        icon: <Squares2X2Icon {...icon} />,
+        name: "Araç Sıraları",
         path: "/home",
         element: <Home />,
       },
+      // 2. YENİ: "Sıra Yönetimi" sayfasını menüye ekleyelim
+      // Bu, feature branch'inden gelen ana özelliktir.
+      {
+        icon: <QueueListIcon {...icon} />,
+        name: "Sıra Yönetimi",
+        path: "/queue-management",
+        element: <QueueManagementPage />,
+        roles: ['admin'], // Sadece adminler görebilir
+      },
       {
         icon: <UserCircleIcon {...icon} />,
-        name: "profile",
+        name: "Kullanıcılar",
         path: "/profile",
         element: <Profile />,
+        roles: ['admin'],
       },
       {
-        icon: <TableCellsIcon {...icon} />,
-        name: "tables",
+        icon: <TruckIcon {...icon} />,
+        name: "Araçlar",
         path: "/tables",
         element: <Tables />,
+        roles: ['admin'],
       },
       {
-        icon: <InformationCircleIcon {...icon} />,
-        name: "notifications",
+        icon: <MapIcon {...icon} />,
+        name: "Güzergahlar",
         path: "/notifications",
         element: <Notifications />,
+        roles: ['admin'],
       },
     ],
   },
@@ -53,14 +79,8 @@ export const routes = [
         path: "/sign-in",
         element: <SignIn />,
       },
-      {
-        icon: <RectangleStackIcon {...icon} />,
-        name: "sign up",
-        path: "/sign-up",
-        element: <SignUp />,
-      },
     ],
   },
 ];
 
-export default routes;
+export default routes;
\ No newline at end of file
diff --git a/src/widgets/layout/AddRouteModal.jsx b/src/widgets/layout/AddRouteModal.jsx
new file mode 100644
index 00000000..18446dba
--- /dev/null
+++ b/src/widgets/layout/AddRouteModal.jsx
@@ -0,0 +1,68 @@
+import React, { useState } from "react";
+import {
+    Button,
+    Dialog,
+    DialogHeader,
+    DialogBody,
+    DialogFooter,
+    Input,
+    Typography,
+} from "@material-tailwind/react";
+import apiClient from "../../api/axiosConfig.js";
+
+export function AddRouteModal({ open, handleOpen, onRouteAdded }) {
+    const [routeName, setRouteName] = useState("");
+    const [error, setError] = useState("");
+
+    const clearForm = () => {
+        setRouteName("");
+        setError("");
+    };
+
+    const handleClose = () => {
+        clearForm();
+        handleOpen();
+    };
+
+    const handleSubmit = async () => {
+        if (!routeName.trim()) {
+            setError("Güzergah adı boş olamaz.");
+            return;
+        }
+
+        try {
+            // CreateRouteDto'ya uygun şekilde { "routeName": "değer" } gönderiyoruz
+            const response = await apiClient.post("/admin/routes", { routeName });
+            alert("Güzergah başarıyla eklendi!");
+            onRouteAdded(response.data); // Ana listeyi anında güncellemek için
+            handleClose(); // Formu temizle ve modal'ı kapat
+        } catch (err) {
+            console.error("Güzergah eklenirken hata:", err);
+            // Backend'den gelen "Bu rota adı zaten mevcut." gibi hataları göster
+            setError(err.response?.data || "Bir hata oluştu.");
+        }
+    };
+
+    return (
+        <Dialog open={open} handler={handleClose}>
+            <DialogHeader>Yeni Güzergah Ekle</DialogHeader>
+            <DialogBody divider>
+                {error && <Typography color="red" variant="small" className="mb-2">{error}</Typography>}
+                <Input
+                    label="Güzergah Adı *"
+                    value={routeName}
+                    onChange={(e) => setRouteName(e.target.value)}
+                    error={!!error} // Hata varsa input'u kırmızı yap
+                />
+            </DialogBody>
+            <DialogFooter>
+                <Button variant="text" color="red" onClick={handleClose} className="mr-1">
+                    <span>İptal</span>
+                </Button>
+                <Button variant="gradient" color="green" onClick={handleSubmit}>
+                    <span>Kaydet</span>
+                </Button>
+            </DialogFooter>
+        </Dialog>
+    );
+}
\ No newline at end of file
diff --git a/src/widgets/layout/AddUserModal.jsx b/src/widgets/layout/AddUserModal.jsx
new file mode 100644
index 00000000..46c9286e
--- /dev/null
+++ b/src/widgets/layout/AddUserModal.jsx
@@ -0,0 +1,81 @@
+import React, { useState } from "react";
+import {
+    Button,
+    Dialog,
+    DialogHeader,
+    DialogBody,
+    DialogFooter,
+    Input,
+    Typography,
+} from "@material-tailwind/react";
+import apiClient from "../../api/axiosConfig.js";
+
+export function AddUserModal({ open, handleOpen, onUserAdded }) {
+    const [formData, setFormData] = useState({
+        fullName: "",
+        userName: "",
+        password: "",
+        confirmPassword: "",
+    });
+    const [error, setError] = useState("");
+
+    const clearForm = () => {
+        setFormData({ fullName: "", userName: "", password: "", confirmPassword: "" });
+        setError("");
+    };
+
+    const handleClose = () => {
+        clearForm();
+        handleOpen();
+    };
+
+    const handleSubmit = async () => {
+        if (!formData.fullName || !formData.userName || !formData.password) {
+            setError("Tüm zorunlu alanları doldurunuz.");
+            return;
+        }
+        if (formData.password !== formData.confirmPassword) {
+            setError("Şifreler uyuşmuyor.");
+            return;
+        }
+
+        try {
+            await apiClient.post("/Users", formData);
+            alert("Kullanıcı başarıyla eklendi!");
+
+            // Başarılı ekleme sonrası ana sayfadaki listeyi yenilemesi için sinyal gönderiyoruz.
+            onUserAdded();
+
+            handleClose();
+        } catch (err) {
+            console.error("Kullanıcı eklenirken hata:", err);
+            setError(err.response?.data || "Bir hata oluştu.");
+        }
+    };
+
+    const handleChange = (e) => {
+        const { name, value } = e.target;
+        setFormData(prev => ({ ...prev, [name]: value }));
+    };
+
+    return (
+        <Dialog open={open} handler={handleClose}>
+            <DialogHeader>Yeni Kullanıcı Ekle</DialogHeader>
+            <DialogBody divider className="flex flex-col gap-4">
+                {error && <Typography color="red" variant="small">{error}</Typography>}
+                <Input label="Tam Ad *" name="fullName" value={formData.fullName} onChange={handleChange} />
+                <Input label="Kullanıcı Adı *" name="userName" value={formData.userName} onChange={handleChange} />
+                <Input label="Şifre *" name="password" type="password" value={formData.password} onChange={handleChange} />
+                <Input label="Şifre Tekrar *" name="confirmPassword" type="password" value={formData.confirmPassword} onChange={handleChange} />
+            </DialogBody>
+            <DialogFooter>
+                <Button variant="text" color="red" onClick={handleClose} className="mr-1">
+                    <span>İptal</span>
+                </Button>
+                <Button variant="gradient" color="green" onClick={handleSubmit}>
+                    <span>Kaydet</span>
+                </Button>
+            </DialogFooter>
+        </Dialog>
+    );
+}
\ No newline at end of file
diff --git a/src/widgets/layout/AddVehicleModal.jsx b/src/widgets/layout/AddVehicleModal.jsx
new file mode 100644
index 00000000..0f0d14ae
--- /dev/null
+++ b/src/widgets/layout/AddVehicleModal.jsx
@@ -0,0 +1,93 @@
+import React, { useState, useEffect } from "react";
+import {
+    Button,
+    Dialog,
+    DialogHeader,
+    DialogBody,
+    DialogFooter,
+    Input,
+    Select,
+    Option,
+    Typography,
+} from "@material-tailwind/react";
+import apiClient from "../../api/axiosConfig.js";
+
+export function AddVehicleModal({ open, handleOpen, onVehicleAdded }) {
+    const [users, setUsers] = useState([]);
+    const [formData, setFormData] = useState({
+        licensePlate: "",
+        driverName: "",
+        phoneNumber: "",
+        appUserId: "",
+    });
+    const [error, setError] = useState("");
+
+    useEffect(() => {
+        if (open) {
+            // DEĞİŞİKLİK: Backend'de oluşturduğumuz yeni ve filtrelenmiş endpoint'i kullanıyoruz.
+            apiClient.get("/Users/without-vehicle")
+                .then(response => {
+                    setUsers(response.data);
+                })
+                .catch(err => {
+                    console.error("Kullanıcılar çekilirken hata oluştu:", err);
+                    setError("Atanabilir kullanıcı listesi yüklenemedi.");
+                });
+        }
+    }, [open]);
+
+    const handleChange = (e) => {
+        const { name, value } = e.target;
+        setFormData(prev => ({ ...prev, [name]: value }));
+    };
+
+    const handleSelectChange = (value) => {
+        setFormData(prev => ({ ...prev, appUserId: value }));
+    };
+
+    const clearForm = () => {
+        setFormData({ licensePlate: "", driverName: "", phoneNumber: "", appUserId: "" });
+        setError("");
+    };
+
+    const handleClose = () => {
+        clearForm();
+        handleOpen();
+    }
+
+    const handleSubmit = async () => {
+        if (!formData.licensePlate || !formData.appUserId) {
+            setError("Plaka ve Kullanıcı alanları zorunludur.");
+            return;
+        }
+        try {
+            await apiClient.post("/admin/vehicles", formData);
+            alert("Araç başarıyla eklendi!");
+            onVehicleAdded();
+            handleClose();
+        } catch (err) {
+            setError(err.response?.data || "Bir hata oluştu.");
+        }
+    };
+
+    return (
+        <Dialog open={open} handler={handleClose}>
+            <DialogHeader>Yeni Araç Ekle</DialogHeader>
+            <DialogBody divider className="flex flex-col gap-4">
+                {error && <Typography color="red" variant="small">{error}</Typography>}
+                <Input label="Plaka *" name="licensePlate" value={formData.licensePlate} onChange={handleChange} />
+                <Select label="Kullanıcı Seçiniz *" name="appUserId" onChange={handleSelectChange} value={formData.appUserId}>
+                    {users.length > 0 ? (
+                        users.map(user => <Option key={user.id} value={user.id}>{user.fullName}</Option>)
+                    ) : ( <Option disabled>Atanabilir kullanıcı bulunamadı</Option> )}
+                </Select>
+                <Input label="Şoför Adı (Opsiyonel)" name="driverName" value={formData.driverName} onChange={handleChange} />
+                <Input label="Telefon Numarası (Opsiyonel)" name="phoneNumber" value={formData.phoneNumber} onChange={handleChange} />
+            </DialogBody>
+            <DialogFooter>
+                <Button variant="text" color="red" onClick={handleClose} className="mr-1"><span>İptal</span></Button>
+                <Button variant="gradient" color="green" onClick={handleSubmit}><span>Kaydet</span></Button>
+            </DialogFooter>
+        </Dialog>
+    );
+}
\ No newline at end of file
diff --git a/src/widgets/layout/EditRouteModal.jsx b/src/widgets/layout/EditRouteModal.jsx
new file mode 100644
index 00000000..67629bb0
--- /dev/null
+++ b/src/widgets/layout/EditRouteModal.jsx
@@ -0,0 +1,96 @@
+import React, { useState, useEffect } from "react";
+import {
+    Button,
+    Dialog,
+    DialogHeader,
+    DialogBody,
+    DialogFooter,
+    Input,
+    Typography,
+    Checkbox,
+} from "@material-tailwind/react";
+import apiClient from "../../api/axiosConfig.js";
+
+export function EditRouteModal({ open, handleOpen, routeToEdit, onRouteUpdated }) {
+    const [formData, setFormData] = useState({
+        routeName: "",
+        isActive: true,
+    });
+    const [error, setError] = useState("");
+
+    // Modal'a düzenlenecek güzergah bilgisi geldiğinde formu doldur
+    useEffect(() => {
+        if (routeToEdit) {
+            setFormData({
+                routeName: routeToEdit.routeName,
+                isActive: routeToEdit.isActive,
+            });
+            setError("");
+        }
+    }, [routeToEdit]);
+
+    const handleChange = (e) => {
+        const { name, value, type, checked } = e.target;
+        setFormData(prev => ({
+            ...prev,
+            [name]: type === "checkbox" ? checked : value,
+        }));
+    };
+
+    const clearForm = () => {
+        setFormData({ routeName: "", isActive: true });
+        setError("");
+    };
+
+    const handleClose = () => {
+        clearForm();
+        handleOpen();
+    };
+
+    const handleSubmit = async () => {
+        if (!formData.routeName.trim()) {
+            setError("Güzergah adı boş olamaz.");
+            return;
+        }
+
+        try {
+            // PUT isteği ile güzergahı güncelle
+            await apiClient.put(`/admin/routes/${routeToEdit.id}`, formData);
+            alert("Güzergah başarıyla güncellendi!");
+            onRouteUpdated(); // Ana listeyi yenilemesi için sinyal gönder
+            handleClose();
+        } catch (err) {
+            console.error("Güzergah güncellenirken hata:", err);
+            setError(err.response?.data || "Bir hata oluştu.");
+        }
+    };
+
+    return (
+        <Dialog open={open} handler={handleClose}>
+            <DialogHeader>Güzergahı Düzenle</DialogHeader>
+            <DialogBody divider className="flex flex-col gap-4">
+                {error && <Typography color="red" variant="small">{error}</Typography>}
+                <Input
+                    label="Güzergah Adı *"
+                    name="routeName"
+                    value={formData.routeName}
+                    onChange={handleChange}
+                />
+                <Checkbox
+                    label="Aktif mi?"
+                    name="isActive"
+                    checked={formData.isActive}
+                    onChange={handleChange}
+                />
+            </DialogBody>
+            <DialogFooter>
+                <Button variant="text" color="red" onClick={handleClose} className="mr-1">
+                    <span>İptal</span>
+                </Button>
+                <Button variant="gradient" color="green" onClick={handleSubmit}>
+                    <span>Güncelle</span>
+                </Button>
+            </DialogFooter>
+        </Dialog>
+    );
+}
\ No newline at end of file
diff --git a/src/widgets/layout/EditUserModal.jsx b/src/widgets/layout/EditUserModal.jsx
new file mode 100644
index 00000000..0f377bc4
--- /dev/null
+++ b/src/widgets/layout/EditUserModal.jsx
@@ -0,0 +1,115 @@
+import React, { useState, useEffect } from "react";
+import {
+    Button, Dialog, DialogHeader, DialogBody, DialogFooter, Input, Typography,
+} from "@material-tailwind/react";
+import apiClient from "../../api/axiosConfig.js";
+
+export function EditUserModal({ open, handleOpen, userToEdit, onUserUpdated }) {
+    const [formData, setFormData] = useState({
+        fullName: "",
+        userName: "",
+        password: "",
+        confirmPassword: "",
+    });
+    const [error, setError] = useState("");
+
+
+    useEffect(() => {
+        if (userToEdit) {
+            setFormData({
+                fullName: userToEdit.fullName || "",
+                userName: userToEdit.userName || "",
+                password: "",
+                confirmPassword: "",
+            });
+            setError("");
+        }
+    }, [userToEdit]);
+
+    const handleChange = (e) => {
+        setFormData({ ...formData, [e.target.name]: e.target.value });
+    };
+
+    const handleClose = () => {
+        setError("");
+        handleOpen();
+    };
+
+    const handleSubmit = async () => {
+
+        if (formData.password && formData.password !== formData.confirmPassword) {
+            setError("Girilen şifreler uyuşmuyor.");
+            return;
+        }
+
+
+        const payload = {
+            fullName: formData.fullName,
+            userName: formData.userName,
+        };
+        if (formData.password) {
+            payload.password = formData.password;
+            payload.confirmPassword = formData.confirmPassword;
+        }
+
+        try {
+            await apiClient.put(`/Users/${userToEdit.id}`, payload);
+            alert("Kullanıcı başarıyla güncellendi!");
+            onUserUpdated();
+            handleClose();
+        } catch (err) {
+            console.error("Kullanıcı güncellenirken hata:", err);
+
+            setError(err.response?.data?.title || err.response?.data || "Bir hata oluştu.");
+        }
+    };
+
+    return (
+        <Dialog open={open} handler={handleClose}>
+            <DialogHeader>Kullanıcıyı Düzenle: {userToEdit?.fullName}</DialogHeader>
+            <DialogBody divider className="flex flex-col gap-4">
+                {error && <Typography color="red" variant="small">{error}</Typography>}
+                <Input
+                    label="Tam Ad *"
+                    name="fullName"
+                    value={formData.fullName}
+                    onChange={handleChange}
+                />
+                <Input
+                    label="Kullanıcı Adı *"
+                    name="userName"
+                    value={formData.userName}
+                    onChange={handleChange}
+                />
+                <hr />
+                <Typography variant="small" color="blue-gray" className="-mb-3">
+                    Şifreyi Değiştirmek İstemiyorsanız Boş Bırakın
+                </Typography>
+                <Input
+                    label="Yeni Şifre"
+                    name="password"
+                    type="password"
+                    value={formData.password}
+                    onChange={handleChange}
+                    autoComplete="new-password"
+                />
+                <Input
+                    label="Yeni Şifre Tekrar"
+                    name="confirmPassword"
+                    type="password"
+                    value={formData.confirmPassword}
+                    onChange={handleChange}
+                    autoComplete="new-password"
+                />
+            </DialogBody>
+            <DialogFooter>
+                <Button variant="text" color="red" onClick={handleClose} className="mr-1">
+                    <span>İptal</span>
+                </Button>
+                <Button variant="gradient" color="green" onClick={handleSubmit}>
+                    <span>Güncelle</span>
+                </Button>
+            </DialogFooter>
+        </Dialog>
+    );
+}
\ No newline at end of file
diff --git a/src/widgets/layout/EditVehicleModal.jsx b/src/widgets/layout/EditVehicleModal.jsx
new file mode 100644
index 00000000..12b14a96
--- /dev/null
+++ b/src/widgets/layout/EditVehicleModal.jsx
@@ -0,0 +1,75 @@
+import React, { useState, useEffect } from "react";
+import {
+    Button, Dialog, DialogHeader, DialogBody, DialogFooter, Input, Checkbox, Typography
+} from "@material-tailwind/react";
+import apiClient from "../../api/axiosConfig.js";
+
+export function EditVehicleModal({ open, handleOpen, onVehicleUpdated, vehicleToEdit }) {
+    const [formData, setFormData] = useState({
+        licensePlate: "",
+        driverName: "",
+        phoneNumber: "",
+        isActive: true,
+    });
+    const [error, setError] = useState("");
+
+    // Bu useEffect, modal'a düzenlenecek araç bilgisi geldiğinde formu doldurur.
+    useEffect(() => {
+        if (vehicleToEdit) {
+            setFormData({
+                licensePlate: vehicleToEdit.licensePlate || "",
+                driverName: vehicleToEdit.driverName || "",
+                phoneNumber: vehicleToEdit.phoneNumber || "",
+                isActive: vehicleToEdit.isActive,
+            });
+        } else {
+
+            setFormData({ licensePlate: "", driverName: "", phoneNumber: "", isActive: true });
+            setError("");
+        }
+    }, [vehicleToEdit]);
+
+    const handleChange = (e) => {
+        const { name, value, type, checked } = e.target;
+        setFormData(prev => ({
+            ...prev,
+            [name]: type === 'checkbox' ? checked : value
+        }));
+    };
+
+    const handleSubmit = async () => {
+        if (!formData.licensePlate) {
+            setError("Plaka alanı zorunludur.");
+            return;
+        }
+        if (!vehicleToEdit) return;
+
+        try {
+            // Backend'deki PUT endpoint'ine istek gönderiyoruz.
+            await apiClient.put(`/admin/vehicles/${vehicleToEdit.id}`, formData);
+            alert("Araç başarıyla güncellendi!");
+            onVehicleUpdated();
+            handleOpen();
+        } catch (err) {
+            console.error("Araç güncellenirken hata:", err);
+            setError(err.response?.data || "Güncelleme sırasında bir hata oluştu.");
+        }
+    };
+
+    return (
+        <Dialog open={open} handler={handleOpen}>
+            <DialogHeader>Araç Düzenle</DialogHeader>
+            <DialogBody divider className="flex flex-col gap-4">
+                {error && <Typography color="red" variant="small">{error}</Typography>}
+                <Input label="Plaka *" name="licensePlate" value={formData.licensePlate} onChange={handleChange} />
+                <Input label="Şoför Adı" name="driverName" value={formData.driverName} onChange={handleChange} />
+                <Input label="Telefon Numarası" name="phoneNumber" value={formData.phoneNumber} onChange={handleChange} />
+                <Checkbox label="Aktif" name="isActive" checked={formData.isActive} onChange={handleChange} />
+            </DialogBody>
+            <DialogFooter>
+                <Button variant="text" color="red" onClick={handleOpen} className="mr-1"><span>İptal</span></Button>
+                <Button variant="gradient" color="green" onClick={handleSubmit}><span>Güncelle</span></Button>
+            </DialogFooter>
+        </Dialog>
+    );
+}
\ No newline at end of file
diff --git a/src/widgets/layout/dashboard-navbar.jsx b/src/widgets/layout/dashboard-navbar.jsx
index d91e23f7..00eaa89b 100644
--- a/src/widgets/layout/dashboard-navbar.jsx
+++ b/src/widgets/layout/dashboard-navbar.jsx
@@ -1,36 +1,23 @@
-import { useLocation, Link } from "react-router-dom";
-import {
-  Navbar,
-  Typography,
-  Button,
-  IconButton,
-  Breadcrumbs,
-  Input,
-  Menu,
-  MenuHandler,
-  MenuList,
-  MenuItem,
-  Avatar,
-} from "@material-tailwind/react";
-import {
-  UserCircleIcon,
-  Cog6ToothIcon,
-  BellIcon,
-  ClockIcon,
-  CreditCardIcon,
-  Bars3Icon,
-} from "@heroicons/react/24/solid";
-import {
-  useMaterialTailwindController,
-  setOpenConfigurator,
-  setOpenSidenav,
-} from "@/context";
+import { ArrowRightOnRectangleIcon, Bars3Icon } from "@heroicons/react/24/solid";
+import { IconButton, Input, Navbar, Typography, Breadcrumbs } from "@material-tailwind/react";
+import { useMaterialTailwindController, setOpenSidenav } from "@/context";
+import { useLocation, Link, useNavigate } from "react-router-dom"; // 🔹 useNavigate eklendi
 
 export function DashboardNavbar() {
   const [controller, dispatch] = useMaterialTailwindController();
   const { fixedNavbar, openSidenav } = controller;
   const { pathname } = useLocation();
   const [layout, page] = pathname.split("/").filter((el) => el !== "");
+  
+
+  const navigate = useNavigate();
+
+const handleLogout = () => {
+  localStorage.removeItem("authToken"); // Token sil
+  localStorage.removeItem("userRole");  // varsa rol bilgisini de sil
+  navigate("/auth/sign-in"); // Login ekranına yönlendir
+};
+
 
   return (
     <Navbar
@@ -43,12 +30,11 @@ export function DashboardNavbar() {
       fullWidth
       blurred={fixedNavbar}
     >
-      <div className="flex flex-col-reverse justify-between gap-6 md:flex-row md:items-center">
+      <div className="flex flex-col-reverse md:flex-row md:items-center justify-between gap-6">
+        {/* Breadcrumbs ve sayfa başlığı */}
         <div className="capitalize">
           <Breadcrumbs
-            className={`bg-transparent p-0 transition-all ${
-              fixedNavbar ? "mt-1" : ""
-            }`}
+            className={`bg-transparent p-0 transition-all ${fixedNavbar ? "mt-1" : ""}`}
           >
             <Link to={`/${layout}`}>
               <Typography
@@ -56,25 +42,25 @@ export function DashboardNavbar() {
                 color="blue-gray"
                 className="font-normal opacity-50 transition-all hover:text-blue-500 hover:opacity-100"
               >
-                {layout}
+                {layout || "Home"}
               </Typography>
             </Link>
-            <Typography
-              variant="small"
-              color="blue-gray"
-              className="font-normal"
-            >
-              {page}
+            <Typography variant="small" color="blue-gray" className="font-normal">
+              {page || "Dashboard"}
             </Typography>
           </Breadcrumbs>
-          <Typography variant="h6" color="blue-gray">
-            {page}
+          <Typography variant="h6" color="blue-gray" className="capitalize">
+            {page || "Dashboard"}
           </Typography>
         </div>
-        <div className="flex items-center">
+
+        {/* Arama ve ikonlar */}
+        <div className="flex items-center gap-4">
           <div className="mr-auto md:mr-4 md:w-56">
-            <Input label="Search" />
+            <Input label="Search" className="rounded-lg" />
           </div>
+
+          {/* Sidenav toggle */}
           <IconButton
             variant="text"
             color="blue-gray"
@@ -83,114 +69,18 @@ export function DashboardNavbar() {
           >
             <Bars3Icon strokeWidth={3} className="h-6 w-6 text-blue-gray-500" />
           </IconButton>
-          <Link to="/auth/sign-in">
-            <Button
-              variant="text"
-              color="blue-gray"
-              className="hidden items-center gap-1 px-4 xl:flex normal-case"
-            >
-              <UserCircleIcon className="h-5 w-5 text-blue-gray-500" />
-              Sign In
-            </Button>
-            <IconButton
-              variant="text"
-              color="blue-gray"
-              className="grid xl:hidden"
-            >
-              <UserCircleIcon className="h-5 w-5 text-blue-gray-500" />
-            </IconButton>
-          </Link>
-          <Menu>
-            <MenuHandler>
-              <IconButton variant="text" color="blue-gray">
-                <BellIcon className="h-5 w-5 text-blue-gray-500" />
-              </IconButton>
-            </MenuHandler>
-            <MenuList className="w-max border-0">
-              <MenuItem className="flex items-center gap-3">
-                <Avatar
-                  src="https://demos.creative-tim.com/material-dashboard/assets/img/team-2.jpg"
-                  alt="item-1"
-                  size="sm"
-                  variant="circular"
-                />
-                <div>
-                  <Typography
-                    variant="small"
-                    color="blue-gray"
-                    className="mb-1 font-normal"
-                  >
-                    <strong>New message</strong> from Laur
-                  </Typography>
-                  <Typography
-                    variant="small"
-                    color="blue-gray"
-                    className="flex items-center gap-1 text-xs font-normal opacity-60"
-                  >
-                    <ClockIcon className="h-3.5 w-3.5" /> 13 minutes ago
-                  </Typography>
-                </div>
-              </MenuItem>
-              <MenuItem className="flex items-center gap-4">
-                <Avatar
-                  src="https://demos.creative-tim.com/material-dashboard/assets/img/small-logos/logo-spotify.svg"
-                  alt="item-1"
-                  size="sm"
-                  variant="circular"
-                />
-                <div>
-                  <Typography
-                    variant="small"
-                    color="blue-gray"
-                    className="mb-1 font-normal"
-                  >
-                    <strong>New album</strong> by Travis Scott
-                  </Typography>
-                  <Typography
-                    variant="small"
-                    color="blue-gray"
-                    className="flex items-center gap-1 text-xs font-normal opacity-60"
-                  >
-                    <ClockIcon className="h-3.5 w-3.5" /> 1 day ago
-                  </Typography>
-                </div>
-              </MenuItem>
-              <MenuItem className="flex items-center gap-4">
-                <div className="grid h-9 w-9 place-items-center rounded-full bg-gradient-to-tr from-blue-gray-800 to-blue-gray-900">
-                  <CreditCardIcon className="h-4 w-4 text-white" />
-                </div>
-                <div>
-                  <Typography
-                    variant="small"
-                    color="blue-gray"
-                    className="mb-1 font-normal"
-                  >
-                    Payment successfully completed
-                  </Typography>
-                  <Typography
-                    variant="small"
-                    color="blue-gray"
-                    className="flex items-center gap-1 text-xs font-normal opacity-60"
-                  >
-                    <ClockIcon className="h-3.5 w-3.5" /> 2 days ago
-                  </Typography>
-                </div>
-              </MenuItem>
-            </MenuList>
-          </Menu>
+
+          {/* Çıkış butonu */}
           <IconButton
             variant="text"
-            color="blue-gray"
-            onClick={() => setOpenConfigurator(dispatch, true)}
+            color="red"
+            onClick={handleLogout} // 🔹 logout çağrıldı
+            className="rounded-full hover:bg-red-100 transition-colors"
           >
-            <Cog6ToothIcon className="h-5 w-5 text-blue-gray-500" />
+            <ArrowRightOnRectangleIcon className="h-6 w-6 text-red-500" />
           </IconButton>
         </div>
       </div>
     </Navbar>
   );
 }
-
-DashboardNavbar.displayName = "/src/widgets/layout/dashboard-navbar.jsx";
-
-export default DashboardNavbar;
diff --git a/src/widgets/layout/footer.jsx b/src/widgets/layout/footer.jsx
index 1ea98e53..f2c59643 100644
--- a/src/widgets/layout/footer.jsx
+++ b/src/widgets/layout/footer.jsx
@@ -8,33 +8,7 @@ export function Footer({ brandName, brandLink, routes }) {
   return (
     <footer className="py-2">
       <div className="flex w-full flex-wrap items-center justify-center gap-6 px-2 md:justify-between">
-        <Typography variant="small" className="font-normal text-inherit">
-          &copy; {year}, made with{" "}
-          <HeartIcon className="-mt-0.5 inline-block h-3.5 w-3.5 text-red-600" /> by{" "}
-          <a
-            href={brandLink}
-            target="_blank"
-            className="transition-colors hover:text-blue-500 font-bold"
-          >
-            {brandName}
-          </a>{" "}
-          for a better web.
-        </Typography>
-        <ul className="flex items-center gap-4">
-          {routes.map(({ name, path }) => (
-            <li key={name}>
-              <Typography
-                as="a"
-                href={path}
-                target="_blank"
-                variant="small"
-                className="py-0.5 px-1 font-normal text-inherit transition-colors hover:text-blue-500"
-              >
-                {name}
-              </Typography>
-            </li>
-          ))}
-        </ul>
+      
       </div>
     </footer>
   );
diff --git a/src/widgets/layout/sidenav.jsx b/src/widgets/layout/sidenav.jsx
index cc7e6ffe..e389bbdb 100644
--- a/src/widgets/layout/sidenav.jsx
+++ b/src/widgets/layout/sidenav.jsx
@@ -11,7 +11,8 @@ import { useMaterialTailwindController, setOpenSidenav } from "@/context";
 
 export function Sidenav({ brandImg, brandName, routes }) {
   const [controller, dispatch] = useMaterialTailwindController();
-  const { sidenavColor, sidenavType, openSidenav } = controller;
+  const { sidenavColor, sidenavType, openSidenav, userRole } = controller;
+
   const sidenavTypes = {
     dark: "bg-gradient-to-br from-gray-800 to-gray-900",
     white: "bg-white shadow-sm",
@@ -19,93 +20,74 @@ export function Sidenav({ brandImg, brandName, routes }) {
   };
 
   return (
-    <aside
-      className={`${sidenavTypes[sidenavType]} ${
-        openSidenav ? "translate-x-0" : "-translate-x-80"
-      } fixed inset-0 z-50 my-4 ml-4 h-[calc(100vh-32px)] w-72 rounded-xl transition-transform duration-300 xl:translate-x-0 border border-blue-gray-100`}
-    >
-      <div
-        className={`relative`}
+      <aside
+          className={`${sidenavTypes[sidenavType]} ${
+              openSidenav ? "translate-x-0" : "-translate-x-80"
+          } fixed inset-0 z-50 my-4 ml-4 h-[calc(100vh-32px)] w-72 rounded-xl transition-transform duration-300 xl:translate-x-0 border border-blue-gray-100`}
       >
-        <Link to="/" className="py-6 px-8 text-center">
-          <Typography
-            variant="h6"
-            color={sidenavType === "dark" ? "white" : "blue-gray"}
+        <div className="relative">
+          <Link to="/" className="py-6 px-8 text-center">
+            <Typography
+                variant="h6"
+                color={sidenavType === "dark" ? "white" : "blue-gray"}
+            >
+              {brandName}
+            </Typography>
+          </Link>
+          <IconButton
+              variant="text"
+              color="white"
+              size="sm"
+              ripple={false}
+              className="absolute right-0 top-0 grid rounded-br-none rounded-tl-none xl:hidden"
+              onClick={() => setOpenSidenav(dispatch, false)}
           >
-            {brandName}
-          </Typography>
-        </Link>
-        <IconButton
-          variant="text"
-          color="white"
-          size="sm"
-          ripple={false}
-          className="absolute right-0 top-0 grid rounded-br-none rounded-tl-none xl:hidden"
-          onClick={() => setOpenSidenav(dispatch, false)}
-        >
-          <XMarkIcon strokeWidth={2.5} className="h-5 w-5 text-white" />
-        </IconButton>
-      </div>
-      <div className="m-4">
-        {routes.map(({ layout, title, pages }, key) => (
-          <ul key={key} className="mb-4 flex flex-col gap-1">
-            {title && (
-              <li className="mx-3.5 mt-4 mb-2">
-                <Typography
-                  variant="small"
-                  color={sidenavType === "dark" ? "white" : "blue-gray"}
-                  className="font-black uppercase opacity-75"
-                >
-                  {title}
-                </Typography>
-              </li>
-            )}
-            {pages.map(({ icon, name, path }) => (
-              <li key={name}>
-                <NavLink to={`/${layout}${path}`}>
-                  {({ isActive }) => (
-                    <Button
-                      variant={isActive ? "gradient" : "text"}
-                      color={
-                        isActive
-                          ? sidenavColor
-                          : sidenavType === "dark"
-                          ? "white"
-                          : "blue-gray"
-                      }
-                      className="flex items-center gap-4 px-4 capitalize"
-                      fullWidth
-                    >
-                      {icon}
-                      <Typography
-                        color="inherit"
-                        className="font-medium capitalize"
-                      >
-                        {name}
-                      </Typography>
-                    </Button>
-                  )}
-                </NavLink>
-              </li>
-            ))}
-          </ul>
-        ))}
-      </div>
-    </aside>
+            <XMarkIcon strokeWidth={2.5} className="h-5 w-5 text-white" />
+          </IconButton>
+        </div>
+        <div className="m-4">
+          {routes
+              .filter((route) => route.layout === "dashboard") // Sadece dashboard layout'unu al
+              .map(({ layout, pages }, key) => (
+                  <ul key={key} className="mb-4 flex flex-col gap-1">
+                    {pages
+                        // BU SATIR SAYESİNDE OTOMATİK FİLTRELEME YAPILIYOR
+                        .filter((page) => !page.roles || page.roles.includes(userRole))
+                        .map(({ icon, name, path }) => (
+                            <li key={name}>
+                              <NavLink to={`/${layout}${path}`}>
+                                {({ isActive }) => (
+                                    <Button
+                                        variant={isActive ? "gradient" : "text"}
+                                        color={
+                                          isActive
+                                              ? sidenavColor
+                                              : sidenavType === "dark"
+                                                  ? "white"
+                                                  : "blue-gray"
+                                        }
+                                        className="flex items-center gap-4 px-4 capitalize"
+                                        fullWidth
+                                    >
+                                      {icon}
+                                      <Typography
+                                          color="inherit"
+                                          className="font-medium capitalize"
+                                      >
+                                        {name}
+                                      </Typography>
+                                    </Button>
+                                )}
+                              </NavLink>
+                            </li>
+                        ))}
+                  </ul>
+              ))}
+        </div>
+      </aside>
   );
 }
 
-Sidenav.defaultProps = {
-  brandImg: "/img/logo-ct.png",
-  brandName: "Material Tailwind React",
-};
-
-Sidenav.propTypes = {
-  brandImg: PropTypes.string,
-  brandName: PropTypes.string,
-  routes: PropTypes.arrayOf(PropTypes.object).isRequired,
-};
 
-Sidenav.displayName = "/src/widgets/layout/sidnave.jsx";
 
-export default Sidenav;
+export default Sidenav;
\ No newline at end of file