diff --git a/visual-debugger/src/data-processing/Query-Batch.json b/visual-debugger/src/data-processing/Query-Batch.json
index 7f50935586..c362474c9c 100644
--- a/visual-debugger/src/data-processing/Query-Batch.json
+++ b/visual-debugger/src/data-processing/Query-Batch.json
@@ -5,6 +5,18 @@
       "from":"Aachen HBF",
       "to": "Aachen West",
       "class": "Regional"
+    },
+    {
+      "index":2,
+      "from":"Aachen West",
+      "to": "Aachen HBF",
+      "class": "Regional"
+    },
+    {
+      "index":3,
+      "from":"Aachen Bushof",
+      "to": "Aachen Schanz",
+      "class": "Regional"
     }
   ]
 }
\ No newline at end of file
diff --git a/visual-debugger/src/data-processing/parsing-types/planParsingTypes.ts b/visual-debugger/src/data-processing/parsing-types/planParsingTypes.ts
new file mode 100644
index 0000000000..45b658d95f
--- /dev/null
+++ b/visual-debugger/src/data-processing/parsing-types/planParsingTypes.ts
@@ -0,0 +1,66 @@
+/**
+ *  Plan type used for parsing plan responses
+ */
+export interface Plan{
+    requestParameters:string;
+    debugOutput: number[];
+    from:Place;
+    to: Place;
+    direct: Itinerary[];
+    itineraries: Itinerary[];
+    previousPageCursor: string;
+    nextPageCursor: string;
+}
+
+/**
+ * Place type used for parsing plan responses
+ */
+export interface Place{
+    name:string;
+    stopId:string;
+    lat:number;
+    lon:number;
+    level: number;
+    arrival: string;
+    departure:string;
+    scheduledArrival: string;
+    scheduledDeparture: string;
+    scheduledTrack:string;
+    track:string;
+    vertexType:string;
+}
+
+/**
+ * Itinerary type used for parsing plan responses
+ */
+export interface Itinerary {
+    duration:number;
+    startTime:string;
+    endTime:string;
+    transfers:number;
+    legs:Leg[];
+}
+
+/**
+ * Leg type used for parsing plan responses
+ */
+export interface Leg {
+    mode:string;
+    from:Place;
+    to:Place;
+    duration:number;
+    startTime:string;
+    endTime:string;
+    scheduledStartTime:string;
+    scheduledEndTime:string;
+    realTime:boolean;
+    legGeometry:EncodedPolyline;
+}
+
+/**
+ * EncodedPolyline type used for parsing plan responses
+ */
+export interface EncodedPolyline {
+    points:string;
+    length:number;
+}
\ No newline at end of file
diff --git a/visual-debugger/src/data-processing/parsing-types/queryInterpolationTypes.ts b/visual-debugger/src/data-processing/parsing-types/queryInterpolationTypes.ts
new file mode 100644
index 0000000000..90cfcef383
--- /dev/null
+++ b/visual-debugger/src/data-processing/parsing-types/queryInterpolationTypes.ts
@@ -0,0 +1,44 @@
+/**
+ * location type used for storing stop information
+ */
+export interface Location {
+    type: string;
+    tokens: number[][];
+    name: string;
+    id: string;
+    lat: number;
+    lon: number;
+    level: number;
+    zip: string;
+    areas: Area[];
+    score: number;
+}
+
+/**
+ * area type used for storing information about the area of a stop
+ */
+export interface Area {
+    name: string;
+    adminLevel: number;
+    matched: boolean;
+    default: boolean;
+}
+
+/**
+ * Query type used for storing information about a single query
+ */
+export interface Query {
+    index: number;
+    from:string;
+    fromStopID:string;
+    to: string;
+    toStopID: string;
+    class:string;
+}
+
+/**
+ * Type used for storing all queries in a Batch
+ */
+export interface Batch {
+    queries: Query[];
+}
\ No newline at end of file
diff --git a/visual-debugger/src/data-processing/planParsing.ts b/visual-debugger/src/data-processing/planParsing.ts
new file mode 100644
index 0000000000..25506b85ae
--- /dev/null
+++ b/visual-debugger/src/data-processing/planParsing.ts
@@ -0,0 +1,56 @@
+import {interpolatedQueryStore, computedPlanStore, currentPlanStore} from "../sveltestore.ts";
+import type {Query} from "./parsing-types/queryInterpolationTypes.ts";
+import type {Plan} from "./parsing-types/planParsingTypes.ts"
+import axios from "axios";
+
+/**
+ * Base URL of the MOTIS API
+ */
+const motisApiUrlBase = 'http://localhost:8080/api/v1/'
+
+/**
+ * data of the interpolated queries
+ */
+let queries: Query[]
+
+/**
+ * Interaction function that is accessed by the frontend to get the plan for all queries
+ */
+export async function computePlan(){
+    //get read file content from storage
+    interpolatedQueryStore.subscribe(file_data => {
+        queries = file_data;
+    })
+
+    // if store is empty abort data processing
+    if(queries == undefined){return}
+
+    let plans: Plan[] = [];
+    let index =0;
+
+    // compute the plan for each query
+    for(const query of queries){
+        plans[index] = await computePlanForQuery(query)
+        index++;
+    }
+
+    // put computed plans into storage and set first plan as active
+    computedPlanStore.set(plans)
+    currentPlanStore.set(plans[0])
+}
+
+/**
+ * Calls the MOTIS API for a specific query and returns the plan for it
+ * @param query the query to get the plan for
+ */
+export async function computePlanForQuery(query:Query){
+    const response = await axios
+        .get(
+            //configuration for api call parameters
+            `${motisApiUrlBase}plan/?fromPlace=${query.fromStopID}&toPlace=${query.toStopID}`
+        )
+    let plan: Plan = response.data
+    return plan
+}
+
+
diff --git a/visual-debugger/src/data-processing/query-build.ts b/visual-debugger/src/data-processing/queryBuild.ts
similarity index 64%
rename from visual-debugger/src/data-processing/query-build.ts
rename to visual-debugger/src/data-processing/queryBuild.ts
index d3e1ddf181..c48f08a1f9 100644
--- a/visual-debugger/src/data-processing/query-build.ts
+++ b/visual-debugger/src/data-processing/queryBuild.ts
@@ -1,5 +1,6 @@
 import axios from "axios";
 import {queryJsonStringStore, interpolatedQueryStore} from "../sveltestore";
