diff --git a/package-lock.json b/package-lock.json
index 611c64196..fa6159c3c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,11 +1,12 @@
 {
   "name": "win11React",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "version": "0.1.0",
+      "name": "win11React",
+      "version": "0.1.1",
       "dependencies": {
         "@fortawesome/fontawesome-svg-core": "^1.2.35",
         "@fortawesome/free-regular-svg-icons": "^5.15.3",
diff --git a/public/dycalendar.css b/public/dycalendar.css
index c6c8ae258..81ed54681 100644
--- a/public/dycalendar.css
+++ b/public/dycalendar.css
@@ -104,8 +104,8 @@
 }
 
 .dycalendar-today-date {
-  background-color: #246ff2;
-  color: #fff;
+  background: var(--clrPrm);
+  color: var(--dark-txt);
   border-radius: 24px;
 }
 
diff --git a/public/font/spotify.ttf b/public/font/spotify.ttf
new file mode 100644
index 000000000..fecd4ad61
Binary files /dev/null and b/public/font/spotify.ttf differ
diff --git a/public/font/spotify.woff2 b/public/font/spotify.woff2
new file mode 100644
index 000000000..57bd11f22
Binary files /dev/null and b/public/font/spotify.woff2 differ
diff --git a/public/img/icon/home.png b/public/img/icon/home.png
index eccb318ea..40fd08f1a 100644
Binary files a/public/img/icon/home.png and b/public/img/icon/home.png differ
diff --git a/public/img/icon/search.png b/public/img/icon/search.png
index 616142812..d6ce9b07f 100644
Binary files a/public/img/icon/search.png and b/public/img/icon/search.png differ
diff --git a/public/img/icon/store.png b/public/img/icon/store.png
index 1b89c0d54..9fa9d4730 100644
Binary files a/public/img/icon/store.png and b/public/img/icon/store.png differ
diff --git a/public/img/icon/ui/display.png b/public/img/icon/ui/display.png
index 29d6fd8de..b33d5af52 100644
Binary files a/public/img/icon/ui/display.png and b/public/img/icon/ui/display.png differ
diff --git a/public/img/icon/ui/marker1.png b/public/img/icon/ui/marker1.png
deleted file mode 100644
index 345fb9db0..000000000
Binary files a/public/img/icon/ui/marker1.png and /dev/null differ
diff --git a/public/img/icon/ui/new.png b/public/img/icon/ui/new.png
index 13a97790b..ea4e80c4e 100644
Binary files a/public/img/icon/ui/new.png and b/public/img/icon/ui/new.png differ
diff --git a/public/img/icon/ui/personalize.png b/public/img/icon/ui/personalize.png
index 482da5726..28a46b6fc 100644
Binary files a/public/img/icon/ui/personalize.png and b/public/img/icon/ui/personalize.png differ
diff --git a/public/img/icon/ui/sort.png b/public/img/icon/ui/sort.png
index b589af0dd..6ce318a4b 100644
Binary files a/public/img/icon/ui/sort.png and b/public/img/icon/ui/sort.png differ
diff --git a/public/img/icon/ui/sun.png b/public/img/icon/ui/sun.png
new file mode 100644
index 000000000..26e813f3e
Binary files /dev/null and b/public/img/icon/ui/sun.png differ
diff --git a/public/img/icon/ui/view.png b/public/img/icon/ui/view.png
index 1a3590d3d..794ed563b 100644
Binary files a/public/img/icon/ui/view.png and b/public/img/icon/ui/view.png differ
diff --git a/public/img/icon/widget.png b/public/img/icon/widget.png
index f84e5ee80..5777f5ad6 100644
Binary files a/public/img/icon/widget.png and b/public/img/icon/widget.png differ
diff --git a/public/index.html b/public/index.html
index bed5bc866..ce3a7eae8 100644
--- a/public/index.html
+++ b/public/index.html
@@ -28,7 +28,7 @@
   <script type="text/javascript" src="dycalendar.js"></script>
   <script type="text/javascript" src="console.js"></script>
   <div id="warningmsg">
-    This project is &nbsp; <rediv>not in anyway affiliated with Microsoft</rediv> and
+    This project is &nbsp;<rediv>not in anyway affiliated with Microsoft</rediv>&nbsp;and
     should not be confused with Microsoft’s Operating System or Products.
   </div>
   <button id="probtn" onclick="removeWarning()">Proceed anyway</button>
diff --git a/src/App.js b/src/App.js
index 12c368065..7752b593d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -21,6 +21,7 @@ import {
   CalnWid
 } from './components/start';
 
+import {loadSettings} from './actions';
 import * as Applications from './containers/applications';
 import * as Drafts from './containers/applications/draft.js';
 
@@ -85,6 +86,7 @@ function App() {
 
   useEffect(()=>{
     if(!window.onstart){
+      loadSettings()
       window.onstart = setTimeout(()=>{
         console.log("prematurely loading ( ﾉ ﾟｰﾟ)ﾉ");
         dispatch({type: "WALLBOOTED"})
diff --git a/src/actions/index.js b/src/actions/index.js
index c32ddcddf..605b4d90e 100644
--- a/src/actions/index.js
+++ b/src/actions/index.js
@@ -152,3 +152,43 @@ export const installApp = (data)=>{
   store.dispatch({type: "DESKADD", payload: app})
   store.dispatch({type: "WNSTORE", payload: "mnmz"})
 }
+
+export const getTreeValue = (obj, path)=>{
+  if(path==null) return false
+
+  var tdir = {...obj}
+  path = path.split(".")
+  for (var i = 0; i < path.length; i++) {
+    tdir = tdir[path[i]];
+  }
+
+  return tdir
+}
+
+export const changeTheme = ()=>{
+  var thm = store.getState().setting.person.theme,
+  thm = thm=="light"?"dark":"light"
+  var icon = thm=="light"?"sun":"moon"
+
+  document.body.dataset.theme = thm
+  store.dispatch({type: "STNGTHEME", payload: thm})
+  store.dispatch({type: "PANETHEM", payload: icon})
+  store.dispatch({type: "WALLSET", payload: thm=="light"?0:1})
+}
+
+export const loadSettings = ()=>{
+  var sett = localStorage.getItem("setting") || "{}"
+  sett = JSON.parse(sett)
+
+  if(sett.person==null){
+    sett = JSON.parse(JSON.stringify(store.getState().setting))
+    if (window.matchMedia &&
+      window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        sett.person.theme = "dark"
+    }
+  }
+
+  if(sett.person.theme!="light") changeTheme()
+
+  store.dispatch({type: "SETTLOAD", payload: sett})
+}
diff --git a/src/components/menu/index.js b/src/components/menu/index.js
index 724776ae5..3bcc4ede6 100644
--- a/src/components/menu/index.js
+++ b/src/components/menu/index.js
@@ -1,96 +1,101 @@
-import React, {useState, useEffect} from 'react';
-import {useSelector, useDispatch} from 'react-redux';
-import {Icon} from '../../utils/general';
-import './menu.scss';
+import React, { useState, useEffect } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { Icon } from "../../utils/general";
+import "./menu.scss";
 
-import * as Actions from '../../actions';
+import * as Actions from "../../actions";
 
-export const ActMenu = ()=>{
-  const menu = useSelector(state=>state.menus);
-  const {abpos, isLeft} = useSelector(state=>{
+export const ActMenu = () => {
+  const menu = useSelector((state) => state.menus);
+  const { abpos, isLeft } = useSelector((state) => {
     var acount = state.menus.menus[state.menus.opts].length;
     var tmpos = {
-      'top': state.menus.top,
-      'left': state.menus.left
-    }, tmpleft = false;
+        top: state.menus.top,
+        left: state.menus.left,
+      },
+      tmpleft = false;
 
     var wnwidth = window.innerWidth,
-        wnheight = window.innerHeight;
+      wnheight = window.innerHeight;
 
     var ewidth = 312,
-        eheight = acount*28;
+      eheight = acount * 28;
 
-    tmpleft = (wnwidth - tmpos.left) > 504;
-    if(wnwidth - tmpos.left < ewidth){
-      tmpos.right = wnwidth - tmpos.left;
-      tmpos.left = null;
+    tmpleft = wnwidth - tmpos.left > 504;
+    if (wnwidth - tmpos.left < ewidth) {
+      tmpos.left = wnwidth - ewidth;
     }
 
-    if(wnheight - tmpos.top < eheight){
+    if (wnheight - tmpos.top < eheight) {
       tmpos.bottom = wnheight - tmpos.top;
       tmpos.top = null;
     }
 
     return {
       abpos: tmpos,
-      isLeft: tmpleft
+      isLeft: tmpleft,
     };
-  })
+  });
 
   const dispatch = useDispatch();
 
-  const clickDispatch = (event)=>{
+  const clickDispatch = (event) => {
     event.stopPropagation();
     var action = {
       type: event.target.dataset.action,
-      payload: event.target.dataset.payload
+      payload: event.target.dataset.payload,
     };
 
-    if(action.type){
-      if(action.type!=action.type.toUpperCase()){
-        Actions[action.type](action.payload,menu);
-      }else{
+    if (action.type) {
+      if (action.type != action.type.toUpperCase()) {
+        Actions[action.type](action.payload, menu);
+      } else {
         dispatch(action);
       }
-      dispatch({type: "MENUHIDE"});
+      dispatch({ type: "MENUHIDE" });
     }
-  }
+  };
 
-  const menuobj = (data)=>{
+  const menuobj = (data) => {
     var mnode = [];
-    data.map(opt=>{
-      if(opt.type=="hr"){
+    data.map((opt) => {
+      if (opt.type == "hr") {
         mnode.push(<div className="menuhr"></div>);
-      }else{
-        mnode.push(<div className="menuopt" data-dsb={opt.dsb}
-          onClick={clickDispatch} data-action={opt.action}
-          data-payload={opt.payload}>
-          {opt.name}
-          {opt.icon?<Icon src={opt.icon} width={14}/>:null}
-          {opt.opts?<Icon fafa="faChevronRight" width={10} color="#999"/>:null}
-          {opt.dot?<Icon className="dotIcon" fafa="faCircle" width={4}
-            height={4} color="#333"/>:null}
-          {opt.check?<Icon className="checkIcon" fafa="faCheck" width={8}
-            height={8} color="#333"/>:null}
-          {opt.opts?(
-            <div className="minimenu">
-              {menuobj(opt.opts)}
+      } else {
+        mnode.push(
+          <div className="menuopt" data-dsb={opt.dsb} onClick={clickDispatch} data-action={opt.action} data-payload={opt.payload}>
+            <div className="spcont">
+              {opt.icon && opt.type=="svg" ? <Icon icon={opt.icon} width={16} /> : null}
+              {opt.icon && opt.type=="fa" ? <Icon fafa={opt.icon} width={16} /> : null}
+              {opt.icon && opt.type==null ? <Icon src={opt.icon} width={16} /> : null}
             </div>
-          ):null}
-        </div>)
+            <div className="nopt">{opt.name}</div>
+            {opt.opts ? <Icon className="micon rightIcon" fafa="faChevronRight" width={10} color="#999" /> : null}
+            {opt.dot ? <Icon className="micon dotIcon" fafa="faCircle" width={4} height={4} /> : null}
+            {opt.check ? <Icon className="micon checkIcon" fafa="faCheck" width={8} height={8} /> : null}
+            {opt.opts ? <div className="minimenu">{menuobj(opt.opts)}</div> : null}
+          </div>
+        );
       }
     });
 
     return mnode;
-  }
+  };
 
   return (
-    <div className="actmenu" id="actmenu" style={{
-      ...abpos,
-      '--prefix':'MENU'}} data-hide={menu.hide} data-left={isLeft}>
+    <div
+      className="actmenu"
+      id="actmenu"
+      style={{
+        ...abpos,
+        "--prefix": "MENU",
+      }}
+      data-hide={menu.hide}
+      data-left={isLeft}
+    >
       {menuobj(menu.menus[menu.opts])}
     </div>
   );
-}
+};
 
 export default ActMenu;
diff --git a/src/components/menu/menu.scss b/src/components/menu/menu.scss
index 8d0431de7..f41e617f6 100644
--- a/src/components/menu/menu.scss
+++ b/src/components/menu/menu.scss
@@ -1,18 +1,21 @@
 .actmenu {
+  --bg1: rgba(249, 249, 249, 0.9);
+  --bg2: rgba(0, 0, 0, 0.08);
+
   position: absolute;
   width: 310px;
-  background: rgba(255, 255, 255, 0.9);
-  backdrop-filter: blur(20px);
+  background: var(--bg1);
+  backdrop-filter: contrast(2) saturate(2) blur(20px);
   z-index: 10000;
-  opacity:1;
-  pointer-events:all;
-  border: solid 1px #ccc9;
+  opacity: 1;
+  pointer-events: all;
+  // border: solid 1px var(--comp-txt);
   border-radius: 8px;
   transition: opacity 0.1s ease;
 
   &[data-hide="true"] {
-    opacity:0;
-    pointer-events:none;
+    opacity: 0;
+    pointer-events: none;
   }
 
   &[data-left="false"] .minimenu {
@@ -21,17 +24,23 @@
   }
 }
 
+body[data-theme="dark"] .actmenu {
+  --bg1: rgba(34, 36, 47, 0.8);
+  --bg2: rgba(255, 255, 255, 0.08);
+}
+
 .minimenu {
   position: absolute;
   display: none;
   top: 0;
   left: 99%;
   min-width: 200px;
-  background: rgba(255, 255, 255, 0.9);
+  background: var(--bg1);
   z-index: 9999;
   padding: 4px 0;
-  border: solid 1px #ccc9;
+  // border: solid 1px var(--comp-txt);
   animation: fadein 600ms ease-in-out;
+  // backdrop-filter: contrast(1) saturate(2) blur(20px);
   border-radius: 8px;
 }
 
@@ -40,7 +49,7 @@
   box-sizing: border-box;
   position: relative;
   width: calc(100% - 8px);
-  padding: 4px 32px;
+  padding: 4px 6px;
   font-size: 12px;
   cursor: default;
   margin: 6px;
@@ -48,42 +57,34 @@
   display: flex;
   align-items: center;
   font-weight: 500;
-  color: #333;
+  color: var(--txt-col);
   transition: all 0.1s ease;
 
   &:hover {
-    background: rgba(0, 0, 0, 0.08);
+    background: var(--bg2);
 
     .minimenu {
       display: block;
     }
   }
 
-  &[data-dsb="true"] {
-    color: #aaa;
-    font-weight: 400;
+  .spcont{
+    width: 16px;
+    margin-right: 12px;
   }
 
-  .uicon {
+  .micon{
     position: absolute;
-    top: 8px;
-    left: 8px;
   }
 
-  .prtclk {
-    left: unset;
+  .rightIcon {
     right: 8px;
   }
 
   .dotIcon,
   .checkIcon {
-    top: 8px;
     left: 8px;
-    right: unset;
-  }
-
-  .checkIcon {
-    top: 6px;
+    color: var(--med-txt);
   }
 }
 
diff --git a/src/components/start/index.js b/src/components/start/index.js
index eab857eab..0928c87b5 100644
--- a/src/components/start/index.js
+++ b/src/components/start/index.js
@@ -4,339 +4,13 @@ import {Icon} from '../../utils/general';
 import './startmenu.scss';
 import './sidepane.scss';
 import './searchpane.scss';
-
 import axios from 'axios';
 
-export const StartMenu = () => {
-  const {align} = useSelector(state=>state.taskbar);
-  const start = useSelector(state => {
-    var arr = state.startmenu,
-      ln = (6 - arr.pnApps.length % 6) % 6;
-
-    for (var i = 0; i < ln; i++) {
-      arr.pnApps.push({
-        empty: true
-      });
-    }
-
-    for (i = 0; i < arr.rcApps.length; i++) {
-      if (arr.rcApps[i].lastUsed < 0) {
-        arr.rcApps[i].lastUsed = "Recently Added"
-      } else if (arr.rcApps[i].lastUsed < 10) {
-        arr.rcApps[i].lastUsed = "Just Now"
-      } else if (arr.rcApps[i].lastUsed < 60) {
-        arr.rcApps[i].lastUsed += "m ago"
-      } else if (arr.rcApps[i].lastUsed < 360) {
-        arr.rcApps[i].lastUsed = Math.floor(arr.rcApps[i].lastUsed / 60) + "h ago"
-      }
-    }
-
-    var allApps = [],
-      tmpApps = Object.keys(state.apps).filter(x=> x!="hz").map(key => {
-        return state.apps[key]
-      })
-
-    tmpApps.sort((a, b) => (a.name > b.name) ? 1 : ((b.name > a.name) ? -1 : 0));
-
-    for (i = 0; i < 27; i++) {
-      allApps[i] = [];
-    }
-
-    for (i = 0; i < tmpApps.length; i++) {
-      var t1 = tmpApps[i].name.trim().toUpperCase().charCodeAt(0);
-      if (t1 > 64 && t1 < 91) {
-        allApps[t1 - 64].push(tmpApps[i]);
-      } else {
-        allApps[0].push(tmpApps[i]);
-      }
-    }
-
-    arr.contApps = allApps
-    arr.allApps = tmpApps
-    return arr
-  });
+import {getTreeValue} from '../../actions';
+import * as Actions from '../../actions';
 
-  const [query, setQuery] = useState("");
-  const [match, setMatch] = useState({});
-  const [atab, setTab] = useState("All");
-  // const [pwctrl, setPowCtrl] = useState
-
-  const dispatch = useDispatch();
-  const tabSw = (e)=>{
-    setTab(e.target.innerText.trim());
-  }
-
-  const clickDispatch = (event) => {
-    var action = {
-      type: event.target.dataset.action,
-      payload: event.target.dataset.payload
-    };
-
-    if (action.type) {
-      dispatch(action);
-    }
-
-    if (action.type && (action.payload == "full" || action.type == "EDGELINK")) {
-      dispatch({
-        type: "STARTHID"
-      });
-    }
-
-    if (action.type == "STARTALPHA") {
-      var target = document.getElementById("char" + action.payload);
-      if (target) {
-        target.parentNode.scrollTop = target.offsetTop;
-      } else {
-        var target = document.getElementById("charA");
-        target.parentNode.scrollTop = 0;
-      }
-    }
-  }
-
-  useEffect(() => {
-    if (query.length) {
-      for (var i = 0; i < start.allApps.length; i++) {
-        if (start.allApps[i].name.toLowerCase().includes(query.toLowerCase())) {
-          setMatch(start.allApps[i]);
-          break;
-        }
-      }
-    }
-  }, [query])
-
-  return (
-    <div className="startMenu dpShad" data-hide={start.hide}
-      style={{'--prefix':'START'}} data-align={align}>
-      {start.menu?(
-        <><div className="stmenu" data-allapps={start.showAll}>
-          <div className="menuUp">
-            <div className="pinnedApps">
-              <div className="stAcbar">
-                <div className="gpname">Pinned</div>
-                <div className="gpbtn prtclk" onClick={clickDispatch} data-action='STARTALL'>
-                  <div>All apps</div>
-                  <Icon fafa="faChevronRight" width={8}/>
-                </div>
-              </div>
-              <div className="pnApps">
-                {start.pnApps.map((app,i)=>{
-                  return app.empty?(
-                    <div key={i} className="pnApp pnEmpty"></div>
-                  ):(
-                    <div key={i} className="pnApp" value={app.action!=null}
-                      onClick={clickDispatch} data-action={app.action}
-                      data-payload={app.payload || "full"}>
-                      <Icon className="pnIcon" src={app.icon} width={24} click={app.action}
-                        payload={app.payload || "full"}/>
-                      <div className="appName">{app.name}</div>
-                    </div>
-                  );
-                })}
-              </div>
-            </div>
-            <div className="recApps">
-              <div className="stAcbar">
-                <div className="gpname">Recommended</div>
-                <div className="gpbtn none">
-                  <div>More</div>
-                  <Icon fafa="faChevronRight" width={8}/>
-                </div>
-              </div>
-              <div className="reApps">
-                {start.rcApps.slice(0,6).map((app,i)=>{
-                  return app.name?(
-                    <div key={i} className="rnApp">
-                      <Icon className="pnIcon" src={app.icon} width={22}/>
-                      <div className="acInfo">
-                        <div className="appName">{app.name}</div>
-                        <div className="timeUsed">{app.lastUsed}</div>
-                      </div>
-                    </div>
-                  ):null
-                })}
-              </div>
-            </div>
-          </div>
-        </div>
-        <div className="allCont" data-allapps={start.showAll}>
-          <div className="appCont">
-            <div className="stAcbar">
-              <div className="gpname">All apps</div>
-              <div className="gpbtn prtclk" onClick={clickDispatch} data-action='STARTALL'>
-                <Icon className="chevLeft" fafa="faChevronLeft" width={8}/>
-                <div>Back</div>
-              </div>
-            </div>
-            <div className="allApps" data-alpha={start.alpha}>
-              {start.contApps.map((ldx,i)=>{
-                if(ldx.length==0) return null;
-
-                var tpApps = [];
-                tpApps.push(
-                  <div
-                    className="allApp prtclk"
-                    data-action="STARTALPHA"
-                    onClick={clickDispatch}
-                    id={`char${i==0?"#":String.fromCharCode(i+64)}`}>
-                    <div className="ltName">{i==0?"#":String.fromCharCode(i+64)}</div>
-                  </div>
-                );
-
-                ldx.forEach((app,j) => {
-                  tpApps.push(
-                    <div key={j} className="allApp prtclk" onClick={clickDispatch}
-                      data-action={app.action} data-payload={app.payload || "full"}>
-                      <Icon className="pnIcon" src={app.icon} width={20}/>
-                      <div className="appName">{app.name}</div>
-                    </div>
-                  );
-                });
-
-                return tpApps;
-              })}
-            </div>
-            <div className="alphaBox" data-alpha={start.alpha}>
-              <div className="alphaCont">
-                <div className="dullApp allApp">
-                  <div className="ltName">&</div>
-                </div>
-                {start.contApps.map((ldx,i)=>{
-                  return (
-                    <div
-                      className={ldx.length==0?'dullApp allApp':'allApp prtclk'}
-                      data-action="STARTALPHA"
-                      onClick={ldx.length==0?null:clickDispatch}
-                      data-payload={i==0?"#":String.fromCharCode(i+64)}>
-                      <div className="ltName">{i==0?"#":String.fromCharCode(i+64)}</div>
-                    </div>
-                  );
-                })}
-              </div>
-            </div>
-          </div>
-        </div>
-        <div className="menuBar">
-          <div className="profile handcr">
-            <Icon src="blueProf" ui rounded width={26}
-              click="EXTERNAL" payload="https://blueedge.me"/>
-            <div className="usName">Blue Edge</div>
-          </div>
-          <div className="relative">
-            <div className="powerCont" data-vis={start.pwctrl}>
-              <div className="flex prtclk" onClick={clickDispatch}
-                data-action="WALLSHUTDN">
-                <Icon msi="PowerButton" width={12}/>
-                <span>Shut down</span>
-              </div>
-              <div className="flex prtclk" onClick={clickDispatch}
-                data-action="WALLRESTART">
-                <Icon msi="Refresh" width={12} flip/>
-                <span>Restart</span>
-              </div>
-              <div className="flex prtclk" onClick={clickDispatch}
-                data-action="WALLALOCK">
-                <Icon msi="Lock" width={12}/>
-                <span>Lock</span>
-              </div>
-            </div>
-            <Icon msi="PowerButton" width={14} click="STARTPWC"/>
-          </div>
-        </div>
-      </>):(
-        <div className="searchMenu">
-          <div className="searchBar">
-            <Icon src="search" ui width={16}/>
-            <input type="text" onChange={(event)=>{
-              setQuery(event.target.value.trim());
-            }} defaultValue={query} placeholder="Search something ..."/>
-          </div>
-          <div className="flex py-4 px-1 text-xs">
-            <div className="opts w-1/2 text-gray-700 flex justify-between">
-              <div value={atab=="All"} onClick={tabSw}>All</div>
-              <div value={atab=="Apps"} onClick={tabSw}>Apps</div>
-              <div value={atab=="Documents"} onClick={tabSw}>Documents</div>
-              <div value={atab=="Web"} onClick={tabSw}>Web</div>
-              <div value={atab=="More"} onClick={tabSw}>More</div>
-            </div>
-          </div>
-          <div className="shResult w-full flex justify-between">
-            <div className="leftSide flex-col px-1" data-width={query.length!=0}>
-              <div className="text-xss font-semibold mb-4">
-                {query.length?"Best match":"Top apps"}
-              </div>
-              {query.length?(
-                <div className="textResult h-16">
-                  <div className="smatch flex my-2 bg-gray-100 p-3 rounded">
-                    <Icon src={match.icon} width={24}/>
-                    <div className="matchInfo flex-col px-2">
-                      <div className="font-semibold text-xs">{match.name}</div>
-                      <div className="text-xss">App</div>
-                    </div>
-                  </div>
-                  <div className="smatch flex my-2 bg-gray-100 p-3 rounded handcr prtclk"
-                    onClick={clickDispatch} data-action="EDGELINK"
-                    data-payload={query}>
-                    <Icon src="search" ui width={20}/>
-                    <div className="matchInfo flex-col px-2">
-                      <div className="font-semibold text-xs">Search online</div>
-                      <div className="text-xss">Web</div>
-                    </div>
-                  </div>
-                </div>
-              ):(
-                <>
-                <div className="topApps flex w-full justify-between">
-                  {start.rcApps.slice(2,7).map((app,i)=>{
-                    return(
-                      <div className="topApp pt-4 py-2 bg-gray-100 ltShad">
-                        <Icon onClick={clickDispatch} click={app.action}
-                          payload={app.payload || "full"}
-                          src={app.icon} width={24} />
-                        <div className="text-xs mt-2">{app.name}</div>
-                      </div>
-                    );
-                  })}
-                </div>
-                <div className="text-xss font-semibold mt-8">
-                  Quick Searches
-                </div>
-                <div className="quickSearches pl-4 mt-2">
-                  {start.qksrch.map(srch=>{
-                    return (
-                      <div className="qksrch flex items-center py-3 handcr prtclk"
-                        onClick={clickDispatch} data-action="EDGELINK"
-                        data-payload={srch[2]}>
-                        <Icon fafa={srch[0]} reg={srch[1]}/>
-                        <div className="ml-4 text-xs">{srch[2]}</div>
-                      </div>
-                    )
-                  })}
-                </div>
-              </>
-              )}
-            </div>
-            {query.length?(
-              <div className="w-2/3 rightSide rounded">
-                <Icon className="mt-6" src={match.icon} width={64}/>
-                <div className="">{match.name}</div>
-                <div className="text-xss mt-2">App</div>
-                <div className="hline mt-8"></div>
-                <div className="openlink w-4/5 flex prtclk handcr pt-3"
-                  onClick={clickDispatch} data-action={match.action}
-                  data-payload={match.payload?match.payload:"full"}>
-                  <Icon src="link" ui width={16}/>
-                  <div className="text-xss ml-3">Open</div>
-                </div>
-              </div>
-            ):(
-              null
-            )}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
+export * from './start';
+export * from './widget';
 
 export const DesktopApp = () => {
   const deskApps = useSelector(state => {
@@ -386,8 +60,10 @@ export const DesktopApp = () => {
 }
 
 export const SidePane = () => {
-  const paneApps = useSelector(state => state.sidepane);
+  const sidepane = useSelector(state => state.sidepane);
+  const setting = useSelector(state => state.setting);
   const tasks = useSelector(state=>state.taskbar);
+  const [pnstates,setPnstate] = useState([]);
   const dispatch = useDispatch();
 
   const clickDispatch = (event) => {
@@ -396,7 +72,11 @@ export const SidePane = () => {
       payload: event.target.dataset.payload
     };
 
-    if(action.type) dispatch(action);
+    if(action.type){
+      if(action.type!=action.type.toUpperCase()){
+        Actions[action.type](action.payload);
+      }else dispatch(action);
+    }
   }
 
   let vSlider = document.querySelector(".vSlider");
@@ -415,47 +95,61 @@ export const SidePane = () => {
 
 
   function silderBackground(elem, e) {
-    elem.style.setProperty("--track-color", `linear-gradient(90deg, #005fba ${e}%, #888888 ${e}%)`)
+    elem.style.setProperty("--track-color", `linear-gradient(90deg, #005fba ${e-3}%, #888888 ${e}%)`)
   }
 
   const setBrightness = (e)=>{
-    document.getElementById('brightoverlay').style.opacity = (100 - e.target.value)/100
-
-    silderBackground(bSlider, e.target.value);
+    var brgt = e.target.value
+    document.getElementById('brightoverlay').style.opacity = (100 - brgt)/100
+    dispatch({type: "STNGSETV", payload: {
+      path: "system.display.brightness",
+      value: brgt
+    }})
+    silderBackground(bSlider, brgt);
   }
 
 
   useEffect(()=>{
-    paneApps.quicks.map(item=>{
+    sidepane.quicks.map((item,i)=>{
       if(item.src=="nightlight"){
-        if(item.state) document.body.dataset.sepia = true;
+        if(pnstates[i]) document.body.dataset.sepia = true;
         else document.body.dataset.sepia = false;
       }
     })
   })
 
+  useEffect(()=>{
+    // console.log("ok")
+    var tmp = []
+    for (var i = 0; i < sidepane.quicks.length; i++) {
+      var val = getTreeValue(setting, sidepane.quicks[i].state)
+      if(sidepane.quicks[i].name=="Theme") val = val=="dark"
+      tmp.push(val)
+    }
+
+    setPnstate(tmp)
+  }, [setting, sidepane])
+
   return (
-    <div className="sidePane dpShad" data-hide={paneApps.hide}
+    <div className="sidePane dpShad" data-hide={sidepane.hide}
       style={{'--prefix':'PANE'}}>
       <div className="quickSettings">
         <div className="quickCont">
-          {paneApps.quicks.map((qk, idx)=>{
+          {sidepane.quicks.map((qk, idx)=>{
             return (
               <div className="actionCenter">
-                <div
-                className="qkbtn handcr prtclk"
-                onClick={clickDispatch}
-                data-action="PANEQBTN"
-                data-payload={idx}
-                data-state={qk.state}
-                >
-                <Icon
-                  className="quickIcon"
-                  ui={qk.ui}
-                  src={qk.src}
-                  width={14}
-                  invert={qk.state?true:null}
-                />
+                <div className="qkbtn handcr prtclk"
+                  onClick={clickDispatch}
+                  data-action={qk.action}
+                  data-payload={qk.payload || qk.state}
+                  data-state={pnstates[idx]}>
+                  <Icon
+                    className="quickIcon"
+                    ui={qk.ui}
+                    src={qk.src}
+                    width={14}
+                    invert={pnstates[idx]?true:null}
+                  />
                 </div>
                 <div className="qktext">{qk.name}</div>
               </div>
@@ -477,184 +171,6 @@ export const SidePane = () => {
   );
 }
 
-export const WidPane = () => {
-  const dispatch = useDispatch();
-  const widget = useSelector(state => state.widpane);
-
-  const getRandom = (x = 0) => {
-    return `hsl(${Math.floor(Math.random()*360)}deg 36% 84%)`;
-  }
-
-  useEffect(async () => {
-    // console.log(process.env.REACT_APP_DEVELOPEMENT);
-    if (process.env.REACT_APP_DEVELOPEMENT != "development") {
-      if (!widget.updated && !widget.hide) {
-        var tmpWdgt = await fetchApi(widget);
-        console.log("Fetching Api's");
-        if (tmpWdgt.updated) {
-          dispatch({
-            type: "WIDGREST",
-            payload: tmpWdgt
-          })
-        }
-      }
-    }
-  })
-
-  return (
-    <div className="widPaneCont" data-hide={widget.hide} style={{'--prefix':'WIDG'}}>
-      <div className="WidPane thinScroll" loading="lazy">
-        <div className="widtop">
-          <Icon fafa="faEllipsisH" width={12}/>
-        </div>
-        <div className="widTime">
-          {new Date().toLocaleTimeString("en-US",{
-            hour: 'numeric',
-            minute: '2-digit'
-          })}
-        </div>
-        <div className="widgetCont">
-          <div className="topWidgets">
-            <div className="weatherCont ltShad">
-              <div className="wthtop">WEATHER</div>
-              <div className="wthcity">
-                <Icon fafa="faMapMarkerAlt" width={8}/>
-                {widget.data.weather.city}, {widget.data.weather.country}
-              </div>
-              <div className="wthInfo">
-                <div className="wthTemp">
-                  <Icon
-                    src={`https://www.metaweather.com/static/img/weather/png/64/${
-                      widget.data.weather.icon
-                    }.png`} ext
-                    width={32}/>
-                  <div className="wthdeg">{widget.data.weather.temp}</div>
-                  <div className="wthunit">ºC</div>
-                </div>
-                <div className="moreWinfo">
-                  <div className="wcontext">
-                    {widget.data.weather.wstate}
-                  </div>
-                  <div className="rainProb">
-                    <div className="chanceOfRain">
-                      <Icon fafa="faTint" width={10}/>
-                      {widget.data.weather.rain}%
-                    </div>
-                    <div className="chanceOfRain">
-                      <Icon fafa="faWind" width={10}/>
-                      {widget.data.weather.wind}
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div className="weekWthCont">
-                {widget.data.weather.days.map((item,i)=>{
-                  return (
-                    <div className="weekDay">
-                      <div>{i==0?"Today":item.day}</div>
-                      <Icon
-                        src={`https://www.metaweather.com/static/img/weather/png/64/${
-                          item.icon
-                        }.png`} ext
-                        width={24}/>
-
-                      <div className="tempCont">{item.min}º</div>
-                      <div className="tempCont">{item.max}º</div>
-                    </div>
-                  )
-                })}
-              </div>
-            </div>
-            <div className="shortCont">
-              <div className="short0 ltShad">
-                <div className="shName">MONEY | MARKET</div>
-                <div className="shEntry">
-                  <div className="stockName">
-                    <Icon src="google" ui width={12}/>
-                    <div className="stName">GOOGL</div>
-                  </div>
-                  <div className="stockValue">
-                    <div>{widget.data.stock[0][0]}</div>
-                    <div className="stRes" data-pos={widget.data.stock[0][2]==1}>
-                      {widget.data.stock[0][2]?'+':'-'}
-                      {widget.data.stock[0][1]}%
-                    </div>
-                  </div>
-                </div>
-                <div className="shEntry">
-                  <div className="stockName">
-                    <Icon src="tesla" ui width={12}/>
-                    <div className="stName">TSLA</div>
-                  </div>
-                  <div className="stockValue">
-                    <div>{widget.data.stock[1][0]}</div>
-                    <div className="stRes" data-pos={widget.data.stock[1][2]==1}>
-                      {widget.data.stock[1][2]?'+':'-'}
-                      {widget.data.stock[1][1]}%
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div className="short1 ltShad" style={{
-                '--afterBack': `url(${widget.data.event.pages[0].thumbnail && widget.data.event.pages[0].thumbnail.source})`,
-                backgroundImage: `url(${widget.data.event.pages[0].thumbnail && widget.data.event.pages[0].thumbnail.source})`
-              }}>
-                <div className="shName">
-                  <div className="flex"><Icon fafa="faLandmark" width={8}/>
-                      &nbsp;ON THIS DAY
-                  </div>
-                  <div>{widget.data.date}</div>
-                </div>
-                <div className="infotextCont">
-                  <div className="dayInfo">
-                    {widget.data.event.text}
-                  </div>
-                  <a href={widget.data.event.pages[0].content_urls.desktop.page}
-                    target="_blank"
-                    className="wikiref">more on wiki</a>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div className="newsCont">
-            <div className="topStories ltShad">
-              <div className="topNewsText">TOP STORIES</div>
-              <div className="topNewsCont">
-                {[...widget.data.news].splice(0,4).map((article,i)=>{
-                  return (
-                    <div className="tpNews" key={i}>
-                      <div className="tpSource">{article.source.name}</div>
-                      <div className="tpArticle">{article.title}</div>
-                    </div>
-                  )
-                })}
-              </div>
-            </div>
-            <div className="allNewsCont">
-              {[...widget.data.news].splice(4, widget.data.news.length).map((article, i)=>{
-                return (
-                  <a className="articleCont ltShad" key={i} style={{
-                    '--backgrad': getRandom(2),
-                    backgroundImage: `url(${article.urlToImage})`
-                  }} href={article.url} target="_blank">
-                    <div className="tpNews">
-                      <div className="tpSource">{article.source.name}</div>
-                      <div className="tpArticle">{article.title}</div>
-                      {i%5==4?
-                        <div className="tpdesc">{article.content}</div>:
-                        null}
-                    </div>
-                  </a>
-                )
-              })}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
 export const CalnWid = () => {
   const sidepane = useSelector(state => state.sidepane);
   const [loaded, setLoad] = useState(false);
@@ -680,49 +196,3 @@ export const CalnWid = () => {
     </div>
   );
 }
-
-const fetchApi = async (widget) => {
-  var tmpWdgt = {
-    ...widget
-  };
-  var date = new Date();
-
-  console.log('fetching ON THIS DAY');
-  await axios.get(`https://en.wikipedia.org/api/rest_v1/feed/onthisday/events/${date.getMonth()}/${date.getDay()}`)
-    .then(res => res.data).then(data => {
-      console.log("Fetched");
-      var event = data.events[Math.floor(Math.random() * data.events.length)];
-      date.setYear(event.year);
-
-      tmpWdgt.data.date = date.toLocaleDateString("en-US", {
-        year: "numeric",
-        month: "short",
-        day: "numeric"
-      });
-
-      tmpWdgt.data.event = event;
-    }).catch((error) => {
-      console.log("Fetch failed");
-    });
-
-  console.log('fetching NEWS');
-  await axios.get(`https://saurav.tech/NewsAPI/top-headlines/category/general/in.json`)
-    .then(res => res.data).then(data => {
-      console.log('NEWS Fetched');
-      var newsList = [];
-      for (var i = 0; i < data.totalResults; i++) {
-        var item = {
-          ...data.articles[i]
-        };
-        item.title = item.title.split("-").reverse().splice(1).reverse().join("-").trim();
-        newsList.push(item);
-      }
-
-      tmpWdgt.data.news = newsList;
-    }).catch((error) => {
-      console.log("Fetch failed");
-    });
-
-  tmpWdgt.updated = true;
-  return tmpWdgt;
-}
diff --git a/src/components/start/searchpane.scss b/src/components/start/searchpane.scss
index 5adf5dfcc..54f655933 100644
--- a/src/components/start/searchpane.scss
+++ b/src/components/start/searchpane.scss
@@ -6,9 +6,9 @@
 
 .searchBar {
   height: 30px;
-  border: solid 2px #0e60e4;
+  border-bottom: solid 2px var(--clrPrm);
   border-radius: 6px;
-  background: #fefefe;
+  background: var(--bg1);
   display: flex;
   padding: 0 10px;
 
@@ -19,16 +19,30 @@
 
   input {
     width: 400px;
-    color: #222;
+    background: var(--bg1);
+    color: var(--txt-col);
   }
 }
 
-.opts div {
-  border: solid 0 #1f4aff;
-  cursor: pointer;
+.topApp {
+  background: var(--bg2);
+}
+
+.smatch {
+  background: var(--bg2);
+}
+
+.opts {
+  color: var(--med-txt);
+
+  div {
+    border: solid 0 var(--clrPrm);
+    cursor: pointer;
 
-  &[value="true"] {
-    border-bottom-width: 2px;
+    &[value="true"] {
+      border-bottom-width: 2px;
+      color: var(--dark-txt);
+    }
   }
 }
 
@@ -43,7 +57,7 @@
 .rightSide {
   margin: 8px;
   height: 400px;
-  background: #fafafa;
+  background: var(--bg2);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -52,7 +66,7 @@
     width: 90%;
     height: 1px;
     border-radius: 10px;
-    background: #dfdfdf;
+    background: var(--bg2);
   }
 }
 
@@ -65,22 +79,27 @@
 }
 
 .qksrch {
-  color: #111;
+  color: var(--txt-col);
+
+  &:hover {
+    background: var(--bg2);
+  }
 }
 
 .qksrch svg {
-  color: #333;
+  color: var(--med-txt);
 }
 
 .calnpane {
+  --bg1: rgba(242, 242, 242, 0.9);
+
   position: absolute;
   bottom: 12px;
   right: 12px;
-  // width: 280px;
-  // min-height: 300px;
-  background: rgba(255, 255, 255, 0.88);
-  -webkit-backdrop-filter: blur(10px);
-  backdrop-filter: blur(10px);
+  background: var(--bg1);
+  color: var(--dark-txt);
+  -webkit-backdrop-filter: blur(20px);
+  backdrop-filter: blur(20px);
   overflow: hidden;
   transition: all ease-in-out 200ms;
   z-index: 9999;
@@ -93,13 +112,17 @@
   }
 }
 
+body[data-theme="dark"] .calnpane {
+  --bg1: rgba(36, 36, 36, 0.8);
+}
+
 .powerCont {
   position: absolute;
   top: -90px;
   left: -68px;
   width: 96px;
   font-size: 12px;
-  background: #fefefe;
+  background: var(--bg2);
   padding: 4px 6px;
   border-radius: 6px;
   box-shadow: 2px 2px 12px rgba(46, 40, 40, 0.25);
@@ -119,7 +142,7 @@
     border-radius: 4px;
 
     &:hover {
-      background: #ededed;
+      background: var(--bg2);
     }
   }
 
diff --git a/src/components/start/sidepane.scss b/src/components/start/sidepane.scss
index d5f232517..c39f75d13 100644
--- a/src/components/start/sidepane.scss
+++ b/src/components/start/sidepane.scss
@@ -1,10 +1,15 @@
 .sidePane {
+  --bg1: rgba(242, 242, 242, 0.9);
+  --bg2: #fbfbfb;
+  --bg3: #f5f5f5;
+
   position: absolute;
   bottom: 1rem;
   right: 1rem;
   width: 360px;
   border-radius: 0.5rem;
-  background: rgba(255, 255, 255, 0.88);
+  color: var(--dark-txt);
+  background: var(--bg1);
   -webkit-backdrop-filter: blur(20px);
   backdrop-filter: blur(20px);
   overflow: hidden;
@@ -19,6 +24,16 @@
   }
 }
 
+body[data-theme="dark"] .sidePane {
+  --bg1: rgba(36, 36, 36, 0.8);
+  --bg2: rgba(255, 255, 255, 0.08);
+  --bg3: rgba(255, 255, 255, 0.12);
+
+  .uicon {
+    filter: invert(1);
+  }
+}
+
 .quickSettings {
   display: flex;
   flex-direction: column;
@@ -52,12 +67,16 @@
   align-items: center;
   justify-content: center;
   border-bottom-color: rgba(0, 0, 0, 0.2);
-  background: rgba(255, 255, 255, 0.9);
+  background: var(--bg2);
   border: solid 0.1px rgba(17, 17, 17, 0.1);
   transition: all 0.1s ease;
 
+  &:hover {
+    background: var(--bg3);
+  }
+
   &[data-state="true"] {
-    background: rgb(0, 90, 255);
+    background: var(--clrPrm);
 
     .qktext {
       color: #ececec;
@@ -83,7 +102,7 @@
 }
 
 .sliders[type="range"] {
-  --track-color: linear-gradient(90deg, #005fba 100%, #888888 100%);
+  --track-color: linear-gradient(90deg, var(--clrPrm) 100%, #888888 100%);
   -webkit-appearance: none;
   background-color: transparent;
 }
@@ -95,11 +114,11 @@
   border: 0;
 }
 .sliders[type="range"]::-webkit-slider-thumb {
-  border: 4px solid white;
+  border: 4px solid var(--bg1);
   height: 20px;
   width: 20px;
   border-radius: 10px;
-  background: #005fba;
+  background: var(--clrPrm);
   -webkit-appearance: none;
   margin-top: -9px;
 }
@@ -114,11 +133,11 @@
   border: 0;
 }
 .sliders[type="range"]::-moz-range-thumb {
-  border: 4px solid white;
+  border: 4px solid var(--bg1);
   height: 20px;
   width: 20px;
   border-radius: 10px;
-  background: #005fba;
+  background: var(--clrPrm);
 }
 .sliders[type="range"]::-ms-track {
   width: 100%;
@@ -139,7 +158,7 @@
 }
 .sliders[type="range"]::-ms-thumb {
   margin-top: 1px;
-  border: 4px solid white;
+  border: 4px solid var(--bg1);
   height: 20px;
   width: 20px;
   border-radius: 10px;
@@ -152,31 +171,24 @@
   background: var(--track-color);
 }
 
-.managentf {
-  text-align: right;
-  padding: 13px 14px;
-}
-
-.nonewnotif {
-  position: absolute;
-  top: 48%;
-  left: 32%;
-  font-size: 0.72em;
-  font-weight: 500;
-  color: #464646;
-}
-
+// Widgets
 .widPaneCont {
+  --bg1: rgba(234, 234, 234, 0.25);
+  --bg2: rgba(255, 255, 255, 0.5);
+  --clr1: #fefefe;
+  --clrWeather: #fff3be;
+  --topStoriesClr: #c6a0ff;
+
   position: absolute;
-  top: 0;
-  left: 0;
+  top: 12px;
+  left: 12px;
+  bottom: 12px;
   width: 610px;
-  height: 100%;
-  margin: 6px;
+  border-radius: 8px;
   overflow: hidden;
   transform: translateX(0);
-  -webkit-backdrop-filter: blur(40px);
-  backdrop-filter: blur(40px);
+  -webkit-backdrop-filter: blur(20px);
+  backdrop-filter: blur(20px);
   transition: all 0.3s cubic-bezier(0.77, 0, 0.18, 1);
   z-index: 9999;
 
@@ -186,11 +198,19 @@
   }
 }
 
+body[data-theme="dark"] .widPaneCont {
+  --bg1: rgba(31, 31, 31, 0.25);
+  --bg2: rgba(255, 255, 255, 0.1);
+  --clr1: #534f88;
+  --clrWeather: #1b2257;
+  --topStoriesClr: #35264c;
+}
+
 .WidPane {
   width: 100%;
-  border-radius: 8px;
-  height: calc(100% - 12px);
-  background: rgba(255, 255, 255, 0.25);
+  height: 100%;
+  color: var(--dark-txt);
+  background: var(--bg1);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -202,14 +222,14 @@
     display: flex;
     padding: 18px 28px 0 0;
     justify-content: flex-end;
-    color: #222;
+    color: var(--txt-col);
   }
 
   .widTime {
     display: flex;
     justify-content: center;
     font-size: 1.5em;
-    color: #222;
+    color: var(--txt-col);
   }
 
   .widgetCont {
@@ -228,10 +248,10 @@
       padding: 12px 14px;
       border-radius: 6px;
       box-sizing: border-box;
-      background: rgb(255, 255, 255);
-      background: -webkit-linear-gradient(top left, #fefefe 0%, #fff3be 80%);
-      background: -o-linear-gradient(top left, #fefefe 0%, #fff3be 80%);
-      background: linear-gradient(to bottom right, #fefefe 0%, #fff3be 80%);
+      background: var(--clr1);
+      background: -webkit-linear-gradient(top left, var(--clr1) 0%, var(--clrWeather) 80%);
+      background: -o-linear-gradient(top left, var(--clr1) 0%, var(--clrWeather) 80%);
+      background: linear-gradient(to bottom right, var(--clr1) 0%, var(--clrWeather) 80%);
       display: flex;
       flex-direction: column;
       align-items: center;
@@ -279,7 +299,7 @@
       .wthunit {
         margin: 0 2px;
         font-size: 0.72em;
-        color: rgba(5, 5, 5, 0.4);
+        color: var(--sat-txt);
         padding-bottom: 6px;
       }
     }
@@ -306,7 +326,7 @@
 
         .uicon {
           margin-right: 2px;
-          color: rgba(0, 0, 0, 0.8);
+          color: var(--med-txt);
         }
       }
     }
@@ -321,7 +341,7 @@
         width: 23%;
         border-radius: 4px;
         padding: 4px 0;
-        background: rgba(255, 255, 255, 0.4);
+        background: var(--bg2);
         display: flex;
         flex-direction: column;
         justify-content: space-between;
@@ -335,7 +355,7 @@
 
         .tempCont {
           font-size: 1.36em;
-          color: #3b3b3b;
+          color: var(--med-txt);
         }
       }
     }
@@ -352,7 +372,7 @@
         width: 100%;
         height: 100%;
         margin: 4px 4px 6px;
-        background: #fefefe;
+        background: var(--clrWeather);
         border-radius: 6px;
         padding: 8px 12px 0;
         overflow: hidden;
@@ -361,7 +381,7 @@
           width: 100%;
           font-size: 0.6em;
           letter-spacing: 1px;
-          color: #666;
+          color: var(--gray-txt);
           margin-bottom: 16px;
           display: flex;
           justify-content: space-between;
@@ -382,7 +402,7 @@
             }
 
             .stName {
-              color: #4a4a4a;
+              color: var(--med-txt);
               padding-top: 1px;
             }
           }
@@ -401,7 +421,7 @@
             margin-left: 8px;
             font-size: 0.8em;
             background: #eb3535;
-            color: #fefefe;
+            color: var(--clr1);
 
             &[data-pos="true"] {
               background: #09d031;
@@ -412,7 +432,7 @@
 
       .short1 {
         position: relative;
-        background-color: #fefefe00;
+        background-color: transparent;
         background-repeat: no-repeat;
         background-size: cover;
         background-position: center;
@@ -448,11 +468,10 @@
 
         .shName {
           margin-bottom: 4px;
-          color: #fefefe;
+          color: #eee;
 
           div:nth-child(2) {
             font-weight: 600;
-            color: #fefefe;
           }
         }
 
@@ -467,7 +486,7 @@
         .dayInfo {
           max-height: 64px;
           font-size: 0.72em;
-          color: #fefefe;
+          color: #ddd;
           margin-top: auto;
           line-height: 14px;
           overflow: hidden;
@@ -481,7 +500,7 @@
         a {
           text-decoration: none;
           font-size: 0.64em;
-          color: #c1e2ff;
+          color: #c3c3c3;
           text-align: right;
         }
       }
@@ -503,10 +522,10 @@
   position: relative;
   border-radius: 4px;
   padding: 12px;
-  background: rgb(209, 209, 209);
-  background: -webkit-linear-gradient(top left, rgba(230, 230, 230, 1) 0%, rgba(255, 255, 255, 1) 100%);
-  background: -o-linear-gradient(top left, rgba(230, 230, 230, 1) 0%, rgba(255, 255, 255, 1) 100%);
-  background: linear-gradient(to bottom right, rgba(230, 230, 230, 1) 0%, rgba(255, 255, 255, 1) 100%);
+  background: var(--comp-txt);
+  background: -webkit-linear-gradient(top left, var(--topStoriesClr) 0%, var(--comp-txt) 100%);
+  background: -o-linear-gradient(top left, var(--topStoriesClr) 0%, var(--comp-txt) 100%);
+  background: linear-gradient(to bottom right, var(--topStoriesClr) 0%, var(--comp-txt) 100%);
 
   &::after {
     content: "source: saurav.tech/NewsAPI";
@@ -515,11 +534,12 @@
     right: 0;
     font-size: 0.64em;
     padding: 6px;
-    color: #0e2d67;
+    color: var(--clrPrm);
+    opacity: 0.67;
   }
 
   .topNewsText {
-    color: #1f202e;
+    color: var(--txt-col);
     font-size: 0.72em;
     font-weight: 600;
   }
@@ -535,7 +555,7 @@
       padding: 16px 12px 0 0;
 
       .tpSource {
-        color: #666;
+        color: var(--gray-txt);
         font-size: 0.6em;
       }
 
@@ -543,7 +563,7 @@
         margin: 4px 0;
         font-size: 0.76em;
         font-weight: 600;
-        color: #1d1d25;
+        color: var(--txt-col);
         height: 48px;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -570,7 +590,7 @@
   padding: 0 12px;
   border-radius: 6px;
   overflow: hidden;
-  background-color: #e6e6e6;
+  background-color: var(--comp-txt);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
@@ -583,10 +603,10 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background: rgb(255, 255, 255);
-    background: -webkit-linear-gradient(hsl(0deg 12% 90% / 0%) 50%, var(--backgrad) 90%);
-    background: -o-linear-gradient(hsl(0deg 12% 90% / 0%) 50%, var(--backgrad) 90%);
-    background: linear-gradient(hsl(0deg 12% 90% / 0%) 50%, var(--backgrad) 90%);
+    background: var(--dark-txt);
+    background: -webkit-linear-gradient(transparent 50%, var(--backgrad) 90%);
+    background: -o-linear-gradient(transparent 50%, var(--backgrad) 90%);
+    background: linear-gradient(transparent 50%, var(--backgrad) 90%);
     z-index: 0;
   }
 
@@ -596,17 +616,17 @@
     padding: 0 12px 12px 0;
 
     .tpSource {
-      color: #222;
+      color: var(--txt-col);
       font-size: 0.6em;
       font-weight: 500;
-      text-shadow: 0 0 4px white;
+      text-shadow: 0 0 4px var(--comp-txt);
     }
 
     .tpArticle {
       margin-top: 4px;
       font-size: 0.8em;
       font-weight: 600;
-      color: #111;
+      color: var(--txt-col);
       max-height: 56px;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -630,10 +650,10 @@
       left: 0;
       width: 100%;
       height: 100%;
-      background: rgb(255, 255, 255);
-      background: -webkit-linear-gradient(right, hsl(0deg 12% 90% / 0%) 0%, var(--backgrad) 60%);
-      background: -o-linear-gradient(right, hsl(0deg 12% 90% / 0%) 0%, var(--backgrad) 60%);
-      background: linear-gradient(to left, hsl(0deg 12% 90% / 0%) 0%, var(--backgrad) 60%);
+      background: var(--dark-txt);
+      background: -webkit-linear-gradient(right, transparent 0%, var(--backgrad) 60%);
+      background: -o-linear-gradient(right, transparent 0%, var(--backgrad) 60%);
+      background: linear-gradient(to left, transparent 0%, var(--backgrad) 60%);
       z-index: 0;
     }
 
@@ -653,7 +673,7 @@
       .tpdesc {
         font-size: 0.72em;
         font-weight: 400;
-        color: #4d4d4d;
+        color: var(--med-txt);
         max-height: 90px;
         overflow: hidden;
         text-overflow: ellipsis;
diff --git a/src/components/start/start.js b/src/components/start/start.js
new file mode 100644
index 000000000..594069996
--- /dev/null
+++ b/src/components/start/start.js
@@ -0,0 +1,322 @@
+import React, { useState, useEffect } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { Icon } from "../../utils/general";
+
+export const StartMenu = () => {
+  const { align } = useSelector((state) => state.taskbar);
+  const start = useSelector((state) => {
+    var arr = state.startmenu,
+      ln = (6 - (arr.pnApps.length % 6)) % 6;
+
+    for (var i = 0; i < ln; i++) {
+      arr.pnApps.push({
+        empty: true,
+      });
+    }
+
+    for (i = 0; i < arr.rcApps.length; i++) {
+      if (arr.rcApps[i].lastUsed < 0) {
+        arr.rcApps[i].lastUsed = "Recently Added";
+      } else if (arr.rcApps[i].lastUsed < 10) {
+        arr.rcApps[i].lastUsed = "Just Now";
+      } else if (arr.rcApps[i].lastUsed < 60) {
+        arr.rcApps[i].lastUsed += "m ago";
+      } else if (arr.rcApps[i].lastUsed < 360) {
+        arr.rcApps[i].lastUsed = Math.floor(arr.rcApps[i].lastUsed / 60) + "h ago";
+      }
+    }
+
+    var allApps = [],
+      tmpApps = Object.keys(state.apps)
+        .filter((x) => x != "hz")
+        .map((key) => {
+          return state.apps[key];
+        });
+
+    tmpApps.sort((a, b) => (a.name > b.name ? 1 : b.name > a.name ? -1 : 0));
+
+    for (i = 0; i < 27; i++) {
+      allApps[i] = [];
+    }
+
+    for (i = 0; i < tmpApps.length; i++) {
+      var t1 = tmpApps[i].name.trim().toUpperCase().charCodeAt(0);
+      if (t1 > 64 && t1 < 91) {
+        allApps[t1 - 64].push(tmpApps[i]);
+      } else {
+        allApps[0].push(tmpApps[i]);
+      }
+    }
+
+    arr.contApps = allApps;
+    arr.allApps = tmpApps;
+    return arr;
+  });
+
+  const [query, setQuery] = useState("");
+  const [match, setMatch] = useState({});
+  const [atab, setTab] = useState("All");
+  // const [pwctrl, setPowCtrl] = useState
+
+  const dispatch = useDispatch();
+  const tabSw = (e) => {
+    setTab(e.target.innerText.trim());
+  };
+
+  const clickDispatch = (event) => {
+    var action = {
+      type: event.target.dataset.action,
+      payload: event.target.dataset.payload,
+    };
+
+    if (action.type) {
+      dispatch(action);
+    }
+
+    if (action.type && (action.payload == "full" || action.type == "EDGELINK")) {
+      dispatch({
+        type: "STARTHID",
+      });
+    }
+
+    if (action.type == "STARTALPHA") {
+      var target = document.getElementById("char" + action.payload);
+      if (target) {
+        target.parentNode.scrollTop = target.offsetTop;
+      } else {
+        var target = document.getElementById("charA");
+        target.parentNode.scrollTop = 0;
+      }
+    }
+  };
+
+  useEffect(() => {
+    if (query.length) {
+      for (var i = 0; i < start.allApps.length; i++) {
+        if (start.allApps[i].name.toLowerCase().includes(query.toLowerCase())) {
+          setMatch(start.allApps[i]);
+          break;
+        }
+      }
+    }
+  }, [query]);
+
+  return (
+    <div className="startMenu dpShad" data-hide={start.hide} style={{ "--prefix": "START" }} data-align={align}>
+      {start.menu ? (
+        <>
+          <div className="stmenu" data-allapps={start.showAll}>
+            <div className="menuUp">
+              <div className="pinnedApps">
+                <div className="stAcbar">
+                  <div className="gpname">Pinned</div>
+                  <div className="gpbtn prtclk" onClick={clickDispatch} data-action="STARTALL">
+                    <div>All apps</div>
+                    <Icon fafa="faChevronRight" width={8} />
+                  </div>
+                </div>
+                <div className="pnApps">
+                  {start.pnApps.map((app, i) => {
+                    return app.empty ? (
+                      <div key={i} className="pnApp pnEmpty"></div>
+                    ) : (
+                      <div key={i} className="pnApp" value={app.action != null} onClick={clickDispatch} data-action={app.action} data-payload={app.payload || "full"}>
+                        <Icon className="pnIcon" src={app.icon} width={24} click={app.action} payload={app.payload || "full"} />
+                        <div className="appName">{app.name}</div>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+              <div className="recApps">
+                <div className="stAcbar">
+                  <div className="gpname">Recommended</div>
+                  <div className="gpbtn none">
+                    <div>More</div>
+                    <Icon fafa="faChevronRight" width={8} />
+                  </div>
+                </div>
+                <div className="reApps">
+                  {start.rcApps.slice(0, 6).map((app, i) => {
+                    return app.name ? (
+                      <div key={i} className="rnApp">
+                        <Icon className="pnIcon" src={app.icon} width={22} />
+                        <div className="acInfo">
+                          <div className="appName">{app.name}</div>
+                          <div className="timeUsed">{app.lastUsed}</div>
+                        </div>
+                      </div>
+                    ) : null;
+                  })}
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="allCont" data-allapps={start.showAll}>
+            <div className="appCont">
+              <div className="stAcbar">
+                <div className="gpname">All apps</div>
+                <div className="gpbtn prtclk" onClick={clickDispatch} data-action="STARTALL">
+                  <Icon className="chevLeft" fafa="faChevronLeft" width={8} />
+                  <div>Back</div>
+                </div>
+              </div>
+              <div className="allApps" data-alpha={start.alpha}>
+                {start.contApps.map((ldx, i) => {
+                  if (ldx.length == 0) return null;
+
+                  var tpApps = [];
+                  tpApps.push(
+                    <div className="allApp prtclk" data-action="STARTALPHA" onClick={clickDispatch} id={`char${i == 0 ? "#" : String.fromCharCode(i + 64)}`}>
+                      <div className="ltName">{i == 0 ? "#" : String.fromCharCode(i + 64)}</div>
+                    </div>
+                  );
+
+                  ldx.forEach((app, j) => {
+                    tpApps.push(
+                      <div key={j} className="allApp prtclk" onClick={clickDispatch} data-action={app.action} data-payload={app.payload || "full"}>
+                        <Icon className="pnIcon" src={app.icon} width={20} />
+                        <div className="appName">{app.name}</div>
+                      </div>
+                    );
+                  });
+
+                  return tpApps;
+                })}
+              </div>
+              <div className="alphaBox" data-alpha={start.alpha}>
+                <div className="alphaCont">
+                  <div className="dullApp allApp">
+                    <div className="ltName">&</div>
+                  </div>
+                  {start.contApps.map((ldx, i) => {
+                    return (
+                      <div className={ldx.length == 0 ? "dullApp allApp" : "allApp prtclk"} data-action="STARTALPHA" onClick={ldx.length == 0 ? null : clickDispatch} data-payload={i == 0 ? "#" : String.fromCharCode(i + 64)}>
+                        <div className="ltName">{i == 0 ? "#" : String.fromCharCode(i + 64)}</div>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="menuBar">
+            <div className="profile handcr">
+              <Icon src="blueProf" ui rounded width={26} click="EXTERNAL" payload="https://blueedge.me" />
+              <div className="usName">Blue Edge</div>
+            </div>
+            <div className="relative">
+              <div className="powerCont" data-vis={start.pwctrl}>
+                <div className="flex prtclk" onClick={clickDispatch} data-action="WALLSHUTDN">
+                  <Icon msi="PowerButton" width={12} />
+                  <span>Shut down</span>
+                </div>
+                <div className="flex prtclk" onClick={clickDispatch} data-action="WALLRESTART">
+                  <Icon msi="Refresh" width={12} flip />
+                  <span>Restart</span>
+                </div>
+                <div className="flex prtclk" onClick={clickDispatch} data-action="WALLALOCK">
+                  <Icon msi="Lock" width={12} />
+                  <span>Lock</span>
+                </div>
+              </div>
+              <Icon msi="PowerButton" width={14} click="STARTPWC" />
+            </div>
+          </div>
+        </>
+      ) : (
+        <div className="searchMenu">
+          <div className="searchBar">
+            <Icon className="searchIcon" src="search" width={16} />
+            <input
+              type="text"
+              onChange={(event) => {
+                setQuery(event.target.value.trim());
+              }}
+              defaultValue={query}
+              placeholder="Type here to search"
+            />
+          </div>
+          <div className="flex py-4 px-1 text-xs">
+            <div className="opts w-1/2 flex justify-between">
+              <div value={atab == "All"} onClick={tabSw}>
+                All
+              </div>
+              <div value={atab == "Apps"} onClick={tabSw}>
+                Apps
+              </div>
+              <div value={atab == "Documents"} onClick={tabSw}>
+                Documents
+              </div>
+              <div value={atab == "Web"} onClick={tabSw}>
+                Web
+              </div>
+              <div value={atab == "More"} onClick={tabSw}>
+                More
+              </div>
+            </div>
+          </div>
+          <div className="shResult w-full flex justify-between">
+            <div className="leftSide flex-col px-1" data-width={query.length != 0}>
+              <div className="text-xss font-semibold mb-4">{query.length ? "Best match" : "Top apps"}</div>
+              {query.length ? (
+                <div className="textResult h-16">
+                  <div className="smatch flex my-2 p-3 rounded">
+                    <Icon src={match.icon} width={24} />
+                    <div className="matchInfo flex-col px-2">
+                      <div className="font-semibold text-xs">{match.name}</div>
+                      <div className="text-xss">App</div>
+                    </div>
+                  </div>
+                  <div className="smatch flex my-2 p-3 rounded handcr prtclk" onClick={clickDispatch} data-action="EDGELINK" data-payload={query}>
+                    <Icon src="search" ui width={20} />
+                    <div className="matchInfo flex-col px-2">
+                      <div className="font-semibold text-xs">Search online</div>
+                      <div className="text-xss">Web</div>
+                    </div>
+                  </div>
+                </div>
+              ) : (
+                <>
+                  <div className="topApps flex w-full justify-between">
+                    {start.rcApps.slice(2, 7).map((app, i) => {
+                      return (
+                        <div className="topApp pt-4 py-2 ltShad">
+                          <Icon onClick={clickDispatch} click={app.action} payload={app.payload || "full"} src={app.icon} width={24} />
+                          <div className="text-xs mt-2">{app.name}</div>
+                        </div>
+                      );
+                    })}
+                  </div>
+                  <div className="text-xss font-semibold mt-8">Quick Searches</div>
+                  <div className="quickSearches pl-4 mt-2">
+                    {start.qksrch.map((srch) => {
+                      return (
+                        <div className="qksrch flex items-center py-3 handcr prtclk" onClick={clickDispatch} data-action="EDGELINK" data-payload={srch[2]}>
+                          <Icon fafa={srch[0]} reg={srch[1]} />
+                          <div className="ml-4 text-xs">{srch[2]}</div>
+                        </div>
+                      );
+                    })}
+                  </div>
+                </>
+              )}
+            </div>
+            {query.length ? (
+              <div className="w-2/3 rightSide rounded">
+                <Icon className="mt-6" src={match.icon} width={64} />
+                <div className="">{match.name}</div>
+                <div className="text-xss mt-2">App</div>
+                <div className="hline mt-8"></div>
+                <div className="openlink w-4/5 flex prtclk handcr pt-3" onClick={clickDispatch} data-action={match.action} data-payload={match.payload ? match.payload : "full"}>
+                  <Icon src="link" ui width={16} />
+                  <div className="text-xss ml-3">Open</div>
+                </div>
+              </div>
+            ) : null}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/src/components/start/startmenu.scss b/src/components/start/startmenu.scss
index a31ddc750..b2bbd6d38 100644
--- a/src/components/start/startmenu.scss
+++ b/src/components/start/startmenu.scss
@@ -29,7 +29,10 @@
 }
 
 .startMenu {
+  --bg1: rgba(242, 242, 242, 0.9);
+  --bg2: rgba(255, 255, 255, 0.9);
   --roundRad: 6px;
+
   position: absolute;
   bottom: 10px;
   width: 520px;
@@ -45,32 +48,38 @@
     left: 8px;
   }
 
-  background: rgba(255, 255, 255, 0.88);
+  color: var(--dark-txt);
+  background: var(--bg1);
   -webkit-backdrop-filter: blur(20px);
   backdrop-filter: blur(20px);
   border-radius: var(--roundRad);
   overflow: hidden;
-  transition: all .2s cubic-bezier(.79,.14,.15,.86);
+  transition: all 0.2s cubic-bezier(0.79, 0.14, 0.15, 0.86);
   z-index: 9999;
 
-  &[data-hide='true'] {
+  &[data-hide="true"] {
     transform: translateY(100px);
     opacity: 0;
     pointer-events: none;
   }
 }
 
+body[data-theme="dark"] .startMenu {
+  --bg1: rgba(36, 36, 36, 0.8);
+  --bg2: rgba(255, 255, 255, 0.1);
+}
+
 .allCont,
 .stmenu {
   position: relative;
   width: 520px;
   height: 480px;
 
-  &[data-allapps='false'] {
+  &[data-allapps="false"] {
     transition: ease-in-out 200ms;
   }
 
-  &[data-allapps='true'] {
+  &[data-allapps="true"] {
     // margin-left: -520px;
     transform: translateX(-520px);
     transition: ease-in-out 200ms;
@@ -92,7 +101,7 @@
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  background: rgba(175, 175, 175, 0.1);
+  background: rgba(0, 0, 0, 0.1); // fine in dark mode too :)
 }
 
 .profile {
@@ -104,13 +113,12 @@
     margin-left: 12px;
     font-size: 0.7em;
     font-weight: 400;
-    color: #111;
+    color: var(--txt-col);
   }
 }
 
 .menuUp {
   padding: 36px 48px;
-  // background: rgba(255, 255, 255, 0.84);
 }
 
 .stAcbar {
@@ -120,11 +128,11 @@
   .gpname {
     font-weight: 600;
     font-size: 0.74em;
-    color: #111;
+    color: var(--dark-col);
   }
 
   .gpbtn {
-    background: rgba(255, 255, 255, 0.9);
+    background: var(--bg2);
     padding: 0 8px 2px;
     font-size: 0.64em;
     font-weight: 400;
@@ -137,7 +145,7 @@
     svg {
       margin-left: 4px;
       padding-top: 2px;
-      color: #414141;
+      color: var(--med-txt);
     }
 
     .chevLeft svg {
@@ -169,11 +177,10 @@
       position: absolute;
       top: -2px;
       right: -2px;
-      width: 3px;
-      height: 3px;
-      border: solid 1px #88b7ee;
+      width: 4px;
+      height: 4px;
       border-radius: 6px;
-      background: #1372e3;
+      background: var(--clrPrm);
     }
 
     .pnIcon::after {
@@ -183,7 +190,7 @@
       height: 0;
       top: -12px;
       padding: 0 42px 60px;
-      background: rgba(255, 255, 255, 0);
+      background: transparent;
       z-index: -1;
       transition: all ease-in-out 100ms;
       border-radius: 4px;
@@ -192,7 +199,7 @@
     .appName {
       width: 24px;
       display: flex;
-      color: #2f2f2f;
+      color: var(--txt-col);
       margin-top: 4px;
       font-weight: 500;
       font-size: 0.64em;
@@ -202,7 +209,7 @@
       cursor: default;
     }
 
-    &:nth-child(6n+1) {
+    &:nth-child(6n + 1) {
       width: 10%;
       align-items: flex-start;
     }
@@ -214,7 +221,7 @@
   }
 
   .pnApp:hover .pnIcon::after {
-    background: rgba(255, 255, 255, 0.5);
+    background: var(--bg2);
   }
 }
 
@@ -233,7 +240,7 @@
   display: grid;
   grid-auto-flow: column;
   grid-template-columns: 240px 184px;
-  grid-template-rows: repeat(3,minmax(0,1fr));
+  grid-template-rows: repeat(3, minmax(0, 1fr));
 
   .rnApp {
     display: flex;
@@ -245,13 +252,13 @@
       margin: 0 12px;
 
       .appName {
-        color: #2f2f2f;
+        color: var(--txt-col);
         font-size: 0.7em;
         font-weight: 700;
       }
 
       .timeUsed {
-        color: #535353;
+        color: var(--gray-txt);
         font-size: 0.6em;
         font-weight: 500;
       }
@@ -279,7 +286,7 @@
   transition: all ease-in-out 200ms;
   transform-origin: center;
 
-  &[data-alpha='true'] {
+  &[data-alpha="true"] {
     transform: scale(0);
     opacity: 0;
     pointer-events: none;
@@ -288,7 +295,7 @@
   &::-webkit-scrollbar {
     display: none;
     width: 1.6px;
-    background-color: transparent;
+    background: transparent;
   }
 
   &:hover::-webkit-scrollbar {
@@ -298,7 +305,7 @@
   &::-webkit-scrollbar-thumb {
     width: 1.6px;
     border-radius: 10px;
-    background-color: rgba(0, 0, 0, 0.4);
+    background: var(--sat-txt);
   }
 
   .allApp {
@@ -318,7 +325,7 @@
       left: 0;
       z-index: -1;
       border-radius: 4px;
-      background: rgba(255, 255, 255, 0.4);
+      background: var(--bg2);
     }
 
     .ltName {
@@ -332,7 +339,7 @@
       text-align: left;
       width: 20%;
       padding-left: 4px;
-      color: #2f2f2f;
+      color: var(--txt-col);
       font-weight: 500;
       font-size: 0.6em;
       margin: 0 12px;
@@ -351,7 +358,7 @@
   transform-origin: center;
   transition: all ease-in-out 200ms;
 
-  &[data-alpha='false'] {
+  &[data-alpha="false"] {
     opacity: 0;
     transform: scale(2);
     pointer-events: none;
@@ -363,9 +370,9 @@
   width: 160px;
   height: 280px;
   display: grid;
-  grid-template-columns: repeat(4,minmax(0,1fr));
-  grid-template-rows: repeat(7,minmax(0,1fr));
-  color: #010101;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  grid-template-rows: repeat(7, minmax(0, 1fr));
+  color: var(--txt-col);
   cursor: pointer;
 
   .allApp {
@@ -375,6 +382,6 @@
 
   .dullApp {
     cursor: default;
-    color: rgba(0, 0, 0, 0.36);
+    color: var(--sat-txt);
   }
 }
diff --git a/src/components/start/widget.js b/src/components/start/widget.js
new file mode 100644
index 000000000..108411e27
--- /dev/null
+++ b/src/components/start/widget.js
@@ -0,0 +1,228 @@
+import React, { useState, useEffect} from 'react';
+import { useSelector, useDispatch} from 'react-redux';
+import {Icon} from '../../utils/general';
+
+import axios from 'axios';
+
+export const WidPane = () => {
+  const dispatch = useDispatch();
+  const widget = useSelector((state) => state.widpane);
+  const theme = useSelector((state) => state.setting.person.theme);
+  const getRandom = (x = 0) => {
+    if (theme=="light") return `hsl(${Math.floor(Math.random()*360)}deg 36% 84%)`;
+    if (theme=="dark") return `hsl(${Math.floor(Math.random()*360)}deg 36% 16%)`;
+  }
+
+  useEffect(async () => {
+    if (process.env.REACT_APP_DEVELOPEMENT != "development") {
+      if (!widget.updated && !widget.hide) {
+        var tmpWdgt = await fetchApi(widget);
+        console.log("Fetching Api's");
+        if (tmpWdgt.updated) {
+          dispatch({
+            type: "WIDGREST",
+            payload: tmpWdgt
+          })
+        }
+      }
+    }
+  })
+
+  return (
+    <div className="widPaneCont" data-hide={widget.hide} style={{'--prefix':'WIDG'}}>
+      <div className="WidPane thinScroll" loading="lazy">
+        <div className="widtop">
+          <Icon fafa="faEllipsisH" width={12}/>
+        </div>
+        <div className="widTime">
+          {new Date().toLocaleTimeString("en-US",{
+            hour: 'numeric',
+            minute: '2-digit'
+          })}
+        </div>
+        <div className="widgetCont">
+          <div className="topWidgets">
+            <div className="weatherCont ltShad">
+              <div className="wthtop">WEATHER</div>
+              <div className="wthcity">
+                <Icon fafa="faMapMarkerAlt" width={8}/>
+                {widget.data.weather.city}, {widget.data.weather.country}
+              </div>
+              <div className="wthInfo">
+                <div className="wthTemp">
+                  <Icon
+                    src={`https://www.metaweather.com/static/img/weather/png/64/${
+                      widget.data.weather.icon
+                    }.png`} ext
+                    width={32}/>
+                  <div className="wthdeg">{widget.data.weather.temp}</div>
+                  <div className="wthunit">ºC</div>
+                </div>
+                <div className="moreWinfo">
+                  <div className="wcontext">
+                    {widget.data.weather.wstate}
+                  </div>
+                  <div className="rainProb">
+                    <div className="chanceOfRain">
+                      <Icon fafa="faTint" width={10}/>
+                      {widget.data.weather.rain}%
+                    </div>
+                    <div className="chanceOfRain">
+                      <Icon fafa="faWind" width={10}/>
+                      {widget.data.weather.wind}
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className="weekWthCont">
+                {widget.data.weather.days.map((item,i)=>{
+                  return (
+                    <div className="weekDay">
+                      <div>{i==0?"Today":item.day}</div>
+                      <Icon
+                        src={`https://www.metaweather.com/static/img/weather/png/64/${
+                          item.icon
+                        }.png`} ext
+                        width={24}/>
+
+                      <div className="tempCont">{item.min}º</div>
+                      <div className="tempCont">{item.max}º</div>
+                    </div>
+                  )
+                })}
+              </div>
+            </div>
+            <div className="shortCont">
+              <div className="short0 ltShad">
+                <div className="shName">MONEY | MARKET</div>
+                <div className="shEntry">
+                  <div className="stockName">
+                    <Icon src="google" ui width={12}/>
+                    <div className="stName">GOOGL</div>
+                  </div>
+                  <div className="stockValue">
+                    <div>{widget.data.stock[0][0]}</div>
+                    <div className="stRes" data-pos={widget.data.stock[0][2]==1}>
+                      {widget.data.stock[0][2]?'+':'-'}
+                      {widget.data.stock[0][1]}%
+                    </div>
+                  </div>
+                </div>
+                <div className="shEntry">
+                  <div className="stockName">
+                    <Icon src="tesla" ui width={12}/>
+                    <div className="stName">TSLA</div>
+                  </div>
+                  <div className="stockValue">
+                    <div>{widget.data.stock[1][0]}</div>
+                    <div className="stRes" data-pos={widget.data.stock[1][2]==1}>
+                      {widget.data.stock[1][2]?'+':'-'}
+                      {widget.data.stock[1][1]}%
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className="short1 ltShad" style={{
+                '--afterBack': `url(${widget.data.event.pages[0].thumbnail && widget.data.event.pages[0].thumbnail.source})`,
+                backgroundImage: `url(${widget.data.event.pages[0].thumbnail && widget.data.event.pages[0].thumbnail.source})`
+              }}>
+                <div className="shName">
+                  <div className="flex"><Icon fafa="faLandmark" width={8}/>
+                      &nbsp;ON THIS DAY
+                  </div>
+                  <div>{widget.data.date}</div>
+                </div>
+                <div className="infotextCont">
+                  <div className="dayInfo">
+                    {widget.data.event.text}
+                  </div>
+                  <a href={widget.data.event.pages[0].content_urls.desktop.page}
+                    target="_blank" noopener className="wikiref">more on wiki</a>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="newsCont">
+            <div className="topStories ltShad">
+              <div className="topNewsText">TOP STORIES</div>
+              <div className="topNewsCont">
+                {[...widget.data.news].splice(0,4).map((article,i)=>{
+                  return (
+                    <div className="tpNews" key={i}>
+                      <div className="tpSource">{article.source.name}</div>
+                      <div className="tpArticle">{article.title}</div>
+                    </div>
+                  )
+                })}
+              </div>
+            </div>
+            <div className="allNewsCont">
+              {[...widget.data.news].splice(4, widget.data.news.length).map((article, i)=>{
+                return (
+                  <a className="articleCont ltShad" key={i} style={{
+                    '--backgrad': getRandom(2),
+                    backgroundImage: `url(${article.urlToImage})`
+                  }} href={article.url} target="_blank" noopener>
+                    <div className="tpNews">
+                      <div className="tpSource">{article.source.name}</div>
+                      <div className="tpArticle">{article.title}</div>
+                      {i%5==4?
+                        <div className="tpdesc">{article.content}</div>:
+                        null}
+                    </div>
+                  </a>
+                )
+              })}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const fetchApi = async (widget) => {
+  var tmpWdgt = {
+    ...widget
+  };
+  var date = new Date();
+
+  console.log('fetching ON THIS DAY');
+  await axios.get(`https://en.wikipedia.org/api/rest_v1/feed/onthisday/events/${date.getMonth()}/${date.getDay()}`)
+    .then(res => res.data).then(data => {
+      console.log("Fetched");
+      var event = data.events[Math.floor(Math.random() * data.events.length)];
+      date.setYear(event.year);
+
+      tmpWdgt.data.date = date.toLocaleDateString("en-US", {
+        year: "numeric",
+        month: "short",
+        day: "numeric"
+      });
+
+      tmpWdgt.data.event = event;
+    }).catch((error) => {
+      console.log("Fetch failed");
+    });
+
+  console.log('fetching NEWS');
+  await axios.get(`https://saurav.tech/NewsAPI/top-headlines/category/general/in.json`)
+    .then(res => res.data).then(data => {
+      console.log('NEWS Fetched');
+      var newsList = [];
+      for (var i = 0; i < data.totalResults; i++) {
+        var item = {
+          ...data.articles[i]
+        };
+        item.title = item.title.split("-").reverse().splice(1).reverse().join("-").trim();
+        newsList.push(item);
+      }
+
+      tmpWdgt.data.news = newsList;
+    }).catch((error) => {
+      console.log("Fetch failed");
+    });
+
+  tmpWdgt.updated = true;
+  return tmpWdgt;
+}
diff --git a/src/components/taskbar/index.js b/src/components/taskbar/index.js
index c3df9fad6..fce04f5ae 100644
--- a/src/components/taskbar/index.js
+++ b/src/components/taskbar/index.js
@@ -87,12 +87,12 @@ const Taskbar = ()=>{
       <div className="taskcont">
         <div className="tasksCont" data-menu="task" data-side={tasks.align}>
           <div className="tsbar" onMouseOut={hidePrev}>
-            <Icon className="tsIcon" src='home' width={22} click='STARTOGG'/>
+            <Icon className="tsIcon hvlight" src='home' width={22} click='STARTOGG'/>
             {tasks.search?(
-              <Icon className="tsIcon" src='search' width={22} click='STARTSRC'/>
+              <Icon className="tsIcon hvlight searchIcon" src='search' width={22} click='STARTSRC'/>
             ):null}
             {tasks.widgets?(
-              <Icon className="tsIcon" src='widget' width={22} click='WIDGTOGG'/>
+              <Icon className="tsIcon hvlight" src='widget' width={22} click='WIDGTOGG'/>
             ):null}
             {tasks.apps.map((task,i)=>{
               var isHidden = apps[task.icon].hide;
@@ -100,7 +100,7 @@ const Taskbar = ()=>{
               return (
                 <div onMouseOver={(!isActive && !isHidden && showPrev) || null}
                   value={task.icon}>
-                  <Icon key={i} className="tsIcon" width={22}
+                  <Icon key={i} className="tsIcon hvlight" width={22}
                     open={isHidden?null:true} click={task.action}
                     active={isActive} payload="togg" src={task.icon} />
                 </div>
@@ -114,7 +114,7 @@ const Taskbar = ()=>{
               return key!="hz" && !apps[key].task && !apps[key].hide?(
                 <div onMouseOver={(!isActive && showPrev) || null}
                   value={apps[key].icon}>
-                  <Icon key={i} className="tsIcon" width={22}
+                  <Icon key={i} className="tsIcon hvlight" width={22}
                       active={isActive} click={apps[key].action}
                       payload="togg" open="true" src={apps[key].icon}/>
                 </div>
diff --git a/src/components/taskbar/taskbar.scss b/src/components/taskbar/taskbar.scss
index 398f2dd18..17e8bfe27 100644
--- a/src/components/taskbar/taskbar.scss
+++ b/src/components/taskbar/taskbar.scss
@@ -1,42 +1,55 @@
 .taskbar {
+  --bg1: rgba(243, 243, 243, 0.85);
+
   position: absolute;
   width: 100vw;
   height: 39px;
-  background: rgb(243 243 243 / 85%);
+  color: var(--dark-txt);
+  background: var(--bg1);
   -webkit-backdrop-filter: saturate(3) blur(20px);
   backdrop-filter: saturate(3) blur(20px);
   bottom: 0;
   z-index: 10000;
 }
 
+body[data-theme="dark"] {
+  .taskbar {
+    --bg1: rgba(32, 32, 32, 0.75);
+  }
+
+  .taskIcon,
+  .searchIcon img {
+    filter: invert(1);
+  }
+}
+
 .battery {
   display: inline-block;
-  position:relative;
-  margin-top: 2px;
+  position: relative;
+  display: flex;
 
-  i{
-    color: #222;
+  i {
+    color: #232323;
   }
 
-  .uicon{
+  .uicon {
     position: absolute;
-    margin-top: 24%;
+    margin-top: -24%;
     margin-left: -12%;
-    filter: drop-shadow(1px 1px #fefefe) invert(0.1);
+    z-index: 1;
+    filter: drop-shadow(1px 1px #fefefe) invert(0.14);
   }
 }
 
 .battery .fa {
-  font: normal normal normal 14px/2 FontAwesome;
+  font: normal normal normal FontAwesome;
+  font-size: 13px;
 }
 
-.battery .animate{
-  width:88%;
-  position:absolute;
-  left:0;
-  top:0;
+.battery .animate {
+  position: absolute;
   overflow: hidden;
-  z-index: -1;
+  z-index: 0;
   -webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
   transition: all 0.5s ease;
@@ -114,12 +127,7 @@
   background: rgba(254, 254, 254, 0);
   transform-origin: center;
   animation: popintro 800ms ease-in-out;
-
-  &:hover {
-    background: rgba(#fefefe, 0.64);
-    border-radius: 4px;
-    transition: all ease-in-out 200ms;
-  }
+  border-radius: 4px;
 
   &:after {
     content: "";
@@ -132,14 +140,14 @@
     background: #858585;
     transition: all 0.2s ease-in-out;
   }
-  
+
   &[data-open="true"]:after {
     width: 6px;
   }
 
   &[data-active="true"]:after {
     width: 12px;
-    background: #1f4dcd;
+    background: var(--clrPrm);
   }
 }
 
diff --git a/src/containers/applications/apps/about.js b/src/containers/applications/apps/about.js
index 1036cbfa5..77f483ae7 100644
--- a/src/containers/applications/apps/about.js
+++ b/src/containers/applications/apps/about.js
@@ -1,83 +1,84 @@
-import React, {useState, useEffect} from 'react';
-import {useSelector, useDispatch} from 'react-redux';
-import {Icon, Image, ToolBar} from '../../../utils/general';
+import React, { useState, useEffect } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { Icon, Image, ToolBar } from "../../../utils/general";
 
-export const AboutWin = ()=>{
-  const {abOpen} = useSelector(state=> state.desktop);
-  const {locked, booted} = useSelector(state => state.wallpaper);
-  const [open, setOpen] = useState(true && process.env.REACT_APP_ENV!="development");
-  const [timer, setTimer] = useState(localStorage.getItem('closeAbout')=="true"?0:6);
+export const AboutWin = () => {
+  const { abOpen } = useSelector((state) => state.desktop);
+  const { locked, booted } = useSelector((state) => state.wallpaper);
+  const [open, setOpen] = useState(true && process.env.REACT_APP_ENV != "development");
+  const [timer, setTimer] = useState(localStorage.getItem("closeAbout") == "true" ? 0 : 6);
   const dispatch = useDispatch();
 
-  const action = ()=>{
+  const action = () => {
     setOpen(false);
-    localStorage.setItem('closeAbout',true);
-    dispatch({type: "DESKABOUT", payload: false});
-  }
+    localStorage.setItem("closeAbout", true);
+    dispatch({ type: "DESKABOUT", payload: false });
+  };
 
-  useEffect(()=>{
-    if(timer>0 && !locked && booted){
-      setTimeout(()=>{
-        setTimer(timer-1)
-      }, 1000)
+  useEffect(() => {
+    if (timer > 0 && !locked && booted) {
+      setTimeout(() => {
+        setTimer(timer - 1);
+      }, 1000);
     }
-  }, [timer, locked, booted])
+  }, [timer, locked, booted]);
 
-  return open || abOpen?(
+  return open || abOpen ? (
     <div className="aboutApp floatTab dpShad">
-      <div className="py-1 px-2 bg-gray-100 text-xss">
+      <div className="py-1 aboutTop px-2 text-xss">
         <div className="">About</div>
       </div>
       <div className="windowScreen" data-dock="true">
         <div className="restWindow h-full flex flex-col items-center p-4">
-          {/* <Image src="windows11" free/> */}
-          {/* <div className="w-full h-px bg-gray-400 my-4"></div> */}
           <div className="abCont">
             <div>OS (In ReactJs)</div>
             <div>Version 11</div>
-            {/* <div>&copy; Blue Edge. All rights reserved.</div> */}
-            <br/>
+            <br />
             <div>
               This open source project is made in the hope to <mark>replicate the Windows 11 </mark>
               desktop experience on web, using standard web technologies like
               <mark> React, CSS, and JavaScript.</mark>
-              <br/><br/>
-              This <rediv>project is not in anyway affiliated with Microsoft</rediv> and
-              should <rediv>not be confused with Microsoft’s Operating System</rediv> or Products.
-              <br/><br/>
-              This is also not <a target="_blank" href="https://www.microsoft.com/en-in/windows-365">Windows 365 cloud PC</a>.
+              <br />
+              <br />
+              This <rediv>project is not in anyway affiliated with Microsoft</rediv> and should <rediv>not be confused with Microsoft’s Operating System</rediv> or Products.
+              <br />
+              <br />
+              This is also not{" "}
+              <a target="_blank" href="https://www.microsoft.com/en-in/windows-365">
+                Windows 365 cloud PC
+              </a>
+              .
             </div>
-            <br/>
+            <br />
             <div>
-              This project is licensed under <a target="_blank" href="https://github.com/blueedgetechno/win11React/blob/master/LICENSE">Creative Commons</a>.
+              This project is licensed under{" "}
+              <a target="_blank" href="https://github.com/blueedgetechno/win11React/blob/master/LICENSE">
+                Creative Commons
+              </a>
+              .
             </div>
             <div className="mt-1">
-              &nbsp;&nbsp;
-              &nbsp;&nbsp;
-              contact: <a target="_blank" href="mailto:blueedgetechno@gmail.com">blueedgetechno@gmail.com</a>
+              &nbsp;&nbsp; &nbsp;&nbsp; contact:{" "}
+              <a target="_blank" href="mailto:blueedgetechno@gmail.com">
+                blueedgetechno@gmail.com
+              </a>
             </div>
-            <br/>
-            <br/>
+            <br />
+            <br />
             <div>
-              <span>
-                Microsoft, Windows and Other demonstrated Products in this project
-                are trademarks of the Microsoft group of companies.
-              </span>
+              <span>Microsoft, Windows and Other demonstrated Products in this project are trademarks of the Microsoft group of companies.</span>
             </div>
-            <br/>
-            <br/>
-            <br/>
+            <br />
+            <br />
+            <br />
             <div className="okbtn">
-              <div className="bg-gray-100" data-allow={timer==0}
-                onClick={timer==0 && action}>
-                Ok, I understand {timer>0?(
-                  <span>{"("+timer+")"}</span>
-                ):null}
+              <div data-allow={timer == 0} onClick={timer == 0 && action}>
+                Ok, I understand {timer > 0 ? <span>{"(" + timer + ")"}</span> : null}
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
-  ):null;
-}
+  ) : null;
+};
diff --git a/src/containers/applications/apps/assets/spotify.ttf b/src/containers/applications/apps/assets/spotify.ttf
new file mode 100644
index 000000000..fecd4ad61
Binary files /dev/null and b/src/containers/applications/apps/assets/spotify.ttf differ
diff --git a/src/containers/applications/apps/assets/spotify.woff2 b/src/containers/applications/apps/assets/spotify.woff2
new file mode 100644
index 000000000..57bd11f22
Binary files /dev/null and b/src/containers/applications/apps/assets/spotify.woff2 differ
diff --git a/src/containers/applications/apps/assets/store.scss b/src/containers/applications/apps/assets/store.scss
index e8d7fef01..b0fa6acec 100644
--- a/src/containers/applications/apps/assets/store.scss
+++ b/src/containers/applications/apps/assets/store.scss
@@ -14,13 +14,13 @@
       left: 0;
       height: 50%;
       border-radius: 10px;
-      background: #2570ff;
+      background: var(--nav-blue);
     }
 
     &:hover,
     &[data-payload="true"] {
-      background: #ffffff;
-      color: #2570ff;
+      background: var(--nav-btn-hov);
+      color: var(--nav-blue);
     }
   }
 }
@@ -31,16 +31,16 @@
   overflow-y: hidden;
 
   &:after {
-    content: "";
-    width: 100%;
-    height: 100px;
-    position: absolute;
-    bottom: 0;
-    background: rgb(255,255,255);
-    background: -webkit-linear-gradient(bottom, #f4f4f4 10%, rgba(135, 135, 135, 0.4) 50%, rgba(0,0,0,0) 100%);
-    background: -o-linear-gradient(bottom, #f4f4f4 10%, rgba(135, 135, 135, 0.4) 50%, rgba(0,0,0,0) 100%);
-    background: linear-gradient(to top, #f4f4f4 10%, rgba(135, 135, 135, 0.4) 50%, rgba(0,0,0,0) 100%);
-  }
+      content: "";
+      width: 100%;
+      height: 100px;
+      position: absolute;
+      bottom: 0;
+      background: var(--bg-color);
+      background: -webkit-linear-gradient(bottom, var(--page-bg) 10%, #87888766 50%, #00000000 100%);
+      background: -o-linear-gradient(bottom, var(--page-bg) 10%, #87888766 50%, #00000000 100%);
+      background: linear-gradient(to top, var(--page-bg) 10%, #87888766 50%, #00000000 100%);
+    }
 }
 
 .panelName {
@@ -91,9 +91,10 @@
 
   .pagecont{
     border-radius: 6px;
-    background: #f9f9f9;
-    border: 1px solid #e2e2e2;
+    background: var(--page-bg);
+    border: 1px solid var(--page-bd-col);
     min-height: 100%;
+    overflow: hidden;
   }
 }
 
@@ -124,12 +125,13 @@
 }
 
 .ribcont {
-  background: rgba(255, 255, 255, 0.72);
+  background: var(--rib-bg);
   margin: auto 6px;
   height: auto;
   width: 120px;
   transform-origin: center;
   transition: all ease-in-out 200ms;
+  color: var(--dark-txt);
 
   &:hover{
     transform: scale(1.06);
@@ -152,10 +154,13 @@
   border: solid 1px #ccc;
   border-radius: 100px;
   margin-right: 16px;
+  color: var(--txt-col);
 
   &[value="true"]{
-    color: #0047ff;
-    border-color: #0047ff;
+    // color: #0047ff;
+    // border-color: #0047ff;
+    color: var(--nav-blue);
+    border-color: var(--nav-blue);
   }
 }
 
@@ -165,7 +170,7 @@
 }
 
 .appscont .ribcont{
-  background: #fdfdfd;
+  background: var(--rib2-bg);
   margin-right: 1em;
   margin-bottom: 2em;
   width: auto;
@@ -195,8 +200,9 @@
 
 .detailcont, .briefcont{
   border-radius: 6px;
-  background: #f9f9f9;
-  border: 1px solid #e2e2e2;
+  background: var(--det-bg);
+  border: 1px solid var(--page-bd-col);
+  color: var(--txt-col);
 }
 
 .instbtn{
@@ -211,7 +217,8 @@
 .instbtn:hover {
   background: #0157a2;
 }
-.instbtn:active ,  .instbtn:focus-visible{
+
+.instbtn:active , .instbtn:focus-visible{
   background: #03549b;
 }
 
@@ -245,9 +252,17 @@
   }
 
   & > div:nth-child(1){
-    border: 0 solid #ddd;
+    border: 0 solid var(--comp-txt);
     border-bottom-width: 1px;
   }
+
+  .bg-orange-200{
+    --bg-opacity: 0.8;
+  }
+}
+
+.reviewtxt{
+  color: var(--med-txt);
 }
 
 .downbar{
diff --git a/src/containers/applications/apps/calculator.js b/src/containers/applications/apps/calculator.js
index 4f03a3504..d563634ae 100644
--- a/src/containers/applications/apps/calculator.js
+++ b/src/containers/applications/apps/calculator.js
@@ -152,7 +152,7 @@ export const Calculator = ()=>{
       <div className="windowScreen flex flex-col" data-dock="true">
         <div className="flex pt-2">
           <div className="flex pl-2 items-center">
-            <Icon fafa="faBars" color="#222" width={14}/>
+            <Icon className="menuBars" fafa="faBars" color="#222" width={14}/>
             <div className="mx-4 font-semibold pb-1">Standard</div>
           </div>
         </div>
diff --git a/src/containers/applications/apps/edge.js b/src/containers/applications/apps/edge.js
index cd8abfcec..3ef00be50 100644
--- a/src/containers/applications/apps/edge.js
+++ b/src/containers/applications/apps/edge.js
@@ -115,21 +115,22 @@ export const EdgeMenu = ()=>{
       <div className="windowScreen flex flex-col">
         <div className="overTool flex">
           <Icon src={wnapp.icon} width={14} margin="0 6px"/>
-          <div className="btab bg-gray-100">
+          <div className="btab">
             <div>New Tab</div>
             <Icon fafa="faTimes" click={wnapp.action} payload="close" width={10}/>
           </div>
         </div>
         <div className="restWindow flex-grow flex flex-col">
-          <div
-            className="addressBar w-full bg-gray-100 h-10 flex items-center">
-            <Icon src="left" onClick={action} payload={4} width={14} ui margin="0 8px"/>
-            <Icon src="right" onClick={action} payload={5} width={14} ui margin="0 8px"/>
-            <Icon fafa="faRedo" onClick={action} payload={0} width={14} color="#343434" margin="0 8px"/>
-            <Icon fafa="faHome" onClick={action} payload={1} width={18} color="#343434" margin="0 16px"/>
+          <div className="addressBar w-full h-10 flex items-center">
+            <Icon className="edgenavicon" src="left" onClick={action}
+              payload={4} width={14} ui margin="0 8px"/>
+            <Icon className="edgenavicon" src="right" onClick={action}
+              payload={5} width={14} ui margin="0 8px"/>
+            <Icon fafa="faRedo" onClick={action} payload={0} width={14} margin="0 8px"/>
+            <Icon fafa="faHome" onClick={action} payload={1} width={18} margin="0 16px"/>
             <div className="addCont relative flex items-center">
               <input
-                className="ltShad w-full bg-gray-0 h-6 px-4 text-gray-900"
+                className="w-full h-6 px-4"
                 onKeyDown={action}
                 onChange={typing}
                 data-payload={3}
@@ -141,7 +142,7 @@ export const EdgeMenu = ()=>{
                   payload={2} width={14} margin="0 10px"/>
             </div>
           </div>
-          <div className="w-full bg-gray-100 py-2">
+          <div className="w-full bookbar py-2">
             <div className="flex">
               {Object.keys(iframes).map(mark=>{
                 return(
diff --git a/src/containers/applications/apps/explorer.js b/src/containers/applications/apps/explorer.js
index a67ff59bf..25ad5c8bf 100644
--- a/src/containers/applications/apps/explorer.js
+++ b/src/containers/applications/apps/explorer.js
@@ -18,7 +18,7 @@ export const Explorer = ()=>{
         zIndex: wnapp.z
       }} data-hide={wnapp.hide} id={wnapp.icon+"App"}>
       <ToolBar app={wnapp.action} icon={wnapp.icon}
-        name="File Explorer" bg="#f0f0f0"/>
+        name="File Explorer"/>
       <div className="windowScreen flex flex-col" data-dock="true">
         <div className="restWindow flex-grow flex flex-col">
           <div className="flex-grow grid place-items-center text-4xl font-semibold text-gray-600">
diff --git a/src/containers/applications/apps/notepad.js b/src/containers/applications/apps/notepad.js
index 18b806c68..2746b229b 100644
--- a/src/containers/applications/apps/notepad.js
+++ b/src/containers/applications/apps/notepad.js
@@ -15,7 +15,7 @@ export const Notepad = ()=>{
        zIndex: wnapp.z
        }} data-hide={wnapp.hide} id={wnapp.icon+"App"}>
       <ToolBar app={wnapp.action} icon={wnapp.icon}
-        name="Untitled - Notepad"/>
+        name="Untitled - Notepad" noinvert/>
       <div className="windowScreen flex flex-col" data-dock="true">
         <div className="flex text-xss pb-1 border-gray-200 border-0 border-b-2 border-solid">
           <div className="mx-2">File</div>
diff --git a/src/containers/applications/apps/store.js b/src/containers/applications/apps/store.js
index 41aa0a25b..4f386ac8e 100644
--- a/src/containers/applications/apps/store.js
+++ b/src/containers/applications/apps/store.js
@@ -166,7 +166,7 @@ const DownPage = ({action, apps})=>{
                 <Icon className={stars>2.5?"bluestar":""} fafa="faStar" width={6}/>
                 <Icon className={stars>3.5?"bluestar":""} fafa="faStar" width={6}/>
                 <Icon className={stars>4.5?"bluestar":""} fafa="faStar" width={6}/>
-                <div className="text-xss text-gray-800">{reviews}k</div>
+                <div className="text-xss">{reviews}k</div>
               </div>
               <div className="text-xss mt-8">{"Free"}</div>
             </div>
@@ -208,7 +208,7 @@ const DetailPage = ({app})=>{
           src={app.icon} err="img/asset/mixdef.jpg"/>
         <div className="flex flex-col items-center text-center relative">
           <div className="text-2xl font-semibold mt-6">{app.name}</div>
-          <div className="text-xs text-blue-800">Community</div>
+          <div className="text-xs text-blue-500">Community</div>
           {dstate==0?<div className="instbtn mt-12 mb-8 handcr"
                           onClick={download}>Get</div>:null}
           {dstate==1?<div className="downbar mt-12 mb-8"></div>:null}
@@ -257,7 +257,7 @@ const DetailPage = ({app})=>{
           <div className="text-xs font-semibold">Ratings and reviews</div>
           <div className="flex mt-4 items-center">
             <div className="flex flex-col items-center">
-              <div className="text-5xl text-gray-900 font-bold">{stars}</div>
+              <div className="text-5xl reviewtxt font-bold">{stars}</div>
               <div className="text-xss">{Math.round(reviews/100)/10}K RATINGS</div>
             </div>
             <div className="text-xss ml-6">
@@ -332,7 +332,7 @@ const FrontPage = (props)=>{
                   <Icon className="bluestar" fafa="faStar" width={6}/>
                   <Icon className={stars>3?"bluestar":""} fafa="faStar" width={6}/>
                   <Icon className={stars>4?"bluestar":""} fafa="faStar" width={6}/>
-                  <div className="text-xss text-gray-800">{1+x.charCodeAt(3)%5}k</div>
+                  <div className="text-xss">{1+x.charCodeAt(3)%5}k</div>
                 </div>
                 <div className="text-xss mt-8">{x.charCodeAt(4)%2?"Free":"Owned"}</div>
               </div>
@@ -361,7 +361,7 @@ const FrontPage = (props)=>{
                   <Icon className="bluestar" fafa="faStar" width={6}/>
                   <Icon className={stars>3?"bluestar":""} fafa="faStar" width={6}/>
                   <Icon className={stars>4?"bluestar":""} fafa="faStar" width={6}/>
-                  <div className="text-xss text-gray-800">{1+x.charCodeAt(3)%5}k</div>
+                  <div className="text-xss">{1+x.charCodeAt(3)%5}k</div>
                 </div>
                 <div className="text-xss mt-8">{x.charCodeAt(4)%2?"Free":"Owned"}</div>
               </div>
@@ -390,7 +390,7 @@ const FrontPage = (props)=>{
                   <Icon className="bluestar" fafa="faStar" width={6}/>
                   <Icon className={stars>3?"bluestar":""} fafa="faStar" width={6}/>
                   <Icon className={stars>4?"bluestar":""} fafa="faStar" width={6}/>
-                  <div className="text-xss text-gray-800">{1+x.charCodeAt(3)%5}k</div>
+                  <div className="text-xss">{1+x.charCodeAt(3)%5}k</div>
                 </div>
                 <div className="text-xss mt-8">{x.charCodeAt(4)%2?"Rent":"Owned"}</div>
               </div>
diff --git a/src/containers/applications/apps/terminal.js b/src/containers/applications/apps/terminal.js
index f618c5418..0e88ca1fd 100644
--- a/src/containers/applications/apps/terminal.js
+++ b/src/containers/applications/apps/terminal.js
@@ -24,7 +24,7 @@ export const WnTerminal = ()=>{
 
     if(pwd!="C:\\"){
       for (var i = 0; i < curr.length; i++) {
-        console.log(tdir);
+        // console.log(tdir);
         tdir = tdir[curr[i]];
       }
     }
diff --git a/src/containers/applications/apps/whiteboard.js b/src/containers/applications/apps/whiteboard.js
index 3206fb8ff..340229634 100644
--- a/src/containers/applications/apps/whiteboard.js
+++ b/src/containers/applications/apps/whiteboard.js
@@ -49,7 +49,7 @@ export const WhiteBoard = ()=>{
         zIndex: wnapp.z
       }} data-hide={wnapp.hide} id={wnapp.icon+"App"}>
       <ToolBar app={wnapp.action} icon={wnapp.icon}
-        name="Whiteboard" bg="#f9f9f9"/>
+        name="Whiteboard" bg="#f9f9f9" noinvert/>
       <div className="windowScreen flex flex-col" data-dock="true">
         <div className="restWindow flex-grow flex flex-col">
           <div className="clickCont">
diff --git a/src/containers/applications/index.js b/src/containers/applications/index.js
index bd442df2d..e37e447b3 100644
--- a/src/containers/applications/index.js
+++ b/src/containers/applications/index.js
@@ -3,7 +3,7 @@ import {useSelector, useDispatch} from 'react-redux';
 
 import './tabs.scss';
 import './tabs2.scss';
-import './wnapp.css';
+import './wnapp.scss';
 
 export * from './apps/whiteboard';
 export * from './apps/edge';
diff --git a/src/containers/applications/tabs.scss b/src/containers/applications/tabs.scss
index cef855b05..9511f5e80 100644
--- a/src/containers/applications/tabs.scss
+++ b/src/containers/applications/tabs.scss
@@ -116,8 +116,10 @@
     width: 176px;
     height: 100%;
     margin: 0 4px;
+    background: var(--bg1);
+    color: var(--txt-col);
     border-radius: 4px 4px 0 0;
-    box-shadow: 2px 0 2px rgba(80, 80, 80, 0.2);
+    box-shadow: 2px 0 2px var(--shd);
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -125,7 +127,7 @@
     font-size: 0.72em;
 
     .uicon {
-      color: #505050;
+      color: var(--gray-txt);
     }
   }
 }
@@ -138,14 +140,31 @@
   scroll-behavior: smooth;
 }
 
+.addressBar{
+  background: var(--bg1);
+
+  .uicon{
+    color: var(--med-txt);
+  }
+}
+
 .addCont {
   width: 80%;
 
   input {
     box-sizing: border-box;
+    background: var(--ipbar);
+    color: var(--txt-col);
+    border-radius: 4px;
+    border: solid 1px var(--comp-txt);
   }
 }
 
+.bookbar{
+  background: var(--bg1);
+  color: var(--txt-col);
+}
+
 .cmdcont{
   height: calc(100% - 24px);
 }
diff --git a/src/containers/applications/tabs2.scss b/src/containers/applications/tabs2.scss
index 79748c27e..609d6d7ad 100644
--- a/src/containers/applications/tabs2.scss
+++ b/src/containers/applications/tabs2.scss
@@ -8,15 +8,28 @@
 }
 
 .aboutApp {
+  --bg1: #eee;
+  --bg2: #f9f9f9;
+
   top: 12%;
   left: 30%;
   width: auto;
   height: auto;
   border-radius: 4px;
-  background: #eee;
+  color: var(--dark-txt);
+  background: var(--bg1);
   z-index: 0;
 }
 
+body[data-theme="dark"] .aboutApp {
+  --bg1: #1f2232;
+  --bg2: #16161f;
+}
+
+.aboutTop {
+  background: var(--bg2);
+}
+
 rediv {
   color: #eb4141;
   font-weight: 700;
@@ -56,27 +69,26 @@ rediv {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
-  // justify-content: flex-end;
   padding: 0 32px;
-  color: #333;
+  color: var(--dark-txt);
 }
 
 .eqCont {
   font-size: 0.22em;
-  color: #888;
+  color: var(--sat-txt);
 }
 
 .msrVal {
   display: flex;
   padding: 16px 0;
   font-size: 0.64em;
-  color: #888;
+  color: var(--sat-txt);
 
   div {
     margin: 0 24px;
 
     &:nth-child(n + 3) {
-      color: #111;
+      color: var(--txt-col);
       font-weight: 600;
     }
   }
@@ -95,16 +107,19 @@ rediv {
 
   &[data-err="true"] {
     .oper {
-      color: #aaa;
-      pointer-events: none;
-
-      &:nth-child(3) {
-        pointer-events: auto;
-        color: #444;
-      }
-
-      &:last-child {
-        color: #ccc;
+      &:nth-child(1),
+      &:nth-child(5),
+      &:nth-child(6),
+      &:nth-child(7),
+      &:nth-child(8),
+      &:nth-child(12),
+      &:nth-child(16),
+      &:nth-child(20),
+      &:nth-child(21),
+      &:nth-child(23) {
+        background: var(--err-bg);
+        color: var(--err-txt);
+        pointer-events: none;
       }
     }
   }
@@ -116,7 +131,8 @@ rediv {
   align-items: center;
   box-sizing: border-box;
   border: solid 1px rgb(0, 0, 0, 0.1);
-  background: #f9f9f9;
+  background: var(--bg2);
+  color: var(--dark-txt);
   font-size: 1.128em;
   cursor: pointer;
   border-radius: 4px;
@@ -125,26 +141,27 @@ rediv {
     pointer-events: none;
   }
 
-  &:active {
-    background: rgba(255, 255, 255, 0.5);
+  &:hover {
+    background: var(--bg3);
   }
 
   &:nth-child(-n + 8),
   &:nth-child(4n) {
-    background: rgba(255, 255, 255, 0.5);
-    color: #444;
+    background: var(--bg3);
+    color: var(--dark-txt);
 
-    &:active {
-      background: rgba(255, 255, 255, 0.2);
+    &:hover {
+      background: var(--bg2);
     }
   }
 
   &:last-child {
-    background: #0067c0;
-    color: white;
+    background: var(--clrPrm);
+    color: var(--bg1);
 
     &:hover {
-      background: #1975c5;
+      background: var(--clrPrm);
+      filter: brightness(0.9);
     }
   }
 
@@ -154,7 +171,7 @@ rediv {
 
   &:nth-child(4) {
     font-size: 1em;
-    color: #333;
+    color: var(--dark-txt);
   }
 
   &:nth-child(8) {
@@ -256,7 +273,7 @@ rediv {
 .abCont {
   font-size: 12px;
   width: 24rem;
-  color: #222;
+  color: var(--txt-col);
   font-weight: 500;
 
   mark {
@@ -266,7 +283,7 @@ rediv {
   }
 
   a {
-    color: #0068ff;
+    color: var(--clrPrm);
     text-decoration: underline;
     font-weight: 500;
   }
@@ -279,15 +296,16 @@ rediv {
   align-items: flex-end;
 
   div {
-    border: solid 1px #007efb;
+    border: solid 1px var(--clrPrm);
     padding: 2px 24px;
     border-radius: 4px;
     cursor: pointer;
+    background: var(--bg2);
 
     &[data-allow="false"] {
-      color: #888;
+      color: var(--sat-txt);
       cursor: not-allowed;
-      background: #ddd;
+      background: var(--comp-txt);
     }
   }
 }
@@ -428,8 +446,6 @@ rediv {
     flex-grow: 1;
     height: 100%;
     overflow: hidden;
-    // border: solid 4px red;
-    // box-sizing: border-box;
   }
 
   .vidwrap {
diff --git a/src/containers/applications/wnapp.css b/src/containers/applications/wnapp.css
deleted file mode 100644
index 2aee76158..000000000
--- a/src/containers/applications/wnapp.css
+++ /dev/null
@@ -1,61 +0,0 @@
-/*
-      www.OnlineWebFonts.Com
-*/
-@font-face {
-  font-family: "Spotify";
-  src: url("https://db.onlinewebfonts.com/t/1ccdd11fd9d1d81756c40d7acb17d0aa.eot"); /* IE9*/
-  src: url("https://db.onlinewebfonts.com/t/1ccdd11fd9d1d81756c40d7acb17d0aa.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("https://db.onlinewebfonts.com/t/1ccdd11fd9d1d81756c40d7acb17d0aa.woff2") format("woff2"), /* chrome firefox */ url("https://db.onlinewebfonts.com/t/1ccdd11fd9d1d81756c40d7acb17d0aa.woff") format("woff"), /* chrome firefox */ url("https://db.onlinewebfonts.com/t/1ccdd11fd9d1d81756c40d7acb17d0aa.ttf") format("truetype"), /* chrome firefox opera Safari, Android, iOS 4.2+*/ url("https://db.onlinewebfonts.com/t/1ccdd11fd9d1d81756c40d7acb17d0aa.svg#Spotify") format("svg"); /* iOS 4.1- */
-}
-
-.edgeBrowser {
-  background: rgb(231, 234, 236);
-}
-
-.vscodeWn {
-  background: rgb(37, 37, 38);
-}
-
-.wnstore {
-  background: #f3f3f3;
-}
-
-.wnterm {
-  background: rgb(16, 16, 16);
-}
-
-.notepad {
-  background: #fefefe;
-}
-
-.calcApp {
-  background: hsla(0, 0%, 100%, 0.9);
-  -webkit-backdrop-filter: blur(21px);
-  backdrop-filter: blur(21px);
-}
-
-.msfiles,
-.whiteBoard {
-  background: #fefefe;
-}
-
-.spotify {
-  background: rgb(24, 24, 24);
-  /* background: linear-gradient(0deg, #1d1d1f 75%, #1e1e1f 100%); */
-  /* background: linear-gradient(0deg, #1d1d1f 75%, #2d2d2d 100%); */
-}
-
-.discordWn {
-  background: #36393f;
-}
-
-.lightWindow {
-  background: rgb(231, 234, 236);
-}
-
-.darkWindow {
-  background: rgb(25, 22, 20);
-}
-
-.wnCam {
-  background: #060606;
-}
diff --git a/src/containers/applications/wnapp.scss b/src/containers/applications/wnapp.scss
new file mode 100644
index 000000000..f7c7390e0
--- /dev/null
+++ b/src/containers/applications/wnapp.scss
@@ -0,0 +1,131 @@
+/*
+      www.OnlineWebFonts.Com
+*/
+@font-face {
+  font-family: "Spotify";
+  src: url("./apps/assets/spotify.woff2") format("woff2"), url("./apps/assets/spotify.ttf") format("truetype");
+}
+
+body {
+  --dark-txt: #000;
+  --txt-col: #222;
+  --med-txt: #3c3c3c;
+  --comp-txt: #ddd;
+  --gray-txt: #555;
+  --sat-txt: #777;
+  --clrPrm: #0067c0;
+}
+
+body[data-theme="dark"] {
+  --dark-txt: #fff;
+  --txt-col: #ddd;
+  --med-txt: #c3c3c3;
+  --comp-txt: #222;
+  --gray-txt: #aaa;
+  --sat-txt: #999;
+  --clrPrm: #4cc2ff;
+}
+
+.edgeBrowser {
+  --bg0: #e7eaec;
+  --bg1: #f7fafc;
+  --ipbar: #fefefe;
+  --shd: rgba(80, 80, 80, 0.2);
+  background: var(--bg0);
+}
+
+body[data-theme="dark"] .edgeBrowser {
+  --bg0: #222228;
+  --ipbar: #222228;
+  --bg1: rgb(45, 45, 51);
+  --shd: rgba(0, 0, 0, 0.3);
+
+  .edgenavicon{
+    filter: invert(1);
+  }
+}
+
+.vscodeWn {
+  background: rgb(37, 37, 38);
+}
+
+.wnstore {
+  --bg-color: #f3f3f3;
+  --nav-btn-hov: #ffffff;
+  --nav-blue: #2570ff;
+  --page-bg: #f4f4f4;
+  --page-bd-col: #e2e2e2;
+  --rib-bg: #ffffffb8;
+  --rib2-bg: #fdfdfd;
+  --det-bg: #f9f9f9;
+  background: var(--bg-color);
+}
+
+body[data-theme="dark"] .wnstore {
+  --bg-color: #1c2126;
+  --nav-btn-hov: #454545;
+  --nav-blue: #4cc2ff;
+  --page-bg: #24292c;
+  --page-bd-col: #292828;
+  --rib-bg: #2f2e30b8;
+  --rib2-bg: #2c2f32;
+  --det-bg: #282c32;
+  background: var(--bg-color);
+}
+
+.wnterm {
+  background: rgb(16, 16, 16);
+}
+
+.notepad {
+  background: #fefefe;
+}
+
+.calcApp {
+  --bg1: rgba(243, 243, 243, 0.9);
+  --bg2: #ffffff;
+  --bg3: #f9f9f9;
+  --err-bg: rgb(255, 255, 255, 0.1);
+  --err-txt: #999;
+  background: var(--bg1);
+  color: var(--dark-txt);
+  -webkit-backdrop-filter: blur(21px);
+  backdrop-filter: blur(21px);
+}
+
+body[data-theme="dark"] .calcApp {
+  --bg1: rgba(32, 32, 32, 0.9);
+  --bg2: rgba(255, 255, 255, 0.12);
+  --bg3: rgba(255, 255, 255, 0.08);
+  --err-bg: rgba(255, 255, 255, 0.033);
+  --err-txt: #777;
+
+  .menuBars {
+    filter: invert(1);
+  }
+}
+
+.msfiles,
+.whiteBoard {
+  background: var(--comp-txt);
+}
+
+.spotify {
+  background: rgb(24, 24, 24);
+}
+
+.discordWn {
+  background: #36393f;
+}
+
+.lightWindow {
+  background: #e7eaec;
+}
+
+.darkWindow {
+  background: #1a1614;
+}
+
+.wnCam {
+  background: #060606;
+}
diff --git a/src/containers/background/back.scss b/src/containers/background/back.scss
index 050bc8d46..e447f58d2 100644
--- a/src/containers/background/back.scss
+++ b/src/containers/background/back.scss
@@ -25,20 +25,17 @@
   place-items: center;
 }
 /* Loader css */
-
 #loader {
   position: relative;
   top: 0;
   left: 0;
-  /* height: 100%; */
-  /* width: 100%; */
   display: grid;
   text-align: center;
   align-items: center;
   justify-content: center;
 }
 
-.circledots {
+#dotcont {
   position: relative;
   top: 0;
   left: 0;
@@ -47,7 +44,7 @@
   height: 50px;
 }
 
-.circledots .circle {
+#dotcont .circle {
   position: absolute;
   width: 40px;
   height: 40px;
@@ -59,7 +56,7 @@
   animation-duration: 5.5s;
 }
 
-.circledots .circle:after {
+#dotcont .circle:after {
   content: '';
   position: absolute;
   width: 4px;
@@ -69,19 +66,19 @@
   background: #aaa;
 }
 
-.circledots .circle:nth-child(2) {
+#dotcont .circle:nth-child(2) {
   animation-delay: 240ms;
 }
 
-.circledots .circle:nth-child(3) {
+#dotcont .circle:nth-child(3) {
   animation-delay: 480ms;
 }
 
-.circledots .circle:nth-child(4) {
+#dotcont .circle:nth-child(4) {
   animation-delay: 720ms;
 }
 
-.circledots .circle:nth-child(5) {
+#dotcont .circle:nth-child(5) {
   animation-delay: 960ms;
 }
 @keyframes orbit {
@@ -142,7 +139,7 @@
   align-items: center;
   transition: all 1s ease-in-out;
 
-  &[data-unlock="true"]{
+  &[data-unlock="true"] {
     opacity: 0;
   }
 
@@ -203,7 +200,7 @@
     transform: translateY(0px);
   }
 
-  &[data-unlock="true"]{
+  &[data-unlock="true"] {
     opacity: 0;
   }
 
@@ -223,21 +220,21 @@
   }
 }
 
-.lockOpt{
+.lockOpt {
   margin-top: 10px;
 
-  .uicon{
+  .uicon {
     margin: 0 4px;
     cursor: pointer;
 
-    &[data-payload="true"]{
+    &[data-payload="true"] {
       box-sizing: border-box;
       border: 1px solid #888;
     }
   }
 }
 
-.slowfadein{
+.slowfadein {
   opacity: 1;
   animation: slowfadein 1s ease-in-out;
 }
diff --git a/src/containers/background/index.js b/src/containers/background/index.js
index eef545a05..2b28e75c1 100644
--- a/src/containers/background/index.js
+++ b/src/containers/background/index.js
@@ -56,7 +56,7 @@ export const BootScreen = (props) => {
       <div className={blackout?"hidden":""}>
         <Image src="asset/bootlogo" w={180}/>
         <div className="mt-48" id="loader">
-          <div clasName="circledots">
+          <div id="dotcont">
             <div className='circle'></div>
             <div className='circle'></div>
             <div className='circle'></div>
diff --git a/src/index.css b/src/index.css
index 11899f395..becaf5dc2 100644
--- a/src/index.css
+++ b/src/index.css
@@ -257,7 +257,7 @@ input {
 }
 
 .hvlight:hover {
-  background: rgba(255, 255, 255, 0.88);
+  background: rgba(255, 255, 255, 0.8);
   transition: all 200ms ease-in-out;
 }
 
@@ -266,6 +266,10 @@ input {
   transition: all 200ms ease-in-out;
 }
 
+body[data-theme="dark"] .hvlight:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
 a {
   text-decoration: none;
   color: #0080e1;
diff --git a/src/reducers/index.js b/src/reducers/index.js
index 0883b0b7e..1455b1bee 100644
--- a/src/reducers/index.js
+++ b/src/reducers/index.js
@@ -10,6 +10,7 @@ import widReducer from './widpane';
 import appReducer from './apps';
 import menusReducer from './menu';
 import globalReducer from './globals';
+import settReducer from './settings';
 
 const allReducers = combineReducers({
   wallpaper: wallReducer,
@@ -21,6 +22,7 @@ const allReducers = combineReducers({
   apps: appReducer,
   menus: menusReducer,
   globals: globalReducer,
+  setting: settReducer
 });
 
 var store = createStore(
diff --git a/src/reducers/menu.js b/src/reducers/menu.js
index 022862762..f3cfa443d 100644
--- a/src/reducers/menu.js
+++ b/src/reducers/menu.js
@@ -1,7 +1,7 @@
 const defState = {
   hide: true,
-  top: 272,
-  left: 430,
+  top: 80,
+  left: 360,
   opts: "desk",
   attr: null,
   dataset: null,
@@ -9,7 +9,8 @@ const defState = {
     desk: [
       {
         name: "View",
-        icon: "ui/view",
+        icon: "view",
+        type: "svg",
         opts: [
           {
             name: "Large icons",
@@ -39,7 +40,8 @@ const defState = {
       },
       {
         name: "Sort by",
-        icon: "ui/sort",
+        icon: "sort",
+        type: "svg",
         opts: [
           {
             name: "Name",
@@ -60,16 +62,17 @@ const defState = {
       },
       {
         name: "Refresh",
-        icon: "ui/refresh",
         action: "refresh",
+        type: "svg",
+        icon: "refresh",
       },
       {
         type: "hr",
       },
       {
         name: "New",
-        icon: "ui/new",
-        // dsb: true,
+        icon: "New",
+        type: "svg",
         opts: [
           {
             name: "Folder",
@@ -90,12 +93,13 @@ const defState = {
       },
       {
         name: "Display settings",
-        icon: "ui/display",
+        icon: "display",
+        type: "svg",
       },
       {
         name: "Personalize",
-        icon: "ui/personalize",
-        // dsb: true,
+        icon: "personalize",
+        type: "svg",
       },
       {
         type: "hr",
@@ -116,13 +120,6 @@ const defState = {
         icon: "win/info",
         payload: true,
       },
-      {
-        type: "hr",
-      },
-      {
-        name: "Show more options",
-        icon: "ui/more",
-      },
     ],
     task: [
       {
diff --git a/src/reducers/settings.js b/src/reducers/settings.js
new file mode 100644
index 000000000..f1818424d
--- /dev/null
+++ b/src/reducers/settings.js
@@ -0,0 +1,81 @@
+import {
+  desktopApps
+} from '../utils';
+
+const defState = {
+  system: {
+    power: {
+      saver: {
+        state: false
+      }
+    },
+    display: {
+      brightness: 100,
+      nightlight: {
+        state: false
+      },
+      connect: false
+    }
+  },
+  person: {
+    theme: "light",
+    color: "blue"
+  },
+  devices: {
+    bluetooth: false
+  },
+  network: {
+    wifi: {
+      state: true
+    },
+    airplane: false
+  },
+  privacy: {
+    location: {
+      state: false
+    }
+  }
+}
+
+document.body.dataset.theme = defState.person.theme
+
+const changeVal = (obj, path, val="togg")=>{
+  var tmp = obj
+  path = path.split(".")
+  for (var i = 0; i < path.length - 1; i++) {
+    tmp = tmp[path[i]]
+  }
+
+  if(val=="togg"){
+    tmp[path[path.length-1]] = !tmp[path[path.length-1]]
+  }else{
+    tmp[path[path.length-1]] = val
+  }
+
+  return obj
+}
+
+const settReducer = (state = defState, action) => {
+  var tmpState = {...state}, changed = false
+  switch (action.type) {
+    case 'STNGTHEME':
+      changed = true
+      tmpState.person.theme = action.payload
+      break
+    case 'STNGTOGG':
+      changed = true
+      tmpState = changeVal(tmpState, action.payload)
+      break
+    case 'STNGSETV':
+      changed = true
+      tmpState = changeVal(tmpState,action.payload.path,action.payload.value)
+      break
+    case 'SETTLOAD':
+      tmpState = {... action.payload}
+  }
+
+  if(changed) localStorage.setItem("setting", JSON.stringify(tmpState))
+  return tmpState;
+}
+
+export default settReducer;
diff --git a/src/reducers/sidepane.js b/src/reducers/sidepane.js
index ef738635e..8151122eb 100644
--- a/src/reducers/sidepane.js
+++ b/src/reducers/sidepane.js
@@ -1,68 +1,66 @@
 const defState = {
-  quicks: [
-    {
+  quicks: [{
       ui: true,
       src: "wifi",
       name: "WiFi",
-      state: true,
-    },
-    {
+      state: "network.wifi.state",
+      action: "STNGTOGG"
+    },{
       ui: true,
       src: "bluetooth",
       name: "Bluetooth",
-      state: false,
-    },
-    {
+      state: "devices.bluetooth",
+      action: "STNGTOGG"
+    },{
       ui: true,
       src: "airplane",
       name: "Airplane Mode",
-      state: false,
-    },
-    {
+      state: "network.airplane",
+      action: "STNGTOGG"
+    },{
       ui: true,
       src: "saver",
       name: "Battery Saver",
-      state: false,
-    },
-    {
+      state: "system.power.saver.state",
+      action: "STNGTOGG"
+    },{
       ui: true,
-      src: "moon",
-      name: "Focus assist",
-      state: false,
-    },
-    {
+      src: "sun",
+      name: "Theme",
+      state: "person.theme",
+      action: "changeTheme"
+    },{
       ui: true,
       src: "location",
       name: "Location",
-      state: false,
-    },
-    {
+      state: "privacy.location.state",
+      action: "STNGTOGG"
+    },{
       ui: true,
       src: "nightlight",
       name: "Night Light",
-      state: false,
-    },
-    {
+      state: "system.display.nightlight.state",
+      action: "STNGTOGG"
+    },{
       ui: true,
       src: "connect",
       name: "Connect",
-      state: false,
-    },
-    {
+      state: "system.display.connect",
+      action: "STNGTOGG"
+    },{
       ui: true,
       src: "project",
-      name: "Project",
-      state: false,
-    },
+      name: "Project"
+    }
   ],
   hide: true,
   calhide: true,
 };
 
 const paneReducer = (state = defState, action) => {
-  if (action.type == "PANEQBTN") {
+  if (action.type == "PANETHEM") {
     var tmpState = { ...state };
-    tmpState.quicks[action.payload].state = !tmpState.quicks[action.payload].state;
+    tmpState.quicks[4].src = action.payload;
     return tmpState;
   } else if (action.type == "PANETOGG") {
     return { ...state, hide: !state.hide };
diff --git a/src/reducers/wallpaper.js b/src/reducers/wallpaper.js
index 53f00f8c7..54dfd4083 100644
--- a/src/reducers/wallpaper.js
+++ b/src/reducers/wallpaper.js
@@ -25,8 +25,8 @@ const walls = [
 const defState = {
   wps: wps,
   src: walls[wps],
-  locked: !(locked=='false'),
-  booted: false || process.env.REACT_APP_ENV=="development",
+  locked: !(locked == 'false'),
+  booted: false || process.env.REACT_APP_ENV == "development",
   act: '',
   dir: 0
 }
@@ -63,6 +63,11 @@ const wallReducer = (state = defState, action) => {
         ...state, booted: false, dir: -1,
           locked: true, act: 'shutdn'
       };
+    case 'WALLSET':
+      return {
+        ...state, wps: action.payload,
+        src: walls[action.payload]
+      };
     default:
       return state
   }
diff --git a/src/utils/general.js b/src/utils/general.js
index 595fbf55a..aba77dedb 100644
--- a/src/utils/general.js
+++ b/src/utils/general.js
@@ -218,7 +218,7 @@ export const ToolBar = (props)=>{
   return (
     <div className="toolbar" style={{
       background: props.bg
-    }} data-float={props.float!=null}>
+    }} data-float={props.float!=null} data-noinvert={props.noinvert!=null}>
       <div className="topInfo flex flex-grow items-center"
         data-float={props.float!=null} onClick={toolClick}>
         <Icon src={props.icon} width={14}/>
diff --git a/src/utils/general.scss b/src/utils/general.scss
index 3814b84ab..73fdeb16e 100644
--- a/src/utils/general.scss
+++ b/src/utils/general.scss
@@ -5,6 +5,7 @@
   justify-content: space-between;
   align-items: center;
   position: relative;
+  // background: inherit;
 
   &[data-float="false"]{
     z-index: 10;
@@ -199,3 +200,28 @@
 .imageCont.rounded{
   overflow: hidden;
 }
+
+body[data-theme="dark"] .toolbar[data-noinvert="false"]{
+
+  .snapcont{
+    background: #222;
+
+    .snapper{
+      background: #444;
+      border: solid 1px #333;
+      &:hover{
+        background: #0066ff;
+      }
+    }
+  }
+
+  .appFullName{
+    color: #fefefe;
+  }
+
+  .actbtns{
+    .uicon img{
+      filter: invert(1);
+    }
+  }
+}
diff --git a/src/utils/icons.js b/src/utils/icons.js
index e4d329e76..67303f9c5 100644
--- a/src/utils/icons.js
+++ b/src/utils/icons.js
@@ -1,127 +1,227 @@
-'use babel';
-import React from 'react'
+"use babel";
+import React from "react";
 
 export const home = (props) => {
   return (
-    <svg
-    viewBox="0 0 512 512"
-    width={24}
-    height={24}
-    {...props}>
-    <path
-      d="M448 463.746H298.667V314.413h-85.334v149.333H64V148.318L256 36.572l192 110.984v316.19z"
-      fill="currentColor"
-    />
-  </svg>
-  )
-}
+    <svg viewBox="0 0 512 512" width={24} height={24} {...props}>
+      <path d="M448 463.746H298.667V314.413h-85.334v149.333H64V148.318L256 36.572l192 110.984v316.19z" fill="currentColor" />
+    </svg>
+  );
+};
 
 export const shuffle = (props) => {
   return (
-    <svg
-      viewBox="0 0 16 16"
-      height={16}
-      width={16}
-      {...props}>
+    <svg viewBox="0 0 16 16" height={16} width={16} {...props}>
       <path d="M4.5 6.8l.7-.8C4.1 4.7 2.5 4 .9 4v1c1.3 0 2.6.6 3.5 1.6l.1.2zm7.5 4.7c-1.2 0-2.3-.5-3.2-1.3l-.6.8c1 1 2.4 1.5 3.8 1.5V14l3.5-2-3.5-2v1.5zm0-6V7l3.5-2L12 3v1.5c-1.6 0-3.2.7-4.2 2l-3.4 3.9c-.9 1-2.2 1.6-3.5 1.6v1c1.6 0 3.2-.7 4.2-2l3.4-3.9c.9-1 2.2-1.6 3.5-1.6z" />
     </svg>
-  )
-}
+  );
+};
 
 export const previous = (props) => {
   return (
-    <svg
-      height={16}
-      width={16}
-      viewBox="0 0 16 16"
-      {...props}>
+    <svg height={16} width={16} viewBox="0 0 16 16" {...props}>
       <path d="M13 2.5L5 7.119V3H3v10h2V8.881l8 4.619z" />
     </svg>
-  )
-}
+  );
+};
 
 export const next = (props) => {
   return (
-    <svg
-      height={16}
-      width={16}
-      viewBox="0 0 16 16"
-      {...props}>
+    <svg height={16} width={16} viewBox="0 0 16 16" {...props}>
       <path d="M11 3v4.119L3 2.5v11l8-4.619V13h2V3z" />
     </svg>
-  )
-}
+  );
+};
 
 export const repeat = (props) => {
   return (
-    <svg
-      height={16}
-      width={16}
-      viewBox="0 0 16 16"
-      {...props}>
+    <svg height={16} width={16} viewBox="0 0 16 16" {...props}>
       <path d="M5.5 5H10v1.5l3.5-2-3.5-2V4H5.5C3 4 1 6 1 8.5c0 .6.1 1.2.4 1.8l.9-.5C2.1 9.4 2 9 2 8.5 2 6.6 3.6 5 5.5 5zm9.1 1.7l-.9.5c.2.4.3.8.3 1.3 0 1.9-1.6 3.5-3.5 3.5H6v-1.5l-3.5 2 3.5 2V13h4.5C13 13 15 11 15 8.5c0-.6-.1-1.2-.4-1.8z" />
     </svg>
-  )
-}
+  );
+};
 
 export const play = (props) => {
   return (
-    <svg
-      height={16}
-      width={16}
-      viewBox="0 0 16 16"
-      {...props}
-    >
+    <svg height={16} width={16} viewBox="0 0 16 16" {...props}>
       <path d="M4.018 14L14.41 8 4.018 2z" />
     </svg>
-  )
-}
+  );
+};
 
 export const pause = (props) => {
   return (
-    <svg
-      height={16}
-      width={16}
-      viewBox="0 0 16 16"
-      {...props}
-    >
+    <svg height={16} width={16} viewBox="0 0 16 16" {...props}>
       <path fill="none" d="M0 0h16v16H0z" />
       <path d="M3 2h3v12H3zm7 0h3v12h-3z" />
     </svg>
-  )
-}
+  );
+};
 
 export const search = (props) => {
   return (
-    <svg
-      height={24}
-      width={24}
-      viewBox="0 0 512 512"
-      aria-hidden="true"
-      {...props}
-    >
-      <path
-        d="M349.714 347.937l93.714 109.969-16.254 13.969-93.969-109.969q-48.508 36.825-109.207 36.825-36.826 0-70.476-14.349t-57.905-38.603-38.603-57.905-14.349-70.476 14.349-70.476 38.603-57.905 57.905-38.603 70.476-14.349 70.476 14.349 57.905 38.603 38.603 57.905 14.349 70.476q0 37.841-14.73 71.619t-40.889 58.921zM224 377.397q43.428 0 80.254-21.461t58.286-58.286 21.461-80.254-21.461-80.254-58.286-58.285T224 57.397t-80.254 21.46-58.285 58.285-21.46 80.254 21.46 80.254 58.285 58.286T224 377.397z"
-        fill="currentColor"
-      />
-    </svg>
-  )
-}
+    <svg height={24} width={24} viewBox="0 0 512 512" aria-hidden="true" {...props}>
+      <path d="M349.714 347.937l93.714 109.969-16.254 13.969-93.969-109.969q-48.508 36.825-109.207 36.825-36.826 0-70.476-14.349t-57.905-38.603-38.603-57.905-14.349-70.476 14.349-70.476 38.603-57.905 57.905-38.603 70.476-14.349 70.476 14.349 57.905 38.603 38.603 57.905 14.349 70.476q0 37.841-14.73 71.619t-40.889 58.921zM224 377.397q43.428 0 80.254-21.461t58.286-58.286 21.461-80.254-21.461-80.254-58.286-58.285T224 57.397t-80.254 21.46-58.285 58.285-21.46 80.254 21.46 80.254 58.285 58.286T224 377.397z" fill="currentColor" />
+    </svg>
+  );
+};
 
-export const camera = (props)=>{
-  return (
-    <svg
-      height={24}
-      width={24}
-      viewBox="0 0 32 32"
-      xmlSpace="preserve"
-      {...props}
-    >
+export const camera = (props) => {
+  return (
+    <svg height={24} width={24} viewBox="0 0 32 32" xmlSpace="preserve" {...props}>
       <g clipRule="evenodd" fill="#222" fillRule="evenodd">
         <path d="M16 10.001a8 8 0 00-8 8 8 8 0 1016 0 8 8 0 00-8-8zm4.555 11.905a5.998 5.998 0 01-8.459.65 5.997 5.997 0 01-.65-8.459 6 6 0 019.109 7.809z" />
         <path d="M16 14.001A4 4 0 0012 18v.002a.5.5 0 001 0V18a3 3 0 013-2.999.5.5 0 000-1z" />
         <path d="M29.492 9.042l-4.334-.723-1.373-3.434A2.988 2.988 0 0021 3H11a2.99 2.99 0 00-2.786 1.886L6.842 8.319l-4.333.723A2.989 2.989 0 000 12v15c0 1.654 1.346 3 3 3h26c1.654 0 3-1.346 3-3V12a2.989 2.989 0 00-2.508-2.958zM30 27a1 1 0 01-1 1H3a1 1 0 01-1-1V12a1 1 0 01.836-.986l5.444-.907 1.791-4.478C10.224 5.25 10.591 5 11 5h10c.408 0 .775.249.928.629l1.791 4.478 5.445.907A1 1 0 0130 12v15z" />
       </g>
     </svg>
-  )
-}
+  );
+};
+
+export const view = (props) => {
+  return (
+    <svg fill="none" stroke-width="1.5" viewBox="0 0 24 24" {...props}>
+      <path stroke="currentColor" d="M14 20.4v-5.8c0-.3.3-.6.6-.6h5.8c.3 0 .6.3.6.6v5.8c0 .3-.3.6-.6.6h-5.8a.6.6 0 01-.6-.6zM3 20.4v-5.8c0-.3.3-.6.6-.6h5.8c.3 0 .6.3.6.6v5.8c0 .3-.3.6-.6.6H3.6a.6.6 0 01-.6-.6zM14 9.4V3.6c0-.3.3-.6.6-.6h5.8c.3 0 .6.3.6.6v5.8c0 .3-.3.6-.6.6h-5.8a.6.6 0 01-.6-.6zM3 9.4V3.6c0-.3.3-.6.6-.6h5.8c.3 0 .6.3.6.6v5.8c0 .3-.3.6-.6.6H3.6a.6.6 0 01-.6-.6z" />
+    </svg>
+  );
+};
+export const sort = (props) => {
+  return (
+    <svg viewBox="0 0 416 330" {...props}>
+      <path stroke="currentColor" fill="currentColor" d="M124 1h8l6 2 4 3 106 107 4 8v9l-2 5-5 6-8 4h-9l-8-4-71-71-1 144-1 1v81q-2 8-8 12l-6 3h-11q-8-3-12-8l-2-3-1-3v-5l-1-1V133l1-1V70l-69 69-3 4-8 4H17l-10-5v-1l-5-7-1-8q2-1 1-5l3-5L116 5l8-4z" />
+      <path fill="var(--clrPrm)" stroke="var(--clrPrm)" d="M284 17h12q7 3 11 9l3 6 1 226 70-71 9-5h12l5 2 7 8 2 4v14l-3 6-110 110-5 3q-4-1-4 1h-9l-7-3-4-3-108-107-4-8v-11l3-7 6-6 6-3h13l6 3 72 72V33l2-5 6-7 8-4z" />
+    </svg>
+  );
+};
+export const refresh = (props) => {
+  return (
+    <svg viewBox="0 0 64 64" {...props}>
+      <path stroke="currentColor" fill="currentColor" d="M52.36 2.42c1.13-.78 3.1.11 3.01 1.58.16 4.63.24 9.29-.06 13.92-1.33 1.78-3.92 1.84-5.83 2.7-2.86.88-5.63 2.05-8.55 2.73-2.24.82-3.57-2.75-1.56-3.76 3.12-1.45 6.55-2.08 9.7-3.46-4.53-5.47-12.03-8.07-19.02-7.52-7.45.53-14.44 4.97-18.24 11.38-3.59 5.9-4.28 13.42-1.95 19.9 2.06 5.83 6.52 10.78 12.13 13.38 6.52 3.08 14.48 2.94 20.86-.43 6.41-3.32 11.14-9.75 12.27-16.9.69-3.14-.13-6.37.28-9.52 1.08-1 2.2-1.08 3.38-.25.99 1.78.87 3.87.92 5.83.09 8.42-4.09 16.75-10.83 21.79-5.85 4.49-13.59 6.43-20.87 5.25-9.43-1.37-17.82-8.13-21.22-17.02-3.85-9.35-1.81-20.75 4.95-28.25C18.12 6.4 28.59 2.98 38.11 5.12c4.88.92 9.11 3.7 13.03 6.61.17-2.8-.15-5.63.26-8.41l.96-.9z" />
+    </svg>
+  );
+};
+export const New = (props) => {
+  return (
+    <svg viewBox="0 0 500 500" {...props}>
+      <path fill="var(--clrPrm)" stroke="var(--clrPrm)" d="M245 151h11q4 2 7 6l3 6v71h72q6 2 9 7l2 4v11l-5 7-6 3h-72v72q-2 6-6 9l-4 2h-11l-8-5-3-6v-72h-71q-7-2-10-6l-2-4v-11q2-5 6-8l6-3h71v-71q2-7 7-10l4-2z" />
+      <path stroke="currentColor" fill="currentColor" d="M249 26q3-1 4 1h19l1 1h7l1 1h6l6 2h5l1 1 11 2 4 2h3l6 3 13 4 21 10 21 13 17 13 17 17 17 20 11 16 5 10 2 2 12 26 6 18v3l2 4 1 8 1 1v4l1 1v4l1 1 1 14 1 1v19q2 0 1 4l-1 1v18l-1 1v8l-1 1v6l-1 1-2 14-1 1v3l-2 4v3l-6 18-5 10v2l-7 14-13 21-13 17-16 17-20 17-16 11-10 5-2 2-26 12-21 7h-3l-5 2h-4l-1 1h-4l-1 1h-4l-1 1-14 1-1 1h-19q-1 2-4 1l-1-1h-19l-1-1h-7l-1-1h-6l-1-1-14-2-1-1-10-2-18-6-3-2h-2l-21-10-21-13-17-13-17-15-18-21-11-16-5-10-2-2-10-21-5-16-2-3-1-7-3-8-2-14-1-1-1-14-1-1v-19q-2-1-1-4l1-1v-19l1-1v-7l1-1v-6l1-1 2-14 4-12v-3l2-3 3-11 5-10v-2l7-14 13-21 13-17 16-17 21-18 16-11 10-5 2-2 21-10 16-5 3-2 7-1 8-3h4l1-1h4l6-2h6l1-1h7l1-1h19l1-1zm-13 31l-1 1h-9l-1 1h-6l-1 1h-4l-1 1h-4l-9 3h-3l-15 5-3 2h-2l-7 4h-2q-31 15-53 37-25 24-41 58v2l-5 10-5 15-2 11-1 1v4l-1 1v4l-1 1v6l-1 1v9l-1 1v29l1 1v9l1 1v6l1 1v4l1 1v4l3 9v3l5 15 5 10v2l10 19q12 19 28 36 23 24 56 39h2l7 4h2l3 2 15 5 11 2 1 1h4l1 1 12 1 1 1h8l1 1h29l1-1 15-1 1-1h5l1-1h4l9-3h3l15-5 24-11 10-6q17-11 32-25l13-14 10-13 12-19 5-10v-2l4-7v-2l2-3 5-15 2-11 1-1v-4l1-1 1-12 1-1v-9l1-1v-28l-1-1-1-15-1-1v-5l-1-1v-4l-3-9v-3l-5-15-11-24-6-10q-11-19-26-33-17-18-38-31l-19-10h-2l-10-5-15-5-11-2-1-1h-4l-1-1h-4l-1-1h-6l-1-1h-9l-1-1h-29z" />
+    </svg>
+  );
+};
+export const display = (props) => {
+  return (
+    <svg viewBox="0 0 500 500" {...props}>
+      <path stroke="currentColor" fill="currentColor" d="M243.5 37h210l18 6L485 53.5l6 8 5 10 3 9v10l1 1v255l-1 1v10l-3 9-5 10-8.5 10.5-8 6-10 5-6 1-1 1h-4l-1 1H345v62h46.5q6.8 2.3 10.5 7.5l3 8v5l-3 7-4.5 4.5-6 3h-258l-5-2-5.5-5.5-3-7v-7l5.5-9.5 8-4H180v-62H71.5l-1-1-8-1-9-4-9-6-5.5-5.5-10-16-3-9v-6l-1-1v-92l.5-.5 4 4 12 8 18.5 9.5v70l3 7 5.5 5.5 5 2h378q6.8-2.3 10.5-7.5l3-8v-261l-3-8-5.5-5.5-5-2h-188l-1.5-1.5-6-14-12-18-.5-2.5zM214 401v62h96v-62h-96z" />
+      <path fill="var(--clrPrm)" stroke="var(--clrPrm)" d="M105.5 0h28l1 1h6.5q-.8 2.6 1 3.5v4l1 1v3l1 1v3l1 1v3l2 6 7 12 6.5 6.5 7 5 12 5q4-1 5 1h12l1-1h4l4-2h3l7-3h3L230 66.5l6 12 3 10-15 15-7 12-1 6-1 1v4l-1 1v13l1 1v4l3 9 4 7 17 18-8 20-12.5 18.5-9-3h-3l-4-2h-3l-1-1h-16l-14 5-12.5 9.5-5 7-5 10v3l-3 9-1 7-1 1v3.5h-8.5l-1 1h-24l-1-1H99l-1-2.5v-3l-1-1v-3l-1-1-1-8-3-9-6-10-8.5-8.5-13-7h-3l-5-2h-16l-4 2h-3l-12 4L11 203.5l-7-14-1-5-2-3v-3l12-11 7-10 3-7 1-6 1-1v-4l1-1v-9l-1-1-1-9-5-11q-7.4-11.6-18-20v-2l10-22 9-13V50l7.5 1 7 3 8 1 1 1h11q1.3-2.3 6-1l10-5h2L85 39.5l7-11 3-9v-3l1-1v-4l2-5v-4L99.5 1q4.8 1.3 6-1zm8.5 98l-6 2-9 5-9 10-5 12v14q2 0 1 4l4 9 3 4 5 4 8 5 6 2h5l1 1 14-2 8-4 4-4h1v-1q5-5 8-12l1-7 1-1v-9q-2-1-1-5l-2-6-6-9q-5-7-13-10l-6-2h-13z" />
+    </svg>
+  );
+};
+export const personalize = (props) => {
+  return (
+    <svg viewBox="0 0 500 500" {...props}>
+      <path stroke="currentColor" fill="currentColor" d="M449.95 39.46c3.99-.83 8.16-1.78 12.22-.8 5.49 1.38 11.18 3.89 14.17 8.98 4.85 7.83 3.75 17.6 1.21 26.02-6.16 20.19-17.58 38.2-29.21 55.62-24.35 35.07-51.89 67.84-80.51 99.44-3.08 4.23-7.21 7.53-10.43 11.64-3.64 4.69-8.34 8.4-12.08 12.99-4.88 6.06-10.81 11.15-16 16.92-2.33 3-4.95 5.75-7.66 8.4l-44.02 44.03c-8.61 8.78-18.19 16.49-27.16 24.88-12.11 9.74-24.12 20.08-38.52 26.3-2.15 1.28-4.63.58-6.94.4.05-3.33.3-6.75-.71-9.98l-.53-2.66-1.03-3.1c-1.1-2.26-2.19-4.53-3.46-6.7 1.1-1.95 2.21-4.04 4.25-5.17 13.79-8.14 25.98-18.66 37.86-29.32 6.1-6.6 13.33-11.98 19.52-18.48 8.16-7.52 15.84-15.52 23.63-23.43 10.14-10.81 21.16-20.79 30.83-32.05 10.28-10.1 19.67-21.02 29.49-31.54 26.94-30.26 53.17-61.26 76.78-94.21 9.24-13.65 18.54-27.33 25.97-42.06.92-2.06 1.64-4.21 2.39-6.34-10.03 2.88-18.56 9.14-27.41 14.43-39.57 25.13-75.24 55.75-110.49 86.49-5.51 5.49-11.55 10.4-17.09 15.85-5.25 4.07-9.53 9.2-14.76 13.29-7.87 7.11-14.84 15.18-23.05 21.92l-37.53 37.42c-14.75 16.31-30.44 31.96-42.75 50.31-2.07 3.03-3.51 6.52-6.08 9.19-1.73.61-3.57.73-5.37.94-.21-.07-.63-.23-.84-.31l-4.25-1.56-1.75-.47-3.97-1.17c-3.67-.79-7.61-1.12-11.2.17-.1-4.72 2.12-9 4.1-13.14 9.86-18.08 23.91-33.32 37.35-48.73 5.05-5.24 10.48-10.13 15.01-15.85l28-28.13c9.93-8.4 18.6-18.15 28.14-26.96 5.48-4.09 9.69-9.58 15.09-13.75 4.6-3.76 8.31-8.48 13.09-12.03 39.79-35.51 80.45-70.53 125.54-99.3 12.57-7.67 25.63-15.21 40.16-18.39z" />
+      <path fill="var(--clrPrm)" stroke="var(--clrPrm)" d="M143.47 315.74c3.59-1.29 7.53-.96 11.2-.17l3.97 1.17 1.75.47 4.25 1.56.84.31c3.41 2.71 7.71 4.54 9.98 8.45 4.85 3.76 8.96 8.4 13.18 12.84.65 1.31 1.67 2.33 2.98 2.99 2.91 2.47 5.74 5.14 7.67 8.48 1.27 2.17 2.36 4.44 3.46 6.7l1.03 3.1.53 2.66c1.01 3.23.76 6.65.71 9.98l-.94 2.26c-.35 2.29.64 5.01-.94 6.97-.26 1.66.25 3.61-.97 5-.21 1.34-.07 2.81-.89 3.99-.25 1.02-.58 2.02-1 3-.33 1.77-1.17 3.37-2.03 4.94-.42 2.22-1.55 4.18-2.56 6.17-.69 1.32-1.34 2.67-1.95 4.04-2.11 3.81-4.94 7.17-7.02 11-2.89 2.54-4.53 6.13-7.48 8.61-3.03 2.59-5.29 6.17-8.89 8.02l-3.73 3.44c-2.52 1.34-4.77 3.1-7.17 4.62l-2.08.86c-1.96 1.13-3.84 2.4-5.75 3.61-1.38.54-2.75 1.08-4.19 1.42l-1.99 1.06c-1.69.6-3.38 1.18-4.99 1.95-.96.42-1.94.77-2.95 1.05a45.67 45.67 0 0 1-2.99 1.01c-1.51.93-3.32.65-4.99.82-1.1 1.01-2.66.81-4.01 1.08-1.77 1.24-3.99.67-5.99.89-3.91 2.05-8.73.31-13.01.99-1.37 1.27-3.71 1.42-5.03-.01-3.92-.66-8.49 1.08-11.99-.99-1.99-.29-4.37.53-6-.96-1.67-.25-3.62.28-4.99-.95-1.35-.22-2.84-.06-4-.91-1.03-.24-2.03-.56-3-.98-1.03-.25-2.03-.58-3-1-1.02-.26-2.02-.58-2.99-.98-1.77-.36-3.37-1.19-4.95-2.03-2.51-.51-4.72-1.84-6.96-3.01l-2.05-.93c-1.63-1.04-3.21-2.17-4.94-3.05-3.56-1.98-6.68-4.65-10.27-6.57-1.55-1.46-2.93-3.26-5.01-3.99-3.6-3.72-7.71-7.02-10.75-11.23l-.86-3c-1.06-1.8-1.18-4.27.08-6 .18-1.34.3-2.69.73-3.97 1.59-2.35 3.52-4.54 6.04-5.88 2.93-2.11 6.52-1.64 9.91-1.71 2.2-1.85 5.39-.55 8-1.01 1.4-1.19 3.37-.8 4.96-1.57 1.04-.57 2.1-1.12 3.17-1.63 9.87-4.03 15.86-13.35 21.11-22.11.97-1.69 2.09-3.27 3.03-4.97.99-2.53 2.72-4.65 3.99-7.03.97-1.68 2.07-3.28 2.98-5 .97-1.68 2.08-3.28 2.99-4.99 2.74-4.76 6.41-8.89 9.58-13.35 5.16-5.16 10-10.8 16.32-14.57 1.74-.87 3.32-2.02 4.98-3.03 1.61-.77 3.23-1.56 4.79-2.44 1.35-.6 2.71-1.15 4.13-1.56.99-.36 1.99-.69 3-1 1.59-.74 3.47-.52 4.99-1.46 1.35-.29 2.92-.03 4.01-1.08 1.65-.12 3.31-.21 4.96-.39m3.05 28.32c-1.3 1.4-3.34.78-5 1.07-.95.53-1.96.92-3.02 1.18a27.46 27.46 0 0 1-3.05.93l-4.08 1.98c-1.71.96-3.32 2.1-5.03 3.05-7.2 6.34-13.32 13.77-18.12 22.09l-.86 2.07c-1.06 1.63-2.2 3.22-3.12 4.93-.95 2.55-2.74 4.64-3.97 7.04-.98 1.68-2.13 3.26-3.01 5.01-1.37 2.48-3.18 4.7-4.54 7.19-1.43 1.58-3.18 2.98-4.01 5.01-4.37 4.27-8.24 9.29-13.33 12.69-1.25 1.1-2.51 2.21-3.94 3.08-1.47.65-2.93 1.32-4.43 1.91l-.02.47 2.44.89 1.99 1.23 2 .29c.97.52 1.99.88 3.08 1.08l2.05 1.14c1.63.58 3.44.55 4.96 1.43l1.93.35c1.74 1.51 4.41.1 6.07 1.75 3.59.66 7.87-1.1 11.01 1.04 1.67-.11 3.71.59 4.99-.89 3.33-.14 6.65 0 9.98-.14 1.59-1.73 4.34-.18 6.01-1.77l1.99-.32c1.48-1.01 3.39-.71 4.94-1.56 1.62-.76 3.3-1.35 4.97-1.97l5.99-3.03 2.04-.93c9.83-6.22 18.74-14.41 24.29-24.75.55-1.1 1.29-2.08 2.04-3.03.25-1.02.54-2.02.86-3.01l1.15-1.97c.22-1.06.52-2.09.92-3.09.29-1.02.62-2.01 1-2.99.2-1.1.61-2.1 1.21-3.02l.2-3.98c1.8-2.28.57-5.47.89-8.13l-24.39-24.4c-1.7 0-3.39.02-5.08.08z" />
+    </svg>
+  );
+};
+export const terminal = (props) => {
+  return (
+    <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M0 13H16V6H2C0.9 6 0 6.9 0 8V13Z" fill="#CCCCCC" />
+      <path d="M32 6H16V13H32V6Z" fill="#999999" />
+      <path d="M48 13H32V6H46C47.1 6 48 6.9 48 8V13Z" fill="#666666" />
+      <path d="M46 42H2C0.9 42 0 41.1 0 40V12H48V40C48 41.1 47.1 42 46 42Z" fill="url(#paint0_linear)" />
+      <g filter="url(#filter0_dd)">
+        <path d="M15.2 24.3L6.39999 33.1C5.89999 33.6 5.89999 34.3 6.39999 34.7L8.19999 36.5C8.69999 37 9.4 37 9.8 36.5L18.6 27.7C19.1 27.2 19.1 26.5 18.6 26.1L16.8 24.3C16.4 23.9 15.6 23.9 15.2 24.3Z" fill="url(#paint1_linear)" />
+        <mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="6" y="24" width="13" height="13">
+          <path d="M15.2 24.3L6.39999 33.1C5.89999 33.6 5.89999 34.3 6.39999 34.7L8.19999 36.5C8.69999 37 9.4 37 9.8 36.5L18.6 27.7C19.1 27.2 19.1 26.5 18.6 26.1L16.8 24.3C16.4 23.9 15.6 23.9 15.2 24.3Z" fill="url(#paint2_linear)" />
+        </mask>
+        <g mask="url(#mask0)">
+          <g filter="url(#filter1_dd)">
+            <path d="M9.8 17.3L18.6 26.1C19.1 26.6 19.1 27.3 18.6 27.7L16.8 29.5C16.3 30 15.6 30 15.2 29.5L6.39999 20.7C5.89999 20.2 5.89999 19.5 6.39999 19.1L8.19999 17.3C8.59999 16.9 9.4 16.9 9.8 17.3Z" fill="url(#paint3_linear)" />
+          </g>
+        </g>
+        <path d="M9.8 17.3L18.6 26.1C19.1 26.6 19.1 27.3 18.6 27.7L16.8 29.5C16.3 30 15.6 30 15.2 29.5L6.39999 20.7C5.89999 20.2 5.89999 19.5 6.39999 19.1L8.19999 17.3C8.59999 16.9 9.4 16.9 9.8 17.3Z" fill="url(#paint4_linear)" />
+      </g>
+      <g filter="url(#filter2_dd)">
+        <path d="M40 32H24C23.4 32 23 32.4 23 33V36C23 36.6 23.4 37 24 37H40C40.6 37 41 36.6 41 36V33C41 32.4 40.6 32 40 32Z" fill="url(#paint5_linear)" />
+      </g>
+      <defs>
+        <filter id="filter0_dd" x="3.02499" y="15" width="18.95" height="25.875" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="0.5" />
+          <feGaussianBlur stdDeviation="0.5" />
+          <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" />
+          <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
+          <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feGaussianBlur stdDeviation="1.5" />
+          <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0" />
+          <feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow" />
+          <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape" />
+        </filter>
+        <filter id="filter1_dd" x="3.02499" y="15" width="18.95" height="18.875" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="0.5" />
+          <feGaussianBlur stdDeviation="0.5" />
+          <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" />
+          <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
+          <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feGaussianBlur stdDeviation="1.5" />
+          <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0" />
+          <feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow" />
+          <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape" />
+        </filter>
+        <filter id="filter2_dd" x="20" y="30" width="24" height="11" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="0.5" />
+          <feGaussianBlur stdDeviation="0.5" />
+          <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" />
+          <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
+          <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feGaussianBlur stdDeviation="1.5" />
+          <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0" />
+          <feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow" />
+          <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape" />
+        </filter>
+        <linearGradient id="paint0_linear" x1="36.4462" y1="47.8257" x2="11.8217" y2="5.1748" gradientUnits="userSpaceOnUse">
+          <stop stop-color="#333333" />
+          <stop offset="1" stop-color="#4D4D4D" />
+        </linearGradient>
+        <linearGradient id="paint1_linear" x1="14.5276" y1="33.9959" x2="10.4841" y2="26.9924" gradientUnits="userSpaceOnUse">
+          <stop stop-color="#999999" />
+          <stop offset="1" stop-color="#B3B3B3" />
+        </linearGradient>
+        <linearGradient id="paint2_linear" x1="14.5276" y1="33.9959" x2="10.4841" y2="26.9924" gradientUnits="userSpaceOnUse">
+          <stop stop-color="#999999" />
+          <stop offset="1" stop-color="#B3B3B3" />
+        </linearGradient>
+        <linearGradient id="paint3_linear" x1="16.2747" y1="30.0336" x2="8.73699" y2="16.9781" gradientUnits="userSpaceOnUse">
+          <stop stop-color="#CCCCCC" />
+          <stop offset="1" stop-color="#E6E6E6" />
+        </linearGradient>
+        <linearGradient id="paint4_linear" x1="16.2747" y1="30.0336" x2="8.73699" y2="16.9781" gradientUnits="userSpaceOnUse">
+          <stop stop-color="#CCCCCC" />
+          <stop offset="1" stop-color="#E6E6E6" />
+        </linearGradient>
+        <linearGradient id="paint5_linear" x1="35.1496" y1="39.9553" x2="28.8504" y2="29.0447" gradientUnits="userSpaceOnUse">
+          <stop stop-color="#CCCCCC" />
+          <stop offset="1" stop-color="#E6E6E6" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+};
+export const info = (props) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" {...props}>
+      <path fill="#0078d7" d="M27.34 3.45c7.1-1.02 14.61.32 20.59 4.4 8.03 5.14 13.14 14.6 12.91 24.15.27 10.76-6.27 21.26-15.95 25.91-9.25 4.63-21.06 3.84-29.49-2.22-8.32-5.6-13.09-15.91-12.18-25.88C3.8 16.8 14.5 5.29 27.34 3.45M30 14v4h4v-4h-4m0 8v28h4V22h-4z" />
+      <path d="M30 14h4v4h-4v-4zm0 8h4v28h-4V22z" fill="#fff" />
+    </svg>
+  );
+};
diff --git a/src/utils/index.js b/src/utils/index.js
index 91fcb3c6b..a6a90dbc2 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -33,7 +33,7 @@ export const pinnedApps = icons.filter(x => pinned.includes(x.name)).sort((a, b)
 
 export const recentApps = icons.filter(x => recent.includes(x.name)).sort((a, b) => {
   return recent.indexOf(a.name) > recent.indexOf(b.name) ? 1 : -1;
-});;
+});
 
 export const allApps = icons.filter(app => {
   return app.type == 'app'