diff --git a/components/styles.ts b/components/styles.ts
index 56a4f79..921b56f 100644
--- a/components/styles.ts
+++ b/components/styles.ts
@@ -28,4 +28,15 @@ export const layoutDefaultClasses: StyleClasses = {
   settingsBlockAction: "link dim ph3 pv2 hide",
   settingsBlockDropdown: "link dim ph3 pv2 underline",
   postDescription: "f7 pv1 gray",
+
+  // The intro promises "essays and visualizations", so on desktop the two sit
+  // side by side and both land above the fold. Below -l they stack back into
+  // source order: essays, then tools.
+  splitSections: "flex-l flex-row-l items-start-l mb4",
+  essaysSection: "w-100 w-60-l pr4-l",
+  toolsSection: "w-100 w-40-l",
+  toolsList: "f5 list pl2 pl0-l flex flex-row flex-wrap w-100",
+  // full width inside the narrow desktop column, two-up on tablet
+  toolCard: "pa1 flex flex-column w-100 w-50-ns w-100-l mb1 mt1",
+  toolThumb: "tool-thumb",
 };
diff --git a/pages/index.tsx b/pages/index.tsx
index 45c1048..fca06cc 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -69,6 +69,28 @@ const homePageText = [
 ];
 const textVersion = 0;
 
+const tools = [
+  {
+    title: "African Artifacts Index",
+    url: "https://artifacts-index.surulere.dev",
+    image: "/artifacts-index-preview.png",
+    description:
+      "Cross-cultural index of museum collections for discovery and comparative analysis",
+  },
+  {
+    title: "Archive 3D",
+    url: "https://archive-3d.surulere.dev",
+    image: "/archive-3d-preview.jpeg",
+    description: "Visualize and explore vector-similar archives in 3D",
+  },
+  {
+    title: "Map Tool",
+    url: "https://map-tool.surulere.dev",
+    image: "/map-tool-preview.png",
+    description: "Simple tool to view and share maps on the web.",
+  },
+];
+
 interface HomePageContentProps extends types.PageProps {
   substackHandle?: string;
   substackEssays?: SubstackEssay[];
@@ -110,7 +132,7 @@ export const HomePageContent: React.FC<HomePageContentProps> = ({
 
   return (
     <div id="content" className={classes.content}>
-      <div id="about pb5">
+      <div id="about">
         <p className={classes.tagline}>{homePageText[textVersion].tagline}</p>
 
         <p className={classes.description}>
@@ -118,17 +140,18 @@ export const HomePageContent: React.FC<HomePageContentProps> = ({
         </p>
       </div>
 
-      <b className={classes.postsTitle}>ESSAYS</b>
-      <a
-        href={`https://${substackHandle}.substack.com/`}
-        target="_blank"
-        rel="noopener noreferrer"
-        className={classes.postDescription}
-        style={{ display: "inline-block", marginBottom: "1rem", opacity: 0.7, marginLeft: "10px" }}
-      >
-        Read on Substack <ExternalLinkIcon />
-      </a>
-        <>
+      <div className={classes.splitSections}>
+        <section id="essays" className={classes.essaysSection}>
+          <b className={classes.postsTitle}>ESSAYS</b>
+          <a
+            href={`https://${substackHandle}.substack.com/`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className={classes.postDescription}
+            style={{ display: "inline-block", marginBottom: "1rem", opacity: 0.7, marginLeft: "10px" }}
+          >
+            Read on Substack <ExternalLinkIcon />
+          </a>
           {allItems.length > 0 && (
             <ul className={classes.postsList} style={{ listStyle: "none", padding: 0 }}>
               {allItems.map((item: any, i) => (
@@ -173,61 +196,34 @@ export const HomePageContent: React.FC<HomePageContentProps> = ({
               scrolling="no"
             />
           )}
-        </>
-      <br />
+        </section>
 
-      <b className={classes.postsTitle}>TOOLS</b>
-      <ul className={"f5 pl2 flex flex-row gap-2 flex-wrap w-100"}>
-        {[
-          {
-            title: "African Artifacts Index",
-            url: "https://artifacts-index.surulere.dev",
-            image: "/artifacts-index-preview.png",
-            description: "Cross-cultural index of museum collections for discovery and comparative analysis",
-          },
-          {
-            title: "Archive 3D",
-            url: "https://archive-3d.surulere.dev",
-            image: "/archive-3d-preview.jpeg",
-            description: "Visualize and explore vector-similar archives in 3D",
-          },
-          {
-            title: "Map Tool",
-            url: "https://map-tool.surulere.dev",
-            image: "/map-tool-preview.png",
-            description: "Simple tool to view and share maps on the web.",
-          },
-        ].map((tool, i) => (
-          <div
-            key={i}
-            className={`pa1 flex flex-column w-50-ns w-100 mb1 mt1 pr4-l`}
-          >
-            <a
-              className={classes.postLink + " flex flex-column gap-2 pa1"}
-              href={tool.url}
-              target="_blank"
-            >
-              <div
-                style={{ width: "100%", height: "175px", overflow: "hidden" }}
-              >
-                <img
-                  src={tool.image}
-                  alt={tool.title}
-                  style={{ width: "100%", height: "100%", objectFit: "cover" }}
-                />
-              </div>
-              <span className={classes.postLink}>{tool.title}</span>
-            </a>
+        <section id="tools" className={classes.toolsSection}>
+          <b className={classes.postsTitle}>TOOLS</b>
+          <ul className={classes.toolsList}>
+            {tools.map((tool, i) => (
+              <li key={i} className={classes.toolCard}>
+                <a
+                  className={classes.postLink + " flex flex-column pa1"}
+                  href={tool.url}
+                  target="_blank"
+                >
+                  <div className={classes.toolThumb}>
+                    <img src={tool.image} alt={tool.title} />
+                  </div>
+                  <span className={classes.postLink}>{tool.title}</span>
+                </a>
 
-            <span className={classes.postDescription}>
-              {tool.description?.length > 200
-                ? tool.description?.substring(0, 197) + "..."
-                : tool.description}
-            </span>
-          </div>
-        ))}
-      </ul>
-      <br />
+                <span className={classes.postDescription}>
+                  {tool.description?.length > 200
+                    ? tool.description?.substring(0, 197) + "..."
+                    : tool.description}
+                </span>
+              </li>
+            ))}
+          </ul>
+        </section>
+      </div>
 
       <b className={classes.postsTitle}>ARCHIVES</b>
       <p className={classes.postDescription}>
diff --git a/styles/styles.css b/styles/styles.css
index 8ed206d..a90afe3 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -153,6 +153,30 @@ body.DARK {
   border-color: var(--border-color),
 }
 
+/*
+ * home page tool cards
+ */
+
+.tool-thumb {
+  width: 100%;
+  height: 175px;
+  overflow: hidden;
+}
+
+.tool-thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* at -l the cards share a row with the essays list, so they get a shorter crop
+   to keep all three in view without scrolling */
+@media screen and (min-width: 60em) {
+  .tool-thumb {
+    height: 140px;
+  }
+}
+
 .horizontal-scroll-shadow{
   background-image: linear-gradient(to right, transparent, transparent), linear-gradient(to right, transparent, transparent), linear-gradient(to right, rgba(0, 0, 20, .10), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 20, .10), rgba(255, 255, 255, 0));
   /* Shadows */