diff --git a/src/components/shortcodes/Spoiler.astro b/src/components/shortcodes/Spoiler.astro
index 7a7dcff..319f3f6 100644
--- a/src/components/shortcodes/Spoiler.astro
+++ b/src/components/shortcodes/Spoiler.astro
@@ -1,11 +1,21 @@
 ---
 const { tip = '' } = Astro.props
 ---
-{/* TODO: make it work in paragraph wrapped elements */}
 <span class="spoiler" title={tip}>
     <slot/>
 </span>
 <style>
+    :global(.spoiler p) {
+        background-color: #252525;
+        color: #252525;
+        transition: color 0.5s;
+        width: fit-content;
+    }
+
+    :global(.spoiler:hover p) {
+        color: #ffffff;
+    }
+
     .spoiler {
         background-color: #252525;
         color: #252525;
diff --git a/src/content/pages/test.mdx b/src/content/pages/test.mdx
index fd9f7a8..85a55f9 100644
--- a/src/content/pages/test.mdx
+++ b/src/content/pages/test.mdx
@@ -14,4 +14,9 @@ testestestest
     ~~This is the content of the spoiler.~~
 </Spoiler>
 
+<Spoiler tip="Spoiler Title">
+    ~~This is the content of another spoiler.~~
+</Spoiler>
+
+
 <FediStatuses instanceDomain='portal.gb0.dev' userId='me' />
\ No newline at end of file