diff --git a/works/index.html b/works/index.html
index 50b1627..b6f3266 100644
--- a/works/index.html
+++ b/works/index.html
@@ -48,64 +48,64 @@
         <h3>Works by type</h3>
 
         <div class="section">
-          <a class="itemcard-works" href="/works">
+          <a class="itemcard-works" href="/works/devops" style="background: linear-gradient(to bottom, rgba(100, 100, 100, 1) 0%,rgba(60, 60, 60, 1) 100%);">
             <div class="listaction">
               <!-- <img src="resources/icons/applocalization.svg" width="36" height="36" style="margin: 0.3cm;">  -->
-              <h3>DevOps</h3>
+              <h3 style="color: white;">DevOps</h3>
             </div>
           </a>
-          <a class="itemcard-works" href="/works">
+          <a class="itemcard-works" href="/works/sysadmin" style="background: linear-gradient(to bottom, rgba(100, 100, 100, 1) 0%,rgba(60, 60, 60, 1) 100%);">
             <div class="listaction">
               <!-- <img src="resources/icons/applocalization.svg" width="36" height="36" style="margin: 0.3cm;">  -->
-              <h3>SysAdmin</h3>
+              <h3 style="color: white;">SysAdmin</h3>
             </div>
           </a>
-          <a class="itemcard-works" href="/works">
+          <a class="itemcard-works" href="/works/uidesign" style="background: linear-gradient(to bottom, rgba(100, 100, 100, 1) 0%,rgba(60, 60, 60, 1) 100%);">
             <div class="listaction">
               <!-- <img src="resources/icons/c4c.svg"  width="36" height="36" style="margin: 0.3cm;">  -->
-              <h3>UI Design</h3>
+              <h3 style="color: white;">UI Design</h3>
             </div>
           </a>
-          <a class="itemcard-works" href="/works">
+          <a class="itemcard-works" href="/works/icondesign" style="background: linear-gradient(to bottom, rgba(100, 100, 100, 1) 0%,rgba(60, 60, 60, 1) 100%);">
             <div class="listaction">
               <!-- <img src="resources/icons/c4c.svg"  width="36" height="36" style="margin: 0.3cm;">  -->
-              <h3>Icon Design</h3>
+              <h3 style="color: white;">Icon Design</h3>
             </div>
           </a>
-          <a class="itemcard-works" href="/works">
+          <a class="itemcard-works" href="/works/opendata" style="background: linear-gradient(to bottom, rgba(100, 100, 100, 1) 0%,rgba(60, 60, 60, 1) 100%);">
             <div class="listaction">
               <!-- <img src="resources/icons/mappingthailand.svg" width="36" height="36" style="margin: 0.3cm;">  -->
-              <h3>Open Data</h3>
+              <h3 style="color: white;">Open Data</h3>
             </div>
           </a>
-          <a class="itemcard-works" href="/works">
+          <a class="itemcard-works" href="/work/l10n" style="background: linear-gradient(to bottom, rgba(100, 100, 100, 1) 0%,rgba(60, 60, 60, 1) 100%);">
             <div class="listaction">
               <!-- <img src="resources/icons/opensourcefund.svg" width="36" height="36" style="margin: 0.3cm;">  -->
-              <h3>Translation</h3>
+              <h3 style="color: white;">Translation</h3>
             </div>
           </a>
-          <a class="itemcard-works" href="/works">
+          <a class="itemcard-works" href="/works/code" style="background: linear-gradient(to bottom, rgba(100, 100, 100, 1) 0%,rgba(60, 60, 60, 1) 100%);">
             <div class="listaction">
               <!-- <img src="resources/icons/openvoice.svg"  width="36" height="36" style="margin: 0.3cm;">  -->
-              <h3>Code</h3>
+              <h3 style="color: white;">Code</h3>
             </div>
           </a>
-          <a class="itemcard-works" href="/works">
+          <a class="itemcard-works" href="/works/docs" style="background: linear-gradient(to bottom, rgba(100, 100, 100, 1) 0%,rgba(60, 60, 60, 1) 100%);">
             <div class="listaction">
               <!-- <img src="resources/icons/openvoice.svg"  width="36" height="36" style="margin: 0.3cm;">  -->
-              <h3>Documentation</h3>
+              <h3 style="color: white;">Documentation</h3>
             </div>
           </a>
-          <a class="itemcard-works" href="/works">
+          <a class="itemcard-works" href="/works/video" style="background: linear-gradient(to bottom, rgba(100, 100, 100, 1) 0%,rgba(60, 60, 60, 1) 100%);">
             <div class="listaction">
               <!-- <img src="resources/icons/openvoice.svg"  width="36" height="36" style="margin: 0.3cm;">  -->
-              <h3>Video</h3>
+              <h3 style="color: white;">Video</h3>
             </div>
           </a>
-          <a class="itemcard-works" href="/works">
+          <a class="itemcard-works" href="/works/other" style="background: linear-gradient(to bottom, rgba(100, 100, 100, 1) 0%,rgba(60, 60, 60, 1) 100%);">
             <div class="listaction">
               <!-- <img src="resources/icons/openvoice.svg"  width="36" height="36" style="margin: 0.3cm;">  -->
-              <h3>Other</h3>
+              <h3 style="color: white;">Other</h3>
             </div>
           </a>
         </div>