Add very basic table for records

9 files changed, 243 insertions, 140 deletions

diff --git a/package.json b/package.json
index a9fa0f7..8f0d765 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
     "lodash": "^4.17.21",
+    "material-design-icons": "^3.0.1",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-jwt": "^1.1.6",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e63b2ea..a5af5af 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,4 +1,4 @@
-lockfileVersion: 5.4
+lockfileVersion: 5.3
 
 specifiers:
   '@babel/core': ^7.18.2
@@ -10,6 +10,7 @@ specifiers:
   '@testing-library/react': ^13.3.0
   '@testing-library/user-event': ^13.5.0
   lodash: ^4.17.21
+  material-design-icons: ^3.0.1
   prettier: ^2.6.2
   react: ^18.1.0
   react-dom: ^18.1.0
@@ -26,14 +27,15 @@ dependencies:
   '@stitches/react': 1.2.8_react@18.1.0
   '@testing-library/dom': 8.13.0
   '@testing-library/jest-dom': 5.16.4
-  '@testing-library/react': 13.3.0_ef5jwxihqo6n7gxfmzogljlgcm
-  '@testing-library/user-event': 13.5.0_tlwynutqiyp5mns3woioasuxnq
+  '@testing-library/react': 13.3.0_react-dom@18.1.0+react@18.1.0
+  '@testing-library/user-event': 13.5.0_@testing-library+dom@8.13.0
   lodash: 4.17.21
+  material-design-icons: 3.0.1
   react: 18.1.0
   react-dom: 18.1.0_react@18.1.0
   react-jwt: 1.1.6_react@18.1.0
-  react-router-dom: 6.3.0_ef5jwxihqo6n7gxfmzogljlgcm
-  react-scripts: 5.0.1_kyabxajlhps7o43dn7edo3gzxi
+  react-router-dom: 6.3.0_react-dom@18.1.0+react@18.1.0
+  react-scripts: 5.0.1_56001b812b3be5f773636fc8376cd9ba
   typescript: 4.7.2
   web-vitals: 2.1.4
 
@@ -97,7 +99,7 @@ packages:
       - supports-color
     dev: false
 
-  /@babel/eslint-parser/7.18.2_j4uj5cgi2mksbox6kqvi7jrs6u:
+  /@babel/eslint-parser/7.18.2_@babel+core@7.18.2+eslint@8.16.0:
     resolution: {integrity: sha512-oFQYkE8SuH14+uR51JVAmdqwKYXGRjEXx7s+WiagVjqQ+HPE+nnwyF2qlVG8evUsUHmPcA+6YXMEDbIhEyQc5A==}
     engines: {node: ^10.13.0 || ^12.13.0 || >=14.0.0}
     peerDependencies:
@@ -1429,7 +1431,7 @@ packages:
     peerDependencies:
       postcss: ^8.3
     dependencies:
-      '@csstools/selector-specificity': 1.0.0_444rcjjorr3kpoqtvoodsr46pu
+      '@csstools/selector-specificity': 1.0.0_e73911252e8c76a7ba13ab9c39479e7d
       postcss: 8.4.14
       postcss-selector-parser: 6.0.10
     dev: false
@@ -1482,7 +1484,7 @@ packages:
     peerDependencies:
       postcss: ^8.4
     dependencies:
-      '@csstools/selector-specificity': 1.0.0_444rcjjorr3kpoqtvoodsr46pu
+      '@csstools/selector-specificity': 1.0.0_e73911252e8c76a7ba13ab9c39479e7d
       postcss: 8.4.14
       postcss-selector-parser: 6.0.10
     dev: false
@@ -1537,7 +1539,7 @@ packages:
       postcss: 8.4.14
     dev: false
 
-  /@csstools/selector-specificity/1.0.0_444rcjjorr3kpoqtvoodsr46pu:
+  /@csstools/selector-specificity/1.0.0_e73911252e8c76a7ba13ab9c39479e7d:
     resolution: {integrity: sha512-RkYG5KiGNX0fJ5YoI0f4Wfq2Yo74D25Hru4fxTOioYdQvHBxcrrtTTyT5Ozzh2ejcNrhFy7IEts2WyEY7yi5yw==}
     engines: {node: ^12 || ^14 || >=16}
     peerDependencies:
@@ -1891,7 +1893,7 @@ packages:
       fastq: 1.13.0
     dev: false
 
-  /@pmmmwh/react-refresh-webpack-plugin/0.5.7_cduugdvdzx7dfkit7irvewwovq:
+  /@pmmmwh/react-refresh-webpack-plugin/0.5.7_10e9430ea3cdfe32a913fa23525aceac:
     resolution: {integrity: sha512-bcKCAzF0DV2IIROp9ZHkRJa6O4jy7NlnHdWL3GmcUxYWNjLXkK5kfELELwEfSP5hXPfVL/qOGMAROuMQb9GG8Q==}
     engines: {node: '>= 10.13'}
     peerDependencies:
