diff --git a/.freebuff/desktop-v2.db b/.freebuff/desktop-v2.db
new file mode 100644
index 00000000..49ad5e51
Binary files /dev/null and b/.freebuff/desktop-v2.db differ
diff --git a/.freebuff/desktop-v2.db-shm b/.freebuff/desktop-v2.db-shm
new file mode 100644
index 00000000..21456667
Binary files /dev/null and b/.freebuff/desktop-v2.db-shm differ
diff --git a/.freebuff/desktop-v2.db-wal b/.freebuff/desktop-v2.db-wal
new file mode 100644
index 00000000..a5d73344
Binary files /dev/null and b/.freebuff/desktop-v2.db-wal differ
diff --git a/.gitignore b/.gitignore
index 839d854c..d46f1352 100644
--- a/.gitignore
+++ b/.gitignore
@@ -14,3 +14,6 @@ output/**/*.*
 
 .env
 .history/
+
+# Local JWT secret used only for development
+bbbeasy-backend/tmp/jwt.secret
diff --git a/bbbeasy-backend/app/src/Core/Session.php b/bbbeasy-backend/app/src/Core/Session.php
index 5612e067..d2bd3809 100644
--- a/bbbeasy-backend/app/src/Core/Session.php
+++ b/bbbeasy-backend/app/src/Core/Session.php
@@ -89,7 +89,6 @@ public function exists($key): bool
     public function set($key, $value): void
     {
         $this->runtimeValues[$key] = $value;
-        $this->f3->set('SESSION.' . $key, $value);
     }
 
     /**
@@ -278,20 +277,7 @@ private function serializeUser(User $user): array
 
     private function syncSessionState(): void
     {
-        if (!$this->currentUser instanceof User) {
-            return;
-        }
-
-        $user             = $this->serializeUser($this->currentUser);
-        $user['loggedIn'] = true;
-
-        $this->f3->set('SESSION.user', $user);
-        $this->f3->set('SESSION.user.loggedIn', true);
-        $this->f3->set('SESSION.user.id', $user['id']);
-        $this->f3->set('SESSION.user.role', $user['role']);
-        $this->f3->set('SESSION.user.roleId', $this->currentUser->role->id);
-        $this->f3->set('SESSION.user.username', $user['username']);
-        $this->f3->set('SESSION.user.email', $user['email']);
+        // JWT-only mode keeps the authenticated user in request memory only.
     }
 
     /**
@@ -386,7 +372,7 @@ private function isRevoked(string $jti): bool
             return true;
         }
 
-        return null !== \Cache::instance()->get($this->revokedTokenCacheKey($jti));
+        return false !== \Cache::instance()->get($this->revokedTokenCacheKey($jti));
     }
 
     private function revokedTokenCacheKey(string $jti): string
diff --git a/bbbeasy-backend/tests/src/Actions/Account/LoginTest.php b/bbbeasy-backend/tests/src/Actions/Account/LoginTest.php
index f0b8b5ac..2dfdb835 100644
--- a/bbbeasy-backend/tests/src/Actions/Account/LoginTest.php
+++ b/bbbeasy-backend/tests/src/Actions/Account/LoginTest.php
@@ -158,7 +158,7 @@ public function testAuthenticateExistingUser($f3)
         $test->expect(isset($payload['sub']) && (int) $payload['sub'] === (int) $user->id, 'JWT subject matches the authenticated user');
         $test->expect(isset($payload['exp']) && \is_string($expiresAt) && strtotime($expiresAt) > $now, 'JWT expiry is set in the future');
         $test->expect(isset($responseBody['session']['expiresAt']) && $responseBody['session']['expiresAt'] === $expiresAt, 'Login returns a concrete token expiration date');
-        $test->expect($f3->exists('SESSION.user'), 'Sessions is aware that the user us logged in');
+        $test->expect(null !== \Registry::get('session')->get('user'), 'JWT session keeps the authenticated user in memory');
 
         UserFaker::logout();
 
@@ -179,7 +179,7 @@ public function testValidAuthentication($f3)
         $user = UserFaker::create(UserRole::ADMINISTRATOR);
         $data = ['email' => $user->email, 'password' => UserRole::ADMINISTRATOR . UserRole::ADMINISTRATOR];
         $f3->mock(self::LOGIN_ROUTE, null, null, $this->postJsonData($data));
-        $test->expect($f3->exists('SESSION.user'), 'User with id "' . $user->id . '" is now logged in');
+        $test->expect(null !== \Registry::get('session')->get('user'), 'User with id "' . $user->id . '" is now logged in');
 
         return $test->results();
     }
diff --git a/bbbeasy-backend/tests/src/Actions/Rooms/StartTest.php b/bbbeasy-backend/tests/src/Actions/Rooms/StartTest.php
index 102b23e5..3fdb5d8c 100644
--- a/bbbeasy-backend/tests/src/Actions/Rooms/StartTest.php
+++ b/bbbeasy-backend/tests/src/Actions/Rooms/StartTest.php
@@ -25,6 +25,7 @@
 use Fake\PresetFaker;
 use Fake\RoomFaker;
 use Models\User;
+use Registry;
 use Test\Scenario;
 
 /**
@@ -66,7 +67,8 @@ public function testValidRoom($f3)
         $test = $this->newTest();
 
         $loggedUser = new User();
-        $loggedUser->load(['id = ?', [$f3->get('SESSION.user.id')]]);
+        $currentUser = Registry::get('session')->get('user');
+        $loggedUser->load(['id = ?', [$currentUser['id']]]);
         $preset = PresetFaker::create($loggedUser);
         $room   = RoomFaker::create($loggedUser, $preset);
         $f3->mock(self::START_ROOM_ROUTE . $room->id, null, null);
diff --git a/bbbeasy-backend/tests/src/Actions/Rooms/ViewTest.php b/bbbeasy-backend/tests/src/Actions/Rooms/ViewTest.php
index 8c0a445c..4b1a391c 100644
--- a/bbbeasy-backend/tests/src/Actions/Rooms/ViewTest.php
+++ b/bbbeasy-backend/tests/src/Actions/Rooms/ViewTest.php
@@ -25,6 +25,7 @@
 use Fake\PresetFaker;
 use Fake\RoomFaker;
 use Models\User;
+use Registry;
 use Test\Scenario;
 
 /**
@@ -66,7 +67,8 @@ public function testValidLink($f3)
         $test = $this->newTest();
 
         $loggedUser = new User();
-        $loggedUser->load(['id = ?', [$f3->get('SESSION.user.id')]]);
+        $currentUser = Registry::get('session')->get('user');
+        $loggedUser->load(['id = ?', [$currentUser['id']]]);
         $preset = PresetFaker::create($loggedUser);
         $room   = RoomFaker::create($loggedUser, $preset, 'abcdef-123456');
         $f3->mock(self::VIEW_ROOM_ROUTE . $room->short_link, null, null);
diff --git a/bbbeasy-frontend/.yarnrc.yml b/bbbeasy-frontend/.yarnrc.yml
index fec60c2d..00d86f56 100644
--- a/bbbeasy-frontend/.yarnrc.yml
+++ b/bbbeasy-frontend/.yarnrc.yml
@@ -3,7 +3,7 @@ approvedGitRepositories:
 
 enableScripts: true
 
-nodeLinker: node-modules
+nodeLinker: pnp
 
 npmMinimalAgeGate: 0
 
diff --git a/bbbeasy-frontend/index.html b/bbbeasy-frontend/index.html
index af733ede..c32f6cb7 100644
--- a/bbbeasy-frontend/index.html
+++ b/bbbeasy-frontend/index.html
@@ -8,6 +8,9 @@
   <link rel="manifest" href="/manifest.json" />
   <link rel="icon" href="/images/favicon.png" />
   <link rel="stylesheet" href="/icons/style.css">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500&display=swap" rel="stylesheet">
   <title>BBBEasy</title>
 </head>
 <body>
diff --git a/bbbeasy-frontend/src/App-installer.css b/bbbeasy-frontend/src/App-installer.css
index 94b0ae2e..33ced0b2 100644
--- a/bbbeasy-frontend/src/App-installer.css
+++ b/bbbeasy-frontend/src/App-installer.css
@@ -286,17 +286,19 @@ body.rtl {
 }
 .site-header {
     z-index: 1;
-    background: var(--bbbeasy-bg-layout) !important;
+    background: linear-gradient(135deg, rgba(5, 12, 35, 0.98) 0%, rgba(7, 25, 44, 0.98) 45%, rgba(9, 31, 62, 0.98) 100%) !important;
+    border-bottom: 1px solid rgba(96, 165, 250, 0.12);
+    box-shadow: 0 10px 28px rgba(2, 6, 23, 0.22);
 }
 .site-header .lang-btn {
     border-color: transparent;
     box-shadow: none;
-    color: var(--bbbeasy-darken-gray);
+    color: #dbe9ff;
     padding: 0;
 }
 .site-header .lang-btn:hover,
 .site-header .lang-btn.ant-dropdown-open {
-    color: #fbbc0b !important;
+    color: #38bdf8 !important;
     outline: unset !important;
 }
 .site-header-inner {
@@ -314,15 +316,65 @@ body.rtl {
     height: auto;
     max-height: 64px;
     max-width: 64px;
+    filter: drop-shadow(0 0 12px rgba(59, 130, 246, 0.28));
 }
 .site-header-inner button {
     background: transparent !important;
-    color: var(--bbbeasy-darken-gray) !important;
+    color: #edf4ff !important;
+    transition: color 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
+}
+.site-header-inner button:hover,
+.site-header-inner button:focus {
+    color: #38bdf8 !important;
+    transform: translateY(-1px);
 }
 .site-content {
     margin: 25px 20px;
     z-index: 2;
 }
+.site-sider {
+    background: #07192c !important;
+}
+.site-sider .logo {
+    background: #07192c !important;
+}
+.site-sider .menu-sider .site-menu {
+    color: #ffffff !important;
+}
+.site-sider .site-menu .ant-menu-item,
+.site-sider .site-menu .ant-menu-submenu-title,
+.site-sider .site-menu .ant-menu-title-content,
+.site-sider .site-menu .ant-menu-item a,
+.site-sider .site-menu .ant-menu-submenu-title a,
+.site-sider .site-menu .anticon,
+.site-sider .sider-new-btn {
+    color: #ffffff !important;
+}
+.site-sider .sider-new-btn {
+    background: #1677ff !important;
+    border-color: #1677ff !important;
+}
+.site-sider .sider-new-btn:hover,
+.site-sider .sider-new-btn:focus {
+    background: #4096ff !important;
+    color: #ffffff !important;
+    border-color: #4096ff !important;
+}
+.site-sider .site-menu .ant-menu-submenu-title .ant-menu-title-content,
+.site-sider .site-menu .ant-menu-item .ant-menu-title-content {
+    color: #ffffff !important;
+}
+.site-sider .site-menu .ant-menu-item-selected,
+.site-sider .site-menu .ant-menu-submenu-selected > .ant-menu-submenu-title {
+    background: rgba(255, 255, 255, 0.08) !important;
+}
+.site-sider .site-menu .ant-menu-item:hover,
+.site-sider .site-menu .ant-menu-submenu-title:hover,
+.site-sider .site-menu .ant-menu-item:focus,
+.site-sider .site-menu .ant-menu-submenu-title:focus {
+    background: rgba(255, 255, 255, 0.12) !important;
+    color: #ffffff !important;
+}
 .site-footer {
     min-height: 50px;
     z-index: 1;
@@ -367,11 +419,14 @@ body.rtl {
 }
 /*********************************************/
 .color-primary {
-    border-color: #fbbc0b !important;
+    background: #1677ff !important;
+    border-color: #1677ff !important;
+    color: #ffffff !important;
 }
 .color-primary:hover {
-    color: #ffcf33 !important;
-    border-color: #ffcf33 !important;
+    background: #4096ff !important;
+    border-color: #4096ff !important;
+    color: #ffffff !important;
 }
 .color-blue {
     color: #fff !important;
@@ -443,6 +498,33 @@ body.rtl {
 .button-container .ant-form-item-control-input-content {
     display: flex;
 }
+.modal-submit-btn .ant-btn-primary {
+    background: #1677ff !important;
+    border-color: #1677ff !important;
+    color: #ffffff !important;
+}
+.modal-submit-btn .ant-btn-primary:hover,
+.modal-submit-btn .ant-btn-primary:focus {
+    background: #4096ff !important;
+    border-color: #4096ff !important;
+    color: #ffffff !important;
+}
+
+.ant-page-header .ant-btn-primary,
+.site-page-header .ant-btn-primary {
+    background: #1677ff !important;
+    border-color: #1677ff !important;
+    color: #ffffff !important;
+}
+
+.ant-page-header .ant-btn-primary:hover,
+.ant-page-header .ant-btn-primary:focus,
+.site-page-header .ant-btn-primary:hover,
+.site-page-header .ant-btn-primary:focus {
+    background: #4096ff !important;
+    border-color: #4096ff !important;
+    color: #ffffff !important;
+}
 .final-step-btn {
     width: 81%;
     display: block;
diff --git a/bbbeasy-frontend/src/App-webapp.css b/bbbeasy-frontend/src/App-webapp.css
index b6e1e805..761d9a43 100644
--- a/bbbeasy-frontend/src/App-webapp.css
+++ b/bbbeasy-frontend/src/App-webapp.css
@@ -212,6 +212,11 @@
     --bbbeasy-sider-width: 260px;
     --bbbeasy-page-height: 100vh;
     --bbbeasy-info-color: #1890ff;
+    --bbbeasy-landing-bg: linear-gradient(180deg, #050b1a 0%, #06162f 45%, #081f3e 100%);
+    --bbbeasy-webapp-bg: #070B12;
+    --bbbeasy-webapp-bg-image: radial-gradient(at 0% 0%, rgba(59, 130, 246, 0.12) 0px, transparent 50%),
+        radial-gradient(at 100% 100%, rgba(99, 102, 241, 0.08) 0px, transparent 50%),
+        radial-gradient(at 50% 50%, rgba(15, 23, 42, 0.5) 0px, transparent 100%);
 }
 body,
 input,
@@ -238,6 +243,19 @@ body {
     font-family: 'Poppins', sans-serif !important;
     margin: 0;
 }
+html,
+body,
+#root {
+    min-height: 100%;
+}
+body:has(.page-layout-content),
+body:has(.page-layout-content-rtl) {
+    background-color: var(--bbbeasy-webapp-bg);
+    background-image: var(--bbbeasy-webapp-bg-image);
+    background-attachment: fixed;
+    background-repeat: no-repeat;
+    background-size: cover;
+}
 body.rtl {
     font-family: 'Tajawal', sans-serif !important;
     font-weight: 450 !important;
@@ -323,11 +341,14 @@ body.rtl {
     color: #fbbc0b !important;
 }
 .color-primary {
-    border-color: #fbbc0b !important;
+    background: #1677ff !important;
+    border-color: #1677ff !important;
+    color: #ffffff !important;
 }
 .color-primary:hover {
-    color: #ffcf33 !important;
-    border-color: #ffcf33 !important;
+    background: #4096ff !important;
+    border-color: #4096ff !important;
+    color: #ffffff !important;
 }
 .color-blue {
     color: #fff !important;
@@ -438,20 +459,48 @@ fieldset {
 .page-layout-content-rtl {
     min-height: var(--bbbeasy-page-height) !important;
     display: flex !important;
+    background-color: var(--bbbeasy-webapp-bg);
+    background-image: var(--bbbeasy-webapp-bg-image);
+    background-attachment: fixed;
+    background-repeat: no-repeat;
+    background-size: cover;
 }
 .site-header {
     z-index: 1;
-    background: var(--bbbeasy-bg-layout) !important;
+    position: relative;
+    overflow: hidden;
+    background-color: #050b1a !important;
+    background-image: none !important;
+    border-bottom: 0 !important;
+    box-shadow: none;
+}
+.page-layout-content .site-header,
+.page-layout-content-rtl .site-header {
+    background-color: var(--bbbeasy-webapp-bg) !important;
+    background-image: var(--bbbeasy-webapp-bg-image) !important;
+    background-attachment: fixed !important;
+    background-repeat: no-repeat !important;
+    background-size: cover !important;
+    border-bottom: 0 !important;
+    box-shadow: none;
+    backdrop-filter: none;
+}
+.site-header::before {
+    content: none;
+}
+.site-header::after {
+    content: none;
 }
 .site-header .lang-btn {
     border-color: transparent;
     box-shadow: none;
-    color: var(--bbbeasy-darken-gray);
+    color: #dbe9ff;
     padding: 0;
+    font-weight: 500;
 }
 .site-header .lang-btn:hover,
 .site-header .lang-btn.ant-dropdown-open {
-    color: #fbbc0b !important;
+    color: #38bdf8 !important;
     outline: unset !important;
 }
 .site-header-inner {
@@ -459,19 +508,29 @@ fieldset {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    width: 100%;
     margin: 0 !important;
     top: 50%;
     -ms-transform: translateY(-50%);
     transform: translateY(-50%);
+    z-index: 1;
 }
 .header-logo-image {
     height: auto;
     max-height: 64px;
     max-width: 64px;
+    filter: drop-shadow(0 0 12px rgba(59, 130, 246, 0.28));
+    animation: logoPulse 4.5s ease-in-out infinite;
 }
 .site-header-inner button {
     background: transparent !important;
-    color: var(--bbbeasy-darken-gray) !important;
+    color: #edf4ff !important;
+    transition: color 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
+}
+.site-header-inner button:hover,
+.site-header-inner button:focus {
+    color: #38bdf8 !important;
+    transform: translateY(-1px);
 }
 .search-input {
     border-radius: 15px !important;
@@ -483,22 +542,32 @@ fieldset {
 .search-input input,
 .search-input.ant-input-affix-wrapper:hover,
 .search-input.ant-input-affix-wrapper:focus {
-    background: white !important;
+    background: rgba(8, 18, 46, 0.9) !important;
+    color: #eef4ff !important;
+    border: 1px solid rgba(96, 165, 250, 0.16);
+    box-shadow: 0 12px 24px rgba(2, 6, 23, 0.16);
 }
 .search-input.ant-input-affix-wrapper-focused {
-    background: white !important;
-    border: 1px solid #ffcf33 !important;
+    background: rgba(9, 22, 58, 0.98) !important;
+    border: 1px solid rgba(56, 189, 248, 0.72) !important;
+    box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.08);
 }
 .search-input input {
     padding: 0 15px !important;
 }
 .search-input .anticon-search {
-    color: var(--bbbeasy-medimum-gray);
+    color: #7fbef7;
 }
 .site-header .profil-btn {
-    color: var(--bbbeasy-darken-gray) !important;
+    color: #edf4ff !important;
     clip-path: polygon(48% 0, 52% 0, 95% 25%, 95% 75%, 52% 100%, 48% 100%, 5% 75%, 5% 25%);
     border-radius: 50% !important;
+    transition: transform 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
+}
+.site-header .profil-btn:hover,
+.site-header .profil-btn:focus {
+    color: #38bdf8 !important;
+    transform: translateY(-1px);
 }
 .profil-btn-dropdown .ant-dropdown-menu-item {
     padding: 5px 20px !important;
@@ -566,9 +635,30 @@ fieldset {
 .site-content {
     margin: 25px 20px;
     z-index: 2;
+    background: transparent !important;
+}
+.page-layout-content .page-layout-body,
+.page-layout-content-rtl .page-layout-body {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--bbbeasy-webapp-bg) !important;
+    background-image: var(--bbbeasy-webapp-bg-image) !important;
+    background-attachment: fixed !important;
+    background-repeat: no-repeat !important;
+    background-size: cover !important;
+}
+.page-layout-content .site-content,
+.page-layout-content-rtl .site-content {
+    background: transparent !important;
 }
 .site-sider {
-    background: var(--bbbeasy-bg-layout) !important;
+    position: relative;
+    background-color: var(--bbbeasy-webapp-bg) !important;
+    background-image: var(--bbbeasy-webapp-bg-image) !important;
+    background-attachment: fixed !important;
+    background-repeat: no-repeat !important;
+    background-size: cover !important;
     flex: 0 0 var(--bbbeasy-sider-width) !important;
     max-width: var(--bbbeasy-sider-width) !important;
     min-width: var(--bbbeasy-sider-width) !important;
@@ -577,6 +667,7 @@ fieldset {
     height: var(--bbbeasy-page-height);
     top: 0;
     bottom: 0;
+    border-inline-end: 1px solid rgba(96, 165, 250, 0.22);
 }
 .page-layout-content .site-sider {
     left: 0;
@@ -595,7 +686,7 @@ fieldset {
 .site-sider .logo {
     position: relative;
     z-index: 1;
-    background: var(--bbbeasy-bg-layout);
+    background: transparent;
     width: 240px;
     margin: 10px;
     margin-left: 24px;
@@ -626,981 +717,4464 @@ fieldset {
 .site-sider .menu-sider .site-menu {
     height: 100%;
     background: transparent !important;
+    color: #ffffff !important;
 }
 .ant-menu-sub.ant-menu-inline {
     background: transparent !important;
 }
-.site-footer {
+.site-sider .site-menu .ant-menu-item,
+.site-sider .site-menu .ant-menu-submenu-title,
+.site-sider .site-menu .ant-menu-title-content,
+.site-sider .site-menu .ant-menu-item a,
+.site-sider .site-menu .ant-menu-submenu-title a,
+.site-sider .site-menu .anticon,
+.site-sider .sider-new-btn {
+    color: #ffffff !important;
+}
+.site-sider .sider-new-btn {
+    background: #1677ff !important;
+    border-color: #1677ff !important;
+}
+.site-sider .sider-new-btn:hover,
+.site-sider .sider-new-btn:focus {
+    background: #4096ff !important;
+    color: #ffffff !important;
+    border-color: #4096ff !important;
+}
+.site-sider .site-menu .ant-menu-submenu-title .ant-menu-title-content,
+.site-sider .site-menu .ant-menu-item .ant-menu-title-content {
+    color: #ffffff !important;
+}
+.site-sider .site-menu .ant-menu-item-selected,
+.site-sider .site-menu .ant-menu-submenu-selected > .ant-menu-submenu-title {
+    background: rgba(255, 255, 255, 0.08) !important;
+}
+.site-sider .site-menu .ant-menu-item:hover,
+.site-sider .site-menu .ant-menu-submenu-title:hover,
+.site-sider .site-menu .ant-menu-item:focus,
+.site-sider .site-menu .ant-menu-submenu-title:focus {
+    background: rgba(255, 255, 255, 0.12) !important;
+    color: #ffffff !important;
+}
+.page-layout-content .site-footer,
+.page-layout-content-rtl .site-footer {
     min-height: 50px;
     z-index: 1;
     padding: 0 50px !important;
     display: flex;
     justify-content: space-between;
     align-items: center;
-}
-.site-footer .ant-typography {
-    color: #989898 !important;
-}
-.site-footer button {
+    background-color: var(--bbbeasy-webapp-bg) !important;
+    background-image: var(--bbbeasy-webapp-bg-image) !important;
+    background-attachment: fixed !important;
+    background-repeat: no-repeat !important;
+    background-size: cover !important;
+    border-top: 1px solid rgba(96, 165, 250, 0.08);
+    box-shadow: 0 -10px 28px rgba(2, 6, 23, 0.14);
+}
+.page-layout-content .site-footer,
+.page-layout-content-rtl .site-footer,
+.site-footer {
+    background-color: var(--bbbeasy-webapp-bg) !important;
+    background-image: var(--bbbeasy-webapp-bg-image) !important;
+    background-attachment: fixed !important;
+    background-repeat: no-repeat !important;
+    background-size: cover !important;
+    border-top: 1px solid rgba(96, 165, 250, 0.08);
+    box-shadow: 0 -10px 28px rgba(2, 6, 23, 0.14);
+}
+.page-layout-content .site-footer .ant-typography,
+.page-layout-content-rtl .site-footer .ant-typography {
+    color: #dbe9ff !important;
+}
+.page-layout-content .site-footer .ant-typography .ant-btn,
+.page-layout-content .site-footer .ant-typography button,
+.page-layout-content-rtl .site-footer .ant-typography .ant-btn,
+.page-layout-content-rtl .site-footer .ant-typography button {
+    color: #7fbef7 !important;
+}
+.page-layout-content .site-footer button,
+.page-layout-content-rtl .site-footer button {
     padding: 0 5px !important;
 }
 /******************LANDING******************/
-.landing-content {
-    margin: 45px;
-    padding: 4%;
-    border: 3px solid #fbbc0b !important;
-    border-radius: 25px;
-}
-.landing-content button {
-    width: 30%;
-}
-.landing-btns {
-    gap: 15px;
-    display: flex;
-}
-.landing-img {
-    width: 85%;
+.landing-shell {
+    position: relative;
+    margin: -25px -20px 0;
+    padding: 0 20px 140px;
+    overflow: hidden;
+    isolation: isolate;
+    background: var(--bbbeasy-landing-bg);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
 }
-.features .bbbeasy-btn {
-    font-size: 22px !important;
-    clip-path: polygon(48% 0, 52% 0, 95% 25%, 95% 75%, 52% 100%, 48% 100%, 5% 75%, 5% 25%) !important;
-    margin-bottom: 14px;
-    border-radius: 50%;
-    background: #fbbc0b;
+
+.landing-shell::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    content: none;
 }
-.bbbeasy-icon {
-    line-height: inherit !important;
+
+.landing-shell::after {
+    content: none;
 }
-/********************LOGIN/REGISTER********************/
-.section-top {
-    padding: 50px 0 !important;
+
+.landing-shell .landing-content {
+    position: relative;
+    z-index: 2;
+    max-width: 1440px;
+    margin: 0 auto;
+    min-height: calc(100vh - 74px);
+    padding: 96px 0 52px;
+    align-items: center;
+    gap: 34px;
+    background: transparent;
+    overflow: visible;
+    flex-wrap: nowrap;
 }
-.form-content {
-    padding: 0 30px !important;
+
+.landing-shell .landing-content::before,
+.landing-shell .landing-content::after {
+    content: none;
 }
-.form-header {
-    margin-bottom: 40px !important;
-    margin-top: 20px !important;
+
+.landing-shell .landing-content > .ant-col:first-child {
+    flex: 0 0 47%;
+    max-width: 47%;
+    position: relative;
+    z-index: 2;
 }
-.form-img {
-    width: 55px;
-    margin-left: auto;
-    margin-right: auto;
-    display: block;
-    margin-bottom: 15px;
+
+.landing-shell .landing-content > .ant-col:last-child {
+    flex: 0 0 640px;
+    max-width: 640px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-left: 0;
 }
-.form-agree label {
-    font-size: 95% !important;
+
+.landing-content {
+    color: #e6ecff;
 }
-.alert-msg {
-    margin-bottom: 20px !important;
+
+.landing-shell .hero-content {
+    color: #e6ecff;
+    animation: heroTextIn 0.9s ease both;
 }
-.form-footer .ant-typography {
-    color: gray !important;
+
+.landing-shell .tag {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 16px;
+    border-radius: 999px;
+    margin-bottom: 24px;
+    border: 1px solid rgba(96, 165, 250, 0.3);
+    background: rgba(59, 130, 246, 0.1);
+    color: #60a5fa;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 12px;
+    letter-spacing: 1.5px;
+    text-transform: uppercase;
+    box-shadow: 0 10px 22px rgba(2, 6, 23, 0.22);
+    animation: tagGlow 3s ease-in-out infinite;
 }
-/*******************ROOMS*********************/
-.home-guide {
-    margin-top: 80px !important;
+
+.landing-shell .tag .dot {
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background: #22d3ee;
+    box-shadow: 0 0 12px #22d3ee;
+    animation: tagPulse 1.6s infinite;
 }
-.home-guide .ant-row {
-    margin: 60px 0;
+
+.landing-shell .landing-content h1 {
+    color: #eef4ff !important;
+    font-size: clamp(3.8rem, 4.8vw, 5.9rem) !important;
+    line-height: 0.96 !important;
+    letter-spacing: -0.05em;
+    margin-bottom: 18px !important;
+    text-shadow: 0 10px 30px rgba(59, 130, 246, 0.16);
 }
-.home-guide .ant-row .ant-col {
-    padding: 15px 0;
+
+.landing-shell .landing-content p,
+.landing-shell .landing-content strong {
+    color: #eef4ff !important;
 }
-.home-guide .ant-row:not(.ant-row-rtl) .ant-col:not(:first-child) {
-    border-left: 1px solid var(--bbbeasy-border-gray);
+
+.landing-shell .landing-content .mb-30 {
+    max-width: 620px;
+    margin-bottom: 0 !important;
+    color: rgba(230, 236, 255, 0.8);
+    font-size: 18px;
+    line-height: 1.65;
 }
-.home-guide .ant-row.ant-row-rtl .ant-col:not(:first-child) {
-    border-right: 1px solid var(--bbbeasy-border-gray);
+
+.landing-btns {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+    margin-top: 34px;
 }
-.home-guide .bbbeasy-btn {
-    font-size: 45px !important;
+
+.landing-shell .landing-content .ant-btn {
+    min-width: 138px;
+    height: 52px;
+    border-radius: 14px;
+    font-size: 16px;
     font-weight: 600;
-    clip-path: polygon(48% 0, 52% 0, 95% 25%, 95% 75%, 52% 100%, 48% 100%, 5% 75%, 5% 25%);
-    margin-bottom: 20px;
-    border-radius: 50%;
-    background: #fbbc0b !important;
+    border: none;
+    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
+    transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
 }
-.home-guide h4 {
-    font-size: 16px !important;
+
+.landing-shell .landing-content .ant-btn-primary {
+    color: #0a1530 !important;
+    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
 }
-.home-guide button {
-    width: 25%;
+
+.landing-shell .landing-content .color-primary {
+    color: #ffffff !important;
+    background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 55%, #22d3ee 100%) !important;
 }
-.custom-col-5 {
-    flex: 0 0 20% !important;
-    max-width: 20% !important;
+
+.landing-shell .landing-content .ant-btn:hover,
+.landing-shell .landing-content .ant-btn:focus {
+    transform: translateY(-3px);
+    box-shadow: 0 18px 32px rgba(2, 6, 23, 0.28);
+    filter: brightness(1.02);
 }
-.rooms-cards .ant-card {
-    border-radius: 10px !important;
+
+.landing-shell .hero-visual {
+    position: relative;
+    width: min(100%, 700px);
+    height: 520px;
+    min-height: 520px;
+    animation: heroCardIn 1s ease both 0.12s;
+    margin-left: auto;
+    margin-right: 0;
+    transform: translateX(0);
+    isolation: isolate;
+    overflow: visible;
 }
-.rooms-cards .ant-card:not(.ant-card-bordered):not(:hover) {
-    filter: drop-shadow(0px 0px 3px #ccc);
+
+.landing-shell .hero-visual::before {
+    content: none;
 }
-.rooms-cards .ant-card-head {
-    border-bottom: none !important;
-    padding: 0 12px !important;
+
+.landing-shell .hero-visual::after {
+    content: none;
 }
-.rooms-cards .ant-card-head .ant-card-head-title,
-.rooms-cards .ant-card-head .ant-card-extra {
-    padding-top: 12px !important;
+
+.landing-shell .bbb-classroom-widget {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    animation: cardFloat 7s ease-in-out infinite;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 0;
 }
-.rooms-cards .ant-card-head-wrapper {
-    align-items: start !important;
+
+.landing-shell .classroom-frame {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    min-height: 470px;
+    padding: 18px 18px 16px;
+    border-radius: 28px;
+    border: 1px solid rgba(94, 139, 255, 0.22);
+    background:
+        radial-gradient(circle at 18% 16%, rgba(42, 124, 255, 0.18), transparent 24%),
+        radial-gradient(circle at 82% 84%, rgba(31, 179, 255, 0.14), transparent 30%),
+        linear-gradient(180deg, rgba(17, 29, 58, 0.94) 0%, rgba(10, 18, 40, 0.98) 100%);
+    box-shadow:
+        0 34px 80px rgba(2, 6, 23, 0.6),
+        inset 0 1px 0 rgba(255, 255, 255, 0.05);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+    overflow: hidden;
 }
-.rooms-cards .anticon-more {
-    font-size: 20px;
+
+.landing-shell .classroom-frame::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background:
+        linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 20%),
+        linear-gradient(90deg, rgba(31, 179, 255, 0.05) 0%, transparent 18%, transparent 82%, rgba(31, 179, 255, 0.05) 100%);
+    pointer-events: none;
 }
-.rooms-cards .ant-card-body {
-    padding: 12px !important;
-    padding-top: 0 !important;
+
+.landing-shell .classroom-topbar {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 16px;
+    margin-bottom: 16px;
+    flex-wrap: wrap;
 }
-.room-card-title .bbbeasy-btn {
-    font-size: 22px !important;
+
+.landing-shell .room-tag {
+    display: inline-flex;
+    align-items: center;
+    gap: 9px;
+    min-height: 34px;
+    padding: 0 14px;
+    border-radius: 12px;
+    border: 1px solid rgba(80, 151, 255, 0.3);
+    background: rgba(19, 35, 73, 0.72);
+    color: #d9ebff;
+    font-size: 11px;
     font-weight: 600;
-    clip-path: polygon(48% 0, 52% 0, 95% 25%, 95% 75%, 52% 100%, 48% 100%, 5% 75%, 5% 25%);
-    background-color: #fbbc0b;
+    letter-spacing: 0.02em;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
 }
-.room-card-title .custom-badge-bg {
-    -webkit-clip-path: polygon(48% 0, 52% 0, 95% 25%, 95% 75%, 52% 100%, 48% 100%, 5% 75%, 5% 25%);
-    clip-path: polygon(48% 0, 52% 0, 95% 25%, 95% 75%, 52% 100%, 48% 100%, 5% 75%, 5% 25%);
-    background: #fbbc0b;
-    width: 25px;
-    height: 25px;
+
+.landing-shell .audio-hd-tag {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    min-height: 40px;
+    padding: 0 14px 0 16px;
+    border-radius: 999px;
+    border: 1px solid rgba(80, 151, 255, 0.45);
+    background: linear-gradient(180deg, rgba(30, 52, 101, 0.96), rgba(20, 36, 77, 0.93));
+    color: #f8fbff;
+    font-size: 12px;
+    font-weight: 700;
+    letter-spacing: 0.01em;
+    box-shadow:
+        0 14px 26px rgba(4, 12, 28, 0.35),
+        inset 0 1px 0 rgba(255, 255, 255, 0.08);
 }
-.room-card-title .custom-badge {
-    -webkit-clip-path: polygon(48% 0, 52% 0, 95% 25%, 95% 75%, 52% 100%, 48% 100%, 5% 75%, 5% 25%);
-    clip-path: polygon(48% 0, 52% 0, 95% 25%, 95% 75%, 52% 100%, 48% 100%, 5% 75%, 5% 25%);
-    background: white;
-    padding: 4.5px;
-    position: absolute;
-    top: 1px;
-    left: 1px;
+
+.landing-shell .room-tag svg,
+.landing-shell .audio-hd-tag svg,
+.landing-shell .mute-icn svg,
+.landing-shell .expand-icn svg,
+.landing-shell .hand-badge svg,
+.landing-shell .act-btn svg,
+.landing-shell .media-circle svg {
+    width: 14px;
+    height: 14px;
 }
-.custom-badge .anticon {
-    color: #fbbc0b;
+
+.landing-shell .room-tag-prefix {
+    opacity: 0.7;
+    font-family: 'JetBrains Mono', monospace;
 }
-.readonly-item input {
-    width: 83% !important;
-    background-color: var(--bbbeasy-border-gray) !important;
+
+.landing-shell .audio-hd-tag {
+    border-color: rgba(70, 135, 255, 0.72);
 }
-.readonly-item button {
-    width: 17% !important;
-    background-color: var(--bbbeasy-medimum-gray) !important;
+
+.landing-shell .audio-bars {
+    display: inline-flex;
+    align-items: center;
+    gap: 3px;
+    height: 16px;
 }
-/**********ROOM DETAILS**********/
-.page-padding {
-    padding: 16px 24px !important;
+
+.landing-shell .audio-bars span {
+    width: 3px;
+    border-radius: 999px;
+    background: linear-gradient(180deg, #5ee7ff 0%, #19d1ff 100%);
+    animation: audioWave 1.2s ease-in-out infinite;
+    transform-origin: center bottom;
 }
-.gray-bg {
-    background: var(--bbbeasy-bg-layout) !important;
+
+.landing-shell .audio-bars span:nth-child(1) {
+    height: 6px;
+    animation-delay: 0s;
 }
-.room-details {
-    border-radius: 10px !important;
+
+.landing-shell .audio-bars span:nth-child(2) {
+    height: 11px;
+    animation-delay: 0.12s;
 }
-.RoomPresentation {
-    margin: auto !important;
+
+.landing-shell .audio-bars span:nth-child(3) {
+    height: 8px;
+    animation-delay: 0.24s;
 }
-.room-details #room-shortlink.ant-input-rtl {
-    font-family: 'Poppins', sans-serif !important;
+
+.landing-shell .classroom-body {
+    position: relative;
+    z-index: 1;
+    width: 100%;
+    display: grid;
+    grid-template-columns: 174px minmax(0, 1fr) 132px;
+    gap: 12px;
+    align-items: stretch;
+    height: calc(100% - 52px);
 }
-.room-details .medias {
-    justify-content: space-between;
-    display: flex;
+
+.landing-shell .classroom-left,
+.landing-shell .classroom-center,
+.landing-shell .classroom-right {
+    min-height: 100%;
 }
-.room-details .medias .anticon {
-    font-size: 20px;
-    color: var(--bbbeasy-darken-gray);
+
+.landing-shell .classroom-left {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
 }
-.room-details .bbbeasy-btn {
-    font-size: 20px !important;
-    font-weight: 600;
-    clip-path: polygon(48% 0, 52% 0, 95% 25%, 95% 75%, 52% 100%, 48% 100%, 5% 75%, 5% 25%);
-    border-radius: 50%;
-    background-color: #fbbc0b !important;
+
+.landing-shell .classroom-left > div {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
 }
-.room-presentations {
-    border-radius: 5px !important;
+
+.landing-shell .sec-title {
+    margin: 0 0 2px;
+    color: rgba(223, 233, 255, 0.58);
+    font-size: 11px;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.18em;
+    text-align: center;
 }
-.room-presentations h5 {
-    margin-bottom: 15px !important;
+
+.landing-shell .classroom-center {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
 }
-.room-presentations .upload-file {
-    font-size: 12px !important;
+
+.landing-shell .classroom-right {
+    background: rgba(11, 15, 28, 0.45);
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    border-radius: 18px;
+    padding: 14px 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
 }
-.room-presentations .ant-upload-list-item-container,
-.room-presentations .ant-upload.ant-upload-select {
-    width: 83px;
-    height: 83px;
+
+.landing-shell .video-tile,
+.landing-shell .grid-tile {
+    position: relative;
+    border-radius: 16px;
+    background:
+        radial-gradient(circle at 50% 38%, rgba(20, 48, 104, 0.18), transparent 45%),
+        linear-gradient(180deg, rgba(24, 38, 73, 0.78) 0%, rgba(12, 22, 49, 0.96) 100%);
+    border: 1px solid rgba(69, 111, 200, 0.16);
+    overflow: hidden;
+    box-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, 0.03),
+        0 10px 24px rgba(2, 6, 23, 0.25);
+    min-height: 150px;
 }
-.room-recordings .search-input,
-.room-recordings .search-input input,
-.room-recordings .search-input.ant-input-affix-wrapper:hover,
-.room-recordings .search-input.ant-input-affix-wrapper:focus {
-    background: var(--bbbeasy-bg-layout) !important;
+
+.landing-shell .instructor-tile {
+    min-height: 132px;
+    background:
+        radial-gradient(circle at 50% 45%, rgba(20, 48, 104, 0.2), transparent 45%),
+        linear-gradient(180deg, rgba(24, 38, 73, 0.76) 0%, rgba(12, 22, 49, 0.94) 100%);
 }
-.bbbeasy-mp4 {
-    font-size: 24px !important;
+
+.landing-shell .podium-tile {
+    min-height: 97px;
 }
-.rtl .bbbeasy-mp4 {
-    transform: scaleX(1) !important;
+
+.landing-shell .grid-tile {
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
-.bbbeasy-ppt {
-    font-size: 16px !important;
+
+.landing-shell .tile-avatar {
+    border-radius: 999px;
+    display: grid;
+    place-items: center;
+    color: #09101f;
+    font-weight: 800;
+    box-shadow: 0 10px 24px rgba(3, 8, 20, 0.34);
+    z-index: 1;
+    pointer-events: none;
 }
-.room-recordings-body .ant-card {
-    border-radius: 8px;
+
+.landing-shell .avatar-inst {
+    width: 58px;
+    height: 58px;
+    font-size: 24px;
+    background: linear-gradient(135deg, #f43f5e 0%, #be123c 100%);
 }
-.room-recordings-body .ant-card:not(:hover) {
-    box-shadow: 0 1px 2px -2px var(--bbbeasy-border-gray), 0 3px 6px 0 var(--bbbeasy-lighten-gray),
-        0 5px 12px 4px var(--bbbeasy-bg-layout);
+
+.landing-shell .avatar-podium-1,
+.landing-shell .avatar-podium-2 {
+    width: 44px;
+    height: 44px;
+    font-size: 18px;
 }
-.recording-box .recording-infos .anticon {
-    font-size: 14px;
-    padding: 7px;
-    color: white;
-    background: #fbbc0b;
-    clip-path: polygon(48% 0, 52% 0, 95% 25%, 95% 75%, 52% 100%, 48% 100%, 5% 75%, 5% 25%);
-    border-radius: 50%;
+
+.landing-shell .avatar-podium-1 {
+    background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%);
 }
-.recording-box .recording-infos span {
-    font-size: 12px;
+
+.landing-shell .avatar-podium-2 {
+    background: linear-gradient(135deg, #10b981 0%, #047857 100%);
 }
-.recording-box .share-icon {
-    float: right;
+
+.landing-shell .grid-avatar {
     position: absolute;
-    bottom: -22%;
-    right: 20px;
+    top: 50%;
+    left: 50%;
+    display: grid;
+    place-items: center;
+    transform: translate(-50%, -50%);
+    font-weight: 800;
+    line-height: 1;
 }
-.recording-box .share-icon.ant-btn-rtl {
-    float: left;
-    left: 20px;
-    right: unset;
+
+.landing-shell .grid-avatar {
+    width: 52px;
+    height: 52px;
+    border-radius: 999px;
+    font-size: 16px;
+    color: #09101f;
+    box-shadow: 0 10px 24px rgba(3, 8, 20, 0.34);
+    z-index: 1;
+    pointer-events: none;
 }
-.recording-box img {
-    filter: brightness(50%);
-    border-radius: 10px 10px 0 0 !important;
+
+.landing-shell .grid-avatar-ta {
+    background: linear-gradient(135deg, #6f7bf7 0%, #4338ca 100%);
+    color: #fff;
 }
-.recording-cover {
-    position: absolute;
-    top: 20px;
-    color: white;
-    width: 100%;
-    padding: 0 20px;
+
+.landing-shell .grid-avatar-a {
+    background: linear-gradient(135deg, #3db5ff 0%, #2f7cff 100%);
 }
-.recording-cover .recording-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: baseline;
+
+.landing-shell .grid-avatar-b {
+    background: linear-gradient(135deg, #ff8c26 0%, #ff5f18 100%);
 }
-.recording-cover .recording-header .anticon {
-    font-size: 22px;
-    margin: 0 5px;
+
+.landing-shell .grid-avatar-c {
+    background: linear-gradient(135deg, #dc5fff 0%, #b94cff 100%);
 }
-.recording-cover h3 {
-    color: white !important;
+
+.landing-shell .grid-avatar-j {
+    background: linear-gradient(135deg, #37dfd6 0%, #2fd08a 100%);
 }
-.room-recordings-body .ant-card-body {
-    padding: 20px !important;
+
+.landing-shell .hand-badge,
+.landing-shell .tile-float {
+    position: absolute;
+    top: 11px;
+    right: 11px;
+    width: 18px;
+    height: 18px;
+    border-radius: 999px;
+    background: rgba(6, 10, 20, 0.76);
+    color: rgba(237, 244, 255, 0.92);
+    display: grid;
+    place-items: center;
+    box-shadow: 0 10px 18px rgba(2, 6, 23, 0.2);
+    z-index: 2;
+    font-size: 0;
 }
-.room-box {
-    display: grid !important;
+
+.landing-shell .hand-badge {
+    top: 8px;
+    right: 8px;
+    width: 24px;
+    height: 24px;
+    border-radius: 8px;
+    background: linear-gradient(135deg, rgba(245, 158, 11, 0.96), rgba(245, 158, 11, 0.74));
+    box-shadow: 0 6px 12px rgba(245, 158, 11, 0.28);
+    animation: bounceMini 2s ease-in-out infinite;
 }
-.file-size {
-    color: var(--bbbeasy-medimum-gray);
-    font-size: 13px;
-    margin: 0 12px;
+
+.landing-shell .hand-badge svg {
+    width: 13px !important;
+    height: 13px !important;
+    color: #fff;
 }
-.actions .file-size {
-    font-size: 10px;
-    margin: 0;
+
+.landing-shell .tile-float.pink {
+    background: rgba(178, 76, 123, 0.82);
+    animation: speakPulse 2.8s ease-in-out infinite;
 }
-/******************ADD MODAL*********************/
-.add-modal .ant-modal-header {
-    text-align: center;
+
+.landing-shell .tile-float svg {
+    width: 11px !important;
+    height: 11px !important;
+    display: block;
+    flex-shrink: 0;
 }
-.ant-modal-header {
-    margin: 0 20px;
+
+.landing-shell .expand-icn {
+    position: absolute;
+    right: 10px;
+    bottom: 8px;
+    width: 14px;
+    height: 14px;
+    color: rgba(255, 255, 255, 0.46);
+    display: grid;
+    place-items: center;
 }
-.add-modal .ant-form {
-    padding: 0 15px;
+
+.landing-shell .expand-icn:hover {
+    color: rgba(255, 255, 255, 0.9);
 }
-.cancel-btn {
-    background: var(--bbbeasy-medimum-gray) !important;
-    color: white !important;
+
+.landing-shell .tile-footer {
+    position: absolute;
+    left: 12px;
+    right: 12px;
+    bottom: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 6px;
 }
-.cancel-btn:hover,
-.cancel-btn:focus {
-    border-color: var(--bbbeasy-medimum-hover-gray) !important;
-    background: var(--bbbeasy-medimum-hover-gray) !important;
+
+.landing-shell .mute-icn {
+    display: grid;
+    place-items: center;
+    color: #fff;
 }
-.large-modal {
-    width: 50% !important;
+
+.landing-shell .mute-icn svg {
+    width: 12px !important;
+    height: 12px !important;
 }
-.medium-modal {
-    width: 45% !important;
+
+.landing-shell .user-lbl {
+    padding: 3px 7px;
+    border-radius: 6px;
+    background: rgba(4, 9, 20, 0.82);
+    color: rgba(237, 244, 255, 0.96);
+    font-size: 9px;
+    font-weight: 600;
 }
-/**************DOUBLE CONFIRM DELETE*****************/
-.delete-wrap {
+
+.landing-shell .tab-bar {
+    display: flex;
+    gap: 6px;
+    padding: 6px;
+    border-radius: 12px;
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    background: rgba(11, 15, 28, 0.82);
+}
+
+.landing-shell .tab-btn {
+    flex: 1;
+    min-height: 42px;
+    padding: 8px 10px;
+    border: none;
+    border-radius: 10px;
+    background: transparent;
+    color: var(--text-muted);
+    font-size: 11px;
+    font-weight: 700;
     text-align: center;
+    cursor: pointer;
+    transition: all 0.25s ease;
 }
-.delete-wrap .delete-icon {
-    font-size: 35px;
-    margin-bottom: 20px;
-    color: #fbbc0b;
+
+.landing-shell .tab-btn:hover {
+    color: var(--text-main);
 }
-.delete-wrap .ant-modal-confirm-title {
-    margin-bottom: 10px;
+
+.landing-shell .tab-btn.active {
+    color: #fff;
+    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+    box-shadow: 0 8px 18px rgba(59, 130, 246, 0.34);
 }
-.delete-wrap .ant-modal-confirm-btns {
-    float: none;
+
+.landing-shell .table-grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    grid-template-rows: repeat(2, 1fr);
+    gap: 10px;
+    flex: 1;
+    min-height: 0;
 }
-/***************************TABLE****************************/
-.bbbeasy-table {
-    padding: 0 24px 0 10px;
+
+.landing-shell .grid-tile {
+    min-height: 144px;
 }
-.bbbeasy-table.ant-table-wrapper-rtl {
-    padding: 0 10px 0 24px;
+
+.landing-shell .grid-tile:nth-child(1) {
+    min-height: 148px;
 }
-.bbbeasy-table .ant-table-thead > tr > th {
-    background: var(--bbbeasy-lighten-gray) !important;
+
+.landing-shell .grid-tile .grid-avatar {
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
 }
-.table-actions:not(.editable) a:not(.ant-popover-open):hover,
-.table-actions.editable a:not(.ant-popover-open) {
-    color: #fbbc0b !important;
+
+.landing-shell .grid-tile .tile-footer {
+    left: 10px;
+    right: 10px;
+    bottom: 10px;
 }
-.table-actions:not(.editable) a {
-    color: var(--bbbeasy-medimum-gray) !important;
+
+.landing-shell .add-tile {
+    border: 2px dashed rgba(255, 255, 255, 0.1);
+    background: transparent;
 }
-.table-actions a.ant-popover-open {
-    color: red !important;
+
+.landing-shell .add-tile:hover {
+    border-color: rgba(255, 255, 255, 0.3);
 }
-.bbbeasy-table .ant-table-expanded-row .ant-table-cell {
-    padding: 0;
+
+.landing-shell .add-tile svg {
+    width: 22px;
+    height: 22px;
+    color: rgba(255, 255, 255, 0.35);
 }
-.bbbeasy-table .ant-pro-card-body {
-    padding: 0 !important;
+
+.landing-shell .classroom-right {
+    background: rgba(11, 15, 28, 0.5);
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    border-radius: 18px;
+    padding: 12px 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
 }
-.bbbeasy-table .card-parent {
-    background: transparent;
-    box-shadow: unset !important;
+
+.landing-shell .raise-hand-main {
+    width: 54px;
+    height: 54px;
+    border-radius: 999px;
+    border: 1px solid rgba(245, 158, 11, 0.45);
+    background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(245, 158, 11, 0.05));
+    display: grid;
+    place-items: center;
+    color: var(--accent-yellow);
+    cursor: pointer;
+    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
+    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.18);
 }
-.bbbeasy-table .card-parent .ant-card-body {
-    padding: 0 !important;
+
+.landing-shell .raise-hand-main:hover {
+    transform: translateY(-2px) scale(1.04);
+    background: linear-gradient(135deg, rgba(245, 158, 11, 0.28), rgba(245, 158, 11, 0.08));
+    box-shadow: 0 10px 22px rgba(245, 158, 11, 0.25);
 }
-.card-parent .bordered-card {
-    border: 1px solid var(--bbbeasy-border-gray);
-    border-radius: 8px;
+
+.landing-shell .raise-hand-main svg {
+    width: 24px;
+    height: 24px;
 }
-.card-parent .bordered-card .ant-card:first-child {
-    border-radius: 8px 8px 0 0 !important;
+
+.landing-shell .quick-actions-grid {
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 8px;
 }
-.card-parent .bordered-card .ant-card:not(:first-child):not(:last-child),
-.card-parent .bordered-card .ant-card:not(:first-child) .ant-card-head {
-    border-radius: 0 !important;
+
+.landing-shell .act-btn {
+    height: 34px;
+    border-radius: 8px;
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    background: rgba(255, 255, 255, 0.03);
+    color: #cbd5e1;
+    display: grid;
+    place-items: center;
+    cursor: pointer;
+    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
 }
-.card-parent .bordered-card .ant-card:last-child {
-    border-radius: 0 0 8px 8px !important;
+
+.landing-shell .act-btn:hover {
+    background: rgba(255, 255, 255, 0.08);
+    border-color: rgba(255, 255, 255, 0.14);
+    color: #fff;
 }
-.card-parent .bordered-card .ant-card .ant-card-head {
-    background: var(--bbbeasy-lighten-gray);
-    min-height: auto;
+
+.landing-shell .act-btn svg {
+    width: 15px;
+    height: 15px;
 }
-.card-parent .bordered-card .ant-card .ant-card-head .ant-card-head-title,
-.card-parent .bordered-card .ant-card .ant-card-body label {
-    font-size: 13px;
+
+.landing-shell .room-mode-box {
+    width: calc(100% + 20px);
+    margin: 0 -10px;
+    padding: 10px 0;
+    text-align: center;
+    background: rgba(0, 0, 0, 0.2);
+    border-top: 1px solid rgba(255, 255, 255, 0.05);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
 }
-.card-parent .bordered-card .ant-card .ant-card-head .ant-card-head-title {
-    padding: 6px 0;
+
+.landing-shell .mode-title {
+    color: var(--text-main);
+    font-size: 10px;
+    font-weight: 700;
 }
-.card-parent .bordered-card .ant-card .ant-card-body {
-    padding: 8px 24px !important;
+
+.landing-shell .mode-sub {
+    margin-top: 2px;
+    color: var(--text-muted);
+    font-size: 9px;
 }
-.card-parent .bordered-card .ant-card .ant-card-body .ant-form-item {
-    margin-bottom: 0;
+
+.landing-shell .bottom-media-bar {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
 }
-.card-parent .bordered-card .ant-checkbox-disabled span {
-    color: inherit;
+
+.landing-shell .media-circle {
+    width: 32px;
+    height: 32px;
+    border-radius: 999px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    background: rgba(255, 255, 255, 0.05);
+    display: grid;
+    place-items: center;
+    color: #fff;
+    cursor: pointer;
+    transition: transform 0.2s ease, background 0.2s ease;
 }
-.actions-expanded {
-    margin-top: 16px;
-    float: right;
+
+.landing-shell .media-circle:hover {
+    transform: translateY(-1px);
+    background: rgba(255, 255, 255, 0.1);
 }
-.actions-expanded.ant-space-rtl {
-    margin-top: 16px;
-    float: left;
+
+.landing-shell .media-circle.off {
+    border-color: rgba(239, 68, 68, 0.3);
+    background: rgba(239, 68, 68, 0.05);
 }
-/************TABLE SEARCH***************/
-.table-search-bloc {
-    padding: 8px;
+
+.landing-shell .media-circle.off svg {
+    color: var(--accent-red);
 }
-.table-search-input {
-    margin-bottom: 8px !important;
-    display: block !important;
+
+.landing-shell .media-circle.main-speaker {
+    width: 38px;
+    height: 38px;
+    background: rgba(255, 255, 255, 0.12);
 }
-.search-icon-filtered {
-    color: #fbbc0b;
+
+.landing-shell .media-circle.main-speaker svg {
+    width: 16px;
+    height: 16px;
 }
-.search-text-highlighted {
-    background: #ffcf33;
+
+.landing-shell .encryption-pill {
+    position: absolute;
+    left: 22px;
+    bottom: -16px;
+    z-index: 2;
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    min-height: 42px;
+    padding: 0 16px;
+    border-radius: 14px;
+    border: 1px solid rgba(46, 209, 255, 0.45);
+    background: rgba(9, 20, 44, 0.95);
+    color: #e8f7ff;
+    box-shadow:
+        0 16px 26px rgba(3, 8, 20, 0.28),
+        0 0 18px rgba(22, 188, 255, 0.16);
 }
-.bbbeasy-table mark {
-    padding: 0;
-    background-color: #ffcf33;
+
+.landing-shell .encryption-pill svg {
+    width: 14px;
+    height: 14px;
+    color: #38d8ff;
 }
-/*************EDIT TABLE****************/
-.input-editable {
-    margin-bottom: 0 !important;
+
+.features {
+    position: relative;
+    z-index: 2;
+    max-width: 1440px;
+    margin: 0 auto;
+    padding: 0 0 0;
 }
-.input-editable .ant-form-item-label > label.ant-form-item-required:not(.ant-form-item-required-mark-optional)::before {
-    content: '';
-    margin-right: 0;
+
+.features-block {
+    position: relative;
+    z-index: 2;
+    max-width: 1440px;
+    margin: 0 auto;
+    padding: 0 0 40px;
 }
-.ant-form-item:not(.input-editable) .ant-form-item-label label {
-    font-size: 15px;
+
+.features-row {
+    margin-bottom: 24px;
 }
-.input-editable .ant-input-suffix button {
-    width: 20px !important;
-    height: 20px !important;
-    font-size: 12px !important;
+
+.features-row-last {
+    max-width: 25%;
+    margin-left: 0;
 }
-.input-editable .ant-input-suffix .cell-input-cancel {
-    color: var(--bbbeasy-medimum-gray);
-    border-color: var(--bbbeasy-medimum-gray);
+
+.card-feat-last {
+    min-width: 290px;
 }
-.input-editable .ant-input-suffix .cell-input-cancel:hover {
-    color: #fbbc0b !important;
-    border-color: #fbbc0b;
+
+@media (min-width: 992px) {
+    .features-row {
+        flex-wrap: nowrap;
+    }
+
+    .features-row > .ant-col {
+        flex: 1 1 0 !important;
+        max-width: none !important;
+    }
+
+    .card-feat-last {
+        min-width: 0;
+    }
 }
-.cell-input-cancel {
-    color: var(--bbbeasy-medimum-gray) !important;
+
+.section-head {
+    text-align: center;
+    margin: 12px auto 42px;
+    max-width: 820px;
+    animation: heroTextIn 0.9s ease both 0.18s;
 }
-.cell-input-cancel:hover {
-    color: #ffcf33 !important;
+
+.section-head h2 {
+    color: #eef4ff;
+    font-size: clamp(42px, 4vw, 58px);
+    font-weight: 800;
+    letter-spacing: -0.02em;
+    margin-bottom: 10px;
 }
-.cell-edit-icon,
-.edit-btn {
-    color: var(--bbbeasy-medimum-gray) !important;
+
+.section-head p {
+    color: #8a97c7;
+    font-size: 16px;
 }
-.cell-edit-icon:hover,
-.edit-btn:hover {
-    color: #fbbc0b !important;
+
+.gradient-text {
+    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 55%, #22d3ee 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
 }
-.select-field .ant-select-selection-item {
-    text-transform: capitalize;
+
+.features .card-feat {
+    background: rgba(9, 18, 46, 0.6);
+    border: 1px solid rgba(96, 165, 250, 0.16);
+    border-radius: 22px;
+    padding: 28px 24px;
+    backdrop-filter: blur(14px);
+    box-shadow: 0 18px 40px rgba(2, 6, 23, 0.24);
+    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, translate 0.3s ease;
+    min-height: 212px;
+    opacity: 0;
+    animation: cardRise 0.8s ease forwards;
 }
-/**********************PRESETS*************************/
-.preset-card-title .input-editable {
-    width: 80%;
+
+.features .card-feat:nth-child(1) { animation-delay: 0.08s; }
+.features .card-feat:nth-child(2) { animation-delay: 0.16s; }
+.features .card-feat:nth-child(3) { animation-delay: 0.24s; }
+.features .card-feat:nth-child(4) { animation-delay: 0.32s; }
+.features .card-feat:nth-child(5) { animation-delay: 0.42s; }
+
+.features .card-feat:hover {
+    transform: translateY(-8px);
+    border-color: rgba(96, 165, 250, 0.46);
+    box-shadow: 0 24px 50px rgba(59, 130, 246, 0.24);
 }
-.presets-modal .presets-body .ant-form-item-control .ant-input {
-    width: 80%;
+
+.features .bbbeasy-btn {
+    font-size: 22px !important;
+    margin-bottom: 18px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #3b82f6 0%, #22d3ee 100%);
+    box-shadow: 0 10px 24px rgba(59, 130, 246, 0.28);
+    clip-path: polygon(48% 0, 52% 0, 95% 25%, 95% 75%, 52% 100%, 48% 100%, 5% 75%, 5% 25%) !important;
 }
-.help-icon {
-    font-size: 17px !important;
+
+.bbbeasy-icon {
+    line-height: inherit !important;
 }
-.title-tooltip {
-    margin-top: 12px !important;
+
+.features .card-feat p {
+    color: #e6ecff;
+    font-size: 15px;
+    line-height: 1.55;
+    margin-top: 10px;
 }
-.title-tooltip h5,
-.install-tooltip h5 {
-    margin: 0.25em 0 !important;
+
+.features .card-feat:nth-child(3) {
+    transform: translateY(8px);
 }
-.presets-cards {
-    padding-top: 16px;
+
+.features .card-feat:nth-child(4) {
+    transform: translateY(8px);
 }
-.presets-cards .ant-card {
-    border-radius: 10px !important;
+
+.features .card-feat:nth-child(3):hover,
+.features .card-feat:nth-child(4):hover {
+    transform: translateY(0);
 }
-.presets-cards .ant-card-head {
-    border-bottom: none !important;
+
+@keyframes landingGridShift {
+    from {
+        background-position: 0 0, 0 0;
+    }
+    to {
+        background-position: 48px 48px, 48px 48px;
+    }
 }
-.presets-cards .ant-card-body button {
-    margin: 6px;
+
+@keyframes landingShellDrift {
+    0%,
+    100% {
+        background-position: 0% 0%;
+    }
+    50% {
+        background-position: 100% 14%;
+    }
 }
-.presets-cards .ant-card-body button:disabled .PresetIcon {
-    background-color: var(--bbbeasy-medimum-gray);
+
+@keyframes landingShellBreath {
+    0%,
+    100% {
+        filter: saturate(1) brightness(1);
+    }
+    50% {
+        filter: saturate(1.06) brightness(1.03);
+    }
 }
-.empty-presets {
-    height: 200px !important;
+
+@keyframes landingShellGlow {
+    0%,
+    100% {
+        filter: saturate(1) brightness(1);
+    }
+    50% {
+        filter: saturate(1.08) brightness(1.04);
+    }
 }
-.empty-labels {
-    height: 40px !important;
-    margin-top: 10px !important;
+
+@keyframes landingSparkles {
+    0% {
+        transform: translate3d(0, 0, 0);
+        opacity: 0.7;
+    }
+    50% {
+        transform: translate3d(0, -8px, 0);
+        opacity: 1;
+    }
+    100% {
+        transform: translate3d(0, 0, 0);
+        opacity: 0.7;
+    }
 }
-/********************INSTALL********************/
-.success-install-icon {
-    font-size: 40px !important;
-    padding: 20px !important;
-    color: white !important;
-    background: #fbbc0b;
-    clip-path: polygon(48% 0, 52% 0, 95% 25%, 95% 75%, 52% 100%, 48% 100%, 5% 75%, 5% 25%);
-    border-radius: 50%;
+
+@keyframes landingSparkleFlow {
+    0%,
+    100% {
+        transform: translate3d(0, 0, 0);
+    }
+    50% {
+        transform: translate3d(0, 6px, 0);
+    }
 }
-.button-container {
-    margin-top: 24px !important;
+
+@keyframes landingGridPulse {
+    0%,
+    100% {
+        opacity: 0.58;
+    }
+    50% {
+        opacity: 0.76;
+    }
 }
-.button-container .ant-row:not(.ant-row-rtl) .prev {
-    margin-right: 20px;
+
+@keyframes landingSparkleDrift {
+    0%,
+    100% {
+        transform: translate3d(0, 0, 0) scale(1);
+    }
+    50% {
+        transform: translate3d(6px, -6px, 0) scale(1.02);
+    }
 }
-.button-container .ant-row.ant-row-rtl .prev {
-    margin-left: 20px;
+
+@keyframes heroTextIn {
+    from {
+        opacity: 0;
+        transform: translateY(18px);
+        filter: blur(4px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+        filter: blur(0);
+    }
 }
-.button-container .ant-form-item-control-input-content {
-    display: flex;
+
+@keyframes heroCardIn {
+    from {
+        opacity: 0;
+        transform: translateX(22px) scale(0.98);
+        filter: blur(4px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0) scale(1);
+        filter: blur(0);
+    }
 }
-.install-form .ant-card-body {
-    display: flex;
-    flex-wrap: wrap;
+
+@keyframes heroCardFloat {
+    0%,
+    100% {
+        transform: translateX(-30px) translateY(0);
+    }
+    50% {
+        transform: translateX(-30px) translateY(-8px);
+    }
 }
-/*******STEP2*******/
-.install-form .company-container,
-.install-form .colors-container {
-    display: flex;
-    flex-wrap: wrap;
+
+@keyframes cardRise {
+    from {
+        opacity: 0;
+        transform: translateY(18px);
+        filter: blur(4px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+        filter: blur(0);
+    }
 }
-.install-form .box,
-.install-form .colors-container .ant-form-item {
-    flex: 0 0 50%;
+
+@keyframes landingFloat {
+    0%,
+    100% {
+        transform: translateY(0);
+    }
+    50% {
+        transform: translateY(-10px);
+    }
 }
-.install-form:not(.ant-form-rtl) .box:not(.last),
-.install-form:not(.ant-form-rtl) .colors-container .ant-form-item {
-    padding-right: 20px;
+
+@keyframes tagPulse {
+    0%,
+    100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.35;
+    }
 }
-.install-form.ant-form-rtl .box:not(.last),
-.install-form.ant-form-rtl .colors-container .ant-form-item {
-    padding-left: 20px;
+
+@keyframes tagGlow {
+    0%,
+    100% {
+        box-shadow: 0 10px 22px rgba(2, 6, 23, 0.22), 0 0 0 1px rgba(96, 165, 250, 0.12);
+    }
+    50% {
+        box-shadow: 0 12px 26px rgba(2, 6, 23, 0.24), 0 0 0 1px rgba(96, 165, 250, 0.24);
+    }
 }
-.install-form:not(.ant-form-rtl) .box.last {
-    padding-left: 20px;
-    border-left: 1px solid var(--bbbeasy-border-gray);
+
+@keyframes headerGridShift {
+    from {
+        background-position: 0 0, 0 0;
+    }
+    to {
+        background-position: 44px 44px, 44px 44px;
+    }
 }
-.install-form.ant-form-rtl .box.last {
-    padding-right: 20px;
-    border-right: 1px solid var(--bbbeasy-border-gray);
+
+@keyframes logoPulse {
+    0%,
+    100% {
+        transform: translateY(0);
+        filter: drop-shadow(0 0 12px rgba(59, 130, 246, 0.28));
+    }
+    50% {
+        transform: translateY(-1px);
+        filter: drop-shadow(0 0 18px rgba(56, 189, 248, 0.4));
+    }
 }
-.install-form .ant-upload.ant-upload-drag p.ant-upload-hint {
-    font-size: 13px !important;
+
+@keyframes heroGlow {
+    0%,
+    100% {
+        box-shadow: 0 30px 70px rgba(2, 6, 23, 0.48);
+    }
+    50% {
+        box-shadow: 0 34px 80px rgba(2, 6, 23, 0.56);
+    }
 }
-.install-form .rc-color-picker-trigger {
-    width: 85px;
-    height: 24px;
-    border: 1px solid var(--bbbeasy-border-gray);
+
+@keyframes cardFloat {
+    0%,
+    100% {
+        transform: translateY(0);
+    }
+    50% {
+        transform: translateY(-10px);
+    }
 }
-.install-form .rc-color-picker-wrap {
-    vertical-align: middle;
+
+@keyframes audioWave {
+    0%,
+    100% {
+        transform: scaleY(0.55);
+        opacity: 0.75;
+    }
+    50% {
+        transform: scaleY(1.12);
+        opacity: 1;
+    }
 }
-.install-form .color-palette-picker-value {
-    color: gray;
-    font-size: 13px;
-    font-weight: 500;
+
+@keyframes speakPulse {
+    0%,
+    100% {
+        transform: scale(1);
+        opacity: 0.92;
+    }
+    50% {
+        transform: scale(1.08);
+        opacity: 1;
+    }
 }
-.install-form:not(.ant-form-rtl) .color-palette-picker-value {
-    margin-left: 10px;
+
+@keyframes avatarFloat {
+    0%,
+    100% {
+        transform: translateY(0);
+    }
+    50% {
+        transform: translateY(-3px);
+    }
+}
+
+@keyframes pulse {
+    0%,
+    100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+    50% {
+        opacity: 0.55;
+        transform: scale(0.82);
+    }
+}
+
+@keyframes floatUi {
+    0%,
+    100% {
+        transform: translateY(0);
+    }
+    50% {
+        transform: translateY(10px);
+    }
+}
+
+@keyframes wave {
+    0%,
+    100% {
+        transform: scaleY(0.5);
+    }
+    50% {
+        transform: scaleY(1);
+    }
+}
+
+@keyframes cardSweep {
+    0%,
+    100% {
+        opacity: 0;
+        transform: translateX(-18%) rotate(8deg);
+    }
+    45% {
+        opacity: 1;
+    }
+    55% {
+        opacity: 0.8;
+    }
+    70% {
+        opacity: 0;
+        transform: translateX(8%) rotate(8deg);
+    }
+}
+
+@keyframes visualHalo {
+    0%,
+    100% {
+        transform: translate3d(0, 0, 0) scale(1);
+        opacity: 0.84;
+    }
+    50% {
+        transform: translate3d(0, -8px, 0) scale(1.04);
+        opacity: 1;
+    }
+}
+
+@media (max-width: 1200px) {
+    .landing-shell {
+        margin: -25px -20px 0;
+        padding: 0 20px 70px;
+    }
+
+    .landing-shell .landing-content {
+        padding-top: 96px;
+        flex-direction: column;
+        flex-wrap: wrap;
+    }
+
+    .landing-shell .landing-content > .ant-col:first-child,
+    .landing-shell .landing-content > .ant-col:last-child {
+        flex: 0 0 100%;
+        max-width: 100%;
+    }
+
+    .landing-shell .hero-visual {
+        width: min(100%, 760px);
+        height: 500px;
+        min-height: 500px;
+        margin-top: 20px;
+        transform: none;
+        animation: heroCardIn 1s ease both 0.12s;
+    }
+
+    .features-row-last {
+        max-width: 100%;
+    }
+}
+
+@media (max-width: 768px) {
+    .landing-shell .landing-content {
+        padding: 90px 20px 40px;
+    }
+
+    .landing-shell .landing-content h1 {
+        font-size: clamp(2.8rem, 13vw, 4.4rem) !important;
+    }
+
+    .landing-shell .landing-content .mb-30 {
+        font-size: 16px;
+    }
+
+    .landing-shell .hero-visual {
+        width: min(100%, 760px);
+        height: auto;
+        min-height: 0;
+    }
+
+    .landing-shell .classroom-body {
+        grid-template-columns: 1fr;
+        height: auto;
+    }
+
+    .landing-shell .classroom-left {
+        flex-direction: row;
+        overflow-x: auto;
+        padding-bottom: 2px;
+    }
+
+    .landing-shell .classroom-left > div {
+        min-width: 170px;
+    }
+
+    .landing-shell .table-grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        grid-template-rows: repeat(3, minmax(0, 118px));
+    }
+
+    .features {
+        padding: 0 20px 80px;
+    }
+
+    .features-row-last {
+        max-width: 100%;
+    }
+
+    .card-feat-last {
+        min-width: 0;
+    }
+}
+
+@keyframes landingFloat {
+    0%,
+    100% {
+        transform: translateY(0px);
+    }
+    50% {
+        transform: translateY(-10px);
+    }
+}
+/********************LOGIN/REGISTER********************/
+.login-page {
+    position: relative;
+    min-height: calc(100vh - 80px);
+    padding: clamp(44px, 7vh, 80px) clamp(24px, 4vw, 68px) 72px;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: clamp(32px, 4vw, 72px);
+    overflow: hidden;
+    background: var(--bbbeasy-landing-bg);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+}
+
+.login-page::before {
+    content: none;
+}
+
+.login-page::after {
+    content: none;
+}
+
+.login-page.ant-row {
+    position: relative;
+    z-index: 1;
+    width: 100%;
+    min-height: calc(100vh - 200px);
+    justify-content: space-between;
+    align-items: flex-start;
+}
+
+.login-page .login-hero-column {
+    display: flex;
+    align-items: center;
+    min-height: calc(100vh - 200px);
+    padding: 0 !important;
+    flex: 1 1 0 !important;
+    min-width: 0;
+}
+
+.login-page .login-hero {
+    max-width: 640px;
+    padding-left: clamp(24px, 4vw, 76px);
+    padding-right: clamp(8px, 2vw, 24px);
+    padding-top: clamp(20px, 5vh, 72px);
+    animation: loginHeroFloat 8s ease-in-out infinite alternate;
+}
+
+.login-page .login-hero-tag {
+    display: inline-flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 28px;
+    color: #8ab9ff;
+    font-size: 13px;
+    font-weight: 700;
+    letter-spacing: 0.35em;
+    text-transform: uppercase;
+}
+
+.login-page .login-hero-tag-line {
+    width: 34px;
+    height: 3px;
+    border-radius: 999px;
+    background: #f6b51b;
+    box-shadow: 0 0 18px rgba(246, 181, 27, 0.35);
+}
+
+.login-page .login-hero-title {
+    margin: 0 !important;
+    line-height: 0.96 !important;
+    font-weight: 800 !important;
+    color: #f8fbff !important;
+    letter-spacing: -0.03em;
+}
+
+.login-page .login-hero-title .login-hero-title-main,
+.login-page .login-hero-title .login-hero-title-accent {
+    display: block;
+}
+
+.login-page .login-hero-title .login-hero-title-main {
+    color: #f8fbff;
+}
+
+.login-page .login-hero-title .login-hero-title-accent {
+    color: #f6b51b;
+    margin-top: 6px;
+}
+
+.login-page .login-hero-description {
+    margin-top: 18px !important;
+    margin-bottom: 34px !important;
+    font-size: 18px;
+    line-height: 1.7;
+    color: rgba(191, 210, 248, 0.9) !important;
+    max-width: 580px;
+}
+
+.login-page .login-hero-points {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 28px;
+    margin-top: 14px;
+}
+
+.login-page .login-hero-point {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    color: #dbeafe;
+    font-size: 14px;
+    font-weight: 600;
+}
+
+.login-page .login-hero-point-icon {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    border: 1px solid rgba(245, 181, 27, 0.45);
+    color: #f6b51b;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    line-height: 1;
+    box-shadow: 0 0 12px rgba(246, 181, 27, 0.14);
+    flex-shrink: 0;
+}
+
+.login-page .section-top {
+    padding: 0 !important;
+    margin-left: auto !important;
+    margin-right: clamp(12px, 4vw, 72px) !important;
+    margin-top: clamp(-8px, 1vh, 8px) !important;
+    flex: 0 0 500px !important;
+    max-width: 500px !important;
+    width: 500px !important;
+}
+
+.login-page .login-form-column {
+    display: flex;
+    justify-content: flex-end;
+    align-items: flex-start;
+    min-height: calc(100vh - 200px);
+}
+
+.login-page .login-form-column .form-content {
+    margin-top: clamp(-12px, -1vh, 0px);
+    transform: translateY(-18px);
+    width: min(100%, 520px);
+}
+
+.login-page .password-install {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+}
+
+.register-page .login-form-column {
+    min-height: calc(100vh - 240px);
+}
+
+.register-page .login-form-column .form-content {
+    margin-top: clamp(-28px, -3vh, -12px);
+    transform: translateY(-28px);
+    width: min(100%, 460px);
+}
+
+.register-page .password-install {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+}
+
+.section-top {
+    padding: 50px 0 !important;
+}
+.form-content {
+    padding: 34px 34px 30px !important;
+    border: 1px solid rgba(148, 163, 184, 0.18) !important;
+    border-radius: 28px !important;
+    box-shadow:
+        0 32px 70px rgba(2, 6, 23, 0.38),
+        0 0 0 1px rgba(255, 255, 255, 0.04) inset !important;
+    background: rgba(255, 255, 255, 0.97) !important;
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+}
+.form-header {
+    margin-bottom: 40px !important;
+    margin-top: 20px !important;
+}
+.form-img {
+    width: 55px;
+    margin-left: auto;
+    margin-right: auto;
+    display: block;
+    margin-bottom: 15px;
+}
+.form-agree label {
+    font-size: 95% !important;
+}
+.alert-msg {
+    margin-bottom: 20px !important;
+}
+.form-footer .ant-typography {
+    color: #5b667a !important;
+}
+
+@media (max-width: 992px) {
+    .login-page {
+        justify-content: center;
+        padding-inline: 20px;
+        gap: 28px;
+    }
+
+    .login-page .login-hero-column,
+    .login-page .section-top {
+        flex: 1 1 100% !important;
+        max-width: 100% !important;
+        width: 100% !important;
+        margin-right: 0 !important;
+    }
+
+    .login-page .login-hero-column {
+        min-height: auto;
+        justify-content: center;
+    }
+
+    .login-page .login-hero {
+        max-width: 720px;
+        padding-left: 0;
+        padding-right: 0;
+    }
+
+    .login-page .login-form-column {
+        justify-content: center;
+        min-height: auto;
+    }
+
+    .login-page .login-form-column .form-content {
+        transform: none;
+        margin-top: 0;
+    }
+}
+
+@media (max-width: 576px) {
+    .login-page {
+        padding-top: 36px;
+        padding-bottom: 56px;
+    }
+
+    .login-page .login-hero {
+        padding-top: 0;
+    }
+
+    .login-page .login-hero-title {
+        font-size: 44px !important;
+    }
+
+    .login-page .login-hero-description {
+        font-size: 16px;
+    }
+
+    .login-page .login-hero-points {
+        gap: 16px;
+    }
+
+    .login-page .section-top {
+        max-width: 100% !important;
+    }
+
+    .form-content {
+        padding: 28px 20px 24px !important;
+        border-radius: 22px !important;
+    }
+}
+
+@keyframes loginHeroFloat {
+    0% {
+        transform: translateY(0);
+    }
+    100% {
+        transform: translateY(-10px);
+    }
+}
+/*******************ROOMS*********************/
+.home-guide {
+    margin-top: 80px !important;
+}
+.home-guide .ant-row {
+    margin: 60px 0;
+}
+.home-guide .ant-row .ant-col {
+    padding: 15px 0;
+}
+.home-guide .ant-row:not(.ant-row-rtl) .ant-col:not(:first-child) {
+    border-left: 1px solid var(--bbbeasy-border-gray);
+}
+.home-guide .ant-row.ant-row-rtl .ant-col:not(:first-child) {
+    border-right: 1px solid var(--bbbeasy-border-gray);
+}
+.home-guide .bbbeasy-btn {
+    font-size: 45px !important;
+    font-weight: 600;
+    clip-path: polygon(48% 0, 52% 0, 95% 25%, 95% 75%, 52% 100%, 48% 100%, 5% 75%, 5% 25%);
+    margin-bottom: 20px;
+    border-radius: 50%;
+    background: #fbbc0b !important;
+}
+.home-guide h4 {
+    font-size: 16px !important;
+}
+.home-guide button {
+    width: 25%;
+}
+.custom-col-5 {
+    flex: 0 0 20% !important;
+    max-width: 20% !important;
+}
+.rooms-cards .ant-card {
+    border-radius: 10px !important;
+}
+.rooms-cards .ant-card:not(.ant-card-bordered):not(:hover) {
+    filter: drop-shadow(0px 0px 3px #ccc);
+}
+.rooms-cards .ant-card-head {
+    border-bottom: none !important;
+    padding: 0 12px !important;
+}
+.rooms-cards .ant-card-head .ant-card-head-title,
+.rooms-cards .ant-card-head .ant-card-extra {
+    padding-top: 12px !important;
+}
+.rooms-cards .ant-card-head-wrapper {
+    align-items: start !important;
+}
+.rooms-cards .anticon-more {
+    font-size: 20px;
+}
+.rooms-cards .ant-card-body {
+    padding: 12px !important;
+    padding-top: 0 !important;
+}
+/*****************ROOMS CARDS - BLUE DESIGN*****************/
+.rooms-cards .ant-card {
+    border-radius: 14px !important;
+    background: linear-gradient(145deg, #10203f 0%, #0d1b33 100%) !important;
+    border: 1px solid rgba(96, 165, 250, 0.25) !important;
+    box-shadow: 0 10px 34px rgba(37, 99, 235, 0.18);
+    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
+}
+.rooms-cards .ant-card:not(.ant-card-bordered):not(:hover) {
+    filter: none !important;
+}
+.rooms-cards .ant-card.ant-card-hoverable:hover {
+    border-color: rgba(96, 165, 250, 0.55) !important;
+    box-shadow: 0 16px 44px rgba(37, 99, 235, 0.32) !important;
+    transform: translateY(-3px);
+}
+.rooms-cards .room-title {
+    color: #ffffff !important;
+    font-weight: 600;
+}
+.rooms-cards .anticon-more {
+    color: #93c5fd;
+}
+.rooms-cards .anticon-more:hover {
+    color: #fbbc0b;
+}
+.rooms-page-header .ant-page-header-heading-title {
+    color: #ffffff !important;
+}
+.rooms-search-input input,
+.rooms-search-input input::placeholder {
+    color: rgba(148, 163, 184, 0.9) !important;
+    -webkit-text-fill-color: rgba(148, 163, 184, 0.9);
+}
+.rooms-search-input .ant-input-clear-icon,
+.rooms-search-input .anticon-search {
+    color: rgba(148, 163, 184, 0.9) !important;
+}
+.recordings-page-header .ant-page-header-heading-title {
+    color: #ffffff !important;
+}
+.recordings-search-input input,
+.recordings-search-input input::placeholder {
+    color: rgba(148, 163, 184, 0.9) !important;
+    -webkit-text-fill-color: rgba(148, 163, 184, 0.9);
+}
+.recordings-search-input .ant-input-clear-icon,
+.recordings-search-input .anticon-search {
+    color: rgba(148, 163, 184, 0.9) !important;
+}
+.labels-page-header .ant-page-header-heading-title {
+    color: #ffffff !important;
+}
+.labels-search-input input,
+.labels-search-input input::placeholder {
+    color: rgba(148, 163, 184, 0.9) !important;
+    -webkit-text-fill-color: rgba(148, 163, 184, 0.9);
+}
+.labels-search-input .ant-input-clear-icon,
+.labels-search-input .anticon-search {
+    color: rgba(148, 163, 184, 0.9) !important;
+}
+.room-card-title .bbbeasy-btn {
+    font-size: 22px !important;
+    font-weight: 600;
+    clip-path: polygon(48% 0, 52% 0, 95% 25%, 95% 75%, 52% 100%, 48% 100%, 5% 75%, 5% 25%);
+    background-color: #fbbc0b;
+}
+.room-card-title .custom-badge-bg {
+    -webkit-clip-path: polygon(48% 0, 52% 0, 95% 25%, 95% 75%, 52% 100%, 48% 100%, 5% 75%, 5% 25%);
+    clip-path: polygon(48% 0, 52% 0, 95% 25%, 95% 75%, 52% 100%, 48% 100%, 5% 75%, 5% 25%);
+    background: #fbbc0b;
+    width: 25px;
+    height: 25px;
+}
+.room-card-title .custom-badge {
+    -webkit-clip-path: polygon(48% 0, 52% 0, 95% 25%, 95% 75%, 52% 100%, 48% 100%, 5% 75%, 5% 25%);
+    clip-path: polygon(48% 0, 52% 0, 95% 25%, 95% 75%, 52% 100%, 48% 100%, 5% 75%, 5% 25%);
+    background: white;
+    padding: 4.5px;
+    position: absolute;
+    top: 1px;
+    left: 1px;
+}
+.custom-badge .anticon {
+    color: #fbbc0b;
+}
+.readonly-item input {
+    width: 83% !important;
+    background-color: var(--bbbeasy-border-gray) !important;
+}
+.readonly-item button {
+    width: 17% !important;
+    background-color: var(--bbbeasy-medimum-gray) !important;
+}
+/**********ROOM DETAILS**********/
+.page-padding {
+    padding: 16px 24px !important;
+}
+.gray-bg {
+    background: var(--bbbeasy-bg-layout) !important;
+}
+.room-details {
+    border-radius: 10px !important;
+}
+.RoomPresentation {
+    margin: auto !important;
+}
+.room-details #room-shortlink.ant-input-rtl {
+    font-family: 'Poppins', sans-serif !important;
+}
+.room-details .medias {
+    justify-content: space-between;
+    display: flex;
+}
+.room-details .medias .anticon {
+    font-size: 20px;
+    color: var(--bbbeasy-darken-gray);
+}
+.room-details .bbbeasy-btn {
+    font-size: 20px !important;
+    font-weight: 600;
+    clip-path: polygon(48% 0, 52% 0, 95% 25%, 95% 75%, 52% 100%, 48% 100%, 5% 75%, 5% 25%);
+    border-radius: 50%;
+    background-color: #fbbc0b !important;
+}
+.room-presentations {
+    border-radius: 5px !important;
+}
+.room-presentations h5 {
+    margin-bottom: 15px !important;
+}
+.room-presentations .upload-file {
+    font-size: 12px !important;
+}
+.room-presentations .ant-upload-list-item-container,
+.room-presentations .ant-upload.ant-upload-select {
+    width: 83px;
+    height: 83px;
+}
+.room-recordings .search-input,
+.room-recordings .search-input input,
+.room-recordings .search-input.ant-input-affix-wrapper:hover,
+.room-recordings .search-input.ant-input-affix-wrapper:focus {
+    background: var(--bbbeasy-bg-layout) !important;
+}
+.bbbeasy-mp4 {
+    font-size: 24px !important;
+}
+.rtl .bbbeasy-mp4 {
+    transform: scaleX(1) !important;
+}
+.bbbeasy-ppt {
+    font-size: 16px !important;
+}
+.room-recordings-body .ant-card {
+    border-radius: 8px;
+}
+.room-recordings-body .ant-card:not(:hover) {
+    box-shadow: 0 1px 2px -2px var(--bbbeasy-border-gray), 0 3px 6px 0 var(--bbbeasy-lighten-gray),
+        0 5px 12px 4px var(--bbbeasy-bg-layout);
+}
+.recording-box .recording-infos .anticon {
+    font-size: 14px;
+    padding: 7px;
+    color: white;
+    background: #fbbc0b;
+    clip-path: polygon(48% 0, 52% 0, 95% 25%, 95% 75%, 52% 100%, 48% 100%, 5% 75%, 5% 25%);
+    border-radius: 50%;
+}
+.recording-box .recording-infos span {
+    font-size: 12px;
+}
+.recording-box .share-icon {
+    float: right;
+    position: absolute;
+    bottom: -22%;
+    right: 20px;
+}
+.recording-box .share-icon.ant-btn-rtl {
+    float: left;
+    left: 20px;
+    right: unset;
+}
+.recording-box img {
+    filter: brightness(50%);
+    border-radius: 10px 10px 0 0 !important;
+}
+.recording-cover {
+    position: absolute;
+    top: 20px;
+    color: white;
+    width: 100%;
+    padding: 0 20px;
+}
+.recording-cover .recording-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+}
+.recording-cover .recording-header .anticon {
+    font-size: 22px;
+    margin: 0 5px;
+}
+.recording-cover h3 {
+    color: white !important;
+}
+.room-recordings-body .ant-card-body {
+    padding: 20px !important;
+}
+.room-box {
+    display: grid !important;
+}
+.file-size {
+    color: var(--bbbeasy-medimum-gray);
+    font-size: 13px;
+    margin: 0 12px;
+}
+.actions .file-size {
+    font-size: 10px;
+    margin: 0;
+}
+/******************ADD MODAL*********************/
+.add-modal .ant-modal-header {
+    text-align: center;
+}
+.ant-modal-header {
+    margin: 0 20px;
+}
+.add-modal .ant-form {
+    padding: 0 15px;
+}
+.cancel-btn {
+    background: var(--bbbeasy-medimum-gray) !important;
+    color: white !important;
+}
+.cancel-btn:hover,
+.cancel-btn:focus {
+    border-color: var(--bbbeasy-medimum-hover-gray) !important;
+    background: var(--bbbeasy-medimum-hover-gray) !important;
+}
+.large-modal {
+    width: 50% !important;
+}
+.medium-modal {
+    width: 45% !important;
+}
+/**************DOUBLE CONFIRM DELETE*****************/
+.delete-wrap {
+    text-align: center;
+}
+.delete-wrap .delete-icon {
+    font-size: 35px;
+    margin-bottom: 20px;
+    color: #fbbc0b;
+}
+.delete-wrap .ant-modal-confirm-title {
+    margin-bottom: 10px;
+}
+.delete-wrap .ant-modal-confirm-btns {
+    float: none;
+}
+/***************************TABLE****************************/
+.bbbeasy-table {
+    padding: 0 24px 0 10px;
+}
+.bbbeasy-table.ant-table-wrapper-rtl {
+    padding: 0 10px 0 24px;
+}
+.bbbeasy-table .ant-table-thead > tr > th {
+    background: var(--bbbeasy-lighten-gray) !important;
+}
+/*****************RECORDINGS TABLE - BLUE DESIGN*****************/
+.recordings-table .ant-table {
+    background: transparent;
+    border-radius: 14px;
+    overflow: hidden;
+    box-shadow: 0 10px 34px rgba(37, 99, 235, 0.22);
+}
+.recordings-table .ant-table-container {
+    border: 1px solid rgba(96, 165, 250, 0.25) !important;
+    border-radius: 14px !important;
+}
+.recordings-table .ant-table-thead > tr > th {
+    background: linear-gradient(135deg, #172554 0%, #1d4ed8 100%) !important;
+    color: #ffffff !important;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    border-bottom: 1px solid rgba(96, 165, 250, 0.35) !important;
+}
+.recordings-table .ant-table-thead > tr > th .ant-table-column-sorter {
+    color: rgba(255, 255, 255, 0.45);
+}
+.recordings-table .ant-table-thead > tr > th.ant-table-column-has-sorters:hover .ant-table-column-sorter {
+    color: rgba(255, 255, 255, 0.9);
+}
+.recordings-table .ant-table-thead > tr > th .ant-table-filter-trigger {
+    color: rgba(255, 255, 255, 0.65);
+}
+.recordings-table .ant-table-thead > tr > th .ant-table-filter-trigger:hover {
+    color: #ffffff;
+}
+.recordings-table .ant-table-thead > tr > th .ant-table-filter-trigger.active {
+    color: #fbbc0b;
+}
+.recordings-table .ant-table-tbody > tr > td {
+    background: #0d1b33 !important;
+    color: #cbd5e1 !important;
+    border-bottom: 1px solid rgba(96, 165, 250, 0.14) !important;
+}
+.recordings-table .ant-table-tbody > tr.ant-table-row:nth-child(even) > td {
+    background: #0f1f3d !important;
+}
+.recordings-table .ant-table-tbody > tr.ant-table-row:hover > td,
+.recordings-table .ant-table-tbody > tr.ant-table-row:hover > td.ant-table-cell-row-hover,
+.recordings-table .ant-table-tbody > tr > td.ant-table-cell-row-hover {
+    background: rgba(37, 99, 235, 0.24) !important;
+}
+.recordings-table .ant-table-tbody > tr.ant-table-placeholder > td {
+    background: #0d1b33 !important;
+}
+.recordings-table .ant-table-placeholder .ant-empty-description {
+    color: #94a3b8;
+}
+.recordings-table .table-actions:not(.editable) a {
+    color: #93c5fd !important;
+}
+.recordings-table .table-actions:not(.editable) a:hover {
+    color: #fbbc0b !important;
+}
+.recordings-table .recording-formats .anticon {
+    color: #93c5fd;
+}
+.recordings-table .recording-formats .icon-disabled {
+    color: #475569 !important;
+}
+.recordings-table .ant-input {
+    background: #0b1526 !important;
+    border-color: rgba(96, 165, 250, 0.4) !important;
+    color: #e2e8f0 !important;
+}
+.recordings-table .ant-input::placeholder {
+    color: #64748b !important;
+}
+.recordings-table .ant-select:not(.ant-select-disabled) .ant-select-selector {
+    background: #0b1526 !important;
+    border-color: rgba(96, 165, 250, 0.4) !important;
+    color: #e2e8f0 !important;
+}
+.recordings-table .ant-pagination .ant-pagination-item,
+.recordings-table .ant-pagination .ant-pagination-prev .ant-pagination-item-link,
+.recordings-table .ant-pagination .ant-pagination-next .ant-pagination-item-link {
+    background: transparent !important;
+    border-color: rgba(96, 165, 250, 0.35) !important;
+}
+.recordings-table .ant-pagination .ant-pagination-item a {
+    color: #93c5fd !important;
+}
+.recordings-table .ant-pagination .ant-pagination-prev .ant-pagination-item-link,
+.recordings-table .ant-pagination .ant-pagination-next .ant-pagination-item-link {
+    color: #93c5fd !important;
+}
+.recordings-table .ant-pagination .ant-pagination-item-active {
+    background: #1d4ed8 !important;
+    border-color: #1d4ed8 !important;
+}
+.recordings-table .ant-pagination .ant-pagination-item-active a {
+    color: #ffffff !important;
+}
+.recordings-table .ant-table-cell mark {
+    background-color: #ffcf33;
+    color: #1e293b;
+}
+/*****************LABELS TABLE - BLUE DESIGN*****************/
+.labels-table .ant-table {
+    background: transparent;
+    border-radius: 14px;
+    overflow: hidden;
+    box-shadow: 0 10px 34px rgba(37, 99, 235, 0.22);
+}
+.labels-table .ant-table-container {
+    border: 1px solid rgba(96, 165, 250, 0.25) !important;
+    border-radius: 14px !important;
+}
+.labels-table .ant-table-thead > tr > th {
+    background: linear-gradient(135deg, #172554 0%, #1d4ed8 100%) !important;
+    color: #ffffff !important;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    border-bottom: 1px solid rgba(96, 165, 250, 0.35) !important;
+}
+.labels-table .ant-table-thead > tr > th .ant-table-column-sorter {
+    color: rgba(255, 255, 255, 0.45);
+}
+.labels-table .ant-table-thead > tr > th.ant-table-column-has-sorters:hover .ant-table-column-sorter {
+    color: rgba(255, 255, 255, 0.9);
+}
+.labels-table .ant-table-thead > tr > th .ant-table-filter-trigger {
+    color: rgba(255, 255, 255, 0.65);
+}
+.labels-table .ant-table-thead > tr > th .ant-table-filter-trigger:hover {
+    color: #ffffff;
+}
+.labels-table .ant-table-thead > tr > th .ant-table-filter-trigger.active {
+    color: #fbbc0b;
+}
+.labels-table .ant-table-tbody > tr > td {
+    background: #0d1b33 !important;
+    color: #cbd5e1 !important;
+    border-bottom: 1px solid rgba(96, 165, 250, 0.14) !important;
+}
+.labels-table .ant-table-tbody > tr.ant-table-row:nth-child(even) > td {
+    background: #0f1f3d !important;
+}
+.labels-table .ant-table-tbody > tr.ant-table-row:hover > td,
+.labels-table .ant-table-tbody > tr.ant-table-row:hover > td.ant-table-cell-row-hover,
+.labels-table .ant-table-tbody > tr > td.ant-table-cell-row-hover {
+    background: rgba(37, 99, 235, 0.24) !important;
+}
+.labels-table .ant-table-tbody > tr.ant-table-placeholder > td {
+    background: #0d1b33 !important;
+}
+.labels-table .ant-table-placeholder .ant-empty-description {
+    color: #94a3b8;
+}
+.labels-table .table-actions:not(.editable) a {
+    color: #93c5fd !important;
+}
+.labels-table .table-actions:not(.editable) a:hover {
+    color: #fbbc0b !important;
+}
+.labels-table .ant-input {
+    background: #0b1526 !important;
+    border-color: rgba(96, 165, 250, 0.4) !important;
+    color: #e2e8f0 !important;
+}
+.labels-table .ant-input::placeholder {
+    color: #64748b !important;
+}
+.labels-table .ant-pagination .ant-pagination-item,
+.labels-table .ant-pagination .ant-pagination-prev .ant-pagination-item-link,
+.labels-table .ant-pagination .ant-pagination-next .ant-pagination-item-link {
+    background: transparent !important;
+    border-color: rgba(96, 165, 250, 0.35) !important;
+}
+.labels-table .ant-pagination .ant-pagination-item a {
+    color: #93c5fd !important;
+}
+.labels-table .ant-pagination .ant-pagination-prev .ant-pagination-item-link,
+.labels-table .ant-pagination .ant-pagination-next .ant-pagination-item-link {
+    color: #93c5fd !important;
+}
+.labels-table .ant-pagination .ant-pagination-item-active {
+    background: #1d4ed8 !important;
+    border-color: #1d4ed8 !important;
+}
+.labels-table .ant-pagination .ant-pagination-item-active a {
+    color: #ffffff !important;
+}
+.labels-table .ant-table-cell mark {
+    background-color: #ffcf33;
+    color: #1e293b;
+}
+.table-actions:not(.editable) a:not(.ant-popover-open):hover,
+.table-actions.editable a:not(.ant-popover-open) {
+    color: #fbbc0b !important;
+}
+.table-actions:not(.editable) a {
+    color: var(--bbbeasy-medimum-gray) !important;
+}
+.table-actions a.ant-popover-open {
+    color: red !important;
+}
+.bbbeasy-table .ant-table-expanded-row .ant-table-cell {
+    padding: 0;
+}
+.bbbeasy-table .ant-pro-card-body {
+    padding: 0 !important;
+}
+.bbbeasy-table .card-parent {
+    background: transparent;
+    box-shadow: unset !important;
+}
+.bbbeasy-table .card-parent .ant-card-body {
+    padding: 0 !important;
+}
+.card-parent .bordered-card {
+    border: 1px solid var(--bbbeasy-border-gray);
+    border-radius: 8px;
+}
+.card-parent .bordered-card .ant-card:first-child {
+    border-radius: 8px 8px 0 0 !important;
+}
+.card-parent .bordered-card .ant-card:not(:first-child):not(:last-child),
+.card-parent .bordered-card .ant-card:not(:first-child) .ant-card-head {
+    border-radius: 0 !important;
+}
+.card-parent .bordered-card .ant-card:last-child {
+    border-radius: 0 0 8px 8px !important;
+}
+.card-parent .bordered-card .ant-card .ant-card-head {
+    background: var(--bbbeasy-lighten-gray);
+    min-height: auto;
+}
+.card-parent .bordered-card .ant-card .ant-card-head .ant-card-head-title,
+.card-parent .bordered-card .ant-card .ant-card-body label {
+    font-size: 13px;
+}
+.card-parent .bordered-card .ant-card .ant-card-head .ant-card-head-title {
+    padding: 6px 0;
+}
+.card-parent .bordered-card .ant-card .ant-card-body {
+    padding: 8px 24px !important;
+}
+.card-parent .bordered-card .ant-card .ant-card-body .ant-form-item {
+    margin-bottom: 0;
+}
+.card-parent .bordered-card .ant-checkbox-disabled span {
+    color: inherit;
+}
+.actions-expanded {
+    margin-top: 16px;
+    float: right;
+}
+.actions-expanded.ant-space-rtl {
+    margin-top: 16px;
+    float: left;
+}
+/************TABLE SEARCH***************/
+.table-search-bloc {
+    padding: 8px;
+}
+.table-search-input {
+    margin-bottom: 8px !important;
+    display: block !important;
+}
+.search-icon-filtered {
+    color: #fbbc0b;
+}
+.search-text-highlighted {
+    background: #ffcf33;
+}
+.bbbeasy-table mark {
+    padding: 0;
+    background-color: #ffcf33;
+}
+/*************EDIT TABLE****************/
+.input-editable {
+    margin-bottom: 0 !important;
+}
+.input-editable .ant-form-item-label > label.ant-form-item-required:not(.ant-form-item-required-mark-optional)::before {
+    content: '';
+    margin-right: 0;
+}
+.ant-form-item:not(.input-editable) .ant-form-item-label label {
+    font-size: 15px;
+}
+.input-editable .ant-input-suffix button {
+    width: 20px !important;
+    height: 20px !important;
+    font-size: 12px !important;
+}
+.input-editable .ant-input-suffix .cell-input-cancel {
+    color: var(--bbbeasy-medimum-gray);
+    border-color: var(--bbbeasy-medimum-gray);
+}
+.input-editable .ant-input-suffix .cell-input-cancel:hover {
+    color: #fbbc0b !important;
+    border-color: #fbbc0b;
+}
+.cell-input-cancel {
+    color: var(--bbbeasy-medimum-gray) !important;
+}
+.cell-input-cancel:hover {
+    color: #ffcf33 !important;
+}
+.cell-edit-icon,
+.edit-btn {
+    color: var(--bbbeasy-medimum-gray) !important;
+}
+.cell-edit-icon:hover,
+.edit-btn:hover {
+    color: #fbbc0b !important;
+}
+.select-field .ant-select-selection-item {
+    text-transform: capitalize;
+}
+/**********************PRESETS*************************/
+.preset-card-title .input-editable {
+    width: 80%;
+}
+.presets-modal .presets-body .ant-form-item-control .ant-input {
+    width: 80%;
+}
+.help-icon {
+    font-size: 17px !important;
+}
+.title-tooltip {
+    margin-top: 12px !important;
+}
+.title-tooltip h5,
+.install-tooltip h5 {
+    margin: 0.25em 0 !important;
+}
+.presets-cards {
+    padding-top: 16px;
+}
+.presets-cards .ant-card {
+    border-radius: 10px !important;
+}
+.presets-cards .ant-card-head {
+    border-bottom: none !important;
+}
+.presets-cards .ant-card-body button {
+    margin: 6px;
+}
+.presets-cards .ant-card-body button:disabled .PresetIcon {
+    background-color: var(--bbbeasy-medimum-gray);
+}
+.presets-page-header .ant-page-header-heading-title {
+    color: #ffffff !important;
+}
+.presets-search-input input,
+.presets-search-input input::placeholder {
+    color: rgba(148, 163, 184, 0.9) !important;
+    -webkit-text-fill-color: rgba(148, 163, 184, 0.9);
+}
+.presets-search-input .ant-input-clear-icon,
+.presets-search-input .anticon-search {
+    color: rgba(148, 163, 184, 0.9) !important;
+}
+/*****************PRESETS CARDS - BLUE DESIGN*****************/
+.presets-cards .ant-card {
+    border-radius: 14px !important;
+    background: linear-gradient(145deg, #10203f 0%, #0d1b33 100%) !important;
+    border: 1px solid rgba(96, 165, 250, 0.25) !important;
+    box-shadow: 0 10px 34px rgba(37, 99, 235, 0.18);
+    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
+}
+.presets-cards .ant-card:hover {
+    border-color: rgba(96, 165, 250, 0.55) !important;
+    box-shadow: 0 16px 44px rgba(37, 99, 235, 0.32);
+    transform: translateY(-3px);
+}
+.presets-cards .ant-card-head {
+    background: transparent !important;
+    border-bottom: 1px solid rgba(96, 165, 250, 0.14) !important;
+}
+.presets-cards .preset-name {
+    color: #ffffff !important;
+    font-weight: 600;
+}
+.presets-cards .ant-card-head .anticon-more {
+    color: #93c5fd;
+    font-size: 20px;
+}
+.presets-cards .ant-card-head .anticon-more:hover {
+    color: #fbbc0b;
+}
+.presets-cards .preset-card-title .input-editable .ant-input {
+    background: #0b1526 !important;
+    border-color: rgba(96, 165, 250, 0.4) !important;
+    color: #e2e8f0 !important;
+}
+.presets-cards .ant-card-body button:disabled .PresetIcon {
+    background-color: rgba(71, 85, 105, 0.35) !important;
+}
+.empty-presets {
+    height: 200px !important;
+}
+.empty-labels {
+    height: 40px !important;
+    margin-top: 10px !important;
+}
+/********************INSTALL********************/
+.success-install-icon {
+    font-size: 40px !important;
+    padding: 20px !important;
+    color: white !important;
+    background: #fbbc0b;
+    clip-path: polygon(48% 0, 52% 0, 95% 25%, 95% 75%, 52% 100%, 48% 100%, 5% 75%, 5% 25%);
+    border-radius: 50%;
+}
+.button-container {
+    margin-top: 24px !important;
+}
+.button-container .ant-row:not(.ant-row-rtl) .prev {
+    margin-right: 20px;
+}
+.button-container .ant-row.ant-row-rtl .prev {
+    margin-left: 20px;
+}
+.button-container .ant-form-item-control-input-content {
+    display: flex;
+}
+.modal-submit-btn .ant-btn-primary {
+    background: #1677ff !important;
+    border-color: #1677ff !important;
+    color: #ffffff !important;
+}
+.modal-submit-btn .ant-btn-primary:hover,
+.modal-submit-btn .ant-btn-primary:focus {
+    background: #4096ff !important;
+    border-color: #4096ff !important;
+    color: #ffffff !important;
+}
+
+.ant-page-header .ant-btn-primary,
+.site-page-header .ant-btn-primary {
+    background: #1677ff !important;
+    border-color: #1677ff !important;
+    color: #ffffff !important;
+}
+
+.ant-page-header .ant-btn-primary:hover,
+.ant-page-header .ant-btn-primary:focus,
+.site-page-header .ant-btn-primary:hover,
+.site-page-header .ant-btn-primary:focus {
+    background: #4096ff !important;
+    border-color: #4096ff !important;
+    color: #ffffff !important;
+}
+.install-form .ant-card-body {
+    display: flex;
+    flex-wrap: wrap;
+}
+/*******STEP2*******/
+.install-form .company-container,
+.install-form .colors-container {
+    display: flex;
+    flex-wrap: wrap;
+}
+.install-form .box,
+.install-form .colors-container .ant-form-item {
+    flex: 0 0 50%;
+}
+.install-form:not(.ant-form-rtl) .box:not(.last),
+.install-form:not(.ant-form-rtl) .colors-container .ant-form-item {
+    padding-right: 20px;
+}
+.install-form.ant-form-rtl .box:not(.last),
+.install-form.ant-form-rtl .colors-container .ant-form-item {
+    padding-left: 20px;
+}
+.install-form:not(.ant-form-rtl) .box.last {
+    padding-left: 20px;
+    border-left: 1px solid var(--bbbeasy-border-gray);
+}
+.install-form.ant-form-rtl .box.last {
+    padding-right: 20px;
+    border-right: 1px solid var(--bbbeasy-border-gray);
+}
+.install-form .ant-upload.ant-upload-drag p.ant-upload-hint {
+    font-size: 13px !important;
+}
+.install-form .rc-color-picker-trigger {
+    width: 85px;
+    height: 24px;
+    border: 1px solid var(--bbbeasy-border-gray);
+}
+.install-form .rc-color-picker-wrap {
+    vertical-align: middle;
+}
+.install-form .color-palette-picker-value {
+    color: gray;
+    font-size: 13px;
+    font-weight: 500;
+}
+.install-form:not(.ant-form-rtl) .color-palette-picker-value {
+    margin-left: 10px;
+}
+.install-form.ant-form-rtl .color-palette-picker-value {
+    margin-right: 10px;
+}
+/*******STEP3*******/
+.final-form-header {
+    margin: 20px 0 !important;
+}
+.settings-info {
+    margin: 20px !important;
+}
+.install-form .ant-card:not(.ant-card-bordered) {
+    box-shadow: unset !important;
+}
+.install-form .ant-card:not(.ant-card-bordered) .ant-card-body {
+    padding: unset !important;
+}
+.presets-grid {
+    width: 25% !important;
+    box-shadow: none !important;
+}
+.presets-grid .ant-card-meta {
+    align-items: center;
+    display: inline-flex !important;
+}
+/*.presets-grid .ant-card-meta .ant-card-meta-avatar {
+  width: 38px !important;
+  height: 38px !important;
+}*/
+.presets-grid .ant-card-meta .ant-card-meta-title {
+    white-space: unset;
+    text-overflow: unset;
+    font-weight: unset;
+    font-size: 14.5px;
+}
+.presets-grid.ant-card-grid-hoverable:hover {
+    background: #fffce6;
+    cursor: pointer;
+    border-radius: 10px;
+}
+.PresetIcon {
+    font-size: 18px !important;
+    padding: 10px;
+    color: white;
+    background: #fbbc0b;
+    clip-path: polygon(48% 0, 52% 0, 95% 25%, 95% 75%, 52% 100%, 48% 100%, 5% 75%, 5% 25%);
+    border-radius: 50%;
+}
+/*.PresetIcon img {
+  width: 19px;
+}*/
+.presets-modal {
+    width: 35% !important;
+}
+.white-space {
+    white-space: pre-wrap;
+    text-align: left;
+    width: 260px;
+}
+.presets-modal .ant-modal-content {
+    margin: 0 30px;
+}
+.presets-modal label {
+    color: var(--bbbeasy-darken-gray) !important;
+    font-weight: 500;
+}
+.presets-modal label::after {
+    content: '' !important;
+}
+.presets-modal .presets-body {
+    padding: 20px;
+}
+.presets-modal .presets-body .ant-form-item-control:not(.ant-col-rtl) {
+    text-align: right;
+}
+.presets-modal .presets-body .ant-form-item-control.ant-col-rtl {
+    text-align: left;
+}
+.presets-modal .ant-modal-footer {
+    text-align: center !important;
+    border-top: unset;
+}
+.presets-modal .ant-modal-footer button {
+    width: 70%;
+}
+/*******************PAGE NOT FOUND*************/
+.page-not-found {
+    padding: 60px 32px !important;
+}
+/**********************NOTIFICATIONS*******************/
+.progress-bar {
+    height: 8px;
+    margin-top: 15px;
+}
+.percentage {
+    display: block;
+    height: 100%;
+    width: 100%;
+    background-color: var(--bbbeasy-medimum-gray);
+    animation: progress 4500ms ease-in 1;
+}
+.percentage.notif-login {
+    animation: progress 2500ms ease-in 1;
+}
+@keyframes progress {
+    from {
+        width: 0;
+    }
+}
+/***********************BRANDINGS**********************/
+.branding-row,
+.preset-settings-row {
+    align-items: center;
+    min-height: 50vh;
+}
+.button-padding {
+    padding: 0 20% !important;
+}
+/***********************PROFILE***********************************/
+.site-page-form {
+    padding: 16px 24px !important;
+}
+.profile-form .bbbeasy-btn {
+    clip-path: polygon(48% 0, 52% 0, 95% 25%, 95% 75%, 52% 100%, 48% 100%, 5% 75%, 5% 25%);
+    background-color: #fbbc0b;
+    color: black;
+}
+.profile-form .custom-badge-bg {
+    -webkit-clip-path: polygon(48% 0, 52% 0, 95% 25%, 95% 75%, 52% 100%, 48% 100%, 5% 75%, 5% 25%);
+    clip-path: polygon(48% 0, 52% 0, 95% 25%, 95% 75%, 52% 100%, 48% 100%, 5% 75%, 5% 25%);
+    background: #fbbc0b;
+    font-size: 19px !important;
+    margin-top: 16px;
+    right: 32px !important;
+}
+.profile-form .ant-badge-rtl .custom-badge-bg {
+    left: 32px !important;
+}
+.profile-form .custom-badge {
+    -webkit-clip-path: polygon(48% 0, 52% 0, 95% 25%, 95% 75%, 52% 100%, 48% 100%, 5% 75%, 5% 25%);
+    clip-path: polygon(48% 0, 52% 0, 95% 25%, 95% 75%, 52% 100%, 48% 100%, 5% 75%, 5% 25%);
+    background: white;
+    position: absolute;
+    top: 0.5px;
+    left: 0.5px;
+    right: 0.5px;
+    bottom: 0.5px;
+    width: 38px;
+    height: 38px;
+    border-radius: 50%;
+}
+
+/*********************RECORDINGS********************/
+.recording-formats .icon-bbbeasy-playback-presentation,
+.recording-formats .icon-bbbeasy-playback-podcast,
+.recording-formats .anticon-desktop,
+.recording-formats .icon-bbbeasy-activity-reports {
+    font-size: 17px;
+}
+
+.recording-formats .icon-bbbeasy-mp4 {
+    font-size: 24px;
+}
+
+.recording-formats .icon-desktop {
+    height: 12px;
+}
+
+.recording-formats .icon-disabled {
+    color: var(--bbbeasy-medimum-gray) !important;
+}
+
+.share-modal {
+    padding: 0 30px !important;
+    text-align: center !important;
+}
+
+.share-modal .modal-content {
+    width: 80% !important;
+}
+
+.share-modal .recording-formats .anticon:not(.icon-disabled) .icon-bbbeasy-playback-presentation,
+.share-modal .recording-formats .anticon:not(.icon-disabled) .icon-bbbeasy-playback-podcast,
+.share-modal .recording-formats .anticon-desktop:not(.icon-disabled),
+.share-modal .recording-formats .anticon:not(.icon-disabled) .icon-bbbeasy-activity-reports {
+    font-size: 25px;
+}
+.share-modal .recording-formats .icon-disabled .icon-bbbeasy-playback-presentation,
+.share-modal .recording-formats .icon-disabled .icon-bbbeasy-playback-podcast,
+.share-modal .recording-formats .anticon-desktop.icon-disabled,
+.share-modal .recording-formats .icon-disabled .icon-bbbeasy-activity-reports {
+    font-size: 22px;
+}
+
+.share-modal .recording-formats .icon-bbbeasy-mp4 {
+    font-size: 29px;
+}
+
+.share-modal .recording-formats .icon-disabled .icon-bbbeasy-mp4 {
+    font-size: 26px;
+}
+
+.share-modal .recording-formats .icon-desktop:not(.disabled) {
+    height: 23px;
+}
+
+.share-modal .recording-formats .icon-desktop.disabled {
+    height: 20px;
+}
+
+.share-modal .bbbeasy-btn .ant-avatar-string {
+    position: unset !important;
+}
+
+.share-modal .bbbeasy-btn:not(:hover) .bbbeasy-white-btn {
+    -webkit-clip-path: polygon(48% 0, 52% 0, 95% 25%, 95% 75%, 52% 100%, 48% 100%, 5% 75%, 5% 25%);
+    clip-path: polygon(48% 0, 52% 0, 95% 25%, 95% 75%, 52% 100%, 48% 100%, 5% 75%, 5% 25%);
+}
+
+.profile-form .ant-image .ant-image-img {
+    width: 100%;
+}
+
+.profile-form .ant-image .ant-image-mask {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    background: rgba(0, 0, 0, 0.5);
+    cursor: pointer;
+    opacity: 0;
+    transition: opacity 0.3s;
+}
+
+.profile-form .ant-image .ant-image-mask:hover {
+    opacity: 1;
+}
+
+.delete-button-color {
+    color: #ff4d4f !important;
+}
+.edit-button-color {
+    color: var(--bbbeasy-medimum-gray) !important;
+}
+.edit-button-color:hover {
+    color: #fbbc0b !important;
+}
+.labels-table a.delete-button-color {
+    color: #93c5fd !important;
+}
+.labels-table a.delete-button-color:hover {
+    color: #ff4d4f !important;
+}
+.labels-table a.edit-button-color {
+    color: #93c5fd !important;
+}
+.labels-table a.edit-button-color:hover {
+    color: #fbbc0b !important;
+}
+.recordings-table .table-actions:not(.editable) a.delete-button-color:hover {
+    color: #ff4d4f !important;
+}
+.ant-alert-content {
+    margin-right: 5px;
+}
+.ant-input-number-rtl {
+    padding-right: 20px !important;
+}
+.space-color-picker {
+    color: rgba(0, 0, 0, 0.25);
+
+    opacity: 1;
+
+    width: 200px;
+
+    background-color: #ffffff;
+    background-image: none;
+    border-width: 1px;
+    border-style: solid;
+    border-color: #dddfe1;
+    border-radius: 6px;
+    padding: 4px 11px;
+}
+
+#administration_form {
+    padding: 50px 30px !important;
+}
+#administration_form .ant-col {
+    text-align: right;
+}
+#administration_form .ant-col-rtl {
+    text-align: left !important;
+}
+.loading {
+    margin-left: 50% !important;
+}
+#administration_form #submit-btn {
+    margin-top: 25px;
+}
+
+.ant-upload-list-item {
+    width: 80% !important;
+}
+.ant-upload-drag {
+    width: 80% !important;
+}
+.space-color-picker-branding {
+    color: rgba(0, 0, 0, 0.25);
+
+    opacity: 1;
+
+    width: 150px;
+
+    background-color: #ffffff;
+    background-image: none;
+    border-width: 1px;
+    border-style: solid;
+    border-color: #dddfe1;
+    border-radius: 6px;
+    padding: 4px 11px;
+}
+
+.code-color-picker-edit-label {
+    background: transparent;
+    border-radius: 3px;
+    width: 90px;
+}
+
+.input-status-presets {
+    background: transparent;
+    border: transparent;
+    width: 50px;
+}
+
+.space-color-picker-add-label {
+    position: relative;
+    display: inline-flex;
+    width: 95% !important;
+    min-width: 0;
+    padding: 4px 11px !important;
+    color: rgba(0, 0, 0, 0.88);
+    font-size: 14px;
+    line-height: 1.8714285714285714;
+    background-color: #ffffff;
+    background-image: none;
+    border-width: 1px;
+    border-style: solid;
+    border-color: #d9d9d9;
+    border-radius: 6px;
+    transition: all 0.2s;
+    opacity: 1;
+}
+
+.space-presets-border {
+    border: 1px solid #999;
+
+    display: inline-block;
+
+    border-radius: 2px;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+    box-shadow: 0 0 0 2px #fff inset;
+}
+.input-editable .ant-input-suffix .cell-input-cancel-record {
+    width: 100% !important;
+    height: 100% !important;
+}
+.input-editable .ant-input-suffix .cell-input-save-record {
+    width: 100% !important;
+    height: 100% !important;
+}
+.room-details .disableStart {
+    font-size: 20px !important;
+    font-weight: 600;
+    clip-path: polygon(48% 0, 52% 0, 95% 25%, 95% 75%, 52% 100%, 48% 100%, 5% 75%, 5% 25%);
+    border-radius: 50%;
+    background-color: #d4d4d4 !important;
+    cursor: not-allowed;
+}
+.edit-room-form {
+    display: block !important;
+}
+.room-title {
+    max-width: 150px !important;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.room-labels {
+    word-break: break-all;
+    max-width: max-content !important;
+    overflow: hidden;
+    text-overflow: unset;
+    max-height: 24px;
+}
+.room-label {
+    max-width: 120px !important;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+div.error-message-Label {
+    max-width: max-content;
+    margin-bottom: 10px;
+    margin-left: 10px;
+}
+.preset-name {
+    max-width: 120px !important;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.ant-table-cell {
+    max-width: 150px !important;
+}
+/*****************ROOM DETAILS PAGE - BLUE DESIGN*****************/
+/* Main room card */
+.room-details.gray-bg {
+    background: linear-gradient(145deg, #10203f 0%, #0d1b33 100%) !important;
+    border: 1px solid rgba(96, 165, 250, 0.25) !important;
+    border-radius: 14px !important;
+    box-shadow: 0 10px 34px rgba(37, 99, 235, 0.18);
+}
+.room-details h3.ant-typography {
+    color: #ffffff !important;
+    font-weight: 600;
+}
+.room-details .ant-form-item-label label {
+    color: #cbd5e1 !important;
+}
+.room-details .ant-input,
+.room-details .ant-input-affix-wrapper {
+    background: #0b1526 !important;
+    border-color: rgba(96, 165, 250, 0.4) !important;
+    color: #e2e8f0 !important;
+}
+.room-details .ant-input::placeholder {
+    color: rgba(148, 163, 184, 0.9) !important;
+}
+.room-details .ant-input-affix-wrapper .anticon:not(.text-success) {
+    color: #93c5fd !important;
+}
+.room-details .ant-select-selector {
+    background: #0b1526 !important;
+    border-color: rgba(96, 165, 250, 0.4) !important;
+}
+.room-details .ant-select-selection-item {
+    color: #e2e8f0 !important;
+}
+.room-details .edit-btn {
+    color: #93c5fd !important;
+}
+.room-details .edit-btn:hover {
+    color: #fbbc0b !important;
+}
+.room-details .medias .anticon {
+    color: #93c5fd !important;
+}
+.room-details .medias .anticon:hover {
+    color: #fbbc0b !important;
+}
+.room-details .medias .social-icon {
+    width: 20px !important;
+    height: 20px !important;
+    display: block;
+    border-radius: 4px;
+    transition: transform 0.2s ease, filter 0.2s ease;
+}
+.room-details .medias a:hover .social-icon {
+    transform: scale(1.12);
+    filter: drop-shadow(0 0 6px rgba(96, 165, 250, 0.55));
+}
+/* Presentations card */
+.room-presentations.gray-bg {
+    background: linear-gradient(145deg, #10203f 0%, #0d1b33 100%) !important;
+    border: 1px solid rgba(96, 165, 250, 0.25) !important;
+    border-radius: 14px !important;
+    box-shadow: 0 10px 34px rgba(37, 99, 235, 0.18);
+}
+.room-presentations h5.ant-typography {
+    color: #ffffff !important;
+}
+.room-presentations .ant-upload.ant-upload-select {
+    background: #0b1526 !important;
+    border-color: rgba(96, 165, 250, 0.35) !important;
+}
+.room-presentations .ant-upload.ant-upload-select .anticon-plus,
+.room-presentations .ant-upload.ant-upload-select .upload-file {
+    color: #93c5fd !important;
+}
+/* Recordings section title + filter */
+.room-recordings h4.ant-typography {
+    color: #ffffff !important;
+}
+.room-recordings .search-input,
+.room-recordings .search-input input,
+.room-recordings .search-input.ant-input-affix-wrapper:hover,
+.room-recordings .search-input.ant-input-affix-wrapper:focus {
+    background: rgba(8, 18, 46, 0.9) !important;
+    border: 1px solid rgba(96, 165, 250, 0.16);
+    box-shadow: 0 12px 24px rgba(2, 6, 23, 0.16);
+}
+.room-recordings .search-input.ant-input-affix-wrapper-focused {
+    border-color: rgba(56, 189, 248, 0.72) !important;
+    box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.08);
+}
+.room-recordings .search-input input,
+.room-recordings .search-input input::placeholder {
+    color: rgba(148, 163, 184, 0.9) !important;
+    -webkit-text-fill-color: rgba(148, 163, 184, 0.9);
+}
+.room-recordings .search-input .anticon-search,
+.room-recordings .search-input .ant-input-clear-icon {
+    color: rgba(148, 163, 184, 0.9) !important;
+}
+/* Recording cards */
+.room-recordings-body .ant-card {
+    background: linear-gradient(145deg, #10203f 0%, #0d1b33 100%) !important;
+    border: 1px solid rgba(96, 165, 250, 0.25) !important;
+    border-radius: 14px !important;
+    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
+}
+.room-recordings-body .ant-card:not(:hover) {
+    box-shadow: 0 10px 34px rgba(37, 99, 235, 0.18);
+}
+.room-recordings-body .ant-card:hover {
+    border-color: rgba(96, 165, 250, 0.55) !important;
+    box-shadow: 0 16px 44px rgba(37, 99, 235, 0.32);
+    transform: translateY(-3px);
+}
+.room-recordings-body .file-size {
+    color: #94a3b8 !important;
+}
+.room-recordings .ant-empty-description {
+    color: rgba(148, 163, 184, 0.9) !important;
+}
+.room-details-search-input input,
+.room-details-search-input input::placeholder {
+    color: rgba(148, 163, 184, 0.9) !important;
+    -webkit-text-fill-color: rgba(148, 163, 184, 0.9);
+}
+.room-details-search-input .ant-input-clear-icon,
+.room-details-search-input .anticon-search {
+    color: rgba(148, 163, 184, 0.9) !important;
+}
+/*****************NEW ROOM MODAL - BLUE DESIGN*****************/
+.add-modal.large-modal .ant-modal-content {
+    background: linear-gradient(145deg, #10203f 0%, #0d1b33 100%) !important;
+    border: 1px solid rgba(96, 165, 250, 0.25) !important;
+    border-radius: 14px !important;
+    box-shadow: 0 14px 44px rgba(37, 99, 235, 0.28);
+}
+.add-modal.large-modal .ant-modal-header {
+    background: transparent !important;
+    border-bottom: 1px solid rgba(96, 165, 250, 0.14) !important;
+}
+.add-modal.large-modal .ant-modal-title {
+    color: #ffffff !important;
+    font-weight: 600;
+}
+.add-modal.large-modal .ant-modal-close {
+    color: #93c5fd !important;
+}
+.add-modal.large-modal .ant-modal-close:hover {
+    color: #fbbc0b !important;
+}
+.add-modal.large-modal .ant-form-item-label label {
+    color: #cbd5e1 !important;
+}
+.add-modal.large-modal .ant-input,
+.add-modal.large-modal .ant-input-affix-wrapper {
+    background: #0b1526 !important;
+    border-color: rgba(96, 165, 250, 0.4) !important;
+    color: #e2e8f0 !important;
+}
+.add-modal.large-modal .ant-input::placeholder {
+    color: rgba(148, 163, 184, 0.9) !important;
+}
+.add-modal.large-modal .ant-input-group-addon {
+    background: #0f1f3d !important;
+    border-color: rgba(96, 165, 250, 0.4) !important;
+    color: #93c5fd !important;
+}
+.add-modal.large-modal .readonly-item input {
+    background-color: #0b1526 !important;
+    color: #e2e8f0 !important;
+}
+.add-modal.large-modal .readonly-item button {
+    background-color: #0f1f3d !important;
+    color: #93c5fd !important;
+}
+.add-modal.large-modal .readonly-item button:hover {
+    color: #fbbc0b !important;
+}
+.add-modal.large-modal .ant-select-selector {
+    background: #0b1526 !important;
+    border-color: rgba(96, 165, 250, 0.4) !important;
+}
+.add-modal.large-modal .ant-select-selection-item,
+.add-modal.large-modal .ant-select-selection-placeholder {
+    color: #e2e8f0 !important;
+}
+.add-modal.large-modal .ant-select-arrow {
+    color: #93c5fd !important;
+}
+.add-modal.large-modal .cancel-btn {
+    background: rgba(71, 85, 105, 0.4) !important;
+    border-color: rgba(96, 165, 250, 0.25) !important;
+    color: #cbd5e1 !important;
+}
+.add-modal.large-modal .cancel-btn:hover,
+.add-modal.large-modal .cancel-btn:focus {
+    background: rgba(71, 85, 105, 0.6) !important;
+    color: #ffffff !important;
+}
+.add-modal.large-modal .ant-btn-primary {
+    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
+    border-color: #2563eb !important;
+    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35);
+}
+.add-modal.large-modal .ant-btn-primary:hover,
+.add-modal.large-modal .ant-btn-primary:focus {
+    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
+    border-color: #3b82f6 !important;
+}
+/* Blurred dark mask behind the New Room modal */
+.ant-modal-root:has(.ant-modal.add-modal.large-modal) > .ant-modal-mask {
+    background-color: rgba(2, 6, 23, 0.55) !important;
+    -webkit-backdrop-filter: blur(5px);
+    backdrop-filter: blur(5px);
+}
+/*****************NEW PRESET / NEW LABEL MODALS - BLUE DESIGN*****************/
+.preset-add-modal .ant-modal-content,
+.label-add-modal .ant-modal-content {
+    background: linear-gradient(145deg, #10203f 0%, #0d1b33 100%) !important;
+    border: 1px solid rgba(96, 165, 250, 0.25) !important;
+    border-radius: 14px !important;
+    box-shadow: 0 14px 44px rgba(37, 99, 235, 0.28);
+}
+.preset-add-modal .ant-modal-header,
+.label-add-modal .ant-modal-header {
+    background: transparent !important;
+    border-bottom: 1px solid rgba(96, 165, 250, 0.14) !important;
+}
+.preset-add-modal .ant-modal-title,
+.label-add-modal .ant-modal-title {
+    color: #ffffff !important;
+    font-weight: 600;
+}
+.preset-add-modal .ant-modal-close,
+.label-add-modal .ant-modal-close {
+    color: #93c5fd !important;
+}
+.preset-add-modal .ant-modal-close:hover,
+.label-add-modal .ant-modal-close:hover {
+    color: #fbbc0b !important;
+}
+.preset-add-modal .ant-form-item-label label,
+.label-add-modal .ant-form-item-label label {
+    color: #cbd5e1 !important;
+}
+.preset-add-modal .ant-input,
+.preset-add-modal .ant-input-affix-wrapper,
+.label-add-modal .ant-input,
+.label-add-modal .ant-input-affix-wrapper {
+    background: #0b1526 !important;
+    border-color: rgba(96, 165, 250, 0.4) !important;
+    color: #e2e8f0 !important;
+}
+.preset-add-modal .ant-input::placeholder,
+.label-add-modal .ant-input::placeholder {
+    color: rgba(148, 163, 184, 0.9) !important;
+}
+.preset-add-modal .space-color-picker-add-label,
+.label-add-modal .space-color-picker-add-label {
+    background-color: #0b1526 !important;
+    border-color: rgba(96, 165, 250, 0.4) !important;
+    color: #e2e8f0 !important;
+}
+.preset-add-modal .cancel-btn,
+.label-add-modal .cancel-btn {
+    background: rgba(71, 85, 105, 0.4) !important;
+    border-color: rgba(96, 165, 250, 0.25) !important;
+    color: #cbd5e1 !important;
+}
+.preset-add-modal .cancel-btn:hover,
+.preset-add-modal .cancel-btn:focus,
+.label-add-modal .cancel-btn:hover,
+.label-add-modal .cancel-btn:focus {
+    background: rgba(71, 85, 105, 0.6) !important;
+    color: #ffffff !important;
+}
+.preset-add-modal .ant-btn-primary,
+.label-add-modal .ant-btn-primary {
+    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
+    border-color: #2563eb !important;
+    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35);
+}
+.preset-add-modal .ant-btn-primary:hover,
+.preset-add-modal .ant-btn-primary:focus,
+.label-add-modal .ant-btn-primary:hover,
+.label-add-modal .ant-btn-primary:focus {
+    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
+    border-color: #3b82f6 !important;
+}
+/* Blurred dark mask behind the New Preset / New Label modals */
+.ant-modal-root:has(.ant-modal.preset-add-modal) > .ant-modal-mask,
+.ant-modal-root:has(.ant-modal.label-add-modal) > .ant-modal-mask {
+    background-color: rgba(2, 6, 23, 0.55) !important;
+    -webkit-backdrop-filter: blur(5px);
+    backdrop-filter: blur(5px);
+}
+/*****************NEW USER MODAL - BLUE DESIGN*****************/
+.user-add-modal .ant-modal-content {
+    background: linear-gradient(145deg, #10203f 0%, #0d1b33 100%) !important;
+    border: 1px solid rgba(96, 165, 250, 0.25) !important;
+    border-radius: 14px !important;
+    box-shadow: 0 14px 44px rgba(37, 99, 235, 0.28);
+}
+.user-add-modal .ant-modal-header {
+    background: transparent !important;
+    border-bottom: 1px solid rgba(96, 165, 250, 0.14) !important;
+}
+.user-add-modal .ant-modal-title {
+    color: #ffffff !important;
+    font-weight: 600;
+}
+.user-add-modal .ant-modal-close {
+    color: #93c5fd !important;
+}
+.user-add-modal .ant-modal-close:hover {
+    color: #fbbc0b !important;
+}
+.user-add-modal .ant-form-item-label label {
+    color: #cbd5e1 !important;
+}
+.user-add-modal .ant-input,
+.user-add-modal .ant-input-affix-wrapper {
+    background: #0b1526 !important;
+    border-color: rgba(96, 165, 250, 0.4) !important;
+    color: #e2e8f0 !important;
+}
+.user-add-modal .ant-input::placeholder,
+.user-add-modal .ant-input-affix-wrapper input::placeholder {
+    color: rgba(148, 163, 184, 0.9) !important;
+}
+.user-add-modal .ant-input-affix-wrapper input {
+    background: transparent !important;
+    color: #e2e8f0 !important;
+}
+/* Make the password field exactly the same size as the email field */
+.user-add-modal .ant-input-affix-wrapper {
+    height: 32px !important;
+    padding: 4px 11px !important;
+    line-height: 22px !important;
+    font-size: 14px !important;
+    box-sizing: border-box !important;
+    align-items: center !important;
+}
+.user-add-modal .ant-input-affix-wrapper .ant-input {
+    height: auto !important;
+    padding: 0 !important;
+    line-height: 22px !important;
+}
+/* Gray eye icon (show/hide password) */
+.user-add-modal .ant-input-suffix,
+.user-add-modal .ant-input-password-icon {
+    color: rgba(148, 163, 184, 0.9) !important;
+    font-size: 15px;
 }
-.install-form.ant-form-rtl .color-palette-picker-value {
-    margin-right: 10px;
+.user-add-modal .ant-input-password-icon:hover {
+    color: #fbbc0b !important;
 }
-/*******STEP3*******/
-.final-form-header {
-    margin: 20px 0 !important;
+/* Reset the installer padding on the password Form.Item so the field
+   has exactly the same width as the email field */
+.user-add-modal .password-install {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+}
+.user-add-modal .ant-select-selector {
+    background: #0b1526 !important;
+    border-color: rgba(96, 165, 250, 0.4) !important;
+}
+.user-add-modal .ant-select-selection-item,
+.user-add-modal .ant-select-selection-placeholder {
+    color: #e2e8f0 !important;
+}
+.user-add-modal .ant-select-arrow {
+    color: #93c5fd !important;
+}
+.user-add-modal .cancel-btn {
+    background: rgba(71, 85, 105, 0.4) !important;
+    border-color: rgba(96, 165, 250, 0.25) !important;
+    color: #cbd5e1 !important;
+}
+.user-add-modal .cancel-btn:hover,
+.user-add-modal .cancel-btn:focus {
+    background: rgba(71, 85, 105, 0.6) !important;
+    color: #ffffff !important;
+}
+.user-add-modal .ant-btn-primary {
+    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
+    border-color: #2563eb !important;
+    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35);
+}
+.user-add-modal .ant-btn-primary:hover,
+.user-add-modal .ant-btn-primary:focus {
+    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
+    border-color: #3b82f6 !important;
+}
+/* Blurred dark mask behind the New User modal */
+.ant-modal-root:has(.ant-modal.user-add-modal) > .ant-modal-mask {
+    background-color: rgba(2, 6, 23, 0.55) !important;
+    -webkit-backdrop-filter: blur(5px);
+    backdrop-filter: blur(5px);
+}
+/*****************BRANDING PAGE - WHITE TITLES / GRAY DETAILS*****************/
+.branding-page .form-header .ant-typography {
+    color: #ffffff !important;
+    font-weight: 600;
 }
-.settings-info {
-    margin: 20px !important;
+.branding-page .ant-form-item-label label {
+    color: #ffffff !important;
+}
+.branding-page .ant-upload.ant-upload-drag p.ant-upload-hint,
+.branding-page .ant-upload.ant-upload-drag .ant-typography,
+.branding-page .ant-upload-drag-icon .anticon,
+.branding-page .ant-upload-list-item-name,
+.branding-page .ant-upload-list-item .anticon,
+.branding-page .ant-upload-list-item-card-actions .anticon {
+    color: rgba(148, 163, 184, 0.9) !important;
+}
+.branding-page .space-color-picker-branding {
+    background-color: #0b1526 !important;
+    border-color: rgba(96, 165, 250, 0.4) !important;
+    color: #e2e8f0 !important;
+}
+.branding-search-input input,
+.branding-search-input input::placeholder {
+    color: rgba(148, 163, 184, 0.9) !important;
+    -webkit-text-fill-color: rgba(148, 163, 184, 0.9);
+}
+.branding-search-input .ant-input-clear-icon,
+.branding-search-input .anticon-search {
+    color: rgba(148, 163, 184, 0.9) !important;
+}
+.branding-page .ant-input,
+.branding-page .ant-input-affix-wrapper,
+.branding-page .ant-input-number {
+    background: #0b1526 !important;
+    border-color: rgba(96, 165, 250, 0.4) !important;
+    color: #e2e8f0 !important;
+}
+.branding-page .ant-input:hover,
+.branding-page .ant-input:focus,
+.branding-page .ant-input-focused,
+.branding-page .ant-input-affix-wrapper:hover,
+.branding-page .ant-input-affix-wrapper:focus,
+.branding-page .ant-input-affix-wrapper-focused,
+.branding-page .ant-input-number:hover,
+.branding-page .ant-input-number-focused {
+    border-color: rgba(56, 189, 248, 0.72) !important;
+    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.12);
+}
+.branding-page .ant-input::placeholder,
+.branding-page .ant-input-number-input::placeholder {
+    color: rgba(148, 163, 184, 0.9) !important;
+}
+.branding-page .ant-input-number .ant-input-number-handler-wrap {
+    background: #0f1f3d !important;
+    border-color: rgba(96, 165, 250, 0.25) !important;
+}
+.branding-page .ant-input-number-handler-up-inner,
+.branding-page .ant-input-number-handler-down-inner {
+    color: #93c5fd !important;
+}
+.branding-page .ant-input-number-handler-up:hover,
+.branding-page .ant-input-number-handler-down:hover {
+    height: 50% !important;
+}
+.branding-page .ant-input:disabled,
+.branding-page .ant-input-number-disabled {
+    background: rgba(15, 23, 42, 0.6) !important;
+    color: #64748b !important;
+}
+.preset-settings-search-input input,
+.preset-settings-search-input input::placeholder {
+    color: rgba(148, 163, 184, 0.9) !important;
+    -webkit-text-fill-color: rgba(148, 163, 184, 0.9);
+}
+.preset-settings-search-input .ant-input-clear-icon,
+.preset-settings-search-input .anticon-search {
+    color: rgba(148, 163, 184, 0.9) !important;
+}
+/*****************BIGBLUEBUTTON SETTINGS - BLUE DESIGN (v2)*****************/
+.preset-settings-row .final-form-header .ant-typography {
+    color: #ffffff !important;
+    font-weight: 600;
 }
-.install-form .ant-card:not(.ant-card-bordered) {
-    box-shadow: unset !important;
+.preset-settings-row .settings-info.ant-alert-warning {
+    background: rgba(15, 23, 42, 0.55) !important;
+    border: 1px solid rgba(96, 165, 250, 0.18) !important;
+    border-radius: 12px !important;
 }
-.install-form .ant-card:not(.ant-card-bordered) .ant-card-body {
-    padding: unset !important;
+.preset-settings-row .settings-info .ant-alert-message {
+    color: #cbd5e1 !important;
 }
-.presets-grid {
-    width: 25% !important;
+.preset-settings-row .settings-info .ant-alert-close-icon,
+.preset-settings-row .settings-info .ant-alert-close-icon * {
+    color: rgba(148, 163, 184, 0.9) !important;
+}
+.preset-settings-row .install-form .ant-card:not(.ant-card-bordered) {
+    background: transparent !important;
+    border: none !important;
     box-shadow: none !important;
+    padding: 0;
 }
-.presets-grid .ant-card-meta {
-    align-items: center;
-    display: inline-flex !important;
+.preset-settings-row .presets-grid {
+    width: calc(25% - 20px) !important;
+    margin: 10px;
+    background: linear-gradient(145deg, #16264a 0%, #0e1c36 100%) !important;
+    border: 1px solid rgba(96, 165, 250, 0.22) !important;
+    border-radius: 14px !important;
+    box-shadow: 0 8px 24px rgba(2, 6, 23, 0.35);
+    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
+}
+.preset-settings-row .presets-grid:hover {
+    border-color: rgba(96, 165, 250, 0.55) !important;
+    box-shadow: 0 14px 36px rgba(37, 99, 235, 0.3);
+    transform: translateY(-4px);
+}
+.preset-settings-row .presets-grid .ant-card-meta-title {
+    color: #ffffff !important;
+    font-weight: 600;
 }
-/*.presets-grid .ant-card-meta .ant-card-meta-avatar {
-  width: 38px !important;
-  height: 38px !important;
-}*/
-.presets-grid .ant-card-meta .ant-card-meta-title {
-    white-space: unset;
-    text-overflow: unset;
-    font-weight: unset;
-    font-size: 14.5px;
+.preset-settings-row .presets-grid .PresetIcon {
+    box-shadow: 0 4px 14px rgba(251, 188, 11, 0.35);
 }
-.presets-grid.ant-card-grid-hoverable:hover {
-    background: #fffce6;
-    cursor: pointer;
-    border-radius: 10px;
+/* Preset settings modal (scoped to this page only) */
+.ant-modal-root:has(.ant-modal.preset-settings-modal) .ant-modal-content {
+    background: linear-gradient(145deg, #10203f 0%, #0d1b33 100%) !important;
+    border: 1px solid rgba(96, 165, 250, 0.25) !important;
+    border-radius: 14px !important;
+    box-shadow: 0 14px 44px rgba(37, 99, 235, 0.28);
 }
-.PresetIcon {
-    font-size: 18px !important;
-    padding: 10px;
-    color: white;
-    background: #fbbc0b;
-    clip-path: polygon(48% 0, 52% 0, 95% 25%, 95% 75%, 52% 100%, 48% 100%, 5% 75%, 5% 25%);
-    border-radius: 50%;
+.ant-modal-root:has(.ant-modal.preset-settings-modal) .ant-modal-title {
+    color: #ffffff !important;
+    font-weight: 600;
 }
-/*.PresetIcon img {
-  width: 19px;
-}*/
-.presets-modal {
-    width: 35% !important;
+.ant-modal-root:has(.ant-modal.preset-settings-modal) label {
+    color: #ffffff !important;
 }
-.white-space {
-    white-space: pre-wrap;
-    text-align: left;
-    width: 260px;
+.ant-modal-root:has(.ant-modal.preset-settings-modal) .ant-switch {
+    background: #0f1f3d !important;
+    border: 1px solid rgba(96, 165, 250, 0.4) !important;
 }
-.presets-modal .ant-modal-content {
-    margin: 0 30px;
+.ant-modal-root:has(.ant-modal.preset-settings-modal) .ant-switch-checked {
+    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
+    border-color: #2563eb !important;
+    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
 }
-.presets-modal label {
-    color: var(--bbbeasy-darken-gray) !important;
-    font-weight: 500;
+.ant-modal-root:has(.ant-modal.preset-settings-modal) .ant-switch .ant-switch-handle::before,
+.ant-modal-root:has(.ant-modal.preset-settings-modal) .ant-switch-checked .ant-switch-handle::before {
+    background-color: #ffffff !important;
 }
-.presets-modal label::after {
-    content: '' !important;
+.ant-modal-root:has(.ant-modal.preset-settings-modal) .input-status-presets {
+    background: transparent !important;
+    border: transparent !important;
+    color: #cbd5e1 !important;
+    width: 50px;
 }
-.presets-modal .presets-body {
-    padding: 20px;
+.ant-modal-root:has(.ant-modal.preset-settings-modal) .ant-modal-header {
+    background: transparent !important;
 }
-.presets-modal .presets-body .ant-form-item-control:not(.ant-col-rtl) {
-    text-align: right;
+.ant-modal-root:has(.ant-modal.preset-settings-modal) .ant-modal-close {
+    color: rgba(148, 163, 184, 0.9) !important;
 }
-.presets-modal .presets-body .ant-form-item-control.ant-col-rtl {
-    text-align: left;
+/*****************USERS PAGE - BLUE DESIGN*****************/
+.users-page-header .ant-page-header-heading-title {
+    color: #ffffff !important;
 }
-.presets-modal .ant-modal-footer {
-    text-align: center !important;
-    border-top: unset;
+.users-search-input input,
+.users-search-input input::placeholder {
+    color: rgba(148, 163, 184, 0.9) !important;
+    -webkit-text-fill-color: rgba(148, 163, 184, 0.9);
 }
-.presets-modal .ant-modal-footer button {
-    width: 70%;
+.users-search-input .ant-input-clear-icon,
+.users-search-input .anticon-search {
+    color: rgba(148, 163, 184, 0.9) !important;
 }
-/*******************PAGE NOT FOUND*************/
-.page-not-found {
-    padding: 60px 32px !important;
+.users-table .ant-table {
+    background: transparent;
+    border-radius: 14px;
+    overflow: hidden;
+    box-shadow: 0 10px 34px rgba(37, 99, 235, 0.22);
 }
-/**********************NOTIFICATIONS*******************/
-.progress-bar {
-    height: 8px;
-    margin-top: 15px;
+.users-table .ant-table-container {
+    border: 1px solid rgba(96, 165, 250, 0.25) !important;
+    border-radius: 14px !important;
 }
-.percentage {
-    display: block;
-    height: 100%;
-    width: 100%;
-    background-color: var(--bbbeasy-medimum-gray);
-    animation: progress 4500ms ease-in 1;
+.users-table .ant-table-thead > tr > th {
+    background: linear-gradient(135deg, #172554 0%, #1d4ed8 100%) !important;
+    color: #ffffff !important;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    border-bottom: 1px solid rgba(96, 165, 250, 0.35) !important;
 }
-.percentage.notif-login {
-    animation: progress 2500ms ease-in 1;
+.users-table .ant-table-thead > tr > th .ant-table-column-sorter {
+    color: rgba(255, 255, 255, 0.45);
 }
-@keyframes progress {
-    from {
-        width: 0;
-    }
+.users-table .ant-table-thead > tr > th.ant-table-column-has-sorters:hover .ant-table-column-sorter {
+    color: rgba(255, 255, 255, 0.9);
 }
-/***********************BRANDINGS**********************/
-.branding-row,
-.preset-settings-row {
-    align-items: center;
-    min-height: 50vh;
+.users-table .ant-table-thead > tr > th .ant-table-filter-trigger {
+    color: rgba(255, 255, 255, 0.65);
 }
-.button-padding {
-    padding: 0 20% !important;
+.users-table .ant-table-thead > tr > th .ant-table-filter-trigger:hover {
+    color: #ffffff;
 }
-/***********************PROFILE***********************************/
-.site-page-form {
-    padding: 16px 24px !important;
+.users-table .ant-table-thead > tr > th .ant-table-filter-trigger.active {
+    color: #fbbc0b;
 }
-.profile-form .bbbeasy-btn {
-    clip-path: polygon(48% 0, 52% 0, 95% 25%, 95% 75%, 52% 100%, 48% 100%, 5% 75%, 5% 25%);
-    background-color: #fbbc0b;
-    color: black;
+.users-table .ant-table-tbody > tr > td {
+    background: #0d1b33 !important;
+    color: #cbd5e1 !important;
+    border-bottom: 1px solid rgba(96, 165, 250, 0.14) !important;
 }
-.profile-form .custom-badge-bg {
-    -webkit-clip-path: polygon(48% 0, 52% 0, 95% 25%, 95% 75%, 52% 100%, 48% 100%, 5% 75%, 5% 25%);
-    clip-path: polygon(48% 0, 52% 0, 95% 25%, 95% 75%, 52% 100%, 48% 100%, 5% 75%, 5% 25%);
-    background: #fbbc0b;
-    font-size: 19px !important;
-    margin-top: 16px;
-    right: 32px !important;
+.users-table .ant-table-tbody > tr.ant-table-row:nth-child(even) > td {
+    background: #0f1f3d !important;
 }
-.profile-form .ant-badge-rtl .custom-badge-bg {
-    left: 32px !important;
+.users-table .ant-table-tbody > tr.ant-table-row:hover > td,
+.users-table .ant-table-tbody > tr.ant-table-row:hover > td.ant-table-cell-row-hover,
+.users-table .ant-table-tbody > tr > td.ant-table-cell-row-hover {
+    background: rgba(37, 99, 235, 0.24) !important;
 }
-.profile-form .custom-badge {
-    -webkit-clip-path: polygon(48% 0, 52% 0, 95% 25%, 95% 75%, 52% 100%, 48% 100%, 5% 75%, 5% 25%);
-    clip-path: polygon(48% 0, 52% 0, 95% 25%, 95% 75%, 52% 100%, 48% 100%, 5% 75%, 5% 25%);
-    background: white;
-    position: absolute;
-    top: 0.5px;
-    left: 0.5px;
-    right: 0.5px;
-    bottom: 0.5px;
-    width: 38px;
-    height: 38px;
+.users-table .ant-table-tbody > tr.ant-table-placeholder > td {
+    background: #0d1b33 !important;
+}
+.users-table .ant-table-placeholder .ant-empty-description {
+    color: #94a3b8;
+}
+.users-table a.edit-button-color {
+    color: #93c5fd !important;
+}
+.users-table a.edit-button-color:hover {
+    color: #fbbc0b !important;
+}
+.users-table a.delete-button-color {
+    color: #93c5fd !important;
+}
+.users-table a.delete-button-color:hover {
+    color: #ff4d4f !important;
+}
+.users-table .ant-input {
+    background: #0b1526 !important;
+    border-color: rgba(96, 165, 250, 0.4) !important;
+    color: #e2e8f0 !important;
+}
+.users-table .ant-input::placeholder {
+    color: #64748b !important;
+}
+.users-table .ant-pagination .ant-pagination-item,
+.users-table .ant-pagination .ant-pagination-prev .ant-pagination-item-link,
+.users-table .ant-pagination .ant-pagination-next .ant-pagination-item-link {
+    background: transparent !important;
+    border-color: rgba(96, 165, 250, 0.35) !important;
+}
+.users-table .ant-pagination .ant-pagination-item a {
+    color: #93c5fd !important;
+}
+.users-table .ant-pagination .ant-pagination-prev .ant-pagination-item-link,
+.users-table .ant-pagination .ant-pagination-next .ant-pagination-item-link {
+    color: #93c5fd !important;
+}
+.users-table .ant-pagination .ant-pagination-item-active {
+    background: #1d4ed8 !important;
+    border-color: #1d4ed8 !important;
+}
+.users-table .ant-pagination .ant-pagination-item-active a {
+    color: #ffffff !important;
+}
+.users-table .ant-table-cell mark {
+    background-color: #ffcf33;
+    color: #1e293b;
+}
+.users-table .ant-tag {
+    border-radius: 999px;
+    padding: 2px 14px;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    border: 1px solid;
+    text-transform: capitalize;
+}
+.users-table .ant-tag-success {
+    background: rgba(34, 197, 94, 0.16) !important;
+    border-color: rgba(34, 197, 94, 0.55) !important;
+    color: #4ade80 !important;
+}
+.users-table .ant-tag-error {
+    background: rgba(239, 68, 68, 0.16) !important;
+    border-color: rgba(239, 68, 68, 0.55) !important;
+    color: #f87171 !important;
+}
+.users-table .ant-tag-warning {
+    background: rgba(245, 158, 11, 0.16) !important;
+    border-color: rgba(245, 158, 11, 0.55) !important;
+    color: #fbbf24 !important;
+}
+.users-table .ant-tag-default {
+    background: rgba(148, 163, 184, 0.16) !important;
+    border-color: rgba(148, 163, 184, 0.45) !important;
+    color: #94a3b8 !important;
+}
+.users-table .ant-tag-success::before,
+.users-table .ant-tag-error::before,
+.users-table .ant-tag-warning::before {
+    content: '';
+    display: inline-block;
+    width: 7px;
+    height: 7px;
     border-radius: 50%;
+    margin-right: 7px;
+    vertical-align: middle;
+    box-shadow: 0 0 8px currentColor;
 }
-
-/*********************RECORDINGS********************/
-.recording-formats .icon-bbbeasy-playback-presentation,
-.recording-formats .icon-bbbeasy-playback-podcast,
-.recording-formats .anticon-desktop,
-.recording-formats .icon-bbbeasy-activity-reports {
-    font-size: 17px;
+.users-table .ant-tag-success::before {
+    background: #4ade80;
 }
-
-.recording-formats .icon-bbbeasy-mp4 {
-    font-size: 24px;
+.users-table .ant-tag-error::before {
+    background: #f87171;
 }
-
-.recording-formats .icon-desktop {
-    height: 12px;
+.users-table .ant-tag-warning::before {
+    background: #fbbf24;
 }
-
-.recording-formats .icon-disabled {
-    color: var(--bbbeasy-medimum-gray) !important;
+.ant-modal-root:has(.ant-modal.preset-settings-modal) .ant-modal-footer .cancel-btn {
+    background: rgba(71, 85, 105, 0.4) !important;
+    border-color: rgba(96, 165, 250, 0.25) !important;
+    color: #cbd5e1 !important;
 }
-
-.share-modal {
-    padding: 0 30px !important;
-    text-align: center !important;
+.ant-modal-root:has(.ant-modal.preset-settings-modal) .ant-modal-footer .ant-btn-primary {
+    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
+    border-color: #2563eb !important;
 }
-
-.share-modal .modal-content {
-    width: 80% !important;
+.ant-modal-root:has(.ant-modal.preset-settings-modal) > .ant-modal-mask {
+    background-color: rgba(2, 6, 23, 0.55) !important;
+    -webkit-backdrop-filter: blur(5px);
+    backdrop-filter: blur(5px);
 }
-
-.share-modal .recording-formats .anticon:not(.icon-disabled) .icon-bbbeasy-playback-presentation,
-.share-modal .recording-formats .anticon:not(.icon-disabled) .icon-bbbeasy-playback-podcast,
-.share-modal .recording-formats .anticon-desktop:not(.icon-disabled),
-.share-modal .recording-formats .anticon:not(.icon-disabled) .icon-bbbeasy-activity-reports {
-    font-size: 25px;
+/*****************ROLES PAGE - BLUE DESIGN*****************/
+.roles-page-header .ant-page-header-heading-title {
+    color: #ffffff !important;
 }
-.share-modal .recording-formats .icon-disabled .icon-bbbeasy-playback-presentation,
-.share-modal .recording-formats .icon-disabled .icon-bbbeasy-playback-podcast,
-.share-modal .recording-formats .anticon-desktop.icon-disabled,
-.share-modal .recording-formats .icon-disabled .icon-bbbeasy-activity-reports {
-    font-size: 22px;
+.roles-search-input input,
+.roles-search-input input::placeholder {
+    color: rgba(148, 163, 184, 0.9) !important;
+    -webkit-text-fill-color: rgba(148, 163, 184, 0.9);
+}
+.roles-search-input .ant-input-clear-icon,
+.roles-search-input .anticon-search {
+    color: rgba(148, 163, 184, 0.9) !important;
+}
+.roles-table .ant-table {
+    background: transparent;
+    border-radius: 14px;
+    overflow: hidden;
+    box-shadow: 0 10px 34px rgba(37, 99, 235, 0.22);
+}
+.roles-table .ant-table-container {
+    border: 1px solid rgba(96, 165, 250, 0.25) !important;
+    border-radius: 14px !important;
+}
+.roles-table .ant-table-thead > tr > th {
+    background: linear-gradient(135deg, #172554 0%, #1d4ed8 100%) !important;
+    color: #ffffff !important;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    border-bottom: 1px solid rgba(96, 165, 250, 0.35) !important;
+}
+.roles-table .ant-table-thead > tr > th .ant-table-column-sorter {
+    color: rgba(255, 255, 255, 0.45);
+}
+.roles-table .ant-table-thead > tr > th.ant-table-column-has-sorters:hover .ant-table-column-sorter {
+    color: rgba(255, 255, 255, 0.9);
+}
+.roles-table .ant-table-thead > tr > th .ant-table-filter-trigger {
+    color: rgba(255, 255, 255, 0.65);
+}
+.roles-table .ant-table-thead > tr > th .ant-table-filter-trigger:hover {
+    color: #ffffff;
+}
+.roles-table .ant-table-thead > tr > th .ant-table-filter-trigger.active {
+    color: #fbbc0b;
+}
+.roles-table .ant-table-tbody > tr > td {
+    background: #0d1b33 !important;
+    color: #cbd5e1 !important;
+    border-bottom: 1px solid rgba(96, 165, 250, 0.14) !important;
+}
+.roles-table .ant-table-tbody > tr.ant-table-row:nth-child(even) > td {
+    background: #0f1f3d !important;
+}
+.roles-table .ant-table-tbody > tr.ant-table-row:hover > td,
+.roles-table .ant-table-tbody > tr.ant-table-row:hover > td.ant-table-cell-row-hover,
+.roles-table .ant-table-tbody > tr > td.ant-table-cell-row-hover {
+    background: rgba(37, 99, 235, 0.24) !important;
+}
+.roles-table .ant-table-tbody > tr.ant-table-placeholder > td {
+    background: #0d1b33 !important;
+}
+.roles-table .ant-table-placeholder .ant-empty-description {
+    color: #94a3b8;
+}
+.roles-table a.edit-button-color,
+.roles-table .table-actions a {
+    color: #93c5fd !important;
+}
+.roles-table .table-actions a.permissions-link:hover {
+    color: #fbbc0b !important;
+}
+.roles-table a.delete-button-color:hover {
+    color: #ff4d4f !important;
+}
+.roles-table .ant-input {
+    background: #0b1526 !important;
+    border-color: rgba(96, 165, 250, 0.4) !important;
+    color: #e2e8f0 !important;
+}
+.roles-table .ant-input::placeholder {
+    color: #64748b !important;
+}
+.roles-table .ant-pagination .ant-pagination-item,
+.roles-table .ant-pagination .ant-pagination-prev .ant-pagination-item-link,
+.roles-table .ant-pagination .ant-pagination-next .ant-pagination-item-link {
+    background: transparent !important;
+    border-color: rgba(96, 165, 250, 0.35) !important;
+}
+.roles-table .ant-pagination .ant-pagination-item a {
+    color: #93c5fd !important;
+}
+.roles-table .ant-pagination .ant-pagination-prev .ant-pagination-item-link,
+.roles-table .ant-pagination .ant-pagination-next .ant-pagination-item-link {
+    color: #93c5fd !important;
+}
+.roles-table .ant-pagination .ant-pagination-item-active {
+    background: #1d4ed8 !important;
+    border-color: #1d4ed8 !important;
+}
+.roles-table .ant-pagination .ant-pagination-item-active a {
+    color: #ffffff !important;
+}
+.roles-table .ant-table-cell mark {
+    background-color: #ffcf33;
+    color: #1e293b;
+}
+/* Expanded permissions panel */
+.roles-table .ant-table-expanded-row > td {
+    background: #0d1b33 !important;
+}
+.roles-table .ant-table-expanded-row .bordered-card {
+    background: transparent;
+    border: none;
+    border-radius: 0;
+}
+.roles-table .ant-table-expanded-row .ant-card,
+.roles-add-modal .bordered-card .ant-card {
+    background: #0f1f3d !important;
+    border: 1px solid rgba(96, 165, 250, 0.22) !important;
+    border-radius: 10px !important;
+    margin-bottom: 10px !important;
+}
+.roles-table .ant-table-expanded-row .ant-card-head,
+.roles-add-modal .bordered-card .ant-card-head {
+    background: transparent !important;
+    border-bottom: 1px solid rgba(96, 165, 250, 0.18) !important;
+}
+.roles-table .ant-table-expanded-row .ant-card-head-title,
+.roles-add-modal .bordered-card .ant-card-head-title {
+    color: #ffffff !important;
+    font-weight: 600;
+}
+.roles-table .ant-table-expanded-row .ant-checkbox-wrapper:not(.ant-checkbox-wrapper-disabled),
+.roles-add-modal .bordered-card .ant-checkbox-wrapper:not(.ant-checkbox-wrapper-disabled) {
+    color: rgba(148, 163, 184, 0.9) !important;
+}
+.roles-table .ant-table-expanded-row .ant-checkbox-wrapper.ant-checkbox-wrapper-disabled,
+.roles-add-modal .bordered-card .ant-checkbox-wrapper.ant-checkbox-wrapper-disabled {
+    color: rgba(148, 163, 184, 0.45) !important;
+}
+.roles-table .ant-table-expanded-row .ant-checkbox-wrapper .ant-checkbox-label,
+.roles-add-modal .bordered-card .ant-checkbox-wrapper .ant-checkbox-label {
+    color: rgba(148, 163, 184, 0.9) !important;
+}
+.roles-table .ant-table-expanded-row .ant-checkbox-wrapper.ant-checkbox-wrapper-disabled .ant-checkbox-label,
+.roles-add-modal .bordered-card .ant-checkbox-wrapper.ant-checkbox-wrapper-disabled .ant-checkbox-label {
+    color: rgba(148, 163, 184, 0.45) !important;
+}
+.roles-table .ant-table-expanded-row .ant-checkbox-inner,
+.roles-add-modal .bordered-card .ant-checkbox-inner {
+    background-color: #1e293b !important;
+    border-color: rgba(148, 163, 184, 0.6) !important;
+}
+.roles-table .ant-table-expanded-row .ant-checkbox-wrapper:hover .ant-checkbox-inner,
+.roles-add-modal .bordered-card .ant-checkbox-wrapper:hover .ant-checkbox-inner {
+    border-color: rgba(148, 163, 184, 0.9) !important;
+}
+.roles-table .ant-table-expanded-row .ant-checkbox-checked .ant-checkbox-inner,
+.roles-add-modal .bordered-card .ant-checkbox-checked .ant-checkbox-inner {
+    background-color: #2563eb !important;
+    border-color: #2563eb !important;
+}
+.roles-table .ant-table-expanded-row .ant-checkbox-checked .ant-checkbox-inner::after,
+.roles-add-modal .bordered-card .ant-checkbox-checked .ant-checkbox-inner::after {
+    border-color: #ffffff !important;
+}
+.roles-table .ant-table-expanded-row .actions-expanded .cell-input-cancel {
+    background: rgba(71, 85, 105, 0.4) !important;
+    border-color: rgba(96, 165, 250, 0.25) !important;
+    color: #cbd5e1 !important;
+}
+.roles-table .ant-table-expanded-row .actions-expanded .ant-btn-primary {
+    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
+    border-color: #2563eb !important;
+}
+/* New Role modal - blue design (same as other add modals) */
+.roles-add-modal .ant-modal-content {
+    background: linear-gradient(145deg, #10203f 0%, #0d1b33 100%) !important;
+    border: 1px solid rgba(96, 165, 250, 0.25) !important;
+    border-radius: 14px !important;
+    box-shadow: 0 14px 44px rgba(37, 99, 235, 0.28);
+}
+.roles-add-modal .ant-modal-header {
+    background: transparent !important;
+    border-bottom: 1px solid rgba(96, 165, 250, 0.14) !important;
+}
+.roles-add-modal .ant-modal-title {
+    color: #ffffff !important;
+    font-weight: 600;
+}
+.roles-add-modal .ant-modal-close {
+    color: #93c5fd !important;
+}
+.roles-add-modal .ant-modal-close:hover {
+    color: #fbbc0b !important;
+}
+.roles-add-modal .ant-form-item-label label {
+    color: #cbd5e1 !important;
+}
+.roles-add-modal .ant-input {
+    background: #0b1526 !important;
+    border-color: rgba(96, 165, 250, 0.4) !important;
+    color: #e2e8f0 !important;
+}
+.roles-add-modal .ant-input::placeholder {
+    color: rgba(148, 163, 184, 0.9) !important;
+}
+.roles-add-modal .cancel-btn {
+    background: rgba(71, 85, 105, 0.4) !important;
+    border-color: rgba(96, 165, 250, 0.25) !important;
+    color: #cbd5e1 !important;
+}
+.roles-add-modal .cancel-btn:hover,
+.roles-add-modal .cancel-btn:focus {
+    background: rgba(71, 85, 105, 0.6) !important;
+    color: #ffffff !important;
+}
+.roles-add-modal .ant-btn-primary {
+    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
+    border-color: #2563eb !important;
+    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35);
+}
+.roles-add-modal .ant-btn-primary:hover,
+.roles-add-modal .ant-btn-primary:focus {
+    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
+    border-color: #3b82f6 !important;
+}
+.roles-add-modal .ant-form-item-label > label {
+    color: #cbd5e1 !important;
+}
+/* Blurred dark mask behind the New Role modal */
+.ant-modal-root:has(.ant-modal.roles-add-modal) > .ant-modal-mask {
+    background-color: rgba(2, 6, 23, 0.55) !important;
+    -webkit-backdrop-filter: blur(5px);
+    backdrop-filter: blur(5px);
+}
+/*****************ADMINISTRATION PAGE - BLUE DESIGN*****************/
+.administration-page-header .ant-page-header-heading-title {
+    color: #ffffff !important;
+    font-weight: 600;
+}
+.administration-search-input input,
+.administration-search-input input::placeholder {
+    color: rgba(148, 163, 184, 0.9) !important;
+    -webkit-text-fill-color: rgba(148, 163, 184, 0.9);
+}
+.administration-search-input .ant-input-clear-icon,
+.administration-search-input .anticon-search {
+    color: rgba(148, 163, 184, 0.9) !important;
+}
+.administration-page .step1 {
+    background: linear-gradient(145deg, #10203f 0%, #0d1b33 100%) !important;
+    border: 1px solid rgba(96, 165, 250, 0.35) !important;
+    border-radius: 14px !important;
+    box-shadow: 0 18px 45px rgba(2, 6, 23, 0.55), inset 0 0 0 1px rgba(96, 165, 250, 0.08) !important;
+}
+.administration-page .ant-form-item-label label {
+    color: #ffffff !important;
+    font-weight: 500;
+}
+.administration-page .ant-switch {
+    background: #0f1f3d !important;
+    border: 1px solid rgba(96, 165, 250, 0.4) !important;
+}
+.administration-page .ant-switch-checked {
+    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
+    border-color: #2563eb !important;
+    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
+}
+.administration-page .ant-switch .ant-switch-handle::before,
+.administration-page .ant-switch-checked .ant-switch-handle::before {
+    background-color: #ffffff !important;
+}
+.administration-page #submit-btn {
+    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
+    border-color: #2563eb !important;
+    color: #ffffff !important;
+    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35);
+}
+.administration-page #submit-btn:hover,
+.administration-page #submit-btn:focus {
+    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
+    border-color: #3b82f6 !important;
+    color: #ffffff !important;
+}
+/*****************PRESETS EDIT POPUP - BLUE DESIGN*****************/
+.ant-modal-root:has(.ant-modal.presets-edit-modal) .ant-modal-content {
+    background: linear-gradient(145deg, #10203f 0%, #0d1b33 100%) !important;
+    border: 1px solid rgba(96, 165, 250, 0.25) !important;
+    border-radius: 14px !important;
+    box-shadow: 0 14px 44px rgba(37, 99, 235, 0.28);
+}
+.ant-modal-root:has(.ant-modal.presets-edit-modal) .ant-modal-header {
+    background: transparent !important;
+}
+.ant-modal-root:has(.ant-modal.presets-edit-modal) .ant-modal-title {
+    color: #ffffff !important;
+    font-weight: 600;
+}
+.ant-modal-root:has(.ant-modal.presets-edit-modal) .ant-modal-close {
+    color: rgba(148, 163, 184, 0.9) !important;
+}
+.ant-modal-root:has(.ant-modal.presets-edit-modal) label {
+    color: #ffffff !important;
+}
+.ant-modal-root:has(.ant-modal.presets-edit-modal) .ant-switch {
+    background: #0f1f3d !important;
+    border: 1px solid rgba(96, 165, 250, 0.4) !important;
+}
+.ant-modal-root:has(.ant-modal.presets-edit-modal) .ant-switch-checked {
+    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
+    border-color: #2563eb !important;
+    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
+}
+.ant-modal-root:has(.ant-modal.presets-edit-modal) .ant-switch .ant-switch-handle::before,
+.ant-modal-root:has(.ant-modal.presets-edit-modal) .ant-switch-checked .ant-switch-handle::before {
+    background-color: #ffffff !important;
+}
+.ant-modal-root:has(.ant-modal.presets-edit-modal) .ant-input,
+.ant-modal-root:has(.ant-modal.presets-edit-modal) .ant-input-number,
+.ant-modal-root:has(.ant-modal.presets-edit-modal) .ant-select .ant-select-selector {
+    background: #0b1526 !important;
+    border-color: rgba(96, 165, 250, 0.4) !important;
+    color: #e2e8f0 !important;
 }
-
-.share-modal .recording-formats .icon-bbbeasy-mp4 {
-    font-size: 29px;
+.ant-modal-root:has(.ant-modal.presets-edit-modal) .ant-input::placeholder,
+.ant-modal-root:has(.ant-modal.presets-edit-modal) .ant-input-number-input::placeholder {
+    color: rgba(148, 163, 184, 0.9) !important;
 }
-
-.share-modal .recording-formats .icon-disabled .icon-bbbeasy-mp4 {
-    font-size: 26px;
+.ant-modal-root:has(.ant-modal.presets-edit-modal) .ant-select .ant-select-selector .ant-select-selection-item,
+.ant-modal-root:has(.ant-modal.presets-edit-modal) .ant-input-number-input {
+    color: #e2e8f0 !important;
 }
-
-.share-modal .recording-formats .icon-desktop:not(.disabled) {
-    height: 23px;
+.ant-modal-root:has(.ant-modal.presets-edit-modal) .ant-select .ant-select-arrow {
+    color: #93c5fd !important;
 }
-
-.share-modal .recording-formats .icon-desktop.disabled {
-    height: 20px;
+.ant-modal-root:has(.ant-modal.presets-edit-modal) .ant-input-number .ant-input-number-handler-wrap {
+    background: #0f1f3d !important;
+    border-color: rgba(96, 165, 250, 0.25) !important;
 }
-
-.share-modal .bbbeasy-btn .ant-avatar-string {
-    position: unset !important;
+.ant-modal-root:has(.ant-modal.presets-edit-modal) .ant-input-number-handler-up-inner,
+.ant-modal-root:has(.ant-modal.presets-edit-modal) .ant-input-number-handler-down-inner {
+    color: #93c5fd !important;
 }
-
-.share-modal .bbbeasy-btn:not(:hover) .bbbeasy-white-btn {
-    -webkit-clip-path: polygon(48% 0, 52% 0, 95% 25%, 95% 75%, 52% 100%, 48% 100%, 5% 75%, 5% 25%);
-    clip-path: polygon(48% 0, 52% 0, 95% 25%, 95% 75%, 52% 100%, 48% 100%, 5% 75%, 5% 25%);
+.ant-modal-root:has(.ant-modal.presets-edit-modal) .input-status-presets {
+    background: transparent !important;
+    border: transparent !important;
+    color: #cbd5e1 !important;
+    width: 50px;
 }
-
-.profile-form .ant-image .ant-image-img {
+.ant-modal-root:has(.ant-modal.presets-edit-modal) .space-presets-border {
+    background: #0b1526 !important;
+    border-color: rgba(96, 165, 250, 0.4) !important;
+}
+.ant-modal-root:has(.ant-modal.presets-edit-modal) .ant-upload button {
+    background: #0f1f3d !important;
+    border-color: rgba(96, 165, 250, 0.4) !important;
+    color: #cbd5e1 !important;
+}
+.ant-modal-root:has(.ant-modal.presets-edit-modal) .button-container .cancel-btn {
+    background: rgba(71, 85, 105, 0.4) !important;
+    border-color: rgba(96, 165, 250, 0.25) !important;
+    color: #cbd5e1 !important;
+}
+.ant-modal-root:has(.ant-modal.presets-edit-modal) .button-container .cancel-btn:hover,
+.ant-modal-root:has(.ant-modal.presets-edit-modal) .button-container .cancel-btn:focus {
+    background: rgba(71, 85, 105, 0.6) !important;
+    color: #ffffff !important;
+}
+.ant-modal-root:has(.ant-modal.presets-edit-modal) .button-container .ant-btn-primary {
+    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
+    border-color: #2563eb !important;
+    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35);
+}
+.ant-modal-root:has(.ant-modal.presets-edit-modal) .button-container .ant-btn-primary:hover,
+.ant-modal-root:has(.ant-modal.presets-edit-modal) .button-container .ant-btn-primary:focus {
+    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
+    border-color: #3b82f6 !important;
+}
+.ant-modal-root:has(.ant-modal.presets-edit-modal) > .ant-modal-mask {
+    background-color: rgba(2, 6, 23, 0.55) !important;
+    -webkit-backdrop-filter: blur(5px);
+    backdrop-filter: blur(5px);
+}
+/*****************LANDING PAGE - SALLE MOCKUP (v2)*****************/
+.landing-shell .bbb-classroom-widget {
+    perspective: 1400px;
+}
+.landing-shell .salle-mockup {
+    position: relative;
     width: 100%;
+    height: 100%;
+    background: linear-gradient(180deg, #111830 0%, #0d1224 100%);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 20px;
+    padding: 16px;
+    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.02);
+    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
+    transform-style: preserve-3d;
+    overflow: hidden;
 }
-
-.profile-form .ant-image .ant-image-mask {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+.landing-shell .salle-topbar {
     display: flex;
     align-items: center;
-    justify-content: center;
-    color: #fff;
-    background: rgba(0, 0, 0, 0.5);
-    cursor: pointer;
-    opacity: 0;
-    transition: opacity 0.3s;
+    justify-content: space-between;
+    gap: 12px;
+    margin-bottom: 14px;
 }
-
-.profile-form .ant-image .ant-image-mask:hover {
-    opacity: 1;
+.landing-shell .salle-room-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 7px;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 12px;
+    color: #5ec8ff;
+    background: rgba(94, 200, 255, 0.08);
+    border: 1px solid rgba(94, 200, 255, 0.18);
+    padding: 6px 12px;
+    border-radius: 100px;
+    white-space: nowrap;
+}
+.landing-shell .salle-live-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: #5ec8ff;
+    animation: sallePulseDot 2s ease-out infinite;
 }
-
-.delete-button-color {
-    color: #ff4d4f !important;
+@keyframes sallePulseDot {
+    0% { box-shadow: 0 0 0 0 rgba(94, 200, 255, 0.5); }
+    70% { box-shadow: 0 0 0 7px rgba(94, 200, 255, 0); }
+    100% { box-shadow: 0 0 0 0 rgba(94, 200, 255, 0); }
 }
-.edit-button-color {
-    color: var(--bbbeasy-medimum-gray) !important;
+.landing-shell .salle-audio-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 12px;
+    color: #8a93b3;
+    background: #161e3a;
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    padding: 6px 12px;
+    border-radius: 100px;
+    white-space: nowrap;
+}
+.landing-shell .salle-eq {
+    display: flex;
+    align-items: flex-end;
+    gap: 2px;
+    height: 11px;
 }
-.edit-button-color:hover {
-    color: #fbbc0b !important;
+.landing-shell .salle-eq i {
+    width: 2.5px;
+    background: #2fb673;
+    border-radius: 2px;
+    animation: salleEqBounce 1.1s ease-in-out infinite;
+}
+.landing-shell .salle-eq i:nth-child(1) { height: 40%; animation-delay: 0s; }
+.landing-shell .salle-eq i:nth-child(2) { height: 100%; animation-delay: 0.15s; }
+.landing-shell .salle-eq i:nth-child(3) { height: 65%; animation-delay: 0.3s; }
+.landing-shell .salle-eq i:nth-child(4) { height: 85%; animation-delay: 0.45s; }
+@keyframes salleEqBounce {
+    0%, 100% { transform: scaleY(0.35); }
+    50% { transform: scaleY(1); }
+}
+.landing-shell .salle-body {
+    display: grid;
+    grid-template-columns: 148px minmax(0, 1fr) 122px;
+    gap: 12px;
+    height: calc(100% - 80px);
+}
+.landing-shell .salle-side-label {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 9px;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: #5c6488;
+    margin: 0 0 6px 2px;
 }
-.ant-alert-content {
-    margin-right: 5px;
+.landing-shell .salle-side {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    min-width: 0;
 }
-.ant-input-number-rtl {
-    padding-right: 20px !important;
+.landing-shell .salle-side .salle-side-label:not(:first-child) {
+    margin-top: 8px;
 }
-.space-color-picker {
-    color: rgba(0, 0, 0, 0.25);
-
-    opacity: 1;
-
-    width: 200px;
-
-    background-color: #ffffff;
-    background-image: none;
-    border-width: 1px;
-    border-style: solid;
-    border-color: #dddfe1;
-    border-radius: 6px;
-    padding: 4px 11px;
+.landing-shell .salle-tile {
+    background: #161e3a;
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    border-radius: 12px;
+    padding: 12px 8px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    position: relative;
 }
-
-#administration_form {
-    padding: 50px 30px !important;
+.landing-shell .salle-avatar {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    display: grid;
+    place-items: center;
+    font-family: 'Sora', sans-serif;
+    font-weight: 700;
+    font-size: 13px;
+    color: #fff;
+    position: relative;
+    animation: salleFloatY 4.5s ease-in-out infinite;
+}
+.landing-shell .salle-avatar-lg { width: 48px; height: 48px; font-size: 17px; }
+.landing-shell .salle-avatar-instructor { background: linear-gradient(160deg, #f0507a, #c23a5f); box-shadow: 0 0 0 2px rgba(239, 77, 134, 0.25); }
+.landing-shell .salle-avatar-j { background: linear-gradient(160deg, #f5a941, #c97e1f); }
+.landing-shell .salle-avatar-a { background: linear-gradient(160deg, #2fb673, #1c8354); }
+.landing-shell .salle-avatar-b { background: linear-gradient(160deg, #ef4d86, #c22f65); }
+.landing-shell .salle-avatar-c { background: linear-gradient(160deg, #ef4444, #b12f2f); }
+.landing-shell .salle-avatar-ta { background: #111830; border: 2px solid #8b7bff; color: #8b7bff; }
+@keyframes salleFloatY {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-4px); }
+}
+.landing-shell .salle-tile-name {
+    font-size: 10px;
+    color: #8a93b3;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    white-space: nowrap;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
-#administration_form .ant-col {
-    text-align: right;
+.landing-shell .salle-mic-dot {
+    width: 11px;
+    height: 11px;
+    border-radius: 50%;
+    background: #ef4444;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
 }
-#administration_form .ant-col-rtl {
-    text-align: left !important;
+.landing-shell .salle-mic-dot::before {
+    content: '';
+    width: 4px;
+    height: 4px;
+    border-radius: 1px;
+    background: #fff;
 }
-.loading {
-    margin-left: 50% !important;
+.landing-shell .salle-raise-badge {
+    position: absolute;
+    top: -5px;
+    right: -5px;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: #f5a941;
+    display: grid;
+    place-items: center;
+    box-shadow: 0 0 0 3px #161e3a;
+    animation: salleBadgePulse 2.2s ease-in-out infinite;
+    z-index: 2;
 }
-#administration_form #submit-btn {
-    margin-top: 25px;
+.landing-shell .salle-raise-badge svg {
+    width: 10px;
+    height: 10px;
+    color: #0d1224;
 }
-
-.ant-upload-list-item {
-    width: 80% !important;
+@keyframes salleBadgePulse {
+    0%, 100% { transform: scale(1); }
+    50% { transform: scale(1.15); }
 }
-.ant-upload-drag {
-    width: 80% !important;
+.landing-shell .salle-center {
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
 }
-.space-color-picker-branding {
-    color: rgba(0, 0, 0, 0.25);
-
-    opacity: 1;
-
-    width: 150px;
-
-    background-color: #ffffff;
-    background-image: none;
-    border-width: 1px;
-    border-style: solid;
-    border-color: #dddfe1;
-    border-radius: 6px;
-    padding: 4px 11px;
+.landing-shell .salle-tabs {
+    display: flex;
+    gap: 5px;
+    background: #161e3a;
+    padding: 4px;
+    border-radius: 10px;
+    margin-bottom: 10px;
 }
-
-.code-color-picker-edit-label {
+.landing-shell .salle-tab {
+    flex: 1;
+    text-align: center;
+    font-size: 10.5px;
+    font-family: 'Inter', sans-serif;
+    color: #8a93b3;
+    padding: 7px 4px;
+    border-radius: 7px;
+    border: none;
     background: transparent;
-    border-radius: 3px;
-    width: 90px;
+    user-select: none;
 }
-
-.input-status-presets {
+.landing-shell .salle-tab.active {
+    background: #5ec8ff;
+    color: #04101c;
+    font-weight: 600;
+}
+.landing-shell .salle-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 8px;
+    flex: 1;
+}
+.landing-shell .salle-grid .salle-tile {
+    padding: 10px 6px;
+}
+.landing-shell .salle-add-tile {
+    border: 1.5px dashed rgba(255, 255, 255, 0.08);
     background: transparent;
-    border: transparent;
-    width: 50px;
+    display: grid;
+    place-items: center;
+    color: #5c6488;
+    font-size: 18px;
+    min-height: 74px;
 }
-
-.space-color-picker-add-label {
-    position: relative;
-    display: inline-flex;
-    width: 95% !important;
+.landing-shell .salle-right {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
     min-width: 0;
-    padding: 4px 11px !important;
-    color: rgba(0, 0, 0, 0.88);
-    font-size: 14px;
-    line-height: 1.8714285714285714;
-    background-color: #ffffff;
-    background-image: none;
-    border-width: 1px;
-    border-style: solid;
-    border-color: #d9d9d9;
-    border-radius: 6px;
-    transition: all 0.2s;
-    opacity: 1;
 }
-
-.space-presets-border {
-    border: 1px solid #999;
-
-    display: inline-block;
-
-    border-radius: 2px;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    user-select: none;
-    width: 20px;
-    height: 20px;
+.landing-shell .salle-raise-hub {
+    width: 100%;
+    background: #161e3a;
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    border-radius: 12px;
+    padding: 14px 6px 12px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 6px;
+}
+.landing-shell .salle-ring-wrap {
+    position: relative;
+    width: 46px;
+    height: 46px;
+    display: grid;
+    place-items: center;
+}
+.landing-shell .salle-ring {
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    border: 1.5px solid #f5a941;
+    animation: salleRingPulse 2.4s ease-out infinite;
+    opacity: 0;
+}
+.landing-shell .salle-ring:nth-child(2) {
+    animation-delay: 0.8s;
+}
+@keyframes salleRingPulse {
+    0% { transform: scale(0.7); opacity: 0.55; }
+    100% { transform: scale(1.7); opacity: 0; }
+}
+.landing-shell .salle-hand {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background: radial-gradient(circle at 35% 30%, #ffcf80, #f5a941);
+    display: grid;
+    place-items: center;
+    box-shadow: 0 0 18px rgba(245, 169, 65, 0.5);
+    z-index: 1;
+}
+.landing-shell .salle-hand svg {
+    width: 16px;
+    height: 16px;
+    color: #0d1224;
+}
+.landing-shell .salle-raise-count {
+    font-size: 9.5px;
+    color: #8a93b3;
+    font-family: 'JetBrains Mono', monospace;
+}
+.landing-shell .salle-icon-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 6px;
+    width: 100%;
+}
+.landing-shell .salle-icon-btn {
+    aspect-ratio: 1;
+    background: #161e3a;
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    border-radius: 9px;
+    display: grid;
+    place-items: center;
+    font-size: 13px;
+    color: #8a93b3;
     cursor: pointer;
-    box-shadow: 0 0 0 2px #fff inset;
+    padding: 0;
+    transition: color 0.2s, border-color 0.2s;
 }
-.input-editable .ant-input-suffix .cell-input-cancel-record {
-    width: 100% !important;
-    height: 100% !important;
+.landing-shell .salle-icon-btn svg {
+    width: 14px;
+    height: 14px;
 }
-.input-editable .ant-input-suffix .cell-input-save-record {
-    width: 100% !important;
-    height: 100% !important;
+.landing-shell .salle-icon-btn:hover {
+    color: #eef1fb;
+    border-color: rgba(94, 200, 255, 0.4);
 }
-.room-details .disableStart {
-    font-size: 20px !important;
+.landing-shell .salle-mode {
+    width: 100%;
+    text-align: center;
+    font-size: 9.5px;
+    color: #5c6488;
+    padding: 8px 4px;
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    border-radius: 9px;
+    line-height: 1.5;
+}
+.landing-shell .salle-mode b {
+    display: block;
+    color: #eef1fb;
+    font-size: 10.5px;
     font-weight: 600;
-    clip-path: polygon(48% 0, 52% 0, 95% 25%, 95% 75%, 52% 100%, 48% 100%, 5% 75%, 5% 25%);
-    border-radius: 50%;
-    background-color: #d4d4d4 !important;
-    cursor: not-allowed;
 }
-.edit-room-form {
-    display: block !important;
+.landing-shell .salle-bottom {
+    display: flex;
+    gap: 6px;
 }
-.room-title {
-    max-width: 150px !important;
-    overflow: hidden;
-    text-overflow: ellipsis;
+.landing-shell .salle-round {
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    background: #161e3a;
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    display: grid;
+    place-items: center;
+    font-size: 12px;
+    color: #8a93b3;
 }
-.room-labels {
-    word-break: break-all;
-    max-width: max-content !important;
-    overflow: hidden;
-    text-overflow: unset;
-    max-height: 24px;
+.landing-shell .salle-round svg {
+    width: 12px;
+    height: 12px;
 }
-.room-label {
-    max-width: 120px !important;
-    overflow: hidden;
-    text-overflow: ellipsis;
+.landing-shell .salle-round.warn {
+    background: rgba(239, 68, 68, 0.15);
+    border-color: rgba(239, 68, 68, 0.3);
+    color: #ef4444;
 }
-div.error-message-Label {
-    max-width: max-content;
-    margin-bottom: 10px;
-    margin-left: 10px;
+.landing-shell .salle-encryption {
+    position: absolute;
+    left: 24px;
+    bottom: -18px;
+    display: inline-flex;
+    align-items: center;
+    gap: 7px;
+    background: #0d1224;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    padding: 9px 16px;
+    border-radius: 100px;
+    font-size: 11.5px;
+    color: #8a93b3;
+    white-space: nowrap;
+    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.6);
+    z-index: 3;
+}
+.landing-shell .salle-encryption svg {
+    width: 12px;
+    height: 12px;
+    color: #5ec8ff;
 }
-.preset-name {
-    max-width: 120px !important;
-    overflow: hidden;
-    text-overflow: ellipsis;
+@media (max-width: 991px) {
+    .landing-shell .salle-body {
+        grid-template-columns: 1fr;
+    }
+    .landing-shell .salle-side,
+    .landing-shell .salle-right {
+        display: none;
+    }
 }
-.ant-table-cell {
-    max-width: 150px !important;
+@media (prefers-reduced-motion: reduce) {
+    .landing-shell .salle-mockup *,
+    .landing-shell .salle-encryption * {
+        animation: none !important;
+        transition: none !important;
+    }
 }
diff --git a/bbbeasy-frontend/src/App.tsx b/bbbeasy-frontend/src/App.tsx
index 009d3c00..2deaae3c 100644
--- a/bbbeasy-frontend/src/App.tsx
+++ b/bbbeasy-frontend/src/App.tsx
@@ -53,9 +53,10 @@ interface IProps {
 }
 
 const App: React.FC<IProps> = ({ routes, isSider, logs }) => {
-    const [currentUser, setCurrentUser] = React.useState<UserType | null>(null);
-    const [currentSession, setCurrentSession] = React.useState<SessionType | null>(null);
-    const [isLogged, setIsLogged] = React.useState<boolean>(false);
+    const [currentUser, setCurrentUser] = React.useState<UserType | null>(() => AuthService.getCurrentUser());
+    const [currentSession, setCurrentSession] = React.useState<SessionType | null>(() => AuthService.getCurrentSession());
+    const [isLogged, setIsLogged] = React.useState<boolean>(() => Boolean(AuthService.getCurrentUser() && AuthService.getCurrentSession()));
+    const isAuthenticated = Boolean(AuthService.getCurrentUser() && AuthService.getCurrentSession());
 
     const [dataRooms, setDataRooms] = React.useState<RoomType[]>([]);
     const [dataLabels, setDataLabels] = React.useState<LabelType[]>([]);
@@ -70,6 +71,7 @@ const App: React.FC<IProps> = ({ routes, isSider, logs }) => {
         () => ({ isLogged, setIsLogged, currentUser, setCurrentUser, currentSession, setCurrentSession }),
         [isLogged, currentUser, currentSession]
     );
+    const authViewKey = isLogged ? 'authenticated' : 'anonymous';
 
     const customTheme = {
         token: {
@@ -125,7 +127,7 @@ const App: React.FC<IProps> = ({ routes, isSider, logs }) => {
             setCurrentSession(session);
             setIsLogged(true);
 
-            const allowedGroups = Object.keys(user.permissions);
+            const allowedGroups = Object.keys(user.permissions ?? {});
             if (allowedGroups.length > 0) {
                 if (AuthService.isAllowedGroup(allowedGroups, 'logs')) {
                     Logger.info(logs);
@@ -152,9 +154,9 @@ const App: React.FC<IProps> = ({ routes, isSider, logs }) => {
                     direction={LocaleService.direction}
                     componentSize="large"
                 >
-                    <UserContext.Provider value={userProvider}>
+                    <UserContext.Provider key={authViewKey} value={userProvider}>
                         <DataContext.Provider value={dataProvider}>
-                            {isLogged && isSider && <AppSider presets={dataPresets} />}
+                            {isAuthenticated && isSider && <AppSider presets={dataPresets} />}
                             <Layout className="page-layout-body">
                                 <AppHeader />
                                 <Content className="site-content">
diff --git a/bbbeasy-frontend/src/components/AddLabelForm.tsx b/bbbeasy-frontend/src/components/AddLabelForm.tsx
index 93d1e481..a0682987 100644
--- a/bbbeasy-frontend/src/components/AddLabelForm.tsx
+++ b/bbbeasy-frontend/src/components/AddLabelForm.tsx
@@ -99,7 +99,7 @@ export const AddLabelForm = (props: Props) => {
         <>
             <Modal
                 title={<Trans i18nKey="new_label" />}
-                className="add-modal"
+                className="add-modal label-add-modal"
                 centered
                 open={props.isModalShow}
                 onOk={handleAdd}
diff --git a/bbbeasy-frontend/src/components/AddPresetForm.tsx b/bbbeasy-frontend/src/components/AddPresetForm.tsx
index d345af17..1ee6c065 100644
--- a/bbbeasy-frontend/src/components/AddPresetForm.tsx
+++ b/bbbeasy-frontend/src/components/AddPresetForm.tsx
@@ -91,7 +91,7 @@ export const AddPresetForm = (props: Props) => {
         <>
             <Modal
                 title={<Trans i18nKey="new_preset" />}
-                className="add-modal"
+                className="add-modal preset-add-modal"
                 centered
                 open={props.isModalShow}
                 onOk={handleAdd}
diff --git a/bbbeasy-frontend/src/components/Administration.tsx b/bbbeasy-frontend/src/components/Administration.tsx
index db9cba27..20123416 100644
--- a/bbbeasy-frontend/src/components/Administration.tsx
+++ b/bbbeasy-frontend/src/components/Administration.tsx
@@ -102,9 +102,9 @@ export const Administration = () => {
         <LoadingSpinner className="loading" />
     ) : (
         <>
-            <PageHeader className="site-page-header" title={<Trans i18nKey="administration" />} />
+            <PageHeader className="site-page-header administration-page-header" title={<Trans i18nKey="administration" />} />
 
-            <Row className="branding-row">
+            <Row className="branding-row administration-page">
                 <Col span={8}>
                     <Form
                         layout="horizontal"
diff --git a/bbbeasy-frontend/src/components/Branding.tsx b/bbbeasy-frontend/src/components/Branding.tsx
index e4ddb152..eba38f06 100644
--- a/bbbeasy-frontend/src/components/Branding.tsx
+++ b/bbbeasy-frontend/src/components/Branding.tsx
@@ -172,7 +172,7 @@ const Branding = () => {
     };
 
     return (
-        <Row justify="center" className="branding-row">
+        <Row justify="center" className="branding-row branding-page">
             {isLoading ? (
                 <LoadingSpinner />
             ) : (
diff --git a/bbbeasy-frontend/src/components/Labels.tsx b/bbbeasy-frontend/src/components/Labels.tsx
index f1bfe78c..1e6239e6 100644
--- a/bbbeasy-frontend/src/components/Labels.tsx
+++ b/bbbeasy-frontend/src/components/Labels.tsx
@@ -408,6 +408,7 @@ const Labels = () => {
     return (
         <>
             <PageHeader
+                className="site-page-header labels-page-header"
                 title={<Trans i18nKey="labels" />}
                 extra={
                     AuthService.isAllowedAction(actions, 'add') && [
@@ -432,14 +433,16 @@ const Labels = () => {
                     <Alert type="error" message={<Trans i18nKey={errorMsg} />} showIcon />
                 </div>
             ) : null}
-            <EditableTable
-                EditableCell={EditableCell}
-                editForm={editForm}
-                mergedColumns={mergedColumns}
-                dataSource={data}
-                loading={loading}
-                notFoundContent="no_labels"
-            />
+            <div className="labels-table">
+                <EditableTable
+                    EditableCell={EditableCell}
+                    editForm={editForm}
+                    mergedColumns={mergedColumns}
+                    dataSource={data}
+                    loading={loading}
+                    notFoundContent="no_labels"
+                />
+            </div>
         </>
     );
 };
diff --git a/bbbeasy-frontend/src/components/LandingPage.tsx b/bbbeasy-frontend/src/components/LandingPage.tsx
index f72e990b..5532e85b 100644
--- a/bbbeasy-frontend/src/components/LandingPage.tsx
+++ b/bbbeasy-frontend/src/components/LandingPage.tsx
@@ -16,28 +16,146 @@
  * with BBBEasy; if not, see <http://www.gnu.org/licenses/>.
  */
 
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Trans, withTranslation } from 'react-i18next';
 
 import { Row, Col, Typography, Avatar, Button } from 'antd';
-import { AppstoreAddOutlined, BgColorsOutlined, PlayCircleOutlined, ControlOutlined } from '@ant-design/icons';
+import {
+    AppstoreAddOutlined,
+    BgColorsOutlined,
+    PlayCircleOutlined,
+    ControlOutlined,
+} from '@ant-design/icons';
 import DynamicIcon from './DynamicIcon';
 import settingsService from 'services/settings.service';
 
 const { Title, Paragraph } = Typography;
 
+const RoomIcon = () => (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+        <polyline points="9 22 9 12 15 12 15 22" />
+    </svg>
+);
+
+const MicOffIcon = () => (
+    <svg viewBox="0 0 24 24" fill="currentColor">
+        <path d="M19 11h-1.7c0 .74-.16 1.43-.43 2.05l1.23 1.23c.56-.98.9-2.09.9-3.28zm-4.02.97c0-.06.02-.11.02-.16V5c0-1.66-1.34-3-3-3S9 3.34 9 5v.18l5.98 5.79zM4.27 3L3 4.27l6.01 6.01V11c0 1.66 1.33 3 2.99 3 .22 0 .44-.03.65-.08l1.66 1.66c-.71.33-1.5.52-2.31.52-2.76 0-5.3-2.1-5.3-5.1H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c.91-.13 1.77-.45 2.54-.9L19.73 21 21 19.73 4.27 3z" />
+    </svg>
+);
+
+const HandIcon = () => (
+    <svg viewBox="0 0 24 24" fill="currentColor">
+        <path d="M19 11h-1.7c0 .74-.16 1.43-.43 2.05l1.23 1.23c.56-.98.9-2.09.9-3.28zm-4.02.97c0-.06.02-.11.02-.16V5c0-1.66-1.34-3-3-3S9 3.34 9 5v.18l5.98 5.79zM4.27 3L3 4.27l6.01 6.01V11c0 1.66 1.33 3 2.99 3 .22 0 .44-.03.65-.08l1.66 1.66c-.71.33-1.5.52-2.31.52-2.76 0-5.3-2.1-5.3-5.1H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c.91-.13 1.77-.45 2.54-.9L19.73 21 21 19.73 4.27 3z" />
+    </svg>
+);
+
+const ShieldIcon = () => (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
+        <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+    </svg>
+);
+
+const SpeakerIcon = () => (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
+        <path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07" />
+    </svg>
+);
+
+const ActionEmojiIcon = () => (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <circle cx="12" cy="12" r="10" />
+        <path d="M8 14s1.5 2 4 2 4-2 4-2" />
+        <line x1="9" y1="9" x2="9.01" y2="9" />
+        <line x1="15" y1="9" x2="15.01" y2="9" />
+    </svg>
+);
+
+const ActionFullscreenIcon = () => (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" />
+    </svg>
+);
+
+const ActionQuestionIcon = () => (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <circle cx="12" cy="12" r="10" />
+        <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
+        <line x1="12" y1="17" x2="12.01" y2="17" />
+    </svg>
+);
+
+const ActionChatIcon = () => (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="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" />
+    </svg>
+);
+
+const ActionCalendarIcon = () => (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
+        <line x1="16" y1="2" x2="16" y2="6" />
+        <line x1="8" y1="2" x2="8" y2="6" />
+        <line x1="3" y1="10" x2="21" y2="10" />
+    </svg>
+);
+
+const ActionMoreIcon = () => (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <circle cx="12" cy="12" r="1" />
+        <circle cx="19" cy="12" r="1" />
+        <circle cx="5" cy="12" r="1" />
+    </svg>
+);
+
 const LandingPage = () => {
     const [platformName, setPlatformName] = React.useState<string>('');
     const navigate = useNavigate();
-    settingsService.collect_settings().then((result) => {
-        setPlatformName(result.data.platform_name);
-    });
+    const stageRef = React.useRef<HTMLDivElement>(null);
+    const mockupRef = React.useRef<HTMLDivElement>(null);
+    useEffect(() => {
+        settingsService.collect_settings().then((result) => {
+            setPlatformName(result.data.platform_name);
+        });
+    }, []);
+
+    // Subtle 3D tilt on the classroom mockup (purely visual, no logic)
+    useEffect(() => {
+        const stage = stageRef.current;
+        const mockup = mockupRef.current;
+        if (!stage || !mockup) return;
+        const canHover = window.matchMedia('(pointer: fine)').matches;
+        const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+        if (!canHover || reduceMotion) return;
+
+        const onMove = (event: MouseEvent) => {
+            const rect = stage.getBoundingClientRect();
+            const x = (event.clientX - rect.left) / rect.width - 0.5;
+            const y = (event.clientY - rect.top) / rect.height - 0.5;
+            mockup.style.transform = `rotateY(${(x * 5).toFixed(2)}deg) rotateX(${(y * -5).toFixed(2)}deg)`;
+        };
+        const onLeave = () => {
+            mockup.style.transform = 'rotateY(0deg) rotateX(0deg)';
+        };
+        stage.addEventListener('mousemove', onMove);
+        stage.addEventListener('mouseleave', onLeave);
+        return () => {
+            stage.removeEventListener('mousemove', onMove);
+            stage.removeEventListener('mouseleave', onLeave);
+        };
+    }, []);
 
     return (
-        <>
+        <div className="landing-shell">
             <Row justify="center" align="top" className="landing-content">
-                <Col span={12}>
+                <Col span={12} className="hero-content">
+                    <div className="tag">
+                        <span className="dot" />
+                        <Trans i18nKey="bigbluebutton" />
+                    </div>
                     <Title>
                         <Trans i18nKey="welcome_platformname"> Welcome to {{ platformName: platformName }}</Trans>
                     </Title>
@@ -47,6 +165,7 @@ const LandingPage = () => {
                             {' '}
                             <Trans i18nKey="bigbluebutton" />
                         </strong>
+                        . Solution professionnelle et sécurisée pour vos visioconférences.
                     </p>
                     <Paragraph className="landing-btns">
                         <Button type="primary" onClick={() => navigate('/login')}>
@@ -57,49 +176,229 @@ const LandingPage = () => {
                         </Button>
                     </Paragraph>
                 </Col>
-                <Col span={12} className="text-end">
-                    <img className="landing-img" src="/images/landing.png" />
-                </Col>
-            </Row>
-            <Row gutter={[40, 8]} justify="center" className="features text-center">
-                <Col span={3}>
-                    <Avatar size={45} icon={<AppstoreAddOutlined />} className="ant-btn-primary bbbeasy-btn" />
-                    <p>
-                        <Trans i18nKey="personal-rooms" />
-                    </p>
-                </Col>
-                <Col span={3}>
-                    <Avatar size={45} icon={<BgColorsOutlined />} className="ant-btn-primary bbbeasy-btn" />
-                    <p>
-                        <Trans i18nKey="full-brandings" />
-                    </p>
-                </Col>
-                <Col span={3}>
-                    <Avatar size={45} icon={<PlayCircleOutlined />} className="ant-btn-primary bbbeasy-btn" />
-                    <p>
-                        <Trans i18nKey="recordings-management" />
-                    </p>
-                </Col>
-                <Col span={3}>
-                    <Avatar size={45} icon={<ControlOutlined />} className="ant-btn-primary bbbeasy-btn" />
-                    <p>
-                        <Trans i18nKey="flexible-configuration" />
-                    </p>
-                </Col>
-                <Col span={3}>
-                    <Avatar
-                        size={45}
-                        icon={<DynamicIcon type={'ZcaleRight'} />}
-                        className="ant-btn-primary bbbeasy-btn bbbeasy-icon"
-                    />
-                    <p>
-                        <Trans i18nKey="zcaleright" />
-                        <br />
-                        <Trans i18nKey="support" />
-                    </p>
+                <Col span={12} className="hero-visual">
+                    <div className="bbb-classroom-widget" ref={stageRef}>
+                        <div className="salle-mockup" ref={mockupRef}>
+                            <div className="salle-topbar">
+                                <span className="salle-room-pill">
+                                    <span className="salle-live-dot" />
+                                    Salle : Terminale-S-02
+                                </span>
+                                <span className="salle-audio-pill">
+                                    HD Audio
+                                    <span className="salle-eq" aria-hidden="true">
+                                        <i />
+                                        <i />
+                                        <i />
+                                        <i />
+                                    </span>
+                                </span>
+                            </div>
+
+                            <div className="salle-body">
+                                <aside className="salle-side">
+                                    <p className="salle-side-label">Intervenants</p>
+                                    <div className="salle-tile">
+                                        <div className="salle-avatar salle-avatar-lg salle-avatar-instructor">🎓</div>
+                                        <span className="salle-tile-name">
+                                            <span className="salle-mic-dot" />
+                                            Prof
+                                        </span>
+                                    </div>
+                                    <p className="salle-side-label">Estrade</p>
+                                    <div className="salle-tile">
+                                        <div className="salle-avatar salle-avatar-j" style={{ animationDelay: '0.6s' }}>
+                                            J
+                                        </div>
+                                        <span className="salle-tile-name">
+                                            <span className="salle-mic-dot" />
+                                            Jon
+                                        </span>
+                                    </div>
+                                    <div className="salle-tile">
+                                        <div className="salle-avatar salle-avatar-a" style={{ animationDelay: '1.1s' }}>
+                                            A
+                                        </div>
+                                        <span className="salle-tile-name">
+                                            <span className="salle-mic-dot" />
+                                            Alicia
+                                        </span>
+                                    </div>
+                                </aside>
+
+                                <section className="salle-center">
+                                    <div className="salle-tabs">
+                                        <span className="salle-tab active">Ma table</span>
+                                        <span className="salle-tab">Partage</span>
+                                        <span className="salle-tab">Vidéo</span>
+                                    </div>
+
+                                    <div className="salle-grid">
+                                        <div className="salle-tile">
+                                            <div className="salle-avatar salle-avatar-ta">TA</div>
+                                            <span className="salle-tile-name">
+                                                <span className="salle-mic-dot" />
+                                                Tatiana
+                                            </span>
+                                        </div>
+                                        <div className="salle-tile">
+                                            <div className="salle-avatar salle-avatar-a" style={{ animationDelay: '0.35s' }}>
+                                                A
+                                                <span className="salle-raise-badge">
+                                                    <HandIcon />
+                                                </span>
+                                            </div>
+                                            <span className="salle-tile-name">
+                                                <span className="salle-mic-dot" />
+                                                Alicia
+                                            </span>
+                                        </div>
+                                        <div className="salle-tile">
+                                            <div className="salle-avatar salle-avatar-b" style={{ animationDelay: '0.7s' }}>
+                                                B
+                                                <span className="salle-raise-badge">
+                                                    <HandIcon />
+                                                </span>
+                                            </div>
+                                            <span className="salle-tile-name">
+                                                <span className="salle-mic-dot" />
+                                                Brandon
+                                            </span>
+                                        </div>
+                                        <div className="salle-tile">
+                                            <div className="salle-avatar salle-avatar-c" style={{ animationDelay: '1.05s' }}>
+                                                C
+                                            </div>
+                                            <span className="salle-tile-name">
+                                                <span className="salle-mic-dot" />
+                                                Colin
+                                            </span>
+                                        </div>
+                                        <div className="salle-tile">
+                                            <div className="salle-avatar salle-avatar-j" style={{ animationDelay: '1.4s' }}>
+                                                J
+                                                <span className="salle-raise-badge">
+                                                    <HandIcon />
+                                                </span>
+                                            </div>
+                                            <span className="salle-tile-name">
+                                                <span className="salle-mic-dot" />
+                                                Jon
+                                            </span>
+                                        </div>
+                                        <div className="salle-tile salle-add-tile">+</div>
+                                    </div>
+                                </section>
+
+                                <aside className="salle-right">
+                                    <div className="salle-raise-hub">
+                                        <div className="salle-ring-wrap">
+                                            <span className="salle-ring" />
+                                            <span className="salle-ring" />
+                                            <div className="salle-hand">
+                                                <HandIcon />
+                                            </div>
+                                        </div>
+                                        <span className="salle-raise-count">3 mains levées</span>
+                                    </div>
+
+                                    <div className="salle-icon-grid">
+                                        <button type="button" className="salle-icon-btn" title="Émojis">
+                                            <ActionEmojiIcon />
+                                        </button>
+                                        <button type="button" className="salle-icon-btn" title="Plein écran">
+                                            <ActionFullscreenIcon />
+                                        </button>
+                                        <button type="button" className="salle-icon-btn" title="Poser une question">
+                                            <ActionQuestionIcon />
+                                        </button>
+                                        <button type="button" className="salle-icon-btn" title="Chat en direct">
+                                            <ActionChatIcon />
+                                        </button>
+                                        <button type="button" className="salle-icon-btn" title="Agenda">
+                                            <ActionCalendarIcon />
+                                        </button>
+                                        <button type="button" className="salle-icon-btn" title="Plus d'options">
+                                            <ActionMoreIcon />
+                                        </button>
+                                    </div>
+
+                                    <div className="salle-mode">
+                                        Mode salle
+                                        <b>Audio seul</b>
+                                    </div>
+
+                                    <div className="salle-bottom">
+                                        <div className="salle-round" title="Clavier">
+                                            ⌨
+                                        </div>
+                                        <div className="salle-round" title="Haut-parleur actif">
+                                            <SpeakerIcon />
+                                        </div>
+                                        <div className="salle-round salle-warn" title="Micro coupé">
+                                            <MicOffIcon />
+                                        </div>
+                                    </div>
+                                </aside>
+                            </div>
+                        </div>
+
+                        <div className="salle-encryption">
+                            <ShieldIcon />
+                            <span>Chiffrement de bout en bout</span>
+                        </div>
+                    </div>
                 </Col>
             </Row>
-        </>
+
+            <div className="section-head">
+                <Title level={2}>
+                    Powerful <span className="gradient-text">Features</span>
+                </Title>
+                <p>Everything you need to run seamless online sessions</p>
+            </div>
+
+            <div className="features-block">
+                <Row gutter={[24, 24]} justify="center" className="features text-left features-row">
+                    <Col xs={24} sm={12} md={12} lg={6} className="card-feat">
+                        <Avatar size={45} icon={<AppstoreAddOutlined />} className="ant-btn-primary bbbeasy-btn" />
+                        <p>
+                            <Trans i18nKey="personal-rooms" />
+                        </p>
+                    </Col>
+                    <Col xs={24} sm={12} md={12} lg={6} className="card-feat">
+                        <Avatar size={45} icon={<BgColorsOutlined />} className="ant-btn-primary bbbeasy-btn" />
+                        <p>
+                            <Trans i18nKey="full-brandings" />
+                        </p>
+                    </Col>
+                    <Col xs={24} sm={12} md={12} lg={6} className="card-feat">
+                        <Avatar size={45} icon={<PlayCircleOutlined />} className="ant-btn-primary bbbeasy-btn" />
+                        <p>
+                            <Trans i18nKey="recordings-management" />
+                        </p>
+                    </Col>
+                    <Col xs={24} sm={12} md={12} lg={6} className="card-feat">
+                        <Avatar size={45} icon={<ControlOutlined />} className="ant-btn-primary bbbeasy-btn" />
+                        <p>
+                            <Trans i18nKey="flexible-configuration" />
+                        </p>
+                    </Col>
+                    <Col xs={24} sm={12} md={12} lg={6} className="card-feat card-feat-last">
+                        <Avatar
+                            size={45}
+                            icon={<DynamicIcon type={'ZcaleRight'} />}
+                            className="ant-btn-primary bbbeasy-btn bbbeasy-icon"
+                        />
+                        <p>
+                            <Trans i18nKey="zcaleright" />
+                            <br />
+                            <Trans i18nKey="support" />
+                        </p>
+                    </Col>
+                </Row>
+            </div>
+        </div>
     );
 };
 
diff --git a/bbbeasy-frontend/src/components/Presets.tsx b/bbbeasy-frontend/src/components/Presets.tsx
index 28bb6a4b..90e108f4 100644
--- a/bbbeasy-frontend/src/components/Presets.tsx
+++ b/bbbeasy-frontend/src/components/Presets.tsx
@@ -111,10 +111,19 @@ const PresetsCol: React.FC<PresetColProps> = ({
     const [isModalVisible, setIsModalVisible] = React.useState<boolean>(false);
     const [isEditing, setIsEditing] = useState<boolean>(false);
     const [errorsEdit, setErrorsEdit] = React.useState({});
+    const [originalPreset, setOriginalPreset] = React.useState<MyPresetType | null>(null);
     const isDefault = preset['name'] == 'default';
     const deleteEnabled = deleteClickHandler != null && !isDefault;
     const { token } = theme.useToken();
 
+    const clonePreset = (presetToClone: MyPresetType): MyPresetType => ({
+        ...presetToClone,
+        categories: presetToClone.categories.map((category) => ({
+            ...category,
+            subcategories: category.subcategories.map((subCategory) => ({ ...subCategory })),
+        })),
+    });
+
     const props = {
         beforeUpload: (file) => {
             const isPNG = file.type === 'image/png' || file.type === 'image/jpeg' || file.type === 'image/jpg';
@@ -153,7 +162,10 @@ const PresetsCol: React.FC<PresetColProps> = ({
     const showModal = (title: string, _titleTrans: string, content: SubCategoryType[]) => {
         setIsModalVisible(true);
         setModalTitle(title);
-        setModalContent(content);
+        setOriginalPreset(clonePreset(preset));
+        setModalContent(content.map((item) => ({ ...item })));
+        setFile(null);
+        setFileList(null);
 
         const indexLogo = content.findIndex((item) => item.type === 'file');
         if (indexLogo > -1 && content[indexLogo].value != '') {
@@ -433,7 +445,7 @@ const PresetsCol: React.FC<PresetColProps> = ({
                 {editClickHandler != null && (
                     <Modal
                         title={t(modalTitle)}
-                        className="presets-modal"
+                        className="presets-modal presets-edit-modal"
                         centered
                         open={isModalVisible}
                         onOk={() => setIsModalVisible(false)}
@@ -699,10 +711,11 @@ const Presets = () => {
     return (
         <>
             <PageHeader
+                className="site-page-header presets-page-header"
                 title={<Trans i18nKey="presets" />}
                 subTitle={
                     <Input
-                        className="search-input"
+                        className="search-input presets-search-input"
                         size="middle"
                         placeholder={t('search_preset')}
                         allowClear
diff --git a/bbbeasy-frontend/src/components/PublicRoute.tsx b/bbbeasy-frontend/src/components/PublicRoute.tsx
index 2330e543..724fa503 100644
--- a/bbbeasy-frontend/src/components/PublicRoute.tsx
+++ b/bbbeasy-frontend/src/components/PublicRoute.tsx
@@ -31,7 +31,7 @@ const PublicRoute = ({ children, restricted }) => {
 
     // restricted = true meaning restricted route else public route
     if (currentUser != null && currentSession != null && restricted) {
-        const menuSider = MenuService.getMenuSider(currentUser.permissions);
+        const menuSider = MenuService.getMenuSider(currentUser.permissions ?? {});
         const defaultRoute = menuSider.defaultRoute;
         if (defaultRoute != '') {
             return <Navigate to={defaultRoute} />;
diff --git a/bbbeasy-frontend/src/components/Recordings.tsx b/bbbeasy-frontend/src/components/Recordings.tsx
index 22f7388b..40d20b35 100644
--- a/bbbeasy-frontend/src/components/Recordings.tsx
+++ b/bbbeasy-frontend/src/components/Recordings.tsx
@@ -429,7 +429,7 @@ const Recordings = () => {
                                 icon={<QuestionCircleOutlined className="red-icon" />}
                                 onConfirm={() => handleDelete(record.key)}
                             >
-                                <Link>
+                                <Link className="delete-button-color">
                                     <DeleteOutlined /> <Trans i18nKey="delete" />
                                 </Link>
                             </Popconfirm>
@@ -468,7 +468,7 @@ const Recordings = () => {
 
     return (
         <>
-            <PageHeader className="site-page-header" title={<Trans i18nKey="recordings" />} />
+            <PageHeader className="site-page-header recordings-page-header" title={<Trans i18nKey="recordings" />} />
 
             {isModalVisible && (
                 <Modal
@@ -530,14 +530,16 @@ const Recordings = () => {
                 </Modal>
             )}
 
-            <EditableTable
-                EditableCell={EditableCell}
-                editForm={editForm}
-                mergedColumns={mergedColumns}
-                dataSource={data}
-                loading={loading}
-                notFoundContent="no_data"
-            />
+            <div className="recordings-table">
+                <EditableTable
+                    EditableCell={EditableCell}
+                    editForm={editForm}
+                    mergedColumns={mergedColumns}
+                    dataSource={data}
+                    loading={loading}
+                    notFoundContent="no_data"
+                />
+            </div>
         </>
     );
 };
diff --git a/bbbeasy-frontend/src/components/Roles.tsx b/bbbeasy-frontend/src/components/Roles.tsx
index 8126b980..0ec54d30 100644
--- a/bbbeasy-frontend/src/components/Roles.tsx
+++ b/bbbeasy-frontend/src/components/Roles.tsx
@@ -520,7 +520,7 @@ const Roles = () => {
                         size="middle"
                         className={expandedKeys.includes(record.key) ? 'table-actions editable' : 'table-actions'}
                     >
-                        <Link onClick={() => toggleEdit(record.key)}>
+                        <Link className="permissions-link" onClick={() => toggleEdit(record.key)}>
                             <DynamicIcon type="permissions" className="icon-bbbeasy-permissions" />{' '}
                             <Trans i18nKey="permissions.label" />
                         </Link>
@@ -530,7 +530,7 @@ const Roles = () => {
                                 icon={<QuestionCircleOutlined className="red-icon" />}
                                 onConfirm={() => handleDelete(record.key, record.users)}
                             >
-                                <Link>
+                                <Link className="delete-button-color">
                                     <DeleteOutlined /> <Trans i18nKey="delete" />
                                 </Link>
                             </Popconfirm>
@@ -558,6 +558,7 @@ const Roles = () => {
     return (
         <>
             <PageHeader
+                className="site-page-header roles-page-header"
                 title={<Trans i18nKey="roles" />}
                 extra={
                     AuthService.isAllowedAction(actions, 'add') && [
@@ -571,7 +572,7 @@ const Roles = () => {
             {AuthService.isAllowedAction(actions, 'add') && (
                 <Modal
                     title={<Trans i18nKey="new_role" />}
-                    className="add-modal medium-modal"
+                    className="add-modal medium-modal roles-add-modal"
                     centered
                     open={isModalVisible}
                     onOk={handleAdd}
@@ -628,20 +629,22 @@ const Roles = () => {
                 </Modal>
             )}
 
-            <EditableTable
-                EditableCell={EditableCell}
-                editForm={editTableForm}
-                EditableContext={EditableContext}
-                mergedColumns={mergedColumns}
-                dataSource={data}
-                loading={loading}
-                expandableTable={{
-                    expandedRowRender: expandedRowRender,
-                    showExpandColumn: false,
-                    expandedRowKeys: expandedKeys,
-                }}
-                notFoundContent="no_data"
-            />
+            <div className="roles-table">
+                <EditableTable
+                    EditableCell={EditableCell}
+                    editForm={editTableForm}
+                    EditableContext={EditableContext}
+                    mergedColumns={mergedColumns}
+                    dataSource={data}
+                    loading={loading}
+                    expandableTable={{
+                        expandedRowRender: expandedRowRender,
+                        showExpandColumn: false,
+                        expandedRowKeys: expandedKeys,
+                    }}
+                    notFoundContent="no_data"
+                />
+            </div>
         </>
     );
 };
diff --git a/bbbeasy-frontend/src/components/RoomDetails.tsx b/bbbeasy-frontend/src/components/RoomDetails.tsx
index 7df2fb3a..76564d66 100644
--- a/bbbeasy-frontend/src/components/RoomDetails.tsx
+++ b/bbbeasy-frontend/src/components/RoomDetails.tsx
@@ -24,13 +24,7 @@ import { FacebookShareButton, LinkedinShareButton, TwitterShareButton } from 're
 import EN_US from '../locale/en-US.json';
 import { t } from 'i18next';
 
-import {
-    EditOutlined,
-    FacebookOutlined,
-    LinkedinOutlined,
-    LinkOutlined,
-    TwitterOutlined,
-} from '@ant-design/icons';
+import { EditOutlined, LinkOutlined } from '@ant-design/icons';
 import { Avatar, Button, Card, Col, Input, Row, Space, Tag, Tooltip, Typography, Form, Select, Popconfirm } from 'antd';
 
 import Notifications from './Notifications';
@@ -69,6 +63,35 @@ type editFormItemType = {
     messageItem?: string;
 };
 
+const FacebookLogo = () => (
+    <svg className="social-icon" viewBox="0 0 60 60" width="20" height="20" aria-hidden="true" focusable="false">
+        <circle cx="30" cy="30" r="28" fill="#1877F2" />
+        <path
+            d="M39.5 30.3h-6.6V50h-8.1V30.3h-4.7v-6.9h4.7v-4.5c0-6.4 2.7-10.2 10.2-10.2h6.3v6.9h-3.9c-2.9 0-3.1 1.1-3.1 3.1l0 4.7h7.1l-0.8 6.9z"
+            fill="#ffffff"
+        />
+    </svg>
+);
+
+const XLogo = () => (
+    <svg className="social-icon" viewBox="0 0 60 60" width="20" height="20" aria-hidden="true" focusable="false">
+        <rect x="2" y="2" width="56" height="56" rx="10" fill="#000000" />
+        <path d="M17 15h8.2l7 9.7 8.1-9.7h4.4L34.2 28.6 45.4 45h-8.2l-7.9-11-9.2 11H15.7l11.8-14.1L17 15z" fill="#ffffff" />
+    </svg>
+);
+
+const LinkedinLogo = () => (
+    <svg className="social-icon" viewBox="0 0 60 60" width="20" height="20" aria-hidden="true" focusable="false">
+        <rect x="2" y="2" width="56" height="56" rx="10" fill="#0A66C2" />
+        <rect x="14" y="24" width="8" height="24" fill="#ffffff" />
+        <circle cx="18" cy="15" r="4.5" fill="#ffffff" />
+        <path
+            d="M28 24h7.6v3.3h0.1c1.1-2 3.7-4.1 7.6-4.1 8.1 0 9.6 5.3 9.6 12.2V48h-8v-11.4c0-2.7 0-6.2-3.8-6.2-3.8 0-4.4 3-4.4 6v11.6h-8V24z"
+            fill="#ffffff"
+        />
+    </svg>
+);
+
 const tagRender = (props: CustomTagProps) => {
     const { label, value, closable, onClose } = props;
     const onPreventMouseDown = (event: React.MouseEvent<HTMLSpanElement>) => {
@@ -539,7 +562,7 @@ const RoomDetails = () => {
                                                                         room?.short_link
                                                                     }
                                                                 >
-                                                                    <FacebookOutlined />
+                                                                    <FacebookLogo />
                                                                 </FacebookShareButton>
                                                             </Tooltip>
                                                             <Tooltip
@@ -553,7 +576,7 @@ const RoomDetails = () => {
                                                                         room?.short_link
                                                                     }
                                                                 >
-                                                                    <TwitterOutlined />
+                                                                    <XLogo />
                                                                 </TwitterShareButton>
                                                             </Tooltip>
                                                             <Tooltip
@@ -567,7 +590,7 @@ const RoomDetails = () => {
                                                                         room?.short_link
                                                                     }
                                                                 >
-                                                                    <LinkedinOutlined />
+                                                                    <LinkedinLogo />
                                                                 </LinkedinShareButton>
                                                             </Tooltip>
                                                         </Space>
diff --git a/bbbeasy-frontend/src/components/Rooms.tsx b/bbbeasy-frontend/src/components/Rooms.tsx
index afd38c86..63ad5f3f 100644
--- a/bbbeasy-frontend/src/components/Rooms.tsx
+++ b/bbbeasy-frontend/src/components/Rooms.tsx
@@ -286,6 +286,7 @@ const Rooms = () => {
             ) : (
                 <>
                     <PageHeader
+                        className="rooms-page-header"
                         title={<Trans i18nKey="rooms" />}
                         extra={
                             AuthService.isAllowedAction(actions, 'add') && [
diff --git a/bbbeasy-frontend/src/components/Step3Form.tsx b/bbbeasy-frontend/src/components/Step3Form.tsx
index 1caf40dc..ee7a218e 100644
--- a/bbbeasy-frontend/src/components/Step3Form.tsx
+++ b/bbbeasy-frontend/src/components/Step3Form.tsx
@@ -137,7 +137,7 @@ export const Step3Form = (props: Props) => {
                 {enabled && (
                     <Modal
                         title={<Trans i18nKey={modalTitleTrans} />}
-                        className="presets-modal"
+                        className="presets-modal preset-settings-modal"
                         centered
                         open={isModalVisible}
                         onOk={() => setIsModalVisible(false)}
diff --git a/bbbeasy-frontend/src/components/Users.tsx b/bbbeasy-frontend/src/components/Users.tsx
index b2669f83..2f082c60 100644
--- a/bbbeasy-frontend/src/components/Users.tsx
+++ b/bbbeasy-frontend/src/components/Users.tsx
@@ -520,6 +520,7 @@ const Users = () => {
     return (
         <>
             <PageHeader
+                className="site-page-header users-page-header"
                 title={<Trans i18nKey="users" />}
                 extra={
                     AuthService.isAllowedAction(actions, 'add') &&
@@ -534,7 +535,7 @@ const Users = () => {
             {AuthService.isAllowedAction(actions, 'add') && colletRolesAction && (
                 <Modal
                     title={<Trans i18nKey="new_user" />}
-                    className="add-modal"
+                    className="add-modal user-add-modal"
                     centered
                     open={isModalVisible}
                     onOk={handleAdd}
@@ -588,14 +589,16 @@ const Users = () => {
                 </Modal>
             )}
 
-            <EditableTable
-                EditableCell={EditableCell}
-                editForm={editForm}
-                mergedColumns={mergedColumns}
-                dataSource={data}
-                loading={loading}
-                notFoundContent="no_data"
-            />
+            <div className="users-table">
+                <EditableTable
+                    EditableCell={EditableCell}
+                    editForm={editForm}
+                    mergedColumns={mergedColumns}
+                    dataSource={data}
+                    loading={loading}
+                    notFoundContent="no_data"
+                />
+            </div>
         </>
     );
 };
diff --git a/bbbeasy-frontend/src/components/auth/Login.tsx b/bbbeasy-frontend/src/components/auth/Login.tsx
index 7bf70fef..eed370ba 100644
--- a/bbbeasy-frontend/src/components/auth/Login.tsx
+++ b/bbbeasy-frontend/src/components/auth/Login.tsx
@@ -119,8 +119,47 @@ const Login: React.FC = () => {
     };
 
     return (
-        <Row>
-            <Col span={8} offset={8} className="section-top">
+        <Row className="login-page login-layout">
+            <Col xs={24} lg={12} className="login-hero-column">
+                <div className="login-hero">
+                    <div className="login-hero-tag">
+                        <span className="login-hero-tag-line" />
+                        <span>
+                            <Trans i18nKey="login-hero-tag" />
+                        </span>
+                    </div>
+
+                    <Title level={1} className="login-hero-title">
+                        <span className="login-hero-title-main">
+                            <Trans i18nKey="login-hero-title-main" />
+                        </span>
+                        <span className="login-hero-title-accent">
+                            <Trans i18nKey="login-hero-title-accent" />
+                        </span>
+                    </Title>
+
+                    <Paragraph className="login-hero-description">
+                        <Trans i18nKey="login-hero-description" />
+                    </Paragraph>
+
+                    <div className="login-hero-points">
+                        <div className="login-hero-point">
+                            <span className="login-hero-point-icon">✓</span>
+                            <span>
+                                <Trans i18nKey="login-hero-point-1" />
+                            </span>
+                        </div>
+                        <div className="login-hero-point">
+                            <span className="login-hero-point-icon">✓</span>
+                            <span>
+                                <Trans i18nKey="login-hero-point-2" />
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </Col>
+
+            <Col xs={24} lg={10} className="section-top login-form-column">
                 <Card className="form-content">
                     <Paragraph className="form-header text-center">
                         <img
diff --git a/bbbeasy-frontend/src/components/auth/Register.tsx b/bbbeasy-frontend/src/components/auth/Register.tsx
index 0abd0b1c..45ec396b 100644
--- a/bbbeasy-frontend/src/components/auth/Register.tsx
+++ b/bbbeasy-frontend/src/components/auth/Register.tsx
@@ -50,16 +50,18 @@ const Register = () => {
         confirmPassword: '',
         agreement: false,
     };
-    settingsService
-        .collect_settings()
-        .then((response) => {
-            console.log(response.data);
-            const settings: SettingsType = response.data;
-            setLogo(settings.logo);
-        })
-        .catch((error) => {
-            console.log(error);
-        });
+    React.useEffect(() => {
+        settingsService
+            .collect_settings()
+            .then((response) => {
+                const settings: SettingsType = response.data;
+                setLogo(settings.logo);
+            })
+            .catch((error) => {
+                console.log(error);
+            });
+    }, []);
+
     const navigate = useNavigate();
 
     const handleRegistration = (formValue: formType) => {
@@ -75,93 +77,138 @@ const Register = () => {
     };
 
     return (
-        <Row>
-            {successful ? (
-                <Col span={10} offset={7} className="section-top">
-                    <Result
-                        status="success"
-                        title={<Trans i18nKey="completed_registration" />}
-                        subTitle={<Trans i18nKey="user_account_created" />}
-                        extra={
-                            <Button onClick={() => navigate('/login')}>
-                                <Trans i18nKey="login-now" />
-                            </Button>
-                        }
-                    />
-                </Col>
-            ) : (
-                <Col span={8} offset={8} className="section-top">
-                    <Card className="form-content">
-                        <Paragraph className="form-header text-center">
-                            <img
-                                className="form-img"
-                                src={logo ? import.meta.env.VITE_API_URL + '/' + logo : '/images/logo_02.png'}
-                                alt="Logo"
-                            />
-                            <Title level={4}>
-                                <Trans i18nKey="sign-up" />
-                            </Title>
-                        </Paragraph>
-
-                        {message && (
-                            <Alert
-                                type="error"
-                                className="alert-msg"
-                                message={
-                                    <Trans i18nKey={Object.keys(EN_US).filter((elem) => EN_US[elem] == message)} />
-                                }
-                                showIcon
-                            />
-                        )}
-
-                        <Form
-                            layout="vertical"
-                            name="register_form"
-                            initialValues={initialValues}
-                            requiredMark={false}
-                            scrollToFirstError={true}
-                            validateTrigger="onSubmit"
-                            onFinish={handleRegistration}
-                            onValuesChange={() => setMessage('')}
-                        >
-                            <AddUserForm />
-                            <ConfirmPassword />
-                            <Form.Item
-                                className="form-agree"
-                                name="agreement"
-                                valuePropName="checked"
-                                rules={[
-                                    {
-                                        validator: (_, value) =>
-                                            value
-                                                ? Promise.resolve()
-                                                : Promise.reject(new Error(t('accept-agreement'))),
-                                    },
-                                ]}
-                            >
-                                <Checkbox>
-                                    <Trans i18nKey="agree" />
-                                    <a href="#">
-                                        {' '}
-                                        <Trans i18nKey="terms" />
-                                    </a>{' '}
-                                    <Trans i18nKey="and" />
-                                    <a href="#">
-                                        {' '}
-                                        <Trans i18nKey="privacy-policy" />
-                                    </a>
-                                </Checkbox>
-                            </Form.Item>
-
-                            <Form.Item>
-                                <Button type="primary" id="submit-btn" htmlType="submit" block>
-                                    <Trans i18nKey="register" />
+        <Row className="login-page login-layout register-page">
+            <Col xs={24} lg={12} className="login-hero-column">
+                <div className="login-hero">
+                    <div className="login-hero-tag">
+                        <span className="login-hero-tag-line" />
+                        <span>
+                            <Trans i18nKey="sign-up-hero-tag" />
+                        </span>
+                    </div>
+
+                    <Title level={1} className="login-hero-title">
+                        <span className="login-hero-title-main">
+                            <Trans i18nKey="sign-up-hero-title-main" />
+                        </span>
+                        <span className="login-hero-title-accent">
+                            <Trans i18nKey="sign-up-hero-title-accent" />
+                        </span>
+                    </Title>
+
+                    <Paragraph className="login-hero-description">
+                        <Trans i18nKey="sign-up-hero-description" />
+                    </Paragraph>
+
+                    <div className="login-hero-points">
+                        <div className="login-hero-point">
+                            <span className="login-hero-point-icon">✓</span>
+                            <span>
+                                <Trans i18nKey="sign-up-hero-point-1" />
+                            </span>
+                        </div>
+                        <div className="login-hero-point">
+                            <span className="login-hero-point-icon">✓</span>
+                            <span>
+                                <Trans i18nKey="sign-up-hero-point-2" />
+                            </span>
+                        </div>
+                        <div className="login-hero-point">
+                            <span className="login-hero-point-icon">✓</span>
+                            <span>
+                                <Trans i18nKey="sign-up-hero-point-3" />
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </Col>
+
+            <Col xs={24} lg={10} className="section-top login-form-column">
+                <Card className="form-content">
+                    {successful ? (
+                        <Result
+                            status="success"
+                            title={<Trans i18nKey="completed_registration" />}
+                            subTitle={<Trans i18nKey="user_account_created" />}
+                            extra={
+                                <Button onClick={() => navigate('/login')}>
+                                    <Trans i18nKey="login-now" />
                                 </Button>
-                            </Form.Item>
-                        </Form>
-                    </Card>
-                </Col>
-            )}
+                            }
+                        />
+                    ) : (
+                        <>
+                            <Paragraph className="form-header text-center">
+                                <img
+                                    className="form-img"
+                                    src={logo ? import.meta.env.VITE_API_URL + '/' + logo : '/images/logo_02.png'}
+                                    alt="Logo"
+                                />
+                                <Title level={4}>
+                                    <Trans i18nKey="sign-up" />
+                                </Title>
+                            </Paragraph>
+
+                            {message && (
+                                <Alert
+                                    type="error"
+                                    className="alert-msg"
+                                    message={
+                                        <Trans i18nKey={Object.keys(EN_US).filter((elem) => EN_US[elem] == message)} />
+                                    }
+                                    showIcon
+                                />
+                            )}
+
+                            <Form
+                                layout="vertical"
+                                name="register_form"
+                                initialValues={initialValues}
+                                requiredMark={false}
+                                scrollToFirstError={true}
+                                validateTrigger="onSubmit"
+                                onFinish={handleRegistration}
+                                onValuesChange={() => setMessage('')}
+                            >
+                                <AddUserForm />
+                                <ConfirmPassword />
+                                <Form.Item
+                                    className="form-agree"
+                                    name="agreement"
+                                    valuePropName="checked"
+                                    rules={[
+                                        {
+                                            validator: (_, value) =>
+                                                value
+                                                    ? Promise.resolve()
+                                                    : Promise.reject(new Error(t('accept-agreement'))),
+                                        },
+                                    ]}
+                                >
+                                    <Checkbox>
+                                        <Trans i18nKey="agree" />
+                                        <a href="#">
+                                            {' '}
+                                            <Trans i18nKey="terms" />
+                                        </a>{' '}
+                                        <Trans i18nKey="and" />
+                                        <a href="#">
+                                            {' '}
+                                            <Trans i18nKey="privacy-policy" />
+                                        </a>
+                                    </Checkbox>
+                                </Form.Item>
+
+                                <Form.Item>
+                                    <Button type="primary" id="submit-btn" htmlType="submit" block>
+                                        <Trans i18nKey="register" />
+                                    </Button>
+                                </Form.Item>
+                            </Form>
+                        </>
+                    )}
+                </Card>
+            </Col>
         </Row>
     );
 };
diff --git a/bbbeasy-frontend/src/components/layout/AppHeader.tsx b/bbbeasy-frontend/src/components/layout/AppHeader.tsx
index 54b16275..6e0e70f1 100644
--- a/bbbeasy-frontend/src/components/layout/AppHeader.tsx
+++ b/bbbeasy-frontend/src/components/layout/AppHeader.tsx
@@ -76,20 +76,32 @@ const AppHeader = () => {
     const location = useLocation();
     const [searchForm] = Form.useForm();
     const isRoomsSearch = location.pathname.includes('rooms');
+    const isRecordingsSearch = location.pathname.includes('recordings');
+    const isLabelsSearch = location.pathname.includes('labels');
+    const isPresetsSearch = location.pathname.includes('presets');
+    const isRoomDetailsSearch = location.pathname.startsWith('/r/');
+    const isBrandingSearch = location.pathname.includes('branding');
+    const isPresetSettingsSearch = location.pathname.includes('bigbluebutton');
+    const isUsersSearch = location.pathname.includes('users');
+    const isRolesSearch = location.pathname.includes('roles');
+    const isAdministrationSearch = location.pathname.includes('administration');
     const [logo, setLogo] = React.useState<string>('');
     const isLoginPage = location.pathname.includes('login');
-    if (isLoginPage) {
-        setIsLogged(false);
-    }
-    settingsService
-        .collect_settings()
-        .then((response) => {
-            const settings: SettingsType = response.data;
-            setLogo(settings.logo);
-        })
-        .catch((error) => {
-            console.log(error);
-        });
+    const storedUser = AuthService.getCurrentUser();
+    const storedSession = AuthService.getCurrentSession();
+    const isAuthenticated = Boolean(storedUser && storedSession);
+
+    useEffect(() => {
+        settingsService
+            .collect_settings()
+            .then((response) => {
+                const settings: SettingsType = response.data;
+                setLogo(settings.logo);
+            })
+            .catch((error) => {
+                console.log(error);
+            });
+    }, []);
     const logout = () => {
         AuthService.logout()
             .catch((error) => {
@@ -187,6 +199,7 @@ const AppHeader = () => {
         </Dropdown>
     );
 
+    const activeUser = currentUser ?? storedUser;
     const menuProfile = {
         items: [
             {
@@ -194,9 +207,9 @@ const AppHeader = () => {
                 className: 'username-item',
                 label: (
                     <>
-                        <Trans i18nKey="signed_as" /> {currentUser?.username}
+                        <Trans i18nKey="signed_as" /> {activeUser?.username}
                         <br />
-                        <Text>{currentUser?.email}</Text>
+                        <Text>{activeUser?.email}</Text>
                     </>
                 ),
             },
@@ -220,7 +233,7 @@ const AppHeader = () => {
     return (
         <Header className="site-header">
             <>
-                {!isLogged ? (
+                {!isAuthenticated || isLoginPage ? (
                     <Paragraph className="site-header-inner">
                         <Link to={'/'}>
                             <img
@@ -250,7 +263,17 @@ const AppHeader = () => {
                                 <Form.Item name="search" className="mb-0">
                                     <Input
                                         onPressEnter={isRoomsSearch ? handleFilter : null}
-                                        className="search-input global-search"
+                                className={`search-input global-search ${isRoomsSearch ? 'rooms-search-input' : ''} ${
+                                    isRecordingsSearch ? 'recordings-search-input' : ''
+                                } ${isLabelsSearch ? 'labels-search-input' : ''} ${
+                                    isPresetsSearch ? 'presets-search-input' : ''
+                                } ${isRoomDetailsSearch ? 'room-details-search-input' : ''} ${
+                                    isBrandingSearch ? 'branding-search-input' : ''
+                                } ${isPresetSettingsSearch ? 'preset-settings-search-input' : ''} ${
+                                    isUsersSearch ? 'users-search-input' : ''
+                                } ${isRolesSearch ? 'roles-search-input' : ''} ${
+                                    isAdministrationSearch ? 'administration-search-input' : ''
+                                }`}
                                         size="middle"
                                         placeholder={isRoomsSearch ? t('search_all_rooms') : t('search')}
                                         allowClear
diff --git a/bbbeasy-frontend/src/components/layout/AppSider.tsx b/bbbeasy-frontend/src/components/layout/AppSider.tsx
index 6b8b4dbc..a9a7c101 100644
--- a/bbbeasy-frontend/src/components/layout/AppSider.tsx
+++ b/bbbeasy-frontend/src/components/layout/AppSider.tsx
@@ -78,7 +78,7 @@ const AppSider = (props: Props) => {
 
     useEffect(() => {
         const user: UserType = AuthService.getCurrentUser();
-        const menuSider = MenuService.getMenuSider(user.permissions);
+        const menuSider = MenuService.getMenuSider(user?.permissions ?? {});
 
         setMenuItems(menuSider.items);
         setNewMenuItems(menuSider.news);
diff --git a/bbbeasy-frontend/src/lib/AxiosInstance.ts b/bbbeasy-frontend/src/lib/AxiosInstance.ts
index abdddf8d..628f4d13 100644
--- a/bbbeasy-frontend/src/lib/AxiosInstance.ts
+++ b/bbbeasy-frontend/src/lib/AxiosInstance.ts
@@ -17,30 +17,22 @@
  */
 
 import axios, { AxiosRequestHeaders } from 'axios';
+import AuthService from '../services/auth.service';
 
 export const axiosInstance = axios.create();
 
 axiosInstance.interceptors.request.use((config) => {
     try {
-        const sessionStr = localStorage.getItem('session');
-        if (sessionStr) {
-            const session = JSON.parse(sessionStr);
-            if (session?.expiresAt && Date.parse(session.expiresAt) < Date.now()) {
-                localStorage.removeItem('user');
-                localStorage.removeItem('session');
-                return config;
-            }
-
-            if (session?.accessToken && session?.tokenType) {
-                config.headers = (config.headers || {}) as AxiosRequestHeaders;
-                Object.assign(config.headers, {
-                    Authorization: `${session.tokenType} ${session.accessToken}`,
-                });
-            }
+        const session = AuthService.getCurrentSession();
+        if (session?.accessToken) {
+            config.headers = (config.headers || {}) as AxiosRequestHeaders;
+            Object.assign(config.headers, {
+                Authorization: `${session.tokenType ?? 'Bearer'} ${session.accessToken}`,
+            });
         }
     } catch (error) {
-        console.warn('Failed to process session from localStorage:', error);
-        localStorage.removeItem('session');
+        console.warn('Failed to process auth state from localStorage:', error);
+        AuthService.clearAuth();
     }
 
     return config;
diff --git a/bbbeasy-frontend/src/locale/ar-TN.json b/bbbeasy-frontend/src/locale/ar-TN.json
index 83e00058..a7bdfe6e 100644
--- a/bbbeasy-frontend/src/locale/ar-TN.json
+++ b/bbbeasy-frontend/src/locale/ar-TN.json
@@ -66,6 +66,19 @@
     "username-already-exist": "اسم المستخدم موجود مسبقا",
     "email-already-exist": "البريد الإلكتروني موجود مسبقا",
     "welcome-app": "مرحبا بعودتك",
+    "login-hero-tag": "مساحة عمل احترافية",
+    "login-hero-title-main": "كل ما تحتاجه.",
+    "login-hero-title-accent": "بكل بساطة.",
+    "login-hero-description": "مرحبًا بك في BBBEasy. سجّل الدخول للمتابعة إلى مساحة عملك وإدارة نشاطك في تجربة آمنة وواضحة وفعّالة.",
+    "login-hero-point-1": "وصول آمن",
+    "login-hero-point-2": "سير عمل بسيط",
+    "sign-up-hero-tag": "ابدأ الآن",
+    "sign-up-hero-title-main": "أنشئ",
+    "sign-up-hero-title-accent": "حساب BBBEasy",
+    "sign-up-hero-description": "أنشئ حسابك وابدأ باستخدام مساحة عمل آمنة وعصرية مصممة للتعاون بسرعة وسهولة.",
+    "sign-up-hero-point-1": "تسجيل سريع وبسيط",
+    "sign-up-hero-point-2": "وصول آمن إلى الحساب",
+    "sign-up-hero-point-3": "جاهز للاستعمال في ثوانٍ",
     "welcome": "رسالة ترحيب",
     "accept-agreement": "يجب قبول الاتفاق",
     "agree": "أوافق على",
diff --git a/bbbeasy-frontend/src/locale/en-US.json b/bbbeasy-frontend/src/locale/en-US.json
index b5b2c410..fd49515b 100644
--- a/bbbeasy-frontend/src/locale/en-US.json
+++ b/bbbeasy-frontend/src/locale/en-US.json
@@ -66,6 +66,19 @@
     "username-already-exist": "Username already exists",
     "email-already-exist": "Email already exists",
     "welcome-app": "Welcome back",
+    "login-hero-tag": "Professional workspace",
+    "login-hero-title-main": "Everything you need.",
+    "login-hero-title-accent": "Simply.",
+    "login-hero-description": "Welcome to BBBEasy. Sign in to continue to your workspace and manage your activity through a secure, clear and efficient experience.",
+    "login-hero-point-1": "Secure access",
+    "login-hero-point-2": "Simple workflow",
+    "sign-up-hero-tag": "Get started",
+    "sign-up-hero-title-main": "Create your",
+    "sign-up-hero-title-accent": "BBBEasy account.",
+    "sign-up-hero-description": "Set up your account and access a secure, modern workspace built for fast collaboration and simple onboarding.",
+    "sign-up-hero-point-1": "Quick and simple registration",
+    "sign-up-hero-point-2": "Secure account access",
+    "sign-up-hero-point-3": "Ready to use in seconds",
     "welcome": "Welcome",
     "accept-agreement": "Should accept agreement",
     "agree": "I agree to the",
diff --git a/bbbeasy-frontend/src/locale/fr-FR.json b/bbbeasy-frontend/src/locale/fr-FR.json
index 7fffb4b2..ae365c72 100644
--- a/bbbeasy-frontend/src/locale/fr-FR.json
+++ b/bbbeasy-frontend/src/locale/fr-FR.json
@@ -67,6 +67,19 @@
     "username-already-exist": "Ce nom d’utilisateur existe déjà",
     "email-already-exist": "Cette adresse e-mail existe déjà",
     "welcome-app": "Bon retour",
+    "login-hero-tag": "Espace professionnel",
+    "login-hero-title-main": "Tout ce qu'il vous faut.",
+    "login-hero-title-accent": "Simplement.",
+    "login-hero-description": "Bienvenue sur BBBEasy. Connectez-vous pour continuer vers votre espace de travail et gérer votre activité dans un environnement sécurisé, clair et efficace.",
+    "login-hero-point-1": "Accès sécurisé",
+    "login-hero-point-2": "Flux de travail simple",
+    "sign-up-hero-tag": "Commencer",
+    "sign-up-hero-title-main": "Créez votre",
+    "sign-up-hero-title-accent": "compte BBBEasy.",
+    "sign-up-hero-description": "Créez votre compte et accédez à un espace de travail sécurisé et moderne, pensé pour collaborer rapidement et commencer facilement.",
+    "sign-up-hero-point-1": "Inscription rapide et simple",
+    "sign-up-hero-point-2": "Accès sécurisé au compte",
+    "sign-up-hero-point-3": "Prêt à utiliser en quelques secondes",
     "welcome": "Message de Bienvenue",
     "accept-agreement": "Devrait accepter l'accord",
     "agree": "J'accepte les",
diff --git a/bbbeasy-frontend/src/services/auth.service.ts b/bbbeasy-frontend/src/services/auth.service.ts
index 375e0065..17926b0e 100644
--- a/bbbeasy-frontend/src/services/auth.service.ts
+++ b/bbbeasy-frontend/src/services/auth.service.ts
@@ -21,7 +21,70 @@ import { apiRoutes } from '../routing/backend-config';
 import { UserType } from '../types/UserType';
 import { SessionType } from '../types/SessionType';
 
+type AuthState = {
+    user?: UserType;
+    session?: SessionType;
+};
+
 class AuthService {
+    private readonly authStorageKey = 'auth';
+
+    private readStoredAuth(): AuthState {
+        const authStr = localStorage.getItem(this.authStorageKey);
+        if (authStr) {
+            try {
+                const authData = JSON.parse(authStr);
+                return authData && typeof authData === 'object' ? authData : {};
+            } catch {
+                localStorage.removeItem(this.authStorageKey);
+            }
+        }
+
+        return {};
+    }
+
+    private migrateLegacyAuth(): AuthState {
+        const legacyUserStr = localStorage.getItem('user');
+        const legacySessionStr = localStorage.getItem('session');
+        if (!legacyUserStr && !legacySessionStr) {
+            return {};
+        }
+
+        try {
+            const authState: AuthState = {
+                user: legacyUserStr ? (JSON.parse(legacyUserStr) as UserType) : undefined,
+                session: legacySessionStr ? (JSON.parse(legacySessionStr) as SessionType) : undefined,
+            };
+            localStorage.setItem(this.authStorageKey, JSON.stringify(authState));
+            localStorage.removeItem('user');
+            localStorage.removeItem('session');
+
+            return authState;
+        } catch {
+            localStorage.removeItem('user');
+            localStorage.removeItem('session');
+            return {};
+        }
+    }
+
+    private readAuth(): AuthState {
+        const storedAuth = this.readStoredAuth();
+        if (storedAuth.user || storedAuth.session) {
+            return storedAuth;
+        }
+
+        return this.migrateLegacyAuth();
+    }
+
+    private writeAuth(nextAuth: AuthState): void {
+        if (!nextAuth.user && !nextAuth.session) {
+            localStorage.removeItem(this.authStorageKey);
+            return;
+        }
+
+        localStorage.setItem(this.authStorageKey, JSON.stringify(nextAuth));
+    }
+
     register(data: object) {
         return axiosInstance.post(apiRoutes.REGISTER_URL, {
             data,
@@ -61,57 +124,59 @@ class AuthService {
     }
 
     addCurrentUser(user: UserType) {
-        localStorage.setItem('user', JSON.stringify(user));
+        const auth = this.readAuth();
+        this.writeAuth({
+            user,
+            session: auth.session,
+        });
     }
 
     addCurrentSession(session: SessionType) {
-        localStorage.setItem('session', JSON.stringify(session));
+        const auth = this.readAuth();
+        this.writeAuth({
+            user: auth.user,
+            session,
+        });
     }
 
-    getCurrentUser() {
-        const userStr: string = localStorage.getItem('user');
-        if (userStr) {
-            try {
-                return JSON.parse(userStr);
-            } catch {
-                this.clearAuth();
-            }
+    getCurrentUser(): UserType | null {
+        const auth = this.readAuth();
+        if (auth.user) {
+            return auth.user;
         }
+
         return null;
     }
 
-    getCurrentSession() {
-        const sessionStr: string = localStorage.getItem('session');
-        if (sessionStr) {
-            try {
-                const session: SessionType = JSON.parse(sessionStr);
-                if (session.expiresAt && Date.parse(session.expiresAt) < Date.now()) {
-                    this.clearAuth();
-                    return null;
-                }
-
-                return session;
-            } catch {
+    getCurrentSession(): SessionType | null {
+        const auth = this.readAuth();
+        if (auth.session) {
+            if (auth.session.expiresAt && Date.parse(auth.session.expiresAt) < Date.now()) {
                 this.clearAuth();
+                return null;
             }
+
+            return auth.session;
         }
+
         return null;
     }
 
     getAccessToken(): string | null {
-        const currentSession: SessionType = this.getCurrentSession();
+        const currentSession = this.getCurrentSession();
         return currentSession ? currentSession.accessToken : null;
     }
 
     clearAuth() {
+        localStorage.removeItem(this.authStorageKey);
         localStorage.removeItem('user');
         localStorage.removeItem('session');
     }
 
     updateCurrentUser(username: string, email: string, avatar: string) {
-        const userStr: string = localStorage.getItem('user');
-        if (userStr) {
-            const userObj: UserType = JSON.parse(userStr);
+        const auth = this.readAuth();
+        if (auth.user) {
+            const userObj: UserType = auth.user;
             userObj.username = username;
             userObj.email = email;
             userObj.avatar = avatar;
@@ -121,8 +186,10 @@ class AuthService {
     }
 
     getActionsPermissionsByGroup(group: string): string[] {
-        const currentUser: UserType = this.getCurrentUser();
-        if (currentUser) return currentUser.permissions[group];
+        const currentUser = this.getCurrentUser();
+        if (currentUser?.permissions && currentUser.permissions[group]) {
+            return currentUser.permissions[group] as string[];
+        }
         return [];
     }
 
diff --git a/bbbeasy-frontend/src/services/menu.service.ts b/bbbeasy-frontend/src/services/menu.service.ts
index cbcb9de7..d331f4d1 100644
--- a/bbbeasy-frontend/src/services/menu.service.ts
+++ b/bbbeasy-frontend/src/services/menu.service.ts
@@ -111,7 +111,7 @@ const addSettings = (keys: string[], items: MenuType[]) => {
 };
 
 class MenuService {
-    getMenuSider(userPermissions: object): MenuSiderType {
+    getMenuSider(userPermissions: Record<string, string[]> = {}): MenuSiderType {
         const items: MenuType[] = [];
         const news: string[] = [];
         let defaultRoute = '';
@@ -120,7 +120,7 @@ class MenuService {
             const keys = Object.keys(userPermissions);
 
             const addActionExist = (key: string) => {
-                if (userPermissions[key].includes('add')) {
+                if (Array.isArray(userPermissions[key]) && userPermissions[key].includes('add')) {
                     news.push(key);
                 }
             };
diff --git a/bbbeasy-frontend/vite.config.ts b/bbbeasy-frontend/vite.config.ts
index d9b90695..3e83f882 100644
--- a/bbbeasy-frontend/vite.config.ts
+++ b/bbbeasy-frontend/vite.config.ts
@@ -43,11 +43,11 @@ export default defineConfig(({ mode }) => {
             sourcemap: env.GENERATE_SOURCEMAP !== 'false',
             emptyOutDir: true,
         },
-        server: {
+        server: {   
             host: true,
             port: 3300,
-            strictPort: true,
-            allowedHosts: ['bbbeasy.test', 'localhost', '127.0.0.1'],
+            strictPort: true,   
+            allowedHosts: ['bbbeasy.test', 'localhost', '127.0.0.1',"snooper-foe-cosigner.ngrok-free.dev"],
             open: env.NODE_ENV === 'development' ? 'http://bbbeasy.test/' : false,
             proxy: {
                 '/api': {
diff --git a/vagrant/dev/nginx/bbbeasy.conf b/vagrant/dev/nginx/bbbeasy.conf
index 3486b74f..860e63ef 100644
--- a/vagrant/dev/nginx/bbbeasy.conf
+++ b/vagrant/dev/nginx/bbbeasy.conf
@@ -69,6 +69,7 @@ server {
     fastcgi_index index.php;
     fastcgi_read_timeout 60;
     fastcgi_split_path_info ^(.+\.php)(/.+)$;
+    fastcgi_param HTTP_AUTHORIZATION $http_authorization;
     fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
 
     access_log /var/log/nginx/bbbeasy-backend-access.log;
@@ -124,8 +125,8 @@ server {
     proxy_read_timeout 300s;
   }
 
-  # Deny access to dot-files.
-  location ~ /\. {
+  # Deny access to dot-files, except the Vite/Yarn PnP virtual folders needed by dev mode.
+  location ~ /\.(?!yarn/|vite/) {
     deny all;
     access_log off;
     log_not_found off;