diff --git a/apps/demo/CHANGELOG.md b/apps/demo/CHANGELOG.md
index 39f19ca..486f7e9 100644
--- a/apps/demo/CHANGELOG.md
+++ b/apps/demo/CHANGELOG.md
@@ -1,5 +1,12 @@
 # index
 
+## 0.1.19
+
+### Patch Changes
+
+- Updated dependencies
+  - material-web-components-react@0.3.14
+
 ## 0.1.18
 
 ### Patch Changes
diff --git a/apps/demo/package.json b/apps/demo/package.json
index 825add4..f74a0ff 100644
--- a/apps/demo/package.json
+++ b/apps/demo/package.json
@@ -1,6 +1,6 @@
 {
   "name": "index",
-  "version": "0.1.18",
+  "version": "0.1.19",
   "private": true,
   "packageManager": "pnpm@9.1.0",
   "scripts": {
diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md
index f3dfc23..d222b1a 100644
--- a/packages/ui/CHANGELOG.md
+++ b/packages/ui/CHANGELOG.md
@@ -1,5 +1,11 @@
 # material-web-react
 
+## 0.3.14
+
+### Patch Changes
+
+- fix: appbar
+
 ## 0.3.13
 
 ### Patch Changes
diff --git a/packages/ui/README.md b/packages/ui/README.md
index 3c2ca6d..46bf6f7 100644
--- a/packages/ui/README.md
+++ b/packages/ui/README.md
@@ -34,7 +34,7 @@ function Example() {
 }
 ```
 
-For a detailed reference on usage, you might want to check out the source code of the [NextJS demo](./apps/demo/src/app/page.tsx). It's simple!
+For a detailed reference on usage, you might want to check out the source code of the [NextJS demo](https://github.com/grayhatdevelopers/material-web-components-react/blob/main/apps/demo/src/app/page.tsx). It's simple!
 
 Under the hood, this library simply uses the official [@material/web](https://github.com/material-components/material-web/) components. Visit [the official Material Web Components docs](https://github.com/material-components/material-web/blob/main/docs/intro.md) to learn how to use those components. The props remain the same!
 
@@ -81,6 +81,6 @@ Thanks for improving the demo:
 
 - [TalhaHere12](https://github.com/TalhaHere12)
 
-Thanks for building BottomSheet:
+Thanks for building BottomSheet and Snackbar:
 
 - [Aroonaongithhub](https://github.com/Aroonaongithhub/)
diff --git a/packages/ui/package.json b/packages/ui/package.json
index b0e24c9..698535c 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "material-web-components-react",
-  "version": "0.3.13",
+  "version": "0.3.14",
   "author": "Grayhat Team",
   "type": "module",
   "keywords": [
diff --git a/packages/ui/src/app-bar/index.tsx b/packages/ui/src/app-bar/index.tsx
index 7ef2c1f..b30a137 100644
--- a/packages/ui/src/app-bar/index.tsx
+++ b/packages/ui/src/app-bar/index.tsx
@@ -117,7 +117,7 @@ const AppBar = ({
         <div
           id="headline"
           className={twMerge(
-            "absolute left-1/2 transform -translate-x-1/2 flex items-center gap-2 text-lg transition-all", // Changed this line
+            "flex items-center gap-2 text-lg transition-all", // Changed this line
             _variant === "center-aligned" && "text-center",
             (_variant === "small" ||
               _variant === "medium" ||