diff --git a/components/layout/app-top-bar.tsx b/components/layout/app-top-bar.tsx
index edf0bce..e134cb0 100644
--- a/components/layout/app-top-bar.tsx
+++ b/components/layout/app-top-bar.tsx
@@ -2,6 +2,7 @@
import { usePathname } from "next/navigation";
+import { HabitBrand } from "@/components/layout/habit-brand";
import { HomeLogoLink } from "@/components/layout/home-logo-link";
import { routes } from "@/lib/routes";
import { cn } from "@/lib/utils";
@@ -25,11 +26,12 @@ export function AppTopBar({ className }: AppTopBarProps) {
paddingTop: "env(safe-area-inset-top, 0px)",
}}
>
-
+
+
);
diff --git a/components/layout/habit-brand.tsx b/components/layout/habit-brand.tsx
new file mode 100644
index 0000000..4ff6d16
--- /dev/null
+++ b/components/layout/habit-brand.tsx
@@ -0,0 +1,42 @@
+"use client";
+
+import { useState } from "react";
+
+import { cn } from "@/lib/utils";
+
+const HABIT_LOGO_SRC = "/habit-logo.png";
+
+type HabitBrandProps = {
+ className?: string;
+};
+
+export function HabitBrand({ className }: HabitBrandProps) {
+ const [useText, setUseText] = useState(false);
+
+ return (
+
+ {!useText ? (
+ // eslint-disable-next-line @next/next/no-img-element
+

setUseText(true)}
+ />
+ ) : (
+
+ HaBit
+
+ )}
+
+ );
+}