diff --git a/frontend/src/assets/main.scss b/frontend/src/assets/main.scss
index 7360c638..58ca7af5 100644
--- a/frontend/src/assets/main.scss
+++ b/frontend/src/assets/main.scss
@@ -7,6 +7,16 @@
   font-weight: normal;
 }
 
+a,
+a:visited {
+  color: $bcbox-link-text;
+  text-decoration: underline;
+  &:hover {
+    color: $bcbox-link-text-hover;
+    text-decoration: none;
+  }
+}
+
 .truncate {
   max-width: 1px;
   white-space: nowrap;
@@ -62,7 +72,7 @@ td .wrap-block{ width: inherit; }
       padding-bottom: 0;
 
       .svg-inline--fa {
-        color: $bcbox-icon-primary;
+        color: $bcbox-primary;
         font-size: 1.8rem;
         padding-right: .75rem;
         padding-top: .15rem;
diff --git a/frontend/src/assets/primevue.scss b/frontend/src/assets/primevue.scss
index a992bcd0..0ff31bc0 100644
--- a/frontend/src/assets/primevue.scss
+++ b/frontend/src/assets/primevue.scss
@@ -16,6 +16,35 @@
     background-color: transparent !important;
   }
 
+  &.p-datatable-striped .p-datatable-tbody > tr {
+    &:nth-child(even) {
+      background-color: $bcbox-table-stripe-background;
+    }
+  }
+
+  tbody {
+    tr {
+      &.p-highlight {
+        background: $bcbox-highlight-background !important;
+      }
+
+      &:focus {
+        outline: none !important;
+      }
+    }
+  }
+
+  .p-checkbox {
+    .p-checkbox-box.p-highlight {
+      background-color: $bcbox-primary;
+      border-color: $bcbox-primary !important;
+
+      &:hover {
+        background-color: darken($bcbox-primary, 20%) !important;
+      }
+    }
+  }
+
   .p-column-title {
     font-weight: bold;
   }
@@ -29,3 +58,55 @@
     margin-left: 1rem;
   }
 }
+
+// Primary color overrides for buttons and action items (checkboxes etc)
+// Note this could be eventually replaced by a custom themeing (which has JUST been introduced in Primevue)
+// once it is more settled implementation-wise
+.p-button {
+  &:not(
+    .p-button-secondary,
+    .p-button-success,
+    .p-button-info,
+    .p-button-warning,
+    .p-button-help,
+    .p-button-danger
+    ) {
+    color: $bcbox-primary !important;
+
+    &:not(.p-button-outlined, .p-button-text) {
+      background-color: $bcbox-primary;
+      border-color: $bcbox-primary;
+      color: $bcbox-outline-on-primary !important;
+    }
+  }
+}
+
+.p-checkbox,
+.p-radiobutton {
+  &.p-checkbox-checked,
+  &.p-radiobutton-checked {
+    .p-checkbox-box,
+    .p-radiobutton-box {
+      background-color: $bcbox-primary;
+      border-color: $bcbox-primary !important;
+
+      &:hover {
+        background-color: darken($bcbox-primary, 20%) !important;
+      }
+    }
+  }
+}
+
+.p-inputswitch.p-inputswitch-checked {
+  .p-inputswitch-slider {
+    background-color: $bcbox-primary;
+  }
+
+  &:not(.p-disabled) {
+    &:hover {
+      .p-inputswitch-slider {
+        background-color: darken($bcbox-primary, 10%) !important;
+      }
+    }
+  }
+}
diff --git a/frontend/src/assets/variables.scss b/frontend/src/assets/variables.scss
index 578b1f03..de191499 100644
--- a/frontend/src/assets/variables.scss
+++ b/frontend/src/assets/variables.scss
@@ -1,2 +1,9 @@
 // General font/etc colors
