From 36e63960f86a4adada51a77e74e6a45653bd84ee Mon Sep 17 00:00:00 2001
From: Berkay <karatay.berkay@gmail.com>
Date: Wed, 30 Apr 2025 14:30:22 +0300
Subject: [PATCH] updated lang change and FormDisplay Components

---
 WebServices/client-frontend/setup-shadcn.sh   |   1 +
 .../app/(DashboardLayout)/individual/page.tsx |  58 +---
 .../src/app/(DashboardLayout)/layout.tsx      |   2 +-
 .../ActionButtonsDisplay/CreateButton.tsx     |  25 ++
 .../CustomButtonComponent.tsx                 |  31 ++
 .../common/ActionButtonsDisplay/index.ts      |   3 +
 .../common/ActionButtonsDisplay/types.ts      |  17 +
 .../common/CardDisplay/CardDisplay.tsx        |  73 ++++
 .../common/CardDisplay/CardItem.tsx           | 130 ++++++++
 .../common/CardDisplay/CardSkeleton.tsx       |  46 +++
 .../components/common/CardDisplay/index.tsx   |   1 +
 .../components/common/CardDisplay/schema.ts   | 117 +++++++
 .../components/common/CardDisplay/utils.ts    |  46 +++
 .../common/FormDisplay/CreateComponent.tsx    | 279 ++++++++++++++++
 .../common/FormDisplay/FormDisplay.tsx        | 120 +++++++
 .../common/FormDisplay/UpdateComponent.tsx    | 312 ++++++++++++++++++
 .../common/FormDisplay/ViewComponent.tsx      | 262 +++++++++++++++
 .../components/common/FormDisplay/index.ts    |   5 +
 .../components/common/FormDisplay/types.ts    |  37 +++
 .../GridSelectionComponent.tsx                |  42 +++
 .../LanguageSelectionComponent.tsx            |  37 +++
 .../PaginationModifiers/PageNavigation.tsx    | 116 +++++++
 .../PaginationModifiers/PageSizeSelector.tsx  |  52 +++
 .../PaginationModifiers/PaginationStats.tsx   |  36 ++
 .../PaginationToolsComponent.tsx              |  43 +++
 .../common/PaginationModifiers/index.ts       |   5 +
 .../common/PaginationModifiers/types.ts       |  19 ++
 .../QueryModifiers/SelectQueryModifier.tsx    |  67 ++++
 .../QueryModifiers/TextQueryModifier.tsx      |  80 +++++
 .../QueryModifiers/TypeQueryModifier.tsx      |  51 +++
 .../components/common/QueryModifiers/index.ts |   4 +
 .../components/common/QueryModifiers/types.ts |  35 ++
 .../src/components/common/ReadMe.md           | 128 +++++++
 .../Screenshot from 2025-04-29 19-36-45.png   | Bin 0 -> 68479 bytes
 .../SortingComponent/SortingComponent.tsx     |  49 +++
 .../common/SortingComponent/index.ts          |   2 +
 .../common/SortingComponent/types.ts          |  13 +
 .../src/components/common/hooks/useApiData.ts |  68 ++++
 .../common/hooks/useDashboardPage.ts          | 117 +++++++
 .../common/hooks/useDataFetching.ts           | 178 ++++++++++
 .../common/hooks/useStandardApiFetch.ts       | 181 ++++++++++
 .../src/components/common/index.ts            |  26 ++
 .../src/components/common/schemas.ts          |  37 +++
 .../src/components/header/Header.tsx          |  10 +-
 .../components/layouts/DashboardLayout.tsx    |  44 +++
 .../src/components/layouts/PageTemplate.tsx   | 155 +++++++++
 .../src/components/layouts/README.md          | 271 +++++++++++++++
 .../src/components/menu/NavigationMenu.tsx    |  30 +-
 .../src/components/menu/menu.tsx              |   4 +-
 .../src/components/navigator/retriever.tsx    |   2 +-
 .../src/components/ui/alert.tsx               |  66 ++++
 .../src/components/ui/badge.tsx               |  46 +++
 .../src/components/ui/card.tsx                |  92 ++++++
 .../src/components/ui/dialog.tsx              | 135 ++++++++
 .../src/components/ui/select.tsx              | 185 +++++++++++
 .../src/components/ui/skeleton.tsx            |  13 +
 .../src/components/ui/sonner.tsx              |  25 ++
 .../src/components/ui/table.tsx               | 116 +++++++
 .../src/components/ui/textarea.tsx            |  18 +
 .../src/components/validations/menu/menu.tsx  |   1 +
 .../src/eventRouters/Readme.md                |   0
 .../src/eventRouters/index.tsx                |   6 +
 .../src/eventRouters/pageRetriever.tsx        |  10 +
 .../src/eventRouters/unauthorizedpage.tsx     |  43 +++
 .../src/validations/list/paginations.ts       |  30 ++
 .../src/validations/menu/menu.tsx             |  11 +
 .../validations/translations/translation.tsx  |  61 ++++
 .../(DashboardLayout)/application/page.tsx    |  32 +-
 .../app/(DashboardLayout)/dashboard/page.tsx  |  33 +-
 .../src/app/(DashboardLayout)/error.tsx       | 108 ++++++
 .../management-frontend/src/app/error.tsx     | 108 ++++++
 .../common/FormDisplay/CreateComponent.tsx    |  28 +-
 .../common/FormDisplay/FormDisplay.tsx        |   7 +-
 .../common/FormDisplay/UpdateComponent.tsx    |  30 +-
 .../common/FormDisplay/ViewComponent.tsx      |  15 +-
 .../components/common/FormDisplay/types.ts    |  12 +
 .../src/components/common/hooks/useApiData.ts |  23 +-
 .../common/hooks/useDashboardPage.ts          |  93 ++++++
 .../common/hooks/useDataFetching.ts           |  29 +-
 .../common/hooks/useStandardApiFetch.ts       | 181 ++++++++++
 .../components/layouts/DashboardLayout.tsx    |  72 ++++
 .../src/components/layouts/PageTemplate.tsx   | 155 +++++++++
 .../src/components/layouts/README.md          | 271 +++++++++++++++
 .../src/eventRouters/application/page.tsx     |  36 +-
 .../src/eventRouters/application/schema.ts    | 158 +++++----
 .../src/eventRouters/schemas/zodSchemas.ts    |  35 ++
 docker-compose.yml                            |  78 ++---
 87 files changed, 5517 insertions(+), 312 deletions(-)
 create mode 100644 WebServices/client-frontend/src/components/common/ActionButtonsDisplay/CreateButton.tsx
 create mode 100644 WebServices/client-frontend/src/components/common/ActionButtonsDisplay/CustomButtonComponent.tsx
 create mode 100644 WebServices/client-frontend/src/components/common/ActionButtonsDisplay/index.ts
 create mode 100644 WebServices/client-frontend/src/components/common/ActionButtonsDisplay/types.ts
 create mode 100644 WebServices/client-frontend/src/components/common/CardDisplay/CardDisplay.tsx
 create mode 100644 WebServices/client-frontend/src/components/common/CardDisplay/CardItem.tsx
 create mode 100644 WebServices/client-frontend/src/components/common/CardDisplay/CardSkeleton.tsx
 create mode 100644 WebServices/client-frontend/src/components/common/CardDisplay/index.tsx
 create mode 100644 WebServices/client-frontend/src/components/common/CardDisplay/schema.ts
 create mode 100644 WebServices/client-frontend/src/components/common/CardDisplay/utils.ts
 create mode 100644 WebServices/client-frontend/src/components/common/FormDisplay/CreateComponent.tsx
 create mode 100644 WebServices/client-frontend/src/components/common/FormDisplay/FormDisplay.tsx
 create mode 100644 WebServices/client-frontend/src/components/common/FormDisplay/UpdateComponent.tsx
 create mode 100644 WebServices/client-frontend/src/components/common/FormDisplay/ViewComponent.tsx
 create mode 100644 WebServices/client-frontend/src/components/common/FormDisplay/index.ts
 create mode 100644 WebServices/client-frontend/src/components/common/FormDisplay/types.ts
 create mode 100644 WebServices/client-frontend/src/components/common/HeaderSelections/GridSelectionComponent.tsx
 create mode 100644 WebServices/client-frontend/src/components/common/HeaderSelections/LanguageSelectionComponent.tsx
 create mode 100644 WebServices/client-frontend/src/components/common/PaginationModifiers/PageNavigation.tsx
 create mode 100644 WebServices/client-frontend/src/components/common/PaginationModifiers/PageSizeSelector.tsx
 create mode 100644 WebServices/client-frontend/src/components/common/PaginationModifiers/PaginationStats.tsx
 create mode 100644 WebServices/client-frontend/src/components/common/PaginationModifiers/PaginationToolsComponent.tsx
 create mode 100644 WebServices/client-frontend/src/components/common/PaginationModifiers/index.ts
 create mode 100644 WebServices/client-frontend/src/components/common/PaginationModifiers/types.ts
 create mode 100644 WebServices/client-frontend/src/components/common/QueryModifiers/SelectQueryModifier.tsx
 create mode 100644 WebServices/client-frontend/src/components/common/QueryModifiers/TextQueryModifier.tsx
 create mode 100644 WebServices/client-frontend/src/components/common/QueryModifiers/TypeQueryModifier.tsx
 create mode 100644 WebServices/client-frontend/src/components/common/QueryModifiers/index.ts
 create mode 100644 WebServices/client-frontend/src/components/common/QueryModifiers/types.ts
 create mode 100644 WebServices/client-frontend/src/components/common/ReadMe.md
 create mode 100644 WebServices/client-frontend/src/components/common/Screenshot from 2025-04-29 19-36-45.png
 create mode 100644 WebServices/client-frontend/src/components/common/SortingComponent/SortingComponent.tsx
 create mode 100644 WebServices/client-frontend/src/components/common/SortingComponent/index.ts
 create mode 100644 WebServices/client-frontend/src/components/common/SortingComponent/types.ts
 create mode 100644 WebServices/client-frontend/src/components/common/hooks/useApiData.ts
 create mode 100644 WebServices/client-frontend/src/components/common/hooks/useDashboardPage.ts
 create mode 100644 WebServices/client-frontend/src/components/common/hooks/useDataFetching.ts
 create mode 100644 WebServices/client-frontend/src/components/common/hooks/useStandardApiFetch.ts
 create mode 100644 WebServices/client-frontend/src/components/common/index.ts
 create mode 100644 WebServices/client-frontend/src/components/common/schemas.ts
 create mode 100644 WebServices/client-frontend/src/components/layouts/DashboardLayout.tsx
 create mode 100644 WebServices/client-frontend/src/components/layouts/PageTemplate.tsx
 create mode 100644 WebServices/client-frontend/src/components/layouts/README.md
 create mode 100644 WebServices/client-frontend/src/components/ui/alert.tsx
 create mode 100644 WebServices/client-frontend/src/components/ui/badge.tsx
 create mode 100644 WebServices/client-frontend/src/components/ui/card.tsx
 create mode 100644 WebServices/client-frontend/src/components/ui/dialog.tsx
 create mode 100644 WebServices/client-frontend/src/components/ui/select.tsx
 create mode 100644 WebServices/client-frontend/src/components/ui/skeleton.tsx
 create mode 100644 WebServices/client-frontend/src/components/ui/sonner.tsx
 create mode 100644 WebServices/client-frontend/src/components/ui/table.tsx
 create mode 100644 WebServices/client-frontend/src/components/ui/textarea.tsx
 create mode 100644 WebServices/client-frontend/src/eventRouters/Readme.md
 create mode 100644 WebServices/client-frontend/src/eventRouters/index.tsx
 create mode 100644 WebServices/client-frontend/src/eventRouters/pageRetriever.tsx
 create mode 100644 WebServices/client-frontend/src/eventRouters/unauthorizedpage.tsx
 create mode 100644 WebServices/client-frontend/src/validations/list/paginations.ts
 create mode 100644 WebServices/client-frontend/src/validations/menu/menu.tsx
 create mode 100644 WebServices/client-frontend/src/validations/translations/translation.tsx
 create mode 100644 WebServices/management-frontend/src/app/(DashboardLayout)/error.tsx
 create mode 100644 WebServices/management-frontend/src/app/error.tsx
 create mode 100644 WebServices/management-frontend/src/components/common/hooks/useDashboardPage.ts
 create mode 100644 WebServices/management-frontend/src/components/common/hooks/useStandardApiFetch.ts
 create mode 100644 WebServices/management-frontend/src/components/layouts/DashboardLayout.tsx
 create mode 100644 WebServices/management-frontend/src/components/layouts/PageTemplate.tsx
 create mode 100644 WebServices/management-frontend/src/components/layouts/README.md
 create mode 100644 WebServices/management-frontend/src/eventRouters/schemas/zodSchemas.ts

diff --git a/WebServices/client-frontend/setup-shadcn.sh b/WebServices/client-frontend/setup-shadcn.sh
index 52dec08..bd6dc81 100755
--- a/WebServices/client-frontend/setup-shadcn.sh
+++ b/WebServices/client-frontend/setup-shadcn.sh
@@ -34,6 +34,7 @@ npx shadcn@latest add calendar -y
 npx shadcn@latest add date-picker -y
 npx shadcn@latest add skeleton -y
 npx shadcn@latest add table -y
+npx shadcn@latest add textarea -y
 
 # Update any dependencies with legacy peer deps
 echo "🔄 Updating dependencies..."
diff --git a/WebServices/client-frontend/src/app/(DashboardLayout)/individual/page.tsx b/WebServices/client-frontend/src/app/(DashboardLayout)/individual/page.tsx
index 0f4ed5b..2c99949 100644
--- a/WebServices/client-frontend/src/app/(DashboardLayout)/individual/page.tsx
+++ b/WebServices/client-frontend/src/app/(DashboardLayout)/individual/page.tsx
@@ -1,54 +1,28 @@
 "use server";
 import React from "react";
