diff --git a/README.md b/README.md
index 625e622..04c5407 100644
--- a/README.md
+++ b/README.md
@@ -9,4 +9,5 @@ Small tracker site build with GO and HTMX.
 - [ ] Database connection
 - [ ] Page to track critical hits or misses
 - [ ] Dark Mode
+- [ ] Bonus HP feature
 - [x] Remove the main PicoCSS files from Git
diff --git a/handler/tracker.go b/handler/tracker.go
index cda8631..20e20df 100644
--- a/handler/tracker.go
+++ b/handler/tracker.go
@@ -7,6 +7,7 @@ import (
 	"strconv"
 
 	"github.com/gofiber/fiber/v3"
+	"github.com/gofiber/fiber/v3/log"
 	"github.com/itsig0/tallytome/view/hptracker"
 )
 
@@ -82,9 +83,14 @@ func TrackerUpdate(c fiber.Ctx) error {
 		return render(c, hptracker.BaseStats(data, bd))
 	}
 
+	//calculate max hp
+	intBase, _ := strconv.Atoi(data.HPBase)
+	data.HPMax = fmt.Sprint(float64(intBase)*0.2 + float64(intBase))
+
 	pre := "tracker_"
 	sess.Set(pre+"HP", data.HP)
 	sess.Set(pre+"HPBase", data.HPBase)
+	sess.Set(pre+"HPMax", data.HPMax)
 	sess.Set(pre+"HPPercentage", data.HPPercentage)
 	sess.Set(pre+"HPStartPercentage", data.HPPercentage)
 
