diff --git a/components/Dialog.tsx b/components/Dialog.tsx
index c37576b959..c629c81183 100644
--- a/components/Dialog.tsx
+++ b/components/Dialog.tsx
@@ -32,7 +32,7 @@ type DialogHeaderProps = {
 export function DialogHeader({ title, subtitle }: DialogHeaderProps) {
   return (
     <div className="mb-8">
-      <h3 className="text-gray-900 text-lg font-bold leading-6" id="modal-title">
+      <h3 className="font-cal text-gray-900 text-lg font-bold leading-6" id="modal-title">
         {title}
       </h3>
       <div>
diff --git a/components/ImageUploader.tsx b/components/ImageUploader.tsx
index 14f7dff227..dc2a995401 100644
--- a/components/ImageUploader.tsx
+++ b/components/ImageUploader.tsx
@@ -142,7 +142,7 @@ export default function ImageUploader({ target, id, buttonMsg, handleAvatarChang
             <div className="inline-block align-bottom bg-white rounded-sm px-4 pt-5 pb-4 text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-md sm:w-full sm:p-6">
               <div className="sm:flex sm:items-start mb-4">
                 <div className="mt-3 text-center sm:mt-0 sm:text-left">
-                  <h3 className="text-lg leading-6 font-bold text-gray-900" id="modal-title">
+                  <h3 className="font-cal text-lg leading-6 font-bold text-gray-900" id="modal-title">
                     Upload {target}
                   </h3>
                 </div>
diff --git a/components/booking/pages/AvailabilityPage.tsx b/components/booking/pages/AvailabilityPage.tsx
index d9be1e0386..075a930a0e 100644
--- a/components/booking/pages/AvailabilityPage.tsx
+++ b/components/booking/pages/AvailabilityPage.tsx
@@ -166,7 +166,9 @@ const AvailabilityPage = ({ profile, eventType, workingHours }: AvailabilityPage
                     size={10}
                     truncateAfter={3}
                   />
-                  <h2 className="font-medium text-gray-500 dark:text-gray-300 mt-3">{profile.name}</h2>
+                  <h2 className="font-cal font-medium text-gray-500 dark:text-gray-300 mt-3">
+                    {profile.name}
+                  </h2>
                   <h1 className="mb-4 text-3xl font-semibold text-gray-800 dark:text-white">
                     {eventType.title}
                   </h1>
diff --git a/components/booking/pages/BookingPage.tsx b/components/booking/pages/BookingPage.tsx
index 0b0d76a661..9ee787c2fb 100644
--- a/components/booking/pages/BookingPage.tsx
+++ b/components/booking/pages/BookingPage.tsx
@@ -200,7 +200,9 @@ const BookingPage = (props: BookingPageProps) => {
                       }))
                   )}
                 />
-                <h2 className="font-medium dark:text-gray-300 text-gray-500">{props.profile.name}</h2>
+                <h2 className="font-cal font-medium dark:text-gray-300 text-gray-500">
+                  {props.profile.name}
+                </h2>
                 <h1 className="text-3xl font-semibold dark:text-white text-gray-800 mb-4">
                   {props.eventType.title}
                 </h1>
diff --git a/components/security/ChangePasswordSection.tsx b/components/security/ChangePasswordSection.tsx
index ae8fd5352e..7afe1b99a6 100644
--- a/components/security/ChangePasswordSection.tsx
+++ b/components/security/ChangePasswordSection.tsx
@@ -60,7 +60,7 @@ const ChangePasswordSection = () => {
   return (
     <>
       <div className="mt-6">
-        <h2 className="text-lg leading-6 font-medium text-gray-900">Change Password</h2>
+        <h2 className="font-cal text-lg leading-6 font-medium text-gray-900">Change Password</h2>
       </div>
       <form className="divide-y divide-gray-200 lg:col-span-9" onSubmit={changePasswordHandler}>
         <div className="py-6 lg:pb-8">
diff --git a/components/security/TwoFactorAuthSection.tsx b/components/security/TwoFactorAuthSection.tsx
index 70888232a0..c19bfcb042 100644
--- a/components/security/TwoFactorAuthSection.tsx
+++ b/components/security/TwoFactorAuthSection.tsx
@@ -14,7 +14,7 @@ const TwoFactorAuthSection = ({ twoFactorEnabled }: { twoFactorEnabled: boolean
   return (
     <>
       <div className="flex flex-row items-center">
-        <h2 className="text-lg leading-6 font-medium text-gray-900">Two-Factor Authentication</h2>
+        <h2 className="font-cal text-lg leading-6 font-medium text-gray-900">Two-Factor Authentication</h2>
         <Badge className="text-xs ml-2" variant={enabled ? "success" : "gray"}>
           {enabled ? "Enabled" : "Disabled"}
         </Badge>
diff --git a/components/security/TwoFactorModalHeader.tsx b/components/security/TwoFactorModalHeader.tsx
index 68288ba360..73c3632ee1 100644
--- a/components/security/TwoFactorModalHeader.tsx
+++ b/components/security/TwoFactorModalHeader.tsx
@@ -8,7 +8,7 @@ const TwoFactorModalHeader = ({ title, description }: { title: string; descripti
         <ShieldCheckIcon 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 font-medium leading-6 text-gray-900" id="modal-title">
+        <h3 className="font-cal text-lg font-medium leading-6 text-gray-900" id="modal-title">
           {title}
         </h3>
         <p className="text-sm text-gray-400">{description}</p>
diff --git a/components/team/EditTeam.tsx b/components/team/EditTeam.tsx
index 17bc9029b2..57c62107f6 100644
--- a/components/team/EditTeam.tsx
+++ b/components/team/EditTeam.tsx
@@ -144,7 +144,7 @@ export default function EditTeam(props: { team: Team | undefined | null; onClose
           </div>
         </div>
         <hr className="mt-2" />
-        <h3 className="font-bold leading-6 text-gray-900 mt-7 text-md">Profile</h3>
+        <h3 className="font-cal font-bold leading-6 text-gray-900 mt-7 text-md">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">
@@ -214,7 +214,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-bold leading-6 text-gray-900 text-md">Members</h3>
+                  <h3 className="font-cal font-bold leading-6 text-gray-900 text-md">Members</h3>
                   <div className="relative flex items-center">
                     <Button
                       type="button"
diff --git a/pages/404.tsx b/pages/404.tsx
index 318ad6b6a0..316a1ad52e 100644
--- a/pages/404.tsx
+++ b/pages/404.tsx
@@ -47,7 +47,7 @@ export default function Custom404() {
         <main className="max-w-xl mx-auto pb-6 pt-16 sm:pt-24">
           <div className="text-center">
             <p className="text-sm font-semibold text-black uppercase tracking-wide">404 error</p>
-            <h1 className="mt-2 text-4xl font-extrabold text-gray-900 tracking-tight sm:text-5xl">
+            <h1 className="font-cal mt-2 text-4xl font-extrabold text-gray-900 tracking-tight sm:text-5xl">
               This page does not exist.
             </h1>
             {isEventType404 ? (
diff --git a/pages/[user].tsx b/pages/[user].tsx
index f53d343084..deadf1d881 100644
--- a/pages/[user].tsx
+++ b/pages/[user].tsx
@@ -54,7 +54,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps>) {
             {props.eventTypes.length == 0 && (
               <div className="shadow overflow-hidden rounded-sm">
                 <div className="p-8 text-center text-gray-400 dark:text-white">
-                  <h2 className="font-semibold text-3xl text-gray-600 dark:text-white">Uh oh!</h2>
+                  <h2 className="font-cal font-semibold text-3xl text-gray-600 dark:text-white">Uh oh!</h2>
                   <p className="max-w-md mx-auto">This user hasn&apos;t set up any event types yet.</p>
                 </div>
               </div>
diff --git a/pages/auth/forgot-password/[id].tsx b/pages/auth/forgot-password/[id].tsx
index 26ca51d094..b031de8e74 100644
--- a/pages/auth/forgot-password/[id].tsx
+++ b/pages/auth/forgot-password/[id].tsx
@@ -77,7 +77,7 @@ export default function Page({ resetPasswordRequest, csrfToken }: Props) {
       <>
         <div className="space-y-6">
           <div>
-            <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">Success</h2>
+            <h2 className="font-cal mt-6 text-center text-3xl font-extrabold text-gray-900">Success</h2>
           </div>
           <p>Your password has been reset. You can now login with your newly created password.</p>
           <Link href="/auth/login">
@@ -97,7 +97,7 @@ export default function Page({ resetPasswordRequest, csrfToken }: Props) {
       <>
         <div className="space-y-6">
           <div>
-            <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">Whoops</h2>
+            <h2 className="font-cal mt-6 text-center text-3xl font-extrabold text-gray-900">Whoops</h2>
             <h2 className="text-center text-3xl font-extrabold text-gray-900">That Request is Expired.</h2>
           </div>
           <p>
@@ -130,7 +130,9 @@ export default function Page({ resetPasswordRequest, csrfToken }: Props) {
           {!isRequestExpired && !success && (
             <>
               <div className="space-y-6">
-                <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">Reset Password</h2>
+                <h2 className="font-cal mt-6 text-center text-3xl font-extrabold text-gray-900">
+                  Reset Password
+                </h2>
                 <p>Enter the new password you&apos;d like for your account.</p>
                 {error && <p className="text-red-600">{error.message}</p>}
               </div>
diff --git a/pages/auth/forgot-password/index.tsx b/pages/auth/forgot-password/index.tsx
index 004b1c029f..9b5fae648e 100644
--- a/pages/auth/forgot-password/index.tsx
+++ b/pages/auth/forgot-password/index.tsx
@@ -81,7 +81,9 @@ export default function ForgotPassword({ csrfToken }) {
           {!success && (
             <>
               <div className="space-y-6">
-                <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">Forgot Password</h2>
+                <h2 className="font-cal mt-6 text-center text-3xl font-extrabold text-gray-900">
+                  Forgot Password
+                </h2>
                 <p>
                   Enter the email address associated with your account and we will send you a link to reset
                   your password.
diff --git a/pages/auth/login.tsx b/pages/auth/login.tsx
index cb43dfb362..0e5eed3a1d 100644
--- a/pages/auth/login.tsx
+++ b/pages/auth/login.tsx
@@ -72,7 +72,9 @@ export default function Login({ csrfToken }) {
       <HeadSeo title="Login" description="Login" />
       <div className="sm:mx-auto sm:w-full sm:max-w-md">
         <img className="h-6 mx-auto" src="/calendso-logo-white-word.svg" alt="Cal.com Logo" />
-        <h2 className="mt-6 text-center text-3xl font-bold text-neutral-900">Sign in to your account</h2>
+        <h2 className="font-cal mt-6 text-center text-3xl font-bold text-neutral-900">
+          Sign in to your account
+        </h2>
       </div>
 
       <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
diff --git a/pages/auth/signup.tsx b/pages/auth/signup.tsx
index c6c5a738ba..7caafafcf6 100644
--- a/pages/auth/signup.tsx
+++ b/pages/auth/signup.tsx
@@ -58,7 +58,7 @@ export default function Signup(props) {
       aria-modal="true">
       <HeadSeo title="Sign up" description="Sign up" />
       <div className="sm:mx-auto sm:w-full sm:max-w-md">
-        <h2 className="text-center text-3xl font-extrabold text-gray-900">Create your account</h2>
+        <h2 className="font-cal text-center text-3xl font-extrabold text-gray-900">Create your account</h2>
       </div>
       <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
         <div className="bg-white py-8 px-4 shadow mx-2 sm:rounded-lg sm:px-10">
diff --git a/pages/cancel/[uid].tsx b/pages/cancel/[uid].tsx
index e90a99e116..a27a8ff219 100644
--- a/pages/cancel/[uid].tsx
+++ b/pages/cancel/[uid].tsx
@@ -99,7 +99,9 @@ export default function Type(props) {
                           <p className="text-sm text-gray-500">Instead, you could also reschedule it.</p>
                         </div>
                         <div className="mt-4 border-t border-b py-4">
-                          <h2 className="text-lg font-medium text-gray-600 mb-2">{props.booking.title}</h2>
+                          <h2 className="font-cal text-lg font-medium text-gray-600 mb-2">
+                            {props.booking.title}
+                          </h2>
                           <p className="text-gray-500">
                             <CalendarIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
                             {dayjs(props.booking.startTime).format(
diff --git a/pages/integrations/index.tsx b/pages/integrations/index.tsx
index e753a6239a..2cac6d28be 100644
--- a/pages/integrations/index.tsx
+++ b/pages/integrations/index.tsx
@@ -156,7 +156,7 @@ export default function Home({ integrations }: inferSSRProps<typeof getServerSid
                       <img className="h-8 w-8 mr-2" src={integration.imageSrc} alt={integration.title} />
                     </div>
                     <div className="w-10/12">
-                      <h2 className="text-gray-800 font-medium">{integration.title}</h2>
+                      <h2 className="font-cal text-gray-800 font-medium">{integration.title}</h2>
                       <p className="text-gray-400 text-sm">{integration.description}</p>
                     </div>
                     <div className="w-2/12 text-right pt-2">
diff --git a/pages/settings/embed.tsx b/pages/settings/embed.tsx
index d5dc46c5e7..d04b907898 100644
--- a/pages/settings/embed.tsx
+++ b/pages/settings/embed.tsx
@@ -20,7 +20,7 @@ export default function Embed(props) {
       <SettingsShell>
         <div className="py-6 lg:pb-8 lg:col-span-9">
           <div className="mb-6">
-            <h2 className="text-lg leading-6 font-medium text-gray-900">iframe Embed</h2>
+            <h2 className="font-cal text-lg leading-6 font-medium text-gray-900">iframe Embed</h2>
             <p className="mt-1 text-sm text-gray-500">The easiest way to embed Cal.com on your website.</p>
           </div>
           <div className="grid grid-cols-2 space-x-4">
@@ -66,7 +66,7 @@ export default function Embed(props) {
             </div>
           </div>
           <div className="my-6">
-            <h2 className="text-lg leading-6 font-medium text-gray-900">Cal.com API</h2>
+            <h2 className="font-cal text-lg leading-6 font-medium text-gray-900">Cal.com API</h2>
             <p className="mt-1 text-sm text-gray-500">
               Leverage our API for full control and customizability.
             </p>
diff --git a/pages/settings/teams.tsx b/pages/settings/teams.tsx
index 4568922f46..9f175501f9 100644
--- a/pages/settings/teams.tsx
+++ b/pages/settings/teams.tsx
@@ -115,7 +115,7 @@ export default function Teams() {
 
                 {!!invites.length && (
                   <div>
-                    <h2 className="text-lg font-medium leading-6 text-gray-900">Open Invitations</h2>
+                    <h2 className="font-cal text-lg font-medium leading-6 text-gray-900">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
diff --git a/pages/team/[slug].tsx b/pages/team/[slug].tsx
index 5cfd1967f2..6bb4206186 100644
--- a/pages/team/[slug].tsx
+++ b/pages/team/[slug].tsx
@@ -30,7 +30,7 @@ function TeamPage({ team }: InferGetServerSidePropsType<typeof getServerSideProp
           <Link href={`${team.slug}/${type.slug}`}>
             <a className="px-6 py-4 flex justify-between">
               <div className="flex-shrink">
-                <h2 className="font-semibold text-neutral-900 dark:text-white">{type.title}</h2>
+                <h2 className="font-cal font-semibold text-neutral-900 dark:text-white">{type.title}</h2>
                 <EventTypeDescription className="text-sm" eventType={type} />
               </div>
               <div className="mt-1">
diff --git a/public/cal.ttf b/public/cal.ttf
new file mode 100644
index 0000000000..0b3bba41b4
Binary files /dev/null and b/public/cal.ttf differ
diff --git a/styles/globals.css b/styles/globals.css
index 5403186b7a..4313752cf1 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -13,106 +13,112 @@
   @apply text-black;
 }
 
+/* Cal Sans */
+@font-face {
+  font-family: "Cal Sans";
+  src: url("https://cal.com/cal.ttf");
+}
+
 /* note(PeerRich): TODO move @layer components into proper React Components: <Button color="primary" size="xs" /> */
 @layer components {
-    /* Primary buttons */
-    .btn-xs.btn-primary {
-        @apply inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded shadow-sm text-white bg-neutral-900 hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
-    }
+  /* Primary buttons */
+  .btn-xs.btn-primary {
+    @apply inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded shadow-sm text-white bg-neutral-900 hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
+  }
 
-    .btn-sm.btn-primary {
-        @apply inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-sm shadow-sm text-white bg-neutral-900 hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
-    }
+  .btn-sm.btn-primary {
+    @apply inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-sm shadow-sm text-white bg-neutral-900 hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
+  }
 
-    .btn.btn-primary {
-        @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-sm shadow-sm text-white bg-neutral-900 hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
-    }
+  .btn.btn-primary {
+    @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-sm shadow-sm text-white bg-neutral-900 hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
+  }
 
-    .btn-lg.btn-primary {
-        @apply inline-flex items-center px-4 py-2 border border-transparent text-base font-medium rounded-sm shadow-sm text-white bg-neutral-900 hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
-    }
+  .btn-lg.btn-primary {
+    @apply inline-flex items-center px-4 py-2 border border-transparent text-base font-medium rounded-sm shadow-sm text-white bg-neutral-900 hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
+  }
 
-    .btn-xl.btn-primary {
-        @apply inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-sm shadow-sm text-white bg-neutral-900 hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
-    }
+  .btn-xl.btn-primary {
+    @apply inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-sm shadow-sm text-white bg-neutral-900 hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
+  }
 
-    .btn-wide.btn-primary {
-        @apply w-full text-center px-4 py-2 border border-transparent text-sm font-medium rounded-sm shadow-sm text-white bg-neutral-900 hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
-    }
+  .btn-wide.btn-primary {
+    @apply w-full text-center px-4 py-2 border border-transparent text-sm font-medium rounded-sm shadow-sm text-white bg-neutral-900 hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
+  }
 
-    /* Secondary buttons */
-    .btn-xs.btn-secondary {
-        @apply inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded text-neutral-700 bg-neutral-100 hover:bg-neutral-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
-    }
+  /* Secondary buttons */
+  .btn-xs.btn-secondary {
+    @apply inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded text-neutral-700 bg-neutral-100 hover:bg-neutral-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
+  }
 
-    .btn-sm.btn-secondary {
-        @apply inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-sm text-neutral-700 bg-neutral-100 hover:bg-neutral-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
-    }
+  .btn-sm.btn-secondary {
+    @apply inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-sm text-neutral-700 bg-neutral-100 hover:bg-neutral-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
+  }
 
-    .btn.btn-secondary {
-        @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-sm text-neutral-700 bg-neutral-100 hover:bg-neutral-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
-    }
+  .btn.btn-secondary {
+    @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-sm text-neutral-700 bg-neutral-100 hover:bg-neutral-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
+  }
 
-    .btn-lg.btn-secondary {
-        @apply inline-flex items-center px-4 py-2 border border-transparent text-base font-medium rounded-sm text-neutral-700 bg-neutral-100 hover:bg-neutral-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
-    }
+  .btn-lg.btn-secondary {
+    @apply inline-flex items-center px-4 py-2 border border-transparent text-base font-medium rounded-sm text-neutral-700 bg-neutral-100 hover:bg-neutral-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
+  }
 
-    .btn-xl.btn-secondary {
-        @apply inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-sm text-neutral-700 bg-neutral-100 hover:bg-neutral-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
-    }
+  .btn-xl.btn-secondary {
+    @apply inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-sm text-neutral-700 bg-neutral-100 hover:bg-neutral-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
+  }
 
-    .btn-wide.btn-secondary {
-        @apply w-full text-center px-4 py-2 border border-transparent text-sm font-medium rounded-sm text-neutral-700 bg-neutral-100 hover:bg-neutral-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
-    }
+  .btn-wide.btn-secondary {
+    @apply w-full text-center px-4 py-2 border border-transparent text-sm font-medium rounded-sm text-neutral-700 bg-neutral-100 hover:bg-neutral-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
+  }
 
-    /* White buttons */
-    .btn-xs.btn-white {
-        @apply inline-flex items-center px-2.5 py-1.5 border border-gray-300 shadow-sm text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
-    }
+  /* White buttons */
+  .btn-xs.btn-white {
+    @apply inline-flex items-center px-2.5 py-1.5 border border-gray-300 shadow-sm text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
+  }
 
-    .btn-sm.btn-white {
-        @apply inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
-    }
+  .btn-sm.btn-white {
+    @apply inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
+  }
 
-    .btn.btn-white {
-        @apply inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
-    }
+  .btn.btn-white {
+    @apply inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
+  }
 
-    .btn-lg.btn-white {
-        @apply inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-base font-medium rounded-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
-    }
+  .btn-lg.btn-white {
+    @apply inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-base font-medium rounded-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
+  }
 
-    .btn-xl.btn-white {
-        @apply inline-flex items-center px-6 py-3 border border-gray-300 shadow-sm text-base font-medium rounded-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
-    }
+  .btn-xl.btn-white {
+    @apply inline-flex items-center px-6 py-3 border border-gray-300 shadow-sm text-base font-medium rounded-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
+  }
 
-    .btn-wide.btn-white {
-        @apply w-full text-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
-    }
-    /* slider */
-    .slider {
-      @apply relative flex items-center w-40 h-4 select-none
-    }
+  .btn-wide.btn-white {
+    @apply w-full text-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
+  }
+  /* slider */
+  .slider {
+    @apply relative flex items-center w-40 h-4 select-none;
+  }
 
-    .slider > .slider-track {
-        @apply relative flex-grow h-1 bg-neutral-400 rounded-md;
-    }
+  .slider > .slider-track {
+    @apply relative flex-grow h-1 bg-neutral-400 rounded-md;
+  }
 
-    .slider .slider-range {
-      @apply absolute h-full bg-neutral-700 rounded-full
-    }
+  .slider .slider-range {
+    @apply absolute h-full bg-neutral-700 rounded-full;
+  }
 
-    .slider .slider-thumb {
-      @apply block w-3 h-3 bg-neutral-700 rounded-full shadow-sm cursor-pointer transition-all;
-    }
+  .slider .slider-thumb {
+    @apply block w-3 h-3 bg-neutral-700 rounded-full shadow-sm cursor-pointer transition-all;
+  }
 
-    .slider .slider-thumb:hover {
-      @apply bg-neutral-600;
-    }
+  .slider .slider-thumb:hover {
+    @apply bg-neutral-600;
+  }
 
-    .slider .slider-thumb:focus {
-      box-shadow: 0 0 0 4px rgba(0,0,0,0.2);
-    }
+  .slider .slider-thumb:focus {
+    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.2);
+  }
 }
 
 /* !important to style multi-email input */
@@ -135,9 +141,9 @@
 
 /* hide intercom chat bubble on mobile */
 @media only screen and (max-width: 768px) {
-    .intercom-launcher-frame{
-        display: none !important;
-    }
+  .intercom-launcher-frame {
+    display: none !important;
+  }
 }
 
 /* add padding bottom to bottom nav on standalone mode */
@@ -149,14 +155,13 @@
 
 /* hide intercom chat bubble on mobile */
 @media only screen and (max-width: 768px) {
-    .intercom-launcher-frame{
-        display: none !important;
-    }
+  .intercom-launcher-frame {
+    display: none !important;
+  }
 }
 
-
-.react-multi-email > [type='text'] {
-    @apply 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;
+.react-multi-email > [type="text"] {
+  @apply 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;
 }
 
 .react-multi-email [data-tag] {
@@ -164,78 +169,78 @@
   @apply inline-flex items-center px-2 py-1 my-1 mr-2 border border-transparent text-sm font-medium rounded-md text-gray-900 dark:text-white bg-neutral-200 hover:bg-neutral-100 dark:bg-black focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
 }
 
-  .react-multi-email > span[data-placeholder] {
-    display: none;
-    position: absolute;
-    left: 0.8rem;
-    top: 0.75rem;
-    line-height: 1.25rem;
-    font-size: 0.875rem;
-  }
+.react-multi-email > span[data-placeholder] {
+  display: none;
+  position: absolute;
+  left: 0.8rem;
+  top: 0.75rem;
+  line-height: 1.25rem;
+  font-size: 0.875rem;
+}
 
-  .react-multi-email.empty > span[data-placeholder] {
-    display: inline;
-    color: #646b7a;
-  }
+.react-multi-email.empty > span[data-placeholder] {
+  display: inline;
+  color: #646b7a;
+}
 
-  .react-multi-email.focused > span[data-placeholder] {
-    display: none;
-  }
+.react-multi-email.focused > span[data-placeholder] {
+  display: none;
+}
 
-  .react-multi-email > input {
-    width: 100% !important;
-    display: inline-block !important;
-    @apply mt-1;
-  }
+.react-multi-email > input {
+  width: 100% !important;
+  display: inline-block !important;
+  @apply mt-1;
+}
 
-  .react-multi-email [data-tag] {
-    @apply inline-flex items-center px-2 py-1 my-1 mr-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-gray-900 dark:text-white bg-neutral-200 hover:bg-neutral-100 dark:bg-neutral-900 dark:hover:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
-  }
+.react-multi-email [data-tag] {
+  @apply inline-flex items-center px-2 py-1 my-1 mr-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-gray-900 dark:text-white bg-neutral-200 hover:bg-neutral-100 dark:bg-neutral-900 dark:hover:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
+}
 
-  .react-multi-email [data-tag] [data-tag-item] {
-    max-width: 100%;
-    overflow: hidden;
-  }
+.react-multi-email [data-tag] [data-tag-item] {
+  max-width: 100%;
+  overflow: hidden;
+}
 
-  .react-multi-email [data-tag] [data-tag-handle] {
-    margin-left: 0.833em;
-    cursor: pointer;
-  }
+.react-multi-email [data-tag] [data-tag-handle] {
+  margin-left: 0.833em;
+  cursor: pointer;
+}
 
 /* !important to override react-select */
-.react-select__value-container{
-    border: 0 !important;
+.react-select__value-container {
+  border: 0 !important;
 }
 
 .react-select__input input {
-    border: 0 !important; box-shadow: none !important;
+  border: 0 !important;
+  box-shadow: none !important;
 }
 
-.react-select__option--is-focused{
-    background: #000 !important;
-    color: #fff !important
+.react-select__option--is-focused {
+  background: #000 !important;
+  color: #fff !important;
 }
 
-.react-select__control{
-    border: 2px solid transparent !important;
-    box-shadow: none !important;
+.react-select__control {
+  border: 2px solid transparent !important;
+  box-shadow: none !important;
 }
 
-.react-select__control.react-select__control--is-focused{
-        border: 2px solid #000 !important;
-        border-color: #000 !important;
-        box-shadow: none !important;
-            margin: -1px;
-            padding: 1px;
-
+.react-select__control.react-select__control--is-focused {
+  border: 2px solid #000 !important;
+  border-color: #000 !important;
+  box-shadow: none !important;
+  margin: -1px;
+  padding: 1px;
 }
 
 /* !important to override react-dates */
-.DateRangePickerInput__withBorder{
-    border: 0 !important
+.DateRangePickerInput__withBorder {
+  border: 0 !important;
 }
-.DateInput_input{
-  border: 1px solid #D1D5DB !important;
+.DateInput_input {
+  border: 1px solid #d1d5db !important;
   border-radius: 2px !important;
   font-size: inherit !important;
   font-weight: inherit !important;
@@ -244,15 +249,15 @@
   line-height: 16px !important;
 }
 
-.DateInput_input__focused{
+.DateInput_input__focused {
   border: 2px solid #000 !important;
   border-radius: 2px !important;
   box-shadow: none !important;
   padding: 10px ​10px 9px !important;
 }
 
-.DateRangePickerInput_arrow{
-    padding: 0px 10px;
+.DateRangePickerInput_arrow {
+  padding: 0px 10px;
 }
 
 .loader {
@@ -318,47 +323,45 @@
 }
 
 nav#nav--settings > a {
-    @apply border-transparent text-gray-900 hover:bg-gray-50 hover:text-gray-900 border-l-4 px-3 py-2 flex items-center text-sm font-medium;
+  @apply border-transparent text-gray-900 hover:bg-gray-50 hover:text-gray-900 border-l-4 px-3 py-2 flex items-center text-sm font-medium;
 }
 
 nav#nav--settings > a svg {
-    @apply text-gray-400 group-hover:text-gray-500 flex-shrink-0 -ml-1 mr-3 h-6 w-6;
+  @apply text-gray-400 group-hover:text-gray-500 flex-shrink-0 -ml-1 mr-3 h-6 w-6;
 }
 
 nav#nav--settings > a.active {
-    @apply bg-neutral-50 border-neutral-500 text-neutral-700 hover:bg-neutral-50 hover:text-neutral-700;
+  @apply bg-neutral-50 border-neutral-500 text-neutral-700 hover:bg-neutral-50 hover:text-neutral-700;
 }
 
 nav#nav--settings > a.active svg {
-    @apply text-neutral-500;
+  @apply text-neutral-500;
 }
 
-
 table tbody tr:nth-child(odd) {
-    @apply bg-gray-50;
+  @apply bg-gray-50;
 }
 
-
 body {
-    background-color: #f3f4f6;
+  background-color: #f3f4f6;
 }
 
 .text-white-important {
-    color: white !important;
+  color: white !important;
 }
 
 @layer utilities {
-    .transition-max-width {
-        -webkit-transition-property: max-width;
-        transition-property: max-width;
-    }
+  .transition-max-width {
+    -webkit-transition-property: max-width;
+    transition-property: max-width;
+  }
 }
 
 #timeZone input:focus {
-    box-shadow: none;
+  box-shadow: none;
 }
 
 .weekdaySelect button.active {
-    background: #000;
-    color: #fff;
+  background: #000;
+  color: #fff;
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index 73d36b9268..6ab100d51e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -93,7 +93,7 @@ module.exports = {
       },
       fontFamily: {
         inter: ["Inter", "sans-serif"],
-        kollektif: ["Kollektif", "sans-serif"],
+        cal: ["Cal Sans", "sans-serif"],
       },
       maxHeight: (theme) => ({
         0: "0",