diff --git a/app/soapbox/features/scheduled_statuses/components/scheduled_status.tsx b/app/soapbox/features/scheduled_statuses/components/scheduled_status.tsx
index 15a8e1ed9..363b267a5 100644
--- a/app/soapbox/features/scheduled_statuses/components/scheduled_status.tsx
+++ b/app/soapbox/features/scheduled_statuses/components/scheduled_status.tsx
@@ -55,7 +55,7 @@ const ScheduledStatus: React.FC<IScheduledStatus> = ({ statusId, ...other }) =>
           />
         )}
 
-        {status.poll && <PollPreview poll={status.poll as PollEntity} />}
+        {status.poll && <PollPreview pollId={status.poll as string} />}
 
         <ScheduledStatusActionBar status={status} {...other} />
       </div>
diff --git a/app/soapbox/features/ui/components/pending_status.tsx b/app/soapbox/features/ui/components/pending_status.tsx
index 9e7bfaef1..26afa0f3e 100644
--- a/app/soapbox/features/ui/components/pending_status.tsx
+++ b/app/soapbox/features/ui/components/pending_status.tsx
@@ -81,7 +81,7 @@ const PendingStatus: React.FC<IPendingStatus> = ({ idempotencyKey, className, mu
 
             <PendingStatusMedia status={status} />
 
-            {status.poll && <PollPreview poll={status.poll as PollEntity} />}
+            {status.poll && <PollPreview pollId={status.poll as string} />}
 
             {status.quote && <QuotedStatus statusId={status.quote as string} />}
           </div>
diff --git a/app/soapbox/features/ui/components/poll_preview.tsx b/app/soapbox/features/ui/components/poll_preview.tsx
index 3d3b48408..af8bef06f 100644
--- a/app/soapbox/features/ui/components/poll_preview.tsx
+++ b/app/soapbox/features/ui/components/poll_preview.tsx
@@ -1,43 +1,36 @@
-import classNames from 'classnames';
+import noop from 'lodash/noop';
 import React from 'react';
 
-import { Poll as PollEntity, PollOption as PollOptionEntity } from 'soapbox/types/entities';
+import PollOption from 'soapbox/components/polls/poll-option';
+import { Stack } from 'soapbox/components/ui';
+import { useAppSelector } from 'soapbox/hooks';
+import { Poll as PollEntity } from 'soapbox/types/entities';
 
 interface IPollPreview {
-  poll: PollEntity,
+  pollId: string,
 }
 
-const PollPreview: React.FC<IPollPreview> = ({ poll }) => {
-  const renderOption = (option: PollOptionEntity, index: number) => {
-    const showResults = poll.voted || poll.expired;
-
-    return (
-      <li key={index}>
-        <label className={classNames('poll__text', { selectable: !showResults })}>
-          <input
-            name='vote-options'
-            type={poll.multiple ? 'checkbox' : 'radio'}
-            disabled
-          />
-
-          <span className={classNames('poll__input', { checkbox: poll.multiple })} />
-
-          <span dangerouslySetInnerHTML={{ __html: option.title_emojified }} />
-        </label>
-      </li>
-    );
-  };
+const PollPreview: React.FC<IPollPreview> = ({ pollId }) => {
+  const poll = useAppSelector((state) => state.polls.get(pollId) as PollEntity);
 
   if (!poll) {
     return null;
   }
 
   return (
-    <div className='poll'>
-      <ul>
-        {poll.options.map((option, i) => renderOption(option, i))}
-      </ul>
-    </div>
+    <Stack space={2}>
+      {poll.options.map((option, i) => (
+        <PollOption
+          key={i}
+          poll={poll}
+          option={option}
+          index={i}
+          showResults={false}
+          active={false}
+          onToggle={noop}
+        />
+      ))}
+    </Stack>
   );
 };
 
diff --git a/app/styles/application.scss b/app/styles/application.scss
index 12e286976..73622665e 100644
--- a/app/styles/application.scss
+++ b/app/styles/application.scss
@@ -18,7 +18,6 @@
 @import 'boost';
 @import 'loading';
 @import 'ui';
-@import 'polls';
 // @import 'introduction';
 @import 'emoji_picker';
 @import 'about';
diff --git a/app/styles/polls.scss b/app/styles/polls.scss
deleted file mode 100644
index 2d0dd4142..000000000
--- a/app/styles/polls.scss
+++ /dev/null
@@ -1,131 +0,0 @@
-.poll {
-  margin-top: 16px;
-  font-size: 14px;
-
-  li {
-    margin-bottom: 10px;
-    position: relative;
-  }
-
-  &__text {
-    position: relative;
-    display: flex;
-    padding: 6px 0;
-    line-height: 18px;
-    cursor: default;
-    overflow: hidden;
-    width: 100%;
-    text-overflow: ellipsis;
-    color: var(--primary-text-color--faint);
-
-    input[type=radio],
-    input[type=checkbox] {
-      display: none;
-    }
-
-    > span:last-child {
-      flex: 1;
-    }
-
-    .autossugest-input {
-      flex: 1 1 auto;
-    }
-
-    input[type=text] {
-      @apply border border-solid border-primary-600;
-      display: block;
-      box-sizing: border-box;
-      width: 100%;
-      font-size: 14px;
-      outline: 0;
-      font-family: inherit;
-      border-radius: 4px;
-      padding: 6px 10px;
-
-      &:focus {
-        @apply border border-solid border-primary-500;
-      }
-    }
-
-    &.selectable {
-      cursor: pointer;
-    }
-
-    &.editable {
-      display: flex;
-      align-items: center;
-      overflow: visible;
-
-      .autosuggest-input {
-        width: 100%;
-      }
-    }
-  }
-
-  &__input {
-    @apply border border-solid border-primary-600;
-    display: inline-block;
-    position: relative;
-    box-sizing: border-box;
-    width: 18px;
-    height: 18px;
-    flex: 0 0 auto;
-    margin-right: 10px;
-    top: -1px;
-    border-radius: 50%;
-    vertical-align: middle;
-
-    &.checkbox {
-      border-radius: 4px;
-    }
-
-    &.active {
-      border-color: $valid-value-color;
-      background: $valid-value-color;
-    }
-
-    &:active,
-    &:focus,
-    &:hover {
-      border-width: 4px;
-      background: none;
-    }
-
-    &::-moz-focus-inner {
-      outline: 0 !important;
-      border: 0;
-    }
-
-    &:focus,
-    &:active {
-      outline: 0 !important;
-    }
-  }
-
-  .button {
-    height: 36px;
-    padding: 0 16px;
-    margin-right: 10px;
-    font-size: 14px;
-  }
-
-  &__cancel {
-    @apply h-5;
-
-    .svg-icon {
-      @apply h-5 w-5;
-    }
-  }
-}
-
-.muted .poll {
-  color: var(--primary-text-color);
-
-  &__chart {
-    background: hsla(var(--brand-color_hsl), 0.2);
-
-    &.leading {
-      background: hsla(var(--brand-color_hsl), 0.2);
-    }
-  }
-}