diff --git a/frontends/web/static/.logo.svg.kate-swp b/frontends/web/static/.logo.svg.kate-swp
new file mode 100644
index 0000000..fb2e36e
Binary files /dev/null and b/frontends/web/static/.logo.svg.kate-swp differ
diff --git a/frontends/web/static/favicon.svg b/frontends/web/static/favicon.svg
index 4124d8b..53fc308 100644
--- a/frontends/web/static/favicon.svg
+++ b/frontends/web/static/favicon.svg
@@ -1,112 +1,86 @@
 <svg width="32" height="32" viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg">
   <defs>
+    <!-- Sunset gradient in the photo -->
     <linearGradient id="sunsetGradientFavicon" x1="0" y1="0" x2="0" y2="1">
-      <stop offset="0%" stop-color="#FFD873"/>
-      <stop offset="40%" stop-color="#FF7E88"/>
-      <stop offset="75%" stop-color="#D45BFF"/>
-      <stop offset="100%" stop-color="#3B2A88"/>
+      <stop offset="0%" stop-color="#FFD873"></stop>
+      <stop offset="40%" stop-color="#FF7E88"></stop>
+      <stop offset="75%" stop-color="#D45BFF"></stop>
+      <stop offset="100%" stop-color="#3B2A88"></stop>
     </linearGradient>
 
+    <!-- Caption / cipher gradient -->
     <linearGradient id="cipherGradientFavicon" x1="0" y1="0" x2="1" y2="0">
-      <stop offset="0%" stop-color="#D2C8FF" stop-opacity="1"/>
-      <stop offset="100%" stop-color="#A796FF" stop-opacity="1"/>
+      <stop offset="0%" stop-color="#D2C8FF" stop-opacity="1"></stop>
+      <stop offset="100%" stop-color="#A796FF" stop-opacity="1"></stop>
     </linearGradient>
 
+    <!-- GOLD lock body gradient -->
     <linearGradient id="lockBodyGradientFavicon" x1="0" y1="0" x2="0" y2="1">
-      <stop offset="0%" stop-color="#FFF4C7"/>
-      <stop offset="40%" stop-color="#F7D978"/>
-      <stop offset="100%" stop-color="#D49A27"/>
+      <stop offset="0%" stop-color="#FFF4C7"></stop>
+      <stop offset="40%" stop-color="#F7D978"></stop>
+      <stop offset="100%" stop-color="#D49A27"></stop>
     </linearGradient>
 
-    <filter id="lockShadowFavicon" x="-15%" y="-15%" width="130%" height="130%">
-      <feDropShadow dx="0" dy="1" stdDeviation="0.8"
-                    flood-color="#000000" flood-opacity="0.45"/>
+    <!-- STRONG, CRISP LOCK SHADOW -->
+    <filter id="lockShadowFavicon" x="-20%" y="-20%" width="140%" height="140%">
+      <feDropShadow dx="0" dy="1" stdDeviation="0.4" flood-color="#000000" flood-opacity="0.9"></feDropShadow>
     </filter>
   </defs>
 
-  <!-- Inset and scaled: margin + size tweak -->
+  <!-- Inset and scaled slightly so nothing clips -->
   <g transform="translate(5 5) scale(0.9)">
     <g transform="rotate(-6 38 44)">
       <!-- Frame -->
-      <rect x="0" y="0" width="76" height="88"
-            rx="1" ry="1"
-            fill="#FCFCFF"
-            stroke="#E0E0F4"
-            stroke-width="1"/>
+      <rect x="0" y="0" width="76" height="88" rx="1" ry="1" fill="#FCFCFF" stroke="#E0E0F4" stroke-width="1"></rect>
 
-      <!-- Photo area (left edge at x=6) -->
-      <rect x="6" y="6" width="64" height="48"
-            rx="0.5" ry="0.5"
-            fill="url(#sunsetGradientFavicon)"
-            stroke="#3C3C46"
-            stroke-width="1"
-            stroke-opacity="0.7"/>
+      <!-- Photo area -->
+      <rect x="6" y="6" width="64" height="48" rx="0.5" ry="0.5" fill="url(#sunsetGradientFavicon)" stroke="#3C3C46" stroke-width="1" stroke-opacity="0.7"></rect>
 
