diff --git a/WebServices/client-frontend/src/apicalls/cookies/token.tsx b/WebServices/client-frontend/src/apicalls/cookies/token.tsx
index 194472b..92aa9db 100644
--- a/WebServices/client-frontend/src/apicalls/cookies/token.tsx
+++ b/WebServices/client-frontend/src/apicalls/cookies/token.tsx
@@ -17,14 +17,14 @@ async function checkAccessTokenIsValid() {
 }
 
 async function retrievePageList() {
-  const response = await fetchDataWithToken(siteUrls, {}, "GET", false);
+  const response: any = await fetchDataWithToken(siteUrls, {}, "GET", false);
   return response?.status === 200 || response?.status === 202
     ? response.data?.sites
     : null;
 }
 
-async function retrievePagebyUrl(pageUrl: string) {
-  const response = await fetchDataWithToken(
+async function retrieveApplicationbyUrl(pageUrl: string) {
+  const response: any = await fetchDataWithToken(
     pageValid,
     {
       page_url: pageUrl,
@@ -142,7 +142,7 @@ export {
   retrieveUserType,
   retrieveAccessObjects,
   retrieveUserSelection,
-  retrievePagebyUrl,
+  retrieveApplicationbyUrl,
   retrievePageList,
   // retrieveavailablePages,
 };
diff --git a/WebServices/client-frontend/src/app/(AuthLayout)/auth/login/page.tsx b/WebServices/client-frontend/src/app/(AuthLayout)/auth/login/page.tsx
index 2d20e55..5d6e483 100644
--- a/WebServices/client-frontend/src/app/(AuthLayout)/auth/login/page.tsx
+++ b/WebServices/client-frontend/src/app/(AuthLayout)/auth/login/page.tsx
@@ -1,16 +1,6 @@
-import React from "react";
-import Login from "@/components/auth/login";
-import { Metadata } from "next";
+'use server';
+import Login from "@/webPages/auth/Login/page";
 
-export const metadata: Metadata = {
-  title: "WAG Login",
-  description: "Login to WAG system",
-};
+const LoginPage = async () => { return <Login language="en" /> };
 
-export default function LoginPage() {
-  return (
-    <>
-      <Login />
-    </>
-  );
-}
+export default LoginPage;
diff --git a/WebServices/client-frontend/src/app/(AuthLayout)/auth/select/page.tsx b/WebServices/client-frontend/src/app/(AuthLayout)/auth/select/page.tsx
index d079ba3..23f102f 100644
--- a/WebServices/client-frontend/src/app/(AuthLayout)/auth/select/page.tsx
+++ b/WebServices/client-frontend/src/app/(AuthLayout)/auth/select/page.tsx
@@ -5,38 +5,17 @@ import {
   retrieveUserType,
 } from "@/apicalls/cookies/token";
 import { redirect } from "next/navigation";
-import LoginEmployee from "@/components/auth/LoginEmployee";
-import LoginOccupant from "@/components/auth/LoginOccupant";
+import Select from "@/webPages/auth/Select/page";
 
-async function SelectPage() {
+const SelectPage = async () => {
   const token_is_valid = await checkAccessTokenIsValid();
   const selection = await retrieveUserType();
-  console.log("selection", selection);
-
   const isEmployee = selection?.userType == "employee";
   const isOccupant = selection?.userType == "occupant";
-
   const selectionList = selection?.selectionList;
 
-  if (!selectionList || !token_is_valid) {
-    redirect("/auth/login");
-  }
-
-  return (
-    <>
-      <div className="flex flex-col items-center justify-center h-screen">
-        <div className="flex flex-col items-center justify-center">
-          {isEmployee && Array.isArray(selectionList) && (
-            <LoginEmployee selectionList={selectionList} />
-          )}
-
-          {isOccupant && !Array.isArray(selectionList) && (
-            <LoginOccupant selectionList={selectionList} />
-          )}
-        </div>
-      </div>
-    </>
-  );
+  if (!selectionList || !token_is_valid) { redirect("/auth/login") }
+  return <Select selectionList={selectionList} isEmployee={isEmployee} isOccupant={isOccupant} language={"en"} />
 }
 
 export default SelectPage;
diff --git a/WebServices/client-frontend/src/app/(DashboardLayout)/annual/meeting/close/page.tsx b/WebServices/client-frontend/src/app/(DashboardLayout)/annual/meeting/close/page.tsx
index fc4265a..a9ddae8 100644
--- a/WebServices/client-frontend/src/app/(DashboardLayout)/annual/meeting/close/page.tsx
+++ b/WebServices/client-frontend/src/app/(DashboardLayout)/annual/meeting/close/page.tsx
@@ -1,51 +1,27 @@
 "use server";
 import React from "react";
-import LeftMenu from "@/components/menu/leftMenu";
-import { retrievePageList, retrievePagebyUrl } from "@/apicalls/cookies/token";
-import { retrievePage } from "@/components/NavigatePages";
+import DashboardLayout from "@/components/layouts/DashboardLayout";
+import { useDashboardPage } from "@/components/common/hooks/useDashboardPage";
 
 export default async function Dashboard({
   searchParams,
 }: {
   searchParams: Promise<{ [key: string]: string | undefined }>;
 }) {
-  const siteUrlsList = (await retrievePageList()) || [];
-  const lang = "tr";
-  const searchParamsInstance = await searchParams;
-  const activePage = "/annual/meeting/close";
-  const pageToDirect = await retrievePagebyUrl(activePage);
-  const PageComponent = retrievePage(pageToDirect);
+  const {
+    activePage,
+    searchParamsInstance,
+    lang,
+    PageComponent,
+    siteUrlsList,
+  } = await useDashboardPage({
+    pageUrl: "/annual/meeting/close",
+    searchParams
+  });
 
   return (
-    <>
-      <div className="min-h-screen min-w-screen flex h-screen w-screen overflow-hidden">
-        {/* Sidebar */}
-        <aside className="w-1/4 border-r p-4 overflow-y-auto">
-          <LeftMenu
-            pageUuidList={siteUrlsList}
-            lang={lang}
-            searchParams={searchParamsInstance}
-            pageSelected={activePage}
-          />
-        </aside>
-
-        {/* Main Content Area */}
-        <div className="flex flex-col w-3/4">
-          {/* Sticky Header */}
-          <header className="sticky top-0 bg-white shadow-md z-10 p-4 flex justify-between items-center">
-            <h1 className="text-2xl font-semibold">{activePage}</h1>
-            <div className="flex items-center space-x-4">
-              <input
-                type="text"
-                placeholder="Search..."
-                className="border px-3 py-2 rounded-lg"
-              />
-              <div className="w-10 h-10 bg-gray-300 rounded-full"></div>
-            </div>
-          </header>
-          <PageComponent lang={lang} queryParams={searchParamsInstance} />
-        </div>
-      </div>
-    </>
+    <DashboardLayout lang={lang} activePage={activePage} siteUrls={siteUrlsList} >
+      <PageComponent lang={lang} queryParams={searchParamsInstance} />
+    </DashboardLayout>
   );
 }
diff --git a/WebServices/client-frontend/src/app/(DashboardLayout)/annual/meeting/page.tsx b/WebServices/client-frontend/src/app/(DashboardLayout)/annual/meeting/page.tsx
index da8f2c9..ab99d27 100644
--- a/WebServices/client-frontend/src/app/(DashboardLayout)/annual/meeting/page.tsx
+++ b/WebServices/client-frontend/src/app/(DashboardLayout)/annual/meeting/page.tsx
@@ -1,51 +1,27 @@
 "use server";
 import React from "react";
-import LeftMenu from "@/components/menu/leftMenu";
-import { retrievePageList, retrievePagebyUrl } from "@/apicalls/cookies/token";
-import { retrievePage } from "@/components/NavigatePages";
+import DashboardLayout from "@/components/layouts/DashboardLayout";
+import { useDashboardPage } from "@/components/common/hooks/useDashboardPage";
 
 export default async function Dashboard({
   searchParams,
 }: {
   searchParams: Promise<{ [key: string]: string | undefined }>;
 }) {
-  const siteUrlsList = (await retrievePageList()) || [];
-  const lang = "tr";
-  const searchParamsInstance = await searchParams;
-  const activePage = "/annual/meeting";
-  const pageToDirect = await retrievePagebyUrl(activePage);
-  const PageComponent = retrievePage(pageToDirect);
+  const {
+    activePage,
+    searchParamsInstance,
+    lang,
+    PageComponent,
+    siteUrlsList,
+  } = await useDashboardPage({
+    pageUrl: "/annual/meeting",
+    searchParams
+  });
 
   return (
-    <>
-      <div className="min-h-screen min-w-screen flex h-screen w-screen overflow-hidden">
-        {/* Sidebar */}
-        <aside className="w-1/4 border-r p-4 overflow-y-auto">
-          <LeftMenu
-            pageUuidList={siteUrlsList}
-            lang={lang}
-            searchParams={searchParamsInstance}
-            pageSelected={activePage}
-          />
-        </aside>
-
-        {/* Main Content Area */}
-        <div className="flex flex-col w-3/4">
-          {/* Sticky Header */}
-          <header className="sticky top-0 bg-white shadow-md z-10 p-4 flex justify-between items-center">
-            <h1 className="text-2xl font-semibold">{activePage}</h1>
-            <div className="flex items-center space-x-4">
-              <input
-                type="text"
-                placeholder="Search..."
-                className="border px-3 py-2 rounded-lg"
-              />
-              <div className="w-10 h-10 bg-gray-300 rounded-full"></div>
-            </div>
-          </header>
-          <PageComponent lang={lang} queryParams={searchParamsInstance} />
-        </div>
-      </div>
-    </>
+    <DashboardLayout lang={lang} activePage={activePage} siteUrls={siteUrlsList} >
+      <PageComponent lang={lang} queryParams={searchParamsInstance} />
+    </DashboardLayout>
   );
 }
diff --git a/WebServices/client-frontend/src/app/(DashboardLayout)/buildings/area/page.tsx b/WebServices/client-frontend/src/app/(DashboardLayout)/buildings/area/page.tsx
new file mode 100644
index 0000000..9173986
--- /dev/null
+++ b/WebServices/client-frontend/src/app/(DashboardLayout)/buildings/area/page.tsx
@@ -0,0 +1,27 @@
+"use server";
+import React from "react";
+import DashboardLayout from "@/components/layouts/DashboardLayout";
+import { useDashboardPage } from "@/components/common/hooks/useDashboardPage";
+
+export default async function Dashboard({
+  searchParams,
+}: {
+  searchParams: Promise<{ [key: string]: string | undefined }>;
+}) {
+  const {
+    activePage,
+    searchParamsInstance,
+    lang,
+    PageComponent,
+    siteUrlsList,
+  } = await useDashboardPage({
+    pageUrl: "/build/area",
+    searchParams
+  });
+
+  return (
+    <DashboardLayout lang={lang} activePage={activePage} siteUrls={siteUrlsList} >
+      <PageComponent lang={lang} queryParams={searchParamsInstance} />
+    </DashboardLayout>
+  );
+}
diff --git a/WebServices/client-frontend/src/app/(DashboardLayout)/buildings/page.tsx b/WebServices/client-frontend/src/app/(DashboardLayout)/buildings/page.tsx
new file mode 100644
index 0000000..a45f7a3
--- /dev/null
+++ b/WebServices/client-frontend/src/app/(DashboardLayout)/buildings/page.tsx
@@ -0,0 +1,27 @@
+"use server";
+import React from "react";
+import DashboardLayout from "@/components/layouts/DashboardLayout";
+import { useDashboardPage } from "@/components/common/hooks/useDashboardPage";
+
+export default async function Dashboard({
+  searchParams,
+}: {
+  searchParams: Promise<{ [key: string]: string | undefined }>;
+}) {
+  const {
+    activePage,
+    searchParamsInstance,
+    lang,
+    PageComponent,
+    siteUrlsList,
+  } = await useDashboardPage({
+    pageUrl: "/build",
+    searchParams
+  });
+
+  return (
+    <DashboardLayout lang={lang} activePage={activePage} siteUrls={siteUrlsList} >
+      <PageComponent lang={lang} queryParams={searchParamsInstance} />
+    </DashboardLayout>
+  );
+}
diff --git a/WebServices/client-frontend/src/app/(DashboardLayout)/dashboard/page.tsx b/WebServices/client-frontend/src/app/(DashboardLayout)/dashboard/page.tsx
index ec00dc8..c353ae8 100644
--- a/WebServices/client-frontend/src/app/(DashboardLayout)/dashboard/page.tsx
+++ b/WebServices/client-frontend/src/app/(DashboardLayout)/dashboard/page.tsx
@@ -1,38 +1,27 @@
 "use server";
 import React from "react";
-import { retrievePageList, retrievePagebyUrl } from "@/apicalls/cookies/token";
+import DashboardLayout from "@/components/layouts/DashboardLayout";
+import { useDashboardPage } from "@/components/common/hooks/useDashboardPage";
 
-import ClientMenu from "@/components/menu/menu";
-import Header from "@/components/header/Header";
-import retrievePageByUrlAndPageId from "@/components/navigator/retriever";
-
-export default async function DashboardLayout({
+export default async function Dashboard({
   searchParams,
 }: {
   searchParams: Promise<{ [key: string]: string | undefined }>;
 }) {
-  const activePage = "/dashboard";
-  const siteUrlsList = (await retrievePageList()) || [];
-  const pageToDirect = await retrievePagebyUrl(activePage);
-  const PageComponent = retrievePageByUrlAndPageId(pageToDirect, activePage);
-  const searchParamsInstance = await searchParams;
-  const lang = (searchParamsInstance?.lang as "en" | "tr") || "en";
+  const {
+    activePage,
+    searchParamsInstance,
+    lang,
+    PageComponent,
+    siteUrlsList,
+  } = await useDashboardPage({
+    pageUrl: "/dashboard",
+    searchParams
+  });
 
   return (
-    <>
-      <div className="min-h-screen min-w-screen flex h-screen w-screen overflow-hidden">
-        {/* Sidebar */}
-        <aside className="w-1/4 border-r p-4 overflow-y-auto">
-          <ClientMenu siteUrls={siteUrlsList} lang={lang} />
-        </aside>
-
-        {/* Main Content Area */}
-        <div className="flex flex-col w-3/4">
-          {/* Header Component */}
-          <Header lang={lang} />
-          <PageComponent lang={lang} queryParams={searchParamsInstance} />
-        </div>
-      </div>
-    </>
+    <DashboardLayout lang={lang} activePage={activePage} siteUrls={siteUrlsList} >
+      <PageComponent lang={lang} queryParams={searchParamsInstance} />
+    </DashboardLayout>
   );
 }
diff --git a/WebServices/client-frontend/src/app/(DashboardLayout)/emergency/meeting/close/page.tsx b/WebServices/client-frontend/src/app/(DashboardLayout)/emergency/meeting/close/page.tsx
index c24cb00..3d69095 100644
--- a/WebServices/client-frontend/src/app/(DashboardLayout)/emergency/meeting/close/page.tsx
+++ b/WebServices/client-frontend/src/app/(DashboardLayout)/emergency/meeting/close/page.tsx
@@ -1,51 +1,27 @@
 "use server";
 import React from "react";
-import LeftMenu from "@/components/menu/leftMenu";
-import { retrievePageList, retrievePagebyUrl } from "@/apicalls/cookies/token";
-import { retrievePage } from "@/components/NavigatePages";
+import DashboardLayout from "@/components/layouts/DashboardLayout";
+import { useDashboardPage } from "@/components/common/hooks/useDashboardPage";
 
 export default async function Dashboard({
   searchParams,
 }: {
   searchParams: Promise<{ [key: string]: string | undefined }>;
 }) {
-  const siteUrlsList = (await retrievePageList()) || [];
-  const lang = "tr";
-  const searchParamsInstance = await searchParams;
-  const activePage = "/emergency/meeting/close";
-  const pageToDirect = await retrievePagebyUrl(activePage);
-  const PageComponent = retrievePage(pageToDirect);
+  const {
+    activePage,
+    searchParamsInstance,
+    lang,
+    PageComponent,
+    siteUrlsList,
+  } = await useDashboardPage({
+    pageUrl: "/emergency/meeting/close",
+    searchParams
+  });
 
   return (
-    <>
-      <div className="min-h-screen min-w-screen flex h-screen w-screen overflow-hidden">
-        {/* Sidebar */}
-        <aside className="w-1/4 border-r p-4 overflow-y-auto">
-          <LeftMenu
-            pageUuidList={siteUrlsList}
-            lang={lang}
-            searchParams={searchParamsInstance}
-            pageSelected={activePage}
-          />
-        </aside>
-
-        {/* Main Content Area */}
-        <div className="flex flex-col w-3/4">
-          {/* Sticky Header */}
-          <header className="sticky top-0 bg-white shadow-md z-10 p-4 flex justify-between items-center">
-            <h1 className="text-2xl font-semibold">{activePage}</h1>
-            <div className="flex items-center space-x-4">
-              <input
-                type="text"
-                placeholder="Search..."
-                className="border px-3 py-2 rounded-lg"
-              />
-              <div className="w-10 h-10 bg-gray-300 rounded-full"></div>
-            </div>
-          </header>
-          <PageComponent lang={lang} queryParams={searchParamsInstance} />
-        </div>
-      </div>
-    </>
+    <DashboardLayout lang={lang} activePage={activePage} siteUrls={siteUrlsList} >
+      <PageComponent lang={lang} queryParams={searchParamsInstance} />
+    </DashboardLayout>
   );
 }
diff --git a/WebServices/client-frontend/src/app/(DashboardLayout)/emergency/meeting/page.tsx b/WebServices/client-frontend/src/app/(DashboardLayout)/emergency/meeting/page.tsx
index fdbab01..45a31b8 100644
--- a/WebServices/client-frontend/src/app/(DashboardLayout)/emergency/meeting/page.tsx
+++ b/WebServices/client-frontend/src/app/(DashboardLayout)/emergency/meeting/page.tsx
@@ -1,51 +1,27 @@
 "use server";
 import React from "react";
-import LeftMenu from "@/components/menu/leftMenu";
-import { retrievePageList, retrievePagebyUrl } from "@/apicalls/cookies/token";
-import { retrievePage } from "@/components/NavigatePages";
+import DashboardLayout from "@/components/layouts/DashboardLayout";
+import { useDashboardPage } from "@/components/common/hooks/useDashboardPage";
 
 export default async function Dashboard({
   searchParams,
 }: {
   searchParams: Promise<{ [key: string]: string | undefined }>;
 }) {
-  const siteUrlsList = (await retrievePageList()) || [];
-  const lang = "tr";
-  const searchParamsInstance = await searchParams;
-  const activePage = "/emergency/meeting";
-  const pageToDirect = await retrievePagebyUrl(activePage);
-  const PageComponent = retrievePage(pageToDirect);
+  const {
+    activePage,
+    searchParamsInstance,
+    lang,
+    PageComponent,
+    siteUrlsList,
+  } = await useDashboardPage({
+    pageUrl: "/emergency/meeting",
+    searchParams
+  });
 
   return (
-    <>
-      <div className="min-h-screen min-w-screen flex h-screen w-screen overflow-hidden">
-        {/* Sidebar */}
-        <aside className="w-1/4 border-r p-4 overflow-y-auto">
-          <LeftMenu
-            pageUuidList={siteUrlsList}
-            lang={lang}
-            searchParams={searchParamsInstance}
-            pageSelected={activePage}
-          />
-        </aside>
-
-        {/* Main Content Area */}
-        <div className="flex flex-col w-3/4">
-          {/* Sticky Header */}
-          <header className="sticky top-0 bg-white shadow-md z-10 p-4 flex justify-between items-center">
-            <h1 className="text-2xl font-semibold">{activePage}</h1>
-            <div className="flex items-center space-x-4">
-              <input
-                type="text"
-                placeholder="Search..."
-                className="border px-3 py-2 rounded-lg"
-              />
-              <div className="w-10 h-10 bg-gray-300 rounded-full"></div>
-            </div>
-          </header>
-          <PageComponent lang={lang} queryParams={searchParamsInstance} />
-        </div>
-      </div>
-    </>
+    <DashboardLayout lang={lang} activePage={activePage} siteUrls={siteUrlsList} >
+      <PageComponent lang={lang} queryParams={searchParamsInstance} />
+    </DashboardLayout>
   );
 }
diff --git a/WebServices/client-frontend/src/app/(DashboardLayout)/individual/page.tsx b/WebServices/client-frontend/src/app/(DashboardLayout)/individual/page.tsx
index 2c99949..320ecbc 100644
--- a/WebServices/client-frontend/src/app/(DashboardLayout)/individual/page.tsx
+++ b/WebServices/client-frontend/src/app/(DashboardLayout)/individual/page.tsx
@@ -8,20 +8,19 @@ export default async function Dashboard({
 }: {
   searchParams: Promise<{ [key: string]: string | undefined }>;
 }) {
-  // Use the enhanced dashboard hook to get all necessary data
   const {
     activePage,
     searchParamsInstance,
     lang,
     PageComponent,
-    siteUrlsList
+    siteUrlsList,
   } = await useDashboardPage({
     pageUrl: "/individual",
     searchParams
   });
 
   return (
-    <DashboardLayout lang={lang} activePage={activePage} siteUrls={siteUrlsList}>
+    <DashboardLayout lang={lang} activePage={activePage} siteUrls={siteUrlsList} >
       <PageComponent lang={lang} queryParams={searchParamsInstance} />
     </DashboardLayout>
   );
diff --git a/WebServices/client-frontend/src/app/(DashboardLayout)/management/accounting/page.tsx b/WebServices/client-frontend/src/app/(DashboardLayout)/management/accounting/page.tsx
index c1ae5aa..daee2a4 100644
--- a/WebServices/client-frontend/src/app/(DashboardLayout)/management/accounting/page.tsx
+++ b/WebServices/client-frontend/src/app/(DashboardLayout)/management/accounting/page.tsx
@@ -1,37 +1,27 @@
 "use server";
 import React from "react";
-import { retrievePageList, retrievePagebyUrl } from "@/apicalls/cookies/token";
-import retrievePageByUrlAndPageId from "@/components/navigator/retriever";
-import ClientMenu from "@/components/menu/menu";
-import Header from "@/components/header/Header";
+import DashboardLayout from "@/components/layouts/DashboardLayout";
+import { useDashboardPage } from "@/components/common/hooks/useDashboardPage";
 
 export default async function Dashboard({
   searchParams,
 }: {
   searchParams: Promise<{ [key: string]: string | undefined }>;
 }) {
-  const siteUrlsList = (await retrievePageList()) || [];
-  const lang = "tr";
-  const searchParamsInstance = await searchParams;
-  const activePage = "/management/accounting";
-  const pageToDirect = await retrievePagebyUrl(activePage);
-  const PageComponent = retrievePageByUrlAndPageId(activePage, pageToDirect);
+  const {
+    activePage,
+    searchParamsInstance,
+    lang,
+    PageComponent,
+    siteUrlsList,
+  } = await useDashboardPage({
+    pageUrl: "/management/accounting",
+    searchParams
+  });
 
   return (
-    <>
-      <div className="min-h-screen min-w-screen flex h-screen w-screen overflow-hidden">
-        {/* Sidebar */}
-        <aside className="w-1/4 border-r p-4 overflow-y-auto">
-          <ClientMenu lang={lang} siteUrls={siteUrlsList} />
-        </aside>
-
-        {/* Main Content Area */}
-        <div className="flex flex-col w-3/4">
-          {/* Sticky Header */}
-          <Header lang={lang} />
-          <PageComponent lang={lang} queryParams={searchParamsInstance} />
-        </div>
-      </div>
-    </>
+    <DashboardLayout lang={lang} activePage={activePage} siteUrls={siteUrlsList} >
+      <PageComponent lang={lang} queryParams={searchParamsInstance} />
+    </DashboardLayout>
   );
 }
diff --git a/WebServices/client-frontend/src/app/(DashboardLayout)/management/budget/page.tsx b/WebServices/client-frontend/src/app/(DashboardLayout)/management/budget/page.tsx
index c9b5db1..aa763f4 100644
--- a/WebServices/client-frontend/src/app/(DashboardLayout)/management/budget/page.tsx
+++ b/WebServices/client-frontend/src/app/(DashboardLayout)/management/budget/page.tsx
@@ -1,37 +1,27 @@
 "use server";
 import React from "react";
-import { retrievePageList, retrievePagebyUrl } from "@/apicalls/cookies/token";
-import retrievePageByUrlAndPageId from "@/components/navigator/retriever";
-import ClientMenu from "@/components/menu/menu";
-import Header from "@/components/header/Header";
+import DashboardLayout from "@/components/layouts/DashboardLayout";
+import { useDashboardPage } from "@/components/common/hooks/useDashboardPage";
 
 export default async function Dashboard({
   searchParams,
 }: {
   searchParams: Promise<{ [key: string]: string | undefined }>;
 }) {
-  const siteUrlsList = (await retrievePageList()) || [];
-  const lang = "tr";
-  const searchParamsInstance = await searchParams;
-  const activePage = "/management/budget";
-  const pageToDirect = await retrievePagebyUrl(activePage);
-  const PageComponent = retrievePageByUrlAndPageId(activePage, pageToDirect);
+  const {
+    activePage,
+    searchParamsInstance,
+    lang,
+    PageComponent,
+    siteUrlsList,
+  } = await useDashboardPage({
+    pageUrl: "/management/budget",
+    searchParams
+  });
 
   return (
-    <>
-      <div className="min-h-screen min-w-screen flex h-screen w-screen overflow-hidden">
-        {/* Sidebar */}
-        <aside className="w-1/4 border-r p-4 overflow-y-auto">
-          <ClientMenu lang={lang} siteUrls={siteUrlsList} />
-        </aside>
-
-        {/* Main Content Area */}
-        <div className="flex flex-col w-3/4">
-          {/* Sticky Header */}
-          <Header lang={lang} />
-          <PageComponent lang={lang} queryParams={searchParamsInstance} />
-        </div>
-      </div>
-    </>
+    <DashboardLayout lang={lang} activePage={activePage} siteUrls={siteUrlsList} >
+      <PageComponent lang={lang} queryParams={searchParamsInstance} />
+    </DashboardLayout>
   );
 }
diff --git a/WebServices/client-frontend/src/app/(DashboardLayout)/meeting/participation/page.tsx b/WebServices/client-frontend/src/app/(DashboardLayout)/meeting/participation/page.tsx
index 5fcda4a..d4fe465 100644
--- a/WebServices/client-frontend/src/app/(DashboardLayout)/meeting/participation/page.tsx
+++ b/WebServices/client-frontend/src/app/(DashboardLayout)/meeting/participation/page.tsx
@@ -1,52 +1,27 @@
 "use server";
 import React from "react";
-import LeftMenu from "@/components/menu/leftMenu";
-
-import { retrievePageList, retrievePagebyUrl } from "@/apicalls/cookies/token";
-import { retrievePage } from "@/components/NavigatePages";
+import DashboardLayout from "@/components/layouts/DashboardLayout";
+import { useDashboardPage } from "@/components/common/hooks/useDashboardPage";
 
 export default async function Dashboard({
   searchParams,
 }: {
   searchParams: Promise<{ [key: string]: string | undefined }>;
 }) {
-  const siteUrlsList = (await retrievePageList()) || [];
-  const lang = "tr";
-  const searchParamsInstance = await searchParams;
-  const activePage = "/meeting/participation";
-  const pageToDirect = await retrievePagebyUrl(activePage);
-  const PageComponent = retrievePage(pageToDirect);
+  const {
+    activePage,
+    searchParamsInstance,
+    lang,
+    PageComponent,
+    siteUrlsList,
+  } = await useDashboardPage({
+    pageUrl: "/meeting/participation",
+    searchParams
+  });
 
   return (
-    <>
-      <div className="min-h-screen min-w-screen flex h-screen w-screen overflow-hidden">
-        {/* Sidebar */}
-        <aside className="w-1/4 border-r p-4 overflow-y-auto">
-          <LeftMenu
-            pageUuidList={siteUrlsList}
-            lang={lang}
-            searchParams={searchParamsInstance}
-            pageSelected={activePage}
-          />
-        </aside>
-
-        {/* Main Content Area */}
-        <div className="flex flex-col w-3/4">
-          {/* Sticky Header */}
-          <header className="sticky top-0 bg-white shadow-md z-10 p-4 flex justify-between items-center">
-            <h1 className="text-2xl font-semibold">{activePage}</h1>
-            <div className="flex items-center space-x-4">
-              <input
-                type="text"
-                placeholder="Search..."
-                className="border px-3 py-2 rounded-lg"
-              />
-              <div className="w-10 h-10 bg-gray-300 rounded-full"></div>
-            </div>
-          </header>
-          <PageComponent lang={lang} queryParams={searchParamsInstance} />
-        </div>
-      </div>
-    </>
+    <DashboardLayout lang={lang} activePage={activePage} siteUrls={siteUrlsList} >
+      <PageComponent lang={lang} queryParams={searchParamsInstance} />
+    </DashboardLayout>
   );
 }
diff --git a/WebServices/client-frontend/src/app/(DashboardLayout)/template/page.tsx b/WebServices/client-frontend/src/app/(DashboardLayout)/template/page.tsx
index 9ada5ac..863e1ff 100644
--- a/WebServices/client-frontend/src/app/(DashboardLayout)/template/page.tsx
+++ b/WebServices/client-frontend/src/app/(DashboardLayout)/template/page.tsx
@@ -1,6 +1,6 @@
 "use server";
 import React from "react";
-import Template from "@/components/Pages/template/app";
+import Template from "@/eventRouters/Pages/template/app";
 import ClientMenu from "@/components/menu/menu";
 import { retrievePage } from "@/components/NavigatePages";
 import { retrievePageList, retrievePagebyUrl } from "@/apicalls/cookies/token";
diff --git a/WebServices/client-frontend/src/app/(DashboardLayout)/tenant/accounting/page.tsx b/WebServices/client-frontend/src/app/(DashboardLayout)/tenant/accounting/page.tsx
new file mode 100644
index 0000000..bd798d1
--- /dev/null
+++ b/WebServices/client-frontend/src/app/(DashboardLayout)/tenant/accounting/page.tsx
@@ -0,0 +1,27 @@
+"use server";
+import React from "react";
+import DashboardLayout from "@/components/layouts/DashboardLayout";
+import { useDashboardPage } from "@/components/common/hooks/useDashboardPage";
+
+export default async function Dashboard({
+    searchParams,
+}: {
+    searchParams: Promise<{ [key: string]: string | undefined }>;
+}) {
+    const {
+        activePage,
+        searchParamsInstance,
+        lang,
+        PageComponent,
+        siteUrlsList,
+    } = await useDashboardPage({
+        pageUrl: "/tenant/accounting",
+        searchParams
+    });
+
+    return (
+        <DashboardLayout lang={lang} activePage={activePage} siteUrls={siteUrlsList} >
+            <PageComponent lang={lang} queryParams={searchParamsInstance} />
+        </DashboardLayout>
+    );
+}
\ No newline at end of file
diff --git a/WebServices/client-frontend/src/app/(DashboardLayout)/tenant/messageToBM/page.tsx b/WebServices/client-frontend/src/app/(DashboardLayout)/tenant/messageToBM/page.tsx
new file mode 100644
index 0000000..8312c0d
--- /dev/null
+++ b/WebServices/client-frontend/src/app/(DashboardLayout)/tenant/messageToBM/page.tsx
@@ -0,0 +1,27 @@
+"use server";
+import React from "react";
+import DashboardLayout from "@/components/layouts/DashboardLayout";
+import { useDashboardPage } from "@/components/common/hooks/useDashboardPage";
+
+export default async function Dashboard({
+    searchParams,
+}: {
+    searchParams: Promise<{ [key: string]: string | undefined }>;
+}) {
+    const {
+        activePage,
+        searchParamsInstance,
+        lang,
+        PageComponent,
+        siteUrlsList,
+    } = await useDashboardPage({
+        pageUrl: "/tenant/messageToBM",
+        searchParams
+    });
+
+    return (
+        <DashboardLayout lang={lang} activePage={activePage} siteUrls={siteUrlsList} >
+            <PageComponent lang={lang} queryParams={searchParamsInstance} />
+        </DashboardLayout>
+    );
+}
\ No newline at end of file
diff --git a/WebServices/client-frontend/src/app/(DashboardLayout)/tenant/messageToOwner/page.tsx b/WebServices/client-frontend/src/app/(DashboardLayout)/tenant/messageToOwner/page.tsx
new file mode 100644
index 0000000..627165a
--- /dev/null
+++ b/WebServices/client-frontend/src/app/(DashboardLayout)/tenant/messageToOwner/page.tsx
@@ -0,0 +1,27 @@
+"use server";
+import React from "react";
+import DashboardLayout from "@/components/layouts/DashboardLayout";
+import { useDashboardPage } from "@/components/common/hooks/useDashboardPage";
+
+export default async function Dashboard({
+    searchParams,
+}: {
+    searchParams: Promise<{ [key: string]: string | undefined }>;
+}) {
+    const {
+        activePage,
+        searchParamsInstance,
+        lang,
+        PageComponent,
+        siteUrlsList,
+    } = await useDashboardPage({
+        pageUrl: "/tenant/messageToOwner",
+        searchParams
+    });
+
+    return (
+        <DashboardLayout lang={lang} activePage={activePage} siteUrls={siteUrlsList} >
+            <PageComponent lang={lang} queryParams={searchParamsInstance} />
+        </DashboardLayout>
+    );
+}
\ No newline at end of file
diff --git a/WebServices/client-frontend/src/app/(DashboardLayout)/user/page.tsx b/WebServices/client-frontend/src/app/(DashboardLayout)/user/page.tsx
index 772483e..69389a0 100644
--- a/WebServices/client-frontend/src/app/(DashboardLayout)/user/page.tsx
+++ b/WebServices/client-frontend/src/app/(DashboardLayout)/user/page.tsx
@@ -1,51 +1,27 @@
 "use server";
 import React from "react";
-import LeftMenu from "@/components/menu/leftMenu";
-import { retrievePageList, retrievePagebyUrl } from "@/apicalls/cookies/token";
-import { retrievePage } from "@/components/NavigatePages";
+import DashboardLayout from "@/components/layouts/DashboardLayout";
+import { useDashboardPage } from "@/components/common/hooks/useDashboardPage";
 
 export default async function Dashboard({
   searchParams,
 }: {
   searchParams: Promise<{ [key: string]: string | undefined }>;
 }) {
-  const siteUrlsList = (await retrievePageList()) || [];
-  const lang = "tr";
-  const searchParamsInstance = await searchParams;
-  const activePage = "/user";
-  const pageToDirect = await retrievePagebyUrl(activePage);
-  const PageComponent = retrievePage(pageToDirect);
+  const {
+    activePage,
+    searchParamsInstance,
+    lang,
+    PageComponent,
+    siteUrlsList,
+  } = await useDashboardPage({
+    pageUrl: "/user",
+    searchParams
+  });
 
   return (
-    <>
-      <div className="min-h-screen min-w-screen flex h-screen w-screen overflow-hidden">
-        {/* Sidebar */}
-        <aside className="w-1/4 border-r p-4 overflow-y-auto">
-          <LeftMenu
-            pageUuidList={siteUrlsList}
-            lang={lang}
-            searchParams={searchParamsInstance}
-            pageSelected={activePage}
-          />
-        </aside>
-
-        {/* Main Content Area */}
-        <div className="flex flex-col w-3/4">
-          {/* Sticky Header */}
-          <header className="sticky top-0 bg-white shadow-md z-10 p-4 flex justify-between items-center">
-            <h1 className="text-2xl font-semibold">{activePage}</h1>
-            <div className="flex items-center space-x-4">
-              <input
-                type="text"
-                placeholder="Search..."
-                className="border px-3 py-2 rounded-lg"
-              />
-              <div className="w-10 h-10 bg-gray-300 rounded-full"></div>
-            </div>
-          </header>
-          <PageComponent lang={lang} queryParams={searchParamsInstance} />
-        </div>
-      </div>
-    </>
+    <DashboardLayout lang={lang} activePage={activePage} siteUrls={siteUrlsList} >
+      <PageComponent lang={lang} queryParams={searchParamsInstance} />
+    </DashboardLayout>
   );
 }
diff --git a/WebServices/client-frontend/src/app/api/cookies/selection/route.ts b/WebServices/client-frontend/src/app/api/cookies/selection/route.ts
new file mode 100644
index 0000000..2d37fe2
--- /dev/null
+++ b/WebServices/client-frontend/src/app/api/cookies/selection/route.ts
@@ -0,0 +1,20 @@
+import { retrieveUserSelection } from "@/apicalls/cookies/token";
+import { NextResponse } from "next/server";
+
+export async function POST(): Promise<NextResponse> {
+  try {
+    const userSelection = await retrieveUserSelection();
+    console.log("userSelection", userSelection);
+    if (userSelection) {
+      return NextResponse.json({
+        status: 200,
+        message: "User selection found",
+        data: userSelection,
+      });
+    }
+  } catch (error) {}
+  return NextResponse.json({
+    status: 500,
+    message: "User selection not found",
+  });
+}
diff --git a/WebServices/client-frontend/src/app/api/login/email/route.ts b/WebServices/client-frontend/src/app/api/login/email/route.ts
new file mode 100644
index 0000000..797b0e0
--- /dev/null
+++ b/WebServices/client-frontend/src/app/api/login/email/route.ts
@@ -0,0 +1,39 @@
+import { loginViaAccessKeys } from "@/apicalls/login/login";
+import { NextResponse } from "next/server";
+import { loginSchemaEmail } from "@/webPages/auth/Login/schemas";
+
+export async function POST(req: Request): Promise<NextResponse> {
+  try {
+    const headers = req.headers;
+    console.log("headers", Object.entries(headers));
+    const body = await req.json();
+    const dataValidated = {
+      accessKey: body.email,
+      password: body.password,
+      rememberMe: body.rememberMe,
+    };
+    const validatedLoginBody = loginSchemaEmail.safeParse(body);
+    if (!validatedLoginBody.success) {
+      return NextResponse.json({
+        status: 422,
+        message: validatedLoginBody.error.message,
+      });
+    }
+
+    const userLogin = await loginViaAccessKeys(dataValidated);
+    if (userLogin.status === 200 || userLogin.status === 202) {
+      return NextResponse.json({
+        status: 200,
+        message: "Login successfully completed",
+        data: userLogin.data,
+      });
+    } else {
+      return NextResponse.json({
+        status: userLogin.status,
+        message: userLogin.message,
+      });
+    }
+  } catch (error) {
+    return NextResponse.json({ status: 401, message: "Invalid credentials" });
+  }
+}
diff --git a/WebServices/client-frontend/src/app/api/selection/employee/route.ts b/WebServices/client-frontend/src/app/api/selection/employee/route.ts
new file mode 100644
index 0000000..2e26a52
--- /dev/null
+++ b/WebServices/client-frontend/src/app/api/selection/employee/route.ts
@@ -0,0 +1,41 @@
+import { z } from "zod";
+import { loginSelectEmployee } from "@/apicalls/login/login";
+import { NextResponse } from "next/server";
+
+const loginSchemaEmployee = z.object({
+  company_uu_id: z.string(),
+});
+
+export async function POST(req: Request): Promise<NextResponse> {
+  try {
+    const headers = req.headers;
+    console.log("headers", Object.entries(headers));
+    const body = await req.json();
+    const dataValidated = {
+      company_uu_id: body.company_uu_id,
+    };
+    const validatedLoginBody = loginSchemaEmployee.safeParse(body);
+    if (!validatedLoginBody.success) {
+      return NextResponse.json({
+        status: 422,
+        message: validatedLoginBody.error.message,
+      });
+    }
+
+    const userLogin = await loginSelectEmployee(dataValidated);
+    if (userLogin.status === 200 || userLogin.status === 202) {
+      return NextResponse.json({
+        status: 200,
+        message: "Selection successfully completed",
+        data: userLogin.data,
+      });
+    } else {
+      return NextResponse.json({
+        status: userLogin.status,
+        message: userLogin.message,
+      });
+    }
+  } catch (error) {
+    return NextResponse.json({ status: 401, message: "Invalid credentials" });
+  }
+}
diff --git a/WebServices/client-frontend/src/app/api/selection/occupant/route.ts b/WebServices/client-frontend/src/app/api/selection/occupant/route.ts
new file mode 100644
index 0000000..37901e9
--- /dev/null
+++ b/WebServices/client-frontend/src/app/api/selection/occupant/route.ts
@@ -0,0 +1,41 @@
+import { z } from "zod";
+import { loginSelectOccupant } from "@/apicalls/login/login";
+import { NextResponse } from "next/server";
+
+const loginSchemaOccupant = z.object({
+  build_living_space_uu_id: z.string(),
+});
+
+export async function POST(req: Request): Promise<NextResponse> {
+  try {
+    const headers = req.headers;
+    console.log("headers", Object.entries(headers));
+    const body = await req.json();
+    const dataValidated = {
+      build_living_space_uu_id: body.build_living_space_uu_id,
+    };
+    const validatedLoginBody = loginSchemaOccupant.safeParse(body);
+    if (!validatedLoginBody.success) {
+      return NextResponse.json({
+        status: 422,
+        message: validatedLoginBody.error.message,
+      });
+    }
+
+    const userLogin = await loginSelectOccupant(dataValidated);
+    if (userLogin.status === 200 || userLogin.status === 202) {
+      return NextResponse.json({
+        status: 200,
+        message: "Selection successfully completed",
+        data: userLogin.data,
+      });
+    } else {
+      return NextResponse.json({
+        status: userLogin.status,
+        message: userLogin.message,
+      });
+    }
+  } catch (error) {
+    return NextResponse.json({ status: 401, message: "Invalid credentials" });
+  }
+}
diff --git a/WebServices/client-frontend/src/app/page.tsx b/WebServices/client-frontend/src/app/page.tsx
index 89ed8a0..64fc604 100644
--- a/WebServices/client-frontend/src/app/page.tsx
+++ b/WebServices/client-frontend/src/app/page.tsx
@@ -1,7 +1,7 @@
 "use server";
+import Link from "next/link";
 
 export default async function Home() {
-  // Server-side rendering
   const currentDate = new Date().toLocaleString("tr-TR", {
     timeZone: "Europe/Istanbul",
   });
@@ -19,70 +19,12 @@ export default async function Home() {
         {/* Login Section */}
         <div className="p-8">
           <div className="bg-white rounded-lg p-6 border border-gray-200">
-            <h2 className="text-2xl font-semibold text-center mb-6 text-gray-800">
-              Login to Your Account
-            </h2>
-
-            <div className="space-y-4">
-              <div>
-                <label
-                  className="block text-gray-700 text-sm font-medium mb-2"
-                  htmlFor="email"
-                >
-                  Email Address
-                </label>
-                <input
-                  className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-                  id="email"
-                  type="email"
-                  placeholder="Enter your email"
-                />
-              </div>
-
-              <div>
-                <label
-                  className="block text-gray-700 text-sm font-medium mb-2"
-                  htmlFor="password"
-                >
-                  Password
-                </label>
-                <input
-                  className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-                  id="password"
-                  type="password"
-                  placeholder="Enter your password"
-                />
-              </div>
-
-              <div className="flex items-center justify-between">
-                <div className="flex items-center">
-                  <input
-                    id="remember_me"
-                    type="checkbox"
-                    className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
-                  />
-                  <label
-                    htmlFor="remember_me"
-                    className="ml-2 block text-sm text-gray-700"
-                  >
-                    Remember me
-                  </label>
-                </div>
-
-                <div className="text-sm">
-                  <a
-                    href="#"
-                    className="font-medium text-blue-600 hover:text-blue-500"
-                  >
-                    Forgot your password?
-                  </a>
-                </div>
-              </div>
-
-              <button className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
-                Sign In
-              </button>
-            </div>
+            <Link
+              href="/auth/login"
+              className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors"
+            >
+              Go to Sign In
+            </Link>
           </div>
 
           <div className="mt-6 text-center text-sm text-gray-600">
diff --git a/WebServices/client-frontend/src/components/auth/LoginEmployee.tsx b/WebServices/client-frontend/src/components/auth/LoginEmployee.tsx
deleted file mode 100644
index 3c925ff..0000000
--- a/WebServices/client-frontend/src/components/auth/LoginEmployee.tsx
+++ /dev/null
@@ -1,146 +0,0 @@
-"use client";
-import React from "react";
-import { loginSelectEmployee } from "@/apicalls/login/login";
-import { useRouter } from "next/navigation";
-import { Company } from "./types";
-
-interface LoginEmployeeProps {
-  selectionList: Company[];
-  lang?: "en" | "tr";
-  onSelect?: (uu_id: string) => void;
-}
-
-// Language dictionary for internationalization
-const languageDictionary = {
-  tr: {
-    companySelection: "Şirket Seçimi",
-    loggedInAs: "Çalışan olarak giriş yaptınız",
-    duty: "Görev",
-    id: "Kimlik",
-    noSelections: "Seçenek bulunamadı",
-  },
-  en: {
-    companySelection: "Select your company",
-    loggedInAs: "You are logged in as an employee",
-    duty: "Duty",
-    id: "ID",
-    noSelections: "No selections available",
-  },
-};
-
-function LoginEmployee({
-  selectionList,
-  lang = "en",
-  onSelect,
-}: LoginEmployeeProps) {
-  const t = languageDictionary[lang] || languageDictionary.en;
-  const router = useRouter();
-
-  const handleSelect = (uu_id: string) => {
-    console.log("Selected employee uu_id:", uu_id);
-
-    // If an external onSelect handler is provided, use it
-    if (onSelect) {
-      onSelect(uu_id);
-      return;
-    }
-
-    // Otherwise use the internal handler
-    loginSelectEmployee({ company_uu_id: uu_id })
-      .then((responseData: any) => {
-        if (responseData?.status === 200 || responseData?.status === 202) {
-          router.push("/dashboard");
-        }
-      })
-      .catch((error) => {
-        console.error(error);
-      });
-  };
-
-  return (
-    <>
-      <div className="text-2xl font-bold">{t.companySelection}</div>
-      <div className="text-sm text-gray-500 mt-4">{t.loggedInAs}</div>
-
-      {Array.isArray(selectionList) && selectionList.length === 0 && (
-        <div className="text-center p-4">{t.noSelections}</div>
-      )}
-
-      {Array.isArray(selectionList) && selectionList.length === 1 && (
-        <div className="w-full p-4 m-2 bg-emerald-300 rounded-lg">
-          <div className="flex flex-col items-center md:items-start">
-            <div>
-              <span className="text-2xl font-medium">
-                {selectionList[0].public_name}
-              </span>
-              {selectionList[0].company_type && (
-                <span className="ml-2 font-medium text-sky-500">
-                  {selectionList[0].company_type}
-                </span>
-              )}
-            </div>
-            {selectionList[0].duty && (
-              <div className="mt-1">
-                <span className="text-md font-medium text-gray-700">
-                  {t.duty}: {selectionList[0].duty}
-                </span>
-              </div>
-            )}
-            <div className="mt-2">
-              <span className="flex gap-2 font-medium text-gray-600 dark:text-gray-400 text-sm">
-                <span>
-                  {t.id}: {selectionList[0].uu_id}
-                </span>
-              </span>
-            </div>
-            <div className="mt-3">
-              <button
-                className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors"
-                onClick={() => handleSelect(selectionList[0].uu_id)}
-              >
-                Continue
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {Array.isArray(selectionList) &&
-        selectionList.length > 1 &&
-        selectionList.map((item: Company, index: number) => (
-          <div
-            key={index}
-            className="w-full p-4 m-2 bg-emerald-300 hover:bg-emerald-500 rounded-lg transition-colors duration-200 cursor-pointer"
-            onClick={() => handleSelect(item.uu_id)}
-          >
-            <div className="flex flex-col items-center md:items-start">
-              <div>
-                <span className="text-2xl font-medium">{item.public_name}</span>
-                {item.company_type && (
-                  <span className="ml-2 font-medium text-sky-500">
-                    {item.company_type}
-                  </span>
-                )}
-              </div>
-              {item.duty && (
-                <div className="mt-1">
-                  <span className="text-md font-medium text-gray-700">
-                    {t.duty}: {item.duty}
-                  </span>
-                </div>
-              )}
-              <div className="mt-2">
-                <span className="flex gap-2 font-medium text-gray-600 dark:text-gray-400 text-sm">
-                  <span>
-                    {t.id}: {item.uu_id}
-                  </span>
-                </span>
-              </div>
-            </div>
-          </div>
-        ))}
-    </>
-  );
-}
-
-export default LoginEmployee;
diff --git a/WebServices/client-frontend/src/components/auth/LoginOccupant.tsx b/WebServices/client-frontend/src/components/auth/LoginOccupant.tsx
deleted file mode 100644
index 493e27c..0000000
--- a/WebServices/client-frontend/src/components/auth/LoginOccupant.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-"use client";
-import React from "react";
-import { loginSelectOccupant } from "@/apicalls/login/login";
-import { useRouter } from "next/navigation";
-import { BuildingMap } from "./types";
-
-interface LoginOccupantProps {
-  selectionList: BuildingMap;
-  lang?: "en" | "tr";
-}
-
-// Language dictionary for internationalization
-const languageDictionary = {
-  tr: {
-    occupantSelection: "Daire Seçimi",
-    loggedInAs: "Kiracı olarak giriş yaptınız",
-    buildingInfo: "Bina Bilgisi",
-    level: "Kat",
-    noSelections: "Seçenek bulunamadı",
-  },
-  en: {
-    occupantSelection: "Select your occupant type",
-    loggedInAs: "You are logged in as an occupant",
-    buildingInfo: "Building Info",
-    level: "Level",
-    noSelections: "No selections available",
-  },
-};
-
-function LoginOccupant({
-  selectionList,
-  lang = "en"
-}: LoginOccupantProps) {
-  const t = languageDictionary[lang] || languageDictionary.en;
-  const router = useRouter();
-  
-  const handleSelect = (uu_id: string) => {
-    console.log("Selected occupant uu_id:", uu_id);
-    
-    loginSelectOccupant({
-      build_living_space_uu_id: uu_id,
-    })
-      .then((responseData: any) => {
-        if (responseData?.status === 200 || responseData?.status === 202) {
-          router.push("/dashboard");
-        }
-      })
-      .catch((error) => {
-        console.error(error);
-      });
-  };
-
-  return (
-    <>
-      <div className="text-2xl font-bold">{t.occupantSelection}</div>
-      <div className="text-sm text-gray-500 mt-4">
-        {t.loggedInAs}
-      </div>
-      {selectionList && Object.keys(selectionList).length > 0 ? (
-        Object.keys(selectionList).map((buildKey: string) => {
-          const building = selectionList[buildKey];
-          return (
-            <div key={buildKey} className="mb-6">
-              <div className="w-full p-3 bg-blue-100 rounded-t-lg">
-                <h3 className="text-lg font-medium text-blue-800">
-                  <span className="mr-1">{t.buildingInfo}:</span>
-                  {building.build_name} - No: {building.build_no}
-                </h3>
-              </div>
-
-              <div className="space-y-2 mt-2">
-                {building.occupants.map((occupant: any, idx: number) => (
-                  <div
-                    key={`${buildKey}-${idx}`}
-                    className="w-full p-4 bg-emerald-300 hover:bg-emerald-500 rounded-lg transition-colors duration-200 cursor-pointer"
-                    onClick={() => handleSelect(occupant.build_living_space_uu_id)}
-                  >
-                    <div className="flex flex-col">
-                      <div className="flex items-center justify-between">
-                        <span className="text-xl font-medium">
-                          {occupant.description}
-                        </span>
-                        <span className="text-sm font-medium bg-blue-500 text-white px-2 py-1 rounded">
-                          {occupant.code}
-                        </span>
-                      </div>
-                      <div className="mt-2">
-                        <span className="text-md font-medium">
-                          {occupant.part_name}
-                        </span>
-                      </div>
-                      <div className="mt-1">
-                        <span className="text-sm text-gray-700">
-                          {t.level}: {occupant.part_level}
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </div>
-          );
-        })
-      ) : (
-        <div className="text-center p-4">{t.noSelections}</div>
-      )}
-    </>
-  );
-}
-
-export default LoginOccupant;
diff --git a/WebServices/client-frontend/src/components/auth/login.tsx b/WebServices/client-frontend/src/components/auth/login.tsx
deleted file mode 100644
index f468d19..0000000
--- a/WebServices/client-frontend/src/components/auth/login.tsx
+++ /dev/null
@@ -1,152 +0,0 @@
-"use client";
-import { useState, useTransition } from "react";
-import { useRouter } from "next/navigation";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { loginViaAccessKeys } from "@/apicalls/login/login";
-import { z } from "zod";
-
-const loginSchema = z.object({
-  email: z.string().email("Invalid email address"),
-  password: z.string().min(5, "Password must be at least 5 characters"),
-  remember_me: z.boolean().optional().default(false),
-});
-
-type LoginFormData = {
-  email: string;
-  password: string;
-  remember_me?: boolean;
-};
-
-function Login() {
-  // Open transition for form login
-  const [isPending, startTransition] = useTransition();
-  const [error, setError] = useState<string | null>(null);
-  const [jsonText, setJsonText] = useState<string | null>(null);
-
-  const Router = useRouter();
-
-  const {
-    register,
-    formState: { errors },
-    handleSubmit,
-  } = useForm<LoginFormData>({
-    resolver: zodResolver(loginSchema),
-  });
-
-  const onSubmit = async (data: LoginFormData) => {
-    try {
-      startTransition(() => {
-        try {
-          loginViaAccessKeys({
-            accessKey: data.email,
-            password: data.password,
-            rememberMe: false,
-          })
-            .then((result: any) => {
-              const dataResponse = result?.data;
-              if (dataResponse?.access_token) {
-                setJsonText(JSON.stringify(dataResponse));
-                setTimeout(() => {
-                  Router.push("/auth/select");
-                }, 2000);
-              }
-              return dataResponse;
-            })
-            .catch(() => {});
-        } catch (error) {}
-      });
-    } catch (error) {
-      console.error("Login error:", error);
-      setError("An error occurred during login");
-    }
-  };
-  return (
-    <>
-      <div className="flex h-full min-h-[inherit] flex-col items-center justify-center gap-4">
-        <div className="w-full max-w-md rounded-lg bg-white p-8 shadow-md">
-          <h2 className="mb-6 text-center text-2xl font-bold text-gray-900">
-            Login
-          </h2>
-          <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
-            <div>
-              <label
-                htmlFor="email"
-                className="block text-sm font-medium text-gray-700"
-              >
-                Email
-              </label>
-              <input
-                {...register("email")}
-                type="email"
-                id="email"
-                className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500"
-              />
-              {errors.email && (
-                <p className="mt-1 text-sm text-red-600">
-                  {errors.email.message}
-                </p>
-              )}
-            </div>
-
-            <div>
-              <label
-                htmlFor="password"
-                className="block text-sm font-medium text-gray-700"
-              >
-                Password
-              </label>
-              <input
-                {...register("password")}
-                type="password"
-                id="password"
-                className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500"
-              />
-              {errors.password && (
-                <p className="mt-1 text-sm text-red-600">
-                  {errors.password.message}
-                </p>
-              )}
-            </div>
-
-            {error && (
-              <div className="rounded-md bg-red-50 p-4">
-                <p className="text-sm text-red-700">{error}</p>
-              </div>
-            )}
-
-            <button
-              type="submit"
-              disabled={isPending}
-              className="w-full rounded-md bg-indigo-600 px-4 py-2 text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:opacity-50"
-            >
-              {isPending ? "Logging in..." : "Login"}
-            </button>
-          </form>
-        </div>
-
-        {jsonText && (
-          <div className="w-full max-w-md rounded-lg bg-white p-8 shadow-md">
-            <h2 className="mb-4 text-center text-xl font-bold text-gray-900">
-              Response Data
-            </h2>
-            <div className="space-y-2">
-              {Object.entries(JSON.parse(jsonText)).map(([key, value]) => (
-                <div key={key} className="flex items-start gap-2">
-                  <strong className="text-gray-700">{key}:</strong>
-                  <span className="text-gray-600">
-                    {typeof value === "object"
-                      ? JSON.stringify(value)
-                      : value?.toString() || "N/A"}
-                  </span>
-                </div>
-              ))}
-            </div>
-          </div>
-        )}
-      </div>
-    </>
-  );
-}
-
-export default Login;
diff --git a/WebServices/client-frontend/src/components/auth/select.tsx b/WebServices/client-frontend/src/components/auth/select.tsx
deleted file mode 100644
index 4077251..0000000
--- a/WebServices/client-frontend/src/components/auth/select.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-"use client";
-import React from "react";
-import {
-  loginSelectEmployee,
-  loginSelectOccupant,
-} from "@/apicalls/login/login";
-import { useRouter } from "next/navigation";
-import LoginEmployee from "./LoginEmployee";
-import LoginOccupant from "./LoginOccupant";
-import { SelectListProps, Company, BuildingMap } from "./types";
-
-function SelectList({
-  selectionList,
-  isEmployee,
-  isOccupant,
-  lang = "en",
-}: SelectListProps) {
-  const router = useRouter();
-
-  // Log the complete selectionList object and its structure
-  console.log("selectionList (complete):", selectionList);
-  console.log(
-    "selectionList (type):",
-    Array.isArray(selectionList) ? "Array" : "Object"
-  );
-
-  if (isEmployee && Array.isArray(selectionList)) {
-    console.log("Employee companies:", selectionList);
-  } else if (isOccupant && !Array.isArray(selectionList)) {
-    // Log each building and its occupants
-    Object.entries(selectionList).forEach(([buildingKey, building]) => {
-      console.log(`Building ${buildingKey}:`, building);
-      console.log(`Occupants for building ${buildingKey}:`, building.occupants);
-    });
-  }
-
-  const setSelectionHandler = (uu_id: string) => {
-    if (isEmployee) {
-      console.log("Selected isEmployee uu_id:", uu_id);
-      loginSelectEmployee({ company_uu_id: uu_id })
-        .then((responseData: any) => {
-          if (responseData?.status === 200 || responseData?.status === 202) {
-            router.push("/dashboard");
-          }
-        })
-        .catch((error) => {
-          console.error(error);
-        });
-    } else if (isOccupant) {
-      console.log("Selected isOccupant uu_id:", uu_id);
-      // For occupants, the uu_id is a composite of buildKey|partUuid
-      loginSelectOccupant({
-        build_living_space_uu_id: uu_id,
-      })
-        .then((responseData: any) => {
-          if (responseData?.status === 200 || responseData?.status === 202) {
-            router.push("/dashboard");
-          }
-        })
-        .catch((error) => {
-          console.error(error);
-        });
-    }
-  };
-
-  return (
-    <>
-      {isEmployee && Array.isArray(selectionList) && (
-        <LoginEmployee 
-          selectionList={selectionList as Company[]} 
-          lang={lang as "en" | "tr"} 
-          onSelect={setSelectionHandler} 
-        />
-      )}
-
-      {isOccupant && !Array.isArray(selectionList) && (
-        <LoginOccupant 
-          selectionList={selectionList as BuildingMap} 
-          lang={lang as "en" | "tr"} 
-          onSelect={setSelectionHandler} 
-        />
-      )}
-    </>  
-  );
-}
-
-export default SelectList;
diff --git a/WebServices/client-frontend/src/components/common/ActionButtonsDisplay/CreateButton.tsx b/WebServices/client-frontend/src/components/common/ActionButtonsDisplay/CreateButton.tsx
new file mode 100644
index 0000000..2716947
--- /dev/null
+++ b/WebServices/client-frontend/src/components/common/ActionButtonsDisplay/CreateButton.tsx
@@ -0,0 +1,25 @@
+"use client";
+import React from "react";
+import { Button } from "@/components/ui/button";
+import { Plus } from "lucide-react";
+
+interface CreateButtonProps {
+  onClick: () => void;
+  translations: Record<string, any>;
+  lang: string;
+}
+
+export const CreateButton: React.FC<CreateButtonProps> = ({
+  onClick,
+  translations,
+  lang,
+}) => {
+  const t = translations[lang] || {};
+
+  return (
+    <Button onClick={onClick} className="flex items-center">
+      <Plus className="mr-2 h-4 w-4" />
+      {t.create || "Create"}
+    </Button>
+  );
+};
diff --git a/WebServices/client-frontend/src/components/common/ActionButtonsDisplay/CustomButtonComponent.tsx b/WebServices/client-frontend/src/components/common/ActionButtonsDisplay/CustomButtonComponent.tsx
new file mode 100644
index 0000000..2d86b8b
--- /dev/null
+++ b/WebServices/client-frontend/src/components/common/ActionButtonsDisplay/CustomButtonComponent.tsx
@@ -0,0 +1,31 @@
+"use client";
+import React from "react";
+import { Button } from "@/components/ui/button";
+import { CustomButton } from "./types";
+import { cn } from "@/lib/utils";
+
+interface CustomButtonComponentProps {
+  button: CustomButton;
+  isSelected: boolean;
+  onClick: () => void;
+}
+
+export const CustomButtonComponent: React.FC<CustomButtonComponentProps> = ({
+  button,
+  isSelected,
+  onClick,
+}) => {
+  return (
+    <Button 
+      onClick={onClick} 
+      variant={button.variant || "default"} 
+      className={cn(
+        "flex items-center",
+        isSelected && "ring-2 ring-primary ring-offset-2"
+      )}
+    >
+      {button.icon && <span className="mr-2">{button.icon}</span>}
+      {button.label}
+    </Button>
+  );
+};
diff --git a/WebServices/client-frontend/src/components/common/ActionButtonsDisplay/index.ts b/WebServices/client-frontend/src/components/common/ActionButtonsDisplay/index.ts
new file mode 100644
index 0000000..5b1e2de
--- /dev/null
+++ b/WebServices/client-frontend/src/components/common/ActionButtonsDisplay/index.ts
@@ -0,0 +1,3 @@
+export * from './CreateButton';
+export * from './CustomButtonComponent';
+export * from './types';
diff --git a/WebServices/client-frontend/src/components/common/ActionButtonsDisplay/types.ts b/WebServices/client-frontend/src/components/common/ActionButtonsDisplay/types.ts
new file mode 100644
index 0000000..270f86a
--- /dev/null
+++ b/WebServices/client-frontend/src/components/common/ActionButtonsDisplay/types.ts
@@ -0,0 +1,17 @@
+import { ReactNode } from "react";
+
+export interface CustomButton {
+  id: string;
+  label: string;
+  onClick: () => void;
+  variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
+  icon?: ReactNode;
+}
+
+export interface ActionButtonsProps {
+  onCreateClick: () => void;
+  translations: Record<string, any>;
+  lang: string;
+  customButtons?: CustomButton[];
+  defaultSelectedButtonId?: string;
+}
diff --git a/WebServices/client-frontend/src/components/common/CardDisplay/CardDisplay.tsx b/WebServices/client-frontend/src/components/common/CardDisplay/CardDisplay.tsx
new file mode 100644
index 0000000..2dc2a49
--- /dev/null
+++ b/WebServices/client-frontend/src/components/common/CardDisplay/CardDisplay.tsx
@@ -0,0 +1,74 @@
+"use client";
+import React from "react";
+import { CardItem } from "./CardItem";
+import { CardSkeleton } from "./CardSkeleton";
+import { getFieldValue, getGridClasses } from "./utils";
+import { CardDisplayProps } from "./schema";
+import { GridSize } from "../HeaderSelections/GridSelectionComponent";
+
+export function CardDisplay<T>({
+  showFields,
+  data,
+  lang,
+  translations,
+  error,
+  loading,
+  titleField,
+  onCardClick,
+  renderCustomField,
+  gridCols = 4,
+  showViewIcon = false,
+  showUpdateIcon = false,
+  onViewClick,
+  onUpdateClick,
+  size = "lg",
+}: CardDisplayProps<T>) {
+  if (error) {
+    return (
+      <div className="p-6 text-center text-red-500">
+        {error.message || "An error occurred while fetching data."}
+      </div>
+    );
+  }
+
+  return (
+    <div className={getGridClasses(gridCols as GridSize)}>
+      {loading ? (
+        // Loading skeletons
+        Array.from({ length: 10 }).map((_, index) => (
+          <CardSkeleton
+            key={`loading-${index}`}
+            index={index}
+            showFields={showFields}
+            showViewIcon={showViewIcon}
+            showUpdateIcon={showUpdateIcon}
+          />
+        ))
+      ) : data.length === 0 ? (
+        <div className="col-span-full text-center py-1">
+          {translations[lang].noData || "No data found"}
+        </div>
+      ) : (
+        data.map((item: T, index: number) => (
+          <CardItem
+            key={index}
+            item={item}
+            index={index}
+            showFields={showFields}
+            titleField={titleField}
+            lang={lang}
+            translations={translations}
+            showViewIcon={showViewIcon}
+            showUpdateIcon={showUpdateIcon}
+            onCardClick={onCardClick}
+            renderCustomField={renderCustomField}
+            onViewClick={onViewClick}
+            onUpdateClick={onUpdateClick}
+            getFieldValue={getFieldValue}
+            size={size}
+          />
+        ))
+      )}
+    </div>
+  );
+}
diff --git a/WebServices/client-frontend/src/components/common/CardDisplay/CardItem.tsx b/WebServices/client-frontend/src/components/common/CardDisplay/CardItem.tsx
new file mode 100644
index 0000000..d28e89e
--- /dev/null
+++ b/WebServices/client-frontend/src/components/common/CardDisplay/CardItem.tsx
@@ -0,0 +1,245 @@
+"use client";
+import React from "react";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Eye, Edit } from "lucide-react";
+import { CardItemProps, CardActionsProps, CardFieldProps } from "./schema";
+
+export function CardItem<T>({
+  item,
+  index,
+  showFields,
+  titleField,
+  lang,
+  translations,
+  onCardClick,
+  renderCustomField,
+  showViewIcon,
+  showUpdateIcon,
+  onViewClick,
+  onUpdateClick,
+  getFieldValue,
+  size = "lg",
+}: CardItemProps<T>) {
+
+  const getCardHeight = () => {
+    switch (size) {
+      case "xs": return "h-16 max-h-16";
+      case "sm": return "h-20 max-h-20";
+      case "md": return "h-24 max-h-24";
+      case "lg":
+      default: return "h-full";
+    }
+  };
+
+  const getCardStyle = () => {
+    switch (size) {
+      case "xs": return "!py-0 !gap-0 !flex !flex-col";
+      case "sm": return "!py-1 !gap-1 !flex !flex-col";
+      case "md": return "!py-2 !gap-2 !flex !flex-col";
+      case "lg":
+      default: return "";
+    }
+  };
+
+  const getTitleSize = () => {
+    switch (size) {
+      case "xs": return "text-xs";
+      case "sm": return "text-sm";
+      case "md": return "text-base";
+      case "lg":
+      default: return "text-lg";
+    }
+  };
+
+  const getContentPadding = () => {
+    switch (size) {
+      case "xs": return "p-1 py-1";
+      case "sm": return "p-1 py-1";
+      case "md": return "p-2 py-1";
+      case "lg":
+      default: return "p-3";
+    }
+  };
+
+  if (size === "xs" || size === "sm") {
+    return (
+      <div key={index} className="w-full p-1">
+        <div
+          className={`border rounded-lg shadow-sm ${getCardHeight()} ${onCardClick ? 'cursor-pointer hover:shadow-md transition-shadow' : ''} overflow-hidden flex flex-col bg-card text-card-foreground relative`}
+          onClick={onCardClick ? () => onCardClick(item) : undefined}
+        >
+          {showViewIcon && (
+            <button
+              className="absolute top-1 right-1 h-5 w-5 inline-flex items-center justify-center rounded-full bg-white/80 hover:bg-white z-10"
+              onClick={(e) => {
+                e.stopPropagation();
+                if (onViewClick) onViewClick(item);
+              }}
+            >
+              <Eye className="h-3 w-3" />
+            </button>
+          )}
+          {showUpdateIcon && (
+            <button
+              className="absolute top-1 right-7 h-5 w-5 inline-flex items-center justify-center rounded-full bg-white/80 hover:bg-white z-10"
+              onClick={(e) => {
+                e.stopPropagation();
+                if (onUpdateClick) onUpdateClick(item);
+              }}
+            >
+              <Edit className="h-3 w-3" />
+            </button>
+          )}
+          <div className="px-2 pt-1 pb-1">
+            <h3 className={`${getTitleSize()} font-semibold truncate pr-6`}>{getFieldValue(item, titleField)}</h3>
+            <div className="flex flex-col justify-start mt-1">
+              {showFields.map((field) => (
+                <CardField
+                  key={`${index}-${field}`}
+                  item={item}
+                  field={field}
+                  lang={lang}
+                  translations={translations}
+                  renderCustomField={renderCustomField}
+                  getFieldValue={getFieldValue}
+                  size={size}
+                />
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div key={index} className="w-full p-1">
+      <Card
+        className={`${getCardHeight()} ${onCardClick ? 'cursor-pointer hover:shadow-md transition-shadow' : ''} overflow-hidden flex flex-col`}
+        onClick={onCardClick ? () => onCardClick(item) : undefined}
+      >
+        <CardHeader className={`${getContentPadding()} pb-0 flex justify-between items-start`}>
+          <h3 className={`${getTitleSize()} font-semibold`}>{getFieldValue(item, titleField)}</h3>
+          <CardActions
+            item={item}
+            showViewIcon={showViewIcon}
+            showUpdateIcon={showUpdateIcon}
+            onViewClick={onViewClick}
+            onUpdateClick={onUpdateClick}
+          />
+        </CardHeader>
+        <CardContent className={`${getContentPadding()} flex-1 overflow-hidden`}>
+          <div className="space-y-2">
+            {showFields.map((field) => (
+              <CardField
+                key={`${index}-${field}`}
+                item={item}
+                field={field}
+                lang={lang}
+                translations={translations}
+                renderCustomField={renderCustomField}
+                getFieldValue={getFieldValue}
+                size={size}
+              />
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+function CardActions<T>({
+  item,
+  showViewIcon,
+  showUpdateIcon,
+  onViewClick,
+  onUpdateClick,
+}: CardActionsProps<T>) {
+  if (!showViewIcon && !showUpdateIcon) return null;
+
+  return (
+    <div className="flex space-x-1">
+      {showViewIcon && (
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-8 w-8"
+          onClick={(e) => {
+            e.stopPropagation();
+            if (onViewClick) onViewClick(item);
+          }}
+        >
+          <Eye className="h-4 w-4" />
+        </Button>
+      )}
+      {showUpdateIcon && (
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-8 w-8"
+          onClick={(e) => {
+            e.stopPropagation();
+            if (onUpdateClick) onUpdateClick(item);
+          }}
+        >
+          <Edit className="h-4 w-4" />
+        </Button>
+      )}
+    </div>
+  );
+}
+
+function CardField<T>({
+  item,
+  field,
+  lang,
+  translations,
+  renderCustomField,
+  getFieldValue,
+  size = "lg",
+}: CardFieldProps<T>) {
+  const getTextSize = () => {
+    switch (size) {
+      case "xs": return "text-xs";
+      case "sm": return "text-xs";
+      case "md": return "text-sm";
+      case "lg":
+      default: return "text-base";
+    }
+  };
+
+  const getLabelWidth = () => {
+    switch (size) {
+      case "xs": return "w-16";
+      case "sm": return "w-20";
+      case "md": return "w-24";
+      case "lg":
+      default: return "w-32";
+    }
+  };
+
+  if (renderCustomField) {
+    return renderCustomField(item, field);
+  }
+
+  const label = translations?.[field]?.[lang] || field;
+  const value = getFieldValue(item, field);
+
+  if (size === "xs" || size === "sm") {
+    return (
+      <div className={`flex items-center ${getTextSize()} py-0 my-0 leading-tight`}>
+        <span className={`${getLabelWidth()} font-medium truncate mr-1`}>{label}:</span>
+        <span className="truncate max-w-[60%]">{value}</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`flex items-center ${getTextSize()}`}>
+      <span className={`${getLabelWidth()} font-medium truncate`}>{label}:</span>
+      <span className="truncate">{value}</span>
+    </div>
+  );
+}
diff --git a/WebServices/client-frontend/src/components/common/CardDisplay/CardSkeleton.tsx b/WebServices/client-frontend/src/components/common/CardDisplay/CardSkeleton.tsx
new file mode 100644
index 0000000..73c0620
--- /dev/null
+++ b/WebServices/client-frontend/src/components/common/CardDisplay/CardSkeleton.tsx
@@ -0,0 +1,46 @@
+"use client";
+import React from "react";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+} from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import { CardSkeletonProps } from "./schema";
+
+// Interface moved to schema.ts
+
+export function CardSkeleton({
+  index,
+  showFields,
+  showViewIcon,
+  showUpdateIcon,
+}: CardSkeletonProps) {
+  return (
+    <div key={`loading-${index}`} className="w-full p-1">
+      <Card className="h-full">
+        <CardHeader className="p-3 pb-0 flex justify-between items-start">
+          <Skeleton className="h-5 w-3/4" />
+          <div className="flex space-x-1">
+            {showViewIcon && (
+              <Skeleton className="h-8 w-8 rounded-full" />
+            )}
+            {showUpdateIcon && (
+              <Skeleton className="h-8 w-8 rounded-full" />
+            )}
+          </div>
+        </CardHeader>
+        <CardContent className="p-3">
+          <div className="space-y-2">
+            {showFields.map((field, fieldIndex) => (
+              <div key={`loading-${index}-${field}`} className="flex">
+                <Skeleton className="h-4 w-10 mr-2" />
+                <Skeleton className="h-4 w-full" />
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/WebServices/client-frontend/src/components/common/CardDisplay/index.tsx b/WebServices/client-frontend/src/components/common/CardDisplay/index.tsx
new file mode 100644
index 0000000..b3dba2c
--- /dev/null
+++ b/WebServices/client-frontend/src/components/common/CardDisplay/index.tsx
@@ -0,0 +1 @@
+export { CardDisplay } from './CardDisplay';
diff --git a/WebServices/client-frontend/src/components/common/CardDisplay/schema.ts b/WebServices/client-frontend/src/components/common/CardDisplay/schema.ts
new file mode 100644
index 0000000..5ff2294
--- /dev/null
+++ b/WebServices/client-frontend/src/components/common/CardDisplay/schema.ts
@@ -0,0 +1,62 @@
+import { GridSize } from "../HeaderSelections/GridSelectionComponent";
+
+export type CardSize = "xs" | "sm" | "md" | "lg";
+
+export interface CardDisplayProps<T> {
+  showFields: string[];
+  data: T[];
+  lang: string;
+  translations: Record<string, any>;
+  error: Error | null;
+  loading: boolean;
+  titleField: string;
+  onCardClick?: (item: T) => void;
+  renderCustomField?: (item: T, field: string) => React.ReactNode;
+  gridCols?: number | GridSize;
+  showViewIcon?: boolean;
+  showUpdateIcon?: boolean;
+  onViewClick?: (item: T) => void;
+  onUpdateClick?: (item: T) => void;
+  size?: CardSize;
+}
+
+export interface CardItemProps<T> {
+  item: T;
+  index: number;
+  showFields: string[];
+  titleField: string;
+  lang: string;
+  translations: Record<string, any>;
+  onCardClick?: (item: T) => void;
+  renderCustomField?: (item: T, field: string) => React.ReactNode;
+  showViewIcon: boolean;
+  showUpdateIcon: boolean;
+  onViewClick?: (item: T) => void;
+  onUpdateClick?: (item: T) => void;
+  getFieldValue: (item: any, field: string) => any;
+  size?: CardSize;
+}
+
+export interface CardActionsProps<T> {
+  item: T;
+  showViewIcon: boolean;
+  showUpdateIcon: boolean;
+  onViewClick?: (item: T) => void;
+  onUpdateClick?: (item: T) => void;
+}
+export interface CardFieldProps<T> {
+  item: T;
+  field: string;
+  lang: string;
+  translations: Record<string, any>;
+  renderCustomField?: (item: T, field: string) => React.ReactNode;
+  getFieldValue: (item: any, field: string) => any;
+  size?: CardSize;
+}
+
+export interface CardSkeletonProps {
+  index: number;
+  showFields: string[];
+  showViewIcon: boolean;
+  showUpdateIcon: boolean;
+}
diff --git a/WebServices/client-frontend/src/components/common/CardDisplay/utils.ts b/WebServices/client-frontend/src/components/common/CardDisplay/utils.ts
new file mode 100644
index 0000000..8f690cb
--- /dev/null
+++ b/WebServices/client-frontend/src/components/common/CardDisplay/utils.ts
@@ -0,0 +1,39 @@
+export function getFieldValue(item: any, field: string): any {
+  if (!item) return "";
+  if (field.includes(".")) {
+    const parts = field.split(".");
+    let value = item;
+    for (const part of parts) {
+      if (value === null || value === undefined) return "";
+      value = value[part];
+    }
+    return value;
+  }
+  return item[field];
+}
+
+export function getFieldLabel(
+  field: string,
+  translations: Record<string, any>,
+  lang: string
+): string {
+  const t = translations[lang] || {};
+  return (
+    t[field] ||
+    field.charAt(0).toUpperCase() + field.slice(1).replace(/_/g, " ")
+  );
+}
+
+export function getGridClasses(gridCols: 1 | 2 | 3 | 4 | 5 | 6): string {
+  const baseClass = "grid grid-cols-1 gap-4";
+  const colClasses: Record<number, string> = {
+    1: "",
+    2: "sm:grid-cols-2",
+    3: "sm:grid-cols-2 md:grid-cols-3",
+    4: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4",
+    5: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5",
+    6: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6",
+  };
+
+  return `${baseClass} ${colClasses[gridCols]}`;
+}
diff --git a/WebServices/client-frontend/src/components/common/FormDisplay/CreateComponent.tsx b/WebServices/client-frontend/src/components/common/FormDisplay/CreateComponent.tsx
new file mode 100644
index 0000000..1a339bf
--- /dev/null
+++ b/WebServices/client-frontend/src/components/common/FormDisplay/CreateComponent.tsx
@@ -0,0 +1,303 @@
+"use client";
+import React, { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { CreateComponentProps, FieldDefinition } from "./types";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Checkbox } from "@/components/ui/checkbox";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm, SubmitHandler } from "react-hook-form";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { AlertCircle } from "lucide-react";
+
+export function CreateComponent<T>({
+  refetch,
+  setMode,
+  setSelectedItem,
+  onCancel,
+  lang,
+  translations,
+  formProps = {},
+  apiUrl,
+}: CreateComponentProps<T>) {
+  const t = translations[lang as keyof typeof translations] || {};
+
+  // Get field definitions from formProps if available
+  const fieldDefinitions = formProps.fieldDefinitions || {};
+  const validationSchema = formProps.validationSchema;
+
+  // Group fields by their group property
+  const [groupedFields, setGroupedFields] = useState<Record<string, FieldDefinition[]>>({});
+
+  // Process field definitions to group them
+  useEffect(() => {
+    if (Object.keys(fieldDefinitions).length > 0) {
+      const groups: Record<string, FieldDefinition[]> = {};
+
+      // Group fields by their group property
+      Object.entries(fieldDefinitions).forEach(([fieldName, definition]) => {
+        const def = definition as FieldDefinition;
+        if (!groups[def.group]) {
+          groups[def.group] = [];
+        }
+        groups[def.group].push({ ...def, name: fieldName });
+      });
+
+      setGroupedFields(groups);
+    }
+  }, [fieldDefinitions]);
+
+  // Initialize form with default values from field definitions
+  const defaultValues: Record<string, any> = {};
+  Object.entries(fieldDefinitions).forEach(([key, def]) => {
+    const fieldDef = def as FieldDefinition;
+    defaultValues[key] = fieldDef.defaultValue !== undefined ? fieldDef.defaultValue : "";
+  });
+
+  // Setup form with validation schema if available
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    setValue,
+    watch,
+    reset,
+  } = useForm<Record<string, any>>({
+    defaultValues,
+    resolver: validationSchema ? zodResolver(validationSchema) : undefined,
+  });
+
+  const formValues = watch();
+
+  // Get language-specific validation schema if available
+  useEffect(() => {
+    if (formProps.schemaPath) {
+      const loadLanguageValidationSchema = async () => {
+        try {
+          // Dynamic import of the schema module
+          const schemaModule = await import(formProps.schemaPath);
+
+          // Check if language-specific schema functions are available
+          if (schemaModule.getCreateApplicationSchema) {
+            const langValidationSchema = schemaModule.getCreateApplicationSchema(lang as "en" | "tr");
+
+            // Reset the form with the current values
+            reset(defaultValues);
+
+            // Update the validation schema in formProps for future validations
+            formProps.validationSchema = langValidationSchema;
+          }
+        } catch (error) {
+          console.error("Error loading language-specific validation schema:", error);
+        }
+      };
+
+      loadLanguageValidationSchema();
+    }
+  }, [lang, formProps.schemaPath, reset, defaultValues]);
+
+  // Handle form submission
+  const onSubmit: SubmitHandler<Record<string, any>> = async (data) => {
+    try {
+      if (apiUrl) {
+        const createUrl = `${apiUrl}/create`;
+        const response = await fetch(createUrl, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify(data),
+        });
+        console.log("Response:", response.ok);
+        if (!response.ok) {
+          throw new Error(`API error: ${response.status}`);
+        }
+
+        const createdItem = await response.json();
+        console.log("Created item:", createdItem);
+      }
+
+      if (refetch) refetch();
+      setMode("list");
+      setSelectedItem(null);
+    } catch (error) {
+      console.error("Error saving form:", error);
+    }
+  };
+
+  // Handle select changes
+  const handleSelectChange = (name: string, value: string) => {
+    setValue(name, value);
+  };
+
+  // Handle checkbox changes
+  const handleCheckboxChange = (name: string, checked: boolean) => {
+    setValue(name, checked);
+  };
+
+  // Translate group names for display dynamically
+  const getGroupTitle = (groupName: string) => {
+    // Check if we have a translation for this group name
+    if (t[groupName]) {
+      return t[groupName];
+    }
+
+    // If no translation is found, just format the name as a fallback
+    const formattedName = groupName
+      .replace(/([A-Z])/g, ' $1')
+      .replace(/_/g, ' ')
+      .replace(/^./, (str) => str.toUpperCase())
+      .replace(/\b\w/g, (c) => c.toUpperCase());
+    return formattedName;
+  };
+
+  // Render a field based on its type
+  const renderField = (fieldName: string, field: FieldDefinition) => {
+    const errorMessage = errors[fieldName]?.message as string;
+
+    switch (field.type) {
+      case "text":
+        return (
+          <div className="space-y-2" key={fieldName}>
+            <Label htmlFor={fieldName}>
+              {t[fieldName] || field.label[lang as "en" | "tr"]}
+              {field.required && <span className="text-red-500 ml-1">*</span>}
+            </Label>
+            <Input
+              id={fieldName}
+              {...register(fieldName)}
+              placeholder={t[fieldName] || field.label[lang as "en" | "tr"]}
+              disabled={field.readOnly}
+            />
+            {errorMessage && (
+              <p className="text-sm text-red-500">{errorMessage}</p>
+            )}
+          </div>
+        );
+
+      case "textarea":
+        return (
+          <div className="space-y-2" key={fieldName}>
+            <Label htmlFor={fieldName}>
+              {t[fieldName] || field.label[lang as "en" | "tr"]}
+              {field.required && <span className="text-red-500 ml-1">*</span>}
+            </Label>
+            <Textarea
+              id={fieldName}
+              {...register(fieldName)}
+              placeholder={t[fieldName] || field.label[lang as "en" | "tr"]}
+              rows={3}
+              disabled={field.readOnly}
+            />
+            {errorMessage && (
+              <p className="text-sm text-red-500">{errorMessage}</p>
+            )}
+          </div>
+        );
+
+      case "select":
+        return (
+          <div className="space-y-2" key={fieldName}>
+            <Label htmlFor={fieldName}>
+              {t[fieldName] || field.label[lang as "en" | "tr"]}
+              {field.required && <span className="text-red-500 ml-1">*</span>}
+            </Label>
+            <Select
+              value={formValues[fieldName]}
+              onValueChange={(value) => handleSelectChange(fieldName, value)}
+              disabled={field.readOnly}
+            >
+              <SelectTrigger>
+                <SelectValue placeholder={t[fieldName] || field.label[lang as "en" | "tr"]} />
+              </SelectTrigger>
+              <SelectContent>
+                {field.options?.map((option) => (
+                  <SelectItem key={option} value={option}>
+                    {t[option] || option}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            {errorMessage && (
+              <p className="text-sm text-red-500">{errorMessage}</p>
+            )}
+          </div>
+        );
+
+      case "checkbox":
+        return (
+          <div className="flex items-center space-x-2" key={fieldName}>
+            <Checkbox
+              id={fieldName}
+              checked={formValues[fieldName]}
+              onCheckedChange={(checked) =>
+                handleCheckboxChange(fieldName, checked as boolean)
+              }
+              disabled={field.readOnly}
+            />
+            <Label htmlFor={fieldName}>
+              {t[fieldName] || field.label[lang as "en" | "tr"]}
+              {field.required && <span className="text-red-500 ml-1">*</span>}
+            </Label>
+            {errorMessage && (
+              <p className="text-sm text-red-500">{errorMessage}</p>
+            )}
+          </div>
+        );
+
+      default:
+        return null;
+    }
+  };
+  
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <div className="grid grid-cols-2 gap-4 pt-6 my-4">
+        <Button type="button" variant="outline" onClick={onCancel} className="w-full">
+          {t.cancel || "Cancel"}
+        </Button>
+        <Button type="submit" className="w-full">
+          {t.save || "Save"}
+        </Button>
+      </div>
+      <Card className="w-full mb-6">
+        <CardHeader>
+          <CardTitle>{t.create || "Create"}</CardTitle>
+          <CardDescription>{t.createDescription || "Create a new item"}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          {/* Display validation errors summary if any */}
+          {Object.keys(errors).length > 0 && (
+            <Alert variant="destructive" className="mb-4">
+              <AlertCircle className="h-4 w-4" />
+              <AlertDescription>
+                {t.formErrors || "Please correct the errors in the form"}
+              </AlertDescription>
+            </Alert>
+          )}
+
+          {/* Render fields grouped by their group property */}
+          <div className="space-y-6">
+            {Object.entries(groupedFields).map(([groupName, fields]) => (
+              <Card key={groupName} className="shadow-sm">
+                <CardHeader className="py-3">
+                  <CardTitle className="text-lg">{getGroupTitle(groupName)}</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <div className="space-y-4">
+                    {fields.map((field: any) => renderField(field.name, field))}
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+
+
+        </CardContent>
+      </Card>
+    </form>
+  );
+}
diff --git a/WebServices/client-frontend/src/components/common/FormDisplay/FormDisplay.tsx b/WebServices/client-frontend/src/components/common/FormDisplay/FormDisplay.tsx
new file mode 100644
index 0000000..ad50410
--- /dev/null
+++ b/WebServices/client-frontend/src/components/common/FormDisplay/FormDisplay.tsx
@@ -0,0 +1,127 @@
+"use client";
+import React, { useEffect, useState } from "react";
+import { CreateComponent } from "./CreateComponent";
+import { UpdateComponent } from "./UpdateComponent";
+import { ViewComponent } from "./ViewComponent";
+import { FormDisplayProps } from "./types";
+
+export function FormDisplay<T>({
+  initialData,
+  mode,
+  refetch,
+  setMode,
+  setSelectedItem,
+  onCancel,
+  lang,
+  translations,
+  formProps = {},
+  apiUrl,
+}: FormDisplayProps<T>) {
+  const [enhancedFormProps, setEnhancedFormProps] = useState(formProps);
+
+
+  useEffect(() => {
+    const updateFormProps = async () => {
+      try {
+        if (formProps.schemaPath) {
+          const schemaModule = await import(formProps.schemaPath);
+
+          let fieldDefs;
+          if (schemaModule.fieldDefinitions?.getDefinitionsByMode) {
+            fieldDefs = schemaModule.fieldDefinitions.getDefinitionsByMode(mode);
+          } else if (mode === "create" && schemaModule.createFieldDefinitions) {
+            fieldDefs = schemaModule.createFieldDefinitions;
+          } else if (mode === "update" && schemaModule.updateFieldDefinitions) {
+            fieldDefs = schemaModule.updateFieldDefinitions;
+          } else if (mode === "view" && schemaModule.viewFieldDefinitions) {
+            fieldDefs = schemaModule.viewFieldDefinitions;
+          }
+
+          let validationSchema;
+          if (mode === "create" && schemaModule.getCreateApplicationSchema) {
+            validationSchema = schemaModule.getCreateApplicationSchema(lang as "en" | "tr");
+          } else if (mode === "update" && schemaModule.getUpdateApplicationSchema) {
+            validationSchema = schemaModule.getUpdateApplicationSchema(lang as "en" | "tr");
+          } else if (mode === "view" && schemaModule.ViewApplicationSchema) {
+            validationSchema = schemaModule.ViewApplicationSchema;
+          } else if (schemaModule.ApplicationSchema) {
+            validationSchema = schemaModule.ApplicationSchema;
+          }
+
+          const groupedFieldDefs = schemaModule.baseFieldDefinitions || {};
+          setEnhancedFormProps({
+            ...formProps,
+            fieldDefinitions: fieldDefs || {},
+            validationSchema,
+            fieldsByMode: schemaModule.fieldsByMode || {},
+            groupedFieldDefinitions: groupedFieldDefs,
+            currentLang: lang,
+            schemaPath: formProps.schemaPath
+          });
+        } else {
+          setEnhancedFormProps({
+            ...formProps,
+            currentLang: lang
+          });
+        }
+      } catch (error) {
+        console.error("Error loading schema definitions:", error);
+        setEnhancedFormProps({
+          ...formProps,
+          currentLang: lang
+        });
+      }
+    };
+
+    updateFormProps();
+  }, [formProps, mode, lang]);
+
+  switch (mode) {
+    case "create":
+      return (
+        <CreateComponent<T>
+          key={`create-${lang}`}
+          refetch={refetch}
+          setMode={setMode}
+          setSelectedItem={setSelectedItem}
+          onCancel={onCancel}
+          lang={lang}
+          translations={translations}
+          formProps={enhancedFormProps}
+          apiUrl={apiUrl}
+        />
+      );
+    case "update":
+      const updateKey = `update-${lang}-${(initialData as any)?.uu_id || 'new'}`;
+      return initialData ? (
+        <UpdateComponent<T>
+          key={updateKey}
+          initialData={initialData}
+          refetch={refetch}
+          setMode={setMode}
+          setSelectedItem={setSelectedItem}
+          onCancel={onCancel}
+          lang={lang}
+          translations={translations}
+          formProps={enhancedFormProps}
+          apiUrl={apiUrl}
+        />
+      ) : null;
+    case "view":
+      return initialData ? (
+        <ViewComponent<T>
+          key={`view-${lang}`}
+          initialData={initialData}
+          refetch={refetch}
+          setMode={setMode}
+          setSelectedItem={setSelectedItem}
+          onCancel={onCancel}
+          lang={lang}
+          translations={translations}
+          formProps={enhancedFormProps}
+        />
+      ) : null;
+    default:
+      return null;
+  }
+}
diff --git a/WebServices/client-frontend/src/components/common/FormDisplay/UpdateComponent.tsx b/WebServices/client-frontend/src/components/common/FormDisplay/UpdateComponent.tsx
new file mode 100644
index 0000000..cebaa2c
--- /dev/null
+++ b/WebServices/client-frontend/src/components/common/FormDisplay/UpdateComponent.tsx
@@ -0,0 +1,412 @@
+"use client";
+import React, { useState, useEffect, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { UpdateComponentProps, FieldDefinition } from "./types";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Checkbox } from "@/components/ui/checkbox";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { AlertCircle } from "lucide-react";
+
+export function UpdateComponent<T>({
+  initialData,
+  refetch,
+  setMode,
+  setSelectedItem,
+  onCancel,
+  lang,
+  translations,
+  apiUrl,
+  formProps = {},
+}: UpdateComponentProps<T>) {
+  const t = translations[lang as keyof typeof translations] || {};
+
+  // Get field definitions from formProps if available
+  const fieldDefinitions = formProps.fieldDefinitions || {};
+  const validationSchema = formProps.validationSchema;
+
+  // Ensure field definitions are processed only once
+  const processedFieldDefinitions = useMemo(() => {
+    const processed = { ...fieldDefinitions };
+    // Make all fields editable except system fields
+    Object.entries(processed).forEach(([fieldName, definition]) => {
+      if (fieldName !== 'uu_id' && fieldName !== 'created_at' && fieldName !== 'updated_at') {
+        (processed[fieldName] as FieldDefinition).readOnly = false;
+      }
+    });
+    return processed;
+  }, [fieldDefinitions]);
+
+  const [groupedFields, setGroupedFields] = useState<Record<string, FieldDefinition[]>>({});
+
+  useEffect(() => {
+    if (Object.keys(processedFieldDefinitions).length > 0) {
+      const groups: Record<string, FieldDefinition[]> = {};
+
+      // Group the processed field definitions
+      Object.entries(processedFieldDefinitions).forEach(([fieldName, definition]) => {
+        // Convert to FieldDefinition type
+        const def = definition as FieldDefinition;
+
+        // Add the field name to the definition
+        const fieldDef = { ...def, name: fieldName };
+
+        // Add to the appropriate group
+        if (!groups[def.group]) {
+          groups[def.group] = [];
+        }
+        groups[def.group].push(fieldDef);
+      });
+      setGroupedFields(groups);
+    }
+  }, [processedFieldDefinitions]);
+
+  const defaultValues: Record<string, any> = {};
+  Object.entries(processedFieldDefinitions).forEach(([key, def]) => {
+    const fieldDef = def as FieldDefinition;
+    defaultValues[key] = fieldDef.defaultValue !== undefined ? fieldDef.defaultValue : "";
+  });
+
+  if (initialData) {
+    Object.assign(defaultValues, initialData as Record<string, any>);
+  }
+
+  // Track the current language to detect changes
+  const [currentLang, setCurrentLang] = useState(lang);
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting, isValid },
+    setValue,
+    watch,
+    reset,
+    trigger,
+  } = useForm({
+    defaultValues,
+    resolver: validationSchema ? zodResolver(validationSchema) : undefined,
+    mode: "onChange",
+  });
+
+  useEffect(() => {
+    if (Object.keys(errors).length > 0) {
+      console.log("Form errors:", errors);
+    }
+  }, [errors]);
+
+  useEffect(() => {
+    if (initialData) {
+      reset({ ...initialData as Record<string, any> });
+    }
+  }, [initialData, reset]);
+
+  // Detect language changes and update validation schema
+  useEffect(() => {
+    // If language has changed, update the form
+    if (currentLang !== lang || formProps.currentLang !== lang) {
+      const updateValidationForLanguage = async () => {
+        try {
+          // If we have a schema path, dynamically load the schema for the current language
+          if (formProps.schemaPath) {
+            // Dynamic import of the schema module
+            const schemaModule = await import(formProps.schemaPath);
+
+            // Check if language-specific schema functions are available
+            if (schemaModule.getUpdateApplicationSchema) {
+              // Get the schema for the current language
+              const langValidationSchema = schemaModule.getUpdateApplicationSchema(lang as "en" | "tr");
+
+              // Save current form values
+              const formValues = watch();
+
+              // Reset the form with current values but clear errors
+              reset(formValues, {
+                keepDirty: true,
+                keepValues: true,
+                keepErrors: false
+              });
+
+              // Manually trigger validation after reset
+              setTimeout(() => {
+                // Trigger validation for all fields to show updated error messages
+                Object.keys(formValues).forEach(fieldName => {
+                  trigger(fieldName);
+                });
+              }, 0);
+
+              // Update our tracked language
+              setCurrentLang(lang);
+            }
+          }
+        } catch (error) {
+          console.error("Error updating validation schema for language:", error);
+        }
+      };
+
+      updateValidationForLanguage();
+    }
+  }, [lang, formProps.currentLang, currentLang, formProps.schemaPath, reset, watch, trigger]);
+
+  const formValues = watch();
+
+  // Handle form submission
+  const onSubmit = async (data: any) => {
+    try {
+
+      const isFormValid = await trigger();
+      if (!isFormValid) {
+        console.error("Form validation failed - stopping submission");
+        return; // Stop submission if validation fails
+      }
+      if (!apiUrl) {
+        console.error("API URL is missing or undefined");
+        return;
+      }
+      const uuid = initialData ? (initialData as any).uu_id : null;
+      if (!uuid) {
+        console.error("UUID not found in initialData");
+        throw new Error("UUID is required for update operations");
+      }
+      const dataToSend = { ...data };
+      Object.entries(fieldDefinitions).forEach(([key, def]) => {
+        const fieldDef = def as FieldDefinition;
+        if (fieldDef.readOnly) {
+          delete dataToSend[key];
+        }
+      });
+
+      const updateUrl = `${apiUrl}/update?uuid=${uuid}`;
+      console.log("Updating application with payload:", dataToSend, 'uuId:', uuid);
+      try {
+        let response = await fetch(updateUrl, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify(dataToSend),
+        });
+
+        if (!response.ok) {
+          const errorText = await response.text();
+          console.error("API error response:", errorText);
+          throw new Error(`API error: ${response.status}`);
+        }
+        if (refetch) refetch();
+        setMode("list");
+        setSelectedItem(null);
+      } catch (fetchError) {
+        console.error("Error during fetch:", fetchError);
+      }
+    } catch (error) {
+      console.error("Error details:", error);
+    }
+  };
+
+  // Handle select changes
+  const handleSelectChange = (name: string, value: string) => {
+    setValue(name, value);
+  };
+
+  // Handle checkbox changes
+  const handleCheckboxChange = (name: string, checked: boolean) => {
+    setValue(name, checked);
+  };
+
+  // Translate group names for display dynamically
+  const getGroupTitle = (groupName: string) => {
+    // Check if we have a translation for this group name
+    if (t[groupName]) {
+      return t[groupName];
+    }
+
+    // If no translation is found, just format the name as a fallback
+    const formattedName = groupName
+      .replace(/([A-Z])/g, ' $1')
+      .replace(/_/g, ' ')
+      .replace(/^./, (str) => str.toUpperCase())
+      .replace(/\b\w/g, (c) => c.toUpperCase());
+
+    return formattedName;
+  };
+
+  const renderField = (fieldName: string, field: FieldDefinition) => {
+    const errorMessage = errors[fieldName]?.message as string;
+    const fieldValue = formValues[fieldName];
+
+    const renderLabel = () => (
+      <Label htmlFor={fieldName}>
+        {t[fieldName] || field.label[lang as "en" | "tr"]}
+        {field.required && <span className="text-red-500 ml-1">*</span>}
+      </Label>
+    );
+
+    if (field.readOnly) {
+      return (
+        <div className="space-y-2" key={fieldName}>
+          {renderLabel()}
+          <div className="p-2 bg-gray-50 rounded border border-gray-200">
+            {field.type === "checkbox" ?
+              (fieldValue ? "Yes" : "No") :
+              (fieldValue || "-")}
+          </div>
+        </div>
+      );
+    }
+
+    // For editable fields, render the appropriate input type
+    switch (field.type) {
+      case "text":
+        return (
+          <div className="space-y-2" key={fieldName}>
+            {renderLabel()}
+            <Input
+              id={fieldName}
+              {...register(fieldName)}
+              placeholder={t[fieldName] || field.label[lang as "en" | "tr"]}
+            />
+            {errorMessage && (
+              <p className="text-sm text-red-500">{errorMessage}</p>
+            )}
+          </div>
+        );
+
+      case "textarea":
+        return (
+          <div className="space-y-2" key={fieldName}>
+            {renderLabel()}
+            <Textarea
+              id={fieldName}
+              {...register(fieldName)}
+              placeholder={t[fieldName] || field.label[lang as "en" | "tr"]}
+              rows={3}
+            />
+            {errorMessage && (
+              <p className="text-sm text-red-500">{errorMessage}</p>
+            )}
+          </div>
+        );
+
+      case "select":
+        return (
+          <div className="space-y-2" key={fieldName}>
+            {renderLabel()}
+            <Select
+              value={fieldValue}
+              onValueChange={(value) => handleSelectChange(fieldName, value)}
+            >
+              <SelectTrigger>
+                <SelectValue placeholder={t[fieldName] || field.label[lang as "en" | "tr"]} />
+              </SelectTrigger>
+              <SelectContent>
+                {field.options?.map((option) => (
+                  <SelectItem key={option} value={option}>
+                    {t[option] || option}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            {errorMessage && (
+              <p className="text-sm text-red-500">{errorMessage}</p>
+            )}
+          </div>
+        );
+
+      case "checkbox":
+        return (
+          <div className="flex items-center space-x-2" key={fieldName}>
+            <Checkbox
+              id={fieldName}
+              checked={fieldValue}
+              onCheckedChange={(checked) =>
+                handleCheckboxChange(fieldName, checked as boolean)
+              }
+            />
+            {renderLabel()}
+            {errorMessage && (
+              <p className="text-sm text-red-500">{errorMessage}</p>
+            )}
+          </div>
+        );
+
+      case "date":
+        return (
+          <div className="space-y-2" key={fieldName}>
+            {renderLabel()}
+            <Input
+              id={fieldName}
+              type="date"
+              {...register(fieldName)}
+            />
+            {errorMessage && (
+              <p className="text-sm text-red-500">{errorMessage}</p>
+            )}
+          </div>
+        );
+
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <Card className="w-full mb-6">
+        <CardHeader>
+          <CardTitle>{t.update || "Update"}</CardTitle>
+          <CardDescription>{t.updateDescription || "Update existing item"}</CardDescription>
+        </CardHeader>
+        <CardContent>
+
+          {/* Display validation errors summary if any */}
+          {Object.keys(errors).length > 0 && (
+            <Alert variant="destructive" className="mb-4">
+              <AlertCircle className="h-4 w-4" />
+              <AlertDescription>
+                {t.formErrors || "Please correct the errors in the form"}
+                <ul className="mt-2 list-disc pl-5">
+                  {Object.entries(errors).map(([field, error]) => (
+                    <li key={field}>
+                      {t[field] || field}: {(error as any)?.message || 'Invalid value'}
+                    </li>
+                  ))}
+                </ul>
+              </AlertDescription>
+            </Alert>
+          )}
+
+          <div className="grid grid-cols-2 gap-4 pt-6 my-4">
+            <Button type="button" variant="outline" onClick={onCancel} className="w-full">
+              {t.cancel || "Cancel"}
+            </Button>
+            <Button type="submit" className="w-full">
+              {t.save || "Save"}
+            </Button>
+          </div>
+
+          {/* Render fields grouped by their group property */}
+          <div className="space-y-6">
+            {Object.entries(groupedFields).map(([groupName, fields]) => (
+              <Card key={groupName} className="shadow-sm">
+                <CardHeader className="py-3">
+                  <CardTitle className="text-lg">{getGroupTitle(groupName)}</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <div className="space-y-4">
+                    {fields.map((field: any) => renderField(field.name, field))}
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+
+
+        </CardContent>
+      </Card>
+    </form>
+  );
+}
diff --git a/WebServices/client-frontend/src/components/common/FormDisplay/ViewComponent.tsx b/WebServices/client-frontend/src/components/common/FormDisplay/ViewComponent.tsx
new file mode 100644
index 0000000..a81a3f6
--- /dev/null
+++ b/WebServices/client-frontend/src/components/common/FormDisplay/ViewComponent.tsx
@@ -0,0 +1,219 @@
+"use client";
+import React, { useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { ViewComponentProps, FieldDefinition } from "./types";
+import { Label } from "@/components/ui/label";
+import { z } from "zod";
+
+
+// Utility function to format field label
+const formatFieldLabel = (fieldName: string) => fieldName.replace(/_/g, ' ').replace(/^./, (str) => str.toUpperCase()).replace(/\b\w/g, (c) => c.toUpperCase());
+
+// Component for rendering a single field
+const ViewField: React.FC<{
+  fieldName: string;
+  value: any;
+  label: string;
+  lang: string;
+  translations: any;
+  hasError?: string;
+}> = ({ fieldName, value, label, lang, translations: t, hasError }) => {
+  const formatFieldValue = () => {
+    if (value === undefined || value === null) return "-";
+
+    switch (true) {
+      case typeof value === 'string' && !isNaN(Date.parse(value)):
+        return new Date(value).toLocaleString(lang === "tr" ? "tr-TR" : "en-US");
+      case typeof value === 'boolean':
+        return value ? (
+          <span className="inline-flex items-center rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700">
+            {t.yes || "Yes"}
+          </span>
+        ) : (
+          <span className="inline-flex items-center rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-700">
+            {t.no || "No"}
+          </span>
+        );
+      case fieldName === "application_type" && (value === "employee" || value === "occupant"):
+        return t[value] || value;
+      default:
+        return value;
+    }
+  };
+
+  return (
+    <div className="space-y-1">
+      <Label className="text-sm font-medium">
+        {t[fieldName] || label}
+      </Label>
+      <div className={`rounded-md border ${hasError ? 'border-red-500' : 'border-input'} bg-background px-3 py-2 text-sm min-h-[2.5rem] flex items-center`}>
+        {formatFieldValue()}
+      </div>
+      {hasError && <p className="text-sm text-red-500">{hasError}</p>}
+    </div>
+  );
+};
+
+// Component for rendering a group of fields
+const ViewFieldGroup: React.FC<{
+  groupName: string;
+  fields: FieldDefinition[];
+  initialData: any;
+  lang: string;
+  translations: any;
+  validationErrors: Record<string, string>;
+}> = ({ groupName, fields, initialData, lang, translations, validationErrors }) => {
+  const getGroupTitle = (name: string) => { return translations[name] || formatFieldLabel(name); };
+
+  return (
+    <Card className="shadow-sm">
+      <CardHeader className="py-3">
+        <CardTitle className="text-lg">{getGroupTitle(groupName)}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-4">
+          {fields.map((field) => {
+            const fieldName = field.name || "";
+            const value = initialData ? (initialData as any)[fieldName] : undefined;
+            const hasError = validationErrors[fieldName];
+            return (
+              <ViewField
+                key={fieldName}
+                fieldName={fieldName}
+                value={value}
+                label={field.label[lang as "en" | "tr"]}
+                lang={lang}
+                translations={translations}
+                hasError={hasError}
+              />
+            );
+          })}
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export function ViewComponent<T>({
+  initialData,
+  setMode,
+  setSelectedItem,
+  onCancel,
+  lang,
+  translations,
+  formProps = {},
+}: ViewComponentProps<T>) {
+  const t = translations[lang as keyof typeof translations] || {};
+
+  const fieldDefinitions = formProps.fieldDefinitions || {};
+  const validationSchema = formProps.validationSchema as z.ZodObject<any> | undefined;
+
+  const [groupedFields, setGroupedFields] = useState<Record<string, FieldDefinition[]>>({});
+  const [validationErrors, setValidationErrors] = useState<Record<string, string>>({});
+
+  useEffect(() => {
+    if (Object.keys(fieldDefinitions).length > 0) {
+      const groups: Record<string, FieldDefinition[]> = {};
+
+      Object.entries(fieldDefinitions).forEach(([fieldName, definition]) => {
+        const def = definition as FieldDefinition;
+        if (!groups[def.group]) { groups[def.group] = []; }
+        groups[def.group].push({ ...def, name: fieldName });
+      });
+
+      setGroupedFields(groups);
+    }
+  }, [fieldDefinitions]);
+
+  useEffect(() => {
+    if (validationSchema && initialData) {
+      try {
+        validationSchema.parse(initialData);
+        setValidationErrors({});
+      } catch (error) {
+        if (error instanceof z.ZodError) {
+          console.warn('View data validation issues (not shown to user):', error.errors);
+          setValidationErrors({});
+        }
+      }
+    }
+  }, [initialData, validationSchema]);
+
+  const handleEdit = () => { setMode("update") };
+
+  console.log("Grouped Fields", groupedFields);
+  console.log("Validation Errors", validationErrors);
+
+  return (
+    <Card className="w-full mb-6">
+      <CardHeader>
+        <CardTitle>{t.view || "View"}</CardTitle>
+        <CardDescription>{t.viewDescription || "View item details"}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="flex justify-end space-x-2 pt-4 my-4">
+          <Button variant="outline" onClick={onCancel}>
+            {t.back || "Back"}
+          </Button>
+          <Button onClick={handleEdit}>
+            {t.edit || "Edit"}
+          </Button>
+        </div>
+        <div className="space-y-6">
+          {
+            Object.keys(groupedFields).length > 0 ? (
+              Object.entries(groupedFields).map(([groupName, fields]) => (
+                <ViewFieldGroup
+                  key={groupName}
+                  groupName={groupName}
+                  fields={fields}
+                  initialData={initialData}
+                  lang={lang}
+                  translations={t}
+                  validationErrors={validationErrors}
+                />
+              ))
+            ) : (
+              initialData && (
+                <div className="space-y-4">
+                  {validationSchema ? (
+                    Object.entries(validationSchema.shape || {}).map(([fieldName, _]) => {
+                      const value = (initialData as any)[fieldName];
+                      if (value === undefined || value === null) return null;
+                      return (
+                        <ViewField
+                          key={fieldName}
+                          fieldName={fieldName}
+                          value={value}
+                          label={formatFieldLabel(fieldName)}
+                          lang={lang}
+                          translations={t}
+                        />
+                      );
+                    })
+                  ) : (
+                    Object.entries(initialData as Record<string, any>).map(([fieldName, value]) => {
+                      if (value === undefined || value === null) return null;
+                      return (
+                        <ViewField
+                          key={fieldName}
+                          fieldName={fieldName}
+                          value={value}
+                          label={formatFieldLabel(fieldName)}
+                          lang={lang}
+                          translations={t}
+                        />
+                      );
+                    })
+                  )}
+                </div>
+              )
+            )}
+
+
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/WebServices/client-frontend/src/components/common/FormDisplay/index.ts b/WebServices/client-frontend/src/components/common/FormDisplay/index.ts
new file mode 100644
index 0000000..cb64a23
--- /dev/null
+++ b/WebServices/client-frontend/src/components/common/FormDisplay/index.ts
@@ -0,0 +1,5 @@
+// Export the main components
+export { FormDisplay } from "./FormDisplay";
+
+// Export types
+export type { FormMode } from "./types";
diff --git a/WebServices/client-frontend/src/components/common/FormDisplay/types.ts b/WebServices/client-frontend/src/components/common/FormDisplay/types.ts
new file mode 100644
index 0000000..af32e71
--- /dev/null
+++ b/WebServices/client-frontend/src/components/common/FormDisplay/types.ts
@@ -0,0 +1,51 @@
+"use client";
+
+export interface FieldDefinition {
+  type: string;
+  group: string;
+  label: { tr: string; en: string };
+  options?: string[];
+  readOnly?: boolean;
+  required?: boolean;
+  defaultValue?: any;
+  name?: string;
+}
+
+export type FormMode = "list" | "create" | "update" | "view";
+export type FormModeView = "list" | "view";
+
+export interface BaseFormProps<T> {
+  initialData?: T;
+  refetch?: () => void;
+  setMode: React.Dispatch<React.SetStateAction<FormMode | FormModeView>>;
+  setSelectedItem: React.Dispatch<React.SetStateAction<T | null>>;
+  onCancel: () => void;
+  lang: string;
+  translations: Record<string, Record<string, string>>;
+  formProps?: Record<string, any>;
+  apiUrl?: string;
+}
+
+export interface CreateComponentProps<T> extends BaseFormProps<T> {}
+
+export interface UpdateComponentProps<T> extends BaseFormProps<T> {
+  initialData: T;
+  apiUrl: string;
+}
+
+export interface ViewComponentProps<T> extends BaseFormProps<T> {
+  initialData: T;
+}
+
+export interface FormDisplayProps<T> {
+  mode: FormMode | FormModeView;
+  initialData?: T;
+  refetch?: (additionalParams?: Record<string, any>) => void;
+  setMode: React.Dispatch<React.SetStateAction<FormModeView | FormMode>>;
+  setSelectedItem: React.Dispatch<React.SetStateAction<T | null>>;
+  onCancel: () => void;
+  lang: string;
+  translations: Record<string, Record<string, string>>;
+  formProps?: Record<string, any>;
+  apiUrl: string;
+}
diff --git a/WebServices/client-frontend/src/components/common/HeaderSelections/GridSelectionComponent.tsx b/WebServices/client-frontend/src/components/common/HeaderSelections/GridSelectionComponent.tsx
new file mode 100644
index 0000000..f5e6f45
--- /dev/null
+++ b/WebServices/client-frontend/src/components/common/HeaderSelections/GridSelectionComponent.tsx
@@ -0,0 +1,42 @@
+"use client";
+import React from "react";
+
+export type GridSize = 1 | 2 | 3 | 4 | 5 | 6;
+
+interface GridSelectionComponentProps {
+  gridCols: GridSize;
+  setGridCols: (size: GridSize) => void;
+  translations?: Record<string, any>;
+  lang?: string;
+}
+
+export const GridSelectionComponent: React.FC<GridSelectionComponentProps> = ({
+  gridCols,
+  setGridCols,
+  translations,
+  lang = "en",
+}) => {
+  const t = translations?.[lang] || {};
+
+  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setGridCols(Number(e.target.value) as GridSize);
+  };
+
+  return (
+    <div className="flex items-center">
+      <span className="mr-2 text-sm">{t.gridSize || "Grid Size:"}:</span>
+      <select
+        value={gridCols}
+        onChange={handleChange}
+        className="p-2 border rounded"
+      >
+        <option value="1">{t.oneColumn || "1 Column"}</option>
+        <option value="2">{t.twoColumns || "2 Columns"}</option>
+        <option value="3">{t.threeColumns || "3 Columns"}</option>
+        <option value="4">{t.fourColumns || "4 Columns"}</option>
+        <option value="5">{t.fiveColumns || "5 Columns"}</option>
+        <option value="6">{t.sixColumns || "6 Columns"}</option>
+      </select>
+    </div>
+  );
+};
diff --git a/WebServices/client-frontend/src/components/common/HeaderSelections/LanguageSelectionComponent.tsx b/WebServices/client-frontend/src/components/common/HeaderSelections/LanguageSelectionComponent.tsx
new file mode 100644
index 0000000..7ea13b0
--- /dev/null
+++ b/WebServices/client-frontend/src/components/common/HeaderSelections/LanguageSelectionComponent.tsx
@@ -0,0 +1,27 @@
+"use client";
+import React from "react";
+import { Language, LanguageSelectionComponentProps } from "@/components/common/schemas";
+
+export const LanguageSelectionComponent: React.FC<LanguageSelectionComponentProps> = ({
+  lang,
+  setLang,
+  className = "p-2 border rounded",
+}) => {
+
+  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setLang(e.target.value as Language);
+  };
+
+  return (
+    <div className="flex items-center">
+      <select
+        value={lang}
+        onChange={handleChange}
+        className={className}
+      >
+        <option value="en">English</option>
+        <option value="tr">Turkish</option>
+      </select>
+    </div>
+  );
+};
diff --git a/WebServices/client-frontend/src/components/common/Loader/loader.tsx b/WebServices/client-frontend/src/components/common/Loader/loader.tsx
new file mode 100644
index 0000000..ada4310
--- /dev/null
+++ b/WebServices/client-frontend/src/components/common/Loader/loader.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+
+const Loader = () => {
+    return (
+        <>
+            <div className="flex-1">
+                <div className="flex items-center justify-center h-40 bg-gray-100 rounded-md">
+                    <div className="animate-spin rounded-full h-10 w-10 border-b-2 border-primary"></div>
+                </div>
+            </div>
+        </>
+    )
+}
+
+export default Loader
diff --git a/WebServices/client-frontend/src/components/common/PaginationModifiers/PageNavigation.tsx b/WebServices/client-frontend/src/components/common/PaginationModifiers/PageNavigation.tsx
new file mode 100644
index 0000000..ca167bc
--- /dev/null
+++ b/WebServices/client-frontend/src/components/common/PaginationModifiers/PageNavigation.tsx
@@ -0,0 +1,116 @@
+"use client";
+import React from "react";
+import { Button } from "@/components/ui/button";
+import { PaginationBaseProps } from "./types";
+
+/**
+ * Calculate the page numbers to display in pagination
+ * @param currentPage Current active page
+ * @param totalPages Total number of pages
+ * @param maxButtons Maximum number of page buttons to show (default: 5)
+ * @returns Array of page numbers to display
+ */
+const getPageNumbers = (currentPage: number, totalPages: number, maxButtons: number = 5): number[] => {
+  const pageNumbers: number[] = [];
+  
+  // If we have fewer pages than the maximum buttons, show all pages
+  if (totalPages <= maxButtons) {
+    for (let i = 1; i <= totalPages; i++) {
+      pageNumbers.push(i);
+    }
+  } 
+  // If we're near the beginning, show first maxButtons pages
+  else if (currentPage <= 3) {
+    for (let i = 1; i <= maxButtons; i++) {
+      pageNumbers.push(i);
+    }
+  } 
+  // If we're near the end, show last maxButtons pages
+  else if (currentPage >= totalPages - 2) {
+    for (let i = totalPages - maxButtons + 1; i <= totalPages; i++) {
+      pageNumbers.push(i);
+    }
+  } 
+  // Otherwise, show pages centered around current page
+  else {
+    for (let i = currentPage - 2; i <= currentPage + 2; i++) {
+      pageNumbers.push(i);
+    }
+  }
+  
+  return pageNumbers;
+};
+
+export const PageNavigation: React.FC<PaginationBaseProps> = ({
+  pagination,
+  updatePagination,
+  loading = false,
+  lang,
+  translations,
+}) => {
+  const t = translations[lang] || {};
+
+  const handlePageChange = (newPage: number) => {
+    if (newPage >= 1 && newPage <= pagination.totalPages) {
+      updatePagination({ page: newPage });
+    }
+  };
+  
+  // Get the page numbers to display
+  const pageNumbers = getPageNumbers(pagination.page, pagination.totalPages);
+
+  return (
+    <div className="flex items-center space-x-2">
+      {pagination.back ? (
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => handlePageChange(pagination.page - 1)}
+          disabled={loading}
+        >
+          {t.previous || "Previous"}
+        </Button>
+      ) : (
+        <Button variant="ghost" size="sm" disabled>
+          {t.previous || "Previous"}
+        </Button>
+      )}
+
+      {/* Page number buttons */}
+      <div className="flex items-center space-x-1">
+        {pageNumbers.map((pageNum) => (
+          <Button
+            key={pageNum}
+            variant={pagination.page === pageNum ? "default" : "outline"}
+            size="sm"
+            className="w-9 h-9 p-0"
+            onClick={() => handlePageChange(pageNum)}
+            disabled={loading}
+          >
+            {pageNum}
+          </Button>
+        ))}
+      </div>
+
+      {pagination.page < pagination.totalPages ? (
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => handlePageChange(pagination.page + 1)}
+          disabled={loading}
+        >
+          {t.next || "Next"}
+        </Button>
+      ) : (
+        <Button variant="ghost" size="sm" disabled>
+          {t.next || "Next"}
+        </Button>
+      )}
+
+      {/* Page text display */}
+      <span className="px-4 py-1 text-sm text-muted-foreground">
+        {t.page || "Page"} {pagination.page} {t.of || "of"} {pagination.totalPages}
+      </span>
+    </div>
+  );
+};
diff --git a/WebServices/client-frontend/src/components/common/PaginationModifiers/PageSizeSelector.tsx b/WebServices/client-frontend/src/components/common/PaginationModifiers/PageSizeSelector.tsx
new file mode 100644
index 0000000..74c272c
--- /dev/null
+++ b/WebServices/client-frontend/src/components/common/PaginationModifiers/PageSizeSelector.tsx
@@ -0,0 +1,52 @@
+"use client";
+import React from "react";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { PaginationBaseProps } from "./types";
+
+interface PageSizeSelectorProps extends PaginationBaseProps {
+  pageSizeOptions?: number[];
+}
+
+export const PageSizeSelector: React.FC<PageSizeSelectorProps> = ({
+  pagination,
+  updatePagination,
+  lang,
+  translations,
+  pageSizeOptions = [5, 10, 20, 50],
+}) => {
+  const t = translations[lang] || {};
+
+  return (
+    <div className="flex items-center space-x-2">
+      <span className="text-sm text-muted-foreground">
+        {t.itemsPerPage || "Items per page"}
+      </span>
+      <Select
+        value={pagination.size.toString()}
+        onValueChange={(value) => {
+          updatePagination({
+            size: Number(value),
+            page: 1, // Reset to first page when changing page size
+          });
+        }}
+      >
+        <SelectTrigger className="w-16">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          {pageSizeOptions.map((size) => (
+            <SelectItem key={size} value={size.toString()}>
+              {size}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+};
diff --git a/WebServices/client-frontend/src/components/common/PaginationModifiers/PaginationStats.tsx b/WebServices/client-frontend/src/components/common/PaginationModifiers/PaginationStats.tsx
new file mode 100644
index 0000000..81ba5d8
--- /dev/null
+++ b/WebServices/client-frontend/src/components/common/PaginationModifiers/PaginationStats.tsx
@@ -0,0 +1,36 @@
+"use client";
+import React from "react";
+import { PaginationBaseProps } from "./types";
+
+export const PaginationStats: React.FC<PaginationBaseProps> = ({
+  pagination,
+  lang,
+  translations,
+}) => {
+  const t = translations[lang] || {};
+
+  return (
+    <div className="text-sm text-muted-foreground">
+      <div>
+        {t.showing || "Showing"}{" "}
+        {/* Show the range based on filtered count when available */}
+        {(pagination.totalCount || pagination.allCount || 0) > 0
+          ? (pagination.page - 1) * pagination.size + 1
+          : 0}{" "}
+        -{" "}
+        {Math.min(
+          pagination.page * pagination.size,
+          pagination.totalCount || pagination.allCount || 0
+        )}{" "}
+        {t.of || "of"} {pagination.totalCount || pagination.allCount || 0} {t.items || "items"}
+      </div>
+      {pagination.totalCount &&
+        pagination.totalCount !== (pagination.allCount || 0) && (
+          <div>
+            {t.total || "Total"}: {pagination.allCount || 0} {t.items || "items"} ({t.filtered || "Filtered"}:{" "}
+            {pagination.totalCount} {t.items || "items"})
+          </div>
+        )}
+    </div>
+  );
+};
diff --git a/WebServices/client-frontend/src/components/common/PaginationModifiers/PaginationToolsComponent.tsx b/WebServices/client-frontend/src/components/common/PaginationModifiers/PaginationToolsComponent.tsx
new file mode 100644
index 0000000..aaaf97f
--- /dev/null
+++ b/WebServices/client-frontend/src/components/common/PaginationModifiers/PaginationToolsComponent.tsx
@@ -0,0 +1,43 @@
+"use client";
+import React from "react";
+import { PaginationBaseProps } from "./types";
+import { PaginationStats } from "./PaginationStats";
+import { PageNavigation } from "./PageNavigation";
+import { PageSizeSelector } from "./PageSizeSelector";
+
+export const PaginationToolsComponent: React.FC<PaginationBaseProps> = ({
+  pagination,
+  updatePagination,
+  loading = false,
+  lang,
+  translations,
+}) => {
+  return (
+    <div className="flex flex-wrap justify-between items-center mt-6 gap-4">
+      {/* Pagination stats - left side */}
+      <PaginationStats 
+        pagination={pagination} 
+        updatePagination={updatePagination} 
+        lang={lang} 
+        translations={translations} 
+      />
+
+      {/* Navigation buttons - center */}
+      <PageNavigation 
+        pagination={pagination} 
+        updatePagination={updatePagination} 
+        loading={loading} 
+        lang={lang} 
+        translations={translations} 
+      />
+
+      {/* Items per page selector - right side */}
+      <PageSizeSelector 
+        pagination={pagination} 
+        updatePagination={updatePagination} 
+        lang={lang} 
+        translations={translations} 
+      />
+    </div>
+  );
+};
diff --git a/WebServices/client-frontend/src/components/common/PaginationModifiers/index.ts b/WebServices/client-frontend/src/components/common/PaginationModifiers/index.ts
new file mode 100644
index 0000000..9927a3a
--- /dev/null
+++ b/WebServices/client-frontend/src/components/common/PaginationModifiers/index.ts
@@ -0,0 +1,5 @@
+export * from './PaginationToolsComponent';
+export * from './PaginationStats';
+export * from './PageNavigation';
+export * from './PageSizeSelector';
+export * from './types';
diff --git a/WebServices/client-frontend/src/components/common/PaginationModifiers/types.ts b/WebServices/client-frontend/src/components/common/PaginationModifiers/types.ts
new file mode 100644
index 0000000..2ca8844
--- /dev/null
+++ b/WebServices/client-frontend/src/components/common/PaginationModifiers/types.ts
@@ -0,0 +1,19 @@
+import { PagePagination } from "../hooks/useDataFetching";
+
+export interface ResponseMetadata {
+  totalCount: number;
+  totalItems: number;
+  totalPages: number;
+  pageCount: number;
+  allCount?: number;
+  next: boolean;
+  back: boolean;
+}
+
+export interface PaginationBaseProps {
+  pagination: PagePagination;
+  updatePagination: (updates: Partial<PagePagination>) => void;
+  loading?: boolean;
+  lang: string;
+  translations: Record<string, any>;
+}
diff --git a/WebServices/client-frontend/src/components/common/QueryModifiers/SelectQueryModifier.tsx b/WebServices/client-frontend/src/components/common/QueryModifiers/SelectQueryModifier.tsx
new file mode 100644
index 0000000..7fd6cb3
--- /dev/null
+++ b/WebServices/client-frontend/src/components/common/QueryModifiers/SelectQueryModifier.tsx
@@ -0,0 +1,67 @@
+"use client";
+import React, { useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { SelectQueryModifierProps } from "./types";
+
+export const SelectQueryModifier: React.FC<SelectQueryModifierProps> = ({
+  fieldKey,
+  value,
+  label,
+  options,
+  placeholder,
+  onQueryChange,
+  translations,
+  lang,
+}) => {
+  const t = translations[lang] || {};
+
+  const handleChange = useCallback((newValue: string) => {
+    const formattedValue = newValue.trim() ? `%${newValue.trim()}%` : null;
+    onQueryChange(`${fieldKey}__ilike`, formattedValue);
+  }, [fieldKey, onQueryChange]);
+
+  const handleClear = useCallback(() => {
+    onQueryChange(fieldKey, null);
+    onQueryChange(`${fieldKey}__ilike`, null);
+  }, [fieldKey, onQueryChange]);
+
+  return (
+    <div className="w-full">
+      <div className="flex justify-between items-center">
+        <label className="block text-xs font-medium">
+          {label || t[fieldKey] || fieldKey}
+        </label>
+        {value && (
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-5 px-2 text-xs"
+            onClick={handleClear}
+          >
+            {t.clear || "Clear"}
+          </Button>
+        )}
+      </div>
+      <div className="w-full mt-1">
+        <Select
+          value={value}
+          onValueChange={handleChange}
+        >
+          <SelectTrigger className="w-full h-10">
+            <SelectValue
+              placeholder={placeholder || `${label || t[fieldKey] || fieldKey}...`}
+            />
+          </SelectTrigger>
+          <SelectContent>
+            {options.map((option) => (
+              <SelectItem key={option.value} value={option.value}>
+                {option.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+    </div>
+  );
+};
diff --git a/WebServices/client-frontend/src/components/common/QueryModifiers/TextQueryModifier.tsx b/WebServices/client-frontend/src/components/common/QueryModifiers/TextQueryModifier.tsx
new file mode 100644
index 0000000..91068cb
--- /dev/null
+++ b/WebServices/client-frontend/src/components/common/QueryModifiers/TextQueryModifier.tsx
@@ -0,0 +1,69 @@
+"use client";
+import React, { useCallback } from "react";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Search, X } from "lucide-react";
+import { TextQueryModifierProps } from "./types";
+
+export const TextQueryModifier: React.FC<TextQueryModifierProps> = ({
+  fieldKey,
+  value,
+  label,
+  placeholder,
+  translations,
+  lang,
+  onQueryChange,
+}) => {
+  const t = translations[lang] || {};
+  const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value; onQueryChange(fieldKey, newValue);
+  }, [fieldKey, onQueryChange]);
+
+  const handleClear = useCallback(() => {
+    onQueryChange(fieldKey, null); onQueryChange(`${fieldKey}__ilike`, null);
+  }, [fieldKey, onQueryChange]);
+
+  const handleKeyUp = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      const formattedValue = value.trim() ? `%${value.trim()}%` : null;
+      onQueryChange(`${fieldKey}__ilike`, formattedValue);
+    }
+  }, [fieldKey, value, onQueryChange]);
+
+  const handleSearch = useCallback(() => {
+    const formattedValue = value.trim() ? `%${value.trim()}%` : null;
+    onQueryChange(`${fieldKey}__ilike`, formattedValue);
+  }, [fieldKey, value, onQueryChange]);
+
+  return (
+    <div className="w-full">
+      <label className="block text-xs font-medium mb-1">{label || t[fieldKey] || fieldKey}</label>
+      <div className="relative w-full flex">
+        <div className="relative w-full">
+          <Input
+            placeholder={placeholder || `${label || t[fieldKey] || fieldKey}...`}
+            value={value || ""}
+            onChange={handleChange}
+            onKeyUp={handleKeyUp}
+            className="pl-8 pr-8 w-full h-10"
+          />
+          <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+          {value && (
+            <Button
+              variant="ghost"
+              size="icon"
+              className="absolute right-1 top-1 h-8 w-8"
+              onClick={handleClear}
+            ><X className="h-4 w-4" /></Button>
+          )}
+        </div>
+        <Button
+          variant="default"
+          size="lg"
+          className="ml-2"
+          onClick={handleSearch}
+        ><Search className="h-4 w-4" /></Button>
+      </div>
+    </div>
+  );
+};
diff --git a/WebServices/client-frontend/src/components/common/QueryModifiers/TypeQueryModifier.tsx b/WebServices/client-frontend/src/components/common/QueryModifiers/TypeQueryModifier.tsx
new file mode 100644
index 0000000..75efe6e
--- /dev/null
+++ b/WebServices/client-frontend/src/components/common/QueryModifiers/TypeQueryModifier.tsx
@@ -0,0 +1,51 @@
+"use client";
+import React, { useCallback, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { User } from "lucide-react";
+import { TypeQueryModifierProps } from "./types";
+
+export const TypeQueryModifier: React.FC<TypeQueryModifierProps & { defaultValue?: string }> = ({
+  fieldKey,
+  value,
+  options,
+  onQueryChange,
+  translations,
+  lang,
+  defaultValue,
+}) => {
+  const t = translations[lang] || {};
+
+  const handleTypeSelect = useCallback((selectedValue: string) => {
+    const formattedValue = selectedValue.trim() ? `%${selectedValue.trim()}%` : null;
+    onQueryChange(`${fieldKey}__ilike`, formattedValue);
+  }, [fieldKey, onQueryChange]);
+  
+  // Apply default value on initial render if no value is set
+  useEffect(() => {
+    if (defaultValue && !value && options.some(opt => opt.value === defaultValue)) {
+      handleTypeSelect(defaultValue);
+    }
+  }, [defaultValue, value, options, handleTypeSelect]);
+
+  if (!options || options.length === 0) return null;
+
+  return (
+    <div className="w-full flex flex-col space-y-4">
+      <div className="font-medium text-sm flex items-center">
+        <User className="mr-2 h-4 w-4" />
+        {t.typeSelection || "Type Selection"}
+      </div>
+      {options?.map((option) => (
+        <Button
+          key={option.value}
+          variant={value === option.value ? "default" : "outline"}
+          className="justify-start"
+          onClick={() => handleTypeSelect(option.value)}
+        >
+          {option.icon}
+          {option.label}
+        </Button>
+      ))}
+    </div>
+  );
+};
diff --git a/WebServices/client-frontend/src/components/common/QueryModifiers/index.ts b/WebServices/client-frontend/src/components/common/QueryModifiers/index.ts
new file mode 100644
index 0000000..8135a35
--- /dev/null
+++ b/WebServices/client-frontend/src/components/common/QueryModifiers/index.ts
@@ -0,0 +1,4 @@
+export * from './types';
+export * from './TextQueryModifier';
+export * from './SelectQueryModifier';
+export * from './TypeQueryModifier';
diff --git a/WebServices/client-frontend/src/components/common/QueryModifiers/types.ts b/WebServices/client-frontend/src/components/common/QueryModifiers/types.ts
new file mode 100644
index 0000000..81c760f
--- /dev/null
+++ b/WebServices/client-frontend/src/components/common/QueryModifiers/types.ts
@@ -0,0 +1,35 @@
+import { ReactNode } from 'react';
+
+export interface QueryModifierProps {
+  onQueryChange: (key: string, value: string | null) => void;
+  translations: Record<string, Record<string, string>>;
+  lang: string;
+}
+
+export interface TextQueryModifierProps extends QueryModifierProps {
+  fieldKey: string;
+  value: string;
+  label: string;
+  placeholder?: string;
+}
+
+export interface SelectQueryModifierProps extends QueryModifierProps {
+  fieldKey: string;
+  value: string;
+  label: string;
+  options: { value: string; label: string }[];
+  placeholder?: string;
+}
+
+export interface TypeQueryModifierProps extends QueryModifierProps {
+  fieldKey: string;
+  value: string;
+  options: { value: string; label: string; icon?: React.ReactNode }[];
+}
+
+export interface QueryModifierValue {
+  key: string;
+  value: string;
+}
+
+export type QueryModifierResult = Record<string, string>;
diff --git a/WebServices/client-frontend/src/components/common/ReadMe.md b/WebServices/client-frontend/src/components/common/ReadMe.md
new file mode 100644
index 0000000..806f089
--- /dev/null
+++ b/WebServices/client-frontend/src/components/common/ReadMe.md
@@ -0,0 +1,128 @@
+# EVYOS Management Frontend - Common Components
+
+## Overview
+
+This directory contains modular, reusable components for building consistent UIs across the EVYOS Management Frontend. These components follow a modular design pattern where complex functionality is broken down into smaller, focused components with clear responsibilities.
+
+## Component Structure
+
+### ActionButtonsDisplay
+- **CreateButton**: A button component for triggering create actions with translation support
+- **CustomButtonComponent**: Configurable button component with selection state support
+- **types.ts**: Shared type definitions for button components
+
+### CardDisplay
+- **CardDisplay**: Main component for displaying data in a responsive grid layout
+- **CardItem**: Individual card component with customizable fields and actions
+- **CardSkeleton**: Loading state placeholder for cards
+- **schema.ts**: API response and data schemas
+- **utils.ts**: Helper functions for card operations
+
+### FormDisplay
+- **FormDisplay**: Container component that handles form mode switching
+- **CreateComponent**: Form implementation for creating new records
+- **UpdateComponent**: Form implementation for updating existing records
+- **ViewComponent**: Read-only view of record details
+- **types.ts**: Type definitions for form components and modes
+
+### HeaderSelections
+- **GridSelectionComponent**: Controls the number of columns in card grid layouts
+- **LanguageSelectionComponent**: Language switcher with translation support
+
+### PaginationModifiers
+- **PaginationToolsComponent**: Main container for pagination controls
+- **PaginationStats**: Displays record count information
+- **PageNavigation**: Handles page navigation buttons with smart page number calculation
+- **PageSizeSelector**: Controls items per page selection
+- **types.ts**: Type definitions including ResponseMetadata interface
+
+### QueryModifiers
+- **TextQueryModifier**: Text search input with clear functionality
+- **SelectQueryModifier**: Dropdown selection for filtering
+- **TypeQueryModifier**: Button-based type selection
+- **types.ts**: Shared interfaces for query components
+
+### Hooks
+- **useApiData**: Custom hook for fetching and managing API data with pagination
+- **useDataFetching**: Base hook for data fetching with pagination, sorting, and filtering
+
+## Usage Example
+
+```tsx
+// Import components
+import { CardDisplay } from "@/components/common/CardDisplay";
+import { TextQueryModifier, SelectQueryModifier, TypeQueryModifier } from "@/components/common/QueryModifiers";
+import { CreateButton } from "@/components/common/ActionButtonsDisplay/CreateButton";
+import { PaginationToolsComponent } from "@/components/common/PaginationModifiers/PaginationToolsComponent";
+import { GridSelectionComponent, GridSize } from "@/components/common/HeaderSelections/GridSelectionComponent";
+import { LanguageSelectionComponent, Language } from "@/components/common/HeaderSelections/LanguageSelectionComponent";
+import { FormDisplay } from "@/components/common/FormDisplay/FormDisplay";
+import { useApiData } from "@/components/common/hooks/useApiData";
+
+// Use the API data hook
+const {
+  data,
+  pagination,
+  loading,
+  error,
+  updatePagination,
+  refetch
+} = useApiData<YourDataType>("/api/your-endpoint");
+
+// Define fields to display
+const showFields = ["field1", "field2", "field3"];
+
+// Example component usage
+<Card>
+  <CardContent>
+    <TextQueryModifier
+      fieldKey="name"
+      value={pagination.query["name__ilike"] ? pagination.query["name__ilike"].replace(/%/g, "") : ""}
+      label="Search"
+      onQueryChange={handleQueryChange}
+      translations={translations}
+      lang={lang}
+    />
+  </CardContent>
+</Card>
+
+<CardDisplay
+  showFields={showFields}
+  data={data}
+  lang={lang}
+  translations={translations}
+  error={error}
+  loading={loading}
+  titleField="name"
+  onCardClick={handleCardClick}
+  gridCols={gridCols}
+  showViewIcon={true}
+  showUpdateIcon={true}
+  onViewClick={handleViewClick}
+  onUpdateClick={handleUpdateClick}
+/>
+```
+
+## API Response Structure
+
+Components expect API responses in this format:
+
+```typescript
+interface ApiResponse<T> {
+  data: T[];
+  pagination: {
+    page: number;
+    size: number;
+    totalCount: number;
+    totalItems: number;
+    totalPages: number;
+    pageCount: number;
+    allCount?: number;
+    orderField: string[];
+    orderType: string[];
+    query: Record<string, any>;
+    next: boolean;
+    back: boolean;
+  };
+}
+```
diff --git a/WebServices/client-frontend/src/components/common/Screenshot from 2025-04-29 19-36-45.png b/WebServices/client-frontend/src/components/common/Screenshot from 2025-04-29 19-36-45.png
new file mode 100644
index 0000000..309f151
Binary files /dev/null and b/WebServices/client-frontend/src/components/common/Screenshot from 2025-04-29 19-36-45.png differ
diff --git a/WebServices/client-frontend/src/components/common/SortingComponent/SortingComponent.tsx b/WebServices/client-frontend/src/components/common/SortingComponent/SortingComponent.tsx
new file mode 100644
index 0000000..2d1a4f8
--- /dev/null
+++ b/WebServices/client-frontend/src/components/common/SortingComponent/SortingComponent.tsx
@@ -0,0 +1,49 @@
+"use client";
+import React from "react";
+import { Button } from "@/components/ui/button";
+import { ArrowDown, ArrowUp } from "lucide-react";
+import { SortingComponentProps, SortField } from "./types";
+
+export const SortingComponent: React.FC<SortingComponentProps> = ({
+  sortField,
+  sortDirection,
+  onSort,
+  translations,
+  lang,
+  sortFields = [
+    { key: "name", label: "Name" },
+    { key: "code", label: "Code" },
+    { key: "type", label: "Type" },
+    { key: "created_at", label: "Created" },
+  ],
+}) => {
+  const t = translations?.[lang] || {};
+
+  return (
+    <div className="flex flex-wrap gap-2 my-4">
+      <div className="text-sm font-medium mr-2 flex items-center">
+        {t.sortBy || "Sort by:"}
+      </div>
+      {sortFields.map((field) => (
+        <Button
+          key={field.key}
+          variant={sortField === field.key ? "default" : "outline"}
+          size="sm"
+          onClick={() => onSort(field.key)}
+          className="flex items-center"
+        >
+          {t[field.key] || field.label}
+          {sortField === field.key && (
+            <>
+              {sortDirection === "asc" ? (
+                <ArrowUp className="ml-1 h-3 w-3" />
+              ) : (
+                <ArrowDown className="ml-1 h-3 w-3" />
+              )}
+            </>
+          )}
+        </Button>
+      ))}
+    </div>
+  );
+};
diff --git a/WebServices/client-frontend/src/components/common/SortingComponent/index.ts b/WebServices/client-frontend/src/components/common/SortingComponent/index.ts
new file mode 100644
index 0000000..11485fc
--- /dev/null
+++ b/WebServices/client-frontend/src/components/common/SortingComponent/index.ts
@@ -0,0 +1,2 @@
+export * from './SortingComponent';
+export * from './types';
diff --git a/WebServices/client-frontend/src/components/common/SortingComponent/types.ts b/WebServices/client-frontend/src/components/common/SortingComponent/types.ts
new file mode 100644
index 0000000..e7486b1
--- /dev/null
+++ b/WebServices/client-frontend/src/components/common/SortingComponent/types.ts
@@ -0,0 +1,13 @@
+export interface SortField {
+  key: string;
+  label: string;
+}
+
+export interface SortingComponentProps {
+  sortField: string | null;
+  sortDirection: "asc" | "desc" | null;
+  onSort: (field: string) => void;
+  translations?: Record<string, any>;
+  lang: string;
+  sortFields?: SortField[];
+}
diff --git a/WebServices/client-frontend/src/components/common/hooks/useApiData.ts b/WebServices/client-frontend/src/components/common/hooks/useApiData.ts
new file mode 100644
index 0000000..3f8ec3d
--- /dev/null
+++ b/WebServices/client-frontend/src/components/common/hooks/useApiData.ts
@@ -0,0 +1,51 @@
+import { useDataFetching, ApiResponse } from "./useDataFetching";
+import { RequestParams } from "../schemas";
+import { defaultPaginationResponse } from "@/app/api/utils/types";
+
+/**
+ * Hook for fetching data from Next.js API routes
+ * @param endpoint The API endpoint to fetch data from (e.g., '/api/applications')
+ * @param initialParams Initial request parameters
+ * @returns Object containing data, pagination, loading, error, updatePagination, and refetch
+ */
+export function useApiData<T>(
+  endpoint: string,
+  initialParams: Partial<RequestParams> = {}
+) {
+  const fetchFromApi = async (
+    params: RequestParams
+  ): Promise<ApiResponse<T>> => {
+    try {
+      const requestBody = {
+        page: params.page,
+        size: params.size,
+        orderField: params.orderField,
+        orderType: params.orderType,
+        query: params.query,
+      };
+
+      const response = await fetch(endpoint, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(requestBody),
+      });
+
+      if (!response.ok) {
+        throw new Error(`API request failed with status ${response.status}`);
+      }
+
+      return await response.json();
+    } catch (error) {
+      console.error("Error fetching data from API:", error);
+
+      return {
+        data: [],
+        pagination: defaultPaginationResponse,
+      };
+    }
+  };
+
+  return useDataFetching<T>(fetchFromApi, initialParams);
+}
diff --git a/WebServices/client-frontend/src/components/common/hooks/useDashboardPage.ts b/WebServices/client-frontend/src/components/common/hooks/useDashboardPage.ts
new file mode 100644
index 0000000..3f34ae8
--- /dev/null
+++ b/WebServices/client-frontend/src/components/common/hooks/useDashboardPage.ts
@@ -0,0 +1,70 @@
+import {
+  retrieveApplicationbyUrl,
+  retrievePageList,
+} from "@/apicalls/cookies/token";
+import { retrievePageByUrl } from "@/eventRouters/pageRetriever";
+import { PageProps } from "@/validations/translations/translation";
+import React from "react";
+
+export interface DashboardPageParams {
+  pageUrl: string;
+  searchParams: Promise<{ [key: string]: string | undefined }>;
+}
+
+export interface DashboardPageResult {
+  activePage: string;
+  searchParamsInstance: { [key: string]: string | undefined };
+  lang: "en" | "tr";
+  PageComponent: React.FC<PageProps>;
+  siteUrlsList: string[];
+}
+
+/**
+ * Hook to retrieve and prepare dashboard page data
+ * Throws errors for Next.js error boundary to catch
+ *
+ * @param params The dashboard page parameters
+ * @returns The processed dashboard page data
+ * @throws Error if page URL is invalid or page component is not found
+ */
+export async function useDashboardPage({
+  pageUrl,
+  searchParams,
+}: DashboardPageParams): Promise<DashboardPageResult> {
+  let searchParamsInstance: { [key: string]: string | undefined } = {};
+  const defaultLang = "en";
+
+  if (!pageUrl || typeof pageUrl !== "string") {
+    throw new Error(`Invalid page URL: ${pageUrl}`);
+  }
+
+  try {
+    searchParamsInstance = await searchParams;
+  } catch (err) {
+    console.error("Error resolving search parameters:", err);
+    throw err;
+  }
+
+  const applicationName = (await retrieveApplicationbyUrl(pageUrl)) || "";
+  const siteUrlsList = (await retrievePageList()) || [];
+  const lang = (searchParamsInstance?.lang as "en" | "tr") || defaultLang;
+  if (lang !== "en" && lang !== "tr") {
+    console.warn(
+      `Invalid language "${lang}" specified, falling back to "${defaultLang}"`
+    );
+  }
+
+  const PageComponent = retrievePageByUrl(pageUrl, applicationName);
+  if (!PageComponent) {
+    throw new Error(`Page component not found for URL: ${pageUrl}`);
+  }
+  return {
+    activePage: pageUrl,
+    searchParamsInstance,
+    lang,
+    PageComponent,
+    siteUrlsList,
+  };
+}
+
+export default useDashboardPage;
diff --git a/WebServices/client-frontend/src/components/common/hooks/useDataFetching.ts b/WebServices/client-frontend/src/components/common/hooks/useDataFetching.ts
new file mode 100644
index 0000000..0fc0539
--- /dev/null
+++ b/WebServices/client-frontend/src/components/common/hooks/useDataFetching.ts
@@ -0,0 +1,167 @@
+import { useState, useEffect, useCallback, useRef } from "react";
+import { RequestParams, ResponseMetadata } from "../schemas";
+
+export interface PagePagination extends RequestParams, ResponseMetadata {}
+
+export interface ApiResponse<T> {
+  data: T[];
+  pagination: PagePagination;
+}
+
+/**
+ * Generic data fetching hook that can be used with any API endpoint
+ * @param fetchFunction - The API function to call for fetching data
+ * @param initialParams - Initial request parameters
+ * @returns Object containing data, pagination, loading, error, updatePagination, and refetch
+ */
+export function useDataFetching<T>(
+  fetchFunction: (params: RequestParams) => Promise<ApiResponse<T>>,
+  initialParams: Partial<RequestParams> = {}
+) {
+  const [data, setData] = useState<T[]>([]);
+
+  // Request parameters - these are controlled by the user
+  const [requestParams, setRequestParams] = useState<RequestParams>({
+    page: initialParams.page || 1,
+    size: initialParams.size || 10,
+    orderField: initialParams.orderField || ["uu_id"],
+    orderType: initialParams.orderType || ["asc"],
+    query: initialParams.query || {},
+  });
+
+  // Response metadata - these come from the API
+  const [responseMetadata, setResponseMetadata] = useState<ResponseMetadata>({
+    totalCount: 0,
+    totalItems: 0,
+    totalPages: 0,
+    pageCount: 0,
+    next: true,
+    back: false,
+  });
+
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const fetchDataFromApi = useCallback(async () => {
+    setLoading(true);
+    try {
+      const result = await fetchFunction({
+        page: requestParams.page,
+        size: requestParams.size,
+        orderField: requestParams.orderField,
+        orderType: requestParams.orderType,
+        query: requestParams.query,
+      });
+
+      if (result && result.data) {
+        setData(result.data);
+
+        // Update response metadata from API response
+        if (result.pagination) {
+          setResponseMetadata({
+            totalCount: result.pagination.totalCount || 0,
+            totalItems: result.pagination.totalCount || 0,
+            totalPages: result.pagination.totalPages || 1,
+            pageCount: result.pagination.pageCount || 0,
+            allCount: result.pagination.allCount || 0,
+            next: result.pagination.next || false,
+            back: result.pagination.back || false,
+          });
+        }
+      }
+
+      setError(null);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error("Unknown error"));
+    } finally {
+      setLoading(false);
+    }
+  }, [
+    fetchFunction,
+    requestParams.page,
+    requestParams.size,
+    requestParams.orderField,
+    requestParams.orderType,
+    requestParams.query,
+  ]);
+
+  const initialMountRef = useRef(true);
+  const prevRequestParamsRef = useRef<RequestParams>(requestParams);
+
+  useEffect(() => {
+    const paramsChanged =
+      JSON.stringify(prevRequestParamsRef.current) !==
+      JSON.stringify(requestParams);
+
+    if (initialMountRef.current || paramsChanged) {
+      const timer = setTimeout(() => {
+        fetchDataFromApi();
+        initialMountRef.current = false;
+        prevRequestParamsRef.current = { ...requestParams };
+      }, 300);
+
+      return () => clearTimeout(timer);
+    }
+  }, [fetchDataFromApi, requestParams]);
+
+  const updatePagination = useCallback((updates: Partial<RequestParams>) => {
+    if (updates.query) {
+      const transformedQuery: Record<string, any> = {};
+
+      Object.entries(updates.query).forEach(([key, value]) => {
+        if (
+          typeof value === "string" &&
+          !key.includes("__") &&
+          value.trim() !== ""
+        ) {
+          transformedQuery[`${key}__ilike`] = `%${value}%`;
+        } else {
+          transformedQuery[key] = value;
+        }
+      });
+
+      updates.query = transformedQuery;
+      if (!updates.hasOwnProperty("page")) {
+        updates.page = 1;
+      }
+      setResponseMetadata({
+        totalCount: 0,
+        totalItems: 0,
+        totalPages: 0,
+        pageCount: 0,
+        allCount: 0,
+        next: true,
+        back: false,
+      });
+    }
+
+    setRequestParams((prev) => ({
+      ...prev,
+      ...updates,
+    }));
+  }, []);
+
+  // Create a combined refetch function
+  const refetch = useCallback(() => {
+    setRequestParams((prev) => ({
+      ...prev,
+      page: 1,
+    }));
+    fetchDataFromApi();
+  }, [fetchDataFromApi]);
+
+  // Combine request params and response metadata
+  const pagination: PagePagination = {
+    ...requestParams,
+    ...responseMetadata,
+  };
+
+  return {
+    data,
+    pagination,
+    loading,
+    error,
+    updatePagination,
+    refetch,
+  };
+}
diff --git a/WebServices/client-frontend/src/components/common/hooks/useStandardApiFetch.ts b/WebServices/client-frontend/src/components/common/hooks/useStandardApiFetch.ts
new file mode 100644
index 0000000..a9b775b
--- /dev/null
+++ b/WebServices/client-frontend/src/components/common/hooks/useStandardApiFetch.ts
@@ -0,0 +1,181 @@
+import { useState, useEffect } from 'react';
+
+/**
+ * Cache options for the fetch request
+ */
+export type CacheOptions = {
+  /** Whether to cache the request (default: true) */
+  cache?: boolean;
+  /** Revalidate time in seconds (if not provided, uses Next.js defaults) */
+  revalidate?: number;
+  /** Force cache to be revalidated (equivalent to cache: 'no-store' in fetch) */
+  noStore?: boolean;
+};
+
+/**
+ * Request options for the fetch
+ */
+export type FetchOptions = {
+  /** HTTP method (default: 'GET') */
+  method?: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
+  /** Request headers */
+  headers?: HeadersInit;
+  /** Request body (for POST, PUT, PATCH) */
+  body?: any;
+};
+
+/**
+ * A hook for fetching data from an API endpoint without pagination using Next.js fetch
+ * @param url The API endpoint URL
+ * @param initialParams Initial query parameters
+ * @param options Additional fetch options
+ * @param cacheOptions Cache control options
+ * @returns Object containing data, loading state, error state, and refetch function
+ */
+export function useStandardApiFetch<T>(
+  url: string, 
+  initialParams: Record<string, any> = {}, 
+  options: FetchOptions = {},
+  cacheOptions: CacheOptions = { cache: true }
+) {
+  const [data, setData] = useState<T | null>(null);
+  const [params, setParams] = useState<Record<string, any>>(initialParams);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  /**
+   * Builds the URL with query parameters
+   */
+  const buildUrl = () => {
+    const queryParams = new URLSearchParams();
+    
+    // Add all non-null and non-empty params
+    Object.entries(params).forEach(([key, value]) => {
+      if (value !== null && value !== '') {
+        queryParams.append(key, String(value));
+      }
+    });
+    
+    const queryString = queryParams.toString();
+    return queryString ? `${url}?${queryString}` : url;
+  };
+
+  /**
+   * Configure fetch options including cache settings
+   */
+  const getFetchOptions = (): RequestInit => {
+    const { method = 'GET', headers = {}, body } = options;
+    
+    const fetchOptions: RequestInit = {
+      method,
+      headers: {
+        'Content-Type': 'application/json',
+        ...headers,
+      },
+    };
+    
+    // Add body for non-GET requests if provided
+    if (method !== 'GET' && body) {
+      fetchOptions.body = typeof body === 'string' ? body : JSON.stringify(body);
+    }
+    
+    // Configure cache options
+    if (!cacheOptions.cache) {
+      fetchOptions.cache = 'no-store';
+    } else if (cacheOptions.noStore) {
+      fetchOptions.cache = 'no-store';
+    } else if (cacheOptions.revalidate !== undefined) {
+      fetchOptions.next = { revalidate: cacheOptions.revalidate };
+    }
+    
+    return fetchOptions;
+  };
+
+  const fetchData = async () => {
+    setLoading(true);
+    try {
+      const fullUrl = buildUrl();
+      const fetchOptions = getFetchOptions();
+      
+      const response = await fetch(fullUrl, fetchOptions);
+      
+      if (!response.ok) {
+        throw new Error(`HTTP error! Status: ${response.status}`);
+      }
+      
+      const responseData = await response.json();
+      setData(responseData);
+      setError(null);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error('An unknown error occurred'));
+      setData(null);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, [url, JSON.stringify(params), JSON.stringify(options), JSON.stringify(cacheOptions)]);
+
+  /**
+   * Update the query parameters and trigger a refetch
+   * @param newParams New parameters to merge with existing ones
+   */
+  const updateParams = (newParams: Record<string, any>) => {
+    // Filter out null or empty string values
+    const filteredParams = Object.entries(newParams).reduce((acc, [key, value]) => {
+      if (value !== null && value !== '') {
+        acc[key] = value;
+      }
+      return acc;
+    }, {} as Record<string, any>);
+
+    setParams(prev => ({
+      ...prev,
+      ...filteredParams
+    }));
+  };
+
+  /**
+   * Reset all parameters to initial values
+   */
+  const resetParams = () => {
+    setParams(initialParams);
+  };
+
+  /**
+   * Manually trigger a refetch of the data
+   */
+  const refetch = () => {
+    fetchData();
+  };
+
+  return { 
+    data, 
+    loading, 
+    error, 
+    updateParams,
+    resetParams,
+    refetch 
+  };
+}
+
+// // Basic usage (with default caching)
+// const { data, loading, error, refetch } = useStandardApiFetch<schema.YourDataType>('/api/your-endpoint');
+
+// // With no caching (for data that changes frequently)
+// const { data, loading, error, refetch } = useStandardApiFetch<schema.YourDataType>(
+//   '/api/your-endpoint',
+//   {},
+//   {},
+//   { cache: false }
+// );
+
+// // With specific revalidation time
+// const { data, loading, error, refetch } = useStandardApiFetch<schema.YourDataType>(
+//   '/api/your-endpoint',
+//   {},
+//   {},
+//   { revalidate: 60 } // Revalidate every 60 seconds
+// );
diff --git a/WebServices/client-frontend/src/components/common/index.ts b/WebServices/client-frontend/src/components/common/index.ts
new file mode 100644
index 0000000..2a47d2e
--- /dev/null
+++ b/WebServices/client-frontend/src/components/common/index.ts
@@ -0,0 +1,26 @@
+// Export all components from the common directory
+export { CardDisplay } from "./CardDisplay";
+export { SortingComponent, type SortingComponentProps, type SortField } from "./SortingComponent";
+
+// Export QueryModifiers
+export { 
+  TextQueryModifier, 
+  SelectQueryModifier, 
+  TypeQueryModifier,
+  type QueryModifierProps,
+  type TextQueryModifierProps,
+  type SelectQueryModifierProps,
+  type TypeQueryModifierProps,
+  type QueryModifierValue,
+  type QueryModifierResult
+} from "./QueryModifiers";
+
+// Export hooks
+export {
+  useDataFetching,
+  type RequestParams,
+  type ResponseMetadata,
+  type PagePagination,
+  type ApiResponse,
+} from "./hooks/useDataFetching";
+export { useApiData } from "./hooks/useApiData";
diff --git a/WebServices/client-frontend/src/components/common/schemas.ts b/WebServices/client-frontend/src/components/common/schemas.ts
new file mode 100644
index 0000000..17d62d1
--- /dev/null
+++ b/WebServices/client-frontend/src/components/common/schemas.ts
@@ -0,0 +1,45 @@
+// Carried schemas from any request and response
+
+// Common request parameters interface
+export interface RequestParams {
+  page: number;
+  size: number;
+  orderField: string[];
+  orderType: string[];
+  query: Record<string, any>;
+}
+
+// Common response metadata interface
+export interface ResponseMetadata {
+  totalCount: number;
+  totalItems: number;
+  totalPages: number;
+  pageCount: number;
+  allCount?: number;
+  next: boolean;
+  back: boolean;
+}
+
+// Generic API response interface
+export interface ApiResponse<T> {
+  data: T[];
+  metadata: ResponseMetadata;
+}
+
+// Pagination state interface
+export interface PagePagination {
+  page: number;
+  size: number;
+  orderField: string[];
+  orderType: string[];
+  query: Record<string, any>;
+}
+
+export type Language = "en" | "tr";
+
+export interface LanguageSelectionComponentProps {
+  lang: Language;
+  setLang: (lang: Language) => void;
+  translations?: Record<string, any>;
+  className?: string;
+}
diff --git a/WebServices/client-frontend/src/components/header/Header.tsx b/WebServices/client-frontend/src/components/header/Header.tsx
index cd870fd..80f5d73 100644
--- a/WebServices/client-frontend/src/components/header/Header.tsx
+++ b/WebServices/client-frontend/src/components/header/Header.tsx
@@ -112,7 +112,6 @@ const Header: React.FC<HeaderProps> = ({ lang, setLang }) => {
 
   const router = useRouter();
 
-  // Close dropdowns when clicking outside
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       if (
@@ -142,7 +141,6 @@ const Header: React.FC<HeaderProps> = ({ lang, setLang }) => {
   }, []);
 
   const handleLogout = () => {
-    // Implement logout functionality
     console.log("Logging out...");
     logoutActiveSession()
       .then(() => {
diff --git a/WebServices/client-frontend/src/components/layouts/DashboardLayout.tsx b/WebServices/client-frontend/src/components/layouts/DashboardLayout.tsx
index 541414f..1a7bc76 100644
--- a/WebServices/client-frontend/src/components/layouts/DashboardLayout.tsx
+++ b/WebServices/client-frontend/src/components/layouts/DashboardLayout.tsx
@@ -23,6 +23,7 @@ export const DashboardLayout: React.FC<DashboardLayoutProps> = ({
   children,
   lang,
   activePage,
+  siteUrls,
 }) => {
   const [language, setLanguage] = useState<Language>(lang as Language);
 
@@ -30,7 +31,7 @@ export const DashboardLayout: React.FC<DashboardLayoutProps> = ({
     <div className="min-h-screen min-w-screen flex h-screen w-screen">
       {/* Sidebar */}
       <aside className="w-1/4 border-r p-4 overflow-y-auto">
-        <ClientMenu lang={language} activePage={activePage} />
+        <ClientMenu lang={language} activePage={activePage} siteUrls={siteUrls} />
       </aside>
 
       {/* Main Content Area */}
diff --git a/WebServices/client-frontend/src/components/layouts/schema.ts b/WebServices/client-frontend/src/components/layouts/schema.ts
index 7e5018e..eb8150c 100644
--- a/WebServices/client-frontend/src/components/layouts/schema.ts
+++ b/WebServices/client-frontend/src/components/layouts/schema.ts
@@ -4,4 +4,5 @@ export interface DashboardLayoutProps {
   children: ReactNode;
   lang: "en" | "tr";
   activePage: string;
+  siteUrls: string[];
 }
diff --git a/WebServices/client-frontend/src/components/menu/store.tsx b/WebServices/client-frontend/src/components/menu/IndexStore/store.tsx
similarity index 96%
rename from WebServices/client-frontend/src/components/menu/store.tsx
rename to WebServices/client-frontend/src/components/menu/IndexStore/store.tsx
index c04419f..3c18d2e 100644
--- a/WebServices/client-frontend/src/components/menu/store.tsx
+++ b/WebServices/client-frontend/src/components/menu/IndexStore/store.tsx
@@ -22,7 +22,7 @@ const Build = {
     tr: "Apartman",
     en: "Build",
   },
-  siteUrl: "/build",
+  siteUrl: "/buildings",
 };
 
 const Dashboard = {
@@ -40,7 +40,7 @@ const BuildParts = {
     tr: "Daireler",
     en: "Build Parts",
   },
-  siteUrl: "/build/parts",
+  siteUrl: "/buildings/parts",
 };
 
 const BuildArea = {
@@ -49,14 +49,14 @@ const BuildArea = {
     tr: "Daire Alanları",
     en: "Build Area",
   },
-  siteUrl: "/build/area",
+  siteUrl: "/buildings/area",
 };
 
 const ManagementAccounting = {
   name: "ManagementAccounting",
   lg: {
     tr: "Yönetim Cari Hareketler",
-    en: "ManagementAccounting",
+    en: "Management Accounting",
   },
   siteUrl: "/management/accounting",
 };
@@ -76,7 +76,7 @@ const BuildPartsAccounting = {
     tr: "Daire Cari Hareketler",
     en: "Build Parts Accounting",
   },
-  siteUrl: "/build/parts/accounting",
+  siteUrl: "/buildings/parts/accounting",
 };
 
 const AnnualMeeting = {
diff --git a/WebServices/client-frontend/src/components/menu/NavigationMenu.tsx b/WebServices/client-frontend/src/components/menu/NavigationMenu.tsx
deleted file mode 100644
index 7a37da2..0000000
--- a/WebServices/client-frontend/src/components/menu/NavigationMenu.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-"use client";
-import React, { useState } from "react";
-import Link from "next/link";
-import { Home, ChevronDown, ChevronRight } from "lucide-react";
-import type { LanguageTranslation } from "./handler";
-
-interface NavigationMenuProps {
-  transformedMenu: any[];
-  lang: string;
-  activePage?: string;
-}
-
-const NavigationMenu: React.FC<NavigationMenuProps> = ({ transformedMenu, lang, activePage }) => {
-  // State to track which menu items are expanded
-  const [firstLayerIndex, setFirstLayerIndex] = useState<number>(-1);
-  const [secondLayerIndex, setSecondLayerIndex] = useState<number>(-1);
-
-  // Handle first level menu click
-  const handleFirstLevelClick = (index: number) => {
-    setFirstLayerIndex(index === firstLayerIndex ? -1 : index);
-    setSecondLayerIndex(-1); // Reset second layer selection when first layer changes
-  };
-
-  // Handle second level menu click
-  const handleSecondLevelClick = (index: number) => {
-    setSecondLayerIndex(index === secondLayerIndex ? -1 : index);
-  };
-
-  return (
-    <nav className="flex flex-col">
-      {transformedMenu &&
-        transformedMenu.map((item, firstIndex) => (
-          <div
-            key={item.name}
-            className="border-b border-gray-100 last:border-b-0"
-          >
-            <button
-              onClick={() => handleFirstLevelClick(firstIndex)}
-              className={`flex items-center justify-between w-full p-4 text-left transition-colors ${
-                firstIndex === firstLayerIndex
-                  ? "bg-emerald-50 text-emerald-700"
-                  : "text-gray-700 hover:bg-gray-50"
-              }`}
-            >
-              <span className="font-medium">{item.lg[lang]}</span>
-              {firstIndex === firstLayerIndex ? (
-                <ChevronDown className="h-4 w-4" />
-              ) : (
-                <ChevronRight className="h-4 w-4" />
-              )}
-            </button>
-
-            {/* First level separator and second layer */}
-            {firstIndex === firstLayerIndex && (
-              <div className="bg-gray-50 border-t border-gray-100">
-                {item.subList.map((subItem: any, secondIndex: number) => (
-                  <div
-                    key={subItem.name}
-                    className="border-b border-gray-100 last:border-b-0"
-                  >
-                    <button
-                      onClick={() => handleSecondLevelClick(secondIndex)}
-                      className={`flex items-center justify-between w-full p-3 pl-8 text-left transition-colors ${
-                        secondIndex === secondLayerIndex
-                          ? "bg-emerald-100 text-emerald-800"
-                          : "text-gray-600 hover:bg-gray-100"
-                      }`}
-                    >
-                      <span className="font-medium">{subItem.lg[lang]}</span>
-                      {secondIndex === secondLayerIndex ? (
-                        <ChevronDown className="h-4 w-4" />
-                      ) : (
-                        <ChevronRight className="h-4 w-4" />
-                      )}
-                    </button>
-
-                    {/* Second level separator and third layer */}
-                    {firstIndex === firstLayerIndex &&
-                      secondIndex === secondLayerIndex && (
-                        <div className="bg-gray-100 border-t border-gray-200">
-                          {subItem.subList.map((subSubItem: any) => {
-                            // Check if this is the active page
-                            const isActive = activePage === subSubItem.siteUrl;
-                            
-                            return (
-                              <Link
-                                key={subSubItem.name}
-                                href={subSubItem.siteUrl}
-                                className={`flex items-center w-full p-3 pl-12 text-left transition-colors ${isActive 
-                                  ? "bg-emerald-200 text-emerald-900 font-medium" 
-                                  : "text-gray-700 hover:bg-gray-200"}`}
-                              >
-                                <Home className={`h-4 w-4 mr-2 ${isActive ? "text-emerald-700" : "text-gray-500"}`} />
-                                <span>{subSubItem.lg[lang]}</span>
-                              </Link>
-                            );
-                          })}
-                        </div>
-                      )}
-                  </div>
-                ))}
-              </div>
-            )}
-          </div>
-        ))}
-    </nav>
-  );
-};
-
-export default NavigationMenu;
diff --git a/WebServices/client-frontend/src/components/menu/NavigationMenu/MenuItem.tsx b/WebServices/client-frontend/src/components/menu/NavigationMenu/MenuItem.tsx
new file mode 100644
index 0000000..fadba39
--- /dev/null
+++ b/WebServices/client-frontend/src/components/menu/NavigationMenu/MenuItem.tsx
@@ -0,0 +1,62 @@
+"use client";
+import React from "react";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { MenuItemProps } from "./types";
+import SubMenuItem from "./SubMenuItem";
+
+const MenuItem: React.FC<MenuItemProps> = ({
+  item,
+  firstIndex,
+  firstLayerIndex,
+  secondLayerIndex,
+  activeMenuPath,
+  lang,
+  activePage,
+  handleFirstLevelClick,
+  handleSecondLevelClick,
+}) => {
+  const isFirstActive = activeMenuPath?.first === firstIndex;
+
+  return (
+    <div key={item.name} className="border-b border-gray-100 last:border-b-0">
+      <button
+        onClick={() => handleFirstLevelClick(firstIndex)}
+        className={`flex items-center justify-between w-full p-4 text-left transition-colors ${
+          firstIndex === firstLayerIndex || isFirstActive
+            ? "bg-emerald-50 text-emerald-700"
+            : "text-gray-700 hover:bg-gray-50"
+        }`}
+      >
+        <span className="font-medium">{item.lg[lang as keyof typeof item.lg]}</span>
+        {firstIndex === firstLayerIndex || isFirstActive ? (
+          <ChevronDown className="h-4 w-4" />
+        ) : (
+          <ChevronRight className="h-4 w-4" />
+        )}
+      </button>
+
+      {/* First level separator and second layer */}
+      {(firstIndex === firstLayerIndex || isFirstActive) && (
+        <div className="bg-gray-50 border-t border-gray-100">
+          {item.subList.map((subItem, secondIndex) => (
+            <SubMenuItem
+              key={subItem.name}
+              subItem={subItem}
+              secondIndex={secondIndex}
+              firstIndex={firstIndex}
+              firstLayerIndex={firstLayerIndex}
+              secondLayerIndex={secondLayerIndex}
+              isFirstActive={isFirstActive}
+              activeMenuPath={activeMenuPath}
+              lang={lang}
+              activePage={activePage}
+              handleSecondLevelClick={handleSecondLevelClick}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default MenuItem;
diff --git a/WebServices/client-frontend/src/components/menu/NavigationMenu/MenuLink.tsx b/WebServices/client-frontend/src/components/menu/NavigationMenu/MenuLink.tsx
new file mode 100644
index 0000000..bb15318
--- /dev/null
+++ b/WebServices/client-frontend/src/components/menu/NavigationMenu/MenuLink.tsx
@@ -0,0 +1,25 @@
+"use client";
+import React from "react";
+import Link from "next/link";
+import { Home } from "lucide-react";
+import { MenuLinkProps } from "./types";
+
+const MenuLink: React.FC<MenuLinkProps> = ({ subSubItem, activePage, lang }) => {
+  const isActive = activePage === subSubItem.siteUrl;
+  
+  return (
+    <Link
+      href={subSubItem.siteUrl}
+      className={`flex items-center w-full p-3 pl-12 text-left transition-colors ${
+        isActive 
+          ? "bg-emerald-200 text-emerald-900 font-medium" 
+          : "text-gray-700 hover:bg-gray-200"
+      }`}
+    >
+      <Home className={`h-4 w-4 mr-2 ${isActive ? "text-emerald-700" : "text-gray-500"}`} />
+      <span>{subSubItem.lg[lang as keyof typeof subSubItem.lg]}</span>
+    </Link>
+  );
+};
+
+export default MenuLink;
diff --git a/WebServices/client-frontend/src/components/menu/NavigationMenu/SubMenuItem.tsx b/WebServices/client-frontend/src/components/menu/NavigationMenu/SubMenuItem.tsx
new file mode 100644
index 0000000..5ed98d4
--- /dev/null
+++ b/WebServices/client-frontend/src/components/menu/NavigationMenu/SubMenuItem.tsx
@@ -0,0 +1,56 @@
+"use client";
+import React from "react";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { SubMenuItemProps } from "./types";
+import MenuLink from "./MenuLink";
+
+const SubMenuItem: React.FC<SubMenuItemProps> = ({
+  subItem,
+  secondIndex,
+  firstIndex,
+  firstLayerIndex,
+  secondLayerIndex,
+  isFirstActive,
+  activeMenuPath,
+  lang,
+  activePage,
+  handleSecondLevelClick,
+}) => {
+  const isSecondActive = isFirstActive && activeMenuPath?.second === secondIndex;
+
+  return (
+    <div key={subItem.name} className="border-b border-gray-100 last:border-b-0">
+      <button
+        onClick={() => handleSecondLevelClick(secondIndex)}
+        className={`flex items-center justify-between w-full p-3 pl-8 text-left transition-colors ${
+          secondIndex === secondLayerIndex || isSecondActive
+            ? "bg-emerald-100 text-emerald-800"
+            : "text-gray-600 hover:bg-gray-100"
+        }`}
+      >
+        <span className="font-medium">{subItem.lg[lang as keyof typeof subItem.lg]}</span>
+        {secondIndex === secondLayerIndex || isSecondActive ? (
+          <ChevronDown className="h-4 w-4" />
+        ) : (
+          <ChevronRight className="h-4 w-4" />
+        )}
+      </button>
+
+      {/* Second level separator and third layer */}
+      {(firstIndex === firstLayerIndex && secondIndex === secondLayerIndex) || isSecondActive ? (
+        <div className="bg-gray-100 border-t border-gray-200">
+          {subItem.subList.map((subSubItem) => (
+            <MenuLink 
+              key={subSubItem.name}
+              subSubItem={subSubItem} 
+              activePage={activePage} 
+              lang={lang} 
+            />
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+};
+
+export default SubMenuItem;
diff --git a/WebServices/client-frontend/src/components/menu/NavigationMenu/index.tsx b/WebServices/client-frontend/src/components/menu/NavigationMenu/index.tsx
new file mode 100644
index 0000000..fc8a19b
--- /dev/null
+++ b/WebServices/client-frontend/src/components/menu/NavigationMenu/index.tsx
@@ -0,0 +1,68 @@
+"use client";
+import React, { useState, useEffect } from "react";
+import { NavigationMenuProps, ActiveMenuPath } from "./types";
+import MenuItem from "./MenuItem";
+
+const NavigationMenu: React.FC<NavigationMenuProps> = ({ transformedMenu, lang, activePage }) => {
+  // State to track which menu items are expanded
+  const [firstLayerIndex, setFirstLayerIndex] = useState<number>(-1);
+  const [secondLayerIndex, setSecondLayerIndex] = useState<number>(-1);
+  const [activeMenuPath, setActiveMenuPath] = useState<ActiveMenuPath | null>(null);
+
+  // Find the active menu path when component mounts or activePage changes
+  useEffect(() => {
+    if (activePage && activePage !== "/dashboard") {
+      // Find which menu item contains the active page
+      transformedMenu.forEach((firstItem, firstIdx) => {
+        firstItem.subList.forEach((secondItem, secondIdx) => {
+          secondItem.subList.forEach((thirdItem) => {
+            if (thirdItem.siteUrl === activePage) {
+              setFirstLayerIndex(firstIdx);
+              setSecondLayerIndex(secondIdx);
+              setActiveMenuPath({ first: firstIdx, second: secondIdx, third: thirdItem.siteUrl });
+            }
+          });
+        });
+      });
+    }
+  }, [activePage, transformedMenu]);
+
+  // Handle first level menu click
+  const handleFirstLevelClick = (index: number) => {
+    // Only allow collapsing if we're not on an active page or if it's dashboard
+    if (activePage === "/dashboard" || !activeMenuPath) {
+      setFirstLayerIndex(index === firstLayerIndex ? -1 : index);
+      setSecondLayerIndex(-1); // Reset second layer selection when first layer changes
+    }
+  };
+
+  // Handle second level menu click
+  const handleSecondLevelClick = (index: number) => {
+    // Only allow collapsing if we're not on an active page or if it's dashboard
+    if (activePage === "/dashboard" || !activeMenuPath) {
+      setSecondLayerIndex(index === secondLayerIndex ? -1 : index);
+    }
+  };
+
+  return (
+    <nav className="flex flex-col">
+      {transformedMenu &&
+        transformedMenu.map((item, firstIndex) => (
+          <MenuItem
+            key={item.name}
+            item={item}
+            firstIndex={firstIndex}
+            firstLayerIndex={firstLayerIndex}
+            secondLayerIndex={secondLayerIndex}
+            activeMenuPath={activeMenuPath}
+            lang={lang}
+            activePage={activePage}
+            handleFirstLevelClick={handleFirstLevelClick}
+            handleSecondLevelClick={handleSecondLevelClick}
+          />
+        ))}
+    </nav>
+  );
+};
+
+export default NavigationMenu;
diff --git a/WebServices/client-frontend/src/components/menu/NavigationMenu/types.ts b/WebServices/client-frontend/src/components/menu/NavigationMenu/types.ts
new file mode 100644
index 0000000..91cea90
--- /dev/null
+++ b/WebServices/client-frontend/src/components/menu/NavigationMenu/types.ts
@@ -0,0 +1,52 @@
+// Import types from the handler
+import { 
+  LanguageTranslation,
+  FilteredMenuFirstLevel,
+  FilteredMenuSecondLevel,
+  FilteredMenuThirdLevel
+} from "../handler";
+
+// Navigation menu props and state types
+export interface NavigationMenuProps {
+  transformedMenu: FilteredMenuFirstLevel[];
+  lang: string;
+  activePage?: string;
+}
+
+export interface ActiveMenuPath {
+  first: number;
+  second: number;
+  third: string;
+}
+
+// Component props interfaces
+export interface MenuItemProps {
+  item: FilteredMenuFirstLevel;
+  firstIndex: number;
+  firstLayerIndex: number;
+  secondLayerIndex: number;
+  activeMenuPath: ActiveMenuPath | null;
+  lang: string;
+  activePage?: string;
+  handleFirstLevelClick: (index: number) => void;
+  handleSecondLevelClick: (index: number) => void;
+}
+
+export interface SubMenuItemProps {
+  subItem: FilteredMenuSecondLevel;
+  secondIndex: number;
+  firstIndex: number;
+  firstLayerIndex: number;
+  secondLayerIndex: number;
+  isFirstActive: boolean;
+  activeMenuPath: ActiveMenuPath | null;
+  lang: string;
+  activePage?: string;
+  handleSecondLevelClick: (index: number) => void;
+}
+
+export interface MenuLinkProps {
+  subSubItem: FilteredMenuThirdLevel;
+  activePage?: string;
+  lang: string;
+}
diff --git a/WebServices/client-frontend/src/components/menu/EmployeeProfileSection.tsx b/WebServices/client-frontend/src/components/menu/ProfileSections/EmployeeProfileSection.tsx
similarity index 100%
rename from WebServices/client-frontend/src/components/menu/EmployeeProfileSection.tsx
rename to WebServices/client-frontend/src/components/menu/ProfileSections/EmployeeProfileSection.tsx
diff --git a/WebServices/client-frontend/src/components/menu/OccupantProfileSection.tsx b/WebServices/client-frontend/src/components/menu/ProfileSections/OccupantProfileSection.tsx
similarity index 100%
rename from WebServices/client-frontend/src/components/menu/OccupantProfileSection.tsx
rename to WebServices/client-frontend/src/components/menu/ProfileSections/OccupantProfileSection.tsx
diff --git a/WebServices/client-frontend/src/components/menu/ProfileLoadingState.tsx b/WebServices/client-frontend/src/components/menu/ProfileSections/ProfileLoadingState.tsx
similarity index 100%
rename from WebServices/client-frontend/src/components/menu/ProfileLoadingState.tsx
rename to WebServices/client-frontend/src/components/menu/ProfileSections/ProfileLoadingState.tsx
diff --git a/WebServices/client-frontend/src/components/menu/handler.tsx b/WebServices/client-frontend/src/components/menu/handler.tsx
index d39db23..dd41b81 100644
--- a/WebServices/client-frontend/src/components/menu/handler.tsx
+++ b/WebServices/client-frontend/src/components/menu/handler.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import Menu from "./store";
+import Menu from "./IndexStore/store";
 
 // Define TypeScript interfaces for menu structure
 export interface LanguageTranslation {
diff --git a/WebServices/client-frontend/src/components/menu/hook.ts b/WebServices/client-frontend/src/components/menu/hook.ts
new file mode 100644
index 0000000..81b18be
--- /dev/null
+++ b/WebServices/client-frontend/src/components/menu/hook.ts
@@ -0,0 +1,18 @@
+import { UserSelection } from "../validations/menu/menu";
+
+export async function getUserSelectionHook(
+  setError: any
+): Promise<UserSelection | null> {
+  try {
+    const response = await fetch("/api/cookies/selection", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+    });
+    const data = await response.json();
+    // setJsonText(JSON.stringify(data));
+    return data.data;
+  } catch (error) {
+    setError("An error occurred during login");
+  }
+  return null;
+}
diff --git a/WebServices/client-frontend/src/components/menu/language.ts b/WebServices/client-frontend/src/components/menu/language.ts
new file mode 100644
index 0000000..1d97efc
--- /dev/null
+++ b/WebServices/client-frontend/src/components/menu/language.ts
@@ -0,0 +1,12 @@
+const dashboardLanguage = {
+  tr: {
+    dashboard: "Kontrol Paneli",
+    loading: "Yükleniyor...",
+  },
+  en: {
+    dashboard: "Control Panel",
+    loading: "Loading...",
+  },
+};
+
+export default dashboardLanguage;
diff --git a/WebServices/client-frontend/src/components/menu/menu.tsx b/WebServices/client-frontend/src/components/menu/menu.tsx
index 1c49c6b..40690d0 100644
--- a/WebServices/client-frontend/src/components/menu/menu.tsx
+++ b/WebServices/client-frontend/src/components/menu/menu.tsx
@@ -1,92 +1,59 @@
 "use client";
-
 import React, { useEffect, useState, Suspense } from "react";
-import { transformMenu } from "./handler";
-import { retrieveUserSelection } from "@/apicalls/cookies/token";
-import EmployeeProfileSection from "./EmployeeProfileSection";
-import OccupantProfileSection from "./OccupantProfileSection";
-import ProfileLoadingState from "./ProfileLoadingState";
+
+import EmployeeProfileSection from "./ProfileSections/EmployeeProfileSection";
+import OccupantProfileSection from "./ProfileSections/OccupantProfileSection";
+import dashboardLanguage from "./language";
+import ProfileLoadingState from "./ProfileSections/ProfileLoadingState";
 import NavigationMenu from "./NavigationMenu";
-import {
-  ClientMenuProps,
-  UserSelection,
-} from "@/components/validations/menu/menu";
 
-// Language definitions for dashboard title
-const dashboardLanguage = {
-  tr: {
-    dashboard: "Kontrol Paneli",
-    loading: "Yükleniyor...",
-  },
-  en: {
-    dashboard: "Control Panel",
-    loading: "Loading...",
-  },
-};
+import { transformMenu } from "./handler";
+import { ClientMenuProps, UserSelection } from "@/components/validations/menu/menu";
+import { getUserSelectionHook } from "./hook";
 
-const ClientMenu: React.FC<ClientMenuProps> = ({ siteUrls, lang = "en", activePage }) => {
+const ClientMenu: React.FC<ClientMenuProps> = ({ siteUrls, lang = "en" as keyof typeof dashboardLanguage, activePage }) => {
+  const lng = lang as keyof typeof dashboardLanguage;
   const transformedMenu = transformMenu(siteUrls);
-  const t =
-    dashboardLanguage[lang as keyof typeof dashboardLanguage] ||
-    dashboardLanguage.en;
-
-  // State for loading indicator, user type, and user selection data
+  const [translation, setTranslation] = useState<Record<string, string>>(dashboardLanguage[lng] || dashboardLanguage.en);
   const [loading, setLoading] = useState<boolean>(true);
   const [userType, setUserType] = useState<string | null>(null);
-  const [userSelectionData, setUserSelectionData] =
-    useState<UserSelection | null>(null);
+  const [userSelectionData, setUserSelectionData] = useState<UserSelection | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    setTranslation(dashboardLanguage[lng] || dashboardLanguage.en);
+  }, [lng]);
 
-  // Fetch user selection data
   useEffect(() => {
     setLoading(true);
-
-    retrieveUserSelection()
-      .then((data) => {
-        console.log("User Selection:", data);
-
-        if (data && "userType" in data) {
-          setUserType((data as UserSelection).userType);
-          setUserSelectionData(data as UserSelection);
-        }
-      })
-      .catch((err) => {
-        console.error("Error fetching user selection data:", err);
-      })
-      .finally(() => setLoading(false));
+    getUserSelectionHook(setError).then((data) => {
+      if (data) { setUserType(data.userType); setUserSelectionData({ userType: data.userType, selected: data.selected }) }
+      setLoading(false);
+    }).catch((err) => { setError(err?.message); setLoading(false) }).finally(() => { setLoading(false) });
   }, []);
+
   return (
     <div className="w-full bg-white shadow-sm rounded-lg overflow-hidden">
       <div className="p-4 border-b border-gray-200">
-        <h2 className="text-xl font-bold text-center text-gray-800">
-          {t.dashboard}
-        </h2>
+        <h2 className="text-xl font-bold text-center text-gray-800">{translation.dashboard}</h2>
       </div>
 
+      {/* Error Section */}
+      {error && <p className="text-red-500">{error}</p>}
+
       {/* Profile Section with Suspense */}
       <div className="p-4 border-b border-gray-200 bg-gray-50">
-        <Suspense
-          fallback={<div className="text-center py-4">{t.loading}</div>}
-        >
-          {loading ? (
-            <ProfileLoadingState loadingText={t.loading} />
-          ) : userType === "employee" && userSelectionData ? (
-            <EmployeeProfileSection
-              userSelectionData={userSelectionData}
-              lang={lang as "en" | "tr"}
-            />
+        <Suspense fallback={<div className="text-center py-4">{translation.loading}</div>}>
+          {loading ? (<ProfileLoadingState loadingText={translation.loading} />) : userType === "employee" && userSelectionData ? (
+            <EmployeeProfileSection userSelectionData={userSelectionData} lang={lng} />
           ) : userType === "occupant" && userSelectionData ? (
-            <OccupantProfileSection
-              userSelectionData={userSelectionData}
-              lang={lang as "en" | "tr"}
-            />
-          ) : (
-            <div className="text-center text-gray-500">{t.loading}</div>
-          )}
+            <OccupantProfileSection userSelectionData={userSelectionData} lang={lng} />
+          ) : (<div className="text-center text-gray-500">{translation.loading}</div>)}
         </Suspense>
       </div>
 
       {/* Navigation Menu */}
-      <NavigationMenu transformedMenu={transformedMenu} lang={lang} activePage={activePage} />
+      <NavigationMenu transformedMenu={transformedMenu} lang={lng} activePage={activePage} />
     </div>
   );
 };
diff --git a/WebServices/client-frontend/src/components/Pages/dashboard/a.txt b/WebServices/client-frontend/src/components/menu/types.ts
similarity index 100%
rename from WebServices/client-frontend/src/components/Pages/dashboard/a.txt
rename to WebServices/client-frontend/src/components/menu/types.ts
diff --git a/WebServices/client-frontend/src/components/navigator/retriever.tsx b/WebServices/client-frontend/src/components/navigator/retriever.tsx
index 6903e9a..2ee8620 100644
--- a/WebServices/client-frontend/src/components/navigator/retriever.tsx
+++ b/WebServices/client-frontend/src/components/navigator/retriever.tsx
@@ -1,6 +1,6 @@
 import { PageComponent } from "@/components/validations/translations/translation";
 import { UnAuthorizedPage } from "@/components/navigator/unauthorizedpage";
-import { PageNavigator } from "../Pages";
+import { PageNavigator } from "../../eventRouters/Pages";
 
 export function retrievePageByUrlAndPageId(
   pageId: string,
diff --git a/WebServices/client-frontend/src/eventRouters/Pages/dashboard/a.txt b/WebServices/client-frontend/src/eventRouters/Pages/dashboard/a.txt
new file mode 100644
index 0000000..e69de29
diff --git a/WebServices/client-frontend/src/components/Pages/dashboard/index.ts b/WebServices/client-frontend/src/eventRouters/Pages/dashboard/index.ts
similarity index 100%
rename from WebServices/client-frontend/src/components/Pages/dashboard/index.ts
rename to WebServices/client-frontend/src/eventRouters/Pages/dashboard/index.ts
diff --git a/WebServices/client-frontend/src/components/Pages/dashboard/superusers/ActionButtonsComponent.tsx b/WebServices/client-frontend/src/eventRouters/Pages/dashboard/superusers/ActionButtonsComponent.tsx
similarity index 100%
rename from WebServices/client-frontend/src/components/Pages/dashboard/superusers/ActionButtonsComponent.tsx
rename to WebServices/client-frontend/src/eventRouters/Pages/dashboard/superusers/ActionButtonsComponent.tsx
diff --git a/WebServices/client-frontend/src/components/Pages/dashboard/superusers/DataDisplayComponent.tsx b/WebServices/client-frontend/src/eventRouters/Pages/dashboard/superusers/DataDisplayComponent.tsx
similarity index 100%
rename from WebServices/client-frontend/src/components/Pages/dashboard/superusers/DataDisplayComponent.tsx
rename to WebServices/client-frontend/src/eventRouters/Pages/dashboard/superusers/DataDisplayComponent.tsx
diff --git a/WebServices/client-frontend/src/components/Pages/dashboard/superusers/FormComponent.tsx b/WebServices/client-frontend/src/eventRouters/Pages/dashboard/superusers/FormComponent.tsx
similarity index 100%
rename from WebServices/client-frontend/src/components/Pages/dashboard/superusers/FormComponent.tsx
rename to WebServices/client-frontend/src/eventRouters/Pages/dashboard/superusers/FormComponent.tsx
diff --git a/WebServices/client-frontend/src/components/Pages/dashboard/superusers/ListInfoComponent.tsx b/WebServices/client-frontend/src/eventRouters/Pages/dashboard/superusers/ListInfoComponent.tsx
similarity index 100%
rename from WebServices/client-frontend/src/components/Pages/dashboard/superusers/ListInfoComponent.tsx
rename to WebServices/client-frontend/src/eventRouters/Pages/dashboard/superusers/ListInfoComponent.tsx
diff --git a/WebServices/client-frontend/src/components/Pages/dashboard/superusers/PaginationToolsComponent.tsx b/WebServices/client-frontend/src/eventRouters/Pages/dashboard/superusers/PaginationToolsComponent.tsx
similarity index 100%
rename from WebServices/client-frontend/src/components/Pages/dashboard/superusers/PaginationToolsComponent.tsx
rename to WebServices/client-frontend/src/eventRouters/Pages/dashboard/superusers/PaginationToolsComponent.tsx
diff --git a/WebServices/client-frontend/src/components/Pages/dashboard/superusers/SearchComponent.tsx b/WebServices/client-frontend/src/eventRouters/Pages/dashboard/superusers/SearchComponent.tsx
similarity index 100%
rename from WebServices/client-frontend/src/components/Pages/dashboard/superusers/SearchComponent.tsx
rename to WebServices/client-frontend/src/eventRouters/Pages/dashboard/superusers/SearchComponent.tsx
diff --git a/WebServices/client-frontend/src/components/Pages/dashboard/superusers/SortingComponent.tsx b/WebServices/client-frontend/src/eventRouters/Pages/dashboard/superusers/SortingComponent.tsx
similarity index 100%
rename from WebServices/client-frontend/src/components/Pages/dashboard/superusers/SortingComponent.tsx
rename to WebServices/client-frontend/src/eventRouters/Pages/dashboard/superusers/SortingComponent.tsx
diff --git a/WebServices/client-frontend/src/components/Pages/dashboard/superusers/app.tsx b/WebServices/client-frontend/src/eventRouters/Pages/dashboard/superusers/app.tsx
similarity index 100%
rename from WebServices/client-frontend/src/components/Pages/dashboard/superusers/app.tsx
rename to WebServices/client-frontend/src/eventRouters/Pages/dashboard/superusers/app.tsx
diff --git a/WebServices/client-frontend/src/components/Pages/dashboard/superusers/hooks.ts b/WebServices/client-frontend/src/eventRouters/Pages/dashboard/superusers/hooks.ts
similarity index 100%
rename from WebServices/client-frontend/src/components/Pages/dashboard/superusers/hooks.ts
rename to WebServices/client-frontend/src/eventRouters/Pages/dashboard/superusers/hooks.ts
diff --git a/WebServices/client-frontend/src/components/Pages/dashboard/superusers/language.ts b/WebServices/client-frontend/src/eventRouters/Pages/dashboard/superusers/language.ts
similarity index 100%
rename from WebServices/client-frontend/src/components/Pages/dashboard/superusers/language.ts
rename to WebServices/client-frontend/src/eventRouters/Pages/dashboard/superusers/language.ts
diff --git a/WebServices/client-frontend/src/components/Pages/dashboard/superusers/schema.ts b/WebServices/client-frontend/src/eventRouters/Pages/dashboard/superusers/schema.ts
similarity index 100%
rename from WebServices/client-frontend/src/components/Pages/dashboard/superusers/schema.ts
rename to WebServices/client-frontend/src/eventRouters/Pages/dashboard/superusers/schema.ts
diff --git a/WebServices/client-frontend/src/components/Pages/index.ts b/WebServices/client-frontend/src/eventRouters/Pages/index.ts
similarity index 100%
rename from WebServices/client-frontend/src/components/Pages/index.ts
rename to WebServices/client-frontend/src/eventRouters/Pages/index.ts
diff --git a/WebServices/client-frontend/src/components/Pages/people/index.ts b/WebServices/client-frontend/src/eventRouters/Pages/people/index.ts
similarity index 100%
rename from WebServices/client-frontend/src/components/Pages/people/index.ts
rename to WebServices/client-frontend/src/eventRouters/Pages/people/index.ts
diff --git a/WebServices/client-frontend/src/components/Pages/people/superusers/ActionButtonsComponent.tsx b/WebServices/client-frontend/src/eventRouters/Pages/people/superusers/ActionButtonsComponent.tsx
similarity index 100%
rename from WebServices/client-frontend/src/components/Pages/people/superusers/ActionButtonsComponent.tsx
rename to WebServices/client-frontend/src/eventRouters/Pages/people/superusers/ActionButtonsComponent.tsx
diff --git a/WebServices/client-frontend/src/components/Pages/people/superusers/DataDisplayComponent.tsx b/WebServices/client-frontend/src/eventRouters/Pages/people/superusers/DataDisplayComponent.tsx
similarity index 100%
rename from WebServices/client-frontend/src/components/Pages/people/superusers/DataDisplayComponent.tsx
rename to WebServices/client-frontend/src/eventRouters/Pages/people/superusers/DataDisplayComponent.tsx
diff --git a/WebServices/client-frontend/src/components/Pages/people/superusers/FormComponent.tsx b/WebServices/client-frontend/src/eventRouters/Pages/people/superusers/FormComponent.tsx
similarity index 100%
rename from WebServices/client-frontend/src/components/Pages/people/superusers/FormComponent.tsx
rename to WebServices/client-frontend/src/eventRouters/Pages/people/superusers/FormComponent.tsx
diff --git a/WebServices/client-frontend/src/components/Pages/people/superusers/ListInfoComponent.tsx b/WebServices/client-frontend/src/eventRouters/Pages/people/superusers/ListInfoComponent.tsx
similarity index 100%
rename from WebServices/client-frontend/src/components/Pages/people/superusers/ListInfoComponent.tsx
rename to WebServices/client-frontend/src/eventRouters/Pages/people/superusers/ListInfoComponent.tsx
diff --git a/WebServices/client-frontend/src/components/Pages/people/superusers/PaginationToolsComponent.tsx b/WebServices/client-frontend/src/eventRouters/Pages/people/superusers/PaginationToolsComponent.tsx
similarity index 100%
rename from WebServices/client-frontend/src/components/Pages/people/superusers/PaginationToolsComponent.tsx
rename to WebServices/client-frontend/src/eventRouters/Pages/people/superusers/PaginationToolsComponent.tsx
diff --git a/WebServices/client-frontend/src/components/Pages/people/superusers/SearchComponent.tsx b/WebServices/client-frontend/src/eventRouters/Pages/people/superusers/SearchComponent.tsx
similarity index 100%
rename from WebServices/client-frontend/src/components/Pages/people/superusers/SearchComponent.tsx
rename to WebServices/client-frontend/src/eventRouters/Pages/people/superusers/SearchComponent.tsx
diff --git a/WebServices/client-frontend/src/components/Pages/people/superusers/SortingComponent.tsx b/WebServices/client-frontend/src/eventRouters/Pages/people/superusers/SortingComponent.tsx
similarity index 100%
rename from WebServices/client-frontend/src/components/Pages/people/superusers/SortingComponent.tsx
rename to WebServices/client-frontend/src/eventRouters/Pages/people/superusers/SortingComponent.tsx
diff --git a/WebServices/client-frontend/src/components/Pages/people/superusers/app.tsx b/WebServices/client-frontend/src/eventRouters/Pages/people/superusers/app.tsx
similarity index 100%
rename from WebServices/client-frontend/src/components/Pages/people/superusers/app.tsx
rename to WebServices/client-frontend/src/eventRouters/Pages/people/superusers/app.tsx
diff --git a/WebServices/client-frontend/src/components/Pages/people/superusers/hooks.ts b/WebServices/client-frontend/src/eventRouters/Pages/people/superusers/hooks.ts
similarity index 100%
rename from WebServices/client-frontend/src/components/Pages/people/superusers/hooks.ts
rename to WebServices/client-frontend/src/eventRouters/Pages/people/superusers/hooks.ts
diff --git a/WebServices/client-frontend/src/components/Pages/people/superusers/language.ts b/WebServices/client-frontend/src/eventRouters/Pages/people/superusers/language.ts
similarity index 100%
rename from WebServices/client-frontend/src/components/Pages/people/superusers/language.ts
rename to WebServices/client-frontend/src/eventRouters/Pages/people/superusers/language.ts
diff --git a/WebServices/client-frontend/src/components/Pages/people/superusers/schema.ts b/WebServices/client-frontend/src/eventRouters/Pages/people/superusers/schema.ts
similarity index 100%
rename from WebServices/client-frontend/src/components/Pages/people/superusers/schema.ts
rename to WebServices/client-frontend/src/eventRouters/Pages/people/superusers/schema.ts
diff --git a/WebServices/client-frontend/src/components/Pages/template/ActionButtonsComponent.tsx b/WebServices/client-frontend/src/eventRouters/Pages/template/ActionButtonsComponent.tsx
similarity index 100%
rename from WebServices/client-frontend/src/components/Pages/template/ActionButtonsComponent.tsx
rename to WebServices/client-frontend/src/eventRouters/Pages/template/ActionButtonsComponent.tsx
diff --git a/WebServices/client-frontend/src/components/Pages/template/DataDisplayComponent.tsx b/WebServices/client-frontend/src/eventRouters/Pages/template/DataDisplayComponent.tsx
similarity index 100%
rename from WebServices/client-frontend/src/components/Pages/template/DataDisplayComponent.tsx
rename to WebServices/client-frontend/src/eventRouters/Pages/template/DataDisplayComponent.tsx
diff --git a/WebServices/client-frontend/src/components/Pages/template/FormComponent.tsx b/WebServices/client-frontend/src/eventRouters/Pages/template/FormComponent.tsx
similarity index 100%
rename from WebServices/client-frontend/src/components/Pages/template/FormComponent.tsx
rename to WebServices/client-frontend/src/eventRouters/Pages/template/FormComponent.tsx
diff --git a/WebServices/client-frontend/src/components/Pages/template/ListInfoComponent.tsx b/WebServices/client-frontend/src/eventRouters/Pages/template/ListInfoComponent.tsx
similarity index 100%
rename from WebServices/client-frontend/src/components/Pages/template/ListInfoComponent.tsx
rename to WebServices/client-frontend/src/eventRouters/Pages/template/ListInfoComponent.tsx
diff --git a/WebServices/client-frontend/src/components/Pages/template/PaginationToolsComponent.tsx b/WebServices/client-frontend/src/eventRouters/Pages/template/PaginationToolsComponent.tsx
similarity index 100%
rename from WebServices/client-frontend/src/components/Pages/template/PaginationToolsComponent.tsx
rename to WebServices/client-frontend/src/eventRouters/Pages/template/PaginationToolsComponent.tsx
diff --git a/WebServices/client-frontend/src/components/Pages/template/REACT_TEMPLATE_BLUEPRINT.md b/WebServices/client-frontend/src/eventRouters/Pages/template/REACT_TEMPLATE_BLUEPRINT.md
similarity index 100%
rename from WebServices/client-frontend/src/components/Pages/template/REACT_TEMPLATE_BLUEPRINT.md
rename to WebServices/client-frontend/src/eventRouters/Pages/template/REACT_TEMPLATE_BLUEPRINT.md
diff --git a/WebServices/client-frontend/src/components/Pages/template/README.md b/WebServices/client-frontend/src/eventRouters/Pages/template/README.md
similarity index 100%
rename from WebServices/client-frontend/src/components/Pages/template/README.md
rename to WebServices/client-frontend/src/eventRouters/Pages/template/README.md
diff --git a/WebServices/client-frontend/src/components/Pages/template/SearchComponent.tsx b/WebServices/client-frontend/src/eventRouters/Pages/template/SearchComponent.tsx
similarity index 100%
rename from WebServices/client-frontend/src/components/Pages/template/SearchComponent.tsx
rename to WebServices/client-frontend/src/eventRouters/Pages/template/SearchComponent.tsx
diff --git a/WebServices/client-frontend/src/components/Pages/template/SortingComponent.tsx b/WebServices/client-frontend/src/eventRouters/Pages/template/SortingComponent.tsx
similarity index 100%
rename from WebServices/client-frontend/src/components/Pages/template/SortingComponent.tsx
rename to WebServices/client-frontend/src/eventRouters/Pages/template/SortingComponent.tsx
diff --git a/WebServices/client-frontend/src/components/Pages/template/app.tsx b/WebServices/client-frontend/src/eventRouters/Pages/template/app.tsx
similarity index 100%
rename from WebServices/client-frontend/src/components/Pages/template/app.tsx
rename to WebServices/client-frontend/src/eventRouters/Pages/template/app.tsx
diff --git a/WebServices/client-frontend/src/components/Pages/template/hooks.ts b/WebServices/client-frontend/src/eventRouters/Pages/template/hooks.ts
similarity index 100%
rename from WebServices/client-frontend/src/components/Pages/template/hooks.ts
rename to WebServices/client-frontend/src/eventRouters/Pages/template/hooks.ts
diff --git a/WebServices/client-frontend/src/components/Pages/template/language.ts b/WebServices/client-frontend/src/eventRouters/Pages/template/language.ts
similarity index 100%
rename from WebServices/client-frontend/src/components/Pages/template/language.ts
rename to WebServices/client-frontend/src/eventRouters/Pages/template/language.ts
diff --git a/WebServices/client-frontend/src/components/Pages/template/schema.ts b/WebServices/client-frontend/src/eventRouters/Pages/template/schema.ts
similarity index 100%
rename from WebServices/client-frontend/src/components/Pages/template/schema.ts
rename to WebServices/client-frontend/src/eventRouters/Pages/template/schema.ts
diff --git a/WebServices/client-frontend/src/eventRouters/index.tsx b/WebServices/client-frontend/src/eventRouters/index.tsx
index 9ce34d1..fb8498e 100644
--- a/WebServices/client-frontend/src/eventRouters/index.tsx
+++ b/WebServices/client-frontend/src/eventRouters/index.tsx
@@ -1,6 +1,10 @@
+import { PageComponent } from "@/components/validations/translations/translation";
+import { peopleApplications } from "./Pages/people";
+import { dashboardApplications } from "./Pages/dashboard";
 
-
-const menuPages = {
+export const menuPages: Record<string, Record<string, PageComponent>> = {
+  "/individual": peopleApplications,
+  "/dashboard": dashboardApplications,
 };
 
 export default menuPages;
diff --git a/WebServices/client-frontend/src/eventRouters/pageRetriever.tsx b/WebServices/client-frontend/src/eventRouters/pageRetriever.tsx
index b09a45a..d3286d9 100644
--- a/WebServices/client-frontend/src/eventRouters/pageRetriever.tsx
+++ b/WebServices/client-frontend/src/eventRouters/pageRetriever.tsx
@@ -2,9 +2,17 @@ import { PageProps } from "../validations/translations/translation";
 import { UnAuthorizedPage } from "./unauthorizedpage";
 import menuPages from "./index";
 
-export function retrievePageByUrl(url: string): React.FC<PageProps> {
-  if (url in menuPages) {
-    return menuPages[url as keyof typeof menuPages];
+export function retrievePageByUrl(siteUrl: string, url: string): React.FC<PageProps> {
+  console.log("siteUrl", siteUrl, "url", url);
+  try {
+    if (Object.prototype.hasOwnProperty.call(menuPages, siteUrl)) {
+      const sitePage = menuPages[siteUrl as keyof typeof menuPages];
+      if (sitePage && Object.prototype.hasOwnProperty.call(sitePage, url)) {
+        return sitePage[url] as React.FC<PageProps>;
+      }
+    }
+  } catch (error) {
+    console.error("Error retrieving page:", error);
   }
   return UnAuthorizedPage;
 }
diff --git a/WebServices/client-frontend/src/webPages/auth/Login/hook.ts b/WebServices/client-frontend/src/webPages/auth/Login/hook.ts
new file mode 100644
index 0000000..ac4ac6e
--- /dev/null
+++ b/WebServices/client-frontend/src/webPages/auth/Login/hook.ts
@@ -0,0 +1,35 @@
+export function loginHook(
+  startTransition: any,
+  data: any,
+  setError: any,
+  setJsonText: any,
+  Router: any
+) {
+  try {
+    const sendData = { ...data };
+    startTransition(() => {
+      fetch("/api/login/email", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(sendData),
+      })
+        .then((response) => {
+          if (response.status === 200) {
+            response.json().then((data) => {
+              console.log("data", data); //   setJsonText(JSON.stringify(data));
+              setTimeout(() => {
+                Router.push("/auth/select");
+              }, 100);
+            });
+          } else {
+            response.json().then((data) => {
+              setError(data?.message);
+            });
+          }
+        })
+        .catch(() => {});
+    });
+  } catch (error) {
+    setError("An error occurred during login");
+  }
+}
diff --git a/WebServices/client-frontend/src/webPages/auth/Login/language.ts b/WebServices/client-frontend/src/webPages/auth/Login/language.ts
new file mode 100644
index 0000000..0c2dddb
--- /dev/null
+++ b/WebServices/client-frontend/src/webPages/auth/Login/language.ts
@@ -0,0 +1,22 @@
+export const loginTranslation = {
+  tr: {
+    email: "E-Posta",
+    password: "Şifre",
+    rememberMe: "Beni Hatırla",
+    login: "Giriş Yap",
+    successMessage: "Giriş Yapıldı",
+    errorMessage: "Giriş Yapılmadı",
+    pendingMessage: "Giriş Yapılıyor...",
+    responseData: "Giriş Verileri",
+  },
+  en: {
+    email: "Email",
+    password: "Password",
+    rememberMe: "Remember Me",
+    login: "Login",
+    successMessage: "Login completed successfully",
+    errorMessage: "Login failed",
+    pendingMessage: "Logging in...",
+    responseData: "Response Data",
+  },
+};
diff --git a/WebServices/client-frontend/src/webPages/auth/Login/page.tsx b/WebServices/client-frontend/src/webPages/auth/Login/page.tsx
new file mode 100644
index 0000000..9794a55
--- /dev/null
+++ b/WebServices/client-frontend/src/webPages/auth/Login/page.tsx
@@ -0,0 +1,72 @@
+"use client";
+import { useState, useTransition, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { LoginFormData } from "./types";
+import { loginSchemaEmail } from "./schemas";
+import { loginTranslation } from "./language";
+import { LanguageSelectionComponent } from "@/components/common/HeaderSelections/LanguageSelectionComponent";
+import { loginHook } from "./hook";
+
+function Login({ language }: { language: "tr" | "en" }) {
+
+  const Router = useRouter();
+  const [isPending, startTransition] = useTransition();
+  const [error, setError] = useState<string | null>(null);
+  const [jsonText, setJsonText] = useState<string | null>(null);
+  const [translation, setTranslation] = useState(loginTranslation[language]);
+  const [lang, setLang] = useState(language);
+
+  useEffect(() => { setTranslation(loginTranslation[lang]) }, [lang]);
+
+  const { register, formState: { errors }, handleSubmit, } = useForm<LoginFormData>({ resolver: zodResolver(loginSchemaEmail) });
+  const onSubmit = async (data: LoginFormData) => { loginHook(startTransition, data, setError, setJsonText, Router) };
+
+  return (
+    <>
+      <div className="absolute top-4 right-4">
+        <LanguageSelectionComponent
+          lang={lang}
+          setLang={setLang}
+          className="border px-3 py-2 rounded-lg"
+        />
+      </div>
+      <div className="flex h-full min-h-[inherit] flex-col items-center justify-center gap-4">
+        <div className="w-full max-w-md rounded-lg bg-white p-8 shadow-md">
+          <h2 className="mb-6 text-center text-2xl font-bold text-gray-900">{translation.login}</h2>
+          <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+            <div>
+              <label htmlFor="email" className="block text-sm font-medium text-gray-700">{translation.email}</label>
+              <input {...register("email")} type="email" id="email" className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500" />
+              {errors.email && (<p className="mt-1 text-sm text-red-600">{errors.email.message}</p>)}
+            </div>
+            <div>
+              <label htmlFor="password" className="block text-sm font-medium text-gray-700">{translation.password}</label>
+              <input {...register("password")} type="password" id="password" className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500" />
+              {errors.password && (<p className="mt-1 text-sm text-red-600">{errors.password.message}</p>)}
+            </div>
+            {error && (<div className="rounded-md bg-red-50 p-4"><p className="text-sm text-red-700">{error}</p></div>)}
+            <button type="submit" disabled={isPending} className="w-full rounded-md bg-indigo-600 px-4 py-2 text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:opacity-50">
+              {isPending ? translation.pendingMessage : translation.login}</button>
+          </form>
+        </div>
+        {jsonText && (
+          <div className="w-full max-w-md rounded-lg bg-white p-8 shadow-md">
+            <h2 className="mb-4 text-center text-xl font-bold text-gray-900">{translation.responseData}</h2>
+            <div className="space-y-2">
+              {Object.entries(JSON.parse(jsonText)).map(([key, value]) => (
+                <div key={key} className="flex items-start gap-2">
+                  <strong className="text-gray-700">{key}:</strong>
+                  <span className="text-gray-600">{typeof value === "object" ? JSON.stringify(value) : value?.toString() || "N/A"}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </>
+  );
+}
+
+export default Login;
diff --git a/WebServices/client-frontend/src/webPages/auth/Login/schemas.ts b/WebServices/client-frontend/src/webPages/auth/Login/schemas.ts
new file mode 100644
index 0000000..9b688a4
--- /dev/null
+++ b/WebServices/client-frontend/src/webPages/auth/Login/schemas.ts
@@ -0,0 +1,15 @@
+import { z } from "zod";
+
+const loginSchemaEmail = z.object({
+  email: z.string().email("Invalid email address"),
+  password: z.string().min(5, "Password must be at least 5 characters"),
+  rememberMe: z.boolean().optional().default(false),
+});
+
+const loginSchemaPhone = z.object({
+  phone: z.string().regex(/^[0-9]{10}$/, "Invalid phone number"),
+  password: z.string().min(5, "Password must be at least 5 characters"),
+  rememberMe: z.boolean().optional().default(false),
+});
+
+export { loginSchemaEmail, loginSchemaPhone };
diff --git a/WebServices/client-frontend/src/webPages/auth/Login/types.ts b/WebServices/client-frontend/src/webPages/auth/Login/types.ts
new file mode 100644
index 0000000..0ed3a33
--- /dev/null
+++ b/WebServices/client-frontend/src/webPages/auth/Login/types.ts
@@ -0,0 +1,13 @@
+type LoginFormData = {
+  email: string;
+  password: string;
+  rememberMe?: boolean;
+};
+
+type LoginFormDataPhone = {
+  phone: string;
+  password: string;
+  rememberMe?: boolean;
+};
+
+export type { LoginFormData, LoginFormDataPhone };
diff --git a/WebServices/client-frontend/src/webPages/auth/Select/LoginEmployee.tsx b/WebServices/client-frontend/src/webPages/auth/Select/LoginEmployee.tsx
new file mode 100644
index 0000000..ab5875e
--- /dev/null
+++ b/WebServices/client-frontend/src/webPages/auth/Select/LoginEmployee.tsx
@@ -0,0 +1,98 @@
+"use client";
+import React, { useTransition, useState } from "react";
+import { useRouter } from "next/navigation";
+import { Company } from "./types";
+import { LoginEmployeeProps } from "./types";
+import { selectEmployeeHook } from "./hook";
+
+function LoginEmployee({
+  selectionList,
+  translation
+}: LoginEmployeeProps) {
+  const isArrayLengthOne = Array.isArray(selectionList) && selectionList.length === 1;
+  const isArrayLengthZero = Array.isArray(selectionList) && selectionList.length === 0;
+  const isArrayMoreThanOne = Array.isArray(selectionList) && selectionList.length > 1;
+  const Router = useRouter();
+
+  const [isPending, startTransition] = useTransition();
+  const [error, setError] = useState<string | null>(null);
+  const [jsonText, setJsonText] = useState<string | null>(null);
+
+  const onSubmitEmployee = async (uu_id: string) => {
+    selectEmployeeHook(startTransition, { company_uu_id: uu_id }, setError, setJsonText, Router)
+  };
+
+  // Render a company card with consistent styling
+  const CompanyCard = ({ company, showButton = false }: { company: Company, showButton?: boolean }) => (
+    <div className="w-full p-4 mb-4 bg-white border border-gray-200 rounded-lg shadow-sm hover:shadow-md transition-all">
+      <div className="flex flex-col" onClick={() => onSubmitEmployee(company.uu_id)}>
+        {/* Company name and type */}
+        <div className="flex items-center mb-2">
+          <h3 className="text-xl font-semibold text-gray-800">{company.public_name}</h3>
+          {company.company_type && (
+            <span className="ml-2 px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 rounded-full">
+              {company.company_type}
+            </span>
+          )}
+        </div>
+
+        {/* Duty information */}
+        {company.duty && (
+          <div className="mb-2 text-sm text-gray-600">
+            <span className="font-medium">{translation.duty}:</span> {company.duty}
+          </div>
+        )}
+
+        {/* ID information */}
+        <div className="text-xs text-gray-500 mb-3">
+          <span className="font-medium">{translation.id}:</span> {company.uu_id}
+        </div>
+
+      </div>
+    </div>
+  );
+
+  return (
+    <div className="w-full max-w-md mx-auto">
+      <h1 className="text-2xl font-bold text-gray-900 mb-2">{translation.companySelection}</h1>
+      <p className="text-sm text-gray-500 mb-6">{translation.loggedInAs}</p>
+
+      {/* No companies available */}
+      {isArrayLengthZero && (
+        <div className="text-center p-6 bg-gray-50 rounded-lg border border-gray-200">
+          <p className="text-gray-600">{translation.noSelections}</p>
+        </div>
+      )}
+
+      {/* Single company */}
+      {isArrayLengthOne && <CompanyCard company={selectionList[0]} showButton={true} />}
+
+      {/* Multiple companies */}
+      {isArrayMoreThanOne && (
+        <div className="space-y-3">
+          {selectionList.map((company, index) => (
+            <div
+              key={company.uu_id || index}
+              onClick={() => onSubmitEmployee(company.uu_id)}
+              className="cursor-pointer hover:translate-x-1 transition-transform"
+            >
+              <CompanyCard company={company} />
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Show error if any */}
+      {error && <p className="mt-4 text-sm text-red-600">{error}</p>}
+
+      {/* Loading indicator */}
+      {isPending && (
+        <div className="mt-4 flex justify-center">
+          <div className="animate-spin h-5 w-5 border-2 border-blue-600 rounded-full border-t-transparent"></div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default LoginEmployee;
diff --git a/WebServices/client-frontend/src/webPages/auth/Select/LoginOccupant.tsx b/WebServices/client-frontend/src/webPages/auth/Select/LoginOccupant.tsx
new file mode 100644
index 0000000..e82d67b
--- /dev/null
+++ b/WebServices/client-frontend/src/webPages/auth/Select/LoginOccupant.tsx
@@ -0,0 +1,108 @@
+"use client";
+import React, { useState, useTransition, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { LoginOccupantProps } from "./types";
+import { selectOccupantHook } from "./hook";
+
+function LoginOccupant({
+  selectionList,
+  translation,
+}: LoginOccupantProps) {
+
+  const Router = useRouter();
+  const [isPending, startTransition] = useTransition();
+  const [error, setError] = useState<string | null>(null);
+  const [jsonText, setJsonText] = useState<string | null>(null);
+
+  const onSubmitOccupant = async (data: any) => {
+    selectOccupantHook(startTransition, data, setError, setJsonText, Router)
+  };
+  const isArrayLengthZero = Array.isArray(selectionList) && selectionList.length === 0;
+
+  // Render an occupant card with consistent styling
+  const OccupantCard = ({ occupant, buildKey, idx }: { occupant: any, buildKey: string, idx: number }) => (
+    <div
+      key={`${buildKey}-${idx}`}
+      className="w-full p-4 mb-3 bg-white border border-gray-200 rounded-lg shadow-sm hover:shadow-md transition-all cursor-pointer hover:translate-x-1"
+      onClick={() => onSubmitOccupant({ build_living_space_uu_id: occupant.build_living_space_uu_id })}
+    >
+      <div className="flex flex-col">
+        {/* Occupant description and code */}
+        <div className="flex items-center justify-between mb-2">
+          <h3 className="text-lg font-semibold text-gray-800">{occupant.description}</h3>
+          <span className="px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 rounded-full">
+            {occupant.code}
+          </span>
+        </div>
+
+        {/* Part name */}
+        <div className="mb-1 text-sm text-gray-700 font-medium">
+          {occupant.part_name}
+        </div>
+
+        {/* Level information */}
+        <div className="text-xs text-gray-500">
+          <span className="font-medium">{translation.level}:</span> {occupant.part_level}
+        </div>
+      </div>
+    </div>
+  );
+
+  // Render a building section with its occupants
+  const BuildingSection = ({ building, buildKey }: { building: any, buildKey: string }) => (
+    <div key={buildKey} className="mb-6">
+      <div className="p-3 bg-gray-50 border border-gray-200 rounded-lg mb-3">
+        <h2 className="text-lg font-semibold text-gray-800 flex items-center">
+          <svg className="w-5 h-5 mr-2 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
+          </svg>
+          <span>{building.build_name}</span>
+          <span className="ml-2 px-2 py-0.5 text-xs bg-blue-100 text-blue-800 rounded-full">No: {building.build_no}</span>
+        </h2>
+      </div>
+
+      <div className="space-y-2">
+        {building.occupants.map((occupant: any, idx: number) => (
+          <OccupantCard key={idx} occupant={occupant} buildKey={buildKey} idx={idx} />
+        ))}
+      </div>
+    </div>
+  );
+
+  return (
+    <div className="w-full max-w-md mx-auto">
+      <h1 className="text-2xl font-bold text-gray-900 mb-2">{translation.occupantSelection}</h1>
+      <p className="text-sm text-gray-500 mb-6">{translation.loggedInAs}</p>
+
+      {/* No occupants available */}
+      {!isArrayLengthZero ? (
+        <div className="text-center p-6 bg-gray-50 rounded-lg border border-gray-200">
+          <p className="text-gray-600">{translation.noSelections}</p>
+        </div>
+      ) : (
+        /* Building sections with occupants */
+        <div>
+          {Object.keys(selectionList).map((buildKey: string) => (
+            <BuildingSection
+              key={buildKey}
+              building={selectionList[buildKey]}
+              buildKey={buildKey}
+            />
+          ))}
+        </div>
+      )}
+
+      {/* Show error if any */}
+      {error && <p className="mt-4 text-sm text-red-600">{error}</p>}
+
+      {/* Loading indicator */}
+      {isPending && (
+        <div className="mt-4 flex justify-center">
+          <div className="animate-spin h-5 w-5 border-2 border-blue-600 rounded-full border-t-transparent"></div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default LoginOccupant;
diff --git a/WebServices/client-frontend/src/webPages/auth/Select/hook.ts b/WebServices/client-frontend/src/webPages/auth/Select/hook.ts
new file mode 100644
index 0000000..bbd5ad1
--- /dev/null
+++ b/WebServices/client-frontend/src/webPages/auth/Select/hook.ts
@@ -0,0 +1,73 @@
+function selectEmployeeHook(
+  startTransition: any,
+  data: any,
+  setError: any,
+  setJsonText: any,
+  Router: any
+) {
+  try {
+    const sendData = { ...data };
+    startTransition(() => {
+      fetch("/api/selection/employee", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(sendData),
+      })
+        .then((response) => {
+          if (response.status === 200) {
+            response.json().then((data) => {
+              console.log("data", data); //   setJsonText(JSON.stringify(data));
+              setTimeout(() => {
+                Router.push("/dashboard");
+              }, 100);
+            });
+          } else {
+            response.json().then((data) => {
+              setError(data?.message);
+            });
+          }
+        })
+        .catch(() => {});
+    });
+  } catch (error) {
+    setError("An error occurred during login");
+  }
+}
+
+function selectOccupantHook(
+  startTransition: any,
+  data: any,
+  setError: any,
+  setJsonText: any,
+  Router: any
+) {
+  try {
+    const sendData = { ...data };
+    startTransition(() => {
+      fetch("/api/selection/occupant", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(sendData),
+      })
+        .then((response) => {
+          if (response.status === 200) {
+            response.json().then((data) => {
+              console.log("data", data); //   setJsonText(JSON.stringify(data));
+              setTimeout(() => {
+                Router.push("/dashboard");
+              }, 100);
+            });
+          } else {
+            response.json().then((data) => {
+              setError(data?.message);
+            });
+          }
+        })
+        .catch(() => {});
+    });
+  } catch (error) {
+    setError("An error occurred during login");
+  }
+}
+
+export { selectEmployeeHook, selectOccupantHook };
diff --git a/WebServices/client-frontend/src/webPages/auth/Select/language.ts b/WebServices/client-frontend/src/webPages/auth/Select/language.ts
new file mode 100644
index 0000000..1ecf7d0
--- /dev/null
+++ b/WebServices/client-frontend/src/webPages/auth/Select/language.ts
@@ -0,0 +1,44 @@
+export const selectEmployeeTranslation = {
+  tr: {
+    companySelection: "Şirket Seçimi",
+    loggedInAs: "Çalışan olarak giriş yaptınız",
+    duty: "Görev",
+    id: "Kimlik",
+    noSelections: "Seçenek bulunamadı",
+    continue: "Devam et",
+    select: "Konut Seçimi",
+
+  },
+  en: {
+    companySelection: "Select your company",
+    loggedInAs: "You are logged in as an employee",
+    duty: "Duty",
+    id: "ID",
+    noSelections: "No selections available",
+    continue: "Continue",
+    select: "Select Occupant",
+
+  },
+};
+
+export const selectOccupantTranslation = {
+  tr: {
+    occupantSelection: "Daire Seçimi",
+    loggedInAs: "Kiracı olarak giriş yaptınız",
+    buildingInfo: "Bina Bilgisi",
+    level: "Kat",
+    noSelections: "Seçenek bulunamadı",
+    continue: "Devam et",
+    select: "Şirket Seçimi",
+
+  },
+  en: {
+    occupantSelection: "Select your occupant type",
+    loggedInAs: "You are logged in as an occupant",
+    buildingInfo: "Building Info",
+    level: "Level",
+    continue: "Continue",
+    noSelections: "No selections available",
+    select: "Select Company",
+  },
+};
diff --git a/WebServices/client-frontend/src/webPages/auth/Select/page.tsx b/WebServices/client-frontend/src/webPages/auth/Select/page.tsx
new file mode 100644
index 0000000..9b17cac
--- /dev/null
+++ b/WebServices/client-frontend/src/webPages/auth/Select/page.tsx
@@ -0,0 +1,55 @@
+"use client";
+import LoginOccupant from "./LoginOccupant";
+import LoginEmployee from "./LoginEmployee";
+
+import { useState, useEffect } from "react";
+import { LanguageSelectionComponent } from "@/components/common/HeaderSelections/LanguageSelectionComponent";
+import { Company, SelectListProps, BuildingMap } from "./types";
+import { selectEmployeeTranslation, selectOccupantTranslation } from "./language";
+
+const Select: React.FC<SelectListProps> = ({ selectionList, isEmployee, isOccupant, language }) => {
+  
+  const isEmployeeTrue = isEmployee && Array.isArray(selectionList)
+  const isOccupantTrue = isOccupant && !Array.isArray(selectionList)
+  const initTranslation = isEmployee ? selectEmployeeTranslation[language as "en" | "tr"] : selectOccupantTranslation[language as "en" | "tr"]
+
+  console.log("initTranslation", initTranslation);
+
+  const [lang, setLang] = useState(language);
+  const [translation, setTranslation] = useState(initTranslation);
+  const [listEmployeeSelection, setListEmployeeSelection] = useState<Company[]>(selectionList as Company[]);
+  const [listOccupantSelection, setListOccupantSelection] = useState<BuildingMap>(selectionList as BuildingMap);
+
+  console.log("translation", translation);
+
+  useEffect(() => {
+    if (isEmployee) { setListEmployeeSelection(selectionList as Company[]) }
+    else if (isOccupant) { setListOccupantSelection(selectionList as BuildingMap) }
+  }, []);
+
+  useEffect(() => {
+    setTranslation(isEmployee ? selectEmployeeTranslation[lang as "en" | "tr"] : selectOccupantTranslation[lang as "en" | "tr"]);
+  }, [lang]);
+
+  return (
+    <>
+      <div className="absolute top-4 right-4">
+        <LanguageSelectionComponent
+          lang={lang as "en" | "tr"}
+          setLang={setLang}
+          className="border px-3 py-2 rounded-lg"
+        />
+      </div>
+
+      <div className="flex h-full min-h-[inherit] flex-col items-center justify-center gap-4">
+        <div className="w-full max-w-md rounded-lg bg-white p-8 shadow-md">
+          <h2 className="mb-6 text-center text-2xl font-bold text-gray-900">{translation?.select}</h2>
+          {isEmployeeTrue && <LoginEmployee translation={translation} selectionList={listEmployeeSelection} />}
+          {isOccupantTrue && <LoginOccupant translation={translation} selectionList={listOccupantSelection} />}
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default Select;
diff --git a/WebServices/client-frontend/src/components/auth/types.ts b/WebServices/client-frontend/src/webPages/auth/Select/types.ts
similarity index 52%
rename from WebServices/client-frontend/src/components/auth/types.ts
rename to WebServices/client-frontend/src/webPages/auth/Select/types.ts
index bc1f175..a4bed4f 100644
--- a/WebServices/client-frontend/src/components/auth/types.ts
+++ b/WebServices/client-frontend/src/webPages/auth/Select/types.ts
@@ -1,5 +1,4 @@
-// TypeScript interfaces for proper type checking
-export interface Company {
+interface Company {
   uu_id: string;
   public_name: string;
   company_type?: string;
@@ -7,7 +6,7 @@ export interface Company {
   duty?: string;
 }
 
-export interface Occupant {
+interface Occupant {
   build_living_space_uu_id: string;
   part_uu_id: string;
   part_name: string;
@@ -17,20 +16,40 @@ export interface Occupant {
   code: string;
 }
 
-export interface Building {
+interface Building {
   build_uu_id: string;
   build_name: string;
   build_no: string;
   occupants: Occupant[];
 }
 
-export interface BuildingMap {
+interface BuildingMap {
   [key: string]: Building;
 }
 
-export interface SelectListProps {
+interface SelectListProps {
   selectionList: Company[] | BuildingMap;
   isEmployee: boolean;
   isOccupant: boolean;
-  lang?: "en" | "tr";
+  language?: "en" | "tr";
 }
+
+interface LoginOccupantProps {
+  selectionList: BuildingMap;
+  translation: any;
+}
+
+interface LoginEmployeeProps {
+  selectionList: Company[];
+  translation: any;
+}
+
+export type {
+  Company,
+  Occupant,
+  Building,
+  BuildingMap,
+  SelectListProps,
+  LoginOccupantProps,
+  LoginEmployeeProps,
+};