style buttons

3 files changed, 165 insertions, 64 deletions

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6a592a1..b8261cc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,4 +1,4 @@
-lockfileVersion: 5.3
+lockfileVersion: 5.4
 
 specifiers:
   '@babel/core': ^7.18.2
@@ -23,12 +23,12 @@ 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_react-dom@18.1.0+react@18.1.0
-  '@testing-library/user-event': 13.5.0_@testing-library+dom@8.13.0
+  '@testing-library/react': 13.3.0_ef5jwxihqo6n7gxfmzogljlgcm
+  '@testing-library/user-event': 13.5.0_tlwynutqiyp5mns3woioasuxnq
   react: 18.1.0
   react-dom: 18.1.0_react@18.1.0
-  react-router-dom: 6.3.0_react-dom@18.1.0+react@18.1.0
-  react-scripts: 5.0.1_56001b812b3be5f773636fc8376cd9ba
+  react-router-dom: 6.3.0_ef5jwxihqo6n7gxfmzogljlgcm
+  react-scripts: 5.0.1_kyabxajlhps7o43dn7edo3gzxi
   typescript: 4.7.2
   web-vitals: 2.1.4
 
@@ -89,7 +89,7 @@ packages:
       - supports-color
     dev: false
 
-  /@babel/eslint-parser/7.18.2_@babel+core@7.18.2+eslint@8.16.0:
+  /@babel/eslint-parser/7.18.2_j4uj5cgi2mksbox6kqvi7jrs6u:
     resolution: {integrity: sha512-oFQYkE8SuH14+uR51JVAmdqwKYXGRjEXx7s+WiagVjqQ+HPE+nnwyF2qlVG8evUsUHmPcA+6YXMEDbIhEyQc5A==}
     engines: {node: ^10.13.0 || ^12.13.0 || >=14.0.0}
     peerDependencies:
@@ -347,6 +347,8 @@ packages:
     resolution: {integrity: sha512-FDge0dFazETFcxGw/EXzOkN8uJp0PC7Qbm+Pe9T+av2zlBpOgunFHkQPPn+eRuClU73JF+98D531UgayY89tow==}
     engines: {node: '>=6.0.0'}
     hasBin: true
+    dependencies:
+      '@babel/types': 7.18.4
     dev: false
 
   /@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/7.17.12_@babel+core@7.18.2:
@@ -1419,7 +1421,7 @@ packages:
     peerDependencies:
       postcss: ^8.3
     dependencies:
-      '@csstools/selector-specificity': 1.0.0_e73911252e8c76a7ba13ab9c39479e7d
+      '@csstools/selector-specificity': 1.0.0_444rcjjorr3kpoqtvoodsr46pu
       postcss: 8.4.14
       postcss-selector-parser: 6.0.10
     dev: false
@@ -1472,7 +1474,7 @@ packages:
     peerDependencies:
       postcss: ^8.4
     dependencies:
-      '@csstools/selector-specificity': 1.0.0_e73911252e8c76a7ba13ab9c39479e7d
+      '@csstools/selector-specificity': 1.0.0_444rcjjorr3kpoqtvoodsr46pu
       postcss: 8.4.14
       postcss-selector-parser: 6.0.10
     dev: false
@@ -1527,7 +1529,7 @@ packages:
       postcss: 8.4.14
     dev: false
 
-  /@csstools/selector-specificity/1.0.0_e73911252e8c76a7ba13ab9c39479e7d:
+  /@csstools/selector-specificity/1.0.0_444rcjjorr3kpoqtvoodsr46pu:
     resolution: {integrity: sha512-RkYG5KiGNX0fJ5YoI0f4Wfq2Yo74D25Hru4fxTOioYdQvHBxcrrtTTyT5Ozzh2ejcNrhFy7IEts2WyEY7yi5yw==}
     engines: {node: ^12 || ^14 || >=16}
     peerDependencies:
@@ -1881,7 +1883,7 @@ packages:
       fastq: 1.13.0
     dev: false
 