-      <!-- FAR BACKGROUND BUILDINGS -->
+      <!-- Far background buildings -->
       <g fill="#59407E" opacity="0.55">
-        <rect x="20" y="35" width="4" height="7"/>
-        <rect x="32" y="32" width="5" height="10"/>
-        <rect x="34" y="30.5" width="0.7" height="2.3"/>
-        <rect x="46" y="34" width="4" height="8"/>
-        <rect x="51" y="36" width="3" height="6"/>
+        <rect x="20" y="35" width="4" height="7"></rect>
+        <rect x="32" y="32" width="5" height="10"></rect>
+        <rect x="34" y="30.5" width="0.7" height="2.3"></rect>
+        <rect x="46" y="34" width="4" height="8"></rect>
+        <rect x="51" y="36" width="3" height="6"></rect>
       </g>
 
       <!-- Hills / skyline -->
-      <path d="M6 44 Q22 36 36 39 T70 42 L70 54 L6 54 Z"
-            fill="#351C6A" opacity="1"/>
+      <path d="M6 44 Q22 36 36 39 T70 42 L70 54 L6 54 Z" fill="#351C6A" opacity="1"></path>
 
       <!-- Sun -->
-      <circle cx="54" cy="18" r="7" fill="#FFEBA9" opacity="0.96"/>
+      <circle cx="54" cy="18" r="7" fill="#FFEBA9" opacity="0.96"></circle>
 
       <!-- Bottom caption area -->
-      <rect x="1" y="54" width="74" height="32"
-            fill="#F5F3FF" opacity="0.9"/>
+      <rect x="1" y="54" width="74" height="32" fill="#F5F3FF" opacity="0.9"></rect>
 
-      <!-- DARKER "WRITING": two lines aligned to photo left (x = 6) -->
+      <!-- "Writing": 2 lines aligned to photo left (x = 6) -->
       <g transform="translate(6 62)">
-        <rect x="0"  y="0"  width="30" height="3.4" rx="1.7"
-              fill="url(#cipherGradientFavicon)"/>
-        <rect x="0"  y="6"  width="20" height="3.2" rx="1.6"
-              fill="url(#cipherGradientFavicon)" opacity="0.85"/>
+        <rect x="0" y="0" width="30" height="3.4" rx="1.7" fill="url(#cipherGradientFavicon)"></rect>
+        <rect x="0" y="6" width="20" height="3.2" rx="1.6" fill="url(#cipherGradientFavicon)" opacity="0.85"></rect>
       </g>
 
-      <!-- Large gold lock hanging over corner -->
+      <!-- Gold lock overlapping corner -->
       <g transform="translate(41.32 51.15) scale(1.86)" filter="url(#lockShadowFavicon)">
-        <rect x="0" y="6" width="24" height="18"
-              rx="3" ry="3"
-              fill="url(#lockBodyGradientFavicon)"
-              stroke="#8A6115"
-              stroke-width="0.9"/>
+        <rect x="0" y="6" width="24" height="18" rx="3" ry="3" fill="url(#lockBodyGradientFavicon)" stroke="#8A6115" stroke-width="0.9"></rect>
 
-        <rect x="2.2" y="8.2" width="19.6" height="8"
-              rx="2" ry="2"
-              fill="#FFFFFF"
-              opacity="0.16"/>
+        <rect x="2.2" y="8.2" width="19.6" height="8" rx="2" ry="2" fill="#FFFFFF" opacity="0.16"></rect>
 
