diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
index 25893ee253..252b94864c 100644
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@@ -44,6 +44,8 @@ const [searchActive, toggleSearchActive] = useToggle()
 
 let key = $ref(0)
 
+const activeKey = ref([])
+
 const menuRef = $ref<HTMLLIElement>()
 
 let filterQuery = $ref('')
@@ -434,7 +436,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
                     </GeneralTooltip>
                   </div>
                 </div>
-                <a-collapse v-else expand-icon-position="right" :bordered="false" ghost>
+                <a-collapse v-else v-model:activeKey="activeKey" expand-icon-position="right" :bordered="false" accordion ghost>
                   <a-collapse-panel :key="index">
                     <template #header>
                       <div v-if="index !== '0'" class="flex items-center gap-2">
@@ -771,6 +773,6 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
 }
 
 :deep(.ant-collapse-header) {
-  @apply !border-0 !border-y-1;
+  @apply !border-0;
 }
 </style>
diff --git a/packages/nc-gui/components/dashboard/settings/DataSources.vue b/packages/nc-gui/components/dashboard/settings/DataSources.vue
index 924dc5f2be..9dfea5efef 100644
--- a/packages/nc-gui/components/dashboard/settings/DataSources.vue
+++ b/packages/nc-gui/components/dashboard/settings/DataSources.vue
@@ -133,39 +133,47 @@ watch(
           <a-table-column key="action" :title="$t('labels.actions')" :width="180">
             <template #default="{ record }">
               <div class="flex items-center gap-2">
-                <a-tooltip>
-                  <template #title>Sync Metadata {{ metadiffbases.includes(record.id) ? '(Out of sync)' : '' }}</template>
-                  <MdiDatabaseSync
-                    class="nc-action-btn cursor-pointer outline-0"
-                    :class="metadiffbases.includes(record.id) ? 'text-primary' : ''"
-                    @click="baseAction(record.id, DataSourcesSubTab.Metadata)"
-                  />
-                </a-tooltip>
-                <a-tooltip>
-                  <template #title>UI ACL</template>
-                  <MdiDatabaseLockOutline
-                    class="nc-action-btn cursor-pointer outline-0"
-                    @click="baseAction(record.id, DataSourcesSubTab.UIAcl)"
-                  />
-                </a-tooltip>
-                <a-tooltip>
-                  <template #title>ERD</template>
-                  <MdiGraphOutline
-                    class="nc-action-btn cursor-pointer outline-0"
-                    @click="baseAction(record.id, DataSourcesSubTab.ERD)"
-                  />
-                </a-tooltip>
-                <a-tooltip v-if="!record.is_meta">
-                  <template #title>Edit</template>
-                  <MdiEditOutline
-                    class="nc-action-btn cursor-pointer outline-0"
-                    @click="baseAction(record.id, DataSourcesSubTab.Edit)"
-                  />
-                </a-tooltip>
-                <a-tooltip v-if="!record.is_meta">
-                  <template #title>Delete</template>
-                  <MdiDeleteOutline class="nc-action-btn cursor-pointer outline-0" @click="deleteBase(record)" />
-                </a-tooltip>
+                <a-button
+                  class="nc-action-btn cursor-pointer outline-0"
+                  @click="baseAction(record.id, DataSourcesSubTab.Metadata)"
+                >
+                  <div class="flex items-center gap-2 text-gray-600 font-light">
+                    <a-tooltip v-if="metadiffbases.includes(record.id)">
+                      <template #title>Out of sync</template>
+                      <MdiDatabaseSync class="text-lg group-hover:text-accent text-primary" />
+                    </a-tooltip>
+                    <MdiDatabaseSync v-else class="text-lg group-hover:text-accent" />
+                    Sync Metadata
+                  </div>
+                </a-button>
+                <a-button class="nc-action-btn cursor-pointer outline-0" @click="baseAction(record.id, DataSourcesSubTab.UIAcl)">
+                  <div class="flex items-center gap-2 text-gray-600 font-light">
+                    <MdiDatabaseLockOutline class="text-lg group-hover:text-accent" />
+                    UI ACL
+                  </div>
+                </a-button>
+                <a-button class="nc-action-btn cursor-pointer outline-0" @click="baseAction(record.id, DataSourcesSubTab.ERD)">
+                  <div class="flex items-center gap-2 text-gray-600 font-light">
+                    <MdiGraphOutline class="text-lg group-hover:text-accent" />
+                    ERD
+                  </div>
+                </a-button>
+                <a-button
+                  v-if="!record.is_meta"
+                  class="nc-action-btn cursor-pointer outline-0"
+                  @click="baseAction(record.id, DataSourcesSubTab.Edit)"
+                >
+                  <div class="flex items-center gap-2 text-gray-600 font-light">
+                    <MdiEditOutline class="text-lg group-hover:text-accent" />
+                    Edit
+                  </div>
+                </a-button>
+                <a-button v-if="!record.is_meta" class="nc-action-btn cursor-pointer outline-0" @click="deleteBase(record)">
+                  <div class="flex items-center gap-2 text-red-500 font-light">
+                    <MdiDeleteOutline class="text-lg group-hover:text-accent" />
+                    Delete
+                  </div>
+                </a-button>
               </div>
             </template>
           </a-table-column>
diff --git a/packages/nc-gui/components/dashboard/settings/Modal.vue b/packages/nc-gui/components/dashboard/settings/Modal.vue
index 1f37f5397f..61c0a175a3 100644
--- a/packages/nc-gui/components/dashboard/settings/Modal.vue
+++ b/packages/nc-gui/components/dashboard/settings/Modal.vue
@@ -252,10 +252,10 @@ watch(
               <a-breadcrumb-item v-else @click="dataSourcesState = ''">Data Sources</a-breadcrumb-item>
               <a-breadcrumb-item v-if="dataSourcesState !== ''">{{ dataSourcesState }}</a-breadcrumb-item>
             </a-breadcrumb>
-            <div v-if="dataSourcesState === ''" class="flex flex-row justify-end items-center w-full">
+            <div v-if="dataSourcesState === ''" class="flex flex-row justify-end items-center w-full gap-1">
               <a-button class="self-start nc-btn-new-datasource" @click="dataSourcesState = DataSourcesSubTab.New">
-                <div v-if="dataSourcesState === ''" class="flex items-center gap-2 text-gray-600 font-light">
-                  <MdiDatabaseOutline class="text-lg group-hover:text-accent" />
+                <div v-if="dataSourcesState === ''" class="flex items-center gap-2 text-primary font-light">
+                  <MdiDatabasePlusOutline class="text-lg group-hover:text-accent" />
                   New
                 </div>
               </a-button>