diff --git a/workspaces/theme/.changeset/moody-camels-design.md b/workspaces/theme/.changeset/moody-camels-design.md
new file mode 100644
index 000000000..f8658a571
--- /dev/null
+++ b/workspaces/theme/.changeset/moody-camels-design.md
@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-theme': patch
+---
+
+remove bottom border and vertical padding from vertical tabs
diff --git a/workspaces/theme/plugins/mui4-test/src/components/TabExamples.tsx b/workspaces/theme/plugins/mui4-test/src/components/TabExamples.tsx
index b3b1f471e..152e35c3f 100644
--- a/workspaces/theme/plugins/mui4-test/src/components/TabExamples.tsx
+++ b/workspaces/theme/plugins/mui4-test/src/components/TabExamples.tsx
@@ -32,14 +32,15 @@ export const TabExamples = () => {
   return (
     <div>
       {colors.map(color => (
-        <div key={color} style={{ padding: '20px 0' }}>
+        <div key={color}>
+          <div style={{ padding: '20px 0' }}>color: {color ?? 'undefined'}</div>
           <Tabs
             value={selectedTab}
             indicatorColor="primary"
             textColor="primary"
             onChange={handleChange}
           >
-            <Tab label={`color: ${color}`} />
+            <Tab label="One" />
             <Tab label="Two" />
             <Tab label="Three" />
             <Tab label="Disabled" disabled />
@@ -47,6 +48,7 @@ export const TabExamples = () => {
         </div>
       ))}
 
+      <div style={{ padding: '20px 0' }}>Vertical test</div>
       <Tabs
         orientation="vertical"
         value={selectedTab}
@@ -55,7 +57,7 @@ export const TabExamples = () => {
         onChange={handleChange}
         aria-label="disabled tabs example"
       >
-        <Tab label="Vertical test" />
+        <Tab label="One" />
         <Tab label="Two" />
         <Tab label="Three" />
         <Tab label="Disabled" disabled />
diff --git a/workspaces/theme/plugins/mui5-test/src/components/TabExamples.tsx b/workspaces/theme/plugins/mui5-test/src/components/TabExamples.tsx
index 3351c38ab..54ff31f2d 100644
--- a/workspaces/theme/plugins/mui5-test/src/components/TabExamples.tsx
+++ b/workspaces/theme/plugins/mui5-test/src/components/TabExamples.tsx
@@ -32,7 +32,8 @@ export const TabExamples = () => {
   return (
     <div>
       {colors.map(color => (
-        <div key={color} style={{ padding: '20px 0' }}>
+        <div key={color}>
+          <div style={{ padding: '20px 0' }}>color: {color ?? 'undefined'}</div>
           <Tabs
             value={selectedTab}
             indicatorColor="primary"
@@ -47,6 +48,7 @@ export const TabExamples = () => {
         </div>
       ))}
 
+      <div style={{ padding: '20px 0' }}>Vertical test</div>
       <Tabs
         orientation="vertical"
         value={selectedTab}
@@ -55,7 +57,7 @@ export const TabExamples = () => {
         onChange={handleChange}
         aria-label="disabled tabs example"
       >
-        <Tab label="Vertical test" />
+        <Tab label="One" />
         <Tab label="Two" />
         <Tab label="Three" />
         <Tab label="Disabled" disabled />
diff --git a/workspaces/theme/plugins/theme/src/utils/createComponents.ts b/workspaces/theme/plugins/theme/src/utils/createComponents.ts
index 78ce640aa..96e12257b 100644
--- a/workspaces/theme/plugins/theme/src/utils/createComponents.ts
+++ b/workspaces/theme/plugins/theme/src/utils/createComponents.ts
@@ -423,6 +423,10 @@ export const createComponents = (themeConfig: ThemeConfig): Components => {
           borderBottom: `1px solid ${general.tabsBottomBorderColor}`,
           padding: '0 1.5rem',
         },
+        vertical: {
+          borderBottom: `none`,
+          padding: 0,
+        },
         flexContainerVertical: {
           '& > button:hover': {
             boxShadow: `-3px 0 ${general.tabsBottomBorderColor} inset`,