diff --git a/WebHostLib/static/styles/weightedOptions/weightedOptions.css b/WebHostLib/static/styles/weightedOptions/weightedOptions.css
index 8d8643db7f83..31cef5a3e948 100644
--- a/WebHostLib/static/styles/weightedOptions/weightedOptions.css
+++ b/WebHostLib/static/styles/weightedOptions/weightedOptions.css
@@ -14,32 +14,26 @@ html {
   padding: 1rem;
   color: #eeffeb;
 }
-
 #weighted-settings h3 {
   cursor: unset;
 }
-
 #weighted-settings h3.option-group-header {
   margin-top: 0.75rem;
   font-weight: bold;
 }
-
 #weighted-settings #games-wrapper {
   width: 100%;
 }
-
 #weighted-settings .setting-wrapper {
   width: 100%;
   margin-bottom: 2rem;
 }
-
 #weighted-settings .setting-wrapper .add-option-div {
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   margin-bottom: 1rem;
 }
-
 #weighted-settings .setting-wrapper .add-option-div button {
   width: auto;
   height: auto;
@@ -48,156 +42,58 @@ html {
   border-radius: 4px;
   cursor: default;
 }
-
 #weighted-settings .setting-wrapper .add-option-div button:active {
   margin-bottom: 1px;
 }
-
 #weighted-settings p.setting-description {
   margin: 0 0 1rem;
 }
-
 #weighted-settings p.hint-text {
   margin: 0 0 1rem;
   font-style: italic;
 }
-
 #weighted-settings .jump-link {
   color: #ffef00;
   cursor: pointer;
   text-decoration: underline;
 }
-
 #weighted-settings table {
   width: 100%;
 }
-
 #weighted-settings table th, #weighted-settings table td {
   border: none;
 }
-
 #weighted-settings table td {
   padding: 5px;
 }
-
 #weighted-settings table .td-left {
   font-family: LexendDeca-Regular, sans-serif;
   padding-right: 1rem;
   width: 200px;
 }
-
 #weighted-settings table .td-middle {
   display: flex;
   flex-direction: column;
   justify-content: space-evenly;
   padding-right: 1rem;
 }
-
 #weighted-settings table .td-right {
   width: 4rem;
   text-align: right;
 }
-
 #weighted-settings table .td-delete {
   width: 50px;
   text-align: right;
 }
-
 #weighted-settings table .range-option-delete {
   cursor: pointer;
 }
-
-#weighted-settings .items-wrapper {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
-
-#weighted-settings .items-div h3 {
-  margin-bottom: 0.5rem;
-}
-
-#weighted-settings .items-wrapper .item-set-wrapper {
-  width: 24%;
-  font-weight: bold;
-}
-
-#weighted-settings .item-container {
-  border: 1px solid #ffffff;
-  border-radius: 2px;
-  width: 100%;
-  height: 300px;
-  overflow-y: auto;
-  overflow-x: hidden;
-  margin-top: 0.125rem;
-  font-weight: normal;
-}
-
-#weighted-settings .item-container .item-div {
-  padding: 0.125rem 0.5rem;
-  cursor: pointer;
-}
-
-#weighted-settings .item-container .item-div:hover {
-  background-color: rgba(0, 0, 0, 0.1);
-}
-
-#weighted-settings .item-container .item-qty-div {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  padding: 0.125rem 0.5rem;
-  cursor: pointer;
-}
-
-#weighted-settings .item-container .item-qty-div .item-qty-input-wrapper {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-}
-
-#weighted-settings .item-container .item-qty-div input {
-  min-width: unset;
-  width: 1.5rem;
-  text-align: center;
-}
-
-#weighted-settings .item-container .item-qty-div:hover {
-  background-color: rgba(0, 0, 0, 0.1);
-}
-
-#weighted-settings .hints-div, #weighted-settings .locations-div {
-  margin-top: 2rem;
-}
-
-#weighted-settings .hints-div h3, #weighted-settings .locations-div h3 {
-  margin-bottom: 0.5rem;
-}
-
-#weighted-settings .hints-container, #weighted-settings .locations-container {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
-
-#weighted-settings .hints-wrapper, #weighted-settings .locations-wrapper {
-  width: calc(50% - 0.5rem);
-  font-weight: bold;
-}
-
-#weighted-settings .hints-wrapper .simple-list, #weighted-settings .locations-wrapper .simple-list {
-  margin-top: 0.25rem;
-  height: 300px;
-  font-weight: normal;
-}
-
 #weighted-settings #weighted-settings-button-row {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   margin-top: 15px;
 }
