diff --git a/assets/web/apps.html b/assets/web/apps.html
index d63f8260..4f49f7da 100644
--- a/assets/web/apps.html
+++ b/assets/web/apps.html
@@ -1,6 +1,8 @@
 <div id="app" class="container">
-  <h1>Applications</h1>
-  <div>Applications are refreshed only when Client is restarted</div>
+  <div class="my-4">
+    <h1>Applications</h1>
+    <div>Applications are refreshed only when Client is restarted</div>
+  </div>
   <table class="table">
     <thead>
       <tr>
diff --git a/assets/web/config.html b/assets/web/config.html
index b2b642cb..356e4d45 100644
--- a/assets/web/config.html
+++ b/assets/web/config.html
@@ -55,6 +55,43 @@
                 <div class="form-text">How long to wait in milliseconds for data from moonlight before shutting down the
                     stream</div>
             </div>
+            <!--Advertised FPS and Resolutions-->
+            <div class="mb-3">
+                <label for="ping_timeout" class="form-label">Advertised Resolutions and FPS</label>
+                <div class="resolutions-container">
+                    <label>Resolutions</label>
+                    <div class="resolutions d-flex flex-wrap">
+                        <div class="p-2 ms-item m-2 d-flex justify-content-between" v-for="(r,i) in resolutions" :key="r">
+                            <span class="px-2">{{r}}</span>
+                            <span style="cursor: pointer;" @click="resolutions.splice(i,1)">&times;</span>
+                        </div>
+                        <form @submit.prevent="resolutions.push(resIn);resIn = '';" class="d-flex align-items-center">
+                            <input type="text" v-model="resIn" required pattern="[0-9]+x[0-9]+" style="border-top-right-radius: 0;border-bottom-right-radius: 0;" class="form-control">
+                            <button style="border-top-left-radius: 0;border-bottom-left-radius: 0;" class="btn btn-success">+</button>
+                        </form>
+                    </div>
+                </div>
+                <div class="fps-container">
+                    <label>FPS</label>
+                    <div class="fps d-flex flex-wrap">
+                        <div class="p-2 ms-item m-2 d-flex justify-content-between" v-for="(f,i) in fps" :key="f">
+                            <span class="px-2">{{f}}</span>
+                            <span style="cursor: pointer;" @click="fps.splice(i,1)">&times;</span>
+                        </div>
+                        <form @submit.prevent="fps.push(fpsIn);fpsIn = '';" class="d-flex align-items-center">
+                            <input type="text" v-model="fpsIn" required pattern="[0-9]+" 
+                            style="width: 6ch;border-top-right-radius: 0;border-bottom-right-radius: 0;" class="form-control">
+                            <button style="border-top-left-radius: 0;border-bottom-left-radius: 0;" class="btn btn-success">+</button>
+                        </form>
+                    </div>
+                </div>
+                <div class="form-text">
+                    The display modes advertised by Sunshine<br>
+                    Some versions of Moonlight, such as Moonlight-nx (Switch),
+                    rely on this list to ensure that the requested resolutions and fps
+                    are supported.
+                </div>
+            </div>
         </div>
         <!--Files Tab-->
         <div v-if="currentTab === 'files'" class="config-page">
@@ -98,7 +135,7 @@
                 </div>
             </div>
             <!-- Key Repeat Delay-->
-            <div class="mb-3" v-if="config.platform === 'windows'">
+            <div class="mb-3" v-if="platform === 'windows'">
                 <label for="key_repeat_delay" class="form-label">Key Repeat Delay</label>
                 <input type="text" class="form-control" id="key_repeat_delay" placeholder="500" v-model="config.key_repeat_delay">
                 <div class="form-text">
@@ -107,7 +144,7 @@
                 </div>
             </div>
             <!-- Key Repeat Frequency-->
-            <div class="mb-3" v-if="config.platform === 'windows'">
+            <div class="mb-3" v-if="platform === 'windows'">
                 <label for="key_repeat_frequency" class="form-label">Key Repeat Frequency</label>
                 <input type="text" class="form-control" id="key_repeat_frequency" placeholder="24.9" v-model="config.key_repeat_frequency">
                 <div class="form-text">
@@ -122,27 +159,36 @@
             <div class="mb-3">
                 <label for="audio_sink" class="form-label">Audio Sink</label>
                 <input type="text" class="form-control" id="audio_sink" placeholder="" v-model="config.audio_sink">
