diff --git a/api/controllers/pastries-controller.js b/api/controllers/pastries-controller.js
index 980cc4e..6706d1c 100644
--- a/api/controllers/pastries-controller.js
+++ b/api/controllers/pastries-controller.js
@@ -21,7 +21,7 @@ exports.addPastry = (req, res) => {
 exports.updatePastry = (req, res) => {
     const pastry = Data.pasteries.find(p => p.id === parseInt(req.params.id));
     if (!pastry) return res.status(404).send('The pastry with the given ID was not found.');
-
+    pastry.name = req.body.name;
     pastry.bakingType = req.body.bakingType;
     pastry.startTime = req.body.startTime;
     pastry.duration = req.body.duration;
@@ -38,4 +38,4 @@ exports.deletePastry = (req, res) => {
     Data.pasteries.splice(index, 1);
 
     res.status(204).send();
-};
\ No newline at end of file
+};
diff --git a/frontend/src/core/container/app-container.ts b/frontend/src/core/container/app-container.ts
index 6501154..7665257 100644
--- a/frontend/src/core/container/app-container.ts
+++ b/frontend/src/core/container/app-container.ts
@@ -6,13 +6,15 @@ import type { InjectionKey } from 'vue'
 import GetAppBakersUseCase from '../use-cases/app-bakers/get-app-bakers.use-case'
 import GetPastriesUseCase from '../use-cases/pastries/get-pastries.use-case'
 import AddPastryUseCase from '../use-cases/pastries/add-pastry.use-case'
+import UpdatePastryUseCase from '../use-cases/pastries/update-pastry.use-case'
 
 export const AppContainerKey = {
   httpClient: Symbol('httpClient') as InjectionKey<HttpClient>,
   remoteUseCaseProxy: Symbol('remoteUseCaseProxy') as InjectionKey<RemoteUseCaseProxy>,
   getAppBakersUseCase: Symbol('getAppBakersUseCase') as InjectionKey<GetAppBakersUseCase>,
   getPastriesUseCase: Symbol('getPastriesUseCase') as InjectionKey<GetPastriesUseCase>,
-  addPastryUseCase: Symbol('addPastryUseCase') as InjectionKey<AddPastryUseCase>
+  addPastryUseCase: Symbol('addPastryUseCase') as InjectionKey<AddPastryUseCase>,
+  updatePastryUseCase: Symbol('updatePastryUseCase') as InjectionKey<UpdatePastryUseCase>
 }
 
 const appContainerDefinition: ContainerDefinition<typeof AppContainerKey> = {
@@ -30,6 +32,9 @@ const appContainerDefinition: ContainerDefinition<typeof AppContainerKey> = {
   },
   addPastryUseCase({ remoteUseCaseProxy }) {
     return new AddPastryUseCase(remoteUseCaseProxy)
+  },
+  updatePastryUseCase({ remoteUseCaseProxy }) {
+    return new UpdatePastryUseCase(remoteUseCaseProxy)
   }
 }
 
diff --git a/frontend/src/pages/pastries/PastriesListPage.vue b/frontend/src/pages/pastries/PastriesListPage.vue
index 959284d..6cb260f 100644
--- a/frontend/src/pages/pastries/PastriesListPage.vue
+++ b/frontend/src/pages/pastries/PastriesListPage.vue
@@ -1,6 +1,6 @@
 <template>
   <LoadingWrapper :state="state" :reload="doReload">
-    <PastriesListView :pastries="data" @added="doReload"></PastriesListView>
+    <PastriesListView :pastries="data" @added="doReload" @pastryUpdated="doReload"></PastriesListView>
   </LoadingWrapper>
 </template>
 
diff --git a/frontend/src/pages/pastries/PastriesListView.vue b/frontend/src/pages/pastries/PastriesListView.vue
index aeb1e3a..4bf9bc4 100644
--- a/frontend/src/pages/pastries/PastriesListView.vue
+++ b/frontend/src/pages/pastries/PastriesListView.vue
@@ -1,26 +1,30 @@
 <template>
   <div class="flex flex-col gap-2 grow">
     <div v-for="pastry of pastries" :key="pastry.id" class="flex flex-row gap-2">
-      <div>{{ pastry.name }}</div>
+      <div @click="selectPastry(pastry)" style="cursor: pointer" :class="{'bg-sbb-red border border-transparent text-white px-4 py-3 rounded-full': selectedPastry?.id === pastry.id}">{{ pastry.name }}</div>
     </div>
     <div class="flex flex-row gap-5 mt-5">
         <input v-model="newName" placeholder="New Pastry Name" />
-        <PrimaryButton :disabled="newName.length <= 0" @click="savePastry">Save</PrimaryButton>
+        <PrimaryButton v-if="selectedPastry == null" :disabled="newName.length <= 0" @click="savePastry">Create</PrimaryButton>
+      <PrimaryButton v-else :disabled="newName.length <= 0" @click="updatePastry">Update</PrimaryButton>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
-import { ref } from 'vue'
-import { AppContainerKey } from '@/core/container/app-container'
-import { injectStrict } from '@/core/container/inject'
-import { SavingState, useSaving } from '../../shared/functions/use-saving'
-import type { Pastry } from '@/core/models/pastry';
+import {type Ref, ref} from 'vue'
+import {AppContainerKey} from '@/core/container/app-container'
+import {injectStrict} from '@/core/container/inject'
+import {SavingState, useSaving} from '../../shared/functions/use-saving'
+import type {Pastry} from '@/core/models/pastry';
 import PrimaryButton from '@/shared/components/PrimaryButton.vue';
+import {ResponseState} from "@/core/use-cases/remote-use-case-proxy";
 
 const addPastryUseCase = injectStrict(AppContainerKey.addPastryUseCase)
+const updatePastryUseCase = injectStrict(AppContainerKey.updatePastryUseCase)
 const { savingState, savedData, save } = useSaving<void>()
 
 const newName = ref('')
+const selectedPastry: Ref<Pastry | null> = ref(null)
 
 const savePastry = async () => {
   await save(() => {
@@ -37,11 +41,28 @@ const savePastry = async () => {
   
 }
 
+const selectPastry = (pastry: Pastry) => {
+  if (selectedPastry.value?.id == pastry.id) {
+    selectedPastry.value = null;
+    newName.value = ''
+  } else {
+    selectedPastry.value = pastry
+    newName.value = pastry.name
+  }
+}
+
+const updatePastry = async () => {
+  const response = await updatePastryUseCase.execute(selectedPastry.value!.id, newName.value)
+  if (response.status === ResponseState.Success) {
+    emit('pastryUpdated')
+  }
+}
+
 interface Props {
   pastries: Pastry[]
 }
 
-const emit = defineEmits(['added'])
+const emit = defineEmits(['added', 'pastryUpdated'])
 
 defineProps<Props>()
 </script>