diff --git a/satellite/admin/back-office/ui/src/components/AccountProjectsTableComponent.vue b/satellite/admin/back-office/ui/src/components/AccountProjectsTableComponent.vue
index 3c4abf8deb41..b73e83a3370a 100644
--- a/satellite/admin/back-office/ui/src/components/AccountProjectsTableComponent.vue
+++ b/satellite/admin/back-office/ui/src/components/AccountProjectsTableComponent.vue
@@ -28,8 +28,9 @@
                         <v-icon icon="mdi-dots-horizontal" />
                     </v-btn>
                     <v-chip
-                        variant="text" color="default" size="small" router-link to="/project-details"
+                        variant="text" color="default" size="small"
                         class="font-weight-bold pl-1 ml-1"
+                        @click="selectProject(item.raw.id)"
                     >
                         <template #prepend>
                             <svg class="mr-2" width="24" height="24" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -134,6 +135,7 @@
 
 <script setup lang="ts">
 import { computed, ref } from 'vue';
+import { useRouter } from 'vue-router';
 import { VCard, VTextField, VBtn, VIcon, VTooltip, VChip } from 'vuetify/components';
 import { VDataTable } from 'vuetify/labs/components';
 
@@ -165,6 +167,7 @@ type ProjectTableSlotProps = { item: { raw: ProjectTableItem } };
 const search = ref<string>('');
 const selected = ref<string[]>([]);
 const sortBy = ref([{ key: 'name', order: 'asc' }]);
+const router = useRouter();
 
 const headers = [
     { title: 'Name', key: 'name' },
@@ -210,6 +213,14 @@ const projects = computed<ProjectTableItem[]>(() => {
     }));
 });
 
