diff --git a/package-lock.json b/package-lock.json
index c91e771..e0ab908 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,6 +6,9 @@
     "": {
       "name": "test-admin",
       "dependencies": {
+        "@emotion/react": "^11.14.0",
+        "@emotion/styled": "^11.14.0",
+        "@mui/material": "^5.16.13",
         "ra-data-json-server": "^5.4.0",
         "react": "^18.3.0",
         "react-admin": "^5.4.0",
diff --git a/package.json b/package.json
index 66784f6..5975222 100644
--- a/package.json
+++ b/package.json
@@ -10,17 +10,20 @@
     "format": "prettier --write ./src"
   },
   "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/material": "^5.16.13",
+    "ra-data-json-server": "^5.4.0",
     "react": "^18.3.0",
     "react-admin": "^5.4.0",
-    "react-dom": "^18.3.0",
-    "ra-data-json-server": "^5.4.0"
+    "react-dom": "^18.3.0"
   },
   "devDependencies": {
-    "@typescript-eslint/parser": "^5.60.1",
-    "@typescript-eslint/eslint-plugin": "^5.60.1",
     "@types/node": "^20.10.7",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^5.60.1",
+    "@typescript-eslint/parser": "^5.60.1",
     "@vitejs/plugin-react": "^4.0.1",
     "eslint": "^8.43.0",
     "eslint-config-prettier": "^8.8.0",
@@ -31,4 +34,4 @@
     "vite": "^5.3.5"
   },
   "name": "test-admin"
-}
\ No newline at end of file
+}
diff --git a/src/users.tsx b/src/users.tsx
index 85ee985..70d6bcb 100644
--- a/src/users.tsx
+++ b/src/users.tsx
@@ -1,17 +1,29 @@
 // in src/users.tsx
-import { List, Datagrid, TextField, EmailField } from "react-admin";
+import { useMediaQuery } from "@mui/material";
+import { List, SimpleList, Datagrid, TextField, EmailField, } from "react-admin";
 
-export const UserList = () => (
-    <List>
-        <Datagrid>
-            <TextField source="id" />
-            <TextField source="name" />
-            <TextField source="username" />
-            <EmailField source="email" />
-            <TextField source="address.street" />
-            <TextField source="phone" />
-            <TextField source="website" />
-            <TextField source="company.name" />
-        </Datagrid>
-    </List>
-);
+export const UserList = () => {
+    const isSmall = useMediaQuery((theme) => theme.breakpoints.down("sm"));
+    return (
+        <List>
+            {isSmall ? (
+                <SimpleList
+                    primaryText={(record) => record.name}
+                    secondaryText={(record) => record.username}
+                    tertiaryText={(record) => record.email}
+                />
+            ) : (
+                <Datagrid>
+                    <TextField source="id" />
+                    <TextField source="name" />
+                    <TextField source="username" />
+                    <EmailField source="email" />
+                    <TextField source="address.street" />
+                    <TextField source="phone" />
+                    <TextField source="website" />
+                    <TextField source="company.name" />
+                </Datagrid>
+            )}
+        </List>
+    );
+};
\ No newline at end of file