diff --git a/index.html b/index.html
index 103ca85..7208a02 100644
--- a/index.html
+++ b/index.html
@@ -13,7 +13,7 @@
     />
     <meta name="robots" content="index, follow" />
   </head>
-  <body>
+  <body style="margin: 0; background: #ff00ff;">
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
diff --git a/src/App.vue b/src/App.vue
index 808e2ea..5e4c355 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -80,29 +80,31 @@ import HelloWorld from "./components/HelloWorld.vue";
 
 <style>
 :root {
-  --link: hsl(215, 49%, 49%);
+  --link: hsl(320, 100%, 60%);
   --gap: 8px;
   --gap-half: calc(var(--gap) / 2);
   --gap-quarter: calc(var(--gap) / 4);
   --gap-double: calc(var(--gap) * 2);
   --content-width: 800px;
 
-  --fg: #2c3e50;
-  --bg: #ecf0f1;
-  --bg-emphasis: #f5f7fa;
+  --fg: #ff00ff;
+  --bg: #0ff0a0;
+  --bg-emphasis: #ffe600;
 
-  --border: #ccc;
+  --border: #ff6600;
   --border-radius: 4px;
 }
 
 #app {
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  font-family: "Comic Sans MS", "Chalkboard SE", "Comic Neue", cursive, system-ui, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   color: var(--fg);
   margin: 0 auto;
   max-width: var(--content-width);
+  background: linear-gradient(135deg, #0ff0a0 0%, #ff00ff 25%, #00ffff 50%, #ffe600 75%, #ff6600 100%);
+  min-height: 100vh;
+  padding: 20px;
 }
 
 #app .instructions {
@@ -179,7 +181,7 @@ import HelloWorld from "./components/HelloWorld.vue";
   bottom: 0;
   /* offset the 90% */
   left: 5%;
-  background-color: hsl(215, 83%, 67%);
+  background-color: #ff0000;
   transform-origin: bottom right;
 }
 
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index 3211701..f4b7ef7 100644
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -144,21 +144,27 @@ main {
 }
 
 .draggable {
-  background: #fff;
+  background: linear-gradient(90deg, #ff0066, #ffcc00, #00ffcc);
   padding: 10px;
   margin: 10px;
-  border: 1px solid #ccc;
+  border: 3px solid #ff00ff;
   cursor: move;
+  color: #0000ff;
+  font-weight: bold;
+  text-shadow: 1px 1px 0 #fff;
+  border-radius: 12px;
+  box-shadow: 4px 4px 0 #ff6600;
 }
 
 .ghost {
   opacity: 0.5;
-  background: #fff;
-  border: 1px dashed #ccc;
+  background: #00ff00;
+  border: 3px dashed #ff0000;
 }
 
 .drag {
-  background: #f5f5f5;
+  background: #ff00ff;
+  color: #00ff00;
 }
 
 .wrapper {
diff --git a/src/examples/WithStore.vue b/src/examples/WithStore.vue
index 648aa5b..6ddc971 100644
--- a/src/examples/WithStore.vue
+++ b/src/examples/WithStore.vue
@@ -131,21 +131,27 @@ main {
 }
 
 .draggable {
-    background: #fff;
+    background: linear-gradient(90deg, #00ffcc, #ff0066, #ffe600);
     padding: 10px;
     margin: 10px;
-    border: 1px solid #ccc;
+    border: 3px solid #00ff00;
     cursor: move;
+    color: #0000ff;
+    font-weight: bold;
+    text-shadow: 1px 1px 0 #fff;
+    border-radius: 12px;
+    box-shadow: 4px 4px 0 #ff00ff;
 }
 
 .ghost {
     opacity: 0.5;
-    background: #fff;
-    border: 1px dashed #ccc;
+    background: #ff6600;
+    border: 3px dashed #00ffff;
 }
 
 .drag {
-    background: #f5f5f5;
+    background: #00ff00;
+    color: #ff0000;
 }
 
 .wrapper {
