diff --git a/crates/storybook/src/components.rs b/crates/storybook/src/components.rs
index e407bd43f82c586c93b665d335e15e434f5a754f..1aafefc1a6a0a89728f64b6c6299e8c68ef1cc20 100644
--- a/crates/storybook/src/components.rs
+++ b/crates/storybook/src/components.rs
@@ -4,22 +4,6 @@ use gpui2::{
 };
 use std::{marker::PhantomData, rc::Rc};
 
-mod avatar;
-mod icon_button;
-mod tab;
-mod text_button;
-mod tool_divider;
-
-pub use avatar::avatar;
-pub use avatar::Avatar;
-pub use icon_button::icon_button;
-pub use tab::tab;
-pub use tab::Tab;
-pub use text_button::text_button;
-pub use text_button::TextButton;
-pub use tool_divider::tool_divider;
-pub use tool_divider::ToolDivider;
-
 struct ButtonHandlers<V, D> {
     click: Option<Rc<dyn Fn(&mut V, &D, &mut EventContext<V>)>>,
 }
diff --git a/crates/storybook/src/modules.rs b/crates/storybook/src/modules.rs
deleted file mode 100644
index a27ea1cc12ae70cb5a56ed2abb37142188843298..0000000000000000000000000000000000000000
--- a/crates/storybook/src/modules.rs
+++ /dev/null
@@ -1,10 +0,0 @@
-mod chat_panel;
-mod status_bar;
-mod tab_bar;
-mod title_bar;
-
-pub(crate) use chat_panel::chat_panel;
-pub use status_bar::status_bar;
-pub use status_bar::StatusBar;
-pub(crate) use tab_bar::tab_bar;
-pub(crate) use title_bar::title_bar;
diff --git a/crates/storybook/src/storybook.rs b/crates/storybook/src/storybook.rs
index fc7f861e80f9b1685b1186a7db035218ac613dfd..df1db7b8c21d0b6e9083ec2c974b56e7bf99cbeb 100644
--- a/crates/storybook/src/storybook.rs
+++ b/crates/storybook/src/storybook.rs
@@ -12,9 +12,9 @@ use simplelog::SimpleLogger;
 mod collab_panel;
 mod components;
 mod element_ext;
-mod modules;
 mod prelude;
 mod theme;
