diff --git a/src/common/components/index.ts b/src/common/components/index.ts
index 2cba9d0..829e726 100644
--- a/src/common/components/index.ts
+++ b/src/common/components/index.ts
@@ -4,4 +4,3 @@ export * from './sidebar-menu';
 export * from './navigation-button';
 export * from './spinner';
 export * from './form';
-export * from './tabs';
diff --git a/src/common/components/tabs/index.ts b/src/common/components/tabs/index.ts
deleted file mode 100644
index 69e62d8..0000000
--- a/src/common/components/tabs/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './tabs.component';
diff --git a/src/common/components/tabs/tabs.component.tsx b/src/common/components/tabs/tabs.component.tsx
deleted file mode 100644
index 7af900d..0000000
--- a/src/common/components/tabs/tabs.component.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import * as React from 'react';
-import { TabsProps, TabPanelProps } from '#common/models';
-import { Tabs as MUITabs, Tab, Box } from '@mui/material/';
-
-import * as classes from './tabs.styles';
-
-const TabPanel = (props: TabPanelProps) => {
-  const { children, value, index, ...other } = props;
-
-  return (
-    <div
-      role="tabpanel"
-      hidden={value !== index}
-      id={`simple-tabpanel-${index}`}
-      aria-labelledby={`simple-tab-${index}`}
-      {...other}
-    >
-      {value === index && <Box sx={{ p: 3 }}>{children}</Box>}
-    </div>
-  );
-};
-
-const a11yProps = (index: number) => {
-  return {
-    id: `simple-tab-${index}`,
-    'aria-controls': `simple-tabpanel-${index}`,
-  };
-};
-
-export const Tabs: React.FC<TabsProps> = (props: TabsProps) => {
-  const { contents } = props;
-  const [value, setValue] = React.useState<number>(0);
-
-  const handleChange = (_event: React.SyntheticEvent, newValue: number) => {
-    setValue(newValue);
-  };
-
-  return (
-    <Box sx={{ width: '100%' }}>
-      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
-        <MUITabs
-          className={classes.tabsContainer}
-          value={value}
-          onChange={handleChange}
-          aria-label="basic tabs example"
-        >
-          {contents.map((prop, idx) => {
-            return (
-              <Tab
-                label={prop.label}
-                key={`label-${prop.label.toLocaleLowerCase().split(' ').join('-')}-${idx}`}
-                {...a11yProps(idx)}
-              />
-            );
-          })}
-        </MUITabs>
-      </Box>
-      {contents.map((prop, idx) => {
-        return (
-          <TabPanel
-            key={`panel-${prop.label.toLocaleLowerCase().split(' ').join('-')}-${idx}`}
-            value={value}
-            index={idx}
-          >
-            {prop.panel}
-          </TabPanel>
-        );
-      })}
-    </Box>
-  );
-};
diff --git a/src/common/components/tabs/tabs.styles.ts b/src/common/components/tabs/tabs.styles.ts
deleted file mode 100644
index 10f4fe3..0000000
--- a/src/common/components/tabs/tabs.styles.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { css } from '@emotion/css';
-
-export const tabsContainer = css`
-  width: 100%;
-`;
diff --git a/src/common/models/index.ts b/src/common/models/index.ts
index 93f46af..8625887 100644
--- a/src/common/models/index.ts
+++ b/src/common/models/index.ts
@@ -1,4 +1,3 @@
 export * from './pagination.model';
 export * from './lookup.model';
 export * from './collection.model';
