diff --git a/app/layout.tsx b/app/layout.tsx
index 689447c..c15e16a 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -4,6 +4,7 @@ import { Orbitron, Rajdhani } from "next/font/google";
 import "./globals.css";
 import SessionProvider from "@/components/layout/SessionProvider";
 import { ThemeProvider } from "@/contexts/ThemeContext";
+import Footer from "@/components/layout/Footer";
 
 const orbitron = Orbitron({
   subsets: ["latin"],
@@ -34,7 +35,10 @@ export default function RootLayout({
     >
       <body className="antialiased">
         <ThemeProvider>
-          <SessionProvider>{children}</SessionProvider>
+          <SessionProvider>
+            {children}
+            <Footer />
+          </SessionProvider>
         </ThemeProvider>
       </body>
     </html>
diff --git a/app/admin/style-guide/page.tsx b/app/style-guide/page.tsx
similarity index 100%
rename from app/admin/style-guide/page.tsx
rename to app/style-guide/page.tsx
diff --git a/components/layout/Footer.tsx b/components/layout/Footer.tsx
new file mode 100644
index 0000000..1df9262
--- /dev/null
+++ b/components/layout/Footer.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import Link from "next/link";
+
+export default function Footer() {
+  return (
+    <footer
+      className="w-full py-6 px-4 sm:px-8 border-t"
+      style={{
+        backgroundColor: "var(--background)",
+        borderColor: "color-mix(in srgb, var(--gray-800) 30%, transparent)",
+      }}
+    >
+      <div className="max-w-7xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-4">
+        <div
+          className="text-xs text-center sm:text-left"
+          style={{ color: "var(--muted-foreground)" }}
+        >
+          © {new Date().getFullYear()} Game of Tech - Peaksys
+        </div>
+        <div className="flex items-center gap-6">
+          <Link
+            href="/style-guide"
+            className="text-xs uppercase tracking-widest transition"
+            style={{ color: "var(--muted-foreground)" }}
+            onMouseEnter={(e) =>
+              (e.currentTarget.style.color = "var(--accent-color)")
+            }
+            onMouseLeave={(e) =>
+              (e.currentTarget.style.color = "var(--muted-foreground)")
+            }
+          >
+            Style Guide
+          </Link>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
diff --git a/components/ui/StarRating.tsx b/components/ui/StarRating.tsx
index c0a4545..a79e3a6 100644
--- a/components/ui/StarRating.tsx
+++ b/components/ui/StarRating.tsx
@@ -42,22 +42,26 @@ export default function StarRating({
             type="button"
             onClick={() => handleClick(star)}
             disabled={disabled}
-            onMouseEnter={() => !disabled && setHoverValue(star)}
-            onMouseLeave={() => !disabled && setHoverValue(0)}
-            className={`transition-transform hover:scale-110 disabled:hover:scale-100 disabled:cursor-not-allowed ${sizeClasses[size]}`}
-            style={{
-              color: star <= displayValue ? "var(--accent-color)" : "var(--gray-500)",
-            }}
             onMouseEnter={(e) => {
-              if (!disabled && star > displayValue) {
-                e.currentTarget.style.color = "var(--gray-400)";
+              if (!disabled) {
+                setHoverValue(star);
+                if (star > displayValue) {
+                  e.currentTarget.style.color = "var(--gray-400)";
+                }
               }
             }}
             onMouseLeave={(e) => {
-              if (!disabled && star > displayValue) {
-                e.currentTarget.style.color = "var(--gray-500)";
+              if (!disabled) {
+                setHoverValue(0);
+                if (star > displayValue) {
+                  e.currentTarget.style.color = "var(--gray-500)";
+                }
               }
             }}
+            className={`transition-transform hover:scale-110 disabled:hover:scale-100 disabled:cursor-not-allowed ${sizeClasses[size]}`}
+            style={{
+              color: star <= displayValue ? "var(--accent-color)" : "var(--gray-500)",
+            }}
             aria-label={`Noter ${star} étoile${star > 1 ? "s" : ""}`}
           >
             ★
