diff --git a/packages/design-tokens/docs/components/TokensTable.tsx b/packages/design-tokens/docs/components/TokensTable.tsx
index 57b0ee730..81326786b 100644
--- a/packages/design-tokens/docs/components/TokensTable.tsx
+++ b/packages/design-tokens/docs/components/TokensTable.tsx
@@ -53,7 +53,7 @@ export const TokensTable = ({
             return (
               <Tr key={tokenName}>
                 {map(row, (cell, index) => {
-                  const column = columnGroups[0][index].name;
+                  const column = columnGroups[0][index]?.name;
                   return (
                     <Td key={`${tokenName}${column}`}>
                       {index === 0 ? (
diff --git a/packages/design-tokens/docs/components/constants.tsx b/packages/design-tokens/docs/components/constants.tsx
index 4abf35a9e..f3ed06240 100644
--- a/packages/design-tokens/docs/components/constants.tsx
+++ b/packages/design-tokens/docs/components/constants.tsx
@@ -105,21 +105,14 @@ const FONT_SIZE = reduce(
         name: "Name",
         transform: getTokenNameFromTuple(prefix),
       },
-      { name: "Pixels", transform: getTokenComment },
+      { name: "Weight", transform: getTokenValue },
       { name: "Rems", transform: getTokenValue },
       {
         name: "Preview",
         transform: createPreview({
-          prefix,
-          attribute: "fontSize",
+          prefix: getTokenKey(fontWeightTokens),
+          attribute: "fontWeight",
           children: TEXT_PREVIEW,
-          componentProps: {
-            p: "space40",
-            textOverflow: "ellipsis",
-            whiteSpace: "nowrap",
-            overflow: "hidden",
-            maxWidth: "600px",
-          },
         }),
       },
     ];
@@ -262,21 +255,6 @@ export const TOKEN_COLUMNS: TokenColumnsProps = {
       }),
     },
   ],
-  [getTokenKey(fontWeightTokens)]: [
-    {
-      name: "Name",
-      transform: getTokenName(fontWeightTokens),
-    },
-    { name: "Weight", transform: getTokenValue },
-    {
-      name: "Preview",
-      transform: createPreview({
-        prefix: getTokenKey(fontWeightTokens),
-        attribute: "fontWeight",
-        children: TEXT_PREVIEW,
-      }),
-    },
-  ],
   ...SPACE,
   ...FONT_SIZE,
   ...COLORS,
diff --git a/packages/design-tokens/docs/components/createPreview.tsx b/packages/design-tokens/docs/components/createPreview.tsx
index 4aea59e5f..60e94b5f1 100644
--- a/packages/design-tokens/docs/components/createPreview.tsx
+++ b/packages/design-tokens/docs/components/createPreview.tsx
@@ -29,7 +29,7 @@ export const createPreview =
   ([tokenName, token]: TokenTuple): JSX.Element => {
     const tokenProps = overrideProps[token.value];
     const normalizedSuffix = replace(
-      upperFirst(replace(tokenName, "-", "")),
+      upperFirst(replace(camelCase(tokenName), "-", "")),
       "Negative",
       "",
     );
diff --git a/packages/design-tokens/docs/utils/getTokenNameFromTuple.ts b/packages/design-tokens/docs/utils/getTokenNameFromTuple.ts
index c92264a14..54b7173e0 100644
--- a/packages/design-tokens/docs/utils/getTokenNameFromTuple.ts
+++ b/packages/design-tokens/docs/utils/getTokenNameFromTuple.ts
@@ -8,5 +8,5 @@ type TransformFn = (tuple: TokenTuple) => string;
 export const getTokenNameFromTuple =
   (prefix: string): TransformFn =>
   ([tokenName]: TokenTuple) => {
-    return `${camelCase(prefix)}${upperFirst(replace(tokenName, "-", ""))}`;
+    return `${camelCase(prefix)}${upperFirst(replace(camelCase(tokenName), "-", ""))}`;
   };