diff --git a/packages/design-system/src/index.ts b/packages/design-system/src/index.ts
index 9d3a8ed9..46d1d9af 100644
--- a/packages/design-system/src/index.ts
+++ b/packages/design-system/src/index.ts
@@ -38,4 +38,5 @@ export { MetaHeading } from './MetaHeading';
 export { MetaButton } from './MetaButton';
 export { MetaBox } from './MetaBox';
 export { MetaTag } from './MetaTag';
+export { H1, P } from './typography';
 export { ResponsiveText } from './ResponsiveText';
diff --git a/packages/design-system/src/typography.tsx b/packages/design-system/src/typography.tsx
new file mode 100644
index 00000000..764e4204
--- /dev/null
+++ b/packages/design-system/src/typography.tsx
@@ -0,0 +1,16 @@
+import { Text } from '@chakra-ui/core';
+import React from 'react';
+
+export type TextProps = {
+  children: React.ReactNode;
+};
+
+const H1: React.FC<TextProps> = ({ children }) => (
+  <Text fontFamily="body" fontSize="2xl" fontWeight="bold" mb={4}>
+    {children}
+  </Text>
+);
+
+const P: React.FC<TextProps> = ({ children }) => <Text>{children}</Text>;
+
+export { H1, P };
diff --git a/packages/web/pages/player/[username].tsx b/packages/web/pages/player/[username].tsx
index 246e0bb7..9dea8c79 100644
--- a/packages/web/pages/player/[username].tsx
+++ b/packages/web/pages/player/[username].tsx
@@ -2,6 +2,7 @@ import {
   Container,
   MetaBox,
   MetaTag,
+  P,
   SimpleGrid,
   Text,
   Wrap,
@@ -17,6 +18,7 @@ import {
 } from 'next';
 import Error from 'next/error';
 import React from 'react';
+import { getPlayerDescription } from 'utils/playerHelpers';
 
 type Props = InferGetStaticPropsType<typeof getStaticProps>;
 
@@ -25,19 +27,15 @@ const PlayerPage: React.FC<Props> = ({ player }) => {
     return <Error statusCode={404} />;
   }
 
-  const aboutMeText = player.box_profile?.description;
-
   return (
     <>
       <PlayerHero player={player} />
       <PlayerFeatures player={player} />
       <Container maxW="xl">
         <SimpleGrid columns={[1, 1, 2, 3]} spacing="8" pt="12">
-          {aboutMeText ? (
-            <MetaBox title="About me">
-              <Text fontFamily="body">{player.box_profile?.description}</Text>
-            </MetaBox>
-          ) : null}
+          <MetaBox title="About me">
+            <P>{getPlayerDescription(player)}</P>
+          </MetaBox>
           <MetaBox title="Skills">
             <Text fontFamily="body" color="whiteAlpha.500">
               Unavailable
diff --git a/packages/web/utils/playerHelpers.ts b/packages/web/utils/playerHelpers.ts
index 1cda6f69..58d3966e 100644
--- a/packages/web/utils/playerHelpers.ts
+++ b/packages/web/utils/playerHelpers.ts
@@ -6,3 +6,6 @@ export const getPlayerImage = (player: PlayerFragmentFragment): string =>
 
 export const getPlayerName = (player: PlayerFragmentFragment): string =>
   player.box_profile?.name || player.username;
+
+export const getPlayerDescription = (player: PlayerFragmentFragment): string =>
+  player.box_profile?.description || '';