diff --git a/src/components/ResourceBar.astro b/src/components/ResourceBar.astro
index 43dae4e..d5cf005 100644
--- a/src/components/ResourceBar.astro
+++ b/src/components/ResourceBar.astro
@@ -11,14 +11,14 @@ const lang = await getLocales(Astro.cookies.get('language')?.value ?? await getH
 
 const planetId = new ObjectId(Astro.cookies.get('planetid')?.value ?? '');
 
-const resources = locationManager.getPlanet(planetId)?.resources;
+const planet = locationManager.getPlanet(planetId);
 
-if(!resources) return;
+if(!planet) return;
 
-resources.calculateCurrentAvailableResources();
+planet.resources.calculateCurrentAvailableResources();
 
 const resourceArray: Resource[] = [];
-for(const key of resources.resources) {
+for(const key of planet.resources.resources) {
     resourceArray.push(key);
 }
 ---
@@ -26,6 +26,9 @@ for(const key of resources.resources) {
     <div class="resourcebar-item-identifier">
         <div class="resourcebar-circle-id" data-type="solid"></div>
     </div>
+    <div class="resourcebar-planetname">
+        {planet.name}
+    </div>
     <div id="resourcebar-elements" class="resourcebar-elements">
         {resourceArray.map(res =>
             <div class="resourcebar-item"
@@ -77,6 +80,11 @@ for(const key of resources.resources) {
     margin-bottom: 8px;
 }
 
+.resourcebar-planetname {
+    margin-top: 8px;
+    font-size: 2.5em;
+    margin-left: 25px;
+}
 
 .resourcebar-elements {
     flex-grow: 1;
@@ -125,11 +133,13 @@ for(const key of resources.resources) {
     margin-top: 70px;
     width: 150%;
     border-radius: 10px;
-    transition: opacity 1s;
+    transition: visibility 1s, opacity 1s;
+    visibility: hidden;
     opacity: 0;
 }
 
 .resourcebar-item:hover .resourcebar-item-tooltip {
+    visibility: visible;
     opacity: 1;
 }
 </style>