diff --git a/.changeset/dirty-mails-kick.md b/.changeset/dirty-mails-kick.md
new file mode 100644
index 0000000000..5fe5bfaff7
--- /dev/null
+++ b/.changeset/dirty-mails-kick.md
@@ -0,0 +1,6 @@
+---
+"@twilio-paste/in-page-navigation": patch
+"@twilio-paste/core": patch
+---
+
+[In Page Navigation]: Fix underline bug caused due to pixel rounding
diff --git a/.changeset/lucky-fireants-complain.md b/.changeset/lucky-fireants-complain.md
new file mode 100644
index 0000000000..273b45b1ef
--- /dev/null
+++ b/.changeset/lucky-fireants-complain.md
@@ -0,0 +1,6 @@
+---
+"@twilio-paste/design-tokens": minor
+"@twilio-paste/core": minor
+---
+
+[Tokens]: Add new tokens related to box shadow of Tabs component
diff --git a/.changeset/tender-bugs-itch.md b/.changeset/tender-bugs-itch.md
new file mode 100644
index 0000000000..3026c13b2e
--- /dev/null
+++ b/.changeset/tender-bugs-itch.md
@@ -0,0 +1,6 @@
+---
+"@twilio-paste/code-block": patch
+"@twilio-paste/core": patch
+---
+
+[Code Block]: Fix underline bug caused due to pixel rounding
diff --git a/.changeset/tricky-jeans-collect.md b/.changeset/tricky-jeans-collect.md
new file mode 100644
index 0000000000..374b81ca25
--- /dev/null
+++ b/.changeset/tricky-jeans-collect.md
@@ -0,0 +1,6 @@
+---
+"@twilio-paste/tabs": patch
+"@twilio-paste/core": patch
+---
+
+[Tabs]: Fix underline bug caused due to pixel rounding
diff --git a/packages/paste-core/components/code-block/src/OverflowButton.tsx b/packages/paste-core/components/code-block/src/OverflowButton.tsx
index 099b298551..f49bb9961a 100644
--- a/packages/paste-core/components/code-block/src/OverflowButton.tsx
+++ b/packages/paste-core/components/code-block/src/OverflowButton.tsx
@@ -1,6 +1,7 @@
 import { Box, BoxProps, BoxStyleProps } from "@twilio-paste/box";
 import { ChevronLeftIcon } from "@twilio-paste/icons/esm/ChevronLeftIcon";
 import { ChevronRightIcon } from "@twilio-paste/icons/esm/ChevronRightIcon";
+import { BoxShadow } from "@twilio-paste/style-props";
 import { useTheme } from "@twilio-paste/theme";
 import React from "react";
 