@@ -142,16 +148,36 @@ func TrackerDamage(c fiber.Ctx) error {
 
 	// no error handling here because it's already done for currentHP
 	baseHP, _ := strconv.Atoi(fmt.Sprint(sess.Get("tracker_HPBase")))
+	maxHP, _ := strconv.Atoi(fmt.Sprint(sess.Get("tracker_HPMax")))
 
 	heal := c.FormValue("heal")
 	savingThrow := c.FormValue("savingthrow")
+	bonusHPSet := c.FormValue("bonushp")
+	hasBonusHP := false
+
+	bonusRounds, _ := strconv.Atoi(c.FormValue("bonusInput"))
+	if bonusRounds < 1 {
+		bonusRounds = 1
+	}
+
+	if currentHP > baseHP {
+		hasBonusHP = true
+	}
+
+	if bonusHPSet == "on" {
+		damage = damage / bonusRounds
+		sess.Set("tracker_HPBonusRounds", fmt.Sprint(bonusRounds-1))
+		sess.Set("tracker_HPBonusHeal", fmt.Sprint(damage))
+	}
 
 	if savingThrow == "on" && heal != "true" {
 		damageFloat := float64(damage) * 0.33333
 		damage -= int(math.Round(damageFloat))
 	}
 
-	if heal == "true" {
+	if heal == "true" && hasBonusHP == true {
+		damage = 0
+	} else if heal == "true" {
 		damage *= -1
 	}
 
@@ -161,17 +187,28 @@ func TrackerDamage(c fiber.Ctx) error {
 		newHP = 0
 	}
 
-	if newHP > baseHP {
+	if newHP > baseHP && bonusHPSet != "on" && hasBonusHP == false {
 		newHP = baseHP
 	}
 
+	if newHP > maxHP {
+		newHP = maxHP
+	}
+
+	bonusHPPercentage := 0
 	newPercentage := (newHP * 100) / baseHP
 
+	if newPercentage >= 100 {
+		bonusHPPercentage = newPercentage - 100
+		newPercentage = 100
+	}
+
 	data := hptracker.TrackerData{
 		HP:                fmt.Sprint(newHP),
 		HPBase:            fmt.Sprint(sess.Get("tracker_HPBase")),
 		HPStartPercentage: fmt.Sprint(sess.Get("tracker_HPPercentage")),
 		HPPercentage:      fmt.Sprint(newPercentage),
+		HPBonusPercentage: fmt.Sprint(bonusHPPercentage),
 	}
 
 	sess.Set("tracker_HP", newHP)
@@ -184,6 +221,10 @@ func TrackerDamage(c fiber.Ctx) error {
 	return render(c, hptracker.HPTracker(data))
 }
 
+func TrackerBonusHP(c fiber.Ctx) error {
+	return c.SendString("I'm tracking you")
+}
+
 func TrackerMana(c fiber.Ctx) error {
 	sess, err := store.Get(c)
 	if err != nil {
@@ -261,7 +302,7 @@ func TrackerRound(c fiber.Ctx) error {
 
 	data := hptracker.TrackerData{}
 
-	fields := []string{"HP", "HPBase", "HPStartPercentage", "HPPercentage", "Mana", "ManaBase", "ManaRegen", "ManaStartPercentage", "ManaPercentage", "Round"}
+	fields := []string{"HP", "HPBase", "HPStartPercentage", "HPPercentage", "Mana", "ManaBase", "ManaRegen", "ManaStartPercentage", "ManaPercentage", "Round", "HPBonusRounds", "HPBonusHeal", "HPMax"}
 	for _, field := range fields {
 		if val := sess.Get("tracker_" + field); val != nil {
 			reflect.ValueOf(&data).Elem().FieldByName(field).SetString(fmt.Sprint(val))
@@ -273,11 +314,29 @@ func TrackerRound(c fiber.Ctx) error {
 	manaRegen, _ := strconv.Atoi(data.ManaRegen)
 	round, _ := strconv.Atoi(data.Round)
 
+	hp, _ := strconv.Atoi(data.HP)
+	hpMax, _ := strconv.Atoi(data.HPMax)
+	hpBonusRounds, _ := strconv.Atoi(data.HPBonusRounds)
+	hpBonusHeal, _ := strconv.Atoi(data.HPBonusHeal)
+
+	log.Info(hpBonusRounds)
+	log.Info(hpBonusHeal)
+
 	if manaBase == 0 || manaRegen == 0 {
 		c.Status(418)
 		return render(c, hptracker.TrackerHeader(data))
 	}
 
+	if hpBonusRounds > 0 {
+		hp += hpBonusHeal
+		hpBonusRounds -= 1
+	}
+
+	log.Info(hpMax)
+	if hp > hpMax {
+		hp = hpMax
+	}
+
 	mana += (manaRegen * manaBase) / 100
 
 	if mana > manaBase {
@@ -291,11 +350,15 @@ func TrackerRound(c fiber.Ctx) error {
 	data.Round = fmt.Sprint(round + 1)
 	data.ManaStartPercentage = data.ManaPercentage
 	data.ManaPercentage = fmt.Sprint((mana * 100) / manaBase)
+	data.HP = fmt.Sprint(hp)
+	data.HPBonusRounds = fmt.Sprint(hpBonusRounds)
 
 	sess.Set("tracker_Mana", data.Mana)
 	sess.Set("tracker_ManaPercentage", data.ManaPercentage)
 	sess.Set("tracker_ManaStartPercentage", data.ManaStartPercentage)
 	sess.Set("tracker_Round", data.Round)
+	sess.Set("tracker_HP", data.HP)
+	sess.Set("tracker_HPBonusRounds", data.HPBonusRounds)
 
 	sess.Save()
 
diff --git a/main.go b/main.go
index add4b9d..870e30c 100644
--- a/main.go
+++ b/main.go
@@ -6,7 +6,6 @@ import (
 
 	"github.com/gofiber/fiber/v3"
 	"github.com/gofiber/fiber/v3/middleware/compress"
-	"github.com/gofiber/fiber/v3/middleware/logger"
 	"github.com/itsig0/tallytome/handler"
 )
 
@@ -23,7 +22,7 @@ func main() {
 
 	// compression baby
 	app.Use(compress.New())
-	app.Use(logger.New())
+	//app.Use(logger.New())
 
 	app.Static("/", "./public")
 
@@ -34,6 +33,7 @@ func main() {
 	tracker.Post("/update", handler.TrackerUpdate)
 	tracker.Post("/damage", handler.TrackerDamage)
 	tracker.Post("/mana", handler.TrackerMana)
+	tracker.Post("/bonus-hp", handler.TrackerBonusHP)
 	tracker.Get("/newround", handler.TrackerRound)
 	tracker.Get("/reset", handler.TrackerReset)
 	// app.Get("/*", func(c *fiber.Ctx) error {
diff --git a/public/scripts/tallytome.js b/public/scripts/tallytome.js
index e71356c..5354060 100644
--- a/public/scripts/tallytome.js
+++ b/public/scripts/tallytome.js
@@ -19,6 +19,13 @@ document.addEventListener("DOMContentLoaded", (event) => {
 
         var savingthrow = document.getElementById("savingthrow");
         savingthrow.checked = false;
+
+        var bonushp = document.getElementById("bonushp");
+        var bonusInput = document.getElementById("bonusInput");
+        bonusInput.classList.add("hidden");
+        bonusInput.disabled = true;
+        bonusInput.value = "";
+        bonushp.checked = false;
     });
 
     document.body.addEventListener("ManaUpdated", function() {
@@ -71,3 +78,16 @@ function setTheme(theme) {
     localStorage.setItem(atr, theme)
 }
 
+
+// round toggle
+//function toggleRounds() {
+//    let box = document.getElementById("bonushp");
+//    let inp = document.getElementById("bonusInput");
+//    if (box.checked == true) {
+//        inp.classList.remove("hidden");
+//        inp.disabled = false;
+//    } else {
+//        inp.classList.add("hidden");
+//        inp.disabled = true;
+//    }
+//}
diff --git a/view/hptracker/tracker.templ b/view/hptracker/tracker.templ
index 5ce0776..3a2b5cc 100644
--- a/view/hptracker/tracker.templ
+++ b/view/hptracker/tracker.templ
@@ -6,8 +6,12 @@ import "fmt"
 type TrackerData struct {
 	HP                  string
 	HPBase              string
+	HPMax               string
 	HPStartPercentage   string
 	HPPercentage        string
+	HPBonusPercentage   string
+	HPBonusRounds       string
+	HPBonusHeal         string
 	Mana                string
 	ManaBase            string
 	ManaStartPercentage string
@@ -70,17 +74,20 @@ templ Show(hx bool, td TrackerData) {
 					@Mana(md)
 				</div>
 			</div>
-            <details>
-                <summary>Extras</summary>
-			    <button type="button" hx-get="/hp-mana-tracker/reset" hx-target="main" hx-swap="innerHTML">Reset</button>
-            </details>
+			<details>
+				<summary>Extras</summary>
+				<button type="button" hx-get="/hp-mana-tracker/reset" hx-target="main" hx-swap="innerHTML">Reset</button>
+			</details>
 		</div>
 	}
 }
 
 templ TrackerHeader(td TrackerData) {
 	<div class="start">
-		<h2>Kampfrunde: { td.Round }</h2>
+		<hgroup>
+			<h2>Kampfrunde: { td.Round }</h2>
+			<p style="font-size: 0.8rem">Bonus TP: 60, Runden: 2</p>
+		</hgroup>
 	</div>
 	<div id="trackerBars" class="middle">
 		@TrackerColumn(td)
@@ -102,6 +109,7 @@ templ TrackerColumn(td TrackerData) {
 templ HPTracker(td TrackerData) {
 	<span class="progress-label">TP: { td.HP }/{ td.HPBase } </span>
 	<div class={ "hp" , hpAnimation(td.HPStartPercentage, td.HPPercentage) }></div>
+	<div class={ "bonushp", extraWidth(td.HPBonusPercentage) }></div>
 }
 
 templ ManaTracker(td TrackerData) {
@@ -109,6 +117,10 @@ templ ManaTracker(td TrackerData) {
 	<div class={ "mana" , manaAnimation(td.ManaStartPercentage, td.ManaPercentage) }></div>
 }
 
+css extraWidth(data string) {
+	width: { fmt.Sprintf("%s%%", data) };
+}
+
 css hpAnimation(from, to string) {
 	--hp-from-width: { fmt.Sprintf("%s%%", from) };
 	--hp-to-width: { fmt.Sprintf("%s%%", to) };
@@ -172,14 +184,46 @@ templ Hp(dd DamageData) {
 		}
 		<fieldset>
 			<label for="savingthrow">
-				<input id="savingthrow" name="savingthrow" type="checkbox" role="switch" 
-                if dd.SavingThrow != "" { 
-                    checked
-                }
-                />
+				<input
+					id="savingthrow"
+					name="savingthrow"
+					type="checkbox"
+					role="switch"
+					if dd.SavingThrow != "" {
+						checked
+					}
+				/>
 				Verteidigungswurf
 			</label>
+			<label for="bonushp">
+				<input id="bonushp" name="bonushp" type="checkbox" role="switch" onclick="toggleRounds()"/>
+				Bonus HP
+			</label>
+			<input
+				id="bonusInput"
+				class="hidden"
+				name="bonusInput"
+				type="number"
+				placeholder="Runden"
+				value={ dd.Values }
+				style="width:50%"
+				disabled="true"
+				required
+			/>
 		</fieldset>
+		<script>
+        function toggleRounds() {
+            let box = document.getElementById("bonushp");
+            let inp = document.getElementById("bonusInput");
+            if (box.checked == true) {
+                inp.classList.remove("hidden");
+                inp.disabled = false;
+            } else {
+                inp.classList.add("hidden");
+                inp.disabled = true;
+            }
+        }
+        </script>
 	</form>
 }
 
diff --git a/view/stylesheets/tallytome.scss b/view/stylesheets/tallytome.scss
index 16a0766..a2c2e44 100644
--- a/view/stylesheets/tallytome.scss
+++ b/view/stylesheets/tallytome.scss
@@ -1,7 +1,5 @@
-@use "node_modules/@picocss/pico/scss/pico" with (
-    $theme-color: "cyan",
-    $modules: (
-        "themes/default": false,
+@use "node_modules/@picocss/pico/scss/pico" with ($theme-color: "cyan",
+    $modules: ("themes/default": false,
 
         // Layout
         "layout/document": true,
@@ -43,36 +41,34 @@
 
         // Utilities
         "utilities/accessibility": true,
-        "utilities/reduce-motion": true
-    )
-);
+        "utilities/reduce-motion": true));
 
 @use "node_modules/@picocss/pico/scss/colors/index" as *;
 
 @use "custom/styles";
 @use "custom/schemes";
 
-:root{
-//     // https://coolors.co/00072d-001c55-0a2472-0e6ba8-a6e1fa
-//     --font-size: 1.2rem;
-//     --border-radius: 5px;
-//     --focus-boxshadow: 0.2rem;
+:root {
+    //     // https://coolors.co/00072d-001c55-0a2472-0e6ba8-a6e1fa
+    //     --font-size: 1.2rem;
+    //     --border-radius: 5px;
+    //     --focus-boxshadow: 0.2rem;
 
-//     --pico-primary: hsl(204, 85%, 36%);
+    //     --pico-primary: hsl(204, 85%, 36%);
 
-//     --focus: hsl(204, 85%, 50%);
+    //     --focus: hsl(204, 85%, 50%);
 
-//     --grey0: hsl(0, 0%, 0%);
-//     --grey1: hsl(0, 0%, 10%);
-//     --grey2: hsl(0, 0%, 20%);
-//     --grey3: hsl(0, 0%, 30%);
-//     --grey4: hsl(0, 0%, 40%);
-//     --grey5: hsl(0, 0%, 50%);
-//     --grey6: hsl(0, 0%, 60%);
-//     --grey7: hsl(0, 0%, 70%);
-//     --grey8: hsl(0, 0%, 80%);
-//     --grey9: hsl(0, 0%, 90%);
-//     --grey10: hsl(0, 0%, 100%);
+    //     --grey0: hsl(0, 0%, 0%);
+    //     --grey1: hsl(0, 0%, 10%);
+    //     --grey2: hsl(0, 0%, 20%);
+    //     --grey3: hsl(0, 0%, 30%);
+    //     --grey4: hsl(0, 0%, 40%);
+    //     --grey5: hsl(0, 0%, 50%);
+    //     --grey6: hsl(0, 0%, 60%);
+    //     --grey7: hsl(0, 0%, 70%);
+    //     --grey8: hsl(0, 0%, 80%);
+    //     --grey9: hsl(0, 0%, 90%);
+    //     --grey10: hsl(0, 0%, 100%);
 
     // --color-ok: #{$green-500};
     // --color-warning: #{$pumpkin-300};
@@ -109,11 +105,11 @@
 //     }
 // }
 
-.text-center{
+.text-center {
     text-align: center;
 }
 
-.text-right{
+.text-right {
     text-align: right;
 }
 
@@ -145,43 +141,43 @@ a {
 }
 
 // progress
-progress{
+progress {
     height: 1.25rem;
 }
 
 // stat container
-.stat-container{
+.stat-container {
     display: flex;
     margin-bottom: var(--pico-spacing);
 
-    .start{
+    .start {
         justify-content: flex-start;
         margin-right: auto;
     }
 
-    .middle{
+    .middle {
         justify-content: center;
         margin-left: auto;
         margin-right: auto;
     }
 
-    .end{
+    .end {
         justify-content: flex-end;
         margin-left: auto;
     }
 }
 
-.lbl-offset{
+.lbl-offset {
     display: flex;
     margin-bottom: calc(var(--pico-spacing) * 0.4);
 
-    button{
+    button {
         margin-top: auto;
     }
 }
 
 
-.progress{
+.progress {
     border-radius: var(--pico-border-radius);
     color: var(--pico-contrast);
     height: 1.25rem;
@@ -193,45 +189,63 @@ progress{
     margin-bottom: calc(var(--pico-spacing) * .5);
 
 
-    .progress-label{
+    .progress-label {
         position: absolute;
         top: 0;
         z-index: 20;
         font-size: 0.9rem;
     }
-    div{
+
+    div {
         height: 100%;
         border-radius: var(--pico-border-radius);
         background: var(--pico-primary);
-        position: relative;
+        position: absolute;
         z-index: 10;
-        align-self: start;
-        margin-right: auto;
+        left: 0;
         animation-duration: 1s;
         animation-fill-mode: forwards;
 
-        &.mana{
+        &.mana {
             background-color: var(--color-mana);
             animation-name: manaAnimation;
+
             @keyframes manaAnimation {
-                0%   {width: var(--mana-from-width);}
-                100% {width: var(--mana-to-width);}
+                0% {
+                    width: var(--mana-from-width);
+                }
+
+                100% {
+                    width: var(--mana-to-width);
+                }
             }
         }
-        &.hp{
+
+        &.hp {
             background-color: var(--color-hp);
             animation-name: hpAnimation;
+
             @keyframes hpAnimation {
-                0%   {width: var(--hp-from-width);}
-                100% {width: var(--hp-to-width);}
+                0% {
+                    width: var(--hp-from-width);
+                }
+
+                100% {
+                    width: var(--hp-to-width);
+                }
             }
         }
 
+        &.bonushp {
+            background-color: orange;
+            z-index: 11;
+        }
+
     }
 }
 
 
-.error-helper{
+.error-helper {
     color: var(--color-error);
 }
 
@@ -239,32 +253,36 @@ progress{
 // utility
 // margins
 
-.mb-0{
+.mb-0 {
     margin-bottom: 0 !important;
 }
 
-.mb-1{
+.mb-1 {
     margin-bottom: calc(var(--pico-spacing) * .25);
 }
 
-.mb-2{
+.mb-2 {
     margin-bottom: calc(var(--pico-spacing) * .50);
 }
 
-.mb-3{
+.mb-3 {
     margin-bottom: calc(var(--pico-spacing) * .75);
 }
 
-.mb-4{
+.mb-4 {
     margin-bottom: var(--pico-spacing);
 }
 
+.hidden {
+    display: none;
+}
+
 #loginContainer {
-  height: 100vh;
-  max-width: 510px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
+    height: 100vh;
+    max-width: 510px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
 }
 
 // form elements