diff --git a/wgui/uidev-vk/assets/gui/bar.xml b/wgui/uidev-vk/assets/gui/bar.xml
index eaab8fd8..669bbd26 100644
--- a/wgui/uidev-vk/assets/gui/bar.xml
+++ b/wgui/uidev-vk/assets/gui/bar.xml
@@ -1,38 +1,22 @@
 <layout>
-  <theme>
-    <var key="bg_color" value="#24273a" />
-    <var key="bg_color_active" value="#44475a" />
-    <var key="device_color" value="#666666" />
-    <var key="text_color" value="#dddddd" />
-    <var key="slider_bg_color" value="#666666" />
-    <var key="slider_fg_color" value="#ffffff" />
-    <var key="slider_text_color" value="#000000" />
-  </theme>
+  <include src="wlx_theme.xml" />
+
+  <template name="TopButton">
+    <rectangle color="~bg_color" padding="8" round="50%">
+      <sprite color="~device_color" width="48" height="48" src="${src}" />
+    </rectangle>
+  </template>
 
   <elements>
     <div box_sizing="content_box" flex_direction="column" justify_content="center" align_content="center">
       <rectangle padding="10" gap="8" round="100%" color="~bg_color" justify_content="center" align_content="center">
-        <rectangle color="~bg_color" padding="8" round="50%">
-          <sprite color="~device_color" width="48" height="48" src="bar/lock_open.svg" />
-        </rectangle>
-        <rectangle color="~bg_color" padding="8" round="50%">
-          <sprite color="~device_color" width="48" height="48" src="bar/mouse.svg" />
-        </rectangle>
-        <rectangle color="~bg_color_active" padding="8" round="50%">
-          <sprite color="~device_color" width="48" height="48" src="bar/fade.svg" />
-        </rectangle>
-        <rectangle color="~bg_color" padding="8" round="50%">
-          <sprite color="~device_color" width="48" height="48" src="bar/move-all.svg" />
-        </rectangle>
-        <rectangle color="~bg_color" padding="8" round="50%">
-          <sprite color="~device_color" width="48" height="48" src="bar/resize.svg" />
-        </rectangle>
-        <rectangle color="~bg_color" padding="8" round="50%">
-          <sprite color="~device_color" width="48" height="48" src="bar/inout.svg" />
-        </rectangle>
-        <rectangle color="~bg_color" padding="8" round="50%">
-          <sprite color="~device_color" width="48" height="48" src="bar/delete.svg" />
-        </rectangle>
+        <TopButton src="bar/lock_open.svg" />
+        <TopButton src="bar/mouse.svg" />
+        <TopButton src="bar/fade.svg" />
+        <TopButton src="bar/move-all.svg" />
+        <TopButton src="bar/resize.svg" />
+        <TopButton src="bar/inout.svg" />
+        <TopButton src="bar/delete.svg" />
       </rectangle>
       <rectangle padding="8" gap="8" round="100%" color="~bg_color_active" justify_content="center" align_content="center">
         <label size="18" text="Opacity" color="~text_color" />
@@ -47,4 +31,4 @@
       </rectangle>
     </div>
   </elements>
-</layout>
+</layout>
\ No newline at end of file
diff --git a/wgui/uidev-vk/assets/gui/watch.xml b/wgui/uidev-vk/assets/gui/watch.xml
index 7641ca6f..8a6b1481 100644
--- a/wgui/uidev-vk/assets/gui/watch.xml
+++ b/wgui/uidev-vk/assets/gui/watch.xml
@@ -1,11 +1,11 @@
 <layout>
+  <include src="wlx_theme.xml" />
+
   <theme>
     <var key="border" value="2" />
-    <var key="bg_color" value="#24273a" />
     <var key="kbd_color" value="#a6da95" />
-    <var key="set_color" value="#cad3f5" />
     <var key="set_color" value="#dddddd" />
-    <var key="device_color" value="#666666" />
+
     <var key="clock0_color" value="#cad3f5" />
     <var key="clock0_size" value="46" />
     <var key="clock0_date_size" value="14" />
@@ -16,35 +16,39 @@
     <var key="clock_alt_tz_size" value="14" />
   </theme>
 
+  <template name="Device">
+    <sprite color="~device_color" width="48" height="48" src="${src}" />
+  </template>
+
   <elements>
     <div width="400" height="200">
       <rectangle width="100%" height="100%" padding="4" box_sizing="content_box" flex_wrap="wrap" gap="16" color="~bg_color">
         <div width="100%" flex_direction="row">
-          <sprite color="~device_color" width="48" height="48" src="watch/hmd.svg" />
-          <sprite color="~device_color" width="48" height="48" src="watch/controller.svg" />
-          <sprite color="~device_color" width="48" height="48" src="watch/controller.svg" />
-          <sprite color="~device_color" width="48" height="48" src="watch/track3.svg" />
-          <sprite color="~device_color" width="48" height="48" src="watch/track3.svg" />
-          <sprite color="~device_color" width="48" height="48" src="watch/track3.svg" />
+          <Device src="watch/hmd.svg" />
+          <Device src="watch/controller.svg" />
+          <Device src="watch/controller.svg" />
+          <Device src="watch/track3.svg" />
+          <Device src="watch/track3.svg" />
+          <Device src="watch/track3.svg" />
         </div>
         <div flex_direction="row">
           <div id="clock_main" flex_direction="column" padding="4">
             <label text="23:59" id="clock0" color="~clock0_color" size="~clock0_size" weight="bold" />
             <label text="22/2/2022" id="clock0_date" color="~clock0_color" size="~clock0_date_size" weight="bold" />
-            <div width="100%" padding="2"/>
+            <div width="100%" padding="2" />
             <label text="Friday" id="clock0_dow" color="~clock0_color" size="~clock0_dow_size" weight="bold" />
           </div>
           <div width="10" height="100%" />
           <div id="clock_alt" flex_direction="column" padding="4">
             <label text="Paris" id="clock1_tz" color="~clock_alt1_color" size="~clock_alt_tz_size" weight="bold" />
-            <div width="100%" padding="2"/>
+            <div width="100%" padding="2" />
             <label text="23:59" id="clock1_time" color="~clock_alt1_color" size="~clock_alt_size" weight="bold" />
             <label text="Chicago" id="clock2_tz" color="~clock_alt2_color" size="~clock_alt_tz_size" weight="bold" />
-            <div width="100%" padding="2"/>
+            <div width="100%" padding="2" />
             <label text="23:59" id="clock2_time" color="~clock_alt2_color" size="~clock_alt_size" weight="bold" />
           </div>
         </div>
       </rectangle>
     </div>
   </elements>
-</layout>
+</layout>
\ No newline at end of file
diff --git a/wgui/uidev-vk/assets/gui/wlx_theme.xml b/wgui/uidev-vk/assets/gui/wlx_theme.xml
new file mode 100644
index 00000000..eb62a315
--- /dev/null
+++ b/wgui/uidev-vk/assets/gui/wlx_theme.xml
@@ -0,0 +1,11 @@
+<layout>
+  <theme>
+    <var key="bg_color" value="#24273a" />
+    <var key="bg_color_active" value="#44475a" />
+    <var key="device_color" value="#666666" />
+    <var key="text_color" value="#dddddd" />
+    <var key="slider_bg_color" value="#666666" />
+    <var key="slider_fg_color" value="#ffffff" />
+    <var key="slider_text_color" value="#000000" />
+  </theme>
+</layout>
\ No newline at end of file