diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
index f553567e7..26c9e7b8e 100644
--- a/src/assets/scss/main.scss
+++ b/src/assets/scss/main.scss
@@ -901,6 +901,19 @@ tr:nth-child(odd) td.db-filled {
   }
 }
 
+.brapi-info {
+  .access-token {
+    @extend .mb-5;
+    font-family: monospace;
+    word-wrap: break-word;
+    overflow-x: auto;
+    white-space: pre-wrap;
+    white-space: -moz-pre-wrap;
+    white-space: -pre-wrap;
+    white-space: -o-pre-wrap;
+  }
+}
+
 label.environment-option-label {
   white-space: nowrap;
   overflow: hidden;
diff --git a/src/views/BrAPI/BrAPIInfo.vue b/src/views/BrAPI/BrAPIInfo.vue
index ef92b06cb..de820e9b5 100644
--- a/src/views/BrAPI/BrAPIInfo.vue
+++ b/src/views/BrAPI/BrAPIInfo.vue
@@ -16,15 +16,46 @@
   -->
 
 <template>
-  <div class="container">
+  <div class="container brapi-info">
     <div class="columns is-centered">
       <div class="column">
-        <h1 class="title">BrAPI Information</h1>
-        <div>
-          <strong>BrAPI Base URL: </strong><span class="has-text-link">{{getBrAPIRootPath()}}</span>
+
+      </div>
+      <div class="column is-half">
+        <div class="card">
+          <div class="card-content">
+            <h3 class="is-4 title">BrAPI Information</h3>
+            <div>
+              <strong>BrAPI Base URL: </strong><span class="has-text-link">{{getBrAPIRootPath()}}</span>
+            </div>
+            <div class="mt-5">
+              <qr-code v-bind:text="getBrAPIRootPath()" v-bind:size="100" v-bind:error-level="'L'"/>
+            </div>
+          </div>
         </div>
-        <div class="mt-5">
-          <qr-code v-bind:text="getBrAPIRootPath()" v-bind:size="100" v-bind:error-level="'L'"/>
+      </div>
+      <div class="column is-half">
+        <div class="card">
+          <div class="card-content">
+            <h3 class="title is-4">Access Token</h3>
+
+            <template v-if="accessToken != ''">
+              <pre class="access-token">{{accessToken}}</pre>
+
+              <div class="mb-5">
+                <strong>Expires at:</strong> {{tokenExpiration}}
+              </div>
+            </template>
+
+            <div class="has-text-centered">
+              <button class="button is-primary is-centered"
+                      v-on:click="generateAccessToken"
+                      v-bind:class="{'is-loading': generatingToken}"
+                      v-bind:disabled="generatingToken">
+                {{accessToken != '' ? 'Regenerate' : 'Generate'}} Access Token
+              </button>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -37,6 +68,8 @@
 import {Component, Vue} from 'vue-property-decorator'
 import {mapGetters} from "vuex";
 import { Program } from '@/breeding-insight/model/Program';
+import * as api from "@/util/api";
+import moment from 'moment';
 
 @Component({
   components: { },
@@ -49,9 +82,30 @@ import { Program } from '@/breeding-insight/model/Program';
 export default class BrapiInfo extends Vue {
 
   private activeProgram?: Program;
+  private accessToken?: string = '';
+  private generatingToken = false;
+  private tokenExpiration?: string;
 
   getBrAPIRootPath() {
     return `${process.env.VUE_APP_BI_API_V1_PATH}/programs/${this.activeProgram!.id}`;
   }
+
+  async generateAccessToken() {
+    this.generatingToken = true;
+    const config: any = {};
+    config.url = `${process.env.VUE_APP_BI_API_V1_PATH}/api-token`;
+    config.method = 'get';
+    try {
+      const res: any = await api.call(config);
+      this.accessToken = res.data.token;
+      const encodedTokenData = this.accessToken!.split(".")[1];
+      const tokenData = JSON.parse(atob(encodedTokenData));
+      this.tokenExpiration = moment(tokenData.exp*1000).format();
+    } catch (error) {
+      this.$emit('show-error-notification', 'Error while trying to generate access token');
+    } finally {
+      this.generatingToken = false;
+    }
+  }
 }
 </script>
\ No newline at end of file