diff --git a/application/config/routes.php b/application/config/routes.php
index aa4ba9db8..e06149b98 100644
--- a/application/config/routes.php
+++ b/application/config/routes.php
@@ -64,6 +64,7 @@ $route['api/v1/system/[S|s]prache/(:any)'] = 'api/v1/system/sprache2/$1';
 $route['Cis/LvPlan/.*'] = 'Cis/LvPlan/index/$1';
 $route['Cis/MyLvPlan/.*'] = 'Cis/MyLvPlan/index/$1';
 $route['Cis/MyLv/.*'] = 'Cis/MyLv/index/$1';
+$route['Cis/Coodle'] = 'Cis/Coodle';
 
 $route['Abgabetool/Assistenz'] = 'Cis/Abgabetool/Assistenz';
 $route['Abgabetool/Assistenz/(:any)'] = 'Cis/Abgabetool/Assistenz/$1';
diff --git a/application/controllers/Cis/Coodle.php b/application/controllers/Cis/Coodle.php
new file mode 100644
index 000000000..d3d74ef3a
--- /dev/null
+++ b/application/controllers/Cis/Coodle.php
@@ -0,0 +1,30 @@
+<?php
+
+if (! defined('BASEPATH')) exit('No direct script access allowed');
+
+/**
+ *
+ */
+class Coodle extends Auth_Controller
+{
+	/**
+	 * Constructor
+	 */
+	public function __construct()
+	{
+		parent::__construct([
+			'index' => [self::PERM_LOGGED],
+		]);
+	}
+
+	// -----------------------------------------------------------------------------------------------------------------
+	// Public methods
+
+	/**
+	 * @return void
+	 */
+	public function index()
+	{
+		$this->load->view('CisRouterView/CisRouterView.php', ["viewData" => [], 'route' => 'Coodle']);
+	}
+}
diff --git a/public/js/apps/Dashboard/Fhc.js b/public/js/apps/Dashboard/Fhc.js
index 140c76402..a0a00dfd6 100644
--- a/public/js/apps/Dashboard/Fhc.js
+++ b/public/js/apps/Dashboard/Fhc.js
@@ -10,6 +10,7 @@ import Profil from "../../components/Cis/Profil/Profil.js";
 import Raumsuche from "../../components/Cis/Raumsuche/Raumsuche.js";
 import CmsNews from "../../components/Cis/Cms/News.js";
 import CmsContent from "../../components/Cis/Cms/Content.js";
+import Coodle from "../../components/Cis/Coodle/Coodle.js";
 import Info from "../../components/Cis/Mylv/Semester/Studiengang/Lv/Info.js";
 import RoomInformation, {DEFAULT_MODE_RAUMINFO} from "../../components/Cis/Mylv/RoomInformation.js";
 import AbgabetoolStudent from "../../components/Cis/Abgabetool/AbgabetoolStudent.js";
@@ -197,6 +198,12 @@ const router = VueRouter.createRouter({
 				};
 			}
 		},
+		{
+			path: `/Cis/Coodle`,
+			name: 'Coodle',
+			component: Coodle,
+			props: true
+		},
 		{
 			path: `/Cis4`,
 			name: 'Cis4',
diff --git a/public/js/components/Cis/Coodle/Components/CoodleSurvey.js b/public/js/components/Cis/Coodle/Components/CoodleSurvey.js
new file mode 100644
index 000000000..526a46f78
--- /dev/null
+++ b/public/js/components/Cis/Coodle/Components/CoodleSurvey.js
@@ -0,0 +1,15 @@
+export default {
+	name: "CoodleSurvey",
+	components: {},
+	props: {},
+	data() {
+		return {};
+	},
+	computed: {},
+	watch: {},
+	methods: {},
+	template: /*html*/ `
+	<div>
+		coodle survey placeholder
+	</div>`,
+};
diff --git a/public/js/components/Cis/Coodle/Coodle.js b/public/js/components/Cis/Coodle/Coodle.js
new file mode 100644
index 000000000..27eb55186
--- /dev/null
+++ b/public/js/components/Cis/Coodle/Coodle.js
@@ -0,0 +1,68 @@
+import CoodleSurvey from "./Components/CoodleSurvey.js";
+
+export default {
+	name: "Coodle",
+	components: { CoodleSurvey },
+	props: {},
+	data() {
+		return {
+			view: "activeSurveysTable",
+			survey: null,
+		};
+	},
+	computed: {
+		isDarkMode() {
+			return this.$theme.theme_name.value == "dark";
+		},
+	},
+	watch: {},
+	methods: {
+		getTabStylingClass(isSelected) {
+			if (this.isDarkMode && isSelected) {
+				return "btn-light";
+			} else if (this.isDarkMode && !isSelected) {
+				return "btn-outline-light";
+			} else if (!this.isDarkMode && isSelected) {
+				return "btn-dark";
+			} else {
+				return "btn-outline-dark";
+			}
+		},
+		switchToTab(tab) {
+			this.view = tab;
+			this.survey = null;
+		},
+	},
+	template: /*html*/ `
+	<div class="h-100 d-flex flex-column gap-2">
+		<h2 class="m-0">Coodle</h2>
+		<div class="d-flex flex-row gap-2 w-100 overflow-x-auto">
+			<div
+				@click="switchToTab('activeSurveysTable')"
+				:class="getTabStylingClass(view === 'activeSurveysTable')"
+				class="btn text-nowrap"
+			>
+				Active surveys
+			</div>
+			<div
+				@click="switchToTab('pastSurveysTable')"
+				:class="getTabStylingClass(view === 'pastSurveysTable')"
+				class="btn text-nowrap"
+			>
+				Past surveys
+			</div>
+			<div
+				@click="switchToTab('survey')"
+				:class="getTabStylingClass(view === 'survey' && !survey?.id)"
+				class="btn text-nowrap"
+			>
+				+ Create new survey
+			</div>
+		</div>
+		<div class="flex-grow-1">
+			<span v-if="view === 'activeSurveysTable'">active surveys table placeholder</span>
+			<span v-else-if="view === 'pastSurveysTable'">past surveys table placeholder</span>
+			<coodle-survey v-else-if="view === 'survey'" :survey="survey" />
+		</div>
+	</div>`,
+};