diff --git a/src/modules/main/modules/sheetHeader/components/SheetHeader.tsx b/src/modules/main/modules/sheetHeader/components/SheetHeader.tsx
index c76b53f..935c6b1 100644
--- a/src/modules/main/modules/sheetHeader/components/SheetHeader.tsx
+++ b/src/modules/main/modules/sheetHeader/components/SheetHeader.tsx
@@ -1,128 +1,145 @@
 import type {CharacterData} from "../../../../../types/CharacterJson.ts";
 import {
-    type AttributeWithValue,
-    loadAttributesWithValues,
-    loadProfession,
-    loadRace,
-    loadRaceVariant
+  type AttributeWithValue,
+  loadAttributesWithValues,
+  loadProfession,
+  loadRace,
+  loadRaceVariant
 } from "../../../../../utils/loaders";
 import {useEffect, useState} from 'react';
 
 export default function SheetHeader({jsonData}: { jsonData: CharacterData }) {
-    const [raceName, setRaceName] = useState<string>(jsonData.r);
-    const [raceVariantName, setRaceVariantName] = useState<string>(jsonData.rv || '');
-    const [professionName, setProfessionName] = useState<string>(jsonData.p);
-    const [attributes, setAttributes] = useState<AttributeWithValue[]>([]);
+  const [raceName, setRaceName] = useState<string>(jsonData.r);
+  const [raceVariantName, setRaceVariantName] = useState<string>(jsonData.rv || '');
+  const [professionName, setProfessionName] = useState<string>(jsonData.p);
+  const [attributes, setAttributes] = useState<AttributeWithValue[]>([]);
 
-    useEffect(() => {
-        let isMounted = true;
+  useEffect(() => {
+    let isMounted = true;
 
-        const loadData = async () => {
-            try {
-                // Load race and profession using the new loader functions
-                const [race, raceVariant, profession] = await Promise.all([
-                    loadRace(jsonData.r),
-                    loadRaceVariant(jsonData.rv || ''),
-                    loadProfession(jsonData.p)
-                ]);
+    const loadData = async () => {
+      try {
+        // Load race and profession using the new loader functions
+        const [race, raceVariant, profession] = await Promise.all([
+          loadRace(jsonData.r),
+          loadRaceVariant(jsonData.rv || ''),
+          loadProfession(jsonData.p)
+        ]);
 
-                // Process attributes using the new loadAttributesWithValues function
-                const loadedAttributes = await loadAttributesWithValues(jsonData.attr.values);
+        // Process attributes using the new loadAttributesWithValues function
+        const loadedAttributes = await loadAttributesWithValues(jsonData.attr.values);
 
-                if (isMounted) {
-                    setRaceName(race?.name || jsonData.r);
-                    setRaceVariantName(raceVariant?.name|| '');
-                    // For profession, handle gendered name
-                    if (profession?.name) {
-                        setProfessionName(profession.name.m || profession.name.f || jsonData.p);
-                    } else {
-                        setProfessionName(jsonData.p);
-                    }
-                    // Set the attributes with their values, names, and short forms
-                    setAttributes(loadedAttributes);
-                }
-            } catch (error) {
-                console.error('Error loading data:', error);
-                if (isMounted) {
-                    setRaceName(jsonData.r);
-                    setProfessionName(jsonData.p);
-                }
-            }
-        };
+        if (isMounted) {
+          setRaceName(race?.name || jsonData.r);
+          setRaceVariantName(raceVariant?.name || '');
+          // For profession, handle gendered name
+          if (profession?.name) {
+            setProfessionName(profession.name.m || profession.name.f || jsonData.p);
+          } else {
+            setProfessionName(jsonData.p);
+          }
+          // Set the attributes with their values, names, and short forms
+          setAttributes(loadedAttributes);
+        }
+      } catch (error) {
+        console.error('Error loading data:', error);
+        if (isMounted) {
+          setRaceName(jsonData.r);
+          setProfessionName(jsonData.p);
+        }
+      }
+    };
 
-        loadData();
+    loadData();
 
-        return () => {
-            isMounted = false;
-        };
-    }, [jsonData.r, jsonData.rv, jsonData.p, jsonData.attr]);
+    return () => {
+      isMounted = false;
+    };
+  }, [jsonData.r, jsonData.rv, jsonData.p, jsonData.attr]);
 
-    console.log(jsonData)
+  console.log(jsonData)
 
-    return (
-        <>
-            <div className="flex justify-between items-center py-5 px-5">
-                <div className="w-[30%]">
-                    <p className="border-b border-gray-500 font-semibold">
-                        {jsonData.name}
-                    </p>
-                    <small>Name</small>
-                </div>
-                <div className="w-[30%]">
-                    <p className="border-b border-gray-500 font-semibold">
-                        {raceName} {raceVariantName ? <>({raceVariantName})</> : ''}
-                    </p>
-                    <small>Spezies</small>
-                </div>
-                <div className="w-[30%]">
-                    <p className="border-b border-gray-500 font-semibold">
-                        {professionName}
-                    </p>
-                    <small>Profession</small>
-                </div>
+  return (
+      <>
+        <div className="flex justify-between items-center py-5 px-5">
+          <div className="w-[30%]">
+            <p className="border-b border-gray-500 font-semibold">
+              {jsonData.name}
+            </p>
+            <small>Name</small>
+          </div>
+          <div className="w-[30%]">
+            <p className="border-b border-gray-500 font-semibold">
+              {raceName} {raceVariantName ? <>({raceVariantName})</> : ''}
+            </p>
+            <small>Spezies</small>
+          </div>
+          <div className="w-[30%]">
+            <p className="border-b border-gray-500 font-semibold">
+              {professionName}
+            </p>
+            <small>Profession</small>
+          </div>
+        </div>
+
+        <div className="flex justify-between items-center py-3 px-10">
+          <div className="w-[20%] h-[20%] rounded-full overflow-hidden">
+            <img src="#" alt="char bild"/>
+          </div>
+
+          <div className="flex flex-col gap-2 w-[80%]">
+            <div className="flex justify-between">
+              {attributes.map(attr => (
+                  <div key={attr.id} className="w-[10%] text-center">
+                    <div className="font-bold">{attr.short}</div>
+                    <div>{attr.value}</div>
+                  </div>
+              ))}
             </div>
 
-            <div className="flex justify-between items-center py-3 px-10">
-                <div className="w-[20%] h-[20%] rounded-full overflow-hidden">
-                    <img src="#" alt="char bild"/>
-                </div>
-
-                <div className="flex flex-col gap-2 w-[80%]">
-                    <div className="flex justify-between">
-                        {attributes.map(attr => (
-                            <div key={attr.id} className="w-[10%] text-center">
-                                <div className="font-bold">{attr.short}</div>
-                                <div>{attr.value}</div>
-                            </div>
-                        ))}
-                    </div>
-
-                    <div className="w-[100%] flex pt-5">
+            <div className="w-[100%] flex pt-2">
               <span className="relative group cursor-help">
                 LP
                 <span
-                    className="absolute left-0 bottom-full mb-1 px-2 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap">
+                    className="absolute left-0 bottom-full mb-1 px-2 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap">
                   Lebenspunkte
                 </span>
               </span>
-                        <div
-                            className="ms-5 w-[50%] bg-red-800 rounded-s-full h-6 flex items-center justify-center text-white text-sm font-medium">
-                            15 / 15
-                        </div>
-                        <div
-                            className="me-5 w-[50%] bg-green-800 rounded-e-full h-6 flex items-center justify-center text-white text-sm font-medium">
-                            16 / 16
-                        </div>
-                        <span className="relative group cursor-help whitespace-nowrap">
-                AP/KP
+              <div
+                  className="ms-5 w-[100%] bg-gradient-to-r from-red-900  to-red-600 rounded-full h-6 flex items-center justify-center text-white text-sm font-medium">
+                15 / 15
+              </div>
+            </div>
+
+            <div className="w-[100%] flex pt-2">
+              <span className="relative group cursor-help">
+                AP
                 <span
-                    className="absolute right-0 bottom-full mb-1 px-2 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap">
-                  Astralpunkte / Karmapunkte
+                    className="absolute left-0 bottom-full mb-1 px-2 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap">
+                  Astralpunkte
                 </span>
               </span>
-                    </div>
+              <div
+                  className="ms-5 w-[100%] bg-gradient-to-r from-blue-900  to-blue-500 rounded-full h-6 flex items-center justify-center text-white text-sm font-medium">
+                16 / 16
+              </div>
+            </div>
 
-                    <div className="w-[100%] flex pt-5">
+            <div className="w-[100%] flex pt-2">
+              <span className="relative group cursor-help">
+                KP
+                <span
+                    className="absolute left-0 bottom-full mb-1 px-2 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap">
+                  Karmapunkte
+                </span>
+              </span>
+              <div
+                  className="ms-5 w-[100%] bg-gradient-to-r from-green-900  to-green-500 rounded-full h-6 flex items-center justify-center text-white text-sm font-medium">
+                16 / 16
+              </div>
+            </div>
+
+            <div className="w-[100%] flex pt-2">
               <span className="w-[10%] relative group cursor-help">
                 SP
                 <span
@@ -130,14 +147,14 @@ export default function SheetHeader({jsonData}: { jsonData: CharacterData }) {
                   Schicksalspunkte
                 </span>
               </span>
-                        <div className="w-[90%] flex items-center gap-2">
-                            <div className="rounded-full w-5 h-5 bg-violet-400"></div>
-                            <div className="rounded-full w-5 h-5 bg-violet-400"></div>
-                            <div className="rounded-full w-5 h-5 bg-violet-400"></div>
-                        </div>
-                    </div>
-                </div>
+              <div className="w-[90%] flex items-center gap-2">
+                <div className="rounded-full w-5 h-5 bg-gradient-to-br from-violet-700  to-violet-500"></div>
+                <div className="rounded-full w-5 h-5 bg-gradient-to-br from-violet-700  to-violet-500"></div>
+                <div className="rounded-full w-5 h-5 bg-gradient-to-br from-violet-700  to-violet-500"></div>
+              </div>
             </div>
-        </>
-    )
+          </div>
+        </div>
+      </>
+  )
 }