-        <circle cx="3.4" cy="9.4" r="0.7" fill="#C28A24" opacity="0.9"/>
-        <circle cx="20.6" cy="9.4" r="0.7" fill="#C28A24" opacity="0.9"/>
+        <circle cx="3.4" cy="9.4" r="0.7" fill="#C28A24" opacity="0.9"></circle>
+        <circle cx="20.6" cy="9.4" r="0.7" fill="#C28A24" opacity="0.9"></circle>
 
-        <rect x="7.2" y="8.4" width="3.6" height="13"
-              fill="#FFFFFF" opacity="0.10"/>
+        <rect x="7.2" y="8.4" width="3.6" height="13" fill="#FFFFFF" opacity="0.10"></rect>
 
-        <rect x="2.2" y="17.2" width="19.6" height="1.5"
-              rx="0.75" fill="#A46D16" opacity="0.45"/>
+        <rect x="2.2" y="17.2" width="19.6" height="1.5" rx="0.75" fill="#A46D16" opacity="0.45"></rect>
 
         <path d="M6 7.5
                  v-3.7
                  a5 5 0 0 1 12 0
-                 v3.7"
-              fill="none"
-              stroke="#C28A24"
-              stroke-width="2.4"
-              stroke-linecap="round"/>
+                 v3.7" fill="none" stroke="#C28A24" stroke-width="2.4" stroke-linecap="round"></path>
 
-        <circle cx="12" cy="15" r="2.3" fill="#4A3210"/>
-        <rect x="11.2" y="15.7" width="1.6" height="3.4"
-              rx="0.8" fill="#2F1F08"/>
+        <circle cx="12" cy="15" r="2.3" fill="#4A3210"></circle>
+        <rect x="11.2" y="15.7" width="1.6" height="3.4" rx="0.8" fill="#2F1F08"></rect>
       </g>
     </g>
   </g>
 </svg>
-
-
diff --git a/frontends/web/static/logo.svg b/frontends/web/static/logo.svg
index 288b8ed..db58c33 100644
--- a/frontends/web/static/logo.svg
+++ b/frontends/web/static/logo.svg
@@ -1,165 +1,131 @@
 <svg width="512" height="512" viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg">
   <defs>
+    <!-- Sunset gradient in the photo -->
     <linearGradient id="sunsetGradientPolaroidTight" x1="0" y1="0" x2="0" y2="1">
-      <stop offset="0%" stop-color="#FFD873"/>
-      <stop offset="40%" stop-color="#FF7E88"/>
-      <stop offset="75%" stop-color="#D45BFF"/>
-      <stop offset="100%" stop-color="#3B2A88"/>
+      <stop offset="0%" stop-color="#FFD873"></stop>
+      <stop offset="40%" stop-color="#FF7E88"></stop>
+      <stop offset="75%" stop-color="#D45BFF"></stop>
+      <stop offset="100%" stop-color="#3B2A88"></stop>
     </linearGradient>
 
+    <!-- Caption / cipher gradient -->
     <linearGradient id="cipherGradientPolaroidTight" x1="0" y1="0" x2="1" y2="0">
-      <stop offset="0%" stop-color="#D2C8FF" stop-opacity="1"/>
-      <stop offset="100%" stop-color="#A796FF" stop-opacity="1"/>
+      <stop offset="0%" stop-color="#D2C8FF" stop-opacity="1"></stop>
+      <stop offset="100%" stop-color="#A796FF" stop-opacity="1"></stop>
     </linearGradient>
 
+    <!-- Card shadow -->
     <filter id="cardShadowPolaroidTight" x="-20%" y="-20%" width="140%" height="140%">
-      <feDropShadow dx="0" dy="3" stdDeviation="3.5"
-                    flood-color="#000000" flood-opacity="0.35"/>
+      <feDropShadow dx="0" dy="3" stdDeviation="3.5" flood-color="#000000" flood-opacity="0.35"></feDropShadow>
     </filter>
 
+    <!-- GOLD lock body gradient -->
     <linearGradient id="lockBodyGradientPolaroidTight" x1="0" y1="0" x2="0" y2="1">
