diff --git a/app/page.tsx b/app/page.tsx
index 32451f2..dd2097c 100755
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -66,6 +66,7 @@ import RowSpaceBetween from '@components/RowSpaceBetween';
 import Script from 'next/script';
 import Select from '@components/Select';
 import SidebarLayout from '@components/SidebarLayout';
+import SimpleTable from '@components/SimpleTable';
 import Table from '@components/Table';
 import TableRow from '@components/TableRow';
 import TableColumn from '@components/TableColumn';
@@ -77,6 +78,14 @@ import ModalDOMSnake from '@root/components/modals/ModalDOMSnake';
 
 export const dynamic = 'force-static';
 
+const SIMPLE_TABLE_DATA = [
+  ['Name', 'Role', 'Location'],
+  ['Jimmy Lee', 'Staff Janitor', 'San Francisco'],
+  ['Andrew Alimbuyuguen', 'Webmaster', 'San Francisco'],
+  ['Anastasiya Uraleva', 'Webmaster', 'San Francisco'],
+  ['Elijah Seed Arita', 'Webmaster', 'Los Angeles'],
+];
+
 // NOTE(jimmylee)
 // https://nextjs.org/docs/app/api-reference/functions/generate-metadata
 export async function generateMetadata({ params, searchParams }) {
@@ -1468,6 +1477,10 @@ int main() {
           <br />
         </Accordion>
 
+        <Accordion defaultValue={true} title="SIMPLETABLE">
+          <SimpleTable data={SIMPLE_TABLE_DATA} />
+        </Accordion>
+
         <Accordion defaultValue={true} title="TABLE">
           A simple, declarative table component designed to streamline the creation of tables in JSX. It provides greater control over the structure and layout while evoking the aesthetics of old terminal interfaces (like MS-DOS).
           <br />
diff --git a/components/SimpleTable.module.css b/components/SimpleTable.module.css
new file mode 100644
index 0000000..7ef54a1
--- /dev/null
+++ b/components/SimpleTable.module.css
@@ -0,0 +1,68 @@
+.root {
+  position: relative;
+  width: 100%;
+  border-spacing: 0px;
+  max-width: 64ch;
+  border-collapse: collapse;
+}
+
+.head {
+}
+
+.body {
+}
+
+.headerRow {
+  border-bottom: 1px solid var(--theme-border);
+}
+
+.headerCell {
+  border: 0;
+  outline: 0;
+  padding: 4px 1ch 4px 0;
+  font-weight: 600;
+  text-align: left;
+  font-size: var(--font-size);
+
+  &:focus {
+    background: var(--theme-focused-foreground);
+    outline: 0;
+  }
+
+  &:first-child {
+    padding-left: 0px;
+  }
+}
+
+.row {
+  border-spacing: 0px;
+
+  &:hover {
+    background: var(--theme-background-secondary);
+  }
+
+  &:nth-child(even) {
+    background: var(--theme-background-secondary);
+    
+    &:hover {
+      background: var(--theme-border);
+    }
+  }
+}
+
+.cell {
+  border: 0;
+  outline: 0;
+  padding: 4px 1ch 4px 0;
+  font-size: var(--font-size);
+  transition: background-color 0.2s ease;
+
+  &:focus {
+    background: var(--theme-focused-foreground);
+    outline: 0;
+  }
+
+  &:first-child {
+    padding-left: 0px;
+  }
+}
diff --git a/components/SimpleTable.tsx b/components/SimpleTable.tsx
new file mode 100644
index 0000000..a8317c0
--- /dev/null
+++ b/components/SimpleTable.tsx
@@ -0,0 +1,71 @@
+'use client';
+
+import styles from '@components/SimpleTable.module.css';
+
+import * as React from 'react';
+
+interface SimpleTableProps {
+  data: string[][];
+  headerless?: boolean;
+}
+
+const SimpleTable: React.FC<SimpleTableProps> = ({ data, headerless = false }) => {
+  const tableRef = React.useRef<HTMLTableElement>(null);
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLTableElement>) => {
+    const activeElement = document.activeElement;
+    if (!activeElement) return;
+    
+    switch (event.key) {
+      case 'ArrowUp':
+      case 'ArrowDown':
+      case 'ArrowLeft':
+      case 'ArrowRight':
+        event.preventDefault();
+        if (!(activeElement instanceof HTMLTableCellElement)) return;
+        const direction = event.key === 'ArrowUp' || event.key === 'ArrowLeft' ? 'previous' : 'next';
+        const allCells = Array.from(tableRef.current?.querySelectorAll<HTMLTableCellElement>('td, th') || []);
+        const currentIndex = allCells.indexOf(activeElement);
+        if (currentIndex === -1) return;
+        let nextIndex = direction === 'next' ? currentIndex + 1 : currentIndex - 1;
+        if (direction === 'previous') {
+          if (nextIndex < 0) nextIndex = allCells.length - 1;
+        } else {
+          if (nextIndex >= allCells.length) nextIndex = 0;
+        }
+        allCells[nextIndex].focus();
+        break;
+    }
+  };
+
+  return (
+    <table className={styles.root} ref={tableRef} onKeyDown={handleKeyDown}>
+      {!headerless && data.length > 0 && (
+        <thead className={styles.head}>
+          <tr className={styles.headerRow}>
+            {data[0].map((cellContent, colIndex) => (
+              <th key={colIndex} className={styles.headerCell} tabIndex={0}>
+                {cellContent}
+              </th>
+            ))}
+          </tr>
+        </thead>
+      )}
+      <tbody className={styles.body}>
+        {data.slice(headerless ? 0 : 1).map((row, rowIndex) => (
+          <tr key={rowIndex} className={styles.row}>
+            {row.map((cellContent, colIndex) => (
+              <td key={colIndex} className={styles.cell} tabIndex={0}>
+                {cellContent}
+              </td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};
+
+SimpleTable.displayName = 'SimpleTable';
+
+export default SimpleTable;