diff --git a/img/favicon.png b/img/favicon.png
deleted file mode 100644
index dd5bdc3..0000000
Binary files a/img/favicon.png and /dev/null differ
diff --git a/img/home.png b/img/home.png
new file mode 100644
index 0000000..d94f385
Binary files /dev/null and b/img/home.png differ
diff --git a/img/settings2.png b/img/settings2.png
new file mode 100644
index 0000000..88b25eb
Binary files /dev/null and b/img/settings2.png differ
diff --git a/img/unlockicon.png b/img/unlockicon.png
deleted file mode 100644
index a307843..0000000
Binary files a/img/unlockicon.png and /dev/null differ
diff --git a/trigger.html b/trigger.html
index bbcd722..03370ac 100644
--- a/trigger.html
+++ b/trigger.html
@@ -1,87 +1,338 @@
-<!DOCKTYPE html>
-<html lang=en-US>
+<!DOCTYPE html>
+
+<html>
 <head>
-<title>Trigger</title>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<meta name="Keywords" content="">
-<meta name="Description" content="Door opener">
-<link rel="icon" href="res/favicon.png" type="image/png">
-
-<script>
-  const runCGI = () => {
-    const xmlhttp = new XMLHttpRequest();
-//     xmlhttp.open("GET", "https://ths.tnet.space/cgi-bin/unlock-main.cgi?passwd=c5S8De2TTPkDhkXREzSP&delay=5");
-//     xmlhttp.send();
-  }
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Trigger - Login</title>
+  <link rel="icon" href="img/favicon.png" type="img/png">
   
-  //document.getElementById("unlock-button").onclick = runCGI();
-</script>  
+  <style>
+    
+    * {
+      font-family: "sans";
+      box-sizing: border-box;
+    }
+    
+    html {
+      position: relative;
+      height: 100%
+    }
+    
+    body {
+      height: 100%;
+      padding: 0;
+      margin: 0;
+      background: #333;
+      color: white;
+    }
+    
+    .app-bar {
+      background-color: #FF8800;
+    }
+    
+    nav {
+      height: 56px;
+      margin: 0;
+      padding: 16px;
+    }
+    
+    .app-bar h1 {
+      text-align: center;
+      font-family: sans;
+      font-size: 45px;
+      height: 72;
+      paddng: 0;
+      margin: 0;
+    }
+    
+    .app-bar button {
+      position: fixed;
+      font-size: 20px;
+      height: 24px;
+      right: 16px;
+      background-color: #FF8800;
+      border: none;
+      }
+    #open-setting-screen-button {
+      display: block;
+    }
+    
+    #close-setting-screen-button {
+      display: none;
+    }
+    
+    .screen-container {
+        position: fixed;
+        width: 100%;
+        height: calc(100vh - 56px);
+        padding: 0;
+        margin: 0;
+    }
+    
+    .main-screen {
+        left: 0;
+        transition: all, .3s;
+/*         border: 1px solid yellow; */
+        }
+    
+    .setting-screen {
+      left: 100%;
+      transition: all, .3s;
+/*       border: 1px solid blue; */
+      
+      }
+      
+/*     .settings-form h1 { */
+/*       text-align: center; */
+    }
+    
+    .settings-form ul {
+      position: relative;
+      max-width: 300px;
+      height: 300px;
+      list-style: none;
+/*       border: 1px solid #000; */
+      border-radius: 5px;
+      padding: 0px;
+      margin-left: auto;
+      margin-right: auto;
+    }
+    
+    .settings-form li {
+      display: flex;
+      padding: 0;
+      padding-top: 20px;
+      margin: 0;
+      justify-content: center;
+    }
+    
+    .settings-form label {
+      padding-top: 1em;
+      width: 100px;
+    }
+    
+    .settings-form input {
+      width: 200px;
+      border: 1px solid #7FBD32;
+      border-radius: 3em;
+      background-color: #EEE;
+      padding: 1em;
+    }
+    
+    .settings-form button {
+      width: 100px;
+      padding: .5em;
+      margin-left: auto;
+      margin-right: auto;
+      margin-top: 20px;
+/*       border: 2px solid green; */
+      font-size: 1.2em;
+      color: white;
+      border-radius: 3em;
+      background: #FF8800;
+/*       color: white; */
+    }
+    
+    h1 {
+      text-align: center;
+      font-family: sans;
+      font-size: 24px;
+      background-color: #FF8800;
+      paddng: 0;
+      margin: 0;
+    }
+
+    #button-block {
+      position: fixed;
+      width: 100vw;
+      bottom: 0px;
+    }
+    
+    .button-container {
+      position: relative;
+      display: block;
+      width: 300px;
+      height: 56px;
+      border-radius: 56px;
+      margin: 32px auto 32px auto;
+      text-align: center;
+      background-color: #555;
+      border: 4px #7FBD32 solid;
+    }
+    
+    .button-container:active {
+      background-color: green;
+      width: 290px;
+    }
+
+/*     #unlock-button:active { */
+/*       background-color: green; */
+/*     } */
   
-
-<style>
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-h1 {
-  text-align: center;
-  font-family: sans;
-  font-size: 45px;
-  background-color: orange;
-}
-
-.button-container {
-  width: 100px;
-  height: 100px;
-  padding: 10px;
-  border-radius: 50px;
-  margin: 0 auto;
-}
-
-#unlock-button {
-  background-color: limegreen;
-  position: fixed;
-  bottom: 0;
-  left: calc((100% / 2) - 50px);
-  padding: 10px;
-  margin: 0 auto;
-}
-
-#unlock-button:active {
-  background-color: green;
-  }
+    .button-icon {
+      width: auto;
+      height: 40px;
+      position: absolute;
+      display: block;
+/*       margin-right: 10px; */
+/*       margin-left: auto; */
+/*       margin-top: 3px; */
+/*       margin-bottom: auto; */
+      padding: 2px;
+      left: 6px;
+      bottom: 4px;
+      border: 1px solid white;
+      border-radius: 2em;
+      background-color: white;
+    }
+    
+    .app-bar button  img {
+      height: 24px;
+      width: auto;
+    }
+  </style>
   
