diff --git a/apps/demo/CHANGELOG.md b/apps/demo/CHANGELOG.md
index 486f7e9..f16666c 100644
--- a/apps/demo/CHANGELOG.md
+++ b/apps/demo/CHANGELOG.md
@@ -1,5 +1,19 @@
 # index
 
+## 0.1.21
+
+### Patch Changes
+
+- Updated dependencies
+  - material-web-components-react@0.3.16
+
+## 0.1.20
+
+### Patch Changes
+
+- Updated dependencies
+  - material-web-components-react@0.3.15
+
 ## 0.1.19
 
 ### Patch Changes
diff --git a/apps/demo/package.json b/apps/demo/package.json
index f74a0ff..89c6dc7 100644
--- a/apps/demo/package.json
+++ b/apps/demo/package.json
@@ -1,6 +1,6 @@
 {
   "name": "index",
-  "version": "0.1.19",
+  "version": "0.1.21",
   "private": true,
   "packageManager": "pnpm@9.1.0",
   "scripts": {
diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md
index d222b1a..7eb80a7 100644
--- a/packages/ui/CHANGELOG.md
+++ b/packages/ui/CHANGELOG.md
@@ -1,5 +1,17 @@
 # material-web-react
 
+## 0.3.16
+
+### Patch Changes
+
+- use latest material version
+
+## 0.3.15
+
+### Patch Changes
+
+- add custom classname option to snackbar
+
 ## 0.3.14
 
 ### Patch Changes
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 698535c..9433869 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "material-web-components-react",
-  "version": "0.3.14",
+  "version": "0.3.16",
   "author": "Grayhat Team",
   "type": "module",
   "keywords": [
@@ -50,7 +50,7 @@
   },
   "dependencies": {
     "@lit/react": "^1.0.5",
-    "@material/web": "^2.0.0",
+    "@material/web": "^2.1.0",
     "autoprefixer": "^10.4.19",
     "lit": "^3.2.0",
     "react": "^18.2.0",
diff --git a/packages/ui/src/snackbar/index.tsx b/packages/ui/src/snackbar/index.tsx
index ea581b2..73d813a 100644
--- a/packages/ui/src/snackbar/index.tsx
+++ b/packages/ui/src/snackbar/index.tsx
@@ -29,6 +29,7 @@ export type SnackbarProps = {
   onAction?: () => void;
   onClose?: () => void;
   actionText?: string;
+  className?: string;
 };
 
 export const Snackbar = ({
@@ -39,6 +40,7 @@ export const Snackbar = ({
   onAction,
   onClose,
   actionText,
+  className,
 }: SnackbarProps) => {
   const [translateX, setTranslateX] = useState(0);
   const [isSwiped, setIsSwiped] = useState(false);
@@ -89,9 +91,10 @@ export const Snackbar = ({
             : "transform 0.02s linear, opacity 0.1s linear",
       }}
       className={twMerge(
-        "relative font-regular flex items-start gap-x-5 justify-evenly rounded-md bg-[#313033] py-4 pl-5 pr-3 text-[#F4EFF4] shadow-lg text-sm min-w-80 sm:min-w-96 max-w-96 w-screen transition-all",
+        "relative font-regular flex items-start gap-x-5 justify-evenly rounded-md !bg-[#313033] py-4 pl-5 pr-3 text-[#F4EFF4] shadow-lg text-sm min-w-80 sm:min-w-96 max-w-96 w-screen transition-all",
         useLongerAction ? "flex-col" : "flex-row",
-        isSwiped ? "opacity-0" : "opacity-100"
+        isSwiped ? "opacity-0" : "opacity-100",
+        className
       )}
     >
       {icon && <span className="text-white">{icon}</span>}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e2d3544..f81e8fb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -108,8 +108,8 @@ importers:
         specifier: ^1.0.5
         version: 1.0.5(@types/react@18.2.61)
       '@material/web':
-        specifier: ^2.0.0
-        version: 2.0.0
+        specifier: ^2.1.0
+        version: 2.1.0
       autoprefixer:
         specifier: ^10.4.19
         version: 10.4.19(postcss@8.4.31)
@@ -606,8 +606,8 @@ packages:
   '@manypkg/get-packages@1.1.3':
     resolution: {integrity: sha512-fo+QhuU3qE/2TQMQmbVMqaQ6EWbMhi4ABWP+O4AM1NqPBuy0OrApV5LO6BrrgnhtAHS2NH6RrVk9OL181tTi8A==}
 
-  '@material/web@2.0.0':
-    resolution: {integrity: sha512-4gukRERrAP4L0m3iLmLW/b7qKvf+26Ey46i2hMjLJCU+kTl6RLiKtI7njDcD8DaziR78IddWJ4Utz9fieuXB6Q==}
+  '@material/web@2.1.0':
+    resolution: {integrity: sha512-xzRB6GSspfhscWJvu7Ct8T+2Ybiasnk8OCe3PlWDE/LDEPZFyJJE7K0D6cANscJKQ/GIGIeLVkq5FEQRi+KUew==}
 
   '@microsoft/tsdoc-config@0.16.2':
     resolution: {integrity: sha512-OGiIzzoBLgWWR0UdRJX98oYO+XKGf7tiK4Zk6tQ/E4IJqGCe7dvkTvgDZV5cFJUzLGDOjeAXrnZoA6QkVySuxw==}
@@ -2700,9 +2700,6 @@ packages:
   lit-html@3.2.0:
     resolution: {integrity: sha512-pwT/HwoxqI9FggTrYVarkBKFN9MlTUpLrDHubTmW4SrkL3kkqW5gxwbxMMUnbbRHBC0WTZnYHcjDSCM559VyfA==}
 
-  lit@3.1.4:
-    resolution: {integrity: sha512-q6qKnKXHy2g1kjBaNfcoLlgbI3+aSOZ9Q4tiGa9bGYXq5RBXxkVTqTIVmP2VWMp29L4GyvCFm8ZQ2o56eUAMyA==}
-
   lit@3.2.0:
     resolution: {integrity: sha512-s6tI33Lf6VpDu7u4YqsSX78D28bYQulM+VAzsGch4fx2H0eLZnJsUBsPWmGYSGoKDNbjtRv02rio1o+UdPVwvw==}
 
@@ -4524,7 +4521,7 @@ snapshots:
   '@lit-labs/ssr-client@1.1.7':
     dependencies:
       '@lit/reactive-element': 2.0.4
-      lit: 3.1.4
+      lit: 3.2.0
       lit-html: 3.1.4
 
   '@lit-labs/ssr-dom-shim@1.2.0': {}
@@ -4544,7 +4541,7 @@ snapshots:
       '@parse5/tools': 0.3.0
       '@types/node': 16.18.101
       enhanced-resolve: 5.17.0
-      lit: 3.1.4
+      lit: 3.2.0
       lit-element: 4.0.6
       lit-html: 3.1.4
       node-fetch: 3.3.2
@@ -4574,7 +4571,7 @@ snapshots:
       globby: 11.1.0
       read-yaml-file: 1.1.0
 
-  '@material/web@2.0.0':
+  '@material/web@2.1.0':
     dependencies:
       lit: 3.2.0
       tslib: 2.6.3
@@ -6995,12 +6992,6 @@ snapshots:
     dependencies:
       '@types/trusted-types': 2.0.7
 
-  lit@3.1.4:
-    dependencies:
-      '@lit/reactive-element': 2.0.4
-      lit-element: 4.0.6
-      lit-html: 3.1.4
-
   lit@3.2.0:
     dependencies:
       '@lit/reactive-element': 2.0.4