diff --git a/website/src/components/parts/Hero.js b/website/src/components/parts/Hero.js
index 037cc606b..d4b6baee4 100644
--- a/website/src/components/parts/Hero.js
+++ b/website/src/components/parts/Hero.js
@@ -33,7 +33,7 @@ export default function Hero() {
             </p>
           </div>
 
-          <div className="mt-12 !z-10 mb-6 space-x-4">
+          <div className="mt-12 !z-10 mb-6 flex flex-col 2xs:flex-row items-center justify-center 2xs:space-y-0 space-y-4 2xs:space-x-4">
             <a
               href="../docs/quickstart"
               className="text-2xl !z-10 !no-underline hover:text-white py-2 px-6 font-bold btn bg-indigo-800 hover:bg-indigo-900 border-indigo-800 hover:border-indigo-900 text-white rounded-md"
diff --git a/website/tailwind.config.js b/website/tailwind.config.js
index 65b16cfde..78298c087 100644
--- a/website/tailwind.config.js
+++ b/website/tailwind.config.js
@@ -1,9 +1,10 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ["./src/**/*.{js,jsx,ts,tsx}"],
-  darkMode: ['class', '[data-theme="dark"]'],
+  darkMode: ["class", '[data-theme="dark"]'],
   theme: {
     screens: {
+      "2xs": "400px",
       xs: "540px",
       sm: "640px",
       md: "768px",
@@ -62,4 +63,4 @@ module.exports = {
     },
   },
   plugins: [require("tw-elements/dist/plugin")],
-};
\ No newline at end of file
+};