diff --git a/airbyte-webapp/src/components/ui/Button/Button.module.scss b/airbyte-webapp/src/components/ui/Button/Button.module.scss
index 3ac76b37cd6e..1358b7fbc546 100644
--- a/airbyte-webapp/src/components/ui/Button/Button.module.scss
+++ b/airbyte-webapp/src/components/ui/Button/Button.module.scss
@@ -213,6 +213,21 @@
     }
   }
 
+  &.typeDark {
+    background-color: colors.$dark-blue;
+    color: colors.$white;
+
+    &:hover {
+      background-color: colors.$dark-blue-800;
+      color: colors.$white;
+    }
+
+    &:active {
+      background-color: colors.$dark-blue-1000;
+      color: colors.$white;
+    }
+  }
+
   &.isLoading {
     position: relative;
     align-content: center;
diff --git a/airbyte-webapp/src/components/ui/Button/Button.tsx b/airbyte-webapp/src/components/ui/Button/Button.tsx
index a9294b7a937b..bcc9782df54d 100644
--- a/airbyte-webapp/src/components/ui/Button/Button.tsx
+++ b/airbyte-webapp/src/components/ui/Button/Button.tsx
@@ -32,6 +32,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, r
     [styles.typeLight]: variant === "light",
     [styles.typePrimary]: variant === "primary",
     [styles.typeSecondary]: variant === "secondary",
+    [styles.typeDark]: variant === "dark",
   };
   const widthStyle: { width?: string } = {};
   if (width) {
diff --git a/airbyte-webapp/src/components/ui/Button/index.stories.tsx b/airbyte-webapp/src/components/ui/Button/index.stories.tsx
index 26fade189d62..7a3d8472ee1b 100644
--- a/airbyte-webapp/src/components/ui/Button/index.stories.tsx
+++ b/airbyte-webapp/src/components/ui/Button/index.stories.tsx
@@ -75,3 +75,9 @@ Clear.args = {
   variant: "clear",
   children: "No Stroke",
 };
+
+export const Dark = Template.bind({});
+Dark.args = {
+  variant: "dark",
+  children: "Dark",
+};
diff --git a/airbyte-webapp/src/components/ui/Button/types.tsx b/airbyte-webapp/src/components/ui/Button/types.tsx
index 836aa4eb6a19..09e46b431047 100644
--- a/airbyte-webapp/src/components/ui/Button/types.tsx
+++ b/airbyte-webapp/src/components/ui/Button/types.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
 type ButtonSize = "xs" | "sm" | "lg";
-type ButtonVariant = "primary" | "secondary" | "danger" | "light" | "clear";
+type ButtonVariant = "primary" | "secondary" | "danger" | "light" | "clear" | "dark";
 
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   clickable?: boolean;