diff --git a/pages/auth/forgot-password/index.tsx b/pages/auth/forgot-password/index.tsx
index 98a60bbe..f3a29636 100644
--- a/pages/auth/forgot-password/index.tsx
+++ b/pages/auth/forgot-password/index.tsx
@@ -113,7 +113,7 @@ export default function Page({ csrfToken }) {
                   <button
                     type="submit"
                     disabled={loading}
-                    className={`w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black ${
+                    className={`w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-black hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black ${
                       loading ? "cursor-not-allowed" : ""
                     }`}>
                     {loading && (
@@ -142,7 +142,7 @@ export default function Page({ csrfToken }) {
                   <Link href="/auth/login">
                     <button
                       type="button"
-                      className="w-full flex justify-center py-2 px-4 text-sm font-medium text-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black">
+                      className="w-full flex justify-center py-2 px-4 text-sm font-medium text-black focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black">
                       Login
                     </button>
                   </Link>
diff --git a/pages/auth/login.tsx b/pages/auth/login.tsx
index fbc608a8..bf83b392 100644
--- a/pages/auth/login.tsx
+++ b/pages/auth/login.tsx
@@ -10,7 +10,7 @@ export default function Login({ csrfToken }) {
         <link rel="icon" href="/favicon.ico" />
       </Head>
       <div className="sm:mx-auto sm:w-full sm:max-w-md">
-        <img className="h-6 mx-auto" src="/calendso-logo-word.svg" alt="Calendso Logo" />
+        <img className="h-6 mx-auto" src="/calendso-logo-white-word.svg" alt="Calendso Logo" />
         <h2 className="mt-6 text-center text-3xl font-bold text-neutral-900">Sign in to your account</h2>
       </div>
 
@@ -69,7 +69,10 @@ export default function Login({ csrfToken }) {
           </form>
         </div>
         <div className="mt-4 text-neutral-600 text-center text-sm">
-          Don&apos;t have an account? <a href="#" className="font-medium text-neutral-900">Create an account</a>
+          Don&apos;t have an account? {/* replace this with your account creation flow */}
+          <a href="https://checkout.calendso.com" className="font-medium text-neutral-900">
+            Create an account
+          </a>
         </div>
       </div>
     </div>
diff --git a/pages/bookings/index.tsx b/pages/bookings/index.tsx
index 3ed8272c..5ad51831 100644
--- a/pages/bookings/index.tsx
+++ b/pages/bookings/index.tsx
@@ -32,7 +32,7 @@ export default function Bookings({ bookings }) {
         <link rel="icon" href="/favicon.ico" />
       </Head>
       <Shell heading="Bookings" subtitle="See upcoming and past events booked through your event type links.">
-        <div className="flex flex-col">
+        <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">
@@ -43,10 +43,7 @@ export default function Bookings({ bookings }) {
                       .concat(bookings.filter((booking) => booking.confirmed || booking.rejected))
                       .map((booking) => (
                         <tr key={booking.id}>
-                          <td
-                            className={
-                              "px-6 py-4 whitespace-nowrap" + (booking.rejected ? " line-through" : "")
-                            }>
+                          <td className={"px-6 py-4" + (booking.rejected ? " line-through" : "")}>
                             {!booking.confirmed && !booking.rejected && (
                               <span className="ml-2 inline-flex items-center px-1.5 py-0.5 rounded-sm text-xs font-medium bg-yellow-100 text-yellow-800">
                                 Unconfirmed
@@ -56,13 +53,20 @@ export default function Bookings({ bookings }) {
                               {booking.attendees[0].name}
                             </div>
                             <div className="text-sm text-gray-500">{booking.attendees[0].email}</div>
+                            <div
+                              style={{ maxWidth: 150 }}
+                              className="block lg:hidden font-medium text-xs text-gray-900 truncate">
+                              {booking.title}
+                            </div>
                           </td>
                           <td
                             className={
                               "px-6 py-4 max-w-20 w-full" + (booking.rejected ? " line-through" : "")
                             }>
-                            <div className="text-sm text-neutral-900 font-medium">{booking.title}</div>
-                            <div className="text-sm text-neutral-500">
+                            <div className="hidden lg:block text-sm text-neutral-900 font-medium">
+                              {booking.title}
+                            </div>
+                            <div className="hidden lg:block text-sm text-neutral-500">
                               You and {booking.attendees[0].name}
                             </div>
                           </td>
@@ -74,28 +78,28 @@ export default function Bookings({ bookings }) {
                           <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                             {!booking.confirmed && !booking.rejected && (
                               <>
-                                <a
+                                <button
                                   onClick={() => confirmBookingHandler(booking, true)}
-                                  className="cursor-pointer text-blue-600 hover:text-blue-900">
+                                  className="text-xs sm:text-sm inline-flex items-center px-4 py-2 border-transparent font-medium rounded-sm shadow-sm text-neutral-700 bg-white hover:bg-neutral-100 border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black ml-2">
                                   Confirm
-                                </a>
-                                <a
+                                </button>
+                                <button
                                   onClick={() => confirmBookingHandler(booking, false)}
-                                  className="cursor-pointer ml-4 text-blue-600 hover:text-blue-900">
+                                  className="text-xs sm:text-sm ml-4 inline-flex items-center px-4 py-2 border-transparent font-medium rounded-sm shadow-sm text-neutral-700 bg-white hover:bg-neutral-100 border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black ml-2">
                                   Reject
-                                </a>
+                                </button>
                               </>
                             )}
                             {booking.confirmed && !booking.rejected && (
                               <>
                                 <a
                                   href={window.location.href + "/../cancel/" + booking.uid}
-                                  className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-sm shadow-sm text-neutral-700 bg-white hover:bg-neutral-100 border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black mr-2">
+                                  className="text-xs sm:text-sm inline-flex items-center px-4 py-2 border-transparent font-medium rounded-sm shadow-sm text-neutral-700 bg-white hover:bg-neutral-100 border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black ml-2">
                                   Cancel
                                 </a>
                                 <a
                                   href={window.location.href + "/../reschedule/" + booking.uid}
-                                  className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-sm shadow-sm text-neutral-700 bg-white hover:bg-neutral-100 border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black mr-2">
+                                  className="text-xs sm:text-sm inline-flex items-center px-4 py-2 border-transparent font-medium rounded-sm shadow-sm text-neutral-700 bg-white hover:bg-neutral-100 border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black ml-2">
                                   Reschedule
                                 </a>
                               </>
diff --git a/pages/integrations/[integration].tsx b/pages/integrations/[integration].tsx
index 52f14144..8cdaa93a 100644
--- a/pages/integrations/[integration].tsx
+++ b/pages/integrations/[integration].tsx
@@ -40,10 +40,7 @@ export default function integration(props) {
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
-      <Shell heading={getIntegrationName(props.integration.type)}>
-        <div className="flex mb-8">
-          <p className="text-sm text-neutral-500">Manage and delete integrations.</p>
-        </div>
+      <Shell heading={getIntegrationName(props.integration.type)} subtitle="Manage and delete integrations.">
         <div className="grid grid-cols-3 gap-4">
           <div className="col-span-2 bg-white shadow overflow-hidden rounded-sm">
             <div className="px-4 py-5 sm:px-6">
diff --git a/pages/integrations/index.tsx b/pages/integrations/index.tsx
index 0740271a..ae8c5457 100644
--- a/pages/integrations/index.tsx
+++ b/pages/integrations/index.tsx
@@ -16,6 +16,7 @@ import { Switch } from "@headlessui/react";
 
 export default function Home({ integrations }) {
   const [session, loading] = useSession();
+
   const [showAddModal, setShowAddModal] = useState(false);
   const [showSelectCalendarModal, setShowSelectCalendarModal] = useState(false);
   const [selectableCalendars, setSelectableCalendars] = useState([]);
@@ -86,7 +87,11 @@ export default function Home({ integrations }) {
   useEffect(loadCalendars, [integrations]);
 
   if (loading) {
-    return <div className="loader"><span className="loader-inner"></span></div>;
+    return (
+      <div className="loader">
+        <span className="loader-inner"></span>
+      </div>
+    );
   }
 
   return (
@@ -99,8 +104,8 @@ export default function Home({ integrations }) {
       <Shell
         heading="Integrations"
         subtitle="Connect your favourite apps."
-        noPaddingBottom>
-        <div className="text-right py-2">
+        noPaddingBottom
+        CTA={
           <button
             onClick={toggleAddModal}
             type="button"
@@ -108,7 +113,7 @@ export default function Home({ integrations }) {
             <PlusIcon className="w-5 h-5 mr-1" />
             Add new integration
           </button>
-        </div>
+        }>
         <div className="bg-white shadow overflow-hidden rounded-sm mb-8">
           {integrations.filter((ig) => ig.credential).length !== 0 ? (
             <ul className="divide-y divide-gray-200">