diff --git a/application/src/hooks/useOperationalPage.ts b/application/src/hooks/useOperationalPage.ts
new file mode 100644
index 0000000..db4d1a7
--- /dev/null
+++ b/application/src/hooks/useOperationalPage.ts
@@ -0,0 +1,91 @@
+
+import { useState, useEffect } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { operationalPageService } from '@/services/operationalPageService';
+import { OperationalPageRecord } from '@/types/operational.types';
+import { toast } from '@/hooks/use-toast';
+
+export const useOperationalPages = () => {
+  return useQuery({
+    queryKey: ['operational-pages'],
+    queryFn: operationalPageService.getOperationalPages,
+    staleTime: 30000,
+  });
+};
+
+export const useOperationalPage = (id: string) => {
+  return useQuery({
+    queryKey: ['operational-page', id],
+    queryFn: () => operationalPageService.getOperationalPage(id),
+    enabled: !!id,
+    staleTime: 30000,
+  });
+};
+
+export const useUpdateOperationalPage = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ id, data }: { id: string; data: Partial<OperationalPageRecord> }) =>
+      operationalPageService.updateOperationalPage(id, data),
+    onSuccess: (data) => {
+      queryClient.invalidateQueries({ queryKey: ['operational-pages'] });
+      queryClient.invalidateQueries({ queryKey: ['operational-page', data.id] });
+      toast({
+        title: 'Success',
+        description: 'Operational page updated successfully',
+      });
+    },
+    onError: (error) => {
+      toast({
+        title: 'Error',
+        description: 'Failed to update operational page',
+        variant: 'destructive',
+      });
+    },
+  });
+};
+
+export const useCreateOperationalPage = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: operationalPageService.createOperationalPage,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['operational-pages'] });
+      toast({
+        title: 'Success',
+        description: 'Operational page created successfully',
+      });
+    },
+    onError: (error) => {
+      toast({
+        title: 'Error',
+        description: 'Failed to create operational page',
+        variant: 'destructive',
+      });
+    },
+  });
+};
+
+export const useDeleteOperationalPage = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: operationalPageService.deleteOperationalPage,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['operational-pages'] });
+      toast({
+        title: 'Success',
+        description: 'Operational page deleted successfully',
+      });
+    },
+    onError: (error) => {
+      toast({
+        title: 'Error',
+        description: 'Failed to delete operational page',
+        variant: 'destructive',
+      });
+    },
+  });
+};
\ No newline at end of file
diff --git a/application/src/main.tsx b/application/src/main.tsx
index 719464e..51f04b5 100644
--- a/application/src/main.tsx
+++ b/application/src/main.tsx
@@ -2,4 +2,4 @@ import { createRoot } from 'react-dom/client'
 import App from './App.tsx'
 import './index.css'
 
-createRoot(document.getElementById("root")!).render(<App />);
+createRoot(document.getElementById("root")!).render(<App />);
\ No newline at end of file