diff --git a/src/components/table-of-contents/MenuLink.js b/src/components/table-of-contents/MenuLink.js
index 04cb6c67..c6a33d59 100644
--- a/src/components/table-of-contents/MenuLink.js
+++ b/src/components/table-of-contents/MenuLink.js
@@ -8,5 +8,5 @@ export const MenuLink = styled(({ isActive, ...rest }) => <Link {...rest} />)`
   color: ${(props) => (props.isActive ? color.secondary : color.darker)};
   font-weight: ${(props) => (props.isActive ? typography.weight.bold : typography.weight.regular)};
   line-height: 24px;
-  white-space: nowrap;
+  text-align: left;
 `;
diff --git a/src/components/table-of-contents/TableOfContents.stories.js b/src/components/table-of-contents/TableOfContents.stories.js
index e45bed19..cc118998 100644
--- a/src/components/table-of-contents/TableOfContents.stories.js
+++ b/src/components/table-of-contents/TableOfContents.stories.js
@@ -5,6 +5,9 @@ import { StoryLinkWrapper } from '../StoryLinkWrapper';
 export default {
   title: 'Design System/TableOfContents',
   component: TableOfContents,
+  decorators: [
+    (storyFn) => <div style={{ width: 240, outline: '1px dotted grey' }}>{storyFn()}</div>,
+  ],
 };
 
 const items = [
@@ -39,7 +42,39 @@ const items = [
         children: [
           {
             path: '/features-and-behavior',
-            title: 'Features and behavior',
+            title: 'features and behavior dolor sit amet consectatur',
+            type: 'link',
+          },
+          {
+            path: '/theming',
+            title: 'Theming',
+            type: 'link',
+          },
+        ],
+      },
+      {
+        title: 'Head tags',
+        type: 'link',
+        path: '/head-tags',
+      },
+      {
+        title: 'Body tags',
+        type: 'link',
+        path: '/body-tags',
+      },
+    ],
+  },
+  {
+    title: 'Super long root heading that is very long',
+    type: 'menu',
+    children: [
+      {
+        title: 'Verbose menu link that is extremely lengthy',
+        type: 'menu',
+        children: [
+          {
+            path: '/lorem-ipsum',
+            title: 'Lorem ipsum dolor sit amet consectatur',
             type: 'link',
           },
           {
diff --git a/src/components/table-of-contents/TableOfContentsItems.js b/src/components/table-of-contents/TableOfContentsItems.js
index 76c7bb3e..9676c0e1 100644
--- a/src/components/table-of-contents/TableOfContentsItems.js
+++ b/src/components/table-of-contents/TableOfContentsItems.js
@@ -34,15 +34,28 @@ const TopLevelMenuToggle = styled(Link).attrs({ isButton: true, tertiary: true }
   font-weight: ${typography.weight.bold};
   word-break: break-word;
   text-align: left;
+
+  > span {
+    display: flex;
+
+    svg {
+      flex: none;
+    }
+
+    span {
+      flex: 1;
+    }
+  }
 `;
 
 const ArrowIcon = styled(Icon).attrs({ icon: 'arrowright' })`
   && {
     width: 12px;
-    width: 12px;
+    height: 12px;
     color: ${color.mediumdark};
     transform: translateY(1px) ${(props) => props.isOpen && `rotate(90deg)`};
     ${(props) => (props.isTopLevel ? `margin-right: 8px;` : `margin-left: 8px;`)}
+    bottom: -0.2em;
   }
 `;
 
@@ -57,7 +70,7 @@ function Menu({ isTopLevel, item, setMenuOpenStateById, ...rest }) {
       {isTopLevel ? (
         <TopLevelMenuToggle onClick={toggleOpenState}>
           {arrow}
-          {item.title}
+          <span>{item.title}</span>
         </TopLevelMenuToggle>
       ) : (
         <MenuLink isButton onClick={toggleOpenState}>
@@ -109,7 +122,7 @@ const List = styled.ul`
     props.isTopLevel &&
     `  
     > li {
-      padding-top: 20px;
+      padding-top: 24px;
 
       ul, ol {
         padding-top: 12px;
@@ -118,10 +131,10 @@ const List = styled.ul`
       }
       
       > ul { 
-        padding-left: 44px;
+        padding-left: 35px;
 
         > li ul {
-          padding-left: 20px;
+          padding-left: 15px;
         }
       }