-import ClientMenu from "@/components/menu/menu";
-import { retrievePageList, retrievePagebyUrl } from "@/apicalls/cookies/token";
-import { retrievePageByUrlAndPageId } from "@/components/navigator/retriever";
-import { searchPlaceholder } from "@/app/commons/pageDefaults";
-
-const pageInfo = {
-  tr: "Birey Sayfası",
-  en: "Individual Page",
-};
+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 = "/individual";
-  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";
+  // Use the enhanced dashboard hook to get all necessary data
+  const {
+    activePage,
+    searchParamsInstance,
+    lang,
+    PageComponent,
+    siteUrlsList
+  } = await useDashboardPage({
+    pageUrl: "/individual",
+    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">
-          {/* 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">{pageInfo[lang]}</h1>
-            <div className="flex items-center space-x-4">
-              <input
-                type="text"
-                placeholder={searchPlaceholder[lang]}
-                className="border px-3 py-2 rounded-lg"
-              />
-              <div className="w-10 h-10 bg-gray-300 rounded-full"></div>
-            </div>
-          </header>
-          <div className="p-4 overflow-y-auto">
-            <PageComponent lang={lang} queryParams={searchParamsInstance} />
-          </div>
-        </div>
-      </div>
-    </>
+    <DashboardLayout lang={lang} activePage={activePage} siteUrls={siteUrlsList}>
+      <PageComponent lang={lang} queryParams={searchParamsInstance} />
+    </DashboardLayout>
   );
 }
diff --git a/WebServices/client-frontend/src/app/(DashboardLayout)/layout.tsx b/WebServices/client-frontend/src/app/(DashboardLayout)/layout.tsx
index 521102d..ec6fb15 100644
--- a/WebServices/client-frontend/src/app/(DashboardLayout)/layout.tsx
+++ b/WebServices/client-frontend/src/app/(DashboardLayout)/layout.tsx
@@ -18,7 +18,7 @@ export default async function DashLayout({
   }
   return (
     <div className="h-screen w-full">
-      <div className="h-full w-full overflow-y-auto">{children}</div>
+      <div className="h-full w-full">{children}</div>
     </div>
   );
 }
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..8b4b3ce
--- /dev/null
+++ b/WebServices/client-frontend/src/components/common/CardDisplay/CardDisplay.tsx
@@ -0,0 +1,73 @@
+"use client";
+import React from "react";
+import { CardItem } from "./CardItem";
+import { CardSkeleton } from "./CardSkeleton";
+import { getFieldValue, getGridClasses } from "./utils";
+import { CardDisplayProps } from "./schema";
+
+// Interface moved to schema.ts
+
+export function CardDisplay<T>({
+  showFields,
+  data,
+  lang,
+  translations,
+  error,
+  loading,
+  titleField = "name",
+  onCardClick,
+  renderCustomField,
+  gridCols = 4,
+  showViewIcon = false,
+  showUpdateIcon = false,
+  onViewClick,
+  onUpdateClick,
+}: 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)}>
+      {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-6">
+          {(translations[lang] || {}).noData || "No data found"}
+        </div>
+      ) : (
+        data.map((item, index) => (
+          <CardItem
+            key={index}
+            item={item}
+            index={index}
+            showFields={showFields}
+            titleField={titleField}
+            lang={lang}
+            translations={translations}
+            onCardClick={onCardClick}
+            renderCustomField={renderCustomField}
+            showViewIcon={showViewIcon}
+            showUpdateIcon={showUpdateIcon}
+            onViewClick={onViewClick}
+            onUpdateClick={onUpdateClick}
+            getFieldValue={getFieldValue}
+          />
+        ))
+      )}
+    </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..83bd719
--- /dev/null
+++ b/WebServices/client-frontend/src/components/common/CardDisplay/CardItem.tsx
@@ -0,0 +1,130 @@
+"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,
+}: CardItemProps<T>) {
+  return (
+    <div key={index} className="w-full p-1">
+      <Card
+        className={`h-full ${onCardClick ? 'cursor-pointer hover:shadow-md transition-shadow' : ''}`}
+        onClick={onCardClick ? () => onCardClick(item) : undefined}
+      >
+        <CardHeader className="p-3 pb-0 flex justify-between items-start">
+          <h3 className="text-lg font-semibold">
+            {getFieldValue(item, titleField)}
+          </h3>
+          <CardActions
+            item={item}
+            showViewIcon={showViewIcon}
+            showUpdateIcon={showUpdateIcon}
+            onViewClick={onViewClick}
+            onUpdateClick={onUpdateClick}
+          />
+        </CardHeader>
+        <CardContent className="p-3">
+          <div className="space-y-2">
+            {showFields.map((field) => (
+              <CardField
+                key={`${index}-${field}`}
+                item={item}
+                field={field}
+                lang={lang}
+                translations={translations}
+                renderCustomField={renderCustomField}
+                getFieldValue={getFieldValue}
+              />
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+// Interface moved to schema.ts
+
+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>
+  );
+}
+
+// Interface moved to schema.ts
+
+function CardField<T>({
+  item,
+  field,
+  lang,
+  translations,
+  renderCustomField,
+  getFieldValue,
+}: CardFieldProps<T>) {
+  return (
+    <div className="flex">
+      <span className="font-medium mr-2 min-w-[80px]">
+        {translations[field]?.[lang] || field}:
+      </span>
+      <span className="flex-1">
+        {renderCustomField
+          ? renderCustomField(item, field)
+          : getFieldValue(item, field)}
+      </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..b1637b0
--- /dev/null
+++ b/WebServices/client-frontend/src/components/common/CardDisplay/schema.ts
@@ -0,0 +1,117 @@
+/**
+ * CardDisplay component interfaces
+ */
+
+/**
+ * Main props for the CardDisplay component
+ */
+export interface CardDisplayProps<T> {
+  /** Fields to display in each card */
+  showFields: string[];
+  /** Array of data items to display */
+  data: T[];
+  /** Current language code */
+  lang: string;
+  /** Translations object for field labels and messages */
+  translations: Record<string, any>;
+  /** Error object if data fetching failed */
+  error: Error | null;
+  /** Loading state indicator */
+  loading: boolean;
+  /** Field to use as the card title (default: "name") */
+  titleField?: string;
+  /** Handler for when a card is clicked */
+  onCardClick?: (item: T) => void;
+  /** Custom renderer for specific fields */
+  renderCustomField?: (item: T, field: string) => React.ReactNode;
+  /** Number of columns in the grid (1-6) */
+  gridCols?: 1 | 2 | 3 | 4 | 5 | 6;
+  /** Whether to show the view icon */
+  showViewIcon?: boolean;
+  /** Whether to show the update/edit icon */
+  showUpdateIcon?: boolean;
+  /** Handler for when the view icon is clicked */
+  onViewClick?: (item: T) => void;
+  /** Handler for when the update/edit icon is clicked */
+  onUpdateClick?: (item: T) => void;
+}
+
+/**
+ * Props for the CardItem component
+ */
+export interface CardItemProps<T> {
+  /** Data item to display */
+  item: T;
+  /** Index of the item in the data array */
+  index: number;
+  /** Fields to display in the card */
+  showFields: string[];
+  /** Field to use as the card title */
+  titleField: string;
+  /** Current language code */
+  lang: string;
+  /** Translations object for field labels */
+  translations: Record<string, any>;
+  /** Handler for when the card is clicked */
+  onCardClick?: (item: T) => void;
+  /** Custom renderer for specific fields */
+  renderCustomField?: (item: T, field: string) => React.ReactNode;
+  /** Whether to show the view icon */
+  showViewIcon: boolean;
+  /** Whether to show the update/edit icon */
+  showUpdateIcon: boolean;
+  /** Handler for when the view icon is clicked */
+  onViewClick?: (item: T) => void;
+  /** Handler for when the update/edit icon is clicked */
+  onUpdateClick?: (item: T) => void;
+  /** Function to get field values from the item */
+  getFieldValue: (item: any, field: string) => any;
+}
+
+/**
+ * Props for the CardActions component
+ */
+export interface CardActionsProps<T> {
+  /** Data item the actions apply to */
+  item: T;
+  /** Whether to show the view icon */
+  showViewIcon: boolean;
+  /** Whether to show the update/edit icon */
+  showUpdateIcon: boolean;
+  /** Handler for when the view icon is clicked */
+  onViewClick?: (item: T) => void;
+  /** Handler for when the update/edit icon is clicked */
+  onUpdateClick?: (item: T) => void;
+}
+
+/**
+ * Props for the CardField component
+ */
+export interface CardFieldProps<T> {
+  /** Data item the field belongs to */
+  item: T;
+  /** Field name to display */
+  field: string;
+  /** Current language code */
+  lang: string;
+  /** Translations object for field labels */
+  translations: Record<string, any>;
+  /** Custom renderer for specific fields */
+  renderCustomField?: (item: T, field: string) => React.ReactNode;
+  /** Function to get field values from the item */
+  getFieldValue: (item: any, field: string) => any;
+}
+
+/**
+ * Props for the CardSkeleton component
+ */
+export interface CardSkeletonProps {
+  /** Index of the skeleton in the loading array */
+  index: number;
+  /** Fields to create skeleton placeholders for */
+  showFields: string[];
+  /** Whether to show a skeleton for the view icon */
+  showViewIcon: boolean;
+  /** Whether to show a skeleton for the update/edit icon */
+  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..4e6e97f
--- /dev/null
+++ b/WebServices/client-frontend/src/components/common/CardDisplay/utils.ts
@@ -0,0 +1,46 @@
+/**
+ * Safely gets a field value from an item, supporting nested fields with dot notation
+ */
+export function getFieldValue(item: any, field: string): any {
+  if (!item) return "";
+  
+  // Handle nested fields with dot notation (e.g., "user.name")
+  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];
+}
+
+/**
+ * Gets a field label from translations or formats the field name
+ */
+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, " ");
+}
+
+/**
+ * Generates responsive grid classes based on the gridCols prop
+ */
+export function getGridClasses(gridCols: 1 | 2 | 3 | 4 | 5 | 6): string {
+  const baseClass = "grid grid-cols-1 gap-4";
+  
+  // Map gridCols to responsive classes
+  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..77d3756
--- /dev/null
+++ b/WebServices/client-frontend/src/components/common/FormDisplay/CreateComponent.tsx
@@ -0,0 +1,279 @@
+"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 } 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";
+
+// Import field definitions type
+interface FieldDefinition {
+  type: string;
+  group: string;
+  label: string;
+  options?: string[];
+  readOnly?: boolean;
+  required?: boolean;
+  defaultValue?: any;
+  name?: string;
+}
+
+export function CreateComponent<T>({
+  refetch,
+  setMode,
+  setSelectedItem,
+  onCancel,
+  lang,
+  translations,
+  formProps = {},
+}: 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,
+  } = useForm({
+    defaultValues,
+    resolver: validationSchema ? zodResolver(validationSchema) : undefined,
+  });
+
+  const formValues = watch();
+
+  // Handle form submission
+  const onSubmit = async (data: Record<string, any>) => {
+    try {
+      console.log("Form data to save:", data);
+
+      // Here you would make an API call to save the data
+      // For example: await createApplication(data);
+
+      // Mock API call success
+      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) => {
+    // First check if there's a translation for the exact group key
+    if (t[groupName]) {
+      return t[groupName];
+    }
+
+    // Try to format the group name in a more readable way if no translation exists
+    // Convert camelCase or snake_case to Title Case with spaces
+    const formattedName = groupName
+      // Insert space before capital letters and uppercase the first letter
+      .replace(/([A-Z])/g, ' $1')
+      // Replace underscores with spaces
+      .replace(/_/g, ' ')
+      // Capitalize first letter
+      .replace(/^./, (str) => str.toUpperCase())
+      // Capitalize each word
+      .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}
+              {field.required && <span className="text-red-500 ml-1">*</span>}
+            </Label>
+            <Input
+              id={fieldName}
+              {...register(fieldName)}
+              placeholder={t[fieldName] || field.label}
+              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}
+              {field.required && <span className="text-red-500 ml-1">*</span>}
+            </Label>
+            <Textarea
+              id={fieldName}
+              {...register(fieldName)}
+              placeholder={t[fieldName] || field.label}
+              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}
+              {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} />
+              </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}
+              {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(() => console.log("Form data to save:"))}>
+      <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>
+
+          <div className="flex justify-end space-x-2 pt-6">
+            <Button type="button" variant="outline" onClick={onCancel}>
+              {t.cancel || "Cancel"}
+            </Button>
+            <Button type="submit">
+              {t.save || "Save"}
+            </Button>
+          </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..20f7740
--- /dev/null
+++ b/WebServices/client-frontend/src/components/common/FormDisplay/FormDisplay.tsx
@@ -0,0 +1,120 @@
+"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 = {},
+}: FormDisplayProps<T>) {
+  const [enhancedFormProps, setEnhancedFormProps] = useState(formProps);
+  
+  // Dynamically import schema definitions if provided in formProps
+  useEffect(() => {
+    const loadSchemaDefinitions = async () => {
+      try {
+        // Check if schemaPath is provided in formProps
+        if (formProps.schemaPath) {
+          // Dynamic import of the schema module
+          const schemaModule = await import(formProps.schemaPath);
+          
+          // Get the appropriate field definitions based on mode
+          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;
+          }
+          
+          // Get the appropriate validation schema based on mode
+          let validationSchema;
+          if (mode === "create" && schemaModule.CreateApplicationSchema) {
+            validationSchema = schemaModule.CreateApplicationSchema;
+          } else if (mode === "update" && schemaModule.UpdateApplicationSchema) {
+            validationSchema = schemaModule.UpdateApplicationSchema;
+          } else if (mode === "view" && schemaModule.ViewApplicationSchema) {
+            validationSchema = schemaModule.ViewApplicationSchema;
+          } else if (schemaModule.ApplicationSchema) {
+            validationSchema = schemaModule.ApplicationSchema;
+          }
+          
+          // Get the grouped field definitions structure if available
+          const groupedFieldDefs = schemaModule.baseFieldDefinitions || {};
+          
+          // Update form props with schema information
+          setEnhancedFormProps({
+            ...formProps,
+            fieldDefinitions: fieldDefs || {},
+            validationSchema,
+            fieldsByMode: schemaModule.fieldsByMode || {},
+            groupedFieldDefinitions: groupedFieldDefs,
+          });
+        }
+      } catch (error) {
+        console.error("Error loading schema definitions:", error);
+      }
+    };
+    
+    loadSchemaDefinitions();
+  }, [formProps, mode, lang]); // Added lang as a dependency to ensure re-fetch when language changes
+  
+  // Render the appropriate component based on the mode
+  switch (mode) {
+    case "create":
+      return (
+        <CreateComponent<T>
+          key={`create-${lang}`} // Add key with lang to force re-render on language change
+          refetch={refetch}
+          setMode={setMode}
+          setSelectedItem={setSelectedItem}
+          onCancel={onCancel}
+          lang={lang}
+          translations={translations}
+          formProps={enhancedFormProps}
+        />
+      );
+    case "update":
+      return initialData ? (
+        <UpdateComponent<T>
+          key={`update-${lang}`} // Add key with lang to force re-render on language change
+          initialData={initialData}
+          refetch={refetch}
+          setMode={setMode}
+          setSelectedItem={setSelectedItem}
+          onCancel={onCancel}
+          lang={lang}
+          translations={translations}
+          formProps={enhancedFormProps}
+        />
+      ) : null;
+    case "view":
+      return initialData ? (
+        <ViewComponent<T>
+          key={`view-${lang}`} // Add key with lang to force re-render on language change
+          initialData={initialData}
+          refetch={refetch}
+          setMode={setMode}
+          setSelectedItem={setSelectedItem}
+          onCancel={onCancel}
+          lang={lang}
+          translations={translations}
+          formProps={enhancedFormProps} // Changed from formProps to enhancedFormProps for consistency
+        />
+      ) : 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..d1adfbf
--- /dev/null
+++ b/WebServices/client-frontend/src/components/common/FormDisplay/UpdateComponent.tsx
@@ -0,0 +1,312 @@
+"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 { UpdateComponentProps } 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";
+
+// Import field definitions type
+interface FieldDefinition {
+  type: string;
+  group: string;
+  label: string;
+  options?: string[];
+  readOnly?: boolean;
+  required?: boolean;
+  defaultValue?: any;
+  name?: string; // Add name property for TypeScript compatibility
+}
+
+export function UpdateComponent<T>({
+  initialData,
+  refetch,
+  setMode,
+  setSelectedItem,
+  onCancel,
+  lang,
+  translations,
+  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;
+
+  // 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 and initialData
+  const defaultValues: Record<string, any> = {};
+  Object.entries(fieldDefinitions).forEach(([key, def]) => {
+    const fieldDef = def as FieldDefinition;
+    defaultValues[key] = fieldDef.defaultValue !== undefined ? fieldDef.defaultValue : "";
+  });
+
+  // Merge initialData with default values
+  if (initialData) {
+    Object.assign(defaultValues, initialData as Record<string, any>);
+  }
+
+  // Setup form with validation schema if available
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    setValue,
+    watch,
+    reset,
+  } = useForm({
+    defaultValues,
+    resolver: validationSchema ? zodResolver(validationSchema) : undefined,
+  });
+
+  // Reset form when initialData changes
+  useEffect(() => {
+    if (initialData) {
+      reset({ ...initialData as Record<string, any> });
+    }
+  }, [initialData, reset]);
+
+  const formValues = watch();
+
+  // Handle form submission
+  const onSubmit = async (data: any) => {
+    try {
+      console.log("Form data to update:", data);
+
+      // Here you would make an API call to update the data
+      // For example: await updateApplication(data);
+
+      // Mock API call success
+      if (refetch) refetch();
+      setMode("list");
+      setSelectedItem(null);
+    } catch (error) {
+      console.error("Error updating 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) => {
+    // First check if there's a translation for the exact group key
+    if (t[groupName]) {
+      return t[groupName];
+    }
+
+    // Try to format the group name in a more readable way if no translation exists
+    // Convert camelCase or snake_case to Title Case with spaces
+    const formattedName = groupName
+      // Insert space before capital letters and uppercase the first letter
+      .replace(/([A-Z])/g, ' $1')
+      // Replace underscores with spaces
+      .replace(/_/g, ' ')
+      // Capitalize first letter
+      .replace(/^./, (str) => str.toUpperCase())
+      // Capitalize each word
+      .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}
+              {field.required && <span className="text-red-500 ml-1">*</span>}
+            </Label>
+            <Input
+              id={fieldName}
+              {...register(fieldName)}
+              placeholder={t[fieldName] || field.label}
+              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}
+              {field.required && <span className="text-red-500 ml-1">*</span>}
+            </Label>
+            <Textarea
+              id={fieldName}
+              {...register(fieldName)}
+              placeholder={t[fieldName] || field.label}
+              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}
+              {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} />
+              </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}
+              {field.required && <span className="text-red-500 ml-1">*</span>}
+            </Label>
+            {errorMessage && (
+              <p className="text-sm text-red-500">{errorMessage}</p>
+            )}
+          </div>
+        );
+
+      case "date":
+        return (
+          <div className="space-y-2" key={fieldName}>
+            <Label htmlFor={fieldName}>
+              {t[fieldName] || field.label}
+              {field.required && <span className="text-red-500 ml-1">*</span>}
+            </Label>
+            <Input
+              id={fieldName}
+              type="date"
+              {...register(fieldName)}
+              disabled={field.readOnly}
+            />
+            {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"}
+              </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>
+
+          <div className="flex justify-end space-x-2 pt-6">
+            <Button type="button" variant="outline" onClick={onCancel}>
+              {t.cancel || "Cancel"}
+            </Button>
+            <Button type="submit">
+              {t.save || "Save"}
+            </Button>
+          </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..876e63c
--- /dev/null
+++ b/WebServices/client-frontend/src/components/common/FormDisplay/ViewComponent.tsx
@@ -0,0 +1,262 @@
+"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 } from "./types";
+import { Label } from "@/components/ui/label";
+import { z } from "zod";
+
+// Import field definitions type
+export interface FieldDefinition {
+  type: string;
+  group: string;
+  label: string;
+  options?: string[];
+  readOnly?: boolean;
+  required?: boolean;
+  defaultValue?: any;
+  name?: string; // Add name property for TypeScript compatibility
+}
+
+// Utility function to format field label
+const formatFieldLabel = (fieldName: string) => 
+  fieldName
+    .replace(/([A-Z])/g, ' $1')
+    .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={lang}
+                translations={translations}
+                hasError={hasError}
+              />
+            );
+          })}
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+// Main ViewComponent
+export function ViewComponent<T>({
+  initialData,
+  setMode,
+  setSelectedItem,
+  onCancel,
+  lang,
+  translations,
+  formProps = {},
+}: ViewComponentProps<T>) {
+  const t = translations[lang as keyof typeof translations] || {};
+
+  // Get field definitions and validation schema from formProps if available
+  const fieldDefinitions = formProps.fieldDefinitions || {};
+  const validationSchema = formProps.validationSchema as z.ZodObject<any> | undefined;
+
+  // Group fields by their group property
+  const [groupedFields, setGroupedFields] = useState<Record<string, FieldDefinition[]>>({});
+  // State to track validation errors if any
+  const [validationErrors, setValidationErrors] = useState<Record<string, string>>({});
+
+  // 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]);
+
+  // For view mode, we don't need strict validation
+  // Just log validation issues but don't show errors to the user
+  useEffect(() => {
+    if (validationSchema && initialData) {
+      try {
+        // Try to parse the data through the Zod schema
+        validationSchema.parse(initialData);
+        // Clear any previous validation errors if successful
+        setValidationErrors({});
+      } catch (error) {
+        if (error instanceof z.ZodError) {
+          // Just log the errors but don't set them in the state
+          // This prevents showing validation errors in view mode
+          console.warn('View data validation issues (not shown to user):', error.errors);
+          
+          // Clear any previous validation errors
+          setValidationErrors({});
+        }
+      }
+    }
+  }, [initialData, validationSchema]);
+
+  const handleEdit = () => {
+    setMode("update");
+  };
+
+  return (
+    <Card className="w-full mb-6">
+      <CardHeader>
+        <CardTitle>{t.view || "View"}</CardTitle>
+        <CardDescription>{t.viewDescription || "View item details"}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-6">
+          {/* If we have grouped fields from schema, use them */}
+          {Object.keys(groupedFields).length > 0 ? (
+            // Render fields grouped by their group property
+            Object.entries(groupedFields).map(([groupName, fields]) => (
+              <ViewFieldGroup
+                key={groupName}
+                groupName={groupName}
+                fields={fields}
+                initialData={initialData}
+                lang={lang}
+                translations={t}
+                validationErrors={validationErrors}
+              />
+            ))
+          ) : (
+            // Fallback to the default view if no field definitions are available
+            initialData && (
+              <div className="space-y-4">
+                {validationSchema ? (
+                  // If we have a validation schema, use its shape to determine fields
+                  Object.entries(validationSchema.shape || {}).map(([fieldName, _]) => {
+                    const value = (initialData as any)[fieldName];
+                    // Skip undefined or null values
+                    if (value === undefined || value === null) return null;
+
+                    return (
+                      <ViewField
+                        key={fieldName}
+                        fieldName={fieldName}
+                        value={value}
+                        label={formatFieldLabel(fieldName)}
+                        lang={lang}
+                        translations={t}
+                      />
+                    );
+                  })
+                ) : (
+                  // If no schema, just iterate over the data keys
+                  Object.entries(initialData as Record<string, any>).map(([fieldName, value]) => {
+                    // Skip undefined or null values
+                    if (value === undefined || value === null) return null;
+
+                    return (
+                      <ViewField
+                        key={fieldName}
+                        fieldName={fieldName}
+                        value={value}
+                        label={formatFieldLabel(fieldName)}
+                        lang={lang}
+                        translations={t}
+                      />
+                    );
+                  })
+                )}
+              </div>
+            )
+          )}
+
+          <div className="flex justify-end space-x-2 pt-4">
+            <Button variant="outline" onClick={onCancel}>
+              {t.back || "Back"}
+            </Button>
+            <Button onClick={handleEdit}>
+              {t.edit || "Edit"}
+            </Button>
+          </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..47300ff
--- /dev/null
+++ b/WebServices/client-frontend/src/components/common/FormDisplay/types.ts
@@ -0,0 +1,37 @@
+"use client";
+
+// Define the FormMode type to ensure consistency
+export type FormMode = "list" | "create" | "update" | "view";
+
+export interface BaseFormProps<T> {
+  initialData?: T;
+  refetch?: () => void;
+  setMode: React.Dispatch<React.SetStateAction<FormMode>>;
+  setSelectedItem: React.Dispatch<React.SetStateAction<T | null>>;
+  onCancel: () => void;
+  lang: string;
+  translations: Record<string, Record<string, string>>;
+  formProps?: Record<string, any>;
+}
+
+export interface CreateComponentProps<T> extends BaseFormProps<T> {}
+
+export interface UpdateComponentProps<T> extends BaseFormProps<T> {
+  initialData: T; // Required for update
+}
+
+export interface ViewComponentProps<T> extends BaseFormProps<T> {
+  initialData: T; // Required for view
+}
+
+export interface FormDisplayProps<T> {
+  mode: FormMode;
+  initialData?: T;
+  refetch?: () => void;
+  setMode: React.Dispatch<React.SetStateAction<FormMode>>;
+  setSelectedItem: React.Dispatch<React.SetStateAction<T | null>>;
+  onCancel: () => void;
+  lang: string;
+  translations: Record<string, Record<string, string>>;
+  formProps?: Record<string, any>;
+}
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..7b9a4a2
--- /dev/null
+++ b/WebServices/client-frontend/src/components/common/HeaderSelections/LanguageSelectionComponent.tsx
@@ -0,0 +1,37 @@
+"use client";
+import React from "react";
+
+export type Language = "en" | "tr";
+
+interface LanguageSelectionComponentProps {
+  lang: Language;
+  setLang: (lang: Language) => void;
+  translations?: Record<string, any>;
+  className?: string;
+}
+
+export const LanguageSelectionComponent: React.FC<LanguageSelectionComponentProps> = ({
+  lang,
+  setLang,
+  translations,
+  className = "p-2 border rounded",
+}) => {
+  const t = translations?.[lang] || {};
+
+  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">{t.english || "English"}</option>
+        <option value="tr">{t.turkish || "Turkish"}</option>
+      </select>
+    </div>
+  );
+};
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..a8315e2
--- /dev/null
+++ b/WebServices/client-frontend/src/components/common/QueryModifiers/TextQueryModifier.tsx
@@ -0,0 +1,80 @@
+"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,
+  onQueryChange,
+  translations,
+  lang,
+}) => {
+  const t = translations[lang] || {};
+
+  const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+    onQueryChange(fieldKey, newValue);
+  }, [fieldKey, onQueryChange]);
+
+  const handleClear = useCallback(() => {
+    // Clear both the regular field and the ilike filter
+    onQueryChange(fieldKey, null);
+    onQueryChange(`${fieldKey}__ilike`, null);
+  }, [fieldKey, onQueryChange]);
+
+  const handleKeyUp = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      // Apply the search immediately on 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="sm"
+          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 0000000000000000000000000000000000000000..309f151828f728dd5e0c71e9f2de3e9b7e969709
GIT binary patch
literal 68479
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
GpZ^CU6=)p*

