diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index da2eb90..6318298 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -125,6 +125,17 @@ export const Button = ({
       hoverStyles = type === 'header' ? '' : 'hover:text-gray-300'
       break
 
+    case 'defi':
+      background =
+        type === 'primary'
+          ? 'bg-gradient-to-r from-oeth-button-start to-oeth-button-end'
+          : type === 'secondary'
+          ? 'bg-gradient-to-r from-oeth-button-dark-start to-oethx  -button-dark-end'
+          : ''
+      textColor = 'text-white'
+      hoverStyles = type === 'header' ? '' : 'hover:text-gray-300'
+      break
+
     case 'story':
       background =
         type === 'primary'
diff --git a/src/components/Header/Header.stories.tsx b/src/components/Header/Header.stories.tsx
index 8133b0b..4662b62 100644
--- a/src/components/Header/Header.stories.tsx
+++ b/src/components/Header/Header.stories.tsx
@@ -1,4 +1,4 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react'
+import { ComponentStory, ComponentMeta, Meta, StoryFn } from '@storybook/react'
 
 import { Header } from '.'
 
@@ -9,9 +9,9 @@ export default {
     // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
     layout: 'fullscreen'
   }
-} as ComponentMeta<typeof Header>
+} as Meta<typeof Header>
 
-const Template: ComponentStory<typeof Header> = (args) => <Header {...args} />
+const Template: StoryFn<typeof Header> = (args) => <Header {...args} />
 
 export const OriginProtocol = Template.bind({})
 OriginProtocol.args = {
@@ -153,6 +153,55 @@ OETH.parameters = {
   }
 }
 
+export const Defi = Template.bind({})
+Defi.args = {
+  webProperty: 'defi',
+  mappedLinks: [
+    {
+      href: 'https://ousd.com',
+      label: 'Governance',
+      isButton: false,
+      order: 1,
+      links: []
+    },
+    {
+      href: 'https://ousd.com',
+      label: 'Docs',
+      isButton: false,
+      order: 3,
+      links: []
+    },
+    {
+      href: 'https://ousd.com',
+      label: 'FAQ',
+      isButton: false,
+      order: 3,
+      links: []
+    },
+    {
+      href: 'https://ousd.com',
+      label: 'OGV',
+      isButton: false,
+      order: 5,
+      links: []
+    },
+    {
+      href: 'https://google.com',
+      label: 'App',
+      isButton: true,
+      order: 6,
+      links: []
+    }
+  ],
+  background: 'bg-black md:bg-black'
+}
+
+Defi.parameters = {
+  backgrounds: {
+    default: 'dark'
+  }
+}
+
 export const Story = Template.bind({})
 Story.args = {
   webProperty: 'story',