From 6138206b4c00fb21ccf8444dcb93150598d86043 Mon Sep 17 00:00:00 2001
From: SameerJadav <sameerjadav010@gmail.com>
Date: Tue, 13 Feb 2024 00:00:00 +0530
Subject: [PATCH] style: redesign

---
 .gitignore                          |   3 +-
 package.json                        |   1 +
 pnpm-lock.yaml                      | 391 +++++++++++++++++++++++++++-
 src/app/layout.tsx                  |   5 +-
 src/app/page.tsx                    | 112 ++++++--
 src/components/CreatePostWizard.tsx |   6 +-
 src/components/Footer.tsx           |  41 ---
 src/components/Icons.tsx            | 102 ++++++++
 src/components/Menu.tsx             |  80 ++++++
 src/components/Messages.tsx         |   4 +-
 src/components/SigninButton.tsx     |   2 +-
 src/config.ts                       |   3 +
 src/styles/globals.css              |  18 +-
 tailwind.config.ts                  |  25 +-
 14 files changed, 712 insertions(+), 81 deletions(-)
 delete mode 100644 src/components/Footer.tsx
 create mode 100644 src/components/Menu.tsx

diff --git a/.gitignore b/.gitignore
index fae8320..222f810 100644
--- a/.gitignore
+++ b/.gitignore
@@ -36,4 +36,5 @@ yarn-error.log*
 next-env.d.ts
 
 # turso local database files