literal 0
HcmV?d00001

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..46448eb
--- /dev/null
+++ b/WebServices/client-frontend/src/components/common/hooks/useApiData.ts
@@ -0,0 +1,68 @@
+import { useDataFetching, ApiResponse } from "./useDataFetching";
+import { RequestParams } from "../schemas";
+
+/**
+ * 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> = {}
+) {
+  // Define the fetch function that will be passed to useDataFetching
+  const fetchFromApi = async (
+    params: RequestParams
+  ): Promise<ApiResponse<T>> => {
+    try {
+      // Prepare the request body with action and all params
+      const requestBody = {
+        action: "list",
+        page: params.page,
+        size: params.size,
+        orderField: params.orderField,
+        orderType: params.orderType,
+        query: params.query,
+      };
+
+      // Make the API request using POST
+      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 empty data with pagination info on error
+      return {
+        data: [],
+        pagination: {
+          page: params.page,
+          size: params.size,
+          totalCount: 0,
+          totalItems: 0,
+          totalPages: 0,
+          pageCount: 0,
+          orderField: params.orderField,
+          orderType: params.orderType,
+          query: params.query,
+          next: false,
+          back: false,
+        },
+      };
+    }
+  };
+
+  // Use the generic data fetching hook with our API-specific fetch function
+  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..f566fb8
--- /dev/null
+++ b/WebServices/client-frontend/src/components/common/hooks/useDashboardPage.ts
@@ -0,0 +1,117 @@
+import { retrievePagebyUrl, retrievePageList } from "@/apicalls/cookies/token";
+import { retrievePageByUrlAndPageId } from "@/components/navigator/retriever";
+import React from "react";
+
+export interface DashboardPageParams {
+  /**
+   * The active page path, e.g., "/individual", "/dashboard"
+   */
+  pageUrl: string;
+
+  /**
+   * The search parameters from Next.js
+   */
+  searchParams: Promise<{ [key: string]: string | undefined }>;
+}
+
+export interface DashboardPageResult {
+  /**
+   * The active page path
+   */
+  activePage: string;
+
+  /**
+   * The resolved search parameters
+   */
+  searchParamsInstance: { [key: string]: string | undefined };
+
+  /**
+   * The current language, either from search params or default
+   */
+  lang: "en" | "tr";
+
+  /**
+   * The page component to render
+   */
+  PageComponent: any;
+  
+  /**
+   * The list of site URLs for the menu
+   */
+  siteUrlsList: string[];
+}
+
+/**
+ * Hook to retrieve and prepare dashboard page data for client-frontend application
+ * Handles retrieving site URLs, page components, and other necessary data
+ *
+ * @param params The dashboard page parameters
+ * @returns The processed dashboard page data including site URLs
+ * @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";
+  
+  // Validate pageUrl
+  if (!pageUrl || typeof pageUrl !== "string") {
+    throw new Error(`Invalid page URL: ${pageUrl}`);
+  }
+
+  // Resolve search params
+  try {
+    searchParamsInstance = await searchParams;
+  } catch (err) {
+    console.error("Error resolving search parameters:", err);
+    // Still throw the error to be caught by Next.js error boundary
+    throw err;
+  }
+
+  // Determine language
+  const lang = (searchParamsInstance?.lang as "en" | "tr") || defaultLang;
+
+  // Validate language
+  if (lang !== "en" && lang !== "tr") {
+    console.warn(
+      `Invalid language "${lang}" specified, falling back to "${defaultLang}"`
+    );
+  }
+
+  // Get site URLs list
+  let siteUrlsList: string[] = [];
+  try {
+    siteUrlsList = (await retrievePageList()) || [];
+  } catch (err) {
+    console.error("Error retrieving site URLs:", err);
+    throw new Error(`Failed to retrieve site URLs: ${err}`);
+  }
+
+  // Get page component
+  let pageToDirect;
+  let PageComponent;
+  try {
+    pageToDirect = await retrievePagebyUrl(pageUrl);
+    PageComponent = retrievePageByUrlAndPageId(pageToDirect, pageUrl);
+  } catch (err) {
+    console.error("Error retrieving page component:", err);
+    throw new Error(`Page component not found for URL: ${pageUrl}`);
+  }
+
+  // Check if page component exists
+  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..372b8bf
--- /dev/null
+++ b/WebServices/client-frontend/src/components/common/hooks/useDataFetching.ts
@@ -0,0 +1,178 @@
+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 || ["name"],
+    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,
+  ]);
+
+  // Track if this is the initial mount
+  const initialMountRef = useRef(true);
+
+  // Track previous request params to avoid unnecessary fetches
+  const prevRequestParamsRef = useRef<RequestParams>(requestParams);
+
+  useEffect(() => {
+    // Only fetch on mount or when request params actually change
+    const paramsChanged =
+      JSON.stringify(prevRequestParamsRef.current) !==
+      JSON.stringify(requestParams);
+
+    if (initialMountRef.current || paramsChanged) {
+      const timer = setTimeout(() => {
+        fetchDataFromApi();
+        initialMountRef.current = false;
+        prevRequestParamsRef.current = { ...requestParams };
+      }, 300); // Debounce
+
+      return () => clearTimeout(timer);
+    }
+  }, [fetchDataFromApi, requestParams]);
+
+  const updatePagination = useCallback((updates: Partial<RequestParams>) => {
+    // Transform query parameters to use __ilike with %value% format
+    if (updates.query) {
+      const transformedQuery: Record<string, any> = {};
+
+      Object.entries(updates.query).forEach(([key, value]) => {
+        // Only transform string values that aren't already using a special operator
+        if (
+          typeof value === "string" &&
+          !key.includes("__") &&
+          value.trim() !== ""
+        ) {
+          transformedQuery[`${key}__ilike`] = `%${value}%`;
+        } else {
+          transformedQuery[key] = value;
+        }
+      });
+
+      updates.query = transformedQuery;
+
+      // Always reset to page 1 when search query changes
+      if (!updates.hasOwnProperty("page")) {
+        updates.page = 1;
+      }
+
+      // Reset response metadata when search changes to avoid stale pagination data
+      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(() => {
+    // Reset pagination to page 1 when manually refetching
+    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..b67cc86
--- /dev/null
+++ b/WebServices/client-frontend/src/components/common/schemas.ts
@@ -0,0 +1,37 @@
+
+// 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>;
+}
\ No newline at end of file
diff --git a/WebServices/client-frontend/src/components/header/Header.tsx b/WebServices/client-frontend/src/components/header/Header.tsx
index 4f1ab4b..3e5c442 100644
--- a/WebServices/client-frontend/src/components/header/Header.tsx
+++ b/WebServices/client-frontend/src/components/header/Header.tsx
@@ -236,9 +236,8 @@ const Header: React.FC<HeaderProps> = ({ lang }) => {
                   notifications.map((notification) => (
                     <div
                       key={notification.id}
-                      className={`px-4 py-2 border-b last:border-b-0 ${
-                        !notification.read ? "bg-blue-50" : ""
-                      }`}
+                      className={`px-4 py-2 border-b last:border-b-0 ${!notification.read ? "bg-blue-50" : ""
+                        }`}
                     >
                       <div className="flex justify-between">
                         <h4 className="text-sm font-semibold">
@@ -315,9 +314,8 @@ const Header: React.FC<HeaderProps> = ({ lang }) => {
                   messages.map((message) => (
                     <div
                       key={message.id}
-                      className={`px-4 py-2 border-b last:border-b-0 ${
-                        !message.read ? "bg-blue-50" : ""
-                      }`}
+                      className={`px-4 py-2 border-b last:border-b-0 ${!message.read ? "bg-blue-50" : ""
+                        }`}
                     >
                       <div className="flex items-start">
                         <div className="w-8 h-8 bg-gray-300 rounded-full flex items-center justify-center mr-2 flex-shrink-0">
diff --git a/WebServices/client-frontend/src/components/layouts/DashboardLayout.tsx b/WebServices/client-frontend/src/components/layouts/DashboardLayout.tsx
new file mode 100644
index 0000000..f186a90
--- /dev/null
+++ b/WebServices/client-frontend/src/components/layouts/DashboardLayout.tsx
@@ -0,0 +1,44 @@
+"use client";
+import React, { ReactNode } from "react";
+import Header from "@/components/header/Header";
+import ClientMenu from "@/components/menu/menu";
+
+interface DashboardLayoutProps {
+  children: ReactNode;
+  lang: "en" | "tr";
+  activePage: string;
+  siteUrls: string[];
+}
+
+/**
+ * A reusable dashboard layout component that provides consistent structure
+ * for all dashboard pages with sidebar, header, and content area.
+ */
+export const DashboardLayout: React.FC<DashboardLayoutProps> = ({
+  children,
+  lang,
+  activePage,
+  siteUrls,
+}) => {
+  return (
+    <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 siteUrls={siteUrls} lang={lang} activePage={activePage} />
+      </aside>
+
+      {/* Main Content Area */}
+      <div className="flex flex-col w-3/4 overflow-y-auto">
+        {/* Header Component */}
+        <Header lang={lang} />
+
+        {/* Page Content */}
+        <div className="container mx-auto p-4">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DashboardLayout;
diff --git a/WebServices/client-frontend/src/components/layouts/PageTemplate.tsx b/WebServices/client-frontend/src/components/layouts/PageTemplate.tsx
new file mode 100644
index 0000000..2210ba1
--- /dev/null
+++ b/WebServices/client-frontend/src/components/layouts/PageTemplate.tsx
@@ -0,0 +1,155 @@
+"use client";
+import React, { ReactNode, useState } from "react";
+import { Card, CardContent } from "@/components/ui/card";
+import { GridSelectionComponent, GridSize } from "@/components/common/HeaderSelections/GridSelectionComponent";
+import { LanguageSelectionComponent, Language } from "@/components/common/HeaderSelections/LanguageSelectionComponent";
+import { PaginationToolsComponent } from "@/components/common/PaginationModifiers/PaginationToolsComponent";
+import { CreateButton } from "@/components/common/ActionButtonsDisplay/CreateButton";
+import type { FormMode } from "@/components/common/FormDisplay/types";
+
+interface PageTemplateProps {
+  title: string;
+  lang: "en" | "tr";
+  translations: Record<string, any>;
+
+  // Search section
+  searchSection?: ReactNode;
+
+  // Data and pagination
+  data: any[];
+  pagination: any;
+  updatePagination: (params: any) => void;
+  loading: boolean;
+  error: any;
+  refetch: () => void;
+
+  // Content display
+  contentDisplay: ReactNode;
+
+  // Form handling
+  formComponent?: ReactNode;
+  mode: FormMode;
+  setMode: (mode: FormMode) => void;
+  handleCreateClick: () => void;
+  handleCancel: () => void;
+
+  // Language handling
+  setLang?: (lang: Language) => void;
+
+  // Optional components
+  headerActions?: ReactNode;
+  additionalActions?: ReactNode;
+}
+
+/**
+ * A reusable page template that follows the modular pattern established
+ * in the card-example page refactoring.
+ */
+export const PageTemplate: React.FC<PageTemplateProps> = ({
+  title,
+  lang,
+  translations,
+  searchSection,
+  data,
+  pagination,
+  updatePagination,
+  loading,
+  error,
+  refetch,
+  contentDisplay,
+  formComponent,
+  mode,
+  setMode,
+  handleCreateClick,
+  handleCancel,
+  setLang,
+  headerActions,
+  additionalActions,
+}) => {
+  const [gridCols, setGridCols] = useState<GridSize>(3);
+
+  return (
+    <>
+      {mode === "list" ? (
+        <>
+          {/* Header section with title and selection components */}
+          <div className="mb-4 flex justify-between items-center">
+            <h1 className="text-2xl font-bold">{title}</h1>
+            <div className="flex space-x-4">
+              {/* Grid Selection */}
+              <GridSelectionComponent
+                gridCols={gridCols}
+                setGridCols={setGridCols}
+              />
+
+              {/* Language Selection */}
+              <LanguageSelectionComponent
+                lang={lang as Language}
+                translations={translations}
+                setLang={setLang || (() => { })}
+              />
+
+              {/* Additional header actions */}
+              {headerActions}
+            </div>
+          </div>
+
+          {/* Search filters */}
+          {searchSection && (
+            <Card className="mb-4">
+              <CardContent className="pt-6">
+                {searchSection}
+              </CardContent>
+            </Card>
+          )}
+
+          {/* Create Button */}
+          <Card className="my-4">
+            <CardContent className="pt-6">
+              <CreateButton
+                onClick={handleCreateClick}
+                translations={translations}
+                lang={lang}
+              />
+              {/* Additional action buttons */}
+              {additionalActions}
+            </CardContent>
+          </Card>
+
+          {/* Pagination Tools Component */}
+          <Card className="my-4">
+            <CardContent className="pt-6">
+              <PaginationToolsComponent
+                pagination={pagination}
+                updatePagination={updatePagination}
+                loading={loading}
+                lang={lang}
+                translations={translations}
+              />
+            </CardContent>
+          </Card>
+
+          {/* Content Display */}
+          <div className="mt-6">
+            {contentDisplay}
+          </div>
+        </>
+      ) : (
+        /* Form Display for create/update/view modes */
+        formComponent || (
+          <div className="p-4 bg-gray-100 rounded-md">
+            <p>Form component not provided</p>
+            <button
+              onClick={handleCancel}
+              className="mt-4 px-4 py-2 bg-gray-200 rounded-md hover:bg-gray-300"
+            >
+              {translations[lang].cancel || "Cancel"}
+            </button>
+          </div>
+        )
+      )}
+    </>
+  );
+};
+
+export default PageTemplate;
diff --git a/WebServices/client-frontend/src/components/layouts/README.md b/WebServices/client-frontend/src/components/layouts/README.md
new file mode 100644
index 0000000..ecb8b12
--- /dev/null
+++ b/WebServices/client-frontend/src/components/layouts/README.md
@@ -0,0 +1,271 @@
+# Modular Dashboard Layout System
+
+This directory contains reusable layout components for building dashboard pages with a consistent structure and appearance.
+
+## Components
+
+### DashboardLayout
+
+The `DashboardLayout` component provides the overall page structure with:
+- Sidebar navigation
+- Header
+- Main content area
+
+### PageTemplate
+
+The `PageTemplate` component provides a standardized structure for page content with:
+- Header section with title and selection components
+- Search filters section
+- Action buttons section
+- Pagination tools section
+- Content display section
+- Form display for create/update/view modes
+
+## Usage Example
+
+Here's an example of how to use these components to create a new dashboard page:
+
+```tsx
+"use client";
+import React, { useState } from "react";
+import { useApiData } from "@/components/common/hooks/useApiData";
+import { CardDisplay } from "@/components/common/CardDisplay";
+import { FormDisplay } from "@/components/common/FormDisplay/FormDisplay";
+import { TextQueryModifier, SelectQueryModifier, TypeQueryModifier } from "@/components/common/QueryModifiers";
+import { Card, CardContent } from "@/components/ui/card";
+import { Language } from "@/components/common/HeaderSelections/LanguageSelectionComponent";
+import { FormMode } from "@/components/common/FormDisplay/types";
+import { PageTemplate } from "@/components/layouts/PageTemplate";
+import type { GridSize } from "@/components/common/HeaderSelections/GridSelectionComponent";
+
+// Import your schema and translations
+import * as schema from "./schema";
+import { translations } from "./language";
+
+const ExamplePage: React.FC<{ lang: "en" | "tr", queryParams: any }> = ({ 
+  lang = "en", 
+  queryParams 
+}) => {
+  // API data hook
+  const {
+    data,
+    pagination,
+    loading,
+    error,
+    updatePagination,
+    refetch
+  } = useApiData<schema.ExampleData>('/api/examples');
+
+  // State management
+  const [mode, setMode] = useState<FormMode>("list");
+  const [selectedItem, setSelectedItem] = useState<schema.ExampleData | null>(null);
+  const [gridCols, setGridCols] = useState<GridSize>(3);
+  const [currentLang, setCurrentLang] = useState<Language>(lang as Language);
+
+  // Fields to display in cards
+  const showFields = ["name", "type", "status"];
+
+  // Query handling
+  const handleQueryChange = (key: string, value: string | null) => {
+    const newQuery = { ...pagination.query };
+
+    if (value === null || value.trim() === "") {
+      delete newQuery[key];
+    } else {
+      newQuery[key] = value;
+    }
+
+    updatePagination({
+      page: 1,
+      query: newQuery,
+    });
+  };
+
+  // Reset all filters
+  const handleResetAllFilters = () => {
+    updatePagination({
+      page: 1,
+      query: {},
+    });
+  };
+
+  // Action handlers
+  const handleCardClick = (item: schema.ExampleData) => {
+    console.log("Card clicked:", item);
+  };
+
+  const handleViewClick = (item: schema.ExampleData) => {
+    setSelectedItem(item);
+    setMode("view");
+  };
+
+  const handleUpdateClick = (item: schema.ExampleData) => {
+    setSelectedItem(item);
+    setMode("update");
+  };
+
+  const handleCreateClick = () => {
+    setSelectedItem(null);
+    setMode("create");
+  };
+
+  const handleCancel = () => {
+    setMode("list");
+    setSelectedItem(null);
+  };
+
+  // Search section component
+  const SearchSection = (
+    <div className="flex flex-col space-y-4">
+      <div className="flex space-x-4">
+        {/* Type selector */}
+        <TypeQueryModifier
+          fieldKey="type"
+          value={pagination.query["type"] || ""}
+          options={[
+            { value: "type1", label: translations[lang].type1 },
+            { value: "type2", label: translations[lang].type2 }
+          ]}
+          onQueryChange={handleQueryChange}
+          translations={translations}
+          lang={lang}
+        />
+      </div>
+      
+      <div className="flex space-x-4">
+        {/* Text search */}
+        <TextQueryModifier
+          fieldKey="name"
+          value={pagination.query["name__ilike"] ? pagination.query["name__ilike"].replace(/%/g, "") : ""}
+          label={translations[lang].search || "Search"}
+          onQueryChange={handleQueryChange}
+          translations={translations}
+          lang={lang}
+        />
+        
+        {/* Status dropdown */}
+        <SelectQueryModifier
+          fieldKey="status"
+          value={pagination.query["status"] || ""}
+          label={translations[lang].status || "Status"}
+          options={[
+            { value: "active", label: translations[lang].active || "Active" },
+            { value: "inactive", label: translations[lang].inactive || "Inactive" }
+          ]}
+          onQueryChange={handleQueryChange}
+          translations={translations}
+          lang={lang}
+        />
+      </div>
+      
+      {/* Reset filters button */}
+      <div className="flex justify-end">
+        <button 
+          onClick={handleResetAllFilters}
+          className="px-4 py-2 bg-gray-100 rounded-md hover:bg-gray-200"
+        >
+          {translations[lang].resetAll || "Reset All"}
+        </button>
+      </div>
+    </div>
+  );
+
+  // Form component
+  const FormComponent = selectedItem || mode === "create" ? (
+    <FormDisplay<schema.ExampleData>
+      initialData={selectedItem || undefined}
+      mode={mode}
+      refetch={refetch}
+      setMode={setMode}
+      setSelectedItem={setSelectedItem}
+      onCancel={handleCancel}
+      lang={lang}
+      translations={translations}
+      formProps={{
+        fieldDefinitions: mode === 'create' ? schema.createFieldDefinitions :
+          mode === 'update' ? schema.updateFieldDefinitions :
+            schema.viewFieldDefinitions,
+        validationSchema: mode === 'create' ? schema.CreateExampleSchema :
+          mode === 'update' ? schema.UpdateExampleSchema :
+            schema.ViewExampleSchema,
+        fieldsByMode: schema.fieldsByMode
+      }}
+    />
+  ) : null;
+
+  // Content display component
+  const ContentDisplay = (
+    <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}
+    />
+  );
+
+  return (
+    <PageTemplate
+      title={translations[lang].examplePageTitle || "Example Page"}
+      lang={lang}
+      translations={translations}
+      searchSection={SearchSection}
+      data={data}
+      pagination={pagination}
+      updatePagination={updatePagination}
+      loading={loading}
+      error={error}
+      refetch={refetch}
+      contentDisplay={ContentDisplay}
+      formComponent={FormComponent}
+      mode={mode}
+      setMode={setMode}
+      handleCreateClick={handleCreateClick}
+      handleCancel={handleCancel}
+      setLang={setCurrentLang}
+    />
+  );
+};
+
+export default ExamplePage;
+```
+
+## Integration with Next.js App Router
+
+To use these components with Next.js App Router, update your page component like this:
+
+```tsx
+// src/app/(DashboardLayout)/your-page/page.tsx
+import React from "react";
+import { retrievePageByUrl } from "@/eventRouters/pageRetriever";
+import DashboardLayout from "@/components/layouts/DashboardLayout";
+
+async function YourPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ [key: string]: string | undefined }>;
+}) {
+  const activePage = "/your-page";
+  const searchParamsInstance = await searchParams;
+  const lang = (searchParamsInstance?.lang as "en" | "tr") || "en";
+  const PageComponent = retrievePageByUrl(activePage);
+
+  return (
+    <DashboardLayout lang={lang} activePage={activePage}>
+      <PageComponent lang={lang} queryParams={searchParamsInstance} />
+    </DashboardLayout>
+  );
+}
+
+export default YourPage;
+```
+
+This modular approach makes it easy to create new dashboard pages with consistent structure and behavior.
diff --git a/WebServices/client-frontend/src/components/menu/NavigationMenu.tsx b/WebServices/client-frontend/src/components/menu/NavigationMenu.tsx
index 9fe8be9..7a37da2 100644
--- a/WebServices/client-frontend/src/components/menu/NavigationMenu.tsx
+++ b/WebServices/client-frontend/src/components/menu/NavigationMenu.tsx
@@ -7,9 +7,10 @@ import type { LanguageTranslation } from "./handler";
 interface NavigationMenuProps {
   transformedMenu: any[];
   lang: string;
+  activePage?: string;
 }
 
-const NavigationMenu: React.FC<NavigationMenuProps> = ({ transformedMenu, lang }) => {
+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);
@@ -77,16 +78,23 @@ const NavigationMenu: React.FC<NavigationMenuProps> = ({ transformedMenu, lang }
                     {firstIndex === firstLayerIndex &&
                       secondIndex === secondLayerIndex && (
                         <div className="bg-gray-100 border-t border-gray-200">
-                          {subItem.subList.map((subSubItem: any) => (
-                            <Link
-                              key={subSubItem.name}
-                              href={subSubItem.siteUrl}
-                              className="flex items-center w-full p-3 pl-12 text-left text-gray-700 hover:bg-gray-200 transition-colors"
-                            >
-                              <Home className="h-4 w-4 mr-2 text-gray-500" />
-                              <span>{subSubItem.lg[lang]}</span>
-                            </Link>
-                          ))}
+                          {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>
diff --git a/WebServices/client-frontend/src/components/menu/menu.tsx b/WebServices/client-frontend/src/components/menu/menu.tsx
index d00fab1..1c49c6b 100644
--- a/WebServices/client-frontend/src/components/menu/menu.tsx
+++ b/WebServices/client-frontend/src/components/menu/menu.tsx
@@ -24,7 +24,7 @@ const dashboardLanguage = {
   },
 };
 
-const ClientMenu: React.FC<ClientMenuProps> = ({ siteUrls, lang = "en" }) => {
+const ClientMenu: React.FC<ClientMenuProps> = ({ siteUrls, lang = "en", activePage }) => {
   const transformedMenu = transformMenu(siteUrls);
   const t =
     dashboardLanguage[lang as keyof typeof dashboardLanguage] ||
@@ -86,7 +86,7 @@ const ClientMenu: React.FC<ClientMenuProps> = ({ siteUrls, lang = "en" }) => {
       </div>
 
       {/* Navigation Menu */}
-      <NavigationMenu transformedMenu={transformedMenu} lang={lang} />
+      <NavigationMenu transformedMenu={transformedMenu} lang={lang} activePage={activePage} />
     </div>
   );
 };
diff --git a/WebServices/client-frontend/src/components/navigator/retriever.tsx b/WebServices/client-frontend/src/components/navigator/retriever.tsx
index db43165..6903e9a 100644
--- a/WebServices/client-frontend/src/components/navigator/retriever.tsx
+++ b/WebServices/client-frontend/src/components/navigator/retriever.tsx
@@ -9,7 +9,7 @@ export function retrievePageByUrlAndPageId(
   try {
     const PageComponent =
       PageNavigator[pageUrl as keyof typeof PageNavigator][
-        pageId as keyof (typeof PageNavigator)[typeof pageUrl]
+      pageId as keyof (typeof PageNavigator)[typeof pageUrl]
       ];
     if (!PageComponent) {
       console.log(`Page component not found for pageId: ${pageId}`);
diff --git a/WebServices/client-frontend/src/components/ui/alert.tsx b/WebServices/client-frontend/src/components/ui/alert.tsx
new file mode 100644
index 0000000..1421354
--- /dev/null
+++ b/WebServices/client-frontend/src/components/ui/alert.tsx
@@ -0,0 +1,66 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription }
diff --git a/WebServices/client-frontend/src/components/ui/badge.tsx b/WebServices/client-frontend/src/components/ui/badge.tsx
new file mode 100644
index 0000000..0205413
--- /dev/null
+++ b/WebServices/client-frontend/src/components/ui/badge.tsx
@@ -0,0 +1,46 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }
diff --git a/WebServices/client-frontend/src/components/ui/card.tsx b/WebServices/client-frontend/src/components/ui/card.tsx
new file mode 100644
index 0000000..d05bbc6
--- /dev/null
+++ b/WebServices/client-frontend/src/components/ui/card.tsx
@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}
diff --git a/WebServices/client-frontend/src/components/ui/dialog.tsx b/WebServices/client-frontend/src/components/ui/dialog.tsx
new file mode 100644
index 0000000..7d7a9d3
--- /dev/null
+++ b/WebServices/client-frontend/src/components/ui/dialog.tsx
@@ -0,0 +1,135 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content>) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
+          <XIcon />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}
diff --git a/WebServices/client-frontend/src/components/ui/select.tsx b/WebServices/client-frontend/src/components/ui/select.tsx
new file mode 100644
index 0000000..dcbbc0c
--- /dev/null
+++ b/WebServices/client-frontend/src/components/ui/select.tsx
@@ -0,0 +1,185 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className
+        )}
+        position={position}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span className="absolute right-2 flex size-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}
diff --git a/WebServices/client-frontend/src/components/ui/skeleton.tsx b/WebServices/client-frontend/src/components/ui/skeleton.tsx
new file mode 100644
index 0000000..32ea0ef
--- /dev/null
+++ b/WebServices/client-frontend/src/components/ui/skeleton.tsx
@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-accent animate-pulse rounded-md", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }
diff --git a/WebServices/client-frontend/src/components/ui/sonner.tsx b/WebServices/client-frontend/src/components/ui/sonner.tsx
new file mode 100644
index 0000000..957524e
--- /dev/null
+++ b/WebServices/client-frontend/src/components/ui/sonner.tsx
@@ -0,0 +1,25 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, ToasterProps } from "sonner"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  )
+}
+
+export { Toaster }
diff --git a/WebServices/client-frontend/src/components/ui/table.tsx b/WebServices/client-frontend/src/components/ui/table.tsx
new file mode 100644
index 0000000..51b74dd
--- /dev/null
+++ b/WebServices/client-frontend/src/components/ui/table.tsx
@@ -0,0 +1,116 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("text-muted-foreground mt-4 text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}
diff --git a/WebServices/client-frontend/src/components/ui/textarea.tsx b/WebServices/client-frontend/src/components/ui/textarea.tsx
new file mode 100644
index 0000000..7f21b5e
--- /dev/null
+++ b/WebServices/client-frontend/src/components/ui/textarea.tsx
@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }
diff --git a/WebServices/client-frontend/src/components/validations/menu/menu.tsx b/WebServices/client-frontend/src/components/validations/menu/menu.tsx
index 4531fd7..38de4a3 100644
--- a/WebServices/client-frontend/src/components/validations/menu/menu.tsx
+++ b/WebServices/client-frontend/src/components/validations/menu/menu.tsx
@@ -1,6 +1,7 @@
 interface ClientMenuProps {
   siteUrls: string[];
   lang?: string;
+  activePage?: string;
 }
 
 interface UserSelection {
diff --git a/WebServices/client-frontend/src/eventRouters/Readme.md b/WebServices/client-frontend/src/eventRouters/Readme.md
new file mode 100644
index 0000000..e69de29
diff --git a/WebServices/client-frontend/src/eventRouters/index.tsx b/WebServices/client-frontend/src/eventRouters/index.tsx
new file mode 100644
index 0000000..9ce34d1
--- /dev/null
+++ b/WebServices/client-frontend/src/eventRouters/index.tsx
@@ -0,0 +1,6 @@
+
+
+const menuPages = {
+};
+
+export default menuPages;
diff --git a/WebServices/client-frontend/src/eventRouters/pageRetriever.tsx b/WebServices/client-frontend/src/eventRouters/pageRetriever.tsx
new file mode 100644
index 0000000..b09a45a
--- /dev/null
+++ b/WebServices/client-frontend/src/eventRouters/pageRetriever.tsx
@@ -0,0 +1,10 @@
+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];
+  }
+  return UnAuthorizedPage;
+}
diff --git a/WebServices/client-frontend/src/eventRouters/unauthorizedpage.tsx b/WebServices/client-frontend/src/eventRouters/unauthorizedpage.tsx
new file mode 100644
index 0000000..9ee42de
--- /dev/null
+++ b/WebServices/client-frontend/src/eventRouters/unauthorizedpage.tsx
@@ -0,0 +1,43 @@
+import { PageProps } from "../validations/translations/translation";
+
+// Language dictionary for internationalization
+const languageDictionary = {
+  en: {
+    title: "Unauthorized Access",
+    message1: "You do not have permission to access this page.",
+    message2: "Please contact the administrator.",
+    footer: `© ${new Date().getFullYear()} My Application`,
+  },
+  tr: {
+    title: "Yetkisiz Erişim",
+    message1: "Bu sayfaya erişim izniniz yok.",
+    message2: "Lütfen yönetici ile iletişime geçin.",
+    footer: `© ${new Date().getFullYear()} Uygulamam`,
+  },
+};
+
+export const UnAuthorizedPage: React.FC<PageProps> = ({
+  lang = "en",
+  queryParams,
+}) => {
+  // Use the language dictionary based on the lang prop, defaulting to English
+  const t =
+    languageDictionary[lang as keyof typeof languageDictionary] ||
+    languageDictionary.en;
+  return (
+    <>
+      <div className="flex flex-col h-screen">
+        <header className="bg-gray-800 text-white p-4 text-center">
+          <h1 className="text-2xl font-bold">{t.title}</h1>
+        </header>
+        <main className="flex-grow p-4 bg-gray-100">
+          <p className="text-gray-700">{t.message1}</p>
+          <p className="text-gray-700">{t.message2}</p>
+        </main>
+        <footer className="bg-gray-800 text-white p-4 text-center">
+          <p>{t.footer}</p>
+        </footer>
+      </div>
+    </>
+  );
+};
diff --git a/WebServices/client-frontend/src/validations/list/paginations.ts b/WebServices/client-frontend/src/validations/list/paginations.ts
new file mode 100644
index 0000000..3d2f215
--- /dev/null
+++ b/WebServices/client-frontend/src/validations/list/paginations.ts
@@ -0,0 +1,30 @@
+// Define pagination interface
+export interface PagePagination {
+  page: number;
+  size: number;
+  totalCount: number;
+  allCount: number;
+  totalPages: number;
+  orderFields: string[];
+  orderTypes: string[];
+  pageCount: number;
+  query: Record<string, string>;
+}
+
+
+// Define request parameters interface
+export interface RequestParams {
+  page: number;
+  size: number;
+  orderFields: string[];
+  orderTypes: string[];
+  query: Record<string, string>;
+}
+
+// Define response metadata interface
+export interface ResponseMetadata {
+  totalCount: number;
+  allCount: number;
+  totalPages: number;
+  pageCount: number;
+}
diff --git a/WebServices/client-frontend/src/validations/menu/menu.tsx b/WebServices/client-frontend/src/validations/menu/menu.tsx
new file mode 100644
index 0000000..a262307
--- /dev/null
+++ b/WebServices/client-frontend/src/validations/menu/menu.tsx
@@ -0,0 +1,11 @@
+interface ClientMenuProps {
+  lang?: string;
+  activePage: string;
+}
+
+interface UserSelection {
+  userType: string;
+  selected: any;
+}
+
+export type { ClientMenuProps, UserSelection };
diff --git a/WebServices/client-frontend/src/validations/translations/translation.tsx b/WebServices/client-frontend/src/validations/translations/translation.tsx
new file mode 100644
index 0000000..c6952d7
--- /dev/null
+++ b/WebServices/client-frontend/src/validations/translations/translation.tsx
@@ -0,0 +1,61 @@
+// Define TypeScript interfaces for menu structure
+interface LanguageTranslation {
+  tr: string;
+  en: string;
+}
+
+interface MenuThirdLevel {
+  name: string;
+  lg: LanguageTranslation;
+  siteUrl: string;
+}
+
+interface MenuSecondLevel {
+  name: string;
+  lg: LanguageTranslation;
+  subList: MenuThirdLevel[];
+}
+
+interface MenuFirstLevel {
+  name: string;
+  lg: LanguageTranslation;
+  subList: MenuSecondLevel[];
+}
+
+// Define interfaces for the filtered menu structure
+interface FilteredMenuThirdLevel {
+  name: string;
+  lg: LanguageTranslation;
+  siteUrl: string;
+}
+
+interface FilteredMenuSecondLevel {
+  name: string;
+  lg: LanguageTranslation;
+  subList: FilteredMenuThirdLevel[];
+}
+
+interface FilteredMenuFirstLevel {
+  name: string;
+  lg: LanguageTranslation;
+  subList: FilteredMenuSecondLevel[];
+}
+
+interface PageProps {
+  lang: keyof LanguageTranslation;
+  queryParams: { [key: string]: string | undefined };
+}
+
+type PageComponent = React.ComponentType<PageProps>;
+
+export type {
+  PageComponent,
+  PageProps,
+  MenuFirstLevel,
+  MenuSecondLevel,
+  MenuThirdLevel,
+  FilteredMenuFirstLevel,
+  FilteredMenuSecondLevel,
+  FilteredMenuThirdLevel,
+  LanguageTranslation,
+};
diff --git a/WebServices/management-frontend/src/app/(DashboardLayout)/application/page.tsx b/WebServices/management-frontend/src/app/(DashboardLayout)/application/page.tsx
index 4482481..1e45d77 100644
--- a/WebServices/management-frontend/src/app/(DashboardLayout)/application/page.tsx
+++ b/WebServices/management-frontend/src/app/(DashboardLayout)/application/page.tsx
@@ -1,34 +1,22 @@
+'use server';
 import React from "react";