-      <stop offset="0%" stop-color="#FFF4C7"/>
-      <stop offset="40%" stop-color="#F7D978"/>
-      <stop offset="100%" stop-color="#D49A27"/>
+      <stop offset="0%" stop-color="#FFF4C7"></stop>
+      <stop offset="40%" stop-color="#F7D978"></stop>
+      <stop offset="100%" stop-color="#D49A27"></stop>
     </linearGradient>
 
-    <filter id="lockShadowPolaroidTight" x="-15%" y="-15%" width="130%" height="130%">
-      <feDropShadow dx="0" dy="1" stdDeviation="0.9"
-                    flood-color="#000000" flood-opacity="0.4"/>
+    <!-- STRONG, CRISP LOCK SHADOW -->
+    <filter id="lockShadowPolaroidTight" x="-20%" y="-20%" width="140%" height="140%">
+      <feDropShadow dx="0" dy="1.2" stdDeviation="0.45" flood-color="#000000" flood-opacity="0.9"></feDropShadow>
     </filter>
 
+    <!-- Soft blur for contrails -->
     <filter id="contrailBlur" x="-10%" y="-10%" width="120%" height="120%">
-      <feGaussianBlur stdDeviation="0.4" />
+      <feGaussianBlur stdDeviation="0.4"></feGaussianBlur>
     </filter>
   </defs>
 
-  <!-- Inset and scaled: margin + size tweak -->
+  <!-- Inset and scaled slightly so nothing clips -->
   <g transform="translate(5 5) scale(0.9)" filter="url(#cardShadowPolaroidTight)">
     <g transform="rotate(-6 38 44)">
       <!-- Polaroid frame -->
-      <rect x="0" y="0" width="76" height="88"
-            rx="1" ry="1"
-            fill="#FCFCFF"
-            stroke="#E0E0F4"
-            stroke-width="1"/>
+      <rect x="0" y="0" width="76" height="88" rx="1" ry="1" fill="#FCFCFF" stroke="#E0E0F4" stroke-width="1"></rect>
 
       <!-- Photo area (left edge at x=6) -->
-      <rect x="6" y="6" width="64" height="48"
-            rx="0.5" ry="0.5"
-            fill="url(#sunsetGradientPolaroidTight)"
-            stroke="#3C3C46"
-            stroke-width="1"
-            stroke-opacity="0.7"/>
+      <rect x="6" y="6" width="64" height="48" rx="0.5" ry="0.5" fill="url(#sunsetGradientPolaroidTight)" stroke="#3C3C46" stroke-width="1" stroke-opacity="0.7"></rect>
 
-      <!-- FAR BACKGROUND BUILDINGS -->
+      <!-- Far background buildings -->
       <g fill="#59407E" opacity="0.55">
-        <rect x="18" y="35" width="4" height="7"/>
-        <rect x="30" y="32" width="5" height="10"/>
-        <rect x="32.2" y="30.2" width="0.6" height="2.2"/>
-        <rect x="44" y="34" width="4" height="8"/>
-        <rect x="49" y="36" width="3" height="6"/>
+        <rect x="18" y="35" width="4" height="7"></rect>
+        <rect x="30" y="32" width="5" height="10"></rect>
+        <rect x="32.2" y="30.2" width="0.6" height="2.2"></rect>
+        <rect x="44" y="34" width="4" height="8"></rect>
+        <rect x="49" y="36" width="3" height="6"></rect>
       </g>
 
       <!-- Hills / skyline -->
-      <path d="M6 44 Q22 36 36 39 T70 42 L70 54 L6 54 Z"
-            fill="#351C6A" opacity="1"/>
+      <path d="M6 44 Q22 36 36 39 T70 42 L70 54 L6 54 Z" fill="#351C6A" opacity="1"></path>
 
       <!-- Sun -->
-      <circle cx="54" cy="18" r="6.5" fill="#FFEBA9" opacity="0.96"/>
+      <circle cx="54" cy="18" r="6.5" fill="#FFEBA9" opacity="0.96"></circle>
 
       <!-- Contrails -->
       <g filter="url(#contrailBlur)">
