diff --git a/lib/nthul/src/server/server-target/server-target.tsx b/lib/nthul/src/server/server-target/server-target.tsx
index cd58656a..7092a650 100644
--- a/lib/nthul/src/server/server-target/server-target.tsx
+++ b/lib/nthul/src/server/server-target/server-target.tsx
@@ -1,18 +1,30 @@
 import * as React from "react";
+import { cookies } from "next/headers";
+import { DEFAULT_ID } from "../../constants";
+import type { ColorSchemePreference } from "../../hooks/use-theme";
 
 interface ServerTargetProps {
-	children?: React.ReactNode;
+	tag?: keyof JSX.IntrinsicElements;
+	targetId?: string;
 }
 
 /**
  * # ServerTarget
- * 
+ * --todo 
+ * update comments
+ * create colorswitch
+ * update examples
  */
-export function ServerTarget({ children }: ServerTargetProps) {
-	return (
-		<div>
-			<h1 data-testid="server-target-h1">server-target</h1>
-			{children}
-		</div>
-	);
+export function ServerTarget({ tag, targetId }: ServerTargetProps) {
+	const key = targetId || DEFAULT_ID;
+	const [theme, csp, scs] = (cookies().get(key)?.value ?? ",system,light").split(",") as [
+		string,
+		ColorSchemePreference,
+		"dark" | "light",
+	];
+
+	const cls = `th-${theme} ${csp === "system" ? scs : csp}`;
+
+	const Tag = tag ?? "div";
+	return <Tag className={cls} data-nth="next" id={targetId ?? DEFAULT_ID} />;
 }