-export * from './tabs.model';
diff --git a/src/common/models/tabs.model.ts b/src/common/models/tabs.model.ts
deleted file mode 100644
index 755c4e0..0000000
--- a/src/common/models/tabs.model.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as React from 'react';
-
-export interface TabsProps {
-  contents: TabsObjectProps[];
-}
-
-export interface TabsObjectProps {
-  label: string;
-  panel: any;
-}
-
-export interface TabPanelProps {
-  children?: React.ReactNode;
-  index: number;
-  value: number;
-}
diff --git a/src/modules/users/edit/components/tab-panel.component.tsx b/src/modules/users/edit/components/tab-panel.component.tsx
new file mode 100644
index 0000000..ded4465
--- /dev/null
+++ b/src/modules/users/edit/components/tab-panel.component.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { useWithTheme } from '#core/theme/theme.hooks.ts';
+import * as innerClasses from './tabs.styles';
+
+interface TabPanelProps {
+  index: number;
+  value: number;
+  children: React.ReactNode;
+}
+
+export const TabPanel = (props: TabPanelProps) => {
+  const { children, value, index } = props;
+  const classes = useWithTheme(innerClasses);
+
+  return value === index && <div className={classes.tabPanel}>{children}</div>;
+};
diff --git a/src/modules/users/edit/components/tabs.component.tsx b/src/modules/users/edit/components/tabs.component.tsx
new file mode 100644
index 0000000..c0a9091
--- /dev/null
+++ b/src/modules/users/edit/components/tabs.component.tsx
@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { TabPanel } from './tab-panel.component';
+import { Tabs as MUITabs, Tab, Paper } from '@mui/material/';
+
+import * as innerClasses from './tabs.styles';
+
+enum TabIndex {
+  USER_SHEET,
+  RESET_PASSWORD,
+}
+
+interface Props {
+  id: string;
+}
+
+export const Tabs: React.FC<Props> = ({ id }) => {
+  const [activeTab, setActiveTab] = React.useState<number>(0);
+
+  const handleChange = (_event: React.SyntheticEvent, newValue: number) => setActiveTab(newValue);
+
+  return (
+    <div className={innerClasses.tabsComponent}>
+      <Paper elevation={0}>
+        <div className={innerClasses.tabsContainer}>
+          <MUITabs value={activeTab} onChange={handleChange}>
+            <Tab label="Ficha de usuario" />
+            <Tab label="Resetear Password" />
+          </MUITabs>
+        </div>
+        <TabPanel value={activeTab} index={TabIndex.USER_SHEET}>
+          <h3>User id: {id}</h3>
+        </TabPanel>
+        <TabPanel value={activeTab} index={TabIndex.RESET_PASSWORD}>
+          <h3>Reset Password</h3>
+        </TabPanel>
+      </Paper>
+    </div>
+  );
+};
diff --git a/src/modules/users/edit/components/tabs.styles.ts b/src/modules/users/edit/components/tabs.styles.ts
new file mode 100644
index 0000000..c8f4e5e
--- /dev/null
+++ b/src/modules/users/edit/components/tabs.styles.ts
@@ -0,0 +1,18 @@
+import { css } from '@emotion/css';
+import { Theme } from '@mui/material';
+
+export const tabsComponent = css`
+  display: 'flex';
+  flexdirection: 'column';
+  alignitems: 'center';
+  width: 100%;
+`;
+
+export const tabsContainer = css`
+  border-bottom: 1;
+  border-color: 'divider';
+`;
+
+export const tabPanel = (theme: Theme) => css`
+  padding-block: ${theme.spacing(2)};
+`;
diff --git a/src/modules/users/edit/user-edit.pod.tsx b/src/modules/users/edit/user-edit.pod.tsx
index 3c3705c..af388e8 100644
--- a/src/modules/users/edit/user-edit.pod.tsx
+++ b/src/modules/users/edit/user-edit.pod.tsx
@@ -1,28 +1,16 @@
 import React from 'react';
-import { TabsObjectProps } from '#common/models';
 import { Link } from '@tanstack/react-router';
 import { useParams } from '@tanstack/react-router';
+import { Tabs } from './components/tabs.component';
 import * as classes from './user-edit.styles';
-import { Tabs } from '#common/components/';
 
 export const UserEditPod: React.FC = () => {
-  const { id } = useParams({ strict: false });
-
-  const tabsContents: TabsObjectProps[] = [
-    {
-      label: 'Ficha usuario',
-      panel: `User ID: ${id}`,
-    },
-    {
-      label: 'Resetear clave',
-      panel: 'Resetear clave',
-    },
-  ];
+  const { id } = useParams({ from: '/_auth/edit-user/$id' });
 
   return (
     <div className={classes.root}>
       <h1>Soy la página de Edición de usuario</h1>
-      <Tabs contents={tabsContents} />
+      <Tabs id={id} />
       <Link to="/users">Navegar a listado de usuarios</Link>
     </div>
   );