diff --git a/README.md b/README.md
index 2814092..1b00fc7 100644
--- a/README.md
+++ b/README.md
@@ -26,7 +26,7 @@ By composing them, you can have any possible layout that exists in the real life
 - Clone the project:
 
 ```shell
-$ git clone https://github.com/1milligram/csslayout
+$ git clone https://github.com/phuocng/csslayout
 ```
 
 - Install the dependencies:
@@ -39,10 +39,10 @@ $ npm install
 - Run it on the local:
 
 ```shell
-$ npm run dev
+$ npm run start
 ```
 
-Visit http://localhost:3000 to see it in action.
+Visit http://localhost:8081 to see it in action.
 
 ## Contributing
 
diff --git a/contents/_includes/covers/box-selector.njk b/contents/_includes/covers/box-selector.njk
new file mode 100644
index 0000000..2e05c13
--- /dev/null
+++ b/contents/_includes/covers/box-selector.njk
@@ -0,0 +1,6 @@
+<div class="box-selector-container">
+    <div class="box-selector box-selector--selected">{% lines "hor", 5 %}</div>
+    {% for i in range(0, 3) -%}
+    <div class="box-selector">{% lines "hor", 5 %}</div>
+    {%- endfor %}
+</div>
\ No newline at end of file
diff --git a/contents/box-selector.md b/contents/box-selector.md
new file mode 100644
index 0000000..8e9ebdf
--- /dev/null
+++ b/contents/box-selector.md
@@ -0,0 +1,58 @@
+---
+layout: layouts/post.njk
+title: Box selector
+description: Create a box selector with CSS
+keywords: css box selector
+---
+
+## HTML
+
+```html
+<div class="box-selector">...</div>
+
+<!-- The selected variant -->
+<div class="box-selector box-selector--selected">...</div>
+```
+
+## CSS
+
+```css
+.box-selector {
+    border: 1px solid #d1d5db;
+    border-radius: 0.25rem;
+    padding: .5rem;
+}
+
+.box-selector--selected {
+    /* Change the border color */
+    border: 2px solid #3b82f6;
+
+    /* Used to position the tick */
+    position: relative;
+}
+
+/* The tick */
+.box-selector--selected:before {
+    /* Absolute position */
+    content: '';
+    left: 0.25rem;
+    position: absolute;
+    top: 0.25rem;
+
+    /* Size */
+    height: 1rem;
+    width: 1rem;
+
+    /* Background */
+    background-image: url("data:image/svg+xml,%3Csvg fill='%233b82f6' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'%3E%3C/path%3E%3C/svg%3E");
+    background-position: center center;
+    background-repeat: no-repeat;
+}
+```
+
+{% demo %}{% include "covers/box-selector.njk" %}{% enddemo %}
+
+## See also
+
+- [Custom checkbox button](/custom-checkbox-button/)
+- [Custom radio button](/custom-radio-button/)
diff --git a/contents/custom-checkbox-button.md b/contents/custom-checkbox-button.md
index adcff45..aefb1e0 100644
--- a/contents/custom-checkbox-button.md
+++ b/contents/custom-checkbox-button.md
@@ -63,3 +63,8 @@ keywords: css checkbox, css flexbox
 ```
 
 {% demo %}{% include "covers/custom-checkbox-button.njk" %}{% enddemo %}
+
+## See also
+
+- [Box selector](/box-selector/)
+- [Custom radio button](/custom-radio-button/)
diff --git a/contents/custom-radio-button.md b/contents/custom-radio-button.md
index b39a907..d292abe 100644
--- a/contents/custom-radio-button.md
+++ b/contents/custom-radio-button.md
@@ -67,3 +67,8 @@ keywords: css flexbox, css radio
 ```
 
 {% demo %}{% include "covers/custom-radio-button.njk" %}{% enddemo %}
+
+## See also
+
+- [Box selector](/box-selector/)
+- [Custom checkbox button](/custom-checkbox-button/)
diff --git a/contents/index.njk b/contents/index.njk
index 8b163eb..a6c3981 100644
--- a/contents/index.njk
+++ b/contents/index.njk
@@ -91,6 +91,7 @@ eleventyExcludeFromCollections: true
     <div class="category">
         <h2 class="category__name">Input</h2>
         <div class="category__posts">
+            {% pattern "Box selector" %}{% include "covers/box-selector.njk" %}{% endpattern %}
             {% pattern "Button with icon" %}{% include "covers/button-with-icon.njk" %}{% endpattern %}
             {% pattern "Chip" %}{% include "covers/chip.njk" %}{% endpattern %}
             {% pattern "Custom checkbox button" %}{% include "covers/custom-checkbox-button.njk" %}{% endpattern %}
diff --git a/styles/index.scss b/styles/index.scss
index 2822344..fd21c5c 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -20,6 +20,7 @@
 @import './patterns/avatar';
 @import './patterns/avatar-list';
 @import './patterns/badge';
+@import './patterns/box-selector';
 @import './patterns/breadcrumb';
 @import './patterns/button-with-icon';
 @import './patterns/card-layout';
diff --git a/styles/patterns/_box-selector.scss b/styles/patterns/_box-selector.scss
new file mode 100644
index 0000000..0647c23
--- /dev/null
+++ b/styles/patterns/_box-selector.scss
@@ -0,0 +1,35 @@
+/* Demo */
+.box-selector-container {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    column-gap: 0.5rem;
+    row-gap: 0.5rem;
+    
+    height: 8rem;
+    width: 8rem;
+}
+
+.box-selector {
+    border: 1px solid #d1d5db;
+    border-radius: 0.25rem;
+    padding: .5rem;
+}
+
+.box-selector--selected {
+    border: 2px solid #3b82f6;
+    position: relative;
+
+    &:before {
+        content: '';
+        left: 0.25rem;
+        position: absolute;
+        top: 0.25rem;
+
+        height: 1rem;
+        width: 1rem;
+
+        background-image: url("data:image/svg+xml,%3Csvg fill='%233b82f6' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'%3E%3C/path%3E%3C/svg%3E");
+        background-position: center center;
+        background-repeat: no-repeat;
+    }
+}
\ No newline at end of file