diff --git a/src/ui/App.tsx b/src/ui/App.tsx
index b1b0ab1..08d9277 100644
--- a/src/ui/App.tsx
+++ b/src/ui/App.tsx
@@ -1,45 +1,23 @@
 import React from 'react'
-import { invoke } from '@tauri-apps/api/tauri'
 import './App.css'
 import './custom.css'
 
 /* FOR TESTING */
 import DownloadHandler from '../utils/download'
 
-// Config
-import { getConfig, saveConfig } from '../utils/configuration'
-
 // Major Components
 import Topbar from './components/TopBar'
-import BigButton from './components/common/BigButton'
-import Checkbox from './components/common/Checkbox'
+import ServerLaunchSection from './components/ServerLaunchSection'
 import ProgressBar from './components/common/ProgressBar'
 
 const downloadHandler = new DownloadHandler()
 
-async function playGame() {
-  const config = await getConfig()
-
-  if (!config.game_path) return
-
-  // Launch the program
-  await invoke('run_program', { path: config.game_path })
-}
-
 async function download() {
   const path = 'S:/Cultivation/grassclipper.zip'
   const url = 'https://github.com/Grasscutters/GrassClipper/releases/download/v0.9.7/GrassClipper.zip'
   downloadHandler.addDownload(url, path)
 }
 
-async function toggleGrasscutter() {
-  const config = await getConfig()
-
-  config.toggle_grasscutter = !config.toggle_grasscutter
-
-  await saveConfig(config)
-}
-
 function App() {
   return (
     <div className="App">
@@ -47,12 +25,7 @@ function App() {
 
       <button onClick={download}>download file test</button>
 
-      <div id="playButton">
-        <div id="serverControls">
-          <Checkbox label="Connect via Grasscutter" onChange={toggleGrasscutter} />
-        </div>
-        <BigButton text="PLAY DA GAME :D" onClick={playGame} id="officialPlay" />
-      </div>
+      <ServerLaunchSection />
 
       <div id="downloadProgress" style={{
         position: 'absolute',
diff --git a/src/ui/components/common/Checkbox.tsx b/src/ui/components/common/Checkbox.tsx
index df4d415..01406ae 100644
--- a/src/ui/components/common/Checkbox.tsx
+++ b/src/ui/components/common/Checkbox.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 
 interface IProps {
   label: string,
+  checked: boolean,
   onChange: () => void,
 }
 
@@ -14,7 +15,7 @@ export default class Checkbox extends React.Component<IProps, IState> {
     super(props)
 
     this.state = {
-      checked: false
+      checked: props.checked
     }
   }
 
diff --git a/src/ui/components/common/ProgressBar.css b/src/ui/components/common/ProgressBar.css
index d4efbad..a942c6b 100644
--- a/src/ui/components/common/ProgressBar.css
+++ b/src/ui/components/common/ProgressBar.css
@@ -18,4 +18,8 @@
 .InnerProgress {
   height: 100%;
   background-color: #00a8ff;
+}
+
+.ProgressText {
+  color: #fff;
 }
\ No newline at end of file
diff --git a/src/ui/components/common/ProgressBar.tsx b/src/ui/components/common/ProgressBar.tsx
index e468627..5aace8d 100644
--- a/src/ui/components/common/ProgressBar.tsx
+++ b/src/ui/components/common/ProgressBar.tsx
@@ -33,8 +33,6 @@ export default class ProgressBar extends React.Component<IProps, IState> {
         total: prog?.total || 0,
       })
 
-      console.log(prog)
-
       if (this.state.status === 'finished' /* || this.state.status === 'error' */) {
         // Ensure progress is 100%