diff --git a/packages/core-components/src/components/Chip/Chip.stories.tsx b/packages/core-components/src/components/Chip/Chip.stories.tsx
index f5cdfd3f16..5e00779209 100644
--- a/packages/core-components/src/components/Chip/Chip.stories.tsx
+++ b/packages/core-components/src/components/Chip/Chip.stories.tsx
@@ -15,29 +15,51 @@
  */
 
 import React from 'react';
-import Chip from '@material-ui/core/Chip';
+import AddIcon from '@material-ui/icons/Add';
+import WarningIcon from '@material-ui/icons/Warning';
+import EditIcon from '@material-ui/icons/Edit';
+import Chip, { ChipProps } from '@material-ui/core/Chip';
+
+const icons = {
+  AddIcon: <AddIcon />,
+  WarningIcon: <WarningIcon />,
+  EditIcon: <EditIcon />,
+  None: null,
+};
+
+const defaultArgs = {
+  label: 'Label',
+  size: 'medium',
+  variant: 'default',
+  icon: 'None',
+};
 
 export default {
   title: 'Data Display/Chip',
   component: Chip,
+  argTypes: {
+    size: {
+      options: ['small', 'medium'],
+      control: { type: 'select' },
+    },
+    variant: {
+      options: ['default', 'outlined'],
+      control: { type: 'select' },
+    },
+    icon: {
+      options: Object.keys(icons),
+      mapping: icons,
+      control: {
+        type: 'select',
+      },
+    },
+  },
 };
 
-export const Default = () => <Chip label="Default" />;
+export const Default = (args: ChipProps) => <Chip {...args} />;
+Default.args = defaultArgs;
 
