Merge branch 'master' of https://github.com/ajayyy/SponsorBlock into chapters

17 files changed, 797 insertions, 305 deletions

diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json
index 1a94a6fa..a9f04433 100644
--- a/public/_locales/en/messages.json
+++ b/public/_locales/en/messages.json
@@ -111,7 +111,7 @@
         "message": "It seems the server is down. Contact the dev immediately."
     },
     "connectionError": {
-        "message": "A connection error has occured. Error code: "
+        "message": "A connection error has occurred. Error code: "
     },
     "clearTimes": {
         "message": "Clear Segments"
@@ -249,6 +249,9 @@
     "showSkipNotice": {
         "message": "Show Notice After A Segment Is Skipped"
     },
+    "showCategoryGuidelines": {
+        "message": "Show Category Help"
+    },
     "noticeVisibilityMode0": {
         "message": "Full Size Skip Notices"
     },
@@ -366,7 +369,7 @@
         "message": "Show Time With Skips Removed"
     },
     "showTimeWithSkipsDescription": {
-        "message": "This time appears in brackets next to the current time on below the seekbar. This shows the total video duration minus any segments. This includes segments marked as only \"Show In Seekbar\"."
+        "message": "This time appears in brackets next to the current time on below the Seek Bar. This shows the total video duration minus any segments. This includes segments marked as only \"Show In Seek Bar\"."
     },
     "youHaveSkipped": {
         "message": "You've skipped "
@@ -420,7 +423,7 @@
         "message": "Supported Sites: "
     },
     "optionsInfo": {
-        "message": "Enable Invidious support, disable autoskip, hide buttons and more."
+        "message": "Enable Invidious support, disable auto skip, hide buttons and more."
     },
     "addInvidiousInstance": {
         "message": "Add 3rd-Party Client Instance"
@@ -509,7 +512,7 @@
     "incorrectlyFormattedOptions": {
         "message": "This JSON is not formatted correctly. Your options have not been changed."
     },
-    "confirmNoticeTitle" : {
+    "confirmNoticeTitle": {
         "message": "Submit Segment"
     },
     "submit": {
@@ -552,18 +555,39 @@
         "message": "to",
         "description": "Used between segments. Example: 1:20 to 1:30"
     },
+    "generic_guideline1": {
+        "message": "Include segue transitions"
+    },
+    "generic_guideline2": {
+        "message": "Plays as if nothing was skipped"
+    },
     "category_sponsor": {
         "message": "Sponsor"
     },
     "category_sponsor_description": {
         "message": "Paid promotion, paid referrals and direct advertisements. Not for self-promotion or free shoutouts to causes/creators/websites/products they like."
     },
+    "category_sponsor_guideline1": {
+        "message": "Paid promotions"
+    },
+    "category_sponsor_guideline2": {
+        "message": "Not for donations or custom merch"
+    },
     "category_selfpromo": {
         "message": "Unpaid/Self Promotion"
     },
     "category_selfpromo_description": {
         "message": "Similar to \"sponsor\" except for unpaid or self promotion. This includes sections about merchandise, donations, or information about who they collaborated with."
     },
+    "category_selfpromo_guideline1": {
+        "message": "Donations, memberships and custom merch"
+    },
+    "category_selfpromo_guideline2": {
+        "message": "Free shoutouts that don't add to the video"
+    },
+    "category_selfpromo_guideline3": {
+        "message": "Not for corporate designed products and merch"
+    },
     "category_exclusive_access": {
         "message": "Exclusive Access"
     },
@@ -574,12 +598,24 @@
         "message": "This video showcases a product, service or location that they've received free or subsidized access to",
         "description": "Short description for this category"
     },
+    "category_exclusive_access_guideline1": {
+        "message": "Entire video showcases something with free or subsidized access"
+    },
     "category_interaction": {
         "message": "Interaction Reminder (Subscribe)"
     },
     "category_interaction_description": {
         "message": "When there is a short reminder to like, subscribe or follow them in the middle of content. If it is long or about something specific, it should be under self promotion instead."
     },
+    "category_interaction_guideline1": {
+        "message": "Short reminders to like, subscribe or follow"
+    },
+    "category_interaction_guideline2": {
+        "message": "Includes indirect reminders to comment"
+    },
+    "category_interaction_guideline3": {
+        "message": "Not for general promotion, only calls to action"
+    },
     "category_interaction_short": {
         "message": "Interaction Reminder"
     },
@@ -592,18 +628,36 @@
     "category_intro_short": {
         "message": "Intermission"
     },
+    "category_intro_guideline1": {
+        "message": "Interval without actual content"
+    },
+    "category_intro_guideline2": {
+        "message": "Not for transitions with information"
+    },
     "category_outro": {
         "message": "Endcards/Credits"
     },
     "category_outro_description": {
         "message": "Credits or when the YouTube endcards appear. Not for conclusions with information."
     },
+    "category_outro_guideline1": {
+        "message": "Don't include content, even if endcards are on screen"
+    },
     "category_preview": {
         "message": "Preview/Recap"
     },
     "category_preview_description": {
         "message": "Quick recap of previous episodes, or a preview of what's coming up later in the current video. Meant for edited together clips, not for spoken summaries."
     },
+    "category_preview_guideline1": {
+        "message": "Clips that appear later, or in a future video"
+    },
+    "category_preview_guideline2": {
+        "message": "Recap of a previous video"
+    },
+    "category_preview_guideline3": {
+        "message": "Not for sections that add additional content"
+    },
     "category_filler": {
         "message": "Filler Tangent/Jokes"
     },
@@ -613,6 +667,15 @@
     "category_filler_short": {
         "message": "Filler"
     },
+    "category_filler_guideline1": {
+        "message": "Tangential scenes only for filler or humor"
+    },
+    "category_filler_guideline2": {
+        "message": "Distractions, bloopers, replays"
+    },
+    "category_filler_guideline3": {
+        "message": "Not for scenes required to understand the topic"
+    },
     "category_music_offtopic": {
         "message": "Music: Non-Music Section"
     },
@@ -622,12 +685,27 @@
     "category_music_offtopic_short": {
         "message": "Non-Music"
     },
+    "category_music_offtopic_guideline1": {
+        "message": "Sections not in official releases"
+    },
+    "category_music_offtopic_guideline2": {
+        "message": "Non-music in a live performance"
+    },
     "category_poi_highlight": {
         "message": "Highlight"
     },
     "category_poi_highlight_description": {
         "message": "The part of the video that most people are looking for. Similar to \"Video starts at x\" comments."
     },
+    "category_poi_highlight_guideline1": {
+        "message": "Section most people are looking for"
+    },
+    "category_poi_highlight_guideline2": {
+        "message": "Can skip context"
+    },
+    "category_poi_highlight_guideline3": {
+        "message": "Can skip to the title or thumbnail"
+    },
     "category_chapter": {
         "message": "Chapter"
     },
@@ -883,7 +961,10 @@
     "LearnMore": {
         "message": "Learn More"
     },
-	  "CopyDownvoteButtonInfo": {
+    "FullDetails": {
+        "message": "Full Details"
+    },
+	"CopyDownvoteButtonInfo": {
         "message": "Downvotes and creates a local copy for you to resubmit"
     },
     "OpenCategoryWikiPage": {
@@ -963,5 +1044,11 @@
     },
     "openOptionsPage": {
         "message": "Open options page"
+    },
+    "resetToDefault": {
+        "message": "Reset settings to default"
+    },
+    "confirmResetToDefault": {
+        "message": "Are you sure you want to reset all settings to their default values? This cannot be undone."
     }
 }
diff --git a/public/_locales/sv/messages.json b/public/_locales/sv/messages.json
index 37ab100e..0b8e4e06 100644
--- a/public/_locales/sv/messages.json
+++ b/public/_locales/sv/messages.json
@@ -186,7 +186,7 @@
         "message": "Detta döljer knapparna på YouTube-spelaren som du kan skicka in segment med som ska hoppas över."
     },
     "showSkipButton": {
-        "message": "Behåll knappen hoppa till markerat på spelaren"
+        "message": "Behåll knappen hoppa till höjdpunkt på spelaren"
     },
     "showInfoButton": {
         "message": "Visa Infoknapp På YouTube-spelaren"
@@ -613,7 +613,7 @@
         "message": "Icke-musik"
     },
     "category_poi_highlight": {
-        "message": "Markera"
+        "message": "Höjdpunkt"
     },
     "category_poi_highlight_description": {
         "message": "Den del av videon som de flesta letar efter. Liknande kommentarer \"Video börjar på x\"."
diff --git a/public/content.css b/public/content.css
index 8bd293fe..1ece0212 100644
--- a/public/content.css
+++ b/public/content.css
@@ -190,9 +190,6 @@ div:hover > .sponsorBlockChapterBar {
 }
 
 .sponsorSkipNoticeParent, .sponsorSkipNotice {
-	min-width: 350px;
-	max-width: 50%;
-
 	border-spacing: var(--skip-notice-border-horizontal) var(--skip-notice-border-vertical);
 	padding-left: var(--skip-notice-padding);
 	padding-right: var(--skip-notice-padding);
@@ -200,6 +197,15 @@ div:hover > .sponsorBlockChapterBar {
 	border-collapse: unset;
 }
 
+.sponsorSkipNoticeParent {
+	min-width: 350px;
+	max-width: 50%;
+}
+
+.sponsorSkipNotice {
+	width: 100%;
+}
+
 .sponsorSkipNoticeTableContainer {
 	background-color: rgba(28, 28, 28, 0.9);
 	border-radius: 5px;
@@ -211,7 +217,7 @@ div:hover > .sponsorBlockChapterBar {
 }
 
 .sponsorSkipNoticeLimitWidth {
-	min-width: calc(100% - 50px);
+	max-width: calc(100% - 50px);
 }
 
 .sponsorSkipNotice .hidden {
@@ -386,6 +392,22 @@ div:hover > .sponsorBlockChapterBar {
     color: rgb(235, 235, 235);
 }
 
+.sb-guidelines-notice .sponsorTimesInfoMessage td {
+	padding-left: 5px;
+	padding-top: 2px;
+	padding-bottom: 2px;
+    font-size: 15px;
+
+	display: flex;
+	align-items: center;
+}
+
+.sponsorTimesInfoIcon {
+	width: 30px;
+	padding-right: 10px;
+    padding-left: 10px;
+}
+
 .segmentSummary {
 	outline: none !important;
 }
diff --git a/public/icons/bolt.svg b/public/icons/bolt.svg
new file mode 100644
index 00000000..9c56393e
--- /dev/null
+++ b/public/icons/bolt.svg
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   height="48"
+   width="48"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="bolt.svg"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04, custom)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     id="namedview6"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="13.125"
+     inkscape:cx="24"
+     inkscape:cy="24"
+     inkscape:window-width="1920"
+     inkscape:window-height="983"
+     inkscape:window-x="482"
+     inkscape:window-y="768"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4" />
+  <path
+     d="M19.95 42 22 27.9H14.7Q14.15 27.9 13.9 27.4Q13.65 26.9 13.9 26.45L26.15 6H28.2L26.15 20.05H33.35Q33.9 20.05 34.175 20.55Q34.45 21.05 34.2 21.5L22 42Z"
+     id="path2"
+     style="fill:#ffffff" />
+</svg>
diff --git a/public/icons/campaign.svg b/public/icons/campaign.svg
new file mode 100644
index 00000000..e31763a7
--- /dev/null
+++ b/public/icons/campaign.svg
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   height="48"
+   width="48"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="campaign.svg"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04, custom)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     id="namedview6"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="13.125"
+     inkscape:cx="24"
+     inkscape:cy="24"
+     inkscape:window-width="1920"
+     inkscape:window-height="983"
+     inkscape:window-x="482"
+     inkscape:window-y="768"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4" />
+  <path
+     d="M36.5 25.5V22.5H44V25.5ZM39 40 32.95 35.5 34.75 33.1 40.8 37.6ZM34.9 14.85 33.1 12.45 39 8 40.8 10.4ZM10.5 38V30H7Q5.75 30 4.875 29.125Q4 28.25 4 27V21Q4 19.75 4.875 18.875Q5.75 18 7 18H16L26 12V36L16 30H13.5V38ZM28 30.7V17.3Q29.35 18.5 30.175 20.225Q31 21.95 31 24Q31 26.05 30.175 27.775Q29.35 29.5 28 30.7Z"
+     id="path2"
+     style="fill:#ffffff" />
+</svg>
diff --git a/public/icons/check-smaller.svg b/public/icons/check-smaller.svg
new file mode 100644
index 00000000..cf9533d8
--- /dev/null
+++ b/public/icons/check-smaller.svg
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="24"
+   height="24"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="check-smaller.svg"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04, custom)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     id="namedview6"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="26.25"
+     inkscape:cx="12.038095"
+     inkscape:cy="12"
+     inkscape:window-width="1920"
+     inkscape:window-height="983"
+     inkscape:window-x="482"
+     inkscape:window-y="768"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4" />
+  <path
+     fill="#ffffff"
+     d="M 17.69347,4.9833775 9.9421192,12.940517 6.3065298,9.5107153 3.7684768,12.048769 9.9421192,18.016623 20.231523,7.5214304 Z"
+     id="path2"
+     style="stroke-width:0.68596" />
+</svg>
diff --git a/public/icons/close-smaller.svg b/public/icons/close-smaller.svg
new file mode 100644
index 00000000..9a740f53
--- /dev/null
+++ b/public/icons/close-smaller.svg
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   height="48"
+   width="48"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="close-smaller.svg"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04, custom)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     id="namedview6"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="13.125"
+     inkscape:cx="24"
+     inkscape:cy="24"
+     inkscape:window-width="1366"
+     inkscape:window-height="731"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4" />
+  <path
+     d="M12.45 37.65 10.35 35.55 21.9 24 10.35 12.45 12.45 10.35 24 21.9 35.55 10.35 37.65 12.45 26.1 24 37.65 35.55 35.55 37.65 24 26.1Z"
+     id="path2"
+     style="fill:#ffffff" />
+</svg>
diff --git a/public/icons/lightbulb.svg b/public/icons/lightbulb.svg
new file mode 100644
index 00000000..8b7d434b
--- /dev/null
+++ b/public/icons/lightbulb.svg
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   height="48"
+   width="48"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="lightbulb.svg"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04, custom)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     id="namedview6"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="13.125"
+     inkscape:cx="24"
+     inkscape:cy="24"
+     inkscape:window-width="1920"
+     inkscape:window-height="983"
+     inkscape:window-x="482"
+     inkscape:window-y="768"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4" />
+  <path
+     d="M24 44Q22.3 44 21.125 42.825Q19.95 41.65 19.95 39.95H28.05Q28.05 41.65 26.875 42.825Q25.7 44 24 44ZM15.9 36.85V33.85H32.1V36.85ZM16.15 30.8Q12.85 28.65 10.925 25.425Q9 22.2 9 18.15Q9 12.05 13.45 7.6Q17.9 3.15 24 3.15Q30.1 3.15 34.55 7.6Q39 12.05 39 18.15Q39 22.2 37.1 25.425Q35.2 28.65 31.85 30.8Z"
+     id="path2"
+     style="fill:#ffffff" />
+</svg>
diff --git a/public/icons/money.svg b/public/icons/money.svg
new file mode 100644
index 00000000..fde5f8a9
--- /dev/null
+++ b/public/icons/money.svg
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   height="48"
+   width="48"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="money.svg"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04, custom)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     id="namedview6"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="6.5625"
+     inkscape:cx="37.942857"
+     inkscape:cy="29.714286"
+     inkscape:window-width="1366"
+     inkscape:window-height="731"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4" />
+  <path
+     d="M 22.070204,47.757552 V 42.214123 Q 18.308592,41.554191 15.89984,39.343419 13.491088,37.132647 12.435197,33.766994 l 3.695619,-1.517844 q 1.121884,3.167674 3.233667,4.718514 2.111782,1.55084 5.081476,1.55084 3.167674,0 5.213463,-1.583837 2.045789,-1.583837 2.045789,-4.355551 0,-2.903701 -1.814813,-4.487538 -1.814813,-1.583836 -6.830296,-3.233666 -4.75151,-1.517844 -7.094269,-4.025586 -2.342759,-2.507741 -2.342759,-6.269354 0,-3.629626 2.342759,-6.0713741 2.342759,-2.4417484 6.104371,-2.7717144 V 0.24244792 h 3.959592 V 5.7198835 q 2.969694,0.329966 5.114473,1.9467994 2.144779,1.6168335 3.266663,4.1245751 l -3.695619,1.583837 q -0.923905,-2.111783 -2.474745,-3.068684 -1.55084,-0.9569014 -4.058582,-0.9569014 -3.035687,0 -4.817503,1.3858574 -1.781817,1.385857 -1.781817,3.761612 0,2.507742 1.979796,4.058582 1.979796,1.55084 7.325246,3.20067 4.487537,1.385857 6.632316,3.992589 2.144779,2.606731 2.144779,6.566323 0,4.157572 -2.441748,6.69831 -2.441749,2.540738 -7.193259,3.266663 v 5.477436 z"
+     id="path2"
+     style="fill:#ffffff;stroke-width:1.31986" />
+</svg>
diff --git a/public/icons/music-note.svg b/public/icons/music-note.svg
new file mode 100644
index 00000000..3bfd3616
--- /dev/null
+++ b/public/icons/music-note.svg
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   height="48"
+   width="48"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="music-note.svg"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04, custom)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     id="namedview6"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="13.125"
+     inkscape:cx="24"
+     inkscape:cy="24"
+     inkscape:window-width="1920"
+     inkscape:window-height="983"
+     inkscape:window-x="482"
+     inkscape:window-y="768"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4" />
+  <path
+     d="M19.65 42Q16.5 42 14.325 39.825Q12.15 37.65 12.15 34.5Q12.15 31.35 14.325 29.175Q16.5 27 19.65 27Q21.05 27 22.175 27.4Q23.3 27.8 24.15 28.5V6H35.85V12.75H27.15V34.5Q27.15 37.65 24.975 39.825Q22.8 42 19.65 42Z"
+     id="path2"
+     style="fill:#ffffff" />
+</svg>
diff --git a/public/icons/right-arrow.svg b/public/icons/right-arrow.svg
new file mode 100644
index 00000000..57459f77
--- /dev/null
+++ b/public/icons/right-arrow.svg
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   height="48"
+   width="48"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="right-arrow.svg"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04, custom)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     id="namedview6"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="13.125"
+     inkscape:cx="24.07619"
+     inkscape:cy="24"
+     inkscape:window-width="1920"
+     inkscape:window-height="983"
+     inkscape:window-x="482"
+     inkscape:window-y="768"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4" />
+  <path
+     d="M 17.039265,39.62264 14.838095,37.382164 28.320259,23.9 14.838095,10.417836 17.039265,8.1773601 32.761905,23.9 Z"
+     id="path2"
+     style="fill:#ffffff;stroke-width:0.786132" />
+</svg>
diff --git a/public/icons/segway.png b/public/icons/segway.png
new file mode 100644
index 00000000..b1057c13
--- /dev/null
+++ b/public/icons/segway.png
diff --git a/public/icons/star.svg b/public/icons/star.svg
new file mode 100644
index 00000000..cb19a372
--- /dev/null
+++ b/public/icons/star.svg
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   height="48"
+   width="48"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="star.svg"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04, custom)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     id="namedview6"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="13.125"
+     inkscape:cx="24"
+     inkscape:cy="24"
+     inkscape:window-width="1920"
+     inkscape:window-height="983"
+     inkscape:window-x="482"
+     inkscape:window-y="768"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4" />
+  <path
+     d="M11.65 44 16.3 28.8 4 20H19.2L24 4L28.8 20H44L31.7 28.8L36.35 44L24 34.6Z"
+     id="path2"
+     style="fill:#ffffff" />
+</svg>
diff --git a/public/icons/stopwatch.svg b/public/icons/stopwatch.svg
new file mode 100644
index 00000000..56f9c1c7
--- /dev/null
+++ b/public/icons/stopwatch.svg
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   height="48"
+   width="48"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="stopwatch.svg"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04, custom)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     id="namedview6"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="13.125"
+     inkscape:cx="24"
+     inkscape:cy="24"
+     inkscape:window-width="1920"
+     inkscape:window-height="983"
+     inkscape:window-x="482"
+     inkscape:window-y="768"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4" />
+  <path
+     d="M14.45 34Q16.3 35.95 18.8 36.975Q21.3 38 24 38Q29.85 38 33.925 33.925Q38 29.85 38 24Q38 18.15 33.925 14.075Q29.85 10 24 10V24ZM24 44Q19.75 44 16.1 42.475Q12.45 40.95 9.75 38.25Q7.05 35.55 5.525 31.9Q4 28.25 4 24Q4 19.8 5.525 16.15Q7.05 12.5 9.75 9.8Q12.45 7.1 16.1 5.55Q19.75 4 24 4Q28.2 4 31.85 5.55Q35.5 7.1 38.2 9.8Q40.9 12.5 42.45 16.15Q44 19.8 44 24Q44 28.25 42.45 31.9Q40.9 35.55 38.2 38.25Q35.5 40.95 31.85 42.475Q28.2 44 24 44Z"
+     id="path2"
+     style="fill:#ffffff" />
+</svg>
diff --git a/public/options/options.html b/public/options/options.html
index 0888f23b..4fb7bf77 100644
--- a/public/options/options.html
+++ b/public/options/options.html
@@ -187,6 +187,18 @@
 						<option value="4">__MSG_noticeVisibilityMode4__</option>
 					</select>
 				</div>
