diff --git a/apps/frontend/src/app/globals.css b/apps/frontend/src/app/globals.css
index 579827f..06a36e4 100644
--- a/apps/frontend/src/app/globals.css
+++ b/apps/frontend/src/app/globals.css
@@ -5,24 +5,24 @@
 @layer base {
   :root {
     --background: 0 0% 100%;
-    --foreground: 20 14.3% 4.1%;
+    --foreground: 0 0% 3.9%;
     --card: 0 0% 100%;
-    --card-foreground: 20 14.3% 4.1%;
+    --card-foreground: 0 0% 3.9%;
     --popover: 0 0% 100%;
-    --popover-foreground: 20 14.3% 4.1%;
-    --primary: 24.6 95% 53.1%;
-    --primary-foreground: 60 9.1% 97.8%;
-    --secondary: 60 4.8% 95.9%;
-    --secondary-foreground: 24 9.8% 10%;
-    --muted: 60 4.8% 95.9%;
-    --muted-foreground: 25 5.3% 44.7%;
-    --accent: 60 4.8% 95.9%;
-    --accent-foreground: 24 9.8% 10%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
     --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 60 9.1% 97.8%;
-    --border: 20 5.9% 90%;
-    --input: 20 5.9% 90%;
-    --ring: 24.6 95% 53.1%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
     --radius: 0.75rem;
     --chart-1: 12 76% 61%;
     --chart-2: 173 58% 39%;
@@ -32,25 +32,25 @@
   }
 
   .dark {
-    --background: 20 14.3% 4.1%;
-    --foreground: 60 9.1% 97.8%;
-    --card: 20 14.3% 4.1%;
-    --card-foreground: 60 9.1% 97.8%;
-    --popover: 20 14.3% 4.1%;
-    --popover-foreground: 60 9.1% 97.8%;
-    --primary: 20.5 90.2% 48.2%;
-    --primary-foreground: 60 9.1% 97.8%;
-    --secondary: 12 6.5% 15.1%;
-    --secondary-foreground: 60 9.1% 97.8%;
-    --muted: 12 6.5% 15.1%;
-    --muted-foreground: 24 5.4% 63.9%;
-    --accent: 12 6.5% 15.1%;
-    --accent-foreground: 60 9.1% 97.8%;
-    --destructive: 0 72.2% 50.6%;
-    --destructive-foreground: 60 9.1% 97.8%;
-    --border: 12 6.5% 15.1%;
-    --input: 12 6.5% 15.1%;
-    --ring: 20.5 90.2% 48.2%;
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
     --chart-1: 220 70% 50%;
     --chart-2: 160 60% 45%;
     --chart-3: 30 80% 55%;
diff --git a/apps/frontend/src/app/reservation/page.tsx b/apps/frontend/src/app/reservation/page.tsx
index d7910cf..7f7d9f1 100644
--- a/apps/frontend/src/app/reservation/page.tsx
+++ b/apps/frontend/src/app/reservation/page.tsx
@@ -2,8 +2,10 @@ import Calendar from '@components/calendar/calendar';
 
 export default function ReservationPage() {
   return (
-    <div className='w-full flex flex-col gap-4'>
-      <h1 className='font-bold text-orange-600 text-3xl'>Foglalások</h1>
+    <div className='w-full flex flex-col gap-4 main-content-scroll h-full'>
+      <div className='flex items-center justify-between flex-col sm:flex-row gap-2 p-4 bg-background sticky top-0 z-10'>
+        <h1 className='text-2xl font-semibold text-primary text-center sm:text-left'>Foglalások</h1>
+      </div>
       <Calendar />
     </div>
   );
diff --git a/apps/frontend/src/app/rules/page.tsx b/apps/frontend/src/app/rules/page.tsx
index 26d39bd..303ce2a 100644
--- a/apps/frontend/src/app/rules/page.tsx
+++ b/apps/frontend/src/app/rules/page.tsx
@@ -18,7 +18,7 @@ export default function Rules() {
             </p>
             <p>
               Ha olyan problémád van, melyet a lent leírtak nem fednek, úgy a{' '}
-              <a href='/mmmk' className='text-orange-500 underline' target='_blank' rel='noopener noreferrer'>
+              <a href='/mmmk' className='text-primary underline' target='_blank' rel='noopener noreferrer'>
                 főispánt / teremispánt
               </a>{' '}
               kell keresni.
@@ -32,11 +32,11 @@ export default function Rules() {
           <CardContent>
             <ol className='list-decimal list-inside space-y-2'>
               <li>
-                <a href='/register' className='text-orange-500 underline' target='_blank' rel='noopener noreferrer'>
+                <a href='/register' className='text-primary underline' target='_blank' rel='noopener noreferrer'>
                   Regisztrálj
                 </a>{' '}
                 vagy{' '}
-                <a href='/login' className='text-orange-500 underline' target='_blank' rel='noopener noreferrer'>
+                <a href='/login' className='text-primary underline' target='_blank' rel='noopener noreferrer'>
                   jelentkezz be.
                 </a>
               </li>
@@ -44,7 +44,7 @@ export default function Rules() {
                 Iratkozz fel a{' '}
                 <a
                   href='https://lists.sch.bme.hu/wws/subscribe/probaterem'
-                  className='text-orange-500 underline'
+                  className='text-primary underline'
                   target='_blank'
                   rel='noopener noreferrer'
                 >
@@ -69,7 +69,7 @@ export default function Rules() {
 
             <p className='mt-4'>
               A fentiekkel kapcsolatban bármilyen probléma esetén írjatok a levlistára (
-              <a href='mailto:probaterem@sch.bme.hu' className='text-orange-500 underline'>
+              <a href='mailto:probaterem@sch.bme.hu' className='text-primary underline'>
                 probaterem@sch.bme.hu
               </a>
               ).
@@ -104,7 +104,7 @@ export default function Rules() {
               <li>
                 Időpontot a weblapon tudsz foglalni. Ezt minél hamarabb elintézed, annál esélyesebb, hogy lesz
                 beengedőd. Amennyiben nincs, írj a listánkra! (
-                <a href='mailto:probaterem@sch.bme.hu' className='text-orange-500 underline'>
+                <a href='mailto:probaterem@sch.bme.hu' className='text-primary underline'>
                   probaterem@sch.bme.hu
                 </a>
                 )
@@ -114,7 +114,7 @@ export default function Rules() {
                 az már feltételes foglalás lesz, ami azt jelenti, hogy bárki ráfoglalhat erre az időpontra (akár Te is
                 másokéra). Figyeljetek rá, hogy az egyéni tagok foglalásai nem ekvivalensek a bandák foglalásaival
                 (lásd:{' '}
-                <a href='#sanctions' className='text-orange-500 underline'>
+                <a href='#sanctions' className='text-primary underline'>
                   Szankciók
                 </a>
                 ).
diff --git a/apps/frontend/src/app/stats/page.tsx b/apps/frontend/src/app/stats/page.tsx
index 7680111..fd070c0 100644
--- a/apps/frontend/src/app/stats/page.tsx
+++ b/apps/frontend/src/app/stats/page.tsx
@@ -7,7 +7,7 @@ import { useUser } from '@/hooks/useUser';
 import axiosApi from '@/lib/apiSetup';
 import { ClubMembership } from '@/types/member';
 import { Reservation } from '@/types/reservation';
-import { User } from '@/types/user';
+import { Role, User } from '@/types/user';
 
 function getCurrentPeriodStart() {
   const now = new Date();
@@ -75,8 +75,10 @@ export default function Stats() {
 
   const isAuthorized = useMemo(() => {
     if (!me) return false;
-    if ((me as any)?.clubMembership) return true;
-    return (memberships || []).some((m) => m.userId === me.id);
+    if (me.role === Role.ADMIN) return true;
+    if ((me as any)?.clubMembership?.isGateKeeper) return true;
+    const myMembership = (memberships || []).find((m) => m.userId === me.id);
+    return Boolean(myMembership?.isGateKeeper);
   }, [me, memberships]);
 
   const gatekeepingCounts = useMemo(() => {
diff --git a/apps/frontend/src/components/calendar/Line.tsx b/apps/frontend/src/components/calendar/Line.tsx
index 42f2ba5..bf08b77 100644
--- a/apps/frontend/src/components/calendar/Line.tsx
+++ b/apps/frontend/src/components/calendar/Line.tsx
@@ -2,7 +2,7 @@ export default function Line() {
   const offset = (new Date().getHours() + new Date().getMinutes() / 60) * 40 * 2;
   return (
     <div
-      className='absolute w-full h-1 self-start border-t-2 border-orange-600'
+      className='absolute w-full h-1 self-start border-t-2 border-primary z-50 pointer-events-none opacity-80'
       style={{
         top: `${offset}px`,
       }}
diff --git a/apps/frontend/src/components/calendar/add-comment.tsx b/apps/frontend/src/components/calendar/add-comment.tsx
index f6447b8..ba6d5ac 100644
--- a/apps/frontend/src/components/calendar/add-comment.tsx
+++ b/apps/frontend/src/components/calendar/add-comment.tsx
@@ -56,7 +56,7 @@ export default function AddComment(props: AddCommentProps) {
           id='comment'
           type='text'
           placeholder='Írja be a kommentet...'
-          className='bg-white hover:bg-slate-200 dark:bg-zinc-700 dark:hover:bg-zinc-600 text-black dark:text-zinc-200 border border-zinc-600 w-full px-3 py-2 rounded-md focus:ring-2 focus:ring-orange-500 focus:border-transparent'
+          className='bg-white hover:bg-slate-200 dark:bg-zinc-700 dark:hover:bg-zinc-600 text-black dark:text-zinc-200 border border-zinc-600 w-full px-3 py-2 rounded-md focus:ring-2 focus:ring-ring focus:border-transparent'
           onChange={(e) => setComment(e.target.value)}
           value={comment}
         />
@@ -69,7 +69,7 @@ export default function AddComment(props: AddCommentProps) {
           </label>
           <input
             id='begin'
-            className='bg-white hover:bg-slate-200 dark:bg-zinc-700 dark:hover:bg-zinc-600 text-black dark:text-zinc-200 rounded-md border border-zinc-600 px-3 py-2 focus:ring-2 focus:ring-orange-500 focus:border-transparent'
+            className='bg-white hover:bg-slate-200 dark:bg-zinc-700 dark:hover:bg-zinc-600 text-black dark:text-zinc-200 rounded-md border border-zinc-600 px-3 py-2 focus:ring-2 focus:ring-ring focus:border-transparent'
             type='datetime-local'
             onChange={(e) => setStartTime(new Date(e.target.value))}
           />
@@ -81,7 +81,7 @@ export default function AddComment(props: AddCommentProps) {
           </label>
           <input
             id='end'
-            className='bg-white hover:bg-slate-200 dark:bg-zinc-700 dark:hover:bg-zinc-600 text-black dark:text-zinc-200 rounded-md border border-zinc-600 px-3 py-2 focus:ring-2 focus:ring-orange-500 focus:border-transparent'
+            className='bg-white hover:bg-slate-200 dark:bg-zinc-700 dark:hover:bg-zinc-600 text-black dark:text-zinc-200 rounded-md border border-zinc-600 px-3 py-2 focus:ring-2 focus:ring-ring focus:border-transparent'
             type='datetime-local'
             onChange={(e) => setEndTime(new Date(e.target.value))}
           />
@@ -91,7 +91,7 @@ export default function AddComment(props: AddCommentProps) {
       <div className='flex items-center'>
         <input
           id='reservable'
-          className='h-5 w-5 text-orange-500 border-zinc-600 rounded focus:ring-orange-500 bg-zinc-700'
+          className='h-5 w-5 text-primary border-zinc-600 rounded focus:ring-ring bg-zinc-700'
           type='checkbox'
           onChange={(e) => setIsReservable(e.target.checked)}
           checked={isReservable}
@@ -102,7 +102,7 @@ export default function AddComment(props: AddCommentProps) {
       </div>
 
       <button
-        className='w-full rounded-md bg-orange-500 hover:bg-orange-600 text-zinc-900 font-semibold py-3 mt-4 transition-colors shadow-lg'
+        className='w-full rounded-md bg-primary hover:bg-primary/90 text-primary-foreground font-semibold py-3 mt-4 transition-colors shadow-lg'
         onClick={addComment}
       >
         Komment hozzáadása
diff --git a/apps/frontend/src/components/calendar/add-panel.tsx b/apps/frontend/src/components/calendar/add-panel.tsx
index 9feb912..1020f1b 100644
--- a/apps/frontend/src/components/calendar/add-panel.tsx
+++ b/apps/frontend/src/components/calendar/add-panel.tsx
@@ -31,13 +31,13 @@ export function AddPanel(props: AddEventProps) {
   };
 
   return (
-    <div className='m-2 text-black dark:text-gray-400'>
+    <div className='m-1 md:m-2 text-black dark:text-gray-400 w-full'>
       {isAdd ? (
         <div className='fixed inset-0 bg-black/50 backdrop-blur-sm z-40 flex items-center justify-center overflow-y-auto'>
           <div className='relative w-full max-w-md rounded-xl bg-white border-slate-600 dark:bg-zinc-800 border dark:border-zinc-700 shadow-2xl transform transition-all'>
             <div className='p-6'>
               <button
-                className='absolute top-4 right-4 text-black dark:text-zinc-400 hover:text-white transition-colors'
+                className='absolute top-4 right-4 text-black dark:text-zinc-400 hover:text-slate-600 dark:hover:text-white transition-colors'
                 onClick={onAddEvent}
                 aria-label='Close'
               >
@@ -63,7 +63,7 @@ export function AddPanel(props: AddEventProps) {
                   onClick={() => setSelected('reservation')}
                   className={`flex-1 py-2 border-2  ${
                     selected === 'reservation'
-                      ? 'bg-orange-500 hover:bg-orange-600 text-zinc-900'
+                      ? 'bg-primary hover:bg-primary/90 text-primary-foreground'
                       : 'bg-white hover:bg-slate-200 dark:bg-zinc-700 dark:hover:bg-zinc-600 text-black dark:text-zinc-200'
                   }`}
                 >
@@ -73,7 +73,7 @@ export function AddPanel(props: AddEventProps) {
                   onClick={() => setSelected('comment')}
                   className={`flex-1 py-2 border-2 ${
                     selected === 'comment'
-                      ? 'bg-orange-500 hover:bg-orange-600 text-zinc-900'
+                      ? 'bg-primary hover:bg-primary/90 text-primary-foreground'
                       : 'bg-white hover:bg-slate-200 dark:bg-zinc-700 dark:hover:bg-zinc-600 text-black dark:text-zinc-200'
                   }`}
                 >
@@ -95,7 +95,7 @@ export function AddPanel(props: AddEventProps) {
           </div>
         </div>
       ) : (
-        <Button onClick={onAddEvent}>
+        <Button onClick={onAddEvent} className='w-full md:w-auto'>
           <Plus />
         </Button>
       )}
diff --git a/apps/frontend/src/components/calendar/add-reservation.tsx b/apps/frontend/src/components/calendar/add-reservation.tsx
index e001762..517883a 100644
--- a/apps/frontend/src/components/calendar/add-reservation.tsx
+++ b/apps/frontend/src/components/calendar/add-reservation.tsx
@@ -158,7 +158,7 @@ export default function AddReservation(props: AddPanelProps) {
                 value={userName}
                 onChange={handleUserNameChange}
                 required
-                className='bg-zinc-700 border-zinc-600 text-zinc-100 w-full px-3 py-2 rounded-md focus:ring-2 focus:ring-orange-500 focus:border-transparent'
+                className='bg-zinc-700 border-zinc-600 text-zinc-100 w-full px-3 py-2 rounded-md focus:ring-2 focus:ring-ring focus:border-transparent'
                 placeholder='Válasszon felhasználót...'
               />
               {showUserSuggestions && userSuggestions.length > 0 && (
@@ -186,7 +186,7 @@ export default function AddReservation(props: AddPanelProps) {
               type='checkbox'
               checked={adminOverride}
               onChange={(e) => setAdminOverride(e.target.checked)}
-              className='h-4 w-4 accent-orange-500'
+              className='h-4 w-4 accent-primary'
             />
           </div>
         </>
@@ -202,7 +202,7 @@ export default function AddReservation(props: AddPanelProps) {
             value={bandName}
             onChange={handleBandNameChange}
             required
-            className='bg-white hover:bg-slate-200 dark:bg-zinc-700 dark:hover:bg-zinc-600 text-black dark:text-zinc-200 border-zinc-600 w-full px-3 py-2 rounded-md focus:ring-2 focus:ring-orange-500 focus:border-transparent'
+            className='bg-white hover:bg-slate-200 dark:bg-zinc-700 dark:hover:bg-zinc-600 text-black dark:text-zinc-200 border-zinc-600 w-full px-3 py-2 rounded-md focus:ring-2 focus:ring-ring focus:border-transparent'
             placeholder='Válasszon bandát...'
           />
           {showBandSuggestions && bandSuggestions.length > 0 && (
@@ -231,7 +231,7 @@ export default function AddReservation(props: AddPanelProps) {
           </label>
           <input
             id='begin'
-            className='bg-white hover:bg-slate-200 dark:bg-zinc-700 dark:hover:bg-zinc-600 text-black dark:text-zinc-200 rounded-md border border-zinc-600 px-3 py-2 focus:ring-2 focus:ring-orange-500 focus:border-transparent'
+            className='bg-white hover:bg-slate-200 dark:bg-zinc-700 dark:hover:bg-zinc-600 text-black dark:text-zinc-200 rounded-md border border-zinc-600 px-3 py-2 focus:ring-2 focus:ring-ring focus:border-transparent'
             type='datetime-local'
             onChange={(e) => shiftStart(new Date(e.target.value))}
           />
@@ -243,7 +243,7 @@ export default function AddReservation(props: AddPanelProps) {
           </label>
           <input
             id='end'
-            className='bg-white hover:bg-slate-200 dark:bg-zinc-700 dark:hover:bg-zinc-600 text-black dark:text-zinc-200 rounded-md border border-zinc-600 px-3 py-2 focus:ring-2 focus:ring-orange-500 focus:border-transparent'
+            className='bg-white hover:bg-slate-200 dark:bg-zinc-700 dark:hover:bg-zinc-600 text-black dark:text-zinc-200 rounded-md border border-zinc-600 px-3 py-2 focus:ring-2 focus:ring-ring focus:border-transparent'
             type='datetime-local'
             onChange={(e) => shiftEnd(new Date(e.target.value))}
           />
@@ -267,7 +267,7 @@ export default function AddReservation(props: AddPanelProps) {
 
       <button
         onClick={handleSubmit}
-        className='w-full rounded-md bg-orange-500 hover:bg-orange-600 text-zinc-900 font-semibold py-3 mt-4 transition-colors shadow-lg'
+        className='w-full rounded-md bg-primary hover:bg-primary/90 text-primary-foreground font-semibold py-3 mt-4 transition-colors shadow-lg'
       >
         Foglalás hozzáadása
       </button>
diff --git a/apps/frontend/src/components/calendar/calendar.tsx b/apps/frontend/src/components/calendar/calendar.tsx
index 3cf84f2..09523ee 100644
--- a/apps/frontend/src/components/calendar/calendar.tsx
+++ b/apps/frontend/src/components/calendar/calendar.tsx
@@ -71,20 +71,20 @@ export default function Calendar() {
 
   return (
     <div className='w-full container mx-auto'>
-      <div className='flex flex-row gap-2'>
+      <div className='flex flex-row gap-2 mb-1'>
         <button
-          className={`m - 1 border-2 border-orange-500 dark:hover:bg-orange-500 dark:text-slate-50 font-bold py-1 px-2 rounded-lg hidden md:block ${view === View.Week ? 'bg-orange-500 text-slate-50 dark:bg-orange-600' : ''}`}
+          className={`m-1 border-2 border-primary dark:hover:bg-primary/10 dark:text-slate-50 font-bold py-1 px-2 rounded-lg hidden md:block ${view === View.Week ? 'bg-white text-primary dark:bg-white dark:text-black dark:hover:bg-white' : ''}`}
           onClick={() => setView(View.Week)}
         >
           Heti nézet
         </button>
         <button
-          className={`m - 1 border-2 border-orange-500 dark:hover:bg-orange-500 dark:text-slate-50 font-bold py-1 px-2 rounded-lg ${view === View.Day ? 'bg-orange-500 text-slate-50 dark:bg-orange-600' : ''}`}
+          className={`m-1 border-2 border-primary dark:hover:bg-primary/10 dark:text-slate-50 font-bold py-1 px-2 rounded-lg hidden md:block ${view === View.Day ? 'bg-white text-primary dark:bg-white dark:text-black dark:hover:bg-white' : ''}`}
           onClick={() => setView(View.Day)}
         >
           Napi nézet
         </button>
-        <div className='ml-auto'>
+        <div className='w-full md:w-auto md:ml-auto flex'>
           <AddPanel onGetData={onGetData} currentDate={currentDate} reservations={reservations} />
         </div>
       </div>
diff --git a/apps/frontend/src/components/calendar/comment-details.tsx b/apps/frontend/src/components/calendar/comment-details.tsx
index db3e9f8..a0174bb 100644
--- a/apps/frontend/src/components/calendar/comment-details.tsx
+++ b/apps/frontend/src/components/calendar/comment-details.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 import axiosApi from '@/lib/apiSetup';
 import { Comment } from '@/types/comment';
@@ -144,7 +144,7 @@ export default function CommentDetails(props: EventDetailsProps) {
                   <>
                     <input
                       id='reservable'
-                      className='h-5 w-5 text-orange-500 border-zinc-600 rounded focus:ring-orange-500 bg-zinc-700'
+                      className='h-5 w-5 text-primary border-zinc-600 rounded focus:ring-ring bg-zinc-700'
                       type='checkbox'
                       onChange={(e) => setIsReservable(e.target.checked)}
                       checked={isReservable}
diff --git a/apps/frontend/src/components/calendar/date-switcher.tsx b/apps/frontend/src/components/calendar/date-switcher.tsx
index c0cdacf..82ae120 100644
--- a/apps/frontend/src/components/calendar/date-switcher.tsx
+++ b/apps/frontend/src/components/calendar/date-switcher.tsx
@@ -1,8 +1,9 @@
 import { AddPanel } from '@components/calendar/add-panel';
 import { View } from '@components/calendar/calendar';
-import IntervalSwitcher from '@components/calendar/interval-swithcer';
 import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
 
+import IntervalSwitcher from '@/components/calendar/interval-switcher';
+
 interface DateSwitcherProps {
   handlePrevious: () => void;
   handleNext: () => void;
diff --git a/apps/frontend/src/components/calendar/day/daily-view-without-date.tsx b/apps/frontend/src/components/calendar/day/daily-view-without-date.tsx
index f659992..5f387ca 100644
--- a/apps/frontend/src/components/calendar/day/daily-view-without-date.tsx
+++ b/apps/frontend/src/components/calendar/day/daily-view-without-date.tsx
@@ -24,9 +24,8 @@ export default function DailyViewWO(props: DailyViewPropsWO) {
         <div
           key={`time-slot-${i}`}
           className={`
-            relative cursor-pointer focus:outline-none focus-visible:ring-2 h-10 
-            focus-visible:ring-primary border-b border-slate-300/30
-            ${i % 2 === 0 ? 'bg-transparent' : 'bg-slate-800/5'}
+            relative cursor-pointer focus:outline-none focus-visible:ring-2 h-10
+            focus-visible:ring-primary border-b border-border/40
           `}
         >
           {props.reservations.map((reservation) => {
diff --git a/apps/frontend/src/components/calendar/day/daily-view.tsx b/apps/frontend/src/components/calendar/day/daily-view.tsx
index 0cddd1f..01bf10c 100644
--- a/apps/frontend/src/components/calendar/day/daily-view.tsx
+++ b/apps/frontend/src/components/calendar/day/daily-view.tsx
@@ -29,41 +29,44 @@ export default function DailyView(props: DailyViewProps) {
     );
   };
   return (
-    <div className='flex items-center justify-center bg-transparent w-full'>
-      <div className='flex flex-col items-center justify-center bg-calendarBg rounded-lg text-white w-full max-w-[1000px] sm:w-[1000px]'>
-        <div className='flex items-center justify-center text-primary-foreground p-2 sm:p-4 rounded-t-lg w-full'>
+    <div className='flex items-center justify-center bg-transparent w-full p-2 md:p-4'>
+      <div className='flex flex-col bg-background shadow-xl rounded-2xl border border-border overflow-hidden text-foreground w-full max-w-5xl mx-auto'>
+        <div className='flex items-center justify-between px-4 py-3 sm:px-6 sm:py-4 border-b border-border bg-card w-full'>
           <button
             onClick={handlePreviousDay}
-            className='p-2 rounded-full hover:bg-gray-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-foreground text-slate-800 dark:text-white'
+            className='p-1.5 sm:p-2 flex-shrink-0 rounded-full hover:bg-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-primary transition-colors duration-200 text-muted-foreground hover:text-foreground'
           >
-            <ChevronLeftIcon className='w-6 h-6' />
+            <ChevronLeftIcon className='w-5 h-5' />
           </button>
-          <div className='flex text-lg sm:text-xl font-medium dark:text-white text-slate-800 dark:text-white mx-2'>
-            {props.currentDate.getDate()} {props.currentDate.toLocaleString('hu', { month: 'long' })}{' '}
-            {props.currentDate.getFullYear()}
+
+          <div className='flex flex-col items-center mx-2 text-center min-w-[120px]'>
+            <div className='text-lg sm:text-xl flex flex-wrap justify-center items-baseline gap-1 sm:gap-2 font-bold text-foreground tracking-tight'>
+              {props.currentDate.getFullYear()}. {props.currentDate.toLocaleString('hu', { month: 'long' })}{' '}
+              {props.currentDate.getDate()}.
+            </div>
+            <div className='text-xs sm:text-sm font-medium text-muted-foreground mt-1 bg-muted px-2 py-0.5 rounded-full'>
+              {['Vasárnap', 'Hétfő', 'Kedd', 'Szerda', 'Csütörtök', 'Péntek', 'Szombat'][props.currentDate.getDay()]}
+            </div>
           </div>
+
           <button
             onClick={handleNextDay}
-            className='p-2 rounded-full hover:bg-gray-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-foreground text-slate-800 dark:text-white'
+            className='p-1.5 sm:p-2 flex-shrink-0 rounded-full hover:bg-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-primary transition-colors duration-200 text-muted-foreground hover:text-foreground'
           >
-            <ChevronRightIcon className='w-6 h-6' />
+            <ChevronRightIcon className='w-5 h-5' />
           </button>
         </div>
-        <div className='flex items-center justify-center w-full overflow-x-auto'>
-          <div className='shadow-lg w-[600px] sm:w-[850px] relative'>
+        <div className='w-full'>
+          <div className='w-full min-w-[280px] relative bg-background'>
             <Line />
             {Array.from({ length: 48 }, (_, i) => (
-              <div key={i} className='flex flex-row w-full'>
-                <div className='focus:outline-none focus-visible:ring-2 h-10 focus-visible:ring-primary text-slate-800 dark:text-white border-b w-1/6 p-1 sm:p-2 dark:border-white text-xs sm:text-sm'>
+              <div key={i} className='flex flex-row w-full h-10 group'>
+                <div className='flex justify-center items-start h-10 border-b border-border/40 w-16 sm:w-20 bg-muted/5'>
                   {i % 2 === 0 ? (
-                    <div className='flex flex-col'>
-                      <span className='self-start'>{i / 2}:00</span>
-                    </div>
-                  ) : (
-                    ''
-                  )}
+                    <span className='text-xs font-medium text-muted-foreground mt-1'>{i / 2}:00</span>
+                  ) : null}
                 </div>
-                <div className='relative focus:outline-none focus-visible:ring-2 h-10 focus-visible:ring-primary text-slate-800 dark:text-white border-b p-1 sm:p-2 w-full border-l dark:border-white'>
+                <div className='relative h-10 border-b border-l border-border/40 p-1 sm:p-2 w-full'>
                   {props.reservations.map((event) => {
                     const eventStartDate = new Date(event.startTime);
                     const eventEndDate = new Date(event.endTime);
diff --git a/apps/frontend/src/components/calendar/day/day-reservation.tsx b/apps/frontend/src/components/calendar/day/day-reservation.tsx
index 8c15cac..5e10d66 100644
--- a/apps/frontend/src/components/calendar/day/day-reservation.tsx
+++ b/apps/frontend/src/components/calendar/day/day-reservation.tsx
@@ -56,7 +56,7 @@ export default function DayReservation(props: DayEventProps) {
             props.reservation.status === 'OVERTIME'
               ? 'bg-gradient-to-r from-blue-500 to-blue-400'
               : props.reservation.status === 'ADMINMADE'
-                ? 'bg-gradient-to-r from-orange-600 to-orange-400'
+                ? 'bg-gradient-to-r from-primary to-primary/80 text-primary-foreground'
                 : 'bg-gradient-to-r from-emerald-600 to-emerald-400'
           }
           justify-start
@@ -69,7 +69,7 @@ export default function DayReservation(props: DayEventProps) {
             props.reservation.status === 'OVERTIME'
               ? 'border-blue-600'
               : props.reservation.status === 'ADMINMADE'
-                ? 'border-orange-700'
+                ? 'border-primary'
                 : 'border-emerald-700'
           }
           transition-all
diff --git a/apps/frontend/src/components/calendar/interval-swithcer.tsx b/apps/frontend/src/components/calendar/interval-switcher.tsx
similarity index 50%
rename from apps/frontend/src/components/calendar/interval-swithcer.tsx
rename to apps/frontend/src/components/calendar/interval-switcher.tsx
index ebf7099..73195b0 100644
--- a/apps/frontend/src/components/calendar/interval-swithcer.tsx
+++ b/apps/frontend/src/components/calendar/interval-switcher.tsx
@@ -8,19 +8,19 @@ export default function IntervalSwitcher(props: IntervalSwitcherProps) {
   return (
     <div>
       <button
-        className='m-1 border-2 border-orange-500 dark:bg-orange-600 dark:hover:bg-orange-500 dark:text-slate-50 font-bold py-1 px-2 rounded-lg'
+        className='m-1 border-2 border-primary hover:bg-primary/10 dark:bg-primary/80 dark:text-primary-foreground dark:hover:bg-primary/90 font-bold py-1 px-2 rounded-lg'
         onClick={() => props.setView(View.Month)}
       >
         Month
       </button>
       <button
-        className='m-1 border-2 border-orange-500 dark:bg-orange-600 dark:hover:bg-orange-500 dark:text-slate-50 font-bold py-1 px-2 rounded-lg'
+        className='m-1 border-2 border-primary hover:bg-primary/10 dark:bg-primary/80 dark:text-primary-foreground dark:hover:bg-primary/90 font-bold py-1 px-2 rounded-lg'
         onClick={() => props.setView(View.Week)}
       >
         Week
       </button>
       <button
-        className='m-1 border-2 border-orange-500 dark:bg-orange-600 dark:hover:bg-orange-500 dark:text-slate-50 font-bold py-1 px-2 rounded-lg'
+        className='m-1 border-2 border-primary hover:bg-primary/10 dark:bg-primary/80 dark:text-primary-foreground dark:hover:bg-primary/90 font-bold py-1 px-2 rounded-lg'
         onClick={() => props.setView(View.Day)}
       >
         Day
diff --git a/apps/frontend/src/components/calendar/reservation-details.tsx b/apps/frontend/src/components/calendar/reservation-details.tsx
index 730bf62..e9d7b97 100644
--- a/apps/frontend/src/components/calendar/reservation-details.tsx
+++ b/apps/frontend/src/components/calendar/reservation-details.tsx
@@ -1,5 +1,5 @@
 // components/calendar/reservation-details.tsx
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 
 import { useReservationDetails } from '@/hooks/useReservationDetails';
 import { Reservation } from '@/types/reservation';
@@ -172,7 +172,7 @@ export default function ReservationDetails(props: EventDetailsProps) {
                 {CurrentUserIsGK() && (
                   <button
                     className={`px-4 py-2 text-sm font-medium text-white rounded-md transition-colors
-                      ${gateKeeper === null ? 'bg-orange-500 hover:bg-orange-600' : 'bg-amber-600 hover:bg-amber-700'}`}
+                      ${gateKeeper === null ? 'bg-primary hover:bg-primary/90 text-primary-foreground' : 'bg-secondary hover:bg-secondary/80 text-secondary-foreground'}`}
                     onClick={onSetGK}
                   >
                     {gateKeeper === null ? 'Jelentkezés beengedőnek' : 'Lejelentkezés beengedőként'}
diff --git a/apps/frontend/src/components/calendar/week/daily-weekly-view.tsx b/apps/frontend/src/components/calendar/week/daily-weekly-view.tsx
index d129a2a..d4fbf29 100644
--- a/apps/frontend/src/components/calendar/week/daily-weekly-view.tsx
+++ b/apps/frontend/src/components/calendar/week/daily-weekly-view.tsx
@@ -83,40 +83,41 @@ export default function DWView(props: DWViewProps) {
   const weekDays = getDays();
 
   return (
-    <div className='w-full h-full'>
-      <div className='bg-background shadow-lg bg-calendarBg bg-opacity-80 text-white w-full h-full'>
+    <div className='w-full h-full p-2 md:p-4'>
+      <div className='bg-background shadow-xl rounded-2xl border border-border overflow-hidden text-foreground w-full h-full flex flex-col'>
         {/* Header with month/year and navigation */}
-        <div className='flex items-center justify-between px-4 py-3 border-b border-slate-300/20 bg-gradient-to-r from-slate-100/90 to-slate-200/90 dark:from-slate-800/90 dark:to-slate-700/90'>
+        <div className='flex items-center justify-between px-6 py-4 border-b border-border bg-card'>
           <button
             onClick={handlePreviousWeek}
-            className='p-2 rounded-full hover:bg-white/30 dark:hover:bg-slate-600/50 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary transition-colors duration-200 text-slate-700 dark:text-slate-200'
+            className='p-2 rounded-full hover:bg-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-primary transition-colors duration-200 text-muted-foreground hover:text-foreground'
           >
             <ChevronLeftIcon className='w-5 h-5' />
           </button>
 
           <div className='flex flex-col items-center'>
-            <div className='text-xl font-semibold text-slate-800 dark:text-white tracking-wide'>
-              {props.currentDate.toLocaleString('hu', { month: 'long' })} {props.currentDate.getFullYear()}
+            <div className='text-xl flex items-baseline gap-2 font-bold text-foreground tracking-tight'>
+              <span className='text-muted-foreground font-medium text-lg'>{props.currentDate.getFullYear()}.</span>
+              {props.currentDate.toLocaleString('hu', { month: 'long' })}
             </div>
-            <div className='text-xs text-slate-500 dark:text-slate-400 mt-0.5'>
-              Week {Math.ceil((props.currentDate.getDate() + firstDayOfWeek.getDay()) / 7)}
+            <div className='text-xs font-medium text-muted-foreground mt-1 bg-muted px-2 py-0.5 rounded-full'>
+              {Math.ceil((props.currentDate.getDate() + firstDayOfWeek.getDay()) / 7)}. hét
             </div>
           </div>
 
           <button
             onClick={handleNextWeek}
-            className='p-2 rounded-full hover:bg-white/30 dark:hover:bg-slate-600/50 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary transition-colors duration-200 text-slate-700 dark:text-slate-200'
+            className='p-2 rounded-full hover:bg-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-primary transition-colors duration-200 text-muted-foreground hover:text-foreground'
           >
             <ChevronRightIcon className='w-5 h-5' />
           </button>
         </div>
 
         <div
-          className='grid grid-cols-8 w-full h-[calc(100%-60px)]'
-          style={{ gridTemplateColumns: '80px repeat(7, 1fr)' }}
+          className='grid grid-cols-8 w-full flex-grow'
+          style={{ gridTemplateColumns: '80px repeat(7, 1fr)', gridTemplateRows: 'max-content 1fr' }}
         >
           {/* Empty cell above time column */}
-          <div className='flex items-center justify-center h-16 font-medium text-muted-foreground border-b border-slate-300/30 bg-slate-50 dark:bg-slate-800/40' />
+          <div className='flex items-center justify-center h-[72px] border-b border-r border-border bg-muted/10' />
 
           {/* Day headers */}
           {weekDays.map((day, i) => {
@@ -127,21 +128,20 @@ export default function DWView(props: DWViewProps) {
               <div
                 key={`day-header-${day.getTime()}`}
                 className={`
-              flex flex-col items-center justify-center h-16 
-              border-b border-l border-slate-300/30
-              ${isWeekend ? 'bg-slate-100 dark:bg-slate-800/30' : 'bg-slate-50 dark:bg-slate-800/20'}
-              ${isToday ? 'ring-2 ring-inset ring-primary/40 dark:ring-primary/30' : ''}
+              flex flex-col items-center justify-center h-[72px]
+              border-b border-border border-r last:border-r-0
+              ${isWeekend ? 'bg-muted/20' : 'bg-transparent'}
             `}
               >
                 <span
-                  className={`text-xs font-medium mb-1 ${isWeekend ? 'text-slate-500' : 'text-slate-400'} dark:text-slate-500`}
+                  className={`text-xs font-semibold mb-1 uppercase tracking-wider ${isToday ? 'text-primary' : ''} ${!isToday && isWeekend ? 'text-muted-foreground' : ''} ${!isToday && !isWeekend ? 'text-foreground/70' : ''}`}
                 >
-                  {['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'][i]}
+                  {['H', 'K', 'Sze', 'Cs', 'P', 'Szo', 'V'][i]}
                 </span>
                 <span
                   className={`
-              flex items-center justify-center 
-              ${isToday ? 'bg-primary text-white w-7 h-7 rounded-full font-semibold' : 'font-medium text-slate-700 dark:text-slate-300'}
+              flex items-center justify-center
+              ${isToday ? 'bg-primary text-primary-foreground w-8 h-8 rounded-full font-bold shadow-md' : 'text-lg font-medium text-foreground'}
             `}
                 >
                   {day.getDate()}
@@ -151,21 +151,10 @@ export default function DWView(props: DWViewProps) {
           })}
 
           {/* Time column */}
-          <div className='border-r border-slate-300/30'>
+          <div className='border-r border-border bg-muted/5'>
             {Array.from({ length: 48 }, (_, i) => (
-              <div
-                key={`time-${i}`}
-                className={`cursor-pointer focus:outline-none focus-visible:ring-2 h-10 focus-visible:ring-primary text-slate-800 dark:text-white border-b border-slate-300/30 ${
-                  i % 2 === 0 ? '' : 'bg-slate-800/5'
-                }`}
-              >
-                {i % 2 === 0 ? (
-                  <div className='flex flex-col pl-2'>
-                    <span className='self-start text-sm'>{i / 2}:00</span>
-                  </div>
-                ) : (
-                  ''
-                )}
+              <div key={`time-${i}`} className='flex justify-center items-start h-10 border-b border-border/40'>
+                {i % 2 === 0 ? <span className='text-xs font-medium text-muted-foreground mt-1'>{i / 2}:00</span> : ''}
               </div>
             ))}
           </div>
@@ -174,7 +163,7 @@ export default function DWView(props: DWViewProps) {
           {weekDays.map((day, index) => (
             <div
               key={`day-column-${day.getTime()}`}
-              className={`border-r border-slate-300/30 ${index === 5 || index === 6 ? 'bg-slate-800/10' : ''}`}
+              className={`border-r last:border-r-0 border-border/40 ${index === 5 || index === 6 ? 'bg-muted/10' : ''}`}
             >
               <DailyViewWO
                 currentDate={day}
diff --git a/apps/frontend/src/components/layout/footer.tsx b/apps/frontend/src/components/layout/footer.tsx
index 2ccc45f..4e729cb 100644
--- a/apps/frontend/src/components/layout/footer.tsx
+++ b/apps/frontend/src/components/layout/footer.tsx
@@ -5,7 +5,7 @@ import { SiGmail } from 'react-icons/si';
 
 export function Footer() {
   return (
-    <footer className='p-4 dark:bg-zinc-900 border-t border-orange-500'>
+    <footer className='p-4 dark:bg-zinc-900 border-t border-border'>
       <div className='grid grid-cols-1 lg:grid-cols-3 w-full container mx-auto gap-4 items-center'>
         <div className='flex gap-4 justify-center lg:justify-start items-center'>
           <Link
diff --git a/apps/frontend/src/components/layout/player.tsx b/apps/frontend/src/components/layout/player.tsx
index 3645f4a..4b85322 100644
--- a/apps/frontend/src/components/layout/player.tsx
+++ b/apps/frontend/src/components/layout/player.tsx
@@ -37,7 +37,7 @@ export function Player() {
           <Button size='icon' variant='ghost'>
             <SkipBack className='h-4 w-4' />
           </Button>
-          <Button size='icon' className='h-8 w-8 bg-orange-500 hover:bg-orange-600'>
+          <Button size='icon' className='h-8 w-8 bg-primary hover:bg-primary/90 text-primary-foreground'>
             <Play className='h-4 w-4' />
           </Button>
           <Button size='icon' variant='ghost'>
@@ -50,7 +50,7 @@ export function Player() {
         <div className='flex items-center space-x-2 text-sm text-zinc-400'>
           <span>1:55</span>
           <div className='w-96 h-1 bg-zinc-800 rounded-full'>
-            <div className='w-1/3 h-full bg-orange-500 rounded-full' />
+            <div className='w-1/3 h-full bg-primary rounded-full' />
           </div>
           <span>3:47</span>
         </div>
diff --git a/apps/frontend/src/components/layout/sidebar.tsx b/apps/frontend/src/components/layout/sidebar.tsx
index 172fe91..676d13e 100644
--- a/apps/frontend/src/components/layout/sidebar.tsx
+++ b/apps/frontend/src/components/layout/sidebar.tsx
@@ -1,5 +1,5 @@
 'use client';
-import { BookAudio, CalendarPlus, Heart, ListMusic, MicVocal, ShieldCheck, Users2 } from 'lucide-react';
+import { BarChart3, BookAudio, CalendarPlus, Heart, ListMusic, MicVocal, ShieldCheck, Users2 } from 'lucide-react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 
@@ -10,6 +10,8 @@ import { Role } from '@/types/user';
 export function Sidebar() {
   const pathname = usePathname();
   const { user } = useUser();
+  const isAdmin = user?.role === Role.ADMIN;
+  const isGateKeeper = user?.clubMembership?.isGateKeeper;
   return (
     <div className='w-64 p-4 flex flex-col'>
       <div className='mt-10 space-y-10'>
@@ -86,20 +88,32 @@ export function Sidebar() {
           </div>
         )}
 
-        {user?.role === Role.ADMIN && (
+        {(isAdmin || isGateKeeper) && (
           <div className='pt-4'>
             <h2 className='text-xs uppercase text-zinc-400 font-bold mb-2'>Adminisztráció</h2>
             <div className='space-y-2'>
               <Button
-                variant={pathname.startsWith('/admin') ? 'blastActive' : 'blast'}
+                variant={pathname.startsWith('/stats') ? 'blastActive' : 'blast'}
                 className='w-full justify-start'
                 asChild
               >
-                <Link href='/admin'>
-                  <ShieldCheck className='mr-2 h-4 w-4' />
-                  Admin panel
+                <Link href='/stats'>
+                  <BarChart3 className='mr-2 h-4 w-4' />
+                  Statisztika
                 </Link>
               </Button>
+              {isAdmin && (
+                <Button
+                  variant={pathname.startsWith('/admin') ? 'blastActive' : 'blast'}
+                  className='w-full justify-start'
+                  asChild
+                >
+                  <Link href='/admin'>
+                    <ShieldCheck className='mr-2 h-4 w-4' />
+                    Admin panel
+                  </Link>
+                </Button>
+              )}
             </div>
           </div>
         )}
diff --git a/apps/frontend/src/components/news/news-card.tsx b/apps/frontend/src/components/news/news-card.tsx
index 8eb35e2..7feeceb 100644
--- a/apps/frontend/src/components/news/news-card.tsx
+++ b/apps/frontend/src/components/news/news-card.tsx
@@ -19,9 +19,9 @@ export default function NewsCard({
   handleTogglePin: (id: string) => Promise<void>;
 }) {
   return (
-    <Card key={post.id} className={`relative border-0 border-l-4 ${post.isPinned ? 'border-l-orange-500' : ''}`}>
+    <Card key={post.id} className={`relative border-0 border-l-4 ${post.isPinned ? 'border-l-primary' : ''}`}>
       <CardTitle className='p-4'>
-        {post.isPinned && <Pin className='inline w-4 h-4 mr-2 text-orange-500' />}
+        {post.isPinned && <Pin className='inline w-4 h-4 mr-2 text-primary' />}
         {post.title}
       </CardTitle>
       {isAdmin && (
diff --git a/apps/frontend/src/components/ui/badge.tsx b/apps/frontend/src/components/ui/badge.tsx
index ddffd45..2b71793 100644
--- a/apps/frontend/src/components/ui/badge.tsx
+++ b/apps/frontend/src/components/ui/badge.tsx
@@ -8,8 +8,7 @@ const badgeVariants = cva(
   {
     variants: {
       variant: {
-        default:
-          'border-transparent bg-orange-500 text-slate-50 hover:bg-orange-400/80 dark:bg-orange-700 dark:text-slate-50 dark:hover:bg-orange-500/80',
+        default: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
         secondary:
           'border-transparent bg-slate-100 text-slate-900 hover:bg-slate-400/80 dark:bg-zinc-700 dark:text-slate-50 dark:hover:bg-zinc-500/80',
         destructive:
diff --git a/apps/frontend/src/components/ui/button.tsx b/apps/frontend/src/components/ui/button.tsx
index b78aa38..676938c 100644
--- a/apps/frontend/src/components/ui/button.tsx
+++ b/apps/frontend/src/components/ui/button.tsx
@@ -11,13 +11,13 @@ const buttonVariants = cva(
       variant: {
         default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
         destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
-        outline: 'border border-primary bg-background shadow-sm hover:bg-orange-500/10 hover:text-accent-foreground',
+        outline: 'border border-primary bg-background shadow-sm hover:bg-primary/10 hover:text-accent-foreground',
         secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground',
         link: 'text-primary underline-offset-4 hover:underline',
-        blast: 'hover:text-primary hover:bg-gradient-to-r from-orange-500/20 via-orange-500/10 to-transparent',
-        blastActive: 'text-primary bg-gradient-to-r from-orange-500/20 via-orange-500/10 to-transparent',
-        ghostPrimary: 'text-primary bg-orange-500/10 hover:bg-orange-500/20',
+        blast: 'hover:text-primary hover:bg-gradient-to-r from-primary/20 via-primary/10 to-transparent',
+        blastActive: 'text-primary bg-gradient-to-r from-primary/20 via-primary/10 to-transparent',
+        ghostPrimary: 'text-primary bg-primary/10 hover:bg-primary/20',
       },
       size: {
         default: 'h-9 px-4 py-2',
diff --git a/apps/frontend/src/components/ui/card.tsx b/apps/frontend/src/components/ui/card.tsx
index 45f7a8d..054e562 100644
--- a/apps/frontend/src/components/ui/card.tsx
+++ b/apps/frontend/src/components/ui/card.tsx
@@ -7,7 +7,7 @@ const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElemen
   <div
     ref={ref}
     className={cn(
-      'rounded-lg border border-orange-500 bg-white text-slate-950 shadow-sm dark:border-orange-650 dark:bg-zinc-900 dark:text-slate-50',
+      'rounded-lg border border-border bg-white text-slate-950 shadow-sm dark:bg-zinc-900 dark:text-slate-50',
       className
     )}
     {...props}
diff --git a/apps/frontend/src/components/ui/rules-card.tsx b/apps/frontend/src/components/ui/rules-card.tsx
index 54285ea..5a40518 100644
--- a/apps/frontend/src/components/ui/rules-card.tsx
+++ b/apps/frontend/src/components/ui/rules-card.tsx
@@ -10,7 +10,7 @@ export default function RulesCard() {
         </p>
         <p className='mb-4'>
           Ha olyan problémád van, melyet a lent leírtak nem fednek, úgy a{' '}
-          <a href='/about' className='text-orange-500 underline' target='_blank' rel='noopener noreferrer'>
+          <a href='/about' className='text-primary underline' target='_blank' rel='noopener noreferrer'>
             főispánt / teremispánt
           </a>{' '}
           kell keresni.
@@ -19,11 +19,11 @@ export default function RulesCard() {
         <h2 className='text-2xl font-semibold mt-8 mb-4'>Próbaterem használatához szükséges teendők:</h2>
         <ol className='list-decimal list-inside space-y-2 mb-4'>
           <li>
-            <a href='/register' className='text-orange-500 underline' target='_blank' rel='noopener noreferrer'>
+            <a href='/register' className='text-primary underline' target='_blank' rel='noopener noreferrer'>
               Regisztrálj
             </a>{' '}
             vagy{' '}
-            <a href='/login' className='text-orange-500 underline' target='_blank' rel='noopener noreferrer'>
+            <a href='/login' className='text-primary underline' target='_blank' rel='noopener noreferrer'>
               jelentkezz be.
             </a>
           </li>
@@ -31,7 +31,7 @@ export default function RulesCard() {
             Iratkozz fel a{' '}
             <a
               href='https://lists.sch.bme.hu/wws/subscribe/probaterem'
-              className='text-orange-500 underline'
+              className='text-primary underline'
               target='_blank'
               rel='noopener noreferrer'
             >
@@ -53,7 +53,7 @@ export default function RulesCard() {
         </ol>
         <p className='mb-4'>
           A fentiekkel kapcsolatban bármilyen probléma esetén írjatok a levlistára (
-          <a href='mailto:probaterem@sch.bme.hu' className='text-orange-500 underline'>
+          <a href='mailto:probaterem@sch.bme.hu' className='text-primary underline'>
             probaterem@sch.bme.hu
           </a>
           ).
@@ -78,7 +78,7 @@ export default function RulesCard() {
           <li>
             Időpontot a weblapon tudsz foglalni. Ezt minél hamarabb elintézed, annál esélyesebb, hogy lesz beengedőd.
             Amennyiben nincs, írj a listánkra! (
-            <a href='mailto:probaterem@sch.bme.hu' className='text-orange-500 underline'>
+            <a href='mailto:probaterem@sch.bme.hu' className='text-primary underline'>
               probaterem@sch.bme.hu
             </a>
             )
@@ -87,7 +87,7 @@ export default function RulesCard() {
             Egy héten összesen 6 óra, naponta pedig 3 óra foglalható fixen. Természetesen foglalhatsz többet is, de az
             már feltételes foglalás lesz, ami azt jelenti, hogy bárki ráfoglalhat erre az időpontra (akár Te is
             másokéra). Figyeljetek rá, hogy az egyéni tagok foglalásai nem ekvivalensek a bandák foglalásaival (lásd:{' '}
-            <a href='#sanctions' className='text-orange-500 underline'>
+            <a href='#sanctions' className='text-primary underline'>
               Szankciók
             </a>
             ).
diff --git a/project_info/guidelines.md b/project_info/guidelines.md
index 703b7b5..9a7c101 100644
--- a/project_info/guidelines.md
+++ b/project_info/guidelines.md
@@ -196,6 +196,9 @@ Group components by domain in `src/components/<domain>/`. Shared UI primitives l
 
 Pages live in `src/app/<route>/page.tsx`, following Next.js App Router conventions. The root layout (`src/app/layout.tsx`) wraps child pages with `Header`, `Sidebar`, `RightSidebar`, `Footer`, and `ThemeProvider`.
 
+**Design System:**
+The application uses a sleek, monochromatic design system (based on the standard zinc palette). The `--primary` color maps directly to high-contrast neutrals (e.g. `zinc-900` in light mode, `zinc-50` in dark mode).
+
 ---
 
 ## API Design Patterns