diff --git a/src/Base.astro b/src/Base.astro
index fea13d3..0bdfe84 100644
--- a/src/Base.astro
+++ b/src/Base.astro
@@ -7,7 +7,7 @@ interface Props {
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="generator" content={Astro.generator} />
     <title>{Astro.props.title}</title>
     <style is:inline>
diff --git a/src/components/astral/Powers.astro b/src/components/astral/Powers.astro
index ec985f3..ed97afe 100644
--- a/src/components/astral/Powers.astro
+++ b/src/components/astral/Powers.astro
@@ -166,37 +166,6 @@ const getLayer = (children: (typeof powerTree)[], layer: number = 1): number =>
   disabled={immutable}
 >
   <template shadowrootmode="open">
-    <button commandfor="info" command="toggle-popover">
-      <slot is:inline name="img" />
-    </button>
-
-    <section id="info" popover>
-      <h2><slot is:inline name="title" /></h2>
-      <button
-        id="mode"
-        title={[
-          "Unselect: Remove the power from the power list",
-          "Select: Add the power to the power list",
-          "Locked: This power cannot be added to the power list",
-          "No parent: The parent power for this power has not been selected",
-          "No points: You do not have enough points to unlock this power",
-          "Dependency: Another power relies on this power being selected, or it must be selected",
-        ].join("\n")}
-      >
-        <span data-val="unselect">Unselect</span>
-        <span data-val="locked">Locked</span>
-        <span data-val="select">Select</span>
-        <span data-val="no-parent">No Parent</span>
-        <span data-val="no-points">No Points</span>
-        <span data-val="dependency">Dependency</span>
-      </button>
-      <slot is:inline name="body" />
-    </section>
-
-    <section>
-      <slot is:inline />
-    </section>
-
     <style is:inline>
       /* colour mode */
       :host {
@@ -233,7 +202,7 @@ const getLayer = (children: (typeof powerTree)[], layer: number = 1): number =>
 
       /* dialog popup styles */
       #info {
-        width: min(60ch, calc(100vw - 10ch));
+        width: 40ch;
         /* position-anchor: --tree-node; */
         position-area: bottom span-right;
         position-try:
@@ -252,17 +221,26 @@ const getLayer = (children: (typeof powerTree)[], layer: number = 1): number =>
         &:popover-open {
           display: grid;
         }
-        grid-template: auto auto auto / 1fr auto;
+        grid-template: auto auto auto / auto 1fr auto;
+        gap: 5px;
+        align-items: center;
 
         & h2 {
           margin: 0;
+          height: min-content;
+        }
+
+        & p,
+        div:has(slot[name="meta"]) {
+          grid-column: span 3;
         }
 
-        & p {
-          grid-column: span 2;
+        p {
+          margin: 0;
         }
 
         button {
+          height: 100%;
           display: grid;
           grid-template: "cell" 1fr / 1fr;
           justify-content: center;
@@ -401,27 +379,67 @@ const getLayer = (children: (typeof powerTree)[], layer: number = 1): number =>
         }
       }
     </style>
+
+    <button commandfor="info" command="toggle-popover">
+      <slot is:inline name="img" />
+    </button>
+
+    <section id="info" popover>
+      <slot is:inline name="icon" /><h2><slot is:inline name="title" /></h2>
+      <button
+        id="mode"
+        title={[
+          "Unselect: Remove the power from the power list",
+          "Select: Add the power to the power list",
+          "Locked: This power cannot be added to the power list",
+          "No parent: The parent power for this power has not been selected",
+          "No points: You do not have enough points to unlock this power",
+          "Dependency: Another power relies on this power being selected, or it must be selected",
+        ].join("\n")}
+      >
+        <span data-val="unselect">Unselect</span>
+        <span data-val="locked">Locked</span>
+        <span data-val="select">Select</span>
+        <span data-val="no-parent">No Parent</span>
+        <span data-val="no-points">No Points</span>
+        <span data-val="dependency">Dependency</span>
+      </button>
+      <p>
+        <slot is:inline name="body" />
+      </p>
+      {
+        powerData[power].meta.length > 0 ? (
+          <div>
+            <slot is:inline name="meta" />
+          </div>
+        ) : null
+      }
+    </section>
+
+    <section>
+      <slot is:inline />
+    </section>
   </template>
 
   <img slot="img" {...powerData[power].image} />
-  <span slot="title">
-    <img {...powerData[power].image} /> {powerData[power].name}</span
-  >
-  <div slot="body">
-    <p>{powerData[power].description}</p>
+  <img slot="icon" {...powerData[power].image} />
+  <span slot="title"> {powerData[power].name}</span>
+
+  <div slot="body">{powerData[power].description}</div>
+  <dl slot="meta">
     {
       powerData[power].meta.length > 0 ? (
-        <dl>
-          {powerData[power].meta.map(({ name, value }) => (
-            <>
-              <dt>{name}</dt>
-              <dd>{value}</dd>
-            </>
-          ))}
-        </dl>
-      ) : null
+        powerData[power].meta.map(({ name, value }) => (
+          <>
+            <dt>{name}</dt>
+            <dd>{value}</dd>
+          </>
+        ))
+      ) : (
+        <div class="null" />
+      )
     }
-  </div>
+  </dl>
 
   {
     children.map((child, i) => (
@@ -440,7 +458,11 @@ const getLayer = (children: (typeof powerTree)[], layer: number = 1): number =>
     display: grid;
     grid-template-columns: auto 1fr;
     gap: 0.2ch 1ch;
-    margin-block-end: 0;
+    margin-block: 0;
+
+    &:has(.null) {
+      display: none;
+    }
 
     dt::after {
       content: ": ";
@@ -459,8 +481,8 @@ const getLayer = (children: (typeof powerTree)[], layer: number = 1): number =>
     display: block;
   }
 
-  [slot="title"] img {
-    height: 2ch;
+  img[slot="icon"] {
+    height: 50px;
     border-radius: 100%;
     display: inline-block;
   }