diff --git a/components/ui/Button.tsx b/components/ui/Button.tsx
index 054bbd6699..b39ae11d40 100644
--- a/components/ui/Button.tsx
+++ b/components/ui/Button.tsx
@@ -1,15 +1,26 @@
-import { useState } from 'react';
-
 export default function Button(props) {
-  return(
-    <button type="submit" className="btn btn-primary">
+  return (
+    <button type="submit" className="btn btn-primary dark:btn-white">
       {!props.loading && props.children}
-      {props.loading &&
-        <svg className="animate-spin mx-4 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+      {props.loading && (
+        <svg
+          className="animate-spin mx-4 h-5 w-5 text-white"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24">
+          <circle
+            className="opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            strokeWidth="4"></circle>
+          <path
+            className="opacity-75"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
         </svg>
-      }
+      )}
     </button>
   );
 }
diff --git a/pages/[user].tsx b/pages/[user].tsx
index 8be933b0eb..209b213b8d 100644
--- a/pages/[user].tsx
+++ b/pages/[user].tsx
@@ -14,7 +14,7 @@ export default function User(props): User {
   const eventTypes = props.eventTypes.map((type) => (
     <div
       key={type.id}
-      className="group relative dark:bg-neutral-800 dark:border-neutral-700 dark:hover:border-neutral-600 bg-white hover:bg-gray-50 border border-neutral-200 hover:border-black rounded-sm">
+      className="group relative dark:bg-neutral-900 dark:border-0 dark:hover:border-neutral-600 bg-white hover:bg-gray-50 border border-neutral-200 hover:border-black rounded-sm">
       <ArrowRightIcon className="absolute transition-opacity h-4 w-4 right-3 top-3 text-black dark:text-white opacity-0 group-hover:opacity-100" />
       <Link href={`/${props.user.username}/${type.slug}`}>
         <a className="block px-6 py-4">
@@ -22,21 +22,24 @@ export default function User(props): User {
           <div className="mt-2 flex space-x-4">
             <div className="flex text-sm text-neutral-500">
               <ClockIcon
-                className="flex-shrink-0 mt-0.5 mr-1.5 h-4 w-4 text-neutral-400"
+                className="flex-shrink-0 mt-0.5 mr-1.5 h-4 w-4 text-neutral-400 dark:text-white"
                 aria-hidden="true"
               />
-              <p>{type.length}m</p>
+              <p className="dark:text-white">{type.length}m</p>
             </div>
             <div className="flex text-sm min-w-16 text-neutral-500">
-              <UserIcon className="flex-shrink-0 mt-0.5 mr-1.5 h-4 w-4 text-neutral-400" aria-hidden="true" />
-              <p>1-on-1</p>
+              <UserIcon
+                className="flex-shrink-0 mt-0.5 mr-1.5 h-4 w-4 text-neutral-400 dark:text-white"
+                aria-hidden="true"
+              />
+              <p className="dark:text-white">1-on-1</p>
             </div>
             <div className="flex text-sm text-neutral-500">
               <InformationCircleIcon
-                className="flex-shrink-0 mt-0.5 mr-1.5 h-4 w-4 text-neutral-400"
+                className="flex-shrink-0 mt-0.5 mr-1.5 h-4 w-4 text-neutral-400 dark:text-white"
                 aria-hidden="true"
               />
-              <p>{type.description}</p>
+              <p className="dark:text-white">{type.description}</p>
             </div>
           </div>
         </a>
@@ -45,7 +48,7 @@ export default function User(props): User {
   ));
   return (
     isReady && (
-      <div className="bg-neutral-50 dark:bg-neutral-900 h-screen">
+      <div className="bg-neutral-50 dark:bg-black h-screen">
         <Head>
           <title>{props.user.name || props.user.username} | Calendso</title>
           <link rel="icon" href="/favicon.ico" />
diff --git a/pages/[user]/book.tsx b/pages/[user]/book.tsx
index 22ceaab0f8..3e4da54d0d 100644
--- a/pages/[user]/book.tsx
+++ b/pages/[user]/book.tsx
@@ -15,8 +15,8 @@ import Avatar from "../../components/Avatar";
 import Button from "../../components/ui/Button";
 import { EventTypeCustomInputType } from "../../lib/eventTypeInput";
 import Theme from "@components/Theme";
-import { ReactMultiEmail, isEmail } from 'react-multi-email';
-import 'react-multi-email/style.css';
+import { ReactMultiEmail } from "react-multi-email";
+import "react-multi-email/style.css";
 
 dayjs.extend(utc);
 dayjs.extend(timezone);
@@ -161,9 +161,9 @@ export default function Book(props: any): JSX.Element {
         </Head>
 
         <main className="max-w-3xl mx-auto my-0 sm:my-24">
-          <div className="dark:bg-gray-800 bg-white overflow-hidden sm:shadow sm:rounded-lg">
+          <div className="dark:bg-neutral-900 bg-white overflow-hidden border border-gray-200 dark:border-0 sm:rounded-sm">
             <div className="sm:flex px-4 py-5 sm:p-4">
-              <div className="sm:w-1/2 sm:border-r sm:dark:border-gray-900">
+              <div className="sm:w-1/2 sm:border-r sm:dark:border-black">
                 <Avatar user={props.user} className="w-16 h-16 rounded-full mb-4" />
                 <h2 className="font-medium dark:text-gray-300 text-gray-500">{props.user.name}</h2>
                 <h1 className="text-3xl font-semibold dark:text-white text-gray-800 mb-4">
@@ -179,7 +179,7 @@ export default function Book(props: any): JSX.Element {
                     {locationInfo(selectedLocation).address}
                   </p>
                 )}
-                <p className="text-blue-600 mb-4">
+                <p className="text-green-500 mb-4">
                   <CalendarIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
                   {preferredTimeZone &&
                     dayjs(date)
@@ -200,7 +200,7 @@ export default function Book(props: any): JSX.Element {
                         name="name"
                         id="name"
                         required
-                        className="shadow-sm dark:bg-gray-700 dark:text-white dark:border-gray-900 focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md"
+                        className="shadow-sm dark:bg-black dark:text-white dark:border-gray-900 focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md"
                         placeholder="John Doe"
                         defaultValue={props.booking ? props.booking.attendees[0].name : ""}
                       />
@@ -218,7 +218,7 @@ export default function Book(props: any): JSX.Element {
                         name="email"
                         id="email"
                         required
-                        className="shadow-sm dark:bg-gray-700 dark:text-white dark:border-gray-900 focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md"
+                        className="shadow-sm dark:bg-black dark:text-white dark:border-gray-900 focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md"
                         placeholder="you@example.com"
                         defaultValue={props.booking ? props.booking.attendees[0].email : ""}
                       />
@@ -260,7 +260,7 @@ export default function Book(props: any): JSX.Element {
                           placeholder="Enter phone number"
                           id="phone"
                           required
-                          className="shadow-sm dark:bg-gray-700 dark:text-white dark:border-gray-900 focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md"
+                          className="shadow-sm dark:bg-black dark:text-white dark:border-gray-900 focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md"
                           onChange={() => {
                             /* DO NOT REMOVE: Callback required by PhoneInput, comment added to satisfy eslint:no-empty-function */
                           }}
@@ -286,7 +286,7 @@ export default function Book(props: any): JSX.Element {
                               id={"custom_" + input.id}
                               required={input.required}
                               rows={3}
-                              className="shadow-sm dark:bg-gray-700 dark:text-white dark:border-gray-900 focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md"
+                              className="shadow-sm dark:bg-black dark:text-white dark:border-gray-900 focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md"
                               placeholder=""
                             />
                           )}
@@ -296,7 +296,7 @@ export default function Book(props: any): JSX.Element {
                               name={"custom_" + input.id}
                               id={"custom_" + input.id}
                               required={input.required}
-                              className="shadow-sm dark:bg-gray-700 dark:text-white dark:border-gray-900 focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md"
+                              className="shadow-sm dark:bg-black dark:text-white dark:border-gray-900 focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md"
                               placeholder=""
                             />
                           )}
@@ -306,7 +306,7 @@ export default function Book(props: any): JSX.Element {
                               name={"custom_" + input.id}
                               id={"custom_" + input.id}
                               required={input.required}
-                              className="shadow-sm dark:bg-gray-700 dark:text-white dark:border-gray-900 focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md"
+                              className="shadow-sm dark:bg-black dark:text-white dark:border-gray-900 focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md"
                               placeholder=""
                             />
                           )}
@@ -316,7 +316,7 @@ export default function Book(props: any): JSX.Element {
                                 type="checkbox"
                                 name={"custom_" + input.id}
                                 id={"custom_" + input.id}
-                                className="focus:ring-black h-4 w-4 text-blue-600 border-gray-300 rounded mr-2"
+                                className="focus:ring-black h-4 w-4 text-black border-gray-300 rounded mr-2"
                                 placeholder=""
                               />
                               <label
@@ -329,28 +329,22 @@ export default function Book(props: any): JSX.Element {
                         </div>
                       ))}
                   <div className="mb-4">
-                      {!guestToggle && 
-                        <label
-                          onClick={toggleGuestEmailInput}
-                          htmlFor="guests"
-                          className="block text-sm font-medium dark:text-white text-blue-500 mb-1 hover:cursor-pointer">
-                          + Additional Guests
-                        </label>       
-
-                      }
-                      {
-                        guestToggle &&
-                        <ReactMultiEmail
+                    {!guestToggle && (
+                      <label
+                        onClick={toggleGuestEmailInput}
+                        htmlFor="guests"
+                        className="block text-sm font-medium text-blue-500 mb-1 hover:cursor-pointer">
+                        + Additional Guests
+                      </label>
+                    )}
+                    {guestToggle && (
+                      <ReactMultiEmail
                         placeholder="Input your Email Address"
                         emails={guestEmails}
                         onChange={(_emails: string[]) => {
                           setGuestEmails(_emails);
                         }}
-                        getLabel={(
-                          email: string,
-                          index: number,
-                          removeEmail: (index: number) => void
-                        ) => {
+                        getLabel={(email: string, index: number, removeEmail: (index: number) => void) => {
                           return (
                             <div data-tag key={index}>
                               {email}
@@ -360,10 +354,9 @@ export default function Book(props: any): JSX.Element {
                             </div>
                           );
                         }}
-                      />                     
-                      }
-
-                  </div>    
+                      />
+                    )}
+                  </div>
                   <div className="mb-4">
                     <label
                       htmlFor="notes"
@@ -374,13 +367,14 @@ export default function Book(props: any): JSX.Element {
                       name="notes"
                       id="notes"
                       rows={3}
-                      className="shadow-sm dark:bg-gray-700 dark:text-white dark:border-gray-900 focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md"
+                      className="shadow-sm dark:bg-black dark:text-white dark:border-gray-900 focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md"
                       placeholder="Please share anything that will help prepare for our meeting."
                       defaultValue={props.booking ? props.booking.description : ""}
                     />
                   </div>
                   <div className="flex items-start">
-                    <Button type="submit" loading={loading} className="btn btn-primary">
+                    {/* TODO: add styling props to <Button variant="" color="" /> and get rid of btn-primary */}
+                    <Button type="submit" loading={loading}>
                       {rescheduleUid ? "Reschedule" : "Confirm"}
                     </Button>
                     <Link
@@ -391,7 +385,7 @@ export default function Book(props: any): JSX.Element {
                         props.eventType.slug +
                         (rescheduleUid ? "?rescheduleUid=" + rescheduleUid : "")
                       }>
-                      <a className="ml-2 btn btn-white">Cancel</a>
+                      <a className="ml-2 text-sm dark:text-white p-2">Cancel</a>
                     </Link>
                   </div>
                 </form>
@@ -452,8 +446,12 @@ export async function getServerSideProps(context) {
     },
   });
 
-  const eventTypeObject = [eventType].map(e => {
-    return ({...e, periodStartDate:e.periodStartDate?.toString() ?? null, periodEndDate:e.periodEndDate?.toString() ?? null,})
+  const eventTypeObject = [eventType].map((e) => {
+    return {
+      ...e,
+      periodStartDate: e.periodStartDate?.toString() ?? null,
+      periodEndDate: e.periodEndDate?.toString() ?? null,
+    };
   })[0];
 
   let booking = null;