-                <div class="form-text" v-if="config.platform === 'windows'">
+                <div class="form-text" v-if="platform === 'windows'">
                     The name of the audio sink used for Audio Loopback<br>
                     You can find the name of the audio sink using the following command:<br>
-                    tools\audio-info.exe
+                    <pre>tools\audio-info.exe</pre>
                 </div>
-                <div class="form-text" v-if="config.platform === 'linux'">
+                <div class="form-text" v-if="platform === 'linux'">
                     The name of the audio sink used for Audio Loopback<br>
                     If you do not specify this variable, pulseaudio will select the default monitor device.<br>
                     <br>
                     You can find the name of the audio sink using the following command:<br>
-                    pacmd list-sources | grep "name:"<br>
+                    <pre>pacmd list-sinks | grep "name:"</pre><br>
+                </div>
+            </div>
+            <!--Virtual Sink-->
+            <div class="mb-3" v-if="platform === 'windows'">
+                <label for="virtual_sink" class="form-label">Virtual Sink</label>
+                <input type="text" class="form-control" id="virtual_sink" placeholder="{0.0.0.00000000}.{8edba70c-1125-467c-b89c-15da389bc1d4}" v-model="config.virtual_sink">
+                <div class="form-text">
+                    The virtual sink, is the audio device that's virtual (Like Steam Streaming Speakers), it allows Sunshine
+                    to stream audio, while muting the speakers.
                 </div>
             </div>
             <!--Adapter Name -->
-            <div class="mb-3" v-if="config.platform === 'windows'">
+            <div class="mb-3" v-if="platform === 'windows'">
                 <label for="adapter_name" class="form-label">Adapter Name</label>
                 <input type="text" class="form-control" id="adapter_name" placeholder="Radeon RX 580 Series" v-model="config.adapter_name">
                 <div class="form-text">
                     You can select the video card you want to stream:<br>
                     The appropriate values can be found using the following command:<br>
-                    tools\dxgi-info.exe
+                    <pre>tools\dxgi-info.exe</pre>
                 </div>
             </div>
             <!--Output Name -->
@@ -154,9 +200,7 @@
                     The appropriate values can be found using the following command:<br>
                     tools\dxgi-info.exe<br>
                     !! Linux only !!<br>
-                    Set the display number to stream. I have no idea how they are numbered. They start from 1,
-                    usually.<br>
-                    output_name = 1<br>
+                    Set the display number to stream. I have no idea how they are numbered. They start from 0, usually.<br>
                 </div>
             </div>
         </div>
@@ -214,7 +258,7 @@
             <div class="mb-3">
                 <label for="encoder" class="form-label">Force a Specific Encoder</label>
                 <select id="encoder" class="form-select" v-model="config.encoder">
-                    <option value="null">Autodetect</option>
+                    <option :value="''">Autodetect</option>
                     <option value="nvenc">nVidia NVENC</option>
                     <option value="amdvce">AMD AMF/VCE</option>
                     <option value="software">Software</option>
@@ -252,12 +296,12 @@
         <!--Software Settings-->
         <div v-if="currentTab === 'sw'" class="config-page">
             <div class="mb-3">
-                <label for="sw_preset" class="form-label" v-model="config.sw_preset">SW Presets</label>
-                <input class="form-control" id="sw_preset" placeholder="superfast">
+                <label for="sw_preset" class="form-label" >SW Presets</label>
+                <input class="form-control" id="sw_preset" placeholder="superfast" v-model="config.sw_preset">
             </div>
             <div class="mb-3">
-                <label for="sw_tune" class="form-label" v-model="config.sw_tune">SW Tune</label>
-                <input class="form-control" id="sw_tune" placeholder="zerolatency">
+                <label for="sw_tune" class="form-label">SW Tune</label>
+                <input class="form-control" id="sw_tune" placeholder="zerolatency" v-model="config.sw_tune">
             </div>
         </div>
         <!--Nvidia Encoder Settings-->
@@ -293,7 +337,7 @@
                 </select>
             </div>
             <div class="mb-3">
-                <label for="nv_coder" class="form-label">NVEnc Rate Control</label>
+                <label for="nv_coder" class="form-label">NVEnc Coder</label>
                 <select id="nv_coder" class="form-select" v-model="config.nv_coder">
                     <option value="auto">auto</option>
                     <option value="cabac">cabac</option>
@@ -332,6 +376,7 @@
             </div>
         </div>
     </div>
+    <div class="alert alert-success my-4" v-if="success"><b>Success!</b> Restart Sunshine to apply changes</div>
     <div class="mb-3 buttons">
         <button class="btn btn-primary" @click="save">Save</button>
     </div>
