diff --git a/apps/about-me/src/pages/index.tsx b/apps/about-me/src/pages/index.tsx
index e2bfb30..f7ab2a7 100644
--- a/apps/about-me/src/pages/index.tsx
+++ b/apps/about-me/src/pages/index.tsx
@@ -49,16 +49,18 @@ const Shapes = () => <div className="absolute flex items-center justify-center">
   <Circle size={4} />
 </div>
 
-const Brief = () => <article className="w-screen flex flex-col justify-center items-center overflow-hidden text-center min-h-screen gap-2">
+const Brief = () => <article className="relative w-screen flex flex-col justify-center items-center overflow-hidden text-center min-h-screen gap-2">
   {/*Avatar*/}
-  <Shapes />
-  <div className="rounded-full w-[200px] h-[200px] overflow-hidden flex justify-center">
-    <div className="flex justify-center items-center">
-      <Image
-        src="/assets/myself.jpg"
-        width={512}
-        height={512}
-        alt="Hung's avatar" />
+  <div className="flex justify-center items-center">
+    <Shapes />
+    <div className="rounded-full w-[200px] h-[200px] overflow-hidden flex justify-center">
+      <div className="flex justify-center items-center">
+        <Image
+          src="/assets/myself.jpg"
+          width={512}
+          height={512}
+          alt="Hung's avatar" />
+      </div>
     </div>
   </div>
   <h1 className="text-3xl semi-bold z-10">
diff --git a/apps/docs/tsconfig.json b/apps/docs/tsconfig.json
index a355365..8b87d54 100644
--- a/apps/docs/tsconfig.json
+++ b/apps/docs/tsconfig.json
@@ -1,5 +1,11 @@
 {
   "extends": "tsconfig/nextjs.json",
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ],
 }
diff --git a/apps/web/tsconfig.json b/apps/web/tsconfig.json
index a355365..b146807 100644
--- a/apps/web/tsconfig.json
+++ b/apps/web/tsconfig.json
@@ -2,4 +2,5 @@
   "extends": "tsconfig/nextjs.json",
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]
+
 }
diff --git a/packages/tsconfig/t3.json b/packages/tsconfig/t3.json
index 4751dfe..2bf5723 100644
--- a/packages/tsconfig/t3.json
+++ b/packages/tsconfig/t3.json
@@ -3,8 +3,20 @@
   "display": "create-t3-app",
   "extends": "./nextjs.json",
   "compilerOptions": {
-    "declaration": false
+    "declaration": false,
+    "baseUrl": ".",
+    "paths": {
+      "@env/*": ["src/env/*"],
+      "@pages/*": ["src/pages/*"],
+      "@styles/*": ["src/styles/*"],
+      "@utils/*": ["src/utils/*"],
+      "@server/*": ["src/server/*"],
+      "@db/*": ["src/server/db/*"],
+      "@trpc/*": ["src/server/trpc/*"],
+      "@router/*": ["src/server/trpc/router"],
+      "@public/*": ["public/*"]
+    }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.cjs", "**/*.mjs"],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules"],
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 49b3da2..6ac6f73 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -27,6 +27,7 @@ importers:
       '@typescript-eslint/eslint-plugin': ^5.33.0
       '@typescript-eslint/parser': ^5.33.0
       autoprefixer: ^10.4.7
+      class-variance-authority: ^0.3.0
       eslint: ^8.26.0
       eslint-config-custom: workspace:*
       next: 13.0.2
@@ -36,7 +37,9 @@ importers:
       prisma: ^4.5.0
       react: 18.2.0
       react-dom: 18.2.0
+      react-icons: ^4.6.0
       superjson: 1.9.1
+      tailwind-scrollbar: ^2.0.1
       tailwindcss: ^3.2.0
       tsconfig: workspace:*
       typescript: ^4.8.4
@@ -52,6 +55,7 @@ importers:
       next: 13.0.2_mqvh5p7ejg4taogoj6tpk3gd5a
       react: 18.2.0
       react-dom: 18.2.0_react@18.2.0
+      react-icons: 4.6.0_react@18.2.0
       superjson: 1.9.1
       ui: link:../../packages/ui
       zod: 3.19.1
@@ -63,12 +67,14 @@ importers:
       '@typescript-eslint/eslint-plugin': 5.43.0_yy4vf4gcvxiubmg7fqa55dqe2i
       '@typescript-eslint/parser': 5.43.0_rmayb2veg2btbq6mbmnyivgasy
       autoprefixer: 10.4.13_postcss@8.4.14
+      class-variance-authority: 0.3.0_typescript@4.8.4
       eslint: 8.27.0
       eslint-config-custom: link:../../packages/eslint-config-custom
       postcss: 8.4.14
       prettier: 2.7.1
       prettier-plugin-tailwindcss: 0.1.13_prettier@2.7.1
       prisma: 4.6.1
+      tailwind-scrollbar: 2.0.1_tailwindcss@3.2.4
       tailwindcss: 3.2.4_postcss@8.4.14
       tsconfig: link:../../packages/tsconfig
       typescript: 4.8.4
@@ -1282,6 +1288,17 @@ packages:
       fsevents: 2.3.2
     dev: true
 
+  /class-variance-authority/0.3.0_typescript@4.8.4:
+    resolution: {integrity: sha512-TFO+pzY9Gedqv8crPhprd647wxhvfpKevPPjiMcteEWsnkHX9yZrD1xMY3ZhRZnLwHUHCCP0LYO6KZIVag/5wQ==}
+    peerDependencies:
+      typescript: '>= 4.5.5 < 5'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      typescript: 4.8.4
+    dev: true
+
   /client-only/0.0.1:
     resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
     dev: false
@@ -2896,6 +2913,14 @@ packages:
       scheduler: 0.23.0
     dev: false
 
+  /react-icons/4.6.0_react@18.2.0:
+    resolution: {integrity: sha512-rR/L9m9340yO8yv1QT1QurxWQvWpbNHqVX0fzMln2HEb9TEIrQRGsqiNFQfiv9/JEUbyHmHPlNTB2LWm2Ttz0g==}
+    peerDependencies:
+      react: '*'
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /react-is/16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
     dev: false
@@ -3149,6 +3174,15 @@ packages:
       string-width: 4.2.3
       strip-ansi: 6.0.1
 
+  /tailwind-scrollbar/2.0.1_tailwindcss@3.2.4:
+    resolution: {integrity: sha512-OcR7qHBbux4k+k6bWqnEQFYFooLK/F4dhkBz6nvswIoaA9ancZ5h20e0tyV7ifSWLDCUBtpG+1NHRA8HMRH/wg==}
+    engines: {node: '>=12.13.0'}
+    peerDependencies:
+      tailwindcss: 3.x
+    dependencies:
+      tailwindcss: 3.2.4_postcss@8.4.14
+    dev: true
+
   /tailwindcss/3.2.4_postcss@8.4.14:
     resolution: {integrity: sha512-AhwtHCKMtR71JgeYDaswmZXhPcW9iuI9Sp2LvZPo9upDZ7231ZJ7eA9RaURbhpXGVlrjX4cFNlB4ieTetEb7hQ==}
     engines: {node: '>=12.13.0'}