src/app/providers/routing.tsx

@@ -4,6 +4,7 @@ import { HomePage } from "@/pages/home.page";
 import { SecondaryPage } from "@/pages/secondary.page";
 import { AuthPage } from "@/pages/AuthPage";
 import { CreateOrganizationPage } from "@/pages/CreateOrganizationPage";
+import { OrganizationPage } from "@/pages/OrganizationPage";
 import { ProtectedRoute } from "./helper/protected.route";
 
 export const Routing = () => {
@@ -29,6 +30,14 @@ export const Routing = () => {
             </ProtectedRoute>
           }
         />
+        <Route
+          path="/organization"
+          element={
+            <ProtectedRoute>
+              <OrganizationPage />
+            </ProtectedRoute>
+          }
+        />
         <Route
           path="/secondary"
           element={

src/modules/auth/api/auth.service.ts

@@ -1,59 +1,343 @@
-import { apiService } from "@/shared/api/api.service";
 import type {
   LoginCredentials,
   RegisterData,
   AuthResponse,
   OrganizationCreateData,
   OrganizationResponse,
+  OrganizationMember,
 } from "../types/auth.types";
 
+// Заглушка для хранения данных в localStorage
+const MOCK_USERS_KEY = "mock_users";
+const MOCK_ORGS_KEY = "mock_organizations";
+const MOCK_MEMBERS_KEY = "mock_members";
+
+const getMockUsers = () => {
+  const users = localStorage.getItem(MOCK_USERS_KEY);
+  if (!users) {
+    const defaultUsers = [
+      {
+        id: 1,
+        username: "admin",
+        email: "admin@example.com",
+        password: "admin123",
+        first_name: "Admin",
+        last_name: "User",
+      },
+    ];
+    localStorage.setItem(MOCK_USERS_KEY, JSON.stringify(defaultUsers));
+    return defaultUsers;
+  }
+  return JSON.parse(users);
+};
+
+const getMockOrganizations = () => {
+  const orgs = localStorage.getItem(MOCK_ORGS_KEY);
+  if (!orgs) {
+    return [];
+  }
+  return JSON.parse(orgs);
+};
+
+const getMockMembers = () => {
+  const members = localStorage.getItem(MOCK_MEMBERS_KEY);
+  if (!members) {
+    return [];
+  }
+  return JSON.parse(members);
+};
+
 export const authService = {
   async login(credentials: LoginCredentials): Promise<AuthResponse> {
-    const formData = new URLSearchParams();
+    return new Promise((resolve, reject) => {
-    formData.append("username", credentials.username);
+      setTimeout(() => {
-    formData.append("password", credentials.password);
+        const users = getMockUsers();
+        const user = users.find(
+          (u: any) =>
+            u.username === credentials.username &&
+            u.password === credentials.password,
+        );
 
-    return apiService.post<AuthResponse>("/auth/login", formData, {
+        if (user) {
-      headers: {
+          resolve({
-        "Content-Type": "application/x-www-form-urlencoded",
+            access_token: `mock_token_${user.id}_${Date.now()}`,
-      },
+            token_type: "bearer",
+            user: {
+              id: user.id,
+              username: user.username,
+              email: user.email,
+              first_name: user.first_name,
+              last_name: user.last_name,
+            },
+          });
+        } else {
+          reject({
+            response: {
+              data: { message: "Неверное имя пользователя или пароль" },
+            },
+          });
+        }
+      }, 500);
     });
   },
 
   async register(
     data: Omit<RegisterData, "confirmPassword">,
   ): Promise<AuthResponse> {
-    return apiService.post<AuthResponse>("/auth/register", {
+    return new Promise((resolve, reject) => {
-      username: data.username,
+      setTimeout(() => {
-      email: data.email,
+        const users = getMockUsers();
-      password: data.password,
+        const existingUser = users.find(
-      first_name: data.first_name,
+          (u: any) => u.username === data.username,
-      last_name: data.last_name,
+        );
+
+        if (existingUser) {
+          reject({
+            response: {
+              data: { message: "Пользователь с таким именем уже существует" },
+            },
+          });
+          return;
+        }
+
+        const existingEmail = users.find((u: any) => u.email === data.email);
+        if (existingEmail) {
+          reject({
+            response: {
+              data: { message: "Пользователь с таким email уже существует" },
+            },
+          });
+          return;
+        }
+
+        const newUser = {
+          id: users.length + 1,
+          username: data.username,
+          email: data.email,
+          password: data.password,
+          first_name: data.first_name,
+          last_name: data.last_name,
+        };
+
+        users.push(newUser);
+        localStorage.setItem(MOCK_USERS_KEY, JSON.stringify(users));
+
+        resolve({
+          access_token: `mock_token_${newUser.id}_${Date.now()}`,
+          token_type: "bearer",
+          user: {
+            id: newUser.id,
+            username: newUser.username,
+            email: newUser.email,
+            first_name: newUser.first_name,
+            last_name: newUser.last_name,
+          },
+        });
+      }, 500);
     });
   },
 
   async createOrganization(
     data: OrganizationCreateData,
   ): Promise<OrganizationResponse> {
-    const formData = new FormData();
+    return new Promise((resolve) => {
-    formData.append("name", data.name);
+      setTimeout(() => {
-    if (data.logo) {
+        const orgs = getMockOrganizations();
-      formData.append("logo", data.logo);
+        const token = this.getToken();
-    }
+        const userId = token ? parseInt(token.split("_")[1]) : 1;
 
-    return apiService.post<OrganizationResponse>("/organizations", formData, {
+        const newOrg = {
-      headers: {
+          id: orgs.length + 1,
-        "Content-Type": "multipart/form-data",
+          name: data.name,
-      },
+          logo_url: data.logo ? URL.createObjectURL(data.logo) : undefined,
+          created_at: new Date().toISOString(),
+          owner_id: userId,
+        };
+
+        orgs.push(newOrg);
+        localStorage.setItem(MOCK_ORGS_KEY, JSON.stringify(orgs));
+
+        // Добавляем владельца в члены организации
+        const members = getMockMembers();
+        const newMember = {
+          id: members.length + 1,
+          organization_id: newOrg.id,
+          user_id: userId,
+          username: "temp_username",
+          email: "temp_email",
+          first_name: "temp_first",
+          last_name: "temp_last",
+          role: "owner",
+          joined_at: new Date().toISOString(),
+        };
+
+        // Получаем данные пользователя
+        const users = getMockUsers();
+        const user = users.find((u: any) => u.id === userId);
+        if (user) {
+          newMember.username = user.username;
+          newMember.email = user.email;
+          newMember.first_name = user.first_name;
+          newMember.last_name = user.last_name;
+        }
+
+        members.push(newMember);
+        localStorage.setItem(MOCK_MEMBERS_KEY, JSON.stringify(members));
+
+        resolve(newOrg);
+      }, 500);
+    });
+  },
+
+  async getOrganizations(): Promise<OrganizationResponse[]> {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        const orgs = getMockOrganizations();
+        resolve(orgs);
+      }, 300);
+    });
+  },
+
+  async getOrganizationMembers(
+    organizationId: number,
+  ): Promise<OrganizationMember[]> {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        const members = getMockMembers();
+        const orgMembers = members.filter(
+          (m: any) => m.organization_id === organizationId,
+        );
+        resolve(orgMembers);
+      }, 300);
+    });
+  },
+
+  async updateMemberRole(
+    organizationId: number,
+    userId: number,
+    newRole: string,
+  ): Promise<void> {
+    return new Promise((resolve, reject) => {
+      setTimeout(() => {
+        const members = getMockMembers();
+        const memberIndex = members.findIndex(
+          (m: any) =>
+            m.organization_id === organizationId && m.user_id === userId,
+        );
+
+        if (memberIndex !== -1) {
+          members[memberIndex].role = newRole;
+          localStorage.setItem(MOCK_MEMBERS_KEY, JSON.stringify(members));
+          resolve();
+        } else {
+          reject({ response: { data: { message: "Участник не найден" } } });
+        }
+      }, 500);
+    });
+  },
+
+  async removeMember(organizationId: number, userId: number): Promise<void> {
+    return new Promise((resolve, reject) => {
+      setTimeout(() => {
+        const members = getMockMembers();
+        const filteredMembers = members.filter(
+          (m: any) =>
+            !(m.organization_id === organizationId && m.user_id === userId),
+        );
+
+        if (filteredMembers.length !== members.length) {
+          localStorage.setItem(
+            MOCK_MEMBERS_KEY,
+            JSON.stringify(filteredMembers),
+          );
+          resolve();
+        } else {
+          reject({ response: { data: { message: "Участник не найден" } } });
+        }
+      }, 500);
+    });
+  },
+
+  async addMember(
+    organizationId: number,
+    email: string,
+    role: string,
+  ): Promise<OrganizationMember> {
+    return new Promise((resolve, reject) => {
+      setTimeout(() => {
+        const users = getMockUsers();
+        const user = users.find((u: any) => u.email === email);
+
+        if (!user) {
+          reject({
+            response: {
+              data: { message: "Пользователь с таким email не найден" },
+            },
+          });
+          return;
+        }
+
+        const members = getMockMembers();
+        const existingMember = members.find(
+          (m: any) =>
+            m.organization_id === organizationId && m.user_id === user.id,
+        );
+
+        if (existingMember) {
+          reject({
+            response: {
+              data: {
+                message: "Пользователь уже является участником организации",
+              },
+            },
+          });
+          return;
+        }
+
+        const newMember = {
+          id: members.length + 1,
+          organization_id: organizationId,
+          user_id: user.id,
+          username: user.username,
+          email: user.email,
+          first_name: user.first_name,
+          last_name: user.last_name,
+          role: role,
+          joined_at: new Date().toISOString(),
+        };
+
+        members.push(newMember);
+        localStorage.setItem(MOCK_MEMBERS_KEY, JSON.stringify(members));
+
+        resolve(newMember);
+      }, 500);
     });
   },
 
   async getCurrentUser(): Promise<AuthResponse["user"]> {
-    return apiService.get<AuthResponse["user"]>("/users/me");
+    return new Promise((resolve, reject) => {
-  },
+      const token = this.getToken();
+      if (!token) {
+        reject({ response: { data: { message: "Не авторизован" } } });
+        return;
+      }
 
-  async getOrganizations(): Promise<OrganizationResponse[]> {
+      const userId = parseInt(token.split("_")[1]);
-    return apiService.get<OrganizationResponse[]>("/organizations");
+      const users = getMockUsers();
+      const user = users.find((u: any) => u.id === userId);
+
+      if (user) {
+        resolve({
+          id: user.id,
+          username: user.username,
+          email: user.email,
+          first_name: user.first_name,
+          last_name: user.last_name,
+        });
+      } else {
+        reject({ response: { data: { message: "Пользователь не найден" } } });
+      }
+    });
   },
 
   logout(): void {

src/modules/auth/hooks/useAuth.ts

@@ -6,6 +6,7 @@ import type {
   LoginCredentials,
   RegisterData,
   OrganizationCreateData,
+  OrganizationMember,
 } from "../types/auth.types";
 
 export const useAuth = () => {
@@ -20,7 +21,6 @@ export const useAuth = () => {
     if (result) {
       authService.saveAuthData(result.access_token, result.user);
 
-      // Проверяем, есть ли уже организация
       const orgs = await request(() => authService.getOrganizations());
       if (orgs && orgs.length > 0) {
         authService.saveOrganization(orgs[0]);

src/modules/auth/types/auth.types.ts

@@ -36,3 +36,14 @@ export interface OrganizationResponse {
   created_at: string;
   owner_id: number;
 }
+
+export interface OrganizationMember {
+  id: number;
+  user_id: number;
+  username: string;
+  email: string;
+  first_name: string;
+  last_name: string;
+  role: "owner" | "admin" | "member";
+  joined_at: string;
+}

src/modules/organization/components/OrganizationMembers.tsx

@@ -0,0 +1,307 @@
+import React, { useState } from "react";
+import { useOrganization } from "../hooks/useOrganization";
+
+export const OrganizationMembers = () => {
+  const { members, isLoading, updateMemberRole, removeMember, addMember } =
+    useOrganization();
+  const [showAddModal, setShowAddModal] = useState(false);
+  const [newMemberEmail, setNewMemberEmail] = useState("");
+  const [newMemberRole, setNewMemberRole] = useState<"admin" | "member">(
+    "member",
+  );
+  const [actionLoading, setActionLoading] = useState<number | null>(null);
+
+  const handleRoleChange = async (userId: number, newRole: string) => {
+    setActionLoading(userId);
+    await updateMemberRole(userId, newRole);
+    setActionLoading(null);
+  };
+
+  const handleRemoveMember = async (userId: number, memberName: string) => {
+    if (
+      confirm(
+        `Вы уверены, что хотите удалить пользователя "${memberName}" из организации?`,
+      )
+    ) {
+      setActionLoading(userId);
+      await removeMember(userId);
+      setActionLoading(null);
+    }
+  };
+
+  const handleAddMember = async (e: React.FormEvent) => {
+    e.preventDefault();
+    const success = await addMember(newMemberEmail, newMemberRole);
+    if (success) {
+      setShowAddModal(false);
+      setNewMemberEmail("");
+      setNewMemberRole("member");
+    }
+  };
+
+  const getRoleLabel = (role: string) => {
+    switch (role) {
+      case "owner":
+        return "Владелец";
+      case "admin":
+        return "Администратор";
+      case "member":
+        return "Участник";
+      default:
+        return role;
+    }
+  };
+
+  const getRoleColor = (role: string) => {
+    switch (role) {
+      case "owner":
+        return "text-yellow-600 dark:text-yellow-400";
+      case "admin":
+        return "text-blue-600 dark:text-blue-400";
+      case "member":
+        return "text-green-600 dark:text-green-400";
+      default:
+        return "";
+    }
+  };
+
+  if (isLoading && members.length === 0) {
+    return (
+      <div className="flex justify-center py-12">
+        <div style={{ color: "var(--text-secondary)" }}>
+          Загрузка участников...
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div className="flex justify-between items-center mb-6">
+        <h2
+          className="text-2xl font-bold"
+          style={{ color: "var(--text-primary)" }}
+        >
+          Участники организации
+        </h2>
+        <button
+          onClick={() => setShowAddModal(true)}
+          className="px-4 py-2 rounded-lg font-medium transition-all transform hover:scale-[1.02] active:scale-[0.98]"
+          style={{
+            backgroundColor: "var(--accent)",
+            color: "var(--button-primary-text)",
+          }}
+        >
+          + Добавить участника
+        </button>
+      </div>
+
+      <div className="overflow-x-auto">
+        <table className="w-full">
+          <thead>
+            <tr className="border-b" style={{ borderColor: "var(--border)" }}>
+              <th
+                className="text-left py-3 px-4"
+                style={{ color: "var(--text-secondary)" }}
+              >
+                Имя
+              </th>
+              <th
+                className="text-left py-3 px-4"
+                style={{ color: "var(--text-secondary)" }}
+              >
+                Email
+              </th>
+              <th
+                className="text-left py-3 px-4"
+                style={{ color: "var(--text-secondary)" }}
+              >
+                Роль
+              </th>
+              <th
+                className="text-left py-3 px-4"
+                style={{ color: "var(--text-secondary)" }}
+              >
+                Действия
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {members.map((member) => (
+              <tr
+                key={member.id}
+                className="border-b"
+                style={{ borderColor: "var(--border)" }}
+              >
+                <td
+                  className="py-3 px-4"
+                  style={{ color: "var(--text-primary)" }}
+                >
+                  {member.first_name} {member.last_name}
+                  <div
+                    className="text-xs"
+                    style={{ color: "var(--text-muted)" }}
+                  >
+                    @{member.username}
+                  </div>
+                </td>
+                <td
+                  className="py-3 px-4"
+                  style={{ color: "var(--text-primary)" }}
+                >
+                  {member.email}
+                </td>
+                <td className="py-3 px-4">
+                  {member.role === "owner" ? (
+                    <span
+                      className={`font-medium ${getRoleColor(member.role)}`}
+                    >
+                      {getRoleLabel(member.role)}
+                    </span>
+                  ) : (
+                    <select
+                      value={member.role}
+                      onChange={(e) =>
+                        handleRoleChange(member.user_id, e.target.value)
+                      }
+                      disabled={actionLoading === member.user_id}
+                      className="px-2 py-1 rounded border focus:outline-none focus:ring-2"
+                      style={{
+                        backgroundColor: "var(--input-bg)",
+                        color: "var(--text-primary)",
+                        borderColor: "var(--border)",
+                        "--tw-ring-color": "var(--accent)",
+                      }}
+                    >
+                      <option value="admin">{getRoleLabel("admin")}</option>
+                      <option value="member">{getRoleLabel("member")}</option>
+                    </select>
+                  )}
+                </td>
+                <td className="py-3 px-4">
+                  {member.role !== "owner" && (
+                    <button
+                      onClick={() =>
+                        handleRemoveMember(
+                          member.user_id,
+                          `${member.first_name} ${member.last_name}`,
+                        )
+                      }
+                      disabled={actionLoading === member.user_id}
+                      className="px-3 py-1 rounded text-sm transition-all hover:scale-105 disabled:opacity-50"
+                      style={{
+                        backgroundColor: "var(--button-danger)",
+                        color: "var(--button-danger-text)",
+                      }}
+                    >
+                      {actionLoading === member.user_id ? "..." : "Удалить"}
+                    </button>
+                  )}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      {members.length === 0 && !isLoading && (
+        <div
+          className="text-center py-12"
+          style={{ color: "var(--text-secondary)" }}
+        >
+          В организации пока нет участников
+        </div>
+      )}
+
+      {showAddModal && (
+        <div className="fixed inset-0 bg-[#00000055] bg-opacity-50 flex items-center justify-center z-50">
+          <div
+            className="rounded-2xl p-6 max-w-md w-full mx-4"
+            style={{
+              backgroundColor: "var(--card-bg)",
+              boxShadow: `0 20px 25px -5px var(--shadow-color)`,
+            }}
+          >
+            <h3
+              className="text-xl font-bold mb-4"
+              style={{ color: "var(--text-primary)" }}
+            >
+              Добавить участника
+            </h3>
+            <form onSubmit={handleAddMember}>
+              <div className="mb-4">
+                <label
+                  className="block text-sm font-medium mb-2"
+                  style={{ color: "var(--text-secondary)" }}
+                >
+                  Email пользователя
+                </label>
+                <input
+                  type="email"
+                  value={newMemberEmail}
+                  onChange={(e) => setNewMemberEmail(e.target.value)}
+                  className="w-full px-4 py-2 rounded-lg border focus:outline-none focus:ring-2"
+                  style={{
+                    backgroundColor: "var(--input-bg)",
+                    color: "var(--text-primary)",
+                    borderColor: "var(--border)",
+                    "--tw-ring-color": "var(--accent)",
+                  }}
+                  required
+                  placeholder="user@example.com"
+                />
+              </div>
+              <div className="mb-6">
+                <label
+                  className="block text-sm font-medium mb-2"
+                  style={{ color: "var(--text-secondary)" }}
+                >
+                  Роль
+                </label>
+                <select
+                  value={newMemberRole}
+                  onChange={(e) =>
+                    setNewMemberRole(e.target.value as "admin" | "member")
+                  }
+                  className="w-full px-4 py-2 rounded-lg border focus:outline-none focus:ring-2"
+                  style={{
+                    backgroundColor: "var(--input-bg)",
+                    color: "var(--text-primary)",
+                    borderColor: "var(--border)",
+                    "--tw-ring-color": "var(--accent)",
+                  }}
+                >
+                  <option value="admin">Администратор</option>
+                  <option value="member">Участник</option>
+                </select>
+              </div>
+              <div className="flex gap-3">
+                <button
+                  type="button"
+                  onClick={() => setShowAddModal(false)}
+                  className="flex-1 py-2 px-4 rounded-lg font-medium transition-all"
+                  style={{
+                    backgroundColor: "var(--bg-secondary)",
+                    color: "var(--text-secondary)",
+                  }}
+                >
+                  Отмена
+                </button>
+                <button
+                  type="submit"
+                  className="flex-1 py-2 px-4 rounded-lg font-medium transition-all transform hover:scale-[1.02]"
+                  style={{
+                    backgroundColor: "var(--accent)",
+                    color: "var(--button-primary-text)",
+                  }}
+                >
+                  Добавить
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

src/modules/organization/hooks/useOrganization.ts

@@ -0,0 +1,82 @@
+import { useState, useEffect } from "react";
+import { authService } from "@/modules/auth/api/auth.service";
+import { useApi } from "@/shared/api/hooks/use.api";
+import type { OrganizationMember } from "@/modules/auth/types/auth.types";
+
+export const useOrganization = () => {
+  const { isLoading, error, request } = useApi();
+  const [members, setMembers] = useState<OrganizationMember[]>([]);
+  const [organization, setOrganization] = useState(
+    authService.getCurrentOrganization(),
+  );
+
+  const loadMembers = async () => {
+    if (organization) {
+      const result = await request(() =>
+        authService.getOrganizationMembers(organization.id),
+      );
+      if (result) {
+        setMembers(result);
+      }
+    }
+  };
+
+  useEffect(() => {
+    loadMembers();
+  }, [organization]);
+
+  const updateMemberRole = async (userId: number, newRole: string) => {
+    if (organization) {
+      const result = await request(() =>
+        authService.updateMemberRole(organization.id, userId, newRole),
+      );
+      if (result !== undefined) {
+        await loadMembers();
+        return true;
+      }
+    }
+    return false;
+  };
+
+  const removeMember = async (userId: number) => {
+    if (organization) {
+      const result = await request(() =>
+        authService.removeMember(organization.id, userId),
+      );
+      if (result !== undefined) {
+        await loadMembers();
+        return true;
+      }
+    }
+    return false;
+  };
+
+  const addMember = async (email: string, role: string) => {
+    if (organization) {
+      const result = await request(() =>
+        authService.addMember(organization.id, email, role),
+      );
+      if (result) {
+        await loadMembers();
+        return true;
+      }
+    }
+    return false;
+  };
+
+  const refreshOrganization = () => {
+    setOrganization(authService.getCurrentOrganization());
+  };
+
+  return {
+    members,
+    organization,
+    isLoading,
+    error,
+    updateMemberRole,
+    removeMember,
+    addMember,
+    refreshOrganization,
+    loadMembers,
+  };
+};

src/pages/OrganizationPage.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+import { ThemeToggle } from "@/modules/theme-changer/ui/Theme.toggle";
+import { OrganizationMembers } from "@/modules/organization/components/OrganizationMembers";
+import { useAuth } from "@/modules/auth/hooks/useAuth";
+import { Navigate, useNavigate } from "react-router-dom";
+import { authService } from "@/modules/auth/api/auth.service";
+
+export const OrganizationPage = () => {
+  const { isAuthenticated, hasOrganization } = useAuth();
+  const navigate = useNavigate();
+  const organization = authService.getCurrentOrganization();
+
+  if (!isAuthenticated) {
+    return <Navigate to="/" replace />;
+  }
+
+  if (!hasOrganization) {
+    return <Navigate to="/create-organization" replace />;
+  }
+
+  return (
+    <div
+      className="min-h-screen transition-theme"
+      style={{ backgroundColor: "var(--bg-primary)" }}
+    >
+      <div className="absolute top-4 right-4">
+        <ThemeToggle />
+      </div>
+
+      <div className="container mx-auto px-4 py-8">
+        <div className="mb-8">
+          <button
+            onClick={() => navigate("/home")}
+            className="mb-4 inline-flex items-center gap-2 text-sm transition-colors hover:underline"
+            style={{ color: "var(--link)" }}
+          >
+            ← Назад
+          </button>
+
+          <div className="flex items-center gap-4">
+            {organization?.logo_url && (
+              <img
+                src={organization.logo_url}
+                alt={organization.name}
+                className="w-16 h-16 rounded-full object-cover"
+              />
+            )}
+            <div>
+              <h1
+                className="text-3xl font-bold"
+                style={{ color: "var(--text-primary)" }}
+              >
+                {organization?.name}
+              </h1>
+              <p className="text-sm" style={{ color: "var(--text-secondary)" }}>
+                Управление участниками организации
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div
+          className="rounded-2xl p-6"
+          style={{
+            backgroundColor: "var(--card-bg)",
+            boxShadow: `0 4px 6px -1px var(--shadow-color)`,
+          }}
+        >
+          <OrganizationMembers />
+        </div>
+      </div>
+    </div>
+  );
+};

src/pages/home.page.tsx

@@ -1,13 +1,47 @@
 import { ThemeToggle } from "@/modules/theme-changer/ui/Theme.toggle";
+import { useNavigate } from "react-router-dom";
+import { useAuth } from "@/modules/auth/hooks/useAuth";
 
 export const HomePage = () => {
+  const navigate = useNavigate();
+  const { logout } = useAuth();
+
   return (
     <div
       style={{ backgroundColor: "var(--bg-primary)" }}
-      className="min-h-screen flex items-center justify-center p-4"
+      className="min-h-screen p-4"
     >
-      <ThemeToggle />
+      <div className="flex justify-between items-center mb-8">
-      Домашняя
+        <ThemeToggle />
+        <div className="flex gap-4">
+          <button
+            onClick={() => navigate("/organization")}
+            className="px-4 py-2 rounded-lg font-medium transition-all"
+            style={{
+              backgroundColor: "var(--accent)",
+              color: "var(--button-primary-text)",
+            }}
+          >
+            Управление организацией
+          </button>
+          <button
+            onClick={logout}
+            className="px-4 py-2 rounded-lg font-medium transition-all"
+            style={{
+              backgroundColor: "var(--button-danger)",
+              color: "var(--button-danger-text)",
+            }}
+          >
+            Выйти
+          </button>
+        </div>
+      </div>
+
+      <div className="flex items-center justify-center">
+        <h1 className="text-2xl" style={{ color: "var(--text-primary)" }}>
+          Добро пожаловать в IPS Manager
+        </h1>
+      </div>
     </div>
   );
 };