diff --git a/src/components/SportIcon/SportIcon.tsx b/src/components/SportIcon/SportIcon.tsx
index b752e497..ce735a89 100644
--- a/src/components/SportIcon/SportIcon.tsx
+++ b/src/components/SportIcon/SportIcon.tsx
@@ -59,7 +59,7 @@ export const SportIcon = ({
       <Icon
         refIcon={IconSport}
         color={fill || sportIcons[sportType].color}
-        size={size || 10}
+        // size={size || 10}
       />
     </IconWrap>
   )
diff --git a/src/features/HeaderFilters/components/DateFilter/styled.tsx b/src/features/HeaderFilters/components/DateFilter/styled.tsx
index e96f107f..e7cd87e7 100644
--- a/src/features/HeaderFilters/components/DateFilter/styled.tsx
+++ b/src/features/HeaderFilters/components/DateFilter/styled.tsx
@@ -206,8 +206,8 @@ export const Arrow = styled.span<ArrowProps>`
   width: 0.65rem;
   height: 0.65rem;
   position: absolute;
-  border-left: 0.3rem solid #fff;
-  border-bottom: 0.3rem solid #fff;
+  border-left: 0.15rem solid #fff;
+  border-bottom: 0.15rem solid #fff;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
@@ -217,6 +217,7 @@ export const Arrow = styled.span<ArrowProps>`
       ? 'transform: translate(-50%, -50%) rotate(45deg);'
       : 'transform: translate(-50%, -50%) rotate(225deg);'
   )}
