diff --git a/web/src/pages/Admin/UserSessions/index.tsx b/web/src/pages/Admin/UserSessions/index.tsx
new file mode 100644
index 0000000..e3e7950
--- /dev/null
+++ b/web/src/pages/Admin/UserSessions/index.tsx
@@ -0,0 +1,197 @@
+import { adminGetUserSessionsApi } from "@/api/admin/sessions";
+import Breadcrumbs from "@/components/ui/breadcrumbs";
+import { Button } from "@/components/ui/button";
+import Avatar from "@/feature/Avatar";
+import type { DeviceInfo, UserSession } from "@/types";
+import { Ban } from "lucide-react";
+import { useEffect, useMemo, useState, type FC } from "react";
+import { Link } from "react-router";
+import moment from "moment";
+import Pagination from "@/components/ui/pagination";
+
+const SessionSource: FC<{ deviceInfo: string }> = ({ deviceInfo }) => {
+  const parsed = useMemo<DeviceInfo>(
+    () => JSON.parse(atob(deviceInfo)),
+    [deviceInfo],
+  );
+
+  return (
+    <p>
+      {parsed.os} {parsed.os_version} {parsed.browser} {parsed.browser_version}
+    </p>
+  );
+};
+
+const AdminSessionsPage: FC = () => {
+  const loading = false;
+  const [sessions, setSessions] = useState<UserSession[]>([]);
+
+  useEffect(() => {
+    adminGetUserSessionsApi({
+      limit: 10,
+      offset: 0,
+    }).then((res) => {
+      console.log("get sessions response:", res);
+      if (Array.isArray(res)) {
+        return setSessions(res);
+      }
+    });
+  }, []);
+
+  return (
+    <div className="relative flex flex-col items-stretch w-full">
+      <div className="p-4">
+        <Breadcrumbs
+          className="pb-2"
+          items={[
+            {
+              href: "/admin",
+              label: "Admin",
+            },
+            {
+              label: "User Sessions",
+            },
+          ]}
+        />
+      </div>
+      <div className="p-4 flex flex-row items-center justify-between">
+        <p className="text-gray-800 dark:text-gray-300">Search...</p>
+        {/* TODO: Filters */}
+      </div>
+
+      <div className="flex-1 overflow-x-auto">
+        <table className="relative min-w-full border-l-0 border border-gray-300 dark:border-gray-700 border-collapse divide-y divide-gray-200 dark:divide-gray-800">
+          {loading && (
+            <div className="absolute inset-0 z-10 flex items-center justify-center bg-white/60 dark:bg-gray-900/60 backdrop-blur-sm">
+              <div className="text-gray-800 dark:text-gray-200 font-medium">
+                Loading...
+              </div>
+            </div>
+          )}
+
+          <thead className="bg-black/5 dark:bg-white/5 text-nowrap">
+            <tr>
+              <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700 dark:text-white/70 border border-l-0 border-gray-300 dark:border-gray-700">
+                User
+              </th>
+              <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700 dark:text-white/70 border border-l-0 border-gray-300 dark:border-gray-700">
+                Source
+              </th>
+              <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700 dark:text-white/70 border border-l-0 border-gray-300 dark:border-gray-700">
+                Status
+              </th>
+              <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700 dark:text-white/70 border border-l-0 border-gray-300 dark:border-gray-700">
+                Issued At
+              </th>
+              <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700 dark:text-white/70 border border-l-0 border-gray-300 dark:border-gray-700">
+                Expires At
+              </th>
+              <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700 dark:text-white/70 border border-l-0 border-gray-300 dark:border-gray-700">
+                Last Active
+              </th>
+              <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700 dark:text-white/70 border border-l-0 border-gray-300 dark:border-gray-700">
+                Revoked At
+              </th>
+              <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700 dark:text-white/70 border border-l-0 border-gray-300 dark:border-gray-700">
+                Actions
+              </th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
+            {!loading && sessions.length === 0 ? (
+              <tr>
+                <td
+                  colSpan={5}
+                  className="px-6 py-12 text-center text-gray-500 dark:text-gray-400"
+                >
+                  No sessions found.
+                </td>
+              </tr>
+            ) : (
+              sessions.map((session) => (
+                <tr
+                  key={session.id}
+                  className="hover:bg-gray-50 dark:hover:bg-gray-800"
+                >
+                  {/* <td className="px-6 py-4 text-sm font-medium text-blue-600 border border-gray-300 dark:border-gray-700">
+                    <span className="inline-block px-2 py-1 text-xs rounded-full font-semibold bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300">
+                      {sessionsType}
+                    </span>
+                  </td> */}
+                  <td className="px-6 py-4 text-sm text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-700">
+                    <div className="flex flex-row items-center gap-2 justify-start">
+                      {typeof session.user?.profile_picture === "string" && (
+                        <Avatar
+                          avatarId={session.user.profile_picture}
+                          className="w-7 h-7 min-w-7"
+                        />
+                      )}
+                      <Link to={`/admin/users/${session.user_id}`}>
+                        <p className="cursor-pointer text-blue-500">
+                          {session.user?.full_name ?? ""}
+                        </p>
+                      </Link>
+                    </div>
+                  </td>
+                  <td className="px-6 py-4 text-sm text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-700">
+                    <SessionSource deviceInfo={session.device_info} />
+                  </td>
+                  <td className="px-6 py-4 text-sm border border-gray-300 dark:border-gray-700">
+                    <span
+                      className={`inline-block px-2 py-1 text-xs rounded-full font-semibold ${
+                        !session.is_active ||
+                        (session.expires_at &&
+                          moment(session.expires_at).isSameOrBefore(
+                            moment(new Date()),
+                          ))
+                          ? "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300"
+                          : "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300"
+                      }`}
+                    >
+                      {session.is_active ? "Active" : "Inactive"}
+                      {moment(session.expires_at).isSameOrBefore(
+                        moment(new Date()),
+                      ) && " (Expired)"}
+                    </span>
+                  </td>
+                  <td className="px-6 py-4 text-sm text-gray-500 dark:text-gray-400 border border-gray-300 dark:border-gray-700">
+                    {moment(session.issued_at).format("LLLL")}
+                  </td>
+                  <td className="px-6 py-4 text-sm text-gray-500 dark:text-gray-400 border border-gray-300 dark:border-gray-700">
+                    {session.expires_at
+                      ? moment(session.expires_at).format("LLLL")
+                      : "never"}
+                  </td>
+                  <td className="px-6 py-4 text-sm text-gray-500 dark:text-gray-400 border border-gray-300 dark:border-gray-700">
+                    {session.last_active
+                      ? moment(session.last_active).format("LLLL")
+                      : "never"}
+                  </td>
+                  <td className="px-6 py-4 text-sm text-gray-500 dark:text-gray-400 border border-gray-300 dark:border-gray-700">
+                    {session.revoked_at
+                      ? new Date(session.revoked_at).toLocaleString()
+                      : "never"}
+                  </td>
+                  <td>
+                    <div className="flex flex-row items-center justify-center gap-2">
+                      <Button
+                        variant="contained"
+                        className="bg-red-500 hover:bg-red-600 !px-1.5 !py-1.5"
+                      >
+                        <Ban size={18} />
+                      </Button>
+                    </div>
+                  </td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+
+        <Pagination currentPage={1} onPageChange={console.log} totalPages={2} />
+      </div>
+    </div>
+  );
+};
+
+export default AdminSessionsPage;