diff --git a/src/components/Avatar/Avatar.css b/src/components/Avatar/Avatar.css
index 774532c7..f247cb4c 100644
--- a/src/components/Avatar/Avatar.css
+++ b/src/components/Avatar/Avatar.css
@@ -1,12 +1,13 @@
 @import '../../marketplace.css';
 
 :root {
-  --avatarSize: 100%;
-  --avatarSizeMedium: 61px;
-  --avatarSizeLarge: 120px;
+  --avatarSize: 40px;
+  --avatarSizeMedium: 60px;
+  --avatarSizeLarge: 96px;
 
   /* Base for all avatars */
   --avatarBase: {
+      font-family: "sofiapro", Helvetica, Arial, sans-serif;
       border-radius: 50%;
 
       /* Position possible initials to the center of the component */
@@ -27,7 +28,6 @@
   /* Font is specific to this component, but defining it in marketplace.css makes it easier
    * to change font if brand look-and-feel needs such changes.
    */
-  @apply --marketplaceSmallAvatarFontStyles;
   @apply --avatarBase;
 
   /* Layout */
@@ -36,6 +36,8 @@
 }
 
 .initials {
+  font-size: 14px;
+  font-weight: var(--fontWeightBold);
   padding-bottom: 4px;
 }
 
@@ -43,7 +45,6 @@
 /* Medium Avatar */
 
 .mediumAvatar {
-  @apply --marketplaceMediumAvatarFontStyles;
   @apply --avatarBase;
 
   /* Fixed dimensions */
@@ -52,6 +53,8 @@
 }
 
 .mediumAvatar .initials {
+  font-size: 20px;
+  font-weight: var(--fontWeightSemiBold);
   padding-bottom: 5px;
 }
 
@@ -59,7 +62,6 @@
 /* Large Avatar */
 
 .largeAvatar {
-  @apply --marketplaceH1FontStyles;
   @apply --avatarBase;
 
   /* Fixed dimensions */
@@ -68,5 +70,7 @@
 }
 
 .largeAvatar .initials {
+  font-size: 30px;
+  font-weight: var(--fontWeightSemiBold);
   padding-bottom: 6px;
 }
diff --git a/src/components/OrderDetailsPanel/OrderDetailsPanel.css b/src/components/OrderDetailsPanel/OrderDetailsPanel.css
index 0813fc07..d4177d98 100644
--- a/src/components/OrderDetailsPanel/OrderDetailsPanel.css
+++ b/src/components/OrderDetailsPanel/OrderDetailsPanel.css
@@ -57,8 +57,6 @@
 
   /* Layout */
   display: block;
-  width: 61px;
-  height: 61px;
 
   @media (--viewportLarge) {
     margin-left: 48px;
diff --git a/src/components/SaleDetailsPanel/SaleDetailsPanel.js b/src/components/SaleDetailsPanel/SaleDetailsPanel.js
index f8c2825c..f24eec47 100644
--- a/src/components/SaleDetailsPanel/SaleDetailsPanel.js
+++ b/src/components/SaleDetailsPanel/SaleDetailsPanel.js
@@ -5,7 +5,7 @@ import * as propTypes from '../../util/propTypes';
 import { createSlug } from '../../util/urlHelpers';
 import { ensureListing, ensureTransaction, ensureBooking, ensureUser } from '../../util/data';
 import {
-  AvatarMedium,
+  AvatarLarge,
   BookingBreakdown,
   NamedLink,
   ResponsiveImage,
@@ -195,11 +195,11 @@ const SaleDetailsPanel = props => {
           />
         </div>
         <div className={css.avatarWrapperMobile}>
-          <AvatarMedium user={currentCustomer} />
+          <AvatarLarge user={currentCustomer} />
         </div>
         <div className={css.info}>
           <div className={css.avatarWrapperDesktop}>
-            <AvatarMedium user={currentCustomer} />
+            <AvatarLarge user={currentCustomer} />
           </div>
           <h1 className={css.title}>{title}</h1>
           <p className={css.message}>{message}</p>
diff --git a/src/components/TextInputField/TextInputField.css b/src/components/TextInputField/TextInputField.css
index 4c298e89..57177cec 100644
--- a/src/components/TextInputField/TextInputField.css
+++ b/src/components/TextInputField/TextInputField.css
@@ -1,7 +1,6 @@
 @import '../../marketplace.css';
 
 .root {
-
 }
 
 .input {
diff --git a/src/components/TopbarDesktop/TopbarDesktop.css b/src/components/TopbarDesktop/TopbarDesktop.css
index 1fcdb986..a978af93 100644
--- a/src/components/TopbarDesktop/TopbarDesktop.css
+++ b/src/components/TopbarDesktop/TopbarDesktop.css
@@ -185,8 +185,6 @@
 
 .avatar {
   margin: 16px 0;
-  width: 41px;
-  height: 41px;
 }
 
 .profileMenuContent {
diff --git a/src/containers/CheckoutPage/CheckoutPage.css b/src/containers/CheckoutPage/CheckoutPage.css
index 9aca1057..381416f8 100644
--- a/src/containers/CheckoutPage/CheckoutPage.css
+++ b/src/containers/CheckoutPage/CheckoutPage.css
@@ -129,8 +129,6 @@
 
   /* Layout */
   display: block;
-  width: 61px;
-  height: 61px;
 
   @media (--viewportLarge) {
     margin-left: 48px;
diff --git a/src/containers/InboxPage/InboxPage.css b/src/containers/InboxPage/InboxPage.css
index 1cce33fd..bc8dc403 100644
--- a/src/containers/InboxPage/InboxPage.css
+++ b/src/containers/InboxPage/InboxPage.css
@@ -209,10 +209,6 @@
   }
 }
 
-.itemAvatarImage {
-  border-radius: 50%;
-}
-
 .rowNotificationDot {
   width: 6px;
   height: 6px;
diff --git a/src/containers/ListingPage/ListingPage.css b/src/containers/ListingPage/ListingPage.css
index 91e922a6..95faede2 100644
--- a/src/containers/ListingPage/ListingPage.css
+++ b/src/containers/ListingPage/ListingPage.css
@@ -161,14 +161,7 @@
   /* Rendering context to the same lavel as listing image */
   position: relative;
 
-  /* Layout */
-  display: block;
-  width: 61px;
-  height: 61px;
-
   @media (--viewportMedium) {
-    width: 96px;
-    height: 96px;
     position: absolute;
     left: 60px;
     top: -48px;
@@ -177,32 +170,17 @@
   }
 }
 
-.avatar {
-  /* Font */
-  @apply --marketplaceAvatarFontStyles;
-
-  /* Layout */
-  width: 100%;
-  height: 100%;
-  border-radius: 50%;
-  margin-top: 0;
-  margin-bottom: 0;
-
-  /* Position possible initials to the center of the component */
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  /* Colors */
-  background-color: var(--matterColorAnti);
-  color: var(--matterColorLight);
+.responsiveAvatarMedium {
+  display: none; /* Hide the medium avatar from the bigger screens */
+  @media screen and (max-width: 767px) {
+    display: flex;
+  }
 }
 
-/* Align the avatar initials properly within the circle */
-.avatar span {
-  margin-bottom: 5px;
+.responsiveAvatarLarge {
+  display: none; /* Hide the large avatar from the smaller screens */
   @media (--viewportMedium) {
-    margin-bottom: 0;
+    display: flex;
   }
 }
 
diff --git a/src/containers/ListingPage/ListingPage.js b/src/containers/ListingPage/ListingPage.js
index ab3bc4f3..aaa19803 100644
--- a/src/containers/ListingPage/ListingPage.js
+++ b/src/containers/ListingPage/ListingPage.js
@@ -12,7 +12,8 @@ import { formatMoney } from '../../util/currency';
 import { createResourceLocatorString, findRouteByRouteName } from '../../util/routes';
 import { ensureListing, ensureUser } from '../../util/data';
 import {
-  Avatar,
+  AvatarLarge,
+  AvatarMedium,
   Button,
   Map,
   ModalInMobile,
@@ -268,9 +269,11 @@ export class ListingPageComponent extends Component {
           >
             <ImageCarousel images={currentListing.images} />
           </Modal>
+
           <div className={css.contentContainer}>
             <div className={css.avatarWrapper}>
-              <Avatar rootClassName={css.avatar} user={currentAuthor} />
+              <AvatarLarge user={currentAuthor} className={css.responsiveAvatarLarge}/>
+              <AvatarMedium user={currentAuthor} className={css.responsiveAvatarMedium}/>
             </div>
 
             <div className={css.mainContent}>
diff --git a/src/marketplace.css b/src/marketplace.css
index f1536cf8..f0df9cee 100644
--- a/src/marketplace.css
+++ b/src/marketplace.css
@@ -30,7 +30,10 @@
       background-position-x: 80%;
   }
 
-  /* Colors */
+
+
+/* ================ Colors ================ */
+
   --marketplaceColor: #C0392B;
   --marketplaceColorLight: #FF4C38;
   --marketplaceColorDark: #8C291E;
@@ -49,7 +52,10 @@
 
   --matterColorLightTransparent: rgba(255,255,255,0.65);
 
-  /* Spacing units */
+
+
+/* ================ Spacing unites ================ */
+
   /* Multiples of mobile and desktop spacing units should be used with margins and paddings. */
   --spacingUnit: 6px;
   --spacingUnitDesktop: 8px;
@@ -64,25 +70,40 @@
   --boxShadowButton: 0 4px 8px 0 rgba(0, 0, 0, 0.10);
   --boxShadowListingCard: 0 0 50px 0 rgba(0,0,0,0.1);
 
-  /* z-index base levels */
+
+
+/* ================ Z-index base levels ================ */
+
   /* small popups on UI should use z-indexes above 50 */
   --zIndexPopup: 50;
   /* modals and UI overlays should use z-indexes above 100 */
   --zIndexModal: 100;
 
-  /* Border radius */
+
+
+/* ================ Border radius ================ */
+
   --borderRadius: 2px;
   --borderRadiusMobileSearch: 3px;
 
-  /* Transitions */
+
+
+/* ================ Transition styles ================ */
+
   --transitionStyle: ease-in 0.2s;
   --transitionStyleButton: ease-in-out 0.1s;
 
-  /* Topbar */
+
+
+/* ================ Topbar heights ================ */
+
   --topbarHeight: 60px;
   --topbarHeightDesktop: 72px;
 
-  /* Links */
+
+
+/* ================ Links ================ */
+
   --marketplaceLinkStyles: {
 
     /* Position and dimensions */
@@ -105,7 +126,10 @@
     }
   }
 
-  /* Buttons */
+
+
+/* ================ Buttons ================ */
+
   --marketplaceButtonFontStyles: {
     font-family: "sofiapro", Helvetica, Arial, sans-serif;
     font-weight: var(--fontWeightSemiBold);
@@ -189,7 +213,10 @@
     }
   }
 
-  /* Inputs */
+
+
+/* ================ Inputs ================ */
+
   --marketplaceInputStyles: {
 
     /* Dimensions */
@@ -260,6 +287,8 @@
   }
 }
 
+
+
 /* ================ Custom media queries ================ */
 
 @custom-media --viewportMedium (min-width: 768px);
diff --git a/src/marketplaceFonts.css b/src/marketplaceFonts.css
index d653d0ec..c8c7b7ee 100644
--- a/src/marketplaceFonts.css
+++ b/src/marketplaceFonts.css
@@ -7,6 +7,9 @@
   --fontWeightSemiBold: 600;
   --fontWeightBold: 700;
 
+
+/* ================ Default font ================ */
+
   --marketplaceDefaultFontStyles: {
     font-family: "sofiapro", Helvetica, Arial, sans-serif;
     font-weight: var(--fontWeightMedium);
@@ -21,6 +24,9 @@
     }
   }
 
+
+/* ================ Body font ================ */
+
   --marketplaceBodyFontStyles: {
     font-family: "sofiapro", Helvetica, Arial, sans-serif;
     font-weight: var(--fontWeightMedium);
@@ -40,8 +46,10 @@
     }
   }
 
+
+/* ================ Hero title ================ */
+
   --marketplaceHeroTitleFontStyles: {
-    font-family: "sofiapro", Helvetica, Arial, sans-serif;
     font-weight: var(--fontWeightBold);
     font-size: 48px;
     line-height: 54px;
@@ -59,8 +67,11 @@
       margin-bottom: 31px;
     }
   }
+
+
+/* ================ H1, H2, H3, H4, H5 & H6 ================ */
+
   --marketplaceH1FontStyles: {
-    font-family: "sofiapro", Helvetica, Arial, sans-serif;
     font-weight: var(--fontWeightBold);
     font-size: 30px;
     line-height: 36px;
@@ -79,8 +90,8 @@
       margin-bottom: 24px;
     }
   }
+
   --marketplaceH2FontStyles: {
-    font-family: "sofiapro", Helvetica, Arial, sans-serif;
     font-weight: var(--fontWeightSemiBold);
     font-size: 24px;
     line-height: 30px;
@@ -96,8 +107,8 @@
       margin-bottom: 19px;
     }
   }
