diff --git a/dashboard/src/components/index.ts b/dashboard/src/components/index.ts
index ae8b036..156f660 100644
--- a/dashboard/src/components/index.ts
+++ b/dashboard/src/components/index.ts
@@ -7,3 +7,4 @@ export * from './nav-dir'
 export * from './header'
 export * from './entity-table'
 export * from './copy-button'
+export * from './page'
diff --git a/dashboard/src/components/page/index.tsx b/dashboard/src/components/page/index.tsx
new file mode 100644
index 0000000..2ae6696
--- /dev/null
+++ b/dashboard/src/components/page/index.tsx
@@ -0,0 +1,17 @@
+import { FC, PropsWithChildren } from 'react'
+import { ScrollArea } from '@marzneshin/components'
+
+interface PageProps extends PropsWithChildren { }
+
+/* WARN: The current page height which effect the scroll
+*  area activness, is calculated based on height of header 
+*  and margin.
+*/
+
+export const Page: FC<PageProps> = ({ children }) => {
+    return (
+        <ScrollArea style={{ height: `calc(100vh - 4.5rem)` }} className="m-3">
+            {children}
+        </ScrollArea>
+    );
+}
diff --git a/dashboard/src/routes/_dashboard/hosts.tsx b/dashboard/src/routes/_dashboard/hosts.tsx
index e7f1508..70e8649 100644
--- a/dashboard/src/routes/_dashboard/hosts.tsx
+++ b/dashboard/src/routes/_dashboard/hosts.tsx
@@ -1,4 +1,4 @@
-import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@marzneshin/components'
+import { Card, CardContent, CardFooter, CardHeader, CardTitle, Page } from '@marzneshin/components'
 import { InboundHostsTable } from '@marzneshin/features/hosts'
 import { createFileRoute } from '@tanstack/react-router'
 import { useTranslation } from 'react-i18next'
@@ -6,18 +6,20 @@ import { useTranslation } from 'react-i18next'
 export const HostsPage = () => {
   const { t } = useTranslation()
   return (
-    <Card className="m-2">
-      <CardHeader>
-        <CardTitle>
-          {t('hosts')}
-        </CardTitle>
-      </CardHeader>
-      <CardContent>
-        <InboundHostsTable />
-      </CardContent>
-      <CardFooter>
-      </CardFooter>
-    </Card>
+    <Page>
+      <Card>
+        <CardHeader>
+          <CardTitle>
+            {t('hosts')}
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <InboundHostsTable />
+        </CardContent>
+        <CardFooter>
+        </CardFooter>
+      </Card>
+    </Page>
   )
 }
 
diff --git a/dashboard/src/routes/_dashboard/nodes.tsx b/dashboard/src/routes/_dashboard/nodes.tsx
index cda20a2..e05e5f4 100644
--- a/dashboard/src/routes/_dashboard/nodes.tsx
+++ b/dashboard/src/routes/_dashboard/nodes.tsx
@@ -1,4 +1,14 @@
-import { Alert, AlertDescription, AlertTitle, Card, CardContent, CardFooter, CardHeader, CardTitle } from '@marzneshin/components';
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Page
+} from '@marzneshin/components';
 import { NodesTable } from '@marzneshin/features/nodes';
 import { Link, createFileRoute } from '@tanstack/react-router'
 import { Info } from 'lucide-react';
