diff --git a/src/app/api/signup/route.ts b/src/app/api/signup/route.ts
index 9e4be42..bf7322f 100644
--- a/src/app/api/signup/route.ts
+++ b/src/app/api/signup/route.ts
@@ -130,6 +130,20 @@ export async function POST(request: Request): Promise<NextResponse> {
       }
     }
 
+    const existingSignup = await Signup.findOne({
+      shiftId: body.shiftId,
+      profileId: body.profileId,
+    });
+
+    if (existingSignup) {
+      return NextResponse.json(
+        {
+          message: "You are already signed up for this shift.",
+        },
+        { status: 409 },
+      );
+    }
+
     const newSignup = new Signup({
       signupId: crypto.randomUUID(),
       shiftId: body.shiftId,
diff --git a/src/app/day-details/[dayId]/page.tsx b/src/app/day-details/[dayId]/page.tsx
new file mode 100644
index 0000000..bfd70c3
--- /dev/null
+++ b/src/app/day-details/[dayId]/page.tsx
@@ -0,0 +1,296 @@
+"use client";
+
+import { useEffect, useState, useMemo } from "react";
+import { useParams } from "next/navigation";
+
+import GreyNavbar from "@/components/GreyNavbar";
+import ShiftDetails from "@/components/shift-details/ShiftDetails";
+import { authClient } from "@/lib/auth-client";
+import styles from "@/styles/ShiftDetails.module.css";
+
+import { Roboto_Slab } from "next/font/google";
+import { Inter } from "next/font/google";
+
+// allow interchangeability between the two fonts
+const roboto = Roboto_Slab({
+  subsets: ["latin"],
+});
+
+const inter = Inter({
+  subsets: ["latin"],
+});
+
+type Day = {
+  name: string;
+  dayOfWeek: string;
+  date: string;
+  startTime: string;
+  endTime: string;
+  programId: string;
+  dayId: string;
+  private: boolean;
+  location?: string;
+  description?: string;
+};
+
+type Shift = {
+  name: string;
+  description: string;
+  date: string;
+  dayOfWeek: string;
+  startTime: string;
+  endTime: string;
+  totalSlots: number;
+  location: string;
+  address?: string;
+  locationInfo?: string;
+  byoDescription?: string;
+  mapLink?: string;
+  shiftId: string;
+  dayId: string;
+  visibility: "public" | "invited";
+  invited: string[];
+};
+
+type ApiSignup = {
+  signupId: string;
+  shiftId: string;
+  profileId: string;
+  waiver: boolean;
+  timestamp: string;
+};
+
+export default function DayDetailsPage() {
+  const params = useParams<{ dayId: string }>();
+  const dayId = params.dayId;
+
+  const { data: session, isPending: loadingSession } = authClient.useSession();
+  const userId = session?.user?.id;
+
+  const [day, setDay] = useState<Day | null>(null);
+  const [shifts, setShifts] = useState<Shift[]>([]);
+  const [signups, setSignups] = useState<ApiSignup[]>([]);
+  const [allSignups, setAllSignups] = useState<ApiSignup[]>([]);
+  const [pendingSignupIds, setPendingSignupIds] = useState<Set<string>>(new Set());
+  const [loadingDetails, setLoadingDetails] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [errorCount, setErrorCount] = useState(0);
+
+  useEffect(() => {
+    if (loadingSession) {
+      return;
+    }
+
+    if (!userId) {
+      showError("You must be signed in to view shift details.");
+      setLoadingDetails(false);
+      return;
+    }
+
+    async function loadDayDetails() {
+      try {
+        setError(null);
+        setLoadingDetails(true);
+
+        const [dayRes, shiftsRes, signupsRes, allSignupsRes] = await Promise.all([
+          fetch(`/api/day/${dayId}`),
+          fetch("/api/shift"),
+          fetch(`/api/signup?profileId=${userId}`),
+          fetch("/api/signup"),
+        ]);
+
+        if (!dayRes.ok) {
+          throw new Error("Failed to load day details.");
+        }
+
+        if (!shiftsRes.ok) {
+          throw new Error("Failed to load shifts.");
+        }
+
+        if (!signupsRes.ok) {
+          throw new Error("Failed to load registered shifts.");
+        }
+
+        if (!allSignupsRes.ok) {
+          throw new Error("Failed to load shift signup counts.");
+        }
+
+        const dayJson: { day: Day } = await dayRes.json();
+        const shiftsJson: { data: Shift[] } = await shiftsRes.json();
+        const signupsJson: { signups: ApiSignup[] } = await signupsRes.json();
+        const allSignupsJson: { signups: ApiSignup[] } = await allSignupsRes.json();
+
+        setDay(dayJson.day);
+        setShifts(shiftsJson.data.filter((shift) => shift.dayId === dayId));
+        setSignups(signupsJson.signups);
+        setAllSignups(allSignupsJson.signups);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Something went wrong loading shift details.");
+      } finally {
+        setLoadingDetails(false);
+      }
+    }
+
+    loadDayDetails();
+  }, [dayId, loadingSession, userId]);
+
+  // scroll to top of page when error banner is triggered
+  // (for errors that use showError)
+  useEffect(() => {
+    if (error) {
+      window.scrollTo({
+        top: 0,
+        behavior: "smooth",
+      });
+    }
+  }, [error, errorCount]);
+
+  const registeredShiftIds = useMemo(() => {
+    return new Set(signups.map((signup) => signup.shiftId));
+  }, [signups]);
+
+  // for calculating and displaying how many spots available
+  const shiftSignupCounts = useMemo(() => {
+    const counts = new Map<string, number>();
+
+    allSignups.forEach((signup) => {
+      counts.set(signup.shiftId, (counts.get(signup.shiftId) ?? 0) + 1);
+    });
+
+    return counts;
+  }, [allSignups]);
+
+  function showError(message: string) {
+    setError(message);
+    setErrorCount((current) => current + 1);
+  }
+
+  // signup handler
+  async function handleSignUp(shiftIds: string[]) {
+    if (!userId) {
+      setError("You must be signed in to sign up for a shift.");
+      return;
+    }
+
+    const newShiftIds = shiftIds.filter(
+      (shiftId) => !registeredShiftIds.has(shiftId) && !pendingSignupIds.has(shiftId),
+    );
+
+    if (newShiftIds.length === 0) {
+      showError("You are already signed up for the selected shift(s).");
+      return;
+    }
+
+    setPendingSignupIds((current) => {
+      const next = new Set(current);
+
+      for (const shiftId of newShiftIds) {
+        next.add(shiftId);
+      }
+
+      return next;
+    });
+
+    try {
+      setError(null);
+
+      const signupResponses = await Promise.all(
+        newShiftIds.map((shiftId) =>
+          fetch("/api/signup", {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              shiftId,
+              profileId: userId,
+              waiver: true,
+            }),
+          }),
+        ),
+      );
+
+      const failedResponse = signupResponses.find((res) => !res.ok);
+
+      if (failedResponse) {
+        const errorData = await failedResponse.json().catch(() => null);
+        throw new Error(errorData?.message ?? "Failed to sign up for shift.");
+      }
+
+      const signupJsons: { signup: ApiSignup }[] = await Promise.all(signupResponses.map((res) => res.json()));
+
+      setSignups((current) => {
+        const existingShiftIds = new Set(current.map((signup) => signup.shiftId));
+
+        const newSignups = signupJsons
+          .map((json) => json.signup)
+          .filter((signup) => !existingShiftIds.has(signup.shiftId));
+
+        return [...current, ...newSignups];
+      });
+
+      // make spots available instantly calculate
+      setAllSignups((current) => {
+        const existingSignupIds = new Set(current.map((signup) => signup.signupId));
+
+        const newSignups = signupJsons
+          .map((json) => json.signup)
+          .filter((signup) => !existingSignupIds.has(signup.signupId));
+
+        return [...current, ...newSignups];
+      });
+    } catch (err) {
+      showError(err instanceof Error ? err.message : "Something went wrong signing up.");
+    } finally {
+      setPendingSignupIds((current) => {
+        const next = new Set(current);
+
+        for (const shiftId of newShiftIds) {
+          next.delete(shiftId);
+        }
+
+        return next;
+      });
+    }
+  }
+
+  return (
+    <div className={inter.className}>
+      {error && (
+        <div className={styles.errorBanner} role="alert">
+          {error}
+        </div>
+      )}
+
+      {loadingDetails || loadingSession ? (
+        <main className={styles.page}>
+          <GreyNavbar />
+
+          <div className={styles.content}>
+            <p className={styles.statusMsg} role="status">
+              Loading shift details...
+            </p>
+          </div>
+        </main>
+      ) : day ? (
+        <ShiftDetails
+          dayId={dayId}
+          day={day}
+          shifts={shifts}
+          registeredShiftIds={registeredShiftIds}
+          pendingSignupIds={pendingSignupIds}
+          shiftSignupCounts={shiftSignupCounts}
+          onSignUp={handleSignUp}
+        />
+      ) : (
+        <main className={styles.page}>
+          <GreyNavbar />
+
+          <div className={styles.content}>
+            <p className={styles.statusMsg}>No day details available.</p>
+          </div>
+        </main>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/ProgramDetail.tsx b/src/components/ProgramDetail.tsx
index 4743e74..3b5cb95 100644
--- a/src/components/ProgramDetail.tsx
+++ b/src/components/ProgramDetail.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Link from "next/link";
 import { useEffect, useState } from "react";
 import styles from "@/styles/ProgramDetail.module.css";
 
@@ -75,7 +76,11 @@ function CalendarIcon() {
 
 function DayCard({ day }: { day: Day }) {
   return (
-    <div className={styles.dayCard}>
+    <Link
+      href={`/day-details/${encodeURIComponent(day.dayId)}`}
+      className={styles.dayCard}
+      aria-label={`View details for ${day.name}`}
+    >
       <div className={styles.dayCardHeader}>
         <span className={styles.dayOfWeek}>{day.dayOfWeek}</span>
         <span className={styles.date}>{formatDate(day.date)}</span>
@@ -87,7 +92,7 @@ function DayCard({ day }: { day: Day }) {
           {day.startTime} - {day.endTime}
         </span>
       </div>
-    </div>
+    </Link>
   );
 }
 
diff --git a/src/components/shift-details/ShiftDetails.tsx b/src/components/shift-details/ShiftDetails.tsx
new file mode 100644
index 0000000..51a2d7b
--- /dev/null
+++ b/src/components/shift-details/ShiftDetails.tsx
@@ -0,0 +1,352 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import Image from "next/image";
+import { Calendar, ChevronDown, ChevronUp, Clock, Mail, MapPin, Phone, UserRound } from "lucide-react";
+import GreyNavbar from "@/components/GreyNavbar";
+import styles from "@/styles/ShiftDetails.module.css";
+import { authClient } from "@/lib/auth-client";
+
+import { toGoogleMapsEmbed } from "@/components/shift-card/ShiftCard";
+
+import { Roboto_Slab } from "next/font/google";
+import { Inter } from "next/font/google";
+
+// allow interchangeability between the two fonts
+const roboto = Roboto_Slab({
+  subsets: ["latin"],
+});
+
+const inter = Inter({
+  subsets: ["latin"],
+});
+
+// TODO: remove when ready
+const mockDay = {
+  title: "Day 1 · Santa Cruz Food Runner",
+  heroImage: "/op_surf_logo_no_bg.png",
+  date: "March 22, 2026",
+  dayOfWeek: "Sunday",
+  location: "West Cliff Drive, Santa Cruz, CA, USA",
+  description:
+    "Our week-long program is an epic, life-changing adventure for our military and veterans. Bringing our participants directly to our programs within supportive coastal communities and exposing them to the healing power of the ocean. During this all-inclusive rehabilitative program, large steps of healing occur for injured military men and women from all over the nation – including addressing deep grief by honoring fallen brothers and sisters, learning to build trust with new people, and accomplishing goals. Your involvement helps make this possible. Every volunteer, every act of service, and every smile contributes to the powerful impact Operation Surf has on the lives of those who have sacrificed so much for our country.",
+};
+
+type Day = {
+  name: string;
+  dayOfWeek: string;
+  date: string;
+  startTime: string;
+  endTime: string;
+  programId: string;
+  dayId: string;
+  private: boolean;
+  location?: string;
+  description?: string;
+};
+
+type Shift = {
+  name: string;
+  description: string;
+  date: string;
+  dayOfWeek: string;
+  startTime: string;
+  endTime: string;
+  totalSlots: number;
+  location: string;
+  locationInfo?: string;
+  address?: string;
+  directions?: string;
+  mapLink?: string;
+  shiftId: string;
+  dayId: string;
+  visibility: "public" | "invited";
+  invited: string[];
+  byoDescription?: string;
+};
+
+type ShiftDetailsProps = {
+  dayId: string;
+  day: Day;
+  shifts: Shift[];
+  registeredShiftIds: Set<string>;
+  pendingSignupIds: Set<string>;
+  onSignUp: (shiftIds: string[]) => void;
+  shiftSignupCounts: Map<string, number>;
+};
+
+function formatShiftDate(date: string) {
+  const newDate = new Date(date);
+
+  return newDate.toLocaleDateString("en-US", {
+    timeZone: "UTC",
+    weekday: "long",
+    month: "long",
+    day: "numeric",
+    year: "numeric",
+  });
+}
+
+export default function ShiftDetails({
+  dayId,
+  day,
+  shifts,
+  registeredShiftIds,
+  pendingSignupIds,
+  shiftSignupCounts,
+  onSignUp,
+}: ShiftDetailsProps) {
+  const [openShiftId, setOpenShiftId] = useState<string | null>(shifts[0]?.shiftId ?? null);
+  const [selectedShiftIds, setSelectedShiftIds] = useState<Set<string>>(new Set());
+
+  useEffect(() => {
+    setSelectedShiftIds((current) => {
+      const next = new Set(current);
+
+      registeredShiftIds.forEach((shiftId) => {
+        next.delete(shiftId);
+      });
+
+      return next;
+    });
+  }, [registeredShiftIds]);
+
+  // getting day info
+  const dayTitle = day.name;
+  const dayDescriptionMissing = !day.description;
+
+  // for auth
+  const { data: session, isPending: loadingSession } = authClient.useSession();
+  const userId = session?.user?.id;
+  const signInError = !loadingSession && !userId ? "You must be signed in to sign up for a shift." : null;
+
+  // visual for pending sign ups
+  const selectedShiftIdsArray = Array.from(selectedShiftIds);
+  const selectedShiftIsPending = selectedShiftIdsArray.some((shiftId) => pendingSignupIds.has(shiftId));
+
+  return (
+    <main className={styles.page}>
+      <div className={inter.className}>
+        <GreyNavbar />
+
+        <section className={styles.hero} aria-label="Shift details banner">
+          <Image src="/hero-img.png" alt="" fill priority className={styles.heroBg} />
+          <div className={styles.heroOverlay} />
+
+          <div className={styles.heroContent}>
+            <h1 className={styles.heroTitle}>Shift Details</h1>
+          </div>
+        </section>
+
+        <div className={styles.content}>
+          <section className={styles.dayHeader} aria-labelledby="day-title">
+            <h2 id="day-title" className={styles.dayTitle}>
+              {dayTitle}
+            </h2>
+
+            <div className={styles.dayMeta}>
+              <span className={styles.metaItem}>
+                <Calendar size={15} aria-hidden="true" />
+                {formatShiftDate(day.date)}
+              </span>
+
+              <span>·</span>
+
+              <span>{day.dayOfWeek}</span>
+
+              <span className={styles.metaItem}>
+                <MapPin size={15} aria-hidden="true" />
+                {shifts[0]?.location || "Location unavailable"}
+              </span>
+            </div>
+
+            <p className={`${styles.dayDescription} ${dayDescriptionMissing ? styles.placeholderText : ""}`}>
+              {day.description || "No description provided."}
+            </p>
+          </section>
+
+          <section className={styles.shiftsSection} aria-labelledby="available-shifts-title">
+            <h2 id="available-shifts-title" className={styles.sectionTitle}>
+              Available Shifts
+            </h2>
+
+            <div className={styles.shiftList}>
+              {shifts.length === 0 ? (
+                <p className={styles.emptyMsg}>No shifts available for this day.</p>
+              ) : (
+                shifts.map((shift, index) => (
+                  <article className={styles.shiftCard} key={shift.name}>
+                    <div className={styles.shiftTop}>
+                      <input
+                        type="checkbox"
+                        className={styles.shiftCheckbox}
+                        aria-label={`Select ${shift.name}`}
+                        checked={selectedShiftIds.has(shift.shiftId)}
+                        disabled={pendingSignupIds.has(shift.shiftId)}
+                        onChange={() => {
+                          setSelectedShiftIds((current) => {
+                            const next = new Set(current);
+
+                            if (next.has(shift.shiftId)) {
+                              next.delete(shift.shiftId);
+                            } else {
+                              next.add(shift.shiftId);
+                            }
+
+                            return next;
+                          });
+                        }}
+                      />
+
+                      <div className={styles.shiftMain}>
+                        <div className={styles.shiftTitleRow}>
+                          <h3 className={styles.shiftTitle}>{shift.name}</h3>
+
+                          <button
+                            type="button"
+                            className={styles.expandBtn}
+                            aria-label={
+                              openShiftId === shift.shiftId ? `Collapse ${shift.name}` : `Expand ${shift.name}`
+                            }
+                            aria-expanded={openShiftId === shift.shiftId}
+                            onClick={() => {
+                              setOpenShiftId(openShiftId === shift.shiftId ? null : shift.shiftId);
+                            }}
+                          >
+                            {openShiftId === shift.shiftId ? <ChevronUp size={18} /> : <ChevronDown size={18} />}
+                          </button>
+                        </div>
+
+                        <p className={styles.shiftDescription}>{shift.description}</p>
+
+                        <div className={styles.shiftDivider} />
+
+                        <div className={styles.shiftMetaRow}>
+                          <span className={styles.shiftMetaItem}>
+                            <Calendar size={15} aria-hidden="true" />
+                            {formatShiftDate(shift.date)}
+                          </span>
+
+                          <span className={styles.shiftMetaItem}>
+                            <Clock size={15} aria-hidden="true" />
+                            {shift.startTime} – {shift.endTime} (PST)
+                          </span>
+
+                          <span className={styles.spotsBadge}>
+                            {registeredShiftIds.has(shift.shiftId)
+                              ? "Registered"
+                              : pendingSignupIds.has(shift.shiftId)
+                                ? "Signing up..."
+                                : `${shiftSignupCounts.get(shift.shiftId) ?? 0}/${shift.totalSlots} Spots`}
+                          </span>
+                        </div>
+
+                        {openShiftId === shift.shiftId ? (
+                          <div className={styles.expandedContent}>
+                            {shift.mapLink ? (
+                              <a
+                                href={shift.mapLink}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className={styles.locationLine}
+                              >
+                                <MapPin size={15} aria-hidden="true" />
+                                <span>{shift.address || shift.location}</span>
+                              </a>
+                            ) : (
+                              <p className={styles.locationLine}>
+                                <MapPin size={15} aria-hidden="true" />
+                                <span>{shift.address || shift.location}</span>
+                              </p>
+                            )}
+
+                            {/* map preview */}
+                            {shift.mapLink ? (
+                              <iframe
+                                src={toGoogleMapsEmbed(shift.mapLink)}
+                                title={`${shift.name} map`}
+                                loading="lazy"
+                                className={styles.mapPreview}
+                              />
+                            ) : (
+                              <div className={styles.mapPlaceholder}>Map preview unavailable</div>
+                            )}
+
+                            {/* extra info section */}
+                            <div className={styles.infoBlock}>
+                              <h4>What should volunteers know about the location?</h4>
+                              <p className={!shift.locationInfo ? styles.placeholderText : ""}>
+                                {shift.locationInfo || "No extra information provided."}
+                              </p>
+                            </div>
+
+                            <div className={styles.infoBlock}>
+                              <h4>What will volunteers need to bring or wear?</h4>
+                              <p className={!shift.byoDescription ? styles.placeholderText : ""}>
+                                {shift.byoDescription || "No extra information provided."}
+                              </p>
+                            </div>
+
+                            <div className={styles.coordinatorBlock}>
+                              <h4>VOLUNTEER COORDINATOR</h4>
+
+                              <div className={styles.coordinatorRow}>
+                                <div className={styles.avatar} aria-hidden="true">
+                                  <UserRound size={26} />
+                                </div>
+
+                                <div>
+                                  <p className={styles.coordinatorName}>John Mustang</p>
+                                  <p className={styles.coordinatorInfo}>
+                                    <Mail size={13} aria-hidden="true" />
+                                    john.mustang@email.com
+                                  </p>
+                                  <p className={styles.coordinatorInfo}>
+                                    <Phone size={13} aria-hidden="true" />
+                                    (555) 123-4567
+                                  </p>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        ) : null}
+                      </div>
+                    </div>
+                  </article>
+                ))
+              )}
+            </div>
+          </section>
+
+          <button
+            type="button"
+            className={styles.signUpBtn}
+            disabled={selectedShiftIds.size === 0 || selectedShiftIsPending}
+            onClick={() => {
+              onSignUp(selectedShiftIdsArray);
+              setSelectedShiftIds(new Set());
+            }}
+          >
+            {selectedShiftIsPending ? "Signing Up..." : "Sign Up for Shift"}
+          </button>
+
+          <section className={styles.contactSection} aria-labelledby="contact-title">
+            <h2 id="contact-title" className={styles.sectionTitle}>
+              Who To Contact
+            </h2>
+
+            <p className={styles.contactName}>John Hallet (Operations Manager)</p>
+            <p className={styles.contactInfo}>
+              <Phone size={15} aria-hidden="true" />
+              (805)-792-2094
+            </p>
+            <p className={styles.contactInfo}>
+              <Mail size={15} aria-hidden="true" />
+              john@operationsurf.org
+            </p>
+          </section>
+        </div>
+      </div>
+    </main>
+  );
+}
diff --git a/src/database/models/Shift.ts b/src/database/models/Shift.ts
index ebc7776..f5f183a 100644
--- a/src/database/models/Shift.ts
+++ b/src/database/models/Shift.ts
@@ -9,6 +9,7 @@ const ShiftSchema = new Schema(
     endTime: { type: String, required: true, trim: true },
     totalSlots: { type: Number, required: true, min: 0 },
     location: { type: String, required: true, trim: true },
+    locationInfo: { type: String, required: false, trim: true },
     address: { type: String, required: false, trim: true },
     directions: { type: String, required: false, trim: true },
     mapLink: { type: String, required: false, trim: true },
@@ -17,6 +18,7 @@ const ShiftSchema = new Schema(
     visibility: { type: String, required: true, enum: ["public", "invited"], default: "public" },
     invited: { type: [String], required: true, default: [] }, // array of volunteerIds to check if someone is invited to the shift
     description: { type: String, required: true, trim: true },
+    byoDescription: { type: String, required: false, trim: true },
   },
   {
     timestamps: true,
diff --git a/src/styles/Dashboard.module.css b/src/styles/Dashboard.module.css
index 6a31e8b..321e648 100644
--- a/src/styles/Dashboard.module.css
+++ b/src/styles/Dashboard.module.css
@@ -407,8 +407,8 @@
 
   border: 1px solid #fecaca;
 
-  background: #fef2f2;
-  color: #b91c1c;
+  background: #facbcb;
+  color: #d61212;
 
   font-family: "Inter", sans-serif;
   font-size: 15px;
diff --git a/src/styles/ProgramDetail.module.css b/src/styles/ProgramDetail.module.css
index 1c8edad..45dc005 100644
--- a/src/styles/ProgramDetail.module.css
+++ b/src/styles/ProgramDetail.module.css
@@ -141,12 +141,16 @@
 
 /* day card */
 .dayCard {
+  display: block;
   border: 1px solid #e5e7eb;
   border-radius: 10px;
   padding: 18px 22px;
   margin-bottom: 14px;
   background: #fff;
+  color: inherit;
+  text-decoration: none;
   font-family: "Inter", sans-serif;
+  cursor: pointer;
   transition:
     border-color 0.15s,
     box-shadow 0.15s;
@@ -161,6 +165,11 @@
   box-shadow: 0 8px 18px rgba(17, 24, 39, 0.08);
 }
 
+.dayCard:focus-visible {
+  outline: 3px solid rgba(124, 120, 69, 0.35);
+  outline-offset: 3px;
+}
+
 .dayCardHeader {
   display: flex;
   gap: 12px;
diff --git a/src/styles/ShiftDetails.module.css b/src/styles/ShiftDetails.module.css
new file mode 100644
index 0000000..9ee014b
--- /dev/null
+++ b/src/styles/ShiftDetails.module.css
@@ -0,0 +1,478 @@
+.page {
+  min-height: 100vh;
+  background-color: #f9f9f9;
+}
+
+.hero {
+  position: relative;
+  width: 100%;
+  height: 205px;
+  overflow: hidden;
+}
+
+.heroBg {
+  object-fit: cover;
+}
+
+.heroOverlay {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(180deg, rgba(124, 120, 69, 0.9) 0%, rgba(115, 113, 68, 0.8) 100%);
+  z-index: 0;
+}
+
+.heroContent {
+  position: relative;
+  z-index: 1;
+  height: 100%;
+  max-width: 1120px;
+  margin: 0 auto;
+  padding: 0 18px;
+
+  display: flex;
+  align-items: center;
+}
+
+.heroTitle {
+  color: white;
+  font-size: 38px;
+  font-weight: 500;
+  margin: 0;
+}
+
+.content {
+  max-width: 1120px;
+  margin: 0 auto;
+  padding: 34px 18px 48px 18px;
+}
+
+.statusMsg {
+  color: #9ca3af;
+  font-size: 0.875rem;
+}
+
+.errorBanner {
+  padding: 14px 18px;
+
+  border: 1px solid #fecaca;
+
+  background: #facbcb;
+  color: #d61212;
+
+  font-family: "Inter", sans-serif;
+  font-size: 15px;
+  font-weight: 500;
+
+  box-shadow:
+    0px 4px 6px -4px rgba(0, 0, 0, 0.1),
+    0px 10px 15px -3px rgba(0, 0, 0, 0.08);
+}
+
+.infoBlock p.placeholderText,
+.dayDescription.placeholderText {
+  color: #9ca3af;
+  font-style: italic;
+}
+
+.dayHeader {
+  margin-bottom: 32px;
+}
+
+.dayTitle {
+  color: #111827;
+  font-size: 30px;
+  font-weight: 700;
+  margin: 0 0 0.65rem 0;
+}
+
+.devNote {
+  color: #9ca3af;
+  font-size: 0.8rem;
+  margin: 0 0 0.5rem 0;
+}
+
+.dayMeta {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.65rem;
+
+  color: #737144;
+  font-size: 1rem;
+  font-weight: 500;
+
+  margin-bottom: 1rem;
+}
+
+.metaItem {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.dayDescription {
+  max-width: 1050px;
+  color: #111827;
+  font-size: 0.95rem;
+  line-height: 1.55;
+  margin: 0;
+}
+
+.emptyMsg {
+  color: #6b7280;
+  font-size: 0.95rem;
+  margin: 0;
+}
+
+.sectionTitle {
+  color: #737144;
+  font-size: 1.45rem;
+  font-weight: 700;
+  margin: 0 0 1rem 0;
+}
+
+.shiftsSection {
+  margin-bottom: 1.5rem;
+}
+
+.shiftList {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.shiftCard {
+  background: white;
+  border-radius: 10px;
+  border: 1px solid #e5e7eb;
+
+  padding: 1.1rem 1.25rem;
+
+  box-shadow:
+    0px 4px 6px -4px rgba(0, 0, 0, 0.12),
+    0px 10px 15px -3px rgba(0, 0, 0, 0.08);
+}
+
+.shiftTop {
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+}
+
+.shiftCheckbox {
+  width: 18px;
+  height: 18px;
+  margin-top: 0.15rem;
+  flex-shrink: 0;
+}
+
+.shiftMain {
+  width: 100%;
+}
+
+.shiftTitleRow {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.shiftTitle {
+  color: #737144;
+  font-size: 1.15rem;
+  font-weight: 700;
+  margin: 0;
+}
+
+.expandBtn {
+  background: none;
+  border: none;
+  color: #737144;
+  cursor: pointer;
+  padding: 0;
+  flex-shrink: 0;
+}
+
+.shiftDescription {
+  color: #374151;
+  font-size: 0.95rem;
+  line-height: 1.45;
+  margin: 0.3rem 0 0 0;
+}
+
+.shiftDivider {
+  height: 1px;
+  background: #d1d5db;
+  margin: 1rem 0 0.75rem 0;
+}
+
+.shiftMetaRow {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 2rem;
+
+  position: relative;
+  padding-right: 5.75rem;
+}
+
+.shiftMetaItem {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+
+  color: #111827;
+  font-size: 0.9rem;
+  font-weight: 500;
+}
+
+.shiftMetaItem svg {
+  color: #737144;
+}
+
+.spotsBadge {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+
+  background: #737144;
+  color: white;
+
+  border-radius: 999px;
+  padding: 0.35rem 0.6rem;
+
+  font-size: 0.75rem;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.expandedContent {
+  margin-top: 0.75rem;
+}
+
+.locationLine {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+
+  color: #737144;
+  font-size: 0.9rem;
+  text-decoration: none;
+
+  margin: 0 0 0.75rem 0;
+  width: fit-content;
+}
+
+a.locationLine:hover {
+  color: rgba(90, 95, 60, 1);
+}
+
+.mapPreview {
+  width: 100%;
+  height: 205px;
+
+  border-radius: 6px;
+  border: 1px solid #d1d5db;
+
+  margin-bottom: 1rem;
+}
+
+.mapPlaceholder {
+  width: 100%;
+  height: 205px;
+
+  border-radius: 6px;
+  border: 1px dashed #9ca3af;
+
+  background: #e5e7eb;
+  color: #6b7280;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  font-size: 0.9rem;
+  margin-bottom: 1rem;
+}
+
+.infoBlock {
+  margin-bottom: 1rem;
+}
+
+.infoBlock h4 {
+  color: #737144;
+  font-size: 0.95rem;
+  font-weight: 700;
+  margin: 0 0 0.25rem 0;
+}
+
+.infoBlock p {
+  color: #111827;
+  font-size: 0.9rem;
+  line-height: 1.4;
+  margin: 0;
+}
+
+.coordinatorBlock {
+  margin-top: 1.1rem;
+}
+
+.coordinatorBlock h4 {
+  color: #737144;
+  font-size: 0.95rem;
+  font-weight: 700;
+  margin: 0 0 0.6rem 0;
+}
+
+.coordinatorRow {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+}
+
+.avatar {
+  width: 52px;
+  height: 52px;
+  border-radius: 50%;
+
+  background: #e5e5e5;
+  color: #b7b7b7;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  flex-shrink: 0;
+}
+
+.coordinatorName {
+  color: #111827;
+  font-size: 0.85rem;
+  font-weight: 700;
+  margin: 0 0 0.1rem 0;
+}
+
+.coordinatorInfo {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+
+  color: #111827;
+  font-size: 0.78rem;
+
+  margin: 0.05rem 0;
+}
+
+.coordinatorInfo svg {
+  color: #737144;
+}
+
+.signUpBtn {
+  background-color: #737144;
+  color: white;
+
+  border: none;
+  border-radius: 6px;
+
+  padding: 0.9rem 1.15rem;
+
+  font-size: 0.95rem;
+  font-weight: 700;
+
+  cursor: pointer;
+  margin: 0 0 1.5rem 0;
+}
+
+.signUpBtn:hover {
+  background-color: rgba(90, 95, 60, 1);
+}
+
+.signUpBtn:focus,
+.expandBtn:focus,
+.shiftCheckbox:focus {
+  outline: 2px solid rgba(124, 120, 69, 0.45);
+  outline-offset: 3px;
+}
+
+.signUpBtn:disabled {
+  background-color: rgba(124, 120, 69, 0.45);
+  cursor: not-allowed;
+}
+
+.signUpError {
+  color: #b91c1c;
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  border-radius: 6px;
+  padding: 0.7rem 0.9rem;
+  font-size: 0.9rem;
+  font-weight: 500;
+  margin: 0 0 0.75rem 0;
+  width: fit-content;
+}
+
+.contactSection {
+  margin-top: 0.5rem;
+}
+
+.contactName {
+  color: #111827;
+  font-size: 1rem;
+  font-weight: 700;
+  margin: 0 0 0.25rem 0;
+}
+
+.contactInfo {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+
+  color: #111827;
+  font-size: 0.95rem;
+
+  margin: 0.2rem 0;
+}
+
+.contactInfo svg {
+  color: #737144;
+}
+
+@media (max-width: 768px) {
+  .hero {
+    height: 180px;
+  }
+
+  .heroTitle {
+    font-size: 32px;
+  }
+
+  .content {
+    padding: 24px 14px 40px 14px;
+  }
+
+  .dayTitle {
+    font-size: 25px;
+  }
+
+  .mapPreview {
+    height: 165px;
+  }
+
+  .shiftMetaRow {
+    gap: 0.75rem;
+    padding-right: 0;
+    padding-bottom: 2rem;
+  }
+
+  .spotsBadge {
+    left: 0;
+    right: auto;
+    top: auto;
+    bottom: 0;
+    transform: none;
+  }
+
+  .mapPlaceholder {
+    height: 165px;
+  }
+}