-export const LargeDeletable = () => (
-  <Chip label="Large deletable" size="medium" onDelete={() => ({})} />
+export const Deleteable = (args: ChipProps) => (
+  <Chip {...args} onDelete={() => ({})} />
 );
-
-export const LargeNotDeletable = () => (
-  <Chip label="Large not deletable" size="medium" />
-);
-
-export const SmallDeletable = () => (
-  <Chip label="Small deletable" size="small" onDelete={() => ({})} />
-);
-
-export const SmallNotDeletable = () => (
-  <Chip label="Small not deletable" size="small" />
-);
-
-export const Outline = () => <Chip label="Outline" variant="outlined" />;
+Deleteable.args = defaultArgs;
diff --git a/packages/core-components/src/layout/Header/Header.stories.tsx b/packages/core-components/src/layout/Header/Header.stories.tsx
index 9fee6313e9..19871dfc75 100644
--- a/packages/core-components/src/layout/Header/Header.stories.tsx
+++ b/packages/core-components/src/layout/Header/Header.stories.tsx
@@ -21,6 +21,22 @@ import { Header } from './Header';
 export default {
   title: 'Layout/Header',
   component: Header,
+  argTypes: {
+    type: {
+      options: [
+        'home',
+        'tool',
+        'service',
+        'website',
+        'library',
+        'app',
+        'apis',
+        'documentation',
+        'other',
+      ],
+      control: { type: 'select' },
+    },
+  },
 };
 
 const labels = (
@@ -31,80 +47,21 @@ const labels = (
   </>
 );
 
-export const Home = () => (
-  <Page themeId="home">
-    <Header title="Start/Home Page" type="home">
-      {labels}
-    </Header>
-  </Page>
-);
+export const Default = (args: {
+  type: string;
+  title: string;
+  subtitle: string;
+}) => {
+  const { type } = args;
+  return (
+    <Page themeId={type}>
+      <Header {...args}>{labels}</Header>
+    </Page>
+  );
+};
 
-export const HomeWithSubtitle = () => (
-  <Header title="Start/Home Page" subtitle="This is a subtitle">
-    {labels}
-  </Header>
-);
-
-export const Apis = () => (
-  <Page themeId="apis">
-    <Header title="API catalogue" type="tool">
-      {labels}
-    </Header>
-  </Page>
-);
-
-export const Tool = () => (
-  <Page themeId="tool">
-    <Header title="Stand-alone tool" type="tool">
-      {labels}
-    </Header>
-  </Page>
-);
-
-export const Service = () => (
-  <Page themeId="service">
-    <Header title="Service component page" type="service">
-      {labels}
-    </Header>
-  </Page>
-);
-
-export const Website = () => (
-  <Page themeId="website">
-    <Header title="Website component page" type="website">
-      {labels}
-    </Header>
-  </Page>
-);
-
-export const Library = () => (
-  <Page themeId="library">
-    <Header title="Library component page" type="library">
-      {labels}
-    </Header>
-  </Page>
-);
-
-export const App = () => (
-  <Page themeId="app">
-    <Header title="App component page" type="app">
-      {labels}
-    </Header>
-  </Page>
-);
-
-export const Documentation = () => (
-  <Page themeId="documentation">
-    <Header title="Documentation component page" type="documentation">
-      {labels}
-    </Header>
-  </Page>
-);
-
-export const Other = () => (
-  <Page themeId="other">
-    <Header title="Other/generic component page" type="other">
-      {labels}
-    </Header>
-  </Page>
-);
+Default.args = {
+  type: 'home',
+  title: 'This is a title',
+  subtitle: 'This is a subtitle',
+};
diff --git a/storybook/.storybook/main.js b/storybook/.storybook/main.js
index 8ed4949cf3..f493bd2de6 100644
--- a/storybook/.storybook/main.js
+++ b/storybook/.storybook/main.js
@@ -32,6 +32,7 @@ module.exports = ({ args }) => {
   return {
     stories,
     addons: [
+      '@storybook/addon-controls',
       '@storybook/addon-a11y',
       '@storybook/addon-actions',
       '@storybook/addon-links',
diff --git a/storybook/package.json b/storybook/package.json
index 9a9c7d4a8c..eafe73a991 100644
--- a/storybook/package.json
+++ b/storybook/package.json
@@ -9,14 +9,15 @@
   },
   "dependencies": {
     "@sucrase/webpack-loader": "^2.0.0",
-    "sucrase": "^3.21.0",
     "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-hot-loader": "^4.13.0",
-    "react-dom": "^17.0.2"
+    "sucrase": "^3.21.0"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "^6.4.21",
     "@storybook/addon-actions": "^6.4.21",
+    "@storybook/addon-controls": "^6.4.22",
     "@storybook/addon-links": "^6.4.21",
     "@storybook/addon-storysource": "^6.4.21",
     "@storybook/addons": "^6.4.21",
@@ -24,9 +25,9 @@
     "storybook-dark-mode": "^1.0.9"
   },
   "peerDependencies": {
-    "@backstage/theme": "link:../packages/theme",
-    "@backstage/test-utils": "link:../packages/test-utils",
     "@backstage/core-app-api": "link:../packages/core-app-api",
-    "@backstage/core-plugin-api": "link:../packages/core-plugin-api"
+    "@backstage/core-plugin-api": "link:../packages/core-plugin-api",
+    "@backstage/test-utils": "link:../packages/test-utils",
+    "@backstage/theme": "link:../packages/theme"
   }
 }
diff --git a/storybook/yarn.lock b/storybook/yarn.lock
index 4660d682bc..8c6380c291 100644
--- a/storybook/yarn.lock
+++ b/storybook/yarn.lock
@@ -1381,6 +1381,24 @@
     util-deprecate "^1.0.2"
     uuid-browser "^3.1.0"
 
+"@storybook/addon-controls@^6.4.22":
+  version "6.4.22"
+  resolved "https://registry.npmjs.org/@storybook/addon-controls/-/addon-controls-6.4.22.tgz#42c7f426eb7ba6d335e8e14369d6d13401878665"
+  integrity sha512-f/M/W+7UTEUnr/L6scBMvksq+ZA8GTfh3bomE5FtWyOyaFppq9k8daKAvdYNlzXAOrUUsoZVJDgpb20Z2VBiSQ==
+  dependencies:
+    "@storybook/addons" "6.4.22"
+    "@storybook/api" "6.4.22"
+    "@storybook/client-logger" "6.4.22"
+    "@storybook/components" "6.4.22"
+    "@storybook/core-common" "6.4.22"
+    "@storybook/csf" "0.0.2--canary.87bc651.0"
+    "@storybook/node-logger" "6.4.22"
+    "@storybook/store" "6.4.22"
+    "@storybook/theming" "6.4.22"
+    core-js "^3.8.2"
+    lodash "^4.17.21"
+    ts-dedent "^2.0.0"
+
 "@storybook/addon-links@^6.4.21":
   version "6.4.22"
   resolved "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-6.4.22.tgz#c0ed9e9ef6505cf1562e1476bbc5064c82dadbe2"