diff --git a/dist/index.css b/dist/index.css
index a93d037..8b6c682 100644
--- a/dist/index.css
+++ b/dist/index.css
@@ -680,3 +680,23 @@ input.nb-checkbox {
       top: 0px;
       font-size: 18px;
       text-align: center; }
+
+.badge {
+  width: fit-content;
+  padding: 5px;
+  border: 2px solid #000;
+  border-radius: 50px;
+  background-color: #40d39c;
+  box-shadow: 3px 3px 0 0 #000; }
+  .badge .badge-inner {
+    display: flex;
+    height: 100%;
+    margin: 0;
+    justify-content: center;
+    align-items: center;
+    border: 2px solid #000;
+    border-radius: 50px; }
+    .badge .badge-inner .badge-text {
+      color: #031926;
+      padding: 10px;
+      margin: 0; }
diff --git a/dist/index.min.css b/dist/index.min.css
index 9c48f55..f0933ac 100644
--- a/dist/index.min.css
+++ b/dist/index.min.css
@@ -1 +1 @@
-*,*::before,*::after{box-sizing:border-box}html{font-size:16px;font-family:Arial, sans-serif}.nb-button.default{display:inline-block;padding:10px 20px;background-color:#fff;color:#000;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.default:hover{box-shadow:3px 3px 0px #000000;background-color:#aaa}.nb-button.default:focus{outline:none}.nb-button.default.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.orange{display:inline-block;padding:10px 20px;background-color:#ff5733;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.orange:hover{box-shadow:3px 3px 0px #000000;background-color:#d64b2b}.nb-button.orange:focus{outline:none}.nb-button.orange.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.blue{display:inline-block;padding:10px 20px;background-color:#0077b6;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.blue:hover{box-shadow:3px 3px 0px #000000;background-color:#005785}.nb-button.blue:focus{outline:none}.nb-button.blue.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.green{display:inline-block;padding:10px 20px;background-color:#40d39c;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.green:hover{box-shadow:3px 3px 0px #000000;background-color:#30ac7e}.nb-button.green:focus{outline:none}.nb-button.green.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.sky-blue{display:inline-block;padding:10px 20px;background-color:#b9e2f8;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.sky-blue:hover{box-shadow:3px 3px 0px #000000;background-color:#91bed6}.nb-button.sky-blue:focus{outline:none}.nb-button.sky-blue.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.pale-red{display:inline-block;padding:10px 20px;background-color:#ffc5c8;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.pale-red:hover{box-shadow:3px 3px 0px #000000;background-color:#ffb2b2}.nb-button.pale-red:focus{outline:none}.nb-button.pale-red.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.pale-violet{display:inline-block;padding:10px 20px;background-color:#bc98cb;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.pale-violet:hover{box-shadow:3px 3px 0px #000000;background-color:#b482c9}.nb-button.pale-violet:focus{outline:none}.nb-button.pale-violet.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.soft-blue{display:inline-block;padding:10px 20px;background-color:#4799ae;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.soft-blue:hover{box-shadow:3px 3px 0px #000000;background-color:#378589}.nb-button.soft-blue:focus{outline:none}.nb-button.soft-blue.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.pale-cyan{display:inline-block;padding:10px 20px;background-color:#b9e7de;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.pale-cyan:hover{box-shadow:3px 3px 0px #000000;background-color:#a0e5d7}.nb-button.pale-cyan:focus{outline:none}.nb-button.pale-cyan.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.pale-yellow{display:inline-block;padding:10px 20px;background-color:#fdfd96;color:#000;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.pale-yellow:hover{box-shadow:3px 3px 0px #000000;background-color:#fcfc7e}.nb-button.pale-yellow:focus{outline:none}.nb-button.pale-yellow.disabled{background-color:#ccc;cursor:not-allowed}.rounded{border-radius:9999px}.nb-input.default{padding:10px;background-color:#fff;color:#000;border:2px solid #ccc;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.default:hover{background-color:#aaa}.nb-input.default:focus{outline:none;border-color:#aaa}.nb-input.default.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.default::placeholder{color:#000;opacity:1;text-align:left}.nb-input.orange{padding:10px;background-color:#ff5733;color:#000;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.orange:hover{background-color:#d64b2b}.nb-input.orange:focus{outline:none;border-color:#d64b2b}.nb-input.orange.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.orange::placeholder{color:#000;opacity:1;text-align:left}.nb-input.blue{padding:10px;background-color:#0077b6;color:#fff;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.blue:hover{background-color:#005785}.nb-input.blue:focus{outline:none;border-color:#005785}.nb-input.blue.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.blue::placeholder{color:#fff;opacity:1;text-align:left}.nb-input.green{padding:10px;background-color:#40d39c;color:#fff;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.green:hover{background-color:#30ac7e}.nb-input.green:focus{outline:none;border-color:#30ac7e}.nb-input.green.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.green::placeholder{color:#fff;opacity:1;text-align:left}.nb-input.sky-blue{padding:10px;background-color:#b9e2f8;color:#fff;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.sky-blue:hover{background-color:#91bed6}.nb-input.sky-blue:focus{outline:none;border-color:#91bed6}.nb-input.sky-blue.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.sky-blue::placeholder{color:#fff;opacity:1;text-align:left}.nb-input.pale-red{padding:10px;background-color:#ffc5c8;color:#fff;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.pale-red:hover{background-color:#ffb2b2}.nb-input.pale-red:focus{outline:none;border-color:#ffb2b2}.nb-input.pale-red.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.pale-red::placeholder{color:#fff;opacity:1;text-align:left}.nb-input.pale-violet{padding:10px;background-color:#bc98cb;color:#fff;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.pale-violet:hover{background-color:#b482c9}.nb-input.pale-violet:focus{outline:none;border-color:#b482c9}.nb-input.pale-violet.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.pale-violet::placeholder{color:#fff;opacity:1;text-align:left}.nb-input.soft-blue{padding:10px;background-color:#4799ae;color:#fff;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.soft-blue:hover{background-color:#378589}.nb-input.soft-blue:focus{outline:none;border-color:#378589}.nb-input.soft-blue.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.soft-blue::placeholder{color:#fff;opacity:1;text-align:left}.nb-input.pale-cyan{padding:10px;background-color:#b9e7de;color:#fff;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.pale-cyan:hover{background-color:#a0e5d7}.nb-input.pale-cyan:focus{outline:none;border-color:#a0e5d7}.nb-input.pale-cyan.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.pale-cyan::placeholder{color:#fff;opacity:1;text-align:left}.nb-input.pale-yellow{padding:10px;background-color:#fdfd96;color:#000;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.pale-yellow:hover{background-color:#fcfc7e}.nb-input.pale-yellow:focus{outline:none;border-color:#fcfc7e}.nb-input.pale-yellow.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.pale-yellow::placeholder{color:#000;opacity:1;text-align:left}.text-orange{color:#ff5733}.text-blue{color:#0077b6}.text-green{color:#40d39c}.text-sky-blue{color:#b9e2f8}.text-pale-red{color:#ffc5c8}.text-pale-violet{color:#bc98cb}.text-soft-blue{color:#4799ae}.text-pale-cyan{color:#b9e7de}.text-pale-yellow{color:#fdfd96}.bg-orange{background-color:#ff5733}.bg-blue{background-color:#0077b6}.bg-green{background-color:#40d39c}.bg-sky-blue{background-color:#b9e2f8}.bg-pale-red{background-color:#ffc5c8}.bg-pale-violet{background-color:#bc98cb}.bg-soft-blue{background-color:#4799ae}.bg-pale-cyan{background-color:#b9e7de}.bg-pale-yellow{background-color:#fdfd96}.dialog{background:#fff;border-radius:20px;filter:drop-shadow(4px 4px 0px #000);padding:20px;border:3px solid #000;width:20rem}.dialog p{font-size:18px}.button-container{display:flex;text-align:right}.marquee{width:100%;overflow:hidden;white-space:nowrap;border:2px solid black;font-weight:bold;position:relative}.marquee .marquee-content{animation:marquee 10s linear infinite}.marquee .marquee-content span{display:inline-block;padding:0 20px;font-size:24px}@keyframes marquee{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}.card{width:300px;margin:20px;border:2px solid #000;border-radius:8px;overflow:hidden;transition:box-shadow 0.2s ease, transform 0.3s ease}.card:hover{box-shadow:3px 3px 0px #000000;transform:translate(-6px, -6px)}.card a{margin:0;text-decoration:none;color:inherit}.card-thumbnail img{width:100%;height:auto}.card-content{padding:16px}.text-small{font-size:14px;color:#888}.card-content div{font-size:16px;line-height:1.5;color:#333}.card-content strong{cursor:pointer}.avatar{overflow:hidden;width:67px;height:67px;justify-content:center;align-items:center;border:2px solid #000;border-radius:50%;box-shadow:2px 2px 0 0 #031926}.avatar img{border:0;max-width:100%;vertical-align:middle;display:inline-block}
+*,*::before,*::after{box-sizing:border-box}html{font-size:16px;font-family:Arial, sans-serif}.nb-button.default{display:inline-block;padding:10px 20px;background-color:#fff;color:#000;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.default:hover{box-shadow:3px 3px 0px #000000;background-color:#aaa}.nb-button.default:focus{outline:none}.nb-button.default.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.orange{display:inline-block;padding:10px 20px;background-color:#ff5733;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.orange:hover{box-shadow:3px 3px 0px #000000;background-color:#d64b2b}.nb-button.orange:focus{outline:none}.nb-button.orange.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.blue{display:inline-block;padding:10px 20px;background-color:#0077b6;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.blue:hover{box-shadow:3px 3px 0px #000000;background-color:#005785}.nb-button.blue:focus{outline:none}.nb-button.blue.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.green{display:inline-block;padding:10px 20px;background-color:#40d39c;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.green:hover{box-shadow:3px 3px 0px #000000;background-color:#30ac7e}.nb-button.green:focus{outline:none}.nb-button.green.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.sky-blue{display:inline-block;padding:10px 20px;background-color:#b9e2f8;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.sky-blue:hover{box-shadow:3px 3px 0px #000000;background-color:#91bed6}.nb-button.sky-blue:focus{outline:none}.nb-button.sky-blue.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.pale-red{display:inline-block;padding:10px 20px;background-color:#ffc5c8;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.pale-red:hover{box-shadow:3px 3px 0px #000000;background-color:#ffb2b2}.nb-button.pale-red:focus{outline:none}.nb-button.pale-red.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.pale-violet{display:inline-block;padding:10px 20px;background-color:#bc98cb;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.pale-violet:hover{box-shadow:3px 3px 0px #000000;background-color:#b482c9}.nb-button.pale-violet:focus{outline:none}.nb-button.pale-violet.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.soft-blue{display:inline-block;padding:10px 20px;background-color:#4799ae;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.soft-blue:hover{box-shadow:3px 3px 0px #000000;background-color:#378589}.nb-button.soft-blue:focus{outline:none}.nb-button.soft-blue.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.pale-cyan{display:inline-block;padding:10px 20px;background-color:#b9e7de;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.pale-cyan:hover{box-shadow:3px 3px 0px #000000;background-color:#a0e5d7}.nb-button.pale-cyan:focus{outline:none}.nb-button.pale-cyan.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.pale-yellow{display:inline-block;padding:10px 20px;background-color:#fdfd96;color:#000;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.pale-yellow:hover{box-shadow:3px 3px 0px #000000;background-color:#fcfc7e}.nb-button.pale-yellow:focus{outline:none}.nb-button.pale-yellow.disabled{background-color:#ccc;cursor:not-allowed}.rounded{border-radius:9999px}.nb-input.default{padding:10px;background-color:#fff;color:#000;border:2px solid #ccc;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.default:hover{background-color:#aaa}.nb-input.default:focus{outline:none;border-color:#aaa}.nb-input.default.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.default::placeholder{color:#000;opacity:1;text-align:left}.nb-input.orange{padding:10px;background-color:#ff5733;color:#000;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.orange:hover{background-color:#d64b2b}.nb-input.orange:focus{outline:none;border-color:#d64b2b}.nb-input.orange.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.orange::placeholder{color:#000;opacity:1;text-align:left}.nb-input.blue{padding:10px;background-color:#0077b6;color:#fff;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.blue:hover{background-color:#005785}.nb-input.blue:focus{outline:none;border-color:#005785}.nb-input.blue.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.blue::placeholder{color:#fff;opacity:1;text-align:left}.nb-input.green{padding:10px;background-color:#40d39c;color:#fff;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.green:hover{background-color:#30ac7e}.nb-input.green:focus{outline:none;border-color:#30ac7e}.nb-input.green.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.green::placeholder{color:#fff;opacity:1;text-align:left}.nb-input.sky-blue{padding:10px;background-color:#b9e2f8;color:#fff;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.sky-blue:hover{background-color:#91bed6}.nb-input.sky-blue:focus{outline:none;border-color:#91bed6}.nb-input.sky-blue.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.sky-blue::placeholder{color:#fff;opacity:1;text-align:left}.nb-input.pale-red{padding:10px;background-color:#ffc5c8;color:#fff;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.pale-red:hover{background-color:#ffb2b2}.nb-input.pale-red:focus{outline:none;border-color:#ffb2b2}.nb-input.pale-red.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.pale-red::placeholder{color:#fff;opacity:1;text-align:left}.nb-input.pale-violet{padding:10px;background-color:#bc98cb;color:#fff;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.pale-violet:hover{background-color:#b482c9}.nb-input.pale-violet:focus{outline:none;border-color:#b482c9}.nb-input.pale-violet.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.pale-violet::placeholder{color:#fff;opacity:1;text-align:left}.nb-input.soft-blue{padding:10px;background-color:#4799ae;color:#fff;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.soft-blue:hover{background-color:#378589}.nb-input.soft-blue:focus{outline:none;border-color:#378589}.nb-input.soft-blue.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.soft-blue::placeholder{color:#fff;opacity:1;text-align:left}.nb-input.pale-cyan{padding:10px;background-color:#b9e7de;color:#fff;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.pale-cyan:hover{background-color:#a0e5d7}.nb-input.pale-cyan:focus{outline:none;border-color:#a0e5d7}.nb-input.pale-cyan.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.pale-cyan::placeholder{color:#fff;opacity:1;text-align:left}.nb-input.pale-yellow{padding:10px;background-color:#fdfd96;color:#000;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.pale-yellow:hover{background-color:#fcfc7e}.nb-input.pale-yellow:focus{outline:none;border-color:#fcfc7e}.nb-input.pale-yellow.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.pale-yellow::placeholder{color:#000;opacity:1;text-align:left}.text-orange{color:#ff5733}.text-blue{color:#0077b6}.text-green{color:#40d39c}.text-sky-blue{color:#b9e2f8}.text-pale-red{color:#ffc5c8}.text-pale-violet{color:#bc98cb}.text-soft-blue{color:#4799ae}.text-pale-cyan{color:#b9e7de}.text-pale-yellow{color:#fdfd96}.bg-orange{background-color:#ff5733}.bg-blue{background-color:#0077b6}.bg-green{background-color:#40d39c}.bg-sky-blue{background-color:#b9e2f8}.bg-pale-red{background-color:#ffc5c8}.bg-pale-violet{background-color:#bc98cb}.bg-soft-blue{background-color:#4799ae}.bg-pale-cyan{background-color:#b9e7de}.bg-pale-yellow{background-color:#fdfd96}.dialog{background:#fff;border-radius:20px;filter:drop-shadow(4px 4px 0px #000);padding:20px;border:3px solid #000;width:20rem}.dialog p{font-size:18px}.button-container{display:flex;text-align:right}.marquee{width:100%;overflow:hidden;white-space:nowrap;border:2px solid black;font-weight:bold;position:relative}.marquee .marquee-content{animation:marquee 10s linear infinite}.marquee .marquee-content span{display:inline-block;padding:0 20px;font-size:24px}@keyframes marquee{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}.card{width:300px;margin:20px;border:2px solid #000;border-radius:8px;overflow:hidden;transition:box-shadow 0.2s ease, transform 0.3s ease}.card:hover{box-shadow:3px 3px 0px #000000;transform:translate(-6px, -6px)}.card a{margin:0;text-decoration:none;color:inherit}.card-thumbnail img{width:100%;height:auto}.card-content{padding:16px}.text-small{font-size:14px;color:#888}.card-content div{font-size:16px;line-height:1.5;color:#333}.card-content strong{cursor:pointer}.avatar{overflow:hidden;width:67px;height:67px;justify-content:center;align-items:center;border:2px solid #000;border-radius:50%;box-shadow:2px 2px 0 0 #031926}.avatar img{border:0;max-width:100%;vertical-align:middle;display:inline-block}.nb-label{cursor:pointer;display:flex;align-items:center;font-family:"Public Sans", sans-serif;font-size:1rem;color:black;text-transform:uppercase}input.nb-checkbox{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:25px;height:25px;background-color:#fff;border:2px solid black;border-radius:4px;cursor:pointer}input.nb-checkbox:checked{background-color:#007bff;color:#fff}input.nb-checkbox:checked::before{content:"x";font-weight:bold;color:inherit;left:5px;position:relative;top:0px;font-size:18px;text-align:center}.badge{width:fit-content;padding:5px;border:2px solid #000;border-radius:50px;background-color:#40d39c;box-shadow:3px 3px 0 0 #000}.badge .badge-inner{display:flex;height:100%;margin:0;justify-content:center;align-items:center;border:2px solid #000;border-radius:50px}.badge .badge-inner .badge-text{color:#031926;padding:10px;margin:0}
diff --git a/docs/index.html b/docs/index.html
index 54f7908..977844d 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -29,7 +29,7 @@
     <link rel="icon" sizes="32x32" href="assets/logo.png" type="image/x-icon">
     <link rel="icon" sizes="16x16" href="assets/logo.png" type="image/x-icon">
     <link rel="icon" href="assets/logo.png" type="image/x-icon">
-    <link rel="stylesheet" href="https://unpkg.com/neobrutalismcss@latest">
+    <!-- <link rel="stylesheet" href="https://unpkg.com/neobrutalismcss@latest"> -->
     <!-- for dev -->
     <link rel="stylesheet" href="/dist/index.css" />
     <!--  -->
@@ -251,6 +251,32 @@ <h3>Card</h3>
                   </code>
                 </pre>
             </figure>
+        </section>
+        <section class="sections">
+            <h3>Badge</h3>
+            <p class="component-description">
+                Section presents a badge with text. It illustrates a user interface component
+                provided by NeoBrutalismCSS for badges.
+            </p>
+            <div class="badge">
+                <div class="badge-inner">
+                    <p class="badge-text">Excellence</p>
+                </div>
+            </div>
+            <figure class="highlight">
+                <pre>
+                  <button class="copy tooltip copy-button"><img src="assets/copy.svg" alt="copy"> <span class="tooltiptext">Copy to clipboard</span></button>
+                  <code class="language-html" data-lang="html"> 
+<span class="tag">&lt;div</span> <span class="class">class=</span><span class="name">"badge"</span><span class="tag">&gt;</span>
+    <span class="tag">&lt;div</span> <span class="class">class=</span><span class="name">"badge-inner"</span><span class="tag">&gt;</span>
+        <span class="tag">&lt;p</span> <span class="class">class=</span><span class="name">"badge-text"</span><span class="tag">&gt;</span>Excellence<span class="tag">&lt;/p&gt;</span>
+    <span class="tag">&lt;/div&gt;</span>
+<span class="tag">&lt;/div&gt;</span>
+                  </code>
+                </pre>
+            </figure>
+
+
         </section>
         <section class="sections">
             <h3>Dialog</h3>
diff --git a/docs/styles.css b/docs/styles.css
index 3fdd8b9..426d863 100644
--- a/docs/styles.css
+++ b/docs/styles.css
@@ -207,6 +207,7 @@ h2 {
   font-family: "Lexend Mega", sans-serif;
   line-height: 2rem;
 }
+
 h3 {
   font-family: "Lexend Mega", sans-serif;
 }
diff --git a/package.json b/package.json
index de75996..f71ecde 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "neobrutalismcss",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "NeoBrutalismCSS design framework that embraces the aesthetics of neo-brutalism in web",
   "main": "dist/index.min.css",
   "repository": {
diff --git a/src/scss/components/_badge.scss b/src/scss/components/_badge.scss
new file mode 100644
index 0000000..c9e359a
--- /dev/null
+++ b/src/scss/components/_badge.scss
@@ -0,0 +1,23 @@
+.badge {
+  width: fit-content;
+  padding: 5px;
+  border: 2px solid #000;
+  border-radius: 50px;
+  background-color: #40d39c;
+  box-shadow: 3px 3px 0 0 #000;
+
+  .badge-inner {
+    display: flex;
+    height: 100%;
+    margin: 0;
+    justify-content: center;
+    align-items: center;
+    border: 2px solid #000;
+    border-radius: 50px;
+    .badge-text {
+      color: #031926;
+      padding: 10px;
+      margin: 0;
+    }
+  }
+}
diff --git a/src/scss/index.scss b/src/scss/index.scss
index 2bc84ca..6875f3f 100644
--- a/src/scss/index.scss
+++ b/src/scss/index.scss
@@ -11,3 +11,4 @@
 @import "components/cards";
 @import "components/avatar";
 @import "components/checkbox";
+@import "components/badge";