diff --git a/src/App.tsx b/src/App.tsx
index 87314cb..cbd380d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import './App.css';
-import Header from 'components/Header';
+import Header from 'components/Header/Header';
 import Pokedex from 'features/Pokedex';
 import Filters from 'features/Filters';
 import InfoDialog from 'features/InfoDialog';
diff --git a/src/assets/bg.png b/src/assets/images/bg.png
similarity index 100%
rename from src/assets/bg.png
rename to src/assets/images/bg.png
diff --git a/src/assets/images/pokedex.png b/src/assets/images/pokedex.png
new file mode 100644
index 0000000..e9f0d4f
Binary files /dev/null and b/src/assets/images/pokedex.png differ
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
deleted file mode 100644
index 4bf3f24..0000000
--- a/src/components/Header.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import logo from 'assets/poke_logo.png';
-
-const Header = () => {
-  return (
-    <div>
-      <div className="poke__logos">
-        <img src={logo} alt="Poke Logo" />
-      </div>
-    </div>
-  );
-};
-
-export default Header;
diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css
new file mode 100644
index 0000000..7b9f61a
--- /dev/null
+++ b/src/components/Header/Header.css
@@ -0,0 +1,12 @@
+.poke__logos {
+    display: flex;
+    flex-direction: column;
+    margin-left: 10px;
+}
+
+.poke__logo {
+    margin-top: 10px;
+    width: 15vw;
+    -webkit-filter: drop-shadow(5px 0px 0px rgba(0,0,0,0.6));
+    filter: drop-shadow(5px 0px 0px rgba(0,0,0,0.6));
+}
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
new file mode 100644
index 0000000..9259954
--- /dev/null
+++ b/src/components/Header/Header.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+import logo from 'assets/images/pokedex.png';
+import './Header.css';
+
+const Header = () => {
+  return (
+    <div>
+      <div className="app__header">
+        <div className="poke__logo noselect">
+          <img src={logo} alt="Poke Logo" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Header;
diff --git a/src/components/Header/index.ts b/src/components/Header/index.ts
new file mode 100644
index 0000000..579f1ac
--- /dev/null
+++ b/src/components/Header/index.ts
@@ -0,0 +1 @@
+export { default } from './Header';
diff --git a/src/components/InfoDialogComponent/InfoDialogComponent.css b/src/components/InfoDialogComponent/InfoDialogComponent.css
index 369bc46..c59bba0 100644
--- a/src/components/InfoDialogComponent/InfoDialogComponent.css
+++ b/src/components/InfoDialogComponent/InfoDialogComponent.css
@@ -3,7 +3,7 @@ html {
   --cardborder: #fff;
   --pokenumber: hsl(228, 28%, 20%);
   --info: #fff;
-  --bggradient: url('assets/bg.png');
+  --bggradient: url('assets/images/bg.png');
   --bgcolor: none;
 }
 
@@ -147,7 +147,7 @@ html[data-theme='dark'] {
 }
 
 .dialog__bg {
-  background-image: url('assets/bg.png');
+  background-image: url('assets/images/bg.png');
   background-repeat: repeat;
 }
 
diff --git a/src/index.css b/src/index.css
index 199be83..55c3568 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,6 +1,6 @@
 html {
   --toggle: hsl(230deg 17% 85%);
-  --bggradient: url('assets/bg.png');
+  --bggradient: url('assets/images/bg.png');
   --bgcolor: none;
   --colorPrimary: #000;
   --filterHeading: #000;
@@ -38,7 +38,7 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background-image: url('assets/bg.png');
+  background-image: url('assets/images/bg.png');
   background-size: initial;
   background-repeat: repeat;
 }