diff --git a/components/Shell.tsx b/components/Shell.tsx
index 480195e5..2c1adacb 100644
--- a/components/Shell.tsx
+++ b/components/Shell.tsx
@@ -105,7 +105,7 @@ export default function Shell(props) {
                   ))}
                 </nav>
               </div>
-              <div className="flex-shrink-0 flex border-t border-gray-200 p-4">
+              <div className="flex-shrink-0 flex p-4">
                 <UserDropdown session={session} />
               </div>
             </div>
@@ -135,10 +135,10 @@ export default function Shell(props) {
                 </div>
               </div>
             </nav>
-            <div className="py-6">
+            <div className="py-8">
               <div className="block sm:flex justify-between px-4 sm:px-6 md:px-8">
-                <div className="mb-6">
-                  <h1 className="text-2xl font-semibold text-gray-900">{props.heading}</h1>
+                <div className="mb-8">
+                  <h1 className="text-xl font-bold text-gray-900">{props.heading}</h1>
                   <p className="text-sm text-neutral-500 mr-4">{props.subtitle}</p>
                 </div>
                 <div className="mb-4 flex-shrink-0">{props.CTA}</div>
diff --git a/pages/event-types/index.tsx b/pages/event-types/index.tsx
index 8b73886c..f807f9ce 100644
--- a/pages/event-types/index.tsx
+++ b/pages/event-types/index.tsx
@@ -176,7 +176,7 @@ export default function Availability({ user, types }) {
         heading="Event Types"
         subtitle="Create events to share for people to book on your calendar."
         CTA={types.length !== 0 && <CreateNewEventDialog />}>
-        <div className="bg-white shadow overflow-hidden sm:rounded-sm -mx-4 sm:mx-0">
+        <div className="bg-white border border-gray-200 rounded-sm overflow-hidden -mx-4 sm:mx-0">
           <ul className="divide-y divide-neutral-200">
             {types.map((type) => (
               <li key={type.id}>
@@ -196,21 +196,21 @@ export default function Availability({ user, types }) {
                           <div className="mt-2 flex space-x-4">
                             <div className="flex items-center text-sm text-neutral-500">
                               <ClockIcon
-                                className="flex-shrink-0 mr-1.5 h-5 w-5 text-neutral-400"
+                                className="flex-shrink-0 mr-1.5 h-4 w-4 text-neutral-400"
                                 aria-hidden="true"
                               />
                               <p>{type.length}m</p>
                             </div>
                             <div className="flex items-center text-sm text-neutral-500">
                               <UserIcon
-                                className="flex-shrink-0 mr-1.5 h-5 w-5 text-neutral-400"
+                                className="flex-shrink-0 mr-1.5 h-4 w-4 text-neutral-400"
                                 aria-hidden="true"
                               />
                               <p>1-on-1</p>
                             </div>
                             <div className="flex items-center text-sm text-neutral-500">
                               <InformationCircleIcon
-                                className="flex-shrink-0 mr-1.5 h-5 w-5 text-neutral-400"
+                                className="flex-shrink-0 mr-1.5 h-4 w-4 text-neutral-400"
                                 aria-hidden="true"
                               />
                               <p>{type.description.substring(0, 100)}</p>
@@ -220,7 +220,7 @@ export default function Availability({ user, types }) {
                         <div className="mt-4 flex-shrink-0 sm:mt-0 sm:ml-5">
                           <div className="flex overflow-hidden space-x-5">
                             <Link href={"/" + session.user.username + "/" + type.slug}>
-                              <a className="text-neutral-400">
+                              <a className="text-neutral-400 p-2 border border-transparent hover:border-gray-200">
                                 <ExternalLinkIcon className="w-5 h-5" />
                               </a>
                             </Link>
@@ -230,7 +230,7 @@ export default function Availability({ user, types }) {
                                   window.location.hostname + "/" + session.user.username + "/" + type.slug
                                 );
                               }}
-                              className="text-neutral-400">
+                              className="text-neutral-400 p-2 border border-transparent hover:border-gray-200">
                               <LinkIcon className="w-5 h-5" />
                             </button>
                           </div>
@@ -241,7 +241,7 @@ export default function Availability({ user, types }) {
                           {({ open }) => (
                             <>
                               <div>
-                                <Menu.Button className="text-neutral-400 mt-1">
+                                <Menu.Button className="text-neutral-400 mt-1 text-neutral-400 p-2 border border-transparent hover:border-gray-200">
                                   <span className="sr-only">Open options</span>
                                   <DotsHorizontalIcon className="h-5 w-5" aria-hidden="true" />
                                 </Menu.Button>
@@ -271,7 +271,7 @@ export default function Availability({ user, types }) {
                                             "group flex items-center px-4 py-2 text-sm font-medium"
                                           )}>
                                           <ExternalLinkIcon
-                                            className="mr-3 h-5 w-5 text-neutral-400 group-hover:text-neutral-500"
+                                            className="mr-3 h-4 w-4 text-neutral-400 group-hover:text-neutral-500"
                                             aria-hidden="true"
                                           />
                                           Preview
@@ -295,7 +295,7 @@ export default function Availability({ user, types }) {
                                             "group flex items-center px-4 py-2 text-sm w-full font-medium"
                                           )}>
                                           <LinkIcon
-                                            className="mr-3 h-5 w-5 text-neutral-400 group-hover:text-neutral-500"
+                                            className="mr-3 h-4 w-4 text-neutral-400 group-hover:text-neutral-500"
                                             aria-hidden="true"
                                           />
                                           Copy link to event
@@ -311,7 +311,7 @@ export default function Availability({ user, types }) {
                                     {/*        "group flex items-center px-4 py-2 text-sm font-medium"*/}
                                     {/*      )}>*/}
                                     {/*      <DuplicateIcon*/}
-                                    {/*        className="mr-3 h-5 w-5 text-neutral-400 group-hover:text-neutral-500"*/}
+                                    {/*        className="mr-3 h-4 w-4 text-neutral-400 group-hover:text-neutral-500"*/}
                                     {/*        aria-hidden="true"*/}
                                     {/*      />*/}
                                     {/*      Duplicate*/}
diff --git a/styles/globals.css b/styles/globals.css
index 008d057b..2fbe03bf 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -81,6 +81,7 @@
     }
 }
 
+/* add padding bottom to bottom nav on standalone mode */
 @media all and (display-mode: standalone) {
   .bottom-nav {
     padding-bottom: 24px;