diff --git a/package.json b/package.json
index 90d42bc..8a152d2 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,8 @@
   },
   "dependencies": {
     "react": "^19.2.3",
-    "react-dom": "^19.2.3"
+    "react-dom": "^19.2.3",
+    "react-icons": "^5.5.0"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.3.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b08c46b..41a2c4d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,6 +14,9 @@ importers:
       react-dom:
         specifier: ^19.2.3
         version: 19.2.3(react@19.2.3)
+      react-icons:
+        specifier: ^5.5.0
+        version: 5.5.0(react@19.2.3)
     devDependencies:
       '@eslint/eslintrc':
         specifier: ^3.3.3
@@ -1782,6 +1785,11 @@ packages:
     peerDependencies:
       react: ^19.2.3
 
+  react-icons@5.5.0:
+    resolution: {integrity: sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==}
+    peerDependencies:
+      react: '*'
+
   react@19.2.3:
     resolution: {integrity: sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==}
     engines: {node: '>=0.10.0'}
@@ -3733,6 +3741,10 @@ snapshots:
       react: 19.2.3
       scheduler: 0.27.0
 
+  react-icons@5.5.0(react@19.2.3):
+    dependencies:
+      react: 19.2.3
+
   react@19.2.3: {}
 
   read-cache@1.0.0:
diff --git a/src/App.tsx b/src/App.tsx
index 4366da4..eaf9389 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,7 @@
+import Landing from '@/components/Landing'
+
 function App() {
-  return <>Minimal project</>
+  return <Landing />
 }
 
 export default App
diff --git a/src/components/Landing.tsx b/src/components/Landing.tsx
new file mode 100644
index 0000000..7aecdb6
--- /dev/null
+++ b/src/components/Landing.tsx
@@ -0,0 +1,52 @@
+import { FaGoogle, FaGithub, FaInstagram } from 'react-icons/fa'
+
+function Landing() {
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-gray-100 p-6">
+      <div className="grid w-full max-w-6xl grid-cols-1 overflow-hidden rounded-xl bg-white shadow-2xl md:grid-cols-2">
+        <div className="flex flex-col justify-between p-10 md:p-14">
+          <div>
+            <div className="mb-6 flex items-center gap-3">
+              <span className="text-lg font-semibold">UNEFA Codex</span>
+            </div>
+
+            <h1 className="mb-2 text-3xl font-bold">Welcome Back</h1>
+
+            <label className="mb-3 block text-sm text-gray-500">Workspace</label>
+            <div className="flex items-center rounded-xl border border-gray-100 bg-gray-50 p-2 shadow-sm">
+              <label>Elige un Workspace:</label>
+            </div>
+
+            <button className="mt-6 w-full rounded-lg bg-gradient-to-r from-blue-600 to-blue-500 py-3 font-semibold text-white shadow-md hover:from-blue-700">
+              Continue
+            </button>
+
+            <div className="my-6 flex items-center text-sm text-gray-400">
+              <div className="h-px flex-1 bg-gray-200" />
+              <span className="px-3">sigue a bufferring </span>
+              <div className="h-px flex-1 bg-gray-200" />
+            </div>
+
+            <div className="flex gap-4">
+              <button className="rounded-full border p-3 shadow-sm transition hover:scale-105">
+                <FaGoogle />
+              </button>
+              <button className="rounded-full bg-black p-3 text-white shadow-sm transition hover:scale-105">
+                <FaGithub />
+              </button>
+              <button className="rounded-full bg-blue-500 p-3 text-white shadow-sm transition hover:scale-105">
+                <FaInstagram />
+              </button>
+            </div>
+          </div>
+
+          <p className="mt-4 text-xs text-gray-400">Somo la cabra lo reye con lo dioses</p>
+        </div>
+
+        <div className="object-cover"></div>
+      </div>
+    </div>
+  )
+}
+
+export default Landing