-dev.db*
\ No newline at end of file
+*.db*
+*.sql
\ No newline at end of file
diff --git a/package.json b/package.json
index 03a1bcd..4b647fe 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
   "dependencies": {
     "@libsql/client": "0.4.0-pre.7",
     "@radix-ui/colors": "^3.0.0",
+    "@radix-ui/react-dialog": "^1.0.5",
     "@tanstack/react-query": "^5.17.19",
     "@vercel/analytics": "^1.1.2",
     "clsx": "^2.1.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4170c24..2d9f4e5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,6 +11,9 @@ dependencies:
   '@radix-ui/colors':
     specifier: ^3.0.0
     version: 3.0.0
+  '@radix-ui/react-dialog':
+    specifier: ^1.0.5
+    version: 1.0.5(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0)(react@18.2.0)
   '@tanstack/react-query':
     specifier: ^5.17.19
     version: 5.17.19(react@18.2.0)
@@ -1117,6 +1120,288 @@ packages:
     resolution: {integrity: sha512-FUOsGBkHrYJwCSEtWRCIfQbZG7q1e6DgxCIOe1SUQzDe/7rXXeA47s8yCn6fuTNQAj1Zq4oTFi9Yjp3wzElcxg==}
     dev: false
 
+  /@radix-ui/primitive@1.0.1:
+    resolution: {integrity: sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==}
+    dependencies:
+      '@babel/runtime': 7.23.8
+    dev: false
+
+  /@radix-ui/react-compose-refs@1.0.1(@types/react@18.2.48)(react@18.2.0):
+    resolution: {integrity: sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.8
+      '@types/react': 18.2.48
+      react: 18.2.0
+    dev: false
+
+  /@radix-ui/react-context@1.0.1(@types/react@18.2.48)(react@18.2.0):
+    resolution: {integrity: sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.8
+      '@types/react': 18.2.48
+      react: 18.2.0
+    dev: false
+
+  /@radix-ui/react-dialog@1.0.5(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.8
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-context': 1.0.1(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-dismissable-layer': 1.0.5(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-focus-guards': 1.0.1(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-focus-scope': 1.0.4(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-id': 1.0.1(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-portal': 1.0.4(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.48)(react@18.2.0)
+      '@types/react': 18.2.48
+      '@types/react-dom': 18.2.18
+      aria-hidden: 1.2.3
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-remove-scroll: 2.5.5(@types/react@18.2.48)(react@18.2.0)
+    dev: false
+
+  /@radix-ui/react-dismissable-layer@1.0.5(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.8
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-use-escape-keydown': 1.0.3(@types/react@18.2.48)(react@18.2.0)
+      '@types/react': 18.2.48
+      '@types/react-dom': 18.2.18
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
+  /@radix-ui/react-focus-guards@1.0.1(@types/react@18.2.48)(react@18.2.0):
+    resolution: {integrity: sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.8
+      '@types/react': 18.2.48
+      react: 18.2.0
+    dev: false
+
+  /@radix-ui/react-focus-scope@1.0.4(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-sL04Mgvf+FmyvZeYfNu1EPAaaxD+aw7cYeIB9L9Fvq8+urhltTRaEo5ysKOpHuKPclsZcSUMKlN05x4u+CINpA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.8
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.48)(react@18.2.0)
+      '@types/react': 18.2.48
+      '@types/react-dom': 18.2.18
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
+  /@radix-ui/react-id@1.0.1(@types/react@18.2.48)(react@18.2.0):
+    resolution: {integrity: sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.8
+      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.48)(react@18.2.0)
+      '@types/react': 18.2.48
+      react: 18.2.0
+    dev: false
+
+  /@radix-ui/react-portal@1.0.4(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.8
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0)(react@18.2.0)
+      '@types/react': 18.2.48
+      '@types/react-dom': 18.2.18
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
+  /@radix-ui/react-presence@1.0.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.8
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.48)(react@18.2.0)
+      '@types/react': 18.2.48
+      '@types/react-dom': 18.2.18
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
+  /@radix-ui/react-primitive@1.0.3(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.8
+      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.48)(react@18.2.0)
+      '@types/react': 18.2.48
+      '@types/react-dom': 18.2.18
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
+  /@radix-ui/react-slot@1.0.2(@types/react@18.2.48)(react@18.2.0):
+    resolution: {integrity: sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.8
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.48)(react@18.2.0)
+      '@types/react': 18.2.48
+      react: 18.2.0
+    dev: false
+
+  /@radix-ui/react-use-callback-ref@1.0.1(@types/react@18.2.48)(react@18.2.0):
+    resolution: {integrity: sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.8
+      '@types/react': 18.2.48
+      react: 18.2.0
+    dev: false
+
+  /@radix-ui/react-use-controllable-state@1.0.1(@types/react@18.2.48)(react@18.2.0):
+    resolution: {integrity: sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.8
+      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.48)(react@18.2.0)
+      '@types/react': 18.2.48
+      react: 18.2.0
+    dev: false
+
+  /@radix-ui/react-use-escape-keydown@1.0.3(@types/react@18.2.48)(react@18.2.0):
+    resolution: {integrity: sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.8
+      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.48)(react@18.2.0)
+      '@types/react': 18.2.48
+      react: 18.2.0
+    dev: false
+
+  /@radix-ui/react-use-layout-effect@1.0.1(@types/react@18.2.48)(react@18.2.0):
+    resolution: {integrity: sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.8
+      '@types/react': 18.2.48
+      react: 18.2.0
+    dev: false
+
   /@rushstack/eslint-patch@1.7.0:
     resolution: {integrity: sha512-Jh4t/593gxs0lJZ/z3NnasKlplXT2f+4y/LZYuaKZW5KAaiVFL/fThhs+17EbUd53jUVJ0QudYCBGbN/psvaqg==}
     dev: true
@@ -1195,7 +1480,6 @@ packages:
     resolution: {integrity: sha512-TJxDm6OfAX2KJWJdMEVTwWke5Sc/E/RlnPGvGfS0W7+6ocy2xhDVQVh/KvC2Uf7kACs+gDytdusDSdWfWkaNzw==}
     dependencies:
       '@types/react': 18.2.48
-    dev: true
 
   /@types/react@18.2.48:
     resolution: {integrity: sha512-qboRCl6Ie70DQQG9hhNREz81jqC1cs9EVNcjQ1AU+jH6NFfSAhVVbrrY/+nSF+Bsk4AOwm9Qa61InvMCyV+H3w==}
@@ -1539,6 +1823,13 @@ packages:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
     dev: true
 
+  /aria-hidden@1.2.3:
+    resolution: {integrity: sha512-xcLxITLe2HYa1cnYnwCjkOO1PqUHQpozB8x9AR0OgWN2woOBi5kSDVxKfd0b7sb1hw5qFeJhXm9H1nu3xSfLeQ==}
+    engines: {node: '>=10'}
+    dependencies:
+      tslib: 2.6.2
+    dev: false
+
   /aria-query@5.3.0:
     resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
     dependencies:
@@ -1975,6 +2266,10 @@ packages:
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
     dev: true
 
+  /detect-node-es@1.1.0:
+    resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
+    dev: false
+
   /didyoumean@1.2.2:
     resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
     dev: true
@@ -2926,6 +3221,11 @@ packages:
       hasown: 2.0.0
     dev: true
 
+  /get-nonce@1.0.1:
+    resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
+    engines: {node: '>=6'}
+    dev: false
+
   /get-stdin@9.0.0:
     resolution: {integrity: sha512-dVKBjfWisLAicarI2Sf+JuBE/DghV4UzNAVe9yhEJuzeREd3JhOTE9cUaJTeSa77fsbQUK3pcOpJfM59+VKZaA==}
     engines: {node: '>=12'}
@@ -3152,6 +3452,12 @@ packages:
       side-channel: 1.0.4
     dev: true
 
+  /invariant@2.2.4:
+    resolution: {integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==}
+    dependencies:
+      loose-envify: 1.4.0
+    dev: false
+
   /is-array-buffer@3.0.2:
     resolution: {integrity: sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==}
     dependencies:
@@ -4187,6 +4493,58 @@ packages:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
     dev: true
 
+  /react-remove-scroll-bar@2.3.4(@types/react@18.2.48)(react@18.2.0):
+    resolution: {integrity: sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.2.48
+      react: 18.2.0
+      react-style-singleton: 2.2.1(@types/react@18.2.48)(react@18.2.0)
+      tslib: 2.6.2
+    dev: false
+
+  /react-remove-scroll@2.5.5(@types/react@18.2.48)(react@18.2.0):
+    resolution: {integrity: sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.2.48
+      react: 18.2.0
+      react-remove-scroll-bar: 2.3.4(@types/react@18.2.48)(react@18.2.0)
+      react-style-singleton: 2.2.1(@types/react@18.2.48)(react@18.2.0)
+      tslib: 2.6.2
+      use-callback-ref: 1.3.1(@types/react@18.2.48)(react@18.2.0)
+      use-sidecar: 1.1.2(@types/react@18.2.48)(react@18.2.0)
+    dev: false
+
+  /react-style-singleton@2.2.1(@types/react@18.2.48)(react@18.2.0):
+    resolution: {integrity: sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.2.48
+      get-nonce: 1.0.1
+      invariant: 2.2.4
+      react: 18.2.0
+      tslib: 2.6.2
+    dev: false
+
   /react@18.2.0:
     resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
     engines: {node: '>=0.10.0'}
@@ -4859,6 +5217,37 @@ packages:
       punycode: 2.3.1
     dev: true
 
+  /use-callback-ref@1.3.1(@types/react@18.2.48)(react@18.2.0):
+    resolution: {integrity: sha512-Lg4Vx1XZQauB42Hw3kK7JM6yjVjgFmFC5/Ab797s79aARomD2nEErc4mCgM8EZrARLmmbWpi5DGCadmK50DcAQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.2.48
+      react: 18.2.0
+      tslib: 2.6.2
+    dev: false
+
+  /use-sidecar@1.1.2(@types/react@18.2.48)(react@18.2.0):
+    resolution: {integrity: sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': ^16.9.0 || ^17.0.0 || ^18.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.2.48
+      detect-node-es: 1.1.0
+      react: 18.2.0
+      tslib: 2.6.2
+    dev: false
+
   /util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
     dev: true
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index bb12abb..25a0368 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -2,6 +2,7 @@ import type { Metadata, Viewport } from "next";
 import localfont from "next/font/local";
 import { Analytics } from "@vercel/analytics/react";
 import Providers from "~/app/providers";
+import { cn } from "~/utils/cn";
 import { site } from "~/config";
 import "~/styles/globals.css";
 
@@ -121,7 +122,9 @@ export const viewport: Viewport = {
 export default function RootLayout({ children }: RootLayoutProps) {
   return (
     <html lang="en">
-      <body className={geist.variable}>
+      <body
+        className={cn("font-sans text-gray-12 antialiased", geist.variable)}
+      >
         <Providers>{children}</Providers>
         <Analytics />
       </body>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index d828759..b19e548 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,9 +1,10 @@
-import { Suspense } from "react";
+import type { ComponentPropsWithoutRef } from "react";
 import dynamic from "next/dynamic";
 import { auth } from "~/server/auth";
-import Footer from "~/components/Footer";
+import Icons from "~/components/Icons";
 import Messages from "~/components/Messages";
 import Skeleton from "~/components/Skeleton";
+import { site } from "~/config";
 
 const CreatePostWizard = dynamic(
   () => import("~/components/CreatePostWizard"),
@@ -11,7 +12,7 @@ const CreatePostWizard = dynamic(
     ssr: false,
     loading: () => (
       <div className="flex flex-col items-end gap-1">
-        <Skeleton className="h-11 w-full rounded-md" />
+        <Skeleton className="h-[46px] w-full rounded-md" />
         <Skeleton className="h-5 w-[61.42px] rounded-md" />
       </div>
     ),
@@ -23,26 +24,95 @@ const SigninButton = dynamic(() => import("~/components/SigninButton"), {
   loading: () => <Skeleton className="h-[34px] w-[193px] rounded-md" />,
 });
 
-export default async function HomePage() {
+const Menu = dynamic(() => import("~/components/Menu"), {
+  ssr: false,
+  loading: () => <Skeleton className="size-8 rounded-md" />,
+});
+
+export default async function page() {
   const session = await auth();
   return (
-    <main className="mx-auto flex h-dvh w-full max-w-xl flex-col gap-4 px-4 sm:px-0">
-      <div className="space-y-4">
-        <h1 className="pt-6 text-3xl font-bold tracking-tighter">
-          Sign my guestbook
-        </h1>
-        {session?.user ? (
-          <CreatePostWizard authorName={session.user.name} />
-        ) : (
-          <SigninButton />
-        )}
-      </div>
-      <div className="flex-1 space-y-1 overflow-y-scroll lg:overflow-y-hidden lg:hover:overflow-y-scroll">
-        <Suspense fallback={<p>Just a sec, summoning the memories...</p>}>
-          <Messages />
-        </Suspense>
-      </div>
-      <Footer />
+    <main className="h-dvh max-h-dvh bg-gray-2 p-4 md:p-6 lg:p-8">
+      <section className="flex h-full rounded-md border border-gray-6 bg-gray-1">
+        <div className="hidden h-full w-[40%] border-r  border-gray-6 md:flex md:flex-col md:justify-between lg:w-[20%]">
+          <div>
+            <p className="border-b border-gray-6 p-4 text-2xl font-bold">
+              Contacts
+            </p>
+            <div className="py-4 text-lg">
+              <ExternalLink href={site.author.web}>
+                <Icons.Link className="size-5" />
+                <span>Website</span>
+              </ExternalLink>
+              <ExternalLink href={site.author.github}>
+                <Icons.Github className="size-5" />
+                <span>GitHub</span>
+              </ExternalLink>
+              <ExternalLink href={site.author.mail}>
+                <Icons.Mail className="size-5" />
+                <span>Mail</span>
+              </ExternalLink>
+              <ExternalLink href={site.author.twitter}>
+                <Icons.Twitter className="size-5" />
+                <span>Twitter</span>
+              </ExternalLink>
+              <ExternalLink href={site.author.linkedin}>
+                <Icons.LinkedIn className="size-5" />
+                <span>LinkedIn</span>
+              </ExternalLink>
+            </div>
+          </div>
+          <div className="space-y-2 border-t border-gray-6 p-4">
+            <a
+              className="flex items-center gap-2"
+              href={site.repo}
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <Icons.Code className="size-4" />
+              <span>Source code</span>
+            </a>
+            <div className="flex items-center gap-2">
+              <div className="size-4 animate-pulse rounded-full bg-green-9" />
+              <p>Avaliable for work</p>
+            </div>
+          </div>
+        </div>
+        <div className="flex flex-grow flex-col gap-4 p-4">
+          <div className="flex items-center justify-between">
+            <p className="text-2xl font-bold">Sign my Guestbook</p>
+            <Menu />
+          </div>
+          {session?.user ? (
+            <CreatePostWizard authorName={session.user.name} />
+          ) : (
+            <div>
+              <SigninButton />
+            </div>
+          )}
+          <div className="flex-grow overflow-y-scroll">
+            <Messages />
+          </div>
+        </div>
+      </section>
     </main>
   );
 }
+
+interface ExternalLinkProps extends ComponentPropsWithoutRef<"a"> {
+  href: string;
+  children: React.ReactNode;
+}
+
+function ExternalLink({ href, children }: ExternalLinkProps) {
+  return (
+    <a
+      className="flex items-center gap-2 px-4 py-1 font-medium text-gray-11 transition-colors ease-in hover:bg-gray-5 hover:text-gray-12"
+      href={href}
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      {children}
+    </a>
+  );
+}
diff --git a/src/components/CreatePostWizard.tsx b/src/components/CreatePostWizard.tsx
index ec83056..e699f22 100644
--- a/src/components/CreatePostWizard.tsx
+++ b/src/components/CreatePostWizard.tsx
@@ -54,7 +54,7 @@ export default function CreatePostWizard({
 
   return (
     <div className="space-y-1">
-      <form className="flex w-full gap-2 rounded-md bg-gray-3 p-2">
+      <form className="flex w-full gap-2 rounded-md border border-gray-7 bg-gray-2 p-2">
         <input
           className="flex-1 bg-transparent placeholder-gray-11 outline-none"
           disabled={isPending}
@@ -69,7 +69,7 @@ export default function CreatePostWizard({
           value={message}
         />
         <button
-          className="rounded-md bg-gray-12 px-3 py-0.5 font-medium text-gray-1 transition-colors hover:bg-white disabled:bg-gray-11"
+          className="rounded-md bg-gray-12 px-3 py-0.5 font-medium text-gray-1 transition-colors ease-in hover:bg-white disabled:bg-gray-11"
           disabled={isPending || message.trim() === ""}
           onClick={addMessage}
         >
@@ -92,7 +92,7 @@ export default function CreatePostWizard({
           Posting your message...
         </p>
         <button
-          className="mr-2 text-sm text-gray-11 transition-colors hover:text-gray-12"
+          className="mr-2 text-sm text-gray-11 transition-colors ease-in hover:text-gray-12"
           onClick={() => void signOut()}
         >
           Sign out
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
deleted file mode 100644
index 555d77e..0000000
--- a/src/components/Footer.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import Icons from "~/components/Icons";
-import { site } from "~/config";
-
-export default function Footer() {
-  return (
-    <footer className="flex items-center justify-between border-t border-gray-6 py-4">
-      <p>
-        Built by{" "}
-        <a
-          className="underline decoration-gray-7 underline-offset-2 transition-colors hover:text-blue-10 hover:decoration-gray-8"
-          href={site.author.web}
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          Sameer Jadav
-        </a>
-        .
-      </p>
-      <div className="flex items-center gap-4">
-        <a
-          className="transition-colors hover:text-blue-10"
-          href={site.author.twitter}
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          <Icons.Twitter className="size-6" />
-          <p className="sr-only">Twitter</p>
-        </a>
-        <a
-          className="transition-colors hover:text-blue-10"
-          href={site.author.github}
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          <Icons.Github className="size-6" />
-          <p className="sr-only">Github</p>
-        </a>
-      </div>
-    </footer>
-  );
-}
diff --git a/src/components/Icons.tsx b/src/components/Icons.tsx
index 85d23d4..dc4717c 100644
--- a/src/components/Icons.tsx
+++ b/src/components/Icons.tsx
@@ -3,6 +3,40 @@ import type { ComponentPropsWithoutRef } from "react";
 type IconProps = ComponentPropsWithoutRef<"svg">;
 
 const Icons = {
+  Cross: ({ ...props }: IconProps) => (
+    <svg
+      {...props}
+      fill="none"
+      height="15"
+      viewBox="0 0 15 15"
+      width="15"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        clipRule="evenodd"
+        d="M12.8536 2.85355C13.0488 2.65829 13.0488 2.34171 12.8536 2.14645C12.6583 1.95118 12.3417 1.95118 12.1464 2.14645L7.5 6.79289L2.85355 2.14645C2.65829 1.95118 2.34171 1.95118 2.14645 2.14645C1.95118 2.34171 1.95118 2.65829 2.14645 2.85355L6.79289 7.5L2.14645 12.1464C1.95118 12.3417 1.95118 12.6583 2.14645 12.8536C2.34171 13.0488 2.65829 13.0488 2.85355 12.8536L7.5 8.20711L12.1464 12.8536C12.3417 13.0488 12.6583 13.0488 12.8536 12.8536C13.0488 12.6583 13.0488 12.3417 12.8536 12.1464L8.20711 7.5L12.8536 2.85355Z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+  ),
+  HamburgerMenu: ({ ...props }: IconProps) => (
+    <svg
+      {...props}
+      fill="none"
+      height="15"
+      viewBox="0 0 15 15"
+      width="15"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        clipRule="evenodd"
+        d="M1.5 3C1.22386 3 1 3.22386 1 3.5C1 3.77614 1.22386 4 1.5 4H13.5C13.7761 4 14 3.77614 14 3.5C14 3.22386 13.7761 3 13.5 3H1.5ZM1 7.5C1 7.22386 1.22386 7 1.5 7H13.5C13.7761 7 14 7.22386 14 7.5C14 7.77614 13.7761 8 13.5 8H1.5C1.22386 8 1 7.77614 1 7.5ZM1 11.5C1 11.2239 1.22386 11 1.5 11H13.5C13.7761 11 14 11.2239 14 11.5C14 11.7761 13.7761 12 13.5 12H1.5C1.22386 12 1 11.7761 1 11.5Z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+  ),
   Github: ({ ...props }: IconProps) => (
     <svg
       {...props}
@@ -37,6 +71,74 @@ const Icons = {
       />
     </svg>
   ),
+  LinkedIn: ({ ...props }: IconProps) => (
+    <svg
+      {...props}
+      fill="none"
+      height="15"
+      viewBox="0 0 15 15"
+      width="15"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        clipRule="evenodd"
+        d="M2 1C1.44772 1 1 1.44772 1 2V13C1 13.5523 1.44772 14 2 14H13C13.5523 14 14 13.5523 14 13V2C14 1.44772 13.5523 1 13 1H2ZM3.05 6H4.95V12H3.05V6ZM5.075 4.005C5.075 4.59871 4.59371 5.08 4 5.08C3.4063 5.08 2.925 4.59871 2.925 4.005C2.925 3.41129 3.4063 2.93 4 2.93C4.59371 2.93 5.075 3.41129 5.075 4.005ZM12 8.35713C12 6.55208 10.8334 5.85033 9.67449 5.85033C9.29502 5.83163 8.91721 5.91119 8.57874 6.08107C8.32172 6.21007 8.05265 6.50523 7.84516 7.01853H7.79179V6.00044H6V12.0047H7.90616V8.8112C7.8786 8.48413 7.98327 8.06142 8.19741 7.80987C8.41156 7.55832 8.71789 7.49825 8.95015 7.46774H9.02258C9.62874 7.46774 10.0786 7.84301 10.0786 8.78868V12.0047H11.9847L12 8.35713Z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+  ),
+  Mail: ({ ...props }: IconProps) => (
+    <svg
+      {...props}
+      fill="none"
+      height="15"
+      viewBox="0 0 15 15"
+      width="15"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        clipRule="evenodd"
+        d="M1 2C0.447715 2 0 2.44772 0 3V12C0 12.5523 0.447715 13 1 13H14C14.5523 13 15 12.5523 15 12V3C15 2.44772 14.5523 2 14 2H1ZM1 3L14 3V3.92494C13.9174 3.92486 13.8338 3.94751 13.7589 3.99505L7.5 7.96703L1.24112 3.99505C1.16621 3.94751 1.0826 3.92486 1 3.92494V3ZM1 4.90797V12H14V4.90797L7.74112 8.87995C7.59394 8.97335 7.40606 8.97335 7.25888 8.87995L1 4.90797Z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+  ),
+  Link: ({ ...props }: IconProps) => (
+    <svg
+      {...props}
+      fill="none"
+      height="15"
+      viewBox="0 0 15 15"
+      width="15"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        clipRule="evenodd"
+        d="M8.51194 3.00541C9.18829 2.54594 10.0435 2.53694 10.6788 2.95419C10.8231 3.04893 10.9771 3.1993 11.389 3.61119C11.8009 4.02307 11.9513 4.17714 12.046 4.32141C12.4633 4.95675 12.4543 5.81192 11.9948 6.48827C11.8899 6.64264 11.7276 6.80811 11.3006 7.23511L10.6819 7.85383C10.4867 8.04909 10.4867 8.36567 10.6819 8.56093C10.8772 8.7562 11.1938 8.7562 11.389 8.56093L12.0077 7.94221L12.0507 7.89929C12.4203 7.52976 12.6568 7.2933 12.822 7.0502C13.4972 6.05623 13.5321 4.76252 12.8819 3.77248C12.7233 3.53102 12.4922 3.30001 12.1408 2.94871L12.0961 2.90408L12.0515 2.85942C11.7002 2.508 11.4692 2.27689 11.2277 2.11832C10.2377 1.46813 8.94398 1.50299 7.95001 2.17822C7.70691 2.34336 7.47044 2.57991 7.1009 2.94955L7.058 2.99247L6.43928 3.61119C6.24401 3.80645 6.24401 4.12303 6.43928 4.31829C6.63454 4.51355 6.95112 4.51355 7.14638 4.31829L7.7651 3.69957C8.1921 3.27257 8.35757 3.11027 8.51194 3.00541ZM4.31796 7.14672C4.51322 6.95146 4.51322 6.63487 4.31796 6.43961C4.12269 6.24435 3.80611 6.24435 3.61085 6.43961L2.99213 7.05833L2.94922 7.10124C2.57957 7.47077 2.34303 7.70724 2.17788 7.95035C1.50265 8.94432 1.4678 10.238 2.11799 11.2281C2.27656 11.4695 2.50766 11.7005 2.8591 12.0518L2.90374 12.0965L2.94837 12.1411C3.29967 12.4925 3.53068 12.7237 3.77214 12.8822C4.76219 13.5324 6.05589 13.4976 7.04986 12.8223C7.29296 12.6572 7.52943 12.4206 7.89896 12.051L7.89897 12.051L7.94188 12.0081L8.5606 11.3894C8.75586 11.1941 8.75586 10.8775 8.5606 10.6823C8.36533 10.487 8.04875 10.487 7.85349 10.6823L7.23477 11.301C6.80777 11.728 6.6423 11.8903 6.48794 11.9951C5.81158 12.4546 4.95642 12.4636 4.32107 12.0464C4.17681 11.9516 4.02274 11.8012 3.61085 11.3894C3.19896 10.9775 3.0486 10.8234 2.95385 10.6791C2.53661 10.0438 2.54561 9.18863 3.00507 8.51227C3.10993 8.35791 3.27224 8.19244 3.69924 7.76544L4.31796 7.14672ZM9.62172 6.08558C9.81698 5.89032 9.81698 5.57373 9.62172 5.37847C9.42646 5.18321 9.10988 5.18321 8.91461 5.37847L5.37908 8.91401C5.18382 9.10927 5.18382 9.42585 5.37908 9.62111C5.57434 9.81637 5.89092 9.81637 6.08619 9.62111L9.62172 6.08558Z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+  ),
+  Code: ({ ...props }: IconProps) => (
+    <svg
+      {...props}
+      fill="none"
+      height="15"
+      viewBox="0 0 15 15"
+      width="15"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        clipRule="evenodd"
+        d="M9.96424 2.68571C10.0668 2.42931 9.94209 2.13833 9.6857 2.03577C9.4293 1.93322 9.13832 2.05792 9.03576 2.31432L5.03576 12.3143C4.9332 12.5707 5.05791 12.8617 5.3143 12.9642C5.5707 13.0668 5.86168 12.9421 5.96424 12.6857L9.96424 2.68571ZM3.85355 5.14646C4.04882 5.34172 4.04882 5.6583 3.85355 5.85356L2.20711 7.50001L3.85355 9.14646C4.04882 9.34172 4.04882 9.6583 3.85355 9.85356C3.65829 10.0488 3.34171 10.0488 3.14645 9.85356L1.14645 7.85356C0.951184 7.6583 0.951184 7.34172 1.14645 7.14646L3.14645 5.14646C3.34171 4.9512 3.65829 4.9512 3.85355 5.14646ZM11.1464 5.14646C11.3417 4.9512 11.6583 4.9512 11.8536 5.14646L13.8536 7.14646C14.0488 7.34172 14.0488 7.6583 13.8536 7.85356L11.8536 9.85356C11.6583 10.0488 11.3417 10.0488 11.1464 9.85356C10.9512 9.6583 10.9512 9.34172 11.1464 9.14646L12.7929 7.50001L11.1464 5.85356C10.9512 5.6583 10.9512 5.34172 11.1464 5.14646Z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+  ),
 };
 
 export default Icons;
diff --git a/src/components/Menu.tsx b/src/components/Menu.tsx
new file mode 100644
index 0000000..b35ba09
--- /dev/null
+++ b/src/components/Menu.tsx
@@ -0,0 +1,80 @@
+"use client";
+
+import type { ComponentPropsWithoutRef } from "react";
+import { Close, Content, Root, Trigger } from "@radix-ui/react-dialog";
+import Icons from "~/components/Icons";
+import { site } from "~/config";
+
+export default function Menu() {
+  return (
+    <Root>
+      <Trigger asChild>
+        <button>
+          <Icons.HamburgerMenu className="size-8 md:hidden" />
+          <span className="sr-only">Menu</span>
+        </button>
+      </Trigger>
+      <Content asChild className="fixed left-4 top-4">
+        <div className="z-50 h-[calc(100dvh-32px)] w-[calc(100dvw-32px)] animate-fade-in rounded-md border border-gray-6 bg-gray-1 p-4">
+          <div className="flex items-center justify-between">
+            <p className="text-2xl font-bold">Sign my Guestbook</p>
+            <Close asChild>
+              <button>
+                <Icons.Cross className="size-8" />{" "}
+                <span className="sr-only">Menu</span>
+              </button>
+            </Close>
+          </div>
+          <div className="mt-4 space-y-2">
+            <ExternalLink href={site.author.web}>
+              <Icons.Link className="size-5" />
+              <span>Website</span>
+            </ExternalLink>
+            <ExternalLink href={site.author.github}>
+              <Icons.Github className="size-5" />
+              <span>GitHub</span>
+            </ExternalLink>
+            <ExternalLink href={site.author.mail}>
+              <Icons.Mail className="size-5" />
+              <span>Mail</span>
+            </ExternalLink>
+            <ExternalLink href={site.author.twitter}>
+              <Icons.Twitter className="size-5" />
+              <span>Twitter</span>
+            </ExternalLink>
+            <ExternalLink href={site.author.linkedin}>
+              <Icons.LinkedIn className="size-5" />
+              <span>LinkedIn</span>
+            </ExternalLink>
+            <ExternalLink href={site.repo}>
+              <Icons.Code className="size-5" />
+              <span>Source code</span>
+            </ExternalLink>
+            <div className="flex items-center gap-2">
+              <div className="size-5 animate-pulse rounded-full bg-green-9" />
+              <p className="text-lg font-medium">Avaliable for work</p>
+            </div>
+          </div>
+        </div>
+      </Content>
+    </Root>
+  );
+}
+
+interface ExternalLinkProps extends ComponentPropsWithoutRef<"a"> {
+  href: string;
+  children: React.ReactNode;
+}
+
+function ExternalLink({ href, children }: ExternalLinkProps) {
+  return (
+    <a
+      className="flex items-center gap-2 text-lg font-medium"
+      href={href}
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      {children}
+    </a>
+  );
+}
diff --git a/src/components/Messages.tsx b/src/components/Messages.tsx
index de149c7..937ac0f 100644
--- a/src/components/Messages.tsx
+++ b/src/components/Messages.tsx
@@ -9,7 +9,9 @@ export default async function Messages() {
   });
   return messages.map(({ id, message, authorName }) => (
     <p key={id}>
-      <span className="text-gray-11">{authorName || "Some guy/girl"}:</span>{" "}
+      <span className="font-medium text-gray-11">
+        {authorName || "Some guy/girl"}:
+      </span>{" "}
       <span>{message}</span>
     </p>
   ));
diff --git a/src/components/SigninButton.tsx b/src/components/SigninButton.tsx
index afcc609..d894e04 100644
--- a/src/components/SigninButton.tsx
+++ b/src/components/SigninButton.tsx
@@ -6,7 +6,7 @@ import Icons from "~/components/Icons";
 export default function SigninButton() {
   return (
     <button
-      className="flex max-w-max items-center gap-2 rounded-md border border-gray-7 bg-gray-2 px-3 py-1 font-medium transition-colors hover:border-gray-8"
+      className="flex max-w-max items-center gap-2 rounded-md border border-gray-7 bg-gray-2 px-3 py-1 font-medium transition-colors ease-in hover:border-gray-8"
       onClick={() => void signIn("github")}
     >
       <Icons.Github className="size-5" />
diff --git a/src/config.ts b/src/config.ts
index 2edc7c6..ddcb367 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -6,11 +6,14 @@ export const site = {
     process.env.NODE_ENV === "development"
       ? "http://localhost:3000"
       : "https://guestbook.sameerjadav.me",
+  repo: "https://github.com/SameerJadav/guestbook",
   author: {
     name: "Sameer Jadav",
     web: "https://sameerjadav.me",
     github: "https://github.com/SameerJadav",
     twitter: "https://twitter.com/SameerJadav_",
     twitterId: "@SameerJadav_",
+    linkedin: "https://www.linkedin.com/in/sameerjadav",
+    mail: "mailto:sameerjdav001@gmail.com",
   },
 };
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 346927c..f89a4b9 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -4,17 +4,15 @@
 
 html {
   color-scheme: dark;
+  scroll-behavior: smooth;
 }
 
-body {
-  @apply bg-gray-1 font-sans text-gray-12 antialiased;
-  text-rendering: optimizeLegibility;
-}
-
-::-webkit-scrollbar {
-  width: 6px;
-}
+@media (min-width: 1024px) {
+  ::-webkit-scrollbar {
+    width: 6px;
+  }
 
-::-webkit-scrollbar-thumb {
-  @apply bg-gray-3;
+  ::-webkit-scrollbar-thumb {
+    @apply rounded-full bg-gray-3;
+  }
 }
diff --git a/tailwind.config.ts b/tailwind.config.ts
index f1b3992..5c56ae4 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,4 +1,4 @@
-import { grayDark, blue, red, yellow } from "@radix-ui/colors";
+import { grayDark, blue, red, green, yellow } from "@radix-ui/colors";
 import type { Config } from "tailwindcss";
 import { fontFamily } from "tailwindcss/defaultTheme";
 
@@ -66,6 +66,29 @@ const config: Config = {
           11: yellow.yellow11,
           12: yellow.yellow12,
         },
+        green: {
+          1: green.green1,
+          2: green.green2,
+          3: green.green3,
+          4: green.green4,
+          5: green.green5,
+          6: green.green6,
+          7: green.green7,
+          8: green.green8,
+          9: green.green9,
+          10: green.green10,
+          11: green.green11,
+          12: green.green12,
+        },
+      },
+      keyframes: {
+        "fade-in": {
+          from: { opacity: "0" },
+          to: { opacity: "1" },
+        },
+      },
+      animation: {
+        "fade-in": "fade-in 150ms ease-in",
       },
     },
   },