diff --git a/apps/next/public/anteatery.webp b/apps/next/public/anteatery.webp
index 1ef844da..e0af54d1 100644
Binary files a/apps/next/public/anteatery.webp and b/apps/next/public/anteatery.webp differ
diff --git a/apps/next/src/app/globals.css b/apps/next/src/app/globals.css
index 0112a3b0..e31594dd 100644
--- a/apps/next/src/app/globals.css
+++ b/apps/next/src/app/globals.css
@@ -2,6 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
+html {
+  overscroll-behavior: none;
+}
+
 html,
 body {
   height: 100%;
@@ -50,6 +54,13 @@ body {
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
     --radius: 0.5rem;
+    --surface-elevated: #ffffff;
+    --surface-modal: #ffffff;
+    --button-primary-bg: #0069A8;
+    --primary-accent: rgba(0, 105, 168, 0.2);
+    --button-primary-fg: #ffffff;
+    --button-disabled-bg: rgba(0, 0, 0, 0.12);
+    --button-disabled-fg: rgba(0, 0, 0, 0.26);
     --donut-inner: white;
     --donut-outer: white;
     --donut-track: #ffffff;
@@ -84,6 +95,13 @@ body {
     --chart-3: 30 80% 55%;
     --chart-4: 280 65% 60%;
     --chart-5: 340 75% 55%;
+    --surface-elevated: #323235;
+    --surface-modal: #303035;
+    --button-primary-bg: #93C5FD;
+    --button-primary-bg-transparent: rgba(147, 197, 253, 0.2);
+    --button-primary-fg: #111827;
+    --button-disabled-bg: #3F3F47;
+    --button-disabled-fg: #71717A;
     --donut-inner: #27272A;
     --donut-outer: #31373F;
     --donut-track: #27272A;
@@ -126,16 +144,16 @@ body {
 
 /* Light mode calendar borders */
 .events-calendar-wrapper .rbc-month-view,
-.events-calendar-wrapper .rbc-day-bg + .rbc-day-bg,
-.events-calendar-wrapper .rbc-month-row + .rbc-month-row,
+.events-calendar-wrapper .rbc-day-bg+.rbc-day-bg,
+.events-calendar-wrapper .rbc-month-row+.rbc-month-row,
 .events-calendar-wrapper .rbc-header {
   border-color: #0369a1 !important;
 }
 
 /* Dark mode calendar borders */
 .dark .events-calendar-wrapper .rbc-month-view,
-.dark .events-calendar-wrapper .rbc-day-bg + .rbc-day-bg,
-.dark .events-calendar-wrapper .rbc-month-row + .rbc-month-row,
+.dark .events-calendar-wrapper .rbc-day-bg+.rbc-day-bg,
+.dark .events-calendar-wrapper .rbc-month-row+.rbc-month-row,
 .dark .events-calendar-wrapper .rbc-header {
   border-color: #93c5fd !important;
 }
@@ -153,16 +171,20 @@ body {
 .MuiPickersDay-root {
   color: #111827 !important;
 }
+
 .MuiPickersDay-root.Mui-selected {
   background-color: #0369a1 !important;
   color: white !important;
 }
+
 .MuiDayCalendar-weekDayLabel {
   color: #111827 !important;
 }
+
 .MuiPickersCalendarHeader-label {
   color: #111827 !important;
 }
+
 .MuiPickersArrowSwitcher-button {
   color: #111827 !important;
 }
@@ -171,25 +193,30 @@ body {
 .dark .MuiPickersDay-root {
   color: white !important;
 }
+
 .dark .MuiPickersDay-root.Mui-selected {
   background-color: #93C5FD !important;
   color: #111827 !important;
 }
+
 .dark .MuiPickersDay-today {
   border-color: #93C5FD !important;
 }
+
 .dark .MuiDayCalendar-weekDayLabel {
   color: white !important;
 }
+
 .dark .MuiPickersCalendarHeader-label {
   color: white !important;
 }
+
 .dark .MuiPickersArrowSwitcher-button {
   color: white !important;
 }
+
 /* Date picker dialog dark mode (mobile) */
 .dark .MuiDialog-paper {
-  background-color: #323235 !important;
+  background-color: var(--surface-elevated) !important;
   background-image: none !important;
-}
-
+}
\ No newline at end of file
diff --git a/apps/next/src/app/page.tsx b/apps/next/src/app/page.tsx
index 9b310ef0..f878151e 100644
--- a/apps/next/src/app/page.tsx
+++ b/apps/next/src/app/page.tsx
@@ -119,7 +119,7 @@ function DesktopHome(): React.JSX.Element {
             {/* Brandywine Card */}
             <Link href="/brandywine" className="group">
               <Box
-                className="rounded-xl overflow-hidden shadow-sm hover:shadow-md transition dark:bg-[#323235]"
+                className="rounded-xl overflow-hidden shadow-sm hover:shadow-md transition dark:bg-surface-elevated"
                 sx={{ border: 1, borderColor: "divider" }}
               >
                 <div className="relative w-full h-56">
@@ -162,7 +162,7 @@ function DesktopHome(): React.JSX.Element {
             {/* Anteatery Card */}
             <Link href="/anteatery" className="group">
               <Box
-                className="rounded-xl overflow-hidden shadow-sm hover:shadow-md transition dark:bg-[#323235]"
+                className="rounded-xl overflow-hidden shadow-sm hover:shadow-md transition dark:bg-surface-elevated"
                 sx={{ border: 1, borderColor: "divider" }}
               >
                 <div className="relative w-full h-56">
@@ -338,7 +338,7 @@ function MobileHome(): React.JSX.Element {
             {/* Brandywine Card */}
             <Link href="/brandywine" className="group block">
               <Box
-                className="rounded-xl overflow-hidden shadow-sm hover:shadow-md transition dark:bg-[#323235]"
+                className="rounded-xl overflow-hidden shadow-sm hover:shadow-md transition dark:bg-surface-elevated"
                 sx={{ border: 1, borderColor: "divider" }}
               >
                 <div className="relative w-full h-24">
@@ -385,7 +385,7 @@ function MobileHome(): React.JSX.Element {
             {/* Anteatery Card */}
             <Link href="/anteatery" className="group block">
               <Box
-                className="rounded-xl overflow-hidden shadow-sm hover:shadow-md transition dark:bg-[#323235]"
+                className="rounded-xl overflow-hidden shadow-sm hover:shadow-md transition dark:bg-surface-elevated"
                 sx={{ border: 1, borderColor: "divider" }}
               >
                 <div className="relative w-full h-24">
diff --git a/apps/next/src/components/ui/dishes-info.tsx b/apps/next/src/components/ui/dishes-info.tsx
index 2d62bb9e..45916240 100644
--- a/apps/next/src/components/ui/dishes-info.tsx
+++ b/apps/next/src/components/ui/dishes-info.tsx
@@ -64,7 +64,7 @@ export default function DishesInfo({
 
   return (
     <div
-      className="flex flex-col gap-6 mt-6 px-2 overflow-y-auto 
+      className="flex flex-col gap-6 overflow-y-auto 
       flex-grow h-1"
       id="food-scroll"
     >
diff --git a/apps/next/src/components/ui/edit-preferences-content.tsx b/apps/next/src/components/ui/edit-preferences-content.tsx
index 78e3de80..a33aceae 100644
--- a/apps/next/src/components/ui/edit-preferences-content.tsx
+++ b/apps/next/src/components/ui/edit-preferences-content.tsx
@@ -168,11 +168,12 @@ export default function EditPreferencesContent({
       ]);
 
       posthog.capture("preferences_updated", {
-        allergies: [...formData.allergies, ...customAllergies],
+        allergies: [...formData.allergies /*, ...customAllergies */],
         preferences: formData.preferences,
-        allergies_count: formData.allergies.length + customAllergies.length,
+        allergies_count:
+          formData.allergies.length /*+ customAllergies.length */,
         preferences_count: formData.preferences.length,
-        custom_allergies_count: customAllergies.length,
+        /*custom_allergies_count: customAllergies.length,*/
       });
 
       if (onSaved) {
diff --git a/apps/next/src/components/ui/onboarding.tsx b/apps/next/src/components/ui/onboarding.tsx
index bd900ee0..5821a5f7 100644
--- a/apps/next/src/components/ui/onboarding.tsx
+++ b/apps/next/src/components/ui/onboarding.tsx
@@ -356,17 +356,14 @@ const OnboardingContent = React.forwardRef<
               sx={{
                 height: "45px",
                 width: "80px",
-                bgcolor: "#0069A8",
+                bgcolor: "var(--button-primary-bg)",
+                color: "var(--button-primary-fg)",
                 "&:hover": {
                   filter: "brightness(0.85)",
                 },
-                ".dark &": {
-                  bgcolor: "#93C5FD",
-                  color: "#111827",
-                },
-                ".dark &.Mui-disabled": {
-                  backgroundColor: "#3F3F47",
-                  color: "#71717A",
+                "&.Mui-disabled": {
+                  backgroundColor: "var(--button-disabled-bg)",
+                  color: "var(--button-disabled-fg)",
                 },
               }}
             >
@@ -381,17 +378,14 @@ const OnboardingContent = React.forwardRef<
               sx={{
                 height: "45px",
                 width: "80px",
-                bgcolor: "#0069A8",
+                bgcolor: "var(--button-primary-bg)",
+                color: "var(--button-primary-fg)",
                 "&:hover": {
                   filter: "brightness(0.85)",
                 },
-                ".dark &": {
-                  bgcolor: "#93C5FD",
-                  color: "#111827",
-                },
-                ".dark &.Mui-disabled": {
-                  backgroundColor: "#3F3F47",
-                  color: "#71717A",
+                "&.Mui-disabled": {
+                  backgroundColor: "var(--button-disabled-bg)",
+                  color: "var(--button-disabled-fg)",
                 },
               }}
             >
@@ -408,17 +402,14 @@ const OnboardingContent = React.forwardRef<
             sx={{
               height: "45px",
               width: "80px",
-              bgcolor: "#0069A8",
+              bgcolor: "var(--button-primary-bg)",
+              color: "var(--button-primary-fg)",
               "&:hover": {
                 filter: "brightness(0.85)",
               },
-              ".dark &": {
-                bgcolor: "#93C5FD",
-                color: "#111827",
-              },
-              ".dark &.Mui-disabled": {
-                backgroundColor: "#3F3F47",
-                color: "#71717A",
+              "&.Mui-disabled": {
+                backgroundColor: "var(--button-disabled-bg)",
+                color: "var(--button-disabled-fg)",
               },
             }}
           >
@@ -460,7 +451,7 @@ export default function OnboardingDialog(): React.JSX.Element {
                 border: "3px solid",
                 borderColor: "var(--mui-palette-divider)",
                 backgroundImage: "none",
-                backgroundColor: "#303035",
+                backgroundColor: "var(--surface-modal)",
               },
             },
           },
@@ -493,7 +484,7 @@ export default function OnboardingDialog(): React.JSX.Element {
           },
           ".dark & .MuiDrawer-paper": {
             backgroundImage: "none",
-            backgroundColor: "#303035",
+            backgroundColor: "var(--surface-modal)",
           },
         }}
       >
diff --git a/apps/next/src/components/ui/restaurant/dishes-view.tsx b/apps/next/src/components/ui/restaurant/dishes-view.tsx
index 7196f867..e98b0fd2 100644
--- a/apps/next/src/components/ui/restaurant/dishes-view.tsx
+++ b/apps/next/src/components/ui/restaurant/dishes-view.tsx
@@ -91,12 +91,13 @@ export function DishesView({
         : // Normal View: Render active station logic
           activeStation && (
             <div className="[&_#food-scroll]:h-auto [&_#food-scroll]:overflow-y-visible">
-              <div className="mb-4">
+              <div className="my-4">
                 <Typography
                   variant="h5"
                   fontWeight={700}
                   color="text.primary"
                   sx={{ fontSize: "1.875rem" }}
+                  className="w-full bg-primary-accent pl-4 py-2 rounded-xl text-sky-700 dark:text-black"
                 >
                   {toTitleCase(activeStation.name)}
                 </Typography>
diff --git a/apps/next/src/components/ui/restaurant/header/desktop-tabs.tsx b/apps/next/src/components/ui/restaurant/header/desktop-tabs.tsx
index 8770b63e..afaa532c 100644
--- a/apps/next/src/components/ui/restaurant/header/desktop-tabs.tsx
+++ b/apps/next/src/components/ui/restaurant/header/desktop-tabs.tsx
@@ -45,7 +45,7 @@ export function DesktopTabs({
               setSelectedStation(val);
             }
           }}
-          className="flex w-full overflow-x-auto no-scrollbar !bg-sky-700/40 dark:!bg-[#46566a] !rounded-lg !p-2 [&_.MuiTabs-flexContainer]:justify-between [&_.MuiTabs-flexContainer]:gap-2 [&_.MuiTabs-indicator]:hidden"
+          className="flex w-full overflow-x-auto no-scrollbar bg-primary-accent dark:!bg-[#46566a] !rounded-lg !p-2 [&_.MuiTabs-flexContainer]:justify-between [&_.MuiTabs-flexContainer]:gap-2 [&_.MuiTabs-indicator]:hidden"
           variant="scrollable"
           scrollButtons={false}
         >
diff --git a/apps/next/src/components/ui/restaurant/restaurant-controls.tsx b/apps/next/src/components/ui/restaurant/restaurant-controls.tsx
index c4c75d92..15fc3a10 100644
--- a/apps/next/src/components/ui/restaurant/restaurant-controls.tsx
+++ b/apps/next/src/components/ui/restaurant/restaurant-controls.tsx
@@ -70,16 +70,12 @@ export function RestaurantControls({
     <>
       <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-2 mb-2 flex-wrap md:flex-nowrap">
         {/* Desktop title & status (Header) */}
-        <RestaurantHeader isDesktop={isDesktop} hall={hall} />
-
-        <div className="flex flex-col gap-3 w-full md:w-auto md:flex-row md:items-center md:justify-end">
-          {/* Desktop Status - now next to selectors */}
-          {isDesktop && (
-            <div>
-              <DiningHallStatus status={derivedHallStatus} />
-            </div>
-          )}
+        <div className="inline-flex gap-4">
+          <RestaurantHeader isDesktop={isDesktop} hall={hall} />
+          {isDesktop && <DiningHallStatus status={derivedHallStatus} />}
+        </div>
 
+        <div className="flex flex-col gap-3 w-full md:w-auto md:flex-row md:items-center">
           {/* Meal & date selectors (Filters) */}
           <RestaurantFilters
             isDesktop={isDesktop}
diff --git a/apps/next/src/components/ui/restaurant/restaurant-page.tsx b/apps/next/src/components/ui/restaurant/restaurant-page.tsx
index 233946f0..28632d26 100644
--- a/apps/next/src/components/ui/restaurant/restaurant-page.tsx
+++ b/apps/next/src/components/ui/restaurant/restaurant-page.tsx
@@ -14,12 +14,14 @@ import {
 import { useMediaQuery } from "@/hooks/useMediaQuery";
 import { isSameDay } from "@/utils/funcs";
 import { trpc } from "@/utils/trpc";
+import { cn } from "@/utils/tw";
 import {
   ANTEATERY_MAP_LINK_URL,
   BRANDYWINE_MAP_LINK_URL,
   HallEnum,
   HallStatusEnum,
 } from "@/utils/types";
+import { DiningHallStatus } from "../status";
 import { DishesView } from "./dishes-view";
 import { RestaurantControls } from "./restaurant-controls";
 import { Sidebar } from "./sidebar";
@@ -193,7 +195,10 @@ export function RestaurantPage({
           alt={hero.alt}
           fill
           priority
-          className="object-cover object-bottom"
+          className={cn(
+            "object-cover",
+            hall === HallEnum.BRANDYWINE && "object-bottom",
+          )}
         />
         <div className="absolute inset-0 bg-gradient-to-tr from-black/80 via-black/20 to-transparent" />
         {/* Mobile Header Overlay */}
@@ -207,20 +212,7 @@ export function RestaurantPage({
               >
                 {hall === HallEnum.ANTEATERY ? "Anteatery" : "Brandywine"}
               </Typography>
-              <div className="flex items-center gap-2 pl-1 text-md font-small text-white">
-                {openTime && closeTime ? (
-                  <>
-                    <div
-                      className={`w-2.5 h-2.5 rounded-full ${derivedHallStatus === HallStatusEnum.OPEN ? "bg-green-500" : "bg-red-500"}`}
-                    />
-                    <span>
-                      {derivedHallStatus === HallStatusEnum.OPEN
-                        ? "Open"
-                        : "Closed"}
-                    </span>
-                  </>
-                ) : null}
-              </div>
+              <DiningHallStatus status={derivedHallStatus} mobile />
             </div>
             <Link
               href={
diff --git a/apps/next/src/components/ui/restaurant/sidebar.tsx b/apps/next/src/components/ui/restaurant/sidebar.tsx
index 6d9a381a..cac62ab6 100644
--- a/apps/next/src/components/ui/restaurant/sidebar.tsx
+++ b/apps/next/src/components/ui/restaurant/sidebar.tsx
@@ -40,7 +40,7 @@ export function Sidebar({
         className="mb-4 overflow-hidden dark:bg-[#303035]"
         sx={{ border: 1, borderColor: "divider" }}
       >
-        <div className="bg-sky-500/20 dark:bg-blue-300/10 px-4 py-3 border-b-2 border-sky-700 dark:border-blue-300">
+        <div className="bg-primary-accent dark:bg-blue-300/10 px-4 py-3 border-b-2 border-sky-700 dark:border-blue-300">
           <Typography
             variant="h6"
             className="!font-bold !text-center !text-sky-700 dark:!text-blue-300"
diff --git a/apps/next/src/components/ui/sidebar/sidebar-content.tsx b/apps/next/src/components/ui/sidebar/sidebar-content.tsx
index 80f2f955..aa94ae79 100644
--- a/apps/next/src/components/ui/sidebar/sidebar-content.tsx
+++ b/apps/next/src/components/ui/sidebar/sidebar-content.tsx
@@ -21,6 +21,7 @@ import { GoogleSignInButton } from "@/components/auth/google-sign-in";
 import { signOut, useSession } from "@/utils/auth-client";
 import { formatDietaryKey } from "@/utils/dietary";
 import { trpc } from "@/utils/trpc";
+import { cn } from "@/utils/tw";
 
 interface ProfileMenuContentProps {
   onClose: () => void;
@@ -62,11 +63,16 @@ export default function SidebarContent({
 
   return (
     <Box
-      className="w-full h-full rounded-2xl bg-white dark:bg-[#323235] shadow-xl flex flex-col"
+      className={`w-full h-full rounded-2xl bg-white 
+        dark:bg-[var(--surface-elevated)] shadow-xl flex flex-col border-2 
+        border-gray-300 dark:border-zinc-700`}
       sx={{ border: 1, borderColor: "divider" }}
     >
       {/* Header */}
-      <div className="flex items-start justify-between px-5 pt-5">
+      <div
+        className={`flex items-start justify-between px-5 p-5 border-b-2 
+        border-gray-300 dark:border-zinc-700`}
+      >
         <div className="flex items-center gap-3">
           <Image
             src={user?.image || "/peter.webp"}
@@ -95,7 +101,7 @@ export default function SidebarContent({
       </div>
 
       {/* Content */}
-      <div className="flex-1 px-5 pt-4 space-y-5">
+      <div className="flex-1 px-5 p-4 space-y-5 border-b-2 border-gray-300 dark:border-zinc-700">
         {/* Dietary Preferences */}
         <div>
           <Typography variant="body2" fontWeight={600} color="primary" mb={1}>
@@ -115,12 +121,7 @@ export default function SidebarContent({
           <div className="flex flex-wrap gap-1.5 mb-3">
             {preferences?.length ? (
               preferences.map((pref) => (
-                <span
-                  key={pref}
-                  className="rounded-md border border-sky-700 bg-sky-100 px-2.5 py-0.5 text-xs text-sky-700 dark:border-blue-300 dark:text-blue-300 dark:bg-blue-300/20"
-                >
-                  {formatDietaryKey(pref)}
-                </span>
+                <PrefBadge key={pref} type="restriction" text={pref} />
               ))
             ) : (
               <span className="text-xs text-gray-400">None</span>
@@ -139,12 +140,7 @@ export default function SidebarContent({
           <div className="flex flex-wrap gap-1.5">
             {allergies?.length ? (
               allergies.map((allergy) => (
-                <span
-                  key={allergy}
-                  className="rounded-md border border-sky-700 bg-sky-100 px-2.5 py-0.5 text-xs text-sky-700 dark:border-blue-300 dark:text-blue-300 dark:bg-blue-300/20"
-                >
-                  {formatDietaryKey(allergy)}
-                </span>
+                <PrefBadge key={allergy} type="allergy" text={allergy} />
               ))
             ) : (
               <span className="text-xs text-gray-400">None</span>
@@ -158,7 +154,11 @@ export default function SidebarContent({
             Appearance
           </Typography>
 
-          <div className="flex rounded-lg border border-sky-700 dark:border-blue-300 overflow-hidden">
+          <div
+            className={`flex rounded-lg border border-sky-700 
+            dark:border-blue-300 overflow-hidden divide-x divide-sky-700 
+            dark:divide-blue-300`}
+          >
             <ThemeButton
               active={theme === "light"}
               onClick={() => setTheme("light")}
@@ -191,7 +191,11 @@ export default function SidebarContent({
                   onClose();
                   onEditPreferencesClick();
                 }}
-                className="w-full flex items-center gap-3 rounded-lg px-4 py-2 text-sm text-gray-900 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:dark:hover:bg-transparent"
+                className={`w-full flex items-center gap-3 rounded-lg px-4 py-2 
+                  text-sm text-gray-900 dark:text-white hover:bg-gray-100 
+                  dark:hover:bg-gray-700 disabled:opacity-50 
+                  disabled:cursor-not-allowed disabled:hover:bg-transparent 
+                  disabled:dark:hover:bg-transparent`}
               >
                 <Box sx={{ color: "primary.main" }}>
                   <EditIcon fontSize="small" />
@@ -227,12 +231,14 @@ export default function SidebarContent({
 
       {/* Sign out */}
 
-      <div className="px-5 pb-5 pt-3">
+      <div className="p-5">
         {user ? (
           <button
             type="button"
             onClick={handleSignOut}
-            className="w-full rounded-lg bg-sky-700 py-2.5 text-sm font-medium text-white hover:bg-sky-800 dark:bg-blue-300 dark:text-gray-900 dark:hover:bg-blue-400 flex items-center justify-center"
+            className={`w-full rounded-lg bg-sky-700 py-2.5 text-sm font-medium 
+              text-white hover:bg-sky-800 dark:bg-blue-300 dark:text-gray-900 
+              dark:hover:bg-blue-400 flex items-center justify-center`}
           >
             <span className="inline-flex items-center gap-2">
               <LogoutIcon fontSize="small" />
@@ -262,11 +268,12 @@ function ThemeButton({
     <button
       type="button"
       onClick={onClick}
-      className={`flex-1 flex items-center justify-center gap-1 py-2 text-xs font-medium transition-colors ${
-        active
-          ? "bg-sky-700 text-white dark:bg-blue-300 dark:text-gray-900"
-          : "text-gray-700 hover:bg-sky-100 dark:text-white dark:hover:bg-zinc-700"
-      }`}
+      className={cn(
+        `flex-1 flex items-center justify-center gap-1 py-1.5 text-xs font-medium transition-colors`,
+        active && "bg-sky-700 text-white dark:bg-blue-300 dark:text-gray-900",
+        !active &&
+          "text-gray-700 hover:bg-sky-100 dark:text-white dark:hover:bg-zinc-700 ",
+      )}
     >
       {icon}
       {label}
@@ -289,7 +296,8 @@ function MenuLink({
     <Link
       href={href}
       onClick={onClick}
-      className="flex items-center gap-3 rounded-lg px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700"
+      className={`flex items-center gap-3 rounded-lg px-4 py-2 hover:bg-gray-100
+        dark:hover:bg-gray-700`}
     >
       <Box sx={{ color: "primary.main" }}>{icon}</Box>
       <Typography variant="body2" fontWeight={500} color="text.primary">
@@ -298,3 +306,23 @@ function MenuLink({
     </Link>
   );
 }
+
+const PrefBadge = ({
+  text,
+  type,
+}: {
+  text: string;
+  type: "restriction" | "allergy";
+}) => {
+  return (
+    <span
+      className={cn(
+        `rounded-md px-3 py-1 text-xs font-bold text-white`,
+        type === "restriction" && "bg-red-600",
+        type === "allergy" && "bg-orange-500",
+      )}
+    >
+      {formatDietaryKey(text)}
+    </span>
+  );
+};
diff --git a/apps/next/src/components/ui/status.tsx b/apps/next/src/components/ui/status.tsx
index 0f733fa8..8768f895 100644
--- a/apps/next/src/components/ui/status.tsx
+++ b/apps/next/src/components/ui/status.tsx
@@ -23,7 +23,9 @@ function StatusDot({ status }: StatusDotProps) {
         status === HallStatusEnum.OPEN && "bg-emerald-500",
         status === HallStatusEnum.CLOSED && "bg-red-500",
         status === HallStatusEnum.PREVIEW && "bg-sky-500",
-        status === HallStatusEnum.ERROR && "bg-amber-500",
+        (status === HallStatusEnum.ERROR ||
+          status === HallStatusEnum.LOADING) &&
+          "bg-amber-500 animate-pulse",
       )}
     />
   );
@@ -35,6 +37,8 @@ function StatusDot({ status }: StatusDotProps) {
 interface StatusProps {
   /** The current status of the dining hall. */
   status: HallStatusEnum;
+  /** If on mobile */
+  mobile?: boolean;
 }
 
 /**
@@ -42,7 +46,7 @@ interface StatusProps {
  * @param {StatusProps} props - The props for the component.
  * @returns A JSX element representing the dining hall status.
  */
-function DiningHallStatus({ status }: StatusProps): React.JSX.Element {
+function DiningHallStatus({ status, mobile }: StatusProps): React.JSX.Element {
   let statusMessage: string = "";
 
   switch (status) {
@@ -50,13 +54,16 @@ function DiningHallStatus({ status }: StatusProps): React.JSX.Element {
       statusMessage = "Open";
       break;
     case HallStatusEnum.CLOSED:
-      statusMessage = `Closed`;
+      statusMessage = "Closed";
       break;
     case HallStatusEnum.ERROR:
-      statusMessage = `Error (Cannot obtain scheduling info)`;
+      statusMessage = "Error (Cannot obtain scheduling info)";
       break;
     case HallStatusEnum.PREVIEW:
-      statusMessage = `Preview`;
+      statusMessage = "Preview";
+      break;
+    case HallStatusEnum.LOADING:
+      statusMessage = "Loading..";
       break;
     default:
       break;
@@ -65,7 +72,7 @@ function DiningHallStatus({ status }: StatusProps): React.JSX.Element {
   return (
     <div className="flex items-center gap-2">
       <StatusDot status={status} />
-      <span>{statusMessage}</span>
+      <span className={cn(mobile && "font-bold")}>{statusMessage}</span>
     </div>
   );
 }
diff --git a/apps/next/src/components/ui/toolbar.tsx b/apps/next/src/components/ui/toolbar.tsx
index aca71f15..967147b5 100644
--- a/apps/next/src/components/ui/toolbar.tsx
+++ b/apps/next/src/components/ui/toolbar.tsx
@@ -336,7 +336,7 @@ export function DesktopToolbar(): React.JSX.Element {
         }}
         PaperProps={{
           className:
-            "bg-transparent shadow-none p-0 w-[357px] max-h-[658px] mt-1",
+            "bg-transparent shadow-none p-0 w-[300px] max-h-[658px] mt-1 rounded-2xl",
         }}
         MenuListProps={{
           className: "p-0",
diff --git a/apps/next/src/context/useRestaurantStore.ts b/apps/next/src/context/useRestaurantStore.ts
index f67c2fa7..4c195433 100644
--- a/apps/next/src/context/useRestaurantStore.ts
+++ b/apps/next/src/context/useRestaurantStore.ts
@@ -29,7 +29,7 @@ export const useHallDerived = () =>
     const { hallData, selectedDate, today } = state;
 
     const availablePeriodTimes: Record<string, [Date, Date]> = {};
-    let derivedHallStatus = HallStatusEnum.CLOSED;
+    let derivedHallStatus = HallStatusEnum.LOADING;
     let openTime: Date | undefined;
     let closeTime: Date | undefined;
 
diff --git a/apps/next/src/utils/types.ts b/apps/next/src/utils/types.ts
index 51d30f7e..5e1f5d19 100644
--- a/apps/next/src/utils/types.ts
+++ b/apps/next/src/utils/types.ts
@@ -31,6 +31,7 @@ enum HallStatusEnum {
   CLOSED,
   ERROR,
   PREVIEW,
+  LOADING,
 }
 
 /**
diff --git a/apps/next/tailwind.config.ts b/apps/next/tailwind.config.ts
index 39da125d..423d29fb 100644
--- a/apps/next/tailwind.config.ts
+++ b/apps/next/tailwind.config.ts
@@ -1,63 +1,70 @@
 import type { Config } from "tailwindcss";
 
 export default {
-		important: "html",
-    darkMode: "class",
-    content: [
-    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-  	extend: {
-  		colors: {
-  			background: 'hsl(var(--background))',
-  			foreground: 'hsl(var(--foreground))',
-  			card: {
-  				DEFAULT: 'hsl(var(--card))',
-  				foreground: 'hsl(var(--card-foreground))'
-  			},
-  			popover: {
-  				DEFAULT: 'hsl(var(--popover))',
-  				foreground: 'hsl(var(--popover-foreground))'
-  			},
-  			primary: {
-  				DEFAULT: 'hsl(var(--primary))',
-  				foreground: 'hsl(var(--primary-foreground))'
-  			},
-  			secondary: {
-  				DEFAULT: 'hsl(var(--secondary))',
-  				foreground: 'hsl(var(--secondary-foreground))'
-  			},
-  			muted: {
-  				DEFAULT: 'hsl(var(--muted))',
-  				foreground: 'hsl(var(--muted-foreground))'
-  			},
-  			accent: {
-  				DEFAULT: 'hsl(var(--accent))',
-  				foreground: 'hsl(var(--accent-foreground))'
-  			},
-  			destructive: {
-  				DEFAULT: 'hsl(var(--destructive))',
-  				foreground: 'hsl(var(--destructive-foreground))'
-  			},
-  			border: 'hsl(var(--border))',
-  			input: 'hsl(var(--input))',
-  			ring: 'hsl(var(--ring))',
-  			chart: {
-  				'1': 'hsl(var(--chart-1))',
-  				'2': 'hsl(var(--chart-2))',
-  				'3': 'hsl(var(--chart-3))',
-  				'4': 'hsl(var(--chart-4))',
-  				'5': 'hsl(var(--chart-5))'
-  			}
-  		},
-  		borderRadius: {
-  			lg: 'var(--radius)',
-  			md: 'calc(var(--radius) - 2px)',
-  			sm: 'calc(var(--radius) - 4px)'
-  		}
-  	}
-  },
-  plugins: [require("tailwindcss-animate")],
+	important: "html",
+	darkMode: "class",
+	content: [
+		"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
+		"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+		"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+	],
+	theme: {
+		extend: {
+			colors: {
+				background: 'hsl(var(--background))',
+				foreground: 'hsl(var(--foreground))',
+				card: {
+					DEFAULT: 'hsl(var(--card))',
+					foreground: 'hsl(var(--card-foreground))'
+				},
+				popover: {
+					DEFAULT: 'hsl(var(--popover))',
+					foreground: 'hsl(var(--popover-foreground))'
+				},
+				primary: {
+					DEFAULT: 'hsl(var(--primary))',
+					foreground: 'hsl(var(--primary-foreground))'
+				},
+				secondary: {
+					DEFAULT: 'hsl(var(--secondary))',
+					foreground: 'hsl(var(--secondary-foreground))'
+				},
+				muted: {
+					DEFAULT: 'hsl(var(--muted))',
+					foreground: 'hsl(var(--muted-foreground))'
+				},
+				accent: {
+					DEFAULT: 'hsl(var(--accent))',
+					foreground: 'hsl(var(--accent-foreground))'
+				},
+				destructive: {
+					DEFAULT: 'hsl(var(--destructive))',
+					foreground: 'hsl(var(--destructive-foreground))'
+				},
+				border: 'hsl(var(--border))',
+				input: 'hsl(var(--input))',
+				ring: 'hsl(var(--ring))',
+				'surface-elevated': 'var(--surface-elevated)',
+				'surface-modal': 'var(--surface-modal)',
+				'button-primary-bg': 'var(--button-primary-bg)',
+				'primary-accent': 'var(--primary-accent)',
+				'button-primary-fg': 'var(--button-primary-fg)',
+				'button-disabled-bg': 'var(--button-disabled-bg)',
+				'button-disabled-fg': 'var(--button-disabled-fg)',
+				chart: {
+					'1': 'hsl(var(--chart-1))',
+					'2': 'hsl(var(--chart-2))',
+					'3': 'hsl(var(--chart-3))',
+					'4': 'hsl(var(--chart-4))',
+					'5': 'hsl(var(--chart-5))'
+				}
+			},
+			borderRadius: {
+				lg: 'var(--radius)',
+				md: 'calc(var(--radius) - 2px)',
+				sm: 'calc(var(--radius) - 4px)'
+			}
+		}
+	},
+	plugins: [require("tailwindcss-animate")],
 } satisfies Config;
diff --git a/packages/api/src/dishes/services.ts b/packages/api/src/dishes/services.ts
index e4d70900..23eb9755 100644
--- a/packages/api/src/dishes/services.ts
+++ b/packages/api/src/dishes/services.ts
@@ -14,7 +14,7 @@ export async function upsertDishesIfMissing(
   if (dishData.length === 0) return [];
 
   try {
-    const results = db
+    const results = await db
       .insert(dishes)
       .values(dishData)
       .onConflictDoNothing()