diff --git a/PX360/settings.py b/PX360/settings.py
index f6282b8..b614350 100644
--- a/PX360/settings.py
+++ b/PX360/settings.py
@@ -126,7 +126,11 @@ USE_TZ = True
 # Static files (CSS, JavaScript, Images)
 # https://docs.djangoproject.com/en/6.0/howto/static-files/
 
-STATIC_URL = 'static/'
+STATIC_URL = "/static/"
+STATIC_ROOT = BASE_DIR / "staticfiles"
+STATICFILES_DIRS = [
+    BASE_DIR / "static",
+]
 
 # Celery Configuration
 CELERY_BROKER_URL = 'redis://localhost:6379/0'
diff --git a/templates/core/public_submit.html b/templates/core/public_submit.html
index a184798..219a829 100644
--- a/templates/core/public_submit.html
+++ b/templates/core/public_submit.html
@@ -280,7 +280,7 @@ header.glass-card {
     <div class="rounded-3xl shadow-2xl overflow-hidden mb-8 text-center animate-fade-in">
         <!-- Logo Banner - Full Width White -->
         <div class="bg-white w-full py-8 px-6 flex items-center justify-center">
-            <img src="{% static 'img/hh-logo.png' %}" alt="Al Hammadi Hospital" class="max-h-48 w-auto object-contain">
+            <img src="{% static 'img/hh-logo.png' %}" alt="Al Hammadi Hospital" class="max-h-16 w-auto object-contain">
         </div>
         <!-- Text Content Below - White Background -->
         <div class="bg-white p-8">
diff --git a/templates/layouts/partials/sidebar.html b/templates/layouts/partials/sidebar.html
index c2d5e4d..de5abd5 100644
--- a/templates/layouts/partials/sidebar.html
+++ b/templates/layouts/partials/sidebar.html
@@ -65,13 +65,13 @@
     <script>window.sidebarCsrfToken = document.querySelector('[name=csrfmiddlewaretoken]')?.value;</script>
     <!-- Brand -->
     <div class="p-4 flex flex-col items-center border-b border-white/10">
-        <div class="sidebar-logo-text rounded-lg overflow-hidden mb-3" style="width: 200px; height: 100px;">
-            <img src="{% static 'img/logo.png' %}" alt="Al Hammadi Hospital" class="w-full h-full object-contain">
+        <div class="sidebar-logo-collapsed w-10 h-10 flex-shrink-0">
+            <img src="{% static 'img/HH_R_ICON.png' %}" alt="Al Hammadi" class="w-full h-full object-contain">
+        </div>
+        <!-- Extended logo (full logo with text) - shown on hover -->
+        <div class="sidebar-logo-extended flex-shrink-0 opacity-0 transition-opacity duration-300">
+            <img src="{% static 'img/HH_R_H_Logo.png' %}" alt="Al Hammadi" class="h-10 w-auto object-contain">
         </div>
-        {% comment %} <div class="sidebar-logo-text overflow-hidden text-center">
-            <h1 class="text-lg font-black tracking-tighter whitespace-nowrap">PX360</h1>
-            <p class="text-[8px] font-bold text-blue-200 tracking-widest uppercase whitespace-nowrap">Analytics Platform</p>
-        </div> {% endcomment %}
     </div>
     
     <!-- Navigation -->
@@ -590,7 +590,28 @@
         </div>
     </div>
 </aside>
+<style>
+    #sidebar:hover .sidebar-text {
+        opacity: 1;
+    }
 
+    /* Show collapsed icon by default, hide extended logo */
+    .sidebar-logo-collapsed {
+        display: flex;
+    }
+    .sidebar-logo-extended {
+        display: none;
+    }
+
+    /* On hover: hide collapsed icon, show extended logo */
+    #sidebar:hover .sidebar-logo-collapsed {
+        display: none;
+    }
+    #sidebar:hover .sidebar-logo-extended {
+        display: flex;
+        opacity: 1;
+    }
+</style>
 <script>
 function toggleUserMenu() {
     const menu = document.getElementById('userMenu');