diff --git a/src/components/SearchBar.jsx b/src/components/SearchBar.jsx
index 3e2a3ce..57d3286 100644
--- a/src/components/SearchBar.jsx
+++ b/src/components/SearchBar.jsx
@@ -130,6 +130,9 @@ export default function SearchBar({ developers, onResults, onReset }) {
       {resultCount !== null && query && (
         <div className="search-bar__results">
           {resultCount === 0 ? 'No results found' : `${resultCount} developer${resultCount !== 1 ? 's' : ''} found`}
+          <button className="search-bar__reset" onClick={handleClear} title="Clear filter and show all">
+            ✕ Clear
+          </button>
         </div>
       )}
       <div className={`search-bar__samples${query ? ' hidden' : ''}`}>
diff --git a/styles/main.css b/styles/main.css
index bda6d90..00e7ba7 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -257,6 +257,29 @@ body {
   background: rgba(17, 24, 39, 0.7);
   padding: 3px 10px;
   border-radius: 10px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.search-bar__reset {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  background: rgba(239, 68, 68, 0.15);
+  border: 1px solid rgba(239, 68, 68, 0.4);
+  border-radius: 10px;
+  padding: 2px 8px;
+  color: #f87171;
+  font-size: 11px;
+  font-family: var(--font);
+  cursor: pointer;
+  transition: background 0.2s, border-color 0.2s;
+}
+
+.search-bar__reset:hover {
+  background: rgba(239, 68, 68, 0.25);
+  border-color: #f87171;
 }
 
 /* Main layout */
@@ -409,9 +432,29 @@ body {
   border-right: 1px solid var(--border);
   z-index: 60;
   overflow-y: auto;
+  overflow-x: hidden;
   padding: 24px;
   transform: translateX(-100%);
   transition: transform 0.3s ease;
+  scrollbar-width: thin;
+  scrollbar-color: var(--text-muted) transparent;
+}
+
+.detail-panel::-webkit-scrollbar {
+  width: 8px;
+}
+
+.detail-panel::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.detail-panel::-webkit-scrollbar-thumb {
+  background: var(--text-muted);
+  border-radius: 4px;
+}
+
+.detail-panel::-webkit-scrollbar-thumb:hover {
+  background: var(--text-secondary);
 }
 
 .detail-panel.open {
@@ -419,19 +462,28 @@ body {
 }
 
 .detail-panel__close {
-  position: absolute;
-  top: 12px;
-  right: 16px;
-  background: none;
-  border: none;
+  position: sticky;
+  top: 0;
+  float: right;
+  background: rgba(17, 24, 39, 0.85);
+  border: 1px solid var(--border);
+  border-radius: 50%;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   color: var(--text-secondary);
-  font-size: 24px;
+  font-size: 20px;
   cursor: pointer;
   line-height: 1;
+  z-index: 10;
+  transition: background 0.2s, color 0.2s;
 }
 
 .detail-panel__close:hover {
   color: var(--text-primary);
+  background: var(--bg-hover);
 }
 
 /* Detail header */