diff --git a/components/pages/settings/users/UserWebsites.js b/components/pages/settings/users/UserWebsites.js
index 144fae44..8189ad8d 100644
--- a/components/pages/settings/users/UserWebsites.js
+++ b/components/pages/settings/users/UserWebsites.js
@@ -1,25 +1,38 @@
-import { Loading } from 'react-basics';
 import useApi from 'hooks/useApi';
 import WebsitesTable from 'components/pages/settings/websites/WebsitesTable';
 import useMessages from 'hooks/useMessages';
+import useApiFilter from 'hooks/useApiFilter';
+import Page from 'components/layout/Page';
+import useConfig from 'hooks/useConfig';
 
 export function UserWebsites({ userId }) {
+  const { cloudMode } = useConfig();
   const { formatMessage, messages } = useMessages();
+  const { filter,  page, pageSize, handlePageSizeChange, handleFilterChange, handlePageChange } = useApiFilter();
   const { get, useQuery } = useApi();
-  const { data, isLoading } = useQuery(['user:websites', userId], () =>
-    get(`/users/${userId}/websites`),
+  const { data, isLoading, error } = useQuery(['user:websites', userId, filter, page, pageSize], () =>
+    get(`/users/${userId}/websites`, {
+      filter,
+      page,
+      pageSize,
+    }),
   );
   const hasData = data && data.length !== 0;
 
-  if (isLoading) {
-    return <Loading icon="dots" style={{ minHeight: 300 }} />;
-  }
-
   return (
-    <div>
-      {hasData && <WebsitesTable data={data} />}
+    <Page loading={isLoading} error={error}>
+      {hasData && (
+        <WebsitesTable 
+          data={data} 
+          onFilterChange={handleFilterChange} 
+          onPageChange={handlePageChange} 
+          onPageSizeChange={handlePageSizeChange}
+          filterValue={filter}
+          showEditButton={!cloudMode}
+        />)
+      }
       {!hasData && formatMessage(messages.noDataAvailable)}
-    </div>
+    </Page>
   );
 }