diff --git a/src/App.tsx b/src/App.tsx
index d15aed2..f779d0a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -54,7 +54,7 @@ function App() {
         </For>
       </select>
       <Dynamic component={options[selected()]} />
-      <FooComponent />
+      <FooComponent text="props test"/>
     </>
   );
 }
diff --git a/src/Foo.tsx b/src/Foo.tsx
index e66b22c..2341210 100644
--- a/src/Foo.tsx
+++ b/src/Foo.tsx
@@ -1,5 +1,14 @@
-export function FooComponent(){
+import { createSignal} from "solid-js";
+
+export function FooComponent(props){
+const [theme, setTheme] = createSignal("light")
   return (
-    <div> Exported Foo Component</div>
+    <>
+        <div class={theme() === "light" ? "light-theme" : "dark-theme"}>
+          This div's theme is determined dynamically!
+        </div>
+        <h1>props.text</h1>
+    </>
+
   );
 }
\ No newline at end of file