diff --git a/frontend/index.html b/frontend/index.html
index 693664306..0041f6efa 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -5,8 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     <!-- Favicons -->
-    <link rel="icon" href="<%= PUBLIC_PATH %>/favicon/favicon.ico" sizes="any" />
-    <link rel="icon" href="<%= PUBLIC_PATH %>/favicon/icon.svg" type="image/svg+xml" />
+    <link rel="icon" href="<%= PUBLIC_PATH %>/favicon/favicon.svg" type="image/svg+xml" />
     <link rel="apple-touch-icon" href="<%= PUBLIC_PATH %>/favicon/apple-touch-icon.png" />
     <link rel="manifest" href="<%= PUBLIC_PATH %>/manifest.json" />
 
diff --git a/frontend/public/favicon/favicon.ico b/frontend/public/favicon/favicon.ico
deleted file mode 100644
index 2774ebccf..000000000
Binary files a/frontend/public/favicon/favicon.ico and /dev/null differ
diff --git a/frontend/public/favicon/icon.svg b/frontend/public/favicon/favicon.svg
similarity index 77%
rename from frontend/public/favicon/icon.svg
rename to frontend/public/favicon/favicon.svg
index d31960515..fc31bcf4a 100644
--- a/frontend/public/favicon/icon.svg
+++ b/frontend/public/favicon/favicon.svg
@@ -2,14 +2,16 @@
   <style>
     @media (prefers-color-scheme: dark) {
       #faviconCircle {
-        fill: white;
+        fill: #FDFDFD;
       }
       #faviconLogo {
-        fill: #4F4FFF;
+        fill: #171A1C;
       }
     }
   </style>
 
-  <circle id="faviconCircle" cx="8" cy="8.57983" r="8" fill="#4F4FFF"/>
-  <path id="faviconLogo" d="M4.75773 2.62842C4.75773 2.62842 7.29142 6.23837 11.7986 7.97159C11.7986 7.97159 14.8056 5.45572 11.8981 9.07271C8.99049 12.6897 4.5637 14.8803 4.75773 14.6111C5.33474 13.8107 7.23785 12.2813 6.26513 11.338C8.17454 9.48627 3.87891 8.26547 3.87891 8.26547C4.99205 5.85605 4.75773 2.62842 4.75773 2.62842Z" fill="white"/>
+  <circle id="faviconCircle" cx="8" cy="8.57983" r="8" fill="#171A1C"/>
+  <path id="faviconLogo" d="M4.75773 2.62842C4.75773 2.62842 7.29142 6.23837 11.7986 7.97159C11.7986 7.97159 14.8056 5.45572 11.8981 9.07271C8.99049 12.6897 4.5637 14.8803 4.75773 14.6111C5.33474 13.8107 7.23785 12.2813 6.26513 11.338C8.17454 9.48627 3.87891 8.26547 3.87891 8.26547C4.99205 5.85605 4.75773 2.62842 4.75773 2.62842Z"
+        fill="#FDFDFD"
+  />
 </svg>
