diff --git a/apps/api b/apps/api
index 11e1312e..378cbf8f 160000
--- a/apps/api
+++ b/apps/api
@@ -1 +1 @@
-Subproject commit 11e1312e3a6c831b35745b2e8aef657048fd470a
+Subproject commit 378cbf8f3a67ea7877296f1da02edb2b6e3efbce
diff --git a/apps/web/components/booking/DatePicker.tsx b/apps/web/components/booking/DatePicker.tsx
index da5ed3b1..488e9323 100644
--- a/apps/web/components/booking/DatePicker.tsx
+++ b/apps/web/components/booking/DatePicker.tsx
@@ -229,7 +229,7 @@ function DatePicker({
       className={
         "mt-8 sm:mt-0 sm:min-w-[455px] " +
         (date
-          ? "w-full sm:w-1/2 sm:border-r sm:pl-4 sm:pr-6 sm:dark:border-gray-800 md:w-1/3 "
+          ? "w-full sm:w-1/2 sm:border-r sm:pl-4 sm:pr-6 sm:dark:border-gray-700 md:w-1/3 "
           : "w-full sm:pl-4")
       }>
       <div className="mb-4 flex text-xl font-light text-gray-600">
diff --git a/apps/web/components/booking/pages/AvailabilityPage.tsx b/apps/web/components/booking/pages/AvailabilityPage.tsx
index 0966daa5..0bbff943 100644
--- a/apps/web/components/booking/pages/AvailabilityPage.tsx
+++ b/apps/web/components/booking/pages/AvailabilityPage.tsx
@@ -126,12 +126,12 @@ const AvailabilityPage = ({ profile, eventType, workingHours, previousPage }: Pr
             (selectedDate ? "max-w-5xl" : "max-w-3xl")
           }>
           {isReady && (
-            <div className="rounded-sm border-gray-200 bg-white dark:bg-gray-900 sm:dark:border-gray-600 md:border">
+            <div className="rounded-sm border-gray-200 bg-white dark:bg-gray-800 sm:dark:border-gray-600 md:border">
               {/* mobile: details */}
               <div className="block p-4 sm:p-8 md:hidden">
                 <div className="flex items-center">
                   <AvatarGroup
-                    border="border-2 dark:border-gray-900 border-white"
+                    border="border-2 dark:border-gray-800 border-white"
                     items={
                       [
                         { image: profile.image, alt: profile.name, title: profile.name },
@@ -176,11 +176,11 @@ const AvailabilityPage = ({ profile, eventType, workingHours, previousPage }: Pr
               <div className="px-4 sm:flex sm:p-4 sm:py-5">
                 <div
                   className={
-                    "hidden pr-8 sm:border-r sm:dark:border-gray-800 md:flex md:flex-col " +
+                    "hidden pr-8 sm:border-r sm:dark:border-gray-700 md:flex md:flex-col " +
                     (selectedDate ? "sm:w-1/3" : "sm:w-1/2")
                   }>
                   <AvatarGroup
-                    border="border-2 dark:border-gray-900 border-white"
+                    border="border-2 dark:border-gray-800 border-white"
                     items={
                       [
                         { image: profile.image, alt: profile.name, title: profile.name },
diff --git a/apps/web/components/booking/pages/BookingPage.tsx b/apps/web/components/booking/pages/BookingPage.tsx
index b34fc91a..b8bf2345 100644
--- a/apps/web/components/booking/pages/BookingPage.tsx
+++ b/apps/web/components/booking/pages/BookingPage.tsx
@@ -289,7 +289,7 @@ const BookingPage = ({ eventType, booking, profile }: BookingPageProps) => {
             <div className="px-4 py-5 sm:flex sm:p-4">
               <div className="sm:w-1/2 sm:border-r sm:dark:border-gray-800">
                 <AvatarGroup
-                  border="border-2 border-white dark:border-gray-900"
+                  border="border-2 border-white dark:border-gray-800"
                   size={14}
                   items={[{ image: profile.image || "", alt: profile.name || "" }].concat(
                     eventType.users
diff --git a/apps/web/components/team/screens/Team.tsx b/apps/web/components/team/screens/Team.tsx
index 2817cdab..f04707bf 100644
--- a/apps/web/components/team/screens/Team.tsx
+++ b/apps/web/components/team/screens/Team.tsx
@@ -28,7 +28,7 @@ const Team = ({ team }: TeamPageProps) => {
       "space-y-4",
       "p-4",
       "min-w-full sm:min-w-64 sm:max-w-64",
-      "bg-white dark:bg-neutral-900 dark:border-0 dark:bg-opacity-8",
+      "bg-white dark:bg-neutral-800 dark:border-neutral-700 dark:bg-opacity-8",
       "border border-neutral-200",
       "hover:cursor-pointer",
       "hover:border-brand dark:border-neutral-700 dark:hover:border-neutral-600",
diff --git a/apps/web/pages/[user].tsx b/apps/web/pages/[user].tsx
index 4b58f572..288dac2c 100644
--- a/apps/web/pages/[user].tsx
+++ b/apps/web/pages/[user].tsx
@@ -45,7 +45,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps>) {
         username={(user.username as string) || ""}
         // avatar={user.avatar || undefined}
       />
-      <div className="h-screen dark:bg-black">
+      <div className="h-screen dark:bg-neutral-900">
         <main className="mx-auto max-w-3xl px-4 py-24">
           <div className="mb-8 text-center">
             <AvatarSSR user={user} className="mx-auto mb-4 h-24 w-24" alt={nameOrUsername}></AvatarSSR>
@@ -72,7 +72,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps>) {
                 <div
                   key={type.id}
                   style={{ display: "flex" }}
-                  className="hover:border-brand group relative rounded-sm border border-neutral-200 bg-white hover:bg-gray-50 dark:border-0 dark:bg-neutral-900 dark:hover:border-neutral-600">
+                  className="hover:border-brand group relative rounded-sm border border-neutral-200 bg-white hover:bg-gray-50 dark:border-neutral-700 dark:bg-gray-800 dark:hover:border-neutral-600">
                   <ArrowRightIcon className="absolute right-3 top-3 h-4 w-4 text-black opacity-0 transition-opacity group-hover:opacity-100 dark:text-white" />
                   {/* Don't prefetch till the time we drop the amount of javascript in [user][type] page which is impacting score for [user] page */}
                   <Link
diff --git a/apps/web/pages/_document.tsx b/apps/web/pages/_document.tsx
index b0fb1826..5d64e61f 100644
--- a/apps/web/pages/_document.tsx
+++ b/apps/web/pages/_document.tsx
@@ -24,7 +24,7 @@ class MyDocument extends Document<Props> {
           <meta name="theme-color" content="#ffffff" />
           <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
         </Head>
-        <body className="bg-gray-100 dark:bg-black">
+        <body className="bg-gray-100 dark:bg-neutral-900">
           <Main />
           <NextScript />
         </body>
diff --git a/apps/web/pages/team/[slug].tsx b/apps/web/pages/team/[slug].tsx
index 385a5aff..56aa697e 100644
--- a/apps/web/pages/team/[slug].tsx
+++ b/apps/web/pages/team/[slug].tsx
@@ -33,7 +33,7 @@ function TeamPage({ team }: TeamPageProps) {
       {team.eventTypes.map((type) => (
         <li
           key={type.id}
-          className="hover:border-brand group relative rounded-sm border border-neutral-200 bg-white hover:bg-gray-50 dark:border-0 dark:bg-neutral-900 dark:hover:border-neutral-600">
+          className="hover:border-brand group relative rounded-sm border border-neutral-200 bg-white hover:bg-gray-50 dark:border-neutral-700 dark:bg-neutral-800 dark:hover:border-neutral-600">
           <ArrowRightIcon className="absolute right-3 top-3 h-4 w-4 text-black opacity-0 transition-opacity group-hover:opacity-100 dark:text-white" />
           <Link href={`${team.slug}/${type.slug}`}>
             <a className="flex justify-between px-6 py-4">
@@ -43,7 +43,7 @@ function TeamPage({ team }: TeamPageProps) {
               </div>
               <div className="mt-1">
                 <AvatarGroup
-                  border="border-2 border-white"
+                  border="border-2 border-white dark:border-neutral-800"
                   truncateAfter={4}
                   className="flex-shrink-0"
                   size={10}
@@ -88,7 +88,7 @@ function TeamPage({ team }: TeamPageProps) {
 
               <div className="relative mt-12">
                 <div className="absolute inset-0 flex items-center" aria-hidden="true">
-                  <div className="w-full border-t border-gray-200 dark:border-gray-900" />
+                  <div className="w-full border-t border-gray-200 dark:border-gray-700" />
                 </div>
                 <div className="relative flex justify-center">
                   <span className="dark:bg-brand dark:text-brandcontrast bg-gray-100 px-2 text-sm text-gray-500">
diff --git a/apps/website b/apps/website
index d9c37b32..b1b8ffda 160000
--- a/apps/website
+++ b/apps/website
@@ -1 +1 @@
-Subproject commit d9c37b322081604f5dee0ca471cb0f5d895af8bc
+Subproject commit b1b8ffda83a94760ab6763e02276c730c46a35fd
diff --git a/packages/ui/Button.tsx b/packages/ui/Button.tsx
index 6b63432d..664a269f 100644
--- a/packages/ui/Button.tsx
+++ b/packages/ui/Button.tsx
@@ -69,7 +69,7 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
         color === "secondary" &&
           (disabled
             ? "border border-gray-200 text-gray-400 bg-white"
-            : "border border-gray-300 text-gray-700 bg-white hover:bg-gray-50 hover:text-gray-900 hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-neutral-900 dark:bg-transparent dark:text-white dark:border-gray-800 dark:hover:bg-gray-900"),
+            : "border border-gray-300 text-gray-700 bg-white hover:bg-gray-50 hover:text-gray-900 hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-neutral-900 dark:bg-transparent dark:text-white dark:border-gray-800 dark:hover:bg-gray-800"),
         color === "minimal" &&
           (disabled
             ? "text-gray-400 bg-transparent"