diff --git a/frontend/components/user/UsersDrawer.jsx b/frontend/components/user/UsersDrawer.jsx
new file mode 100644
index 0000000..81d0210
--- /dev/null
+++ b/frontend/components/user/UsersDrawer.jsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import { Drawer, Form, Input, Radio, Button } from 'antd';
+
+const UsersDrawer = ({ drawerVisible, setDrawerVisible, form, onFinish, selectedRole, setSelectedRole }) => (
+  <Drawer
+    title="Editar usuario"
+    width={500}
+    onClose={() => setDrawerVisible(false)}
+    visible={drawerVisible}
+  >
+    <Form form={form} onFinish={onFinish}>
+      <Form.Item 
+        label="Nombre" 
+        name="name"
+        rules={[
+          {
+            required: true,
+            message: '¡Por favor ingrese el nombre del usuario!',
+          },
+        ]}
+      >
+        <Input />
+      </Form.Item>
+      <Form.Item 
+        label="Email" 
+        name="email"
+        rules={[
+          {
+            required: true,
+            message: '¡Por favor ingrese el email del usuario!',
+          },
+        ]}
+      >
+        <Input />
+      </Form.Item>
+      <Form.Item 
+        label="Rol" 
+        name="role"
+      >
+        <Radio.Group onChange={(e) => setSelectedRole(e.target.value)}>
+          <Radio.Button value="Empleado">Empleado</Radio.Button>
+          <Radio.Button value="Administrador">Administrador</Radio.Button>
+        </Radio.Group>
+      </Form.Item>
+      <Form.Item>
+        <Button type="primary" htmlType="submit" style={{ textAlign: 'center' }}>Guardar cambios</Button>
+      </Form.Item>
+    </Form>
+  </Drawer>
+);
+
+export default UsersDrawer;
\ No newline at end of file
diff --git a/frontend/components/user/UsersHeader.jsx b/frontend/components/user/UsersHeader.jsx
new file mode 100644
index 0000000..0f4010a
--- /dev/null
+++ b/frontend/components/user/UsersHeader.jsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { Layout } from 'antd';
+import TopMenu from '../../src/pages/dashboard/TopMenu.jsx';
+
+const { Header } = Layout;
+
+const UsersHeader = () => (
+  <Header className='home-header-dashboard'>
+    <TopMenu />
+  </Header>
+);
+
+export default UsersHeader;
\ No newline at end of file
diff --git a/frontend/components/user/UsersLayout.jsx b/frontend/components/user/UsersLayout.jsx
new file mode 100644
index 0000000..1884654
--- /dev/null
+++ b/frontend/components/user/UsersLayout.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Layout } from 'antd';
+import LeftMenu from '../../src/pages/dashboard/LeftMenu.jsx';
+
+const UsersLayout = ({ children }) => (
+  <Layout>
+    <Layout.Sider>
+      <LeftMenu />
+    </Layout.Sider>
+    <Layout.Content className='layout-content-user'>
+      {children}
+    </Layout.Content>
+  </Layout>
+);
+
+export default UsersLayout;
\ No newline at end of file
diff --git a/frontend/components/user/UsersTable.jsx b/frontend/components/user/UsersTable.jsx
new file mode 100644
index 0000000..d916ed4
--- /dev/null
+++ b/frontend/components/user/UsersTable.jsx
@@ -0,0 +1,74 @@
+import React from 'react';
+import { Table, Tag, Button, Space, Switch } from 'antd';
+import { DeleteOutlined, SyncOutlined } from '@ant-design/icons';
+
+const UsersTable = ({ users, handleUpdate, handleDelete, handleSwitchChange, getRandomColor }) => {
+  const columns = [
+    {
+      title: 'ID',
+      dataIndex: 'id',
+      key: 'id',
+    },
+    {
+      title: 'Nombre',
+      dataIndex: 'name',
+      key: 'name',
+    },
+    {
+      title: 'Email',
+      dataIndex: 'email',
+      key: 'email',
+      render: (email) => (
+        <Tag color={getRandomColor()}>{email}</Tag>
+      ),
+    },
+    {
+      title: 'Rol',
+      dataIndex: 'role',
+      key: 'role',
+      render: (role) => (
+        <Tag color={role === 'Administrador' ? 'green' : 'blue'}>{role}</Tag>
+      ),
+    },
+    {
+      title: 'Estado',
+      dataIndex: 'active',
+      key: 'active',
+      render: (active, record) => (
+        <Switch
+          checked={active}
+          checkedChildren="Activo"
+          unCheckedChildren="Inactivo"
+          onChange={(checked) => handleSwitchChange(record.id, checked)}
+          style={{ backgroundColor: active ? 'green' : 'red', transition: 'background-color 0.3s' }} 
+        />
+      ),
+    },
+    {
+      title: 'Acción',
+      key: 'action',
+      render: (_, record) => (
+        <Space size="middle">
+          <Button type="primary" icon={<SyncOutlined />} onClick={() => handleUpdate(record)}>Editar</Button>
+          <Button danger icon={<DeleteOutlined />} onClick={() => handleDelete(record.id)}>Eliminar</Button>
+        </Space>
+      ),
+    },
+  ];
+
+  return (
+    <Table 
+      dataSource={users} 
+      columns={columns} 
+      rowKey="id" 
+      pagination={{
+        pageSize: 10, 
+        showSizeChanger: false, 
+        pageSizeOptions: ['5', '10', '20'], 
+        showTotal: (total, range) => `${range[0]}-${range[1]} de ${total} filas`,
+      }}
+    />
+  );
+};
+
+export default UsersTable;
\ No newline at end of file
diff --git a/frontend/src/pages/users/Users.jsx b/frontend/src/pages/users/Users.jsx
index d3787ad..193b734 100644
--- a/frontend/src/pages/users/Users.jsx
+++ b/frontend/src/pages/users/Users.jsx
@@ -1,253 +1,152 @@
 import { useEffect, useState } from 'react';
