diff --git a/src/hooks/useTitle.ts b/src/hooks/useTitle.ts
new file mode 100644
index 0000000..28f5b29
--- /dev/null
+++ b/src/hooks/useTitle.ts
@@ -0,0 +1,7 @@
+import React from "react";
+
+export default function useTitle(title: string) {
+  React.useEffect(() => {
+    document.title = `NAM | ${title}`
+  }, [title])
+}
diff --git a/src/pages/Backbone.tsx b/src/pages/Backbone.tsx
index a4c184f..c1ec796 100644
--- a/src/pages/Backbone.tsx
+++ b/src/pages/Backbone.tsx
@@ -12,6 +12,7 @@ import ReactTable from "../components/ReactTable";
 import IconButton from "../components/IconButton";
 import { Edit } from "iconsax-react";
 import { ColumnDef } from "@tanstack/react-table";
+import useTitle from "../hooks/useTitle";
 
 interface UserData {
   backbone: string;
@@ -22,6 +23,8 @@ interface UserData {
 }
 
 export default function Backbone() {
+    useTitle("Backbone");
+  
   const data: UserData[] = [
     { backbone: "BB-BDG-SMD", device_start: "DV-CODE-1", device_end: "DV-CODE-2", total_core: "24 Core", total_fishbone: "3" },
     { backbone: "BB-BDG-SBG", device_start: "DV-CODE-3", device_end: "DV-CODE-4", total_core: "24 Core", total_fishbone: "5" },
diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
index cf8413a..c45ec2c 100644
--- a/src/pages/Dashboard.tsx
+++ b/src/pages/Dashboard.tsx
@@ -1,4 +1,8 @@
+import useTitle from "../hooks/useTitle";
+
 export default function Dashboard() {
+  useTitle("Dashboard");
+  
   return (
     <div>
       Dashboard
diff --git a/src/pages/Devices.tsx b/src/pages/Devices.tsx
index d8d7168..76aa1c8 100644
--- a/src/pages/Devices.tsx
+++ b/src/pages/Devices.tsx
@@ -12,6 +12,7 @@ import ReactTable from "../components/ReactTable";
 import { ColumnDef } from "@tanstack/react-table";
 import IconButton from "../components/IconButton";
 import { Edit } from "iconsax-react";
+import useTitle from "../hooks/useTitle";
 
 interface UserData {
   device_code: string;
@@ -22,6 +23,8 @@ interface UserData {
 }
 
 export default function Devices() {
+  useTitle("Devices");
+  
   const data: UserData[] = [
     { device_code: 'DV-CODE-1', device_type: "OTB", address: "Jl. Contoh 1", port_amount: '16', status: "Active" },
     { device_code: 'DV-CODE-2', device_type: "OTB", address: "Jl. Contoh 2", port_amount: '16', status: "Active" },
diff --git a/src/pages/Fishbone.tsx b/src/pages/Fishbone.tsx
index dcb63a4..195b9c6 100644
--- a/src/pages/Fishbone.tsx
+++ b/src/pages/Fishbone.tsx
@@ -12,6 +12,7 @@ import ReactTable from "../components/ReactTable";
 import { ColumnDef } from "@tanstack/react-table";
 import IconButton from "../components/IconButton";
 import { Edit } from "iconsax-react";
+import useTitle from "../hooks/useTitle";
 
 interface UserData {
   backbone: string;
@@ -21,6 +22,8 @@ interface UserData {
 }
 
 export default function Fishbone() {
+  useTitle("Fishbone");
+  
   const data: UserData[] = [
     { backbone: 'BB-BDG-SMD', device_start: "DV-CODE-1", device_end: "DV-CODE-2", total_core: '24 Core', },
     { backbone: 'BB-BDG-SBG', device_start: "DV-CODE-3", device_end: "DV-CODE-4", total_core: '24 Core', },
diff --git a/src/pages/Towers.tsx b/src/pages/Towers.tsx
index 4cf51c5..78eb1ed 100644
--- a/src/pages/Towers.tsx
+++ b/src/pages/Towers.tsx
@@ -12,6 +12,7 @@ import ReactTable from "../components/ReactTable";
 import { ColumnDef } from "@tanstack/react-table";
 import IconButton from "../components/IconButton";
 import { Edit } from "iconsax-react";
+import useTitle from "../hooks/useTitle";
 
 interface UserData {
   tower_code: string;
@@ -20,6 +21,8 @@ interface UserData {
 }
 
 export default function Towers() {
+  useTitle("Towers");
+  
   const data: UserData[] = [
     { tower_code: 'TW-CODE-1', device: "DV-CODE-1", address: "Jl. Contoh 1" },
     { tower_code: 'TW-CODE-2', device: "DV-CODE-2", address: "Jl. Contoh 2" },
diff --git a/src/pages/auth/Login.tsx b/src/pages/auth/Login.tsx
index a8f4d93..6796a3f 100644
--- a/src/pages/auth/Login.tsx
+++ b/src/pages/auth/Login.tsx
@@ -8,8 +8,11 @@ import Typography from "@mui/material/Typography";
 import Grid from "@mui/material/Grid2";
 import { useNavigate } from "react-router";
 import { useAuthStore } from "../../stores/authStore";
+import useTitle from "../../hooks/useTitle";
 
 export default function Login() {
+  useTitle("Login");
+  
   let navigate = useNavigate();
 
   const { login, token, isLoading, error } = useAuthStore();
diff --git a/src/stores/storage.ts b/src/stores/storage.ts
index 3c76413..8e0333e 100644
--- a/src/stores/storage.ts
+++ b/src/stores/storage.ts
@@ -1,3 +1,4 @@
+import CryptoJS from "crypto-js";
 import { StateStorage } from "zustand/middleware";
 
 const KEY = import.meta.env.VITE_APP_KEY;