-  /@pmmmwh/react-refresh-webpack-plugin/0.5.7_10e9430ea3cdfe32a913fa23525aceac:
+  /@pmmmwh/react-refresh-webpack-plugin/0.5.7_cduugdvdzx7dfkit7irvewwovq:
     resolution: {integrity: sha512-bcKCAzF0DV2IIROp9ZHkRJa6O4jy7NlnHdWL3GmcUxYWNjLXkK5kfELELwEfSP5hXPfVL/qOGMAROuMQb9GG8Q==}
     engines: {node: '>= 10.13'}
     peerDependencies:
@@ -1921,7 +1923,7 @@ packages:
       webpack-dev-server: 4.9.0_webpack@5.72.1
     dev: false
 
-  /@rollup/plugin-babel/5.3.1_@babel+core@7.18.2+rollup@2.75.3:
+  /@rollup/plugin-babel/5.3.1_qhxjqw33rawdn3amxsgyn5mkfy:
     resolution: {integrity: sha512-WFfdLWU/xVWKeRQnKmIAQULUI7Il0gZnBIH/ZFO069wYIfPu+8zrfp/KMW0atmELoRDq8FbiP3VCss9MhCut7Q==}
     engines: {node: '>= 10.0.0'}
     peerDependencies:
@@ -2150,7 +2152,7 @@ packages:
       redent: 3.0.0
     dev: false
 
-  /@testing-library/react/13.3.0_react-dom@18.1.0+react@18.1.0:
+  /@testing-library/react/13.3.0_ef5jwxihqo6n7gxfmzogljlgcm:
     resolution: {integrity: sha512-DB79aA426+deFgGSjnf5grczDPiL4taK3hFaa+M5q7q20Kcve9eQottOG5kZ74KEr55v0tU2CQormSSDK87zYQ==}
     engines: {node: '>=12'}
     peerDependencies:
@@ -2164,7 +2166,7 @@ packages:
       react-dom: 18.1.0_react@18.1.0
     dev: false
 
-  /@testing-library/user-event/13.5.0_@testing-library+dom@8.13.0:
+  /@testing-library/user-event/13.5.0_tlwynutqiyp5mns3woioasuxnq:
     resolution: {integrity: sha512-5Kwtbo3Y/NowpkbRuSepbyMFkZmHgD+vPzYB/RJ4oxt5Gj/avFFBYjhw27cqSVPVw/3a67NK1PbiIr9k4Gwmdg==}
     engines: {node: '>=10', npm: '>=6'}
     peerDependencies:
@@ -2451,7 +2453,7 @@ packages:
       '@types/yargs-parser': 21.0.0
     dev: false
 
