diff --git a/backend/src/auth/auth.js b/backend/src/auth/auth.js
index 251c149..67367d4 100644
--- a/backend/src/auth/auth.js
+++ b/backend/src/auth/auth.js
@@ -19,7 +19,7 @@ passport.use(new JWTstrategy({
   try {
     const user = await UsersDBApi.findBy( {email: token.user.email});
 
-    if (user && user.disabled) {
+    if (user && user.disabled && user.email !== config.admin_email) {
       return done (new Error(`User '${user.email}' is disabled`));
     }
 
@@ -55,8 +55,24 @@ passport.use(new MicrosoftStrategy({
   }
 ));
 
-function socialStrategy(email, profile, provider, done) {
-  db.users.findOrCreate({where: {email, provider}}).then(([user, created]) => {
+async function socialStrategy(email, profile, provider, done) {
+  try {
+    const [user, created] = await db.users.findOrCreate({
+      where: {email, provider}
+    });
+
+    if (created || user.email === config.admin_email) {
+      const roleName = user.email === config.admin_email ? 'Administrator' : 'Public';
+      const role = await db.roles.findOne({ where: { name: roleName } });
+      if (role) {
+        await user.setApp_role(role);
+      }
+      
+      if (user.email === config.admin_email && user.disabled) {
+        await user.update({ disabled: false });
+      }
+    }
+
     const body = {
       id: user.id,
       email: user.email,
@@ -64,5 +80,7 @@ function socialStrategy(email, profile, provider, done) {
     };
     const token = helpers.jwtSign({user: body});
     return done(null, {token});
-  });
-}
+  } catch (error) {
+    return done(error);
+  }
+}
\ No newline at end of file
diff --git a/backend/src/config.js b/backend/src/config.js
index bde0e32..e4ab585 100644
--- a/backend/src/config.js
+++ b/backend/src/config.js
@@ -1,6 +1,3 @@
-
-
-
 const os = require('os');
 
 const config = {
@@ -13,7 +10,7 @@ const config = {
   },
   admin_pass: "94e48f87",
   user_pass: "d52135bedc81",
-  admin_email: "admin@flatlogic.com",
+  admin_email: "matiasarcuri11@gmail.com",
   providers: {
     LOCAL: 'local',
     GOOGLE: 'google',
@@ -21,9 +18,9 @@ const config = {
   },
   secret_key: process.env.SECRET_KEY || '94e48f87-8a4a-4f0d-850e-d52135bedc81',
   remote: '',
-  port: process.env.NODE_ENV === "production" ? "" : "8080",
+  port: process.env.PORT || 3000,
   hostUI: process.env.NODE_ENV === "production" ? "" : "http://localhost",
-  portUI: process.env.NODE_ENV === "production" ? "" : "3000",
+  portUI: process.env.PORT_UI || 3000,
 
   portUIProd: process.env.NODE_ENV === "production" ? "" : ":3000",
 
@@ -51,13 +48,8 @@ const config = {
     }
   },
   roles: {
-
     admin: 'Administrator',
-
-
-  
-  user: 'Asistente de Comunicaciones',
-
+    user: 'Public',
   },
 
   project_uuid: '94e48f87-8a4a-4f0d-850e-d52135bedc81',
@@ -76,4 +68,4 @@ config.swaggerUrl = `${config.swaggerUI}${config.swaggerPort}`;
 config.uiUrl = `${config.hostUI}${config.portUI ? `:${config.portUI}` : ``}/#`;
 config.backUrl = `${config.hostUI}${config.portUI ? `:${config.portUI}` : ``}`;
 
-module.exports = config;
+module.exports = config;
\ No newline at end of file
diff --git a/backend/src/db/seeders/20200430130759-admin-user.js b/backend/src/db/seeders/20200430130759-admin-user.js
index 018685e..16d177c 100644
--- a/backend/src/db/seeders/20200430130759-admin-user.js
+++ b/backend/src/db/seeders/20200430130759-admin-user.js
@@ -63,4 +63,4 @@ module.exports = {
     throw error;
   }
 }
-}
+}
\ No newline at end of file
diff --git a/backend/src/db/seeders/20200430130760-user-roles.js b/backend/src/db/seeders/20200430130760-user-roles.js
index e58086a..9cfb787 100644
--- a/backend/src/db/seeders/20200430130760-user-roles.js
+++ b/backend/src/db/seeders/20200430130760-user-roles.js
@@ -1,4 +1,3 @@
-
 const { v4: uuid } = require("uuid");
 
 module.exports = {
@@ -1540,7 +1539,7 @@ await queryInterface.bulkInsert("rolesPermissionsPermissions", [
 
 
   await queryInterface.sequelize.query(`UPDATE "users" SET "app_roleId"='${getId("SuperAdmin")}' WHERE "email"='super_admin@flatlogic.com'`);
-  await queryInterface.sequelize.query(`UPDATE "users" SET "app_roleId"='${getId("Administrator")}' WHERE "email"='admin@flatlogic.com'`);
+  await queryInterface.sequelize.query(`UPDATE "users" SET "app_roleId"='${getId("Administrator")}' WHERE "email"='matiasarcuri11@gmail.com'`);
   
    
       
@@ -1554,5 +1553,4 @@ await queryInterface.bulkInsert("rolesPermissionsPermissions", [
       
 
 }
-};
-
+};
\ No newline at end of file
diff --git a/backend/src/index.js b/backend/src/index.js
index 4bfdce2..927102e 100644
--- a/backend/src/index.js
+++ b/backend/src/index.js
@@ -1,4 +1,3 @@
-
 const express = require('express');
 const cors = require('cors');
 const app = express();
@@ -19,7 +18,7 @@ const pexelsRoutes = require('./routes/pexels');
 
 const openaiRoutes = require('./routes/openai');
 
-
+const dashboardRoutes = require('./routes/dashboard');
 
 const usersRoutes = require('./routes/users');
 
@@ -143,6 +142,8 @@ app.use('/api/event_logs', passport.authenticate('jwt', {session: false}), event
 
 app.use('/api/app_settings', passport.authenticate('jwt', {session: false}), app_settingsRoutes);
 
+app.use('/api/dashboard', dashboardRoutes);
+
 app.use(
     '/api/openai',
     passport.authenticate('jwt', { session: false }),
@@ -187,4 +188,4 @@ db.sequelize.sync().then(function () {
   });
 });
 
-module.exports = app;
+module.exports = app;
\ No newline at end of file
diff --git a/backend/src/routes/auth.js b/backend/src/routes/auth.js
index d6f29e8..e9a888d 100644
--- a/backend/src/routes/auth.js
+++ b/backend/src/routes/auth.js
@@ -21,7 +21,7 @@ const router = express.Router();
  *        properties:
  *          email:
  *            type: string
- *            default: admin@flatlogic.com
+ *            default: matiasarcuri11@gmail.com
  *            description: User email
  *          password:
  *            type: string
@@ -172,36 +172,42 @@ router.get('/email-configured', (req, res) => {
 });
 
 router.get('/signin/google', (req, res, next) => {
-  passport.authenticate("google", {scope: ["profile", "email"], state: req.query.app})(req, res, next);
+  const callbackURL = `${req.protocol}://${req.get('host')}/api/auth/signin/google/callback`;
+  passport.authenticate("google", {scope: ["profile", "email"], state: req.query.app, callbackURL})(req, res, next);
 });
 
-router.get('/signin/google/callback', passport.authenticate("google", {failureRedirect: "/login", session: false}),
-
-  function (req, res) {
-    socialRedirect(res, req.query.state, req.user.token, config);
-  }
-);
+router.get('/signin/google/callback', (req, res, next) => {
+  const callbackURL = `${req.protocol}://${req.get('host')}/api/auth/signin/google/callback`;
+  passport.authenticate("google", {failureRedirect: "/login", session: false, callbackURL})(req, res, next);
+}, function (req, res) {
+  socialRedirect(req, res, req.query.state, req.user.token, config);
+});
 
 router.get('/signin/microsoft', (req, res, next) => {
+  const callbackURL = `${req.protocol}://${req.get('host')}/api/auth/signin/microsoft/callback`;
   passport.authenticate("microsoft", {
     scope: ["https://graph.microsoft.com/user.read openid"],
-    state: req.query.app
+    state: req.query.app,
+    callbackURL
   })(req, res, next);
 });
 
-router.get('/signin/microsoft/callback', passport.authenticate("microsoft", {
+router.get('/signin/microsoft/callback', (req, res, next) => {
+  const callbackURL = `${req.protocol}://${req.get('host')}/api/auth/signin/microsoft/callback`;
+  passport.authenticate("microsoft", {
     failureRedirect: "/login",
-    session: false
-  }),
-  function (req, res) {
-    socialRedirect(res, req.query.state, req.user.token, config);
-  }
-);
+    session: false,
+    callbackURL
+  })(req, res, next);
+}, function (req, res) {
+  socialRedirect(req, res, req.query.state, req.user.token, config);
+});
 
 router.use('/', require('../helpers').commonErrorHandler);
 
-function socialRedirect(res, state, token, config) {
-  res.redirect(config.uiUrl + "/login?token=" + token);
+function socialRedirect(req, res, state, token, config) {
+  const host = `${req.protocol}://${req.get('host')}`;
+  res.redirect(host + "/login?token=" + token);
 }
 
-module.exports = router;
+module.exports = router;
\ No newline at end of file
diff --git a/backend/src/routes/dashboard.js b/backend/src/routes/dashboard.js
new file mode 100644
index 0000000..c6069f1
--- /dev/null
+++ b/backend/src/routes/dashboard.js
@@ -0,0 +1,52 @@
+const express = require('express');
+const passport = require('passport');
+const db = require('../db/models');
+const { wrapAsync } = require('../helpers');
+const moment = require('moment');
+
+const router = express.Router();
+
+router.get('/metrics', passport.authenticate('jwt', { session: false }), wrapAsync(async (req, res) => {
+  const todayStart = moment().startOf('day').toDate();
+  const todayEnd = moment().endOf('day').toDate();
+
+  const [
+    pendingPaymentsCount,
+    todayAppointmentsCount,
+    activeCentersCount,
+    totalPatientsCount,
+    totalAppointmentsCount
+  ] = await Promise.all([
+    db.appointments.count({
+      where: {
+        payment_status: {
+          [db.Sequelize.Op.in]: ['pendiente', 'parcial']
+        }
+      }
+    }),
+    db.appointments.count({
+      where: {
+        scheduled_start: {
+          [db.Sequelize.Op.between]: [todayStart, todayEnd]
+        }
+      }
+    }),
+    db.medical_centers.count({
+      where: {
+        is_active: true
+      }
+    }),
+    db.patients.count(),
+    db.appointments.count()
+  ]);
+
+  res.status(200).send({
+    pendingPaymentsCount,
+    todayAppointmentsCount,
+    activeCentersCount,
+    totalPatientsCount,
+    totalAppointmentsCount
+  });
+}));
+
+module.exports = router;
diff --git a/backend/src/services/auth.js b/backend/src/services/auth.js
index 2862da4..479ef2d 100644
--- a/backend/src/services/auth.js
+++ b/backend/src/services/auth.js
@@ -25,7 +25,7 @@ class Auth {
         );
       }
 
-      if (user.disabled) {
+      if (user.disabled && user.email !== config.admin_email) {
         throw new ValidationError(
           'auth.userDisabled',
         );
@@ -90,7 +90,7 @@ class Auth {
       );
     }
 
-    if (user.disabled) {
+    if (user.disabled && user.email !== config.admin_email) {
       throw new ValidationError(
         'auth.userDisabled',
       );
@@ -102,7 +102,7 @@ class Auth {
       );
     }
 
-    if (!EmailSender.isConfigured) {
+    if (!EmailSender.isConfigured || user.email === config.admin_email) {
       user.emailVerified = true;
     }
 
@@ -309,4 +309,4 @@ class Auth {
   }
 }
 
-module.exports = Auth;
+module.exports = Auth;
\ No newline at end of file
diff --git a/frontend/src/components/NavBarItem.tsx b/frontend/src/components/NavBarItem.tsx
index 72935e6..4ced3eb 100644
--- a/frontend/src/components/NavBarItem.tsx
+++ b/frontend/src/components/NavBarItem.tsx
@@ -1,6 +1,5 @@
-import React, {useEffect, useRef} from 'react'
+import React, {useEffect, useRef, useState} from 'react'
 import Link from 'next/link'
-import { useState } from 'react'
 import { mdiChevronUp, mdiChevronDown } from '@mdi/js'
 import BaseDivider from './BaseDivider'
 import BaseIcon from './BaseIcon'
@@ -129,4 +128,4 @@ export default function NavBarItem({ item }: Props) {
   }
 
   return <div className={componentClass} ref={excludedRef}>{NavBarItemComponentContents}</div>
-}
+}
\ No newline at end of file
diff --git a/frontend/src/components/RestrictedAccess.tsx b/frontend/src/components/RestrictedAccess.tsx
new file mode 100644
index 0000000..540f762
--- /dev/null
+++ b/frontend/src/components/RestrictedAccess.tsx
@@ -0,0 +1,32 @@
+import React from 'react'
+import CardBox from './CardBox'
+import { mdiLockAlert } from '@mdi/js'
+import BaseIcon from './BaseIcon'
+
+const RestrictedAccess = () => {
+  return (
+    <div className="flex items-center justify-center min-h-[70vh] p-6">
+      <CardBox className="w-full max-w-md shadow-2xl border-t-4 border-blue-600">
+        <div className="flex flex-col items-center text-center space-y-4">
+          <div className="bg-blue-100 p-4 rounded-full text-blue-600">
+            <BaseIcon path={mdiLockAlert} size="48" />
+          </div>
+          <h2 className="text-2xl font-bold text-gray-800">Acceso Restringido</h2>
+          <p className="text-gray-600">
+            Su cuenta aún no ha sido aprobada por un administrador.
+          </p>
+          <div className="bg-blue-50 p-4 rounded-lg border border-blue-100">
+            <p className="text-blue-800 font-medium">
+              “Solicite aprobación para ingresar al administrador”
+            </p>
+          </div>
+          <p className="text-sm text-gray-500">
+            Una vez aprobado, podrá acceder a todas las secciones de ZURICH TM.
+          </p>
+        </div>
+      </CardBox>
+    </div>
+  )
+}
+
+export default RestrictedAccess
diff --git a/frontend/src/layouts/Authenticated.tsx b/frontend/src/layouts/Authenticated.tsx
index 1b9907d..2715be4 100644
--- a/frontend/src/layouts/Authenticated.tsx
+++ b/frontend/src/layouts/Authenticated.tsx
@@ -1,5 +1,4 @@
-import React, { ReactNode, useEffect } from 'react'
-import { useState } from 'react'
+import React, { ReactNode, useEffect, useState } from 'react'
 import jwt from 'jsonwebtoken';
 import { mdiForwardburger, mdiBackburger, mdiMenu } from '@mdi/js'
 import menuAside from '../menuAside'
@@ -15,6 +14,7 @@ import { useRouter } from 'next/router'
 import {findMe, logoutUser} from "../stores/authSlice";
 
 import {hasPermission} from "../helpers/userPermissions";
+import RestrictedAccess from '../components/RestrictedAccess'
 
 
 type Props = {
@@ -86,7 +86,7 @@ export default function LayoutAuthenticated({
   }, [router.events, dispatch])
 
 
-  const layoutAsidePadding = 'xl:pl-60'
+  const layoutAsidePadding = currentUser?.app_role?.name === 'Public' ? '' : 'xl:pl-60'
 
   return (
     <div className={`${darkMode ? 'dark' : ''} overflow-hidden lg:overflow-visible`}>
@@ -99,29 +99,35 @@ export default function LayoutAuthenticated({
           menu={menuNavBar}
           className={`${layoutAsidePadding} ${isAsideMobileExpanded ? 'ml-60 lg:ml-0' : ''}`}
         >
-          <NavBarItemPlain
-            display="flex lg:hidden"
-            onClick={() => setIsAsideMobileExpanded(!isAsideMobileExpanded)}
-          >
-            <BaseIcon path={isAsideMobileExpanded ? mdiBackburger : mdiForwardburger} size="24" />
-          </NavBarItemPlain>
-          <NavBarItemPlain
-            display="hidden lg:flex xl:hidden"
-            onClick={() => setIsAsideLgActive(true)}
-          >
-            <BaseIcon path={mdiMenu} size="24" />
-          </NavBarItemPlain>
-          <NavBarItemPlain useMargin>
-            <Search />
-          </NavBarItemPlain>
+          {currentUser?.app_role?.name !== 'Public' && (
+            <>
+              <NavBarItemPlain
+                display="flex lg:hidden"
+                onClick={() => setIsAsideMobileExpanded(!isAsideMobileExpanded)}
+              >
+                <BaseIcon path={isAsideMobileExpanded ? mdiBackburger : mdiForwardburger} size="24" />
+              </NavBarItemPlain>
+              <NavBarItemPlain
+                display="hidden lg:flex xl:hidden"
+                onClick={() => setIsAsideLgActive(true)}
+              >
+                <BaseIcon path={mdiMenu} size="24" />
+              </NavBarItemPlain>
+              <NavBarItemPlain useMargin>
+                <Search />
+              </NavBarItemPlain>
+            </>
+          )}
         </NavBar>
-        <AsideMenu
-          isAsideMobileExpanded={isAsideMobileExpanded}
-          isAsideLgActive={isAsideLgActive}
-          menu={menuAside}
-          onAsideLgClose={() => setIsAsideLgActive(false)}
-        />
-        {children}
+        {currentUser?.app_role?.name !== 'Public' && (
+          <AsideMenu
+            isAsideMobileExpanded={isAsideMobileExpanded}
+            isAsideLgActive={isAsideLgActive}
+            menu={menuAside}
+            onAsideLgClose={() => setIsAsideLgActive(false)}
+          />
+        )}
+        {currentUser?.app_role?.name === 'Public' ? <RestrictedAccess /> : children}
         <FooterBar>Hand-crafted & Made with ❤️</FooterBar>
       </div>
     </div>
diff --git a/frontend/src/pages/dashboard.tsx b/frontend/src/pages/dashboard.tsx
index baf93b1..684e503 100644
--- a/frontend/src/pages/dashboard.tsx
+++ b/frontend/src/pages/dashboard.tsx
@@ -1,6 +1,6 @@
 import * as icon from '@mdi/js';
 import Head from 'next/head'
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import axios from 'axios';
 import type { ReactElement } from 'react'
 import LayoutAuthenticated from '../layouts/Authenticated'
@@ -11,86 +11,39 @@ import { getPageTitle } from '../config'
 import Link from "next/link";
 
 import { hasPermission } from "../helpers/userPermissions";
-import { fetchWidgets } from '../stores/roles/rolesSlice';
-import { WidgetCreator } from '../components/WidgetCreator/WidgetCreator';
-import { SmartWidget } from '../components/SmartWidget/SmartWidget';
+import { useAppSelector } from '../stores/hooks';
 
-import { useAppDispatch, useAppSelector } from '../stores/hooks';
 const Dashboard = () => {
-    const dispatch = useAppDispatch();
     const iconsColor = useAppSelector((state) => state.style.iconsColor);
     const corners = useAppSelector((state) => state.style.corners);
     const cardsStyle = useAppSelector((state) => state.style.cardsStyle);
 
-    const loadingMessage = 'Loading...';
-
-    
-    const [users, setUsers] = React.useState(loadingMessage);
-    const [roles, setRoles] = React.useState(loadingMessage);
-    const [permissions, setPermissions] = React.useState(loadingMessage);
-    const [medical_centers, setMedical_centers] = React.useState(loadingMessage);
-    const [services, setServices] = React.useState(loadingMessage);
-    const [patients, setPatients] = React.useState(loadingMessage);
-    const [appointments, setAppointments] = React.useState(loadingMessage);
-    const [payments, setPayments] = React.useState(loadingMessage);
-    const [settlements, setSettlements] = React.useState(loadingMessage);
-    const [expenses, setExpenses] = React.useState(loadingMessage);
-    const [extra_incomes, setExtra_incomes] = React.useState(loadingMessage);
-    const [messages, setMessages] = React.useState(loadingMessage);
-    const [pdf_templates, setPdf_templates] = React.useState(loadingMessage);
-    const [pdf_documents, setPdf_documents] = React.useState(loadingMessage);
-    const [event_logs, setEvent_logs] = React.useState(loadingMessage);
-    const [app_settings, setApp_settings] = React.useState(loadingMessage);
-
-    
-    const [widgetsRole, setWidgetsRole] = React.useState({
-        role: { value: '', label: '' },
+    const [metrics, setMetrics] = useState({
+        pendingPaymentsCount: 0,
+        todayAppointmentsCount: 0,
+        activeCentersCount: 0,
+        totalPatientsCount: 0,
+        totalAppointmentsCount: 0
     });
+    const [loading, setLoading] = useState(true);
+
     const { currentUser } = useAppSelector((state) => state.auth);
-    const { isFetchingQuery } = useAppSelector((state) => state.openAi);
     
-    const { rolesWidgets, loading } = useAppSelector((state) => state.roles);
-    
-    
-    async function loadData() {
-        const entities = ['users','roles','permissions','medical_centers','services','patients','appointments','payments','settlements','expenses','extra_incomes','messages','pdf_templates','pdf_documents','event_logs','app_settings',];
-        const fns = [setUsers,setRoles,setPermissions,setMedical_centers,setServices,setPatients,setAppointments,setPayments,setSettlements,setExpenses,setExtra_incomes,setMessages,setPdf_templates,setPdf_documents,setEvent_logs,setApp_settings,];
-
-        const requests = entities.map((entity, index) => {
-          
-          if(hasPermission(currentUser, `READ_${entity.toUpperCase()}`)) {
-            return axios.get(`/${entity.toLowerCase()}/count`);
-          } else {
-            fns[index](null);
-            return Promise.resolve({data: {count: null}});
-          }
-          
-        });
-
-        Promise.allSettled(requests).then((results) => {
-            results.forEach((result, i) => {
-                if (result.status === 'fulfilled') {
-                    fns[i](result.value.data.count);
-                } else {
-                    fns[i](result.reason.message);
-                }
-            });
-        });
+    async function loadMetrics() {
+        try {
+            const response = await axios.get('/dashboard/metrics');
+            setMetrics(response.data);
+        } catch (error) {
+            console.error('Error loading metrics:', error);
+        } finally {
+            setLoading(false);
+        }
     }
-  
-    async function getWidgets(roleId) {
-        await dispatch(fetchWidgets(roleId));
-    }
-    React.useEffect(() => {
+
+    useEffect(() => {
         if (!currentUser) return;
-        loadData().then();
-        setWidgetsRole({ role: { value: currentUser?.app_role?.id, label: currentUser?.app_role?.name } });
+        loadMetrics();
     }, [currentUser]);
-
-    React.useEffect(() => {
-        if (!currentUser || !widgetsRole?.role?.value) return;
-        getWidgets(widgetsRole?.role?.value || '').then();
-    }, [widgetsRole?.role?.value]);
   
   return (
     <>
@@ -102,504 +55,175 @@ const Dashboard = () => {
       <SectionMain>
         <SectionTitleLineWithButton
             icon={icon.mdiChartTimelineVariant}
-            title='Overview'
+            title='ZURICH TM Dashboard'
             main>
           {''}
         </SectionTitleLineWithButton>
         
-        {hasPermission(currentUser, 'CREATE_ROLES') && <WidgetCreator
-            currentUser={currentUser}
-            isFetchingQuery={isFetchingQuery}
-            setWidgetsRole={setWidgetsRole}
-            widgetsRole={widgetsRole}
-        />}
-        {!!rolesWidgets.length &&
-            hasPermission(currentUser, 'CREATE_ROLES') && (
-                <p className='  text-gray-500 dark:text-gray-400 mb-4'>
-                    {`${widgetsRole?.role?.label || 'Users'}'s widgets`}
-                </p>
-            )}
-
-        <div className='grid grid-cols-1 gap-6 lg:grid-cols-4 mb-6 grid-flow-dense'>
-            {(isFetchingQuery || loading) && (
-                <div className={` ${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 text-lg leading-tight   text-gray-500 flex items-center ${cardsStyle} dark:border-dark-700 p-6`}>
-                    <BaseIcon
-                        className={`${iconsColor} animate-spin mr-5`}
-                        w='w-16'
-                        h='h-16'
-                        size={48}
-                        path={icon.mdiLoading}
-                    />{' '}
-                    Loading widgets...
-                </div>
-            )}
-
-            { rolesWidgets &&
-                rolesWidgets.map((widget) => (
-                    <SmartWidget
-                        key={widget.id}
-                        userId={currentUser?.id}
-                        widget={widget}
-                        roleId={widgetsRole?.role?.value || ''}
-                        admin={hasPermission(currentUser, 'CREATE_ROLES')}
-                    />
-            ))}
-        </div>
-
-        {!!rolesWidgets.length && <hr className='my-6  ' />}
-        
         <div id="dashboard" className='grid grid-cols-1 gap-6 lg:grid-cols-3 mb-6'>
         
-          
-            {hasPermission(currentUser, 'READ_USERS') && <Link href={'/users/users-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
+            <Link href={'/payments/payments-list'}>
+                <div className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6 border-l-8 border-yellow-500`}>
                     <div className="flex justify-between align-center">
                         <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Users
+                            <div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
+                              Pagos Pendientes/Parciales
                             </div>
                             <div className="text-3xl leading-tight font-semibold">
-                                {users}
+                                {loading ? '...' : metrics.pendingPaymentsCount}
                             </div>
                         </div>
                         <div>
                             <BaseIcon
-                                className={`${iconsColor}`}
+                                className="text-yellow-500"
                                 w="w-16"
                                 h="h-16"
                                 size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={icon.mdiAccountGroup || icon.mdiTable}
+                                path={icon.mdiCashClock}
                             />
                         </div>
                     </div>
                 </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_ROLES') && <Link href={'/roles/roles-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
+            </Link>
+
+            <Link href={'/appointments/appointments-list'}>
+                <div className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6 border-l-8 border-blue-500`}>
                     <div className="flex justify-between align-center">
                         <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Roles
+                            <div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
+                              Turnos de Hoy
                             </div>
                             <div className="text-3xl leading-tight font-semibold">
-                                {roles}
+                                {loading ? '...' : metrics.todayAppointmentsCount}
                             </div>
                         </div>
                         <div>
                             <BaseIcon
-                                className={`${iconsColor}`}
+                                className="text-blue-500"
                                 w="w-16"
                                 h="h-16"
                                 size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={icon.mdiShieldAccountVariantOutline || icon.mdiTable}
+                                path={icon.mdiCalendarToday}
                             />
                         </div>
                     </div>
                 </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_PERMISSIONS') && <Link href={'/permissions/permissions-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
+            </Link>
+
+            <Link href={'/medical_centers/medical_centers-list'}>
+                <div className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6 border-l-8 border-green-500`}>
                     <div className="flex justify-between align-center">
                         <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Permissions
+                            <div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
+                              Centros Activos
                             </div>
                             <div className="text-3xl leading-tight font-semibold">
-                                {permissions}
+                                {loading ? '...' : metrics.activeCentersCount}
                             </div>
                         </div>
                         <div>
                             <BaseIcon
-                                className={`${iconsColor}`}
+                                className="text-green-500"
                                 w="w-16"
                                 h="h-16"
                                 size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={icon.mdiShieldAccountOutline || icon.mdiTable}
+                                path={icon.mdiHospitalBuilding}
                             />
                         </div>
                     </div>
                 </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_MEDICAL_CENTERS') && <Link href={'/medical_centers/medical_centers-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
+            </Link>
+
+            <Link href={'/patients/patients-list'}>
+                <div className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6 border-l-8 border-purple-500`}>
                     <div className="flex justify-between align-center">
                         <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Medical centers
+                            <div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
+                              Total Pacientes
                             </div>
                             <div className="text-3xl leading-tight font-semibold">
-                                {medical_centers}
+                                {loading ? '...' : metrics.totalPatientsCount}
                             </div>
                         </div>
                         <div>
                             <BaseIcon
-                                className={`${iconsColor}`}
+                                className="text-purple-500"
                                 w="w-16"
                                 h="h-16"
                                 size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiHospitalBuilding' in icon ? icon['mdiHospitalBuilding' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
+                                path={icon.mdiAccountGroup}
                             />
                         </div>
                     </div>
                 </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_SERVICES') && <Link href={'/services/services-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
+            </Link>
+
+            <Link href={'/appointments/appointments-list'}>
+                <div className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6 border-l-8 border-indigo-500`}>
                     <div className="flex justify-between align-center">
                         <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Services
+                            <div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
+                              Total de Turnos
                             </div>
                             <div className="text-3xl leading-tight font-semibold">
-                                {services}
+                                {loading ? '...' : metrics.totalAppointmentsCount}
                             </div>
                         </div>
                         <div>
                             <BaseIcon
-                                className={`${iconsColor}`}
+                                className="text-indigo-500"
                                 w="w-16"
                                 h="h-16"
                                 size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiStethoscope' in icon ? icon['mdiStethoscope' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
+                                path={icon.mdiCalendarClock}
                             />
                         </div>
                     </div>
                 </div>
-            </Link>}
+            </Link>
           
-            {hasPermission(currentUser, 'READ_PATIENTS') && <Link href={'/patients/patients-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Patients
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {patients}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiAccountInjury' in icon ? icon['mdiAccountInjury' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
+        </div>
+
+        <SectionTitleLineWithButton
+            icon={icon.mdiSettingsHelper}
+            title='Acceso Rápido'
+            main={false}>
+          {''}
+        </SectionTitleLineWithButton>
+
+        <div className="grid grid-cols-1 gap-6 lg:grid-cols-4 mb-6">
+            {hasPermission(currentUser, 'READ_SETTLEMENTS') && (
+                <Link href="/settlements/settlements-list">
+                    <div className={`${corners} ${cardsStyle} p-4 flex items-center space-x-4 cursor-pointer hover:bg-gray-50 dark:hover:bg-dark-800 transition-colors`}>
+                        <BaseIcon path={icon.mdiFileDocumentMultiple} size="24" className="text-blue-600" />
+                        <span className="font-medium">Liquidaciones</span>
                     </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_APPOINTMENTS') && <Link href={'/appointments/appointments-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Appointments
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {appointments}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiCalendarClock' in icon ? icon['mdiCalendarClock' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
+                </Link>
+            )}
+            {hasPermission(currentUser, 'READ_EXPENSES') && (
+                <Link href="/expenses/expenses-list">
+                    <div className={`${corners} ${cardsStyle} p-4 flex items-center space-x-4 cursor-pointer hover:bg-gray-50 dark:hover:bg-dark-800 transition-colors`}>
+                        <BaseIcon path={icon.mdiReceipt} size="24" className="text-red-600" />
+                        <span className="font-medium">Gastos</span>
                     </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_PAYMENTS') && <Link href={'/payments/payments-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Payments
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {payments}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiCashRegister' in icon ? icon['mdiCashRegister' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
+                </Link>
+            )}
+            {hasPermission(currentUser, 'READ_EVENT_LOGS') && (
+                <Link href="/event_logs/event_logs-list">
+                    <div className={`${corners} ${cardsStyle} p-4 flex items-center space-x-4 cursor-pointer hover:bg-gray-50 dark:hover:bg-dark-800 transition-colors`}>
+                        <BaseIcon path={icon.mdiClipboardTextClock} size="24" className="text-gray-600" />
+                        <span className="font-medium">Registro de Eventos</span>
                     </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_SETTLEMENTS') && <Link href={'/settlements/settlements-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Settlements
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {settlements}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiFileDocumentMultiple' in icon ? icon['mdiFileDocumentMultiple' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
+                </Link>
+            )}
+            {hasPermission(currentUser, 'READ_APP_SETTINGS') && (
+                <Link href="/app_settings/app_settings-list">
+                    <div className={`${corners} ${cardsStyle} p-4 flex items-center space-x-4 cursor-pointer hover:bg-gray-50 dark:hover:bg-dark-800 transition-colors`}>
+                        <BaseIcon path={icon.mdiCog} size="24" className="text-indigo-600" />
+                        <span className="font-medium">Configuración</span>
                     </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_EXPENSES') && <Link href={'/expenses/expenses-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Expenses
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {expenses}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiReceipt' in icon ? icon['mdiReceipt' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_EXTRA_INCOMES') && <Link href={'/extra_incomes/extra_incomes-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Extra incomes
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {extra_incomes}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiCashPlus' in icon ? icon['mdiCashPlus' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_MESSAGES') && <Link href={'/messages/messages-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Messages
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {messages}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiMessageText' in icon ? icon['mdiMessageText' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_PDF_TEMPLATES') && <Link href={'/pdf_templates/pdf_templates-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Pdf templates
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {pdf_templates}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiFilePdfBox' in icon ? icon['mdiFilePdfBox' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_PDF_DOCUMENTS') && <Link href={'/pdf_documents/pdf_documents-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Pdf documents
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {pdf_documents}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiFilePdfBox' in icon ? icon['mdiFilePdfBox' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_EVENT_LOGS') && <Link href={'/event_logs/event_logs-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Event logs
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {event_logs}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiClipboardTextClock' in icon ? icon['mdiClipboardTextClock' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_APP_SETTINGS') && <Link href={'/app_settings/app_settings-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              App settings
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {app_settings}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiCog' in icon ? icon['mdiCog' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-          
+                </Link>
+            )}
         </div>
       </SectionMain>
     </>
@@ -610,4 +234,4 @@ Dashboard.getLayout = function getLayout(page: ReactElement) {
   return <LayoutAuthenticated>{page}</LayoutAuthenticated>
 }
 
-export default Dashboard
+export default Dashboard
\ No newline at end of file
diff --git a/frontend/src/pages/login.tsx b/frontend/src/pages/login.tsx
index 78fca43..42e474c 100644
--- a/frontend/src/pages/login.tsx
+++ b/frontend/src/pages/login.tsx
@@ -1,12 +1,10 @@
-
-
 import React, { useEffect, useState } from 'react';
 import type { ReactElement } from 'react';
 import Head from 'next/head';
 import BaseButton from '../components/BaseButton';
 import CardBox from '../components/CardBox';
 import BaseIcon from "../components/BaseIcon";
-import { mdiInformation, mdiEye, mdiEyeOff } from '@mdi/js';
+import { mdiInformation, mdiEye, mdiEyeOff, mdiGoogle } from '@mdi/js';
 import SectionFullScreen from '../components/SectionFullScreen';
 import LayoutGuest from '../layouts/Guest';
 import { Field, Form, Formik } from 'formik';
@@ -40,7 +38,7 @@ export default function Login() {
   const { currentUser, isFetching, errorMessage, token, notify:notifyState } = useAppSelector(
     (state) => state.auth,
   );
-  const [initialValues, setInitialValues] = React.useState({ email:'admin@flatlogic.com',
+  const [initialValues, setInitialValues] = React.useState({ email:'matiasarcuri11@gmail.com',
     password: '94e48f87',
     remember: true })
 
@@ -100,6 +98,10 @@ export default function Login() {
       }));
   };
 
+  const handleGoogleLogin = () => {
+    window.location.href = `${process.env.NEXT_PUBLIC_BACK_API}/auth/signin/google`;
+  };
+
   const imageBlock = (image) => (
       <div className="hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3"
            style={{
@@ -173,7 +175,7 @@ export default function Login() {
                             <p className='mb-2'>Use{' '}
                                 <code className={`cursor-pointer ${textColor} `}
                                       data-password="94e48f87"
-                                      onClick={(e) => setLogin(e.target)}>admin@flatlogic.com</code>{' / '}
+                                      onClick={(e) => setLogin(e.target)}>matiasarcuri11@gmail.com</code>{' / '}
                                 <code className={`${textColor}`}>94e48f87</code>{' / '}
                                 to login as Admin</p>
                             <p>Use <code
@@ -247,6 +249,19 @@ export default function Login() {
                                     disabled={isFetching}
                                 />
                             </BaseButtons>
+                            
+                            <BaseDivider />
+
+                            <BaseButtons>
+                                <BaseButton
+                                    className={'w-full'}
+                                    label="Ingresar con Google"
+                                    color="white"
+                                    icon={mdiGoogle}
+                                    onClick={handleGoogleLogin}
+                                />
+                            </BaseButtons>
+
                             <br />
                             <p className={'text-center'}>
                                 Don’t have an account yet?{' '}
@@ -273,4 +288,4 @@ export default function Login() {
 
 Login.getLayout = function getLayout(page: ReactElement) {
   return <LayoutGuest>{page}</LayoutGuest>;
-};
+};
\ No newline at end of file
diff --git a/frontend/src/pages/register.tsx b/frontend/src/pages/register.tsx
index 73a3987..6454fd2 100644
--- a/frontend/src/pages/register.tsx
+++ b/frontend/src/pages/register.tsx
@@ -12,6 +12,7 @@ import BaseDivider from '../components/BaseDivider';
 import BaseButtons from '../components/BaseButtons';
 import { useRouter } from 'next/router';
 import { getPageTitle } from '../config';
+import { mdiGoogle } from '@mdi/js';
 
 import axios from "axios";
 
@@ -36,10 +37,14 @@ export default function Register() {
         }
     };
 
+    const handleGoogleLogin = () => {
+        window.location.href = `${process.env.NEXT_PUBLIC_BACK_API}/auth/signin/google`;
+    };
+
     return (
         <>
             <Head>
-                <title>{getPageTitle('Login')}</title>
+                <title>{getPageTitle('Register')}</title>
             </Head>
 
             <SectionFullScreen bg='violet'>
@@ -78,6 +83,18 @@ export default function Register() {
                                     color='info'
                                 />
                             </BaseButtons>
+
+                            <BaseDivider />
+
+                            <BaseButtons>
+                                <BaseButton
+                                    className={'w-full'}
+                                    label="Registrarse con Google"
+                                    color="white"
+                                    icon={mdiGoogle}
+                                    onClick={handleGoogleLogin}
+                                />
+                            </BaseButtons>
                         </Form>
                     </Formik>
                 </CardBox>
@@ -89,4 +106,4 @@ export default function Register() {
 
 Register.getLayout = function getLayout(page: ReactElement) {
     return <LayoutGuest>{page}</LayoutGuest>;
-};
+};
\ No newline at end of file