diff --git a/src/assets/bn-logo.png b/src/assets/bn-logo.png
new file mode 100644
index 0000000..1fc5bc6
Binary files /dev/null and b/src/assets/bn-logo.png differ
diff --git a/src/components/app/App.css b/src/components/app/App.css
index 6d1732a..bf470ea 100644
--- a/src/components/app/App.css
+++ b/src/components/app/App.css
@@ -1,5 +1,4 @@
 #root {
-  max-width: 1440px;
   margin: 0 auto;
 }
 
diff --git a/src/components/form-footer/FormFooter.tsx b/src/components/form-footer/FormFooter.tsx
index 1a0efc3..13f3335 100644
--- a/src/components/form-footer/FormFooter.tsx
+++ b/src/components/form-footer/FormFooter.tsx
@@ -9,17 +9,17 @@ type Props = {
 const FormFooter: FC<Props> = ({isPreviewButton = true, isLastStep = false}) => {
     const navigate = useNavigate()
     return (
-        <Row justify={'end'} className={'form-footer'}>
+        <Row className={'form-footer'}>
             <Col>
                 {isPreviewButton && (
                     <Button type={'text'} onClick={() => navigate(-1)}
-                            style={{marginRight: 12}}>{'Preview step'}</Button>
+                            style={{marginRight: 16}}>{'Back'}</Button>
                 )}
                 {isLastStep && (
                     <Button type={'primary'} size={'large'} htmlType={'submit'}>{'Submit'}</Button>
                 )}
                 {!isLastStep && (
-                    <Button type={'primary'} size={'large'} htmlType={'submit'}>{'Next step'}</Button>
+                    <Button type={'primary'} htmlType={'submit'}>{'Continue'}</Button>
                 )}
             </Col>
         </Row>
diff --git a/src/components/header/Header.scss b/src/components/header/Header.scss
index 4505108..d903a7d 100644
--- a/src/components/header/Header.scss
+++ b/src/components/header/Header.scss
@@ -1,4 +1,5 @@
 .app-header {
+  position: relative;
   height: 100vh;
   padding: 200px 56px 0 64px;
   background-color: #ffffff;
@@ -25,8 +26,28 @@
     }
 
     .header-text {
+      display: block;
+      max-width: 330px;
       font-weight: 500;
       color: #8d8d8f;
     }
   }
+
+  .rights {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 7px;
+    padding: 31px 65px 30px 65px;
+
+    span {
+      font-family: "Inter Medium";
+      font-size: 14px;
+      line-height: 1.15;
+      color: #8d8d8f;
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx
index 46bdb8f..d73bf2c 100644
--- a/src/components/header/Header.tsx
+++ b/src/components/header/Header.tsx
@@ -1,8 +1,10 @@
 import { Button, Layout, Typography } from "antd";
 import logo from "../../assets/logo.png"
+import bnLogo from "../../assets/bn-logo.png"
 import './Header.scss'
 import { useNavigate } from "react-router-dom";
 
+
 const {Title, Text} = Typography
 const Header = () => {
   const navigate = useNavigate()
@@ -13,8 +15,12 @@ const Header = () => {
           <img src={logo}/>
           {'Mortgage Calculator'}</Button>
         <Title level={1}>{'Find your refinance options'}</Title>
-        <Text className={'header-text'}>{'Mortgage refinancing is when you replace your current home loan with a new one.\n' +
-          'This is a demo of a form submission.'}</Text>
+        <Text className={'header-text'}>{'Mortgage refinancing is when you replace your current home loan with a new one.'}</Text>
+        <Text className={'header-text'}>{'This is a demo of a form submission.'}</Text>
+      </div>
+      <div className={'rights'}>
+        <Text>{'created by'}</Text>
+        <img src={bnLogo}/>
       </div>
     </Layout.Sider>
   );
diff --git a/src/components/lender-card/LenderCard.scss b/src/components/lender-card/LenderCard.scss
index 802df82..69a2006 100644
--- a/src/components/lender-card/LenderCard.scss
+++ b/src/components/lender-card/LenderCard.scss
@@ -1,16 +1,23 @@
 .lender-card {
-  position: relative;
   width: 100%;
   height: 100%;
+  padding: 8px;
+
+  .ant-input-affix-wrapper &:hover {
+    border-color: #4169f6;
+
+    .name {
+      color: #4169f6;
+    }
+  }
+
   .image-container {
-    z-index: 0;
-    position: absolute;
-    left: 0;
-    top: 8px;
     width: 100%;
-    height: 60%;
+    height: 64px;
+    margin-bottom: 16px;
 
     img {
+      display: block;
       width: 100%;
       height: 100%;
       object-fit: contain;
@@ -18,24 +25,29 @@
   }
 
   .content {
-    display: flex;
-    background-color: transparent;
     width: 100%;
-    z-index: 2;
-    position: absolute;
-    bottom: 5px;
-    left: 5px;
+    display: flex;
+    gap: 8px;
+
     .check-box {
-      width: 20px;
-      height: 20px;
+      width: 24px;
+      height: 24px;
       display: flex;
       align-items: center;
       justify-content: center;
-      border: 1px solid #d1d1d1;
+      border: 1px solid #b9b9ba;
       border-radius: 2px;
-      margin-right: 5px;
-      background-color: #f0f0f0;
+      background-color: #e7e7e9;
+    }
+
+    .label {
+      font-family: "Inter Medium";
+      font-size: 16px;
+      line-height: 1.5;
+    }
 
+    .name {
+      color: #101012;
     }
   }
 
diff --git a/src/components/lender-card/LenderCard.tsx b/src/components/lender-card/LenderCard.tsx
index bacbc4c..dc1e273 100644
--- a/src/components/lender-card/LenderCard.tsx
+++ b/src/components/lender-card/LenderCard.tsx
@@ -10,38 +10,36 @@ import halifax from '../../assets/halifax.png'
 const {Title, Text} = Typography
 
 type Props = {
-    number: string
-    name: string
+  number: string
+  name: string
 }
 
 const LenderCard: FC<Props> = ({number, name}) => {
-    let imageUrl
-    switch (number) {
-        case '1': imageUrl = accord
-            break;
-        case '2': imageUrl = barclays
-            break;
-        case '3': imageUrl = coventry
-            break;
-        case '4': imageUrl = halifax
-            break;
-        default: imageUrl = accord
-    }
-    return (
-        <div className={'lender-card'}>
-            <div className="image-container">
-                <img src={imageUrl} alt="logo"/>
-            </div>
-            <div className="content">
-                <div className="check-box">
-                    <Text style={{fontSize: 12}}>{number}</Text>
-                </div>
-                <Text style={{fontSize: 10}}>{name}</Text>
-            </div>
-            <div className="selected-overlay"/>
-
+  let imageUrl
+  switch (number) {
+    case '1': imageUrl = accord
+      break;
+    case '2': imageUrl = barclays
+      break;
+    case '3': imageUrl = coventry
+      break;
+    case '4': imageUrl = halifax
+      break;
+    default: imageUrl = accord
+  }
+  return (
+    <div className={'lender-card'}>
+      <div className="image-container">
+        <img src={imageUrl} alt="logo"/>
+      </div>
+      <div className="content">
+        <div className="check-box">
+          <Text className={'label'}>{number}</Text>
         </div>
-    );
+        <Text className={'label name'}>{name}</Text>
+      </div>
+    </div>
+  );
 };
 
 export default LenderCard;
diff --git a/src/components/radio-option-card/RadioOptionCard.scss b/src/components/radio-option-card/RadioOptionCard.scss
index aff7cd1..4f7e97c 100644
--- a/src/components/radio-option-card/RadioOptionCard.scss
+++ b/src/components/radio-option-card/RadioOptionCard.scss
@@ -1,27 +1,37 @@
 .radio-option-card {
-  position: relative;
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
 
   .content {
-    padding-left: 10px;
     display: flex;
     align-items: center;
     background-color: transparent;
-    z-index: 2;
+    gap: 8px;
+
     .check-box {
-      width: 20px;
-      height: 20px;
+      width: 24px;
+      height: 24px;
       display: flex;
       align-items: center;
       justify-content: center;
-      border: 1px solid #d1d1d1;
+      border: 1px solid #b9b9ba;
       border-radius: 2px;
-      margin-right: 8px;
-      background-color: #f0f0f0;
+      background-color: #e7e7e9;
+
+      .order {
+        font-family: "Inter Bold";
+        font-size: 12px;
+        line-height: 2;
+      }
+    }
 
+    .label {
+      font-family: "Inter Medium";
+      font-size: 16px;
+      line-height: 1.5;
+      color: #101012;
     }
   }
 
diff --git a/src/components/radio-option-card/RadioOptionCard.tsx b/src/components/radio-option-card/RadioOptionCard.tsx
index 172a783..bc9eab9 100644
--- a/src/components/radio-option-card/RadioOptionCard.tsx
+++ b/src/components/radio-option-card/RadioOptionCard.tsx
@@ -5,22 +5,21 @@ import './RadioOptionCard.scss'
 const {Title, Text} = Typography
 
 type Props = {
-    number: string
-    name: string
+  number: string
+  name: string
 }
 
 const RadioOptionCard: FC<Props> = ({number, name}) => {
-    return (
-        <div className={'radio-option-card'}>
-            <div className="content">
-                <div className="check-box">
-                    <Text style={{fontSize: 12}}>{number}</Text>
-                </div>
-                <Text style={{fontSize: 12}}>{name}</Text>
-            </div>
-            <div className="selected-overlay"/>
+  return (
+    <div className={'radio-option-card'}>
+      <div className="content">
+        <div className="check-box">
+          <Text className={'order'}>{number}</Text>
         </div>
-    );
+        <Text className={'label'}>{name}</Text>
+      </div>
+    </div>
+  );
 };
 
 export default RadioOptionCard;
diff --git a/src/components/step-title/StepTitle.tsx b/src/components/step-title/StepTitle.tsx
index 7418d2e..f0ba7f0 100644
--- a/src/components/step-title/StepTitle.tsx
+++ b/src/components/step-title/StepTitle.tsx
@@ -1,18 +1,18 @@
 import React, {FC} from 'react';
 import {Typography} from "antd";
-import './StepTitle.scss'
+// import './StepTitle.scss'
 type Props = {
-    title: string,
-    subtitle: string
+  title: string,
+  subtitle: string
 }
 const {Title, Paragraph} = Typography
 const StepTitle:FC<Props> = ({title, subtitle}) => {
-    return (
-        <div className={'step-title'}>
-            <Title level={4}>{title}</Title>
-            <Paragraph style={{color: 'gray'}}>{subtitle}</Paragraph>
-        </div>
-    );
+  return (
+    <div className={'step-title'}>
+      <Title level={2}>{title}</Title>
+      <Paragraph className={'description'}>{subtitle}</Paragraph>
+    </div>
+  );
 };
 
 export default StepTitle;
diff --git a/src/components/themeContext/index.tsx b/src/components/themeContext/index.tsx
index 25cbe94..7126c03 100644
--- a/src/components/themeContext/index.tsx
+++ b/src/components/themeContext/index.tsx
@@ -24,15 +24,19 @@ export const theme : ThemeConfig = {
       lineHeight: 1.71,
     },
     Input: {
-      borderRadius: 4,
       colorBorder: "#B9B9BA",
-      colorErrorBorder: "#F6414C",
-      colorErrorText: "#F6414C",
-      fontSize: 16,
-      lineHeight: 24,
       colorTextPlaceholder: "#A0A0A2",
-      paddingContentHorizontal: 16,
-      paddingContentVertical: 8,
+      colorText: "#101012",
+      borderRadiusLG: 4,
+      fontFamily: "Inter Medium",
+    },
+    DatePicker: {
+      colorBorder: "#B9B9BA",
+      colorTextPlaceholder: "#A0A0A2",
+      colorText: "#101012",
+      borderRadiusLG: 4,
+      fontFamily: "Inter Medium",
+      fontSize: 16,
     }
   },
   token: {
diff --git a/src/pages/form/Form.scss b/src/pages/form/Form.scss
index 707d1cb..d0333d5 100644
--- a/src/pages/form/Form.scss
+++ b/src/pages/form/Form.scss
@@ -1,108 +1,98 @@
-.form-container {
-  position: relative;
-  width: 600px;
-  background-color: #fff;
-  border: 1px solid #e3e3e3;
-  border-radius: 10px;
-  padding: 30px 30px;
-  margin-top: 30px;
-
-  .form-wrapper {
-    display: flex;
-    flex-direction: column;
-    min-height: 300px;
-
-    .form-body {
-      flex: 1 1 auto;
+.ant-form-vertical {
+  width: 640px;
 
+  .ant-input-affix-wrapper {
+    padding: 8px 15px 8px 16px;
+
+    &:hover,
+    &.ant-input-affix-wrapper-focused {
+      border-color: #4169f6;
     }
-  }
 
-  .step-box {
-    position: absolute;
-    right: 30px;
-    top: 20px;
+    &.ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled) {
+      border-color: #f6414c;
+
+      .ant-input-prefix {
+        color: #101012;
+      }
+    }
 
-    .ant-typography {
-      color: #888;
+    .ant-input-prefix {
+      font-family: "Inter Medium";
     }
   }
 }
 
+.ant-form-item {
+  margin-bottom: 32px;
+
+  .ant-form-item-explain-error {
+    color: #f6414c;
+  }
+}
+
 .radio-grid-container {
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr 1fr;
-  grid-template-rows: 100px;
-  grid-auto-rows: 100px;
-  gap: 5px;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-rows: 120px;
+  grid-auto-rows: 120px;
+  gap: 32px;
 
   .ant-radio-button-wrapper {
-    border: 1px solid #e0e0e0;
+    border: 1px solid #b9b9ba;
     border-radius: 4px;
     height: 100%;
     padding-inline: 0;
     overflow: hidden;
 
-    .lender-card {
-      .selected-overlay {
-        width: 100%;
-        height: 100%;
-        background-color: rgba(0, 0, 0, 0.2);
-        position: absolute;
-        left: 0;
-        top: 0;
-        opacity: 0;
+    &:hover {
+      border-color: #4169f6;
+
+      .name {
+        color: #4169f6;
       }
     }
 
     &.ant-radio-button-wrapper-checked {
-      border: 1px solid #b8b8b8;
-      box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
-
-      .lender-card {
-        .selected-overlay {
-          opacity: 1;
-        }
-      }
+      border: 2px solid #4169f6;
     }
   }
 
 }
 .radio-column-container {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-template-rows: 40px;
-  grid-auto-rows: 40px;
-  gap: 5px;
+  height: fit-content;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 
   .ant-radio-button-wrapper {
-    border: 1px solid #e0e0e0;
+    border: 1px solid #b9b9ba;
     border-radius: 4px;
-    height: 100%;
-    padding-inline: 0;
+    height: 56px;
+    padding: 16px;
     overflow: hidden;
 
-    .radio-option-card {
-      .selected-overlay {
-        width: 100%;
-        height: 100%;
-        background-color: rgba(0, 0, 0, 0.2);
-        position: absolute;
-        left: 0;
-        top: 0;
-        opacity: 0;
+    &:hover {
+      border-color: #4169f6;
+
+      .label {
+        color: #4169f6;
       }
     }
 
     &.ant-radio-button-wrapper-checked {
-      border: 1px solid #b8b8b8;
-      box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
-
-      .radio-option-card {
-        .selected-overlay {
-          opacity: 1;
-        }
-      }
+      border: 2px solid #4169f6;
     }
   }
+}
+
+.ant-picker.ant-picker-large {
+  padding: 8px 15px 8px 16px;
+  line-height: 1.5;
+
+  &:hover,
+  &.ant-picker-focused {
+    border-color: #4169f6;
+    box-shadow: none;
+  }
 }
\ No newline at end of file
diff --git a/src/pages/form/Form.tsx b/src/pages/form/Form.tsx
index bb8a824..8e80f6d 100644
--- a/src/pages/form/Form.tsx
+++ b/src/pages/form/Form.tsx
@@ -13,28 +13,28 @@ import FormStep10 from "./FormStep10";
 import FormStep11 from "./FormStep11";
 import FormStep12 from "./FormStep12";
 
-const {Text} = Typography
+const {Text, Title, Paragraph} = Typography
 const Form = () => {
-    const params = useParams()
-    return (
-            <div className={'form-container'}>
-                <div className="step-box">
-                    <Text>{`Step ${params.step}/12`}</Text>
-                </div>
-                {params.step === '1' && <FormStep01/>}
-                {params.step === '2' && <FormStep02/>}
-                {params.step === '3' && <FormStep03/>}
-                {params.step === '4' && <FormStep04/>}
-                {params.step === '5' && <FormStep05/>}
-                {params.step === '6' && <FormStep06/>}
-                {params.step === '7' && <FormStep07/>}
-                {params.step === '8' && <FormStep08/>}
-                {params.step === '9' && <FormStep09/>}
-                {params.step === '10' && <FormStep10/>}
-                {params.step === '11' && <FormStep11/>}
-                {params.step === '12' && <FormStep12/>}
-            </div>
-    );
+  const params = useParams()
+  return (
+    <section>
+      <div className={'container'}>
+        <Paragraph className={'subtitle'}>{`Question ${params.step} of 12`}</Paragraph>
+        {params.step === '1' && <FormStep01/>}
+        {params.step === '2' && <FormStep02/>}
+        {params.step === '3' && <FormStep03/>}
+        {params.step === '4' && <FormStep04/>}
+        {params.step === '5' && <FormStep05/>}
+        {params.step === '6' && <FormStep06/>}
+        {params.step === '7' && <FormStep07/>}
+        {params.step === '8' && <FormStep08/>}
+        {params.step === '9' && <FormStep09/>}
+        {params.step === '10' && <FormStep10/>}
+        {params.step === '11' && <FormStep11/>}
+        {params.step === '12' && <FormStep12/>}
+      </div>
+    </section>
+  );
 };
 
 export default Form;
diff --git a/src/pages/form/FormStep01.tsx b/src/pages/form/FormStep01.tsx
index f47932b..534f891 100644
--- a/src/pages/form/FormStep01.tsx
+++ b/src/pages/form/FormStep01.tsx
@@ -5,32 +5,31 @@ import StepTitle from "../../components/step-title/StepTitle";
 import FormFooter from "../../components/form-footer/FormFooter";
 
 const FormStep01 = () => {
-    const navigate = useNavigate()
-    const {setDocumentInfo, documentInfo} = useGeneralContext()
-    type FormType = {
-        brokerFee: string
-    }
-    const onFinish = (values: FormType) => {
-        setDocumentInfo({...documentInfo, brokerFee: values.brokerFee })
-        navigate('/form/2')
-    }
-    return (
-        <Form layout={'vertical'} onFinish={onFinish} autoComplete={'off'} initialValues={{brokerFee: documentInfo?.brokerFee}} className={'form-wrapper'}>
-            <StepTitle title={'Remortgage broker fee (£)'} subtitle={"Enter the amount payable below"} />
-            <div className="form-body">
-            <Form.Item
-                name={'brokerFee'}
-                label={'Remortgage broker fee (£) '}
-                rules={[
-                    { required: true, message: 'This field is required' },
-                    { message: 'Invalid number', pattern: /^\$?[\d,]+(\.\d{1,2})?$/ },
-                ]}>
-                <Input size={'large'} placeholder={'Enter remortgage broker fee'} autoFocus={true} prefix={'£'} />
-            </Form.Item>
-            </div>
-            <FormFooter isPreviewButton={false}/>
-        </Form>
-    );
+  const navigate = useNavigate()
+  const {setDocumentInfo, documentInfo} = useGeneralContext()
+  type FormType = {
+    brokerFee: string
+  }
+  const onFinish = (values: FormType) => {
+    setDocumentInfo({...documentInfo, brokerFee: values.brokerFee })
+    navigate('/form/2')
+  }
+  return (
+    <Form layout={'vertical'} onFinish={onFinish} autoComplete={'off'} requiredMark={false} initialValues={{brokerFee: documentInfo?.brokerFee}} className={'form-wrapper'}>
+      <StepTitle title={'What is your remortgage broker fee?'} subtitle={"Leave it blank if you are not sure"} />
+      <div className="form-body">
+        <Form.Item
+          name={'brokerFee'}
+          rules={[
+            { required: true, message: 'This field is required' },
+            { message: 'Invalid number', pattern: /^\$?[\d,]+(\.\d{1,2})?$/ },
+          ]}>
+          <Input size={'large'} placeholder={'Enter remortgage broker fee'} autoFocus={true} prefix={'£'} />
+        </Form.Item>
+      </div>
+      <FormFooter isPreviewButton={false}/>
+    </Form>
+  );
 };
 
 export default FormStep01;
diff --git a/src/pages/form/FormStep02.tsx b/src/pages/form/FormStep02.tsx
index f60a365..ebd7d9e 100644
--- a/src/pages/form/FormStep02.tsx
+++ b/src/pages/form/FormStep02.tsx
@@ -11,43 +11,52 @@ const {Title, Text, Paragraph} = Typography
 
 
 const FormStep02 = () => {
-    const navigate = useNavigate()
-    const {setDocumentInfo, documentInfo} = useGeneralContext()
-    const [lenderValue, setLenderValue] = useState(documentInfo?.lender);
-    type FormType = {
-        lender: string
-    }
-    const onChange = ({target: {value}}: RadioChangeEvent) => {
-        setLenderValue(value)
-    }
-    const onFinish = (values: FormType) => {
-        setDocumentInfo({...documentInfo, lender: values.lender})
-        navigate('/form/3')
-    }
-    const options = [
-        {label: <LenderCard number={'1'} name={'Accord Mortgage'}/>, value: 'Accord Mortgage'},
-        {label: <LenderCard number={'2'} name={'Barclays'}/>, value: 'Barclays'},
-        {label: <LenderCard number={'3'} name={'The Coventry'}/>, value: 'The Coventry'},
-        {label: <LenderCard number={'4'} name={'Halifax'}/>, value: 'Halifax'},
-    ]
-    return (
-        <Form layout={'vertical'} onFinish={onFinish} autoComplete={'off'}
-              initialValues={{lender: documentInfo?.lender}} className={'form-wrapper'}>
-            <StepTitle title={'Current Lender'} subtitle={"Who is your client's mortgage with"}/>
-            <div className="form-body">
-                <Form.Item
-                    name={'lender'}
-                    label={'Current Lender'}
-                    rules={[
-                        {required: true, message: 'Select your current lender'},
-                    ]}>
-                    <Radio.Group options={options} onChange={onChange} value={lenderValue} optionType="button"
-                                 className={'radio-grid-container'}/>
-                </Form.Item>
-            </div>
-            <FormFooter />
-        </Form>
-    );
+  const navigate = useNavigate()
+  const {setDocumentInfo, documentInfo} = useGeneralContext()
+  const [lenderValue, setLenderValue] = useState(documentInfo?.lender);
+  type FormType = {
+    lender: string
+  }
+  const onChange = ({target: {value}}: RadioChangeEvent) => {
+    setLenderValue(value)
+  }
+  const onFinish = (values: FormType) => {
+    setDocumentInfo({...documentInfo, lender: values.lender})
+    navigate('/form/3')
+  }
+  const options = [
+    {label: <LenderCard number={'1'} name={'Accord'}/>, value: 'Accord Mortgage'},
+    {label: <LenderCard number={'2'} name={'Barclays'}/>, value: 'Barclays'},
+    {label: <LenderCard number={'3'} name={'Coventry'}/>, value: 'The Coventry'},
+    {label: <LenderCard number={'4'} name={'Halifax'}/>, value: 'Halifax'},
+  ]
+  return (
+    <Form
+      layout={'vertical'}
+      onFinish={onFinish}
+      autoComplete={'off'}
+      initialValues={{lender: documentInfo?.lender}}
+      className={'form-wrapper'}
+    >
+      <StepTitle title={'Select your current Lender'} subtitle={"Who holds your current mortgage?"}/>
+      <div className="form-body">
+        <Form.Item
+          name={'lender'}
+          rules={[
+            {required: true, message: 'Select your current lender'},
+          ]}>
+          <Radio.Group
+            options={options}
+            onChange={onChange}
+            value={lenderValue}
+            optionType={"button"}
+            className={'radio-grid-container'}
+          />
+        </Form.Item>
+      </div>
+      <FormFooter />
+    </Form>
+  );
 };
 
 export default FormStep02;
diff --git a/src/pages/form/FormStep03.tsx b/src/pages/form/FormStep03.tsx
index 3f4cd0d..ce8ae1e 100644
--- a/src/pages/form/FormStep03.tsx
+++ b/src/pages/form/FormStep03.tsx
@@ -12,43 +12,53 @@ const {Title, Text, Paragraph} = Typography
 
 
 const FormStep03 = () => {
-    const navigate = useNavigate()
-    const {setDocumentInfo, documentInfo} = useGeneralContext()
-    const [value, setValue] = useState(documentInfo?.subAccounts);
-    type FormType = {
-        subAccounts: string
-    }
-    const onChange = ({target: {value}}: RadioChangeEvent) => {
-        setValue(value)
-    }
-    const onFinish = (values: FormType) => {
-        setDocumentInfo({...documentInfo, subAccounts: values.subAccounts})
-        navigate('/form/4')
-    }
-    const options = [
-        {label: <RadioOptionCard number={'A'} name={'1 sub account'}/>, value: '1 sub account'},
-        {label: <RadioOptionCard number={'B'} name={'2 sub accounts'}/>, value: '2 sub accounts'},
-        {label: <RadioOptionCard number={'C'} name={'3 sub accounts'}/>, value: '3 sub accounts'},
-        {label: <RadioOptionCard number={'D'} name={'4 sub accounts'}/>, value: '4 sub accounts'},
-    ]
-    return (
-        <Form layout={'vertical'} onFinish={onFinish} autoComplete={'off'}
-              initialValues={{subAccounts: documentInfo?.subAccounts}} className={'form-wrapper'}>
-            <StepTitle title={'Mortgage Parts'} subtitle={"How many sub accounts does this mortgage have?"}/>
-            <div className="form-body">
-                <Form.Item
-                    name={'subAccounts'}
-                    label={'Sub accounts amount'}
-                    rules={[
-                        {required: true, message: 'Select your sub accounts amount'},
-                    ]}>
-                    <Radio.Group options={options} onChange={onChange} value={value} optionType="button"
-                                 className={'radio-column-container'}/>
-                </Form.Item>
-            </div>
-            <FormFooter />
-        </Form>
-    );
+  const navigate = useNavigate()
+  const {setDocumentInfo, documentInfo} = useGeneralContext()
+  const [value, setValue] = useState(documentInfo?.subAccounts);
+  type FormType = {
+    subAccounts: string
+  }
+  const onChange = ({target: {value}}: RadioChangeEvent) => {
+    setValue(value)
+  }
+  const onFinish = (values: FormType) => {
+    setDocumentInfo({...documentInfo, subAccounts: values.subAccounts})
+    navigate('/form/4')
+  }
+  const options = [
+    {label: <RadioOptionCard number={'1'} name={'1 sub account'}/>, value: '1 sub account'},
+    {label: <RadioOptionCard number={'2'} name={'2 sub accounts'}/>, value: '2 sub accounts'},
+    {label: <RadioOptionCard number={'3'} name={'3 sub accounts'}/>, value: '3 sub accounts'},
+    {label: <RadioOptionCard number={'4'} name={'4 sub accounts'}/>, value: '4 sub accounts'},
+  ]
+  return (
+    <Form
+      layout={'vertical'}
+      onFinish={onFinish}
+      autoComplete={'off'}
+      initialValues={{subAccounts: documentInfo?.subAccounts}}
+      className={'form-wrapper'}
+    >
+      <StepTitle title={'Select the number of your mortgage parts'} subtitle={"How many sub accounts does this mortgage have?"}/>
+      <div className="form-body">
+        <Form.Item
+          name={'subAccounts'}
+          rules={[
+            {required: true, message: 'Select your sub accounts amount'},
+          ]}
+        >
+          <Radio.Group
+            options={options}
+            onChange={onChange}
+            value={value}
+            optionType="button"
+            className={'radio-column-container'}
+          />
+        </Form.Item>
+      </div>
+      <FormFooter />
+    </Form>
+  );
 };
 
 export default FormStep03;
diff --git a/src/pages/form/FormStep04.tsx b/src/pages/form/FormStep04.tsx
index 179b67a..44e05a7 100644
--- a/src/pages/form/FormStep04.tsx
+++ b/src/pages/form/FormStep04.tsx
@@ -8,41 +8,51 @@ import RadioOptionCard from "../../components/radio-option-card/RadioOptionCard"
 import FormFooter from "../../components/form-footer/FormFooter";
 
 const FormStep04 = () => {
-    const navigate = useNavigate()
-    const {setDocumentInfo, documentInfo} = useGeneralContext()
-    const [value, setValue] = useState(documentInfo?.repayment);
-    type FormType = {
-        repayment: string
-    }
-    const onChange = ({target: {value}}: RadioChangeEvent) => {
-        setValue(value)
-    }
-    const onFinish = (values: FormType) => {
-        setDocumentInfo({...documentInfo, repayment: values.repayment})
-        navigate('/form/5')
-    }
-    const options = [
-        {label: <RadioOptionCard number={'A'} name={'Repayment'}/>, value: 'Repayment'},
-        {label: <RadioOptionCard number={'B'} name={'Interests only'}/>, value: 'Interests only'},
-    ]
-    return (
-        <Form layout={'vertical'} onFinish={onFinish} autoComplete={'off'}
-              initialValues={{repayment: documentInfo?.repayment}} className={'form-wrapper'}>
-            <StepTitle title={'Repayment type'} subtitle={"Select the repayment type for this sole sub account"}/>
-            <div className="form-body">
-                <Form.Item
-                    name={'repayment'}
-                    label={'Repayment type'}
-                    rules={[
-                        {required: true, message: 'Select the repayment type'},
-                    ]}>
-                    <Radio.Group options={options} onChange={onChange} value={value} optionType="button"
-                                 className={'radio-column-container'}/>
-                </Form.Item>
-            </div>
-            <FormFooter/>
-        </Form>
-    );
+  const navigate = useNavigate()
+  const {setDocumentInfo, documentInfo} = useGeneralContext()
+  const [value, setValue] = useState(documentInfo?.repayment);
+  type FormType = {
+    repayment: string
+  }
+  const onChange = ({target: {value}}: RadioChangeEvent) => {
+    setValue(value)
+  }
+  const onFinish = (values: FormType) => {
+    setDocumentInfo({...documentInfo, repayment: values.repayment})
+    navigate('/form/5')
+  }
+  const options = [
+    {label: <RadioOptionCard number={'1'} name={'Repayment'}/>, value: 'Repayment'},
+    {label: <RadioOptionCard number={'2'} name={'Interests only'}/>, value: 'Interests only'},
+  ]
+  return (
+    <Form
+      layout={'vertical'}
+      onFinish={onFinish}
+      autoComplete={'off'}
+      initialValues={{repayment: documentInfo?.repayment}}
+      className={'form-wrapper'}
+    >
+      <StepTitle title={'Repayment type'} subtitle={"Select the repayment type for this sole sub account"}/>
+      <div className="form-body">
+        <Form.Item
+          name={'repayment'}
+          rules={[
+            {required: true, message: 'Select the repayment type'},
+          ]}
+        >
+          <Radio.Group
+            options={options}
+            onChange={onChange}
+            value={value}
+            optionType={"button"}
+            className={'radio-column-container'}
+          />
+        </Form.Item>
+      </div>
+      <FormFooter/>
+    </Form>
+  );
 };
 
 export default FormStep04;
diff --git a/src/pages/form/FormStep05.tsx b/src/pages/form/FormStep05.tsx
index 19c75e6..69ecb5c 100644
--- a/src/pages/form/FormStep05.tsx
+++ b/src/pages/form/FormStep05.tsx
@@ -5,32 +5,32 @@ import StepTitle from "../../components/step-title/StepTitle";
 import FormFooter from "../../components/form-footer/FormFooter";
 
 const FormStep05 = () => {
-    const navigate = useNavigate()
-    const {setDocumentInfo, documentInfo} = useGeneralContext()
-    type FormType = {
-        balance: string
-    }
-    const onFinish = (values: FormType) => {
-        setDocumentInfo({...documentInfo, balance: values.balance })
-        navigate('/form/6')
-    }
-    return (
-        <Form layout={'vertical'} onFinish={onFinish} autoComplete={'off'} initialValues={{balance: documentInfo?.balance}} className={'form-wrapper'}>
-            <StepTitle title={'Current balance (£)'} subtitle={"Enter the amount payable below"} />
-            <div className="form-body">
-            <Form.Item
-                name={'balance'}
-                label={'Current balance'}
-                rules={[
-                    { required: true, message: 'Enter your current balance' },
-                    { message: 'Invalid number', pattern: /^\$?[\d,]+(\.\d{1,2})?$/ },
-                ]}>
-                <Input size={'large'} placeholder={'Enter your current balance'} autoFocus={true} prefix={'£'} />
-            </Form.Item>
-            </div>
-            <FormFooter />
-        </Form>
-    );
+  const navigate = useNavigate()
+  const {setDocumentInfo, documentInfo} = useGeneralContext()
+  type FormType = {
+    balance: string
+  }
+  const onFinish = (values: FormType) => {
+    setDocumentInfo({...documentInfo, balance: values.balance })
+    navigate('/form/6')
+  }
+  return (
+    <Form layout={'vertical'} onFinish={onFinish} autoComplete={'off'} initialValues={{balance: documentInfo?.balance}} className={'form-wrapper'}>
+      <StepTitle title={'What is your current mortgage balance?'} subtitle={"Enter the amount payable below"} />
+      <div className="form-body">
+        <Form.Item
+          name={'balance'}
+          rules={[
+            { required: true, message: 'Enter your current balance' },
+            { message: 'Invalid number', pattern: /^\$?[\d,]+(\.\d{1,2})?$/ },
+          ]}
+        >
+          <Input size={'large'} placeholder={'Enter your current balance'} autoFocus={true} prefix={'£'} />
+        </Form.Item>
+      </div>
+      <FormFooter />
+    </Form>
+  );
 };
 
 export default FormStep05;
diff --git a/src/pages/form/FormStep06.tsx b/src/pages/form/FormStep06.tsx
index c8f8e04..ded4036 100644
--- a/src/pages/form/FormStep06.tsx
+++ b/src/pages/form/FormStep06.tsx
@@ -5,32 +5,32 @@ import StepTitle from "../../components/step-title/StepTitle";
 import FormFooter from "../../components/form-footer/FormFooter";
 
 const FormStep06 = () => {
-    const navigate = useNavigate()
-    const {setDocumentInfo, documentInfo} = useGeneralContext()
-    type FormType = {
-        terms: string
-    }
-    const onFinish = (values: FormType) => {
-        setDocumentInfo({...documentInfo, terms: values.terms })
-        navigate('/form/7')
-    }
-    return (
-        <Form layout={'vertical'} onFinish={onFinish} autoComplete={'off'} initialValues={{terms: documentInfo?.terms}} className={'form-wrapper'}>
-            <StepTitle title={'Remaining term in months'} subtitle={"Type the duration in months below"} />
-            <div className="form-body">
-                <Form.Item
-                    name={'terms'}
-                    label={'Remaining term'}
-                    rules={[
-                        {required: true, message: 'Enter remaining terms'},
-                        {message: 'Only whole number allowed', pattern: /^\d+$/},
-                    ]}>
-                    <Input size={'large'} placeholder={'Enter remaining terms in months'} autoFocus={true}/>
-                </Form.Item>
-            </div>
-            <FormFooter />
-        </Form>
-    );
+  const navigate = useNavigate()
+  const {setDocumentInfo, documentInfo} = useGeneralContext()
+  type FormType = {
+    terms: string
+  }
+  const onFinish = (values: FormType) => {
+    setDocumentInfo({...documentInfo, terms: values.terms })
+    navigate('/form/7')
+  }
+  return (
+    <Form layout={'vertical'} onFinish={onFinish} autoComplete={'off'} initialValues={{terms: documentInfo?.terms}} className={'form-wrapper'}>
+      <StepTitle title={'Remaining term in months'} subtitle={"Type the duration in months below"} />
+      <div className="form-body">
+        <Form.Item
+          name={'terms'}
+          rules={[
+            {required: true, message: 'Enter remaining terms'},
+            {message: 'Only whole number allowed', pattern: /^\d+$/},
+          ]}
+        >
+          <Input size={'large'} placeholder={'Enter remaining terms in months'} autoFocus={true}/>
+        </Form.Item>
+      </div>
+      <FormFooter />
+    </Form>
+  );
 };
 
 export default FormStep06;
diff --git a/src/pages/form/FormStep07.tsx b/src/pages/form/FormStep07.tsx
index bc151d5..afcf5e8 100644
--- a/src/pages/form/FormStep07.tsx
+++ b/src/pages/form/FormStep07.tsx
@@ -5,32 +5,32 @@ import StepTitle from "../../components/step-title/StepTitle";
 import FormFooter from "../../components/form-footer/FormFooter";
 
 const FormStep07 = () => {
-    const navigate = useNavigate()
-    const {setDocumentInfo, documentInfo} = useGeneralContext()
-    type FormType = {
-        valuationIndex: string
-    }
-    const onFinish = (values: FormType) => {
-        setDocumentInfo({...documentInfo, valuationIndex: values.valuationIndex })
-        navigate('/form/8')
-    }
-    return (
-        <Form layout={'vertical'} onFinish={onFinish} autoComplete={'off'} initialValues={{valuationIndex: documentInfo?.valuationIndex}} className={'form-wrapper'}>
-            <StepTitle title={'Index valuation (£)'} subtitle={"This can be obtained online, or by calling 0800 121 7788"} />
-            <div className="form-body">
-                <Form.Item
-                    name={'valuationIndex'}
-                    label={'Index valuation'}
-                    rules={[
-                        {required: true, message: 'Enter Index valuation'},
-                        {message: 'Invalid number', pattern: /^\$?[\d,]+(\.\d{1,2})?$/},
-                    ]}>
-                    <Input size={'large'} placeholder={'Enter remaining terms in months'} autoFocus={true} prefix={'£'}/>
-                </Form.Item>
-            </div>
-            <FormFooter />
-        </Form>
-    );
+  const navigate = useNavigate()
+  const {setDocumentInfo, documentInfo} = useGeneralContext()
+  type FormType = {
+    valuationIndex: string
+  }
+  const onFinish = (values: FormType) => {
+    setDocumentInfo({...documentInfo, valuationIndex: values.valuationIndex })
+    navigate('/form/8')
+  }
+  return (
+    <Form layout={'vertical'} onFinish={onFinish} autoComplete={'off'} initialValues={{valuationIndex: documentInfo?.valuationIndex}} className={'form-wrapper'}>
+      <StepTitle title={'Index valuation (£)'} subtitle={"This can be obtained online, or by calling 0800 121 7788"} />
+      <div className="form-body">
+        <Form.Item
+          name={'valuationIndex'}
+          rules={[
+            {required: true, message: 'Enter Index valuation'},
+            {message: 'Invalid number', pattern: /^\$?[\d,]+(\.\d{1,2})?$/},
+          ]}
+        >
+          <Input size={'large'} placeholder={'Enter remaining terms in months'} autoFocus={true} prefix={'£'}/>
+        </Form.Item>
+      </div>
+      <FormFooter />
+    </Form>
+  );
 };
 
 export default FormStep07;
diff --git a/src/pages/form/FormStep08.tsx b/src/pages/form/FormStep08.tsx
index a61eb68..020231d 100644
--- a/src/pages/form/FormStep08.tsx
+++ b/src/pages/form/FormStep08.tsx
@@ -5,32 +5,32 @@ import StepTitle from "../../components/step-title/StepTitle";
 import FormFooter from "../../components/form-footer/FormFooter";
 
 const FormStep08 = () => {
-    const navigate = useNavigate()
-    const {setDocumentInfo, documentInfo} = useGeneralContext()
-    type FormType = {
-        remortgageValuation: string
-    }
-    const onFinish = (values: FormType) => {
-        setDocumentInfo({...documentInfo, remortgageValuation: values.remortgageValuation })
-        navigate('/form/9')
-    }
-    return (
-        <Form layout={'vertical'} onFinish={onFinish} autoComplete={'off'} initialValues={{remortgageValuation: documentInfo?.remortgageValuation}} className={'form-wrapper'}>
-            <StepTitle title={'Remortgage valuation (£)'} subtitle={"This can be obtained online, or by calling 0800 121 7788"} />
-            <div className="form-body">
-                <Form.Item
-                    name={'remortgageValuation'}
-                    label={'Remortgage valuation'}
-                    rules={[
-                        {required: true, message: 'Enter Remortgage valuation'},
-                        {message: 'Invalid number', pattern: /^\$?[\d,]+(\.\d{1,2})?$/},
-                    ]}>
-                    <Input size={'large'} placeholder={'Enter remortgage valuation'} autoFocus={true} prefix={'£'}/>
-                </Form.Item>
-            </div>
-            <FormFooter />
-        </Form>
-    );
+  const navigate = useNavigate()
+  const {setDocumentInfo, documentInfo} = useGeneralContext()
+  type FormType = {
+    remortgageValuation: string
+  }
+  const onFinish = (values: FormType) => {
+    setDocumentInfo({...documentInfo, remortgageValuation: values.remortgageValuation })
+    navigate('/form/9')
+  }
+  return (
+    <Form layout={'vertical'} onFinish={onFinish} autoComplete={'off'} initialValues={{remortgageValuation: documentInfo?.remortgageValuation}} className={'form-wrapper'}>
+      <StepTitle title={'Remortgage valuation (£)'} subtitle={"This can be obtained online, or by calling 0800 121 7788"} />
+      <div className="form-body">
+        <Form.Item
+          name={'remortgageValuation'}
+          rules={[
+            {required: true, message: 'Enter Remortgage valuation'},
+            {message: 'Invalid number', pattern: /^\$?[\d,]+(\.\d{1,2})?$/},
+          ]}
+        >
+          <Input size={'large'} placeholder={'Enter remortgage valuation'} autoFocus={true} prefix={'£'}/>
+        </Form.Item>
+      </div>
+      <FormFooter />
+    </Form>
+  );
 };
 
 export default FormStep08;
diff --git a/src/pages/form/FormStep09.tsx b/src/pages/form/FormStep09.tsx
index 24854c9..fabfb41 100644
--- a/src/pages/form/FormStep09.tsx
+++ b/src/pages/form/FormStep09.tsx
@@ -8,42 +8,52 @@ import RadioOptionCard from "../../components/radio-option-card/RadioOptionCard"
 import FormFooter from "../../components/form-footer/FormFooter";
 
 const FormStep09 = () => {
-    const navigate = useNavigate()
-    const {setDocumentInfo, documentInfo} = useGeneralContext()
-    const [value, setValue] = useState(documentInfo?.repayment);
-    type FormType = {
-        productType: string
-    }
-    const onChange = ({target: {value}}: RadioChangeEvent) => {
-        setValue(value)
-    }
-    const onFinish = (values: FormType) => {
-        setDocumentInfo({...documentInfo, productType: values.productType})
-        navigate('/form/10')
-    }
-    const options = [
-        {label: <RadioOptionCard number={'A'} name={'Fixed'}/>, value: 'Fixed'},
-        {label: <RadioOptionCard number={'B'} name={'Variable'}/>, value: 'Variable'},
-        {label: <RadioOptionCard number={'C'} name={'Flex'}/>, value: 'Flex'},
-    ]
-    return (
-        <Form layout={'vertical'} onFinish={onFinish} autoComplete={'off'}
-              initialValues={{productType: documentInfo?.productType}} className={'form-wrapper'}>
-            <StepTitle title={'Product type'} subtitle={"Select a new product type"}/>
-            <div className="form-body">
-                <Form.Item
-                    name={'productType'}
-                    label={'Product type'}
-                    rules={[
-                        {required: true, message: 'Select product type'},
-                    ]}>
-                    <Radio.Group options={options} onChange={onChange} value={value} optionType="button"
-                                 className={'radio-column-container'}/>
-                </Form.Item>
-            </div>
-            <FormFooter />
-        </Form>
-    );
+  const navigate = useNavigate()
+  const {setDocumentInfo, documentInfo} = useGeneralContext()
+  const [value, setValue] = useState(documentInfo?.repayment);
+  type FormType = {
+    productType: string
+  }
+  const onChange = ({target: {value}}: RadioChangeEvent) => {
+    setValue(value)
+  }
+  const onFinish = (values: FormType) => {
+    setDocumentInfo({...documentInfo, productType: values.productType})
+    navigate('/form/10')
+  }
+  const options = [
+    {label: <RadioOptionCard number={'1'} name={'Fixed'}/>, value: 'Fixed'},
+    {label: <RadioOptionCard number={'2'} name={'Variable'}/>, value: 'Variable'},
+    {label: <RadioOptionCard number={'3'} name={'Flex'}/>, value: 'Flex'},
+  ]
+  return (
+    <Form
+      layout={'vertical'}
+      onFinish={onFinish}
+      autoComplete={'off'}
+      initialValues={{productType: documentInfo?.productType}}
+      className={'form-wrapper'}
+    >
+      <StepTitle title={'Product type'} subtitle={"Select a new product type"}/>
+      <div className="form-body">
+        <Form.Item
+          name={'productType'}
+          rules={[
+            {required: true, message: 'Select product type'},
+          ]}
+        >
+          <Radio.Group
+            options={options}
+            onChange={onChange}
+            value={value}
+            optionType={"button"}
+            className={'radio-column-container'}
+          />
+        </Form.Item>
+      </div>
+      <FormFooter />
+    </Form>
+  );
 };
 
 export default FormStep09;
diff --git a/src/pages/form/FormStep10.tsx b/src/pages/form/FormStep10.tsx
index d1a0c3d..0e9cb0c 100644
--- a/src/pages/form/FormStep10.tsx
+++ b/src/pages/form/FormStep10.tsx
@@ -8,43 +8,52 @@ import RadioOptionCard from "../../components/radio-option-card/RadioOptionCard"
 import FormFooter from "../../components/form-footer/FormFooter";
 
 const FormStep10 = () => {
-    const navigate = useNavigate()
-    const {setDocumentInfo, documentInfo} = useGeneralContext()
-    const [value, setValue] = useState(documentInfo?.repayment);
-    type FormType = {
-        initialPeriod: string
-    }
-    const onChange = ({target: {value}}: RadioChangeEvent) => {
-        setValue(value)
-    }
-    const onFinish = (values: FormType) => {
-        setDocumentInfo({...documentInfo, initialPeriod: values.initialPeriod})
-        navigate('/form/11')
-    }
-    const options = [
-        {label: <RadioOptionCard number={'A'} name={'2 years'}/>, value: '2'},
-        {label: <RadioOptionCard number={'B'} name={'3 years'}/>, value: '3'},
-        {label: <RadioOptionCard number={'C'} name={'5 years'}/>, value: '5'},
-        {label: <RadioOptionCard number={'C'} name={'10 years'}/>, value: '10'},
-    ]
-    return (
-        <Form layout={'vertical'} onFinish={onFinish} autoComplete={'off'}
-              initialValues={{initialPeriod: documentInfo?.initialPeriod}} className={'form-wrapper'}>
-            <StepTitle title={'Initial Period'} subtitle={"Select an initial period for this new product type"}/>
-            <div className="form-body">
-                <Form.Item
-                    name={'initialPeriod'}
-                    label={'Initial Period'}
-                    rules={[
-                        {required: true, message: 'Select Initial Period'},
-                    ]}>
-                    <Radio.Group options={options} onChange={onChange} value={value} optionType="button"
-                                 className={'radio-column-container'}/>
-                </Form.Item>
-            </div>
-            <FormFooter />
-        </Form>
-    );
+  const navigate = useNavigate()
+  const {setDocumentInfo, documentInfo} = useGeneralContext()
+  const [value, setValue] = useState(documentInfo?.repayment);
+  type FormType = {
+    initialPeriod: string
+  }
+  const onChange = ({target: {value}}: RadioChangeEvent) => {
+    setValue(value)
+  }
+  const onFinish = (values: FormType) => {
+    setDocumentInfo({...documentInfo, initialPeriod: values.initialPeriod})
+    navigate('/form/11')
+  }
+  const options = [
+    {label: <RadioOptionCard number={'1'} name={'2 years'}/>, value: '2'},
+    {label: <RadioOptionCard number={'2'} name={'3 years'}/>, value: '3'},
+    {label: <RadioOptionCard number={'3'} name={'5 years'}/>, value: '5'},
+    {label: <RadioOptionCard number={'4'} name={'10 years'}/>, value: '10'},
+  ]
+  return (
+    <Form layout={'vertical'}
+          onFinish={onFinish}
+          autoComplete={'off'}
+          initialValues={{initialPeriod: documentInfo?.initialPeriod}}
+          className={'form-wrapper'}
+    >
+      <StepTitle title={'Initial Period'} subtitle={"Select an initial period for this new product type"}/>
+      <div className="form-body">
+        <Form.Item
+          name={'initialPeriod'}
+          rules={[
+            {required: true, message: 'Select Initial Period'},
+          ]}
+        >
+          <Radio.Group
+            options={options}
+            onChange={onChange}
+            value={value}
+            optionType={"button"}
+            className={'radio-column-container'}
+          />
+        </Form.Item>
+      </div>
+      <FormFooter />
+    </Form>
+  );
 };
 
 export default FormStep10;
diff --git a/src/pages/form/FormStep11.tsx b/src/pages/form/FormStep11.tsx
index d98ef3e..6b38b04 100644
--- a/src/pages/form/FormStep11.tsx
+++ b/src/pages/form/FormStep11.tsx
@@ -13,66 +13,65 @@ import 'dayjs/plugin/updateLocale'
 import {useState} from "react";
 
 const FormStep11 = () => {
-    const navigate = useNavigate()
-    const {setDocumentInfo, documentInfo} = useGeneralContext()
-    const [value, setValue] = useState(documentInfo.startDate ? dayjs(documentInfo.startDate) : dayjs());
-    type FormType = {
-        startDate: string
-    }
-    const onFinish = (values: FormType) => {
-        setDocumentInfo({...documentInfo, startDate: value?.format('YYYY-MM-DD') })
-        navigate('/form/12')
-    }
-    const disabledDate: RangePickerProps['disabledDate'] = (current) => {
-        // Can not select days before today
-        return current && current < dayjs().subtract(1, 'day').endOf('day');
-    };
-    // dayjs.updateLocale('en_GB', {
-    //     weekStart: 3
-    // });
-    const onChange = (value: any) => {
-        setValue(value)
-    }
+  const navigate = useNavigate()
+  const {setDocumentInfo, documentInfo} = useGeneralContext()
+  const [value, setValue] = useState(documentInfo.startDate ? dayjs(documentInfo.startDate) : dayjs());
+  type FormType = {
+    startDate: string
+  }
+  const onFinish = (values: FormType) => {
+    setDocumentInfo({...documentInfo, startDate: value?.format('YYYY-MM-DD') })
+    navigate('/form/12')
+  }
+  const disabledDate: RangePickerProps['disabledDate'] = (current) => {
+    // Can not select days before today
+    return current && current < dayjs().subtract(1, 'day').endOf('day');
+  };
+  // dayjs.updateLocale('en_GB', {
+  //     weekStart: 3
+  // });
+  const onChange = (value: any) => {
+    setValue(value)
+  }
 
-    return (
-        <Form layout={'vertical'} onFinish={onFinish} autoComplete={'off'} initialValues={{startDate: documentInfo?.startDate}} className={'form-wrapper'}>
-            <StepTitle title={'Start date'} subtitle={"If you were to proceed with a product transfer when would this start?"} />
-            <div className="form-body">
-            <Form.Item
-                name={'startDate'}
-                label={'Start date'}
-                required={true}
-                status={ value ? 'success' : 'error'}
-                rules={[
-                    {
-                        required: value === null,
-                        message: 'Select start date',
-                    }
-                ]}
+  return (
+    <Form layout={'vertical'} onFinish={onFinish} autoComplete={'off'} initialValues={{startDate: documentInfo?.startDate}} className={'form-wrapper'}>
+      <StepTitle title={'Start date'} subtitle={"If you were to proceed with a product transfer when would this start?"} />
+      <div className="form-body">
+        <Form.Item
+          name={'startDate'}
+          required={true}
+          status={ value ? 'success' : 'error'}
+          rules={[
+            {
+              required: value === null,
+              message: 'Select start date',
+            }
+            ]}
 
-                // rules={[
-                //     { required: true, message: 'This field is required', pattern: /^\s*$/ },
-                // ]}
-            >
-                <ConfigProvider locale={enGB}>
-                <DatePicker
-                    defaultValue={value}
-                    format="DD-MM-YYYY"
-                    style={{width: '100%'}}
-                    size={'large'}
-                    placeholder={'Select start date'}
-                    disabledDate={disabledDate}
-                    value={value}
-                    onChange={onChange}
-                    allowClear={false}
-                    autoFocus
-                />
+          // rules={[
+          //     { required: true, message: 'This field is required', pattern: /^\s*$/ },
+          // ]}
+        >
+          <ConfigProvider locale={enGB}>
+            <DatePicker
+              defaultValue={value}
+              format="DD-MM-YYYY"
+              style={{width: '100%'}}
+              size={'large'}
+              placeholder={'Select start date'}
+              disabledDate={disabledDate}
+              value={value}
+              onChange={onChange}
+              allowClear={false}
+              autoFocus
+            />
                 </ConfigProvider>
-            </Form.Item>
-            </div>
-            <FormFooter />
-        </Form>
-    );
+        </Form.Item>
+      </div>
+      <FormFooter />
+    </Form>
+  );
 };
 
 export default FormStep11;
diff --git a/src/pages/form/FormStep12.tsx b/src/pages/form/FormStep12.tsx
index da69df3..6d1b313 100644
--- a/src/pages/form/FormStep12.tsx
+++ b/src/pages/form/FormStep12.tsx
@@ -5,42 +5,39 @@ import StepTitle from "../../components/step-title/StepTitle";
 import FormFooter from "../../components/form-footer/FormFooter";
 
 const FormStep12 = () => {
-    const navigate = useNavigate()
-    const {setDocumentInfo, documentInfo, setIsModalOpen, setModalType} = useGeneralContext()
-    type FormType = {
-        exitFee: string
+  const navigate = useNavigate()
+  const {setDocumentInfo, documentInfo, setIsModalOpen, setModalType} = useGeneralContext()
+  type FormType = {
+    exitFee: string
+  }
+  const onFinish = (values: FormType) => {
+    setDocumentInfo({...documentInfo, exitFee: values.exitFee })
+    if(documentInfo.brokerFee &&
+      documentInfo.lender
+    ) {
+      navigate('/report')
+    } else {
+      setModalType('errorSubmitting')
+      setIsModalOpen(true)
     }
-    const onFinish = (values: FormType) => {
-        setDocumentInfo({...documentInfo, exitFee: values.exitFee })
-        if(documentInfo.brokerFee &&
-        documentInfo.lender
-        ) {
-            navigate('/report')
-        } else {
-            setModalType('errorSubmitting')
-            setIsModalOpen(true)
+  }
 
-        }
-
-    }
-    return (
-        <Form layout={'vertical'} onFinish={onFinish} autoComplete={'off'} initialValues={{exitFee: documentInfo?.exitFee}} className={'form-wrapper'}>
-            <StepTitle title={'Exit fee (£)'} subtitle={"For example, Coventry typically charge £125"} />
-            <div className="form-body">
-                <Form.Item
-                    name={'exitFee'}
-                    label={'Exit fee'}
-                    rules={[
-                        {required: true, message: 'Enter exit fee'},
-                        {message: 'Invalid number', pattern: /^\$?[\d,]+(\.\d{1,2})?$/},
-                    ]}>
-                    <Input size={'large'} placeholder={'Enter exit fee'} autoFocus={true} prefix={'£'}/>
-                </Form.Item>
-            </div>
-
-            <FormFooter isLastStep={true}/>
-        </Form>
-    );
+  return (
+    <Form layout={'vertical'} onFinish={onFinish} autoComplete={'off'} initialValues={{exitFee: documentInfo?.exitFee}} className={'form-wrapper'}>
+      <StepTitle title={'Exit fee (£)'} subtitle={"For example, Coventry typically charge £125"} />
+      <div className="form-body">
+        <Form.Item
+          name={'exitFee'}
+          rules={[
+            {required: true, message: 'Enter exit fee'},
+            {message: 'Invalid number', pattern: /^\$?[\d,]+(\.\d{1,2})?$/},
+          ]}>
+          <Input size={'large'} placeholder={'Enter exit fee'} autoFocus={true} prefix={'£'}/>
+        </Form.Item>
+      </div>
+      <FormFooter isLastStep={true}/>
+    </Form>
+  );
 };
 
 export default FormStep12;
diff --git a/src/styles/global.scss b/src/styles/global.scss
index df4670b..c9dbf07 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -1,9 +1,6 @@
-//.ant-layout {
-//    background: none;
-//}
 .container {
   max-width: 960px;
-  height: 100%;
+  height: fit-content;
   margin: 0 auto;
   padding: 200px 176px 100px 144px;
 }
@@ -16,35 +13,13 @@
 .description.ant-typography {
   max-width: 416px;
   margin-bottom: 32px;
-
 }
 
-
-
-//button.ant-btn-text {
-//    border: none;
-//    background: none;
-//
-//    &:hover {
-//        border: none;
-//        background-color: transparent !important;
-//    }
-//    &:focus {
-//        border: none;
-//        background-color: transparent !important;
-//        outline: transparent;
-//    }
-//}
-//button.ant-btn-primary {
-//    border: 1px solid #5c5c5c;
-//    background-color: #5c5c5c;
-//    &:hover {
-//        border: 1px solid #5c5c5c;
-//        background-color: #4b4b4b !important;
-//    }
-//    &:focus {
-//        border: none;
-//        background-color:  #4b4b4b !important;
-//        outline: none;
-//    }
-//}
+button.ant-btn-text {
+  &:not(:disabled):hover,
+  &:not(:disabled):focus,
+  &:not(:disabled):active {
+    border-color: #ffffff;
+    background: linear-gradient(0deg, rgba(27, 71, 228, 0.2), rgba(27, 71, 228, 0.2));
+  }
+}
\ No newline at end of file
diff --git a/src/styles/index.css b/src/styles/index.css
index 4b4cf8f..67d036c 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -43,6 +43,11 @@ body {
   min-height: 100vh;
 }
 
+.ant-layout {
+  min-width: 100vw;
+  width: fit-content;
+}
+
 h1.ant-typography,
 .ant-typography+h2.ant-typography {
   font-family: 'Inter SemiBold';