-        <path d="M9 11 L41 7"
-              stroke="#FFFDFE"
-              stroke-width="0.7"
-              stroke-linecap="round"
-              opacity="0.45"/>
-        <path d="M18 8 L20 20"
-              transform="rotate(-26 19 14)"
-              stroke="#FFFDFE"
-              stroke-width="0.5"
-              stroke-linecap="round"
-              opacity="0.3"/>
+        <path d="M9 11 L41 7" stroke="#FFFDFE" stroke-width="0.7" stroke-linecap="round" opacity="0.45"></path>
+        <path d="M18 8 L20 20" transform="rotate(-26 19 14)" stroke="#FFFDFE" stroke-width="0.5" stroke-linecap="round" opacity="0.3"></path>
       </g>
 
       <!-- Main flock of birds -->
-      <g stroke="#2F2348"
-         stroke-width="0.7"
-         fill="none"
-         stroke-linecap="round"
-         opacity="0.9">
-        <path d="M26 20 q 2 -1.3 4 0" />
-        <path d="M31 18 q 1.8 -1.1 3.6 0" />
-        <path d="M36 16 q 1.5 -0.9 3 0" />
+      <g stroke="#2F2348" stroke-width="0.7" fill="none" stroke-linecap="round" opacity="0.9">
+        <path d="M26 20 q 2 -1.3 4 0"></path>
+        <path d="M31 18 q 1.8 -1.1 3.6 0"></path>
+        <path d="M36 16 q 1.5 -0.9 3 0"></path>
       </g>
 
       <!-- Distant birds -->
-      <g stroke="#2F2348"
-         stroke-width="0.5"
-         fill="none"
-         stroke-linecap="round"
-         opacity="0.7">
-        <path d="M50.2 32.4 q 1.4 -0.8 2.8 0" />
-        <path d="M53.6 31.5 q 1.2 -0.7 2.4 0" />
+      <g stroke="#2F2348" stroke-width="0.5" fill="none" stroke-linecap="round" opacity="0.7">
+        <path d="M50.2 32.4 q 1.4 -0.8 2.8 0"></path>
+        <path d="M53.6 31.5 q 1.2 -0.7 2.4 0"></path>
       </g>
 
       <!-- Bottom caption area -->
-      <rect x="1" y="54" width="74" height="32"
-            fill="#F5F3FF" opacity="0.9"/>
+      <rect x="1" y="54" width="74" height="32" fill="#F5F3FF" opacity="0.9"></rect>
 
-      <!-- DARKER "WRITING": three lines aligned to photo left (x = 6) -->
+      <!-- "Writing": 3 lines aligned to photo left (x = 6) -->
       <g transform="translate(6 62)">
-        <rect x="0"  y="0"   width="36" height="3.4" rx="1.7"
-              fill="url(#cipherGradientPolaroidTight)"/>
-        <rect x="0"  y="5.5" width="28" height="3.2" rx="1.6"
-              fill="url(#cipherGradientPolaroidTight)" opacity="0.9"/>
-        <rect x="0"  y="11"  width="20" height="3.0" rx="1.5"
-              fill="url(#cipherGradientPolaroidTight)" opacity="0.8"/>
+        <!-- Top line: darker, shorter -->
+        <rect x="0" y="0" width="28" height="3.4" rx="1.7" fill="#B2A0FF"></rect>
+        <!-- Second line: a bit longer -->
+        <rect x="0" y="5.5" width="32" height="3.2" rx="1.6" fill="url(#cipherGradientPolaroidTight)" opacity="0.9"></rect>
+        <!-- Third line: shortest -->
+        <rect x="0" y="11" width="22" height="3.0" rx="1.5" fill="url(#cipherGradientPolaroidTight)" opacity="0.8"></rect>
       </g>
 
-      <!-- Big gold lock hanging over corner -->
+      <!-- Big gold lock overlapping corner -->
       <g transform="translate(41.32 47.37) scale(1.86)" filter="url(#lockShadowPolaroidTight)">
