diff --git a/__tests__/PaginationBoxView-test.js b/__tests__/PaginationBoxView-test.js
index ad979b5..a8eafd9 100755
--- a/__tests__/PaginationBoxView-test.js
+++ b/__tests__/PaginationBoxView-test.js
@@ -2151,21 +2151,25 @@ describe('Test custom props', () => {
         ReactDOM.findDOMNode(pagination).querySelectorAll('.selected a').length
       ).toBe(1);
       expect(
-        ReactDOM.findDOMNode(pagination).querySelector('.selected a').textContent
+        ReactDOM.findDOMNode(pagination).querySelector('.selected a')
+          .textContent
       ).toBe('2');
 
       // Click to go to page 8.
       for (let i = 1; i < 7; i++) {
         ReactTestUtils.Simulate.click(next);
         expect(
-          ReactDOM.findDOMNode(pagination).querySelectorAll('.selected a').length
+          ReactDOM.findDOMNode(pagination).querySelectorAll('.selected a')
+            .length
         ).toBe(1);
         expect(
-          ReactDOM.findDOMNode(pagination).querySelector('.selected a').textContent
-        ).toBe(`${2+i}`);
+          ReactDOM.findDOMNode(pagination).querySelector('.selected a')
+            .textContent
+        ).toBe(`${2 + i}`);
       }
       expect(
-        ReactDOM.findDOMNode(pagination).querySelector('.selected a').textContent
+        ReactDOM.findDOMNode(pagination).querySelector('.selected a')
+          .textContent
       ).toBe('8');
 
       ReactTestUtils.Simulate.click(previous);
@@ -2174,7 +2178,8 @@ describe('Test custom props', () => {
         ReactDOM.findDOMNode(pagination).querySelectorAll('.selected a').length
       ).toBe(1);
       expect(
-        ReactDOM.findDOMNode(pagination).querySelector('.selected a').textContent
+        ReactDOM.findDOMNode(pagination).querySelector('.selected a')
+          .textContent
       ).toBe('7');
     });
   });
diff --git a/demo/index.html b/demo/index.html
index 598c99b..c05cf81 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -6,10 +6,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>React-Paginate</title>
     <link
-      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
       rel="stylesheet"
