diff --git a/static/dry_contact.jpg b/static/dry_contact.jpg
new file mode 100644
index 0000000..c02d488
Binary files /dev/null and b/static/dry_contact.jpg differ
diff --git a/static/index.html b/static/index.html
index eff5dd0..8df28fa 100644
--- a/static/index.html
+++ b/static/index.html
@@ -101,8 +101,9 @@
         border: 4px solid rgba(0, 0, 0, 0);
         aspect-ratio: 1;
       }
-      input:checked + img {
-        border-color: #58a6ff;
+      input:checked ~ img,
+    img:has(+ input:checked){
+    border-color: #58a6ff;
       }
       @media (prefers-color-scheme: dark) {
         body {
@@ -136,6 +137,31 @@
       body.show-diy .diy {
         display: initial;
       }
+
+      div.radios{
+        display: flex;
+    align-items: start;
+        font-size: 75%;
+      }
+      div.radios label{
+        /* padding: 10px; */
+        width: 32%;
+      }
+      div.radios img{
+        width: 150px;
+        border-radius: 10px;
+      }
+
+    div.radios .note{
+    font-size: 80%;
+    color: #DDD;
+    font-style:italic;
+    }
+
+    #wiring_diagram{
+    width: 600px;
+    border-radius: 15px;
+    }
     </style>
     <script
       type="module"
@@ -150,141 +176,91 @@
         alt="ESPHome ratgdo"
       />
       <h1>ESPHome ratgdo</h1>
-      <p></p>
       <p>
-        Pick your board to flash your ratgdo board with ESPhome for <a href="https://paulwieland.github.io/ratgdo/">ratgdo</a>.
+        In order to install the firmware, first pick your door opener control protocol, then pick your <a href="https://paulwieland.github.io/ratgdo/">ratgdo control board</a> version.
         No programming or other software required.
-
-        <ul>
-          <li>Residential overhead mounted openers
-            <ul>
-              <li>with a yellow learn button are Security + 2.0</li>
-              <li>with a red, purple or orange learn button are Security + “1.0”</li>
-            </ul>
-          </li>
-          <li>Residential wall mounted jackshaft openers
-            <ul>
-              <li>With model 8500<strong>W</strong> or RJ070 are Security + 2.0</li>
-              <li>All others are Security + 1.0</li>
-            </ul>
-          </li>
-          <li>Security + 2.0 door openers require ratgdo v2.0 control board or later</li>
-          <li>Security + 1.0 &amp; Dry Contact door openers require v2.5 control board or later</li>
-        </ul>
-
       </p>
 
-      <p>
-        <em>
-          Security + 1.0 support is experimental and may not work for all openers. Dry contact support is coming soon.
-        </em>
-      </p>
-
-      <h3>v2.5i/2.52i/2.53i Board Security+ 2.0</h3>
-      <div class="radios">
+      <h2>Choose your GDO Control Protocol:</h2>
+      <div class="protocol radios">
         <label>
-          <input type="radio" name="type" value="v25iboard" checked />
-          <img src="./v25iboard.png" alt="ratgdo v2.5i/2.52i board with Security+ 2.0" />
+          <img src="./yellow_learn_button.jpg" alt="Security + 2.0, round yellow learn button." />
+          <input type="radio" name="protocol" value="secplusv2" checked />
+          Security + 2.0<br/>
+      round yellow learn button<br/>
+      <span class="note">excluding models 8500/RJ020 &amp; 8500C/RJ020C</span>
+        </label>
+
+        <label>
+          <img src="./purple_learn_button.jpg" alt="Security + 1.0, purple, orange, or red learn button." />
+          <input type="radio" name="protocol" value="secplusv1" />
+          Security + 1.0<br/>
+      purple, brown, orange or red learn button<br/>
+      <span class="note">or jackshaft models 8500/RJ020 &amp; 8500C/RJ020C</span><br/>
+      <span class="note">Security + 1.0 support is experimental and may not work for all openers/wall panels.</span>
+        </label>
+
+        <label>
+          <img src="./dry_contact.jpg" alt="Dry contact control." />
+          <input type="radio" name="protocol" value="dry_contact" />
+          Dry Contact control<br/> (coming soon)
         </label>
       </div>
-      <p>
-        <ul>
-          <li><a href="https://user-images.githubusercontent.com/4663918/276749741-fe82ea10-e8f4-41d6-872f-55eec88d2aab.png">Version 2.5i Security + 1/2 Wiring Diagram</a></li>
-          <li><a href="https://user-images.githubusercontent.com/4663918/288449523-9ddf3da2-9eac-4be0-beed-11867dc8d446.png">Version 2.53i Security + 1/2 Wiring Diagram</a></li>
-          <!-- <li><a href="https://user-images.githubusercontent.com/4663918/277838851-e338c3bf-4eda-447a-9e79-737aa1a622a0.png">Version 2.5i Dry Contact Wiring Diagram</a></li> -->
-        </ul>
-      </p>
 
-      <h3>v2.5i/2.52i/2.53i Board Security+ 1.0</h3>
-      <div class="radios">
-        <label>
-          <input type="radio" name="type" value="v25iboard_secplusv1" />
-          <img src="./v25iboard_secplusv1.png" alt="ratgdo v2.5i/2.52i board with Security+ 1.0" />
-        </label>
-      </div>
-      <p>
-        <ul>
-          <li><a href="https://user-images.githubusercontent.com/4663918/276749741-fe82ea10-e8f4-41d6-872f-55eec88d2aab.png">Version 2.5i Security + 1/2 Wiring Diagram</a></li>
-          <li><a href="https://user-images.githubusercontent.com/4663918/288449523-9ddf3da2-9eac-4be0-beed-11867dc8d446.png">Version 2.53i Security + 1/2 Wiring Diagram</a></li>
-          <!-- <li><a href="https://user-images.githubusercontent.com/4663918/277838851-e338c3bf-4eda-447a-9e79-737aa1a622a0.png">Version 2.5i Dry Contact Wiring Diagram</a></li> -->
-        </ul>
-      </p>
+    <h2>Choose your ratgdo control board:</h2>
+    <div class="hardware radios">
+      <label>
+        <img src="./ratgdo_v2.5xi.jpg" alt="v2.5i, v2.52i, v2.53i" />
+        <input type="radio" name="hardware" value="v25iboard" checked />
+        ratgdo v2.5x<br/>
+      v2.5, v2.5i, v2.52i, v2.53i (black PCB)
+      </label>
 
-      <h3>v2.5 Board Security+ 2.0</h3>
-      <div class="radios">
-        <label>
-          <input type="radio" name="type" value="v25board_esp8266_d1_mini_lite" />
-          <img src="./v25board_esp8266_d1_mini_lite.png" alt="ratgdo v2.5 board with ESP8266 D1 Mini Lite with Security+ 2.0" />
-        </label>
-        <label>
-          <input type="radio" name="type" value="v25board_esp32_d1_mini" />
-          <img src="./v25board_esp32_d1_mini.png" alt="ratgdo v2.5 board with ESP32 D1 Mini with Security+ 2.0" />
-        </label>
-      </div>
-      <p>
-        <ul>
-          <li><a href="https://user-images.githubusercontent.com/4663918/276749741-fe82ea10-e8f4-41d6-872f-55eec88d2aab.png">Version 2.5 Security + 1/2 Wiring Diagram</a></li>
-        </ul>
-      </p>
+      <label>
+        <img src="./ratgdo_v2.0.jpg" alt="v2.0" />
+        <input type="radio" name="hardware" value="v2board_esp8266_d1_mini" />
+        ratgdo v2.0<br/>
+      ESP8266 / D1 Mini (white PCB)
+      </label>
 
-      <h3>v2.5 Board Security+ 1.0</h3>
-      <div class="radios">
-        <label>
-          <input type="radio" name="type" value="v25board_esp8266_d1_mini_lite_secplusv1" />
-          <img src="./v25board_esp8266_d1_mini_lite_secplusv1.png" alt="ratgdo v2.5 board with ESP8266 D1 Mini Lite with Security+ 1.0" />
-        </label>
-        <label>
-          <input type="radio" name="type" value="v25board_esp32_d1_mini_secplusv1" />
-          <img src="./v25board_esp32_d1_mini_secplusv1.png" alt="ratgdo v2.5 board with ESP32 D1 Mini with Security+ 1.0" />
-        </label>
-      </div>
-      <p>
-        <ul>
-          <li><a href="https://user-images.githubusercontent.com/4663918/276749741-fe82ea10-e8f4-41d6-872f-55eec88d2aab.png">Version 2.5 Security + 1/2 Wiring Diagram</a></li>
-        </ul>
-      </p>
+      <label>
+        <img src="./v25board_esp32_d1_mini.png" alt="v2.5 esp32" />
+        <input type="radio" name="hardware" value="v25board_esp32_d1_mini" />
+        ratgdo v2.5<br/>
+      ESP32 (black PCB)
+      </label>
 
-      <h3>v2.0 Board Security+ 2.0</h3>
-      <div class="radios">
-        <label>
-          <input type="radio" name="type" value="v2board_esp8266_d1_mini_lite" />
-          <img src="./v2board_esp8266_d1_mini_lite.png" alt="ratgdo v2.0 board with ESP8266 D1 Mini Lite with Security+ 2.0" />
-        </label>
-        <label>
-          <input type="radio" name="type" value="v2board_esp8266_d1_mini" />
-          <img src="./v2board_esp8266_d1_mini.png" alt="ratgdo v2.0 board with ESP8266 D1 Mini with Security+ 2.0" />
-        </label>
-        <label>
-          <input type="radio" name="type" value="v2board_esp32_d1_mini" />
-          <img src="./v2board_esp32_d1_mini.png" alt="ratgdo v2.0 board with ESP32 D1 Mini with Security+ 2.0" />
-        </label>
-        <label>
-          <input type="radio" name="type" value="v2board_esp32_lolin_s2_mini" />
-          <img src="./v2board_esp32_lolin_s2_mini.png" alt="ratgdo v2.0 board with ESP32 lolin s2 mini with Security+ 2.0" />
-        </label>
-      </div>
-      <p>
-        <ul>
-          <li><a href="https://user-images.githubusercontent.com/4663918/235453980-04a642fa-a181-4297-b4f3-06e1315e02fa.png">Version 2.0 Wiring Diagram</a></li>
-        </ul>
-      </p>
+      <label>
+        <img src="./v2board_esp32_d1_mini.png" alt="v2.0 esp32" />
+        <input type="radio" name="hardware" value="v2board_esp32_d1_mini" />
+        ratgdo v2.0<br/>
+      ESP32 (white PCB)
+      </label>
+    </div>
 
-      <h3>v1.0 Board</h3>
-      <div>
-        Not supported
-      </div>
-
-      <p class="button-row" align="center">
-        <esp-web-install-button></esp-web-install-button>
-      </p>
+    <p>
+      <esp-web-install-button></esp-web-install-button>
+    </p>
 
 
-      <h3>Drivers</h3>
-      <p>If you can't connect to your ratgdo board make sure you have the right driver installed for the type of board you have.</p>
-      <ul>
-        <li>ratgdo v2.5i uses a CH340 USB to Serial chipset. [<a href="https://www.wch-ic.com/downloads/CH341SER_EXE.html" target="_blank">driver download</a>]</li>
-        <li>Most D1 Minis use an FTDI USB to Serial chipset. [<a href="https://ftdichip.com/drivers/vcp-drivers/" target="_blank">driver download</a>]</li>
-      </ul>
+    <h2>Wiring Diagram</h2>
+    <img id="wiring_diagram" src="wiring_diagrams/secplus_diagram.png" alt="Security + 1 and 2 wiring diagram" />
+
+    <h3>Documentation</h3>
+    <ul>
+      <li><a href="webui_documentation.html">Web User Interface Documentation</a></li>
+    </ul>
+
+
+    <h3>Drivers</h3>
+    <p>If you can't connect to your ratgdo board make sure you have the right driver installed for the type of board you have.</p>
+    <ul>
+      <li>ratgdo v2.5i uses a CH340 USB to Serial chipset. [<a href="https://www.wch-ic.com/downloads/CH341SER_EXE.html" target="_blank">driver download</a>]</li>
+      <li>Most D1 Minis use an FTDI USB to Serial chipset. [<a href="https://ftdichip.com/drivers/vcp-drivers/" target="_blank">driver download</a>]</li>
+    </ul>
+    <p>Watch the driver and firmware installation [<a href="https://www.youtube.com/watch?v=9WecAUTC9iI">video on YouTube</a>].</p>
+    <!-- <iframe width="640" height="360" src="https://youtube.com/embed/9WecAUTC9iI"></iframe> -->
+
 
       <h3>Advanced Users</h3>
       <ul>
@@ -296,7 +272,7 @@
           >
         </li>
         <li>
-          The YAML configuration is on
+          The YAML configuration for additional boards and chips is available on
           <a href="https://github.com/RATGDO/esphome-ratgdo/tree/main/static">GitHub</a>
         </li>
       </ul>
@@ -308,19 +284,37 @@
       </div>
     </div>
     <script>
-      document.querySelectorAll('input[name="type"]').forEach((radio) =>
-        radio.addEventListener("change", () => {
-          const button = document.querySelector("esp-web-install-button");
-          button.manifest = `./${radio.value}-manifest.json`;
+      document.querySelectorAll('div.radios input').forEach((radio) =>
+      radio.addEventListener("change", () => {
+      const button = document.querySelector("esp-web-install-button");
+      var protocol = document.querySelector('input[name="protocol"]:checked').value;
+      var hardware = document.querySelector('input[name="hardware"]:checked').value;
+
+      if(protocol === "dry_contact"){
+        alert("Dry contact support is coming soon.");
+        document.querySelector('input[name="protocol"][value="secplusv2"]').checked = true;
+        return;
+        document.querySelector("#wiring_diagram").src = "wiring_diagrams/dry_contact_diagram.png";
+      }else{
+        document.querySelector("#wiring_diagram").src = "wiring_diagrams/secplus_diagram.png";
+      }
+
+      if(protocol !== "sec2" && hardware === "v2.0"){
+        alert("ratgdo version 2.0 only works with Security + 2.0");
+        document.querySelector('input[name="protocol"][value="secplusv2"]').checked = true;
+        return;
+      }
+
+      if(protocol === "secplusv2"){
+        protocol = "";
+      }else{
+        protocol = `_${protocol}`;
+      }
+
+      button.manifest = `${hardware}${protocol}-manifest.json`;
+    })
+    );
 
-          document.querySelectorAll(".info").forEach((info) => {
-            info.classList.add("hidden");
-          });
-          document
-            .querySelector(`.info.${radio.value}`)
-            .classList.remove("hidden");
-        })
-      );
       document
         .querySelector('input[name="type"]:checked')
         .dispatchEvent(new Event("change"));
diff --git a/static/purple_learn_button.jpg b/static/purple_learn_button.jpg
new file mode 100644
index 0000000..101a322
Binary files /dev/null and b/static/purple_learn_button.jpg differ
diff --git a/static/ratgdo_v2.0.jpg b/static/ratgdo_v2.0.jpg
new file mode 100644
index 0000000..7486fa0
Binary files /dev/null and b/static/ratgdo_v2.0.jpg differ
diff --git a/static/ratgdo_v2.5xi.jpg b/static/ratgdo_v2.5xi.jpg
new file mode 100644
index 0000000..7e9a6b6
Binary files /dev/null and b/static/ratgdo_v2.5xi.jpg differ
diff --git a/static/webui_documentation.html b/static/webui_documentation.html
new file mode 100644
index 0000000..bc321cb
--- /dev/null
+++ b/static/webui_documentation.html
@@ -0,0 +1,670 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta charset="utf-8" />
+	<title>ESPHome ratgdo Web UI Documentation</title>
+	<meta name="description" content="Install ratgdo on your ESPHome devices." />
+	<meta name="viewport" content="width=device-width" />
+	<meta name="color-scheme" content="dark light" />
+	<meta property="og:title" content="ESPHome ratgdo Web UI Documentation" />
+	<meta property="og:site_name" content="ESPHome ratgdo" />
+	<meta property="og:url" content="https://ratgdo.github.io/esphome-ratgdo/" />
+	<meta property="og:type" content="website" />
+	<meta property="og:description" content="Documentation for the web user interface of ratgdo ESPHome" />
+	<meta property="og:image" content="https://ratgdo.github.io/esphome-ratgdo/header.png" />
+	<meta name="twitter:card" content="summary_large_image" />
+	<meta name="twitter:site" content="@esphome_ratgdo" />
+	<meta name="twitter:title" content="ESPHome ratgdo" />
+	<meta name="twitter:description" content="Documentation for the web user interface of ratgdo ESPHome" />
+	<meta name="twitter:image" content="https://ratgdo.github.io/esphome-ratgdo/header.png" />
+
+	<style>
+		body {
+			font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI",
+				Roboto, Ubuntu, sans-serif;
+			padding: 0;
+			margin: 0;
+			line-height: 1.4;
+		}
+
+		.content {
+			max-width: 600px;
+			margin: 0 auto;
+			padding: 12px;
+		}
+
+		.header {
+			display: block;
+			width: 100%;
+			aspect-ratio: 1200 / 675;
+			border-radius: 12px;
+		}
+
+		h3 {
+			margin-top: 1.5em;
+		}
+
+		a {
+			color: #03a9f4;
+		}
+
+		.hidden {
+			display: none;
+		}
+
+		li {
+			padding: 4px 0;
+		}
+
+		.footer {
+			margin-top: 24px;
+			border-top: 1px solid #ccc;
+			padding-top: 24px;
+			text-align: center;
+		}
+
+		.footer .initiative {
+			font-style: italic;
+			margin-top: 16px;
+		}
+
+		input:checked+img {
+			border-color: #58a6ff;
+		}
+
+		@media (prefers-color-scheme: dark) {
+			body {
+				background-color: #333;
+				color: #fff;
+			}
+
+			a {
+				color: #58a6ff;
+			}
+		}
+
+		@media only screen and (max-width: 450px) {
+			.radios label {
+				width: calc(50% - 16px);
+				max-width: initial;
+			}
+		}
+
+		.diy::after {
+			content: "DIY";
+			background-color: #f44336;
+			color: #fff;
+			padding: 2px 4px;
+			border-radius: 4px;
+			font-size: 0.8em;
+			position: absolute;
+			bottom: 12px;
+			left: 12px;
+		}
+
+		body .diy {
+			display: none;
+		}
+
+		body.show-diy .diy {
+			display: initial;
+		}
+
+		table,
+		th,
+		td {
+			border: 1px solid;
+			border-spacing: 0px;
+		}
+
+		table thead th {
+			text-align: left;
+		}
+
+		table tr.odd {
+			background-color: rgba(127, 127, 127, 0.3);
+		}
+
+		table td, table th{
+			padding: 10px;
+		}
+	</style>
+</head>
+
+<body>
+	<div class="content">
+		<img class="header" src="./header.png" alt="ESPHome ratgdo" />
+		<h1>ESPHome ratgdo Web UI Documentation</h1>
+
+		<table>
+			<thead>
+				<tr class="odd">
+					<th>Name</th>
+					<th>State</th>
+					<th>Actions</th>
+					<th>Explanation</th>
+				</tr>
+			</thead>
+			<tbody>
+
+				<tr>
+					<td>
+						Button
+					</td>
+					<td>
+						OFF
+					</td>
+					<td></td>
+					<td>
+						A sensor indicating when the wall panel button is pressed to toggle the door.
+					</td>
+				</tr>
+
+				<tr class="odd">
+					<td>
+						Client ID
+					</td>
+					<td>
+						1234
+					</td>
+					<td>
+						<div class="range">
+							<label>
+								1337
+							</label>
+							<input type="number" name="number-client_id" id="number-client_id" step="4096" min="1337"
+								max="8385849" value="12345">
+							<label>
+								8385849
+							</label>
+						</div>
+					</td>
+					<td>
+						A unique identifier used to generate security + 2.0 codes
+					</td>
+				</tr>
+
+				<tr>
+					<td>
+						Closing duration
+					</td>
+					<td>
+						0.0 s
+					</td>
+					<td>
+						<div class="range">
+							<label>
+								0
+							</label>
+							<input type="range" name="number-closing_duration" id="number-closing_duration" step="0.1"
+								min="0" max="180">
+							<label>
+								180
+							</label>
+						</div>
+					</td>
+					<td>
+						The amount of time it takes for the door to close (learned after one door cycle)
+					</td>
+				</tr>
+
+				<tr class="odd">
+					<td>
+						Door
+					</td>
+					<td>
+						OPEN | CLOSED
+					</td>
+					<td>
+						<button class="rnd">
+							↑
+						</button>
+
+						<button class="rnd">
+							☐
+						</button>
+
+						<button class="rnd">
+							↓
+						</button>
+					</td>
+					<td>
+						Discrete controls for the door.
+						<ul>
+							<li><button class="rnd">↑</button> - open the door, ignore if already opened.</li>
+							<li><button class="rnd">☐</button> - stop the door, only if door is moving.</li>
+							<li><button class="rnd">↓</button> - close the door, ignore if already closed.</li>
+						</ul>
+					</td>
+				</tr>
+
+				<tr>
+					<td>
+						Dry contact close
+					</td>
+					<td>
+						OFF | ON
+					</td>
+
+					<td>
+
+					</td>
+					<td>The state of the ratgdo trigger door close input.
+						<ul>
+							<li>OFF - input is floating</li>
+							<li>ON - input is connected to GND</li>
+						</ul>
+					</td>
+				</tr>
+
+				<tr class="odd">
+					<td>
+						Dry contact light
+					</td>
+					<td>
+						OFF | ON
+					</td>
+
+					<td>
+
+					</td>
+					<td>The state of the ratgdo trigger light input.
+						<ul>
+							<li>OFF - input is floating</li>
+							<li>ON - input is connected to GND</li>
+						</ul>
+					</td>
+
+				</tr>
+
+				<tr>
+					<td>
+						Dry contact open
+					</td>
+					<td>
+						OFF | ON
+					</td>
+
+					<td>
+
+					</td>
+					<td>The state of the ratgdo trigger door open input.
+						<ul>
+							<li>OFF - input is floating</li>
+							<li>ON - input is connected to GND</li>
+						</ul>
+					</td>
+				</tr>
+
+				<tr class="odd">
+					<td>
+						Learn
+					</td>
+					<td>
+						OFF | ON
+					</td>
+
+					<td>
+						<esp-switch color="var(--primary-color,currentColor)"></esp-switch>
+					</td>
+					<td>
+						Put the GDO in learn mode (same as pressing the learn button)
+					</td>
+				</tr>
+
+				<tr>
+					<td>
+						Light
+					</td>
+					<td>
+						OFF | ON
+					</td>
+
+					<td>
+
+						<esp-switch color="var(--primary-color,currentColor)"></esp-switch>
+
+					</td>
+					<td>
+						Toggle the GDO's light on or off.
+					</td>
+				</tr>
+
+				<tr class="odd">
+					<td>
+						Lock remotes
+					</td>
+					<td>
+						UNLOCKED
+					</td>
+					<td>
+
+						<button class="rnd">
+							🔐
+						</button>
+
+						<button class="rnd">
+							🔓
+						</button>
+
+						<button class="rnd">
+							↑
+						</button>
+					</td>
+					<td>
+						Lockout the wireless remotes.
+						<ul>
+							<li><button class="rnd">🔐</button> - lock the remotes. Wireless remotes will be ignored by
+								the GDO.</li>
+							<li><button class="rnd">🔓</button> - unlock the remotes. The GDO will respond to commands
+								from wireless remotes.</li>
+						</ul>
+					</td>
+				</tr>
+
+				<tr>
+					<td>
+						Motion
+					</td>
+					<td>
+						OFF | ON
+					</td>
+
+					<td>
+
+					</td>
+					<td>
+						ON - Motion was detected by the wall control panel (on Sec + 1.0, triggers when the light turns
+						on)
+					</td>
+				</tr>
+
+				<tr class="odd">
+					<td>
+						Motor
+					</td>
+					<td>
+						OFF | ON
+					</td>
+
+					<td>
+
+					</td>
+					<td>
+						Indicates whether the GDO motor is running or not.
+					</td>
+				</tr>
+
+				<tr>
+					<td>
+						Obstruction
+					</td>
+					<td>
+						OFF | ON
+					</td>
+
+					<td>
+
+					</td>
+					<td>
+						Indicates whether the obstruction sensor beam is blocked by an object or not.
+					</td>
+				</tr>
+
+				<tr class="odd">
+					<td>
+						Opening duration
+					</td>
+					<td>
+						0.0 s
+					</td>
+
+					<td>
+
+						<div class="range">
+							<label>
+								0
+							</label>
+							<input type="range" name="number-opening_duration" id="number-opening_duration" step="0.1"
+								min="0" max="180">
+							<label>
+								180
+							</label>
+						</div>
+					</td>
+					<td>
+						The amount of time it takes for the door to open (learned after one door cycle)
+					</td>
+				</tr>
+
+				<tr>
+					<td>
+						Openings
+					</td>
+					<td>
+						200 openings
+					</td>
+
+					<td>
+
+					</td>
+					<td>
+						The number of times the GDO has cycled
+					</td>
+				</tr>
+
+				<tr class="odd">
+					<td>
+						Paired Devices
+					</td>
+					<td>
+						6
+					</td>
+
+					<td>
+
+					</td>
+					<td>
+						The number of clients which are paired with the GDO.
+					</td>
+				</tr>
+
+				<tr>
+					<td>
+						Query Paired Devices
+					</td>
+					<td>
+
+					</td>
+
+					<td>
+
+						<button class="rnd">
+							☐
+						</button>
+
+					</td>
+					<td>
+						Send a query to the GDO to get the number of paired devices.
+					</td>
+				</tr>
+
+				<tr class="odd">
+					<td>
+						Query openings
+					</td>
+					<td>
+
+					</td>
+
+					<td>
+
+						<button class="rnd">
+							☐
+						</button>
+
+					</td>
+					<td>
+						Send a query to the GDO to get the current Openings count. This value is automatically updated
+						during normal status updates.
+					</td>
+				</tr>
+
+				<tr>
+					<td>
+						Query status
+					</td>
+					<td>
+
+					</td>
+
+					<td>
+
+						<button class="rnd">
+							☐
+						</button>
+
+					</td>
+					<td>
+						Get the current physical status of the garage door, light, wireless lockout, learn, openings,
+						etc.
+					</td>
+				</tr>
+
+				<tr class="odd">
+					<td>
+						Restart
+					</td>
+					<td>
+
+					</td>
+
+					<td>
+
+						<button class="rnd">
+							☐
+						</button>
+
+					</td>
+					<td>
+						Restart ratgdo
+					</td>
+				</tr>
+
+				<tr>
+					<td>
+						Rolling code counter
+					</td>
+					<td>
+						22 codes
+					</td>
+
+					<td>
+						<div class="range">
+							<label>
+								0
+							</label>
+							<input type="number" name="number-rolling_code_counter" id="number-rolling_code_counter"
+								step="1" min="0" max="268435500" value="55">
+							<label>
+								268435500
+							</label>
+						</div>
+					</td>
+					<td>
+						The current rolling code counter for Security + 2.0, it's increemnted for each operation.
+					</td>
+				</tr>
+
+				<tr class="odd">
+					<td>
+						Safe mode boot
+					</td>
+					<td>
+
+					</td>
+
+					<td>
+
+						<button class="rnd">
+							☐
+						</button>
+
+					</td>
+					<td>
+						Restarts the device in a safe mode, useful if the device is missbehaving/crashing in a way that is preventing an Over-The-Air update to be performed.
+					</td>
+				</tr>
+
+				<tr>
+					<td>
+						Sync
+					</td>
+					<td>
+
+					</td>
+
+					<td>
+
+						<button class="rnd">
+							☐
+						</button>
+
+					</td>
+					<td>
+						Manually sync the ratgdo client with the GDO. If the GDO isn't responding to commands from
+						ratgdo, a sync should force them to be on the same rolling code counter.
+					</td>
+				</tr>
+
+				<tr class="odd">
+					<td>
+						Toggle door
+					</td>
+					<td>
+
+					</td>
+
+					<td>
+
+						<button class="rnd">
+							☐
+						</button>
+
+					</td>
+					<td>
+						Cycles the door regardless of it's current state.
+					</td>
+				</tr>
+
+			</tbody>
+		</table>
+
+		<div class="footer">
+			<a href="https://esphome.io">ESPHome</a>
+			&mdash; Installer powered by
+			<a href="https://esphome.github.io/esp-web-tools/">ESP Web Tools</a>.
+		</div>
+	</div>
+	<script>
+		document.querySelectorAll('input[name="type"]').forEach((radio) =>
+			radio.addEventListener("change", () => {
+				const button = document.querySelector("esp-web-install-button");
+				button.manifest = `./${radio.value}-manifest.json`;
+
+				document.querySelectorAll(".info").forEach((info) => {
+					info.classList.add("hidden");
+				});
+				document
+					.querySelector(`.info.${radio.value}`)
+					.classList.remove("hidden");
+			})
+		);
+		document
+			.querySelector('input[name="type"]:checked')
+			.dispatchEvent(new Event("change"));
+	</script>
+</body>
+
+</html>
diff --git a/static/wiring_diagrams/dry_contact_diagram.png b/static/wiring_diagrams/dry_contact_diagram.png
new file mode 100644
index 0000000..fef2f5f
Binary files /dev/null and b/static/wiring_diagrams/dry_contact_diagram.png differ
diff --git a/static/wiring_diagrams/secplus_diagram.png b/static/wiring_diagrams/secplus_diagram.png
new file mode 100644
index 0000000..6d3394f
Binary files /dev/null and b/static/wiring_diagrams/secplus_diagram.png differ
diff --git a/static/yellow_learn_button.jpg b/static/yellow_learn_button.jpg
new file mode 100644
index 0000000..3d51ea0
Binary files /dev/null and b/static/yellow_learn_button.jpg differ