diff --git a/govtool/frontend/src/components/atoms/Typography.tsx b/govtool/frontend/src/components/atoms/Typography.tsx
index 34e1af742..c11a9f3fc 100644
--- a/govtool/frontend/src/components/atoms/Typography.tsx
+++ b/govtool/frontend/src/components/atoms/Typography.tsx
@@ -12,8 +12,11 @@ export const Typography = ({
     headline3: 36,
     headline4: 32,
     headline5: 28,
+    title: 27,
     title1: 24,
+    titleH3: 23,
     title2: 22,
+    body: 21,
     body1: 16,
     body2: 14,
     caption: 12,
@@ -25,8 +28,11 @@ export const Typography = ({
     headline3: 400,
     headline4: 600,
     headline5: 500,
+    title: 500,
     title1: 400,
+    titleH3: 500,
     title2: 500,
+    body: 400,
     body1: 600,
     body2: 500,
     caption: 400,
@@ -38,8 +44,11 @@ export const Typography = ({
     headline3: "44px",
     headline4: "40px",
     headline5: "36px",
+    title: "32px",
+    titleH3: "32px",
     title1: "32px",
     title2: "28px",
+    body: "28px",
     body1: "24px",
     body2: "20px",
     caption: "16px",
diff --git a/govtool/frontend/src/components/atoms/types.ts b/govtool/frontend/src/components/atoms/types.ts
index 52bf82151..219d12d4e 100644
--- a/govtool/frontend/src/components/atoms/types.ts
+++ b/govtool/frontend/src/components/atoms/types.ts
@@ -32,8 +32,11 @@ export type TypographyProps = Pick<
     | "headline3"
     | "headline4"
     | "headline5"
+    | "title"
+    | "titleH3"
     | "title1"
     | "title2"
+    | "body"
     | "body1"
     | "body2"
     | "caption";
diff --git a/govtool/frontend/src/components/molecules/HomeCard.tsx b/govtool/frontend/src/components/molecules/HomeCard.tsx
index ef04545c9..a5ab9b29b 100644
--- a/govtool/frontend/src/components/molecules/HomeCard.tsx
+++ b/govtool/frontend/src/components/molecules/HomeCard.tsx
@@ -19,9 +19,16 @@ export const HomeCard = ({ title, description, onCardClick }: Props) => (
       border: "none",
       cursor: onCardClick ? "pointer" : "default",
       outline: "none",
+      p: 3.75,
       "&:focus": {
         boxShadow: "0 0 0 3px rgba(47, 98, 220, 0.5)",
       },
+      "&:hover": {
+        boxShadow: onCardClick
+          ? "0 0 0 3px rgba(47, 98, 220, 0.5)"
+          : "2px 2px 20px 0px rgba(47, 98, 220, 0.20)",
+      },
+      backgroundColor: "white",
     }}
     onCardClick={onCardClick}
     component="button"
@@ -29,7 +36,11 @@ export const HomeCard = ({ title, description, onCardClick }: Props) => (
     aria-label={`${title}. ${description}`}
     dataTestId={`home-card-${title.replace(/\s+/g, "-").toLowerCase()}`}
   >
-    <Typography component="h3">{title}</Typography>
-    <Typography variant="caption">{description}</Typography>
+    <Typography component="h3" variant="titleH3" sx={{ textAlign: "left" }}>
+      {title}
+    </Typography>
+    <Typography variant="body" sx={{ textAlign: "left" }}>
+      {description}
+    </Typography>
   </Card>
 );
diff --git a/govtool/frontend/src/components/organisms/Home/ConnectWalletTo.tsx b/govtool/frontend/src/components/organisms/Home/ConnectWalletTo.tsx
index 28dce86a2..1bf5f362f 100644
--- a/govtool/frontend/src/components/organisms/Home/ConnectWalletTo.tsx
+++ b/govtool/frontend/src/components/organisms/Home/ConnectWalletTo.tsx
@@ -106,7 +106,7 @@ export const ConnectWalletTo = () => {
   return (
     <Box my={4} component="section" data-testid="connect-wallet-to-section">
       <Box display="flex" justifyContent="space-between" alignItems="center">
-        <Typography variant="title2">
+        <Typography variant="title">
           {t("home.connectWalletTo.section.title")}
         </Typography>
         <Button
@@ -125,8 +125,8 @@ export const ConnectWalletTo = () => {
           sm: "repeat(2, 1fr)",
           lg: "repeat(3, 1fr)",
         }}
-        gap={4}
-        mt={4}
+        gap={3.75}
+        mt={3.75}
       >
         {CONNECT_WALLET_TO_CARDS.map(({ title, description, path }) => (
           <HomeCard
diff --git a/govtool/frontend/src/components/organisms/Home/HelpBuildGovTool.tsx b/govtool/frontend/src/components/organisms/Home/HelpBuildGovTool.tsx
index 2fb058c13..bd057d1d7 100644
--- a/govtool/frontend/src/components/organisms/Home/HelpBuildGovTool.tsx
+++ b/govtool/frontend/src/components/organisms/Home/HelpBuildGovTool.tsx
@@ -33,7 +33,7 @@ export const HelpBuildGovTool = ({ my = 4 }: { my?: number }) => {
 
   return (
     <Box my={my} component="section" data-testid="help-build-govtool-section">
-      <Typography variant="title2">
+      <Typography variant="title">
         {t("home.helpBuildGovTool.section.title")}
       </Typography>
       <Box
@@ -43,8 +43,8 @@ export const HelpBuildGovTool = ({ my = 4 }: { my?: number }) => {
           sm: "repeat(2, 1fr)",
           lg: "repeat(3, 1fr)",
         }}
-        gap={4}
-        mt={4}
+        gap={3.75}
+        mt={3.75}
       >
         {GOVTOOL_CARD_LINKS.map(({ title, description, url }) => (
           <HomeCard
diff --git a/govtool/frontend/src/components/organisms/Home/OpenToAny.tsx b/govtool/frontend/src/components/organisms/Home/OpenToAny.tsx
index 5d42a362c..d43961969 100644
--- a/govtool/frontend/src/components/organisms/Home/OpenToAny.tsx
+++ b/govtool/frontend/src/components/organisms/Home/OpenToAny.tsx
@@ -87,7 +87,7 @@ export const OpenToAny = () => {
       component="section"
       data-testid="open-to-any-and-all-users-section"
     >
-      <Typography variant="title2">
+      <Typography variant="title" component="h2">
         {t("home.openToAny.section.title")}
       </Typography>
       <Box
@@ -97,8 +97,8 @@ export const OpenToAny = () => {
           sm: "repeat(2, 1fr)",
           lg: "repeat(3, 1fr)",
         }}
-        gap={4}
-        mt={4}
+        gap={3.75}
+        mt={3.75}
       >
         {OPEN_TO_ANY_CARDS.map(({ title, description, path, url }) => (
           <HomeCard
diff --git a/govtool/frontend/src/components/organisms/Home/Socials.tsx b/govtool/frontend/src/components/organisms/Home/Socials.tsx
index 2420e8e8c..51132b219 100644
--- a/govtool/frontend/src/components/organisms/Home/Socials.tsx
+++ b/govtool/frontend/src/components/organisms/Home/Socials.tsx
@@ -26,7 +26,7 @@ export const Socials = ({ my = 4 }: { my?: number }) => {
 
   return (
     <Box my={my} component="section" data-testid="join-discussion-section">
-      <Typography variant="title2">
+      <Typography variant="title">
         {t("home.joinDiscussion.section.title")}
       </Typography>
       <Box
@@ -36,8 +36,8 @@ export const Socials = ({ my = 4 }: { my?: number }) => {
           sm: "repeat(2, 1fr)",
           lg: "repeat(3, 1fr)",
         }}
-        gap={4}
-        mt={4}
+        gap={3.75}
+        mt={3.75}
       >
         {SOCIAL_CARDS.map(({ title, description, url }) => (
           <HomeCard
diff --git a/govtool/frontend/src/components/organisms/Home/UsefulLinks.tsx b/govtool/frontend/src/components/organisms/Home/UsefulLinks.tsx
index 62fbebe9f..502d3864f 100644
--- a/govtool/frontend/src/components/organisms/Home/UsefulLinks.tsx
+++ b/govtool/frontend/src/components/organisms/Home/UsefulLinks.tsx
@@ -63,7 +63,7 @@ export const UsefulLinks = ({ align = "left" }: Props) => {
 
   return (
     <div>
-      <Typography variant="title2" sx={{ mb: 4, textAlign: align }}>
+      <Typography variant="title" sx={{ mb: 4, textAlign: align }}>
         {t("usefulLinks.title")}
       </Typography>
       <Box
@@ -73,8 +73,8 @@ export const UsefulLinks = ({ align = "left" }: Props) => {
           sm: "repeat(2, 1fr)",
           lg: "repeat(4, 1fr)",
         }}
-        gap={4}
-        mt={4}
+        gap={3.75}
+        mt={3.75}
       >
         {Object.entries(LINKS).map(([key, { url }]) => (
           <Card
@@ -87,12 +87,13 @@ export const UsefulLinks = ({ align = "left" }: Props) => {
               display: "flex",
               flexDirection: "column",
               gap: 1,
+              backgroundColor: "white",
             }}
           >
-            <Typography>
+            <Typography component="h3" variant="titleH3">
               {t(`usefulLinks.${key as keyof typeof LINKS}.title`)}
             </Typography>
-            <Typography variant="caption" sx={{ mb: 1 }}>
+            <Typography variant="body" sx={{ mb: 1 }}>
               {t(`usefulLinks.${key as keyof typeof LINKS}.description`)}
             </Typography>
             <Link
@@ -110,7 +111,11 @@ export const UsefulLinks = ({ align = "left" }: Props) => {
                 },
               }}
             >
-              <Typography color="primary" variant="body2">
+              <Typography
+                color="primary"
+                variant="body2"
+                sx={{ fontSize: "21px" }}
+              >
                 {t(`usefulLinks.${key as keyof typeof LINKS}.link`)}
               </Typography>
               <img
diff --git a/govtool/frontend/src/pages/Home.tsx b/govtool/frontend/src/pages/Home.tsx
index c89ac8ef3..078c44773 100644
--- a/govtool/frontend/src/pages/Home.tsx
+++ b/govtool/frontend/src/pages/Home.tsx
@@ -47,7 +47,8 @@ export const Home = () => {
             sx={{
               whiteSpace: "pre-line",
             }}
-            variant="body1"
+            variant="title"
+            component="h1"
           >
             <Trans
               i18nKey="hero.description"
@@ -60,7 +61,7 @@ export const Home = () => {
                   rel="noopener noreferrer"
                   sx={{
                     cursor: "pointer",
-                    fontSize: 16,
+                    fontSize: 22,
                   }}
                 />,
               ]}