diff --git a/src/pages/portfolio.astro b/src/pages/portfolio.astro
index 485d20c..b399428 100644
--- a/src/pages/portfolio.astro
+++ b/src/pages/portfolio.astro
@@ -165,12 +165,13 @@ const uniqueMonths = [...new Map(allMonths.map(item => [item.name, item])).value
                 <h3 id="lb-date" class="text-white font-bold text-lg md:text-xl capitalize"></h3>
                 <p id="lb-model" class="text-gray-400 text-sm font-medium tracking-wide mt-1"></p>
             </div>
+            <div class="flex flex-wrap items-center gap-4 md:gap-6">
             <div class="relative">
-              <button id="lb-download" class="group inline-flex items-center gap-2 px-7 py-3 bg-white text-black font-bold text-sm uppercase tracking-widest rounded-full hover:bg-gray-200 transition transform hover:scale-105">
+              <button id="lb-download" class="group inline-flex items-center gap-2 px-6 py-2.5 bg-neutral-700/80 hover:bg-neutral-600/80 text-gray-200 hover:text-white font-semibold text-xs uppercase tracking-widest rounded-full border border-black/60 shadow-lg shadow-black/30 ring-1 ring-white/5 transition-all duration-200 transform hover:scale-105">
                 <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v12m0 0l-4-4m4 4l4-4M4 19h16"/></svg>
                 Download
               </button>
-              <div id="lb-sizes" class="hidden absolute bottom-full mb-3 left-0 min-w-[260px] bg-neutral-900/95 backdrop-blur-md border border-white/10 rounded-xl shadow-2xl z-50 overflow-hidden origin-bottom opacity-0 translate-y-2 transition-all duration-200 ease-out">
+              <div id="lb-sizes" class="hidden absolute bottom-full mb-3 left-0 md:left-auto md:right-0 min-w-[260px] bg-neutral-900/95 backdrop-blur-md border border-white/10 rounded-xl shadow-2xl z-50 overflow-hidden origin-bottom opacity-0 translate-y-2 transition-all duration-200 ease-out">
                 <a data-size="s" class="dl-opt group flex items-center justify-between px-5 py-3.5 text-sm text-gray-200 hover:bg-white/10 hover:text-white cursor-pointer transition-colors border-b border-white/5"><span class="font-medium uppercase tracking-widest text-xs">Small</span><span class="text-gray-500 text-xs font-mono group-hover:text-gray-300 transition-colors">800 px</span></a>
                 <a data-size="m" class="dl-opt group flex items-center justify-between px-5 py-3.5 text-sm text-gray-200 hover:bg-white/10 hover:text-white cursor-pointer transition-colors border-b border-white/5"><span class="font-medium uppercase tracking-widest text-xs">Medium</span><span class="text-gray-500 text-xs font-mono group-hover:text-gray-300 transition-colors">1600 px</span></a>
                 <a data-size="l" class="dl-opt group flex items-center justify-between px-5 py-3.5 text-sm text-gray-200 hover:bg-white/10 hover:text-white cursor-pointer transition-colors border-b border-white/5"><span class="font-medium uppercase tracking-widest text-xs">Large</span><span class="text-gray-500 text-xs font-mono group-hover:text-gray-300 transition-colors">3000 px</span></a>
@@ -183,6 +184,7 @@ const uniqueMonths = [...new Map(allMonths.map(item => [item.name, item])).value
                 <div class="flex flex-col md:flex-row md:items-center gap-1"><span class="text-gray-500 uppercase text-[10px] font-bold">Shutter</span><span id="lb-shutter">--</span></div>
                 <div class="flex flex-col md:flex-row md:items-center gap-1"><span class="text-gray-500 uppercase text-[10px] font-bold">ISO</span><span id="lb-iso">--</span></div>
             </div>
+            </div>
         </div>
     </div>