diff --git a/src/app/page.tsx b/src/app/page.tsx
index db7393c..89e2af4 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,7 +1,9 @@
+import Example from "@/components/Example";
+
 const Home = () => {
   return (
     <div className="flex h-screen w-screen items-center justify-center">
-      Hello World
+      <Example />
     </div>
   );
 };
diff --git a/src/components/Example.tsx b/src/components/Example.tsx
new file mode 100644
index 0000000..f978780
--- /dev/null
+++ b/src/components/Example.tsx
@@ -0,0 +1,16 @@
+const Example = () => {
+  return (
+    <div className="flex h-screen w-screen flex-col items-center justify-center space-y-5">
+      <div className="text-5xl text-red-600">EXAMPLE COMPONENT</div>
+
+      <div className="flex h-80 w-1/2 border-2 border-black">
+        <div className="w-1/2 bg-orange-300" />
+        <div className="w-1/2 bg-blue-300" />
+      </div>
+
+      <div className="w-1/2 text-left font-bold italic">Example Component</div>
+    </div>
+  );
+};
+
+export default Example;