# CLOCK-019: [Branding Inconsistency] Logo on /app and Loading Screen does not match main website logo

**Status:** deployed-to-dev
**Priority:** P2 (Medium)
**Reporter:** Zel
**Created:** 2026-02-18
**Assignee:** ARIA
**Environment:** DEV – https://clocklane.dev.apps.symph.co/app

## Description
The logo displayed on https://clocklane.com/app (including the Loading screen and pages triggered during refresh or first login) is inconsistent with the updated logo shown on the main website (https://clocklane.com/).

- **Marketing site:** Displays the updated Clocklane logo style
- **/app pages & Loading screen:** Still use the old version (red rounded square with "C")

## Impact
Brand inconsistency; does not block functionality but affects product polish and identity consistency.

## Solution Implemented (2026-07-14)

### Changes:
1. **Created `ClocklaneLogo.tsx`** — Reusable logo component with the official Clocklane logo mark (red C with clock hands)
2. **Updated `LoginPage.tsx`** — Uses ClocklaneLogo for login screen and loading state
3. **Updated `ClocklanePOS.tsx`** — Sidebar and mobile header now show ClocklaneLogo when no custom store logo is set

### Components Updated:
- `src/components/ClocklaneLogo.tsx` — New shared component
- `src/components/LoginPage.tsx` — Logo + loading screen
- `src/components/ClocklanePOS.tsx` — Sidebar fallback + mobile header

### Result:
All app screens now display the official Clocklane logo (red C with clock hands) matching the landing page branding.
