diff --git a/contents/_includes/patterns/popover-arrow.njk b/contents/_includes/patterns/popover-arrow.njk
new file mode 100644
index 0000000..0cb71e6
--- /dev/null
+++ b/contents/_includes/patterns/popover-arrow.njk
@@ -0,0 +1,14 @@
+<div class="popover-arrow">
+    <div class="popover-arrow__arrow popover-arrow__arrow--tl"></div>
+    <div class="popover-arrow__arrow popover-arrow__arrow--tc"></div>
+    <div class="popover-arrow__arrow popover-arrow__arrow--tr"></div>
+    <div class="popover-arrow__arrow popover-arrow__arrow--rt"></div>
+    <div class="popover-arrow__arrow popover-arrow__arrow--rc"></div>
+    <div class="popover-arrow__arrow popover-arrow__arrow--rb"></div>
+    <div class="popover-arrow__arrow popover-arrow__arrow--bl"></div>
+    <div class="popover-arrow__arrow popover-arrow__arrow--bc"></div>
+    <div class="popover-arrow__arrow popover-arrow__arrow--br"></div>
+    <div class="popover-arrow__arrow popover-arrow__arrow--lt"></div>
+    <div class="popover-arrow__arrow popover-arrow__arrow--lc"></div>
+    <div class="popover-arrow__arrow popover-arrow__arrow--lb"></div>
+</div>
\ No newline at end of file
diff --git a/contents/index.njk b/contents/index.njk
index 002f708..aca6c0c 100644
--- a/contents/index.njk
+++ b/contents/index.njk
@@ -69,5 +69,12 @@ eleventyExcludeFromCollections: true
         </div>
     </div>
 
+    <div class="category">
+        <h2 class="category__name">Feedback</h2>
+        <div class="category__posts">
+            {% pattern "Popover arrow" %}{% include "patterns/popover-arrow.njk" %}{% endpattern %}
+        </div>
+    </div>
+
     {% include "follow.njk" %}
 </div>