diff --git a/frontend/src/components/App.tsx b/frontend/src/components/App.tsx
index 43abc60bd..f3d6d88cd 100644
--- a/frontend/src/components/App.tsx
+++ b/frontend/src/components/App.tsx
@@ -50,7 +50,7 @@ const App: React.FC = () => {
     <QueryClientProvider client={queryClient}>
       <GlobalSettingsProvider>
         <ThemeProvider theme={isDarkMode ? darkTheme : theme}>
-          <Suspense fallback={<PageLoader />}>
+          <Suspense fallback={<PageLoader fullSize />}>
             <UserInfoRolesAccessProvider>
               <ConfirmContextProvider>
                 <GlobalCSS />
diff --git a/frontend/src/components/NavBar/NavBar.styled.ts b/frontend/src/components/NavBar/NavBar.styled.ts
index 8c4dd6f5b..d9013dcdd 100644
--- a/frontend/src/components/NavBar/NavBar.styled.ts
+++ b/frontend/src/components/NavBar/NavBar.styled.ts
@@ -130,18 +130,20 @@ export const Hyperlink = styled(Link)(
     align-items: center;
     gap: 8px;
 
-    margin: 0;
+    margin: 0 0 0 8px;
     padding: 0.5rem 0.75rem;
 
     font-family: Inter, sans-serif;
     font-style: normal;
     font-weight: bold;
-    font-size: 12px;
+    font-size: 22px;
     line-height: 16px;
     color: ${theme.default.color.normal};
+
     &:hover {
       color: ${theme.default.color.normal};
     }
+
     text-decoration: none;
     word-break: break-word;
     cursor: pointer;
diff --git a/frontend/src/components/NavBar/NavBar.tsx b/frontend/src/components/NavBar/NavBar.tsx
index e025c892c..1a58c7e7b 100644
--- a/frontend/src/components/NavBar/NavBar.tsx
+++ b/frontend/src/components/NavBar/NavBar.tsx
@@ -69,7 +69,7 @@ const NavBar: React.FC<Props> = ({ onBurgerClick }) => {
 
           <S.Hyperlink to="/">
             <Logo />
-            Kafbat UI
+            kafbat UI
           </S.Hyperlink>
 
           <S.NavbarItem>
diff --git a/frontend/src/components/NavBar/__tests__/NavBar.spec.tsx b/frontend/src/components/NavBar/__tests__/NavBar.spec.tsx
index 9b3e4528f..a94d941e5 100644
--- a/frontend/src/components/NavBar/__tests__/NavBar.spec.tsx
+++ b/frontend/src/components/NavBar/__tests__/NavBar.spec.tsx
@@ -26,7 +26,7 @@ describe('NavBar', () => {
   it('correctly renders header', () => {
     const header = screen.getByLabelText('Page Header');
     expect(header).toBeInTheDocument();
-    expect(within(header).getByText('Kafbat UI')).toBeInTheDocument();
+    expect(within(header).getByText('kafbat UI')).toBeInTheDocument();
     expect(within(header).getAllByRole('separator').length).toEqual(3);
     expect(
       within(header).getByRole('button', burgerButtonOptions)
diff --git a/frontend/src/components/common/Logo/Logo.styled.ts b/frontend/src/components/common/Logo/Logo.styled.ts
new file mode 100644
index 000000000..51d649c62
--- /dev/null
+++ b/frontend/src/components/common/Logo/Logo.styled.ts
@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+
+export const Logo = styled.svg`
+  fill: ${({ theme }) => theme.logo.color};
+`;
diff --git a/frontend/src/components/common/Logo/Logo.tsx b/frontend/src/components/common/Logo/Logo.tsx
index b209f32b2..d149d6511 100644
--- a/frontend/src/components/common/Logo/Logo.tsx
+++ b/frontend/src/components/common/Logo/Logo.tsx
@@ -1,19 +1,18 @@
 import React from 'react';
 
+import * as S from './Logo.styled';
+
 const Logo: React.FC = () => {
   return (
-    <svg
+    <S.Logo
       width="23"
       height="30"
       viewBox="0 0 23 30"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <path
-        d="M2.17668 0C2.17668 0 8.45218 9.02115 19.6155 13.3524C19.6155 13.3524 27.0635 7.06532 19.862 16.1041C12.6605 25.1428 1.6961 30.617 2.17668 29.9444C3.60584 27.9442 8.31948 24.1222 5.91024 21.7649C10.6395 17.1375 0 14.0868 0 14.0868C2.75705 8.06572 2.17668 0 2.17668 0Z"
-        fill="#4F4FFF"
-      />
-    </svg>
+      <path d="M1.9874 0.5C1.9874 0.5 7.7172 8.91974 17.9098 12.9622C17.9098 12.9622 24.7102 7.0943 18.1349 15.5305C11.5596 23.9666 1.54861 29.0758 1.9874 28.4481C3.29229 26.5813 7.59605 23.014 5.3963 20.8139C9.71432 16.495 0 13.6477 0 13.6477C2.51731 8.02801 1.9874 0.5 1.9874 0.5Z" />
+    </S.Logo>
   );
 };
 
diff --git a/frontend/src/components/common/PageLoader/PageLoader.styled.ts b/frontend/src/components/common/PageLoader/PageLoader.styled.ts
index f38f21c0b..36c5848e0 100644
--- a/frontend/src/components/common/PageLoader/PageLoader.styled.ts
+++ b/frontend/src/components/common/PageLoader/PageLoader.styled.ts
@@ -1,10 +1,15 @@
 import styled from 'styled-components';
 
-export const Wrapper = styled.div`
+export interface PageLoaderProps {
+  fullSize?: boolean;
+}
+
+export const Wrapper = styled.div<PageLoaderProps>`
   display: flex;
   justify-content: center;
   align-items: center;
-  padding-top: 15%;
   height: 100%;
   width: 100%;
+  background-color: ${({ theme }) => theme.default.backgroundColor};
+  ${({ fullSize }) => (fullSize ? `min-height: 100vh;` : 'padding-top: 15%;')}
 `;
diff --git a/frontend/src/components/common/PageLoader/PageLoader.tsx b/frontend/src/components/common/PageLoader/PageLoader.tsx
index 674ab0f0c..b568357dd 100644
--- a/frontend/src/components/common/PageLoader/PageLoader.tsx
+++ b/frontend/src/components/common/PageLoader/PageLoader.tsx
@@ -2,9 +2,10 @@ import React from 'react';
 import Spinner from 'components/common/Spinner/Spinner';
 
 import * as S from './PageLoader.styled';
+import { PageLoaderProps } from './PageLoader.styled';
 
-const PageLoader: React.FC = () => (
-  <S.Wrapper>
+const PageLoader: React.FC<PageLoaderProps> = ({ fullSize }) => (
+  <S.Wrapper fullSize={fullSize}>
     <Spinner />
   </S.Wrapper>
 );
diff --git a/frontend/src/theme/theme.ts b/frontend/src/theme/theme.ts
index 8426d3c2f..44e19eb5b 100644
--- a/frontend/src/theme/theme.ts
+++ b/frontend/src/theme/theme.ts
@@ -35,15 +35,15 @@ const Colors = {
     '60': '#29A352',
   },
   brand: {
-    '5': '#E8E8FC',
-    '10': '#D1D1FA',
-    '15': '#B8BEF9',
-    '20': '#A3A3F5',
-    '30': '#7E7EF1',
-    '40': '#6666FF',
-    '50': '#4C4CFF',
-    '60': '#1717CF',
-    '70': '#1414B8',
+    '5': '#F1F2F3',
+    '10': '#E3E6E8',
+    '15': '#D5DADD',
+    '20': '#C7CED1',
+    '30': '#ABB5BA',
+    '40': '#8F9CA3',
+    '50': '#2F3639',
+    '60': '#22282A',
+    '70': '#171A1C',
   },
   red: {
     '10': '#FAD1D1',
@@ -313,6 +313,9 @@ const baseTheme = {
 
 export const theme = {
   ...baseTheme,
+  logo: {
+    color: Colors.brand[70],
+  },
   version: {
     currentVersion: {
       color: Colors.neutral[30],
@@ -389,8 +392,8 @@ export const theme = {
     primary: {
       backgroundColor: {
         normal: Colors.brand[50],
-        hover: Colors.brand[60],
-        active: Colors.brand[70],
+        hover: Colors.brand[70],
+        active: Colors.brand[60],
         disabled: Colors.neutral[5],
       },
       color: {
@@ -756,6 +759,9 @@ export type ThemeType = typeof theme;
 
 export const darkTheme: ThemeType = {
   ...baseTheme,
+  logo: {
+    color: '#FDFDFD',
+  },
   version: {
     currentVersion: {
       color: Colors.neutral[50],
@@ -831,13 +837,13 @@ export const darkTheme: ThemeType = {
   button: {
     primary: {
       backgroundColor: {
-        normal: Colors.brand[30],
-        hover: Colors.brand[20],
-        active: Colors.brand[10],
-        disabled: Colors.neutral[75],
+        normal: Colors.brand[10],
+        hover: Colors.brand[5],
+        active: Colors.brand[20],
+        disabled: Colors.brand[60],
       },
       color: {
-        normal: Colors.neutral[0],
+        normal: Colors.neutral[70],
         disabled: Colors.neutral[60],
       },
       invertedColors: {
@@ -848,9 +854,9 @@ export const darkTheme: ThemeType = {
     },
     secondary: {
       backgroundColor: {
-        normal: Colors.blue[80],
-        hover: Colors.blue[70],
-        active: Colors.blue[60],
+        normal: Colors.brand[50],
+        hover: Colors.brand[70],
+        active: Colors.brand[60],
         disabled: Colors.neutral[75],
       },
       color: {