diff --git a/client/patterns/dropdown/Details.tsx b/client/patterns/dropdown/Details.tsx
index 351f3ec..1644afb 100644
--- a/client/patterns/dropdown/Details.tsx
+++ b/client/patterns/dropdown/Details.tsx
@@ -30,7 +30,7 @@ const Details: React.FC<{}> = () => {
                             }}
                         >
                             <div
-                                className="dropdown"
+                                className="p-dropdown"
                                 style={{
                                     position: 'relative',
                                 }}
@@ -49,7 +49,7 @@ const Details: React.FC<{}> = () => {
                                 </button>
 
                                 <div
-                                    className="dropdown-content"
+                                    className="p-dropdown-content"
                                     style={{
                                         backgroundColor: '#FFF',
                                         height: '200px',
diff --git a/client/patterns/dropdown/dropdown.css b/client/patterns/dropdown/dropdown.css
index ab9f7a9..955fb6d 100644
--- a/client/patterns/dropdown/dropdown.css
+++ b/client/patterns/dropdown/dropdown.css
@@ -1,7 +1,7 @@
-.dropdown-content {
+.p-dropdown-content {
     display: none;
 }
 
-.dropdown:hover .dropdown-content {
+.p-dropdown:hover .p-dropdown-content {
     display: block;
 }
diff --git a/client/patterns/floating-label/Details.tsx b/client/patterns/floating-label/Details.tsx
index 683f53d..f3eb89f 100644
--- a/client/patterns/floating-label/Details.tsx
+++ b/client/patterns/floating-label/Details.tsx
@@ -25,7 +25,7 @@ const Details: React.FC<{}> = () => {
                             }}
                         >
                             <div
-                                className="floating-container"
+                                className="p-floating-container"
                                 style={{
                                     border: '1px solid rgba(0, 0, 0, 0.3)',
                                     borderRadius: '4px',
@@ -59,11 +59,11 @@ const Details: React.FC<{}> = () => {
                     )}
                     source={`
 <style>
-.floating-container {
+.p-floating-container {
     position: relative;
 }
 
-.floating-container label {
+.p-floating-container label {
     /* Position the label */
     left: 8px;
     position: absolute;
@@ -75,14 +75,14 @@ const Details: React.FC<{}> = () => {
 }
 
 /* Show the label at desired position when the placeholder of input isn't shown */
-.floating-container input:not(:placeholder-shown) + label {
+.p-floating-container input:not(:placeholder-shown) + label {
     background: #FFF;
     transform: translate(0, -50%);
     opacity: 1;
 }
 </style>
 
-<div class="floating-container">
+<div class="p-floating-container">
     <!-- The input -->
     <input placeholder="Placeholder" />
 
diff --git a/client/patterns/floating-label/floating-label.css b/client/patterns/floating-label/floating-label.css
index c07ed08..90355e8 100644
--- a/client/patterns/floating-label/floating-label.css
+++ b/client/patterns/floating-label/floating-label.css
@@ -1,8 +1,8 @@
-.floating-container label {
+.p-floating-container label {
     opacity: 0;
 }
 
-.floating-container input:not(:placeholder-shown) + label {
+.p-floating-container input:not(:placeholder-shown) + label {
     background: #FFF;
     transform: translate(0, -50%);
     opacity: 1;
diff --git a/client/patterns/menu/Details.tsx b/client/patterns/menu/Details.tsx
index bc0d17a..248b9df 100644
--- a/client/patterns/menu/Details.tsx
+++ b/client/patterns/menu/Details.tsx
@@ -33,7 +33,7 @@ const Details: React.FC<{}> = () => {
                                 }}
                             >
                                 <div
-                                    className="menu-item"
+                                    className="p-menu-item"
                                     style={{
                                         alignItems: 'center',
                                         display: 'flex',
@@ -44,7 +44,7 @@ const Details: React.FC<{}> = () => {
                                     <div style={{ width: '40%' }}><Rectangle /></div>
                                 </div>
                                 <div
-                                    className="menu-item"
+                                    className="p-menu-item"
                                     style={{
                                         alignItems: 'center',
                                         display: 'flex',
@@ -56,7 +56,7 @@ const Details: React.FC<{}> = () => {
                                     <div style={{ marginLeft: '4px', width: '50%' }}><Rectangle /></div>
                                 </div>
                                 <div
-                                    className="menu-item"
+                                    className="p-menu-item"
                                     style={{
                                         alignItems: 'center',
                                         display: 'flex',
@@ -69,7 +69,7 @@ const Details: React.FC<{}> = () => {
                                     <div>Ctrl + X</div>
                                 </div>
                                 <div
-                                    className="menu-item"
+                                    className="p-menu-item"
                                     style={{
                                         alignItems: 'center',
                                         display: 'flex',
@@ -82,7 +82,7 @@ const Details: React.FC<{}> = () => {
                                     <div>Ctrl + C</div>
                                 </div>
                                 <div
-                                    className="menu-item"
+                                    className="p-menu-item"
                                     style={{
                                         alignItems: 'center',
                                         display: 'flex',
@@ -95,7 +95,7 @@ const Details: React.FC<{}> = () => {
                                     <Circle />
                                 </div>
                                 <div
-                                    className="menu-item"
+                                    className="p-menu-item"
                                     style={{
                                         alignItems: 'center',
                                         display: 'flex',
@@ -112,7 +112,7 @@ const Details: React.FC<{}> = () => {
                                 </div>
                                 <div style={{ borderBottom: '1px solid rgba(0, 0, 0, 0.3)', height: '1px' }} />
                                 <div
-                                    className="menu-item"
+                                    className="p-menu-item"
                                     style={{
                                         alignItems: 'center',
                                         display: 'flex',
diff --git a/client/patterns/menu/menu.css b/client/patterns/menu/menu.css
index 77d6681..188aa84 100644
--- a/client/patterns/menu/menu.css
+++ b/client/patterns/menu/menu.css
@@ -1,3 +1,3 @@
-.menu-item:hover {
+.p-menu-item:hover {
     background-color: rgba(0, 0, 0, 0.1);
 }
diff --git a/client/patterns/rating/Details.tsx b/client/patterns/rating/Details.tsx
index 6f4ca6f..06964a3 100644
--- a/client/patterns/rating/Details.tsx
+++ b/client/patterns/rating/Details.tsx
@@ -18,7 +18,7 @@ const Details: React.FC<{}> = () => {
                                 justifyContent: 'center',
                             }}
                         >
-                            <div className="rating">
+                            <div className="p-rating">
                                 <Star isActive={false} />
                                 <Star isActive={false} />
                                 <Star isActive={false} />
@@ -29,7 +29,7 @@ const Details: React.FC<{}> = () => {
                     )}
                     source={`
 <style>
-.rating {
+.p-rating {
     /* Content is centered */
     align-items: center;
     display: flex;
@@ -40,7 +40,8 @@ const Details: React.FC<{}> = () => {
     font-size: 32px;
 }
 
-.rating .star:hover, .rating .star:hover ~ .star {
+.p-rating .p-rating-star:hover,
+.p-rating .p-rating-star:hover ~ .p-rating-star {
     color: transparent;
 }
 
@@ -48,15 +49,15 @@ const Details: React.FC<{}> = () => {
 Make all previous stars selected when hover on a star
 Note that we use \`flex-direction: row-reverse\` on the container
 */
-.rating .star:hover:before,
-.rating .star:hover ~ .star:before {
+.p-rating .p-rating-star:hover:before,
+.p-rating .p-rating-star:hover ~ .p-rating-star:before {
     color: #00449e;
     content: '\\2605';
     left: 0;
     position: absolute;
 }
 
-.star {
+.p-rating-star {
     /* Reset styles for button */
     background-color: transparent;
     border: transparent;
@@ -68,12 +69,12 @@ Note that we use \`flex-direction: row-reverse\` on the container
 }
 </style>
 
-<div class="rating">
-    <button class="star">☆</button>
-    <button class="star">☆</button>
-    <button class="star">☆</button>
-    <button class="star">☆</button>
-    <button class="star">★</button>
+<div class="p-rating">
+    <button class="p-rating-star">☆</button>
+    <button class="p-rating-star">☆</button>
+    <button class="p-rating-star">☆</button>
+    <button class="p-rating-star">☆</button>
+    <button class="p-rating-star">★</button>
 </div>
 `}
                 />
diff --git a/client/patterns/rating/Star.tsx b/client/patterns/rating/Star.tsx
index acae76c..9e97923 100644
--- a/client/patterns/rating/Star.tsx
+++ b/client/patterns/rating/Star.tsx
@@ -8,7 +8,7 @@ interface StarProps {
 
 const Star: React.FC<StarProps> = ({ isActive }) => {
     return (
-        <button className="star">
+        <button className="p-rating-star">
             {isActive ? '★' : '☆'}
         </button>
     );
diff --git a/client/patterns/rating/star.css b/client/patterns/rating/star.css
index d44bd5b..049148d 100644
--- a/client/patterns/rating/star.css
+++ b/client/patterns/rating/star.css
@@ -1,4 +1,4 @@
-.rating {
+.p-rating {
     align-items: center;
     display: flex;
     font-size: 32px;
@@ -6,18 +6,20 @@
     flex-direction: row-reverse;
 }
 
-.rating .star:hover, .rating .star:hover ~ .star {
+.p-rating .p-rating-star:hover,
+.p-rating .p-rating-star:hover ~ .p-rating-star {
     color: transparent;
 }
 
-.rating .star:hover:before, .rating .star:hover ~ .star:before {
+.p-rating .p-rating-star:hover:before,
+.p-rating .p-rating-star:hover ~ .p-rating-star:before {
     color: #00449e;
     content: '\2605';
     left: 0;
     position: absolute;
 }
 
-.star {
+.p-rating-star {
     background-color: transparent;
     border: transparent;
     margin: 0 2px;