diff --git a/@types/assets.d.ts b/@types/assets.d.ts
new file mode 100644
index 0000000..b14d912
--- /dev/null
+++ b/@types/assets.d.ts
@@ -0,0 +1,5 @@
+declare module '*.png' {
+  const imagePath: string;
+
+  export default imagePath;
+}
diff --git a/src/container/list/index.tsx b/src/container/list/index.tsx
index 0d809bf..c007699 100644
--- a/src/container/list/index.tsx
+++ b/src/container/list/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import Heading from '../../components/heading';
 
 const ListPage = (): React.ReactElement => {
-  return <Heading>List Page New</Heading>;
+  return <Heading>List Page New 2</Heading>;
 };
 
 export default ListPage;
diff --git a/src/container/main/components/layout/header.tsx b/src/container/main/components/layout/header.tsx
index cf77158..67305b0 100644
--- a/src/container/main/components/layout/header.tsx
+++ b/src/container/main/components/layout/header.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { getNavigationValue } from '@brojs/cli';
 import { HeaderContainer, NavContainer, NavItem, NavLink } from './index.style';
+import Logo from './logo/logo';
 
 const navigations: Array<{ name: string; href: string }> = [
   {
@@ -16,6 +17,7 @@ const navigations: Array<{ name: string; href: string }> = [
 const Header = (): React.ReactElement => {
   return (
     <HeaderContainer>
+      <Logo />
       <NavContainer>
         {navigations.map((item) => {
           return (
diff --git a/src/container/main/components/layout/index.style.tsx b/src/container/main/components/layout/index.style.tsx
index c19210e..bed2f45 100644
--- a/src/container/main/components/layout/index.style.tsx
+++ b/src/container/main/components/layout/index.style.tsx
@@ -1,7 +1,10 @@
 import styled from '@emotion/styled';
 import { NavLink as NavLinkBase } from 'react-router-dom';
 
-export const HeaderContainer = styled('header')``;
+export const HeaderContainer = styled('header')`
+    display: flex;
+    align-items: center;
+`;
 
 export const NavContainer = styled.nav`
   display: flex;
diff --git a/src/container/main/components/layout/logo/logo.tsx b/src/container/main/components/layout/logo/logo.tsx
new file mode 100644
index 0000000..5495845
--- /dev/null
+++ b/src/container/main/components/layout/logo/logo.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import logoPng from './logo2.png';
+
+const LogoStyled = styled.img`
+  width: 24px;
+  height: 24px;
+  padding: 8px;
+`;
+
+// ${__webpack_public_path__}/remote-assets/logo.png
+
+const Logo = () => {
+  return <LogoStyled src={logoPng} alt={'logo'} />;
+};
+
+export default Logo;
diff --git a/src/container/main/components/layout/logo/logo2.png b/src/container/main/components/layout/logo/logo2.png
new file mode 100644
index 0000000..d632aa9
Binary files /dev/null and b/src/container/main/components/layout/logo/logo2.png differ