diff --git a/packages/blade/.storybook/react/manager-head.html b/packages/blade/.storybook/react/manager-head.html
index 81570b22d60..54f0f21b83a 100644
--- a/packages/blade/.storybook/react/manager-head.html
+++ b/packages/blade/.storybook/react/manager-head.html
@@ -12,6 +12,7 @@
     --blade-surface-text-normal: rgba(19, 38, 68, 1);
     --blade-brand-gray: rgba(121, 135, 156, 0.18);
     --blade-brand-gray-light: rgba(121, 135, 156, 0.08);
+    --blade-border-color: #EFEFEF;
   }
 
   .search-field input {
@@ -56,4 +57,9 @@
   .sto-1va4tas {
     box-shadow: none !important;
   }
+
+  .sto-rmwe9s {
+    box-shadow: none !important;
+    border-bottom: 1px solid var(--blade-border-color) !important;
+  }
 </style>
\ No newline at end of file
diff --git a/packages/blade/docs/guides/Intro.stories.mdx b/packages/blade/docs/guides/Intro.stories.mdx
index e20fd7ed436..25044d4e0ef 100644
--- a/packages/blade/docs/guides/Intro.stories.mdx
+++ b/packages/blade/docs/guides/Intro.stories.mdx
@@ -4,6 +4,7 @@ import { Meta } from '@storybook/addon-docs';
 
 <p style={{ textAlign: 'center' }}>
   <img
+    height="80px"
     width="300px"
     alt="Blade Design System Logo"
     src="https://raw.githubusercontent.com/razorpay/blade/00a200a8f53c1abff99d81a73fbdcbd12a6d0dca/branding/blade-original.min.svg"
diff --git a/packages/blade/src/utils/storybook/StoryPageWrapper.tsx b/packages/blade/src/utils/storybook/StoryPageWrapper.tsx
index 0f055235e0e..85c663eb144 100644
--- a/packages/blade/src/utils/storybook/StoryPageWrapper.tsx
+++ b/packages/blade/src/utils/storybook/StoryPageWrapper.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { ArgsTable, Primary, PRIMARY_STORY, Stories, Subtitle, Title } from '@storybook/addon-docs';
+import { ArgsTable, Primary, PRIMARY_STORY, Stories } from '@storybook/addon-docs';
 import styled from 'styled-components';
 import useMakeFigmaURL from './useMakeFigmaURL';
 import FigmaEmbed from './FigmaEmbed';
@@ -11,10 +11,15 @@ import { BladeProvider } from '~components/BladeProvider';
 import { paymentTheme } from '~tokens/theme';
 import { Box } from '~components/Box';
 import { Link } from '~components/Link';
-import { Title as BladeTitle, Text, Heading } from '~components/Typography';
+import type { HeadingProps } from '~components/Typography';
+import { Title, Text, Heading } from '~components/Typography';
 import { Badge } from '~components/Badge';
 import { AnnouncementIcon } from '~components/Icons';
 
+const Subtitle = (props: HeadingProps<{ variant: 'regular' }>): React.ReactElement => {
+  return <Heading type="subtle" size="large" weight="regular" as="span" {...props} />;
+};
+
 type StoryPageWrapperTypes = {
   figmaURL?: {
     paymentTheme: string;
@@ -90,98 +95,100 @@ const StoryPageWrapper = (props: StoryPageWrapperTypes): React.ReactElement => {
   const { showStorybookControls = true, showArgsTable = true } = props;
 
   return (
-    <WithGlobalStyles>
-      <BladeTitle size="xlarge" marginBottom="spacing.3">
-        {props.componentName}
-      </BladeTitle>
-      <Box marginBottom="spacing.4" paddingLeft="spacing.1">
-        <Heading type="subtle" size="large" weight="regular" as="span">
-          {props.componentDescription}
-        </Heading>
-      </Box>
-      {componentMetaInfo?.releasedIn ? (
-        <Box paddingBottom="spacing.6" paddingLeft="spacing.1">
-          <a
-            href={`https://github.com/razorpay/blade/releases/tag/%40razorpay%2Fblade%40${componentMetaInfo.releasedIn}`}
-            target="_blank"
-            rel="noreferrer"
-          >
-            <Badge color="default" fontWeight="bold" size="large" icon={AnnouncementIcon}>
-              Release: v{componentMetaInfo.releasedIn}
-            </Badge>
-          </a>
+    <BladeProvider themeTokens={paymentTheme}>
+      <WithGlobalStyles>
+        <Title size="xlarge" marginBottom="spacing.3">
+          {props.componentName}
+        </Title>
+        <Box marginBottom="spacing.4" paddingLeft="spacing.1">
+          <Heading type="subtle" size="large" weight="regular" as="span">
+            {props.componentDescription}
+          </Heading>
         </Box>
-      ) : null}
-      {props.note ? (
-        <Alert
-          description={props.note}
-          isFullWidth
-          isDismissible={false}
-          intent="notice"
-          marginBottom="spacing.5"
-        />
-      ) : null}
-      {figmaURL !== '#' ? (
-        <FigmaEmbed src={figmaURL} title={`${props.componentName} Figma Designs`} />
-      ) : null}
-      <BladeProvider themeTokens={paymentTheme}>{props.children}</BladeProvider>
-      {props.imports === '' ? null : (
-        <>
-          <Title>Imports</Title>
-          <SandboxHighlighter showLineNumbers={false} showTabs={false}>
-            {props.imports
-              ? props.imports
-              : `import { ${props.componentName} } from '@razorpay/blade/components';\nimport type { ${props.componentName}Props } from '@razorpay/blade/components';`}
-          </SandboxHighlighter>
-          <br />
-          <br />
-        </>
-      )}
-      {showStorybookControls ? (
-        <>
-          <Title>Example</Title>
-          <Subtitle>
-            {`This is the default ${props.componentName}. You can change the properties using the controls below.`}
-          </Subtitle>
-          <Primary />
-          {showArgsTable ? (
-            <>
-              <BaseBox id="properties-ref">
-                <Title>Properties</Title>
-                {props.apiDecisionLink === '' || props.apiDecisionLink === null ? null : (
-                  <Text marginY="spacing.5">
-                    Check out{' '}
-                    <Link
-                      target="_blank"
-                      href={
-                        props.apiDecisionLink ??
-                        `https://github.com/razorpay/blade/blob/master/packages/blade/src/components/${props.componentName}/_decisions/decisions.md`
-                      }
-                    >
-                      API Decisions for {props.componentName}
-                    </Link>
-                  </Text>
-                )}
-                {props.propsDescription ? (
-                  // adding box with surface background so that when theme of storybook is changed, the alert doesn't become invisible
-                  <Box backgroundColor="surface.background.level3.lowContrast">
-                    <Alert
-                      isFullWidth
-                      marginTop="spacing.5"
-                      isDismissible={false}
-                      description={props.propsDescription}
-                    />
-                  </Box>
-                ) : null}
-              </BaseBox>
-              <ArgsTable story={PRIMARY_STORY} />
-            </>
-          ) : null}
+        {componentMetaInfo?.releasedIn ? (
+          <Box paddingBottom="spacing.6" paddingLeft="spacing.1">
+            <a
+              href={`https://github.com/razorpay/blade/releases/tag/%40razorpay%2Fblade%40${componentMetaInfo.releasedIn}`}
+              target="_blank"
+              rel="noreferrer"
+            >
+              <Badge color="default" fontWeight="bold" size="large" icon={AnnouncementIcon}>
+                Release: v{componentMetaInfo.releasedIn}
+              </Badge>
+            </a>
+          </Box>
+        ) : null}
+        {props.note ? (
+          <Alert
+            description={props.note}
+            isFullWidth
+            isDismissible={false}
+            intent="notice"
+            marginBottom="spacing.5"
+          />
+        ) : null}
+        {figmaURL !== '#' ? (
+          <FigmaEmbed src={figmaURL} title={`${props.componentName} Figma Designs`} />
+        ) : null}
+        {props.children}
+        {props.imports === '' ? null : (
+          <>
+            <Title size="large">Imports</Title>
+            <SandboxHighlighter showLineNumbers={false} showTabs={false}>
+              {props.imports
+                ? props.imports
+                : `import { ${props.componentName} } from '@razorpay/blade/components';\nimport type { ${props.componentName}Props } from '@razorpay/blade/components';`}
+            </SandboxHighlighter>
+            <br />
+            <br />
+          </>
+        )}
+        {showStorybookControls ? (
+          <>
+            <Title size="large">Example</Title>
+            <Subtitle size="medium" marginY="spacing.4">
+              {`This is the default ${props.componentName}. You can change the properties using the controls below.`}
+            </Subtitle>
+            <Primary />
+            {showArgsTable ? (
+              <>
+                <BaseBox id="properties-ref">
+                  <Title size="large">Properties</Title>
+                  {props.apiDecisionLink === '' || props.apiDecisionLink === null ? null : (
+                    <Text marginY="spacing.5">
+                      Check out{' '}
+                      <Link
+                        target="_blank"
+                        href={
+                          props.apiDecisionLink ??
+                          `https://github.com/razorpay/blade/blob/master/packages/blade/src/components/${props.componentName}/_decisions/decisions.md`
+                        }
+                      >
+                        API Decisions for {props.componentName}
+                      </Link>
+                    </Text>
+                  )}
+                  {props.propsDescription ? (
+                    // adding box with surface background so that when theme of storybook is changed, the alert doesn't become invisible
+                    <Box backgroundColor="surface.background.level3.lowContrast">
+                      <Alert
+                        isFullWidth
+                        marginTop="spacing.5"
+                        isDismissible={false}
+                        description={props.propsDescription}
+                      />
+                    </Box>
+                  ) : null}
+                </BaseBox>
+                <ArgsTable story={PRIMARY_STORY} />
+              </>
+            ) : null}
 
-          <Stories />
-        </>
-      ) : null}
-    </WithGlobalStyles>
+            <Stories />
+          </>
+        ) : null}
+      </WithGlobalStyles>
+    </BladeProvider>
   );
 };