+
+				<div data-type="toggle" data-sync="showCategoryGuidelines">
+					<div class="switch-container">
+						<label class="switch">
+							<input id="showCategoryGuidelines" type="checkbox" checked>
+							<span class="slider round"></span>
+						</label>
+						<label class="switch-label" for="showCategoryGuidelines">
+							__MSG_showCategoryGuidelines__
+						</label>
+					</div>
+				</div>
 	
 				<div data-type="toggle" data-toggle-type="reverse" data-sync="hideVideoPlayerControls">
 					<div class="switch-container">
@@ -380,6 +392,12 @@
 					</div>
 				</div>
 
+				<div data-type="button-press" data-sync="resetToDefault" data-confirm-message="confirmResetToDefault">
+					<div class="option-button trigger-button">
+						__MSG_resetToDefault__
+					</div>
+				</div>
+
 			</div>
 
 			<div id="advanced" class="option-group hidden">
diff --git a/public/popup.css b/public/popup.css
index 545e7177..ac55cbeb 100644
--- a/public/popup.css
+++ b/public/popup.css
@@ -1,40 +1,52 @@
 :root {
   --sb-main-font-family: "Source Sans Pro", sans-serif;
-  --sb-main-bg-color: #222626;
+  --sb-main-bg-color: #222;
   --sb-main-fg-color: #fff;
   --sb-grey-bg-color: #333;
+  --sb-grey-fg-color: #999;
   --sb-red-bg-color: #cc1717;
 }
 
 /*
- * Container when popup displayed in-page
+ * Generic utilities
  */
