diff --git a/RestroHub-FrontEnd/favicon.svg b/RestroHub-FrontEnd/favicon.svg
new file mode 100644
index 0000000..a46a564
--- /dev/null
+++ b/RestroHub-FrontEnd/favicon.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <rect width="32" height="32" rx="6" fill="#E85D26"/>
+  <rect x="4" y="4" width="9" height="9" rx="1.5" fill="white"/>
+  <rect x="6" y="6" width="5" height="5" rx="0.5" fill="#E85D26"/>
+  <rect x="19" y="4" width="9" height="9" rx="1.5" fill="white"/>
+  <rect x="21" y="6" width="5" height="5" rx="0.5" fill="#E85D26"/>
+  <rect x="4" y="19" width="9" height="9" rx="1.5" fill="white"/>
+  <rect x="6" y="21" width="5" height="5" rx="0.5" fill="#E85D26"/>
+  <rect x="19" y="19" width="4" height="4" rx="0.5" fill="white"/>
+  <rect x="24" y="19" width="4" height="4" rx="0.5" fill="white"/>
+  <rect x="19" y="24" width="4" height="4" rx="0.5" fill="white"/>
+  <rect x="24" y="24" width="4" height="4" rx="0.5" fill="white"/>
+  <rect x="14" y="4" width="2" height="2" rx="0.5" fill="white"/>
+  <rect x="14" y="8" width="2" height="5" rx="0.5" fill="white"/>
+  <rect x="4" y="14" width="9" height="2" rx="0.5" fill="white"/>
+  <rect x="14" y="14" width="2" height="2" rx="0.5" fill="white"/>
+</svg>
diff --git a/RestroHub-FrontEnd/index.html b/RestroHub-FrontEnd/index.html
index 8960357..1a27ba3 100644
--- a/RestroHub-FrontEnd/index.html
+++ b/RestroHub-FrontEnd/index.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Restroly</title>
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Montserrat:wght@300;400;500;600&display=swap" rel="stylesheet">
@@ -15,3 +16,6 @@
     <script type="module" src="src/index.jsx"></script>
 </body>
 </html>
+
+
+
diff --git a/RestroHub-FrontEnd/logo.svg b/RestroHub-FrontEnd/logo.svg
new file mode 100644
index 0000000..6ba3dc5
--- /dev/null
+++ b/RestroHub-FrontEnd/logo.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 50">
+  <rect width="42" height="42" rx="8" fill="#E85D26" y="4"/>
+  <rect x="5" y="9" width="12" height="12" rx="2" fill="white"/>
+  <rect x="7" y="11" width="8" height="8" rx="1" fill="#E85D26"/>
+  <rect x="25" y="9" width="12" height="12" rx="2" fill="white"/>
+  <rect x="27" y="11" width="8" height="8" rx="1" fill="#E85D26"/>
+  <rect x="5" y="29" width="12" height="12" rx="2" fill="white"/>
+  <rect x="7" y="31" width="8" height="8" rx="1" fill="#E85D26"/>
+  <rect x="25" y="29" width="5" height="5" rx="1" fill="white"/>
+  <rect x="32" y="29" width="5" height="5" rx="1" fill="white"/>
+  <rect x="25" y="36" width="5" height="5" rx="1" fill="white"/>
+  <rect x="32" y="36" width="5" height="5" rx="1" fill="white"/>
+  <rect x="19" y="9" width="3" height="3" rx="0.5" fill="white"/>
+  <rect x="19" y="13" width="3" height="8" rx="0.5" fill="white"/>
+  <rect x="5" y="22" width="14" height="3" rx="0.5" fill="white"/>
+  <rect x="19" y="22" width="3" height="3" rx="0.5" fill="white"/>
+  <text x="50" y="33" font-family="system-ui,-apple-system,sans-serif" font-size="22" font-weight="700" fill="#E85D26" letter-spacing="-0.5">Restroly</text>
+</svg>
diff --git a/RestroHub-FrontEnd/src/pages/public/Landing.jsx b/RestroHub-FrontEnd/src/pages/public/Landing.jsx
index 29145a9..6401b2c 100644
--- a/RestroHub-FrontEnd/src/pages/public/Landing.jsx
+++ b/RestroHub-FrontEnd/src/pages/public/Landing.jsx
@@ -42,10 +42,8 @@ const Landing = () => {
 
 
   const { isDark, toggle } = useTheme();
-  // ============================
-  // DATA
-  // ============================
-  const navLinks = [
+  // =====================  // DATA
+  // =====================  const navLinks = [
     { label: 'Features', href: '#features' },
     { label: 'How It Works', href: '#how-it-works' },
     { label: 'Pricing', href: '#pricing' },
@@ -259,10 +257,8 @@ const [contactForm, setContactForm] = useState({
     { value: '4.9', label: 'App Rating' },
   ];
 
-  // ============================
-  // RENDER
-  // ============================
-  return (
+  // =====================  // RENDER
+  // =====================  return (
     <div className="min-h-screen bg-white dark:bg-slate-900 dark:text-slate-100">