Minor modifications as per request including: buttons, checkboxes

19 files changed, 336 insertions, 122 deletions

diff --git a/src/26.html b/src/26.html
index 9328871..0a703fe 100644
--- a/src/26.html
+++ b/src/26.html
@@ -39,8 +39,8 @@
                           </p>
                           <h3>Your privacy</h3>
                           <p>Pretium lectus quam id leo in vitae. Turpis massa tincidunt dui ut.</p>
-                          <a href="27.html" class="btn primary">Start adding documents</a>
-                          <a class="btn secondary">Cancel</a>
+                          <label class="btn primary">Start adding documents</label>
+                          <label class="btn btn--secondary">Cancel</label>
                         </div>
                     </div>
                   </main>
diff --git a/src/27.html b/src/27.html
index f6f35d2..aa1c894 100644
--- a/src/27.html
+++ b/src/27.html
@@ -28,12 +28,12 @@
                         <div class="upload-box">
                           <div class="upload-box__title">Lorem ipsum dolor sit amet, consectetur elit.</div>
                           <p class="upload-box__small-text">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                          <button class="btn tertiary small">Add file</button>
+                          <button class="btn tertiary small">Add file</label>
                         </div>
                         <div class="upload-box">
                           <div class="upload-box__title">Cursus euismod</div>
                           <p class="upload-box__small-text">Quis viverra nibh cras pulvinar mattis nunc. Bibendum neque egestas.</p>
-                          <button class="btn tertiary small">Add file</button>
+                          <button class="btn tertiary small">Add file</label>
                         </div>
 
                         <div class="spacer"></div>
@@ -42,10 +42,10 @@
                           <p class="upload-box__text">Congue quisque egestas diam in arcu cursus. 
                             Diam vulputate ut pharetra sit amet. Aliquet sagittis id consectetur purus ut faucibus.
                           </p>
-                          <button class="btn tertiary">Add additional document</button>
+                          <label class="btn btn--tertiary">Add additional document</label>
                           </div>
-                        <button class="btn primary">Confirm</button>
-                        <button class="btn secondary">Cancel</button>
+                        <label class="btn btn--primary">Confirm</label>
+                        <label class="btn btn--secondary">Cancel</label>
                     </div>
                   </main>
                 </div>
diff --git a/src/29.html b/src/29.html
index bae61f1..9bf6410 100644
--- a/src/29.html
+++ b/src/29.html
@@ -37,7 +37,7 @@
                               </div>
                               <div class="progress-bar__percentage">68%</div>
                             </div>
-                            <button class="btn tertiary">Cancel</button>
+                            <label class="btn btn--tertiary">Cancel</label>
                           </div>
                           
                           <div class="side-panel">
diff --git a/src/30.html b/src/30.html
index eb340f9..8d0289c 100644
--- a/src/30.html
+++ b/src/30.html
@@ -31,7 +31,7 @@
                           <div class="upload-box">
 
                             <h2>Uploading</h2>
-                            <button class="btn tertiary">Cancel</button>
+                            <label class="btn btn--tertiary">Cancel</label>
                             <div class="pdf-preview-loading">
                               <div class="pdf-preview-loading__text">
                                 <div style="background-color:green">loading animation</div> <!-- placeholder for loading animation gif-->
diff --git a/src/30a.html b/src/30a.html
index eb340f9..267005a 100644
--- a/src/30a.html
+++ b/src/30a.html
@@ -29,9 +29,13 @@
                         <h1>signaturepage.jpg</h1>
                         <div class="horiz-container full-width-on-mobile">
                           <div class="upload-box">
-
-                            <h2>Uploading</h2>
-                            <button class="btn tertiary">Cancel</button>
+                            <div style="display: flex;justify-content: space-between;">
+                              <h2>Uploading</h2>
+                              <div class="btn-group">
+                                <label class="btn btn--tertiary">Replace</label>
+                                <label class="btn btn--tertiary">Delete</label>
+                              </div>
+                            </div>
                             <div class="pdf-preview-loading">
                               <div class="pdf-preview-loading__text">
                                 <div style="background-color:green">loading animation</div> <!-- placeholder for loading animation gif-->
diff --git a/src/31.html b/src/31.html
index 82a202b..832ac9c 100644
--- a/src/31.html
+++ b/src/31.html
@@ -44,13 +44,13 @@
                               Bibendum neque egestas congue quisque egestas diam in arcu cursus.
                             </p>
                             <div class="btn-group">
