diff --git a/styles/less/ui/effects-display/sheet.less b/styles/less/ui/effects-display/sheet.less
index 8fe9fcfb..2f67b496 100644
--- a/styles/less/ui/effects-display/sheet.less
+++ b/styles/less/ui/effects-display/sheet.less
@@ -1,7 +1,7 @@
 .daggerheart.dh-style.effects-display {
     position: absolute;
     right: 0;
-    width: 68px;
+    width: 40px;
     max-height: 600px;
     overflow: hidden;
     border: 0;
@@ -20,13 +20,18 @@
         .effect-container {
             position: relative;
             pointer-events: all;
-            border: 2px solid light-dark(@dark-blue, @golden);
+            border: 1px solid light-dark(@dark-blue, @golden);
+            border-radius: 3px;
+
+            img {
+                border-radius: 3px;
+            }
 
             .effect-locked {
                 position: absolute;
                 bottom: 4px;
                 right: 4px;
-                font-size: 24px;
+                font-size: 16px;
                 color: @golden;
                 filter: drop-shadow(0 0 3px black);
             }
diff --git a/styles/less/utils/colors.less b/styles/less/utils/colors.less
index 6fcf6db2..d582f294 100755
--- a/styles/less/utils/colors.less
+++ b/styles/less/utils/colors.less
@@ -28,6 +28,8 @@
 @dark-golden-40: #2b1d0340;
 @dark-golden-80: #2b1d0380;
 
+@rustic-brown-80: #4c340780;
+
 @red: #e54e4e;
 @red-10: #e54e4e10;
 @red-40: #e54e4e40;
diff --git a/styles/less/ux/tooltip/bordered-tooltip.less b/styles/less/ux/tooltip/bordered-tooltip.less
index ef2c92ec..83bf60b9 100644
--- a/styles/less/ux/tooltip/bordered-tooltip.less
+++ b/styles/less/ux/tooltip/bordered-tooltip.less
@@ -1,28 +1,45 @@
 #tooltip.bordered-tooltip {
-    width: 320px;
-    border: 1px solid light-dark(@dark-blue, @golden);
+    border: 1px solid @golden;
+    background-image: url('../assets/parchments/dh-parchment-dark.png');
 
     .daggerheart.dh-style.tooltip {
-        color: @beige;
+        display: flex;
+        flex-direction: column;
+        text-align: start;
+        width: 100%;
+        gap: 5px;
+        padding: 0px;
+        border-radius: 3px;
 
         .tooltip-header {
             display: flex;
             flex-direction: column;
-            text-align: center;
+            text-align: start;
+            width: 100%;
+            padding: 5px;
+            gap: 0px;
 
-            .helper {
+            h2 {
+                display: flex;
+                justify-content: start;
+                font-size: var(--font-size-20);
+                color: @golden;
+                font-weight: 700;
+                margin: 0;
+                padding: 0;
+            }
+
+            .subtitle {
                 font-size: 12px;
-                font-style: italic;
             }
         }
 
-        .tooltip-footer {
-            display: flex;
-            justify-content: center;
+        .close-hint {
+            border-radius: 3px;
+            padding: 3px;
+            background: @rustic-brown-80;
+            color: @golden;
             font-size: 12px;
-            width: 100%;
-            font-style: italic;
-            font-weight: bold;
         }
     }
 }
diff --git a/templates/ui/tooltip/effect-display.hbs b/templates/ui/tooltip/effect-display.hbs
index 1213e5cb..5ca4fec2 100644
--- a/templates/ui/tooltip/effect-display.hbs
+++ b/templates/ui/tooltip/effect-display.hbs
@@ -1,16 +1,24 @@
 <div class="daggerheart dh-style tooltip">
     <div class="tooltip-header">
-        <h3>{{effect.name}}</h3>
-        <div class="helper">
-            {{#unless effect.isLockedCondition}}
-                {{localize "DAGGERHEART.UI.EffectsDisplay.removeThing" thing=(localize "DAGGERHEART.GENERAL.Effect.single")}}
-            {{/unless}}
+        <h2>{{effect.name}}</h2>
+        {{#if effect.appliedBy}}
+            <p class="subtitle">{{localize "DAGGERHEART.UI.EffectsDisplay.appliedBy" by=effect.appliedBy}}</p>
+        {{/if}}
+    </div>
+
+    {{#if effect.description}}
+        <div class="description">
+            {{{effect.description}}}
+        </div>
+    {{else if effect.parent.system.description}}
+        <div class="description">
+            {{{effect.parent.system.description}}}
         </div>
-    </div>
-    <div>
-        {{#if effect.description}}{{{effect.description}}}{{else}}{{{effect.parent.system.description}}}{{/if}}
-    </div>
-    {{#if effect.appliedBy}}
-        <footer class="tooltip-footer">{{localize "DAGGERHEART.UI.EffectsDisplay.appliedBy" by=effect.appliedBy}}</footer>
     {{/if}}
+
+    {{#unless effect.isLockedCondition}}
+        <p class="close-hint">
+            <i class="fa-solid fa-computer-mouse"></i> {{localize "DAGGERHEART.UI.EffectsDisplay.removeThing" thing=(localize "DAGGERHEART.GENERAL.Effect.single")}}
+        </p>
+    {{/unless}}
 </div>
\ No newline at end of file