-
-#sponsorBlockPopupContainer {
+.grey-text {
+  color: var(--sb-grey-fg-color);
+}
+.white-text {
+  color: var(--sb-main-fg-color);
+}
+.sbHeader {
+  font-size: 20px;
+  font-weight: bold;
+  text-align: left;
+  margin: 0;
+}
+#sponsorBlockPopupBody .u-mZ {
+  margin: 0 !important;
   position: relative;
-  margin-bottom: 16px;
 }
 
-/*
- * Disable popup max height when displayed in-page
- */
-
-#sponsorBlockPopupContainer #sponsorBlockPopupHTML {
-  max-height: none;
+#sponsorBlockPopupBody .hidden {
+  display: none !important;
 }
 
 /*
- * Disable fixed popup width when displayed in-page
+ * <button> elements that have icons
  */
-
-#sponsorBlockPopupContainer #sponsorBlockPopupBody {
-  width: auto;
-}
+ #setUsernameButton,
+ #copyUserID,
+ #submitUsername {
+   color: var(--sb-main-fg-color);
+   background: transparent;
+   width: fit-content;
+   padding: none;
+   border: none;
+ }
 
 /*
  * Main containers
  */
-
 #sponsorBlockPopupHTML {
   color-scheme: dark;
   max-height: 600px;
