diff --git a/src/index.css b/src/index.css
index 096dd62..ea26b59 100644
--- a/src/index.css
+++ b/src/index.css
@@ -13,46 +13,22 @@
 /*   CUSTOM CODE HIKE   */
 /************************/
 
-body {
-  --ch-scrollycoding-sticker-width: 600px;
-  --ch-scrollycoding-code-min-height: 62vh;
+:root {
+  --ch-scrollycoding-sticker-width: 650px;
+  --ch-scrollycoding-code-min-height: min-content;
 }
 
-.ch-scrollycoding {
-  gap: 0;
+.ch-expand-dialog {
+  max-width: none;
 }
 
 .ch-scrollycoding-step-content {
-  border-radius: 0;
-  padding: 24px;
-  border: 0;
-  border-left: 2px solid transparent;
-  box-shadow: inset 0 1px #e3e8ee;
-  margin: 0 0 0 -0.5rem;
-}
-
-.ch-scrollycoding-step-content[data-selected] {
-  @apply bg-gray-50;
-}
-
-.ch-code-multiline-mark {
-  background: #1a2652 !important;
-}
-
-.ch-code-multiline-mark-border {
-  background: none !important;
-}
-
-.ch-scrollycoding-sticker {
-  flex-flow: column-reverse;
-  gap: 0 !important;
-  @apply bg-blue-50;
-  border-radius: 4px;
+  padding: theme('spacing.6');
 }
 
-.ch-scrollycoding-preview {
-  @apply bg-gray-100 shadow-sm;
-  border-radius: 0;
+.ch-scrollycoding-step-content[data-selected='true'] {
+  border-color: theme('colors.secondary.300');
+  background-color: theme('colors.secondary.200/50%');
 }
 
 .ch-frame-buttons {
diff --git a/vite.config.ts b/vite.config.ts
index 09b1a6e..62082be 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -22,7 +22,14 @@ export default defineConfig(async () => {
         enforce: 'pre',
         ...mdx.default({
           remarkPlugins: [
-            [remarkCodeHike, { lineNumbers: true, showCopyButton: true }],
+            [
+              remarkCodeHike,
+              {
+                lineNumbers: true,
+                showCopyButton: true,
+                theme: 'material-palenight',
+              },
+            ],
           ],
         }),
       },