diff --git a/packages/nc-gui/assets/style.scss b/packages/nc-gui/assets/style.scss
index 2ca27a0295..40700e91b0 100644
--- a/packages/nc-gui/assets/style.scss
+++ b/packages/nc-gui/assets/style.scss
@@ -598,10 +598,10 @@ input[type='number'] {
 }
 
 .nc-sidebar-node {
-  @apply !sm:(min-h-8.9 max-h-8.9);
+  @apply !xs:(min-h-8.9 max-h-8.9);
 
   .nc-sidebar-node-btn:not(.nc-sidebar-expand) {
-    @apply !sm:(hidden)
+    @apply !xs:(hidden)
   }
 }
 
@@ -611,9 +611,9 @@ input[type='number'] {
 
 
 .nc-button.ant-btn.nc-sidebar-node-btn.nc-sidebar-expand {
-  @apply sm:(opacity-100);
+  @apply xs:(opacity-100);
 
   .nc-icon {
-    @apply sm:(visible opacity-100 !text-gray-500)
+    @apply xs:(visible opacity-100 !text-gray-500)
   }
 }
diff --git a/packages/nc-gui/components/dashboard/Sidebar/Header.vue b/packages/nc-gui/components/dashboard/Sidebar/Header.vue
index d051a435f8..377a3137d3 100644
--- a/packages/nc-gui/components/dashboard/Sidebar/Header.vue
+++ b/packages/nc-gui/components/dashboard/Sidebar/Header.vue
@@ -16,7 +16,7 @@ const showSidebarBtn = computed(() => !(isMobileMode.value && !activeViewTitleOr
 
 <template>
   <div
-    class="flex items-center nc-sidebar-header w-full border-b-1 border-gray-200 group md:(px-2 py-1.2) sm:(px-1 py-1)"
+    class="flex items-center nc-sidebar-header w-full border-b-1 border-gray-200 group md:(px-2 py-1.2) xs:(px-1 py-1)"
     :data-workspace-title="activeWorkspace?.title"
     style="height: var(--topbar-height)"
   >
@@ -44,7 +44,7 @@ const showSidebarBtn = computed(() => !(isMobileMode.value && !activeViewTitleOr
           v-if="showSidebarBtn"
           :type="isMobileMode ? 'secondary' : 'text'"
           :size="isMobileMode ? 'medium' : 'small'"
-          class="nc-sidebar-left-toggle-icon !text-gray-700 !hover:text-gray-800 !sm:(h-10.5 max-h-10.5 max-w-10.5) !md:(hover:bg-gray-200)"
+          class="nc-sidebar-left-toggle-icon !text-gray-700 !hover:text-gray-800 !xs:(h-10.5 max-h-10.5 max-w-10.5) !md:(hover:bg-gray-200)"
           @click="isLeftSidebarOpen = !isLeftSidebarOpen"
         >
           <div class="flex items-center text-inherit">
diff --git a/packages/nc-gui/components/dashboard/Sidebar/TopSection.vue b/packages/nc-gui/components/dashboard/Sidebar/TopSection.vue
index b0b22d688d..399216b793 100644
--- a/packages/nc-gui/components/dashboard/Sidebar/TopSection.vue
+++ b/packages/nc-gui/components/dashboard/Sidebar/TopSection.vue
@@ -50,7 +50,7 @@ const navigateToSettings = () => {
         v-if="isUIAllowed('workspaceSettings')"
         type="text"
         size="small"
-        class="nc-sidebar-top-button !sm:hidden"
+        class="nc-sidebar-top-button !xs:hidden"
         data-testid="nc-sidebar-team-settings-btn"
         :centered="false"
         :class="{
@@ -68,7 +68,7 @@ const navigateToSettings = () => {
         v-model:is-open="isCreateProjectOpen"
         modal
         type="text"
-        class="nc-sidebar-top-button !hover:bg-gray-200 !sm:hidden"
+        class="nc-sidebar-top-button !hover:bg-gray-200 !xs:hidden"
         data-testid="nc-sidebar-create-project-btn"
       >
         <div class="gap-x-2 flex flex-row w-full items-center !font-normal">
diff --git a/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue b/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
index afb8446606..dcca5420ad 100644
--- a/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
@@ -393,12 +393,12 @@ const DlgProjectDuplicateOnOk = async (jobData: { id: string; project_id: string
           <NcButton
             type="text"
             size="xxsmall"
-            class="nc-sidebar-node-btn nc-sidebar-expand ml-0.75 !sm:visible"
+            class="nc-sidebar-node-btn nc-sidebar-expand ml-0.75 !xs:visible"
             @click="onProjectClick(project, true, true)"
           >
             <GeneralIcon
               icon="triangleFill"
-              class="group-hover:visible cursor-pointer transform transition-transform duration-500 h-1.5 w-1.75 rotate-90 !sm:visible"
+              class="group-hover:visible cursor-pointer transform transition-transform duration-500 h-1.5 w-1.75 rotate-90 !xs:visible"
               :class="{ '!rotate-180': project.isExpanded, '!visible': isOptionsOpen }"
             />
           </NcButton>
diff --git a/packages/nc-gui/components/dashboard/TreeView/ViewsList.vue b/packages/nc-gui/components/dashboard/TreeView/ViewsList.vue
index 2f06128b44..01dbc09319 100644
--- a/packages/nc-gui/components/dashboard/TreeView/ViewsList.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/ViewsList.vue
@@ -348,7 +348,7 @@ function onOpenModal({
 <template>
   <div
     v-if="!views.length"
-    class="text-gray-500 my-1.5"
+    class="text-gray-500 my-1.75"
     :class="{
       'ml-19.25': isDefaultBase,
       'ml-24.75': !isDefaultBase,
diff --git a/packages/nc-gui/components/general/OpenLeftSidebarBtn.vue b/packages/nc-gui/components/general/OpenLeftSidebarBtn.vue
index 0b919ee4e5..6961ff23c7 100644
--- a/packages/nc-gui/components/general/OpenLeftSidebarBtn.vue
+++ b/packages/nc-gui/components/general/OpenLeftSidebarBtn.vue
@@ -27,8 +27,8 @@ const onClick = () => {
     hide-on-click
     class="transition-all duration-100"
     :class="{
-      '!opacity-0': !isMobileMode && isLeftSidebarOpen,
-      '!opacity-100': isMobileMode || !isLeftSidebarOpen,
+      'opacity-0 max-w-0': !isMobileMode && isLeftSidebarOpen,
+      'opacity-100': isMobileMode || !isLeftSidebarOpen,
     }"
   >
     <template #title>
@@ -48,7 +48,7 @@ const onClick = () => {
       @click="onClick"
     >
       <div class="flex items-center text-inherit">
-        <GeneralIcon v-if="isMobileMode" icon="menu" />
+        <GeneralIcon v-if="isMobileMode" icon="menu" class="text-xl -mt-0.25" />
         <GeneralIcon v-else icon="doubleRightArrow" class="duration-150 transition-all !text-lg -mt-0.25" />
       </div>
     </NcButton>
diff --git a/packages/nc-gui/components/nc/Button.vue b/packages/nc-gui/components/nc/Button.vue
index 4c37c5a9b8..861cd20e19 100644
--- a/packages/nc-gui/components/nc/Button.vue
+++ b/packages/nc-gui/components/nc/Button.vue
@@ -137,7 +137,7 @@ useEventListener(NcButton, 'mousedown', () => {
 }
 
 .nc-button {
-  @apply !sm:(outline-none)
+  @apply !xs:(outline-none)
 
   box-shadow: 0px 5px 3px -2px rgba(0, 0, 0, 0.02), 0px 3px 1px -2px rgba(0, 0, 0, 0.06);
   outline: none;
@@ -162,7 +162,7 @@ useEventListener(NcButton, 'mousedown', () => {
 }
 
 .nc-button.ant-btn.medium {
-  @apply py-2 px-4 h-10 min-w-10 sm:(h-10.5 max-h-10.5 min-w-10.5 !px-3);
+  @apply py-2 px-4 h-10 min-w-10 xs:(h-10.5 max-h-10.5 min-w-10.5 !px-3);
 }
 
 .nc-button.ant-btn.xsmall {
@@ -187,7 +187,7 @@ useEventListener(NcButton, 'mousedown', () => {
 }
 
 .nc-button.ant-btn-primary {
-  @apply bg-brand-500 border-0 text-white sm:(hover:border-0) md:(hover:bg-brand-600);
+  @apply bg-brand-500 border-0 text-white xs:(hover:border-0) md:(hover:bg-brand-600);
 }
 
 .nc-button.ant-btn-secondary {
diff --git a/packages/nc-gui/components/smartsheet/Topbar.vue b/packages/nc-gui/components/smartsheet/Topbar.vue
index 3c839ef7c9..311b9248ca 100644
--- a/packages/nc-gui/components/smartsheet/Topbar.vue
+++ b/packages/nc-gui/components/smartsheet/Topbar.vue
@@ -17,7 +17,7 @@ const isSharedBase = computed(() => route.value.params.typeOrId === 'base')
 
 <template>
   <div
-    class="nc-table-topbar h-20 py-1 flex gap-2 items-center border-b border-gray-200 overflow-hidden relative max-h-[var(--topbar-height)] min-h-[var(--topbar-height)] md:(pr-2 pl-2.5) sm:(px-1)"
+    class="nc-table-topbar h-20 py-1 flex gap-2 items-center border-b border-gray-200 overflow-hidden relative max-h-[var(--topbar-height)] min-h-[var(--topbar-height)] md:(pr-2 pl-2.5) xs:(px-1)"
     style="z-index: 7"
   >
     <template v-if="isViewsLoading">
diff --git a/packages/nc-gui/components/smartsheet/grid/Table.vue b/packages/nc-gui/components/smartsheet/grid/Table.vue
index b3776b522f..ca5483ae4c 100644
--- a/packages/nc-gui/components/smartsheet/grid/Table.vue
+++ b/packages/nc-gui/components/smartsheet/grid/Table.vue
@@ -1209,7 +1209,7 @@ const expandAndLooseFocus = (row: Row, col: Record<string, any>) => {
                 <th
                   v-if="isAddingColumnAllowed"
                   v-e="['c:column:add']"
-                  class="cursor-pointer !border-0 relative !sm:hidden"
+                  class="cursor-pointer !border-0 relative !xs:hidden"
                   :style="{
                     borderWidth: '0px !important',
                   }"
@@ -1328,7 +1328,7 @@ const expandAndLooseFocus = (row: Row, col: Record<string, any>) => {
                 <LazySmartsheetRow v-for="(row, rowIndex) of dataRef" ref="rowRefs" :key="rowIndex" :row="row">
                   <template #default="{ state }">
                     <tr
-                      class="nc-grid-row !sm:h-14"
+                      class="nc-grid-row !xs:h-14"
                       :style="{ height: rowHeight ? `${rowHeight * 1.8}rem` : `1.8rem` }"
                       :data-testid="`grid-row-${rowIndex}`"
                     >
@@ -1460,7 +1460,7 @@ const expandAndLooseFocus = (row: Row, col: Record<string, any>) => {
               <tr
                 v-if="isAddingEmptyRowAllowed && !isGroupBy"
                 v-e="['c:row:add:grid-bottom']"
-                class="text-left nc-grid-add-new-cell cursor-pointer group relative z-3 sm:hidden"
+                class="text-left nc-grid-add-new-cell cursor-pointer group relative z-3 xs:hidden"
                 :class="{
                   '!border-r-2 !border-r-gray-100': visibleColLength === 1,
                 }"
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue
index 5fc778b699..d907947729 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue
@@ -58,7 +58,7 @@ useMenuCloseOnEsc(open)
     v-model:visible="open"
     :trigger="['click']"
     overlay-class-name="nc-dropdown-filter-menu nc-toolbar-dropdown"
-    class="!sm:hidden"
+    class="!xs:hidden"
   >
     <div :class="{ 'nc-active-btn': filtersLength }">
       <a-button v-e="['c:filter']" class="nc-filter-menu-btn nc-toolbar-btn txt-sm" :disabled="isLocked">
diff --git a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
index 1d20fd543c..ded4c5cba2 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
@@ -290,7 +290,7 @@ useMenuCloseOnEsc(open)
     v-model:visible="open"
     :trigger="['click']"
     overlay-class-name="nc-dropdown-fields-menu nc-toolbar-dropdown"
-    class="!sm:hidden"
+    class="!xs:hidden"
   >
     <div :class="{ 'nc-active-btn': numberOfHiddenFields }">
       <a-button v-e="['c:fields']" class="nc-fields-menu-btn nc-toolbar-btn" :disabled="isLocked">
diff --git a/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue
index ba67aac733..36b43e7d36 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue
@@ -151,7 +151,7 @@ watch(open, () => {
     v-model:visible="open"
     offset-y
     :trigger="['click']"
-    class="!sm:hidden"
+    class="!xs:hidden"
     overlay-class-name="nc-dropdown-group-by-menu nc-toolbar-dropdown"
   >
     <div :class="{ 'nc-active-btn': groupedByColumnIds?.length }">
diff --git a/packages/nc-gui/components/smartsheet/toolbar/MappedBy.vue b/packages/nc-gui/components/smartsheet/toolbar/MappedBy.vue
index be1c0eccde..ffe21ffeb9 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/MappedBy.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/MappedBy.vue
@@ -76,7 +76,7 @@ const handleChange = () => {
 </script>
 
 <template>
-  <a-dropdown v-if="!IsPublic" v-model:visible="mappedByDropdown" :trigger="['click']" class="!sm:hidden">
+  <a-dropdown v-if="!IsPublic" v-model:visible="mappedByDropdown" :trigger="['click']" class="!xs:hidden">
     <div class="nc-map-btn">
       <a-button v-e="['c:map:change-grouping-field']" class="nc-map-stacked-by-menu-btn nc-toolbar-btn" :disabled="isLocked">
         <div class="flex items-center gap-1">
diff --git a/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
index 46468d933d..14762e37db 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
@@ -109,7 +109,7 @@ watch(open, () => {
   <NcDropdown
     v-model:visible="open"
     :trigger="['click']"
-    class="!sm:hidden"
+    class="!xs:hidden"
     overlay-class-name="nc-dropdown-sort-menu nc-toolbar-dropdown"
   >
     <div :class="{ 'nc-active-btn': sorts?.length }">
diff --git a/packages/nc-gui/components/smartsheet/toolbar/StackedBy.vue b/packages/nc-gui/components/smartsheet/toolbar/StackedBy.vue
index 12e58b8455..accd1ba214 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/StackedBy.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/StackedBy.vue
@@ -110,7 +110,7 @@ const handleChange = () => {
     v-model:visible="open"
     :trigger="['click']"
     overlay-class-name="nc-dropdown-kanban-stacked-by-menu"
-    class="!sm:hidden"
+    class="!xs:hidden"
   >
     <div class="nc-kanban-btn">
       <a-button
diff --git a/packages/nc-gui/windi.config.ts b/packages/nc-gui/windi.config.ts
index f8e4f2c27b..87e05db5f1 100644
--- a/packages/nc-gui/windi.config.ts
+++ b/packages/nc-gui/windi.config.ts
@@ -56,6 +56,9 @@ export default defineConfig({
     },
     extend: {
       screens: {
+        xs: {
+          max: '480px',
+        },
         sm: {
           max: '820px',
         },