diff --git a/components/booking/pages/BookingPage.tsx b/components/booking/pages/BookingPage.tsx
index 545eeb378a..811ac9344f 100644
--- a/components/booking/pages/BookingPage.tsx
+++ b/components/booking/pages/BookingPage.tsx
@@ -444,7 +444,6 @@ const BookingPage = (props: BookingPageProps) => {
                     />
                   </div>
                   <div className="flex items-start space-x-2">
-                    {/* TODO: add styling props to <Button variant="" color="" /> and get rid of btn-primary */}
                     <Button type="submit" loading={loading}>
                       {rescheduleUid ? t("reschedule") : t("confirm")}
                     </Button>
diff --git a/components/pages/eventtypes/CustomInputTypeForm.tsx b/components/pages/eventtypes/CustomInputTypeForm.tsx
index ca25567cfb..3704384965 100644
--- a/components/pages/eventtypes/CustomInputTypeForm.tsx
+++ b/components/pages/eventtypes/CustomInputTypeForm.tsx
@@ -5,6 +5,8 @@ import Select, { OptionTypeBase } from "react-select";
 
 import { useLocale } from "@lib/hooks/useLocale";
 
+import Button from "@components/ui/Button";
+
 interface Props {
   onSubmit: SubmitHandler<IFormInput>;
   onCancel: () => void;
@@ -82,7 +84,7 @@ const CustomInputTypeForm: FC<Props> = (props) => {
             <input
               type="text"
               id="placeholder"
-              className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-sm"
+              className="block w-full border-gray-300 rounded-sm shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm"
               defaultValue={selectedCustomInput?.placeholder}
               {...register("placeholder")}
             />
@@ -114,12 +116,10 @@ const CustomInputTypeForm: FC<Props> = (props) => {
         {...register("id", { valueAsNumber: true })}
       />
       <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
-        <button type="submit" className="btn btn-primary">
-          {t("save")}
-        </button>
-        <button onClick={onCancel} type="button" className="mr-2 btn btn-white">
+        <Button type="submit">{t("save")}</Button>
+        <Button onClick={onCancel} type="button" color="secondary" className="mr-2">
           {t("cancel")}
-        </button>
+        </Button>
       </div>
     </form>
   );
diff --git a/components/security/ChangePasswordSection.tsx b/components/security/ChangePasswordSection.tsx
index 4d59a6af17..49b3867ada 100644
--- a/components/security/ChangePasswordSection.tsx
+++ b/components/security/ChangePasswordSection.tsx
@@ -4,6 +4,8 @@ import { ErrorCode } from "@lib/auth";
 import { useLocale } from "@lib/hooks/useLocale";
 import showToast from "@lib/notification";
 
+import Button from "@components/ui/Button";
+
 const ChangePasswordSection = () => {
   const [oldPassword, setOldPassword] = useState("");
   const [newPassword, setNewPassword] = useState("");
@@ -97,11 +99,7 @@ const ChangePasswordSection = () => {
           </div>
           {errorMessage && <p className="mt-1 text-sm text-red-700">{errorMessage}</p>}
           <div className="py-8 flex justify-end">
-            <button
-              type="submit"
-              className="ml-2 bg-neutral-900 border border-transparent rounded-sm shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black">
-              {t("save")}
-            </button>
+            <Button type="submit">{t("save")}</Button>
           </div>
           <hr className="mt-4" />
         </div>
diff --git a/components/team/EditTeam.tsx b/components/team/EditTeam.tsx
index 709208d4cb..0cbc116c6a 100644
--- a/components/team/EditTeam.tsx
+++ b/components/team/EditTeam.tsx
@@ -141,7 +141,7 @@ export default function EditTeam(props: { team: Team | undefined | null; onClose
           </div>
         </div>
         <hr className="mt-2" />
-        <h3 className="font-cal font-bold leading-6 text-gray-900 mt-7 text-md">{t("profile")}</h3>
+        <h3 className="font-bold leading-6 text-gray-900 font-cal mt-7 text-md">{t("profile")}</h3>
         <form className="divide-y divide-gray-200 lg:col-span-9" onSubmit={updateTeamHandler}>
           {hasErrors && <ErrorAlert message={errorMessage} />}
           <div className="py-6 lg:pb-8">
@@ -213,7 +213,7 @@ export default function EditTeam(props: { team: Team | undefined | null; onClose
                   <hr className="mt-6" />
                 </div>
                 <div className="flex justify-between mt-7">
-                  <h3 className="font-cal font-bold leading-6 text-gray-900 text-md">{t("members")}</h3>
+                  <h3 className="font-bold leading-6 text-gray-900 font-cal text-md">{t("members")}</h3>
                   <div className="relative flex items-center">
                     <Button
                       type="button"
@@ -255,13 +255,10 @@ export default function EditTeam(props: { team: Team | undefined | null; onClose
                 <div>
                   <div className="relative flex items-start">
                     <Dialog>
-                      <DialogTrigger
-                        onClick={(e) => {
-                          e.stopPropagation();
-                        }}
-                        className="btn-sm btn-white">
-                        <TrashIcon className="group-hover:text-red text-gray-700 w-3.5 h-3.5 mr-2 inline-block" />
-                        {t("disband_team")}
+                      <DialogTrigger asChild>
+                        <Button type="button" color="secondary" StartIcon={TrashIcon}>
+                          {t("disband_team")}
+                        </Button>
                       </DialogTrigger>
                       <ConfirmationDialogContent
                         variety="danger"
diff --git a/components/ui/Scheduler.tsx b/components/ui/Scheduler.tsx
index 39fb4c54dd..a1226d41b4 100644
--- a/components/ui/Scheduler.tsx
+++ b/components/ui/Scheduler.tsx
@@ -9,6 +9,8 @@ import TimezoneSelect, { ITimezoneOption } from "react-timezone-select";
 import { useLocale } from "@lib/hooks/useLocale";
 import { WorkingHours } from "@lib/types/schedule";
 
+import Button from "@components/ui/Button";
+
 import { WeekdaySelect } from "./WeekdaySelect";
 import SetTimesModal from "./modal/SetTimesModal";
 
@@ -103,9 +105,9 @@ export const Scheduler = ({ availability, setAvailability, timeZone, setTimeZone
               <OpeningHours key={idx} idx={idx} item={item} />
             ))}
           </ul>
-          <button type="button" onClick={addNewSchedule} className="mt-2 btn-white btn-sm">
+          <Button type="button" onClick={addNewSchedule} className="mt-2" color="secondary" size="sm">
             {t("add_another")}
-          </button>
+          </Button>
         </div>
       </div>
       {editSchedule >= 0 && (
diff --git a/components/ui/modal/SetTimesModal.tsx b/components/ui/modal/SetTimesModal.tsx
index b6c662afd1..599a3a9c20 100644
--- a/components/ui/modal/SetTimesModal.tsx
+++ b/components/ui/modal/SetTimesModal.tsx
@@ -3,6 +3,8 @@ import { useRef } from "react";
 
 import { useLocale } from "@lib/hooks/useLocale";
 
+import Button from "@components/ui/Button";
+
 export default function SetTimesModal(props) {
   const { t } = useLocale();
   const [startHours, startMinutes] = [Math.floor(props.startTime / 60), props.startTime % 60];
@@ -31,26 +33,26 @@ export default function SetTimesModal(props) {
 
   return (
     <div
-      className="fixed z-50 inset-0 overflow-y-auto"
+      className="fixed inset-0 z-50 overflow-y-auto"
       aria-labelledby="modal-title"
       role="dialog"
       aria-modal="true">
-      <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+      <div className="flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
         <div
-          className="fixed inset-0 bg-gray-500 z-0 bg-opacity-75 transition-opacity"
+          className="fixed inset-0 z-0 transition-opacity bg-gray-500 bg-opacity-75"
           aria-hidden="true"></div>
 
         <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
           &#8203;
         </span>
 
-        <div className="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
-          <div className="sm:flex sm:items-start mb-4">
-            <div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
-              <ClockIcon className="h-6 w-6 text-black" />
+        <div className="inline-block px-4 pt-5 pb-4 overflow-hidden text-left align-bottom transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
+          <div className="mb-4 sm:flex sm:items-start">
+            <div className="flex items-center justify-center flex-shrink-0 w-12 h-12 mx-auto bg-blue-100 rounded-full sm:mx-0 sm:h-10 sm:w-10">
+              <ClockIcon className="w-6 h-6 text-black" />
             </div>
             <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-              <h3 className="text-lg leading-6 font-medium text-gray-900" id="modal-title">
+              <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
                 {t("change_bookings_availability")}
               </h3>
               <div>
@@ -59,7 +61,7 @@ export default function SetTimesModal(props) {
             </div>
           </div>
           <div className="flex mb-4">
-            <label className="w-1/4 pt-2 block text-sm font-medium text-gray-700">{t("start_time")}</label>
+            <label className="block w-1/4 pt-2 text-sm font-medium text-gray-700">{t("start_time")}</label>
             <div>
               <label htmlFor="startHours" className="sr-only">
                 {t("hours")}
@@ -72,12 +74,12 @@ export default function SetTimesModal(props) {
                 maxLength="2"
                 name="hours"
                 id="startHours"
-                className="shadow-sm focus:ring-black focus:border-brand block w-full sm:text-sm border-gray-300 rounded-md"
+                className="block w-full border-gray-300 rounded-md shadow-sm focus:ring-black focus:border-brand sm:text-sm"
                 placeholder="9"
                 defaultValue={startHours}
               />
             </div>
-            <span className="mx-2 pt-1">:</span>
+            <span className="pt-1 mx-2">:</span>
             <div>
               <label htmlFor="startMinutes" className="sr-only">
                 {t("minutes")}
@@ -91,14 +93,14 @@ export default function SetTimesModal(props) {
                 maxLength="2"
                 name="minutes"
                 id="startMinutes"
-                className="shadow-sm focus:ring-black focus:border-brand block w-full sm:text-sm border-gray-300 rounded-md"
+                className="block w-full border-gray-300 rounded-md shadow-sm focus:ring-black focus:border-brand sm:text-sm"
                 placeholder="30"
                 defaultValue={startMinutes}
               />
             </div>
           </div>
           <div className="flex">
-            <label className="w-1/4 pt-2 block text-sm font-medium text-gray-700">{t("end_time")}</label>
+            <label className="block w-1/4 pt-2 text-sm font-medium text-gray-700">{t("end_time")}</label>
             <div>
               <label htmlFor="endHours" className="sr-only">
                 {t("hours")}
@@ -111,12 +113,12 @@ export default function SetTimesModal(props) {
                 maxLength="2"
                 name="hours"
                 id="endHours"
-                className="shadow-sm focus:ring-black focus:border-brand block w-full sm:text-sm border-gray-300 rounded-md"
+                className="block w-full border-gray-300 rounded-md shadow-sm focus:ring-black focus:border-brand sm:text-sm"
                 placeholder="17"
                 defaultValue={endHours}
               />
             </div>
-            <span className="mx-2 pt-1">:</span>
+            <span className="pt-1 mx-2">:</span>
             <div>
               <label htmlFor="endMinutes" className="sr-only">
                 {t("minutes")}
@@ -130,19 +132,19 @@ export default function SetTimesModal(props) {
                 step="15"
                 name="minutes"
                 id="endMinutes"
-                className="shadow-sm focus:ring-black focus:border-brand block w-full sm:text-sm border-gray-300 rounded-md"
+                className="block w-full border-gray-300 rounded-md shadow-sm focus:ring-black focus:border-brand sm:text-sm"
                 placeholder="30"
                 defaultValue={endMinutes}
               />
             </div>
           </div>
           <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
-            <button onClick={updateStartEndTimesHandler} type="submit" className="btn btn-primary">
+            <Button onClick={updateStartEndTimesHandler} type="submit">
               {t("save")}
-            </button>
-            <button onClick={props.onExit} type="button" className="btn btn-white mr-2">
+            </Button>
+            <Button onClick={props.onExit} type="button" color="secondary" className="mr-2">
               {t("cancel")}
-            </button>
+            </Button>
           </div>
         </div>
       </div>
diff --git a/pages/availability/index.tsx b/pages/availability/index.tsx
index 0d7817145b..de8cdf0177 100644
--- a/pages/availability/index.tsx
+++ b/pages/availability/index.tsx
@@ -1,4 +1,3 @@
-import Link from "next/link";
 import { useForm } from "react-hook-form";
 
 import { QueryCell } from "@lib/QueryCell";
@@ -68,9 +67,9 @@ export function AvailabilityForm(props: inferQueryOutput<"viewer.availability">)
             <p>{t("troubleshoot_availability")}</p>
           </div>
           <div className="mt-5">
-            <Link href="/availability/troubleshoot">
-              <a className="btn btn-white">{t("launch_troubleshooter")}</a>
-            </Link>
+            <Button href="/availability/troubleshoot" color="secondary">
+              {t("launch_troubleshooter")}
+            </Button>
           </div>
         </div>
       </div>
diff --git a/pages/event-types/[type].tsx b/pages/event-types/[type].tsx
index efbee140c2..9b4903c741 100644
--- a/pages/event-types/[type].tsx
+++ b/pages/event-types/[type].tsx
@@ -1140,15 +1140,14 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                 />
                 <LocationOptions />
                 <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse ">
-                  <button type="submit" className="btn btn-primary">
-                    {t("update")}
-                  </button>
-                  <button
+                  <Button type="submit">{t("update")}</Button>
+                  <Button
                     onClick={() => setShowLocationModal(false)}
                     type="button"
-                    className="mr-2 btn btn-white">
+                    color="secondary"
+                    className="mr-2">
                     {t("cancel")}
-                  </button>
+                  </Button>
                 </div>
               </form>
             </div>
diff --git a/pages/settings/profile.tsx b/pages/settings/profile.tsx
index 976a564021..5996657fdd 100644
--- a/pages/settings/profile.tsx
+++ b/pages/settings/profile.tsx
@@ -81,9 +81,7 @@ function HideBrandingInput(props: { hideBrandingRef: RefObject<HTMLInputElement>
           </div>
           <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse gap-x-2">
             <DialogClose asChild>
-              <Button
-                className="table-cell text-center btn-wide btn-primary"
-                onClick={() => setModalOpen(false)}>
+              <Button className="table-cell text-center btn-wide" onClick={() => setModalOpen(false)}>
                 {t("dismiss")}
               </Button>
             </DialogClose>
diff --git a/pages/settings/teams.tsx b/pages/settings/teams.tsx
index dffe907d62..6396340a75 100644
--- a/pages/settings/teams.tsx
+++ b/pages/settings/teams.tsx
@@ -98,10 +98,7 @@ export default function Teams() {
                   )}
                 </div>
                 <div className="flex items-start mb-4">
-                  <Button
-                    type="button"
-                    onClick={() => setShowCreateTeamModal(true)}
-                    className="btn btn-white">
+                  <Button type="button" onClick={() => setShowCreateTeamModal(true)} color="secondary">
                     <PlusIcon className="group-hover:text-black text-gray-700 w-3.5 h-3.5 mr-2 inline-block" />
                     {t("new_team")}
                   </Button>
@@ -114,7 +111,7 @@ export default function Teams() {
 
                 {!!invites.length && (
                   <div>
-                    <h2 className="font-cal text-lg font-medium leading-6 text-gray-900">Open Invitations</h2>
+                    <h2 className="text-lg font-medium leading-6 text-gray-900 font-cal">Open Invitations</h2>
                     <ul className="px-4 mt-4 mb-2 bg-white border divide-y divide-gray-200 rounded">
                       {invites.map((team: Team) => (
                         <TeamListItem
@@ -176,15 +173,14 @@ export default function Teams() {
                     />
                   </div>
                   <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
-                    <button type="submit" className="btn btn-primary">
-                      {t("create_team")}
-                    </button>
-                    <button
+                    <Button type="submit">{t("create_team")}</Button>
+                    <Button
                       onClick={() => setShowCreateTeamModal(false)}
                       type="button"
-                      className="mr-2 btn btn-white">
+                      className="mr-2"
+                      color="secondary">
                       {t("cancel")}
-                    </button>
+                    </Button>
                   </div>
                 </form>
               </div>