diff --git a/apps/web/components/booking/BookingDescription.tsx b/apps/web/components/booking/BookingDescription.tsx
index 75d98b9051..8e4aa8b6c9 100644
--- a/apps/web/components/booking/BookingDescription.tsx
+++ b/apps/web/components/booking/BookingDescription.tsx
@@ -132,9 +132,9 @@ const BookingDescription: FC<Props> = (props) => {
                       variant="gray"
                       className={classNames(
                         duration === dur.toString()
-                          ? "bg-darkgray-200 text-darkgray-900 dark:bg-darkmodebrand dark:!text-darkmodebrandcontrast"
-                          : "hover:bg-darkgray-200 dark:hover:bg-darkmodebrand hover:text-darkgray-900 dark:hover:text-darkmodebrandcontrast dark:bg-darkgray-200 bg-emphasis text-emphasis dark:text-inverted",
-                        "cursor-pointer"
+                          ? "bg-emphasis border-emphasis text-emphasis "
+                          : "bg-subtle text-default border-transparent ",
+                        "cursor-pointer border"
                       )}
                       onClick={() => {
                         setDuration(dur);
diff --git a/packages/features/shell/Shell.tsx b/packages/features/shell/Shell.tsx
index 3211e81c0c..a52c9de9a4 100644
--- a/packages/features/shell/Shell.tsx
+++ b/packages/features/shell/Shell.tsx
@@ -715,7 +715,7 @@ const MobileNavigationMoreItem: React.FC<{
   if (!shouldDisplayNavigationItem) return null;
 
   return (
-    <li className="border-b last:border-b-0" key={item.name}>
+    <li className="border-subtle border-b last:border-b-0" key={item.name}>
       <Link href={item.href} className="hover:bg-subtle flex items-center justify-between p-5">
         <span className="text-default flex items-center font-semibold ">
           {item.icon && <item.icon className="h-5 w-5 flex-shrink-0 ltr:mr-3 rtl:ml-3" aria-hidden="true" />}
@@ -912,7 +912,7 @@ function TopNav() {
 }
 
 export const MobileNavigationMoreItems = () => (
-  <ul className="mt-2 rounded-md border">
+  <ul className="border-subtle mt-2 rounded-md border">
     {mobileNavigationMoreItems.map((item) => (
       <MobileNavigationMoreItem key={item.name} item={item} />
     ))}