diff --git a/src/timelines/toot-components/BoostIcon.css b/src/timelines/toot-components/BoostIcon.css
index 188011b..23a4702 100644
--- a/src/timelines/toot-components/BoostIcon.css
+++ b/src/timelines/toot-components/BoostIcon.css
@@ -1,11 +1,13 @@
-.icon__boost {
-  padding: 0;
-  display: inline-block;
+.BoostIcon {
+  display: inline-flex;
   border-radius: 2px;
+  background-color: green;
+  padding: 0.125em;
+  align-items: center;
 
-  > :global(svg) {
-    color: green;
-    font-size: 1rem;
+  > svg {
+    color: white;
+    font-size: 1em;
     vertical-align: middle;
   }
 }
\ No newline at end of file
diff --git a/src/timelines/toot-components/BoostIcon.tsx b/src/timelines/toot-components/BoostIcon.tsx
index 1087778..c41861e 100644
--- a/src/timelines/toot-components/BoostIcon.tsx
+++ b/src/timelines/toot-components/BoostIcon.tsx
@@ -13,7 +13,7 @@ import "./BoostIcon.css";
 const BoostIcon: Component<JSX.HTMLElementTags["i"]> = (props) => {
   const [managed, rest] = splitProps(props, ["class"]);
   return (
-    <i class={["icon__boost", managed.class].join(" ")} {...rest}>
+    <i class={["BoostIcon", managed.class].join(" ")} {...rest}>
       <Repeat />
     </i>
   );
diff --git a/src/timelines/toot.module.css b/src/timelines/toot.module.css
index 0985c4b..85d9b04 100644
--- a/src/timelines/toot.module.css
+++ b/src/timelines/toot.module.css
@@ -222,6 +222,7 @@
   grid-template-columns: auto 1fr auto;
   gap: 8px;
   margin-bottom: 8px;
+  align-items: center;
 }
 
 .tootAttachmentGrp {