diff --git a/public/images/5704_mobile.png b/public/images/5704_mobile.png
new file mode 100644
index 00000000..416405e5
Binary files /dev/null and b/public/images/5704_mobile.png differ
diff --git a/src/features/ProfileHeader/index.tsx b/src/features/ProfileHeader/index.tsx
index 5fa6c38d..b5154731 100644
--- a/src/features/ProfileHeader/index.tsx
+++ b/src/features/ProfileHeader/index.tsx
@@ -46,7 +46,7 @@ export const ProfileHeader = ({
     sportType,
   } = usePageParams()
 
-  const url = '/images/5704.png'
+  const url = '/images/5704'
   const color = useProfileColor(profileId)
   const imageHeader = profileId === 5704
   && sportType === SportTypes.FOOTBALL
diff --git a/src/features/ProfileHeader/styled.tsx b/src/features/ProfileHeader/styled.tsx
index d0e06f6b..26ca49d4 100644
--- a/src/features/ProfileHeader/styled.tsx
+++ b/src/features/ProfileHeader/styled.tsx
@@ -13,8 +13,13 @@ export const defaultHeaderStyles = (
   color: string = DEFAULT_HEADER_COLOR, headerImage: string | undefined | null,
 ) => {
   if (headerImage && client.name !== 'facr') {
-    return css`background: url(${headerImage});
-      background-size: 100% 100%;`
+    return css`background: url(${headerImage}.png);
+      background-size: 100% 100%;
+      @media (max-width: 450px){
+        background: url(${headerImage}_mobile.png);
+        background-size: 100% 100%;
+      }
+      `
   }
   if (color.includes('linear-gradient')) {
     return css`
@@ -52,7 +57,6 @@ export const HeaderStyled = styled.header<HeaderProps>`
 
   ${isMobileDevice
     ? css`
-      height: auto;
       padding: 8px;
     `
     : ''}