diff --git a/README.md b/README.md
index 7cd371e..c8595cb 100644
--- a/README.md
+++ b/README.md
@@ -1,69 +1,153 @@
-# Toast - A Bootstrap 4.2+ jQuery plugin
+# Toast - A Bootstrap 5.0 jQuery plugin
 
-* [About](#about)
-* [Usage](#usage)
-    * [Live Example](https://jsfiddle.net/47n5ygth/)
-* [Contributing](#contributing)
+-   [About](#about)
+-   [Updates](#updates)
+-   [Usage](#usage)
+    -   [Live Example](https://romantic-wozniak-01d0b4.netlify.app/)
+-   [Contributing](#contributing)
+    -   [Contributors](#contributors)
 
-### About
+## About
 
-As of Bootstrap 4.2, [toasts](https://getbootstrap.com/docs/4.2/components/toasts/) have been introduced and the aim of this plugin is to make them easier to use.
+As of **Bootstrap 4.2**, [toasts](https://getbootstrap.com/docs/4.2/components/toasts/) have been introduced and the aim of this plugin is to make them easier to use. (original)
 
-### Usage
+## Updates
 
-#### Gloabls
+As Bootstrap was updated to version 5.0(beta), the usage of the toast component changed. So, we fixed some code that was not compatible with Bootstrap 4 and added some new features.
+
+-   Bootstrap Core updated to 5.0(beta)
+-   Deleted incompatible codes and fixed
+-   jQuery updated to latest version
+-   Icon and more background colors are supported
+-   Minor code errors and mistakes fixed
+
+## Usage
+
+### Global Variables (or default values)
 
 Modify the global variables to apply specific rules/styles to all your toasts.
 
-```javascript
+```js
+// default option values
 $.toastDefaults = {
-    position: 'top-right', /** top-left/top-right/top-center/bottom-left/bottom-right/bottom-center - Where the toast will show up **/
-    dismissible: true, /** true/false - If you want to show the button to dismiss the toast manually **/
-    stackable: true, /** true/false - If you want the toasts to be stackable **/
-    pauseDelayOnHover: true, /** true/false - If you want to pause the delay of toast when hovering over the toast **/
+    position: "top-right",
+    dismissible: true,
+    stackable: true, // stackable & pauseDelayOnHover options are incompatible
+    pauseDelayOnHover: false,
     style: {
-        toast: '', /** Classes you want to apply separated my a space to each created toast element (.toast) **/
-        info: '', /** Classes you want to apply separated my a space to modify the "info" type style  **/
-        success: '', /** Classes you want to apply separated my a space to modify the "success" type style  **/
-        warning: '', /** Classes you want to apply separated my a space to modify the "warning" type style  **/
-        error: '', /** Classes you want to apply separated my a space to modify the "error" type style  **/
+        // user custom style classname
+        toast: "",
+        info: "",
+        success: "",
+        warning: "",
+        error: "",
+        primary: "",
+        secondary: "",
+        light: "",
+        dark: "",
+    },
+};
+```
+
+### Initializing Global Variables
+
+| Option Name                       | Type    | Description                                                                                                                            | Values                                                                                                                                  |
+| :-------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| $.toastDefaults.position          | String  | Set toast & snack position from the container(or viewport).                                                                            | 'top-right' \| 'top-center' \| 'top-left' \| 'bottom-right' \| 'bottom-center' \| 'bottom-left' (middle option currently not-supported) |
+| $.toastDefaults.dismissible       | Boolean | Enables toast & snack dismissible with dismiss button.                                                                                 | true \| false                                                                                                                           |
+| $.toastDefaults.stackable         | Boolean | Enables toast & snack stackable. (not compatible with 'pauseDelayOnHover' option.)                                                     | true \| false                                                                                                                           |
+| $.toastDefaults.pauseDelayOnHover | Boolean | Enables toast & snack to stop auto-hide when hover mouse pointer on specific toast or snack. (not compatible with 'stackable' option.) | true \| false                                                                                                                           |
+
+```js
+// plugin initializing function
+$.toastInit = function (opts) {
+    const { position, dismissible, stackable, pauseDelayOnHover } = opts;
+
+    // set values
+    $.toastDefaults.position = position ?? $.toastDefaults.position;
+    $.toastDefaults.dismissible = dismissible ?? $.toastDefaults.dismissible;
+    $.toastDefaults.stackable = stackable ?? $.toastDefaults.stackable;
+    $.toastDefaults.pauseDelayOnHover = pauseDelayOnHover ?? $.toastDefaults.pauseDelayOnHover;
+
+    // check incompatible variables
+    if ($.toastDefaults.stackable) {
+        $.toastDefaults.pauseDelayOnHover = false;
+    } else {
+        $.toastDefaults.pauseDelayOnHover = true;
     }
 };
 ```
 
-#### Snack
+```js
+// initializing example in sample.html
+$.toastInit({
+    position: "bottom-center",
+    dismissible: true,
+    stackable: true, // stackable & pauseDelayOnHover options are incompatible
+    pauseDelayOnHover: false,
+});
+```
+
+---
 
-A "snack" is a bitesized "toast".
+### Snack (customized toast)
 
-```javascript
-$.snack(type, title, delay)
+<center><img src="http://soya.moe:463/CDN/snack.png" width="60%"></center>
+
+```js
+$.snack = function (type, content, delay) {
+    return render({
+        type,
+        content,
+        delay,
+    });
+};
 ```
-<img src="https://i.gyazo.com/165671094c4c956bf89a05f4d9f089b1.png">
 
-**Note:** The final argument `delay` is omitable. If omitted, the toast will remain forever.
+**Note:** The final argument `delay` is omittable (optional). If omitted, the toast will remain forever.
 
-#### Toast
+### Toast
 
-```javascript
+<center><img src="http://soya.moe:463/CDN/toast.png" width="60%"></center>
+
+```js
 $.toast({
-    type: 'info',
-    title: 'Notice!',
-    subtitle: '11 mins ago',
-    content: 'Hello, world! This is a toast message.',
+    type: type,
+    title: title,
+    subtitle: "11 mins ago",
+    content: content,
     delay: 5000,
+    icon: "fab fa-github", // font-awesome6 icon class
     img: {
-        src: 'https://via.placeholder.com/20',
-        class: 'rounded-0', /**  Classes you want to apply separated my a space to modify the image **/
-        alt: 'Image'
-    }
+        src: IMG_URL,
+        alt: "Image",
+    },
 });
 ```
 
-<img src="https://i.gyazo.com/63c444e180d5d18ef8a71df2969cc0cc.png">
+**Note:** The `icon` and `img` options are compatible but not recommended to use them together.
+
+---
+
+### Live Example (from Netlify)
+
+[Live Demo](https://romantic-wozniak-01d0b4.netlify.app/)
+
+![live-demo](http://soya.moe:463/CDN/live-demo.png)
 
-### Contributing
+---
+
+## Contributing
 
 Feel free to contribute in any of the ways outlined:
 
-- Submit issues/pull requests
-- Tell us how you're using this plugin in *your* project
+-   Submit issues/pull requests
+-   Tell us how you're using this plugin in _your_ project
+
+[@Script47/Toast](https://github.com/Script47/Toast)
+
+### Contributors
+
+Thanks to all contributors.
+
+[@yuiopna](https://github.com/yuiopna), [@shd5632](https://github.com/shd5632), [@Phudal](https://github.com/Phudal)
diff --git a/_config.yml b/_config.yml
deleted file mode 100644
index fff4ab9..0000000
--- a/_config.yml
+++ /dev/null
@@ -1 +0,0 @@
-theme: jekyll-theme-minimal
diff --git a/dist/toast.min.css b/dist/toast.min.css
deleted file mode 100644
index 819cea8..0000000
--- a/dist/toast.min.css
+++ /dev/null
@@ -1 +0,0 @@
-.toast-container{position:fixed;z-index:1055;margin:5px}.top-right{top:0;right:0}.top-left{top:0;left:0}.top-center{transform:translateX(-50%);top:0;left:50%}.bottom-right{right:0;bottom:0}.bottom-left{left:0;bottom:0}.bottom-center{transform:translateX(-50%);bottom:0;left:50%}.toast-container>.toast{min-width:150px;background:0 0;border:none}.toast-container>.toast>.toast-header{border:none}.toast-container>.toast>.toast-header strong{padding-right:20px}.toast-container>.toast>.toast-body{background:#fff}
diff --git a/dist/toast.min.js b/dist/toast.min.js
deleted file mode 100644
index 9960b28..0000000
--- a/dist/toast.min.js
+++ /dev/null
@@ -1,6 +0,0 @@
-(function(a){function f(b){if(!a("#toast-container").length){var d="top-right top-left top-center bottom-right bottom-left bottom-center".split(" ").includes(a.toastDefaults.position)?a.toastDefaults.position:"top-right";a("body").prepend('<div id="toast-container" class="toast-container" aria-live="polite" aria-atomic="true"></div>');a("#toast-container").addClass(d)}d=a("#toast-container");var c="",e=c="",g=b.id||"toast-"+l,t=b.type,u=b.title,m=b.subtitle,n=b.content,h=b.img,p=b.delay?'data-delay="'+
-    b.delay+'"':'data-autohide="false"',q="",r=a.toastDefaults.dismissible,v=a.toastDefaults.style.toast,k=!1;"undefined"!==typeof b.dismissible&&(r=b.dismissible);switch(t){case "info":e=a.toastDefaults.style.info||"bg-info";c=a.toastDefaults.style.info||"text-white";break;case "success":e=a.toastDefaults.style.success||"bg-success";c=a.toastDefaults.style.info||"text-white";break;case "warning":e=a.toastDefaults.style.warning||"bg-warning";c=a.toastDefaults.style.warning||"text-white";break;case "error":e=
-    a.toastDefaults.style.error||"bg-danger",c=a.toastDefaults.style.error||"text-white"}a.toastDefaults.pauseDelayOnHover&&b.delay&&(p='data-autohide="false"',q='data-hide-after="'+(Math.floor(Date.now()/1E3)+b.delay/1E3)+'"');c='<div id="'+g+'" class="toast '+v+'" role="alert" aria-live="assertive" aria-atomic="true" '+p+" "+q+'><div class="toast-header '+(e+" "+c+'">');h&&(c+='<img src="'+h.src+'" class="mr-2 '+(h["class"]||"")+'" alt="'+(h.alt||"Image")+'">');c+='<strong class="mr-auto">'+u+"</strong>";
-    m&&(c+='<small class="text-white">'+m+"</small>");r&&(c+='<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">\n                        <span aria-hidden="true" class="text-white">&times;</span>\n                    </button>');c+="</div>";n&&(c+='<div class="toast-body">\n                        '+n+"\n                    </div>");c+="</div>";a.toastDefaults.stackable||d.find(".toast").each(function(){a(this).remove()});d.append(c);d.find(".toast:last").toast("show");
-    a.toastDefaults.pauseDelayOnHover&&(setTimeout(function(){k||a("#"+g).toast("hide")},b.delay),a("body").on("mouseover","#"+g,function(){k=!0}),a(document).on("mouseleave","#"+g,function(){var w=Math.floor(Date.now()/1E3),x=parseInt(a(this).data("hideAfter"));k=!1;w>=x&&a(this).toast("hide")}));l++}a.toastDefaults={position:"top-right",dismissible:!0,stackable:!0,pauseDelayOnHover:!0,style:{toast:"",info:"",success:"",warning:"",error:""}};a("body").on("hidden.bs.toast",".toast",function(){a(this).remove()});
-    var l=1;a.snack=function(b,d,c){return f({type:b,title:d,delay:c})};a.toast=function(b){return f(b)}})(jQuery);
diff --git a/example/index.html b/example/index.html
index 56b217f..38eabde 100644
--- a/example/index.html
+++ b/example/index.html
@@ -1,211 +1,150 @@
 <!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
-    <link rel="stylesheet" href="../dist/toast.min.css ">
-
-    <title>Toast</title>
-</head>
-
-<body>
-<div class="jumbotron bg-primary text-white jumbotron-fluid">
-    <div class="container">
-        <h1 class="text-center display-4">Toast</h1>
-        <h3 class="text-center">A jQuery plugin for Bootstrap 4.2+</h3>
-    </div>
-</div>
-
-<div class="container-fluid text-center">
-    <button class="snack btn btn-primary">Snack</button>
-    <button class="toast-btn btn btn-primary">Toast</button>
-</div>
-
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac malesuada ipsum. Vestibulum in nunc sed erat
-    facilisis lacinia in vitae lacus. Curabitur ornare nulla non urna posuere cursus. Aliquam in molestie augue, ac
-    vehicula est. Pellentesque eget massa nibh. Nulla maximus quam laoreet finibus dictum. Aliquam pretium porta
-    malesuada. Cras pretium odio massa, non blandit ligula maximus at. Proin sollicitudin felis sollicitudin turpis
-    mattis ultricies.</p>
-
-<p>Donec rutrum, magna ut lacinia aliquam, dui justo consequat eros, non feugiat lectus ligula non lacus. Donec
-    consequat pharetra posuere. Pellentesque malesuada sodales erat bibendum condimentum. Ut porttitor dignissim semper.
-    Quisque sed urna venenatis, sollicitudin tellus vitae, ultricies justo. Suspendisse potenti. Donec in sapien
-    molestie, pharetra nisl sit amet, pulvinar erat. Donec ultricies mauris enim, non vehicula sapien malesuada eget.
-    Aliquam tristique accumsan magna, eget facilisis nulla convallis sed. Fusce malesuada ipsum sem, eget finibus arcu
-    euismod id. Mauris fringilla libero felis, vitae iaculis ante vehicula vitae. Pellentesque ullamcorper semper
-    vestibulum. In rutrum at sapien et tincidunt.</p>
-
-<p>Aliquam mauris arcu, euismod vel porta in, consequat in augue. Integer volutpat tincidunt arcu, et iaculis est
-    egestas in. Nam nibh neque, consequat quis dolor et, mollis viverra erat. Duis dapibus lacus et pharetra rutrum.
-    Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut tempor nibh sit amet eros
-    commodo tristique. Maecenas maximus nisi sit amet tempus venenatis.</p>
-
-<p>Mauris hendrerit neque eget sapien efficitur, ac hendrerit lorem ultrices. Praesent nec lorem ac tellus viverra
-    sollicitudin posuere in mauris. Cras vulputate arcu at ligula condimentum semper. Fusce erat justo, luctus non
-    interdum vitae, rhoncus sed lorem. Pellentesque et nisi vel felis finibus efficitur eu tristique ex. Aenean ac
-    lacinia lectus. Vestibulum augue ante, maximus at nisi vel, eleifend convallis nunc. Vivamus tempor arcu neque, non
-    auctor enim vehicula et. Integer viverra faucibus consectetur. Maecenas id vestibulum velit, a mollis nulla. Cras
-    vitae velit orci. Nunc volutpat urna quam, non aliquet nisl placerat ac.</p>
-
-<p>Nunc porta eu mi eget dignissim. Pellentesque hendrerit odio nec risus facilisis pulvinar. Nam laoreet a libero id
-    commodo. Vivamus elementum enim nec tincidunt suscipit. Vestibulum a neque molestie, imperdiet turpis sed,
-    ullamcorper ex. Integer et pharetra nulla. Maecenas egestas ut augue non sodales. Nunc aliquet a mauris id
-    consectetur. Integer tristique ligula eu pellentesque vulputate. Nunc pellentesque eros a ipsum mattis, finibus
-    maximus libero commodo. Cras in posuere lorem, non porttitor diam. Phasellus lacus augue, tempus at turpis ac,
-    malesuada eleifend orci. Etiam commodo elementum vehicula. Sed et enim at urna pretium porttitor vel at lectus.
-    Nulla consectetur nisl vitae nisl iaculis vulputate. Donec ac nisi cursus, pharetra augue id, eleifend augue.</p>
-
-<p>Nunc porta eu mi eget dignissim. Pellentesque hendrerit odio nec risus facilisis pulvinar. Nam laoreet a libero id
-    commodo. Vivamus elementum enim nec tincidunt suscipit. Vestibulum a neque molestie, imperdiet turpis sed,
-    ullamcorper ex. Integer et pharetra nulla. Maecenas egestas ut augue non sodales. Nunc aliquet a mauris id
-    consectetur. Integer tristique ligula eu pellentesque vulputate. Nunc pellentesque eros a ipsum mattis, finibus
-    maximus libero commodo. Cras in posuere lorem, non porttitor diam. Phasellus lacus augue, tempus at turpis ac,
-    malesuada eleifend orci. Etiam commodo elementum vehicula. Sed et enim at urna pretium porttitor vel at lectus.
-    Nulla consectetur nisl vitae nisl iaculis vulputate. Donec ac nisi cursus, pharetra augue id, eleifend augue.</p>
-
-<p>Nunc porta eu mi eget dignissim. Pellentesque hendrerit odio nec risus facilisis pulvinar. Nam laoreet a libero id
-    commodo. Vivamus elementum enim nec tincidunt suscipit. Vestibulum a neque molestie, imperdiet turpis sed,
-    ullamcorper ex. Integer et pharetra nulla. Maecenas egestas ut augue non sodales. Nunc aliquet a mauris id
-    consectetur. Integer tristique ligula eu pellentesque vulputate. Nunc pellentesque eros a ipsum mattis, finibus
-    maximus libero commodo. Cras in posuere lorem, non porttitor diam. Phasellus lacus augue, tempus at turpis ac,
-    malesuada eleifend orci. Etiam commodo elementum vehicula. Sed et enim at urna pretium porttitor vel at lectus.
-    Nulla consectetur nisl vitae nisl iaculis vulputate. Donec ac nisi cursus, pharetra augue id, eleifend augue.</p>
-
-<p>Nunc porta eu mi eget dignissim. Pellentesque hendrerit odio nec risus facilisis pulvinar. Nam laoreet a libero id
-    commodo. Vivamus elementum enim nec tincidunt suscipit. Vestibulum a neque molestie, imperdiet turpis sed,
-    ullamcorper ex. Integer et pharetra nulla. Maecenas egestas ut augue non sodales. Nunc aliquet a mauris id
-    consectetur. Integer tristique ligula eu pellentesque vulputate. Nunc pellentesque eros a ipsum mattis, finibus
-    maximus libero commodo. Cras in posuere lorem, non porttitor diam. Phasellus lacus augue, tempus at turpis ac,
-    malesuada eleifend orci. Etiam commodo elementum vehicula. Sed et enim at urna pretium porttitor vel at lectus.
-    Nulla consectetur nisl vitae nisl iaculis vulputate. Donec ac nisi cursus, pharetra augue id, eleifend augue.</p>
-
-<p>Nunc porta eu mi eget dignissim. Pellentesque hendrerit odio nec risus facilisis pulvinar. Nam laoreet a libero id
-    commodo. Vivamus elementum enim nec tincidunt suscipit. Vestibulum a neque molestie, imperdiet turpis sed,
-    ullamcorper ex. Integer et pharetra nulla. Maecenas egestas ut augue non sodales. Nunc aliquet a mauris id
-    consectetur. Integer tristique ligula eu pellentesque vulputate. Nunc pellentesque eros a ipsum mattis, finibus
-    maximus libero commodo. Cras in posuere lorem, non porttitor diam. Phasellus lacus augue, tempus at turpis ac,
-    malesuada eleifend orci. Etiam commodo elementum vehicula. Sed et enim at urna pretium porttitor vel at lectus.
-    Nulla consectetur nisl vitae nisl iaculis vulputate. Donec ac nisi cursus, pharetra augue id, eleifend augue.</p>
-
-<p>Nunc porta eu mi eget dignissim. Pellentesque hendrerit odio nec risus facilisis pulvinar. Nam laoreet a libero id
-    commodo. Vivamus elementum enim nec tincidunt suscipit. Vestibulum a neque molestie, imperdiet turpis sed,
-    ullamcorper ex. Integer et pharetra nulla. Maecenas egestas ut augue non sodales. Nunc aliquet a mauris id
-    consectetur. Integer tristique ligula eu pellentesque vulputate. Nunc pellentesque eros a ipsum mattis, finibus
-    maximus libero commodo. Cras in posuere lorem, non porttitor diam. Phasellus lacus augue, tempus at turpis ac,
-    malesuada eleifend orci. Etiam commodo elementum vehicula. Sed et enim at urna pretium porttitor vel at lectus.
-    Nulla consectetur nisl vitae nisl iaculis vulputate. Donec ac nisi cursus, pharetra augue id, eleifend augue.</p>
-
-<p>Nunc porta eu mi eget dignissim. Pellentesque hendrerit odio nec risus facilisis pulvinar. Nam laoreet a libero id
-    commodo. Vivamus elementum enim nec tincidunt suscipit. Vestibulum a neque molestie, imperdiet turpis sed,
-    ullamcorper ex. Integer et pharetra nulla. Maecenas egestas ut augue non sodales. Nunc aliquet a mauris id
-    consectetur. Integer tristique ligula eu pellentesque vulputate. Nunc pellentesque eros a ipsum mattis, finibus
-    maximus libero commodo. Cras in posuere lorem, non porttitor diam. Phasellus lacus augue, tempus at turpis ac,
-    malesuada eleifend orci. Etiam commodo elementum vehicula. Sed et enim at urna pretium porttitor vel at lectus.
-    Nulla consectetur nisl vitae nisl iaculis vulputate. Donec ac nisi cursus, pharetra augue id, eleifend augue.</p>
-
-<p>Nunc porta eu mi eget dignissim. Pellentesque hendrerit odio nec risus facilisis pulvinar. Nam laoreet a libero id
-    commodo. Vivamus elementum enim nec tincidunt suscipit. Vestibulum a neque molestie, imperdiet turpis sed,
-    ullamcorper ex. Integer et pharetra nulla. Maecenas egestas ut augue non sodales. Nunc aliquet a mauris id
-    consectetur. Integer tristique ligula eu pellentesque vulputate. Nunc pellentesque eros a ipsum mattis, finibus
-    maximus libero commodo. Cras in posuere lorem, non porttitor diam. Phasellus lacus augue, tempus at turpis ac,
-    malesuada eleifend orci. Etiam commodo elementum vehicula. Sed et enim at urna pretium porttitor vel at lectus.
-    Nulla consectetur nisl vitae nisl iaculis vulputate. Donec ac nisi cursus, pharetra augue id, eleifend augue.</p>
-
-<p>Nunc porta eu mi eget dignissim. Pellentesque hendrerit odio nec risus facilisis pulvinar. Nam laoreet a libero id
-    commodo. Vivamus elementum enim nec tincidunt suscipit. Vestibulum a neque molestie, imperdiet turpis sed,
-    ullamcorper ex. Integer et pharetra nulla. Maecenas egestas ut augue non sodales. Nunc aliquet a mauris id
-    consectetur. Integer tristique ligula eu pellentesque vulputate. Nunc pellentesque eros a ipsum mattis, finibus
-    maximus libero commodo. Cras in posuere lorem, non porttitor diam. Phasellus lacus augue, tempus at turpis ac,
-    malesuada eleifend orci. Etiam commodo elementum vehicula. Sed et enim at urna pretium porttitor vel at lectus.
-    Nulla consectetur nisl vitae nisl iaculis vulputate. Donec ac nisi cursus, pharetra augue id, eleifend augue.</p>
-
-<p>Nunc porta eu mi eget dignissim. Pellentesque hendrerit odio nec risus facilisis pulvinar. Nam laoreet a libero id
-    commodo. Vivamus elementum enim nec tincidunt suscipit. Vestibulum a neque molestie, imperdiet turpis sed,
-    ullamcorper ex. Integer et pharetra nulla. Maecenas egestas ut augue non sodales. Nunc aliquet a mauris id
-    consectetur. Integer tristique ligula eu pellentesque vulputate. Nunc pellentesque eros a ipsum mattis, finibus
-    maximus libero commodo. Cras in posuere lorem, non porttitor diam. Phasellus lacus augue, tempus at turpis ac,
-    malesuada eleifend orci. Etiam commodo elementum vehicula. Sed et enim at urna pretium porttitor vel at lectus.
-    Nulla consectetur nisl vitae nisl iaculis vulputate. Donec ac nisi cursus, pharetra augue id, eleifend augue.</p>
-
-<p>Nunc porta eu mi eget dignissim. Pellentesque hendrerit odio nec risus facilisis pulvinar. Nam laoreet a libero id
-    commodo. Vivamus elementum enim nec tincidunt suscipit. Vestibulum a neque molestie, imperdiet turpis sed,
-    ullamcorper ex. Integer et pharetra nulla. Maecenas egestas ut augue non sodales. Nunc aliquet a mauris id
-    consectetur. Integer tristique ligula eu pellentesque vulputate. Nunc pellentesque eros a ipsum mattis, finibus
-    maximus libero commodo. Cras in posuere lorem, non porttitor diam. Phasellus lacus augue, tempus at turpis ac,
-    malesuada eleifend orci. Etiam commodo elementum vehicula. Sed et enim at urna pretium porttitor vel at lectus.
-    Nulla consectetur nisl vitae nisl iaculis vulputate. Donec ac nisi cursus, pharetra augue id, eleifend augue.</p>
-
-<div class="container-fluid text-center">
-    <button class="snack btn btn-primary">Snack</button>
-    <button class="toast-btn btn btn-primary">Toast</button>
-</div>
-
-<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
-<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
-<script src="../dist/toast.min.js"></script>
-
-<script>
-    const TYPES = ['info', 'warning', 'success', 'error'],
-        TITLES = {
-            'info': 'Notice!',
-            'success': 'Awesome!',
-            'warning': 'Watch Out!',
-            'error': 'Doh!'
-        },
-        CONTENT = {
-            'info': 'Hello, world! This is a toast message.',
-            'success': 'The action has been completed.',
-            'warning': 'It\'s all about to go wrong',
-            'error': 'It all went wrong.'
-        },
-        POSITION = ['top-right', 'top-left', 'top-center', 'bottom-right', 'bottom-left', 'bottom-center'];
-
-    $.toastDefaults.position = 'bottom-center';
-    $.toastDefaults.dismissible = true;
-    $.toastDefaults.stackable = true;
-    $.toastDefaults.pauseDelayOnHover = true;
-
-    $('.snack').click(function () {
-        var type = TYPES[Math.floor(Math.random() * TYPES.length)],
-            content = CONTENT[type];
-
-        $.snack(type, content);
-    });
+<html lang="ko">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta http-equiv="X-UA-Compatible" content="ie=edge">
+
+        <!-- Bootstrap 5.0 Core CSS-->
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
+
+        <!-- Third party plugins & Custom css -->
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
+        <link rel="stylesheet" href="../src/css/toast.css ">
+        <title>Toast v2</title>
+    </head>
+
+    <body>
+        <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
+            <div class="container-fluid">
+            <a class="navbar-brand" href="#">Bootstrap Toast v2.0.0</a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+        
+            <div class="collapse navbar-collapse" id="navbarsExampleDefault">
+                <ul class="navbar-nav me-auto mb-2 mb-md-0"></ul>
+                <a class="btn btn-outline-success git-link" href="https://github.com/SoyaNyan/Toast" target="_blank"><i class="fab fa-github"></i> Git Repository</a>
+            </div>
+            </div>
+        </nav>
+
+        <main class="container mt-5">
+            <div class="starter-template text-center py-5 px-3">
+                <h1>Bootstrap 5.0 Toast Example</h1>
+                <p class="lead">The easest way to use toast, the bootstrap component.</p>
+            </div>
+            <div class="container-fluid text-center">
+                <div class="row justify-content-center">
+                    <div class="col-5">
+                        <div class="input-group">
+                            <select class="form-select position-select" id="toast-position">
+                                <option value="top-right" selected>Top-right</option>
+                                <option value="top-left">Top-left</option>
+                                <option value="top-center">Top-center</option>
+                                <option value="bottom-right">Bottom-right</option>
+                                <option value="bottom-left">Bottom-left</option>
+                                <option value="bottom-center">Bottom-center</option>
+                            </select>
+                            <button class="btn btn-info text-white snack-btn" type="button"><strong>Snack</strong></button>
+                            <button class="btn btn-primary toast-btn" type="button"><strong>Toast</strong></button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- github repo widget -->
+            <div class="row justify-content-center mt-5">
+                <div class="col-6 text-center">
+                    <iframe src="http://tylerlh.github.com/github-latest-commits-widget/?username=SoyaNyan&repo=Toast&limit=LIMIT" allowtransparency="true" frameborder="0" scrolling="no" width="502px" height="252px"></iframe>
+                </div>
+            </div>
+        </main><!-- /.container -->
+
+        <!-- jQuery & Boostrap Core JS -->
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/js/all.min.js"></script>
+        <script src="../src/js/toast.js"></script>
+
+        <script>
+            const TYPES = ['info', 'warning', 'success', 'error', 'primary', 'secondary', 'light', 'dark'];
+            const TITLES = {
+                    'info': 'Notice!',
+                    'success': 'Awesome!',
+                    'warning': 'Watch Out!',
+                    'error': 'Doh!',
+                    'primary': 'Notice!',
+                    'secondary': 'Awesome!',
+                    'light': 'Watch Out!',
+                    'dark': 'Doh!'
+                };
+            const CONTENT = {
+                    'info': 'Hello, world! This is a toast message.',
+                    'success': 'The action has been completed.',
+                    'warning': 'It\'s all about to go wrong',
+                    'error': 'It all went wrong.',
+                    'primary': 'Hello, world! This is a toast message.',
+                    'secondary': 'The action has been completed.',
+                    'light': 'It\'s all about to go wrong',
+                    'dark': 'It all went wrong.'
+                };
+            const IMG_URL = 'https://via.placeholder.com/20';
+
+            $.toastInit({
+                position: 'bottom-center',
+                dismissible: true,
+                stackable: true,
+                pauseDelayOnHover: false
+            });
 
-    $('.toast-btn').click(function () {
-        var rng = Math.floor(Math.random() * 2) + 1,
-            type = TYPES[Math.floor(Math.random() * TYPES.length)],
-            title = TITLES[type],
-            content = CONTENT[type];
+            $('.snack-btn').click(() => {
+                let type = TYPES[Math.floor(Math.random() * TYPES.length)];
+                let content = CONTENT[type];
 
-        if (rng === 1) {
-            $.toast({
-                type: type,
-                title: title,
-                subtitle: '11 mins ago',
-                content: content,
-                delay: 5000
+                $.toastInit({
+                    position: $('#toast-position').val()
+                });
+                $.snack(type, content, 5000);
             });
-        } else {
-            $.toast({
-                type: type,
-                title: title,
-                subtitle: '11 mins ago',
-                content: content,
-                delay: 5000,
-                img: {
-                    src: 'https://via.placeholder.com/20',
-                    alt: 'Image'
+
+            $('.toast-btn').click(() => {
+                let rng = Math.floor(Math.random() * 2) + 1;
+                let type = TYPES[Math.floor(Math.random() * TYPES.length)];
+                let title = TITLES[type];
+                let content = CONTENT[type];
+
+                $.toastInit({
+                    position: $('#toast-position').val()
+                });
+                if (rng === 1) {
+                    $.toast({
+                        type: type,
+                        title: title,
+                        subtitle: '11 mins ago',
+                        content: content,
+                        delay: 5000,
+                        icon: 'fab fa-github'
+                    });
+                } else {
+                    $.toast({
+                        type: type,
+                        title: title,
+                        subtitle: '11 mins ago',
+                        content: content,
+                        delay: 5000,
+                        img: {
+                            src: IMG_URL,
+                            alt: 'Image'
+                        }
+                    });
                 }
             });
-        }
-    });
-</script>
-</body>
 
+            $('.position-select').on('change', () => {
+                if($('#toast-container')) {
+                    $('#toast-container').remove();
+                }
+            });
+        </script>
+    </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
deleted file mode 100644
index 459681c..0000000
--- a/package-lock.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "bs4-toast",
-  "version": "1.2.0",
-  "lockfileVersion": 1,
-  "requires": true,
-  "dependencies": {
-    "bootstrap": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.5.0.tgz",
-      "integrity": "sha512-Z93QoXvodoVslA+PWNdk23Hze4RBYIkpb5h8I2HY2Tu2h7A0LpAgLcyrhrSUyo2/Oxm2l1fRZPs1e5hnxnliXA=="
-    },
-    "jquery": {
-      "version": "3.5.1",
-      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.5.1.tgz",
-      "integrity": "sha512-XwIBPqcMn57FxfT+Go5pzySnm4KWkT1Tv7gjrpT1srtf8Weynl6R273VJ5GjkRb51IzMp5nbaPjJXMWeju2MKg=="
-    }
-  }
-}
diff --git a/package.json b/package.json
deleted file mode 100644
index a0477cd..0000000
--- a/package.json
+++ /dev/null
@@ -1,29 +0,0 @@
-{
-    "name": "bs4-toast",
-    "version": "1.2.0",
-    "description": "Toast - A Bootstrap 4.2+ jQuery plugin for the toast component",
-    "main": "dist/toast.min.js",
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/Script47/Toast.git"
-    },
-    "keywords": [
-        "bootstrap-4",
-        "bootstrap",
-        "toast",
-        "toast-notifications",
-        "snack",
-        "jquery-plugin"
-    ],
-    "author": "Script47 <Script47@hotmail.com>",
-    "license": "MIT",
-    "bugs": {
-        "url": "https://github.com/Script47/Toast/issues"
-    },
-    "homepage": "https://github.com/Script47/Toast",
-    "dependencies": {
-        "bootstrap": ">=4.2.0",
-        "jquery": ">=1.9.1"
-    },
-    "devDependencies": {}
-}
diff --git a/src/css/style.css b/src/css/style.css
new file mode 100644
index 0000000..34b1305
--- /dev/null
+++ b/src/css/style.css
@@ -0,0 +1,3 @@
+body {
+    padding-top: 5rem;
+}
\ No newline at end of file
diff --git a/src/css/toast.css b/src/css/toast.css
index 8b32440..7c17764 100644
--- a/src/css/toast.css
+++ b/src/css/toast.css
@@ -1,7 +1,8 @@
 /**
- * @author Script47 (https://github.com/Script47/Toast)
- * @description Toast - A Bootstrap 4.2+ jQuery plugin for the toast component
- * @version 1.2.0
+ * @origin author Script47 (https://github.com/Script47/Toast)
+ * @author SoyaNyan (https://github.com/SoyaNyan/Toast)
+ * @description Toast - A Bootstrap 5.0 jQuery plugin for the toast component
+ * @version 2.0.0
  **/
 .toast-container {
     position: fixed;
@@ -57,4 +58,11 @@
 
 .toast-container > .toast > .toast-body {
     background: white;
+    border-bottom-left-radius: calc(0.25rem - 1px);
+    border-bottom-right-radius: calc(0.25rem - 1px);
+}
+
+.toast-container > .toast > .toast-body.snack-rounded {
+    border-top-left-radius: calc(0.25rem - 1px);
+    border-top-right-radius: calc(0.25rem - 1px);
 }
diff --git a/src/js/toast.js b/src/js/toast.js
index 5a5707d..7a355d0 100644
--- a/src/js/toast.js
+++ b/src/js/toast.js
@@ -1,153 +1,227 @@
 /**
- * @author Script47 (https://github.com/Script47/Toast)
- * @description Toast - A Bootstrap 4.2+ jQuery plugin for the toast component
- * @version 1.2.0
+ * @origin author Script47 (https://github.com/Script47/Toast)
+ * @author SoyaNyan (https://github.com/SoyaNyan/Toast)
+ * @description Toast - A Bootstrap 5.0 jQuery plugin for the toast component
+ * @version 2.0.0
  **/
 (function ($) {
     const TOAST_CONTAINER_HTML = `<div id="toast-container" class="toast-container" aria-live="polite" aria-atomic="true"></div>`;
 
+    // default option values
     $.toastDefaults = {
-        position: 'top-right',
+        position: "top-right",
         dismissible: true,
-        stackable: true,
-        pauseDelayOnHover: true,
+        stackable: true, // stackable & pauseDelayOnHover options are incompatible
+        pauseDelayOnHover: false,
         style: {
-            toast: '',
-            info: '',
-            success: '',
-            warning: '',
-            error: '',
-        }
+            toast: "",
+            info: "",
+            success: "",
+            warning: "",
+            error: "",
+            primary: "",
+            secondary: "",
+            light: "",
+            dark: "",
+        },
     };
 
-    $('body').on('hidden.bs.toast', '.toast', function () {
+    // This event is fired when the toast has finished being hidden from the user.
+    $("body").on("hidden.bs.toast", ".toast", () => {
         $(this).remove();
     });
 
+    // unique id for each toast and snack
     let toastRunningCount = 1;
 
     function render(opts) {
         /** No container, create our own **/
-        if (!$('#toast-container').length) {
-            const position = ['top-right', 'top-left', 'top-center', 'bottom-right', 'bottom-left', 'bottom-center'].includes($.toastDefaults.position) ? $.toastDefaults.position : 'top-right';
+        if (!$("#toast-container").length) {
+            // if not exists
+            const position = [
+                "top-right",
+                "top-left",
+                "top-center",
+                "bottom-right",
+                "bottom-left",
+                "bottom-center",
+            ].includes($.toastDefaults.position)
+                ? $.toastDefaults.position
+                : "top-right";
 
-            $('body').prepend(TOAST_CONTAINER_HTML);
-            $('#toast-container').addClass(position);
+            $("body").prepend(TOAST_CONTAINER_HTML);
+            $("#toast-container").addClass(position);
         }
 
-        let toastContainer = $('#toast-container');
-        let html = '';
-        let classes = {
+        // template options
+        const toastContainer = $("#toast-container");
+        const classes = {
             header: {
-                fg: '',
-                bg: ''
+                fg: "",
+                bg: "",
             },
-            subtitle: 'text-white',
-            dismiss: 'text-white'
+            subtitle: "text-white",
+            dismiss: "text-white",
         };
+        let html = "";
+
+        // toast options
         let id = opts.id || `toast-${toastRunningCount}`;
         let type = opts.type;
         let title = opts.title;
         let subtitle = opts.subtitle;
         let content = opts.content;
         let img = opts.img;
-        let delayOrAutohide = opts.delay ? `data-delay="${opts.delay}"` : `data-autohide="false"`;
+        let icon = opts.icon;
+        let delayOrAutohide = opts.delay
+            ? `data-bs-delay="${opts.delay}"`
+            : `data-bs-autohide="false"`;
         let hideAfter = ``;
         let dismissible = $.toastDefaults.dismissible;
         let globalToastStyles = $.toastDefaults.style.toast;
         let paused = false;
 
-        if (typeof opts.dismissible !== 'undefined') {
+        if (typeof opts.dismissible !== "undefined") {
             dismissible = opts.dismissible;
         }
 
+        // check style classes
         switch (type) {
-            case 'info':
-                classes.header.bg = $.toastDefaults.style.info || 'bg-info';
-                classes.header.fg = $.toastDefaults.style.info || 'text-white';
+            case "info":
+                classes.header.bg = $.toastDefaults.style.info || "bg-info";
+                classes.header.fg = $.toastDefaults.style.info || "text-white";
+                break;
+
+            case "success":
+                classes.header.bg =
+                    $.toastDefaults.style.success || "bg-success";
+                classes.header.fg =
+                    $.toastDefaults.style.success || "text-white";
+                break;
+
+            case "warning":
+                classes.header.bg =
+                    $.toastDefaults.style.warning || "bg-warning";
+                classes.header.fg =
+                    $.toastDefaults.style.warning || "text-white";
+                break;
+
+            case "error":
+                classes.header.bg = $.toastDefaults.style.error || "bg-danger";
+                classes.header.fg = $.toastDefaults.style.error || "text-white";
                 break;
 
-            case 'success':
-                classes.header.bg = $.toastDefaults.style.success || 'bg-success';
-                classes.header.fg = $.toastDefaults.style.info || 'text-white';
+            case "primary":
+                classes.header.bg =
+                    $.toastDefaults.style.primary || "bg-primary";
+                classes.header.fg =
+                    $.toastDefaults.style.primary || "text-white";
                 break;
 
-            case 'warning':
-                classes.header.bg = $.toastDefaults.style.warning || 'bg-warning';
-                classes.header.fg = $.toastDefaults.style.warning || 'text-white';
+            case "secondary":
+                classes.header.bg =
+                    $.toastDefaults.style.secondary || "bg-secondary";
+                classes.header.fg =
+                    $.toastDefaults.style.secondary || "text-white";
                 break;
 
-            case 'error':
-                classes.header.bg = $.toastDefaults.style.error || 'bg-danger';
-                classes.header.fg = $.toastDefaults.style.error || 'text-white';
+            case "light":
+                classes.header.bg = $.toastDefaults.style.light || "bg-light";
+                classes.header.fg =
+                    $.toastDefaults.style.light || "text-secondary";
+                break;
+
+            case "dark":
+                classes.header.bg = $.toastDefaults.style.dark || "bg-dark";
+                classes.header.fg = $.toastDefaults.style.dark || "text-white";
                 break;
         }
 
+        // check delay options
         if ($.toastDefaults.pauseDelayOnHover && opts.delay) {
-            delayOrAutohide = `data-autohide="false"`;
-            hideAfter = `data-hide-after="${Math.floor(Date.now() / 1000) + (opts.delay / 1000)}"`;
+            delayOrAutohide = `data-bs-autohide="false"`;
+            hideAfter = `data-hide-after="${
+                Math.floor(Date.now() / 1000) + opts.delay / 1000
+            }"`;
         }
 
-        html = `<div id="${id}" class="toast ${globalToastStyles}" role="alert" aria-live="assertive" aria-atomic="true" ${delayOrAutohide} ${hideAfter}>`;
-        html += `<div class="toast-header ${classes.header.bg} ${classes.header.fg}">`;
+        // prepare html
+        if (title) {
+            // toast
+            html = `<div id="${id}" class="toast ${globalToastStyles}" role="alert" aria-live="assertive" aria-atomic="true" ${delayOrAutohide} ${hideAfter}>`;
+            html += `<div class="toast-header ${classes.header.bg} ${classes.header.fg}">`;
 
-        if (img) {
-            html += `<img src="${img.src}" class="mr-2 ${img.class || ''}" alt="${img.alt || 'Image'}">`;
-        }
+            if (img) {
+                html += `<img src="${img.src}" class="rounded me-2 ${
+                    img.class || ""
+                }" alt="${img.alt || "Toast Image"}">`;
+            }
 
-        html += `<strong class="mr-auto">${title}</strong>`;
+            if (icon) {
+                html += `<i class="${icon} mr-2"></i>&nbsp;`;
+            }
+            html += `<strong class="me-auto">${title}</strong>`;
 
-        if (subtitle) {
-            html += `<small class="${classes.subtitle}">${subtitle}</small>`;
-        }
+            if (subtitle) {
+                html += `<small class="${classes.subtitle}">${subtitle}</small>`;
+            }
 
-        if (dismissible) {
-            html += `<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
-                        <span aria-hidden="true" class="${classes.dismiss}">&times;</span>
-                    </button>`;
-        }
+            if (dismissible) {
+                html += `<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>`;
+            }
 
-        html += `</div>`;
+            html += `</div>`;
 
-        if (content) {
-            html += `<div class="toast-body">
-                        ${content}
-                    </div>`;
+            if (content) {
+                html += `<div class="toast-body">
+                    ${content}
+                </div>`;
+            }
+        } else {
+            // snack
+            html = `<div id="${id}" class="toast align-items-center ${globalToastStyles}" role="alert" aria-live="assertive" aria-atomic="true" ${delayOrAutohide} ${hideAfter}>`;
+            html += `<div class="toast-body snack-rounded d-flex ${classes.header.bg} ${classes.header.fg}">`;
+            if (content) {
+                html += `${content}`;
+            }
+            html += `<button type="button" class="btn-close ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button>
+            </div>`;
         }
-
         html += `</div>`;
 
+        // check stackable option
         if (!$.toastDefaults.stackable) {
-            toastContainer.find('.toast').each(function () {
+            toastContainer.find(".toast").each(function () {
                 $(this).remove();
             });
 
             toastContainer.append(html);
-            toastContainer.find('.toast:last').toast('show');
+            toastContainer.find(".toast:last").toast("show");
         } else {
             toastContainer.append(html);
-            toastContainer.find('.toast:last').toast('show');
+            toastContainer.find(".toast:last").toast("show");
         }
 
+        // hover delay action
         if ($.toastDefaults.pauseDelayOnHover) {
             setTimeout(function () {
                 if (!paused) {
-                    $(`#${id}`).toast('hide');
+                    $(`#${id}`).toast("hide");
                 }
             }, opts.delay);
 
-            $('body').on('mouseover', `#${id}`, function () {
+            $("body").on("mouseover", `#${id}`, () => {
                 paused = true;
             });
 
-            $(document).on('mouseleave', '#' + id, function () {
+            $(document).on("mouseleave", "#" + id, () => {
                 const current = Math.floor(Date.now() / 1000),
-                    future = parseInt($(this).data('hideAfter'));
+                    future = parseInt($(`#${id}`).data("hideAfter"), 10);
 
                 paused = false;
 
                 if (current >= future) {
-                    $(this).toast('hide');
+                    $(`#${id}`).toast("hide");
                 }
             });
         }
@@ -155,19 +229,42 @@
         toastRunningCount++;
     }
 
+    /**
+     * Set default option values
+     * @param opts
+     */
+    $.toastInit = function (opts) {
+        const { position, dismissible, stackable, pauseDelayOnHover } = opts;
+
+        // set values
+        $.toastDefaults.position = position ?? $.toastDefaults.position;
+        $.toastDefaults.dismissible =
+            dismissible ?? $.toastDefaults.dismissible;
+        $.toastDefaults.stackable = stackable ?? $.toastDefaults.stackable;
+        $.toastDefaults.pauseDelayOnHover =
+            pauseDelayOnHover ?? $.toastDefaults.pauseDelayOnHover;
+
+        // check incompatible variables
+        if ($.toastDefaults.stackable) {
+            $.toastDefaults.pauseDelayOnHover = false;
+        } else {
+            $.toastDefaults.pauseDelayOnHover = true;
+        }
+    };
+
     /**
      * Show a snack
      * @param type
      * @param title
      * @param delay
      */
-    $.snack = function (type, title, delay) {
+    $.snack = function (type, content, delay) {
         return render({
             type,
-            title,
-            delay
+            content,
+            delay,
         });
-    }
+    };
 
     /**
      * Show a toast
@@ -175,5 +272,5 @@
      */
     $.toast = function (opts) {
         return render(opts);
-    }
-}(jQuery));
+    };
+})(jQuery);