diff --git a/Website/interaction.js b/Website/interaction.js
index dba3db2..2f56385 100644
--- a/Website/interaction.js
+++ b/Website/interaction.js
@@ -219,10 +219,10 @@ function CreateManga(manga, connector){
         statusTooltip.innerText = 'Status Unavailable';
     }
     releaseStatus.appendChild(statusTooltip);         //Append the tooltip to the indicator circle
-    mangaName.appendChild(releaseStatus);                  //Append the release status indicator to the info block
 
     info.appendChild(mangaName);
     mangaElement.appendChild(info);
+    mangaElement.appendChild(releaseStatus);                  //Append the release status indicator to the publication element
     return mangaElement;
 }
 
diff --git a/Website/styles/style_default.css b/Website/styles/style_default.css
index 4f4e67c..0a884c5 100644
--- a/Website/styles/style_default.css
+++ b/Website/styles/style_default.css
@@ -251,13 +251,16 @@ publication-name{
 }
 
 publication-status {
-    display: inline-block;
+    display:block;
     height: 10px;
     width: 10px;
     border-radius: 50%;
     margin: 5px;
-    position: relative;
-    vertical-align: middle;
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    z-index: 2;
+    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 10px, rgb(51, 51, 51) 0px 0px 10px 3px;
 }
 
 publication-status:hover > status-tooltip {
@@ -269,8 +272,8 @@ status-tooltip {
     position: absolute;
 
     /*Position*/
-    left: -50px ;
-    bottom: 150%;
+    left: 150%;
+    bottom: -75%;
     z-index: 3;
     
     /*Text Properties*/
@@ -284,17 +287,20 @@ status-tooltip {
     width:100px;
     background-color: black;
     border-radius: 6px;
+    border-style: solid;
+    border-color: black;
+    border-width: 1px;
 }
 
 status-tooltip::after {
     content: " ";
     position: absolute;
-    top: 100%; /* At the bottom of the tooltip */
-    left: 50%;
-    margin-left: -5px;
+    top: 50%;
+    right: 100%; /* To the left of the tooltip */
+    margin-top: -5px;
     border-width: 5px;
     border-style: solid;
-    border-color: black transparent transparent transparent;
+    border-color: transparent black transparent transparent;
   }
 
 publication img {
diff --git a/Website/styles/style_mangahover.css b/Website/styles/style_mangahover.css
index 2390c0d..b20e621 100644
--- a/Website/styles/style_mangahover.css
+++ b/Website/styles/style_mangahover.css
@@ -252,13 +252,16 @@ publication-name{
 }
 
 publication-status {
-    display: inline-block;
+    display:block;
     height: 10px;
     width: 10px;
     border-radius: 50%;
     margin: 5px;
-    position: relative;
-    vertical-align: middle;
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    z-index: 2;
+    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 10px, rgb(51, 51, 51) 0px 0px 10px 3px;
 }
 
 publication-status:hover > status-tooltip {
@@ -270,8 +273,8 @@ status-tooltip {
     position: absolute;
 
     /*Position*/
-    left: -50px ;
-    bottom: 150%;
+    left: 150%;
+    bottom: -75%;
     z-index: 3;
     
     /*Text Properties*/
@@ -285,17 +288,20 @@ status-tooltip {
     width:100px;
     background-color: black;
     border-radius: 6px;
+    border-style: solid;
+    border-color: black;
+    border-width: 1px;
 }
 
 status-tooltip::after {
     content: " ";
     position: absolute;
-    top: 100%; /* At the bottom of the tooltip */
-    left: 50%;
-    margin-left: -5px;
+    top: 50%;
+    right: 100%; /* To the left of the tooltip */
+    margin-top: -5px;
     border-width: 5px;
     border-style: solid;
-    border-color: black transparent transparent transparent;
+    border-color: transparent black transparent transparent;
   }