diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 6285a2f..48d7491 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -27,12 +27,13 @@ const Profile = () => import("profile/Profile");
 const Logout = () => import("auth/Logout");
 const CartIcon = () => import("cart/CartIcon");
 
-import { emitter, EVENT_KEYS, userData } from "../dealful";
+import { emitter, EVENT_KEYS } from "../dealful";
+import { userData } from "../services/storage";
 
 export default {
   name: "Navbar",
   data: () => ({ drawer: null, user: userData() }),
-  components: { Profile, Logout , CartIcon },
+  components: { Profile, Logout, CartIcon },
   methods: {
     menuToggle() {
       this.$emit("menuToggle");
diff --git a/src/services/storage.js b/src/services/storage.js
new file mode 100644
index 0000000..71cf38a
--- /dev/null
+++ b/src/services/storage.js
@@ -0,0 +1,11 @@
+import { STORAGE_KEYS } from "../dealful";
+
+export const userData = () => {
+  const userData = localStorage.getItem(STORAGE_KEYS.USER_DATA);
+
+  try {
+    return JSON.parse(userData);
+  } catch (error) {
+    throw Error("user data is empty");
+  }
+};