diff --git a/backend/src/components/message.js b/backend/src/components/message.js
index 1bce6b6c..a5d7642a 100644
--- a/backend/src/components/message.js
+++ b/backend/src/components/message.js
@@ -16,7 +16,7 @@ function mapMessageObjectForFront(data) {
 
 function mapAssistanceRequestObjectForBack(data) {
   let assistanceRequest = new MappableObjectForBack(data, AssistanceRequestMappings).toJSON()
-  if (assistanceRequest['ofm_contact_method'] == '1') delete assistanceRequest['ofm_telephone']
+  if (assistanceRequest['ofm_contact_method'] === '1') delete assistanceRequest['ofm_telephone']
   assistanceRequest['ofm_request_category@odata.bind'] = `/ofm_request_categories(${data?.requestCategoryId})`
   assistanceRequest['ofm_contact@odata.bind'] = `/contacts(${data?.contactId})`
   assistanceRequest['ofm_facility_request_request'] = []
diff --git a/frontend/src/components/messages/MessagesTab.vue b/frontend/src/components/messages/MessagesTab.vue
index 0a42c600..16555a6e 100644
--- a/frontend/src/components/messages/MessagesTab.vue
+++ b/frontend/src/components/messages/MessagesTab.vue
@@ -1,17 +1,83 @@
 <template>
-  <v-container class="px-10">
-    <v-btn id="new-message" text @click="openNewRequestDialog()">
-      <v-icon class="mr-2">mdi-email-plus-outline</v-icon>
-      New message
-    </v-btn>
-    <NewRequestDialog :showNewRequestDialog="showNewRequestDialog" @closeNewRequestDialog="closeNewRequestDialog" />
+  <v-container class="pa-3">
+    <v-row>
+      <v-col cols="6" class="border-right pa-0">
+        <v-data-table :headers="headers" hover single-select height="500px" density="compact">
+          <template v-slot:top>
+            <div class="slot-top">
+              <div class="flex-container">
+                <div id="new-message" @click="toggleNewRequestDialog()" class="flex-item message-button">
+                  <v-icon class="icon">mdi-email-plus-outline</v-icon>
+                  <span class="icon-text">New message</span>
+                </div>
+                <div @click="false" class="flex-item message-button">
+                  <v-icon class="icon">mdi-email-outline</v-icon>
+                  <span class="icon-text">Mark unread</span>
+                </div>
+                <div @click="false" class="flex-item message-button">
+                  <v-icon class="icon">mdi-email-open-outline</v-icon>
+                  <span class="icon-text">Mark read</span>
+                </div>
+              </div>
+            </div>
+          </template>
+          <!-- <template #headers="{ columns, isSorted, getSortIcon, toggleSort }">
+            <tr>
+              <th v-for="column  in  columns" :key="column.key" @click="toggleSort(column)"
+                :style="{ width: column.width }">
+                <div v-if="column.title === null">
+                  <v-checkbox v-model="checkBoxToggleAllState" @click="toggleAllCheckBoxHandler" hide-details
+                    density="compact"></v-checkbox>
+                </div>
+                <div v-else>
+                  {{ column.title }}
+                  <v-icon v-if="isSorted(column)">{{ getSortIcon(column) }}</v-icon>
+                </div>
+              </th>
+            </tr>
+          </template>
+          <template #item="{ item, index }">
+            <tr @click="rowClickHandler(item, index)"
+              :class="{ 'unread-notification': !item.selectable.isRead, 'highlighted': index === rowClickedIndex }">
+              <td :class="{ 'highlighted': index === rowClickedIndex }">
+                <v-checkbox @click="checkBoxClickHandler" v-model="checkBoxListState[index]" hide-details
+                  density="compact"></v-checkbox>
+              </td>
+              <td :class="{ 'highlighted': index === rowClickedIndex }">{{ (item.selectable.isRead) ? 'Read' : 'Unread' }}
+              </td>
+              <td :class="{ 'highlighted': index === rowClickedIndex }">{{ item.selectable.subject }}</td>
+              <td :class="{ 'highlighted': index === rowClickedIndex }">{{ item.selectable.dateReceived }}</td>
+            </tr>
+          </template> -->
+          <template v-slot:bottom></template>
+        </v-data-table>
+      </v-col>
+      <v-col cols="6">
+        <v-card v-if="false" variant="flat">
+          <v-card-title class="card-title d-flex align-start flex-wrap">
+            <!-- <div class="d-flex align-center justify-space-between w-100">
+              <div class="d-flex align-center">
+                <span class="font-bold">From:</span>&nbsp;Operating Funding Model Program
+              </div>
+                <v-icon class="icon ml-3">mdi-email-outline</v-icon>
+                <span class="icon-text">Mark Unread</span>
+              </div>
+            </div> -->
+            <!-- <div class="mt-2 w-100">
+              {{ notificationSelected.selectable.subject }}
+            </div> -->
+          </v-card-title>
+          <hr />
+          <v-card-text></v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+    <NewRequestDialog class="pa-0" :show="showNewRequestDialog" @close="toggleNewRequestDialog" />
   </v-container>
 </template>
 
 <script>
-import { mapState } from 'pinia'
 import NewRequestDialog from '@/components/messages/NewRequestDialog.vue'
-import { useAuthStore } from '@/stores/auth'
 
 export default {
   name: 'MessagesTab',
@@ -19,20 +85,85 @@ export default {
   data() {
     return {
       showNewRequestDialog: false,
+      headers: [
+        { title: null, align: 'start', key: 'name', sortable: false, width: '8%' },
+        { title: 'Status', align: 'start', key: 'isRead', sortable: true, width: '10%' },
+        { title: 'Subject', align: 'start', key: 'subject', sortable: true, width: '30%' },
+        { title: 'Topic', align: 'start', key: 'topic', sortable: true, width: '20%' },
+        { title: 'Last updated', align: 'start', key: 'dateReceived', sortable: true, width: '30%' },
+      ],
     }
   },
-  computed: {
-    ...mapState(useAuthStore, ['userInfo']),
-  },
+  computed: {},
   methods: {
-    openNewRequestDialog() {
-      this.showNewRequestDialog = true
-    },
-    closeNewRequestDialog() {
-      this.showNewRequestDialog = false
+    toggleNewRequestDialog() {
+      this.showNewRequestDialog = !this.showNewRequestDialog
     },
   },
 }
 </script>
 
-<style scoped></style>
+<style scoped>
+.flex-container {
+  display: flex;
+  justify-content: space-evenly;
+}
+
+.flex-item {
+  display: flex;
+  align-items: left;
+}
+
+.icon {
+  font-size: 24px;
+  padding-right: 2px;
+  color: #6699cc;
+  cursor: pointer;
+}
+
+.icon-text {
+  color: #6699cc;
+  cursor: pointer;
+  transition: color 0.3s ease;
+  padding: 2px 0px;
+}
+
+.message-button:hover {
+  opacity: 0.8;
+}
+
+.font-bold {
+  font-weight: bold;
+}
+
+.slot-top {
+  padding-top: 8px;
+  padding-bottom: 8px;
+  border-bottom: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
+}
+
+.unread-notification {
+  font-size: small;
+  font-weight: bold;
+}
+
+.border-right {
+  border-right: 2px solid #6699cc;
+}
+
+hr {
+  border: 0;
+  height: 1px;
+  background: #6699cc;
+  background-image: linear-gradient(to right, #6699cc, #6699cc, #6699cc);
+}
+
+.card-title {
+  font-size: medium;
+  padding-left: 0px !important;
+}
+
+.highlighted {
+  background-color: #d4eaff !important;
+}
+</style>
diff --git a/frontend/src/components/messages/NewRequestConfirmationDialog.vue b/frontend/src/components/messages/NewRequestConfirmationDialog.vue
index 78ce8935..64b1d692 100644
--- a/frontend/src/components/messages/NewRequestConfirmationDialog.vue
+++ b/frontend/src/components/messages/NewRequestConfirmationDialog.vue
@@ -1,18 +1,18 @@
 <template>
-  <AppDialog v-model="isDisplayed" :title="dialogTitle" persistent max-width="40%" @closeDialog="closeDialog">
+  <AppDialog v-model="isDisplayed" title="Success" persistent max-width="40%" @close="closeDialog">
     <template #content>
-      <v-row>
+      <v-row class="mb-2">
         <v-col align="center">
-          <p class="pt-4 text-h5">Your message has been submitted.</p>
-          <p class="pt-4 text-h5">Reference: {{ referenceNumber }}</p>
-          <p class="pt-4 text-h5">Typical response times are 3-5 business days.</p>
+          <p class="pt-4 text-h6">Your message has been submitted.</p>
+          <p class="pt-4 text-h6">Reference: {{ referenceNumber }}</p>
+          <p class="pt-4 text-h6">Typical response times are 3-5 business days.</p>
         </v-col>
       </v-row>
     </template>
     <template #button>
       <v-row justify="space-around">
-        <AppButton id="return-home-button" :isPrimary="false" size="large" width="200px" @click="returnToHome()">Return to home</AppButton>
-        <AppButton id="view-messages-button" size="large" width="200px" @click="viewMessages()">View messages</AppButton>
+        <AppButton id="return-home-button" :primary="false" size="large" width="200px" :to="{ name: 'home' }">Return to home</AppButton>
+        <AppButton id="view-messages-button" size="large" width="200px" @click="closeDialog()">View messages</AppButton>
       </v-row>
     </template>
   </AppDialog>
@@ -21,13 +21,12 @@
 <script>
 import AppButton from '../ui/AppButton.vue'
 import AppDialog from '../ui/AppDialog.vue'
-import { PATHS } from '@/utils/constants'
 
 export default {
   name: 'NewRequestConfirmationDialog',
   components: { AppButton, AppDialog },
   props: {
-    showNewRequestConfirmationDialog: {
+    show: {
       type: Boolean,
       default: false,
     },
@@ -36,30 +35,23 @@ export default {
       default: '',
     },
   },
-  emits: ['closeNewRequestConfirmationDialog'],
+  emits: ['close'],
   data() {
     return {
       isDisplayed: false,
-      dialogTitle: 'Success',
     }
   },
+  computed: {},
   watch: {
-    showNewRequestConfirmationDialog: {
+    show: {
       handler(value) {
         this.isDisplayed = value
       },
     },
   },
   methods: {
-    returnToHome() {
-      this.closeDialog()
-      this.$router.push(PATHS.HOME)
-    },
-    viewMessages() {
-      this.closeDialog()
-    },
     closeDialog() {
-      this.$emit('closeNewRequestConfirmationDialog')
+      this.$emit('close')
     },
   },
 }
diff --git a/frontend/src/components/messages/NewRequestDialog.vue b/frontend/src/components/messages/NewRequestDialog.vue
index 0e567ca2..a183bc86 100644
--- a/frontend/src/components/messages/NewRequestDialog.vue
+++ b/frontend/src/components/messages/NewRequestDialog.vue
@@ -1,10 +1,10 @@
 <template>
   <v-container>
-    <AppDialog v-model="isDisplayed" :title="dialogTitle" persistent max-width="70%" @closeDialog="closeNewRequestDialog">
+    <AppDialog v-model="isDisplayed" title="New request" persistent max-width="70%" @close="closeNewRequestDialog">
       <template #content>
         <v-form ref="newRequestForm" v-model="newRequestModel.isFormComplete" class="px-12 mx-8">
           <v-row no-gutters class="mt-4">
-            <v-col class="v-col-12 v-col-md-3 v-col-xl-2 blueText pt-3">
+            <v-col class="v-col-12 v-col-md-3 v-col-xl-2 blue-text pt-3">
               <strong>Topic:</strong>
             </v-col>
             <v-col class="v-col-12 v-col-md-9 v-col-xl-10">
@@ -19,7 +19,7 @@
             </v-col>
           </v-row>
           <v-row no-gutters class="mt-2">
-            <v-col class="v-col-12 v-col-md-3 v-col-xl-2 blueText pt-3">
+            <v-col class="v-col-12 v-col-md-3 v-col-xl-2 blue-text pt-3">
               <strong>Subject:</strong>
             </v-col>
             <v-col class="v-col-12 v-col-md-9 v-col-xl-10">
@@ -27,7 +27,7 @@
             </v-col>
           </v-row>
           <v-row no-gutters class="mt-2">
-            <v-col class="v-col-12 blueText pb-0">
+            <v-col class="v-col-12 blue-text pb-0">
               <strong>Request description:</strong>
             </v-col>
             <v-col class="v-col-12">
@@ -35,7 +35,7 @@
             </v-col>
           </v-row>
           <v-row no-gutters class="mt-2">
-            <v-col class="v-col-12 v-col-md-3 v-col-xl-2 blueText pt-3">
+            <v-col class="v-col-12 v-col-md-3 v-col-xl-2 blue-text pt-3">
               <strong>Facility(s):</strong>
             </v-col>
             <v-col class="v-col-12 v-col-md-9 v-col-xl-10">
@@ -50,18 +50,18 @@
                 item-value="facilityId"></v-select>
             </v-col>
           </v-row>
-          <v-row no-gutters align="center" class="mt-2">
-            <div class="blueText mr-8">
+          <v-row no-gutters align="center">
+            <div class="blue-text mr-8">
               <strong>Supporting documents</strong>
               (optional):
             </div>
-            <AppButton id="upload-document" :isPrimary="false" @click="false">
+            <AppButton id="upload-document" :primary="false" @click="false">
               <v-icon class="mr-3">mdi-tray-arrow-up</v-icon>
               Upload
             </AppButton>
           </v-row>
           <v-row no-gutters class="mt-2">
-            <v-col class="v-col-12 blueText pb-0">
+            <v-col class="v-col-12 blue-text pb-0">
               <strong>Preferred method of contact:</strong>
             </v-col>
             <v-col class="v-col-12">
@@ -72,7 +72,7 @@
             </v-col>
           </v-row>
           <v-row v-if="newRequestModel.contactMethod == '2'" no-gutters class="mt-2">
-            <v-col class="v-col-12 v-col-md-3 v-col-xl-2 blueText pt-3">
+            <v-col class="v-col-12 v-col-md-3 v-col-xl-2 blue-text pt-3">
               <strong>Business phone:</strong>
             </v-col>
             <v-col class="v-col-12 v-col-md-9 v-col-xl-10">
@@ -83,15 +83,12 @@
       </template>
       <template #button>
         <v-row justify="space-around">
-          <AppButton id="cancel-new-request" :isPrimary="false" size="large" width="200px" @click="closeNewRequestDialog()" :loading="isLoading">Cancel</AppButton>
-          <AppButton id="submit-new-request" size="large" width="200px" @click="submitNewRequest()" :loading="isLoading">Submit</AppButton>
+          <AppButton id="cancel-new-request" :primary="false" size="large" width="200px" @click="closeNewRequestDialog()" :loading="isLoading">Cancel</AppButton>
+          <AppButton id="submit-new-request" size="large" width="200px" @click="submit()" :loading="isLoading">Submit</AppButton>
         </v-row>
       </template>
     </AppDialog>
-    <NewRequestConfirmationDialog
-      :referenceNumber="referenceNumber"
-      :showNewRequestConfirmationDialog="showNewRequestConfirmationDialog"
-      @closeNewRequestConfirmationDialog="closeNewRequestConfirmationDialog" />
+    <NewRequestConfirmationDialog :referenceNumber="referenceNumber" :show="showNewRequestConfirmationDialog" @close="toggleNewRequestConfirmationDialog" />
   </v-container>
 </template>
 
@@ -109,15 +106,14 @@ export default {
   name: 'NewRequestDialog',
   components: { AppButton, AppDialog, NewRequestConfirmationDialog },
   props: {
-    showNewRequestDialog: {
+    show: {
       type: Boolean,
       default: false,
     },
   },
-  emits: ['closeNewRequestDialog'],
+  emits: ['close'],
   data() {
     return {
-      dialogTitle: 'New request',
       newRequestModel: {},
       rules,
       isDisplayed: false,
@@ -134,17 +130,17 @@ export default {
     },
   },
   watch: {
-    showNewRequestDialog: {
+    show: {
       handler(value) {
         this.isDisplayed = value
       },
     },
   },
-  beforeMount() {
+  created() {
     this.setUpDefaultNewRequestModel()
   },
   methods: {
-    ...mapActions(useMessagesStore, ['submitNewAssistanceRequest']),
+    ...mapActions(useMessagesStore, ['createNewAssistanceRequest']),
 
     setUpDefaultNewRequestModel() {
       this.newRequestModel = {
@@ -162,18 +158,17 @@ export default {
 
     closeNewRequestDialog() {
       this.resetForm()
-      this.$emit('closeNewRequestDialog')
+      this.$emit('close')
     },
 
-    async submitNewRequest() {
-      console.log(this.newRequestModel)
+    async submit() {
       this.$refs.newRequestForm?.validate()
       if (this.newRequestModel?.isFormComplete) {
         try {
           this.isLoading = true
-          let response = await this.submitNewAssistanceRequest(this.newRequestModel)
+          let response = await this.createNewAssistanceRequest(this.newRequestModel)
           this.referenceNumber = response?.referenceNumber
-          this.openNewRequestConfirmationDialog()
+          this.toggleNewRequestConfirmationDialog()
         } catch (error) {
           console.log(`Failed to create a new Assistance Request - ${error}`)
           throw error
@@ -184,19 +179,15 @@ export default {
       }
     },
 
-    openNewRequestConfirmationDialog() {
-      this.showNewRequestConfirmationDialog = true
-    },
-
-    closeNewRequestConfirmationDialog() {
-      this.showNewRequestConfirmationDialog = false
+    toggleNewRequestConfirmationDialog() {
+      this.showNewRequestConfirmationDialog = !this.showNewRequestConfirmationDialog
     },
   },
 }
 </script>
 
 <style scoped>
-.blueText {
+.blue-text {
   color: #003366;
   font-size: 125%;
 }
diff --git a/frontend/src/components/ui/AppButton.vue b/frontend/src/components/ui/AppButton.vue
index 7f4faf6a..a330b9b3 100644
--- a/frontend/src/components/ui/AppButton.vue
+++ b/frontend/src/components/ui/AppButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-btn :class="[isPrimary ? 'BC-Gov-PrimaryButton' : 'BC-Gov-OutlinedButton']" v-bind="$attrs">
+  <v-btn :class="[primary ? 'BC-Gov-PrimaryButton' : 'BC-Gov-SecondaryButton']" v-bind="$attrs">
     <slot />
     <v-icon v-if="$attrs.icon">{{ $attrs.icon }}</v-icon>
   </v-btn>
@@ -8,7 +8,7 @@
 export default {
   inheritAttrs: true,
   props: {
-    isPrimary: {
+    primary: {
       type: Boolean,
       default: true,
     },
@@ -55,32 +55,29 @@ export default {
   opacity: 1;
 }
 
-.BC-Gov-OutlinedButton {
-  background-color: white;
-  border: 1px solid #003366;
-  color: #003366;
+.BC-Gov-SecondaryButton {
+  background: none;
+  border-radius: 4px;
+  border: 2px solid #003366;
   margin: 8px;
-  /* ma-2 */
   padding: 0 12px;
-  /* px-3 */
-  /* padding: 12px 32px;
-  text-align: center;
+  /* text-align: center;
   text-decoration: none;
   display: block;
   font-size: 18px;
-  font-family:
-    ‘BCSans’,
-    ‘Noto Sans’,
-    Verdana,
-    Arial,
-    sans-serif;
+  Font-family: ‘BCSans’, ‘Noto Sans’, Verdana, Arial, sans-serif;
   font-weight: 700;
   letter-spacing: 1px;
   cursor: pointer; */
+  color: #003366;
 }
-
-.BC-Gov-OutlinedButton:hover {
-  text-decoration: underline;
+.BC-Gov-SecondaryButton:hover {
   opacity: 0.8;
+  text-decoration: underline;
+  background-color: #003366;
+  color: #ffffff;
+}
+.BC-Gov-SecondaryButton:active {
+  opacity: 1;
 }
 </style>
diff --git a/frontend/src/components/ui/AppDialog.vue b/frontend/src/components/ui/AppDialog.vue
index 74583419..d0fd6e83 100644
--- a/frontend/src/components/ui/AppDialog.vue
+++ b/frontend/src/components/ui/AppDialog.vue
@@ -1,24 +1,20 @@
 <template>
   <v-dialog>
-    <template #default="{ isActive }">
-      <v-card>
-        <div class="pb-3" style="background-color: #003366">
-          <v-card-title class="text-white px-10">
-            <v-row no-gutters justify="space-between" align="center">
-              <h3>{{ title }}</h3>
-              <v-btn variant="text" icon="mdi-window-close" @click="closeDialog()" />
-            </v-row>
-          </v-card-title>
-        </div>
-        <div style="background-color: #ffc72c; padding: 2px"></div>
-        <v-card-text class="mb-4">
-          <slot name="content"></slot>
-        </v-card-text>
-        <v-card-actions class="mb-4">
-          <slot name="button"></slot>
-        </v-card-actions>
-      </v-card>
-    </template>
+    <v-card>
+      <v-card-title class="dialog-title">
+        <v-row no-gutters justify="space-between" align="center">
+          <h3>{{ title }}</h3>
+          <v-btn variant="text" icon="mdi-window-close" @click="$emit('close')" />
+        </v-row>
+      </v-card-title>
+      <div class="yellow-line"></div>
+      <v-card-text>
+        <slot name="content"></slot>
+      </v-card-text>
+      <v-card-actions class="mb-4">
+        <slot name="button"></slot>
+      </v-card-actions>
+    </v-card>
   </v-dialog>
 </template>
 <script>
@@ -30,11 +26,16 @@ export default {
       default: '',
     },
   },
-  emits: ['closeDialog'],
-  methods: {
-    closeDialog() {
-      this.$emit('closeDialog')
-    },
-  },
 }
 </script>
+<style scoped>
+.dialog-title {
+  background-color: #003366;
+  color: white;
+  padding: 10px 30px;
+}
+.yellow-line {
+  background-color: #ffc72c;
+  padding: 2px;
+}
+</style>
diff --git a/frontend/src/stores/app.js b/frontend/src/stores/app.js
index 7c3d0a15..1093cd2a 100644
--- a/frontend/src/stores/app.js
+++ b/frontend/src/stores/app.js
@@ -23,14 +23,11 @@ export const useAppStore = defineStore('app', {
     config: '',
   }),
   actions: {
-    setRequestCategories(requestCategories) {
-      this.requestCategories = requestCategories
-    },
     async getLookupInfo() {
       if (localStorage.getItem('jwtToken')) {
         // DONT Call api if there is no token.
         const lookupInfo = await ApiService.getLookupInfo()
-        this.setRequestCategories(lookupInfo.data?.requestCategories)
+        this.requestCategories = lookupInfo?.data?.requestCategories
       }
     },
     async setConfig(config) {
diff --git a/frontend/src/stores/messages.js b/frontend/src/stores/messages.js
index b591188f..21a2caa4 100644
--- a/frontend/src/stores/messages.js
+++ b/frontend/src/stores/messages.js
@@ -61,7 +61,7 @@ export const useMessagesStore = defineStore('messages', {
         console.log(error)
       }
     },
-    async submitNewAssistanceRequest(payload) {
+    async createNewAssistanceRequest(payload) {
       try {
         let response = await ApiService.apiAxios.post(ApiRoutes.MESSAGE + '/newAssistanceRequest', payload)
         return response?.data
diff --git a/frontend/src/utils/constants.js b/frontend/src/utils/constants.js
index 1a28f901..bd7336a4 100644
--- a/frontend/src/utils/constants.js
+++ b/frontend/src/utils/constants.js
@@ -18,10 +18,6 @@ export const ApiRoutes = Object.freeze({
   NOTICE: baseRoot + '/notifications',
 })
 
-export const PATHS = {
-  HOME: '/',
-}
-
 export const ACCOUNT_TYPE = Object.freeze({
   FACILITY: 100000001,
   ORGANIZATION: 100000000,