diff --git a/public/popup.css b/public/popup.css
index 983259a0..5389b183 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;
+}
+
+#sponsorBlockPopupBody .hidden {
+  display: none !important;
 }
 
 /*
- * Disable popup max height when displayed in-page
+ * <button> elements that have icons
  */
-
-#sponsorBlockPopupContainer #sponsorBlockPopupHTML {
-  max-height: none;
-}
-
-/*
- * Disable fixed popup width when displayed in-page
- */
-
-#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;
@@ -88,51 +132,34 @@
   opacity: 1;
 }
 
-/*
- * 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 {
-  background: transparent;
-  border: 0;
-  border-radius: 50%;
   display: flex;
-  padding: 5px;
-  margin: 5px auto;
   align-items: center;
+  background: transparent;
+  border-radius: 50%;
+  margin: 5px auto;
+  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;
-  font-weight: bold;
-  padding: 7px;
-  list-style: none;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   white-space: nowrap;
+  font-weight: bold;
+  list-style: none;
+  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,111 +242,44 @@
 /*
  * 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;
-}
-
-.sbControlsMenu-item {
-  background: transparent;
-  border: 0;
-  cursor: pointer;
-  user-select: none;
-  padding: 10px 15px;
-  flex: 1;
+  overflow: hidden;
   display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
 }
-
+.sbControlsMenu-item {
+  display: flex;
+  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
- */
-
-.toggleSwitchContainer {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.toggleSwitchContainer-switch {
-  display: flex;
-  margin-bottom: 6px;
-}
-
-.switchBg {
-  display: block;
-  width: 50px;
-  height: 23px;
-  border-radius: 18.5px;
-}
-
-.switchBg.shadow {
-  box-shadow: 0.75px 0.75px 10px 0px rgba(50, 50, 50, 0.5);
-  opacity: 1;
-}
-
-.switchBg.white {
-  position: absolute;
-  background-color: #ccc;
-  opacity: 1;
-}
-
-.switchBg.green {
-  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;
-  position: absolute;
-  box-shadow: 0.75px 0.75px 3.8px 0px rgba(50, 50, 50, 0.45);
-  transition: transform 0.2s ease-out;
-}
-
-#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);
@@ -319,239 +289,255 @@
   }
 }
 
+/*
+ * "Skipping is enabled" toggle
+ */
+.toggleSwitchContainer {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+.toggleSwitchContainer-switch {
+  display: flex;
+  margin-bottom: 6px;
+}
+.switchBg {
+  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;
+}
+.switchBg.green {
+  opacity: 0;
+  position: absolute;
+  background-color: #00a205;
+  transition: opacity 0.2s ease-out;
+}
+.switchDot {
+  width: 15px;
+  margin: 4px;
+  height: 15px;
+  border-radius: 50%;
+  position: absolute;
+  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 {
+  transition: opacity 0.2s step-end;
+  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;
+  border-top: 2px solid var(--sb-grey-bg-color);
+  border-bottom: 2px solid var(--sb-grey-bg-color);
 }
 
-/*
- * <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;
-}
-
-/*
- * 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
  */
-
+#usernameElement {
+  padding: 8px;
+}
+#setUsernameContainer {
+  display: flex;
+}
+#setUsernameContainer > button {
+  display: flex;
+}
+#setUsernameButton {
+  margin-right: 5px;
+  flex: 0 1;
+}
+#submitUsername {
+  padding-left: 16px;
+}
 #copyUserID {
   width: 100%;
   flex: 0 1;
 }
-
-/*
- * Container around username display and edit
- */
-
-#setUsernameContainer {
-  display: flex;
-}
-
-/*
- * Improve alignment of username and submissions
- */
-
-#usernameElement > div,
-#sponsorTimesContributionsContainer > div {
-  display: flex;
-  flex-flow: column nowrap;
-  align-items: flex-start;
-}
-
 /*
  * 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;
@@ -560,15 +546,3 @@
   margin-bottom: 20px;
   padding: 5px;
 }
-
-/*
- * Generic utilities
- */
-
- #sponsorBlockPopupBody .u-mZ {
-  margin: 0 !important;
-}
-
-#sponsorBlockPopupBody .hidden {
-  display: none !important;
-}
diff --git a/public/popup.html b/public/popup.html
index 59d58565..6d965b40 100644
--- a/public/popup.html
+++ b/public/popup.html
@@ -23,20 +23,22 @@
         <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="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">
@@ -68,25 +70,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__">
@@ -97,48 +105,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;">
@@ -149,13 +157,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>
 
