diff --git a/apps/web/components/AppListCard.tsx b/apps/web/components/AppListCard.tsx
index 20d79ac950..bcef3310a3 100644
--- a/apps/web/components/AppListCard.tsx
+++ b/apps/web/components/AppListCard.tsx
@@ -64,7 +64,7 @@ export default function AppListCard(props: AppListCardProps) {
 
   return (
     <div className={`${highlight ? "bg-yellow-100" : ""}`}>
-      <div className="flex gap-x-3 p-4">
+      <div className="flex gap-x-3 px-5 py-4">
         {logo ? <img className="h-10 w-10" src={logo} alt={`${title} logo`} /> : null}
         <div className="flex grow flex-col gap-y-1 truncate">
           <div className="flex items-center gap-x-2">
diff --git a/apps/web/components/apps/CalendarListContainer.tsx b/apps/web/components/apps/CalendarListContainer.tsx
index e716c3816b..008edc3195 100644
--- a/apps/web/components/apps/CalendarListContainer.tsx
+++ b/apps/web/components/apps/CalendarListContainer.tsx
@@ -88,7 +88,7 @@ function CalendarSwitch(props: {
     }
   );
   return (
-    <div className="flex py-1">
+    <div className="flex flex-col py-1 sm:flex-row">
       <Switch
         key={props.externalId}
         name="enabled"
@@ -99,7 +99,7 @@ function CalendarSwitch(props: {
         }}
       />
       {!!props.destination && (
-        <span className="ml-4 inline-flex items-center gap-1 rounded-md bg-gray-100 px-2 py-1 text-sm font-normal text-gray-800">
+        <span className="ml-8 inline-flex items-center gap-1 rounded-md bg-gray-100 px-2 py-1 text-sm font-normal text-gray-800 sm:ml-4">
           <FiArrowLeft className="h-4 w-4" />
           {t("adding_events_to")}
         </span>
@@ -184,8 +184,8 @@ function ConnectedCalendarsList(props: Props) {
                     <div className="border-t border-gray-200">
                       {!fromOnboarding && (
                         <>
-                          <p className="px-4 pt-4 text-sm text-gray-500">{t("toggle_calendars_conflict")}</p>
-                          <ul className="space-y-2 p-4">
+                          <p className="px-5 pt-4 text-sm text-gray-500">{t("toggle_calendars_conflict")}</p>
+                          <ul className="space-y-2 px-5 py-4">
                             {item.calendars.map((cal) => (
                               <CalendarSwitch
                                 key={cal.externalId}
@@ -264,7 +264,7 @@ export function CalendarListContainer(props: { heading?: boolean; fromOnboarding
             {!!data.connectedCalendars.length || !!installedCalendars.data?.items.length ? (
               <>
                 {heading && (
-                  <div className="flex flex-col gap-6 rounded-md border border-gray-200 p-7">
+                  <div className="flex flex-col gap-6 rounded-md border p-7">
                     <ShellSubHeading
                       title={t("calendar")}
                       subtitle={t("installed_app_calendar_description")}
diff --git a/packages/ui/components/form/switch/Switch.tsx b/packages/ui/components/form/switch/Switch.tsx
index 889f4c4e32..409eecc5c7 100644
--- a/packages/ui/components/form/switch/Switch.tsx
+++ b/packages/ui/components/form/switch/Switch.tsx
@@ -52,7 +52,7 @@ const Switch = (
           <Label.Root
             htmlFor={id}
             className={classNames(
-              "align-text-top text-sm font-medium text-gray-900 ltr:ml-3 rtl:mr-3 dark:text-white",
+              "align-text-top text-sm font-medium text-gray-900 ltr:ml-2 rtl:mr-2 dark:text-white",
               primitiveProps.disabled ? "cursor-not-allowed opacity-25" : "cursor-pointer "
             )}>
             {label}
diff --git a/packages/ui/components/navigation/tabs/VerticalTabItem.tsx b/packages/ui/components/navigation/tabs/VerticalTabItem.tsx
index 06dab62437..eaad1d46c6 100644
--- a/packages/ui/components/navigation/tabs/VerticalTabItem.tsx
+++ b/packages/ui/components/navigation/tabs/VerticalTabItem.tsx
@@ -51,7 +51,7 @@ const VerticalTabItem = function ({
             target={props.isExternalLink ? "_blank" : "_self"}
             className={classNames(
               props.textClassNames || "text-sm font-medium leading-none text-gray-600",
-              "min-h-8 group flex w-64 flex-row items-center rounded-md px-2 py-[10px] hover:bg-gray-100 group-hover:text-gray-700 [&[aria-current='page']]:bg-gray-200 [&[aria-current='page']]:text-gray-900",
+              "min-h-8 group flex w-64 flex-row items-center rounded-md px-3 py-[10px] hover:bg-gray-100 group-hover:text-gray-700 [&[aria-current='page']]:bg-gray-200 [&[aria-current='page']]:text-gray-900",
               props.disabled && "pointer-events-none !opacity-30",
               (isChild || !props.icon) && "ml-7 w-auto ltr:mr-5 rtl:ml-5",
               !info ? "h-6" : "h-14",
@@ -60,7 +60,7 @@ const VerticalTabItem = function ({
             data-testid={`vertical-tab-${name}`}
             aria-current={isCurrent ? "page" : undefined}>
             {props.icon && (
-              <props.icon className="h-[16px] w-[16px] stroke-[2px] ltr:mr-[10px] rtl:ml-[10px] md:mt-0" />
+              <props.icon className="h-[16px] w-[16px] stroke-[2px] ltr:mr-2 rtl:ml-2 md:mt-0" />
             )}
             <div className="h-fit">
               <span className="flex items-center space-x-2 rtl:space-x-reverse">
diff --git a/packages/ui/components/navigation/tabs/VerticalTabs.tsx b/packages/ui/components/navigation/tabs/VerticalTabs.tsx
index 49574c25fc..bec1c6e720 100644
--- a/packages/ui/components/navigation/tabs/VerticalTabs.tsx
+++ b/packages/ui/components/navigation/tabs/VerticalTabs.tsx
@@ -18,7 +18,7 @@ const NavTabs = function ({ tabs, className = "", sticky, linkProps, itemClassna
   return (
     <nav
       className={classNames(
-        `no-scrollbar flex flex-col space-y-1 overflow-scroll ${className}`,
+        `no-scrollbar flex flex-col space-y-0.5 overflow-scroll ${className}`,
         sticky && "sticky top-0 -mt-7"
       )}
       aria-label="Tabs"