diff --git a/components/layout/navbar.tsx b/components/layout/navbar.tsx
index 5520810..4f034d0 100644
--- a/components/layout/navbar.tsx
+++ b/components/layout/navbar.tsx
@@ -99,7 +99,7 @@ const Navbar: NextPage = () => {
             >
               Log out
             </Button>
-            <p>Version 2.2.2</p>
+            <p>Version 2.3.0</p>
           </DrawerFooter>
         </DrawerContent>
       </Drawer>
diff --git a/components/matches/detail/field/field.module.scss b/components/matches/detail/field/field.module.scss
index e9aa37f..724fb60 100644
--- a/components/matches/detail/field/field.module.scss
+++ b/components/matches/detail/field/field.module.scss
@@ -7,16 +7,64 @@
   align-items: center;
 
   .field {
-    width: 100%;
+    border-radius: 20px;
+    border: 3px solid ghostwhite;
     height: 400px;
-    background-image: url('/images/field.svg');
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    margin-top: 20px;
+    background-color: #6abd67;
     display: grid;
+    margin-top: 20px;
+    position: relative;
+    width: 90%;
+    
+    .smallArea {
+      border: 4px solid ghostwhite;
+      border-bottom: 0;
+      bottom: -43px;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      position: absolute;
+      height: 80px;
+      width: 30%;
+    }
+
+    .bigArea {
+      border: 4px solid ghostwhite;
+      border-bottom: 0;
+      bottom: -64px;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      position: absolute;
+      height: 128px;
+      width: 60%;
+    }
+
+    .outArea {
+      position: absolute;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      height: 71px;
+      bottom: 89px;
+      border-radius: 150px 150px 0 0;
+      border: 4px solid ghostwhite;
+      width: 25%;
+    }
+    
+    .middle {
+      position: absolute;
+      left: 50%;
+      top: 32px;
+      transform: translate(-50%, -50%);
+      height: 70px;
+      bottom: 89px;
+      width: 25%;
+      border-radius: 0 0 150px 150px;
+      border: 4px solid ghostwhite;
+    }
+
 
     .player {
       margin: auto auto;
+      z-index: 1;
     }
 
     .player1 {
@@ -392,13 +440,30 @@
 @media (max-width: $medium-device) {
   .fieldGroup {
     width: 90%;
-  }
-}
 
-@media (max-width: $medium-small-device) {
-  .fieldGroup {
     .field {
-      height: 315px;
+      .smallArea {
+        bottom: -32px;
+        height: 60px;
+      }
+
+      .bigArea {
+        bottom: -46px;
+        height: 92px;
+        width: 55%;
+      }
+
+      .outArea {
+        bottom: 65px;
+        height: 48px;
+        width: 82px;
+      }
+
+      .middle {
+        top: 22px;
+        height: 48px;
+        width: 82px;
+      }
     }
   }
 }
@@ -406,16 +471,28 @@
 @media (max-width: $small-device) {
   .fieldGroup {
     .field {
-      background-image: url('/images/field-mobile-md.svg');
+      .smallArea {
+        bottom: -26px;
+        height: 45px;
+      }
+
+      .bigArea {
+        bottom: -38px;
+        height: 75px;
+        width: 55%;
+      }
+
+      .outArea {
+        bottom: 51px;
+        height: 40px;
+        width: 64px;
+      }
+
+      .middle {
+        top: 17px;
+        height: 40px;
+        width: 64px;
+      }
     }
   }
 }
-
-@media (max-width: $extra-small-device) {
-  .fieldGroup {
-    .field {
-      background-image: url('/images/field-mobile-sm.svg');
-    }
-  }
-}
-
diff --git a/components/matches/detail/field/field.tsx b/components/matches/detail/field/field.tsx
index 32e1bc9..cf594f8 100644
--- a/components/matches/detail/field/field.tsx
+++ b/components/matches/detail/field/field.tsx
@@ -78,6 +78,10 @@ const FieldLayout: NextPage<Props> = ({team, isAway}) => {
       <section className={`${styles.field} 
         ${styles[`${formationTypeMap[matchDetails.match[teamKey].formation]}${formationKeyMap[team.length]}`]}`}>
         {playersMap}
+        <div className={styles.smallArea} />
+        <div className={styles.bigArea} />
+        <div className={styles.outArea} />
+        <div className={styles.middle} />
       </section>
       <Stack className={styles.check} spacing={5} direction='row'>
         <Checkbox 
diff --git a/components/matches/detail/match-detail.module.scss b/components/matches/detail/match-detail.module.scss
index 5fd1ecd..8279789 100644
--- a/components/matches/detail/match-detail.module.scss
+++ b/components/matches/detail/match-detail.module.scss
@@ -9,6 +9,8 @@
   .fields {
     display: flex;
     justify-content: space-evenly;
+    flex-wrap: wrap;
+    width: 100%;
   }
 
   .leaveButton {
diff --git a/public/favicon.ico b/public/favicon.ico
index 718d6fe..d556be9 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/public/images/chelsea-fc-logo.png b/public/images/chelsea-fc-logo.png
deleted file mode 100644
index 8a4f44a..0000000
Binary files a/public/images/chelsea-fc-logo.png and /dev/null differ
diff --git a/public/images/colombia-flag.png b/public/images/colombia-flag.png
deleted file mode 100644
index 87d2e6a..0000000
Binary files a/public/images/colombia-flag.png and /dev/null differ
diff --git a/public/images/field-mobile-md.svg b/public/images/field-mobile-md.svg
deleted file mode 100644
index ba885e8..0000000
--- a/public/images/field-mobile-md.svg
+++ /dev/null
@@ -1,32 +0,0 @@
-<svg width="453" height="478" viewBox="0 0 453 478" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_d_642_14)">
-<rect x="4" y="34.0759" width="445" height="435.924" rx="11" fill="#6ABD67"/>
-<rect x="4.5" y="34.5759" width="444" height="434.924" rx="10.5" stroke="white"/>
-</g>
-<line x1="85.9526" y1="470" x2="85.9526" y2="380" stroke="white" stroke-width="5"/>
-<line x1="359.611" y1="470" x2="359.611" y2="380" stroke="#FFFDFD" stroke-width="5"/>
-<line x1="83.9492" y1="382.5" x2="361.668" y2="382.5" stroke="white" stroke-width="5"/>
-<line x1="151.728" y1="470" x2="151.728" y2="428" stroke="white" stroke-width="5"/>
-<line x1="294.648" y1="470" x2="294.648" y2="428" stroke="#FFFDFD" stroke-width="5"/>
-<line x1="148.814" y1="430.5" x2="295.793" y2="430.5" stroke="white" stroke-width="5"/>
-<mask id="path-9-inside-1_642_14" fill="white">
-<path d="M292.119 385C292.119 373.596 285.285 362.658 273.12 354.594C260.956 346.53 244.457 342 227.254 342C210.051 342 193.553 346.53 181.388 354.594C169.224 362.658 162.39 373.596 162.39 385L227.254 385H292.119Z"/>
-</mask>
-<path d="M292.119 385C292.119 373.596 285.285 362.658 273.12 354.594C260.956 346.53 244.457 342 227.254 342C210.051 342 193.553 346.53 181.388 354.594C169.224 362.658 162.39 373.596 162.39 385L227.254 385H292.119Z" stroke="#FDFDFD" stroke-width="10" mask="url(#path-9-inside-1_642_14)"/>
-<mask id="path-10-inside-2_642_14" fill="white">
-<path d="M292.119 33.5C292.119 37.8993 290.421 42.2555 287.124 46.3199C283.826 50.3843 278.993 54.0773 272.899 57.1881C266.806 60.2988 259.572 62.7664 251.611 64.45C243.65 66.1335 235.117 67 226.5 67C217.883 67 209.35 66.1335 201.389 64.45C193.428 62.7664 186.194 60.2988 180.101 57.1881C174.007 54.0773 169.174 50.3843 165.876 46.3199C162.579 42.2555 160.881 37.8993 160.881 33.5L226.5 33.5H292.119Z"/>
-</mask>
-<path d="M292.119 33.5C292.119 37.8993 290.421 42.2555 287.124 46.3199C283.826 50.3843 278.993 54.0773 272.899 57.1881C266.806 60.2988 259.572 62.7664 251.611 64.45C243.65 66.1335 235.117 67 226.5 67C217.883 67 209.35 66.1335 201.389 64.45C193.428 62.7664 186.194 60.2988 180.101 57.1881C174.007 54.0773 169.174 50.3843 165.876 46.3199C162.579 42.2555 160.881 37.8993 160.881 33.5L226.5 33.5H292.119Z" stroke="#FDFDFD" stroke-width="10" mask="url(#path-10-inside-2_642_14)"/>
-<defs>
-<filter id="filter0_d_642_14" x="0" y="34.0759" width="453" height="443.924" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="4"/>
-<feGaussianBlur stdDeviation="2"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_642_14"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_642_14" result="shape"/>
-</filter>
-</defs>
-</svg>
diff --git a/public/images/field-mobile-sm.svg b/public/images/field-mobile-sm.svg
deleted file mode 100644
index 358bccc..0000000
--- a/public/images/field-mobile-sm.svg
+++ /dev/null
@@ -1,32 +0,0 @@
-<svg width="384" height="489" viewBox="0 0 384 489" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_d_642_14)">
-<rect x="4" y="34.8734" width="376" height="446.127" rx="11" fill="#6ABD67"/>
-<rect x="4.5" y="35.3734" width="375" height="445.127" rx="10.5" stroke="white"/>
-</g>
-<line x1="72.8577" y1="481" x2="72.8577" y2="388.894" stroke="white" stroke-width="5"/>
-<line x1="304.084" y1="481" x2="304.084" y2="388.894" stroke="#FFFDFD" stroke-width="5"/>
-<line x1="71.5526" y1="391.511" x2="306.209" y2="391.511" stroke="white" stroke-width="5"/>
-<line x1="128.434" y1="481" x2="128.434" y2="438.017" stroke="white" stroke-width="5"/>
-<line x1="249.193" y1="481" x2="249.193" y2="438.017" stroke="#FFFDFD" stroke-width="5"/>
-<line x1="126.359" y1="440.634" x2="250.549" y2="440.634" stroke="white" stroke-width="5"/>
-<mask id="path-9-inside-1_642_14" fill="white">
-<path d="M247.444 394.011C247.444 382.339 241.67 371.146 231.391 362.893C221.113 354.641 207.173 350.004 192.637 350.004C178.102 350.004 164.161 354.641 153.883 362.893C143.605 371.146 137.83 382.339 137.83 394.011L192.637 394.011H247.444Z"/>
-</mask>
-<path d="M247.444 394.011C247.444 382.339 241.67 371.146 231.391 362.893C221.113 354.641 207.173 350.004 192.637 350.004C178.102 350.004 164.161 354.641 153.883 362.893C143.605 371.146 137.83 382.339 137.83 394.011L192.637 394.011H247.444Z" stroke="#FDFDFD" stroke-width="10" mask="url(#path-9-inside-1_642_14)"/>
-<mask id="path-10-inside-2_642_14" fill="white">
-<path d="M247.444 34.284C247.444 38.7863 246.01 43.2444 243.224 47.404C240.437 51.5635 236.353 55.343 231.205 58.5265C226.056 61.7101 219.944 64.2354 213.218 65.9584C206.491 67.6813 199.281 68.5681 192 68.5681C184.719 68.5681 177.509 67.6813 170.782 65.9584C164.056 64.2354 157.944 61.7101 152.795 58.5265C147.647 55.343 143.563 51.5635 140.776 47.404C137.99 43.2444 136.556 38.7863 136.556 34.284L192 34.284H247.444Z"/>
-</mask>
-<path d="M247.444 34.284C247.444 38.7863 246.01 43.2444 243.224 47.404C240.437 51.5635 236.353 55.343 231.205 58.5265C226.056 61.7101 219.944 64.2354 213.218 65.9584C206.491 67.6813 199.281 68.5681 192 68.5681C184.719 68.5681 177.509 67.6813 170.782 65.9584C164.056 64.2354 157.944 61.7101 152.795 58.5265C147.647 55.343 143.563 51.5635 140.776 47.404C137.99 43.2444 136.556 38.7863 136.556 34.284L192 34.284H247.444Z" stroke="#FDFDFD" stroke-width="10" mask="url(#path-10-inside-2_642_14)"/>
-<defs>
-<filter id="filter0_d_642_14" x="0" y="34.8734" width="384" height="454.127" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="4"/>
-<feGaussianBlur stdDeviation="2"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_642_14"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_642_14" result="shape"/>
-</filter>
-</defs>
-</svg>
diff --git a/public/images/field.svg b/public/images/field.svg
deleted file mode 100644
index 55de46b..0000000
--- a/public/images/field.svg
+++ /dev/null
@@ -1,29 +0,0 @@
-<svg width="272" height="218" viewBox="0 0 272 218" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_d_918_9433)">
-<rect x="4" y="0.0447388" width="263.935" height="209.955" rx="11" fill="#6ABD67"/>
-<rect x="4.5" y="0.544739" width="262.935" height="208.955" rx="10.5" stroke="white"/>
-</g>
-<line x1="53.5" y1="209.807" x2="53.5" y2="144" stroke="white" stroke-width="3"/>
-<line x1="214.9" y1="210" x2="214.9" y2="144.193" stroke="#FFFDFD" stroke-width="3"/>
-<line x1="51.6816" y1="142.693" x2="216.4" y2="142.693" stroke="white" stroke-width="3"/>
-<path d="M92.1851 210V177.097" stroke="white" stroke-width="3"/>
-<line x1="176.369" y1="210" x2="176.369" y2="177.097" stroke="#FFFDFD" stroke-width="3"/>
-<line x1="90.6938" y1="175.597" x2="177.869" y2="175.597" stroke="white" stroke-width="3"/>
-<mask id="path-9-inside-1_918_9433" fill="white">
-<path d="M174.98 144.193C174.98 135.744 170.92 127.64 163.694 121.665C156.468 115.691 146.668 112.334 136.449 112.334C126.23 112.334 116.43 115.691 109.204 121.665C101.978 127.64 97.9184 135.744 97.9184 144.193L136.449 144.193H174.98Z"/>
-</mask>
-<path d="M174.98 144.193C174.98 135.744 170.92 127.64 163.694 121.665C156.468 115.691 146.668 112.334 136.449 112.334C126.23 112.334 116.43 115.691 109.204 121.665C101.978 127.64 97.9184 135.744 97.9184 144.193L136.449 144.193H174.98Z" stroke="#FDFDFD" stroke-width="6" mask="url(#path-9-inside-1_918_9433)"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M98 0.958811C98 4.12637 99.2923 8.20944 101.377 11.6291C102.513 13.4918 105.103 16.503 106.957 18.1156C113.163 23.5145 122.231 27.0955 131.707 27.8898C133.9 28.0738 139.042 28.019 141.311 27.7877C146.134 27.296 152.279 25.6721 155.748 23.9731C156.118 23.7917 156.926 23.4106 157.543 23.1262C158.16 22.8417 159.09 22.3372 159.608 22.0051C160.127 21.673 160.584 21.4013 160.623 21.4013C160.808 21.4013 164.185 18.8588 165.248 17.9188C167.236 16.1614 169.362 13.6573 170.669 11.5325C172.686 8.25453 173.995 4.02443 173.999 0.776002L174 0H136H98V0.958811ZM170.63 3.79832C170.26 5.71693 169.045 8.48537 167.711 10.4502C162.565 18.0292 153.143 23.0553 141.311 24.5331C139.189 24.7981 132.811 24.7981 130.689 24.5331C122.167 23.4686 114.962 20.6024 109.37 16.0515C106.787 13.9496 104.08 10.6023 102.798 7.926C102.137 6.54635 101.291 4.10807 101.291 3.58104C101.291 3.2726 101.871 3.26737 136.012 3.26737H170.732L170.63 3.79832Z" fill="#FFFEFE"/>
-<defs>
-<filter id="filter0_d_918_9433" x="0" y="0.0447388" width="271.935" height="217.955" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="4"/>
-<feGaussianBlur stdDeviation="2"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_918_9433"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_918_9433" result="shape"/>
-</filter>
-</defs>
-</svg>
diff --git a/public/images/liverpool-fc-logo.png b/public/images/liverpool-fc-logo.png
deleted file mode 100644
index a3da1e0..0000000
Binary files a/public/images/liverpool-fc-logo.png and /dev/null differ
diff --git a/public/images/user-image-fallback.png b/public/images/user-image-fallback.png
deleted file mode 100644
index 1eceda5..0000000
Binary files a/public/images/user-image-fallback.png and /dev/null differ