diff --git a/.tkb b/.tkb
index cd814f18..cc7961a0 100644
--- a/.tkb
+++ b/.tkb
@@ -34,7 +34,7 @@
     "a7ksr41sN7kQNaH8Io-dV": {
       "id": "a7ksr41sN7kQNaH8Io-dV",
       "description": "Add support for css modules",
-      "columnId": "column-todo"
+      "columnId": "column-done"
     }
   },
   "columns": [
@@ -42,8 +42,7 @@
       "id": "column-todo",
       "title": "To do",
       "tasksIds": [
-        "p1R-Q4atxMo-29mSa7mb6",
-        "a7ksr41sN7kQNaH8Io-dV"
+        "p1R-Q4atxMo-29mSa7mb6"
       ]
     },
     {
@@ -57,6 +56,7 @@
       "id": "column-done",
       "title": "Done",
       "tasksIds": [
+        "a7ksr41sN7kQNaH8Io-dV",
         "RtA7NBfPOlfnVHqk54rMD",
         "fqhes_YS14GQopOUs7K-7",
         "task-ZJpp-dpxx3KxRMsAPNuMC",
diff --git a/packages/shared-ui/src/lib-examples/index.tsx b/packages/shared-ui/src/lib-examples/index.tsx
index 4607073f..9017a5bd 100644
--- a/packages/shared-ui/src/lib-examples/index.tsx
+++ b/packages/shared-ui/src/lib-examples/index.tsx
@@ -1,10 +1,11 @@
 import { Logo } from "../common/logo";
 import SimpleColorSwitch from "./simple-color-switch";
 import ThemeSwitching from "./theme-switching";
+import styles from "./lib-examples.module.css";
 
 export default function LibExamples() {
   return (
-    <div>
+    <div className={styles["lib-example-container"]}>
       <h1>
         <Logo /> examples.
       </h1>
diff --git a/packages/shared-ui/src/lib-examples/lib-examples.module.css b/packages/shared-ui/src/lib-examples/lib-examples.module.css
new file mode 100644
index 00000000..bf2715d7
--- /dev/null
+++ b/packages/shared-ui/src/lib-examples/lib-examples.module.css
@@ -0,0 +1,23 @@
+.lib-example-container {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  flex-wrap: wrap;
+}
+
+.example {
+  min-width: 200px;
+  min-height: 200px;
+  flex-grow: 1;
+  border-radius: 20px;  
+}
+
+.example * {
+  background: var(--bg-color);
+}
+
+
+.lib-example-container h1 {
+  text-align: center;
+  width: 100%;
+}
diff --git a/packages/shared-ui/src/lib-examples/simple-color-switch/index.tsx b/packages/shared-ui/src/lib-examples/simple-color-switch/index.tsx
index f10e36d1..730195d7 100644
--- a/packages/shared-ui/src/lib-examples/simple-color-switch/index.tsx
+++ b/packages/shared-ui/src/lib-examples/simple-color-switch/index.tsx
@@ -1,3 +1,16 @@
+import { ColorSwitch, ThemeSwitcher } from "nthul";
+import { ServerTarget } from "nthul/server";
+import styles from "../lib-examples.module.css";
+
+const targetId = "simple-color-switch";
 export default function SimpleColorSwitch() {
-  return <div></div>;
+  return (
+    <div className={styles.example}>
+      <ServerTarget targetId={targetId} />
+      <ThemeSwitcher targetId={targetId} />
+      <header>
+        <ColorSwitch targetId={targetId} />
+      </header>
+    </div>
+  );
 }
diff --git a/packages/shared-ui/src/lib-examples/theme-switching/index.tsx b/packages/shared-ui/src/lib-examples/theme-switching/index.tsx
index 9c236600..4e336e93 100644
--- a/packages/shared-ui/src/lib-examples/theme-switching/index.tsx
+++ b/packages/shared-ui/src/lib-examples/theme-switching/index.tsx
@@ -1,3 +1,26 @@
-export default function ThemeSwitching() {
-  return <div></div>;
+import { ColorSwitch, ThemeSwitcher } from "nthul";
+import { ServerTarget } from "nthul/server";
+import styles from "../lib-examples.module.css";
+
+const targetId = "theme-switching";
+const themes = ["theme1", "theme2"];
+export default function SimpleColorSwitch() {
+  return (
+    <div className={styles.example}>
+      <ServerTarget targetId={targetId} />
+      <ThemeSwitcher targetId={targetId} />
+      <header>
+        <ColorSwitch targetId={targetId} />
+      </header>
+      <main>
+        <select name="" id="">
+          {themes.map(th => (
+            <option value={th} key={th}>
+              {th}
+            </option>
+          ))}
+        </select>
+      </main>
+    </div>
+  );
 }
diff --git a/packages/shared-ui/src/root-layout.tsx b/packages/shared-ui/src/root-layout.tsx
index fdfa7acf..7a72a412 100644
--- a/packages/shared-ui/src/root-layout.tsx
+++ b/packages/shared-ui/src/root-layout.tsx
@@ -8,6 +8,7 @@ import { Cards } from "./cards";
 import { Description } from "./root/description";
 import { Hero } from "./root/hero";
 import { Footer } from "./root/footer";
+import LibExamples from "./lib-examples";
 
 export type SharedRootLayoutProps = HTMLProps<HTMLElement>;
 
@@ -19,6 +20,7 @@ export function SharedRootLayout({ children, className = "", ...props }: SharedR
         <Description />
         {children}
         <Hero />
+        <LibExamples />
         <Cards />
       </main>
       <Footer />