@@ -45,8 +57,8 @@
   margin: 0;
   width: 374px;
   max-width: 100%; /* NOTE: Ensures content doesn't exceed restricted popup widths in Firefox */
-  font-family: var(--sb-main-font-family);
   font-size: 14px;
+  font-family: var(--sb-main-font-family);
   background-color: var(--sb-main-bg-color);
   color: var(--sb-main-fg-color);
   color-scheme: dark;
@@ -64,15 +76,47 @@
 /*
  * Disable transition on all elements until the extension has loaded
  */
-
 .sb-preload * {
   transition: none !important;
 }
 
 /*
- * Close popup button when displayed in-page
+ * Alert indicating that Beta server is enabled
  */
+#sbBetaServerWarning {
+  padding: 8px;
+  font-size: 1em;
+  font-weight: 700;
+  color: var(--sb-main-fg-color);
+  background-color: var(--sb-red-bg-color);
+  cursor: pointer;
+}
 
+/*
+ * Container when popup displayed in-page (content.ts)
+ */
+#sponsorBlockPopupContainer {
+  position: relative;
+  margin-bottom: 16px;
+}
+
+/*
+ * Disable popup max height when displayed in-page (content.ts)
+ */
+#sponsorBlockPopupContainer #sponsorBlockPopupHTML {
+  max-height: none;
+}
+
+/*
+ * Disable fixed popup width when displayed in-page (content.ts)
+ */
+#sponsorBlockPopupContainer #sponsorBlockPopupBody {
+  width: auto;
+}
+
+/*
+ * Close popup button when displayed in-page (top-right corner)
+ */
 .sbCloseButton {
   background: transparent;
   border: 0;
@@ -89,50 +133,33 @@
 }
 
 /*
- * Alert indicating that Beta server is enabled
- */
-
-#sbBetaServerWarning {
-  padding: 8px;
-  font-size: 1em;
-  font-weight: 700;
-  color: var(--sb-main-fg-color);
-  background-color: var(--sb-red-bg-color);
-  cursor: pointer;
-}
-
-/*
  * Header logo
  */