\ No newline at end of file
diff --git a/contents/popover-arrow.md b/contents/popover-arrow.md
new file mode 100644
index 0000000..ce8439e
--- /dev/null
+++ b/contents/popover-arrow.md
@@ -0,0 +1,208 @@
+---
+layout: layouts/post.njk
+title: Popover arrow
+description: Create a popover arrow with CSS
+keywords: css arrow, css popover
+---
+
+## HTML
+
+```html
+<div class="popover-arrow">
+    <!-- The content -->
+    ...
+
+    <!-- Top left arrow -->
+    <div class="popover-arrow__arrow popover-arrow__arrow--tl"></div>
+
+    <!-- Top center arrow -->
+    <div class="popover-arrow__arrow popover-arrow__arrow--tc"></div>
+
+    <!-- Top right arrow -->
+    <div class="popover-arrow__arrow popover-arrow__arrow--tr"></div>
+
+    <!-- Right top arrow -->
+    <div class="popover-arrow__arrow popover-arrow__arrow--rt"></div>
+
+    <!-- Right center arrow -->
+    <div class="popover-arrow__arrow popover-arrow__arrow--rc"></div>
+
+    <!-- Right bottom arrow -->
+    <div class="popover-arrow__arrow popover-arrow__arrow--rb"></div>
+
+    <!-- Bottom left arrow -->
+    <div class="popover-arrow__arrow popover-arrow__arrow--bl"></div>
+
+    <!-- Bottom center arrow -->
+    <div class="popover-arrow__arrow popover-arrow__arrow--bc"></div>
+
+    <!-- Bottom right arrow -->
+    <div class="popover-arrow__arrow popover-arrow__arrow--br"></div>
+
+    <!-- Left top arrow -->
+    <div class="popover-arrow__arrow popover-arrow__arrow--lt"></div>
+
+    <!-- Left center arrow -->
+    <div class="popover-arrow__arrow popover-arrow__arrow--lc"></div>
+
+    <!-- Left bottom arrow -->
+    <div class="popover-arrow__arrow popover-arrow__arrow--lb"></div>
+</div>
+```
+
+## CSS
+
+```css
+.popover-arrow {
+    /* Border */
+    border: 1px solid #d1d5db;
+
+    /* Used to position the arrow */
+    position: relative;
+}
+
+.popover-arrow__arrow {
+    /* Size */
+    height: 0.5rem;
+    width: 0.5rem;
+
+    background-color: #fff;
+    position: absolute;
+}
+
+.popover-arrow__arrow--tl {
+    /* Position at the top left corner */
+    left: 1rem;
+    top: 0;
+
+    /* Border */
+    border-left: 1px solid #d1d5db;
+    border-top: 1px solid #d1d5db;
+    transform: translate(50%, -50%) rotate(45deg);
+}
+
+.popover-arrow__arrow--tc {
+    /* Position at the top center */
+    left: 50%;
+    top: 0;
+
+    /* Border */
+    border-left: 1px solid #d1d5db;
+    border-top: 1px solid #d1d5db;
+    transform: translate(-50%, -50%) rotate(45deg);
+}
+
+.popover-arrow__arrow--tr {
+    /* Position at the top right corner */
+    right: 1rem;
+    top: 0;
+
+    /* Border */
+    border-left: 1px solid #d1d5db;
+    border-top: 1px solid #d1d5db;
+    transform: translate(-50%, -50%) rotate(45deg);
+}
+
+.popover-arrow__arrow--rt {
+    /* Position at the right top corner */
+    right: 0;
+    top: 1rem;
+
+    /* Border */
+    border-right: 1px solid #d1d5db;
+    border-top: 1px solid #d1d5db;
+    transform: translate(50%, 50%) rotate(45deg);
+}
+
+.popover-arrow__arrow--rc {
+    /* Position at the right center */
+    right: 0;
+    top: 50%;
+
+    /* Border */
+    border-right: 1px solid #d1d5db;
+    border-top: 1px solid #d1d5db;
+    transform: translate(50%, -50%) rotate(45deg);
+}
+
+.popover-arrow__arrow--rb {
+    /* Position at the right bottom corner */
+    bottom: 1rem;
+    right: 0;
+
+    /* Border */
+    border-right: 1px solid #d1d5db;
+    border-top: 1px solid #d1d5db;
+    transform: translate(50%, -50%) rotate(45deg);
+}
+
+.popover-arrow__arrow--bl {
+    /* Position at the bottom left corner */
+    bottom: -0.5rem;
+    left: 1rem;
+
+    /* Border */
+    border-bottom: 1px solid #d1d5db;
+    border-right: 1px solid #d1d5db;
+    transform: translate(50%, -50%) rotate(45deg);
+}
+
+.popover-arrow__arrow--bc {
+    /* Position at the bottom center */
+    bottom: -0.5rem;
+    left: 50%;
+
+    /* Border */
+    border-bottom: 1px solid #d1d5db;
+    border-right: 1px solid #d1d5db;
+    transform: translate(-50%, -50%) rotate(45deg);
+}
+
+.popover-arrow__arrow--br {
+    /* Position at the bottom right corner */
+    bottom: -0.5rem;
+    right: 1rem;
+
+    /* Border */
+    border-bottom: 1px solid #d1d5db;
+    border-right: 1px solid #d1d5db;
+    transform: translate(-50%, -50%) rotate(45deg);
+}
+
+.popover-arrow__arrow--lt {
+    /* Position at the left top corner */
+    left: 0;
+    top: 1rem;
+
+    /* Border */
+    border-bottom: 1px solid #d1d5db;
+    border-left: 1px solid #d1d5db;
+    transform: translate(-50%, 50%) rotate(45deg);
+}
+
+.popover-arrow__arrow--lc {
+    /* Position at the left center */
+    left: 0;
+    top: 50%;
+
+    /* Border */
+    border-bottom: 1px solid #d1d5db;
+    border-left: 1px solid #d1d5db;
+    transform: translate(-50%, -50%) rotate(45deg);
+}
+
+.popover-arrow__arrow--lb {
+    /* Position at the left bottom corner */
+    bottom: 1rem;
+    left: 0;
+
+    /* Border */
+    border-bottom: 1px solid #d1d5db;
+    border-left: 1px solid #d1d5db;
+    transform: translate(-50%, -50%) rotate(45deg);
+}
+```
+
+{% demo %}
+{% include "patterns/popover-arrow.njk" %}
+{% enddemo %}
diff --git a/pages/popover-arrow/index.tsx b/pages/popover-arrow/index.tsx
deleted file mode 100644
index 76762e1..0000000
--- a/pages/popover-arrow/index.tsx
+++ /dev/null
@@ -1,401 +0,0 @@
-import * as React from 'react';
-import Head from 'next/head';
-import { Spacer } from '@1milligram/design';
-
-import { RelatedPatterns } from '../../components/RelatedPatterns';
-import { Pattern } from '../../constants/Pattern';
-import { PatternLayout } from '../../layouts/PatternLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <PatternLayout pattern={Pattern.PopoverArrow}>
-            <Head>
-                <meta name="description" content="Create a popover arrow with CSS" />
-                <meta name="og:description" content="Create a popover arrow with CSS" />
-                <meta name="twitter:description" content="Create a popover arrow with CSS" />
-                <meta name="keywords" content="css arrow, css popover" />
-            </Head>
-            <BrowserFrame
-                html={`
-<div class="container">
-    <!-- The content -->
-    ...
-
-    <!-- Top left arrow -->
-    <div class="container__arrow container__arrow--tl"></div>
-
-    <!-- Top center arrow -->
-    <div class="container__arrow container__arrow--tc"></div>
-
-    <!-- Top right arrow -->
-    <div class="container__arrow container__arrow--tr"></div>
-
-    <!-- Right top arrow -->
-    <div class="container__arrow container__arrow--rt"></div>
-
-    <!-- Right center arrow -->
-    <div class="container__arrow container__arrow--rc"></div>
-
-    <!-- Right bottom arrow -->
-    <div class="container__arrow container__arrow--rb"></div>
-
-    <!-- Bottom left arrow -->
-    <div class="container__arrow container__arrow--bl"></div>
-
-    <!-- Bottom center arrow -->
-    <div class="container__arrow container__arrow--bc"></div>
-
-    <!-- Bottom right arrow -->
-    <div class="container__arrow container__arrow--br"></div>
-
-    <!-- Left top arrow -->
-    <div class="container__arrow container__arrow--lt"></div>
-
-    <!-- Left center arrow -->
-    <div class="container__arrow container__arrow--lc"></div>
-
-    <!-- Left bottom arrow -->
-    <div class="container__arrow container__arrow--lb"></div>
-</div>
-`}
-                css={`
-                    .container {
-                        /* Border */
-                        border: 1px solid rgba(0, 0, 0, 0.3);
-
-                        /* Used to position the arrow */
-                        position: relative;
-                    }
-
-                    .container__arrow {
-                        /* Size */
-                        height: 16px;
-                        width: 16px;
-
-                        background-color: #fff;
-                        position: absolute;
-                    }
-
-                    .container__arrow--tl {
-                        /* Position at the top left corner */
-                        left: 32px;
-                        top: 0px;
-
-                        /* Border */
-                        border-left: 1px solid rgba(0, 0, 0, 0.3);
-                        border-top: 1px solid rgba(0, 0, 0, 0.3);
-                        transform: translate(50%, -50%) rotate(45deg);
-                    }
-
-                    .container__arrow--tc {
-                        /* Position at the top center */
-                        left: 50%;
-                        top: 0px;
-
-                        /* Border */
-                        border-left: 1px solid rgba(0, 0, 0, 0.3);
-                        border-top: 1px solid rgba(0, 0, 0, 0.3);
-                        transform: translate(-50%, -50%) rotate(45deg);
-                    }
-
-                    .container__arrow--tr {
-                        /* Position at the top right corner */
-                        right: 32px;
-                        top: 0px;
-
-                        /* Border */
-                        border-left: 1px solid rgba(0, 0, 0, 0.3);
-                        border-top: 1px solid rgba(0, 0, 0, 0.3);
-                        transform: translate(-50%, -50%) rotate(45deg);
-                    }
-
-                    .container__arrow--rt {
-                        /* Position at the right top corner */
-                        right: 0;
-                        top: 32px;
-
-                        /* Border */
-                        border-right: 1px solid rgba(0, 0, 0, 0.3);
-                        border-top: 1px solid rgba(0, 0, 0, 0.3);
-                        transform: translate(50%, 50%) rotate(45deg);
-                    }
-
-                    .container__arrow--rc {
-                        /* Position at the right center */
-                        right: 0;
-                        top: 50%;
-
-                        /* Border */
-                        border-right: 1px solid rgba(0, 0, 0, 0.3);
-                        border-top: 1px solid rgba(0, 0, 0, 0.3);
-                        transform: translate(50%, -50%) rotate(45deg);
-                    }
-
-                    .container__arrow--rb {
-                        /* Position at the right bottom corner */
-                        bottom: 32px;
-                        right: 0;
-
-                        /* Border */
-                        border-right: 1px solid rgba(0, 0, 0, 0.3);
-                        border-top: 1px solid rgba(0, 0, 0, 0.3);
-                        transform: translate(50%, -50%) rotate(45deg);
-                    }
-
-                    .container__arrow--bl {
-                        /* Position at the bottom left corner */
-                        bottom: -16px;
-                        left: 32px;
-
-                        /* Border */
-                        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-                        border-right: 1px solid rgba(0, 0, 0, 0.3);
-                        transform: translate(50%, -50%) rotate(45deg);
-                    }
-
-                    .container__arrow--bc {
-                        /* Position at the bottom center */
-                        bottom: -16px;
-                        left: 50%;
-
-                        /* Border */
-                        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-                        border-right: 1px solid rgba(0, 0, 0, 0.3);
-                        transform: translate(-50%, -50%) rotate(45deg);
-                    }
-
-                    .container__arrow--br {
-                        /* Position at the bottom right corner */
-                        bottom: -16px;
-                        right: 32px;
-
-                        /* Border */
-                        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-                        border-right: 1px solid rgba(0, 0, 0, 0.3);
-                        transform: translate(-50%, -50%) rotate(45deg);
-                    }
-
-                    .container__arrow--lt {
-                        /* Position at the left top corner */
-                        left: 0;
-                        top: 32px;
-
-                        /* Border */
-                        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-                        border-left: 1px solid rgba(0, 0, 0, 0.3);
-                        transform: translate(-50%, 50%) rotate(45deg);
-                    }
-
-                    .container__arrow--lc {
-                        /* Position at the left center */
-                        left: 0;
-                        top: 50%;
-
-                        /* Border */
-                        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-                        border-left: 1px solid rgba(0, 0, 0, 0.3);
-                        transform: translate(-50%, -50%) rotate(45deg);
-                    }
-
-                    .container__arrow--lb {
-                        /* Position at the left bottom corner */
-                        bottom: 32px;
-                        left: 0;
-
-                        /* Border */
-                        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-                        border-left: 1px solid rgba(0, 0, 0, 0.3);
-                        transform: translate(-50%, -50%) rotate(45deg);
-                    }
-                `}
-            >
-                <div
-                    style={{
-                        alignItems: 'center',
-                        display: 'flex',
-                        flexDirection: 'column',
-                        height: '100%',
-                        justifyContent: 'center',
-                        padding: '8px',
-                    }}
-                >
-                    <div
-                        style={{
-                            border: '1px solid rgba(0, 0, 0, 0.3)',
-                            borderRadius: '4px',
-                            height: '300px',
-                            marginBottom: '16px',
-                            position: 'relative',
-                            width: '300px',
-                        }}
-                    >
-                        <div
-                            style={{
-                                backgroundColor: '#FFF',
-                                borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
-                                borderTop: '1px solid rgba(0, 0, 0, 0.3)',
-                                height: '16px',
-                                left: '32px',
-                                position: 'absolute',
-                                top: 0,
-                                transform: 'translate(50%, -50%) rotate(45deg)',
-                                width: '16px',
-                            }}
-                        />
-                        <div
-                            style={{
-                                backgroundColor: '#FFF',
-                                borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
-                                borderTop: '1px solid rgba(0, 0, 0, 0.3)',
-                                height: '16px',
-                                left: '50%',
-                                position: 'absolute',
-                                top: 0,
-                                transform: 'translate(-50%, -50%) rotate(45deg)',
-                                width: '16px',
-                            }}
-                        />
-                        <div
-                            style={{
-                                backgroundColor: '#FFF',
-                                borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
-                                borderTop: '1px solid rgba(0, 0, 0, 0.3)',
-                                height: '16px',
-                                position: 'absolute',
-                                right: '32px',
-                                top: 0,
-                                transform: 'translate(-50%, -50%) rotate(45deg)',
-                                width: '16px',
-                            }}
-                        />
-
-                        <div
-                            style={{
-                                backgroundColor: '#FFF',
-                                borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                borderTop: '1px solid rgba(0, 0, 0, 0.3)',
-                                height: '16px',
-                                position: 'absolute',
-                                right: 0,
-                                top: '32px',
-                                transform: 'translate(50%, 50%) rotate(45deg)',
-                                width: '16px',
-                            }}
-                        />
-                        <div
-                            style={{
-                                backgroundColor: '#FFF',
-                                borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                borderTop: '1px solid rgba(0, 0, 0, 0.3)',
-                                height: '16px',
-                                position: 'absolute',
-                                right: 0,
-                                top: '50%',
-                                transform: 'translate(50%, -50%) rotate(45deg)',
-                                width: '16px',
-                            }}
-                        />
-                        <div
-                            style={{
-                                backgroundColor: '#FFF',
-                                borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                borderTop: '1px solid rgba(0, 0, 0, 0.3)',
-                                bottom: '32px',
-                                height: '16px',
-                                position: 'absolute',
-                                right: 0,
-                                transform: 'translate(50%, -50%) rotate(45deg)',
-                                width: '16px',
-                            }}
-                        />
-
-                        <div
-                            style={{
-                                backgroundColor: '#FFF',
-                                borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                bottom: '-16px',
-                                height: '16px',
-                                left: '32px',
-                                position: 'absolute',
-                                transform: 'translate(50%, -50%) rotate(45deg)',
-                                width: '16px',
-                            }}
-                        />
-                        <div
-                            style={{
-                                backgroundColor: '#FFF',
-                                borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                bottom: '-16px',
-                                height: '16px',
-                                left: '50%',
-                                position: 'absolute',
-                                transform: 'translate(-50%, -50%) rotate(45deg)',
-                                width: '16px',
-                            }}
-                        />
-                        <div
-                            style={{
-                                backgroundColor: '#FFF',
-                                borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                bottom: '-16px',
-                                height: '16px',
-                                position: 'absolute',
-                                right: '32px',
-                                transform: 'translate(-50%, -50%) rotate(45deg)',
-                                width: '16px',
-                            }}
-                        />
-
-                        <div
-                            style={{
-                                backgroundColor: '#FFF',
-                                borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
-                                height: '16px',
-                                left: 0,
-                                position: 'absolute',
-                                top: '32px',
-                                transform: 'translate(-50%, 50%) rotate(45deg)',
-                                width: '16px',
-                            }}
-                        />
-                        <div
-                            style={{
-                                backgroundColor: '#FFF',
-                                borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
-                                height: '16px',
-                                left: 0,
-                                position: 'absolute',
-                                top: '50%',
-                                transform: 'translate(-50%, -50%) rotate(45deg)',
-                                width: '16px',
-                            }}
-                        />
-                        <div
-                            style={{
-                                backgroundColor: '#FFF',
-                                borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
-                                bottom: '32px',
-                                height: '16px',
-                                left: 0,
-                                position: 'absolute',
-                                transform: 'translate(-50%, -50%) rotate(45deg)',
-                                width: '16px',
-                            }}
-                        />
-                    </div>
-                </div>
-            </BrowserFrame>
-            <Spacer size="extraLarge" />
-            <RelatedPatterns patterns={[Pattern.ArrowButtons, Pattern.Tooltip]} />
-        </PatternLayout>
-    );
-};
-
-export default Details;
diff --git a/patterns/popover-arrow/Cover.tsx b/patterns/popover-arrow/Cover.tsx
deleted file mode 100644
index d25dd23..0000000
--- a/patterns/popover-arrow/Cover.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import * as React from 'react';
-
-import Frame from '../../placeholders/Frame';
-
-const Cover: React.FC<{}> = () => {
-    return (
-        <Frame>
-            <div
-                style={{
-                    alignItems: 'center',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    height: '100%',
-                    justifyContent: 'center',
-                    padding: '8px',
-                }}
-            >
-                <div
-                    style={{
-                        border: '1px solid rgba(0, 0, 0, 0.3)',
-                        borderRadius: '4px',
-                        height: '60%',
-                        position: 'relative',
-                        width: '100%',
-                    }}
-                >
-                    <div
-                        style={{
-                            backgroundColor: 'var(--current-background-color, #FFF)',
-                            borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                            borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                            height: '10px',
-                            left: '10px',
-                            position: 'absolute',
-                            top: 0,
-                            transform: 'translate(50%, -50%) rotate(225deg)',
-                            width: '10px',
-                            zIndex: 0,
-                        }}
-                    />
-                </div>
-            </div>
-        </Frame>
-    );
-};
-
-export default Cover;
diff --git a/styles/index.scss b/styles/index.scss
index c9d24c5..25fa341 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -43,6 +43,7 @@
 @import './patterns/lined-paper';
 @import './patterns/media-object';
 @import './patterns/overlay-play-button';
