diff --git a/website/src/routes/index.tsx b/website/src/routes/index.tsx
index 06dfb32..2995d57 100644
--- a/website/src/routes/index.tsx
+++ b/website/src/routes/index.tsx
@@ -29,6 +29,20 @@ export default component$(() => {
       />
       <main class="container">
         <Hero />
+        <p class="!mt-12 rounded-md bg-amber-100 p-2 !text-sm">
+          Due to the resumability, the{" "}
+          <span class="rounded-lg border border-amber-200 bg-amber-200/65 p-1 font-mono text-xs font-semibold">{`<Toaster />`}</span>{" "}
+          component should be positioned at the beginning of where you want to
+          use it. This way, you won't encounter{" "}
+          <a
+            href="https://github.com/diecodev/qwik-sonner/issues/13"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="font-bold underline"
+          >
+            rendering issues.
+          </a>
+        </p>
         <div class="content">
           <Installation />
           <Usage />
diff --git a/website/src/routes/styles.css b/website/src/routes/styles.css
index a75a0cf..acdd236 100644
--- a/website/src/routes/styles.css
+++ b/website/src/routes/styles.css
@@ -101,7 +101,7 @@ code {
   display: flex;
   flex-direction: column;
   gap: 48px;
-  margin-top: 96px;
+  margin-top: 48px;
 }
 
 .buttons {
@@ -186,7 +186,7 @@ m .wrapper h2 {
   display: flex;
   flex-direction: column;
   gap: 48px;
-  margin-top: 96px;
+  margin-top: 48px;
 }
 
 .wrapper footer {