diff --git a/app/@modal/(.)account/sign-in/page.tsx b/app/@modal/(.)account/sign-in/page.tsx
index fe5b408..8bc1478 100644
--- a/app/@modal/(.)account/sign-in/page.tsx
+++ b/app/@modal/(.)account/sign-in/page.tsx
@@ -49,7 +49,7 @@ export default function Page() {
                 {...getFloatingProps()}
                 className="flex p-4"
               >
-                <div className="h-fit max-w-2xl overflow-hidden rounded-2xl bg-primary-main">
+                <div className="h-fit max-w-2xl overflow-hidden rounded-2xl bg-popup">
                   <div className="flex flex-col p-4 @lg/sign-in:p-8">
                     <div className="mb-2 flex w-full flex-row">
                       <div className="grow items-center text-3xl font-semibold">
diff --git a/app/@modal/(.)schedule/event-groups/[alias]/export/page.tsx b/app/@modal/(.)schedule/event-groups/[alias]/export/page.tsx
index ae1a16f..ee13969 100644
--- a/app/@modal/(.)schedule/event-groups/[alias]/export/page.tsx
+++ b/app/@modal/(.)schedule/event-groups/[alias]/export/page.tsx
@@ -66,7 +66,7 @@ export default function Page({ params: { alias } }: Props) {
                 {...getFloatingProps()}
                 className="flex h-fit w-full flex-col p-4 @2xl/export:w-3/4 @5xl/export:w-1/2"
               >
-                <div className="overflow-hidden rounded-2xl bg-primary-main">
+                <div className="overflow-hidden rounded-2xl bg-popup">
                   <div className="flex flex-col p-4 @2xl/export:p-8">
                     {/* Heading and description */}
                     <div className="mb-2 flex w-full flex-row">
diff --git a/app/@modal/(.)schedule/event-groups/[alias]/page.tsx b/app/@modal/(.)schedule/event-groups/[alias]/page.tsx
index 14fa539..5365afc 100644
--- a/app/@modal/(.)schedule/event-groups/[alias]/page.tsx
+++ b/app/@modal/(.)schedule/event-groups/[alias]/page.tsx
@@ -59,7 +59,7 @@ export default function Page({ params: { alias } }: Props) {
                 {...getFloatingProps()}
                 className="flex h-fit w-full flex-col p-4 @2xl/event:w-3/4 @5xl/event:w-1/2"
               >
-                <div className="overflow-hidden rounded-2xl bg-primary-main">
+                <div className="overflow-hidden rounded-2xl bg-popup">
                   {/* EventGroup banner */}
                   <div
                     style={{
diff --git a/components/layout/UserMenu.tsx b/components/layout/UserMenu.tsx
index c68284b..e816c78 100644
--- a/components/layout/UserMenu.tsx
+++ b/components/layout/UserMenu.tsx
@@ -93,7 +93,7 @@ function UserMenu({ isMobile, isSidebar }: UserMenuProps) {
               style={{ ...floatingStyles, ...transitionStyles }}
               {...getFloatingProps()}
               className={clsx(
-                "absolute z-10 w-fit rounded-2xl border-2 border-border/50 bg-primary-main p-4",
+                "absolute z-10 w-fit rounded-2xl border-2 border-border/50 bg-popup p-4",
                 isMobile
                   ? "left-0 top-[18p]"
                   : isSidebar
@@ -129,7 +129,7 @@ function UserMenu({ isMobile, isSidebar }: UserMenuProps) {
                       setIsOpen(false);
                       setSidebarOpened(false);
                     }}
-                    className="flex w-full cursor-pointer flex-row items-center justify-center gap-2 whitespace-nowrap rounded-2xl bg-secondary-main px-6 py-2 text-center text-text-main/75 hover:bg-secondary-hover"
+                    className="flex w-full cursor-pointer flex-row items-center justify-center gap-2 whitespace-nowrap rounded-2xl bg-border px-6 py-2 text-center text-text-main/75 hover:bg-border-hover"
                   >
                     <span className="icon-[material-symbols--logout] text-2xl" />
                     Sign out