diff --git a/components/EmptyScreen.tsx b/components/EmptyScreen.tsx
index feadb03632..a3af997535 100644
--- a/components/EmptyScreen.tsx
+++ b/components/EmptyScreen.tsx
@@ -13,13 +13,13 @@ export default function EmptyScreen({
 }) {
   return (
     <>
-      <div className="min-h-80 border border-dashed rounded-sm flex justify-center items-center flex-col my-6">
+      <div className="flex flex-col items-center justify-center my-6 border border-dashed rounded-sm min-h-80 dark:border-gray-500">
         <div className="bg-white w-[72px] h-[72px] flex justify-center items-center rounded-full">
           <Icon className="inline-block w-10 h-10 bg-white" />
         </div>
         <div className="max-w-[420px] text-center">
-          <h2 className="text-lg font-medium mt-6 mb-1">{headline}</h2>
-          <p className="text-sm leading-6 text-gray-600">{description}</p>
+          <h2 className="mt-6 mb-1 text-lg font-medium dark:text-gray-200">{headline}</h2>
+          <p className="text-sm leading-6 text-gray-600 dark:text-gray-400">{description}</p>
         </div>
       </div>
     </>
diff --git a/components/NavTabs.tsx b/components/NavTabs.tsx
index d8e66a18a6..2e7c2047eb 100644
--- a/components/NavTabs.tsx
+++ b/components/NavTabs.tsx
@@ -17,7 +17,7 @@ const NavTabs: FC<Props> = ({ tabs, linkProps }) => {
   const router = useRouter();
   return (
     <>
-      <nav className="-mb-px flex space-x-2 sm:space-x-5" aria-label="Tabs">
+      <nav className="flex -mb-px space-x-2 sm:space-x-5" aria-label="Tabs">
         {tabs.map((tab) => {
           const isCurrent = router.asPath === tab.href;
           return (
@@ -25,15 +25,17 @@ const NavTabs: FC<Props> = ({ tabs, linkProps }) => {
               <a
                 className={classNames(
                   isCurrent
-                    ? "border-neutral-900 text-neutral-900"
-                    : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
+                    ? "border-neutral-900 text-neutral-900 dark:text-gray-200 dark:border-gray-200"
+                    : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-100",
                   "group inline-flex items-center py-4 px-1 border-b-2 font-medium text-sm"
                 )}
                 aria-current={isCurrent ? "page" : undefined}>
                 {tab.icon && (
                   <tab.icon
                     className={classNames(
-                      isCurrent ? "text-neutral-900" : "text-gray-400 group-hover:text-gray-500",
+                      isCurrent
+                        ? "text-neutral-900"
+                        : "text-gray-400 group-hover:text-gray-500 dark:group-hover:text-gray-100",
                       "-ml-0.5 mr-2 h-5 w-5 hidden sm:inline-block"
                     )}
                     aria-hidden="true"
diff --git a/components/booking/BookingListItem.tsx b/components/booking/BookingListItem.tsx
index 3f218396b0..a33413e355 100644
--- a/components/booking/BookingListItem.tsx
+++ b/components/booking/BookingListItem.tsx
@@ -75,7 +75,7 @@ function BookingListItem(booking: BookingItem) {
   return (
     <tr>
       <td className="hidden px-6 py-4 align-top sm:table-cell whitespace-nowrap">
-        <div className="text-sm leading-6 text-gray-900">{startTime}</div>
+        <div className="text-sm leading-6 text-gray-900 dark:text-gray-200">{startTime}</div>
         <div className="text-sm text-gray-500">
           {dayjs(booking.startTime).format("HH:mm")} - {dayjs(booking.endTime).format("HH:mm")}
         </div>
@@ -87,14 +87,14 @@ function BookingListItem(booking: BookingItem) {
               {t("unconfirmed")}
             </span>
           )}
-          <div className="text-sm font-medium text-gray-900">
+          <div className="text-sm font-medium text-gray-900 dark:text-gray-200">
             {startTime}:{" "}
             <small className="text-sm text-gray-500">
               {dayjs(booking.startTime).format("HH:mm")} - {dayjs(booking.endTime).format("HH:mm")}
             </small>
           </div>
         </div>
-        <div className="text-sm font-medium leading-6 truncate text-neutral-900 max-w-52 md:max-w-96">
+        <div className="text-sm font-medium leading-6 truncate text-neutral-900 max-w-52 md:max-w-96 dark:text-white">
           {booking.eventType?.team && <strong>{booking.eventType.team.name}: </strong>}
           {booking.title}
           {!booking.confirmed && !booking.rejected && (
@@ -109,7 +109,7 @@ function BookingListItem(booking: BookingItem) {
           </div>
         )}
         {booking.attendees.length !== 0 && (
-          <div className="text-sm text-gray-900 hover:text-blue-500">
+          <div className="text-sm text-gray-900 hover:text-blue-500 dark:text-gray-200">
             <a href={"mailto:" + booking.attendees[0].email}>{booking.attendees[0].email}</a>
           </div>
         )}
diff --git a/components/ui/Button.tsx b/components/ui/Button.tsx
index 2138ca0644..7bf07a57cb 100644
--- a/components/ui/Button.tsx
+++ b/components/ui/Button.tsx
@@ -63,12 +63,12 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
         // different styles depending on color
         color === "primary" &&
           (disabled
-            ? "border border-transparent bg-gray-400 text-white"
+            ? "border border-transparent bg-gray-400 text-white dark:bg-gray-600"
             : "border border-transparent dark:text-black text-white bg-brand dark:bg-white hover:bg-opacity-90 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-neutral-900"),
         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-600 dark:hover:text-white"),
         color === "minimal" &&
           (disabled
             ? "text-gray-400 bg-transparent"
diff --git a/pages/bookings/[status].tsx b/pages/bookings/[status].tsx
index fd237910b5..462b1fe23c 100644
--- a/pages/bookings/[status].tsx
+++ b/pages/bookings/[status].tsx
@@ -54,9 +54,11 @@ export default function Bookings() {
               {(query.status === "loading" || query.status === "idle") && <Loader />}
               {query.status === "success" && !isEmpty && (
                 <>
-                  <div className="mt-6 overflow-hidden border border-b border-gray-200 rounded-sm">
-                    <table className="min-w-full divide-y divide-gray-200">
-                      <tbody className="bg-white divide-y divide-gray-200" data-testid="bookings">
+                  <div className="mt-6 overflow-hidden border border-b border-gray-200 rounded-sm dark:border-gray-500">
+                    <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-400">
+                      <tbody
+                        className="bg-white divide-y divide-gray-200 dark:bg-gray-700"
+                        data-testid="bookings">
                         {query.data.pages.map((page, index) => (
                           <Fragment key={index}>
                             {page.bookings.map((booking) => (
@@ -67,7 +69,7 @@ export default function Bookings() {
                       </tbody>
                     </table>
                   </div>
-                  <div className="text-center p-4" ref={buttonInView.ref}>
+                  <div className="p-4 text-center" ref={buttonInView.ref}>
                     <Button
                       loading={query.isFetchingNextPage}
                       disabled={!query.hasNextPage}