diff --git a/frontend/src/api/loadICal.ts b/frontend/src/api/loadICal.ts
index e835dd9..74a1569 100644
--- a/frontend/src/api/loadICal.ts
+++ b/frontend/src/api/loadICal.ts
@@ -14,8 +14,8 @@
 //You should have received a copy of the GNU Affero General Public License
 //along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
-export async function fetchICalendarEvents() {
-  const response = await fetch("https://cal.htwk-leipzig.de/api/feed?token=rk47mvraeb43t3g");
+export async function fetchICalendarEvents(token: string): Promise<string> {
+  const response = await fetch("/api/feed?token=" + token, { method: "GET" });
   if (!response.ok) {
     throw new Error("Network response was not ok");
   }
diff --git a/frontend/src/components/CalendarViewer.vue b/frontend/src/components/CalendarViewer.vue
index 8d36be1..daa5957 100644
--- a/frontend/src/components/CalendarViewer.vue
+++ b/frontend/src/components/CalendarViewer.vue
@@ -18,16 +18,22 @@ import { fetchICalendarEvents } from "@/api/loadICal.ts";
 
 const { t } = useI18n({ useScope: "global" });
 
+const props = defineProps({
+  token: {
+    type: String,
+    required: true,
+  },
+});
+
+const selectedToken = computed(() => props.token);
+
 const mobilePage = inject("mobilePage") as Ref<boolean>;
 const date: Ref<Date> = ref(new Date());
 
-tokenStore().setToken("3rz8vb3974tr2b")
-
-
 const { data: calendar } = useQuery({
-  queryKey: ["userCalendar", tokenStore().token],
+  queryKey: ["userCalendar", selectedToken],
   queryFn: () =>
-    fetchICalendarEvents(),
+    fetchICalendarEvents(selectedToken.value),
   select: (data) => {
     return data;
   },
diff --git a/frontend/src/view/UserCalendar.vue b/frontend/src/view/UserCalendar.vue
index e5ef613..75d8d09 100644
--- a/frontend/src/view/UserCalendar.vue
+++ b/frontend/src/view/UserCalendar.vue
@@ -2,8 +2,35 @@
 
 import CalendarViewer from "@/components/CalendarViewer.vue";
 import DynamicPage from "@/view/DynamicPage.vue";
+import { useI18n } from "vue-i18n";
+import { ref } from "vue";
+import { extractToken } from "@/helpers/token.ts";
+import { useToast } from "primevue/usetoast";
+import moduleStore from "@/store/moduleStore.ts";
+import tokenStore from "@/store/tokenStore.ts";
 
+const { t } = useI18n({ useScope: "global" });
+const toast = useToast();
 
+const token = ref("");
+
+function loadCalendar() {
+  try {
+    token.value = extractToken(token.value);
+  } catch (e) {
+    console.error(e);
+    toast.add({
+      severity: "error",
+      summary: t("editCalendarView.error"),
+      detail: t("editCalendarView.invalidToken"),
+      life: 3000,
+    });
+    return;
+  }
+
+  moduleStore().removeAllModules();
+  tokenStore().setToken(token.value);
+}
 
 
 </script>
@@ -16,16 +43,20 @@ import DynamicPage from "@/view/DynamicPage.vue";
   >
       <template #selection="{ flexSpecs }">
       <InputText
+        v-model="token"
         :placeholder="$t('userCalender.searchPlaceholder')"
         :class="flexSpecs"
+        @keyup.enter="loadCalendar()"
       />
       <Button
         :label="$t('userCalender.searchButton')"
         icon="pi pi-refresh"
+        @click="loadCalendar()"
       />
       </template>
       <template #content>
       <CalendarViewer
+        :token="tokenStore().token"
       />
       </template>
 </DynamicPage>