diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index 4ee4c6d..827b9af 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -20,6 +20,12 @@ const About = () => {
                                     <span className={"p-2"}>Machine learning is weinell/gallar skriv et eller andet fedt her tabere</span>
                                 </div>
                             </div>
+                            <div className={"mt-10"}>
+                                <h3 className={"font-bold"}>How does PokéBattle work?</h3>
+                                <div>
+                                    <span className={"p-2"}>The way PokéBattle works weinell/gallar skriv et eller andet fedt her tabere</span>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
diff --git a/src/app/footer.tsx b/src/app/footer.tsx
index eeb4855..15d65ab 100644
--- a/src/app/footer.tsx
+++ b/src/app/footer.tsx
@@ -4,7 +4,7 @@ const Footer = () => {
 
     return (
         <>
-            <div className={"w-full bg-navbar h-auto pt-5 pb-5"}>
+            <div className={"w-full bg-betterBlack h-auto pt-5 pb-5"}>
                 <div className={"pl-[10%] h-full flex items-center text-white"}>
                     Created by
                     <Link className={"text-blue-400 pl-2 hover:underline"} href={"https://github.com/Freddiiy"}>Frederik Gallar,</Link>
diff --git a/src/app/navbar.tsx b/src/app/navbar.tsx
index 7a85e39..8777bcd 100644
--- a/src/app/navbar.tsx
+++ b/src/app/navbar.tsx
@@ -4,7 +4,7 @@ import Link from "next/link";
 const Navbar = () => {
     return(
         <>
-            <nav className={"w-full h-16 bg-navbar"}>
+            <nav className={"w-full h-16 bg-betterBlack"}>
                 <div className={"flex items-center justify-between h-full px-5 md:px-32"}>
                     <div className={"text-white md:hidden"}>
                         <svg
@@ -30,13 +30,13 @@ const Navbar = () => {
                     <div className={"h-full"}>
                         <ul className={"hidden md:flex flex-row items-center text-lg font-medium text-betterWhite h-full"}>
                             <Link href={"/"}>
-                                <li className={"cursor-pointer hover:underline hover:bg-red-700 p-4"}>Home</li>
+                                <li className={"cursor-pointer hover:underline hover:bg-hoverColor p-4"}>Home</li>
                             </Link>
                             <Link href={"/about"}>
-                                <li className={"cursor-pointer hover:underline hover:bg-red-700 p-4"}>About</li>
+                                <li className={"cursor-pointer hover:underline hover:bg-hoverColor p-4"}>About</li>
                             </Link>
-                            <li className={"cursor-pointer hover:underline hover:bg-red-700 p-4"}>something</li>
-                            <li className={"cursor-pointer hover:underline hover:bg-red-700 p-4"}>something</li>
+                            <li className={"cursor-pointer hover:underline hover:bg-hoverColor p-4"}>something</li>
+                            <li className={"cursor-pointer hover:underline hover:bg-hoverColor p-4"}>something</li>
                         </ul>
                     </div>
                 </div>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index a3c994a..b876334 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -56,13 +56,15 @@ const ImageCarousel = ({pokemons}: {pokemons: IPokemon[]}) => {
                 {pokemons.map((pokemon) =>
                     <div key={pokemon.id} className={"inline-block p-2 pointer-events-none border-b border-black"}>
                         <div className={"text-center"}>
-                            <Image
-                                className={"h-16 w-auto"}
-                                priority
-                                src={pokemon.image}
-                                alt={pokemon.name}
-                                width={100}
-                                height={120}/>
+                            <div className={"bg-darkerWhite rounded-2xl"}>
+                                <Image
+                                    className={"h-16 w-auto"}
+                                    priority
+                                    src={pokemon.image}
+                                    alt={pokemon.name}
+                                    width={100}
+                                    height={120}/>
+                            </div>
                             <span>{pokemon.name}</span>
                         </div>
                     </div>
@@ -88,21 +90,23 @@ const ImageCarousel = ({pokemons}: {pokemons: IPokemon[]}) => {
 const PokemonSelector = ({pokemons} : {pokemons: IPokemon[]}) => {
     return(
         <>
-            <div className={"w-96 h-96 bg-darkerWhite rounded"}>
-                <div className={"p-10 flex flex-col"}>
+            <div className={"w-96 h-96 bg-darkerWhite border border-hoverColor rounded"}>
+                <div className={"flex flex-col"}>
                     <div>
-                        1. Choose first Pokemon
                         <Searchbar pokemons={pokemons}/>
                     </div>
-                    <div className={"h-40 relative"}>
-                        <Image
-                            className={"pixel"}
-                            src={"https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png"}
-                            alt={"pokemon2"}
-                            fill
-                        />
+                    <div className={"border-b border-hoverColor h-52 text-center font-bold text-xl"}>
+                        <div className={"h-40 relative"}>
+                            <Image
+                                className={"pixel"}
+                                src={"https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png"}
+                                alt={"pokemon2"}
+                                fill
+                            />
+                        </div>
+                        <span>Pikachu</span>
                     </div>
-                    <div>
+                    <div className={"p-5"}>
                         <div>
                             Stats:
                         </div>
diff --git a/src/app/searchbar.tsx b/src/app/searchbar.tsx
index 0007ead..ed5c6f1 100644
--- a/src/app/searchbar.tsx
+++ b/src/app/searchbar.tsx
@@ -27,11 +27,14 @@ const Searchbar = ({pokemons} : {pokemons: IPokemon[]}) => {
             <div>
                 <Combobox value={selected} onChange={handlePokemon} nullable>
                     <Combobox.Input as={Fragment} onChange={(e) => setSearch(e.target.value)} displayValue={(selected: SearchOptions) => selected?.name}>
-                        <input className={"bg-betterWhite text-black w-full h-9 rounded outline-0 indent-4"} type="text"/>
+                        <input
+                            className={"bg-betterBlack text-betterWhite w-full h-12 rounded-t outline-0 indent-4"}
+                            placeholder={"Type Pokémon name"}
+                            type="text"/>
                     </Combobox.Input>
                     {search && (
                         <div className={"relative"}>
-                            <Combobox.Options className={"bg-betterWhite text-black absolute w-full z-50 max-h-56 rounded overflow-y-scroll"}>
+                            <Combobox.Options className={"bg-betterWhite text-black absolute w-full z-50 max-h-56 rounded-b overflow-y-scroll"}>
                                 <p className={"ml-3 text-summoner-gray"}>Pokémons</p>
                                 {filteredPokemons != null && (
                                     filteredPokemons.length === 0 ? (
@@ -63,8 +66,8 @@ const SearchOptions = (props: SearchOptions) => {
             <Combobox.Option value={props}>
                 {({active, selected}) => (
                     <>
-                        <ul className={"text-betterWhite"}>
-                            <li className={`hover:bg-red-400 ${active ? "bg-red-400" : ""} p-3 cursor-pointer`}>
+                        <ul className={""}>
+                            <li className={`hover:bg-hoverColor hover:text-betterWhite ${active ? "bg-hoverColor text-betterWhite" : ""} p-3 cursor-pointer`}>
                                 <div className={"flex items-center"}>
                                     <Image
                                         priority
@@ -74,7 +77,7 @@ const SearchOptions = (props: SearchOptions) => {
                                         height={30}/>
                                     <div className={"flex justify-between items-center w-full"}>
                                         <div>
-                                            <span className={"ml-1 text-black"}>{name}</span>
+                                            <span className={"ml-1"}>{name}</span>
                                         </div>
                                     </div>
                                 </div>
diff --git a/tailwind.config.js b/tailwind.config.js
index b96e991..a3d3fd8 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -10,6 +10,8 @@ module.exports = {
         betterWhite: 'rgb(246,246,246)',
         betterBlue: '#4169a7',
         darkerWhite: '#eaeaea',
+        betterBlack: '#202020',
+        hoverColor: '#292929',
       },
       fontFamily: {
         sans: ['Lato', 'sans-serif']