+
   --marketplaceH3FontStyles: {
-    font-family: "sofiapro", Helvetica, Arial, sans-serif;
     font-weight: var(--fontWeightSemiBold);
     font-size: 20px;
     line-height: 24px;
@@ -112,8 +123,8 @@
       margin-bottom: 16px;
     }
   }
+
   --marketplaceH4FontStyles: {
-    font-family: "sofiapro", Helvetica, Arial, sans-serif;
     font-weight: var(--fontWeightMedium);
     font-size: 16px;
     line-height: 24px;
@@ -129,8 +140,8 @@
       margin-bottom: 15px;
     }
   }
+
   --marketplaceH5FontStyles: {
-    font-family: "sofiapro", Helvetica, Arial, sans-serif;
     font-weight: var(--fontWeightRegular);
     font-size: 14px;
     line-height: 18px;
@@ -140,15 +151,14 @@
     margin-bottom: 8px;
 
     @media (--viewportMedium) {
-      font-size: 16px;
       line-height: 24px;
       /* margin-top + n * line-height + margin-bottom => x * 8px */
       margin-top: 10px;
       margin-bottom: 14px;
     }
   }
+
   --marketplaceH6FontStyles: {
-    font-family: "sofiapro", Helvetica, Arial, sans-serif;
     font-weight: var(--fontWeightBold);
     font-size: 12px;
     line-height: 18px;
@@ -165,6 +175,10 @@
       margin-bottom: 6px;
     }
   }