-
 .sbPopupLogo {
   display: flex;
   align-items: center;
-  font-size: 32px;
-  font-weight: bold;
   justify-content: center;
+  font-weight: bold;
   user-select: none;
-  padding: 20px 0 10px;
+  padding: 10px 0px 0px;
+  font-size: 32px;
 }
-
 .sbPopupLogo img {
-  margin-right: 8px;
+  margin: 8px;
 }
 
 /*
  * Refresh segments button
  */
-
 #refreshSegmentsButton {
+  display: flex;
+  align-items: center;
   background: transparent;
-  border: 0;
   border-radius: 50%;
-  display: flex;
-  padding: 5px;
   margin: 5px auto;
-  align-items: center;
+  border: none;
+  padding: 5px;
 }
-
 #refreshSegmentsButton:hover {
   background-color: var(--sb-grey-bg-color);
 }
@@ -140,15 +167,14 @@
 /*
  * <details> wrapper around each segment
  */
-
 .votingButtons {
   font-family: Arial, Helvetica, sans-serif;
+  border-radius: 8px;
+  margin: 4px 16px;
 }
-
 .votingButtons[open] {
   padding-bottom: 5px;
 }
-
 .votingButtons:hover {
   background-color: var(--sb-grey-bg-color);
 }
@@ -156,34 +182,46 @@
 /*
  * Individual segments summaries (clickable <summary>)
  */
-
 .segmentSummary {
-  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  white-space: nowrap;
   font-weight: bold;
-  padding: 7px;
   list-style: none;
-  white-space: nowrap;
+  cursor: pointer;
+  padding: 4px 8px;
+}
+.segmentSummary > div {
+  text-align: left;
 }
-
 /*
  * Category dot in segment
  */
-
 .sponsorTimesCategoryColorCircle {
-  margin: 0 8px;
+  margin-right: 8px;
 }
-
 .dot {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   display: inline-block;
 }
+/* 
+ * Category name in segment
+ */
+.summaryLabel {
+  overflow-wrap: break-word;
+  white-space: normal;
+}
+
+.sbVoteButtonsContainer {
+  text-align: right;
+}
 
 /*
  * Buttons that appear under a segment on click
  */
-
 .voteButton {
   height: 20px;
   padding: 0 5px;
@@ -197,7 +235,6 @@
 /*
  * "Voted!" text that appears after voting on a segment
  */
-
 .sponsorTimesThanksForVotingText {
   font-size: large;
 }
@@ -205,353 +242,302 @@
 /*
  * Main controls menu
  */
-
 .sbControlsMenu {
+  margin: 16px;
+  margin-top: 6px;
+  border-radius: 8px;
   background-color: var(--sb-grey-bg-color);
-  display: flex;
   justify-content: space-evenly;
-  margin-top: 10px;
+  overflow: hidden;
+  display: flex;
 }
-
 .sbControlsMenu-item {
-  background: transparent;
-  border: 0;
-  cursor: pointer;
-  user-select: none;
-  padding: 10px 15px;
-  flex: 1;
   display: flex;
-  flex-direction: column;
   align-items: center;
+  flex-direction: column;
   justify-content: center;
+  background: transparent;
+  user-select: none;
+  cursor: pointer;
+  border: none;
+  flex: 1;
+  padding: 10px 15px;
+  trasition: background-color 0.2s ease-in-out;
 }
-
 .sbControlsMenu-item:hover {
   background-color: #444;
 }
-
 .sbControlsMenu-itemIcon {
   margin-bottom: 6px;
 }
 
 /*
- * "Skipping is enabled" toggle
+ * Whitelist add/remove icon
  */
+.SBWhitelistIcon > path {
+  fill: var(--sb-main-fg-color);
+}
+.SBWhitelistIcon.rotated {
+  transform: rotate(45deg);
+}
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
 
+/*
+ * "Skipping is enabled" toggle
+ */
 .toggleSwitchContainer {
   display: flex;
-  flex-direction: column;
   align-items: center;
+  flex-direction: column;
 }
-
 .toggleSwitchContainer-switch {
   display: flex;
   margin-bottom: 6px;
 }
-
 .switchBg {
-  display: block;
   width: 50px;
   height: 23px;
+  display: block;
   border-radius: 18.5px;
 }
-
 .switchBg.shadow {
   box-shadow: 0.75px 0.75px 10px 0px rgba(50, 50, 50, 0.5);
   opacity: 1;
 }
-
 .switchBg.white {
+  opacity: 1;
   position: absolute;
   background-color: #ccc;
-  opacity: 1;
 }
-
 .switchBg.green {
+  opacity: 0;
   position: absolute;
   background-color: #00a205;
-  opacity: 0;
   transition: opacity 0.2s ease-out;
 }
-
 .switchDot {
-  background-color: var(--sb-main-fg-color);
-  border-radius: 50%;
   width: 15px;
-  height: 15px;
   margin: 4px;
+  height: 15px;
+  border-radius: 50%;
   position: absolute;
-  box-shadow: 0.75px 0.75px 3.8px 0px rgba(50, 50, 50, 0.45);
   transition: transform 0.2s ease-out;
+  background-color: var(--sb-main-fg-color);
+  box-shadow: 0.75px 0.75px 3.8px 0px rgba(50, 50, 50, 0.45);
 }
-
 #toggleSwitch:checked ~ .switchDot {
   transform: translateX(27px);
 }
