diff --git a/index.html b/index.html
index 166c2ea77b..c4e83dac7d 100644
--- a/index.html
+++ b/index.html
@@ -73,6 +73,10 @@
       rel="stylesheet"
       href="https://fonts.googleapis.com/css2?family=Roboto+Serif:wght@400;600;700;800&display=swap"
     />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Quantico:ital,wght@0,400;0,700;1,400;1,700&display=swap"
+      rel="stylesheet"
+    />
     <link
       rel="stylesheet"
       href="https://fonts.googleapis.com/icon?family=Material+Icons"
diff --git a/src/components/Api/Api.tsx b/src/components/Api/Api.tsx
index e59af1afd4..c6fee7ce95 100644
--- a/src/components/Api/Api.tsx
+++ b/src/components/Api/Api.tsx
@@ -15,6 +15,7 @@ const path = "/keys";
 const ApiContainer = styled.div`
   width: 80%;
   margin: 6vh auto 0;
+  font-family: ${constants.fontFamilyFuturistic};
 
   @media only screen and (max-width: 768px) {
     width: 100%;
@@ -25,7 +26,7 @@ const ApiContainer = styled.div`
   }
 
   & h1 {
-    font-family: ${constants.fontFamilySerif};
+    font-family: ${constants.fontFamilyFuturistic};
     font-weight: 400;
 
     @media only screen and (max-width: 768px) {
@@ -254,10 +255,16 @@ class KeyManagement extends React.Component<
               <ButtonGroup>
                 {showLoginButton ? (
                   <Button
-                    variant="contained"
+                    variant="outlined"
                     startIcon={<IconSteam />}
                     href={`${config.VITE_API_HOST}/login`}
                     style={{ margin: "5px 5px" }}
+                    sx={{
+                      backgroundColor: constants.primarySurfaceColor,
+                      "&:hover": {
+                        backgroundColor: constants.primarySurfaceColor,
+                      },
+                    }}
                   >
                     {strings.api_login}
                   </Button>
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
index a5a3262168..f0d126ea46 100644
--- a/src/components/App/App.tsx
+++ b/src/components/App/App.tsx
@@ -40,7 +40,7 @@ const darkTheme = createTheme({
           display: "flex-inline",
           alignItems: "center",
           textTransform: "none",
-          fontFamily: constants.fontFamilySerif,
+          fontFamily: constants.fontFamilyFuturistic,
           fontSize: constants.fontSizeSmall,
           fontWeight: 300,
           "&:hover": {
diff --git a/src/components/App/AppLogo.tsx b/src/components/App/AppLogo.tsx
index 0c10108eda..3bc9480765 100644
--- a/src/components/App/AppLogo.tsx
+++ b/src/components/App/AppLogo.tsx
@@ -28,7 +28,13 @@ const AppLogo = ({ size, onClick }: AppLogoProps) => {
       to="/"
       onClick={onClick}
     >
-      <span style={{ fontSize: size, whiteSpace: "nowrap" }}>
+      <span
+        style={{
+          fontFamily: constants.fontFamilyFuturistic,
+          fontSize: size,
+          whiteSpace: "nowrap",
+        }}
+      >
         {strings.app_name && `<${strings.app_name}/>`}
       </span>
     </StyledLink>
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
index c924a78153..5e2bb30d8c 100644
--- a/src/components/Footer/Footer.tsx
+++ b/src/components/Footer/Footer.tsx
@@ -126,6 +126,10 @@ const StyledFooter = styled.footer`
     }
   }
 
+  .about {
+    font-family: ${constants.fontFamilyFuturistic};
+  }
+
   @media only screen and (max-width: 960px) {
     padding: 20px 25px 15px;
     flex-direction: column;
diff --git a/src/components/Footer/PageLinks.tsx b/src/components/Footer/PageLinks.tsx
index 9223cee0a4..499750d90e 100644
--- a/src/components/Footer/PageLinks.tsx
+++ b/src/components/Footer/PageLinks.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import useStrings from "../../hooks/useStrings.hook";
+import constants from "../constants";
 
 const PageLinks = () => {
   const strings = useStrings();
@@ -37,6 +38,10 @@ const PageLinks = () => {
           key={link.path}
           target="_blank"
           rel="noopener noreferrer"
+          style={{
+            fontFamily: constants.fontFamilyFuturistic,
+            fontSize: constants.fontSizeSmall,
+          }}
         >
           {link.name}
         </a>
diff --git a/src/components/GamemodeToggle/GamemodeToggle.tsx b/src/components/GamemodeToggle/GamemodeToggle.tsx
index 4c2ca2d15c..fb85be5242 100644
--- a/src/components/GamemodeToggle/GamemodeToggle.tsx
+++ b/src/components/GamemodeToggle/GamemodeToggle.tsx
@@ -3,6 +3,7 @@ import * as React from "react";
 import { FormControlLabel, Switch } from "@mui/material";
 
 import { useStrings } from "../../hooks/useStrings.hook";
+import constants from "../constants";
 
 const GamemodeToggle = () => {
   const strings = useStrings();
@@ -25,9 +26,15 @@ const GamemodeToggle = () => {
   return (
     <FormControlLabel
       label={strings.app_show_turbo_stats}
+      sx={{
+        "& .MuiFormControlLabel-label": {
+          fontFamily: constants.fontFamilyFuturistic,
+          fontSize: constants.fontSizeSmall,
+        },
+      }}
       control={
         <Switch
-          color="primary"
+          size="small"
           checked={modeFilter === "turbo"}
           onChange={handleToggle}
         />
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index fb6d1f9895..eca783cbf9 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -112,13 +112,23 @@ const DrawerLink = styled(Link)`
     background-color: rgba(0, 0, 0, 0.08);
     transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   }
+
+  span {
+    font-family: ${constants.fontFamilyFuturistic};
+    font-size: ${constants.fontSizeSmall};
+  }
+`;
+
+const LinkGroupLink = styled(Link)`
+  font-family: ${constants.fontFamilyFuturistic};
+  font-size: ${constants.fontSizeSmall} !important;
 `;
 
 const LinkGroup = ({ navbarPages }: { navbarPages: any[] }) => (
   <VerticalAlignToolbar>
     {navbarPages.map((page: any) => (
       <TabContainer key={page.key}>
-        <Link to={page.to}>{page.label}</Link>
+        <LinkGroupLink to={page.to}>{page.label}</LinkGroupLink>
         {Boolean(page.feature) && (
           <div
             style={{
diff --git a/src/components/Heading/Styled.tsx b/src/components/Heading/Styled.tsx
index b732b0ea8c..9518463f01 100644
--- a/src/components/Heading/Styled.tsx
+++ b/src/components/Heading/Styled.tsx
@@ -19,7 +19,7 @@ export const StyledDiv = styled.div`
     letter-spacing: 10px;
     font-weight: bold;
     background-color: rgba(14, 84, 113, 37%);
-    font-family: ${constants.fontFamilySerif};
+    font-family: ${constants.fontFamilyFuturistic};
   }
 
   .winner {
@@ -73,8 +73,8 @@ export const StyledDiv = styled.div`
     display: flex;
     align-items: center;
     gap: 8px;
-    font-family: ${constants.fontFamilySerif};
-    font-size: 1rem;
+    font-family: ${constants.fontFamilyFuturistic};
+    font-size: ${constants.fontSizeCommon};
     font-weight: 400;
     letter-spacing: 0.002em;
     line-height: 1.6;
@@ -86,8 +86,9 @@ export const StyledDiv = styled.div`
   }
 
   .subtitle {
-    margin-left: 4px;
-    font-size: 13px;
+    margin-left: 8px;
+    font-family: ${constants.fontFamilyFuturistic};
+    font-size: ${constants.fontSizeSmall};
     color: ${constants.colorGreyMuted};
     letter-spacing: normal;
     font-weight: normal;
diff --git a/src/components/Hero/AttributesBlock.tsx b/src/components/Hero/AttributesBlock.tsx
index 4930832caf..4f20aca49c 100644
--- a/src/components/Hero/AttributesBlock.tsx
+++ b/src/components/Hero/AttributesBlock.tsx
@@ -9,6 +9,8 @@ const AttributesWrapper = styled.div`
   display: flex;
   margin-left: -8px;
   margin-right: -8px;
+  font-family: ${constants.fontFamilyFuturistic};
+  font-size: ${constants.fontSizeSmall};
 
   @media screen and (max-width: ${constants.wrapMobile}) {
     flex-wrap: wrap;
diff --git a/src/components/Hero/BenchmarkGraph.tsx b/src/components/Hero/BenchmarkGraph.tsx
index d5f3e644b5..9a15cbb624 100644
--- a/src/components/Hero/BenchmarkGraph.tsx
+++ b/src/components/Hero/BenchmarkGraph.tsx
@@ -7,10 +7,10 @@ import {
   Tooltip,
   Area,
   AreaChart,
-  CartesianGrid,
   ResponsiveContainer,
 } from "recharts";
 import constants from "../constants";
+import Grid from "../Visualizations/Graph/Grid";
 
 const Wrapper = styled.div`
   box-sizing: border-box;
@@ -47,6 +47,7 @@ const tooltipWrapperStyle = {
 };
 
 const tooltipContentStyle = {
+  fontFamily: constants.fontFamilyFuturistic,
   background: "transparent",
   border: 0,
 };
@@ -78,9 +79,29 @@ const BenchmarkGraph = ({ data }: { data: any }) => {
               <stop offset="100%" stopColor={data.color} stopOpacity="0" />
             </linearGradient>
           </defs>
-          <CartesianGrid stroke="rgba(255, 255, 255, .1)" strokeDasharray="0" />
-          <XAxis dataKey="Percentage" />
-          <YAxis />
+          <Grid />
+          <XAxis
+            dataKey="Percentage"
+            tick={{
+              fontFamily: constants.fontFamilySerif,
+              fontSize: 13,
+              fill: "#B0B0B0",
+            }}
+            tickFormatter={(value) => value?.toLocaleString()}
+            axisLine={false}
+            tickLine={false}
+          />
+          <YAxis
+            width={50}
+            tick={{
+              fontFamily: constants.fontFamilySerif,
+              fontSize: 13,
+              fill: "#B0B0B0",
+            }}
+            tickFormatter={(value) => value?.toLocaleString()}
+            axisLine={false}
+            tickLine={false}
+          />
           <Area
             dataKey="Value"
             name={data.title}
diff --git a/src/components/Hero/Header.tsx b/src/components/Hero/Header.tsx
index 67a183e803..89ef33aaa1 100644
--- a/src/components/Hero/Header.tsx
+++ b/src/components/Hero/Header.tsx
@@ -73,6 +73,7 @@ const HeroAvatar = styled.img`
 `;
 
 const HeroName = styled.div`
+  font-family: ${constants.fontFamilyFuturistic};
   font-size: 40px;
   font-weight: ${constants.fontWeightMedium};
   line-height: 40px;
@@ -85,7 +86,8 @@ const HeroName = styled.div`
 
 const HeroRoleInformations = styled.div`
   color: ${constants.primaryTextColor};
-  font-size: 12px;
+  font-family: ${constants.fontFamilyFuturistic};
+  font-size: ${constants.fontSizeSmall};
   letter-spacing: 1px;
   margin: 8px 0;
   text-transform: uppercase;
diff --git a/src/components/Hero/Hero.tsx b/src/components/Hero/Hero.tsx
index 68b19eebc4..f5fb2663e0 100644
--- a/src/components/Hero/Hero.tsx
+++ b/src/components/Hero/Hero.tsx
@@ -24,6 +24,8 @@ const HeroBlock = styled.div`
 `;
 
 const HeroFooter = styled.div`
+  margin-top: 8px;
+  padding: 8px 0;
   text-align: center;
 `;
 
@@ -159,7 +161,10 @@ class Hero extends React.Component<HeroProps> {
               title={strings.tab_players}
               subtitle={strings.hero_disclaimer_pro}
             />
-            <Players {...props} />
+            <Players
+              {...props}
+              loadingText={`Loading ${hero?.localized_name} players...`}
+            />
           </div>
         ),
         route: `/heroes/${tabsHeroId}/players`,
diff --git a/src/components/Hero/ItemSuggestion.tsx b/src/components/Hero/ItemSuggestion.tsx
index be6db5bb1a..4f2c911bbe 100644
--- a/src/components/Hero/ItemSuggestion.tsx
+++ b/src/components/Hero/ItemSuggestion.tsx
@@ -54,7 +54,7 @@ function ItemSuggestion(props: ItemSuggestionProps) {
   ];
   const itemsPopularityData = props.data;
   return props.isLoading ? (
-    <TableSkeleton />
+    <TableSkeleton text="Loading item suggestions..." />
   ) : (
     <Table data={itemsPopularityData} columns={itemSuggestionColumns} />
   );
diff --git a/src/components/Hero/Players.tsx b/src/components/Hero/Players.tsx
index 2aab27e29b..f0c3e2d878 100644
--- a/src/components/Hero/Players.tsx
+++ b/src/components/Hero/Players.tsx
@@ -9,6 +9,7 @@ import { proPlayersSelector } from "../../reducers/selectors";
 
 class Players extends React.Component<{
   isLoading: boolean;
+  loadingText?: string;
   data: {
     account_id: number;
     games_played: number;
@@ -32,7 +33,7 @@ class Players extends React.Component<{
   }
 
   render() {
-    const { data, isLoading, proPlayers, strings } = this.props;
+    const { data, isLoading, proPlayers, strings, loadingText } = this.props;
 
     const playersColumns = [
       {
@@ -66,7 +67,7 @@ class Players extends React.Component<{
     ];
 
     if (isLoading) {
-      return <PlayersSkeleton />;
+      return <PlayersSkeleton loadingText={loadingText} />;
     }
 
     const preparedData = data
diff --git a/src/components/Home/Buttons.tsx b/src/components/Home/Buttons.tsx
index b6eef23c11..b7259bc603 100644
--- a/src/components/Home/Buttons.tsx
+++ b/src/components/Home/Buttons.tsx
@@ -3,6 +3,7 @@ import { Button } from "@mui/material";
 import { connect } from "react-redux";
 import { IconSteam } from "../Icons";
 import config from "../../config";
+import constants from "../constants";
 
 import { HomePageProps } from "./Home";
 import useStrings from "../../hooks/useStrings.hook";
@@ -13,9 +14,15 @@ const Buttons = ({ user }: HomePageProps) => {
     <div>
       {!user && (
         <Button
-          variant="contained"
+          variant="outlined"
           startIcon={<IconSteam />}
           href={`${config.VITE_API_HOST}/login`}
+          sx={{
+            backgroundColor: constants.primarySurfaceColor,
+            "&:hover": {
+              backgroundColor: constants.primarySurfaceColor,
+            },
+          }}
         >
           {strings.home_login}
         </Button>
diff --git a/src/components/Home/Sponsors.tsx b/src/components/Home/Sponsors.tsx
index 6366234c5f..daca707815 100644
--- a/src/components/Home/Sponsors.tsx
+++ b/src/components/Home/Sponsors.tsx
@@ -2,7 +2,6 @@ import React from "react";
 import { Button } from "@mui/material";
 import styled from "styled-components";
 import config from "../../config";
-
 import useStrings from "../../hooks/useStrings.hook";
 
 const StyledDiv = styled.div`
diff --git a/src/components/Home/Styled.tsx b/src/components/Home/Styled.tsx
index 73ffa5f751..3a896c9d20 100644
--- a/src/components/Home/Styled.tsx
+++ b/src/components/Home/Styled.tsx
@@ -16,7 +16,7 @@ export const HeadlineDiv = styled.div`
   margin-top: 10%;
   text-transform: uppercase;
   font-size: 4rem;
-  font-family: ${constants.fontFamilySerif};
+  font-family: ${constants.fontFamilyFuturistic};
   font-weight: ${constants.fontWeightMedium};
   line-height: 1.2;
   letter-spacing: 0.02em;
@@ -36,6 +36,7 @@ export const HeadlineDiv = styled.div`
   }
 `;
 export const DescriptionDiv = styled.div`
+  font-family: ${constants.fontFamilyFuturistic};
   font-weight: ${constants.fontWeightLight};
   margin-bottom: 20px;
   text-shadow: #000 0 0 3px;
@@ -61,10 +62,11 @@ export const ButtonContainer = styled.div`
   }
 `;
 export const BottomTextDiv = styled.div`
+  font-family: ${constants.fontFamilyFuturistic};
   font-size: ${constants.fontSizeMedium};
-  opacity: 0.6;
   font-weight: ${constants.fontWeightLight};
   text-align: right;
+  opacity: 0.6;
 
   @media only screen and (max-width: 425px) {
     text-align: center;
diff --git a/src/components/Home/Why.tsx b/src/components/Home/Why.tsx
index 190cf4b285..eb219ad573 100644
--- a/src/components/Home/Why.tsx
+++ b/src/components/Home/Why.tsx
@@ -37,12 +37,13 @@ const StyledDiv = styled.div`
 
       & .headline {
         margin-top: 8px;
-        font-family: ${constants.fontFamilySerif};
+        font-family: ${constants.fontFamilyFuturistic};
         font-size: 1.25rem;
         line-height: 2;
       }
 
       & .description {
+        font-family: ${constants.fontFamilyFuturistic};
         font-size: 0.875rem;
         font-weight: ${constants.fontWeightLight};
         line-height: 1.5;
diff --git a/src/components/Match/Laning/Graph.tsx b/src/components/Match/Laning/Graph.tsx
index 6aba5cb35e..40e2a84b8a 100644
--- a/src/components/Match/Laning/Graph.tsx
+++ b/src/components/Match/Laning/Graph.tsx
@@ -21,6 +21,7 @@ import {
 import useStrings from "../../../hooks/useStrings.hook";
 import { Spacer } from "../../Spacer/Spacer";
 import constants from "../../constants";
+import Grid from "../../Visualizations/Graph/Grid";
 
 const formatGraphTime = (minutes: number) => `${minutes}:00`;
 
@@ -149,13 +150,7 @@ const Graph = (props: GraphProps) => {
               axisLine={false}
               tickLine={false}
             />
-            <CartesianGrid
-              strokeWidth={1}
-              stroke="#2a2a2a"
-              strokeDasharray="3 3"
-              opacity={0.4}
-            />
-
+            <Grid />
             <Tooltip content={<CustomizedTooltip />} />
             {match.players.map((player) => {
               const hero = heroes[player.hero_id] || {};
diff --git a/src/components/Match/MatchHeader/MatchHeader.tsx b/src/components/Match/MatchHeader/MatchHeader.tsx
index 8071bef646..34f1ae1562 100644
--- a/src/components/Match/MatchHeader/MatchHeader.tsx
+++ b/src/components/Match/MatchHeader/MatchHeader.tsx
@@ -51,7 +51,7 @@ const Styled = styled.header`
     background: rgba(0, 0, 0, 23%);
     font-size: 1.5rem;
     font-weight: 400;
-    font-family: ${constants.fontFamilySerif};
+    font-family: ${constants.fontFamilyFuturistic};
     letter-spacing: 1px;
 
     @media only screen and (max-width: 1023px) {
@@ -125,7 +125,7 @@ const Styled = styled.header`
     }
 
     & .gameMode {
-      font-family: ${constants.fontFamilySerif};
+      font-family: ${constants.fontFamilyFuturistic};
       font-size: ${constants.fontSizeSmall};
       letter-spacing: 0.02rem;
       margin-top: -16px;
@@ -141,7 +141,8 @@ const Styled = styled.header`
     }
 
     & .ended {
-      font-size: ${constants.fontSizeSmall};
+      font-family: ${constants.fontFamilyFuturistic};
+      font-size: ${constants.fontSizeTiny};
       color: ${constants.colorMutedLight};
       margin-top: 6px;
 
@@ -152,7 +153,7 @@ const Styled = styled.header`
   }
 
   .killScore {
-    font-family: ${constants.fontFamilySerif};
+    font-family: ${constants.fontFamilyFuturistic};
     font-size: 2.5rem;
     text-align: center;
 
@@ -181,10 +182,6 @@ const Styled = styled.header`
 
     @media only screen and (max-width: 1023px) {
       text-align: center;
-
-      & span {
-        margin-bottom: 5px;
-      }
     }
 
     & ul {
@@ -205,6 +202,7 @@ const Styled = styled.header`
   .infoKey {
     display: block;
     text-transform: uppercase;
+    font-family: ${constants.fontFamilyFuturistic};
     font-size: ${constants.fontSizeSmall};
     color: ${constants.colorMutedLight};
   }
@@ -212,7 +210,7 @@ const Styled = styled.header`
   .infoValue {
     margin-top: 8px;
     display: block;
-    font-family: ${constants.fontFamilySerif};
+    font-family: ${constants.fontFamilyFuturistic};
     font-size: ${constants.fontSizeSmall};
     color: ${constants.colorWhite};
   }
diff --git a/src/components/Player/Header/PlayerButtons.tsx b/src/components/Player/Header/PlayerButtons.tsx
index 6ba1414616..d27558be98 100644
--- a/src/components/Player/Header/PlayerButtons.tsx
+++ b/src/components/Player/Header/PlayerButtons.tsx
@@ -7,10 +7,12 @@ import styled from "styled-components";
 import { toggleShowForm as toggleShowFormAction } from "../../../actions/formActions";
 import GamemodeToggle from "../../GamemodeToggle/GamemodeToggle";
 import config from "../../../config";
+import constants from "../../constants";
 
 const Styled = styled.div`
   display: flex;
   flex-direction: row;
+  align-items: center;
   flex-wrap: nowrap;
   font-size: 14px;
 
@@ -52,7 +54,7 @@ class PlayerButtons extends React.Component<
       <Styled>
         <div data-hint={strings.app_refresh} data-hint-position="top">
           <Button
-            startIcon={<RefreshIcon />}
+            startIcon={<RefreshIcon style={{ marginRight: 4 }} />}
             disabled={this.state.disableRefresh}
             onClick={() => {
               fetch(`${config.VITE_API_HOST}/api/players/${playerId}/refresh`, {
diff --git a/src/components/Player/Header/PlayerHeader.tsx b/src/components/Player/Header/PlayerHeader.tsx
index b1cc233c3f..38217f12b2 100644
--- a/src/components/Player/Header/PlayerHeader.tsx
+++ b/src/components/Player/Header/PlayerHeader.tsx
@@ -31,12 +31,14 @@ const Styled = styled.div`
   }
 
   .playerName {
+    font-family: ${constants.fontFamilyFuturistic};
     color: rgba(245, 245, 245, 0.870588);
     font-size: 28px;
     text-align: center;
   }
 
   .titleNameButtons {
+    margin-left: 8px;
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
@@ -302,7 +304,9 @@ const PlayerHeader = ({
               loggedInId={loggedInUser && String(loggedInUser.account_id)}
               compact={!small}
             />
-            <PlayerButtons playerId={playerId} />
+            <div style={{ marginLeft: 8 }}>
+              <PlayerButtons playerId={playerId} />
+            </div>
           </div>
           <div style={{ display: "flex" }}>
             <DotaPlusBadge plus={plus} />
diff --git a/src/components/Player/Header/Styled.tsx b/src/components/Player/Header/Styled.tsx
index 9e21674e9f..bd8eae1d39 100644
--- a/src/components/Player/Header/Styled.tsx
+++ b/src/components/Player/Header/Styled.tsx
@@ -1,15 +1,18 @@
 import { CardHeader } from "@mui/material";
 import styled from "styled-components";
+import constants from "../../constants";
 
 export const PlayerStatsCard = styled(CardHeader)`
   & span:last-child {
+    font-family: ${constants.fontFamilyFuturistic};
     font-size: 24px !important;
     color: rgba(255, 255, 255, 0.87) !important;
     line-height: 36px !important;
   }
 
   & span:first-child {
-    font-size: 14px !important;
+    font-family: ${constants.fontFamilyFuturistic};
+    font-size: ${constants.fontSizeSmall};
     color: rgba(255, 255, 255, 0.54) !important;
     line-height: 1 !important;
     text-transform: uppercase;
diff --git a/src/components/Player/Pages/Histograms/Histograms.tsx b/src/components/Player/Pages/Histograms/Histograms.tsx
index 20c413931f..5e5a8ac84d 100644
--- a/src/components/Player/Pages/Histograms/Histograms.tsx
+++ b/src/components/Player/Pages/Histograms/Histograms.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import { connect } from "react-redux";
 import { withRouter } from "react-router-dom";
-
 import { getPlayerHistograms } from "../../../../actions";
 import ButtonGarden from "../../../ButtonGarden/ButtonGarden";
 import Container from "../../../Container/Container";
@@ -10,6 +9,7 @@ import { HistogramGraph } from "../../../Visualizations";
 import dataColumns from "../matchDataColumns";
 import { formatGraphValueData } from "../../../../utility";
 import useStrings from "../../../../hooks/useStrings.hook";
+import { Spacer } from "../../../Spacer/Spacer";
 
 const getMedian = (columns: any[], midpoint: number) => {
   let sum = 0;
@@ -46,6 +46,9 @@ const Histogram = ({
   history,
 }: HistogramsProps) => {
   const strings = useStrings();
+  const match = window.location.pathname.match(/\/histograms\/([^/?]+)/);
+  const buttonKey = match?.[1];
+  const buttonName = strings[`heading_${buttonKey}` as keyof Strings];
   return (
     <div>
       <Heading
@@ -61,7 +64,7 @@ const Histogram = ({
         buttonNames={histogramNames}
         selectedButton={routeParams.subInfo || histogramNames[0]}
       />
-      <Container error={error} loading={loading}>
+      <Container error={error} loading={loading} text="Loading histogram...">
         <div>
           <Heading
             title={strings[`heading_${histogramName}` as keyof Strings]}
@@ -76,10 +79,8 @@ const Histogram = ({
                     .join(" ")
             }
           />
-          <HistogramGraph
-            columns={columns || []}
-            histogramName={histogramName}
-          />
+          <Spacer variant="1" />
+          <HistogramGraph columns={columns || []} histogramName={buttonName} />
         </div>
       </Container>
     </div>
diff --git a/src/components/Request/Request.tsx b/src/components/Request/Request.tsx
index 060de5abfd..49e2d68e7f 100644
--- a/src/components/Request/Request.tsx
+++ b/src/components/Request/Request.tsx
@@ -6,6 +6,8 @@ import Heading from "../Heading/Heading";
 import { LazyLog, ScrollFollow } from "@melloware/react-logviewer";
 import useStrings from "../../hooks/useStrings.hook";
 import config from "../../config";
+import constants from "../constants";
+import { Spacer } from "../Spacer/Spacer";
 
 const Request = () => {
   const strings = useStrings();
@@ -51,6 +53,7 @@ const Request = () => {
     <div>
       <Helmet title={strings.title_request} />
       <Heading title={strings.request_title} className="top-heading" />
+      <Spacer variant="2" />
       <form
         style={{
           display: "flex",
@@ -72,10 +75,20 @@ const Request = () => {
           onChange={(e) => {
             setMatchId(e.target.value);
           }}
+          sx={{
+            "& .MuiInputLabel-root": {
+              fontFamily: constants.fontFamilyFuturistic,
+              fontSize: constants.fontSizeSmall,
+            },
+            "& .MuiInputBase-input": {
+              fontFamily: constants.fontFamilyFuturistic,
+              fontSize: constants.fontSizeSmall,
+            },
+          }}
         />
         <Button
           type="submit"
-          variant="contained"
+          variant="outlined"
           onClick={handleSubmit}
           loading={loading}
           disabled={loading}
diff --git a/src/components/Scenarios/Scenarios.tsx b/src/components/Scenarios/Scenarios.tsx
index 5b7b430f12..17786b5180 100644
--- a/src/components/Scenarios/Scenarios.tsx
+++ b/src/components/Scenarios/Scenarios.tsx
@@ -18,6 +18,7 @@ import Heading from "../Heading/Heading";
 import ScenariosSkeleton from "../Skeletons/ScenariosSkeleton";
 import { formatTemplateToString, groupByArray } from "../../utility";
 import { IconLaneRoles } from "../Icons";
+import { Spacer } from "../Spacer/Spacer";
 
 const minSampleSize = (row: any) => row.games > 10;
 
@@ -242,10 +243,12 @@ class Scenarios extends React.Component<ScenariosProps, ScenariosState> {
               // hoverColor="rgba(220, 220, 220, 0.2)"
               // icon={<ActionSearch />}
             >{strings.explorer_query_button}</Button> */}
+            <Spacer variant="1" />
             <Heading
               title={strings.explorer_results}
               subtitle={`${data?.filter(minSampleSize).length} ${strings.explorer_num_rows}`}
             />
+            <Spacer variant="1" />
             <Table
               key={selectedTab + this.tableKey}
               data={data.filter(minSampleSize)}
diff --git a/src/components/Search/SearchForm.tsx b/src/components/Search/SearchForm.tsx
index 4a5afc294b..ab6459d8d2 100644
--- a/src/components/Search/SearchForm.tsx
+++ b/src/components/Search/SearchForm.tsx
@@ -74,12 +74,14 @@ class SearchForm extends React.Component<SearchFormProps, { query?: string }> {
           }}
           sx={{
             "& .MuiInputBase-input": {
-              fontSize: "0.8rem",
+              fontFamily: constants.fontFamilyFuturistic,
+              fontSize: constants.fontSizeSmall,
               color: "#f0f0f0",
             },
             "& .MuiInputBase-input::placeholder": {
+              fontFamily: constants.fontFamilyFuturistic,
+              fontSize: constants.fontSizeSmall,
               color: "#bebebe",
-              fontSize: "0.8rem",
             },
           }}
         />
diff --git a/src/components/Skeletons/BenchmarkSkeleton.tsx b/src/components/Skeletons/BenchmarkSkeleton.tsx
index 20b977cf24..5bdf22ef75 100644
--- a/src/components/Skeletons/BenchmarkSkeleton.tsx
+++ b/src/components/Skeletons/BenchmarkSkeleton.tsx
@@ -1,14 +1,8 @@
 import React from "react";
-import ContentLoader from "react-content-loader";
+import { LoadingOverlayUpper30 } from "../LoadingOverlay";
 
 const BenchmarkSkeleton = (props: any) => (
-  <ContentLoader width={400} animate {...props}>
-    <rect x="0" y="10" rx="5" ry="5" width="300" height="5" />
-    <rect x="0" y="25" rx="5" ry="5" width="300" height="5" />
-    <rect x="0" y="40" rx="5" ry="5" width="300" height="5" />
-    <rect x="0" y="55" rx="5" ry="5" width="300" height="5" />
-    <rect x="0" y="70" rx="5" ry="5" width="300" height="5" />
-  </ContentLoader>
+  <LoadingOverlayUpper30 text="Loading benchmarks..." />
 );
 
 export default BenchmarkSkeleton;
diff --git a/src/components/Skeletons/DurationsSkeleton.tsx b/src/components/Skeletons/DurationsSkeleton.tsx
index c83f9695aa..197401c587 100644
--- a/src/components/Skeletons/DurationsSkeleton.tsx
+++ b/src/components/Skeletons/DurationsSkeleton.tsx
@@ -1,30 +1,8 @@
 import React from "react";
-import ContentLoader from "react-content-loader";
+import { LoadingOverlayUpper30 } from "../LoadingOverlay";
 
 const DurationsSkeleton = (props: any) => (
-  <ContentLoader height={200} width={500} animate {...props}>
-    <rect x="150" y="50" rx="5" ry="5" width="5" height="100" />
-    <rect x="160" y="45" rx="5" ry="5" width="5" height="105" />
-    <rect x="170" y="41" rx="5" ry="5" width="5" height="109" />
-    <rect x="180" y="37" rx="5" ry="5" width="5" height="113" />
-    <rect x="190" y="33" rx="5" ry="5" width="5" height="117" />
-    <rect x="200" y="29" rx="5" ry="5" width="5" height="121" />
-    <rect x="210" y="25" rx="5" ry="5" width="5" height="125" />
-    <rect x="220" y="21" rx="5" ry="5" width="5" height="129" />
-    <rect x="230" y="18" rx="5" ry="5" width="5" height="132" />
-    <rect x="240" y="15" rx="5" ry="5" width="5" height="135" />
-    <rect x="250" y="14" rx="5" ry="5" width="5" height="136" />
-    <rect x="260" y="14" rx="5" ry="5" width="5" height="136" />
-    <rect x="270" y="15" rx="5" ry="5" width="5" height="135" />
-    <rect x="280" y="18" rx="5" ry="5" width="5" height="132" />
-    <rect x="290" y="21" rx="5" ry="5" width="5" height="129" />
-    <rect x="300" y="25" rx="5" ry="5" width="5" height="125" />
-    <rect x="310" y="29" rx="5" ry="5" width="5" height="121" />
-    <rect x="320" y="33" rx="5" ry="5" width="5" height="117" />
-    <rect x="330" y="37" rx="5" ry="5" width="5" height="113" />
-    <rect x="340" y="41" rx="5" ry="5" width="5" height="109" />
-    <rect x="350" y="45" rx="5" ry="5" width="5" height="105" />
-  </ContentLoader>
+  <LoadingOverlayUpper30 text="Loading durations..." />
 );
 
 export default DurationsSkeleton;
diff --git a/src/components/Skeletons/MatchupsSkeleton.tsx b/src/components/Skeletons/MatchupsSkeleton.tsx
index 3f6d1f0a68..ca250e022c 100644
--- a/src/components/Skeletons/MatchupsSkeleton.tsx
+++ b/src/components/Skeletons/MatchupsSkeleton.tsx
@@ -1,14 +1,8 @@
 import React from "react";
-import ContentLoader from "react-content-loader";
+import { LoadingOverlayUpper30 } from "../LoadingOverlay";
 
 const MatchupsSkeleton = (props: any) => (
-  <ContentLoader width={400} animate {...props}>
-    <rect x="0" y="10" rx="5" ry="5" width="300" height="5" />
-    <rect x="0" y="25" rx="5" ry="5" width="300" height="5" />
-    <rect x="0" y="40" rx="5" ry="5" width="300" height="5" />
-    <rect x="0" y="55" rx="5" ry="5" width="300" height="5" />
-    <rect x="0" y="70" rx="5" ry="5" width="300" height="5" />
-  </ContentLoader>
+  <LoadingOverlayUpper30 text="Loading matchups..." />
 );
 
 export default MatchupsSkeleton;
diff --git a/src/components/Skeletons/PlayersSkeleton.tsx b/src/components/Skeletons/PlayersSkeleton.tsx
index fcf401bd2f..f21f1a8681 100644
--- a/src/components/Skeletons/PlayersSkeleton.tsx
+++ b/src/components/Skeletons/PlayersSkeleton.tsx
@@ -1,14 +1,11 @@
 import React from "react";
-import ContentLoader from "react-content-loader";
+import { LoadingOverlayUpper30 } from "../LoadingOverlay";
 
-const PlayersSkeleton = (props: any) => (
-  <ContentLoader width={400} animate {...props}>
-    <rect x="0" y="10" rx="5" ry="5" width="300" height="5" />
-    <rect x="0" y="25" rx="5" ry="5" width="300" height="5" />
-    <rect x="0" y="40" rx="5" ry="5" width="300" height="5" />
-    <rect x="0" y="55" rx="5" ry="5" width="300" height="5" />
-    <rect x="0" y="70" rx="5" ry="5" width="300" height="5" />
-  </ContentLoader>
-);
+type PlayersSkeletonProps = {
+  loadingText?: string;
+};
+const PlayersSkeleton = ({
+  loadingText = "Loading...",
+}: PlayersSkeletonProps) => <LoadingOverlayUpper30 text={loadingText} />;
 
 export default PlayersSkeleton;
diff --git a/src/components/Skeletons/RankingSkeleton.tsx b/src/components/Skeletons/RankingSkeleton.tsx
index 7cd1f348a4..900eac5e2c 100644
--- a/src/components/Skeletons/RankingSkeleton.tsx
+++ b/src/components/Skeletons/RankingSkeleton.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { LoadingOverlayUpper30 } from "../LoadingOverlay";
 
 const RankingSkeleton = (props: any) => (
-  <LoadingOverlayUpper30 text="Loading..." />
+  <LoadingOverlayUpper30 text="Loading rankings..." />
 );
 
 export default RankingSkeleton;
diff --git a/src/components/Skeletons/RecentSkeleton.tsx b/src/components/Skeletons/RecentSkeleton.tsx
index 5ad5a5618e..1feec1cb28 100644
--- a/src/components/Skeletons/RecentSkeleton.tsx
+++ b/src/components/Skeletons/RecentSkeleton.tsx
@@ -1,14 +1,8 @@
 import React from "react";
-import ContentLoader from "react-content-loader";
+import { LoadingOverlayUpper30 } from "../LoadingOverlay";
 
 const RecentSkeleton = (props: any) => (
-  <ContentLoader width={400} animate {...props}>
-    <rect x="0" y="10" rx="5" ry="5" width="300" height="5" />
-    <rect x="0" y="25" rx="5" ry="5" width="300" height="5" />
-    <rect x="0" y="40" rx="5" ry="5" width="300" height="5" />
-    <rect x="0" y="55" rx="5" ry="5" width="300" height="5" />
-    <rect x="0" y="70" rx="5" ry="5" width="300" height="5" />
-  </ContentLoader>
+  <LoadingOverlayUpper30 text="Loading recent games..." />
 );
 
 export default RecentSkeleton;
diff --git a/src/components/Spinner/Spinner.tsx b/src/components/Spinner/Spinner.tsx
index b63c61306a..27ebc9c9a8 100644
--- a/src/components/Spinner/Spinner.tsx
+++ b/src/components/Spinner/Spinner.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React from "react";
 import { CircularProgress } from "@mui/material";
 import styled from "styled-components";
 import constants from "../constants";
@@ -24,13 +24,14 @@ const SpinnerContainer = styled.div`
 `;
 
 const SpinnerText = styled.span`
-  font-size: 0.8rem;
+  font-family: ${constants.fontFamilyFuturistic};
+  font-size: ${constants.fontSizeSmall};
   letter-spacing: 0.05em;
   color: ${constants.colorBlue};
 `;
 
 const Spinner = ({
-  size = 32,
+  size = 24,
   text,
 }: {
   size?: number;
diff --git a/src/components/Subscription/Subscription.tsx b/src/components/Subscription/Subscription.tsx
index a419a2788f..3a63c202f1 100644
--- a/src/components/Subscription/Subscription.tsx
+++ b/src/components/Subscription/Subscription.tsx
@@ -16,6 +16,7 @@ const stripePromise = config.VITE_STRIPE_PUBLIC_KEY
 const PageContainer = styled.div`
   width: 80%;
   margin: 0 auto;
+  font-family: ${constants.fontFamilyFuturistic};
 
   @media only screen and (max-width: 768px) {
     width: 100%;
@@ -42,7 +43,7 @@ const SubHeader = styled.div`
 
 const BannerTitle = styled.h1`
   margin: 48px 0 8px;
-  font-family: ${constants.fontFamilySerif};
+  font-family: ${constants.fontFamilyFuturistic};
   font-size: 2.25rem;
   font-weight: 400;
   letter-spacing: 0.02em;
@@ -97,7 +98,7 @@ const SubRight = styled.div`
 `;
 
 const ThankYouTitle = styled.h4`
-  font-family: ${constants.fontFamilySerif};
+  font-family: ${constants.fontFamilyFuturistic};
   font-weight: 400;
 `;
 
@@ -211,7 +212,7 @@ const Subscription = ({
           )}
           {!user && (
             <Button
-              variant="contained"
+              variant="outlined"
               href={`${config.VITE_API_HOST}/login`}
               startIcon={<IconSteam />}
             >
diff --git a/src/components/TabBar/TabBar.tsx b/src/components/TabBar/TabBar.tsx
index 6930e83d05..146df2daf5 100644
--- a/src/components/TabBar/TabBar.tsx
+++ b/src/components/TabBar/TabBar.tsx
@@ -93,7 +93,8 @@ const TabBar = ({
               label={tab.name}
               disabled={tab.disabled}
               sx={{
-                fontFamily: constants.fontFamilySerif,
+                fontFamily: constants.fontFamilyFuturistic,
+                fontSize: constants.fontSizeSmall,
                 letterSpacing: "0.02em",
                 textTransform: "capitalize",
               }}
diff --git a/src/components/Table/Styled.tsx b/src/components/Table/Styled.tsx
index fee4bd0913..41fff5e0fe 100644
--- a/src/components/Table/Styled.tsx
+++ b/src/components/Table/Styled.tsx
@@ -10,6 +10,11 @@ export const StyledBody = styled.div<{
     font-family: ${constants.tableFontFamily} !important;
     box-sizing: border-box;
 
+    a {
+      font-family: ${constants.fontFamilyFuturistic};
+      font-size: ${constants.fontSizeSmall};
+    }
+
     ${(props) =>
       props.customWidth
         ? `
@@ -58,6 +63,8 @@ export const StyledBody = styled.div<{
 
     & th {
       position: relative;
+      font-family: ${constants.fontFamilyFuturistic};
+      font-size: ${constants.fontSizeSmall};
 
       svg {
         position: absolute;
diff --git a/src/components/Visualizations/Graph/DistributionGraph.tsx b/src/components/Visualizations/Graph/DistributionGraph.tsx
index 9f5e5b6bcc..51c9f64924 100644
--- a/src/components/Visualizations/Graph/DistributionGraph.tsx
+++ b/src/components/Visualizations/Graph/DistributionGraph.tsx
@@ -6,11 +6,11 @@ import {
   Bar,
   Line,
   ComposedChart,
-  CartesianGrid,
   Label,
   ResponsiveContainer,
 } from "recharts";
 import { StyledTooltip, BinName, NumPlayers, Percentile } from "./Styled";
+import Grid from "./Grid";
 import useStrings from "../../../hooks/useStrings.hook";
 import constants from "../../constants";
 
@@ -100,12 +100,7 @@ const DistributionGraph = ({
             orientation="right"
             stroke="#4cffc0"
           />
-          <CartesianGrid
-            stroke="#404040"
-            strokeDasharray="4 4"
-            vertical={false}
-            opacity={0.25}
-          />
+          <Grid />
           <Tooltip
             content={<DistributionTooltipContent array={data} />}
             contentStyle={{
diff --git a/src/components/Visualizations/Graph/Grid.tsx b/src/components/Visualizations/Graph/Grid.tsx
new file mode 100644
index 0000000000..3e3f35a5b1
--- /dev/null
+++ b/src/components/Visualizations/Graph/Grid.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+import { CartesianGrid } from "recharts";
+
+const Grid = () => (
+  <CartesianGrid
+    strokeWidth={1}
+    stroke="#2a2a2a"
+    strokeDasharray="3 3"
+    opacity={0.4}
+  />
+);
+
+export default Grid;
diff --git a/src/components/Visualizations/Graph/HistogramGraph.tsx b/src/components/Visualizations/Graph/HistogramGraph.tsx
index bd59dc9f0b..679a0fb162 100644
--- a/src/components/Visualizations/Graph/HistogramGraph.tsx
+++ b/src/components/Visualizations/Graph/HistogramGraph.tsx
@@ -2,7 +2,6 @@ import React from "react";
 import {
   Bar,
   BarChart,
-  CartesianGrid,
   Cell,
   Label,
   ResponsiveContainer,
@@ -10,10 +9,13 @@ import {
   XAxis,
   YAxis,
 } from "recharts";
-
-import { formatGraphValueData, hsvToRgb } from "../../../utility";
-import { StyledTooltip } from "./Styled";
+import { formatGraphValueData, percentile } from "../../../utility";
+import { StyledTooltip, TooltipLabel, HistogramTooltipDiv } from "./Styled";
+import Grid from "./Grid";
 import useStrings from "../../../hooks/useStrings.hook";
+import constants from "../../constants";
+
+const formatPercent = (percentile: number) => (percentile * 100)?.toFixed(2);
 
 const HistogramTooltipContent = ({
   payload,
@@ -26,13 +28,28 @@ const HistogramTooltipContent = ({
 }) => {
   const strings = useStrings();
   const data = payload && payload[0] && payload[0].payload;
+  const winratePercentile = data && data?.games > 0 && data?.win / data?.games;
+  const winratePercent = formatPercent(winratePercentile);
+  const grade = percentile(winratePercentile);
+  const numWins = data?.win;
+  const numLosses = data?.games - data?.win;
+  const color = String(constants[grade.color as keyof typeof constants]);
   return (
     <StyledTooltip>
-      <div>{`${formatGraphValueData(data && data.x, histogramName)} ${xAxisLabel}`}</div>
-      <div>{`${data && data.games} ${strings.th_matches}`}</div>
-      {data && data.games > 0 && (
-        <div>{`${((data.win / data.games) * 100).toFixed(2)} ${strings.th_win}`}</div>
-      )}
+      <TooltipLabel>
+        {`${formatGraphValueData(data && data.x, histogramName)} ${xAxisLabel} ${histogramName || ""}`}
+      </TooltipLabel>
+      <HistogramTooltipDiv
+        fontSize="medium"
+        color={color}
+      >{`${winratePercent} ${strings.th_win}`}</HistogramTooltipDiv>
+      <HistogramTooltipDiv>{`${data && data.games} ${strings.th_matches}`}</HistogramTooltipDiv>
+      <HistogramTooltipDiv>
+        {numWins} {strings.th_wins}
+      </HistogramTooltipDiv>
+      <HistogramTooltipDiv>
+        {numLosses} {strings.th_losses}
+      </HistogramTooltipDiv>
     </StyledTooltip>
   );
 };
@@ -53,26 +70,38 @@ const HistogramGraph = ({
       height={graphHeight}
       data={columns}
       margin={{
-        top: 0,
-        right: 0,
-        left: 0,
-        bottom: 0,
+        top: 20,
+        right: 40,
+        left: 20,
+        bottom: 20,
       }}
+      barCategoryGap="18%"
     >
       <XAxis
         dataKey="x"
         interval={1}
         tickFormatter={(val) => formatGraphValueData(val, histogramName)}
+        tick={{
+          fontFamily: constants.fontFamilyFuturistic,
+          fontSize: constants.fontSizeSmall,
+          fill: constants.colorGreyMuted,
+        }}
+        axisLine={false}
+        tickLine={false}
       >
         <Label value="" position="insideTopRight" />
       </XAxis>
-      <YAxis />
-      <CartesianGrid
-        stroke="rgba(255, 255, 255, .2)"
-        strokeWidth={1}
-        opacity={0.5}
+      <YAxis
+        tick={{
+          fontFamily: constants.fontFamilyFuturistic,
+          fontSize: constants.fontSizeSmall,
+          fill: constants.colorGreyMuted,
+        }}
+        tickFormatter={(value) => value?.toLocaleString()}
+        axisLine={false}
+        tickLine={false}
       />
-
+      <Grid />
       <Tooltip
         content={
           <HistogramTooltipContent
@@ -82,17 +111,17 @@ const HistogramGraph = ({
         }
         cursor={{ fill: "rgba(255, 255, 255, .35)" }}
       />
-      <Bar dataKey="games">
+      <Bar dataKey="games" radius={[4, 4, 0, 0]} animationDuration={700}>
         {columns.map((entry) => {
           const { win, games, x } = entry;
           const percent = win / games;
-          const adjustedVal =
-            percent >= 0.5
-              ? percent + (1 - percent) / 5
-              : percent - percent / 5;
-          const rgb = hsvToRgb(adjustedVal * (1 / 3), 0.9, 0.9);
-          const stroke = `rgba(${Math.floor(rgb[0])}, ${Math.floor(rgb[1])}, ${Math.floor(rgb[2])}, .8)`;
-          const color = `rgba(${Math.floor(rgb[0])}, ${Math.floor(rgb[1])}, ${Math.floor(rgb[2])}, .5)`;
+          const grade = percentile(percent);
+          const stroke = String(
+            constants[grade.color as keyof typeof constants],
+          );
+          const color = String(
+            constants[grade.color as keyof typeof constants],
+          );
           return <Cell fill={color} stroke={stroke} strokeWidth="2" key={x} />;
         })}
       </Bar>
diff --git a/src/components/Visualizations/Graph/MMRGraph.tsx b/src/components/Visualizations/Graph/MMRGraph.tsx
index 44e258fbde..1035e8aa48 100644
--- a/src/components/Visualizations/Graph/MMRGraph.tsx
+++ b/src/components/Visualizations/Graph/MMRGraph.tsx
@@ -13,6 +13,7 @@ import {
 import styled from "styled-components";
 import useStrings from "../../../hooks/useStrings.hook";
 import { rankTierToString } from "../../../utility";
+import Grid from "./Grid";
 
 const StyledGraphArea = styled.div`
   user-select: none;
@@ -48,8 +49,7 @@ const MMRGraph = ({ columns }: { columns: any[] }) => {
             tickCount={8}
             tickFormatter={formatYTick}
           />
-          <CartesianGrid stroke="#505050" strokeWidth={1} opacity={0.5} />
-
+          <Grid />
           <Tooltip
             labelStyle={{ color: "black" }}
             labelFormatter={(time: number) => new Date(time).toDateString()}
diff --git a/src/components/Visualizations/Graph/MatchGraph.tsx b/src/components/Visualizations/Graph/MatchGraph.tsx
index 81a66011b9..dc7c53e0d8 100644
--- a/src/components/Visualizations/Graph/MatchGraph.tsx
+++ b/src/components/Visualizations/Graph/MatchGraph.tsx
@@ -6,7 +6,6 @@ import {
   Tooltip,
   Line,
   LineChart,
-  CartesianGrid,
   ReferenceLine,
   Legend,
   ResponsiveContainer,
@@ -33,6 +32,7 @@ import {
 import config from "../../../config";
 import useStrings from "../../../hooks/useStrings.hook";
 import { Spacer } from "../../Spacer/Spacer";
+import Grid from "./Grid";
 
 const formatGraphTime = (minutes: number) => `${minutes}:00`;
 
@@ -125,15 +125,6 @@ const XpTooltipContent = ({ payload }: { payload?: any[] }) => {
   }
 };
 
-const Grid = () => (
-  <CartesianGrid
-    strokeWidth={1}
-    stroke="#2a2a2a"
-    strokeDasharray="3 3"
-    opacity={0.4}
-  />
-);
-
 const XpNetworthGraph = ({ match }: { match: Match }) => {
   const strings = useStrings();
   if (!match.radiant_gold_adv || !match.radiant_xp_adv) {
@@ -184,7 +175,6 @@ const XpNetworthGraph = ({ match }: { match: Match }) => {
           />
           <YAxis
             domain={[minY, maxY]}
-            mirror
             tick={{
               fontFamily: constants.fontFamilySerif,
               fontSize: 12,
diff --git a/src/components/Visualizations/Graph/StackedBarGraph.tsx b/src/components/Visualizations/Graph/StackedBarGraph.tsx
index ffbba50a48..14a4ad9dd4 100644
--- a/src/components/Visualizations/Graph/StackedBarGraph.tsx
+++ b/src/components/Visualizations/Graph/StackedBarGraph.tsx
@@ -12,6 +12,7 @@ import Heading from "../../Heading/Heading";
 import constants from "../../constants";
 import { StyledHolder } from "./Styled";
 import useStrings from "../../../hooks/useStrings.hook";
+import Grid from "./Grid";
 
 const category10 = [
   "#1f77b4",
@@ -76,7 +77,7 @@ const StackedBarGraph = ({
           >
             <XAxis dataKey="name" {...xAxisProps} />
             <YAxis />
-            <CartesianGrid stroke="#505050" strokeWidth={1} opacity={0.5} />
+            <Grid />
             <Tooltip
               cursor={{ opacity: "0.06" }}
               wrapperStyle={{
diff --git a/src/components/Visualizations/Graph/Styled.tsx b/src/components/Visualizations/Graph/Styled.tsx
index baaf0b635b..8b2c62efec 100644
--- a/src/components/Visualizations/Graph/Styled.tsx
+++ b/src/components/Visualizations/Graph/Styled.tsx
@@ -10,7 +10,7 @@ export const StyledTooltip = styled.div`
   border: 1px solid #374151;
   border-radius: 10px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
-  font-family: ${constants.fontFamilySerif};
+  font-family: ${constants.fontFamilyFuturistic};
   font-size: ${constants.fontSizeMedium};
   line-height: 1.6;
   color: ${constants.colorWhite};
@@ -25,18 +25,18 @@ export const StyledTooltipTeam = styled.span`
 export const StyledRadiant = styled.span`
   position: absolute;
   top: 48px;
-  left: 60px;
+  left: 100px;
   filter: drop-shadow(0 0 5px ${constants.colorSuccess});
-  font-family: ${constants.fontFamilySerif};
+  font-family: ${constants.fontFamilyFuturistic};
   font-size: ${constants.fontSizeCommon};
   color: ${constants.colorWhite};
 `;
 export const StyledDire = styled.span`
   position: absolute;
   bottom: 60px;
-  left: 60px;
+  left: 100px;
   filter: drop-shadow(0 0 5px ${constants.colorDanger});
-  font-family: ${constants.fontFamilySerif};
+  font-family: ${constants.fontFamilyFuturistic};
   font-size: ${constants.fontSizeCommon};
   color: ${constants.colorWhite};
 `;
@@ -49,7 +49,7 @@ export const StyledCustomizedTooltip = styled.div`
   border: 1px solid #374151;
   border-radius: 10px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
-  font-family: ${constants.fontFamilySerif};
+  font-family: ${constants.fontFamilyFuturistic};
   font-size: 14px;
   line-height: 1.6;
   color: ${constants.colorWhite};
@@ -127,3 +127,11 @@ export const NumPlayers = styled.div`
 export const Percentile = styled.div`
   font-size: ${constants.fontSizeMedium};
 `;
+export const HistogramTooltipDiv = styled.div<{
+  color?: string;
+  fontSize?: "small" | "medium";
+}>`
+  font-size: ${({ fontSize }) =>
+    fontSize === "medium" ? constants.fontSizeMedium : constants.fontSizeSmall};
+  color: ${({ color }) => color};
+`;
diff --git a/src/components/Visualizations/Graph/TrendGraph.tsx b/src/components/Visualizations/Graph/TrendGraph.tsx
index e68d8e0da7..b9bdeffa60 100644
--- a/src/components/Visualizations/Graph/TrendGraph.tsx
+++ b/src/components/Visualizations/Graph/TrendGraph.tsx
@@ -16,13 +16,15 @@ import { formatSeconds, fromNow, formatGraphValueData } from "../../../utility";
 import constants from "../../constants";
 import HeroImage from "../HeroImage";
 import useStrings from "../../../hooks/useStrings.hook";
+import Grid from "./Grid";
 
 const TooltipStylesDiv = styled.div`
   .tooltipWrapper {
-    background-color: ${constants.defaultPrimaryColor};
-    color: ${constants.textColorPrimary} !important;
-    font-size: ${constants.fontSizeMedium};
     min-width: 250px;
+    font-family: ${constants.fontFamilyFuturistic};
+    font-size: ${constants.fontSizeMedium};
+    color: ${constants.textColorPrimary} !important;
+    background-color: ${constants.defaultPrimaryColor};
   }
 
   .value {
@@ -136,12 +138,32 @@ const TrendGraph = ({ columns, name }: { columns: any[]; name: string }) => {
           bottom: 5,
         }}
       >
-        <XAxis interval={49}>
+        <XAxis
+          interval={49}
+          tick={{
+            fontFamily: constants.fontFamilySerif,
+            fontSize: 13,
+            fill: "#B0B0B0",
+          }}
+          tickFormatter={(value) => value?.toLocaleString()}
+          axisLine={false}
+          tickLine={false}
+        >
           <Label value="" position="insideTopRight" />
         </XAxis>
-        <YAxis domain={["auto", "auto"]} />
-        <CartesianGrid stroke="#505050" strokeWidth={1} opacity={0.5} />
-
+        <YAxis
+          domain={["auto", "auto"]}
+          width={50}
+          tick={{
+            fontFamily: constants.fontFamilySerif,
+            fontSize: 13,
+            fill: "#B0B0B0",
+          }}
+          tickFormatter={(value) => value?.toLocaleString()}
+          axisLine={false}
+          tickLine={false}
+        />
+        <Grid />
         <Tooltip content={<TrendTooltipContent name={name} />} />
         <Line
           dot={false}
diff --git a/src/components/constants.ts b/src/components/constants.ts
index 5e1f4204d8..bb1db85db3 100644
--- a/src/components/constants.ts
+++ b/src/components/constants.ts
@@ -74,6 +74,7 @@ export default {
   fontFamily: "Roboto",
   fontFamilySerif: "Roboto Serif",
   tableFontFamily: "Roboto",
+  fontFamilyFuturistic: "Quantico",
   fontWeightLight: "300",
   fontWeightNormal: "400",
   fontWeightMedium: "500",
diff --git a/src/utility.tsx b/src/utility.tsx
index 0dfb197acf..81937eb068 100644
--- a/src/utility.tsx
+++ b/src/utility.tsx
@@ -1077,7 +1077,7 @@ export function formatGraphValueData(data: number, histogramName?: string) {
       return formatSeconds(data);
 
     default:
-      return String(data);
+      return String(data?.toLocaleString());
   }
 }