@@ -8,26 +18,29 @@ import { useTranslation } from 'react-i18next';
 export const NodesPage: FC = () => {
   const { t } = useTranslation();
   return (
-    <Card className="m-3">
-      <CardHeader>
-        <CardTitle>
-          {t('nodes')}
-        </CardTitle>
-      </CardHeader>
-      <CardContent>
-        <NodesTable />
-      </CardContent>
-      <CardFooter>
-        <Alert>
-          <Info className="mr-2" />
-          <AlertTitle className="font-semibold text-primary">{t('page.nodes.certificate-alert.title')}</AlertTitle>
-          <AlertDescription>
-            {t('page.nodes.certificate-alert.desc')}
-            <Link className="m-1 font-semibold text-secondary-foreground" to="/settings">{t('page.nodes.certificate-alert.click')}</Link>
-          </AlertDescription>
-        </Alert>
-      </CardFooter>
-    </Card >)
+    <Page>
+      <Card>
+        <CardHeader>
+          <CardTitle>
+            {t('nodes')}
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <NodesTable />
+        </CardContent>
+        <CardFooter>
+          <Alert>
+            <Info className="mr-2" />
+            <AlertTitle className="font-semibold text-primary">{t('page.nodes.certificate-alert.title')}</AlertTitle>
+            <AlertDescription>
+              {t('page.nodes.certificate-alert.desc')}
+              <Link className="m-1 font-semibold text-secondary-foreground" to="/settings">{t('page.nodes.certificate-alert.click')}</Link>
+            </AlertDescription>
+          </Alert>
+        </CardFooter>
+      </Card >
+    </Page>
+  )
 };
 
 export const Route = createFileRoute('/_dashboard/nodes')({
diff --git a/dashboard/src/routes/_dashboard/services.tsx b/dashboard/src/routes/_dashboard/services.tsx
index b225bc2..dbf0c7f 100644
--- a/dashboard/src/routes/_dashboard/services.tsx
+++ b/dashboard/src/routes/_dashboard/services.tsx
@@ -3,7 +3,8 @@ import {
   CardContent,
   CardFooter,
   CardHeader,
-  CardTitle
+  CardTitle,
+  Page
 } from '@marzneshin/components'
 import { ServicesTable } from '@marzneshin/features/services';
 import { createFileRoute } from '@tanstack/react-router'
@@ -13,18 +14,20 @@ import { useTranslation } from 'react-i18next';
 export const ServicesPage: FC = () => {
   const { t } = useTranslation();
   return (
-    <Card className="m-3">
-      <CardHeader>
-        <CardTitle>
-          {t('services')}
-        </CardTitle>
-      </CardHeader>
-      <CardContent>
-        <ServicesTable />
-      </CardContent>
-      <CardFooter>
-      </CardFooter>
-    </Card >
+    <Page>
+      <Card>
+        <CardHeader>
+          <CardTitle>
+            {t('services')}
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <ServicesTable />
+        </CardContent>
+        <CardFooter>
+        </CardFooter>
+      </Card >
+    </Page>
   )
 };
 
diff --git a/dashboard/src/routes/_dashboard/settings.tsx b/dashboard/src/routes/_dashboard/settings.tsx
index 40743cd..12fe1a5 100644
--- a/dashboard/src/routes/_dashboard/settings.tsx
+++ b/dashboard/src/routes/_dashboard/settings.tsx
@@ -1,5 +1,5 @@
 
-import { Card, CardContent, CardHeader, CardTitle } from '@marzneshin/components'
+import { Card, CardContent, CardHeader, CardTitle, Page } from '@marzneshin/components'
 import { CertificateButton } from '@marzneshin/features/settings'
 import { createFileRoute } from '@tanstack/react-router'
 import { useTranslation } from 'react-i18next'
@@ -7,16 +7,18 @@ import { useTranslation } from 'react-i18next'
 export const Settings = () => {
     const { t } = useTranslation()
     return (
-        <Card className="m-3">
-            <CardContent>
-                <CardHeader>
-                    <CardTitle>
-                        {t('settings')}
-                    </CardTitle>
-                </CardHeader>
-                <CertificateButton />
-            </CardContent>
-        </Card>
+        <Page>
+            <Card className="m-3">
+                <CardContent>
+                    <CardHeader>
+                        <CardTitle>
+                            {t('settings')}
+                        </CardTitle>
+                    </CardHeader>
+                    <CertificateButton />
+                </CardContent>
+            </Card>
+        </Page>
     )
 }
 
diff --git a/dashboard/src/routes/_dashboard/users.tsx b/dashboard/src/routes/_dashboard/users.tsx
index 9d37c83..11b79dd 100644
--- a/dashboard/src/routes/_dashboard/users.tsx
+++ b/dashboard/src/routes/_dashboard/users.tsx
@@ -1,4 +1,14 @@
-import { Alert, AlertDescription, AlertTitle, Card, CardContent, CardFooter, CardHeader, CardTitle } from '@marzneshin/components';
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Page
+} from '@marzneshin/components';
 import { useServicesQuery } from '@marzneshin/features/services';
 import { UsersTable } from '@marzneshin/features/users';
 import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
@@ -6,33 +16,34 @@ import { Link, createFileRoute } from '@tanstack/react-router'
 import { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 
-
 export const UsersPage: FC = () => {
   const { data } = useServicesQuery();
   const { t } = useTranslation();
   return (
-    <Card className="m-3">
-      <CardHeader>
-        <CardTitle>
-          {t('users')}
-        </CardTitle>
-      </CardHeader>
-      <CardContent>
-        <UsersTable />
-      </CardContent>
-      <CardFooter>
-        {(data && data.length === 0) && (
-          <Alert>
-            <ExclamationTriangleIcon className="mr-2" />
-            <AlertTitle className="font-semibold text-primary">{t('page.users.services-alert.title')}</AlertTitle>
-            <AlertDescription>
-              {t('page.users.services-alert.desc')}
-              <Link className="m-1 font-semibold text-secondary-foreground" to="/services">{t('page.nodes.certificate-alert.click')}</Link>
-            </AlertDescription>
-          </Alert>
-        )}
-      </CardFooter>
-    </Card >
+    <Page>
+      <Card >
+        <CardHeader>
+          <CardTitle>
+            {t('users')}
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <UsersTable />
+        </CardContent>
+        <CardFooter>
+          {(data && data.length === 0) && (
+            <Alert>
+              <ExclamationTriangleIcon className="mr-2" />
+              <AlertTitle className="font-semibold text-primary">{t('page.users.services-alert.title')}</AlertTitle>
+              <AlertDescription>
+                {t('page.users.services-alert.desc')}
+                <Link className="m-1 font-semibold text-secondary-foreground" to="/services">{t('page.nodes.certificate-alert.click')}</Link>
+              </AlertDescription>
+            </Alert>
+          )}
+        </CardFooter>
+      </Card>
+    </Page>
   )
 };