diff --git a/src/stories/components/LogoIcon.stories.tsx b/src/stories/components/LogoIcon.stories.tsx
new file mode 100644
index 00000000..4eafe95f
--- /dev/null
+++ b/src/stories/components/LogoIcon.stories.tsx
@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { LargeLogo, SmallLogo } from '@views/components/common/LogoIcon';
+import React from 'react';
+
+const meta = {
+    title: 'Components/Common/Logo',
+    component: SmallLogo,
+    tags: ['autodocs'],
+} satisfies Meta<typeof SmallLogo>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Small: Story = {};
+
+export const Large: Story = {
+    render: args => <LargeLogo {...args} />,
+};
diff --git a/src/views/components/calendar/CalenderHeader.tsx b/src/views/components/calendar/CalenderHeader.tsx
index 7b91aa51..c159cdc7 100644
--- a/src/views/components/calendar/CalenderHeader.tsx
+++ b/src/views/components/calendar/CalenderHeader.tsx
@@ -51,7 +51,7 @@ export default function CalendarHeader({ onSidebarToggle }: CalendarHeaderProps)
                     totalCourses={activeSchedule.courses.length}
                 />
                 <div className='flex items-center gap-1 screenshot:hidden'>
-                    <Text variant='mini' className='text-nowrap text-ut-gray font-normal'>
+                    <Text variant='mini' className='text-nowrap text-ut-gray font-normal!'>
                         DATA LAST UPDATED: {getUpdatedAtDateTimeString(activeSchedule.updatedAt)}
                     </Text>
                     <button className='inline-block h-4 w-4 bg-transparent p-0 btn'>
diff --git a/src/views/components/common/LogoIcon.tsx b/src/views/components/common/LogoIcon.tsx
index 19ce6817..b2ca45ae 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{' '}
@@ -51,7 +51,7 @@ export function LargeLogo({ className }: { className?: string }): JSX.Element {
     return (
         <div className={clsx('flex items-center gap-2', className)}>
             <LogoIcon className='h-12 w-12' />
-            <div className='hidden flex-col text-[1.35rem] font-medium leading-[1em] md:flex screenshot:flex'>
+            <div className='hidden flex-col text-[1.35rem] font-medium leading-[1em] md:flex screenshot:flex mt-1'>
                 <p className='text-nowrap text-ut-burntorange'>UT Registration</p>
                 <p className='text-ut-burntorange'>
                     Plus{' '}