diff --git a/vuu-ui/packages/vuu-layout/src/layout-persistence/data.ts b/vuu-ui/packages/vuu-layout/src/layout-persistence/data.ts
index 2ce5fe03c..0aa5c40cc 100644
--- a/vuu-ui/packages/vuu-layout/src/layout-persistence/data.ts
+++ b/vuu-ui/packages/vuu-layout/src/layout-persistence/data.ts
@@ -22,10 +22,11 @@ export const defaultLayout: LayoutJSON = {
     className: "vuuShell-mainTabs",
     TabstripProps: {
       allowAddTab: true,
+      allowCloseTab: true,
       allowRenameTab: true,
       animateSelectionThumb: false,
       location: "main-tab",
-      allowCloseTab: true
+      tabClassName: "MainTab",
     },
     preserve: true,
     active: 0,
diff --git a/vuu-ui/packages/vuu-layout/src/stack/Stack.tsx b/vuu-ui/packages/vuu-layout/src/stack/Stack.tsx
index 17311240e..544928f93 100644
--- a/vuu-ui/packages/vuu-layout/src/stack/Stack.tsx
+++ b/vuu-ui/packages/vuu-layout/src/stack/Stack.tsx
@@ -47,6 +47,7 @@ const DefaultTabstripProps: Partial<TabstripProps> = {
 
 export const Stack = forwardRef(function Stack(
   {
+    TabstripProps = DefaultTabstripProps,
     active = 0,
     children,
     className: classNameProp,
@@ -62,7 +63,6 @@ export const Stack = forwardRef(function Stack(
     onTabSelectionChanged,
     showTabs = "top",
     style,
-    TabstripProps = DefaultTabstripProps,
   }: StackProps,
   ref: ForwardedRef<HTMLDivElement>
 ) {
@@ -71,6 +71,7 @@ export const Stack = forwardRef(function Stack(
     allowCloseTab,
     allowRenameTab,
     className: tabstripClassName,
+    tabClassName,
   } = TabstripProps;
 
   const handleExitEditMode = useCallback(
diff --git a/vuu-ui/packages/vuu-ui-controls/src/tabstrip/Tab.tsx b/vuu-ui/packages/vuu-ui-controls/src/tabstrip/Tab.tsx
index e0c1279c2..0eb457070 100644
--- a/vuu-ui/packages/vuu-ui-controls/src/tabstrip/Tab.tsx
+++ b/vuu-ui/packages/vuu-ui-controls/src/tabstrip/Tab.tsx
@@ -122,7 +122,7 @@ export const Tab = forwardRef(function Tab(
       {...props}
       aria-controls={ariaControls}
       aria-selected={selected}
-      className={cx(classBase, {
+      className={cx(classBase, className, {
         [`${classBase}-closeable`]: closeable,
         "vuuDraggable-dragAway": dragging,
         [`${classBase}-editing`]: editing,
diff --git a/vuu-ui/packages/vuu-ui-controls/src/tabstrip/TabsTypes.ts b/vuu-ui/packages/vuu-ui-controls/src/tabstrip/TabsTypes.ts
index c8fb3d70b..e75eee04c 100644
--- a/vuu-ui/packages/vuu-ui-controls/src/tabstrip/TabsTypes.ts
+++ b/vuu-ui/packages/vuu-ui-controls/src/tabstrip/TabsTypes.ts
@@ -111,6 +111,10 @@ export interface TabstripProps extends HTMLAttributes<HTMLDivElement> {
    * not closeable, not renameable and has no tab-location , otherwise true.
    */
   showTabMenuButton?: boolean;
+  /**
+   * An optional classname that will be added to each tab
+   */
+  tabClassName?: string;
 }
 
 export type exitEditHandler = (
diff --git a/vuu-ui/packages/vuu-ui-controls/src/tabstrip/Tabstrip.css b/vuu-ui/packages/vuu-ui-controls/src/tabstrip/Tabstrip.css
index da1b648bb..e0a111663 100644
--- a/vuu-ui/packages/vuu-ui-controls/src/tabstrip/Tabstrip.css
+++ b/vuu-ui/packages/vuu-ui-controls/src/tabstrip/Tabstrip.css
@@ -107,8 +107,10 @@
 }
 
 .vuuDraggable-tabstrip-horizontal {
+  --item-height: var(--tabstrip-height);
   --tab-thumb-height: 2px;
   --tab-thumb-left: 0px;
+  --tabstrip-display: inline-flex;
   --tabstrip-height: 28px;
   line-height: var(--tabstrip-height);
 }
diff --git a/vuu-ui/packages/vuu-ui-controls/src/tabstrip/Tabstrip.tsx b/vuu-ui/packages/vuu-ui-controls/src/tabstrip/Tabstrip.tsx
index b27872665..bf7ee27c1 100644
--- a/vuu-ui/packages/vuu-ui-controls/src/tabstrip/Tabstrip.tsx
+++ b/vuu-ui/packages/vuu-ui-controls/src/tabstrip/Tabstrip.tsx
@@ -29,6 +29,7 @@ export const Tabstrip = ({
   orientation = "horizontal",
   showTabMenuButton,
   style: styleProp,
+  tabClassName,
   ...htmlAttributes
 }: TabstripProps) => {
   const rootRef = useRef<HTMLDivElement>(null);
@@ -53,7 +54,6 @@ export const Tabstrip = ({
     onMoveTab,
     orientation,
   });
-
   const id = useId(idProp);
   const className = cx(classBase, `${classBase}-${orientation}`, classNameProp);
   const style =
@@ -70,6 +70,7 @@ export const Tabstrip = ({
         .map((child, index) => {
           const {
             id: tabId = `${id}-tab-${index}`,
+            className,
             closeable = allowCloseTab,
             editable = allowRenameTab,
             location: tabLocation,
@@ -79,6 +80,7 @@ export const Tabstrip = ({
           return React.cloneElement(child, {
             ...tabProps,
             ...tabstripHook.navigationProps,
+            className: cx(className, tabClassName),
             closeable,
             "data-overflow-priority": selected ? "1" : undefined,
             dragging: draggedItemIndex === index,
@@ -111,19 +113,20 @@ export const Tabstrip = ({
           )
         ),
     [
-      activeTabIndex,
+      children,
       allowAddTab,
+      tabstripHook.navigationProps,
+      onClickAddTab,
+      id,
       allowCloseTab,
       allowRenameTab,
-      children,
-      focusVisible,
-      id,
-      location,
-      onClickAddTab,
       showTabMenuButton,
+      activeTabIndex,
       tabProps,
+      tabClassName,
       draggedItemIndex,
-      tabstripHook.navigationProps,
+      focusVisible,
+      location,
     ]
   );
 
diff --git a/vuu-ui/sample-apps/app-vuu-basket-trader/src/App.css b/vuu-ui/sample-apps/app-vuu-basket-trader/src/App.css
index 13aab8988..927ef41f1 100644
--- a/vuu-ui/sample-apps/app-vuu-basket-trader/src/App.css
+++ b/vuu-ui/sample-apps/app-vuu-basket-trader/src/App.css
@@ -111,8 +111,8 @@ body {
     z-index: 1;
   }
 
-  .vuuShell-mainTabs > .vuuTabstrip .vuuTab {
-    background-color: var(--vuu-color-gray-28);
+  .MainTab {
+    background-color: #F1F2F4;
     border-color: #D6D7DA;
     border-radius: 6px 6px 0 0;
     border-width: 1px;
@@ -120,13 +120,14 @@ body {
     position: relative;
   }
 
-  .vuuShell-mainTabs > .vuuTabstrip .vuuTab-selected {
+  .MainTab.vuuTab-selected {
     background-color: white;
     border-bottom-color: white;
     z-index: 1;
+
   }
 
-  .vuuShell-mainTabs > .vuuTabstrip .vuuTab-selected:before{
+  .MainTab.vuuTab-selected:before{
     background-color: #6d188b;;
     content: '';
     position: absolute;
@@ -137,7 +138,7 @@ body {
     width: 6px;
   }
 
-  .vuuShell-mainTabs > .vuuTabstrip .vuuTab:hover:not(.vuuTab-selected):before{
+  .MainTab.vuuTab:hover:not(.vuuTab-selected):before{
     background-color: #F37880;
     content: '';
     position: absolute;
@@ -148,7 +149,7 @@ body {
     width: 6px;
   }
 
-  .vuuShell-mainTabs > .vuuTabstrip .vuuTab-main {
+  .MainTab .vuuTab-main {
     background-color: transparent;
     font-weight: 700;
     height: 29px;
diff --git a/vuu-ui/sample-apps/app-vuu-basket-trader/src/defaultLayout.ts b/vuu-ui/sample-apps/app-vuu-basket-trader/src/defaultLayout.ts
deleted file mode 100644
index cea78c925..000000000
--- a/vuu-ui/sample-apps/app-vuu-basket-trader/src/defaultLayout.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { LayoutJSON } from "@finos/vuu-layout";
-
-export const defaultLayout: LayoutJSON = {
-  id: "main-tabs",
-  type: "Stack",
-  props: {
-    className: "vuuShell-mainTabs",
-    TabstripProps: {
-      allowAddTab: true,
-      allowRenameTab: true,
-      animateSelectionThumb: false,
-      className: "vuuShellMainTabstrip",
-      location: "main-tab",
-    },
-    preserve: true,
-    active: 0,
-  },
-  children: [
-    {
-      type: "Placeholder",
-      title: "Page 1",
-    },
-  ],
-};
diff --git a/vuu-ui/showcase/src/examples/Apps/NewTheme.examples.css b/vuu-ui/showcase/src/examples/Apps/NewTheme.examples.css
index 18e238303..862b1bd4f 100644
--- a/vuu-ui/showcase/src/examples/Apps/NewTheme.examples.css
+++ b/vuu-ui/showcase/src/examples/Apps/NewTheme.examples.css
@@ -51,7 +51,7 @@ body {
 
   }
 
-  .vuuShell-mainTabs > .vuuTabstrip .vuuTab {
+  .MainTab {
     background-color: #F1F2F4;
     border-color: #D6D7DA;
     border-radius: 6px 6px 0 0;
@@ -60,14 +60,14 @@ body {
     position: relative;
   }
 
-  .vuuShell-mainTabs > .vuuTabstrip .vuuTab-selected {
+  .MainTab.vuuTab-selected {
     background-color: white;
     border-bottom-color: white;
     z-index: 1;
 
   }
 
-  .vuuShell-mainTabs > .vuuTabstrip .vuuTab-selected:before{
+  .MainTab.vuuTab-selected:before{
     background-color: #6d188b;;
     content: '';
     position: absolute;
@@ -78,7 +78,7 @@ body {
     width: 6px;
   }
 
-  .vuuShell-mainTabs > .vuuTabstrip .vuuTab:hover:not(.vuuTab-selected):before{
+  .MainTab.vuuTab:hover:not(.vuuTab-selected):before{
     background-color: #F37880;
     content: '';
     position: absolute;
@@ -89,7 +89,7 @@ body {
     width: 6px;
   }
 
-  .vuuShell-mainTabs > .vuuTabstrip .vuuTab-main {
+  .MainTab .vuuTab-main {
     background-color: transparent;
     font-weight: 700;
     height: 29px;