diff --git a/client/constants/Pattern.ts b/client/constants/Pattern.ts
index 4a8484b..8c57479 100644
--- a/client/constants/Pattern.ts
+++ b/client/constants/Pattern.ts
@@ -93,6 +93,7 @@ enum Pattern {
     UploadButton = 'Upload button',
     ValidationIcon = 'Validation icon',
     VideoBackground = 'Video background',
+    Voting = 'Voting',
     Watermark = 'Watermark',
     Wizard = 'Wizard',
 }
diff --git a/client/pages/ExplorePage.tsx b/client/pages/ExplorePage.tsx
index 22063a4..7d7dfb2 100644
--- a/client/pages/ExplorePage.tsx
+++ b/client/pages/ExplorePage.tsx
@@ -142,6 +142,7 @@ const ExplorePage = () => {
                                 <CoverCard pattern={Pattern.Timeline} />
                                 <CoverCard pattern={Pattern.TriangleButtons} />
                                 <CoverCard pattern={Pattern.VideoBackground} />
+                                <CoverCard pattern={Pattern.Voting} />
                                 <CoverCard pattern={Pattern.Watermark} />
                             </div>
                         </section>
diff --git a/client/patterns/spin-button/Details.tsx b/client/patterns/spin-button/Details.tsx
index 7ac0108..999ea83 100644
--- a/client/patterns/spin-button/Details.tsx
+++ b/client/patterns/spin-button/Details.tsx
@@ -134,7 +134,7 @@ css={`
                     </div>
                 </BrowserFrame>
             </div>
-            <RelatedPatterns patterns={[Pattern.StepperInput]} />
+            <RelatedPatterns patterns={[Pattern.StepperInput, Pattern.Voting]} />
         </DetailsLayout>
     );
 };
diff --git a/client/patterns/stepper-input/Details.tsx b/client/patterns/stepper-input/Details.tsx
index ba8a42c..67ab73d 100644
--- a/client/patterns/stepper-input/Details.tsx
+++ b/client/patterns/stepper-input/Details.tsx
@@ -147,7 +147,7 @@ css={`
                     </div>
                 </BrowserFrame>
             </div>
-            <RelatedPatterns patterns={[Pattern.SpinButton]} />
+            <RelatedPatterns patterns={[Pattern.SpinButton, Pattern.Voting]} />
         </DetailsLayout>
     );
 };
