diff --git a/packages/ui/components/logo/Logo.tsx b/packages/ui/components/logo/Logo.tsx
index 872e9ffb9c..1f8d301687 100644
--- a/packages/ui/components/logo/Logo.tsx
+++ b/packages/ui/components/logo/Logo.tsx
@@ -5,23 +5,25 @@ export default function Logo({
   icon,
   inline = true,
   className,
+  src = "/api/logo",
 }: {
   small?: boolean;
   icon?: boolean;
   inline?: boolean;
   className?: string;
+  src?: string;
 }) {
   return (
     <h3 className={classNames("logo", inline && "inline", className)}>
       <strong>
         {icon ? (
-          <img className="mx-auto w-9 dark:invert" alt="Cal" title="Cal" src="/api/logo?type=icon" />
+          <img className="mx-auto w-9 dark:invert" alt="Cal" title="Cal" src={`${src}?type=icon`} />
         ) : (
           <img
             className={classNames(small ? "h-4 w-auto" : "h-5 w-auto", "dark:invert")}
             alt="Cal"
             title="Cal"
-            src="/api/logo"
+            src={src}
           />
         )}
       </strong>
diff --git a/packages/ui/components/logo/logo.stories.mdx b/packages/ui/components/logo/logo.stories.mdx
index 4cd54ee5d6..2da4324560 100644
--- a/packages/ui/components/logo/logo.stories.mdx
+++ b/packages/ui/components/logo/logo.stories.mdx
@@ -1,9 +1,8 @@
-import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
+import { Canvas, Meta, Story } from "@storybook/addon-docs";
 
 import {
   Examples,
   Example,
-  Note,
   Title,
   CustomArgsTable,
   VariantsTable,
@@ -14,7 +13,7 @@ import Logo from "./Logo";
 
 <Meta title="UI/Logo" component={Logo} />
 
-<Title title="Logo" suffix="Brief" subtitle="Version 2.0 — Last Update: 02 Jan 2023" />
+<Title title="Logo" suffix="Brief" subtitle="Version 2.0 — Last Update: 28 Aug 2023" />
 
 ## Definition
 
@@ -22,15 +21,34 @@ Main Cal.com brand logo
 
 <CustomArgsTable of={Logo} />
 
+## Examples
+
+<Examples>
+  <Example title="Default">
+    <Logo src={"https://app.cal.com/api/logo"} />
+  </Example>
+  <Example title="Small">
+    <Logo src={"https://app.cal.com/api/logo"} small />
+  </Example>
+  <Example title="As an Icon">
+    <Logo src={"https://app.cal.com/api/logo"} icon />
+  </Example>
+</Examples>
+
 <Canvas>
-  <Story name="Logo">
-    <VariantsTable titles={[""]} columnMinWidth={150}>
-      <VariantRow variant="Small">
-        <Logo small />
-      </VariantRow>
-      <VariantRow variant="Default">
-        <Logo />
-      </VariantRow>
-    </VariantsTable>
+  <Story
+    name="Logo"
+    args={{
+      icon: false,
+      src: "https://app.cal.com/api/logo",
+      small: false,
+    }}>
+    {(args) => (
+      <VariantsTable titles={[""]} columnMinWidth={150}>
+        <VariantRow>
+          <Logo {...args} />
+        </VariantRow>
+      </VariantsTable>
+    )}
   </Story>
 </Canvas>