diff --git a/src/components/common/DarkModeSwitch.tsx b/src/components/common/DarkModeSwitch.tsx
index 87184b05..e0b2558e 100644
--- a/src/components/common/DarkModeSwitch.tsx
+++ b/src/components/common/DarkModeSwitch.tsx
@@ -10,7 +10,7 @@ export const DarkModeSwitch = () => {
       onChange={toggle}
       className={`${
         isDark ? "bg-accent" : "bg-gray-200"
-      } ml-5 relative inline-flex h-6 w-11 items-center rounded-full text-base dark:text-always-gray-200 text-always-gray-700`}
+      } relative inline-flex h-6 w-11 items-center rounded-full text-base dark:text-always-gray-200 text-always-gray-700 align-middle`}
     >
       <span className="sr-only">Switch Dark Mode</span>
       <span
diff --git a/src/components/site/SiteFooter.tsx b/src/components/site/SiteFooter.tsx
index b4cc65c8..3aedaa9b 100644
--- a/src/components/site/SiteFooter.tsx
+++ b/src/components/site/SiteFooter.tsx
@@ -32,7 +32,7 @@ export const SiteFooter: React.FC<{
   return (
     <>
       <footer className="text-zinc-500 border-t">
-        <div className="max-w-screen-md mx-auto px-5 py-10 text-xs flex justify-between">
+        <div className="max-w-screen-md mx-auto px-5 py-10 text-xs sm:flex justify-between sm:space-x-5 sm:space-y-0 space-y-5">
           <div className="font-medium text-base">
             <span>&copy; </span>
             <UniLink href="/" className="hover:text-accent">
@@ -50,7 +50,7 @@ export const SiteFooter: React.FC<{
             />
           </div>
           {site?.connected_accounts && (
-            <div className="ml-5 -mr-5">
+            <div className="sm:-mr-5 sm:block inline-block align-middle mr-4">
               {site?.connected_accounts.map((account, index) => (
                 <Platform
                   key={index}