diff --git a/Cargo.lock b/Cargo.lock
index 1beb7a54..2e97bd7b 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -411,9 +411,9 @@ dependencies = [
 name = "cosmic-applet-power"
 version = "0.1.0"
 dependencies = [
- "cosmic-panel-config",
  "futures-util",
  "gtk4",
+ "libcosmic-applet",
  "logind-zbus",
  "nix 0.24.1",
  "once_cell",
diff --git a/applets/cosmic-applet-power/Cargo.toml b/applets/cosmic-applet-power/Cargo.toml
index 3f22177d..78e434d4 100644
--- a/applets/cosmic-applet-power/Cargo.toml
+++ b/applets/cosmic-applet-power/Cargo.toml
@@ -7,10 +7,10 @@ license = "GPL-3.0-or-later"
 [dependencies]
 futures-util = "0.3.21"
 gtk4 = { git = "https://github.com/gtk-rs/gtk4-rs" }
+libcosmic-applet = { path = "../../libcosmic-applet" }
 logind-zbus = "3.0.1"
 nix = "0.24.1"
 once_cell = "1.9.0"
 relm4-macros = { git = "https://github.com/Relm4/Relm4.git", branch = "next" }
 tokio = { version = "1.15.0", features = ["full"] }
 zbus = "2.0.1"
-cosmic-panel-config = {git = "https://github.com/pop-os/cosmic-panel", features = ["gtk4"]}
diff --git a/applets/cosmic-applet-power/src/main.rs b/applets/cosmic-applet-power/src/main.rs
index fb8ea8ad..0f131f37 100644
--- a/applets/cosmic-applet-power/src/main.rs
+++ b/applets/cosmic-applet-power/src/main.rs
@@ -6,8 +6,7 @@ extern crate relm4_macros;
 pub mod session_manager;
 pub mod ui;
 
-use cosmic_panel_config::config::CosmicPanelConfig;
-use gtk4::{gio::ApplicationFlags, glib, prelude::*, Align, Button, Label, Orientation, Separator};
+use gtk4::{gio::ApplicationFlags, prelude::*, Align, Button, Label, Orientation, Separator};
 use once_cell::sync::Lazy;
 use std::process::Command;
 use tokio::runtime::Runtime;
@@ -24,81 +23,37 @@ fn main() {
 }
 
 fn build_ui(application: &gtk4::Application) {
-    let provider = gtk4::CssProvider::new();
-    provider.load_from_data(include_bytes!("style.css"));
-    gtk4::StyleContext::add_provider_for_display(
-        &gtk4::gdk::Display::default().expect("Could not connect to a display."),
-        &provider,
-        gtk4::STYLE_PROVIDER_PRIORITY_APPLICATION,
-    );
-
-    let window = gtk4::ApplicationWindow::builder()
-        .application(application)
-        .title("COSMIC Power Applet")
-        .decorated(false)
-        .resizable(false)
-        .width_request(1)
-        .height_request(1)
-        .css_classes(vec!["root_window".to_string()])
-        .build();
-
-    let config = CosmicPanelConfig::load_from_env().unwrap_or_default();
-    let popover = gtk4::builders::PopoverBuilder::new()
-        .autohide(true)
-        .has_arrow(false)
-        .build();
-
-    let button = gtk4::Button::new();
-    button.add_css_class("panel_icon");
-    button.connect_clicked(glib::clone!(@weak popover => move |_| {
-        popover.show();
-    }));
-
-    // TODO cleanup
-    // TODO adjust battery icon based on charge
-    let image = gtk4::Image::from_icon_name("system-shutdown-symbolic");
-    image.add_css_class("panel_icon");
-    image.set_pixel_size(config.get_applet_icon_size().try_into().unwrap());
     view! {
-        icon_box = gtk4::Box {
-            set_orientation: Orientation::Vertical,
-            set_spacing: 0,
-            add_css_class: "icon_box",
-        }
-    }
-    button.set_child(Some(&image));
-
-    let session_section = ui::session::build();
-    let system_section = ui::system::build();
-    view! {
-        main_box = gtk4::Box {
-            set_orientation: Orientation::Vertical,
-            set_spacing: 10,
-            set_margin_top: 20,
-            set_margin_bottom: 20,
-            set_margin_start: 24,
-            set_margin_end: 24,
-            append: settings_button = &Button {
-                #[wrap(Some)]
-                set_child = &Label {
-                    set_label: "Settings...",
-                    set_halign: Align::Start,
-                    set_hexpand: true
+        window = libcosmic_applet::Applet {
+            set_title: Some("COSMIC Power Applet"),
+            set_application: Some(application),
+            // TODO adjust battery icon based on charge
+            set_button_icon_name: "system-shutdown-symbolic",
+            #[wrap(Some)]
+            set_popover_child: main_box = &gtk4::Box {
+                set_orientation: Orientation::Vertical,
+                set_spacing: 10,
+                set_margin_top: 20,
+                set_margin_bottom: 20,
+                set_margin_start: 24,
+                set_margin_end: 24,
+                append: settings_button = &Button {
+                    #[wrap(Some)]
+                    set_child = &Label {
+                        set_label: "Settings...",
+                        set_halign: Align::Start,
+                        set_hexpand: true
+                    },
+                    connect_clicked => move |_| {
+                        let _ = Command::new("cosmic-settings").spawn();
+                    }
                 },
-                connect_clicked => move |_| {
-                    let _ = Command::new("cosmic-settings").spawn();
-                }
-            },
-            append = &Separator {},
-            append: &session_section,
-            append: second_separator = &Separator {},
-            append: &system_section
+                append = &Separator {},
+                append: &ui::session::build(),
+                append: second_separator = &Separator {},
+                append: &ui::system::build(),
+            }
         }
     }
-    popover.set_child(Some(&main_box));
-
-    icon_box.append(&button);
-    icon_box.append(&popover);
-    window.set_child(Some(&icon_box));
     window.show();
 }