diff --git a/client/pages/MadeOf.tsx b/client/pages/MadeOf.tsx
index 2c38e3e..24bc95f 100644
--- a/client/pages/MadeOf.tsx
+++ b/client/pages/MadeOf.tsx
@@ -42,7 +42,7 @@ this
         expect(r).is(superFastWebsite);
         expect(r).is(seoFriendly);
     })
-    .finall(() => {
+    .finally(() => {
         /* Give me 1 Github star 🎉 */
     });
 `}
diff --git a/client/patterns/mega-menu/Details.tsx b/client/patterns/mega-menu/Details.tsx
index 4087515..c483938 100644
--- a/client/patterns/mega-menu/Details.tsx
+++ b/client/patterns/mega-menu/Details.tsx
@@ -25,7 +25,7 @@ const Details: React.FC<{}> = () => {
             </Helmet>
             <div className='p-8 pb-20'>
                 <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
-                    Move the mouse over the seccond navigation item to see the mega menu.
+                    Move the mouse over the second navigation item to see the mega menu.
                 </div>
                 <BrowserFrame
                     content={(
diff --git a/client/patterns/presence-indicator/Details.tsx b/client/patterns/presence-indicator/Details.tsx
index 856a6bb..bc5432a 100644
--- a/client/patterns/presence-indicator/Details.tsx
+++ b/client/patterns/presence-indicator/Details.tsx
@@ -62,7 +62,7 @@ const Details: React.FC<{}> = () => {
     <!-- Other element such as avatar -->
     ...
 
-    <!-- The presense indicator -->
+    <!-- The presence indicator -->
     <div style="
         /* Shown at the bottom right corner */
         bottom: 0,
diff --git a/client/patterns/rating/Details.tsx b/client/patterns/rating/Details.tsx
index c170a82..ae38e86 100644
--- a/client/patterns/rating/Details.tsx
+++ b/client/patterns/rating/Details.tsx
@@ -74,7 +74,7 @@ Note that we use \`flex-direction: row-reverse\` on the container
     margin: 0 2px;
     padding: 0;
 
-    /* Used to postion the hover state */
+    /* Used to position the hover state */
     position: relative;
 }
 </style>
diff --git a/client/patterns/watermark/Details.tsx b/client/patterns/watermark/Details.tsx
index a650d38..b57ca31 100644
--- a/client/patterns/watermark/Details.tsx
+++ b/client/patterns/watermark/Details.tsx
@@ -14,8 +14,8 @@ const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Watermark">
             <Helmet>
-                <meta name="description" content="Create a watermask with CSS" />
-                <meta name="keywords" content="css watermask" />
+                <meta name="description" content="Create a watermark with CSS" />
+                <meta name="keywords" content="css watermark" />
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame