diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 7f32e64b..e5111869 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -5,27 +5,27 @@ module.exports = {
     'eslint:recommended',
     'plugin:@typescript-eslint/recommended',
     'plugin:svelte/recommended',
-    'prettier'
+    'prettier',
   ],
   parser: '@typescript-eslint/parser',
   plugins: ['@typescript-eslint'],
   parserOptions: {
     sourceType: 'module',
     ecmaVersion: 2020,
-    extraFileExtensions: ['.svelte']
+    extraFileExtensions: ['.svelte'],
   },
   env: {
     browser: true,
     es2017: true,
-    node: true
+    node: true,
   },
   overrides: [
     {
       files: ['*.svelte'],
       parser: 'svelte-eslint-parser',
       parserOptions: {
-        parser: '@typescript-eslint/parser'
-      }
-    }
-  ]
+        parser: '@typescript-eslint/parser',
+      },
+    },
+  ],
 };
diff --git a/.prettierrc b/.prettierrc
index 0580f3e9..b4cde23e 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,7 +1,7 @@
 {
   "useTabs": false,
   "singleQuote": true,
-  "trailingComma": "none",
+  "trailingComma": "all",
   "printWidth": 100,
   "plugins": ["prettier-plugin-svelte"],
   "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
diff --git a/package-lock.json b/package-lock.json
index 48816c1b..28c9e347 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,7 @@
         "dotenv": "^16.3.1"
       },
       "devDependencies": {
-        "@playwright/test": "^1.28.1",
+        "@playwright/test": "^1.42.0",
         "@skeletonlabs/skeleton": "2.6.0",
         "@skeletonlabs/tw-plugin": "0.3.0",
         "@sveltejs/adapter-auto": "^3.0.0",
@@ -35,9 +35,10 @@
         "prettier-plugin-svelte": "^3.1.2",
         "svelte": "^4.2.7",
         "svelte-check": "^3.6.0",
+        "svelte-eslint-parser": "^0.33.1",
         "tailwindcss": "3.3.6",
         "tslib": "^2.4.1",
-        "typescript": "^5.0.0",
+        "typescript": "^5.3.3",
         "vite": "^5.0.12",
         "vite-plugin-tailwind-purgecss": "0.2.0",
         "vitest": "^1.0.0"
@@ -639,12 +640,12 @@
       }
     },
     "node_modules/@playwright/test": {
-      "version": "1.40.1",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.40.1.tgz",
-      "integrity": "sha512-EaaawMTOeEItCRvfmkI9v6rBkF1svM8wjl/YPRrg2N2Wmp+4qJYkWtJsbew1szfKKDm6fPLy4YAanBhIlf9dWw==",
+      "version": "1.42.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.42.0.tgz",
+      "integrity": "sha512-2k1HzC28Fs+HiwbJOQDUwrWMttqSLUVdjCqitBOjdCD0svWOMQUVqrXX6iFD7POps6xXAojsX/dGBpKnjZctLA==",
       "dev": true,
       "dependencies": {
-        "playwright": "1.40.1"
+        "playwright": "1.42.0"
       },
       "bin": {
         "playwright": "cli.js"
@@ -3496,12 +3497,12 @@
       }
     },
     "node_modules/playwright": {
-      "version": "1.40.1",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.40.1.tgz",
-      "integrity": "sha512-2eHI7IioIpQ0bS1Ovg/HszsN/XKNwEG1kbzSDDmADpclKc7CyqkHw7Mg2JCz/bbCxg25QUPcjksoMW7JcIFQmw==",
+      "version": "1.42.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.42.0.tgz",
+      "integrity": "sha512-Ko7YRUgj5xBHbntrgt4EIw/nE//XBHOKVKnBjO1KuZkmkhlbgyggTe5s9hjqQ1LpN+Xg+kHsQyt5Pa0Bw5XpvQ==",
       "dev": true,
       "dependencies": {
-        "playwright-core": "1.40.1"
+        "playwright-core": "1.42.0"
       },
       "bin": {
         "playwright": "cli.js"
@@ -3514,9 +3515,9 @@
       }
     },
     "node_modules/playwright-core": {
-      "version": "1.40.1",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.40.1.tgz",
-      "integrity": "sha512-+hkOycxPiV534c4HhpfX6yrlawqVUzITRKwHAmYfmsVreltEl6fAZJ3DPfLMOODw0H3s1Itd6MDCWmP1fl/QvQ==",
+      "version": "1.42.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.42.0.tgz",
+      "integrity": "sha512-0HD9y8qEVlcbsAjdpBaFjmaTHf+1FeIddy8VJLeiqwhcNqGCBe4Wp2e8knpqiYbzxtxarxiXyNDw2cG8sCaNMQ==",
       "dev": true,
       "bin": {
         "playwright-core": "cli.js"
diff --git a/package.json b/package.json
index c28fa6d6..0ddef68c 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "playwright": "playwright test --ui"
   },
   "devDependencies": {
-    "@playwright/test": "^1.28.1",
+    "@playwright/test": "^1.42.0",
     "@skeletonlabs/skeleton": "2.6.0",
     "@skeletonlabs/tw-plugin": "0.3.0",
     "@sveltejs/adapter-auto": "^3.0.0",
@@ -37,9 +37,10 @@
     "prettier-plugin-svelte": "^3.1.2",
     "svelte": "^4.2.7",
     "svelte-check": "^3.6.0",
+    "svelte-eslint-parser": "^0.33.1",
     "tailwindcss": "3.3.6",
     "tslib": "^2.4.1",
-    "typescript": "^5.0.0",
+    "typescript": "^5.3.3",
     "vite": "^5.0.12",
     "vite-plugin-tailwind-purgecss": "0.2.0",
     "vitest": "^1.0.0"
diff --git a/pic-sure-theme.ts b/pic-sure-theme.ts
index 621222b9..c32a3174 100644
--- a/pic-sure-theme.ts
+++ b/pic-sure-theme.ts
@@ -96,6 +96,6 @@ export const picSureTheme: CustomThemeConfig = {
     '--color-surface-600': '167 167 167', // #a7a7a7
     '--color-surface-700': '140 140 140', // #8c8c8c
     '--color-surface-800': '112 112 112', // #707070
-    '--color-surface-900': '91 91 91' // #5b5b5b
-  }
+    '--color-surface-900': '91 91 91', // #5b5b5b
+  },
 };
