diff --git a/lib/config.ts b/lib/config.ts
index 90da3b08b..24426d5fb 100644
--- a/lib/config.ts
+++ b/lib/config.ts
@@ -1,3 +1,3 @@
 export const HOST = 'https://www.json-schema.org';
 
-export const DRAFT_ORDER = ['2020-12', '2019-09', 7, 6, 5, 4, 3, 2, 1];
+export const DRAFT_ORDER = ['2020-12', '2019-09', 7, 6, 5, 4, 3, 2, 1] as const;
diff --git a/package.json b/package.json
index e3c1be243..a5b0ea891 100644
--- a/package.json
+++ b/package.json
@@ -22,11 +22,14 @@
   },
   "dependencies": {
     "@docsearch/react": "3.5.2",
+    "@types/jsonpath": "^0.2.4",
     "axios": "1.6.0",
     "classnames": "^2.3.1",
     "feed": "^4.2.2",
+    "fuse.js": "^7.0.0",
     "gray-matter": "^4.0.3",
     "js-yaml": "^4.1.0",
+    "jsonpath": "^1.1.1",
     "markdown-to-jsx": "^7.1.6",
     "moment": "2.29.4",
     "next": "14.1.1",
diff --git a/pages/tools/JSONSchemaTool.ts b/pages/tools/JSONSchemaTool.ts
new file mode 100644
index 000000000..faeef29ef
--- /dev/null
+++ b/pages/tools/JSONSchemaTool.ts
@@ -0,0 +1,44 @@
+export interface JSONSchemaTool {
+  name: string;
+  description?: string;
+  toolingTypes: string[];
+  languages?: string[];
+  environments?: string[];
+  dependsOnValidators?: string[];
+  creators?: Person[];
+  maintainers?: Person[];
+  license?: string;
+  source: string;
+  homepage?: string;
+  documentation?: object;
+  supportedDialects?: {
+    draft?: (number | string)[];
+    additional?: {
+      name: string;
+      homepage?: string;
+      source: string;
+    }[];
+  };
+  bowtie?: {
+    identifier: string;
+  };
+  toolingListingNotes?: string;
+  compliance?: {
+    config?: {
+      docs?: string;
+      instructions?: string;
+    };
+  };
+  landscape?: {
+    logo?: string;
+    optOut?: boolean;
+  };
+  lastUpdated?: string;
+}
+
+export interface Person {
+  name?: string;
+  email?: string;
+  username: string;
+  platform: 'github' | 'gitlab' | 'bitbucket' | string;
+}
diff --git a/pages/tools/components/GroupBySelector.tsx b/pages/tools/components/GroupBySelector.tsx
new file mode 100644
index 000000000..132e7d2e2
--- /dev/null
+++ b/pages/tools/components/GroupBySelector.tsx
@@ -0,0 +1,44 @@
+import React, { Dispatch, SetStateAction } from 'react';
+import { Preferences } from '../hooks/usePreferences';
+
+export default function GroupBySelector({
+  preferences,
+  setPreferences,
+}: {
+  preferences: Preferences;
+  setPreferences: Dispatch<SetStateAction<Preferences>>;
+}) {
+  const groupBy = preferences.groupBy;
+  const setGroupPreference = (event: React.MouseEvent) => {
+    setPreferences((prev) => ({
+      ...prev,
+      groupBy: (event.target as HTMLButtonElement).value as typeof groupBy,
+      sortBy: 'name',
+      sortOrder: 'ascending',
+    }));
+  };
+
+  const groups: Record<string, Preferences['groupBy']> = {
+    None: 'none',
+    'Tooling Types': 'toolingTypes',
+    Languages: 'languages',
+  };
+
+  return (
+    <div className='ml-2 my-8 flex items-center space-x-2 max-w-screen overflow-x-auto'>
+      <span className='text-slate-600 dark:text-slate-300'>GROUP BY:</span>
+      {Object.keys(groups).map((group) => {
+        return (
+          <button
+            key={groups[group]}
+            value={groups[group]}
+            onClick={setGroupPreference}
+            className={`px-4 py-2 self-stretch border dark:border-slate-800 rounded ${preferences.groupBy === groups[group] ? 'bg-primary text-white' : 'bg-white dark:bg-slate-900 text-slate-600 dark:text-slate-200'}`}
+          >
+            {group}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/pages/tools/components/SearchBar.tsx b/pages/tools/components/SearchBar.tsx
new file mode 100644
index 000000000..622e9e277
--- /dev/null
+++ b/pages/tools/components/SearchBar.tsx
@@ -0,0 +1,31 @@
+import React, { useEffect, useState } from 'react';
+import type { Preferences } from '../hooks/usePreferences';
+
+const SearchBar = ({ preferences }: { preferences: Preferences }) => {
+  const [query, setQuery] = useState(preferences.query);
+
+  const changeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setQuery(e.target.value);
+  };
+
+  useEffect(() => {
+    setQuery(preferences.query);
+  }, [preferences.query]);
+
+  return (
+    <div className='w-full max-w-md mx-auto my-6 lg:my-auto'>
+      <div className='relative'>
+        <input
+          type='text'
+          className='w-full px-4 py-2 border dark:border-slate-900 rounded-md shadow-sm focus:outline-none focus:ring focus:border-blue-300 dark:bg-slate-900'
+          placeholder='Search'
+          name='query'
+          value={query}
+          onChange={changeHandler}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default SearchBar;
diff --git a/pages/tools/components/Sidebar.tsx b/pages/tools/components/Sidebar.tsx
new file mode 100644
index 000000000..5e531baf9
--- /dev/null
+++ b/pages/tools/components/Sidebar.tsx
@@ -0,0 +1,147 @@
+import React, {
+  Dispatch,
+  SetStateAction,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import DropdownMenu from './ui/DropdownMenu';
+import SearchBar from './SearchBar';
+import Checkbox from './ui/Checkbox';
+import { type UniqueValuesPerField } from '../lib/getUniqueValuesPerField';
+import toTitleCase from '../lib/toTitleCase';
+import { useTheme } from 'next-themes';
+import { Preferences } from '../hooks/usePreferences';
+
+export default function Sidebar({
+  uniqueValuesPerField,
+  preferences,
+  setPreferences,
+  resetPreferences,
+  setIsSidebarOpen,
+}: {
+  uniqueValuesPerField: UniqueValuesPerField;
+  preferences: Preferences;
+  setPreferences: Dispatch<SetStateAction<Preferences>>;
+  resetPreferences: () => void;
+  setIsSidebarOpen: Dispatch<SetStateAction<boolean>>;
+}) {
+  const filterFormRef = useRef<HTMLFormElement>(null);
+  const [filterIcon, setFilterIcon] = useState('');
+  const { theme } = useTheme();
+
+  useEffect(() => {
+    if (theme === 'dark') {
+      setFilterIcon('/icons/filter-dark.svg');
+    } else {
+      setFilterIcon('/icons/filter.svg');
+    }
+  }, [theme]);
+
+  const submitHandler = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!filterFormRef.current) return;
+    const formData = new FormData(filterFormRef.current);
+
+    setPreferences((prev) => {
+      const updatedPreferences: Preferences = {
+        query: (formData.get('query') as Preferences['query']) || '',
+        groupBy: prev.groupBy || 'toolingTypes',
+        sortBy: prev.sortBy || 'name',
+        sortOrder: prev.sortOrder || 'ascending',
+        languages: formData.getAll('languages').map((value) => value as string),
+        licenses: formData.getAll('licenses').map((value) => value as string),
+        drafts: formData
+          .getAll('drafts')
+          .map((value) => value) as Preferences['drafts'],
+        toolingTypes: formData
+          .getAll('toolingTypes')
+          .map((value) => value as string),
+      };
+      return updatedPreferences;
+    });
+    setIsSidebarOpen((prev) => (prev ? false : prev));
+  };
+
+  const resetHandler = () => {
+    if (!filterFormRef.current) return;
+    filterFormRef.current.reset();
+    resetPreferences();
+    setIsSidebarOpen((prev) => (prev ? false : prev));
+  };
+
+  return (
+    <div className='pb-4 top-12 mx-auto lg:ml-4 lg:mt-8 w-4/5 h-fit'>
+      <form onSubmit={submitHandler} ref={filterFormRef} className='w-full'>
+        <SearchBar preferences={preferences} />
+        <DropdownMenu
+          label='Languages'
+          iconSrc={filterIcon}
+          iconAlt='Filter Icon'
+        >
+          {uniqueValuesPerField.languages?.map((uniqueValue) => (
+            <Checkbox
+              key={uniqueValue}
+              label={uniqueValue}
+              value={uniqueValue}
+              name='languages'
+            />
+          ))}
+        </DropdownMenu>
+        <DropdownMenu label='Drafts' iconSrc={filterIcon} iconAlt='Filter Icon'>
+          {uniqueValuesPerField.drafts?.map((uniqueValue) => (
+            <Checkbox
+              key={uniqueValue}
+              label={uniqueValue}
+              value={uniqueValue}
+              name='drafts'
+            />
+          ))}
+        </DropdownMenu>
+        <DropdownMenu
+          label='Tooling Types'
+          iconSrc={filterIcon}
+          iconAlt='Filter Icon'
+        >
+          {uniqueValuesPerField.toolingTypes?.map((uniqueValue) => (
+            <Checkbox
+              key={uniqueValue}
+              label={toTitleCase(uniqueValue, '-')}
+              value={uniqueValue}
+              name='toolingTypes'
+            />
+          ))}
+        </DropdownMenu>
+        <DropdownMenu
+          label='License'
+          iconSrc={filterIcon}
+          iconAlt='Filter Icon'
+        >
+          {uniqueValuesPerField.licenses?.map((uniqueValue) => (
+            <Checkbox
+              key={uniqueValue}
+              label={uniqueValue}
+              value={uniqueValue}
+              name='licenses'
+            />
+          ))}
+        </DropdownMenu>
+        <div className='w-full flex items-center justify-between mt-4'>
+          <button
+            type='submit'
+            className='bg-primary text-white px-4 py-2 rounded hover:bg-blue-700 focus:outline-none'
+          >
+            Apply Filters
+          </button>
+          <button
+            type='button'
+            className='bg-slate-200 dark:bg-slate-900 text-gray-700 dark:text-slate-200 px-4 py-2 rounded hover:bg-slate-300 focus:outline-none'
+            onClick={resetHandler}
+          >
+            Clear Filters
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}
diff --git a/pages/tools/components/ToolingTable/TableCell.tsx b/pages/tools/components/ToolingTable/TableCell.tsx
new file mode 100644
index 000000000..07ba9f509
--- /dev/null
+++ b/pages/tools/components/ToolingTable/TableCell.tsx
@@ -0,0 +1,19 @@
+import React, { ReactNode } from 'react';
+
+const TableCell = ({
+  className,
+  children,
+}: {
+  className: string;
+  children: ReactNode | ReactNode[];
+}) => {
+  return (
+    <td
+      className={`px-4 py-2 border-b border-gray-200 lg:break-all ${className}`}
+    >
+      {children}
+    </td>
+  );
+};
+
+export default TableCell;
diff --git a/pages/tools/components/ToolingTable/TableColumnHeader.tsx b/pages/tools/components/ToolingTable/TableColumnHeader.tsx
new file mode 100644
index 000000000..e92cb4935
--- /dev/null
+++ b/pages/tools/components/ToolingTable/TableColumnHeader.tsx
@@ -0,0 +1,17 @@
+import React, { ReactNode } from 'react';
+
+const TableColumnHeader = ({
+  className,
+  children,
+}: {
+  className: string;
+  children: ReactNode | ReactNode[];
+}) => {
+  return (
+    <th className={`px-4 py-2 border-b border-gray-200 ${className}`}>
+      {children}
+    </th>
+  );
+};
+
+export default TableColumnHeader;
diff --git a/pages/tools/components/ToolingTable/TableSortableColumnHeader.tsx b/pages/tools/components/ToolingTable/TableSortableColumnHeader.tsx
new file mode 100644
index 000000000..08ff9c56a
--- /dev/null
+++ b/pages/tools/components/ToolingTable/TableSortableColumnHeader.tsx
@@ -0,0 +1,79 @@
+import React, {
+  Dispatch,
+  ReactNode,
+  SetStateAction,
+  useEffect,
+  useState,
+} from 'react';
+import TableColumnHeader from './TableColumnHeader';
+import { Preferences } from '../../hooks/usePreferences';
+
+const TableSortableColumnHeader = ({
+  className,
+  sortBy,
+  preferences,
+  setPreferences,
+  children,
+}: {
+  className: string;
+  sortBy: Preferences['sortBy'];
+  preferences: Preferences;
+  setPreferences: Dispatch<SetStateAction<Preferences>>;
+  children: ReactNode;
+}) => {
+  const [isSortedBy, setIsSortedBy] = useState(preferences.sortBy === sortBy);
+
+  useEffect(() => {
+    setIsSortedBy(preferences.sortBy === sortBy);
+  }, [preferences.sortBy]);
+
+  const sortByColumn = (e: React.MouseEvent) => {
+    e.preventDefault();
+    setPreferences((prevPreferences) => {
+      const newSortOrder =
+        prevPreferences.sortBy === sortBy
+          ? prevPreferences.sortOrder === 'descending'
+            ? 'ascending'
+            : 'descending'
+          : 'ascending';
+      return {
+        ...prevPreferences,
+        sortBy,
+        sortOrder: newSortOrder,
+      };
+    });
+
+    setIsSortedBy(true);
+  };
+
+  const rotateClass = preferences.sortOrder === 'ascending' ? 'rotate-180' : '';
+
+  return (
+    <TableColumnHeader className={className}>
+      <button
+        className='flex items-center focus:outline-none'
+        onClick={sortByColumn}
+      >
+        {children}
+        {isSortedBy && (
+          <svg
+            xmlns='http://www.w3.org/2000/svg'
+            fill='none'
+            viewBox='0 0 24 24'
+            stroke='currentColor'
+            className={`w-4 h-4 ml-1 transform ${rotateClass}`}
+          >
+            <path
+              strokeLinecap='round'
+              strokeLinejoin='round'
+              strokeWidth='2'
+              d='M5 15l7-7 7 7'
+            />
+          </svg>
+        )}
+      </button>
+    </TableColumnHeader>
+  );
+};
+
+export default TableSortableColumnHeader;
diff --git a/pages/tools/components/ToolingTable/ToolingDetailModal.tsx b/pages/tools/components/ToolingTable/ToolingDetailModal.tsx
new file mode 100644
index 000000000..9d8f54992
--- /dev/null
+++ b/pages/tools/components/ToolingTable/ToolingDetailModal.tsx
@@ -0,0 +1,283 @@
+import React, { useEffect } from 'react';
+
+import Badge from '../ui/Badge';
+import type { JSONSchemaTool } from '../../JSONSchemaTool';
+import toTitleCase from '../../lib/toTitleCase';
+
+export default function ToolingDetailModal({
+  tool,
+  onClose,
+}: {
+  tool: JSONSchemaTool;
+  onClose: () => void;
+}) {
+  useEffect(() => {
+    document.body.classList.add('no-scroll');
+    return () => {
+      document.body.classList.remove('no-scroll');
+    };
+  }, []);
+
+  return (
+    <div className='fixed inset-0 flex items-center justify-center z-50 overflow-x-hidden'>
+      <div
+        className='fixed inset-0 bg-black opacity-50'
+        onClick={onClose}
+      ></div>
+      <div
+        className='bg-white dark:bg-slate-800 rounded-lg p-8 max-w-full lg:max-w-4xl w-10/12 lg:w-full relative top-8 z-50 max-h-[80vh] overflow-y-auto'
+        style={{ overflowWrap: 'anywhere' }}
+      >
+        <div className='flex justify-end absolute top-0 right-0 mt-4 mr-4'>
+          <button
+            onClick={onClose}
+            className='text-gray-500 hover:text-gray-700'
+          >
+            <svg
+              className='h-6 w-6 fill-current'
+              xmlns='http://www.w3.org/2000/svg'
+              viewBox='0 0 24 24'
+            >
+              <path d='M6.293 7.293a1 1 0 011.414 0L12 10.586l4.293-4.293a1 1 0 111.414 1.414L13.414 12l4.293 4.293a1 1 0 01-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 01-1.414-1.414L10.586 12 6.293 7.707a1 1 0 010-1.414z' />
+            </svg>
+          </button>
+        </div>
+        <div className='mt-4'>
+          <h2 className='text-h1mobile md:text-h4 font-bold '>{tool.name}</h2>
+          {tool.description && (
+            <p className='text-gray-600 dark:text-slate-300 mt-1 text-base'>
+              {tool.description}
+            </p>
+          )}
+        </div>
+        <div className='flex flex-col md:flex-row mt-6'>
+          <div className='w-full md:w-1/2 md:pr-4'>
+            {tool.source && (
+              <div className='mt-4'>
+                <h3 className='text-lg font-semibold'>Source</h3>
+                <a
+                  href={tool.source}
+                  target='blank'
+                  className='text-blue-500 hover:underline'
+                >
+                  {tool.source}
+                </a>
+              </div>
+            )}
+            {tool.homepage && (
+              <div className='mt-4'>
+                <h3 className='text-lg font-semibold'>Homepage</h3>
+                <a
+                  href={tool.homepage}
+                  target='blank'
+                  className='text-blue-500 hover:underline'
+                >
+                  {tool.homepage}
+                </a>
+              </div>
+            )}
+            {tool.license && (
+              <div className='mt-4'>
+                <h3 className='text-lg font-semibold'>License</h3>
+                <p>{tool.license}</p>
+              </div>
+            )}
+            {tool.compliance && (
+              <div className='mt-4'>
+                <h3 className='text-lg font-semibold'>Compliance</h3>
+                {tool.compliance.config && (
+                  <div>
+                    {tool.compliance.config.docs && (
+                      <div className='mt-2'>
+                        <h4 className='font-semibold'>Docs:</h4>
+                        <a
+                          href={tool.compliance.config.docs}
+                          target='blank'
+                          className='text-blue-500 hover:underline'
+                        >
+                          {tool.compliance.config.docs}
+                        </a>
+                      </div>
+                    )}
+                    {tool.compliance.config.instructions && (
+                      <div className='mt-2'>
+                        <h4 className='font-semibold'>Instructions:</h4>
+                        <p>{tool.compliance.config.instructions}</p>
+                      </div>
+                    )}
+                  </div>
+                )}
+              </div>
+            )}
+            {tool.toolingListingNotes && (
+              <div className='mt-4'>
+                <h3 className='text-lg font-semibold'>Tooling Listing Notes</h3>
+                <p>{tool.toolingListingNotes}</p>
+              </div>
+            )}
+            {tool.creators && (
+              <div className='mt-4'>
+                <h3 className='text-lg font-semibold'>Creators</h3>
+                <ul className='list-disc list-inside'>
+                  {tool.creators.map((creator, index) => (
+                    <li key={index}>
+                      <span>{creator.name ? creator.name : 'N.A.'}</span>
+                      <span className='ml-1'>
+                        (
+                        {creator.username && creator.platform && (
+                          <a
+                            href={`https://${creator.platform}.com/${creator.username}`}
+                            target='blank'
+                            className='text-blue-500 hover:underline'
+                          >
+                            @{creator.username}
+                          </a>
+                        )}
+                        )
+                      </span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            )}
+            {tool.maintainers && (
+              <div className='mt-4'>
+                <h3 className='text-lg font-semibold'>Maintainers</h3>
+                <ul className='list-disc list-inside'>
+                  {tool.maintainers.map((maintainer, index) => (
+                    <li key={index}>
+                      <span>{maintainer.name ? maintainer.name : 'N.A.'}</span>
+                      <span className='ml-1'>
+                        (
+                        {maintainer.username && maintainer.platform && (
+                          <a
+                            href={`https://${maintainer.platform}.com/${maintainer.username}`}
+                            target='blank'
+                            className='text-blue-500 hover:underline'
+                          >
+                            @{maintainer.username}
+                          </a>
+                        )}
+                        )
+                      </span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            )}
+          </div>
+          <div className='w-full md:w-1/2 md:pl-4'>
+            {tool.supportedDialects && (
+              <div className='mt-4'>
+                <h3 className='text-lg font-semibold'>Supported Dialects</h3>
+                {tool.supportedDialects.draft && (
+                  <div className='mt-2'>
+                    <h4 className='font-semibold'>Draft:</h4>
+                    <ul className='list-disc list-inside'>
+                      {tool.supportedDialects.draft.map((draft) => (
+                        <Badge key={draft}>{draft}</Badge>
+                      ))}
+                    </ul>
+                  </div>
+                )}
+                {tool.supportedDialects.additional && (
+                  <div className='mt-2'>
+                    <h4 className='font-semibold'>Additional:</h4>
+                    <ul className='list-disc list-inside'>
+                      {tool.supportedDialects.additional.map(
+                        (additional, index) => (
+                          <li key={index}>
+                            {additional.name} (
+                            <a
+                              href={additional.source}
+                              target='blank'
+                              className='text-blue-500 hover:underline'
+                            >
+                              Source
+                            </a>
+                            )
+                          </li>
+                        ),
+                      )}
+                    </ul>
+                  </div>
+                )}
+              </div>
+            )}
+            {tool.toolingTypes && (
+              <div className='mt-4'>
+                <h3 className='text-lg font-semibold'>Tooling Types</h3>
+                <ul className='list-disc list-inside'>
+                  {tool.toolingTypes.map((type, index) => (
+                    <li key={index}>{toTitleCase(type, '-')}</li>
+                  ))}
+                </ul>
+              </div>
+            )}
+            {tool.languages && (
+              <div className='mt-4'>
+                <h3 className='text-lg font-semibold'>Languages</h3>
+                <ul className='list-disc list-inside'>
+                  {tool.languages.map((language, index) => (
+                    <li key={index}>{language}</li>
+                  ))}
+                </ul>
+              </div>
+            )}
+            {tool.environments && (
+              <div className='mt-4'>
+                <h3 className='text-lg font-semibold'>Environments</h3>
+                <ul className='list-disc list-inside'>
+                  {tool.environments.map((environment, index) => (
+                    <li key={index}>{environment}</li>
+                  ))}
+                </ul>
+              </div>
+            )}
+            {tool.bowtie && (
+              <div className='mt-4'>
+                <h3 className='text-lg font-semibold'>Bowtie Identifier</h3>
+                <p>{tool.bowtie.identifier}</p>
+              </div>
+            )}
+            {tool.dependsOnValidators && (
+              <div className='mt-4'>
+                <h3 className='text-lg font-semibold'>Depends On Validators</h3>
+                <ul className='list-disc list-inside'>
+                  {tool.dependsOnValidators.map((validator, index) => (
+                    <li key={index}>
+                      <a
+                        href={validator}
+                        target='blank'
+                        className='text-blue-500 hover:underline'
+                      >
+                        {validator}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            )}
+            {tool.landscape && (
+              <div className='mt-4'>
+                <h3 className='text-lg font-semibold'>Landscape</h3>
+                {tool.landscape.logo && (
+                  <div className='mt-2'>
+                    <h4 className='font-semibold'>Logo:</h4>
+                    <p>{tool.landscape.logo}</p>
+                  </div>
+                )}
+                {tool.landscape.optOut !== undefined && (
+                  <div className='mt-2'>
+                    <h4 className='font-semibold'>Opt-Out:</h4>
+                    <p>{tool.landscape.optOut ? 'Yes' : 'No'}</p>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/pages/tools/components/ToolingTable/ToolingTable.tsx b/pages/tools/components/ToolingTable/ToolingTable.tsx
new file mode 100644
index 000000000..9479cc026
--- /dev/null
+++ b/pages/tools/components/ToolingTable/ToolingTable.tsx
@@ -0,0 +1,201 @@
+import React, { Dispatch, SetStateAction, useState } from 'react';
+
+import { Headline2 } from '~/components/Headlines';
+
+import type { GroupedTools, Preferences } from '../../hooks/usePreferences';
+import type { JSONSchemaTool } from '../../JSONSchemaTool';
+import toTitleCase from '../../lib/toTitleCase';
+import Badge from '../ui/Badge';
+import TableColumnHeader from './TableColumnHeader';
+import TableSortableColumnHeader from './TableSortableColumnHeader';
+import TableCell from './TableCell';
+import ToolingDetailModal from './ToolingDetailModal';
+
+const ToolingTable = ({
+  groupedTools,
+  preferences,
+  setPreferences,
+}: {
+  groupedTools: GroupedTools;
+  preferences: Preferences;
+  setPreferences: Dispatch<SetStateAction<Preferences>>;
+}) => {
+  const [selectedTool, setSelectedTool] = useState<JSONSchemaTool | null>(null);
+
+  const groups = Object.keys(groupedTools);
+
+  const openModal = (tool: JSONSchemaTool) => {
+    setSelectedTool(tool);
+  };
+
+  const closeModal = () => {
+    setSelectedTool(null);
+  };
+
+  const outlinkIcon = (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      fill='none'
+      viewBox='0 0 24 24'
+      stroke='currentColor'
+      className='w-5 h-5'
+    >
+      <path
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='2'
+        d='M14 3h7m0 0v7m0-7L10 14m1-9H5a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2v-6'
+      />
+    </svg>
+  );
+
+  const notAvailableIcon = (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      fill='none'
+      viewBox='0 0 24 24'
+      stroke='currentColor'
+      className='w-5 h-5'
+    >
+      <path
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='2'
+        d='M6 18L18 6M6 6l12 12'
+      />
+    </svg>
+  );
+
+  const columnWidths = {
+    allPresent: {
+      name: 'w-[25%]',
+      toolingType: 'w-[20%]',
+      languages: 'w-[20%]',
+      drafts: 'w-[15%]',
+      license: 'w-[10%]',
+      bowtie: 'w-[10%]',
+    },
+    oneAbsent: {
+      name: 'w-[30%]',
+      toolingType: 'w-[25%]',
+      languages: 'w-[25%]',
+      drafts: 'w-[20%]',
+      license: 'w-[15%]',
+      bowtie: 'w-[10%]',
+    },
+  };
+
+  const currentWidths =
+    preferences.groupBy === 'toolingTypes'
+      ? columnWidths.oneAbsent
+      : preferences.groupBy === 'languages'
+        ? columnWidths.oneAbsent
+        : columnWidths.allPresent;
+
+  return (
+    <>
+      {groups.map((group) => (
+        <section key={group} className='mb-12 text-left'>
+          {group !== 'none' && (
+            <div className='mb-10 px-4 w-full bg-gray-100 dark:bg-slate-900'>
+              <Headline2 attributes={{ className: 'mt-[0px]' }}>
+                {toTitleCase(group, '-')}
+              </Headline2>
+            </div>
+          )}
+          <div className='overflow-x-auto'>
+            <table className='min-w-full bg-white dark:bg-slate-800 border border-gray-200'>
+              <thead>
+                <tr>
+                  <TableSortableColumnHeader
+                    sortBy='name'
+                    preferences={preferences}
+                    setPreferences={setPreferences}
+                    className={currentWidths.name}
+                  >
+                    Name
+                  </TableSortableColumnHeader>
+                  {preferences.groupBy !== 'toolingTypes' && (
+                    <TableColumnHeader className={currentWidths.toolingType}>
+                      Tooling Type
+                    </TableColumnHeader>
+                  )}
+                  {preferences.groupBy !== 'languages' && (
+                    <TableColumnHeader className={currentWidths.languages}>
+                      Languages
+                    </TableColumnHeader>
+                  )}
+                  <TableColumnHeader className={currentWidths.drafts}>
+                    Drafts
+                  </TableColumnHeader>
+                  <TableSortableColumnHeader
+                    sortBy='license'
+                    preferences={preferences}
+                    setPreferences={setPreferences}
+                    className={currentWidths.license}
+                  >
+                    License
+                  </TableSortableColumnHeader>
+                  <TableColumnHeader className={currentWidths.bowtie}>
+                    Bowtie
+                  </TableColumnHeader>
+                </tr>
+              </thead>
+              <tbody>
+                {groupedTools[group].map((tool: JSONSchemaTool, index) => (
+                  <tr
+                    key={index}
+                    className='hover:bg-gray-100 dark:hover:bg-slate-700 cursor-pointer'
+                    onClick={() => openModal(tool)}
+                  >
+                    <TableCell className={currentWidths.name}>
+                      {tool.name}
+                    </TableCell>
+                    {preferences.groupBy !== 'toolingTypes' && (
+                      <TableCell className={currentWidths.toolingType}>
+                        {tool.toolingTypes
+                          ?.map((type) => toTitleCase(type, '-'))
+                          .join(', ')}
+                      </TableCell>
+                    )}
+                    {preferences.groupBy !== 'languages' && (
+                      <TableCell className={currentWidths.languages}>
+                        {tool.languages?.join(', ')}
+                      </TableCell>
+                    )}
+                    <TableCell className={currentWidths.drafts}>
+                      {tool.supportedDialects?.draft?.map((draft) => {
+                        return <Badge key={draft}>{draft}</Badge>;
+                      })}
+                    </TableCell>
+                    <TableCell className={currentWidths.license}>
+                      {tool.license}
+                    </TableCell>
+                    <TableCell className={currentWidths.bowtie}>
+                      {tool.bowtie?.identifier ? (
+                        <a
+                          href={`https://bowtie.report/#/implementations/${tool.bowtie?.identifier}`}
+                          target='blank'
+                          onClick={(event) => event.stopPropagation()}
+                        >
+                          {outlinkIcon}
+                        </a>
+                      ) : (
+                        <span>{notAvailableIcon}</span>
+                      )}
+                    </TableCell>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </section>
+      ))}
+      {selectedTool && (
+        <ToolingDetailModal tool={selectedTool} onClose={closeModal} />
+      )}
+    </>
+  );
+};
+
+export default ToolingTable;
diff --git a/pages/tools/components/ui/Badge.tsx b/pages/tools/components/ui/Badge.tsx
new file mode 100644
index 000000000..2085773c3
--- /dev/null
+++ b/pages/tools/components/ui/Badge.tsx
@@ -0,0 +1,11 @@
+import React, { ReactNode } from 'react';
+
+const Badge = ({ children }: { children: ReactNode }) => {
+  return (
+    <div className='whitespace-nowrap inline-block rounded-md bg-slate-200 dark:bg-slate-900 mx-[4px] my-[4px] px-[16px] py-[4px]'>
+      {children}
+    </div>
+  );
+};
+
+export default Badge;
diff --git a/pages/tools/components/ui/Checkbox.tsx b/pages/tools/components/ui/Checkbox.tsx
new file mode 100644
index 000000000..57973402b
--- /dev/null
+++ b/pages/tools/components/ui/Checkbox.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+export default function Checkbox({
+  label,
+  value,
+  name,
+}: {
+  label: string;
+  value: string;
+  name: string;
+}) {
+  return (
+    <label className='flex items-center gap-3 px-4 py-2'>
+      <input type='checkbox' value={value} name={name} />
+      <span className='text-gray-700 dark:text-slate-300 font-medium'>
+        {label}
+      </span>
+    </label>
+  );
+}
diff --git a/pages/tools/components/ui/DropdownMenu.tsx b/pages/tools/components/ui/DropdownMenu.tsx
new file mode 100644
index 000000000..5e4a3dd35
--- /dev/null
+++ b/pages/tools/components/ui/DropdownMenu.tsx
@@ -0,0 +1,67 @@
+import classnames from 'classnames';
+import { useRouter } from 'next/router';
+import React, { ReactNode, useEffect, useState } from 'react';
+
+export default function DropdownMenu({
+  children,
+  label,
+  iconSrc,
+  iconAlt,
+}: {
+  children: ReactNode;
+  label: string;
+  iconSrc: string;
+  iconAlt: string;
+}) {
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const router = useRouter();
+
+  useEffect(() => {
+    setIsDropdownOpen(false);
+  }, [router]);
+
+  return (
+    <div className='my-2 bg-slate-200 dark:bg-slate-900 p-2 rounded'>
+      <div
+        className='w-full flex justify-between items-center align-middle'
+        onClick={() => {
+          setIsDropdownOpen((prev) => !prev);
+        }}
+      >
+        <img src={iconSrc} alt={iconAlt} className='mr-2' />
+        <div className='text-slate-900 dark:text-slate-300 font-bold mr-auto'>
+          {label}
+        </div>
+        <svg
+          style={{
+            transform: `${isDropdownOpen ? 'rotate(180deg)' : 'rotate(0)'}`,
+            transition: 'all 0.2s linear',
+            cursor: 'pointer',
+          }}
+          id='arrow'
+          xmlns='http://www.w3.org/2000/svg'
+          fill='none'
+          height='32'
+          viewBox='0 0 24 24'
+          width='24'
+        >
+          <path
+            clipRule='evenodd'
+            d='m16.5303 8.96967c.2929.29289.2929.76777 0 1.06063l-4 4c-.2929.2929-.7677.2929-1.0606 0l-4.00003-4c-.29289-.29286-.29289-.76774 0-1.06063s.76777-.29289 1.06066 0l3.46967 3.46963 3.4697-3.46963c.2929-.29289.7677-.29289 1.0606 0z'
+            fill='#707070'
+            fillRule='evenodd'
+          />
+        </svg>
+      </div>
+
+      <div
+        className={classnames(
+          'ml-0 mt-4 overflow-x-hidden overscroll-y-auto max-h-80',
+          { hidden: !isDropdownOpen },
+        )}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
diff --git a/pages/tools/components/ui/Radio.tsx b/pages/tools/components/ui/Radio.tsx
new file mode 100644
index 000000000..911500ff7
--- /dev/null
+++ b/pages/tools/components/ui/Radio.tsx
@@ -0,0 +1,32 @@
+import React, { ChangeEventHandler } from 'react';
+
+export default function Radio({
+  label,
+  value,
+  selectedValue,
+  onChange,
+}: {
+  label: string;
+  value: string;
+  selectedValue: string;
+  onChange: ChangeEventHandler<HTMLInputElement>;
+}) {
+  return (
+    <label className='flex items-center gap-3 px-4 py-2'>
+      <input
+        type='radio'
+        value={value}
+        checked={selectedValue === value}
+        onChange={onChange}
+        className='hidden'
+        id={value}
+      />
+      <span className='w-4 h-4 inline-block rounded-full border-2 border-gray-300 flex-shrink-0 relative'>
+        <span
+          className={`w-2 h-2 bg-blue-600 rounded-full absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 transition-opacity duration-200 ${selectedValue === value ? 'opacity-100' : 'opacity-0'}`}
+        ></span>
+      </span>
+      <span className='text-gray-700 font-medium'>{label}</span>
+    </label>
+  );
+}
diff --git a/pages/tools/hooks/usePreferences.tsx b/pages/tools/hooks/usePreferences.tsx
new file mode 100644
index 000000000..18db78e0c
--- /dev/null
+++ b/pages/tools/hooks/usePreferences.tsx
@@ -0,0 +1,241 @@
+import { useMemo, useState, useEffect, useCallback } from 'react';
+import { NextRouter, useRouter } from 'next/router';
+import Fuse from 'fuse.js';
+
+import { DRAFT_ORDER } from '~/lib/config';
+import getQueryParamValues from '../lib/getQueryParamValues';
+import { type JSONSchemaTool } from '../JSONSchemaTool';
+
+export interface Preferences {
+  query: string;
+  groupBy: 'none' | 'toolingTypes' | 'languages';
+  sortBy: 'name' | 'license';
+  sortOrder: 'ascending' | 'descending';
+  licenses: string[];
+  languages: string[];
+  drafts: `${(typeof DRAFT_ORDER)[number]}`[];
+  toolingTypes: string[];
+}
+
+export interface GroupedTools {
+  [group: string]: JSONSchemaTool[];
+}
+
+const getInitialPreferences = (searchParams: URLSearchParams): Preferences => ({
+  query: (searchParams.get('query') as Preferences['query']) || '',
+  groupBy:
+    (searchParams.get('groupBy') as Preferences['groupBy']) || 'toolingTypes',
+  sortBy: (searchParams.get('sortBy') as Preferences['sortBy']) || 'name',
+  sortOrder:
+    (searchParams.get('sortOrder') as Preferences['sortOrder']) || 'ascending',
+  languages: getQueryParamValues(searchParams.getAll('languages')),
+  licenses: getQueryParamValues(searchParams.getAll('license')),
+  drafts: getQueryParamValues(
+    searchParams.getAll('drafts'),
+  ) as Preferences['drafts'],
+  toolingTypes: getQueryParamValues(searchParams.getAll('toolingTypes')),
+});
+
+const updateURLParams = (preferences: Preferences, router: NextRouter) => {
+  const params = new URLSearchParams();
+  Object.entries(preferences).forEach(([key, value]) => {
+    if (Array.isArray(value)) {
+      value.forEach((val) => params.append(key, val));
+    } else {
+      params.set(key, value);
+    }
+  });
+  router.replace({ query: params.toString() }, undefined, { shallow: true });
+};
+
+const filterTools = (
+  tools: JSONSchemaTool[],
+  preferences: Preferences,
+): JSONSchemaTool[] => {
+  const lowerCaseArray = (arr: string[]) =>
+    arr.map((item) => item.toLowerCase());
+  const lowerCasePreferences = {
+    languages: lowerCaseArray(preferences.languages),
+    licenses: lowerCaseArray(preferences.licenses),
+    toolingTypes: lowerCaseArray(preferences.toolingTypes),
+    drafts: preferences.drafts.map(String),
+  };
+
+  return tools.filter((tool) => {
+    const matchesLanguage =
+      lowerCasePreferences.languages.length === 0 ||
+      (tool.languages || []).some((lang) =>
+        lowerCasePreferences.languages.includes(lang.toLowerCase()),
+      );
+
+    const matchesLicense =
+      lowerCasePreferences.licenses.length === 0 ||
+      (tool.license &&
+        lowerCasePreferences.licenses.includes(tool.license.toLowerCase()));
+
+    const matchesToolingType =
+      lowerCasePreferences.toolingTypes.length === 0 ||
+      (tool.toolingTypes || []).some((type) =>
+        lowerCasePreferences.toolingTypes.includes(type.toLowerCase()),
+      );
+
+    const matchesDraft =
+      lowerCasePreferences.drafts.length === 0 ||
+      (tool.supportedDialects?.draft || []).some((draft) =>
+        lowerCasePreferences.drafts.includes(String(draft)),
+      );
+
+    return (
+      matchesLanguage && matchesLicense && matchesToolingType && matchesDraft
+    );
+  });
+};
+
+const sortTools = (
+  tools: JSONSchemaTool[],
+  preferences: Preferences,
+): JSONSchemaTool[] => {
+  const compare = (a: JSONSchemaTool, b: JSONSchemaTool) => {
+    const aValue =
+      preferences.sortBy === 'name'
+        ? a.name.toLowerCase()
+        : (a.license || '').toLowerCase();
+    const bValue =
+      preferences.sortBy === 'name'
+        ? b.name.toLowerCase()
+        : (b.license || '').toLowerCase();
+    return preferences.sortOrder === 'ascending'
+      ? aValue.localeCompare(bValue)
+      : bValue.localeCompare(aValue);
+  };
+  return [...tools].sort(compare);
+};
+
+const toolingTypesOrder = [
+  'validator',
+  'hyper-schema',
+  'benchmarks',
+  'documentation',
+  'LDO-utility',
+  'code-to-schema',
+  'data-to-schema',
+  'model-to-schema',
+  'schema-to-types',
+  'schema-to-code',
+  'schema-to-web-UI',
+  'schema-to-data',
+  'util-general-processing',
+  'util-schema-to-schema',
+  'util-draft-migration',
+  'util-format-conversion',
+  'util-testing',
+  'editor',
+  'editor-plugins',
+  'schema-repository',
+  'linter',
+  'linter-plugins',
+];
+
+const groupTools = (
+  tools: JSONSchemaTool[],
+  groupBy: Preferences['groupBy'],
+): [GroupedTools, numberOfTools: number] => {
+  const groupedTools: GroupedTools = {};
+  let numberOfTools = 0;
+
+  if (groupBy === 'languages' || groupBy === 'toolingTypes') {
+    tools.forEach((tool) => {
+      const groups = tool[groupBy] || [];
+      if (groups.length > 0) {
+        groups.forEach((group) => {
+          if (!groupedTools[group]) groupedTools[group] = [];
+          groupedTools[group].push(tool);
+        });
+        numberOfTools++;
+      }
+    });
+  } else {
+    groupedTools['none'] = tools;
+    return [groupedTools, tools.length];
+  }
+
+  const sortedGroupedTools = Object.keys(groupedTools)
+    .sort((a, b) => {
+      if (groupBy === 'toolingTypes') {
+        const indexA = toolingTypesOrder.indexOf(a);
+        const indexB = toolingTypesOrder.indexOf(b);
+        if (indexA === -1 || indexB === -1) {
+          return a.toLowerCase().localeCompare(b.toLowerCase());
+        }
+        return indexA - indexB;
+      }
+      return a.toLowerCase().localeCompare(b.toLowerCase());
+    })
+    .reduce((acc, key) => {
+      acc[key] = groupedTools[key];
+      return acc;
+    }, {} as GroupedTools);
+
+  return [sortedGroupedTools, numberOfTools];
+};
+
+export default function usePreferences(tools: JSONSchemaTool[]) {
+  const router = useRouter();
+  const { asPath } = router;
+  const searchParams = new URLSearchParams(asPath.split('?')[1]);
+  const initialPreferences = getInitialPreferences(searchParams);
+
+  const [preferences, setPreferences] =
+    useState<Preferences>(initialPreferences);
+
+  useEffect(() => {
+    updateURLParams(preferences, router);
+  }, [preferences]);
+
+  const resetPreferences = useCallback(() => {
+    setPreferences((prev) => ({
+      query: '',
+      groupBy: prev.groupBy,
+      sortBy: 'name',
+      sortOrder: 'ascending',
+      languages: [],
+      licenses: [],
+      drafts: [],
+      toolingTypes: [],
+    }));
+    window.scrollTo(0, 0);
+  }, []);
+
+  const fuse = useMemo(
+    () =>
+      new Fuse(tools, { keys: ['name'], includeScore: true, threshold: 0.3 }),
+    [tools],
+  );
+  const hits = useMemo(
+    () =>
+      preferences.query.trim() === ''
+        ? tools
+        : fuse.search(preferences.query).map((result) => result.item),
+    [fuse, preferences.query, tools],
+  );
+  const filteredHits = useMemo(
+    () => filterTools(hits, preferences),
+    [hits, preferences],
+  );
+  const sortedHits = useMemo(
+    () => sortTools(filteredHits, preferences),
+    [filteredHits, preferences.sortBy, preferences.sortOrder],
+  );
+  const [groupedTools, numberOfTools] = useMemo(
+    () => groupTools(sortedHits, preferences.groupBy),
+    [sortedHits, preferences.groupBy],
+  );
+
+  return {
+    preferredTools: groupedTools,
+    numberOfTools,
+    preferences,
+    setPreferences,
+    resetPreferences,
+  };
+}
diff --git a/pages/tools/index.page.tsx b/pages/tools/index.page.tsx
new file mode 100644
index 000000000..81dd12cfe
--- /dev/null
+++ b/pages/tools/index.page.tsx
@@ -0,0 +1,195 @@
+import React, { useState } from 'react';
+import fs from 'fs';
+import Head from 'next/head';
+import yaml from 'js-yaml';
+
+import { SectionContext } from '~/context';
+import { getLayout } from '~/components/SiteLayout';
+import { DRAFT_ORDER } from '~/lib/config';
+import { Headline1 } from '~/components/Headlines';
+
+import Sidebar from './components/Sidebar';
+import ToolingTable from './components/ToolingTable/ToolingTable';
+import GroupBySelector from './components/GroupBySelector';
+import usePreferences from './hooks/usePreferences';
+
+import { type JSONSchemaTool } from './JSONSchemaTool';
+import getUniqueValuesPerField, {
+  UniqueValuesPerField,
+} from './lib/getUniqueValuesPerField';
+import Link from 'next/link';
+
+export async function getStaticProps() {
+  const toolingData = yaml.load(
+    fs.readFileSync('data/tooling-data.yaml', 'utf-8'),
+  ) as JSONSchemaTool[];
+
+  const uniqueValuesPerField = {
+    languages: getUniqueValuesPerField(toolingData, '$..languages[*]'),
+    drafts: getUniqueValuesPerField(
+      toolingData,
+      '$..supportedDialects.draft[*]',
+      [1, 2, 3],
+    ),
+    toolingTypes: getUniqueValuesPerField(toolingData, '$..toolingTypes[*]'),
+    licenses: getUniqueValuesPerField(toolingData, '$..license'),
+  };
+
+  uniqueValuesPerField.drafts?.sort((a, b) => {
+    const aIndex = DRAFT_ORDER.map(String).indexOf(a);
+    const bIndex = DRAFT_ORDER.map(String).indexOf(b);
+
+    if (aIndex === -1 && bIndex === -1) {
+      return 0;
+    } else if (aIndex === -1) {
+      return 1;
+    } else if (bIndex === -1) {
+      return -1;
+    }
+
+    return aIndex - bIndex;
+  });
+
+  return {
+    props: {
+      toolingData,
+      uniqueValuesPerField,
+    },
+  };
+}
+
+export default function ToolingPage({
+  toolingData,
+  uniqueValuesPerField,
+}: {
+  toolingData: JSONSchemaTool[];
+  uniqueValuesPerField: UniqueValuesPerField;
+}) {
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+
+  const {
+    preferredTools,
+    numberOfTools,
+    preferences,
+    setPreferences,
+    resetPreferences,
+  } = usePreferences(toolingData);
+
+  return (
+    <SectionContext.Provider value='tools'>
+      <Head>
+        <title>JSON Schema - Tools</title>
+      </Head>
+      <div className='mx-auto w-full max-w-[1400px] min-h-screen flex flex-col items-center'>
+        <div
+          className='bg-primary w-full h-12 mt-[4.5rem] relative lg:hidden px-8 flex justify-between items-center'
+          onClick={() => {
+            setIsSidebarOpen((prev) => !prev);
+          }}
+        >
+          <h3 className='text-white'>{numberOfTools} Tools</h3>
+
+          <svg
+            style={{
+              transform: `${isSidebarOpen ? 'rotate(180deg)' : 'rotate(0)'}`,
+              transition: 'transform 0.2s linear',
+            }}
+            xmlns='http://www.w3.org/2000/svg'
+            height='24'
+            viewBox='0 0 256 512'
+          >
+            <path
+              d='M64 448c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L178.8 256L41.38 118.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25l-160 160C80.38 444.9 72.19 448 64 448z'
+              fill='#ffffff'
+            />
+          </svg>
+        </div>
+
+        <div className='grid grid-cols-1 lg:grid-cols-4 mx-4 md:mx-12 min-h-screen'>
+          <div
+            className={`absolute lg:static top-10 lg:top-auto left-0 lg:left-auto mt-24 w-screen lg:w-auto h-full lg:h-auto bg-white dark:bg-slate-800 lg:bg-transparent transition-transform lg:transform-none duration-300 lg:duration-0 ease-in-out overflow-y-auto ${isSidebarOpen ? '-translate-x-0' : '-translate-x-full'} z-5`}
+            style={{ height: 'calc(100% - 8rem)' }}
+          >
+            <div className='hidden lg:block'>
+              <h1 className='text-h1mobile md:text-h1 font-bold lg:ml-4 lg:mt-6'>
+                {numberOfTools}
+              </h1>
+              <div className='text-xl text-slate-900 dark:text-slate-300 font-bold lg:ml-6'>
+                Tools
+              </div>
+            </div>
+            <Sidebar
+              uniqueValuesPerField={uniqueValuesPerField}
+              preferences={preferences}
+              setPreferences={setPreferences}
+              resetPreferences={resetPreferences}
+              setIsSidebarOpen={setIsSidebarOpen}
+            />
+          </div>
+
+          <main
+            className={`md:col-span-3 lg:mt-20 lg:w-full mx-4 md:mx-0 ${isSidebarOpen ? 'hidden lg:block' : ''}`}
+          >
+            <Headline1>JSON Schema Tooling</Headline1>
+            <p className='text-slate-600 block leading-7 pb-4 dark:text-slate-300'>
+              Toolings below are written in different languages, and support
+              part, or all, of at least one recent version of the specification.
+            </p>
+            <p className='text-slate-600 block leading-7 pb-4 dark:text-slate-300'>
+              Listing does not signify a recommendation or endorsement of any
+              kind.
+            </p>
+            <div className='flex flex-row items-center gap-2 w-full'>
+              <div className='flex items-center justify-center gap-2 w-1/2'>
+                <Link
+                  className='flex-none max-w-full'
+                  href='https://github.com/json-schema-org/website/issues/'
+                  target='_blank'
+                  rel='noreferrer'
+                >
+                  <img
+                    src='/img/tools/adding_your_tool.png'
+                    className='rounded-sm h-[76px]'
+                  />
+                </Link>
+                <p className='hidden lg:block text-slate-600 dark:text-slate-300'>
+                  Raise an issue and we'll add your tool to the data we use to
+                  build this website
+                </p>
+              </div>
+
+              <div className='flex items-center justify-center gap-2 w-1/2'>
+                <Link
+                  className='flex-none max-w-full'
+                  href='https://bowtie.report'
+                  target='_blank'
+                  rel='noreferrer'
+                >
+                  <img
+                    src='/img/tools/try_bowtie.png'
+                    className='rounded-sm h-[76px]'
+                  />
+                </Link>
+                <p className='hidden lg:block text-slate-600 dark:text-slate-300'>
+                  Bowtie is a meta-validator for JSON Schema, coordinating and
+                  reporting results from other validators.
+                </p>
+              </div>
+            </div>
+            <GroupBySelector
+              preferences={preferences}
+              setPreferences={setPreferences}
+            />
+            <ToolingTable
+              groupedTools={preferredTools}
+              preferences={preferences}
+              setPreferences={setPreferences}
+            />
+          </main>
+        </div>
+      </div>
+    </SectionContext.Provider>
+  );
+}
+
+ToolingPage.getLayout = getLayout;
diff --git a/pages/tools/lib/getQueryParamValues.ts b/pages/tools/lib/getQueryParamValues.ts
new file mode 100644
index 000000000..1d020ade5
--- /dev/null
+++ b/pages/tools/lib/getQueryParamValues.ts
@@ -0,0 +1,11 @@
+export default function getQueryParamValues(
+  param: string | string[] | undefined,
+): string[] {
+  if (!param) return [];
+
+  if (typeof param === 'string') {
+    return [decodeURIComponent(param)];
+  } else {
+    return param.map((p) => decodeURIComponent(p));
+  }
+}
diff --git a/pages/tools/lib/getUniqueValuesPerField.ts b/pages/tools/lib/getUniqueValuesPerField.ts
new file mode 100644
index 000000000..1114ebbc8
--- /dev/null
+++ b/pages/tools/lib/getUniqueValuesPerField.ts
@@ -0,0 +1,17 @@
+import jsonpath from 'jsonpath';
+import { type JSONSchemaTool } from '../JSONSchemaTool';
+
+export type Fields = 'languages' | 'drafts' | 'toolingTypes' | 'licenses';
+
+export type UniqueValuesPerField = Partial<Record<Fields, string[]>>;
+
+const getUniqueValuesPerField = (
+  data: JSONSchemaTool[],
+  path: string,
+  exclude: Array<string | number> = [],
+) => {
+  const values = Array.from(new Set(jsonpath.query(data, path)));
+  return values.filter((value) => !exclude.includes(value));
+};
+
+export default getUniqueValuesPerField;
diff --git a/pages/tools/lib/toTitleCase.ts b/pages/tools/lib/toTitleCase.ts
new file mode 100644
index 000000000..364d10fc1
--- /dev/null
+++ b/pages/tools/lib/toTitleCase.ts
@@ -0,0 +1,12 @@
+export default function toTitleCase(
+  text: string,
+  delimiter: string = ' ',
+  separator: string = ' ',
+) {
+  return text
+    .split(delimiter)
+    .map(function (word: string) {
+      return word.charAt(0).toUpperCase() + word.slice(1);
+    })
+    .join(separator);
+}
diff --git a/public/icons/filter-dark.svg b/public/icons/filter-dark.svg
new file mode 100644
index 000000000..bc4023f8a
--- /dev/null
+++ b/public/icons/filter-dark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="22" height="20" viewBox="0 0 22 20" id="filter"><g fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><g stroke="#fff" stroke-width="2" transform="translate(-1614 -1629)"><g transform="translate(1615 1630)"><path d="M20 0H0l8 9.46V16l4 2V9.46z"></path></g></g></g></svg>
diff --git a/public/icons/filter.svg b/public/icons/filter.svg
index 1d92e8eb2..dedf164f7 100644
--- a/public/icons/filter.svg
+++ b/public/icons/filter.svg
@@ -1 +1 @@
-<svg height="394pt" viewBox="-5 0 394 394.00003" width="394pt" xmlns="http://www.w3.org/2000/svg"><path d="m367.820312 0h-351.261718c-6.199219-.0117188-11.878906 3.449219-14.710938 8.960938-2.871094 5.585937-2.367187 12.3125 1.300782 17.414062l128.6875 181.285156c.042968.0625.089843.121094.132812.183594 4.675781 6.3125 7.207031 13.960938 7.21875 21.816406v147.800782c-.027344 4.375 1.691406 8.582031 4.773438 11.6875 3.085937 3.101562 7.28125 4.851562 11.65625 4.851562 2.222656-.003906 4.425781-.445312 6.480468-1.300781l72.3125-27.570313c6.476563-1.980468 10.777344-8.09375 10.777344-15.453125v-120.015625c.011719-7.855468 2.542969-15.503906 7.214844-21.816406.042968-.0625.089844-.121094.132812-.183594l128.691406-181.289062c3.667969-5.097656 4.171876-11.820313 1.300782-17.40625-2.828125-5.515625-8.511719-8.9765628-14.707032-8.964844zm0 0"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="22" height="20" viewBox="0 0 22 20" id="filter"><g fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><g stroke="#000" stroke-width="2" transform="translate(-1614 -1629)"><g transform="translate(1615 1630)"><path d="M20 0H0l8 9.46V16l4 2V9.46z"></path></g></g></g></svg>
diff --git a/public/img/tools/adding_your_tool.png b/public/img/tools/adding_your_tool.png
new file mode 100644
index 000000000..fd1bd6857
Binary files /dev/null and b/public/img/tools/adding_your_tool.png differ
diff --git a/public/img/tools/try_bowtie.png b/public/img/tools/try_bowtie.png
new file mode 100644
index 000000000..371cb88a5
Binary files /dev/null and b/public/img/tools/try_bowtie.png differ
diff --git a/styles/globals.css b/styles/globals.css
index 6dbf621c1..73e87442b 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -229,3 +229,6 @@ border-radius: 4px; */
   }
 }
 
+.no-scroll {
+  overflow: hidden;
+}