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..65555782 100644
--- a/src/pages/auth/sign-in.jsx
+++ b/src/pages/auth/sign-in.jsx
@@ -1,126 +1,129 @@
+import React, { useState } from "react";
+import { Card, Input, Button, Typography } from "@material-tailwind/react";
+import { Link, 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";
 
 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 fetch("https://localhost:7093/api/Auth/Login", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(loginData),
+      });
+
+      if (response.ok) {
+        const token = await response.text();
+
+
+        localStorage.setItem("authToken", 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(userRole);
+
+        if (userRole) {
+          setUserRole(dispatch, userRole);
+          localStorage.setItem("userRole", userRole);
+        }
+
+
+        navigate("/dashboard/home");
+      } else {
+        alert("Kullanıcı adı veya şifre hatalı!");
+      }
+    } catch (error) {
+      console.error("Sunucuya bağlanırken bir hata oluştu:", error);
+      alert("Sunucuya bağlanılamadı.");
+    }
+  };
+
+
+
   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
-            </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
+      <section
+          className="min-h-screen flex items-center justify-center bg-cover bg-center"
+          style={{ backgroundImage: `url(/img/background.jpg)` }} // Arka plan resminizin yolu
+      >
+        <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
-              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={
+          {/* YENİ: form etiketini div ile değiştirdik */}
+          <div className="flex flex-col gap-6">
+            <div>
               <Typography
-                variant="small"
-                color="gray"
-                className="flex items-center justify-start font-medium"
+                  variant="small"
+                  color="blue-gray"
+                  className="mb-2 font-medium"
               >
-                I agree the&nbsp;
-                <a
-                  href="#"
-                  className="font-normal text-black transition-colors hover:text-gray-900 underline"
-                >
-                  Terms and Conditions
-                </a>
+                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
+              <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",
+                  }}
+                  // YENİ: State bağlantıları
+                  value={username}
+                  onChange={(e) => setUsername(e.target.value)}
+              />
+            </div>
+
+            <div>
+              <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>
+                  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/notifications.jsx b/src/pages/dashboard/notifications.jsx
index f4be88b0..8cf792e9 100644
--- a/src/pages/dashboard/notifications.jsx
+++ b/src/pages/dashboard/notifications.jsx
@@ -1,84 +1,100 @@
 import React from "react";
 import {
   Typography,
-  Alert,
   Card,
   CardHeader,
   CardBody,
+  Button,
 } from "@material-tailwind/react";
-import { InformationCircleIcon } from "@heroicons/react/24/outline";
 
-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"];
+// Örnek güzergah verisi
+const routesData = [
+  { route: "İstanbul - Ankara" },
+  { route: "İzmir - Antalya" },
+  { route: "Bursa - Eskişehir" },
+];
 
