diff --git a/client/Home.jsx b/client/Home.jsx
index 74f8a82..4f9ab21 100644
--- a/client/Home.jsx
+++ b/client/Home.jsx
@@ -46,7 +46,7 @@ const Home = () => {
                 </div>
 
                 <div className="bt b--black-20 relative">
-                    <h3 className="absolute bg-white f4 left-2 lh-copy ma0 ph2 top-0" style={{ transform: 'translate(0, -50%)' }}>Layouts</h3>
+                    <h3 className="absolute bg-white f4 left-2 lh-copy ma0 ph2 top-0 ttu" style={{ transform: 'translate(0, -50%)' }}>Layouts</h3>
 
                     <div className="flex flex-wrap items-start pa4">
                         <CoverCard pattern="Holy grail" />
@@ -58,7 +58,7 @@ const Home = () => {
                 </div>
 
                 <div className="bt b--black-20 relative">
-                    <h3 className="absolute bg-white f4 left-2 lh-copy ma0 ph2 top-0" style={{ transform: 'translate(0, -50%)' }}>Patterns</h3>
+                    <h3 className="absolute bg-white f4 left-2 lh-copy ma0 ph2 top-0 ttu" style={{ transform: 'translate(0, -50%)' }}>Patterns</h3>
 
                     <div className="flex flex-wrap items-start pa4">
                         <CoverCard pattern="Badge" />
diff --git a/client/layouts/Footer.jsx b/client/layouts/Footer.jsx
index f9eabc0..45bac41 100644
--- a/client/layouts/Footer.jsx
+++ b/client/layouts/Footer.jsx
@@ -4,7 +4,7 @@ const Footer = () => {
     return (
         <div className="bl br bb b--black-20 flex justify-between br4 br--bottom">
             <div className="bt br b--black-20 relative" style={{ flex: 1 }}>
-                <h3 className="absolute bg-white f4 left-2 lh-copy ma0 ph2 top-0" style={{ transform: 'translate(0, -50%)' }}>PRODUCTS</h3>
+                <h3 className="absolute bg-white f4 left-2 lh-copy ma0 ph2 top-0 ttu" style={{ transform: 'translate(0, -50%)' }}>Products</h3>
 
                 <ul className="list ma0 pa0 lh-copy fw5 pa4">
                     <li>
@@ -26,7 +26,7 @@ const Footer = () => {
             </div>
 
             <div className="bt b--black-20 relative" style={{ flex: 1 }}>
-                <h3 className="absolute bg-white f4 left-2 lh-copy ma0 ph2 top-0" style={{ transform: 'translate(0, -50%)' }}>ABOUT</h3>
+                <h3 className="absolute bg-white f4 left-2 lh-copy ma0 ph2 top-0 ttu" style={{ transform: 'translate(0, -50%)' }}>About</h3>
 
                 <div className="pa4">
                     <div className="pb2 lh-copy">© 2019 Nguyen Huu Phuoc and contributors</div>
diff --git a/client/patterns/radio-switch/Details.jsx b/client/patterns/radio-switch/Details.jsx
index f781e27..de5ef3d 100644
--- a/client/patterns/radio-switch/Details.jsx
+++ b/client/patterns/radio-switch/Details.jsx
@@ -63,7 +63,7 @@ code={`
                 />
             </div>
             <div className="bt b--black-20 relative">
-                <h3 className="absolute bg-white f4 left-2 lh-copy ma0 ph2 top-0" style={{ transform: 'translate(0px, -50%)' }}>Use cases</h3>
+                <h3 className="absolute bg-white f4 left-2 lh-copy ma0 ph2 top-0 ttu" style={{ transform: 'translate(0px, -50%)' }}>Use cases</h3>
 
                 <div className="pa4">
                     <div className="inline-flex br-pill bg-black-10 pa1">