diff --git a/src/components/project.tsx b/src/components/project.tsx
new file mode 100644
index 0000000..a941566
--- /dev/null
+++ b/src/components/project.tsx
@@ -0,0 +1,12 @@
+export interface ProjectProps {
+  title: string;
+  content: string;
+}
+
+export default function Project({ title }: ProjectProps) {
+  return (
+    <div className="w-80 h-96 bg-gray-700 rounded-xl text-white flex justify-center text-xl">
+      {title}
+    </div>
+  );
+}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 7093c41..733ee42 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,7 +1,36 @@
+import Project, { ProjectProps } from "@/components/project";
+
 export default function Home() {
+  const projects: ProjectProps[] = [
+    {
+      title: "Project 1",
+      content: "Project content 1",
+    },
+    {
+      title: "Project 2",
+      content: "Project content 2",
+    },
+  ];
   return (
-    <main>
-      <p>Welcome to Openapps</p>
+    <main className="flex flex-col gap-6 w-full p-4">
+      <div className="flex flex-row items-center">
+        <div className="w-3/4">Animacja</div>
+
+        <div className="w-1/4 text-xl">
+          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ea officia
+          dolor repellat vero, consectetur consequuntur est architecto!
+          Distinctio, autem optio. Quas qui eaque libero corporis quo
+          consequuntur ex ullam cupiditate!
+        </div>
+      </div>
+
+      <div className="flex justify-center text-2xl">Polecane</div>
+
+      <div className="flex flex-row justify-center gap-4">
+        {projects.map((project, index) => (
+          <Project {...project} key={index} />
+        ))}
+      </div>
     </main>
   );
 }