diff --git a/apps/frontend/src/app/layout.tsx b/apps/frontend/src/app/layout.tsx
index f266edd..20a7251 100644
--- a/apps/frontend/src/app/layout.tsx
+++ b/apps/frontend/src/app/layout.tsx
@@ -15,7 +15,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body className={"h-screen w-screen bg-card flex flex-col justify-between items-center police-ubuntu dark"}>
+      <body className={"h-screen w-screen bg-card flex flex-col justify-between items-center police-ubuntu"}>
         <Header/>
         {children}
         <Footer/>
diff --git a/apps/frontend/src/app/page.tsx b/apps/frontend/src/app/page.tsx
index 7400658..7db6167 100644
--- a/apps/frontend/src/app/page.tsx
+++ b/apps/frontend/src/app/page.tsx
@@ -1,36 +1,50 @@
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from '../components/ui/tabs';
-import { Cog, FilePlus2, FolderClosed, Info } from 'lucide-react';
+"use client"
+import { useState } from 'react';
+import { Button } from '../components/ui/button';
+import { Home } from 'lucide-react';
 
 
+
+export enum ESubPage {
+  Home,
+  Documentation,
+}
+
 export default function HomePage() {
+  const [currentSubPage, setCurrentSubPage] = useState<ESubPage>(0)
   return (
-    <main className="container w-full h-5/6 bg-background border border-muted p-2 rounded-md flex flex-col justify-stretch items-stretch">
-      <Tabs defaultValue="list" className="w-full h-full">
-        <TabsList className={"w-full text-xl text-secondary dark:text-primary bg-card"}>
-          <TabsTrigger className={"gap-2 m-2"} value="list"><FolderClosed className={"w-5"}/> <p>Liste des fichiers</p></TabsTrigger>
-          <TabsTrigger className={"gap-2 m-2"} value="new"><FilePlus2 className={"w-5"} /> <p>Ajouter un fichier</p></TabsTrigger>
-          <TabsTrigger className={"gap-2 m-2"} value="admin" disabled><Cog className={"w-5"} /> <p>Administration</p></TabsTrigger>
-          <TabsTrigger className={"gap-2 m-2"} value="info"><Info className={"w-5"} /> <p>Informations</p></TabsTrigger>
-        </TabsList>
-        <TabsContent className={"overflow-auto"} value="list">
-          Liste des fichiers
-        </TabsContent>
-        <TabsContent className={"overflow-auto"} value="new">
-          Ajouter un nouveau fichier
-        </TabsContent>
-        <TabsContent className={"overflow-auto"} value="admin">
-          Administration
-        </TabsContent>
-        <TabsContent className={"overflow-auto"} value="info">
-          Information
-        </TabsContent>
-      </Tabs>
-
+    <main className="w-full h-full bg-background border border-muted p-2 rounded-md flex flex-row justify-stretch items-stretch">
+      <div className={"w-1/5 h-full p-1 flex flex-col items-center"}>
+        <SubPageSelector/>
+      </div>
+      <SubPage currentSubPage={currentSubPage}/>
     </main>
   );
 }
+
+function SubPageSelector() {
+  return (
+    <div className={"w-full flex flex-col justify-center items-stretch pt-4 p-4 gap-2"}>
+      <Button className={"gap-1 font-bold"}>
+        <Home/>
+        Accueil
+      </Button>
+      <Button>Documentation</Button>
+    </div>
+  )
+}
+
+export interface ISubPageProps {
+  currentSubPage: ESubPage
+}
+
+function SubPage(props: ISubPageProps) {
+  switch (props.currentSubPage) {
+    case ESubPage.Home:
+      return (<>Home</>)
+    case ESubPage.Documentation:
+      return (<>Doc</>)
+    default:
+      return (<>Default</>)
+  }
+}
diff --git a/apps/frontend/src/components/Header.tsx b/apps/frontend/src/components/Header.tsx
index 18b958e..7923be7 100644
--- a/apps/frontend/src/components/Header.tsx
+++ b/apps/frontend/src/components/Header.tsx
@@ -1,8 +1,7 @@
 export function Header() {
   return (
-    <header className={"container flex justify-evenly items-center p-2 mb-4 rounded bg-background"}>
+    <header className={"w-full flex justify-evenly items-center rounded bg-background"}>
       <div>
-        <h1 className={"text-2xl"}>Gestionnaire des fichiers</h1>
       </div>
     </header>
   )
diff --git a/apps/frontend/tsconfig.json b/apps/frontend/tsconfig.json
index 581e358..37cbbe6 100644
--- a/apps/frontend/tsconfig.json
+++ b/apps/frontend/tsconfig.json
@@ -16,6 +16,9 @@
         "name": "next"
       }
     ],
+    "paths": {
+      "@/*": ["./src/*"]
+    },
     "types": [
       "jest",
       "node"