+export function Notifications() {
   return (
     <div className="mx-auto my-20 flex max-w-screen-lg flex-col gap-8">
       <Card>
+        {/* Güzergahlar başlığı ve ekleme butonu */}
         <CardHeader
-          color="transparent"
-          floated={false}
-          shadow={false}
-          className="m-0 p-4"
+          variant="gradient"
+          color="gray"
+          className="mb-4 p-6 flex justify-between items-center"
         >
-          <Typography variant="h5" color="blue-gray">
-            Alerts
+          <Typography variant="h6" color="white">
+            Güzergahlar
           </Typography>
+          <Button size="sm" className="bg-green-700 text-white hover:bg-green-800">
+            Güzergah Ekle
+          </Button>
         </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,
-              }))}
-            >
-              A simple {color} alert with an <a href="#">example link</a>. Give
-              it a click if you like.
-            </Alert>
-          ))}
+
+        <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 ${
+                      el === "İşlem" ? "text-right" : "text-left"
+                    }`}
+                  >
+                    <Typography
+                      variant="small"
+                      className="text-[11px] font-bold uppercase text-blue-gray-400"
+                    >
+                      {el}
+                    </Typography>
+                  </th>
+                ))}
+              </tr>
+            </thead>
+
+            <tbody>
+              {routesData.map(({ route }, key) => {
+                const className = `py-3 px-5 ${
+                  key === routesData.length - 1 ? "" : "border-b border-blue-gray-50"
+                }`;
+
+                return (
+                  <tr key={route}>
+                    {/* Güzergah */}
+                    <td className={className}>
+                      <Typography variant="small" color="blue-gray" className="font-semibold">
+                        {route}
+                      </Typography>
+                    </td>
+
+                    {/* İşlem butonları */}
+                    <td className={`${className} text-right`}>
+                      <div className="flex flex-col items-end gap-1">
+                        <Button
+                          size="xs"
+                          variant="gradient"
+                          color="darkblue"
+                          className="normal-case text-[10px] py-1 px-2"
+                        >
+                          Düzenle
+                        </Button>
+                        <Button
+                          size="xs"
+                          variant="gradient"
+                          color="red"
+                          className="normal-case text-[10px] py-1 px-2"
+                        >
+                          Sil
+                        </Button>
+                      </div>
+                    </td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
         </CardBody>
       </Card>
     </div>
diff --git a/src/pages/dashboard/profile.jsx b/src/pages/dashboard/profile.jsx
index 0d9f0115..1441185f 100644
--- a/src/pages/dashboard/profile.jsx
+++ b/src/pages/dashboard/profile.jsx
@@ -1,221 +1,167 @@
+import React, { useState, useEffect } from "react";
 import {
   Card,
-  CardBody,
   CardHeader,
-  CardFooter,
-  Avatar,
+  CardBody,
   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 apiClient from "@/api/axiosConfig";
 
 export function Profile() {
+  // Verileri, yüklenme durumunu ve hata durumunu tutmak için state'ler
+  const [users, setUsers] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  // Bu effect, bileşen ilk yüklendiğinde çalışır ve verileri çeker
+  useEffect(() => {
+    const fetchUsers = async () => {
+      try {
+        setLoading(true);
+        // Backend'de oluşturduğumuz endpoint'e istek atıyoruz
+        const response = await apiClient.get("/users");
+        setUsers(response.data); // Gelen veriyi state'e kaydediyoruz
+      } catch (err) {
+        setError("Kullanıcı verileri yüklenirken bir hata oluştu.");
+        console.error(err);
+      } finally {
+        setLoading(false); // Yükleme tamamlandı
+      }
+    };
+
+    fetchUsers();
+  }, []); // [] dependency array'i sayesinde sadece bir kez çalışır
+
+  // YENİ: Kullanıcı silme fonksiyonu eklendi
+  const handleDelete = async (userId, userName) => {
+    // Kazara silmeyi önlemek için kullanıcıdan onay al
+    if (window.confirm(`'${userName}' adlı kullanıcıyı silmek istediğinizden emin misiniz?`)) {
+      try {
+        // Backend'deki DELETE endpoint'ine istek gönder
+        await apiClient.delete(`/users/${userId}`);
+
+        // Arayüzü anında güncellemek için silinen kullanıcıyı listeden çıkar
+        setUsers(currentUsers => currentUsers.filter(user => user.id !== userId));
+
+        // Kullanıcıya başarı mesajı göster (isteğe bağlı)
+        // alert("Kullanıcı başarıyla silindi.");
+      } catch (err) {
+        alert("Kullanıcı silinirken bir hata oluştu.");
+        console.error(err);
+      }
+    }
+  };
+
+
+  // Yüklenme sırasında gösterilecek içerik
+  if (loading) {
+    return (
+        <div className="mt-12 text-center">
+          <Typography>Kullanıcılar Yükleniyor...</Typography>
+        </div>
+    );
+  }
+
+  // Hata durumunda gösterilecek içerik
+  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>
-                    }
-                  />
-                ))}
-              </ul>
-            </div>
-          </div>
-          <div className="px-4 pb-4">
-            <Typography variant="h6" color="blue-gray" className="mb-2">
-              Projects
+      <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>
-            <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"
+            <Button size="sm" className="bg-green-700 text-white hover:bg-green-800">
+              Kullanıcı Ekle
+            </Button>
+          </CardHeader>
+          <CardBody className="overflow-x-scroll px-0 pt-0 pb-2">
+            <table className="w-full min-w-[600px] table-auto">
+              <thead>
+              <tr>
+                {["Ad Soyad", "Araç Plakası", "Telefon", "İşlem"].map((el) => (
+                    <th
+                        key={el}
+                        className={`border-b border-blue-gray-50 py-3 px-5 ${
+                            el === "İşlem" ? "text-right" : "text-left"
+                        }`}
                     >
-                      <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"
+                          variant="small"
+                          className="text-[11px] font-bold uppercase text-blue-gray-400"
                       >
-                        {tag}
+                        {el}
                       </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}
+                    </th>
+                ))}
+              </tr>
+              </thead>
+              <tbody>
+              {/* Statik veri yerine backend'den gelen 'users' state'ini map'liyoruz */}
+              {users.map((user, key) => {
+                const isLast = key === users.length - 1;
+                const className = `py-3 px-5 ${
+                    isLast ? "" : "border-b border-blue-gray-50"
+                }`;
+
+                return (
+                    // React'te listeler için 'key' prop'u benzersiz olmalıdır, ID kullanmak en iyisidir.
+                    <tr key={user.id}>
+                      <td className={className}>
+                        <Typography variant="small" color="blue-gray" className="font-semibold">
+                          {user.fullName}
+                        </Typography>
+                      </td>
+                      <td className={className}>
+                        <Typography variant="small" color="blue-gray" className="font-normal">
+                          {user.licensePlate}
+                        </Typography>
+                      </td>
+                      <td className={className}>
+                        <Typography variant="small" color="blue-gray" className="font-normal">
+                          {user.phoneNumber}
+                        </Typography>
+                      </td>
+                      <td className={`${className} text-right`}>
+                        <div className="flex flex-col items-end gap-2">
+                          <Button
+                              size="xs"
+                              variant="gradient"
+                              color="blue" // Renkleri Material Tailwind'in kabul ettiği değerlerle güncelledim
+                              className="normal-case text-[10px] py-1 px-2"
+                          >
+                            Düzenle
+                          </Button>
+                          {/* YENİ: Sil butonuna onClick olayı eklendi */}
+                          <Button
                               size="xs"
-                              variant="circular"
-                              className={`cursor-pointer border-2 border-white ${
-                                key === 0 ? "" : "-ml-2.5"
-                              }`}
-                            />
-                          </Tooltip>
-                        ))}
-                      </div>
-                    </CardFooter>
-                  </Card>
-                )
-              )}
-            </div>
-          </div>
-        </CardBody>
-      </Card>
-    </>
+                              variant="gradient"
+                              color="red"
+                              className="normal-case text-[10px] py-1 px-2"
+                              onClick={() => handleDelete(user.id, user.fullName)}
+                          >
+                            Sil
+                          </Button>
+                        </div>
+                      </td>
+                    </tr>
+                );
+              })}
+              </tbody>
+            </table>
+          </CardBody>
+        </Card>
+      </div>
   );
 }
 
-export default Profile;
+export default Profile;
\ No newline at end of file
diff --git a/src/pages/dashboard/tables.jsx b/src/pages/dashboard/tables.jsx
index 3d453ed7..531a557b 100644
--- a/src/pages/dashboard/tables.jsx
+++ b/src/pages/dashboard/tables.jsx
@@ -3,31 +3,37 @@ import {
   CardHeader,
   CardBody,
   Typography,
-  Avatar,
-  Chip,
-  Tooltip,
-  Progress,
+  Button,
 } from "@material-tailwind/react";
-import { EllipsisVerticalIcon } from "@heroicons/react/24/outline";
-import { authorsTableData, projectsTableData } from "@/data";
+import { authorsTableData } from "@/data";
 
 export function Tables() {
   return (
     <div className="mt-12 mb-8 flex flex-col gap-12">
       <Card>
-        <CardHeader variant="gradient" color="gray" className="mb-8 p-6">
+        <CardHeader
+          variant="gradient"
+          color="gray"
+          className="mb-4 p-6 flex justify-between items-center"
+        >
           <Typography variant="h6" color="white">
-            Authors Table
+            Araçlar
           </Typography>
+          <Button size="sm" className="bg-green-700 text-white hover:bg-green-800">
+            Araç Ekle
+          </Button>
         </CardHeader>
+
         <CardBody className="overflow-x-scroll px-0 pt-0 pb-2">
-          <table className="w-full min-w-[640px] table-auto">
+          <table className="w-full min-w-[500px] table-auto">
             <thead>
               <tr>
-                {["author", "function", "status", "employed", ""].map((el) => (
+                {["Araçlar", "Şoför", "İşlem"].map((el) => (
                   <th
                     key={el}
-                    className="border-b border-blue-gray-50 py-3 px-5 text-left"
+                    className={`border-b border-blue-gray-50 py-3 px-5 ${
+                      el === "İşlem" ? "text-right" : "text-left"
+                    }`}
                   >
                     <Typography
                       variant="small"
@@ -39,177 +45,53 @@ export function Tables() {
                 ))}
               </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"
-                  }`;
+              {authorsTableData.map(({ plaka, driver }, key) => {
+                const className = `py-3 px-5 ${
+                  key === authorsTableData.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" 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}
+                return (
+                  <tr key={plaka}>
+                    {/* Araç Plaka */}
+                    <td className={className}>
+                      <Typography variant="small" color="blue-gray" className="font-semibold">
+                        {plaka}
                       </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"
-                  }`;
+                    </td>
+
+                    {/* Şoför */}
+                    <td className={className}>
+                      <Typography variant="small" color="blue-gray" className="font-normal">
+                        {driver}
+                      </Typography>
+                    </td>
 
-                  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"
+                    {/* İşlem butonları */}
+                    <td className={`${className} text-right`}>
+                      <div className="flex flex-col items-end gap-1">
+                        <Button
+                          size="xs"
+                          variant="gradient"
+                          color="darkblue"
+                          className="normal-case text-[10px] py-1 px-2"
                         >
-                          {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"
+                          Düzenle
+                        </Button>
+                        <Button
+                          size="xs"
+                          variant="gradient"
+                          color="red"
+                          className="normal-case text-[10px] py-1 px-2"
                         >
-                          <EllipsisVerticalIcon
-                            strokeWidth={2}
-                            className="h-5 w-5 text-inherit"
-                          />
-                        </Typography>
-                      </td>
-                    </tr>
-                  );
-                }
-              )}
+                          Sil
+                        </Button>
+                      </div>
+                    </td>
+                  </tr>
+                );
+              })}
             </tbody>
           </table>
         </CardBody>
