diff --git a/packages/nc-gui/components/erd/Flow.vue b/packages/nc-gui/components/erd/Flow.vue
index 8a75272030..b4d86c796e 100644
--- a/packages/nc-gui/components/erd/Flow.vue
+++ b/packages/nc-gui/components/erd/Flow.vue
@@ -65,7 +65,7 @@ onScopeDispose($destroy)
 
 <template>
   <VueFlow v-model="elements">
-    <Controls position="top-right" :show-fit-view="false" :show-interactive="false" />
+    <Controls class="rounded" position="top-right" :show-fit-view="false" :show-interactive="false" />
 
     <template #node-custom="{ data }">
       <ErdTableNode :data="data" :show-skeleton="showSkeleton" />
@@ -109,4 +109,12 @@ onScopeDispose($destroy)
 .vue-flow__edges {
   z-index: 1000 !important;
 }
+
+.vue-flow__controls-zoomin {
+  @apply rounded-t;
+}
+
+.vue-flow__controls-zoomout {
+  @apply rounded-b;
+}
 </style>
diff --git a/packages/nc-gui/components/erd/View.vue b/packages/nc-gui/components/erd/View.vue
index c8098bc6a5..3fd1c5a178 100644
--- a/packages/nc-gui/components/erd/View.vue
+++ b/packages/nc-gui/components/erd/View.vue
@@ -107,7 +107,7 @@ watch(
       <LazyErdFlow :tables="tables" :config="config" />
 
       <div
-        class="absolute top-3 right-12 flex-col bg-white py-2 px-4 border-1 border-gray-100 rounded-md z-50 space-y-1 nc-erd-context-menu z-50"
+        class="absolute top-3.5 right-12 flex-col bg-white shadow-sm px-3 py-0.75 border-1 border-gray-100 rounded z-50 space-y-1 nc-erd-context-menu z-50"
       >
         <div class="flex flex-row items-center">
           <a-checkbox