diff --git a/src/components/attachment/attachment.style.js b/src/components/attachment/attachment.style.js
index a9455e367..45baa5546 100644
--- a/src/components/attachment/attachment.style.js
+++ b/src/components/attachment/attachment.style.js
@@ -15,9 +15,7 @@ export default {
     },
     {
       component: 'Button',
-      parent: {
-        component: 'Attachment'
-      },
+      parent: { component: 'Attachment' },
       directives: {
         background: '#FFFFFF',
         opacity: 0.5
diff --git a/src/components/button.style.js b/src/components/button.style.js
index fb5d30b64..410d2f7e0 100644
--- a/src/components/button.style.js
+++ b/src/components/button.style.js
@@ -99,7 +99,7 @@ export default {
     {
       state: ['disabled'],
       directives: {
-        background: '$blend(--inheritedBackground 0.25 --parent)',
+        background: '$blend(--accent 0.25 --parent)',
         shadow: ['--buttonDefaultBevel']
       }
     },
diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue
index f0a4b7322..0cd3d95a4 100644
--- a/src/components/checkbox/checkbox.vue
+++ b/src/components/checkbox/checkbox.vue
@@ -1,7 +1,7 @@
 <template>
   <label
     class="checkbox"
-    :class="[{ disabled, indeterminate, 'indeterminate-fix': indeterminateTransitionFix }, radio ? '-radio' : '-checkbox']"
+    :class="{ disabled, indeterminate, 'indeterminate-fix': indeterminateTransitionFix }"
   >
     <span
       v-if="!!$slots.before"
@@ -19,9 +19,9 @@
       @change="$emit('update:modelValue', $event.target.checked)"
     >
     <i
-      class="input checkbox-indicator"
+      class="input -checkbox checkbox-indicator"
       :aria-hidden="true"
-      :class="[{ disabled }, radio ? '-radio' : '-checkbox']"
+      :class="{ disabled }"
       @transitionend.capture="onTransitionEnd"
     />
     <span
@@ -37,7 +37,6 @@
 <script>
 export default {
   props: [
-    'radio',
     'modelValue',
     'indeterminate',
     'disabled'
@@ -69,15 +68,6 @@ export default {
   display: inline-block;
   min-height: 1.2em;
 
-  &.-radio {
-    .checkbox-indicator {
-      &,
-      &::before {
-        border-radius: 9999px;
-      }
-    }
-  }
-
   &-indicator,
   & .label {
     vertical-align: middle;
diff --git a/src/components/mrf_transparency_panel/mrf_transparency_panel.vue b/src/components/mrf_transparency_panel/mrf_transparency_panel.vue
index cb2436806..55bacee27 100644
--- a/src/components/mrf_transparency_panel/mrf_transparency_panel.vue
+++ b/src/components/mrf_transparency_panel/mrf_transparency_panel.vue
@@ -238,4 +238,4 @@
 
 <script src="./mrf_transparency_panel.js"></script>
 
-<style src="./mrf_transparency_panel.scss" lang="scss" />
+<style src="./mrf_transparency_panel.scss" lang="scss"/>
diff --git a/src/components/poll/poll.js b/src/components/poll/poll.js
index f56b68b83..3384caec4 100644
--- a/src/components/poll/poll.js
+++ b/src/components/poll/poll.js
@@ -1,7 +1,6 @@
 import Timeago from 'components/timeago/timeago.vue'
 import genRandomSeed from '../../services/random_seed/random_seed.service.js'
 import RichContent from 'components/rich_content/rich_content.jsx'
-import Checkbox from 'components/checkbox/checkbox.vue'
 import { forEach, map } from 'lodash'
 import { usePollsStore } from 'src/stores/polls'
 
@@ -10,8 +9,7 @@ export default {
   props: ['basePoll', 'emoji'],
   components: {
     Timeago,
-    RichContent,
-    Checkbox
+    RichContent
   },
   data () {
     return {
@@ -80,15 +78,26 @@ export default {
     resultTitle (option) {
       return `${option.votes_count}/${this.totalVotesCount} ${this.$t('polls.votes')}`
     },
-    activateOption (index, value) {
-      let result
+    activateOption (index) {
+      // forgive me father: doing checking the radio/checkboxes
+      // in code because of customized input elements need either
+      // a) an extra element for the actual graphic, or b) use a
+      // pseudo element for the label. We use b) which mandates
+      // using "for" and "id" matching which isn't nice when the
+      // same poll appears multiple times on the site (notifs and
+      // timeline for example). With code we can make sure it just
+      // works without altering the pseudo element implementation.
+      const allElements = this.$el.querySelectorAll('input')
+      const clickedElement = this.$el.querySelector(`input[value="${index}"]`)
       if (this.poll.multiple) {
-        result = this.choices || this.options.map(() => false)
+        // Checkboxes, toggle only the clicked one
+        clickedElement.checked = !clickedElement.checked
       } else {
-        result = this.options.map(() => false)
+        // Radio button, uncheck everything and check the clicked one
+        forEach(allElements, element => { element.checked = false })
+        clickedElement.checked = true
       }
-      result[index] = value
-      this.choices = result
+      this.choices = map(allElements, e => e.checked)
     },
     optionId (index) {
       return `poll${this.poll.id}-${index}`
diff --git a/src/components/poll/poll.scss b/src/components/poll/poll.scss
deleted file mode 100644
index 4cf13a1fd..000000000
--- a/src/components/poll/poll.scss
+++ /dev/null
@@ -1,68 +0,0 @@
-.poll {
-  .votes {
-    display: flex;
-    flex-direction: column;
-    margin: 0 0 0.5em;
-  }
-
-  .poll-option {
-    margin: 0.75em 0.5em;
-
-    .input {
-      line-height: inherit;
-    }
-  }
-
-  .option-result {
-    height: 100%;
-    display: flex;
-    flex-direction: row;
-    position: relative;
-    color: var(--textLight);
-  }
-
-  .option-result-label {
-    display: flex;
-    align-items: center;
-    padding: 0.1em 0.25em;
-    z-index: 1;
-    word-break: break-word;
-  }
-
-  .result-percentage {
-    width: 3.5em;
-    flex-shrink: 0;
-  }
-
-  .result-fill {
-    height: 100%;
-    position: absolute;
-    border-radius: var(--roundness);
-    top: 0;
-    left: 0;
-    transition: width 0.5s;
-  }
-
-  input {
-    width: 3.5em;
-  }
-
-  .footer {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-  }
-
-  &.loading * {
-    cursor: progress;
-  }
-
-  .poll-vote-button {
-    padding: 0 0.5em;
-    margin-right: 0.5em;
-  }
-
-  .poll-checkbox {
-    display: none;
-  }
-}
diff --git a/src/components/poll/poll.vue b/src/components/poll/poll.vue
index b3289c89c..faaba9921 100644
--- a/src/components/poll/poll.vue
+++ b/src/components/poll/poll.vue
@@ -37,21 +37,32 @@
           :role="poll.multiple ? 'checkbox' : 'radio'"
           :aria-labelledby="`option-vote-${randomSeed}-${index}`"
           :aria-checked="choices[index]"
+          class="input unstyled"
+          @click="activateOption(index)"
         >
-          <Checkbox
-            :radio="!poll.multiple"
+          <!-- TODO: USE CHECKBOX -->
+          <input
+            v-if="poll.multiple"
+            type="checkbox"
+            class="input -checkbox poll-checkbox"
             :disabled="loading"
-            :model-value="choices[index]"
-            @update:model-value="value => activateOption(index, value)"
+            :value="index"
           >
-            {{ choices[index] }}
+          <input
+            v-else
+            type="radio"
+            :disabled="loading"
+            :value="index"
+            class="input -radio"
+          >
+          <label class="option-vote">
             <RichContent
               :id="`option-vote-${randomSeed}-${index}`"
               :html="option.title_html"
               :handle-links="false"
               :emoji="emoji"
             />
-          </Checkbox>
+          </label>
         </div>
       </div>
     </div>
@@ -101,4 +112,77 @@
 
 <script src="./poll.js"></script>
 
-<style src="./poll.scss" lang="scss"/>
+<style lang="scss">
+.poll {
+  .votes {
+    display: flex;
+    flex-direction: column;
+    margin: 0 0 0.5em;
+  }
+
+  .poll-option {
+    margin: 0.75em 0.5em;
+
+    .input {
+      line-height: inherit;
+    }
+  }
+
+  .option-result {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    position: relative;
+    color: var(--textLight);
+  }
+
+  .option-result-label {
+    display: flex;
+    align-items: center;
+    padding: 0.1em 0.25em;
+    z-index: 1;
+    word-break: break-word;
+  }
+
+  .result-percentage {
+    width: 3.5em;
+    flex-shrink: 0;
+  }
+
+  .result-fill {
+    height: 100%;
+    position: absolute;
+    border-radius: var(--roundness);
+    top: 0;
+    left: 0;
+    transition: width 0.5s;
+  }
+
+  .option-vote {
+    display: flex;
+    align-items: center;
+  }
+
+  input {
+    width: 3.5em;
+  }
+
+  .footer {
+    display: flex;
+    align-items: center;
+  }
+
+  &.loading * {
+    cursor: progress;
+  }
+
+  .poll-vote-button {
+    padding: 0 0.5em;
+    margin-right: 0.5em;
+  }
+
+  .poll-checkbox {
+    display: none;
+  }
+}
+</style>
diff --git a/src/components/status_action_buttons/status_action_buttons.scss b/src/components/status_action_buttons/status_action_buttons.scss
index 23b86e5bd..78fd7c33d 100644
--- a/src/components/status_action_buttons/status_action_buttons.scss
+++ b/src/components/status_action_buttons/status_action_buttons.scss
@@ -3,7 +3,7 @@
 .StatusActionButtons {
   .quick-action-buttons {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(10%, 3em));
+    grid-template-columns: repeat(auto-fill, 4em);
     grid-auto-flow: row dense;
     grid-auto-rows: 1fr;
     grid-gap: 1.25em 1em;
diff --git a/src/components/status_action_buttons/status_action_buttons.vue b/src/components/status_action_buttons/status_action_buttons.vue
index 40884425c..8df6369b5 100644
--- a/src/components/status_action_buttons/status_action_buttons.vue
+++ b/src/components/status_action_buttons/status_action_buttons.vue
@@ -87,7 +87,7 @@
                 :func-arg="funcArg"
                 :get-class="getClass"
                 :get-component="getComponent"
-                :outer-close="close"
+                :outerClose="close"
                 :do-action="doAction"
                 @interacted="e => $emit('interacted')"
               />
diff --git a/src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.vue b/src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.vue
index 31478501b..e210fdaf1 100644
--- a/src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.vue
+++ b/src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.vue
@@ -14,10 +14,7 @@
           class="input menu-checkbox -radio"
           :class="{ 'menu-checkbox-checked': status.bookmark_folder_id == folder.id }"
         />
-        <StillImage
-          :src="folder.emoji_url"
-          class="emoji"
-        />
+        <StillImage :src="folder.emoji_url" class="emoji" />
         {{ ' ' + folder.name }}
       </button>
     </div>
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index 320196493..691edc280 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -516,7 +516,7 @@ export const init = ({
         .filter(c => virtualComponents.has(c) && !nonEditableComponents.has(c))
     } else if (liteMode) {
       validInnerComponents = (component.validInnerComponentsLite || component.validInnerComponents || [])
-    } else if (component.name === 'Root' || component.states != null) {
+    } else if (component.name === 'Root') {
       validInnerComponents = component.validInnerComponents || []
     } else {
       validInnerComponents = component