diff --git a/lib/components/link/external-link.stories.tsx b/lib/components/link/external-link.stories.tsx
new file mode 100644
index 0000000..c43cad4
--- /dev/null
+++ b/lib/components/link/external-link.stories.tsx
@@ -0,0 +1,32 @@
+import { Flex } from '@chakra-ui/layout';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import type { ExternalLinkProps } from './external-link';
+import { ExternalLink } from './external-link';
+
+const meta: Meta<typeof ExternalLink> = {
+  title: 'Primitives/ExternalLink',
+  tags: ['autodocs'],
+  component: ExternalLink,
+  args: {
+    label: 'External Link',
+    href: 'https://example.com',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ExternalLink>;
+
+const Component = (props: ExternalLinkProps) => {
+  return (
+    <Flex flexDir="column">
+      <ExternalLink fontSize="sm" {...props} />
+      <ExternalLink fontSize="sm" fontWeight="semibold" {...props} />
+      <ExternalLink {...props} />
+    </Flex>
+  );
+};
+
+export const Default: Story = {
+  render: Component,
+};
diff --git a/lib/components/link/external-link.tsx b/lib/components/link/external-link.tsx
index 409394e..65bc37b 100644
--- a/lib/components/link/external-link.tsx
+++ b/lib/components/link/external-link.tsx
@@ -6,10 +6,10 @@ import { Link } from '.';
 
 export type ExternalLinkProps = Omit<LinkProps, 'isExternal' | 'children'> & { label: string };
 
-export const ExternalLink = (props: ExternalLinkProps) => {
+export const ExternalLink = ({ label, ...rest }: ExternalLinkProps) => {
   return (
-    <Link href={props.href} isExternal>
-      {props.label}
+    <Link isExternal {...rest} display="flex" alignItems="center">
+      {label}
       <Icon display="inline" verticalAlign="middle" marginInlineStart={2} as={PiArrowSquareOutBold} />
     </Link>
   );