diff --git a/src/styles/lib.scss b/src/styles/lib.scss
index 34083a5b..1d2a5084 100644
--- a/src/styles/lib.scss
+++ b/src/styles/lib.scss
@@ -171,3 +171,21 @@
     color: #ddd;
   }
 }
+
+.scroll_bar_style::-webkit-scrollbar {
+  width: 9px;
+  height: 4px;
+  background-color: #eee;
+}
+
+.scroll_bar_style::-webkit-scrollbar-track {
+  background-color: #eee;
+  border-radius: 3px;
+  box-shadow: inset 0 0 6px #ccc;
+}
+
+.scroll_bar_style::-webkit-scrollbar-thumb {
+  border-radius: 3px;
+  box-shadow: inset 0 0 6px #ccc;
+  background-color: #aaa;
+}
diff --git a/src/views/dashboard/controls/Tab.vue b/src/views/dashboard/controls/Tab.vue
index 3ce22394..5c2e0f50 100644
--- a/src/views/dashboard/controls/Tab.vue
+++ b/src/views/dashboard/controls/Tab.vue
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="flex-h tab-header">
-    <div class="tabs">
+    <div class="tabs scroll_bar_style">
       <span
         v-for="(child, idx) in data.children || []"
         :key="idx"
@@ -259,6 +259,10 @@ export default defineComponent({
 .tabs {
   height: 40px;
   color: #ccc;
+  width: 100%;
+  overflow-x: auto;
+  white-space: nowrap;
+  overflow-y: hidden;
 
   span {
     display: inline-block;