diff --git a/src/lib/components/addons/AddOnListItem.svelte b/src/lib/components/addons/AddOnListItem.svelte
index a7c6953e8..ca8e5b9be 100644
--- a/src/lib/components/addons/AddOnListItem.svelte
+++ b/src/lib/components/addons/AddOnListItem.svelte
@@ -53,14 +53,22 @@
     color: inherit;
     text-decoration: none;
   }
-  .addon-link:hover .container {
-    background-color: var(--menuBg);
-  }
+
   .container {
     display: block;
     min-width: 12rem;
-    padding: 0.5rem;
+    padding: 0.5rem 0.5rem 0.75rem;
     text-align: left;
+    border-top: 1px solid var(--gray-2);
+    background-color: var(--white);
+  }
+
+  .addon-link:first-child .container {
+    border-top: none;
+  }
+
+  .addon-link:hover .container {
+    background-color: var(--blue-1);
   }
 
   .row {
@@ -79,7 +87,7 @@
     display: flex;
     align-items: flex-end;
     gap: 1rem;
-    color: var(--darkgray);
+    color: var(--gray-4);
   }
 
   .description {
@@ -87,19 +95,21 @@
     opacity: 0.6;
     font-size: 0.875em;
     line-height: 1.4;
-    color: var(--darkgray);
+    color: var(--gray-4);
     overflow: hidden;
     -webkit-line-clamp: 4;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     & > * {
       margin-top: 0;
+      font-size: 0.875rem;
     }
   }
 
   .addon-name {
     margin: 0;
     font-weight: 600;
+    font-size: var(--font-l);
   }
 
   .center-self {
diff --git a/src/lib/components/addons/stories/AddOnListItem.stories.svelte b/src/lib/components/addons/stories/AddOnListItem.stories.svelte
index bbdf2a838..b2530b97c 100644
--- a/src/lib/components/addons/stories/AddOnListItem.stories.svelte
+++ b/src/lib/components/addons/stories/AddOnListItem.stories.svelte
@@ -24,9 +24,7 @@
 </script>
 
 <Template let:args>
-  <div class="container">
-    <AddOnListItem {...args} />
-  </div>
+  <AddOnListItem {...args} />
 </Template>
 
 <Story name="Default" {args} />
@@ -44,6 +42,19 @@
     },
   }}
 />
+<Story
+  name="HTML Description"
+  args={{
+    addon: {
+      ...args,
+      name: "SideKick",
+      parameters: {
+        description:
+          "<h1>Heading</h2><p><strong>Lorem ipsum dolor sit amet,</strong> <em>consetetur sadipscing elitr,</em> <a>sed diam nonumy eirmod</a> tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>",
+      },
+    },
+  }}
+/>
 <Story
   name="Premium"
   args={{
@@ -53,10 +64,3 @@
     },
   }}
 />
-
-<style>
-  .container {
-    max-width: 32rem;
-    border: 1px solid #eee;
-  }
-</style>