diff --git a/src/frontend/components/Header/Header.styled.ts b/src/frontend/components/Header/Header.styled.ts
index fdcfcef4f1..48ef242786 100644
--- a/src/frontend/components/Header/Header.styled.ts
+++ b/src/frontend/components/Header/Header.styled.ts
@@ -43,6 +43,13 @@ export const NavBarBrand = styled(Link)`
   }
 `;
 
+export const BrandImg = styled.img.attrs({
+  src: '/images/opentelemetry-demo-logo.png',
+})`
+  width: 280px;
+  height: auto;
+`;
+
 export const Controls = styled.div`
   display: flex;
   height: 60px;
diff --git a/src/frontend/components/Header/Header.tsx b/src/frontend/components/Header/Header.tsx
index c1332ddbc7..99ea188f3f 100644
--- a/src/frontend/components/Header/Header.tsx
+++ b/src/frontend/components/Header/Header.tsx
@@ -7,7 +7,9 @@ const Header = () => {
     <S.Header>
       <S.NavBar>
         <S.Container>
-          <S.NavBarBrand href="/">LOGO</S.NavBarBrand>
+          <S.NavBarBrand href="/">
+            <a><S.BrandImg /></a>
+          </S.NavBarBrand>
           <S.Controls>
             <CurrencySwitcher />
             <CartIcon />
diff --git a/src/frontend/public/favicon.ico b/src/frontend/public/favicon.ico
index 30acb2725b..ae9cadf511 100644
Binary files a/src/frontend/public/favicon.ico and b/src/frontend/public/favicon.ico differ
diff --git a/src/frontend/public/images/opentelemetry-demo-logo.png b/src/frontend/public/images/opentelemetry-demo-logo.png
new file mode 100644
index 0000000000..c9aebcd118
Binary files /dev/null and b/src/frontend/public/images/opentelemetry-demo-logo.png differ