diff --git a/src/components/index/ActionButtons.js b/src/components/index/ActionButtons.js
index 38494f3..d09062c 100644
--- a/src/components/index/ActionButtons.js
+++ b/src/components/index/ActionButtons.js
@@ -12,16 +12,16 @@ const getButtonClasses = (isClient) =>
 
 const ActionButtons = ({ isClient, image, shuffleImage }) => (
   <div className="flex flex-col">
-    <div className="text-muted-light p-4 m-4 bg-muted-dark rounded-xl flex flex-col text-center z-10 cool-border-small-light">
-      <h3 className="mb-2 drop-shadow">Try my word game!</h3>
+    <div className="text-muted-light p-1 sm:p-4 m-1 sm:m-4 bg-muted-dark rounded-xl flex flex-col text-center z-10 cool-border-small-light">
+      <h3 className="sm:mb-2 drop-shadow">Try my word game!</h3>
       <a
-        className="rounded-full bg-muted-light hover:bg-vibrant text-muted-dark p-2"
+        className="rounded-full bg-muted-light hover:bg-vibrant text-muted-dark p-1 sm:p-2"
         href="https://buzzwords.gg"
       >
         Buzzwords
       </a>
     </div>
-    <div className="flex mx-6 mb-6">
+    <div className="flex sm:mx-6 mb-2 sm:mb-6">
       <Link
         className={getButtonClasses(isClient, "muted")}
         id="image-link"
@@ -37,8 +37,8 @@ const ActionButtons = ({ isClient, image, shuffleImage }) => (
         }}
         type="button"
       >
-        shuffle background
-        <Shuffle UNSAFE_className="ml-1" aria-label="shuffle image" size="XS" />
+        <Shuffle UNSAFE_className="mr-1" aria-label="shuffle image" size="XS" />
+        background
       </button>
     </div>
   </div>
diff --git a/src/pages/index.js b/src/pages/index.js
index 114a5a3..d37d615 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -150,7 +150,7 @@ const IndexPage = ({
           >
             <h1
               className={classnames(
-                "mb-0 mt-0 text-center font-black z-20 text-7xl md:text-8xl lg:text-9xl"
+                "mb-0 mt-0 text-center font-black z-20 text-5xl sm:text-7xl md:text-8xl lg:text-9xl"
               )}
               style={{ lineHeight: "85%" }}
             >
@@ -200,7 +200,7 @@ const IndexPage = ({
           ></div>
         )}
         {imageIsLandscape && (
-          <div className="hidden portrait:flex justify-center my-2">
+          <div className="hidden portrait:flex justify-center sm:my-2">
             <ActionButtons
               image={image}
               isClient={isClient}