Add covers

frontend/src/components/ui/NeonButton.tsx

@@ -128,13 +128,9 @@ export const NeonButton = forwardRef<HTMLButtonElement, NeonButtonProps>(
         {...props}
       >
         {isLoading && <Loader2 className={clsx(iconSizes[size], 'animate-spin')} />}
-        {!isLoading && icon && iconPosition === 'left' && (
+        {!isLoading && icon && iconPosition === 'left' && icon}
-          <span className={iconSizes[size]}>{icon}</span>
-        )}
         {children}
-        {!isLoading && icon && iconPosition === 'right' && (
+        {!isLoading && icon && iconPosition === 'right' && icon}
-          <span className={iconSizes[size]}>{icon}</span>
-        )}
       </button>
     )
   }

frontend/src/pages/MarathonPage.tsx

@@ -192,8 +192,22 @@ export function MarathonPage() {
       {/* Hero Banner */}
       <div className="relative rounded-2xl overflow-hidden mb-8">
         {/* Background */}
+        {marathon.cover_url ? (
+          <>
+            <img
+              src={marathon.cover_url}
+              alt=""
+              className="absolute inset-0 w-full h-full object-cover"
+            />
+            <div className="absolute inset-0 bg-gradient-to-r from-dark-900/95 via-dark-900/80 to-dark-900/60" />
+            <div className="absolute inset-0 bg-gradient-to-t from-dark-900/90 to-transparent" />
+          </>
+        ) : (
+          <>
             <div className="absolute inset-0 bg-gradient-to-br from-neon-500/10 via-dark-800 to-accent-500/10" />
             <div className="absolute inset-0 bg-[linear-gradient(rgba(34,211,238,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(34,211,238,0.02)_1px,transparent_1px)] bg-[size:50px_50px]" />
+          </>
+        )}
 
         <div className="relative p-8">
           <div className="flex flex-col md:flex-row justify-between items-start gap-6">