diff --git a/apps/web/components/core/color-picker-fab.tsx b/apps/web/components/core/color-picker-fab.tsx
index 4be341d..991e0b5 100644
--- a/apps/web/components/core/color-picker-fab.tsx
+++ b/apps/web/components/core/color-picker-fab.tsx
@@ -6,12 +6,12 @@ function ColorPickerFab() {
   return (
     <div
       className={cn(
-        "fixed inset-x-0 bottom-[calc(4rem+env(safe-area-inset-bottom))] z-50 flex w-full justify-center sm:bottom-[calc(1rem+env(safe-area-inset-bottom))]",
+        "pointer-events-none fixed inset-x-0 bottom-[calc(4rem+env(safe-area-inset-bottom))] z-50 flex w-full justify-center sm:bottom-[calc(1rem+env(safe-area-inset-bottom))]",
       )}
     >
       <div
         className={cn(
-          "flex max-w-xs items-center justify-center gap-4 rounded-full border border-white/10 p-2 shadow-lg backdrop-blur-xl backdrop-brightness-105 backdrop-saturate-150 dark:border-white/5 dark:backdrop-brightness-95",
+          "pointer-events-auto flex max-w-xs items-center justify-center gap-4 rounded-full border border-white/10 p-2 shadow-lg backdrop-blur-xl backdrop-brightness-105 backdrop-saturate-150 dark:border-white/5 dark:backdrop-brightness-95",
           // "bg-background-accent/75",
         )}
         style={{
diff --git a/apps/web/components/core/site-footer.tsx b/apps/web/components/core/site-footer.tsx
index be52033..fc3d555 100644
--- a/apps/web/components/core/site-footer.tsx
+++ b/apps/web/components/core/site-footer.tsx
@@ -58,7 +58,7 @@ function SiteFooter() {
               rel="noopener noreferrer"
               title="Visit Oliver's portfolio"
             >
-              Oliver Pan
+              Oliver
             </a>
             {". "}
             The source code is on{" "}
diff --git a/apps/web/components/palette/base-color-palettes.tsx b/apps/web/components/palette/base-color-palettes.tsx
index dc13c74..6c4d12f 100644
--- a/apps/web/components/palette/base-color-palettes.tsx
+++ b/apps/web/components/palette/base-color-palettes.tsx
@@ -5,7 +5,7 @@ import { cn } from "@ui/lib/utils";
 import React from "react";
 
 import PaletteButton from "./base-palette-button";
-import { colorHelper } from "@/lib/colorHelper";
+import ColorString from "./color-string";
 
 function BaseColorPalettes() {
   const { colorPalettes, colorMode } = useColorStore.getState();
@@ -81,7 +81,13 @@ function BaseColorPalettes() {
                           "@md/section-secondary:hover:absolute @md/section-secondary:hover:left-0 @md/section-secondary:hover:top-0 @md/section-secondary:hover:z-10 @md/section-secondary:hover:shadow-sm",
                         )}
                       >
-                        {colorHelper.toColorMode(color.raw, colorMode)}
+                        <ColorString
+                          {...{
+                            step,
+                            type,
+                            animation: animation(step, type),
+                          }}
+                        />
                       </div>
                     </div>
                   </div>
diff --git a/apps/web/next.config.js b/apps/web/next.config.js
index ee26c88..ad58add 100644
--- a/apps/web/next.config.js
+++ b/apps/web/next.config.js
@@ -13,6 +13,10 @@ module.exports = {
       {
         hostname: 'fluid-colors.vercel.app',
       },
+      {
+        protocol: 'https',
+        hostname: 'user-images.githubusercontent.com',
+      },
     ]
   },
   transpilePackages: ["ui"],
diff --git a/apps/web/package.json b/apps/web/package.json
index 131fccd..77f3aea 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -29,6 +29,7 @@
   },
   "devDependencies": {
     "@tailwindcss/container-queries": "^0.1.1",
+    "@tailwindcss/typography": "^0.5.10",
     "@types/culori": "^2.0.1",
     "@types/node": "^17.0.12",
     "@types/react": "^18.2.25",
diff --git a/apps/web/tailwind.config.js b/apps/web/tailwind.config.js
index 07ab589..8222a2f 100644
--- a/apps/web/tailwind.config.js
+++ b/apps/web/tailwind.config.js
@@ -26,6 +26,7 @@ module.exports = {
     plugins: [
         ...tailwindConfig.plugins,
         require('@tailwindcss/container-queries'),
-        require("tailwindcss-animate")
+        require("tailwindcss-animate"),
+        require('@tailwindcss/typography')
     ]
 }
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cb84c2f..50a9341 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -83,6 +83,9 @@ importers:
       '@tailwindcss/container-queries':
         specifier: ^0.1.1
         version: 0.1.1(tailwindcss@3.3.3)
+      '@tailwindcss/typography':
+        specifier: ^0.5.10
+        version: 0.5.10(tailwindcss@3.3.3)
       '@types/culori':
         specifier: ^2.0.1
         version: 2.0.1
@@ -1466,6 +1469,18 @@ packages:
       tailwindcss: 3.3.3
     dev: true
 
+  /@tailwindcss/typography@0.5.10(tailwindcss@3.3.3):
+    resolution: {integrity: sha512-Pe8BuPJQJd3FfRnm6H0ulKIGoMEQS+Vq01R6M5aCrFB/ccR/shT+0kXLjouGC1gFLm9hopTFN+DMP0pfwRWzPw==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || insiders'
+    dependencies:
+      lodash.castarray: 4.4.0
+      lodash.isplainobject: 4.0.6
+      lodash.merge: 4.6.2
+      postcss-selector-parser: 6.0.10
+      tailwindcss: 3.3.3
+    dev: true
+
   /@tootallnate/quickjs-emscripten@0.23.0:
     resolution: {integrity: sha512-C5Mc6rdnsaJDjO3UpGW/CQTHtCKaYlScZTly4JIu97Jxo/odCiH0ITnDXSJPTOrEKk/ycSZ0AOgTmkDtkOsvIA==}
     dev: true
@@ -4368,6 +4383,10 @@ packages:
     resolution: {integrity: sha512-kZzYOKspf8XVX5AvmQF94gQW0lejFVgb80G85bU4ZWzoJ6C03PQg3coYAUpSTpQWelrZELd3XWgHzw4Ck5kaIw==}
     dev: true
 
+  /lodash.castarray@4.4.0:
+    resolution: {integrity: sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==}
+    dev: true
+
   /lodash.escaperegexp@4.1.2:
     resolution: {integrity: sha512-TM9YBvyC84ZxE3rgfefxUWiQKLilstD6k7PTGt6wfbtXF8ixIJLOL3VYyV/z+ZiPLsVxAsKAFVwWlWeb2Y8Yyw==}
     dev: true
@@ -5081,6 +5100,14 @@ packages:
       postcss: 8.4.31
       postcss-selector-parser: 6.0.13
 
+  /postcss-selector-parser@6.0.10:
+    resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
+    engines: {node: '>=4'}
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+    dev: true
+
   /postcss-selector-parser@6.0.13:
     resolution: {integrity: sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==}
     engines: {node: '>=4'}