+  
     ${isMobileDevice
     ? css`
       padding: 5px;
diff --git a/src/features/MatchCard/CardFrontside/MatchCardMobile/index.tsx b/src/features/MatchCard/CardFrontside/MatchCardMobile/index.tsx
new file mode 100644
index 00000000..abc358fc
--- /dev/null
+++ b/src/features/MatchCard/CardFrontside/MatchCardMobile/index.tsx
@@ -0,0 +1,147 @@
+import type { KeyboardEvent } from 'react'
+import { useRouteMatch } from 'react-router'
+
+import getUnixTime from 'date-fns/getUnixTime'
+
+import { ProfileTypes, PAGES } from 'config'
+
+import type { Match } from 'features/Matches'
+import { useMatchSwitchesStore } from 'features/MatchSwitches'
+import { useName } from 'features/Name'
+import { T9n } from 'features/T9n'
+import { MatchAccess } from 'features/Matches/helpers/getMatchClickAction'
+import { useUserFavoritesStore } from 'features/UserFavorites/store'
+
+import { NoAccessMessage } from '../../NoAccessMessage'
+import {
+  CardWrapperOuter,
+  CardWrapper,
+  Info,
+  LiveSign,
+  MatchDate,
+  MatchTimeInfo,
+  Preview,
+  PreviewWrapper,
+  Score,
+  Team,
+  TeamName,
+  Teams,
+  Time,
+  TeamLogos,
+  TeamLogo,
+  BuyMatchBadge,
+  SecondaryInfo,
+  FavoriteSign,
+  NameSignWrapper,
+  HoverFrame,
+  ScDollar,
+} from './styled'
+import { useCardPreview } from '../hooks'
+
+type Props = {
+  match: Match,
+  onClick: () => void,
+  onKeyPress: (e: KeyboardEvent<HTMLLIElement>) => void,
+}
+
+export const CardFrontsideMobile = ({
+  match,
+  onClick,
+  onKeyPress,
+}: Props) => {
+  const {
+    access,
+    date,
+    formattedDate,
+    live,
+    preview,
+    previewURL,
+    sportType,
+    team1,
+    team2,
+    time,
+    tournament,
+  } = match
+  const isHomePage = useRouteMatch(PAGES.home)?.isExact
+  const tournamentName = useName(tournament)
+  const { isInFavorites } = useUserFavoritesStore()
+  const { isScoreHidden } = useMatchSwitchesStore()
+  const isInFuture = getUnixTime(date) > getUnixTime(new Date())
+  const showScore = !(isInFuture || isScoreHidden) || (live && !isScoreHidden)
+  const team1InFavorites = isInFavorites(ProfileTypes.TEAMS, team1.id)
+  const team2InFavorites = isInFavorites(ProfileTypes.TEAMS, team2.id)
+
+  const { previewImage } = useCardPreview({
+    preview,
+    previewURL,
+  })
+
+  return (
+    <CardWrapperOuter onClick={onClick} onKeyPress={onKeyPress}>
+      <CardWrapper>
+        <HoverFrame />
+        <PreviewWrapper>
+          {previewImage && (
+            <Preview title={tournamentName} src={previewImage} />
+          )}
+          {access === MatchAccess.NoCountryAccess ? (
+            <NoAccessMessage />
+          ) : (
+            <TeamLogos>
+              <TeamLogo
+                id={team1.id}
+                nameAsTitle
+                altNameObj={team1}
+                sportType={sportType}
+                profileType={ProfileTypes.TEAMS}
+              />
+              <TeamLogo
+                id={team2.id}
+                nameAsTitle
+                altNameObj={team2}
+                sportType={sportType}
+                profileType={ProfileTypes.TEAMS}
+              />
+            </TeamLogos>
+          )}
+          <MatchTimeInfo>
+            <MatchDate isHomePage={isHomePage}>
+              {isHomePage ? null : formattedDate}
+              {live && (
+                <LiveSign>
+                  <T9n t='live' />
+                </LiveSign>
+              )}
+            </MatchDate>
+          </MatchTimeInfo>
+        </PreviewWrapper>
+        <Info>
+          <Teams>
+            <Team>
+              <NameSignWrapper>
+                <TeamName nameObj={team1} />
+                {team1InFavorites && <FavoriteSign />}
+              </NameSignWrapper>
+              {showScore && <Score>{team1.score}</Score>}
+            </Team>
+            <Team>
+              <NameSignWrapper>
+                <TeamName nameObj={team2} />
+                {team2InFavorites && <FavoriteSign />}
+              </NameSignWrapper>
+              {showScore && <Score>{team2.score}</Score>}
+            </Team>
+          </Teams>
+          <SecondaryInfo>
+            <Time>{time}</Time>
+            {access === MatchAccess.CanBuyMatch && (
+              <BuyMatchBadge>
+                <ScDollar refIcon='Dollar' size={5} />
+              </BuyMatchBadge>
+            )}
+          </SecondaryInfo>
+        </Info>
+      </CardWrapper>
+    </CardWrapperOuter>
+  )
+}
diff --git a/src/features/MatchCard/CardFrontside/MatchCardMobile/styled.tsx b/src/features/MatchCard/CardFrontside/MatchCardMobile/styled.tsx
new file mode 100644
index 00000000..d253f88d
--- /dev/null
+++ b/src/features/MatchCard/CardFrontside/MatchCardMobile/styled.tsx
@@ -0,0 +1,350 @@
+import styled, { css } from 'styled-components/macro'
+
+import { devices } from 'config/devices'
+import { isMobileDevice } from 'config/userAgent'
+
+import { Name } from 'features/Name'
+import { Icon } from 'features/Icon'
+import { ProfileLogo } from 'features/ProfileLogo'
+
+export const CardWrapperOuter = styled.li.attrs({
+  tabIndex: 0,
+})`
+  padding-top: 100%;
+  position: relative;
+  ${isMobileDevice
+    ? css`
+        width: 100%;
+        padding-top: 0;
+        margin-top: 6px;
+
+        @media screen and (orientation: landscape) {
+          width: 100%;
+          :nth-child(odd) {
+            margin-right: 10px;
+          }
+        }
+      `
+    : ''};
+`
+
+export const CardWrapper = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  padding-bottom: 0.75rem;
+  border-radius: 2px;
+  background-color: #3F3F3F;
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
+  cursor: pointer;
+  ${isMobileDevice
+    ? css`
+        position: static;
+        display: flex;
+        width: 100%;
+        height: 75px;
+        padding-bottom: 0;
+      `
+    : ''};
+`
+
+export const HoverFrame = styled.div`
+  position: absolute;
+  min-width: 100%;
+  min-height: 100%;
+  border-radius: 2px;
+  border: 2px solid transparent;
+  transition: border 0.5s ease-out;
+  z-index: 2;
+
+  &:hover {
+    border: 2px solid #fff
+  }
+`
+
+export const PreviewWrapper = styled.div`
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: 60%;
+  ${isMobileDevice
+    ? css`
+        width: 40%;
+        height: 100%;
+      `
+    : ''};
+`
+
+export const Preview = styled.img`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0.4;
+
+  ${isMobileDevice
+    ? css`
+        opacity: 0.2;
+      `
+    : ''};
+`
+
+export const MatchTimeInfo = styled.div`
+  width: 100%;
+  position: absolute;
+  top: 0.519rem;
+  padding: 0 0.519rem;
+  display: flex;
+  flex-direction: row;
+`
+
+type MatchDateProps = {
+  isHomePage?: boolean,
+}
+
+export const MatchDate = styled.div<MatchDateProps>`
+  width: fit-content;
+  height: 0.9rem;
+  border-radius: 2px;
+  padding: ${({ isHomePage }) => (!isHomePage ? '0 0.27rem' : '')};
+  font-weight: bold;
+  font-size: 0.472rem;
+  line-height: 0.567rem;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  color: white;
+  background-color: #6D6D6D;
+
+  @media ${devices.tablet} {
+    padding: ${({ isHomePage }) => (!isHomePage ? '0.27rem 0.36rem' : '')};
+  }
+  ${isMobileDevice
+    ? css`
+        background-color: transparent;
+        margin-left: 4px;
+        height: 15px;
+        width: 22px;
+        font-size: 7px;
+      `
+    : ''};
+`
+
+type LiveType = {
+  color?: string,
+}
+
+export const LiveSign = styled(MatchDate)<LiveType>`
+  background-color: ${({ color }) => color ?? '#CC0000'};
+  margin-left: auto;
+  
+  ${isMobileDevice
+    ? css`
+        font-size: 7px;
+        padding: 3px;
+      `
+    : ''};
+`
+
+export const Time = styled.span`
+  margin: 0 0.2rem;
+  ${isMobileDevice
+    ? css`
+        font-size: 10px;
+      `
+    : ''};
+`
+
+export const Info = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 0.85rem 0.472rem 0 0.519rem;
+  color: #fff;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  ${isMobileDevice
+    ? css`
+        /* position: absolute;
+        top: 0;
+        left: 45%; */
+        width: 60%;
+        height: 100%;
+        padding: 9px;
+      `
+    : ''};
+`
+
+export const SecondaryInfo = styled.div`
+  display: flex;
+  align-items: center;
+
+  ${isMobileDevice
+    ? css`
+        justify-content: space-between;
+      `
+    : ''};
+`
+
+export const CountryFlag = styled.img`
+  width: 0.71rem;
+  height: 0.75rem;
+  margin-left: 0.567rem;
+  object-fit: contain;
+  ${isMobileDevice
+    ? css`
+        object-fit: cover;
+        width: 12px;
+        height: 100%;
+        margin-left: 8px;
+      `
+    : ''};
+`
+
+type FavoriteSignProps = {
+  color?: string,
+  marginLeft?: number,
+}
+
+export const FavoriteSign = styled.span<FavoriteSignProps>`
+  display: inline-block;
+  margin-left: ${({ marginLeft = 9 }) => marginLeft}px;
+  color: ${({ color }) => color};
+  ${isMobileDevice
+    ? css`
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 8px;
+        height: 8px;
+      `
+    : ''};
+`
+
+const nameStyles = css`
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+`
+
+export const TournamentName = styled.span`
+  max-width: 95%;
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 0.567rem;
+  line-height: 0.95rem;
+  margin-left: 0.567rem;
+  ${isMobileDevice
+    ? css`
+        font-size: 10px;
+        line-height: 100%;
+        max-width: 100%;
+      `
+    : ''};
+
+  ${nameStyles}
+`
+
+export const Teams = styled.div`
+  margin-bottom: 0.567rem;
+`
+
+export const Team = styled.span`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-weight: 600;
+  font-size: 0.85rem;
+  line-height: 1.14rem;
+  color: #fff;
+  ${isMobileDevice
+    ? css`
+        font-size: 14px;
+        line-height: 20px;
+      `
+    : ''};
+`
+
+export const NameSignWrapper = styled.div`
+  display: flex;
+  max-width: 90%;
+  align-items: center;
+`
+
+export const TeamName = styled(Name)`
+  ${nameStyles}
+`
+
+export const Score = styled.div`
+
+${isMobileDevice
+    ? css`
+        display: flex;
+        justify-content: center;
+        width: 15px;
+      `
+    : ''};
+  
+`
+
+export const TeamLogos = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0.71rem auto 0 auto;
+  z-index: 1;
+`
+
+export const TeamLogo = styled(ProfileLogo)`
+  width: 33%;
+  max-height: 100%;
+
+  :last-child {
+    margin-left: 0.8rem;
+  }
+  ${isMobileDevice
+    ? css`
+        width: 30%;
+      `
+    : ''};
+`
+
+export const BuyMatchBadge = styled.span`
+  position: absolute;
+  left: 0.472rem;
+  bottom: 0.519rem;
+  width: 1.18rem;
+  height: 1.18rem;
+  cursor: pointer;
+
+  /* background-image: url(/images/dollar-sign.svg); */
+  color: rgba(255, 255, 255, 0.7);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 0.472rem 0.71rem;
+  background-color: rgba(255, 255, 255, 0.19);
+  border-radius: 50%;
+  box-shadow: 0px 0.08rem 0.283rem rgba(0, 0, 0, 0.5);
+
+  ${isMobileDevice
+    ? css`
+        position: static;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 15px;
+        height: 15px;
+        /* background-size: 40%; */
+      `
+    : ''};
+`
+
+export const ScDollar = styled(Icon)`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`
diff --git a/src/features/MatchCard/CardFrontside/index.tsx b/src/features/MatchCard/CardFrontside/index.tsx
index aaefcd93..18518766 100644
--- a/src/features/MatchCard/CardFrontside/index.tsx
+++ b/src/features/MatchCard/CardFrontside/index.tsx
@@ -6,6 +6,7 @@ import getUnixTime from 'date-fns/getUnixTime'
 import { ProfileTypes, PAGES } from 'config'
 
 import type { Match } from 'features/Matches'