diff --git a/playwright.config.ts b/playwright.config.ts
index a458c6af..49812fed 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -3,11 +3,11 @@ import type { PlaywrightTestConfig } from '@playwright/test';
 const config: PlaywrightTestConfig = {
   webServer: {
     command: 'npm run build && npm run preview',
-    port: 4173
+    port: 4173,
   },
   testDir: 'tests',
   testMatch: /(.+\.)?(test|spec)\.[jt]s/,
-  reporter: [['list'], ['html']]
+  reporter: [['list'], ['html']],
 };
 
 export default config;
diff --git a/postcss.config.cjs b/postcss.config.cjs
index 5cbc2c7d..12a703d9 100644
--- a/postcss.config.cjs
+++ b/postcss.config.cjs
@@ -1,6 +1,6 @@
 module.exports = {
   plugins: {
     tailwindcss: {},
-    autoprefixer: {}
-  }
+    autoprefixer: {},
+  },
 };
diff --git a/src/app.postcss b/src/app.postcss
index 18f572f8..3c75cb68 100644
--- a/src/app.postcss
+++ b/src/app.postcss
@@ -139,6 +139,24 @@ nav#page-navigation a:active {
   color: rgb(var(--theme-font-color-base));
 }
 
+#landing input[type='search'] {
+  width: 100%;
+  box-sizing: border-box;
+  margin-right: 0.5rem;
+  @apply input;
+}
+
+#landing .stats {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+  align-items: center;
+  width: 70%;
+  margin: 2rem 0;
+  padding: 2rem;
+  @apply card variant-filled-primary;
+}
+
 .subtitle {
   font-size: 2rem;
 }
