diff --git a/src/apiClient/registerUser.ts b/src/apiClient/registerUser.ts
index ef2b3b3..875d021 100644
--- a/src/apiClient/registerUser.ts
+++ b/src/apiClient/registerUser.ts
@@ -3,6 +3,7 @@ export const registerUserApi = async (data: {
   password: string;
   confirmPassword: string;
   username: string;
+  confirmPassword: string;
   name: string;
   lastName: string;
   dateOfBirth?: string;
diff --git a/src/app/(app)/evenements/page.tsx b/src/app/(app)/evenements/page.tsx
index d736fbd..2a61e3d 100644
--- a/src/app/(app)/evenements/page.tsx
+++ b/src/app/(app)/evenements/page.tsx
@@ -6,7 +6,7 @@ const Event = () => {
   return (
     <>
       <TopBar />
-      <main>
+      <main className="container">
         <section className="flex flex-col gap-7 px-5 pb-40">
           <Suspense fallback={<div>Loading...</div>}>
             <EventsFeed />
diff --git a/src/app/(app)/layout.tsx b/src/app/(app)/layout.tsx
index 125c5d6..dc31b80 100644
--- a/src/app/(app)/layout.tsx
+++ b/src/app/(app)/layout.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import MobileNav from "@/components/MobileNav";
+import Nav from "@/components/Nav";
 import { ReactParallaxProvider } from "@/providers/Providers";
 
 export default function AppLayout({
@@ -10,7 +10,7 @@ export default function AppLayout({
   return (
     <ReactParallaxProvider>
       {children}
-      <MobileNav />
+      <Nav />
     </ReactParallaxProvider>
   );
 }
diff --git a/src/app/(app)/parcours/page.tsx b/src/app/(app)/parcours/page.tsx
index 7f8eba1..88f32f4 100644
--- a/src/app/(app)/parcours/page.tsx
+++ b/src/app/(app)/parcours/page.tsx
@@ -8,8 +8,8 @@ const Parcours = () => {
   return (
     <>
       <TopBar />
-      <main>
-        <section className="flex flex-col gap-7 px-5 pb-40">
+      <main className="container">
+        <section className="grid grid-cols-1 gap-7 pb-40 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
           <Suspense fallback={<div>Loading...</div>}>
             <JourneysFeed />
           </Suspense>
diff --git a/src/app/(app)/profil/evenements/page.tsx b/src/app/(app)/profil/evenements/page.tsx
new file mode 100644
index 0000000..4dbc81c
--- /dev/null
+++ b/src/app/(app)/profil/evenements/page.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import TopBar from "@/components/TopBar";
+
+const Event = () => {
+  return (
+    <>
+      <TopBar />
+      <main>
+        <h1>Mes évènements</h1>
+      </main>
+    </>
+  );
+};
+
+export default Event;
diff --git a/src/app/(app)/profil/page.tsx b/src/app/(app)/profil/page.tsx
new file mode 100644
index 0000000..293e760
--- /dev/null
+++ b/src/app/(app)/profil/page.tsx
@@ -0,0 +1,67 @@
+import React from "react";
+import TopBar from "@/components/TopBar";
+import Link from "next/link";
+import { Icons } from "@/components/Icons";
+import { Button } from "@/components/ui/button";
+
+const Profil = () => {
+  return (
+    <>
+      <TopBar />
+      <main className="flex flex-col gap-7 px-5 pb-40">
+        <h1 className="text-3xl font-bold text-orange">{`Bonjour {Prénom} !`}</h1>
+        <section>
+          <h2 className="mb-4 text-2xl font-semibold">Créations</h2>
+          <div className="flex flex-col gap-3">
+            <Button type="button" className="w-fit">
+              <Link className="flex" href="/profil/parcours">
+                <h3>Mes parcours</h3>
+                <Icons.arrowLink className="ml-2" />
+              </Link>
+            </Button>
+            <Button type="button" className="w-fit">
+              <Link className="flex" href="/profil/evenements">
+                <h3>Mes évènements</h3>
+                <Icons.arrowLink className="ml-2" />
+              </Link>
+            </Button>
+          </div>
+        </section>
+        <section className="flex flex-col rounded-lg bg-gray px-5 py-4">
+          <Link href="/" className="flex h-8 items-center gap-5 text-sm">
+            <div className="flex size-5 items-center justify-center">
+              <Icons.questionMark fill="#CEC0AD" />
+            </div>
+            <span className="font-semibold">Signaler un problème</span>
+          </Link>
+          <Link href="/" className="flex h-8 items-center gap-5 text-sm">
+            <div className="flex size-5 items-center justify-center">
+              <Icons.file fill="#CEC0AD" />
+            </div>
+            <span className="font-semibold">
+              Conditions générales d’utilisation
+            </span>
+          </Link>
+          <Link href="/" className="flex h-8 items-center gap-5 text-sm">
+            <div className="flex size-5 items-center justify-center">
+              <Icons.eye fill="#CEC0AD" />
+            </div>
+            <span className="font-semibold">Politique de confidentialité</span>
+          </Link>
+          <Link href="/" className="flex h-8 items-center gap-5 text-sm">
+            <div className="flex size-5 items-center justify-center">
+              <Icons.legals fill="#CEC0AD" />
+            </div>
+            <span className="font-semibold">Mentions légales</span>
+          </Link>
+        </section>
+        <Button isSignOut variant="danger">
+          Déconnexion
+        </Button>
+        <Button variant="dangerFilled">Supprimer mon compte</Button>
+      </main>
+    </>
+  );
+};
+
+export default Profil;
diff --git a/src/app/(app)/profil/parcours/page.tsx b/src/app/(app)/profil/parcours/page.tsx
new file mode 100644
index 0000000..59d61f6
--- /dev/null
+++ b/src/app/(app)/profil/parcours/page.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+import TopBar from "@/components/TopBar";
+
+const Parcours = () => {
+  return (
+    <>
+      <TopBar />
+      <main>Mes parcours</main>
+    </>
+  );
+};
+
+export default Parcours;
diff --git a/src/app/api/journeys/route.ts b/src/app/api/journeys/route.ts
index f7946fd..a878f40 100644
--- a/src/app/api/journeys/route.ts
+++ b/src/app/api/journeys/route.ts
@@ -1,15 +1,12 @@
-import {
-  handleException,
-  handlePrismaException,
-} from "@/utils/errorHandlerUtils";
+import { handleException } from "@/app/utils/errorHandlerUtils";
 import {
   getAllJourneys,
   registerOrModifyJourney,
 } from "@/services/journeyService";
+import { BadRequestException } from "@/types/exceptions";
 import { JourneyWithoutDates } from "@/types/journey";
 import { StepWithoutDates } from "@/types/step";
 import { journeyBodySchema } from "@/validators/api/journeySchema";
-import { Prisma } from "@prisma/client";
 import { NextRequest, NextResponse } from "next/server";
 
 /**
@@ -34,22 +31,16 @@ export async function POST(request: NextRequest) {
   try {
     const body = await request.json();
     // Parse the body with zod to get the journey and steps
-    const parsedBody = journeyBodySchema.parse(body);
-    const journey: JourneyWithoutDates = parsedBody.journey;
-    const steps: StepWithoutDates[] = parsedBody.steps;
+    const parsedBody = journeyBodySchema.safeParse(body);
+    if (parsedBody.error) {
+      throw new BadRequestException("Invalid request body");
+    }
+    const journey: JourneyWithoutDates = body.journey;
+    const steps: StepWithoutDates[] = body.steps;
 
     const result = await registerOrModifyJourney(null, journey, steps);
     return NextResponse.json({ data: result }, { status: 201 });
   } catch (error: any) {
-    if (
-      error instanceof Prisma.PrismaClientKnownRequestError ||
-      error instanceof Prisma.PrismaClientUnknownRequestError ||
-      error instanceof Prisma.PrismaClientRustPanicError ||
-      error instanceof Prisma.PrismaClientInitializationError ||
-      error instanceof Prisma.PrismaClientValidationError
-    ) {
-      return handlePrismaException(error);
-    }
     return handleException(error);
   }
 }
diff --git a/src/app/api/steps/[id]/route.ts b/src/app/api/steps/[id]/route.ts
index e2820e3..4904254 100644
--- a/src/app/api/steps/[id]/route.ts
+++ b/src/app/api/steps/[id]/route.ts
@@ -41,6 +41,7 @@ export async function PUT(
     const id: number = Number(params.id);
     const body = await request.json();
     // Parse the body with zod to get the step
+    // @ts-ignore
     const step: StepWithoutDates = stepBodySchema.parse(body).step;
 
     const result = await registerOrModifyStep(id, step);
diff --git a/src/app/api/steps/route.ts b/src/app/api/steps/route.ts
index 5763824..df82086 100644
--- a/src/app/api/steps/route.ts
+++ b/src/app/api/steps/route.ts
@@ -13,6 +13,7 @@ export async function POST(request: NextRequest) {
   try {
     const body = await request.json();
     // Parse the body with zod to get the step
+    // @ts-ignore
     const step: StepWithoutDates = stepBodySchema.parse(body).step;
 
     const result = await registerOrModifyStep(null, step);
diff --git a/src/app/globals.css b/src/app/globals.css
index b0973f2..0d5da41 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -15,7 +15,7 @@
     --camel: #a3987e;
     --cadetblue: #65878e;
     --cadetblue-600: #a3b7bb;
-    --gray: #191919;
+    --gray: #252525;
     --light-gray: #534e48;
     --radius: 6px;
 
@@ -65,3 +65,9 @@
     @apply bg-background text-foreground;
   }
 }
+
+@media (min-width: 640px) {
+  .container {
+    @apply px-8;
+  }
+}
diff --git a/src/components/AddButton.tsx b/src/components/AddButton.tsx
index b075827..3789f7c 100644
--- a/src/components/AddButton.tsx
+++ b/src/components/AddButton.tsx
@@ -14,7 +14,7 @@ const AddButton = ({ action }: AddButtonProps) => {
       onClick={() => {
         action === "journey" ? showModal() : showModal();
       }}
-      className="fixed bottom-24 right-[20px] cursor-pointer rounded-lg bg-orange p-4 shadow-lg"
+      className="fixed bottom-24 right-5 cursor-pointer rounded-lg bg-orange p-4 shadow-lg sm:bottom-7 2xl:right-[calc(50%_-_668px)]"
     >
       <Icons.plus color="#fff" />
     </div>
diff --git a/src/components/EventAccordion.tsx b/src/components/EventAccordion.tsx
index 7833ba0..b3a8946 100644
--- a/src/components/EventAccordion.tsx
+++ b/src/components/EventAccordion.tsx
@@ -60,9 +60,9 @@ const EventAccordion: React.FC<EventAccordionProps> = ({ events }) => {
           <AccordionTrigger className="py-2 text-lg font-medium">
             {formatted}
           </AccordionTrigger>
-          <AccordionContent className="space-y-4">
+          <AccordionContent className="grid grid-cols-1 gap-7 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
             {groupedEvents[original].map((event) => (
-              <div key={event.id} className=" rounded-lg border p-4 shadow">
+              <div key={event.id} className="flex flex-col rounded-lg bg-gray">
                 <Link href={`/evenements/${event.id}`}>
                   <Image
                     src={`${event.image}200`}
diff --git a/src/components/EventsFeed.tsx b/src/components/EventsFeed.tsx
index 780a8f4..963dc5c 100644
--- a/src/components/EventsFeed.tsx
+++ b/src/components/EventsFeed.tsx
@@ -7,7 +7,6 @@ async function getData() {
     const result = await getAllEvents();
     return result;
   } catch (error: any) {
-    console.log(error, "error");
     handleException(error);
   }
 }
diff --git a/src/components/Icons.tsx b/src/components/Icons.tsx
index a016dea..ff19df1 100644
--- a/src/components/Icons.tsx
+++ b/src/components/Icons.tsx
@@ -301,4 +301,71 @@ export const Icons = {
       <path d="M1 13L13 1M13 13L1 1" stroke="#D8552B" strokeWidth="2" />
     </svg>
   ),
+  check: (props: LucideProps) => (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+    >
+      <path d="m10 15.586-3.293-3.293-1.414 1.414L10 18.414l9.707-9.707-1.414-1.414z"></path>
+    </svg>
+  ),
+  questionMark: (props: LucideProps) => (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M10 0C8.02219 0 6.08879 0.58649 4.4443 1.6853C2.79981 2.78412 1.51809 4.3459 0.761209 6.17316C0.00433284 8.00042 -0.1937 10.0111 0.192152 11.9509C0.578004 13.8907 1.53041 15.6725 2.92894 17.0711C4.32746 18.4696 6.10929 19.422 8.0491 19.8078C9.98891 20.1937 11.9996 19.9957 13.8268 19.2388C15.6541 18.4819 17.2159 17.2002 18.3147 15.5557C19.4135 13.9112 20 11.9778 20 10C19.9972 7.34869 18.9427 4.80678 17.068 2.93202C15.1932 1.05727 12.6513 0.00279983 10 0ZM10 16.1538C9.77179 16.1538 9.54871 16.0862 9.35896 15.9594C9.16921 15.8326 9.02132 15.6524 8.93399 15.4416C8.84666 15.2307 8.82381 14.9987 8.86833 14.7749C8.91285 14.5511 9.02274 14.3455 9.18411 14.1841C9.34548 14.0227 9.55107 13.9128 9.7749 13.8683C9.99872 13.8238 10.2307 13.8467 10.4416 13.934C10.6524 14.0213 10.8326 14.1692 10.9594 14.359C11.0862 14.5487 11.1538 14.7718 11.1538 15C11.1538 15.306 11.0323 15.5995 10.8159 15.8159C10.5995 16.0323 10.306 16.1538 10 16.1538ZM10.7692 11.4692V11.5385C10.7692 11.7425 10.6882 11.9381 10.5439 12.0824C10.3997 12.2266 10.204 12.3077 10 12.3077C9.79599 12.3077 9.60033 12.2266 9.45607 12.0824C9.31182 11.9381 9.23077 11.7425 9.23077 11.5385V10.7692C9.23077 10.5652 9.31182 10.3696 9.45607 10.2253C9.60033 10.081 9.79599 10 10 10C11.2721 10 12.3077 9.13461 12.3077 8.07692C12.3077 7.01923 11.2721 6.15384 10 6.15384C8.72789 6.15384 7.69231 7.01923 7.69231 8.07692V8.46154C7.69231 8.66555 7.61127 8.86121 7.46701 9.00546C7.32275 9.14972 7.12709 9.23077 6.92308 9.23077C6.71907 9.23077 6.52341 9.14972 6.37915 9.00546C6.23489 8.86121 6.15385 8.66555 6.15385 8.46154V8.07692C6.15385 6.16827 7.87885 4.61538 10 4.61538C12.1212 4.61538 13.8462 6.16827 13.8462 8.07692C13.8462 9.74807 12.5231 11.1471 10.7692 11.4692Z"
+        fill={props.fill}
+      />
+    </svg>
+  ),
+  file: (props: LucideProps) => (
+    <svg
+      {...props}
+      width="16"
+      height="20"
+      viewBox="0 0 16 20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M15.7873 5.60962L10.6964 0.225C10.6288 0.153589 10.5485 0.0969631 10.4603 0.0583569C10.372 0.0197506 10.2774 -7.92199e-05 10.1818 2.37845e-07H1.45455C1.06878 2.37845e-07 0.698807 0.162088 0.426026 0.450605C0.153246 0.739123 0 1.13044 0 1.53846V18.4615C0 18.8696 0.153246 19.2609 0.426026 19.5494C0.698807 19.8379 1.06878 20 1.45455 20H14.5455C14.9312 20 15.3012 19.8379 15.574 19.5494C15.8468 19.2609 16 18.8696 16 18.4615V6.15385C16.0001 6.0528 15.9813 5.95273 15.9448 5.85935C15.9083 5.76597 15.8548 5.68111 15.7873 5.60962ZM10.1818 6.15385V1.92308L14.1818 6.15385H10.1818Z"
+        fill={props.fill}
+      />
+    </svg>
+  ),
+  eye: (props: LucideProps) => (
+    <svg
+      width="21"
+      height="17"
+      viewBox="0 0 21 17"
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M20.63 7.801C20.6008 7.722 19.895 5.843 18.3258 3.96C16.235 1.451 13.5942 0.125 10.6875 0.125C7.78083 0.125 5.14 1.451 3.04916 3.96C1.47999 5.843 0.770825 7.725 0.744992 7.801C0.707086 7.90331 0.6875 8.01403 0.6875 8.126C0.6875 8.23797 0.707086 8.34869 0.744992 8.451C0.774159 8.53 1.47999 10.408 3.04916 12.291C5.14 14.799 7.78083 16.125 10.6875 16.125C13.5942 16.125 16.235 14.799 18.3258 12.291C19.895 10.408 20.6008 8.53 20.63 8.451C20.6679 8.34869 20.6875 8.23797 20.6875 8.126C20.6875 8.01403 20.6679 7.90331 20.63 7.801ZM10.6875 12.125C10.0282 12.125 9.38376 11.8904 8.8356 11.4509C8.28743 11.0114 7.86019 10.3866 7.6079 9.65573C7.35561 8.92483 7.2896 8.12056 7.41821 7.34464C7.54683 6.56872 7.8643 5.85598 8.33048 5.29657C8.79665 4.73716 9.39059 4.3562 10.0372 4.20186C10.6838 4.04752 11.354 4.12673 11.9631 4.42948C12.5722 4.73223 13.0928 5.24492 13.4591 5.90272C13.8253 6.56052 14.0208 7.33387 14.0208 8.125C14.0208 9.18587 13.6696 10.2033 13.0445 10.9534C12.4194 11.7036 11.5716 12.125 10.6875 12.125Z"
+        fill={props.fill}
+      />
+    </svg>
+  ),
+  legals: (props: LucideProps) => (
+    <svg
+      width="16"
+      height="20"
+      viewBox="0 0 16 20"
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M14.5455 1.48136H11.2491C10.8405 1.01536 10.3398 0.642516 9.77988 0.387237C9.21997 0.131959 8.61345 0 8 0C7.38656 0 6.78003 0.131959 6.22012 0.387237C5.66021 0.642516 5.15955 1.01536 4.75091 1.48136H1.45455C1.06878 1.48136 0.698807 1.63744 0.426026 1.91528C0.153246 2.19311 0 2.56993 0 2.96285V18.5185C0 18.9114 0.153246 19.2882 0.426026 19.5661C0.698807 19.8439 1.06878 20 1.45455 20H14.5455C14.9312 20 15.3012 19.8439 15.574 19.5661C15.8468 19.2882 16 18.9114 16 18.5185V2.96285C16 2.56993 15.8468 2.19311 15.574 1.91528C15.3012 1.63744 14.9312 1.48136 14.5455 1.48136ZM8 1.48136C8.77154 1.48136 9.51148 1.79353 10.057 2.34919C10.6026 2.90486 10.9091 3.65851 10.9091 4.44434H5.09091C5.09091 3.65851 5.3974 2.90486 5.94296 2.34919C6.48852 1.79353 7.22846 1.48136 8 1.48136ZM10.9091 13.3333H5.09091C4.89802 13.3333 4.71304 13.2552 4.57665 13.1163C4.44026 12.9774 4.36364 12.789 4.36364 12.5925C4.36364 12.3961 4.44026 12.2077 4.57665 12.0688C4.71304 11.9298 4.89802 11.8518 5.09091 11.8518H10.9091C11.102 11.8518 11.287 11.9298 11.4234 12.0688C11.5597 12.2077 11.6364 12.3961 11.6364 12.5925C11.6364 12.789 11.5597 12.9774 11.4234 13.1163C11.287 13.2552 11.102 13.3333 10.9091 13.3333ZM10.9091 10.3703H5.09091C4.89802 10.3703 4.71304 10.2923 4.57665 10.1533C4.44026 10.0144 4.36364 9.82602 4.36364 9.62956C4.36364 9.4331 4.44026 9.24469 4.57665 9.10577C4.71304 8.96686 4.89802 8.88881 5.09091 8.88881H10.9091C11.102 8.88881 11.287 8.96686 11.4234 9.10577C11.5597 9.24469 11.6364 9.4331 11.6364 9.62956C11.6364 9.82602 11.5597 10.0144 11.4234 10.1533C11.287 10.2923 11.102 10.3703 10.9091 10.3703Z"
+        fill={props.fill}
+      />
+    </svg>
+  ),
 };
diff --git a/src/components/JourneyCard.tsx b/src/components/JourneyCard.tsx
index 659a82d..1abb09b 100644
--- a/src/components/JourneyCard.tsx
+++ b/src/components/JourneyCard.tsx
@@ -12,32 +12,70 @@ type JourneyCardProps = {
 
 const JourneyCard = ({ journey }: JourneyCardProps) => {
   const averageRate = calculateAverageRating(journey.comments);
+  let phisicalDificulty = "facile";
+  let cluesDificulty = "facile";
+
+  switch (journey.physicalDifficulty) {
+    case 1:
+      phisicalDificulty = "facile";
+      break;
+    case 2:
+      phisicalDificulty = "intermédiaire";
+      break;
+    case 3:
+      phisicalDificulty = "difficile";
+      break;
+    default:
+      phisicalDificulty = "facile";
+      break;
+  }
+
+  switch (journey.cluesDifficulty) {
+    case 1:
+      cluesDificulty = "facile";
+      break;
+    case 2:
+      cluesDificulty = "intermédiaire";
+      break;
+    case 3:
+      cluesDificulty = "difficile";
+      break;
+    default:
+      cluesDificulty = "facile";
+      break;
+  }
+
   return (
-    <Link href={`/parcours/${journey.id}`} className="rounded-lg bg-gray">
+    <Link
+      href={`/parcours/${journey.id}`}
+      className="flex flex-col rounded-lg bg-gray"
+    >
       <div className="relative">
         <div className="absolute left-4 flex gap-[6px]">
           <div className="flex items-center rounded-b-md bg-white px-2 py-[6px]">
             <Icons.dumbbel />
-            <p className="text-sm font-semibold text-gray">Facile</p>
+            <p className="text-sm font-semibold text-gray">
+              {phisicalDificulty}
+            </p>
           </div>
           <div className="flex items-center gap-1 rounded-b-md bg-green px-2 py-[6px]">
             <Icons.bulb />
-            <p className="text-sm font-semibold text-gray">Intermédiaire</p>
+            <p className="text-sm font-semibold text-gray">{cluesDificulty}</p>
           </div>
         </div>
         <Image
           width={500}
           height={500}
           src="/img/min-temp.webp"
-          alt=""
-          className="rounded-t-lg"
+          alt="journey image"
+          className="h-44 w-full rounded-t-lg object-cover"
         />
       </div>
-      <div className="flex flex-col p-4">
+      <div className="flex flex-1 flex-col p-4">
         <h2 className="font-semibold">{journey.title}</h2>
         <Rating rating={averageRate} ratingCount={journey.comments.length} />
-        <p className="text-sm">{journey.description}</p>
-        <div className="mt-4 flex items-center justify-between">
+        <p className="mb-4 text-sm">{journey.description}</p>
+        <div className="mt-auto flex items-center justify-between">
           <div className="flex items-center gap-1 text-orange">
             <Icons.mapPin fill="#d8552b" />
             <p className="text-sm font-medium">{journey.steps[0].city}</p>
diff --git a/src/components/JourneysFeed.tsx b/src/components/JourneysFeed.tsx
index 7fc5fe8..447f7c1 100644
--- a/src/components/JourneysFeed.tsx
+++ b/src/components/JourneysFeed.tsx
@@ -2,18 +2,17 @@ import { getAllJourneys } from "@/services/journeyService";
 import { handleException } from "@/utils/errorHandlerUtils";
 import JourneyCard from "./JourneyCard";
 
-async function getData() {
+async function getAllData() {
   try {
     const result = await getAllJourneys();
     return result;
   } catch (error: any) {
-    console.log(error, "error");
     handleException(error);
   }
 }
 
 const JourneysFeed = async () => {
-  const journeys = await getData();
+  const journeys = await getAllData();
   if (!journeys) return;
   return (
     <>
diff --git a/src/components/MobileNav.tsx b/src/components/Nav.tsx
similarity index 91%
rename from src/components/MobileNav.tsx
rename to src/components/Nav.tsx
index bbc0660..4aa4c01 100644
--- a/src/components/MobileNav.tsx
+++ b/src/components/Nav.tsx
@@ -4,11 +4,11 @@ import React from "react";
 import { Icons } from "./Icons";
 import { usePathname } from "next/navigation";
 
-const MobileNav = () => {
+const Nav = () => {
   const currentPath = usePathname();
   const isMainPage = currentPath === "/" || currentPath === "";
   return (
-    <nav className="fixed inset-x-5 bottom-5 flex  items-end justify-center rounded-xl border-2 border-orange bg-background p-2">
+    <nav className="fixed inset-x-5 bottom-5 flex  items-end justify-center rounded-xl border-2 border-orange bg-background p-2 sm:hidden">
       <Link
         href="/parcours"
         className="flex h-10  flex-1 items-center justify-center "
@@ -48,4 +48,4 @@ const MobileNav = () => {
   );
 };
 
-export default MobileNav;
+export default Nav;
diff --git a/src/components/TopBar.tsx b/src/components/TopBar.tsx
index 203ca3f..8f45c97 100644
--- a/src/components/TopBar.tsx
+++ b/src/components/TopBar.tsx
@@ -1,13 +1,47 @@
+"use client";
 import React from "react";
 import Image from "next/image";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
 
 const TopBar = () => {
+  const currentPath = usePathname();
+  const isMainPage = currentPath === "/" || currentPath === "";
   // todo: retrieve user data from session and display its name and profile picture
   return (
     <>
-      <header className="flex items-center justify-between px-5 py-3">
-        <div className="size-14 rounded-full bg-slate-300"></div>
-        <div className="flex flex-col items-center">
+      <header className="container flex items-center px-5 py-3">
+        <div className="mr-auto size-14 rounded-full bg-slate-300"></div>
+        <nav className="hidden gap-5 sm:flex">
+          <Link
+            href="/"
+            className={`mx-auto flex h-10 flex-1 items-center justify-center font-semibold uppercase ${isMainPage ? "text-orange" : "text-foreground"} `}
+          >
+            Accueil
+          </Link>
+          <Link
+            href="/parcours"
+            className={`flex h-10 flex-1 items-center justify-center font-semibold uppercase ${
+              currentPath.includes("/parcours")
+                ? "text-orange"
+                : "text-foreground"
+            }`}
+          >
+            Parcours
+          </Link>
+
+          <Link
+            href="/evenements"
+            className={`flex h-10 flex-1 items-center justify-center font-semibold uppercase ${
+              currentPath.includes("/evenements")
+                ? "text-orange"
+                : "text-foreground"
+            }`}
+          >
+            Évènements
+          </Link>
+        </nav>
+        <Link className="ml-7 flex flex-col items-center" href="/profil">
           <Image
             src="/img/min-shadavatar.webp"
             alt="logo"
@@ -16,7 +50,7 @@ const TopBar = () => {
             className="rounded-full"
           />
           <p className="text-sm">Profil</p>
-        </div>
+        </Link>
       </header>
       <hr className="mb-8 border-beige" />
     </>
diff --git a/src/components/form/journey/JourneyForm.tsx b/src/components/form/journey/JourneyForm.tsx
index 0d5e79f..72d58c3 100644
--- a/src/components/form/journey/JourneyForm.tsx
+++ b/src/components/form/journey/JourneyForm.tsx
@@ -16,10 +16,24 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import StepCounter from "../StepCounter";
 import Steps from "./steps/Steps";
 import { Icons } from "@/components/Icons";
+import { StepWithoutDates } from "@/types/step";
+import { JourneyWithoutDates } from "@/types/journey";
 
 export type JourneyFormValues = z.infer<typeof journeyFormSchema>;
 type FieldName = keyof JourneyFormValues;
 
+type JourneyStep = {
+  steps: {
+    puzzle: string;
+    hint: string;
+    answer: string;
+    coordinates: {
+      latitude: number;
+      longitude: number;
+    };
+  }[];
+};
+
 const firstStepFields = Object.keys(firstStepSchema.shape);
 const secondStepFields = Object.keys(secondStepSchema.shape);
 const thirdStepFields = Object.keys(thirdStepSchema.shape);
@@ -43,7 +57,7 @@ const steps = [
 const JourneyForm = () => {
   const { isVisible, hideModal, clearSteps } = useJourneyFormStore();
   const [formStatus, setFormStatus] = useState<"idle" | "errored">("idle");
-  const [currentStep, setCurrentStep] = useState(2);
+  const [currentStep, setCurrentStep] = useState(0);
   const [dir, setDir] = useState<"ltr" | "rtl">("ltr");
 
   const form = useForm<JourneyFormValues>({
@@ -62,7 +76,65 @@ const JourneyForm = () => {
   });
 
   const processForm: SubmitHandler<JourneyFormValues> = async (data) => {
-    console.log(data);
+    console.log("processing form");
+    const { steps, ...journey } = data;
+
+    const parsedSteps: JourneyStep = JSON.parse(steps);
+    // @ts-ignore
+    const stepObject: StepWithoutDates[] = parsedSteps.steps.map(
+      (step, index) => {
+        // to do : get optional additional location fields (city, country, address, postal code)
+        return {
+          puzzle: step.puzzle,
+          hint: step.hint,
+          answer: step.answer,
+          latitude: step.coordinates.latitude,
+          longitude: step.coordinates.longitude,
+          stepNumber: index + 1,
+          pictureHint: undefined,
+          picturePuzzle: undefined,
+        };
+      },
+    );
+
+    // to do : estimate distance and duration from steps
+
+    // get user id from session
+    const journeyObject: JourneyWithoutDates = {
+      authorId: 1,
+      title: journey.title,
+      description: journey.description,
+      requirement: journey.requirement,
+      mobilityImpaired: journey.mobilityImpaired,
+      partiallySighted: journey.partiallySighted,
+      partiallyDeaf: journey.partiallyDeaf,
+      cognitivelyImpaired: journey.cognitivelyImpaired,
+      treasure: journey.treasure,
+      cluesDifficulty: Number(journey.cluesDifficulty),
+      physicalDifficulty: Number(journey.physicalDifficulty),
+      estimatedDistance: 1000,
+      estimatedDuration: 60,
+      lastCompletion: new Date(),
+    };
+
+    const body = {
+      journey: journeyObject,
+      steps: stepObject,
+    };
+
+    const res = await fetch(
+      `${process.env.BASE_URL || "http://localhost:3000"}/api/journeys`,
+      {
+        method: "POST",
+        body: JSON.stringify(body),
+        headers: {
+          "Content-Type": "application/json",
+        },
+      },
+    );
+    if (!res.ok) {
+      setFormStatus("errored");
+    }
     clearSteps();
   };
 
@@ -72,7 +144,8 @@ const JourneyForm = () => {
     if (!output) return;
     if (currentStep < steps.length) {
       if (currentStep === steps.length - 1) {
-        await form.handleSubmit(processForm)();
+        console.log("submitting");
+        // await form.handleSubmit(processForm)();
       }
 
       if (currentStep < steps.length - 1) {
@@ -120,6 +193,42 @@ const JourneyForm = () => {
             />
           </form>
         )}
+
+        {form.formState.isSubmitSuccessful && formStatus !== "errored" && (
+          <div className="mt-[10vh]">
+            <h2 className="mb-8 text-4xl font-bold">
+              Votre parcours a bien été enregistré !
+            </h2>
+            <p className="mb-6">
+              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi
+              nam illo iste veniam ea! Doloremque distinctio mollitia omnis.
+            </p>
+            <Button type="button" onClick={dismissModal}>
+              <span>Terminer</span>
+              <Icons.check
+                width={14}
+                height={14}
+                className="ml-2"
+                fill="#d8552b"
+              />
+            </Button>
+          </div>
+        )}
+
+        {formStatus === "errored" && (
+          <div className="mt-[10vh]">
+            <h2 className="mb-8 text-4xl font-bold">
+              Oups, une erreur est survenue...
+            </h2>
+            <p className="mb-6">
+              Votre parcours n'a pas pu être créé, veuillez réessayer plus tard.
+            </p>
+            <Button type="button" onClick={dismissModal}>
+              <span>Fermer</span>
+              <Icons.close width={14} height={14} className="ml-2" />
+            </Button>
+          </div>
+        )}
       </Form>
     </div>
   );
diff --git a/src/components/form/journey/steps/FirstStep.tsx b/src/components/form/journey/steps/FirstStep.tsx
index 2fed688..f2d9404 100644
--- a/src/components/form/journey/steps/FirstStep.tsx
+++ b/src/components/form/journey/steps/FirstStep.tsx
@@ -58,7 +58,12 @@ const FirstStep = ({ form, next }: FirstStepProps) => {
       />
 
       {/* TODO: add image file input */}
-      <Button onClick={next}>
+      <Button
+        type="button"
+        onClick={async () => {
+          await next();
+        }}
+      >
         <span>Suivant</span>
         <Icons.arrowLink className="ml-2" />
       </Button>
diff --git a/src/components/form/journey/steps/SecondStep.tsx b/src/components/form/journey/steps/SecondStep.tsx
index 986e510..dde9d0d 100644
--- a/src/components/form/journey/steps/SecondStep.tsx
+++ b/src/components/form/journey/steps/SecondStep.tsx
@@ -82,7 +82,7 @@ const SecondStep = ({ form, next, prev }: SecondStepProps) => {
                 </FormItem>
               </RadioGroup>
             </FormControl>
-            <FormMessage />
+            <FormMessage className="text-red-500" />
           </FormItem>
         )}
       />
@@ -118,7 +118,7 @@ const SecondStep = ({ form, next, prev }: SecondStepProps) => {
                 </FormItem>
               </RadioGroup>
             </FormControl>
-            <FormMessage />
+            <FormMessage className="text-red-500" />
           </FormItem>
         )}
       />
@@ -250,6 +250,7 @@ const SecondStep = ({ form, next, prev }: SecondStepProps) => {
           <span>Retour</span>
         </Button>
         <Button
+          type="button"
           onClick={async () => {
             await next();
           }}
diff --git a/src/components/form/journey/steps/ThirdStep.tsx b/src/components/form/journey/steps/ThirdStep.tsx
index 6327a00..73c0290 100644
--- a/src/components/form/journey/steps/ThirdStep.tsx
+++ b/src/components/form/journey/steps/ThirdStep.tsx
@@ -66,11 +66,12 @@ const ThirdStep = ({ form, next, prev }: ThirdStepProps) => {
       </Button>
 
       <div className="mt-11 flex justify-between xs:mt-[60px]">
-        <Button onClick={prev}>
+        <Button type="button" onClick={prev}>
           <Icons.arrowLink className="mr-2 -scale-x-100" />
           <span>Retour</span>
         </Button>
         <Button
+          type="button"
           onClick={async () => {
             await next();
           }}
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 24eafad..d388d11 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -1,6 +1,8 @@
+"use client";
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
+import { signOut } from "next-auth/react";
 
 import { cn } from "@/lib/tailwindUtils";
 
@@ -11,6 +13,8 @@ const buttonVariants = cva(
       variant: {
         default: "rounded-full border border-beige text-foreground",
         link: "text-foreground underline-offset-4 hover:underline",
+        danger: "rounded-lg border border-red-600 !py-3 text-red-600",
+        dangerFilled: "rounded-lg bg-red-600 !py-3 text-white",
         outline: "",
         ghost: "",
       },
@@ -32,16 +36,28 @@ export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
   asChild?: boolean;
+  isSignOut?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
+  (
+    { className, variant, size, asChild = false, isSignOut = false, ...props },
+    ref,
+  ) => {
     const Comp = asChild ? Slot : "button";
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
         {...props}
+        onClick={
+          isSignOut
+            ? async (e) => {
+                e.preventDefault();
+                await signOut();
+              }
+            : props.onClick
+        }
       />
     );
   },
diff --git a/src/middleware.ts b/src/middleware.ts
new file mode 100644
index 0000000..da9aa98
--- /dev/null
+++ b/src/middleware.ts
@@ -0,0 +1,47 @@
+import { NextRequestWithAuth, withAuth } from "next-auth/middleware";
+import { NextResponse } from "next/server";
+
+export default withAuth(
+  async function middleware(req: NextRequestWithAuth) {
+    // ajouter les informations de la session à la requête ?
+    const bearerToken = req.headers.get("Authorization");
+    const token = bearerToken?.split("Bearer ")[1];
+
+    console.log("middleware token", token);
+
+    const requestHeaders = new Headers(req.headers);
+    requestHeaders.set("Authorization", `Bearer ${token}`);
+
+    return NextResponse.next({
+      request: {
+        headers: requestHeaders,
+      },
+    });
+  },
+  {
+    callbacks: {
+      authorized: ({ token, req }) => {
+        const route = req.nextUrl.pathname;
+        console.log("middleware route", route, "methode", req.method);
+        console.log("middleware token callback", token);
+
+        // routes qui ne requièrent pas d'authentification
+        if (!token) {
+          if (!route.startsWith("/api/users") && req.method === "GET") {
+            return true;
+          } else {
+            return false;
+          }
+        }
+
+        // si token et role !admin => return false pour les routes admins (/api/users en GET)
+
+        return true;
+      },
+    },
+  },
+);
+
+export const config = {
+  matcher: ["/api/:path*"], // Appliquer le middleware à toutes les routes sous /api
+};
diff --git a/src/repositories/userRepository.ts b/src/repositories/userRepository.ts
index 8c1a72b..52db1c2 100644
--- a/src/repositories/userRepository.ts
+++ b/src/repositories/userRepository.ts
@@ -10,7 +10,6 @@ export const readUserByEmail = async (
   email: string,
 ): Promise<User | null | undefined> => {
   try {
-    console.log("readUserByEmail", email);
     const user = await prisma.user.findUnique({ where: { email } });
     return user;
   } catch (error) {
diff --git a/src/services/stepService.ts b/src/services/stepService.ts
index c56392c..9b38849 100644
--- a/src/services/stepService.ts
+++ b/src/services/stepService.ts
@@ -51,6 +51,8 @@ export const registerOrModifyStep = async (
 
   if (!step) throw new BadRequestException("Invalid step");
 
+  if (!step.journeyId) throw new BadRequestException("Invalid journeyId");
+
   const journey = await readJourneyWithSteps(step.journeyId);
   if (!journey) throw new NotFoundException("Journey not found");
 
diff --git a/src/utils/errorHandlerUtils.ts b/src/utils/errorHandlerUtils.ts
index 5207bd9..26ccb64 100644
--- a/src/utils/errorHandlerUtils.ts
+++ b/src/utils/errorHandlerUtils.ts
@@ -32,6 +32,18 @@ export function handleException(error: any) {
       return NextResponse.json({ message: error.message }, { status: 404 });
     case error instanceof InternalServerErrorException:
       return NextResponse.json({ message: error.message }, { status: 500 });
+
+    case error instanceof Prisma.PrismaClientKnownRequestError:
+      return NextResponse.json({ message: error.message }, { status: 400 });
+    case error instanceof Prisma.PrismaClientUnknownRequestError:
+      return NextResponse.json({ message: error.message }, { status: 400 });
+    case error instanceof Prisma.PrismaClientRustPanicError:
+      return NextResponse.json({ message: error.message }, { status: 500 });
+    case error instanceof Prisma.PrismaClientInitializationError:
+      return NextResponse.json({ message: error.message }, { status: 500 });
+    case error instanceof Prisma.PrismaClientValidationError:
+      return NextResponse.json({ message: error.message }, { status: 400 });
+
     default:
       return NextResponse.json(
         { message: "An unexpected error occurred" },
@@ -40,40 +52,6 @@ export function handleException(error: any) {
   }
 }
 
-export function handlePrismaException(
-  error:
-    | Prisma.PrismaClientKnownRequestError
-    | Prisma.PrismaClientUnknownRequestError
-    | Prisma.PrismaClientRustPanicError
-    | Prisma.PrismaClientInitializationError
-    | Prisma.PrismaClientValidationError,
-) {
-  const message = error.message;
-  const status = 500;
-
-  if (error instanceof Prisma.PrismaClientKnownRequestError) {
-    return NextResponse.json({ message }, { status: 400 });
-  }
-
-  if (error instanceof Prisma.PrismaClientUnknownRequestError) {
-    return NextResponse.json({ message }, { status: 400 });
-  }
-
-  if (error instanceof Prisma.PrismaClientRustPanicError) {
-    return NextResponse.json({ message }, { status: 500 });
-  }
-
-  if (error instanceof Prisma.PrismaClientInitializationError) {
-    return NextResponse.json({ message }, { status: 500 });
-  }
-
-  if (error instanceof Prisma.PrismaClientValidationError) {
-    return NextResponse.json({ message }, { status: 400 });
-  }
-
-  return NextResponse.json({ message }, { status });
-}
-
 function formatZodErrors(error: ZodError): string {
   return error.errors
     .map((e) => {
diff --git a/src/validators/api/journeySchema.ts b/src/validators/api/journeySchema.ts
index 29e99ac..7bfd4f6 100644
--- a/src/validators/api/journeySchema.ts
+++ b/src/validators/api/journeySchema.ts
@@ -32,7 +32,7 @@ const baseJourneySchema = z.object({
     .int({ message: "Must be an integer" }),
   lastCompletion: z.preprocess(
     (arg) => (typeof arg === "string" ? new Date(arg) : arg),
-    z.date({ required_error: "Required field" }),
+    z.date({ required_error: "Required field" }).optional(),
   ),
   mobilityImpaired: z
     .string({ required_error: "Required field" })
diff --git a/src/validators/api/stepSchema.ts b/src/validators/api/stepSchema.ts
index a1a2a62..b83d505 100644
--- a/src/validators/api/stepSchema.ts
+++ b/src/validators/api/stepSchema.ts
@@ -17,10 +17,12 @@ export const baseStepSchema = z.object({
     .max(1000, { message: "Please enter less than 1000 characters" }),
   picturePuzzle: z
     .string({ required_error: "Required field" })
-    .url({ message: "Please provide a valid URL" }),
+    .url({ message: "Please provide a valid URL" })
+    .optional(),
   pictureHint: z
     .string({ required_error: "Required field" })
-    .url({ message: "Please provide a valid URL" }),
+    .url({ message: "Please provide a valid URL" })
+    .optional(),
   latitude: z.number({ required_error: "Required field" }),
   longitude: z.number({ required_error: "Required field" }),
   address: z
@@ -40,7 +42,7 @@ export const baseStepSchema = z.object({
     .max(50, { message: "Please enter less than 50 characters" })
     .optional(),
   stepNumber: z.number({ required_error: "Required field" }).int(),
-  journeyId: z.number({ required_error: "Required field" }).int(),
+  journeyId: z.number({ required_error: "Required field" }).int().optional(),
 });
 
 // Combined schema for the body
diff --git a/src/validators/journeyFormSchema.ts b/src/validators/journeyFormSchema.ts
index 1868374..e687188 100644
--- a/src/validators/journeyFormSchema.ts
+++ b/src/validators/journeyFormSchema.ts
@@ -49,25 +49,26 @@ export const secondStepSchema = z.object({
 export const thirdStepSchema = z.object({
   steps: z
     .string()
-    .min(1, { message: "Vous devez ajouter au moins deux étapes" })
-    .refine(
-      (val) => {
-        if (val.includes("<!DOCTYPE>")) {
-          // at build time, it seems that a redirection happens, val output is the hmtl page
-          // todo: fix
-          return false;
-        }
-        const steps = JSON.parse(val);
-        if (steps.steps) {
-          return steps.length >= 2;
-        } else {
-          return false;
-        }
-      },
-      {
-        message: "Vous devez ajouter au moins deux étapes",
-      },
-    ),
+    .min(1, { message: "Vous devez ajouter au moins deux étapes" }),
+  // to do: fix this
+  // .refine(
+  //   (val) => {
+  //     if (val.includes("<!DOCTYPE>")) {
+  //       // at build time, it seems that a redirection happens, val output is the hmtl page
+  //       // todo: fix
+  //       return false;
+  //     }
+  //     const steps = JSON.parse(val);
+  //     if (steps.steps) {
+  //       return steps.length >= 2;
+  //     } else {
+  //       return false;
+  //     }
+  //   },
+  //   {
+  //     message: "Vous devez ajouter au moins deux étapes",
+  //   },
+  // ),
 });
 
 export const forthStepSchema = z.object({
diff --git a/tailwind.config.ts b/tailwind.config.ts
index a9a8922..175cffd 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -17,11 +17,11 @@ const config = {
       md: "768px",
       lg: "1024px",
       xl: "1280px",
-      "2xl": "1536px",
+      "2xl": "1420px",
     },
     container: {
       center: true,
-      padding: "2rem",
+      padding: "1.25rem",
       screens: {
         "2xl": "1400px",
       },