diff --git a/app/soapbox/components/list.js b/app/soapbox/components/list.js
index ed0210c68..02905efea 100644
--- a/app/soapbox/components/list.js
+++ b/app/soapbox/components/list.js
@@ -5,7 +5,6 @@ import { v4 as uuidv4 } from 'uuid';
 
 import Icon from './icon';
 
-
 const List = ({ children }) => (
   <div className='space-y-0.5'>{children}</div>
 );
diff --git a/app/soapbox/components/load_more.js b/app/soapbox/components/load_more.js
deleted file mode 100644
index 80567aebc..000000000
--- a/app/soapbox/components/load_more.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { FormattedMessage } from 'react-intl';
-
-import { Button } from 'soapbox/components/ui';
-
-export default class LoadMore extends React.PureComponent {
-
-  static propTypes = {
-    onClick: PropTypes.func,
-    disabled: PropTypes.bool,
-    visible: PropTypes.bool,
-  }
-
-  static defaultProps = {
-    visible: true,
-  }
-
-  render() {
-    const { disabled, visible } = this.props;
-
-    if (!visible) {
-      return null;
-    }
-
-    return (
-      <Button theme='secondary' block disabled={disabled || !visible} onClick={this.props.onClick}>
-        <FormattedMessage id='status.load_more' defaultMessage='Load more' />
-      </Button>
-    );
-  }
-
-}
diff --git a/app/soapbox/components/load_more.tsx b/app/soapbox/components/load_more.tsx
new file mode 100644
index 000000000..90f05e588
--- /dev/null
+++ b/app/soapbox/components/load_more.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { Button } from 'soapbox/components/ui';
+
+interface ILoadMore {
+  onClick: () => void,
+  disabled?: boolean,
+  visible?: Boolean,
+}
+
+const LoadMore: React.FC<ILoadMore> = ({ onClick, disabled, visible = true }) => {
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <Button theme='secondary' block disabled={disabled || !visible} onClick={onClick}>
+      <FormattedMessage id='status.load_more' defaultMessage='Load more' />
+    </Button>
+  );
+};
+
+export default LoadMore;
diff --git a/app/soapbox/components/more_follows.js b/app/soapbox/components/more_follows.js
deleted file mode 100644
index adfecb4ce..000000000
--- a/app/soapbox/components/more_follows.js
+++ /dev/null
@@ -1,68 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { defineMessages, injectIntl } from 'react-intl';
-import { connect } from 'react-redux';
-
-import { getFeatures } from 'soapbox/utils/features';
-
-const messages = defineMessages({
-  following: {
-    id: 'morefollows.following_label',
-    defaultMessage: '…and {count} more {count, plural, one {follow} other {follows}} on remote sites.',
-  },
-  followers: {
-    id: 'morefollows.followers_label',
-    defaultMessage: '…and {count} more {count, plural, one {follower} other {followers}} on remote sites.',
-  },
-});
-
-
-const mapStateToProps = state => {
-  const instance = state.get('instance');
-
-  return {
-    features: getFeatures(instance),
-  };
-};
-
-export default @connect(mapStateToProps)
-@injectIntl
-class MoreFollows extends React.PureComponent {
-
-  static propTypes = {
-    visible: PropTypes.bool,
-    count: PropTypes.number,
-    type: PropTypes.string,
-    intl: PropTypes.object.isRequired,
-    features: PropTypes.object.isRequired,
-  }
-
-  static defaultProps = {
-    visible: true,
-  }
-
-  getMessage = () => {
-    const { type, count, intl } = this.props;
-    return intl.formatMessage(messages[type], { count });
-  }
-
-  render() {
-    const { features } = this.props;
-
-    // If the instance isn't federating, there are no remote followers
-    if (!features.federating) {
-      return null;
-    }
-
-    return (
-      <div className='morefollows-indicator'>
-        <div>
-          <div className='morefollows-indicator__label' style={{ visibility: this.props.visible ? 'visible' : 'hidden' }}>
-            {this.getMessage()}
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-}
diff --git a/app/soapbox/components/more_follows.tsx b/app/soapbox/components/more_follows.tsx
new file mode 100644
index 000000000..a99b4b5be
--- /dev/null
+++ b/app/soapbox/components/more_follows.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+
+import { useAppSelector } from 'soapbox/hooks';
+import { getFeatures } from 'soapbox/utils/features';
+
+const messages = defineMessages({
+  following: {
+    id: 'morefollows.following_label',
+    defaultMessage: '…and {count} more {count, plural, one {follow} other {follows}} on remote sites.',
+  },
+  followers: {
+    id: 'morefollows.followers_label',
+    defaultMessage: '…and {count} more {count, plural, one {follower} other {followers}} on remote sites.',
+  },
+});
+
+interface IMoreFollows {
+  visible?: Boolean,
+  count?: number,
+  type: 'following' | 'followers',
+}
+
+const MoreFollows: React.FC<IMoreFollows> = ({ visible = true, count, type }) => {
+  const intl = useIntl();
+  const features = useAppSelector((state) => getFeatures(state.instance));
+
+  const getMessage = () => {
+    return intl.formatMessage(messages[type], { count });
+  };
+
+
+  // If the instance isn't federating, there are no remote followers
+  if (!features.federating) {
+    return null;
+  }
+
+  return (
+    <div className='morefollows-indicator'>
+      <div>
+        <div className='morefollows-indicator__label' style={{ visibility: visible ? 'visible' : 'hidden' }}>
+          {getMessage()}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MoreFollows;
diff --git a/app/soapbox/components/progress_bar.js b/app/soapbox/components/progress_bar.js
deleted file mode 100644
index d338bca9c..000000000
--- a/app/soapbox/components/progress_bar.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-
-
-export default class ProgressBar extends ImmutablePureComponent {
-
-  render() {
-    const { progress } = this.props;
-
-    return (
-      <div className='progress-bar'>
-        <div className='progress-bar__progress' style={{ width: `${Math.floor(progress*100)}%` }} />
-      </div>
-    );
-  }
-
-}
diff --git a/app/soapbox/components/progress_bar.tsx b/app/soapbox/components/progress_bar.tsx
new file mode 100644
index 000000000..bcdc071b8
--- /dev/null
+++ b/app/soapbox/components/progress_bar.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+interface IProgressBar {
+  progress: number,
+}
+
+const ProgressBar: React.FC<IProgressBar> = ({ progress }) => (
+  <div className='progress-bar'>
+    <div className='progress-bar__progress' style={{ width: `${Math.floor(progress*100)}%` }} />
+  </div>
+);
+
+export default ProgressBar;
diff --git a/app/soapbox/components/progress_circle.js b/app/soapbox/components/progress_circle.js
deleted file mode 100644
index 7cd3937a7..000000000
--- a/app/soapbox/components/progress_circle.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-
-export default class ProgressCircle extends React.PureComponent {
-
-  static propTypes = {
-    progress: PropTypes.number.isRequired,
-    radius: PropTypes.number,
-    stroke: PropTypes.number,
-    title: PropTypes.string,
-  };
-
-  static defaultProps = {
-    radius: 12,
-    stroke: 4,
-  }
-
-  render() {
-    const { progress, radius, stroke, title } = this.props;
-
-    const progressStroke = stroke + 0.5;
-    const actualRadius = radius + progressStroke;
-    const circumference = 2 * Math.PI * radius;
-    const dashoffset = circumference * (1 - Math.min(progress, 1));
-
-    return (
-      <div title={title}>
-        <svg
-          width={actualRadius * 2}
-          height={actualRadius * 2}
-          viewBox={`0 0 ${actualRadius * 2} ${actualRadius * 2}`}
-        >
-          <circle
-            className='stroke-gray-400'
-            cx={actualRadius}
-            cy={actualRadius}
-            r={radius}
-            fill='none'
-            strokeWidth={stroke}
-          />
-          <circle
-            className={classNames('stroke-primary-800', {
-              'stroke-danger-600': progress > 1,
-            })}
-            style={{
-              strokeDashoffset: dashoffset,
-              strokeDasharray: circumference,
-            }}
-            cx={actualRadius}
-            cy={actualRadius}
-            r={radius}
-            fill='none'
-            strokeWidth={progressStroke}
-            strokeLinecap='round'
-          />
-        </svg>
-      </div>
-    );
-  }
-
-}
diff --git a/app/soapbox/components/progress_circle.tsx b/app/soapbox/components/progress_circle.tsx
new file mode 100644
index 000000000..aaa1fc4d0
--- /dev/null
+++ b/app/soapbox/components/progress_circle.tsx
@@ -0,0 +1,52 @@
+import classNames from 'classnames';
+import React from 'react';
+
+interface IProgressCircle {
+  progress: number,
+  radius?: number,
+  stroke?: number,
+  title?: string,
+}
+
+const ProgressCircle: React.FC<IProgressCircle> = ({ progress, radius = 12, stroke = 4, title }) => {
+  const progressStroke = stroke + 0.5;
+  const actualRadius = radius + progressStroke;
+  const circumference = 2 * Math.PI * radius;
+  const dashoffset = circumference * (1 - Math.min(progress, 1));
+
+  return (
+    <div title={title}>
+      <svg
+        width={actualRadius * 2}
+        height={actualRadius * 2}
+        viewBox={`0 0 ${actualRadius * 2} ${actualRadius * 2}`}
+      >
+        <circle
+          className='stroke-gray-400'
+          cx={actualRadius}
+          cy={actualRadius}
+          r={radius}
+          fill='none'
+          strokeWidth={stroke}
+        />
+        <circle
+          className={classNames('stroke-primary-800', {
+            'stroke-danger-600': progress > 1,
+          })}
+          style={{
+            strokeDashoffset: dashoffset,
+            strokeDasharray: circumference,
+          }}
+          cx={actualRadius}
+          cy={actualRadius}
+          r={radius}
+          fill='none'
+          strokeWidth={progressStroke}
+          strokeLinecap='round'
+        />
+      </svg>
+    </div>
+  );
+};
+
+export default ProgressCircle;
diff --git a/app/soapbox/features/onboarding/onboarding-wizard.tsx b/app/soapbox/features/onboarding/onboarding-wizard.tsx
index bc85b63cc..0b530fd2a 100644
--- a/app/soapbox/features/onboarding/onboarding-wizard.tsx
+++ b/app/soapbox/features/onboarding/onboarding-wizard.tsx
@@ -68,13 +68,13 @@ const OnboardingWizard = () => {
 
   return (
     <div data-testid='onboarding-wizard'>
-      <div className='fixed h-screen w-full bg-gradient-to-tr from-primary-50 via-white to-cyan-50' />
+      <div className='fixed h-screen w-full bg-gradient-to-tr from-primary-50 dark:from-slate-700 via-white dark:via-slate-900 to-cyan-50 dark:to-cyan-900' />
 
-      <main className='h-screen flex flex-col'>
+      <main className='h-screen flex flex-col overflow-x-hidden'>
         <div className='flex flex-col justify-center items-center h-full'>
           <ReactSwipeableViews animateHeight index={currentStep} onChangeIndex={handleSwipe}>
             {steps.map((step, i) => (
-              <div key={i} className='py-6 sm:mx-auto w-full sm:max-w-lg md:max-w-2xl'>
+              <div key={i} className='py-6 sm:mx-auto w-full max-w-[100vw] sm:max-w-lg md:max-w-2xl'>
                 <div
                   className={classNames({
                     'transition-opacity ease-linear': true,
diff --git a/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx b/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx
index b4216ee6b..384494394 100644
--- a/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx
+++ b/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx
@@ -114,7 +114,7 @@ const AvatarSelectionStep = ({ onNext }: { onNext: () => void }) => {
               <Stack justifyContent='center' space={2}>
                 <Button block theme='primary' type='button' onClick={onNext} disabled={isDefault && isDisabled || isSubmitting}>
                   {isSubmitting ? (
-                    <FormattedMessage id='onboarding.saving' defaultMessage='Saving...' />
+                    <FormattedMessage id='onboarding.saving' defaultMessage='Saving…' />
                   ) : (
                     <FormattedMessage id='onboarding.next' defaultMessage='Next' />
                   )}
diff --git a/app/soapbox/features/onboarding/steps/bio-step.tsx b/app/soapbox/features/onboarding/steps/bio-step.tsx
index a67b84c6f..d7c8a669d 100644
--- a/app/soapbox/features/onboarding/steps/bio-step.tsx
+++ b/app/soapbox/features/onboarding/steps/bio-step.tsx
@@ -65,7 +65,7 @@ const BioStep = ({ onNext }: { onNext: () => void }) => {
               >
                 <Textarea
                   onChange={(event) => setValue(event.target.value)}
-                  placeholder='Tell the world a little about yourself...'
+                  placeholder='Tell the world a little about yourself…'
                   value={value}
                   maxLength={500}
                 />
@@ -82,7 +82,7 @@ const BioStep = ({ onNext }: { onNext: () => void }) => {
                   onClick={handleSubmit}
                 >
                   {isSubmitting ? (
-                    <FormattedMessage id='onboarding.saving' defaultMessage='Saving...' />
+                    <FormattedMessage id='onboarding.saving' defaultMessage='Saving…' />
                   ) : (
                     <FormattedMessage id='onboarding.next' defaultMessage='Next' />
                   )}
diff --git a/app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx b/app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx
index ca75a76b6..079fd04a1 100644
--- a/app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx
+++ b/app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx
@@ -135,7 +135,7 @@ const CoverPhotoSelectionStep = ({ onNext }: { onNext: () => void }) => {
 
               <Stack justifyContent='center' space={2}>
                 <Button block theme='primary' type='button' onClick={onNext} disabled={isDefault && isDisabled || isSubmitting}>
-                  {isSubmitting ? 'Saving...' : 'Next'}
+                  {isSubmitting ? 'Saving…' : 'Next'}
                 </Button>
 
                 {isDisabled && (
diff --git a/app/soapbox/features/onboarding/steps/display-name-step.tsx b/app/soapbox/features/onboarding/steps/display-name-step.tsx
index 5a2f0d7e2..d489158ce 100644
--- a/app/soapbox/features/onboarding/steps/display-name-step.tsx
+++ b/app/soapbox/features/onboarding/steps/display-name-step.tsx
@@ -87,7 +87,7 @@ const DisplayNameStep = ({ onNext }: { onNext: () => void }) => {
                   disabled={isDisabled || isSubmitting}
                   onClick={handleSubmit}
                 >
-                  {isSubmitting ? 'Saving...' : 'Next'}
+                  {isSubmitting ? 'Saving…' : 'Next'}
                 </Button>
 
                 <Button block theme='link' type='button' onClick={onNext}>
diff --git a/app/soapbox/locales/pl.json b/app/soapbox/locales/pl.json
index 0008b827c..0a7e092e2 100644
--- a/app/soapbox/locales/pl.json
+++ b/app/soapbox/locales/pl.json
@@ -536,8 +536,10 @@
   "header.back_to.label": "Wróć na {siteTitle}",
   "header.home.label": "Strona główna",
   "header.login.email.placeholder": "Adres e-mail",
+  "header.login.forgot_password": "Nie pamiętasz hasła?",
   "header.login.label": "Zaloguj się",
   "header.login.password.label": "Hasło",
+  "header.login.username.placeholder": "Nazwa użytkownika lub e-mail",
   "header.register.label": "Rejestracja",
   "home.column_settings.show_direct": "Pokazuj wiadomości bezpośrednie",
   "home.column_settings.show_reblogs": "Pokazuj podbicia",
@@ -746,6 +748,20 @@
   "notifications.filter.statuses": "Nowe wpisy osób, które subskrybujesz",
   "notifications.group": "{count, number} {count, plural, one {powiadomienie} few {powiadomienia} many {powiadomień} more {powiadomień}}",
   "notifications.queue_label": "Naciśnij aby zobaczyć {count} {count, plural, one {nowe powiadomienie} few {nowe powiadomienia} many {nowych powiadomień} other {nowe powiadomienia}}",
+  "onboarding.avatar.title": "Wybierz zdjęcie profilowe",
+  "onboarding.display_name.subtitle": "Możesz ją zawsze zmienić później.",
+  "onboarding.display_name.title": "Wybierz wyświetlaną nazwę",
+  "onboarding.finished.message": "Cieszymy się, że możemy powitać Cię w naszej społeczności! Naciśnij poniższy przycisk, aby rozpocząć.",
+  "onboarding.header.subtitle": "Będzie widoczny w górnej części Twojego profilu",
+  "onboarding.header.title": "Wybierz obraz tła",
+  "onboarding.next": "Dalej",
+  "onboarding.note.subtitle": "Możesz go zawsze edytować później",
+  "onboarding.note.title": "Napisz krótki opis",
+  "onboarding.saving": "Zapisywanie…",
+  "onboarding.skip": "Na razie pomiń",
+  "onboarding.suggestions.subtitle": "Oto kilka najbardziej popularnych kont, które mogą Ci się spodobać.",
+  "onboarding.suggestions.title": "Proponowane konta",
+  "onboarding.view_feed": "Pokaż strumień",
   "password_reset.confirmation": "Sprawdź swoją pocztę e-mail, aby potwierdzić.",
   "password_reset.fields.username_placeholder": "Adres e-mail lub nazwa użytkownika",
   "password_reset.header": "Resetowanie hasła",