diff --git a/client/src/pages/StyleGuidePage.vue b/client/src/pages/StyleGuidePage.vue
index 86155d55..ece569d0 100644
--- a/client/src/pages/StyleGuidePage.vue
+++ b/client/src/pages/StyleGuidePage.vue
@@ -2,9 +2,12 @@
 import IconLogout from "@/components/icons/IconLogout.vue";
 import IconSettings from "@/components/icons/IconSettings.vue";
 import ItCheckbox from "@/components/ui/ItCheckbox.vue";
+import ItCheckboxGroup from "@/components/ui/ItCheckboxGroup.vue";
 import ItDropdown from "@/components/ui/ItDropdown.vue";
 import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
-import { reactive } from "vue";
+import ItRadioGroup from "@/components/ui/ItRadioGroup.vue";
+import logger from "loglevel";
+import { reactive, ref } from "vue";
 
 const state = reactive({
   checkboxValue: true,
@@ -68,8 +71,31 @@ function colorBgClass(color: string, value: number) {
   return `bg-${color}-${value}`;
 }
 
+const satisfactionValues = [
+  { name: "Sehr unzufrieden", active: false, value: 1 },
+  { name: "unzufrieden", active: true, value: 2 },
+  { name: "zufrieden", active: false, value: 3 },
+  { name: "Sehr zufrieden", active: false, value: 4 },
+];
+const satisfaction = ref(satisfactionValues[1].value);
+const satisfactionText =
+  'Wie zufrieden bist du mit dem Kurs "Überbetriebliche Kurse" allgemein?';
+
+const sourceLabel = "Wie bist du auf das Kursangebot aufmerksam geworden?";
+const sourceValues = ref([]);
+const sourceItems = [
+  {
+    name: "Internet",
+    value: "I",
+  },
+  {
+    name: "TV",
+    value: "T",
+  },
+];
+
 function log(data: any) {
-  console.log(data);
+  logger.info(data);
 }
 </script>
 
@@ -383,6 +409,17 @@ function log(data: any) {
         Click Me
       </ItDropdown>
     </div>
+    <ItCheckboxGroup
+      v-model="sourceValues"
+      :label="sourceLabel"
+      :items="sourceItems"
+      class="mb-8"
+    />
+    <ItRadioGroup
+      v-model="satisfaction"
+      :label="satisfactionText"
+      :items="satisfactionValues"
+    />
   </main>
 </template>