-                              <a class="btn tertiary">Delete</a>
-                              <a class="btn tertiary">Replace</a>
+                              <label class="btn btn--tertiary">Delete</label>
+                              <label class="btn btn--tertiary">Replace</label>
                             </div>
                             <div class="pdf-preview">
                               <img src="img/docbig.png" />
                             </div>
-                            <a class="btn primary">Continue</a>
+                            <label class="btn btn--primary">Continue</label>
                           </div>
                           
                           <div class="side-panel">
diff --git a/src/32.html b/src/32.html
index e3300ae..fbbb562 100644
--- a/src/32.html
+++ b/src/32.html
@@ -8,8 +8,9 @@
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
     <link rel="stylesheet" href="css/bigstyle.css" />
     <link rel="stylesheet" href="css/style.css" />
-    <link rel="stylesheet" href="css/buttons.css" />
+    <link rel="stylesheet" href="css/labels.css" />
     <link rel="stylesheet" href="css/uploadbox.css" />
+    <link rel="stylesheet" href="css/buttons.css" />
     <link rel="stylesheet" href="css/infobox.css" />
   </head>
   <body class="authenticatedpage page legacy-page base-page basicpage page-mygov-auth-account bg-blue-grey">
@@ -51,7 +52,7 @@
                               Lorem ipsum dolor sit amet, consec tetur adipiscing elit.
                             </div>
                           </div>
-                          <button class="btn tertiary small">Add file</button>
+                          <label class="btn btn--tertiary small">Add file</label>
                         </div>
 
                         <div class="upload-box">
@@ -71,7 +72,7 @@
                               Lorem ipsum dolor sit amet, consec tetur adipiscing elit.
                             </div>
                           </div>
-                          <button class="btn tertiary small">Add file</button>
+                          <label class="btn btn--tertiary small">Add file</label>
                         </div>
                         
                         <div class="spacer"></div>
@@ -94,17 +95,17 @@
                               Processing...
                             </div>
                           </div>
-                          <button class="btn tertiary small">Add file</button>
+                          <label class="btn btn--tertiary small">Add file</label>
                         </div>
 
                         <div class="upload-box">
                           <p class="upload-box__text">Congue quisque egestas diam in arcu cursus. 
                             Diam vulputate ut pharetra sit amet. Aliquet sagittis id consectetur purus ut faucibus.
                           </p>
-                          <button class="btn tertiary">Add supporting documents</button>
+                          <label class="btn btn--tertiary">Add supporting documents</label>
                           </div>
-                        <button class="btn primary">Confirm</button>
-                        <button class="btn secondary">Cancel</button>
+                        <label class="btn btn--primary">Confirm</label>
+                        <label class="btn btn--secondary">Cancel</label>
                     </div>
                   </main>
                 </div>
diff --git a/src/33.html b/src/33.html
index cd20425..7b6737b 100644
--- a/src/33.html
+++ b/src/33.html
@@ -72,21 +72,42 @@
                             </div>
                           </div>
                         </div>
-                        <div class="checkbox-group">
-                          <input type="checkbox" />
-                          <label>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</label>
-                        </div>
-                        <div class="checkbox-group">
-                          <input type="checkbox" id="indeterminate"/>
-                          <label>Cursus euismod quis viverra nibh cras pulvinar mattis nunc.</label>
-                        </div>
-
-                        <!-- placeholder script to show "indeterminate" status of checkbox. delete me -->
-                        <script>document.getElementById("indeterminate").indeterminate = true;</script>
-
-                        <button class="btn primary">Confirm</button>
-                        <button class="btn secondary">Cancel</button>
 
