diff --git a/README.md b/README.md
index 7b18808..e725554 100644
--- a/README.md
+++ b/README.md
@@ -73,7 +73,7 @@ You might be interested in my products:
 
 _Products_
 * [Blur Page - A browser extension to hide sensitive information on a web page](https://blur.page)
-* [Check Browsers Support - A browser extension to check browser compatibility without leaving your tab](https://checkbrowsers.support")
+* [Check Browsers Support - A browser extension to check browser compatibility without leaving your tab](https://checkbrowsers.support)
 * [Fake Numbers - Generate fake and valid numbers](https://fakenumbers.io)
 * [Form Validation - The best validation library for JavaScript](https://formvalidation.io)
 * [React PDF Viewer - A React component to view a PDF document](https://react-pdf-viewer.dev)
diff --git a/client/components/Product.tsx b/client/components/Product.tsx
index b430499..dcee56b 100644
--- a/client/components/Product.tsx
+++ b/client/components/Product.tsx
@@ -15,9 +15,10 @@ interface ProductProps {
 
 const Product: React.FC<ProductProps> = ({ product }) => {
     return (
-        <div className="product">
+        <div className="product" style={{ backgroundColor: product.themeColor }}>
             <a href={product.url}>
                 <img className="product__logo" src={`/assets/${slug(product.name)}.png`} alt={`${product.name} - ${product.description}`} />
+                <h3 className="product__name">{product.name}</h3>
                 <div className="product__desc">{product.description}</div>
             </a>
         </div>
diff --git a/client/components/product.css b/client/components/product.css
index 04bac91..cfcbfde 100644
--- a/client/components/product.css
+++ b/client/components/product.css
@@ -4,19 +4,27 @@
  */
 
 .product {
-    border: 1px solid rgba(0, 0, 0, .3);
     border-radius: 0.5rem;
+    color: #FFF;
     margin: 1rem 0;
     overflow: hidden;
+    padding: 1rem;
 }
 .product a {
+    color: #FFF;
+    text-align: center;
     text-decoration: none;
 }
 .product__logo {
+    display: flex;
     height: auto;
-    width: 100%;
+    margin: 0 auto;
+    width: 6rem;
+}
+.product__name {
+    font-size: 1.5rem;
+    margin: 1rem;
 }
 .product__desc {
-    padding: 0.5rem;
     text-align: center;
 }
\ No newline at end of file
diff --git a/client/constants/ProductList.ts b/client/constants/ProductList.ts
index ef4006a..2a90ea5 100644
--- a/client/constants/ProductList.ts
+++ b/client/constants/ProductList.ts
@@ -12,6 +12,12 @@ const ProductList: ProductModel[] = [
         description: 'A browser extension to hide sensitive information on a web page',
         themeColor: '#4e7fb8',
     },
+    {
+        name: 'Check Browsers Support',
+        url: 'https://checkbrowsers.support',
+        description: 'A browser extension to check browser compatibility without leaving your tab',
+        themeColor: '#f33446',
+    },
     {
         name: 'Form Validation',
         url: 'https://formvalidation.io',
diff --git a/client/index.css b/client/index.css
index 99e0e27..8db26c2 100644
--- a/client/index.css
+++ b/client/index.css
@@ -59,9 +59,8 @@ a {
     justify-content: center;
 }
 .hero__logo img {
-    height: 12rem;
     object-fit: cover;
-    width: 20rem;
+    width: 16rem;
 }
 .hero__heading {
     color: var(--color-gray-9);
@@ -154,13 +153,13 @@ pre {
 }
 @media (min-width: 768px) {
     .sidebar {
-        flex-basis: 10rem;
+        flex-basis: 12rem;
         margin-left: 1rem;
     }
 }
 @media (min-width: 1024px) {
     .sidebar {
-        flex-basis: 12rem;
+        flex-basis: 16rem;
         margin-left: 2rem;
     }
 }
\ No newline at end of file
diff --git a/client/pages/HomePage.tsx b/client/pages/HomePage.tsx
index cb357d2..b128661 100644
--- a/client/pages/HomePage.tsx
+++ b/client/pages/HomePage.tsx
@@ -43,7 +43,8 @@ const HomePage = () => {
             <div className="hero">
                 <div className="container">
                     <div className="hero__logo"><img src="/assets/logo.png" alt="CSS Layout" /></div>
-                    <h1 className="hero__heading">Popular Layouts & patterns made with CSS</h1>
+                    <h1 className="home__heading">CSS Layout</h1>
+                    <h2 className="hero__subheading">Popular Layouts & patterns made with CSS</h2>
                 </div>
             </div>
 
diff --git a/client/pages/homePage.css b/client/pages/homePage.css
index 1186e91..f65b7a7 100644
--- a/client/pages/homePage.css
+++ b/client/pages/homePage.css
@@ -44,9 +44,10 @@
 }
 .home__heading {
     color: var(--color-gray-9);
-    font-size: 4rem;
+    font-size: 3rem;
     font-weight: 600;
-    margin-bottom: 1rem;
+    margin: 1rem;
+    text-align: center;
 }
 .home__explore {
     background-color: var(--background-color);
diff --git a/client/patterns/timeline/Details.tsx b/client/patterns/timeline/Details.tsx
index 71f45f5..e83ddde 100644
--- a/client/patterns/timeline/Details.tsx
+++ b/client/patterns/timeline/Details.tsx
@@ -7,6 +7,7 @@ import * as React from 'react';
 import { Helmet } from 'react-helmet';
 import Pattern from '../../constants/Pattern';
 
+import RelatedPatterns from '../../components/RelatedPatterns';
 import DetailsLayout from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
@@ -22,8 +23,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="twitter:description" content="Create a timeline with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css timeline" />
             </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
+            <BrowserFrame
 html={`
 <div class="container">
     <!-- Left vertical line -->
@@ -111,77 +111,78 @@ css={`
     margin-left: 48px;
 }
 `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
                 >
                     <div
                         style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
+                            position: 'relative',
+                            width: '60%',
                         }}
                     >
                         <div
                             style={{
-                                position: 'relative',
-                                width: '60%',
+                                borderRight: '2px solid #aaa',
+                                height: '100%',
+                                left: '16px',
+                                position: 'absolute',
+                                top: 0,
+                            }}
+                        />
+                        <ul
+                            style={{
+                                listStyleType: 'none',
+                                margin: 0,
+                                padding: 0,
                             }}
                         >
-                            <div
-                                style={{
-                                    borderRight: '2px solid #aaa',
-                                    height: '100%',
-                                    left: '16px',
-                                    position: 'absolute',
-                                    top: 0,
-                                }}
-                            />
-                            <ul
-                                style={{
-                                    listStyleType: 'none',
-                                    margin: 0,
-                                    padding: 0,
-                                }}
-                            >
-                                <li style={{ marginBottom: '8px' }}>
-                                    <div style={{ alignItems: 'center', display: 'flex', marginBottom: '4px' }}>
-                                        <Circle backgroundColor='#aaa' size={32} />
-                                        <div style={{ flex: 1, marginLeft: '16px' }}>
-                                            <div style={{ width: '80%' }}><Rectangle /></div>
-                                        </div>
+                            <li style={{ marginBottom: '8px' }}>
+                                <div style={{ alignItems: 'center', display: 'flex', marginBottom: '4px' }}>
+                                    <Circle backgroundColor='#aaa' size={32} />
+                                    <div style={{ flex: 1, marginLeft: '16px' }}>
+                                        <div style={{ width: '80%' }}><Rectangle /></div>
                                     </div>
-                                    <div style={{ marginLeft: '48px' }}>
-                                        <Block numberOfBlocks={10} blockHeight={2} />
+                                </div>
+                                <div style={{ marginLeft: '48px' }}>
+                                    <Block numberOfBlocks={10} blockHeight={2} />
+                                </div>
+                            </li>
+                            <li style={{ marginBottom: '8px' }}>
+                                <div style={{ alignItems: 'center', display: 'flex', marginBottom: '4px' }}>
+                                    <Circle backgroundColor='#aaa' size={32} />
+                                    <div style={{ flex: 1, marginLeft: '16px' }}>
+                                        <div style={{ width: '60%' }}><Rectangle /></div>
                                     </div>
-                                </li>
-                                <li style={{ marginBottom: '8px' }}>
-                                    <div style={{ alignItems: 'center', display: 'flex', marginBottom: '4px' }}>
-                                        <Circle backgroundColor='#aaa' size={32} />
-                                        <div style={{ flex: 1, marginLeft: '16px' }}>
-                                            <div style={{ width: '60%' }}><Rectangle /></div>
-                                        </div>
+                                </div>
+                                <div style={{ marginLeft: '48px' }}>
+                                    <Block numberOfBlocks={15} blockHeight={2} />
+                                </div>
+                            </li>
+                            <li style={{ marginBottom: '8px' }}>
+                                <div style={{ alignItems: 'center', display: 'flex', marginBottom: '4px' }}>
+                                    <Circle backgroundColor='#aaa' size={32} />
+                                    <div style={{ flex: 1, marginLeft: '16px' }}>
+                                        <div style={{ width: '60%' }}><Rectangle /></div>
                                     </div>
-                                    <div style={{ marginLeft: '48px' }}>
-                                        <Block numberOfBlocks={15} blockHeight={2} />
-                                    </div>
-                                </li>
-                                <li style={{ marginBottom: '8px' }}>
-                                    <div style={{ alignItems: 'center', display: 'flex', marginBottom: '4px' }}>
-                                        <Circle backgroundColor='#aaa' size={32} />
-                                        <div style={{ flex: 1, marginLeft: '16px' }}>
-                                            <div style={{ width: '60%' }}><Rectangle /></div>
-                                        </div>
-                                    </div>
-                                    <div style={{ marginLeft: '48px' }}>
-                                        <Block numberOfBlocks={10} blockHeight={2} />
-                                    </div>
-                                </li>
-                            </ul>
-                        </div>
+                                </div>
+                                <div style={{ marginLeft: '48px' }}>
+                                    <Block numberOfBlocks={10} blockHeight={2} />
+                                </div>
+                            </li>
+                        </ul>
                     </div>
-                </BrowserFrame>
-            </div>
+                </div>
+            </BrowserFrame>
+
+            <RelatedPatterns patterns={[Pattern.ZigzagTimeline]} />
         </DetailsLayout>
     );
 };
diff --git a/client/patterns/zigzag-timeline/Details.tsx b/client/patterns/zigzag-timeline/Details.tsx
index 8ee9500..47fa6f3 100644
--- a/client/patterns/zigzag-timeline/Details.tsx
+++ b/client/patterns/zigzag-timeline/Details.tsx
@@ -7,6 +7,7 @@ import * as React from 'react';
 import { Helmet } from 'react-helmet';
 import Pattern from '../../constants/Pattern';
 
+import RelatedPatterns from '../../components/RelatedPatterns';
 import DetailsLayout from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
@@ -23,8 +24,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="twitter:description" content="Create a zigzag timeline" />
                 <meta name="keywords" content="css timeline, css zigzag timeline" />
             </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
+            <BrowserFrame
 html={`
 <div class="zigzag-timeline__item">
     <!-- Milestone -->
@@ -82,52 +82,53 @@ css={`
     transform: translate(50%, -50%);
 }
 `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        margin: '0 auto',
+                        padding: '0.5rem',
+                        width: '60%',
+                    }}
                 >
                     <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            margin: '0 auto',
-                            padding: '0.5rem',
-                            width: '60%',
+                        className='zigzag-timeline__item'
+                        style={{                                
+                            padding: '1rem 1.5rem',
                         }}
                     >
-                        <div
-                            className='zigzag-timeline__item'
-                            style={{                                
-                                padding: '1rem 1.5rem',
-                            }}
-                        >
-                            <div className='zigzag-timeline__milestone'/>
-                            <div style={{ marginBottom: '1rem', width: '80%' }}><Rectangle /></div>
-                            <Block numberOfBlocks={10} />
-                        </div>
-                        <div
-                            className='zigzag-timeline__item'
-                            style={{
-                                padding: '1rem 1.5rem',
-                            }}
-                        >
-                            <div className='zigzag-timeline__milestone' />
-                            <div style={{ marginBottom: '1rem', width: '60%' }}><Rectangle /></div>
-                            <Block numberOfBlocks={20} />
-                        </div>
-                        <div
-                            className='zigzag-timeline__item'
-                            style={{
-                                padding: '1rem 1.5rem',
-                            }}
-                        >
-                            <div className='zigzag-timeline__milestone' />
-                            <div style={{ marginBottom: '1rem', width: '70%' }}><Rectangle /></div>
-                            <Block numberOfBlocks={15} />
-                        </div>
+                        <div className='zigzag-timeline__milestone'/>
+                        <div style={{ marginBottom: '1rem', width: '80%' }}><Rectangle /></div>
+                        <Block numberOfBlocks={10} />
                     </div>
-                </BrowserFrame>
-            </div>
+                    <div
+                        className='zigzag-timeline__item'
+                        style={{
+                            padding: '1rem 1.5rem',
+                        }}
+                    >
+                        <div className='zigzag-timeline__milestone' />
+                        <div style={{ marginBottom: '1rem', width: '60%' }}><Rectangle /></div>
+                        <Block numberOfBlocks={20} />
+                    </div>
+                    <div
+                        className='zigzag-timeline__item'
+                        style={{
+                            padding: '1rem 1.5rem',
+                        }}
+                    >
+                        <div className='zigzag-timeline__milestone' />
+                        <div style={{ marginBottom: '1rem', width: '70%' }}><Rectangle /></div>
+                        <Block numberOfBlocks={15} />
+                    </div>
+                </div>
+            </BrowserFrame>
+
+            <RelatedPatterns patterns={[Pattern.Timeline]} />
         </DetailsLayout>
     );
 };
diff --git a/public/assets/1-loc.png b/public/assets/1-loc.png
index 9ef27e3..726fd77 100644
Binary files a/public/assets/1-loc.png and b/public/assets/1-loc.png differ
diff --git a/public/assets/blur-page.png b/public/assets/blur-page.png
index 351f1da..e6678a8 100644
Binary files a/public/assets/blur-page.png and b/public/assets/blur-page.png differ
diff --git a/public/assets/check-browsers-support.png b/public/assets/check-browsers-support.png
new file mode 100644
index 0000000..40eaa33
Binary files /dev/null and b/public/assets/check-browsers-support.png differ
diff --git a/public/assets/css-layout.png b/public/assets/css-layout.png
index db55d23..5c3c3a8 100644
Binary files a/public/assets/css-layout.png and b/public/assets/css-layout.png differ
diff --git a/public/assets/form-validation.png b/public/assets/form-validation.png
index 43d5551..f419d14 100644
Binary files a/public/assets/form-validation.png and b/public/assets/form-validation.png differ
diff --git a/public/assets/front-end-tips.png b/public/assets/front-end-tips.png
index 3868cca..2612a60 100644
Binary files a/public/assets/front-end-tips.png and b/public/assets/front-end-tips.png differ
diff --git a/public/assets/html-dom.png b/public/assets/html-dom.png
index e275755..b5e2fa4 100644
Binary files a/public/assets/html-dom.png and b/public/assets/html-dom.png differ
diff --git a/public/assets/logo.png b/public/assets/logo.png
index db55d23..5c3c3a8 100644
Binary files a/public/assets/logo.png and b/public/assets/logo.png differ
diff --git a/public/assets/react-pdf-viewer.png b/public/assets/react-pdf-viewer.png
index 678c006..7bf42c7 100644
Binary files a/public/assets/react-pdf-viewer.png and b/public/assets/react-pdf-viewer.png differ
diff --git a/public/assets/responsive-design-patterns.png b/public/assets/responsive-design-patterns.png
index c69dc3f..c5914b7 100644
Binary files a/public/assets/responsive-design-patterns.png and b/public/assets/responsive-design-patterns.png differ
diff --git a/public/assets/this-vs-that.png b/public/assets/this-vs-that.png
index 6aecd2d..a8b7a0c 100644
Binary files a/public/assets/this-vs-that.png and b/public/assets/this-vs-that.png differ