diff --git a/resources/bg/server/1.png b/resources/bg/server/1.png
new file mode 100644
index 0000000..d44ab0c
Binary files /dev/null and b/resources/bg/server/1.png differ
diff --git a/resources/index.html b/resources/index.html
index 1984178..2fade91 100644
--- a/resources/index.html
+++ b/resources/index.html
@@ -73,11 +73,11 @@
         <img src="icons/close.svg" />
       </div>
     </div>
-    <div id="halvesContainer">
-      <div id="firstHalf">
+    <div id="panelContainer">
+      <div id="firstPanel">
         <button class="playBtn" id="playOfficial" onclick="launchOfficial()">Play Official</button>
       </div>
-      <div id="secondHalf">
+      <div id="secondPanel">
         <div id="ipList" style="display: none;"></div>
         <div id="secondControlContainer">
           <div id="serverInput">
@@ -88,6 +88,9 @@
           <button class="playBtn" id="playPrivate" onclick="launchPrivate()">Play Private</button>
         </div>
       </div>
+      <div id="thirdPanel">
+        <button class="playBtn" id="serverLaunch">Launch Local Server</button>
+      </div>
     </div>
     
     <div id="bottomBar">
diff --git a/resources/js/hoverEvt.js b/resources/js/hoverEvt.js
index 169fc5f..7087793 100644
--- a/resources/js/hoverEvt.js
+++ b/resources/js/hoverEvt.js
@@ -1,21 +1,21 @@
 document.addEventListener('DOMContentLoaded', async () => {
-  const firstHalf = document.querySelector('#firstHalf')
-  const secondHalf = document.querySelector('#secondHalf')
+  const firstPanel = document.querySelector('#firstPanel')
+  const secondPanel = document.querySelector('#secondPanel')
 
   // Listen to hovers
-  firstHalf.addEventListener('mouseover', () => {
-    secondHalf.classList.add('darken')
+  firstPanel.addEventListener('mouseover', () => {
+    secondPanel.classList.add('darken')
   })
 
-  firstHalf.addEventListener('mouseout', () => {
-    secondHalf.classList.remove('darken')
+  firstPanel.addEventListener('mouseout', () => {
+    secondPanel.classList.remove('darken')
   })
 
-  secondHalf.addEventListener('mouseover', () => {
-    firstHalf.classList.add('darken')
+  secondPanel.addEventListener('mouseover', () => {
+    firstPanel.classList.add('darken')
   })
 
-  secondHalf.addEventListener('mouseout', () => {
-    firstHalf.classList.remove('darken')
+  secondPanel.addEventListener('mouseout', () => {
+    firstPanel.classList.remove('darken')
   })
 })
\ No newline at end of file
diff --git a/resources/js/index.js b/resources/js/index.js
index 2f818c9..a26e7cc 100644
--- a/resources/js/index.js
+++ b/resources/js/index.js
@@ -133,7 +133,7 @@ async function handleGenshinFolderNotSet() {
   document.querySelector('#genshinPath').innerHTML = 'Not set'
 
   // Set official server background to default
-  document.querySelector('#firstHalf').style.backgroundImage = `url("../bg/private/default.png")`
+  document.querySelector('#firstPanel').style.backgroundImage = `url("../bg/private/default.png")`
 
   const offBtn = document.querySelector('#playOfficial')
   const privBtn = document.querySelector('#playPrivate')
@@ -182,10 +182,10 @@ async function setBackgroundImage() {
   const privImage = privImages[Math.floor(Math.random() * privImages.length)].entry
   
   // Set default image, it will change if the bg folder exists
-  document.querySelector('#firstHalf').style.backgroundImage = `url("https://webstatic.hoyoverse.com/upload/event/2020/11/04/7fd661b5184e1734f91f628b6f89a31f_7367318474207189623.png")`
+  document.querySelector('#firstPanel').style.backgroundImage = `url("https://webstatic.hoyoverse.com/upload/event/2020/11/04/7fd661b5184e1734f91f628b6f89a31f_7367318474207189623.png")`
 
   // Set the private background image
-  document.querySelector('#secondHalf').style.backgroundImage = `url("../bg/private/${privImage}")`
+  document.querySelector('#secondPanel').style.backgroundImage = `url("../bg/private/${privImage}")`
 
   return
 
@@ -234,7 +234,7 @@ async function setBackgroundImage() {
         const image = localImg[Math.floor(Math.random() * localImg.length)].entry
   
         // Set background image
-        document.querySelector('#firstHalf').style.backgroundImage = `url("../bg/official/${image}")`
+        document.querySelector('#firstPanel').style.backgroundImage = `url("../bg/official/${image}")`
       }
     }
   }
diff --git a/resources/style/index.css b/resources/style/index.css
index 6da82e6..472ecab 100644
--- a/resources/style/index.css
+++ b/resources/style/index.css
@@ -291,7 +291,7 @@ body {
   font-size: 14px;
 }
 
-#halvesContainer {
+#panelContainer {
   width: 100%;
   height: 100%;
   position: relative;
@@ -299,7 +299,7 @@ body {
   display: flex;
 }
 
-#firstHalf, #secondHalf {
+#firstPanel, #secondPanel, #thirdPanel {
   display: flex;
   justify-content: center;
   width: 100%;
@@ -309,17 +309,17 @@ body {
   transition: width 0.2s ease-in-out, filter 0.2s ease-in-out;
 }
 
-#firstHalf:hover, #secondHalf:hover {
+#firstPanel:hover, #secondPanel:hover, #thirdPanel:hover {
   width: calc(100% + 150px);
 }
 
-#firstHalf {
+#firstPanel, #secondPanel {
   border-right: 6px solid #141414;
   background-position: -340px;
 }
 
 /* Move the first official button to the position on the png */
-#firstHalf button {
+#firstPanel button {
   position: relative;
   transform: translate(140px, 500px);
   width: 300px;
@@ -330,13 +330,13 @@ body {
   display: block;
 }
 
-#secondHalf button {
+#secondPanel button {
   display: block;
   width: 300px;
   height: 60px;
 }
 
-#secondHalf input {
+#secondPanel input {
   margin-bottom: 4px;
   height: 20px;
   background: white;
@@ -348,7 +348,7 @@ body {
   transition: border-bottom 0.1s ease-in-out;
 }
 
-#secondHalf input:focus {
+#secondPanel input:focus {
   outline: none;
   border-bottom: 2px solid #ffc61e;
 }