diff --git a/src/templates/onboarding-suremail-connet/onboarding-suremail-connect.stories.jsx b/src/templates/onboarding-suremail-connet/onboarding-suremail-connect.stories.jsx
new file mode 100644
index 00000000..4fc307c5
--- /dev/null
+++ b/src/templates/onboarding-suremail-connet/onboarding-suremail-connect.stories.jsx
@@ -0,0 +1,304 @@
+import { ChevronLeft, ChevronRight, X } from 'lucide-react';
+import {
+ Topbar,
+ Button,
+ Label,
+ RadioButton,
+ ProgressSteps,
+ Badge,
+ Title,
+} from '@/components';
+import { SureEmailLogo, Gmail, PepiPost, MailJet, ElasticEmail, SparkPost, Brevo, Mailgun, SendGrid, PostMark, Amazon, AnySMTP, Microsoft, ZohoMail } from '@/ui/icons';
+
+export default {
+ title: 'Templates/Onboarding/SureMail Connect',
+ parameters: {
+ layout: 'fullscreen',
+ },
+ tags: [ 'autodocs' ],
+};
+
+const Template = ( args ) => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ }
+ iconPosition="right"
+ variant="ghost"
+ size="xs"
+ >
+ Exit Guided Setup
+
+
+
+
+
+
+ );
+};
+
+export const SureMailConnect = Template.bind( {} );
+SureMailConnect.args = {};
+
+SureMailConnect.storyName = 'SureMailConnect';
diff --git a/src/ui/icons.jsx b/src/ui/icons.jsx
index c1260298..9ec8cb16 100644
--- a/src/ui/icons.jsx
+++ b/src/ui/icons.jsx
@@ -616,3 +616,421 @@ export const EmailSetup = (props) => (
/>
);
+
+export const Gmail = (props) => (
+
+);
+
+export const AnySMTP = (props) => (
+
+);
+
+export const Amazon = (props) => (
+
+);
+
+export const PostMark = (props) => (
+
+);
+
+export const SendGrid = (props) => (
+
+);
+
+export const Mailgun = (props) => (
+
+);
+
+export const Brevo = (props) => (
+
+);
+
+export const SparkPost = (props) => (
+
+);
+
+export const ElasticEmail = (props) => (
+
+);
+
+export const PepiPost = (props) => (
+
+);
+
+export const MailJet = (props) => (
+
+);
+
+export const Microsoft = (props) => (
+
+);
+
+export const ZohoMail = (props) => (
+
+);