diff --git a/components/layout/navbar.module.scss b/components/layout/navbar.module.scss
index 9514237..27d6a8b 100644
--- a/components/layout/navbar.module.scss
+++ b/components/layout/navbar.module.scss
@@ -1,3 +1,7 @@
+.navbarSpacing {
+  height: 80px;
+}
+
 .container {
   display: flex;
   padding: 1rem;
diff --git a/components/layout/navbar.tsx b/components/layout/navbar.tsx
index ce63295..5520810 100644
--- a/components/layout/navbar.tsx
+++ b/components/layout/navbar.tsx
@@ -27,7 +27,7 @@ const Navbar: NextPage = () => {
   const { image, name } = useSelector((state: RootState) => state.profile).profile;
 
   if (!session) {
-    return <></>;
+    return <div className={styles.navbarSpacing}></div>;
   }
 
   return (
@@ -99,7 +99,7 @@ const Navbar: NextPage = () => {
             >
               Log out
             </Button>
-            <p>Version 2.2.1</p>
+            <p>Version 2.2.2</p>
           </DrawerFooter>
         </DrawerContent>
       </Drawer>
diff --git a/components/matches/detail/match-detail.tsx b/components/matches/detail/match-detail.tsx
index 0c1fc48..496b622 100644
--- a/components/matches/detail/match-detail.tsx
+++ b/components/matches/detail/match-detail.tsx
@@ -10,6 +10,8 @@ import styles from './match-detail.module.scss';
 import LeaveIcon from '../../../assets/svg/leave.svg';
 import ModalAlert from '../../layout/modal-alert';
 import { leaveMatch } from '../../../services/api-configuration';
+import MatchDetailsSkeleton from '../../skeletons/match-details-skeleton';
+import { initialState } from '../../../store/match-details.slice';
 
 const MatchDetailsLayout: NextPage = () => {
   const matchDetails = useSelector((state: RootState) => state.matchDetails);
@@ -41,6 +43,10 @@ const MatchDetailsLayout: NextPage = () => {
     }
   });
 
+  if(matchDetails === initialState) {
+    return <MatchDetailsSkeleton />
+  }
+
   const handleLeaveMatch = () => {
     mutateLeaveMatch(matchDetails.match._id);
   };
diff --git a/components/profile/player-card.tsx b/components/profile/player-card.tsx
index a54f4bd..03ba62e 100644
--- a/components/profile/player-card.tsx
+++ b/components/profile/player-card.tsx
@@ -8,6 +8,8 @@ import Nationality from './player-card/nationality';
 import AvatarSelector from './player-card/avatar-selector';
 import NameInput from './player-card/name-input';
 import RatingList from './player-card/rating-list';
+import { initialState as profileInitialState } from '../../store/profile.slice';
+import PlayerCardSkeleton from '../skeletons/player-card-skeleton';
 
 interface Props {
   className: string;
@@ -15,13 +17,19 @@ interface Props {
 
 const PlayerCard: NextPage<Props> = ({ className }: Props) => {
 
-  const { overall } = useSelector((state: RootState) => state.profile).profile;
+  const profile = useSelector((state: RootState) => state.profile).profile;
+
+  if(profile === profileInitialState.profile) {
+    return (
+      <PlayerCardSkeleton />
+    );
+  };
 
   return (
     <div className={`${styles.card} ${className}`}>
       <div className={styles.cardHeader}>
         <div className={styles.overall}>
-          <h1 className={styles.title}>{overall}</h1>
+          <h1 className={styles.title}>{profile.overall}</h1>
           <Position />
           <Divider
             borderColor={'darks.50'}
diff --git a/components/profile/player-rate.module.scss b/components/profile/player-rate.module.scss
index 83c6727..38dc8c8 100644
--- a/components/profile/player-rate.module.scss
+++ b/components/profile/player-rate.module.scss
@@ -1,3 +1,5 @@
+@import '../../styles/colors';
+
 .stat {
   margin-bottom: 10px;
   
diff --git a/components/profile/player-rate.tsx b/components/profile/player-rate.tsx
index 952f4f9..552f14e 100644
--- a/components/profile/player-rate.tsx
+++ b/components/profile/player-rate.tsx
@@ -6,10 +6,11 @@ import {
 } from '@chakra-ui/react';
 import type { NextPage } from 'next';
 import { useDispatch, useSelector } from 'react-redux';
-import { profileActions } from '../../store/profile.slice';
+import { initialState, profileActions } from '../../store/profile.slice';
 import { RootState } from '../../interfaces/State';
 import styles from './player-rate.module.scss';
 import { Stats } from '../../types/profile';
+import PlayerStatsSkeleton from '../skeletons/player-stats-skeleton';
 
 interface Props {
   className?: string;
@@ -20,6 +21,10 @@ const PlayerRate: NextPage<Props> = ({ className }: Props) => {
   const stats = useSelector((state: RootState) => state.profile).stats;
   const dispatch = useDispatch();
 
+  if(stats === initialState.stats) {
+    return <PlayerStatsSkeleton />
+  }
+
   const updateStats = (label: Stats, value: number) => {
     dispatch(profileActions.updateInputNumber({
       prop: label,
diff --git a/components/skeletons/match-details-skeleton.module.scss b/components/skeletons/match-details-skeleton.module.scss
new file mode 100644
index 0000000..a8171a8
--- /dev/null
+++ b/components/skeletons/match-details-skeleton.module.scss
@@ -0,0 +1,96 @@
+@import '../../styles/breakpoints';
+@import '../../styles/colors';
+
+.match {
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  margin: 0 auto;
+  width: 100%;
+
+  .container {
+    width: 40%;
+    
+    .header {
+      margin: 0 auto;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: space-around;
+      height: 100px;
+      width: 50%;
+      
+      .shield {
+        border-radius: 8px;
+        background: $skeleton;
+        height: 80px;
+        width: 40%;
+      }
+      
+      .name {
+        border-radius: 8px;
+        background: $skeleton;
+        height: 40px;
+        width: 40%;
+      }
+      
+      .stars {
+        border-radius: 8px;
+        background: $skeleton;
+        height: 30px;
+        margin-top: 10px;
+        width: 100%;
+      }
+    }
+    
+    .field {
+      border-radius: 8px;
+      background: $skeleton;
+      margin-top: 30px;
+      width: 100%;
+      height: 400px;
+    }
+    
+    .options {
+      border-radius: 8px;
+      background: $skeleton;
+      margin: 20px auto;
+      height: 60px;
+      width: 60%;
+    }
+  }
+}
+
+@media (max-width: $large-device) {
+  .match {
+    flex-direction: column;
+
+    .container {
+      width: 500px;
+      margin-bottom: 40px;
+    }
+  }
+}
+
+@media (max-width: $medium-device) {
+  .match {
+    flex-direction: column;
+
+    .container {
+      width: 70%;
+
+      .header {
+        width: 100%;
+      }
+
+      .field {
+        height: 300px;
+
+        .options {
+          height: 100px;
+          width: 100%;
+        }
+      }
+    }
+  }
+}
diff --git a/components/skeletons/match-details-skeleton.tsx b/components/skeletons/match-details-skeleton.tsx
new file mode 100644
index 0000000..f11e5f1
--- /dev/null
+++ b/components/skeletons/match-details-skeleton.tsx
@@ -0,0 +1,25 @@
+import type { NextPage } from 'next';
+import styles from './match-details-skeleton.module.scss';
+
+const MatchDetailsSkeleton: NextPage = () => {
+
+  const fieldSkeletons = Array.from({length: 2}).map((skeleton, i) => (
+    <div key={`${skeleton}${i}`} className={styles.container}>
+      <div className={styles.header}>
+        <div className={styles.shield} />
+        <div className={styles.name} />
+        <div className={styles.stars} />
+      </div>
+      <div className={styles.field} />
+      <div className={styles.options} />
+    </div>
+  ));
+
+  return (
+    <section className={styles.match}>
+      {fieldSkeletons}
+    </section>
+  );
+};
+
+export default MatchDetailsSkeleton;
diff --git a/components/skeletons/player-card-skeleton.module.scss b/components/skeletons/player-card-skeleton.module.scss
new file mode 100644
index 0000000..f220d93
--- /dev/null
+++ b/components/skeletons/player-card-skeleton.module.scss
@@ -0,0 +1,96 @@
+@import '../../styles/breakpoints';
+@import '../../styles/colors';
+
+.cardSkeleton {
+  width: 400px;
+  height: 500px;
+  background-color: #D9D9D9;
+  border-radius: 20px;
+
+  .header {
+    display: flex;
+    width: 100%;
+    justify-content: space-evenly;
+    margin-top: 40px;
+
+    .left {
+      width: 95px;
+      height: 150px;
+      background: $skeleton;
+      border-radius: 8px;
+    }
+
+    .right {
+      width: 130px;
+      height: 130px;
+      border-radius: 50%;
+      background: $skeleton;
+    }
+  }
+
+  .body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .top {
+      width: 70%;
+      height: 60px;
+      background: $skeleton;
+      margin-top: 40px;
+      border-radius: 8px;
+    }
+    
+    .bottom {
+      display: flex;
+      width: 70%;
+      align-items: center;
+      justify-content: space-between;
+      
+      .barr {
+        width: 48%;
+        height: 180px;
+        border-radius: 8px;
+        background: $skeleton;
+        margin-top: 10px;
+      }
+    }
+  }
+}
+
+@media (max-width: $medium-small-device) {
+  .cardSkeleton {
+    width: 85%;
+  }
+}
+  
+
+@media (max-width: $small-device) {
+  .cardSkeleton {
+    height: 440px;
+
+    .body {
+      .bottom {
+        .barr {
+          height: 100px;
+        }
+      }
+    }
+  }
+}
+
+
+@media (max-width: $extra-small-device) {
+  .cardSkeleton {
+    height: 580px;
+    
+    .header {
+      align-items: center;
+      flex-direction: column;
+
+      .left {
+        margin-bottom: 10px;
+      }
+    }
+  }
+}
diff --git a/components/skeletons/player-card-skeleton.tsx b/components/skeletons/player-card-skeleton.tsx
new file mode 100644
index 0000000..5f19381
--- /dev/null
+++ b/components/skeletons/player-card-skeleton.tsx
@@ -0,0 +1,23 @@
+import type { NextPage } from 'next';
+import styles from './player-card-skeleton.module.scss';
+
+const PlayerCardSkeleton: NextPage = () => {
+
+  return (
+    <div className={styles.cardSkeleton}>
+      <div className={styles.header}>
+        <div className={styles.left} />
+        <div className={styles.right} />
+      </div>
+      <div className={styles.body}>
+        <div className={styles.top} />
+        <div className={styles.bottom}>
+          <div className={styles.barr} />
+          <div className={styles.barr} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PlayerCardSkeleton;
diff --git a/components/skeletons/player-stats-skeleton.module.scss b/components/skeletons/player-stats-skeleton.module.scss
new file mode 100644
index 0000000..8000f2f
--- /dev/null
+++ b/components/skeletons/player-stats-skeleton.module.scss
@@ -0,0 +1,34 @@
+@import '../../styles/breakpoints';
+@import '../../styles/colors';
+
+.statsSkeleton {
+  display: flex;
+  flex-direction: column;
+  height: 500px;
+  width: 400px;
+
+  .label,
+  .value {
+    background-color: $skeleton;
+    margin: 10px;
+    border-radius: 5px;
+  }
+  
+  .label {
+    height: 25px;
+    width: 30%;
+  }
+  
+  .value {
+    height: 20px;
+    width: 90%;
+    margin-bottom: 20px;
+  }
+}
+
+@media (max-width: $medium-small-device) {
+  .statsSkeleton {
+    width: 85%;
+  }
+}
+
diff --git a/components/skeletons/player-stats-skeleton.tsx b/components/skeletons/player-stats-skeleton.tsx
new file mode 100644
index 0000000..7537273
--- /dev/null
+++ b/components/skeletons/player-stats-skeleton.tsx
@@ -0,0 +1,18 @@
+import type { NextPage } from 'next';
+import styles from './player-stats-skeleton.module.scss';
+
+const PlayerStatsSkeleton: NextPage = () => {
+
+  return (
+    <div className={styles.statsSkeleton}>
+      {Array.from({length: 6}).map((i,j) => (
+        <div key={`${i}${j}`}>
+          <div className={styles.label} />
+          <div className={styles.value} />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default PlayerStatsSkeleton;
diff --git a/pages/profile/index.module.scss b/pages/profile/index.module.scss
index 74c9da4..ae627c3 100644
--- a/pages/profile/index.module.scss
+++ b/pages/profile/index.module.scss
@@ -63,7 +63,6 @@
   }
 }
 
-
 @media (max-width: $extra-small-device) {
   .section {
     .container {
@@ -72,4 +71,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/store/match-details.slice.ts b/store/match-details.slice.ts
index e1a90a4..66ff50b 100644
--- a/store/match-details.slice.ts
+++ b/store/match-details.slice.ts
@@ -20,7 +20,7 @@ interface IPayloadSetting {
   value: boolean
 }
 
-const initialState: IMatchDetails = {
+export const initialState: IMatchDetails = {
   match: {
     _id: '',
     home_team: {
diff --git a/store/profile.slice.ts b/store/profile.slice.ts
index a6f3441..3232a40 100644
--- a/store/profile.slice.ts
+++ b/store/profile.slice.ts
@@ -19,7 +19,7 @@ interface INumberPayload {
   value: number;
 }
 
-const initialState: IProfileState = {
+export const initialState: IProfileState = {
   profile: {
     _id: '',
     image: '',
diff --git a/styles/_colors.scss b/styles/_colors.scss
new file mode 100644
index 0000000..0b818b0
--- /dev/null
+++ b/styles/_colors.scss
@@ -0,0 +1 @@
+$skeleton: #B1B1B1;