+ toggleCollapsed();
+ }
+
+ return (
+
diff --git a/apps/web/src/components/ui/mosaic-logo.tsx b/apps/web/src/components/ui/mosaic-logo.tsx
new file mode 100644
index 0000000..341d916
--- /dev/null
+++ b/apps/web/src/components/ui/mosaic-logo.tsx
@@ -0,0 +1,89 @@
+'use client';
+
+import type { CSSProperties } from 'react';
+
+export interface MosaicLogoProps {
+ size?: number;
+ spinning?: boolean;
+ spinDuration?: number;
+ className?: string;
+}
+
+export function MosaicLogo({
+ size = 36,
+ spinning = false,
+ spinDuration = 20,
+ className = '',
+}: MosaicLogoProps): React.JSX.Element {
+ const scale = size / 36;
+ const squareSize = Math.round(14 * scale);
+ const circleSize = Math.round(11 * scale);
+ const borderRadius = Math.round(3 * scale);
+
+ const animationValue = spinning
+ ? `mosaicLogoSpin ${String(spinDuration)}s linear infinite`
+ : undefined;
+
+ const containerStyle: CSSProperties = {
+ width: size,
+ height: size,
+ position: 'relative',
+ flexShrink: 0,
+ animation: animationValue,
+ transformOrigin: 'center',
+ };
+
+ const baseSquareStyle: CSSProperties = {
+ position: 'absolute',
+ width: squareSize,
+ height: squareSize,
+ borderRadius,
+ };
+
+ const circleStyle: CSSProperties = {
+ position: 'absolute',
+ top: '50%',
+ left: '50%',
+ transform: 'translate(-50%, -50%)',
+ width: circleSize,
+ height: circleSize,
+ borderRadius: '50%',
+ background: 'var(--ms-pink-500)',
+ };
+
+ return (
+ <>
+ {spinning ? (
+
+ ) : null}
+
+
+ );
+}
+
+export default MosaicLogo;
diff --git a/apps/web/src/providers/theme-provider.tsx b/apps/web/src/providers/theme-provider.tsx
new file mode 100644
index 0000000..3b2b501
--- /dev/null
+++ b/apps/web/src/providers/theme-provider.tsx
@@ -0,0 +1,62 @@
+'use client';
+
+import { createContext, useContext, useEffect, useMemo, useState, type ReactNode } from 'react';
+
+export type Theme = 'dark' | 'light';
+
+interface ThemeContextValue {
+ theme: Theme;
+ toggleTheme: () => void;
+ setTheme: (theme: Theme) => void;
+}
+
+const STORAGE_KEY = 'mosaic-theme';
+const ThemeContext = createContext
(undefined);
+
+function getInitialTheme(): Theme {
+ if (typeof document === 'undefined') {
+ return 'dark';
+ }
+
+ return document.documentElement.getAttribute('data-theme') === 'light' ? 'light' : 'dark';
+}
+
+export function ThemeProvider({ children }: { children: ReactNode }): React.JSX.Element {
+ const [theme, setThemeState] = useState(getInitialTheme);
+
+ useEffect(() => {
+ document.documentElement.setAttribute('data-theme', theme);
+ window.localStorage.setItem(STORAGE_KEY, theme);
+ }, [theme]);
+
+ useEffect(() => {
+ const storedTheme = window.localStorage.getItem(STORAGE_KEY);
+ if (storedTheme === 'light' || storedTheme === 'dark') {
+ setThemeState(storedTheme);
+ return;
+ }
+
+ document.documentElement.setAttribute('data-theme', 'dark');
+ }, []);
+
+ const value = useMemo(
+ () => ({
+ theme,
+ toggleTheme: () => setThemeState((current) => (current === 'dark' ? 'light' : 'dark')),
+ setTheme: (nextTheme) => setThemeState(nextTheme),
+ }),
+ [theme],
+ );
+
+ return {children};
+}
+
+export function useTheme(): ThemeContextValue {
+ const context = useContext(ThemeContext);
+
+ if (!context) {
+ throw new Error('useTheme must be used within ThemeProvider');
+ }
+
+ return context;
+}