diff --git a/client/patterns/triangle-buttons/Details.tsx b/client/patterns/triangle-buttons/Details.tsx
index b53b78d..b249662 100644
--- a/client/patterns/triangle-buttons/Details.tsx
+++ b/client/patterns/triangle-buttons/Details.tsx
@@ -238,7 +238,7 @@ css={`
                 </BrowserFrame>
             </div>
 
-            <RelatedPatterns patterns={[Pattern.ArrowButtons]} />
+            <RelatedPatterns patterns={[Pattern.ArrowButtons, Pattern.Voting]} />
         </DetailsLayout>
     );
 };
diff --git a/client/patterns/voting/Cover.tsx b/client/patterns/voting/Cover.tsx
new file mode 100644
index 0000000..3a9ac4c
--- /dev/null
+++ b/client/patterns/voting/Cover.tsx
@@ -0,0 +1,88 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+import * as React from 'react';
+
+import Frame from '../../placeholders/Frame';
+
+const Cover: React.FC<{}> = () => {
+    return (
+        <Frame>
+            <div
+                style={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '0.5rem',
+                }}
+            >
+                <div
+                    style={{
+                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                        borderRadius: '0.25rem',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                    }}
+                >
+                    <div
+                        style={{
+                            height: '1rem',
+                            position: 'relative',
+                        }}
+                    >
+                        <div
+                            style={{
+                                borderColor: 'transparent transparent rgba(0, 0, 0, 0.3) transparent',
+                                borderStyle: 'solid',
+                                borderWidth: '0 0.5rem 0.5rem 0.5rem',
+                                height: 0,
+                                left: '50%',
+                                position: 'absolute',
+                                top: '50%',
+                                transform: 'translate(-50%, -50%)',
+                                width: 0,
+                            }}
+                        />
+                    </div>
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flex: 1,
+                            padding: '0.25rem',
+                            justifyContent: 'center',
+                        }}
+                    >
+                        99
+                    </div>
+                    <div
+                        style={{
+                            height: '1rem',
+                            position: 'relative',
+                        }}
+                    >
+                        <div
+                            style={{
+                                borderColor: 'rgba(0, 0, 0, 0.3) transparent transparent transparent',
+                                borderStyle: 'solid',
+                                borderWidth: '0.5rem 0.5rem 0 0.5rem',
+                                height: 0,
+                                left: '50%',
+                                position: 'absolute',
+                                top: '50%',
+                                transform: 'translate(-50%, -50%)',
+                                width: 0,
+                            }}
+                        />
+                    </div>
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;
diff --git a/client/patterns/voting/Details.tsx b/client/patterns/voting/Details.tsx
new file mode 100644
index 0000000..c319490
--- /dev/null
+++ b/client/patterns/voting/Details.tsx
@@ -0,0 +1,190 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+import * as React from 'react';
+import { Helmet } from 'react-helmet';
+
+import RelatedPatterns from '../../components/RelatedPatterns';
+import Pattern from '../../constants/Pattern';
+import DetailsLayout from '../../layouts/DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+
+const Details: React.FC<{}> = () => {
+    const [value, setValue] = React.useState(900);
+    const decrease = () => setValue(value - 1);
+    const increase = () => setValue(value + 1);
+
+    return (
+        <DetailsLayout pattern={Pattern.Voting}>
+            <Helmet>
+                <meta name="description" content="Create a voting control with CSS flexbox" />
+                <meta name="keywords" content="css flexbox, css triangle buttons, css voting control" />
+            </Helmet>
+            <div className='p-8 pb-20'>
+                <BrowserFrame
+html={`
+<div class="voting">
+    <!-- Up button -->
+    <button class="voting__button">
+        <div class="voting__triangle voting__triangle--up"></div>
+    </button>
+
+    <!-- Number -->
+    <div class="voting__number">
+        ...
+    </div>
+
+    <!-- Down button -->
+    <button class="voting__button">
+        <div class="voting__triangle voting__triangle--down"></div>
+    </button>
+</div>
+`}
+css={`
+.voting {
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    border-radius: 0.25rem;
+    display: flex;
+    flex-direction: column;
+    height: 8rem;
+}
+
+.voting__button {
+    /* Reset */
+    background: none;
+    border: none;
+    cursor: pointer;
+    
+    /* Size */
+    height: 1rem;
+
+    /* Position the triangle */
+    position: relative;
+}
+
+.voting__triangle {
+    border-style: solid;
+
+    /* Size */
+    height: 0;
+    width: 0;
+}
+
+.voting__triangle--up {
+    border-color: transparent transparent rgba(0, 0, 0, 0.3);
+    border-width: 0 0.5rem 0.5rem;
+}
+
+.voting__triangle--down {
+    border-color: rgba(0, 0, 0, 0.3) transparent transparent;
+    border-width: 0.5rem 0.5rem 0px;
+}
+
+.voting__number {
+    /* Take the available height */
+    flex: 1;
+
+    /* Center the number */
+    align-items: center;
+    display: flex;
+    justify-content: center;
+
+    /* Spacing */
+    padding: 0.25rem;
+}
+`}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '0.5rem',
+                        }}
+                    >
+                        <div
+                            style={{
+                                border: '1px solid rgba(0, 0, 0, 0.3)',
+                                borderRadius: '0.25rem',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '8rem',
+                            }}
+                        >
+                            <button
+                                style={{
+                                    background: 'none',
+                                    border: 'none',
+                                    cursor: 'pointer',
+                                    height: '1rem',
+                                    position: 'relative',
+                                }}
+                                onClick={increase}
+                            >
+                                <div
+                                    style={{
+                                        borderColor: 'transparent transparent rgba(0, 0, 0, 0.3) transparent',
+                                        borderStyle: 'solid',
+                                        borderWidth: '0 0.5rem 0.5rem 0.5rem',
+                                        height: 0,
+                                        left: '50%',
+                                        position: 'absolute',
+                                        top: '50%',
+                                        transform: 'translate(-50%, -50%)',
+                                        width: 0,
+                                    }}
+                                />
+                            </button>
+                            <div
+                                style={{
+                                    alignItems: 'center',
+                                    display: 'flex',
+                                    flex: 1,
+                                    padding: '0.25rem',
+                                    justifyContent: 'center',
+                                }}
+                            >
+                                {value}
+                            </div>
+                            <button
+                                style={{
+                                    background: 'none',
+                                    border: 'none',
+                                    cursor: 'pointer',
+                                    height: '1rem',
+                                    position: 'relative',
+                                }}
+                                onClick={decrease}
+                            >
+                                <div
+                                    style={{
+                                        borderColor: 'rgba(0, 0, 0, 0.3) transparent transparent transparent',
+                                        borderStyle: 'solid',
+                                        borderWidth: '0.5rem 0.5rem 0 0.5rem',
+                                        height: 0,
+                                        left: '50%',
+                                        position: 'absolute',
+                                        top: '50%',
+                                        transform: 'translate(-50%, -50%)',
+                                        width: 0,
+                                    }}
+                                />
+                            </button>
+                        </div>
+                    </div>
+                </BrowserFrame>
+            </div>
+
+            <RelatedPatterns
+                patterns={[
+                    Pattern.SpinButton, Pattern.StepperInput, Pattern.TriangleButtons
+                ]}
+            />
+        </DetailsLayout>
+    );
+};
+
+export default Details;