diff --git a/src/shared/ui/Logo/Logo.stories.svelte b/src/shared/ui/Logo/Logo.stories.svelte
new file mode 100644
index 0000000..28ecda6
--- /dev/null
+++ b/src/shared/ui/Logo/Logo.stories.svelte
@@ -0,0 +1,21 @@
+<script module>
+import { defineMeta } from '@storybook/addon-svelte-csf';
+import Logo from './Logo.svelte';
+
+const { Story } = defineMeta({
+    title: 'Shared/Logo',
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: 'Projec Logo',
+            },
+            story: { inline: false }, // Render stories in iframe for state isolation
+        },
+    },
+});
+</script>
+
+<Story name="Default">
+    <Logo />
+</Story>
diff --git a/src/shared/ui/Logo/Logo.svelte b/src/shared/ui/Logo/Logo.svelte
new file mode 100644
index 0000000..bf73bcc
--- /dev/null
+++ b/src/shared/ui/Logo/Logo.svelte
@@ -0,0 +1,19 @@
+<!--
+    Component: Logo
+    Project logo with apropriate styles
+-->
+<script lang="ts">
+import { cn } from '$shared/shadcn/utils/shadcn-utils';
+
+interface Props {
+    class?: string;
+}
+
+const { class: className }: Props = $props();
+
+const baseClasses =
+    'font-[Barlow] font-thin text-5xl sm:text-6xl md:text-7xl lg:text-8xl text-justify [text-align-last:justify] [text-justify:inter-character]';
+</script>
+<h2 class={cn(baseClasses, className)}>
+    GLYPHDIFF
+</h2>