@@ -1931,7 +1933,7 @@ packages:
       webpack-dev-server: 4.9.0_webpack@5.72.1
     dev: false
 
-  /@rollup/plugin-babel/5.3.1_qhxjqw33rawdn3amxsgyn5mkfy:
+  /@rollup/plugin-babel/5.3.1_@babel+core@7.18.2+rollup@2.75.3:
     resolution: {integrity: sha512-WFfdLWU/xVWKeRQnKmIAQULUI7Il0gZnBIH/ZFO069wYIfPu+8zrfp/KMW0atmELoRDq8FbiP3VCss9MhCut7Q==}
     engines: {node: '>= 10.0.0'}
     peerDependencies:
@@ -2160,7 +2162,7 @@ packages:
       redent: 3.0.0
     dev: false
 
-  /@testing-library/react/13.3.0_ef5jwxihqo6n7gxfmzogljlgcm:
+  /@testing-library/react/13.3.0_react-dom@18.1.0+react@18.1.0:
     resolution: {integrity: sha512-DB79aA426+deFgGSjnf5grczDPiL4taK3hFaa+M5q7q20Kcve9eQottOG5kZ74KEr55v0tU2CQormSSDK87zYQ==}
     engines: {node: '>=12'}
     peerDependencies:
@@ -2174,7 +2176,7 @@ packages:
       react-dom: 18.1.0_react@18.1.0
     dev: false
 
-  /@testing-library/user-event/13.5.0_tlwynutqiyp5mns3woioasuxnq:
+  /@testing-library/user-event/13.5.0_@testing-library+dom@8.13.0:
     resolution: {integrity: sha512-5Kwtbo3Y/NowpkbRuSepbyMFkZmHgD+vPzYB/RJ4oxt5Gj/avFFBYjhw27cqSVPVw/3a67NK1PbiIr9k4Gwmdg==}
     engines: {node: '>=10', npm: '>=6'}
     peerDependencies:
@@ -2461,7 +2463,7 @@ packages:
       '@types/yargs-parser': 21.0.0
     dev: false
 
