diff --git a/public/401446.webp b/public/401446.webp
new file mode 100644
index 0000000..594325f
Binary files /dev/null and b/public/401446.webp differ
diff --git a/public/61.jpg b/public/61.jpg
new file mode 100644
index 0000000..2481114
Binary files /dev/null and b/public/61.jpg differ
diff --git a/src/components/CardUser.jsx b/src/components/CardUser.jsx
new file mode 100644
index 0000000..f4b369b
--- /dev/null
+++ b/src/components/CardUser.jsx
@@ -0,0 +1,29 @@
+import { CardBody, Card, Image, Flex, Box } from "@chakra-ui/react";
+import Carousel from "./Carousel";
+
+export default function CardUser(props){
+    const {user} = props;
+    // const data_user = props;
+    const borderRad = "1.5rem";
+
+    return (
+        <Card 
+          borderRadius={borderRad}
+          width={"30vw"}
+          height={"100vh"}
+          padding={"0px"}
+            >
+            <Carousel
+            images = {user.images}
+            borderRadiusImg = {borderRad}
+            height = {"60vh"}
+            />
+            <Flex>
+                <Box>
+
+                </Box>
+            </Flex>
+        </Card>
+    );
+    
+}
\ No newline at end of file
diff --git a/src/components/Carousel.jsx b/src/components/Carousel.jsx
new file mode 100644
index 0000000..ec88f49
--- /dev/null
+++ b/src/components/Carousel.jsx
@@ -0,0 +1,104 @@
+import React from 'react';
+import { Box, IconButton, useBreakpointValue } from '@chakra-ui/react';
+// Here we have used react-icons package for the icons
+import { BiLeftArrowAlt, BiRightArrowAlt } from 'react-icons/bi';
+// And react-slick as our Carousel Lib
+import Slider from 'react-slick';
+
+// Settings for the slider
+const settings = {
+  dots: true,
+  arrows: false,
+  fade: true,
+  infinite: true,
+  autoplay: true,
+  speed: 500,
+  autoplaySpeed: 5000,
+  slidesToShow: 1,
+  slidesToScroll: 1,
+};
+
+export default function Carousel(props) {
+
+
+    const { height, borderRadiusImg } = props;
+  // As we have used custom buttons, we need a reference variable to
+  // change the state
+  const [slider, setSlider] = React.useState();
+
+  // These are the breakpoints which changes the position of the
+  // buttons as the screen size changes
+  const top = useBreakpointValue({ base: '90%', md: '50%' });
+  const side = useBreakpointValue({ base: '30%', md: '10px' });
+
+  // These are the images used in the slide
+//   const cards = [
+//     'https://images.unsplash.com/photo-1612852098516-55d01c75769a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDR8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=900&q=60',
+//     'https://images.unsplash.com/photo-1627875764093-315831ac12f7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDJ8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=900&q=60',
+//     'https://images.unsplash.com/photo-1571432248690-7fd6980a1ae2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDl8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=900&q=60',
+//   ];
+
+    const cards = props.images;
+
+  return (
+    <Box
+      position={'relative'}
+      height={height}
+      width={'full'}
+      overflow={'hidden'}>
+      {/* CSS files for react-slick */}
+      <link
+        rel="stylesheet"
+        type="text/css"
+        charSet="UTF-8"
+        href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css"
+      />
+      <link
+        rel="stylesheet"
+        type="text/css"
+        href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"
+      />
+      {/* Left Icon */}
+      <IconButton
+        aria-label="left-arrow"
+        colorScheme="purple"
+        borderRadius="full"
+        position="absolute"
+        left={side}
+        top={top}
+        transform={'translate(0%, -50%)'}
+        zIndex={2}
+        onClick={() => slider?.slickPrev()}>
+        <BiLeftArrowAlt />
+      </IconButton>
+      {/* Right Icon */}
+      <IconButton
+        aria-label="right-arrow"
+        colorScheme="purple"
+        borderRadius="full"
+        position="absolute"
+        right={side}
+        top={top}
+        transform={'translate(0%, -50%)'}
+        zIndex={2}
+        onClick={() => slider?.slickNext()}>
+        <BiRightArrowAlt />
+      </IconButton>
+      {/* Slider */}
+      <Slider {...settings} ref={(slider) => setSlider(slider)}>
+        {cards.map((url, index) => (
+          <Box
+            key={index}
+            borderRadius={borderRadiusImg}
+            height={'6xl'}
+            // position="relative"
+            // backgroundPosition="center"
+            // backgroundRepeat="no-repeat"
+            // backgroundSize="cover"
+            backgroundImage={`url(${url})`}
+          />
+        ))}
+      </Slider>
+    </Box>
+  );
+}
\ No newline at end of file
diff --git a/src/pages/api/user/readUser.ts b/src/pages/api/user/readUser.ts
index 69b6de7..1651166 100644
--- a/src/pages/api/user/readUser.ts
+++ b/src/pages/api/user/readUser.ts
@@ -4,7 +4,20 @@ import { PrismaClient } from '@prisma/client'
 export const prisma = new PrismaClient();
 
 export default async function readUser(req: NextApiRequest, res: NextApiResponse) {
-  const users = await prisma.user.findMany()
+  
+  const {email, password} = req.query
+  
+  if(!email) {
+    const users = await prisma.user.findMany()
+    return res.status(200).send({message: "readUser", users});
+  }
+  
+  const user = await prisma.user.findUnique({where :{"email" : email}})
+  
+  if (user?.password == password) {
+    res.status(200).send({message: "User found", user});
+  }
+
+  res.status(400).send({message: "Mot de passe incorrect"});
 
-  return res.status(200).send({message: "readUser", users});
 }
\ No newline at end of file
diff --git a/src/pages/login.jsx b/src/pages/login.jsx
index 4a48428..161f49d 100644
--- a/src/pages/login.jsx
+++ b/src/pages/login.jsx
@@ -22,8 +22,24 @@ export default function Login() {
   const router = useRouter();
 
   const onLogin = async (values) => {
-    alert(JSON.stringify(values, null, 2));
-    // faut voir ce qu'on fait quand on se connecte
+    try {
+      const response = await fetch(`/api/user/?email=${values.email}&password=${values.password}`, {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json"
+        }
+      });
+      const data = await response.json();
+      if (data.error) {
+        alert(data.message);
+      } else {
+        console.log(data);
+        alert("connexion réussie");
+        // router.push("/");
+      }
+    } catch (error) {
+      console.log(error);
+    }
   };
 
   const redirect_home = () => {
@@ -55,10 +71,10 @@ export default function Login() {
             <Box mb={"1rem"}>
               <FormLabel>Mot de passe</FormLabel>
               <Input
-                id="pwd"
+                id="password"
                 type="password"
                 placeholder="Mot de passe"
-                {...register("pwd", {
+                {...register("password", {
                   required: "This is required",
                 })}
               />
diff --git a/src/pages/test_card.jsx b/src/pages/test_card.jsx
new file mode 100644
index 0000000..10baacc
--- /dev/null
+++ b/src/pages/test_card.jsx
@@ -0,0 +1,23 @@
+import CardUser from "../components/CardUser";
+
+export default function Test_card(){
+
+    const user = {
+        name: "dujardin",
+        surname: "jean",
+        age:19,
+        aPropos: "Je suis une personne fictive, pas tres fictive",
+        images: [
+            "401446.webp"
+        ],
+        passions : [
+            "Sport",
+            "Piscine",
+            "Formule1",
+        ]
+    }
+
+    return(
+        <CardUser user={user}/>
+    )
+}
\ No newline at end of file