diff --git a/src/lib/configuration.ts b/src/lib/configuration.ts
index 5f354cd7..9b861c25 100644
--- a/src/lib/configuration.ts
+++ b/src/lib/configuration.ts
@@ -1,4 +1,49 @@
 export const branding = {
+  baseUrl: 'https://nhanes-dev.hms.harvard.edu/',
+  landing: {
+    searchPlaceholder: 'Search terms or variables of interest…',
+    description:
+      'PIC-SURE can be used to search phenotypic variables and genomic variants, apply filters, build cohorts, and export participant-level data.',
+    actions: [
+      {
+        description: 'Explore data, apply filters, and build cohorts',
+        icon: 'fa-solid fa-magnifying-glass fa-5x',
+        url: '/explorer',
+      },
+      {
+        description: 'Manage Previously Saved Datasets',
+        icon: 'fa-solid fa-table-list fa-5x',
+        url: '/dataset',
+      },
+      {
+        description: 'Take a tour of the PIC-SURE API',
+        icon: 'fa-solid fa-route fa-5x',
+        url: '/explorer?tour=true',
+      },
+      {
+        description: 'Learn more about PIC‑SURE',
+        icon: 'fa-solid fa-circle-question fa-5x',
+        url: 'https://pic-sure.org/about',
+      },
+    ],
+    stats: [
+      {
+        title: 'Data Sources',
+        value: '10',
+        valueSrc: undefined,
+      },
+      {
+        title: 'Variables',
+        value: '1,000,000',
+        valueSrc: undefined,
+      },
+      {
+        title: 'Participants with Genomic Data',
+        value: '1,000',
+        valueSrc: undefined,
+      },
+    ],
+  },
   help: {
     links: [
       {
diff --git a/src/lib/models/value.ts b/src/lib/models/value.ts
new file mode 100644
index 00000000..3a0ea9db
--- /dev/null
+++ b/src/lib/models/value.ts
@@ -0,0 +1,5 @@
+export interface Value {
+  title: string;
+  value?: string;
+  valueSrc?: string;
+}
diff --git a/src/lib/navigation.svelte b/src/lib/navigation.svelte
index a80d64a2..80650dfe 100644
--- a/src/lib/navigation.svelte
+++ b/src/lib/navigation.svelte
@@ -4,7 +4,6 @@
   import logo from '$lib/assets/app-logo.png';
 
   const routes = [
-    { path: '/', id: 'home', text: 'Home' },
     { path: '/explorer', text: 'Query Builder' },
     { path: '/users', text: 'Users' },
     { path: '/api', text: 'API' },
@@ -12,7 +11,7 @@
     { path: '/help', text: 'Help' },
     { path: '/admin', text: 'Admin' },
     { path: '/admin/super', text: 'Super Admin' },
-    { path: '/#', id: 'logout', text: 'Logout' }
+    { path: '/#', id: 'logout', text: 'Logout' },
   ];
 
   function getId({ path, id }: { path: string; id?: string; text: string }) {
@@ -22,7 +21,9 @@
 
 <AppBar padding="p-0">
   <svelte:fragment slot="lead">
-    <img id="nav-logo" alt="PIC-Sure logo" src={logo} class="mx-1" />
+    <a href="/" aria-current="page"
+      ><img id="nav-logo" alt="PIC-Sure logo" src={logo} class="mx-1" /></a
+    >
   </svelte:fragment>
   <svelte:fragment slot="trail">
     <nav id="page-navigation">
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 309a0e67..cc1b5091 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,7 +1,157 @@
 <script lang="ts">
-  import Content from '$lib/component/content.svelte';
+  import { branding } from '$lib/configuration';
+  import { ProgressRadial } from '@skeletonlabs/skeleton';
+  import type { Value } from '$lib/models/value';
+  import * as api from '$lib/api';
+  import { goto } from '$app/navigation';
+
+  let values: Value[];
+  let searchTerm = '';
+
+  let getValues = async function () {
+    values = await Promise.all(
+      branding.landing.stats.map(async (stat) => {
+        try {
+          if (!stat.valueSrc) {
+            return { value: stat.value, title: stat.title };
+          }
+          const value = await api.get(stat.valueSrc); //TODO: create endpoints
+          return { value, title: stat.title } as Value;
+        } catch (e) {
+          console.error(e);
+          return { value: 'N/A', title: stat.title };
+        }
+      }),
+    );
+  };
+
+  function search() {
+    goto(`/explorer?search=${searchTerm}`);
+  }
 </script>
 
-<Content title="Home">
-  <p>Sample page data for the home page.</p>
-</Content>
+<div id="landing" class="landing">
+  <section id="search-section" class="flex flex-col text-center items-center search-section">
+    <div class="flex w-full">
+      <input
+        id="search-box"
+        type="search"
+        autocomplete="off"
+        class="search-box"
+        aria-label="Type search terms here, use enter or the search button to submit search"
+        title="Type search terms here, use enter or the search button to submit search"
+        placeholder={branding.landing.searchPlaceholder || 'Search...'}
+        bind:value={searchTerm}
+        on:keydown={(e) => e.key === 'Enter' && search()}
+        required
+      />
+      <button
+        id="search-button"
+        class="btn variant-filled-primary search-button"
+        aria-label="Search"
+        title="Search"
+        disabled={!searchTerm}
+        on:click={search}>Search</button
+      >
+    </div>
+    <p>
+      {branding.landing.description ||
+        'PIC-SURE can be used to search phenotypic variables and genomic variants, apply filters, build cohorts, and export participant-level data.'}
+    </p>
+  </section>
+  <section class="actions">
+    {#each branding.landing.actions as link}
+      <a href={link.url} target={link.url.startsWith('/') ? undefined : '_blank'} tabindex="0">
+        <i class={link.icon} />
+        <div>{link.description}</div>
+      </a>
+    {/each}
+  </section>
+  <section class="stats">
+    {#await getValues()}
+      {#each branding.landing.stats as stat}
+        <div id="value-{stat.title}" class="flex flex-col justify-center items-center">
+          <ProgressRadial width="w-10" value={undefined} />
+          <p>{stat.title}</p>
+        </div>
+      {/each}
+    {:then}
+      {#each values as stat}
+        <div class="flex flex-col">
+          <div id="value-{stat.title}" class="flex flex-col justify-center items-center">
+            {stat.value}
+          </div>
+          <p>{stat.title}</p>
+        </div>
+      {/each}
+    {:catch}
+      {#each branding.landing.stats as stat}
+        <div class="flex flex-col">
+          <div id="value-{stat.title}" class="flex flex-col justify-center items-center">N/A</div>
+          <p>{stat.title}</p>
+        </div>
+      {/each}
+    {/await}
+  </section>
+</div>
+
+<style>
+  #landing {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+    padding: 2rem;
+    text-align: center;
+  }
+
+  #landing #search-section p {
+    max-width: 50rem;
+    margin: 1rem 0;
+    color: grey;
+  }
+
+  #landing section#search-section {
+    width: 70%;
+  }
+
+  #landing .actions {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    margin: 2rem 0;
+  }
+
+  #landing .actions a {
+    color: rgb(var(--text-secondary-500));
+    text-decoration: none;
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    max-width: 12.5rem;
+    padding: 1rem 0.5rem;
+    margin: 0.3rem;
+  }
+
+  #landing .actions a i {
+    color: rgb(var(--color-primary-500));
+  }
+
+  #landing .actions a:hover,
+  #landing .actions a:active {
+    transform: scale(1.05);
+  }
+  #landing .stats .stat {
+    max-width: 10rem;
+  }
+
+  #landing .stats div {
+    font-size: 1.5rem;
+  }
+
+  #landing .stats p {
+    font-size: 1rem;
+  }
+</style>
diff --git a/svelte.config.js b/svelte.config.js
index cb51dadb..a76efce3 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -9,13 +9,13 @@ const config = {
   preprocess: [vitePreprocess()],
 
   vitePlugin: {
-    inspector: true
+    inspector: true,
   },
   kit: {
     // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
     // If your environment is not supported or you settled on a specific environment, switch out the adapter.
     // See https://kit.svelte.dev/docs/adapters for more information about adapters.
-    adapter: adapter()
-  }
+    adapter: adapter(),
+  },
 };
 export default config;
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 6a78f92e..608a53cc 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -9,18 +9,18 @@ export default {
   darkMode: 'class',
   content: [
     './src/**/*.{html,js,svelte,ts}',
-    join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte,ts}')
+    join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte,ts}'),
   ],
   theme: {
-    extend: {}
+    extend: {},
   },
   plugins: [
     forms,
     typography,
     skeleton({
       themes: {
-        custom: [picSureTheme]
-      }
-    })
-  ]
+        custom: [picSureTheme],
+      },
+    }),
+  ],
 } satisfies Config;
