diff --git a/api/postman.json b/api/postman.json
index b174f56d2..e0d2a8b3c 100644
--- a/api/postman.json
+++ b/api/postman.json
@@ -2025,4 +2025,4 @@
 			]
 		}
 	]
-}
\ No newline at end of file
+}
diff --git a/web/src/components/PhotoButton.vue b/web/src/components/PhotoButton.vue
new file mode 100644
index 000000000..5ff48088b
--- /dev/null
+++ b/web/src/components/PhotoButton.vue
@@ -0,0 +1,11 @@
+<template>
+  <v-file-input
+    label="File input"
+    outlined
+    dense
+    capture="user"
+    accept="image/*"
+  ></v-file-input>
+</template>
+
+<script setup lang="ts"></script>
diff --git a/web/src/components/cards/BuildingInfoCard.vue b/web/src/components/cards/BuildingInfoCard.vue
new file mode 100644
index 000000000..51978d7b2
--- /dev/null
+++ b/web/src/components/cards/BuildingInfoCard.vue
@@ -0,0 +1,19 @@
+<template>
+  <BorderCard @click="$emit('clicked')" class="my-2">
+    <template v-slot:prepend>
+      <v-icon icon="mdi-office-building"></v-icon>
+    </template>
+    <template v-slot:title>{{ name }}</template
+    ><template v-slot:subtitle>{{ address }}</template>
+  </BorderCard>
+</template>
+
+<script setup lang="ts">
+import BorderCard from "@/layouts/CardLayout.vue";
+
+defineProps({
+  name: String,
+  address: String,
+  id: String,
+});
+</script>
diff --git a/web/src/components/cards/BuildingSelectCard.vue b/web/src/components/cards/BuildingSelectCard.vue
new file mode 100644
index 000000000..6ecc9e736
--- /dev/null
+++ b/web/src/components/cards/BuildingSelectCard.vue
@@ -0,0 +1,116 @@
+<template>
+  <BorderCard class="my-2">
+    <template v-slot:prepend>
+      <v-icon icon="mdi-office-building"></v-icon>
+    </template>
+    <template v-slot:title>{{ name }}</template
+    ><template v-slot:subtitle>{{ address }}</template>
+    <template v-slot:append>
+      <v-icon
+        @click="$emit('up')"
+        class="mx-1"
+        color="primary"
+        icon="mdi-chevron-up"
+      />
+      <v-icon
+        @click="$emit('down')"
+        class="mx-1"
+        color="primary"
+        icon="mdi-chevron-down"
+      />
+      <v-icon
+        @click="$emit('remove')"
+        class="mx-1"
+        color="error"
+        icon="mdi-close"
+      />
+    </template>
+    <v-expand-transition>
+      <v-table v-show="garbageinfo" class="mx-2 my-2" density="compact">
+        <thead>
+          <tr>
+            <th
+              v-for="day in ['MA', 'DI', 'WO', 'DO', 'VR', 'ZA', 'ZO']"
+              :key="day"
+              class="text-center"
+            >
+              {{ day }}
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="item in ['REST', 'GFT', 'PMD']" :key="item">
+            <td class="text-center" v-for="index in 7" :key="index">
+              <v-chip size="small" v-if="handleGarbageMap(item, index)">{{
+                item
+              }}</v-chip>
+            </td>
+          </tr>
+        </tbody>
+      </v-table>
+    </v-expand-transition>
+  </BorderCard>
+</template>
+
+<script setup lang="ts">
+import BorderCard from "@/layouts/CardLayout.vue";
+import { ref, onMounted } from "vue";
+import { GarbageQuery } from "@selab-2/groep-1-query";
+import { tryOrAlertAsync } from "@/try";
+
+// TODO: discuss with group proper format temp actions
+const tempActions = ["REST", "GFT", "PMD"];
+const garbageMap = ref<Map<String, Boolean[]>>(new Map());
+
+onMounted(() => {
+  for (const action of tempActions) {
+    garbageMap.value.set(action, new Array(7).fill(false));
+  }
+
+  tryOrAlertAsync(async () => {
+    const garbageOfBuilding = await new GarbageQuery().getAll({
+      building_id: props.buildingId,
+    });
+
+    for (const garbage of garbageOfBuilding) {
+      const dayIndex = new Date(garbage.pickup_time).getDay();
+      const actionDesc = garbage.action.description;
+
+      // See if it is garbage to pick up or just a task
+      if (actionDesc.includes("Ophaling")) {
+        const garbageType = actionDesc.split(" ")[1];
+
+        garbageMap.value.get(
+          garbageType === "restafval" ? "REST" : garbageType,
+        )![dayIndex] = true;
+      }
+    }
+  });
+});
+
+const props = defineProps({
+  name: { type: String, required: true },
+  address: { type: String, required: true },
+  buildingId: { type: Number, required: true },
+  garbageinfo: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+function handleGarbageMap(garbageType: String, day: number) {
+  const planningArray = garbageMap.value.get(garbageType);
+  if (planningArray) {
+    return planningArray[day];
+  } else {
+    return false;
+  }
+}
+</script>
+
+<style scoped>
+td {
+  border-right: solid 1px rgb(216, 216, 216);
+  border-left: solid 1px rgb(216, 216, 216);
+}
+</style>
diff --git a/web/src/components/cards/RoundSelectCard.vue b/web/src/components/cards/RoundSelectCard.vue
new file mode 100644
index 000000000..95ba6081a
--- /dev/null
+++ b/web/src/components/cards/RoundSelectCard.vue
@@ -0,0 +1,32 @@
+<template>
+  <BorderCard class="my-2">
+    <template v-slot:title>{{ date?.toLocaleDateString() }}</template
+    ><template v-slot:append>
+      <div class="mx-1 pb-5">
+        <v-chip class="mr-4" prepend-icon="mdi-clock-time-two-outline">{{
+          time
+        }}</v-chip>
+        <v-icon @click="$emit('remove')" color="error" icon="mdi-close" />
+      </div>
+    </template>
+    <template v-slot:subtitle>
+      <div class="d-flex">
+        <Avatar class="mx-1" size="x-small" :name="name" /><v-card-subtitle>{{
+          name
+        }}</v-card-subtitle>
+      </div></template
+    >
+  </BorderCard>
+</template>
+
+<script setup lang="ts">
+import BorderCard from "@/layouts/CardLayout.vue";
+import Avatar from "@/components/Avatar.vue";
+
+defineProps({
+  name: String,
+  date: Date,
+  time: String,
+  id: String,
+});
+</script>
diff --git a/web/src/components/models/RoundPlanning.ts b/web/src/components/models/RoundPlanning.ts
new file mode 100644
index 000000000..8c8a2caca
--- /dev/null
+++ b/web/src/components/models/RoundPlanning.ts
@@ -0,0 +1,8 @@
+import Round from "./Round";
+
+export default interface RoundPlanning {
+  date: string;
+  round: Round | null;
+  showinfo: boolean;
+  edit: boolean;
+}
diff --git a/web/src/router/index.ts b/web/src/router/index.ts
index 3620cb8fc..ee9e9271b 100644
--- a/web/src/router/index.ts
+++ b/web/src/router/index.ts
@@ -112,7 +112,7 @@ const routes: any[] = [
         },
       },
       {
-        path: "/ronde/plannen",
+        path: "/ronde/:id/plannen",
         name: "round_plan",
         component: RoundPlanner,
         meta: {
diff --git a/web/src/views/dashboard/Round.vue b/web/src/views/dashboard/Round.vue
index f0ddaa24d..92067bae6 100644
--- a/web/src/views/dashboard/Round.vue
+++ b/web/src/views/dashboard/Round.vue
@@ -8,14 +8,6 @@
     >
       Nieuwe ronde maken
     </v-btn>
-    <v-btn
-      prepend-icon="mdi-plus"
-      color="primary"
-      class="mr-3"
-      :to="{ name: 'round_plan' }"
-    >
-      Nieuwe ronde Plannen
-    </v-btn>
   </div>
   <Table
     :entries="rounds"
diff --git a/web/src/views/round/Round.vue b/web/src/views/round/Round.vue
index 1f502f742..259d8509d 100644
--- a/web/src/views/round/Round.vue
+++ b/web/src/views/round/Round.vue
@@ -1,7 +1,15 @@
 <template>
   <HFillWrapper>
     <div class="space-y-8">
-      <h1>Ronde Korenmarkt</h1>
+      <div style="display: flex; gap: 8px; align-items: center" class="mt-8">
+        <h1>{{ round?.name }}</h1>
+        <div class="flex-grow-1"></div>
+        <RoundedButton
+          icon="mdi-delete-outline"
+          value="Verwijderen"
+          @click="deleteRound()"
+        ></RoundedButton>
+      </div>
 
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
@@ -31,7 +39,11 @@
       <div style="display: flex; gap: 8px; align-items: center" class="mt-8">
         <h2>Planning</h2>
         <div class="flex-grow-1"></div>
-        <RoundedButton icon="mdi-calendar" value="Inplannen"></RoundedButton>
+        <RoundedButton
+          icon="mdi-calendar"
+          value="Inplannen"
+          @click="router.push({ name: 'round_plan', params: { id: round_id } })"
+        ></RoundedButton>
       </div>
 
       <div class="space-y-8">
@@ -65,16 +77,31 @@
 </template>
 
 <script setup lang="ts">
-import { BuildingQuery, Result, ScheduleQuery } from "@selab-2/groep-1-query";
+import {
+  BuildingQuery,
+  Result,
+  RoundQuery,
+  ScheduleQuery,
+} from "@selab-2/groep-1-query";
 import { ref, Ref } from "vue";
 import { tryOrAlertAsync } from "@/try";
 import HFillWrapper from "@/layouts/HFillWrapper.vue";
 import RoundedButton from "@/components/buttons/RoundedButton.vue";
 import RoundCard from "@/components/round/RoundCard.vue";
 import BuildingCard from "@/components/building/BuildingCard.vue";
+import router from "@/router";
+import { useRoute } from "vue-router";
+
+const route = useRoute();
+const round_id: number = Number(route.params.id);
 
 const buildings: Ref<Array<Result<BuildingQuery>>> = ref([]);
 const schedules: Ref<Array<Result<ScheduleQuery>>> = ref([]);
+const round = ref<Result<RoundQuery>>();
+
+tryOrAlertAsync(async () => {
+  round.value = await new RoundQuery().getOne(round_id);
+});
 
 tryOrAlertAsync(async () => {
   buildings.value = await new BuildingQuery().getAll({ take: 5 });
@@ -83,6 +110,13 @@ tryOrAlertAsync(async () => {
 tryOrAlertAsync(async () => {
   schedules.value = await new ScheduleQuery().getAll({ take: 5 });
 });
+
+function deleteRound() {
+  tryOrAlertAsync(async () => {
+    await new RoundQuery().deleteOne({ id: round_id, name: round.value?.name });
+    router.push({ name: "round_overview" });
+  });
+}
 </script>
 
 <style scoped lang="sass">
diff --git a/web/src/views/round/RoundDetail.vue b/web/src/views/round/RoundDetail.vue
index 0dba8e7e5..6f17e5843 100644
--- a/web/src/views/round/RoundDetail.vue
+++ b/web/src/views/round/RoundDetail.vue
@@ -164,12 +164,16 @@ import { ProgressQuery, Result, ScheduleQuery } from "@selab-2/groep-1-query";
 import { tryOrAlertAsync } from "@/try";
 import RoundedButton from "@/components/buttons/RoundedButton.vue";
 import router from "@/router";
+import { useRoute } from "vue-router";
+
+const route = useRoute();
+const schedule_id: number = Number(route.params.id);
 
 const data: Ref<Result<ScheduleQuery> | null> = ref(null);
 const progressItems: Ref<Map<Number, Result<ProgressQuery>>> = ref(new Map());
 
 tryOrAlertAsync(async () => {
-  data.value = await new ScheduleQuery().getOne(35);
+  data.value = await new ScheduleQuery().getOne(schedule_id);
 });
 
 tryOrAlertAsync(async () => {
diff --git a/web/src/views/round/RoundMaker.vue b/web/src/views/round/RoundMaker.vue
index 5cf1bc2fd..c80bde2d0 100644
--- a/web/src/views/round/RoundMaker.vue
+++ b/web/src/views/round/RoundMaker.vue
@@ -1,144 +1,173 @@
 <template>
-  <v-row no-gutters>
-    <!-- Usage of v-col to get 2 columns -->
-    <!-- This v-col is the content on left hand side of the screen -->
-    <v-col class="pa-2 ma-2">
-      <v-card width="100%">
-        <!-- Header for the card title -->
-        <!-- TODO: remove the mockdata from this part -->
-        <v-card-title class="d-flex"
-          ><v-text-field
-            label="Naam ronde"
-            hint="Bv: Copure vrijdag"
-            variant="solo"
-          ></v-text-field
-          ><v-spacer></v-spacer><v-btn>Klaar</v-btn>
-        </v-card-title>
-        <v-divider></v-divider>
-        <v-layout>
-          <v-list width="100%">
-            <v-list-item
-              v-for="(building, i) in round"
-              :key="i"
-              :value="building"
-              fluid
-            >
-              <v-list-item-title>{{ building.name }}</v-list-item-title>
-              <v-list-item-subtitle>{{ building.adress }}</v-list-item-subtitle>
-
-              <!-- Buttons for manipulating the round list -->
-              <template v-slot:prepend>
-                <v-icon
-                  icon="mdi-chevron-up"
-                  @click="moveBuildingUp(i)"
-                ></v-icon>
-                <v-icon
-                  icon="mdi-chevron-down"
-                  @click="moveBuildingDown(i)"
-                ></v-icon>
-                <v-icon
-                  icon="mdi-close"
-                  @click="deleteBuildingFromRound(i, building)"
-                ></v-icon>
-              </template>
-            </v-list-item>
-          </v-list>
-        </v-layout>
-      </v-card>
+  <v-row class="py-0 my-2 mx-2">
+    <v-col
+      cols="1"
+      style="min-width: 100px; max-width: 100%"
+      class="flex-grow-1 flex-shrink-0 py-0 my-0"
+      ><border-card
+        class="mb-4"
+        title="Ronde aanmaken"
+        subtitle="De ronde zal in de volgorde van onderstaande lijst opgeslaan worden"
+      >
+        <template v-slot:append
+          ><v-switch
+            color="primary"
+            v-model="garbageinfo"
+            label="Toon afvalkalender"
+          ></v-switch
+        ></template>
+        <v-text-field
+          class="ml-3 mr-5"
+          label="Naam ronde"
+          v-model="newRoundName"
+          variant="outlined"
+        />
+        <v-card-actions class="d-flex align-center"
+          ><v-spacer></v-spacer
+          ><v-btn class="ml-3" prepend-icon="mdi-check" @click="makeRound()"
+            >Ronde aanmaken</v-btn
+          ></v-card-actions
+        >
+      </border-card>
+      <building-select-card
+        v-for="(building, i) in newRoundBuildings"
+        :key="i"
+        @remove="deleteBuildingFromRound(i, building)"
+        @up="moveBuildingUp(i)"
+        @down="moveBuildingDown(i)"
+        :name="building.name"
+        :building-id="building.id"
+        :address="getFullAddress(building)"
+        :garbageinfo="garbageinfo"
+      ></building-select-card>
     </v-col>
-    <!-- Right hand side of the screen -->
-    <v-col class="pa-2 ma-2">
-      <v-card width="100%">
-        <v-card-title>
-          <v-text-field
-            label="Zoeken op naam van bestaande gebouwen"
-            variant="solo"
-            v-model="searchquery"
-          ></v-text-field>
-        </v-card-title>
-        <v-divider></v-divider>
-        <v-layout>
-          <v-list width="100%">
-            <v-list-item
-              v-for="building in filterlist()"
-              :key="building.listid"
-              :value="building"
-              fluid
-            >
-              <v-list-item-title>{{ building.name }}</v-list-item-title>
-              <v-list-item-subtitle>{{ building.adress }}</v-list-item-subtitle>
-              <template v-slot:prepend>
-                <!-- Button for manipulating the building list -->
-                <v-icon
-                  icon="mdi-arrow-left-bold"
-                  @click="
-                    deleteBuildingFromAvailable(building.listid, building)
-                  "
-                ></v-icon>
-              </template>
-            </v-list-item>
-          </v-list>
-        </v-layout>
-      </v-card>
+    <v-col
+      cols="2"
+      style="min-width: 100px; max-width: 100%"
+      class="flex-grow-1 flex-shrink-0 py-0 ml-5"
+      ><border-card
+        title="Zoeken in gebouwen"
+        subtitle="Klik op een gebouw om deze toe te voegen aan de lijst"
+        class="mb-4 pt-3"
+        ><v-text-field
+          class="ml-3 mr-5 mt-3"
+          label="Naam van gebouw"
+          v-model="searchquery"
+          variant="outlined"
+        />
+      </border-card>
+
+      <building-info-card
+        v-for="entry in filterlist()"
+        :key="entry.listID"
+        :name="entry.building.name"
+        :address="getFullAddress(entry.building)"
+        @clicked="deleteBuildingFromAvailable(entry.listID, entry.building)"
+      >
+      </building-info-card>
     </v-col>
   </v-row>
 </template>
 
 <script lang="ts" setup>
-import { reactive, ref, Ref } from "vue";
+import { ref, Ref, onMounted } from "vue";
+import BorderCard from "@/layouts/CardLayout.vue";
+import BuildingSelectCard from "@/components/cards/BuildingSelectCard.vue";
+import BuildingInfoCard from "@/components/cards/BuildingInfoCard.vue";
+import { Result, BuildingQuery, RoundQuery } from "@selab-2/groep-1-query";
+import { RoundBuildingQuery } from "@selab-2/groep-1-query//src/round_building";
+import { tryOrAlertAsync } from "@/try";
+import router from "@/router";
+
+const availableBuildings = ref<Result<BuildingQuery>[]>([]);
+
+onMounted(() => {
+  tryOrAlertAsync(async () => {
+    /* TODO implement if selab is bumped
+    const allBuildings = await new BuildingQuery().getAll();
+    const available : Result<RoundBuildingQuery>[] = []
+
+    for (const building of allBuildings){
+      try {
+        await new RoundBuildingQuery().getOne(building.id)
+      }
+      catch {
+        available.push(building)
+      }
+    }
+    */
+    availableBuildings.value = await new BuildingQuery().getAll();
+  });
+});
+
+const garbageinfo: Ref<boolean> = ref(true);
+
+const newRoundName = ref<string>("");
 
 // The query that will be used to filter all available buildings
 const searchquery: Ref<string> = ref("");
 
-/*
- * TODO: Building should be populated via a api/backend call
- * For now it's just mockdata
- * Reactive so the lists on screen update in real time
- */
-const buildings: { name: string; adress: string }[] = reactive([
-  { adress: "10841 Sutter CircleSutter Creek95685", name: "Lee" },
-  { adress: "915 Sacramento StreetBakersfield93305", name: "Lartigue" },
-  { adress: "1383 Purdue StreetSan Leandro94579", name: "Anderson" },
-  { adress: "553 South Arlington RoadOrange92869", name: "Campbell" },
-  { adress: "450 C StreetHayward94541", name: "Kahn" },
-  { adress: "915 Sacramento StreetBakersfield93305", name: "Amezaga" },
-  { adress: "800 California 116Sebastopol95472", name: "Petersen" },
-  { adress: "7725 Ney AvenueOakland94605", name: "Hof" },
-  { adress: "3777 Mowry AvenueFremont94538", name: "Johnson" },
-  { adress: "1011 San Jose StreetSan Leandro94577", name: "Rodriguez" },
-]);
-
 /*
  * Round is the list that will be populated by the user
  * Should always start as an empty list
  */
-const round: { name: string; adress: string }[] = reactive([]);
+const newRoundBuildings = ref<Result<BuildingQuery>[]>([]);
 
-// This function will give back the buildings which match the string given by the user
-function filterlist(): { name: string; adress: string; listid: number }[] {
-  let filteredlist: { name: string; adress: string; listid: number }[] = [];
-  buildings.forEach((building, index) => {
+type BuildingEntry = {
+  building: Result<BuildingQuery>;
+  listID: number;
+};
+
+/**
+ * TODO: This function will give back the buildings which match the string given by the user
+ * Change this with an autocomplete but currently doesnt work with objects from mockdata
+ * Pagination is something that could be introduced in the API aswell?
+ */
+function filterlist(): BuildingEntry[] {
+  let filteredlist: BuildingEntry[] = [];
+  availableBuildings.value.forEach((building, index) => {
     if (building.name.toLowerCase().includes(searchquery.value.toLowerCase())) {
       filteredlist.push({
-        name: building.name,
-        adress: building.adress,
-        listid: index,
+        building: building,
+        listID: index,
       });
     }
   });
   return filteredlist;
 }
 
+function getFullAddress(building: Result<BuildingQuery>) {
+  const address = building.address;
+  return `${address.street} ${address.number}, ${address.city}`;
+}
+
+function makeRound() {
+  tryOrAlertAsync(async () => {
+    const newRound = await new RoundQuery().createOne({
+      name: newRoundName.value,
+    });
+
+    for (const building of newRoundBuildings.value) {
+      await new RoundBuildingQuery().createOne({
+        building_id: building.id,
+        round_id: newRound.id,
+      });
+    }
+
+    router.push({ name: "round", params: { id: newRound.id } });
+  });
+}
+
 /*
  * Next 2 functions handle switching buildings from one list to another
  * This one handles switching one from round to all the buildings
  */
 function deleteBuildingFromAvailable(
   index: number,
-  building: { adress: string; name: string },
+  building: Result<BuildingQuery>,
 ) {
-  buildings.splice(index, 1);
-  round.push(building);
+  availableBuildings.value.splice(index, 1);
+  newRoundBuildings.value.push(building);
 }
 
 /*
@@ -146,10 +175,10 @@ function deleteBuildingFromAvailable(
  */
 function deleteBuildingFromRound(
   index: number,
-  building: { adress: string; name: string },
+  building: Result<BuildingQuery>,
 ) {
-  round.splice(index, 1);
-  buildings.push(building);
+  newRoundBuildings.value.splice(index, 1);
+  availableBuildings.value.push(building);
 }
 
 /*
@@ -158,9 +187,9 @@ function deleteBuildingFromRound(
  */
 function moveBuildingUp(index: number) {
   if (index > 0) {
-    let temp = round[index];
-    round[index] = round[index - 1];
-    round[index - 1] = temp;
+    let temp = newRoundBuildings.value[index];
+    newRoundBuildings.value[index] = newRoundBuildings.value[index - 1];
+    newRoundBuildings.value[index - 1] = temp;
   }
 }
 
@@ -168,10 +197,10 @@ function moveBuildingUp(index: number) {
  * Move a building down in the list
  */
 function moveBuildingDown(index: number) {
-  if (round.length - 1 > index) {
-    let temp = round[index];
-    round[index] = round[index + 1];
-    round[index + 1] = temp;
+  if (newRoundBuildings.value.length - 1 > index) {
+    let temp = newRoundBuildings.value[index];
+    newRoundBuildings.value[index] = newRoundBuildings.value[index + 1];
+    newRoundBuildings.value[index + 1] = temp;
   }
 }
 </script>
diff --git a/web/src/views/round/RoundPlanner.vue b/web/src/views/round/RoundPlanner.vue
index c3c1772e6..3d3610338 100644
--- a/web/src/views/round/RoundPlanner.vue
+++ b/web/src/views/round/RoundPlanner.vue
@@ -1,100 +1,246 @@
 <template>
-  <v-container fluid>
-    <v-card>
-      <v-card-actions>
-        <v-select
-          variant="solo"
-          label="Selecteer type week"
-          v-model="selectedWeek"
-          :items="['Even', 'Oneven']"
-        ></v-select>
-        <v-spacer></v-spacer>
-        <v-select
-          variant="solo"
-          label="Selecteer student"
-          v-model="selectedStudent"
-          :items="['Jonathan', 'Oscar', 'Pol', 'Annemie']"
-        ></v-select>
-        <v-spacer></v-spacer>
-        <VueDatePicker
-          class="date-select"
-          v-model="selectedDate"
-          :enable-time-picker="false"
-          input-class-name="v-field__input"
-          :format="format"
-        ></VueDatePicker>
-      </v-card-actions>
-
-      <v-container fluid>
-        <v-card title="Rondes">
-          <v-card-actions>
-            <v-select
-              variant="solo"
-              v-model="selectedRound"
-              label="Aangemaakte rondes"
-              :items="rounds"
-            ></v-select>
-            <v-spacer></v-spacer>
-
-            <v-btn
-              :to="{ name: 'round_new' }"
-              v-if="selectedRound"
-              prepend-icon="mdi-pencil"
-              color="primary"
-              >Bewerk ronde</v-btn
+  <div>
+    <HFillWrapper>
+      <BorderCard
+        class="pa-8"
+        style="display: flex; flex-direction: column; gap: 12px"
+      >
+        <h2>Ronde inplannen: {{ current_round?.name }}</h2>
+
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur.
+        </p>
+
+        <v-row class="py-0">
+          <v-col
+            cols="1"
+            style="min-width: 100px; max-width: 100%"
+            class="flex-grow-1 flex-shrink-0"
+            ><v-select
+              label="Selecteer student"
+              :items="students"
+              v-model="student"
+              prepend-inner-icon="mdi-account"
             >
-          </v-card-actions>
-          <v-list v-if="selectedRound">
-            <v-list-item v-for="building in buildings" :key="building.name">
-              <template v-slot:prepend>
-                <v-icon icon="mdi-office-building"></v-icon>
+              <template v-slot:item="{ props, item }">
+                <v-list-item
+                  v-bind="props"
+                  :title="item.name"
+                  :subtitle="item.name"
+                >
+                  <p>{{ getFullStudentName(item.value) }}</p>
+                </v-list-item>
+              </template>
+
+              <template v-slot:selection="{ item }">
+                <p>{{ getFullStudentName(item.value) }}</p>
               </template>
-              <v-list-item-title>{{ building.name }}</v-list-item-title>
-              <v-list-item-subtitle>{{ building.adress }}</v-list-item-subtitle>
-            </v-list-item>
-          </v-list>
-        </v-card>
-      </v-container>
-      <v-spacer></v-spacer>
-      <v-card-actions class="">
-        <v-spacer></v-spacer>
-        <v-btn prepend-icon="mdi-cancel" color="error">Annuleren</v-btn>
-        <v-btn prepend-icon="mdi-check" color="primary">Ronde opslaan</v-btn>
-      </v-card-actions>
-    </v-card>
-  </v-container>
+            </v-select></v-col
+          ></v-row
+        >
+
+        <div
+          class="selectors"
+          :class="multipleday ? 'grid-cols-4' : 'grid-cols-3'"
+        >
+          <v-select
+            prepend-inner-icon="mdi-replay"
+            variant="outlined"
+            label="Frequentie"
+            v-model="frequency"
+            :items="frequencys"
+            @update:model-value="frequencyCheck()"
+          ></v-select>
+
+          <v-text-field
+            v-model="startDate"
+            prepend-inner-icon="mdi-calendar"
+            variant="outlined"
+            type="date"
+            label="Startdatum"
+          ></v-text-field>
+
+          <v-text-field
+            v-model="endDate"
+            prepend-inner-icon="mdi-calendar"
+            variant="outlined"
+            type="date"
+            label="Einddatum"
+            v-if="multipleday"
+          ></v-text-field>
+
+          <v-text-field
+            prepend-inner-icon="mdi-clock-time-two-outline"
+            label="Starttijd"
+            variant="outlined"
+            type="time"
+            v-model="time"
+          ></v-text-field>
+        </div>
+
+        <div style="display: flex; align-items: center">
+          <v-btn
+            prepend-icon="mdi-plus"
+            @click="updateRounds()"
+            :disabled="student === undefined"
+            variant="tonal"
+            >Toevoegen</v-btn
+          >
+          <div class="flex-grow-1"></div>
+          <v-btn
+            prepend-icon="mdi-check"
+            @click="planRounds()"
+            :disabled="rounds?.length === 0"
+            variant="tonal"
+            >Ronde inplannen</v-btn
+          >
+        </div>
+      </BorderCard>
+
+      <RoundSelectCard
+        v-for="(round, i) in rounds"
+        :key="i"
+        @remove="removeFromRounds(i)"
+        :name="round.name"
+        :date="round.date"
+        :time="round.time"
+      >
+      </RoundSelectCard>
+    </HFillWrapper>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from "vue";
-import VueDatePicker from "@vuepic/vue-datepicker";
+import { ref, onMounted } from "vue";
+import BorderCard from "@/layouts/CardLayout.vue";
+import HFillWrapper from "@/layouts/HFillWrapper.vue";
+import RoundSelectCard from "@/components/cards/RoundSelectCard.vue";
+import {
+  Result,
+  UserQuery,
+  RoundQuery,
+  ScheduleQuery,
+} from "@selab-2/groep-1-query";
+import { tryOrAlertAsync } from "@/try";
+import { useRoute } from "vue-router";
+
+const route = useRoute();
+const round_id: number = Number(route.params.id);
 
-const selectedWeek = ref("");
-const selectedStudent = ref("");
-const selectedDate = ref("");
-const selectedRound = ref("");
+const current_round = ref<Result<RoundQuery>>();
+const students = ref<Result<UserQuery>[]>([]);
+const student = ref<Result<UserQuery>>();
 
-const format = (date: Date) => {
-  const day = date.getDate();
-  const month = date.getMonth() + 1;
-  const year = date.getFullYear();
+onMounted(() => {
+  tryOrAlertAsync(async () => {
+    students.value = await new UserQuery().getAll({ student: true });
+  });
 
-  return `${day}/${month}/${year}`;
+  tryOrAlertAsync(async () => {
+    current_round.value = await new RoundQuery().getOne(round_id);
+  });
+});
+
+const frequencys = ["enkel", "wekelijks", "tweewekelijks", "maandelijks"];
+const frequencyDict: Record<string, number> = {
+  enkel: 1,
+  wekelijks: 7,
+  tweewekelijks: 14,
+  maandelijks: 28,
 };
 
-const rounds = ref(["Gent Zuid", "Station", "Koremarkt"]);
+const startDate = ref<string>(new Date().toISOString().substring(0, 10));
+const endDate = ref<string>(new Date().toISOString().substring(0, 10));
+const time = ref<string>("12:00");
+const frequency = ref<string>(frequencys[0]);
+const multipleday = ref<boolean>(false);
 
-const buildings = ref([
-  { adress: "Lange Violettestraat 50", name: "Upkot" },
-  { adress: "Vlaanderenstraat 4", name: "Appartement 21" },
-  { adress: "Zuidstraat 2", name: "Shopping Gent Zuid" },
-  { adress: "Krookstraat 345", name: "De krook" },
-]);
-</script>
+interface plannedRound {
+  date: Date;
+  name: string;
+  time: string;
+}
+let rounds = ref<Array<plannedRound>>([]);
 
-<style>
-.date-select {
-  margin-left: 10%;
-  width: 20%;
+function updateRounds() {
+  if (frequency.value === "enkel") {
+    endDate.value = startDate.value;
+  }
+  const start = new Date(startDate.value);
+  const end = new Date(endDate.value);
+  let frequencyCount = frequencyDict[frequency.value];
+  for (const d = start; d <= end; d.setDate(d.getDate() + frequencyCount)) {
+    rounds.value.push({
+      name: getFullStudentName(student.value),
+      date: new Date(d),
+      time: time.value,
+    });
+  }
 }
+function frequencyCheck() {
+  if (frequency.value == frequencys[0]) {
+    multipleday.value = false;
+  } else {
+    endDate.value = "";
+    multipleday.value = true;
+  }
+}
+function removeFromRounds(index: number) {
+  rounds.value.splice(index, 1);
+}
+
+function getFullStudentName(s: Result<UserQuery> | undefined): string {
+  if (s) {
+    return s.first_name + " " + s.last_name;
+  } else {
+    return " ";
+  }
+}
+
+function formatDate(d: Date): string {
+  return `${d.getMonth() + 1}/${d.getDate()}/${d.getFullYear()}`;
+}
+
+function planRounds() {
+  for (let plan of rounds.value) {
+    tryOrAlertAsync(async () => {
+      const dt_date = new Date(formatDate(plan.date) + " " + plan.time + ":00");
+      await new ScheduleQuery()
+        .createOne({
+          user_id: student.value?.id,
+          day: dt_date,
+          round_id: round_id,
+        })
+        .then(() => {
+          rounds.value = [];
+        });
+    });
+  }
+}
+</script>
+
+<style lang="sass">
+.flex
+  display: flex
+  gap: 20px
+
+.grid-cols-3
+  grid-template-columns: repeat(3, minmax(0, 1fr))
+
+.grid-cols-4
+  grid-template-columns: repeat(4, minmax(0, 1fr))
+
+.selectors
+  display: grid
+  flex-direction: row
+  gap: 12px
+  height: 80px
+
+  & > *
+    min-height: 100%
 </style>