diff --git a/apps/web/components/v2/apps/AdditionalCalendarSelector.tsx b/apps/web/components/v2/apps/AdditionalCalendarSelector.tsx
index 2d16bc1084..c230a32c4b 100644
--- a/apps/web/components/v2/apps/AdditionalCalendarSelector.tsx
+++ b/apps/web/components/v2/apps/AdditionalCalendarSelector.tsx
@@ -27,7 +27,7 @@ const ImageOption = (optionProps: OptionProps<{ [key: string]: string; type: App
             {data.image && (
               <img className="float-left mr-3 inline h-5 w-5" src={data.image} alt={data.label} />
             )}
-            <p>{data.label}</p>
+            <p>{`${t("add")} ${data.label}`}</p>
           </Button>
         );
       }}
@@ -35,7 +35,7 @@ const ImageOption = (optionProps: OptionProps<{ [key: string]: string; type: App
   ) : (
     <Button className="w-full" color="minimal" href="/apps/categories/calendar">
       <Icon.FiPlus className="text-color mr-3 ml-1 h-4 w-4" />
-      <p>{t("add_new_calendar")}...</p>
+      <p>{t("install_new_calendar_app")}</p>
     </Button>
   );
 };
@@ -63,11 +63,43 @@ const AdditionalCalendarSelector = ({ isLoading }: AdditionalCalendarSelectorPro
         return (
           <Select
             name="additionalCalendar"
-            placeholder={t("install_another")}
+            placeholder={
+              <Button className="rounded-md" StartIcon={Icon.FiPlus} color="secondary">
+                {t("add")}
+              </Button>
+            }
             options={options}
             isSearchable={false}
             isLoading={isLoading}
             components={{ Option: ImageOption }}
+            styles={{
+              menu: (defaultStyles) => ({
+                ...defaultStyles,
+                "@media only screen and (max-width: 640px)": {
+                  left: "0",
+                },
+                width: "max-content",
+                right: "0",
+              }),
+              control: (defaultStyles) => ({
+                ...defaultStyles,
+                padding: "0",
+                border: "0",
+                borderRadius: "inherit",
+              }),
+              dropdownIndicator: (defaultStyles) => ({
+                ...defaultStyles,
+                display: "none",
+              }),
+              valueContainer: (defaultStyles) => ({
+                ...defaultStyles,
+                padding: "0",
+              }),
+              placeholder: (defaultStyles) => ({
+                ...defaultStyles,
+                margin: "0",
+              }),
+            }}
           />
         );
       }}
diff --git a/apps/web/components/v2/apps/CalendarListContainer.tsx b/apps/web/components/v2/apps/CalendarListContainer.tsx
index fc7c1891c2..a042556a59 100644
--- a/apps/web/components/v2/apps/CalendarListContainer.tsx
+++ b/apps/web/components/v2/apps/CalendarListContainer.tsx
@@ -264,7 +264,7 @@ export function CalendarListContainer(props: { heading?: boolean; fromOnboarding
                     <ShellSubHeading
                       title={t("calendar")}
                       subtitle={t("installed_app_calendar_description")}
-                      className="mb-0 flex flex-wrap items-center gap-4 md:mb-3 md:gap-0"
+                      className="mb-0 flex flex-wrap items-center gap-4 sm:flex-nowrap md:mb-3 md:gap-0"
                       actions={
                         <div className="flex flex-col xl:flex-row xl:space-x-5">
                           {!!data.connectedCalendars.length && (
diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json
index 072e935eb6..229a477abd 100644
--- a/apps/web/public/static/locales/en/common.json
+++ b/apps/web/public/static/locales/en/common.json
@@ -1311,5 +1311,6 @@
   "after_event_trigger": "after event ends",
   "how_long_after": "How long after event ends?",
   "no_available_slots": "No Available slots",
-  "time_available": "Time available"
+  "time_available": "Time available",
+  "install_new_calendar_app": "Install new calendar app"
 }