diff --git a/src/assets/thumbs-down.svg b/src/assets/thumbs-down.svg
index 2ed371e3dfd..3d057ecd484 100644
--- a/src/assets/thumbs-down.svg
+++ b/src/assets/thumbs-down.svg
@@ -1,5 +1,5 @@
 <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path id="Icon"
-    d="M14.1665 2.31934V11.486M18.3332 8.81934V4.986C18.3332 4.05258 18.3332 3.58587 18.1516 3.22935C17.9918 2.91575 17.7368 2.66078 17.4232 2.50099C17.0667 2.31934 16.6 2.31934 15.6665 2.31934H6.76489C5.54699 2.31934 4.93804 2.31934 4.4462 2.5422C4.01271 2.73862 3.6443 3.05469 3.38425 3.45327C3.08919 3.9055 2.99659 4.50737 2.8114 5.71111L2.37551 8.54444C2.13125 10.1321 2.00912 10.9259 2.24472 11.5436C2.4515 12.0857 2.84042 12.5391 3.34482 12.8259C3.91949 13.1527 4.72266 13.1527 6.32899 13.1527H6.99988C7.46659 13.1527 7.69995 13.1527 7.87821 13.2435C8.03501 13.3234 8.16249 13.4509 8.24239 13.6077C8.33321 13.7859 8.33321 14.0193 8.33321 14.486V16.9311C8.33321 18.066 9.25321 18.986 10.3881 18.986C10.6588 18.986 10.9041 18.8266 11.014 18.5792L13.8146 12.2778C13.942 11.9912 14.0057 11.8479 14.1064 11.7428C14.1954 11.6499 14.3047 11.5789 14.4257 11.5353C14.5626 11.486 14.7194 11.486 15.033 11.486H15.6665C16.6 11.486 17.0667 11.486 17.4232 11.3043C17.7368 11.1446 17.9918 10.8896 18.1516 10.576C18.3332 10.2195 18.3332 9.75276 18.3332 8.81934Z"
-    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+    d="M14.1668 2.31966L14.1668 11.4863M18.3335 9.81966L18.3335 3.98633C18.3335 3.06585 17.5873 2.31966 16.6668 2.31966L5.47829 2.31966C4.24436 2.31966 3.19499 3.21994 3.00736 4.43952L2.10993 10.2729C1.87694 11.7872 3.04864 13.153 4.58086 13.153L7.50016 13.153C7.9604 13.153 8.3335 13.5261 8.3335 13.9863L8.3335 16.9315C8.3335 18.0663 9.25349 18.9863 10.3884 18.9863C10.659 18.9863 10.9043 18.8269 11.0143 18.5796L13.9469 11.9812C14.0806 11.6803 14.3791 11.4863 14.7084 11.4863L16.6668 11.4863C17.5873 11.4863 18.3335 10.7401 18.3335 9.81966Z"
+    stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
 </svg>
diff --git a/src/components/Button/index.module.scss b/src/components/Button/index.module.scss
index 21c093871fe..c74d86b6cbd 100644
--- a/src/components/Button/index.module.scss
+++ b/src/components/Button/index.module.scss
@@ -115,7 +115,7 @@
 
   &.outline {
     color: var(--logto-color-text);
-    border-color: var(--logto-color-text);
+    border-color: var(--logto-border);
   }
 
   &.plain {
diff --git a/src/theme/EditMetaRow/index.tsx b/src/theme/EditMetaRow/index.tsx
index 679f295ed30..1f3c3a52af4 100644
--- a/src/theme/EditMetaRow/index.tsx
+++ b/src/theme/EditMetaRow/index.tsx
@@ -11,6 +11,11 @@ import Textarea from '@site/src/components/Textarea';
 
 import styles from './styles.module.scss';
 
+const likeWebhookUrl =
+  'https://hooks.slack.com/triggers/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';
+const feedbackWebhookUrl =
+  'https://hooks.slack.com/triggers/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';
+
 export default function EditMetaRow({ className, editUrl }: Props): JSX.Element {
   const [showTextarea, setShowTextarea] = useState(false);
   const [showSuccessMessage, setShowSuccessMessage] = useState(false);
@@ -32,16 +37,15 @@ export default function EditMetaRow({ className, editUrl }: Props): JSX.Element
               <Button
                 className={styles.button}
                 onClick={() => {
-                  window.plausible?.('Docs Helpful');
+                  void fetch(likeWebhookUrl, {
+                    method: 'POST',
+                    body: JSON.stringify({ url: window.location.href }),
+                  });
                   setShowSuccessMessage(true);
                 }}
               >
                 <ThumbUpIcon />
-                {translate({
-                  id: 'theme.common.yes',
-                  message: 'Yes',
-                  description: 'The label for the docs helpful button',
-                })}
+                <Translate id="theme.common.yes">Yes</Translate>
               </Button>
               <Button
                 className={clsx(styles.button, showTextarea && styles.notHelpful)}
@@ -50,11 +54,7 @@ export default function EditMetaRow({ className, editUrl }: Props): JSX.Element
                 }}
               >
                 <ThumbDownIcon />