@@ -31,6 +32,14 @@ export const OverflowButton: React.FC<OverflowButtonProps> = ({
   const Chevron = position === "left" ? ChevronLeftIcon : ChevronRightIcon;
   if (!visible && position === "right") return null;
 
+  const determineShadow = (): BoxShadow | undefined => {
+    if (visible && showShadow) {
+      if (position === "left") return theme.shadows.shadowLeftInverse;
+      return theme.shadows.shadowRightInverse;
+    }
+    return undefined;
+  };
+
   return (
     <Box
       onClick={onClick}
@@ -41,9 +50,10 @@ export const OverflowButton: React.FC<OverflowButtonProps> = ({
       width="sizeIcon40"
       padding="space20"
       position="relative"
-      boxShadow={visible && showShadow ? theme.shadows.shadowScrollInverse : undefined}
+      boxShadow={determineShadow()}
       element={`${element}_OVERFLOW_BUTTON_${position.toUpperCase()}`}
       cursor={visible ? "pointer" : "none"}
+      zIndex="zIndex10"
       {...Styles}
     >
       {/* For left button to align with spacing of header we hide icon */}
diff --git a/packages/paste-core/components/in-page-navigation/src/OverflowButton.tsx b/packages/paste-core/components/in-page-navigation/src/OverflowButton.tsx
index f68cf5155b..f8be8a8909 100644
--- a/packages/paste-core/components/in-page-navigation/src/OverflowButton.tsx
+++ b/packages/paste-core/components/in-page-navigation/src/OverflowButton.tsx
@@ -46,7 +46,8 @@ export const OverflowButton: React.FC<OverflowButtonProps> = ({
 
   const determineShadow = (): BoxShadow | undefined => {
     if (showShadow) {
-      return isInverse ? theme.shadows.shadowScrollInverse : theme.shadows.shadowScroll;
+      if (position === "left") return isInverse ? theme.shadows.shadowLeftInverse : theme.shadows.shadowLeft;
+      return isInverse ? theme.shadows.shadowRightInverse : theme.shadows.shadowRight;
     }
     return undefined;
   };
@@ -62,6 +63,7 @@ export const OverflowButton: React.FC<OverflowButtonProps> = ({
       padding="space20"
       boxShadow={determineShadow()}
       element={`${element}_OVERFLOW_BUTTON_${position.toUpperCase()}`}
+      zIndex="zIndex10"
       {...(isInverse ? InverseStyles : Styles)}
     >
       <Chevron decorative={true} />
diff --git a/packages/paste-core/components/tabs/src/OverflowButton.tsx b/packages/paste-core/components/tabs/src/OverflowButton.tsx
index 8207818047..f9d27271f2 100644
--- a/packages/paste-core/components/tabs/src/OverflowButton.tsx
+++ b/packages/paste-core/components/tabs/src/OverflowButton.tsx
@@ -47,7 +47,8 @@ export const OverflowButton: React.FC<OverflowButtonProps> = ({
 
   const determineShadow = (): BoxShadow | undefined => {
     if (showShadow) {
-      return isInverse ? theme.shadows.shadowScrollInverse : theme.shadows.shadowScroll;
+      if (position === "left") return isInverse ? theme.shadows.shadowLeftInverse : theme.shadows.shadowLeft;
+      return isInverse ? theme.shadows.shadowRightInverse : theme.shadows.shadowRight;
     }
     return undefined;
   };
@@ -63,6 +64,7 @@ export const OverflowButton: React.FC<OverflowButtonProps> = ({
       padding="space20"
       boxShadow={determineShadow()}
       element={`${element}_OVERFLOW_BUTTON_${position.toUpperCase()}`}
+      zIndex="zIndex10"
       {...(isInverse ? InverseStyles : Styles)}
     >
       <Chevron decorative={true} />
diff --git a/packages/paste-core/components/tabs/src/Tab.tsx b/packages/paste-core/components/tabs/src/Tab.tsx
index d7d2fd40bf..cc7b022444 100644
--- a/packages/paste-core/components/tabs/src/Tab.tsx
+++ b/packages/paste-core/components/tabs/src/Tab.tsx
@@ -126,6 +126,7 @@ const getTabBoxStyles = (orientation: Orientation, variant: Variants): BoxStyleP
           borderBottomColor: isInverse ? "colorBorderInverseWeakest" : "colorBorderWeakest",
           color: isInverse ? "colorTextInverse" : "colorTextPrimary",
           boxShadow: isInverse ? "shadowBorderTopInverseStrongest" : "shadowBorderTopPrimary",
+          backgroundColor: isInverse ? "colorBackgroundInverse" : "colorBackgroundBody",
         },
         /* Disabled state */
         _disabled: {
@@ -139,7 +140,7 @@ const getTabBoxStyles = (orientation: Orientation, variant: Variants): BoxStyleP
         },
         _selected_hover: {
           color: isInverse ? "colorTextInverse" : "colorTextPrimaryStronger",
-          borderBottomColor: isInverse ? "colorBorderInverseWeakest" : "colorBorderWeakest",
+          borderBottomColor: "transparent",
           boxShadow: isInverse ? "shadowBorderTopPrimary" : "shadowBorderTopPrimaryStrongest",
         },
         /* Focus states */
@@ -159,6 +160,7 @@ const getTabBoxStyles = (orientation: Orientation, variant: Variants): BoxStyleP
           borderColor: isInverse ? "colorBorderInverseWeaker" : "colorBorderWeak",
           boxShadow: "none",
           borderBottom: "none",
+          overflow: "clip",
         },
       };
   }
diff --git a/packages/paste-core/components/tabs/src/TabList.tsx b/packages/paste-core/components/tabs/src/TabList.tsx
index 3705c7bcee..1855c9568c 100644
--- a/packages/paste-core/components/tabs/src/TabList.tsx
+++ b/packages/paste-core/components/tabs/src/TabList.tsx
@@ -107,17 +107,25 @@ const HorizontalTabList: React.FC<React.PropsWithChildren<{ variant?: Variants;
       <Box as={StyledTabList as any} ref={scrollableRef} flexGrow={1} element={`${element}_SCROLL_WRAPPER`}>
         <Box
           ref={ref}
+          position="relative"
           whiteSpace="nowrap"
           element={element}
           display="flex"
-          borderBottomStyle="solid"
-          borderBottomWidth="borderWidth10"
           columnGap="space20"
-          borderBottomColor={isInverse ? "colorBorderInverseWeaker" : "colorBorderWeak"}
+          // @ts-expect-error 1px is not available in tokens
+          paddingTop="1px"
+          boxShadow={isInverse ? "shadowBorderBottomInverseWeakerInset" : "shadowBorderBottomWeakInset"}
           // Scrollable element needs borderto stretch to full contianer width. Non scrollable needs to stretch border to parent width.
           width={elementOutOBoundsRight || elementOutOBoundsLeft ? "max-content" : "auto"}
         >
           {children}
+          <Box
+            position="absolute"
+            width="100%"
+            height="1px"
+            backgroundColor={isInverse ? "colorBackgroundInverse" : "colorBackgroundBody"}
+            bottom="-1px"
+          />
         </Box>
       </Box>
       <OverflowButton
diff --git a/packages/paste-core/primitives/box/type-docs.json b/packages/paste-core/primitives/box/type-docs.json
index 4481f4a98c..5b226c8434 100644
--- a/packages/paste-core/primitives/box/type-docs.json
+++ b/packages/paste-core/primitives/box/type-docs.json
@@ -958,7 +958,7 @@
       "description": "Responsive prop for the CSS `bottom` property"
     },
     "boxShadow": {
-      "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 69 more ... | { ...; }",
+      "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 73 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,
diff --git a/packages/paste-core/primitives/sibling-box/type-docs.json b/packages/paste-core/primitives/sibling-box/type-docs.json
index 4b35c271ed..8bd752b30e 100644
--- a/packages/paste-core/primitives/sibling-box/type-docs.json
+++ b/packages/paste-core/primitives/sibling-box/type-docs.json
@@ -1060,7 +1060,7 @@
       "description": "Responsive prop for the CSS `bottom` property"
     },
     "boxShadow": {
-      "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 69 more ... | { ...; }",
+      "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 73 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,
diff --git a/packages/paste-core/primitives/text/type-docs.json b/packages/paste-core/primitives/text/type-docs.json
index 9b7b893b6f..da7cf17cc7 100644
--- a/packages/paste-core/primitives/text/type-docs.json
+++ b/packages/paste-core/primitives/text/type-docs.json
@@ -531,7 +531,7 @@
       "description": "Responsive prop for the CSS `bottom` property"
     },
     "boxShadow": {
-      "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 69 more ... | { ...; }",
+      "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 73 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,
diff --git a/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap b/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap
index 4c040d7a3b..92dbb2c078 100644
--- a/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap
@@ -131,6 +131,7 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"border-width-40\\": \\"8px\\",
   \\"shadow-border-bottom-new-weaker\\": \\"0 1px 0 #5817bd\\",
   \\"shadow\\": \\"0 4px 16px 0 rgba(0, 0, 0, 0.5)\\",
+  \\"shadow-border-bottom-inverse-weaker-inset\\": \\"inset 0 -1px 0 0 #394762\\",
   \\"shadow-border-subaccount\\": \\"0 0 0 1px #c28e00\\",
   \\"shadow-border-destructive-stronger\\": \\"0 0 0 1px #fccfcf\\",
   \\"shadow-border-success-weaker\\": \\"0 0 0 1px #0e7c3a\\",
@@ -151,18 +152,22 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"shadow-border-primary\\": \\"0 0 0 1px #0263e0\\",
   \\"shadow-border-destructive\\": \\"0 0 0 1px #d61f1f\\",
   \\"shadow-high\\": \\"0 16px 24px 4px rgba(0, 0, 0, 0.5)\\",
+  \\"shadow-right\\": \\"-4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
   \\"shadow-border-error-strong\\": \\"0 0 0 1px #f6b1b1\\",
   \\"shadow-border-primary-strongest\\": \\"0 0 0 1px #ebf4ff\\",
   \\"shadow-border-destructive-strongest\\": \\"0 0 0 1px #feecec\\",
   \\"shadow-border-error-weak\\": \\"0 0 0 1px #ad1111\\",
   \\"shadow-border-bottom-brand-10-strong\\": \\"0 1px 0 #855c15\\",
   \\"shadow-border-bottom-brand-20-strong\\": \\"0 1px 0 #043cb5\\",
+  \\"shadow-right-inverse\\": \\"-4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
   \\"shadow-border-bottom-brand-30-strong\\": \\"0 1px 0 #0e7c3a\\",
+  \\"shadow-left\\": \\"4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
   \\"shadow-border-error\\": \\"0 0 0 1px #d61f1f\\",
   \\"shadow-border-bottom-decorative-10-weaker\\": \\"0 1px 0 #1f304c\\",
   \\"shadow-border-bottom-primary\\": \\"0 1px 0 #006dfa\\",
   \\"shadow-border-bottom-decorative-20-weaker\\": \\"0 1px 0 #001489\\",
   \\"shadow-border-inverse-stronger\\": \\"0 0 0 1px #f4f4f6\\",
+  \\"shadow-border-bottom-weak-inset\\": \\"inset 0 -1px 0 0 #394762\\",
   \\"shadow-border-error-strongest\\": \\"0 0 0 1px #feecec\\",
   \\"shadow-border-destructive-strong\\": \\"0 0 0 1px #f6b1b1\\",
   \\"shadow-border-inverse-weaker\\": \\"0 0 0 1px #394762\\",
@@ -174,6 +179,7 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"shadow-focus-shadow-border\\": \\"0 0 0 4px #606b85, 0 0 0 1px #606b85\\",
   \\"shadow-border-bottom-decorative-40-weaker\\": \\"0 1px 0 #5817bd\\",
   \\"shadow-border-destructive-weak\\": \\"0 0 0 1px #394762\\",
+  \\"shadow-left-inverse\\": \\"4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
   \\"shadow-border-brand-20\\": \\"sky\\",
   \\"shadow-border-top-primary-strongest\\": \\"0 -1px 0 #ebf4ff\\",
   \\"shadow-border-bottom-notification-stronger\\": \\"0 1px 0 #4a0b0b\\",
@@ -183,14 +189,12 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"shadow-border-right-inverse-strong\\": \\"1px 0 #e1e3ea\\",
   \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #001489\\",
   \\"shadow-border-brand-10\\": \\"saffron\\",
-  \\"shadow-scroll\\": \\"0 4px 4px 0 rgba(18, 28, 45, 0.2)\\",
   \\"shadow-border-decorative-10-weaker\\": \\"0 0 0 1px #1f304c\\",
   \\"shadow-border-decorative-20-weaker\\": \\"0 0 0 1px #043cb5\\",
   \\"shadow-border-bottom-subaccount\\": \\"0 1px 0 #c28e00\\",
   \\"shadow-focus-inset\\": \\"inset 0 0 0 2px #606b85\\",
   \\"shadow-border-inverse\\": \\"0 0 0 1px #8891aa\\",
   \\"shadow-border-decorative-30-weaker\\": \\"0 0 0 1px #0e7c3a\\",
-  \\"shadow-scroll-inverse\\": \\"0 12px 12px 0 #121c2d\\",
   \\"shadow-border-inverse-weakest\\": \\"0 0 0 1px #1f304c\\",
   \\"shadow-border-bottom-inverse-new-weaker\\": \\"0 1px 0 #5817bd\\",
   \\"shadow-border-bottom-success-weaker\\": \\"0 1px 0 #0d3a1f\\",
@@ -578,6 +582,7 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"border-width-40\\": \\"8px\\",
   \\"shadow-border-bottom-new-weaker\\": \\"0 1px 0 #e7dcfa\\",
   \\"shadow\\": \\"0 4px 16px 0 rgba(18, 28, 45, 0.2)\\",
+  \\"shadow-border-bottom-inverse-weaker-inset\\": \\"inset 0 -1px 0 0 #394762\\",
   \\"shadow-border-subaccount\\": \\"0 0 0 1px #fff1b3\\",
   \\"shadow-border-destructive-stronger\\": \\"0 0 0 1px #4a0b0b\\",
   \\"shadow-border-success-weaker\\": \\"0 0 0 1px #d1fae0\\",
@@ -598,18 +603,22 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"shadow-border-primary\\": \\"0 0 0 1px #0263e0\\",
   \\"shadow-border-destructive\\": \\"0 0 0 1px #d61f1f\\",
   \\"shadow-high\\": \\"0 16px 24px 0 rgba(18, 28, 45, 0.2)\\",
+  \\"shadow-right\\": \\"-4px 0 8px -4px rgba(18, 28, 45, 0.2)\\",
   \\"shadow-border-error-strong\\": \\"0 0 0 1px #750c0c\\",
   \\"shadow-border-primary-strongest\\": \\"0 0 0 1px #06033a\\",
   \\"shadow-border-destructive-strongest\\": \\"0 0 0 1px #310c0c\\",
   \\"shadow-border-error-weak\\": \\"0 0 0 1px #eb5656\\",
   \\"shadow-border-bottom-brand-10-strong\\": \\"0 1px 0 #855c15\\",
   \\"shadow-border-bottom-brand-20-strong\\": \\"0 1px 0 #043cb5\\",
+  \\"shadow-right-inverse\\": \\"-4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
   \\"shadow-border-bottom-brand-30-strong\\": \\"0 1px 0 #0e7c3a\\",
+  \\"shadow-left\\": \\"4px 0 8px -4px rgba(18, 28, 45, 0.2)\\",
   \\"shadow-border-error\\": \\"0 0 0 1px #d61f1f\\",
   \\"shadow-border-bottom-decorative-10-weaker\\": \\"0 1px 0 #e1e3ea\\",
   \\"shadow-border-bottom-primary\\": \\"0 1px 0 #006dfa\\",
   \\"shadow-border-bottom-decorative-20-weaker\\": \\"0 1px 0 #cce4ff\\",
   \\"shadow-border-inverse-stronger\\": \\"0 0 0 1px #f4f4f6\\",
+  \\"shadow-border-bottom-weak-inset\\": \\"inset 0 -1px 0 0 #cacdd8\\",
   \\"shadow-border-error-strongest\\": \\"0 0 0 1px #310c0c\\",
   \\"shadow-border-destructive-strong\\": \\"0 0 0 1px #750c0c\\",
   \\"shadow-border-inverse-weaker\\": \\"0 0 0 1px #394762\\",
@@ -621,6 +630,7 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"shadow-focus-shadow-border\\": \\"0 0 0 4px rgba(2, 99, 224, 0.7), 0 0 0 1px #8891aa\\",
   \\"shadow-border-bottom-decorative-40-weaker\\": \\"0 1px 0 #e7dcfa\\",
   \\"shadow-border-destructive-weak\\": \\"0 0 0 1px #f6b1b1\\",
+  \\"shadow-left-inverse\\": \\"4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
   \\"shadow-border-brand-20\\": \\"sky\\",
   \\"shadow-border-top-primary-strongest\\": \\"0 -1px 0 #030b5d\\",
   \\"shadow-border-bottom-notification-stronger\\": \\"0 1px 0 #4a0b0b\\",
@@ -630,14 +640,12 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"shadow-border-right-inverse-strong\\": \\"1px 0 #e1e3ea\\",
   \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #cce4ff\\",
   \\"shadow-border-brand-10\\": \\"saffron\\",
-  \\"shadow-scroll\\": \\"0 4px 4px 0 rgba(18, 28, 45, 0.2)\\",
   \\"shadow-border-decorative-10-weaker\\": \\"0 0 0 1px #e1e3ea\\",
   \\"shadow-border-decorative-20-weaker\\": \\"0 0 0 1px #cce4ff\\",
   \\"shadow-border-bottom-subaccount\\": \\"0 1px 0 #ffdd35\\",
   \\"shadow-focus-inset\\": \\"inset 0 0 0 2px rgba(2, 99, 224, 0.7)\\",
   \\"shadow-border-inverse\\": \\"0 0 0 1px #8891aa\\",
   \\"shadow-border-decorative-30-weaker\\": \\"0 0 0 1px #d1fae0\\",
-  \\"shadow-scroll-inverse\\": \\"0 12px 12px 0 #121c2d\\",
   \\"shadow-border-inverse-weakest\\": \\"0 0 0 1px #1f304c\\",
   \\"shadow-border-bottom-inverse-new-weaker\\": \\"0 1px 0 #5817bd\\",
   \\"shadow-border-bottom-success-weaker\\": \\"0 1px 0 #d1fae0\\",
@@ -1025,6 +1033,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"border-width-40\\": \\"8px\\",
   \\"shadow-border-bottom-new-weaker\\": \\"0 1px 0 #e7dcfa\\",
   \\"shadow\\": \\"0 4px 16px 0 rgba(18, 28, 45, 0.2)\\",
+  \\"shadow-border-bottom-inverse-weaker-inset\\": \\"inset 0 -1px 0 0 #394762\\",
   \\"shadow-border-subaccount\\": \\"0 0 0 1px #fff1b3\\",
   \\"shadow-border-destructive-stronger\\": \\"0 0 0 1px #4a0b0b\\",
   \\"shadow-border-success-weaker\\": \\"0 0 0 1px #d1fae0\\",
@@ -1045,18 +1054,22 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"shadow-border-primary\\": \\"0 0 0 1px #0263e0\\",
   \\"shadow-border-destructive\\": \\"0 0 0 1px #d61f1f\\",
   \\"shadow-high\\": \\"0 16px 24px 0 rgba(18, 28, 45, 0.2)\\",
+  \\"shadow-right\\": \\"-4px 0 8px -4px rgba(18, 28, 45, 0.2)\\",
   \\"shadow-border-error-strong\\": \\"0 0 0 1px #750c0c\\",
   \\"shadow-border-primary-strongest\\": \\"0 0 0 1px #06033a\\",
   \\"shadow-border-destructive-strongest\\": \\"0 0 0 1px #310c0c\\",
   \\"shadow-border-error-weak\\": \\"0 0 0 1px #eb5656\\",
   \\"shadow-border-bottom-brand-10-strong\\": \\"0 1px 0 #855c15\\",
   \\"shadow-border-bottom-brand-20-strong\\": \\"0 1px 0 #043cb5\\",
+  \\"shadow-right-inverse\\": \\"-4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
   \\"shadow-border-bottom-brand-30-strong\\": \\"0 1px 0 #0e7c3a\\",
+  \\"shadow-left\\": \\"4px 0 8px -4px rgba(18, 28, 45, 0.2)\\",
   \\"shadow-border-error\\": \\"0 0 0 1px #d61f1f\\",
   \\"shadow-border-bottom-decorative-10-weaker\\": \\"0 1px 0 #e1e3ea\\",
   \\"shadow-border-bottom-primary\\": \\"0 1px 0 #006dfa\\",
   \\"shadow-border-bottom-decorative-20-weaker\\": \\"0 1px 0 #cce4ff\\",
   \\"shadow-border-inverse-stronger\\": \\"0 0 0 1px #f4f4f6\\",
+  \\"shadow-border-bottom-weak-inset\\": \\"inset 0 -1px 0 0 #cacdd8\\",
   \\"shadow-border-error-strongest\\": \\"0 0 0 1px #310c0c\\",
   \\"shadow-border-destructive-strong\\": \\"0 0 0 1px #750c0c\\",
   \\"shadow-border-inverse-weaker\\": \\"0 0 0 1px #394762\\",
@@ -1068,6 +1081,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"shadow-focus-shadow-border\\": \\"0 0 0 4px rgba(2, 99, 224, 0.7), 0 0 0 1px #8891aa\\",
   \\"shadow-border-bottom-decorative-40-weaker\\": \\"0 1px 0 #e7dcfa\\",
   \\"shadow-border-destructive-weak\\": \\"0 0 0 1px #f6b1b1\\",
+  \\"shadow-left-inverse\\": \\"4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
   \\"shadow-border-brand-20\\": \\"sky\\",
   \\"shadow-border-top-primary-strongest\\": \\"0 -1px 0 #030b5d\\",
   \\"shadow-border-bottom-notification-stronger\\": \\"0 1px 0 #4a0b0b\\",
@@ -1077,14 +1091,12 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"shadow-border-right-inverse-strong\\": \\"1px 0 #e1e3ea\\",
   \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #cce4ff\\",
   \\"shadow-border-brand-10\\": \\"saffron\\",
-  \\"shadow-scroll\\": \\"0 4px 4px 0 rgba(18, 28, 45, 0.2)\\",
   \\"shadow-border-decorative-10-weaker\\": \\"0 0 0 1px #e1e3ea\\",
   \\"shadow-border-decorative-20-weaker\\": \\"0 0 0 1px #cce4ff\\",
   \\"shadow-border-bottom-subaccount\\": \\"0 1px 0 #ffdd35\\",
   \\"shadow-focus-inset\\": \\"inset 0 0 0 2px rgba(2, 99, 224, 0.7)\\",
   \\"shadow-border-inverse\\": \\"0 0 0 1px #8891aa\\",
   \\"shadow-border-decorative-30-weaker\\": \\"0 0 0 1px #d1fae0\\",
-  \\"shadow-scroll-inverse\\": \\"0 12px 12px 0 #121c2d\\",
   \\"shadow-border-inverse-weakest\\": \\"0 0 0 1px #1f304c\\",
   \\"shadow-border-bottom-inverse-new-weaker\\": \\"0 1px 0 #5817bd\\",
   \\"shadow-border-bottom-success-weaker\\": \\"0 1px 0 #d1fae0\\",
@@ -1472,6 +1484,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"border-width-40\\": \\"8px\\",
   \\"shadow-border-bottom-new-weaker\\": \\"0 1px 0 #5817bd\\",
   \\"shadow\\": \\"0 4px 16px 0 rgba(0, 0, 0, 0.5)\\",
+  \\"shadow-border-bottom-inverse-weaker-inset\\": \\"inset 0 -1px 0 0 #394762\\",
   \\"shadow-border-subaccount\\": \\"0 0 0 1px #c28e00\\",
   \\"shadow-border-destructive-stronger\\": \\"0 0 0 1px #fccfcf\\",
   \\"shadow-border-success-weaker\\": \\"0 0 0 1px #0e7c3a\\",
@@ -1492,18 +1505,22 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"shadow-border-primary\\": \\"0 0 0 1px #006dfa\\",
   \\"shadow-border-destructive\\": \\"0 0 0 1px #d61f1f\\",
   \\"shadow-high\\": \\"0 16px 24px 4px rgba(0, 0, 0, 0.5)\\",
+  \\"shadow-right\\": \\"-4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
   \\"shadow-border-error-strong\\": \\"0 0 0 1px #f58a8a\\",
   \\"shadow-border-primary-strongest\\": \\"0 0 0 1px #ebf4ff\\",
   \\"shadow-border-destructive-strongest\\": \\"0 0 0 1px #feecec\\",
   \\"shadow-border-error-weak\\": \\"0 0 0 1px #ad1111\\",
   \\"shadow-border-bottom-brand-10-strong\\": \\"0 1px 0 #855c15\\",
   \\"shadow-border-bottom-brand-20-strong\\": \\"0 1px 0 #043cb5\\",
+  \\"shadow-right-inverse\\": \\"-4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
   \\"shadow-border-bottom-brand-30-strong\\": \\"0 1px 0 #0e7c3a\\",
+  \\"shadow-left\\": \\"4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
   \\"shadow-border-error\\": \\"0 0 0 1px #d61f1f\\",
   \\"shadow-border-bottom-decorative-10-weaker\\": \\"0 1px 0 #8891aa\\",
   \\"shadow-border-bottom-primary\\": \\"0 1px 0 #006dfa\\",
   \\"shadow-border-bottom-decorative-20-weaker\\": \\"0 1px 0 #043cb5\\",
   \\"shadow-border-inverse-stronger\\": \\"0 0 0 1px #f4f4f6\\",
+  \\"shadow-border-bottom-weak-inset\\": \\"inset 0 -1px 0 0 #394762\\",
   \\"shadow-border-error-strongest\\": \\"0 0 0 1px #feecec\\",
   \\"shadow-border-destructive-strong\\": \\"0 0 0 1px #f6b1b1\\",
   \\"shadow-border-inverse-weaker\\": \\"0 0 0 1px #394762\\",
@@ -1515,6 +1532,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"shadow-focus-shadow-border\\": \\"0 0 0 1px #394762, 0 0 0 3px #121c2d, 0 0 0 4px #ffffff, 0 0 0 6px rgba(255, 255, 255, 0.2)\\",
   \\"shadow-border-bottom-decorative-40-weaker\\": \\"0 1px 0 #5817bd\\",
   \\"shadow-border-destructive-weak\\": \\"0 0 0 1px #394762\\",
+  \\"shadow-left-inverse\\": \\"4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
   \\"shadow-border-brand-20\\": \\"sky\\",
   \\"shadow-border-top-primary-strongest\\": \\"0 -1px 0 #ebf4ff\\",
   \\"shadow-border-bottom-notification-stronger\\": \\"0 1px 0 #4a0b0b\\",
@@ -1524,14 +1542,12 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"shadow-border-right-inverse-strong\\": \\"1px 0 #e1e3ea\\",
   \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #043cb5\\",
   \\"shadow-border-brand-10\\": \\"saffron\\",
-  \\"shadow-scroll\\": \\"0 4px 4px 0 rgba(18, 28, 45, 0.2)\\",
   \\"shadow-border-decorative-10-weaker\\": \\"0 0 0 1px #1f304c\\",
   \\"shadow-border-decorative-20-weaker\\": \\"0 0 0 1px #043cb5\\",
   \\"shadow-border-bottom-subaccount\\": \\"0 1px 0 #c28e00\\",
   \\"shadow-focus-inset\\": \\"inset 0 0 0 1px #ffffff, inset 0 0 0 3px rgba(255, 255, 255, 0.2)\\",
   \\"shadow-border-inverse\\": \\"0 0 0 1px #8891aa\\",
   \\"shadow-border-decorative-30-weaker\\": \\"0 0 0 1px #0e7c3a\\",
-  \\"shadow-scroll-inverse\\": \\"0 12px 12px 0 #121c2d\\",
   \\"shadow-border-inverse-weakest\\": \\"0 0 0 1px #121c2d\\",
   \\"shadow-border-bottom-inverse-new-weaker\\": \\"0 1px 0 #5817bd\\",
   \\"shadow-border-bottom-success-weaker\\": \\"0 1px 0 #0e7c3a\\",
@@ -1919,6 +1935,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"border-width-40\\": \\"8px\\",
   \\"shadow-border-bottom-new-weaker\\": \\"0 1px 0 #c8aff0\\",
   \\"shadow\\": \\"0 4px 16px 0 rgba(18, 28, 45, 0.2)\\",
+  \\"shadow-border-bottom-inverse-weaker-inset\\": \\"inset 0 -1px 0 0 #394762\\",
   \\"shadow-border-subaccount\\": \\"0 0 0 1px #fff1b3\\",
   \\"shadow-border-destructive-stronger\\": \\"0 0 0 1px #4a0b0b\\",
   \\"shadow-border-success-weaker\\": \\"0 0 0 1px #d1fae0\\",
@@ -1939,18 +1956,22 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"shadow-border-primary\\": \\"0 0 0 1px #006dfa\\",
   \\"shadow-border-destructive\\": \\"0 0 0 1px #c72323\\",
   \\"shadow-high\\": \\"0 16px 24px 0 rgba(18, 28, 45, 0.2)\\",
+  \\"shadow-right\\": \\"-4px 0 8px -4px rgba(18, 28, 45, 0.2)\\",
   \\"shadow-border-error-strong\\": \\"0 0 0 1px #750c0c\\",
   \\"shadow-border-primary-strongest\\": \\"0 0 0 1px #06033a\\",
   \\"shadow-border-destructive-strongest\\": \\"0 0 0 1px #310c0c\\",
   \\"shadow-border-error-weak\\": \\"0 0 0 1px #eb5656\\",
   \\"shadow-border-bottom-brand-10-strong\\": \\"0 1px 0 #855c15\\",
   \\"shadow-border-bottom-brand-20-strong\\": \\"0 1px 0 #043cb5\\",
+  \\"shadow-right-inverse\\": \\"-4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
   \\"shadow-border-bottom-brand-30-strong\\": \\"0 1px 0 #0e7c3a\\",
+  \\"shadow-left\\": \\"4px 0 8px -4px rgba(18, 28, 45, 0.2)\\",
   \\"shadow-border-error\\": \\"0 0 0 1px #c72323\\",
   \\"shadow-border-bottom-decorative-10-weaker\\": \\"0 1px 0 #aeb2c1\\",
   \\"shadow-border-bottom-primary\\": \\"0 1px 0 #006dfa\\",
   \\"shadow-border-bottom-decorative-20-weaker\\": \\"0 1px 0 #66b3ff\\",
   \\"shadow-border-inverse-stronger\\": \\"0 0 0 1px #f4f4f6\\",
+  \\"shadow-border-bottom-weak-inset\\": \\"inset 0 -1px 0 0 #cacdd8\\",
   \\"shadow-border-error-strongest\\": \\"0 0 0 1px #310c0c\\",
   \\"shadow-border-destructive-strong\\": \\"0 0 0 1px #750c0c\\",
   \\"shadow-border-inverse-weaker\\": \\"0 0 0 1px #394762\\",
@@ -1962,6 +1983,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"shadow-focus-shadow-border\\": \\"0 0 0 1px #cacdd8, 0 0 0 3px #ffffff, 0 0 0 4px #006dfa, 0 0 0 6px #cce4ff\\",
   \\"shadow-border-bottom-decorative-40-weaker\\": \\"0 1px 0 #c8aff0\\",
   \\"shadow-border-destructive-weak\\": \\"0 0 0 1px #f6b1b1\\",
+  \\"shadow-left-inverse\\": \\"4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
   \\"shadow-border-brand-20\\": \\"sky\\",
   \\"shadow-border-top-primary-strongest\\": \\"0 -1px 0 #030b5d\\",
   \\"shadow-border-bottom-notification-stronger\\": \\"0 1px 0 #4a0b0b\\",
@@ -1971,14 +1993,12 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"shadow-border-right-inverse-strong\\": \\"1px 0 #e1e3ea\\",
   \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #66b3ff\\",
   \\"shadow-border-brand-10\\": \\"saffron\\",
-  \\"shadow-scroll\\": \\"0 4px 4px 0 rgba(18, 28, 45, 0.2)\\",
   \\"shadow-border-decorative-10-weaker\\": \\"0 0 0 1px #e1e3ea\\",
   \\"shadow-border-decorative-20-weaker\\": \\"0 0 0 1px #cce4ff\\",
   \\"shadow-border-bottom-subaccount\\": \\"0 1px 0 #ffdd35\\",
   \\"shadow-focus-inset\\": \\"inset 0 0 0 1px #006dfa, inset 0 0 0 3px #cce4ff\\",
   \\"shadow-border-inverse\\": \\"0 0 0 1px #8891aa\\",
   \\"shadow-border-decorative-30-weaker\\": \\"0 0 0 1px #d1fae0\\",
-  \\"shadow-scroll-inverse\\": \\"0 12px 12px 0 #121c2d\\",
   \\"shadow-border-inverse-weakest\\": \\"0 0 0 1px #121c2d\\",
   \\"shadow-border-bottom-inverse-new-weaker\\": \\"0 1px 0 #5817bd\\",
   \\"shadow-border-bottom-success-weaker\\": \\"0 1px 0 #7beaa5\\",
diff --git a/packages/paste-design-tokens/tokens/aliases/color.yml b/packages/paste-design-tokens/tokens/aliases/color.yml
index 57c02860a2..801741936d 100644
--- a/packages/paste-design-tokens/tokens/aliases/color.yml
+++ b/packages/paste-design-tokens/tokens/aliases/color.yml
@@ -11,3 +11,4 @@ aliases:
   sun: "#FF7A00"
   white: "#FFFFFF"
   white-accent: "#F6FBFE"
+  black-transparent-40: "rgba(0, 0, 0, 0.4)"
diff --git a/packages/paste-design-tokens/tokens/aliases/offset.yml b/packages/paste-design-tokens/tokens/aliases/offset.yml
index 49f0d9bfe4..753518ce58 100644
--- a/packages/paste-design-tokens/tokens/aliases/offset.yml
+++ b/packages/paste-design-tokens/tokens/aliases/offset.yml
@@ -13,3 +13,4 @@ aliases:
   offset-80: "24px"
   offset-90: "32px"
   offset-negative-05: -1px
+  offset-negative-20: -4px
diff --git a/packages/paste-design-tokens/tokens/global/box-shadow.yml b/packages/paste-design-tokens/tokens/global/box-shadow.yml
index 9209039cf3..e9b971cdc9 100644
--- a/packages/paste-design-tokens/tokens/global/box-shadow.yml
+++ b/packages/paste-design-tokens/tokens/global/box-shadow.yml
@@ -4,6 +4,7 @@ global:
 imports:
   - ../aliases/box-shadow.yml
   - ../aliases/offset.yml
+  - ../aliases/color.yml
 props:
   shadow-high:
     value: "{!shadow-elevation-30}"
@@ -218,6 +219,13 @@ props:
   shadow-border-bottom-inverse-new-weaker:
     value: "{!offset-0} {!offset-05} {!offset-0} {!palette-purple-70}"
     comment: Bottom shadow border for the sidebar beta badge
+  shadow-border-bottom-weak-inset:
+    value: "inset {!offset-0} {!offset-negative-05} {!offset-0} {!offset-0} {!palette-gray-30}"
+    comment: Weak bottom shadow border for tab container
+  shadow-border-bottom-inverse-weaker-inset:
+    value: "inset {!offset-0} {!offset-negative-05} {!offset-0} {!offset-0} {!palette-gray-80}"
+    comment: Weaker bottom shadow border for tab container on inverse backgrounds
+
   # User
   shadow-border-user:
     value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-purple-50}"
@@ -231,10 +239,16 @@ props:
     value: "{!offset-0} {!offset-05} {!offset-0} {!palette-red-90}"
     comment: Stronger bottom shadow border for notification.
 
-  # Scrollable elements
-  shadow-scroll-inverse:
-    value: "{!offset-0} {!offset-50} {!offset-50} {!offset-0} {!palette-gray-100}"
-    comment: Shadow for scrollable elements on inverse elements.
-  shadow-scroll:
-    value: "{!offset-0} {!offset-20} {!offset-20} {!offset-0} {!palette-gray-100-transparent-20}"
-    comment: Shadow for scrollable elements.
+  # Left / Right
+  shadow-left:
+    value: "{!offset-20} {!offset-0} {!offset-40} {!offset-negative-20} {!palette-gray-100-transparent-20}"
+    comment: Left shadow border for elements.
+  shadow-left-inverse:
+    value: "{!offset-20} {!offset-0} {!offset-40} {!offset-negative-20} {!black-transparent-40}"
+    comment: Left shadow border for inverse elements.
+  shadow-right:
+    value: "{!offset-negative-20} {!offset-0} {!offset-40} {!offset-negative-20} {!palette-gray-100-transparent-20}"
+    comment: Right shadow border for elements.
+  shadow-right-inverse:
+    value: "{!offset-negative-20} {!offset-0} {!offset-40} {!offset-negative-20} {!black-transparent-40}"
+    comment: Right shadow border for inverse elements.
diff --git a/packages/paste-design-tokens/tokens/themes/dark/global/box-shadow.yml b/packages/paste-design-tokens/tokens/themes/dark/global/box-shadow.yml
index 69d2ea71e9..b34336e5a2 100644
--- a/packages/paste-design-tokens/tokens/themes/dark/global/box-shadow.yml
+++ b/packages/paste-design-tokens/tokens/themes/dark/global/box-shadow.yml
@@ -171,3 +171,16 @@ props:
   shadow-border-user:
     value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-purple-10}"
     comment: Shadow border for user.
+
+  # Bottom borders
+  shadow-border-bottom-weak-inset:
+    value: "inset {!offset-0} {!offset-negative-05} {!offset-0} {!offset-0} {!palette-gray-80}"
+    comment: Weak bottom shadow border for tab container
+
+  # Left / Right
+  shadow-left:
+    value: "{!offset-20} {!offset-0} {!offset-40} {!offset-negative-20} {!black-transparent-40}"
+    comment: Left shadow border for elements.
+  shadow-right:
+    value: "{!offset-negative-20} {!offset-0} {!offset-40} {!offset-negative-20} {!black-transparent-40}"
+    comment: Right shadow border for elements.