-import Header from "@/components/header/Header";
-import ClientMenu from "@/components/menu/menu";
-import { retrievePageByUrl } from "@/eventRouters/pageRetriever";
+import DashboardLayout from "@/components/layouts/DashboardLayout";
+import { useDashboardPage } from "@/components/common/hooks/useDashboardPage";
 
 async function DashboardPage({
   searchParams,
 }: {
   searchParams: Promise<{ [key: string]: string | undefined }>;
 }) {
-  const activePage = "/application";
-  const searchParamsInstance = await searchParams;
-  const lang = (searchParamsInstance?.lang as "en" | "tr") || "en";
-  const PageComponent = retrievePageByUrl(activePage);
+  const { activePage, searchParamsInstance, lang, PageComponent } = await useDashboardPage({
+    pageUrl: "/application",
+    searchParams,
+  });
 
   return (
-    <>
-      <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={lang} activePage={activePage} />
-        </aside>
-
-        {/* Main Content Area */}
-        <div className="flex flex-col w-3/4 overflow-y-auto">
-          {/* Header Component */}
-          <Header lang={lang} />
-          <PageComponent lang={lang} queryParams={searchParamsInstance} />
-        </div>
-      </div>
-    </>
+    <DashboardLayout lang={lang} activePage={activePage}>
+      <PageComponent lang={lang} queryParams={searchParamsInstance} />
+    </DashboardLayout>
   );
 }
 
