diff --git a/frontend/components/ProposeTrade.vue b/frontend/components/ProposeTrade.vue
index f64311d6..8a375a72 100644
--- a/frontend/components/ProposeTrade.vue
+++ b/frontend/components/ProposeTrade.vue
@@ -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/ShowAllResources.vue b/frontend/components/ShowAllResources.vue
index a053ac2b..aa6d1995 100644
--- a/frontend/components/ShowAllResources.vue
+++ b/frontend/components/ShowAllResources.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
-    <template v-if="resources">
-      <div v-if="resources.length === 0">
+    <template v-if="sortedResources">
+      <div v-if="sortedResources.length === 0">
         No resources found.
       </div>
-      <div v-for="resource in resources" v-else :key="resource.type">
+      <div v-for="resource in sortedResources" v-else :key="resource.type">
         <p>Type: {{ resource.type }}</p>
         <p>Amount: {{ resource.amount }}</p>
         <p>Upgrade Level: {{ resource.upgradeLevel }}</p>
@@ -20,9 +20,11 @@
 <script setup lang="ts">
 import { basePath } from '~/utils/api';
 
-const { data: resources, refresh } = await useFetch<Array<{
+type Resource = {
   ownerId: string, type: string, amount: number, 'upgradeLevel': number
-}>>(
+}
+
+const { data: resources, refresh } = await useFetch<Array<Resource>>(
   basePath + 'resources',
   {
     lazy: true,
@@ -30,6 +32,18 @@ const { data: resources, refresh } = await useFetch<Array<{
   },
 );
 
+function sortResourceAlphabetically (resourceA: Resource, resourceB: Resource) {
+  if (resourceA.type < resourceB.type) {
+    return -1;
+  }
+  if (resourceA.type > resourceB.type) {
+    return 1;
+  }
+  return 0;
+}
+
+const sortedResources = computed(() => resources.value?.sort(sortResourceAlphabetically));
+
 let stopInterval: NodeJS.Timeout;
 
 onMounted(() => {
diff --git a/frontend/components/ShowOccupation.vue b/frontend/components/ShowOccupation.vue
index 687467af..954ae7de 100644
--- a/frontend/components/ShowOccupation.vue
+++ b/frontend/components/ShowOccupation.vue
@@ -15,7 +15,6 @@
         </template>
       </UButton>
     </div>
-
   </div>
 </template>
 
@@ -34,8 +33,7 @@ const occupationIcon = {
   [Occupation.HUNTER]: '🏹',
 };
 
-
-function getOccupationIcon(occupation: Occupation) {
+function getOccupationIcon (occupation: Occupation) {
   return occupationIcon[occupation];
 }
 
@@ -49,24 +47,24 @@ const { data: occupation, refresh } = await useFetch<Occupation>(
 
 const availableOccupations =
   computed(() => Object.values(Occupation)
-    .filter((availableOccupation) => availableOccupation !== occupation.value));
+    .filter(availableOccupation => availableOccupation !== occupation.value));
 
 const cantChangeOccupation =
-  computed(() => chosenOccupation.value === null || chosenOccupation.value === occupation.value)
+  computed(() => chosenOccupation.value === null || chosenOccupation.value === occupation.value);
 
-const chosenOccupation = ref<null | Occupation>(null)
+const chosenOccupation = ref<null | Occupation>(null);
 
-async function changeOccupation() {
+async function changeOccupation () {
   await useFetch(
     basePath + 'occupations',
     {
       method: 'PUT',
       body: {
-        occupation: chosenOccupation.value
+        occupation: chosenOccupation.value,
       },
       lazy: true,
       server: false,
-    }
+    },
   );
 
   chosenOccupation.value = null;