diff --git a/src/assets/scss/components/_user-profile.scss b/src/assets/scss/components/_user-profile.scss
index ad229786..9bfd414c 100644
--- a/src/assets/scss/components/_user-profile.scss
+++ b/src/assets/scss/components/_user-profile.scss
@@ -134,6 +134,7 @@
     text-align: left;
     font-family: $header-font-family;
     font-size: 1.2rem;
+    display: inline-block;
 
     @include media-breakpoint-up(md) {
       text-align: right;
@@ -141,6 +142,8 @@
   }
 
   &__status {
+    margin-right: 1rem;
+
     &--confirmed {
       color: $default-green;
     }
diff --git a/src/client/pages/UserPage/components/UserProfile.tsx b/src/client/pages/UserPage/components/UserProfile.tsx
index c2e82100..bde8da5f 100644
--- a/src/client/pages/UserPage/components/UserProfile.tsx
+++ b/src/client/pages/UserPage/components/UserProfile.tsx
@@ -5,6 +5,8 @@ import React from 'react';
 import { Field, reduxForm, InjectedFormProps, WrappedFieldProps } from 'redux-form';
 import { CustomFieldProps } from '~/components/Fields';
 import FileField from '~/components/FileField';
+import { generateQRCodeURL } from '@Shared/QRCodes';
+import FA from 'react-fontawesome';
 
 export interface UserProfileFormData {
   gender: string;
@@ -111,6 +113,24 @@ class UserProfile extends React.Component<Props> {
     );
   }
 
+  /**
+   * Renders the QR code for the user if their status is "Confirmed".
+   * @param {Object} user The user to render for.
+   * @returns {Component}
+   */
+  renderUserQRCode = (user: TESCUser) => {
+    if (user.status !== UserStatus.Confirmed) {
+      return <span />;
+    }
+
+    return <a className={`btn px-2 mx-1 w-auto rounded-button rounded-button--small`}
+              href={generateQRCodeURL(user)}
+              target="_blank" >
+              <FA name="qrcode" className="mr-2" />
+              QR Code
+            </a>;
+  }
+
   /**
    * Renders the bussing status for the current user.
    * @param {Object} user The current user to render for.
@@ -349,15 +369,8 @@ class UserProfile extends React.Component<Props> {
       <form className="user-profile" onSubmit={handleSubmit}>
         <div className="user-profile__header">
           <div className="user-profile__hello row">
-            <div
-              className={`order-1 order-md-2 col-md-12 col-lg-4
-              user-profile__status-box`}
-            >
-              {this.renderUserBussing(user)}
-              {this.renderUserStatus(user.status)}
-            </div>
 
-            <div className="order-2 order-md-1 col-md-12 col-lg-8">
+            <div className="order-1 order-md-1 col-md-12 col-lg-6">
               <h1>Your {' '}
                 <a
                   href={user.event.homepage}
@@ -370,6 +383,15 @@ class UserProfile extends React.Component<Props> {
                 {' '} Application</h1>
               <h5 className={`pt-3 ${tPT ? 'd-block' : 'd-none'}`}>{tPT}</h5>
             </div>
+
+            <div
+              className={`order-2 order-md-2 col-md-12 col-lg-6
+              user-profile__status-box`}
+            >
+              {this.renderUserBussing(user)}
+              {this.renderUserStatus(user.status)}
+              {this.renderUserQRCode(user)}
+            </div>
           </div>
         </div>
         <div