From 2095097255e056478bad45b921c9689b0fb14124 Mon Sep 17 00:00:00 2001
From: Halvor <halvor@Debian-Linux.myguest.virtualbox.org>
Date: Wed, 16 Sep 2026 12:08:53 +0200
Subject: [PATCH 1/3] Link to about page via button

---
 PTG/src/Header.css | 27 ++++++---------------------
 PTG/src/Header.tsx | 11 +++++++++--
 2 files changed, 15 insertions(+), 23 deletions(-)

diff --git a/PTG/src/Header.css b/PTG/src/Header.css
index 511e8e1..920b596 100644
--- a/PTG/src/Header.css
+++ b/PTG/src/Header.css
@@ -1,31 +1,16 @@
-.header {
+header {
     background-color: red;
-    color: white;
-    align-items: center;
     display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-}
-
-.name{
-    margin: 0;
-    padding: 10px;
+    align-items: center;
+    justify-content: center;
 }
 
-.about{
-    height: 100%;
-    padding: 10px;
-    border: 0;
-    background-color: red;
+button{
+    background-color: transparent;
     color: white;
-    transition: transform 0.3s ease-in-out;
-
+    border: none;
 }
 
-.about:hover{
-    cursor: pointer;
-    transform: translateY(-8px);
-}
 
 div{
     margin-bottom: 10px;
diff --git a/PTG/src/Header.tsx b/PTG/src/Header.tsx
index 72f5af4..f4337da 100644
--- a/PTG/src/Header.tsx
+++ b/PTG/src/Header.tsx
@@ -1,11 +1,18 @@
 import './Header.css'
+import { Link } from 'react-router-dom'
 
 export default function Header(){
     return(
         <div>
         <header className="header">
-            <h1 className="name">Pokémon Team Generator</h1>
-            <button className='about'>About</button>
+            <Link to={"/"}>
+                <button className='websiteName'>
+                    Pokémon Team Generator
+                </button>
+            </Link>
+            <Link to={"/about"}>
+                <button className='about'>About</button>
+            </Link>
         </header>
         </div>
     );

From b8420c4a9015fa5f057fb9f07f4b0ae052710e0f Mon Sep 17 00:00:00 2001
From: Halvor <halvor@Debian-Linux.myguest.virtualbox.org>
Date: Wed, 16 Sep 2026 13:18:54 +0200
Subject: [PATCH 2/3] Changed links from button element to Link element

---
 PTG/src/Header.tsx | 14 ++++----------
 1 file changed, 4 insertions(+), 10 deletions(-)

diff --git a/PTG/src/Header.tsx b/PTG/src/Header.tsx
index f4337da..ea6648e 100644
--- a/PTG/src/Header.tsx
+++ b/PTG/src/Header.tsx
@@ -3,16 +3,10 @@ import { Link } from 'react-router-dom'
 
 export default function Header(){
     return(
-        <div>
-        <header className="header">
-            <Link to={"/"}>
-                <button className='websiteName'>
-                    Pokémon Team Generator
-                </button>
-            </Link>
-            <Link to={"/about"}>
-                <button className='about'>About</button>
-            </Link>
+        <div className="header">
+        <header>
+            <Link className="websiteName" to={"/"}>Pokémon Team Generator</Link>
+            <Link className="about" to={"/about"}>About</Link>
         </header>
         </div>
     );

From 6de3328fb1d7353176e061d94ba76586fa0bb01c Mon Sep 17 00:00:00 2001
From: Halvor <halvor@Debian-Linux.myguest.virtualbox.org>
Date: Wed, 16 Sep 2026 13:19:43 +0200
Subject: [PATCH 3/3] Removed hover effect

---
 PTG/src/Footer.css |  4 ----
 PTG/src/Header.css | 16 +++++++++++-----
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/PTG/src/Footer.css b/PTG/src/Footer.css
index 1aec02e..2d160a1 100644
--- a/PTG/src/Footer.css
+++ b/PTG/src/Footer.css
@@ -24,7 +24,3 @@ p, a{
     justify-content: space-evenly;
     flex-wrap: wrap;
 }
-
-a:hover{
-    transform: translateY(-8px);
-}
\ No newline at end of file
diff --git a/PTG/src/Header.css b/PTG/src/Header.css
index 920b596..1370523 100644
--- a/PTG/src/Header.css
+++ b/PTG/src/Header.css
@@ -3,17 +3,23 @@ header {
     display: flex;
     align-items: center;
     justify-content: center;
+    width: 100%;
+    margin-bottom: 5px;
 }
 
-button{
-    background-color: transparent;
+.about{
+    right: 5%;
+    position: absolute;
     color: white;
-    border: none;
+    margin-top: 5px;
+    margin-bottom: 5px;
 }
 
+.websiteName{
+    color: white;
+    margin-top: 5px;
+    margin-bottom: 5px;
 
-div{
-    margin-bottom: 10px;
 }
 
 @media screen and (max-width: 400px){