diff --git a/src/routes.jsx b/src/routes.jsx
index 3a5a8da0..c2c7cfbe 100644
--- a/src/routes.jsx
+++ b/src/routes.jsx
@@ -1,66 +1,139 @@
 import {
-  HomeIcon,
-  UserCircleIcon,
-  TableCellsIcon,
-  InformationCircleIcon,
-  ServerStackIcon,
-  RectangleStackIcon,
+
+  HomeIcon,
+
+  UserCircleIcon,
+
+  TableCellsIcon,
+
+  InformationCircleIcon,
+
+  ServerStackIcon,
+
+  RectangleStackIcon,
+
+  TruckIcon,
+
+  MapIcon,
+
+  Squares2X2Icon,
+
 } from "@heroicons/react/24/solid";
+
 import { Home, Profile, Tables, Notifications } from "@/pages/dashboard";
-import { SignIn, SignUp } from "@/pages/auth";
+
+import { SignIn } from "@/pages/auth";
+
+
+
+
+
+
 
 const icon = {
-  className: "w-5 h-5 text-inherit",
+
+  className: "w-5 h-5 text-inherit",
+
 };
 
+
+
 export const routes = [
-  {
-    layout: "dashboard",
-    pages: [
-      {
-        icon: <HomeIcon {...icon} />,
-        name: "dashboard",
-        path: "/home",
-        element: <Home />,
-      },
-      {
-        icon: <UserCircleIcon {...icon} />,
-        name: "profile",
-        path: "/profile",
-        element: <Profile />,
-      },
-      {
-        icon: <TableCellsIcon {...icon} />,
-        name: "tables",
-        path: "/tables",
-        element: <Tables />,
-      },
-      {
-        icon: <InformationCircleIcon {...icon} />,
-        name: "notifications",
-        path: "/notifications",
-        element: <Notifications />,
-      },
-    ],
-  },
-  {
-    title: "auth pages",
-    layout: "auth",
-    pages: [
-      {
-        icon: <ServerStackIcon {...icon} />,
-        name: "sign in",
-        path: "/sign-in",
-        element: <SignIn />,
-      },
-      {
-        icon: <RectangleStackIcon {...icon} />,
-        name: "sign up",
-        path: "/sign-up",
-        element: <SignUp />,
-      },
-    ],
-  },
+
+  {
+
+    layout: "dashboard",
+
+    pages: [
+
+      {
+
+        icon: <Squares2X2Icon {...icon} />,
+
+        name: "Araç Sıraları",
+
+        path: "/home",
+
+        element: <Home />,
+
+        // roles eklenmediği için giriş yapan herkes görebilir.
+
+        // İsterseniz roles: ['admin', 'user'] de ekleyebilirsiniz.
+
+      },
+
+      {
+
+        icon: <UserCircleIcon {...icon} />,
+
+        name: "Kullanıcılar",
+
+        path: "/profile",
+
+        element: <Profile />,
+
+        roles: ['admin'],
+
+      },
+
+      {
+
+        icon: <TruckIcon {...icon} />,
+
+        name: "Araçlar",
+
+        path: "/tables",
+
+        element: <Tables />,
+
+        roles: ['admin'], // YENİ: Sadece adminler görebilir.
+
+      },
+
+      {
+
+        icon: <MapIcon {...icon} />,
+
+        name: "Güzergahlar",
+
+        path: "/notifications",
+
+        element: <Notifications />,
+
+        roles: ['admin'], // YENİ: Sadece adminler görebilir.
+
+      },
+
+    ],
+
+  },
+
+  {
+
+    title: "auth pages",
+
+    layout: "auth",
+
+    pages: [
+
+      {
+
+        icon: <ServerStackIcon {...icon} />,
+
+        name: "sign in",
+
+        path: "/sign-in",
+
+        element: <SignIn />,
+
+      },
+
+    ],
+
+  },
+
 ];
 
-export default routes;
+
+
+export default routes;
\ 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..091be2b8 100644
--- a/src/widgets/layout/sidenav.jsx
+++ b/src/widgets/layout/sidenav.jsx
@@ -11,22 +11,24 @@ 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",
     transparent: "bg-transparent",
   };
 
+  // Debug: Rolün doğru gelip gelmediğini kontrol etmek için
+  console.log("SIDEBAR'DAKİ ROL:", userRole);
+
   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`}
-      >
+      <div className="relative">
         <Link to="/" className="py-6 px-8 text-center">
           <Typography
             variant="h6"
@@ -47,49 +49,53 @@ export function Sidenav({ brandImg, brandName, routes }) {
         </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>
-        ))}
+        {routes
+          .filter((route) => route.layout !== "auth") // 🔹 auth sayfalarını gizle
+          .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
+                .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>
   );
@@ -106,6 +112,6 @@ Sidenav.propTypes = {
   routes: PropTypes.arrayOf(PropTypes.object).isRequired,
 };
 
-Sidenav.displayName = "/src/widgets/layout/sidnave.jsx";
+Sidenav.displayName = "/src/widgets/layout/sidenav.jsx";
 
 export default Sidenav;