diff --git a/frontend/features/AdminBookingCalendar/AdminBookingCalendarComponent.spec.tsx b/frontend/features/AdminBookingCalendar/AdminBookingCalendarComponent.spec.tsx
new file mode 100644
index 00000000..ded844b7
--- /dev/null
+++ b/frontend/features/AdminBookingCalendar/AdminBookingCalendarComponent.spec.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { AdminBookingCalendarComponent } from "./AdminBookingCalendarComponent";
+describe("AdminBookingCalendarComponent", () => {
+  it("renders correctly", () => {
+    render(<AdminBookingCalendarComponent />);
+    expect(screen.getByText("Admin Calendar")).toBeDefined();
+  });
+});
diff --git a/frontend/features/AdminBookingCalendar/AdminBookingCalendarComponent.tsx b/frontend/features/AdminBookingCalendar/AdminBookingCalendarComponent.tsx
new file mode 100644
index 00000000..9eb25954
--- /dev/null
+++ b/frontend/features/AdminBookingCalendar/AdminBookingCalendarComponent.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+import { useAdminBookingCalendar } from "./useAdminBookingCalendar";
+export const AdminBookingCalendarComponent: React.FC = () => {
+  const { view, slots, setView } = useAdminBookingCalendar();
+  return (
+    <div className="p-4 border rounded">
+      <div className="flex justify-between mb-4">
+        <h2 className="text-xl font-bold">Admin Calendar</h2>
+        <div>
+          <button
+            onClick={() => setView("day")}
+            className={`px-3 py-1 ${view === "day" ? "bg-blue-500 text-white" : "bg-gray-200"}`}
+          >
+            Day
+          </button>
+          <button
+            onClick={() => setView("week")}
+            className={`px-3 py-1 ml-2 ${view === "week" ? "bg-blue-500 text-white" : "bg-gray-200"}`}
+          >
+            Week
+          </button>
+        </div>
+      </div>
+      <div className="grid grid-cols-7 gap-2">
+        {/* Render slots based on view */}
+        <div className="col-span-7 text-center p-8 bg-gray-50">
+          No bookings for this {view}
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/frontend/features/AdminBookingCalendar/AdminBookingCalendarStore.ts b/frontend/features/AdminBookingCalendar/AdminBookingCalendarStore.ts
new file mode 100644
index 00000000..0eaaba4f
--- /dev/null
+++ b/frontend/features/AdminBookingCalendar/AdminBookingCalendarStore.ts
@@ -0,0 +1,8 @@
+import { createContext } from "react";
+import { CalendarState, BookingSlot } from "./AdminBookingCalendarTypes";
+export interface CalendarStore extends CalendarState {
+  setView: (view: "day" | "week") => void;
+}
+export const AdminBookingCalendarContext = createContext<
+  CalendarStore | undefined
+>(undefined);
diff --git a/frontend/features/AdminBookingCalendar/AdminBookingCalendarTypes.ts b/frontend/features/AdminBookingCalendar/AdminBookingCalendarTypes.ts
new file mode 100644
index 00000000..d7acc3d6
--- /dev/null
+++ b/frontend/features/AdminBookingCalendar/AdminBookingCalendarTypes.ts
@@ -0,0 +1,10 @@
+export interface BookingSlot {
+  id: string;
+  workspaceId: string;
+  startTime: string;
+  endTime: string;
+}
+export interface CalendarState {
+  view: "day" | "week";
+  slots: BookingSlot[];
+}
diff --git a/frontend/features/AdminBookingCalendar/useAdminBookingCalendar.ts b/frontend/features/AdminBookingCalendar/useAdminBookingCalendar.ts
new file mode 100644
index 00000000..aef1207a
--- /dev/null
+++ b/frontend/features/AdminBookingCalendar/useAdminBookingCalendar.ts
@@ -0,0 +1,7 @@
+import { useState } from "react";
+import { BookingSlot } from "./AdminBookingCalendarTypes";
+export const useAdminBookingCalendar = () => {
+  const [view, setView] = useState<"day" | "week">("week");
+  const [slots] = useState<BookingSlot[]>([]);
+  return { view, slots, setView };
+};