diff --git a/apps/hub/app/(app)/admin/penalty/columns.tsx b/apps/hub/app/(app)/admin/penalty/columns.tsx
index 9fb24087..f36a94c8 100644
--- a/apps/hub/app/(app)/admin/penalty/columns.tsx
+++ b/apps/hub/app/(app)/admin/penalty/columns.tsx
@@ -5,7 +5,7 @@ import { Penalty, PenaltyType, Report, User } from "@repo/db";
 import { ColumnDef } from "@tanstack/react-table";
 import { formatDistance } from "date-fns";
 import { de } from "date-fns/locale";
-import { cn } from "../../../../helper/cn";
+import { cn } from "@repo/shared-components";
 import { HobbyKnifeIcon } from "@radix-ui/react-icons";
 
 export const penaltyColumns: ColumnDef<Penalty & { Report: Report; CreatedUser: User | null }>[] = [
diff --git a/apps/hub/app/(app)/admin/user/[id]/_components/forms.tsx b/apps/hub/app/(app)/admin/user/[id]/_components/forms.tsx
index abfb611d..b0085d7c 100644
--- a/apps/hub/app/(app)/admin/user/[id]/_components/forms.tsx
+++ b/apps/hub/app/(app)/admin/user/[id]/_components/forms.tsx
@@ -39,7 +39,7 @@ import { Select } from "../../../../../_components/ui/Select";
 import { UserOptionalDefaults, UserOptionalDefaultsSchema } from "@repo/db/zod";
 import { useRouter } from "next/navigation";
 import { PaginatedTable, PaginatedTableRef } from "_components/PaginatedTable";
-import { cn } from "../../../../../../helper/cn";
+import { cn } from "@repo/shared-components";
 import {
 	ChartBarBigIcon,
 	Check,
diff --git a/apps/hub/app/(app)/events/_components/modalBtn.tsx b/apps/hub/app/(app)/events/_components/modalBtn.tsx
index a2dbc617..3734cacf 100644
--- a/apps/hub/app/(app)/events/_components/modalBtn.tsx
+++ b/apps/hub/app/(app)/events/_components/modalBtn.tsx
@@ -2,7 +2,7 @@
 import { use, useEffect } from "react";
 import { CheckCircledIcon, CalendarIcon, EnterIcon } from "@radix-ui/react-icons";
 import { Event, EventAppointment, Participant, User } from "@repo/db";
-import { cn } from "../../../../helper/cn";
+import { cn } from "@repo/shared-components";
 import { inscribeToMoodleCourse, upsertParticipant } from "../actions";
 import { Check, Clock10Icon, EyeIcon, TriangleAlert } from "lucide-react";
 import { useForm } from "react-hook-form";
diff --git a/apps/hub/app/_components/ui/Button.tsx b/apps/hub/app/_components/ui/Button.tsx
index e93d7c26..5e4acc6e 100644
--- a/apps/hub/app/_components/ui/Button.tsx
+++ b/apps/hub/app/_components/ui/Button.tsx
@@ -1,5 +1,5 @@
 import { ButtonHTMLAttributes, DetailedHTMLProps, useEffect, useState } from "react";
-import { cn } from "../../../helper/cn";
+import { cn } from "@repo/shared-components";
 
 export const Button = ({
 	isLoading,
diff --git a/apps/hub/app/_components/ui/Input.tsx b/apps/hub/app/_components/ui/Input.tsx
index 58809865..5684d700 100644
--- a/apps/hub/app/_components/ui/Input.tsx
+++ b/apps/hub/app/_components/ui/Input.tsx
@@ -1,11 +1,6 @@
 import React from "react";
-import {
-	FieldValues,
-	Path,
-	RegisterOptions,
-	UseFormReturn,
-} from "react-hook-form";
-import { cn } from "../../../helper/cn";
+import { FieldValues, Path, RegisterOptions, UseFormReturn } from "react-hook-form";
+import { cn } from "@repo/shared-components";
 
 interface InputProps<T extends FieldValues>
 	extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "form"> {
@@ -30,17 +25,12 @@ export const Input = <T extends FieldValues>({
 			<span className="text-lg flex items-center gap-2">{label}</span>
 			<input
 				{...form.register(name, formOptions)}
-				className={cn(
-					"input input-bordered w-full placeholder:text-neutral-600",
-					className,
-				)}
+				className={cn("input input-bordered w-full placeholder:text-neutral-600", className)}
 				placeholder={placeholder}
 				{...inputProps}
 			/>
 			{form.formState.errors[name] && (
-				<p className="text-error">
-					{form.formState.errors[name].message as string}
-				</p>
+				<p className="text-error">{form.formState.errors[name].message as string}</p>
 			)}
 		</label>
 	);
diff --git a/apps/hub/app/_components/ui/List.tsx b/apps/hub/app/_components/ui/List.tsx
index c3523b3e..99852e26 100644
--- a/apps/hub/app/_components/ui/List.tsx
+++ b/apps/hub/app/_components/ui/List.tsx
@@ -1,14 +1,8 @@
 import DatePicker, { DatePickerProps, registerLocale } from "react-datepicker";
-import {
-	Control,
-	Controller,
-	FieldValues,
-	Path,
-	PathValue,
-} from "react-hook-form";
+import { Control, Controller, FieldValues, Path, PathValue } from "react-hook-form";
 import { de } from "date-fns/locale";
 import { useState } from "react";
-import { cn } from "../../../helper/cn";
+import { cn } from "@repo/shared-components";
 registerLocale("de", de);
 
 interface ListInputProps<T extends FieldValues>
diff --git a/apps/hub/app/_components/ui/MDEditor.tsx b/apps/hub/app/_components/ui/MDEditor.tsx
index 42dc4997..37dd93d7 100644
--- a/apps/hub/app/_components/ui/MDEditor.tsx
+++ b/apps/hub/app/_components/ui/MDEditor.tsx
@@ -1,46 +1,37 @@
-'use client';
-import MDEditor from '@uiw/react-md-editor';
-import {
-  FieldValues,
-  Path,
-  RegisterOptions,
-  UseFormReturn,
-} from 'react-hook-form';
-import { cn } from '../../../helper/cn';
+"use client";
+import MDEditor from "@uiw/react-md-editor";
+import { FieldValues, Path, RegisterOptions, UseFormReturn } from "react-hook-form";
+import { cn } from "@repo/shared-components";
 
 interface MarkdownEditorProps<T extends FieldValues> {
-  name: Path<T>;
-  form: UseFormReturn<T>;
-  formOptions?: RegisterOptions<T>;
-  label?: string;
-  placeholder?: string;
-  className?: string;
+	name: Path<T>;
+	form: UseFormReturn<T>;
+	formOptions?: RegisterOptions<T>;
+	label?: string;
+	placeholder?: string;
+	className?: string;
 }
 
 export const MarkdownEditor = <T extends FieldValues>({
-  name,
-  label = name,
-  placeholder = label,
-  form,
-  className,
+	name,
+	label = name,
+	placeholder = label,
+	form,
+	className,
 }: MarkdownEditorProps<T>) => {
-  return (
-    <label className="floating-label w-full mt-5">
-      <span className="text-lg flex items-center gap-2">{label}</span>
-      <div className={cn('border rounded-lg p-2 w-full', className)}>
-        <MDEditor
-          value={form.watch(name)}
-          onChange={(value) =>
-            form.setValue(name, value as any, { shouldValidate: true })
-          }
-          textareaProps={{ placeholder }}
-        />
-      </div>
-      {form.formState.errors[name] && (
-        <p className="text-error">
-          {form.formState.errors[name].message as string}
-        </p>
-      )}
-    </label>
-  );
+	return (
+		<label className="floating-label w-full mt-5">
+			<span className="text-lg flex items-center gap-2">{label}</span>
+			<div className={cn("border rounded-lg p-2 w-full", className)}>
+				<MDEditor
+					value={form.watch(name)}
+					onChange={(value) => form.setValue(name, value as any, { shouldValidate: true })}
+					textareaProps={{ placeholder }}
+				/>
+			</div>
+			{form.formState.errors[name] && (
+				<p className="text-error">{form.formState.errors[name].message as string}</p>
+			)}
+		</label>
+	);
 };
diff --git a/apps/hub/app/_components/ui/Select.tsx b/apps/hub/app/_components/ui/Select.tsx
index 4d064af5..94fa04e4 100644
--- a/apps/hub/app/_components/ui/Select.tsx
+++ b/apps/hub/app/_components/ui/Select.tsx
@@ -1,20 +1,11 @@
 "use client";
-import {
-	FieldValues,
-	Path,
-	RegisterOptions,
-	UseFormReturn,
-} from "react-hook-form";
-import SelectTemplate, {
-	Props as SelectTemplateProps,
-	StylesConfig,
-} from "react-select";
-import { cn } from "../../../helper/cn";
+import { FieldValues, Path, RegisterOptions, UseFormReturn } from "react-hook-form";
+import SelectTemplate, { Props as SelectTemplateProps, StylesConfig } from "react-select";
+import { cn } from "@repo/shared-components";
 import dynamic from "next/dynamic";
 import { CSSProperties } from "react";
 
-interface SelectProps<T extends FieldValues>
-	extends Omit<SelectTemplateProps, "form"> {
+interface SelectProps<T extends FieldValues> extends Omit<SelectTemplateProps, "form"> {
 	label?: any;
 	name: Path<T>;
 	form: UseFormReturn<T> | any;
@@ -70,9 +61,7 @@ const SelectCom = <T extends FieldValues>({
 }: SelectProps<T>) => {
 	return (
 		<div>
-			<span className="label-text text-lg flex items-center gap-2">
-				{label}
-			</span>
+			<span className="label-text text-lg flex items-center gap-2">{label}</span>
 			<SelectTemplate
 				onChange={(newValue: any) => {
 					if (Array.isArray(newValue)) {
@@ -89,12 +78,8 @@ const SelectCom = <T extends FieldValues>({
 				}}
 				value={
 					(inputProps as any)?.isMulti
-						? (inputProps as any).options?.filter((o: any) =>
-								form.watch(name)?.includes(o.value),
-							)
-						: (inputProps as any).options?.find(
-								(o: any) => o.value === form.watch(name),
-							)
+						? (inputProps as any).options?.filter((o: any) => form.watch(name)?.includes(o.value))
+						: (inputProps as any).options?.find((o: any) => o.value === form.watch(name))
 				}
 				styles={customStyles as any}
 				className={cn("w-full placeholder:text-neutral-600", className)}
@@ -102,17 +87,13 @@ const SelectCom = <T extends FieldValues>({
 				{...inputProps}
 			/>
 			{form.formState.errors[name]?.message && (
-				<p className="text-error">
-					{form.formState.errors[name].message as string}
-				</p>
+				<p className="text-error">{form.formState.errors[name].message as string}</p>
 			)}
 		</div>
 	);
 };
 
-const SelectWrapper = <T extends FieldValues>(props: SelectProps<T>) => (
-	<SelectCom {...props} />
-);
+const SelectWrapper = <T extends FieldValues>(props: SelectProps<T>) => <SelectCom {...props} />;
 
 export const Select = dynamic(() => Promise.resolve(SelectWrapper), {
 	ssr: false,
diff --git a/apps/hub/app/_components/ui/Switch.tsx b/apps/hub/app/_components/ui/Switch.tsx
index d05fac5b..094af4bd 100644
--- a/apps/hub/app/_components/ui/Switch.tsx
+++ b/apps/hub/app/_components/ui/Switch.tsx
@@ -1,5 +1,5 @@
 import { FieldValues, Path, RegisterOptions, UseFormReturn } from "react-hook-form";
-import { cn } from "../../../helper/cn";
+import { cn } from "@repo/shared-components";
 
 interface InputProps<T extends FieldValues>
 	extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "form"> {