-$bcbox-icon-primary: #036;
+$bcbox-primary: #036;
+$bcbox-link-text: #1a5a96;
+$bcbox-link-text-hover: #00f;
+$bcbox-outline-on-primary: #fff;
+
+// Panel/row/etc backgrounds
+$bcbox-highlight-background: #d9e1e8;
+$bcbox-table-stripe-background: #f2f2f2;
diff --git a/frontend/src/components/bucket/BucketList.vue b/frontend/src/components/bucket/BucketList.vue
index 8f6c9a6f..6f94e143 100644
--- a/frontend/src/components/bucket/BucketList.vue
+++ b/frontend/src/components/bucket/BucketList.vue
@@ -119,10 +119,6 @@ h1 {
   font-weight: bold;
 }
 
-h3 {
-  font-weight: bold;
-}
-
 button {
   text-indent: 10px;
 }
diff --git a/frontend/src/components/bucket/BucketPermission.vue b/frontend/src/components/bucket/BucketPermission.vue
index 96e12ccf..52cafe92 100644
--- a/frontend/src/components/bucket/BucketPermission.vue
+++ b/frontend/src/components/bucket/BucketPermission.vue
@@ -191,7 +191,7 @@ onMounted( async () => {
         <template #body="{ data }">
           <Button
             class="p-button-lg p-button-text"
-            style="color: red"
+            severity="danger"
             @click="removeBucketUser(data.userId)"
           >
             <font-awesome-icon icon="fa-solid fa-user-xmark" />
diff --git a/frontend/src/components/bucket/BucketTable.vue b/frontend/src/components/bucket/BucketTable.vue
index 60cf11be..c781ed55 100644
--- a/frontend/src/components/bucket/BucketTable.vue
+++ b/frontend/src/components/bucket/BucketTable.vue
@@ -70,7 +70,9 @@ const checkUserManageBucket = (bucket: Bucket) => {
       </template>
       <Column header-style="width: 1%">
         <template #body>
-          <font-awesome-icon icon="fa-solid fa-box-open" />
+          <span class="row-head">
+            <font-awesome-icon icon="fa-solid fa-box-open" />
+          </span>
         </template>
       </Column>
       <Column
@@ -149,3 +151,9 @@ const checkUserManageBucket = (bucket: Bucket) => {
     </Dialog>
   </div>
 </template>
+
+<style scoped lang="scss">
+.row-head {
+  color: $bcbox-primary;
+}
+</style>
diff --git a/frontend/src/components/form/GridRow.vue b/frontend/src/components/form/GridRow.vue
index 80a40dbd..c93ab9f7 100644
--- a/frontend/src/components/form/GridRow.vue
+++ b/frontend/src/components/form/GridRow.vue
@@ -15,13 +15,24 @@ const props = withDefaults(defineProps<Props>(), {
 <template>
   <div class="col-12">
     <div class="grid">
-      <div v-if="props.value && props.label" class="col-fixed">{{ label }}:</div>
-      <div v-if="props.value && props.link" class="col wrap-block w-9">
+      <div
+        v-if="props.value && props.label"
+        class="col-fixed"
+      >
+        {{ label }}:
+      </div>
+      <div
+        v-if="props.value && props.link"
+        class="col wrap-block w-9"
+      >
         <router-link :to="props.link">
           {{ props.value }}
         </router-link>
       </div>
-      <div v-if="props.value && !props.link" class="col wrap-block w-9">
+      <div
+        v-if="props.value && !props.link"
+        class="col wrap-block w-9"
+      >
         {{ props.value }}
       </div>
     </div>
diff --git a/frontend/src/components/layout/LoginButton.vue b/frontend/src/components/layout/LoginButton.vue
index 80554d06..ec2a6f8d 100644
--- a/frontend/src/components/layout/LoginButton.vue
+++ b/frontend/src/components/layout/LoginButton.vue
@@ -23,16 +23,24 @@ function logout() {
 <template>
   <Button
     v-if="!getIsAuthenticated"
-    primary
+    severity="secondary"
+    outlined
     @click="login()"
   >
     Log in
   </Button>
   <Button
     v-else
-    primary
+    severity="secondary"
+    outlined
     @click="logout()"
   >
     Log out
   </Button>
 </template>
+
+<style scoped>
+button {
+  color: white !important;
+}
+</style>
diff --git a/frontend/src/components/layout/Navbar.vue b/frontend/src/components/layout/Navbar.vue
index b26e0adf..4629f79c 100644
--- a/frontend/src/components/layout/Navbar.vue
+++ b/frontend/src/components/layout/Navbar.vue
@@ -86,7 +86,6 @@ const { getIsAuthenticated } = storeToRefs(useAuthStore());
           }
         }
         & ~ li {
-          border-left: 1px solid #9b9b9b;
           margin-left: -0.6rem;
         }
       }
diff --git a/frontend/src/components/layout/ProgressLoader.vue b/frontend/src/components/layout/ProgressLoader.vue
index 8e1dd4be..6fb748a7 100644
--- a/frontend/src/components/layout/ProgressLoader.vue
+++ b/frontend/src/components/layout/ProgressLoader.vue
@@ -4,27 +4,30 @@ import { storeToRefs } from 'pinia';
 import { ProgressBar } from '@/lib/primevue';
 import { useAppStore } from '@/store';
 
-
 // Store
 const appStore = useAppStore();
 const { getLoadingMode, getLoadingValue } = storeToRefs(appStore);
 </script>
 
 <template>
-  <ProgressBar
-    :mode="getLoadingMode"
-    :show-value="false"
-    :value="getLoadingValue"
-  />
+  <div class="app-loader">
+    <ProgressBar
+      :mode="getLoadingMode"
+      :show-value="false"
+      :value="getLoadingValue"
+    />
+  </div>
 </template>
 
 <style lang="scss" scoped>
-.p-progressbar {
-  left: 0;
-  height: 0.1rem;
-  pointer-events: none;
-  position: sticky;
-  top: 0;
-  z-index: 1031
+.app-loader {
+  position: fixed;
+  width: 100%;
+  z-index: 999;
+
+  .p-progressbar {
+    height: 0.15rem;
+    pointer-events: none;
+  }
 }
 </style>
diff --git a/frontend/src/components/object/ObjectFileDetails.vue b/frontend/src/components/object/ObjectFileDetails.vue
index 36b2f003..42edb68d 100644
--- a/frontend/src/components/object/ObjectFileDetails.vue
+++ b/frontend/src/components/object/ObjectFileDetails.vue
@@ -92,7 +92,7 @@ watch( [props, getObjects], () => {
 <template>
   <div v-if="obj">
     <div class="flex justify-content-start">
-      <div class="flex col align-items-center pl-0">
+      <div class="flex col align-items-center pl-0 heading">
         <font-awesome-icon
           icon="fa-solid fa-circle-info"
           style="font-size: 2rem"
@@ -170,3 +170,9 @@ watch( [props, getObjects], () => {
     <ObjectPermission :object-id="permissionsObjectId" />
   </Dialog>
 </template>
+
+<style scoped lang="scss">
+.heading svg {
+  color: $bcbox-primary;
+}
+</style>
diff --git a/frontend/src/components/object/ObjectMetadata.vue b/frontend/src/components/object/ObjectMetadata.vue
index d43ce973..3bfe98d6 100644
--- a/frontend/src/components/object/ObjectMetadata.vue
+++ b/frontend/src/components/object/ObjectMetadata.vue
@@ -39,7 +39,9 @@ watch(props, () => {
 <template>
   <div class="grid details-grid grid-nogutter mb-2">
     <div class="col-12">
-      <h2 class="font-bold">Metadata</h2>
+      <h2 class="font-bold">
+        Metadata
+      </h2>
     </div>
     <div>
       <DataTable
@@ -47,9 +49,12 @@ watch(props, () => {
         :value="objectMetadata.metadata"
         responsive-layout="scroll"
       >
-        <Column field="key" header="Key">
+        <Column
+          field="key"
+          header="Key"
+        >
           <template #body="{ data }">
-            <div >
+            <div>
               {{ data.key }}:
             </div>
           </template>
diff --git a/frontend/src/components/object/ObjectPermission.vue b/frontend/src/components/object/ObjectPermission.vue
index 83a76c82..a61481b6 100644
--- a/frontend/src/components/object/ObjectPermission.vue
+++ b/frontend/src/components/object/ObjectPermission.vue
@@ -175,7 +175,7 @@ onMounted(() => {
         <template #body="{ data }">
           <Button
             class="p-button-lg p-button-text"
-            style="color: red"
+            severity="danger"
             @click="removeObjectUser(data.userId)"
           >
             <font-awesome-icon icon="fa-solid fa-user-xmark" />
diff --git a/frontend/src/components/object/ObjectProperties.vue b/frontend/src/components/object/ObjectProperties.vue
index 22e414a5..d35bf1a0 100644
--- a/frontend/src/components/object/ObjectProperties.vue
+++ b/frontend/src/components/object/ObjectProperties.vue
@@ -57,10 +57,10 @@ watch( props, () => {
 
 <template>
   <div class="grid details-grid grid-nogutter mb-2">
-      <div class="col-12">
-        <h2 class="font-bold">
-          Properties
-        </h2>
+    <div class="col-12">
+      <h2 class="font-bold">
+        Properties
+      </h2>
     </div>
 
     <GridRow
diff --git a/frontend/src/components/object/ObjectSidebar.vue b/frontend/src/components/object/ObjectSidebar.vue
index 21ce15d7..5a58a8aa 100644
--- a/frontend/src/components/object/ObjectSidebar.vue
+++ b/frontend/src/components/object/ObjectSidebar.vue
@@ -35,7 +35,7 @@ watch( props, () => {
 
 <template>
   <div class="flex justify-content-start">
-    <div class="flex col align-items-center">
+    <div class="flex col align-items-center heading">
       <font-awesome-icon
         icon="fa-solid fa-circle-info"
         style="font-size: 2rem"
@@ -98,4 +98,7 @@ button {
   margin-top: 15px;
   text-indent: 10px;
 }
+.heading svg{
+  color: $bcbox-primary;
+}
 </style>
diff --git a/frontend/src/views/DeveloperView.vue b/frontend/src/views/DeveloperView.vue
index da09c850..92efae12 100644
--- a/frontend/src/views/DeveloperView.vue
+++ b/frontend/src/views/DeveloperView.vue
@@ -29,7 +29,10 @@ const { getConfig } = storeToRefs(useConfigStore());
         :to-copy="getAccessToken"
       />
     </div>
-    {{ getAccessToken }}
+
+    <div class="wrap-block">
+      {{ getAccessToken }}
+    </div>
 
     <div class="flex mt-3">
       <h3>Profile</h3>
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index 2afcd627..4f60311a 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -18,20 +18,15 @@ const { getConfig } = storeToRefs(useConfigStore());
   </Message>
 
   <h3 v-if="!getIsAuthenticated">
-    Please login to continue.
+    Please log in to continue.
   </h3>
   <h3 v-else>
     Welcome to BCBox.
   </h3>
-  <img src="@/assets/images/bcboxy.png" />
 </template>
 
 <style lang="scss" scoped>
 h1 {
   font-weight: bold;
 }
-
-h3 {
-  font-weight: bold;
-}
 </style>
diff --git a/frontend/src/views/list/ListObjectsView.vue b/frontend/src/views/list/ListObjectsView.vue
index 253d9730..a929cbf5 100644
--- a/frontend/src/views/list/ListObjectsView.vue
+++ b/frontend/src/views/list/ListObjectsView.vue
@@ -74,3 +74,9 @@ onMounted( () => {
     <ObjectList :bucket-id="props.bucketId" />
   </div>
 </template>
+
+<style scoped lang="scss">
+h2 svg{
+  color: $bcbox-primary;
+}
+</style>