+@import './patterns/popover-arrow';
 @import './patterns/price-tag';
 @import './patterns/pricing-table';
 @import './patterns/property-list';
diff --git a/styles/patterns/_popover-arrow.scss b/styles/patterns/_popover-arrow.scss
new file mode 100644
index 0000000..e4e3ad7
--- /dev/null
+++ b/styles/patterns/_popover-arrow.scss
@@ -0,0 +1,152 @@
+.popover-arrow {
+    /* Border */
+    border: 1px solid #d1d5db;
+
+    /* Used to position the arrow */
+    position: relative;
+
+    /* Demo */
+    height: 100%;
+    width: 100%;
+}
+
+.popover-arrow__arrow {
+    /* Size */
+    height: 1rem;
+    width: 1rem;
+
+    background-color: #fff;
+    position: absolute;
+}
+
+.popover-arrow__arrow--tl {
+    /* Position at the top left corner */
+    left: 1rem;
+    top: 0;
+
+    /* Border */
+    border-left: 1px solid #d1d5db;
+    border-top: 1px solid #d1d5db;
+    transform: translate(50%, -50%) rotate(45deg);
+}
+
+.popover-arrow__arrow--tc {
+    /* Position at the top center */
+    left: 50%;
+    top: 0;
+
+    /* Border */
+    border-left: 1px solid #d1d5db;
+    border-top: 1px solid #d1d5db;
+    transform: translate(-50%, -50%) rotate(45deg);
+}
+
+.popover-arrow__arrow--tr {
+    /* Position at the top right corner */
+    right: 1rem;
+    top: 0;
+
+    /* Border */
+    border-left: 1px solid #d1d5db;
+    border-top: 1px solid #d1d5db;
+    transform: translate(-50%, -50%) rotate(45deg);
+}
+
+.popover-arrow__arrow--rt {
+    /* Position at the right top corner */
+    right: 0;
+    top: 1rem;
+
+    /* Border */
+    border-right: 1px solid #d1d5db;
+    border-top: 1px solid #d1d5db;
+    transform: translate(50%, 50%) rotate(45deg);
+}
+
+.popover-arrow__arrow--rc {
+    /* Position at the right center */
+    right: 0;
+    top: 50%;
+
+    /* Border */
+    border-right: 1px solid #d1d5db;
+    border-top: 1px solid #d1d5db;
+    transform: translate(50%, -50%) rotate(45deg);
+}
+
+.popover-arrow__arrow--rb {
+    /* Position at the right bottom corner */
+    bottom: 1rem;
+    right: 0;
+
+    /* Border */
+    border-right: 1px solid #d1d5db;
+    border-top: 1px solid #d1d5db;
+    transform: translate(50%, -50%) rotate(45deg);
+}
+
+.popover-arrow__arrow--bl {
+    /* Position at the bottom left corner */
+    bottom: -1rem;
+    left: 1rem;
+
+    /* Border */
+    border-bottom: 1px solid #d1d5db;
+    border-right: 1px solid #d1d5db;
+    transform: translate(50%, -50%) rotate(45deg);
+}
+
+.popover-arrow__arrow--bc {
+    /* Position at the bottom center */
+    bottom: -1rem;
+    left: 50%;
+
+    /* Border */
+    border-bottom: 1px solid #d1d5db;
+    border-right: 1px solid #d1d5db;
+    transform: translate(-50%, -50%) rotate(45deg);
+}
+
+.popover-arrow__arrow--br {
+    /* Position at the bottom right corner */
+    bottom: -1rem;
+    right: 1rem;
+
+    /* Border */
+    border-bottom: 1px solid #d1d5db;
+    border-right: 1px solid #d1d5db;
+    transform: translate(-50%, -50%) rotate(45deg);
+}
+
+.popover-arrow__arrow--lt {
+    /* Position at the left top corner */
+    left: 0;
+    top: 1rem;
+
+    /* Border */
+    border-bottom: 1px solid #d1d5db;
+    border-left: 1px solid #d1d5db;
+    transform: translate(-50%, 50%) rotate(45deg);
+}
+
+.popover-arrow__arrow--lc {
+    /* Position at the left center */
+    left: 0;
+    top: 50%;
+
+    /* Border */
+    border-bottom: 1px solid #d1d5db;
+    border-left: 1px solid #d1d5db;
+    transform: translate(-50%, -50%) rotate(45deg);
+}
+
+.popover-arrow__arrow--lb {
+    /* Position at the left bottom corner */
+    bottom: 1rem;
+    left: 0;
+
+    /* Border */
+    border-bottom: 1px solid #d1d5db;
+    border-left: 1px solid #d1d5db;
+    transform: translate(-50%, -50%) rotate(45deg);
+}
\ No newline at end of file