diff --git a/src/popup.ts b/src/popup.ts
index 92b5fe01..0cb156b5 100644
--- a/src/popup.ts
+++ b/src/popup.ts
@@ -106,7 +106,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
         // Username
         "setUsernameContainer",
         "setUsernameButton",
-        "setUsernameStatusContainer",
+        "setUsernameStatus",
         "setUsernameStatus",
         "setUsername",
         "usernameInput",
@@ -114,7 +114,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
         "submitUsername",
         "sbPopupIconCopyUserID",
         // More
-        "submissionSection",
+        "submissionHint",
         "mainControls",
         "loadingIndicator",
         "videoFound",
@@ -448,15 +448,24 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
                     segmentTimeFromToNode.innerText = chrome.i18n.getMessage("full");
                 } else {
                     segmentTimeFromToNode.innerText = utils.getFormattedTime(segmentTimes[i].segment[0], true) +
-                            (segmentTimes[i].actionType !== ActionType.Poi
-                                ? " " + chrome.i18n.getMessage("to") + " " + utils.getFormattedTime(segmentTimes[i].segment[1], true)
-                                : "");
+                    (segmentTimes[i].actionType !== ActionType.Poi
+                        ? " " + chrome.i18n.getMessage("to") + " " + utils.getFormattedTime(segmentTimes[i].segment[1], true)
+                        : "");
                 }
 
                 segmentTimeFromToNode.style.margin = "5px";
+                
+                // for inline-styling purposes
+                const labelContainer = document.createElement("div");
+                labelContainer.appendChild(categoryColorCircle);
 
-                segmentSummary.appendChild(categoryColorCircle);
-                segmentSummary.appendChild(textNode);
+                const span = document.createElement('span');
+                span.className = "summaryLabel";
+                span.appendChild(textNode);
+                labelContainer.appendChild(span);
+                // for inline-styling purposes
+
+                segmentSummary.appendChild(labelContainer);
                 segmentSummary.appendChild(segmentTimeFromToNode);
 
                 const votingButtons = document.createElement("details");
@@ -465,7 +474,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
                 //thumbs up and down buttons
                 const voteButtonsContainer = document.createElement("div");
                 voteButtonsContainer.id = "sponsorTimesVoteButtonsContainer" + UUID;
-                voteButtonsContainer.setAttribute("align", "center");
+                voteButtonsContainer.classList.add("sbVoteButtonsContainer");
 
                 const upvoteButton = document.createElement("img");
                 upvoteButton.id = "sponsorTimesUpvoteButtonsContainer" + UUID;
@@ -581,7 +590,8 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
     function updateSegmentEditingUI() {
         PageElements.sponsorStart.innerText = chrome.i18n.getMessage(creatingSegment ? "sponsorEnd" : "sponsorStart");
 
-        PageElements.submissionSection.style.display = sponsorTimes && sponsorTimes.length > 0 ? "unset" : "none";
+        PageElements.submitTimes.style.display = sponsorTimes && sponsorTimes.length > 0 ? "unset" : "none";
+        PageElements.submissionHint.style.display = sponsorTimes && sponsorTimes.length > 0 ? "unset" : "none";
     }
 
     //make the options div visible
@@ -624,7 +634,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
         PageElements.setUsername.style.display = "flex";
         PageElements.setUsername.classList.add("SBExpanded");
 
-        PageElements.setUsernameStatusContainer.style.display = "none";
+        PageElements.setUsernameStatus.style.display = "none";
 
         PageElements.sponsorTimesContributionsContainer.classList.add("hidden");
     }
@@ -632,7 +642,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
     //submit the new username
     function submitUsername() {
         //add loading indicator
-        PageElements.setUsernameStatusContainer.style.display = "unset";
+        PageElements.setUsernameStatus.style.display = "unset";
         PageElements.setUsernameStatus.innerText = chrome.i18n.getMessage("Loading");
 
         utils.sendRequestToServer("POST", "/api/setUsername?userID=" + Config.config.userID + "&username=" + PageElements.usernameInput.value, function (response) {
@@ -645,7 +655,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
                 PageElements.setUsername.classList.remove("SBExpanded");
                 PageElements.usernameValue.innerText = PageElements.usernameInput.value;
 
-                PageElements.setUsernameStatusContainer.style.display = "none";
+                PageElements.setUsernameStatus.style.display = "none";
 
                 PageElements.sponsorTimesContributionsContainer.classList.remove("hidden");
             } else {