-
 #weighted-settings code {
   background-color: #d9cd8e;
   border-radius: 4px;
@@ -205,7 +101,6 @@ html {
   padding-right: 0.25rem;
   color: #000000;
 }
-
 #weighted-settings #user-message {
   display: none;
   width: calc(100% - 8px);
@@ -215,12 +110,10 @@ html {
   padding: 4px;
   text-align: center;
 }
-
 #weighted-settings #user-message.visible {
   display: block;
   cursor: pointer;
 }
-
 #weighted-settings h1 {
   font-size: 2.5rem;
   font-weight: normal;
@@ -230,7 +123,6 @@ html {
   color: #ffffff;
   text-shadow: 1px 1px 4px #000000;
 }
-
 #weighted-settings h2 {
   font-size: 2rem;
   font-weight: normal;
@@ -241,29 +133,24 @@ html {
   text-transform: none;
   text-shadow: 1px 1px 2px #000000;
 }
-
 #weighted-settings h3, #weighted-settings h4, #weighted-settings h5, #weighted-settings h6 {
   color: #ffffff;
   text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
   text-transform: none;
 }
-
 #weighted-settings a {
   color: #ffef00;
   cursor: pointer;
 }
-
 #weighted-settings input:not([type]) {
   border: 1px solid #000000;
   padding: 3px;
   border-radius: 3px;
   min-width: 150px;
 }
-
 #weighted-settings input:not([type]):focus {
   border: 1px solid #ffffff;
 }
-
 #weighted-settings select {
   border: 1px solid #000000;
   padding: 3px;
@@ -271,41 +158,6 @@ html {
   min-width: 150px;
   background-color: #ffffff;
 }
-
-#weighted-settings .game-options, #weighted-settings .rom-options {
-  display: flex;
-  flex-direction: column;
-}
-
-#weighted-settings .simple-list {
-  display: flex;
-  flex-direction: column;
-  max-height: 300px;
-  overflow-y: auto;
-  border: 1px solid #ffffff;
-  border-radius: 4px;
-}
-
-#weighted-settings .simple-list .list-row label {
-  display: block;
-  width: calc(100% - 0.5rem);
-  padding: 0.0625rem 0.25rem;
-}
-
-#weighted-settings .simple-list .list-row label:hover {
-  background-color: rgba(0, 0, 0, 0.1);
-}
-
-#weighted-settings .simple-list .list-row label input[type=checkbox] {
-  margin-right: 0.5rem;
-}
-
-#weighted-settings .simple-list hr {
-  width: calc(100% - 2px);
-  margin: 2px auto;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
-}
-
 #weighted-settings .invisible {
   display: none;
 }
