diff --git a/app/soapbox/features/compose/components/compose_form.js b/app/soapbox/features/compose/components/compose_form.js
index 42d2cd826e..c6a17b2c20 100644
Binary files a/app/soapbox/features/compose/components/compose_form.js and b/app/soapbox/features/compose/components/compose_form.js differ
diff --git a/app/soapbox/features/compose/components/schedule_form.js b/app/soapbox/features/compose/components/schedule_form.js
index ad444ec95d..bb6304a9fe 100644
Binary files a/app/soapbox/features/compose/components/schedule_form.js and b/app/soapbox/features/compose/components/schedule_form.js differ
diff --git a/app/soapbox/features/compose/containers/compose_form_container.js b/app/soapbox/features/compose/containers/compose_form_container.js
index dad55a0418..874402b624 100644
Binary files a/app/soapbox/features/compose/containers/compose_form_container.js and b/app/soapbox/features/compose/containers/compose_form_container.js differ
diff --git a/app/soapbox/features/compose/containers/schedule_button_container.js b/app/soapbox/features/compose/containers/schedule_button_container.js
index 472155284d..61c4ca99f5 100644
Binary files a/app/soapbox/features/compose/containers/schedule_button_container.js and b/app/soapbox/features/compose/containers/schedule_button_container.js differ
diff --git a/app/soapbox/features/scheduled_statuses/index.js b/app/soapbox/features/scheduled_statuses/index.js
index a14022711a..ea68160570 100644
Binary files a/app/soapbox/features/scheduled_statuses/index.js and b/app/soapbox/features/scheduled_statuses/index.js differ
diff --git a/app/styles/components/datepicker.scss b/app/styles/components/datepicker.scss
index b06a313a97..9a86981a3e 100644
--- a/app/styles/components/datepicker.scss
+++ b/app/styles/components/datepicker.scss
@@ -1,4 +1,28 @@
-.ui .react-datepicker {
+.datepicker {
+  margin: 0;
+  box-sizing: border-box;
+  padding: 10px 10px 0;
+  width: 100%;
+  border-top: 1px solid var(--foreground-color);
+
+  &__hint {
+    font-style: italic;
+    color: var(--primary-text-color--faint);
+    padding-bottom: 10px;
+  }
+
+  &__input {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__cancel {
+    padding-left: 10px;
+  }
+}
+
+.datepicker .react-datepicker {
   box-shadow: 0 0 6px 0 rgb(0 0 0 / 30%);
   font-size: 12px;
   border: 0;
@@ -7,9 +31,45 @@
   color: var(--primary-text-color);
 
   &-wrapper {
-    margin-left: 10px;
-    background: var(--foreground-color);
+    width: 100%;
+  }
+
+  &__input-container {
     border: 2px solid var(--brand-color);
+    border-radius: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: 100%;
+    margin: 0;
+    background: var(--background-color);
+    color: var(--primary-text-color);
+    padding: 10px;
+    font-family: inherit;
+    font-size: 16px;
+    resize: vertical;
+    outline: 0;
+
+    &:focus {
+      outline: 0;
+    }
+
+    @media screen and (max-width: 600px) {
+      font-size: 16px;
+    }
+
+    input {
+      padding: 0 0 0 10px;
+    }
+
+    &::before {
+      content: '\f073';
+      display: inline-block;
+      font: normal normal normal 14px/1 ForkAwesome;
+      font-size: 14px;
+      color: var(--primary-text-color--faint);
+    }
   }
 
   &__current-month,