diff --git a/pages/system/led.jsx b/pages/led/led.jsx
similarity index 89%
rename from pages/system/led.jsx
rename to pages/led/led.jsx
index 4c89b40..e4db149 100644
--- a/pages/system/led.jsx
+++ b/pages/led/led.jsx
@@ -4,7 +4,6 @@ import { SWindow, s } from "../../stear/main";
 
 export default new SWindow({
     call: async (stear,{find, resolve, close, render, call, event, include},args)=>{
-        call(connect,{},false);
         return <div>
             led Main
         </div>;
diff --git a/pages/menu.jsx b/pages/menu.jsx
index 0f8e664..8c9584f 100644
--- a/pages/menu.jsx
+++ b/pages/menu.jsx
@@ -1,7 +1,9 @@
 import * as color from "../js/color.js";
 import { Stear, SWindow, _, s } from "../stear/main.js";
 import { fadein } from "../stear/utils.js";
+import led from "./led/led.jsx";
 import remote from "./remote/remote.jsx";
+import system from "./system/system.jsx";
 
 const pool = Stear.addLanguagePool("home");
 const connected = pool.add("conncted", "Connected to: {}");
@@ -19,17 +21,16 @@ export default new SWindow({
         let window = 0;
 
         let wins = [
-            include(remote)
+            include(system),
+            include(remote),
+            include(led),
         ];
-        let show = 0;
 
         return <div style={{ display: 'flex', flexDirection: "column", height: "100%", alignItems: "center" }}>
-            <div style={{ backgroundColor: color.mainBar, width: "100%", height: "5rem", display: "flex",alignItems: "center", boxShadow: "rgba(50, 50, 50, 0.2) 0px 8px 24px"}}>
-                <div style={{ display: "flex",  height: "100%", flexDirection: "row", alignItems: "center", gap: "0.5rem", paddingLeft: "0.5rem", width:"100%" }} find="menu">
+            <div style={{ backgroundColor: color.mainBar, width: "100%", height: "5rem", display: "flex",alignItems: "center", boxShadow: "rgba(50, 50, 50, 0.2) 0px 8px 24px"}} find="menu">
+                <div style={{ display: "flex",  height: "100%", flexDirection: "row", alignItems: "center", gap: "0.5rem", paddingLeft: "0.5rem", width:"100%" }}>
                     {() => {
-                        console.log("rerender");
                         return ["#0f0", "#00f", "#ff0"].map((d, i) => {
-
                             return <div style={
                                 { height: "2rem", 
                                 width: "2rem", 
@@ -46,12 +47,29 @@ export default new SWindow({
                     }}
                 </div>
                 <label style={{width:"100%",textAlign:"center",fontSize:"2rem"}}>JuPad</label>
-                <div style={{width:"100%",textAlign:"right",paddingRight:"0.5rem"}} >rigth</div>
+                <div style={{width:"100%",alignItems:"center",paddingRight:"0.5rem", display:"flex",flexDirection:"row-reverse", gap:"0.5rem"}}>
+                {() => {
+                        return ["#eee", "#00f", "linear-gradient(90deg,rgba(255, 0, 0, 1) 0%,rgba(255, 154, 0, 1) 10%,rgba(208, 222, 33, 1) 20%,rgba(79, 220, 74, 1) 30%,rgba(63, 218, 216, 1) 40%,rgba(47, 201, 226, 1) 50%,rgba(28, 127, 238, 1) 60%,rgba(95, 21, 242, 1) 70%,rgba(186, 12, 248, 1) 80%,rgba(251, 7, 217, 1) 90%,rgba(255, 0, 0, 1) 100%)"].map((d, i) => {
+                            return <div style={
+                                { height: "2rem", 
+                                width: "2rem", 
+                                borderRadius: "1rem", 
+                                background: d, 
+                                border: "4px solid " + (window == i ? color.modeInUse() : color.modeNotInUse()) }
+                            } event={{
+                                pointerdown: () => {
+                                    window = i;
+                                    find.main.rerender();
+                                }
+                            }}></div>;
+                        });
+                    }}
+                </div>
             </div>
             <div style={{ width: "100%", height: "100%", position: "relative"}}>
                     {()=>{
-                        wins[show].opts.render();
-                        return wins[show].render({
+                        wins[window].opts.render();
+                        return wins[window].render({
                             style: {
                                 height: "100%",
                                 width: "100%"
diff --git a/pages/led/system.jsx b/pages/system/system.jsx
similarity index 89%
rename from pages/led/system.jsx
rename to pages/system/system.jsx
index 9cb1958..54307b7 100644
--- a/pages/led/system.jsx
+++ b/pages/system/system.jsx
@@ -4,7 +4,6 @@ import { SWindow, s } from "../../stear/main";
 
 export default new SWindow({
     call: async (stear,{find, resolve, close, render, call, event, include},args)=>{
-        call(connect,{},false);
         return <div>
             system Main
         </div>;