diff --git a/WebHostLib/static/styles/weightedOptions/weightedOptions.css.map b/WebHostLib/static/styles/weightedOptions/weightedOptions.css.map
index 5dccba1e2c82..86b4e406522e 100644
--- a/WebHostLib/static/styles/weightedOptions/weightedOptions.css.map
+++ b/WebHostLib/static/styles/weightedOptions/weightedOptions.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["weightedOptions.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;EAEA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;IACI;IACA;;EAGJ;IACI;IACA","file":"weightedOptions.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["weightedOptions.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;EACA;;AAIR;EACI;;AAGJ;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAOZ;EACI;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;EACA;;AAGJ;EACI;;AAEA;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAIR;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;;;AAIR;EACI;IACI;IACA;;EAGJ;IACI;IACA","file":"weightedOptions.css"}
\ No newline at end of file
diff --git a/WebHostLib/static/styles/weightedOptions/weightedOptions.scss b/WebHostLib/static/styles/weightedOptions/weightedOptions.scss
index 48f779aef27d..a3845cfc14de 100644
--- a/WebHostLib/static/styles/weightedOptions/weightedOptions.scss
+++ b/WebHostLib/static/styles/weightedOptions/weightedOptions.scss
@@ -13,302 +13,185 @@ html{
     border-radius: 8px;
     padding: 1rem;
     color: #eeffeb;
-}
-
-#weighted-settings h3{
-    cursor: unset;
-}
-
-#weighted-settings h3.option-group-header{
-    margin-top: 0.75rem;
-    font-weight: bold;
-}
-
-#weighted-settings #games-wrapper{
-    width: 100%;
-}
-
-#weighted-settings .setting-wrapper{
-    width: 100%;
-    margin-bottom: 2rem;
-}
-
-#weighted-settings .setting-wrapper .add-option-div{
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    margin-bottom: 1rem;
-}
-
-#weighted-settings .setting-wrapper .add-option-div button{
-    width: auto;
-    height: auto;
-    margin: 0 0 0 0.15rem;
-    padding: 0 0.25rem;
-    border-radius: 4px;
-    cursor: default;
-}
-
-#weighted-settings .setting-wrapper .add-option-div button:active{
-    margin-bottom: 1px;
-}
-
-#weighted-settings p.setting-description{
-    margin: 0 0 1rem;
-}
-
-#weighted-settings p.hint-text{
-    margin: 0 0 1rem;
-    font-style: italic;
-}
-
-#weighted-settings .jump-link{
-    color: #ffef00;
-    cursor: pointer;
-    text-decoration: underline;
-}
-
-#weighted-settings table{
-    width: 100%;
-}
-
-#weighted-settings table th, #weighted-settings table td{
-    border: none;
-}
-
-#weighted-settings table td{
-    padding: 5px;
-}
-
-#weighted-settings table .td-left{
-    font-family: LexendDeca-Regular, sans-serif;
-    padding-right: 1rem;
-    width: 200px;
-}
-
-#weighted-settings table .td-middle{
-    display: flex;
-    flex-direction: column;
-    justify-content: space-evenly;
-    padding-right: 1rem;
-}
-
-#weighted-settings table .td-right{
-    width: 4rem;
-    text-align: right;
-}
-
-#weighted-settings table .td-delete{
-    width: 50px;
-    text-align: right;
-}
-
-#weighted-settings table .range-option-delete{
-    cursor: pointer;
-}
-
-#weighted-settings .items-wrapper{
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-}
-
-#weighted-settings .items-div h3{
-    margin-bottom: 0.5rem;
-}
-
-#weighted-settings .items-wrapper .item-set-wrapper{
-    width: 24%;
-    font-weight: bold;
-}
-
-#weighted-settings .item-container{
-    border: 1px solid #ffffff;
-    border-radius: 2px;
-    width: 100%;
-    height: 300px;
-    overflow-y: auto;
-    overflow-x: hidden;
-    margin-top: 0.125rem;
-    font-weight: normal;
-}
-
-#weighted-settings .item-container .item-div{
-    padding: 0.125rem 0.5rem;
-    cursor: pointer;
-}
-
-#weighted-settings .item-container .item-div:hover{
-    background-color: rgba(0, 0, 0, 0.1);
-}
-
-#weighted-settings .item-container .item-qty-div{
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    padding: 0.125rem 0.5rem;
-    cursor: pointer;
-}
-
-#weighted-settings .item-container .item-qty-div .item-qty-input-wrapper{
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-}
 
-#weighted-settings .item-container .item-qty-div input{
-    min-width: unset;
-    width: 1.5rem;
-    text-align: center;
-}
+    h3{
+        cursor: unset;
 
-#weighted-settings .item-container .item-qty-div:hover{
-    background-color: rgba(0, 0, 0, 0.1);
-}
-
-#weighted-settings .hints-div, #weighted-settings .locations-div{
-    margin-top: 2rem;
-}
-
-#weighted-settings .hints-div h3, #weighted-settings .locations-div h3{
-    margin-bottom: 0.5rem;
-}
-
-#weighted-settings .hints-container, #weighted-settings .locations-container{
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-}
-
-#weighted-settings .hints-wrapper, #weighted-settings .locations-wrapper{
-    width: calc(50% - 0.5rem);
-    font-weight: bold;
-}
-
-#weighted-settings .hints-wrapper .simple-list, #weighted-settings .locations-wrapper .simple-list{
-    margin-top: 0.25rem;
-    height: 300px;
-    font-weight: normal;
-}
-
-#weighted-settings #weighted-settings-button-row{
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    margin-top: 15px;
-}
-
-#weighted-settings code{
-    background-color: #d9cd8e;
-    border-radius: 4px;
-    padding-left: 0.25rem;
-    padding-right: 0.25rem;
-    color: #000000;
-}
+        &.option-group-header{
+            margin-top: 0.75rem;
+            font-weight: bold;
+        }
+    }
 
