diff --git a/src/pages/Parks.tsx b/src/pages/Parks.tsx
index fda9b3fe..8c3c9484 100644
--- a/src/pages/Parks.tsx
+++ b/src/pages/Parks.tsx
@@ -1,16 +1,16 @@
-import { useState, useEffect, useMemo } from 'react';
-import { Header } from '@/components/layout/Header';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { cn } from '@/lib/utils';
-import { Collapsible, CollapsibleContent } from '@/components/ui/collapsible';
-import { Badge } from '@/components/ui/badge';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { 
-  MapPin, 
-  Grid3X3, 
-  List, 
-  Map, 
+import { useState, useEffect, useMemo } from "react";
+import { Header } from "@/components/layout/Header";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
+import { Badge } from "@/components/ui/badge";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import {
+  MapPin,
+  Grid3X3,
+  List,
+  Map,
   Filter,
   SortAsc,
   Search,
@@ -20,25 +20,25 @@ import {
   FerrisWheel,
   Plus,
   PanelLeftClose,
-  PanelLeftOpen
-} from 'lucide-react';
-import { Park } from '@/types/database';
-import { supabase } from '@/integrations/supabase/client';
-import { useNavigate } from 'react-router-dom';
-import { ParkFilters } from '@/components/parks/ParkFilters';
-import { ParkGridView } from '@/components/parks/ParkGridView';
-import { ParkListView } from '@/components/parks/ParkListView';
-import { ParkSearch } from '@/components/parks/ParkSearch';
-import { ParkSortOptions } from '@/components/parks/ParkSortOptions';
-import { useToast } from '@/hooks/use-toast';
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
-import { ParkForm } from '@/components/admin/ParkForm';
-import { useAuth } from '@/hooks/useAuth';
-import { useUserRole } from '@/hooks/useUserRole';
-import { useAuthModal } from '@/hooks/useAuthModal';
-import { useOpenGraph } from '@/hooks/useOpenGraph';
-import { useParks } from '@/hooks/parks/useParks';
-import { Pagination } from '@/components/common/Pagination';
+  PanelLeftOpen,
+} from "lucide-react";
+import { Park } from "@/types/database";
+import { supabase } from "@/integrations/supabase/client";
+import { useNavigate } from "react-router-dom";
+import { ParkFilters } from "@/components/parks/ParkFilters";
+import { ParkGridView } from "@/components/parks/ParkGridView";
+import { ParkListView } from "@/components/parks/ParkListView";
+import { ParkSearch } from "@/components/parks/ParkSearch";
+import { ParkSortOptions } from "@/components/parks/ParkSortOptions";
+import { useToast } from "@/hooks/use-toast";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { ParkForm } from "@/components/admin/ParkForm";
+import { useAuth } from "@/hooks/useAuth";
+import { useUserRole } from "@/hooks/useUserRole";
+import { useAuthModal } from "@/hooks/useAuthModal";
+import { useOpenGraph } from "@/hooks/useOpenGraph";
+import { useParks } from "@/hooks/parks/useParks";
+import { Pagination } from "@/components/common/Pagination";
 
 export interface FilterState {
   search: string;
@@ -63,11 +63,11 @@ export interface FilterState {
 
 export interface SortState {
   field: string;
-  direction: 'asc' | 'desc';
+  direction: "asc" | "desc";
 }
 
 const initialFilters: FilterState = {
-  search: '',
+  search: "",
   parkType: [],
   status: [],
   country: [],
@@ -88,19 +88,19 @@ const initialFilters: FilterState = {
 };
 
 const initialSort: SortState = {
-  field: 'name',
-  direction: 'asc'
+  field: "name",
+  direction: "asc",
 };
 
 export default function Parks() {
   const [filters, setFilters] = useState<FilterState>(initialFilters);
   const [sort, setSort] = useState<SortState>(initialSort);
-  const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
+  const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
   const [showFilters, setShowFilters] = useState(false);
   const [isAddParkModalOpen, setIsAddParkModalOpen] = useState(false);
   const [currentPage, setCurrentPage] = useState(1);
   const [sidebarCollapsed, setSidebarCollapsed] = useState(() => {
-    const saved = localStorage.getItem('parks-sidebar-collapsed');
+    const saved = localStorage.getItem("parks-sidebar-collapsed");
     return saved ? JSON.parse(saved) : false;
   });
   const navigate = useNavigate();
@@ -113,7 +113,7 @@ export default function Parks() {
   const { data: parks = [], isLoading: loading, error } = useParks();
 
   useEffect(() => {
-    localStorage.setItem('parks-sidebar-collapsed', JSON.stringify(sidebarCollapsed));
+    localStorage.setItem("parks-sidebar-collapsed", JSON.stringify(sidebarCollapsed));
   }, [sidebarCollapsed]);
 
   // Show error toast if query fails
@@ -122,23 +122,23 @@ export default function Parks() {
       toast({
         variant: "destructive",
         title: "Error loading parks",
-        description: error instanceof Error ? error.message : 'Failed to load parks',
+        description: error instanceof Error ? error.message : "Failed to load parks",
       });
     }
   }, [error, toast]);
 
   const filteredAndSortedParks = useMemo(() => {
-    let filtered = parks.filter(park => {
+    let filtered = parks.filter((park) => {
       // Search filter
       if (filters.search) {
         const searchTerm = filters.search.toLowerCase();
-        const matchesSearch = 
+        const matchesSearch =
           park.name.toLowerCase().includes(searchTerm) ||
           park.description?.toLowerCase().includes(searchTerm) ||
           park.location?.city?.toLowerCase().includes(searchTerm) ||
           park.location?.country?.toLowerCase().includes(searchTerm) ||
           park.location?.state_province?.toLowerCase().includes(searchTerm);
-        
+
         if (!matchesSearch) return false;
       }
 
@@ -153,7 +153,7 @@ export default function Parks() {
       }
 
       // Country filter
-      if (filters.country.length > 0 && !filters.country.includes(park.location?.country || '')) {
+      if (filters.country.length > 0 && !filters.country.includes(park.location?.country || "")) {
         return false;
       }
 
@@ -215,7 +215,7 @@ export default function Parks() {
 
       // Opening year filter
       if (filters.openingYearStart || filters.openingYearEnd) {
-        const openingYear = park.opening_date ? parseInt(park.opening_date.split('-')[0]) : null;
+        const openingYear = park.opening_date ? parseInt(park.opening_date.split("-")[0]) : null;
         if (openingYear) {
           if (filters.openingYearStart && openingYear < filters.openingYearStart) return false;
           if (filters.openingYearEnd && openingYear > filters.openingYearEnd) return false;
@@ -230,29 +230,29 @@ export default function Parks() {
     // Apply sorting
     filtered.sort((a, b) => {
       let aValue: any, bValue: any;
-      
+
       switch (sort.field) {
-        case 'name':
+        case "name":
           aValue = a.name;
           bValue = b.name;
           break;
-        case 'rating':
+        case "rating":
           aValue = a.average_rating || 0;
           bValue = b.average_rating || 0;
           break;
-        case 'rides':
+        case "rides":
           aValue = a.ride_count || 0;
           bValue = b.ride_count || 0;
           break;
-        case 'coasters':
+        case "coasters":
           aValue = a.coaster_count || 0;
           bValue = b.coaster_count || 0;
           break;
-        case 'reviews':
+        case "reviews":
           aValue = a.review_count || 0;
           bValue = b.review_count || 0;
           break;
-        case 'opening':
+        case "opening":
           aValue = a.opening_date ? new Date(a.opening_date).getTime() : 0;
           bValue = b.opening_date ? new Date(b.opening_date).getTime() : 0;
           break;
@@ -261,39 +261,39 @@ export default function Parks() {
           bValue = b.name;
       }
 
-      if (typeof aValue === 'string' && typeof bValue === 'string') {
+      if (typeof aValue === "string" && typeof bValue === "string") {
         const result = aValue.localeCompare(bValue);
-        return sort.direction === 'asc' ? result : -result;
+        return sort.direction === "asc" ? result : -result;
       }
-      
+
       const result = aValue - bValue;
-      return sort.direction === 'asc' ? result : -result;
+      return sort.direction === "asc" ? result : -result;
     });
 
     return filtered;
   }, [parks, filters, sort]);
 
   const generateDescription = () => {
-    if (!parks.length) return 'Browse theme parks worldwide on ThrillWiki';
-    
+    if (!parks.length) return "Browse theme parks worldwide on ThrillWiki";
+
     const activeFilters = [];
     if (filters.country.length === 1) activeFilters.push(`in ${filters.country[0]}`);
-    if (filters.parkType.length > 0) activeFilters.push(filters.parkType.join(', '));
-    if (filters.status.length > 0) activeFilters.push(filters.status.join(', '));
-    
+    if (filters.parkType.length > 0) activeFilters.push(filters.parkType.join(", "));
+    if (filters.status.length > 0) activeFilters.push(filters.status.join(", "));
+
     if (activeFilters.length > 0) {
-      return `Browse ${filteredAndSortedParks.length} ${activeFilters.join(' ')} theme parks`;
+      return `Browse ${filteredAndSortedParks.length} ${activeFilters.join(" ")} theme parks`;
     }
-    
+
     return `Browse ${parks.length} theme parks worldwide`;
   };
 
   useOpenGraph({
-    title: 'Theme Parks - ThrillWiki',
+    title: "Theme Parks - ThrillWiki",
     description: generateDescription(),
     imageUrl: filteredAndSortedParks[0]?.banner_image_url,
     imageId: filteredAndSortedParks[0]?.banner_image_id,
-    type: 'website'
+    type: "website",
   });
 
   const activeFilterCount = useMemo(() => {
@@ -334,7 +334,7 @@ export default function Parks() {
 
   const handleParkSubmit = async (parkData: any) => {
     try {
-      const { submitParkCreation } = await import('@/lib/entitySubmissionHelpers');
+      const { submitParkCreation } = await import("@/lib/entitySubmissionHelpers");
       await submitParkCreation(parkData, user.id);
 
       toast({
@@ -347,7 +347,7 @@ export default function Parks() {
       toast({
         title: "Submission Failed",
         description: error instanceof Error ? error.message : "Failed to submit park.",
-        variant: "destructive"
+        variant: "destructive",
       });
     }
   };
@@ -378,46 +378,51 @@ export default function Parks() {
   return (
     <div className="min-h-screen bg-background">
       <Header />
-      
+
       <main className="container mx-auto px-4 md:px-6 lg:px-8 xl:px-8 2xl:px-10 py-6 xl:py-8">
         {/* Page Header */}
         <div className="mb-8">
           <div className="flex items-center gap-3 mb-4">
             <MapPin className="w-8 h-8 text-primary" />
-            <h1 className="text-4xl font-bold">Theme Parks</h1>
+            <h1 className="text-4xl font-bold">Parks</h1>
           </div>
           <p className="text-lg text-muted-foreground mb-4">
             Discover amazing theme parks, amusement parks, and attractions worldwide
           </p>
-          
+
           <div className="flex items-center justify-between">
             <div className="flex flex-wrap items-center gap-1.5 sm:gap-2">
-              <Badge variant="secondary" className="flex items-center justify-center text-sm sm:text-base px-2 py-0.5 sm:px-3 sm:py-1 whitespace-nowrap">
+              <Badge
+                variant="secondary"
+                className="flex items-center justify-center text-sm sm:text-base px-2 py-0.5 sm:px-3 sm:py-1 whitespace-nowrap"
+              >
                 {filteredAndSortedParks.length} parks
               </Badge>
-              <Badge variant="outline" className="flex items-center justify-center text-xs sm:text-sm px-2 py-0.5 whitespace-nowrap">
+              <Badge
+                variant="outline"
+                className="flex items-center justify-center text-xs sm:text-sm px-2 py-0.5 whitespace-nowrap"
+              >
                 {parks.reduce((sum, park) => sum + (park.ride_count || 0), 0)} total rides
               </Badge>
-              <Badge variant="outline" className="flex items-center justify-center text-xs sm:text-sm px-2 py-0.5 whitespace-nowrap hidden xs:inline-flex sm:inline-flex">
+              <Badge
+                variant="outline"
+                className="flex items-center justify-center text-xs sm:text-sm px-2 py-0.5 whitespace-nowrap hidden xs:inline-flex sm:inline-flex"
+              >
                 {parks.reduce((sum, park) => sum + (park.coaster_count || 0), 0)} coasters
               </Badge>
             </div>
 
             <div className="flex items-center gap-2">
-              <Button 
+              <Button
                 onClick={() => requireAuth(() => setIsAddParkModalOpen(true), "Sign in to add a new park")}
                 className="gap-2"
               >
                 <Plus className="w-4 h-4" />
                 Add Park
               </Button>
-              
+
               {activeFilterCount > 0 && (
-                <Button 
-                  variant="outline" 
-                  onClick={clearAllFilters}
-                  className="text-destructive hover:text-destructive"
-                >
+                <Button variant="outline" onClick={clearAllFilters} className="text-destructive hover:text-destructive">
                   <X className="w-4 h-4 mr-2" />
                   Clear all filters
                 </Button>
@@ -436,11 +441,7 @@ export default function Parks() {
               className="shrink-0 gap-2 hidden lg:flex"
               title={sidebarCollapsed ? "Show filters" : "Hide filters"}
             >
-              {sidebarCollapsed ? (
-                <PanelLeftOpen className="w-4 h-4" />
-              ) : (
-                <PanelLeftClose className="w-4 h-4" />
-              )}
+              {sidebarCollapsed ? <PanelLeftOpen className="w-4 h-4" /> : <PanelLeftClose className="w-4 h-4" />}
               <span>Filters</span>
               {activeFilterCount > 0 && (
                 <Badge variant="secondary" className="ml-1">
@@ -451,19 +452,13 @@ export default function Parks() {
 
             {/* Search bar takes remaining space */}
             <div className="flex-1">
-              <ParkSearch 
-                value={filters.search}
-                onChange={(search) => setFilters(prev => ({ ...prev, search }))}
-              />
+              <ParkSearch value={filters.search} onChange={(search) => setFilters((prev) => ({ ...prev, search }))} />
             </div>
-            
+
             {/* Sort controls - more compact */}
             <div className="flex gap-2">
-              <ParkSortOptions 
-                sort={sort}
-                onSortChange={setSort}
-              />
-              
+              <ParkSortOptions sort={sort} onSortChange={setSort} />
+
               {/* Mobile filter toggle */}
               <Button
                 variant={showFilters ? "default" : "outline"}
@@ -472,7 +467,7 @@ export default function Parks() {
               >
                 <Filter className="w-4 h-4" />
                 <span className="hidden sm:inline">Filters</span>
-                <ChevronDown className={`w-4 h-4 transition-transform ${showFilters ? 'rotate-180' : ''}`} />
+                <ChevronDown className={`w-4 h-4 transition-transform ${showFilters ? "rotate-180" : ""}`} />
                 {activeFilterCount > 0 && (
                   <Badge variant="secondary" className="ml-1">
                     {activeFilterCount}
@@ -480,7 +475,11 @@ export default function Parks() {
                 )}
               </Button>
 
-              <Tabs value={viewMode} onValueChange={(v) => setViewMode(v as 'grid' | 'list')} className="hidden md:inline-flex">
+              <Tabs
+                value={viewMode}
+                onValueChange={(v) => setViewMode(v as "grid" | "list")}
+                className="hidden md:inline-flex"
+              >
                 <TabsList>
                   <TabsTrigger value="grid">
                     <Grid3X3 className="w-4 h-4" />
@@ -499,11 +498,7 @@ export default function Parks() {
               <CollapsibleContent>
                 <Card>
                   <CardContent className="pt-6">
-                    <ParkFilters 
-                      filters={filters}
-                      onFiltersChange={setFilters}
-                      parks={parks}
-                    />
+                    <ParkFilters filters={filters} onFiltersChange={setFilters} parks={parks} />
                   </CardContent>
                 </Card>
               </CollapsibleContent>
@@ -520,21 +515,12 @@ export default function Parks() {
                 <Card>
                   <CardHeader className="flex flex-row items-center justify-between pb-2">
                     <CardTitle className="text-base">Filters</CardTitle>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      onClick={() => setSidebarCollapsed(true)}
-                      title="Hide filters"
-                    >
+                    <Button variant="ghost" size="sm" onClick={() => setSidebarCollapsed(true)} title="Hide filters">
                       <PanelLeftClose className="w-4 h-4" />
                     </Button>
                   </CardHeader>
                   <CardContent>
-                    <ParkFilters 
-                      filters={filters}
-                      onFiltersChange={setFilters}
-                      parks={parks}
-                    />
+                    <ParkFilters filters={filters} onFiltersChange={setFilters} parks={parks} />
                   </CardContent>
                 </Card>
               </div>
@@ -545,17 +531,12 @@ export default function Parks() {
           <div className="flex-1 min-w-0">
             {filteredAndSortedParks.length > 0 ? (
               <div>
-                {viewMode === 'grid' ? (
-                  <ParkGridView 
-                    parks={paginatedParks} 
-                  />
+                {viewMode === "grid" ? (
+                  <ParkGridView parks={paginatedParks} />
                 ) : (
-                  <ParkListView 
-                    parks={paginatedParks} 
-                    onParkClick={handleParkClick}
-                  />
+                  <ParkListView parks={paginatedParks} onParkClick={handleParkClick} />
                 )}
-                
+
                 <Pagination
                   currentPage={currentPage}
                   totalPages={totalPages}
@@ -567,9 +548,7 @@ export default function Parks() {
               <div className="text-center py-12">
                 <FerrisWheel className="w-16 h-16 mb-4 opacity-50 mx-auto" />
                 <h3 className="text-xl font-semibold mb-2">No parks found</h3>
-                <p className="text-muted-foreground mb-4">
-                  Try adjusting your search terms or filters
-                </p>
+                <p className="text-muted-foreground mb-4">Try adjusting your search terms or filters</p>
                 <Button onClick={clearAllFilters} variant="outline">
                   Clear all filters
                 </Button>
@@ -587,14 +566,10 @@ export default function Parks() {
                 Add a new park to the database. Your submission will be reviewed before being published.
               </DialogDescription>
             </DialogHeader>
-            <ParkForm
-              onSubmit={handleParkSubmit}
-              onCancel={() => setIsAddParkModalOpen(false)}
-              isEditing={false}
-            />
+            <ParkForm onSubmit={handleParkSubmit} onCancel={() => setIsAddParkModalOpen(false)} isEditing={false} />
           </DialogContent>
         </Dialog>
       </main>
     </div>
   );
-}
\ No newline at end of file
+}