diff --git a/client/App.tsx b/client/App.tsx
index 0353de5..ac222c5 100644
--- a/client/App.tsx
+++ b/client/App.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { BrowserRouter as Router, Route, Switch as RouteSwitch } from 'react-router-dom';
 
diff --git a/client/components/CoverCard.tsx b/client/components/CoverCard.tsx
index 1c34fd5..53bedd0 100644
--- a/client/components/CoverCard.tsx
+++ b/client/components/CoverCard.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Link } from 'react-router-dom';
 
diff --git a/client/components/Heading.tsx b/client/components/Heading.tsx
index e728459..13eaa9f 100644
--- a/client/components/Heading.tsx
+++ b/client/components/Heading.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 interface HeadingProps {
diff --git a/client/components/RelatedPatterns.tsx b/client/components/RelatedPatterns.tsx
index 9dd4a0c..3c441a6 100644
--- a/client/components/RelatedPatterns.tsx
+++ b/client/components/RelatedPatterns.tsx
@@ -1,4 +1,9 @@
-import React, { useEffect } from 'react';
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+import React from 'react';
 
 import Pattern from '../constants/Pattern';
 import CoverCard from './CoverCard';
diff --git a/client/components/SampleCode.tsx b/client/components/SampleCode.tsx
index 8359734..a108a8d 100644
--- a/client/components/SampleCode.tsx
+++ b/client/components/SampleCode.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import highlight from '../helpers/highlight';
diff --git a/client/constants/Pattern.ts b/client/constants/Pattern.ts
index 7eecbd0..ff886ce 100644
--- a/client/constants/Pattern.ts
+++ b/client/constants/Pattern.ts
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 enum Pattern {
     Accordion = 'Accordion',
     Avatar = 'Avatar',
diff --git a/client/helpers/highlight.ts b/client/helpers/highlight.ts
index 96a2ff0..362a025 100755
--- a/client/helpers/highlight.ts
+++ b/client/helpers/highlight.ts
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import hljs from 'highlight.js/lib/highlight'; // tslint:disable-line
 import javascript from 'highlight.js/lib/languages/javascript'; // tslint:disable-line
 import html from 'highlight.js/lib/languages/xml'; // tslint:disable-line
diff --git a/client/helpers/random.ts b/client/helpers/random.ts
index cec9113..218a852 100644
--- a/client/helpers/random.ts
+++ b/client/helpers/random.ts
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 const random = (min: number, max: number) => min + Math.round(Math.random() * (max - min));
 
 export default random;
diff --git a/client/helpers/randomFromArray.ts b/client/helpers/randomFromArray.ts
index ca7ba73..6b162fd 100644
--- a/client/helpers/randomFromArray.ts
+++ b/client/helpers/randomFromArray.ts
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 const randomFromArray = (array: number[]) => array[Math.floor(Math.random() * array.length)];
 
 export default randomFromArray;
diff --git a/client/helpers/shuffe.ts b/client/helpers/shuffe.ts
index d87417d..5fcafe3 100644
--- a/client/helpers/shuffe.ts
+++ b/client/helpers/shuffe.ts
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 const shuffe = (array: number[]) => {
     array.sort(() => Math.random() - 0.5);
     return array;
diff --git a/client/helpers/slug.ts b/client/helpers/slug.ts
index bbbcfa3..5b71b1e 100644
--- a/client/helpers/slug.ts
+++ b/client/helpers/slug.ts
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 const slug = (item: string) => item.toLowerCase().split(' ').join('-');
 
 export default slug;
diff --git a/client/hooks/useDocumentTitle.ts b/client/hooks/useDocumentTitle.ts
index 00f730a..6d85055 100644
--- a/client/hooks/useDocumentTitle.ts
+++ b/client/hooks/useDocumentTitle.ts
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import { useEffect } from 'react';
 
 const useDocumentTitle = (title: string) => {
diff --git a/client/hooks/useInterval.ts b/client/hooks/useInterval.ts
index 05a93dc..3232a5e 100644
--- a/client/hooks/useInterval.ts
+++ b/client/hooks/useInterval.ts
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import { useEffect } from 'react';
 
 const useInterval = (callback: () => void, delay?: number) => {
diff --git a/client/index.css b/client/index.css
index 1185715..736186e 100644
--- a/client/index.css
+++ b/client/index.css
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 body {
     font-family: -apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif;
     -webkit-font-smoothing: antialiased;
diff --git a/client/index.tsx b/client/index.tsx
index 2d0fb8d..8dc57f6 100644
--- a/client/index.tsx
+++ b/client/index.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { hydrate, render } from 'react-dom';
 
diff --git a/client/layouts/DetailsLayout.tsx b/client/layouts/DetailsLayout.tsx
index 6ff5809..cbf30d0 100644
--- a/client/layouts/DetailsLayout.tsx
+++ b/client/layouts/DetailsLayout.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Link } from 'react-router-dom';
 
diff --git a/client/layouts/Footer.tsx b/client/layouts/Footer.tsx
index 250a83c..10e6d1e 100644
--- a/client/layouts/Footer.tsx
+++ b/client/layouts/Footer.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import SubscribeForm from './SubscribeForm';
diff --git a/client/layouts/Github.tsx b/client/layouts/Github.tsx
index 75c4293..933e237 100644
--- a/client/layouts/Github.tsx
+++ b/client/layouts/Github.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 const Github: React.FC<{}> = () => {
diff --git a/client/layouts/Layout.tsx b/client/layouts/Layout.tsx
index 52c19b8..7f6f145 100644
--- a/client/layouts/Layout.tsx
+++ b/client/layouts/Layout.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React, { useEffect } from 'react';
 
 import Footer from './Footer';
diff --git a/client/layouts/ProductHuntBadge.tsx b/client/layouts/ProductHuntBadge.tsx
index 173754f..662b604 100644
--- a/client/layouts/ProductHuntBadge.tsx
+++ b/client/layouts/ProductHuntBadge.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 const ProductHuntBadge: React.FC<{}> = () => {
diff --git a/client/layouts/SubscribeForm.tsx b/client/layouts/SubscribeForm.tsx
index 5ea6280..713c660 100644
--- a/client/layouts/SubscribeForm.tsx
+++ b/client/layouts/SubscribeForm.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 const SubscribeForm: React.FC<{}> = () => {
diff --git a/client/loaders/CoverLoader.tsx b/client/loaders/CoverLoader.tsx
index 9a50c25..b8949e4 100644
--- a/client/loaders/CoverLoader.tsx
+++ b/client/loaders/CoverLoader.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import loadable, { LoadableComponent } from '@loadable/component';
 
 import Pattern from '../constants/Pattern';
diff --git a/client/loaders/DetailsLoader.tsx b/client/loaders/DetailsLoader.tsx
index 2ad34c6..2c281f5 100644
--- a/client/loaders/DetailsLoader.tsx
+++ b/client/loaders/DetailsLoader.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import loadable, { LoadableComponent } from '@loadable/component';
 import React from 'react';
 
diff --git a/client/loaders/spinner.css b/client/loaders/spinner.css
index d733ee0..bf22435 100644
--- a/client/loaders/spinner.css
+++ b/client/loaders/spinner.css
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 .spinner {
     animation-duration: 750ms;
     animation-name: viewer-spinner-transform;
diff --git a/client/pages/ExplorePage.tsx b/client/pages/ExplorePage.tsx
index 35046ad..da9b4b1 100644
--- a/client/pages/ExplorePage.tsx
+++ b/client/pages/ExplorePage.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 import { Link } from 'react-router-dom';
diff --git a/client/pages/HomePage.tsx b/client/pages/HomePage.tsx
index d882dfe..1614eec 100644
--- a/client/pages/HomePage.tsx
+++ b/client/pages/HomePage.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 import { Link } from 'react-router-dom';
diff --git a/client/pages/MadeOf.tsx b/client/pages/MadeOf.tsx
index 92b5fd7..018d868 100644
--- a/client/pages/MadeOf.tsx
+++ b/client/pages/MadeOf.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import SampleCode from '../components/SampleCode';
diff --git a/client/pages/PatternPage.tsx b/client/pages/PatternPage.tsx
index 42d999f..1e25b86 100644
--- a/client/pages/PatternPage.tsx
+++ b/client/pages/PatternPage.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Pattern from '../constants/Pattern';
diff --git a/client/pages/home.css b/client/pages/home.css
index 1e64bcc..135eeae 100644
--- a/client/pages/home.css
+++ b/client/pages/home.css
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 .home-cards {
     animation: slide 40s linear infinite;
 }
diff --git a/client/patterns/accordion/Cover.tsx b/client/patterns/accordion/Cover.tsx
index 0128446..301108a 100644
--- a/client/patterns/accordion/Cover.tsx
+++ b/client/patterns/accordion/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/accordion/Details.tsx b/client/patterns/accordion/Details.tsx
index ecc91d3..4c3fe9c 100644
--- a/client/patterns/accordion/Details.tsx
+++ b/client/patterns/accordion/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React, { useState } from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/avatar-list/Cover.tsx b/client/patterns/avatar-list/Cover.tsx
index 3bbd3f4..d5df4fd 100644
--- a/client/patterns/avatar-list/Cover.tsx
+++ b/client/patterns/avatar-list/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/avatar-list/Details.tsx b/client/patterns/avatar-list/Details.tsx
index 78a9faa..463aa3a 100644
--- a/client/patterns/avatar-list/Details.tsx
+++ b/client/patterns/avatar-list/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/avatar/Cover.tsx b/client/patterns/avatar/Cover.tsx
index b030bcf..a8d72f7 100644
--- a/client/patterns/avatar/Cover.tsx
+++ b/client/patterns/avatar/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/avatar/Details.tsx b/client/patterns/avatar/Details.tsx
index dff9624..6fb62a3 100644
--- a/client/patterns/avatar/Details.tsx
+++ b/client/patterns/avatar/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/badge/Cover.tsx b/client/patterns/badge/Cover.tsx
index 64db5c7..ae42b08 100644
--- a/client/patterns/badge/Cover.tsx
+++ b/client/patterns/badge/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/badge/Details.tsx b/client/patterns/badge/Details.tsx
index 26044d7..4d2fc03 100644
--- a/client/patterns/badge/Details.tsx
+++ b/client/patterns/badge/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/breadcrumb/Cover.tsx b/client/patterns/breadcrumb/Cover.tsx
index 6fd574b..8cd0fe4 100644
--- a/client/patterns/breadcrumb/Cover.tsx
+++ b/client/patterns/breadcrumb/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/breadcrumb/Details.tsx b/client/patterns/breadcrumb/Details.tsx
index c1ce2f2..b044172 100644
--- a/client/patterns/breadcrumb/Details.tsx
+++ b/client/patterns/breadcrumb/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/button-with-icon/Cover.tsx b/client/patterns/button-with-icon/Cover.tsx
index e20587c..49f9308 100644
--- a/client/patterns/button-with-icon/Cover.tsx
+++ b/client/patterns/button-with-icon/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Circle from '../../placeholders/Circle';
diff --git a/client/patterns/button-with-icon/Details.tsx b/client/patterns/button-with-icon/Details.tsx
index 01abac7..a529cb9 100644
--- a/client/patterns/button-with-icon/Details.tsx
+++ b/client/patterns/button-with-icon/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/card-layout/Cover.tsx b/client/patterns/card-layout/Cover.tsx
index b3ddc35..d677878 100644
--- a/client/patterns/card-layout/Cover.tsx
+++ b/client/patterns/card-layout/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/card-layout/Details.tsx b/client/patterns/card-layout/Details.tsx
index b2268bc..d16af89 100644
--- a/client/patterns/card-layout/Details.tsx
+++ b/client/patterns/card-layout/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/card/Cover.tsx b/client/patterns/card/Cover.tsx
index d925c4d..5b7ac49 100644
--- a/client/patterns/card/Cover.tsx
+++ b/client/patterns/card/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/card/Details.tsx b/client/patterns/card/Details.tsx
index a724cda..023ed85 100644
--- a/client/patterns/card/Details.tsx
+++ b/client/patterns/card/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/centering/Cover.tsx b/client/patterns/centering/Cover.tsx
index 433de0d..b72fb6b 100644
--- a/client/patterns/centering/Cover.tsx
+++ b/client/patterns/centering/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Circle from '../../placeholders/Circle';
diff --git a/client/patterns/centering/Details.tsx b/client/patterns/centering/Details.tsx
index 16095ba..5db8fd5 100644
--- a/client/patterns/centering/Details.tsx
+++ b/client/patterns/centering/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/chip/Cover.tsx b/client/patterns/chip/Cover.tsx
index 0472c28..5893dc5 100644
--- a/client/patterns/chip/Cover.tsx
+++ b/client/patterns/chip/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/chip/Details.tsx b/client/patterns/chip/Details.tsx
index ab13eed..c8ed8fa 100644
--- a/client/patterns/chip/Details.tsx
+++ b/client/patterns/chip/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 import { Link } from 'react-router-dom';
diff --git a/client/patterns/chip/InputChip.tsx b/client/patterns/chip/InputChip.tsx
index 853bf69..9e1568b 100644
--- a/client/patterns/chip/InputChip.tsx
+++ b/client/patterns/chip/InputChip.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 const InputChip: React.FC<{}> = ({ children }) => {
diff --git a/client/patterns/circular-navigation/Cover.tsx b/client/patterns/circular-navigation/Cover.tsx
index f54f869..a51b9cd 100644
--- a/client/patterns/circular-navigation/Cover.tsx
+++ b/client/patterns/circular-navigation/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/circular-navigation/Details.tsx b/client/patterns/circular-navigation/Details.tsx
index 0e5b4ad..258aec5 100644
--- a/client/patterns/circular-navigation/Details.tsx
+++ b/client/patterns/circular-navigation/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/close-button/Cover.tsx b/client/patterns/close-button/Cover.tsx
index b78072b..8ee2851 100644
--- a/client/patterns/close-button/Cover.tsx
+++ b/client/patterns/close-button/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/close-button/Details.tsx b/client/patterns/close-button/Details.tsx
index 563cc56..52176c9 100644
--- a/client/patterns/close-button/Details.tsx
+++ b/client/patterns/close-button/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/cookie-banner/Cover.tsx b/client/patterns/cookie-banner/Cover.tsx
index dd7993a..df51b4f 100644
--- a/client/patterns/cookie-banner/Cover.tsx
+++ b/client/patterns/cookie-banner/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/cookie-banner/Details.tsx b/client/patterns/cookie-banner/Details.tsx
index 3d75fba..c9e410a 100644
--- a/client/patterns/cookie-banner/Details.tsx
+++ b/client/patterns/cookie-banner/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/corner-ribbon/Cover.tsx b/client/patterns/corner-ribbon/Cover.tsx
index 3f6f3ba..391b281 100644
--- a/client/patterns/corner-ribbon/Cover.tsx
+++ b/client/patterns/corner-ribbon/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/corner-ribbon/Details.tsx b/client/patterns/corner-ribbon/Details.tsx
index 2b73342..872a9fa 100644
--- a/client/patterns/corner-ribbon/Details.tsx
+++ b/client/patterns/corner-ribbon/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 import { Link } from 'react-router-dom';
diff --git a/client/patterns/custom-checkbox-button/Cover.tsx b/client/patterns/custom-checkbox-button/Cover.tsx
index 0b3a5f6..85d2a0d 100644
--- a/client/patterns/custom-checkbox-button/Cover.tsx
+++ b/client/patterns/custom-checkbox-button/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/custom-checkbox-button/Details.tsx b/client/patterns/custom-checkbox-button/Details.tsx
index dac6876..ec60387 100644
--- a/client/patterns/custom-checkbox-button/Details.tsx
+++ b/client/patterns/custom-checkbox-button/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React, { useState } from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/custom-radio-button/Cover.tsx b/client/patterns/custom-radio-button/Cover.tsx
index 891af70..dd99177 100644
--- a/client/patterns/custom-radio-button/Cover.tsx
+++ b/client/patterns/custom-radio-button/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Circle from '../../placeholders/Circle';
diff --git a/client/patterns/custom-radio-button/Details.tsx b/client/patterns/custom-radio-button/Details.tsx
index 8fca33e..4b7d33e 100644
--- a/client/patterns/custom-radio-button/Details.tsx
+++ b/client/patterns/custom-radio-button/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React, { useState } from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/diagonal-section/Cover.tsx b/client/patterns/diagonal-section/Cover.tsx
index d8807df..a810fa3 100644
--- a/client/patterns/diagonal-section/Cover.tsx
+++ b/client/patterns/diagonal-section/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/diagonal-section/Details.tsx b/client/patterns/diagonal-section/Details.tsx
index dd695f6..4851965 100644
--- a/client/patterns/diagonal-section/Details.tsx
+++ b/client/patterns/diagonal-section/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/docked-at-corner/Cover.tsx b/client/patterns/docked-at-corner/Cover.tsx
index 9e59f2e..79d15c2 100644
--- a/client/patterns/docked-at-corner/Cover.tsx
+++ b/client/patterns/docked-at-corner/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/docked-at-corner/Details.tsx b/client/patterns/docked-at-corner/Details.tsx
index 48b9db0..fe15c08 100644
--- a/client/patterns/docked-at-corner/Details.tsx
+++ b/client/patterns/docked-at-corner/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/dot-leader/Cover.tsx b/client/patterns/dot-leader/Cover.tsx
index 18048d7..c0d8f37 100644
--- a/client/patterns/dot-leader/Cover.tsx
+++ b/client/patterns/dot-leader/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Circle from '../../placeholders/Circle';
diff --git a/client/patterns/dot-leader/Details.tsx b/client/patterns/dot-leader/Details.tsx
index 3cc1cbb..7726a70 100644
--- a/client/patterns/dot-leader/Details.tsx
+++ b/client/patterns/dot-leader/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/dot-navigation/Cover.tsx b/client/patterns/dot-navigation/Cover.tsx
index 51e6591..75d38e2 100644
--- a/client/patterns/dot-navigation/Cover.tsx
+++ b/client/patterns/dot-navigation/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/dot-navigation/Details.tsx b/client/patterns/dot-navigation/Details.tsx
index 9edba0e..076e03e 100644
--- a/client/patterns/dot-navigation/Details.tsx
+++ b/client/patterns/dot-navigation/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React, { useState } from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/drawer/Cover.tsx b/client/patterns/drawer/Cover.tsx
index ecc4295..ea4ed41 100644
--- a/client/patterns/drawer/Cover.tsx
+++ b/client/patterns/drawer/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/drawer/Details.tsx b/client/patterns/drawer/Details.tsx
index f0dfe25..4827e6a 100644
--- a/client/patterns/drawer/Details.tsx
+++ b/client/patterns/drawer/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/drop-area/Cover.tsx b/client/patterns/drop-area/Cover.tsx
index 7575374..e88db4e 100644
--- a/client/patterns/drop-area/Cover.tsx
+++ b/client/patterns/drop-area/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/drop-area/Details.tsx b/client/patterns/drop-area/Details.tsx
index 810b553..2dd135e 100644
--- a/client/patterns/drop-area/Details.tsx
+++ b/client/patterns/drop-area/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/drop-cap/Cover.tsx b/client/patterns/drop-cap/Cover.tsx
index 533ea47..f67ce66 100644
--- a/client/patterns/drop-cap/Cover.tsx
+++ b/client/patterns/drop-cap/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Circle from '../../placeholders/Circle';
diff --git a/client/patterns/drop-cap/Details.tsx b/client/patterns/drop-cap/Details.tsx
index 3bbb1a0..cd24c9e 100644
--- a/client/patterns/drop-cap/Details.tsx
+++ b/client/patterns/drop-cap/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/drop-cap/dropcap.css b/client/patterns/drop-cap/dropcap.css
index 8959409..5f689d4 100644
--- a/client/patterns/drop-cap/dropcap.css
+++ b/client/patterns/drop-cap/dropcap.css
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 .p-drop-cap:first-letter {
     border: 2px solid rgba(0, 0, 0, 0.3);
     float: left;
diff --git a/client/patterns/dropdown/Cover.tsx b/client/patterns/dropdown/Cover.tsx
index e45d4a4..7054a43 100644
--- a/client/patterns/dropdown/Cover.tsx
+++ b/client/patterns/dropdown/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/dropdown/Details.tsx b/client/patterns/dropdown/Details.tsx
index af4f9c7..6533210 100644
--- a/client/patterns/dropdown/Details.tsx
+++ b/client/patterns/dropdown/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/dropdown/dropdown.css b/client/patterns/dropdown/dropdown.css
index 955fb6d..4443a57 100644
--- a/client/patterns/dropdown/dropdown.css
+++ b/client/patterns/dropdown/dropdown.css
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 .p-dropdown-content {
     display: none;
 }
diff --git a/client/patterns/feature-comparison/Cover.tsx b/client/patterns/feature-comparison/Cover.tsx
index 7a32afb..3c31b55 100644
--- a/client/patterns/feature-comparison/Cover.tsx
+++ b/client/patterns/feature-comparison/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Circle from '../../placeholders/Circle';
diff --git a/client/patterns/feature-comparison/Details.tsx b/client/patterns/feature-comparison/Details.tsx
index 23fcdd7..a5107eb 100644
--- a/client/patterns/feature-comparison/Details.tsx
+++ b/client/patterns/feature-comparison/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/feature-list/Cover.tsx b/client/patterns/feature-list/Cover.tsx
index 65ecc08..0ea2742 100644
--- a/client/patterns/feature-list/Cover.tsx
+++ b/client/patterns/feature-list/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Circle from '../../placeholders/Circle';
diff --git a/client/patterns/feature-list/Details.tsx b/client/patterns/feature-list/Details.tsx
index 03c5ae5..284b089 100644
--- a/client/patterns/feature-list/Details.tsx
+++ b/client/patterns/feature-list/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/fixed-at-corner/Cover.tsx b/client/patterns/fixed-at-corner/Cover.tsx
index 90c0897..ced9062 100644
--- a/client/patterns/fixed-at-corner/Cover.tsx
+++ b/client/patterns/fixed-at-corner/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/fixed-at-corner/Details.tsx b/client/patterns/fixed-at-corner/Details.tsx
index 1e7dda5..488c73e 100644
--- a/client/patterns/fixed-at-corner/Details.tsx
+++ b/client/patterns/fixed-at-corner/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/fixed-at-side/Cover.tsx b/client/patterns/fixed-at-side/Cover.tsx
index 7377c5e..a11c84a 100644
--- a/client/patterns/fixed-at-side/Cover.tsx
+++ b/client/patterns/fixed-at-side/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/fixed-at-side/Details.tsx b/client/patterns/fixed-at-side/Details.tsx
index 03be3db..6f4765c 100644
--- a/client/patterns/fixed-at-side/Details.tsx
+++ b/client/patterns/fixed-at-side/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/floating-label/Cover.tsx b/client/patterns/floating-label/Cover.tsx
index 4fbb19d..19485c8 100644
--- a/client/patterns/floating-label/Cover.tsx
+++ b/client/patterns/floating-label/Cover.tsx
@@ -1,7 +1,11 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Frame from '../../placeholders/Frame';
-import Rectangle from '../../placeholders/Rectangle';
 
 const Cover: React.FC<{}> = () => {
     return (
diff --git a/client/patterns/floating-label/Details.tsx b/client/patterns/floating-label/Details.tsx
index d3710ce..d49ad91 100644
--- a/client/patterns/floating-label/Details.tsx
+++ b/client/patterns/floating-label/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/floating-label/floating-label.css b/client/patterns/floating-label/floating-label.css
index 90355e8..cd39dc1 100644
--- a/client/patterns/floating-label/floating-label.css
+++ b/client/patterns/floating-label/floating-label.css
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 .p-floating-container label {
     opacity: 0;
 }
diff --git a/client/patterns/full-screen-menu/Cover.tsx b/client/patterns/full-screen-menu/Cover.tsx
index bde38cd..9dbf529 100644
--- a/client/patterns/full-screen-menu/Cover.tsx
+++ b/client/patterns/full-screen-menu/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/full-screen-menu/Details.tsx b/client/patterns/full-screen-menu/Details.tsx
index 791bc26..a70794f 100644
--- a/client/patterns/full-screen-menu/Details.tsx
+++ b/client/patterns/full-screen-menu/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/holy-grail/Cover.tsx b/client/patterns/holy-grail/Cover.tsx
index 2a572a4..4322794 100644
--- a/client/patterns/holy-grail/Cover.tsx
+++ b/client/patterns/holy-grail/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/holy-grail/Details.tsx b/client/patterns/holy-grail/Details.tsx
index d430295..c4ac192 100644
--- a/client/patterns/holy-grail/Details.tsx
+++ b/client/patterns/holy-grail/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/initial-avatar/Cover.tsx b/client/patterns/initial-avatar/Cover.tsx
index c78dafe..89dadf9 100644
--- a/client/patterns/initial-avatar/Cover.tsx
+++ b/client/patterns/initial-avatar/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/initial-avatar/Details.tsx b/client/patterns/initial-avatar/Details.tsx
index 4fb3541..fb856d7 100644
--- a/client/patterns/initial-avatar/Details.tsx
+++ b/client/patterns/initial-avatar/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 import { Link } from 'react-router-dom';
diff --git a/client/patterns/input-addon/Cover.tsx b/client/patterns/input-addon/Cover.tsx
index d86e1b4..458ca36 100644
--- a/client/patterns/input-addon/Cover.tsx
+++ b/client/patterns/input-addon/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/input-addon/Details.tsx b/client/patterns/input-addon/Details.tsx
index 7ede896..ace7778 100644
--- a/client/patterns/input-addon/Details.tsx
+++ b/client/patterns/input-addon/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/keyboard-shortcut/Cover.tsx b/client/patterns/keyboard-shortcut/Cover.tsx
index 1835f8d..bf7f1f4 100644
--- a/client/patterns/keyboard-shortcut/Cover.tsx
+++ b/client/patterns/keyboard-shortcut/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/keyboard-shortcut/Details.tsx b/client/patterns/keyboard-shortcut/Details.tsx
index 33f76fe..b88f5b0 100644
--- a/client/patterns/keyboard-shortcut/Details.tsx
+++ b/client/patterns/keyboard-shortcut/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 import { Link } from 'react-router-dom';
diff --git a/client/patterns/media-object/Cover.tsx b/client/patterns/media-object/Cover.tsx
index 71b27c2..76aebd8 100644
--- a/client/patterns/media-object/Cover.tsx
+++ b/client/patterns/media-object/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/media-object/Details.tsx b/client/patterns/media-object/Details.tsx
index 52ee04e..e820ec7 100644
--- a/client/patterns/media-object/Details.tsx
+++ b/client/patterns/media-object/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/mega-menu/Cover.tsx b/client/patterns/mega-menu/Cover.tsx
index a7921d2..7407c31 100644
--- a/client/patterns/mega-menu/Cover.tsx
+++ b/client/patterns/mega-menu/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Circle from '../../placeholders/Circle';
diff --git a/client/patterns/mega-menu/Details.tsx b/client/patterns/mega-menu/Details.tsx
index cf1e214..fccf1b8 100644
--- a/client/patterns/mega-menu/Details.tsx
+++ b/client/patterns/mega-menu/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/mega-menu/megaMenu.css b/client/patterns/mega-menu/megaMenu.css
index 2d92c98..72ff91a 100644
--- a/client/patterns/mega-menu/megaMenu.css
+++ b/client/patterns/mega-menu/megaMenu.css
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 .p-mega-menu-container {
     position: relative;
 }
@@ -14,4 +19,4 @@
 }
 .p-mega-menu-trigger:hover .p-mega-menu-content {
     display: block;
-}
\ No newline at end of file
+}
diff --git a/client/patterns/menu/Cover.tsx b/client/patterns/menu/Cover.tsx
index 66c6c17..e42c0e7 100644
--- a/client/patterns/menu/Cover.tsx
+++ b/client/patterns/menu/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/menu/Details.tsx b/client/patterns/menu/Details.tsx
index 48efca3..8969de8 100644
--- a/client/patterns/menu/Details.tsx
+++ b/client/patterns/menu/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/menu/menu.css b/client/patterns/menu/menu.css
index 188aa84..f48bb9e 100644
--- a/client/patterns/menu/menu.css
+++ b/client/patterns/menu/menu.css
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 .p-menu-item:hover {
     background-color: rgba(0, 0, 0, 0.1);
 }
diff --git a/client/patterns/modal/Cover.tsx b/client/patterns/modal/Cover.tsx
index ec3346e..72df326 100644
--- a/client/patterns/modal/Cover.tsx
+++ b/client/patterns/modal/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/modal/Details.tsx b/client/patterns/modal/Details.tsx
index 8bc1553..b171b9c 100644
--- a/client/patterns/modal/Details.tsx
+++ b/client/patterns/modal/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 import { Link } from 'react-router-dom';
diff --git a/client/patterns/notification/Cover.tsx b/client/patterns/notification/Cover.tsx
index e85ef45..07f25b4 100644
--- a/client/patterns/notification/Cover.tsx
+++ b/client/patterns/notification/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/notification/Details.tsx b/client/patterns/notification/Details.tsx
index f321cab..1cac74c 100644
--- a/client/patterns/notification/Details.tsx
+++ b/client/patterns/notification/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 import { Link } from 'react-router-dom';
diff --git a/client/patterns/overlay-play-button/Cover.tsx b/client/patterns/overlay-play-button/Cover.tsx
index 42ee316..4be0377 100644
--- a/client/patterns/overlay-play-button/Cover.tsx
+++ b/client/patterns/overlay-play-button/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/overlay-play-button/Details.tsx b/client/patterns/overlay-play-button/Details.tsx
index 3d4e0b0..6443d32 100644
--- a/client/patterns/overlay-play-button/Details.tsx
+++ b/client/patterns/overlay-play-button/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/pagination/Cover.tsx b/client/patterns/pagination/Cover.tsx
index a100560..717fef6 100644
--- a/client/patterns/pagination/Cover.tsx
+++ b/client/patterns/pagination/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Circle from '../../placeholders/Circle';
diff --git a/client/patterns/pagination/Details.tsx b/client/patterns/pagination/Details.tsx
index 9c9e903..5443b72 100644
--- a/client/patterns/pagination/Details.tsx
+++ b/client/patterns/pagination/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/popover-arrow/Cover.tsx b/client/patterns/popover-arrow/Cover.tsx
index 49370a6..47dade7 100644
--- a/client/patterns/popover-arrow/Cover.tsx
+++ b/client/patterns/popover-arrow/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/popover-arrow/Details.tsx b/client/patterns/popover-arrow/Details.tsx
index cae3762..249ef95 100644
--- a/client/patterns/popover-arrow/Details.tsx
+++ b/client/patterns/popover-arrow/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/presence-indicator/Cover.tsx b/client/patterns/presence-indicator/Cover.tsx
index 7d58164..779e967 100644
--- a/client/patterns/presence-indicator/Cover.tsx
+++ b/client/patterns/presence-indicator/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/presence-indicator/Details.tsx b/client/patterns/presence-indicator/Details.tsx
index a5f61d6..b6965a2 100644
--- a/client/patterns/presence-indicator/Details.tsx
+++ b/client/patterns/presence-indicator/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/previous-next-buttons/Cover.tsx b/client/patterns/previous-next-buttons/Cover.tsx
index 1e6f2a1..c1ce896 100644
--- a/client/patterns/previous-next-buttons/Cover.tsx
+++ b/client/patterns/previous-next-buttons/Cover.tsx
@@ -1,7 +1,11 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Frame from '../../placeholders/Frame';
-import Rectangle from '../../placeholders/Rectangle';
 
 const Cover: React.FC<{}> = () => {
     return (
diff --git a/client/patterns/previous-next-buttons/Details.tsx b/client/patterns/previous-next-buttons/Details.tsx
index 20969b2..9fcb743 100644
--- a/client/patterns/previous-next-buttons/Details.tsx
+++ b/client/patterns/previous-next-buttons/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/pricing-table/Cover.tsx b/client/patterns/pricing-table/Cover.tsx
index eaae12c..271c9e4 100644
--- a/client/patterns/pricing-table/Cover.tsx
+++ b/client/patterns/pricing-table/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Circle from '../../placeholders/Circle';
diff --git a/client/patterns/pricing-table/Details.tsx b/client/patterns/pricing-table/Details.tsx
index 142ed06..870544f 100644
--- a/client/patterns/pricing-table/Details.tsx
+++ b/client/patterns/pricing-table/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 import { Link } from 'react-router-dom';
diff --git a/client/patterns/progress-bar/Cover.tsx b/client/patterns/progress-bar/Cover.tsx
index 73b8317..aee8396 100644
--- a/client/patterns/progress-bar/Cover.tsx
+++ b/client/patterns/progress-bar/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/progress-bar/Details.tsx b/client/patterns/progress-bar/Details.tsx
index 44eb0bd..9382e3a 100644
--- a/client/patterns/progress-bar/Details.tsx
+++ b/client/patterns/progress-bar/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React, { useState } from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/property-list/Cover.tsx b/client/patterns/property-list/Cover.tsx
index ad1f6d3..bde49fd 100644
--- a/client/patterns/property-list/Cover.tsx
+++ b/client/patterns/property-list/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Circle from '../../placeholders/Circle';
diff --git a/client/patterns/property-list/Details.tsx b/client/patterns/property-list/Details.tsx
index b9dd46b..3306ef2 100644
--- a/client/patterns/property-list/Details.tsx
+++ b/client/patterns/property-list/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/questions-and-answers/Cover.tsx b/client/patterns/questions-and-answers/Cover.tsx
index 96e63ff..44bf76a 100644
--- a/client/patterns/questions-and-answers/Cover.tsx
+++ b/client/patterns/questions-and-answers/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/questions-and-answers/Details.tsx b/client/patterns/questions-and-answers/Details.tsx
index 5e2c0b3..49cdc43 100644
--- a/client/patterns/questions-and-answers/Details.tsx
+++ b/client/patterns/questions-and-answers/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React, { useState } from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/radial-progress-bar/Cover.tsx b/client/patterns/radial-progress-bar/Cover.tsx
index d272c86..931275c 100644
--- a/client/patterns/radial-progress-bar/Cover.tsx
+++ b/client/patterns/radial-progress-bar/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/radial-progress-bar/Details.tsx b/client/patterns/radial-progress-bar/Details.tsx
index a158658..becebcc 100644
--- a/client/patterns/radial-progress-bar/Details.tsx
+++ b/client/patterns/radial-progress-bar/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/radio-button-group/Cover.tsx b/client/patterns/radio-button-group/Cover.tsx
index 8660209..358ac92 100644
--- a/client/patterns/radio-button-group/Cover.tsx
+++ b/client/patterns/radio-button-group/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/radio-button-group/Details.tsx b/client/patterns/radio-button-group/Details.tsx
index dc78139..78b2389 100644
--- a/client/patterns/radio-button-group/Details.tsx
+++ b/client/patterns/radio-button-group/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React, { useState } from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/radio-button-group/radioButtonGroup.css b/client/patterns/radio-button-group/radioButtonGroup.css
index 3fa170b..7d50d19 100644
--- a/client/patterns/radio-button-group/radioButtonGroup.css
+++ b/client/patterns/radio-button-group/radioButtonGroup.css
@@ -1,6 +1,11 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 .p-radio-button-group label {
     border-right: 1px solid rgba(0, 0, 0, 0.3);
 }
 .p-radio-button-group label:last-child {
     border-right-color: transparent;
-}
\ No newline at end of file
+}
diff --git a/client/patterns/radio-switch/Cover.tsx b/client/patterns/radio-switch/Cover.tsx
index 7d600e6..1cef0a9 100644
--- a/client/patterns/radio-switch/Cover.tsx
+++ b/client/patterns/radio-switch/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/radio-switch/Details.tsx b/client/patterns/radio-switch/Details.tsx
index 8c4ecbf..bd8e832 100644
--- a/client/patterns/radio-switch/Details.tsx
+++ b/client/patterns/radio-switch/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React, { useState } from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/rating/Cover.tsx b/client/patterns/rating/Cover.tsx
index d25d967..335149b 100644
--- a/client/patterns/rating/Cover.tsx
+++ b/client/patterns/rating/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/rating/Details.tsx b/client/patterns/rating/Details.tsx
index 9eee712..0addd21 100644
--- a/client/patterns/rating/Details.tsx
+++ b/client/patterns/rating/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/rating/Star.tsx b/client/patterns/rating/Star.tsx
index 9e97923..af33510 100644
--- a/client/patterns/rating/Star.tsx
+++ b/client/patterns/rating/Star.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import './star.css';
diff --git a/client/patterns/rating/star.css b/client/patterns/rating/star.css
index 049148d..155a26c 100644
--- a/client/patterns/rating/star.css
+++ b/client/patterns/rating/star.css
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 .p-rating {
     align-items: center;
     display: flex;
diff --git a/client/patterns/resizable-element/Cover.tsx b/client/patterns/resizable-element/Cover.tsx
index 05f9d44..436ce61 100644
--- a/client/patterns/resizable-element/Cover.tsx
+++ b/client/patterns/resizable-element/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/resizable-element/Details.tsx b/client/patterns/resizable-element/Details.tsx
index 481ac87..5099b59 100644
--- a/client/patterns/resizable-element/Details.tsx
+++ b/client/patterns/resizable-element/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/ribbon/Cover.tsx b/client/patterns/ribbon/Cover.tsx
index f377925..aec1bce 100644
--- a/client/patterns/ribbon/Cover.tsx
+++ b/client/patterns/ribbon/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/ribbon/Details.tsx b/client/patterns/ribbon/Details.tsx
index 354ec53..bcab4f5 100644
--- a/client/patterns/ribbon/Details.tsx
+++ b/client/patterns/ribbon/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/same-height-columns/Cover.tsx b/client/patterns/same-height-columns/Cover.tsx
index fd3016c..bf24bb0 100644
--- a/client/patterns/same-height-columns/Cover.tsx
+++ b/client/patterns/same-height-columns/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/same-height-columns/Details.tsx b/client/patterns/same-height-columns/Details.tsx
index 00aed9a..5286710 100644
--- a/client/patterns/same-height-columns/Details.tsx
+++ b/client/patterns/same-height-columns/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/search-box/Cover.tsx b/client/patterns/search-box/Cover.tsx
index 8404852..06fb173 100644
--- a/client/patterns/search-box/Cover.tsx
+++ b/client/patterns/search-box/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Circle from '../../placeholders/Circle';
diff --git a/client/patterns/search-box/Details.tsx b/client/patterns/search-box/Details.tsx
index f0efe6d..413cc10 100644
--- a/client/patterns/search-box/Details.tsx
+++ b/client/patterns/search-box/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/separator/Cover.tsx b/client/patterns/separator/Cover.tsx
index 66279b1..3417149 100644
--- a/client/patterns/separator/Cover.tsx
+++ b/client/patterns/separator/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/separator/Details.tsx b/client/patterns/separator/Details.tsx
index b9a50fb..02b5374 100644
--- a/client/patterns/separator/Details.tsx
+++ b/client/patterns/separator/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/sidebar/Cover.tsx b/client/patterns/sidebar/Cover.tsx
index 54bb0de..ff9232c 100644
--- a/client/patterns/sidebar/Cover.tsx
+++ b/client/patterns/sidebar/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/sidebar/Details.tsx b/client/patterns/sidebar/Details.tsx
index 9921966..dd8dc1e 100644
--- a/client/patterns/sidebar/Details.tsx
+++ b/client/patterns/sidebar/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/simple-grid/Cover.tsx b/client/patterns/simple-grid/Cover.tsx
index f8ffaf2..6e2ed63 100644
--- a/client/patterns/simple-grid/Cover.tsx
+++ b/client/patterns/simple-grid/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/simple-grid/Details.tsx b/client/patterns/simple-grid/Details.tsx
index 82dabca..a042a46 100644
--- a/client/patterns/simple-grid/Details.tsx
+++ b/client/patterns/simple-grid/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/slider/Cover.tsx b/client/patterns/slider/Cover.tsx
index 332987d..c89ad37 100644
--- a/client/patterns/slider/Cover.tsx
+++ b/client/patterns/slider/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Circle from '../../placeholders/Circle';
diff --git a/client/patterns/slider/Details.tsx b/client/patterns/slider/Details.tsx
index 6cfa552..92a7d04 100644
--- a/client/patterns/slider/Details.tsx
+++ b/client/patterns/slider/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/spin-button/Cover.tsx b/client/patterns/spin-button/Cover.tsx
index d269bd3..6f015f4 100644
--- a/client/patterns/spin-button/Cover.tsx
+++ b/client/patterns/spin-button/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/spin-button/Details.tsx b/client/patterns/spin-button/Details.tsx
index 292173a..38118ef 100644
--- a/client/patterns/spin-button/Details.tsx
+++ b/client/patterns/spin-button/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React, { useState } from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/split-navigation/Cover.tsx b/client/patterns/split-navigation/Cover.tsx
index 3bc94e7..bbdffc1 100644
--- a/client/patterns/split-navigation/Cover.tsx
+++ b/client/patterns/split-navigation/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/split-navigation/Details.tsx b/client/patterns/split-navigation/Details.tsx
index a2359d0..abec443 100644
--- a/client/patterns/split-navigation/Details.tsx
+++ b/client/patterns/split-navigation/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/split-screen/Cover.tsx b/client/patterns/split-screen/Cover.tsx
index b9ddb53..9e5eced 100644
--- a/client/patterns/split-screen/Cover.tsx
+++ b/client/patterns/split-screen/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Circle from '../../placeholders/Circle';
diff --git a/client/patterns/split-screen/Details.tsx b/client/patterns/split-screen/Details.tsx
index da3fa74..ee892e3 100644
--- a/client/patterns/split-screen/Details.tsx
+++ b/client/patterns/split-screen/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/stacked-cards/Cover.tsx b/client/patterns/stacked-cards/Cover.tsx
index 374e3a0..ce58a97 100644
--- a/client/patterns/stacked-cards/Cover.tsx
+++ b/client/patterns/stacked-cards/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/stacked-cards/Details.tsx b/client/patterns/stacked-cards/Details.tsx
index d60044e..3c05937 100644
--- a/client/patterns/stacked-cards/Details.tsx
+++ b/client/patterns/stacked-cards/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/stepper-input/Cover.tsx b/client/patterns/stepper-input/Cover.tsx
index 717c01b..c2cdb5a 100644
--- a/client/patterns/stepper-input/Cover.tsx
+++ b/client/patterns/stepper-input/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/stepper-input/Details.tsx b/client/patterns/stepper-input/Details.tsx
index ad51a09..5cbb7d8 100644
--- a/client/patterns/stepper-input/Details.tsx
+++ b/client/patterns/stepper-input/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React, { useState } from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/sticky-footer/Cover.tsx b/client/patterns/sticky-footer/Cover.tsx
index 91ece32..e2e48f8 100644
--- a/client/patterns/sticky-footer/Cover.tsx
+++ b/client/patterns/sticky-footer/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/sticky-footer/Details.tsx b/client/patterns/sticky-footer/Details.tsx
index 291e4be..5b5c7fd 100644
--- a/client/patterns/sticky-footer/Details.tsx
+++ b/client/patterns/sticky-footer/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/sticky-header/Cover.tsx b/client/patterns/sticky-header/Cover.tsx
index 03e38b8..ce968b5 100644
--- a/client/patterns/sticky-header/Cover.tsx
+++ b/client/patterns/sticky-header/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/sticky-header/Details.tsx b/client/patterns/sticky-header/Details.tsx
index 6ea9e96..093ba25 100644
--- a/client/patterns/sticky-header/Details.tsx
+++ b/client/patterns/sticky-header/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/sticky-sections/Cover.tsx b/client/patterns/sticky-sections/Cover.tsx
index ee5148d..c773d7e 100644
--- a/client/patterns/sticky-sections/Cover.tsx
+++ b/client/patterns/sticky-sections/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/sticky-sections/Details.tsx b/client/patterns/sticky-sections/Details.tsx
index 5c4b80a..32f2371 100644
--- a/client/patterns/sticky-sections/Details.tsx
+++ b/client/patterns/sticky-sections/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/sticky-table-column/Cover.tsx b/client/patterns/sticky-table-column/Cover.tsx
index cb55f08..82fc8db 100644
--- a/client/patterns/sticky-table-column/Cover.tsx
+++ b/client/patterns/sticky-table-column/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/sticky-table-column/Details.tsx b/client/patterns/sticky-table-column/Details.tsx
index de6f2ea..a4349b5 100644
--- a/client/patterns/sticky-table-column/Details.tsx
+++ b/client/patterns/sticky-table-column/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 // tslint:disable:prefer-object-spread
 import React from 'react';
 import { Helmet } from 'react-helmet';
diff --git a/client/patterns/sticky-table-headers/Cover.tsx b/client/patterns/sticky-table-headers/Cover.tsx
index 00c0c9b..f7ec6ac 100644
--- a/client/patterns/sticky-table-headers/Cover.tsx
+++ b/client/patterns/sticky-table-headers/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/sticky-table-headers/Details.tsx b/client/patterns/sticky-table-headers/Details.tsx
index 2443049..6cf83e1 100644
--- a/client/patterns/sticky-table-headers/Details.tsx
+++ b/client/patterns/sticky-table-headers/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/switch/Cover.tsx b/client/patterns/switch/Cover.tsx
index ff56a4f..1d37211 100644
--- a/client/patterns/switch/Cover.tsx
+++ b/client/patterns/switch/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/switch/Details.tsx b/client/patterns/switch/Details.tsx
index 04a357d..1ec7564 100644
--- a/client/patterns/switch/Details.tsx
+++ b/client/patterns/switch/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React, { useState } from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/tab/Cover.tsx b/client/patterns/tab/Cover.tsx
index 6c9879d..b33d322 100644
--- a/client/patterns/tab/Cover.tsx
+++ b/client/patterns/tab/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Circle from '../../placeholders/Circle';
diff --git a/client/patterns/tab/Details.tsx b/client/patterns/tab/Details.tsx
index 4269f44..68f82e7 100644
--- a/client/patterns/tab/Details.tsx
+++ b/client/patterns/tab/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React, { useState } from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/teardrop/Cover.tsx b/client/patterns/teardrop/Cover.tsx
index 261882c..c5585ed 100644
--- a/client/patterns/teardrop/Cover.tsx
+++ b/client/patterns/teardrop/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/teardrop/Details.tsx b/client/patterns/teardrop/Details.tsx
index 1b2941f..2b3dac0 100644
--- a/client/patterns/teardrop/Details.tsx
+++ b/client/patterns/teardrop/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/timeline/Cover.tsx b/client/patterns/timeline/Cover.tsx
index 268a55b..e5758d8 100644
--- a/client/patterns/timeline/Cover.tsx
+++ b/client/patterns/timeline/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Circle from '../../placeholders/Circle';
diff --git a/client/patterns/timeline/Details.tsx b/client/patterns/timeline/Details.tsx
index 936da15..1166a6c 100644
--- a/client/patterns/timeline/Details.tsx
+++ b/client/patterns/timeline/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/toggle-password-visibility/Cover.tsx b/client/patterns/toggle-password-visibility/Cover.tsx
index db7f449..7ba90c1 100644
--- a/client/patterns/toggle-password-visibility/Cover.tsx
+++ b/client/patterns/toggle-password-visibility/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Circle from '../../placeholders/Circle';
diff --git a/client/patterns/toggle-password-visibility/Details.tsx b/client/patterns/toggle-password-visibility/Details.tsx
index a92a01c..808e505 100644
--- a/client/patterns/toggle-password-visibility/Details.tsx
+++ b/client/patterns/toggle-password-visibility/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React, { useState } from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/tooltip/Cover.tsx b/client/patterns/tooltip/Cover.tsx
index edcbd14..79be4b1 100644
--- a/client/patterns/tooltip/Cover.tsx
+++ b/client/patterns/tooltip/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/tooltip/Details.tsx b/client/patterns/tooltip/Details.tsx
index 6009b0e..5c073e7 100644
--- a/client/patterns/tooltip/Details.tsx
+++ b/client/patterns/tooltip/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/tooltip/tooltip.css b/client/patterns/tooltip/tooltip.css
index ad2ab58..79444ee 100644
--- a/client/patterns/tooltip/tooltip.css
+++ b/client/patterns/tooltip/tooltip.css
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 .p-tooltip {
     position: relative;
 }
diff --git a/client/patterns/upload-button/Cover.tsx b/client/patterns/upload-button/Cover.tsx
index 0c86914..15d0d19 100644
--- a/client/patterns/upload-button/Cover.tsx
+++ b/client/patterns/upload-button/Cover.tsx
@@ -1,6 +1,10 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
-import Circle from '../../placeholders/Circle';
 import Frame from '../../placeholders/Frame';
 import Rectangle from '../../placeholders/Rectangle';
 
diff --git a/client/patterns/upload-button/Details.tsx b/client/patterns/upload-button/Details.tsx
index d26f7ca..ca69ce4 100644
--- a/client/patterns/upload-button/Details.tsx
+++ b/client/patterns/upload-button/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/validation-icon/Cover.tsx b/client/patterns/validation-icon/Cover.tsx
index 2d16894..78d89c0 100644
--- a/client/patterns/validation-icon/Cover.tsx
+++ b/client/patterns/validation-icon/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/validation-icon/Details.tsx b/client/patterns/validation-icon/Details.tsx
index 4a3320c..ecbaa57 100644
--- a/client/patterns/validation-icon/Details.tsx
+++ b/client/patterns/validation-icon/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/video-background/Cover.tsx b/client/patterns/video-background/Cover.tsx
index 6d3eb40..cfe1f3d 100644
--- a/client/patterns/video-background/Cover.tsx
+++ b/client/patterns/video-background/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/video-background/Details.tsx b/client/patterns/video-background/Details.tsx
index c53da83..0149f87 100644
--- a/client/patterns/video-background/Details.tsx
+++ b/client/patterns/video-background/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/patterns/wizard/Cover.tsx b/client/patterns/wizard/Cover.tsx
index a3b5737..56a1928 100644
--- a/client/patterns/wizard/Cover.tsx
+++ b/client/patterns/wizard/Cover.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/wizard/Details.tsx b/client/patterns/wizard/Details.tsx
index d1b9bcf..8172d12 100644
--- a/client/patterns/wizard/Details.tsx
+++ b/client/patterns/wizard/Details.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
diff --git a/client/placeholders/Block.tsx b/client/placeholders/Block.tsx
index 508a7af..10316b8 100644
--- a/client/placeholders/Block.tsx
+++ b/client/placeholders/Block.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 import random from '../helpers/random';
diff --git a/client/placeholders/BrowserFrame.tsx b/client/placeholders/BrowserFrame.tsx
index 4447470..e950406 100644
--- a/client/placeholders/BrowserFrame.tsx
+++ b/client/placeholders/BrowserFrame.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React, { useState } from 'react';
 
 import SampleCode from '../components/SampleCode';
diff --git a/client/placeholders/Circle.tsx b/client/placeholders/Circle.tsx
index d8f72cf..70fe680 100644
--- a/client/placeholders/Circle.tsx
+++ b/client/placeholders/Circle.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 interface CircleProps {
diff --git a/client/placeholders/Frame.tsx b/client/placeholders/Frame.tsx
index 588872c..1343d38 100644
--- a/client/placeholders/Frame.tsx
+++ b/client/placeholders/Frame.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 const Frame: React.FC<{}> = ({ children }) => {
diff --git a/client/placeholders/Line.tsx b/client/placeholders/Line.tsx
index e5d7fc7..bec81f0 100644
--- a/client/placeholders/Line.tsx
+++ b/client/placeholders/Line.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 interface LineProps {
diff --git a/client/placeholders/Rectangle.tsx b/client/placeholders/Rectangle.tsx
index 39113cd..9ff9bdf 100644
--- a/client/placeholders/Rectangle.tsx
+++ b/client/placeholders/Rectangle.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 interface RectangleProps {
diff --git a/client/placeholders/Square.tsx b/client/placeholders/Square.tsx
index 8ced485..0ef6261 100644
--- a/client/placeholders/Square.tsx
+++ b/client/placeholders/Square.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 interface SquareProps {
diff --git a/client/placeholders/Triangle.tsx b/client/placeholders/Triangle.tsx
index ef2a0b3..e8b92a3 100644
--- a/client/placeholders/Triangle.tsx
+++ b/client/placeholders/Triangle.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 interface TriangleProps {
diff --git a/client/placeholders/VerticalLine.tsx b/client/placeholders/VerticalLine.tsx
index 32d737c..1f534f3 100644
--- a/client/placeholders/VerticalLine.tsx
+++ b/client/placeholders/VerticalLine.tsx
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 import React from 'react';
 
 const VerticalLine: React.FC<{}> = () => {
diff --git a/client/types/hightlight.d.ts b/client/types/hightlight.d.ts
index 981d895..2e0b146 100644
--- a/client/types/hightlight.d.ts
+++ b/client/types/hightlight.d.ts
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 declare module 'highlight.js/lib/highlight' {
     interface HighlightResult {
         value: string;
diff --git a/webpack.config.js b/webpack.config.js
index 1de72e4..e9bc93a 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,3 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
 const path = require('path');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 const HtmlWebPackPlugin = require("html-webpack-plugin");