-  /@typescript-eslint/eslint-plugin/5.26.0_3e687f93547efbf7d61b629ca4d69a5c:
+  /@typescript-eslint/eslint-plugin/5.26.0_hzuh7e2up357pvq3mkokjvu2lq:
     resolution: {integrity: sha512-oGCmo0PqnRZZndr+KwvvAUvD3kNE4AfyoGCwOZpoCncSh4MVD06JTE8XQa2u9u+NX5CsyZMBTEc2C72zx38eYA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -2462,10 +2464,10 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.26.0_eslint@8.16.0+typescript@4.7.2
+      '@typescript-eslint/parser': 5.26.0_xztl6dhthcahlo6akmb2bmjmle
       '@typescript-eslint/scope-manager': 5.26.0
-      '@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
+      '@typescript-eslint/type-utils': 5.26.0_xztl6dhthcahlo6akmb2bmjmle
+      '@typescript-eslint/utils': 5.26.0_xztl6dhthcahlo6akmb2bmjmle
       debug: 4.3.4
       eslint: 8.16.0
       functional-red-black-tree: 1.0.1
@@ -2478,20 +2480,20 @@ packages:
       - supports-color
     dev: false
 
-  /@typescript-eslint/experimental-utils/5.26.0_eslint@8.16.0+typescript@4.7.2:
+  /@typescript-eslint/experimental-utils/5.26.0_xztl6dhthcahlo6akmb2bmjmle:
     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_eslint@8.16.0+typescript@4.7.2
+      '@typescript-eslint/utils': 5.26.0_xztl6dhthcahlo6akmb2bmjmle
       eslint: 8.16.0
     transitivePeerDependencies:
       - supports-color
       - typescript
     dev: false
 
-  /@typescript-eslint/parser/5.26.0_eslint@8.16.0+typescript@4.7.2:
+  /@typescript-eslint/parser/5.26.0_xztl6dhthcahlo6akmb2bmjmle:
     resolution: {integrity: sha512-n/IzU87ttzIdnAH5vQ4BBDnLPly7rC5VnjN3m0xBG82HK6rhRxnCb3w/GyWbNDghPd+NktJqB/wl6+YkzZ5T5Q==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -2519,7 +2521,7 @@ packages:
       '@typescript-eslint/visitor-keys': 5.26.0
     dev: false
 
-  /@typescript-eslint/type-utils/5.26.0_eslint@8.16.0+typescript@4.7.2:
+  /@typescript-eslint/type-utils/5.26.0_xztl6dhthcahlo6akmb2bmjmle:
     resolution: {integrity: sha512-7ccbUVWGLmcRDSA1+ADkDBl5fP87EJt0fnijsMFTVHXKGduYMgienC/i3QwoVhDADUAPoytgjbZbCOMj4TY55A==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -2529,7 +2531,7 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/utils': 5.26.0_eslint@8.16.0+typescript@4.7.2
+      '@typescript-eslint/utils': 5.26.0_xztl6dhthcahlo6akmb2bmjmle
       debug: 4.3.4
       eslint: 8.16.0
       tsutils: 3.21.0_typescript@4.7.2
@@ -2564,7 +2566,7 @@ packages:
       - supports-color
     dev: false
 
-  /@typescript-eslint/utils/5.26.0_eslint@8.16.0+typescript@4.7.2:
+  /@typescript-eslint/utils/5.26.0_xztl6dhthcahlo6akmb2bmjmle:
     resolution: {integrity: sha512-PJFwcTq2Pt4AMOKfe3zQOdez6InIDOjUJJD3v3LyEtxHGVVRK3Vo7Dd923t/4M9hSH2q2CLvcTdxlLPjcIk3eg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -3033,7 +3035,7 @@ packages:
       - supports-color
     dev: false
 
-  /babel-loader/8.2.5_b691d163cf7cf2d6fe2c056467b6e090:
+  /babel-loader/8.2.5_w2i5cy6pptznn7rmavsgpnxasa:
     resolution: {integrity: sha512-OSiFfH89LrEMiWd4pLNqGz4CwJDtbs2ZVc+iGu2HrkRfPxId9F2anQj38IxWpmRfsUY0aBZYi1EFcd3mhtRMLQ==}
     engines: {node: '>= 8.9'}
     peerDependencies:
@@ -3175,6 +3177,7 @@ packages:
       '@babel/plugin-proposal-numeric-separator': 7.16.7_@babel+core@7.18.2
       '@babel/plugin-proposal-optional-chaining': 7.17.12_@babel+core@7.18.2
       '@babel/plugin-proposal-private-methods': 7.17.12_@babel+core@7.18.2
+      '@babel/plugin-proposal-private-property-in-object': 7.17.12_@babel+core@7.18.2
       '@babel/plugin-transform-flow-strip-types': 7.17.12_@babel+core@7.18.2
       '@babel/plugin-transform-react-display-name': 7.16.7_@babel+core@7.18.2
       '@babel/plugin-transform-runtime': 7.18.2_@babel+core@7.18.2
@@ -3235,6 +3238,8 @@ 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:
@@ -3549,6 +3554,8 @@ 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:
@@ -3905,12 +3912,22 @@ 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
@@ -4009,6 +4026,8 @@ packages:
     dependencies:
       address: 1.2.0
       debug: 2.6.9
+    transitivePeerDependencies:
+      - supports-color
     dev: false
 
   /detective/5.2.1:
@@ -4305,33 +4324,39 @@ packages:
       source-map: 0.6.1
     dev: false
 
-  /eslint-config-react-app/7.0.1_61d5360e86aa8d89ef24ebd17bce4a22:
+  /eslint-config-react-app/7.0.1_mhktmdugvkgyt3ze5pixxtskei:
     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_@babel+core@7.18.2+eslint@8.16.0
+      '@babel/eslint-parser': 7.18.2_j4uj5cgi2mksbox6kqvi7jrs6u
       '@rushstack/eslint-patch': 1.1.3
-      '@typescript-eslint/eslint-plugin': 5.26.0_3e687f93547efbf7d61b629ca4d69a5c
-      '@typescript-eslint/parser': 5.26.0_eslint@8.16.0+typescript@4.7.2
+      '@typescript-eslint/eslint-plugin': 5.26.0_hzuh7e2up357pvq3mkokjvu2lq
+      '@typescript-eslint/parser': 5.26.0_xztl6dhthcahlo6akmb2bmjmle
       babel-preset-react-app: 10.0.1
       confusing-browser-globals: 1.0.11
       eslint: 8.16.0
-      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-flowtype: 8.0.3_nqt7qlfyaowr4srl6t3lwtnjdq
+      eslint-plugin-import: 2.26.0_grfei5yostfimvqdpf73rlhy3e
+      eslint-plugin-jest: 25.7.0_hmi6m6uifk4orojbzwq5vn6n4i
       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_eslint@8.16.0+typescript@4.7.2
+      eslint-plugin-testing-library: 5.5.1_xztl6dhthcahlo6akmb2bmjmle
+      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:
@@ -4339,17 +4364,37 @@ packages:
     dependencies:
       debug: 3.2.7
       resolve: 1.22.0
+    transitivePeerDependencies:
+      - supports-color
     dev: false
 
-  /eslint-module-utils/2.7.3:
+  /eslint-module-utils/2.7.3_zhgf6mw2wzy6dnrak3ta47vb3m:
     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_6c27f82cb803ad1e4a2bf4f6bb4da91c:
+  /eslint-plugin-flowtype/8.0.3_nqt7qlfyaowr4srl6t3lwtnjdq:
     resolution: {integrity: sha512-dX8l6qUL6O+fYPtpNRideCFSpmWOUVx5QcaGLVqe/vlDiBSe4vYljDWDETwnyFzpl7By/WVIu6rcrniCgH9BqQ==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
@@ -4364,19 +4409,24 @@ packages:
       string-natural-compare: 3.0.1
     dev: false
 
-  /eslint-plugin-import/2.26.0_eslint@8.16.0:
+  /eslint-plugin-import/2.26.0_grfei5yostfimvqdpf73rlhy3e:
     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
+      eslint-module-utils: 2.7.3_zhgf6mw2wzy6dnrak3ta47vb3m
       has: 1.0.3
       is-core-module: 2.9.0
       is-glob: 4.0.3
@@ -4384,9 +4434,13 @@ 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_3b11e67a882ab8e8b921cda1dab7cde2:
+  /eslint-plugin-jest/25.7.0_hmi6m6uifk4orojbzwq5vn6n4i:
     resolution: {integrity: sha512-PWLUEXeeF7C9QGKqvdSbzLOiLTx+bno7/HC9eefePfEb257QFHg7ye3dh80AZVkaa/RQsBB1Q/ORQvg2X7F0NQ==}
     engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
     peerDependencies:
@@ -4399,8 +4453,8 @@ packages:
       jest:
         optional: true
     dependencies:
-      '@typescript-eslint/eslint-plugin': 5.26.0_3e687f93547efbf7d61b629ca4d69a5c
-      '@typescript-eslint/experimental-utils': 5.26.0_eslint@8.16.0+typescript@4.7.2
+      '@typescript-eslint/eslint-plugin': 5.26.0_hzuh7e2up357pvq3mkokjvu2lq
+      '@typescript-eslint/experimental-utils': 5.26.0_xztl6dhthcahlo6akmb2bmjmle
       eslint: 8.16.0
       jest: 27.5.1
     transitivePeerDependencies:
@@ -4461,13 +4515,13 @@ packages:
       string.prototype.matchall: 4.0.7
     dev: false
 
-  /eslint-plugin-testing-library/5.5.1_eslint@8.16.0+typescript@4.7.2:
+  /eslint-plugin-testing-library/5.5.1_xztl6dhthcahlo6akmb2bmjmle:
     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_eslint@8.16.0+typescript@4.7.2
+      '@typescript-eslint/utils': 5.26.0_xztl6dhthcahlo6akmb2bmjmle
       eslint: 8.16.0
     transitivePeerDependencies:
       - supports-color
@@ -4510,7 +4564,7 @@ packages:
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: false
 
-  /eslint-webpack-plugin/3.1.1_eslint@8.16.0+webpack@5.72.1:
+  /eslint-webpack-plugin/3.1.1_vzdnq34ogkorkjhrihd2nzxd6u:
     resolution: {integrity: sha512-xSucskTN9tOkfW7so4EaiFIkulWLXwCB/15H917lR6pTv0Zot6/fetFucmENRb7J5whVSFKIvwnrnsa78SG2yg==}
     engines: {node: '>= 12.13.0'}
     peerDependencies:
@@ -4697,6 +4751,8 @@ 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:
@@ -4788,6 +4844,8 @@ packages:
       parseurl: 1.3.3
       statuses: 2.0.1
       unpipe: 1.0.0
+    transitivePeerDependencies:
+      - supports-color
     dev: false
 
   /find-cache-dir/3.3.2:
@@ -4851,7 +4909,7 @@ packages:
         optional: true
     dev: false
 
-  /fork-ts-checker-webpack-plugin/6.5.2_d84ffec28de456bdc6026dd760dd4a5c:
+  /fork-ts-checker-webpack-plugin/6.5.2_3bh75qun4rll3rqcnxlwbxkklq:
     resolution: {integrity: sha512-m5cUmF30xkZ7h4tWUgTAcEaKmUW7tfyUyTqNNOz7OxWJ0v1VWKTcOvH8FWHUwSjlW/356Ijc9vi3XfcPstpQKA==}
     engines: {node: '>=10', yarn: '>=1.0.0'}
     peerDependencies:
@@ -7001,7 +7059,7 @@ packages:
       postcss-selector-parser: 6.0.10
     dev: false
 
-  /postcss-browser-comments/4.0.0_e75cc2f88047350d88863901d59c799b:
+  /postcss-browser-comments/4.0.0_45omf6eai42q3ceghea5lhdztm:
     resolution: {integrity: sha512-X9X9/WN3KIvY9+hNERUqX9gncsgBA25XaeR+jshHz2j8+sYyHktHw1JdKuMjeLpGktXidqDhA7b/qm1mrBDmgg==}
     engines: {node: '>=8'}
     peerDependencies:
@@ -7283,7 +7341,7 @@ packages:
       yaml: 1.10.2
     dev: false
 
-  /postcss-loader/6.2.1_postcss@8.4.14+webpack@5.72.1:
+  /postcss-loader/6.2.1_xvg4ntyrrwt57qzvggqcbeozu4:
     resolution: {integrity: sha512-WbbYpmAaKcux/P66bZ40bpWsBucjx/TTgVVzRZ9yUO8yQfVBlameJ0ZGVaPfH64hNSBh63a+ICP5nqOpBA0w+Q==}
     engines: {node: '>= 12.13.0'}
     peerDependencies:
@@ -7440,7 +7498,7 @@ packages:
     peerDependencies:
       postcss: ^8.4
     dependencies:
-      '@csstools/selector-specificity': 1.0.0_e73911252e8c76a7ba13ab9c39479e7d
+      '@csstools/selector-specificity': 1.0.0_444rcjjorr3kpoqtvoodsr46pu
       postcss: 8.4.14
       postcss-selector-parser: 6.0.10
     dev: false
@@ -7536,7 +7594,7 @@ packages:
       postcss-value-parser: 4.2.0
     dev: false
 
-  /postcss-normalize/10.0.1_e75cc2f88047350d88863901d59c799b:
+  /postcss-normalize/10.0.1_45omf6eai42q3ceghea5lhdztm:
     resolution: {integrity: sha512-+5w18/rDev5mqERcG3W5GZNMJa1eoYYNGo8gB7tEwaos0ajk3ZXAI4mHGcNT47NE+ZnZD1pEpUOFLvltIwmeJA==}
     engines: {node: '>= 12'}
     peerDependencies:
@@ -7546,7 +7604,7 @@ packages:
       '@csstools/normalize.css': 12.0.0
       browserslist: 4.20.3
       postcss: 8.4.14
-      postcss-browser-comments: 4.0.0_e75cc2f88047350d88863901d59c799b
+      postcss-browser-comments: 4.0.0_45omf6eai42q3ceghea5lhdztm
       sanitize.css: 13.0.0
     dev: false
 
@@ -7890,7 +7948,7 @@ packages:
       whatwg-fetch: 3.6.2
     dev: false
 
-  /react-dev-utils/12.0.1_d84ffec28de456bdc6026dd760dd4a5c:
+  /react-dev-utils/12.0.1_3bh75qun4rll3rqcnxlwbxkklq:
     resolution: {integrity: sha512-84Ivxmr17KjUupyqzFode6xKhjwuEJDROWKJy/BthkL7Wn6NJ8h4WE6k/exAv6ImS+0oZLRRW5j/aINMHyeGeQ==}
     engines: {node: '>=14'}
     dependencies:
@@ -7903,7 +7961,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_d84ffec28de456bdc6026dd760dd4a5c
+      fork-ts-checker-webpack-plugin: 6.5.2_3bh75qun4rll3rqcnxlwbxkklq
       global-modules: 2.0.0
       globby: 11.1.0
       gzip-size: 6.0.0
@@ -7920,6 +7978,7 @@ packages:
       text-table: 0.2.0
     transitivePeerDependencies:
       - eslint
+      - supports-color
       - typescript
       - vue-template-compiler
       - webpack
@@ -7956,7 +8015,7 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: false
 
-  /react-router-dom/6.3.0_react-dom@18.1.0+react@18.1.0:
+  /react-router-dom/6.3.0_ef5jwxihqo6n7gxfmzogljlgcm:
     resolution: {integrity: sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==}
     peerDependencies:
       react: '>=16.8'
@@ -7977,7 +8036,7 @@ packages:
       react: 18.1.0
     dev: false
 
-  /react-scripts/5.0.1_56001b812b3be5f773636fc8376cd9ba:
+  /react-scripts/5.0.1_kyabxajlhps7o43dn7edo3gzxi:
     resolution: {integrity: sha512-8VAmEm/ZAwQzJ+GOMLbBsTdDKOpuZh7RPs0UymvBR2vRk4iZWCskjbFnxqjrzoIvlNNRZ3QJFx6/qDSi6zSnaQ==}
     engines: {node: '>=14.0.0'}
     hasBin: true
@@ -7989,10 +8048,10 @@ packages:
         optional: true
     dependencies:
       '@babel/core': 7.18.2
-      '@pmmmwh/react-refresh-webpack-plugin': 0.5.7_10e9430ea3cdfe32a913fa23525aceac
+      '@pmmmwh/react-refresh-webpack-plugin': 0.5.7_cduugdvdzx7dfkit7irvewwovq
       '@svgr/webpack': 5.5.0
       babel-jest: 27.5.1_@babel+core@7.18.2
-      babel-loader: 8.2.5_b691d163cf7cf2d6fe2c056467b6e090
+      babel-loader: 8.2.5_w2i5cy6pptznn7rmavsgpnxasa
       babel-plugin-named-asset-import: 0.3.8_@babel+core@7.18.2
       babel-preset-react-app: 10.0.1
       bfj: 7.0.2
@@ -8004,8 +8063,8 @@ packages:
       dotenv: 10.0.0
       dotenv-expand: 5.1.0
       eslint: 8.16.0
-      eslint-config-react-app: 7.0.1_61d5360e86aa8d89ef24ebd17bce4a22
-      eslint-webpack-plugin: 3.1.1_eslint@8.16.0+webpack@5.72.1
+      eslint-config-react-app: 7.0.1_mhktmdugvkgyt3ze5pixxtskei
+      eslint-webpack-plugin: 3.1.1_vzdnq34ogkorkjhrihd2nzxd6u
       file-loader: 6.2.0_webpack@5.72.1
       fs-extra: 10.1.0
       html-webpack-plugin: 5.5.0_webpack@5.72.1
@@ -8016,13 +8075,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_postcss@8.4.14+webpack@5.72.1
-      postcss-normalize: 10.0.1_e75cc2f88047350d88863901d59c799b
+      postcss-loader: 6.2.1_xvg4ntyrrwt57qzvggqcbeozu4
+      postcss-normalize: 10.0.1_45omf6eai42q3ceghea5lhdztm
       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_d84ffec28de456bdc6026dd760dd4a5c
+      react-dev-utils: 12.0.1_3bh75qun4rll3rqcnxlwbxkklq
       react-refresh: 0.11.0
       resolve: 1.22.0
       resolve-url-loader: 4.0.0
@@ -8052,6 +8111,8 @@ packages:
       - csso
       - debug
       - esbuild
+      - eslint-import-resolver-typescript
+      - eslint-import-resolver-webpack
       - fibers
       - node-notifier
       - node-sass
@@ -8452,6 +8513,8 @@ 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:
@@ -8477,6 +8540,8 @@ 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:
@@ -8487,6 +8552,8 @@ packages:
       escape-html: 1.0.3
       parseurl: 1.3.3
       send: 0.18.0
+    transitivePeerDependencies:
+      - supports-color
     dev: false
 
   /setprototypeof/1.1.0:
@@ -9521,7 +9588,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_@babel+core@7.18.2+rollup@2.75.3
+      '@rollup/plugin-babel': 5.3.1_qhxjqw33rawdn3amxsgyn5mkfy
       '@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/routes/SignUp.js b/src/routes/SignUp.js
index ab29378..07518b6 100644
--- a/src/routes/SignUp.js
+++ b/src/routes/SignUp.js
@@ -21,9 +21,15 @@ const Title = styled("h1", {
   textAlign: "center",
   fontSize: "6em",
   margin: "1rem 0",
-  fontWeight: 400
+  fontWeight: 300,
 });
 
+const Subtitle = styled("h1", {
+  textAlign: "center",
+  fontSize: "2.5em",
+  margin: "1rem 0",
+  fontWeight: 300
+});
 
 const StyledLabel = styled("label", {
   display: "block",
@@ -43,6 +49,7 @@ export function SignUp() {
     <Flex>
       <LoginCard>
         <Title>FDNS</Title>
+        <Subtitle>Sign Up</Subtitle>
         <StyledLabel for="email">Email</StyledLabel>
         <Input id="email" type="email"></Input>
         <StyledLabel for="displayName">Display Name</StyledLabel>
@@ -52,7 +59,8 @@ export function SignUp() {
         <StyledLabel for="passwordConfirm">Password (Confirm)</StyledLabel>
         <Input id="passwordConfirm" type="password"></Input>
         <AlignRight>
-        <Button style={{borderRadius: "0", backgroundColor: "inherit", padding: "0.5rem", border: "inherit", cursor: "pointer", fontSize: "0.9rem", fontWeight: 500}}>Sign Up -&gt;</Button>
+        <Button secondary>Cancel</Button>
+        <Button primary>Sign Up {'\u2794'}</Button>
         </AlignRight>
       </LoginCard>
     </Flex>
diff --git a/src/uikit/Button.js b/src/uikit/Button.js
index a6c70d2..1dec6ba 100644
--- a/src/uikit/Button.js
+++ b/src/uikit/Button.js
@@ -1,7 +1,33 @@
 import { styled } from "@stitches/react";
 
 export const Button = styled("button", {
-  display: "block"
+  display: "block",
+  padding: "0.5rem",
+  fontSize: "1rem",
+  margin: "0.2rem",
+  border: "none",
+  borderRadius: "4px",
+  color: "#fafafa",
+  transition: "background-color 0.2s ease-in-out",
+
+  variants: {
+    primary: {
+      true: {
+        backgroundColor: "#3b82f6",
+        '&:hover': {
+          backgroundColor: "#93c5fd",
+        }
+      }
+    },
+    secondary: {
+      true: {
+        backgroundColor: "#a1a1aa", 
+        '&:hover': {
+          backgroundColor: "#d4d4d8",
+        }
+      }
+    }
+  }
 })
 
 export default Button
\ No newline at end of file