diff --git a/web/src/App.jsx b/web/src/App.jsx
index 4f03718..a297819 100644
--- a/web/src/App.jsx
+++ b/web/src/App.jsx
@@ -5,7 +5,7 @@ import {
 } from "react-router-dom";
 import { ThemeProvider } from "styled-components";
 import {CreateUserWidget, RecentActivityWidget, SystemStatusWidget} from './components'
-import {AccountManager, AdminUI, Logger} from './views'
+import {AccountManager, AdminUI, Logs, System} from './views'
 import theme from './theme';
 function App() {
   return (
@@ -21,6 +21,12 @@ function App() {
           <Route path="/accounts">
             <AccountManager/>
           </Route>
+          <Route path="/log">
+            <Logs/>
+          </Route>
+          <Route path="/system">
+            <System/>
+          </Route>
         </Switch>
       </AdminUI>
       </ThemeProvider>
diff --git a/web/src/components/TextInput.jsx b/web/src/components/TextInput.jsx
index 9718f22..ed2fa61 100644
--- a/web/src/components/TextInput.jsx
+++ b/web/src/components/TextInput.jsx
@@ -22,7 +22,7 @@ export class TextInput extends Component {
         background: ${this.props.disabled===undefined ? this.props.theme.colours.color6 : this.props.theme.colours.color7};
         border-bottom: 0.3em solid ${this.props.disabled===undefined ? this.props.theme.colours.color5 : this.props.theme.colours.color8};
         :hover {
-            ${this.props.disabled===undefined ? "outline: auto;\nborder-bottom: 0.3em solid" + this.props.theme.colours.color3 + ";" : null};
+            ${this.props.disabled===undefined ? "outline: solid "+ this.props.theme.colours.color3 +";\nborder-bottom: 0.3em solid" + this.props.theme.colours.color3 + ";" : null};
             button:hover{
                 ${this.props.btndisabled===undefined ?"background: "+ this.props.theme.colours.color3:""};
                 &::before{
diff --git a/web/src/theme/index.js b/web/src/theme/index.js
index 71db4f9..3601ca1 100644
--- a/web/src/theme/index.js
+++ b/web/src/theme/index.js
@@ -23,7 +23,7 @@ const colours2 = {
     color10: "#fff",
 }
 const theme = {
-    colours: colours1
+    colours: colours2
 }
 export { theme, colours1 as colours }
 export default theme
\ No newline at end of file
diff --git a/web/src/views/AdminUI.jsx b/web/src/views/AdminUI.jsx
index 67057dc..56fcb90 100644
--- a/web/src/views/AdminUI.jsx
+++ b/web/src/views/AdminUI.jsx
@@ -173,8 +173,8 @@ export class AdminUI extends Component {
             display: flex;
             justify-content: center;
             align-items: center;
-            color: ${this.props.theme.colours.color10};
-            text-shadow:  0 0 .3em ${this.props.theme.colours.color2};
+            color: ${this.props.theme.colours.color6};
+            text-shadow:  0 0 .5em ${this.props.theme.colours.color3};
             text-transform: uppercase;
             background: ${this.props.theme.colours.color2};
             &::after {
@@ -184,7 +184,8 @@ export class AdminUI extends Component {
                 bottom: 0;
                 height: 2em;
                 opacity: 0.5;
-                background: linear-gradient(-10deg, ${this.props.theme.colours.color2} 0%, ${this.props.theme.colours.color9}, ${this.props.theme.colours.color6} 50%, ${this.props.theme.colours.color4} 65%, ${this.props.theme.colours.color1} 100%);
+                background: #000;
+                background: linear-gradient(-10deg, ${this.props.theme.colours.color2} 0%, ${this.props.theme.colours.color9}, ${this.props.theme.colours.color5} 50%, ${this.props.theme.colours.color4} 65%, ${this.props.theme.colours.color1} 100%);
                 content: '';
             }
             &::before {
@@ -227,8 +228,7 @@ export class AdminUI extends Component {
                         <li><NavLink activeClassName="menu__active" exact to="/">Status</NavLink></li>
                         <li><NavLink activeClassName="menu__active" to="/accounts">Account</NavLink></li>
                         <li><NavLink activeClassName="menu__active" to="/log">Log</NavLink></li>
-                        <li><NavLink activeClassName="menu__active" to="/backup">Backup</NavLink></li>
-                        <li><NavLink activeClassName="menu__active" to="/admin">Admin</NavLink></li>
+                        <li><NavLink activeClassName="menu__active" to="/system">System</NavLink></li>
                     </ul>
                 </Menu>
                 <Main>
diff --git a/web/src/views/Logger.jsx b/web/src/views/Logger.jsx
deleted file mode 100644
index d525d2f..0000000
--- a/web/src/views/Logger.jsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React, { Component } from 'react'
-
-export class Logger extends Component {
-    render() {
-        return (
-            <div>
-                <div className="main__card">
-                    
-                </div>
-            </div>
-        )
-    }
-}
-
-export default Logger
diff --git a/web/src/views/Logs.jsx b/web/src/views/Logs.jsx
new file mode 100644
index 0000000..199569f
--- /dev/null
+++ b/web/src/views/Logs.jsx
@@ -0,0 +1,15 @@
+import React, { Component } from 'react'
+import Card from '../components/Card'
+export class Logs extends Component {
+    render() {
+        return (
+            <Card>
+                <h4>Logs</h4>
+                <hr/>
+                Hello World
+            </Card>
+        )
+    }
+}
+
+export default Logs
diff --git a/web/src/views/System.jsx b/web/src/views/System.jsx
new file mode 100644
index 0000000..703c3d0
--- /dev/null
+++ b/web/src/views/System.jsx
@@ -0,0 +1,26 @@
+import React, { Component } from 'react'
+import Card from '../components/Card'
+import TextInput from '../components/TextInput'
+export class System extends Component {
+    render() {
+        return (
+            <>
+            <Card>
+                <h4>System Settings</h4>
+                <hr />
+                Hello World
+            </Card>
+            <Card>
+                <h4>WiFi</h4>
+                <hr />
+                <TextInput label="SSID"/>
+                <TextInput label="Password" type="password"/>
+                <TextInput type="button" value="SAVE"/>
+            </Card>
+        
+            </>
+        )
+    }
+}
+
+export default System
diff --git a/web/src/views/index.js b/web/src/views/index.js
index fcb3a24..3aacf28 100644
--- a/web/src/views/index.js
+++ b/web/src/views/index.js
@@ -1,4 +1,5 @@
-import Logger from "./Logger";
 import AdminUI from "./AdminUI";
 import AccountManager from "./AccountManager";
-export {AccountManager, AdminUI, Logger}
\ No newline at end of file
+import Logs from "./Logs";
+import System from "./System";
+export {AccountManager, AdminUI, Logs, System}
\ No newline at end of file