diff --git a/src/lib/components/TabsContainer.svelte b/src/lib/components/TabsContainer.svelte
index 067fa7b..8a17bcd 100644
--- a/src/lib/components/TabsContainer.svelte
+++ b/src/lib/components/TabsContainer.svelte
@@ -111,7 +111,7 @@
                 {/if}
             </Block>
         {:else}
-            <Tabs>
+            <Tabs elem_classes={["gradio-tabs"]}>
                 {#each children.filter(item => item.id !== SHADOW_PLACEHOLDER_ITEM_ID) as item, i(item.id)}
                     {@const tabName = getTabName(container, i)}
                     <TabItem name={tabName} on:select={() => console.log("tab " + i)}>
diff --git a/src/scss/ux.scss b/src/scss/ux.scss
index b5943b4..d460f50 100644
--- a/src/scss/ux.scss
+++ b/src/scss/ux.scss
@@ -332,6 +332,27 @@ div.float {
     opacity: 0 !important;
 }
 
+.gradio-tabs.tabs {
+    > .tab-nav {
+        border-bottom: 1px solid var(--ae-subpanel-border-color);
+        > button {
+            border-radius: 0;
+            border-width: var(--ae-border-width);
+            color: var(--ae-text-color);
+
+            &.selected {
+                border-color: var(--ae-subpanel-border-color);
+                background: var(--ae-subpanel-bg-color);
+                color: var(--ae-primary-color);
+            }
+        }
+    }
+    > .tabitem {
+        border: 1px solid var(--ae-subpanel-border-color);
+        border-top: none;
+        border-radius: 0px !important;
+    }
+}
 
 .form>.gradio-row>.form{
 	border:0 !important;