diff --git a/ui/public/version.json b/ui/public/version.json
index c8822bd..b4a345a 100644
--- a/ui/public/version.json
+++ b/ui/public/version.json
@@ -1,5 +1,5 @@
 {
-  "commit": "b286332",
+  "commit": "c1e7f8c",
   "releases": [
     {
       "version": "1.1.04",
diff --git a/ui/src/components/template/MobileNav.tsx b/ui/src/components/template/MobileNav.tsx
index 4a0d4a0..e92a079 100644
--- a/ui/src/components/template/MobileNav.tsx
+++ b/ui/src/components/template/MobileNav.tsx
@@ -1,7 +1,12 @@
 import { useState, Suspense, lazy } from 'react'
 import classNames from 'classnames'
 import Drawer from '@/components/ui/Drawer'
-import { NAV_MODE_THEMED, NAV_MODE_TRANSPARENT, DIR_RTL } from '@/constants/theme.constant'
+import {
+  DIR_RTL,
+  MODE_DARK,
+  NAV_MODE_DARK,
+  NAV_MODE_THEMED,
+} from '@/constants/theme.constant'
 import withHeaderItem, { WithHeaderItemProps } from '@/utils/hoc/withHeaderItem'
 import NavToggle from '@/components/shared/NavToggle'
 import useResponsive from '@/utils/hooks/useResponsive'
@@ -32,21 +37,17 @@ const MobileNav = () => {
   const mode = useStoreState((state) => state.theme.mode)
   const direction = useStoreState((state) => state.theme.direction)
   const currentRouteKey = useStoreState((state) => state.base.common.currentRouteKey)
-  const sideNavCollapse = useStoreState((state) => state.theme.layout.sideNavCollapse)
   const userAuthority = useStoreState((state) => state.auth.user.authority)
 
   const { smaller } = useResponsive()
+  const mobileNavMode = mode === MODE_DARK && navMode !== NAV_MODE_THEMED ? NAV_MODE_DARK : navMode
 
   const navColor = () => {
-    if (navMode === NAV_MODE_THEMED) {
+    if (mobileNavMode === NAV_MODE_THEMED) {
       return `bg-${themeColor}-${primaryColorLevel} side-nav-${navMode}`
     }
 
-    if (navMode === NAV_MODE_TRANSPARENT) {
-      return `side-nav-${mode}`
-    }
-
-    return `side-nav-${navMode}`
+    return `side-nav-${mobileNavMode}`
   }
 
   const { mainMenu: navigationConfig } = useStoreState((state) => state.abpConfig.menu)
@@ -61,6 +62,8 @@ const MobileNav = () => {
           <Drawer
             title="Navigation"
             isOpen={isOpen}
+            className={classNames(mode === MODE_DARK && 'bg-gray-800 text-gray-100')}
+            headerClass={classNames(mode === MODE_DARK && 'border-gray-700')}
             bodyClass={classNames(navColor(), 'p-0')}
             width={320}
             placement={direction === DIR_RTL ? 'right' : 'left'}
@@ -70,7 +73,7 @@ const MobileNav = () => {
             <Suspense fallback={<></>}>
               {isOpen && (
                 <VerticalMenuContent
-                  navMode={navMode}
+                  navMode={mobileNavMode}
                   collapsed={false}
                   navigationTree={navigationConfig}
                   routeKey={currentRouteKey}
diff --git a/ui/src/components/template/ThemeConfigurator/ThemeConfigurator.tsx b/ui/src/components/template/ThemeConfigurator/ThemeConfigurator.tsx
index 92174d2..16e5788 100644
--- a/ui/src/components/template/ThemeConfigurator/ThemeConfigurator.tsx
+++ b/ui/src/components/template/ThemeConfigurator/ThemeConfigurator.tsx
@@ -23,7 +23,7 @@ const ThemeConfigurator = ({ callBackClose }: ThemeConfiguratorProps) => {
 
   return (
     <div className="flex flex-col h-full justify-between">
-      <div className="flex flex-col gap-y-3 mb-2">
+      <div className="flex flex-col gap-y-3 mb-2 ml-1">
         <div>
           <h6 className="mb-3">{translate('::App.SiteManagement.Theme.Style')}</h6>
           <StyleSwitcher onStyleChange={handleStyleChange} />
diff --git a/ui/src/views/admin/listForm/edit/FormTabDetails.tsx b/ui/src/views/admin/listForm/edit/FormTabDetails.tsx
index e755f4a..3577009 100644
--- a/ui/src/views/admin/listForm/edit/FormTabDetails.tsx
+++ b/ui/src/views/admin/listForm/edit/FormTabDetails.tsx
@@ -294,7 +294,7 @@ function FormTabDetails(
                       </Field>
                     </FormItem>
 
-                    <div className="flex gap-2">
+                    <div className="flex flex-wrap gap-2">
                       <FormItem
                         label={translate('::ListForms.ListFormEdit.DetailsLayoutDto.GridLayout')}
                         invalid={errors.layoutDto?.grid && touched.layoutDto?.grid}
diff --git a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabDetails.tsx b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabDetails.tsx
index e4551d5..91bbc7c 100644
--- a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabDetails.tsx
+++ b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabDetails.tsx
@@ -1,5 +1,5 @@
 import { Container } from '@/components/shared'
-import { Button, FormContainer, FormItem, Input, Select } from '@/components/ui'
+import { Button, Card, FormContainer, FormItem, Input, Select } from '@/components/ui'
 import { ColumnFormatEditDto, ListFormFieldEditTabs } from '@/proxy/admin/list-form-field/models'
 import { SelectBoxOption } from '@/types/shared'
 import { useLocalization } from '@/utils/hooks/useLocalization'
@@ -28,18 +28,18 @@ function FormFieldTabDetails({
   const { translate } = useLocalization()
 
   return (
-    <Container className="grid xl:grid-cols-2">
-      <Formik
-        enableReinitialize
-        initialValues={initialValues}
-        validationSchema={schema}
-        onSubmit={async (values, formikHelpers) => {
-          await onSubmit(ListFormFieldEditTabs.DetailsForm, values, formikHelpers)
-        }}
-      >
-        {({ touched, errors, isSubmitting, values }) => (
-          <Form>
-            <FormContainer size="sm">
+    <Formik
+      enableReinitialize
+      initialValues={initialValues}
+      validationSchema={schema}
+      onSubmit={async (values, formikHelpers) => {
+        await onSubmit(ListFormFieldEditTabs.DetailsForm, values, formikHelpers)
+      }}
+    >
+      {({ touched, errors, isSubmitting, values }) => (
+        <Form>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+            <Card>
               <FormItem
                 label={translate('::ListForms.ListFormFieldEdit.FieldName')}
                 invalid={errors.fieldName && touched.fieldName}
@@ -68,6 +68,8 @@ function FormFieldTabDetails({
               >
                 <Field type="text" name="bandName" component={Input} />
               </FormItem>
+            </Card>
+            <Card>
               <FormItem label={translate('::ListForms.ListFormEdit.CustomValueType')}>
                 <Field type="text" name="sourceDbType">
                   {({ field, form }: FieldProps<SelectBoxOption>) => (
@@ -84,7 +86,6 @@ function FormFieldTabDetails({
                   )}
                 </Field>
               </FormItem>
-
               <FormItem label={translate('::ListForms.ListFormFieldEdit.DetailsAlignment')}>
                 <Field type="text" name="alignment">
                   {({ field, form }: FieldProps<SelectBoxOption>) => (
@@ -130,15 +131,14 @@ function FormFieldTabDetails({
                   textArea={true}
                 />
               </FormItem>
-
-              <Button block variant="solid" loading={isSubmitting} type="submit">
-                {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
-              </Button>
-            </FormContainer>
-          </Form>
-        )}
-      </Formik>
-    </Container>
+            </Card>
+          </div>
+          <Button block variant="solid" loading={isSubmitting} type="submit">
+            {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+          </Button>
+        </Form>
+      )}
+    </Formik>
   )
 }
 
diff --git a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabJoinOptions.tsx b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabJoinOptions.tsx
index d954476..082a51f 100644
--- a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabJoinOptions.tsx
+++ b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabJoinOptions.tsx
@@ -1,5 +1,5 @@
 import { Container } from '@/components/shared'
-import { Button, FormContainer, FormItem, Input, Select } from '@/components/ui'
+import { Button, Card, FormContainer, FormItem, Input, Select } from '@/components/ui'
 import {
   ColumnFormatEditDto,
   GridColumnJoinConditionEnum,
@@ -39,18 +39,18 @@ function FormFieldTabJoinOptions({
   const { translate } = useLocalization()
 
   return (
-    <Container className="grid xl:grid-cols-2">
-      <Formik
-        enableReinitialize
-        initialValues={initialValues}
-        validationSchema={schema}
-        onSubmit={async (values, formikHelpers) => {
-          await onSubmit(ListFormFieldEditTabs.JoinOptionsForm, values, formikHelpers)
-        }}
-      >
-        {({ touched, errors, isSubmitting, values }) => (
-          <Form>
-            <FormContainer size="sm">
+    <Formik
+      enableReinitialize
+      initialValues={initialValues}
+      validationSchema={schema}
+      onSubmit={async (values, formikHelpers) => {
+        await onSubmit(ListFormFieldEditTabs.JoinOptionsForm, values, formikHelpers)
+      }}
+    >
+      {({ touched, errors, isSubmitting, values }) => (
+        <Form>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+            <Card>
               <FormItem
                 labelClass="!justify-start"
                 labelWidth="40%"
@@ -147,7 +147,8 @@ function FormFieldTabJoinOptions({
                   component={Input}
                 />
               </FormItem>
-
+            </Card>
+            <Card>
               <FormItem
                 label={translate('::ListForms.ListFormFieldEdit.JoinOptionsFieldNameAlias')}
                 invalid={
@@ -231,15 +232,14 @@ function FormFieldTabJoinOptions({
                   component={Input}
                 />
               </FormItem>
-
-              <Button block variant="solid" loading={isSubmitting} type="submit">
-                {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
-              </Button>
-            </FormContainer>
-          </Form>
-        )}
-      </Formik>
-    </Container>
+            </Card>
+          </div>
+          <Button block variant="solid" loading={isSubmitting} type="submit">
+            {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+          </Button>
+        </Form>
+      )}
+    </Formik>
   )
 }
 
diff --git a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabLookup.tsx b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabLookup.tsx
index fe5b0d2..8998101 100644
--- a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabLookup.tsx
+++ b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabLookup.tsx
@@ -1,5 +1,5 @@
 import { Container } from '@/components/shared'
-import { Button, Checkbox, FormContainer, FormItem, Input, Select } from '@/components/ui'
+import { Button, Card, Checkbox, FormContainer, FormItem, Input, Select } from '@/components/ui'
 import { ColumnFormatEditDto, ListFormFieldEditTabs } from '@/proxy/admin/list-form-field/models'
 import type { DatabaseColumnDto, SqlObjectExplorerDto } from '@/proxy/sql-query-manager/models'
 import { sqlObjectManagerService } from '@/services/sql-query-manager.service'
@@ -46,7 +46,9 @@ function TablePickerModal({
   const { translate } = useLocalization()
   const [step, setStep] = useState<'table' | 'columns'>('table')
   const [tableSearch, setTableSearch] = useState('')
-  const [pickerTable, setPickerTable] = useState<{ schemaName: string; tableName: string } | null>(null)
+  const [pickerTable, setPickerTable] = useState<{ schemaName: string; tableName: string } | null>(
+    null,
+  )
   const [pickerColumns, setPickerColumns] = useState<DatabaseColumnDto[]>([])
   const [isLoadingColumns, setIsLoadingColumns] = useState(false)
   const [keyCol, setKeyCol] = useState('')
@@ -76,7 +78,7 @@ function TablePickerModal({
             <span className="text-sm font-semibold text-gray-700 dark:text-gray-200">
               {step === 'table'
                 ? translate('::ListForms.Wizard.Step3.SelectTable') || 'Tablo Seç'
-                : pickerTable?.tableName ?? ''}
+                : (pickerTable?.tableName ?? '')}
             </span>
           </div>
           <button
@@ -120,7 +122,11 @@ function TablePickerModal({
                         setPickerColumns([])
                         setIsLoadingColumns(true)
                         try {
-                          const res = await sqlObjectManagerService.getTableColumns(dsCode, t.schemaName, t.tableName)
+                          const res = await sqlObjectManagerService.getTableColumns(
+                            dsCode,
+                            t.schemaName,
+                            t.tableName,
+                          )
                           setPickerColumns(res.data ?? [])
                         } catch {
                           setPickerColumns([])
@@ -159,7 +165,9 @@ function TablePickerModal({
                   >
                     <option value="">-- Seçiniz --</option>
                     {pickerColumns.map((c) => (
-                      <option key={c.columnName} value={c.columnName}>{c.columnName}</option>
+                      <option key={c.columnName} value={c.columnName}>
+                        {c.columnName}
+                      </option>
                     ))}
                   </select>
                 </div>
@@ -174,7 +182,9 @@ function TablePickerModal({
                   >
                     <option value="">-- Seçiniz --</option>
                     {pickerColumns.map((c) => (
-                      <option key={c.columnName} value={c.columnName}>{c.columnName}</option>
+                      <option key={c.columnName} value={c.columnName}>
+                        {c.columnName}
+                      </option>
                     ))}
                   </select>
                 </div>
@@ -187,7 +197,9 @@ function TablePickerModal({
                   type="button"
                   disabled={!keyCol || !nameCol}
                   onClick={() => {
-                    onSelect(`SELECT "${keyCol}" AS "Key", "${nameCol}" AS "Name" FROM "${pickerTable?.tableName}" ORDER BY "${nameCol}";`)
+                    onSelect(
+                      `SELECT "${keyCol}" AS "Key", "${nameCol}" AS "Name" FROM "${pickerTable?.tableName}" ORDER BY "${nameCol}";`,
+                    )
                   }}
                   className="mt-1 w-full py-1.5 text-xs font-semibold rounded bg-indigo-600 text-white hover:bg-indigo-700 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
                 >
@@ -246,18 +258,18 @@ function FormFieldTabLookup({
   }
 
   return (
-    <Container className="grid xl:grid-cols-2">
-      <Formik
-        enableReinitialize
-        initialValues={getNormalizedInitialValues(initialValues)}
-        validationSchema={schema}
-        onSubmit={async (values) => {
-          await onSubmit(ListFormFieldEditTabs.LookupForm, values)
-        }}
-      >
-        {({ touched, errors, isSubmitting, values }) => (
-          <Form>
-            <FormContainer size="sm">
+    <Formik
+      enableReinitialize
+      initialValues={getNormalizedInitialValues(initialValues)}
+      validationSchema={schema}
+      onSubmit={async (values) => {
+        await onSubmit(ListFormFieldEditTabs.LookupForm, values)
+      }}
+    >
+      {({ touched, errors, isSubmitting, values }) => (
+        <Form>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+            <Card>
               <FormItem
                 label={translate('::ListForms.ListFormFieldEdit.LookupDataSourceType')}
                 invalid={errors.lookupDto?.dataSourceType && touched.lookupDto?.dataSourceType}
@@ -351,7 +363,8 @@ function FormFieldTabLookup({
                   component={Input}
                 />
               </FormItem>
-
+            </Card>
+            <Card>
               <FormItem
                 label={translate('::ListForms.ListFormFieldEdit.LookupCascadeRelationField')}
                 invalid={
@@ -432,15 +445,14 @@ function FormFieldTabLookup({
                   component={Input}
                 />
               </FormItem>
-
-              <Button block variant="solid" loading={isSubmitting} type="submit">
-                {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
-              </Button>
-            </FormContainer>
-          </Form>
-        )}
-      </Formik>
-    </Container>
+            </Card>
+          </div>
+          <Button block variant="solid" loading={isSubmitting} type="submit">
+            {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+          </Button>
+        </Form>
+      )}
+    </Formik>
   )
 }
 
diff --git a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabOptions.tsx b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabOptions.tsx
index ba014d1..90571b7 100644
--- a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabOptions.tsx
+++ b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabOptions.tsx
@@ -1,5 +1,5 @@
 import { Container } from '@/components/shared'
-import { Button, Checkbox, FormContainer, FormItem, Input, Select } from '@/components/ui'
+import { Button, Card, Checkbox, FormContainer, FormItem, Input, Select } from '@/components/ui'
 import { ColumnFormatEditDto, ListFormFieldEditTabs } from '@/proxy/admin/list-form-field/models'
 import { SelectBoxOption } from '@/types/shared'
 import { useLocalization } from '@/utils/hooks/useLocalization'
@@ -32,18 +32,18 @@ function FormFieldTabOptions({
   const { translate } = useLocalization()
 
   return (
-    <Container className="grid xl:grid-cols-2">
-      <Formik
-        enableReinitialize
-        initialValues={initialValues}
-        validationSchema={schema}
-        onSubmit={async (values, formikHelpers) => {
-          await onSubmit(ListFormFieldEditTabs.OptionsForm, values, formikHelpers)
-        }}
-      >
-        {({ touched, errors, isSubmitting, values }) => (
-          <Form>
-            <FormContainer size="sm">
+    <Formik
+      enableReinitialize
+      initialValues={initialValues}
+      validationSchema={schema}
+      onSubmit={async (values, formikHelpers) => {
+        await onSubmit(ListFormFieldEditTabs.OptionsForm, values, formikHelpers)
+      }}
+    >
+      {({ touched, errors, isSubmitting, values }) => (
+        <Form>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+            <Card>
               <FormItem
                 label={translate('::ListForms.ListFormFieldEdit.OptionsListOrderNo')}
                 invalid={errors.listOrderNo && touched.listOrderNo}
@@ -85,6 +85,8 @@ function FormFieldTabOptions({
               >
                 <Field type="number" name="sortIndex" component={Input} />
               </FormItem>
+            </Card>
+            <Card>
               <FormItem
                 label={translate('::ListForms.ListFormFieldEdit.OptionsIsActive')}
                 invalid={errors.isActive && touched.isActive}
@@ -108,15 +110,15 @@ function FormFieldTabOptions({
               <FormItem label={translate('::ListForms.ListFormEdit.AllowAdding')}>
                 <Field name="allowAdding" component={Checkbox} />
               </FormItem>
+            </Card>
+          </div>
 
-              <Button block variant="solid" loading={isSubmitting} type="submit">
-                {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
-              </Button>
-            </FormContainer>
-          </Form>
-        )}
-      </Formik>
-    </Container>
+          <Button block variant="solid" loading={isSubmitting} type="submit">
+            {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+          </Button>
+        </Form>
+      )}
+    </Formik>
   )
 }
 
diff --git a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabPivotSetting.tsx b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabPivotSetting.tsx
index d4b9f57..3013065 100644
--- a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabPivotSetting.tsx
+++ b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabPivotSetting.tsx
@@ -1,5 +1,5 @@
 import { Container } from '@/components/shared'
-import { Button, Checkbox, FormContainer, FormItem, Input, Select } from '@/components/ui'
+import { Button, Card, Checkbox, FormContainer, FormItem, Input, Select } from '@/components/ui'
 import { ColumnFormatEditDto, ListFormFieldEditTabs } from '@/proxy/admin/list-form-field/models'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { Field, FieldProps, Form, Formik } from 'formik'
@@ -38,18 +38,18 @@ function FormFieldTabPivotSetting({
   const { translate } = useLocalization()
 
   return (
-    <Container className="grid xl:grid-cols-2">
-      <Formik
-        enableReinitialize
-        initialValues={initialValues}
-        validationSchema={schema}
-        onSubmit={async (values, formikHelpers) => {
-          await onSubmit(ListFormFieldEditTabs.PivotSettingsForm, values, formikHelpers)
-        }}
-      >
-        {({ touched, errors, isSubmitting, values }) => (
-          <Form>
-            <FormContainer size="sm">
+    <Formik
+      enableReinitialize
+      initialValues={initialValues}
+      validationSchema={schema}
+      onSubmit={async (values, formikHelpers) => {
+        await onSubmit(ListFormFieldEditTabs.PivotSettingsForm, values, formikHelpers)
+      }}
+    >
+      {({ touched, errors, isSubmitting, values }) => (
+        <Form>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+            <Card>
               <FormItem
                 label={translate('::ListForms.ListFormFieldEdit.PivotSettingIsPivot')}
                 invalid={errors.pivotSettingsDto?.isPivot && touched.pivotSettingsDto?.isPivot}
@@ -137,7 +137,9 @@ function FormFieldTabPivotSetting({
                   )}
                 </Field>
               </FormItem>
+            </Card>
 
+            <Card>
               <FormItem
                 label={translate('::ListForms.ListFormFieldEdit.PivotSettingGroupInterval')}
                 invalid={
@@ -210,15 +212,14 @@ function FormFieldTabPivotSetting({
               >
                 <Field name="pivotSettingsDto.wordWrapEnabled" component={Checkbox} />
               </FormItem>
-
-              <Button block variant="solid" loading={isSubmitting} type="submit">
-                {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
-              </Button>
-            </FormContainer>
-          </Form>
-        )}
-      </Formik>
-    </Container>
+            </Card>
+          </div>
+          <Button block variant="solid" loading={isSubmitting} type="submit">
+            {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+          </Button>
+        </Form>
+      )}
+    </Formik>
   )
 }
 
diff --git a/ui/src/views/admin/listForm/edit/form-fields/FormFields.tsx b/ui/src/views/admin/listForm/edit/form-fields/FormFields.tsx
index b241920..f754d1b 100644
--- a/ui/src/views/admin/listForm/edit/form-fields/FormFields.tsx
+++ b/ui/src/views/admin/listForm/edit/form-fields/FormFields.tsx
@@ -405,8 +405,7 @@ function FormFields({
               <Table compact>
                 <THead>
                   <Tr>
-                    {/* <Th className="w-[40px]"></Th> */}
-                    <Th>
+                    <Th className='w-3/12'>
                       <div>
                         <Button
                           shape="circle"
@@ -446,10 +445,10 @@ function FormFields({
                         )}
                       </div>
                     </Th>
-                    <Th>Field</Th>
-                    <Th>Culture</Th>
-                    <Th>Role</Th>
-                    <Th>User</Th>
+                    <Th className="w-3/12">Field</Th>
+                    <Th className="w-2/12">Culture</Th>
+                    <Th className="hidden sm:table-cell w-2/12">Role</Th>
+                    <Th className="hidden sm:table-cell w-2/12">User</Th>
                   </Tr>
                 </THead>
                 <TBody>
@@ -464,7 +463,7 @@ function FormFields({
                       }}
                       key={field.id}
                     >
-                      <Td className="flex items-center space-x-1">
+                      <Td className="flex items-center !p-0">
                         <Button
                           shape="circle"
                           variant="plain"
@@ -483,20 +482,20 @@ function FormFields({
                         <span>{!field?.visible && <FaEyeSlash />}</span>
                         <span>{!field?.isActive && <FaTimes />}</span>
                       </Td>
-                      <Td>{field.fieldName}</Td>
-                      <Td className="flex items-center space-x-1">
+                      <Td className='!p-0'>{field.fieldName}</Td>
+                      <Td className='align-middle text-center !p-0'>
                         <Avatar
                           size={18}
                           shape="circle"
                           src={`/img/countries/${field.cultureName ?? 'default'}.png`}
+                          title={field.cultureName}
                         />
-                        <span className="ltr:ml-2 rtl:mr-2">{field.cultureName}</span>
                       </Td>
-                      <Td>
+                      <Td className="hidden sm:table-cell !p-0">
                         {field.roleId &&
                           (roleList.find((a) => a.value === field.roleId)?.label ?? 'X')}
                       </Td>
-                      <Td>
+                      <Td className="hidden sm:table-cell !p-0">
                         {field.userId &&
                           (userList.find((a) => a.value === field.userId)?.label ?? 'X')}
                       </Td>
diff --git a/ui/src/views/list/GanttView.tsx b/ui/src/views/list/GanttView.tsx
index 5a09f37..1d58cd7 100644
--- a/ui/src/views/list/GanttView.tsx
+++ b/ui/src/views/list/GanttView.tsx
@@ -244,23 +244,26 @@ const GanttView = (props: GanttViewProps) => {
                   progressExpr={gridDto.gridOptions.ganttOptionDto?.progressExpr}
                 />
 
-                <Toolbar>
-                  <Item name="undo" />
-                  <Item name="redo" />
-                  <Item name="separator" />
-                  <Item name="collapseAll" />
-                  <Item name="expandAll" />
-                  {gridDto.gridOptions.ganttOptionDto?.allowTaskAdding && <Item name="addTask" />}
-                  {gridDto.gridOptions.ganttOptionDto?.allowTaskDeleting && (
-                    <Item name="deleteTask" />
+                <Toolbar multiline>
+                  <Item name="undo" locateInMenu="auto" />
+                  <Item name="redo" locateInMenu="auto" />
+                  <Item name="separator" locateInMenu="auto" />
+                  <Item name="collapseAll" locateInMenu="auto" />
+                  <Item name="expandAll" locateInMenu="auto" />
+                  {gridDto.gridOptions.ganttOptionDto?.allowTaskAdding && (
+                    <Item name="addTask" locateInMenu="auto" />
                   )}
-                  <Item name="separator" />
-                  <Item name="zoomIn" />
-                  <Item name="zoomOut" />
-                  <Item name="separator" />
+                  {gridDto.gridOptions.ganttOptionDto?.allowTaskDeleting && (
+                    <Item name="deleteTask" locateInMenu="auto" />
+                  )}
+                  <Item name="separator" locateInMenu="auto" />
+                  <Item name="zoomIn" locateInMenu="auto" />
+                  <Item name="zoomOut" locateInMenu="auto" />
+                  <Item name="separator" locateInMenu="auto" />
                   <Item
                     location="after"
                     widget="dxSelectBox"
+                    locateInMenu="auto"
                     options={{
                       width: 150,
                       items: [
@@ -279,9 +282,21 @@ const GanttView = (props: GanttViewProps) => {
                       onValueChanged: (e: any) => setScaleType(e.value),
                     }}
                   />
-                  <Item location="after" widget="dxButton" options={getRefreshButtonOptions()} />
+                  <Item
+                    location="after"
+                    widget="dxButton"
+                    locateInMenu="auto"
+                    showText="always"
+                    options={getRefreshButtonOptions()}
+                  />
                   {checkPermission(gridDto?.gridOptions.permissionDto.u) && (
-                    <Item location="after" widget="dxButton" options={getSettingButtonOptions()} />
+                    <Item
+                      location="after"
+                      widget="dxButton"
+                      locateInMenu="auto"
+                      showText="always"
+                      options={getSettingButtonOptions()}
+                    />
                   )}
                 </Toolbar>
                 
diff --git a/ui/src/views/list/Grid.tsx b/ui/src/views/list/Grid.tsx
index b9b59ad..1ef628d 100644
--- a/ui/src/views/list/Grid.tsx
+++ b/ui/src/views/list/Grid.tsx
@@ -1829,7 +1829,10 @@ const Grid = (props: GridProps) => {
                       setExtraFilters={setExtraFilters}
                     />
                   </Template>
-                  <Toolbar visible={toolbarData.length > 0 || filterToolbarData.length > 0}>
+                  <Toolbar
+                    visible={toolbarData.length > 0 || filterToolbarData.length > 0}
+                    multiline
+                  >
                     {toolbarData.map((item) => (
                       <Item key={item.name} {...item}></Item>
                     ))}
diff --git a/ui/src/views/list/Tree.tsx b/ui/src/views/list/Tree.tsx
index 5042610..c92eee7 100644
--- a/ui/src/views/list/Tree.tsx
+++ b/ui/src/views/list/Tree.tsx
@@ -1601,6 +1601,7 @@ const Tree = (props: TreeProps) => {
               </Template>
               <Toolbar
                 visible={(toolbarData?.length ?? 0) > 0 || (filterToolbarData?.length ?? 0) > 0}
+                multiline
               >
                 {toolbarData?.map((item) => (
                   <Item key={item.name} {...item}></Item>
diff --git a/ui/src/views/list/useToolbar.tsx b/ui/src/views/list/useToolbar.tsx
index 9dae41d..db82a93 100644
--- a/ui/src/views/list/useToolbar.tsx
+++ b/ui/src/views/list/useToolbar.tsx
@@ -127,6 +127,8 @@ const useToolbar = ({
     items.push({
       widget: 'dxButton',
       name: 'refreshButton',
+      locateInMenu: 'auto',
+      showText: 'always',
       options: {
         icon: 'refresh',
         onClick: refreshData,
@@ -147,6 +149,8 @@ const useToolbar = ({
         widget: 'dxButton',
         name: 'workflowStart',
         location: 'after',
+        locateInMenu: 'auto',
+        showText: 'always',
         options: {
           icon: 'play',
           text: 'Workflow Start',
@@ -204,6 +208,8 @@ const useToolbar = ({
           widget: 'dxButton',
           name: `workflowApproval_${criteria.id}`,
           location: 'after',
+          locateInMenu: 'auto',
+          showText: 'always',
           options: {
             icon: 'check',
             text: criteria.title,
@@ -272,6 +278,8 @@ const useToolbar = ({
       items.push({
         widget: 'dxButton',
         name: 'expandAllButton',
+        locateInMenu: 'auto',
+        showText: 'always',
         options: {
           icon: 'plus',
           text: translate('::ListForms.ListFormEdit.ExpandAll'),
@@ -284,6 +292,8 @@ const useToolbar = ({
       items.push({
         widget: 'dxButton',
         name: 'collapseAllButton',
+        locateInMenu: 'auto',
+        showText: 'always',
         options: {
           icon: 'minus',
           text: translate('::ListForms.ListFormEdit.CollapseAll'),
@@ -407,6 +417,8 @@ const useToolbar = ({
         const buttonDeleteAll: DataGridTypes.ToolbarItem = {
           location: 'after',
           widget: 'dxButton',
+          locateInMenu: 'auto',
+          showText: 'always',
           name: 'deleteAllRecords',
           options: {
             text: translate('::ListForms.ListForm.DeleteAllRecords'),
@@ -490,6 +502,8 @@ const useToolbar = ({
         const buttonCustom: DataGridTypes.ToolbarItem = {
           location: 'after',
           widget: 'dxButton',
+          locateInMenu: 'auto',
+          showText: 'always',
           name: action.hint,
           options: {
             hint: translate('::' + action.hint),