diff --git a/products/statement-generator/src/components-layout/AppFooter.tsx b/products/statement-generator/src/components-layout/AppFooter.tsx
index 42ec9581..ae6b7a6d 100644
--- a/products/statement-generator/src/components-layout/AppFooter.tsx
+++ b/products/statement-generator/src/components-layout/AppFooter.tsx
@@ -21,7 +21,7 @@ const useStyles = makeStyles(({ breakpoints, palette, spacing }) =>
       color: palette.common.black,
       display: 'flex',
       alignItems: 'center',
-      padding: spacing(2, 3),
+      padding: spacing(1, 2),
 
       [breakpoints.down(breakpoints.values.md)]: {
         flexDirection: 'column',
@@ -38,7 +38,6 @@ const useStyles = makeStyles(({ breakpoints, palette, spacing }) =>
     leftContainer: {
       display: 'flex',
       flexDirection: 'column',
-      padding: spacing(1),
     },
     rightContainer: {
       display: 'flex',
@@ -48,6 +47,7 @@ const useStyles = makeStyles(({ breakpoints, palette, spacing }) =>
 
       [breakpoints.down(breakpoints.values.md)]: {
         flexDirection: 'column',
+        marginTop: spacing(1),
       },
     },
     linkBtn: {
@@ -66,26 +66,43 @@ const useStyles = makeStyles(({ breakpoints, palette, spacing }) =>
       },
 
       '&$linkBtn + $linkBtn': {
-        marginLeft: 4,
+        marginLeft: spacing(0.5),
+      },
+
+      [breakpoints.down(breakpoints.values.md)]: {
+        marginTop: spacing(2),
+        padding: spacing(1, 0),
       },
 
       [breakpoints.down(breakpoints.values.sm)]: {
-        marginTop: 16,
+        marginTop: spacing(2),
       },
     },
     copyrightContainer: {
       display: 'flex',
 
+      [breakpoints.down(breakpoints.values.md)]: {
+        marginTop: spacing(2),
+      },
+
       [breakpoints.down(breakpoints.values.sm)]: {
-        marginTop: 16,
+        marginTop: spacing(2),
       },
     },
     hackforlaIcon: {
       height: 25,
       margin: 'auto 10px',
+
+      [breakpoints.down(breakpoints.values.md)]: {
+        margin: 'auto 0',
+      },
     },
     reg: {
       margin: 'auto 0',
+
+      [breakpoints.down(breakpoints.values.md)]: {
+        marginLeft: spacing(1),
+      },
     },
     line: {
       margin: 'auto 0',
diff --git a/products/statement-generator/src/components/Logo.tsx b/products/statement-generator/src/components/Logo.tsx
index b1e76a3d..fe5d5c8d 100644
--- a/products/statement-generator/src/components/Logo.tsx
+++ b/products/statement-generator/src/components/Logo.tsx
@@ -12,8 +12,7 @@ const useStyles = makeStyles<Theme, IUseUtilityStyle>(
         display: 'flex',
         fontSize: 20,
         maxHeight: ({ footer }: IUseUtilityStyle) => (footer ? '25px' : 'null'),
-        marginBottom: ({ footer }: IUseUtilityStyle) =>
-          footer ? '10px' : 'null',
+        marginBottom: ({ footer }: IUseUtilityStyle) => (footer ? 0 : 'null'),
 
         [breakpoints.down(breakpoints.values.sm)]: {
           // display: 'none',
diff --git a/products/statement-generator/src/pages/FAQ.tsx b/products/statement-generator/src/pages/FAQ.tsx
index b0dc7e82..8c309bfd 100644
--- a/products/statement-generator/src/pages/FAQ.tsx
+++ b/products/statement-generator/src/pages/FAQ.tsx
@@ -19,10 +19,10 @@ const useStyles = makeStyles(({ palette, breakpoints }) =>
       },
     },
     HeaderContent: {
-      maxWidth: '996px',
+      maxWidth: '945px',
       minWidth: '342px',
-      width: '69.2%',
-      margin: '45px 222px 54.64px',
+      width: '100%',
+      margin: '45px auto 54.64px',
       display: 'flex',
       justifyContent: 'space-between',
       alignItems: 'center',
@@ -38,12 +38,14 @@ const useStyles = makeStyles(({ palette, breakpoints }) =>
       display: 'flex',
       flexDirection: 'column',
       justifyContent: 'center',
-      alignItems: 'center',
+      alignItems: 'flex-start',
       backgroundColor: palette.primary.lighter,
-      marginRight: '113.5px',
+      flex: '1 1 60%',
+      marginRight: '36px',
 
       [breakpoints.down('md')]: {
         marginRight: 0,
+        alignItems: 'center',
       },
 
       [breakpoints.down('sm')]: {
@@ -60,10 +62,16 @@ const useStyles = makeStyles(({ palette, breakpoints }) =>
       fontSize: '24px',
       lineHeight: '36px',
       fontWeight: 400,
+
+      [breakpoints.down(breakpoints.values.lg)]: {
+        textAlign: 'center',
+      },
     },
     ImgContainer: {
       width: '100%',
       textAlign: 'center',
+      flex: '1 1 40%',
+      marginRight: '16px',
     },
     Img: {
       width: 'auto',
@@ -71,8 +79,8 @@ const useStyles = makeStyles(({ palette, breakpoints }) =>
       minWidth: '182px',
     },
     FAQContainer: {
-      maxWidth: '996px',
-      width: '69.2%',
+      maxWidth: '980px',
+      width: '100%',
       paddingTop: 0,
 
       [breakpoints.down('xs')]: {