diff --git a/src/pages/about.astro b/src/pages/about.astro
index 35af202..716f2ca 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -1,4 +1,6 @@
 ---
+import "../styles/global.css";
+
 const pageTitle = "About Me";
 const identity = {
   firstName: "Thuan",
@@ -19,6 +21,9 @@ const skills = [
 const happy = true;
 const finished = false;
 const goal = 3;
+const skillColor = "crimson";
+const fontWeight = "bold";
+const textCase = "uppercase";
 ---
 
 <html lang='en'>
@@ -28,6 +33,17 @@ const goal = 3;
     <meta name='viewport' content='width=device-width' />
     <meta name='generator' content={Astro.generator} />
     <title>{pageTitle}</title>
+    <style define:vars={{ skillColor, fontWeight, textCase }}>
+      h1 {
+        color: purple;
+        font-size: 4rem;
+      }
+      .skill {
+        color: var(--skillColor);
+        font-weight: var(--fontWeight);
+        text-transform: var(--textCase);
+      }
+    </style>
   </head>
   <body>
     <a href='/'>Home</a>
@@ -62,7 +78,7 @@ const goal = 3;
     </ul>
     <p>My skills are:</p>
     <ul>
-      {skills.map((skill) => <li>{skill}</li>)}
+      {skills.map((skill) => <li class='skill'>{skill}</li>)}
     </ul>
 
     {happy && <p>I am happy to be learning Astro!</p>}
diff --git a/src/styles/global.css b/src/styles/global.css
new file mode 100644
index 0000000..71a2293
--- /dev/null
+++ b/src/styles/global.css
@@ -0,0 +1,21 @@
+html {
+  background-color: #f1f5f9;
+  font-family: sans-serif;
+}
+
+body {
+  margin: 0 auto;
+  width: 100%;
+  max-width: 80ch;
+  padding: 1rem;
+  line-height: 1.5;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+h1 {
+  margin: 1rem 0;
+  font-size: 2.5rem;
+}
\ No newline at end of file