diff --git a/WebServices/management-frontend/src/app/(DashboardLayout)/dashboard/page.tsx b/WebServices/management-frontend/src/app/(DashboardLayout)/dashboard/page.tsx
index d672533..d527347 100644
--- a/WebServices/management-frontend/src/app/(DashboardLayout)/dashboard/page.tsx
+++ b/WebServices/management-frontend/src/app/(DashboardLayout)/dashboard/page.tsx
@@ -1,34 +1,23 @@
+'use server';
 import React from "react";
-import Header from "@/components/header/Header";
-import ClientMenu from "@/components/menu/menu";
-import { retrievePageByUrl } from "@/eventRouters/pageRetriever";
+import DashboardLayout from "@/components/layouts/DashboardLayout";
+import { useDashboardPage } from "@/components/common/hooks/useDashboardPage";
 
 async function PageDashboard({
   searchParams,
 }: {
   searchParams: Promise<{ [key: string]: string | undefined }>;
 }) {
-  const activePage = "/dashboard";
-  const searchParamsInstance = await searchParams;
-  const lang = (searchParamsInstance?.lang as "en" | "tr") || "en";
-  const PageComponent = retrievePageByUrl(activePage);
+
+  const { activePage, searchParamsInstance, lang, PageComponent } = 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 lang={lang} activePage={activePage} />
-        </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}>
+      <PageComponent lang={lang} queryParams={searchParamsInstance} />
+    </DashboardLayout>
   );
 }
 
