diff --git a/dashboard/src/components/entity-table/table-filtering.tsx b/dashboard/src/components/entity-table/table-filtering.tsx
index fb1c0b0..aeb7847 100644
--- a/dashboard/src/components/entity-table/table-filtering.tsx
+++ b/dashboard/src/components/entity-table/table-filtering.tsx
@@ -14,7 +14,7 @@ export const TableFiltering: FC<TableFilteringProps> = () => {
             placeholder={t('table.filter-placeholder', { name: filtering.column })}
             value={filtering.columnFilters}
             onChange={(e) => filtering.setColumnFilters(e.target.value)}
-            className="max-w-sm"
+            className="max-w-sm w-[12rem] md:w-[20rem]"
         />
     );
 }
diff --git a/dashboard/src/components/entity-table/table.tsx b/dashboard/src/components/entity-table/table.tsx
index bf9d550..f6bded7 100644
--- a/dashboard/src/components/entity-table/table.tsx
+++ b/dashboard/src/components/entity-table/table.tsx
@@ -2,7 +2,6 @@ import {
     ColumnDef,
     flexRender,
 } from "@tanstack/react-table"
-
 import {
     Table,
     TableBody,
@@ -28,7 +27,7 @@ export function EntityDataTable<TData, TValue>({
     const { t } = useTranslation();
     const { table, isLoading } = useEntityTableContext()
     return (
-        <Table>
+        <Table className="w-full">
             <TableHeader>
                 {table.getHeaderGroups().map((headerGroup) => (
                     <TableRow key={headerGroup.id}>
diff --git a/dashboard/src/components/page/index.tsx b/dashboard/src/components/page/index.tsx
index 2ae6696..61027d2 100644
--- a/dashboard/src/components/page/index.tsx
+++ b/dashboard/src/components/page/index.tsx
@@ -10,8 +10,10 @@ interface PageProps extends PropsWithChildren { }
 
 export const Page: FC<PageProps> = ({ children }) => {
     return (
-        <ScrollArea style={{ height: `calc(100vh - 4.5rem)` }} className="m-3">
-            {children}
+        <ScrollArea style={{ height: `calc(100vh - 4.5rem)` }} className="sm:w-screen md:p-3 md:w-[100%]">
+            <div className="flex flex-col justify-center items-center h-full sm:w-screen md:w-[100%]">
+                {children}
+            </div>
         </ScrollArea>
     );
 }
diff --git a/dashboard/src/routes/_dashboard/hosts.tsx b/dashboard/src/routes/_dashboard/hosts.tsx
index 70e8649..6808b44 100644
--- a/dashboard/src/routes/_dashboard/hosts.tsx
+++ b/dashboard/src/routes/_dashboard/hosts.tsx
@@ -7,7 +7,7 @@ export const HostsPage = () => {
   const { t } = useTranslation()
   return (
     <Page>
-      <Card>
+      <Card className="sm:w-screen md:w-full">
         <CardHeader>
           <CardTitle>
             {t('hosts')}
diff --git a/dashboard/src/routes/_dashboard/nodes.tsx b/dashboard/src/routes/_dashboard/nodes.tsx
index e05e5f4..d52a8ce 100644
--- a/dashboard/src/routes/_dashboard/nodes.tsx
+++ b/dashboard/src/routes/_dashboard/nodes.tsx
@@ -19,7 +19,7 @@ export const NodesPage: FC = () => {
   const { t } = useTranslation();
   return (
     <Page>
-      <Card>
+      <Card className="sm:w-screen md:w-full">
         <CardHeader>
           <CardTitle>
             {t('nodes')}
diff --git a/dashboard/src/routes/_dashboard/services.tsx b/dashboard/src/routes/_dashboard/services.tsx
index dbf0c7f..77f1a8d 100644
--- a/dashboard/src/routes/_dashboard/services.tsx
+++ b/dashboard/src/routes/_dashboard/services.tsx
@@ -15,7 +15,7 @@ export const ServicesPage: FC = () => {
   const { t } = useTranslation();
   return (
     <Page>
-      <Card>
+      <Card className="sm:w-screen md:w-full">
         <CardHeader>
           <CardTitle>
             {t('services')}
diff --git a/dashboard/src/routes/_dashboard/settings.tsx b/dashboard/src/routes/_dashboard/settings.tsx
index 12fe1a5..b3ba33e 100644
--- a/dashboard/src/routes/_dashboard/settings.tsx
+++ b/dashboard/src/routes/_dashboard/settings.tsx
@@ -8,7 +8,7 @@ export const Settings = () => {
     const { t } = useTranslation()
     return (
         <Page>
-            <Card className="m-3">
+            <Card className="sm:w-screen md:w-full">
                 <CardContent>
                     <CardHeader>
                         <CardTitle>
diff --git a/dashboard/src/routes/_dashboard/users.tsx b/dashboard/src/routes/_dashboard/users.tsx
index 916115c..07dadb7 100644
--- a/dashboard/src/routes/_dashboard/users.tsx
+++ b/dashboard/src/routes/_dashboard/users.tsx
@@ -21,7 +21,7 @@ export const UsersPage: FC = () => {
   const { t } = useTranslation();
   return (
     <Page>
-      <Card >
+      <Card className="sm:w-screen md:w-full">
         <CardHeader>
           <CardTitle>
             {t('users')}