+                        <form data-auto="mygov-dls-form" id="mygov-dls-form-wrapper" aria-labelledby="mygov-dls-form-heading" novalidate="">
+                          <fieldset class="fieldset--title__hidden">
+                            <label class="checkbox mb-none" for="checkbox-confirm">
+                              <input type="checkbox" id="checkbox-confirm" value="true" ng-reflect-form="[object Object]" ng-reflect-ng-class="[object Object]" aria-required="true" aria-invalid="false" aria-errormessage="checkbox-confirm__validation-messages" class="ng-untouched ng-pristine ng-valid">
+                              <span class="checkmark"></span>
+                              <span class="label">
+                                <p>I confirm these documents are accurate and complete.</p>
+                              </span>
+                            </label>
+                            <div class="checkbox mt-none pt-none pb-none">
+                              <div role="alert" class="error-message" id="checkbox-confirm__validation-messages">
+                                <span>You must confirm that the documents are accurate and complete</span>
+                              </div>
+                            </div>
+                            
+                            <label class="checkbox checkbox--error mb-none" for="checkbox-consent">
+                              <input type="checkbox" id="checkbox-consent" value="true" ng-reflect-form="[object Object]" ng-reflect-ng-class="[object Object]" aria-required="true" aria-invalid="false" aria-errormessage="checkbox-consent__validation-messages" class="ng-untouched ng-pristine ng-valid">
+                              <span class="checkmark"></span>
+                              <span class="label">
+                                <p>I give consent for these document to be retrieved by Medicare.</p>
+                              </span>
+                            </label>
+                          
+                            <div class="checkbox mt-none pt-none pb-none">
+                              <div role="alert" class="error-message" id="checkbox-confirm__validation-messages">
+                                <span>You must confirm that you agree to give consent for the documents to be retrieved</span>
+                              </div>
+                            </div>
+                            
+                            <div _ngcontent-set-c83="" class="button-container">
+                              <label data-auto="submission-button" class="btn btn--primary" type="submit"> Submit documents</label>
+                              <label _ngcontent-set-c83="" class="btn btn--secondary" ng-reflect-router-link="/dls" href="#/dls">Cancel</label>
+                            </div>
+                          </fieldset>
+                        </form>
                     </div>
                   </main>
                 </div>
diff --git a/src/34.html b/src/34.html
index d0337a3..f5b3153 100644
--- a/src/34.html
+++ b/src/34.html
@@ -14,6 +14,7 @@
     <link rel="stylesheet" href="css/forms.css" />
     <link rel="stylesheet" href="css/floatingpage.css" />
     <link rel="stylesheet" href="css/fullonmobile.css" />
+    <link rel="stylesheet" href="css/success.css" />
   </head>
   <body class="authenticatedpage page legacy-page base-page basicpage page-mygov-auth-account bg-blue-grey">
     <div class="root responsivegrid">
@@ -28,15 +29,33 @@
                         <!-- ADD YOUR PAGE IN HERE -->
                         <div class="full-on-mobile" >
                           <div class="floating-page ">
-                            <p>Your (dynamic form) and any supporting documents you added are uploaded and we've notified (dynamic service).</p>
-                            <p>Your document upload reference number is (number).</p>
-                            <div class="info-box message">
-                              <div class="info-box__icon"></div>
-                              <div class="info-box__text">
-                                Lorem ipsum dolor sit amet, consec tetur adipiscing elit.
+
+                            <div role="region" aria-live="assertive" class="success_error_page_container">
+                              <div aria-hidden="true" class="success_error_page_container__logo success_error_page_container__logo--success"></div>
+                              <div>
+                                <h1>Success</h1>
                               </div>
                             </div>
-                            <button class="btn primary">Return to home</button>
+                            <hr class="success_error_page_container__hr"/>
+                            <div class="success-page-text">
+                              <p>Your Medicare Entitlement Statement and any supporting documents you added are uploaded and we've notified Medicare.</p>
+                              <p>Your document upload reference number is MCA01728394</p>
+                            </div>
+                            <div class="info-box info">
+                              <div class="info-box--info-icon"></div>
+                              <div class="info-box--info-content">
+                                <div>
+                                  <p>For information about your privacy, go to the:</p>
+                                  <ul> 
+                                    <li>myGov privacy notice</li> 
+                                    <li>%dynamic-service-privacy-policy%</li> 
+                                  </ul>
+                                </div>
+                              </div>
+                            </div>
+                            
+                            <label class="btn btn--primary" href="https://test3.beta.my.gov.au/en">Return to home</label>
+
                           </div>
                         </div>
                     </div>
diff --git a/src/37.html b/src/37.html
index d59aba3..01224e4 100644
--- a/src/37.html
+++ b/src/37.html
@@ -11,6 +11,7 @@
     <link rel="stylesheet" href="css/buttons.css" />
     <link rel="stylesheet" href="css/uploadbox.css" />
     <link rel="stylesheet" href="css/infobox.css" />
+    <link rel="stylesheet" href="css/supportingdocs.css" />
   </head>
   <body class="authenticatedpage page legacy-page base-page basicpage page-mygov-auth-account bg-blue-grey">
     <div class="root responsivegrid">