@@ -342,8 +387,14 @@
         el: '#app',
         data() {
             return {
+                platform: '',
+                success: false,
                 config: null,
+                fps: [],
+                resolutions: [],
                 currentTab: 'general',
+                resIn: '',
+                fpsIn: '',
                 tabs: [{
                         id: 'general',
                         name: "General"
@@ -381,16 +432,41 @@
         },
         created() {
             fetch("/api/config").then(r => r.json()).then((r) => {
-                this.config = r;
+                this.config                     = r;
+                this.platform = this.config.platform;
+                delete this.config.status;
+                delete this.config.platform;
+                //Populate default values if not present in config
+                this.config.min_log_level       = this.config.min_log_level || 2;
+                this.config.origin_pin_allowed  = this.config.origin_pin_allowed || "lan";
+                this.config.hevc_mode           = this.config.hevc_mode || 0;
+                this.config.encoder             = this.config.encoder || '';
+                this.config.nv_preset           = this.config.nv_preset || 'default';
+                this.config.nv_rc               = this.config.nv_rc || 'auto';
+                this.config.nv_coder            = this.config.nv_coder || 'auto';
+                this.config.amd_quality         = this.config.amd_quality || 'default';
+                this.config.amd_rc              = this.config.amd_rc || 'auto';
+                this.config.fps                 = this.config.fps || '[10, 30, 60, 90, 120]';
+                this.config.resolutions         = this.config.resolutions || '[352x240,480x360,858x480,1280x720,1920x1080,2560x1080,3440x1440,1920x1200,3860x2160,3840x1600]';
+                this.fps = JSON.parse(this.config.fps);
+                //Resolutions should be fixed because are not valid JSON
+                let res = this.config.resolutions.substring(1,this.config.resolutions.length-1);
+                let resolutions = [];
+                res.split(",").forEach(r => resolutions.push(r.trim()));
+                this.resolutions = resolutions;
             })
         },
         methods: {
             save() {
+                this.success = false;
+                let nl = this.config === 'windows' ? "\r\n" : "\n";
+                this.config.resolutions = "[" + nl + "    " + this.resolutions.join("," + nl + "    ") + nl + "]";
+                this.config.fps = JSON.stringify(this.fps);
                 fetch("/api/config", {
                     method: "POST",
                     body: JSON.stringify(this.config)
                 }).then((r) => {
-                    if (r.status == 200) document.location.reload();
+                    if (r.status == 200)this.success = true;
                 });
             }
         }
@@ -407,4 +483,10 @@
     .buttons {
         padding: 1em 0;
     }
+
+    .ms-item {
+        background-color: #CCC;
+        font-size: 12px;
+        font-weight: bold;
+    }
 </style>
\ No newline at end of file
diff --git a/assets/web/index.html b/assets/web/index.html
index 376f8613..4b02f845 100644
--- a/assets/web/index.html
+++ b/assets/web/index.html
@@ -1,4 +1,9 @@
 <div id="content" class="container">
-    <h1>Hello, Sunshine!</h1>
-    <p>Sunshine is a Gamestream host for Moonlight</p>
+    <div class="row">
+        <div class="col-md-6 py-4" style="margin: 0 auto;">
+            <h1>Hello, Sunshine!</h1>
+            <p>Sunshine is a Gamestream host for Moonlight</p>
+            <a href="https://github.com/loki-47-6F-64/sunshine">Official GitHub Repository</a>
+        </div>
+    </div>
 </div>
\ No newline at end of file
diff --git a/assets/web/pin.html b/assets/web/pin.html
index 811a1796..d2db2af2 100644
--- a/assets/web/pin.html
+++ b/assets/web/pin.html
@@ -1,7 +1,15 @@
+
 <div id="content" class="container">
-    <form action="" class="form" id="form">
-        <input type="number" placeholder="PIN" id="pin-input">
-        <button class="btn btn-primary">Send</button>
+    <h1 class="my-4">PIN Pairing</h1>
+    <form action="" class="form d-flex flex-column align-items-center" id="form">
+        <div class="card flex-column d-flex p-4 mb-4">
+            <input type="number" placeholder="PIN" id="pin-input" class="form-control my-4">
+            <button class="btn btn-primary">Send</button>
+        </div>
+        <div class="alert alert-warning">
+            <b>Warning!</b> Make sure you have access to the client you are pairing with.<br>
+            This software can give total control to your computer, so be careful!
+        </div>
         <div id="status"></div>
     </form>
 </div>