diff --git a/plugins/cmyk-participation-datatable/datatable-columns.ts b/plugins/cmyk-participation-datatable/datatable-columns.ts
new file mode 100644
index 0000000..cf44af8
--- /dev/null
+++ b/plugins/cmyk-participation-datatable/datatable-columns.ts
@@ -0,0 +1,127 @@
+import {
+  projectsLabels,
+  stackWantedLabels,
+  workExperienceLabels,
+} from './datatable-labels';
+import { MUIDataTableProps } from 'mui-datatables';
+
+export const columns: MUIDataTableProps['columns'] = [
+  {
+    name: '_createdAt',
+    label: 'Fecha',
+    options: {
+      filter: false,
+      sort: true,
+      customBodyRender: (value) => new Date(value).toLocaleString(),
+    },
+  },
+  {
+    name: 'discordUser',
+    label: 'Usuario',
+    options: {
+      filter: false,
+      sort: true,
+    },
+  },
+  {
+    name: 'email',
+    label: 'Email',
+    options: {
+      filter: false,
+      sort: true,
+    },
+  },
+  {
+    name: 'timezone',
+    label: 'Zona Horaria',
+    options: {
+      filter: true,
+      sort: true,
+    },
+  },
+  {
+    name: 'timeAvailability',
+    label: 'Disponibilidad horaria (semanal)',
+    options: {
+      filter: false,
+      sort: true,
+      customBodyRender: (value) =>
+        value === '>2<4hours'
+          ? 'Entre 2 y 4 horas'
+          : value === '>4<6hours'
+          ? 'Entre 4 y 6 horas'
+          : 'Más de 6 horas',
+    },
+  },
+  {
+    name: 'aboutParticipant',
+    label: 'Sobre mí',
+    options: {
+      filter: false,
+      sort: false,
+    },
+  },
+  {
+    name: 'participationType',
+    label: 'Form',
+    options: {
+      filter: true,
+      sort: true,
+      customBodyRender: (value) =>
+        value === 'lider' ? 'Líder' : 'Participante',
+    },
+  },
+  {
+    name: 'workExperience',
+    label: 'Experiencia Laboral',
+    options: {
+      filter: true,
+      sort: true,
+      customBodyRender: (value) => workExperienceLabels[value],
+    },
+  },
+  {
+    name: 'stackWanted',
+    label: 'Front o Back',
+    options: {
+      filter: true,
+      sort: true,
+      customBodyRender: (value) => stackWantedLabels[value],
+    },
+  },
+  {
+    name: 'projects',
+    label: 'Proyecto',
+    options: {
+      filter: true,
+      sort: true,
+      customBodyRender: (value) => projectsLabels[value],
+    },
+  },
+  {
+    name: 'previousKnowledge',
+    label: 'Conocimientos',
+    options: {
+      filter: false,
+      sort: false,
+    },
+  },
+  {
+    name: 'otherQuestions',
+    label: 'Otras preguntas',
+    options: {
+      filter: false,
+      sort: false,
+    },
+  },
+  {
+    name: 'status',
+    label: 'Estado',
+    options: {
+      filter: true,
+      sort: true,
+      customBodyRender: (value) =>
+        value === 'revision' ? '🟡' : value === 'approved' ? '🟢' : '🔴',
+    },
+  },
+];
diff --git a/plugins/cmyk-participation-datatable/datatable-labels.ts b/plugins/cmyk-participation-datatable/datatable-labels.ts
new file mode 100644
index 0000000..a9993da
--- /dev/null
+++ b/plugins/cmyk-participation-datatable/datatable-labels.ts
@@ -0,0 +1,20 @@
+export const workExperienceLabels = {
+  level0: 'Hasta 6 meses',
+  level1: 'Entre 6 meses y 1 año',
+  level2: 'Más de un año',
+  level3: 'Hasta 1 año',
+  level4: 'Entre 1 año y 3 años',
+  level5: 'Más de 3 años',
+} as const;
+
+export const stackWantedLabels = {
+  front: 'Frontend (React)',
+  back: 'Backend (Node/Express)',
+  both: 'Ambos',
+} as const;
+
+export const projectsLabels = {
+  flashcards: 'App Flashcards',
+  callForPapers: 'App Administrador call for papars',
+  both: 'No tengo preferencias',
+} as const;
diff --git a/plugins/cmyk-participation-datatable/datatable-options.ts b/plugins/cmyk-participation-datatable/datatable-options.ts
new file mode 100644
index 0000000..ca1d847
--- /dev/null
+++ b/plugins/cmyk-participation-datatable/datatable-options.ts
@@ -0,0 +1,38 @@
+import { MUIDataTableProps } from 'mui-datatables';
+
+export const options: MUIDataTableProps['options'] = {
+  downloadOptions: { filename: 'cmypParticipantsList.csv', separator: ';' },
+  selectableRowsHeader: false,
+  selectableRowsHideCheckboxes: true,
+  rowsPerPage: 15,
+  rowsPerPageOptions: [10, 15, 20, 30, 50],
+  textLabels: {
+    body: {
+      noMatch: 'No hay resultados',
+      toolTip: 'Sort',
+      columnHeaderTooltip: (column) => `Ordenar por ${column.label}`,
+    },
+    pagination: {
+      next: 'Siguiente',
+      previous: 'Anterior',
+      rowsPerPage: 'Filas por página:',
+      displayRows: 'de',
+    },
+    toolbar: {
+      search: 'Buscar',
+      downloadCsv: 'Descargar CSV',
+      print: 'Imprimir',
+      viewColumns: 'Ver Columnas',
+      filterTable: 'Filtrar Tabla',
+    },
+    filter: {
+      all: 'Todos',
+      title: 'FILTROS',
+      reset: 'RESET',
+    },
+    viewColumns: {
+      title: 'Ver Columnas',
+      titleAria: 'Mostrar/Ocultar Columnas',
+    },
+  },
+};
diff --git a/plugins/cmyk-participation-datatable/datatable-theme.ts b/plugins/cmyk-participation-datatable/datatable-theme.ts
new file mode 100644
index 0000000..7934173
--- /dev/null
+++ b/plugins/cmyk-participation-datatable/datatable-theme.ts
@@ -0,0 +1,128 @@
+import { createTheme } from '@material-ui/core';
+
+export const datatableTheme = createTheme({
+  overrides: {
+    MuiPaper: {
+      root: {
+        color: 'inherit',
+        backgroundColor: 'inherit',
+        display: 'flex',
+        flexDirection: 'column',
+      },
+    },
+
+    MuiToolbar: {
+      root: {
+        '& [class*="actions"]': {
+          display: 'flex',
+          alignItems: 'center',
+          gap: '0.25rem',
+          flex: '0 1 auto',
+        },
+      },
+    },
+
+    MuiButton: {
+      root: {
+        color: 'inherit',
+        '&:hover': {
+          backgroundColor: 'rgb(128 128 128 / 15%) !important',
+        },
+        '& [class*="sortActive"]': {
+          color: 'var(--card-focus-ring-color)',
+        },
+      },
+    },
+
+    MuiTableSortLabel: {
+      icon: {
+        color: 'var(--card-focus-ring-color) !important',
+      },
+    },
+
+    MuiIconButton: {
+      root: {
+        padding: '.5rem',
+        color: 'inherit',
+        '&:hover': {
+          backgroundColor: 'rgb(128 128 128 / 15%) !important',
+        },
+        '&.Mui-disabled': {
+          color: 'rgb(128 128 128 / 50%)',
+        },
+      },
+    },
+
+    MUIDataTableSearch: {
+      searchIcon: {
+        color: 'inherit',
+      },
+    },
+    MuiInputBase: {
+      root: {
+        color: 'inherit',
+      },
+    },
+
+    MUIDataTableHeadCell: {
+      fixedHeader: {
+        color: 'inherit',
+        backgroundColor: 'inherit',
+        borderTop: '1px solid var(--card-border-color)',
+        borderBottom: '1px solid var(--card-border-color)',
+        whiteSpace: 'nowrap',
+      },
+    },
+
+    MuiPopover: {
+      paper: {
+        backgroundColor: '#fafafa',
+      },
+    },
+
+    MUIDataTableBodyRow: {
+      responsiveStacked: {
+        '&': {
+          borderColor: 'var(--card-border-color)',
+        },
+      },
+    },
+
+    MuiTableCell: {
+      body: {
+        color: 'inherit',
+      },
+      footer: {
+        color: 'inherit',
+      },
+    },
+    MUIDataTableBodyCell: {
+      stackedParent: {
+        borderColor: 'var(--card-border-color)',
+      },
+    },
+
+    MuiTableRow: {
+      root: {
+        '&.MuiTableRow-hover': {
+          '&:hover': {
+            backgroundColor: 'rgb(128 128 128 / 15%)',
+          },
+        },
+      },
+    },
+
+    MuiTablePagination: {
+      root: {
+        color: 'inherit',
+      },
+    },
+    MuiSelect: {
+      icon: {
+        color: 'inherit',
+      },
+    },
+  },
+});
+
+export default datatableTheme;
diff --git a/plugins/cmyk-participation-datatable/index.tsx b/plugins/cmyk-participation-datatable/index.tsx
index 576f19a..dd6f87c 100644
--- a/plugins/cmyk-participation-datatable/index.tsx
+++ b/plugins/cmyk-participation-datatable/index.tsx
@@ -1,260 +1,86 @@
-import { FormControl, NativeSelect } from '@material-ui/core';
-import { Spinner } from '@sanity/ui';
+import { ThemeProvider } from '@material-ui/core/styles';
+import { Card, Flex, Select, Spinner, Text } from '@sanity/ui';
 import MUIDataTable from 'mui-datatables';
