diff --git a/app/clouds/layout.tsx b/app/clouds/layout.tsx
index cab24b4eed..d9ca1e80e4 100644
--- a/app/clouds/layout.tsx
+++ b/app/clouds/layout.tsx
@@ -5,9 +5,7 @@ export default function CloudsLayout({
 }) {
   return (
     <section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
-      <div className="inline-block max-w-lg text-center justify-center">
-        {children}
-      </div>
+      <div className="inline-block text-center justify-center">{children}</div>
     </section>
   );
 }
diff --git a/app/clouds/page.tsx b/app/clouds/page.tsx
index d31830a657..61212ab268 100644
--- a/app/clouds/page.tsx
+++ b/app/clouds/page.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import useSWR from "swr";
+import React from "react";
 
 import {
   Table,
@@ -9,40 +10,263 @@ import {
   TableColumn,
   TableRow,
   TableCell,
-} from "@nextui-org/table";
+  User,
+  Chip,
+  Tooltip,
+  getKeyValue,
+} from "@nextui-org/react";
 import { fetcher } from "@/utils/fetcher";
 import { title } from "@/components/primitives";
 
+import { PencilSquareIcon } from "@heroicons/react/24/solid";
+import { TrashIcon } from "@heroicons/react/24/solid";
+import { EyeIcon } from "@heroicons/react/24/solid";
+
+const statusColorMap = {
+  active: "success",
+  paused: "danger",
+  vacation: "warning",
+};
+
+const columns = [
+  { name: "NAME", uid: "name" },
+  { name: "ROLE", uid: "role" },
+  { name: "STATUS", uid: "status" },
+  { name: "ACTIONS", uid: "actions" },
+];
+
+const users = [
+  {
+    id: 1,
+    name: "Tony Reichert",
+    role: "CEO",
+    team: "Management",
+    status: "active",
+    age: "29",
+    avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d",
+    email: "tony.reichert@example.com",
+  },
+  {
+    id: 2,
+    name: "Zoey Lang",
+    role: "Technical Lead",
+    team: "Development",
+    status: "paused",
+    age: "25",
+    avatar: "https://i.pravatar.cc/150?u=a042581f4e29026704d",
+    email: "zoey.lang@example.com",
+  },
+  {
+    id: 3,
+    name: "Jane Fisher",
+    role: "Senior Developer",
+    team: "Development",
+    status: "active",
+    age: "22",
+    avatar: "https://i.pravatar.cc/150?u=a04258114e29026702d",
+    email: "jane.fisher@example.com",
+  },
+  {
+    id: 4,
+    name: "William Howard",
+    role: "Community Manager",
+    team: "Marketing",
+    status: "vacation",
+    age: "28",
+    avatar: "https://i.pravatar.cc/150?u=a048581f4e29026701d",
+    email: "william.howard@example.com",
+  },
+  {
+    id: 5,
+    name: "Kristen Copper",
+    role: "Sales Manager",
+    team: "Sales",
+    status: "active",
+    age: "24",
+    avatar: "https://i.pravatar.cc/150?u=a092581d4ef9026700d",
+    email: "kristen.cooper@example.com",
+  },
+];
+
 export default function CloudsPage() {
-  const { data, error } = useSWR(
+  const { data, error, isLoading } = useSWR(
     `http://localhost:8080/api/v1/providers/aws/accounts`,
     fetcher,
   );
 
+  console.log("### data", data);
+
   // TODO FIX TYPE CHECKING
-  const rowItems = data?.map((row: any) => (
-    <TableRow key={row.id}>
-      <TableCell>{row.account_id}</TableCell>
-      <TableCell>{row.alias}</TableCell>
-      <TableCell>{row.connected ? "True" : "False"}</TableCell>
-    </TableRow>
-  ));
+  // const rowItems = data?.map((row: any) => (
+  //   <TableRow key={row.id}>
+  //     <TableCell>{row.account_id}</TableCell>
+  //     <TableCell>{row.alias}</TableCell>
+  //     <TableCell>{row.connected ? "True" : "False"}</TableCell>
+  //   </TableRow>
+  // ));
+
+  // console.log("### rows", rows);
+
+  // const rows = data;
+
+  // const rows = [
+  //   {
+  //     key: "1",
+  //     name: "Tony Reichert",
+  //     role: "CEO",
+  //     status: "Active",
+  //   },
+  //   {
+  //     key: "2",
+  //     name: "Zoey Lang",
+  //     role: "Technical Lead",
+  //     status: "Paused",
+  //   },
+  //   {
+  //     key: "3",
+  //     name: "Jane Fisher",
+  //     role: "Senior Developer",
+  //     status: "Active",
+  //   },
+  //   {
+  //     key: "4",
+  //     name: "William Howard",
+  //     role: "Community Manager",
+  //     status: "Vacation",
+  //   },
+  // ];
+
+  // const columns = [
+  //   {
+  //     key: "provider_id",
+  //     label: "Account",
+  //   },
+  //   {
+  //     key: "groups",
+  //     label: "Group(s)",
+  //   },
+  //   {
+  //     key: "status",
+  //     label: "Scan Status",
+  //   },
+  //   {
+  //     key: "lastScan",
+  //     label: "Last Scan",
+  //   },
+  //   {
+  //     key: "nextScan",
+  //     label: "Next Scan",
+  //   },
+  //   {
+  //     key: "resources",
+  //     label: "Resources",
+  //   },
+  //   {
+  //     key: "added",
+  //     label: "Added",
+  //   },
+  // ];
+
+  const renderCell = React.useCallback((user, columnKey) => {
+    const cellValue = user[columnKey];
+
+    switch (columnKey) {
+      case "name":
+        return (
+          <User
+            avatarProps={{ radius: "lg", src: user.avatar }}
+            description={user.email}
+            name={cellValue}
+          >
+            {user.email}
+          </User>
+        );
+      case "role":
+        return (
+          <div className="flex flex-col">
+            <p className="text-bold text-sm capitalize">{cellValue}</p>
+            <p className="text-bold text-sm capitalize text-default-400">
+              {user.team}
+            </p>
+          </div>
+        );
+      case "status":
+        return (
+          <Chip
+            className="capitalize"
+            color={statusColorMap[user.status]}
+            size="sm"
+            variant="flat"
+          >
+            {cellValue}
+          </Chip>
+        );
+      case "actions":
+        return (
+          <div className="relative flex items-center gap-2">
+            <Tooltip content="Details">
+              <span className="text-lg text-default-400 cursor-pointer active:opacity-50">
+                <EyeIcon className="w-5 h-5" />
+              </span>
+            </Tooltip>
+            <Tooltip content="Edit user">
+              <span className="text-lg text-default-400 cursor-pointer active:opacity-50">
+                <PencilSquareIcon className="w-5 h-5" />
+              </span>
+            </Tooltip>
+            <Tooltip color="danger" content="Delete user">
+              <span className="text-lg text-danger cursor-pointer active:opacity-50">
+                <TrashIcon className="w-5 h-5" />
+              </span>
+            </Tooltip>
+          </div>
+        );
+      default:
+        return cellValue;
+    }
+  }, []);
 
   return (
     <div>
       <h1 className={title()}>Cloud Accounts</h1>
       <p className="mt-10 text-left">
         {error && <span className="text-red-400">Failed to load</span>}
-        {!data && <span className="text-yellow-400">Loading</span>}
+        {isLoading && <span className="text-yellow-400">Loading</span>}
       </p>
       {data && (
-        <Table aria-label="cloud accounts table" className="text-left mt-10">
-          <TableHeader>
-            <TableColumn>ACCOUNT ID</TableColumn>
-            <TableColumn>ALIAS</TableColumn>
-            <TableColumn>CONNECTED</TableColumn>
+        // <Table aria-label="cloud accounts table" className="text-left mt-10">
+        //   <TableHeader>
+        //     <TableColumn>ACCOUNT ID</TableColumn>
+        //     <TableColumn>ALIAS</TableColumn>
+        //     <TableColumn>CONNECTED</TableColumn>
+        //   </TableHeader>
+        //   <TableBody>{rowItems}</TableBody>
+        // </Table>
+
+        <Table
+          isStriped
+          aria-label="cloud accounts table"
+          className="text-left mt-10"
+        >
+          <TableHeader columns={columns}>
+            {(column) => (
+              <TableColumn
+                key={column.uid}
+                align={column.uid === "actions" ? "center" : "start"}
+              >
+                {column.name}
+              </TableColumn>
+            )}
           </TableHeader>
-          <TableBody>{rowItems}</TableBody>
+          <TableBody items={users}>
+            {(item) => (
+              <TableRow key={item.id}>
+                {(columnKey) => (
+                  <TableCell>{renderCell(item, columnKey)}</TableCell>
+                )}
+              </TableRow>
+            )}
+          </TableBody>
         </Table>
       )}
       <p className="mt-24">This is a page with "use client", useSWR</p>
diff --git a/app/login/page.tsx b/app/login/page.tsx
index ee097b2a66..113f81418e 100644
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -1,10 +1,15 @@
 "use client";
 
 import React from "react";
-import { Card, CardHeader, CardBody, CardFooter } from "@nextui-org/card";
-import { Input } from "@nextui-org/input";
-import { Link } from "@nextui-org/link";
-import { Button } from "@nextui-org/button";
+import {
+  Card,
+  CardHeader,
+  CardBody,
+  CardFooter,
+  Input,
+  Link,
+  Button,
+} from "@nextui-org/react";
 import { EyeIcon } from "@heroicons/react/24/solid";
 import { EyeSlashIcon } from "@heroicons/react/24/solid";
 
diff --git a/app/page.tsx b/app/page.tsx
index c28dfa852c..e840155e19 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,10 +1,15 @@
 "use client";
 
 import React from "react";
-import { Card, CardHeader, CardBody, CardFooter } from "@nextui-org/card";
-import { Input } from "@nextui-org/input";
-import { Link } from "@nextui-org/link";
-import { Button } from "@nextui-org/button";
+import {
+  Card,
+  CardHeader,
+  CardBody,
+  CardFooter,
+  Input,
+  Link,
+  Button,
+} from "@nextui-org/react";
 import { EyeIcon } from "@heroicons/react/24/solid";
 import { EyeSlashIcon } from "@heroicons/react/24/solid";
 
diff --git a/be_poc/be_poc/settings.py b/be_poc/be_poc/settings.py
index c55e3e7e1c..f6fb8e2fee 100644
--- a/be_poc/be_poc/settings.py
+++ b/be_poc/be_poc/settings.py
@@ -13,7 +13,7 @@ SECRET_KEY = 'django-insecure-h72a3mgf$l$1uqnjf0bbbz9fbmuotlff7ya50+hlao)fga=3dp
 # SECURITY WARNING: don't run with debug turned on in production!
 DEBUG = True
 
-ALLOWED_HOSTS = []
+ALLOWED_HOSTS = ['localhost', 'steady-separately-marlin.ngrok-free.app']
 
 
 # Application definition
diff --git a/components/counter.tsx b/components/counter.tsx
index d16f862269..85cb44dc27 100644
--- a/components/counter.tsx
+++ b/components/counter.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import { Button } from "@nextui-org/button";
+import { Button } from "@nextui-org/react";
 
 export const Counter = () => {
   const [count, setCount] = useState(0);
diff --git a/components/navbar.tsx b/components/navbar.tsx
index 6bcdaa770e..a52bd03f3c 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -9,8 +9,8 @@ import {
   NavbarMenuToggle,
   NavbarBrand,
   NavbarMenuItem,
-} from "@nextui-org/navbar";
-import { Link } from "@nextui-org/link";
+  Link,
+} from "@nextui-org/react";
 
 export const Navbar = () => {
   const [isMenuOpen, setIsMenuOpen] = React.useState(false);
diff --git a/components/theme-switch.tsx b/components/theme-switch.tsx
index 55bcb0f329..b44961bfa0 100644
--- a/components/theme-switch.tsx
+++ b/components/theme-switch.tsx
@@ -2,7 +2,7 @@
 
 import { FC } from "react";
 import { VisuallyHidden } from "@react-aria/visually-hidden";
-import { SwitchProps, useSwitch } from "@nextui-org/switch";
+import { SwitchProps, useSwitch } from "@nextui-org/react";
 import { useTheme } from "next-themes";
 import { useIsSSR } from "@react-aria/ssr";
 import clsx from "clsx";
diff --git a/docker-compose.yaml b/docker-compose.yaml
index b50276328f..745691a46c 100644
--- a/docker-compose.yaml
+++ b/docker-compose.yaml
@@ -1,4 +1,3 @@
-version: '3.7'
 services:
   django-be-poc:
     image: django-be-poc
diff --git a/package.json b/package.json
index d7fc3d3785..158c6fc650 100644
--- a/package.json
+++ b/package.json
@@ -1,18 +1,8 @@
 {
   "dependencies": {
     "@heroicons/react": "^2.1.4",
-    "@nextui-org/button": "2.0.34",
-    "@nextui-org/card": "^2.0.31",
-    "@nextui-org/code": "2.0.29",
-    "@nextui-org/input": "2.2.2",
-    "@nextui-org/kbd": "2.0.30",
-    "@nextui-org/link": "2.0.32",
-    "@nextui-org/listbox": "2.1.21",
-    "@nextui-org/navbar": "2.0.33",
-    "@nextui-org/snippet": "2.0.38",
-    "@nextui-org/switch": "2.0.31",
+    "@nextui-org/react": "^2.4.2",
     "@nextui-org/system": "2.2.1",
-    "@nextui-org/table": "^2.0.36",
     "@nextui-org/theme": "2.2.5",
     "@react-aria/ssr": "3.9.4",
     "@react-aria/visually-hidden": "3.8.12",