diff --git a/src/assets/fonts/BarcadeBrawl.ttf b/src/assets/fonts/BarcadeBrawl.ttf
new file mode 100644
index 0000000..00b1aad
Binary files /dev/null and b/src/assets/fonts/BarcadeBrawl.ttf differ
diff --git a/src/components/PokemonTypes/PokemonTypes.tsx b/src/components/PokemonTypes/PokemonTypes.tsx
index f4b8d9d..117b9f4 100644
--- a/src/components/PokemonTypes/PokemonTypes.tsx
+++ b/src/components/PokemonTypes/PokemonTypes.tsx
@@ -54,6 +54,7 @@ export interface PokemonTypesProps {
 
 const PokemonTypes = ({ types }: PokemonTypesProps) => {
   return (
+    // TODO: fix static typed poke__type css
     <div className="poke__type">
       {types.map(type => (
         <Tooltip title={type} key={type} TransitionComponent={Zoom} arrow>
diff --git a/src/features/Pokedex/Filters/Filters.css b/src/features/Pokedex/Filters/Filters.css
new file mode 100644
index 0000000..4f655f8
--- /dev/null
+++ b/src/features/Pokedex/Filters/Filters.css
@@ -0,0 +1,40 @@
+html {
+    --toggle: hsl(230deg 17% 85%);
+    --bgcolor: none;
+    --colorPrimary: #000;
+    --filterHeading: #000;
+    --selectBg : #fff;
+    --selectText : #000;
+}
+
+@font-face {
+    font-family: 'barcadebrawl';
+    src: url('assets/fonts/BarcadeBrawl.ttf');
+}
+
+.filter__container {
+    display: flex;
+    flex-direction: row;
+    margin: 7vh 0 5vh 0;
+    gap: 0 2vw;
+}
+
+.filter__items {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    font-family: 'barcadebrawl';
+    font-size: 12px;
+}
+
+.filter__items>input {
+    width: 10vw;
+    margin-top: 5px;
+    background-color: var(--selectBg);
+    color: var(--selectText);
+    border: 1px solid var(--selectText);
+}
+
+.filter__items>div, label {
+    color: var(--filterHeading);
+}
\ No newline at end of file
diff --git a/src/features/Pokedex/Filters/Filters.tsx b/src/features/Pokedex/Filters/Filters.tsx
index ced5313..93a93a1 100644
--- a/src/features/Pokedex/Filters/Filters.tsx
+++ b/src/features/Pokedex/Filters/Filters.tsx
@@ -12,6 +12,7 @@ import {
 } from 'features/Pokedex/pokedexSlice';
 import { RegionPokemonRange } from 'features/Pokedex/types/slice';
 import { useAppDispatch, useAppSelector } from 'app/hooks';
+import './Filters.css';
 
 export const createRegionPokemonListOptionElements = (
   data: RegionPokemonRange[],
@@ -89,7 +90,7 @@ const Filters = () => {
 
   return (
     <>
-      <div className="filter__container">
+      <div className="filter__container noselect">
         <div className="filter__items">
           <div>
             <div>REGION</div>