diff --git a/static/css/main.css b/static/css/main.css
index 7674c82..ec69d39 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -240,4 +240,92 @@
             .carousel-item { width: 85%; }
             .section-header { flex-direction: column; align-items: flex-start; gap: 1rem; }
         }
-    
\ No newline at end of file
+    
+
+
+        /* css for logo */
+
+        .logo-wrapper {
+        --logo-scale: 0.35; 
+        font-size: calc(40px * var(--logo-scale));
+        display: inline-flex;
+        flex-direction: row; 
+        align-items: center; 
+        gap: 0.8em;
+        color: #132238; 
+        text-decoration: none;
+         direction: ltr;
+    }
+
+    /* Refined Geometry */
+    .logo-wrapper {
+        --t: 0.52em;       
+        --gap: 0.42em;     
+        --width: 3.2em;    
+        --r: 0.85em;
+        /* Width of the text block - adjust this to make text wider/narrower */
+        --text-width: 3.5em; 
+    }
+
+    /* --- SYMBOL CONSTRUCTION --- */
+    .symbol {
+        position: relative;
+        width: var(--width);
+        height: calc((var(--t) * 4) + (var(--gap) * 3));
+        flex-shrink: 0;
+    }
+
+    .b { position: absolute; background: currentColor; }
+    .top-left { top: 0; left: 0; width: 0.80em; height: var(--t); }
+    .top-right { top: 0; right: 0; width: 1.88em; height: var(--t); }
+    .middle { top: calc(var(--t) + var(--gap)); left: 0; width: 100%; height: var(--t); }
+    .stem { top: calc(var(--t) + var(--gap)); bottom: 0; left: 0.80em; width: var(--t); }
+    .inner { top: calc((var(--t) * 2) + (var(--gap) * 2)); right: 0; width: 1.65em; height: var(--t); }
+    .bottom-base { bottom: 0; left: 0; right: var(--r); height: var(--t); }
+    .right-wall { top: calc((var(--t) * 2) + (var(--gap) * 2)); bottom: var(--r); right: 0; width: var(--t); }
+
+    .corner-arc {
+        position: absolute;
+        bottom: 0; right: 0;
+        width: var(--r); height: var(--r);
+        border-bottom: var(--t) solid currentColor;
+        border-right: var(--t) solid currentColor;
+        border-bottom-right-radius: var(--r);
+        box-sizing: border-box;
+    }
+
+    /* --- STRETCHED TEXT GROUP --- */
+    .brand-text {
+        display: flex;
+        flex-direction: column;
+        width: var(--text-width); /* Fixed width for both to fill */
+        align-items: stretch;
+    }
+
+    .arabic {
+        font-family: 'Cairo', sans-serif;
+        font-size: 0.9em; /* Larger to feel balanced with English height */
+        font-weight: 800;
+        line-height: 1;
+        text-align: justify;
+        text-align-last: justify; /* Stretches the Arabic characters */
+        width: 100%;
+        margin-bottom: 0.4em;
+        direction: rtl;
+    }
+
+    .english {
+        font-family: 'Inter', sans-serif;
+        font-size: 0.8em; /* Smaller font stretched wide looks more premium */
+        font-weight: 700;
+        text-transform: uppercase;
+        display: flex;
+        justify-content: space-between; /* Stretches English letters to edges */
+        width: 100%;
+        line-height: 1;
+        direction: ltr;
+    }
+
+    @media (max-width: 768px) {
+        .logo-wrapper { --logo-scale: 0.25; }
+    }
\ No newline at end of file
diff --git a/static/images/android-chrome-192x192.png b/static/images/android-chrome-192x192.png
index 4a0af6a..710eee0 100644
Binary files a/static/images/android-chrome-192x192.png and b/static/images/android-chrome-192x192.png differ
diff --git a/static/images/android-chrome-512x512.png b/static/images/android-chrome-512x512.png
index 4bae178..b2c9b28 100644
Binary files a/static/images/android-chrome-512x512.png and b/static/images/android-chrome-512x512.png differ
diff --git a/static/images/apple-touch-icon.png b/static/images/apple-touch-icon.png
index 80678fc..b401da8 100644
Binary files a/static/images/apple-touch-icon.png and b/static/images/apple-touch-icon.png differ
diff --git a/static/images/favicon-16x16.png b/static/images/favicon-16x16.png
index 418be08..0be9a19 100644
Binary files a/static/images/favicon-16x16.png and b/static/images/favicon-16x16.png differ
diff --git a/static/images/favicon-32x32.png b/static/images/favicon-32x32.png
index c368791..f6ce936 100644
Binary files a/static/images/favicon-32x32.png and b/static/images/favicon-32x32.png differ
diff --git a/static/images/favicon.ico b/static/images/favicon.ico
index c92f1de..06c56b5 100644
Binary files a/static/images/favicon.ico and b/static/images/favicon.ico differ
diff --git a/templates/index.html b/templates/index.html
index 47fe4a1..0e1b223 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -17,20 +17,34 @@
     <link rel="manifest" href="{% static 'images/site.webmanifest' %}">
 
    <link rel="stylesheet" href="{% static 'css/main.css' %}"> 
+
 </head>
 <body>
 
     <header>
         <div class="container nav-inner">
-            <a href="#" class="logo">
-                {% if settings and settings.logo %}
-                    <img src="{{ settings.logo.url }}" alt="Logo">
-                {% else %}
-                    <div style="width:32px; height:32px; background:var(--primary); border-radius:6px; display:flex; align-items:center; justify-content:center; color:white; font-weight:900;">T</div>
-                {% endif %}
-                
-            </a>
             
+            <a href="/" class="logo" aria-label="Tenhal Home">
+                    <div class="logo-wrapper">
+                    <div class="brand-text">
+                        <div class="arabic">تـنـحـل</div>
+                        <div class="english">
+                            <span>T</span><span>E</span><span>N</span><span>H</span><span>A</span><span>L</span>
+                        </div>
+                    </div>
+
+                    <div class="symbol">
+                        <div class="b top-left"></div>
+                        <div class="b top-right"></div>
+                        <div class="b middle"></div>
+                        <div class="b inner"></div>
+                        <div class="b bottom-base"></div>
+                        <div class="b right-wall"></div>
+                        <div class="b stem"></div>
+                        <div class="corner-arc"></div>
+                    </div>
+                </div>
+            </a>
             <div style="display: flex; align-items: center;">
                 <nav class="nav-links">
                     <a href="#services">{% trans "Services" %}</a>