diff --git a/.storybook/manager-head.html b/.storybook/manager-head.html
new file mode 100644
index 00000000..b8069839
--- /dev/null
+++ b/.storybook/manager-head.html
@@ -0,0 +1 @@
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@200;400;600;700&display=swap">
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index 536bbfca..a3bbf706 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -1,2 +1,7 @@
 <link href='%STORYBOOK_STYLE_URL%' rel='stylesheet' type='text/css' />
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@200;400;600;700&display=swap">
+<style>
+    body {
+        font-family: Inter, sans-serif;
+    }
+</style>
\ No newline at end of file
diff --git a/.storybook/preview.js b/.storybook/preview.js
index 7e8130fb..938df913 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,13 +1,15 @@
 import 'bootstrap-icons/font/bootstrap-icons.css';
+import { themes } from '@storybook/theming';
 // https://storybook.js.org/docs/react/writing-stories/parameters#global-parameters
 export const parameters = {
   // https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args
   actions: { argTypesRegex: '^on.*' },
-  // docs: {
-  //   source: {
-  //     type: 'code',
-  //   },
-  // },
+  docs: {
+    theme: themes.sgdsTheme,
+    // source: {
+    //   type: 'code',
+    // },
+  },
   options: {
     storySort: {
       order: ['Install', 'Usage', 'Components'],