-#weighted-settings #user-message{
-    display: none;
-    width: calc(100% - 8px);
-    background-color: #ffe86b;
-    border-radius: 4px;
-    color: #000000;
-    padding: 4px;
-    text-align: center;
-}
+    #games-wrapper{
+        width: 100%;
+    }
 
-#weighted-settings #user-message.visible{
-    display: block;
-    cursor: pointer;
-}
+    .setting-wrapper{
+        width: 100%;
+        margin-bottom: 2rem;
+
+        .add-option-div{
+            display: flex;
+            flex-direction: row;
+            justify-content: flex-start;
+            margin-bottom: 1rem;
+
+            button{
+                width: auto;
+                height: auto;
+                margin: 0 0 0 0.15rem;
+                padding: 0 0.25rem;
+                border-radius: 4px;
+                cursor: default;
+
+                &:active{
+                    margin-bottom: 1px;
+                }
+            }
+        }
+    }
 
-#weighted-settings h1{
-    font-size: 2.5rem;
-    font-weight: normal;
-    border-bottom: 1px solid #ffffff;
-    width: 100%;
-    margin-bottom: 0.5rem;
-    color: #ffffff;
-    text-shadow: 1px 1px 4px #000000;
-}
+    p{
+        &.setting-description{
+            margin: 0 0 1rem;
+        }
 
-#weighted-settings h2{
-    font-size: 2rem;
-    font-weight: normal;
-    border-bottom: 1px solid #ffffff;
-    width: 100%;
-    margin-bottom: 0.5rem;
-    color: #ffe993;
-    text-transform: none;
-    text-shadow: 1px 1px 2px #000000;
-}
+        &.hint-text{
+            margin: 0 0 1rem;
+            font-style: italic;
+        };
+    }
 
-#weighted-settings h3, #weighted-settings h4, #weighted-settings h5, #weighted-settings h6{
-    color: #ffffff;
-    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
-    text-transform: none;
-}
+    .jump-link{
+        color: #ffef00;
+        cursor: pointer;
+        text-decoration: underline;
+    }
 
-#weighted-settings a{
-    color: #ffef00;
-    cursor: pointer;
-}
+    table{
+        width: 100%;
+
+        th, td{
+            border: none;
+        }
+
+        td{
+            padding: 5px;
+        }
+
+        .td-left{
+            font-family: LexendDeca-Regular, sans-serif;
+            padding-right: 1rem;
+            width: 200px;
+        }
+
+        .td-middle{
+            display: flex;
+            flex-direction: column;
+            justify-content: space-evenly;
+            padding-right: 1rem;
+        }
+
+        .td-right{
+            width: 4rem;
+            text-align: right;
+        }
+
+        .td-delete{
+            width: 50px;
+            text-align: right;
+        }
+
+        .range-option-delete{
+            cursor: pointer;
+        }
+    }
 
-#weighted-settings input:not([type]){
-    border: 1px solid #000000;
-    padding: 3px;
-    border-radius: 3px;
-    min-width: 150px;
-}
+    #weighted-settings-button-row{
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        margin-top: 15px;
+    }
 
-#weighted-settings input:not([type]):focus{
-    border: 1px solid #ffffff;
-}
+    code{
+        background-color: #d9cd8e;
+        border-radius: 4px;
+        padding-left: 0.25rem;
+        padding-right: 0.25rem;
+        color: #000000;
+    }
 
-#weighted-settings select{
-    border: 1px solid #000000;
-    padding: 3px;
-    border-radius: 3px;
-    min-width: 150px;
-    background-color: #ffffff;
-}
+    #user-message{
+        display: none;
+        width: calc(100% - 8px);
+        background-color: #ffe86b;
+        border-radius: 4px;
+        color: #000000;
+        padding: 4px;
+        text-align: center;
+
+        &.visible{
+            display: block;
+            cursor: pointer;
+        }
+    }
 
-#weighted-settings .game-options, #weighted-settings .rom-options{
-    display: flex;
-    flex-direction: column;
-}
+    h1{
+        font-size: 2.5rem;
+        font-weight: normal;
+        border-bottom: 1px solid #ffffff;
+        width: 100%;
+        margin-bottom: 0.5rem;
+        color: #ffffff;
+        text-shadow: 1px 1px 4px #000000;
+    }
 
