diff --git a/src/pages/BugReport.jsx b/src/pages/BugReport.jsx
index 8c9a099..3599d0b 100644
--- a/src/pages/BugReport.jsx
+++ b/src/pages/BugReport.jsx
@@ -173,7 +173,7 @@ export default function BugReport() {
 
   return (
     <>
-      <div className="sm:py-3 py-5 px-6 flex justify-between items-center">
+      <div className="sm:py-3 py-5 px-20 sm:px-6 flex justify-between items-center">
         <div className="flex items-center justify-start">
           <img
             src={theme === "dark" ? logo_dark : logo_light}
@@ -203,7 +203,7 @@ export default function BugReport() {
           theme === "dark" ? "border-zinc-700" : "border-zinc-300"
         } my-1`}
       />
-      <div className="grid grid-cols-12 gap-8 my-6 mx-8 sm:mx-3">
+      <div className="grid grid-cols-12 gap-8 my-6 mx-20 sm:mx-6">
         <div className="col-span-4 md:col-span-12 lg:col-span-4">
           <div className="card-theme p-6 rounded-md">
             <div className="flex items-center">
diff --git a/src/pages/Templates.jsx b/src/pages/Templates.jsx
index a0709c6..04154c7 100644
--- a/src/pages/Templates.jsx
+++ b/src/pages/Templates.jsx
@@ -5,7 +5,7 @@ import { Link } from "react-router-dom";
 export default function Templates() {
   return (
     <div>
-      <div className="sm:py-3 py-5 px-6 flex justify-between items-center select-none">
+      <div className="sm:py-3 py-5 px-20 sm:px-6 flex justify-between items-center select-none">
         <div className="flex items-center justify-start">
           <Link to="/">
             <img
diff --git a/src/pages/shortcuts.jsx b/src/pages/shortcuts.jsx
index f2cffd2..34cde92 100644
--- a/src/pages/shortcuts.jsx
+++ b/src/pages/shortcuts.jsx
@@ -110,7 +110,7 @@ export default function Shortcuts() {
 
   return (
     <>
-      <div className="sm:py-3 py-5 px-6 flex justify-between items-center">
+      <div className="sm:py-3 py-5 px-20 sm:px-6 flex justify-between items-center">
         <div className="flex items-center justify-start">
           <img
             src={theme === "dark" ? logo_dark : logo_light}
@@ -167,7 +167,7 @@ export default function Shortcuts() {
           onSelect={(v) => {}}
         ></AutoComplete>
       </div>
-      <div className="grid sm:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 m-6 gap-5 select-none">
+      <div className="grid sm:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 my-6 mx-20 sm:mx-6 gap-5 select-none">
         {shortcuts.map((s, i) => (
           <div className="p-3 card-theme rounded" key={i}>
             <div className="flex justify-between sm:text-sm">
diff --git a/src/pages/survey.jsx b/src/pages/survey.jsx
index 93956da..fcc961c 100644
--- a/src/pages/survey.jsx
+++ b/src/pages/survey.jsx
@@ -73,7 +73,9 @@ function SurveyForm({ theme }) {
               subject: `[SURVEY]: ${new Date().toDateString()}`,
               message: `${Object.keys(form).map(
                 (k) => `<div>${questions[k]}</div><div>${form[k]}</div>`
-              )}<div>How can we make drawDB a better experience for you?</div>${$generateHtmlFromNodes(editor)}`,
+              )}<div>How can we make drawDB a better experience for you?</div>${$generateHtmlFromNodes(
+                editor
+              )}`,
             })
             .then((res) => {
               Toast.success("Thanks for the feedback!");
@@ -272,7 +274,7 @@ export default function Survey() {
 
   return (
     <>
-      <div className="sm:py-3 py-5 md:px-8 px-8 flex justify-between items-center">
+      <div className="sm:py-3 py-5 md:px-8 px-20 flex justify-between items-center">
         <div className="flex items-center justify-start">
           <img
             src={theme === "dark" ? logo_dark : logo_light}