diff --git a/src/components/index/ActionButtons.js b/src/components/index/ActionButtons.tsx
similarity index 75%
rename from src/components/index/ActionButtons.js
rename to src/components/index/ActionButtons.tsx
index 5d25b04..fe9dfe6 100644
--- a/src/components/index/ActionButtons.js
+++ b/src/components/index/ActionButtons.tsx
@@ -3,8 +3,9 @@ import classnames from "classnames";
 import { Link } from "gatsby";
 
 import Shuffle from "@spectrum-icons/workflow/Shuffle";
+import { HomepageImage } from "../../pages";
 
-const getButtonClasses = (isClient) =>
+const getButtonClasses = (isClient?: boolean) =>
   classnames(
     "z-20 rounded-md text-md inline-block px-2 py-1 mt-1 mr-2 text-md hover:underline",
     isClient
@@ -12,7 +13,16 @@ const getButtonClasses = (isClient) =>
       : "text-gray-300 bg-gray-700"
   );
 
-const ActionButtons = ({ isClient, image, shuffleImage }) => (
+interface ActionButtonsProps {
+  isClient?: boolean;
+  image: HomepageImage;
+  shuffleImage: (image: HomepageImage) => void;
+}
+const ActionButtons = ({
+  isClient,
+  image,
+  shuffleImage,
+}: ActionButtonsProps) => (
   <div className="flex flex-col mb-2">
     <div className="text-muted-light p-2 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>
@@ -25,14 +35,14 @@ const ActionButtons = ({ isClient, image, shuffleImage }) => (
     </div>
     <div className="flex sm:mx-6 mb-2 sm:mb-6">
       <Link
-        className={getButtonClasses(isClient, "muted")}
+        className={getButtonClasses(isClient)}
         id="image-link"
         to={`/photogallery/${image.base}/`}
       >
         view image
       </Link>
       <button
-        className={getButtonClasses(isClient, "muted")}
+        className={getButtonClasses(isClient)}
         id="shuffle-button"
         onClick={() => {
           shuffleImage(image);
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index e5a1c31..d5bb050 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -15,7 +15,9 @@ import { use100vh } from "react-div-100vh";
 const env =
   process.env.GATSBY_ACTIVE_ENV || process.env.NODE_ENV || "development";
 
-const getDifferentRand = (range, lastNs, iterations = 0) => {
+export type HomepageImage = Queries.IndexPageQuery["allFile"]["nodes"][number];
+
+const getDifferentRand = (range: number, lastNs: number[], iterations = 0): number => {
   const n = Math.floor(Math.random() * range);
   if (lastNs.findIndex((x) => x === n) > -1 && iterations < 5) {
     console.log("got dupe, trying again", n);
@@ -68,7 +70,7 @@ const IndexPage = ({
   }, [isClient, imageIndex, image, shuffleImage]);
 
   React.useEffect(() => {
-    const keyListener = (e) => {
+    const keyListener = (e: KeyboardEvent) => {
       switch (e.code) {
         case "Space": {
           shuffleImage(image);
@@ -106,9 +108,11 @@ const IndexPage = ({
 
   const imageIsLandscape = isClient ? ar > 1 : true;
 
+  // @ts-ignore
+  const img = getImage(image);
   return (
     <>
-    {/* @ts-ignore */}
+      {/* @ts-ignore */}
       <Helmet>
         <title>Chuck Dries</title>
         <body
@@ -183,7 +187,7 @@ const IndexPage = ({
             />
           </div>
         </div>
-        {isClient ? (
+        {isClient && img ? (
           <GatsbyImage
             alt=""
             className={classnames(
@@ -191,7 +195,7 @@ const IndexPage = ({
                 ? "landscape:h-actual-screen portrait:h-two-thirds-vw"
                 : "h-actual-screen portrait:w-full landscape:w-1/2"
             )}
-            image={getImage(image)}
+            image={img}
             loading="eager"
             style={{
               gridArea: "1/1",
diff --git a/src/utils.ts b/src/utils.ts
index f1c81bc..cd292c9 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,18 +1,19 @@
 // import kebabCase from 'lodash/kebabCase';
 
+import { HomepageImage } from "./pages";
 import { GalleryImage } from "./pages/photogallery";
 
-export const getMeta = (image: GalleryImage) => image.fields?.imageMeta;
+export const getMeta = <T extends GalleryImage | HomepageImage>(image: T) => image.fields?.imageMeta;
 
 export const getName = (image: GalleryImage) =>
-  getMeta(image)?.meta?.ObjectName || image.base;
+image.fields?.imageMeta?.meta?.ObjectName || image.base;
 
 // some pleasing default colors for SSR and initial hydration
-export const getVibrant = (image: GalleryImage) => getMeta(image)?.vibrant;
+export const getVibrant = (image: GalleryImage | HomepageImage) => getMeta(image)?.vibrant;
 
-export const hasName = (image: GalleryImage) => Boolean(getMeta(image)?.meta?.ObjectName);
+export const hasName = (image: GalleryImage) => Boolean(image.fields?.imageMeta?.meta?.ObjectName);
 
-export const getAspectRatio = (image: GalleryImage): number =>
+export const getAspectRatio = (image: GalleryImage | HomepageImage): number =>
   image.childImageSharp?.fluid?.aspectRatio ?? 1;
 
 export const getCanonicalSize = (image: GalleryImage) => ({
