diff --git a/kafka-ui-react-app/public/favicon.ico b/kafka-ui-react-app/public/favicon.ico
index 172371dd60..2774ebccf9 100644
Binary files a/kafka-ui-react-app/public/favicon.ico and b/kafka-ui-react-app/public/favicon.ico differ
diff --git a/kafka-ui-react-app/public/favicon/apple-touch-icon.png b/kafka-ui-react-app/public/favicon/apple-touch-icon.png
new file mode 100644
index 0000000000..b053bef91c
Binary files /dev/null and b/kafka-ui-react-app/public/favicon/apple-touch-icon.png differ
diff --git a/kafka-ui-react-app/public/favicon/icon-192.png b/kafka-ui-react-app/public/favicon/icon-192.png
new file mode 100644
index 0000000000..193bd4812d
Binary files /dev/null and b/kafka-ui-react-app/public/favicon/icon-192.png differ
diff --git a/kafka-ui-react-app/public/favicon/icon-512.png b/kafka-ui-react-app/public/favicon/icon-512.png
new file mode 100644
index 0000000000..02d05c6857
Binary files /dev/null and b/kafka-ui-react-app/public/favicon/icon-512.png differ
diff --git a/kafka-ui-react-app/public/favicon/icon.svg b/kafka-ui-react-app/public/favicon/icon.svg
new file mode 100644
index 0000000000..d31960515f
--- /dev/null
+++ b/kafka-ui-react-app/public/favicon/icon.svg
@@ -0,0 +1,15 @@
+<svg width="32" height="32" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    @media (prefers-color-scheme: dark) {
+      #faviconCircle {
+        fill: white;
+      }
+      #faviconLogo {
+        fill: #4F4FFF;
+      }
+    }
+  </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"/>
+</svg>
diff --git a/kafka-ui-react-app/public/index.html b/kafka-ui-react-app/public/index.html
index 2f015c36d7..a49f8a1b7c 100644
--- a/kafka-ui-react-app/public/index.html
+++ b/kafka-ui-react-app/public/index.html
@@ -2,10 +2,12 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" sizes="any"><!-- 32×32 -->
+    <link rel="icon" href="%PUBLIC_URL%/favicon/icon.svg" type="image/svg+xml">
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon/apple-touch-icon.png"><!-- 180×180 -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>UI for Apache Kafka</title>
     <script type="text/javascript">
       window.basePath = "";
diff --git a/kafka-ui-react-app/public/manifest.json b/kafka-ui-react-app/public/manifest.json
index 1f2f141faf..1f6e4871af 100644
--- a/kafka-ui-react-app/public/manifest.json
+++ b/kafka-ui-react-app/public/manifest.json
@@ -1,15 +1,19 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "name": "UI for Apache Kafka",
   "icons": [
     {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
+      "src": "/favicon/icon-192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "/favicon/icon-512.png",
+      "type": "image/png",
+      "sizes": "512x512"
     }
   ],
   "start_url": ".",
   "display": "standalone",
   "theme_color": "#000000",
   "background_color": "#ffffff"
