diff --git a/src/stories/components/LogoIcon.stories.tsx b/src/stories/components/LogoIcon.stories.tsx
new file mode 100644
index 00000000..12b8b498
--- /dev/null
+++ b/src/stories/components/LogoIcon.stories.tsx
@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SmallLogo, LargeLogo } from '@views/components/common/LogoIcon'; // Adjust the path as necessary
+
+const meta = {
+    title: 'Components/Common/Logo',
+    component: SmallLogo,
+    tags: ['autodocs'],
+    argTypes: {
+        className: { control: 'text' },
+    },
+} satisfies Meta<typeof SmallLogo>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Small: Story = {
+    args: {
+        className: '',
+    },
+};
+
+export const Large: Story = {
+    render: args => <LargeLogo {...args} />,
+    args: {
+        className: '',
+    },
+};
diff --git a/src/views/components/common/LogoIcon.tsx b/src/views/components/common/LogoIcon.tsx
index 19ce6817..0c343d89 100644
--- a/src/views/components/common/LogoIcon.tsx
+++ b/src/views/components/common/LogoIcon.tsx
@@ -28,7 +28,7 @@ export function SmallLogo({ className }: { className?: string }): JSX.Element {
     return (
         <div className={clsx('flex items-center gap-2', className)}>
             <LogoIcon />
-            <div className='flex flex-col text-lg font-medium leading-[1em]'>
+            <div className='flex flex-col text-lg font-medium leading-[1em] mt-1'>
                 <p className='text-nowrap text-ut-burntorange'>UT Registration</p>
                 <p className='text-ut-burntorange'>
                     Plus{' '}