@@ -28,56 +29,58 @@
                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
                           sed do eiusmod tempor.
                         </p>
-                        <div class="upload-box">
-                          <div class="upload-box__link-box">
-                            <div class="upload-box__link-title"><a href="#">Permanent residency application</a></div>
-                            <img class="upload-box__link-icon" src="img/arrow.png" />
-                          </div>
-                          <div class="upload-box__text">
-                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
-                            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                          </div>
-                        </div>
-                        <div class="upload-box">
-                          <div class="upload-box__link-box">
-                            <div class="upload-box__link-title">Permanent residency refused or something something</div>
-                            <a href="#"><img class="upload-box__link-icon" src="img/arrow.png" /></a>
-                          </div>
-                          <div class="upload-box__text">
-                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
-                            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                          </div>
-                        </div>
-                        <div class="upload-box">
-                          <div class="upload-box__link-box">
-                            <a href="#">
-                              <div class="upload-box__link-title">Permanent residency decision appeal</div>
+                        <div class="supporting-docs-container">
+                          <div class="upload-box">
+                            <div class="upload-box__link-box">
+                              <div class="upload-box__link-title"><a href="#">Permanent residency application</a></div>
                               <img class="upload-box__link-icon" src="img/arrow.png" />
-                            </a>
+                            </div>
+                            <div class="upload-box__text">
+                              Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
+                              sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                            </div>
                           </div>
-                          <div class="upload-box__text">
-                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
-                            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                          <div class="upload-box">
+                            <div class="upload-box__link-box">
+                              <div class="upload-box__link-title">Permanent residency refused or something something</div>
+                              <a href="#"><img class="upload-box__link-icon" src="img/arrow.png" /></a>
+                            </div>
+                            <div class="upload-box__text">
+                              Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
+                              sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                            </div>
                           </div>
-                        </div>
-                        <div class="upload-box">
-                          <div class="upload-box__link-box">
-                            <div class="upload-box__link-title">Appeal for Ministerial Intervention</div>
-                            <img class="upload-box__link-icon" src="img/arrow.png" />
-                          </div>
-                          <div class="upload-box__text">
-                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
-                            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                          <div class="upload-box">
+                            <div class="upload-box__link-box">
+                              <a href="#">
+                                <div class="upload-box__link-title">Permanent residency decision appeal</div>
+                                <img class="upload-box__link-icon" src="img/arrow.png" />
+                              </a>
+                            </div>
+                            <div class="upload-box__text">
+                              Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
+                              sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                            </div>
                           </div>
-                        </div>
-                        <div class="upload-box">
-                          <div class="upload-box__link-box">
-                            <div class="upload-box__link-title">Proof of Health Insurance</div>
-                            <img class="upload-box__link-icon" src="img/arrow.png" />
+                          <div class="upload-box">
+                            <div class="upload-box__link-box">
+                              <div class="upload-box__link-title">Appeal for Ministerial Intervention</div>
+                              <img class="upload-box__link-icon" src="img/arrow.png" />
+                            </div>
+                            <div class="upload-box__text">
+                              Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
+                              sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                            </div>
                           </div>
-                          <div class="upload-box__text">
-                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
-                            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                          <div class="upload-box">
+                            <div class="upload-box__link-box">
+                              <div class="upload-box__link-title">Proof of Health Insurance</div>
+                              <img class="upload-box__link-icon" src="img/arrow.png" />
+                            </div>
+                            <div class="upload-box__text">
+                              Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
+                              sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                            </div>
                           </div>
                         </div>
                     </div>
diff --git a/src/css/bigstyle.css b/src/css/bigstyle.css
index e7ed189..8461345 100644
--- a/src/css/bigstyle.css
+++ b/src/css/bigstyle.css
@@ -4473,7 +4473,7 @@ fieldset .input-group:first-child {
   margin-top: 0.75em;
 }
 .page-mygov-auth-account div .error-message::before {
-  content: url("styles/resources/assets/icons/error-oct-red.svg");
+  content: url("../img/error.png");
   position: relative;
   left: 0px;
   top: 0px;
diff --git a/src/css/buttons.css b/src/css/buttons.css
index 27d5db9..e4e3289 100644
--- a/src/css/buttons.css
+++ b/src/css/buttons.css
@@ -7,27 +7,24 @@
     margin: 0.75rem 0;
     padding: 0.75rem 2rem;
     cursor: pointer;
-}
-.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice a.btn {
     line-height: normal;
+    text-align: center;
 }