-#unlock-icon {
-  width: auto;
-  height: 75px;
-  position: relative;
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-  padding: 5px;
-}
-
-</style>
 </head>
 
 <body>
-  <header>
-    <h1 id="doorName">Main Door</h1>
-  </header>
-  
-  <!-- 
-  <div>
-    <img src="res/doorstatus.png" alt="Door Status">
-  </div>
-  -->
 
-  <div class="button-container" id="unlock-button" onclick="runCGI()">
-    <img id="unlock-icon" src="res/unlockicon.png" alt="Unlock Button">
-  </div>
- <!-- </a> -->
+  <nav class="app-bar">
+      <button id="open-setting-screen-button"><img src="img/settings2.png"></button>
+      <button id="close-setting-screen-button"><img src="img/home.png"></button>
+    </div>
+  </nav>
+
+<!--   <div id="screen-container"> -->
+    
+    <!-- Main Screen -->
+    <section class="screen-container main-screen">
+      <h1 class="app-bar">Main Door</h1>
+      
+        <div id="button-block">
+
+          <div class="button-container" id="delay-unlock-button">
+            <p>
+              <span id="show-delay"></span>
+              <span>Delay Unlock</span>
+            </p>
+            <img class="button-icon" src="img/clockwise.png" alt="Unlock Button">
+          </div>
+          
+          <div class="button-container" id="unlock-button">
+            <p>Unlock Now</p>
+            <img class="button-icon" src="img/unlock.png" alt="Unlock Button">
+          </div>
+        </div>
+        
+    </section>
+
+    
+    <!-- Settings Screen -->
+    <section class="screen-container setting-screen"">
+      <h1 class="app-bar">Settings</h1>
+
+      <form class="settings-form">
+        <ul>
+          <li>
+            <label for="device-id">Device ID</label>
+            <input type="text" id="device-id" name="deviceID">
+          </li>
+          <li>
+            <label for="api-key">API Key</label>
+            <input type="text" id="api-key" name="apiKey">
+          </li>
+          <li>
+            <label for="delay-time">Delay</label>
+            <input type="number" min="0" id="delay-time" name="delayTime">
+          </li>
+          <li>
+            <button type="button" id="save-settings-button" name="saveSettings">Save</button>
+          </li>
+        </ul>
+      </form>
+    </section>
   
+<!--   </div> -->
+  
+  <script>
+    const openSettingScreenButton = document.querySelector("#open-setting-screen-button");
+    const closeSettingScreenButton = document.querySelector("#close-setting-screen-button");
+    const saveSettingsButton = document.querySelector("#save-settings-button");
+    
+    const delayUnlockButton = document.querySelector("#delay-unlock-button");
+    const unlockButton = document.querySelector("#unlock-button");
+    
+    const settingScreen = document.querySelector(".setting-screen");
+    const mainScreen = document.querySelector(".main-screen");
+    
+    const deviceIDInput = document.querySelector("#device-id");
+    const delayInput = document.querySelector("#delay-time");
+    const apiKeyInput = document.querySelector("#api-key");
+    
+    const showDelay = document.querySelector("#show-delay");
+    let deviceID = "";
+    let delay = "";
+    let apiKey = "";
+    
+
+//     make fetch function that calls cgi script with attributes (device id, api key, delay)
+
+    const setSettings = () => {
+      if (localStorage.getItem("apiKey") && localStorage.getItem("deviceID")) {
+        apiKey = localStorage.getItem("apiKey");
+        deviceID = localStorage.getItem("deviceID");
+        if (localStorage.getItem("delay")) {
+          delay = localStorage.getItem("delay");
+        } else {
+          delay = 0;
+        }
+        apiKeyInput.value = apiKey;
+        deviceIDInput.value = deviceID;
+        delayInput.value = delay;
+        showDelay.innerHTML = `${delay}s`;
+      } else {
+      gotoSettingScreen();
+      }
+    }
+
+    const gotoSettingScreen = () => {
+      openSettingScreenButton.style.display = "none";
+      closeSettingScreenButton.style.display = "block";
+      settingScreen.style.left = "0";
+      mainScreen.style.left = "-100%";
+      }
+      
+     const gotoMainScreen = () => {
+      closeSettingScreenButton.style.display = "none";
+      openSettingScreenButton.style.display = "block";
+      mainScreen.style.left = "0";
+      settingScreen.style.left = "100%";
+      }
+      
+    openSettingScreenButton.addEventListener("click", gotoSettingScreen);
+      
+    closeSettingScreenButton.addEventListener("click", gotoMainScreen);
+
+//  Save settings button
+    saveSettingsButton.addEventListener("click", function() {
+      localStorage.setItem("deviceID", deviceIDInput.value);
+      localStorage.setItem("delay", delayInput.value);
+      localStorage.setItem("apiKey", apiKeyInput.value);
+      setSettings();
+      });
+
+    unlockButton.addEventListener("click", function () {
+      alert("unlock");
+      });
+      
+    delayUnlockButton.addEventListener("click", function () {
+      alert("delay unlock");
+      });
+
+    document.body.onload = setSettings;
+
+  </script>
 </body>
+
 </html>
diff --git a/unlock-icon.png b/unlock-icon.png
deleted file mode 100644
index dd5bdc3..0000000
Binary files a/unlock-icon.png and /dev/null differ