-    />
-    <link href="styles/style.css" rel="stylesheet" />
+      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
+      crossorigin="anonymous"
+    >
     <style type="text/css">
       body {
         margin-top: 60px;
@@ -17,33 +18,22 @@
     </style>
   </head>
   <body>
-    <nav class="navbar navbar-inverse navbar-fixed-top">
+    <nav class="navbar navbar-expand-lg bg-light mb-5">
       <div class="container">
-        <div class="navbar-header">
-          <button
-            type="button"
-            class="navbar-toggle collapsed"
-            data-toggle="collapse"
-            data-target="#navbar"
-            aria-expanded="false"
-            aria-controls="navbar"
-          >
-            <span class="sr-only">Toggle navigation</span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-          </button>
-          <a class="navbar-brand" href="#">React-Paginate</a>
-        </div>
-        <div id="navbar" class="collapse navbar-collapse">
-          <ul class="nav navbar-nav">
-            <li><a href="#">Home</a></li>
-          </ul>
+        <a class="navbar-brand" href="#">React Paginate</a>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+            <li class="nav-item">
+              <a class="nav-link active" aria-current="page" href="#">Home</a>
+            </li>
         </div>
       </div>
     </nav>
     <div class="container">
-      <p>
+      <p class="mb-5">
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
         veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
diff --git a/demo/js/demo.js b/demo/js/demo.js
index 8efd34b..a1b1efb 100644
--- a/demo/js/demo.js
+++ b/demo/js/demo.js
@@ -2,9 +2,48 @@ import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import ReactPaginate from 'react-paginate';
+import styled from 'styled-components';
 import $ from 'jquery';
 
-window.React = React;
+// You can style your pagination component
+// thanks to styled-components.
+// Use inner class names to style the controls.
+const MyPaginate = styled(ReactPaginate).attrs({
+  // You can redifine classes here, if you want.
+  activeClassName: 'active', // default to "disabled"
+})`
+  margin-bottom: 2rem;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  list-style-type: none;
+  padding: 0 5rem;
+
+  li a {
+    border-radius: 7px;
+    padding: 0.1rem 1rem;
+    border: gray 1px solid;
+    cursor: pointer;
+  }
+  li.previous a,
+  li.next a,
+  li.break a {
+    border-color: transparent;
+  }
+  li.active a {
+    background-color: #0366d6;
+    border-color: transparent;
+    color: white;
+    min-width: 32px;
+  }
+  li.disabled a {
+    color: grey;
+  }
+  li.disable,
+  li.disabled a {
+    cursor: default;
+  }
+`;
 
 export class CommentList extends Component {
   static propTypes = {
@@ -14,15 +53,18 @@ export class CommentList extends Component {
   render() {
     let commentNodes = this.props.data.map(function (comment, index) {
       return (
-        <div key={index}>
-          {comment.comment} and {comment.username}
-        </div>
+        <li key={index} className="list-group-item">
+          <div className="d-flex w-100 justify-content-between">
+            <h5 className="mb-1">{comment.comment}</h5>
+          </div>
+          <small>From {comment.username}.</small>
+        </li>
       );
     });
 
     return (
       <div id="project-comments" className="commentList">
-        <ul>{commentNodes}</ul>
+        <ul className="list-group">{commentNodes}</ul>
       </div>
     );
   }
@@ -78,32 +120,50 @@ export class App extends Component {
   };
 
   render() {
+    const currentPage = Math.round(this.state.offset / this.props.perPage);
     return (
       <div className="commentBox">
-        <CommentList data={this.state.data} />
-        <ReactPaginate
-          previousLabel="previous"
-          nextLabel="next"
-          breakLabel="..."
-          breakClassName="break-me"
+        <MyPaginate
           pageCount={20}
-          marginPagesDisplayed={2}
-          pageRangeDisplayed={5}
           onPageChange={this.handlePageClick}
-          containerClassName="pagination"
-          activeClassName="active"
-          // eslint-disable-next-line no-unused-vars
-          hrefBuilder={(page, pageCount, selected) =>
-            page >= 1 && page <= pageCount ? `/page/${page}` : '#'
-          }
-          hrefAllControls
+          forcePage={currentPage}
         />
+        <CommentList data={this.state.data} />
+        {/* Here the pagination component is styled thanks to Boostrap
+        classes. See https://getbootstrap.com/docs/5.1/components/pagination */}
+        <nav aria-label="Page navigation comments" className="mt-4">
+          <ReactPaginate
+            previousLabel="previous"
+            nextLabel="next"
+            breakLabel="..."
+            breakClassName="page-item"
+            breakLinkClassName="page-link"
+            pageCount={20}
+            marginPagesDisplayed={2}
+            pageRangeDisplayed={5}
+            onPageChange={this.handlePageClick}
+            containerClassName="pagination justify-content-center"
+            pageClassName="page-item"
+            pageLinkClassName="page-link"
+            previousClassName="page-item"
+            previousLinkClassName="page-link"
+            nextClassName="page-item"
+            nextLinkClassName="page-link"
+            activeClassName="active"
+            // eslint-disable-next-line no-unused-vars
+            hrefBuilder={(page, pageCount, selected) =>
+              page >= 1 && page <= pageCount ? `/page/${page}` : '#'
+            }
+            hrefAllControls
+            forcePage={currentPage}
+          />
+        </nav>
       </div>
     );
   }
 }
 
 ReactDOM.render(
-  <App url={'http://localhost:3000/comments'} author={'adele'} perPage={10} />,
+  <App url={'http://localhost:3000/comments'} author={'adele'} perPage={6} />,
   document.getElementById('react-paginate')
 );
diff --git a/demo/server.js b/demo/server.js
index 67ef834..ec3a950 100644
--- a/demo/server.js
+++ b/demo/server.js
@@ -17,7 +17,6 @@ const STYLES_DIR = path.join(__dirname, 'styles');
 const DATA = path.join(__dirname, 'data', 'data.json');
 const NODE_PORT = process.env.NODE_PORT || 3000;
 const NODE_ENV = process.env.NODE_ENV || 'development';
-const PER_PAGE = 10;
 
 app.use(serveStatic(ROOT_DIR));
 app.use(serveStatic(STYLES_DIR));
@@ -31,27 +30,29 @@ app.use(
   })
 );
 
-function getPaginatedItems(items, offset) {
-  return items.slice(offset, offset + PER_PAGE);
+const ITEMS = JSON.parse(fs.readFileSync(DATA));
+
+function getPaginatedItems(items, offset, limit) {
+  return items.slice(offset, offset + limit);
 }
 
 app.get('/comments', function (req, res) {
-  const items = JSON.parse(fs.readFileSync(DATA));
-  const offset = req.query.offset ? parseInt(req.query.offset, 10) : 0;
-  const nextOffset = offset + PER_PAGE;
-  const previousOffset = offset - PER_PAGE < 1 ? 0 : offset - PER_PAGE;
+  const offset = req.query.offset ? parseInt(req.query.offset) : 0;
+  const limit = req.query.limit ? parseInt(req.query.limit) : 10;
+  const nextOffset = offset + limit;
+  const previousOffset = offset - limit < 1 ? 0 : offset - limit;
 
   const meta = {
-    limit: PER_PAGE,
-    next: util.format('?limit=%s&offset=%s', PER_PAGE, nextOffset),
+    limit: limit,
+    next: util.format('?limit=%d&offset=%d', limit, nextOffset),
     offset: req.query.offset,
-    previous: util.format('?limit=%s&offset=%s', PER_PAGE, previousOffset),
-    total_count: items.length,
+    previous: util.format('?limit=%d&offset=%', limit, previousOffset),
+    total_count: ITEMS.length,
   };
 
   const json = {
     meta: meta,
-    comments: getPaginatedItems(items, offset),
+    comments: getPaginatedItems(ITEMS, offset, limit),
   };
 
   return res.json(json);
diff --git a/demo/styles/style.css b/demo/styles/style.css
deleted file mode 100644
index cb2383e..0000000
--- a/demo/styles/style.css
+++ /dev/null
@@ -1,9 +0,0 @@
-#react-paginate ul {
-  display: inline-block;
-  padding-left: 18px;
-  padding-right: 18px;
-}
-
-#react-paginate li {
-  display: inline-block;
-}
diff --git a/index.d.ts b/index.d.ts
index 010a9bb..c587257 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -37,9 +37,9 @@ export interface ReactPaginateProps {
   prevPageRel?: string | null | undefined;
 
   /**
-  * The `rel` property on the `a` tag for the prev page control.
-  * Default value `prev`. Set to `null` to disable.
-  */
+   * The `rel` property on the `a` tag for the prev page control.
+   * Default value `prev`. Set to `null` to disable.
+   */
   prevRel?: string | null | undefined;
 
   /**
@@ -59,9 +59,9 @@ export interface ReactPaginateProps {
   nextPageRel?: string | null | undefined;
 
   /**
-  * The `rel` property on the `a` tag for the next page control.
-  * Default value `next`. Set to `null` to disable.
-  */
+   * The `rel` property on the `a` tag for the next page control.
+   * Default value `next`. Set to `null` to disable.
+   */
   nextRel?: string | null | undefined;
 
   /**
@@ -171,7 +171,11 @@ export interface ReactPaginateProps {
   /**
    * The method is called to generate the href attribute value on tag a of each page element.
    */
-  hrefBuilder?(pageIndex: number, pageCount: number, selectedPage: number): void;
+  hrefBuilder?(
+    pageIndex: number,
+    pageCount: number,
+    selectedPage: number
+  ): void;
 
   /**
    * By default the `hrefBuilder` add `href` only to active controls.
@@ -179,7 +183,7 @@ export interface ReactPaginateProps {
    * ([see](https://github.com/AdeleD/react-paginate/issues/242))
    * Default to `false`
    */
-   hrefAllControls?: boolean | undefined;
+  hrefAllControls?: boolean | undefined;
 
   /**
    * Extra context to add to the aria-label HTML attribute.
@@ -206,7 +210,7 @@ export interface ReactPaginateProps {
    * The `rel` propery on the `a` tag for the selected page.
    * Default value `canonical`. Set to `null` to disable.
    */
-   selectedPageRel?: string | null | undefined;
+  selectedPageRel?: string | null | undefined;
 }
 
 declare const ReactPaginate: React.ComponentClass<ReactPaginateProps>;
diff --git a/package-lock.json b/package-lock.json
index 6aa10c6..a055cc2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31,6 +31,7 @@
         "react-dom": "^17.0.2",
         "react-hot-loader": "^4.13.0",
         "serve-static": "^1.14.1",
+        "styled-components": "^5.3.3",
         "webpack": "^5.60.0",
         "webpack-cli": "^4.9.1",
         "webpack-dev-middleware": "^5.2.1"
@@ -139,12 +140,12 @@
       }
     },
     "node_modules/@babel/helper-annotate-as-pure": {
-      "version": "7.15.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.15.4.tgz",
-      "integrity": "sha512-QwrtdNvUNsPCj2lfNQacsGSQvGX8ee1ttrBrcozUP2Sv/jylewBP/8QFe6ZkBsC8T/GYWonNAWJV4aRR9AL2DA==",
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.0.tgz",
+      "integrity": "sha512-ItmYF9vR4zA8cByDocY05o0LGUkp1zhbTQOH1NFyl5xXEqlTJQCEJjieriw+aFpxo16swMxUnUiKS7a/r4vtHg==",
       "dev": true,
       "dependencies": {
-        "@babel/types": "^7.15.4"
+        "@babel/types": "^7.16.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -322,12 +323,12 @@
       }
     },
     "node_modules/@babel/helper-module-imports": {
-      "version": "7.15.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.15.4.tgz",
-      "integrity": "sha512-jeAHZbzUwdW/xHgHQ3QmWR4Jg6j15q4w/gCfwZvtqOxoo5DKtLHk8Bsf4c5RZRC7NmLEs+ohkdq8jFefuvIxAA==",
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.16.0.tgz",
+      "integrity": "sha512-kkH7sWzKPq0xt3H1n+ghb4xEMP8k0U7XV3kkB+ZGy69kDk2ySFW1qPi06sjKzFY3t1j6XbJSqr4mF9L7CYVyhg==",
       "dev": true,
       "dependencies": {
-        "@babel/types": "^7.15.4"
+        "@babel/types": "^7.16.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1762,12 +1763,12 @@
       "dev": true
     },
     "node_modules/@babel/types": {
-      "version": "7.15.6",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.15.6.tgz",
-      "integrity": "sha512-BPU+7QhqNjmWyDO0/vitH/CuhpV8ZmK1wpKva8nuyNF5MJfuRNWMc+hc14+u9xT93kvykMdncrJT19h74uB1Ig==",
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.0.tgz",
+      "integrity": "sha512-PJgg/k3SdLsGb3hhisFvtLOw5ts113klrpLuIPtCJIU+BB24fqq6lf8RWqKJEjzqXR9AEH1rIb5XTqwBHB+kQg==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.14.9",
+        "@babel/helper-validator-identifier": "^7.15.7",
         "to-fast-properties": "^2.0.0"
       },
       "engines": {
@@ -1789,6 +1790,33 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "0.8.8",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+      "dev": true,
+      "dependencies": {
+        "@emotion/memoize": "0.7.4"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
+      "dev": true
+    },
+    "node_modules/@emotion/stylis": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
+      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==",
+      "dev": true
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==",
+      "dev": true
+    },
     "node_modules/@eslint/eslintrc": {
       "version": "0.4.3",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.3.tgz",
@@ -3655,6 +3683,27 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/babel-plugin-styled-components": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.1.tgz",
+      "integrity": "sha512-U3wmORxerYBiqcRCo6thItIosEIga3F+ph0jJPkiOZJjyhpZyUZFQV9XvrZ2CbBIihJ3rDBC/itQ+Wx3VHMauw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.16.0",
+        "@babel/helper-module-imports": "^7.16.0",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "lodash": "^4.17.11"
+      },
+      "peerDependencies": {
+        "styled-components": ">= 2"
+      }
+    },
+    "node_modules/babel-plugin-syntax-jsx": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
+      "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=",
+      "dev": true
+    },
     "node_modules/babel-preset-current-node-syntax": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.0.1.tgz",