-  /@typescript-eslint/eslint-plugin/5.26.0_hzuh7e2up357pvq3mkokjvu2lq:
+  /@typescript-eslint/eslint-plugin/5.26.0_3e687f93547efbf7d61b629ca4d69a5c:
     resolution: {integrity: sha512-oGCmo0PqnRZZndr+KwvvAUvD3kNE4AfyoGCwOZpoCncSh4MVD06JTE8XQa2u9u+NX5CsyZMBTEc2C72zx38eYA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -2472,10 +2474,10 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.26.0_xztl6dhthcahlo6akmb2bmjmle
+      '@typescript-eslint/parser': 5.26.0_eslint@8.16.0+typescript@4.7.2
       '@typescript-eslint/scope-manager': 5.26.0
-      '@typescript-eslint/type-utils': 5.26.0_xztl6dhthcahlo6akmb2bmjmle
-      '@typescript-eslint/utils': 5.26.0_xztl6dhthcahlo6akmb2bmjmle
+      '@typescript-eslint/type-utils': 5.26.0_eslint@8.16.0+typescript@4.7.2
+      '@typescript-eslint/utils': 5.26.0_eslint@8.16.0+typescript@4.7.2
       debug: 4.3.4
       eslint: 8.16.0
       functional-red-black-tree: 1.0.1
@@ -2488,20 +2490,20 @@ packages:
       - supports-color
     dev: false
 
-  /@typescript-eslint/experimental-utils/5.26.0_xztl6dhthcahlo6akmb2bmjmle:
+  /@typescript-eslint/experimental-utils/5.26.0_eslint@8.16.0+typescript@4.7.2:
     resolution: {integrity: sha512-OgUGXC/teXD8PYOkn33RSwBJPVwL0I2ipm5OHr9g9cfAhVrPC2DxQiWqaq88MNO5mbr/ZWnav3EVBpuwDreS5Q==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
     dependencies:
-      '@typescript-eslint/utils': 5.26.0_xztl6dhthcahlo6akmb2bmjmle
+      '@typescript-eslint/utils': 5.26.0_eslint@8.16.0+typescript@4.7.2
       eslint: 8.16.0
     transitivePeerDependencies:
       - supports-color
       - typescript
     dev: false
 
-  /@typescript-eslint/parser/5.26.0_xztl6dhthcahlo6akmb2bmjmle:
+  /@typescript-eslint/parser/5.26.0_eslint@8.16.0+typescript@4.7.2:
     resolution: {integrity: sha512-n/IzU87ttzIdnAH5vQ4BBDnLPly7rC5VnjN3m0xBG82HK6rhRxnCb3w/GyWbNDghPd+NktJqB/wl6+YkzZ5T5Q==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -2529,7 +2531,7 @@ packages:
       '@typescript-eslint/visitor-keys': 5.26.0
     dev: false
 
-  /@typescript-eslint/type-utils/5.26.0_xztl6dhthcahlo6akmb2bmjmle:
+  /@typescript-eslint/type-utils/5.26.0_eslint@8.16.0+typescript@4.7.2:
     resolution: {integrity: sha512-7ccbUVWGLmcRDSA1+ADkDBl5fP87EJt0fnijsMFTVHXKGduYMgienC/i3QwoVhDADUAPoytgjbZbCOMj4TY55A==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -2539,7 +2541,7 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/utils': 5.26.0_xztl6dhthcahlo6akmb2bmjmle
+      '@typescript-eslint/utils': 5.26.0_eslint@8.16.0+typescript@4.7.2
       debug: 4.3.4
       eslint: 8.16.0
       tsutils: 3.21.0_typescript@4.7.2
@@ -2574,7 +2576,7 @@ packages:
       - supports-color
     dev: false
 
-  /@typescript-eslint/utils/5.26.0_xztl6dhthcahlo6akmb2bmjmle:
+  /@typescript-eslint/utils/5.26.0_eslint@8.16.0+typescript@4.7.2:
     resolution: {integrity: sha512-PJFwcTq2Pt4AMOKfe3zQOdez6InIDOjUJJD3v3LyEtxHGVVRK3Vo7Dd923t/4M9hSH2q2CLvcTdxlLPjcIk3eg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -3043,7 +3045,7 @@ packages:
       - supports-color
     dev: false
 
-  /babel-loader/8.2.5_w2i5cy6pptznn7rmavsgpnxasa:
+  /babel-loader/8.2.5_b691d163cf7cf2d6fe2c056467b6e090:
     resolution: {integrity: sha512-OSiFfH89LrEMiWd4pLNqGz4CwJDtbs2ZVc+iGu2HrkRfPxId9F2anQj38IxWpmRfsUY0aBZYi1EFcd3mhtRMLQ==}
     engines: {node: '>= 8.9'}
     peerDependencies:
@@ -3246,8 +3248,6 @@ packages:
       raw-body: 2.5.1
       type-is: 1.6.18
       unpipe: 1.0.0
-    transitivePeerDependencies:
-      - supports-color
     dev: false
 
   /bonjour-service/1.0.12:
@@ -3562,8 +3562,6 @@ packages:
       on-headers: 1.0.2
       safe-buffer: 5.1.2
       vary: 1.1.2
-    transitivePeerDependencies:
-      - supports-color
     dev: false
 
   /concat-map/0.0.1:
@@ -3920,22 +3918,12 @@ packages:
 
   /debug/2.6.9:
     resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
     dependencies:
       ms: 2.0.0
     dev: false
 
   /debug/3.2.7:
     resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
     dependencies:
       ms: 2.1.3
     dev: false
@@ -4034,8 +4022,6 @@ packages:
     dependencies:
       address: 1.2.0
       debug: 2.6.9
-    transitivePeerDependencies:
-      - supports-color
     dev: false
 
   /detective/5.2.1:
@@ -4332,39 +4318,33 @@ packages:
       source-map: 0.6.1
     dev: false
 
-  /eslint-config-react-app/7.0.1_mhktmdugvkgyt3ze5pixxtskei:
+  /eslint-config-react-app/7.0.1_61d5360e86aa8d89ef24ebd17bce4a22:
     resolution: {integrity: sha512-K6rNzvkIeHaTd8m/QEh1Zko0KI7BACWkkneSs6s9cKZC/J27X3eZR6Upt1jkmZ/4FK+XUOPPxMEN7+lbUXfSlA==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       eslint: ^8.0.0
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
     dependencies:
       '@babel/core': 7.18.2
-      '@babel/eslint-parser': 7.18.2_j4uj5cgi2mksbox6kqvi7jrs6u
+      '@babel/eslint-parser': 7.18.2_@babel+core@7.18.2+eslint@8.16.0
       '@rushstack/eslint-patch': 1.1.3
-      '@typescript-eslint/eslint-plugin': 5.26.0_hzuh7e2up357pvq3mkokjvu2lq
-      '@typescript-eslint/parser': 5.26.0_xztl6dhthcahlo6akmb2bmjmle
+      '@typescript-eslint/eslint-plugin': 5.26.0_3e687f93547efbf7d61b629ca4d69a5c
+      '@typescript-eslint/parser': 5.26.0_eslint@8.16.0+typescript@4.7.2
       babel-preset-react-app: 10.0.1
       confusing-browser-globals: 1.0.11
       eslint: 8.16.0
-      eslint-plugin-flowtype: 8.0.3_nqt7qlfyaowr4srl6t3lwtnjdq
-      eslint-plugin-import: 2.26.0_grfei5yostfimvqdpf73rlhy3e
-      eslint-plugin-jest: 25.7.0_hmi6m6uifk4orojbzwq5vn6n4i
+      eslint-plugin-flowtype: 8.0.3_6c27f82cb803ad1e4a2bf4f6bb4da91c
+      eslint-plugin-import: 2.26.0_eslint@8.16.0
+      eslint-plugin-jest: 25.7.0_3b11e67a882ab8e8b921cda1dab7cde2
       eslint-plugin-jsx-a11y: 6.5.1_eslint@8.16.0
       eslint-plugin-react: 7.30.0_eslint@8.16.0
       eslint-plugin-react-hooks: 4.5.0_eslint@8.16.0
-      eslint-plugin-testing-library: 5.5.1_xztl6dhthcahlo6akmb2bmjmle
-      typescript: 4.7.2
+      eslint-plugin-testing-library: 5.5.1_eslint@8.16.0+typescript@4.7.2
     transitivePeerDependencies:
       - '@babel/plugin-syntax-flow'
       - '@babel/plugin-transform-react-jsx'
-      - eslint-import-resolver-typescript
-      - eslint-import-resolver-webpack
       - jest
       - supports-color
+      - typescript
     dev: false
 
   /eslint-import-resolver-node/0.3.6:
@@ -4372,37 +4352,17 @@ packages:
     dependencies:
       debug: 3.2.7
       resolve: 1.22.0
-    transitivePeerDependencies:
-      - supports-color
     dev: false
 
-  /eslint-module-utils/2.7.3_zhgf6mw2wzy6dnrak3ta47vb3m:
+  /eslint-module-utils/2.7.3:
     resolution: {integrity: sha512-088JEC7O3lDZM9xGe0RerkOMd0EjFl+Yvd1jPWIkMT5u3H9+HC34mWWPnqPrN13gieT9pBOO+Qt07Nb/6TresQ==}
     engines: {node: '>=4'}
-    peerDependencies:
-      '@typescript-eslint/parser': '*'
-      eslint-import-resolver-node: '*'
-      eslint-import-resolver-typescript: '*'
-      eslint-import-resolver-webpack: '*'
-    peerDependenciesMeta:
-      '@typescript-eslint/parser':
-        optional: true
-      eslint-import-resolver-node:
-        optional: true
-      eslint-import-resolver-typescript:
-        optional: true
-      eslint-import-resolver-webpack:
-        optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.26.0_xztl6dhthcahlo6akmb2bmjmle
       debug: 3.2.7
-      eslint-import-resolver-node: 0.3.6
       find-up: 2.1.0
-    transitivePeerDependencies:
-      - supports-color
     dev: false
 
-  /eslint-plugin-flowtype/8.0.3_nqt7qlfyaowr4srl6t3lwtnjdq:
+  /eslint-plugin-flowtype/8.0.3_6c27f82cb803ad1e4a2bf4f6bb4da91c:
     resolution: {integrity: sha512-dX8l6qUL6O+fYPtpNRideCFSpmWOUVx5QcaGLVqe/vlDiBSe4vYljDWDETwnyFzpl7By/WVIu6rcrniCgH9BqQ==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
@@ -4417,24 +4377,19 @@ packages:
       string-natural-compare: 3.0.1
     dev: false
 
-  /eslint-plugin-import/2.26.0_grfei5yostfimvqdpf73rlhy3e:
+  /eslint-plugin-import/2.26.0_eslint@8.16.0:
     resolution: {integrity: sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA==}
     engines: {node: '>=4'}
     peerDependencies:
-      '@typescript-eslint/parser': '*'
       eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8
-    peerDependenciesMeta:
-      '@typescript-eslint/parser':
-        optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.26.0_xztl6dhthcahlo6akmb2bmjmle
       array-includes: 3.1.5
       array.prototype.flat: 1.3.0
       debug: 2.6.9
       doctrine: 2.1.0
       eslint: 8.16.0
       eslint-import-resolver-node: 0.3.6
-      eslint-module-utils: 2.7.3_zhgf6mw2wzy6dnrak3ta47vb3m
+      eslint-module-utils: 2.7.3
       has: 1.0.3
       is-core-module: 2.9.0
       is-glob: 4.0.3
@@ -4442,13 +4397,9 @@ packages:
       object.values: 1.1.5
       resolve: 1.22.0
       tsconfig-paths: 3.14.1
-    transitivePeerDependencies:
-      - eslint-import-resolver-typescript
-      - eslint-import-resolver-webpack
-      - supports-color
     dev: false
 
-  /eslint-plugin-jest/25.7.0_hmi6m6uifk4orojbzwq5vn6n4i:
+  /eslint-plugin-jest/25.7.0_3b11e67a882ab8e8b921cda1dab7cde2:
     resolution: {integrity: sha512-PWLUEXeeF7C9QGKqvdSbzLOiLTx+bno7/HC9eefePfEb257QFHg7ye3dh80AZVkaa/RQsBB1Q/ORQvg2X7F0NQ==}
     engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
     peerDependencies:
@@ -4461,8 +4412,8 @@ packages:
       jest:
         optional: true
     dependencies:
-      '@typescript-eslint/eslint-plugin': 5.26.0_hzuh7e2up357pvq3mkokjvu2lq
-      '@typescript-eslint/experimental-utils': 5.26.0_xztl6dhthcahlo6akmb2bmjmle
+      '@typescript-eslint/eslint-plugin': 5.26.0_3e687f93547efbf7d61b629ca4d69a5c
+      '@typescript-eslint/experimental-utils': 5.26.0_eslint@8.16.0+typescript@4.7.2
       eslint: 8.16.0
       jest: 27.5.1
     transitivePeerDependencies:
@@ -4523,13 +4474,13 @@ packages:
       string.prototype.matchall: 4.0.7
     dev: false
 
-  /eslint-plugin-testing-library/5.5.1_xztl6dhthcahlo6akmb2bmjmle:
+  /eslint-plugin-testing-library/5.5.1_eslint@8.16.0+typescript@4.7.2:
     resolution: {integrity: sha512-plLEkkbAKBjPxsLj7x4jNapcHAg2ernkQlKKrN2I8NrQwPISZHyCUNvg5Hv3EDqOQReToQb5bnqXYbkijJPE/g==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0, npm: '>=6'}
     peerDependencies:
       eslint: ^7.5.0 || ^8.0.0
     dependencies:
-      '@typescript-eslint/utils': 5.26.0_xztl6dhthcahlo6akmb2bmjmle
+      '@typescript-eslint/utils': 5.26.0_eslint@8.16.0+typescript@4.7.2
       eslint: 8.16.0
     transitivePeerDependencies:
       - supports-color
@@ -4572,7 +4523,7 @@ packages:
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: false
 
-  /eslint-webpack-plugin/3.1.1_vzdnq34ogkorkjhrihd2nzxd6u:
+  /eslint-webpack-plugin/3.1.1_eslint@8.16.0+webpack@5.72.1:
     resolution: {integrity: sha512-xSucskTN9tOkfW7so4EaiFIkulWLXwCB/15H917lR6pTv0Zot6/fetFucmENRb7J5whVSFKIvwnrnsa78SG2yg==}
     engines: {node: '>= 12.13.0'}
     peerDependencies:
@@ -4759,8 +4710,6 @@ packages:
       type-is: 1.6.18
       utils-merge: 1.0.1
       vary: 1.1.2
-    transitivePeerDependencies:
-      - supports-color
     dev: false
 
   /fast-deep-equal/3.1.3:
@@ -4852,8 +4801,6 @@ packages:
       parseurl: 1.3.3
       statuses: 2.0.1
       unpipe: 1.0.0
-    transitivePeerDependencies:
-      - supports-color
     dev: false
 
   /find-cache-dir/3.3.2:
@@ -4917,7 +4864,7 @@ packages:
         optional: true
     dev: false
 
-  /fork-ts-checker-webpack-plugin/6.5.2_3bh75qun4rll3rqcnxlwbxkklq:
+  /fork-ts-checker-webpack-plugin/6.5.2_d84ffec28de456bdc6026dd760dd4a5c:
     resolution: {integrity: sha512-m5cUmF30xkZ7h4tWUgTAcEaKmUW7tfyUyTqNNOz7OxWJ0v1VWKTcOvH8FWHUwSjlW/356Ijc9vi3XfcPstpQKA==}
     engines: {node: '>=10', yarn: '>=1.0.0'}
     peerDependencies:
@@ -6532,6 +6479,10 @@ packages:
       tmpl: 1.0.5
     dev: false
 
+  /material-design-icons/3.0.1:
+    resolution: {integrity: sha512-t19Z+QZBwSZulxptEu05kIm+UyfIdJY1JDwI+nx02j269m6W414whiQz9qfvQIiLrdx71RQv+T48nHhuQXOCIQ==}
+    dev: false
+
   /mdn-data/2.0.14:
     resolution: {integrity: sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==}
     dev: false
@@ -7067,7 +7018,7 @@ packages:
       postcss-selector-parser: 6.0.10
     dev: false
 
-  /postcss-browser-comments/4.0.0_45omf6eai42q3ceghea5lhdztm:
+  /postcss-browser-comments/4.0.0_e75cc2f88047350d88863901d59c799b:
     resolution: {integrity: sha512-X9X9/WN3KIvY9+hNERUqX9gncsgBA25XaeR+jshHz2j8+sYyHktHw1JdKuMjeLpGktXidqDhA7b/qm1mrBDmgg==}
     engines: {node: '>=8'}
     peerDependencies:
@@ -7349,7 +7300,7 @@ packages:
       yaml: 1.10.2
     dev: false
 
-  /postcss-loader/6.2.1_xvg4ntyrrwt57qzvggqcbeozu4:
+  /postcss-loader/6.2.1_postcss@8.4.14+webpack@5.72.1:
     resolution: {integrity: sha512-WbbYpmAaKcux/P66bZ40bpWsBucjx/TTgVVzRZ9yUO8yQfVBlameJ0ZGVaPfH64hNSBh63a+ICP5nqOpBA0w+Q==}
     engines: {node: '>= 12.13.0'}
     peerDependencies:
@@ -7506,7 +7457,7 @@ packages:
     peerDependencies:
       postcss: ^8.4
     dependencies:
-      '@csstools/selector-specificity': 1.0.0_444rcjjorr3kpoqtvoodsr46pu
+      '@csstools/selector-specificity': 1.0.0_e73911252e8c76a7ba13ab9c39479e7d
       postcss: 8.4.14
       postcss-selector-parser: 6.0.10
     dev: false
@@ -7602,7 +7553,7 @@ packages:
       postcss-value-parser: 4.2.0
     dev: false
 
-  /postcss-normalize/10.0.1_45omf6eai42q3ceghea5lhdztm:
+  /postcss-normalize/10.0.1_e75cc2f88047350d88863901d59c799b:
     resolution: {integrity: sha512-+5w18/rDev5mqERcG3W5GZNMJa1eoYYNGo8gB7tEwaos0ajk3ZXAI4mHGcNT47NE+ZnZD1pEpUOFLvltIwmeJA==}
     engines: {node: '>= 12'}
     peerDependencies:
@@ -7612,7 +7563,7 @@ packages:
       '@csstools/normalize.css': 12.0.0
       browserslist: 4.20.3
       postcss: 8.4.14
-      postcss-browser-comments: 4.0.0_45omf6eai42q3ceghea5lhdztm
+      postcss-browser-comments: 4.0.0_e75cc2f88047350d88863901d59c799b
       sanitize.css: 13.0.0
     dev: false
 
@@ -7962,7 +7913,7 @@ packages:
       whatwg-fetch: 3.6.2
     dev: false
 
-  /react-dev-utils/12.0.1_3bh75qun4rll3rqcnxlwbxkklq:
+  /react-dev-utils/12.0.1_d84ffec28de456bdc6026dd760dd4a5c:
     resolution: {integrity: sha512-84Ivxmr17KjUupyqzFode6xKhjwuEJDROWKJy/BthkL7Wn6NJ8h4WE6k/exAv6ImS+0oZLRRW5j/aINMHyeGeQ==}
     engines: {node: '>=14'}
     dependencies:
@@ -7975,7 +7926,7 @@ packages:
       escape-string-regexp: 4.0.0
       filesize: 8.0.7
       find-up: 5.0.0
-      fork-ts-checker-webpack-plugin: 6.5.2_3bh75qun4rll3rqcnxlwbxkklq
+      fork-ts-checker-webpack-plugin: 6.5.2_d84ffec28de456bdc6026dd760dd4a5c
       global-modules: 2.0.0
       globby: 11.1.0
       gzip-size: 6.0.0
@@ -7992,7 +7943,6 @@ packages:
       text-table: 0.2.0
     transitivePeerDependencies:
       - eslint
-      - supports-color
       - typescript
       - vue-template-compiler
       - webpack
@@ -8040,7 +7990,7 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: false
 
-  /react-router-dom/6.3.0_ef5jwxihqo6n7gxfmzogljlgcm:
+  /react-router-dom/6.3.0_react-dom@18.1.0+react@18.1.0:
     resolution: {integrity: sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==}
     peerDependencies:
       react: '>=16.8'
@@ -8061,7 +8011,7 @@ packages:
       react: 18.1.0
     dev: false
 
-  /react-scripts/5.0.1_kyabxajlhps7o43dn7edo3gzxi:
+  /react-scripts/5.0.1_56001b812b3be5f773636fc8376cd9ba:
     resolution: {integrity: sha512-8VAmEm/ZAwQzJ+GOMLbBsTdDKOpuZh7RPs0UymvBR2vRk4iZWCskjbFnxqjrzoIvlNNRZ3QJFx6/qDSi6zSnaQ==}
     engines: {node: '>=14.0.0'}
     hasBin: true
@@ -8073,10 +8023,10 @@ packages:
         optional: true
     dependencies:
       '@babel/core': 7.18.2
-      '@pmmmwh/react-refresh-webpack-plugin': 0.5.7_cduugdvdzx7dfkit7irvewwovq
+      '@pmmmwh/react-refresh-webpack-plugin': 0.5.7_10e9430ea3cdfe32a913fa23525aceac
       '@svgr/webpack': 5.5.0
       babel-jest: 27.5.1_@babel+core@7.18.2
-      babel-loader: 8.2.5_w2i5cy6pptznn7rmavsgpnxasa
+      babel-loader: 8.2.5_b691d163cf7cf2d6fe2c056467b6e090
       babel-plugin-named-asset-import: 0.3.8_@babel+core@7.18.2
       babel-preset-react-app: 10.0.1
       bfj: 7.0.2
@@ -8088,8 +8038,8 @@ packages:
       dotenv: 10.0.0
       dotenv-expand: 5.1.0
       eslint: 8.16.0
-      eslint-config-react-app: 7.0.1_mhktmdugvkgyt3ze5pixxtskei
-      eslint-webpack-plugin: 3.1.1_vzdnq34ogkorkjhrihd2nzxd6u
+      eslint-config-react-app: 7.0.1_61d5360e86aa8d89ef24ebd17bce4a22
+      eslint-webpack-plugin: 3.1.1_eslint@8.16.0+webpack@5.72.1
       file-loader: 6.2.0_webpack@5.72.1
       fs-extra: 10.1.0
       html-webpack-plugin: 5.5.0_webpack@5.72.1
@@ -8100,13 +8050,13 @@ packages:
       mini-css-extract-plugin: 2.6.0_webpack@5.72.1
       postcss: 8.4.14
       postcss-flexbugs-fixes: 5.0.2_postcss@8.4.14
-      postcss-loader: 6.2.1_xvg4ntyrrwt57qzvggqcbeozu4
-      postcss-normalize: 10.0.1_45omf6eai42q3ceghea5lhdztm
+      postcss-loader: 6.2.1_postcss@8.4.14+webpack@5.72.1
+      postcss-normalize: 10.0.1_e75cc2f88047350d88863901d59c799b
       postcss-preset-env: 7.6.0_postcss@8.4.14
       prompts: 2.4.2
       react: 18.1.0
       react-app-polyfill: 3.0.0
-      react-dev-utils: 12.0.1_3bh75qun4rll3rqcnxlwbxkklq
+      react-dev-utils: 12.0.1_d84ffec28de456bdc6026dd760dd4a5c
       react-refresh: 0.11.0
       resolve: 1.22.0
       resolve-url-loader: 4.0.0
@@ -8136,8 +8086,6 @@ packages:
       - csso
       - debug
       - esbuild
-      - eslint-import-resolver-typescript
-      - eslint-import-resolver-webpack
       - fibers
       - node-notifier
       - node-sass
@@ -8538,8 +8486,6 @@ packages:
       on-finished: 2.4.1
       range-parser: 1.2.1
       statuses: 2.0.1
-    transitivePeerDependencies:
-      - supports-color
     dev: false
 
   /serialize-javascript/4.0.0:
@@ -8565,8 +8511,6 @@ packages:
       http-errors: 1.6.3
       mime-types: 2.1.35
       parseurl: 1.3.3
-    transitivePeerDependencies:
-      - supports-color
     dev: false
 
   /serve-static/1.15.0:
@@ -8577,8 +8521,6 @@ packages:
       escape-html: 1.0.3
       parseurl: 1.3.3
       send: 0.18.0
-    transitivePeerDependencies:
-      - supports-color
     dev: false
 
   /setprototypeof/1.1.0:
@@ -9613,7 +9555,7 @@ packages:
       '@babel/core': 7.18.2
       '@babel/preset-env': 7.18.2_@babel+core@7.18.2
       '@babel/runtime': 7.18.3
-      '@rollup/plugin-babel': 5.3.1_qhxjqw33rawdn3amxsgyn5mkfy
+      '@rollup/plugin-babel': 5.3.1_@babel+core@7.18.2+rollup@2.75.3
       '@rollup/plugin-node-resolve': 11.2.1_rollup@2.75.3
       '@rollup/plugin-replace': 2.4.2_rollup@2.75.3
       '@surma/rollup-plugin-off-main-thread': 2.2.3
diff --git a/src/App.js b/src/App.js
index 3784575..b41e049 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,23 +1,11 @@
-import logo from './logo.svg';
+
 import './App.css';
+import RecordTable from './components/RecordTable';
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <RecordTable></RecordTable>
     </div>
   );
 }
diff --git a/src/components/IconButton.js b/src/components/IconButton.js
new file mode 100644
index 0000000..140337c
--- /dev/null
+++ b/src/components/IconButton.js
@@ -0,0 +1,11 @@
+import { styled } from "@stitches/react";
+
+function IconButton() {
+  const UnstyledButton = styled("button", {
+    "background-color": "initial",
+    border: "none",
+    "padding-top": "3px",
+  });
+
+  return <UnstyledButton></UnstyledButton>;
+}
diff --git a/src/components/Record.js b/src/components/Record.js
new file mode 100644
index 0000000..424c57a
--- /dev/null
+++ b/src/components/Record.js
@@ -0,0 +1,20 @@
+import React from "react";
+import IconButton from "./IconButton.js";
+
+export default class Record extends React.Component {
+  render() {
+    console.log(this)
+    return (
+      <div class="records-tr" role="row">
+        <div class="records-td records-col-type">{this.props.type}</div>
+        <div class="records-td records-col-name">{this.props.name}</div>
+        <div class="records-td records-col-value">{this.props.value}{this.props.recordSpecial}</div>
+        <div class="records-td records-col-ttl">{this.props.ttl}</div>
+        <div class="records-td records-col-actions">
+          {/* <IconButton icon="pencil" action={editSelf()}></IconButton> */}
+          {/* <IconButton icon="trash" action={deleteSelf()}></IconButton> */}
+        </div>
+      </div>
+    );
+  }
+}
\ No newline at end of file
diff --git a/src/components/RecordTable.js b/src/components/RecordTable.js
new file mode 100644
index 0000000..f526c85
--- /dev/null
+++ b/src/components/RecordTable.js
@@ -0,0 +1,34 @@
+import React from "react";
+import Record from "./Record";
+
+export default class RecordTable extends React.Component {
+  render() {
+    const records = [
+      {type: "AAAA", name: "oracle-arm-toronto-1.vm.origin", value: "2603:c021:1:e9fe::ff", ttl: "1 day"},
+      {type: "AAAA", name: "oracle-arm-toronto-1.vm.origin", value: "2603:c021:1:e9fe::ff", ttl: "1 day"},
+      {type: "AAAA", name: "oracle-arm-toronto-1.vm.origin", value: "2603:c021:1:e9fe::ff", ttl: "1 day"},
+    ];
+    return (
+      <div role="table" class="table">
+        <div class="records-thead" role="rowgroup">
+          <div class="records-tr" role="row">
+            <div class="records-th records-col-type">Type</div>
+            <div class="records-th records-col-name">Name</div>
+            <div class="records-th records-col-value">Value</div>
+            <div class="records-th records-col-ttl">TTL</div>
+            <div class="records-th records-col-actions"></div>
+          </div>
+        </div>
+        <div class="records-tbody" role="rowgroup">
+          {
+            records.map((val, key) => {
+              return (
+                <Record id={key} type={val.type} name={val.name} value={val.value} ttl={val.ttl}></Record>
+              )
+            })
+          }
+        </div>
+      </div>
+    );
+  }
+}
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index a679253..ef7ea85 100644
--- a/src/index.js
+++ b/src/index.js
@@ -7,6 +7,7 @@ import Login from './routes/Login';
 import reportWebVitals from './reportWebVitals';
 import { AuthProvider } from './hooks/useAuth';
 import { FeaturesProvider } from './hooks/useFeatures';
+import Records from './routes/Records';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 
@@ -19,6 +20,7 @@ root.render(
             { /* <Route path="/" element={<Home />} /> */}
             <Route path="login" element={<Login />} />
             <Route path="signup" element={<SignUp />} />
+            <Route path="records" element={<Records />} />
           </Routes>
         </BrowserRouter>
       </FeaturesProvider>
diff --git a/src/routes/Records.css b/src/routes/Records.css
new file mode 100644
index 0000000..0af8a34
--- /dev/null
+++ b/src/routes/Records.css
@@ -0,0 +1,89 @@
+.records-table-container {
+  max-width: 80vw;
+  margin: auto;
+  padding: 12px;
+}
+
+@media screen and (max-width: 1000px) {
+  .records-table-container {
+    max-width: 800px;
+    margin: auto;
+    padding: 12px;
+  }
+}
+
+.records-table {
+  width: 100%;
+  border-radius: 12px;
+  /* filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06)); */
+  background-color: #F4F4F5;
+}
+
+.records-thead .records-tr {
+  background-color: #E4E4E7;
+  border: 1px solid #D4D4D8;
+  border-bottom: none;
+  font-weight: 700;
+  border-radius: 12px 12px 0 0;
+}
+
+.records-tbody .records-tr {
+  border-width: 1px;
+  border-color: #D4D4D8;
+  border-style: none solid none solid;
+}
+
+.records-tbody .records-tr:last-child {
+  border-style: none solid solid solid;
+  border-radius: 0 0 12px 12px;
+}
+
+.records-th,
+.records-td {
+  padding: 1em;
+  text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.records-tr {
+  display: flex;
+}
+
+.records-tbody .records-tr:nth-child(odd) {
+  background-color: #F4F4F5;
+}
+
+.records-col-type {
+  padding-left: 1.5rem;
+  width: 10%;
+}
+
+.records-col-name {
+  width: 40%;
+}
+
+.records-col-value {
+  width: 30%;
+}
+
+.records-col-ttl {
+  width: 7%;
+}
+
+.records-col-actions {
+  width: 13%;
+  display: flex;
+  justify-content: right;
+  align-items: center;
+  padding: 0;
+  padding-right: 1em;
+  min-width: calc(48px + 1em);
+}
+
+.records-col-actions button {
+  background-color: initial;
+  border: none;
+  padding-top: 3px;
+}
\ No newline at end of file
diff --git a/src/routes/Records.js b/src/routes/Records.js
new file mode 100644
index 0000000..e5fd271
--- /dev/null
+++ b/src/routes/Records.js
@@ -0,0 +1,16 @@
+// Meow meow meow meow
+import {styled} from "@stitches/react";
+import React from "react";
+import "./Records.css";
+import RecordTable from "../components/RecordTable";
+
+export function Records() {
+  return (
+    <main class="records-table-container">
+      <h1>DNS Records for example.com</h1>
+      <RecordTable></RecordTable>
+    </main>
+  );
+}
+
+export default Records;