diff --git a/TokanPages.ClientApp/src/Api/Models/Components/headerContentDto.ts b/TokanPages.ClientApp/src/Api/Models/Components/headerContentDto.ts
index 188000dd4..4045317a3 100644
--- a/TokanPages.ClientApp/src/Api/Models/Components/headerContentDto.ts
+++ b/TokanPages.ClientApp/src/Api/Models/Components/headerContentDto.ts
@@ -5,6 +5,7 @@ export interface HeaderContentDto {
         language: string;
         photo: string;
         caption: string;
+        subtitle: string;
         description: string;
         action: LinkDto;
     };
diff --git a/TokanPages.ClientApp/src/Components/Articles/ArticleFeature/View/articleFeatureView.tsx b/TokanPages.ClientApp/src/Components/Articles/ArticleFeature/View/articleFeatureView.tsx
index aa38317ea..02644bbb5 100644
--- a/TokanPages.ClientApp/src/Components/Articles/ArticleFeature/View/articleFeatureView.tsx
+++ b/TokanPages.ClientApp/src/Components/Articles/ArticleFeature/View/articleFeatureView.tsx
@@ -55,7 +55,7 @@ export const ArticleFeatureView = (): JSX.Element => {
                             <Grid item xs={12} lg={6} className={classes.content}>
                                 <Card elevation={0} className={classes.card}>
                                     <CardContent className={classes.card_content}>
-                                        <Box display="flex" flexDirection="column" height="100%" pt={2} px={2}>
+                                        <Box display="flex" flexDirection="column" pt={2} px={2}>
                                             <Typography className={classes.text1}>
                                                 {features?.isLoading ? (
                                                     <Skeleton variant="text" />
@@ -63,7 +63,7 @@ export const ArticleFeatureView = (): JSX.Element => {
                                                     features?.content?.text1
                                                 )}
                                             </Typography>
-                                            <Box mt="auto" mb={2}>
+                                            <Box mt={2} mb={5}>
                                                 <Typography className={classes.text2}>
                                                     {features?.isLoading ? (
                                                         <Skeleton variant="text" />
@@ -72,7 +72,7 @@ export const ArticleFeatureView = (): JSX.Element => {
                                                     )}
                                                 </Typography>
                                             </Box>
-                                            <Box textAlign="right">
+                                            <Box pt={0} textAlign="right">
                                                 {features?.isLoading ? (
                                                     <Skeleton variant="rect" width="100%" height="25px" />
                                                 ) : (
diff --git a/TokanPages.ClientApp/src/Components/Layout/Header/__snapshots__/headerView.test.tsx.snap b/TokanPages.ClientApp/src/Components/Layout/Header/__snapshots__/headerView.test.tsx.snap
index 470d5d8d2..acf8669d2 100644
--- a/TokanPages.ClientApp/src/Components/Layout/Header/__snapshots__/headerView.test.tsx.snap
+++ b/TokanPages.ClientApp/src/Components/Layout/Header/__snapshots__/headerView.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`test component: headerView should render correctly '<HeaderView />' whe
       class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-7"
     >
       <img
-        class="MuiCardMedia-root makeStyles-image_card-8 MuiCardMedia-media MuiCardMedia-img"
+        class="MuiCardMedia-root makeStyles-image_card-9 MuiCardMedia-media MuiCardMedia-img"
         src=" "
       />
     </div>
@@ -19,7 +19,7 @@ exports[`test component: headerView should render correctly '<HeaderView />' whe
       class="MuiGrid-root makeStyles-section_container-2 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-5"
     >
       <div
-        class="MuiBox-root MuiBox-root-11 makeStyles-content_box-3"
+        class="MuiBox-root MuiBox-root-12 makeStyles-content_box-3"
       >
         <span
           class="MuiTypography-root makeStyles-content_caption-4 MuiTypography-body1"
@@ -29,21 +29,26 @@ exports[`test component: headerView should render correctly '<HeaderView />' whe
           </div>
         </span>
         <span
-          class="MuiTypography-root makeStyles-content_description-5 MuiTypography-body1"
+          class="MuiTypography-root makeStyles-content_subtitle-5 MuiTypography-body1"
+        >
+          <div />
+        </span>
+        <span
+          class="MuiTypography-root makeStyles-content_description-6 MuiTypography-body1"
         >
           <div>
             I do programming for a living...
           </div>
         </span>
         <div
-          class="MuiBox-root MuiBox-root-12"
+          class="MuiBox-root MuiBox-root-13"
         >
           <a
-            class="makeStyles-action_link-22"
+            class="makeStyles-action_link-24"
             href="/action-link"
           >
             <button
-              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-action_button-21"
+              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-action_button-23"
               tabindex="0"
               type="button"
             >
diff --git a/TokanPages.ClientApp/src/Components/Layout/Header/headerStyle.tsx b/TokanPages.ClientApp/src/Components/Layout/Header/headerStyle.tsx
index 43e898209..dce25eae9 100644
--- a/TokanPages.ClientApp/src/Components/Layout/Header/headerStyle.tsx
+++ b/TokanPages.ClientApp/src/Components/Layout/Header/headerStyle.tsx
@@ -11,6 +11,7 @@ export const HeaderStyle = makeStyles(theme => ({
     },
     content_box: {
         marginTop: "auto",
+        marginRight: 30,
         paddingTop: 60,
         paddingBottom: 60,
         paddingLeft: 80,
@@ -27,15 +28,26 @@ export const HeaderStyle = makeStyles(theme => ({
             maxWidth: 900,
             padding: 15,
             marginLeft: 0,
+            marginRight: 0,
         },
     },
     content_caption: {
-        fontSize: "3.5rem",
+        color: Colours.colours.gray3,
+        fontSize: "3.4rem",
+        fontWeight: 700,
+        lineHeight: 1.5,
+    },
+    content_subtitle: {
+        color: Colours.colours.gray3,
+        fontSize: "1.4rem",
+        fontWeight: 700,
+        lineHeight: 1.5,
     },
     content_description: {
-        color: Colours.colours.black,
+        color: Colours.colours.gray3,
         fontSize: "1.125rem",
         fontWeight: 400,
+        lineHeight: 1.5,
     },
     image_skeleton: {
         height: 300,
diff --git a/TokanPages.ClientApp/src/Components/Layout/Header/headerView.tsx b/TokanPages.ClientApp/src/Components/Layout/Header/headerView.tsx
index bf1a632db..eb6b16a29 100644
--- a/TokanPages.ClientApp/src/Components/Layout/Header/headerView.tsx
+++ b/TokanPages.ClientApp/src/Components/Layout/Header/headerView.tsx
@@ -65,6 +65,13 @@ export const HeaderView = (): JSX.Element => {
                                 <ReactHtmlParser html={header?.content?.caption} />
                             )}
                         </Typography>
+                        <Typography component="span" className={classes.content_subtitle}>
+                            {header?.isLoading ? (
+                                <Skeleton variant="text" />
+                            ) : (
+                                <ReactHtmlParser html={header?.content?.subtitle} />
+                            )}
+                        </Typography>
                         <Typography component="span" className={classes.content_description}>
                             {header?.isLoading ? (
                                 <Skeleton variant="text" />
diff --git a/TokanPages.ClientApp/src/Store/Defaults/Content/contentHeader.ts b/TokanPages.ClientApp/src/Store/Defaults/Content/contentHeader.ts
index aa2ebedd3..df8433430 100644
--- a/TokanPages.ClientApp/src/Store/Defaults/Content/contentHeader.ts
+++ b/TokanPages.ClientApp/src/Store/Defaults/Content/contentHeader.ts
@@ -6,6 +6,7 @@ export const ContentHeader: ContentHeaderState = {
         language: "",
         photo: "",
         caption: "",
+        subtitle: "",
         description: "",
         action: {
             text: "",