-
 #toggleSwitch:checked ~ .switchBg.green {
   opacity: 1;
 }
-
 #toggleSwitch:checked ~ .switchBg.white {
-  opacity: 0;
   transition: opacity 0.2s step-end;
-}
-
-/*
- * Whitelist add/remove icon
- */
-
-.SBWhitelistIcon > path {
-  fill: var(--sb-main-fg-color);
-}
-
-.SBWhitelistIcon.rotated {
-  transform: rotate(45deg);
-}
-
-@keyframes rotate {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+  opacity: 0;
 }
 
 /*
  * Notice that appears when whitelisting a channel, that recommends
  * enabling the "Force Channel Check Before Skipping" option
  */
-
 #whitelistForceCheck {
   background-color: #fff3cd;
-  color: #664d03;
-  display: block;
   padding: 10px 15px;
+  display: block;
+  color: #664d03;
 }
-
 #whitelistForceCheck:hover {
   background-color: #f2e4b7;
 }
 
 /*
- * Container around the "Segment Starts Now" and "Submit Times" buttons
+ * Submit box
  */
-
 #mainControls {
-  margin-bottom: 12px;
+  margin: 16px;
+  padding: 8px 12px;
+  text-align: left;
+  border-radius: 8px;
+  border: 2px solid var(--sb-grey-bg-color);
 }
-
 .sponsorStartHint {
   display: block;
-  padding: 0 10px 12px;
+  text-align: left;
 }
 
 /*
  * Generic buttons used for "Segment Starts Now" and "Submit Times"
  */
-
 .sbMediumButton {
-  background-color: var(--sb-red-bg-color);
-  border: 0;
-  -moz-border-radius: 28px;
-  -webkit-border-radius: 28px;
+  border: none;
+  font-size: 16px;
+  padding: 8px 16px;
   border-radius: 28px;
   display: inline-block;
+  -moz-border-radius: 28px;
+  -webkit-border-radius: 28px;
   color: var(--sb-main-fg-color);
-  font-size: 16px;
-  padding: 8px 37px;
-  font-family: var(--sb-main-font-family);
   transition: 0.01s background-color;
+  font-family: var(--sb-main-font-family);
+  background-color: var(--sb-red-bg-color);
 }
-
 .sbMediumButton:hover,
 .sbMediumButton:focus {
-  outline: none;
   background-color: #ec1c1c;
+  outline: none;
 }
-
 .sbMediumButton:active {
   position: relative;
   top: 1px;
 }
-
 /*
  * "Submit Times" button
  */
-
 #submitTimes {
   margin-top: 12px;
 }
 
 /*
- * Heading utility class
+ * Your Work box
  */
-
-.sbHeader {
-  font-size: 20px;
-  font-weight: bold;
-  margin: 10px 0 5px;
-}
-
-/*
- * Side-by-side section of "Your Work"
- */
-
 .sbYourWorkCols {
-  display: flex;
-  margin: 0 20px 12px;
+  margin: 16px;
+  margin-bottom: 8px;
+  border-radius: 8px;
+  border: 2px solid var(--sb-grey-bg-color);
 }
-
 .sbYourWorkCols > div {
   display: flex;
-  align-items: center;
-  flex-basis: 50%;
-  justify-content: center;
-}
-
-/*
- * <button> elements that have icons
- */
-
-#setUsernameButton,
-#copyUserID,
-#submitUsername {
-  background: transparent;
-  border: 0;
-  padding: 0;
-  color: var(--sb-main-fg-color);
-  width: fit-content;
-}
-
-/*
- * Prevent username from wrapping
- */
-
-#setUsernameButton {
-  flex: 0 1;
-  margin-right: 5px;
+  border-top: 2px solid var(--sb-grey-bg-color);
+  border-bottom: 2px solid var(--sb-grey-bg-color);
 }
 
-/*
- * Set username button
- */
-
-#submitUsername {
-  padding-left: 7px;
+.sbStatsSentence {
+  padding-top: 5px;
+  padding-bottom: 5px;
 }
 
 /*
  * Increase font size of username input and display
  */
-
 #usernameValue,
 #usernameInput,
 #sponsorTimesContributionsDisplay {
   font-size: 16px;
   flex: 1 0;
 }
-
-/*
- * Left align "Username" and "Submissions" labels
+ /*
+ * Improve alignment of username and submissions
  */
-
-#usernameElement > div > p,
+#usernameElement,
+#sponsorTimesContributionsContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+}
+#usernameElement > span,
 #sponsorTimesContributionsContainer {
   text-align: start;
 }
 
-/*
- * Enable flexbox for buttons with SVG icon
- */
-
-#setUsernameContainer > button {
-  display: flex;
+#sponsorTimesContributionsContainer {
+  margin-left: 8px;
+  padding-left: 8px;
+  border-left: 2px solid var(--sb-grey-bg-color);
 }
 
 /*
- * Improve position of "Copy User ID" button
+ * Username
  */
