diff --git a/packages/components/src/scrollbars/styles.less b/packages/components/src/scrollbars/styles.less
index 0e1c838747..04c0663cd6 100644
--- a/packages/components/src/scrollbars/styles.less
+++ b/packages/components/src/scrollbars/styles.less
@@ -42,8 +42,8 @@
   }
 
   .scrollbar-decoration-vertical {
-    position: fixed;
-    top: 0;
+    position: absolute;
+    bottom: 0;
     left: 0;
     width: 100%;
     height: 6px;
@@ -52,7 +52,7 @@
   }
 
   .scrollbar-decoration-horizontal {
-    position: fixed;
+    position: absolute;
     top: 0;
     left: 0;
     height: 100%;
diff --git a/packages/design/src/browser/style/design.module.less b/packages/design/src/browser/style/design.module.less
index 68e8f7bbe3..6e0c0ad241 100644
--- a/packages/design/src/browser/style/design.module.less
+++ b/packages/design/src/browser/style/design.module.less
@@ -489,24 +489,10 @@
 
   .design-item_container {
     border: 0 none;
-
-    &:first-child::before {
-      display: none;
-    }
-
-    &::before {
-      content: '';
-      position: absolute;
-      left: 0;
-      top: 12px;
-      display: inline-block;
-      width: 1px;
-      height: 12px;
-      background-color: var(--kt-panelTab-border);
-    }
+    min-width: auto;
 
     .design-item_info_name {
-      min-width: 110px;
+      min-width: 70px;
       margin-right: 4px;
     }
 
@@ -548,20 +534,51 @@
     }
   }
 
-  .design-tab_item_selected,
-  .design-tab_item_selected + div {
-    &::before,
-    &::after {
-      display: none;
+  .design-tabs {
+    margin-top: 2px;
+    :global(.kt-scrollbar) {
+      > div {
+        &:first-child {
+          bottom: -1px;
+        }
+      }
+    }
+  }
+
+  .design-tab_item_selected {
+    border-radius: 12px 12px 0 0;
+    position: relative;
+    height: 34px !important;
+    &:before {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      right: auto;
+      left: -12px;
+      top: auto;
+      width: 12px;
+      height: 12px;
+      background: radial-gradient(circle at top left, transparent 70%, var(--panel-background) 72%);
+    }
+    &:after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      right: -12px;
+      left: auto;
+      top: auto;
+      width: 12px;
+      height: 12px;
+      background: radial-gradient(circle at top right, transparent 70%, var(--panel-background) 72%);
     }
   }
 
   .design-tab_contents {
-    height: 35px;
+    height: 34px;
 
     :first-child {
       &.design-item_container {
-        border-left: 1px solid var(--editorGroup-border);
+        border-left: none;
       }
     }
   }
diff --git a/packages/terminal-next/src/browser/component/tab.view.tsx b/packages/terminal-next/src/browser/component/tab.view.tsx
index 07010aa44a..40efdaeecc 100644
--- a/packages/terminal-next/src/browser/component/tab.view.tsx
+++ b/packages/terminal-next/src/browser/component/tab.view.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { Scrollbars } from '@opensumi/ide-components';
 import { KeybindingRegistry, useAutorun, useDesignStyles, useInjectable } from '@opensumi/ide-core-browser';
@@ -19,6 +19,7 @@ export default () => {
   const tabContainer = useRef<HTMLDivElement | null>();
   const [theme, setTheme] = useState<ThemeType>('dark');
   const styles_tab_contents = useDesignStyles(styles.tab_contents, 'tab_contents');
+  const styles_tabs = useDesignStyles(styles.tabs, 'tabs');
 
   const groups = useAutorun(view.groups);
   const currentGroup = useAutorun(view.currentGroup);
@@ -39,12 +40,14 @@ export default () => {
     };
   }, []);
 
+  const visibleGroups = useMemo(() => groups.filter(Boolean), [groups]);
+
   return (
     <div className={styles.view_container}>
-      <div className={styles.tabs}>
+      <div className={styles_tabs}>
         <Scrollbars forwardedRef={(el) => (el ? (tabContainer.current = el.ref) : null)}>
           <div className={styles_tab_contents}>
-            {groups.filter(Boolean).map((group, index) => (
+            {visibleGroups.map((group, index) => (
               <TabItem
                 draggable={true}
                 onDragStart={(e) => {