diff --git a/components/home/bonus.tsx b/components/home/bonus.tsx
index 1975dfe7d..19338834d 100644
--- a/components/home/bonus.tsx
+++ b/components/home/bonus.tsx
@@ -6,7 +6,7 @@ import CursorClick from "@/components/icons/cursor-click.svg";
 
 const Bonus: React.VoidFunctionComponent = () => {
   return (
-    <div className="py-16 max-w-7xl mx-auto px-8">
+    <div className="pt-8 pb-24 max-w-7xl mx-auto px-8">
       <h2 className="heading">Principles</h2>
       <p className="subheading">We&apos;re not like the others</p>
       <div className="grid grid-cols-4 gap-16">
diff --git a/components/home/home.tsx b/components/home/home.tsx
index 72d72f343..7a512c339 100644
--- a/components/home/home.tsx
+++ b/components/home/home.tsx
@@ -12,12 +12,8 @@ const Home: React.VoidFunctionComponent = () => {
         <title>Rallly - Schedule group meetings</title>
       </Head>
       <Hero />
-      <div className="bg-gradient-to-b from-transparent via-white to-white">
-        <Features />
-      </div>
-      <div className="bg-gradient-to-b from-white via-white to-transparent pb-16">
-        <Bonus />
-      </div>
+      <Features />
+      <Bonus />
     </PageLayout>
   );
 };
diff --git a/components/page-layout.tsx b/components/page-layout.tsx
index dfca1286d..bc716d614 100644
--- a/components/page-layout.tsx
+++ b/components/page-layout.tsx
@@ -72,38 +72,36 @@ const PageLayout: React.VoidFunctionComponent<PageLayoutProps> = ({
 }) => {
   const breakpoint = useBreakpoint();
   return (
-    <div className="bg-pattern h-full overflow-x-hidden">
+    <div className="bg-pattern min-h-full overflow-x-hidden">
       <Head>
         <title>Rallly - Support</title>
       </Head>
-      <div className="">
-        <div className="py-8 flex items-center px-8 max-w-7xl mx-auto">
-          <div className="grow">
-            <div className="inline-block relative">
-              <Link href="/">
-                <a>
-                  <Logo className="w-40 text-indigo-500" alt="Rallly" />
-                </a>
-              </Link>
-              <span className="absolute transition-colors text-sm text-slate-400 -bottom-6 right-0">
-                Yes&mdash;with 3 <em>L</em>s
-              </span>
-            </div>
+      <div className="py-8 flex items-center px-8 max-w-7xl mx-auto">
+        <div className="grow">
+          <div className="inline-block relative">
+            <Link href="/">
+              <a>
+                <Logo className="w-40 text-indigo-500" alt="Rallly" />
+              </a>
+            </Link>
+            <span className="absolute transition-colors text-sm text-slate-400 -bottom-6 right-0">
+              Yes&mdash;with 3 <em>L</em>s
+            </span>
           </div>
-          <Menu className="hidden md:flex space-x-8 items-center" />
-          {breakpoint === "sm" ? (
-            <Popover
-              placement="left-start"
-              trigger={
-                <button className="text-gray-400 hover:text-indigo-500 hover:underline-offset-2 hover:no-underline transition-colors">
-                  <DotsVertical className="w-5" />
-                </button>
-              }
-            >
-              <Menu className="flex flex-col space-y-2" />
-            </Popover>
-          ) : null}
         </div>
+        <Menu className="hidden md:flex space-x-8 items-center" />
+        {breakpoint === "sm" ? (
+          <Popover
+            placement="left-start"
+            trigger={
+              <button className="text-gray-400 hover:text-indigo-500 hover:underline-offset-2 hover:no-underline transition-colors">
+                <DotsVertical className="w-5" />
+              </button>
+            }
+          >
+            <Menu className="flex flex-col space-y-2" />
+          </Popover>
+        ) : null}
       </div>
       <div className="md:min-h-[calc(100vh-460px)]">{children}</div>
       <Footer />
diff --git a/components/page-layout/footer.tsx b/components/page-layout/footer.tsx
index b3a6310c1..f412c799c 100644
--- a/components/page-layout/footer.tsx
+++ b/components/page-layout/footer.tsx
@@ -7,10 +7,10 @@ import Logo from "../../public/logo.svg";
 const Footer: React.VoidFunctionComponent = () => {
   const { t } = useTranslation("homepage");
   return (
-    <div className="bg-gradient-to-b from-transparent via-slate-50 to-slate-100">
-      <div className="py-24 px-8 mx-auto max-w-7xl grid grid-cols-12 gap-8">
+    <div className="bg-gray-100">
+      <div className="py-20 px-8 mx-auto max-w-7xl grid grid-cols-12 gap-8">
         <div className="col-span-12 md:col-span-4">
-          <Logo className="w-32 text-slate-300 mb-8" />
+          <Logo className="w-32 text-gray-400/75 mb-8" />
         </div>
         <div className="col-span-6 md:col-span-2">
           <div className="font-medium mb-4">Links</div>
diff --git a/components/support.tsx b/components/support.tsx
index 183a298c6..f7858a08d 100644
--- a/components/support.tsx
+++ b/components/support.tsx
@@ -10,134 +10,153 @@ const Support: React.VoidFunctionComponent = () => {
   const { t } = useTranslation("support");
   return (
     <PageLayout>
-      <div className="bg-gradient-to-b from-transparent via-white to-transparent">
-        <div className="py-16 px-8 mx-auto max-w-7xl">
-          <h1 className="text-5xl">Support</h1>
-          <div className="lg:flex py-16">
-            <div className="grow mb-8">
-              <h2 className="text-3xl mb-4">General</h2>
-              <Disclosure as="div" className="bg-slate-50 p-2 rounded-lg mb-4">
-                <Disclosure.Button className="font-medium text-lg py-2 px-3 rounded-lg active:bg-slate-200 block w-full text-left font-slate hover:text-indigo-500 hover:bg-slate-100 cursor-pointer">
-                  <Trans t={t} i18nKey="howDoIShareQuestion" />
-                </Disclosure.Button>
-                <Disclosure.Panel className="text py-2 px-3">
-                  <Trans
-                    t={t}
-                    i18nKey="howDoIShareAnswer"
-                    components={{ b: <strong /> }}
-                  />
-                </Disclosure.Panel>
-              </Disclosure>
-              <Disclosure as="div" className="bg-slate-50 p-2 rounded-lg mb-4">
-                <Disclosure.Button className="font-medium text-lg py-2 px-3 rounded-lg active:bg-slate-200 block w-full text-left font-slate hover:text-indigo-500 hover:bg-slate-100 cursor-pointer">
-                  <Trans
-                    t={t}
-                    i18nKey="canRalllyDoQuestion"
-                    components={{ em: <em /> }}
-                  />
-                </Disclosure.Button>
-                <Disclosure.Panel className="text py-2 px-3">
-                  <Trans
-                    t={t}
-                    i18nKey="canRalllyDoAnswer"
-                    components={{
-                      a: (
-                        <a href="https://github.com/lukevella/Rallly/discussions" />
-                      ),
-                    }}
-                  />
-                </Disclosure.Panel>
-              </Disclosure>
-              <Disclosure as="div" className="bg-slate-50 p-2 rounded-lg mb-4">
-                <Disclosure.Button className="font-medium text-lg py-2 px-3 rounded-lg active:bg-slate-200 block w-full text-left font-slate hover:text-indigo-500 hover:bg-slate-100 cursor-pointer">
-                  {t("legacyPollsQuestion")}
-                </Disclosure.Button>
-                <Disclosure.Panel className="text py-2 px-3">
-                  <Trans
-                    t={t}
-                    i18nKey="legacyPollsAnswer"
-                    components={{ a: <a href="mailto:support@rallly.co" /> }}
-                  />
-                </Disclosure.Panel>
-              </Disclosure>
-              <Disclosure as="div" className="bg-slate-50 p-2 rounded-lg mb-4">
-                <Disclosure.Button className="font-medium text-lg py-2 px-3 rounded-lg active:bg-slate-200 block w-full text-left font-slate hover:text-indigo-500 hover:bg-slate-100 cursor-pointer">
-                  {t("contributeQuestion")}
-                </Disclosure.Button>
-                <Disclosure.Panel className="text py-2 px-3">
-                  <Trans
-                    t={t}
-                    i18nKey="contributeAnswer"
-                    components={{
-                      a: <a href="https://github.com/sponsors/lukevella" />,
-                    }}
-                  />
-                </Disclosure.Panel>
-              </Disclosure>
-              <h2 className="text-3xl mb-4 mt-8">Privacy & Security</h2>
-              <Disclosure as="div" className="bg-slate-50 p-2 rounded-lg mb-4">
-                <Disclosure.Button className="font-medium text-lg py-2 px-3 rounded-lg active:bg-slate-200 block w-full text-left font-slate hover:text-indigo-500 hover:bg-slate-100 cursor-pointer">
-                  {t("isMyDataSafeQuestion")}
-                </Disclosure.Button>
-                <Disclosure.Panel className="text py-2 px-3">
-                  <Trans
-                    t={t}
-                    i18nKey="isMyDataSafeAnswer"
-                    components={{ a: <a href="mailto:support@rallly.co" /> }}
-                  />
-                </Disclosure.Panel>
-              </Disclosure>
-              <h2 className="text-3xl mb-4 mt-8">Self-hosting</h2>
-              <Disclosure as="div" className="bg-slate-50 p-2 rounded-lg mb-4">
-                <Disclosure.Button className="font-medium text-lg py-2 px-3 rounded-lg active:bg-slate-200 block w-full text-left font-slate hover:text-indigo-500 hover:bg-slate-100 cursor-pointer">
-                  {t("selfHostQuestion")}
-                </Disclosure.Button>
-                <Disclosure.Panel className="text py-2 px-3">
-                  <Trans
-                    t={t}
-                    i18nKey="selfHostAnswer"
-                    components={{
-                      a: <a href="https://github.com/lukevella/Rallly" />,
-                    }}
-                  />
-                </Disclosure.Panel>
-              </Disclosure>
-              <Disclosure as="div" className="bg-slate-50 p-2 rounded-lg mb-4">
-                <Disclosure.Button className="font-medium text-lg py-2 px-3 rounded-lg active:bg-slate-200 block w-full text-left font-slate hover:text-indigo-500 hover:bg-slate-100 cursor-pointer">
-                  {t("canYouHelpMeSetUpRalllyQuestion")}
-                </Disclosure.Button>
-                <Disclosure.Panel className="text py-2 px-3">
-                  <Trans
-                    t={t}
-                    i18nKey="canYouHelpMeSetUpRalllyAnswer"
-                    components={{
-                      a: (
-                        <a href="https://github.com/lukevella/Rallly/discussions" />
-                      ),
-                    }}
-                  />
-                </Disclosure.Panel>
-              </Disclosure>
-            </div>
-            <div className="lg:ml-16 shrink-0 lg:w-96">
-              <div className="p-8 bg-white rounded-xl shadow-md">
-                <div className="flex lg:flex-col items-start max-w-3xl">
-                  <Chat className="hidden sm:block w-20 text-indigo-500 shrink-0 mr-8 mb-8" />
-                  <div>
-                    <h2 className="mb-2">{t("supportContactTitle")}</h2>
-                    <p className="text">
-                      <Trans
-                        t={t}
-                        i18nKey="supportContactMessage"
-                        components={{
-                          a: <a href="mailto:support@rallly.co" />,
-                        }}
-                      />
-                    </p>
-                    <Button icon={<Chat />} onClick={showCrispChat}>
-                      {t("chatWithSupport")}
-                    </Button>
-                  </div>
+      <div className="pt-16 px-8 mx-auto max-w-7xl">
+        <h1 className="text-5xl">Support</h1>
+        <div className="lg:flex py-16">
+          <div className="grow mb-8">
+            <h2 className="text-3xl mb-4">General</h2>
+            <Disclosure
+              as="div"
+              className="bg-white p-2 rounded-lg mb-4 shadow-md"
+            >
+              <Disclosure.Button className="font-medium text-lg py-2 px-3 rounded-md active:bg-slate-100 block w-full text-left font-slate hover:text-indigo-500 hover:bg-slate-50 cursor-pointer">
+                <Trans t={t} i18nKey="howDoIShareQuestion" />
+              </Disclosure.Button>
+              <Disclosure.Panel className="text py-2 px-3">
+                <Trans
+                  t={t}
+                  i18nKey="howDoIShareAnswer"
+                  components={{ b: <strong /> }}
+                />
+              </Disclosure.Panel>
+            </Disclosure>
+            <Disclosure
+              as="div"
+              className="bg-white p-2 rounded-lg mb-4 shadow-md"
+            >
+              <Disclosure.Button className="font-medium text-lg py-2 px-3 rounded-md active:bg-slate-100 block w-full text-left font-slate hover:text-indigo-500 hover:bg-slate-50 cursor-pointer">
+                <Trans
+                  t={t}
+                  i18nKey="canRalllyDoQuestion"
+                  components={{ em: <em /> }}
+                />
+              </Disclosure.Button>
+              <Disclosure.Panel className="text py-2 px-3">
+                <Trans
+                  t={t}
+                  i18nKey="canRalllyDoAnswer"
+                  components={{
+                    a: (
+                      <a href="https://github.com/lukevella/Rallly/discussions" />
+                    ),
+                  }}
+                />
+              </Disclosure.Panel>
+            </Disclosure>
+            <Disclosure
+              as="div"
+              className="bg-white p-2 rounded-lg mb-4 shadow-md"
+            >
+              <Disclosure.Button className="font-medium text-lg py-2 px-3 rounded-md active:bg-slate-100 block w-full text-left font-slate hover:text-indigo-500 hover:bg-slate-50 cursor-pointer">
+                {t("legacyPollsQuestion")}
+              </Disclosure.Button>
+              <Disclosure.Panel className="text py-2 px-3">
+                <Trans
+                  t={t}
+                  i18nKey="legacyPollsAnswer"
+                  components={{ a: <a href="mailto:support@rallly.co" /> }}
+                />
+              </Disclosure.Panel>
+            </Disclosure>
+            <Disclosure
+              as="div"
+              className="bg-white p-2 rounded-lg mb-4 shadow-md"
+            >
+              <Disclosure.Button className="font-medium text-lg py-2 px-3 rounded-md active:bg-slate-100 block w-full text-left font-slate hover:text-indigo-500 hover:bg-slate-50 cursor-pointer">
+                {t("contributeQuestion")}
+              </Disclosure.Button>
+              <Disclosure.Panel className="text py-2 px-3">
+                <Trans
+                  t={t}
+                  i18nKey="contributeAnswer"
+                  components={{
+                    a: <a href="https://github.com/sponsors/lukevella" />,
+                  }}
+                />
+              </Disclosure.Panel>
+            </Disclosure>
+            <h2 className="text-3xl mb-4 mt-8">Privacy & Security</h2>
+            <Disclosure
+              as="div"
+              className="bg-white p-2 rounded-lg mb-4 shadow-md"
+            >
+              <Disclosure.Button className="font-medium text-lg py-2 px-3 rounded-md active:bg-slate-100 block w-full text-left font-slate hover:text-indigo-500 hover:bg-slate-50 cursor-pointer">
+                {t("isMyDataSafeQuestion")}
+              </Disclosure.Button>
+              <Disclosure.Panel className="text py-2 px-3">
+                <Trans
+                  t={t}
+                  i18nKey="isMyDataSafeAnswer"
+                  components={{ a: <a href="mailto:support@rallly.co" /> }}
+                />
+              </Disclosure.Panel>
+            </Disclosure>
+            <h2 className="text-3xl mb-4 mt-8">Self-hosting</h2>
+            <Disclosure
+              as="div"
+              className="bg-white p-2 rounded-lg mb-4 shadow-md"
+            >
+              <Disclosure.Button className="font-medium text-lg py-2 px-3 rounded-md active:bg-slate-100 block w-full text-left font-slate hover:text-indigo-500 hover:bg-slate-50 cursor-pointer">
+                {t("selfHostQuestion")}
+              </Disclosure.Button>
+              <Disclosure.Panel className="text py-2 px-3">
+                <Trans
+                  t={t}
+                  i18nKey="selfHostAnswer"
+                  components={{
+                    a: <a href="https://github.com/lukevella/Rallly" />,
+                  }}
+                />
+              </Disclosure.Panel>
+            </Disclosure>
+            <Disclosure
+              as="div"
+              className="bg-white p-2 rounded-lg mb-4 shadow-md"
+            >
+              <Disclosure.Button className="font-medium text-lg py-2 px-3 rounded-md active:bg-slate-100 block w-full text-left font-slate hover:text-indigo-500 hover:bg-slate-50 cursor-pointer">
+                {t("canYouHelpMeSetUpRalllyQuestion")}
+              </Disclosure.Button>
+              <Disclosure.Panel className="text py-2 px-3">
+                <Trans
+                  t={t}
+                  i18nKey="canYouHelpMeSetUpRalllyAnswer"
+                  components={{
+                    a: (
+                      <a href="https://github.com/lukevella/Rallly/discussions" />
+                    ),
+                  }}
+                />
+              </Disclosure.Panel>
+            </Disclosure>
+          </div>
+          <div className="lg:ml-16 shrink-0 lg:w-96">
+            <div className="p-8 bg-white rounded-xl shadow-md">
+              <div className="flex lg:flex-col items-start max-w-3xl">
+                <Chat className="hidden sm:block w-20 text-indigo-500 shrink-0 mr-8 mb-8" />
+                <div>
+                  <h2 className="mb-2">{t("supportContactTitle")}</h2>
+                  <p className="text">
+                    <Trans
+                      t={t}
+                      i18nKey="supportContactMessage"
+                      components={{
+                        a: <a href="mailto:support@rallly.co" />,
+                      }}
+                    />
+                  </p>
+                  <Button icon={<Chat />} onClick={showCrispChat}>
+                    {t("chatWithSupport")}
+                  </Button>
                 </div>
               </div>
             </div>
