diff --git a/src/App.tsx b/src/App.tsx
index f199133..7e61f5e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,7 +1,7 @@
 import { createSignal, For, Show } from "solid-js";
 import { Dynamic } from "solid-js/web";
 import { FooComponent } from "./Foo";
-
+import { NewFooComponent } from "./NewFoo";
 const RedDiv = () => <div style="color: red">Red</div>;
 const GreenDiv = () => <div style="color: green">Green</div>;
 const BlueDiv = () => <div style="color: blue">Blue</div>;
@@ -58,6 +58,7 @@ function App() {
       <div class="m-12 items-center justify-center^ flex h-screen shadow-lg bg-twitter-blue text-center">
         red background
       </div>
+      <NewFooComponent/>
     </>
   );
 }
diff --git a/src/NewFoo.tsx b/src/NewFoo.tsx
new file mode 100644
index 0000000..3c4ca16
--- /dev/null
+++ b/src/NewFoo.tsx
@@ -0,0 +1,11 @@
+function NewFooComponent(){
+    return (
+        <>
+            <div class="md (768px) justify-center bg-amber-100 py-7 justify-center text-center">
+                New Foo
+            </div>
+        </>
+    );
+}
+
+export{ NewFooComponent }