diff --git a/components/src/components/atoms/Banner/Banner.tsx b/components/src/components/atoms/Banner/Banner.tsx
index 4e179a99..6f923ac6 100644
--- a/components/src/components/atoms/Banner/Banner.tsx
+++ b/components/src/components/atoms/Banner/Banner.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import styled, { css } from 'styled-components'
 
-import { WithAlert, WithIcon } from '@/src/types'
+import { WithAlert, WithIcon } from '../../../types'
 
 import { Typography } from '../Typography'
 
diff --git a/docs/package.json b/docs/package.json
index 4aca7f14..c23a12d9 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -14,7 +14,7 @@
     "start": "next start"
   },
   "dependencies": {
-    "@ensdomains/thorin": "workspace:components",
+    "@ensdomains/thorin": "workspace:*",
     "@reach/skip-nav": "^0.16.0",
     "@sindresorhus/slugify": "^2.1.0",
     "copy-to-clipboard": "^3.3.1",
diff --git a/docs/src/components/PropsTable.tsx b/docs/src/components/PropsTable.tsx
index 32aff3d3..0f0e0108 100644
--- a/docs/src/components/PropsTable.tsx
+++ b/docs/src/components/PropsTable.tsx
@@ -25,8 +25,7 @@ const Container = styled.div(
 )
 
 const TableHead = styled.th(
-  ({ theme }) => css`
-    background-color: ${theme.colors.background};
+  () => css`
     position: sticky;
     top: 0;
   `,
@@ -40,9 +39,9 @@ const TableHeadLabelContainer = styled.div<{
     text-transform: capitalize;
     background-color: ${theme.colors.greySurface};
     border-color: ${theme.colors.greyBright};
-    ${$i === 0 ? `border-left-radius: ${theme.radii['large']};` : ``}
+    ${$i === 0 ? `border-top-left-radius: ${theme.radii.card};` : ``}
     ${$i === $headers.length - 1
-      ? `border-right-radius: ${theme.radii['large']};`
+      ? `border-top-right-radius: ${theme.radii.card};`
       : ``}
       padding: ${theme.space['2.5']} ${theme.space['4']};
   `,
@@ -50,7 +49,7 @@ const TableHeadLabelContainer = styled.div<{
 
 const Name = styled(Typography)(
   ({ theme }) => css`
-    color: ${theme.colors.text};
+    color: ${theme.colors.textPrimary};
     font-size: ${theme.fontSizes['small']};
   `,
 )
@@ -79,14 +78,14 @@ const DefaultValue = styled(Typography)(
 
 const Description = styled(Typography)(
   ({ theme }) => css`
-    color: ${theme.colors.textSecondary};
-    font-size: ${theme.fontSizes['small']};
+    color: ${theme.colors.greyPrimary};
+    font-size: ${theme.fontSizes.small};
   `,
 )
 
 const NoProps = styled(Typography)(
   ({ theme }) => css`
-    color: ${theme.colors.textSecondary};
+    color: ${theme.colors.greyPrimary};
   `,
 )
 
@@ -164,7 +163,6 @@ export const PropsTable = ({ sourceLink, types }: Props) => {
                 ))}
               </tr>
             </thead>
-
             <tbody>
               {props.map((x) => (
                 <tr
@@ -183,7 +181,13 @@ export const PropsTable = ({ sourceLink, types }: Props) => {
                   </DataCell>
 
                   <DataCell>
-                    <RawName>{formatPropType(x.type)}</RawName>
+                    <RawName
+                      color="accent"
+                      font="mono"
+                      typography="Small/Normal"
+                    >
+                      {formatPropType(x.type)}
+                    </RawName>
                   </DataCell>
 
                   <DataCell>
diff --git a/docs/src/reference/snippets/atoms/Banner.snippets.tsx b/docs/src/reference/snippets/atoms/Banner.snippets.tsx
index 7087cb94..02b15964 100644
--- a/docs/src/reference/snippets/atoms/Banner.snippets.tsx
+++ b/docs/src/reference/snippets/atoms/Banner.snippets.tsx
@@ -6,6 +6,6 @@ import { Snippet } from '../../../types'
 export const snippets: Snippet[] = [
   {
     name: 'Basic',
-    code: <Banner />,
+    code: <Banner message="Content here" />,
   },
 ]
diff --git a/docs/tsconfig.json b/docs/tsconfig.json
index 7747da21..456cc909 100644
--- a/docs/tsconfig.json
+++ b/docs/tsconfig.json
@@ -3,8 +3,7 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "~/*": ["./src/*"],
-      "@/*": ["../components/*"]
+      "~/*": ["./src/*"]
     },
     "incremental": true,
     "target": "esnext",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 34005152..24bb43e9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -184,7 +184,7 @@ importers:
 
   docs:
     specifiers:
-      '@ensdomains/thorin': workspace:components
+      '@ensdomains/thorin': workspace:*
       '@mdx-js/loader': ^1.6.22
       '@mdx-js/react': ^1.6.22
       '@next/mdx': ^12.0.1
@@ -257,10 +257,10 @@ importers:
       babel-loader: 8.2.5
       fs-extra: 10.0.0
       glob: 7.2.0
-      react-docgen-typescript: 2.1.1_typescript@4.7.4
+      react-docgen-typescript: 2.1.1_typescript@4.9.4
       rimraf: 3.0.2
       stylelint-webpack-plugin: 3.3.0
-      typescript: 4.7.4
+      typescript: 4.9.4
       utility-types: 3.10.0
 
 packages:
@@ -11538,14 +11538,6 @@ packages:
       react-dom: 17.0.2_react@17.0.2
     dev: false
 
-  /react-docgen-typescript/2.1.1_typescript@4.7.4:
-    resolution: {integrity: sha512-XWe8bsYqVjxciKdpNoufaHiB7FgUHIOnVQgxUolRL3Zlof2zkdTzuQH6SU2n3Ek9kfy3O1c63ojMtNfpiuNeZQ==}
-    peerDependencies:
-      typescript: '>= 4.3.x'
-    dependencies:
-      typescript: 4.7.4
-    dev: true
-
   /react-docgen-typescript/2.1.1_typescript@4.9.4:
     resolution: {integrity: sha512-XWe8bsYqVjxciKdpNoufaHiB7FgUHIOnVQgxUolRL3Zlof2zkdTzuQH6SU2n3Ek9kfy3O1c63ojMtNfpiuNeZQ==}
     peerDependencies:
@@ -13245,12 +13237,6 @@ packages:
     resolution: {integrity: sha512-+Q5+cvBtPO4VKNyyI6O+XnIne+/hq/WfNhBaF4hJP8nB8TbikTg+2h9uBMsqduwX1+kVfwG9SBSwMTtvi2Ep7w==}
     dev: true
 
-  /typescript/4.7.4:
-    resolution: {integrity: sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==}
-    engines: {node: '>=4.2.0'}
-    hasBin: true
-    dev: true
-
   /typescript/4.8.4:
     resolution: {integrity: sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==}
     engines: {node: '>=4.2.0'}