diff --git a/WebServices/management-frontend/src/app/(DashboardLayout)/error.tsx b/WebServices/management-frontend/src/app/(DashboardLayout)/error.tsx
new file mode 100644
index 0000000..6d69fdc
--- /dev/null
+++ b/WebServices/management-frontend/src/app/(DashboardLayout)/error.tsx
@@ -0,0 +1,108 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import Link from 'next/link';
+
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
+import { AlertTriangle, RefreshCw, Home } from 'lucide-react';
+import { useSearchParams } from 'next/navigation';
+
+// Translations for error messages
+const translations = {
+    en: {
+        errorTitle: 'An error occurred',
+        errorMessage: 'Sorry, something went wrong while loading this page.',
+        unknownError: 'Unknown error',
+        errorId: 'Error ID',
+        tryAgain: 'Try again',
+        goHome: 'Go to Home'
+    },
+    tr: {
+        errorTitle: 'Bir hata oluştu',
+        errorMessage: 'Üzgünüz, bu sayfa yüklenirken bir sorun oluştu.',
+        unknownError: 'Bilinmeyen hata',
+        errorId: 'Hata ID',
+        tryAgain: 'Tekrar dene',
+        goHome: 'Ana Sayfaya Git'
+    }
+};
+
+interface ErrorPageProps {
+    error: Error & { digest?: string };
+    reset: () => void;
+}
+
+/**
+ * Global error page for the Dashboard Layout
+ * This component will be automatically used by Next.js when an error occurs
+ * in any page within the (DashboardLayout) group
+ */
+export default function Error({ error, reset }: ErrorPageProps) {
+    // Get the language from URL params or default to English
+    const searchParams = useSearchParams();
+    const [lang, setLang] = useState<'en' | 'tr'>((searchParams?.get('lang') as 'en' | 'tr') || 'en');
+
+    // Ensure lang is valid
+    const validLang = lang === 'tr' ? 'tr' : 'en';
+    const t = translations[validLang];
+
+    useEffect(() => {
+        // Log the error to an error reporting service
+        console.error('Dashboard error:', error);
+    }, [error]);
+
+    return (
+        <div className="flex items-center justify-center min-h-screen bg-gray-50">
+            <Card className="w-full max-w-md shadow-lg">
+                <CardHeader className="bg-red-50">
+                    <div className="flex items-center space-x-2">
+                        <AlertTriangle className="h-6 w-6 text-red-600" />
+                        <CardTitle className="text-red-700">{t.errorTitle}</CardTitle>
+                    </div>
+                </CardHeader>
+
+                <CardContent className="pt-6">
+                    <div className="space-y-4">
+                        <p className="text-gray-700">
+                            {t.errorMessage}
+                        </p>
+
+                        <div className="p-4 bg-gray-100 rounded-md">
+                            <p className="font-mono text-sm break-all">
+                                {error.message || t.unknownError}
+                            </p>
+                            {error.digest && (
+                                <p className="font-mono text-xs text-gray-500 mt-2">
+                                    {t.errorId}: {error.digest}
+                                </p>
+                            )}
+                        </div>
+                    </div>
+                </CardContent>
+
+                <CardFooter className="flex justify-between space-x-4 pt-2">
+                    <Button
+                        variant="outline"
+                        className="flex-1"
+                        onClick={() => reset()}
+                    >
+                        <RefreshCw className="mr-2 h-4 w-4" />
+                        {t.tryAgain}
+                    </Button>
+
+                    <Button
+                        variant="default"
+                        className="flex-1 bg-primary"
+                        asChild
+                    >
+                        <Link href="/">
+                            <Home className="mr-2 h-4 w-4" />
+                            {t.goHome}
+                        </Link>
+                    </Button>
+                </CardFooter>
+            </Card>
+        </div>
+    );
+}
diff --git a/WebServices/management-frontend/src/app/error.tsx b/WebServices/management-frontend/src/app/error.tsx
new file mode 100644
index 0000000..6d69fdc
--- /dev/null
+++ b/WebServices/management-frontend/src/app/error.tsx
@@ -0,0 +1,108 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import Link from 'next/link';
+
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
+import { AlertTriangle, RefreshCw, Home } from 'lucide-react';
+import { useSearchParams } from 'next/navigation';
+
+// Translations for error messages
+const translations = {
+    en: {
+        errorTitle: 'An error occurred',
+        errorMessage: 'Sorry, something went wrong while loading this page.',
+        unknownError: 'Unknown error',
+        errorId: 'Error ID',
+        tryAgain: 'Try again',
+        goHome: 'Go to Home'
+    },
+    tr: {
+        errorTitle: 'Bir hata oluştu',
+        errorMessage: 'Üzgünüz, bu sayfa yüklenirken bir sorun oluştu.',
+        unknownError: 'Bilinmeyen hata',
+        errorId: 'Hata ID',
+        tryAgain: 'Tekrar dene',
+        goHome: 'Ana Sayfaya Git'
+    }
+};
+
+interface ErrorPageProps {
+    error: Error & { digest?: string };
+    reset: () => void;
+}
+
+/**
+ * Global error page for the Dashboard Layout
+ * This component will be automatically used by Next.js when an error occurs
+ * in any page within the (DashboardLayout) group
+ */
+export default function Error({ error, reset }: ErrorPageProps) {
+    // Get the language from URL params or default to English
+    const searchParams = useSearchParams();
+    const [lang, setLang] = useState<'en' | 'tr'>((searchParams?.get('lang') as 'en' | 'tr') || 'en');
+
+    // Ensure lang is valid
+    const validLang = lang === 'tr' ? 'tr' : 'en';
+    const t = translations[validLang];
+
+    useEffect(() => {
+        // Log the error to an error reporting service
+        console.error('Dashboard error:', error);
+    }, [error]);
+
+    return (
+        <div className="flex items-center justify-center min-h-screen bg-gray-50">
+            <Card className="w-full max-w-md shadow-lg">
+                <CardHeader className="bg-red-50">
+                    <div className="flex items-center space-x-2">
+                        <AlertTriangle className="h-6 w-6 text-red-600" />
+                        <CardTitle className="text-red-700">{t.errorTitle}</CardTitle>
+                    </div>
+                </CardHeader>
+
+                <CardContent className="pt-6">
+                    <div className="space-y-4">
+                        <p className="text-gray-700">
+                            {t.errorMessage}
+                        </p>
+
+                        <div className="p-4 bg-gray-100 rounded-md">
+                            <p className="font-mono text-sm break-all">
+                                {error.message || t.unknownError}
+                            </p>
+                            {error.digest && (
+                                <p className="font-mono text-xs text-gray-500 mt-2">
+                                    {t.errorId}: {error.digest}
+                                </p>
+                            )}
+                        </div>
+                    </div>
+                </CardContent>
+
+                <CardFooter className="flex justify-between space-x-4 pt-2">
+                    <Button
+                        variant="outline"
+                        className="flex-1"
+                        onClick={() => reset()}
+                    >
+                        <RefreshCw className="mr-2 h-4 w-4" />
+                        {t.tryAgain}
+                    </Button>
+
+                    <Button
+                        variant="default"
+                        className="flex-1 bg-primary"
+                        asChild
+                    >
+                        <Link href="/">
+                            <Home className="mr-2 h-4 w-4" />
+                            {t.goHome}
+                        </Link>
+                    </Button>
+                </CardFooter>
+            </Card>
+        </div>
+    );
+}
diff --git a/WebServices/management-frontend/src/components/common/FormDisplay/CreateComponent.tsx b/WebServices/management-frontend/src/components/common/FormDisplay/CreateComponent.tsx
index 77d3756..4968cc2 100644
--- a/WebServices/management-frontend/src/components/common/FormDisplay/CreateComponent.tsx
+++ b/WebServices/management-frontend/src/components/common/FormDisplay/CreateComponent.tsx
@@ -2,7 +2,7 @@
 import React, { useState, useEffect } from "react";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
-import { CreateComponentProps } from "./types";
+import { CreateComponentProps, FieldDefinition } from "./types";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
@@ -13,18 +13,6 @@ import { useForm } from "react-hook-form";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { AlertCircle } from "lucide-react";
 