-
-#copyUserID {
-  width: 100%;
-  flex: 0 1;
+#usernameElement {
+  padding: 8px;
 }
-
-/*
- * Container around username display and edit
- */
-
 #setUsernameContainer {
   display: flex;
 }
-
-/*
- * Improve alignment of username and submissions
- */
-
-#usernameElement > div,
-#sponsorTimesContributionsContainer > div {
+#setUsernameContainer > button {
   display: flex;
-  flex-flow: column nowrap;
-  align-items: flex-start;
 }
-
+#setUsernameButton {
+  margin-right: 5px;
+  flex: 0 1;
+}
+#submitUsername {
+  padding-left: 16px;
+}
+#copyUserID {
+  width: 100%;
+  flex: 0 1;
+}
 /*
  * Truncate username display
  */
-
 #usernameValue {
-  overflow: hidden;
   text-overflow: ellipsis;
-  max-width: 130px;
+  white-space: nowrap;
+  overflow: hidden;
   margin: 0 8px 0 0;
+  max-width: 130px;
 }
-
 /*
  * Set username form container with "expanded" state
  */
-
-#setUsername {
-  display: flex;
-}
-
 #setUsername.SBExpanded {
-  width: 200%;
+  width: calc(200% - 130px);
+  text-align: left;
 }
-
 /*
  * Set username input
  */
-
 #usernameInput {
-  background: transparent;
-  padding: 2px;
-  border: var(--sb-main-fg-color) 1px solid;
-  color: var(--sb-main-fg-color);
-  width: calc(100% - 24px);
+  border: none;
+  padding: 4px 8px;
+  border-radius: 4px;
+  width: calc(100% - 68px);
   text-overflow: ellipsis;
+  color: var(--sb-main-fg-color);
+  background: var(--sb-grey-bg-color);
+}
+
+/* 
+ * Submissions
+*/
+#sponsorTimesContributionsContainer {
+  padding: 8px;
 }
 
 /*
  * Footer
  */
-
 #sbFooter {
-  margin-top: 10px;
-  padding-bottom: 20px;
+  padding: 8px 0;
 }
-
 #sbFooter a {
+  transition: background 0.3s ease !important;
   color: var(--sb-main-fg-color);
+  display: inline-block;
   text-decoration: none;
+  border-radius: 4px;
+  background: #333;
+  cursor: pointer;
+  padding: 4px 8px;
+  font-weight: 500;
+  margin: 2px 1px;
+}
+#sbFooter a:hover {
+  background: #444;
 }
 
 /*
  * "Show Notice Again" button
  */
-
 #showNoticeAgain {
   background: transparent;
   border: 1px solid #fff;
@@ -561,11 +547,7 @@
   padding: 5px;
 }
 
-/*
- * Generic utilities
- */
-
- #sponsorBlockPopupBody .u-mZ {
+#sponsorBlockPopupBody .u-mZ {
   margin: 0 !important;
 }
 
diff --git a/public/popup.html b/public/popup.html
index 6470a8ff..104badf2 100644
--- a/public/popup.html
+++ b/public/popup.html
@@ -8,9 +8,13 @@
     <link id="sponsorBlockStyleSheet" href="popup.css" rel="stylesheet">
   </head>
 
-  <body id="sponsorBlockPopupBody">
+  <body id="sponsorBlockPopupBody" style="visibility: hidden">
     <div id="sponsorblockPopup" class="sponsorBlockPageBody sb-preload">
 
+      <button id="sbCloseButton" title="__MSG_closePopup__" class="sbCloseButton hidden">
+        <img src="icons/close.png" width="15" height="15">
+      </button>
+
       <div id="sbBetaServerWarning" class="hidden" title="__MSG_openOptionsPage__">
         __MSG_betaServerWarning__
       </div>
@@ -19,15 +23,16 @@
         <img src="icons/IconSponsorBlocker256px.png" alt="SponsorBlock" width="40" height="40" id="sponsorBlockPopupLogo">
         <p class="u-mZ">SponsorBlock</p>
       </header>
-
+      
       <div id="videoInfo">
         <!-- Loading text -->
-        <p id="loadingIndicator" class="u-mZ">__MSG_noVideoID__</p>
+        <p id="loadingIndicator" class="u-mZ grey-text">__MSG_noVideoID__</p>
         <!-- If the video was found in the database -->
-        <p id="videoFound" class="u-mZ"></p>
+        <p id="videoFound" class="u-mZ grey-text"></p>
         <button id="refreshSegmentsButton" title="__MSG_refreshSegments__">
           <img src="/icons/refresh.svg" alt="Refresh icon" id="refreshSegments" />
         </button>
+        <!-- Video Segments -->
         <div id="issueReporterContainer">
           <div id="issueReporterTabs" class="hidden">
             <span id="issueReporterTabSegments" class="sbSelected">
@@ -40,7 +45,8 @@
           <div id="issueReporterTimeButtons"></div>
         </div>
       </div>
-
+      
+      <!-- Toggle Box -->
       <div class="sbControlsMenu">
         <label id="whitelistButton" for="whitelistToggle" class="hidden sbControlsMenu-item">
           <input type="checkbox" style="display:none;" id="whitelistToggle">
@@ -72,25 +78,31 @@
         __MSG_forceChannelCheckPopup__
       </a>
 
+      <!-- Submit box -->
       <div id="mainControls" style="display: none">
         <p class="sbHeader">
           __MSG_recordTimesDescription__
         </p>
-        <sub class="sponsorStartHint">__MSG_popupHint__</sub>
-        <div>
-          <button id="sponsorStart" class="sbMediumButton">__MSG_sponsorStart__</button>
-        </div>
-        <div id="submissionSection" style="display: none">
-          <b style="display: block; margin-top: 12px;">__MSG_submissionEditHint__</b>
-          <button id="submitTimes" class="sbMediumButton">__MSG_submitTimesButton__</button>
+        <sub class="sponsorStartHint grey-text">__MSG_popupHint__</sub>
+        <div align="center" style="margin: 8px 0;">  
+          <button id="sponsorStart" class="sbMediumButton" style="margin-right: 8px">__MSG_sponsorStart__</button>
+          <button id="submitTimes" class="sbMediumButton" style="display: none; margin: 0 !important;">__MSG_submitTimesButton__</button>
         </div>