@@ -3824,6 +3873,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/camelize": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
+      "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=",
+      "dev": true
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001271",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001271.tgz",
@@ -4060,6 +4115,26 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/css-to-react-native": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz",
+      "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==",
+      "dev": true,
+      "dependencies": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
     "node_modules/cssom": {
       "version": "0.4.4",
       "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.4.4.tgz",
@@ -8707,6 +8782,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/postcss-value-parser": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
+      "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
+      "dev": true
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -9564,6 +9645,36 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/styled-components": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.3.tgz",
+      "integrity": "sha512-++4iHwBM7ZN+x6DtPPWkCI4vdtwumQ+inA/DdAsqYd4SVgUKJie5vXyzotA00ttcFdQkCng7zc6grwlfIfw+lw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@babel/traverse": "^7.4.5",
+        "@emotion/is-prop-valid": "^0.8.8",
+        "@emotion/stylis": "^0.8.4",
+        "@emotion/unitless": "^0.7.4",
+        "babel-plugin-styled-components": ">= 1.12.0",
+        "css-to-react-native": "^3.0.0",
+        "hoist-non-react-statics": "^3.0.0",
+        "shallowequal": "^1.1.0",
+        "supports-color": "^5.5.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/styled-components"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0",
+        "react-dom": ">= 16.8.0",
+        "react-is": ">= 16.8.0"
+      }
+    },
     "node_modules/supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -10558,12 +10669,12 @@
       }
     },
     "@babel/helper-annotate-as-pure": {
-      "version": "7.15.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.15.4.tgz",
-      "integrity": "sha512-QwrtdNvUNsPCj2lfNQacsGSQvGX8ee1ttrBrcozUP2Sv/jylewBP/8QFe6ZkBsC8T/GYWonNAWJV4aRR9AL2DA==",
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.0.tgz",
+      "integrity": "sha512-ItmYF9vR4zA8cByDocY05o0LGUkp1zhbTQOH1NFyl5xXEqlTJQCEJjieriw+aFpxo16swMxUnUiKS7a/r4vtHg==",
       "dev": true,
       "requires": {
-        "@babel/types": "^7.15.4"
+        "@babel/types": "^7.16.0"
       }
     },
     "@babel/helper-builder-binary-assignment-operator-visitor": {
@@ -10693,12 +10804,12 @@
       }
     },
     "@babel/helper-module-imports": {
-      "version": "7.15.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.15.4.tgz",
-      "integrity": "sha512-jeAHZbzUwdW/xHgHQ3QmWR4Jg6j15q4w/gCfwZvtqOxoo5DKtLHk8Bsf4c5RZRC7NmLEs+ohkdq8jFefuvIxAA==",
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.16.0.tgz",
+      "integrity": "sha512-kkH7sWzKPq0xt3H1n+ghb4xEMP8k0U7XV3kkB+ZGy69kDk2ySFW1qPi06sjKzFY3t1j6XbJSqr4mF9L7CYVyhg==",
       "dev": true,
       "requires": {
-        "@babel/types": "^7.15.4"
+        "@babel/types": "^7.16.0"
       }
     },
     "@babel/helper-module-transforms": {
@@ -11681,12 +11792,12 @@
       }
     },
     "@babel/types": {
-      "version": "7.15.6",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.15.6.tgz",
-      "integrity": "sha512-BPU+7QhqNjmWyDO0/vitH/CuhpV8ZmK1wpKva8nuyNF5MJfuRNWMc+hc14+u9xT93kvykMdncrJT19h74uB1Ig==",
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.0.tgz",
+      "integrity": "sha512-PJgg/k3SdLsGb3hhisFvtLOw5ts113klrpLuIPtCJIU+BB24fqq6lf8RWqKJEjzqXR9AEH1rIb5XTqwBHB+kQg==",
       "dev": true,
       "requires": {
-        "@babel/helper-validator-identifier": "^7.14.9",
+        "@babel/helper-validator-identifier": "^7.15.7",
         "to-fast-properties": "^2.0.0"
       }
     },
