diff --git a/app/admin/events/eventsModel.tsx b/app/admin/events/eventsModel.tsx
new file mode 100644
index 0000000..b32fad6
--- /dev/null
+++ b/app/admin/events/eventsModel.tsx
@@ -0,0 +1,45 @@
+import { Button } from "@/components/ui/button";
+import Modal from "@/components/ui/modal";
+
+export default function EventModal({ showModal, setShowModal } : { showModal: boolean; setShowModal: (value: boolean) => void }) {
+    return (
+        <Modal open={showModal} onClose={() => setShowModal(false)} title="Add New Event">
+				<form>
+					<div className="mb-4">
+						<label className="block text-sm font-semibold mb-1">Event Title</label>
+						<input type="text" className="w-full rounded border px-3 py-2" placeholder="e.g. Intro to Python Workshop" />
+					</div>
+					<div className="mb-4">
+						<label className="block text-sm font-semibold mb-1">Description</label>
+						<textarea className="w-full rounded border px-3 py-2" placeholder="Describe the event goals and requirements..." />
+					</div>
+					<div className="mb-4">
+						<label className="block text-sm font-semibold mb-1">Poster Photo URL</label>
+						<input type="url" className="w-full rounded border px-3 py-2" placeholder="https://example.com/poster.png" />
+					</div>
+					<div className="flex gap-4 mb-4">
+						<div className="flex-1">
+							<label className="block text-sm font-semibold mb-1">Date & Time</label>
+							<input type="text" className="w-full rounded border px-3 py-2" placeholder="mm/dd/yyyy, --:-- --" />
+						</div>
+						<div className="flex-1">
+							<label className="block text-sm font-semibold mb-1">Location</label>
+							<input type="text" className="w-full rounded border px-3 py-2" placeholder="e.g. MC 402 or Zoom Link" />
+						</div>
+					</div>
+					<div className="mb-4">
+						<label className="block text-sm font-semibold mb-1">Recurring</label>
+						<select className="w-full rounded border px-3 py-2">
+							<option>None</option>
+							<option>Weekly</option>
+							<option>Monthly</option>
+						</select>
+					</div>
+					<div className="flex gap-4">
+						<Button variant="primary" type="submit">Create Event</Button>
+						<Button variant="secondary" type="button" onClick={() => setShowModal(false)}>Cancel</Button>
+					</div>
+				</form>
+		</Modal>
+    );
+}
\ No newline at end of file
diff --git a/app/admin/events/page.tsx b/app/admin/events/page.tsx
new file mode 100644
index 0000000..957d799
--- /dev/null
+++ b/app/admin/events/page.tsx
@@ -0,0 +1,173 @@
+"use client";
+
+import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from "@/components/ui/table";
+import { Button } from "@/components/ui/button";
+import EventModal from "./eventsModel";
+import { useEffect, useMemo, useState } from "react";
+import { EventRecord, fetchAllEvents, WithKey } from "@/lib/firebase";
+import { classifyEventsByTiming } from "@/lib/events/classify";
+
+export default function EventsManagementPage() {
+	type EventItem = WithKey<EventRecord>;
+	
+	const [showModal, setShowModal] = useState(false);
+	const [showPastEvents, setShowPastEvents] = useState(false);
+
+	const [events, setEvents] = useState<EventItem[]>([]);
+	const nowTimestamp = Date.now();
+
+	useEffect(() => {
+	let active = true;
+
+	const load = async () => {
+			try {
+			const allEvents = await fetchAllEvents();
+			if (!active) {
+				return;
+			}
+			setEvents(allEvents);
+			} catch {
+			if (!active) {
+				return;
+			}
+			console.error("Error loading events:");
+			}
+		};
+		
+		void load();
+			return () => {
+			active = false;
+		};
+	}, []);
+
+	const { upcoming, recurring, past } = useMemo(
+		() => {
+				let ongoing, upcoming, past;
+				({ ongoing, upcoming, past } = classifyEventsByTiming(events, nowTimestamp));
+
+				upcoming = upcoming.concat(ongoing);
+				let recurring = upcoming.filter(event => event.schedule?.recurrence);
+				upcoming = upcoming.filter(event => !event.schedule?.recurrence);
+			
+
+			return { upcoming, recurring, past };
+		},
+		[events, nowTimestamp]
+	);
+
+	const adaptEventForDisplay = (event: EventItem) => ({
+		title: event.title,
+		date: event.schedule?.startDate,
+		time: event.schedule?.startTime,
+		location: event.location?.split(",")[0],
+	});
+
+	const upcomingEvents = upcoming.map((event) => adaptEventForDisplay(event));
+	const recurringEvents = recurring.map((event) => adaptEventForDisplay(event));
+	const pastEvents = past.map((event) => adaptEventForDisplay(event));
+	
+	return (
+		<div>
+			<h1 className="text-2xl font-bold mb-2">Events Management</h1>
+			<p className="text-neutral-500 mb-6">Plan, coordinate, and review club events</p>
+
+			<div className="flex items-center justify-between mb-6">
+				<Button variant="primary" onClick={() => setShowModal(true)}>+ New Event</Button>
+			</div>
+
+			<div className="mb-10">
+				<h2 className="text-xl font-bold mb-4">Upcoming Events</h2>
+				<Table>
+					<TableHeader>
+						<TableRow>
+							<TableHead>Event Title</TableHead>
+							<TableHead>Date</TableHead>
+							<TableHead>Time</TableHead>
+							<TableHead>Location</TableHead>
+							<TableHead>Actions</TableHead>
+						</TableRow>
+					</TableHeader>
+					<TableBody>
+						{upcomingEvents.map((event, idx) => (
+							<TableRow key={idx}>
+								<TableCell>{event.title}</TableCell>
+								<TableCell>{event.date}</TableCell>
+								<TableCell>{event.time}</TableCell>
+								<TableCell>{event.location}</TableCell>
+								<TableCell>
+									<Button variant="link" size="sm">EDIT</Button>
+								</TableCell>
+							</TableRow>
+						))}
+					</TableBody>
+				</Table>
+			</div>
+
+			<div className="mb-10">
+				<h2 className="text-xl font-bold mb-4">Recurring Events</h2>
+				<Table>
+					<TableHeader>
+						<TableRow>
+							<TableHead>Event Title</TableHead>
+							<TableHead>Date</TableHead>
+							<TableHead>Time</TableHead>
+							<TableHead>Location</TableHead>
+							<TableHead>Actions</TableHead>
+						</TableRow>
+					</TableHeader>
+					<TableBody>
+						{recurringEvents.map((event, idx) => (
+							<TableRow key={idx}>
+								<TableCell>{event.title}</TableCell>
+								<TableCell>{event.date}</TableCell>
+								<TableCell>{event.time}</TableCell>
+								<TableCell>{event.location}</TableCell>
+								<TableCell>
+									<Button variant="link" size="sm">EDIT</Button>
+								</TableCell>
+							</TableRow>
+						))}
+					</TableBody>
+				</Table>
+			</div>
+
+			<div className="mb-10 border-t-2 border-black pt-6">
+				<button 
+					className="flex items-center gap-2 text-xl font-bold mb-4 hover:opacity-80 transition-opacity"
+					onClick={() => setShowPastEvents(!showPastEvents)}
+				>
+					Past Events {showPastEvents ? "▲" : "▼"}
+				</button>
+				
+				{showPastEvents && (
+					<Table>
+						<TableHeader>
+							<TableRow>
+								<TableHead>Event Title</TableHead>
+								<TableHead>Date</TableHead>
+								<TableHead>Time</TableHead>
+								<TableHead>Location</TableHead>
+								<TableHead>Actions</TableHead>
+							</TableRow>
+						</TableHeader>
+						<TableBody>
+							{pastEvents.map((event, idx) => (
+								<TableRow key={idx}>
+									<TableCell>{event.title}</TableCell>
+									<TableCell>{event.date}</TableCell>
+									<TableCell>{event.time}</TableCell>
+									<TableCell>{event.location}</TableCell>
+									<TableCell>
+										<Button variant="link" size="sm">EDIT</Button>
+									</TableCell>
+								</TableRow>
+							))}
+						</TableBody>
+					</Table>
+				)}
+			</div>
+
+			{showModal && <EventModal showModal={showModal} setShowModal={setShowModal} />}
+		</div>
+	);
+}
\ No newline at end of file
diff --git a/app/admin/execs/page.tsx b/app/admin/execs/page.tsx
new file mode 100644
index 0000000..7671856
--- /dev/null
+++ b/app/admin/execs/page.tsx
@@ -0,0 +1,193 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import Modal from "@/components/ui/modal";
+import { useEffect, useState } from "react";
+import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from "@/components/ui/table";
+import { ExecRecord, fetchCurrentExecs, fetchPreviousExecs, WithKey } from "@/lib/firebase";
+
+type TeamMember = WithKey<ExecRecord>;
+
+const UNKNOWN_ROLE_PRIORITY = Number.MAX_SAFE_INTEGER;
+
+const ROLE_PRIORITY: Record<string, number> = {
+  president: 1,
+  "vice president": 2,
+  "co-president": 3,
+  treasurer: 4,
+  executive: 5,
+};
+
+const getRolePriority = (title?: string): number => {
+  const normalizedTitle = title?.trim().toLowerCase() ?? "";
+  return ROLE_PRIORITY[normalizedTitle] ?? UNKNOWN_ROLE_PRIORITY;
+};
+
+const sortCurrentExecsByRoleThenDatabaseOrder = (members: TeamMember[]): TeamMember[] => {
+  const orderByKey = new Map<string, number>();
+  members.forEach((member, index) => {
+    orderByKey.set(member.$key, index);
+  });
+
+  return [...members].sort((a, b) => {
+    const byRole = getRolePriority(a.title) - getRolePriority(b.title);
+    if (byRole !== 0) {
+      return byRole;
+    }
+
+    const aOrder = orderByKey.get(a.$key) ?? 0;
+    const bOrder = orderByKey.get(b.$key) ?? 0;
+    return aOrder - bOrder;
+  });
+};
+
+export default function ExecutivesManagementPage() {
+	  const [currentExecs, setCurrentExecs] = useState<TeamMember[]>([]);
+	  const [previousExecs, setPreviousExecs] = useState<TeamMember[]>([]);
+	  const [showModal, setShowModal] = useState(false);
+	  const [showPast, setShowPast] = useState(false);
+	
+	  useEffect(() => {
+		let active = true;
+	
+		const loadTeam = async () => {
+	
+		  try {
+			const [current, previous] = await Promise.all([
+			  fetchCurrentExecs(),
+			  fetchPreviousExecs(),
+			]);
+	
+			if (!active) {
+			  return;
+			}
+	
+			setCurrentExecs(sortCurrentExecsByRoleThenDatabaseOrder(current));
+			setPreviousExecs(previous);
+		  } catch {
+			if (!active) {
+			  return;
+			}
+			console.log("Could not load team members right now.");
+		  }
+		};
+	
+		void loadTeam();
+	
+		return () => {
+		  active = false;
+		};
+	  }, []);
+	
+	
+	return (
+		<>
+			<div>
+				<h1 className="text-2xl font-bold mb-2">Executive Management</h1>
+				<p className="text-neutral-500 mb-6">Central dashboard to oversee the executive team, update roles, and add new executive members for the Brock Computer Science Club.</p>
+
+				<div className="flex items-center gap-4 mb-6">
+					<Button variant="primary" onClick={() => setShowModal(true)}>
+						Add Executive
+					</Button>
+				</div>
+
+				<div className="mb-10">
+					<h2 className="text-lg font-bold mb-4">Current Executive</h2>
+					<Table>
+						<TableHeader>
+							<TableRow>
+								<TableHead>Name</TableHead>
+								<TableHead>Role</TableHead>
+								<TableHead>Edit</TableHead>
+							</TableRow>
+						</TableHeader>
+						<TableBody>
+							{currentExecs.map((exec, idx) => (
+								<TableRow key={idx}>
+									<TableCell>{exec.name}</TableCell>
+									<TableCell>{exec.title}</TableCell>
+									<TableCell>
+										<Button variant="link" size="sm" onClick={() => setShowModal(true)}>EDIT</Button>
+									</TableCell>
+								</TableRow>
+							))}
+						</TableBody>
+					</Table>
+					<div className="mt-2 text-right text-xs text-neutral-500 font-semibold">{currentExecs.length} active members</div>
+				</div>
+
+				<div className="mb-10 border-t-2 border-black pt-6">
+					<button 
+						className="flex items-center gap-2 text-xl font-bold mb-4 hover:opacity-80 transition-opacity"
+						onClick={() => setShowPast(!showPast)}
+					>
+						{showPast ? "Hide" : "Show"} Past Executives {showPast ? "▲" : "▼"}
+					</button>
+					{showPast && (
+						<div className="mt-4">
+							<h2 className="text-lg font-bold mb-4">Past Executives</h2>
+							<Table>
+								<TableHeader>
+									<TableRow>
+										<TableHead>Name</TableHead>
+										<TableHead>Role</TableHead>
+										<TableHead>Edit</TableHead>
+									</TableRow>
+								</TableHeader>
+								<TableBody>
+									{previousExecs.map((exec, idx) => (
+										<TableRow key={idx}>
+											<TableCell>{exec.name}</TableCell>
+											<TableCell>{exec.title}</TableCell>
+											<TableCell>
+												<Button variant="link" size="sm" onClick={() => setShowModal(true)}>EDIT</Button>
+											</TableCell>
+										</TableRow>
+									))}
+								</TableBody>
+							</Table>
+							<div className="mt-2 text-right text-xs text-neutral-500 font-semibold">{previousExecs.length} past members</div>
+						</div>
+					)}
+				</div>
+			</div>
+			<Modal open={showModal} onClose={() => setShowModal(false)} title="Edit Executive">
+				<form>
+					<div className="mb-4">
+						<label className="block text-sm font-semibold mb-1">Full Name</label>
+						<input type="text" className="w-full rounded border px-3 py-2" placeholder="John Doe" />
+					</div>
+					<div className="mb-4">
+						<label className="block text-sm font-semibold mb-1">Role / Title</label>
+						<select className="w-full rounded border px-3 py-2">
+							<option>Select Role</option>
+							<option>President</option>
+							<option>Vice President</option>
+							<option>Treasurer</option>
+							<option>Secretary</option>
+						</select>
+					</div>
+					<div className="mb-4">
+						<label className="block text-sm font-semibold mb-1">Email</label>
+						<input type="email" className="w-full rounded border px-3 py-2" placeholder="edu@brock.ca" />
+					</div>
+					<div className="mb-4">
+						<label className="block text-sm font-semibold mb-1">Social URL</label>
+						<input type="text" className="w-full rounded border px-3 py-2" placeholder="Linkedin or Portfolio" />
+					</div>
+					<div className="mb-4">
+						<label className="block text-sm font-semibold mb-1">Profile Photo URL</label>
+						<input type="url" className="w-full rounded border px-3 py-2" placeholder="https://example.com/photo.png" />
+					</div>
+					<div className="flex gap-4">
+						<Button variant="primary" type="submit">Save Executive Member</Button>
+						<Button variant="secondary" type="button" onClick={() => setShowModal(false)}>
+							Cancel
+						</Button>
+					</div>
+				</form>
+			</Modal>
+		</>
+	);
+}
\ No newline at end of file
diff --git a/app/admin/layout.tsx b/app/admin/layout.tsx
new file mode 100644
index 0000000..9ea9dad
--- /dev/null
+++ b/app/admin/layout.tsx
@@ -0,0 +1,78 @@
+"use client";
+
+import { getFirebaseClient } from "@/lib/firebase";
+import { GoogleAuthProvider, onAuthStateChanged, signInWithPopup } from "firebase/auth";
+import { useEffect, useState } from "react";
+import { useRouter, usePathname } from "next/navigation";
+import Link from "next/link";
+
+const adminTabs = [
+  { name: "Dashboard", href: "/admin" },
+  { name: "Events Management", href: "/admin/events" },
+  { name: "Executives Management", href: "/admin/execs" },
+];
+
+export default function AdminLayout({ children }: { children: React.ReactNode }) {
+  const { auth } = getFirebaseClient();
+  const router = useRouter();
+  const pathname = usePathname();
+  const [loading, setLoading] = useState(true);
+
+  // Authentication logic: Redirect to login if not authenticated, otherwise show admin layout
+  useEffect(() => {
+    const unsubscribe = onAuthStateChanged(auth, async (user) => {
+      if (!user) {
+        try {
+          const provider = new GoogleAuthProvider();
+          await signInWithPopup(auth, provider);
+        } catch (error) {
+          console.error("Login failed:", error);
+          router.push("/");
+        }
+      } else {
+        setLoading(false);
+      }
+    });
+    return () => unsubscribe();
+  }, [auth, router]);
+
+  if (loading) {
+    return <div className="py-32 text-center text-lg font-bold">Authenticating...</div>;
+  }
+
+  // Admin layout with navigation tabs and content area
+  return (
+    <div className="pt-8">
+      <div className="mx-auto w-full max-w-[1060px] px-5">
+        <div className="flex items-center justify-between mb-8">
+          <nav className="flex gap-2">
+            {adminTabs.map((tab) => {
+              const isActive =
+                tab.href === "/admin"
+                  ? pathname === "/admin"
+                  : pathname.startsWith(tab.href);
+              return (
+                <Link
+                  key={tab.name}
+                  href={tab.href}
+                  className={`px-4 py-2 rounded-[12px] font-semibold border-2 border-transparent transition-colors ${
+                    isActive ? "border-[#9A4440] text-[#9A4440] bg-[#fff1f0]" : "text-black hover:bg-neutral-100"
+                  }`}
+                >
+                  {tab.name}
+                </Link>
+              );
+            })}
+          </nav>
+          <div className="flex items-center gap-3">
+            {/* TODO: Add signout button */}
+            {/* Optionally add sign out button here */}
+          </div>
+        </div>
+        <div className="p-8">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/admin/page.tsx b/app/admin/page.tsx
index 2f0878f..cd54915 100644
--- a/app/admin/page.tsx
+++ b/app/admin/page.tsx
@@ -1,40 +1,98 @@
 "use client";
 
-import { getFirebaseClient } from "@/lib/firebase";
-import {
-  GoogleAuthProvider,
-  onAuthStateChanged,
-  signInWithPopup,
-} from "firebase/auth";
+import { Button } from "@/components/ui/button";
+import Card from "@/components/ui/card";
+import { EventCard } from "../events/components/event-card";
+import { EventRecord, fetchFutureEvents, WithKey } from "@/lib/firebase";
+import Link from "next/link";
 import { useEffect, useState } from "react";
-import { useRouter } from "next/navigation";
 
 export default function AdminPage() {
-  const { auth } = getFirebaseClient();
-  const router = useRouter();
-  const [loading, setLoading] = useState(true);
+
+  type EventItem = WithKey<EventRecord>;
+
+  const [futureEvents, setFutureEvents] = useState<EventItem[]>([]);
+  const nowTimestamp = Date.now();
 
   useEffect(() => {
-    const unsubscribe = onAuthStateChanged(auth, async (user) => {
-        if (!user) {
-            try {
-                const provider = new GoogleAuthProvider();
-                await signInWithPopup(auth, provider);
-            } catch (error) {
-            console.error("Login failed:", error);
-            router.push("/"); // if login fails
-            }
-        } else {
-            setLoading(false);
+  let active = true;
+
+  const load = async () => {
+      try {
+        const futureEventsRaw = await fetchFutureEvents();
+        if (!active) {
+          return;
+        }
+        setFutureEvents(futureEventsRaw);
+        } catch {
+        if (!active) {
+          return;
         }
-    });
+        console.error("Error loading events:");
+        }
+      };
+      
+      void load();
+        return () => {
+        active = false;
+      };
+  }, []);
+
+  const adaptEventForDisplay = (event: EventItem) => ({
+    title: event.title,
+    date: event.schedule?.startDate,
+    time: event.schedule?.startTime,
+    location: event.location?.split(",")[0],  
+    description: event.description,
+    image: event.image,
+  });
+
+  const events = futureEvents.map(adaptEventForDisplay);
 
-    return () => unsubscribe();
-  }, [auth, router]);
+  return (
+    <div>
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold mb-2">Admin Dashboard</h1>
+          <p className="text-neutral-500 mb-6">Welcome back!</p>
 
-  if (loading) {
-    return <p>Authenticating...</p>;
-  }
+          <div className="grid grid-cols-1 md:grid-cols-2 mb-8 gap-6">
+            <Card>
+              <div className="flex flex-col items-start w-full">
+                <span className="text-xs font-semibold text-neutral-500 mb-2">WEBSITE VISITS</span>
+                <span className="text-2xl font-bold mb-1">2.4k</span>
+                <span className="text-green-600 text-sm font-medium">↑ +12% this month</span>
+              </div>
+            </Card>
+            <div className="flex flex-col gap-4 mb-10 h-full justify-center">
+            <Button asChild variant="primary" className="w-full md:w-auto">
+              <Link href="/admin/events">+ Create New Event</Link>
+            </Button>
+            <Button asChild variant="secondary" className="w-full md:w-auto">
+              <Link href="/admin/execs">+ Add New Executive</Link>
+            </Button>
+          </div>
+        </div>
+      </div>
 
-  return <h1>Admin Dashboard</h1>;
+      <div>
+        <h1 className="text-3xl font-bold mb-2">Upcoming Events</h1>
+        <p className="text-neutral-500 mb-6">Click to edit an event</p>
+        {events.length === 0 ? (
+          <div className="text-center text-neutral-500 py-20">No upcoming events found.</div>
+        ) : (
+          <div className="grid gap-6">
+            {futureEvents.map((event, index) => (
+               <EventCard
+                event={event}
+                key={event.$key}
+                nowTimestamp={nowTimestamp}
+                variant="upcoming"
+                displayButton={false}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
 }
diff --git a/app/events/components/event-card.tsx b/app/events/components/event-card.tsx
index 6644083..a360718 100644
--- a/app/events/components/event-card.tsx
+++ b/app/events/components/event-card.tsx
@@ -67,10 +67,12 @@ export function EventCard({
   event,
   variant,
   nowTimestamp,
+  displayButton = true,
 }: {
   event: EventItem;
   variant: EventVariant;
   nowTimestamp?: number;
+  displayButton?: boolean;
 }) {
   const hasImage = Boolean(event.image?.url);
   const imageSrc = event.image?.url || EMPTY_IMAGE;
@@ -222,7 +224,7 @@ export function EventCard({
               </Badge>
             </div>
 
-            <div
+            {displayButton && <div
               className={
                 variant === "upcoming"
                   ? "mt-2.5"
@@ -236,7 +238,7 @@ export function EventCard({
                   {variant === "ongoing" ? "Happening Now" : "Learn More"}
                 </Link>
               </Button>
-            </div>
+            </div>}
           </div>
         )}
       </div>
diff --git a/components/ui/modal.tsx b/components/ui/modal.tsx
new file mode 100644
index 0000000..f736975
--- /dev/null
+++ b/components/ui/modal.tsx
@@ -0,0 +1,25 @@
+export default function Modal({ open, onClose, title, children }: {
+  open: boolean;
+  onClose: () => void;
+  title?: string;
+  children: React.ReactNode;
+}) {
+
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-1 flex items-center justify-center bg-black/30">
+      <div className="bg-white rounded-2xl border-2 border-black shadow-[4px_4px_0px_#9A4440] p-6 max-w-xl w-full max-h-[80vh] overflow-y-auto relative">
+        {title && <h2 className="text-lg font-bold mb-4">{title}</h2>}
+        <button
+          className="absolute top-4 right-4 text-black font-bold text-xl border-2 border-black rounded-full w-8 h-8 flex items-center justify-center bg-neutral-100 hover:bg-neutral-200"
+          onClick={() => onClose()}
+          aria-label="Close modal"
+        >
+          ×
+        </button>
+        <>{children}</>
+      </div>
+    </div>
+  );
+}
diff --git a/lib/firebase/realtime.ts b/lib/firebase/realtime.ts
index be99000..6963105 100644
--- a/lib/firebase/realtime.ts
+++ b/lib/firebase/realtime.ts
@@ -128,4 +128,4 @@ export const fetchAllDscCards = async (): Promise<WithKey<DscCardRecord>[]> =>
   fetchList<DscCardRecord>('/dsc');
 
 export const fetchAllFoodItems = async (): Promise<WithKey<FoodRecord>[]> =>
-  fetchList<FoodRecord>('/food', [orderByChild('section')]);
+  fetchList<FoodRecord>('/food', [orderByChild('section')]);
\ No newline at end of file