+import type { Location, Batch } from "./parsing-types/queryInterpolationTypes.ts"
 
 /**
  * Base URL of the MOTIS API
@@ -11,66 +12,20 @@ const motisApiUrlBase = 'http://localhost:8080/api/v1/'
  */
 let queryFileContent: string
 
-/**
- * location type used for storing stop information
- */
-export interface Location {
-    type: string;
-    tokens: number[][];
-    name: string;
-    id: string;
-    lat: number;
-    lon: number;
-    level: number;
-    zip: string;
-    areas: Area[];
-    score: number;
-}
-
-/**
- * area type used for storing information about the area of a stop
- */
-export interface Area {
-    name: string;
-    adminLevel: number;
-    matched: boolean;
-    default: boolean;
-}
-
-/**
- * Query type used for storing information about a single query
- */
-export interface Query {
-    index: number;
-    from:string;
-    fromStopID:string;
-    to: string;
-    toStopID: string;
-    class:string;
-}
-
-/**
- * Type used for storing all queries in a Batch
- */
-interface Batch {
-    queries: Query[];
-}
-
 /**
  * Reads the query batch and generates the nearest stops for the read query trips
  * @param query_batch path to the query batch JSON file
  * @return the query batch dataset with stop id's
  */
 export async function buildQueryDataset(query_batch:string) {
-
     // parse query batch file into readable queries
     let batch: Batch = JSON.parse(query_batch)
     let queries = batch.queries
 
     // call MOTIS API to search for the nearest stations to the start and end point of the query
     for (const queryTrip of queries) {
-        queryTrip.fromStopID = await getLocationId(queryTrip.from)
-        queryTrip.toStopID = await getLocationId(queryTrip.to)
+        queryTrip.fromStopID = await computeLocationId(queryTrip.from)
+        queryTrip.toStopID = await computeLocationId(queryTrip.to)
     }
 
     // update store with the new queries
@@ -82,7 +37,7 @@ export async function buildQueryDataset(query_batch:string) {
  * @param locationName location the most similar stop id is needed of
  * @return the id of the most similar location to the input string
  */
-async function getLocationId (locationName:string){
+async function computeLocationId (locationName:string){
     const response = await axios
         .get(
             //configuration for api call parameters
@@ -95,7 +50,7 @@ async function getLocationId (locationName:string){
 /**
  * Interaction method for printing queries to page
  */
-export function getQueryAttributes(){
+export function computeQueryAttributes(){
 
     //get read file content from storage
     queryJsonStringStore.subscribe(file_data => {
diff --git a/visual-debugger/src/demo.spec.ts b/visual-debugger/src/demo.spec.ts
deleted file mode 100644
index e07cbbd725..0000000000
--- a/visual-debugger/src/demo.spec.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { describe, it, expect } from 'vitest';
-
-describe('sum test', () => {
-	it('adds 1 + 2 to equal 3', () => {
-		expect(1 + 2).toBe(3);
-	});
-});
diff --git a/visual-debugger/src/lib/components/ui/FileUpload.svelte b/visual-debugger/src/lib/components/ui/FileUpload.svelte
index 816e30dfa0..870128bb3d 100644
--- a/visual-debugger/src/lib/components/ui/FileUpload.svelte
+++ b/visual-debugger/src/lib/components/ui/FileUpload.svelte
@@ -1,24 +1,31 @@
 <script lang="ts">
   import {queryJsonStringStore} from "../../../sveltestore";
-    let file: File | null = null; // Use TypeScript's File type
-  
-    const handleFileChange = (event: Event): void => {
-      const input = event.target as HTMLInputElement;
-      file = input.files ? input.files[0] : null;
-      console.log(file?.name); // Logs the file name
+  import {computeQueryAttributes} from "../../../data-processing/queryBuild.ts";
+  let file: File | null = null;
 
-      // put content of read file as string into storage
-      file?.text().then((file_content_string) => {
-          queryJsonStringStore.set(file_content_string);
-        }
-      )
+  // When file was first uploaded, parse and interpolate the queries
+  $: if(!($queryJsonStringStore=="DEFAULT")){computeQueryAttributes()}
 
-    };
-  </script>
-  
-  <div>
-    <input type="file" on:change={handleFileChange} />
-    {#if file}
-      <p>Selected file: {file.name}</p>
-    {/if}
-  </div>
+  /**
+   * Gets the uploaded file and puts its content into the svelte store
+   * @param event event that the file was uploaded
+   */
+  const putFileIntoStorage = (event: Event): void => {
+    const input = event.target as HTMLInputElement;
+    file = input.files ? input.files[0] : null;
+
+    // put content of read file as string into storage
+    file?.text().then((file_content_string) => {
+              queryJsonStringStore.set(file_content_string);
+            }
+    )
+
+  };
+</script>
+
+<div>
+  <input type="file" on:change={putFileIntoStorage} />
+  {#if file}
+    <p>Selected file: {file.name}</p>
+  {/if}
+</div>
diff --git a/visual-debugger/src/lib/components/ui/PlanOverview.svelte b/visual-debugger/src/lib/components/ui/PlanOverview.svelte
new file mode 100644
index 0000000000..dbcc8d01a6
--- /dev/null
+++ b/visual-debugger/src/lib/components/ui/PlanOverview.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+    import {currentPlanStore} from "../../../sveltestore.ts";
+    import type {Itinerary, Plan} from "../../../data-processing/parsing-types/planParsingTypes.ts";
+    import PlanEntry from "$lib/components/ui/subcomponents/PlanEntry.svelte";
+
+    let itineraries: Itinerary[]
+
+    // let queries be up-to-date with the store
+    currentPlanStore.subscribe((data) => {
+            if (data == undefined) {
+                itineraries = []
+            }else{
+                itineraries = data.itineraries;
+            }
+        }
+    )
+</script>
+
+<h2>Plan of Query(Routing results)</h2>
+<div class="rounded-border">
+    {#each itineraries as itinerary}
+        <PlanEntry startTime="{itinerary.startTime}" endTime="{itinerary.endTime}"
+                   duration="{itinerary.duration.toString()}" transfers="{itinerary.transfers.toString()}"/>
+    {/each}
+</div>
+
+
+<style>
+    .rounded-border {
+        border: 1px solid black;
+        border-radius: 8px;
+        padding: 10px;
+    }
+</style>
\ No newline at end of file
diff --git a/visual-debugger/src/lib/components/ui/QueryBatchEntry.svelte b/visual-debugger/src/lib/components/ui/QueryBatchEntry.svelte
deleted file mode 100644
index cb98699ddd..0000000000
--- a/visual-debugger/src/lib/components/ui/QueryBatchEntry.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<script lang="ts">
-    export let from: String;
-    export let to: String;
-    export let fromId: String;
-    export let toId: String;
-</script>
-
-<div>
-    <p> {from} ({fromId}) -> {to} ({toId})</p>
-</div>
\ No newline at end of file
diff --git a/visual-debugger/src/lib/components/ui/QueryBatchOverview.svelte b/visual-debugger/src/lib/components/ui/QueryBatchOverview.svelte
index 5803d70d7c..891f009e56 100644
--- a/visual-debugger/src/lib/components/ui/QueryBatchOverview.svelte
+++ b/visual-debugger/src/lib/components/ui/QueryBatchOverview.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
-    import QueryBatchEntry from "./QueryBatchEntry.svelte"
-    import type {Query} from "../../../data-processing/query-build";
-    import {interpolatedQueryStore} from "../../../sveltestore.ts";
+    import {computedPlanStore, currentPlanStore, interpolatedQueryStore} from "../../../sveltestore.ts";
+    import type {Query} from "../../../data-processing/parsing-types/queryInterpolationTypes.ts";
+    import {Button} from "@/components/ui/button";
+    import type {Plan} from "../../../data-processing/parsing-types/planParsingTypes.ts";
 
     let queries: Query[]
 
@@ -9,12 +10,39 @@
     interpolatedQueryStore.subscribe((data) =>
         queries = data
     )
+
+    // attributes for switching of current plan
+    let plans: Plan[];
+
+    /**
+     * Changes the currently displayed plan to the next one
+     */
+    function nextPlan(queryIndex: number) {
+        // get current plan data
+        computedPlanStore.subscribe((data) => {
+                plans = data
+
+                //if no plan was previously computed, alert the user of this
+                if (data == undefined) {
+                    alert("No plans found, please compute the queries before trying to switch between their data.")
+                    return
+                }
+            }
+        )
+
+        // return if the store is still empty (this means the function was called to early)
+        if (plans == undefined) return;
+
+        // load plan of the clicked query into svelte store
+        currentPlanStore.set(plans[queryIndex-1])
+    }
+
 </script>
 
 <h2>Query Batches</h2>
 <div class="rounded-border">
     {#each queries as query}
-        <QueryBatchEntry from="{query.from}" to="{query.to}" fromId="{query.fromStopID}" toId="{query.toStopID}" />
+        <Button on:click={() => nextPlan(query.index)}> {query.index}: {query.from} -> {query.to}</Button>
     {/each}
 </div>
 
diff --git a/visual-debugger/src/lib/components/ui/subcomponents/PlanEntry.svelte b/visual-debugger/src/lib/components/ui/subcomponents/PlanEntry.svelte
new file mode 100644
index 0000000000..2889a613ca
--- /dev/null
+++ b/visual-debugger/src/lib/components/ui/subcomponents/PlanEntry.svelte
@@ -0,0 +1,11 @@
+ <script lang="ts">
+        export let startTime: String;
+        export let endTime: String;
+        export let duration: String;
+        export let transfers: String;
+
+</script>
+
+<div>
+    <p> StartTime:{startTime}, EndTime:{endTime}, Duration: {duration}, Number of Transfers: {transfers}</p>
+</div>
\ No newline at end of file
diff --git a/visual-debugger/src/routes/+page.svelte b/visual-debugger/src/routes/+page.svelte
index 5f18fc3a24..4a99cb7624 100644
--- a/visual-debugger/src/routes/+page.svelte
+++ b/visual-debugger/src/routes/+page.svelte
@@ -1,17 +1,11 @@
-<script>
-    // import Button from '$lib/components/ui/Button.svelte';
+<script lang="ts">
+    // components
     import FileUpload from '$lib/components/ui/FileUpload.svelte';
-    import QueryBatchOverview from '$lib/components/ui/QueryBatchOverview.svelte';
     import { Button } from "$lib/components/ui/button";
-    import {getQueryAttributes} from "../data-processing/query-build";
-
-   
-
-    // call bridge to import the queries to QueryBatchOverview
-    const importQueries = () => {
-        console.log("importing queries")
-        getQueryAttributes()
-    }
+    import QueryBatchOverview from '$lib/components/ui/QueryBatchOverview.svelte';
+    import PlanOverview from "$lib/components/ui/PlanOverview.svelte";
+    // data-processing functions
+    import {computePlan} from "../data-processing/planParsing.ts";
 
 </script>
 
@@ -28,15 +22,14 @@
 </div>
 
 <!-- File Upload -->
-<div class="flex items-center justify-center gap-4 my-4">    
+<div class="flex items-center justify-center gap-4 my-4">
     <FileUpload />
-    <Button on:click={importQueries}>Confirm Upload</Button>
+    <Button on:click={computePlan}>Compute Routes</Button>
 </div>
 
-
-
 <!-- Query Batch, journey details -->
 <div class="flex items-center justify-center gap-4 my-4">
     <QueryBatchOverview />
-    <!-- TODO journey details to the right of the query batch overview -->
-</div>
\ No newline at end of file
+    <PlanOverview />
+</div>
+
diff --git a/visual-debugger/src/sveltestore.ts b/visual-debugger/src/sveltestore.ts
index 8c09cb7b5e..cca7913a9e 100644
--- a/visual-debugger/src/sveltestore.ts
+++ b/visual-debugger/src/sveltestore.ts
@@ -1,5 +1,6 @@
 import {writable} from "svelte/store";
-import type {Query} from "./data-processing/query-build";
+import type {Query} from "./data-processing/parsing-types/queryInterpolationTypes.ts";
+import type {Plan} from "./data-processing/parsing-types/planParsingTypes.ts";
 
 
 /**
@@ -10,4 +11,14 @@ export const queryJsonStringStore = writable<string>("DEFAULT")
 /**
  * Storage for interpolated queries
  */
-export const interpolatedQueryStore = writable<Query[]>()
\ No newline at end of file
+export const interpolatedQueryStore = writable<Query[]>()
+
+/**
+ * Storage for computed plan data
+ */
+export const computedPlanStore = writable<Plan[]>()
+
+/**
+ * Storage for current displayed plan
+ */
+export const currentPlanStore = writable<Plan>()