+mod ui;
 mod workspace;
 
 gpui2::actions! {
diff --git a/crates/storybook/src/ui.rs b/crates/storybook/src/ui.rs
new file mode 100644
index 0000000000000000000000000000000000000000..fecb36412e16b5beebcc4f0204971d932a7a12a5
--- /dev/null
+++ b/crates/storybook/src/ui.rs
@@ -0,0 +1,21 @@
+mod component;
+mod element;
+mod module;
+
+pub use component::tab::tab;
+pub use component::tab::Tab;
+
+pub use module::chat_panel::chat_panel;
+pub use module::status_bar::status_bar;
+pub use module::status_bar::StatusBar;
+pub use module::tab_bar::tab_bar;
+pub use module::title_bar::title_bar;
+
+pub use element::avatar::avatar;
+pub use element::avatar::Avatar;
+pub use element::icon_button::icon_button;
+pub use element::icon_button::IconButton;
+pub use element::text_button::text_button;
+pub use element::text_button::TextButton;
+pub use element::tool_divider::tool_divider;
+pub use element::tool_divider::ToolDivider;
diff --git a/crates/storybook/src/ui/component.rs b/crates/storybook/src/ui/component.rs
new file mode 100644
index 0000000000000000000000000000000000000000..c87bc82d9b837d448b6fc0e0781f012c85260bec
--- /dev/null
+++ b/crates/storybook/src/ui/component.rs
@@ -0,0 +1 @@
+pub(crate) mod tab;
diff --git a/crates/storybook/src/components/tab.rs b/crates/storybook/src/ui/component/tab.rs
similarity index 100%
rename from crates/storybook/src/components/tab.rs
rename to crates/storybook/src/ui/component/tab.rs
diff --git a/crates/storybook/src/ui/element.rs b/crates/storybook/src/ui/element.rs
new file mode 100644
index 0000000000000000000000000000000000000000..382da0f73198015ef648eb79a680b777ef8c5e73
--- /dev/null
+++ b/crates/storybook/src/ui/element.rs
@@ -0,0 +1,4 @@
+pub(crate) mod avatar;
+pub(crate) mod icon_button;
+pub(crate) mod text_button;
+pub(crate) mod tool_divider;
diff --git a/crates/storybook/src/components/avatar.rs b/crates/storybook/src/ui/element/avatar.rs
similarity index 92%
rename from crates/storybook/src/components/avatar.rs
rename to crates/storybook/src/ui/element/avatar.rs
index 6e136977c86a0c37f8a5202e00ab98832c635d09..bfa4ed0175daf49b23824a7b52ab478663c44cc2 100644
--- a/crates/storybook/src/components/avatar.rs
+++ b/crates/storybook/src/ui/element/avatar.rs
@@ -13,7 +13,7 @@ pub struct Avatar {
     shape: Shape,
 }
 
-pub fn avatar<V: 'static>(src: impl Into<ArcCow<'static, str>>) -> Avatar {
+pub fn avatar(src: impl Into<ArcCow<'static, str>>) -> Avatar {
     Avatar {
         src: src.into(),
         shape: Shape::Circle,
diff --git a/crates/storybook/src/components/icon_button.rs b/crates/storybook/src/ui/element/icon_button.rs
similarity index 100%
rename from crates/storybook/src/components/icon_button.rs
rename to crates/storybook/src/ui/element/icon_button.rs
diff --git a/crates/storybook/src/components/text_button.rs b/crates/storybook/src/ui/element/text_button.rs
similarity index 100%
rename from crates/storybook/src/components/text_button.rs
rename to crates/storybook/src/ui/element/text_button.rs
diff --git a/crates/storybook/src/components/tool_divider.rs b/crates/storybook/src/ui/element/tool_divider.rs
similarity index 100%
rename from crates/storybook/src/components/tool_divider.rs
rename to crates/storybook/src/ui/element/tool_divider.rs
diff --git a/crates/storybook/src/ui/module.rs b/crates/storybook/src/ui/module.rs
new file mode 100644
index 0000000000000000000000000000000000000000..a84bd67165e823aa6557de969abe4e57383233ac
--- /dev/null
+++ b/crates/storybook/src/ui/module.rs
@@ -0,0 +1,4 @@
+pub(crate) mod chat_panel;
+pub(crate) mod status_bar;
+pub(crate) mod tab_bar;
+pub(crate) mod title_bar;
diff --git a/crates/storybook/src/modules/chat_panel.rs b/crates/storybook/src/ui/module/chat_panel.rs
similarity index 97%
rename from crates/storybook/src/modules/chat_panel.rs
rename to crates/storybook/src/ui/module/chat_panel.rs
index 73131e54342c452485e6d32ef2ca0709f215ffdf..de4428826b9074f643326fbc0e643194338f6be0 100644
--- a/crates/storybook/src/modules/chat_panel.rs
+++ b/crates/storybook/src/ui/module/chat_panel.rs
@@ -1,7 +1,7 @@
 use std::marker::PhantomData;
 
-use crate::components::icon_button;
 use crate::theme::theme;
+use crate::ui::icon_button;
 use gpui2::elements::div::ScrollState;
 use gpui2::style::StyleHelpers;
 use gpui2::{elements::div, IntoElement};
diff --git a/crates/storybook/src/modules/status_bar.rs b/crates/storybook/src/ui/module/status_bar.rs
similarity index 95%
rename from crates/storybook/src/modules/status_bar.rs
rename to crates/storybook/src/ui/module/status_bar.rs
index feb883a33afa2ecfb247d4ba14747ae34c7abb5c..f34cfa88efd44f63692acd9c295714ddb6ed9e73 100644
--- a/crates/storybook/src/modules/status_bar.rs
+++ b/crates/storybook/src/ui/module/status_bar.rs
@@ -1,7 +1,7 @@
 use std::marker::PhantomData;
 
-use crate::components::{icon_button, tool_divider};
 use crate::theme::{theme, Theme};
+use crate::ui::{icon_button, text_button, tool_divider};
 use gpui2::style::StyleHelpers;
 use gpui2::{elements::div, IntoElement};
 use gpui2::{Element, ParentElement, ViewContext};
@@ -120,8 +120,8 @@ impl<V: 'static> StatusBar<V> {
                     .flex()
                     .items_center()
                     .gap_1()
-                    .child(div().px_1().text_xs().child("116:25"))
-                    .child(div().px_1().text_xs().child("Rust")),
+                    .child(text_button("116:25"))
+                    .child(text_button("Rust")),
             )
             .child(tool_divider())
             .child(
diff --git a/crates/storybook/src/modules/tab_bar.rs b/crates/storybook/src/ui/module/tab_bar.rs
similarity index 98%
rename from crates/storybook/src/modules/tab_bar.rs
rename to crates/storybook/src/ui/module/tab_bar.rs
index c2536ad06c6254badf62436966f4b7f23907d098..9b96171f2f3591997aa31c408e50849382ce08b8 100644
--- a/crates/storybook/src/modules/tab_bar.rs
+++ b/crates/storybook/src/ui/module/tab_bar.rs
@@ -1,8 +1,8 @@
 use std::marker::PhantomData;
 
-use crate::components::{icon_button, tab};
 use crate::prelude::InteractionState;
 use crate::theme::theme;
+use crate::ui::{icon_button, tab};
 use gpui2::elements::div::ScrollState;
 use gpui2::style::StyleHelpers;
 use gpui2::{elements::div, IntoElement};
diff --git a/crates/storybook/src/modules/title_bar.rs b/crates/storybook/src/ui/module/title_bar.rs
similarity index 95%
rename from crates/storybook/src/modules/title_bar.rs
rename to crates/storybook/src/ui/module/title_bar.rs
index 59ec1227f4a46904346aa53d330e08cb8e7891d7..9aab5a2d5e7e7f0b0650e3fa5b023bc26a9968c8 100644
--- a/crates/storybook/src/modules/title_bar.rs
+++ b/crates/storybook/src/ui/module/title_bar.rs
@@ -1,8 +1,8 @@
 use std::marker::PhantomData;
 
-use crate::components::{avatar, icon_button, text_button, tool_divider, Avatar, TextButton};
 use crate::prelude::Shape;
 use crate::theme::theme;
+use crate::ui::{avatar, icon_button, text_button, tool_divider};
 use gpui2::style::StyleHelpers;
 use gpui2::{elements::div, IntoElement};
 use gpui2::{Element, ParentElement, ViewContext};
@@ -100,7 +100,7 @@ impl<V: 'static> TitleBar<V> {
                     )
                     .child(
                         div().px_2().flex().items_center().child(
-                            avatar::<Avatar>("https://avatars.githubusercontent.com/u/1714999?v=4")
+                            avatar("https://avatars.githubusercontent.com/u/1714999?v=4")
                                 .shape(Shape::RoundedRectangle),
                         ),
                     ),
diff --git a/crates/storybook/src/workspace.rs b/crates/storybook/src/workspace.rs
index 1bcbc79b3266084a17be087f9f24e3a196870313..5aae5068327c88974dc8475af7c3ba23e93bd865 100644
--- a/crates/storybook/src/workspace.rs
+++ b/crates/storybook/src/workspace.rs
@@ -1,11 +1,11 @@
 use crate::{
     collab_panel::collab_panel,
-    modules::{chat_panel, status_bar, tab_bar, title_bar},
     theme::theme,
+    ui::{chat_panel, status_bar, tab_bar, title_bar},
 };
 use gpui2::{
-    elements::{div, div::ScrollState, img, svg},
-    style::{StyleHelpers, Styleable},
+    elements::{div, div::ScrollState},
+    style::StyleHelpers,
     Element, IntoElement, ParentElement, ViewContext,
 };
 
@@ -33,7 +33,7 @@ impl WorkspaceElement {
             .justify_start()
             .items_start()
             .text_color(theme.lowest.base.default.foreground)
-            .fill(theme.middle.base.default.background)
+            .fill(theme.lowest.base.default.background)
             .child(title_bar())
             .child(
                 div()
@@ -58,396 +58,6 @@ impl WorkspaceElement {
                     )
                     .child(chat_panel(self.right_scroll_state.clone())),
             )
-            .child(statusbar())
             .child(status_bar())
     }
 }
-
-#[derive(Element)]
-struct TitleBar;
-
-pub fn titlebar<V: 'static>() -> impl Element<V> {
-    TitleBar
-}
-
-impl TitleBar {
-    fn render<V: 'static>(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
-        let theme = theme(cx);
-        div()
-            .flex()
-            .items_center()
-            .justify_between()
-            .w_full()
-            .h_8()
-            .fill(theme.lowest.base.default.background)
-            .child(self.left_group(cx))
-            .child(self.right_group(cx))
-    }
-
-    fn left_group<V: 'static>(&mut self, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
-        let theme = theme(cx);
-        div()
-            .flex()
-            .items_center()
-            .h_full()
-            .gap_4()
-            .px_2()
-            // === Traffic Lights === //
-            .child(
-                div()
-                    .flex()
-                    .items_center()
-                    .gap_2()
-                    .child(
-                        div()
-                            .w_3()
-                            .h_3()
-                            .rounded_full()
-                            .fill(theme.lowest.positive.default.foreground),
-                    )
-                    .child(
-                        div()
-                            .w_3()
-                            .h_3()
-                            .rounded_full()
-                            .fill(theme.lowest.warning.default.foreground),
-                    )
-                    .child(
-                        div()
-                            .w_3()
-                            .h_3()
-                            .rounded_full()
-                            .fill(theme.lowest.negative.default.foreground),
-                    ),
-            )
-            // === Project Info === //
-            .child(
-                div()
-                    .flex()
-                    .items_center()
-                    .gap_1()
-                    .child(
-                        div()
-                            .h_full()
-                            .flex()
-                            .items_center()
-                            .justify_center()
-                            .px_2()
-                            .rounded_md()
-                            .hover()
-                            .fill(theme.lowest.base.hovered.background)
-                            .active()
-                            .fill(theme.lowest.base.pressed.background)
-                            .child(div().text_sm().child("project")),
-                    )
-                    .child(
-                        div()
-                            .h_full()
-                            .flex()
-                            .items_center()
-                            .justify_center()
-                            .px_2()
-                            .rounded_md()
-                            .text_color(theme.lowest.variant.default.foreground)
-                            .hover()
-                            .fill(theme.lowest.base.hovered.background)
-                            .active()
-                            .fill(theme.lowest.base.pressed.background)
-                            .child(div().text_sm().child("branch")),
-                    ),
-            )
-    }
-
-    fn right_group<V: 'static>(&mut self, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
-        let theme = theme(cx);
-        div()
-            .flex()
-            .items_center()
-            .h_full()
-            .gap_3()
-            .px_2()
-            // === Actions === //
-            .child(
-                div().child(
-                    div().flex().items_center().gap_1().child(
-                        div().size_4().flex().items_center().justify_center().child(
-                            svg()
-                                .path("icons/exit.svg")
-                                .size_4()
-                                .fill(theme.lowest.base.default.foreground),
-                        ),
-                    ),
-                ),
-            )
-            .child(div().w_px().h_3().fill(theme.lowest.base.default.border))
-            // === Comms === //
-            .child(
-                div().child(
-                    div()
-                        .flex()
-                        .items_center()
-                        .gap_px()
-                        .child(
-                            div()
-                                .px_2()
-                                .py_1()
-                                .rounded_md()
-                                .h_full()
-                                .flex()
-                                .items_center()
-                                .justify_center()
-                                .hover()
-                                .fill(theme.lowest.base.hovered.background)
-                                .active()
-                                .fill(theme.lowest.base.pressed.background)
-                                .child(
-                                    svg()
-                                        .path("icons/microphone.svg")
-                                        .size_3p5()
-                                        .fill(theme.lowest.base.default.foreground),
-                                ),
-                        )
-                        .child(
-                            div()
-                                .px_2()
-                                .py_1()
-                                .rounded_md()
-                                .h_full()
-                                .flex()
-                                .items_center()
-                                .justify_center()
-                                .hover()
-                                .fill(theme.lowest.base.hovered.background)
-                                .active()
-                                .fill(theme.lowest.base.pressed.background)
-                                .child(
-                                    svg()
-                                        .path("icons/speaker-loud.svg")
-                                        .size_3p5()
-                                        .fill(theme.lowest.base.default.foreground),
-                                ),
-                        )
-                        .child(
-                            div()
-                                .px_2()
-                                .py_1()
-                                .rounded_md()
-                                .h_full()
-                                .flex()
-                                .items_center()
-                                .justify_center()
-                                .hover()
-                                .fill(theme.lowest.base.hovered.background)
-                                .active()
-                                .fill(theme.lowest.base.pressed.background)
-                                .child(
-                                    svg()
-                                        .path("icons/desktop.svg")
-                                        .size_3p5()
-                                        .fill(theme.lowest.base.default.foreground),
-                                ),
-                        ),
-                ),
-            )
-            .child(div().w_px().h_3().fill(theme.lowest.base.default.border))
-            // User Group
-            .child(
-                div().child(
-                    div()
-                        .px_1()
-                        .py_1()
-                        .flex()
-                        .items_center()
-                        .justify_center()
-                        .rounded_md()
-                        .gap_0p5()
-                        .hover()
-                        .fill(theme.lowest.base.hovered.background)
-                        .active()
-                        .fill(theme.lowest.base.pressed.background)
-                        .child(
-                            img()
-                                .uri("https://avatars.githubusercontent.com/u/1714999?v=4")
-                                .size_4()
-                                .rounded_md()
-                                .fill(theme.middle.on.default.foreground),
-                        )
-                        .child(
-                            svg()
-                                .path("icons/caret_down.svg")
-                                .w_2()
-                                .h_2()
-                                .fill(theme.lowest.variant.default.foreground),
-                        ),
-                ),
-            )
-    }
-}
-
-// ================================================================================ //
-
-#[derive(Element)]
-struct StatusBar;
-
-pub fn statusbar<V: 'static>() -> impl Element<V> {
-    StatusBar
-}
-
-impl StatusBar {
-    fn render<V: 'static>(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
-        let theme = theme(cx);
-        div()
-            .flex()
-            .items_center()
-            .justify_between()
-            .w_full()
-            .h_8()
-            .fill(theme.lowest.base.default.background)
-            .child(self.left_group(cx))
-            .child(self.right_group(cx))
-    }
-
-    fn left_group<V: 'static>(&mut self, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
-        let theme = theme(cx);
-        div()
-            .flex()
-            .items_center()
-            .h_full()
-            .gap_4()
-            .px_2()
-            // === Tools === //
-            .child(
-                div()
-                    .flex()
-                    .items_center()
-                    .gap_1()
-                    .child(
-                        div()
-                            .w_6()
-                            .h_full()
-                            .flex()
-                            .items_center()
-                            .justify_center()
-                            .child(
-                                svg()
-                                    .path("icons/project.svg")
-                                    .w_4()
-                                    .h_4()
-                                    .fill(theme.lowest.base.default.foreground),
-                            ),
-                    )
-                    .child(
-                        div()
-                            .w_6()
-                            .h_full()
-                            .flex()
-                            .items_center()
-                            .justify_center()
-                            .child(
-                                svg()
-                                    .path("icons/conversations.svg")
-                                    .w_4()
-                                    .h_4()
-                                    .fill(theme.lowest.base.default.foreground),
-                            ),
-                    )
-                    .child(
-                        div()
-                            .w_6()
-                            .h_full()
-                            .flex()
-                            .items_center()
-                            .justify_center()
-                            .child(
-                                svg()
-                                    .path("icons/file_icons/notebook.svg")
-                                    .w_4()
-                                    .h_4()
-                                    .fill(theme.lowest.accent.default.foreground),
-                            ),
-                    ),
-            )
-            // === Diagnostics === //
-            .child(
-                div()
-                    .flex()
-                    .items_center()
-                    .gap_2()
-                    .child(
-                        div()
-                            .h_full()
-                            .flex()
-                            .items_center()
-                            .justify_center()
-                            .gap_0p5()
-                            .px_1()
-                            .text_color(theme.lowest.variant.default.foreground)
-                            .hover()
-                            .fill(theme.lowest.base.hovered.background)
-                            .active()
-                            .fill(theme.lowest.base.pressed.background)
-                            .child(
-                                svg()
-                                    .path("icons/error.svg")
-                                    .w_4()
-                                    .h_4()
-                                    .fill(theme.lowest.negative.default.foreground),
-                            )
-                            .child(div().text_sm().child("2")),
-                    )
-                    .child(
-                        div()
-                            .text_sm()
-                            .text_color(theme.lowest.variant.default.foreground)
-                            .child("Something is wrong"),
-                    ),
-            )
-    }
-
-    fn right_group<V: 'static>(&mut self, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
-        let theme = theme(cx);
-        div()
-            .flex()
-            .items_center()
-            .h_full()
-            .gap_4()
-            .px_2()
-            // === Tools === //
-            .child(
-                div()
-                    .flex()
-                    .items_center()
-                    .gap_1()
-                    .child(
-                        div()
-                            .w_6()
-                            .h_full()
-                            .flex()
-                            .items_center()
-                            .justify_center()
-                            .child(
-                                svg()
-                                    .path("icons/check_circle.svg")
-                                    .w_4()
-                                    .h_4()
-                                    .fill(theme.lowest.base.default.foreground),
-                            ),
-                    )
-                    .child(
-                        div()
-                            .w_6()
-                            .h_full()
-                            .flex()
-                            .items_center()
-                            .justify_center()
-                            .child(
-                                svg()
-                                    .path("icons/copilot.svg")
-                                    .w_4()
-                                    .h_4()
-                                    .fill(theme.lowest.accent.default.foreground),
-                            ),
-                    ),
-            )
-    }
-}