+/**
+* Selects the project and navigates to the project dashboard.
+*/
+async function selectProject(id: string): Promise<void> {
+    await appStore.selectProject(id);
+    router.push('/project-details');
+}
+
 function getPercentColor(percent: number) {
     if (percent >= 99) {
         return 'error';
diff --git a/satellite/admin/back-office/ui/src/components/UsageProgressComponent.vue b/satellite/admin/back-office/ui/src/components/UsageProgressComponent.vue
index 54ba40ec1d07..1354a35fb08d 100644
--- a/satellite/admin/back-office/ui/src/components/UsageProgressComponent.vue
+++ b/satellite/admin/back-office/ui/src/components/UsageProgressComponent.vue
@@ -6,23 +6,23 @@
         <v-card-item class="pt-1">
             <v-row>
                 <v-col cols="12" class="pb-1">
-                    <v-progress-linear :color="color" :model-value="progress" rounded height="6" />
+                    <v-progress-linear :color="color" :model-value="percentage" rounded height="6" />
                 </v-col>
 
                 <v-col cols="6">
                     <p class="text-medium-emphasis">Used</p>
-                    <h4>{{ used }}</h4>
+                    <h4>{{ onlyLimit ? "---" : format(used || 0) }}</h4>
                     <v-divider class="my-3" />
                     <p class="text-medium-emphasis">Percentage</p>
-                    <h4 class="">{{ percentage }}</h4>
+                    <h4 class="">{{ onlyLimit ? "---" : percentage+'%' }}</h4>
                 </v-col>
 
                 <v-col cols="6">
                     <p class="text-right text-medium-emphasis">Available</p>
-                    <h4 class="text-right">{{ available }}</h4>
+                    <h4 class="text-right">{{ onlyLimit ? "---" : format(available) }}</h4>
                     <v-divider class="my-3" />
                     <p class="text-right text-medium-emphasis">Limit</p>
-                    <h4 class="text-right">{{ limit }}</h4>
+                    <h4 class="text-right">{{ format(limit) }}</h4>
                 </v-col>
 
                 <v-divider />
@@ -36,6 +36,7 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
 import {
     VCard,
     VCardItem,
@@ -46,13 +47,50 @@ import {
     VBtn,
 } from 'vuetify/components';
 
+import { Dimensions, Size } from '@/utils/bytesSize';
+
 const props = defineProps<{
     title: string;
-    progress: number;
-    used: string;
-    limit: string;
-    available: string;
-    percentage: string;
+    isBytes?: boolean;
+    onlyLimit?: boolean;
+    used?: number;
+    limit: number;
     color: string;
 }>();
-</script>
\ No newline at end of file
+
+const percentage = computed((): string => {
+    if (props.onlyLimit || !props.used) {
+        return '0';
+    }
+
+    const p = props.used/props.limit * 100;
+    return Math.round(p).toString();
+});
+
+const available = computed((): number => {
+    if (props.onlyLimit || !props.used) {
+        return 0;
+    }
+
+    return props.limit - props.used;
+});
+
+/**
+* Returns a stringify val considering if val is expressed in bytes and it that case it returns the
+* value in the best human readable memory size unit rounding down to 0 when its expressed in bytes
+* and truncating the decimals when its expressed in other units.
+*/
+function format(val: number): string {
+    if (!props.isBytes) {
+        return val.toString();
+    }
+
+    const valmem =  new Size(val, 2);
+    switch (valmem.label) {
+    case Dimensions.Bytes:
+        return '0';
+    default:
+        return `${valmem.formattedBytes.replace(/\.0+$/, '')}${valmem.label}`;
+    }
+}
+</script>
diff --git a/satellite/admin/back-office/ui/src/store/app.ts b/satellite/admin/back-office/ui/src/store/app.ts
index 9fd5dcc126d5..a856875ca129 100644
--- a/satellite/admin/back-office/ui/src/store/app.ts
+++ b/satellite/admin/back-office/ui/src/store/app.ts
@@ -4,11 +4,12 @@
 import { reactive } from 'vue';
 import { defineStore } from 'pinia';
 
-import { PlacementInfo, PlacementManagementHttpApiV1, UserAccount, UserManagementHttpApiV1 } from '@/api/client.gen';
+import { PlacementInfo, PlacementManagementHttpApiV1, Project, ProjectManagementHttpApiV1, UserAccount, UserManagementHttpApiV1 } from '@/api/client.gen';
 
 class AppState {
     public placements: PlacementInfo[];
     public userAccount: UserAccount | null = null;
+    public selectedProject: Project | null = null;
 }
 
 export const useAppStore = defineStore('app', () => {
@@ -16,6 +17,7 @@ export const useAppStore = defineStore('app', () => {
 
     const userApi = new UserManagementHttpApiV1();
     const placementApi = new PlacementManagementHttpApiV1();
+    const projectApi = new ProjectManagementHttpApiV1();
 
     async function getUserByEmail(email: string): Promise<void> {
         state.userAccount = await userApi.getUserByEmail(email);
@@ -29,10 +31,28 @@ export const useAppStore = defineStore('app', () => {
         state.placements = await placementApi.getPlacements();
     }
 
+    function getPlacementText(code: number): string {
+        for (const placement of state.placements) {
+            if (placement.id === code) {
+                if (placement.location) {
+                    return placement.location;
+                }
+                break;
+            }
+        }
+        return `Unknown (${code})`;
+    }
+
+    async function selectProject(id: string): Promise<void> {
+        state.selectedProject = await projectApi.getProject(id);
+    }
+
     return {
         state,
         getUserByEmail,
         clearUser,
         getPlacements,
+        getPlacementText,
+        selectProject,
     };
 });
diff --git a/satellite/admin/back-office/ui/src/utils/bytesSize.ts b/satellite/admin/back-office/ui/src/utils/bytesSize.ts
new file mode 100644
index 000000000000..441743f963fc
--- /dev/null
+++ b/satellite/admin/back-office/ui/src/utils/bytesSize.ts
@@ -0,0 +1,94 @@
+// Copyright (C) 2019 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+export enum Memory {
+    Bytes = 1e0,
+    KB = 1e3,
+    MB = 1e6,
+    GB = 1e9,
+    TB = 1e12,
+    PB = 1e15,
+    EB = 1e18,
+
+    KiB = 2 ** 10,
+    MiB = 2 ** 20,
+    GiB = 2 ** 30,
+    TiB = 2 ** 40,
+    PiB = 2 ** 50,
+    EiB = 2 ** 60,
+}
+
+export enum Dimensions {
+    Bytes = 'B',
+    KB = 'KB',
+    MB = 'MB',
+    GB = 'GB',
+    TB = 'TB',
+    PB = 'PB',
+}
+
+export class Size {
+    private readonly precision: number;
+    public readonly bytes: number;
+    public readonly formattedBytes: string;
+    public readonly label: Dimensions;
+
+    public constructor(bytes: number, precision = 0) {
+        const _bytes = Math.ceil(bytes);
+        this.bytes = bytes;
+        this.precision = precision;
+
+        switch (true) {
+        case _bytes === 0:
+            this.formattedBytes = (bytes / Memory.Bytes).toFixed(this.precision);
+            this.label = Dimensions.Bytes;
+            break;
+        case _bytes < Memory.MB:
+            this.formattedBytes = (bytes / Memory.KB).toFixed(this.precision);
+            this.label = Dimensions.KB;
+            break;
+        case _bytes < Memory.GB:
+            this.formattedBytes = (bytes / Memory.MB).toFixed(this.precision);
+            this.label = Dimensions.MB;
+            break;
+        case _bytes < Memory.TB:
+            this.formattedBytes = (bytes / Memory.GB).toFixed(this.precision);
+            this.label = Dimensions.GB;
+            break;
+        case _bytes < Memory.PB:
+            this.formattedBytes = (bytes / Memory.TB).toFixed(this.precision);
+            this.label = Dimensions.TB;
+            break;
+        default:
+            this.formattedBytes = (bytes / Memory.PB).toFixed(this.precision);
+            this.label = Dimensions.PB;
+        }
+    }
+
+    /**
+     * Base10String converts size to a string using base-10 prefixes.
+     * @param size in bytes
+     */
+    public static toBase10String(size: number): string {
+        const decimals = 2;
+
+        const _size = Math.abs(size);
+
+        switch (true) {
+        case _size >= Memory.EB * 2 / 3:
+            return `${parseFloat((size / Memory.EB).toFixed(decimals))}EB`;
+        case _size >= Memory.PB * 2 / 3:
+            return `${parseFloat((size / Memory.PB).toFixed(decimals))}PB`;
+        case _size >= Memory.TB * 2 / 3:
+            return `${parseFloat((size / Memory.TB).toFixed(decimals))}TB`;
+        case _size >= Memory.GB * 2 / 3:
+            return `${parseFloat((size / Memory.GB).toFixed(decimals))}GB`;
+        case _size >= Memory.MB * 2 / 3:
+            return `${parseFloat((size / Memory.MB).toFixed(decimals))}MB`;
+        case _size >= Memory.KB * 2 / 3:
+            return `${parseFloat((size / Memory.KB).toFixed(decimals))}KB`;
+        default:
+            return `${size}B`;
+        }
+    }
+}
diff --git a/satellite/admin/back-office/ui/src/views/AccountDetails.vue b/satellite/admin/back-office/ui/src/views/AccountDetails.vue
index a68aa6dea2a6..7c003e6675ea 100644
--- a/satellite/admin/back-office/ui/src/views/AccountDetails.vue
+++ b/satellite/admin/back-office/ui/src/views/AccountDetails.vue
@@ -210,21 +210,6 @@ const userAccount = computed<UserAccount>(() => appStore.state.userAccount as Us
  */
 const createdAt = computed<Date>(() => new Date(userAccount.value.createdAt));
 
-/**
- * Returns the string representation of the user's default placement.
- */
-const placementText = computed<string>(() => {
-    for (const placement of appStore.state.placements) {
-        if (placement.id === userAccount.value.defaultPlacement) {
-            if (placement.location) {
-                return placement.location;
-            }
-            break;
-        }
-    }
-    return `Unknown (${userAccount.value.defaultPlacement})`;
-});
-
 type Usage = {
     storage: number | null;
     download: number;
@@ -258,17 +243,24 @@ const totalUsage = computed<Usage>(() => {
     return total;
 });
 
+const placementText = computed<string>(() => {
+    return appStore.getPlacementText(userAccount.value.defaultPlacement);
+});
+
 /**
  * Returns whether an error occurred retrieving usage data from the Redis live accounting cache.
  */
 const usageCacheError = computed<boolean>(() => {
     return !!userAccount.value.projects?.some(project =>
         project.storageUsed === null ||
-        project.bandwidthUsed === null ||
         project.segmentUsed === null,
     );
 });
 
 onBeforeMount(() => !userAccount.value && router.push('/accounts'));
-onUnmounted(appStore.clearUser);
+onUnmounted(() => {
+    if (appStore.state.selectedProject === null) {
+        appStore.clearUser;
+    }
+});
 </script>
diff --git a/satellite/admin/back-office/ui/src/views/ProjectDetails.vue b/satellite/admin/back-office/ui/src/views/ProjectDetails.vue
index e438b84f61bd..c39dd4fd7f69 100644
--- a/satellite/admin/back-office/ui/src/views/ProjectDetails.vue
+++ b/satellite/admin/back-office/ui/src/views/ProjectDetails.vue
@@ -19,7 +19,7 @@
                             />
                         </svg>
                     </template>
-                    itacker@gmail.com
+                    {{ project.owner.email }}
                 </v-chip>
 
                 <img src="@/assets/icon-right.svg" alt="Project" width="10" class="mr-2">
@@ -33,7 +33,7 @@
                             />
                         </svg>
                     </template>
-                    56F82SR21Q284
+                    {{ project.id }}
                     <v-tooltip activator="parent" location="top">
                         This project ID
                     </v-tooltip>
@@ -51,15 +51,28 @@
             </v-col>
         </v-row>
 
+        <v-row v-if="usageCacheError">
+            <v-col>
+                <v-alert variant="tonal" color="error" rounded="lg" density="comfortable" border>
+                    <div class="d-flex align-center">
+                        <v-icon icon="mdi-alert-circle" color="error" class="mr-3" />
+                        An error occurred when retrieving project usage data.
+                        Please retry after a few minutes and report the issue if it persists.
+                    </div>
+                </v-alert>
+            </v-col>
+        </v-row>
+
         <v-row>
             <v-col cols="12" md="4">
-                <v-card title="Project" subtitle="My First Project" variant="flat" :border="true" rounded="xlg">
+                <v-card title="Project" :subtitle="project.name" variant="flat" :border="true" rounded="xlg">
                     <v-card-text>
                         <v-chip color="success" variant="tonal" class="mr-2 font-weight-bold">
-                            Pro
+                            {{ userAccount.paidTier ? 'Pro' : 'Free' }}
+                            <!-- TODO: We don't have this information we have to decide what we show here (e.g. Show the date when a credit card was added, etc.) ->
                             <v-tooltip activator="parent" location="top">
                                 Pro account since: 2 May 2022
-                            </v-tooltip>
+                            </v-tooltip> -->
                         </v-chip>
                         <v-divider class="my-4" />
                         <v-btn variant="outlined" size="small" color="default" class="mr-2">
@@ -73,7 +86,7 @@
             <v-col cols="12" md="4">
                 <v-card title="Value" subtitle="Attribution" variant="flat" :border="true" rounded="xlg" class="mb-3">
                     <v-card-text>
-                        <v-chip color="default" variant="tonal" class="mr-2">Company</v-chip>
+                        <v-chip color="default" variant="tonal" class="mr-2">{{ project.userAgent }}</v-chip>
                         <v-divider class="my-4" />
                         <v-btn variant="outlined" size="small" color="default">
                             Set Value Attribution
@@ -87,7 +100,7 @@
                 <v-card title="Placement" subtitle="Region" variant="flat" :border="true" rounded="xlg">
                     <v-card-text>
                         <v-chip variant="tonal" class="mr-2">
-                            Global
+                            {{ placementText }}
                         </v-chip>
                         <v-divider class="my-4" />
                         <v-btn variant="outlined" size="small" color="default">
@@ -103,44 +116,39 @@
             <ProjectLimitsDialog />
 
             <v-col cols="12" sm="6" lg="4">
+                <!-- TODO: get bucket count -->
                 <UsageProgressComponent
-                    title="Buckets" :progress="5" used="5" percentage="5%" available="95" limit="100"
-                    color="success" link
+                    title="Buckets" :only-limit="true" :limit="project.maxBuckets || 0" color="success" link
                 />
             </v-col>
 
             <v-col cols="12" sm="6" lg="4">
                 <UsageProgressComponent
-                    title="Storage" :progress="14" used="141 TB" percentage="14%" available="859 TB"
-                    limit="1,000 TB" color="success" link
+                    title="Storage" :is-bytes="true" :used="project.storageUsed || 0" :limit="project.storageLimit || 0" color="success" link
                 />
             </v-col>
 
             <v-col cols="12" sm="6" lg="4">
                 <UsageProgressComponent
-                    title="Download" :progress="59" used="590 TB" percentage="59%" available="310 TB"
-                    limit="1,000 TB" color="success" link
+                    title="Download" :is-bytes="true" :used="project.bandwidthUsed" :limit="project.bandwidthLimit || 0" color="success" link
                 />
             </v-col>
 
             <v-col cols="12" sm="6" lg="4">
                 <UsageProgressComponent
-                    title="Segments" :progress="32" used="32,000" percentage="32%" available="68,000"
-                    limit="100,000" color="success" link
+                    title="Segments" :used="project.segmentUsed || 0" :limit="project.segmentLimit || 0" color="success" link
                 />
             </v-col>
 
             <v-col cols="12" sm="6" lg="4">
                 <UsageProgressComponent
-                    title="Rate" :progress="20" used="2,000" percentage="20%" available="8,000" limit="10,000"
-                    color="success" link
+                    title="Rate" :only-limit="true" :limit="project.rateLimit || 0" color="success" link
                 />
             </v-col>
 
             <v-col cols="12" sm="6" lg="4">
                 <UsageProgressComponent
-                    title="Burst" :progress="50" used="25,000" percentage="50%" available="25,000"
-                    limit="50,000" color="success" link
+                    title="Burst" :only-limit="true" :limit="project.burstLimit || 0" color="success" link
                 />
             </v-col>
         </v-row>
@@ -169,7 +177,9 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
 import {
+    VAlert,
     VContainer,
     VRow,
     VCol,
@@ -182,6 +192,9 @@ import {
     VDivider,
 } from 'vuetify/components';
 
+import { Project, UserAccount } from '@/api/client.gen';
+import { useAppStore } from '@/store/app';
+
 import PageTitleComponent from '@/components/PageTitleComponent.vue';
 import UsageProgressComponent from '@/components/UsageProgressComponent.vue';
 import BucketsTableComponent from '@/components/BucketsTableComponent.vue';
@@ -192,4 +205,20 @@ import ProjectGeofenceDialog from '@/components/ProjectGeofenceDialog.vue';
 import ProjectUserAgentsDialog from '@/components/ProjectUserAgentsDialog.vue';
 import ProjectLimitsDialog from '@/components/ProjectLimitsDialog.vue';
 import ProjectInformationDialog from '@/components/ProjectInformationDialog.vue';
-</script>
\ No newline at end of file
+
+const appStore = useAppStore();
+
+const userAccount = computed<UserAccount>(() => appStore.state.userAccount as UserAccount);
+const project = computed<Project>(() => appStore.state.selectedProject as Project);
+
+const placementText = computed<string>(() => {
+    return appStore.getPlacementText(project.value.defaultPlacement);
+});
+
+/**
+ * Returns whether an error occurred retrieving usage data from the Redis live accounting cache.
+ */
+const usageCacheError = computed<boolean>(() => {
+    return project.value.storageUsed === null || project.value.segmentUsed === null;
+});
+</script>