-#weighted-settings .simple-list{
-    display: flex;
-    flex-direction: column;
+    h2{
+        font-size: 2rem;
+        font-weight: normal;
+        border-bottom: 1px solid #ffffff;
+        width: 100%;
+        margin-bottom: 0.5rem;
+        color: #ffe993;
+        text-transform: none;
+        text-shadow: 1px 1px 2px #000000;
+    }
 
-    max-height: 300px;
-    overflow-y: auto;
-    border: 1px solid #ffffff;
-    border-radius: 4px;
-}
+    h3, h4, h5, h6{
+        color: #ffffff;
+        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
+        text-transform: none;
+    }
 
-#weighted-settings .simple-list .list-row label{
-    display: block;
-    width: calc(100% - 0.5rem);
-    padding: 0.0625rem 0.25rem;
-}
+    a{
+        color: #ffef00;
+        cursor: pointer;
+    }
 
-#weighted-settings .simple-list .list-row label:hover{
-    background-color: rgba(0, 0, 0, 0.1);
-}
+    input:not([type]){
+        border: 1px solid #000000;
+        padding: 3px;
+        border-radius: 3px;
+        min-width: 150px;
 
-#weighted-settings .simple-list .list-row label input[type=checkbox]{
-    margin-right: 0.5rem;
-}
+        &:focus{
+            border: 1px solid #ffffff;
+        }
+    }
 
-#weighted-settings .simple-list hr{
-    width: calc(100% - 2px);
-    margin: 2px auto;
-    border-bottom: 1px solid rgb(255 255 255 / 0.6);
-}
+    select{
+        border: 1px solid #000000;
+        padding: 3px;
+        border-radius: 3px;
+        min-width: 150px;
+        background-color: #ffffff;
+    }
 
-#weighted-settings .invisible{
-    display: none;
+    .invisible{
+        display: none;
+    }
 }
 
 @media all and (max-width: 1000px), all and (orientation: portrait){
diff --git a/WebHostLib/templates/weightedOptions/weightedOptions.html b/WebHostLib/templates/weightedOptions/weightedOptions.html
index a3226475e4de..9acf5a1dd009 100644
--- a/WebHostLib/templates/weightedOptions/weightedOptions.html
+++ b/WebHostLib/templates/weightedOptions/weightedOptions.html
@@ -13,8 +13,8 @@
     <div id="weighted-settings" class="markdown" data-game="{{ game }}">
         <div id="user-message"></div>
         <h1>Weighted Options</h1>
-        <p>Weighted options allow you to choose how likely a particular option is to be used in game generation.
-            The higher an option is weighted, the more likely the option will be chosen. Think of them like
+        <p>Weighted options allow you to choose how likely a particular option&apos;s value is to be used in game
+            generation. The higher a value is weighted, the more likely the option will be chosen. Think of them like
             entries in a raffle.</p>
 
         <p>Choose the games and options you would like to play with! You may generate a single-player game from
@@ -29,12 +29,31 @@ <h1>Weighted Options</h1>
         </p>
 
         <div id="game-choice">
-            <!-- User chooses games by weight -->
+            <h2>Game Select</h2>
+            <p class="setting-description">Choose which games you may be required to play.</p>
+            <p class="hint-text">
+                If a game&apos;s value is greater than zero, you may click its name to jump to that section.
+            </p>
+            <table>
+                <tbody>
+                    {% for world_name, world in worlds|dictsort %}
+                        {% if not world.hidden and world.web.options_page == True %}
+                            <tr>
+                                <td class="td-left"><label for="game-{{ world_name }}">{{ world_name }}</label></td>
+                                <td class="td-middle"><input type="range" id="game-{{ world_name }}" name="game-{{ world_name }}" value="0" /></td>
+                                <td class="td-right"><span id="game-{{ world_name }}">0</span></td>
+                            </tr>
+                        {% endif %}
+                    {% endfor %}
+                </tbody>
+            </table>
         </div>
 
-        <!-- To be generated and populated per-game with weight > 0 -->
         <div id="games-wrapper">
-            {{ worlds }}
+            {% for world_name, world in worlds|dictsort %}
+                <h2>{{ world_name }}</h2>
+                Options will go here.
+            {% endfor %}
         </div>
 
         <div id="weighted-settings-button-row">