-                {translate({
-                  id: 'theme.common.no',
-                  message: 'No',
-                  description: 'The label for the docs not helpful button',
-                })}
+                <Translate id="theme.common.no">No</Translate>
               </Button>
             </div>
           )}
@@ -67,6 +67,39 @@ export default function EditMetaRow({ className, editUrl }: Props): JSX.Element
               })}
             </div>
           )}
+          {!showSuccessMessage && showTextarea && (
+            <>
+              <Textarea
+                className={styles.feedbackInput}
+                placeholder={translate({
+                  id: 'theme.common.feedbackPlaceholder',
+                  message: "We'd love to hear your feedback!",
+                  description: 'The placeholder of the feedback textarea',
+                })}
+                value={feedback}
+                onChange={({ currentTarget }) => {
+                  setFeedback(currentTarget.value);
+                }}
+              />
+              <Button
+                className={styles.button}
+                type="primary"
+                onClick={() => {
+                  void fetch(feedbackWebhookUrl, {
+                    method: 'POST',
+                    body: JSON.stringify({ url: window.location.href, feedback }),
+                  });
+                  setShowSuccessMessage(true);
+                }}
+              >
+                {translate({
+                  id: 'theme.common.submit',
+                  message: 'Submit',
+                  description: 'The label of the submit button',
+                })}
+              </Button>
+            </>
+          )}
         </div>
         {editUrl && (
           <div className={styles.editUrlColumn}>
@@ -75,53 +108,17 @@ export default function EditMetaRow({ className, editUrl }: Props): JSX.Element
                 Help us improve the docs!
               </Translate>
             </span>
-            <div className={styles.buttons}>
-              <Button className={styles.button} href={editUrl}>
-                <EditIcon />
-                {translate({
-                  id: 'theme.common.editThisPage',
-                  message: 'Edit this page',
-                  description: 'The link label to edit the current page',
-                })}
-              </Button>
-            </div>
-          </div>
-        )}
-      </div>
-      {!showSuccessMessage && showTextarea && (
-        <>
-          <Textarea
-            className={styles.feedbackInput}
-            placeholder={translate({
-              id: 'theme.common.feedbackPlaceholder',
-              message: "We'd love to hear your feedback!",
-              description: 'The placeholder of the feedback textarea',
-            })}
-            value={feedback}
-            onChange={({ currentTarget }) => {
-              setFeedback(currentTarget.value);
-            }}
-          />
-          <div className={styles.buttons}>
-            <Button
-              className={styles.button}
-              type="primary"
-              onClick={() => {
-                window.plausible?.('Docs Not Helpful', {
-                  props: { feedback },
-                });
-                setShowSuccessMessage(true);
-              }}
-            >
+            <Button className={styles.button} href={editUrl}>
+              <EditIcon />
               {translate({
-                id: 'theme.common.submit',
-                message: 'Submit',
-                description: 'The label of the submit button',
+                id: 'theme.common.editThisPage',
+                message: 'Edit this page',
+                description: 'The link label to edit the current page',
               })}
             </Button>
           </div>
-        </>
-      )}
+        )}
+      </div>
     </div>
   );
 }
diff --git a/src/theme/EditMetaRow/styles.module.scss b/src/theme/EditMetaRow/styles.module.scss
index d443cc79962..37efccbc6ba 100644
--- a/src/theme/EditMetaRow/styles.module.scss
+++ b/src/theme/EditMetaRow/styles.module.scss
@@ -3,19 +3,26 @@
   flex-direction: column;
   width: 100%;
   gap: 12px;
+  padding: 32px 0;
+  border-top: 1px solid var(--logto-line-divider);
+}
+
+.label {
+  white-space: nowrap;
 }
 
 .flexRow {
   width: 100%;
   display: flex;
   justify-content: space-between;
-  gap: 12px;
+  gap: 24px;
 }
 
 .feedback {
   display: flex;
   flex-direction: column;
   gap: 12px;
+  flex: 1;
 }
 
 .buttons {
@@ -30,16 +37,27 @@
   padding: 0 12px;
   height: 36px;
 
+  svg {
+    color: var(--logto-color-text-secondary);
+  }
+
   &.notHelpful {
     border: 1px solid var(--logto-container-on-danger);
     color: var(--logto-container-on-danger);
     background: var(--logto-container-danger-bg);
+
+    svg {
+      color: var(--logto-container-on-danger);
+    }
   }
 }
 
 .feedbackInput {
   width: 100%;
+  height: 110px;
+  min-width: 300px;
   max-width: 420px;
+  margin-top: 8px;
 }
 
 .successMessage {
@@ -56,17 +74,14 @@
   flex-direction: column;
   gap: 12px;
   align-items: flex-end;
+  min-width: 200px;
 }
 
-@media (max-width: 996px) {
+@media (max-width: 1172px) {
   .flexRow {
     flex-direction: column;
   }
 
-  .buttons {
-    margin-bottom: 12px;
-  }
-
   .successMessage {
     margin-bottom: 12px;
   }