@@ -11702,6 +11813,33 @@
       "integrity": "sha512-6nFkfkmSeV/rqSaS4oWHgmpnYw194f6hmWF5is6b0J1naJZoiD0NTc9AiUwPHvWsowkjuHErCZT1wa0jg+BLIA==",
       "dev": true
     },
+    "@emotion/is-prop-valid": {
+      "version": "0.8.8",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+      "dev": true,
+      "requires": {
+        "@emotion/memoize": "0.7.4"
+      }
+    },
+    "@emotion/memoize": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
+      "dev": true
+    },
+    "@emotion/stylis": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
+      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==",
+      "dev": true
+    },
+    "@emotion/unitless": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==",
+      "dev": true
+    },
     "@eslint/eslintrc": {
       "version": "0.4.3",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.3.tgz",
@@ -13177,6 +13315,24 @@
         "@babel/helper-define-polyfill-provider": "^0.2.2"
       }
     },
+    "babel-plugin-styled-components": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.1.tgz",
+      "integrity": "sha512-U3wmORxerYBiqcRCo6thItIosEIga3F+ph0jJPkiOZJjyhpZyUZFQV9XvrZ2CbBIihJ3rDBC/itQ+Wx3VHMauw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.16.0",
+        "@babel/helper-module-imports": "^7.16.0",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "lodash": "^4.17.11"
+      }
+    },
+    "babel-plugin-syntax-jsx": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
+      "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=",
+      "dev": true
+    },
     "babel-preset-current-node-syntax": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.0.1.tgz",
