diff --git a/front/src/App.css b/front/src/App.css
index 74b5e053..6c7154c8 100644
--- a/front/src/App.css
+++ b/front/src/App.css
@@ -36,3 +36,25 @@
     transform: rotate(360deg);
   }
 }
+
+.column-sponsor {
+  background: #fff;
+  max-width: 50%;
+  width: 50%;
+  float: left;
+  height: 100vh;
+  overflow-x: scroll;
+  overflow-y: scroll;
+  overflow: scroll;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  &:last-child {
+    background: black;
+    border-top: 1px solid rgba(255,255,255,0.5);
+  }
+  @media (max-width: 600px) {
+    max-width: 100%;
+    width: 100%;
+  }
+}
diff --git a/front/src/Router.js b/front/src/Router.js
index 46af5ff5..2a26e359 100644
--- a/front/src/Router.js
+++ b/front/src/Router.js
@@ -1,7 +1,7 @@
 import React from "react";
 import Home from "./components/Home";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
-import Sponsor from "./components/Sponsor";
+import Sponsor from "./components/Sponsor/Sponsor";
 import Athlete from "./components/Athlete/Athlete";
 const Router = () => {
   return (
diff --git a/front/src/components/Home.jsx b/front/src/components/Home.jsx
index cbab6cee..a5e7f19b 100644
--- a/front/src/components/Home.jsx
+++ b/front/src/components/Home.jsx
@@ -1,9 +1,23 @@
 import React from "react";
 import Navigation from "./Navigation";
+import { useNavigate } from "react-router-dom";
 const Home = () => {
+
+  const navigate = useNavigate();
+
+  const handleSubmit = () => navigate('/sponsor');
+
   return <div>
     Home
     <Navigation />
+
+      <div className="m-5 text-end">
+        <form onSubmit={handleSubmit}>
+          <input type="text" placeholder="" />
+          <input type="submit" className="btn btn-primary"/>
+        </form>
+      </div>
+
   </div>;
 };
 
diff --git a/front/src/components/Sponsor.jsx b/front/src/components/Sponsor.jsx
deleted file mode 100644
index 1e21cac4..00000000
--- a/front/src/components/Sponsor.jsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from "react";
-import Navigation from "./Navigation";
-import sponsors from '../database/sponsors.json'
-
-const Sponsor = () => {
-
-  console.log(sponsors)
-    return (
-    <div>
-        Sponsor
-        <Navigation />
-
-        <div className="d-flex justify-content-around flex-wrap gap-5 container mt-5">
-            {
-              sponsors.map(({id, company, email, picture}) => {
-                return (
-
-                    <div key={id} className="card rounded" style={{width: '18rem'}}>
-                      <img src={picture} alt={company} className="card-img-top" />
-                        <div class="card-body">
-                          <h3 className="card-title">{company}</h3>
-                          <p className="card-text">{email}</p>
-                        </div>
-                    </div>
-
-                )
-              })
-
-            }
-        </div>
-    </div>)
-}
-
-export default Sponsor;
diff --git a/front/src/components/Sponsor/Sponsor.jsx b/front/src/components/Sponsor/Sponsor.jsx
new file mode 100644
index 00000000..e5d787ea
--- /dev/null
+++ b/front/src/components/Sponsor/Sponsor.jsx
@@ -0,0 +1,60 @@
+import React, {useState} from "react";
+import Navigation from "../Navigation";
+import sponsors from '../../database/sponsors.json'
+import SponsorItem from "./SponsorItem";
+
+const Sponsor = () => {
+
+
+    const [selected, setSelected] = useState(null)
+
+    const handleClick = (id) => {
+
+      setSelected(sponsors.filter(element => element._id === id))
+    }
+
+    return (
+    <div >
+        Sponsor
+        <Navigation />
+
+
+        <div className="d-flex">
+
+          <div className="d-flex justify-content-around flex-wrap gap-5 container mt-5 column-sponsor">
+              {
+                sponsors.map(({_id, company, email, picture}) => {
+                  return (
+
+                      <div key={_id}
+                      className="card rounded"
+                      style={{width: '18rem'}}
+                      onClick={() => handleClick(_id)}
+                      >
+                        <img src={picture} alt={company} className="card-img-top" />
+                          <div className="card-body">
+                            <h3 className="card-title">{company}</h3>
+                            <p className="card-text">{email}</p>
+                          </div>
+                      </div>
+
+                  )
+                })
+
+              }
+          </div>
+
+        <div className="sponsor-item column-sponsor bg-success m-5">
+
+            <SponsorItem sponsor={selected} />
+
+        </div>
+
+        </div>
+
+
+
+    </div>)
+}
+
+export default Sponsor;
diff --git a/front/src/components/Sponsor/SponsorItem.jsx b/front/src/components/Sponsor/SponsorItem.jsx
new file mode 100644
index 00000000..6ce08cd3
--- /dev/null
+++ b/front/src/components/Sponsor/SponsorItem.jsx
@@ -0,0 +1,31 @@
+import React from 'react'
+
+const SponsorItem = ({sponsor}) => {
+
+  console.log(sponsor)
+
+  const falseData =
+    {
+      about: "empty",
+      company: "empty",
+      sports: [],
+      phone: "empty",
+      isActive: false
+    }
+
+
+  const {about, company, sports, phone, isActive} = sponsor ?? falseData
+
+  return (
+
+    <div className="border-primary rounded m-5">
+
+      <h3 >{company}</h3>
+
+      <p>{about}</p>
+
+    </div>
+  )
+}
+
+export default SponsorItem