diff --git a/dashboard/components/card-primary/CardPrimary.mock.tsx b/dashboard/components/card-primary/CardPrimary.mock.tsx
new file mode 100644
index 000000000..9b6a9386e
--- /dev/null
+++ b/dashboard/components/card-primary/CardPrimary.mock.tsx
@@ -0,0 +1,14 @@
+import { CardPrimaryProps } from './CardPrimary';
+
+const base: CardPrimaryProps = {
+  title: 'Introducing Tailwarden',
+  description:
+    'Tailwarden is the cloud version of Komiser, which offers more features and insights',
+  type: 'shadow'
+};
+
+const mockCardPrimaryProps = {
+  base
+};
+
+export default mockCardPrimaryProps;
diff --git a/dashboard/components/card-primary/CardPrimary.stories.tsx b/dashboard/components/card-primary/CardPrimary.stories.tsx
new file mode 100644
index 000000000..15cf34e37
--- /dev/null
+++ b/dashboard/components/card-primary/CardPrimary.stories.tsx
@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import CardPrimary from './CardPrimary';
+import mockCardPrimaryProps from './CardPrimary.mock';
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
+const meta: Meta<typeof CardPrimary> = {
+  title: 'Komiser/Card Primary',
+  component: CardPrimary,
+  tags: ['autodocs'],
+  argTypes: {
+    type: {
+      control: {
+        type: 'inline-radio'
+      }
+    },
+    showButton: {
+      control: 'boolean'
+    },
+    showAvatar: {
+      control: 'boolean'
+    }
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof CardPrimary>;
+
+// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
+export const Primary: Story = {
+  args: {
+    ...mockCardPrimaryProps.base
+  }
+};
diff --git a/dashboard/components/card-primary/CardPrimary.test.tsx b/dashboard/components/card-primary/CardPrimary.test.tsx
new file mode 100644
index 000000000..d998a1912
--- /dev/null
+++ b/dashboard/components/card-primary/CardPrimary.test.tsx
@@ -0,0 +1,14 @@
+import { render, screen } from '@testing-library/react';
+import CardPrimary from './CardPrimary';
+
+describe('Card', () => {
+  it('should render cta component without crashing', () => {
+    render(
+      <CardPrimary
+        title="Introducing Tailwarden"
+        description="Tailwarden is the cloud version of Komiser, which offers more features and insights"
+        type="shadow"
+      />
+    );
+  });
+});
diff --git a/dashboard/components/card-primary/CardPrimary.tsx b/dashboard/components/card-primary/CardPrimary.tsx
new file mode 100644
index 000000000..7d0ba6d55
--- /dev/null
+++ b/dashboard/components/card-primary/CardPrimary.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import Image from 'next/image';
+import platform from '@utils/providerHelper';
+import { ChevronRightIcon } from '@components/icons';
+
+export type CardPrimaryProps = {
+  title: string;
+  description: string;
+  showButton?: boolean;
+  showAvatar?: boolean;
+  type: 'shadow' | 'stroke';
+};
+
+function CardPrimary({
+  title,
+  description,
+  showButton = true,
+  showAvatar = true,
+  type = 'stroke'
+}: CardPrimaryProps) {
+  const base = `flex items-center justify-between gap-2 rounded-lg bg-white p-6 border-gray-200 ${
+    type === 'shadow' ? 'border-b ' : 'border`'
+  }`;
+
+  return (
+    <div className={base}>
+      <div className="flex gap-4 items-center">
+        {showAvatar && (
+          <Image
+            src={platform.getImgSrc('azure')}
+            width={42}
+            height={42}
+            alt="Purplin thinking"
+          />
+        )}
+
+        <div>
+          <p className="text-lg font-medium text-gray-950">{title}</p>
+          <p className="text-gray-700 text-xs">{description}</p>
+        </div>
+      </div>
+      {showButton && <ChevronRightIcon width={16} height={16} />}
+    </div>
+  );
+}
+
+export default CardPrimary;
diff --git a/dashboard/components/card/Card.mocks.tsx b/dashboard/components/card/Card.mocks.tsx
index e012a56ec..ed8dbad5d 100644
--- a/dashboard/components/card/Card.mocks.tsx
+++ b/dashboard/components/card/Card.mocks.tsx
@@ -1,4 +1,5 @@
 import { CardProps } from './Card';
+import { CtaProps } from '../cta/Cta';
 
 const base: CardProps = {
   label: 'Blop',
diff --git a/dashboard/components/cta/Cta.mock.tsx b/dashboard/components/cta/Cta.mock.tsx
new file mode 100644
index 000000000..e92fea82c
--- /dev/null
+++ b/dashboard/components/cta/Cta.mock.tsx
@@ -0,0 +1,33 @@
+import { CtaProps } from './Cta';
+
+const base: CtaProps = {
+  title: 'Introducing Tailwarden',
+  description:
+    'Tailwarden is the cloud version of Komiser, which offers more features and insights',
+  action: (
+    <button className="flex items-center gap-2 rounded-lg bg-purple-500 px-4 py-2 text-white transition-colors hover:bg-purple-600">
+      <svg
+        width="18"
+        height="15"
+        viewBox="0 0 18 15"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M0.875 10.1319C0.875 12.203 2.55393 13.8819 4.625 13.8819H14C15.7259 13.8819 17.125 12.4828 17.125 10.7569C17.125 9.42181 16.2878 8.28228 15.1097 7.83466C15.2006 7.57559 15.25 7.29701 15.25 7.0069C15.25 5.62619 14.1307 4.5069 12.75 4.5069C12.4806 4.5069 12.2212 4.54951 11.9781 4.62835C11.4804 2.75906 9.77602 1.3819 7.75 1.3819C5.33375 1.3819 3.375 3.34065 3.375 5.7569C3.375 6.03458 3.40087 6.30623 3.45033 6.56956C1.95463 7.06248 0.875 8.47111 0.875 10.1319Z"
+          stroke="white"
+          stroke-width="1.25"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+      Discover Tailwarden
+    </button>
+  )
+};
+
+const mockCTaProps = {
+  base
+};
+
+export default mockCTaProps;
diff --git a/dashboard/components/cta/Cta.stories.tsx b/dashboard/components/cta/Cta.stories.tsx
new file mode 100644
index 000000000..0f996857a
--- /dev/null
+++ b/dashboard/components/cta/Cta.stories.tsx
@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import mockCtaProps from './Cta.mock';
+import Cta from './Cta';
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
+const meta: Meta<typeof Cta> = {
+  title: 'Komiser/Cta',
+  component: Cta,
+  tags: ['autodocs'],
+  argTypes: {
+    action: {
+      control: 'hidden'
+    }
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof Cta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
+export const Primary: Story = {
+  args: {
+    ...mockCtaProps.base
+  }
+};
diff --git a/dashboard/components/cta/Cta.test.tsx b/dashboard/components/cta/Cta.test.tsx
new file mode 100644
index 000000000..04177f9f4
--- /dev/null
+++ b/dashboard/components/cta/Cta.test.tsx
@@ -0,0 +1,27 @@
+import { render, screen } from '@testing-library/react';
+import { RefreshIcon } from '@components/icons';
+import Cta from './Cta';
+
+describe('Card', () => {
+  it('should render cta component without crashing', () => {
+    render(
+      <Cta
+        title="Introducing Tailwarden"
+        description="Tailwarden is the cloud version of Komiser, which offers more features and insights"
+        action={<RefreshIcon width={24} height={24} />}
+      />
+    );
+  });
+
+  it('should render the action', () => {
+    render(
+      <Cta
+        title="Introducing Tailwarden"
+        description="Tailwarden is the cloud version of Komiser, which offers more features and insights"
+        action={<RefreshIcon data-testid="action" width={24} height={24} />}
+      />
+    );
+    const action = screen.getByTestId('action');
+    expect(action).toBeInTheDocument();
+  });
+});
diff --git a/dashboard/components/cta/Cta.tsx b/dashboard/components/cta/Cta.tsx
new file mode 100644
index 000000000..9ee0fe8d3
--- /dev/null
+++ b/dashboard/components/cta/Cta.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import Image from 'next/image';
+
+export type CtaProps = {
+  title: string;
+  description: string;
+  action: React.ReactNode;
+};
+
+function Cta({ title, description, action }: CtaProps) {
+  return (
+    <div className="relative flex items-center justify-between gap-2 rounded-lg bg-white px-8 py-6 gradient-border border-[1px]  border-gray-200">
+      <div className="flex items-start flex-col gap-4">
+        <div className="flex flex-col gap-2">
+          <p className="text-gray-950 font-medium text-lg">{title}</p>
+          <p className="text-gray-700">{description}</p>
+        </div>
+        {action}
+      </div>
+      <Image
+        src="/assets/img/purplin/rocket.svg"
+        width={123}
+        height={128}
+        alt="Purplin thinking"
+        className="h-[128px] w-[123px]"
+      />
+    </div>
+  );
+}
+
+export default Cta;
diff --git a/dashboard/styles/globals.css b/dashboard/styles/globals.css
index 1578917f7..183a948a0 100644
--- a/dashboard/styles/globals.css
+++ b/dashboard/styles/globals.css
@@ -75,3 +75,10 @@
   padding-right: 16px;
   padding-left: 16px;
 }
+
+.gradient-border:hover {
+  background:
+    linear-gradient(white, white) padding-box,
+    linear-gradient(to top right, #a107ea, #5000b5) border-box;
+  border-color: transparent;
+}