diff --git a/components/Settings.tsx b/components/Settings.tsx
index 94f38e93..b9f56c62 100644
--- a/components/Settings.tsx
+++ b/components/Settings.tsx
@@ -35,7 +35,7 @@ export default function SettingsShell(props) {
   ];
 
   return (
-    <div className="max-w-6xl">
+    <div>
       <div className="sm:mx-auto">
         <nav className="-mb-px flex space-x-2 sm:space-x-8" aria-label="Tabs">
           {tabs.map((tab) => (
@@ -60,8 +60,9 @@ export default function SettingsShell(props) {
             </Link>
           ))}
         </nav>
+        <hr />
       </div>
-      <main>{props.children}</main>
+      <main className="max-w-4xl">{props.children}</main>
     </div>
   );
 }
diff --git a/components/Shell.tsx b/components/Shell.tsx
index 2c1adacb..8d856456 100644
--- a/components/Shell.tsx
+++ b/components/Shell.tsx
@@ -20,6 +20,7 @@ import classNames from "@lib/classNames";
 
 export default function Shell(props) {
   const router = useRouter();
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [session, loading] = useSession();
   const telemetry = useTelemetry();
 
@@ -71,7 +72,7 @@ export default function Shell(props) {
       <div className="h-screen flex overflow-hidden bg-gray-100">
         {/* Static sidebar for desktop */}
         <div className="hidden md:flex md:flex-shrink-0">
-          <div className="flex flex-col w-64">
+          <div className="flex flex-col w-56">
             {/* Sidebar component, swap this element with another sidebar if you like */}
             <div className="flex flex-col h-0 flex-1 border-r border-gray-200 bg-white">
               <div className="flex-1 flex flex-col pt-5 pb-4 overflow-y-auto">
diff --git a/pages/auth/logout.tsx b/pages/auth/logout.tsx
index e5156c5a..94e60c2c 100644
--- a/pages/auth/logout.tsx
+++ b/pages/auth/logout.tsx
@@ -29,7 +29,7 @@ export default function Logout() {
                     </div>
                     <div className="mt-5 sm:mt-6">
                         <Link href="/auth/login">
-                            <a className="inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black sm:text-sm">
+                            <a className="inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-black text-base font-medium text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black sm:text-sm">
                                 Go back to the login page
                             </a>
                         </Link>
diff --git a/pages/availability/index.tsx b/pages/availability/index.tsx
index 5b7edc68..c6a25f55 100644
--- a/pages/availability/index.tsx
+++ b/pages/availability/index.tsx
@@ -10,6 +10,7 @@ import { ClockIcon } from "@heroicons/react/outline";
 import Loader from '@components/Loader';
 
 export default function Availability(props) {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [session, loading] = useSession();
   const router = useRouter();
   const [showAddModal, setShowAddModal] = useState(false);
@@ -29,7 +30,7 @@ export default function Availability(props) {
   const bufferMinsRef = useRef<HTMLInputElement>();
 
   if (loading) {
-    return <Loader/>;
+    return <Loader />;
   }
 
   function toggleAddModal() {
@@ -124,7 +125,7 @@ export default function Availability(props) {
 
 ">
         <div className="flex">
-          <div className="w-1/2 mr-2 bg-white shadow rounded-sm">
+          <div className="w-1/2 mr-2 bg-white border border-gray-200 rounded-sm">
             <div className="px-4 py-5 sm:p-6">
               <h3 className="text-lg leading-6 font-medium text-gray-900">
                 Change the start and end times of your day
@@ -143,7 +144,7 @@ export default function Availability(props) {
             </div>
           </div>
 
-          <div className="w-1/2 ml-2 bg-white shadow rounded-sm">
+          <div className="w-1/2 ml-2 border border-gray-200 rounded-sm">
             <div className="px-4 py-5 sm:p-6">
               <h3 className="text-lg leading-6 font-medium text-gray-900">
                 Something doesn&apos;t look right?
@@ -153,7 +154,7 @@ export default function Availability(props) {
               </div>
               <div className="mt-5">
                 <Link href="/availability/troubleshoot">
-                  <a className="btn btn-primary">Launch troubleshooter</a>
+                  <a className="btn btn-white">Launch troubleshooter</a>
                 </Link>
               </div>
             </div>
diff --git a/pages/availability/troubleshoot.tsx b/pages/availability/troubleshoot.tsx
index a22390a1..cf33092b 100644
--- a/pages/availability/troubleshoot.tsx
+++ b/pages/availability/troubleshoot.tsx
@@ -10,12 +10,13 @@ import Loader from '@components/Loader';
 dayjs.extend(utc);
 
 export default function Troubleshoot({ user }) {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [session, loading] = useSession();
   const [availability, setAvailability] = useState([]);
   const [selectedDate, setSelectedDate] = useState(dayjs());
 
   if (loading) {
-    return <Loader/>;
+    return <Loader />;
   }
 
   function convertMinsToHrsMins(mins) {
diff --git a/pages/bookings/index.tsx b/pages/bookings/index.tsx
index 917d6e7d..b83eaf0c 100644
--- a/pages/bookings/index.tsx
+++ b/pages/bookings/index.tsx
@@ -43,25 +43,8 @@ export default function Bookings({ bookings }) {
         <div className="-mx-4 sm:mx-auto flex flex-col">
           <div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
             <div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
-              <div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-sm">
+              <div className="border border-gray-200 overflow-hidden border-b rounded-sm">
                 <table className="min-w-full divide-y divide-gray-200">
-                  <thead className="bg-gray-50">
-                    <tr>
-                      <th
-                        scope="col"
-                        className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                        Event
-                      </th>
-                      <th
-                        scope="col"
-                        className="hidden sm:table-cell px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                        Date
-                      </th>
-                      <th scope="col" className="relative px-6 py-3">
-                        <span className="sr-only">Actions</span>
-                      </th>
-                    </tr>
-                  </thead>
                   <tbody className="bg-white divide-y divide-gray-200">
                     {bookings
                       .filter((booking) => !booking.confirmed && !booking.rejected)
diff --git a/pages/event-types/[type].tsx b/pages/event-types/[type].tsx
index afa9e7d1..42678984 100644
--- a/pages/event-types/[type].tsx
+++ b/pages/event-types/[type].tsx
@@ -388,35 +388,28 @@ export default function EventTypePage({
         <title>{eventType.title} | Event Type | Calendso</title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <Shell heading={"Event Type: " + eventType.title} subtitle={eventType.description}>
+      <Shell
+        heading={
+          <input
+            ref={titleRef}
+            type="text"
+            name="title"
+            id="title"
+            required
+            className="pl-0 text-xl font-bold text-gray-900 cursor-pointer border-none focus:ring-0 bg-transparent focus:outline-none"
+            placeholder="Quick Chat"
+            defaultValue={eventType.title}
+          />
+        }
+        subtitle={eventType.description}>
         <div className="block sm:flex">
           <div className="w-full sm:w-10/12 mr-2">
             <div className="bg-white rounded-sm border border-neutral-200 -mx-4 sm:mx-0 p-4 sm:p-8">
               <form onSubmit={updateEventTypeHandler} className="space-y-4">
-                <div className="block sm:flex">
-                  <div className="min-w-32 mb-4 sm:mb-0">
-                    <label htmlFor="title" className="flex font-medium text-neutral-700 mt-1">
-                      <PencilIcon className="w-4 h-4 mr-2 mt-1 text-neutral-500" />
-                      Title
-                    </label>
-                  </div>
-                  <div className="w-full">
-                    <input
-                      ref={titleRef}
-                      type="text"
-                      name="title"
-                      id="title"
-                      required
-                      className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-neutral-300 rounded-sm"
-                      placeholder="Quick Chat"
-                      defaultValue={eventType.title}
-                    />
-                  </div>
-                </div>
-                <div className="block sm:flex">
-                  <div className="min-w-32 mb-4 sm:mb-0">
-                    <label htmlFor="slug" className="flex font-medium text-neutral-700 mt-1">
-                      <LinkIcon className="w-4 h-4 mr-2 mt-1 text-neutral-500" />
+                <div className="block sm:flex items-center">
+                  <div className="min-w-44 mb-4 sm:mb-0">
+                    <label htmlFor="slug" className="text-sm flex font-medium text-neutral-700 mt-0">
+                      <LinkIcon className="w-4 h-4 mr-2 mt-0.5 text-neutral-500" />
                       URL
                     </label>
                   </div>
@@ -437,10 +430,41 @@ export default function EventTypePage({
                     </div>
                   </div>
                 </div>
-                <div className="block sm:flex">
-                  <div className="min-w-32 mb-4 sm:mb-0">
-                    <label htmlFor="location" className="flex font-medium text-neutral-700 mt-1">
-                      <LocationMarkerIcon className="w-4 h-4 mr-2 mt-1 text-neutral-500" />
+
+                <div className="block sm:flex items-center">
+                  <div className="min-w-44 mb-4 sm:mb-0">
+                    <label htmlFor="length" className="text-sm flex font-medium text-neutral-700 mt-0">
+                      <ClockIcon className="w-4 h-4 mr-2 mt-0.5 text-neutral-500" />
+                      Duration
+                    </label>
+                  </div>
+                  <div className="w-full">
+                    <div className="mt-1 relative rounded-sm shadow-sm">
+                      <input
+                        ref={lengthRef}
+                        type="number"
+                        name="length"
+                        id="length"
+                        required
+                        className="focus:ring-primary-500 focus:border-primary-500 block w-full pl-2 pr-12 sm:text-sm border-gray-300 rounded-sm"
+                        placeholder="15"
+                        defaultValue={eventType.length}
+                      />
+                      <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
+                        <span className="text-gray-500 sm:text-sm" id="duration">
+                          mins
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <hr />
+
+                <div className="block sm:flex items-center">
+                  <div className="min-w-44 mb-4 sm:mb-0">
+                    <label htmlFor="location" className="text-sm flex font-medium text-neutral-700 mt-0">
+                      <LocationMarkerIcon className="w-4 h-4 mr-2 mt-0.5 text-neutral-500" />
                       Location
                     </label>
                   </div>
@@ -468,19 +492,19 @@ export default function EventTypePage({
                             className="mb-2 p-2 border border-neutral-300 rounded-sm shadow-sm">
                             <div className="flex justify-between">
                               {location.type === LocationType.InPerson && (
-                                <div className="flex-grow flex">
+                                <div className="flex-grow flex items-center">
                                   <LocationMarkerIcon className="h-6 w-6" />
                                   <span className="ml-2 text-sm">{location.address}</span>
                                 </div>
                               )}
                               {location.type === LocationType.Phone && (
-                                <div className="flex-grow flex">
+                                <div className="flex-grow flex items-center">
                                   <PhoneIcon className="h-6 w-6" />
                                   <span className="ml-2 text-sm">Phone call</span>
                                 </div>
                               )}
                               {location.type === LocationType.GoogleMeet && (
-                                <div className="flex-grow flex">
+                                <div className="flex-grow flex items-center">
                                   <svg
                                     className="h-6 w-6"
                                     viewBox="0 0 64 54"
@@ -511,7 +535,7 @@ export default function EventTypePage({
                                 </div>
                               )}
                               {location.type === LocationType.Zoom && (
-                                <div className="flex-grow flex">
+                                <div className="flex-grow flex items-center">
                                   <svg
                                     className="h-6 w-6"
                                     viewBox="0 0 64 64"
@@ -555,10 +579,12 @@ export default function EventTypePage({
                           <li>
                             <button
                               type="button"
-                              className="sm:flex sm:items-start text-sm text-primary-600"
+                              className="bg-neutral-100 rounded-sm py-2 px-3 flex"
                               onClick={() => setShowLocationModal(true)}>
-                              <PlusIcon className="h-5 w-5" />
-                              <span className="font-medium">Add another location option</span>
+                              <PlusIcon className="h-4 w-4 mt-0.5 text-neutral-900" />
+                              <span className="ml-1 text-neutral-700 text-sm font-medium">
+                                Add another location
+                              </span>
                             </button>
                           </li>
                         )}
@@ -566,37 +592,13 @@ export default function EventTypePage({
                     )}
                   </div>
                 </div>
-                <div className="block sm:flex">
-                  <div className="min-w-32 mb-4 sm:mb-0">
-                    <label htmlFor="length" className="flex font-medium text-neutral-700 mt-1">
-                      <ClockIcon className="w-4 h-4 mr-2 mt-1 text-neutral-500" />
-                      Duration
-                    </label>
-                  </div>
-                  <div className="w-full">
-                    <div className="mt-1 relative rounded-sm shadow-sm">
-                      <input
-                        ref={lengthRef}
-                        type="number"
-                        name="length"
-                        id="length"
-                        required
-                        className="focus:ring-primary-500 focus:border-primary-500 block w-full pl-2 pr-12 sm:text-sm border-gray-300 rounded-sm"
-                        placeholder="15"
-                        defaultValue={eventType.length}
-                      />
-                      <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
-                        <span className="text-gray-500 sm:text-sm" id="duration">
-                          mins
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div className="block sm:flex">
-                  <div className="min-w-32 mb-4 sm:mb-0">
-                    <label htmlFor="description" className="flex font-medium text-neutral-700 mt-1">
-                      <DocumentIcon className="w-4 h-4 mr-2 mt-1 text-neutral-500" />
+
+                <hr className="border-neutral-200" />
+
+                <div className="block sm:flex items-center">
+                  <div className="min-w-44 mb-4 sm:mb-0">
+                    <label htmlFor="description" className="text-sm flex font-medium text-neutral-700 mt-0">
+                      <DocumentIcon className="w-4 h-4 mr-2 mt-0.5 text-neutral-500" />
                       Description
                     </label>
                   </div>
@@ -620,9 +622,11 @@ export default function EventTypePage({
                         <span className="text-neutral-700 text-sm font-medium">Show advanced settings</span>
                       </Disclosure.Button>
                       <Disclosure.Panel className="space-y-4">
-                        <div className="block sm:flex">
-                          <div className="min-w-32 mb-4 sm:mb-0">
-                            <label htmlFor="eventName" className="flex font-medium text-neutral-700 mt-2">
+                        <div className="block sm:flex items-center">
+                          <div className="min-w-44 mb-4 sm:mb-0">
+                            <label
+                              htmlFor="eventName"
+                              className="text-sm flex font-medium text-neutral-700 mt-2">
                               Event name
                             </label>
                           </div>
@@ -640,11 +644,11 @@ export default function EventTypePage({
                             </div>
                           </div>
                         </div>
-                        <div className="block sm:flex">
-                          <div className="min-w-32 mb-4 sm:mb-0">
+                        <div className="block sm:flex items-center">
+                          <div className="min-w-44 mb-4 sm:mb-0">
                             <label
                               htmlFor="additionalFields"
-                              className="flex font-medium text-neutral-700 mt-2">
+                              className="text-sm flex font-medium text-neutral-700 mt-2">
                               Additional inputs
                             </label>
                           </div>
@@ -694,9 +698,9 @@ export default function EventTypePage({
                             </ul>
                           </div>
                         </div>
-                        <div className="block sm:flex">
-                          <div className="min-w-32 mb-4 sm:mb-0">
-                            <label htmlFor="hidden" className="flex font-medium text-neutral-700">
+                        <div className="block sm:flex items-center">
+                          <div className="min-w-44 mb-4 sm:mb-0">
+                            <label htmlFor="hidden" className="text-sm flex font-medium text-neutral-700">
                               Hide event type
                             </label>
                           </div>
@@ -721,11 +725,11 @@ export default function EventTypePage({
                             </div>
                           </div>
                         </div>
-                        <div className="block sm:flex">
-                          <div className="min-w-32 mb-4 sm:mb-0">
+                        <div className="block sm:flex items-center">
+                          <div className="min-w-44 mb-4 sm:mb-0">
                             <label
                               htmlFor="requiresConfirmation"
-                              className="flex font-medium text-neutral-700">
+                              className="text-sm flex font-medium text-neutral-700">
                               Opt-in booking
                             </label>
                           </div>
@@ -750,11 +754,14 @@ export default function EventTypePage({
                             </div>
                           </div>
                         </div>
+
+                        <hr className="border-neutral-200" />
+
                         <div className="block sm:flex">
-                          <div className="min-w-32 mb-4 sm:mb-0">
+                          <div className="min-w-44 mb-4 sm:mb-0">
                             <label
                               htmlFor="inviteesCanSchedule"
-                              className="flex font-medium text-neutral-700 mt-2">
+                              className="text-sm flex font-medium text-neutral-700 mt-2">
                               Invitees can schedule
                             </label>
                           </div>
@@ -849,9 +856,14 @@ export default function EventTypePage({
                             </RadioGroup>
                           </div>
                         </div>
+
+                        <hr className="border-neutral-200" />
+
                         <div className="block sm:flex">
-                          <div className="min-w-32 mb-4 sm:mb-0">
-                            <label htmlFor="availability" className="flex font-medium text-neutral-700 mt-2">
+                          <div className="min-w-44 mb-4 sm:mb-0">
+                            <label
+                              htmlFor="availability"
+                              className="text-sm flex font-medium text-neutral-700 mt-2">
                               Availability
                             </label>
                           </div>
diff --git a/pages/event-types/index.tsx b/pages/event-types/index.tsx
index f807f9ce..4f8d31db 100644
--- a/pages/event-types/index.tsx
+++ b/pages/event-types/index.tsx
@@ -73,8 +73,8 @@ export default function Availability({ user, types }) {
         New event type
       </DialogTrigger>
       <DialogContent>
-        <div className="mb-4">
-          <h3 className="text-lg leading-6 font-medium text-gray-900" id="modal-title">
+        <div className="mb-8">
+          <h3 className="text-lg leading-6 font-bold text-gray-900" id="modal-title">
             Add a new event type
           </h3>
           <div>
@@ -153,7 +153,7 @@ export default function Availability({ user, types }) {
               </div>
             </div>
           </div>
-          <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
+          <div className="mt-8 sm:flex sm:flex-row-reverse">
             <button type="submit" className="btn btn-primary">
               Continue
             </button>
diff --git a/pages/integrations/[integration].tsx b/pages/integrations/[integration].tsx
index 1e997470..c2a17af0 100644
--- a/pages/integrations/[integration].tsx
+++ b/pages/integrations/[integration].tsx
@@ -7,13 +7,15 @@ import { useRouter } from "next/router";
 import { useSession, getSession } from "next-auth/client";
 import Loader from '@components/Loader';
 
-export default function integration(props) {
+export default function Integration(props) {
   const router = useRouter();
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [session, loading] = useSession();
+  
   const [showAPIKey, setShowAPIKey] = useState(false);
 
   if (loading) {
-    return <Loader/>;
+    return <Loader />;
   }
 
   function toggleShowAPIKey() {
@@ -23,6 +25,7 @@ export default function integration(props) {
   async function deleteIntegrationHandler(event) {
     event.preventDefault();
 
+    /*eslint-disable */
     const response = await fetch("/api/integrations", {
       method: "DELETE",
       body: JSON.stringify({ id: props.integration.id }),
@@ -30,6 +33,7 @@ export default function integration(props) {
         "Content-Type": "application/json",
       },
     });
+    /*eslint-enable */
 
     router.push("/integrations");
   }
diff --git a/pages/integrations/index.tsx b/pages/integrations/index.tsx
index dca940c4..b30ed5d5 100644
--- a/pages/integrations/index.tsx
+++ b/pages/integrations/index.tsx
@@ -16,7 +16,8 @@ import { Switch } from "@headlessui/react";
 import Loader from '@components/Loader';
 import classNames from "@lib/classNames";
 
-export default function Home({ integrations }) {
+export default function IntegrationHome({ integrations }) {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [session, loading] = useSession();
 
   const [showAddModal, setShowAddModal] = useState(false);
@@ -85,9 +86,7 @@ export default function Home({ integrations }) {
   useEffect(loadCalendars, [integrations]);
 
   if (loading) {
-    return (
-      <Loader/>
-    );
+    return <Loader />;
   }
 
   return (
@@ -109,7 +108,7 @@ export default function Home({ integrations }) {
             Add new integration
           </button>
         }>
-        <div className="bg-white shadow overflow-hidden rounded-sm mb-8">
+        <div className="bg-white border border-gray-200 overflow-hidden rounded-sm mb-8">
           {integrations.filter((ig) => ig.credential).length !== 0 ? (
             <ul className="divide-y divide-gray-200">
               {integrations
@@ -276,7 +275,7 @@ export default function Home({ integrations }) {
             </div>
           </div>
         )}
-        <div className="bg-white shadow rounded-sm">
+        <div className="bg-white border border-gray-200 rounded-sm">
           <div className="px-4 py-5 sm:p-6">
             <h3 className="text-lg leading-6 font-medium text-gray-900">Select calendars</h3>
             <div className="mt-2 max-w-xl text-sm text-gray-500">
diff --git a/pages/settings/embed.tsx b/pages/settings/embed.tsx
index 46e07646..643350e6 100644
--- a/pages/settings/embed.tsx
+++ b/pages/settings/embed.tsx
@@ -1,7 +1,4 @@
 import Head from "next/head";
-import Link from "next/link";
-import { useState } from "react";
-import { useRouter } from "next/router";
 import prisma from "../../lib/prisma";
 import Shell from "../../components/Shell";
 import SettingsShell from "../../components/Settings";
@@ -9,10 +6,11 @@ import {  useSession, getSession } from "next-auth/client";
 import Loader from '@components/Loader';
 
 export default function Embed(props) {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [session, loading] = useSession();
 
   if (loading) {
-    return <Loader/>;
+    return <Loader />;
   }
 
   return (