-.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .btn.primary {
+.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .btn.btn--primary {
     font-weight: bold;
     background-color: var(--ocean-blue-40);
     color: var(--btn-text-color);
 }
 
-.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .btn.secondary {
+.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .btn.btn--secondary {
     font-weight: bold;
     background-color: var(--white);
     border-color: var(--navy);
 }
-
-.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .btn.tertiary {
+.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .btn.btn--tertiary {
     background-color: var(--white);
     border-color: #a7a8a9;
 }
-
 .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .btn:hover {
     background-color: var(--light-navy);
     border-color: var(--light-navy);
@@ -41,17 +38,6 @@
     color: var(--btn-text-color);
 }
 
-.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .btn:focus:hover {
-    text-decoration: none;
-    outline: none;
-    color: var(--white);
-}
-
-.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice button.btn.primary:focus {
-    text-decoration: none;
-    outline: none;
-}
-
 .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .btn:focus:before {
     content: " ";
     position: absolute;
@@ -68,6 +54,7 @@
     background-color: var(--grey1c-100);
     color: #76797c;
     border-color: #bbbcbc;
+    cursor: not-allowed;
 }
 
 .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .btn:active {
@@ -76,21 +63,19 @@
     color: var(--white);
     background-color: #1d2e51;
 }
-.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .btn.small {
-    max-width: 50%;
-}
-.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .btn-group{
-    display: flex;
 
-}
-.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .btn-group *{
-    max-width: calc(50% - 1rem);
+.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .btn:focus:hover {
+    text-decoration: none;
+    outline: none;
+    color: var(--white);
 }
 
-/* Tablet (at least 40em) */
+/* Buttons fill entire horizontal width on displays below 640px (this number was taken from the original syling) */
 
-@media only screen and (min-width: 40em) {
-    .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .btn ~ .btn {
-        margin-left: 0.5rem;
+@media only screen and (max-width: 639px) {
+    .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .btn {
+        display: block;
+        width: 100%;
     }
+    
 }
\ No newline at end of file
diff --git a/src/css/buttons_old.css b/src/css/buttons_old.css
new file mode 100644
index 0000000..27d5db9
--- /dev/null
+++ b/src/css/buttons_old.css
@@ -0,0 +1,96 @@
+:root {
+    --btn-text-color: #172F50;
+}
+.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .btn {
+    color: var(--btn-text-color);
+    font-size: var(--font-size-16);
+    margin: 0.75rem 0;
+    padding: 0.75rem 2rem;
+    cursor: pointer;
+}
+.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice a.btn {
+    line-height: normal;
+}
+.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .btn.primary {
+    font-weight: bold;
+    background-color: var(--ocean-blue-40);
+    color: var(--btn-text-color);
+}
+
+.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .btn.secondary {
+    font-weight: bold;
+    background-color: var(--white);
+    border-color: var(--navy);
+}
+
+.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .btn.tertiary {
+    background-color: var(--white);
+    border-color: #a7a8a9;
+}
+
+.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .btn:hover {
+    background-color: var(--light-navy);
+    border-color: var(--light-navy);
+    color: var(--white);
+    text-decoration: none;
+}
+
+.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .btn:focus {
+    text-decoration: none;
+    outline: none;
+    color: var(--btn-text-color);
+}
+
+.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .btn:focus:hover {
+    text-decoration: none;
+    outline: none;
+    color: var(--white);
+}
+
+.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice button.btn.primary:focus {
+    text-decoration: none;
+    outline: none;
+}
+
+.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .btn:focus:before {
+    content: " ";
+    position: absolute;
+    z-index: 1;
+    top: -6px;
+    left: -6px;
+    right: -6px;
+    bottom: -6px;
+    border-radius: 6px;
+    border: 2px solid var(--navy);
+}
+
+.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .btn[disabled] {
+    background-color: var(--grey1c-100);
+    color: #76797c;
+    border-color: #bbbcbc;
+}
+
+.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .btn:active {
+    text-decoration: none;
+    outline: none;
+    color: var(--white);
+    background-color: #1d2e51;
+}
+.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .btn.small {
+    max-width: 50%;
+}
+.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .btn-group{
+    display: flex;
+
+}
+.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .btn-group *{
+    max-width: calc(50% - 1rem);
+}
+
+/* Tablet (at least 40em) */
+
+@media only screen and (min-width: 40em) {
+    .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .btn ~ .btn {
+        margin-left: 0.5rem;
+    }
+}
\ No newline at end of file
diff --git a/src/css/floatingpage.css b/src/css/floatingpage.css
index 23672e4..c618ce1 100644
--- a/src/css/floatingpage.css
+++ b/src/css/floatingpage.css
@@ -5,7 +5,7 @@
     .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .floating-page {
         background-color: var(--white);
         padding: 3rem;
-        margin: 0 auto;
+        margin: 0 0;
         box-shadow: 0px 2px 6px #10182040;
         border-radius: 5px;
         max-width: 80rem;
diff --git a/src/css/forms.css b/src/css/forms.css
index 80436aa..3d13910 100644
--- a/src/css/forms.css
+++ b/src/css/forms.css
@@ -1,4 +1,4 @@
-.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .checkbox-group {
+/* .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .checkbox-group {
     display: flex;
     width: 100%;
     padding: 0.5rem;
@@ -39,4 +39,41 @@
 .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .checkbox-group:focus {
     outline: 2px solid var(--dark-grey);
     border-radius: 3px;
+} */
+
+/* .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice label.checkbox {
+    padding: 8px;
+} */
+
+/* .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice label.checkbox:focus {
+    outline: 2px solid var(--dark-grey);
+    outline-offset: -4px;
+    border-radius: 3px;
+} */
+
+.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice div.checkbox .error-message {
+    margin: 0;
+    padding: 0;
+}
+
+.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice label.checkbox--error:before {
+    content: " ";
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    right: 4px;
+    bottom: 4px;
+    border-radius: var(--input-border-radius);
+    border: 2px solid var(--error-color);
+}
+
+.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice div.checkbox {
+    display: none;
+}
+.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice label.checkbox--error + div.checkbox {
+    display: initial;
 }
+.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice label.checkbox {
+    width: fit-content;
+    align-items: center;
+}
\ No newline at end of file
diff --git a/src/css/infobox.css b/src/css/infobox.css
index 2037f36..d98d079 100644
--- a/src/css/infobox.css
+++ b/src/css/infobox.css
@@ -13,13 +13,14 @@
     background-size: cover;
     min-width: 16px;
     min-height: 16px;
-    margin: 0px 6px 0 0;
+    margin: 0 6px 0 0;
 }
 .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .info-box .info-box__text {
     display: inline-block;
     font-weight: normal;
     font-size: var(--font-size-16);
     color: var(--black);
+    margin-top: 0.25rem;
 }
 
 /* Inline info boxes (for file upload errors etc...) */
diff --git a/src/css/success.css b/src/css/success.css
new file mode 100644
index 0000000..53494d2
--- /dev/null
+++ b/src/css/success.css
@@ -0,0 +1,4 @@
+.success_error_page_container__hr {
+    width: 70%;
+    margin: 40px auto;
+}
\ No newline at end of file
diff --git a/src/css/supportingdocs.css b/src/css/supportingdocs.css
new file mode 100644
index 0000000..ac94e9d
--- /dev/null
+++ b/src/css/supportingdocs.css
@@ -0,0 +1,43 @@
+.supporting-docs-container {
+    display: grid;
+    grid-gap: 1rem;
+}
+.supporting-docs-container .upload-box {
+    font-size: 1.2rem;
+    text-align: left;
+    cursor: pointer;
+}
+  
+  .supporting-doc-btn {
+    display: block;
+    
+    border: 1px solid #BBBCBC;
+    background: #FFF;
+    padding: 24px;
+    border-radius: 4px;
+
+  
+    /* span {
+      display: block;
+      font-size: 1rem;
+      padding: 20px 0 0;
+    } */
+  }
+  
+  @media (min-width: 640px) {
+    .supporting-docs-container {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .supporting-docs-container {
+      grid-template-columns: repeat(3, 1fr);
+    }
+  }
+  
+  @media (min-width: 1280px) {
+    .supporting-docs-container {
+      grid-template-columns: repeat(4, 1fr);
+    }
+  }
\ No newline at end of file
diff --git a/src/img/error.png b/src/img/error.png
new file mode 100644
index 0000000..cc4a668
--- /dev/null
+++ b/src/img/error.png