client/src/App.css

@@ -36,6 +36,14 @@
   color: var(--primary-light);
 }
 
+/* Custom logo image sizing */
+.brand-logo {
+  height: 2.5rem;
+  width: auto;
+  object-fit: contain;
+  display: block;
+}
+
 .brand-icon {
   display: flex;
   align-items: center;
@@ -47,9 +55,10 @@
   box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
 }
 
+/* Title gradient: medium-dark gold → rusty dark red-gold */
 .brand-text {
   letter-spacing: -0.025em;
-  background: linear-gradient(135deg, var(--primary-light) 0%, var(--accent) 100%);
+  background: linear-gradient(135deg, #c9940a 0%, #b5620a 50%, #8b2500 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
@@ -99,6 +108,10 @@
     font-size: 1.25rem;
   }
   
+  .brand-logo {
+    height: 2rem;
+  }
+
   .brand-icon {
     width: 2rem;
     height: 2rem;

client/src/App.jsx

@@ -1,5 +1,5 @@
 import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'
-import { Dog, Home, Users, Activity, Heart, BookOpen } from 'lucide-react'
+import { Home, Users, Activity, Heart } from 'lucide-react'
 import Dashboard from './pages/Dashboard'
 import DogList from './pages/DogList'
 import DogDetail from './pages/DogDetail'
@@ -15,7 +15,11 @@ function App() {
         <nav className="navbar">
           <div className="container">
             <div className="nav-brand">
-              <Dog size={32} />
+              <img
+                src="/static/br-logo.png"
+                alt="BREEDR Logo"
+                className="brand-logo"
+              />
               <span className="brand-text">BREEDR</span>
             </div>
             <div className="nav-links">

client/vite.config.js

@@ -13,6 +13,10 @@ export default defineConfig({
       '/uploads': {
         target: 'http://localhost:3000',
         changeOrigin: true
+      },
+      '/static': {
+        target: 'http://localhost:3000',
+        changeOrigin: true
       }
     }
   },

server/index.js

@@ -9,6 +9,7 @@ const app = express();
 const PORT = process.env.PORT || 3000;
 const DB_PATH = process.env.DB_PATH || path.join(__dirname, '../data/breedr.db');
 const UPLOAD_PATH = process.env.UPLOAD_PATH || path.join(__dirname, '../uploads');
+const STATIC_PATH = process.env.STATIC_PATH || path.join(__dirname, '../static');
 
 // Ensure directories exist
 const dataDir = path.dirname(DB_PATH);
@@ -18,6 +19,9 @@ if (!fs.existsSync(dataDir)) {
 if (!fs.existsSync(UPLOAD_PATH)) {
   fs.mkdirSync(UPLOAD_PATH, { recursive: true });
 }
+if (!fs.existsSync(STATIC_PATH)) {
+  fs.mkdirSync(STATIC_PATH, { recursive: true });
+}
 
 // Initialize database schema (creates tables if they don't exist)
 console.log('Initializing database...');
@@ -32,8 +36,9 @@ app.use(cors());
 app.use(express.json());
 app.use(express.urlencoded({ extended: true }));
 
-// Static file serving for uploads
+// Static file serving
 app.use('/uploads', express.static(UPLOAD_PATH));
+app.use('/static', express.static(STATIC_PATH));
 
 // API Routes
 app.use('/api/dogs', require('./routes/dogs'));
@@ -74,6 +79,7 @@ app.listen(PORT, '0.0.0.0', () => {
   console.log(`Port: ${PORT}`);
   console.log(`Database: ${DB_PATH}`);
   console.log(`Uploads: ${UPLOAD_PATH}`);
+  console.log(`Static: ${STATIC_PATH}`);
   console.log(`Access: http://localhost:${PORT}`);
   console.log(`==============================\n`);
 });

static/.gitkeep

@@ -0,0 +1,3 @@
+# Drop branding assets here (e.g. br-logo.png).
+# This file exists only to track the directory in git.
+# Files in this folder are served at /static/<filename>.