-        <rect x="0" y="8" width="24" height="18"
-              rx="3" ry="3"
-              fill="url(#lockBodyGradientPolaroidTight)"
-              stroke="#8A6115"
-              stroke-width="0.8"/>
+        <!-- Outer body -->
+        <rect x="0" y="8" width="24" height="18" rx="3" ry="3" fill="url(#lockBodyGradientPolaroidTight)" stroke="#8A6115" stroke-width="0.8"></rect>
 
-        <rect x="2.2" y="10" width="19.6" height="9"
-              rx="2" ry="2"
-              fill="#FFFFFF"
-              opacity="0.14"/>
+        <!-- Inner inset -->
+        <rect x="2.2" y="10" width="19.6" height="9" rx="2" ry="2" fill="#FFFFFF" opacity="0.14"></rect>
 
-        <circle cx="3.4" cy="11" r="0.7" fill="#C28A24" opacity="0.9"/>
-        <circle cx="20.6" cy="11" r="0.7" fill="#C28A24" opacity="0.9"/>
+        <!-- Bolts -->
+        <circle cx="3.4" cy="11" r="0.7" fill="#C28A24" opacity="0.9"></circle>
+        <circle cx="20.6" cy="11" r="0.7" fill="#C28A24" opacity="0.9"></circle>
+        <circle cx="3.4" cy="19.5" r="0.6" fill="#A66D1D" opacity="0.85"></circle>
+        <circle cx="20.6" cy="19.5" r="0.6" fill="#A66D1D" opacity="0.85"></circle>
 
-        <circle cx="3.4" cy="19.5" r="0.6" fill="#A66D1D" opacity="0.85"/>
-        <circle cx="20.6" cy="19.5" r="0.6" fill="#A66D1D" opacity="0.85"/>
+        <!-- Vertical highlight -->
+        <rect x="7.2" y="10.2" width="3.6" height="14" fill="#FFFFFF" opacity="0.10"></rect>
 
-        <rect x="7.2" y="10.2" width="3.6" height="14"
-              fill="#FFFFFF" opacity="0.10"/>
-
-        <rect x="2.2" y="18.8" width="19.6" height="1.6"
-              rx="0.8" fill="#A46D16" opacity="0.45"/>
+        <!-- Bottom inner shadow strip -->
+        <rect x="2.2" y="18.8" width="19.6" height="1.6" rx="0.8" fill="#A46D16" opacity="0.45"></rect>
 
+        <!-- Clasp -->
         <path d="M6 9.5
                  v-4
                  a5 5 0 0 1 12 0
-                 v4"
-              fill="none"
-              stroke="#C28A24"
-              stroke-width="2.4"
-              stroke-linecap="round"/>
+                 v4" fill="none" stroke="#C28A24" stroke-width="2.4" stroke-linecap="round"></path>
 
-        <rect x="2.2" y="8.4" width="19.6" height="2.4"
-              rx="1.2" fill="#FFFFFF" opacity="0.22"/>
+        <!-- Top highlight band -->
+        <rect x="2.2" y="8.4" width="19.6" height="2.4" rx="1.2" fill="#FFFFFF" opacity="0.22"></rect>
 
-        <circle cx="12" cy="16" r="2.2" fill="#4A3210"/>
-        <rect x="11.3" y="16.8" width="1.4" height="3.1"
-              rx="0.7" fill="#2F1F08"/>
+        <!-- Keyhole -->
+        <circle cx="12" cy="16" r="2.2" fill="#4A3210"></circle>
+        <rect x="11.3" y="16.8" width="1.4" height="3.1" rx="0.7" fill="#2F1F08"></rect>
       </g>
     </g>
   </g>
 </svg>
-
-
diff --git a/test_data/57eb0162_20251228.png b/test_data/57eb0162_20251228.png
new file mode 100644
index 0000000..1830d2f
Binary files /dev/null and b/test_data/57eb0162_20251228.png differ