+        <span id="submissionHint" style="display: none;">__MSG_submissionEditHint__</span>
       </div>
 
-      <h1 class="recordingSubtitle sbHeader">__MSG_yourWork__</h1>
+      <!-- Your Work box -->
       <div class="sbYourWorkCols">
-        <div id="usernameElement">
-          <div>
-            <p class="u-mZ">__MSG_Username__:</p>
+        <p class="sbHeader" style="padding: 8px 16px; cursor: pointer;">
+          __MSG_yourWork__
+        </p>
+        <div>
+          <!-- Username -->
+          <div id="usernameElement">
+            <span class="u-mZ grey-text">__MSG_Username__:
+              <!-- loading/errors -->
+              <span id="setUsernameStatus" class="u-mZ white-text" style="display: none"></span>
+            </span>
             <div id="setUsernameContainer">
               <p id="usernameValue"></p>
               <button id="setUsernameButton" title="__MSG_setUsername__">
@@ -101,48 +113,48 @@
               </button>
             </div>
             <div id="setUsername" style="display: none">
-              <div id="setUsernameStatusContainer" style="display: none">
-                <p id="setUsernameStatus" class="u-mZ"></p>
-              </div>
               <input id="usernameInput" placeholder="Username">
               <button id="submitUsername">
                 <img src="/icons/check.svg" alt="__MSG_setUsername__" width="16" height="16" id="sbPopupIconCheck">
               </button>
             </div>
           </div>
-        </div>
-        <div id="sponsorTimesContributionsContainer" class="hidden">
-          <div>
-            <p class="u-mZ">__MSG_Submissions__:</p>
-            <span id="sponsorTimesContributionsDisplay">
-              0
-            </span>
+          <!-- Submissions -->
+          <div id="sponsorTimesContributionsContainer" class="hidden">
+            <p class="u-mZ grey-text">__MSG_Submissions__:</p>
+            <span id="sponsorTimesContributionsDisplay">0</span>
           </div>
         </div>
-      </div>
 
-      <p id="sponsorTimesViewsContainer" style="display: none" class="u-mZ">
-        __MSG_savedPeopleFrom__
-        <b><span id="sponsorTimesViewsDisplay">
-            0
-          </span></b>
-        <span id="sponsorTimesViewsDisplayEndWord">__MSG_Segments__</span>
-        <br>
-        (<b><span id="sponsorTimesOthersTimeSavedDisplay">0</span>
-          <span id="sponsorTimesOthersTimeSavedEndWord">__MSG_minsLower__</span></b>
-        <span>__MSG_youHaveSavedTimeEnd__</span>).
-      </p>
-      <p id="sponsorTimesSkipsDoneContainer" style="display: none" class="u-mZ">
-        __MSG_youHaveSkipped__
-        <b><span id="sponsorTimesSkipsDoneDisplay">
-            0
-          </span></b>
-        <span id="sponsorTimesSkipsDoneEndWord">__MSG_Segments__</span>
-        (<b><span id="sponsorTimeSavedDisplay">
-            0
-          </span>
-          <span id="sponsorTimeSavedEndWord">__MSG_minsLower__</span></b>).
-      </p>
+        <p id="sponsorTimesViewsContainer" style="display: none" class="u-mZ sbStatsSentence">
+          __MSG_savedPeopleFrom__
+          <b>
+            <span id="sponsorTimesViewsDisplay">0</span>
+          </b>
+          <span id="sponsorTimesViewsDisplayEndWord">__MSG_Segments__</span>
+          <br />
+          (
+          <b>
+            <span id="sponsorTimesOthersTimeSavedDisplay">0</span>
+            <span id="sponsorTimesOthersTimeSavedEndWord">__MSG_minsLower__</span>
+          </b>
+          <span>__MSG_youHaveSavedTimeEnd__</span>
+          )
+        </p>
+        <p id="sponsorTimesSkipsDoneContainer" style="display: none" class="u-mZ sbStatsSentence">
+          __MSG_youHaveSkipped__
+          <b>
+            <span id="sponsorTimesSkipsDoneDisplay">0</span>
+          </b>
+          <span id="sponsorTimesSkipsDoneEndWord">__MSG_Segments__</span>
+          (
+            <b>
+              <span id="sponsorTimeSavedDisplay">0</span>
+              <span id="sponsorTimeSavedEndWord">__MSG_minsLower__</span>
+            </b>
+          )
+        </p>
+      </div>
 
       <footer id="sbFooter">
         <div id="sponsorTimesDonateContainer" style="display: none; align-items: center; justify-content: center;">
@@ -153,13 +165,13 @@
           <img id="sbCloseDonate" src="/icons/close.png" alt="Close icon" height="8" style="padding-left: 5px; cursor: pointer;" />
         </div>
 
-        <a href="https://sponsor.ajay.app" target="_blank" rel="noopener">__MSG_website__</a> |
-        <a href="https://sponsor.ajay.app/stats" target="_blank" rel="noopener">__MSG_viewLeaderboard__</a> |
+        <a id="helpButton">__MSG_help__</a>
+        <a href="https://sponsor.ajay.app" target="_blank" rel="noopener">__MSG_website__</a>
+        <a href="https://sponsor.ajay.app/stats" target="_blank" rel="noopener">__MSG_viewLeaderboard__</a>
+        <br />
         <a href="https://github.com/ajayyy/SponsorBlock" target="_blank" rel="noopener">GitHub</a>
-        <br/>
-        <a href="https://discord.gg/SponsorBlock" target="_blank" rel="noopener">Discord</a> |
-        <a href="https://matrix.to/#/#sponsor:ajay.app?via=ajay.app&via=matrix.org&via=mozilla.org" target="_blank" rel="noopener">Matrix</a> |
-        <a id="helpButton">__MSG_help__</a> |
+        <a href="https://discord.gg/SponsorBlock" target="_blank" rel="noopener">Discord</a>
+        <a href="https://matrix.to/#/#sponsor:ajay.app?via=ajay.app&via=matrix.org&via=mozilla.org" target="_blank" rel="noopener">Matrix</a>
         <a href="https://sponsor.ajay.app/donate" target="_blank" rel="noopener" id="sbDonate">$</a>
       </footer>