-// Import field definitions type
-interface FieldDefinition {
-  type: string;
-  group: string;
-  label: string;
-  options?: string[];
-  readOnly?: boolean;
-  required?: boolean;
-  defaultValue?: any;
-  name?: string;
-}
-
 export function CreateComponent<T>({
   refetch,
   setMode,
@@ -140,13 +128,13 @@ export function CreateComponent<T>({
         return (
           <div className="space-y-2" key={fieldName}>
             <Label htmlFor={fieldName}>
-              {t[fieldName] || field.label}
+              {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}
+              placeholder={t[fieldName] || field.label[lang as "en" | "tr"]}
               disabled={field.readOnly}
             />
             {errorMessage && (
@@ -159,13 +147,13 @@ export function CreateComponent<T>({
         return (
           <div className="space-y-2" key={fieldName}>
             <Label htmlFor={fieldName}>
-              {t[fieldName] || field.label}
+              {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}
+              placeholder={t[fieldName] || field.label[lang as "en" | "tr"]}
               rows={3}
               disabled={field.readOnly}
             />
@@ -179,7 +167,7 @@ export function CreateComponent<T>({
         return (
           <div className="space-y-2" key={fieldName}>
             <Label htmlFor={fieldName}>
-              {t[fieldName] || field.label}
+              {t[fieldName] || field.label[lang as "en" | "tr"]}
               {field.required && <span className="text-red-500 ml-1">*</span>}
             </Label>
             <Select
@@ -188,7 +176,7 @@ export function CreateComponent<T>({
               disabled={field.readOnly}
             >
               <SelectTrigger>
-                <SelectValue placeholder={t[fieldName] || field.label} />
+                <SelectValue placeholder={t[fieldName] || field.label[lang as "en" | "tr"]} />
               </SelectTrigger>
               <SelectContent>
                 {field.options?.map((option) => (
@@ -216,7 +204,7 @@ export function CreateComponent<T>({
               disabled={field.readOnly}
             />
             <Label htmlFor={fieldName}>
-              {t[fieldName] || field.label}
+              {t[fieldName] || field.label[lang as "en" | "tr"]}
               {field.required && <span className="text-red-500 ml-1">*</span>}
             </Label>
             {errorMessage && (
diff --git a/WebServices/management-frontend/src/components/common/FormDisplay/FormDisplay.tsx b/WebServices/management-frontend/src/components/common/FormDisplay/FormDisplay.tsx
index 7d093c3..20f7740 100644
--- a/WebServices/management-frontend/src/components/common/FormDisplay/FormDisplay.tsx
+++ b/WebServices/management-frontend/src/components/common/FormDisplay/FormDisplay.tsx
@@ -69,13 +69,14 @@ export function FormDisplay<T>({
     };
     
     loadSchemaDefinitions();
-  }, [formProps, mode]);
+  }, [formProps, mode, lang]); // Added lang as a dependency to ensure re-fetch when language changes
   
   // Render the appropriate component based on the mode
   switch (mode) {
     case "create":
       return (
         <CreateComponent<T>
+          key={`create-${lang}`} // Add key with lang to force re-render on language change
           refetch={refetch}
           setMode={setMode}
           setSelectedItem={setSelectedItem}
@@ -88,6 +89,7 @@ export function FormDisplay<T>({
     case "update":
       return initialData ? (
         <UpdateComponent<T>
+          key={`update-${lang}`} // Add key with lang to force re-render on language change
           initialData={initialData}
           refetch={refetch}
           setMode={setMode}
@@ -101,6 +103,7 @@ export function FormDisplay<T>({
     case "view":
       return initialData ? (
         <ViewComponent<T>
+          key={`view-${lang}`} // Add key with lang to force re-render on language change
           initialData={initialData}
           refetch={refetch}
           setMode={setMode}
@@ -108,7 +111,7 @@ export function FormDisplay<T>({
           onCancel={onCancel}
           lang={lang}
           translations={translations}
-          formProps={formProps}
+          formProps={enhancedFormProps} // Changed from formProps to enhancedFormProps for consistency
         />
       ) : null;
     default:
diff --git a/WebServices/management-frontend/src/components/common/FormDisplay/UpdateComponent.tsx b/WebServices/management-frontend/src/components/common/FormDisplay/UpdateComponent.tsx
index d1adfbf..f9e6d72 100644
--- a/WebServices/management-frontend/src/components/common/FormDisplay/UpdateComponent.tsx
+++ b/WebServices/management-frontend/src/components/common/FormDisplay/UpdateComponent.tsx
@@ -2,7 +2,7 @@
 import React, { useState, useEffect } from "react";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
-import { UpdateComponentProps } from "./types";
+import { UpdateComponentProps, FieldDefinition } from "./types";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
@@ -13,18 +13,6 @@ import { useForm } from "react-hook-form";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { AlertCircle } from "lucide-react";
 
-// Import field definitions type
-interface FieldDefinition {
-  type: string;
-  group: string;
-  label: string;
-  options?: string[];
-  readOnly?: boolean;
-  required?: boolean;
-  defaultValue?: any;
-  name?: string; // Add name property for TypeScript compatibility
-}
-
 export function UpdateComponent<T>({
   initialData,
   refetch,
@@ -154,13 +142,13 @@ export function UpdateComponent<T>({
         return (
           <div className="space-y-2" key={fieldName}>
             <Label htmlFor={fieldName}>
-              {t[fieldName] || field.label}
+              {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}
+              placeholder={t[fieldName] || field.label[lang as "en" | "tr"]}
               disabled={field.readOnly}
             />
             {errorMessage && (
@@ -173,13 +161,13 @@ export function UpdateComponent<T>({
         return (
           <div className="space-y-2" key={fieldName}>
             <Label htmlFor={fieldName}>
-              {t[fieldName] || field.label}
+              {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}
+              placeholder={t[fieldName] || field.label[lang as "en" | "tr"]}
               rows={3}
               disabled={field.readOnly}
             />
@@ -193,7 +181,7 @@ export function UpdateComponent<T>({
         return (
           <div className="space-y-2" key={fieldName}>
             <Label htmlFor={fieldName}>
-              {t[fieldName] || field.label}
+              {t[fieldName] || field.label[lang as "en" | "tr"]}
               {field.required && <span className="text-red-500 ml-1">*</span>}
             </Label>
             <Select
@@ -202,7 +190,7 @@ export function UpdateComponent<T>({
               disabled={field.readOnly}
             >
               <SelectTrigger>
-                <SelectValue placeholder={t[fieldName] || field.label} />
+                <SelectValue placeholder={t[fieldName] || field.label[lang as "en" | "tr"]} />
               </SelectTrigger>
               <SelectContent>
                 {field.options?.map((option) => (
@@ -230,7 +218,7 @@ export function UpdateComponent<T>({
               disabled={field.readOnly}
             />
             <Label htmlFor={fieldName}>
-              {t[fieldName] || field.label}
+              {t[fieldName] || field.label[lang as "en" | "tr"]}
               {field.required && <span className="text-red-500 ml-1">*</span>}
             </Label>
             {errorMessage && (
@@ -243,7 +231,7 @@ export function UpdateComponent<T>({
         return (
           <div className="space-y-2" key={fieldName}>
             <Label htmlFor={fieldName}>
-              {t[fieldName] || field.label}
+              {t[fieldName] || field.label[lang as "en" | "tr"]}
               {field.required && <span className="text-red-500 ml-1">*</span>}
             </Label>
             <Input
diff --git a/WebServices/management-frontend/src/components/common/FormDisplay/ViewComponent.tsx b/WebServices/management-frontend/src/components/common/FormDisplay/ViewComponent.tsx
index 876e63c..639af8d 100644
--- a/WebServices/management-frontend/src/components/common/FormDisplay/ViewComponent.tsx
+++ b/WebServices/management-frontend/src/components/common/FormDisplay/ViewComponent.tsx
@@ -2,21 +2,10 @@
 import React, { useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
-import { ViewComponentProps } from "./types";
+import { ViewComponentProps, FieldDefinition } from "./types";
 import { Label } from "@/components/ui/label";
 import { z } from "zod";
 
-// Import field definitions type
-export interface FieldDefinition {
-  type: string;
-  group: string;
-  label: string;
-  options?: string[];
-  readOnly?: boolean;
-  required?: boolean;
-  defaultValue?: any;
-  name?: string; // Add name property for TypeScript compatibility
-}
 
 // Utility function to format field label
 const formatFieldLabel = (fieldName: string) => 
@@ -103,7 +92,7 @@ const ViewFieldGroup: React.FC<{
                 key={fieldName}
                 fieldName={fieldName}
                 value={value}
-                label={field.label}
+                label={field.label[lang as "en" | "tr"]}
                 lang={lang}
                 translations={translations}
                 hasError={hasError}
diff --git a/WebServices/management-frontend/src/components/common/FormDisplay/types.ts b/WebServices/management-frontend/src/components/common/FormDisplay/types.ts
index 47300ff..730d9ca 100644
--- a/WebServices/management-frontend/src/components/common/FormDisplay/types.ts
+++ b/WebServices/management-frontend/src/components/common/FormDisplay/types.ts
@@ -1,5 +1,17 @@
 "use client";
 
+// Import field definitions type
+export interface FieldDefinition {
+  type: string;
+  group: string;
+  label: { tr: string; en: string };
+  options?: string[];
+  readOnly?: boolean;
+  required?: boolean;
+  defaultValue?: any;
+  name?: string;
+}
+
 // Define the FormMode type to ensure consistency
 export type FormMode = "list" | "create" | "update" | "view";
 
diff --git a/WebServices/management-frontend/src/components/common/hooks/useApiData.ts b/WebServices/management-frontend/src/components/common/hooks/useApiData.ts
index 3b42b83..46448eb 100644
--- a/WebServices/management-frontend/src/components/common/hooks/useApiData.ts
+++ b/WebServices/management-frontend/src/components/common/hooks/useApiData.ts
@@ -1,4 +1,5 @@
-import { useDataFetching, RequestParams, ApiResponse } from "./useDataFetching";
+import { useDataFetching, ApiResponse } from "./useDataFetching";
+import { RequestParams } from "../schemas";
 
 /**
  * Hook for fetching data from Next.js API routes
@@ -11,35 +12,37 @@ export function useApiData<T>(
   initialParams: Partial<RequestParams> = {}
 ) {
   // Define the fetch function that will be passed to useDataFetching
-  const fetchFromApi = async (params: RequestParams): Promise<ApiResponse<T>> => {
+  const fetchFromApi = async (
+    params: RequestParams
+  ): Promise<ApiResponse<T>> => {
     try {
       // Prepare the request body with action and all params
       const requestBody = {
-        action: 'list',
+        action: "list",
         page: params.page,
         size: params.size,
         orderField: params.orderField,
         orderType: params.orderType,
-        query: params.query
+        query: params.query,
       };
-      
+
       // Make the API request using POST
       const response = await fetch(endpoint, {
-        method: 'POST',
+        method: "POST",
         headers: {
-          'Content-Type': 'application/json',
+          "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 empty data with pagination info on error
       return {
         data: [],
diff --git a/WebServices/management-frontend/src/components/common/hooks/useDashboardPage.ts b/WebServices/management-frontend/src/components/common/hooks/useDashboardPage.ts
new file mode 100644
index 0000000..0d3b5ab
--- /dev/null
+++ b/WebServices/management-frontend/src/components/common/hooks/useDashboardPage.ts
@@ -0,0 +1,93 @@
+import { retrievePageByUrl } from "@/eventRouters/pageRetriever";
+import { PageProps } from "@/validations/translations/translation";
+import React, { ReactElement } from "react";
+
+export interface DashboardPageParams {
+  /**
+   * The active page path, e.g., "/application", "/dashboard"
+   */
+  pageUrl: string;
+
+  /**
+   * The search parameters from Next.js
+   */
+  searchParams: Promise<{ [key: string]: string | undefined }>;
+}
+
+export interface DashboardPageResult {
+  /**
+   * The active page path
+   */
+  activePage: string;
+
+  /**
+   * The resolved search parameters
+   */
+  searchParamsInstance: { [key: string]: string | undefined };
+
+  /**
+   * The current language, either from search params or default
+   */
+  lang: "en" | "tr";
+
+  /**
+   * The page component to render
+   */
+  PageComponent: React.FC<PageProps>;
+}
+
+/**
+ * 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";
+  // Validate pageUrl
+  if (!pageUrl || typeof pageUrl !== "string") {
+    throw new Error(`Invalid page URL: ${pageUrl}`);
+  }
+
+  // Resolve search params
+  try {
+    searchParamsInstance = await searchParams;
+  } catch (err) {
+    console.error("Error resolving search parameters:", err);
+    // Still throw the error to be caught by Next.js error boundary
+    throw err;
+  }
+
+  // Determine language
+  const lang = (searchParamsInstance?.lang as "en" | "tr") || defaultLang;
+
+  // Validate language
+  if (lang !== "en" && lang !== "tr") {
+    console.warn(
+      `Invalid language "${lang}" specified, falling back to "${defaultLang}"`
+    );
+  }
+
+  // Get page component
+  const PageComponent = retrievePageByUrl(pageUrl);
+
+  // Check if page component exists
+  if (!PageComponent) {
+    throw new Error(`Page component not found for URL: ${pageUrl}`);
+  }
+
+  return {
+    activePage: pageUrl,
+    searchParamsInstance,
+    lang,
+    PageComponent,
+  };
+}
+
+export default useDashboardPage;
diff --git a/WebServices/management-frontend/src/components/common/hooks/useDataFetching.ts b/WebServices/management-frontend/src/components/common/hooks/useDataFetching.ts
index 4f733d6..372b8bf 100644
--- a/WebServices/management-frontend/src/components/common/hooks/useDataFetching.ts
+++ b/WebServices/management-frontend/src/components/common/hooks/useDataFetching.ts
@@ -1,22 +1,5 @@
 import { useState, useEffect, useCallback, useRef } from "react";
-
-export interface RequestParams {
-  page: number;
-  size: number;
-  orderField: string[];
-  orderType: string[];
-  query: Record<string, any>;
-}
-
-export interface ResponseMetadata {
-  totalCount: number;
-  totalItems: number;
-  totalPages: number;
-  pageCount: number;
-  allCount?: number;
-  next: boolean;
-  back: boolean;
-}
+import { RequestParams, ResponseMetadata } from "../schemas";
 
 export interface PagePagination extends RequestParams, ResponseMetadata {}
 
@@ -104,19 +87,21 @@ export function useDataFetching<T>(
 
   // Track if this is the initial mount
   const initialMountRef = useRef(true);
-  
+
   // Track previous request params to avoid unnecessary fetches
   const prevRequestParamsRef = useRef<RequestParams>(requestParams);
 
   useEffect(() => {
     // Only fetch on mount or when request params actually change
-    const paramsChanged = JSON.stringify(prevRequestParamsRef.current) !== JSON.stringify(requestParams);
-    
+    const paramsChanged =
+      JSON.stringify(prevRequestParamsRef.current) !==
+      JSON.stringify(requestParams);
+
     if (initialMountRef.current || paramsChanged) {
       const timer = setTimeout(() => {
         fetchDataFromApi();
         initialMountRef.current = false;
-        prevRequestParamsRef.current = {...requestParams};
+        prevRequestParamsRef.current = { ...requestParams };
       }, 300); // Debounce
 
       return () => clearTimeout(timer);
diff --git a/WebServices/management-frontend/src/components/common/hooks/useStandardApiFetch.ts b/WebServices/management-frontend/src/components/common/hooks/useStandardApiFetch.ts
new file mode 100644
index 0000000..a9b775b
--- /dev/null
+++ b/WebServices/management-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/management-frontend/src/components/layouts/DashboardLayout.tsx b/WebServices/management-frontend/src/components/layouts/DashboardLayout.tsx
new file mode 100644
index 0000000..2891cdf
--- /dev/null
+++ b/WebServices/management-frontend/src/components/layouts/DashboardLayout.tsx
@@ -0,0 +1,72 @@
+"use client";
+import React, { ReactNode } from "react";
+import Header from "@/components/header/Header";
+import ClientMenu from "@/components/menu/menu";
+
+interface DashboardLayoutProps {
+  children: ReactNode;
+  lang: "en" | "tr";
+  activePage: string;
+
+  // Optional props for client-frontend application
+  sidebarContent?: ReactNode;
+  customHeader?: ReactNode;
+  pageInfo?: Record<string, string>;
+  searchPlaceholder?: Record<string, string>;
+}
+
+/**
+ * A reusable dashboard layout component that provides consistent structure
+ * for all dashboard pages with sidebar, header, and content area.
+ */
+export const DashboardLayout: React.FC<DashboardLayoutProps> = ({
+  children,
+  lang,
+  activePage,
+  sidebarContent,
+  customHeader,
+  pageInfo,
+  searchPlaceholder,
+}) => {
+  return (
+    <div className="min-h-screen min-w-screen flex h-screen w-screen overflow-y-auto">
+      {/* Sidebar */}
+      <aside className="w-1/4 border-r p-4 overflow-y-auto">
+        {sidebarContent ? (
+          sidebarContent
+        ) : (
+          <ClientMenu lang={lang} activePage={activePage} />
+        )}
+      </aside>
+
+      {/* Main Content Area */}
+      <div className="flex flex-col w-3/4 overflow-y-auto">
+        {/* Header Component - Either custom or default */}
+        {customHeader ? (
+          customHeader
+        ) : pageInfo && searchPlaceholder ? (
+          <header className="sticky top-0 bg-white shadow-md z-10 p-4 flex justify-between items-center">
+            <h1 className="text-2xl font-semibold">{pageInfo[lang]}</h1>
+            <div className="flex items-center space-x-4">
+              <input
+                type="text"
+                placeholder={searchPlaceholder[lang]}
+                className="border px-3 py-2 rounded-lg"
+              />
+              <div className="w-10 h-10 bg-gray-300 rounded-full"></div>
+            </div>
+          </header>
+        ) : (
+          <Header lang={lang} />
+        )}
+
+        {/* Page Content */}
+        <div className={`${customHeader ? 'p-4 overflow-y-auto' : 'container mx-auto p-4'}`}>
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DashboardLayout;
diff --git a/WebServices/management-frontend/src/components/layouts/PageTemplate.tsx b/WebServices/management-frontend/src/components/layouts/PageTemplate.tsx
new file mode 100644
index 0000000..fd0daee
--- /dev/null
+++ b/WebServices/management-frontend/src/components/layouts/PageTemplate.tsx
@@ -0,0 +1,155 @@
+"use client";
+import React, { ReactNode, useState } from "react";
+import { Card, CardContent } from "@/components/ui/card";
+import { GridSelectionComponent, GridSize } from "@/components/common/HeaderSelections/GridSelectionComponent";
+import { LanguageSelectionComponent, Language } from "@/components/common/HeaderSelections/LanguageSelectionComponent";
+import { PaginationToolsComponent } from "@/components/common/PaginationModifiers/PaginationToolsComponent";
+import { CreateButton } from "@/components/common/ActionButtonsDisplay/CreateButton";
+import type { FormMode } from "@/components/common/FormDisplay/types";
+
+interface PageTemplateProps {
+  title: string;
+  lang: "en" | "tr";
+  translations: Record<string, any>;
+  
+  // Search section
+  searchSection?: ReactNode;
+  
+  // Data and pagination
+  data: any[];
+  pagination: any;
+  updatePagination: (params: any) => void;
+  loading: boolean;
+  error: any;
+  refetch: () => void;
+  
+  // Content display
+  contentDisplay: ReactNode;
+  
+  // Form handling
+  formComponent?: ReactNode;
+  mode: FormMode;
+  setMode: (mode: FormMode) => void;
+  handleCreateClick: () => void;
+  handleCancel: () => void;
+  
+  // Language handling
+  setLang?: (lang: Language) => void;
+  
+  // Optional components
+  headerActions?: ReactNode;
+  additionalActions?: ReactNode;
+}
+
+/**
+ * A reusable page template that follows the modular pattern established
+ * in the card-example page refactoring.
+ */
+export const PageTemplate: React.FC<PageTemplateProps> = ({
+  title,
+  lang,
+  translations,
+  searchSection,
+  data,
+  pagination,
+  updatePagination,
+  loading,
+  error,
+  refetch,
+  contentDisplay,
+  formComponent,
+  mode,
+  setMode,
+  handleCreateClick,
+  handleCancel,
+  setLang,
+  headerActions,
+  additionalActions,
+}) => {
+  const [gridCols, setGridCols] = useState<GridSize>(3);
+
+  return (
+    <>
+      {mode === "list" ? (
+        <>
+          {/* Header section with title and selection components */}
+          <div className="mb-4 flex justify-between items-center">
+            <h1 className="text-2xl font-bold">{title}</h1>
+            <div className="flex space-x-4">
+              {/* Grid Selection */}
+              <GridSelectionComponent 
+                gridCols={gridCols} 
+                setGridCols={setGridCols} 
+              />
+              
+              {/* Language Selection */}
+              <LanguageSelectionComponent 
+                lang={lang as Language} 
+                translations={translations}
+                setLang={setLang || (() => {})} 
+              />
+              
+              {/* Additional header actions */}
+              {headerActions}
+            </div>
+          </div>
+
+          {/* Search filters */}
+          {searchSection && (
+            <Card className="mb-4">
+              <CardContent className="pt-6">
+                {searchSection}
+              </CardContent>
+            </Card>
+          )}
+
+          {/* Create Button */}
+          <Card className="my-4">
+            <CardContent className="pt-6">
+              <CreateButton
+                onClick={handleCreateClick}
+                translations={translations}
+                lang={lang}
+              />
+              {/* Additional action buttons */}
+              {additionalActions}
+            </CardContent>
+          </Card>
+
+          {/* Pagination Tools Component */}
+          <Card className="my-4">
+            <CardContent className="pt-6">
+              <PaginationToolsComponent
+                pagination={pagination}
+                updatePagination={updatePagination}
+                loading={loading}
+                lang={lang}
+                translations={translations}
+              />
+            </CardContent>
+          </Card>
+
+          {/* Content Display */}
+          <div className="mt-6">
+            {contentDisplay}
+          </div>
+        </>
+      ) : (
+        /* Form Display for create/update/view modes */
+        formComponent || (
+          <div className="p-4 bg-gray-100 rounded-md">
+            <p>Form component not provided</p>
+            <button 
+              onClick={handleCancel}
+              className="mt-4 px-4 py-2 bg-gray-200 rounded-md hover:bg-gray-300"
+            >
+              {translations[lang].cancel || "Cancel"}
+            </button>
+          </div>
+        )
+      )}
+    </>
+  );
+};
+
+export default PageTemplate;
diff --git a/WebServices/management-frontend/src/components/layouts/README.md b/WebServices/management-frontend/src/components/layouts/README.md
new file mode 100644
index 0000000..ecb8b12
--- /dev/null
+++ b/WebServices/management-frontend/src/components/layouts/README.md
@@ -0,0 +1,271 @@
+# Modular Dashboard Layout System
+
+This directory contains reusable layout components for building dashboard pages with a consistent structure and appearance.
+
+## Components
+
+### DashboardLayout
+
+The `DashboardLayout` component provides the overall page structure with:
+- Sidebar navigation
+- Header
+- Main content area
+
+### PageTemplate
+
+The `PageTemplate` component provides a standardized structure for page content with:
+- Header section with title and selection components
+- Search filters section
+- Action buttons section
+- Pagination tools section
+- Content display section
+- Form display for create/update/view modes
+
+## Usage Example
+
+Here's an example of how to use these components to create a new dashboard page:
+
+```tsx
+"use client";
+import React, { useState } from "react";
+import { useApiData } from "@/components/common/hooks/useApiData";
+import { CardDisplay } from "@/components/common/CardDisplay";
+import { FormDisplay } from "@/components/common/FormDisplay/FormDisplay";
+import { TextQueryModifier, SelectQueryModifier, TypeQueryModifier } from "@/components/common/QueryModifiers";
+import { Card, CardContent } from "@/components/ui/card";
+import { Language } from "@/components/common/HeaderSelections/LanguageSelectionComponent";
+import { FormMode } from "@/components/common/FormDisplay/types";
+import { PageTemplate } from "@/components/layouts/PageTemplate";
+import type { GridSize } from "@/components/common/HeaderSelections/GridSelectionComponent";
+
+// Import your schema and translations
+import * as schema from "./schema";
+import { translations } from "./language";
+
+const ExamplePage: React.FC<{ lang: "en" | "tr", queryParams: any }> = ({ 
+  lang = "en", 
+  queryParams 
+}) => {
+  // API data hook
+  const {
+    data,
+    pagination,
+    loading,
+    error,
+    updatePagination,
+    refetch
+  } = useApiData<schema.ExampleData>('/api/examples');
+
+  // State management
+  const [mode, setMode] = useState<FormMode>("list");
+  const [selectedItem, setSelectedItem] = useState<schema.ExampleData | null>(null);
+  const [gridCols, setGridCols] = useState<GridSize>(3);
+  const [currentLang, setCurrentLang] = useState<Language>(lang as Language);
+
+  // Fields to display in cards
+  const showFields = ["name", "type", "status"];
+
+  // Query handling
+  const handleQueryChange = (key: string, value: string | null) => {
+    const newQuery = { ...pagination.query };
+
+    if (value === null || value.trim() === "") {
+      delete newQuery[key];
+    } else {
+      newQuery[key] = value;
+    }
+
+    updatePagination({
+      page: 1,
+      query: newQuery,
+    });
+  };
+
+  // Reset all filters
+  const handleResetAllFilters = () => {
+    updatePagination({
+      page: 1,
+      query: {},
+    });
+  };
+
+  // Action handlers
+  const handleCardClick = (item: schema.ExampleData) => {
+    console.log("Card clicked:", item);
+  };
+
+  const handleViewClick = (item: schema.ExampleData) => {
+    setSelectedItem(item);
+    setMode("view");
+  };
+
+  const handleUpdateClick = (item: schema.ExampleData) => {
+    setSelectedItem(item);
+    setMode("update");
+  };
+
+  const handleCreateClick = () => {
+    setSelectedItem(null);
+    setMode("create");
+  };
+
+  const handleCancel = () => {
+    setMode("list");
+    setSelectedItem(null);
+  };
+
+  // Search section component
+  const SearchSection = (
+    <div className="flex flex-col space-y-4">
+      <div className="flex space-x-4">
+        {/* Type selector */}
+        <TypeQueryModifier
+          fieldKey="type"
+          value={pagination.query["type"] || ""}
+          options={[
+            { value: "type1", label: translations[lang].type1 },
+            { value: "type2", label: translations[lang].type2 }
+          ]}
+          onQueryChange={handleQueryChange}
+          translations={translations}
+          lang={lang}
+        />
+      </div>
+      
+      <div className="flex space-x-4">
+        {/* Text search */}
+        <TextQueryModifier
+          fieldKey="name"
+          value={pagination.query["name__ilike"] ? pagination.query["name__ilike"].replace(/%/g, "") : ""}
+          label={translations[lang].search || "Search"}
+          onQueryChange={handleQueryChange}
+          translations={translations}
+          lang={lang}
+        />
+        
+        {/* Status dropdown */}
+        <SelectQueryModifier
+          fieldKey="status"
+          value={pagination.query["status"] || ""}
+          label={translations[lang].status || "Status"}
+          options={[
+            { value: "active", label: translations[lang].active || "Active" },
+            { value: "inactive", label: translations[lang].inactive || "Inactive" }
+          ]}
+          onQueryChange={handleQueryChange}
+          translations={translations}
+          lang={lang}
+        />
+      </div>
+      
+      {/* Reset filters button */}
+      <div className="flex justify-end">
+        <button 
+          onClick={handleResetAllFilters}
+          className="px-4 py-2 bg-gray-100 rounded-md hover:bg-gray-200"
+        >
+          {translations[lang].resetAll || "Reset All"}
+        </button>
+      </div>
+    </div>
+  );
+
+  // Form component
+  const FormComponent = selectedItem || mode === "create" ? (
+    <FormDisplay<schema.ExampleData>
+      initialData={selectedItem || undefined}
+      mode={mode}
+      refetch={refetch}
+      setMode={setMode}
+      setSelectedItem={setSelectedItem}
+      onCancel={handleCancel}
+      lang={lang}
+      translations={translations}
+      formProps={{
+        fieldDefinitions: mode === 'create' ? schema.createFieldDefinitions :
+          mode === 'update' ? schema.updateFieldDefinitions :
+            schema.viewFieldDefinitions,
+        validationSchema: mode === 'create' ? schema.CreateExampleSchema :
+          mode === 'update' ? schema.UpdateExampleSchema :
+            schema.ViewExampleSchema,
+        fieldsByMode: schema.fieldsByMode
+      }}
+    />
+  ) : null;
+
+  // Content display component
+  const ContentDisplay = (
+    <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}
+    />
+  );
+
+  return (
+    <PageTemplate
+      title={translations[lang].examplePageTitle || "Example Page"}
+      lang={lang}
+      translations={translations}
+      searchSection={SearchSection}
+      data={data}
+      pagination={pagination}
+      updatePagination={updatePagination}
+      loading={loading}
+      error={error}
+      refetch={refetch}
+      contentDisplay={ContentDisplay}
+      formComponent={FormComponent}
+      mode={mode}
+      setMode={setMode}
+      handleCreateClick={handleCreateClick}
+      handleCancel={handleCancel}
+      setLang={setCurrentLang}
+    />
+  );
+};
+
+export default ExamplePage;
+```
+
+## Integration with Next.js App Router
+
+To use these components with Next.js App Router, update your page component like this:
+
+```tsx
+// src/app/(DashboardLayout)/your-page/page.tsx
+import React from "react";
+import { retrievePageByUrl } from "@/eventRouters/pageRetriever";
+import DashboardLayout from "@/components/layouts/DashboardLayout";
+
+async function YourPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ [key: string]: string | undefined }>;
+}) {
+  const activePage = "/your-page";
+  const searchParamsInstance = await searchParams;
+  const lang = (searchParamsInstance?.lang as "en" | "tr") || "en";
+  const PageComponent = retrievePageByUrl(activePage);
+
+  return (
+    <DashboardLayout lang={lang} activePage={activePage}>
+      <PageComponent lang={lang} queryParams={searchParamsInstance} />
+    </DashboardLayout>
+  );
+}
+
+export default YourPage;
+```
+
+This modular approach makes it easy to create new dashboard pages with consistent structure and behavior.
diff --git a/WebServices/management-frontend/src/eventRouters/application/page.tsx b/WebServices/management-frontend/src/eventRouters/application/page.tsx
index 294affa..31b996c 100644
--- a/WebServices/management-frontend/src/eventRouters/application/page.tsx
+++ b/WebServices/management-frontend/src/eventRouters/application/page.tsx
@@ -16,7 +16,10 @@ import { GridSelectionComponent, GridSize } from "@/components/common/HeaderSele
 import { LanguageSelectionComponent, Language } from "@/components/common/HeaderSelections/LanguageSelectionComponent";
 import type { FormMode } from "@/components/common/FormDisplay/types";
 
-const ApplicationPage: React.FC<PageProps> = ({ lang = "en" }) => {
+const ApplicationPage: React.FC<PageProps> = ({ lang: initialLang = "en" }) => {
+  // Add local state for language to ensure it persists when changed
+  const [lang, setLang] = useState<Language>(initialLang as Language);
+  
   // Use the API data hook directly
   const {
     data,
@@ -128,23 +131,22 @@ const ApplicationPage: React.FC<PageProps> = ({ lang = "en" }) => {
   };
 
   return (
-    <div className="container mx-auto p-4">
+    <div className="container mx-auto p-4 overflow-y-auto" >
       <div className="mb-4 flex justify-between items-center">
         <h1 className="text-2xl font-bold">{translations[lang].applicationTitle || "Applications"}</h1>
-        <div className="flex items-center space-x-4">
-          <GridSelectionComponent
-            gridCols={gridCols}
-            setGridCols={setGridCols}
-            translations={translations}
-            lang={lang}
+        <div className="flex space-x-4">
+          {/* Grid Selection */}
+          <GridSelectionComponent 
+            gridCols={gridCols} 
+            setGridCols={setGridCols} 
+          />
+          
+          {/* Language Selection */}
+          <LanguageSelectionComponent 
+            lang={lang} 
+            translations={translations}
+            setLang={setLang} 
           />
-          <div>
-            <LanguageSelectionComponent
-              lang={lang as Language}
-              setLang={(newLang) => console.log("Language change not implemented", newLang)}
-              translations={translations}
-            />
-          </div>
         </div>
       </div>
 
@@ -174,14 +176,14 @@ const ApplicationPage: React.FC<PageProps> = ({ lang = "en" }) => {
                       <Filter className="mr-2 h-4 w-4" />
                       {translations[lang].filterSelection || "Filter Selection"}
                     </div>
-                    <Button
+                    {/* <Button
                       variant="outline"
                       size="sm"
                       onClick={handleResetAllFilters}
                       className="text-xs"
                     >
                       {translations[lang].resetAll || "Reset All"}
-                    </Button>
+                    </Button> */}
                   </div>
 
                   {/* Search input */}
diff --git a/WebServices/management-frontend/src/eventRouters/application/schema.ts b/WebServices/management-frontend/src/eventRouters/application/schema.ts
index 2842c33..6a540c1 100644
--- a/WebServices/management-frontend/src/eventRouters/application/schema.ts
+++ b/WebServices/management-frontend/src/eventRouters/application/schema.ts
@@ -1,4 +1,19 @@
 import { z } from "zod";
+import { flattenFieldDefinitions } from "../schemas/zodSchemas";
+
+export interface ApplicationData {
+  id?: number;
+  name: string;
+  application_code: string;
+  site_url: string;
+  application_type: string;
+  application_for?: string;
+  description?: string;
+  active: boolean;
+  deleted?: boolean;
+  created_at?: string;
+  updated_at?: string;
+}
 
 // Base schema with all possible fields
 const ApplicationBaseSchema = z.object({
@@ -22,6 +37,34 @@ const ApplicationBaseSchema = z.object({
   updated_at: z.string().optional(),
 });
 
+const ApplicationBaseTranslationTr = {
+  uu_id: "UUID",
+  name: "Name",
+  application_code: "Application Code",
+  site_url: "Site URL",
+  application_type: "Application Type",
+  application_for: "Application For",
+  description: "Description",
+  active: "Active",
+  deleted: "Deleted",
+  created_at: "Created At",
+  updated_at: "Updated At",
+};
+
+const ApplicationBaseTranslationEn = {
+  uu_id: "UUID",
+  name: "Name",
+  application_code: "Application Code",
+  site_url: "Site URL",
+  application_type: "Application Type",
+  application_for: "Application For",
+  description: "Description",
+  active: "Active",
+  deleted: "Deleted",
+  created_at: "Created At",
+  updated_at: "Updated At",
+};
+
 // Schema for creating a new application
 export const CreateApplicationSchema = ApplicationBaseSchema.omit({
   uu_id: true,
@@ -50,31 +93,6 @@ export type CreateApplicationFormData = z.infer<typeof CreateApplicationSchema>;
 export type UpdateApplicationFormData = z.infer<typeof UpdateApplicationSchema>;
 export type ViewApplicationFormData = z.infer<typeof ViewApplicationSchema>;
 
-// Define field definition type
-export interface FieldDefinition {
-  type: string;
-  group: string;
-  label: string;
-  options?: string[];
-  readOnly?: boolean;
-  required?: boolean;
-  defaultValue?: any;
-}
-
-export interface ApplicationData {
-  id?: number;
-  name: string;
-  application_code: string;
-  site_url: string;
-  application_type: string;
-  application_for?: string;
-  description?: string;
-  active: boolean;
-  deleted?: boolean;
-  created_at?: string;
-  updated_at?: string;
-}
-
 // Base field definitions grouped by section
 const baseFieldDefinitions = {
   // Identification fields
@@ -82,11 +100,30 @@ const baseFieldDefinitions = {
     title: "Identification Information",
     order: 1,
     fields: {
-      uu_id: { type: "text", label: "UUID", readOnly: true, required: false },
-      name: { type: "text", label: "Name", readOnly: false, required: true },
+      uu_id: {
+        type: "text",
+        label: {
+          tr: ApplicationBaseTranslationTr.uu_id,
+          en: ApplicationBaseTranslationEn.uu_id,
+        },
+        readOnly: true,
+        required: false,
+      },
+      name: {
+        type: "text",
+        label: {
+          tr: ApplicationBaseTranslationTr.name,
+          en: ApplicationBaseTranslationEn.name,
+        },
+        readOnly: false,
+        required: true,
+      },
       application_code: {
         type: "text",
-        label: "Application Code",
+        label: {
+          tr: ApplicationBaseTranslationTr.application_code,
+          en: ApplicationBaseTranslationEn.application_code,
+        },
         readOnly: false,
         required: true,
       },
@@ -100,27 +137,39 @@ const baseFieldDefinitions = {
     fields: {
       site_url: {
         type: "text",
-        label: "Site URL",
+        label: {
+          tr: ApplicationBaseTranslationTr.site_url,
+          en: ApplicationBaseTranslationEn.site_url,
+        },
         readOnly: false,
         required: true,
       },
       application_type: {
         type: "select",
-        label: "Application Type",
+        label: {
+          tr: ApplicationBaseTranslationTr.application_type,
+          en: ApplicationBaseTranslationEn.application_type,
+        },
         options: ["info", "Dash", "Admin"],
         readOnly: false,
         required: true,
       },
       application_for: {
         type: "select",
-        label: "Application For",
+        label: {
+          tr: ApplicationBaseTranslationTr.application_for,
+          en: ApplicationBaseTranslationEn.application_for,
+        },
         options: ["EMP", "OCC"],
         readOnly: false,
         required: false,
       },
       description: {
         type: "textarea",
-        label: "Description",
+        label: {
+          tr: ApplicationBaseTranslationTr.description,
+          en: ApplicationBaseTranslationEn.description,
+        },
         readOnly: false,
         required: false,
       },
@@ -134,14 +183,20 @@ const baseFieldDefinitions = {
     fields: {
       active: {
         type: "checkbox",
-        label: "Active",
+        label: {
+          tr: ApplicationBaseTranslationTr.active,
+          en: ApplicationBaseTranslationEn.active,
+        },
         readOnly: false,
         required: false,
         defaultValue: true,
       },
       deleted: {
         type: "checkbox",
-        label: "Deleted",
+        label: {
+          tr: ApplicationBaseTranslationTr.deleted,
+          en: ApplicationBaseTranslationEn.deleted,
+        },
         readOnly: true,
         required: false,
         defaultValue: false,
@@ -156,13 +211,19 @@ const baseFieldDefinitions = {
     fields: {
       created_at: {
         type: "date",
-        label: "Created At",
+        label: {
+          tr: ApplicationBaseTranslationTr.created_at,
+          en: ApplicationBaseTranslationEn.created_at,
+        },
         readOnly: true,
         required: false,
       },
       updated_at: {
         type: "date",
-        label: "Updated At",
+        label: {
+          tr: ApplicationBaseTranslationTr.updated_at,
+          en: ApplicationBaseTranslationEn.updated_at,
+        },
         readOnly: true,
         required: false,
       },
@@ -170,28 +231,6 @@ const baseFieldDefinitions = {
   },
 };
 
-// Helper function to flatten grouped field definitions into a flat structure
-const flattenFieldDefinitions = (
-  groupedDefs: any
-): Record<string, FieldDefinition> => {
-  const result: Record<string, FieldDefinition> = {};
-
-  Object.entries(groupedDefs).forEach(
-    ([groupName, groupConfig]: [string, any]) => {
-      Object.entries(groupConfig.fields).forEach(
-        ([fieldName, fieldConfig]: [string, any]) => {
-          result[fieldName] = {
-            ...fieldConfig,
-            group: groupName,
-          };
-        }
-      );
-    }
-  );
-
-  return result;
-};
-
 // Create a flat version of the field definitions for compatibility
 const flatFieldDefinitions = flattenFieldDefinitions(baseFieldDefinitions);
 
@@ -386,6 +425,3 @@ export const fieldsByMode = {
   update: Object.keys(updateFieldDefinitions),
   view: Object.keys(viewFieldDefinitions),
 };
-
-// Note: Direct fetch function has been removed to use the API route instead
-// Data fetching is now handled in the hooks.ts file using the POST endpoint
diff --git a/WebServices/management-frontend/src/eventRouters/schemas/zodSchemas.ts b/WebServices/management-frontend/src/eventRouters/schemas/zodSchemas.ts
new file mode 100644
index 0000000..2b89361
--- /dev/null
+++ b/WebServices/management-frontend/src/eventRouters/schemas/zodSchemas.ts
@@ -0,0 +1,35 @@
+// Define field definition type
+interface FieldDefinition {
+  type: string;
+  group: string;
+  label: string;
+  options?: string[];
+  readOnly?: boolean;
+  required?: boolean;
+  defaultValue?: any;
+}
+
+// Helper function to flatten grouped field definitions into a flat structure
+const flattenFieldDefinitions = (
+  groupedDefs: any
+): Record<string, FieldDefinition> => {
+  const result: Record<string, FieldDefinition> = {};
+
+  Object.entries(groupedDefs).forEach(
+    ([groupName, groupConfig]: [string, any]) => {
+      Object.entries(groupConfig.fields).forEach(
+        ([fieldName, fieldConfig]: [string, any]) => {
+          result[fieldName] = {
+            ...fieldConfig,
+            group: groupName,
+          };
+        }
+      );
+    }
+  );
+
+  return result;
+};
+
+export type { FieldDefinition };
+export { flattenFieldDefinitions };
diff --git a/docker-compose.yml b/docker-compose.yml
index 7c01b10..84cc2ed 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,17 +1,17 @@
 services:
-  # client_frontend:
-  #   container_name: client_frontend
-  #   build:
-  #     context: .
-  #     dockerfile: WebServices/client-frontend/Dockerfile
-  #   networks:
-  #     - wag-services
-  #   ports:
-  #     - "3000:3000"
-  #   environment:
-  #     - NODE_ENV=development
-  #   cpus: 1
-  #   mem_limit: 2048m
+  client_frontend:
+    container_name: client_frontend
+    build:
+      context: .
+      dockerfile: WebServices/client-frontend/Dockerfile
+    networks:
+      - wag-services
+    ports:
+      - "3000:3000"
+    environment:
+      - NODE_ENV=development
+    cpus: 1
+    mem_limit: 2048m
 
   # volumes:
   #   - client-frontend:/WebServices/client-frontend
@@ -57,32 +57,32 @@ services:
     mem_limit: 512m
     cpus: 0.5
 
-  # identity_service:
-  #   container_name: identity_service
-  #   build:
-  #     context: .
-  #     dockerfile: ApiServices/IdentityService/Dockerfile
-  #   networks:
-  #     - wag-services
-  #   depends_on:
-  #     - initializer_service
-  #   env_file:
-  #     - api_env.env
-  #   environment:
-  #     - API_PATH=app:app
-  #     - API_HOST=0.0.0.0
-  #     - API_PORT=8002
-  #     - API_LOG_LEVEL=info
-  #     - API_RELOAD=1
-  #     - API_APP_NAME=evyos-identity-api-gateway
-  #     - API_TITLE=WAG API Identity Api Gateway
-  #     - API_FORGOT_LINK=https://identity_service/forgot-password
-  #     - API_DESCRIPTION=This api is serves as web identity api gateway only to evyos web services.
-  #     - API_APP_URL=https://identity_service
-  #   ports:
-  #     - "8002:8002"
-  #   mem_limit: 512m
-  #   cpus: 0.5
+  identity_service:
+    container_name: identity_service
+    build:
+      context: .
+      dockerfile: ApiServices/IdentityService/Dockerfile
+    networks:
+      - wag-services
+    depends_on:
+      - initializer_service
+    env_file:
+      - api_env.env
+    environment:
+      - API_PATH=app:app
+      - API_HOST=0.0.0.0
+      - API_PORT=8002
+      - API_LOG_LEVEL=info
+      - API_RELOAD=1
+      - API_APP_NAME=evyos-identity-api-gateway
+      - API_TITLE=WAG API Identity Api Gateway
+      - API_FORGOT_LINK=https://identity_service/forgot-password
+      - API_DESCRIPTION=This api is serves as web identity api gateway only to evyos web services.
+      - API_APP_URL=https://identity_service
+    ports:
+      - "8002:8002"
+    mem_limit: 512m
+    cpus: 0.5
 
   # building_service:
   #   container_name: building_service