diff --git a/src/components/AccountWidget/AccountWidget.tsx b/src/components/AccountWidget/AccountWidget.tsx
index 791456c3bd..8413a1e505 100644
--- a/src/components/AccountWidget/AccountWidget.tsx
+++ b/src/components/AccountWidget/AccountWidget.tsx
@@ -32,15 +32,11 @@ const AccountWidget = ({
       {!error && !loading && user ? (
         <LoggedIn style={style} playerId={user.account_id} />
       ) : (
-        <Button href={`${config.VITE_API_HOST}/login`}>
-          <IconSteam />
-          <ButtonLabel
-            style={{
-              lineHeight: "1px",
-            }}
-          >
-            {strings.app_login}
-          </ButtonLabel>
+        <Button
+          startIcon={<IconSteam />}
+          href={`${config.VITE_API_HOST}/login`}
+        >
+          {strings.app_login}
         </Button>
       )}
     </div>
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
index a0a06c8d8e..a5a3262168 100644
--- a/src/components/App/App.tsx
+++ b/src/components/App/App.tsx
@@ -33,6 +33,30 @@ const darkTheme = createTheme({
   palette: {
     mode: "dark",
   },
+  components: {
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          display: "flex-inline",
+          alignItems: "center",
+          textTransform: "none",
+          fontFamily: constants.fontFamilySerif,
+          fontSize: constants.fontSizeSmall,
+          fontWeight: 300,
+          "&:hover": {
+            backgroundColor: "transparent",
+            filter: "brightness(0.85)",
+          },
+        },
+        startIcon: {
+          marginRight: 2,
+          "& .MuiSvgIcon-root": {
+            fontSize: "1rem",
+          },
+        },
+      },
+    },
+  },
 });
 
 type AppStylesProps = {
diff --git a/src/components/Container/Container.tsx b/src/components/Container/Container.tsx
index 0f71b27405..ba446ec833 100644
--- a/src/components/Container/Container.tsx
+++ b/src/components/Container/Container.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import Heading from "../Heading/Heading";
 import Error from "../Error/Error";
 import { LoadingOverlayUpper30 } from "../LoadingOverlay";
+import { Spacer } from "../Spacer/Spacer";
 
 type ContainerProps = {
   title?: string;
@@ -37,7 +38,12 @@ const Container = ({
       {title && <Heading title={title} subtitle={subtitle} titleTo={titleTo} />}
       {error && <Error />}
       {!error && loading && <LoadingOverlayUpper30 text={text} />}
-      {!error && !loading && children}
+      {!error && !loading && (
+        <>
+          <Spacer variant="1" />
+          {children}
+        </>
+      )}
     </div>
   ) : null;
 
diff --git a/src/components/Heading/Styled.tsx b/src/components/Heading/Styled.tsx
index a31f068c9f..b732b0ea8c 100644
--- a/src/components/Heading/Styled.tsx
+++ b/src/components/Heading/Styled.tsx
@@ -2,6 +2,9 @@ import styled from "styled-components";
 import constants from "../constants";
 
 export const StyledDiv = styled.div`
+  display: flex;
+  align-items: center;
+
   &.top-heading {
     width: 100vw;
     position: relative;
@@ -22,8 +25,11 @@ export const StyledDiv = styled.div`
   .winner {
     position: relative;
     bottom: 1px;
-    background: rgb(25, 25, 25);
+    color: ${constants.colorGreenDark};
+    background: ${constants.colorGreen};
+    border: 0px solid ${constants.colorGreen};
     font-size: 10px;
+    font-weight: 600;
     padding: 1px;
     padding-right: 4px;
     margin-left: 10px;
@@ -42,7 +48,7 @@ export const StyledDiv = styled.div`
     width: 0;
     position: absolute;
     pointer-events: none;
-    border-right-color: rgb(25, 25, 25);
+    border-right-color: ${constants.colorGreen};
     border-width: 8px;
     margin-top: -8px;
   }
@@ -50,9 +56,6 @@ export const StyledDiv = styled.div`
   & svg {
     height: 20px !important;
     width: 20px !important;
-    position: relative;
-    margin-right: 6px;
-    top: 2px;
     opacity: 0.8;
     fill: ${constants.textColorPrimary};
   }
@@ -67,6 +70,9 @@ export const StyledDiv = styled.div`
   }
 
   .title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
     font-family: ${constants.fontFamilySerif};
     font-size: 1rem;
     font-weight: 400;
@@ -82,7 +88,7 @@ export const StyledDiv = styled.div`
   .subtitle {
     margin-left: 4px;
     font-size: 13px;
-    color: rgba(255, 255, 255, 0.5);
+    color: ${constants.colorGreyMuted};
     letter-spacing: normal;
     font-weight: normal;
     overflow-wrap: normal;
diff --git a/src/components/Home/Buttons.tsx b/src/components/Home/Buttons.tsx
index f97f9a43c7..b6eef23c11 100644
--- a/src/components/Home/Buttons.tsx
+++ b/src/components/Home/Buttons.tsx
@@ -12,15 +12,13 @@ const Buttons = ({ user }: HomePageProps) => {
   return (
     <div>
       {!user && (
-        <div>
-          <Button
-            variant="contained"
-            startIcon={<IconSteam />}
-            href={`${config.VITE_API_HOST}/login`}
-          >
-            {strings.home_login}
-          </Button>
-        </div>
+        <Button
+          variant="contained"
+          startIcon={<IconSteam />}
+          href={`${config.VITE_API_HOST}/login`}
+        >
+          {strings.home_login}
+        </Button>
       )}
     </div>
   );
diff --git a/src/components/Match/AbilityBuildTable.tsx b/src/components/Match/AbilityBuildTable.tsx
index 231acc914f..08a1aacacc 100644
--- a/src/components/Match/AbilityBuildTable.tsx
+++ b/src/components/Match/AbilityBuildTable.tsx
@@ -3,6 +3,7 @@ import { isRadiant, getTeamName } from "../../utility";
 import { IconRadiant, IconDire } from "../Icons";
 import Heading from "../Heading/Heading";
 import Table from "../Table/Table";
+import { Spacer } from "../Spacer/Spacer";
 
 const filterMatchPlayers = (players: MatchPlayer[], team = "") =>
   players
@@ -34,6 +35,7 @@ const AbilityBuildTable = ({
       title={`${getTeamName(radiantTeam, true)} - ${heading}`}
       icon={<IconRadiant />}
     />
+    <Spacer variant="1" />
     <Table
       data={filterMatchPlayers(players, "radiant")}
       columns={columns}
@@ -43,6 +45,7 @@ const AbilityBuildTable = ({
       title={`${getTeamName(direTeam, false)} - ${heading}`}
       icon={<IconDire />}
     />
+    <Spacer variant="1" />
     <Table
       data={filterMatchPlayers(players, "dire")}
       columns={columns}
diff --git a/src/components/Match/BuildingMap/BuildingMap.tsx b/src/components/Match/BuildingMap/BuildingMap.tsx
index df6db466e9..44fcfc4e9d 100644
--- a/src/components/Match/BuildingMap/BuildingMap.tsx
+++ b/src/components/Match/BuildingMap/BuildingMap.tsx
@@ -12,6 +12,7 @@ import buildingData733 from "./buildingData733";
 import constants from "../../constants";
 import config from "../../../config";
 import useStrings from "../../../hooks/useStrings.hook";
+import { Spacer } from "../../Spacer/Spacer";
 
 const buildingDataByPatch = [
   { patch: "7.33", data: buildingData733 },
@@ -560,6 +561,7 @@ const BuildingMap = ({ match }: { match: Match }) => {
   return (
     <StyledDiv>
       <Heading title={strings.heading_buildings} />
+      <Spacer variant="1" />
       <DotaMap startTime={match.start_time} maxWidth={300}>
         {icons}
         <div className="hero-icons radiant-safe">{radiantSafe}</div>
diff --git a/src/components/Match/Laning/Graph.tsx b/src/components/Match/Laning/Graph.tsx
index a852f61006..6aba5cb35e 100644
--- a/src/components/Match/Laning/Graph.tsx
+++ b/src/components/Match/Laning/Graph.tsx
@@ -19,6 +19,8 @@ import {
   StyledHolder,
 } from "../../Visualizations/Graph/Styled";
 import useStrings from "../../../hooks/useStrings.hook";
+import { Spacer } from "../../Spacer/Spacer";
+import constants from "../../constants";
 
 const formatGraphTime = (minutes: number) => `${minutes}:00`;
 
@@ -116,6 +118,7 @@ const Graph = (props: GraphProps) => {
     return (
       <StyledHolder>
         <Heading title={strings.heading_graph_cs} />
+        <Spacer variant="1" />
         <ResponsiveContainer width="100%" height={400}>
           <LineChart
             data={matchData}
@@ -126,9 +129,32 @@ const Graph = (props: GraphProps) => {
               bottom: 5,
             }}
           >
-            <XAxis dataKey="time" />
-            <YAxis mirror />
-            <CartesianGrid stroke="#505050" strokeWidth={1} opacity={0.5} />
+            <XAxis
+              dataKey="time"
+              tick={{
+                fontFamily: constants.fontFamilySerif,
+                fontSize: 12,
+                fill: constants.colorGreyMuted,
+              }}
+              axisLine={false}
+              tickLine={false}
+            />
+            <YAxis
+              mirror
+              tick={{
+                fontFamily: constants.fontFamilySerif,
+                fontSize: 12,
+                fill: constants.colorGreyMuted,
+              }}
+              axisLine={false}
+              tickLine={false}
+            />
+            <CartesianGrid
+              strokeWidth={1}
+              stroke="#2a2a2a"
+              strokeDasharray="3 3"
+              opacity={0.4}
+            />
 
             <Tooltip content={<CustomizedTooltip />} />
             {match.players.map((player) => {
@@ -158,7 +184,13 @@ const Graph = (props: GraphProps) => {
                 />
               );
             })}
-            <Legend />
+            <Legend
+              wrapperStyle={{
+                fontFamily: constants.fontFamilySerif,
+                fontSize: 13,
+                color: constants.colorGreyMuted,
+              }}
+            />
             <Brush endIndex={12} height={20} />
           </LineChart>
         </ResponsiveContainer>
diff --git a/src/components/Match/MatchHeader/MatchHeader.tsx b/src/components/Match/MatchHeader/MatchHeader.tsx
index 68e055a3d8..8071bef646 100644
--- a/src/components/Match/MatchHeader/MatchHeader.tsx
+++ b/src/components/Match/MatchHeader/MatchHeader.tsx
@@ -55,7 +55,7 @@ const Styled = styled.header`
     letter-spacing: 1px;
 
     @media only screen and (max-width: 1023px) {
-      margin: 10px 0;
+      margin: 10px 0 20px;
       justify-self: auto;
     }
 
@@ -128,10 +128,12 @@ const Styled = styled.header`
       font-family: ${constants.fontFamilySerif};
       font-size: ${constants.fontSizeSmall};
       letter-spacing: 0.02rem;
+      margin-top: -16px;
     }
 
     & .duration {
-      font-size: 28px;
+      margin-top: 6px;
+      font-size: 32px;
 
       @media only screen and (max-width: 400px) {
         font-size: 24px;
@@ -141,7 +143,7 @@ const Styled = styled.header`
     & .ended {
       font-size: ${constants.fontSizeSmall};
       color: ${constants.colorMutedLight};
-      margin-top: 3px;
+      margin-top: 6px;
 
       & > div {
         display: inline-block;
@@ -250,15 +252,15 @@ const Styled = styled.header`
       padding: 0px !important;
       padding-right: 4px !important;
     }
-    
+
     svg {
-      margin: 0px  !important;
-      margin-left: 4px  !important;
+      margin: 0px !important;
+      margin-left: 4px !important;
     }
 
     line-height: 0px !important;
     height: 20px !important;
-  },
+  }
 `;
 
 const getWinnerStyle = (radiantWin: boolean | undefined) => {
@@ -355,10 +357,6 @@ const MatchHeader = ({ match }: { match: Match }) => {
                     style={{ height: 18, width: 18 }}
                   />
                 }
-                sx={{
-                  fontFamily: constants.fontFamilySerif,
-                  fontSize: constants.fontSizeSmall,
-                }}
               >
                 {match.match_id}
               </Button>
@@ -366,7 +364,7 @@ const MatchHeader = ({ match }: { match: Match }) => {
             <li>
               <span className="infoKey">{strings.match_region}</span>
               <span className="infoValue">
-                {strings[`region_${match.region}` as keyof Strings]}
+                {strings[`region_${match.region}` as keyof Strings] || "-"}
               </span>
             </li>
           </ul>
diff --git a/src/components/Match/Overview/Overview.tsx b/src/components/Match/Overview/Overview.tsx
index 147c987d66..310f649aac 100644
--- a/src/components/Match/Overview/Overview.tsx
+++ b/src/components/Match/Overview/Overview.tsx
@@ -9,6 +9,7 @@ import Collapsible from "../../Collapsible/Collapsible";
 import AbilityBuildTable from "../AbilityBuildTable";
 import DeferredContainer from "../../DeferredContainer/DeferredContainer";
 import config from "../../../config";
+import { Spacer } from "../../Spacer/Spacer";
 
 const Styled = styled.div`
   width: 100%;
@@ -73,6 +74,7 @@ export const getOverviewTab = (strings: Strings, beta = false) => {
             summable
           />
         )}
+        <Spacer variant="1" />
         <DeferredContainer>
           <Collapsible name="abilityBuilds" initialMaxHeight={800}>
             <AbilityBuildTable
diff --git a/src/components/Match/TeamTable.tsx b/src/components/Match/TeamTable.tsx
index 3bd5b8f395..5ff35fcdc0 100644
--- a/src/components/Match/TeamTable.tsx
+++ b/src/components/Match/TeamTable.tsx
@@ -5,6 +5,7 @@ import { isRadiant, getTeamName } from "../../utility";
 import Heading from "../Heading/Heading";
 import Table from "../Table/Table";
 import PicksBans from "./Overview/PicksBans"; // Displayed only on `Overview` page
+import { Spacer } from "../Spacer/Spacer";
 
 const StyledDiv = styled.div`
   .teamtable {
@@ -161,12 +162,14 @@ class TeamTable extends React.Component<TeamTableProps> {
           buttonIcon={buttonIcon || ""}
           winner={!hideWinnerTag && radiantWin}
         />
+        <Spacer variant="1" />
         <div className="teamtable teamtable-radiant">
           <Table
             data={filterMatchPlayers(players, "radiant")}
             {...tableProps}
           />
         </div>
+        <Spacer variant="1" />
         {
           gameMode === 22 ? (
             <>
@@ -199,13 +202,16 @@ class TeamTable extends React.Component<TeamTableProps> {
             )
           ) /* team 0 - radiant */
         }
+        <Spacer variant="1" />
         <Heading
           title={`${getTeamName(direTeam, false)} - ${heading}`}
           winner={!hideWinnerTag && !radiantWin}
         />
+        <Spacer variant="1" />
         <div className="teamtable teamtable-dire">
           <Table data={filterMatchPlayers(players, "dire")} {...tableProps} />
         </div>
+        <Spacer variant="1" />
         {
           gameMode === 22 ? (
             <>
diff --git a/src/components/Match/matchPages.tsx b/src/components/Match/matchPages.tsx
index 7928199bda..db37e3c8c9 100644
--- a/src/components/Match/matchPages.tsx
+++ b/src/components/Match/matchPages.tsx
@@ -20,6 +20,7 @@ import Chat from "./Chat/Chat";
 import { StyledFlexContainer, StyledFlexElement } from "./StyledMatch";
 import { getHeroImageUrl, IMAGESIZE_ENUM } from "../../utility";
 import config from "../../config";
+import { Spacer } from "../Spacer/Spacer";
 
 const TickElement = (props: { x: number; y: number; payload: any }) => {
   const { x, y, payload } = props;
@@ -278,14 +279,18 @@ const matchPages = (
       content: (match: Match) => (
         <div>
           <Timeline match={match} />
+          <Spacer variant="2" />
           <MatchGraph
             match={match}
             type="difference"
             // sponsorURL={gosuUrl}
             // sponsorIcon={gosuIcon}
           />
+          <Spacer variant="2" />
           <MatchGraph match={match} type="gold" />
+          <Spacer variant="2" />
           <MatchGraph match={match} type="xp" />
+          <Spacer variant="2" />
           <MatchGraph match={match} type="lh" />
         </div>
       ),
diff --git a/src/components/Player/Pages/Overview/Overview.tsx b/src/components/Player/Pages/Overview/Overview.tsx
index 9009ad2119..d5bd0ad795 100644
--- a/src/components/Player/Pages/Overview/Overview.tsx
+++ b/src/components/Player/Pages/Overview/Overview.tsx
@@ -20,6 +20,7 @@ import CountsSummary from "./CountsSummary";
 import { formatTemplateToString } from "../../../../utility";
 import Collapsible from "../../../Collapsible/Collapsible";
 import useStrings from "../../../../hooks/useStrings.hook";
+import { Spacer } from "../../../Spacer/Spacer";
 
 export const MAX_MATCHES_ROWS = 20;
 const MAX_HEROES_ROWS = 10;
@@ -162,6 +163,7 @@ const Overview = ({
         initialMaxHeight={800}
         buttonStyle={{ top: 8 }}
       >
+        <Spacer variant="1" />
         <SummaryContainer
           title={strings.heading_avg_and_max}
           titleTo={`/players/${playerId}/records`}
@@ -200,6 +202,7 @@ const Overview = ({
             )}
           />
         </SummaryContainer>
+        <Spacer variant="1" />
         <SummaryContainer
           title={strings.tab_counts}
           loading={countsLoading}
@@ -213,6 +216,7 @@ const Overview = ({
           <CountsSummary data={countsData} />
         </SummaryContainer>
       </Collapsible>
+      <Spacer variant="1" />
       <MatchesContainer>
         <Container
           title={strings.heading_matches}
@@ -230,7 +234,7 @@ const Overview = ({
           />
         </Container>
       </MatchesContainer>
-
+      <Spacer variant="1" />
       <HeroesContainer>
         <Collapsible
           name="overviewPeers"
diff --git a/src/components/Spacer/Spacer.tsx b/src/components/Spacer/Spacer.tsx
index 0bbe8b81bf..ecf2310655 100644
--- a/src/components/Spacer/Spacer.tsx
+++ b/src/components/Spacer/Spacer.tsx
@@ -1,3 +1,5 @@
+import constants from "../constants";
+
 import React from "react";
 
 interface SpacerProps {
@@ -6,13 +8,13 @@ interface SpacerProps {
 const getHeight = (variant: SpacerProps["variant"]) => {
   switch (variant) {
     case "1":
-      return 8;
+      return constants.verticalSpaceSmall;
     case "2":
-      return 16;
+      return constants.verticalSpaceMedium;
     case "3":
-      return 24;
+      return constants.verticalSpaceLarge;
     default:
-      return 8;
+      return constants.verticalSpaceSmall;
   }
 };
 const Spacer = ({ variant }: SpacerProps) => {
diff --git a/src/components/Visualizations/Graph/DistributionGraph.tsx b/src/components/Visualizations/Graph/DistributionGraph.tsx
index b28ade4729..9f5e5b6bcc 100644
--- a/src/components/Visualizations/Graph/DistributionGraph.tsx
+++ b/src/components/Visualizations/Graph/DistributionGraph.tsx
@@ -10,8 +10,9 @@ import {
   Label,
   ResponsiveContainer,
 } from "recharts";
-import { StyledTooltip } from "./Styled";
+import { StyledTooltip, BinName, NumPlayers, Percentile } from "./Styled";
 import useStrings from "../../../hooks/useStrings.hook";
+import constants from "../../constants";
 
 const DistributionTooltipContent = ({
   payload,
@@ -25,14 +26,14 @@ const DistributionTooltipContent = ({
   const total = array.length ? array[array.length - 1].cumulative_sum : 0;
   return (
     <StyledTooltip>
-      <div>{data && data.bin_name}</div>
-      <div>
-        {data && data.count} {strings.th_players}
-      </div>
-      <div>
+      <BinName>{data && data.bin_name}</BinName>
+      <NumPlayers>
+        {data && data.count?.toLocaleString()} {strings.th_players}
+      </NumPlayers>
+      <Percentile>
         {data && ((data.cumulative_sum / total) * 100).toFixed(2)}{" "}
         {strings.th_percentile}
-      </div>
+      </Percentile>
     </StyledTooltip>
   );
 };
@@ -50,22 +51,89 @@ const DistributionGraph = ({
         <ComposedChart
           data={data}
           margin={{
-            top: 5,
-            right: 30,
-            left: 30,
-            bottom: 5,
+            top: 20,
+            right: 40,
+            left: 20,
+            bottom: 20,
           }}
+          barCategoryGap="18%"
         >
-          <XAxis dataKey="bin_name" interval={xTickInterval || 4}>
+          <XAxis
+            dataKey="bin_name"
+            interval={xTickInterval || 4}
+            tick={{
+              fontFamily: constants.fontFamilySerif,
+              fontSize: 13,
+              fill: "#B0B0B0",
+            }}
+            tickFormatter={(value) => value?.toLocaleString()}
+            axisLine={false}
+            tickLine={false}
+          >
             <Label value="" position="insideTopRight" />
           </XAxis>
-          <YAxis yAxisId="left" orientation="left" stroke="#1393f9" />
-          <YAxis yAxisId="right" orientation="right" stroke="#ff4c4c" />
-          <CartesianGrid stroke="#505050" strokeWidth={1} opacity={0.5} />
-
-          <Tooltip content={<DistributionTooltipContent array={data} />} />
-          <Bar dataKey="count" yAxisId="left" fill="#1393f9" />
-          <Line dataKey="cumulative_sum" yAxisId="right" stroke="#ff4c4c" />
+          <YAxis
+            width={50}
+            tick={{
+              fontFamily: constants.fontFamilySerif,
+              fontSize: 13,
+              fill: "#B0B0B0",
+            }}
+            tickFormatter={(value) => value?.toLocaleString()}
+            axisLine={false}
+            tickLine={false}
+            yAxisId="left"
+            orientation="left"
+            stroke="#1393f9"
+          />
+          <YAxis
+            width={50}
+            tick={{
+              fontFamily: constants.fontFamilySerif,
+              fontSize: 13,
+              fill: "#B0B0B0",
+            }}
+            tickFormatter={(value) => value?.toLocaleString()}
+            axisLine={false}
+            tickLine={false}
+            yAxisId="right"
+            orientation="right"
+            stroke="#4cffc0"
+          />
+          <CartesianGrid
+            stroke="#404040"
+            strokeDasharray="4 4"
+            vertical={false}
+            opacity={0.25}
+          />
+          <Tooltip
+            content={<DistributionTooltipContent array={data} />}
+            contentStyle={{
+              background: "#222",
+              border: "1px solid #444",
+              borderRadius: 8,
+            }}
+          />
+          <Bar
+            dataKey="count"
+            yAxisId="left"
+            fill="#6366F1"
+            radius={[4, 4, 0, 0]}
+            animationDuration={700}
+          />
+          <Line
+            dataKey="cumulative_sum"
+            yAxisId="right"
+            stroke="#FBBF24"
+            strokeWidth={3}
+            type="monotone"
+            dot={false}
+            activeDot={{ r: 5 }}
+            animationDuration={700}
+            style={{
+              filter: "drop-shadow(0 0 5px rgba(255,215,0,.5))",
+            }}
+          />
         </ComposedChart>
       </ResponsiveContainer>
     );
diff --git a/src/components/Visualizations/Graph/MatchGraph.tsx b/src/components/Visualizations/Graph/MatchGraph.tsx
index 8337d73ff4..81a66011b9 100644
--- a/src/components/Visualizations/Graph/MatchGraph.tsx
+++ b/src/components/Visualizations/Graph/MatchGraph.tsx
@@ -22,11 +22,17 @@ import {
   StyledHolder,
   GoldSpan,
   XpSpan,
-  StyledTooltipGold,
+  StyledTooltipTime,
+  StyledTooltipNetworthLineEntry,
   StyledCustomizedTooltip,
+  TooltipLabel,
+  TooltipLineEntry,
+  TooltipLineEntryHeroName,
+  TooltipLineEntryValue,
 } from "./Styled";
 import config from "../../../config";
 import useStrings from "../../../hooks/useStrings.hook";
+import { Spacer } from "../../Spacer/Spacer";
 
 const formatGraphTime = (minutes: number) => `${minutes}:00`;
 
@@ -44,7 +50,7 @@ const generateDiffData = (match: Match) => {
   return data;
 };
 
-const CustomizedTooltip = ({
+const PlayerGraphTooltip = ({
   label,
   payload,
 }: {
@@ -55,22 +61,26 @@ const CustomizedTooltip = ({
   payload?.forEach((p, i) => {
     origOrderMap[p.dataKey] = i;
   });
+  const descendingOrder = payload?.sort((a, b) => {
+    return b.value - a.value;
+  });
   return (
     <StyledCustomizedTooltip>
-      <div className="label">{label}</div>
-      {payload
-        ?.sort((a, b) => {
-          return b.value - a.value;
-        })
-        ?.map((data, i) => (
-          <div
-            key={i}
-            className={`data ${origOrderMap[data.dataKey] < 5 && "isRadiant"}`}
-            style={{ borderLeft: `8px solid ${data.color}` }}
-          >
-            {data.dataKey}: {data.value}
-          </div>
-        ))}
+      <TooltipLabel>{label}</TooltipLabel>
+      {descendingOrder?.map((data, i) => (
+        <TooltipLineEntry
+          key={i}
+          className={`data ${origOrderMap[data.dataKey] < 5 ? "isRadiant" : "isDire"}`}
+          color={data.color}
+        >
+          <TooltipLineEntryHeroName color={data.color}>
+            {data.dataKey}
+          </TooltipLineEntryHeroName>
+          <TooltipLineEntryValue>
+            {data.value?.toLocaleString()}
+          </TooltipLineEntryValue>
+        </TooltipLineEntry>
+      ))}
     </StyledCustomizedTooltip>
   );
 };
@@ -82,11 +92,10 @@ const XpTooltipContent = ({ payload }: { payload?: any[] }) => {
     const { rXpAdv, rGoldAdv, time } = data;
     return (
       <StyledTooltip>
-        <StyledTooltipGold>
+        <StyledTooltipTime>
           <span>{`${formatGraphTime(time)}`}</span>
-        </StyledTooltipGold>
-        <br />
-        <StyledTooltipGold>
+        </StyledTooltipTime>
+        <StyledTooltipNetworthLineEntry>
           <StyledTooltipTeam
             color={
               rGoldAdv > 0 ? constants.colorSuccess : constants.colorDanger
@@ -95,20 +104,20 @@ const XpTooltipContent = ({ payload }: { payload?: any[] }) => {
             {rGoldAdv > 0 ? strings.general_radiant : strings.general_dire}
           </StyledTooltipTeam>
           <GoldSpan>
-            {Math.abs(rGoldAdv)} {strings.heading_graph_gold}
+            {Math.abs(rGoldAdv)?.toLocaleString()} {strings.heading_graph_gold}
           </GoldSpan>
-        </StyledTooltipGold>
+        </StyledTooltipNetworthLineEntry>
         <br />
-        <StyledTooltipGold>
+        <StyledTooltipNetworthLineEntry>
           <StyledTooltipTeam
             color={rXpAdv > 0 ? constants.colorSuccess : constants.colorDanger}
           >
             {rXpAdv > 0 ? strings.general_radiant : strings.general_dire}
           </StyledTooltipTeam>
           <XpSpan>
-            {Math.abs(rXpAdv)} {strings.heading_graph_xp}
+            {Math.abs(rXpAdv)?.toLocaleString()} {strings.heading_graph_xp}
           </XpSpan>
-        </StyledTooltipGold>
+        </StyledTooltipNetworthLineEntry>
       </StyledTooltip>
     );
   } catch (e) {
@@ -116,6 +125,15 @@ 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) {
@@ -132,14 +150,15 @@ const XpNetworthGraph = ({ match }: { match: Match }) => {
     ) * 5000;
   return (
     <StyledHolder>
-      <StyledRadiant>{strings.general_radiant}</StyledRadiant>
-      <StyledDire>{strings.general_dire}</StyledDire>
+      <StyledRadiant>The {strings.general_radiant}</StyledRadiant>
+      <StyledDire>The {strings.general_dire}</StyledDire>
       <Heading
         title={strings.heading_graph_difference}
         // buttonLabel={config.VITE_ENABLE_GOSUAI ? strings.gosu_default : null}
         // buttonTo={`${sponsorURL}Graphs`}
         // buttonIcon={sponsorIcon}
       />
+      <Spacer variant="1" />
       <ResponsiveContainer width="100%" height={400}>
         <LineChart
           data={matchData}
@@ -152,31 +171,53 @@ const XpNetworthGraph = ({ match }: { match: Match }) => {
         >
           <ReferenceArea y1={0} y2={maxY} fill="rgba(102, 187, 106, 0.12)" />
           <ReferenceArea y1={0} y2={minY} fill="rgba(255, 76, 76, 0.12)" />
-          <XAxis dataKey="time" tickFormatter={formatGraphTime} />
+          <XAxis
+            dataKey="time"
+            tickFormatter={formatGraphTime}
+            tick={{
+              fontFamily: constants.fontFamilySerif,
+              fontSize: 12,
+              fill: constants.colorGreyMuted,
+            }}
+            axisLine={false}
+            tickLine={false}
+          />
           <YAxis
             domain={[minY, maxY]}
-            mirror={true}
-            padding={{ top: 5, bottom: 5 }}
+            mirror
+            tick={{
+              fontFamily: constants.fontFamilySerif,
+              fontSize: 12,
+              fill: constants.colorGreyMuted,
+            }}
+            tickFormatter={(value) => value?.toLocaleString()}
+            axisLine={false}
+            tickLine={false}
           />
           <ReferenceLine y={0} stroke="#505050" strokeWidth={2} opacity={1} />
-          <CartesianGrid stroke="#505050" strokeWidth={1} opacity={0.5} />
-
+          <Grid />
           <Tooltip content={<XpTooltipContent />} />
           <Line
             dot={false}
             dataKey="rXpAdv"
-            stroke="#acc9ed"
+            stroke={constants.colorGraphBlue}
             strokeWidth={2}
             name={strings.heading_graph_xp}
           />
           <Line
             dot={false}
             dataKey="rGoldAdv"
-            stroke="#ffd455"
+            stroke={constants.colorGraphYellow}
             strokeWidth={2}
             name={strings.heading_graph_gold}
           />
-          <Legend />
+          <Legend
+            wrapperStyle={{
+              fontFamily: constants.fontFamilySerif,
+              fontSize: 13,
+              color: constants.colorGreyMuted,
+            }}
+          />
         </LineChart>
       </ResponsiveContainer>
     </StyledHolder>
@@ -239,6 +280,7 @@ class PlayersGraph extends React.Component<
       return (
         <StyledHolder>
           <Heading title={strings[`heading_graph_${type}` as keyof Strings]} />
+          <Spacer variant="1" />
           <ResponsiveContainer width="100%" height={400}>
             <LineChart
               data={matchData}
@@ -249,11 +291,29 @@ class PlayersGraph extends React.Component<
                 bottom: 5,
               }}
             >
-              <XAxis dataKey="time" />
-              <YAxis mirror={true} />
-              <CartesianGrid stroke="#505050" strokeWidth={1} opacity={0.5} />
-
-              <Tooltip content={<CustomizedTooltip />} />
+              <XAxis
+                dataKey="time"
+                tick={{
+                  fontFamily: constants.fontFamilySerif,
+                  fontSize: 12,
+                  fill: constants.colorGreyMuted,
+                }}
+                axisLine={false}
+                tickLine={false}
+              />
+              <YAxis
+                mirror
+                tick={{
+                  fontFamily: constants.fontFamilySerif,
+                  fontSize: 12,
+                  fill: constants.colorGreyMuted,
+                }}
+                tickFormatter={(value) => value?.toLocaleString()}
+                axisLine={false}
+                tickLine={false}
+              />
+              <Grid />
+              <Tooltip content={<PlayerGraphTooltip />} />
               {match.players.map((player) => {
                 const hero = heroes[player.hero_id] || {};
                 const playerColor =
@@ -279,6 +339,11 @@ class PlayersGraph extends React.Component<
               <Legend
                 onMouseEnter={this.handleMouseEnter}
                 onMouseLeave={this.handleMouseLeave}
+                wrapperStyle={{
+                  fontFamily: constants.fontFamilySerif,
+                  fontSize: 13,
+                  color: constants.colorGreyMuted,
+                }}
               />
             </LineChart>
           </ResponsiveContainer>
diff --git a/src/components/Visualizations/Graph/Styled.tsx b/src/components/Visualizations/Graph/Styled.tsx
index 0c11981033..baaf0b635b 100644
--- a/src/components/Visualizations/Graph/Styled.tsx
+++ b/src/components/Visualizations/Graph/Styled.tsx
@@ -4,59 +4,73 @@ import constants from "../../constants";
 export const StyledTooltip = styled.div`
   position: relative;
   width: auto;
-  display: block;
-  padding: 0.5em;
-  background-color: ${constants.darkPrimaryColor};
+  padding: 16px 24px;
+  box-sizing: border-box;
+  background: #111827;
+  border: 1px solid #374151;
+  border-radius: 10px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+  font-family: ${constants.fontFamilySerif};
+  font-size: ${constants.fontSizeMedium};
+  line-height: 1.6;
+  color: ${constants.colorWhite};
 `;
-
 export const StyledTooltipTeam = styled.span`
   position: relative;
-  margin-right: 0.3em;
+  margin-right: 8px;
   color: ${(props) => props.color};
+  font-size: ${constants.fontSizeMedium};
+  font-weight: 500;
 `;
-
 export const StyledRadiant = styled.span`
-  color: white;
   position: absolute;
-  top: 52px;
-  left: 100px;
+  top: 48px;
+  left: 60px;
   filter: drop-shadow(0 0 5px ${constants.colorSuccess});
+  font-family: ${constants.fontFamilySerif};
+  font-size: ${constants.fontSizeCommon};
+  color: ${constants.colorWhite};
 `;
 export const StyledDire = styled.span`
   position: absolute;
   bottom: 60px;
-  left: 100px;
-  color: white;
+  left: 60px;
   filter: drop-shadow(0 0 5px ${constants.colorDanger});
+  font-family: ${constants.fontFamilySerif};
+  font-size: ${constants.fontSizeCommon};
+  color: ${constants.colorWhite};
 `;
-
 export const StyledCustomizedTooltip = styled.div`
-  background-color: #131519;
-  border: 2px solid #27292b;
-  bottom: 25px;
   position: relative;
-
+  bottom: 25px;
+  padding: 16px 24px;
+  box-sizing: border-box;
+  background: #111827;
+  border: 1px solid #374151;
+  border-radius: 10px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+  font-family: ${constants.fontFamilySerif};
+  font-size: 14px;
+  line-height: 1.6;
+  color: ${constants.colorWhite};
   div {
     margin-bottom: 5px;
   }
 
-  .label {
-    text-align: center;
-    border-bottom: 1px solid #505459;
-  }
-
   .data {
-    line-height: 30px;
-    padding-right: 7px;
-    padding-left: 7px;
-    background: linear-gradient(to right, rgba(82, 51, 50, 0.8), transparent);
+    font-size: ${constants.fontSizeSmall};
+    line-height: 1.6;
+    padding: 7px;
 
     &.isRadiant {
-      background: linear-gradient(to right, rgba(50, 82, 51, 0.8), transparent);
+      background: linear-gradient(to right, rgba(50, 82, 51, 0.2), transparent);
+    }
+
+    &.isDire {
+      background: linear-gradient(to right, rgba(82, 51, 50, 0.2), transparent);
     }
   }
 `;
-
 export const StyledHolder = styled.div`
   position: relative;
 `;
@@ -66,6 +80,50 @@ export const GoldSpan = styled.span`
 export const XpSpan = styled.span`
   color: #acc9ed;
 `;
-export const StyledTooltipGold = styled.div`
+export const StyledTooltipNetworthLineEntry = styled.div`
   display: inline-flex;
+  align-items: center;
+  font-size: ${constants.fontSizeMedium};
+`;
+export const StyledTooltipTime = styled.div`
+  margin-bottom: 8px;
+  padding-bottom: 4px;
+  border-bottom: 1px solid #505459;
+  font-size: ${constants.fontSizeMedium};
+  font-weight: 600;
+  text-align: center;
+`;
+export const TooltipLabel = styled.div`
+  padding-bottom: 4px;
+  border-bottom: 1px solid #505459;
+  font-size: ${constants.fontSizeMedium};
+  text-align: center;
+`;
+export const TooltipLineEntry = styled.div<{ color: string }>`
+  padding: 4px 0;
+  display: flex;
+  border-left: ${({ color }) => `8px solid ${color}`};
+`;
+export const TooltipLineEntryHeroName = styled.span<{ color: string }>`
+  margin-right: 8px;
+  font-size: ${constants.fontSizeMedium};
+  color: ${({ color }) => color};
+`;
+export const TooltipLineEntryValue = styled.span`
+  margin-left: auto;
+  display: inline-block;
+  font-size: ${constants.fontSizeMedium};
+  color: ${constants.colorWhite};
+`;
+export const BinName = styled.div`
+  color: ${constants.colorWhite};
+  font-size: ${constants.fontSizeCommon};
+  font-weight: 600;
+  text-decoration: underline;
+`;
+export const NumPlayers = styled.div`
+  font-size: ${constants.fontSizeMedium};
+`;
+export const Percentile = styled.div`
+  font-size: ${constants.fontSizeMedium};
 `;
diff --git a/src/components/constants.ts b/src/components/constants.ts
index 56723bef5a..5e1f4204d8 100644
--- a/src/components/constants.ts
+++ b/src/components/constants.ts
@@ -6,6 +6,7 @@ export default {
   colorSuccess: "#66BB6A",
   colorDanger: "#ff4c4c",
   colorGreen: "#66BB6A",
+  colorGreenDark: "#093c0b",
   colorRed: "#ff4c4c",
   colorBlue: "#6BF",
   colorMuted: "#727272",
@@ -22,6 +23,7 @@ export default {
   colorBlackMuted: "rgba(0, 0, 0, .75)",
   colorBlueMuted: "rgba(102, 187, 255, 0.3)",
   colorYelorMuted: "rgba(255, 171, 64, 0.3)",
+  colorGreyMuted: "#9ca3af",
   colorMutedLight: "rgba(255, 255, 255, 0.6)",
   colorMutedGreen: "#325233",
   colorMutedRed: "#523332",
@@ -64,6 +66,8 @@ export default {
   colorNeutralTier5: "#FFE195",
   colorMana: "#578dca",
   colorBoxBlue: "rgba(71, 114, 179, 0.05)",
+  colorGraphYellow: "rgb(223,217,94)",
+  colorGraphBlue: "rgb(192,217,220)",
   sliderTicksColor: "#757575",
   sliderTicksColorActive: "#337AB7",
   dividerColor: "rgb(52, 50, 50)",
@@ -77,6 +81,9 @@ export default {
   fontSizeMedium: "14px",
   fontSizeSmall: "12px",
   fontSizeTiny: "10px",
+  verticalSpaceSmall: "8px",
+  verticalSpaceMedium: "16px",
+  verticalSpaceLarge: "24px",
   navDrawerWidth: "256px",
   normalTransition: "all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms",
   linearTransition: "all 300ms linear",