-}
+}
\ No newline at end of file
diff --git a/kafka-ui-react-app/src/components/App.styled.ts b/kafka-ui-react-app/src/components/App.styled.ts
index a59f36ed87..39e9e83b05 100644
--- a/kafka-ui-react-app/src/components/App.styled.ts
+++ b/kafka-ui-react-app/src/components/App.styled.ts
@@ -168,20 +168,26 @@ export const Span = styled.span(
 
 export const Hyperlink = styled.a(
   ({ theme }) => css`
-    display: flex;
     position: relative;
+
+    display: flex;
     flex-grow: 0;
     flex-shrink: 0;
     align-items: center;
+    gap: 8px;
+
     margin: 0;
-    color: ${theme.menu.color.active};
-    font-size: 1.25rem;
-    font-weight: 600;
-    cursor: pointer;
-    line-height: 1.5;
     padding: 0.5rem 0.75rem;
+
+    font-family: Inter, sans-serif;
+    font-style: normal;
+    font-weight: bold;
+    font-size: 12px;
+    line-height: 16px;
+    color: ${theme.menu.color.active};
     text-decoration: none;
     word-break: break-word;
+    cursor: pointer;
   `
 );
 
diff --git a/kafka-ui-react-app/src/components/App.tsx b/kafka-ui-react-app/src/components/App.tsx
index 83b62806c9..1a74b4e8d5 100644
--- a/kafka-ui-react-app/src/components/App.tsx
+++ b/kafka-ui-react-app/src/components/App.tsx
@@ -17,6 +17,7 @@ import {
 } from 'redux/reducers/clusters/clustersSlice';
 
 import * as S from './App.styled';
+import Logo from './common/Logo/Logo';
 
 const App: React.FC = () => {
   const dispatch = useAppDispatch();
@@ -57,7 +58,10 @@ const App: React.FC = () => {
               <S.Span role="separator" />
             </S.NavbarBurger>
 
-            <S.Hyperlink href="/ui">UI for Apache Kafka</S.Hyperlink>
+            <S.Hyperlink href="/ui">
+              <Logo />
+              UI for Apache Kafka
+            </S.Hyperlink>
 
             <S.NavbarItem>
               {GIT_TAG && <Version tag={GIT_TAG} commit={GIT_COMMIT} />}
diff --git a/kafka-ui-react-app/src/components/Connect/List/__tests__/__snapshots__/ListItem.spec.tsx.snap b/kafka-ui-react-app/src/components/Connect/List/__tests__/__snapshots__/ListItem.spec.tsx.snap
index 282738e8de..b2725929e1 100644
--- a/kafka-ui-react-app/src/components/Connect/List/__tests__/__snapshots__/ListItem.spec.tsx.snap
+++ b/kafka-ui-react-app/src/components/Connect/List/__tests__/__snapshots__/ListItem.spec.tsx.snap
@@ -431,6 +431,14 @@ exports[`Connectors ListItem matches snapshot 1`] = `
           "normal": "#171A1C",
         },
       },
+      "version": Object {
+        "currentVersion": Object {
+          "color": "#ABB5BA",
+        },
+        "symbolWrapper": Object {
+          "color": "#ABB5BA",
+        },
+      },
       "viewer": Object {
         "wrapper": "#f9fafa",
       },
diff --git a/kafka-ui-react-app/src/components/Version/Version.styled.ts b/kafka-ui-react-app/src/components/Version/Version.styled.ts
new file mode 100644
index 0000000000..8c70d9b9f9
--- /dev/null
+++ b/kafka-ui-react-app/src/components/Version/Version.styled.ts
@@ -0,0 +1,37 @@
+import styled, { css } from 'styled-components';
+
+export const Wrapper = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const textStyle = css`
+  font-family: Inter, sans-serif;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 12px;
+  line-height: 16px;
+`;
+
+export const CurrentVersion = styled.span(
+  ({ theme }) => css`
+    ${textStyle}
+    color: ${theme.version.currentVersion.color};
+    margin-right: 0.25rem;
+  `
+);
+
+export const OutdatedWarning = styled.span`
+  ${textStyle}
+`;
+
+export const SymbolWrapper = styled.span(
+  ({ theme }) => css`
+    ${textStyle}
+    color: ${theme.version.symbolWrapper.color};
+  `
+);
+
+export const CurrentCommitLink = styled.a`
+  ${textStyle}
+`;
diff --git a/kafka-ui-react-app/src/components/Version/Version.tsx b/kafka-ui-react-app/src/components/Version/Version.tsx
index 6de21e36ef..39ecc5227e 100644
--- a/kafka-ui-react-app/src/components/Version/Version.tsx
+++ b/kafka-ui-react-app/src/components/Version/Version.tsx
@@ -3,6 +3,7 @@ import { gitCommitPath } from 'lib/paths';
 import { GIT_REPO_LATEST_RELEASE_LINK } from 'lib/constants';
 import WarningIcon from 'components/common/Icons/WarningIcon';
 
+import * as S from './Version.styled';
 import compareVersions from './compareVersions';
 
 export interface VesionProps {
@@ -15,6 +16,7 @@ const Version: React.FC<VesionProps> = ({ tag, commit }) => {
     outdated: false,
     latestTag: '',
   });
+
   useEffect(() => {
     fetch(GIT_REPO_LATEST_RELEASE_LINK)
       .then((response) => response.json())
@@ -29,30 +31,31 @@ const Version: React.FC<VesionProps> = ({ tag, commit }) => {
   const { outdated, latestTag } = latestVersionInfo;
 
   return (
-    <div className="is-size-8 has-text-grey">
-      <span className="has-text-grey-light mr-1">Version:</span>
-      <span className="mr-1">{tag}</span>
+    <S.Wrapper>
+      <S.CurrentVersion>{tag}</S.CurrentVersion>
+
       {outdated && (
-        <span
+        <S.OutdatedWarning
           title={`Your app version is outdated. Current latest version is ${latestTag}`}
         >
           <WarningIcon />
-        </span>
+        </S.OutdatedWarning>
       )}
+
       {commit && (
         <>
-          <span>&#40;</span>
-          <a
+          <S.SymbolWrapper>&#40;</S.SymbolWrapper>
+          <S.CurrentCommitLink
             title="Current commit"
             target="__blank"
             href={gitCommitPath(commit)}
           >
             {commit}
-          </a>
-          <span>&#41;</span>
+          </S.CurrentCommitLink>
+          <S.SymbolWrapper>&#41;</S.SymbolWrapper>
         </>
       )}
-    </div>
+    </S.Wrapper>
   );
 };
 
diff --git a/kafka-ui-react-app/src/components/Version/__tests__/Version.spec.tsx b/kafka-ui-react-app/src/components/Version/__tests__/Version.spec.tsx
index eebe8636fb..2136032bcb 100644
--- a/kafka-ui-react-app/src/components/Version/__tests__/Version.spec.tsx
+++ b/kafka-ui-react-app/src/components/Version/__tests__/Version.spec.tsx
@@ -11,7 +11,7 @@ describe('Version', () => {
 
   it('renders', () => {
     setupComponent({ tag });
-    expect(screen.getByText('Version:')).toBeInTheDocument();
+    expect(screen.getByText(tag)).toBeInTheDocument();
   });
 
   it('shows current tag and commit', () => {
diff --git a/kafka-ui-react-app/src/components/common/Logo/Logo.tsx b/kafka-ui-react-app/src/components/common/Logo/Logo.tsx
new file mode 100644
index 0000000000..b209f32b23
--- /dev/null
+++ b/kafka-ui-react-app/src/components/common/Logo/Logo.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+const Logo: React.FC = () => {
+  return (
+    <svg
+      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>
+  );
+};
+
+export default Logo;
diff --git a/kafka-ui-react-app/src/theme/theme.ts b/kafka-ui-react-app/src/theme/theme.ts
index 4edae75f6a..8d690a1123 100644
--- a/kafka-ui-react-app/src/theme/theme.ts
+++ b/kafka-ui-react-app/src/theme/theme.ts
@@ -152,6 +152,14 @@ const theme = {
     },
     chevronIconColor: Colors.neutral[50],
   },
+  version: {
+    currentVersion: {
+      color: Colors.neutral[30],
+    },
+    symbolWrapper: {
+      color: Colors.neutral[30],
+    },
+  },
   schema: {
     backgroundColor: {
       tr: Colors.neutral[5],
