diff --git a/backend/src/modules/resource/occupation.controller.ts b/backend/src/modules/resource/occupation.controller.ts
index 15513f0f..36d80c2c 100644
--- a/backend/src/modules/resource/occupation.controller.ts
+++ b/backend/src/modules/resource/occupation.controller.ts
@@ -1,9 +1,9 @@
 import {
+  Body,
   Controller,
   Get,
   HttpException,
   HttpStatus,
-  Param,
   Put,
 } from '@nestjs/common';
 import { ResourceService } from '@/modules/resource/resource.service';
@@ -21,12 +21,12 @@ export class OccupationController {
     return occupation;
   }
 
-  @Put(':type')
-  async upgradeResource(@Param() params: OccupationTypeDto): Promise<void> {
+  @Put()
+  async changeOccupation(@Body() body: OccupationTypeDto): Promise<void> {
     const { id } = await getUser();
 
     try {
-      await this.resourceService.changeOccupation(id, params.occupation);
+      await this.resourceService.changeOccupation(id, body.occupation);
     } catch (e) {
       throw new HttpException(
         'Failed to change occupation: ' + e,
diff --git a/frontend/components/ProposeTrade.vue b/frontend/components/ProposeTrade.vue
index 91279427..f64311d6 100644
--- a/frontend/components/ProposeTrade.vue
+++ b/frontend/components/ProposeTrade.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="flex flex-col space-y-2 max-w-56">
     <h1>Requested Resources:</h1>
     <UInputMenu v-model="requestedResources.type" :options="resourceOptions" />
     <UInput v-model="requestedResources.amount" type="number" />
@@ -32,7 +32,7 @@ const offeredResources = ref<{
   amount?: number,
 }>({});
 
-async function submitTrade () {
+async function submitTrade() {
   const trade = {
     requestedResources: [requestedResources.value],
     offeredResources: [offeredResources.value],
diff --git a/frontend/components/ShowOccupation.vue b/frontend/components/ShowOccupation.vue
index b37fa7da..687467af 100644
--- a/frontend/components/ShowOccupation.vue
+++ b/frontend/components/ShowOccupation.vue
@@ -1,6 +1,21 @@
 <template>
   <div v-if="occupation">
     <p>Occupation: {{ occupation }} {{ getOccupationIcon(occupation) }}</p>
+    <br>
+    <div class="flex flex-col space-y-2 max-w-56">
+      <p>Change Occupation:</p>
+      <UInputMenu v-model="chosenOccupation" :options="availableOccupations" />
+      <UButton :disabled="cantChangeOccupation" @click="changeOccupation">
+        <template v-if="chosenOccupation === null">
+          Apply
+        </template>
+        <template v-else>
+          Apply change to {{ chosenOccupation }} {{
+            getOccupationIcon(chosenOccupation) }}
+        </template>
+      </UButton>
+    </div>
+
   </div>
 </template>
 
@@ -19,7 +34,8 @@ const occupationIcon = {
   [Occupation.HUNTER]: '🏹',
 };
 
-function getOccupationIcon (occupation: Occupation) {
+
+function getOccupationIcon(occupation: Occupation) {
   return occupationIcon[occupation];
 }
 
@@ -31,14 +47,30 @@ const { data: occupation, refresh } = await useFetch<Occupation>(
   },
 );
 
-let stopInterval: NodeJS.Timeout;
+const availableOccupations =
+  computed(() => Object.values(Occupation)
+    .filter((availableOccupation) => availableOccupation !== occupation.value));
+
+const cantChangeOccupation =
+  computed(() => chosenOccupation.value === null || chosenOccupation.value === occupation.value)
 
-onMounted(() => {
-  // Refresh data every 2.5 seconds
-  stopInterval = setInterval(refresh, 2500);
-});
+const chosenOccupation = ref<null | Occupation>(null)
+
+async function changeOccupation() {
+  await useFetch(
+    basePath + 'occupations',
+    {
+      method: 'PUT',
+      body: {
+        occupation: chosenOccupation.value
+      },
+      lazy: true,
+      server: false,
+    }
+  );
+
+  chosenOccupation.value = null;
+  await refresh();
+}
 
-onUnmounted(() => {
-  clearInterval(stopInterval);
-});
 </script>
diff --git a/frontend/components/navbar.vue b/frontend/components/navbar.vue
index 610f035b..846a1948 100644
--- a/frontend/components/navbar.vue
+++ b/frontend/components/navbar.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 const links = [{
-  label: 'Home',
-  icon: 'i-heroicons-home',
+  label: 'User',
+  icon: 'i-heroicons-user-circle',
   to: '/',
 }, {
   label: 'Resources',
diff --git a/frontend/composables/useHeader.ts b/frontend/composables/useHeader.ts
deleted file mode 100644
index ad1cbfaf..00000000
--- a/frontend/composables/useHeader.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { ref } from 'vue';
-
-const title = ref<string | null>(null);
-
-export function useHeader () {
-  return {
-    title,
-  };
-}
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index 14719da1..2b664baf 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -1,12 +1,10 @@
 <template>
   <div>
-    <h1>Home</h1>
+    <h1>User Overview</h1>
+    <br>
+    <ShowOccupation />
   </div>
 </template>
 
 <script setup lang="ts">
-import { useHeader } from '~/composables/useHeader';
-
-const { title } = useHeader();
-title.value = 'Home';
 </script>
diff --git a/frontend/pages/resources.vue b/frontend/pages/resources.vue
index 472f2f57..f583e610 100644
--- a/frontend/pages/resources.vue
+++ b/frontend/pages/resources.vue
@@ -1,15 +1,9 @@
 <template>
   <div>
-    <ShowOccupation />
-    <br>
     <h1>Available Resources:</h1>
     <ShowAllResources />
   </div>
 </template>
 
 <script setup lang="ts">
-import { useHeader } from '~/composables/useHeader';
-
-const { title } = useHeader();
-title.value = 'Resources';
 </script>
diff --git a/frontend/pages/trades.vue b/frontend/pages/trades.vue
index 31f95e5f..f2146faf 100644
--- a/frontend/pages/trades.vue
+++ b/frontend/pages/trades.vue
@@ -11,8 +11,4 @@
 </template>
 
 <script setup lang="ts">
-import { useHeader } from '~/composables/useHeader';
-
-const { title } = useHeader();
-title.value = 'Trades';
 </script>
diff --git a/frontend/pages/treaties.vue b/frontend/pages/treaties.vue
index c4e1f8ca..8348430d 100644
--- a/frontend/pages/treaties.vue
+++ b/frontend/pages/treaties.vue
@@ -11,8 +11,4 @@
 </template>
 
 <script setup lang="ts">
-import { useHeader } from '~/composables/useHeader';
-
-const { title } = useHeader();
-title.value = 'Treaties';
 </script>