+import { SportIcon } from 'components/SportIcon/SportIcon'
 import { useMatchSwitchesStore } from 'features/MatchSwitches'
 import { useName } from 'features/Name'
 import { T9n } from 'features/T9n'
@@ -27,14 +28,15 @@ import {
   TeamName,
   Teams,
   Time,
+  TournamentName,
   TeamLogos,
   TeamLogo,
   BuyMatchBadge,
+  CountryFlag,
   SecondaryInfo,
   FavoriteSign,
   NameSignWrapper,
   HoverFrame,
-  ScDollar,
 } from '../styled'
 import { useCardPreview } from './hooks'
 
@@ -67,7 +69,11 @@ export const CardFrontside = ({
   const { isInFavorites } = useUserFavoritesStore()
   const { isScoreHidden } = useMatchSwitchesStore()
   const isInFuture = getUnixTime(date) > getUnixTime(new Date())
-  const showScore = !(isInFuture || isScoreHidden) || (live && !isScoreHidden)
+  const showScore = !(
+    isInFuture
+    || isScoreHidden
+  ) || (live && !isScoreHidden)
+  const tournamentInFavorites = isInFavorites(ProfileTypes.TOURNAMENTS, tournament.id)
   const team1InFavorites = isInFavorites(ProfileTypes.TEAMS, team1.id)
   const team2InFavorites = isInFavorites(ProfileTypes.TEAMS, team2.id)
 
@@ -77,42 +83,50 @@ export const CardFrontside = ({
   })
 
   return (
-    <CardWrapperOuter onClick={onClick} onKeyPress={onKeyPress}>
+    <CardWrapperOuter
+      onClick={onClick}
+      onKeyPress={onKeyPress}
+    >
       <CardWrapper>
         <HoverFrame />
         <PreviewWrapper>
           {previewImage && (
-            <Preview title={tournamentName} src={previewImage} />
-          )}
-          {access === MatchAccess.NoCountryAccess ? (
-            <NoAccessMessage />
-          ) : (
-            <TeamLogos>
-              <TeamLogo
-                id={team1.id}
-                nameAsTitle
-                altNameObj={team1}
-                sportType={sportType}
-                profileType={ProfileTypes.TEAMS}
-              />
-              <TeamLogo
-                id={team2.id}
-                nameAsTitle
-                altNameObj={team2}
-                sportType={sportType}
-                profileType={ProfileTypes.TEAMS}
-              />
-            </TeamLogos>
+            <Preview
+              title={tournamentName}
+              src={previewImage}
+            />
           )}
+          {access === MatchAccess.NoCountryAccess
+            ? <NoAccessMessage />
+            : (
+              <TeamLogos>
+                <TeamLogo
+                  id={team1.id}
+                  nameAsTitle
+                  altNameObj={team1}
+                  sportType={sportType}
+                  profileType={ProfileTypes.TEAMS}
+                />
+                <TeamLogo
+                  id={team2.id}
+                  nameAsTitle
+                  altNameObj={team2}
+                  sportType={sportType}
+                  profileType={ProfileTypes.TEAMS}
+                />
+              </TeamLogos>
+            )}
+          {access === MatchAccess.CanBuyMatch && <BuyMatchBadge />}
           <MatchTimeInfo>
             <MatchDate isHomePage={isHomePage}>
               {isHomePage ? null : formattedDate}
-              {live && (
-                <LiveSign>
-                  <T9n t='live' />
-                </LiveSign>
-              )}
+              <Time>{time}</Time>
             </MatchDate>
+            {live && (
+              <LiveSign>
+                <T9n t='live' />
+              </LiveSign>
+            )}
           </MatchTimeInfo>
         </PreviewWrapper>
         <Info>
@@ -133,11 +147,15 @@ export const CardFrontside = ({
             </Team>
           </Teams>
           <SecondaryInfo>
-            <Time>{time}</Time>
-            {access === MatchAccess.CanBuyMatch && (
-              <BuyMatchBadge>
-                <ScDollar refIcon='Dollar' size={5} />
-              </BuyMatchBadge>
+            <SportIcon sport={sportType} size={10} />
+            <CountryFlag src={`https://instatscout.com/images/flags/48/${match.countryId}.png`} />
+            {tournament && (
+              <NameSignWrapper>
+                <TournamentName title={tournamentName}>
+                  {tournamentName}
+                </TournamentName>
+                {tournamentInFavorites && <FavoriteSign marginLeft={12} />}
+              </NameSignWrapper>
             )}
           </SecondaryInfo>
         </Info>
diff --git a/src/features/MatchCard/index.tsx b/src/features/MatchCard/index.tsx
index e25721d9..9f466b16 100644
--- a/src/features/MatchCard/index.tsx
+++ b/src/features/MatchCard/index.tsx
@@ -1,6 +1,9 @@
 import type { Match } from 'features/Matches'
 
+import { isMobileDevice } from 'config/userAgent'
+
 import { CardFrontside } from './CardFrontside'
+import { CardFrontsideMobile } from './CardFrontside/MatchCardMobile'
 import { useCard } from './hooks'
 
 type Props = {
@@ -8,13 +11,12 @@ type Props = {
 }
 
 export const MatchCard = ({ match }: Props) => {
-  const {
-    onKeyPress,
-    onMatchClick,
-  } = useCard(match)
+  const { onKeyPress, onMatchClick } = useCard(match)
+
+  const CurrentComponent = isMobileDevice ? CardFrontsideMobile : CardFrontside
 
   return (
-    <CardFrontside
+    <CurrentComponent
       match={match}
       onClick={onMatchClick}
       onKeyPress={onKeyPress}
diff --git a/src/features/MatchCard/styled.tsx b/src/features/MatchCard/styled.tsx
index da1aa8c2..d57fd222 100644
--- a/src/features/MatchCard/styled.tsx
+++ b/src/features/MatchCard/styled.tsx
@@ -4,7 +4,6 @@ import { devices } from 'config/devices'
 import { isMobileDevice } from 'config/userAgent'
 
 import { Name } from 'features/Name'
-import { Icon } from 'features/Icon'
 import { ProfileLogo } from 'features/ProfileLogo'
 
 export const CardWrapperOuter = styled.li.attrs({
@@ -14,17 +13,18 @@ export const CardWrapperOuter = styled.li.attrs({
   position: relative;
   ${isMobileDevice
     ? css`
-        width: 100%;
-        padding-top: 0;
-        margin-top: 6px;
-
-        @media screen and (orientation: landscape) {
-          width: 100%;
-          :nth-child(odd) {
-            margin-right: 10px;
-          }
-        }
-      `
+      width: 100%;
+      padding-top: 0;
+      height: 90px;
+      margin-bottom: 10px;
+
+      @media screen and (orientation: landscape){
+        width: 49%;
+        :nth-child(odd){
+        margin-right: 10px;
+      }
+      }
+    `
     : ''};
 `
 
@@ -41,12 +41,10 @@ export const CardWrapper = styled.div`
   cursor: pointer;
   ${isMobileDevice
     ? css`
-        position: static;
-        display: flex;
-        width: 100%;
-        height: 75px;
-        padding-bottom: 0;
-      `
+      width: 100%;
+      height: 90px;
+      padding-bottom: 0;
+    `
     : ''};
 `
 
@@ -71,9 +69,9 @@ export const PreviewWrapper = styled.div`
   height: 60%;
   ${isMobileDevice
     ? css`
-        width: 40%;
-        height: 100%;
-      `
+      width: 50%;
+      height: 100%;
+    `
     : ''};
 `
 
@@ -83,12 +81,6 @@ export const Preview = styled.img`
   height: 100%;
   object-fit: cover;
   opacity: 0.4;
-
-  ${isMobileDevice
-    ? css`
-        opacity: 0.2;
-      `
-    : ''};
 `
 
 export const MatchTimeInfo = styled.div`
@@ -126,38 +118,19 @@ export const MatchDate = styled.div<MatchDateProps>`
   }
   ${isMobileDevice
     ? css`
-        background-color: transparent;
-        margin-left: 4px;
-        height: 15px;
-        width: 22px;
-        font-size: 7px;
-      `
+     height: 15px;
+     font-size: 8px;
+    `
     : ''};
 `
 
-type LiveType = {
-  color?: string,
-}
-
-export const LiveSign = styled(MatchDate)<LiveType>`
-  background-color: ${({ color }) => color ?? '#CC0000'};
+export const LiveSign = styled(MatchDate)`
+  background-color: #CC0000;
   margin-left: auto;
-  
-  ${isMobileDevice
-    ? css`
-        font-size: 7px;
-        padding: 3px;
-      `
-    : ''};
 `
 
 export const Time = styled.span`
   margin: 0 0.2rem;
-  ${isMobileDevice
-    ? css`
-        font-size: 10px;
-      `
-    : ''};
 `
 
 export const Info = styled.div`
@@ -170,25 +143,19 @@ export const Info = styled.div`
   white-space: nowrap;
   ${isMobileDevice
     ? css`
-        /* position: absolute;
-        top: 0;
-        left: 45%; */
-        width: 60%;
-        height: 100%;
-        padding: 9px;
-      `
+      position: absolute;
+      top: 0;
+      left: 50%;
+      width: 50%;
+      height: 100%;
+      padding: 13px 12px 13px 10px;
+    `
     : ''};
 `
 
 export const SecondaryInfo = styled.div`
   display: flex;
   align-items: center;
-
-  ${isMobileDevice
-    ? css`
-        justify-content: space-between;
-      `
-    : ''};
 `
 
 export const CountryFlag = styled.img`
@@ -196,34 +163,32 @@ export const CountryFlag = styled.img`
   height: 0.75rem;
   margin-left: 0.567rem;
   object-fit: contain;
+  object-position: bottom;
   ${isMobileDevice
     ? css`
-        object-fit: cover;
-        width: 12px;
-        height: 100%;
-        margin-left: 8px;
-      `
+      width: 12px;
+      height: 8px;
+      margin-left: 3.5px;
+    `
     : ''};
 `
 
 type FavoriteSignProps = {
-  color?: string,
   marginLeft?: number,
 }
 
 export const FavoriteSign = styled.span<FavoriteSignProps>`
   display: inline-block;
+  width: 0.472rem;
+  height: 0.472rem;
   margin-top: 0.08rem;
   margin-left: ${({ marginLeft = 9 }) => marginLeft}px;
-  color: ${({ color }) => color};
+  background: url('/images/sportFavStar.png') no-repeat center / 100% 100%;
   ${isMobileDevice
     ? css`
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 8px;
-        height: 8px;
-      `
+      width: 10px;
+      height: 10px;
+    `
     : ''};
 `
 
@@ -241,10 +206,10 @@ export const TournamentName = styled.span`
   margin-left: 0.567rem;
   ${isMobileDevice
     ? css`
-        font-size: 10px;
-        line-height: 100%;
-        max-width: 100%;
-      `
+      font-size: 10px;
+      line-height: 100%;
+      max-width: 100%;
+    `
     : ''};
 
   ${nameStyles}
@@ -252,6 +217,11 @@ export const TournamentName = styled.span`
 
 export const Teams = styled.div`
   margin-bottom: 0.567rem;
+  ${isMobileDevice
+    ? css`
+      margin-bottom: 15px;
+    `
+    : ''};
 `
 
 export const Team = styled.span`
@@ -264,9 +234,9 @@ export const Team = styled.span`
   color: #fff;
   ${isMobileDevice
     ? css`
-        font-size: 14px;
-        line-height: 20px;
-      `
+      font-size: 14px;
+      line-height: 20px;
+    `
     : ''};
 `
 
@@ -280,17 +250,7 @@ export const TeamName = styled(Name)`
   ${nameStyles}
 `
 
-export const Score = styled.div`
-
-${isMobileDevice
-    ? css`
-        display: flex;
-        justify-content: center;
-        width: 15px;
-      `
-    : ''};
-  
-`
+export const Score = styled.div``
 
 export const TeamLogos = styled.div`
   display: flex;
@@ -306,11 +266,12 @@ export const TeamLogo = styled(ProfileLogo)`
 
   :last-child {
     margin-left: 0.8rem;
+
   }
   ${isMobileDevice
     ? css`
-        width: 30%;
-      `
+      width: 30%;
+    `
     : ''};
 `
 
@@ -322,30 +283,20 @@ export const BuyMatchBadge = styled.span`
   height: 1.18rem;
   cursor: pointer;
 
-  /* background-image: url(/images/dollar-sign.svg); */
-  color: rgba(255, 255, 255, 0.7);
+  background-image: url(/images/dollar-sign.svg);
   background-position: center;
   background-repeat: no-repeat;
   background-size: 0.472rem 0.71rem;
-  background-color: rgba(255, 255, 255, 0.19);
+  background-color: #fff;
   border-radius: 50%;
+  border: 0.5px solid rgba(0, 0, 0, 0.2);
   box-shadow: 0px 0.08rem 0.283rem rgba(0, 0, 0, 0.5);
 
   ${isMobileDevice
     ? css`
-        position: static;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 15px;
-        height: 15px;
-        /* background-size: 40%; */
-      `
+      width: 19px;
+      height: 17px;
+      background-size: 40%;
+    `
     : ''};
 `
-
-export const ScDollar = styled(Icon)`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`
diff --git a/src/features/TournamentList/components/Tournament/index.tsx b/src/features/TournamentList/components/Tournament/index.tsx
index 0ffd9b15..c0093e31 100644
--- a/src/features/TournamentList/components/Tournament/index.tsx
+++ b/src/features/TournamentList/components/Tournament/index.tsx
@@ -11,7 +11,7 @@ import {
   CountryFlag,
   FavoriteSign,
   LiveSign,
-} from 'features/MatchCard/styled'
+} from 'features/MatchCard/CardFrontside/MatchCardMobile/styled'
 import { useUserFavoritesStore } from 'features/UserFavorites/store'
 
 import type { TournamentType } from 'requests/getMatches/types'
diff --git a/src/libs/objects/Calendar.tsx b/src/libs/objects/Calendar.tsx
index 3be87dcc..2ee5776c 100644
--- a/src/libs/objects/Calendar.tsx
+++ b/src/libs/objects/Calendar.tsx
@@ -1,8 +1,6 @@
 export const Calendar = (): JSX.Element => (
   <svg
     xmlns='http://www.w3.org/2000/svg'
-    width='9'
-    height='9'
     fill='true'
     viewBox='0 0 9 9'
   >