diff --git a/pwa/app/components/molecules/Header.tsx b/pwa/app/components/molecules/Header.tsx
index ef26b7b21686a4f822d4fc6ee57337c0f40fae9a..5ae00d1d79a756bd78369dd1289ed06003c4dd0e 100644
--- a/pwa/app/components/molecules/Header.tsx
+++ b/pwa/app/components/molecules/Header.tsx
@@ -7,20 +7,27 @@ interface HeaderProps {
 export default function Header({ onToggleSidebar }: HeaderProps) {
     return (
         <div className="bg-[#212529] w-full h-22 flex items-center gap-4 px-6 relative z-20">
-            <button
-                onClick={onToggleSidebar}
-                className="md:hidden flex flex-col gap-1 hover:cursor-pointer"
-            >
-                <div className="w-6 h-0.5 rounded-full bg-[#3a3f44]"></div>
-                <div className="w-6 h-0.5 rounded-full bg-[#3a3f44]"></div>
-                <div className="w-6 h-0.5 rounded-full bg-[#3a3f44]"></div>
-            </button>
-            <div className="relative w-2/6">
-                <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-[#b0afaf]" size={16} />
-                <input
-                    className="rounded-full border-[#3a3f44] border-2 w-full pl-9 pr-3 py-1.5 bg-transparent text-white placeholder-[#b0afaf]"
-                    placeholder="Search"
-                />
+            <div className="flex items-center gap-4 w-5/6">
+                <button
+                    onClick={onToggleSidebar}
+                    className="md:hidden flex flex-col gap-1 hover:cursor-pointer"
+                >
+                    <div className="w-6 h-0.5 rounded-full bg-[#3a3f44]"></div>
+                    <div className="w-6 h-0.5 rounded-full bg-[#3a3f44]"></div>
+                    <div className="w-6 h-0.5 rounded-full bg-[#3a3f44]"></div>
+                </button>
+                <div className="relative w-5/6">
+                    <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-[#b0afaf]" size={16} />
+                    <input
+                        className="rounded-full border-[#3a3f44] border-2 w-full pl-9 pr-3 py-1.5 bg-transparent text-white placeholder-[#b0afaf]"
+                        placeholder="Search"
+                    />
+                </div>
+            </div>
+            <div className='w-1/6 flex justify-end'>
+                <div className="h-10 w-10 rounded-full bg-[#8884d8] flex items-center justify-center text-white text-xs font-bold">
+                    ACJJ
+                </div>
             </div>
         </div>
     )
diff --git a/pwa/app/components/molecules/Sidebar.tsx b/pwa/app/components/molecules/Sidebar.tsx
index 55710353ad47c57efda39c31f81b4c32a5e49d96..ff41ad28f1ea71a9c0a3a5204b831315524d4fef 100644
--- a/pwa/app/components/molecules/Sidebar.tsx
+++ b/pwa/app/components/molecules/Sidebar.tsx
@@ -1,7 +1,9 @@
+import { TrendingUp, ScatterChart, PieChart, BookOpen, FileText, ExternalLink, FileCode } from 'lucide-react'
+
 const tabs = [
-    { key: 'temporal', label: 'Temporal' },
-    { key: 'points', label: 'Points' },
-    { key: 'diagram', label: 'Diagram' },
+    { key: 'temporal', label: 'Séries temporelles', icon: TrendingUp },
+    { key: 'points', label: 'Nuage de points', icon: ScatterChart },
+    { key: 'diagram', label: 'Diagramme circulaire', icon: PieChart },
 ] as const
 
 export type TabKey = (typeof tabs)[number]['key']
@@ -19,8 +21,8 @@ export default function Sidebar({ activeTab, onTabChange, open }: SidebarProps)
                 <div className="flex gap-2 items-center mb-8 w-fit">
                     <div className="flex gap-1 items-end justify-center rounded">
                         <div className="bar h-5 w-1 rounded-full bg-white" style={{ animationDelay: '0s' }}></div>
-                        <div className="bar h-3.5 w-1 rounded-full bg-white" style={{ animationDelay: '0.4s' }}></div>
-                        <div className="bar h-4.5 w-1 rounded-full bg-white" style={{ animationDelay: '0.8s' }}></div>
+                        <div className="bar h-3.5 w-1 rounded-full bg-white" style={{ animationDelay: '0.3s' }}></div>
+                        <div className="bar h-4.5 w-1 rounded-full bg-white" style={{ animationDelay: '0.6s' }}></div>
                     </div>
                     <h1>FullStack Lab</h1>
                 </div>
@@ -34,16 +36,81 @@ export default function Sidebar({ activeTab, onTabChange, open }: SidebarProps)
                         <button
                             key={tab.key}
                             onClick={() => onTabChange(tab.key)}
-                            className={`text-left text-sm px-3 py-2 rounded transition-colors ${
+                            className={`flex items-center gap-2 text-left text-sm px-3 py-2 rounded transition-colors cursor-pointer ${
                                 activeTab === tab.key
                                     ? 'bg-[#181C1F] text-white'
                                     : 'text-[#b0afaf] hover:text-white'
                             }`}
                         >
+                            <tab.icon size={16} />
                             {tab.label}
                         </button>
                     ))}
                 </nav>
+
+                <div className="flex gap-2 items-center text-[#b0afaf] mb-4 mt-8">
+                    <p className="uppercase text-xs">Infos</p>
+                </div>
+
+                <nav className="flex flex-col gap-1">
+                    <a
+                        href="https://pigne.org/teaching/webdev2/lecture/dynamic-graphical-data"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="flex items-center gap-2 text-left text-sm px-3 py-2 rounded text-[#b0afaf] hover:text-white transition-colors"
+                    >
+                        <BookOpen size={16} />
+                        Cours
+                    </a>
+                    <a
+                        href="https://pigne.org/teaching/webdev2/lab/FullStackLab"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="flex items-center gap-2 text-left text-sm px-3 py-2 rounded text-[#b0afaf] hover:text-white transition-colors"
+                    >
+                        <FileText size={16} />
+                        Sujet TP
+                    </a>
+                </nav>
+                <div className="flex gap-2 items-center text-[#b0afaf] mb-4 mt-8">
+                    <p className="uppercase text-xs">Librairies</p>
+                </div>
+
+                <nav className="flex flex-col gap-1">
+                    <a
+                        href="https://recharts.org"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="flex items-center gap-2 text-left text-sm px-3 py-2 rounded text-[#b0afaf] hover:text-white transition-colors"
+                    >
+                        <ExternalLink size={16} />
+                        Recharts
+                    </a>
+                    <a
+                        href="https://www.chartjs.org"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="flex items-center gap-2 text-left text-sm px-3 py-2 rounded text-[#b0afaf] hover:text-white transition-colors"
+                    >
+                        <ExternalLink size={16} />
+                        Chart.js
+                    </a>
+                </nav>
+                <div className="flex gap-2 items-center text-[#b0afaf] mb-4 mt-8">
+                    <p className="uppercase text-xs">API</p>
+                </div>
+
+                <nav className="flex flex-col gap-1">
+                    <a
+                        href="/api"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="flex items-center gap-2 text-left text-sm px-3 py-2 rounded text-[#b0afaf] hover:text-white transition-colors"
+                    >
+                        <FileCode size={16} />
+                        Swagger
+                    </a>
+                </nav>
             </div>
         </div>
     )
diff --git a/pwa/app/components/tabs/temporal.tsx b/pwa/app/components/tabs/temporal.tsx
index e3a444222b9a1c7aa95858a4ace66bb61fd8ead8..7787da12856793de32836e0de39e90363c15376b 100644
--- a/pwa/app/components/tabs/temporal.tsx
+++ b/pwa/app/components/tabs/temporal.tsx
@@ -110,13 +110,17 @@ export default function Temporal({ regions }: TemporalProps) {
 
                 <button
                     onClick={handleSubmit}
-                    disabled={loading}
+                    disabled={loading || startYear >= endYear}
                     className="bg-[#8884d8] hover:bg-[#7773c7] disabled:opacity-50 text-white text-sm px-4 py-1.5 rounded transition-colors"
                 >
                     {loading ? 'Chargement...' : 'Afficher'}
                 </button>
             </div>
 
+            {startYear >= endYear && (
+                <p className="text-xs text-red-400">La date de début doit être antérieure à la date de fin.</p>
+            )}
+
             <RegionSelector regions={regions} selectedRegions={selectedRegions} onSelectionChange={setSelectedRegions} />
 
             {loading && <Loader />}
@@ -159,6 +163,16 @@ export default function Temporal({ regions }: TemporalProps) {
                             wrapperStyle={{
                                 paddingTop: '20px',
                             }}
+                            content={({ payload }) => (
+                                <div className="hidden lg:flex flex-wrap justify-center gap-x-4 gap-y-1 pt-5">
+                                    {payload?.map(entry => (
+                                        <span key={entry.value} className="flex items-center gap-1 text-xs text-[#b0afaf]">
+                                            <span className="inline-block w-3 h-3 rounded-sm" style={{ backgroundColor: entry.color }} />
+                                            {entry.value}
+                                        </span>
+                                    ))}
+                                </div>
+                            )}
                         />
                         {visibleRegions.map(region => (
                             <Line
diff --git a/pwa/app/globals.css b/pwa/app/globals.css
index 90cc7d3c1bce70f9505d76d9a326fa5feed73820..73b77859d049621a34c1b32aa2d60ecc1cbb3ea2 100644
--- a/pwa/app/globals.css
+++ b/pwa/app/globals.css
@@ -17,9 +17,7 @@ h1 {
 
 .bar {
     transform-origin: bottom;
-    animation: grow 0.4s ease-out forwards;
-    opacity: 0;
-    transform: scaleY(0);
+    animation: grow 1.2s ease-in-out infinite alternate;
 }
 
 .tooltip-scroll::-webkit-scrollbar {