diff --git a/services/app/apps/codebattle/assets/css/external.scss b/services/app/apps/codebattle/assets/css/external.scss
index 4ac568189..8d79667f1 100644
--- a/services/app/apps/codebattle/assets/css/external.scss
+++ b/services/app/apps/codebattle/assets/css/external.scss
@@ -39,6 +39,11 @@ $dark-red: #b00020;
   background-color: #0C0F1E !important;
 }
 
+.cb-bg-dark {
+  background-color: #0C0F1E !important;
+  background: linear-gradient(135deg, #242424 0%, #151515 100%);
+}
+
 // Example custom classes for your text
 .battle-title {
   color: $warning; // or #fffb47 if you want a brighter yellow
diff --git a/services/app/apps/codebattle/assets/css/grades.scss b/services/app/apps/codebattle/assets/css/grades.scss
index 3de8d9d74..e38c4c7be 100644
--- a/services/app/apps/codebattle/assets/css/grades.scss
+++ b/services/app/apps/codebattle/assets/css/grades.scss
@@ -108,6 +108,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  margin-left: -10px;
 }
 
 .rank-caption {
diff --git a/services/app/apps/codebattle/assets/css/style.scss b/services/app/apps/codebattle/assets/css/style.scss
index 1e9e2c1cb..04ba47bab 100644
--- a/services/app/apps/codebattle/assets/css/style.scss
+++ b/services/app/apps/codebattle/assets/css/style.scss
@@ -35,6 +35,7 @@ $cb-border-color: #4c4c5a;
 // $cb-border-color: rgba(255, 255, 255, 0.15);
 
 $cb-bg-panel: #2a2a35;
+$cb-bg-panel-background: linear-gradient(135deg, #2a2a35 0%, #171720 100%);
 // $cb-bg-panel: #291c1c;
 // $cb-bg-panel: #1c2129;
 
@@ -185,7 +186,11 @@ input[type="range"] {
 }
 
 .dark-bg {
-  background: $dark;
+  background-color: $dark;
+}
+
+.cb-bg-dark {
+  background-color: #1a1a1a;
 }
 
 .bg-winner {
@@ -331,7 +336,7 @@ a {
 }
 
 .cb-heatmap-background {
-  background-color: $cb-bg-panel;
+  background: $cb-bg-panel-background;
 }
 
 .react-calendar-heatmap {
@@ -419,9 +424,8 @@ a {
 }
 
 .cb-user-dark-offline {
-  border: 0.2rem solid transparent;
   border-color: var(--gray);
-  border-radius: $cb-border-radius;
+  border-radius: 50%;
 }
 
 .cb-timer-progress {
@@ -1115,7 +1119,14 @@ a:hover {
 }
 
 .dropdown-item.cb-dropdown-item {
-  &:hover {
+  color: white;
+
+  &:disabled,
+  &.disabled {
+    color: $text-muted;
+  }
+
+  &:hover:not(:disabled):not(.disabled) {
     background-color: $cb-bg-panel;
   }
 }
@@ -2049,9 +2060,19 @@ a:hover {
   border-radius: 0.5rem;
 }
 
+
+
 .cb-bg-panel {
   background-color: $cb-bg-panel;
 
+  &:not(.cb-toolbar):not(.cb-slider-timeline) {
+    background: $cb-bg-panel-background;
+  }
+
+  &.form-control {
+    background-color: $cb-bg-highlight-panel;
+  }
+
   &.form-control:hover,
   &.form-control:focus {
     background-color: $cb-bg-panel;
@@ -2438,7 +2459,7 @@ a.cb-text:hover {
 }
 
 .card.cb-card {
-  background-color: $cb-bg-panel;
+  background-color: transparent;
   border-color: $cb-border-color;
 
   & .card-header {
diff --git a/services/app/apps/codebattle/assets/js/widgets/components/InvitesContainer.jsx b/services/app/apps/codebattle/assets/js/widgets/components/InvitesContainer.jsx
index 909330ceb..d74e6da9b 100644
--- a/services/app/apps/codebattle/assets/js/widgets/components/InvitesContainer.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/components/InvitesContainer.jsx
@@ -103,9 +103,8 @@ function InvitesContainer() {
       >
         {({ ref, ...triggerHandler }) => (
           <Button
-            variant="dark"
             {...triggerHandler}
-            className="attachment mx-2"
+            className="bg-transparent border-0 attachment mx-2"
           >
             <img
               ref={ref}
diff --git a/services/app/apps/codebattle/assets/js/widgets/components/TournamentPreviewPanel.jsx b/services/app/apps/codebattle/assets/js/widgets/components/TournamentPreviewPanel.jsx
index 886b26746..2446994a3 100644
--- a/services/app/apps/codebattle/assets/js/widgets/components/TournamentPreviewPanel.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/components/TournamentPreviewPanel.jsx
@@ -13,7 +13,7 @@ const TournamentPreviewPanel = ({
   end,
 }) => (
   <div className={className}>
-    <div className="d-flex flex-column cb-bg-panel cb-rounded p-3">
+    <div className="d-flex flex-column border cb-border-color cb-rounded p-3">
       <span>{`Start Date: ${dayjs(start).format('MMMM DD, YYYY')}`}</span>
       <span>{`Time: ${dayjs(start).format('hh:mm A')} - ${dayjs(end).format('hh:mm A')}`}</span>
       {tournament.grade !== grades.open
diff --git a/services/app/apps/codebattle/assets/js/widgets/components/TournamentTimer.jsx b/services/app/apps/codebattle/assets/js/widgets/components/TournamentTimer.jsx
index 66d8e928b..35a469d8c 100644
--- a/services/app/apps/codebattle/assets/js/widgets/components/TournamentTimer.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/components/TournamentTimer.jsx
@@ -30,11 +30,11 @@ const TournamentTimer = ({ date = new Date(), label, children }) => {
   }
 
   return (
-    <>
+    <span className="d-inline-flex">
       {label}
       {' '}
-      <span className="text-monospace">{dayjs.duration(duration).format('HH:mm:ss')}</span>
-    </>
+      <span className="text-monospace text-warning ml-2">{dayjs.duration(duration).format('HH:mm:ss')}</span>
+    </span>
   );
 };
 
diff --git a/services/app/apps/codebattle/assets/js/widgets/components/UserLabel.jsx b/services/app/apps/codebattle/assets/js/widgets/components/UserLabel.jsx
index adad058ce..44f33502b 100644
--- a/services/app/apps/codebattle/assets/js/widgets/components/UserLabel.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/components/UserLabel.jsx
@@ -15,7 +15,7 @@ function UserLabel({ user }) {
   );
   const onlineIndicatorClassName = cn('mr-1', {
     'cb-user-online': isOnline,
-    'cb-user-offline': !isOnline,
+    'cb-user-dark-offline': !isOnline,
   });
 
   return (
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/game/ChatWidget.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/game/ChatWidget.jsx
index 47dd5e665..1b1de1d20 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/game/ChatWidget.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/game/ChatWidget.jsx
@@ -81,10 +81,10 @@ function ChatWidget() {
 
   return (
     <ChatContextMenu menuId={menuId} inputRef={inputRef} request={menuRequest}>
-      <div className="d-flex flex-wrap flex-sm-nowrap cb-bg-panel shadow-sm h-100 cb-rounded">
+      <div className="d-flex cb-bg-panel shadow-sm h-100 cb-rounded">
         <div
           className={cn(
-            'd-none d-lg-flex d-md-flex d-sm-flex flex-column flex-grow-1 position-relative p-0 h-100 mh-100 rounded-left',
+            'd-flex flex-column flex-grow-1 position-relative p-0 h-100 mh-100 rounded-left',
             'cb-game-chat-container cb-messages-container cb-text',
           )}
         >
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/game/EditorToolbar.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/game/EditorToolbar.jsx
index 813244345..bfe81d474 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/game/EditorToolbar.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/game/EditorToolbar.jsx
@@ -48,7 +48,7 @@ const EditorToolbar = ({
   <>
     <div
       ref={toolbarRef}
-      className="cb-bg-panel cb-border-color rounded-top"
+      className="cb-bg-panel cb-toolbar cb-border-color rounded-top"
       data-player-type={type}
     >
       <div className={toolbarClassNames} role="toolbar">
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/lobby/ActiveGames.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/lobby/ActiveGames.jsx
index 3ada34700..67955a99c 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/lobby/ActiveGames.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/lobby/ActiveGames.jsx
@@ -69,7 +69,7 @@ const ActiveGames = ({
 
   return (
     <>
-      <div className="d-none d-md-block table-responsive rounded-bottom cb-bg-panel cb-rounded">
+      <div className="d-none d-md-block table-responsive rounded-bottom cb-rounded">
         <table className="table table-striped mb-0">
           <thead className="text-center text-white">
             <tr>
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/lobby/CodebattleLeagueDescription.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/lobby/CodebattleLeagueDescription.jsx
index 667eae523..3b9cf6525 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/lobby/CodebattleLeagueDescription.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/lobby/CodebattleLeagueDescription.jsx
@@ -5,7 +5,7 @@ import React from 'react';
 
 const CodebattleLeagueDescription = () => (
   <section className="container my-3">
-    <div className="cb-bg-panel cb-rounded p-3 text-center">
+    <div className="p-3 text-center">
       <h2 className="text-white m-0">Codebattle League</h2>
       <p className="text-white mt-2 mb-3">
         Challenge the best! Participate in the Competition tournaments, defeat
@@ -15,7 +15,7 @@ const CodebattleLeagueDescription = () => (
 
       {/* Toggle for Rules/Details */}
       <button
-        className="btn btn-secondary cb-btn-secondary"
+        className="btn btn-secondary cb-btn-secondary cb-rounded"
         type="button"
         data-toggle="collapse"
         data-target="#leagueProtocol"
@@ -397,6 +397,6 @@ const CodebattleLeagueDescription = () => (
       </div>
     </div>
   </section>
-  );
+);
 
 export default CodebattleLeagueDescription;
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/lobby/LobbyChat.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/lobby/LobbyChat.jsx
index 5a42ad9c7..29c0c5f78 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/lobby/LobbyChat.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/lobby/LobbyChat.jsx
@@ -64,7 +64,7 @@ function ChatGroupedPlayersList({ players, displayMenu, mode }) {
 
 const chatHeaderClassName = cn(
   'col-lg-8 col-md-8 d-flex flex-column position-relative',
-  'p-0 cb-bg-panel rounded-left h-sm-100 cb-lobby-widget-container w-100',
+  'p-0 rounded-left h-sm-100 cb-lobby-widget-container w-100',
 );
 
 function LobbyChat({
@@ -119,7 +119,7 @@ function LobbyChat({
 
   return (
     <ChatContextMenu menuId={menuId} inputRef={inputRef} request={menuRequest}>
-      <div className="d-flex flex-column flex-lg-row flex-md-row rounded shadow-sm mt-2">
+      <div className="d-flex flex-column flex-lg-row flex-md-row cb-bg-panel cb-rounded shadow-sm mt-2">
         <div
           className={chatHeaderClassName}
         >
@@ -129,7 +129,7 @@ function LobbyChat({
         </div>
         <div className={
           cn(
-            'col-lg-4 col-md-4 p-0 pb-3 pb-sm-4 cb-bg-panel cb-players-container',
+            'col-lg-4 col-md-4 p-0 pb-3 pb-sm-4 cb-players-container',
             'border-left cb-border-color rounded-right',
           )
         }
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/lobby/LobbyWidget.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/lobby/LobbyWidget.jsx
index 9abd60cd9..bbe1b797e 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/lobby/LobbyWidget.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/lobby/LobbyWidget.jsx
@@ -155,7 +155,7 @@ const LobbyWidget = () => {
       <Modal
         show={showCreateGameModal}
         onHide={handleCloseCreateGameModal}
-        contentClassName="cb-bg-highlight-panel"
+        contentClassName="cb-bg-panel"
       >
         <Modal.Header className="cb-border-color text-white" closeButton>
           <Modal.Title>Create a game</Modal.Title>
@@ -167,7 +167,7 @@ const LobbyWidget = () => {
       <Modal
         show={showJoinGameModal}
         onHide={handleCloseJoinGameModal}
-        contentClassName="cb-bg-highlight-panel cb-join-game-modal"
+        contentClassName="cb-bg-panel cb-join-game-modal"
       >
         <Modal.Header className="cb-border-color text-white" closeButton>
           <Modal.Title>Join a game</Modal.Title>
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/lobby/SeasonProfilePanel.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/lobby/SeasonProfilePanel.jsx
index 07731468f..72edb7b7a 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/lobby/SeasonProfilePanel.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/lobby/SeasonProfilePanel.jsx
@@ -67,7 +67,7 @@ const SeasonProfilePanel = ({
             <div>
               {liveTournaments?.length !== 0 && (
                 <>
-                  <div className="d-flex justify-content-center align-items-center pt-2 cb-bg-panel">
+                  <div className="d-flex justify-content-center align-items-center pt-2">
                     <span className="text-white text-uppercase h4">
                       Live Tournaments
                     </span>
@@ -86,7 +86,7 @@ const SeasonProfilePanel = ({
               )}
               {seasonTournaments?.length !== 0 && (
                 <>
-                  <div className="d-flex justify-content-center pt-2 cb-bg-panel">
+                  <div className="d-flex justify-content-center pt-2">
                     <span className="text-white text-uppercase h4">
                       Upcoming Tournaments
                     </span>
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/lobby/TournamentListItem.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/lobby/TournamentListItem.jsx
index 6ee83516c..a1fe5e677 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/lobby/TournamentListItem.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/lobby/TournamentListItem.jsx
@@ -13,6 +13,8 @@ import { getTournamentUrl } from '@/utils/urlBuilders';
 import dayjs from '../../../i18n/dayjs';
 import tournamentStates from '../../config/tournament';
 
+const iconSize = { width: '22px', height: '22px' };
+
 const mapTournamentTitleByState = {
   [tournamentStates.waitingParticipants]: 'Waiting Players',
   [tournamentStates.active]: 'Playing',
@@ -73,30 +75,30 @@ const TournamentTitle = ({ tournament }) => {
 };
 
 const TournamentAction = ({ tournament, isAdmin = false }) => {
-  const infoClassName = 'btn btn-outline-secondary cb-btn-outline-secondary mx-2 px-3 cb-rounded border-0';
-
-  const actionClassName = cn('btn text-nowrap px-2 cb-rounded', {
-    'btn-secondary cb-btn-secondary': [
-      tournamentStates.finished,
-      tournamentStates.canceled,
-    ].includes(tournament.state),
-    'btn-success cb-btn-success': [
-      tournamentStates.active,
-      tournamentStates.upcoming,
-      tournamentStates.waitingParticipants,
-    ].includes(tournament.state),
-  });
-
   const text = getActionText(tournament);
+  const showTournamentLink = (tournament.state !== tournamentStates.upcoming || isAdmin);
 
   const openTournamentInfo = () => {
     NiceModal.show(ModalCodes.tournamentModal, { tournament });
   };
 
+  const infoClassName = cn(
+    'btn btn-outline-secondary cb-btn-outline-secondary',
+    'mx-2 px-3 cb-rounded border-0',
+    {
+      'btn-lg': !showTournamentLink,
+    },
+  );
+
+  const actionClassName = cn(
+    'btn btn-secondary cb-btn-secondary',
+    'text-nowrap px-2 cb-rounded',
+  );
+
   return (
     <div className="align-content-center">
       <div className="d-flex">
-        {(tournament.state !== tournamentStates.upcoming || isAdmin) && (
+        {showTournamentLink && (
           <a
             type="button"
             className={actionClassName}
@@ -144,7 +146,7 @@ const TournamentListItem = ({ tournament, icon, isAdmin = false }) => (
   <div className="border cb-border-color cb-rounded cb-subtle-background my-2 mr-2" style={{ width: '350px' }}>
     <div className="d-flex flex-column p-3 align-content-center align-items-baseline">
       <div className="d-flex align-items-center">
-        <div className="d-none d-lg-block d-md-block">
+        <div className="d-none d-lg-block d-md-block mr-2">
           {icon || getIconForGrade(tournament.grade)}
         </div>
         <TournamentTitle tournament={tournament} />
@@ -155,32 +157,48 @@ const TournamentListItem = ({ tournament, icon, isAdmin = false }) => (
           {tournament.grade !== grades.open && (
             <span
               title={tournament.name}
-              className="text-nowrap"
+              className="text-nowrap d-inline-flex mt-2 text-white text-nowrap"
             >
-              <FontAwesomeIcon icon="trophy" className="mr-1" />
-              {getRankingPoints(tournament.grade)[0]}
+              <FontAwesomeIcon
+                icon="trophy"
+                className="mr-2 text-warning"
+                style={iconSize}
+              />
+              <span className="text-warning">{getRankingPoints(tournament.grade)[0]}</span>
               <span className="ml-1">Ranking Points</span>
             </span>
           )}
           <span className="text-nowrap">
             {tournament.state !== 'upcoming' && (
-              <span className="mr-2">
-                <FontAwesomeIcon icon="flag-checkered" className="mr-1" />
+              <span className="mr-2 d-inline-flex mt-2 text-white text-nowrap">
+                <FontAwesomeIcon
+                  icon="flag-checkered"
+                  className="mr-2 text-warning"
+                  style={iconSize}
+                />
                 {mapTournamentTitleByState[tournament.state]}
               </span>
             )}
             {tournamentStates.canceled !== tournament.state
               && tournament.state !== 'upcoming' && (
-                <span>
-                  <FontAwesomeIcon icon="user" className="mr-1" />
+                <span className="d-inline-flex mt-2 text-white text-nowrap">
+                  <FontAwesomeIcon
+                    icon="user"
+                    className="mr-2 text-warning"
+                    style={iconSize}
+                  />
                   {tournament.playersCount}
                 </span>
               )}
           </span>
           {showStartsAt(tournament.state) && (
             <>
-              <span>
-                <FontAwesomeIcon icon="clock" className="mr-1" />
+              <span className="d-inline-flex mt-2 text-white text-nowrap">
+                <FontAwesomeIcon
+                  icon="clock"
+                  className="mr-2 text-warning"
+                  style={iconSize}
+                />
                 <TournamentTimer label="starts in" date={tournament.startsAt}>
                   {dayjs(tournament.startsAt).format(getDateFormat(tournament.grade))}
                 </TournamentTimer>
@@ -189,8 +207,12 @@ const TournamentListItem = ({ tournament, icon, isAdmin = false }) => (
           )}
           {tournament.state === tournamentStates.finished && (
             <>
-              <span className="d-none d-lg-inline d-md-inline d-sm-inline pr-2">
-                <FontAwesomeIcon icon="clock" className="mr-1" />
+              <span className="d-none d-lg-inline-flex d-md-inline-flex d-sm-inline-flex pr-2 mt-2 text-white text-nowrap">
+                <FontAwesomeIcon
+                  icon="clock"
+                  className="mr-2 text-warning"
+                  style={iconSize}
+                />
                 {dayjs(tournament.lastRoundEndedAt).format(getDateFormat(tournament.grade))}
               </span>
             </>
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/lobby/TournamentModal.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/lobby/TournamentModal.jsx
index 06017ad2c..3fac13b0d 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/lobby/TournamentModal.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/lobby/TournamentModal.jsx
@@ -33,7 +33,7 @@ export const TournamentModal = NiceModal.create(({ tournament }) => {
       size="lg"
       show={modal.visible}
       onHide={modal.hide}
-      contentClassName="cb-bg-highlight-panel cb-text"
+      contentClassName="cb-bg-panel cb-text"
     >
       <Modal.Header className="cb-border-color" closeButton>
         <Modal.Title className="d-flex flex-column">
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/schedule/EventModal.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/schedule/EventModal.jsx
index c5d7c98aa..a44fff0c0 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/schedule/EventModal.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/schedule/EventModal.jsx
@@ -35,7 +35,7 @@ export const EventModal = NiceModal.create(({ event: selectedEvent, events, clea
       size="lg"
       show={modal.visible}
       onHide={modal.hide}
-      contentClassName="cb-bg-highlight-panel cb-text"
+      contentClassName="cb-bg-panel cb-text"
     >
       <Modal.Header className="cb-border-color" closeButton>
         <Modal.Title className="d-flex flex-column">
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/tournament/ControlPanel.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/tournament/ControlPanel.jsx
index 42ae69687..a9a15258a 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/tournament/ControlPanel.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/tournament/ControlPanel.jsx
@@ -160,7 +160,7 @@ function ControlPanel({
           {i18next.t('Back')}
         </button>
         {panelMode.panel === PanelModeCodes.ratingMode && !disabledSearch ? (
-          <div className="input-group cb-bg-panel flex-nowrap mb-2">
+          <div className="input-group flex-nowrap mb-2">
             <div className="input-group-prepend">
               <span className="input-group-text cb-bg-highlight-panel cb-border-color cb-text" id="search-icon">
                 <FontAwesomeIcon icon="search" />
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/tournament/TournamentChatInput.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/tournament/TournamentChatInput.jsx
index b72c4e984..dc8efd13b 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/tournament/TournamentChatInput.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/tournament/TournamentChatInput.jsx
@@ -1,5 +1,5 @@
 import React, {
- useState, useCallback, useRef, useEffect,
+  useState, useCallback, useRef, useEffect,
 } from 'react';
 
 import BadWordsNext from 'bad-words-next';
@@ -73,7 +73,7 @@ export default function TournamentChatInput({ disabled }) {
 
   return (
     <form className="m-0" onSubmit={handleSubmit}>
-      <div className="d-flex input-group shadow-sm rounded-bottom border-top cb-border-color">
+      <div className="d-flex input-group shadow-sm rounded-bottom cb-border-color">
         <input
           type="text"
           ref={inputRef}
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/tournament/TournamentMainControlButtons.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/tournament/TournamentMainControlButtons.jsx
index 329885b1b..d6dd1298b 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/tournament/TournamentMainControlButtons.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/tournament/TournamentMainControlButtons.jsx
@@ -112,7 +112,7 @@ const TournamentMainControlButtons = ({
           )}
         </>
       )}
-      <Dropdown title="Task actions" className="d-flex">
+      <Dropdown title="Task actions" className="d-flex cb-dropdown">
         <Dropdown.Toggle
           as={CustomToggle}
           id="tournament-actions-dropdown-toggle"
@@ -120,12 +120,12 @@ const TournamentMainControlButtons = ({
           variant={canRestart ? 'info' : 'success'}
           disabled={disabled}
         />
-        <Dropdown.Menu className="cb-dropdown-menu cb-bg-panel dropdown-menu-end">
+        <Dropdown.Menu className="cb-dropdown-menu cb-bg-highlight-panel dropdown-menu-end">
           <Dropdown.Item
             disabled={disabled}
             key="edit"
             href={`/live_view_tournaments/${tournamentId}/edit`}
-            className="text-white"
+            className="cb-dropdown-item"
           >
             <FontAwesomeIcon className="mr-2" icon="edit" />
             Edit
@@ -133,7 +133,7 @@ const TournamentMainControlButtons = ({
           <Dropdown.Item
             key="tournaments"
             href="/tournaments"
-            className="text-white"
+            className="cb-dropdown-item"
           >
             <FontAwesomeIcon className="mr-2" icon="trophy" />
             Tournaments
@@ -142,7 +142,7 @@ const TournamentMainControlButtons = ({
             disabled={disabled || !hideResults}
             key="showResults"
             onSelect={handleShowResults}
-            className="text-white"
+            className="cb-dropdown-item"
           >
             <FontAwesomeIcon className="mr-2" icon="eye" />
             Show Results
@@ -150,7 +150,7 @@ const TournamentMainControlButtons = ({
           <Dropdown.Item
             disabled={disabled}
             key="streamMode"
-            className="text-white"
+            className="cb-dropdown-item"
             onSelect={toggleStreamMode}
           >
             <FontAwesomeIcon className="mr-2" icon="eye" />
@@ -159,7 +159,7 @@ const TournamentMainControlButtons = ({
           <Dropdown.Item
             disabled={disabled || !canToggleShowBots}
             key="showResults"
-            className="text-white"
+            className="cb-dropdown-item"
             onSelect={toggleShowBots}
           >
             <FontAwesomeIcon className="mr-2" icon="eye" />
@@ -167,7 +167,7 @@ const TournamentMainControlButtons = ({
           </Dropdown.Item>
           <Dropdown.Item
             key="tournamentDetails"
-            className="text-white"
+            className="cb-dropdown-item"
             onSelect={handleOpenDetails}
           >
             <FontAwesomeIcon className="mr-2" icon="cog" />
@@ -176,7 +176,7 @@ const TournamentMainControlButtons = ({
           <Dropdown.Item
             disabled={disabled}
             key="cancel"
-            className="text-white"
+            className="cb-dropdown-item"
             onSelect={handleCancelTournament}
           >
             <FontAwesomeIcon className="mr-2" icon="trash" />
@@ -188,7 +188,7 @@ const TournamentMainControlButtons = ({
               <Dropdown.Item
                 disabled={disabled}
                 key="openUp"
-                className="text-white"
+                className="cb-dropdown-item"
                 onSelect={handleOpenUpTournament}
               >
                 <FontAwesomeIcon className="mr-2" icon="unlock" />
diff --git a/services/app/apps/codebattle/lib/codebattle_web/templates/layout/app.html.heex b/services/app/apps/codebattle/lib/codebattle_web/templates/layout/app.html.heex
index dc3f58d89..3bdc2c624 100644
--- a/services/app/apps/codebattle/lib/codebattle_web/templates/layout/app.html.heex
+++ b/services/app/apps/codebattle/lib/codebattle_web/templates/layout/app.html.heex
@@ -55,7 +55,7 @@
     <!--End Google Tag Manager-->
   </head>
 
-  <body class="position-relative dark-bg h-100">
+  <body class="bg-dark position-relative h-100">
     <!--Google Tag Manager (noscript)-->
     <%= if FunWithFlags.enabled?(:use_external_js) do %>
       <noscript>
@@ -69,9 +69,9 @@
       </noscript>
     <% end %>
 
-    <div class="d-flex flex-column min-vh-100">
+    <div class="d-flex cb-bg-dark  flex-column min-vh-100">
       <%= unless FunWithFlags.enabled?(:hide_header) do %>
-        <div class="dark-bg">
+        <div>
           <div class="container-lg">
             <nav class="navbar navbar-dark navbar-expand-sm justify-content-between px-0 main-nav">
               <a class="navbar-brand d-flex align-items-end" href="/">
@@ -132,7 +132,7 @@
                           <a
                             href="https://github.com/hexlet-codebattle/codebattle"
                             target="_blank"
-                            class="btn btn-dark d-flex align-items-center mx-auto mx-sm-0 mr-sm-3 px-2 px-sm-3 py-1 py-sm-2 rounded-pill"
+                            class="btn d-flex align-items-center mx-auto mx-sm-0 mr-sm-3 px-2 px-sm-3 py-1 py-sm-2 rounded-pill"
                             title="Star us on GitHub"
                           >
                             <span class="fab fa-github mr-1 mr-sm-2 text-white"></span>
@@ -160,7 +160,7 @@
                           class="nav-item d-flex justify-content-center mb-2 mb-sm-0"
                           id="invites-root"
                         >
-                          <div class="btn btn-dark mx-auto mx-sm-2">
+                          <div class="btn mx-auto mx-sm-2">
                             <img
                               alt="invites"
                               src="/assets/images/fight.svg"
diff --git a/services/app/apps/codebattle/lib/codebattle_web/templates/layout/external.html.heex b/services/app/apps/codebattle/lib/codebattle_web/templates/layout/external.html.heex
index 0e3a85f88..24e77cdb5 100644
--- a/services/app/apps/codebattle/lib/codebattle_web/templates/layout/external.html.heex
+++ b/services/app/apps/codebattle/lib/codebattle_web/templates/layout/external.html.heex
@@ -55,9 +55,9 @@
     </script>
   </head>
   <body>
-    <div class="d-flex flex-column min-vh-100 bg-dark">
+    <div class="d-flex flex-column min-vh-100 cb-bg-dark">
       <%= if assigns[:show_header] do %>
-        <div class="bg-dark">
+        <div>
           <div class="container-lg">
             <nav class="navbar navbar-dark navbar-expand-sm justify-content-between px-0 main-nav">
               <a class="navbar-brand d-flex align-items-end" href="/">