diff --git a/frontend/public/brand/apple-touch-icon.png b/frontend/public/brand/apple-touch-icon.png
new file mode 100644
index 0000000..d1be13c
Binary files /dev/null and b/frontend/public/brand/apple-touch-icon.png differ
diff --git a/frontend/public/brand/favicon-16.png b/frontend/public/brand/favicon-16.png
new file mode 100644
index 0000000..5f354cc
Binary files /dev/null and b/frontend/public/brand/favicon-16.png differ
diff --git a/frontend/public/brand/favicon-32.png b/frontend/public/brand/favicon-32.png
new file mode 100644
index 0000000..21c88de
Binary files /dev/null and b/frontend/public/brand/favicon-32.png differ
diff --git a/frontend/public/brand/logo.png b/frontend/public/brand/logo.png
new file mode 100644
index 0000000..04a4b96
Binary files /dev/null and b/frontend/public/brand/logo.png differ
diff --git a/frontend/public/index.html b/frontend/public/index.html
index b7c4d9e..7887319 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -2,11 +2,16 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <!-- Favicon & brand icons -->
+    <!-- Use PNG favicon for broad compatibility -->
+    <link rel="icon" type="image/png" href="%PUBLIC_URL%/brand/logo.png" />
+    <!-- Precise favicon sizes -->
+    <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/brand/favicon-32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/brand/favicon-16.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#059669" />
     <meta name="description" content="TurfTracking - Professional lawn care management and tracking application" />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/brand/apple-touch-icon.png" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     
     <!-- Google Fonts -->
diff --git a/frontend/public/manifest.json b/frontend/public/manifest.json
new file mode 100644
index 0000000..9da4cb7
--- /dev/null
+++ b/frontend/public/manifest.json
@@ -0,0 +1,20 @@
+{
+  "short_name": "TurfTracking",
+  "name": "TurfTracking",
+  "icons": [
+    {
+      "src": "/brand/logo.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "/brand/logo.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": "/",
+  "display": "standalone",
+  "theme_color": "#059669",
+  "background_color": "#ffffff"
+}
diff --git a/frontend/src/components/Layout/AuthLayout.js b/frontend/src/components/Layout/AuthLayout.js
index 7261c3d..251e454 100644
--- a/frontend/src/components/Layout/AuthLayout.js
+++ b/frontend/src/components/Layout/AuthLayout.js
@@ -20,7 +20,10 @@ const AuthLayout = ({ children }) => {
               />
             </svg>
           </div>
-          <h1 className="text-3xl font-bold text-gray-900 mb-2">TurfTracking</h1>
+          <div className="flex items-center gap-2 mb-2">
+            <img src="/brand/logo.png" alt="TurfTracking" className="h-8 w-8" />
+            <h1 className="text-3xl font-bold text-gray-900">TurfTracking</h1>
+          </div>
           <p className="text-lg text-gray-600">Professional Lawn Care Management</p>
         </div>
       </div>
diff --git a/frontend/src/components/Layout/Layout.js b/frontend/src/components/Layout/Layout.js
index a51d49b..e3fe3cb 100644
--- a/frontend/src/components/Layout/Layout.js
+++ b/frontend/src/components/Layout/Layout.js
@@ -145,7 +145,10 @@ const Layout = ({ children }) => {
             />
             <div className="fixed inset-y-0 left-0 flex w-64 flex-col bg-white shadow-xl">
               <div className="flex h-16 items-center justify-between px-6 border-b border-gray-200">
-                <h1 className="text-xl font-bold text-primary-600">TurfTracking</h1>
+                <div className="flex items-center gap-2">
+                  <img src="/brand/logo.png" alt="TurfTracking" className="h-6 w-6" />
+                  <h1 className="text-xl font-bold text-primary-600">TurfTracking</h1>
+                </div>
                 <button
                   type="button"
                   className="text-gray-400 hover:text-gray-600"
@@ -244,7 +247,10 @@ const Layout = ({ children }) => {
       <div className="hidden lg:fixed lg:inset-y-0 lg:flex lg:w-64 lg:flex-col">
         <div className="flex min-h-0 flex-1 flex-col bg-white border-r border-gray-200">
           <div className="flex h-16 items-center px-6 border-b border-gray-200">
-            <h1 className="text-xl font-bold text-primary-600">TurfTracking</h1>
+            <div className="flex items-center gap-2">
+              <img src="/brand/logo.png" alt="TurfTracking" className="h-6 w-6" />
+              <h1 className="text-xl font-bold text-primary-600">TurfTracking</h1>
+            </div>
           </div>
           
           <nav className="flex-1 space-y-1 px-4 py-6">
@@ -337,7 +343,10 @@ const Layout = ({ children }) => {
               <Bars3Icon className="h-6 w-6" />
             </button>
             
-            <h1 className="text-lg font-semibold text-gray-900">TurfTracking</h1>
+            <div className="flex items-center gap-2">
+              <img src="/brand/logo.png" alt="TurfTracking" className="h-5 w-5" />
+              <h1 className="text-lg font-semibold text-gray-900">TurfTracking</h1>
+            </div>
             
             <div className="flex items-center space-x-4">
               <button className="text-gray-400 hover:text-gray-500">