+
+
+/* ================ Other fonts ================ */
+
   --marketplaceTinyFontStyles: {
     font-family: "sofiapro", Helvetica, Arial, sans-serif;
     font-weight: var(--fontWeightRegular);
@@ -183,39 +197,9 @@
     }
   }
 
-  /* This font is specific to Avatar component only */
-  --marketplaceAvatarFontStyles: {
-    font-family: "sofiapro", Helvetica, Arial, sans-serif;
-    font-weight: var(--fontWeightSemiBold);
-    font-size: 20px;
-    line-height: 24px;
-    letter-spacing: -0.2px;
-
-    @media (--viewportMedium) {
-      font-size: 30px;
-      line-height: 48px;
-    }
-  }
-  /* This font is specific to Avatar component only */
-  --marketplaceSmallAvatarFontStyles: {
-    font-family: "sofiapro", Helvetica, Arial, sans-serif;
-    font-weight: var(--fontWeightBold);
-    font-size: 14px;
-    line-height: 18px;
-    letter-spacing: 0.1px;
-  }
-  /* This font is specific to Avatar component only */
-  --marketplaceMediumAvatarFontStyles: {
-    font-family: "sofiapro", Helvetica, Arial, sans-serif;
-    font-weight: var(--fontWeightSemiBold);
-    font-size: 20px;
-    line-height: 24px;
-    letter-spacing: -0.2px;
-  }
 
   /* This font is specific to Modal's (Lightbox) titles */
   --marketplaceModalTitle: {
-    font-family: "sofiapro", Helvetica, Arial, sans-serif;
     font-weight: var(--fontWeightSemiBold);
     font-size: 30px;
     line-height: 36px;
@@ -227,8 +211,10 @@
     }
   }
 
+
+/* ================ Tabbed navigation font styles ================ */
+
   --marketplaceTabNavFontStyles {
-    font-family: "sofiapro", Helvetica, Arial, sans-serif;
     font-weight: var(--fontWeightMedium);
     font-size: 16px;
     line-height: 24px;
@@ -242,7 +228,6 @@
   }
 
   --marketplaceTabNavHorizontalFontStyles {
-    font-family: "sofiapro", Helvetica, Arial, sans-serif;
     font-weight: var(--fontWeightMedium);
     font-size: 16px;
     line-height: 24px;
diff --git a/src/marketplaceIndex.css b/src/marketplaceIndex.css
index a945df18..83338b98 100644
--- a/src/marketplaceIndex.css
+++ b/src/marketplaceIndex.css
@@ -4,6 +4,7 @@
 /* ================ Fonts ================ */
 
 body {
+  font-family: "sofiapro", Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased; /* http://szafranek.net/blog/2009/02/22/font-smoothing-explained/ */
   -moz-osx-font-smoothing: grayscale; /* http://szafranek.net/blog/2009/02/22/font-smoothing-explained/ */
   text-rendering: optimizeSpeed;