diff --git a/public/s/css/f0ck.css b/public/s/css/f0ck.css
index 49b4abb..6e38113 100644
--- a/public/s/css/f0ck.css
+++ b/public/s/css/f0ck.css
@@ -3054,70 +3054,127 @@ input#s_avatar {
   50% {
     opacity: 1;
   }
+}
 
-  /* Modern Tags Layout */
-  .tags-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-    gap: 20px;
-    padding: 20px 0;
-  }
+/* Modern Tags Layout */
+.tags-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 20px;
+  padding: 20px 0;
+}
 
-  .tag-card {
-    display: flex;
-    flex-direction: column;
-    background: var(--badge-bg, #171717);
-    border-radius: 12px;
-    overflow: hidden;
-    text-decoration: none !important;
-    transition: transform 0.2s, box-shadow 0.2s;
-    border: 1px solid var(--nav-border-color, rgba(255, 255, 255, 0.1));
-    position: relative;
-  }
+.tag-card {
+  display: flex;
+  flex-direction: column;
+  background: var(--badge-bg, #171717);
+  border-radius: 12px;
+  overflow: hidden;
+  text-decoration: none !important;
+  transition: transform 0.2s, box-shadow 0.2s;
+  border: 1px solid var(--nav-border-color, rgba(255, 255, 255, 0.1));
+  position: relative;
+}
 
-  .tag-card:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
-    background: var(--dropdown-bg, #232323);
-    border-color: var(--accent, #9f0);
-  }
+.tag-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
+  background: var(--dropdown-bg, #232323);
+  border-color: var(--accent, #9f0);
+}
 
-  .tag-card-image {
-    width: 100%;
-    height: 100px;
-    overflow: hidden;
-    position: relative;
-    background: #000;
-  }
+.tag-card-image {
+  width: 100%;
+  height: 100px;
+  overflow: hidden;
+  position: relative;
+  background: #000;
+}
 
-  .tag-card-image img {
+.tag-card-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.5s;
+  opacity: 0.8;
+}
+
+.tag-card:hover .tag-card-image img {
+  transform: scale(1.1);
+  opacity: 1;
+}
+
+.tag-card-content {
+  padding: 15px;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.tag-name {
+  color: var(--white, #fff);
+  font-weight: bold;
+  font-size: 1.1em;
+  font-family: var(--font, monospace);
+}
+
+.tag-count {
+  color: #888;
+  font-size: 0.9em;
+}
+/* Search Overlay */
+#search-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
     width: 100%;
     height: 100%;
-    object-fit: cover;
-    transition: transform 0.5s;
-    opacity: 0.8;
-  }
+    background-color: rgba(0, 0, 0, 0.9);
+    backdrop-filter: blur(5px);
+    z-index: 10000;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+    opacity: 0;
+    transition: opacity 0.2s ease-in-out;
+}
 
-  .tag-card:hover .tag-card-image img {
-    transform: scale(1.1);
+#search-overlay.visible {
     opacity: 1;
-  }
+}
 
-  .tag-card-content {
-    padding: 15px;
-    display: flex;
-    flex-direction: column;
-    gap: 5px;
-  }
+#search-input {
+    background: transparent;
+    border: none;
+    border-bottom: 2px solid var(--accent);
+    color: var(--white);
+    font-size: 3rem;
+    width: 100%;
+    max-width: 800px;
+    text-align: center;
+    outline: none;
+    font-family: var(--font);
+    padding: 10px;
+}
 
-  .tag-name {
-    color: var(--white, #fff);
-    font-weight: bold;
-    font-size: 1.1em;
-    font-family: var(--font, monospace);
-  }
+#search-input::placeholder {
+    color: #555;
+    text-transform: uppercase;
+}
 
-  .tag-count {
-    color: #888;
-    font-size: 0.9em;
-  }
\ No newline at end of file
+#search-close {
+    position: absolute;
+    top: 20px;
+    right: 30px;
+    color: var(--white);
+    font-size: 2rem;
+    cursor: pointer;
+    font-family: sans-serif;
+    opacity: 0.7;
+    transition: opacity 0.2s;
+}
+
+#search-close:hover {
+    opacity: 1;
+}
diff --git a/public/s/js/f0ck.js b/public/s/js/f0ck.js
index 3e91a29..76ae416 100644
--- a/public/s/js/f0ck.js
+++ b/public/s/js/f0ck.js
@@ -745,6 +745,73 @@ window.requestAnimFrame = (function () {
 
   // <scroller>
 
+  // <search-overlay>
+  const initSearch = () => {
+    if (!document.getElementById('search-overlay')) {
+      const overlay = document.createElement('div');
+      overlay.id = 'search-overlay';
+      overlay.innerHTML = `
+             <div id="search-close">&times;</div>
+             <input type="text" id="search-input" placeholder="Search Tags..." autocomplete="off">
+         `;
+      document.body.appendChild(overlay);
+
+      const input = document.getElementById('search-input');
+      const close = document.getElementById('search-close');
+      const btns = document.querySelectorAll('#nav-search-btn, #nav-search-btn-guest');
+
+      const toggleSearch = (show) => {
+        if (show) {
+          overlay.style.display = 'flex';
+          // Force reflow
+          overlay.offsetHeight;
+          overlay.classList.add('visible');
+          input.focus();
+        } else {
+          overlay.classList.remove('visible');
+          setTimeout(() => {
+            overlay.style.display = 'none';
+          }, 200);
+        }
+      };
+
+      btns.forEach(btn => btn.addEventListener('click', (e) => {
+        e.preventDefault();
+        toggleSearch(true);
+      }));
+
+      close.addEventListener('click', () => toggleSearch(false));
+
+      // Close on click outside (background)
+      overlay.addEventListener('click', (e) => {
+        if (e.target === overlay) toggleSearch(false);
+      });
+
+      // ESC to close
+      document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape' && overlay.classList.contains('visible')) {
+          toggleSearch(false);
+        }
+        // "k" to open
+        if (e.key === 'k' && e.target.tagName !== 'INPUT' && e.target.tagName !== 'TEXTAREA' && !overlay.classList.contains('visible')) {
+          e.preventDefault();
+          toggleSearch(true);
+        }
+      });
+
+      input.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') {
+          const val = input.value.trim();
+          if (val) {
+            window.location.href = `/tag/${encodeURIComponent(val)}`;
+          }
+        }
+      });
+    }
+  };
+  initSearch();
+  // </search-overlay>
+
   // </scroller>
 })();
 
diff --git a/views/snippets/navbar.html b/views/snippets/navbar.html
index 69a4b4d..6e5ffc7 100644
--- a/views/snippets/navbar.html
+++ b/views/snippets/navbar.html
@@ -9,6 +9,11 @@
       @if(!/^\/\d$/.test(url.pathname))
       <a href="/random" id="nav-random">rand</a>
       @endif
+      <a href="#" id="nav-search-btn" title="Search"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+          fill="currentColor" viewBox="0 0 16 16">
+          <path
+            d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
+        </svg></a>
     </ol>
   </div>
   <!-- show pagination only for tags and main page -->
@@ -33,6 +38,11 @@
       @if(!/^\/\d$/.test(url.pathname))
       <a href="/random" id="nav-random">rand</a>
       @endif
+      <a href="#" id="nav-search-btn-guest" title="Search"><svg xmlns="http://www.w3.org/2000/svg" width="16"
+          height="16" fill="currentColor" viewBox="0 0 16 16">
+          <path
+            d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
+        </svg></a>
     </ol>
   </div>
   <!-- show pagination only for tags and main page -->