diff --git a/tests/routes/landing/test.ts b/tests/routes/landing/test.ts
new file mode 100644
index 00000000..f2226f9f
--- /dev/null
+++ b/tests/routes/landing/test.ts
@@ -0,0 +1,80 @@
+import { expect } from '@playwright/test';
+import { test } from '../../custom-context';
+import { branding } from '../../../src/lib/configuration';
+
+test.describe('Landing page', () => {
+  test('Has expected search to go to explorer', async ({ page }) => {
+    // Given
+    await page.goto('/');
+    // When
+    await page.fill('input', 'test');
+    await page.keyboard.press('Enter');
+    // Then
+    await expect(page).toHaveURL('/explorer?search=test');
+  });
+  test('Has expected search to go to explorer with spaces', async ({ page }) => {
+    // Given
+    await page.goto('/');
+    // When
+    await page.fill('input', 'test with spaces');
+    await page.keyboard.press('Enter');
+    // Then
+    await expect(page).toHaveURL('/explorer?search=test%20with%20spaces');
+  });
+  branding.landing.stats.forEach(({title, value, valueSrc }) => {
+    test(`Has expected stat of title: ${title}`, async ({ page }) => {
+      // Given
+      await page.goto('/');
+      // Then
+      await expect(page.getByText(title, { exact: true })).toBeVisible();
+    });
+    test(`Has expected stat of value: ${value}`, async ({ page }) => {
+      // Given
+      await page.goto('/');
+      // Then
+      //TODO: update to a better test when
+      if (!valueSrc) {
+        await expect(page.getByText(value, { exact: true })).toBeVisible(); 
+      }
+    });
+  });
+  branding.landing.actions.forEach(({ description, icon, url }) => {
+    test(`Has expected action of description: ${description}`, async ({ page }) => {
+      // Given
+      await page.goto('/');
+      // Then
+      await expect(page.getByText(description, { exact: true })).toBeVisible();
+    });
+    test(`Has expected icon of: ${icon}`, async ({ page }) => {
+      // Given
+      await page.goto('/');
+      // Then
+      const iconElement = page.locator(`.${icon.replaceAll(' ', '.')}`);
+      let pattern = new RegExp(`^${icon}.*`);
+      await expect(iconElement).toBeVisible();
+      await expect(iconElement).toHaveClass(pattern);
+    });
+    test(`Card "${description}"'s click leads to ${url}`, async ({ page }) => {
+      // Given
+      await page.goto('/');
+
+      // When
+      const action = page.getByText(description, { exact: true }).locator('..');
+      await action.isVisible();
+
+      // Then
+      if ((await action.getAttribute('target')) !== '_blank') {
+        await action.click();
+        await expect(page).toHaveURL(`${url}`);
+      } else {
+        //check if new tab opened
+        const newTabPromise = page.waitForEvent('popup');
+        await action.click();
+        const newPage = await newTabPromise;
+        await newPage.waitForLoadState();
+        await expect(newPage).not.toBeNull();
+        await expect(newPage).toHaveURL(`${url}`);
+      }
+    });
+  });
+});
diff --git a/tests/test.ts b/tests/test.ts
deleted file mode 100644
index 47dc5729..00000000
--- a/tests/test.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { expect, test } from '@playwright/test';
-
-const routes = [
-  { path: '/', id: 'nav-link-home', headerText: 'Home' },
-  { path: '/explorer', id: 'nav-link-explorer', headerText: 'Explorer/Query Builder' },
-  { path: '/users', id: 'nav-link-users', headerText: 'Users' },
-  { path: '/api', id: 'nav-link-api', headerText: 'API' },
-  { path: '/dataset', id: 'nav-link-dataset', headerText: 'Dataset Management' },
-  { path: '/help', id: 'nav-link-help', headerText: 'Help' },
-  { path: '/admin', id: 'nav-link-admin', headerText: 'Admin' },
-  { path: '/admin/super', id: 'nav-link-admin-super', headerText: 'Super Admin' }
-];
-
-test.describe('Navigation', () => {
-  routes.forEach((route) => {
-    test(`${route.path} page has expected heading`, async ({ page }) => {
-      await page.goto('/');
-      const navItem = page.locator('#' + route.id);
-      await navItem.click();
-      await expect(page.locator('.main-content>h1')).toHaveText(route.headerText);
-    });
-    test(`${route.path} navigation bar has correct active element`, async ({ page }) => {
-      await page.goto(route.path);
-
-      // Check that this element is active
-      const navItem = page.locator('#' + route.id);
-      await expect(navItem).toHaveAttribute('aria-current', 'page');
-
-      // Check that other elements aren't active
-      const inactive = routes
-        .filter((altRoute) => altRoute.path !== route.path)
-        .map((altRoute) => {
-          const navItem = page.locator('#' + altRoute.id);
-          return expect(navItem).not.toHaveAttribute('aria-current');
-        });
-      await Promise.all(inactive);
-    });
-  });
-});
diff --git a/vite.config.ts b/vite.config.ts
index 79292926..029003f0 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -3,5 +3,5 @@ import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
-  plugins: [sveltekit(), purgeCss()]
+  plugins: [sveltekit(), purgeCss()],
 });