-import React from 'react';
+import { ChangeEvent, useEffect, useState } from 'react';
 import { clientPreConfig } from '../../sanity.client';
 import pepeJedi from './assets/images/pepe-jedi.gif';
+import { columns } from './datatable-columns';
+import { options } from './datatable-options';
+import datatableTheme from './datatable-theme';
 
+const currentCMYKVersion: number = 5;
 const client = clientPreConfig({ apiVersion: 'v1' });
 
-const workExperienceLabels = {
-  level0: 'Hasta 6 meses',
-  level1: 'Entre 6 meses y 1 año',
-  level2: 'Más de un año',
-  level3: 'Hasta 1 año',
-  level4: 'Entre 1 año y 3 años',
-  level5: 'Más de 3 años',
-};
-
-const stackWantedLabels = {
-  front: 'Frontend (React)',
-  back: 'Backend (Node/Express)',
-  both: 'Ambos',
-};
-
-const projectsLabels = {
-  flashcards: 'App Flashcards',
-  callForPapers: 'App Administrador call for papars',
-  both: 'No tengo preferencias',
-};
-
-class CMYKParticipationDatatable extends React.Component {
-  state = {
+function CMYKParticipationDatatable() {
+  const [{ participantsList, cmykVersion, loading }, setState] = useState({
+    participantsList: [],
+    cmykVersion: currentCMYKVersion.toString(),
     loading: true,
-    cmykParticipantsList: [],
-    cmykVersion: '5',
-  };
+  });
 
-  componentDidMount() {
-    this.getCMYKParticipants();
-  }
+  useEffect(() => {
+    const cmkykQuery = `*[_type == "cmykParticipant" &&  cmykVersion == "${cmykVersion}"] { _createdAt, "discordUser": discordUser->username, "email": discordUser->email, aboutParticipant, "timezone":discordUser->timezone, participationType, isChix, workExperience, stackWanted, projects, experience, timeAvailability, otherQuestions, previousKnowledge, status}`;
 
-  getCMYKParticipants = (cmykVer = 4) => {
-    client
-      .fetch(
-        `*[_type == "cmykParticipant" &&  cmykVersion == "${cmykVer}"] { _createdAt, "discordUser": discordUser->username, "email": discordUser->email, aboutParticipant, "timezone":discordUser->timezone, participationType, isChix, workExperience, stackWanted, projects, experience, timeAvailability, otherQuestions, previousKnowledge, status}`,
-        {},
-      )
-      .then((cmykPart) => {
-        this.setState({ cmykParticipantsList: cmykPart, loading: false });
-      });
-  };
+    client.fetch(cmkykQuery, {}).then((participantsList) => {
+      setState((prevState) => ({
+        ...prevState,
+        participantsList,
+        loading: false,
+      }));
+    });
+  }, [cmykVersion]);
 
-  render() {
-    const handleSelectChange = (value) => {
-      this.setState({ cmykVersion: value.target.value, loading: true });
-      this.getCMYKParticipants(parseInt(value.target.value, 10));
-    };
-    const columns = [
-      {
-        name: '_createdAt',
-        label: 'Fecha',
-        options: {
-          filter: false,
-          sort: true,
-          customBodyRender: (value) => new Date(value).toLocaleString(),
-        },
-      },
-      {
-        name: 'discordUser',
-        label: 'Usuario',
-        options: {
-          filter: false,
-          sort: true,
-        },
-      },
-      {
-        name: 'email',
-        label: 'Email',
-        options: {
-          filter: false,
-          sort: true,
-        },
-      },
-      {
-        name: 'timezone',
-        label: 'Zona Horaria',
-        options: {
-          filter: true,
-          sort: true,
-        },
-      },
-      {
-        name: 'timeAvailability',
-        label: 'Disponibilidad horaria (semanal)',
-        options: {
-          filter: false,
-          sort: true,
-          customBodyRender: (value) =>
-            value === '>2<4hours'
-              ? 'Entre 2 y 4 horas'
-              : value === '>4<6hours'
-              ? 'Entre 4 y 6 horas'
-              : 'Más de 6 horas',
-        },
-      },
-      {
-        name: 'aboutParticipant',
-        label: 'Sobre mí',
-        options: {
-          filter: false,
-          sort: false,
-        },
-      },
-      {
-        name: 'participationType',
-        label: 'Form',
-        options: {
-          filter: true,
-          sort: true,
-          customBodyRender: (value) =>
-            value === 'lider' ? 'Líder' : 'Participante',
-        },
-      },
-      {
-        name: 'workExperience',
-        label: 'Experiencia Laboral',
-        options: {
-          filter: true,
-          sort: true,
-          customBodyRender: (value) => workExperienceLabels[value],
-        },
-      },
-      {
-        name: 'stackWanted',
-        label: 'Front o Back',
-        options: {
-          filter: true,
-          sort: true,
-          customBodyRender: (value) => stackWantedLabels[value],
-        },
-      },
-      {
-        name: 'projects',
-        label: 'Proyecto',
-        options: {
-          filter: true,
-          sort: true,
-          customBodyRender: (value) => projectsLabels[value],
-        },
-      },
-      {
-        name: 'previousKnowledge',
-        label: 'Conocimientos',
-        options: {
-          filter: false,
-          sort: false,
-        },
-      },
-      {
-        name: 'otherQuestions',
-        label: 'Otras preguntas',
-        options: {
-          filter: false,
-          sort: false,
-        },
-      },
-      {
-        name: 'status',
-        label: 'Estado',
-        options: {
-          filter: true,
-          sort: true,
-          customBodyRender: (value) =>
-            value === 'revision' ? '🟡' : value === 'approved' ? '🟢' : '🔴',
-        },
-      },
-    ];
-
-    const CustomBtn = () => {
-      return (
-        <>
-          <FormControl style={{ margin: '10px 0' }}>
-            <NativeSelect
-              value={this.state.cmykVersion}
-              onChange={handleSelectChange}
-              name="cmykVersion"
-              inputProps={{ 'aria-label': 'cmykVersion' }}
-            >
-              <option value="1">CMYK v1.0</option>
-              <option value="2">CMYK v2.0</option>
-              <option value="3">CMYK v3.0</option>
-              <option value="4">CMYK v4.0</option>
-              <option value="5">CMYK v5.0</option>
-            </NativeSelect>
-          </FormControl>
-          <img src={pepeJedi} alt="jedi pepe" width="40px" height="40px" />
-        </>
-      );
-    };
+  const handleSelectChange = (e: ChangeEvent<HTMLSelectElement>) => {
+    setState((prevState) => ({
+      ...prevState,
+      cmykVersion: e.target.value,
+      loading: true,
+    }));
+  };
 
-    const options = {
-      downloadOptions: { filename: 'cmypParticipantsList.csv', separator: ';' },
-      selectableRowsHeader: false,
-      selectableRowsHideCheckboxes: true,
-      rowsPerPage: 15,
-      rowsPerPageOptions: [10, 15, 20, 30, 50],
-      customToolbar: () => <CustomBtn />,
-      textLabels: {
-        body: {
-          noMatch: 'No hay resultados',
-          toolTip: 'Sort',
-          columnHeaderTooltip: (column) => `Ordenar por ${column.label}`,
-        },
-        pagination: {
-          next: 'Siguiente',
-          previous: 'Anterior',
-          rowsPerPage: 'Filas por página:',
-          displayRows: 'de',
-        },
-        toolbar: {
-          search: 'Buscar',
-          downloadCsv: 'Descargar CSV',
-          print: 'Imprimir',
-          viewColumns: 'Ver Columnas',
-          filterTable: 'Filtrar Tabla',
-        },
-        filter: {
-          all: 'Todos',
-          title: 'FILTROS',
-          reset: 'RESET',
-        },
-        viewColumns: {
-          title: 'Ver Columnas',
-          titleAria: 'Mostrar/Ocultar Columnas',
-        },
-      },
-    };
+  return !loading ? (
+    <ThemeProvider theme={datatableTheme}>
+      <MUIDataTable
+        title="CMYK | Lista de Participantes"
+        columns={columns}
+        data={participantsList}
+        options={{
+          ...options,
+          customToolbar: () => (
+            <>
+              <Select
+                value={cmykVersion}
+                onChange={handleSelectChange}
+                name="cmykVersion"
+                aria-label="cmykVersion"
+              >
+                {[...Array(currentCMYKVersion)].map((_, i) => (
+                  <option key={i} value={i + 1}>{`CMYK v${i + 1}.0`}</option>
+                ))}
+              </Select>
 
-    return (
-      <div>
-        {/* TODO: Use components from '@sanity/ui' | https://www.sanity.io/ui */}
-        {!this.state.loading ? (
-          <MUIDataTable
-            title="CMYK | Lista de Participantes"
-            data={this.state.cmykParticipantsList}
-            columns={columns}
-            options={options}
-          />
-        ) : (
-          <div>
-            <Spinner />
-            <p>Cargando...</p>
-          </div>
-        )}
-      </div>
-    );
-  }
+              <img src={pepeJedi} alt="jedi pepe" width="40px" height="40px" />
+            </>
+          ),
+        }}
+      />
+    </ThemeProvider>
+  ) : (
+    <Card padding={4}>
+      <Flex
+        direction="column"
+        justify="center"
+        align="center"
+        height="fill"
+        gap={3}
+      >
+        <Spinner muted />
+        <Text muted size={1}>
+          Cargando...
+        </Text>
+      </Flex>
+    </Card>
+  );
 }
 
 export default {
diff --git a/tsconfig.json b/tsconfig.json
index 46d4973..2266744 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -12,7 +12,10 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "paths": {
+      "react": ["./node_modules/@types/react"]
+    }
   },
   "include": ["**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]