diff --git a/src/lib/Sidenote.svelte b/src/lib/Sidenote.svelte
index 9ed46e0..b1d6296 100644
--- a/src/lib/Sidenote.svelte
+++ b/src/lib/Sidenote.svelte
@@ -51,6 +51,10 @@
             margin-right: calc(0rem - var(--sidenote-width) - var(--gap)); // gives us 2rem of space between content and sidenote
             margin-bottom: 0.7rem;
         }
+
+        .dismiss {
+            display: none;
+        }
     }
 
     /* mobile display */
@@ -67,12 +71,15 @@
         .sidenote {
             box-sizing: border-box;
             position: fixed;
+            z-index: 1;
             left: 0;
             bottom: 0;
             width: 100vw;
             padding-top: 1rem;
             padding-bottom: 1rem;
-            padding-right: 2rem;
+            --pad: max(1rem, calc(50vw - var(--content-width) / 2));
+            padding-left: var(--pad);
+            padding-right: var(--pad);
             background-color: #fff;
             box-shadow: 0 -2px 4px -1px rgba(0, 0, 0, 0.06), 0 -2px 12px -2px rgba(0, 0, 0, 0.1);
             display: none;
@@ -81,19 +88,35 @@
         .sidenote-toggle:checked + .sidenote {
             display: block;
         }
+
+        .dismiss {
+            position: absolute;
+            right: 1.5rem;
+            top: -0.2rem;
+
+            font-size: 1.25rem;
+            color: #8c0606;
+            cursor: pointer;
+            
+            &:hover {
+                transform: scale(1.1);
+                font-weight: 800;
+            }
+        }
+
     }
 
-    /* slight tweaks for in between state */
-    @media (min-width: 52.5em) and (max-width: 70em) {
-        .sidenote {
-            padding-left: calc(50vw - 19rem);
-        }
-    }
-    @media (max-width: 52.5em) {
-        .sidenote {
-            padding-left: 2rem;
-        }
-    }
+    // /* slight tweaks for in between state */
+    // @media (min-width: 52.5em) and (max-width: 70em) {
+    //     .sidenote {
+    //         padding-left: calc(50vw - 19rem);
+    //     }
+    // }
+    // @media (max-width: 52.5em) {
+    //     .sidenote {
+    //         padding-left: 2rem;
+    //     }
+    // }
 </style>
 
 <script context="module">
@@ -121,5 +144,6 @@
 <label for={id} on:click={toggleState} class="counter"></label>
 <input {id} bind:this={toggle} type="checkbox" class="sidenote-toggle" />
 <span class="sidenote">
+    <label class="dismiss" for={id} on:click={toggleState}>&times;</label>
     <slot></slot>
 </span>
\ No newline at end of file