diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1d8ce799..8394bbf3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,4 +1,26 @@
-# Change log for Git4School
+## [Unreleased]
+
+### Added
+
+#### Overview graph
+
+- ⭐ Student repository navigation with tooltip feedback in the students view
+
+#### Home
+
+- ⭐ Collapsible animated search bar in the assignment chooser
+
+#### General
+
+- ⭐ Support for self-hosted GitLab instances with multi-account management
+- Automatic GitLab OAuth token refresh with rotation and HTTP interceptor
+- ⭐ Visual **anonymization mode** for classroom presentations — student names, repositories and authors are hidden on demand via `AnonymizationService`
+
+### Fixed
+
+- Tooltip content adaptation, helper expansion and viewport boundaries
+
+---
 
 ## 2.5.1
 
@@ -9,6 +31,8 @@
 - **TP Group Extraction from README**: Correctly extract TP group located after a checked markdown checkbox (`- [x]` or `- [X]`) instead of capturing brackets.
 - **Multilingual Name Parsing**: Fix line-by-line parsing to properly extract student names when colons are placed inside bold/italic markdown formatting (e.g. `**Nom :** **Durand**`).
 
+---
+
 ## 2.5.0
 
 ### Added
@@ -27,6 +51,408 @@
   - Added ADR 0009 (`docs/adr/0009-detection-multilingue-et-reaffectation-noms-depots.md`).
   - Added unit test suite for multilingual name detection in `Utils`.
 
+---
+
+## 2.4.0
+
+### Added
+
+#### General
+
+- ⭐ **GitLab support**: users can now connect to GitLab via OAuth 2.0 PKCE, in addition to GitHub
+  - Strategy Pattern architecture for multi-provider authentication (ADR-0006)
+  - ⭐ Dedicated split button UI to choose the authentication provider
+  - Secure _remember-me_ token storage and clean legacy auth flow
+- Architecture Decision Records (ADR) showcase page published on the GitHub Wiki
+
+### Fixed
+
+- Unit test failures in `AccountsService`, token storage and GitLab callback specs
+
+---
+
+## 2.3.0
+
+### Modified
+
+#### General
+
+- Views have been renamed for consistency and clarity
+- ⭐ Student repository navigation added to the students view
+
+---
+
+## 2.2.1
+
+### Added
+
+#### Questions chooser
+
+- ⭐ Improved dropdown, assistant and accordion button click feedback with chevron rotation animation
+
+### Fixed
+
+- Fixed a crash in the question completion graph caused by a question casing mismatch
+- Prevented typeahead selection jumps during arrow navigation via a dedicated directive (ADR-0005)
+
+---
+
+## 2.2.0
+
+### Added
+
+#### Questions chooser
+
+- ⭐ A **questions assistant popover** with contextual help for commit closing rules configuration
+  - The panel moves alongside the suggestions popover so it is always visible
+- ⭐ Support for **pasting multiple questions** at once using a delimiter separator
+- Advanced mode for adding questions with finer-grained configuration
+
+### Fixed
+
+- Popover stacking above the navbar and hover flickering
+- Outside click dismissal of the questions assistant popover inside modals
+- Popover viewport overflow — auto-dropup and polished layout
+- i18n label overflow in various UI elements
+
+---
+
+## 2.1.1
+
+### Fixed
+
+- Fixed animation lag on the disconnect button in the sidebar
+
+---
+
+## 2.1.0
+
+### Added
+
+#### Sidebar & Navigation
+
+- ⭐ **Git accounts management**: connected accounts are now displayed and managed directly in the sidebar and the connection modal
+
+#### Developer tools
+
+- A **developer toolbar** for debugging and toggling feature flags (hidden in production)
+
+### Modified
+
+#### General
+
+- Cyclomatic complexity reduced across several components; regression test suite added
+- Codacy metrics configured; Stylelint integrated for SCSS quality
+- Codacy issues resolved across the codebase
+
+### Fixed
+
+- Fixed a 1-month offset in the commit tooltip date format
+
+---
+
+## 2.0.5
+
+### Added
+
+#### Overview graph
+
+- ⭐ Milestone labels redesigned with **chronological overlap masking** to avoid visual clutter
+
+### Modified
+
+#### Home
+
+- ⭐ Assignment status badges improved; status filters interaction polished
+
+### Fixed
+
+- Milestone bar thickness, text width and cutout bounds aligned precisely
+
+---
+
+## 2.0.4
+
+### Modified
+
+#### Overview graph
+
+- ⭐ Session visualization redesigned with **sticky header badges**, custom labels, and a responsive layout
+- Milestone and session updates are now applied smoothly without recreating the graph
+- Overlay management refactored into `OverlayManagerService` to coordinate dropdown and popover closing
+- Search input focus is maintained after pressing Enter
+
+### Fixed
+
+- Milestone drag pill clipping and dark mode text contrast
+- Popovers no longer stack above the navbar
+- Popovers auto-close when interacting with the overview graph
+- Sidebar z-index stacking order corrected (above popovers and dropdowns, below modals)
+- Zoom reset is restored after loading or filtering; search input focus is maintained
+- Milestone drag progress circle color now matches the milestone type
+
+---
+
+## 2.0.3
+
+### Fixed
+
+- Date preview corrected when moving a milestone in the overview graph
+- Milestone drag pill clipping and dark mode text contrast
+
+---
+
+## 2.0.2
+
+### Modified
+
+#### Overview graph
+
+- ⭐ Milestone types order inverted to better match the expected workflow
+- ⭐ Milestone label upper strip is now clickable; strip hidden when no milestone to display
+- Delete milestone/session shown in red in the context menu
+- More subtle required-field message for milestone type
+- Long-press is now required to drag milestones (prevents accidental drags)
+
+### Fixed
+
+- Click date calculation corrected on sessions and milestones
+
+---
+
+## 2.0.1
+
+### Fixed
+
+#### Assignment editor
+
+- Repositories search fixed (including forked repos)
+- Toggling cycling between a repo and its forks works correctly
+- Repository rows details finalized
+
+---
+
+## 2.0.0
+
+### Added
+
+#### General
+
+- ⭐ **Full UI redesign** — modern sidebar navigation, floating panel, custom modal system, dark theme overhaul
+- ⭐ **Keyboard shortcuts** accessible from a dedicated modal with uniformized keycap style
+- **Skeleton loading** for commits and repository search results
+- Custom **toast service** and **tooltip service** replacing third-party libraries
+- ⭐ **Onboarding tutorial** (initially automatic, then triggered manually from the sidebar)
+
+#### Home
+
+- ⭐ Assignment list now shows **search and filter** controls (saved in LocalStorage)
+- ⭐ Assignments can be **filtered by forge** (only assignments from the connected forge are shown)
+- Assignment tabs organized by forge
+- Number of assignments displayed in the sidebar is configurable
+- ⭐ Sidebar is **resizable**; width is saved in LocalStorage
+
+#### Overview graph
+
+- ⭐ **Drag milestones** directly on the graph (requires long-press)
+- ⭐ Click on **grouped commits** to zoom in on them
+- Graphs **fully adapt** to any screen size
+- ⭐ Horizontal scroll possible with trackpad or Ctrl+scroll on macOS
+- ⭐ Filter criteria support **exclusion** using `!`
+- Filter criteria can be **moved** with Cmd+Arrow
+- Same criteria can be **added multiple times**
+- ⭐ Filter criteria visually **grouped** into pills
+- ⭐ Rich **filter suggestions popover** with contextual help
+- Legend elements are **clickable** to toggle visibility
+- Personal notes icon shown on sessions that have notes
+- ⭐ Personal notes shown in milestone tooltip on hover
+- Message displayed in overview when there are no repos or commits
+
+#### Students / Questions graphs
+
+- Student names display fixed in commits and questions graphs
+- Students now displayed with their names adjusted and truncated if too long
+
+### Modified
+
+#### General
+
+- All charts migrated from Chart.js to **D3.js**
+- GraphQL API used for retrieving commits and user repositories (performance improvement)
+- ⭐ Modals redesigned: slide-in from bottom, blurred backdrop
+- Toast animations improved
+
+#### Assignment editor
+
+- ⭐ Repository search redesigned with a floating selection bar tool and modal
+- Repository avatar now shown in the assignment repositories list
+- Auto-scroll to the edited assignment when opening it from the list
+
+### Fixed
+
+- Fixed calendar popover placement and TP group selector
+- Fixed scroll issue in the Home page
+- Fixed question renaming and adding more than 14 questions
+- Fixed display order of elements in the overview graph
+- Fixed date picker calendar displaying below viewport boundaries
+- Fixed question chooser in milestone edit
+
+---
+
+## 1.6.2
+
+### Fixed
+
+- Fixed session activity line display
+
+---
+
+## 1.6.1
+
+### Fixed
+
+- Fixed session display, milestone line length, and zoom on WebKit-based browsers
+
+---
+
+## 1.6.0
+
+### Modified
+
+#### Overview graph
+
+- Commits and questions graphs migrated from **Chart.js to D3.js** for more control and performance
+- ⭐ Overview is now **responsive** and adapts to the screen size
+- ⭐ GitHub authentication now uses a **popup** instead of a redirect
+
+### Fixed
+
+- Fixed scroll issues and contextual menu positioning
+- Fixed tooltip rendered at wrong time and position
+- Fixed zoom and size issues
+- Fixed commit filter not working
+- Fixed commit links opening in the same tab
+- Fixed date alignment and display offset issues
+
+---
+
+## 1.5.3
+
+### Added
+
+#### Overview graph
+
+- ⭐ Teachers can now **add personal notes** to a milestone or session
+- ⭐ Repository URL in the assignment editor is now **clickable** (opens in a new tab)
+
+#### Commits / Questions graphs
+
+- The maximum date of the sliders now adjusts to the latest commit date
+
+### Modified
+
+#### Overview graph
+
+- Long student names are now **truncated** in the overview graph
+
+### Deleted
+
+- Confirmation modal when importing multiple assignments has been removed
+
+### Fixed
+
+- Date slider maximum date corrected to reach the last commit (fix #119)
+
+---
+
+## 1.5.2
+
+### Modified
+
+#### General
+
+- ⭐ Now **loads more than 100 commits per repository** using GitHub API pagination
+- Upload and download assignment icons updated
+
+### Fixed
+
+- Fixed commits not being retrieved when there are fewer than 100
+- Fixed live deploy to Firebase
+
+---
+
+## 1.5.1
+
+### Fixed
+
+- Firebase configuration updated
+
+---
+
+## 1.5.0
+
+### Added
+
+#### General
+
+- ⭐ Support for reading an **IDENTITY file** to retrieve student identity information from repositories
+
+#### Overview graph
+
+- ⭐ The currently filtered group is used when **adding a milestone or session** (fix #124)
+- ⭐ Group filter is **kept active** for a session (fix #120)
+- `"All"` milestones remain visible on a filtered overview graph
+
+### Modified
+
+#### CI/CD
+
+- A comment with the **staging link** is automatically added when deployed
+
+---
+
+## 1.4.3
+
+### Fixed
+
+- Zoom level is no longer reset on graph manipulation
+- Fixed `repoAlreadyAddedValidator` — the validator was detecting itself as already present, preventing editing a repository
+
+---
+
+## 1.4.2
+
+### Added
+
+#### Assignment editor
+
+- Repository list is now **scrollable**
+- ⭐ Repositories can be **sorted** by name and other properties
+- Pressing **Enter** while editing a repository validates the row
+- Confirmation dialog added when **deleting a repository**
+
+### Fixed
+
+- Fixed error when importing an assignment with a milestone (fix #106)
+- Fixed save occurring when cancelling an empty row
+- Fixed bug when sorting repositories with no name
+
+---
+
+## 1.4.1
+
+### Added
+
+#### Overview graph
+
+- ⭐ **Time picker** restored in the milestone edition modal (lost during the datepicker library change)
+
+### Fixed
+
+- Fixed error when importing an assignment with a milestone (fix #106)
+
+---
+
 ## 1.4.0
 
 ### Modified
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 298d7696..d25addb5 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,7 +1,8 @@
 import { LOCATION_INITIALIZED, registerLocaleData } from "@angular/common";
-import { HttpClient, HttpClientModule } from "@angular/common/http";
+import { HTTP_INTERCEPTORS, HttpClient, HttpClientModule } from "@angular/common/http";
 import localeFr from "@angular/common/locales/fr";
 import localeRu from "@angular/common/locales/ru";
+import { GitlabAuthInterceptor } from "@interceptors/gitlab-auth.interceptor";
 import { APP_INITIALIZER, Injector, LOCALE_ID, NgModule } from "@angular/core";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { SharedUiModule } from "./shared/ui/shared-ui.module";
@@ -53,6 +54,7 @@ import { SidebarSettingsComponent } from "./components/nav-layouts/sidebar-setti
 import { AccountsComponent } from "./components/nav-layouts/sidebar-settings/accounts/accounts.component";
 import { AddAccountModalComponent } from "./components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component";
 import { GitlabCallbackComponent } from "@components/auth-callback/gitlab-callback.component";
+import { MockGitlabInterceptor } from "./dev-mock/mock-gitlab.interceptor";
 
 /**
  * Firebase configuration file
@@ -174,6 +176,16 @@ export function appInitializerFactory(translate: TranslateService, injector: Inj
     },
     DatabaseService,
     NgbActiveModal,
+    {
+      provide: HTTP_INTERCEPTORS,
+      useClass: GitlabAuthInterceptor,
+      multi: true,
+    },
+    {
+      provide: HTTP_INTERCEPTORS,
+      useClass: MockGitlabInterceptor,
+      multi: true,
+    },
   ],
   bootstrap: [AppComponent],
 })
diff --git a/src/app/components/graphs/commits/chart.scss b/src/app/components/graphs/commits/chart.scss
index 5f1483ee..247dc7e8 100644
--- a/src/app/components/graphs/commits/chart.scss
+++ b/src/app/components/graphs/commits/chart.scss
@@ -144,13 +144,12 @@ body.dark-theme .commit {
 
   .session-header-fo {
     pointer-events: auto;
-    overflow: hidden;
+    overflow: visible;
     cursor: default;
-    mask: url(#milestone-badges-cutout-mask);
-    -webkit-mask: url(#milestone-badges-cutout-mask);
   }
 
   .session-pill {
+    box-sizing: border-box;
     cursor: default;
     transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
     min-width: 0;
@@ -193,6 +192,24 @@ body.dark-theme .commit {
     }
   }
 
+  .session-counter {
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 10px;
+    font-weight: 600;
+    color: var(--color-text-secondary);
+    white-space: nowrap;
+    height: 18px;
+    line-height: 18px;
+    padding: 0 2px;
+    margin: 0;
+    vertical-align: middle;
+    align-self: center;
+    user-select: none;
+  }
+
   &:hover {
     .session-header-top-bar {
       opacity: 1;
@@ -209,7 +226,7 @@ body.dark-theme .commit {
   }
 }
 
-// Fallback legacy .session class
+/* Fallback legacy .session class */
 .session {
   stroke-width: 1px;
   stroke: var(--color-info);
@@ -397,4 +414,102 @@ body.dark-theme .commit {
     font-weight: 600;
     user-select: none;
   }
-}
\ No newline at end of file
+}
+
+/* Session edge arrows — Navigation entre séances superposées
+ * Ghost par défaut, reveal au hover, feedback physique au clic.
+ * Padding étendu pour une zone de clic confortable sans encombrer. */
+.session-edge-arrow {
+  box-sizing: border-box;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 18px;
+  padding: 2px 4px;
+  flex-shrink: 0;
+  will-change: transform;
+  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform 120ms ease-out;
+
+  svg {
+    display: block;
+    flex-shrink: 0;
+  }
+
+  &:hover {
+    background: var(--color-background-secondary);
+    border-color: var(--color-border);
+    color: var(--color-primary);
+  }
+
+  &:active {
+    transform: scale(0.88);
+  }
+}
+
+/* Zone de sélection de zoom (Shift + Drag) — Craft & Subtle style */
+.chart-selection-group {
+  pointer-events: none;
+  animation: selectionFadeIn 120ms cubic-bezier(0.23, 1, 0.32, 1) forwards;
+
+  &.selection-exiting {
+    animation: selectionFadeOut 180ms ease-out forwards;
+  }
+}
+
+.chart-selection-bg {
+  fill: var(--color-primary);
+  fill-opacity: 0.07;
+  stroke: none;
+}
+
+.chart-selection-edge {
+  stroke: var(--color-primary);
+  stroke-width: 1.5px;
+  stroke-opacity: 0.7;
+}
+
+.chart-selection-top-bar {
+  fill: var(--color-primary);
+  opacity: 0.9;
+}
+
+.chart-selection-badge-bg {
+  fill: var(--color-surface);
+  stroke: var(--color-border);
+  stroke-width: 1px;
+  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.08)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.04));
+}
+
+.chart-selection-badge-text {
+  fill: var(--color-text-primary);
+  font-family: var(--font-family-sans);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  user-select: none;
+}
+
+@keyframes selectionFadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes selectionFadeOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
diff --git a/src/app/components/graphs/commits/commits.component.html b/src/app/components/graphs/commits/commits.component.html
index 2fa36eb8..26d16868 100644
--- a/src/app/components/graphs/commits/commits.component.html
+++ b/src/app/components/graphs/commits/commits.component.html
@@ -170,14 +170,8 @@
       </svg>
     </button>
     <button class="btn-outline-ghost anim-spin-hover" (click)="loadGraph(dataService.startDate, dataService.endDate)" [disabled]="!dataService.repositories?.length || loading" [appTooltip]="{ text: ('OVERVIEW-GRAPH.RELOAD-TOOLTIP' | translate), shortcut: ['R'] }">
-      <div *ngIf="loading" class="d-flex">
-        <svg class="fa-spin" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"></path>
-          <path d="M21 3v5h-5"></path>
-        </svg>
-      </div>
-      <div *ngIf="!loading" class="d-flex">
-        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <div class="d-flex">
+        <svg [class.spinning]="loading" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
           <path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"></path>
           <path d="M21 3v5h-5"></path>
         </svg>
@@ -234,6 +228,7 @@ <h5 class="text-muted font-weight-medium mb-1">{{ 'OVERVIEW-GRAPH.NO-COMMITS-TIT
 
   <div class="chart-container-absolute" [style.visibility]="loading ? 'hidden' : 'visible'"></div>
   <div class="chart-container" [style.visibility]="loading ? 'hidden' : 'visible'"></div>
+  <div class="chart-selection-container" [style.visibility]="loading ? 'hidden' : 'visible'"></div>
 
   <!-- SKELETON LOADER OVERLAY -->
   <div *ngIf="loading" class="chart-skeleton-overlay d-flex" style="position: absolute; top: var(--top-inner, 28px); left: 0; right: 0; bottom: 0; width: 100%; z-index: 50; background: var(--color-surface); padding-bottom: var(--bottom-inner, 38px); pointer-events: none;">
@@ -339,9 +334,9 @@ <h6 class="dropdown-header px-0 mb-2" style="font-weight: 600;">{{ "OVERVIEW-GRA
   >
     <p>{{ commit_date_format(hovered_commit.commitDate) }}</p>
     <p>{{ hovered_commit.message }}</p>
-    <p>{{ hovered_commit.author }}</p>
+    <p>{{ getCommitAuthorDisplayName(hovered_commit) }}</p>
     <div class="tooltip-helpers mt-2 text-right d-flex align-items-center justify-content-end">
-      <div class="tooltip-helper-item d-flex align-items-center">
+      <div class="tooltip-helper-item d-flex align-items-center" *ngIf="!anonymizationService.isAnonymous">
         <span>{{ 'COMMIT-TOOLTIP.OPEN_COMMIT' | translate }}</span>
         <ng-container *ngTemplateOutlet="mouseLeftClickIcon"></ng-container>
       </div>
@@ -357,7 +352,7 @@ <h6 class="dropdown-header px-0 mb-2" style="font-weight: 600;">{{ "OVERVIEW-GRA
     id="repository_hover"
   >
     <div class="repo-name">{{ hovered_repository.name }}</div>
-    <div class="tooltip-helpers mt-2 text-right d-flex align-items-center justify-content-end" *ngIf="hovered_repository.url">
+    <div class="tooltip-helpers mt-2 text-right d-flex align-items-center justify-content-end" *ngIf="hovered_repository.url && !anonymizationService.isAnonymous">
       <div class="tooltip-helper-item d-flex align-items-center">
         <span>{{ 'OVERVIEW-GRAPH.OPEN-REPO' | translate }}</span>
         <ng-container *ngTemplateOutlet="mouseLeftClickIcon"></ng-container>
@@ -497,3 +492,5 @@ <h6 class="dropdown-header px-0 mb-2" style="font-weight: 600;">{{ "OVERVIEW-GRA
   (saveSession)="onSaveSession($event)"
 >
 </overview-graph-contextual-menu>
+
+
diff --git a/src/app/components/graphs/commits/commits.component.scss b/src/app/components/graphs/commits/commits.component.scss
index e2c3c92d..60061dbc 100644
--- a/src/app/components/graphs/commits/commits.component.scss
+++ b/src/app/components/graphs/commits/commits.component.scss
@@ -1,3 +1,5 @@
+@import "variables";
+
 :host {
   display: flex;
   flex-direction: column;
@@ -24,7 +26,7 @@
   width: 100%;
   --chart-width-left-spacing-ratio: 85%;
   --chart-width-max-left-spacing: 150px;
-  // to change chart-with
+  /* to change chart-width */
 
   flex: 1;
 }
@@ -76,6 +78,25 @@
   position: relative;
 }
 
+#chart .chart-selection-container {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -1px;
+  width: calc(100% + 1px);
+  height: auto;
+  min-height: 0px;
+  max-height: none;
+  vertical-align: top;
+  pointer-events: none;
+  overflow: hidden;
+  z-index: $zindex-chart-selection;
+
+  > svg {
+    position: relative;
+  }
+}
+
 #chart .chart-container > svg {
   display: block;
 }
@@ -87,8 +108,9 @@
   flex-direction: column;
   gap: 2px;
   user-select: none;
-  min-width: 200px;
-  max-width: 300px;
+  width: max-content;
+  min-width: max-content;
+  max-width: min(420px, calc(100vw - 32px));
 
   .repo-name {
     font-weight: 600;
@@ -118,14 +140,29 @@
   }
 
   .tooltip-helpers {
-    gap: 0.75rem;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 0.5rem 0.75rem;
     font-size: 0.75rem;
     color: var(--color-text-muted);
     white-space: nowrap;
+    width: 100%;
+    min-width: max-content;
+    flex-wrap: wrap;
+
+    > span {
+      white-space: nowrap;
+      flex-shrink: 0;
+    }
   }
 
   .tooltip-helper-item {
+    display: inline-flex;
+    align-items: center;
     gap: 0.25rem;
+    white-space: nowrap;
+    flex-shrink: 0;
 
     .ext-icon {
       width: 12px;
@@ -135,7 +172,3 @@
   }
 }
 
-#commit_hover {
-  max-width: 340px;
-}
-
diff --git a/src/app/components/graphs/commits/commits.component.ts b/src/app/components/graphs/commits/commits.component.ts
index 1a1565d4..60550908 100644
--- a/src/app/components/graphs/commits/commits.component.ts
+++ b/src/app/components/graphs/commits/commits.component.ts
@@ -25,18 +25,19 @@ import { ToastService } from "@services/toast.service";
 import { ThemeService } from "@services/theme.service";
 import { TooltipService } from "@services/tooltip.service";
 import { OverlayManagerService, OverlayType } from "@services/overlay-manager.service";
+import { AnonymizationService } from "@services/anonymization.service";
 import { Subject, Subscription, concat } from "rxjs";
-import { takeUntil } from "rxjs/operators";
+import { skip, takeUntil } from "rxjs/operators";
 import { BaseGraphComponent } from "../base-graph.component";
 import { OsUtils } from "@utils/os.utils";
 
 import * as d3 from "d3";
 import * as moment from "moment";
 import { Repository } from "../../../models/Repository.model";
-import { tick } from "@angular/core/testing";
-import { rejects } from "assert";
-import { Utils } from "../../../services/utils";
+import { Utils } from "@services/utils";
 import { FilterGroup } from "@components/questions-chooser/questions-chooser.component";
+import { SessionHeaderRenderer } from "./session-header-renderer";
+import { ActivatedRoute } from "@angular/router";
 
 @Component({
   selector: "commits",
@@ -116,6 +117,9 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
   other_g: d3.Selection<any, any, any, any>;
   session_g: d3.Selection<any, any, any, any>;
   session_header_g: d3.Selection<any, any, any, any>;
+  overlapGroups: Session[][] = [];
+  activeSessionIndices: Map<string, number> = new Map();
+  lastFocusedSession: Session = null;
   review_g: d3.Selection<any, any, any, any>;
   correction_g: d3.Selection<any, any, any, any>;
   milestones_g: d3.Selection<any, any, any, any>;
@@ -145,6 +149,8 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
   current_zoom: any;
   chart_abs_g: d3.Selection<SVGGElement, unknown, HTMLElement, any>;
   svg_abs: d3.Selection<any, unknown, HTMLElement, any>;
+  chart_selection_g: d3.Selection<SVGGElement, unknown, HTMLElement, any>;
+  svg_selection: d3.Selection<any, unknown, HTMLElement, any>;
   real_height: number;
   chart_width: number;
   repo_spacing: number;
@@ -171,6 +177,10 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
   readonly MILESTONE_HOLD_DURATION = 700;
   readonly MILESTONE_DRAG_JITTER_TOLERANCE = 5;
   readonly MILESTONE_CLICK_SUPPRESSION_DELAY = 300;
+  isSessionTooltipPinned = false;
+  isShiftDragging = false;
+  private sessionClickTimer: any = null;
+  private lastClickedSession: Session | null = null;
   ////////////////////////
 
   public modeHoverState: any = {
@@ -208,11 +218,10 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
 
   onMarkerChange(marker: string) {
     this.markerHoverState[marker].wasClicked = true;
-    const chartDiv = document.getElementById("chart");
-    const currentlyHasNoMilestonesClass = chartDiv?.classList.contains("no-milestones") ?? false;
-    const willHaveNoStrip = this.loading || !this.hasTopStrip();
+    const currentInnerTop = this.inner_margin?.top ?? 0;
+    const nextStripHeight = this.loading ? 0 : this.getTopStripHeight();
 
-    if (currentlyHasNoMilestonesClass !== willHaveNoStrip) {
+    if (currentInnerTop !== nextStripHeight) {
       this.loadGraphDataAndRefresh(true);
     } else {
       if (marker === "sessions") {
@@ -243,6 +252,7 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
     protected assignmentsService: AssignmentsService,
     public themeService: ThemeService,
     private tooltipService: TooltipService,
+    public anonymizationService: AnonymizationService,
     private ngZone: NgZone,
     public overlayManagerService: OverlayManagerService,
   ) {
@@ -276,6 +286,10 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
       this.updateLang();
     });
 
+    this.anonymizationService.isAnonymous$.pipe(skip(1), takeUntil(this.destroy$)).subscribe(() => {
+      this.loadGraphDataAndRefresh(true);
+    });
+
     this.overlayManagerService.dismiss$.pipe(takeUntil(this.destroy$)).subscribe((event) => {
       if (OverlayManagerService.shouldDismiss(OverlayType.DROPDOWN, event)) {
         if (this.groupDropdown && this.groupDropdown.isOpen()) {
@@ -285,6 +299,15 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
           this.legendDropdown.close();
         }
       }
+      if (OverlayManagerService.shouldDismiss(OverlayType.TOOLTIP, event)) {
+        if (this.sessionClickTimer) {
+          clearTimeout(this.sessionClickTimer);
+          this.sessionClickTimer = null;
+          this.lastClickedSession = null;
+        }
+        this.isSessionTooltipPinned = false;
+        this.hovered_session = undefined;
+      }
     });
   }
 
@@ -296,6 +319,10 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
       return;
     }
 
+    if (OsUtils.isTypingInInput(event)) {
+      return;
+    }
+
     const key = event.key.toLowerCase();
 
     if (key === "escape") {
@@ -305,10 +332,6 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
       return;
     }
 
-    if (OsUtils.isTypingInInput(event)) {
-      return;
-    }
-
     if (key === "f" && !event.ctrlKey && !event.metaKey && !event.altKey) {
       event.preventDefault();
       if (this.questionsChooser && typeof this.questionsChooser.focus === "function") {
@@ -335,6 +358,12 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
       event.preventDefault();
       this.resetZoom(false);
       this.triggerShortcut("space");
+    } else if (event.key === "ArrowLeft" && !event.ctrlKey && !event.metaKey && !event.altKey) {
+      event.preventDefault();
+      this.navigateToNextSession(-1);
+    } else if (event.key === "ArrowRight" && !event.ctrlKey && !event.metaKey && !event.altKey) {
+      event.preventDefault();
+      this.navigateToNextSession(1);
     }
   }
 
@@ -378,6 +407,10 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
       cancelAnimationFrame(this.zoomRafId);
       this.zoomRafId = null;
     }
+    if (this.sessionClickTimer) {
+      clearTimeout(this.sessionClickTimer);
+      this.sessionClickTimer = null;
+    }
     this.clearMilestoneHoverTimer();
     this.cancelMilestoneLongPress();
     this.stopDragScrollTimer();
@@ -451,11 +484,10 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
       if (label === "OTHER") this.showOthers = !this.showOthers;
       this.saveMarkerPreferences();
 
-      const chartDiv = document.getElementById("chart");
-      const currentlyHasNoMilestonesClass = chartDiv?.classList.contains("no-milestones") ?? false;
-      const willHaveNoStrip = this.loading || !this.hasTopStrip();
+      const currentInnerTop = this.inner_margin?.top ?? 0;
+      const nextStripHeight = this.loading ? 0 : this.getTopStripHeight();
 
-      if (currentlyHasNoMilestonesClass !== willHaveNoStrip) {
+      if (currentInnerTop !== nextStripHeight) {
         this.loadGraphDataAndRefresh(true);
       } else {
         if (label === "SESSION") {
@@ -508,19 +540,32 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
     return !!this.dataService.sessions?.some(session_filter);
   }
 
+  getTopStripHeight(): number {
+    const hasMilestones = this.hasDisplayedMilestones();
+    const hasSessions = this.hasDisplayedSessions();
+    if (hasMilestones && hasSessions) {
+      return 48;
+    } else if (hasMilestones || hasSessions) {
+      return 24;
+    }
+    return 0;
+  }
+
   hasTopStrip(): boolean {
-    return this.hasDisplayedMilestones() || this.hasDisplayedSessions();
+    return this.getTopStripHeight() > 0;
   }
 
   updateVariableFromCss(): void {
     let chart_div = document.getElementById("chart");
     if (!chart_div) return;
 
-    const noTopStrip = this.loading || !this.hasTopStrip();
-    if (noTopStrip) {
+    const stripHeight = this.loading ? 0 : this.getTopStripHeight();
+    if (stripHeight === 0) {
       chart_div.classList.add("no-milestones");
+      chart_div.style.setProperty("--top-inner", "0px");
     } else {
       chart_div.classList.remove("no-milestones");
+      chart_div.style.setProperty("--top-inner", `${stripHeight}px`);
     }
 
     var style = getComputedStyle(chart_div);
@@ -544,7 +589,8 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
     if (context && repos.length > 0) {
       context.font = "13px " + (style.getPropertyValue("--font-family-sans") || "sans-serif");
       for (const repo of repos) {
-        const w = context.measureText(repo.name || "").width;
+        const displayName = this.anonymizationService.getDisplayName(repo);
+        const w = context.measureText(displayName || "").width;
         if (w > maxNameWidth) maxNameWidth = w;
       }
     }
@@ -612,13 +658,7 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
       this.current_zoom = null;
 
       this.loaderService.loadRepositories(startDate, endDate).subscribe(() => {
-        this.loadGraphMetadata(
-          this.dataService.repositories,
-          this.dataService.reviews,
-          this.dataService.corrections,
-          this.dataService.questions,
-          false,
-        );
+        this.loadGraphDataAndRefresh(false);
         this.loading = false;
       });
     } catch (error) {
@@ -631,8 +671,13 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
       return;
     }
 
+    if (this.isSessionTooltipPinned) {
+      return;
+    }
+
     if (this.hovered_g && (this.hovered_commit || this.hovered_group_commit)) {
-      if (this.hovered_g.select(":hover").empty()) {
+      const node = this.hovered_g.node();
+      if (!node || !node.isConnected || this.hovered_g.select(":hover").empty()) {
         this.hovered_commit = undefined;
         this.hovered_group_commit = undefined;
         this.hovered_g = null;
@@ -669,7 +714,25 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
     d3.select(document.body).on("wheel.body", (e) => {});
     this.zoom = d3
       .zoom()
+      .interpolate((p0: [number, number, number], p1: [number, number, number]) => {
+        const x0 = p0[0],
+          y0 = p0[1],
+          w0 = Math.max(1e-6, p0[2]);
+        const x1 = p1[0],
+          y1 = p1[1],
+          w1 = Math.max(1e-6, p1[2]);
+        const dx = x1 - x0,
+          dy = y1 - y0;
+        return (t: number) => {
+          const wt = w0 === w1 ? w0 : w0 * Math.pow(w1 / w0, t);
+          return [x0 + t * dx, y0 + t * dy, wt];
+        };
+      })
       .on("start", (event) => {
+        overview.hovered_commit = undefined;
+        overview.hovered_group_commit = undefined;
+        overview.hovered_g = null;
+        overview.tooltipService.hide();
         if (event.sourceEvent != null) {
           overview.overlayManagerService.dismissAll({ blurInput: true });
         }
@@ -706,6 +769,9 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
         overview.refreshElementState();
       })
       .filter((event) => {
+        if (event.type === "mousedown" && event.shiftKey) {
+          return false;
+        }
         return event.shiftKey || !(event instanceof WheelEvent);
       })
       .scaleExtent([0.5, overview.maxZoom]);
@@ -836,6 +902,17 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
 
     this.chart_abs_g = this.svg_abs.append("g").attr("transform", "translate(" + translation + ")");
 
+    d3.select(".chart-selection-container").selectAll("svg").remove();
+    this.svg_selection = d3
+      .select(".chart-selection-container")
+      .append("svg")
+      .attr("preserveAspectRatio", "none")
+      .attr("width", this.width)
+      .attr("height", this.height)
+      .attr("viewBox", `0 0 ${this.width} ${this.height}`);
+
+    this.chart_selection_g = this.svg_selection.append("g").attr("transform", "translate(" + translation + ")");
+
     this.svg_abs
       .append("defs")
       .append("svg:clipPath")
@@ -857,15 +934,38 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
         .attr("opacity", "0")
         .style("cursor", "default")
         .style("pointer-events", "all")
+        .on("mousedown", (event: MouseEvent) => {
+          if (event.shiftKey && event.button === 0) {
+            overview.initiateShiftDragZoom(event);
+          }
+        })
         .on("contextmenu", (event: MouseEvent) => {
           event.preventDefault();
           event.stopPropagation();
           const rawDate = overview.getDateFromMouseEvent(event);
-          overview.openContextMenu(event.pageX, event.pageY, rawDate);
+          const session = overview.resolveSessionAtDate(rawDate);
+          if (session) {
+            overview.selectAndActivateSession(session, event.pageX, event.pageY, rawDate);
+          } else {
+            overview.openContextMenu(event.pageX, event.pageY, rawDate);
+          }
         })
         .on("click", (event: MouseEvent) => {
+          if (event.shiftKey) return;
+          const rawDate = overview.getDateFromMouseEvent(event);
+          const session = overview.resolveSessionAtDate(rawDate);
+          if (session) {
+            overview.handleSessionClick(session, event.clientX, event.clientY);
+          } else {
+            overview.overlayManagerService.dismissAll({ blurInput: true });
+          }
+        })
+        .on("dblclick", (event: MouseEvent) => {
           const rawDate = overview.getDateFromMouseEvent(event);
-          overview.openContextMenu(event.pageX, event.pageY, rawDate);
+          const session = overview.resolveSessionAtDate(rawDate);
+          if (session) {
+            overview.handleSessionDblClick(session);
+          }
         })
         .on("wheel", (event: WheelEvent) => {
           if (event.shiftKey) return;
@@ -892,18 +992,46 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
       .attr("width", this.inner_width)
       .attr("height", this.scrollable_height)
       .attr("opacity", "0")
+      .on("mousedown", (event: MouseEvent) => {
+        if (event.shiftKey && event.button === 0) {
+          this.initiateShiftDragZoom(event);
+        }
+      })
       .on("contextmenu", (event: MouseEvent) => {
         event.preventDefault();
         event.stopPropagation();
         const rawDate = this.getDateFromMouseEvent(event);
-        this.openContextMenu(event.pageX, event.pageY, rawDate);
+        const session = this.resolveSessionAtDate(rawDate);
+        if (session) {
+          this.selectAndActivateSession(session, event.pageX, event.pageY, rawDate);
+        } else {
+          this.openContextMenu(event.pageX, event.pageY, rawDate);
+        }
       })
       .on("click", (event: MouseEvent) => {
+        if (event.shiftKey) return;
         const rawDate = this.getDateFromMouseEvent(event);
-        this.openContextMenu(event.pageX, event.pageY, rawDate);
+        const session = this.resolveSessionAtDate(rawDate);
+        if (session) {
+          this.handleSessionClick(session, event.clientX, event.clientY);
+        } else {
+          this.overlayManagerService.dismissAll({ blurInput: true });
+        }
+      })
+      .on("dblclick", (event: MouseEvent) => {
+        const rawDate = this.getDateFromMouseEvent(event);
+        const session = this.resolveSessionAtDate(rawDate);
+        if (session) {
+          this.handleSessionDblClick(session);
+        }
       });
 
     d3.select(".chart-container")
+      .on("mousedown", (event: MouseEvent) => {
+        if (event.shiftKey && event.button === 0) {
+          overview.initiateShiftDragZoom(event);
+        }
+      })
       .on("mousemove", function (e) {
         overview.refreshTooltip(e.clientX, e.clientY);
       })
@@ -1055,6 +1183,9 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
     });
 
     this.updateMilestoneCutoutMask();
+    if (this.session_header_g) {
+      this.session_header_g.raise();
+    }
   }
 
   isContextualMenuShown() {
@@ -1085,7 +1216,7 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
     }
   }
 
-  getDateFromMouseEvent(event: MouseEvent): Date {
+  getRelativeXFromMouseEvent(event: MouseEvent): number {
     const dataElement =
       (this.data_g?.select("#data")?.node() as SVGRectElement) || (document.getElementById("data") as unknown as SVGRectElement);
     let x = 0;
@@ -1099,7 +1230,11 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
       const [px] = (d3 as any).pointer(event, this.chart_svg.node());
       x = px;
     }
-    x = Math.max(0, Math.min(this.inner_width, x));
+    return Math.max(0, Math.min(this.inner_width || 0, x));
+  }
+
+  getDateFromMouseEvent(event: MouseEvent): Date {
+    const x = this.getRelativeXFromMouseEvent(event);
     return this.x_scale_copy ? this.x_scale_copy.invert(x) : this.x_scale ? this.x_scale.invert(x) : new Date();
   }
 
@@ -1110,9 +1245,9 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
         this.hovered_milestone = undefined;
         this.tooltipService.hide();
       }
-      const hadStripBefore = this.hasTopStrip();
+      const stripHeightBefore = this.getTopStripHeight();
       this.saveMilestone(result.oldMilestone, result.newMilestone);
-      this.updateAfterMilestoneChange(hadStripBefore);
+      this.updateAfterMilestoneChange(stripHeightBefore);
 
       let translations = this.translateService.instant(["SUCCESS", "MILESTONE-SAVED", "MILESTONE-DELETED"]);
       this.toastService.success(
@@ -1140,9 +1275,9 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
         this.hovered_session = undefined;
         this.tooltipService.hide();
       }
-      const hadStripBefore = this.hasTopStrip();
+      const stripHeightBefore = this.getTopStripHeight();
       this.saveSession(result.oldSession, result.newSession);
-      this.updateAfterSessionChange(hadStripBefore);
+      this.updateAfterSessionChange(stripHeightBefore);
 
       let translations = this.translateService.instant(["SUCCESS", "SESSION-SAVED", "SESSION-DELETED"]);
       this.toastService.success(
@@ -1170,9 +1305,9 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
         this.hovered_session = undefined;
         this.tooltipService.hide();
       }
-      const hadStripBefore = this.hasTopStrip();
+      const stripHeightBefore = this.getTopStripHeight();
       this.deleteSession(session);
-      this.updateAfterSessionChange(hadStripBefore);
+      this.updateAfterSessionChange(stripHeightBefore);
 
       let translations = this.translateService.instant(["SUCCESS", "SESSION-DELETED"]);
       this.toastService.success(translations["SUCCESS"], translations["SESSION-DELETED"]);
@@ -1188,9 +1323,9 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
         this.hovered_milestone = undefined;
         this.tooltipService.hide();
       }
-      const hadStripBefore = this.hasTopStrip();
+      const stripHeightBefore = this.getTopStripHeight();
       this.deleteMilestone(milestone);
-      this.updateAfterMilestoneChange(hadStripBefore);
+      this.updateAfterMilestoneChange(stripHeightBefore);
 
       let translations = this.translateService.instant(["SUCCESS", "MILESTONE-DELETED"]);
       this.toastService.success(translations["SUCCESS"], translations["MILESTONE-DELETED"]);
@@ -1249,23 +1384,38 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
       .datum(session)
       .attr("class", `session-container session-group-${sessionKey}`)
       .attr("clip-path", "url(#clip)")
+      .on("mousedown", (e: MouseEvent) => {
+        if (e.shiftKey && e.button === 0) {
+          overview.initiateShiftDragZoom(e);
+        }
+      })
       .on("contextmenu", (e) => {
         e.preventDefault();
         e.stopPropagation();
         const rawDate = overview.getDateFromMouseEvent(e);
-        overview.openEditSessionContextMenu(session, e.pageX, e.pageY, rawDate);
+        const targetSession = overview.resolveSessionAtDate(rawDate, session) || session;
+        overview.selectAndActivateSession(targetSession, e.pageX, e.pageY, rawDate);
       })
       .on("click", (e) => {
+        if (e.shiftKey) return;
         const rawDate = overview.getDateFromMouseEvent(e);
-        overview.openEditSessionContextMenu(session, e.pageX, e.pageY, rawDate);
+        const targetSession = overview.resolveSessionAtDate(rawDate, session) || session;
+        overview.handleSessionClick(targetSession, e.clientX, e.clientY);
+      })
+      .on("dblclick", (e) => {
+        const rawDate = overview.getDateFromMouseEvent(e);
+        const targetSession = overview.resolveSessionAtDate(rawDate, session) || session;
+        overview.handleSessionDblClick(targetSession);
       })
       .on("mouseenter", () => {
-        d3.selectAll(`.session-bg-${sessionKey}`).style("fill-opacity", "0.14");
-        d3.selectAll(`.session-edge-${sessionKey}`).style("stroke-opacity", "0.55");
+        const key = overview.getSessionKeyNum(session);
+        d3.selectAll(`.session-bg-${key}`).style("fill-opacity", "0.14");
+        d3.selectAll(`.session-edge-${key}`).style("stroke-opacity", "0.55");
       })
       .on("mouseleave", () => {
-        d3.selectAll(`.session-bg-${sessionKey}`).style("fill-opacity", null);
-        d3.selectAll(`.session-edge-${sessionKey}`).style("stroke-opacity", null);
+        const key = overview.getSessionKeyNum(session);
+        d3.selectAll(`.session-bg-${key}`).style("fill-opacity", null);
+        d3.selectAll(`.session-edge-${key}`).style("stroke-opacity", null);
       });
 
     const rawX1 = this.xScaledTimeZoned(session.startDate);
@@ -1304,7 +1454,7 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
       .style("display", rawX2 >= 0 && rawX2 <= this.inner_width ? "inline" : "none");
   }
 
-  buildSessionHeader(g: d3.Selection<any, any, any, any>, session: Session) {
+  buildSessionHeader(g: d3.Selection<any, any, any, any>, session: Session, overlapGroup?: Session[]) {
     const overview = this;
     const sessionKey = session.startDate instanceof Date ? session.startDate.getTime() : new Date(session.startDate).getTime();
 
@@ -1313,23 +1463,38 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
       .datum(session)
       .attr("class", `session-header-container session-hdr-group-${sessionKey}`)
       .style("pointer-events", "auto")
+      .on("mousedown", (e: MouseEvent) => {
+        if (e.shiftKey && e.button === 0) {
+          overview.initiateShiftDragZoom(e);
+        }
+      })
       .on("contextmenu", (e) => {
         e.preventDefault();
         e.stopPropagation();
         const rawDate = overview.getDateFromMouseEvent(e);
-        overview.openEditSessionContextMenu(session, e.pageX, e.pageY, rawDate);
+        const targetSession = overview.resolveSessionAtDate(rawDate, session) || session;
+        overview.selectAndActivateSession(targetSession, e.pageX, e.pageY, rawDate);
       })
       .on("click", (e) => {
+        if (e.shiftKey) return;
+        const rawDate = overview.getDateFromMouseEvent(e);
+        const targetSession = overview.resolveSessionAtDate(rawDate, session) || session;
+        overview.handleSessionClick(targetSession, e.clientX, e.clientY);
+      })
+      .on("dblclick", (e) => {
         const rawDate = overview.getDateFromMouseEvent(e);
-        overview.openEditSessionContextMenu(session, e.pageX, e.pageY, rawDate);
+        const targetSession = overview.resolveSessionAtDate(rawDate, session) || session;
+        overview.handleSessionDblClick(targetSession);
       })
       .on("mouseenter", () => {
-        d3.selectAll(`.session-bg-${sessionKey}`).style("fill-opacity", "0.14");
-        d3.selectAll(`.session-edge-${sessionKey}`).style("stroke-opacity", "0.55");
+        const key = overview.getSessionKeyNum(session);
+        d3.selectAll(`.session-bg-${key}`).style("fill-opacity", "0.14");
+        d3.selectAll(`.session-edge-${key}`).style("stroke-opacity", "0.55");
       })
       .on("mouseleave", () => {
-        d3.selectAll(`.session-bg-${sessionKey}`).style("fill-opacity", null);
-        d3.selectAll(`.session-edge-${sessionKey}`).style("stroke-opacity", null);
+        const key = overview.getSessionKeyNum(session);
+        d3.selectAll(`.session-bg-${key}`).style("fill-opacity", null);
+        d3.selectAll(`.session-edge-${key}`).style("stroke-opacity", null);
       });
 
     const rawX1 = this.xScaledTimeZoned(session.startDate);
@@ -1342,22 +1507,28 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
     const hasNotes = !!(session.notes && session.notes.trim().length > 0);
     const groupName = session.tpGroup || "";
 
-    const usersSvg =
-      '<svg style="width: 11px; height: 11px; min-width: 11px; min-height: 11px; flex-shrink: 0;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>';
+    /* prettier-ignore */
+    // eslint-disable-next-line @typescript-eslint/quotes, max-len
+    const usersSvg = '<svg style="width: 11px; height: 11px; min-width: 11px; min-height: 11px; flex-shrink: 0;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>';
 
-    const calendarSvg =
-      '<svg style="width: 11px; height: 11px; min-width: 11px; min-height: 11px; flex-shrink: 0;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>';
+    /* prettier-ignore */
+    // eslint-disable-next-line @typescript-eslint/quotes, max-len
+    const calendarSvg = '<svg style="width: 11px; height: 11px; min-width: 11px; min-height: 11px; flex-shrink: 0;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>';
 
-    const noteSvg =
-      '<svg style="width: 10px; height: 10px; min-width: 10px; min-height: 10px; flex-shrink: 0;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>';
+    /* prettier-ignore */
+    // eslint-disable-next-line @typescript-eslint/quotes, max-len
+    const noteSvg = '<svg style="width: 10px; height: 10px; min-width: 10px; min-height: 10px; flex-shrink: 0;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>';
 
     // 1. Continuous header background filling top strip behind pills
+    const bgY = 0;
+    const bgH = this.inner_margin.top;
+
     group
       .append("rect")
       .attr("class", `session-header-bg session-bg-${sessionKey}`)
       .attr("x", visX1)
-      .attr("y", 0)
-      .attr("height", this.inner_margin.top)
+      .attr("y", bgY)
+      .attr("height", bgH)
       .attr("width", visWidth)
       .style("pointer-events", "auto");
 
@@ -1386,95 +1557,83 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
       .append("rect")
       .attr("class", `session-header-top-bar session-bar-${sessionKey}`)
       .attr("x", visX1)
-      .attr("y", 0)
-      .attr("height", 3)
+      .attr("y", bgY)
+      .attr("height", 2.5)
       .attr("width", visWidth)
-      .attr("rx", 1.5)
-      .attr("ry", 1.5);
+      .attr("rx", 1.25)
+      .attr("ry", 1.25);
 
     // 5. Sticky foreignObject for pills
     const foX = visX1;
     const foWidth = Math.max(0, visX2 - foX);
+    const foY = 0;
+    const foH = 24;
 
     const fo = group
       .append("foreignObject")
       .attr("class", "session-header-fo")
       .attr("x", foX)
-      .attr("y", 3)
+      .attr("y", foY)
       .attr("width", foWidth)
-      .attr("height", 23)
-      .attr("mask", "url(#milestone-badges-cutout-mask)")
+      .attr("height", foH)
       .style("visibility", foWidth < 28 ? "hidden" : "visible")
       .style("pointer-events", "auto")
       .style("overflow", "hidden");
 
-    fo.html(`
-      <div class="session-header-inner d-flex align-items-center" style="gap: 4px; height: 23px; padding: 0 4px; pointer-events: auto; overflow: hidden; width: 100%;">
-        <!-- Pill 1: Nom de la séance -->
-        <span class="badge session-pill session-name-pill d-inline-flex align-items-center" style="background: var(--color-surface); border: 1px solid rgba(56, 189, 248, 0.4); color: var(--color-text-primary); font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 9999px; white-space: nowrap; gap: 4px; height: 20px; line-height: 1; box-shadow: 0 1px 2px rgba(0,0,0,0.05); flex-shrink: 0; min-width: 0; overflow: hidden; pointer-events: auto;">
-          ${calendarSvg}
-          <span class="session-pill-text session-name-text text-truncate" style="min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block;">${displayName}</span>
-        </span>
-        <!-- Pill 2: Groupe de TP -->
-        ${
-          groupName
-            ? `
-        <span class="badge session-pill session-group-pill d-inline-flex align-items-center" style="background: var(--color-surface); border: 1px solid rgba(56, 189, 248, 0.4); color: var(--color-text-secondary); font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 9999px; white-space: nowrap; gap: 4px; height: 20px; line-height: 1; box-shadow: 0 1px 2px rgba(0,0,0,0.05); flex-shrink: 0; min-width: 0; overflow: hidden; pointer-events: auto;">
-          ${usersSvg}
-          <span class="session-pill-text session-group-text text-truncate" style="min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block;">${groupName}</span>
-        </span>`
-            : ""
-        }
-        <!-- Pill 3: Note button directly following TP Group / Name -->
-        ${
-          hasNotes
-            ? `
-        <span role="button" tabindex="0" class="btn session-note-btn flex-shrink-0 d-inline-flex align-items-center justify-content-center p-0" style="width: 20px; height: 20px; min-width: 20px; min-height: 20px; border-radius: 50%; background: var(--color-surface); border: 1px solid rgba(56, 189, 248, 0.45); color: var(--color-primary); box-shadow: 0 1px 2px rgba(0,0,0,0.05); cursor: pointer; pointer-events: auto;">
-          ${noteSvg}
-        </span>`
-            : ""
-        }
-        <!-- More indicator (...) when some info is hidden -->
-        <span role="button" tabindex="0" class="session-more-btn flex-shrink-0 d-inline-flex align-items-center justify-content-center" style="width: 16px; height: 20px; cursor: pointer; pointer-events: auto; display: none; background: transparent; border: none; padding: 0;">
-          <svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="flex-shrink: 0; display: block;">
-            <circle cx="2.5" cy="8" r="1.8" />
-            <circle cx="8" cy="8" r="1.8" />
-            <circle cx="13.5" cy="8" r="1.8" />
-          </svg>
-        </span>
-      </div>
-    `);
+    SessionHeaderRenderer.renderHeader({
+      session,
+      overlapGroup,
+      overview,
+      displayName,
+      groupName,
+      hasNotes,
+      fo,
+      calendarSvg,
+      usersSvg,
+      noteSvg,
+    });
 
     if (hasNotes) {
       group
         .select(".session-note-btn")
         .on("mouseenter", (e: MouseEvent) => {
           e.stopPropagation();
+          const targetSession = overview.getActiveSession(session);
           overview.ngZone.run(() => {
-            overview.hovered_session = session;
-            overview.hovered_commit = undefined;
-            overview.hovered_group_commit = undefined;
-            overview.hovered_milestone = undefined;
+            if (!overview.isSessionTooltipPinned) {
+              overview.hovered_session = targetSession;
+              overview.hovered_commit = undefined;
+              overview.hovered_group_commit = undefined;
+              overview.hovered_milestone = undefined;
+              overview.refreshTooltip(e.clientX, e.clientY);
+            }
           });
-          overview.refreshTooltip(e.clientX, e.clientY);
         })
         .on("mousemove", (e: MouseEvent) => {
           e.stopPropagation();
-          if (overview.hovered_session) {
+          if (overview.hovered_session && !overview.isSessionTooltipPinned) {
             overview.refreshTooltip(e.clientX, e.clientY);
           }
         })
         .on("mouseleave", (e: MouseEvent) => {
           e.stopPropagation();
           overview.ngZone.run(() => {
-            overview.hovered_session = undefined;
+            if (!overview.isSessionTooltipPinned) {
+              overview.hovered_session = undefined;
+              overview.tooltipService.hide();
+            }
           });
-          overview.tooltipService.hide();
         })
         .on("click", (e: MouseEvent) => {
+          if (e.shiftKey) return;
           e.stopPropagation();
-          const rawDate = overview.getDateFromMouseEvent(e);
-          overview.openEditSessionContextMenu(session, e.pageX, e.pageY, rawDate);
+          const targetSession = overview.getActiveSession(session);
+          overview.handleSessionClick(targetSession, e.clientX, e.clientY);
+        })
+        .on("dblclick", (e: MouseEvent) => {
+          e.stopPropagation();
+          const targetSession = overview.getActiveSession(session);
+          overview.handleSessionDblClick(targetSession);
         });
     }
 
@@ -1482,31 +1641,42 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
       .select(".session-more-btn")
       .on("mouseenter", (e: MouseEvent) => {
         e.stopPropagation();
+        const targetSession = overview.getActiveSession(session);
         overview.ngZone.run(() => {
-          overview.hovered_session = session;
-          overview.hovered_commit = undefined;
-          overview.hovered_group_commit = undefined;
-          overview.hovered_milestone = undefined;
+          if (!overview.isSessionTooltipPinned) {
+            overview.hovered_session = targetSession;
+            overview.hovered_commit = undefined;
+            overview.hovered_group_commit = undefined;
+            overview.hovered_milestone = undefined;
+            overview.refreshTooltip(e.clientX, e.clientY);
+          }
         });
-        overview.refreshTooltip(e.clientX, e.clientY);
       })
       .on("mousemove", (e: MouseEvent) => {
         e.stopPropagation();
-        if (overview.hovered_session) {
+        if (overview.hovered_session && !overview.isSessionTooltipPinned) {
           overview.refreshTooltip(e.clientX, e.clientY);
         }
       })
       .on("mouseleave", (e: MouseEvent) => {
         e.stopPropagation();
         overview.ngZone.run(() => {
-          overview.hovered_session = undefined;
+          if (!overview.isSessionTooltipPinned) {
+            overview.hovered_session = undefined;
+            overview.tooltipService.hide();
+          }
         });
-        overview.tooltipService.hide();
       })
       .on("click", (e: MouseEvent) => {
+        if (e.shiftKey) return;
         e.stopPropagation();
-        const rawDate = overview.getDateFromMouseEvent(e);
-        overview.openEditSessionContextMenu(session, e.pageX, e.pageY, rawDate);
+        const targetSession = overview.getActiveSession(session);
+        overview.handleSessionClick(targetSession, e.clientX, e.clientY);
+      })
+      .on("dblclick", (e: MouseEvent) => {
+        e.stopPropagation();
+        const targetSession = overview.getActiveSession(session);
+        overview.handleSessionDblClick(targetSession);
       });
   }
 
@@ -1515,6 +1685,17 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
       (session) => !this.dataService.groupFilter || !session.tpGroup || session.tpGroup === this.dataService.groupFilter,
     );
 
+    this.overlapGroups = this.computeOverlapGroups(loaded_sessions);
+    const newActiveIndices = new Map<string, number>();
+    for (const group of this.overlapGroups) {
+      if (group.length > 1) {
+        const groupId = this.getGroupId(group);
+        const existingIdx = this.activeSessionIndices.get(groupId);
+        newActiveIndices.set(groupId, existingIdx !== undefined && existingIdx < group.length ? existingIdx : 0);
+      }
+    }
+    this.activeSessionIndices = newActiveIndices;
+
     this.session_g = this.data_g.insert("g", () => (this.repository_g ? this.repository_g.node() : null));
 
     if (this.chart_abs_g) {
@@ -1550,11 +1731,15 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
         .data(loaded_sessions)
         .enter()
         .each(function (d: Session) {
-          overview.buildSessionHeader(d3.select(this), d);
+          overview.buildSessionHeader(d3.select(this), d, overview.getSessionOverlapGroup(d));
         });
     }
 
     this.updateSessionsTransforms();
+    this.updateSessionVisibility(true);
+    if (this.session_header_g) {
+      this.session_header_g.raise();
+    }
   }
 
   private resolveMilestoneType(m?: Milestone, g?: d3.Selection<any, any, any, any>): string {
@@ -1574,13 +1759,19 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
       m.type = this.resolveMilestoneType(m, g);
     }
 
+    const milestoneType = this.resolveMilestoneType(m, g);
+    const milestoneColor = this.getMilestoneColor(milestoneType);
+
     // 1. Line
+    const lineY = 0;
+    const lineH = this.inner_height;
+
     g.append("rect")
       .attr("class", "milestone-vertical-line")
       .attr("x", 0)
-      .attr("y", 0)
+      .attr("y", lineY)
       .attr("width", 1)
-      .attr("height", this.inner_height)
+      .attr("height", lineH)
       .attr("transform", "translate(" + [-0.5, 0] + ")");
 
     // 2. Label group (anchored, masked when overlapping newer milestones)
@@ -1589,7 +1780,7 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
     // Text
     const labelText = m.label || (m.type.endsWith("s") ? m.type.slice(0, -1) : m.type) + " " + index;
 
-    let text = labelGroup.append("text").attr("class", "milestone-text").attr("y", -7).text(labelText).attr("text-anchor", "middle");
+    let text = labelGroup.append("text").attr("class", "milestone-text").text(labelText).attr("text-anchor", "middle");
 
     let textWidth = 40;
     try {
@@ -1604,10 +1795,11 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
       textWidth = labelText.length * 7.5;
     }
 
-    const paddingX = 2;
-    const barWidth = Math.max(16, textWidth + paddingX * 2);
+    const paddingX = 4;
+    const barWidth = Math.max(20, textWidth + paddingX * 2);
+
+    text.attr("y", -10);
 
-    // Horizontal bottom accent bar (same 2px visual thickness as vertical line, rounded ends like session bar)
     labelGroup
       .append("rect")
       .attr("class", "milestone-bottom-bar")
@@ -1619,17 +1811,17 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
       .attr("ry", 1.5);
 
     const badgeX = barWidth / 2 - 2;
-    const badgeY = -5;
-    g.attr("data-badge-x", badgeX).attr("data-badge-y", badgeY);
+    const badgeY = -10;
 
-    // Hitbox (transparent, covering the label and top of line)
     g.append("rect")
       .attr("class", "hitbox")
       .attr("width", barWidth + 30)
-      .attr("height", 32)
+      .attr("height", 24)
       .attr("x", -(barWidth + 30) / 2)
       .attr("y", -24)
       .attr("style", "cursor: pointer; pointer-events: all;");
+
+    g.attr("data-badge-x", badgeX).attr("data-badge-y", badgeY);
   }
 
   updateMilestoneCutoutMask() {
@@ -1716,10 +1908,8 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
 
     const sessionMaskCutoutsGroup = sessionMask.select("#milestone-mask-cutouts");
     if (!sessionMaskCutoutsGroup.empty()) {
-      const sessionCutouts = visibleItems.map((item) => ({
-        x: item.x - item.width / 2,
-        width: item.width,
-      }));
+      // With double-rail layout, session headers and milestone labels do not overlap
+      const sessionCutouts: { x: number; width: number }[] = [];
 
       const sRects = sessionMaskCutoutsGroup.selectAll("rect").data(sessionCutouts);
       sRects.exit().remove();
@@ -1851,6 +2041,7 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
   }
 
   private readonly FA_ARROWS_ALT_PATH =
+    // eslint-disable-next-line max-len
     "M352.201 425.775l-79.196 79.196c-9.373 9.373-24.568 9.373-33.941 0l-79.196-79.196c-15.119-15.119-4.411-40.971 16.971-40.97h51.162L228 284H127.196v51.162c0 21.382-25.851 32.09-40.971 16.971L7.029 272.937c-9.373-9.373-9.373-24.569 0-33.941L86.225 159.8c15.119-15.119 40.971-4.411 40.971 16.971V228H228V127.196h-51.23c-21.382 0-32.09-25.851-16.971-40.971l79.196-79.196c9.373-9.373 24.568-9.373 33.941 0l79.196 79.196c15.119 15.119 4.411 40.971-16.971 40.971h-51.162V228h100.804v-51.162c0-21.382 25.851-32.09 40.97-16.971l79.196 79.196c9.373 9.373 9.373 24.569 0 33.941L425.773 352.2c-15.119 15.119-40.971 4.411-40.97-16.971V284H284v100.804h51.23c21.382 0 32.09 25.851 16.971 40.971z";
 
   private createMilestoneLongPressBadge(g: d3.Selection<any, any, any, any>, m: Milestone): d3.Selection<any, any, any, any> {
@@ -2343,7 +2534,12 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
 
     this.x_scale = d3.scaleTime().domain([minDate, maxDate]).range([0, this.inner_width]);
 
-    this.x_scale_copy = this.x_scale.copy();
+    if (this.current_zoom) {
+      this.x_scale_copy = this.current_zoom.rescaleX(this.x_scale);
+    } else {
+      this.x_scale_copy = this.x_scale.copy();
+    }
+    this.last_zoom_k = this.current_zoom ? this.current_zoom.k : 1;
 
     this.x_axis = d3.axisBottom(this.x_scale_copy).ticks(6).tickSize(-this.inner_height);
 
@@ -2373,7 +2569,8 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
       .axisLeft(this.y_scale)
       .tickValues([...Array(repositories.length + 1).keys()])
       .tickFormat((d) => {
-        return repositories[d.valueOf() - 1]?.name || "";
+        const repo = repositories[d.valueOf() - 1];
+        return repo ? this.anonymizationService.getDisplayName(repo) : "";
       })
       .tickSize(-this.inner_width);
 
@@ -2401,6 +2598,9 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
       })
       .on("click", function (event: MouseEvent, d: any) {
         event.stopPropagation();
+        if (overview.anonymizationService.isAnonymous) {
+          return;
+        }
         const repo = repositories[d.valueOf() - 1];
         if (repo?.url) {
           window.open(repo.url, "_blank");
@@ -2411,7 +2611,11 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
         const repo = repositories[d.valueOf() - 1];
         if (repo?.name) {
           overview.ngZone.run(() => {
-            overview.hovered_repository = repo;
+            overview.hovered_repository = {
+              ...repo,
+              name: overview.anonymizationService.getDisplayName(repo),
+              url: overview.anonymizationService.isAnonymous ? null : repo.url,
+            } as Repository;
             overview.hovered_commit = undefined;
             overview.hovered_group_commit = undefined;
             overview.hovered_session = undefined;
@@ -2511,8 +2715,8 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
         this.hovered_repository = undefined;
       })
       .on("mouseleave", () => {
-        if (this.hovered_g === g) {
-          this.hovered_g = undefined;
+        if (this.hovered_g?.node() === g.node()) {
+          this.hovered_g = null;
           this.hovered_group_commit = undefined;
         }
       })
@@ -2542,9 +2746,17 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
         .style("--y-offset", `${-CommitsComponent.GROUP_HEIGHT / 2}px`)
         .attr("fill", commit.color.color)
         .attr("class", "data")
-        .on("mouseenter", (e, d) => (this.hovered_group_commit = d))
+        .on("mouseenter", (e, d) => {
+          this.hovered_commit = undefined;
+          this.hovered_group_commit = d;
+          this.hovered_g = g;
+          this.hovered_repository = undefined;
+        })
         .on("mouseleave", () => {
-          this.hovered_group_commit = undefined;
+          if (this.hovered_g?.node() === g.node()) {
+            this.hovered_g = null;
+            this.hovered_group_commit = undefined;
+          }
         });
 
       g.on("click", (e, d) => {
@@ -2599,10 +2811,10 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
 
     let x = this.xScaledTimeZoned(commit.commitDate);
 
-    let comp: d3.Selection<any, any, any, any> = g
-      .append("a")
-      .attr("href", (d) => d[0].url)
-      .attr("target", "_blank");
+    let comp: d3.Selection<any, any, any, any> = g.append("a");
+    if (!this.anonymizationService.isAnonymous) {
+      comp.attr("href", (d) => d[0].url).attr("target", "_blank");
+    }
 
     if (commit.isCloture) {
       comp = comp.append("circle").attr("class", "commit-cloture");
@@ -2629,6 +2841,10 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
     return g;
   }
 
+  getCommitAuthorDisplayName(commit: Commit): string {
+    return this.anonymizationService.getCommitAuthorDisplayName(commit);
+  }
+
   shouldGroupCommit(commit_before: Commit, commit_after: Commit): boolean {
     return (
       !commit_before.isCloture &&
@@ -2786,9 +3002,10 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
   }
 
   private splitCommitGroup(g: any, commits: Commit[], repo_g: any) {
-    if (this.hovered_g === g) {
-      this.hovered_g = undefined;
+    if (this.hovered_g?.node() === g.node() || this.hovered_group_commit === commits) {
+      this.hovered_g = null;
       this.hovered_group_commit = undefined;
+      this.tooltipService.hide();
     }
     let before = undefined;
     g.remove();
@@ -3005,7 +3222,7 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
     });
   }
 
-  private updateSessionsTransforms() {
+  public updateSessionsTransforms() {
     if (!this.session_g) return;
     const overview = this;
 
@@ -3065,10 +3282,13 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
         g.style("display", null).style("visibility", "visible");
 
         // 1. Continuous header background (clamped to 0..inner_width)
-        g.select(".session-header-bg").attr("x", visX1).attr("y", 0).attr("height", overview.inner_margin.top).attr("width", visWidth);
+        const headerY = 0;
+        const headerH = overview.inner_margin.top;
+
+        g.select(".session-header-bg").attr("x", visX1).attr("y", headerY).attr("height", headerH).attr("width", visWidth);
 
         // 2. Top blue accent bar (above milestone labels)
-        g.select(".session-header-top-bar").attr("x", visX1).attr("y", 0).attr("height", 3).attr("width", visWidth);
+        g.select(".session-header-top-bar").attr("x", visX1).attr("y", headerY).attr("height", 2.5).attr("width", visWidth);
 
         // 3. Dashed vertical lines going all the way to y = 0
         const showLeft = rawX1 >= 0 && rawX1 <= overview.inner_width;
@@ -3086,8 +3306,10 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
         // 4. Sticky badges: stick to x = 0 if rawX1 < 0, otherwise sit at rawX1
         const foX = visX1;
         const foWidth = Math.max(0, visX2 - foX);
+        const foY = 0;
+        const foH = 24;
 
-        fo.attr("x", foX).attr("width", foWidth);
+        fo.attr("x", foX).attr("y", foY).attr("width", foWidth).attr("height", foH);
 
         const displayName = overview.getSessionDisplayName(s);
         const groupName = s.tpGroup || "";
@@ -3103,7 +3325,21 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
           namePill.select(".session-name-text").text(displayName);
         }
 
-        if (foWidth < 28) {
+        const overlapGroup = overview.getSessionOverlapGroup(s);
+        const isOverlap = !!(overlapGroup && overlapGroup.length > 1);
+        const navReservedWidth = isOverlap ? 74 : 0; // Left arrow (~22px) + Right arrow (~22px) + Counter (~22px) + gaps (~8px)
+        const minFoWidth = isOverlap ? 48 : 28;
+
+        if (isOverlap && overlapGroup) {
+          const groupId = overview.getGroupId(overlapGroup);
+          const currentIdx = overview.activeSessionIndices.get(groupId) ?? 0;
+          const counterText = g.select(".session-counter-text, .session-counter");
+          if (!counterText.empty()) {
+            counterText.text(`${currentIdx + 1}/${overlapGroup.length}`);
+          }
+        }
+
+        if (foWidth < minFoWidth) {
           // Extremely narrow: hide badges completely
           fo.style("display", "none").style("visibility", "hidden");
           return;
@@ -3111,6 +3347,8 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
 
         fo.style("display", null).style("visibility", "visible");
 
+        const availWidth = Math.max(0, foWidth - navReservedWidth);
+
         // Width estimations
         const charWidth = 6.2;
         const iconAndPadding = 29; // 11px icon + 4px gap + 14px padding
@@ -3124,7 +3362,7 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
         // Total needed to display all available session elements in full
         const neededAll = nameNeeded + (hasGroup ? gap + groupNeeded : 0) + (hasNotes ? gap + noteBtnWidth : 0) + padTotal;
 
-        if (foWidth >= neededAll) {
+        if (availWidth >= neededAll) {
           // Case 1: Everything fits without truncation
           if (!namePill.empty()) {
             namePill.style("display", "inline-flex").style("max-width", "none");
@@ -3144,7 +3382,7 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
           const neededNameAndGroup = nameNeeded + (hasGroup ? gap + groupNeeded : 0) + padTotal;
           const neededNameGroupMore = neededNameAndGroup + (hasNotes ? gap + moreBtnWidth : 0);
 
-          if (hasGroup && foWidth >= neededNameGroupMore) {
+          if (hasGroup && availWidth >= neededNameGroupMore) {
             // Name full, Group full, Note dropped -> show "..." if hasNotes
             if (!namePill.empty()) {
               namePill.style("display", "inline-flex").style("max-width", "none");
@@ -3158,9 +3396,9 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
             if (!moreBtn.empty()) {
               moreBtn.style("display", hasNotes ? "inline-flex" : "none");
             }
-          } else if (hasGroup && foWidth >= nameNeeded + gap + 38 + (hasNotes ? gap + moreBtnWidth : 0) + padTotal) {
+          } else if (hasGroup && availWidth >= nameNeeded + gap + 38 + (hasNotes ? gap + moreBtnWidth : 0) + padTotal) {
             // Name full, Group truncated with ellipsis, Note dropped -> show "..." if hasNotes
-            const availableForGroup = foWidth - nameNeeded - (hasNotes ? gap + moreBtnWidth : 0) - gap - padTotal;
+            const availableForGroup = availWidth - nameNeeded - (hasNotes ? gap + moreBtnWidth : 0) - gap - padTotal;
             if (!namePill.empty()) {
               namePill.style("display", "inline-flex").style("max-width", "none");
             }
@@ -3171,9 +3409,9 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
               noteBtn.style("display", "none");
             }
             if (!moreBtn.empty()) {
-              moreBtn.style("display", hasNotes ? "inline-flex" : "none");
+              moreBtn.style("display", "inline-flex");
             }
-          } else if (foWidth >= nameNeeded + (hasGroup || hasNotes ? gap + moreBtnWidth : 0) + padTotal) {
+          } else if (availWidth >= nameNeeded + (hasGroup || hasNotes ? gap + moreBtnWidth : 0) + padTotal) {
             // Name full, Group dropped, Note dropped -> show "..." if hasGroup or hasNotes
             if (!namePill.empty()) {
               namePill.style("display", "inline-flex").style("max-width", "none");
@@ -3187,9 +3425,9 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
             if (!moreBtn.empty()) {
               moreBtn.style("display", hasGroup || hasNotes ? "inline-flex" : "none");
             }
-          } else if (foWidth >= 38 + (hasGroup || hasNotes ? gap + moreBtnWidth : 0) + padTotal) {
+          } else if (availWidth >= 38 + (hasGroup || hasNotes ? gap + moreBtnWidth : 0) + padTotal) {
             // Name truncated with ellipsis, Group & Note dropped -> show "..." if hasGroup or hasNotes
-            const availableForName = foWidth - (hasGroup || hasNotes ? gap + moreBtnWidth : 0) - padTotal;
+            const availableForName = availWidth - (hasGroup || hasNotes ? gap + moreBtnWidth : 0) - padTotal;
             if (!namePill.empty()) {
               namePill.style("display", "inline-flex").style("max-width", `${Math.max(34, availableForName)}px`);
             }
@@ -3202,10 +3440,10 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
             if (!moreBtn.empty()) {
               moreBtn.style("display", hasGroup || hasNotes ? "inline-flex" : "none");
             }
-          } else if (foWidth >= 38) {
+          } else if (availWidth >= 38) {
             // Only enough room for Name truncated with ellipsis
             if (!namePill.empty()) {
-              namePill.style("display", "inline-flex").style("max-width", `${foWidth - 6}px`);
+              namePill.style("display", "inline-flex").style("max-width", `${availWidth - 6}px`);
             }
             if (!groupPill.empty()) {
               groupPill.style("display", "none");
@@ -3217,7 +3455,7 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
               moreBtn.style("display", "none");
             }
           } else {
-            // Width between 28px and 38px:
+            // Width between minFoWidth and 38px:
             // Too small for Name pill, show "..." badge representing the hidden session info
             if (!namePill.empty()) {
               namePill.style("display", "none");
@@ -3235,13 +3473,14 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
         }
       });
     }
-    this.updateMilestoneCutoutMask();
+    this.updateSessionVisibility(false);
   }
 
   private updateMilestoneTransforms() {
     this.chart_abs_g
       .selectAll(".milestone")
       .attr("transform", (m: Milestone) => `translate(${this.xScaledTimeZoned(m.date)}, ${this.inner_margin.top})`);
+
     this.updateMilestoneCutoutMask();
   }
 
@@ -3364,6 +3603,10 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
 
   zoomToGroup(commits: Commit[], range: number) {
     if (!commits || commits.length < 2 || range <= 0) return;
+    this.hovered_commit = undefined;
+    this.hovered_group_commit = undefined;
+    this.hovered_g = null;
+    this.tooltipService.hide();
     this.overlayManagerService.dismissAll();
 
     let time_domain = this.x_scale.domain();
@@ -3382,6 +3625,359 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
     this.data_g.transition().duration(750).call(this.zoom.transform, transform);
   }
 
+  zoomToSession(session: Session, marginRatio = 0.1) {
+    if (!session || !this.data_g || !this.zoom || !this.x_scale) return;
+    this.hovered_commit = undefined;
+    this.hovered_group_commit = undefined;
+    this.hovered_g = null;
+    this.tooltipService.hide();
+    this.overlayManagerService.dismissAll();
+
+    const time_domain = this.x_scale.domain();
+    const minDate = time_domain[0].valueOf() as number;
+    const maxDate = time_domain[1].valueOf() as number;
+    const dt = maxDate - minDate;
+
+    const startTime = session.startDate instanceof Date ? session.startDate.getTime() : new Date(session.startDate).getTime();
+    const endTime = session.endDate instanceof Date ? session.endDate.getTime() : new Date(session.endDate).getTime();
+    const sessionDuration = Math.max(1, endTime - startTime);
+
+    if (isNaN(minDate) || isNaN(maxDate) || isNaN(startTime) || isNaN(endTime) || dt <= 0) return;
+
+    const visibleRatio = Math.max(0.1, 1 - 2 * marginRatio);
+    let target_k = (dt * visibleRatio) / sessionDuration;
+    target_k = Math.max(1, Math.min(target_k, this.maxZoom));
+
+    let translate_x = 0;
+    if (target_k > 1) {
+      const centerTime = (startTime + endTime) / 2;
+      translate_x = this.inner_width / 2 - ((centerTime - minDate) / dt) * this.inner_width * target_k;
+    }
+
+    const transform = d3.zoomIdentity.translate(translate_x, 0).scale(target_k);
+
+    this.data_g.transition().duration(750).call(this.zoom.transform, transform);
+  }
+
+  zoomToDateRange(startDate: Date, endDate: Date, marginRatio = 0.05) {
+    if (!startDate || !endDate || !this.data_g || !this.zoom || !this.x_scale) return;
+    this.hovered_commit = undefined;
+    this.hovered_group_commit = undefined;
+    this.hovered_session = undefined;
+    this.hovered_milestone = undefined;
+    this.hovered_repository = undefined;
+    this.hovered_g = null;
+    this.isSessionTooltipPinned = false;
+    this.tooltipService.hide();
+    this.overlayManagerService.dismissAll();
+
+    const time_domain = this.x_scale.domain();
+    const minDate = time_domain[0].valueOf() as number;
+    const maxDate = time_domain[1].valueOf() as number;
+    const dt = maxDate - minDate;
+
+    const t1 = startDate.getTime();
+    const t2 = endDate.getTime();
+    const selectedDuration = Math.max(1000, Math.abs(t2 - t1));
+
+    if (isNaN(minDate) || isNaN(maxDate) || isNaN(t1) || isNaN(t2) || dt <= 0) return;
+
+    const minSelected = Math.min(t1, t2);
+    const maxSelected = Math.max(t1, t2);
+    const margin = selectedDuration * marginRatio;
+
+    const targetStart = minSelected - margin;
+    const targetEnd = maxSelected + margin;
+    const targetDuration = targetEnd - targetStart;
+
+    let target_k = dt / targetDuration;
+    target_k = Math.max(1, Math.min(target_k, this.maxZoom));
+
+    const translate_x = -((targetStart - minDate) / dt) * this.inner_width * target_k;
+
+    const transform = d3.zoomIdentity.translate(translate_x, 0).scale(target_k);
+
+    /* Animation réactive fluide : décélération cubic-bezier(0.23, 1, 0.32, 1) en 480ms */
+    this.data_g.transition().duration(480).ease(d3.easeCubicOut).call(this.zoom.transform, transform);
+  }
+
+  handleSessionClick(session: Session, clientX: number, clientY: number) {
+    if (!session) return;
+    const targetSession = this.activateSession(session);
+
+    if (this.sessionClickTimer && this.lastClickedSession === targetSession) {
+      clearTimeout(this.sessionClickTimer);
+      this.sessionClickTimer = null;
+      this.lastClickedSession = null;
+      this.isSessionTooltipPinned = false;
+      this.tooltipService.hide();
+      this.zoomToSession(targetSession);
+      return;
+    }
+
+    if (this.sessionClickTimer) {
+      clearTimeout(this.sessionClickTimer);
+    }
+    this.lastClickedSession = targetSession;
+    this.sessionClickTimer = setTimeout(() => {
+      this.sessionClickTimer = null;
+      this.lastClickedSession = null;
+      this.showSessionInfoTooltip(targetSession, clientX, clientY);
+    }, 250);
+  }
+
+  handleSessionDblClick(session: Session) {
+    if (!session) return;
+    if (this.sessionClickTimer) {
+      clearTimeout(this.sessionClickTimer);
+      this.sessionClickTimer = null;
+    }
+    this.lastClickedSession = null;
+    this.isSessionTooltipPinned = false;
+    const targetSession = this.activateSession(session);
+    this.tooltipService.hide();
+    this.zoomToSession(targetSession);
+  }
+
+  showSessionInfoTooltip(session: Session, clientX: number, clientY: number) {
+    this.ngZone.run(() => {
+      this.isSessionTooltipPinned = true;
+      this.hovered_session = session;
+      this.hovered_commit = undefined;
+      this.hovered_group_commit = undefined;
+      this.hovered_milestone = undefined;
+      this.hovered_repository = undefined;
+      this.tooltipService.showAtPosition(this.d3TooltipTemplate, clientX, clientY, "right", undefined, true);
+    });
+  }
+
+  private formatSelectionDuration(d1: Date, d2: Date): string {
+    const t1 = Math.min(d1.getTime(), d2.getTime());
+    const t2 = Math.max(d1.getTime(), d2.getTime());
+    const diffMs = t2 - t1;
+    const dur = moment.duration(diffMs);
+    const days = Math.floor(dur.asDays());
+    const hours = dur.hours();
+    const minutes = dur.minutes();
+
+    let text = "";
+    if (days > 0) {
+      text += `${days}j `;
+    }
+    if (hours > 0 || days > 0) {
+      text += `${hours}h `;
+    }
+    if (minutes > 0 || (days === 0 && hours === 0)) {
+      text += `${minutes}min`;
+    }
+    return text.trim();
+  }
+
+  initiateShiftDragZoom(event: MouseEvent) {
+    if (event.button !== 0 || !event.shiftKey || !this.chart_selection_g || !this.x_scale_copy) return;
+    event.preventDefault();
+    event.stopPropagation();
+    this.overlayManagerService.dismissAll();
+
+    const startX = this.getRelativeXFromMouseEvent(event);
+    const clampedStartX = Math.max(0, Math.min(this.inner_width, startX));
+
+    const selectionGroup = this.chart_selection_g.append("g").attr("class", "chart-selection-group").style("pointer-events", "none");
+
+    const selectionBg = selectionGroup
+      .append("rect")
+      .attr("class", "chart-selection-bg")
+      .attr("x", clampedStartX)
+      .attr("y", 0)
+      .attr("width", 0)
+      .attr("height", this.height);
+
+    const leftLine = selectionGroup
+      .append("line")
+      .attr("class", "chart-selection-edge chart-selection-edge-left")
+      .attr("x1", clampedStartX)
+      .attr("y1", 0)
+      .attr("x2", clampedStartX)
+      .attr("y2", this.height);
+
+    const rightLine = selectionGroup
+      .append("line")
+      .attr("class", "chart-selection-edge chart-selection-edge-right")
+      .attr("x1", clampedStartX)
+      .attr("y1", 0)
+      .attr("x2", clampedStartX)
+      .attr("y2", this.height);
+
+    const topBar = selectionGroup
+      .append("rect")
+      .attr("class", "chart-selection-top-bar")
+      .attr("x", clampedStartX)
+      .attr("y", 0)
+      .attr("width", 0)
+      .attr("height", 2.5)
+      .attr("rx", 1.25)
+      .attr("ry", 1.25);
+
+    const badge = selectionGroup.append("g").attr("class", "chart-selection-badge").style("opacity", "0");
+
+    const badgeBg = badge.append("rect").attr("class", "chart-selection-badge-bg").attr("height", 20).attr("rx", 10).attr("ry", 10);
+
+    const badgeText = badge.append("text").attr("class", "chart-selection-badge-text").attr("y", 14).attr("text-anchor", "middle");
+
+    document.body.style.cursor = "crosshair";
+    this.isShiftDragging = true;
+    let hasMovedEnough = false;
+
+    const onWindowMouseMove = (e: MouseEvent) => {
+      const currentX = this.getRelativeXFromMouseEvent(e);
+      const minX = Math.max(0, Math.min(clampedStartX, currentX));
+      const maxX = Math.min(this.inner_width, Math.max(clampedStartX, currentX));
+      const w = Math.max(0, maxX - minX);
+
+      if (Math.abs(currentX - clampedStartX) >= 8) {
+        hasMovedEnough = true;
+      }
+
+      selectionBg.attr("x", minX).attr("width", w);
+      leftLine.attr("x1", minX).attr("x2", minX);
+      rightLine.attr("x1", maxX).attr("x2", maxX);
+      topBar.attr("x", minX).attr("width", w);
+
+      if (w >= 16 && this.x_scale_copy) {
+        const d1 = this.x_scale_copy.invert(minX);
+        const d2 = this.x_scale_copy.invert(maxX);
+        const durText = this.formatSelectionDuration(d1, d2);
+        badgeText.text(durText);
+
+        const textNode = badgeText.node() as SVGTextContentElement;
+        const textWidth = textNode ? textNode.getComputedTextLength() : durText.length * 6.5;
+        const badgeWidth = Math.max(50, textWidth + 16);
+
+        badgeBg.attr("width", badgeWidth).attr("x", -badgeWidth / 2);
+
+        let badgeX = minX + w / 2;
+        badgeX = Math.max(badgeWidth / 2 + 6, Math.min(this.inner_width - badgeWidth / 2 - 6, badgeX));
+        const badgeY = Math.max(6, this.inner_margin?.top ? this.inner_margin.top + 8 : 12);
+
+        badge.attr("transform", `translate(${badgeX}, ${badgeY})`).style("opacity", "1");
+      } else {
+        badge.style("opacity", "0");
+      }
+    };
+
+    const onWindowMouseUp = (e: MouseEvent) => {
+      window.removeEventListener("mousemove", onWindowMouseMove);
+      window.removeEventListener("mouseup", onWindowMouseUp);
+      document.body.style.cursor = "";
+      this.isShiftDragging = false;
+
+      const currentX = this.getRelativeXFromMouseEvent(e);
+      const distance = Math.abs(currentX - clampedStartX);
+
+      if (distance >= 8 && hasMovedEnough) {
+        selectionGroup.classed("selection-exiting", true);
+        setTimeout(() => selectionGroup.remove(), 180);
+
+        const minX = Math.max(0, Math.min(clampedStartX, currentX));
+        const maxX = Math.min(this.inner_width, Math.max(clampedStartX, currentX));
+        const d1 = this.x_scale_copy.invert(minX);
+        const d2 = this.x_scale_copy.invert(maxX);
+        this.zoomToDateRange(d1, d2, 0.05);
+      } else {
+        selectionGroup.remove();
+      }
+    };
+
+    window.addEventListener("mousemove", onWindowMouseMove);
+    window.addEventListener("mouseup", onWindowMouseUp);
+  }
+
+  getVisibleSessions(): Session[] {
+    if (!this.dataService || !this.dataService.sessions) return [];
+    return this.dataService.sessions
+      .filter((session) => !this.dataService.groupFilter || !session.tpGroup || session.tpGroup === this.dataService.groupFilter)
+      .slice()
+      .sort((a, b) => {
+        const aStart = a.startDate instanceof Date ? a.startDate.getTime() : new Date(a.startDate).getTime();
+        const bStart = b.startDate instanceof Date ? b.startDate.getTime() : new Date(b.startDate).getTime();
+        const diffStart = aStart - bStart;
+        if (diffStart !== 0) return diffStart;
+        const aEnd = a.endDate instanceof Date ? a.endDate.getTime() : new Date(a.endDate).getTime();
+        const bEnd = b.endDate instanceof Date ? b.endDate.getTime() : new Date(b.endDate).getTime();
+        const diffEnd = aEnd - bEnd;
+        if (diffEnd !== 0) return diffEnd;
+        return (a.label || "").localeCompare(b.label || "");
+      });
+  }
+
+  navigateToNextSession(direction: 1 | -1) {
+    const sessions = this.getVisibleSessions();
+    if (!sessions || sessions.length === 0) return;
+
+    let targetSession: Session | null = null;
+    let currentIndex = -1;
+
+    if (this.lastFocusedSession) {
+      currentIndex = sessions.findIndex(
+        (s) =>
+          this.getSessionKeyNum(s) === this.getSessionKeyNum(this.lastFocusedSession) &&
+          s.tpGroup === this.lastFocusedSession.tpGroup &&
+          (s.label && this.lastFocusedSession.label ? s.label === this.lastFocusedSession.label : true),
+      );
+    }
+
+    if (currentIndex !== -1) {
+      const nextIndex = currentIndex + direction;
+      if (nextIndex >= 0 && nextIndex < sessions.length) {
+        targetSession = sessions[nextIndex];
+      }
+    } else {
+      const scale = this.x_scale_copy || this.x_scale;
+      if (scale) {
+        const viewportCenterTime = scale.invert(this.inner_width / 2).getTime();
+        let bestDiff = Infinity;
+        let bestIndex = 0;
+        sessions.forEach((s, idx) => {
+          const sStart = s.startDate instanceof Date ? s.startDate.getTime() : new Date(s.startDate).getTime();
+          const sEnd = s.endDate instanceof Date ? s.endDate.getTime() : new Date(s.endDate).getTime();
+          const centerTime = (sStart + sEnd) / 2;
+          const diff = Math.abs(centerTime - viewportCenterTime);
+          if (diff < bestDiff) {
+            bestDiff = diff;
+            bestIndex = idx;
+          }
+        });
+        targetSession = sessions[bestIndex];
+      } else {
+        targetSession = direction === 1 ? sessions[0] : sessions[sessions.length - 1];
+      }
+    }
+
+    if (targetSession) {
+      this.lastFocusedSession = targetSession;
+
+      if (this.overlapGroups) {
+        for (const group of this.overlapGroups) {
+          const sessionIdx = group.findIndex(
+            (s) =>
+              this.getSessionKeyNum(s) === this.getSessionKeyNum(targetSession) &&
+              s.tpGroup === targetSession.tpGroup &&
+              (s.label && targetSession.label ? s.label === targetSession.label : true),
+          );
+          if (sessionIdx !== -1) {
+            const groupId = this.getGroupId(group);
+            this.activeSessionIndices.set(groupId, sessionIdx);
+            break;
+          }
+        }
+      }
+
+      this.updateSessionsTransforms();
+      this.updateSessionVisibility(true);
+      this.zoomToSession(targetSession);
+    }
+  }
+
   searchSubmit() {
     this.loadGraphDataAndRefresh(false);
   }
@@ -3434,12 +4030,12 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
     });
   }
 
-  updateAfterMilestoneChange(hadStripBefore?: boolean) {
+  updateAfterMilestoneChange(stripHeightBefore?: number) {
     this.dataService.saveData();
 
-    const hasStripAfter = this.hasTopStrip();
-    if (hadStripBefore !== undefined && hadStripBefore !== hasStripAfter) {
-      // The top strip appeared or disappeared, requiring layout recalculation
+    const stripHeightAfter = this.getTopStripHeight();
+    if (stripHeightBefore !== undefined && stripHeightBefore !== stripHeightAfter) {
+      // The top strip height changed (0 <-> 24 <-> 48), requiring layout recalculation
       this.loadGraphMetadata(
         this.dataService.repositories,
         this.dataService.reviews,
@@ -3461,11 +4057,11 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
     this.updateCommitColors();
   }
 
-  updateAfterSessionChange(hadStripBefore?: boolean) {
+  updateAfterSessionChange(stripHeightBefore?: number) {
     this.dataService.saveData();
-    const hasStripAfter = this.hasTopStrip();
-    if (hadStripBefore !== undefined && hadStripBefore !== hasStripAfter) {
-      // The top strip appeared or disappeared, requiring layout recalculation
+    const stripHeightAfter = this.getTopStripHeight();
+    if (stripHeightBefore !== undefined && stripHeightBefore !== stripHeightAfter) {
+      // The top strip height changed (0 <-> 24 <-> 48), requiring layout recalculation
       this.loadGraphMetadata(
         this.dataService.repositories,
         this.dataService.reviews,
@@ -3481,4 +4077,179 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte
   private saveData() {
     this.updateAfterMilestoneChange();
   }
+
+  private computeOverlapGroups(sessions: Session[]): Session[][] {
+    const sorted = [...sessions].sort((a, b) => new Date(a.startDate).getTime() - new Date(b.startDate).getTime());
+    const groups: Session[][] = [];
+    const visited = new Set<Session>();
+    for (const session of sorted) {
+      if (visited.has(session)) continue;
+      const group: Session[] = [session];
+      visited.add(session);
+      let changed = true;
+      while (changed) {
+        changed = false;
+        for (const other of sorted) {
+          if (visited.has(other)) continue;
+          if (group.some((s) => this.sessionsOverlap(s, other))) {
+            group.push(other);
+            visited.add(other);
+            changed = true;
+          }
+        }
+      }
+      groups.push(group.sort((a, b) => new Date(a.startDate).getTime() - new Date(b.startDate).getTime()));
+    }
+    return groups;
+  }
+
+  private sessionsOverlap(a: Session, b: Session): boolean {
+    const aStart = new Date(a.startDate).getTime();
+    const aEnd = new Date(a.endDate).getTime();
+    const bStart = new Date(b.startDate).getTime();
+    const bEnd = new Date(b.endDate).getTime();
+    return aStart < bEnd && bStart < aEnd;
+  }
+
+  public getGroupId(group: Session[]): string {
+    return String(new Date(group[0].startDate).getTime());
+  }
+
+  public getSessionKeyNum(session: Session): number {
+    return session.startDate instanceof Date ? session.startDate.getTime() : new Date(session.startDate).getTime();
+  }
+
+  public getSessionOverlapGroup(session: Session): Session[] | null {
+    return this.overlapGroups.find((g) => g.includes(session)) || null;
+  }
+
+  public getActiveSession(session: Session): Session {
+    if (!session) return session;
+    const group = this.getSessionOverlapGroup(session);
+    if (!group || group.length <= 1) return session;
+    const groupId = this.getGroupId(group);
+    const activeIdx = this.activeSessionIndices.get(groupId) ?? 0;
+    return group[activeIdx] ?? session;
+  }
+
+  public sessionCoversTime(session: Session, time: number): boolean {
+    if (!session || !session.startDate || !session.endDate) return false;
+    const start = session.startDate instanceof Date ? session.startDate.getTime() : new Date(session.startDate).getTime();
+    const end = session.endDate instanceof Date ? session.endDate.getTime() : new Date(session.endDate).getTime();
+    return time >= Math.min(start, end) && time <= Math.max(start, end);
+  }
+
+  public resolveSessionAtDate(rawDate: Date, preferredSession?: Session): Session | null {
+    if (!rawDate || isNaN(rawDate.getTime())) return preferredSession || null;
+    const time = rawDate.getTime();
+
+    // 1. If preferredSession is provided:
+    if (preferredSession) {
+      if (this.sessionCoversTime(preferredSession, time)) {
+        return preferredSession;
+      }
+      const group = this.getSessionOverlapGroup(preferredSession);
+      if (group) {
+        const covering = group.find((s) => this.sessionCoversTime(s, time));
+        if (covering) return covering;
+      }
+      const activeSession = this.getActiveSession(preferredSession);
+      if (activeSession && this.sessionCoversTime(activeSession, time)) {
+        return activeSession;
+      }
+    }
+
+    // 2. No preferredSession or preferredSession does not cover time:
+    const visibleSessions = (this.dataService.sessions || []).filter(
+      (s) => !this.dataService.groupFilter || !s.tpGroup || s.tpGroup === this.dataService.groupFilter,
+    );
+    const candidates = visibleSessions.filter((s) => this.sessionCoversTime(s, time));
+    if (candidates.length === 0) return null;
+    if (candidates.length === 1) return candidates[0];
+
+    // If multiple candidates overlap at this time, prioritize currently active session
+    for (const cand of candidates) {
+      const active = this.getActiveSession(cand);
+      if (active === cand) {
+        return cand;
+      }
+    }
+
+    if (this.lastFocusedSession && candidates.includes(this.lastFocusedSession)) {
+      return this.lastFocusedSession;
+    }
+
+    return candidates[0];
+  }
+
+  public activateSession(session: Session): Session {
+    if (!session) return session;
+    const group = this.getSessionOverlapGroup(session);
+    if (group && group.length > 1) {
+      const idx = group.findIndex(
+        (s) =>
+          this.getSessionKeyNum(s) === this.getSessionKeyNum(session) &&
+          s.tpGroup === session.tpGroup &&
+          (s.label && session.label ? s.label === session.label : true),
+      );
+      if (idx !== -1) {
+        const groupId = this.getGroupId(group);
+        const currentIdx = this.activeSessionIndices.get(groupId);
+        if (currentIdx !== idx) {
+          this.activeSessionIndices.set(groupId, idx);
+          this.updateSessionsTransforms();
+          this.updateSessionVisibility(true);
+        }
+      }
+    }
+    this.lastFocusedSession = session;
+    return session;
+  }
+
+  public selectAndActivateSession(session: Session, x: number, y: number, date: Date) {
+    if (!session) return;
+    this.activateSession(session);
+    this.openEditSessionContextMenu(session, x, y, date);
+  }
+
+  public updateSessionVisibility(shouldRaise = false) {
+    if (!this.overlapGroups || !this.session_g) return;
+    for (const group of this.overlapGroups) {
+      if (group.length <= 1) continue;
+      const groupId = this.getGroupId(group);
+      const activeIdx = this.activeSessionIndices.get(groupId) ?? 0;
+      group.forEach((session, idx) => {
+        const key = this.getSessionKeyNum(session);
+        const isActive = idx === activeIdx;
+        const bodyGroup = this.session_g.select(`.session-group-${key}`);
+        if (isActive) {
+          bodyGroup.style("opacity", null).style("pointer-events", "auto");
+          if (shouldRaise) {
+            bodyGroup.raise();
+          }
+        } else {
+          bodyGroup.style("opacity", "0.25").style("pointer-events", "auto");
+        }
+        if (!this.session_header_g) return;
+        const hdrGroup = this.session_header_g.select(`.session-hdr-group-${key}`);
+        if (hdrGroup.empty()) return;
+        if (!isActive) {
+          hdrGroup.style("display", "none").style("visibility", "hidden").style("pointer-events", "none");
+        } else {
+          if (shouldRaise) {
+            hdrGroup.raise();
+          }
+          const rawX1 = this.xScaledTimeZoned(session.startDate);
+          const rawX2 = this.xScaledTimeZoned(session.endDate);
+          const isInViewport =
+            !isNaN(rawX1) && !isNaN(rawX2) && rawX2 > 0 && rawX1 < this.inner_width && Math.max(0, rawX2 - Math.max(0, rawX1)) > 0;
+          if (isInViewport) {
+            hdrGroup.style("display", null).style("visibility", null).style("pointer-events", "auto");
+          } else {
+            hdrGroup.style("display", "none").style("visibility", "hidden").style("pointer-events", "none");
+          }
+        }
+      });
+    }
+  }
 }
diff --git a/src/app/components/graphs/commits/session-header-renderer.ts b/src/app/components/graphs/commits/session-header-renderer.ts
new file mode 100644
index 00000000..d36f338b
--- /dev/null
+++ b/src/app/components/graphs/commits/session-header-renderer.ts
@@ -0,0 +1,276 @@
+/* eslint-disable max-len */
+import * as d3 from "d3";
+import { Session } from "@models/Session.model";
+
+export interface SessionHeaderRenderContext {
+  session: Session;
+  overlapGroup: Session[] | null;
+  overview: any;
+  displayName: string;
+  groupName: string;
+  hasNotes: boolean;
+  fo: d3.Selection<SVGForeignObjectElement, any, any, any>;
+  calendarSvg: string;
+  usersSvg: string;
+  noteSvg: string;
+}
+
+export class SessionHeaderRenderer {
+  public static renderHeader(ctx: SessionHeaderRenderContext): void {
+    const isOverlap = !!(ctx.overlapGroup && ctx.overlapGroup.length > 1);
+    if (isOverlap) {
+      this.renderOverlappingSession(ctx);
+    } else {
+      this.renderSingleSession(ctx);
+    }
+  }
+
+  /* -------------------------------------------------------------
+   * Séance non superposée (rendu standard sans flèches)
+   * ------------------------------------------------------------- */
+  private static renderSingleSession(ctx: SessionHeaderRenderContext): void {
+    const { displayName, groupName, hasNotes, fo, calendarSvg, usersSvg, noteSvg } = ctx;
+
+    fo.html(`
+      <div class="session-header-inner d-flex align-items-center" style="gap: 4px; height: 100%; min-height: 24px; padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 4px; pointer-events: auto; overflow: visible; width: 100%; position: relative;">
+        <div class="session-header-pills-container d-flex align-items-center" style="gap: 4px; overflow: visible; min-width: 0; flex: 1 1 auto; height: 100%; flex-wrap: nowrap;">
+          <!-- Pill 1: Nom de séance -->
+          <span class="badge session-pill session-name-pill d-inline-flex align-items-center" style="box-sizing: border-box; background: var(--color-surface); border: 1px solid rgba(56, 189, 248, 0.4); color: var(--color-text-primary); font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 9999px; white-space: nowrap; gap: 4px; height: 18px; line-height: 1; box-shadow: 0 1px 2px rgba(0,0,0,0.05); flex-shrink: 0; min-width: 0; overflow: hidden; pointer-events: auto; align-self: center;">
+            ${calendarSvg}
+            <span class="session-pill-text session-name-text text-truncate" style="min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block;">${displayName}</span>
+          </span>
+
+          <!-- Pill 2: Groupe de TP -->
+          ${
+            groupName
+              ? `
+          <span class="badge session-pill session-group-pill d-inline-flex align-items-center" style="box-sizing: border-box; background: var(--color-surface); border: 1px solid rgba(56, 189, 248, 0.4); color: var(--color-text-secondary); font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 9999px; white-space: nowrap; gap: 4px; height: 18px; line-height: 1; box-shadow: 0 1px 2px rgba(0,0,0,0.05); flex-shrink: 0; min-width: 0; overflow: hidden; pointer-events: auto; align-self: center;">
+            ${usersSvg}
+            <span class="session-pill-text session-group-text text-truncate" style="min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block;">${groupName}</span>
+          </span>`
+              : ""
+          }
+
+          <!-- Pill 3: Note button -->
+          ${
+            hasNotes
+              ? `
+          <span role="button" tabindex="0" class="btn session-note-btn flex-shrink-0 d-inline-flex align-items-center justify-content-center p-0" style="box-sizing: border-box; width: 18px; height: 18px; min-width: 18px; min-height: 18px; border-radius: 50%; background: var(--color-surface); border: 1px solid rgba(56, 189, 248, 0.45); color: var(--color-primary); box-shadow: 0 1px 2px rgba(0,0,0,0.05); cursor: pointer; pointer-events: auto; align-self: center;">
+            ${noteSvg}
+          </span>`
+              : ""
+          }
+
+          <!-- More indicator (...) when some info is hidden -->
+          <span role="button" tabindex="0" class="session-more-btn flex-shrink-0 d-inline-flex align-items-center justify-content-center" style="width: 16px; height: 18px; cursor: pointer; pointer-events: auto; display: none; background: transparent; border: none; padding: 0; align-self: center;">
+            <svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="flex-shrink: 0; display: block;">
+              <circle cx="2.5" cy="8" r="1.8" />
+              <circle cx="8" cy="8" r="1.8" />
+              <circle cx="13.5" cy="8" r="1.8" />
+            </svg>
+          </span>
+        </div>
+      </div>
+    `);
+  }
+
+  /* -------------------------------------------------------------
+   * Séance superposée (flèches d'arête aux extrémités + badges centrés)
+   * ------------------------------------------------------------- */
+  private static renderOverlappingSession(ctx: SessionHeaderRenderContext): void {
+    const { session, overlapGroup, overview, displayName, groupName, hasNotes, fo, calendarSvg, usersSvg, noteSvg } = ctx;
+
+    if (!overlapGroup || overlapGroup.length <= 1) {
+      this.renderSingleSession(ctx);
+      return;
+    }
+
+    const sessionIdxInGroup = overlapGroup.indexOf(session);
+    const groupSize = overlapGroup.length;
+
+    /* SVG chevrons — stroke cohérent avec les icônes de l'app */
+    /* prettier-ignore */
+    // eslint-disable-next-line @typescript-eslint/quotes
+    const chevronLeft = '<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="15 18 9 12 15 6"/></svg>';
+    /* prettier-ignore */
+    // eslint-disable-next-line @typescript-eslint/quotes
+    const chevronRight = '<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 18 15 12 9 6"/></svg>';
+
+    fo.html(`
+      <div class="session-header-inner d-flex align-items-center justify-content-between" style="height: 100%; min-height: 24px; padding-top: 0; padding-bottom: 0; padding-left: 2px; padding-right: 2px; pointer-events: auto; overflow: visible; width: 100%; position: relative;">
+        <!-- Left arrow (collée au bord gauche) -->
+        <button class="session-edge-arrow session-edge-prev flex-shrink-0" type="button" style="height: 18px; align-self: center;">
+          ${chevronLeft}
+        </button>
+
+        <!-- Zone centrale centrée -->
+        <div class="session-header-pills-container d-flex align-items-center justify-content-center" style="gap: 4px; overflow: visible; min-width: 0; flex: 1 1 auto; height: 100%; padding: 0 4px; flex-wrap: nowrap;">
+          <!-- Pill 1: Nom de séance -->
+          <span class="badge session-pill session-name-pill d-inline-flex align-items-center" style="box-sizing: border-box; background: var(--color-surface); border: 1px solid rgba(56, 189, 248, 0.4); color: var(--color-text-primary); font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 9999px; white-space: nowrap; gap: 4px; height: 18px; line-height: 1; box-shadow: 0 1px 2px rgba(0,0,0,0.05); flex-shrink: 0; min-width: 0; overflow: hidden; pointer-events: auto; align-self: center;">
+            ${calendarSvg}
+            <span class="session-pill-text session-name-text text-truncate" style="min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block;">${displayName}</span>
+          </span>
+
+          <!-- Pill 2: Groupe de TP -->
+          ${
+            groupName
+              ? `
+          <span class="badge session-pill session-group-pill d-inline-flex align-items-center" style="box-sizing: border-box; background: var(--color-surface); border: 1px solid rgba(56, 189, 248, 0.4); color: var(--color-text-secondary); font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 9999px; white-space: nowrap; gap: 4px; height: 18px; line-height: 1; box-shadow: 0 1px 2px rgba(0,0,0,0.05); flex-shrink: 0; min-width: 0; overflow: hidden; pointer-events: auto; align-self: center;">
+            ${usersSvg}
+            <span class="session-pill-text session-group-text text-truncate" style="min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block;">${groupName}</span>
+          </span>`
+              : ""
+          }
+
+          <!-- Pill 3: Note button -->
+          ${
+            hasNotes
+              ? `
+          <span role="button" tabindex="0" class="btn session-note-btn flex-shrink-0 d-inline-flex align-items-center justify-content-center p-0" style="box-sizing: border-box; width: 18px; height: 18px; min-width: 18px; min-height: 18px; border-radius: 50%; background: var(--color-surface); border: 1px solid rgba(56, 189, 248, 0.45); color: var(--color-primary); box-shadow: 0 1px 2px rgba(0,0,0,0.05); cursor: pointer; pointer-events: auto; align-self: center;">
+            ${noteSvg}
+          </span>`
+              : ""
+          }
+
+          <!-- More indicator (...) when some info is hidden -->
+          <span role="button" tabindex="0" class="session-more-btn flex-shrink-0 d-inline-flex align-items-center justify-content-center" style="width: 16px; height: 18px; cursor: pointer; pointer-events: auto; display: none; background: transparent; border: none; padding: 0; align-self: center;">
+            <svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="flex-shrink: 0; display: block;">
+              <circle cx="2.5" cy="8" r="1.8" />
+              <circle cx="8" cy="8" r="1.8" />
+              <circle cx="13.5" cy="8" r="1.8" />
+            </svg>
+          </span>
+
+          <!-- Compteur (forme originale texte simple) -->
+          <span class="session-counter flex-shrink-0" style="font-size: 10px; font-weight: 600; color: var(--color-text-secondary); white-space: nowrap; line-height: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; padding: 0 2px; user-select: none; align-self: center; vertical-align: middle;">${
+            sessionIdxInGroup + 1
+          }/${groupSize}</span>
+        </div>
+
+        <!-- Right arrow (collée au bord droit) -->
+        <button class="session-edge-arrow session-edge-next flex-shrink-0" type="button" style="height: 18px; align-self: center;">
+          ${chevronRight}
+        </button>
+      </div>
+    `);
+
+    const groupId = overview.getGroupId(overlapGroup);
+    const svc = overview.tooltipService;
+    const len = overlapGroup.length;
+
+    const getIdx = () => overview.activeSessionIndices.get(groupId) ?? 0;
+
+    this.attachTooltip(
+      fo.select(".session-edge-prev"),
+      svc,
+      () => {
+        const prevIdx = (getIdx() - 1 + len) % len;
+        const targetSession = overlapGroup[prevIdx];
+        const title = `Séance précédente (${prevIdx + 1}/${len})`;
+        return this.buildSessionTooltipHtml(title, targetSession, overview);
+      },
+      "bottom",
+      "270px",
+    );
+    fo.select(".session-edge-prev").on("click", (e: MouseEvent) => {
+      e.stopPropagation();
+      svc.hide();
+      const prevIdx = (getIdx() - 1 + len) % len;
+      overview.activeSessionIndices.set(groupId, prevIdx);
+      const targetSession = overlapGroup[prevIdx];
+      overview.lastFocusedSession = targetSession;
+      overview.updateSessionsTransforms();
+      overview.updateSessionVisibility(true);
+      overview.zoomToSession(targetSession);
+    });
+
+    this.attachTooltip(
+      fo.select(".session-edge-next"),
+      svc,
+      () => {
+        const nextIdx = (getIdx() + 1) % len;
+        const targetSession = overlapGroup[nextIdx];
+        const title = `Séance suivante (${nextIdx + 1}/${len})`;
+        return this.buildSessionTooltipHtml(title, targetSession, overview);
+      },
+      "bottom",
+      "270px",
+    );
+    fo.select(".session-edge-next").on("click", (e: MouseEvent) => {
+      e.stopPropagation();
+      svc.hide();
+      const nextIdx = (getIdx() + 1) % len;
+      overview.activeSessionIndices.set(groupId, nextIdx);
+      const targetSession = overlapGroup[nextIdx];
+      overview.lastFocusedSession = targetSession;
+      overview.updateSessionsTransforms();
+      overview.updateSessionVisibility(true);
+      overview.zoomToSession(targetSession);
+    });
+  }
+
+  /* -------------------------------------------------------------
+   * Helper : Construit la carte tooltip riche d'une séance cible
+   * ------------------------------------------------------------- */
+  private static buildSessionTooltipHtml(title: string, session: Session, overview: any): string {
+    const sName = this.escapeHtml(overview.getSessionDisplayName(session));
+    const sGroup = session.tpGroup ? this.escapeHtml(session.tpGroup) : "";
+    const timeFormatted = this.escapeHtml(overview.formatSessionTime(session));
+    const hasNotes = !!(session.notes && session.notes.trim().length > 0);
+    const notesEscaped = hasNotes ? this.escapeHtml(session.notes.trim()) : "";
+
+    return `
+      <div style="text-align: left; min-width: 180px; max-width: 260px; font-family: inherit;">
+        <div style="font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-muted); margin-bottom: 4px;">
+          ${title}
+        </div>
+        <div style="display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 3px;">
+          <span style="font-weight: 600; color: var(--color-primary); font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
+            ${sName}
+          </span>
+          ${
+            sGroup
+              ? `<span class="badge" style="display: inline-flex; align-items: center; background: rgba(56, 189, 248, 0.15); color: var(--color-text-secondary); font-size: 0.72rem; font-weight: 500; border-radius: 9999px; padding: 1px 7px; height: 18px; line-height: 1; flex-shrink: 0;">${sGroup}</span>`
+              : ""
+          }
+        </div>
+        <div style="font-size: 0.78rem; color: var(--color-text-secondary); display: flex; align-items: center; gap: 4px; margin-bottom: ${
+          hasNotes ? "6px" : "0"
+        };">
+          <i class="far fa-clock" style="font-size: 10px;"></i>
+          <span>${timeFormatted}</span>
+        </div>
+        ${
+          hasNotes
+            ? `<div style="border-top: 1px solid var(--color-border); padding-top: 5px; margin-top: 5px;">
+          <p style="margin-bottom: 0; font-size: 0.8rem; color: var(--color-text-primary); white-space: pre-wrap; line-height: 1.3; max-height: 80px; overflow-y: auto;">${notesEscaped}</p>
+        </div>`
+            : ""
+        }
+      </div>
+    `;
+  }
+
+  private static escapeHtml(str: string): string {
+    if (!str) return "";
+    return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+  }
+
+  /* -------------------------------------------------------------
+   * Helper : Attache les events de tooltip sur une sélection D3 HTML.
+   * ------------------------------------------------------------- */
+  private static attachTooltip(
+    selection: d3.Selection<any, any, any, any>,
+    svc: any,
+    getText: () => string,
+    placement: "top" | "bottom" | "left" | "right" = "bottom",
+    maxWidth?: string | number,
+  ): void {
+    selection
+      .on("mouseenter", function (this: HTMLElement) {
+        svc.show(getText(), this, placement, undefined, maxWidth);
+      })
+      .on("mouseleave", () => svc.hide())
+      .on("mousedown", () => svc.hide());
+  }
+}
diff --git a/src/app/components/graphs/questions-completion/questions-completion.component.html b/src/app/components/graphs/questions-completion/questions-completion.component.html
index 0f642c19..fc9ed603 100644
--- a/src/app/components/graphs/questions-completion/questions-completion.component.html
+++ b/src/app/components/graphs/questions-completion/questions-completion.component.html
@@ -45,14 +45,8 @@
 
     <!-- Reload Button -->
     <button class="btn-outline-ghost anim-spin-hover" (click)="loadGraph(dataService.startDate, dataService.endDate)" [disabled]="!dataService.repositories.length || loading" [appTooltip]="{ text: ('OVERVIEW-GRAPH.RELOAD-TOOLTIP' | translate), shortcut: ['R'] }">
-      <div *ngIf="loading" class="d-flex">
-        <svg class="fa-spin" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"></path>
-          <path d="M21 3v5h-5"></path>
-        </svg>
-      </div>
-      <div *ngIf="!loading" class="d-flex">
-        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <div class="d-flex">
+        <svg [class.spinning]="loading" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
           <path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"></path>
           <path d="M21 3v5h-5"></path>
         </svg>
diff --git a/src/app/components/graphs/questions-completion/questions-completion.component.ts b/src/app/components/graphs/questions-completion/questions-completion.component.ts
index d5c3fbd3..b842a8b1 100644
--- a/src/app/components/graphs/questions-completion/questions-completion.component.ts
+++ b/src/app/components/graphs/questions-completion/questions-completion.component.ts
@@ -1,13 +1,4 @@
-import {
-  Component,
-  ElementRef,
-  HostListener,
-  OnDestroy,
-  OnInit,
-  TemplateRef,
-  ViewChild,
-  ViewEncapsulation,
-} from "@angular/core";
+import { Component, ElementRef, HostListener, OnDestroy, OnInit, TemplateRef, ViewChild, ViewEncapsulation } from "@angular/core";
 import { CommitColor } from "@models/Commit.model";
 import { TranslateService } from "@ngx-translate/core";
 import { AssignmentsService } from "@services/assignments.service";
@@ -16,7 +7,9 @@ import { DataService } from "@services/data.service";
 import { LoaderService } from "@services/loader.service";
 import { TooltipService } from "@services/tooltip.service";
 import { ThemeService } from "@services/theme.service";
+import { AnonymizationService } from "@services/anonymization.service";
 import { Subscription } from "rxjs";
+import { skip } from "rxjs/operators";
 import { BaseGraphComponent } from "../base-graph.component";
 import { Utils } from "../../../services/utils";
 import { OsUtils } from "@utils/os.utils";
@@ -28,10 +21,7 @@ import * as d3 from "d3";
   styleUrls: ["./questions-completion.component.scss"],
   encapsulation: ViewEncapsulation.None,
 })
-export class QuestionsCompletionComponent
-  extends BaseGraphComponent
-  implements OnInit, OnDestroy
-{
+export class QuestionsCompletionComponent extends BaseGraphComponent implements OnInit, OnDestroy {
   @ViewChild("chartContainer", { static: true }) chartContainer: ElementRef;
   @ViewChild("leftAxisContainer", { static: true }) leftAxisContainer: ElementRef;
   @ViewChild("d3TooltipTemplate") d3TooltipTemplate!: TemplateRef<any>;
@@ -44,14 +34,8 @@ export class QuestionsCompletionComponent
   max: number;
   dict = {};
   chartData: any[] = [];
-  
-  commitColors = [
-    CommitColor.INTERMEDIATE,
-    CommitColor.BEFORE,
-    CommitColor.BETWEEN,
-    CommitColor.AFTER,
-    CommitColor.NOCOMMIT,
-  ];
+
+  commitColors = [CommitColor.INTERMEDIATE, CommitColor.BEFORE, CommitColor.BETWEEN, CommitColor.AFTER, CommitColor.NOCOMMIT];
   hiddenCategories = new Set<string>();
 
   private svg: any;
@@ -64,7 +48,8 @@ export class QuestionsCompletionComponent
     protected loaderService: LoaderService,
     protected assignmentsService: AssignmentsService,
     private tooltipService: TooltipService,
-    public themeService: ThemeService
+    public themeService: ThemeService,
+    public anonymizationService: AnonymizationService,
   ) {
     super(loaderService, assignmentsService, dataService);
   }
@@ -75,6 +60,9 @@ export class QuestionsCompletionComponent
       this.translateService.onLangChange.subscribe(() => {
         this.loadGraphDataAndRefresh();
       });
+      this.anonymizationService.isAnonymous$.pipe(skip(1)).subscribe(() => {
+        this.loadGraphDataAndRefresh();
+      });
 
       if (this.dataService.repoToLoad) {
         this.loadGraph(this.dataService.startDate, this.dataService.endDate);
@@ -85,7 +73,7 @@ export class QuestionsCompletionComponent
           this.dataService.repositories,
           this.dataService.reviews,
           this.dataService.corrections,
-          this.dataService.questions
+          this.dataService.questions,
         );
         this.loading = false;
       }
@@ -107,39 +95,21 @@ export class QuestionsCompletionComponent
   }
 
   loadGraphDataAndRefresh(conserveZoom?: boolean) {
-    let translations = this.translateService.instant([
-      "QUESTION",
-      "COMMITS-COUNT",
-      "COMMITS-PERCENTAGE",
-      "STUDENTS"
-    ]);
-
-    let colors = [
-      CommitColor.BEFORE,
-      CommitColor.BETWEEN,
-      CommitColor.AFTER,
-      CommitColor.NOCOMMIT,
-    ];
-
-    let dict = this.commitsService.initQuestionsDict(
-      this.dataService.questions,
-      colors
-    );
+    let translations = this.translateService.instant(["QUESTION", "COMMITS-COUNT", "COMMITS-PERCENTAGE", "STUDENTS"]);
+
+    let colors = [CommitColor.BEFORE, CommitColor.BETWEEN, CommitColor.AFTER, CommitColor.NOCOMMIT];
+
+    let dict = this.commitsService.initQuestionsDict(this.dataService.questions, colors);
     dict = this.commitsService.loadQuestionsDict(
       dict,
       this.dataService.repositories,
       this.dataService.questions,
       colors,
       this.dataService.groupFilter,
-      this.date
+      this.date,
     );
 
-    this.chartData = this.commitsService.loadQuestions(
-      dict,
-      colors,
-      this.dataService.questions,
-      translations
-    );
+    this.chartData = this.commitsService.loadQuestions(dict, colors, this.dataService.questions, translations);
 
     this.drawGraph();
   }
@@ -169,14 +139,9 @@ export class QuestionsCompletionComponent
       .append("g")
       .attr("transform", `translate(${margin.left},${margin.top})`);
 
-    const colors = [
-      CommitColor.BEFORE,
-      CommitColor.BETWEEN,
-      CommitColor.AFTER,
-      CommitColor.NOCOMMIT,
-    ];
+    const colors = [CommitColor.BEFORE, CommitColor.BETWEEN, CommitColor.AFTER, CommitColor.NOCOMMIT];
 
-    const keys = colors.map((c) => c.label).filter(k => !this.hiddenCategories.has(k));
+    const keys = colors.map((c) => c.label).filter((k) => !this.hiddenCategories.has(k));
     const stackedData = d3.stack().keys(keys)(this.chartData);
 
     // Scales
@@ -201,36 +166,41 @@ export class QuestionsCompletionComponent
       .style("fill", "var(--color-text-primary)")
       .style("font-size", "12px");
 
-    const svgLeft = d3.select(leftElement).append("svg")
+    const svgLeft = d3
+      .select(leftElement)
+      .append("svg")
       .style("display", "block")
       .attr("width", margin.left)
       .attr("height", height + margin.top + margin.bottom)
       .style("pointer-events", "none");
 
-    const leftPath = `M 0 0 L ${margin.left} 0 L ${margin.left} ${margin.top + height} L ${margin.left - margin.bottom} ${margin.top + height + margin.bottom} L 0 ${margin.top + height + margin.bottom} Z`;
-    svgLeft.append("path")
-      .attr("d", leftPath)
-      .attr("fill", "var(--color-bg-body)")
-      .style("pointer-events", "auto");
+    const leftPath = `M 0 0 L ${margin.left} 0 L ${margin.left} ${margin.top + height} L ${margin.left - margin.bottom} ${
+      margin.top + height + margin.bottom
+    } L 0 ${margin.top + height + margin.bottom} Z`;
+    svgLeft.append("path").attr("d", leftPath).attr("fill", "var(--color-bg-body)").style("pointer-events", "auto");
 
-    const leftG = svgLeft
-      .append("g")
-      .attr("transform", `translate(${margin.left},${margin.top})`)
-      .style("pointer-events", "auto");
-      
-    leftG.call(d3.axisLeft(y).ticks(10).tickFormat((d) => d + "%"))
+    const leftG = svgLeft.append("g").attr("transform", `translate(${margin.left},${margin.top})`).style("pointer-events", "auto");
+
+    leftG
+      .call(
+        d3
+          .axisLeft(y)
+          .ticks(10)
+          .tickFormat((d) => d + "%"),
+      )
       .selectAll("text")
       .style("fill", "var(--color-text-primary)")
       .style("font-size", "12px");
-      
+
     leftG.selectAll(".domain").remove();
     leftG.selectAll(".tick line").remove();
 
     // Left Y-Axis Label
-    leftG.append("text")
+    leftG
+      .append("text")
       .attr("transform", "rotate(-90)")
       .attr("y", 0 - 60 + 5)
-      .attr("x", 0 - (height / 2))
+      .attr("x", 0 - height / 2)
       .attr("dy", "1em")
       .style("text-anchor", "middle")
       .style("fill", "var(--color-text-secondary)")
@@ -238,7 +208,11 @@ export class QuestionsCompletionComponent
       .text(this.translateService.instant("PERCENT-COMMITS"));
 
     // Gridlines
-    const yAxisGrid = d3.axisLeft(y).tickSize(-width).tickFormat(() => "").ticks(10);
+    const yAxisGrid = d3
+      .axisLeft(y)
+      .tickSize(-width)
+      .tickFormat(() => "")
+      .ticks(10);
     this.svg
       .append("g")
       .attr("class", "grid")
@@ -264,7 +238,7 @@ export class QuestionsCompletionComponent
       .style("stroke-dasharray", "5,5");
 
     // Draw Bars
-    const visibleColors = colors.filter(c => !this.hiddenCategories.has(c.label));
+    const visibleColors = colors.filter((c) => !this.hiddenCategories.has(c.label));
 
     const groups = this.svg
       .selectAll("g.layer")
@@ -294,30 +268,30 @@ export class QuestionsCompletionComponent
         // Find which key this data point belongs to
         const layerData = d3.select(event.currentTarget.parentNode).datum() as any;
         const key = layerData.key;
-        const colorObj = colors.find(c => c.label === key);
+        const colorObj = colors.find((c) => c.label === key);
         const dataObj = d.data[key + "_data"];
-        
+
         if (dataObj) {
-          const colorObj = this.commitColors.find(c => c.label === key);
+          const colorObj = this.commitColors.find((c) => c.label === key);
           const tooltipData = {
             question: d.data.question,
             category: key,
             categoryKey: colorObj ? colorObj.labelKey : key,
             count: dataObj.count,
             percentage: d.data[key],
-            students: dataObj.students.map((s) => Utils.truncateMiddle(s.name, 25)),
+            students: dataObj.students.map((s) => {
+              const repo = this.dataService.repositories?.find((r) => r.name === s.name || (s.url && r.url === s.url));
+              const displayName = repo
+                ? this.anonymizationService.getDisplayName(repo)
+                : this.anonymizationService.getAnonymizedName(s.name);
+              return Utils.truncateMiddle(displayName, 25);
+            }),
           };
 
           if (!this.tooltipService.isShowing()) {
-            this.tooltipService.showAtPosition(
-              this.d3TooltipTemplate,
-              event.clientX,
-              event.clientY,
-              "right",
-              undefined,
-              true,
-              { tooltipData }
-            );
+            this.tooltipService.showAtPosition(this.d3TooltipTemplate, event.clientX, event.clientY, "right", undefined, true, {
+              tooltipData,
+            });
           } else {
             this.tooltipService.moveTooltip(event.clientX, event.clientY, "right");
           }
@@ -327,7 +301,7 @@ export class QuestionsCompletionComponent
         d3.select(event.currentTarget).style("opacity", 1);
         this.tooltipService.hide();
       });
-      
+
     // Add text labels inside bars if large enough
     groups
       .selectAll("text.bar-label")
@@ -339,7 +313,7 @@ export class QuestionsCompletionComponent
       .attr("y", (d) => y(d[1]) + (y(d[0]) - y(d[1])) / 2)
       .attr("dy", ".35em")
       .attr("text-anchor", "middle")
-      .style("fill", function() {
+      .style("fill", function () {
         const layerData = d3.select(this.parentNode).datum() as any;
         if (layerData.key === "Not finished") {
           return "var(--color-text-primary)";
@@ -349,7 +323,7 @@ export class QuestionsCompletionComponent
       .style("font-size", "11px")
       .style("font-weight", "bold")
       .style("pointer-events", "none")
-      .text(function(d) {
+      .text(function (d) {
         const percentage = d[1] - d[0];
         if (percentage > 5) {
           // Find the actual count
@@ -384,7 +358,7 @@ export class QuestionsCompletionComponent
         this.dataService.repositories,
         this.dataService.reviews,
         this.dataService.corrections,
-        this.dataService.questions
+        this.dataService.questions,
       );
       this.loading = false;
     });
@@ -400,7 +374,7 @@ export class QuestionsCompletionComponent
             .map((v) => v.commits)
             .filter(Boolean)
             .reduce((a, b) => a.concat(b), []),
-          (v) => v.commitDate
+          (v) => v.commitDate,
         );
 
         this.min = interval[0].getTime();
@@ -410,10 +384,7 @@ export class QuestionsCompletionComponent
   }
 
   getAdjustedMaxTimestamp() {
-    return (
-      Math.ceil((this.max - this.min) / this.slider_step) * this.slider_step +
-      this.min
-    );
+    return Math.ceil((this.max - this.min) / this.slider_step) * this.slider_step + this.min;
   }
 
   pressedShortcut: string = null;
diff --git a/src/app/components/graphs/students/students.component.html b/src/app/components/graphs/students/students.component.html
index 66832b8a..165df9e2 100644
--- a/src/app/components/graphs/students/students.component.html
+++ b/src/app/components/graphs/students/students.component.html
@@ -36,14 +36,8 @@
 
     <!-- Reload Button -->
     <button class="btn-outline-ghost anim-spin-hover" (click)="loadGraph(dataService.startDate, dataService.endDate)" [disabled]="!dataService.repositories?.length || loading" [appTooltip]="{ text: ('OVERVIEW-GRAPH.RELOAD-TOOLTIP' | translate), shortcut: ['R'] }">
-      <div *ngIf="loading" class="d-flex">
-        <svg class="fa-spin" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"></path>
-          <path d="M21 3v5h-5"></path>
-        </svg>
-      </div>
-      <div *ngIf="!loading" class="d-flex">
-        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <div class="d-flex">
+        <svg [class.spinning]="loading" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
           <path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"></path>
           <path d="M21 3v5h-5"></path>
         </svg>
@@ -137,3 +131,27 @@ <h6 class="dropdown-header px-0 mb-2" style="font-weight: 600;">{{ "OVERVIEW-GRA
 </ng-template>
 
 <ng-template #dateTooltip>{{ 'DATE' | translate }}</ng-template>
+
+<ng-template #repoTooltipTemplate>
+  <div id="repository_hover">
+    <div class="repo-name">{{ hovered_repository?.name }}</div>
+    <div class="tooltip-helpers mt-2 text-right d-flex align-items-center justify-content-end" *ngIf="hovered_repository?.url && !anonymizationService.isAnonymous">
+      <div class="tooltip-helper-item d-flex align-items-center">
+        <span>{{ 'OVERVIEW-GRAPH.OPEN-REPO' | translate }}</span>
+        <ng-container *ngTemplateOutlet="mouseLeftClickIcon"></ng-container>
+      </div>
+    </div>
+  </div>
+</ng-template>
+
+<ng-template #mouseLeftClickIcon>
+  <span class="shortcut-key mouse-keycap d-flex align-items-center justify-content-center">
+    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <rect x="5" y="2" width="14" height="20" rx="7" ry="7"></rect>
+      <path d="M5 9h14"></path>
+      <path d="M12 2v7"></path>
+      <path d="M5 9V9C5 5.134 8.134 2 12 2V9H5Z" fill="currentColor"></path>
+    </svg>
+  </span>
+</ng-template>
+
diff --git a/src/app/components/graphs/students/students.component.scss b/src/app/components/graphs/students/students.component.scss
index 41ae79fe..5831fa8b 100644
--- a/src/app/components/graphs/students/students.component.scss
+++ b/src/app/components/graphs/students/students.component.scss
@@ -61,3 +61,60 @@
     }
   }
 }
+
+#repository_hover {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  user-select: none;
+  width: max-content;
+  min-width: max-content;
+  max-width: min(420px, calc(100vw - 32px));
+
+  .repo-name {
+    font-weight: 600;
+    color: var(--color-text-primary);
+    font-size: 0.9rem;
+    white-space: normal;
+    word-break: break-word;
+  }
+
+  .tooltip-helpers {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 0.5rem 0.75rem;
+    font-size: 0.75rem;
+    color: var(--color-text-muted);
+    white-space: nowrap;
+    width: 100%;
+    min-width: max-content;
+    flex-wrap: wrap;
+
+    > span {
+      white-space: nowrap;
+      flex-shrink: 0;
+    }
+  }
+
+  .tooltip-helper-item {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+}
+
+text.repo_name {
+  cursor: pointer;
+  transition: fill var(--transition-fast);
+
+  &:hover {
+    fill: var(--color-primary);
+  }
+
+  &:active {
+    opacity: 0.8;
+  }
+}
diff --git a/src/app/components/graphs/students/students.component.ts b/src/app/components/graphs/students/students.component.ts
index 2f703a89..4301a7e8 100644
--- a/src/app/components/graphs/students/students.component.ts
+++ b/src/app/components/graphs/students/students.component.ts
@@ -1,4 +1,4 @@
-import { Component, ElementRef, HostListener, OnDestroy, OnInit, TemplateRef, ViewChild, ViewEncapsulation } from "@angular/core";
+import { Component, ElementRef, HostListener, NgZone, OnDestroy, OnInit, TemplateRef, ViewChild, ViewEncapsulation } from "@angular/core";
 import { CommitColor } from "@models/Commit.model";
 import { TranslateService } from "@ngx-translate/core";
 import { AssignmentsService } from "@services/assignments.service";
@@ -7,7 +7,9 @@ import { DataService } from "@services/data.service";
 import { LoaderService } from "@services/loader.service";
 import { TooltipService } from "@services/tooltip.service";
 import { ThemeService } from "@services/theme.service";
+import { AnonymizationService } from "@services/anonymization.service";
 import { Subscription } from "rxjs";
+import { skip } from "rxjs/operators";
 import { BaseGraphComponent } from "../base-graph.component";
 import { Utils } from "../../../services/utils";
 import { OsUtils } from "@utils/os.utils";
@@ -24,6 +26,7 @@ export class StudentsComponent extends BaseGraphComponent implements OnInit, OnD
   @ViewChild("leftAxisContainer", { static: true }) leftAxisContainer: ElementRef;
   @ViewChild("rightAxisContainer", { static: true }) rightAxisContainer: ElementRef;
   @ViewChild("d3TooltipTemplate") d3TooltipTemplate!: TemplateRef<any>;
+  @ViewChild("repoTooltipTemplate") repoTooltipTemplate!: TemplateRef<any>;
 
   readonly slider_step = Utils.SLIDER_STEP;
   assignmentsModified$: Subscription;
@@ -37,6 +40,8 @@ export class StudentsComponent extends BaseGraphComponent implements OnInit, OnD
   commitColors = [CommitColor.INTERMEDIATE, CommitColor.BEFORE, CommitColor.BETWEEN, CommitColor.AFTER];
   hiddenCategories = new Set<string>();
   showProgressionLine = true;
+  pressedShortcut: string = null;
+  hovered_repository: { name: string; url: string } | null = null;
 
   private svg: any;
   private resizeObserver: any;
@@ -49,16 +54,36 @@ export class StudentsComponent extends BaseGraphComponent implements OnInit, OnD
     protected assignmentsService: AssignmentsService,
     private tooltipService: TooltipService,
     public themeService: ThemeService,
+    public anonymizationService: AnonymizationService,
+    private ngZone: NgZone,
   ) {
     super(loaderService, assignmentsService, dataService);
   }
 
+  @HostListener("document:keydown", ["$event"])
+  handleGlobalShortcuts(event: KeyboardEvent) {
+    if (OsUtils.isTypingInInput(event)) {
+      return;
+    }
+
+    const key = event.key.toLowerCase();
+
+    if (key === "r") {
+      event.preventDefault();
+      this.loadGraph(this.dataService.startDate, this.dataService.endDate);
+      this.triggerShortcut("r");
+    }
+  }
+
   ngOnInit() {
     setTimeout(() => {
       this.assignmentsModified$ = this.subscribeAssignmentModified();
       this.translateService.onLangChange.subscribe(() => {
         this.loadGraphDataAndRefresh();
       });
+      this.anonymizationService.isAnonymous$.pipe(skip(1)).subscribe(() => {
+        this.loadGraphDataAndRefresh();
+      });
 
       if (this.dataService.repoToLoad) {
         this.loadGraph(this.dataService.startDate, this.dataService.endDate);
@@ -110,8 +135,11 @@ export class StudentsComponent extends BaseGraphComponent implements OnInit, OnD
     // Convert dict back to an ordered array according to labels
     this.chartData = labels.map((label) => {
       let studentData = dict[label];
+      let repo = this.dataService.repositories?.find((r) => r.name === label);
+      let displayName = repo ? this.anonymizationService.getDisplayName(repo) : label;
       let result: any = {
-        student: studentData.name,
+        student: displayName,
+        rawName: label,
         commitsCount: studentData.commitsCount,
         lastQuestionDone: studentData.lastQuestionDone,
         url: studentData.url,
@@ -189,17 +217,63 @@ export class StudentsComponent extends BaseGraphComponent implements OnInit, OnD
       .padding(0);
 
     // Axes
-    this.svg
-      .append("g")
-      .attr("transform", `translate(0,${height})`)
-      .call(d3.axisBottom(x))
+    const xAxis = this.svg.append("g").attr("transform", `translate(0,${height})`).call(d3.axisBottom(x));
+
+    xAxis
+      .selectAll(".tick")
       .selectAll("text")
+      .call((g) => g.classed("repo_name", true))
       .style("text-anchor", "end")
       .attr("dx", "-.8em")
       .attr("dy", ".15em")
       .attr("transform", "rotate(-45)")
-      .style("fill", "var(--color-text-primary)")
-      .style("font-size", "11px");
+      .style("font-size", "11px")
+      .each(function (this: SVGTextElement) {
+        let textStr = this.textContent || "";
+        this.textContent = Utils.truncateMiddle(textStr, Utils.OVERVIEW_NAME_LENGTH_LIMIT);
+      })
+      .on("click", (event: MouseEvent, d: any) => {
+        event.stopPropagation();
+        if (this.anonymizationService.isAnonymous) {
+          return;
+        }
+        const matchedItem = this.chartData.find((cd) => cd.student === d);
+        const repo = this.dataService.repositories.find(
+          (r) => r.name === d || (matchedItem && (r.name === matchedItem.rawName || r.url === matchedItem.url)),
+        );
+        if (repo?.url) {
+          window.open(repo.url, "_blank");
+        }
+      })
+      .on("mouseenter", (event: MouseEvent, d: any) => {
+        event.stopPropagation();
+        const matchedItem = this.chartData.find((cd) => cd.student === d);
+        const repo = this.dataService.repositories.find(
+          (r) => r.name === d || (matchedItem && (r.name === matchedItem.rawName || r.url === matchedItem.url)),
+        );
+        if (repo || matchedItem) {
+          this.ngZone.run(() => {
+            this.hovered_repository = {
+              name: d,
+              url: this.anonymizationService.isAnonymous ? null : repo?.url || matchedItem?.url,
+            };
+            this.tooltipService.showAtPosition(this.repoTooltipTemplate, event.clientX, event.clientY, "right", undefined, true);
+          });
+        }
+      })
+      .on("mousemove", (event: MouseEvent) => {
+        event.stopPropagation();
+        if (this.tooltipService.isShowing()) {
+          this.tooltipService.moveTooltip(event.clientX, event.clientY, "right");
+        }
+      })
+      .on("mouseleave", (event: MouseEvent) => {
+        event.stopPropagation();
+        this.ngZone.run(() => {
+          this.hovered_repository = undefined;
+          this.tooltipService.hide();
+        });
+      });
 
     const svgLeft = d3
       .select(leftElement)
@@ -485,30 +559,6 @@ export class StudentsComponent extends BaseGraphComponent implements OnInit, OnD
     return Math.ceil((this.max - this.min) / this.slider_step) * this.slider_step + this.min;
   }
 
-  pressedShortcut: string = null;
-
-  @HostListener("document:keydown", ["$event"])
-  handleGlobalShortcuts(event: KeyboardEvent) {
-    if (OsUtils.isTypingInInput(event)) {
-      return;
-    }
-
-    const key = event.key.toLowerCase();
-
-    if (key === "r") {
-      event.preventDefault();
-      this.loadGraph(this.dataService.startDate, this.dataService.endDate);
-      this.triggerShortcut("r");
-    }
-  }
-
-  private triggerShortcut(key: string) {
-    this.pressedShortcut = key;
-    setTimeout(() => {
-      if (this.pressedShortcut === key) this.pressedShortcut = null;
-    }, 150);
-  }
-
   toggleCategory(label: string) {
     if (this.hiddenCategories.has(label)) {
       this.hiddenCategories.delete(label);
@@ -524,4 +574,11 @@ export class StudentsComponent extends BaseGraphComponent implements OnInit, OnD
     this.showProgressionLine = !this.showProgressionLine;
     this.drawGraph();
   }
+
+  private triggerShortcut(key: string) {
+    this.pressedShortcut = key;
+    setTimeout(() => {
+      if (this.pressedShortcut === key) this.pressedShortcut = null;
+    }, 150);
+  }
 }
diff --git a/src/app/components/home/assignment-chooser/assignment-chooser.component.html b/src/app/components/home/assignment-chooser/assignment-chooser.component.html
index 07eada2a..7c187fb0 100644
--- a/src/app/components/home/assignment-chooser/assignment-chooser.component.html
+++ b/src/app/components/home/assignment-chooser/assignment-chooser.component.html
@@ -2,16 +2,23 @@
   <!-- Filter Group -->
   <div class="mb-3 d-flex justify-content-between align-items-center">
     <div class="filter-group" [attr.data-active]="filterType">
-      <div class="filter-indicator"></div>
-      <button class="filter-btn" [class.active]="filterType === 'all'" (click)="setFilter('all')">{{ 'HOME.FILTER.ALL' |
-        translate }}</button>
-      <button class="filter-btn" [class.active]="filterType === 'github'" (click)="setFilter('github')">{{
-        'HOME.FILTER.GITHUB' | translate }}</button>
-      <button class="filter-btn" [class.active]="filterType === 'gitlab'" (click)="setFilter('gitlab')">{{
-        'HOME.FILTER.GITLAB' | translate }}</button>
+      <div
+        class="filter-indicator"
+        [style.transform]="'translateX(' + indicatorLeft + 'px)'"
+        [style.width.px]="indicatorWidth"
+      ></div>
+      <button
+        *ngFor="let pill of providerFilterPills; trackBy: trackByPillKey"
+        #pillBtn
+        type="button"
+        class="filter-btn"
+        [class.active]="filterType === pill.key"
+        [class.filter-pill-custom]="pill.isCustom"
+        (click)="setFilter(pill.key)"
+      >
+        {{ pill.isCustom ? pill.label : (pill.label | translate) }}
+      </button>
     </div>
-
-
   </div>
 
   <!-- Top bar -->
@@ -22,7 +29,7 @@
           }}:</span>
 
         <div ngbDropdown class="dropdown d-inline-block">
-          <button class="btn-outline-ghost" ngbDropdownToggle>
+          <button type="button" class="btn-outline-ghost" ngbDropdownToggle>
             <span>{{ getSortLabel(sortField) | translate }}</span>
             <svg class="dropdown-chevron ml-2" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
               stroke-linecap="round" stroke-linejoin="round">
@@ -51,11 +58,10 @@
           </div>
         </div>
 
-        <button class="btn btn-sm btn-outline-ghost ml-2" (click)="toggleSortDirection()"
-          (mouseenter)="onSortMouseEnter()" (mouseleave)="onSortMouseLeave()"
+        <button type="button" class="btn btn-sm btn-outline-ghost sort-direction-btn ml-2" (click)="toggleSortDirection()"
           [appTooltip]="('ASSIGNMENT-CHOOSER.SORT-DIRECTION' | translate)">
           <svg class="sort-direction-svg" [class.is-asc]="sortDirection === 'asc'"
-            [class.show-hover]="isSortHovered && !sortWasClicked" width="16" height="16" viewBox="0 0 24 24" fill="none"
+            width="16" height="16" viewBox="0 0 24 24" fill="none"
             stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
             <g class="sort-bars">
               <line x1="4" y1="6" x2="14" y2="6"></line>
@@ -69,22 +75,52 @@
           </svg>
         </button>
       </div>
-      <div class="divider-vertical mx-4"></div>
+      <div class="divider-vertical mx-2"></div>
 
       <!-- Search and Filters Section -->
       <div class="search-filters-group d-flex align-items-center">
-        <div class="search-input-wrapper position-relative mr-3" style="width: 250px;">
-          <svg class="search-icon position-absolute" width="16" height="16" viewBox="0 0 24 24" fill="none"
-            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <circle cx="11" cy="11" r="8"></circle>
-            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
-          </svg>
-          <input type="text" class="form-control modern-search-input w-100"
-            [placeholder]="'HOME.SEARCH-PLACEHOLDER' | translate" [(ngModel)]="searchQuery">
+        <div class="search-expandable-container"
+          [class.expanded]="isSearchExpanded"
+          [class.focused]="searchFocused"
+          [class.has-query]="searchQuery && searchQuery.trim().length > 0"
+          [appTooltip]="!isSearchExpanded ? ('HOME.SEARCH-PLACEHOLDER' | translate) : null"
+          [attr.tabindex]="isSearchExpanded ? -1 : 0"
+          role="search"
+          (click)="onSearchContainerClick($event)"
+          (keydown.enter)="onSearchContainerEnter($event)"
+          (keydown.space)="onSearchContainerEnter($event)">
+          <span class="search-icon-wrapper" aria-hidden="true">
+            <svg class="search-icon" width="16" height="16" viewBox="0 0 24 24" fill="none"
+              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <circle cx="11" cy="11" r="8"></circle>
+              <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+            </svg>
+          </span>
+          <input #searchInput type="text" class="search-input"
+            [placeholder]="'HOME.SEARCH-PLACEHOLDER' | translate"
+            [(ngModel)]="searchQuery"
+            [attr.aria-label]="'HOME.SEARCH-PLACEHOLDER' | translate"
+            [tabindex]="isSearchExpanded ? 0 : -1"
+            (focus)="onSearchFocus()"
+            (blur)="onSearchBlur()"
+            (keydown.escape)="onSearchEscape($event)">
+          <button *ngIf="searchQuery && searchQuery.trim().length > 0"
+            type="button"
+            class="clear-search-btn"
+            (mousedown)="$event.preventDefault()"
+            (click)="clearSearch(true); $event.stopPropagation()"
+            [appTooltip]="'HOME.CLEAR-SEARCH' | translate"
+            [attr.aria-label]="'HOME.CLEAR-SEARCH' | translate">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
+              stroke-linecap="round" stroke-linejoin="round">
+              <line x1="18" y1="6" x2="6" y2="18"></line>
+              <line x1="6" y1="6" x2="18" y2="18"></line>
+            </svg>
+          </button>
         </div>
 
         <div ngbDropdown class="dropdown d-inline-block filter-dropdown-container" [autoClose]="'outside'">
-          <button class="btn-outline-ghost" ngbDropdownToggle [appTooltip]="'HOME.FILTERS' | translate">
+          <button class="btn-outline-ghost" [class.has-active-filters]="getActiveFiltersCount() > 0" ngbDropdownToggle [appTooltip]="'HOME.FILTERS' | translate">
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
               stroke-linecap="round" stroke-linejoin="round">
               <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon>
@@ -160,7 +196,7 @@ <h6 class="filter-section-title">{{ 'HOME.FILTER.COURSE' | translate }}</h6>
                   </button>
                   <div class="dropdown-divider" *ngIf="availableCourses.length > 0"></div>
                   <button class="dropdown-item text-truncate" *ngFor="let course of availableCourses"
-                    [class.active]="advancedFilters.course === course" (click)="advancedFilters.course = course; savePreferences()" [title]="course">
+                    [class.active]="advancedFilters.course === course" (click)="advancedFilters.course = course; savePreferences()" [appTooltip]="course" [onlyIfTruncated]="true">
                     {{ course }}
                   </button>
                 </div>
@@ -187,7 +223,7 @@ <h6 class="filter-section-title">{{ 'HOME.FILTER.PROGRAM' | translate }}</h6>
                   </button>
                   <div class="dropdown-divider" *ngIf="availablePrograms.length > 0"></div>
                   <button class="dropdown-item text-truncate" *ngFor="let program of availablePrograms"
-                    [class.active]="advancedFilters.program === program" (click)="advancedFilters.program = program; savePreferences()" [title]="program">
+                    [class.active]="advancedFilters.program === program" (click)="advancedFilters.program = program; savePreferences()" [appTooltip]="program" [onlyIfTruncated]="true">
                     {{ program }}
                   </button>
                 </div>
@@ -214,7 +250,7 @@ <h6 class="filter-section-title">{{ 'HOME.FILTER.YEAR' | translate }}</h6>
                   </button>
                   <div class="dropdown-divider" *ngIf="availableYears.length > 0"></div>
                   <button class="dropdown-item text-truncate" *ngFor="let year of availableYears"
-                    [class.active]="advancedFilters.year === year" (click)="advancedFilters.year = year; savePreferences()" [title]="year">
+                    [class.active]="advancedFilters.year === year" (click)="advancedFilters.year = year; savePreferences()" [appTooltip]="year" [onlyIfTruncated]="true">
                     {{ year }}
                   </button>
                 </div>
@@ -233,16 +269,17 @@ <h6 class="filter-section-title">{{ 'HOME.FILTER.YEAR' | translate }}</h6>
     </div> <!-- Closes left-controls -->
 
     <div class="actions-group d-flex" style="gap: 0.5rem;">
-      <!-- Creation button container: filter-reactive or prototype variants A/B/C -->
+      <!-- Creation button container: filter-reactive or split dropdown -->
       <div class="creation-interactive-wrapper position-relative">
 
-        <!-- Case 1: Filter is specifically set to GitHub -->
-        <div *ngIf="filterType === 'github'" class="expandable-wrapper provider-filter-wrapper">
+        <!-- Case 1: Filter is specifically set to a provider or instance -->
+        <div *ngIf="filterType !== 'all' && selectedFilterPill as pill" class="expandable-wrapper provider-filter-wrapper">
           <button id="tour-create-assignment-btn" type="button"
-            class="btn btn-provider-github action-btn square-btn expandable-btn shadow-sm"
-            (click)="createAssignment('github', $event)"
-            [disabled]="!isGithubConnected"
-            [appTooltip]="(!isGithubConnected ? 'HOME.MUST-LOGIN-GITHUB' : 'HOME.CREATE-ASSIGNMENT-GITHUB') | translate">
+            class="btn action-btn square-btn expandable-btn shadow-sm"
+            [ngClass]="'btn-provider-' + pill.provider"
+            (click)="createAssignment(pill.provider, pill.instanceHost, pill.instanceName, $event)"
+            [disabled]="!accountsService.hasAccountForHost(pill.provider, pill.instanceHost)"
+            [appTooltip]="(!accountsService.hasAccountForHost(pill.provider, pill.instanceHost) ? (pill.isCustom ? ('HOME.MUST-LOGIN-ASSIGNMENT-GITLAB-CUSTOM' | translate:{host: pill.instanceName || pill.instanceHost}) : (pill.provider === 'gitlab' ? ('HOME.MUST-LOGIN-GITLAB' | translate) : ('HOME.MUST-LOGIN-GITHUB' | translate))) : ('HOME.CREATE-ASSIGNMENT' | translate))">
             <span class="text">{{ 'HOME.CREATE-ASSIGNMENT' | translate }}</span>
             <span class="icon">
               <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
@@ -254,42 +291,32 @@ <h6 class="filter-section-title">{{ 'HOME.FILTER.YEAR' | translate }}</h6>
           </button>
         </div>
 
-        <!-- Case 2: Filter is specifically set to GitLab -->
-        <div *ngIf="filterType === 'gitlab'" class="expandable-wrapper provider-filter-wrapper">
-          <button id="tour-create-assignment-btn" type="button"
-            class="btn btn-provider-gitlab action-btn square-btn expandable-btn shadow-sm"
-            (click)="createAssignment('gitlab', $event)"
-            [disabled]="!isGitlabConnected"
-            [appTooltip]="(!isGitlabConnected ? 'HOME.MUST-LOGIN-GITLAB' : 'HOME.CREATE-ASSIGNMENT-GITLAB') | translate">
-            <span class="text">{{ 'HOME.CREATE-ASSIGNMENT' | translate }}</span>
-            <span class="icon">
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
-                stroke-linecap="round" stroke-linejoin="round">
-                <line x1="12" y1="5" x2="12" y2="19"></line>
-                <line x1="5" y1="12" x2="19" y2="12"></line>
-              </svg>
-            </span>
-          </button>
-        </div>
-
-        <!-- Case 3: Filter is 'all' -> Split button with provider selector -->
+        <!-- Case 2: Filter is 'all' -> Split button with provider selector -->
         <ng-container *ngIf="filterType === 'all'">
           <div class="split-provider-wrapper position-relative">
             <div class="split-pill-container shadow-sm" [ngClass]="'provider-' + lastUsedProvider" [class.is-open]="isProviderDropdownOpen" [class.disabled]="!canCreateAny">
               <button id="tour-create-assignment-btn" type="button" class="split-main-btn"
-                (click)="createAssignment(lastUsedProvider, $event)"
-                [disabled]="!accountsService.hasAccount(lastUsedProvider)"
-                [appTooltip]="(!accountsService.hasAccount(lastUsedProvider) ? (lastUsedProvider === 'gitlab' ? 'HOME.MUST-LOGIN-GITLAB' : 'HOME.MUST-LOGIN-GITHUB') : '') | translate">
+                (click)="createAssignment(lastUsedProvider, lastUsedHost, lastUsedInstanceName, $event)"
+                [disabled]="!canCreateLastUsed"
+                [appTooltip]="createButtonTooltip">
                 <span class="split-icon">
-                  <svg *ngIf="lastUsedProvider === 'gitlab'" class="brand-svg" viewBox="0 0 512 512" width="14" height="14" fill="currentColor">
+                  <span *ngIf="lastUsedProvider === 'gitlab' && isCustomLastUsed" class="custom-gitlab-icon-wrap">
+                    <svg class="brand-svg" viewBox="0 0 512 512" width="14" height="14" fill="currentColor">
+                      <path d="M105.2 24.9c-3.1-8.9-15.7-8.9-18.9 0L29.8 199.7h132c-.1 0-56.6-174.8-56.6-174.8zM.9 287.7c-2.6 8 .3 16.9 7.1 22l247.9 184-226.2-294zm160.8-88l94.3 294 94.3-294zm349.4 88l-28.8-88-226.3 294 247.9-184c6.9-5.1 9.7-14 7.2-22zM425.7 24.9c-3.1-8.9-15.7-8.9-18.9 0l-56.6 174.8h132z"/>
+                    </svg>
+                    <svg viewBox="0 0 512 512" class="sub-server-icon" fill="currentColor">
+                      <path d="M480 160H32c-17.673 0-32-14.327-32-32V64c0-17.673 14.327-32 32-32h448c17.673 0 32 14.327 32 32v64c0 17.673-14.327 32-32 32zm-48-88c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-64 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm112 248H32c-17.673 0-32-14.327-32-32v-64c0-17.673 14.327-32 32-32h448c17.673 0 32 14.327 32 32v64c0 17.673-14.327 32-32 32zm-48-88c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-64 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm112 248H32c-17.673 0-32-14.327-32-32v-64c0-17.673 14.327-32 32-32h448c17.673 0 32 14.327 32 32v64c0 17.673-14.327 32-32 32zm-48-88c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-64 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24z"/>
+                    </svg>
+                  </span>
+                  <svg *ngIf="lastUsedProvider === 'gitlab' && !isCustomLastUsed" class="brand-svg" viewBox="0 0 512 512" width="14" height="14" fill="currentColor">
                     <path d="M105.2 24.9c-3.1-8.9-15.7-8.9-18.9 0L29.8 199.7h132c-.1 0-56.6-174.8-56.6-174.8zM.9 287.7c-2.6 8 .3 16.9 7.1 22l247.9 184-226.2-294zm160.8-88l94.3 294 94.3-294zm349.4 88l-28.8-88-226.3 294 247.9-184c6.9-5.1 9.7-14 7.2-22zM425.7 24.9c-3.1-8.9-15.7-8.9-18.9 0l-56.6 174.8h132z"/>
                   </svg>
-                  <svg *ngIf="lastUsedProvider !== 'gitlab'" class="brand-svg" viewBox="0 0 496 512" width="14" height="14" fill="currentColor">
+                  <svg *ngIf="lastUsedProvider === 'github'" class="brand-svg" viewBox="0 0 496 512" width="14" height="14" fill="currentColor">
                     <path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/>
                   </svg>
                 </span>
                 <span class="split-text">
-                  {{ (lastUsedProvider === 'gitlab' ? 'HOME.CREATE-ASSIGNMENT-GITLAB' : 'HOME.CREATE-ASSIGNMENT-GITHUB') | translate }}
+                  {{ createButtonLabel }}
                 </span>
               </button>
               <div class="split-divider"></div>
@@ -311,29 +338,48 @@ <h6 class="filter-section-title">{{ 'HOME.FILTER.YEAR' | translate }}</h6>
                 [disabled]="!isGithubConnected"
                 [appTooltip]="(!isGithubConnected ? ('HOME.MUST-LOGIN-GITHUB' | translate) : '')"
                 placement="left"
-                (click)="createAssignment('github', $event)">
+                (click)="createAssignment('github', 'github.com', undefined, $event)">
                 <svg class="brand-svg flex-shrink-0" viewBox="0 0 496 512" width="14" height="14" fill="currentColor">
                   <path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/>
                 </svg>
                 <span class="provider-name">GitHub</span>
-                <svg *ngIf="lastUsedProvider === 'github'" class="active-check text-primary flex-shrink-0" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                <svg *ngIf="lastUsedProvider === 'github'" class="active-check text-primary flex-shrink-0 ml-auto" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                   <polyline points="20 6 9 17 4 12"></polyline>
                 </svg>
               </button>
               <button type="button" class="dropdown-item"
-                [class.active]="lastUsedProvider === 'gitlab'"
+                [class.active]="lastUsedProvider === 'gitlab' && (!lastUsedHost || lastUsedHost === 'gitlab.com')"
                 [disabled]="!isGitlabConnected"
                 [appTooltip]="(!isGitlabConnected ? ('HOME.MUST-LOGIN-GITLAB' | translate) : '')"
                 placement="left"
-                (click)="createAssignment('gitlab', $event)">
+                (click)="createAssignment('gitlab', 'gitlab.com', undefined, $event)">
                 <svg class="brand-svg flex-shrink-0" viewBox="0 0 512 512" width="14" height="14" fill="currentColor">
                   <path d="M105.2 24.9c-3.1-8.9-15.7-8.9-18.9 0L29.8 199.7h132c-.1 0-56.6-174.8-56.6-174.8zM.9 287.7c-2.6 8 .3 16.9 7.1 22l247.9 184-226.2-294zm160.8-88l94.3 294 94.3-294zm349.4 88l-28.8-88-226.3 294 247.9-184c6.9-5.1 9.7-14 7.2-22zM425.7 24.9c-3.1-8.9-15.7-8.9-18.9 0l-56.6 174.8h132z"/>
                 </svg>
-                <span class="provider-name">GitLab</span>
-                <svg *ngIf="lastUsedProvider === 'gitlab'" class="active-check text-primary flex-shrink-0" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                <span class="provider-name">GitLab (gitlab.com)</span>
+                <svg *ngIf="lastUsedProvider === 'gitlab' && (!lastUsedHost || lastUsedHost === 'gitlab.com')" class="active-check text-primary flex-shrink-0 ml-auto" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                   <polyline points="20 6 9 17 4 12"></polyline>
                 </svg>
               </button>
+              <ng-container *ngFor="let acc of connectedCustomGitlabAccounts">
+                <button type="button" class="dropdown-item"
+                  [class.active]="lastUsedProvider === 'gitlab' && lastUsedHost === acc.instanceHost"
+                  placement="left"
+                  (click)="createAssignment('gitlab', acc.instanceHost, acc.instanceName, $event)">
+                  <span class="custom-gitlab-dropdown-icon">
+                    <svg class="brand-svg" viewBox="0 0 512 512" width="14" height="14" fill="currentColor">
+                      <path d="M105.2 24.9c-3.1-8.9-15.7-8.9-18.9 0L29.8 199.7h132c-.1 0-56.6-174.8-56.6-174.8zM.9 287.7c-2.6 8 .3 16.9 7.1 22l247.9 184-226.2-294zm160.8-88l94.3 294 94.3-294zm349.4 88l-28.8-88-226.3 294 247.9-184c6.9-5.1 9.7-14 7.2-22zM425.7 24.9c-3.1-8.9-15.7-8.9-18.9 0l-56.6 174.8h132z"/>
+                    </svg>
+                    <svg viewBox="0 0 512 512" class="sub-server-svg" fill="currentColor">
+                      <path d="M480 160H32c-17.673 0-32-14.327-32-32V64c0-17.673 14.327-32 32-32h448c17.673 0 32 14.327 32 32v64c0 17.673-14.327 32-32 32zm-48-88c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-64 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm112 248H32c-17.673 0-32-14.327-32-32v-64c0-17.673 14.327-32 32-32h448c17.673 0 32 14.327 32 32v64c0 17.673-14.327 32-32 32zm-48-88c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-64 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm112 248H32c-17.673 0-32-14.327-32-32v-64c0-17.673 14.327-32 32-32h448c17.673 0 32 14.327 32 32v64c0 17.673-14.327 32-32 32zm-48-88c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-64 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24z"/>
+                    </svg>
+                  </span>
+                  <span class="provider-name text-truncate" style="max-width: 140px;">GitLab ({{ acc.instanceName || acc.instanceHost }})</span>
+                  <svg *ngIf="lastUsedProvider === 'gitlab' && lastUsedHost === acc.instanceHost" class="active-check text-primary flex-shrink-0 ml-auto" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                    <polyline points="20 6 9 17 4 12"></polyline>
+                  </svg>
+                </button>
+              </ng-container>
             </div>
           </div>
         </ng-container>
@@ -371,7 +417,9 @@ <h6 class="filter-section-title">{{ 'HOME.FILTER.YEAR' | translate }}</h6>
            'is-editing': editingAssignmentId === assignment.id,
            'is-shrunk': (hoveredAssignment === assignment.id || isSelected(assignment.id)) && editingAssignmentId !== assignment.id,
            'status-preview-dimmed': hoveredStatusPreview && assignment.id !== -1 && assignment.uiStatus !== hoveredStatusPreview
-         }">
+         }"
+         [appTooltip]="!isAssignmentConnected(assignment) && assignment.id !== -1 ? getDisconnectedTooltip(assignment) : null"
+         placement="top">
       <div class="card-content d-flex align-items-center" *ngIf="editingAssignmentId !== assignment.id">
 
         <!-- Selection Zone (Logo / Checkbox) -->
@@ -383,6 +431,11 @@ <h6 class="filter-section-title">{{ 'HOME.FILTER.YEAR' | translate }}</h6>
           <div class="type-indicator-overlay" [ngClass]="assignment.uiType">
             <i class="fab fa-2x"
               [ngClass]="{'fa-github': assignment.uiType === 'github', 'fa-gitlab': assignment.uiType === 'gitlab'}"></i>
+            <span *ngIf="isCustomGitlab(assignment)" class="custom-gitlab-card-badge">
+              <svg viewBox="0 0 512 512" class="card-server-svg" fill="currentColor">
+                <path d="M480 160H32c-17.673 0-32-14.327-32-32V64c0-17.673 14.327-32 32-32h448c17.673 0 32 14.327 32 32v64c0 17.673-14.327 32-32 32zm-48-88c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-64 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm112 248H32c-17.673 0-32-14.327-32-32v-64c0-17.673 14.327-32 32-32h448c17.673 0 32 14.327 32 32v64c0 17.673-14.327 32-32 32zm-48-88c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-64 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm112 248H32c-17.673 0-32-14.327-32-32v-64c0-17.673 14.327-32 32-32h448c17.673 0 32 14.327 32 32v64c0 17.673-14.327 32-32 32zm-48-88c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-64 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24z"/>
+              </svg>
+            </span>
           </div>
 
           <!-- Checkbox -->
@@ -486,18 +539,18 @@ <h6 class="filter-section-title">{{ 'HOME.FILTER.YEAR' | translate }}</h6>
           <button [id]="'tour-access-btn-' + assignment.id" type="button" class="btn btn-icon-action btn-light text-primary"
             (click)="$event.stopPropagation(); selectAssignment(assignment)"
             [disabled]="!isAssignmentConnected(assignment) || assignment.id === -1"
-            [appTooltip]="(!isAssignmentConnected(assignment) ? ('HOME.MUST-LOGIN-ASSIGNMENT-' + (assignment.provider === 'gitlab' ? 'GITLAB' : 'GITHUB')) : 'HOME.SELECT-ASSIGNMENT-TOOLTIP') | translate">
+            [appTooltip]="getAssignmentTooltip(assignment) | translate">
             <i class="far fa-arrow-alt-circle-right"></i>
           </button>
           <button type="button" class="btn btn-icon-action btn-light text-secondary ml-2"
             (click)="$event.stopPropagation(); editAssignment(assignment)" [disabled]="!isAssignmentConnected(assignment)"
-            [appTooltip]="(!isAssignmentConnected(assignment) ? ('HOME.MUST-LOGIN-ASSIGNMENT-' + (assignment.provider === 'gitlab' ? 'GITLAB' : 'GITHUB')) : 'HOME.EDIT-ASSIGNMENT-TOOLTIP') | translate">
+            [appTooltip]="getAssignmentEditTooltip(assignment) | translate">
             <i class="fas fa-cog"></i>
           </button>
           <button type="button" class="btn btn-icon-action btn-light text-danger ml-2"
             (click)="$event.stopPropagation(); deleteAssignment(assignment)"
             [disabled]="!isAssignmentConnected(assignment) || assignment.id === -1"
-            [appTooltip]="(!isAssignmentConnected(assignment) ? ('HOME.MUST-LOGIN-ASSIGNMENT-' + (assignment.provider === 'gitlab' ? 'GITLAB' : 'GITHUB')) : 'HOME.DELETE-ASSIGNMENT-TOOLTIP') | translate">
+            [appTooltip]="getAssignmentDeleteTooltip(assignment) | translate">
             <i class="far fa-trash-alt"></i>
           </button>
         </div>
diff --git a/src/app/components/home/assignment-chooser/assignment-chooser.component.scss b/src/app/components/home/assignment-chooser/assignment-chooser.component.scss
index d2c472c2..e8a9be68 100644
--- a/src/app/components/home/assignment-chooser/assignment-chooser.component.scss
+++ b/src/app/components/home/assignment-chooser/assignment-chooser.component.scss
@@ -6,6 +6,7 @@
 
 .filter-group {
   display: inline-flex;
+  align-items: center;
   background: var(--filter-bg);
   border-radius: 10px;
   padding: 4px;
@@ -21,22 +22,19 @@
     background: var(--filter-indicator);
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
     border-radius: 6px;
-    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
-    z-index: -1;
+    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+    z-index: 0;
+    pointer-events: none;
   }
 
-  &[data-active="all"] .filter-indicator { transform: translateX(0); }
-
-  &[data-active="github"] .filter-indicator { transform: translateX(100px); }
-
-  &[data-active="gitlab"] .filter-indicator { transform: translateX(200px); }
-
   .filter-btn {
+    position: relative;
+    z-index: 1;
     background: transparent !important;
     box-shadow: none !important;
     border: none;
-    width: 100px;
-    padding: 0.5rem 0;
+    min-width: 100px;
+    padding: 0.5rem 0.75rem;
     text-align: center;
     font-size: 0.85rem;
     font-weight: 500;
@@ -44,6 +42,11 @@
     cursor: pointer;
     border-radius: 6px;
     transition: color 0.2s ease;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    white-space: nowrap;
 
     &:hover:not(.active) {
       color: var(--color-text-primary);
@@ -268,6 +271,23 @@
             align-items: center;
             justify-content: center;
             line-height: 1;
+
+            .custom-gitlab-icon-wrap {
+              position: relative;
+              display: inline-flex;
+              align-items: center;
+              justify-content: center;
+
+              .sub-server-icon {
+                position: absolute;
+                bottom: -2px;
+                right: -3px;
+                width: 8px;
+                height: 8px;
+                color: currentColor;
+                opacity: 0.9;
+              }
+            }
           }
 
           .split-text {
@@ -361,6 +381,25 @@
             flex-shrink: 0;
           }
 
+          .custom-gitlab-dropdown-icon {
+            position: relative;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 14px;
+            height: 14px;
+            flex-shrink: 0;
+
+            .sub-server-svg {
+              position: absolute;
+              bottom: -2px;
+              right: -3px;
+              width: 8px;
+              height: 8px;
+              color: var(--color-text-secondary);
+            }
+          }
+
           .provider-name {
             flex: 1;
             white-space: nowrap;
@@ -400,46 +439,192 @@
 
 
 .search-filters-group {
-  .search-input-wrapper {
-    position: relative;
+  display: flex;
+  align-items: center;
+  gap: 6px;
 
-    .search-icon {
+  .search-expandable-container {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+    width: 34px;
+    height: 34px;
+    box-sizing: border-box;
+    border: 1px solid transparent;
+    border-radius: 8px;
+    background-color: transparent;
+    cursor: pointer;
+    overflow: hidden;
+    user-select: none;
+    will-change: width, background-color, border-color, box-shadow;
+    transition: width 380ms cubic-bezier(0.2, 0.8, 0.2, 1),
+                background-color 240ms ease,
+                border-color 240ms ease,
+                box-shadow 240ms ease,
+                transform 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
+
+    .search-icon-wrapper {
       position: absolute;
-      left: 12px;
       top: 50%;
-      transform: translateY(-50%);
-      color: var(--color-text-muted);
+      left: 9px;
       z-index: 5;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 16px;
+      height: 16px;
+      color: var(--color-text-secondary);
       pointer-events: none;
+      transform: translateY(-50%);
+      transition: left 380ms cubic-bezier(0.2, 0.8, 0.2, 1), color 240ms ease;
+
+      .search-icon {
+        width: 16px;
+        height: 16px;
+      }
     }
 
-    .modern-search-input {
-      padding-left: 36px;
-      border-radius: 8px;
-      border: 1px solid var(--color-border);
-      background-color: var(--color-surface);
+    .search-input {
+      width: 100%;
+      height: 100%;
+      padding: 0 8px 0 32px;
+      border: none;
+      outline: none;
+      background: transparent;
       color: var(--color-text-primary);
-      transition: border-color 0.15s ease-out, background-color 0.15s ease-out, box-shadow 0.15s ease-out;
-      font-size: 0.9rem;
+      font-size: 0.85rem;
+      font-weight: 400;
+      pointer-events: none;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      user-select: text;
 
       &::placeholder {
         color: var(--color-text-muted);
-        transition: color 0.2s ease;
+        opacity: 0;
+        transition: opacity 120ms ease;
       }
+    }
 
-      &:focus {
-        box-shadow: none !important;
-        outline: none;
-        border-color: var(--color-border) !important;
+    .clear-search-btn {
+      position: absolute;
+      top: 50%;
+      right: 6px;
+      z-index: 6;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 20px;
+      height: 20px;
+      padding: 0;
+      border: none;
+      border-radius: 50%;
+      background: var(--color-surface-hover);
+      color: var(--color-text-muted);
+      cursor: pointer;
+      transform: translateY(-50%);
+      transition: background-color 150ms ease, color 150ms ease, transform 120ms ease;
+
+      &:hover {
+        background-color: var(--color-hover);
+        color: var(--color-text-primary);
+      }
+
+      &:active {
+        transform: translateY(-50%) scale(0.9);
+      }
+    }
+
+    &.expanded {
+      width: 240px;
+      cursor: default;
+      background-color: var(--color-surface);
+      border-color: var(--color-border);
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+
+      .search-icon-wrapper {
+        left: 10px;
+        color: var(--color-text-muted);
+      }
+
+      .search-input {
+        padding-right: 28px;
+        cursor: text;
+        pointer-events: auto;
 
         &::placeholder {
-          color: transparent;
+          opacity: 1;
+          transition: opacity 240ms ease 120ms;
+        }
+      }
+
+      &.focused {
+        border-color: var(--color-primary);
+        box-shadow: 0 0 0 3px var(--color-primary-bg);
+
+        .search-icon-wrapper {
+          color: var(--color-primary);
         }
       }
     }
+
+    &:not(.expanded):hover {
+      background-color: var(--filter-bg);
+
+      .search-icon-wrapper {
+        color: var(--color-text-primary);
+      }
+    }
+
+    &:not(.expanded):active {
+      transform: scale(0.94);
+    }
+
+    &:not(.expanded):focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 2px var(--color-primary-bg);
+    }
   }
 
   .filter-dropdown-container {
+    .btn-outline-ghost {
+      box-sizing: border-box;
+      height: 34px;
+      min-width: 34px;
+      padding: 0;
+      border-radius: 8px;
+      border: 1px solid transparent;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      transition: background-color 240ms ease,
+                  border-color 240ms ease,
+                  box-shadow 240ms ease,
+                  transform 150ms cubic-bezier(0.2, 0.8, 0.2, 1),
+                  color 240ms ease;
+
+      &:not(.has-active-filters) {
+        width: 34px;
+      }
+
+      &.has-active-filters {
+        width: auto;
+        padding: 0 8px;
+        gap: 6px;
+      }
+
+      &:active {
+        transform: scale(0.94);
+      }
+
+      &:hover:not([aria-expanded="true"]) {
+        background-color: var(--filter-bg);
+        color: var(--color-text-primary);
+      }
+    }
+
     .filter-badge {
       background-color: var(--filter-bg);
       color: var(--color-text-primary);
@@ -447,7 +632,7 @@
       padding: 0.1rem 0.4rem;
       border-radius: 99px;
       font-weight: 600;
-      margin-left: 0.5rem;
+      margin-left: 0.25rem;
     }
   }
 
@@ -686,6 +871,27 @@
     &.github .fa-github { color: var(--color-github, #24292e); }
 
     &.gitlab .fa-gitlab { color: var(--color-gitlab, #fc6d26); }
+
+    .custom-gitlab-card-badge {
+      position: absolute;
+      bottom: -1px;
+      right: -1px;
+      width: 14px;
+      height: 14px;
+      border-radius: 50%;
+      background-color: var(--color-surface);
+      border: 1px solid var(--color-border);
+      color: var(--color-text-secondary);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: var(--shadow-sm);
+
+      .card-server-svg {
+        width: 7px;
+        height: 7px;
+      }
+    }
   }
 
   .selection-checkbox-overlay {
@@ -739,10 +945,14 @@
   justify-content: center;
   border: none;
   background: transparent;
-  transition: all 0.2s;
+  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
+  backface-visibility: hidden;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 
   i {
     font-size: 1rem;
+    pointer-events: none;
   }
 
   &.text-primary { color: var(--color-primary) !important; }
@@ -890,8 +1100,10 @@
 }
 
 .sort-direction-svg {
+  pointer-events: none;
+
   .sort-arrow {
-    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     transform-origin: 19px 12px;
     transform: scaleY(1);
   }
@@ -899,12 +1111,14 @@
   &.is-asc .sort-arrow {
     transform: scaleY(-1);
   }
+}
 
-  &:not(.is-asc).show-hover .sort-arrow {
+.sort-direction-btn:hover {
+  .sort-direction-svg:not(.is-asc) .sort-arrow {
     transform: scaleY(-1);
   }
 
-  &.is-asc.show-hover .sort-arrow {
+  .sort-direction-svg.is-asc .sort-arrow {
     transform: scaleY(1);
   }
 }
diff --git a/src/app/components/home/assignment-chooser/assignment-chooser.component.ts b/src/app/components/home/assignment-chooser/assignment-chooser.component.ts
index 5427ae95..d38dbeb5 100644
--- a/src/app/components/home/assignment-chooser/assignment-chooser.component.ts
+++ b/src/app/components/home/assignment-chooser/assignment-chooser.component.ts
@@ -1,4 +1,16 @@
-import { Component, OnInit, TemplateRef, ViewChild, ChangeDetectorRef, OnDestroy, HostListener } from "@angular/core";
+import {
+  Component,
+  OnInit,
+  AfterViewInit,
+  TemplateRef,
+  ViewChild,
+  ViewChildren,
+  QueryList,
+  ChangeDetectorRef,
+  OnDestroy,
+  HostListener,
+  ElementRef,
+} from "@angular/core";
 import { Router } from "@angular/router";
 import { Assignment } from "@models/Assignment.model";
 import { GitProviderType } from "@models/GitAuthProvider.model";
@@ -14,20 +26,36 @@ import { ToastService } from "@services/toast.service";
 import { Subscription } from "rxjs";
 import * as moment from "moment";
 
+export interface ProviderFilterPill {
+  key: string;
+  label: string;
+  provider?: GitProviderType;
+  instanceHost?: string;
+  instanceName?: string;
+  isCustom?: boolean;
+}
+
 @Component({
   selector: "assignment-chooser",
   templateUrl: "./assignment-chooser.component.html",
   styleUrls: ["./assignment-chooser.component.scss"],
 })
-export class AssignmentChooserComponent implements OnInit, OnDestroy {
+export class AssignmentChooserComponent implements OnInit, AfterViewInit, OnDestroy {
+  @ViewChild("searchInput") searchInputRef?: ElementRef<HTMLInputElement>;
+  @ViewChildren("pillBtn") pillButtons?: QueryList<ElementRef<HTMLButtonElement>>;
+
+  indicatorLeft = 0;
+  indicatorWidth = 100;
+
   assignments: any[]; // Using any to attach UI-specific properties temporarily
 
   sortField = "lastModificationDate";
   sortDirection: "asc" | "desc" = "desc";
 
-  filterType: "all" | "github" | "gitlab" = "all";
+  filterType = "all";
 
   searchQuery = "";
+  searchFocused = false;
 
   advancedFilters = {
     status: {
@@ -55,17 +83,17 @@ export class AssignmentChooserComponent implements OnInit, OnDestroy {
   // Provider split button dropdown state
   isProviderDropdownOpen = false;
   lastUsedProvider: GitProviderType = "github";
+  lastUsedHost = "github.com";
+  lastUsedInstanceName = "";
 
   // Inline edit state
   editingAssignmentId: number | null = null;
   isCreatingNew = false;
 
-  isSortHovered = false;
-  sortWasClicked = false;
-
   private dbSubscription?: Subscription;
   private overlaySub: Subscription | null = null;
   private accountsSub?: Subscription;
+  private pillButtonsSub?: Subscription;
   private statusPreviewTimeout: any = null;
 
   constructor(
@@ -98,15 +126,152 @@ export class AssignmentChooserComponent implements OnInit, OnDestroy {
     this.closeAllCreationPopovers();
   }
 
+  @HostListener("window:resize")
+  onWindowResize(): void {
+    this.updateIndicator();
+  }
+
+  get isSearchExpanded(): boolean {
+    return this.searchFocused || Boolean(this.searchQuery && this.searchQuery.trim().length > 0);
+  }
+
+  get providerFilterPills(): ProviderFilterPill[] {
+    const pills: ProviderFilterPill[] = [{ key: "all", label: "HOME.FILTER.ALL" }];
+
+    const hasGithub =
+      this.accountsService.isGithubConnected || (this.assignments && this.assignments.some((a) => !a.provider || a.provider === "github"));
+    if (hasGithub) {
+      pills.push({
+        key: "github",
+        label: "HOME.FILTER.GITHUB",
+        provider: "github",
+        instanceHost: "github.com",
+      });
+    }
+
+    const hasGitlabCloud =
+      this.accountsService.isGitlabConnected ||
+      (this.assignments &&
+        this.assignments.some(
+          (a) => a.provider === "gitlab" && (!a.instanceHost || a.instanceHost === "gitlab.com" || a.resolvedInstanceHost === "gitlab.com"),
+        ));
+    if (hasGitlabCloud) {
+      pills.push({
+        key: "gitlab",
+        label: "HOME.FILTER.GITLAB",
+        provider: "gitlab",
+        instanceHost: "gitlab.com",
+      });
+    }
+
+    const customHostMap = new Map<string, { name: string; isConnected: boolean }>();
+
+    const connectedCustom = this.accountsService.gitlabCustomAuthService?.getAccounts() || [];
+    connectedCustom.forEach((acc) => {
+      if (acc.instanceHost) {
+        customHostMap.set(acc.instanceHost, {
+          name: acc.instanceName || this.cleanHostname(acc.instanceHost),
+          isConnected: true,
+        });
+      }
+    });
+
+    if (this.assignments) {
+      this.assignments.forEach((a) => {
+        const host = a.instanceHost || (a.provider === "gitlab" && a.resolvedInstanceHost !== "gitlab.com" ? a.resolvedInstanceHost : null);
+        if (a.provider === "gitlab" && host && host !== "gitlab.com" && !customHostMap.has(host)) {
+          customHostMap.set(host, {
+            name: a.instanceName || this.cleanHostname(host),
+            isConnected: this.accountsService.hasAccountForHost("gitlab", host),
+          });
+        }
+      });
+    }
+
+    customHostMap.forEach((info, host) => {
+      pills.push({
+        key: `gitlab:${host}`,
+        label: `GitLab (${info.name})`,
+        provider: "gitlab",
+        instanceHost: host,
+        instanceName: info.name,
+        isCustom: true,
+      });
+    });
+
+    return pills;
+  }
+
+  get selectedFilterPill(): ProviderFilterPill | undefined {
+    return this.providerFilterPills.find((p) => p.key === this.filterType);
+  }
+
+  get isCustomLastUsed(): boolean {
+    return this.lastUsedProvider === "gitlab" && Boolean(this.lastUsedHost && this.lastUsedHost !== "gitlab.com");
+  }
+
+  get canCreateLastUsed(): boolean {
+    return this.accountsService.hasAccountForHost(this.lastUsedProvider, this.lastUsedHost);
+  }
+
+  get createButtonLabel(): string {
+    if (this.lastUsedProvider === "github") {
+      return this.translateService.instant("HOME.CREATE-ASSIGNMENT-GITHUB");
+    }
+    if (this.lastUsedProvider === "gitlab") {
+      if (this.isCustomLastUsed) {
+        return this.translateService.instant("HOME.CREATE-ASSIGNMENT-GITLAB-CUSTOM", {
+          host: this.lastUsedInstanceName || this.lastUsedHost,
+        });
+      }
+      return this.translateService.instant("HOME.CREATE-ASSIGNMENT-GITLAB");
+    }
+    return this.translateService.instant("HOME.CREATE-ASSIGNMENT");
+  }
+
+  get createButtonTooltip(): string {
+    if (!this.canCreateLastUsed) {
+      if (this.lastUsedProvider === "gitlab") {
+        if (this.isCustomLastUsed) {
+          return this.translateService.instant("HOME.MUST-LOGIN-ASSIGNMENT-GITLAB-CUSTOM", {
+            host: this.lastUsedInstanceName || this.lastUsedHost,
+          });
+        }
+        return this.translateService.instant("HOME.MUST-LOGIN-GITLAB");
+      }
+      return this.translateService.instant("HOME.MUST-LOGIN-GITHUB");
+    }
+    return "";
+  }
+
+  get connectedCustomGitlabAccounts(): any[] {
+    return this.accountsService.gitlabCustomAuthService?.getAccounts() || [];
+  }
+
   get filteredAssignments() {
     let result = this.assignments;
 
     // Always show the assignment currently being created at the top, even if it doesn't match filters
     const newAssignment = this.assignments.find((a) => a.id === -1);
 
-    // Apply old filterType
+    // Apply filterType
     if (this.filterType !== "all") {
-      result = result.filter((a) => (a as any).uiType === this.filterType || a.id === -1);
+      if (this.filterType === "github") {
+        result = result.filter((a) => a.id === -1 || !a.provider || a.provider === "github");
+      } else if (this.filterType === "gitlab" || this.filterType === "gitlab-cloud") {
+        result = result.filter(
+          (a) =>
+            a.id === -1 ||
+            (a.provider === "gitlab" && (!a.instanceHost || a.instanceHost === "gitlab.com" || a.resolvedInstanceHost === "gitlab.com")),
+        );
+      } else if (this.filterType.startsWith("gitlab:")) {
+        const targetHost = this.filterType.substring(7);
+        result = result.filter(
+          (a) => a.id === -1 || (a.provider === "gitlab" && (a.instanceHost === targetHost || a.resolvedInstanceHost === targetHost)),
+        );
+      } else {
+        result = result.filter((a) => (a as any).uiType === this.filterType || a.id === -1);
+      }
     }
 
     // Apply search query
@@ -178,8 +343,135 @@ export class AssignmentChooserComponent implements OnInit, OnDestroy {
     this.savePreferences();
   }
 
-  setFilter(type: "all" | "github" | "gitlab") {
+  onSearchContainerClick(event: MouseEvent): void {
+    if (!this.isSearchExpanded) {
+      event.preventDefault();
+      this.searchFocused = true;
+      this.cdr.markForCheck();
+      requestAnimationFrame(() => {
+        this.searchInputRef?.nativeElement?.focus();
+      });
+    } else if (document.activeElement !== this.searchInputRef?.nativeElement) {
+      this.searchInputRef?.nativeElement?.focus();
+    }
+  }
+
+  onSearchContainerEnter(event: Event): void {
+    if (!this.isSearchExpanded) {
+      event.preventDefault();
+      this.searchFocused = true;
+      this.cdr.markForCheck();
+      requestAnimationFrame(() => {
+        this.searchInputRef?.nativeElement?.focus();
+      });
+    }
+  }
+
+  onSearchFocus(): void {
+    this.searchFocused = true;
+  }
+
+  onSearchBlur(): void {
+    this.searchFocused = false;
+  }
+
+  onSearchEscape(event?: Event): void {
+    if (event) {
+      event.stopPropagation();
+    }
+    this.searchQuery = "";
+    this.searchFocused = false;
+    this.searchInputRef?.nativeElement?.blur();
+  }
+
+  clearSearch(focusAfter = true): void {
+    this.searchQuery = "";
+    if (focusAfter) {
+      this.searchInputRef?.nativeElement?.focus();
+    } else {
+      this.searchFocused = false;
+      this.searchInputRef?.nativeElement?.blur();
+    }
+  }
+
+  setFilter(type: string): void {
     this.filterType = type;
+    this.updateIndicator();
+    this.cdr.markForCheck();
+  }
+
+  updateIndicator(): void {
+    if (!this.pillButtons || this.pillButtons.length === 0) {
+      return;
+    }
+    const pills = this.providerFilterPills;
+    let activeIndex = pills.findIndex((p) => p.key === this.filterType);
+    if (activeIndex === -1) {
+      activeIndex = 0;
+    }
+    const buttonsArray = this.pillButtons.toArray();
+    const targetBtn = buttonsArray[activeIndex];
+    if (targetBtn && targetBtn.nativeElement) {
+      const el = targetBtn.nativeElement;
+      const groupEl = el.parentElement;
+      const groupPaddingLeft = groupEl ? parseFloat(getComputedStyle(groupEl).paddingLeft) || 4 : 4;
+      this.indicatorLeft = Math.max(0, el.offsetLeft - groupPaddingLeft);
+      this.indicatorWidth = el.offsetWidth || 100;
+      this.cdr.markForCheck();
+    }
+  }
+
+  isAssignmentConnected(assignment: any): boolean {
+    if (!assignment) {
+      return false;
+    }
+    const provider = (assignment.provider || assignment.uiType || "github") as GitProviderType;
+    const host = assignment.instanceHost || (assignment.resolvedInstanceHost ? assignment.resolvedInstanceHost : undefined);
+    return this.accountsService.hasAccountForHost(provider, host);
+  }
+
+  isCustomGitlab(assignment: any): boolean {
+    if (!assignment) {
+      return false;
+    }
+    const provider = assignment.provider || assignment.uiType;
+    const host = assignment.instanceHost || assignment.resolvedInstanceHost;
+    return provider === "gitlab" && Boolean(host && host !== "gitlab.com");
+  }
+
+  getAssignmentTooltip(assignment: any): string {
+    if (this.isAssignmentConnected(assignment)) {
+      return "HOME.SELECT-ASSIGNMENT-TOOLTIP";
+    }
+    return this.getDisconnectedTooltip(assignment);
+  }
+
+  getAssignmentEditTooltip(assignment: any): string {
+    if (this.isAssignmentConnected(assignment)) {
+      return "HOME.EDIT-ASSIGNMENT-TOOLTIP";
+    }
+    return this.getDisconnectedTooltip(assignment);
+  }
+
+  getAssignmentDeleteTooltip(assignment: any): string {
+    if (this.isAssignmentConnected(assignment)) {
+      return "HOME.DELETE-ASSIGNMENT-TOOLTIP";
+    }
+    return this.getDisconnectedTooltip(assignment);
+  }
+
+  getDisconnectedTooltip(assignment: any): string {
+    const provider = assignment?.provider || "github";
+    const host = assignment?.instanceHost || assignment?.resolvedInstanceHost;
+    if (provider === "gitlab") {
+      if (host && host !== "gitlab.com") {
+        return this.translateService.instant("HOME.MUST-LOGIN-ASSIGNMENT-GITLAB-CUSTOM", {
+          host: assignment?.instanceName || host,
+        });
+      }
+      return this.translateService.instant("HOME.MUST-LOGIN-ASSIGNMENT-GITLAB");
+    }
+    return this.translateService.instant("HOME.MUST-LOGIN-ASSIGNMENT-GITHUB");
   }
 
   onStatusMouseEnter(status: string) {
@@ -240,14 +532,6 @@ export class AssignmentChooserComponent implements OnInit, OnDestroy {
     this.cdr.markForCheck();
   }
 
-  isAssignmentConnected(assignment: any): boolean {
-    if (!assignment) {
-      return false;
-    }
-    const provider = (assignment.provider || assignment.uiType || "github") as GitProviderType;
-    return this.accountsService.hasAccount(provider);
-  }
-
   get isGithubConnected(): boolean {
     return this.accountsService.isGithubConnected;
   }
@@ -282,9 +566,28 @@ export class AssignmentChooserComponent implements OnInit, OnDestroy {
 
     this.accountsSub = this.accountsService.accounts$.subscribe(() => {
       this.cdr.markForCheck();
+      requestAnimationFrame(() => {
+        this.updateIndicator();
+      });
     });
   }
 
+  ngAfterViewInit(): void {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        this.updateIndicator();
+      });
+    });
+
+    if (this.pillButtons) {
+      this.pillButtonsSub = this.pillButtons.changes.subscribe(() => {
+        requestAnimationFrame(() => {
+          this.updateIndicator();
+        });
+      });
+    }
+  }
+
   ngOnDestroy(): void {
     if (this.dbSubscription) {
       this.dbSubscription.unsubscribe();
@@ -295,6 +598,9 @@ export class AssignmentChooserComponent implements OnInit, OnDestroy {
     if (this.accountsSub) {
       this.accountsSub.unsubscribe();
     }
+    if (this.pillButtonsSub) {
+      this.pillButtonsSub.unsubscribe();
+    }
     if (this.statusPreviewTimeout) {
       clearTimeout(this.statusPreviewTimeout);
     }
@@ -316,6 +622,14 @@ export class AssignmentChooserComponent implements OnInit, OnDestroy {
     if (savedProvider && (savedProvider === "github" || savedProvider === "gitlab")) {
       this.lastUsedProvider = savedProvider;
     }
+    const savedHost = localStorage.getItem("git4school_last_host");
+    if (savedHost) {
+      this.lastUsedHost = savedHost;
+    }
+    const savedName = localStorage.getItem("git4school_last_instance_name");
+    if (savedName) {
+      this.lastUsedInstanceName = savedName;
+    }
   }
 
   savePreferences() {
@@ -368,6 +682,8 @@ export class AssignmentChooserComponent implements OnInit, OnDestroy {
         const lastAssignment = this.assignments.find((a) => a.provider && a.id !== -1);
         if (lastAssignment && lastAssignment.provider) {
           this.lastUsedProvider = lastAssignment.provider;
+          this.lastUsedHost = lastAssignment.instanceHost || (lastAssignment.provider === "gitlab" ? "gitlab.com" : "github.com");
+          this.lastUsedInstanceName = lastAssignment.instanceName || "";
         }
       }
 
@@ -376,6 +692,9 @@ export class AssignmentChooserComponent implements OnInit, OnDestroy {
         this.assignments.unshift(newAssignmentObj);
       }
       this.cdr.detectChanges();
+      requestAnimationFrame(() => {
+        this.updateIndicator();
+      });
     });
   }
 
@@ -615,19 +934,8 @@ export class AssignmentChooserComponent implements OnInit, OnDestroy {
     return moment(dateStr).format(format);
   }
 
-  onSortMouseEnter() {
-    this.isSortHovered = true;
-    this.sortWasClicked = false;
-  }
-
-  onSortMouseLeave() {
-    this.isSortHovered = false;
-    this.sortWasClicked = false;
-  }
-
   toggleSortDirection() {
     this.sortDirection = this.sortDirection === "asc" ? "desc" : "asc";
-    this.sortWasClicked = true;
     this.sortAssignments();
   }
 
@@ -638,9 +946,9 @@ export class AssignmentChooserComponent implements OnInit, OnDestroy {
 
   selectAssignment(assignment: any) {
     const provider = assignment.provider || "github";
-    if (!this.accountsService.hasAccount(provider)) {
-      const errorKey = provider === "gitlab" ? "HOME.MUST-LOGIN-ASSIGNMENT-GITLAB" : "HOME.MUST-LOGIN-ASSIGNMENT-GITHUB";
-      const msg = this.translateService.instant(errorKey);
+    const host = assignment.instanceHost || (assignment.resolvedInstanceHost ? assignment.resolvedInstanceHost : undefined);
+    if (!this.accountsService.hasAccountForHost(provider, host)) {
+      const msg = this.getDisconnectedTooltip(assignment);
       this.toastService.warning(this.translateService.instant("WARNING"), msg);
       return;
     }
@@ -652,24 +960,39 @@ export class AssignmentChooserComponent implements OnInit, OnDestroy {
   }
 
   deleteAssignment(assignment: any) {
-    if (!this.isAssignmentConnected(assignment)) return;
+    if (!this.isAssignmentConnected(assignment)) {
+      const msg = this.getDisconnectedTooltip(assignment);
+      this.toastService.warning(this.translateService.instant("WARNING"), msg);
+      return;
+    }
     this.databaseService.deleteAssignment(assignment.id);
   }
 
-  createAssignment(provider?: GitProviderType, event?: MouseEvent) {
+  createAssignment(provider?: GitProviderType, instanceHost?: string, instanceName?: string, event?: MouseEvent) {
     if (event) {
       event.stopPropagation();
     }
-    const targetProvider: GitProviderType = provider || (this.filterType !== "all" ? this.filterType : this.lastUsedProvider) || "github";
+    const targetProvider: GitProviderType = provider || (this.filterType === "github" ? "github" : this.lastUsedProvider) || "github";
+    const targetHost = instanceHost || (targetProvider === "gitlab" ? this.lastUsedHost || "gitlab.com" : "github.com");
 
-    if (!this.accountsService.hasAccount(targetProvider)) {
+    if (!this.accountsService.hasAccountForHost(targetProvider, targetHost)) {
       if (this.accountsService.isEmpty()) {
         const msg = this.translateService.instant("HOME.MUST-LOGIN");
         this.toastService.warning(this.translateService.instant("WARNING"), msg);
         return;
       }
-      const errorKey = targetProvider === "gitlab" ? "HOME.MUST-LOGIN-GITLAB" : "HOME.MUST-LOGIN-GITHUB";
-      const msg = this.translateService.instant(errorKey);
+      let msg = "";
+      if (targetProvider === "gitlab") {
+        if (targetHost !== "gitlab.com") {
+          msg = this.translateService.instant("HOME.MUST-LOGIN-ASSIGNMENT-GITLAB-CUSTOM", {
+            host: instanceName || targetHost,
+          });
+        } else {
+          msg = this.translateService.instant("HOME.MUST-LOGIN-GITLAB");
+        }
+      } else {
+        msg = this.translateService.instant("HOME.MUST-LOGIN-GITHUB");
+      }
       this.toastService.warning(this.translateService.instant("WARNING"), msg);
       return;
     }
@@ -678,13 +1001,25 @@ export class AssignmentChooserComponent implements OnInit, OnDestroy {
 
     this.closeAllCreationPopovers();
     this.lastUsedProvider = targetProvider;
+    this.lastUsedHost = targetHost;
+    this.lastUsedInstanceName = instanceName || "";
     try {
       localStorage.setItem("git4school_last_provider", targetProvider);
+      localStorage.setItem("git4school_last_host", targetHost);
+      if (instanceName) {
+        localStorage.setItem("git4school_last_instance_name", instanceName);
+      } else {
+        localStorage.removeItem("git4school_last_instance_name");
+      }
     } catch (e) {}
 
     let assignment = new Assignment();
     assignment.id = -1; // Temporary ID for creation
     assignment.provider = targetProvider;
+    assignment.instanceHost = targetHost;
+    if (instanceName) {
+      assignment.instanceName = instanceName;
+    }
     (assignment as any).uiType = targetProvider;
     (assignment as any).uiStatus = "prepared";
     this.assignments.unshift(assignment); // Add to the top
@@ -703,17 +1038,12 @@ export class AssignmentChooserComponent implements OnInit, OnDestroy {
       return;
     }
 
-    /* If a specific provider filter is active, create directly with that provider */
-    if (this.filterType === "github") {
-      this.createAssignment("github");
-      return;
-    }
-    if (this.filterType === "gitlab") {
-      this.createAssignment("gitlab");
+    if (this.selectedFilterPill && this.selectedFilterPill.key !== "all") {
+      this.createAssignment(this.selectedFilterPill.provider, this.selectedFilterPill.instanceHost, this.selectedFilterPill.instanceName);
       return;
     }
 
-    this.createAssignment(this.lastUsedProvider);
+    this.createAssignment(this.lastUsedProvider, this.lastUsedHost, this.lastUsedInstanceName);
   }
 
   toggleProviderDropdown(event?: MouseEvent): void {
@@ -732,6 +1062,10 @@ export class AssignmentChooserComponent implements OnInit, OnDestroy {
     return item?.id !== undefined ? item.id : index;
   }
 
+  trackByPillKey(index: number, pill: ProviderFilterPill): string {
+    return pill.key;
+  }
+
   editAssignment(assignment: any) {
     if (!this.isAssignmentConnected(assignment) && assignment.id !== -1) return;
 
@@ -766,8 +1100,16 @@ export class AssignmentChooserComponent implements OnInit, OnDestroy {
   onAssignmentSaved(assignment: Assignment) {
     if (assignment && assignment.provider) {
       this.lastUsedProvider = assignment.provider;
+      this.lastUsedHost = assignment.instanceHost || (assignment.provider === "gitlab" ? "gitlab.com" : "github.com");
+      this.lastUsedInstanceName = assignment.instanceName || "";
       try {
         localStorage.setItem("git4school_last_provider", assignment.provider);
+        localStorage.setItem("git4school_last_host", this.lastUsedHost);
+        if (assignment.instanceName) {
+          localStorage.setItem("git4school_last_instance_name", assignment.instanceName);
+        } else {
+          localStorage.removeItem("git4school_last_instance_name");
+        }
       } catch (e) {}
     }
     this.isCreatingNew = false;
@@ -804,4 +1146,12 @@ export class AssignmentChooserComponent implements OnInit, OnDestroy {
       this.importDB(file);
     }
   }
+
+  private cleanHostname(host: string): string {
+    return host
+      .replace(/^https?:\/\//, "")
+      .replace(/^www\./, "")
+      .replace(/^gitlab\./, "")
+      .replace(/\/$/, "");
+  }
 }
diff --git a/src/app/components/home/assignment-chooser/configuration/edit-repositories/edit-repositories.component.ts b/src/app/components/home/assignment-chooser/configuration/edit-repositories/edit-repositories.component.ts
index ced73f68..101137c6 100644
--- a/src/app/components/home/assignment-chooser/configuration/edit-repositories/edit-repositories.component.ts
+++ b/src/app/components/home/assignment-chooser/configuration/edit-repositories/edit-repositories.component.ts
@@ -51,7 +51,7 @@ export class EditRepositoriesComponent extends BaseTabEditConfigurationComponent
   }
 
   get isConnectedToProvider(): boolean {
-    return this.accountsService.hasAccount(this.provider);
+    return this.accountsService.hasAccountForHost(this.provider, this.assignment?.instanceHost || this.assignment?.resolvedInstanceHost);
   }
 
   private rotateMatrix: { [key: string]: SortDirection } = {
@@ -288,6 +288,7 @@ export class EditRepositoriesComponent extends BaseTabEditConfigurationComponent
     let modalReference: CustomModalRef = this.modalService.open(ModalAddRepositoriesComponent, { size: "lg" });
     modalReference.componentInstance.repoList = this.getFormControls.map((row) => Repository.withJSON(row.value));
     modalReference.componentInstance.provider = this.provider;
+    modalReference.componentInstance.instanceHost = this.assignment?.instanceHost || this.assignment?.resolvedInstanceHost;
 
     modalReference.result.then(
       (result) => {
diff --git a/src/app/components/home/assignment-chooser/configuration/edit-repositories/modal-add-repositories/modal-add-repositories.component.html b/src/app/components/home/assignment-chooser/configuration/edit-repositories/modal-add-repositories/modal-add-repositories.component.html
index 5e94aa6a..919cbe59 100644
--- a/src/app/components/home/assignment-chooser/configuration/edit-repositories/modal-add-repositories/modal-add-repositories.component.html
+++ b/src/app/components/home/assignment-chooser/configuration/edit-repositories/modal-add-repositories/modal-add-repositories.component.html
@@ -256,7 +256,7 @@ <h5>{{ 'EDIT-REPOSITORIES.NO-REPOSITORIES' | translate }}</h5>
             
             <div class="action-inputs d-flex align-items-center px-3">
                 <i class="fas fa-users mr-2" style="color: var(--color-text-muted);"></i>
-                <input id="tour-modal-tp-group" type="text" class="bar-input" [(ngModel)]="tpGroup" [placeholder]="'MODAL-ADD-REPOSITORIES.TP-GROUP' | translate" [title]="'MODAL-ADD-REPOSITORIES.PLACEHOLDER-TPGROUP' | translate">
+                <input id="tour-modal-tp-group" type="text" class="bar-input" [(ngModel)]="tpGroup" [placeholder]="'MODAL-ADD-REPOSITORIES.TP-GROUP' | translate" [appTooltip]="'MODAL-ADD-REPOSITORIES.PLACEHOLDER-TPGROUP' | translate">
             </div>
             
             <div class="bar-divider"></div>
diff --git a/src/app/components/home/assignment-chooser/configuration/edit-repositories/modal-add-repositories/modal-add-repositories.component.ts b/src/app/components/home/assignment-chooser/configuration/edit-repositories/modal-add-repositories/modal-add-repositories.component.ts
index d5d455ef..da43eb9f 100644
--- a/src/app/components/home/assignment-chooser/configuration/edit-repositories/modal-add-repositories/modal-add-repositories.component.ts
+++ b/src/app/components/home/assignment-chooser/configuration/edit-repositories/modal-add-repositories/modal-add-repositories.component.ts
@@ -16,6 +16,7 @@ export class ModalAddRepositoriesComponent implements OnInit, OnDestroy, AfterVi
   @ViewChild("reposTable", { read: ElementRef }) datatable: ElementRef;
   @Input() repoList: Repository[];
   @Input() provider: GitProviderType = "github";
+  @Input() instanceHost?: string;
   rows: Repository[];
   nameMatches: Repository[] = [];
   contentMatches: Repository[] = [];
@@ -304,11 +305,17 @@ export class ModalAddRepositoriesComponent implements OnInit, OnDestroy, AfterVi
   }
 
   private updateResultsWithAuthenticatedUser(cursor?: string, isFirstPage = false) {
-    this.processIntermediateResponse(this.commitsService.getRepositoriesByAuthenticatedUser(cursor, 100, this.provider), isFirstPage);
+    this.processIntermediateResponse(
+      this.commitsService.getRepositoriesByAuthenticatedUser(cursor, 100, this.provider, this.instanceHost),
+      isFirstPage,
+    );
   }
 
   private updateResultsWithSearchFilter(searchFilter: string, cursor?: string, isFirstPage = false) {
-    this.processIntermediateResponse(this.commitsService.getRepositoriesBySearch(searchFilter, cursor, 100, this.provider), isFirstPage);
+    this.processIntermediateResponse(
+      this.commitsService.getRepositoriesBySearch(searchFilter, cursor, 100, this.provider, this.instanceHost),
+      isFirstPage,
+    );
   }
 
   private loadResults() {
diff --git a/src/app/components/nav-layouts/app-nav-layout/app-nav-layout.component.html b/src/app/components/nav-layouts/app-nav-layout/app-nav-layout.component.html
index a1b39ca6..7eda8413 100644
--- a/src/app/components/nav-layouts/app-nav-layout/app-nav-layout.component.html
+++ b/src/app/components/nav-layouts/app-nav-layout/app-nav-layout.component.html
@@ -52,6 +52,24 @@
 
             <!-- RIGHT SIDE: Actions & Settings -->
             <div class="navbar-right d-flex align-items-center flex-nowrap">
+                <button *ngIf="!isHome && dataService.dataLoaded()"
+                        class="btn anonymize-toggle-pill"
+                        [class.active]="anonymizationService.isAnonymous"
+                        (click)="anonymizationService.toggleAnonymousMode()"
+                        [appTooltip]="{ text: ('NAVBAR.ANONYMOUS-MODE-TOOLTIP' | translate), shortcut: ['A'] }"
+                        placement="bottom">
+                    <span class="anonymize-icon-wrapper">
+                        <svg class="icon-eye-off" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
+                            <circle cx="12" cy="12" r="3"></circle>
+                        </svg>
+                        <svg class="icon-eye-on" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path>
+                            <line x1="1" y1="1" x2="23" y2="23"></line>
+                        </svg>
+                    </span>
+                    <span class="anonymize-label">{{ 'NAVBAR.ANONYMOUS-MODE' | translate }}</span>
+                </button>
             </div>
         </nav>
 
diff --git a/src/app/components/nav-layouts/app-nav-layout/app-nav-layout.component.ts b/src/app/components/nav-layouts/app-nav-layout/app-nav-layout.component.ts
index 683c906a..2fc37ec1 100644
--- a/src/app/components/nav-layouts/app-nav-layout/app-nav-layout.component.ts
+++ b/src/app/components/nav-layouts/app-nav-layout/app-nav-layout.component.ts
@@ -7,6 +7,7 @@ import { ConfigurationService } from "@services/configuration.service";
 import { DataService } from "@services/data.service";
 import { DatabaseService } from "@services/database.service";
 import { ThemeService } from "@services/theme.service";
+import { AnonymizationService } from "@services/anonymization.service";
 import { CustomModalService } from "@shared/ui/custom-modal/custom-modal.service";
 import { CustomModalRef } from "@shared/ui/custom-modal/custom-modal-ref";
 import { ShortcutsModalComponent } from "@shared/ui/shortcuts-modal/shortcuts-modal.component";
@@ -34,6 +35,7 @@ export class AppNavLayoutComponent implements OnInit {
     private databaseService: DatabaseService,
     private configurationService: ConfigurationService,
     public themeService: ThemeService,
+    public anonymizationService: AnonymizationService,
     private router: Router,
     private customModalService: CustomModalService,
   ) {}
@@ -126,6 +128,11 @@ export class AppNavLayoutComponent implements OnInit {
           this.openCurrentAssignmentConfig();
         }
       }
+    } else if (key === "a" && !event.ctrlKey && !event.metaKey && !event.altKey) {
+      if (this.dataService.dataLoaded() && !this.isHome && !this.hasActiveModal) {
+        event.preventDefault();
+        this.anonymizationService.toggleAnonymousMode();
+      }
     }
   }
 
diff --git a/src/app/components/nav-layouts/sidebar-settings/accounts/accounts.component.html b/src/app/components/nav-layouts/sidebar-settings/accounts/accounts.component.html
index 312b8cb0..b6a140c6 100644
--- a/src/app/components/nav-layouts/sidebar-settings/accounts/accounts.component.html
+++ b/src/app/components/nav-layouts/sidebar-settings/accounts/accounts.component.html
@@ -20,6 +20,19 @@
             <div *ngIf="!acc.avatarUrl" class="account-avatar-fallback">
               {{ acc.username.charAt(0).toUpperCase() }}
             </div>
+
+            <!-- Semi-transparent overlay with exclamation mark when invalid -->
+            <div
+              *ngIf="acc.tokenStatus === 'invalid'"
+              class="account-avatar-invalid-overlay"
+              [appTooltip]="'TOKEN_HEALTH.INVALID_TOOLTIP' | translate"
+            >
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round">
+                <line x1="12" y1="5" x2="12" y2="13"></line>
+                <line x1="12" y1="18" x2="12.01" y2="18"></line>
+              </svg>
+            </div>
+
             <span class="provider-badge-icon" [ngClass]="acc.provider">
               <svg *ngIf="acc.provider === 'github'" viewBox="0 0 496 512" fill="currentColor">
                 <path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/>
diff --git a/src/app/components/nav-layouts/sidebar-settings/accounts/accounts.component.scss b/src/app/components/nav-layouts/sidebar-settings/accounts/accounts.component.scss
index 4dc49494..d79d62f1 100644
--- a/src/app/components/nav-layouts/sidebar-settings/accounts/accounts.component.scss
+++ b/src/app/components/nav-layouts/sidebar-settings/accounts/accounts.component.scss
@@ -60,6 +60,32 @@ $ease-spring-out: cubic-bezier(0.25, 1, 0.4, 1);
     border: 1px solid var(--color-border);
   }
 
+  .account-avatar-invalid-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 34px;
+    height: 34px;
+    border-radius: 50%;
+    background-color: var(--color-danger-bg);
+    backdrop-filter: blur(1.5px);
+    -webkit-backdrop-filter: blur(1.5px);
+    color: var(--color-danger);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1.5px solid var(--color-danger-subtle);
+    box-shadow: 0 1px 4px rgba(220, 38, 38, 0.15);
+    cursor: default;
+    z-index: 1;
+
+    svg {
+      width: 17px;
+      height: 17px;
+      filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
+    }
+  }
+
   .provider-badge-icon {
     position: absolute;
     bottom: -3px;
@@ -73,6 +99,7 @@ $ease-spring-out: cubic-bezier(0.25, 1, 0.4, 1);
     font-size: 0.6rem;
     background-color: var(--color-surface);
     border: 1px solid var(--color-border);
+    z-index: 2;
 
     svg {
       width: 10px;
@@ -425,3 +452,4 @@ $ease-spring-out: cubic-bezier(0.25, 1, 0.4, 1);
     }
   }
 }
+
diff --git a/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.html b/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.html
index 33ae8ae1..fcea464c 100644
--- a/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.html
+++ b/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.html
@@ -35,7 +35,7 @@ <h5 class="modal-title m-0">
 <div class="modal-body pt-3 pb-4 px-4">
   <!-- Top: 3 Platform Selection Cards -->
   <div class="platform-cards-grid">
-    <!-- Card 1: GitHub (Active / Selected) -->
+    <!-- Card 1: GitHub -->
     <div
       class="platform-card"
       [class.selected]="selectedPlatform === 'github'"
@@ -49,10 +49,14 @@ <h5 class="modal-title m-0">
             <path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/>
           </svg>
         </div>
-        <span *ngIf="isGithubConnected" class="status-pill connected">
+        <span *ngIf="isGithubConnected && !isGithubTokenInvalid" class="status-pill connected">
           <span class="dot"></span>
           {{ 'ACCOUNTS.ACTIVE' | translate }}
         </span>
+        <span *ngIf="isGithubConnected && isGithubTokenInvalid" class="status-pill invalid" [appTooltip]="'TOKEN_HEALTH.INVALID_TOOLTIP' | translate">
+          <span class="dot"></span>
+          {{ 'ACCOUNTS.STATUS_INVALID' | translate }}
+        </span>
       </div>
       <div class="platform-info">
         <span class="platform-name">{{ 'ACCOUNTS.PLATFORM_GITHUB_TITLE' | translate }}</span>
@@ -73,23 +77,27 @@ <h5 class="modal-title m-0">
             <path d="M105.2 24.9c-3.1-8.9-15.7-8.9-18.9 0L29.8 199.7h132c-.1 0-56.6-174.8-56.6-174.8zM.9 287.7c-2.6 8 .3 16.9 7.1 22l247.9 184-226.2-294zm160.8-88l94.3 294 94.3-294zm349.4 88l-28.8-88-226.3 294 247.9-184c6.9-5.1 9.7-14 7.2-22zM425.7 24.9c-3.1-8.9-15.7-8.9-18.9 0l-56.6 174.8h132z"/>
           </svg>
         </div>
-        <span *ngIf="isGitlabConnected" class="status-pill connected">
+        <span *ngIf="isGitlabConnected && !isGitlabTokenInvalid" class="status-pill connected">
           <span class="dot"></span>
           {{ 'ACCOUNTS.ACTIVE' | translate }}
         </span>
+        <span *ngIf="isGitlabConnected && isGitlabTokenInvalid" class="status-pill invalid" [appTooltip]="'TOKEN_HEALTH.INVALID_TOOLTIP' | translate">
+          <span class="dot"></span>
+          {{ 'ACCOUNTS.STATUS_INVALID' | translate }}
+        </span>
       </div>
       <div class="platform-info">
         <span class="platform-name">{{ 'ACCOUNTS.PLATFORM_GITLAB_TITLE' | translate }}</span>
       </div>
     </div>
 
-    <!-- Card 3: GitLab auto-hébergé -->
+    <!-- Card 3: GitLab auto-hébergé (Multi-instances) -->
     <div
-      class="platform-card"
+      class="platform-card platform-card-custom"
       [class.selected]="selectedPlatform === 'gitlab-custom'"
-      [class.is-disabled]="!devFlagsService.gitlabCustomEnabled"
-      [appTooltip]="!devFlagsService.gitlabCustomEnabled ? ('ACCOUNTS.COMING_SOON_DESC' | translate) : ''"
-      (click)="selectPlatform('gitlab-custom')"
+      [class.has-instances]="hasConnectedCustomInstances"
+      [class.is-dropdown-open]="isCustomDropdownOpen && hasConnectedCustomInstances"
+      (click)="onCustomCardClick($event)"
       role="button"
       tabindex="0"
     >
@@ -104,13 +112,44 @@ <h5 class="modal-title m-0">
             </svg>
           </span>
         </div>
-        <span *ngIf="!devFlagsService.gitlabCustomEnabled" class="status-pill coming-soon">
-          {{ 'ACCOUNTS.COMING_SOON' | translate }}
-        </span>
+        <div *ngIf="hasConnectedCustomInstances" class="d-flex align-items-center" style="gap: 0.35rem;">
+          <span class="status-pill" [ngClass]="hasInvalidCustomInstance ? 'invalid' : 'connected'" [appTooltip]="hasInvalidCustomInstance ? ('TOKEN_HEALTH.INVALID_TOOLTIP' | translate) : null">
+            <span class="dot"></span>
+            {{ customInstancesCountText }}
+          </span>
+          <i class="fas fa-chevron-down card-chevron" [class.is-open]="isCustomDropdownOpen"></i>
+        </div>
       </div>
       <div class="platform-info">
         <span class="platform-name">{{ 'ACCOUNTS.PLATFORM_GITLAB_SELF_TITLE' | translate }}</span>
       </div>
+
+      <!-- Dropdown of connected instances -->
+      <div *ngIf="isCustomDropdownOpen && hasConnectedCustomInstances" class="custom-instances-dropdown" (click)="$event.stopPropagation()">
+        <button
+          *ngFor="let acc of customGitlabAccounts"
+          type="button"
+          class="dropdown-instance-item"
+          [class.active]="!showAddCustomInstanceForm && selectedCustomInstanceHost === acc.instanceHost"
+          (click)="selectCustomInstance(acc.instanceHost)"
+        >
+          <div class="d-flex align-items-center">
+            <span class="instance-dot" [class.is-invalid]="acc.tokenStatus === 'invalid'"></span>
+            <div class="instance-text">
+              <span class="instance-name font-weight-bold">{{ acc.instanceName || acc.instanceHost }}</span>
+              <span class="instance-meta text-muted">@{{ acc.username }}</span>
+            </div>
+          </div>
+          <i *ngIf="!showAddCustomInstanceForm && selectedCustomInstanceHost === acc.instanceHost" class="fas fa-check check-mark"></i>
+        </button>
+        <div class="dropdown-divider my-1"></div>
+        <button type="button" class="dropdown-instance-item add-new" (click)="openAddCustomInstanceForm()">
+          <div class="d-flex align-items-center">
+            <i class="fas fa-plus-circle mr-2"></i>
+            <span>{{ 'ACCOUNTS.ADD_ANOTHER_INSTANCE' | translate }}</span>
+          </div>
+        </button>
+      </div>
     </div>
   </div>
 
@@ -137,7 +176,12 @@ <h5 class="modal-title m-0">
         </div>
         <div>
           <span class="config-brand-name">
-            {{ (selectedPlatform === 'github' ? 'ACCOUNTS.PLATFORM_GITHUB_TITLE' : (selectedPlatform === 'gitlab-cloud' ? 'ACCOUNTS.PLATFORM_GITLAB_TITLE' : 'ACCOUNTS.PLATFORM_GITLAB_SELF_TITLE')) | translate }}
+            <ng-container *ngIf="selectedPlatform === 'github'">{{ 'ACCOUNTS.PLATFORM_GITHUB_TITLE' | translate }}</ng-container>
+            <ng-container *ngIf="selectedPlatform === 'gitlab-cloud'">{{ 'ACCOUNTS.PLATFORM_GITLAB_TITLE' | translate }}</ng-container>
+            <ng-container *ngIf="selectedPlatform === 'gitlab-custom'">
+              <span *ngIf="!showAddCustomInstanceForm && selectedCustomAccount as acc">GitLab ({{ acc.instanceName || acc.instanceHost }})</span>
+              <span *ngIf="showAddCustomInstanceForm || !selectedCustomAccount">{{ 'ACCOUNTS.PLATFORM_GITLAB_SELF_TITLE' | translate }}</span>
+            </ng-container>
           </span>
           <span class="config-brand-type ml-2">
             {{ platformAuthTypeKey | translate }}
@@ -155,7 +199,7 @@ <h5 class="modal-title m-0">
     <!-- Config Card Content -->
     <div class="config-card-body">
       <!-- 1 & 2. GITHUB OR GITLAB CLOUD (Unified via templates) -->
-      <ng-container *ngIf="currentProvider as provider">
+      <ng-container *ngIf="selectedPlatform !== 'gitlab-custom' && currentProvider as provider">
         <ng-container *ngIf="isConnected && connectedAccount as account">
           <ng-container *ngTemplateOutlet="connectedPanel; context: { provider: provider, account: account }"></ng-container>
         </ng-container>
@@ -166,80 +210,197 @@ <h5 class="modal-title m-0">
 
       <!-- 3. GITLAB CUSTOM SELECTED -->
       <ng-container *ngIf="selectedPlatform === 'gitlab-custom'">
-        <div class="custom-instance-form">
-          <p class="auth-description mb-3 text-center">
-            {{ 'ACCOUNTS.CUSTOM_GITLAB_INFO' | translate }}
-          </p>
+        <!-- 3A. An instance is selected and active (view mode) -->
+        <ng-container *ngIf="!showAddCustomInstanceForm && selectedCustomAccount as account">
+          <div class="connected-user-panel" [class.is-invalid-token]="account.tokenStatus === 'invalid'">
+            <div class="user-profile-row">
+              <div class="avatar-container mr-3">
+                <img
+                  *ngIf="account.avatarUrl"
+                  [src]="account.avatarUrl"
+                  [alt]="account.username"
+                  class="user-avatar-img"
+                  (error)="account.avatarUrl = null"
+                />
+                <div *ngIf="!account.avatarUrl" class="user-avatar-fallback">
+                  {{ (account.username || 'U').charAt(0).toUpperCase() }}
+                </div>
+                <div *ngIf="account.tokenStatus === 'invalid'" class="account-avatar-invalid-overlay" [appTooltip]="'TOKEN_HEALTH.INVALID_TOOLTIP' | translate">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round" class="invalid-mark-svg">
+                    <line x1="12" y1="5" x2="12" y2="13"></line>
+                    <line x1="12" y1="18" x2="12.01" y2="18"></line>
+                  </svg>
+                </div>
+              </div>
+              <div class="user-meta-group">
+                <div class="username-link-row">
+                  <a
+                    [href]="customProfileUrl"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="username-link"
+                    [appTooltip]="account.username"
+                    [onlyIfTruncated]="true"
+                  >
+                    <span>{{ account.username }}</span>
+                    <svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="external-icon ml-1">
+                      <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
+                      <polyline points="15 3 21 3 21 9"></polyline>
+                      <line x1="10" y1="14" x2="21" y2="3"></line>
+                    </svg>
+                  </a>
+                  <span class="instance-badge-chip ml-2">
+                    {{ account.instanceName || account.instanceHost }}
+                  </span>
+                  <span *ngIf="account.tokenStatus === 'invalid'" class="status-pill invalid ml-2" [appTooltip]="'TOKEN_HEALTH.INVALID_TOOLTIP' | translate">
+                    <span class="dot"></span>
+                    {{ 'ACCOUNTS.STATUS_INVALID' | translate }}
+                  </span>
+                </div>
+              </div>
+            </div>
 
-          <div class="form-group mb-2 text-left">
-            <label class="form-label-custom">{{ 'ACCOUNTS.INSTANCE_URL_LABEL' | translate }}</label>
-            <input
-              type="text"
-              class="form-control form-control-sm modern-input"
-              [(ngModel)]="gitlabInstanceUrl"
-              [placeholder]="'ACCOUNTS.INSTANCE_URL_PLACEHOLDER' | translate"
-            />
-          </div>
+            <div class="action-buttons-group" [class.is-confirming]="isConfirmingDisconnect">
+              <button
+                type="button"
+                class="btn-action-pill btn-disconnect-action"
+                [class.is-confirming]="isConfirmingDisconnect"
+                (click)="onDisconnectCustomClick($event)"
+                [disabled]="isConnecting"
+                [attr.aria-label]="(isConfirmingDisconnect ? 'CONFIRM' : 'ACCOUNTS.DISCONNECT') | translate"
+              >
+                <span class="btn-morph-content">
+                  <span class="morph-state normal-state">
+                    <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                      <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
+                      <polyline points="16 17 21 12 16 7"></polyline>
+                      <line x1="21" y1="12" x2="9" y2="12"></line>
+                    </svg>
+                    <span>{{ 'ACCOUNTS.DISCONNECT' | translate }}</span>
+                  </span>
+                  <span class="morph-state confirm-state">
+                    <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                      <polyline points="20 6 9 17 4 12"></polyline>
+                    </svg>
+                    <span>{{ 'CONFIRM' | translate }}</span>
+                  </span>
+                </span>
+              </button>
 
-          <div class="form-group mb-3 text-left">
-            <label class="form-label-custom">{{ 'ACCOUNTS.PAT_LABEL' | translate }}</label>
-            <input
-              type="password"
-              class="form-control form-control-sm modern-input"
-              [(ngModel)]="gitlabToken"
-              [placeholder]="'ACCOUNTS.PAT_PLACEHOLDER' | translate"
-            />
-            <small class="form-text-muted mt-1 d-block">{{ 'ACCOUNTS.PAT_HELP' | translate }}</small>
+              <button
+                type="button"
+                class="btn-action-pill btn-cancel-action"
+                [class.is-visible]="isConfirmingDisconnect"
+                (click)="cancelConfirmDisconnect($event)"
+                [attr.aria-label]="'CANCEL' | translate"
+                [attr.tabindex]="isConfirmingDisconnect ? 0 : -1"
+                [attr.aria-hidden]="!isConfirmingDisconnect"
+              >
+                <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                  <line x1="18" y1="6" x2="6" y2="18"></line>
+                  <line x1="6" y1="6" x2="18" y2="18"></line>
+                </svg>
+                <span>{{ 'CANCEL' | translate }}</span>
+              </button>
+            </div>
           </div>
+        </ng-container>
 
-          <!-- Remember Me Option with Risk Info Tooltip (Custom PAT) -->
-          <div class="remember-me-row mb-3 d-flex align-items-center justify-content-center">
-            <label class="remember-me-label d-inline-flex align-items-center mb-0" for="rememberMeCustomCheckbox">
+        <!-- 3B. Add / Connect instance form -->
+        <ng-container *ngIf="showAddCustomInstanceForm || customGitlabAccounts.length === 0">
+          <div class="custom-instance-form">
+            <p class="auth-description mb-3 text-center">
+              {{ 'ACCOUNTS.CUSTOM_GITLAB_INFO' | translate }}
+            </p>
+
+            <div class="form-group mb-2 text-left">
+              <label class="form-label-custom">{{ 'ACCOUNTS.INSTANCE_URL_LABEL' | translate }} *</label>
               <input
-                type="checkbox"
-                id="rememberMeCustomCheckbox"
-                class="remember-me-checkbox-input sr-only"
-                [(ngModel)]="rememberMe"
+                type="text"
+                class="form-control form-control-sm modern-input"
+                [(ngModel)]="gitlabInstanceUrl"
+                [placeholder]="'ACCOUNTS.INSTANCE_URL_PLACEHOLDER' | translate"
               />
-              <span class="remember-me-checkbox-custom mr-2" [class.checked]="rememberMe">
-                <svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="check-icon">
-                  <polyline points="20 6 9 17 4 12"></polyline>
+            </div>
+
+            <div class="form-group mb-2 text-left">
+              <label class="form-label-custom">{{ 'ACCOUNTS.INSTANCE_ALIAS_LABEL' | translate }}</label>
+              <input
+                type="text"
+                class="form-control form-control-sm modern-input"
+                [(ngModel)]="gitlabInstanceAlias"
+                [placeholder]="'ACCOUNTS.INSTANCE_ALIAS_PLACEHOLDER' | translate"
+              />
+            </div>
+
+            <div class="form-group mb-3 text-left">
+              <label class="form-label-custom">{{ 'ACCOUNTS.PAT_LABEL' | translate }} *</label>
+              <input
+                type="password"
+                class="form-control form-control-sm modern-input"
+                [(ngModel)]="gitlabToken"
+                [placeholder]="'ACCOUNTS.PAT_PLACEHOLDER' | translate"
+              />
+              <small class="form-text-muted mt-1 d-block">{{ 'ACCOUNTS.PAT_HELP' | translate }}</small>
+            </div>
+
+            <!-- Remember Me Option with Risk Info Tooltip (Custom PAT) -->
+            <div class="remember-me-row mb-3 d-flex align-items-center justify-content-center">
+              <label class="remember-me-label d-inline-flex align-items-center mb-0" for="rememberMeCustomCheckbox">
+                <input
+                  type="checkbox"
+                  id="rememberMeCustomCheckbox"
+                  class="remember-me-checkbox-input sr-only"
+                  [(ngModel)]="rememberMe"
+                />
+                <span class="remember-me-checkbox-custom mr-2" [class.checked]="rememberMe">
+                  <svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="check-icon">
+                    <polyline points="20 6 9 17 4 12"></polyline>
+                  </svg>
+                </span>
+                <span class="remember-me-text">{{ 'ACCOUNTS.REMEMBER_ME' | translate }}</span>
+              </label>
+
+              <span
+                class="remember-me-info-trigger ml-2"
+                [appTooltip]="'ACCOUNTS.REMEMBER_ME_TOOLTIP' | translate"
+                placement="top"
+                tabindex="0"
+                role="button"
+                [attr.aria-label]="'ACCOUNTS.REMEMBER_ME_TOOLTIP' | translate"
+              >
+                <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <circle cx="12" cy="12" r="10"></circle>
+                  <line x1="12" y1="16" x2="12" y2="12"></line>
+                  <line x1="12" y1="8" x2="12.01" y2="8"></line>
                 </svg>
               </span>
-              <span class="remember-me-text">{{ 'ACCOUNTS.REMEMBER_ME' | translate }}</span>
-            </label>
-
-            <span
-              class="remember-me-info-trigger ml-2"
-              [appTooltip]="'ACCOUNTS.REMEMBER_ME_TOOLTIP' | translate"
-              placement="top"
-              tabindex="0"
-              role="button"
-              [attr.aria-label]="'ACCOUNTS.REMEMBER_ME_TOOLTIP' | translate"
-            >
-              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <circle cx="12" cy="12" r="10"></circle>
-                <line x1="12" y1="16" x2="12" y2="12"></line>
-                <line x1="12" y1="8" x2="12.01" y2="8"></line>
-              </svg>
-            </span>
-          </div>
+            </div>
 
-          <div class="text-center">
-            <button
-              type="button"
-              class="btn-connect-cta"
-              (click)="submitGitlabCustom()"
-              [disabled]="isConnecting || !gitlabInstanceUrl || !gitlabToken"
-            >
-              <span *ngIf="isConnecting" class="spinner-border spinner-border-sm mr-2" role="status"></span>
-              <svg *ngIf="!isConnecting" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2">
-                <path d="M12 2v6m0 0l-3 3m3-3l3 3M7 11h10v5a5 5 0 0 1-10 0v-5z"></path>
-              </svg>
-              <span>{{ 'ACCOUNTS.CONNECT_BTN' | translate }}</span>
-            </button>
+            <div class="d-flex align-items-center justify-content-center" style="gap: 0.75rem;">
+              <button
+                *ngIf="customGitlabAccounts.length > 0"
+                type="button"
+                class="btn-pill-secondary"
+                (click)="cancelAddCustomInstanceForm()"
+              >
+                {{ 'CANCEL' | translate }}
+              </button>
+              <button
+                type="button"
+                class="btn-connect-cta"
+                (click)="submitGitlabCustom()"
+                [disabled]="isConnecting || !gitlabInstanceUrl || !gitlabToken"
+              >
+                <span *ngIf="isConnecting" class="spinner-border spinner-border-sm mr-2" role="status"></span>
+                <svg *ngIf="!isConnecting" viewBox="0 0 512 512" width="16" height="16" fill="currentColor" class="brand-svg mr-2">
+                  <path d="M105.2 24.9c-3.1-8.9-15.7-8.9-18.9 0L29.8 199.7h132c-.1 0-56.6-174.8-56.6-174.8zM.9 287.7c-2.6 8 .3 16.9 7.1 22l247.9 184-226.2-294zm160.8-88l94.3 294 94.3-294zm349.4 88l-28.8-88-226.3 294 247.9-184c6.9-5.1 9.7-14 7.2-22zM425.7 24.9c-3.1-8.9-15.7-8.9-18.9 0l-56.6 174.8h132z"/>
+                </svg>
+                <span>{{ 'ACCOUNTS.CONNECT_BTN' | translate }}</span>
+              </button>
+            </div>
           </div>
-        </div>
+        </ng-container>
       </ng-container>
 
       <!-- Error banner inside card if any -->
@@ -257,7 +418,7 @@ <h5 class="modal-title m-0">
 
 <!-- Reusable Template: Connected State -->
 <ng-template #connectedPanel let-provider="provider" let-account="account">
-  <div class="connected-user-panel">
+  <div class="connected-user-panel" [class.is-invalid-token]="isCurrentTokenInvalid">
     <div class="user-profile-row">
       <div class="avatar-container mr-3">
         <img
@@ -270,6 +431,12 @@ <h5 class="modal-title m-0">
         <div *ngIf="!account.avatarUrl" class="user-avatar-fallback">
           {{ (account.username || 'U').charAt(0).toUpperCase() }}
         </div>
+        <div *ngIf="isCurrentTokenInvalid" class="account-avatar-invalid-overlay" [appTooltip]="'TOKEN_HEALTH.INVALID_TOOLTIP' | translate">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round" class="invalid-mark-svg">
+            <line x1="12" y1="5" x2="12" y2="13"></line>
+            <line x1="12" y1="18" x2="12.01" y2="18"></line>
+          </svg>
+        </div>
       </div>
       <div class="user-meta-group">
         <div class="username-link-row">
@@ -288,12 +455,15 @@ <h5 class="modal-title m-0">
               <line x1="10" y1="14" x2="21" y2="3"></line>
             </svg>
           </a>
+          <span *ngIf="isCurrentTokenInvalid" class="status-pill invalid ml-2" [appTooltip]="'TOKEN_HEALTH.INVALID_TOOLTIP' | translate">
+            <span class="dot"></span>
+            {{ 'ACCOUNTS.STATUS_INVALID' | translate }}
+          </span>
         </div>
       </div>
     </div>
 
     <div class="action-buttons-group" [class.is-confirming]="isConfirmingDisconnect">
-      <!-- Primary Morphing Button: Disconnect -> Confirm Disconnect -->
       <button
         type="button"
         class="btn-action-pill btn-disconnect-action"
@@ -303,7 +473,6 @@ <h5 class="modal-title m-0">
         [attr.aria-label]="(isConfirmingDisconnect ? 'CONFIRM' : 'ACCOUNTS.DISCONNECT') | translate"
       >
         <span class="btn-morph-content">
-          <!-- Normal Disconnect State -->
           <span class="morph-state normal-state">
             <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
               <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
@@ -312,8 +481,6 @@ <h5 class="modal-title m-0">
             </svg>
             <span>{{ 'ACCOUNTS.DISCONNECT' | translate }}</span>
           </span>
-
-          <!-- Confirm Disconnect State -->
           <span class="morph-state confirm-state">
             <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
               <polyline points="20 6 9 17 4 12"></polyline>
@@ -323,7 +490,6 @@ <h5 class="modal-title m-0">
         </span>
       </button>
 
-      <!-- Secondary Revealing Button: Cancel -->
       <button
         type="button"
         class="btn-action-pill btn-cancel-action"
diff --git a/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.scss b/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.scss
index 1e41a229..93dfc7bb 100644
--- a/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.scss
+++ b/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.scss
@@ -54,12 +54,61 @@
   }
 }
 
+/* Status Pill */
+.status-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.1rem 0.45rem;
+  border-radius: 9999px;
+  font-size: 0.6rem;
+  font-weight: 600;
+  line-height: 1.2;
+
+  .dot {
+    width: 5px;
+    height: 5px;
+    border-radius: 50%;
+  }
+
+  &.connected {
+    background-color: var(--badge-ongoing-bg);
+    color: var(--badge-ongoing-text);
+    border: 1px solid var(--badge-ongoing-border);
+
+    .dot {
+      background-color: var(--color-success);
+    }
+  }
+
+  &.invalid,
+  &.expired {
+    background-color: var(--color-danger-bg);
+    color: var(--color-danger);
+    border: 1px solid var(--color-danger-subtle);
+
+    .dot {
+      background-color: var(--color-danger);
+    }
+  }
+
+  &.coming-soon {
+    background-color: var(--color-hover);
+    color: var(--color-text-muted);
+    border: 1px solid var(--color-border);
+    font-weight: 500;
+    font-size: 0.58rem;
+  }
+}
+
 /* Platform Cards Grid (3 cards row) */
 .platform-cards-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 0.6rem;
   margin-bottom: 1.25rem;
+  position: relative;
+  z-index: 50;
 
   @media (max-width: 580px) {
     grid-template-columns: 1fr;
@@ -150,38 +199,6 @@
     height: 14px;
   }
 
-  .status-pill {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.25rem;
-    padding: 0.1rem 0.45rem;
-    border-radius: 9999px;
-    font-size: 0.6rem;
-    font-weight: 600;
-    line-height: 1.2;
-
-    &.connected {
-      background-color: var(--badge-ongoing-bg);
-      color: var(--badge-ongoing-text);
-      border: 1px solid var(--badge-ongoing-border);
-
-      .dot {
-        width: 5px;
-        height: 5px;
-        border-radius: 50%;
-        background-color: var(--color-success);
-      }
-    }
-
-    &.coming-soon {
-      background-color: var(--color-hover);
-      color: var(--color-text-muted);
-      border: 1px solid var(--color-border);
-      font-weight: 500;
-      font-size: 0.58rem;
-    }
-  }
-
   .platform-info {
     display: flex;
     flex-direction: column;
@@ -197,6 +214,30 @@
     }
   }
 
+  &.platform-card-custom {
+    position: relative;
+
+    &.is-dropdown-open {
+      z-index: 60;
+    }
+
+    .card-chevron {
+      display: inline-block;
+      transform-origin: 50% 50%;
+      font-size: 0.6rem;
+      color: var(--color-text-secondary);
+      transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+
+      &.is-open {
+        transform: rotate(180deg);
+      }
+    }
+
+    &.is-dropdown-open .card-chevron {
+      transform: rotate(180deg);
+    }
+  }
+
   &.is-disabled {
     background-color: var(--color-bg-body);
     border-color: var(--color-border);
@@ -214,8 +255,125 @@
   }
 }
 
+/* Custom GitLab Instances Dropdown */
+.custom-instances-dropdown {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  min-width: 220px;
+  background-color: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
+  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+  z-index: 100;
+  padding: 0.35rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: -6px;
+    left: 0;
+    right: 0;
+    height: 6px;
+  }
+
+  .dropdown-instance-item {
+    background: transparent;
+    border: none;
+    border-radius: 8px;
+    padding: 0.45rem 0.6rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    cursor: pointer;
+    text-align: left;
+    color: var(--color-on-surface);
+    transition: background-color $transition-fast;
+
+    &:hover {
+      background-color: var(--color-hover);
+    }
+
+    &.active {
+      background-color: var(--color-primary-bg);
+      color: var(--color-primary);
+
+      .instance-meta {
+        color: var(--color-primary);
+        opacity: 0.8;
+      }
+    }
+
+    .instance-dot {
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      background-color: var(--color-gitlab);
+      flex-shrink: 0;
+
+      &.is-invalid {
+        background-color: var(--color-danger);
+        box-shadow: 0 0 0 2px var(--color-danger-subtle);
+      }
+    }
+
+    .instance-text {
+      display: flex;
+      flex-direction: column;
+      margin-left: 0.5rem;
+      overflow: hidden;
+
+      .instance-name {
+        font-size: 0.78rem;
+        font-weight: 600;
+        line-height: 1.2;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .instance-meta {
+        font-size: 0.68rem;
+        line-height: 1.2;
+        color: var(--color-text-muted);
+      }
+    }
+
+    .check-mark {
+      font-size: 0.75rem;
+      color: var(--color-primary);
+      margin-left: 0.5rem;
+      flex-shrink: 0;
+    }
+
+    &.add-new {
+      justify-content: flex-start;
+      color: var(--color-primary);
+      font-weight: 500;
+      font-size: 0.76rem;
+
+      &:hover {
+        background-color: var(--color-primary-bg);
+      }
+    }
+  }
+
+  .dropdown-divider {
+    border-top: 1px solid var(--color-border);
+    margin: 0.25rem 0;
+  }
+}
+
 /* Bottom Configuration Card */
 .config-card {
+  position: relative;
+  z-index: 1;
+  isolation: isolate;
   background-color: var(--color-surface);
   border: 1px solid var(--color-border);
   border-radius: 16px;
@@ -344,6 +502,32 @@
     border: 1px solid var(--color-border);
   }
 
+  .account-avatar-invalid-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 38px;
+    height: 38px;
+    border-radius: 50%;
+    background-color: var(--color-danger-bg);
+    backdrop-filter: blur(1.5px);
+    -webkit-backdrop-filter: blur(1.5px);
+    color: var(--color-danger);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1.5px solid var(--color-danger-subtle);
+    box-shadow: 0 1px 4px rgba(220, 38, 38, 0.15);
+    cursor: default;
+    z-index: 1;
+
+    .invalid-mark-svg {
+      width: 18px;
+      height: 18px;
+      filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
+    }
+  }
+
   .online-dot {
     position: absolute;
     bottom: -1px;
@@ -396,6 +580,23 @@
   }
 }
 
+.instance-badge-chip {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.15rem 0.55rem;
+  background-color: var(--color-hover);
+  color: var(--color-text-secondary);
+  border: 1px solid var(--color-border);
+  border-radius: 9999px;
+  font-size: 0.72rem;
+  font-weight: 600;
+  line-height: 1.2;
+  letter-spacing: 0.01em;
+  vertical-align: middle;
+  user-select: none;
+  pointer-events: none;
+}
+
 .gitlab-custom-icon-wrap {
   position: relative;
   display: inline-flex;
diff --git a/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.spec.ts b/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.spec.ts
index eff78181..8fc3b994 100644
--- a/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.spec.ts
+++ b/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.spec.ts
@@ -5,6 +5,7 @@ import { BehaviorSubject } from "rxjs";
 import { AddAccountModalComponent } from "./add-account-modal.component";
 import { GithubAuthService, AuthState } from "@services/github-auth.service";
 import { GitlabAuthService } from "@services/gitlab-auth.service";
+import { GitlabCustomAuthService } from "@services/gitlab-custom-auth.service";
 import { AccountsService } from "@services/accounts.service";
 import { DevFlagsService } from "@services/dev-flags.service";
 import { CustomModalRef } from "@shared/ui/custom-modal/custom-modal-ref";
@@ -15,6 +16,7 @@ describe("AddAccountModalComponent", () => {
   let fixture: ComponentFixture<AddAccountModalComponent>;
   let githubAuthSpy: jasmine.SpyObj<GithubAuthService>;
   let gitlabAuthSpy: jasmine.SpyObj<GitlabAuthService>;
+  let gitlabCustomAuthSpy: jasmine.SpyObj<GitlabCustomAuthService>;
   let accountsServiceSpy: jasmine.SpyObj<AccountsService>;
   let modalRefSpy: jasmine.SpyObj<CustomModalRef>;
   let cloudFlag$: BehaviorSubject<boolean>;
@@ -24,21 +26,27 @@ describe("AddAccountModalComponent", () => {
     cloudFlag$ = new BehaviorSubject<boolean>(false);
     customFlag$ = new BehaviorSubject<boolean>(false);
 
-    githubAuthSpy = jasmine.createSpyObj("GithubAuthService", ["signIn", "signOut", "isSignedIn", "getAccount", "getProfileUrl"], {
-      provider: "github",
-      name: "GitHub",
-      instanceHost: "github.com",
-      token: "mock-token",
-      username: "testuser",
-      avatarUrl: "https://example.com/avatar.jpg",
-      authChange$: new BehaviorSubject<AuthState>({
-        isSignedIn: true,
+    githubAuthSpy = jasmine.createSpyObj(
+      "GithubAuthService",
+      ["signIn", "signOut", "isSignedIn", "getAccount", "getProfileUrl", "checkTokenValidity"],
+      {
+        provider: "github",
+        name: "GitHub",
+        instanceHost: "github.com",
         token: "mock-token",
         username: "testuser",
         avatarUrl: "https://example.com/avatar.jpg",
-        displayName: "Test User",
-      }).asObservable(),
-    });
+        tokenStatus: "valid",
+        authChange$: new BehaviorSubject<AuthState>({
+          isSignedIn: true,
+          token: "mock-token",
+          username: "testuser",
+          avatarUrl: "https://example.com/avatar.jpg",
+          displayName: "Test User",
+          tokenStatus: "valid",
+        }).asObservable(),
+      },
+    );
     githubAuthSpy.isSignedIn.and.returnValue(true);
     githubAuthSpy.getAccount.and.returnValue({
       id: "acc-github-real",
@@ -47,31 +55,46 @@ describe("AddAccountModalComponent", () => {
       username: "testuser",
       avatarUrl: "https://example.com/avatar.jpg",
       isCurrent: true,
+      tokenStatus: "valid",
     });
     githubAuthSpy.getProfileUrl.and.returnValue("https://github.com/testuser");
 
     gitlabAuthSpy = jasmine.createSpyObj(
       "GitlabAuthService",
-      ["signIn", "loginWithPopup", "signOut", "isSignedIn", "getAccount", "getProfileUrl"],
+      ["signIn", "loginWithPopup", "signOut", "isSignedIn", "getAccount", "getProfileUrl", "checkTokenValidity"],
       {
         provider: "gitlab",
         name: "GitLab",
         instanceHost: "gitlab.com",
         token: null,
         currentUser: null,
-        authChange$: new BehaviorSubject({ isSignedIn: false, token: null, user: null }).asObservable(),
+        tokenStatus: "unknown",
+        authChange$: new BehaviorSubject({ isSignedIn: false, token: null, user: null, tokenStatus: "unknown" }).asObservable(),
       },
     );
     gitlabAuthSpy.isSignedIn.and.returnValue(false);
     gitlabAuthSpy.getAccount.and.returnValue(null);
     gitlabAuthSpy.getProfileUrl.and.returnValue("https://gitlab.com");
 
+    gitlabCustomAuthSpy = jasmine.createSpyObj(
+      "GitlabCustomAuthService",
+      ["getAccounts", "getAccount", "getProfileUrl", "connectInstance", "disconnectInstance"],
+      {
+        accountsChange$: new BehaviorSubject([]).asObservable(),
+      },
+    );
+    gitlabCustomAuthSpy.getAccounts.and.returnValue([]);
+    gitlabCustomAuthSpy.getAccount.and.returnValue(null);
+    gitlabCustomAuthSpy.getProfileUrl.and.returnValue("https://gitlab.example.com");
+
     modalRefSpy = jasmine.createSpyObj("CustomModalRef", ["close"]);
 
     accountsServiceSpy = jasmine.createSpyObj("AccountsService", ["getProvider", "disconnectAccount", "getProfileUrl"], {
       isGithubConnected: true,
       isGitlabConnected: false,
     });
+    (accountsServiceSpy as any).gitlabAuthService = gitlabAuthSpy;
+    (accountsServiceSpy as any).gitlabCustomAuthService = gitlabCustomAuthSpy;
     accountsServiceSpy.getProvider.and.callFake((type: string) => {
       if (type === "github") return githubAuthSpy;
       if (type === "gitlab") return gitlabAuthSpy;
@@ -179,4 +202,58 @@ describe("AddAccountModalComponent", () => {
     expect(gitlabAuthSpy.signIn).toHaveBeenCalledWith(true);
     expect(modalRefSpy.close).toHaveBeenCalled();
   });
+
+  it("should connect custom instance with PAT", async () => {
+    const devFlags = TestBed.inject(DevFlagsService);
+    (devFlags as any).gitlabCustomEnabled = true;
+
+    component.selectPlatform("gitlab-custom");
+    component.gitlabInstanceUrl = "https://gitlab.univ-tlse3.fr";
+    component.gitlabInstanceAlias = "UT3";
+    component.gitlabToken = "glpat-test-123";
+    component.rememberMe = true;
+
+    gitlabCustomAuthSpy.connectInstance.and.returnValue(
+      Promise.resolve({
+        id: "acc-gitlab-gitlab.univ-tlse3.fr",
+        provider: "gitlab",
+        instanceHost: "gitlab.univ-tlse3.fr",
+        instanceName: "UT3",
+        username: "prof.turing",
+        avatarUrl: null,
+        isCurrent: false,
+        authType: "pat",
+      }),
+    );
+
+    await component.submitGitlabCustom();
+
+    expect(gitlabCustomAuthSpy.connectInstance).toHaveBeenCalledWith("https://gitlab.univ-tlse3.fr", "glpat-test-123", "UT3", true);
+    expect(modalRefSpy.close).toHaveBeenCalled();
+  });
+
+  it("should toggle custom dropdown and select custom instance", () => {
+    gitlabCustomAuthSpy.getAccounts.and.returnValue([
+      {
+        id: "acc-1",
+        provider: "gitlab",
+        instanceHost: "gitlab.univ-tlse3.fr",
+        instanceName: "UT3",
+        username: "prof.turing",
+        avatarUrl: null,
+        isCurrent: true,
+      },
+    ]);
+
+    expect(component.isCustomDropdownOpen).toBeFalse();
+    const event = new MouseEvent("click");
+    component.onCustomCardClick(event);
+    expect(component.selectedPlatform).toBe("gitlab-custom");
+    expect(component.isCustomDropdownOpen).toBeTrue();
+
+    component.selectCustomInstance("gitlab.univ-tlse3.fr");
+    expect(component.selectedCustomInstanceHost).toBe("gitlab.univ-tlse3.fr");
+    expect(component.isCustomDropdownOpen).toBeFalse();
+    expect(component.showAddCustomInstanceForm).toBeFalse();
+  });
 });
diff --git a/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.ts b/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.ts
index e996410c..025f654b 100644
--- a/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.ts
+++ b/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.ts
@@ -1,11 +1,12 @@
-import { Component, HostListener, OnDestroy, OnInit } from "@angular/core";
-import { Subscription } from "rxjs";
+import { Component, HostListener, OnDestroy, OnInit, ChangeDetectorRef } from "@angular/core";
 import { TranslateService } from "@ngx-translate/core";
 import { CustomModalRef } from "@shared/ui/custom-modal/custom-modal-ref";
 import { AccountsService } from "@services/accounts.service";
 import { DevFlagsService } from "@services/dev-flags.service";
+import { OverlayManagerService, OverlayType } from "@services/overlay-manager.service";
 import { GitAuthProvider } from "@models/GitAuthProvider.model";
-import { Account } from "@models/Account.model";
+import { Account, TokenStatus } from "@models/Account.model";
+import { Subscription } from "rxjs";
 
 @Component({
   selector: "app-add-account-modal",
@@ -20,15 +21,24 @@ export class AddAccountModalComponent implements OnInit, OnDestroy {
   rememberMe = false;
 
   gitlabInstanceUrl = "";
+  gitlabInstanceAlias = "";
   gitlabToken = "";
 
-  private flagsSub: Subscription | null = null;
+  isCustomDropdownOpen = false;
+  showAddCustomInstanceForm = false;
+  selectedCustomInstanceHost: string | null = null;
+
+  private overlaySub?: Subscription;
+  private accountsSub?: Subscription;
+  private boundOutsideClick?: (event: MouseEvent) => void;
 
   constructor(
     public modalRef: CustomModalRef,
     public accountsService: AccountsService,
     public devFlagsService: DevFlagsService,
     private translateService: TranslateService,
+    private overlayManagerService: OverlayManagerService,
+    private cdr: ChangeDetectorRef,
   ) {}
 
   get currentProvider(): GitAuthProvider | undefined {
@@ -54,7 +64,63 @@ export class AddAccountModalComponent implements OnInit, OnDestroy {
   }
 
   get isGitlabConnected(): boolean {
-    return this.accountsService.isGitlabConnected;
+    return Boolean(this.accountsService.gitlabAuthService?.isSignedIn() || this.accountsService.getProvider("gitlab")?.isSignedIn());
+  }
+
+  get githubTokenStatus(): TokenStatus {
+    return this.accountsService.githubAuthService?.tokenStatus || "unknown";
+  }
+
+  get gitlabTokenStatus(): TokenStatus {
+    return this.accountsService.gitlabAuthService?.tokenStatus || "unknown";
+  }
+
+  get isGithubTokenInvalid(): boolean {
+    return this.githubTokenStatus === "invalid";
+  }
+
+  get isGitlabTokenInvalid(): boolean {
+    return this.gitlabTokenStatus === "invalid";
+  }
+
+  get isCurrentTokenInvalid(): boolean {
+    if (this.selectedPlatform === "github") {
+      return this.isGithubTokenInvalid;
+    }
+    if (this.selectedPlatform === "gitlab-cloud") {
+      return this.isGitlabTokenInvalid;
+    }
+    if (this.selectedPlatform === "gitlab-custom" && this.selectedCustomAccount) {
+      return this.selectedCustomAccount.tokenStatus === "invalid";
+    }
+    return false;
+  }
+
+  get customGitlabAccounts(): Account[] {
+    return this.accountsService.gitlabCustomAuthService?.getAccounts() || [];
+  }
+
+  get hasConnectedCustomInstances(): boolean {
+    return Boolean(this.customGitlabAccounts && this.customGitlabAccounts.length > 0);
+  }
+
+  get hasInvalidCustomInstance(): boolean {
+    return this.customGitlabAccounts.some((acc) => acc.tokenStatus === "invalid");
+  }
+
+  get customInstancesCountText(): string {
+    const count = this.customGitlabAccounts.length;
+    if (count === 1) {
+      return this.translateService.instant("ACCOUNTS.INSTANCES_COUNT_SINGULAR");
+    }
+    return this.translateService.instant("ACCOUNTS.INSTANCES_COUNT_PLURAL", { count });
+  }
+
+  get selectedCustomAccount(): Account | null {
+    if (this.selectedCustomInstanceHost) {
+      return this.accountsService.gitlabCustomAuthService?.getAccount(this.selectedCustomInstanceHost) || null;
+    }
+    return this.customGitlabAccounts[0] || null;
   }
 
   get platformAuthTypeKey(): string {
@@ -76,34 +142,71 @@ export class AddAccountModalComponent implements OnInit, OnDestroy {
     return this.accountsService.getProvider("gitlab")?.getProfileUrl() || "https://gitlab.com";
   }
 
+  get customProfileUrl(): string {
+    const acc = this.selectedCustomAccount;
+    if (!acc) {
+      return "#";
+    }
+    return this.accountsService.gitlabCustomAuthService.getProfileUrl(acc.instanceHost, acc.username);
+  }
+
   @HostListener("document:keydown.escape", ["$event"])
   onEscape(event: KeyboardEvent): void {
+    if (this.isCustomDropdownOpen) {
+      event.stopImmediatePropagation();
+      this.isCustomDropdownOpen = false;
+      this.cdr.markForCheck();
+      return;
+    }
     if (this.isConfirmingDisconnect) {
       event.stopImmediatePropagation();
       this.isConfirmingDisconnect = false;
+      this.cdr.markForCheck();
     }
   }
 
   @HostListener("document:click", ["$event"])
   onDocumentClick(event: MouseEvent): void {
-    const target = event.target as HTMLElement;
-    if (this.isConfirmingDisconnect && !target?.closest(".action-buttons-group")) {
-      this.isConfirmingDisconnect = false;
-    }
+    this.handleOutsideClick(event);
   }
 
   ngOnInit(): void {
     this.selectedPlatform = "github";
 
-    this.flagsSub = this.devFlagsService.gitlabCustomEnabled$.subscribe((enabled) => {
-      if (!enabled && this.selectedPlatform === "gitlab-custom") {
-        this.selectedPlatform = "github";
+    this.overlaySub = this.overlayManagerService.dismiss$.subscribe((event) => {
+      if (this.isCustomDropdownOpen && OverlayManagerService.shouldDismiss(OverlayType.DROPDOWN, event)) {
+        this.isCustomDropdownOpen = false;
+        this.cdr.markForCheck();
       }
     });
+
+    if (this.accountsService.gitlabCustomAuthService?.accountsChange$) {
+      this.accountsSub = this.accountsService.gitlabCustomAuthService.accountsChange$.subscribe(() => {
+        if (!this.hasConnectedCustomInstances) {
+          this.isCustomDropdownOpen = false;
+          this.selectedCustomInstanceHost = null;
+          if (this.selectedPlatform === "gitlab-custom") {
+            this.showAddCustomInstanceForm = true;
+          }
+        }
+        this.cdr.markForCheck();
+      });
+    }
+
+    this.boundOutsideClick = (event: MouseEvent) => this.handleOutsideClick(event);
+    document.addEventListener("click", this.boundOutsideClick, { capture: true });
   }
 
   ngOnDestroy(): void {
-    this.flagsSub?.unsubscribe();
+    if (this.boundOutsideClick) {
+      document.removeEventListener("click", this.boundOutsideClick, { capture: true });
+    }
+    if (this.overlaySub) {
+      this.overlaySub.unsubscribe();
+    }
+    if (this.accountsSub) {
+      this.accountsSub.unsubscribe();
+    }
   }
 
   selectPlatform(platform: "github" | "gitlab-cloud" | "gitlab-custom"): void {
@@ -115,6 +218,65 @@ export class AddAccountModalComponent implements OnInit, OnDestroy {
     if (allowed[platform]) {
       this.selectedPlatform = platform;
       this.errorMessage = "";
+      this.isCustomDropdownOpen = false;
+    }
+  }
+
+  onCustomCardClick(event: MouseEvent): void {
+    const target = event.target as HTMLElement;
+    if (target?.closest(".custom-instances-dropdown")) {
+      return;
+    }
+
+    if (this.selectedPlatform !== "gitlab-custom") {
+      this.selectedPlatform = "gitlab-custom";
+      this.errorMessage = "";
+      if (this.hasConnectedCustomInstances) {
+        this.selectedCustomInstanceHost = this.customGitlabAccounts[0].instanceHost;
+        this.showAddCustomInstanceForm = false;
+        this.isCustomDropdownOpen = true;
+      } else {
+        this.showAddCustomInstanceForm = true;
+        this.isCustomDropdownOpen = false;
+      }
+    } else {
+      if (this.hasConnectedCustomInstances) {
+        this.isCustomDropdownOpen = !this.isCustomDropdownOpen;
+      } else {
+        this.isCustomDropdownOpen = false;
+      }
+    }
+
+    if (this.isCustomDropdownOpen) {
+      this.overlayManagerService.dismissAll({ exclude: [OverlayType.DROPDOWN] });
+    }
+    this.cdr.markForCheck();
+  }
+
+  selectCustomInstance(host: string): void {
+    this.selectedCustomInstanceHost = host;
+    this.showAddCustomInstanceForm = false;
+    this.isCustomDropdownOpen = false;
+    this.errorMessage = "";
+  }
+
+  openAddCustomInstanceForm(): void {
+    this.showAddCustomInstanceForm = true;
+    this.isCustomDropdownOpen = false;
+    this.gitlabInstanceUrl = "";
+    this.gitlabInstanceAlias = "";
+    this.gitlabToken = "";
+    this.errorMessage = "";
+  }
+
+  cancelAddCustomInstanceForm(): void {
+    if (this.hasConnectedCustomInstances) {
+      this.showAddCustomInstanceForm = false;
+      if (!this.selectedCustomInstanceHost) {
+        this.selectedCustomInstanceHost = this.customGitlabAccounts[0].instanceHost;
+      }
+      this.errorMessage = "";
+      this.cdr.markForCheck();
     }
   }
 
@@ -144,10 +306,33 @@ export class AddAccountModalComponent implements OnInit, OnDestroy {
   async submitGitlabCustom(): Promise<void> {
     this.isConnecting = true;
     this.errorMessage = "";
-    setTimeout(() => {
+
+    try {
+      const account = await this.accountsService.gitlabCustomAuthService.connectInstance(
+        this.gitlabInstanceUrl,
+        this.gitlabToken,
+        this.gitlabInstanceAlias,
+        this.rememberMe,
+      );
+      this.selectedCustomInstanceHost = account.instanceHost;
+      this.showAddCustomInstanceForm = false;
+      this.gitlabInstanceUrl = "";
+      this.gitlabInstanceAlias = "";
+      this.gitlabToken = "";
+      this.modalRef.close();
+    } catch (err: any) {
+      if (err?.message === "INVALID_PAT") {
+        this.errorMessage = this.translateService.instant("ACCOUNTS.INVALID_PAT");
+      } else if (err?.message === "SERVER_UNREACHABLE") {
+        this.errorMessage = this.translateService.instant("ACCOUNTS.SERVER_UNREACHABLE");
+      } else if (err?.message === "INVALID_HOST") {
+        this.errorMessage = this.translateService.instant("ACCOUNTS.INVALID_HOST");
+      } else {
+        this.errorMessage = err?.message || this.translateService.instant("ACCOUNTS.LOGIN_ERROR");
+      }
+    } finally {
       this.isConnecting = false;
-      this.errorMessage = this.translateService.instant("ACCOUNTS.DEV_MODE_PAT", { url: this.gitlabInstanceUrl });
-    }, 600);
+    }
   }
 
   onDisconnectClick(event?: MouseEvent): void {
@@ -160,6 +345,29 @@ export class AddAccountModalComponent implements OnInit, OnDestroy {
     }
   }
 
+  onDisconnectCustomClick(event?: MouseEvent): void {
+    event?.stopPropagation();
+    if (this.isConfirmingDisconnect) {
+      const targetHost = this.selectedCustomInstanceHost || this.customGitlabAccounts[0]?.instanceHost;
+      if (targetHost) {
+        this.accountsService.gitlabCustomAuthService.disconnectInstance(targetHost);
+        const remaining = this.customGitlabAccounts;
+        if (remaining.length > 0) {
+          this.selectedCustomInstanceHost = remaining[0].instanceHost;
+        } else {
+          this.selectedCustomInstanceHost = null;
+          this.showAddCustomInstanceForm = true;
+          this.isCustomDropdownOpen = false;
+        }
+      }
+      this.isConfirmingDisconnect = false;
+      this.cdr.markForCheck();
+    } else {
+      this.isConfirmingDisconnect = true;
+      this.cdr.markForCheck();
+    }
+  }
+
   cancelConfirmDisconnect(event?: MouseEvent): void {
     event?.stopPropagation();
     this.isConfirmingDisconnect = false;
@@ -168,4 +376,16 @@ export class AddAccountModalComponent implements OnInit, OnDestroy {
   close(): void {
     this.modalRef.close();
   }
+
+  private handleOutsideClick(event: MouseEvent): void {
+    const target = event.target as HTMLElement;
+    if (this.isCustomDropdownOpen && !target?.closest(".platform-card-custom")) {
+      this.isCustomDropdownOpen = false;
+      this.cdr.markForCheck();
+    }
+    if (this.isConfirmingDisconnect && !target?.closest(".action-buttons-group")) {
+      this.isConfirmingDisconnect = false;
+      this.cdr.markForCheck();
+    }
+  }
 }
diff --git a/src/app/components/nav-layouts/sidebar-settings/sidebar-settings.component.html b/src/app/components/nav-layouts/sidebar-settings/sidebar-settings.component.html
index 5e8ca5bb..91f5e0f6 100644
--- a/src/app/components/nav-layouts/sidebar-settings/sidebar-settings.component.html
+++ b/src/app/components/nav-layouts/sidebar-settings/sidebar-settings.component.html
@@ -4,7 +4,7 @@
     <div class="assignments-section">
         <div class="sidebar-section-header">
             <span class="sidebar-section-title">{{ 'SETTINGS.RECENT-ASSIGNMENTS' | translate }}</span>
-            <button class="limit-toggle-pill mr-3" (click)="toggleDisplayLimit()" [title]="'SETTINGS.TOGGLE-DISPLAY-LIMIT' | translate">
+            <button class="limit-toggle-pill mr-3" (click)="toggleDisplayLimit()" [appTooltip]="'SETTINGS.TOGGLE-DISPLAY-LIMIT' | translate">
                 <ng-container *ngIf="displayLimit !== 'all'">{{ displayLimit }}</ng-container>
                 <svg *ngIf="displayLimit === 'all'" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                     <path d="M12 12c-2-2.67-4-4-6-4a4 4 0 1 0 0 8c2 0 4-1.33 6-4Zm0 0c2 2.67 4 4 6 4a4 4 0 1 0 0-8c-2 0-4 1.33-6 4Z"/>
@@ -20,11 +20,11 @@
                             <i class="fab fa-lg" [ngClass]="{'fa-github': assignment.uiType === 'github', 'fa-gitlab': assignment.uiType === 'gitlab'}"></i>
                         </div>
                         <div style="flex: 1; min-width: 0;">
-                            <span class="d-block font-weight-bold" style="color: var(--color-on-surface); font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" [title]="assignment.title">{{ assignment.title }}</span>
-                            <span class="d-block text-muted" style="font-size: 0.7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" [title]="assignment.metadata?.course">{{ assignment.metadata?.course }}</span>
+                            <span class="d-block font-weight-bold" style="color: var(--color-on-surface); font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" [appTooltip]="assignment.title" [onlyIfTruncated]="true">{{ assignment.title }}</span>
+                            <span class="d-block text-muted" style="font-size: 0.7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" [appTooltip]="assignment.metadata?.course" [onlyIfTruncated]="true">{{ assignment.metadata?.course }}</span>
                         </div>
                     </div>
-                    <button class="btn-action-icon" (click)="$event.stopPropagation(); editAssignment(assignment)" title="Paramètres" style="min-width: 32px; min-height: 32px;">
+                    <button class="btn-action-icon" (click)="$event.stopPropagation(); editAssignment(assignment)" [appTooltip]="'SETTINGS.TITLE' | translate" style="min-width: 32px; min-height: 32px;">
                         <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                             <circle cx="12" cy="12" r="3"></circle>
                             <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
@@ -131,6 +131,21 @@
             </label>
         </div>
 
+        <!-- Anonymous Mode Toggle -->
+        <div class="sidebar-item d-flex align-items-center justify-content-between" (click)="anonymizationService.toggleAnonymousMode()">
+            <div class="d-flex align-items-center">
+                <svg class="sidebar-item-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path>
+                    <line x1="1" y1="1" x2="23" y2="23"></line>
+                </svg>
+                <span>{{ "SETTINGS.ANONYMOUS-MODE" | translate }}</span>
+            </div>
+            <label class="modern-toggle ml-3">
+                <input type="checkbox" [checked]="anonymizationService.isAnonymous">
+                <span class="toggle-slider"></span>
+            </label>
+        </div>
+
         <!-- Help Group -->
         <div class="sidebar-section-header mt-3">
             <span class="sidebar-section-title">{{ 'SETTINGS.HELP-TUTORIAL' | translate }}</span>
diff --git a/src/app/components/nav-layouts/sidebar-settings/sidebar-settings.component.ts b/src/app/components/nav-layouts/sidebar-settings/sidebar-settings.component.ts
index cab25c12..195d9f9b 100644
--- a/src/app/components/nav-layouts/sidebar-settings/sidebar-settings.component.ts
+++ b/src/app/components/nav-layouts/sidebar-settings/sidebar-settings.component.ts
@@ -14,6 +14,7 @@ import { TourService } from "@services/tour.service";
 import { CustomModalService } from "@shared/ui/custom-modal/custom-modal.service";
 import { ShortcutsModalComponent } from "@shared/ui/shortcuts-modal/shortcuts-modal.component";
 import { AccountsService } from "@services/accounts.service";
+import { AnonymizationService } from "@services/anonymization.service";
 import { environment } from "@environments/environment";
 
 @Component({
@@ -41,6 +42,7 @@ export class SidebarSettingsComponent implements OnInit, OnDestroy, OnChanges {
 
   constructor(
     public themeService: ThemeService,
+    public anonymizationService: AnonymizationService,
     private databaseService: DatabaseService,
     private dataService: DataService,
     private router: Router,
@@ -109,7 +111,7 @@ export class SidebarSettingsComponent implements OnInit, OnDestroy, OnChanges {
     const filtered = all.filter((a) => {
       const type = this.computeType(a);
       (a as any).uiType = type;
-      return this.accountsService.hasAccount(type);
+      return this.accountsService.hasAccountForHost(type, a.instanceHost || a.resolvedInstanceHost);
     });
 
     // Sort by lastModificationDate descending (most recently modified or opened)
diff --git a/src/app/components/overview-graph-contextual-menu/overview-graph-contextual-menu.component.html b/src/app/components/overview-graph-contextual-menu/overview-graph-contextual-menu.component.html
index e04ea175..e90a94a4 100644
--- a/src/app/components/overview-graph-contextual-menu/overview-graph-contextual-menu.component.html
+++ b/src/app/components/overview-graph-contextual-menu/overview-graph-contextual-menu.component.html
@@ -12,7 +12,7 @@
             <button ngbDropdownItem *ngIf="editSessionMode" (click)="editSession()"><i
                     class="fas fa-pencil-alt fa-sm mr-2"></i>{{
                 'EDIT-SESSION-CONTEXT-MENU' | translate }}</button>
-            <button ngbDropdownItem *ngIf="!editSessionMode" (click)="addSession()"><i
+            <button ngbDropdownItem (click)="addSession()"><i
                     class="fas fa-plus fa-sm mr-2"></i>{{
                 'ADD-SESSION-CONTEXT-MENU' |
                 translate }}</button>
diff --git a/src/app/components/overview-graph-contextual-menu/overview-graph-contextual-menu.component.ts b/src/app/components/overview-graph-contextual-menu/overview-graph-contextual-menu.component.ts
index a086f60d..8a78dd5f 100644
--- a/src/app/components/overview-graph-contextual-menu/overview-graph-contextual-menu.component.ts
+++ b/src/app/components/overview-graph-contextual-menu/overview-graph-contextual-menu.component.ts
@@ -1,13 +1,4 @@
-import {
-  Component,
-  EventEmitter,
-  Input,
-  NgZone,
-  OnDestroy,
-  OnInit,
-  Output,
-  ViewChild,
-} from "@angular/core";
+import { Component, EventEmitter, Input, NgZone, OnDestroy, OnInit, Output, ViewChild } from "@angular/core";
 import { EditMilestoneComponent } from "@components/edit-milestone/edit-milestone.component";
 import { EditSessionComponent } from "@components/edit-session/edit-session.component";
 import { Milestone } from "@models/Milestone.model";
@@ -55,23 +46,16 @@ export class OverviewGraphContextualMenuComponent implements OnInit, OnDestroy {
   constructor(
     private customModalService: CustomModalService,
     private overlayManagerService: OverlayManagerService,
-    private ngZone: NgZone
+    private ngZone: NgZone,
   ) {}
 
   ngOnInit(): void {
     this.setEditModes(false, false);
-    this.overlayManagerService.dismiss$
-      .pipe(takeUntil(this.destroy$))
-      .subscribe((event) => {
-        if (
-          OverlayManagerService.shouldDismiss(
-            OverlayType.CONTEXT_MENU,
-            event
-          )
-        ) {
-          this.close();
-        }
-      });
+    this.overlayManagerService.dismiss$.pipe(takeUntil(this.destroy$)).subscribe((event) => {
+      if (OverlayManagerService.shouldDismiss(OverlayType.CONTEXT_MENU, event)) {
+        this.close();
+      }
+    });
   }
 
   ngOnDestroy(): void {
@@ -151,14 +135,13 @@ export class OverviewGraphContextualMenuComponent implements OnInit, OnDestroy {
 
   addMilestone() {
     this.milestone = null;
-    this.openMilestoneModal(
-      new Milestone(this.date, "", void 0, this.groupFilter)
-    );
+    this.openMilestoneModal(new Milestone(this.date, "", void 0, this.groupFilter));
   }
 
   addSession() {
     this.session = null;
-    let endDate = Utils.addTimeToDate(this.date, this.defaultSessionDuration);
+    this.editSessionMode = false;
+    const endDate = Utils.addTimeToDate(this.date, this.defaultSessionDuration);
     this.openSessionModal(new Session(this.date, endDate, this.groupFilter));
   }
 
@@ -171,10 +154,7 @@ export class OverviewGraphContextualMenuComponent implements OnInit, OnDestroy {
   }
 
   openMilestoneModal(milestone: Milestone) {
-    let modalReference = this.customModalService.open(
-      EditMilestoneComponent,
-      {}
-    );
+    let modalReference = this.customModalService.open(EditMilestoneComponent, {});
     modalReference.componentInstance.milestone = milestone;
     modalReference.componentInstance.addMode = !this.editMilestoneMode;
     modalReference.componentInstance.tpGroups = this.tpGroups;
@@ -190,8 +170,7 @@ export class OverviewGraphContextualMenuComponent implements OnInit, OnDestroy {
   openSessionModal(session: Session) {
     let modalReference = this.customModalService.open(EditSessionComponent, {});
     modalReference.componentInstance.session = session;
-    modalReference.componentInstance.defaultSessionDuration =
-      this.defaultSessionDuration;
+    modalReference.componentInstance.defaultSessionDuration = this.defaultSessionDuration;
     modalReference.componentInstance.addMode = !this.editSessionMode;
     modalReference.componentInstance.tpGroups = this.tpGroups;
     modalReference.result
diff --git a/src/app/components/questions-chooser/questions-chooser.component.html b/src/app/components/questions-chooser/questions-chooser.component.html
index 4addd535..d60daed1 100644
--- a/src/app/components/questions-chooser/questions-chooser.component.html
+++ b/src/app/components/questions-chooser/questions-chooser.component.html
@@ -167,7 +167,7 @@
             (mousedown)="$event.stopPropagation(); $event.preventDefault()"
             [class.active]="showQuickHelp"
             [attr.aria-expanded]="showQuickHelp"
-            [title]="'QUESTIONS-CHOOSER-HELP.TITLE' | translate">
+            [appTooltip]="'QUESTIONS-CHOOSER-HELP.TITLE' | translate">
       <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
         <circle cx="12" cy="12" r="10"></circle>
         <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
diff --git a/src/app/components/questions-chooser/questions-chooser.component.ts b/src/app/components/questions-chooser/questions-chooser.component.ts
index 7a002fdb..7ebbca0e 100644
--- a/src/app/components/questions-chooser/questions-chooser.component.ts
+++ b/src/app/components/questions-chooser/questions-chooser.component.ts
@@ -379,7 +379,7 @@ export class QuestionsChooserComponent implements OnInit, ControlValueAccessor,
   dropPosition: "left" | "right" | null = null;
 
   trackByFn(index: number, item: any): any {
-    return item;
+    return item ? `${item.type}_${item.value}_${index}` : index;
   }
 
   public clearAll() {
@@ -473,9 +473,11 @@ export class QuestionsChooserComponent implements OnInit, ControlValueAccessor,
       } else if (event.key === "ArrowLeft") {
         this.navigateLeft();
         event.preventDefault();
+        event.stopPropagation();
       } else if (event.key === "ArrowRight") {
         this.navigateRight();
         event.preventDefault();
+        event.stopPropagation();
       } else if (event.key === "Delete" || event.key === "Backspace") {
         this.deleteItem(this.selectedPillIndex);
         this.focusAfterDelete();
@@ -745,6 +747,9 @@ export class QuestionsChooserComponent implements OnInit, ControlValueAccessor,
     setTimeout(() => {
       this.focus();
     }, 0);
+    requestAnimationFrame(() => {
+      this.focus();
+    });
   }
 
   addQuestions(tokens: string[]) {
@@ -825,6 +830,7 @@ export class QuestionsChooserComponent implements OnInit, ControlValueAccessor,
   onBackspace() {
     if (!this.question && this.items.length > 0) {
       this.deleteItem(this.items.length - 1);
+      this.focus();
     }
   }
 
@@ -845,6 +851,7 @@ export class QuestionsChooserComponent implements OnInit, ControlValueAccessor,
           event.preventDefault();
         } else if (this.items.length > 0) {
           this.deleteItem(this.items.length - 1);
+          this.focus();
           event.preventDefault();
         }
       } else if (event.key === "ArrowLeft" && this.items.length > 0) {
@@ -880,6 +887,9 @@ export class QuestionsChooserComponent implements OnInit, ControlValueAccessor,
   }
 
   onCloseClick(index: number, event: MouseEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+
     // Find the start of the merged group
     let start = index;
     while (start > 0 && this.items[start - 1].operatorAfter === "AND") {
@@ -893,8 +903,9 @@ export class QuestionsChooserComponent implements OnInit, ControlValueAccessor,
 
     if (this.selectedPillIndex !== null) {
       this.focusAfterDelete();
+    } else {
+      this.focus();
     }
-    event.stopPropagation();
   }
 
   @ViewChildren("editInputs") editInputs: QueryList<ElementRef>;
@@ -1471,6 +1482,10 @@ export class QuestionsChooserComponent implements OnInit, ControlValueAccessor,
 
   writeValue(obj: any): void {
     if (obj) {
+      const areEqual = Array.isArray(obj) && obj.length === this.questions.length && obj.every((q, idx) => q === this.questions[idx]);
+      if (areEqual && this.items.length > 0) {
+        return;
+      }
       this.questions = [...obj];
       // Re-sync items since questions changed externally
       this.syncItemsFromInputs();
diff --git a/src/app/dev-mock/mock-gitlab-instance.service.ts b/src/app/dev-mock/mock-gitlab-instance.service.ts
new file mode 100644
index 00000000..b605458f
--- /dev/null
+++ b/src/app/dev-mock/mock-gitlab-instance.service.ts
@@ -0,0 +1,83 @@
+import { Injectable } from "@angular/core";
+import { GitlabCustomAuthService } from "@services/gitlab-custom-auth.service";
+import { BehaviorSubject, Observable } from "rxjs";
+
+export const MOCK_GITLAB_HOST = "gitlab.univ-tlse3.fr";
+export const MOCK_GITLAB_ALIAS = "UT3";
+export const MOCK_GITLAB_TOKEN = "glpat-mock-turing-token-123";
+
+@Injectable({
+  providedIn: "root",
+})
+export class MockGitlabInstanceService {
+  public isMockActive$: Observable<boolean>;
+
+  private readonly storageKey = "g4s_dev_mock_gitlab_active";
+  private activeSubject: BehaviorSubject<boolean>;
+
+  constructor(private gitlabCustomAuthService: GitlabCustomAuthService) {
+    const isInitiallyActive = this.readSavedState();
+    this.activeSubject = new BehaviorSubject<boolean>(isInitiallyActive);
+    this.isMockActive$ = this.activeSubject.asObservable();
+
+    if (isInitiallyActive && !this.gitlabCustomAuthService.hasAccount(MOCK_GITLAB_HOST)) {
+      this.activateAccount().catch((err) => {
+        console.warn("[MockGitlabInstance] Auto-activation on init failed:", err);
+      });
+    }
+  }
+
+  get isMockActive(): boolean {
+    return this.activeSubject.getValue();
+  }
+
+  async toggleMock(): Promise<boolean> {
+    if (this.isMockActive) {
+      await this.disableMock();
+      return false;
+    } else {
+      await this.enableMock();
+      return true;
+    }
+  }
+
+  async enableMock(): Promise<void> {
+    this.saveState(true);
+    this.activeSubject.next(true);
+    await this.activateAccount();
+  }
+
+  async disableMock(): Promise<void> {
+    this.saveState(false);
+    this.activeSubject.next(false);
+    this.gitlabCustomAuthService.disconnectInstance(MOCK_GITLAB_HOST);
+  }
+
+  private async activateAccount(): Promise<void> {
+    try {
+      await this.gitlabCustomAuthService.connectInstance(`https://${MOCK_GITLAB_HOST}`, MOCK_GITLAB_TOKEN, MOCK_GITLAB_ALIAS, true);
+    } catch (e) {
+      console.error("[MockGitlabInstance] Failed to connect mock account:", e);
+    }
+  }
+
+  private readSavedState(): boolean {
+    try {
+      return localStorage.getItem(this.storageKey) === "true";
+    } catch {
+      return false;
+    }
+  }
+
+  private saveState(active: boolean): void {
+    try {
+      if (active) {
+        localStorage.setItem(this.storageKey, "true");
+      } else {
+        localStorage.removeItem(this.storageKey);
+      }
+    } catch {
+      /* Storage unavailable */
+    }
+  }
+}
diff --git a/src/app/dev-mock/mock-gitlab.interceptor.ts b/src/app/dev-mock/mock-gitlab.interceptor.ts
new file mode 100644
index 00000000..37c79508
--- /dev/null
+++ b/src/app/dev-mock/mock-gitlab.interceptor.ts
@@ -0,0 +1,227 @@
+import { HttpEvent, HttpHandler, HttpHeaders, HttpInterceptor, HttpRequest, HttpResponse } from "@angular/common/http";
+import { Injectable } from "@angular/core";
+import { Observable, of } from "rxjs";
+import { delay } from "rxjs/operators";
+import { MOCK_GITLAB_HOST, MockGitlabInstanceService } from "./mock-gitlab-instance.service";
+
+@Injectable()
+export class MockGitlabInterceptor implements HttpInterceptor {
+  constructor(private mockService: MockGitlabInstanceService) {}
+
+  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    if (!this.mockService.isMockActive || !req.url.includes(MOCK_GITLAB_HOST)) {
+      return next.handle(req);
+    }
+
+    const url = req.url;
+
+    // 1. Current user profile
+    if (url.includes("/api/v4/user")) {
+      return of(
+        new HttpResponse({
+          status: 200,
+          body: {
+            id: 9999,
+            username: "prof.turing",
+            name: "Alan Turing",
+            avatar_url: "https://avatars.githubusercontent.com/u/1083893?v=4",
+            web_url: `https://${MOCK_GITLAB_HOST}/prof.turing`,
+          },
+        }),
+      ).pipe(delay(50));
+    }
+
+    // 2. Project README.md raw content
+    if (url.includes("/repository/files/README%2Emd/raw") || url.includes("/repository/files/README.md/raw")) {
+      const readmeContent = "# UE Algo TP1\nNom: Turing\nPrénom: Alan\nGroupe: TP-1A\n\nTravaux pratiques d'algorithmique.";
+      return of(
+        new HttpResponse({
+          status: 200,
+          body: readmeContent,
+        }),
+      ).pipe(delay(30));
+    }
+
+    // 3. Project IDENTITY.json raw content
+    if (url.includes("/repository/files/IDENTITY%2Ejson/raw") || url.includes("/repository/files/IDENTITY.json/raw")) {
+      const identityContent = JSON.stringify({
+        firstName: "Alan",
+        lastName: "Turing",
+        group: "TP-1A",
+      });
+      return of(
+        new HttpResponse({
+          status: 200,
+          body: identityContent,
+        }),
+      ).pipe(delay(30));
+    }
+
+    // 4. Commits list
+    if (url.includes("/repository/commits")) {
+      const commits = [
+        {
+          id: "c1a2b3c4d5e6f7a8b9c0d1e2f3a4b5c6d7e8f9a0",
+          short_id: "c1a2b3c4",
+          title: "Initial commit with project structure",
+          message: "Initial commit with project structure\n",
+          author_name: "Alan Turing",
+          author_email: "alan.turing@univ-tlse3.fr",
+          authored_date: new Date(Date.now() - 7 * 86400000).toISOString(),
+          committer_name: "Alan Turing",
+          committer_email: "alan.turing@univ-tlse3.fr",
+          committed_date: new Date(Date.now() - 7 * 86400000).toISOString(),
+          web_url: `https://${MOCK_GITLAB_HOST}/prof.turing/ue-algo-tp1/-/commit/c1a2b3c4d5e6f7a8b9c0d1e2f3a4b5c6d7e8f9a0`,
+        },
+        {
+          id: "d2e3f4a5b6c7d8e9f0a1b2c3d4e5f6a7b8c9d0e1",
+          short_id: "d2e3f4a5",
+          title: "Feat: implement binary search tree insert and lookup",
+          message: "Feat: implement binary search tree insert and lookup\n",
+          author_name: "Alan Turing",
+          author_email: "alan.turing@univ-tlse3.fr",
+          authored_date: new Date(Date.now() - 5 * 86400000).toISOString(),
+          committer_name: "Alan Turing",
+          committer_email: "alan.turing@univ-tlse3.fr",
+          committed_date: new Date(Date.now() - 5 * 86400000).toISOString(),
+          web_url: `https://${MOCK_GITLAB_HOST}/prof.turing/ue-algo-tp1/-/commit/d2e3f4a5b6c7d8e9f0a1b2c3d4e5f6a7b8c9d0e1`,
+        },
+        {
+          id: "e3f4a5b6c7d8e9f0a1b2c3d4e5f6a7b8c9d0e1f2",
+          short_id: "e3f4a5b6",
+          title: "Fix: balance condition on AVL rotation",
+          message: "Fix: balance condition on AVL rotation\n",
+          author_name: "Alan Turing",
+          author_email: "alan.turing@univ-tlse3.fr",
+          authored_date: new Date(Date.now() - 3 * 86400000).toISOString(),
+          committer_name: "Alan Turing",
+          committer_email: "alan.turing@univ-tlse3.fr",
+          committed_date: new Date(Date.now() - 3 * 86400000).toISOString(),
+          web_url: `https://${MOCK_GITLAB_HOST}/prof.turing/ue-algo-tp1/-/commit/e3f4a5b6c7d8e9f0a1b2c3d4e5f6a7b8c9d0e1f2`,
+        },
+        {
+          id: "f4a5b6c7d8e9f0a1b2c3d4e5f6a7b8c9d0e1f2a3",
+          short_id: "f4a5b6c7",
+          title: "Test: add unit tests for graph traversal algorithms",
+          message: "Test: add unit tests for graph traversal algorithms\n",
+          author_name: "Alan Turing",
+          author_email: "alan.turing@univ-tlse3.fr",
+          authored_date: new Date(Date.now() - 1 * 86400000).toISOString(),
+          committer_name: "Alan Turing",
+          committer_email: "alan.turing@univ-tlse3.fr",
+          committed_date: new Date(Date.now() - 1 * 86400000).toISOString(),
+          web_url: `https://${MOCK_GITLAB_HOST}/prof.turing/ue-algo-tp1/-/commit/f4a5b6c7d8e9f0a1b2c3d4e5f6a7b8c9d0e1f2a3`,
+        },
+      ];
+
+      return of(
+        new HttpResponse({
+          status: 200,
+          body: commits,
+          headers: new HttpHeaders({ "x-next-page": "" }),
+        }),
+      ).pipe(delay(40));
+    }
+
+    // 5. Forks
+    if (url.includes("/forks")) {
+      return of(
+        new HttpResponse({
+          status: 200,
+          body: [],
+          headers: new HttpHeaders({ "x-next-page": "" }),
+        }),
+      ).pipe(delay(20));
+    }
+
+    // 6. Single project details
+    if (url.includes("/api/v4/projects/") && !url.includes("/projects?")) {
+      const match = url.match(/\/api\/v4\/projects\/([^/?]+)/);
+      const encodedId = match ? match[1] : "ue-algo-tp1";
+      const decodedId = decodeURIComponent(encodedId);
+      const slug = decodedId.includes("/") ? decodedId.split("/").pop() : decodedId;
+
+      return of(
+        new HttpResponse({
+          status: 200,
+          body: {
+            id: 101,
+            name: slug || "ue-algo-tp1",
+            path: slug || "ue-algo-tp1",
+            path_with_namespace: `prof.turing/${slug || "ue-algo-tp1"}`,
+            default_branch: "main",
+            web_url: `https://${MOCK_GITLAB_HOST}/prof.turing/${slug || "ue-algo-tp1"}`,
+            description: "Dépôt d'exercices d'algorithmique et structures de données",
+            avatar_url: null,
+            namespace: {
+              name: "prof.turing",
+              path: "prof.turing",
+              avatar_url: null,
+            },
+          },
+        }),
+      ).pipe(delay(30));
+    }
+
+    // 7. Projects list (search or member listing)
+    if (url.includes("/api/v4/projects")) {
+      const mockProjects = [
+        {
+          id: 101,
+          name: "ue-algo-tp1",
+          path: "ue-algo-tp1",
+          path_with_namespace: "prof.turing/ue-algo-tp1",
+          default_branch: "main",
+          web_url: `https://${MOCK_GITLAB_HOST}/prof.turing/ue-algo-tp1`,
+          description: "TP1 - Algorithmique et structures de données",
+          avatar_url: null,
+          namespace: {
+            name: "prof.turing",
+            path: "prof.turing",
+            avatar_url: null,
+          },
+        },
+        {
+          id: 102,
+          name: "ue-algo-tp2",
+          path: "ue-algo-tp2",
+          path_with_namespace: "prof.turing/ue-algo-tp2",
+          default_branch: "main",
+          web_url: `https://${MOCK_GITLAB_HOST}/prof.turing/ue-algo-tp2`,
+          description: "TP2 - Arbres binaires de recherche et tas",
+          avatar_url: null,
+          namespace: {
+            name: "prof.turing",
+            path: "prof.turing",
+            avatar_url: null,
+          },
+        },
+        {
+          id: 103,
+          name: "projet-annuel-dev",
+          path: "projet-annuel-dev",
+          path_with_namespace: "prof.turing/projet-annuel-dev",
+          default_branch: "main",
+          web_url: `https://${MOCK_GITLAB_HOST}/prof.turing/projet-annuel-dev`,
+          description: "Projet de développement logiciel L3 Informatique",
+          avatar_url: null,
+          namespace: {
+            name: "prof.turing",
+            path: "prof.turing",
+            avatar_url: null,
+          },
+        },
+      ];
+
+      return of(
+        new HttpResponse({
+          status: 200,
+          body: mockProjects,
+          headers: new HttpHeaders({ "x-next-page": "" }),
+        }),
+      ).pipe(delay(50));
+    }
+
+    return next.handle(req);
+  }
+}
diff --git a/src/app/interceptors/gitlab-auth.interceptor.spec.ts b/src/app/interceptors/gitlab-auth.interceptor.spec.ts
new file mode 100644
index 00000000..a12c7019
--- /dev/null
+++ b/src/app/interceptors/gitlab-auth.interceptor.spec.ts
@@ -0,0 +1,113 @@
+import { TestBed } from "@angular/core/testing";
+import { HttpClientTestingModule, HttpTestingController } from "@angular/common/http/testing";
+import { HTTP_INTERCEPTORS, HttpClient } from "@angular/common/http";
+import { GitlabAuthInterceptor } from "./gitlab-auth.interceptor";
+import { GitlabAuthService } from "@services/gitlab-auth.service";
+
+describe("GitlabAuthInterceptor", () => {
+  let httpClient: HttpClient;
+  let httpMock: HttpTestingController;
+  let gitlabAuthServiceSpy: jasmine.SpyObj<GitlabAuthService>;
+
+  beforeEach(() => {
+    gitlabAuthServiceSpy = jasmine.createSpyObj<GitlabAuthService>(
+      "GitlabAuthService",
+      ["ensureValidToken", "refreshAccessToken", "isSignedIn"],
+      { instanceHost: "gitlab.com" },
+    );
+
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule],
+      providers: [
+        { provide: GitlabAuthService, useValue: gitlabAuthServiceSpy },
+        {
+          provide: HTTP_INTERCEPTORS,
+          useClass: GitlabAuthInterceptor,
+          multi: true,
+        },
+      ],
+    });
+
+    httpClient = TestBed.inject(HttpClient);
+    httpMock = TestBed.inject(HttpTestingController);
+  });
+
+  afterEach(() => {
+    httpMock.verify();
+  });
+
+  it("should not intercept non-GitLab requests", () => {
+    httpClient.get("/assets/i18n/fr.json").subscribe();
+
+    const req = httpMock.expectOne("/assets/i18n/fr.json");
+    expect(req.request.headers.has("Authorization")).toBeFalse();
+    expect(gitlabAuthServiceSpy.ensureValidToken).not.toHaveBeenCalled();
+    req.flush({});
+  });
+
+  it("should not intercept /oauth/token requests to prevent recursive loop", () => {
+    httpClient.post("https://gitlab.com/oauth/token", {}).subscribe();
+
+    const req = httpMock.expectOne("https://gitlab.com/oauth/token");
+    expect(gitlabAuthServiceSpy.ensureValidToken).not.toHaveBeenCalled();
+    req.flush({});
+  });
+
+  it("should attach Authorization header on GitLab API requests after ensuring valid token", async () => {
+    gitlabAuthServiceSpy.ensureValidToken.and.returnValue(Promise.resolve("valid-token-123"));
+
+    httpClient.get("https://gitlab.com/api/v4/projects").subscribe();
+
+    // Wait for promise resolution from ensureValidToken
+    await Promise.resolve();
+
+    const req = httpMock.expectOne("https://gitlab.com/api/v4/projects");
+    expect(req.request.headers.get("Authorization")).toBe("Bearer valid-token-123");
+    req.flush([]);
+  });
+
+  it("should retry request on 401 response if refreshAccessToken succeeds", async () => {
+    gitlabAuthServiceSpy.ensureValidToken.and.returnValue(Promise.resolve("stale-token"));
+    gitlabAuthServiceSpy.isSignedIn.and.returnValue(true);
+    gitlabAuthServiceSpy.refreshAccessToken.and.returnValue(Promise.resolve("fresh-token-456"));
+
+    httpClient.get("https://gitlab.com/api/v4/projects").subscribe();
+
+    await Promise.resolve();
+
+    // Initial request fails with 401
+    const req1 = httpMock.expectOne("https://gitlab.com/api/v4/projects");
+    expect(req1.request.headers.get("Authorization")).toBe("Bearer stale-token");
+    req1.flush({ message: "401 Unauthorized" }, { status: 401, statusText: "Unauthorized" });
+
+    await Promise.resolve();
+
+    // Retried request with new token
+    const req2 = httpMock.expectOne("https://gitlab.com/api/v4/projects");
+    expect(req2.request.headers.get("Authorization")).toBe("Bearer fresh-token-456");
+    req2.flush([{ id: 1, name: "my-project" }]);
+  });
+
+  it("should forward 401 error if refreshAccessToken returns null", async () => {
+    gitlabAuthServiceSpy.ensureValidToken.and.returnValue(Promise.resolve("stale-token"));
+    gitlabAuthServiceSpy.isSignedIn.and.returnValue(true);
+    gitlabAuthServiceSpy.refreshAccessToken.and.returnValue(Promise.resolve(null));
+
+    let errorReceived: any = null;
+    httpClient.get("https://gitlab.com/api/v4/projects").subscribe({
+      error: (err) => {
+        errorReceived = err;
+      },
+    });
+
+    await Promise.resolve();
+
+    const req = httpMock.expectOne("https://gitlab.com/api/v4/projects");
+    req.flush({ message: "401 Unauthorized" }, { status: 401, statusText: "Unauthorized" });
+
+    await Promise.resolve();
+
+    expect(errorReceived).not.toBeNull();
+    expect(errorReceived.status).toBe(401);
+  });
+});
diff --git a/src/app/interceptors/gitlab-auth.interceptor.ts b/src/app/interceptors/gitlab-auth.interceptor.ts
new file mode 100644
index 00000000..afb09739
--- /dev/null
+++ b/src/app/interceptors/gitlab-auth.interceptor.ts
@@ -0,0 +1,59 @@
+import { Injectable } from "@angular/core";
+import { HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from "@angular/common/http";
+import { from, Observable, throwError } from "rxjs";
+import { catchError, switchMap } from "rxjs/operators";
+import { GitlabAuthService } from "@services/gitlab-auth.service";
+
+@Injectable()
+export class GitlabAuthInterceptor implements HttpInterceptor {
+  constructor(private gitlabAuthService: GitlabAuthService) {}
+
+  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    if (!this.isGitlabApiRequest(req)) {
+      return next.handle(req);
+    }
+
+    return from(this.gitlabAuthService.ensureValidToken()).pipe(
+      switchMap((token) => {
+        const authorizedReq = token ? this.cloneWithAuth(req, token) : req;
+
+        return next.handle(authorizedReq).pipe(
+          catchError((error: any) => {
+            if (error instanceof HttpErrorResponse && error.status === 401 && this.gitlabAuthService.isSignedIn()) {
+              return from(this.gitlabAuthService.refreshAccessToken()).pipe(
+                switchMap((newToken) => {
+                  if (newToken) {
+                    const retriedReq = this.cloneWithAuth(req, newToken);
+                    return next.handle(retriedReq);
+                  }
+                  return throwError(error);
+                }),
+              );
+            }
+            return throwError(error);
+          }),
+        );
+      }),
+    );
+  }
+
+  private isGitlabApiRequest(req: HttpRequest<any>): boolean {
+    const url = req.url;
+
+    // Do not intercept oauth token requests to prevent recursive calls
+    if (url.includes("/oauth/token")) {
+      return false;
+    }
+
+    const host = this.gitlabAuthService.instanceHost;
+    return url.includes("/api/v4/") || (host ? url.includes(host) : false);
+  }
+
+  private cloneWithAuth(req: HttpRequest<any>, token: string): HttpRequest<any> {
+    return req.clone({
+      setHeaders: {
+        Authorization: `Bearer ${token}`,
+      },
+    });
+  }
+}
diff --git a/src/app/models/Account.model.ts b/src/app/models/Account.model.ts
index 8e026c74..75eb6b26 100644
--- a/src/app/models/Account.model.ts
+++ b/src/app/models/Account.model.ts
@@ -1,4 +1,5 @@
 export type GitProviderType = "github" | "gitlab";
+export type TokenStatus = "valid" | "invalid" | "unknown";
 
 export interface Account {
   id: string;
@@ -6,7 +7,10 @@ export interface Account {
   username: string;
   avatarUrl?: string | null;
   instanceHost: string;
+  instanceName?: string;
+  authType?: "oauth" | "pat";
   tokenExpiresInDays?: number | null;
   lastSync?: string;
   isCurrent?: boolean;
+  tokenStatus?: TokenStatus;
 }
diff --git a/src/app/models/Assignment.model.ts b/src/app/models/Assignment.model.ts
index e95993e4..2c34ccec 100644
--- a/src/app/models/Assignment.model.ts
+++ b/src/app/models/Assignment.model.ts
@@ -11,18 +11,6 @@ import { GitProviderType } from "@models/GitAuthProvider.model";
  * milestones (reviews, corrections).
  */
 export class Assignment {
-  id: number;
-  uiStatus?: "prepared" | "ongoing" | "finished" | "default";
-  provider: GitProviderType = "github";
-
-  get uiType(): GitProviderType {
-    return this.provider || "github";
-  }
-
-  set uiType(value: GitProviderType) {
-    this.provider = value || "github";
-  }
-
   @Type(() => Metadata)
   metadata: Metadata;
 
@@ -57,6 +45,12 @@ export class Assignment {
   @Type(() => Repository)
   repositories: Repository[];
 
+  id: number;
+  instanceHost?: string;
+  instanceName?: string;
+  uiStatus?: "prepared" | "ongoing" | "finished" | "default";
+  provider: GitProviderType = "github";
+
   constructor() {
     this.metadata = new Metadata();
     this.reviews = [];
@@ -66,6 +60,36 @@ export class Assignment {
     this.repositories = [];
   }
 
+  get uiType(): GitProviderType {
+    return this.provider || "github";
+  }
+
+  set uiType(value: GitProviderType) {
+    this.provider = value || "github";
+  }
+
+  get resolvedInstanceHost(): string {
+    if (this.instanceHost) {
+      return this.instanceHost;
+    }
+    if (this.provider === "gitlab") {
+      const firstRepoUrl = this.repositories?.[0]?.url;
+      if (firstRepoUrl) {
+        const sshMatch = firstRepoUrl.match(/^git@([^:]+):/);
+        if (sshMatch && sshMatch[1]) {
+          return sshMatch[1];
+        }
+        try {
+          return new URL(firstRepoUrl).hostname;
+        } catch {
+          // ignore invalid url
+        }
+      }
+      return "gitlab.com";
+    }
+    return "github.com";
+  }
+
   get title(): string {
     return this.metadata.title;
   }
diff --git a/src/app/models/GitAuthProvider.model.ts b/src/app/models/GitAuthProvider.model.ts
index a017c7b7..d8cb2804 100644
--- a/src/app/models/GitAuthProvider.model.ts
+++ b/src/app/models/GitAuthProvider.model.ts
@@ -1,17 +1,19 @@
 import { Observable } from "rxjs";
-import { Account, GitProviderType } from "./Account.model";
+import { Account, GitProviderType, TokenStatus } from "./Account.model";
 
-export { GitProviderType } from "./Account.model";
+export { GitProviderType, TokenStatus } from "./Account.model";
 
 export interface GitAuthProvider {
   readonly provider: GitProviderType;
   readonly name: string;
   readonly instanceHost: string;
   readonly authChange$: Observable<any>;
+  tokenStatus: TokenStatus;
 
   isSignedIn(): boolean;
   getAccount(): Account | null;
   signIn(rememberMe?: boolean): Promise<Account | void>;
   signOut(): Promise<void> | void;
   getProfileUrl(username?: string): string;
+  checkTokenValidity(): Observable<boolean>;
 }
diff --git a/src/app/services/accounts.service.spec.ts b/src/app/services/accounts.service.spec.ts
index a51244b3..28e64e73 100644
--- a/src/app/services/accounts.service.spec.ts
+++ b/src/app/services/accounts.service.spec.ts
@@ -2,16 +2,20 @@ import { TestBed } from "@angular/core/testing";
 import { AccountsService } from "./accounts.service";
 import { GithubAuthService, AuthState } from "./github-auth.service";
 import { GitlabAuthService, GitlabAuthState } from "./gitlab-auth.service";
+import { GitlabCustomAuthService } from "./gitlab-custom-auth.service";
 import { GithubDataService } from "./github-data.service";
 import { GitlabDataService } from "./gitlab-data.service";
-import { BehaviorSubject } from "rxjs";
+import { Account } from "@models/Account.model";
+import { BehaviorSubject, of } from "rxjs";
 
 describe("AccountsService", () => {
   let service: AccountsService;
   let authChangeMock$: BehaviorSubject<AuthState>;
   let gitlabAuthChangeMock$: BehaviorSubject<GitlabAuthState>;
+  let customAuthChangeMock$: BehaviorSubject<Account[]>;
   let githubAuthServiceSpy: jasmine.SpyObj<GithubAuthService>;
   let gitlabAuthServiceSpy: jasmine.SpyObj<GitlabAuthService>;
+  let gitlabCustomAuthSpy: jasmine.SpyObj<GitlabCustomAuthService>;
 
   beforeEach(() => {
     authChangeMock$ = new BehaviorSubject<AuthState>({
@@ -28,6 +32,8 @@ describe("AccountsService", () => {
       user: null,
     });
 
+    customAuthChangeMock$ = new BehaviorSubject<Account[]>([]);
+
     githubAuthServiceSpy = {
       provider: "github",
       name: "GitHub",
@@ -36,11 +42,13 @@ describe("AccountsService", () => {
       isSignedIn: jasmine.createSpy("isSignedIn").and.returnValue(false),
       getAccount: jasmine.createSpy("getAccount").and.returnValue(null),
       getProfileUrl: jasmine.createSpy("getProfileUrl").and.callFake((u?: string) => `https://github.com/${u || ""}`),
+      checkTokenValidity: jasmine.createSpy("checkTokenValidity").and.returnValue(of(true)),
       authChange$: authChangeMock$.asObservable(),
       token: null,
       username: null,
       avatarUrl: null,
       displayName: null,
+      tokenStatus: "unknown",
     } as any;
 
     gitlabAuthServiceSpy = {
@@ -51,16 +59,47 @@ describe("AccountsService", () => {
       isSignedIn: jasmine.createSpy("isSignedIn").and.returnValue(false),
       getAccount: jasmine.createSpy("getAccount").and.returnValue(null),
       getProfileUrl: jasmine.createSpy("getProfileUrl").and.callFake((u?: string) => `https://gitlab.com/${u || ""}`),
+      checkTokenValidity: jasmine.createSpy("checkTokenValidity").and.returnValue(of(true)),
       authChange$: gitlabAuthChangeMock$.asObservable(),
       token: null,
       currentUser: null,
+      tokenStatus: "unknown",
     } as any;
 
+    gitlabCustomAuthSpy = jasmine.createSpyObj(
+      "GitlabCustomAuthService",
+      [
+        "getAccounts",
+        "getAccount",
+        "hasAccount",
+        "getTokenStatus",
+        "getProfileUrl",
+        "connectInstance",
+        "disconnectInstance",
+        "checkTokenValidity",
+      ],
+      {
+        accountsChange$: customAuthChangeMock$.asObservable(),
+      },
+    );
+    gitlabCustomAuthSpy.getAccounts.and.returnValue([]);
+    gitlabCustomAuthSpy.getAccount.and.returnValue(null);
+    gitlabCustomAuthSpy.getTokenStatus.and.returnValue("unknown");
+    gitlabCustomAuthSpy.checkTokenValidity.and.returnValue(of(true));
+    gitlabCustomAuthSpy.getProfileUrl.and.callFake((host: string, u: string) => {
+      const clean = (host || "")
+        .trim()
+        .replace(/^https?:\/\//i, "")
+        .replace(/\/.*$/, "");
+      return `https://${clean}/${encodeURIComponent(u)}`;
+    });
+
     TestBed.configureTestingModule({
       providers: [
         AccountsService,
         { provide: GithubAuthService, useValue: githubAuthServiceSpy },
         { provide: GitlabAuthService, useValue: gitlabAuthServiceSpy },
+        { provide: GitlabCustomAuthService, useValue: gitlabCustomAuthSpy },
         { provide: GithubDataService, useValue: null },
         { provide: GitlabDataService, useValue: null },
       ],
@@ -229,9 +268,62 @@ describe("AccountsService", () => {
   it("should return data service if registered", () => {
     const fakeGithubData = { provider: "github" } as any;
     const fakeGitlabData = { provider: "gitlab" } as any;
-    const customService = new AccountsService(githubAuthServiceSpy, gitlabAuthServiceSpy, fakeGithubData, fakeGitlabData);
+    const customService = new AccountsService(
+      githubAuthServiceSpy,
+      gitlabAuthServiceSpy,
+      gitlabCustomAuthSpy,
+      fakeGithubData,
+      fakeGitlabData,
+    );
 
     expect(customService.getDataService("github")).toBe(fakeGithubData);
     expect(customService.getDataService("gitlab")).toBe(fakeGitlabData);
   });
+
+  it("should emit custom GitLab accounts and consider GitLab connected", (done) => {
+    const customAccount: Account = {
+      id: "acc-gitlab-custom",
+      provider: "gitlab",
+      instanceHost: "gitlab.univ-tlse3.fr",
+      instanceName: "UT3",
+      username: "prof.turing",
+      avatarUrl: null,
+      isCurrent: false,
+      authType: "pat",
+    };
+
+    gitlabCustomAuthSpy.getAccounts.and.returnValue([customAccount]);
+    gitlabCustomAuthSpy.hasAccount.and.callFake((host: string) => host === "gitlab.univ-tlse3.fr");
+
+    customAuthChangeMock$.next([customAccount]);
+
+    service.accounts$.subscribe((accounts) => {
+      const found = accounts.find((a) => a.instanceHost === "gitlab.univ-tlse3.fr");
+      if (found) {
+        expect(found.username).toBe("prof.turing");
+        expect(service.isGitlabConnected).toBeTrue();
+        expect(service.hasAccountForHost("gitlab", "gitlab.univ-tlse3.fr")).toBeTrue();
+        done();
+      }
+    });
+  });
+
+  it("should disconnect custom GitLab account via gitlabCustomAuthService", () => {
+    const customAccount: Account = {
+      id: "acc-gitlab-custom",
+      provider: "gitlab",
+      instanceHost: "gitlab.univ-tlse3.fr",
+      instanceName: "UT3",
+      username: "prof.turing",
+      avatarUrl: null,
+      isCurrent: false,
+      authType: "pat",
+    };
+
+    gitlabCustomAuthSpy.getAccounts.and.returnValue([customAccount]);
+    customAuthChangeMock$.next([customAccount]);
+
+    service.disconnectAccount("acc-gitlab-custom");
+    expect(gitlabCustomAuthSpy.disconnectInstance).toHaveBeenCalledWith("gitlab.univ-tlse3.fr");
+  });
 });
diff --git a/src/app/services/accounts.service.ts b/src/app/services/accounts.service.ts
index e9624b7f..9804f322 100644
--- a/src/app/services/accounts.service.ts
+++ b/src/app/services/accounts.service.ts
@@ -1,10 +1,11 @@
 import { Injectable, OnDestroy, Optional } from "@angular/core";
-import { BehaviorSubject, Observable, Subscription } from "rxjs";
+import { BehaviorSubject, Observable, Subscription, of } from "rxjs";
 import { GithubAuthService } from "@services/github-auth.service";
 import { GitlabAuthService } from "@services/gitlab-auth.service";
+import { GitlabCustomAuthService } from "@services/gitlab-custom-auth.service";
 import { GithubDataService } from "@services/github-data.service";
 import { GitlabDataService } from "@services/gitlab-data.service";
-import { Account, GitProviderType } from "@models/Account.model";
+import { Account, GitProviderType, TokenStatus } from "@models/Account.model";
 import { GitAuthProvider } from "@models/GitAuthProvider.model";
 import { GitDataService } from "@models/GitDataService.model";
 
@@ -22,6 +23,7 @@ export class AccountsService implements OnDestroy {
   constructor(
     public githubAuthService: GithubAuthService,
     public gitlabAuthService: GitlabAuthService,
+    @Optional() public gitlabCustomAuthService?: GitlabCustomAuthService,
     @Optional() public githubDataService?: GithubDataService,
     @Optional() public gitlabDataService?: GitlabDataService,
   ) {
@@ -30,6 +32,14 @@ export class AccountsService implements OnDestroy {
     this.registerProvider(this.githubAuthService);
     this.registerProvider(this.gitlabAuthService);
 
+    if (this.gitlabCustomAuthService?.accountsChange$) {
+      this.authSubscription.add(
+        this.gitlabCustomAuthService.accountsChange$.subscribe(() => {
+          this.updateAccounts();
+        }),
+      );
+    }
+
     if (this.githubDataService) {
       this.dataServices.set("github", this.githubDataService);
     }
@@ -49,13 +59,31 @@ export class AccountsService implements OnDestroy {
   }
 
   get isGitlabConnected(): boolean {
-    return this.gitlabAuthService.isSignedIn();
+    const customCount = this.gitlabCustomAuthService?.getAccounts?.()?.length || 0;
+    return this.gitlabAuthService.isSignedIn() || customCount > 0;
   }
 
   hasAccount(providerType: GitProviderType): boolean {
+    if (providerType === "gitlab") {
+      const customCount = this.gitlabCustomAuthService?.getAccounts?.()?.length || 0;
+      return Boolean(this.gitlabAuthService.isSignedIn() || customCount > 0);
+    }
     return Boolean(this.providers.get(providerType)?.isSignedIn());
   }
 
+  hasAccountForHost(provider: GitProviderType, instanceHost?: string): boolean {
+    if (provider === "github") {
+      return this.githubAuthService.isSignedIn();
+    }
+    if (provider === "gitlab") {
+      if (!instanceHost || instanceHost === "gitlab.com") {
+        return this.gitlabAuthService.isSignedIn();
+      }
+      return !!this.gitlabCustomAuthService?.hasAccount?.(instanceHost);
+    }
+    return false;
+  }
+
   getDataService(providerType: GitProviderType = "github"): GitDataService {
     const service = this.dataServices.get(providerType);
     if (!service) {
@@ -72,12 +100,55 @@ export class AccountsService implements OnDestroy {
     return this.providers.get(providerType);
   }
 
+  getActiveProvider(providerType: GitProviderType = "github"): GitAuthProvider | undefined {
+    return this.providers.get(providerType);
+  }
+
+  getTokenStatus(providerType: GitProviderType = "github", instanceHost?: string): TokenStatus {
+    if (providerType === "gitlab" && instanceHost && instanceHost !== "gitlab.com" && this.gitlabCustomAuthService) {
+      return this.gitlabCustomAuthService.getTokenStatus(instanceHost);
+    }
+    const provider = this.providers.get(providerType);
+    return provider?.tokenStatus || "unknown";
+  }
+
+  checkTokenValidity(providerType: GitProviderType = "github", instanceHost?: string): Observable<boolean> {
+    if (providerType === "gitlab" && instanceHost && instanceHost !== "gitlab.com" && this.gitlabCustomAuthService) {
+      return this.gitlabCustomAuthService.checkTokenValidity(instanceHost);
+    }
+    const provider = this.providers.get(providerType);
+    if (provider) {
+      return provider.checkTokenValidity();
+    }
+    return of(false);
+  }
+
+  checkAllTokens(): void {
+    for (const provider of this.providers.values()) {
+      if (provider.isSignedIn()) {
+        provider.checkTokenValidity().subscribe();
+      }
+    }
+    this.gitlabCustomAuthService?.checkTokenValidity().subscribe();
+  }
+
   disconnectAccount(id: string): void {
     const account = this.currentAccounts.find((a) => a.id === id);
     if (account) {
+      if (account.authType === "pat" || (account.provider === "gitlab" && account.instanceHost && account.instanceHost !== "gitlab.com")) {
+        this.gitlabCustomAuthService?.disconnectInstance(account.instanceHost);
+        return;
+      }
       this.providers.get(account.provider)?.signOut();
       return;
     }
+
+    const customMatch = this.gitlabCustomAuthService?.getAccounts?.()?.find((a) => a.id === id || a.instanceHost === id);
+    if (customMatch) {
+      this.gitlabCustomAuthService?.disconnectInstance(customMatch.instanceHost);
+      return;
+    }
+
     for (const provider of this.providers.values()) {
       if (id.includes(provider.provider)) {
         provider.signOut();
@@ -94,14 +165,17 @@ export class AccountsService implements OnDestroy {
     if (!account?.username) {
       return "#";
     }
+    const cleanHost = account.instanceHost ? account.instanceHost.replace(/^https?:\/\//i, "").replace(/\/.*$/, "") : "";
     const provider = account.provider ? this.providers.get(account.provider as GitProviderType) : undefined;
-    if (provider && (!account.instanceHost || account.instanceHost === provider.instanceHost)) {
+    if (account.provider === "gitlab" && cleanHost && cleanHost !== "gitlab.com" && this.gitlabCustomAuthService?.getProfileUrl) {
+      return this.gitlabCustomAuthService.getProfileUrl(cleanHost, account.username);
+    }
+    if (provider && (!cleanHost || cleanHost === provider.instanceHost)) {
       return provider.getProfileUrl(account.username);
     }
     const fallbackHost = provider?.instanceHost || (account.provider === "gitlab" ? "gitlab.com" : "github.com");
-    const host = account.instanceHost || fallbackHost;
-    const cleanHost = host.replace(/^https?:\/\//i, "").replace(/\/.*$/, "");
-    return `https://${cleanHost}/${encodeURIComponent(account.username)}`;
+    const host = cleanHost || fallbackHost;
+    return `https://${host}/${encodeURIComponent(account.username)}`;
   }
 
   private registerProvider(provider: GitAuthProvider): void {
@@ -122,6 +196,11 @@ export class AccountsService implements OnDestroy {
         accounts.push(acc);
       }
     }
+    const customAccounts = this.gitlabCustomAuthService?.getAccounts?.() || [];
+    for (const cAcc of customAccounts) {
+      cAcc.isCurrent = false;
+      accounts.push(cAcc);
+    }
     if (accounts.length > 0) {
       const primaryIdx = accounts.findIndex((a) => a.provider === "github");
       const activeIdx = primaryIdx >= 0 ? primaryIdx : 0;
diff --git a/src/app/services/anonymization.service.spec.ts b/src/app/services/anonymization.service.spec.ts
new file mode 100644
index 00000000..cc4d69b0
--- /dev/null
+++ b/src/app/services/anonymization.service.spec.ts
@@ -0,0 +1,92 @@
+import { TestBed } from "@angular/core/testing";
+import { Commit } from "@models/Commit.model";
+import { Repository } from "@models/Repository.model";
+import { TranslateModule, TranslateService } from "@ngx-translate/core";
+import { AnonymizationService } from "@services/anonymization.service";
+import { DataService } from "@services/data.service";
+
+describe("AnonymizationService", () => {
+  let service: AnonymizationService;
+  let dataService: DataService;
+  let translateService: TranslateService;
+
+  const mockRepositories = [
+    new Repository("https://github.com/org/tp-alice", "Alice Dupont"),
+    new Repository("https://github.com/org/tp-bob", "Bob Martin"),
+    new Repository("https://github.com/org/tp-charlie", "Charlie Durand"),
+  ];
+
+  beforeEach(() => {
+    localStorage.removeItem("git4school_anonymous_mode");
+    TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot()],
+      providers: [
+        AnonymizationService,
+        {
+          provide: DataService,
+          useValue: {
+            repositories: mockRepositories,
+          },
+        },
+      ],
+    });
+
+    service = TestBed.inject(AnonymizationService);
+    dataService = TestBed.inject(DataService);
+    translateService = TestBed.inject(TranslateService);
+
+    translateService.setTranslation("fr", {
+      ANONYMOUS: {
+        STUDENT_LABEL: "Étudiant·e {{index}}",
+        STUDENT_PREFIX: "Étudiant·e",
+        STUDENT_FALLBACK: "Étudiant·e",
+        ANONYMOUS_AUTHOR: "Auteur masqué",
+        ACTIVE_BADGE: "Anonymat actif",
+      },
+    });
+    translateService.use("fr");
+  });
+
+  afterEach(() => {
+    localStorage.removeItem("git4school_anonymous_mode");
+  });
+
+  it("should be created with anonymous mode disabled by default", () => {
+    expect(service).toBeTruthy();
+    expect(service.isAnonymous).toBeFalse();
+  });
+
+  it("should toggle anonymous mode and notify subscribers", (done) => {
+    service.toggleAnonymousMode();
+    expect(service.isAnonymous).toBeTrue();
+
+    service.isAnonymous$.subscribe((isAnon) => {
+      expect(isAnon).toBeTrue();
+      done();
+    });
+  });
+
+  it("should return real name when anonymous mode is disabled", () => {
+    service.setAnonymousMode(false);
+    const repo = mockRepositories[0];
+    expect(service.getDisplayName(repo)).toBe("Alice Dupont");
+  });
+
+  it("should return stable pseudonym when anonymous mode is enabled", () => {
+    service.setAnonymousMode(true);
+    expect(service.getDisplayName(mockRepositories[0])).toBe("Étudiant·e 1");
+    expect(service.getDisplayName(mockRepositories[1])).toBe("Étudiant·e 2");
+    expect(service.getDisplayName(mockRepositories[2])).toBe("Étudiant·e 3");
+  });
+
+  it("should anonymize commit author appropriately", () => {
+    const commit = new Commit("feat: solution", "Alice Dupont", new Date(), "https://github.com/org/tp-alice/commit/123");
+    mockRepositories[0].commits = [commit];
+
+    service.setAnonymousMode(false);
+    expect(service.getCommitAuthorDisplayName(commit, mockRepositories[0])).toBe("Alice Dupont");
+
+    service.setAnonymousMode(true);
+    expect(service.getCommitAuthorDisplayName(commit, mockRepositories[0])).toBe("Étudiant·e 1");
+  });
+});
diff --git a/src/app/services/anonymization.service.ts b/src/app/services/anonymization.service.ts
new file mode 100644
index 00000000..474af94e
--- /dev/null
+++ b/src/app/services/anonymization.service.ts
@@ -0,0 +1,94 @@
+import { Injectable } from "@angular/core";
+import { Commit } from "@models/Commit.model";
+import { Repository } from "@models/Repository.model";
+import { TranslateService } from "@ngx-translate/core";
+import { DataService } from "@services/data.service";
+import { BehaviorSubject, Observable } from "rxjs";
+
+@Injectable({
+  providedIn: "root",
+})
+export class AnonymizationService {
+  private static readonly STORAGE_KEY = "git4school_anonymous_mode";
+
+  public isAnonymous$: Observable<boolean>;
+
+  private isAnonymousSubject: BehaviorSubject<boolean>;
+
+  constructor(private translateService: TranslateService, private dataService: DataService) {
+    const savedState = localStorage.getItem(AnonymizationService.STORAGE_KEY) === "true";
+    this.isAnonymousSubject = new BehaviorSubject<boolean>(savedState);
+    this.isAnonymous$ = this.isAnonymousSubject.asObservable();
+  }
+
+  public get isAnonymous(): boolean {
+    return this.isAnonymousSubject.value;
+  }
+
+  public toggleAnonymousMode(): boolean {
+    const newState = !this.isAnonymous;
+    this.setAnonymousMode(newState);
+    return newState;
+  }
+
+  public setAnonymousMode(value: boolean): void {
+    if (this.isAnonymousSubject.value === value) {
+      return;
+    }
+
+    this.isAnonymousSubject.next(value);
+    localStorage.setItem(AnonymizationService.STORAGE_KEY, String(value));
+  }
+
+  public getDisplayName(repository: Repository | null | undefined): string {
+    if (!repository) {
+      return "";
+    }
+
+    if (!this.isAnonymous) {
+      return repository.name || repository.getNameFromUrl() || "";
+    }
+
+    return this.getAnonymizedName(repository);
+  }
+
+  public getAnonymizedName(repoOrName: Repository | string): string {
+    if (!repoOrName) {
+      return this.translateService.instant("ANONYMOUS.STUDENT_FALLBACK");
+    }
+
+    const index = this.findRepositoryIndex(repoOrName);
+    const studentNumber = index >= 0 ? index + 1 : 1;
+    return this.translateService.instant("ANONYMOUS.STUDENT_LABEL", { index: studentNumber });
+  }
+
+  public getCommitAuthorDisplayName(commit: Commit | null | undefined, repository?: Repository): string {
+    if (!commit) {
+      return "";
+    }
+
+    if (!this.isAnonymous) {
+      return commit.author || "";
+    }
+
+    const targetRepo = repository || this.findRepositoryForCommit(commit);
+    if (targetRepo) {
+      return this.getAnonymizedName(targetRepo);
+    }
+
+    return this.translateService.instant("ANONYMOUS.ANONYMOUS_AUTHOR");
+  }
+
+  private findRepositoryIndex(repoOrName: Repository | string): number {
+    const repos = this.dataService.repositories || [];
+    if (typeof repoOrName === "string") {
+      return repos.findIndex((r) => r.name === repoOrName || r.url === repoOrName);
+    }
+    return repos.findIndex((r) => Repository.isEqual(r, repoOrName) || r.name === repoOrName.name);
+  }
+
+  private findRepositoryForCommit(commit: Commit): Repository | undefined {
+    const repos = this.dataService.repositories || [];
+    return repos.find((r) => r.commits && r.commits.some((c) => c === commit || (commit.url && c.url === commit.url)));
+  }
+}
diff --git a/src/app/services/commits.service.ts b/src/app/services/commits.service.ts
index 3e18ee7a..cd6d7913 100644
--- a/src/app/services/commits.service.ts
+++ b/src/app/services/commits.service.ts
@@ -6,6 +6,7 @@ import { Repository } from "@models/Repository.model";
 import { TranslateService } from "@ngx-translate/core";
 import { Observable, of } from "rxjs";
 import { AccountsService } from "./accounts.service";
+import { GitlabDataService } from "./gitlab-data.service";
 import { Utils } from "./utils";
 
 /**
@@ -28,7 +29,9 @@ export class CommitsService {
     if (!repoTab || repoTab.length === 0) {
       return of([]);
     }
-    const provider: GitProviderType = repoTab[0]?.provider || "github";
+
+    const firstRepo = repoTab[0];
+    const provider = firstRepo?.provider || "github";
     return this.accountsService.getDataService(provider).getRepositories(repoTab, startDate, endDate);
   }
 
@@ -49,14 +52,20 @@ export class CommitsService {
    * @param cursor The cursor of repositories to fetch
    * @param pageLimit The number of repositories to fetch per page
    * @param provider The provider to query ("github" or "gitlab")
+   * @param instanceHost The optional instance host for custom gitlab instances
    * @return An object containing the repositories, a boolean indicating if the results are complete and the next cursor
    */
   getRepositoriesByAuthenticatedUser(
     cursor?: string,
     pageLimit = 100,
     provider: GitProviderType = "github",
+    instanceHost?: string,
   ): Observable<GitDataSearchResult> {
-    return this.accountsService.getDataService(provider).getRepositoriesByAuthenticatedUser(cursor, pageLimit);
+    const dataService = this.accountsService.getDataService(provider);
+    if (provider === "gitlab" && dataService instanceof GitlabDataService) {
+      return dataService.getRepositoriesByAuthenticatedUser(cursor, pageLimit, instanceHost);
+    }
+    return dataService.getRepositoriesByAuthenticatedUser(cursor, pageLimit);
   }
 
   /**
@@ -66,6 +75,7 @@ export class CommitsService {
    * @param cursor The cursor of repositories to fetch
    * @param pageLimit The number of repositories to fetch per page
    * @param provider The provider to query ("github" or "gitlab")
+   * @param instanceHost The optional instance host for custom gitlab instances
    * @return An object containing the repositories, a boolean indicating if the results are complete and the next cursor
    */
   getRepositoriesBySearch(
@@ -73,8 +83,13 @@ export class CommitsService {
     cursor?: string,
     pageLimit = 100,
     provider: GitProviderType = "github",
+    instanceHost?: string,
   ): Observable<GitDataSearchResult> {
-    return this.accountsService.getDataService(provider).getRepositoriesBySearch(searchFilter, cursor, pageLimit);
+    const dataService = this.accountsService.getDataService(provider);
+    if (provider === "gitlab" && dataService instanceof GitlabDataService) {
+      return dataService.getRepositoriesBySearch(searchFilter, cursor, pageLimit, instanceHost);
+    }
+    return dataService.getRepositoriesBySearch(searchFilter, cursor, pageLimit);
   }
 
   /**
diff --git a/src/app/services/database.service.spec.ts b/src/app/services/database.service.spec.ts
new file mode 100644
index 00000000..8fc6c6a1
--- /dev/null
+++ b/src/app/services/database.service.spec.ts
@@ -0,0 +1,101 @@
+import { TestBed } from "@angular/core/testing";
+import { DatabaseService } from "./database.service";
+import { JsonManagerService } from "./json-manager.service";
+import { Assignment } from "@models/Assignment.model";
+import { Repository } from "@models/Repository.model";
+
+describe("DatabaseService", () => {
+  let service: DatabaseService;
+  let jsonManagerSpy: jasmine.SpyObj<JsonManagerService>;
+
+  beforeEach(() => {
+    jsonManagerSpy = jasmine.createSpyObj("JsonManagerService", ["readFile", "saveJsonFile"]);
+
+    TestBed.configureTestingModule({
+      providers: [DatabaseService, { provide: JsonManagerService, useValue: jsonManagerSpy }],
+    });
+    service = TestBed.inject(DatabaseService);
+  });
+
+  afterEach(async () => {
+    try {
+      await service.assignments.clear();
+    } catch {
+      // ignore
+    }
+  });
+
+  it("should be created and define version 5", () => {
+    expect(service).toBeTruthy();
+    expect(service.verno).toBe(5);
+  });
+
+  it("should automatically hydrate provider and instanceHost on legacy assignments in getAllAssignments", async () => {
+    const legacyRaw: any = {
+      id: 101,
+      metadata: { title: "Legacy Assignment" },
+      sessions: [],
+      repositories: [{ url: "https://gitlab.univ-tlse3.fr/turing/tp1.git", name: "tp1" }],
+    };
+
+    await service.assignments.put(legacyRaw);
+
+    const assignments = await service.getAllAssignments();
+    const loaded = assignments.find((a) => a.id === 101);
+
+    expect(loaded).toBeTruthy();
+    expect(loaded?.provider).toBe("github");
+    expect(loaded?.instanceHost).toBe("github.com");
+  });
+
+  it("should automatically resolve gitlab instance host when provider is gitlab in getAllAssignments", async () => {
+    const gitlabLegacyRaw: any = {
+      id: 102,
+      metadata: { title: "GitLab Legacy Assignment" },
+      provider: "gitlab",
+      sessions: [],
+      repositories: [{ url: "https://gitlab.univ-tlse3.fr/turing/tp2.git", name: "tp2" }],
+    };
+
+    await service.assignments.put(gitlabLegacyRaw);
+
+    const assignments = await service.getAllAssignments();
+    const loaded = assignments.find((a) => a.id === 102);
+
+    expect(loaded).toBeTruthy();
+    expect(loaded?.provider).toBe("gitlab");
+    expect(loaded?.instanceHost).toBe("gitlab.univ-tlse3.fr");
+  });
+
+  it("should resolve SSH git repository hostname for gitlab assignment", async () => {
+    const gitlabSshRaw: any = {
+      id: 103,
+      metadata: { title: "GitLab SSH Assignment" },
+      provider: "gitlab",
+      sessions: [],
+      repositories: [{ url: "git@gitlab.irit.fr:group/project.git", name: "project" }],
+    };
+
+    await service.assignments.put(gitlabSshRaw);
+
+    const assignments = await service.getAllAssignments();
+    const loaded = assignments.find((a) => a.id === 103);
+
+    expect(loaded).toBeTruthy();
+    expect(loaded?.provider).toBe("gitlab");
+    expect(loaded?.instanceHost).toBe("gitlab.irit.fr");
+  });
+
+  it("should populate instanceHost and provider when saving assignment", async () => {
+    const assignment = new Assignment();
+    assignment.title = "New Saved Assignment";
+    assignment.provider = "gitlab";
+    assignment.repositories = [new Repository("https://gitlab.example.org/user/repo", "repo")];
+
+    const id = await service.saveAssignment(assignment);
+    const rawStored = await service.assignments.get(id);
+
+    expect(rawStored?.provider).toBe("gitlab");
+    expect(rawStored?.instanceHost).toBe("gitlab.example.org");
+  });
+});
diff --git a/src/app/services/database.service.ts b/src/app/services/database.service.ts
index c9806a19..7a4af4db 100644
--- a/src/app/services/database.service.ts
+++ b/src/app/services/database.service.ts
@@ -79,15 +79,73 @@ export class DatabaseService extends Dexie {
             }
           });
       });
+    this.version(5)
+      .stores({
+        assignments: "++id, metadata.title, provider, instanceHost",
+      })
+      .upgrade((tx) => {
+        return tx
+          .table("assignments")
+          .toCollection()
+          .modify((assignment) => {
+            if (!assignment.provider) {
+              assignment.provider = "github";
+            }
+            if (!assignment.instanceHost) {
+              if (assignment.provider === "gitlab") {
+                const firstRepoUrl = assignment.repositories?.[0]?.url;
+                if (firstRepoUrl) {
+                  const sshMatch = firstRepoUrl.match(/^git@([^:]+):/);
+                  if (sshMatch && sshMatch[1]) {
+                    assignment.instanceHost = sshMatch[1];
+                  } else {
+                    try {
+                      assignment.instanceHost = new URL(firstRepoUrl).hostname;
+                    } catch {
+                      assignment.instanceHost = "gitlab.com";
+                    }
+                  }
+                } else {
+                  assignment.instanceHost = "gitlab.com";
+                }
+              } else {
+                assignment.instanceHost = "github.com";
+              }
+            }
+            if (assignment.repositories && Array.isArray(assignment.repositories)) {
+              assignment.repositories.forEach((repo: any) => {
+                if (!repo.provider) {
+                  repo.provider = assignment.provider || "github";
+                }
+              });
+            }
+          });
+      });
     this.assignments = this.table("assignments");
     this.assignments.mapToClass(Assignment);
   }
 
   getAllAssignments(): Promise<Assignment[]> {
-    return this.assignments.toArray().then((assignments) => plainToClass(Assignment, assignments));
+    return this.assignments.toArray().then((assignments) =>
+      plainToClass(Assignment, assignments).map((assignment) => {
+        if (!assignment.provider) {
+          assignment.provider = "github";
+        }
+        if (!assignment.instanceHost) {
+          assignment.instanceHost = assignment.resolvedInstanceHost;
+        }
+        return assignment;
+      }),
+    );
   }
 
   saveAssignment(assignment: Assignment): Promise<number> {
+    if (!assignment.provider) {
+      assignment.provider = "github";
+    }
+    if (!assignment.instanceHost) {
+      assignment.instanceHost = assignment.resolvedInstanceHost;
+    }
     return this.assignments.put(assignment).then((id) => {
       this.dbChanged.next();
       return id;
@@ -101,7 +159,19 @@ export class DatabaseService extends Dexie {
   }
 
   getAssignmentById(id: number): Promise<Assignment> {
-    return this.assignments.get(id).then((assignment) => plainToClass(Assignment, assignment));
+    return this.assignments.get(id).then((assignment) => {
+      if (!assignment) {
+        return assignment;
+      }
+      const hydrated = plainToClass(Assignment, assignment);
+      if (!hydrated.provider) {
+        hydrated.provider = "github";
+      }
+      if (!hydrated.instanceHost) {
+        hydrated.instanceHost = hydrated.resolvedInstanceHost;
+      }
+      return hydrated;
+    });
   }
 
   exportDB(): Promise<any> {
diff --git a/src/app/services/github-auth.service.spec.ts b/src/app/services/github-auth.service.spec.ts
index a5238bce..bb23e7f8 100644
--- a/src/app/services/github-auth.service.spec.ts
+++ b/src/app/services/github-auth.service.spec.ts
@@ -151,6 +151,7 @@ describe("GithubAuthService", () => {
     );
 
     const newService = new GithubAuthService(routerSpy, TestBed.inject(HttpClient), toastSpy, tokenStorageService);
+    httpMock.expectOne("https://api.github.com/rate_limit").flush({});
 
     expect(newService.isSignedIn()).toBeTrue();
     expect(newService.token).toBe("gho_saved_token");
diff --git a/src/app/services/github-auth.service.ts b/src/app/services/github-auth.service.ts
index c5da93e0..0aa53532 100644
--- a/src/app/services/github-auth.service.ts
+++ b/src/app/services/github-auth.service.ts
@@ -5,8 +5,9 @@ import { TranslateService } from "@ngx-translate/core";
 import * as firebase from "firebase/app";
 import { auth } from "firebase/app";
 import "firebase/auth";
-import { BehaviorSubject, Observable } from "rxjs";
-import { Account, GitProviderType } from "@models/Account.model";
+import { BehaviorSubject, Observable, of } from "rxjs";
+import { catchError, map, shareReplay, tap } from "rxjs/operators";
+import { Account, GitProviderType, TokenStatus } from "@models/Account.model";
 import { GitAuthProvider } from "@models/GitAuthProvider.model";
 import { TokenStorageService } from "@services/token-storage.service";
 import { ToastService } from "./toast.service";
@@ -17,6 +18,7 @@ export interface AuthState {
   username: string | null;
   avatarUrl: string | null;
   displayName: string | null;
+  tokenStatus?: TokenStatus;
 }
 
 /**
@@ -36,6 +38,7 @@ export class GithubAuthService implements GitAuthProvider {
   avatarUrl: string | null = null;
   displayName: string | null = null;
   loading = false;
+  tokenStatus: TokenStatus = "unknown";
 
   public authChange$ = new BehaviorSubject<AuthState>({
     isSignedIn: false,
@@ -43,8 +46,11 @@ export class GithubAuthService implements GitAuthProvider {
     username: null,
     avatarUrl: null,
     displayName: null,
+    tokenStatus: "unknown",
   });
 
+  private validityCheck$: Observable<boolean> | null = null;
+
   constructor(
     private router: Router,
     private http: HttpClient,
@@ -81,6 +87,7 @@ export class GithubAuthService implements GitAuthProvider {
       username,
       avatarUrl: this.avatarUrl || `https://avatars.githubusercontent.com/${username}`,
       isCurrent: true,
+      tokenStatus: this.tokenStatus,
     };
   }
 
@@ -119,6 +126,7 @@ export class GithubAuthService implements GitAuthProvider {
       this.username = null;
       this.avatarUrl = null;
       this.displayName = null;
+      this.tokenStatus = "unknown";
       this.tokenStorageService.clearAll("github");
       localStorage.removeItem("dev_github_token");
       localStorage.removeItem("github_username");
@@ -150,6 +158,52 @@ export class GithubAuthService implements GitAuthProvider {
     return this.http.get(url, httpOptions);
   }
 
+  checkTokenValidity(): Observable<boolean> {
+    if (!this.token) {
+      this.tokenStatus = "unknown";
+      this.notifyAuthChange();
+      return of(false);
+    }
+
+    if (this.validityCheck$) {
+      return this.validityCheck$;
+    }
+
+    const httpOptions = {
+      headers: new HttpHeaders({
+        Authorization: "token " + this.token,
+      }),
+    };
+
+    this.validityCheck$ = this.http.get("https://api.github.com/rate_limit", httpOptions).pipe(
+      map(() => {
+        this.tokenStatus = "valid";
+        this.notifyAuthChange();
+        return true;
+      }),
+      catchError((error) => {
+        if (error?.status === 401 || error?.status === 403) {
+          this.tokenStatus = "invalid";
+          this.notifyAuthChange();
+        }
+        return of(false);
+      }),
+      tap(() => {
+        this.validityCheck$ = null;
+      }),
+      shareReplay(1),
+    );
+
+    return this.validityCheck$;
+  }
+
+  markTokenInvalid(): void {
+    if (this.tokenStatus !== "invalid") {
+      this.tokenStatus = "invalid";
+      this.notifyAuthChange();
+    }
+  }
+
   async fetchUserProfile(rememberMe?: boolean): Promise<void> {
     if (!this.token) {
       return;
@@ -171,7 +225,10 @@ export class GithubAuthService implements GitAuthProvider {
         },
         isRemembered,
       );
-    } catch (e) {
+    } catch (e: any) {
+      if (e?.status === 401 || e?.status === 403) {
+        this.markTokenInvalid();
+      }
       console.warn("Could not fetch GitHub profile via API:", e);
     }
   }
@@ -189,11 +246,13 @@ export class GithubAuthService implements GitAuthProvider {
       this.username = storedUser?.username || null;
       this.avatarUrl = storedUser?.avatarUrl || null;
       this.displayName = storedUser?.displayName || null;
+      this.checkTokenValidity().subscribe();
     } else {
       this.token = null;
       this.username = null;
       this.avatarUrl = null;
       this.displayName = null;
+      this.tokenStatus = "unknown";
     }
 
     this.notifyAuthChange();
@@ -236,6 +295,7 @@ export class GithubAuthService implements GitAuthProvider {
   private handleAuthResult(result: any, rememberMe = false): void {
     this.token = result?.credential?.accessToken ?? this.token;
     if (this.token) {
+      this.tokenStatus = "valid";
       this.tokenStorageService.saveToken("github", this.token, rememberMe);
     }
     this.updateProfile(
@@ -258,6 +318,7 @@ export class GithubAuthService implements GitAuthProvider {
       username: this.username,
       avatarUrl: this.avatarUrl,
       displayName: this.displayName,
+      tokenStatus: this.tokenStatus,
     });
   }
 }
diff --git a/src/app/services/github-data.service.ts b/src/app/services/github-data.service.ts
index 063aed8e..8b27ee8c 100644
--- a/src/app/services/github-data.service.ts
+++ b/src/app/services/github-data.service.ts
@@ -178,6 +178,9 @@ export class GithubDataService implements GitDataService {
           };
         }),
         catchError((err) => {
+          if (err?.status === 401 || err?.status === 403) {
+            this.githubAuthService.markTokenInvalid();
+          }
           console.error("Error fetching authenticated GitHub user repositories", err);
           return of({
             completed: true,
@@ -645,6 +648,9 @@ ${this.getCommitHistoryQueryFragment(historyArgs)}
           }
         }),
         catchError((error) => {
+          if (error?.status === 401 || error?.status === 403) {
+            this.githubAuthService.markTokenInvalid();
+          }
           console.error("GraphQL batch error", error);
           return of(repoTab);
         }),
@@ -711,6 +717,9 @@ ${this.getCommitHistoryQueryFragment(`first: 100, after: "${info.cursor}", since
           }
         }),
         catchError((error) => {
+          if (error?.status === 401 || error?.status === 403) {
+            this.githubAuthService.markTokenInvalid();
+          }
           console.error("fetchRemainingCommits batch error", error);
           return of(null);
         }),
diff --git a/src/app/services/gitlab-auth.service.spec.ts b/src/app/services/gitlab-auth.service.spec.ts
index 054f6345..cfb3101e 100644
--- a/src/app/services/gitlab-auth.service.spec.ts
+++ b/src/app/services/gitlab-auth.service.spec.ts
@@ -1,3 +1,4 @@
+import { HttpClient } from "@angular/common/http";
 import { TestBed } from "@angular/core/testing";
 import { HttpClientTestingModule, HttpTestingController } from "@angular/common/http/testing";
 import { GitlabAuthService } from "./gitlab-auth.service";
@@ -105,9 +106,97 @@ describe("GitlabAuthService", () => {
     tokenStorage.saveToken("gitlab", "stored-gl-token", true);
     tokenStorage.saveUserData("gitlab", { id: 123, username: "stored_user", name: "Stored", avatar_url: "", web_url: "" }, true);
 
-    const freshService = new GitlabAuthService(httpMock as any, tokenStorage);
+    const httpClient = TestBed.inject(HttpClient);
+    const freshService = new GitlabAuthService(httpClient, tokenStorage);
     expect(freshService.isSignedIn()).toBeTrue();
     expect(freshService.token).toBe("stored-gl-token");
     expect(freshService.currentUser?.username).toBe("stored_user");
   });
+
+  it("should successfully refresh access token and rotate refresh token", async () => {
+    const tokenStorage = TestBed.inject(GitlabAuthService)["tokenStorageService"];
+    tokenStorage.saveToken("gitlab", "old-access-token", true, 7200, "old-refresh-token");
+    service.currentUser = { id: 1, username: "tanuki", name: "Tanuki", avatar_url: "", web_url: "" };
+
+    const refreshPromise = service.refreshAccessToken();
+
+    const req = httpMock.expectOne("https://gitlab.com/oauth/token");
+    expect(req.request.method).toBe("POST");
+    expect(req.request.body).toContain("grant_type=refresh_token");
+    expect(req.request.body).toContain("refresh_token=old-refresh-token");
+
+    req.flush({
+      access_token: "new-access-token",
+      token_type: "Bearer",
+      expires_in: 7200,
+      refresh_token: "new-refresh-token",
+    });
+
+    const result = await refreshPromise;
+    expect(result).toBe("new-access-token");
+    expect(service.token).toBe("new-access-token");
+    expect(tokenStorage.getToken("gitlab")).toBe("new-access-token");
+    expect(tokenStorage.getRefreshToken("gitlab")).toBe("new-refresh-token");
+  });
+
+  it("should deduplicate concurrent refresh calls into a single HTTP request (mutex)", async () => {
+    const tokenStorage = TestBed.inject(GitlabAuthService)["tokenStorageService"];
+    tokenStorage.saveToken("gitlab", "old-token", true, 7200, "initial-refresh-token");
+    service.currentUser = { id: 1, username: "tanuki", name: "Tanuki", avatar_url: "", web_url: "" };
+
+    // Fire 3 simultaneous refresh calls
+    const promise1 = service.refreshAccessToken();
+    const promise2 = service.refreshAccessToken();
+    const promise3 = service.refreshAccessToken();
+
+    // Exactly one HTTP request should be sent
+    const req = httpMock.expectOne("https://gitlab.com/oauth/token");
+    req.flush({
+      access_token: "deduped-access-token",
+      token_type: "Bearer",
+      expires_in: 7200,
+      refresh_token: "rotated-refresh-token",
+    });
+
+    const [res1, res2, res3] = await Promise.all([promise1, promise2, promise3]);
+    expect(res1).toBe("deduped-access-token");
+    expect(res2).toBe("deduped-access-token");
+    expect(res3).toBe("deduped-access-token");
+    expect(service.token).toBe("deduped-access-token");
+  });
+
+  it("should sign out when refresh token is invalid or revoked (invalid_grant)", async () => {
+    const tokenStorage = TestBed.inject(GitlabAuthService)["tokenStorageService"];
+    tokenStorage.saveToken("gitlab", "stale-access", true, 7200, "revoked-refresh");
+    service.token = "stale-access";
+    service.currentUser = { id: 1, username: "tanuki", name: "Tanuki", avatar_url: "", web_url: "" };
+
+    const refreshPromise = service.refreshAccessToken();
+
+    const req = httpMock.expectOne("https://gitlab.com/oauth/token");
+    req.flush(
+      { error: "invalid_grant", error_description: "The provided authorization grant is invalid, expired, or revoked" },
+      { status: 400, statusText: "Bad Request" },
+    );
+
+    const result = await refreshPromise;
+    expect(result).toBeNull();
+    expect(service.isSignedIn()).toBeFalse();
+    expect(service.token).toBeNull();
+    expect(service.currentUser).toBeNull();
+    expect(tokenStorage.getToken("gitlab")).toBeNull();
+    expect(tokenStorage.getRefreshToken("gitlab")).toBeNull();
+  });
+
+  it("should ensure valid token without refresh if token is still valid and not expiring soon", async () => {
+    const tokenStorage = TestBed.inject(GitlabAuthService)["tokenStorageService"];
+    // Token valid for 2 hours (7200s)
+    tokenStorage.saveToken("gitlab", "current-valid-token", true, 7200, "valid-refresh");
+    service.token = "current-valid-token";
+    service.currentUser = { id: 1, username: "tanuki", name: "Tanuki", avatar_url: "", web_url: "" };
+
+    const token = await service.ensureValidToken();
+    expect(token).toBe("current-valid-token");
+    httpMock.expectNone("https://gitlab.com/oauth/token");
+  });
 });
diff --git a/src/app/services/gitlab-auth.service.ts b/src/app/services/gitlab-auth.service.ts
index 7243e698..07d3ab6b 100644
--- a/src/app/services/gitlab-auth.service.ts
+++ b/src/app/services/gitlab-auth.service.ts
@@ -1,7 +1,8 @@
 import { HttpClient, HttpHeaders, HttpParams } from "@angular/common/http";
 import { Injectable } from "@angular/core";
-import { BehaviorSubject, Observable } from "rxjs";
-import { Account, GitProviderType } from "@models/Account.model";
+import { BehaviorSubject, Observable, from, of } from "rxjs";
+import { catchError, map, switchMap } from "rxjs/operators";
+import { Account, GitProviderType, TokenStatus } from "@models/Account.model";
 import { GitAuthProvider } from "@models/GitAuthProvider.model";
 import { TokenStorageService } from "@services/token-storage.service";
 import { environment } from "../../environments/environment";
@@ -18,6 +19,7 @@ export interface GitlabAuthState {
   isSignedIn: boolean;
   token: string | null;
   user: GitlabUser | null;
+  tokenStatus?: TokenStatus;
 }
 
 interface TokenResponse {
@@ -41,24 +43,29 @@ export class GitlabAuthService implements GitAuthProvider {
   token: string | null = null;
   currentUser: GitlabUser | null = null;
   loading = false;
+  tokenStatus: TokenStatus = "unknown";
 
   public authChange$ = new BehaviorSubject<GitlabAuthState>({
     isSignedIn: false,
     token: null,
     user: null,
+    tokenStatus: "unknown",
   });
 
   private clientId = environment.gitlab?.clientId || "";
   private redirectUri = environment.gitlab?.redirectUri || "/auth/callback";
   private instanceUrl = (environment.gitlab?.instanceUrl || "https://gitlab.com").replace(/\/+$/, "");
   private scope = environment.gitlab?.scope || "read_api read_user";
+  private refreshPromise: Promise<string | null> | null = null;
+  private refreshTimer: any = null;
+  private readonly refreshBufferSeconds = 300;
 
   constructor(private http: HttpClient, private tokenStorageService: TokenStorageService) {
     this.restoreSession();
   }
 
   isSignedIn(): boolean {
-    return !!(this.token && this.currentUser);
+    return !!((this.token || this.tokenStorageService.getRefreshToken("gitlab")) && this.currentUser);
   }
 
   getAccount(): Account | null {
@@ -72,6 +79,7 @@ export class GitlabAuthService implements GitAuthProvider {
       username: this.currentUser.username,
       avatarUrl: this.currentUser.avatar_url || null,
       isCurrent: false,
+      tokenStatus: this.tokenStatus,
     };
   }
 
@@ -129,10 +137,12 @@ export class GitlabAuthService implements GitAuthProvider {
 
       this.token = accessToken;
       this.currentUser = user;
+      this.tokenStatus = "valid";
 
-      this.tokenStorageService.saveToken("gitlab", accessToken, rememberMe, tokenResponse.expires_in);
+      this.tokenStorageService.saveToken("gitlab", accessToken, rememberMe, tokenResponse.expires_in, tokenResponse.refresh_token);
       this.tokenStorageService.saveUserData("gitlab", user, rememberMe);
 
+      this.scheduleProactiveRefresh(tokenResponse.expires_in);
       this.notifyAuthChange();
       return user;
     } finally {
@@ -142,9 +152,79 @@ export class GitlabAuthService implements GitAuthProvider {
     }
   }
 
+  async refreshAccessToken(): Promise<string | null> {
+    if (this.refreshPromise) {
+      return this.refreshPromise;
+    }
+
+    this.refreshPromise = this.performTokenRefresh().finally(() => {
+      this.refreshPromise = null;
+    });
+
+    return this.refreshPromise;
+  }
+
+  async ensureValidToken(): Promise<string | null> {
+    const isExpiring = this.tokenStorageService.isTokenExpired("gitlab", this.refreshBufferSeconds);
+    if (this.token && !isExpiring) {
+      return this.token;
+    }
+
+    if (this.tokenStorageService.getRefreshToken("gitlab")) {
+      return this.refreshAccessToken();
+    }
+
+    return this.token;
+  }
+
+  checkTokenValidity(): Observable<boolean> {
+    if (!this.isSignedIn()) {
+      this.tokenStatus = "unknown";
+      this.notifyAuthChange();
+      return of(false);
+    }
+
+    return from(this.ensureValidToken()).pipe(
+      switchMap((validToken) => {
+        if (!validToken) {
+          this.tokenStatus = "invalid";
+          this.notifyAuthChange();
+          return of(false);
+        }
+        const userUrl = `${this.instanceUrl}/api/v4/user`;
+        const headers = new HttpHeaders({
+          Authorization: `Bearer ${validToken}`,
+        });
+        return this.http.get<GitlabUser>(userUrl, { headers }).pipe(
+          map(() => {
+            this.tokenStatus = "valid";
+            this.notifyAuthChange();
+            return true;
+          }),
+          catchError((err) => {
+            if (err?.status === 401 || err?.status === 403) {
+              this.tokenStatus = "invalid";
+              this.notifyAuthChange();
+            }
+            return of(false);
+          }),
+        );
+      }),
+    );
+  }
+
+  markTokenInvalid(): void {
+    if (this.tokenStatus !== "invalid") {
+      this.tokenStatus = "invalid";
+      this.notifyAuthChange();
+    }
+  }
+
   signOut(): void {
+    this.clearRefreshTimer();
     this.token = null;
     this.currentUser = null;
+    this.tokenStatus = "unknown";
     this.tokenStorageService.clearAll("gitlab");
     this.notifyAuthChange();
   }
@@ -306,6 +386,83 @@ export class GitlabAuthService implements GitAuthProvider {
     return this.http.post<TokenResponse>(tokenUrl, body.toString(), { headers }).toPromise();
   }
 
+  private refreshCodeForToken(refreshToken: string): Promise<TokenResponse> {
+    const tokenUrl = `${this.instanceUrl}/oauth/token`;
+    const body = new HttpParams()
+      .set("client_id", this.clientId)
+      .set("grant_type", "refresh_token")
+      .set("refresh_token", refreshToken)
+      .set("redirect_uri", this.effectiveRedirectUri);
+
+    const headers = new HttpHeaders({
+      "Content-Type": "application/x-www-form-urlencoded",
+    });
+
+    return this.http.post<TokenResponse>(tokenUrl, body.toString(), { headers }).toPromise();
+  }
+
+  private async performTokenRefresh(): Promise<string | null> {
+    const storedRefreshToken = this.tokenStorageService.getRefreshToken("gitlab");
+    if (!storedRefreshToken) {
+      return null;
+    }
+
+    try {
+      const response = await this.refreshCodeForToken(storedRefreshToken);
+      const newAccessToken = response.access_token;
+      const newRefreshToken = response.refresh_token || storedRefreshToken;
+      const expiresIn = response.expires_in;
+      const rememberMe = this.tokenStorageService.isRemembered("gitlab");
+
+      this.token = newAccessToken;
+      this.tokenStorageService.saveToken("gitlab", newAccessToken, rememberMe, expiresIn, newRefreshToken);
+
+      this.scheduleProactiveRefresh(expiresIn);
+      this.notifyAuthChange();
+
+      return newAccessToken;
+    } catch (err: any) {
+      const status = err?.status || err?.statusCode;
+      const errorPayload = err?.error;
+      const isGrantInvalid =
+        status === 400 &&
+        (errorPayload?.error === "invalid_grant" || (typeof errorPayload === "string" && errorPayload.includes("invalid_grant")));
+
+      if (status === 401 || isGrantInvalid) {
+        console.warn("[GitLab Auth] Refresh token expired or revoked, signing out:", err?.message || err);
+        this.signOut();
+      } else {
+        console.error("[GitLab Auth] Failed to refresh GitLab token:", err?.message || err);
+      }
+      return null;
+    }
+  }
+
+  private scheduleProactiveRefresh(expiresInSeconds?: number): void {
+    this.clearRefreshTimer();
+
+    if (!expiresInSeconds || expiresInSeconds <= 0) {
+      return;
+    }
+
+    const delayMs = Math.max((expiresInSeconds - this.refreshBufferSeconds) * 1000, 10000);
+
+    this.refreshTimer = setTimeout(() => {
+      if (this.isSignedIn()) {
+        this.refreshAccessToken().catch((err) => {
+          console.warn("[GitLab Auth] Background silent refresh failed:", err);
+        });
+      }
+    }, delayMs);
+  }
+
+  private clearRefreshTimer(): void {
+    if (this.refreshTimer) {
+      clearTimeout(this.refreshTimer);
+      this.refreshTimer = null;
+    }
+  }
+
   private fetchUserProfile(token: string): Promise<GitlabUser> {
     const userUrl = `${this.instanceUrl}/api/v4/user`;
     const headers = new HttpHeaders({
@@ -317,14 +474,31 @@ export class GitlabAuthService implements GitAuthProvider {
 
   private restoreSession(): void {
     const storedToken = this.tokenStorageService.getToken("gitlab");
+    const storedRefreshToken = this.tokenStorageService.getRefreshToken("gitlab");
     const storedUser = this.tokenStorageService.getUserData<GitlabUser>("gitlab");
 
-    if (storedToken && storedUser) {
+    if ((storedToken || storedRefreshToken) && storedUser) {
       this.token = storedToken;
       this.currentUser = storedUser;
       this.notifyAuthChange();
-    } else if (storedToken || storedUser) {
+
+      if (!storedToken || this.tokenStorageService.isTokenExpired("gitlab", this.refreshBufferSeconds)) {
+        this.refreshAccessToken().catch((err) => {
+          console.warn("[GitLab Auth] Initial session restore refresh failed:", err);
+        });
+      } else {
+        const expiresAt = this.tokenStorageService.getAccessTokenExpiresAt("gitlab");
+        if (expiresAt) {
+          const remainingSeconds = Math.round((expiresAt - Date.now()) / 1000);
+          this.scheduleProactiveRefresh(remainingSeconds);
+        }
+      }
+      this.checkTokenValidity().subscribe();
+    } else if (storedToken || storedRefreshToken || storedUser) {
+      this.tokenStatus = "unknown";
       this.tokenStorageService.clearAll("gitlab");
+    } else {
+      this.tokenStatus = "unknown";
     }
   }
 
@@ -333,6 +507,7 @@ export class GitlabAuthService implements GitAuthProvider {
       isSignedIn: this.isSignedIn(),
       token: this.token,
       user: this.currentUser,
+      tokenStatus: this.tokenStatus,
     });
   }
 }
diff --git a/src/app/services/gitlab-custom-auth.service.spec.ts b/src/app/services/gitlab-custom-auth.service.spec.ts
new file mode 100644
index 00000000..c6d6c437
--- /dev/null
+++ b/src/app/services/gitlab-custom-auth.service.spec.ts
@@ -0,0 +1,141 @@
+import { HttpClientTestingModule, HttpTestingController } from "@angular/common/http/testing";
+import { TestBed } from "@angular/core/testing";
+import { GitlabCustomAuthService } from "./gitlab-custom-auth.service";
+import { TokenStorageService } from "./token-storage.service";
+
+describe("GitlabCustomAuthService", () => {
+  let service: GitlabCustomAuthService;
+  let httpMock: HttpTestingController;
+  let tokenStorageService: TokenStorageService;
+
+  beforeEach(() => {
+    sessionStorage.clear();
+    localStorage.clear();
+
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule],
+      providers: [GitlabCustomAuthService, TokenStorageService],
+    });
+
+    service = TestBed.inject(GitlabCustomAuthService);
+    httpMock = TestBed.inject(HttpTestingController);
+    tokenStorageService = TestBed.inject(TokenStorageService);
+  });
+
+  afterEach(() => {
+    httpMock.verify();
+    sessionStorage.clear();
+    localStorage.clear();
+  });
+
+  it("should be created", () => {
+    expect(service).toBeTruthy();
+  });
+
+  it("should normalize URLs accurately", () => {
+    expect(service.normalizeUrl("gitlab.univ-tlse3.fr")).toEqual({
+      cleanUrl: "https://gitlab.univ-tlse3.fr",
+      host: "gitlab.univ-tlse3.fr",
+    });
+
+    expect(service.normalizeUrl("https://gitlab.irit.fr/sub/")).toEqual({
+      cleanUrl: "https://gitlab.irit.fr",
+      host: "gitlab.irit.fr",
+    });
+
+    expect(service.normalizeUrl("http://local-gitlab.dev:8080/")).toEqual({
+      cleanUrl: "http://local-gitlab.dev:8080",
+      host: "local-gitlab.dev",
+    });
+  });
+
+  it("should successfully connect a custom instance and store token and user", async () => {
+    const connectPromise = service.connectInstance("https://gitlab.univ-tlse3.fr", "glpat-test123", "UT3", true);
+
+    const req = httpMock.expectOne("https://gitlab.univ-tlse3.fr/api/v4/user");
+    expect(req.request.method).toBe("GET");
+    expect(req.request.headers.get("PRIVATE-TOKEN")).toBe("glpat-test123");
+
+    req.flush({
+      id: 42,
+      username: "prof.turing",
+      name: "Alan Turing",
+      avatar_url: "https://gitlab.univ-tlse3.fr/uploads/avatar.png",
+      web_url: "https://gitlab.univ-tlse3.fr/prof.turing",
+    });
+
+    await Promise.resolve();
+
+    const tokenReq = httpMock.expectOne("https://gitlab.univ-tlse3.fr/api/v4/personal_access_tokens/self");
+    tokenReq.flush({ expires_at: "2026-12-31" });
+
+    const account = await connectPromise;
+    expect(account.username).toBe("prof.turing");
+    expect(account.instanceHost).toBe("gitlab.univ-tlse3.fr");
+    expect(account.instanceName).toBe("UT3");
+    expect(account.authType).toBe("pat");
+
+    expect(service.hasAccount("gitlab.univ-tlse3.fr")).toBeTrue();
+    expect(service.getAccounts().length).toBe(1);
+
+    const storedToken = tokenStorageService.getToken("gitlab", "gitlab.univ-tlse3.fr");
+    expect(storedToken).toBe("glpat-test123");
+  });
+
+  it("should throw INVALID_HOST when attempting to connect gitlab.com as custom instance", async () => {
+    await expectAsync(service.connectInstance("https://gitlab.com", "some_token")).toBeRejectedWithError("INVALID_HOST");
+  });
+
+  it("should throw INVALID_PAT when token verification returns 401", async () => {
+    const connectPromise = service.connectInstance("https://gitlab.univ-tlse3.fr", "bad_token");
+
+    const req = httpMock.expectOne("https://gitlab.univ-tlse3.fr/api/v4/user");
+    req.flush({ message: "401 Unauthorized" }, { status: 401, statusText: "Unauthorized" });
+
+    await expectAsync(connectPromise).toBeRejectedWithError("INVALID_PAT");
+  });
+
+  it("should throw SERVER_UNREACHABLE when network fails", async () => {
+    const connectPromise = service.connectInstance("https://gitlab.down.org", "token");
+
+    const req = httpMock.expectOne("https://gitlab.down.org/api/v4/user");
+    req.error(new ErrorEvent("Network error"));
+
+    await expectAsync(connectPromise).toBeRejectedWithError("SERVER_UNREACHABLE");
+  });
+
+  it("should disconnect an instance without affecting other instances", async () => {
+    const p1 = service.connectInstance("https://gitlab.univ-tlse3.fr", "tok1", "UT3");
+    httpMock.expectOne("https://gitlab.univ-tlse3.fr/api/v4/user").flush({
+      id: 1,
+      username: "user1",
+      name: "User One",
+      avatar_url: "",
+      web_url: "",
+    });
+    await Promise.resolve();
+    httpMock.expectOne("https://gitlab.univ-tlse3.fr/api/v4/personal_access_tokens/self").flush({});
+    await p1;
+
+    const p2 = service.connectInstance("https://gitlab.irit.fr", "tok2", "IRIT");
+    httpMock.expectOne("https://gitlab.irit.fr/api/v4/user").flush({
+      id: 2,
+      username: "user2",
+      name: "User Two",
+      avatar_url: "",
+      web_url: "",
+    });
+    await Promise.resolve();
+    httpMock.expectOne("https://gitlab.irit.fr/api/v4/personal_access_tokens/self").flush({});
+    await p2;
+
+    expect(service.getAccounts().length).toBe(2);
+
+    service.disconnectInstance("gitlab.univ-tlse3.fr");
+    expect(service.getAccounts().length).toBe(1);
+    expect(service.hasAccount("gitlab.univ-tlse3.fr")).toBeFalse();
+    expect(service.hasAccount("gitlab.irit.fr")).toBeTrue();
+    expect(tokenStorageService.getToken("gitlab", "gitlab.univ-tlse3.fr")).toBeNull();
+    expect(tokenStorageService.getToken("gitlab", "gitlab.irit.fr")).toBe("tok2");
+  });
+});
diff --git a/src/app/services/gitlab-custom-auth.service.ts b/src/app/services/gitlab-custom-auth.service.ts
new file mode 100644
index 00000000..111ea974
--- /dev/null
+++ b/src/app/services/gitlab-custom-auth.service.ts
@@ -0,0 +1,271 @@
+import { HttpClient, HttpHeaders } from "@angular/common/http";
+import { Injectable } from "@angular/core";
+import { BehaviorSubject, Observable, forkJoin, of } from "rxjs";
+import { catchError, map } from "rxjs/operators";
+import { Account, TokenStatus } from "@models/Account.model";
+import { TokenStorageService } from "@services/token-storage.service";
+
+export interface GitlabCustomUser {
+  id: number;
+  username: string;
+  name: string;
+  avatar_url: string;
+  web_url: string;
+}
+
+export interface GitlabCustomUserData {
+  user: GitlabCustomUser;
+  alias?: string;
+}
+
+@Injectable({
+  providedIn: "root",
+})
+export class GitlabCustomAuthService {
+  public accountsChange$: Observable<Account[]>;
+
+  private accountsSubject = new BehaviorSubject<Account[]>([]);
+  private accounts: Account[] = [];
+  private tokenStatusMap = new Map<string, TokenStatus>();
+
+  constructor(private http: HttpClient, private tokenStorageService: TokenStorageService) {
+    this.accountsChange$ = this.accountsSubject.asObservable();
+    this.restoreSessions();
+  }
+
+  getAccounts(): Account[] {
+    return [...this.accounts];
+  }
+
+  getAccount(instanceHost: string): Account | null {
+    const cleanHost = this.cleanHostName(instanceHost);
+    return this.accounts.find((a) => a.instanceHost === cleanHost) || null;
+  }
+
+  hasAccount(instanceHost: string): boolean {
+    const cleanHost = this.cleanHostName(instanceHost);
+    return this.accounts.some((a) => a.instanceHost === cleanHost);
+  }
+
+  getTokenStatus(instanceHost: string): TokenStatus {
+    const cleanHost = this.cleanHostName(instanceHost);
+    return this.tokenStatusMap.get(cleanHost) || "unknown";
+  }
+
+  normalizeUrl(rawUrl: string): { cleanUrl: string; host: string } {
+    let trimmed = (rawUrl || "").trim();
+    if (!trimmed) {
+      return { cleanUrl: "", host: "" };
+    }
+
+    if (!/^https?:\/\//i.test(trimmed)) {
+      trimmed = `https://${trimmed}`;
+    }
+
+    try {
+      const parsed = new URL(trimmed);
+      const host = parsed.hostname.toLowerCase();
+      const origin = `${parsed.protocol}//${parsed.host}`;
+      return {
+        cleanUrl: origin,
+        host,
+      };
+    } catch {
+      const fallbackHost = trimmed
+        .replace(/^https?:\/\//i, "")
+        .replace(/\/.*$/, "")
+        .toLowerCase();
+      return {
+        cleanUrl: `https://${fallbackHost}`,
+        host: fallbackHost,
+      };
+    }
+  }
+
+  async connectInstance(url: string, pat: string, alias?: string, rememberMe = false): Promise<Account> {
+    const { cleanUrl, host } = this.normalizeUrl(url);
+
+    if (!host || host === "gitlab.com") {
+      throw new Error("INVALID_HOST");
+    }
+
+    const cleanPat = (pat || "").trim();
+    if (!cleanPat) {
+      throw new Error("EMPTY_TOKEN");
+    }
+
+    const headers = new HttpHeaders({
+      "PRIVATE-TOKEN": cleanPat,
+    });
+
+    let user: GitlabCustomUser;
+    try {
+      user = await this.http.get<GitlabCustomUser>(`${cleanUrl}/api/v4/user`, { headers }).toPromise();
+    } catch (err: any) {
+      const status = err?.status || err?.statusCode;
+      if (status === 401 || status === 403) {
+        throw new Error("INVALID_PAT");
+      }
+      throw new Error("SERVER_UNREACHABLE");
+    }
+
+    if (!user || !user.username) {
+      throw new Error("INVALID_USER_DATA");
+    }
+
+    let tokenExpiresInDays: number | null = null;
+    try {
+      const patData: any = await this.http.get(`${cleanUrl}/api/v4/personal_access_tokens/self`, { headers }).toPromise();
+      if (patData?.expires_at) {
+        const diffMs = new Date(patData.expires_at).getTime() - Date.now();
+        tokenExpiresInDays = Math.ceil(diffMs / (1000 * 60 * 60 * 24));
+      }
+    } catch {
+      /* Token self endpoint is optional on older GitLab versions */
+    }
+
+    const instanceName = alias && alias.trim() ? alias.trim() : host;
+    const account: Account = {
+      id: `acc-gitlab-host-${host}`,
+      provider: "gitlab",
+      username: user.username,
+      avatarUrl: user.avatar_url || null,
+      instanceHost: host,
+      instanceName,
+      authType: "pat",
+      isCurrent: false,
+      tokenStatus: "valid",
+      tokenExpiresInDays,
+    };
+
+    this.tokenStatusMap.set(host, "valid");
+    this.tokenStorageService.saveToken("gitlab", cleanPat, rememberMe, undefined, undefined, host);
+    const userData: GitlabCustomUserData = {
+      user,
+      alias: instanceName,
+    };
+    this.tokenStorageService.saveUserData("gitlab", userData, rememberMe, host);
+
+    const existingIndex = this.accounts.findIndex((a) => a.instanceHost === host);
+    if (existingIndex >= 0) {
+      this.accounts[existingIndex] = account;
+    } else {
+      this.accounts.push(account);
+    }
+
+    this.accountsSubject.next(this.getAccounts());
+    return account;
+  }
+
+  checkTokenValidity(instanceHost?: string): Observable<boolean> {
+    if (instanceHost) {
+      const cleanHost = this.cleanHostName(instanceHost);
+      const token = this.tokenStorageService.getToken("gitlab", cleanHost);
+      if (!token) {
+        this.tokenStatusMap.set(cleanHost, "unknown");
+        this.updateAccountStatus(cleanHost, "unknown");
+        return of(false);
+      }
+
+      const headers = new HttpHeaders({
+        "PRIVATE-TOKEN": token,
+      });
+
+      return this.http.get<GitlabCustomUser>(`https://${cleanHost}/api/v4/user`, { headers }).pipe(
+        map(() => {
+          this.tokenStatusMap.set(cleanHost, "valid");
+          this.updateAccountStatus(cleanHost, "valid");
+          return true;
+        }),
+        catchError((err) => {
+          if (err?.status === 401 || err?.status === 403) {
+            this.tokenStatusMap.set(cleanHost, "invalid");
+            this.updateAccountStatus(cleanHost, "invalid");
+          }
+          return of(false);
+        }),
+      );
+    }
+
+    if (this.accounts.length === 0) {
+      return of(true);
+    }
+
+    const checks = this.accounts.map((acc) => this.checkTokenValidity(acc.instanceHost));
+    return forkJoin(checks).pipe(map((results) => results.every(Boolean)));
+  }
+
+  markTokenInvalid(instanceHost: string): void {
+    const cleanHost = this.cleanHostName(instanceHost);
+    if (this.tokenStatusMap.get(cleanHost) !== "invalid") {
+      this.tokenStatusMap.set(cleanHost, "invalid");
+      this.updateAccountStatus(cleanHost, "invalid");
+    }
+  }
+
+  disconnectInstance(instanceHost: string): void {
+    const cleanHost = this.cleanHostName(instanceHost);
+    this.tokenStatusMap.delete(cleanHost);
+    this.tokenStorageService.clearAll("gitlab", cleanHost);
+    this.accounts = this.accounts.filter((a) => a.instanceHost !== cleanHost);
+    this.accountsSubject.next(this.getAccounts());
+  }
+
+  getProfileUrl(instanceHost: string, username?: string): string {
+    const cleanHost = this.cleanHostName(instanceHost);
+    if (!username) {
+      return `https://${cleanHost}`;
+    }
+    return `https://${cleanHost}/${encodeURIComponent(username)}`;
+  }
+
+  private updateAccountStatus(cleanHost: string, status: TokenStatus): void {
+    const account = this.accounts.find((a) => a.instanceHost === cleanHost);
+    if (account) {
+      account.tokenStatus = status;
+      this.accountsSubject.next(this.getAccounts());
+    }
+  }
+
+  private cleanHostName(host: string): string {
+    return (host || "")
+      .trim()
+      .replace(/^https?:\/\//i, "")
+      .replace(/\/.*$/, "")
+      .toLowerCase();
+  }
+
+  private restoreSessions(): void {
+    const customHosts = this.tokenStorageService.getCustomGitlabHosts();
+    const restoredAccounts: Account[] = [];
+
+    for (const host of customHosts) {
+      const token = this.tokenStorageService.getToken("gitlab", host);
+      const data = this.tokenStorageService.getUserData<GitlabCustomUserData>("gitlab", host);
+
+      if (token && data?.user?.username) {
+        this.tokenStatusMap.set(host, "unknown");
+        restoredAccounts.push({
+          id: `acc-gitlab-host-${host}`,
+          provider: "gitlab",
+          username: data.user.username,
+          avatarUrl: data.user.avatar_url || null,
+          instanceHost: host,
+          instanceName: data.alias || host,
+          authType: "pat",
+          isCurrent: false,
+          tokenStatus: "unknown",
+        });
+      } else if (token || data) {
+        this.tokenStorageService.clearAll("gitlab", host);
+      }
+    }
+
+    this.accounts = restoredAccounts;
+    this.accountsSubject.next(this.getAccounts());
+
+    for (const host of customHosts) {
+      this.checkTokenValidity(host).subscribe();
+    }
+  }
+}
diff --git a/src/app/services/gitlab-data.service.ts b/src/app/services/gitlab-data.service.ts
index ebc788a4..04b66175 100644
--- a/src/app/services/gitlab-data.service.ts
+++ b/src/app/services/gitlab-data.service.ts
@@ -9,6 +9,7 @@ import * as moment from "moment";
 import { forkJoin, Observable, of } from "rxjs";
 import { catchError, map, switchMap, tap } from "rxjs/operators";
 import { GitlabAuthService } from "./gitlab-auth.service";
+import { TokenStorageService } from "./token-storage.service";
 import { Utils } from "./utils";
 
 @Injectable({
@@ -17,13 +18,35 @@ import { Utils } from "./utils";
 export class GitlabDataService implements GitDataService {
   public readonly provider: GitProviderType = "gitlab";
 
-  constructor(private http: HttpClient, private gitlabAuthService: GitlabAuthService, private translateService: TranslateService) {}
+  constructor(
+    private http: HttpClient,
+    private gitlabAuthService: GitlabAuthService,
+    private tokenStorageService: TokenStorageService,
+    private translateService: TranslateService,
+  ) {}
 
   get headers(): HttpHeaders {
-    return new HttpHeaders({
+    return this.getHeadersForHost();
+  }
+
+  getHeadersForHost(host?: string): HttpHeaders {
+    let token: string | null = null;
+    if (host) {
+      const cleanHost = host.replace(/^https?:\/\//i, "").replace(/\/.*$/, "");
+      token = this.tokenStorageService.getToken("gitlab", cleanHost);
+    }
+    if (!token) {
+      token = this.gitlabAuthService.token || this.tokenStorageService.getToken("gitlab");
+    }
+
+    const headersConfig: { [name: string]: string } = {
       "Content-Type": "application/json",
-      Authorization: `Bearer ${this.gitlabAuthService.token}`,
-    });
+    };
+    if (token) {
+      headersConfig["Authorization"] = `Bearer ${token}`;
+      headersConfig["PRIVATE-TOKEN"] = token;
+    }
+    return new HttpHeaders(headersConfig);
   }
 
   getRepositories(repoTab: Repository[], startDate?: string, endDate?: string): Observable<Repository[]> {
@@ -51,51 +74,13 @@ export class GitlabDataService implements GitDataService {
     return forkJoin(observables);
   }
 
-  private fetchSingleRepositoryMetadata(repo: Repository): Observable<RepositoryMetadata> {
-    const { origin, path } = this.extractRepoPathAndOrigin(repo.url);
-    if (!path) {
-      return of({ url: repo.url, name: "", tpGroup: "" });
-    }
-
-    const projectUrl = `${origin}/api/v4/projects/${encodeURIComponent(path)}`;
-
-    return this.http.get<any>(projectUrl, { headers: this.headers }).pipe(
-      switchMap((project) => {
-        const defaultBranch = project?.default_branch || "main";
-        const readmeUrl = `${origin}/api/v4/projects/${encodeURIComponent(path)}/repository/files/README%2Emd/raw?ref=${encodeURIComponent(
-          defaultBranch,
-        )}`;
-        const identityUrl = `${origin}/api/v4/projects/${encodeURIComponent(
-          path,
-        )}/repository/files/IDENTITY%2Ejson/raw?ref=${encodeURIComponent(defaultBranch)}`;
-
-        return forkJoin({
-          readme: this.http.get(readmeUrl, { headers: this.headers, responseType: "text" }).pipe(catchError(() => of(null))),
-          identity: this.http.get(identityUrl, { headers: this.headers, responseType: "text" }).pipe(catchError(() => of(null))),
-        }).pipe(
-          map(({ readme, identity }) => {
-            const { name, tpGroup } = Utils.extractRepositoryMetadata(identity, readme);
-            return {
-              url: repo.url,
-              name,
-              tpGroup,
-            };
-          }),
-        );
-      }),
-      catchError((err) => {
-        console.error(`Error fetching GitLab repo metadata for ${repo.url}`, err);
-        return of({ url: repo.url, name: "", tpGroup: "" });
-      }),
-    );
-  }
-
-  getRepositoriesByAuthenticatedUser(cursor?: string, pageLimit = 100): Observable<GitDataSearchResult> {
-    const baseApi = this.getBaseApi();
+  getRepositoriesByAuthenticatedUser(cursor?: string, pageLimit = 100, instanceHost?: string): Observable<GitDataSearchResult> {
+    const baseApi = this.getBaseApi(instanceHost);
+    const headers = this.getHeadersForHost(instanceHost);
     const page = cursor ? parseInt(cursor, 10) : 1;
     const url = `${baseApi}/projects?membership=true&order_by=created_at&sort=desc&per_page=${pageLimit}&page=${page}`;
 
-    return this.http.get<any[]>(url, { headers: this.headers, observe: "response" }).pipe(
+    return this.http.get<any[]>(url, { headers, observe: "response" }).pipe(
       map((response: HttpResponse<any[]>) => {
         const nextPage = response.headers.get("x-next-page");
         const projects = response.body || [];
@@ -118,24 +103,27 @@ export class GitlabDataService implements GitDataService {
     );
   }
 
-  getRepositoriesBySearch(searchFilter: string, cursor?: string, pageLimit = 100): Observable<GitDataSearchResult> {
+  getRepositoriesBySearch(searchFilter: string, cursor?: string, pageLimit = 100, instanceHost?: string): Observable<GitDataSearchResult> {
     const cleanFilter = searchFilter ? searchFilter.trim() : "";
     if (!cleanFilter) {
-      return this.getRepositoriesByAuthenticatedUser(cursor, pageLimit);
+      return this.getRepositoriesByAuthenticatedUser(cursor, pageLimit, instanceHost);
     }
 
-    const baseApi = this.getBaseApi();
+    const baseApi = this.getBaseApi(instanceHost);
+    const headers = this.getHeadersForHost(instanceHost);
     const page = cursor ? parseInt(cursor, 10) : 1;
 
     // Check if filter is a full URL or owner/name
-    const repoInfo = this.extractRepoPathAndOrigin(cleanFilter);
+    const repoInfo = this.extractRepoPathAndOrigin(cleanFilter, instanceHost);
     if (repoInfo.path) {
+      const targetHost = new URL(repoInfo.origin).hostname;
+      const targetHeaders = this.getHeadersForHost(targetHost);
       const projectApiUrl = `${repoInfo.origin}/api/v4/projects/${encodeURIComponent(repoInfo.path)}`;
       const forksUrl = `${repoInfo.origin}/api/v4/projects/${encodeURIComponent(repoInfo.path)}/forks?per_page=${pageLimit}&page=${page}`;
 
       return forkJoin({
-        project: this.http.get<any>(projectApiUrl, { headers: this.headers }).pipe(catchError(() => of(null))),
-        forks: this.http.get<any[]>(forksUrl, { headers: this.headers, observe: "response" }).pipe(catchError(() => of(null))),
+        project: this.http.get<any>(projectApiUrl, { headers: targetHeaders }).pipe(catchError(() => of(null))),
+        forks: this.http.get<any[]>(forksUrl, { headers: targetHeaders, observe: "response" }).pipe(catchError(() => of(null))),
       }).pipe(
         map(({ project, forks }) => {
           const reposMap = new Map<string, Repository>();
@@ -165,12 +153,12 @@ export class GitlabDataService implements GitDataService {
           if (result) {
             return of(result);
           }
-          return this.searchProjectsByKeyword(cleanFilter, page, pageLimit, baseApi);
+          return this.searchProjectsByKeyword(cleanFilter, page, pageLimit, baseApi, headers);
         }),
       );
     }
 
-    return this.searchProjectsByKeyword(cleanFilter, page, pageLimit, baseApi);
+    return this.searchProjectsByKeyword(cleanFilter, page, pageLimit, baseApi, headers);
   }
 
   verifyUserAccess(repoUrl: string): Observable<any> {
@@ -178,8 +166,10 @@ export class GitlabDataService implements GitDataService {
     if (!path) {
       return of({ valid: false });
     }
+    const host = new URL(origin).hostname;
+    const headers = this.getHeadersForHost(host);
     const url = `${origin}/api/v4/projects/${encodeURIComponent(path)}`;
-    return this.http.get<any>(url, { headers: this.headers }).pipe(
+    return this.http.get<any>(url, { headers }).pipe(
       map((project) => ({
         ...project,
         owner: {
@@ -190,13 +180,19 @@ export class GitlabDataService implements GitDataService {
     );
   }
 
-  private searchProjectsByKeyword(keyword: string, page: number, pageLimit: number, baseApi: string): Observable<GitDataSearchResult> {
+  private searchProjectsByKeyword(
+    keyword: string,
+    page: number,
+    pageLimit: number,
+    baseApi: string,
+    headers: HttpHeaders,
+  ): Observable<GitDataSearchResult> {
     const memberUrl = `${baseApi}/projects?search=${encodeURIComponent(keyword)}&membership=true&per_page=${pageLimit}&page=${page}`;
     const allUrl = `${baseApi}/projects?search=${encodeURIComponent(keyword)}&per_page=${pageLimit}&page=${page}`;
 
     return forkJoin({
-      memberRes: this.http.get<any[]>(memberUrl, { headers: this.headers, observe: "response" }).pipe(catchError(() => of(null))),
-      allRes: this.http.get<any[]>(allUrl, { headers: this.headers, observe: "response" }).pipe(catchError(() => of(null))),
+      memberRes: this.http.get<any[]>(memberUrl, { headers, observe: "response" }).pipe(catchError(() => of(null))),
+      allRes: this.http.get<any[]>(allUrl, { headers, observe: "response" }).pipe(catchError(() => of(null))),
     }).pipe(
       map(({ memberRes, allRes }) => {
         const reposMap = new Map<string, Repository>();
@@ -229,6 +225,47 @@ export class GitlabDataService implements GitDataService {
     );
   }
 
+  private fetchSingleRepositoryMetadata(repo: Repository): Observable<RepositoryMetadata> {
+    const { origin, path } = this.extractRepoPathAndOrigin(repo.url);
+    if (!path) {
+      return of({ url: repo.url, name: "", tpGroup: "" });
+    }
+
+    const host = new URL(origin).hostname;
+    const headers = this.getHeadersForHost(host);
+    const projectUrl = `${origin}/api/v4/projects/${encodeURIComponent(path)}`;
+
+    return this.http.get<any>(projectUrl, { headers }).pipe(
+      switchMap((project) => {
+        const defaultBranch = project?.default_branch || "main";
+        const readmeUrl = `${origin}/api/v4/projects/${encodeURIComponent(path)}/repository/files/README%2Emd/raw?ref=${encodeURIComponent(
+          defaultBranch,
+        )}`;
+        const identityUrl = `${origin}/api/v4/projects/${encodeURIComponent(
+          path,
+        )}/repository/files/IDENTITY%2Ejson/raw?ref=${encodeURIComponent(defaultBranch)}`;
+
+        return forkJoin({
+          readme: this.http.get(readmeUrl, { headers, responseType: "text" }).pipe(catchError(() => of(null))),
+          identity: this.http.get(identityUrl, { headers, responseType: "text" }).pipe(catchError(() => of(null))),
+        }).pipe(
+          map(({ readme, identity }) => {
+            const { name, tpGroup } = Utils.extractRepositoryMetadata(identity, readme);
+            return {
+              url: repo.url,
+              name,
+              tpGroup,
+            };
+          }),
+        );
+      }),
+      catchError((err) => {
+        console.error(`Error fetching GitLab repo metadata for ${repo.url}`, err);
+        return of({ url: repo.url, name: "", tpGroup: "" });
+      }),
+    );
+  }
+
   private fetchSingleRepositoryData(repo: Repository, startDate?: string, endDate?: string): Observable<Repository> {
     const { origin, path } = this.extractRepoPathAndOrigin(repo.url);
     if (!path) {
@@ -236,9 +273,11 @@ export class GitlabDataService implements GitDataService {
       return of(repo);
     }
 
+    const host = new URL(origin).hostname;
+    const headers = this.getHeadersForHost(host);
     const projectUrl = `${origin}/api/v4/projects/${encodeURIComponent(path)}`;
 
-    return this.http.get<any>(projectUrl, { headers: this.headers }).pipe(
+    return this.http.get<any>(projectUrl, { headers }).pipe(
       switchMap((project) => {
         const defaultBranch = project?.default_branch || "main";
         const readmeUrl = `${origin}/api/v4/projects/${encodeURIComponent(path)}/repository/files/README%2Emd/raw?ref=${encodeURIComponent(
@@ -249,9 +288,9 @@ export class GitlabDataService implements GitDataService {
         )}/repository/files/IDENTITY%2Ejson/raw?ref=${encodeURIComponent(defaultBranch)}`;
 
         return forkJoin({
-          readme: this.http.get(readmeUrl, { headers: this.headers, responseType: "text" }).pipe(catchError(() => of(null))),
-          identity: this.http.get(identityUrl, { headers: this.headers, responseType: "text" }).pipe(catchError(() => of(null))),
-          commits: this.fetchAllCommits(origin, path, defaultBranch, startDate, endDate),
+          readme: this.http.get(readmeUrl, { headers, responseType: "text" }).pipe(catchError(() => of(null))),
+          identity: this.http.get(identityUrl, { headers, responseType: "text" }).pipe(catchError(() => of(null))),
+          commits: this.fetchAllCommits(origin, path, defaultBranch, startDate, endDate, headers),
         }).pipe(
           map(({ readme, identity, commits }) => {
             const { name, tpGroup } = Utils.extractRepositoryMetadata(identity, readme);
@@ -278,7 +317,14 @@ export class GitlabDataService implements GitDataService {
     );
   }
 
-  private fetchAllCommits(origin: string, path: string, defaultBranch: string, startDate?: string, endDate?: string): Observable<Commit[]> {
+  private fetchAllCommits(
+    origin: string,
+    path: string,
+    defaultBranch: string,
+    startDate?: string,
+    endDate?: string,
+    headers?: HttpHeaders,
+  ): Observable<Commit[]> {
     let url = `${origin}/api/v4/projects/${encodeURIComponent(path)}/repository/commits?ref_name=${encodeURIComponent(
       defaultBranch,
     )}&per_page=100`;
@@ -289,12 +335,14 @@ export class GitlabDataService implements GitDataService {
       url += `&until=${encodeURIComponent(moment(endDate).toDate().toISOString())}`;
     }
 
-    return this.fetchCommitsPage(url, 1, []);
+    const effectiveHeaders = headers || this.getHeadersForHost(new URL(origin).hostname);
+    return this.fetchCommitsPage(url, 1, [], effectiveHeaders);
   }
 
-  private fetchCommitsPage(baseUrl: string, page: number, accumulated: Commit[]): Observable<Commit[]> {
+  private fetchCommitsPage(baseUrl: string, page: number, accumulated: Commit[], headers?: HttpHeaders): Observable<Commit[]> {
     const pageUrl = `${baseUrl}&page=${page}`;
-    return this.http.get<any[]>(pageUrl, { headers: this.headers, observe: "response" }).pipe(
+    const effectiveHeaders = headers || this.headers;
+    return this.http.get<any[]>(pageUrl, { headers: effectiveHeaders, observe: "response" }).pipe(
       switchMap((response: HttpResponse<any[]>) => {
         const nodes = response.body || [];
         const commits = nodes.map((n) => Commit.withGitlabJSON(n));
@@ -302,7 +350,7 @@ export class GitlabDataService implements GitDataService {
 
         const nextPage = response.headers.get("x-next-page");
         if (nextPage && nextPage.trim() !== "" && nodes.length > 0) {
-          return this.fetchCommitsPage(baseUrl, parseInt(nextPage, 10), allCommits);
+          return this.fetchCommitsPage(baseUrl, parseInt(nextPage, 10), allCommits, effectiveHeaders);
         }
         return of(allCommits);
       }),
@@ -325,14 +373,15 @@ export class GitlabDataService implements GitDataService {
       project.description,
       isFork,
       resolvedParent,
+      undefined,
+      "gitlab",
     );
-    repo.provider = "gitlab";
     return repo;
   }
 
-  private extractRepoPathAndOrigin(repoUrl: string): { origin: string; path: string } {
+  private extractRepoPathAndOrigin(repoUrl: string, instanceHost?: string): { origin: string; path: string } {
     if (!repoUrl) {
-      return { origin: this.getBaseOrigin(), path: "" };
+      return { origin: this.getBaseOrigin(instanceHost), path: "" };
     }
     let clean = repoUrl.trim();
     // Handle SSH format e.g. git@gitlab.com:group/subgroup/project.git
@@ -345,7 +394,8 @@ export class GitlabDataService implements GitDataService {
     }
 
     try {
-      const url = new URL(clean.startsWith("http") ? clean : `https://${this.gitlabAuthService.instanceHost}/${clean}`);
+      const defaultHost = instanceHost || this.gitlabAuthService.instanceHost || "gitlab.com";
+      const url = new URL(clean.startsWith("http") ? clean : `https://${defaultHost}/${clean}`);
       const path = url.pathname
         .replace(/^\//, "")
         .replace(/\.git$/, "")
@@ -353,7 +403,7 @@ export class GitlabDataService implements GitDataService {
       return { origin: url.origin, path };
     } catch (e) {
       return {
-        origin: this.getBaseOrigin(),
+        origin: this.getBaseOrigin(instanceHost),
         path: clean
           .replace(/^\//, "")
           .replace(/\.git$/, "")
@@ -362,12 +412,13 @@ export class GitlabDataService implements GitDataService {
     }
   }
 
-  private getBaseOrigin(): string {
-    const host = this.gitlabAuthService.instanceHost || "gitlab.com";
-    return `https://${host.replace(/^https?:\/\//i, "").replace(/\/.*$/, "")}`;
+  private getBaseOrigin(instanceHost?: string): string {
+    const rawHost = instanceHost || this.gitlabAuthService.instanceHost || "gitlab.com";
+    const host = rawHost.replace(/^https?:\/\//i, "").replace(/\/.*$/, "");
+    return `https://${host}`;
   }
 
-  private getBaseApi(): string {
-    return `${this.getBaseOrigin()}/api/v4`;
+  private getBaseApi(instanceHost?: string): string {
+    return `${this.getBaseOrigin(instanceHost)}/api/v4`;
   }
 }
diff --git a/src/app/services/loader.service.ts b/src/app/services/loader.service.ts
index 4f60856f..2d589ae2 100644
--- a/src/app/services/loader.service.ts
+++ b/src/app/services/loader.service.ts
@@ -3,8 +3,9 @@ import { Milestone } from "@models/Milestone.model";
 import { QuestionClosingMode } from "@models/Metadata.model";
 import { Repository } from "@models/Repository.model";
 import { TranslateService } from "@ngx-translate/core";
-import { Observable } from "rxjs";
+import { Observable, of } from "rxjs";
 import { map } from "rxjs/operators";
+import { AccountsService } from "./accounts.service";
 import { CommitsService } from "./commits.service";
 import { DataService } from "./data.service";
 import { ToastService } from "./toast.service";
@@ -21,12 +22,14 @@ export class LoaderService {
    * @param dataService The service that stores the data
    * @param translateService The translation service
    * @param toastService The service displaying error or warning toasts
+   * @param accountsService The service managing accounts and token status
    */
   constructor(
     private commitsService: CommitsService,
     private dataService: DataService,
     private translateService: TranslateService,
     private toastService: ToastService,
+    private accountsService: AccountsService,
   ) {}
 
   /**
@@ -45,25 +48,53 @@ export class LoaderService {
     corrections: Milestone[],
     questions: string[],
     closingMode?: QuestionClosingMode,
-    customClosingKeywords?: string[],
+    customKeywords?: string[],
   ) {
     const mode = closingMode || this.dataService.closingMode;
-    const customKeywords = customClosingKeywords !== undefined ? customClosingKeywords : this.dataService.customClosingKeywords;
+    const keywords = customKeywords !== undefined ? customKeywords : this.dataService.customClosingKeywords;
 
     repositories.forEach((repository) => {
       let filteredReviews = reviews?.filter((review) => review.tpGroup === repository.tpGroup || !review.tpGroup);
       let filteredCorrections = corrections?.filter((correction) => correction.tpGroup === repository.tpGroup || !correction.tpGroup);
 
-      repository.commits?.forEach((commit) => commit.updateMetadata(filteredReviews, filteredCorrections, questions, mode, customKeywords));
+      repository.commits?.forEach((commit) => commit.updateMetadata(filteredReviews, filteredCorrections, questions, mode, keywords));
     });
   }
 
   /**
-   * Fetch the repositories from Github and loads their commits with [loadCommitsMetadata]{@link LoaderService#loadCommitsMetadata}
+   * Fetch the repositories from Git provider and loads their commits with [loadCommitsMetadata]{@link LoaderService#loadCommitsMetadata}
    * @param startDate The date from which commits are retrieved
    * @param endDate The date up to which commits are retrieved
    */
   loadRepositories(startDate?: string, endDate?: string): Observable<void> {
+    const firstRepo = this.dataService.repositories?.[0];
+    if (!firstRepo) {
+      return of(undefined);
+    }
+
+    const provider = firstRepo.provider || "github";
+    let instanceHost: string | undefined;
+    if (firstRepo.url) {
+      try {
+        instanceHost = new URL(firstRepo.url).hostname;
+      } catch {}
+    }
+
+    const tokenStatus = this.accountsService.getTokenStatus(provider, instanceHost);
+
+    if (tokenStatus === "invalid") {
+      this.showInvalidTokenToast(provider);
+      return of(undefined);
+    }
+
+    if (tokenStatus === "unknown") {
+      this.accountsService.checkTokenValidity(provider, instanceHost).subscribe();
+    }
+
+    return this.executeLoadRepositories(startDate, endDate);
+  }
+
+  private executeLoadRepositories(startDate?: string, endDate?: string): Observable<void> {
     let translations = this.translateService.instant([
       "ERRORS.REPOSITORY-NOT-FOUND",
       "ERRORS.README-NOT-FOUND",
@@ -102,4 +133,11 @@ export class LoaderService {
       }),
     );
   }
+
+  private showInvalidTokenToast(provider: string): void {
+    const title = this.translateService.instant("TOKEN_HEALTH.ERROR_TITLE");
+    const messageKey = provider === "gitlab" ? "TOKEN_HEALTH.ERROR_MSG_GITLAB" : "TOKEN_HEALTH.ERROR_MSG_GITHUB";
+    const message = this.translateService.instant(messageKey);
+    this.toastService.error(title, message);
+  }
 }
diff --git a/src/app/services/token-storage.service.spec.ts b/src/app/services/token-storage.service.spec.ts
index 90f2cb2d..6ebbf8f9 100644
--- a/src/app/services/token-storage.service.spec.ts
+++ b/src/app/services/token-storage.service.spec.ts
@@ -96,4 +96,58 @@ describe("TokenStorageService", () => {
     expect(localStorage.getItem("g4s_auth_v1_github")).toBeNull();
     expect(localStorage.getItem("g4s_user_v1_github")).toBeNull();
   });
+
+  it("should securely store and retrieve encrypted refreshToken", () => {
+    service.saveToken("gitlab", "gl_access_token_123", true, 7200, "gl_refresh_token_xyz");
+
+    const raw = localStorage.getItem("g4s_auth_v1_gitlab");
+    expect(raw).toBeTruthy();
+    expect(raw).not.toContain("gl_access_token_123");
+    expect(raw).not.toContain("gl_refresh_token_xyz");
+
+    expect(service.getToken("gitlab")).toBe("gl_access_token_123");
+    expect(service.getRefreshToken("gitlab")).toBe("gl_refresh_token_xyz");
+  });
+
+  it("should return null for expired token without wiping storage when refreshToken is present", () => {
+    service.saveToken("gitlab", "expired_access_token", true, -10, "valid_refresh_token");
+
+    expect(service.getToken("gitlab")).toBeNull();
+    expect(localStorage.getItem("g4s_auth_v1_gitlab")).toBeTruthy();
+    expect(service.getRefreshToken("gitlab")).toBe("valid_refresh_token");
+  });
+
+  it("should accurately report isTokenExpired with and without margin", () => {
+    // Token expiring in 60 seconds
+    service.saveToken("gitlab", "expiring_token", true, 60, "some_refresh");
+
+    expect(service.isTokenExpired("gitlab", 0)).toBeFalse();
+    // With 300s margin, 60s is considered expiring
+    expect(service.isTokenExpired("gitlab", 300)).toBeTrue();
+
+    // Already expired token
+    service.saveToken("gitlab", "already_expired", true, -5, "some_refresh");
+    expect(service.isTokenExpired("gitlab", 0)).toBeTrue();
+  });
+
+  it("should store and retrieve tokens for custom GitLab hosts independently", () => {
+    service.saveToken("gitlab", "cloud_token", true, undefined, undefined, "gitlab.com");
+    service.saveToken("gitlab", "ut3_token", false, undefined, undefined, "gitlab.univ-tlse3.fr");
+    service.saveToken("gitlab", "irit_token", true, undefined, undefined, "gitlab.irit.fr");
+
+    expect(service.getToken("gitlab")).toBe("cloud_token");
+    expect(service.getToken("gitlab", "gitlab.com")).toBe("cloud_token");
+    expect(service.getToken("gitlab", "gitlab.univ-tlse3.fr")).toBe("ut3_token");
+    expect(service.getToken("gitlab", "gitlab.irit.fr")).toBe("irit_token");
+
+    const customHosts = service.getCustomGitlabHosts();
+    expect(customHosts).toContain("gitlab.univ-tlse3.fr");
+    expect(customHosts).toContain("gitlab.irit.fr");
+    expect(customHosts).not.toContain("gitlab.com");
+
+    service.clearAll("gitlab", "gitlab.univ-tlse3.fr");
+    expect(service.getToken("gitlab", "gitlab.univ-tlse3.fr")).toBeNull();
+    expect(service.getToken("gitlab", "gitlab.irit.fr")).toBe("irit_token");
+    expect(service.getToken("gitlab")).toBe("cloud_token");
+  });
 });
diff --git a/src/app/services/token-storage.service.ts b/src/app/services/token-storage.service.ts
index c77027a4..1e64e6c1 100644
--- a/src/app/services/token-storage.service.ts
+++ b/src/app/services/token-storage.service.ts
@@ -13,8 +13,10 @@ export interface StoredTokenEnvelope {
 export interface StoredTokenPayload {
   token: string;
   provider: GitProviderType;
+  instanceHost?: string;
   createdAt: number;
   expiresAt: number | null;
+  refreshToken?: string | null;
 }
 
 @Injectable({
@@ -27,24 +29,39 @@ export class TokenStorageService {
 
   constructor() {}
 
-  saveToken(provider: GitProviderType, token: string, rememberMe: boolean, expiresInSeconds?: number): void {
+  saveToken(
+    provider: GitProviderType,
+    token: string,
+    rememberMe: boolean,
+    expiresInSeconds?: number,
+    refreshToken?: string,
+    instanceHost?: string,
+  ): void {
     if (!token) {
-      this.clearToken(provider);
+      this.clearToken(provider, instanceHost);
       return;
     }
 
     const now = Date.now();
     const expiresAt = typeof expiresInSeconds === "number" && !isNaN(expiresInSeconds) ? now + expiresInSeconds * 1000 : null;
 
+    // If refreshToken is not explicitly provided, preserve existing refreshToken if one was stored
+    const existingRefreshToken = this.getRefreshToken(provider, instanceHost);
+    const effectiveRefreshToken = refreshToken !== undefined ? refreshToken : existingRefreshToken;
+
     const payload: StoredTokenPayload = {
       token,
       provider,
+      instanceHost: instanceHost || (provider === "gitlab" ? "gitlab.com" : "github.com"),
       createdAt: now,
       expiresAt,
+      refreshToken: effectiveRefreshToken || null,
     };
 
-    const envelope = this.encryptPayload(payload, rememberMe);
-    const key = this.getTokenKey(provider);
+    // If a refresh token is present, do not expire the envelope itself upon access token expiration
+    const envelopeExp = effectiveRefreshToken ? null : expiresAt;
+    const envelope = this.encryptPayload(payload, rememberMe, envelopeExp);
+    const key = this.getTokenKey(provider, instanceHost);
 
     // Always clear both storages first to prevent stale contradictory states
     this.removeStorageItem(sessionStorage, key);
@@ -54,64 +71,53 @@ export class TokenStorageService {
     this.setStorageItem(targetStorage, key, JSON.stringify(envelope));
   }
 
-  getToken(provider: GitProviderType): string | null {
-    const key = this.getTokenKey(provider);
-
-    // 1. Check sessionStorage first (active session)
-    let raw = this.getStorageItem(sessionStorage, key);
-    let isFromSession = true;
-
-    // 2. Fall back to localStorage (remembered device)
-    if (!raw) {
-      raw = this.getStorageItem(localStorage, key);
-      isFromSession = false;
+  getToken(provider: GitProviderType, instanceHost?: string): string | null {
+    const entry = this.getDecryptedEntry(provider, instanceHost);
+    if (!entry) {
+      return null;
     }
 
-    if (!raw) {
+    const { payload } = entry;
+    if (payload.expiresAt !== null && Date.now() > payload.expiresAt) {
+      // Clear token completely only if there is no refresh token available
+      if (!payload.refreshToken) {
+        this.clearToken(provider, instanceHost);
+      }
       return null;
     }
 
-    try {
-      const envelope: StoredTokenEnvelope = JSON.parse(raw);
-
-      // Check envelope expiration
-      if (envelope.exp !== null && Date.now() > envelope.exp) {
-        this.clearToken(provider);
-        return null;
-      }
+    return payload.token;
+  }
 
-      const payload = this.decryptPayload(envelope);
-      if (!payload || payload.provider !== provider) {
-        this.clearToken(provider);
-        return null;
-      }
+  getRefreshToken(provider: GitProviderType, instanceHost?: string): string | null {
+    const entry = this.getDecryptedEntry(provider, instanceHost);
+    return entry?.payload.refreshToken || null;
+  }
 
-      // Check inner payload expiration if present
-      if (payload.expiresAt !== null && Date.now() > payload.expiresAt) {
-        this.clearToken(provider);
-        return null;
-      }
+  getAccessTokenExpiresAt(provider: GitProviderType, instanceHost?: string): number | null {
+    const entry = this.getDecryptedEntry(provider, instanceHost);
+    return entry?.payload.expiresAt ?? null;
+  }
 
-      return payload.token;
-    } catch {
-      // If parsing or decrypting fails (e.g. data tampering), clear corrupt entry
-      if (isFromSession) {
-        this.removeStorageItem(sessionStorage, key);
-      } else {
-        this.removeStorageItem(localStorage, key);
-      }
-      return null;
+  isTokenExpired(provider: GitProviderType, marginSeconds = 0, instanceHost?: string): boolean {
+    const entry = this.getDecryptedEntry(provider, instanceHost);
+    if (!entry) {
+      return true;
+    }
+    if (entry.payload.expiresAt === null) {
+      return false;
     }
+    return Date.now() + marginSeconds * 1000 >= entry.payload.expiresAt;
   }
 
-  clearToken(provider: GitProviderType): void {
-    const key = this.getTokenKey(provider);
+  clearToken(provider: GitProviderType, instanceHost?: string): void {
+    const key = this.getTokenKey(provider, instanceHost);
     this.removeStorageItem(sessionStorage, key);
     this.removeStorageItem(localStorage, key);
   }
 
-  saveUserData(provider: GitProviderType, data: any, rememberMe: boolean): void {
-    const key = this.getUserKey(provider);
+  saveUserData(provider: GitProviderType, data: any, rememberMe: boolean, instanceHost?: string): void {
+    const key = this.getUserKey(provider, instanceHost);
     this.removeStorageItem(sessionStorage, key);
     this.removeStorageItem(localStorage, key);
 
@@ -124,8 +130,8 @@ export class TokenStorageService {
     this.setStorageItem(targetStorage, key, raw);
   }
 
-  getUserData<T>(provider: GitProviderType): T | null {
-    const key = this.getUserKey(provider);
+  getUserData<T>(provider: GitProviderType, instanceHost?: string): T | null {
+    const key = this.getUserKey(provider, instanceHost);
     let raw = this.getStorageItem(sessionStorage, key);
     if (!raw) {
       raw = this.getStorageItem(localStorage, key);
@@ -140,19 +146,19 @@ export class TokenStorageService {
     }
   }
 
-  clearUserData(provider: GitProviderType): void {
-    const key = this.getUserKey(provider);
+  clearUserData(provider: GitProviderType, instanceHost?: string): void {
+    const key = this.getUserKey(provider, instanceHost);
     this.removeStorageItem(sessionStorage, key);
     this.removeStorageItem(localStorage, key);
   }
 
-  clearAll(provider: GitProviderType): void {
-    this.clearToken(provider);
-    this.clearUserData(provider);
+  clearAll(provider: GitProviderType, instanceHost?: string): void {
+    this.clearToken(provider, instanceHost);
+    this.clearUserData(provider, instanceHost);
   }
 
-  isRemembered(provider: GitProviderType): boolean {
-    const key = this.getTokenKey(provider);
+  isRemembered(provider: GitProviderType, instanceHost?: string): boolean {
+    const key = this.getTokenKey(provider, instanceHost);
     const raw = this.getStorageItem(localStorage, key);
     if (!raw) {
       return false;
@@ -165,15 +171,93 @@ export class TokenStorageService {
     }
   }
 
-  private getTokenKey(provider: GitProviderType): string {
+  getCustomGitlabHosts(): string[] {
+    const prefix = `${this.storagePrefix}gitlab:`;
+    const hosts = new Set<string>();
+
+    const scanStorage = (storage: Storage) => {
+      try {
+        for (let i = 0; i < storage.length; i++) {
+          const key = storage.key(i);
+          if (key && key.startsWith(prefix)) {
+            const host = key.substring(prefix.length).trim();
+            if (host) {
+              hosts.add(host);
+            }
+          }
+        }
+      } catch {
+        /* Storage restricted or unavailable */
+      }
+    };
+
+    scanStorage(sessionStorage);
+    scanStorage(localStorage);
+
+    return Array.from(hosts);
+  }
+
+  private getDecryptedEntry(
+    provider: GitProviderType,
+    instanceHost?: string,
+  ): { envelope: StoredTokenEnvelope; payload: StoredTokenPayload } | null {
+    const key = this.getTokenKey(provider, instanceHost);
+    let raw = this.getStorageItem(sessionStorage, key);
+    let isFromSession = true;
+
+    if (!raw) {
+      raw = this.getStorageItem(localStorage, key);
+      isFromSession = false;
+    }
+
+    if (!raw) {
+      return null;
+    }
+
+    try {
+      const envelope: StoredTokenEnvelope = JSON.parse(raw);
+
+      if (envelope.exp !== null && Date.now() > envelope.exp) {
+        this.clearToken(provider, instanceHost);
+        return null;
+      }
+
+      const payload = this.decryptPayload(envelope);
+      if (!payload || payload.provider !== provider) {
+        this.clearToken(provider, instanceHost);
+        return null;
+      }
+
+      return { envelope, payload };
+    } catch {
+      if (isFromSession) {
+        this.removeStorageItem(sessionStorage, key);
+      } else {
+        this.removeStorageItem(localStorage, key);
+      }
+      return null;
+    }
+  }
+
+  private getTokenKey(provider: GitProviderType, instanceHost?: string): string {
+    if (provider === "gitlab" && instanceHost && instanceHost !== "gitlab.com") {
+      return `${this.storagePrefix}${provider}:${instanceHost}`;
+    }
     return `${this.storagePrefix}${provider}`;
   }
 
-  private getUserKey(provider: GitProviderType): string {
+  private getUserKey(provider: GitProviderType, instanceHost?: string): string {
+    if (provider === "gitlab" && instanceHost && instanceHost !== "gitlab.com") {
+      return `${this.userPrefix}${provider}:${instanceHost}`;
+    }
     return `${this.userPrefix}${provider}`;
   }
 
-  private encryptPayload(payload: StoredTokenPayload, rememberMe: boolean): StoredTokenEnvelope {
+  private encryptPayload(
+    payload: StoredTokenPayload,
+    rememberMe: boolean,
+    envelopeExp: number | null = payload.expiresAt,
+  ): StoredTokenEnvelope {
     const jsonStr = JSON.stringify(payload);
     const iv = this.generateRandomHex(16);
     const keyStream = this.deriveKeystream(iv, jsonStr.length);
@@ -185,14 +269,14 @@ export class TokenStorageService {
     }
 
     const data = this.encodeBase64(cipherChars.join(""));
-    const sig = this.computeSignature(iv, jsonStr, payload.expiresAt);
+    const sig = this.computeSignature(iv, jsonStr, envelopeExp);
 
     return {
       v: 1,
       iv,
       data,
       sig,
-      exp: payload.expiresAt,
+      exp: envelopeExp,
       rm: rememberMe,
     };
   }
diff --git a/src/app/services/tooltip.service.ts b/src/app/services/tooltip.service.ts
index 61ae8415..62e8b489 100644
--- a/src/app/services/tooltip.service.ts
+++ b/src/app/services/tooltip.service.ts
@@ -7,8 +7,11 @@ import { OverlayManagerService, OverlayType } from "./overlay-manager.service";
 })
 export class TooltipService {
   private tooltipComponentRef: ComponentRef<TooltipComponent> | null = null;
-  private showTimeout: any;
-  private readonly SHOW_DELAY = 500; // ms
+  private showTimeout: any = null;
+  private warmResetTimeout: any = null;
+  private isWarm = false;
+  private readonly SHOW_DELAY = 400; // ms
+  private readonly WARMUP_RESET_DELAY = 400; // ms grace period before resetting warm state
 
   constructor(
     private componentFactoryResolver: ComponentFactoryResolver,
@@ -33,17 +36,37 @@ export class TooltipService {
     shortcutKeys?: string[],
     maxWidth?: string | number,
   ) {
-    this.hide(); // Hide any existing tooltip immediately
+    if (this.warmResetTimeout) {
+      clearTimeout(this.warmResetTimeout);
+      this.warmResetTimeout = null;
+    }
+
+    const wasShowing = this.isShowing();
+    const shouldBeInstant = this.isWarm || wasShowing;
+
+    this.destroyTooltip();
 
-    this.showTimeout = setTimeout(() => {
-      this.tooltipComponentRef = this.createTooltipComponent(content, placement, shortcutKeys, undefined, maxWidth);
+    if (this.showTimeout) {
+      clearTimeout(this.showTimeout);
+      this.showTimeout = null;
+    }
+
+    const render = () => {
+      this.isWarm = true;
+      this.tooltipComponentRef = this.createTooltipComponent(content, placement, shortcutKeys, undefined, maxWidth, shouldBeInstant);
 
       // Calculate position
       const rect = element.getBoundingClientRect();
       this.setPosition(rect, placement).then(() => {
         this.tooltipComponentRef?.instance.reveal();
       });
-    }, this.SHOW_DELAY);
+    };
+
+    if (shouldBeInstant) {
+      render();
+    } else {
+      this.showTimeout = setTimeout(render, this.SHOW_DELAY);
+    }
   }
 
   /**
@@ -59,10 +82,24 @@ export class TooltipService {
     context?: any,
     maxWidth?: string | number,
   ) {
-    this.hide();
+    if (this.warmResetTimeout) {
+      clearTimeout(this.warmResetTimeout);
+      this.warmResetTimeout = null;
+    }
+
+    const wasShowing = this.isShowing();
+    const shouldBeInstant = instant || this.isWarm || wasShowing;
+
+    this.destroyTooltip();
+
+    if (this.showTimeout) {
+      clearTimeout(this.showTimeout);
+      this.showTimeout = null;
+    }
 
     const render = () => {
-      this.tooltipComponentRef = this.createTooltipComponent(content, placement, shortcutKeys, context, maxWidth);
+      this.isWarm = true;
+      this.tooltipComponentRef = this.createTooltipComponent(content, placement, shortcutKeys, context, maxWidth, shouldBeInstant);
 
       // Simulate a rect for position calculation
       const rect = {
@@ -79,7 +116,7 @@ export class TooltipService {
       });
     };
 
-    if (instant) {
+    if (shouldBeInstant) {
       render();
     } else {
       this.showTimeout = setTimeout(render, this.SHOW_DELAY);
@@ -107,16 +144,19 @@ export class TooltipService {
   hide() {
     if (this.showTimeout) {
       clearTimeout(this.showTimeout);
+      this.showTimeout = null;
     }
 
     if (this.tooltipComponentRef) {
-      const domElem = (this.tooltipComponentRef.hostView as EmbeddedViewRef<any>)?.rootNodes?.[0] as HTMLElement;
-      if (domElem?.parentNode) {
-        domElem.parentNode.removeChild(domElem);
+      this.destroyTooltip();
+      this.isWarm = true;
+      if (this.warmResetTimeout) {
+        clearTimeout(this.warmResetTimeout);
       }
-      this.appRef.detachView(this.tooltipComponentRef.hostView);
-      this.tooltipComponentRef.destroy();
-      this.tooltipComponentRef = null;
+      this.warmResetTimeout = setTimeout(() => {
+        this.isWarm = false;
+        this.warmResetTimeout = null;
+      }, this.WARMUP_RESET_DELAY);
     }
   }
 
@@ -126,12 +166,14 @@ export class TooltipService {
     shortcutKeys?: string[],
     context?: any,
     maxWidth?: string | number,
+    instant = false,
   ): ComponentRef<TooltipComponent> {
     const componentFactory = this.componentFactoryResolver.resolveComponentFactory(TooltipComponent);
     const componentRef = componentFactory.create(this.injector);
 
     componentRef.instance.content = content;
     componentRef.instance.placement = placement;
+    componentRef.instance.instant = instant;
     if (shortcutKeys) {
       componentRef.instance.shortcutKeys = shortcutKeys;
     }
@@ -149,6 +191,18 @@ export class TooltipService {
     return componentRef;
   }
 
+  private destroyTooltip() {
+    if (this.tooltipComponentRef) {
+      const domElem = (this.tooltipComponentRef.hostView as EmbeddedViewRef<any>)?.rootNodes?.[0] as HTMLElement;
+      if (domElem?.parentNode) {
+        domElem.parentNode.removeChild(domElem);
+      }
+      this.appRef.detachView(this.tooltipComponentRef.hostView);
+      this.tooltipComponentRef.destroy();
+      this.tooltipComponentRef = null;
+    }
+  }
+
   private calculatePosition(
     rect: DOMRect,
     tooltipRect: DOMRect,
@@ -186,28 +240,36 @@ export class TooltipService {
   ): { top: number; left: number } {
     let { t: top, l: left } = this.calculatePosition(rect, tooltipRect, placement, offset);
 
-    // Dynamic placement adjustment to prevent hiding the hovered item
+    // Dynamic placement adjustment to prevent hiding the hovered item or overflowing the viewport
     if (placement === "right" && left + tooltipRect.width > window.innerWidth - 8) {
       const alternative = this.calculatePosition(rect, tooltipRect, "left", offset);
-      if (alternative.l >= 8) {
+      const roomRight = window.innerWidth - 8 - (rect.right + offset);
+      const roomLeft = rect.left - offset - 8;
+      if (alternative.l >= 8 || roomLeft > roomRight) {
         top = alternative.t;
         left = alternative.l;
       }
     } else if (placement === "left" && left < 8) {
       const alternative = this.calculatePosition(rect, tooltipRect, "right", offset);
-      if (alternative.l + tooltipRect.width <= window.innerWidth - 8) {
+      const roomLeft = rect.left - offset - 8;
+      const roomRight = window.innerWidth - 8 - (rect.right + offset);
+      if (alternative.l + tooltipRect.width <= window.innerWidth - 8 || roomRight > roomLeft) {
         top = alternative.t;
         left = alternative.l;
       }
     } else if (placement === "top" && top < 8) {
       const alternative = this.calculatePosition(rect, tooltipRect, "bottom", offset);
-      if (alternative.t + tooltipRect.height <= window.innerHeight - 8) {
+      const roomTop = rect.top - offset - 8;
+      const roomBottom = window.innerHeight - 8 - (rect.bottom + offset);
+      if (alternative.t + tooltipRect.height <= window.innerHeight - 8 || roomBottom > roomTop) {
         top = alternative.t;
         left = alternative.l;
       }
     } else if (placement === "bottom" && top + tooltipRect.height > window.innerHeight - 8) {
       const alternative = this.calculatePosition(rect, tooltipRect, "top", offset);
-      if (alternative.t >= 8) {
+      const roomBottom = window.innerHeight - 8 - (rect.bottom + offset);
+      const roomTop = rect.top - offset - 8;
+      if (alternative.t >= 8 || roomTop > roomBottom) {
         top = alternative.t;
         left = alternative.l;
       }
@@ -217,14 +279,12 @@ export class TooltipService {
   }
 
   private ensureWithinBounds(top: number, left: number, tooltipRect: DOMRect): { top: number; left: number } {
-    if (left < 8) left = 8;
-    if (top < 8) top = 8;
-    if (left + tooltipRect.width > window.innerWidth - 8) {
-      left = window.innerWidth - tooltipRect.width - 8;
-    }
-    if (top + tooltipRect.height > window.innerHeight - 8) {
-      top = window.innerHeight - tooltipRect.height - 8;
-    }
+    const maxLeft = Math.max(8, window.innerWidth - tooltipRect.width - 8);
+    const maxTop = Math.max(8, window.innerHeight - tooltipRect.height - 8);
+
+    left = Math.min(Math.max(8, left), maxLeft);
+    top = Math.min(Math.max(8, top), maxTop);
+
     return { top, left };
   }
 
diff --git a/src/app/shared/ui/dev-bar/dev-bar.component.html b/src/app/shared/ui/dev-bar/dev-bar.component.html
index 93f35f09..026131a1 100644
--- a/src/app/shared/ui/dev-bar/dev-bar.component.html
+++ b/src/app/shared/ui/dev-bar/dev-bar.component.html
@@ -3,7 +3,8 @@
   *ngIf="isCollapsed"
   class="dev-bar-minimized"
   (click)="toggleCollapse()"
-  title="Développer la barre développeur"
+  [appTooltip]="'Développer la barre développeur'"
+  placement="top"
 >
   <span class="badge-dev-tag">DEV</span>
   <span class="fps-pill" [ngClass]="fps >= 55 ? 'fps-good' : (fps >= 30 ? 'fps-medium' : 'fps-bad')">
@@ -26,26 +27,27 @@
     <div
       class="metric-pill"
       [ngClass]="fps >= 55 ? 'fps-good' : (fps >= 30 ? 'fps-medium' : 'fps-bad')"
-      title="Images par seconde (FPS en temps réel)"
+      [appTooltip]="'Images par seconde (FPS en temps réel)'"
+      placement="top"
     >
       <span class="metric-dot"></span>
       <span class="metric-val">{{ fps }} FPS</span>
     </div>
 
     <!-- Memory -->
-    <div *ngIf="memoryMB !== null" class="metric-pill" title="Mémoire JavaScript Heap utilisée">
+    <div *ngIf="memoryMB !== null" class="metric-pill" [appTooltip]="'Mémoire JavaScript Heap utilisée'" placement="top">
       <i class="fas fa-memory mr-1"></i>
       <span>{{ memoryMB }} MB</span>
     </div>
 
     <!-- Viewport / Breakpoint -->
-    <div class="metric-pill" title="Dimensions d'écran et breakpoint responsive">
+    <div class="metric-pill" [appTooltip]="'Dimensions d\'écran et breakpoint responsive'" placement="top">
       <i class="fas fa-desktop mr-1"></i>
       <span>{{ viewportWidth }}px · {{ breakpoint }}</span>
     </div>
 
     <!-- Route -->
-    <div class="metric-pill route-pill" [title]="'Route active : ' + currentRoute">
+    <div class="metric-pill route-pill" [appTooltip]="'Route active : ' + currentRoute" placement="top">
       <i class="fas fa-compass mr-1"></i>
       <span class="route-text">{{ currentRoute || '/' }}</span>
     </div>
@@ -60,7 +62,8 @@
         class="dev-bar-btn"
         [class.active]="activePopover === 'toasts'"
         (click)="togglePopover('toasts')"
-        title="Tester l'affichage des notifications toasts"
+        [appTooltip]="'Tester l\'affichage des notifications toasts'"
+        placement="top"
       >
         <i class="fas fa-bell mr-1.5"></i>
         <span>Toasts</span>
@@ -94,7 +97,8 @@
         class="dev-bar-btn"
         [class.active]="activePopover === 'modals'"
         (click)="togglePopover('modals')"
-        title="Ouvrir une modale de l'application"
+        [appTooltip]="'Ouvrir une modale de l\'application'"
+        placement="top"
       >
         <i class="fas fa-window-restore mr-1.5"></i>
         <span>Modales</span>
@@ -120,7 +124,8 @@
       type="button"
       class="dev-bar-btn"
       (click)="toggleTheme()"
-      [title]="themeService.isDarkMode ? 'Passer en mode clair' : 'Passer en mode sombre'"
+      [appTooltip]="themeService.isDarkMode ? 'Passer en mode clair' : 'Passer en mode sombre'"
+      placement="top"
     >
       <i class="fas mr-1.5" [ngClass]="themeService.isDarkMode ? 'fa-sun text-warning' : 'fa-moon'"></i>
       <span>{{ themeService.isDarkMode ? 'Clair' : 'Sombre' }}</span>
@@ -131,7 +136,8 @@
       type="button"
       class="dev-bar-btn btn-danger-hover"
       (click)="clearStorage()"
-      title="Vider intégralement le LocalStorage"
+      [appTooltip]="'Vider intégralement le LocalStorage'"
+      placement="top"
     >
       <i class="fas fa-trash-alt mr-1.5"></i>
       <span>Vider Storage</span>
@@ -140,29 +146,17 @@
 
   <!-- Right: Feature Flags & Controls -->
   <div class="dev-bar-section right-section">
-    <!-- GitLab Flag -->
+    <!-- Mock GitLab Instance Toggle -->
     <button
       type="button"
       class="dev-flag-toggle"
-      [class.is-enabled]="devFlagsService.gitlabCloudEnabled"
-      (click)="toggleGitlabCloud()"
-      [title]="(devFlagsService.gitlabCloudEnabled ? 'Désactiver' : 'Activer') + ' GitLab'"
-    >
-      <i class="fab fa-gitlab mr-1.5"></i>
-      <span>GitLab</span>
-      <span class="flag-switch"></span>
-    </button>
-
-    <!-- GitLab Custom Instance Flag -->
-    <button
-      type="button"
-      class="dev-flag-toggle"
-      [class.is-enabled]="devFlagsService.gitlabCustomEnabled"
-      (click)="toggleGitlabCustom()"
-      [title]="(devFlagsService.gitlabCustomEnabled ? 'Désactiver' : 'Activer') + ' GitLab Auto-hébergé'"
+      [class.is-enabled]="mockGitlabInstanceService.isMockActive"
+      (click)="toggleMockGitlab()"
+      [appTooltip]="(mockGitlabInstanceService.isMockActive ? 'Désactiver' : 'Activer') + ' le mock GitLab (UT3)'"
+      placement="top"
     >
       <i class="fas fa-server mr-1.5"></i>
-      <span>GitLab Auto-hébergé</span>
+      <span>Tester Instance GitLab</span>
       <span class="flag-switch"></span>
     </button>
 
@@ -171,7 +165,8 @@
       type="button"
       class="dev-bar-icon-btn ml-1"
       (click)="toggleCollapse()"
-      title="Réduire la barre de dev"
+      [appTooltip]="'Réduire la barre de dev'"
+      placement="top"
     >
       <i class="fas fa-chevron-down"></i>
     </button>
diff --git a/src/app/shared/ui/dev-bar/dev-bar.component.ts b/src/app/shared/ui/dev-bar/dev-bar.component.ts
index dc9bae93..c9b56bda 100644
--- a/src/app/shared/ui/dev-bar/dev-bar.component.ts
+++ b/src/app/shared/ui/dev-bar/dev-bar.component.ts
@@ -4,6 +4,7 @@ import { Subscription } from "rxjs";
 import { filter } from "rxjs/operators";
 import { environment } from "@environments/environment";
 import { DevFlagsService } from "@services/dev-flags.service";
+import { MockGitlabInstanceService } from "@app/dev-mock/mock-gitlab-instance.service";
 import { ToastService } from "@services/toast.service";
 import { ThemeService } from "@services/theme.service";
 import { GithubAuthService } from "@services/github-auth.service";
@@ -35,6 +36,7 @@ export class DevBarComponent implements OnInit, OnDestroy {
 
   constructor(
     public devFlagsService: DevFlagsService,
+    public mockGitlabInstanceService: MockGitlabInstanceService,
     public toastService: ToastService,
     public themeService: ThemeService,
     public githubAuthService: GithubAuthService,
@@ -138,17 +140,11 @@ export class DevBarComponent implements OnInit, OnDestroy {
     this.closePopover();
   }
 
-  /* Feature Flags */
-  toggleGitlabCloud(): void {
-    this.devFlagsService.toggleGitlabCloud();
-    const state = this.devFlagsService.gitlabCloudEnabled ? "activé" : "désactivé";
-    this.toastService.success("Feature Flag", `GitLab ${state}`);
-  }
-
-  toggleGitlabCustom(): void {
-    this.devFlagsService.toggleGitlabCustom();
-    const state = this.devFlagsService.gitlabCustomEnabled ? "activé" : "désactivé";
-    this.toastService.success("Feature Flag", `GitLab Auto-hébergé ${state}`);
+  /* Mock GitLab Instance */
+  async toggleMockGitlab(): Promise<void> {
+    const active = await this.mockGitlabInstanceService.toggleMock();
+    const state = active ? "activé (prof.turing @ gitlab.univ-tlse3.fr)" : "désactivé";
+    this.toastService.success("Mock GitLab", `Mock d'instance GitLab ${state}`);
   }
 
   /* Quick Utilities */
diff --git a/src/app/shared/ui/shortcuts-modal/shortcuts-modal.component.html b/src/app/shared/ui/shortcuts-modal/shortcuts-modal.component.html
index dca770ec..322211bf 100644
--- a/src/app/shared/ui/shortcuts-modal/shortcuts-modal.component.html
+++ b/src/app/shared/ui/shortcuts-modal/shortcuts-modal.component.html
@@ -21,7 +21,7 @@ <h5 class="modal-title m-0">
   <div class="shortcuts-grid">
     <!-- Column 1: Global Navigation -->
     <div class="shortcuts-column">
-      <div class="shortcuts-column-header d-flex align-items-center mb-3">
+      <div class="shortcuts-column-header d-flex align-items-center mb-2">
         <i class="fas fa-compass column-icon mr-2"></i>
         <span class="column-title">
           {{ 'MODAL-SHORTCUTS.SECTION_GLOBAL_NAV' | translate }}
@@ -30,30 +30,91 @@ <h5 class="modal-title m-0">
       <div class="shortcuts-list">
         <div class="shortcut-row">
           <span class="shortcut-label">{{ 'MODAL-SHORTCUTS.NAV_OVERVIEW' | translate }}</span>
+          <span class="shortcut-dots"></span>
           <kbd class="shortcut-key">1</kbd>
         </div>
         <div class="shortcut-row">
           <span class="shortcut-label">{{ 'MODAL-SHORTCUTS.NAV_STUDENTS' | translate }}</span>
+          <span class="shortcut-dots"></span>
           <kbd class="shortcut-key">2</kbd>
         </div>
         <div class="shortcut-row">
           <span class="shortcut-label">{{ 'MODAL-SHORTCUTS.NAV_QUESTIONS' | translate }}</span>
+          <span class="shortcut-dots"></span>
           <kbd class="shortcut-key">3</kbd>
         </div>
         <div class="shortcut-row">
           <span class="shortcut-label">{{ 'MODAL-SHORTCUTS.NAV_CONFIG' | translate }}</span>
+          <span class="shortcut-dots"></span>
           <kbd class="shortcut-key">C</kbd>
         </div>
         <div class="shortcut-row">
           <span class="shortcut-label">{{ 'MODAL-SHORTCUTS.NAV_SHORTCUTS' | translate }}</span>
+          <span class="shortcut-dots"></span>
           <kbd class="shortcut-key">?</kbd>
         </div>
+        <div class="shortcut-row">
+          <span class="shortcut-label">{{ 'MODAL-SHORTCUTS.TOGGLE_ANONYMOUS' | translate }}</span>
+          <span class="shortcut-dots"></span>
+          <kbd class="shortcut-key">A</kbd>
+        </div>
+      </div>
+    </div>
+
+    <!-- Column 2: Filter Bar & Search -->
+    <div class="shortcuts-column">
+      <div class="shortcuts-column-header d-flex align-items-center mb-2">
+        <i class="fas fa-filter column-icon mr-2"></i>
+        <span class="column-title">
+          {{ 'MODAL-SHORTCUTS.SECTION_FILTERS' | translate }}
+        </span>
+      </div>
+      <div class="shortcuts-list">
+        <div class="shortcut-row">
+          <span class="shortcut-label">{{ 'MODAL-SHORTCUTS.FILTER_FOCUS' | translate }}</span>
+          <span class="shortcut-dots"></span>
+          <kbd class="shortcut-key">F</kbd>
+        </div>
+        <div class="shortcut-row">
+          <span class="shortcut-label">{{ 'MODAL-SHORTCUTS.FILTER_CLEAR' | translate }}</span>
+          <span class="shortcut-dots"></span>
+          <kbd class="shortcut-key">{{ 'MODAL-SHORTCUTS.KEY_ESC' | translate }}</kbd>
+        </div>
+        <div class="shortcut-row">
+          <span class="shortcut-label">{{ 'MODAL-SHORTCUTS.FILTER_NAVIGATE' | translate }}</span>
+          <span class="shortcut-dots"></span>
+          <div class="shortcut-combo">
+            <kbd class="shortcut-key">←</kbd>
+            <kbd class="shortcut-key">→</kbd>
+          </div>
+        </div>
+        <div class="shortcut-row">
+          <span class="shortcut-label">{{ 'MODAL-SHORTCUTS.FILTER_MOVE' | translate }}</span>
+          <span class="shortcut-dots"></span>
+          <div class="shortcut-combo">
+            <kbd class="shortcut-key">{{ modifierKey }}</kbd>
+            <span class="key-sep">+</span>
+            <kbd class="shortcut-key">←</kbd>
+            <span class="key-sep">/</span>
+            <kbd class="shortcut-key">→</kbd>
+          </div>
+        </div>
+        <div class="shortcut-row">
+          <span class="shortcut-label">{{ 'MODAL-SHORTCUTS.FILTER_DELETE' | translate }}</span>
+          <span class="shortcut-dots"></span>
+          <kbd class="shortcut-key">{{ 'MODAL-SHORTCUTS.KEY_DELETE' | translate }}</kbd>
+        </div>
+        <div class="shortcut-row">
+          <span class="shortcut-label">{{ 'MODAL-SHORTCUTS.FILTER_EXCLUDE' | translate }}</span>
+          <span class="shortcut-dots"></span>
+          <kbd class="shortcut-key">!</kbd>
+        </div>
       </div>
     </div>
 
-    <!-- Column 2: Graphs & Visualizations -->
+    <!-- Column 3: Graphs & Sessions -->
     <div class="shortcuts-column">
-      <div class="shortcuts-column-header d-flex align-items-center mb-3">
+      <div class="shortcuts-column-header d-flex align-items-center mb-2">
         <i class="fas fa-chart-line column-icon mr-2"></i>
         <span class="column-title">
           {{ 'MODAL-SHORTCUTS.SECTION_GRAPHS' | translate }}
@@ -62,68 +123,84 @@ <h5 class="modal-title m-0">
       <div class="shortcuts-list">
         <div class="shortcut-row">
           <span class="shortcut-label">{{ 'MODAL-SHORTCUTS.GRAPH_ZOOM_IN' | translate }}</span>
+          <span class="shortcut-dots"></span>
           <kbd class="shortcut-key">+</kbd>
         </div>
         <div class="shortcut-row">
           <span class="shortcut-label">{{ 'MODAL-SHORTCUTS.GRAPH_ZOOM_OUT' | translate }}</span>
+          <span class="shortcut-dots"></span>
           <kbd class="shortcut-key">-</kbd>
         </div>
         <div class="shortcut-row">
           <span class="shortcut-label">{{ 'MODAL-SHORTCUTS.GRAPH_RESET_ZOOM' | translate }}</span>
+          <span class="shortcut-dots"></span>
           <kbd class="shortcut-key">{{ 'MODAL-SHORTCUTS.KEY_SPACE' | translate }}</kbd>
         </div>
+        <div class="shortcut-row">
+          <span class="shortcut-label">{{ 'MODAL-SHORTCUTS.GRAPH_SESSION_NAV' | translate }}</span>
+          <span class="shortcut-dots"></span>
+          <div class="shortcut-combo">
+            <kbd class="shortcut-key">←</kbd>
+            <kbd class="shortcut-key">→</kbd>
+          </div>
+        </div>
         <div class="shortcut-row">
           <span class="shortcut-label">{{ 'MODAL-SHORTCUTS.GRAPH_RELOAD' | translate }}</span>
+          <span class="shortcut-dots"></span>
           <kbd class="shortcut-key">R</kbd>
         </div>
         <div class="shortcut-row">
           <span class="shortcut-label">{{ 'MODAL-SHORTCUTS.GRAPH_COPY_HASH' | translate }}</span>
+          <span class="shortcut-dots"></span>
           <kbd class="shortcut-key">H</kbd>
         </div>
       </div>
     </div>
 
-    <!-- Column 3: Filter Bar & Search -->
+    <!-- Column 4: Mouse & Gestures -->
     <div class="shortcuts-column">
-      <div class="shortcuts-column-header d-flex align-items-center mb-3">
-        <i class="fas fa-filter column-icon mr-2"></i>
+      <div class="shortcuts-column-header d-flex align-items-center mb-2">
+        <i class="fas fa-mouse-pointer column-icon mr-2"></i>
         <span class="column-title">
-          {{ 'MODAL-SHORTCUTS.SECTION_FILTERS' | translate }}
+          {{ 'MODAL-SHORTCUTS.SECTION_GESTURES' | translate }}
         </span>
       </div>
       <div class="shortcuts-list">
         <div class="shortcut-row">
-          <span class="shortcut-label">{{ 'MODAL-SHORTCUTS.FILTER_FOCUS' | translate }}</span>
-          <kbd class="shortcut-key">F</kbd>
-        </div>
-        <div class="shortcut-row">
-          <span class="shortcut-label">{{ 'MODAL-SHORTCUTS.FILTER_CLEAR' | translate }}</span>
-          <kbd class="shortcut-key">{{ 'MODAL-SHORTCUTS.KEY_ESC' | translate }}</kbd>
+          <span class="shortcut-label">{{ 'MODAL-SHORTCUTS.GESTURE_SESSION_INFO' | translate }}</span>
+          <span class="shortcut-dots"></span>
+          <ng-container *ngTemplateOutlet="mouseLeftClickIcon"></ng-container>
         </div>
         <div class="shortcut-row">
-          <span class="shortcut-label">{{ 'MODAL-SHORTCUTS.FILTER_NAVIGATE' | translate }}</span>
+          <span class="shortcut-label">{{ 'MODAL-SHORTCUTS.GESTURE_SESSION_FOCUS' | translate }}</span>
+          <span class="shortcut-dots"></span>
           <div class="shortcut-combo">
-            <kbd class="shortcut-key">←</kbd>
-            <kbd class="shortcut-key">→</kbd>
+            <ng-container *ngTemplateOutlet="mouseLeftClickIcon"></ng-container>
+            <span class="shortcut-key shortcut-key-sm">2×</span>
           </div>
         </div>
         <div class="shortcut-row">
-          <span class="shortcut-label">{{ 'MODAL-SHORTCUTS.FILTER_MOVE' | translate }}</span>
+          <span class="shortcut-label">{{ 'MODAL-SHORTCUTS.GESTURE_BOX_ZOOM' | translate }}</span>
+          <span class="shortcut-dots"></span>
           <div class="shortcut-combo">
-            <kbd class="shortcut-key">{{ modifierKey }}</kbd>
+            <kbd class="shortcut-key">{{ 'MODAL-SHORTCUTS.KEY_SHIFT' | translate }}</kbd>
             <span class="key-sep">+</span>
-            <kbd class="shortcut-key">←</kbd>
-            <span class="key-sep">/</span>
-            <kbd class="shortcut-key">→</kbd>
+            <ng-container *ngTemplateOutlet="mouseDragIcon"></ng-container>
           </div>
         </div>
         <div class="shortcut-row">
-          <span class="shortcut-label">{{ 'MODAL-SHORTCUTS.FILTER_DELETE' | translate }}</span>
-          <kbd class="shortcut-key">{{ 'MODAL-SHORTCUTS.KEY_DELETE' | translate }}</kbd>
+          <span class="shortcut-label">{{ 'MODAL-SHORTCUTS.GESTURE_WHEEL_ZOOM' | translate }}</span>
+          <span class="shortcut-dots"></span>
+          <div class="shortcut-combo">
+            <kbd class="shortcut-key">{{ 'MODAL-SHORTCUTS.KEY_SHIFT' | translate }}</kbd>
+            <span class="key-sep">+</span>
+            <ng-container *ngTemplateOutlet="mouseWheelIcon"></ng-container>
+          </div>
         </div>
         <div class="shortcut-row">
-          <span class="shortcut-label">{{ 'MODAL-SHORTCUTS.FILTER_EXCLUDE' | translate }}</span>
-          <kbd class="shortcut-key">!</kbd>
+          <span class="shortcut-label">{{ 'MODAL-SHORTCUTS.GESTURE_CONTEXT_MENU' | translate }}</span>
+          <span class="shortcut-dots"></span>
+          <ng-container *ngTemplateOutlet="mouseRightClickIcon"></ng-container>
         </div>
       </div>
     </div>
@@ -135,3 +212,49 @@ <h5 class="modal-title m-0">
     {{ 'MODAL-SHORTCUTS.CLOSE_HINT' | translate:{ key1: '?', key2: ('MODAL-SHORTCUTS.KEY_ESC' | translate) } }}
   </span>
 </div>
+
+<ng-template #mouseLeftClickIcon>
+  <span class="shortcut-key mouse-keycap d-flex align-items-center justify-content-center">
+    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <rect x="5" y="2" width="14" height="20" rx="7" ry="7"></rect>
+      <path d="M5 9h14"></path>
+      <path d="M12 2v7"></path>
+      <path d="M5 9V9C5 5.134 8.134 2 12 2V9H5Z" fill="currentColor"></path>
+    </svg>
+  </span>
+</ng-template>
+
+<ng-template #mouseRightClickIcon>
+  <span class="shortcut-key mouse-keycap d-flex align-items-center justify-content-center">
+    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <rect x="5" y="2" width="14" height="20" rx="7" ry="7"></rect>
+      <path d="M5 9h14"></path>
+      <path d="M12 2v7"></path>
+      <path d="M19 9V9C19 5.134 15.866 2 12 2V9H19Z" fill="currentColor"></path>
+    </svg>
+  </span>
+</ng-template>
+
+<ng-template #mouseDragIcon>
+  <span class="shortcut-key mouse-keycap d-flex align-items-center justify-content-center">
+    <svg width="15" height="13" viewBox="0 0 26 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <rect x="7" y="2" width="12" height="20" rx="6" ry="6"></rect>
+      <path d="M7 9h12"></path>
+      <path d="M13 2v7"></path>
+      <path d="M7 9V8C7 4.686 9.686 2 13 2V9H7Z" fill="currentColor"></path>
+      <polyline points="3.5 9.5 1 12 3.5 14.5"></polyline>
+      <polyline points="22.5 9.5 25 12 22.5 14.5"></polyline>
+    </svg>
+  </span>
+</ng-template>
+
+<ng-template #mouseWheelIcon>
+  <span class="shortcut-key mouse-keycap d-flex align-items-center justify-content-center">
+    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <rect x="5" y="2" width="14" height="20" rx="7" ry="7"></rect>
+      <path d="M5 9h14"></path>
+      <path d="M12 2v7"></path>
+      <rect x="10.5" y="4" width="3" height="5.5" rx="1.5" fill="currentColor" stroke="none"></rect>
+    </svg>
+  </span>
+</ng-template>
diff --git a/src/app/shared/ui/shortcuts-modal/shortcuts-modal.component.scss b/src/app/shared/ui/shortcuts-modal/shortcuts-modal.component.scss
index 3b1dbe75..ecfcb04f 100644
--- a/src/app/shared/ui/shortcuts-modal/shortcuts-modal.component.scss
+++ b/src/app/shared/ui/shortcuts-modal/shortcuts-modal.component.scss
@@ -53,28 +53,31 @@
 
 .shortcuts-grid {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 2rem;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem 1.25rem;
 
-  @media (max-width: 860px) {
+  @media (max-width: 720px) {
     grid-template-columns: 1fr;
-    gap: 1.5rem;
+    gap: 1rem;
   }
 }
 
 .shortcuts-column {
   display: flex;
   flex-direction: column;
-
-  &:not(:last-child) {
-    @media (min-width: 861px) {
-      padding-right: 2rem;
-      border-right: 1px solid var(--color-border);
-    }
-  }
+  background: var(--color-bg-body);
+  border: 1px solid var(--color-border);
+  border-radius: 16px;
+  padding: 0.85rem 1rem;
 }
 
 .shortcuts-column-header {
+  display: flex;
+  align-items: center;
+  padding-bottom: 0.5rem;
+  margin-bottom: 0.35rem;
+  border-bottom: 1px solid var(--color-border);
+
   .column-icon {
     font-size: 0.8rem;
     color: var(--color-primary);
@@ -82,10 +85,10 @@
   }
 
   .column-title {
-    font-size: 0.775rem;
+    font-size: 0.725rem;
     font-weight: 600;
     text-transform: uppercase;
-    letter-spacing: 0.04em;
+    letter-spacing: 0.05em;
     color: var(--color-text-secondary);
   }
 }
@@ -93,24 +96,41 @@
 .shortcuts-list {
   display: flex;
   flex-direction: column;
-  gap: 0.15rem;
+  gap: 0.1rem;
 }
 
 .shortcut-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0.375rem 0;
-  gap: 0.75rem;
+  padding: 0.25rem 0.35rem;
+  border-radius: 8px;
+  transition: background-color $transition-fast;
+
+  &:hover {
+    background-color: var(--color-hover);
+  }
 
   .shortcut-label {
-    font-size: 0.825rem;
+    font-size: 0.815rem;
     color: var(--color-text-primary);
     font-weight: 400;
     line-height: 1.35;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
-}
 
+  .shortcut-dots {
+    flex: 1;
+    border-bottom: 1px dashed var(--color-border);
+    margin: 0 0.5rem;
+    opacity: 0.5;
+    min-width: 10px;
+    height: 1px;
+    align-self: center;
+  }
+}
 
 .footer-hint {
   font-size: 0.75rem;
diff --git a/src/app/shared/ui/tooltip/tooltip.component.html b/src/app/shared/ui/tooltip/tooltip.component.html
index 33fa5a7f..2ce29011 100644
--- a/src/app/shared/ui/tooltip/tooltip.component.html
+++ b/src/app/shared/ui/tooltip/tooltip.component.html
@@ -1,5 +1,13 @@
-<div class="tooltip-container" [class]="placement" [class.show]="show" [class.shortcut-pressed]="shortcutPressed" [style.max-width]="resolvedMaxWidth">
-  <span class="tooltip-text">
+<div class="tooltip-container"
+     [class]="placement"
+     [class.show]="show"
+     [class.instant]="instant"
+     [attr.data-instant]="instant ? '' : null"
+     [class.shortcut-pressed]="shortcutPressed"
+     [class.has-template]="!isString(content)"
+     [class.is-text]="isString(content)"
+     [style.max-width]="resolvedMaxWidth">
+  <span class="tooltip-text" [class.w-100]="!isString(content)">
     <ng-container *ngIf="isString(content); else templateContent">
       <span [innerHTML]="content"></span>
     </ng-container>
diff --git a/src/app/shared/ui/tooltip/tooltip.component.scss b/src/app/shared/ui/tooltip/tooltip.component.scss
index d00a1465..0e3f83f3 100644
--- a/src/app/shared/ui/tooltip/tooltip.component.scss
+++ b/src/app/shared/ui/tooltip/tooltip.component.scss
@@ -6,14 +6,17 @@
   position: absolute;
   z-index: $zindex-tooltip;
   pointer-events: none;
+  max-width: calc(100vw - 16px);
 }
 
 .tooltip-container {
   display: flex;
   align-items: center;
   gap: 8px;
+  box-sizing: border-box;
   width: max-content;
-  max-width: var(--tooltip-max-width, 300px);
+  /* Default text tooltips have a readable compact width */
+  max-width: var(--tooltip-max-width, min(360px, calc(100vw - 24px)));
   background-color: var(--tooltip-glass-bg, var(--color-surface));
   color: var(--text-color);
   padding: 6px 12px;
@@ -24,36 +27,57 @@
   border: 1px solid var(--border-color);
   opacity: 0;
   will-change: opacity, transform;
-  transition: opacity 140ms ease-out, transform 140ms ease-out;
+  transform-origin: var(--transform-origin, center);
+  transition:
+    transform 0.125s ease-out,
+    opacity 0.125s ease-out;
 
   /* Glassmorphism / Minimalist */
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
 
+  &.has-template {
+    /* Template tooltips can expand to fit their rich content & helpers while bounded safely */
+    max-width: var(--tooltip-max-width, min(480px, calc(100vw - 24px)));
+    align-items: stretch;
+  }
+
   &.top {
+    --transform-origin: bottom center;
     transform: translateY(4px) scale(0.97);
-    transform-origin: bottom center;
   }
 
   &.bottom {
+    --transform-origin: top center;
     transform: translateY(-4px) scale(0.97);
-    transform-origin: top center;
   }
 
   &.left {
+    --transform-origin: right center;
     transform: translateX(4px) scale(0.97);
-    transform-origin: right center;
   }
 
   &.right {
+    --transform-origin: left center;
     transform: translateX(-4px) scale(0.97);
-    transform-origin: left center;
   }
 
   &.show {
     opacity: 1;
     transform: translate(0, 0) scale(1);
   }
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    opacity: 0;
+    transform: scale(0.97);
+  }
+
+  /* Disables subsequent animations in warm state */
+  &[data-instant],
+  &.instant {
+    transition-duration: 0ms !important;
+  }
 }
 
 .tooltip-text {
@@ -63,5 +87,18 @@
   overflow-wrap: break-word;
   word-break: normal;
   text-align: left;
+
+  &.w-100 {
+    display: block;
+    width: 100%;
+  }
+}
+
+.shortcut-combo {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  flex-shrink: 0;
+  white-space: nowrap;
 }
 
diff --git a/src/app/shared/ui/tooltip/tooltip.component.ts b/src/app/shared/ui/tooltip/tooltip.component.ts
index 95396a79..8c967c8c 100644
--- a/src/app/shared/ui/tooltip/tooltip.component.ts
+++ b/src/app/shared/ui/tooltip/tooltip.component.ts
@@ -14,6 +14,7 @@ export class TooltipComponent implements OnInit, OnDestroy {
   @Input() shortcutKeys?: string[];
   @Input() context?: any;
   @Input() maxWidth?: string | number;
+  @Input() instant = false;
 
   show = false;
   shortcutPressed = false;
diff --git a/src/app/utils/os.utils.ts b/src/app/utils/os.utils.ts
index c6fcf051..f6fe4b85 100644
--- a/src/app/utils/os.utils.ts
+++ b/src/app/utils/os.utils.ts
@@ -14,20 +14,35 @@ export class OsUtils {
   }
 
   static isTypingInInput(event: Event | KeyboardEvent): boolean {
+    const selector = "input, textarea, select, [contenteditable='true'], questions-chooser, ngb-typeahead-window, .typeahead-dropdown";
     const target = event.target as HTMLElement;
-    return (
-      !!target &&
+    if (
+      target &&
       (target.tagName === "INPUT" ||
         target.tagName === "TEXTAREA" ||
-        target.isContentEditable)
-    );
+        target.tagName === "SELECT" ||
+        target.isContentEditable ||
+        Boolean(target.closest(selector)))
+    ) {
+      return true;
+    }
+
+    const active = document.activeElement as HTMLElement;
+    if (
+      active &&
+      (active.tagName === "INPUT" ||
+        active.tagName === "TEXTAREA" ||
+        active.tagName === "SELECT" ||
+        active.isContentEditable ||
+        Boolean(active.closest(selector)))
+    ) {
+      return true;
+    }
+
+    return false;
   }
 
-  private static resolveKeyTranslation(
-    key: string,
-    fallback: string,
-    translateService?: TranslateService
-  ): string {
+  private static resolveKeyTranslation(key: string, fallback: string, translateService?: TranslateService): string {
     if (translateService) {
       const trans = translateService.instant(key);
       if (trans && trans !== key) return trans;
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index 2de1aaec..bc58a290 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -39,12 +39,15 @@
     "METADATA": "Metadata",
     "SIGN-IN": "Sign in",
     "SIGN-OUT": "Sign out",
-    "CONFIGURATION": "Configuration"
+    "CONFIGURATION": "Configuration",
+    "ANONYMOUS-MODE": "Anonymize",
+    "ANONYMOUS-MODE-TOOLTIP": "Toggle anonymous mode"
   },
   "SETTINGS": {
     "TITLE": "Settings",
     "NO-ASSIGNMENTS-DISCONNECTED": "Log in to see your assignments",
     "THEME": "Theme",
+    "ANONYMOUS-MODE": "Anonymous mode",
     "SHOW-LEGEND": "Show graphs legend",
     "HELP": "Help",
     "SHORTCUTS": "Keyboard shortcuts",
@@ -62,6 +65,7 @@
   },
   "HOME": {
     "SEARCH-PLACEHOLDER": "Search assignments...",
+    "CLEAR-SEARCH": "Clear search",
     "FILTERS": "Filters",
     "COPY": "Copy",
     "COPY-TOOLTIP": "Copy to clipboard",
@@ -166,6 +170,8 @@
     "MUST-LOGIN-GITLAB": "Connect a GitLab account to create an assignment",
     "MUST-LOGIN-ASSIGNMENT-GITHUB": "Connect a GitHub account to access this assignment",
     "MUST-LOGIN-ASSIGNMENT-GITLAB": "Connect a GitLab account to access this assignment",
+    "MUST-LOGIN-ASSIGNMENT-GITLAB-CUSTOM": "Connect the GitLab {{host}} account to access this assignment",
+    "CREATE-ASSIGNMENT-GITLAB-CUSTOM": "New GitLab Assignment ({{host}})",
     "FILTER": {
       "STATUS": "Status",
       "COURSE": "Course",
@@ -177,7 +183,8 @@
       "RESET": "Reset",
       "ALL": "All",
       "GITHUB": "GitHub",
-      "GITLAB": "GitLab"
+      "GITLAB": "GitLab",
+      "GITLAB_CLOUD": "GitLab.com"
     },
     "DURATION": {
       "DAYS": "d",
@@ -247,8 +254,8 @@
     "ZOOM": "Zoom"
   },
   "MODAL-SHORTCUTS": {
-    "TITLE": "Keyboard Shortcuts",
-    "SUBTITLE": "Cheatsheet of shortcuts and interactions across the app",
+    "TITLE": "Shortcuts & Interactions",
+    "SUBTITLE": "Cheatsheet of keyboard shortcuts and gestures across the app",
     "CLOSE": "Close",
     "CLOSE_HINT": "Press {{key1}} or {{key2}} to close",
     "SECTION_GLOBAL_NAV": "Global Navigation",
@@ -257,12 +264,20 @@
     "NAV_QUESTIONS": "Questions Tab",
     "NAV_CONFIG": "Configure assignment",
     "NAV_SHORTCUTS": "Toggle shortcuts panel",
-    "SECTION_GRAPHS": "Graphs & Visualizations",
+    "TOGGLE_ANONYMOUS": "Toggle anonymous mode",
+    "SECTION_GRAPHS": "Graphs & Sessions",
     "GRAPH_ZOOM_IN": "Zoom in",
     "GRAPH_ZOOM_OUT": "Zoom out",
     "GRAPH_RESET_ZOOM": "Reset zoom",
+    "GRAPH_SESSION_NAV": "Previous / next session",
     "GRAPH_RELOAD": "Reload data",
     "GRAPH_COPY_HASH": "Copy hovered commit hash",
+    "SECTION_GESTURES": "Mouse & Gestures",
+    "GESTURE_SESSION_INFO": "Show session details",
+    "GESTURE_SESSION_FOCUS": "Focus on session",
+    "GESTURE_BOX_ZOOM": "Time range box zoom",
+    "GESTURE_WHEEL_ZOOM": "Zoom graph timeline",
+    "GESTURE_CONTEXT_MENU": "Context menu (milestone / session)",
     "SECTION_FILTERS": "Filter Bar & Search",
     "FILTER_FOCUS": "Focus search bar",
     "FILTER_CLEAR": "Clear active filters",
@@ -273,7 +288,11 @@
     "KEY_SPACE": "Space",
     "KEY_ESC": "Esc",
     "KEY_DELETE": "Del",
-    "KEY_SHIFT": "Shift"
+    "KEY_SHIFT": "Shift",
+    "KEY_CLICK": "Click",
+    "KEY_DBLCLICK": "Double-click",
+    "KEY_RIGHT_CLICK": "Right click",
+    "KEY_DRAG": "Drag"
   },
   "TOAST": {
     "HASH_COPIED": "Commit hash copied!"
@@ -619,7 +638,17 @@
     "AUTH_TYPE_OAUTH_PKCE": "OAuth 2.0 PKCE",
     "AUTH_TYPE_PAT": "Token PAT",
     "REMEMBER_ME": "Stay signed in on this device",
-    "REMEMBER_ME_TOOLTIP": "The token is stored in the browser's localStorage. Convenient to avoid signing in repeatedly, but vulnerable to XSS and physical device access. Only enable on a trusted personal computer."
+    "REMEMBER_ME_TOOLTIP": "The token is stored in the browser's localStorage. Convenient to avoid signing in repeatedly, but vulnerable to XSS and physical device access. Only enable on a trusted personal computer.",
+    "INSTANCE_ALIAS_LABEL": "Server Name / Alias (optional)",
+    "INSTANCE_ALIAS_PLACEHOLDER": "E.g., University, Lab...",
+    "ADD_ANOTHER_INSTANCE": "Connect another instance",
+    "INSTANCES_COUNT_SINGULAR": "1 instance",
+    "INSTANCES_COUNT_PLURAL": "{{count}} instances",
+    "INVALID_PAT": "Invalid or expired Personal Access Token (PAT) (required scopes: read_api, read_user).",
+    "SERVER_UNREACHABLE": "Unable to reach the GitLab server. Please verify the instance URL.",
+    "INVALID_HOST": "For gitlab.com, please use the GitLab Cloud option above.",
+    "SWITCH_INSTANCE": "Switch instance",
+    "STATUS_INVALID": "Expired"
   },
   "QUESTIONS-ASSISTANT": {
     "TRIGGER_BUTTON": "Options & generator",
@@ -648,5 +677,19 @@
     "TOOLTIP_CLOSING_STANDARD": "Closing rule: Standard GitHub",
     "TOOLTIP_CLOSING_CUSTOM": "Closing rule: Custom ({{keywords}})",
     "TOOLTIP_CLOSING_NONE": "Closing rule: No keyword"
+  },
+  "ANONYMOUS": {
+    "STUDENT_LABEL": "Student {{index}}",
+    "STUDENT_PREFIX": "Student",
+    "STUDENT_FALLBACK": "Student",
+    "ANONYMOUS_AUTHOR": "Hidden author",
+    "ACTIVE_BADGE": "Anonymous mode active"
+  },
+  "TOKEN_HEALTH": {
+    "INVALID_TOOLTIP": "Invalid or revoked token – please reconnect",
+    "ERROR_TITLE": "Authentication Expired",
+    "ERROR_MSG_GITHUB": "Your GitHub token is invalid or has expired. Please reconnect in the Accounts section.",
+    "ERROR_MSG_GITLAB": "Your GitLab token is invalid or has expired. Please reconnect in the Accounts section."
   }
 }
+
diff --git a/src/assets/i18n/fr.json b/src/assets/i18n/fr.json
index 4b99d25a..5cef6373 100644
--- a/src/assets/i18n/fr.json
+++ b/src/assets/i18n/fr.json
@@ -38,12 +38,15 @@
     "METADATA": "Métadonnées",
     "SIGN-IN": "S'identifier",
     "SIGN-OUT": "Se déconnecter",
-    "CONFIGURATION": "Configuration"
+    "CONFIGURATION": "Configuration",
+    "ANONYMOUS-MODE": "Anonymat",
+    "ANONYMOUS-MODE-TOOLTIP": "Basculer le mode anonymat"
   },
   "SETTINGS": {
     "TITLE": "Paramètres",
     "NO-ASSIGNMENTS-DISCONNECTED": "Connectez-vous pour voir vos devoirs",
     "THEME": "Thème",
+    "ANONYMOUS-MODE": "Mode anonymat",
     "SHOW-LEGEND": "Afficher la légende des graphes",
     "HELP": "Aide",
     "SHORTCUTS": "Raccourcis clavier",
@@ -61,6 +64,7 @@
   },
   "HOME": {
     "SEARCH-PLACEHOLDER": "Rechercher un devoir...",
+    "CLEAR-SEARCH": "Effacer la recherche",
     "FILTERS": "Filtres",
     "COPY": "Copier",
     "COPY-TOOLTIP": "Copier dans le presse-papier",
@@ -165,6 +169,8 @@
     "MUST-LOGIN-GITLAB": "Connectez un compte GitLab pour créer un devoir",
     "MUST-LOGIN-ASSIGNMENT-GITHUB": "Connectez un compte GitHub pour accéder à ce devoir",
     "MUST-LOGIN-ASSIGNMENT-GITLAB": "Connectez un compte GitLab pour accéder à ce devoir",
+    "MUST-LOGIN-ASSIGNMENT-GITLAB-CUSTOM": "Connectez le compte GitLab {{host}} pour accéder à ce devoir",
+    "CREATE-ASSIGNMENT-GITLAB-CUSTOM": "Nouveau devoir GitLab ({{host}})",
     "FILTER": {
       "STATUS": "Statut",
       "COURSE": "Cours",
@@ -176,7 +182,8 @@
       "RESET": "Réinitialiser",
       "ALL": "Tous",
       "GITHUB": "GitHub",
-      "GITLAB": "GitLab"
+      "GITLAB": "GitLab",
+      "GITLAB_CLOUD": "GitLab.com"
     },
     "DURATION": {
       "DAYS": "j",
@@ -246,8 +253,8 @@
     "ZOOM": "Zoomer"
   },
   "MODAL-SHORTCUTS": {
-    "TITLE": "Raccourcis clavier",
-    "SUBTITLE": "Aide-mémoire des raccourcis et interactions de l'application",
+    "TITLE": "Raccourcis & Interactions",
+    "SUBTITLE": "Aide-mémoire des raccourcis clavier et gestes de l'application",
     "CLOSE": "Fermer",
     "CLOSE_HINT": "Appuyez sur {{key1}} ou {{key2}} pour fermer",
     "SECTION_GLOBAL_NAV": "Navigation globale",
@@ -256,12 +263,20 @@
     "NAV_QUESTIONS": "Vue Questions",
     "NAV_CONFIG": "Configurer le devoir",
     "NAV_SHORTCUTS": "Afficher / masquer les raccourcis",
-    "SECTION_GRAPHS": "Graphiques & Visualisations",
+    "TOGGLE_ANONYMOUS": "Basculer le mode anonymat",
+    "SECTION_GRAPHS": "Graphiques & Séances",
     "GRAPH_ZOOM_IN": "Zoomer",
     "GRAPH_ZOOM_OUT": "Dézoomer",
     "GRAPH_RESET_ZOOM": "Réinitialiser le zoom",
+    "GRAPH_SESSION_NAV": "Séance précédente / suivante",
     "GRAPH_RELOAD": "Recharger les données",
     "GRAPH_COPY_HASH": "Copier le hash du commit survolé",
+    "SECTION_GESTURES": "Souris & Gestes",
+    "GESTURE_SESSION_INFO": "Afficher les infos d'une séance",
+    "GESTURE_SESSION_FOCUS": "Zoomer sur la séance",
+    "GESTURE_BOX_ZOOM": "Sélectionner une zone de zoom",
+    "GESTURE_WHEEL_ZOOM": "Zoomer sur le graphique",
+    "GESTURE_CONTEXT_MENU": "Menu contextuel (jalon / séance)",
     "SECTION_FILTERS": "Barre de filtres & Recherche",
     "FILTER_FOCUS": "Activer la barre de recherche",
     "FILTER_CLEAR": "Réinitialiser les filtres",
@@ -272,7 +287,11 @@
     "KEY_SPACE": "Espace",
     "KEY_ESC": "Échap",
     "KEY_DELETE": "Suppr",
-    "KEY_SHIFT": "Maj"
+    "KEY_SHIFT": "Shift",
+    "KEY_CLICK": "Clic",
+    "KEY_DBLCLICK": "Double-clic",
+    "KEY_RIGHT_CLICK": "Clic droit",
+    "KEY_DRAG": "Glisser"
   },
   "TOAST": {
     "HASH_COPIED": "Hash du commit copié !"
@@ -619,7 +638,17 @@
     "AUTH_TYPE_OAUTH_PKCE": "OAuth 2.0 PKCE",
     "AUTH_TYPE_PAT": "Token PAT",
     "REMEMBER_ME": "Rester connecté sur cet appareil",
-    "REMEMBER_ME_TOOLTIP": "Le jeton sera stocké dans le localStorage du navigateur. Pratique pour éviter de vous reconnecter, mais sensible aux failles XSS et à l'accès physique à l'ordinateur. À n'activer que sur votre machine personnelle."
+    "REMEMBER_ME_TOOLTIP": "Le jeton sera stocké dans le localStorage du navigateur. Pratique pour éviter de vous reconnecter, mais sensible aux failles XSS et à l'accès physique à l'ordinateur. À n'activer que sur votre machine personnelle.",
+    "INSTANCE_ALIAS_LABEL": "Nom / Alias du serveur (facultatif)",
+    "INSTANCE_ALIAS_PLACEHOLDER": "Ex: Université, Labo...",
+    "ADD_ANOTHER_INSTANCE": "Connecter une autre instance",
+    "INSTANCES_COUNT_SINGULAR": "1 instance",
+    "INSTANCES_COUNT_PLURAL": "{{count}} instances",
+    "INVALID_PAT": "Jeton d'accès personnel (PAT) invalide ou expiré (droits requis : read_api, read_user).",
+    "SERVER_UNREACHABLE": "Impossible de joindre le serveur GitLab. Vérifiez l'URL de l'instance.",
+    "INVALID_HOST": "Pour gitlab.com, utilisez l'option GitLab Cloud ci-dessus.",
+    "SWITCH_INSTANCE": "Changer d'instance",
+    "STATUS_INVALID": "Expiré"
   },
   "QUESTIONS-ASSISTANT": {
     "TRIGGER_BUTTON": "Options & générateur",
@@ -648,5 +677,19 @@
     "TOOLTIP_CLOSING_STANDARD": "Règle de clôture : Standard GitHub",
     "TOOLTIP_CLOSING_CUSTOM": "Règle de clôture : Personnalisée ({{keywords}})",
     "TOOLTIP_CLOSING_NONE": "Règle de clôture : Sans mot-clé"
+  },
+  "ANONYMOUS": {
+    "STUDENT_LABEL": "Étudiant·e {{index}}",
+    "STUDENT_PREFIX": "Étudiant·e",
+    "STUDENT_FALLBACK": "Étudiant·e",
+    "ANONYMOUS_AUTHOR": "Auteur masqué",
+    "ACTIVE_BADGE": "Anonymat actif"
+  },
+  "TOKEN_HEALTH": {
+    "INVALID_TOOLTIP": "Token invalide ou révoqué – reconnectez-vous",
+    "ERROR_TITLE": "Authentification expirée",
+    "ERROR_MSG_GITHUB": "Votre token GitHub est invalide ou a expiré. Reconnectez-vous depuis la section Comptes.",
+    "ERROR_MSG_GITLAB": "Votre token GitLab est invalide ou a expiré. Reconnectez-vous depuis la section Comptes."
   }
 }
+
diff --git a/src/assets/i18n/ru.json b/src/assets/i18n/ru.json
index 07c456fc..32c8ecf9 100644
--- a/src/assets/i18n/ru.json
+++ b/src/assets/i18n/ru.json
@@ -39,12 +39,15 @@
     "METADATA": "Метаданные",
     "SIGN-IN": "Войти",
     "SIGN-OUT": "Выйти",
-    "CONFIGURATION": "Конфигурация"
+    "CONFIGURATION": "Конфигурация",
+    "ANONYMOUS-MODE": "Анонимность",
+    "ANONYMOUS-MODE-TOOLTIP": "Переключить режим анонимности"
   },
   "SETTINGS": {
     "TITLE": "Настройки",
     "NO-ASSIGNMENTS-DISCONNECTED": "Войдите, чтобы увидеть свои задания",
     "THEME": "Тема",
+    "ANONYMOUS-MODE": "Режим анонимности",
     "SHOW-LEGEND": "Показать легенду графиков",
     "HELP": "Помощь",
     "SHORTCUTS": "Сочетания клавиш",
@@ -60,6 +63,7 @@
   },
   "HOME": {
     "SEARCH-PLACEHOLDER": "Поиск заданий...",
+    "CLEAR-SEARCH": "Очистить поиск",
     "FILTERS": "Фильтры",
     "COPY": "Копировать",
     "COPY-TOOLTIP": "Копировать в буфер обмена",
@@ -164,6 +168,8 @@
     "MUST-LOGIN-GITLAB": "Подключите GitLab для создания задания",
     "MUST-LOGIN-ASSIGNMENT-GITHUB": "Подключите аккаунт GitHub для доступа к этому заданию",
     "MUST-LOGIN-ASSIGNMENT-GITLAB": "Подключите аккаунт GitLab для доступа к этому заданию",
+    "MUST-LOGIN-ASSIGNMENT-GITLAB-CUSTOM": "Подключите аккаунт GitLab {{host}} для доступа к этому заданию",
+    "CREATE-ASSIGNMENT-GITLAB-CUSTOM": "Новое задание GitLab ({{host}})",
     "FILTER": {
       "STATUS": "Статус",
       "COURSE": "Курс",
@@ -175,7 +181,8 @@
       "RESET": "Сбросить",
       "ALL": "Все",
       "GITHUB": "GitHub",
-      "GITLAB": "GitLab"
+      "GITLAB": "GitLab",
+      "GITLAB_CLOUD": "GitLab.com"
     },
     "DURATION": {
       "DAYS": "дн",
@@ -245,8 +252,8 @@
     "ZOOM": "Увеличить"
   },
   "MODAL-SHORTCUTS": {
-    "TITLE": "Сочетания клавиш",
-    "SUBTITLE": "Шпаргалка по горячим клавишам и действиям в приложении",
+    "TITLE": "Горячие клавиши и жесты",
+    "SUBTITLE": "Шпаргалка по сочетаниям клавиш и взаимодействию в приложении",
     "CLOSE": "Закрыть",
     "CLOSE_HINT": "Нажмите {{key1}} или {{key2}}, чтобы закрыть",
     "SECTION_GLOBAL_NAV": "Глобальная навигация",
@@ -255,12 +262,20 @@
     "NAV_QUESTIONS": "Вкладка Вопросы",
     "NAV_CONFIG": "Настроить задание",
     "NAV_SHORTCUTS": "Показать / скрыть горячие клавиши",
-    "SECTION_GRAPHS": "Графики и визуализации",
+    "TOGGLE_ANONYMOUS": "Включить / выключить анонимный режим",
+    "SECTION_GRAPHS": "Графики и занятия",
     "GRAPH_ZOOM_IN": "Увеличить",
     "GRAPH_ZOOM_OUT": "Уменьшить",
     "GRAPH_RESET_ZOOM": "Сбросить масштаб",
+    "GRAPH_SESSION_NAV": "Предыдущее / следующее занятие",
     "GRAPH_RELOAD": "Обновить данные",
     "GRAPH_COPY_HASH": "Копировать хеш коммита",
+    "SECTION_GESTURES": "Мышь и жесты",
+    "GESTURE_SESSION_INFO": "Показать сведения о занятии",
+    "GESTURE_SESSION_FOCUS": "Сфокусироваться на занятии",
+    "GESTURE_BOX_ZOOM": "Выделение области масштабирования",
+    "GESTURE_WHEEL_ZOOM": "Масштабирование шкалы времени",
+    "GESTURE_CONTEXT_MENU": "Контекстное меню (веха / занятие)",
     "SECTION_FILTERS": "Панель фильтров и поиск",
     "FILTER_FOCUS": "Активировать строку поиска",
     "FILTER_CLEAR": "Очистить фильтры",
@@ -271,7 +286,11 @@
     "KEY_SPACE": "Пробел",
     "KEY_ESC": "Esc",
     "KEY_DELETE": "Удал.",
-    "KEY_SHIFT": "Shift"
+    "KEY_SHIFT": "Shift",
+    "KEY_CLICK": "Клик",
+    "KEY_DBLCLICK": "Двойной клик",
+    "KEY_RIGHT_CLICK": "Правый клик",
+    "KEY_DRAG": "Перетаскивание"
   },
   "TOAST": {
     "HASH_COPIED": "Хеш коммита скопирован!"
@@ -616,7 +635,17 @@
     "AUTH_TYPE_OAUTH_PKCE": "OAuth 2.0 PKCE",
     "AUTH_TYPE_PAT": "Токен PAT",
     "REMEMBER_ME": "Оставаться в системе на этом устройстве",
-    "REMEMBER_ME_TOOLTIP": "Токен сохраняется в localStorage браузера. Удобно, чтобы не входить повторно, но уязвимо к XSS и физическому доступу к компьютеру. Включайте только на личном доверенном устройстве."
+    "REMEMBER_ME_TOOLTIP": "Токен сохраняется в localStorage браузера. Удобно, чтобы не входить повторно, но уязвимо к XSS и физическому доступу к компьютеру. Включайте только на личном доверенном устройстве.",
+    "INSTANCE_ALIAS_LABEL": "Имя / Псевдоним сервера (необязательно)",
+    "INSTANCE_ALIAS_PLACEHOLDER": "Напр., Университет, Лаборатория...",
+    "ADD_ANOTHER_INSTANCE": "Подключить другой инстанс",
+    "INSTANCES_COUNT_SINGULAR": "1 инстанс",
+    "INSTANCES_COUNT_PLURAL": "{{count}} инстансов",
+    "INVALID_PAT": "Недействительный или просроченный Personal Access Token (PAT) (требуются права: read_api, read_user).",
+    "SERVER_UNREACHABLE": "Не удается подключиться к серверу GitLab. Проверьте URL инстанса.",
+    "INVALID_HOST": "Для gitlab.com используйте опцию GitLab Cloud выше.",
+    "SWITCH_INSTANCE": "Сменить инстанс",
+    "STATUS_INVALID": "Истек"
   },
   "QUESTIONS-ASSISTANT": {
     "TRIGGER_BUTTON": "Опции и генератор",
@@ -645,5 +674,19 @@
     "TOOLTIP_CLOSING_STANDARD": "Правило закрытия: Стандарт GitHub",
     "TOOLTIP_CLOSING_CUSTOM": "Правило закрытия: Пользовательское ({{keywords}})",
     "TOOLTIP_CLOSING_NONE": "Правило закрытия: Без ключевого слова"
+  },
+  "ANONYMOUS": {
+    "STUDENT_LABEL": "Студент {{index}}",
+    "STUDENT_PREFIX": "Студент",
+    "STUDENT_FALLBACK": "Студент",
+    "ANONYMOUS_AUTHOR": "Скрытый автор",
+    "ACTIVE_BADGE": "Анонимный режим активен"
+  },
+  "TOKEN_HEALTH": {
+    "INVALID_TOOLTIP": "Токен недействителен или отозван – выполните повторный вход",
+    "ERROR_TITLE": "Аутентификация истекла",
+    "ERROR_MSG_GITHUB": "Ваш токен GitHub недействителен или истек. Выполните повторный вход в разделе «Учетные записи».",
+    "ERROR_MSG_GITLAB": "Ваш токен GitLab недействителен или истек. Выполните повторный вход в разделе «Учетные записи»."
   }
 }
+
diff --git a/src/styles.scss b/src/styles.scss
index 041a8b4e..8913526c 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -8,7 +8,6 @@
 @import "styles/layout";
 @import "styles/components";
 @import "styles/modal";
-@import "styles/tooltips";
 @import "styles/datatable";
 @import "styles/utilities";
 
diff --git a/src/styles/_components.scss b/src/styles/_components.scss
index 2684e263..26352fa7 100644
--- a/src/styles/_components.scss
+++ b/src/styles/_components.scss
@@ -19,9 +19,17 @@
   font-size: 1rem;
   line-height: 1.5;
   border-radius: $radius-md;
-  transition: all $transition-fast;
+  transition: color $transition-fast, background-color $transition-fast, border-color $transition-fast, box-shadow $transition-fast, transform $transition-fast;
   cursor: pointer;
   outline: none;
+  backface-visibility: hidden;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  svg,
+  i {
+    pointer-events: none;
+  }
 
   &:focus {
     box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.25);
@@ -53,8 +61,8 @@
   border-color: $color-primary;
 
   &:hover:not(:disabled) {
-    background-color: $color-primary-hover;
-    border-color: $color-primary-hover;
+    background-color: var(--color-primary-hover, #1d4ed8);
+    border-color: var(--color-primary-hover, #1d4ed8);
   }
 }
 
@@ -64,7 +72,8 @@
   border-color: var(--color-text-muted);
 
   &:hover:not(:disabled) {
-    filter: brightness(0.9);
+    background-color: var(--color-secondary-hover, var(--color-text-secondary));
+    border-color: var(--color-secondary-hover, var(--color-text-secondary));
   }
 }
 
@@ -74,7 +83,8 @@
   border-color: var(--color-danger);
 
   &:hover:not(:disabled) {
-    filter: brightness(0.9);
+    background-color: var(--color-danger-hover, #b91c1c);
+    border-color: var(--color-danger-hover, #b91c1c);
   }
 }
 
@@ -408,6 +418,131 @@
     border-radius: 99px;
   }
 
+  .anonymize-toggle-pill {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.45rem;
+    padding: 0.35rem 0.8rem;
+    font-size: 0.8125rem;
+    font-weight: 500;
+    letter-spacing: -0.01em;
+    line-height: 1;
+    color: var(--color-text-secondary);
+    background-color: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: 9999px;
+    box-shadow: var(--shadow-sm);
+    cursor: pointer;
+    user-select: none;
+    outline: none;
+    will-change: transform;
+    transition: transform $transition-tactile,
+                background-color $transition-fast,
+                border-color $transition-fast,
+                color $transition-fast,
+                box-shadow $transition-fast;
+
+    .anonymize-icon-wrapper {
+      position: relative;
+      width: 15px;
+      height: 15px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+
+      svg {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 15px;
+        height: 15px;
+        will-change: transform, opacity;
+        transition: transform $transition-snap, opacity $transition-fast;
+      }
+
+      .icon-eye-off {
+        transform: scale(1) rotate(0deg);
+        opacity: 1;
+      }
+
+      .icon-eye-on {
+        transform: scale(0.85) rotate(-15deg);
+        opacity: 0;
+      }
+    }
+
+    .anonymize-label {
+      font-size: 0.8125rem;
+      font-weight: 500;
+      white-space: nowrap;
+      transition: color $transition-fast;
+    }
+
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
+    }
+
+    &:active:not(:disabled) {
+      transform: scale(0.96);
+    }
+
+    /* Active State (Anonymous Mode ON) */
+    &.active {
+      background-color: var(--color-primary-bg);
+      color: var(--color-primary);
+      border-color: rgba(37, 99, 235, 0.35);
+      box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.15), var(--shadow-sm);
+
+      .anonymize-icon-wrapper {
+        .icon-eye-off {
+          transform: scale(0.85) rotate(15deg);
+          opacity: 0;
+        }
+
+        .icon-eye-on {
+          transform: scale(1) rotate(0deg);
+          opacity: 1;
+          color: var(--color-primary);
+        }
+      }
+
+      .anonymize-label {
+        color: var(--color-primary);
+      }
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+      &:hover:not(.active) {
+        background-color: var(--color-hover);
+        color: var(--color-text-primary);
+        border-color: var(--color-border);
+        box-shadow: var(--shadow-md);
+      }
+
+      &.active:hover {
+        background-color: rgba(37, 99, 235, 0.18);
+        border-color: var(--color-primary);
+        box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.25), var(--shadow-md);
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      transform: none !important;
+      transition: background-color $transition-fast,
+                  border-color $transition-fast,
+                  color $transition-fast,
+                  box-shadow $transition-fast;
+
+      .anonymize-icon-wrapper svg {
+        transform: none !important;
+        transition: opacity $transition-fast;
+      }
+    }
+  }
+
   /* Left Side Group */
   z-index: 1000;
 }
@@ -428,8 +563,13 @@
   justify-content: center;
   cursor: pointer;
   transition: background-color $transition-fast, color $transition-fast, transform $transition-fast;
+  backface-visibility: hidden;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 
-  i {
+  i,
+  svg {
+    pointer-events: none;
     transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   }
 
@@ -471,6 +611,7 @@
       transform: scale(1) rotate(0deg);
       opacity: 1;
     }
+
     .icon-moon {
       transform: scale(0.8) rotate(-45deg);
       opacity: 0;
@@ -488,6 +629,7 @@
         transform: scale(0.8) rotate(45deg);
         opacity: 0;
       }
+
       .icon-moon {
         transform: scale(1) rotate(0deg);
         opacity: 1;
@@ -500,6 +642,7 @@
         transform: scale(0.8) rotate(45deg);
         opacity: 0;
       }
+
       .icon-moon {
         transform: scale(1) rotate(0deg);
         opacity: 1;
@@ -511,6 +654,7 @@
           transform: scale(0.8) rotate(-45deg);
           opacity: 0;
         }
+
         .icon-sun {
           transform: scale(1) rotate(0deg);
           opacity: 1;
@@ -787,6 +931,7 @@
     
     @media (max-width: 1200px) {
       .date-full { display: none; }
+
       .date-short { display: inline; }
     }
   }
@@ -810,10 +955,15 @@
   display: flex;
   align-items: center;
   gap: 0.4rem;
-  transition: background-color 0.15s ease, color 0.15s ease, filter 0.15s ease;
+  transition: background-color $transition-fast, color $transition-fast, border-color $transition-fast, box-shadow $transition-fast;
   cursor: pointer;
+  backface-visibility: hidden;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 
-  svg {
+  svg,
+  i {
+    pointer-events: none;
     transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
   }
 
@@ -821,7 +971,7 @@
   .fa-caret-down {
     display: inline-block;
     transform-origin: 50% 50%;
-    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s ease;
+    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), color $transition-fast;
   }
 
   &:hover {
@@ -834,7 +984,6 @@
     transform: none;
     background-color: var(--color-primary-bg);
     color: var(--color-primary);
-    filter: brightness(0.96);
 
     .dropdown-chevron,
     .fa-caret-down {
@@ -862,6 +1011,11 @@
     transform: rotate(180deg);
   }
 
+  &.anim-spin-hover svg.spinning,
+  &.anim-spin-hover svg.fa-spin {
+    animation: spin-from-180 0.85s linear infinite;
+  }
+
   &.anim-scale-hover:hover:not(:disabled) svg {
     transform: scale(1.15);
   }
@@ -899,10 +1053,15 @@
   align-items: center;
   justify-content: center;
   color: #6b7280;
-  transition: background-color 0.15s, color 0.15s;
+  transition: background-color $transition-fast, color $transition-fast;
   cursor: pointer;
+  backface-visibility: hidden;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 
-  svg {
+  svg,
+  i {
+    pointer-events: none;
     transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   }
 
@@ -915,6 +1074,11 @@
     transform: rotate(180deg);
   }
 
+  &.anim-spin-hover svg.spinning,
+  &.anim-spin-hover svg.fa-spin {
+    animation: spin-from-180 0.85s linear infinite;
+  }
+
   &.anim-scale-hover:hover:not(:disabled) svg {
     transform: scale(1.15);
   }
@@ -982,6 +1146,7 @@
 
   .custom-control {
     margin-bottom: 0.5rem;
+
     &:last-child {
       margin-bottom: 0;
     }
@@ -1307,7 +1472,7 @@
     width: 16px;
     height: 16px;
     border-radius: 50%;
-    background: #ffffff;
+    background: #fff;
     border: 3px solid #3b82f6;
     cursor: pointer;
     box-shadow: 0 0 0 2px transparent;
@@ -1322,7 +1487,7 @@
     width: 16px;
     height: 16px;
     border-radius: 50%;
-    background: #ffffff;
+    background: #fff;
     border: 3px solid #3b82f6;
     cursor: pointer;
     box-shadow: 0 0 0 2px transparent;
@@ -1420,11 +1585,11 @@
     box-shadow: 0 8px 16px rgba(59, 130, 246, 0.3);
     
     svg {
-      stroke: #ffffff;
+      stroke: #fff;
     }
     
     span {
-      color: #ffffff;
+      color: #fff;
     }
   }
 
@@ -1445,6 +1610,7 @@
     stroke-dashoffset: 12;
     transition: stroke-dashoffset 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   }
+
   .cal-pin {
     transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   }
@@ -1458,6 +1624,7 @@
     transition: stroke-dashoffset 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     transform-origin: 12px 12px;
   }
+
   .check-circle {
     stroke-dasharray: 63 63;
     transition: stroke-dasharray 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
@@ -1470,6 +1637,7 @@
   .eye-pupil {
     transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
   }
+
   .eye-lid {
     transition: transform 0.3s ease;
     transform-origin: 12px 12px;
@@ -1481,8 +1649,11 @@
   .dot {
     transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
   }
+
   .d1 { transition-delay: 0s; }
+
   .d2 { transition-delay: 0.05s; }
+
   .d3 { transition-delay: 0.1s; }
 }
 
@@ -1498,6 +1669,7 @@
                 fill-opacity 0.4s ease;
     transform-origin: 12px 12px;
   }
+
   .op-outer, .op-mid, .op-inner {
     x: 4px;
     y: 4px;
@@ -1515,8 +1687,11 @@
     transition: y 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                 height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
   }
+
   .bar-1 { y: 10px; height: 4px; }
+
   .bar-2 { y: 10px; height: 4px; }
+
   .bar-3 { y: 10px; height: 4px; }
 }
 
@@ -1528,29 +1703,43 @@ input[type="checkbox"]:checked + .chip-content,
 .btn-group .btn.show-hover:not(.active) {
   .icon-calendar {
     .cal-check { stroke-dashoffset: 0; }
+
     .cal-pin { transform: translateY(-2px); }
   }
+
   .icon-check {
     .check-tick { stroke-dashoffset: 0; transform: scale(1.15); }
+
     .check-circle { stroke-dasharray: 51 63; transform: scale(0.9); }
   }
+
   .icon-eye {
     .eye-pupil { transform: translateX(3px); }
+
     .eye-lid { transform: scaleY(0.85); }
   }
+
   .icon-dots {
     .d1 { transform: translateY(-2px); }
+
     .d2 { transform: translateY(2px); }
+
     .d3 { transform: translateY(-2px); }
   }
+
   .icon-opacity {
     .op-outer { x: 2px; y: 2px; width: 20px; height: 20px; rx: 6px; stroke-opacity: 0.3; fill-opacity: 0.3; }
+
     .op-mid { x: 6px; y: 6px; width: 12px; height: 12px; rx: 4px; stroke-opacity: 0.7; fill-opacity: 0.7; }
+
     .op-inner { x: 10px; y: 10px; width: 4px; height: 4px; rx: 1px; stroke-opacity: 1; fill-opacity: 1; }
   }
+
   .icon-height {
     .bar-1 { y: 10px; height: 4px; }
+
     .bar-2 { y: 7px; height: 10px; }
+
     .bar-3 { y: 4px; height: 16px; }
   }
 }
@@ -1560,27 +1749,39 @@ input[type="checkbox"]:checked + .chip-content,
 .btn-group .btn.show-hover.active {
   .icon-calendar {
     .cal-check { stroke-dashoffset: 12; }
+
     .cal-pin { transform: none; }
   }
+
   .icon-check {
     .check-tick { stroke-dashoffset: 20; transform: none; }
+
     .check-circle { stroke-dasharray: 63 63; transform: none; }
   }
+
   .icon-eye {
     .eye-pupil { transform: none; }
+
     .eye-lid { transform: none; }
   }
+
   .icon-dots {
     .d1 { transform: none; }
+
     .d2 { transform: none; }
+
     .d3 { transform: none; }
   }
+
   .icon-opacity {
     .op-outer, .op-mid, .op-inner { x: 4px; y: 4px; width: 16px; height: 16px; rx: 4px; stroke-opacity: 1; fill-opacity: 1; }
   }
+
   .icon-height {
     .bar-1 { y: 10px; height: 4px; }
+
     .bar-2 { y: 10px; height: 4px; }
+
     .bar-3 { y: 10px; height: 4px; }
   }
 }
@@ -1649,6 +1850,11 @@ input[type="checkbox"]:checked + .chip-content,
       transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     }
 
+    &.anim-spin-hover svg.spinning,
+    &.anim-spin-hover svg.fa-spin {
+      animation: spin-from-180 0.85s linear infinite;
+    }
+
     &:focus {
       outline: none;
     }
@@ -2123,88 +2329,93 @@ body:has(app-custom-modal-container) ngb-typeahead-window {
     .custom-control-label {
         margin-left: 0.5rem;
     }
-}
-
-.bar-divider {
-    width: 1px;
-    height: 24px;
-    background-color: var(--color-border);
-    margin: 0 8px;
-}
 
-.bar-input {
-    border: none;
-    background: transparent;
-    color: var(--color-text-primary);
-    padding: 4px 8px;
-    font-size: 14px;
-    width: 115px;
-    
-    &::placeholder {
-        color: var(--color-text-muted);
+    .bar-divider {
+        width: 1px;
+        height: 24px;
+        background-color: var(--color-border);
+        margin: 0 8px;
     }
-    
-    &:focus {
-        outline: none;
-    }
-}
 
-.bar-btn-primary {
-    background: transparent;
-    border: none;
-    color: var(--color-text-primary);
-    font-size: 14px;
-    cursor: pointer;
-    padding: 6px 12px;
-    border-radius: 100px;
-    transition: $transition-fast;
-    
-    i {
-        color: var(--color-text-secondary);
+    .bar-input {
+        border: none;
+        background: transparent;
+        color: var(--color-text-primary);
+        padding: 4px 8px;
+        font-size: 14px;
+        width: 115px;
+        
+        &::placeholder {
+            color: var(--color-text-muted);
+        }
+        
+        &:focus {
+            outline: none;
+        }
     }
-    
-    &:hover {
-        background-color: var(--filter-bg);
+
+    .bar-btn-primary {
+        background: transparent;
+        border: none;
+        color: var(--color-text-primary);
+        font-size: 14px;
+        cursor: pointer;
+        padding: 6px 12px;
+        border-radius: 100px;
+        transition: background-color $transition-fast, color $transition-fast;
+        backface-visibility: hidden;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        
+        .fa {
+            color: var(--color-text-secondary);
+        }
+        
+        &:hover {
+            background-color: var(--filter-bg);
+        }
     }
-}
 
-.bar-btn-danger {
-    background: transparent;
-    border: none;
-    color: var(--color-danger);
-    font-size: 14px;
-    cursor: pointer;
-    padding: 6px 12px;
-    border-radius: 100px;
-    transition: $transition-fast;
-    
-    i {
+    .bar-btn-danger {
+        background: transparent;
+        border: none;
         color: var(--color-danger);
+        font-size: 14px;
+        cursor: pointer;
+        padding: 6px 12px;
+        border-radius: 100px;
+        transition: background-color $transition-fast, color $transition-fast;
+        backface-visibility: hidden;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        
+        &:hover {
+            background-color: rgba(220, 38, 38, 0.1);
+        }
     }
-    
-    &:hover {
-        background-color: rgba(220, 38, 38, 0.1);
-    }
-}
 
-.bar-btn-icon {
-    background: transparent;
-    border: 1px solid var(--color-border);
-    color: var(--color-text-muted);
-    font-size: 12px;
-    cursor: pointer;
-    width: 28px;
-    height: 28px;
-    border-radius: 50%;
-    transition: $transition-fast;
-    margin-left: 8px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    
-    &:hover {
-        background-color: var(--filter-bg);
-        color: var(--color-text-primary);
+    .bar-btn-icon {
+        background: transparent;
+        border: 1px solid var(--color-border);
+        color: var(--color-text-muted);
+        font-size: 12px;
+        cursor: pointer;
+        width: 28px;
+        height: 28px;
+        border-radius: 50%;
+        transition: background-color $transition-fast, color $transition-fast, border-color $transition-fast;
+        margin-left: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        backface-visibility: hidden;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+
+        &:hover {
+            background-color: var(--filter-bg);
+            color: var(--color-text-primary);
+        }
     }
 }
 
@@ -2215,6 +2426,7 @@ body:has(app-custom-modal-container) ngb-typeahead-window {
   0% {
     background-position-x: 200%;
   }
+
   100% {
     background-position-x: 0%;
   }
@@ -2234,7 +2446,7 @@ body:has(app-custom-modal-container) ngb-typeahead-window {
   border-radius: 0.25rem;
 }
 
-// Floating Legend for Graphs
+/* Floating Legend for Graphs */
 .legend-floating-container {
   position: absolute;
   bottom: 20px;
@@ -2242,7 +2454,7 @@ body:has(app-custom-modal-container) ngb-typeahead-window {
   z-index: 1000;
 
   .modern-dropdown-menu {
-    background-color: var(--tooltip-glass-bg); // Less transparent than normal glass-bg
+    background-color: var(--tooltip-glass-bg); /* Less transparent than normal glass-bg */
   }
 }
 
@@ -2257,7 +2469,10 @@ body:has(app-custom-modal-container) ngb-typeahead-window {
   border: 1px solid var(--color-border);
   border-radius: 20px;
   padding: 0 12px;
-  transition: background-color 0.2s, color 0.2s;
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
+  backface-visibility: hidden;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 
   .legend-text {
     max-width: 0;
@@ -2295,7 +2510,6 @@ body:has(app-custom-modal-container) ngb-typeahead-window {
     transform: none;
     background-color: var(--color-primary-bg);
     color: var(--color-primary);
-    filter: brightness(0.96);
   }
 }
 
@@ -2340,7 +2554,10 @@ body:has(app-custom-modal-container) ngb-typeahead-window {
   background: transparent;
   outline: none;
   line-height: 1.25;
-  transition: transform 0.16s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.16s ease, filter 0.16s ease;
+  transition: transform 0.16s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.16s ease;
+  backface-visibility: hidden;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 
   &:hover {
     transform: translateY(-1px);
@@ -2387,16 +2604,19 @@ body:has(app-custom-modal-container) ngb-typeahead-window {
     color: var(--badge-prepared-text);
     border-color: var(--badge-prepared-border);
   }
+
   &.status-ongoing {
     background-color: var(--badge-ongoing-bg);
     color: var(--badge-ongoing-text);
     border-color: var(--badge-ongoing-border);
   }
+
   &.status-finished {
     background-color: var(--badge-finished-bg);
     color: var(--badge-finished-text);
     border-color: var(--badge-finished-border);
   }
+
   &.status-default {
     background-color: var(--badge-default-bg);
     color: var(--badge-default-text);
@@ -2409,13 +2629,28 @@ body:has(app-custom-modal-container) ngb-typeahead-window {
     transform: scale(1);
     opacity: 0.45;
   }
+
   60% {
     transform: scale(1.8);
     opacity: 0;
   }
+
   100% {
     transform: scale(1.8);
     opacity: 0;
   }
 }
 
+/* Spin animation starting from hover endpoint (180deg) for reload buttons */
+@keyframes spin-from-180 {
+  from {
+    transform: rotate(180deg);
+  }
+
+  to {
+    transform: rotate(540deg);
+  }
+}
+
+
+
diff --git a/src/styles/_tooltips.scss b/src/styles/_tooltips.scss
deleted file mode 100644
index b87da114..00000000
--- a/src/styles/_tooltips.scss
+++ /dev/null
@@ -1,112 +0,0 @@
-@import 'variables';
-
-/* =========================================
-   TOOLTIPS (ng-bootstrap polyfill / Modern DA)
-   ========================================= */
-
-.tooltip {
-  position: absolute;
-  z-index: $zindex-tooltip;
-  display: block;
-  margin: 0;
-  font-family: inherit;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 1.5;
-  text-align: left;
-  text-align: start;
-  text-decoration: none;
-  text-shadow: none;
-  text-transform: none;
-  letter-spacing: normal;
-  word-break: normal;
-  word-spacing: normal;
-  white-space: normal;
-  line-break: auto;
-  font-size: 0.875rem;
-  word-wrap: break-word;
-  opacity: 0;
-
-  &.show {
-    opacity: 1;
-  }
-
-  .tooltip-inner {
-    max-width: 250px;
-    padding: 0.4rem 0.75rem;
-    color: #fff;
-    text-align: center;
-    background-color: rgba(33, 37, 41, 0.95);
-    border-radius: 6px;
-    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
-    backdrop-filter: blur(4px);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-  }
-
-  .tooltip-arrow {
-    position: absolute;
-    display: block;
-    width: 0.8rem;
-    height: 0.4rem;
-
-    &::before {
-      position: absolute;
-      content: "";
-      border-color: transparent;
-      border-style: solid;
-    }
-  }
-}
-
-.bs-tooltip-top {
-  padding: 0.4rem 0;
-  .tooltip-arrow {
-    bottom: 0;
-    &::before {
-      top: 0;
-      border-width: 0.4rem 0.4rem 0;
-      border-top-color: rgba(33, 37, 41, 0.95);
-    }
-  }
-}
-
-.bs-tooltip-right {
-  padding: 0 0.4rem;
-  .tooltip-arrow {
-    left: 0;
-    width: 0.4rem;
-    height: 0.8rem;
-    &::before {
-      right: 0;
-      border-width: 0.4rem 0.4rem 0.4rem 0;
-      border-right-color: rgba(33, 37, 41, 0.95);
-    }
-  }
-}
-
-.bs-tooltip-bottom {
-  padding: 0.4rem 0;
-  .tooltip-arrow {
-    top: 0;
-    &::before {
-      bottom: 0;
-      border-width: 0 0.4rem 0.4rem;
-      border-bottom-color: rgba(33, 37, 41, 0.95);
-    }
-  }
-}
-
-.bs-tooltip-left {
-  padding: 0 0.4rem;
-  .tooltip-arrow {
-    right: 0;
-    width: 0.4rem;
-    height: 0.8rem;
-    &::before {
-      left: 0;
-      border-width: 0.4rem 0 0.4rem 0.4rem;
-      border-left-color: rgba(33, 37, 41, 0.95);
-    }
-  }
-}
-
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index 01c46c5d..8b7fd451 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -24,9 +24,11 @@ $font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Robot
   --color-primary: #2563eb;       // Blue: Calm, focus, primary actions
   --color-primary-hover: #1d4ed8;
   --color-primary-bg: #eff6ff;
-  --color-secondary: #64748b;     // Slate for secondary actions
-  --color-success: #059669;       // Green: Restful, examples, success states
-  --color-danger: #dc2626;        // Red: Sparing use, errors, critical actions
+  --color-secondary: #64748b;     /* Slate for secondary actions */
+  --color-secondary-hover: #475569;
+  --color-success: #059669;       /* Green: Restful, examples, success states */
+  --color-danger: #dc2626;        /* Red: Sparing use, errors, critical actions */
+  --color-danger-hover: #b91c1c;
   --color-danger-subtle: rgba(220, 38, 38, 0.45);
   --color-danger-bg: rgba(220, 38, 38, 0.1);
   --color-warning: #d97706;       // Amber/Orange: Warnings, dates, highlights
@@ -108,9 +110,11 @@ body.dark-theme {
   --color-primary: #3b82f6;       // Brighter blue for contrast
   --color-primary-hover: #60a5fa;
   --color-primary-bg: rgba(96, 165, 250, 0.15);
-  --color-secondary: #94a3b8;     // Slate
-  --color-success: #10b981;       // Brighter green
-  --color-danger: #ef4444;        // Brighter red
+  --color-secondary: #94a3b8;     /* Slate */
+  --color-secondary-hover: #cbd5e1;
+  --color-success: #10b981;       /* Brighter green */
+  --color-danger: #ef4444;        /* Brighter red */
+  --color-danger-hover: #dc2626;
   --color-danger-subtle: rgba(239, 68, 68, 0.45);
   --color-danger-bg: rgba(239, 68, 68, 0.15);
   --color-warning: #f59e0b;       // Brighter amber
@@ -227,6 +231,7 @@ $transition-drawer: $transition-drawer-enter;
 $ease-spring-out: cubic-bezier(0.25, 1, 0.4, 1);
 
 // Z-Index Layers
+$zindex-chart-selection: 10;
 $zindex-context-menu: 1050;
 $zindex-typeahead-dropdown: 1060;
 $zindex-quick-help-popover: 1070;
diff --git a/tsconfig.json b/tsconfig.json
index 58e8067d..f9a2529b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -44,6 +44,9 @@
       ],
       "@environments/*": [
         "environments/*"
+      ],
+      "@interceptors/*": [
+        "app/interceptors/*"
       ]
     }
   }