diff --git a/my-workspace/projects/sae-lib/alert-box/alert-box.scss b/my-workspace/projects/sae-lib/alert-box/alert-box.scss
index eb9344a..ebdc8fc 100644
--- a/my-workspace/projects/sae-lib/alert-box/alert-box.scss
+++ b/my-workspace/projects/sae-lib/alert-box/alert-box.scss
@@ -7,9 +7,8 @@
   margin-top: shadows.$spacing-1;
   margin-bottom: shadows.$spacing-1;
   text-align: left;
-  margin-left: -100px;
 
-  i{
+  i {
     margin-right: 10px;
   }
 }
diff --git a/sae-csc/src/app/pages/admin/admin.html b/sae-csc/src/app/pages/admin/admin.html
index 49659db..6aaa97f 100644
--- a/sae-csc/src/app/pages/admin/admin.html
+++ b/sae-csc/src/app/pages/admin/admin.html
@@ -1 +1,97 @@
-<p>admin works!</p>
+<div class="csc-admin-page">
+  <div class="left-panel">
+
+    <div class="user">
+      <div class="avatar"></div>
+      <div class="name">
+        <strong>Admin :</strong>
+        <span class="admin-name">
+
+        Gyeongyeon KIM
+        </span>
+      </div>
+    </div>
+  </div>
+  <div class="main-panel">
+    <h1 class="title">
+      Admin panel - user access management.
+    </h1>
+    <div class="tabs">
+      <div class="tab-item">
+        <span class="label">
+        Pending requests
+        </span>
+      </div>
+      <div class="tab-item">
+
+        <span class="label">
+        User Management
+        </span>
+      </div>
+      <div class="tab-item">
+        <span class="label">
+        Statistics
+        </span>
+      </div>
+    </div>
+    <div class="tab-content">
+      @if (currentTab == 'pending') {
+        <h2 class="title">
+          Pending Access Requests
+        </h2>
+        <div class="notifications">
+          <sae-alert-box [message]="'1 pending request'" [style]="'info'"></sae-alert-box>
+        </div>
+
+        <div class="access-request-container">
+          <article>
+            <header>
+
+              Aurélie POMMIER ( <a href="mailto:aurelie.pommier@safrangroup.com">aurelie.pommier@safrangroup.com</a> ) -
+              Requested on <span class="date">2025-07-29</span>
+            </header>
+            <main>
+
+              <div class="email">
+                <strong class="label">
+                  Email:
+                </strong>
+                <span class="value">
+                  aurelie.pommier@safrangroup.com
+                </span>
+              </div>
+
+              <fieldset class="admin-notes">
+
+                <h3 class="title is-3">Admin notes</h3>
+                <textarea name="admin_notes" id="admin_notes" cols="30" rows="5" resize="true"></textarea>
+
+                <div class="actions">
+                  <button class="approve">
+                    Approve
+                  </button>
+                  <button class="approve">
+                    Reject
+                  </button>
+                </div>
+              </fieldset>
+            </main>
+          </article>
+        </div>
+      }
+    </div>
+
+    <div class="bottom-nav">
+      <hr>
+
+      <button class="button refresh-button">
+        Refresh data
+      </button>
+      <sae-feedback-button></sae-feedback-button>
+      <nav>
+        <a href="/admin">Admin Panel</a>
+      </nav>
+    </div>
+  </div>
+
+</div>
diff --git a/sae-csc/src/app/pages/admin/admin.scss b/sae-csc/src/app/pages/admin/admin.scss
index e69de29..2ce9e78 100644
--- a/sae-csc/src/app/pages/admin/admin.scss
+++ b/sae-csc/src/app/pages/admin/admin.scss
@@ -0,0 +1,17 @@
+.csc-admin-page {
+  padding: 16px;
+  padding-top: 150px;
+
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+
+  .left-panel {
+    background: #d4dcdf;
+    width: 20vw;
+  }
+
+  .main-panel {
+    padding-left: 100px;
+  }
+}
diff --git a/sae-csc/src/app/pages/admin/admin.ts b/sae-csc/src/app/pages/admin/admin.ts
index c3cd16c..e7eba2f 100644
--- a/sae-csc/src/app/pages/admin/admin.ts
+++ b/sae-csc/src/app/pages/admin/admin.ts
@@ -1,11 +1,17 @@
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
+import {AlertBox} from 'sae-lib/alert-box/alert-box';
+import {FeedbackButton} from 'sae-lib/buttons/feedback-button/feedback-button';
 
 @Component({
   selector: 'app-admin',
-  imports: [],
+  imports: [
+    AlertBox,
+    FeedbackButton
+  ],
   templateUrl: './admin.html',
   styleUrl: './admin.scss'
 })
 export class Admin {
 
+  currentTab: 'pending' | 'users' | 'statistics' = 'pending'
 }
diff --git a/sae-csc/src/app/shared/navigation/top-navigation/top-navigation.html b/sae-csc/src/app/shared/navigation/top-navigation/top-navigation.html
index ae77cea..4a4ed4f 100644
--- a/sae-csc/src/app/shared/navigation/top-navigation/top-navigation.html
+++ b/sae-csc/src/app/shared/navigation/top-navigation/top-navigation.html
@@ -25,14 +25,9 @@
         </a>
       </div>
       <div class="navbar-end">
-
-        <!--        <a class="navbar-item">-->
-        <!--          Home-->
-        <!--        </a>-->
-        <a class="navbar-item is-active">
+        <a class="navbar-item is-active" routerLink="admin" routerLinkActive="is-active">
           <i class="ri-admin-line"></i>
           Admin
-
         </a>
         <a class="navbar-item">
           <i class="ri-compass-3-line"></i>