@@ -13309,6 +13465,12 @@
       "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
       "dev": true
     },
+    "camelize": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
+      "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=",
+      "dev": true
+    },
     "caniuse-lite": {
       "version": "1.0.30001271",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001271.tgz",
@@ -13500,6 +13662,23 @@
         "which": "^2.0.1"
       }
     },
+    "css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=",
+      "dev": true
+    },
+    "css-to-react-native": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz",
+      "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==",
+      "dev": true,
+      "requires": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
     "cssom": {
       "version": "0.4.4",
       "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.4.4.tgz",
@@ -16991,6 +17170,12 @@
         "find-up": "^4.0.0"
       }
     },
+    "postcss-value-parser": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
+      "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
+      "dev": true
+    },
     "prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -17655,6 +17840,24 @@
       "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
       "dev": true
     },
+    "styled-components": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.3.tgz",
+      "integrity": "sha512-++4iHwBM7ZN+x6DtPPWkCI4vdtwumQ+inA/DdAsqYd4SVgUKJie5vXyzotA00ttcFdQkCng7zc6grwlfIfw+lw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@babel/traverse": "^7.4.5",
+        "@emotion/is-prop-valid": "^0.8.8",
+        "@emotion/stylis": "^0.8.4",
+        "@emotion/unitless": "^0.7.4",
+        "babel-plugin-styled-components": ">= 1.12.0",
+        "css-to-react-native": "^3.0.0",
+        "hoist-non-react-statics": "^3.0.0",
+        "shallowequal": "^1.1.0",
+        "supports-color": "^5.5.0"
+      }
+    },
     "supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
diff --git a/package.json b/package.json
index efb0134..ba28974 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
     "react-dom": "^17.0.2",
     "react-hot-loader": "^4.13.0",
     "serve-static": "^1.14.1",
+    "styled-components": "^5.3.3",
     "webpack": "^5.60.0",
     "webpack-cli": "^4.9.1",
     "webpack-dev-middleware": "^5.2.1"