-import { Layout, Table, Tag, Typography, Button, Space, Modal, Form, Input, Switch, Drawer, Radio, message } from 'antd';
-import { DeleteOutlined, SyncOutlined } from '@ant-design/icons';
+import { Layout, Typography, Modal, Form, message } from 'antd';
 
-import TopMenu from '../dashboard/TopMenu.jsx';
-import LeftMenu from '../dashboard/LeftMenu.jsx';
+import UsersTable from '../../../components/user/UsersTable';
+import UsersDrawer from '../../../components/user/UsersDrawer';
+import UsersHeader from '../../../components/user/UsersHeader';
+import UsersLayout from '../../../components/user/UsersLayout';
 
 import '../../css/DashboardMenu.css';
 import '../../css/User.css';
 
-const { Header } = Layout;
 const { confirm } = Modal;
 
 const Users = () => {
-    const [users, setUsers] = useState([]);
-    const [drawerVisible, setDrawerVisible] = useState(false);
-    const [selectedUser, setSelectedUser] = useState(null);
-    const [selectedRole, setSelectedRole] = useState(null); 
-    const [form] = Form.useForm();
+  const [users, setUsers] = useState([]);
+  const [drawerVisible, setDrawerVisible] = useState(false);
+  const [selectedUser, setSelectedUser] = useState(null);
+  const [selectedRole, setSelectedRole] = useState(null); 
+  const [form] = Form.useForm();
 
-    useEffect(() => {
-        fetchUsers();
-    }, []);
+  useEffect(() => {
+    fetchUsers();
+  }, []);
 
-    const fetchUsers = async () => {
-        try {
-            const response = await fetch(`${import.meta.env.VITE_APP_API_URL}/user`);
-            if (response.ok) {
-                const data = await response.json();
-                setUsers(data.data);
-            } else {
-                console.error('Error getting users');
-            }
-        } catch (error) {
-            console.error(error);
-        }
-    };
-
-    const getRandomColor = () => {
-        const colors = ['blue', 'red', 'yellow', 'green', 'purple'];
-        return colors[Math.floor(Math.random() * colors.length)];
-    };
+  const fetchUsers = async () => {
+    try {
+      const response = await fetch(`${import.meta.env.VITE_APP_API_URL}/user`);
+      if (response.ok) {
+        const data = await response.json();
+        setUsers(data.data);
+      } else {
+        console.error('Error getting users');
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  };
 
-    const handleDelete = (id) => {
-        confirm({
-            title: '¿Estás seguro de eliminar este usuario?',
-            content: 'Esta acción no se puede deshacer.',
-            okText: 'Eliminar',
-            okType: 'danger',
-            cancelText: 'Cancelar',
-            onOk() {
-                fetch(`${import.meta.env.VITE_APP_API_URL}/user/${id}`, {
-                    method: 'DELETE',
-                })
-                    .then(response => {
-                        if (response.ok) {
-                            fetchUsers(); 
-                            message.success('Usuario eliminado exitosamente.');
-                        } else {
-                            console.error('Error to delete contact');
-                        }
-                    })
-                    .catch(error => {
-                        console.error('Error processing request:', error);
-                    });
-            },
-            onCancel() {
-                console.log('Canceled');
-            },
-        });
-    };
+  const getRandomColor = () => {
+    const colors = ['blue', 'red', 'yellow', 'green', 'purple'];
+    return colors[Math.floor(Math.random() * colors.length)];
+  };
 
-    const handleUpdate = (user) => {
-        setSelectedUser(user);
-        form.setFieldsValue({
-            name: user.name,
-            email: user.email,
-            role: user.role,
-            active: user.active
-        });
-        setSelectedRole(user.role); 
-        setDrawerVisible(true);
-    };
-
-    const onFinish = async (values) => {
-        try {
-            const response = await fetch(`${import.meta.env.VITE_APP_API_URL}/user/${selectedUser.id}`, {
-                method: 'PUT',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify(values),
-            });
+  const handleDelete = (id) => {
+    confirm({
+      title: '¿Estás seguro de eliminar este usuario?',
+      content: 'Esta acción no se puede deshacer.',
+      okText: 'Eliminar',
+      okType: 'danger',
+      cancelText: 'Cancelar',
+      onOk() {
+        fetch(`${import.meta.env.VITE_APP_API_URL}/user/${id}`, {
+          method: 'DELETE',
+        })
+          .then(response => {
             if (response.ok) {
-                await fetchUsers(); 
-                setDrawerVisible(false);
-                message.success('Usuario editado exitosamente.');
+              fetchUsers(); 
+              message.success('Usuario eliminado exitosamente.');
             } else {
-                console.error('Error updating user');
+              console.error('Error to delete contact');
             }
-        } catch (error) {
+          })
+          .catch(error => {
             console.error('Error processing request:', error);
-        }
-    };
+          });
+      },
+      onCancel() {
+        console.log('Canceled');
+      },
+    });
+  };
 
-    const handleSwitchChange = async (userId, checked) => {
-        try {
-            const response = await fetch(`${import.meta.env.VITE_APP_API_URL}/user/${userId}`, {
-                method: 'PUT',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({ active: checked }),
-            });
-            if (!response.ok) {
-                console.error('Error updating user');
-            } else {
-                await fetchUsers(); 
-            }
-        } catch (error) {
-            console.error('Error processing request:', error);
-        }
-    };
+  const handleUpdate = (user) => {
+    setSelectedUser(user);
+    form.setFieldsValue({
+      name: user.name,
+      email: user.email,
+      role: user.role,
+      active: user.active
+    });
+    setSelectedRole(user.role); 
+    setDrawerVisible(true);
+  };
 
-    const columns = [
-        {
-            title: 'ID',
-            dataIndex: 'id',
-            key: 'id',
-        },
-        {
-            title: 'Nombre',
-            dataIndex: 'name',
-            key: 'name',
-        },
-        {
-            title: 'Email',
-            dataIndex: 'email',
-            key: 'email',
-            render: (email) => (
-                <Tag color={getRandomColor()}>{email}</Tag>
-            ),
+  const onFinish = async (values) => {
+    try {
+      const response = await fetch(`${import.meta.env.VITE_APP_API_URL}/user/${selectedUser.id}`, {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json',
         },
-        {
-            title: 'Rol',
-            dataIndex: 'role',
-            key: 'role',
-            render: (role) => (
-                <Tag color={role === 'Administrador' ? 'green' : 'blue'}>{role}</Tag>
-            ),
-        },
-        {
-            title: 'Estado',
-            dataIndex: 'active',
-            key: 'active',
-            render: (active, record) => (
-                <Switch
-                    checked={active}
-                    checkedChildren="Activo"
-                    unCheckedChildren="Inactivo"
-                    onChange={(checked) => handleSwitchChange(record.id, checked)}
-                    style={{ backgroundColor: active ? 'green' : 'red', transition: 'background-color 0.3s' }} 
-                />
-            ),
-        },
-        {
-            title: 'Acción',
-            key: 'action',
-            render: (_, record) => (
-                <Space size="middle">
-                    <Button type="primary" icon={<SyncOutlined />} onClick={() => handleUpdate(record)}>Editar</Button>
-                    <Button danger icon={<DeleteOutlined />} onClick={() => handleDelete(record.id)}>Eliminar</Button>
-                </Space>
-            ),
+        body: JSON.stringify(values),
+      });
+      if (response.ok) {
+        await fetchUsers(); 
+        setDrawerVisible(false);
+        message.success('Usuario editado exitosamente.');
+      } else {
+        console.error('Error updating user');
+      }
+    } catch (error) {
+      console.error('Error processing request:', error);
+    }
+  };
+
+  const handleSwitchChange = async (userId, checked) => {
+    try {
+      const response = await fetch(`${import.meta.env.VITE_APP_API_URL}/user/${userId}`, {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json',
         },
-    ];
+        body: JSON.stringify({ active: checked }),
+      });
+      if (!response.ok) {
+        console.error('Error updating user');
+      } else {
+        await fetchUsers(); 
+      }
+    } catch (error) {
+      console.error('Error processing request:', error);
+    }
+  };
 
-    return (
-        <Layout>
-            <Header className='home-header-dashboard'>
-                <TopMenu />
-            </Header>
-            <Layout>
-                <Layout.Sider>
-                    <LeftMenu />
-                </Layout.Sider>
-                <Layout.Content className='layout-content-user'>
-                    <Typography.Title className='table-title-user' level={2}>
-                        Usuarios
-                    </Typography.Title>
-                    <Table 
-                        dataSource={users} 
-                        columns={columns} 
-                        rowKey="_id" 
-                        pagination={{
-                            pageSize: 10, 
-                            showSizeChanger: false, 
-                            pageSizeOptions: ['5', '10', '20'], 
-                            showTotal: (total, range) => `${range[0]}-${range[1]} de ${total} filas`,
-                        }}
-                    />
-                </Layout.Content>
-            </Layout>
-            <Drawer
-                title="Editar usuario"
-                width={500}
-                onClose={() => setDrawerVisible(false)}
-                visible={drawerVisible}
-            >
-                <Form form={form} onFinish={onFinish}>
-                    <Form.Item 
-                        label="Nombre" 
-                        name="name"
-                        rules={[
-                            {
-                                required: true,
-                                message: '¡Por favor ingrese el nombre del usuario!',
-                            },
-                        ]}
-                    >
-                        <Input />
-                    </Form.Item>
-                    <Form.Item 
-                        label="Email" 
-                        name="email"
-                        rules={[
-                            {
-                                required: true,
-                                message: '¡Por favor ingrese el email del usuario!',
-                            },
-                        ]}
-                    >
-                        <Input />
-                    </Form.Item>
-                    <Form.Item 
-                        label="Rol" 
-                        name="role"
-                    >
-                        <Radio.Group onChange={(e) => setSelectedRole(e.target.value)}>
-                            <Radio.Button value="Empleado">Empleado</Radio.Button>
-                            <Radio.Button value="Administrador">Administrador</Radio.Button>
-                        </Radio.Group>
-                    </Form.Item>
-                    <Form.Item>
-                        <Button type="primary" htmlType="submit" style={{ textAlign: 'center' }}>Guardar cambios</Button>
-                    </Form.Item>
-                </Form>
-            </Drawer>
-        </Layout>
-    )
-}
+  return (
+    <Layout>
+      <UsersHeader />
+      <UsersLayout>
+        <Typography.Title className='table-title-user' level={2}>
+          Usuarios
+        </Typography.Title>
+        <UsersTable
+          users={users}
+          handleUpdate={handleUpdate}
+          handleDelete={handleDelete}
+          handleSwitchChange={handleSwitchChange}
+          getRandomColor={getRandomColor}
+        />
+      </UsersLayout>
+      <UsersDrawer
+        drawerVisible={drawerVisible}
+        setDrawerVisible={setDrawerVisible}
+        form={form}
+        onFinish={onFinish}
+        selectedRole={selectedRole}
+        setSelectedRole={setSelectedRole}
+      />
+    </Layout>
+  );
+};
 
-export default Users;
+export default Users;
\ No newline at end of file
diff --git a/frontend/src/pages/vehicle/Vehicles.jsx b/frontend/src/pages/vehicle/Vehicles.jsx
index 918dc71..dfbf3ad 100644
--- a/frontend/src/pages/vehicle/Vehicles.jsx
+++ b/frontend/src/pages/vehicle/Vehicles.jsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { Layout, Typography, message, Modal, Form } from 'antd';
+
 import VehiclesTable from '../../../components/vehicle/VehiclesTable';
 import VehiclesDrawer from '../../../components/vehicle/VehiclesDrawer';
 import VehiclesHeader from '../../../components/vehicle/VehiclesHeader';