diff --git a/frontend/.storybook/preview.js b/frontend/.storybook/preview.js
index de50ecbf73..132a209181 100644
--- a/frontend/.storybook/preview.js
+++ b/frontend/.storybook/preview.js
@@ -1,5 +1,3 @@
-import "../resources/public/css/main.css";
-
 /** @type { import('@storybook/react').Preview } */
 const preview = {
   parameters: {
@@ -10,6 +8,19 @@ const preview = {
         date: /Date$/i,
       },
     },
+    backgrounds: {
+      default: "dark",
+      values: [
+        {
+          name: "dark",
+          value: "#18181a",
+        },
+        {
+          name: "light",
+          value: "#fff",
+        },
+      ],
+    },
   },
 };
 
diff --git a/frontend/shadow-cljs.edn b/frontend/shadow-cljs.edn
index 7a5b4c4ff1..ebd3062c5f 100644
--- a/frontend/shadow-cljs.edn
+++ b/frontend/shadow-cljs.edn
@@ -92,12 +92,8 @@
    {:base
     {:entries []}
 
-    :icons
-    {:exports {default app.main.ui.icons/default}
-     :depends-on #{:base}}
-
     :components
-    {:exports {:default app.main.ui.components/default}
+    {:exports {:default app.main.ui.ds/default}
      :depends-on #{:base}}}
 
    :compiler-options
diff --git a/frontend/src/app/main/ui/components/buttons/simple_button.scss b/frontend/src/app/main/ui/components/buttons/simple_button.scss
deleted file mode 100644
index e1d162fbc1..0000000000
--- a/frontend/src/app/main/ui/components/buttons/simple_button.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.button {
-  font-family: monospace;
-
-  display: flex;
-  align-items: center;
-  column-gap: 0.5rem;
-
-  svg {
-    width: 16px;
-    height: 16px;
-    stroke: #000;
-  }
-}
diff --git a/frontend/src/app/main/ui/ds.cljs b/frontend/src/app/main/ui/ds.cljs
new file mode 100644
index 0000000000..ede983b450
--- /dev/null
+++ b/frontend/src/app/main/ui/ds.cljs
@@ -0,0 +1,15 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) KALEIDOS INC
+
+(ns app.main.ui.ds
+  (:require
+   [app.main.ui.ds.buttons.simple-button :refer [simple-button]]
+   [app.main.ui.ds.storybook :as sb]))
+
+(def default
+  "A export used for storybook"
+  #js {:SimpleButton simple-button
+       :StoryWrapper sb/story-wrapper})
diff --git a/frontend/src/app/main/ui/components/buttons/simple_button.cljs b/frontend/src/app/main/ui/ds/buttons/simple_button.cljs
similarity index 82%
rename from frontend/src/app/main/ui/components/buttons/simple_button.cljs
rename to frontend/src/app/main/ui/ds/buttons/simple_button.cljs
index fb4bdd9952..095ed987ba 100644
--- a/frontend/src/app/main/ui/components/buttons/simple_button.cljs
+++ b/frontend/src/app/main/ui/ds/buttons/simple_button.cljs
@@ -1,4 +1,4 @@
-(ns app.main.ui.components.buttons.simple-button
+(ns app.main.ui.ds.buttons.simple-button
   (:require-macros [app.main.style :as stl])
   (:require
    [rumext.v2 :as mf]))
diff --git a/frontend/src/app/main/ui/components/buttons/simple_button.mdx b/frontend/src/app/main/ui/ds/buttons/simple_button.mdx
similarity index 80%
rename from frontend/src/app/main/ui/components/buttons/simple_button.mdx
rename to frontend/src/app/main/ui/ds/buttons/simple_button.mdx
index 6c93cc3a21..2c8636cb69 100644
--- a/frontend/src/app/main/ui/components/buttons/simple_button.mdx
+++ b/frontend/src/app/main/ui/ds/buttons/simple_button.mdx
@@ -10,7 +10,3 @@ This is an example of **markdown** docs within storybook, for the component `<Si
 Here's how we can render a simple button:
 
 <Canvas of={SimpleButtonStories.Default} />
-
-Simple buttons can also have **icons**:
-
-<Canvas of={SimpleButtonStories.WithIcon} />
\ No newline at end of file
diff --git a/frontend/src/app/main/ui/ds/buttons/simple_button.scss b/frontend/src/app/main/ui/ds/buttons/simple_button.scss
new file mode 100644
index 0000000000..a83a9c5d73
--- /dev/null
+++ b/frontend/src/app/main/ui/ds/buttons/simple_button.scss
@@ -0,0 +1,7 @@
+@use "../colors.scss" as *;
+
+.button {
+  appearance: none;
+  border: 0;
+  background: var(--color-accent-primary);
+}
diff --git a/frontend/src/app/main/ui/components/buttons/simple_button.stories.jsx b/frontend/src/app/main/ui/ds/buttons/simple_button.stories.jsx
similarity index 57%
rename from frontend/src/app/main/ui/components/buttons/simple_button.stories.jsx
rename to frontend/src/app/main/ui/ds/buttons/simple_button.stories.jsx
index d53eaf6380..d4bb348fd3 100644
--- a/frontend/src/app/main/ui/components/buttons/simple_button.stories.jsx
+++ b/frontend/src/app/main/ui/ds/buttons/simple_button.stories.jsx
@@ -1,7 +1,6 @@
 import * as React from "react";
 
 import Components from "@target/components";
-import Icons from "@target/icons";
 
 export default {
   title: "Buttons/Simple Button",
@@ -15,14 +14,3 @@ export const Default = {
     </Components.StoryWrapper>
   ),
 };
-
-export const WithIcon = {
-  render: () => (
-    <Components.StoryWrapper>
-      <Components.SimpleButton>
-        {Icons.AddRefactor}
-        Simple Button
-      </Components.SimpleButton>
-    </Components.StoryWrapper>
-  ),
-};
diff --git a/frontend/src/app/main/ui/components/buttons/simple_button.test.mjs b/frontend/src/app/main/ui/ds/buttons/simple_button.test.mjs
similarity index 100%
rename from frontend/src/app/main/ui/components/buttons/simple_button.test.mjs
rename to frontend/src/app/main/ui/ds/buttons/simple_button.test.mjs
diff --git a/frontend/src/app/main/ui/ds/colors.scss b/frontend/src/app/main/ui/ds/colors.scss
new file mode 100644
index 0000000000..1cb92881e0
--- /dev/null
+++ b/frontend/src/app/main/ui/ds/colors.scss
@@ -0,0 +1,23 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+// Accent colors
+$mint-150: #7efff5;
+$purple-700: #6911d4;
+
+// Background colors
+$white: #fff;
+$gray-950: #18181a;
+
+:global(.light) {
+  --color-accent-primary: #{$mint-150};
+  --color-background-primary: #{$white};
+}
+
+:global(.default) {
+  --color-accent-primary: #{$purple-700};
+  --color-background-primary: #{$gray-950};
+}
diff --git a/frontend/src/app/main/ui/components.cljs b/frontend/src/app/main/ui/ds/storybook.cljs
similarity index 60%
rename from frontend/src/app/main/ui/components.cljs
rename to frontend/src/app/main/ui/ds/storybook.cljs
index 6119114fc6..ad0f360d73 100644
--- a/frontend/src/app/main/ui/components.cljs
+++ b/frontend/src/app/main/ui/ds/storybook.cljs
@@ -1,20 +1,18 @@
+
 ;; This Source Code Form is subject to the terms of the Mozilla Public
 ;; License, v. 2.0. If a copy of the MPL was not distributed with this
 ;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
 ;;
 ;; Copyright (c) KALEIDOS INC
 
-(ns app.main.ui.components
+(ns app.main.ui.ds.storybook
+  (:require-macros [app.main.style :as stl])
   (:require
-   [app.main.ui.components.buttons.simple-button :as sb]
    [rumext.v2 :as mf]))
 
 (mf/defc story-wrapper
   {::mf/wrap-props false}
   [{:keys [children]}]
-  [:.default children])
-
-(def default
-  "A export used for storybook"
-  #js {:SimpleButton sb/simple-button
-       :StoryWrapper story-wrapper})
+  [:article {:class (stl/css :story-wrapper)}
+   [:section {:class "default"} children]
+   [:section {:class "light"} children]])
diff --git a/frontend/src/app/main/ui/ds/storybook.scss b/frontend/src/app/main/ui/ds/storybook.scss
new file mode 100644
index 0000000000..4f680715e4
--- /dev/null
+++ b/frontend/src/app/main/ui/ds/storybook.scss
@@ -0,0 +1,6 @@
+@use "./colors.scss";
+
+.story-wrapper {
+  display: grid;
+  row-gap: 1rem;
+}