diff --git a/package-lock.json b/package-lock.json
index 3ef32f6..19e2608 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,18 +1,20 @@
 {
   "name": "@indec/react-commons",
-  "version": "7.0.0",
+  "version": "7.0.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@indec/react-commons",
-      "version": "7.0.0",
+      "version": "7.0.3",
       "license": "MIT",
       "dependencies": {
         "autoprefixer": "^10.4.21",
         "clsx": "^2.1.1",
+        "formik": "^2.4.6",
         "react": "^19.1.0",
-        "react-dom": "^19.1.0"
+        "react-dom": "^19.1.0",
+        "yup": "^1.6.1"
       },
       "devDependencies": {
         "@babel/cli": "^7.27.0",
@@ -5508,6 +5510,18 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/hoist-non-react-statics": {
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.7.tgz",
+      "integrity": "sha512-PQTyIulDkIDro8P+IHbKCsw7U2xxBYflVzW/FgWdCAePD9xGSidgA76/GeJ6lBKoblyhf9pBY763gbrN+1dI8g==",
+      "license": "MIT",
+      "dependencies": {
+        "hoist-non-react-statics": "^3.3.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/istanbul-lib-coverage": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz",
@@ -5575,7 +5589,6 @@
       "version": "19.1.8",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.8.tgz",
       "integrity": "sha512-AwAfQ2Wa5bCx9WP8nZL2uMZWod7J7/JSplxbTmBQ5ms6QpqNYm672H0Vu9ZVKVngQ+ii4R/byguVEUZQyeg44g==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -7866,7 +7879,6 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true,
       "license": "MIT",
       "peer": true
     },
@@ -9250,6 +9262,40 @@
         "node": ">= 6"
       }
     },
+    "node_modules/formik": {
+      "version": "2.4.6",
+      "resolved": "https://registry.npmjs.org/formik/-/formik-2.4.6.tgz",
+      "integrity": "sha512-A+2EI7U7aG296q2TLGvNapDNTZp1khVt5Vk0Q/fyfSROss0V/V6+txt2aJnwEos44IxTCW/LYAi/zgWzlevj+g==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://opencollective.com/formik"
+        }
+      ],
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@types/hoist-non-react-statics": "^3.3.1",
+        "deepmerge": "^2.1.1",
+        "hoist-non-react-statics": "^3.3.0",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "react-fast-compare": "^2.0.1",
+        "tiny-warning": "^1.0.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/formik/node_modules/deepmerge": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
+      "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/fraction.js": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
@@ -9669,6 +9715,21 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/hoist-non-react-statics/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT"
+    },
     "node_modules/html-encoding-sniffer": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
@@ -12645,7 +12706,12 @@
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
       "license": "MIT"
     },
     "node_modules/lodash.camelcase": {
@@ -13952,6 +14018,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/property-expr": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.6.tgz",
+      "integrity": "sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA==",
+      "license": "MIT"
+    },
     "node_modules/psl": {
       "version": "1.15.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.15.0.tgz",
@@ -14113,6 +14185,12 @@
         "react": "^19.1.1"
       }
     },
+    "node_modules/react-fast-compare": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
+      "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==",
+      "license": "MIT"
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -15521,6 +15599,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/tiny-case": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz",
+      "integrity": "sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q==",
+      "license": "MIT"
+    },
     "node_modules/tiny-invariant": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
@@ -15528,6 +15612,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==",
+      "license": "MIT"
+    },
     "node_modules/tinybench": {
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
@@ -15609,6 +15699,12 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/toposort": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
+      "integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==",
+      "license": "MIT"
+    },
     "node_modules/totalist": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
@@ -15710,7 +15806,6 @@
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "dev": true,
       "license": "0BSD"
     },
     "node_modules/tween-functions": {
@@ -15747,7 +15842,6 @@
       "version": "2.19.0",
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
       "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
-      "dev": true,
       "license": "(MIT OR CC0-1.0)",
       "engines": {
         "node": ">=12.20"
@@ -16833,6 +16927,18 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/yup": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/yup/-/yup-1.6.1.tgz",
+      "integrity": "sha512-JED8pB50qbA4FOkDol0bYF/p60qSEDQqBD0/qeIrUCG1KbPBIQ776fCUNb9ldbPcSTxA69g/47XTo4TqWiuXOA==",
+      "license": "MIT",
+      "dependencies": {
+        "property-expr": "^2.0.5",
+        "tiny-case": "^1.0.3",
+        "toposort": "^2.0.2",
+        "type-fest": "^2.19.0"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 99066b7..0a99c72 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@indec/react-commons",
-  "version": "7.0.3",
+  "version": "7.1.0",
   "description": "Common reactjs components for apps",
   "private": false,
   "main": "index.js",
@@ -30,6 +30,7 @@
     "hooks",
     "utils",
     "assets",
+    "schemas",
     "index.js",
     "LICENSE.md",
     "README.md",
@@ -41,8 +42,10 @@
   "dependencies": {
     "autoprefixer": "^10.4.21",
     "clsx": "^2.1.1",
+    "formik": "^2.4.6",
     "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "react-dom": "^19.1.0",
+    "yup": "^1.6.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.27.0",
diff --git a/src/__tests__/components/Login.test.js b/src/__tests__/components/Login.test.js
new file mode 100644
index 0000000..e3f0bd0
--- /dev/null
+++ b/src/__tests__/components/Login.test.js
@@ -0,0 +1,23 @@
+import {getByText} from '@testing-library/react';
+
+import Login from '../../components/Login/index.jsx';
+
+describe('<Login>', () => {
+  let props;
+  const getComponent = () => render(Login, props);
+  beforeEach(() => {
+    props = {
+      title: 'My Application'
+    }
+  })
+
+  it('should display `My Application`', () => {
+    const {container} = getComponent();
+    expect(getByText(container, 'My Application')).toBeInTheDocument();
+  });
+
+  it('should display `Login`', () => {
+    const {container} = getComponent();
+    expect(getByText(container, 'Login')).toBeInTheDocument();
+  });
+});
diff --git a/src/components/Field.jsx b/src/components/Field.jsx
index ab1aa83..294105b 100644
--- a/src/components/Field.jsx
+++ b/src/components/Field.jsx
@@ -14,6 +14,7 @@ export default function Field({name, label, error, type = 'text', onChange, onBl
       onBlur(event);
     }
   };
+
   return (
     <div className="w-full">
       <label htmlFor={name} className="block text-[17px] text-black text-xl font-medium">
@@ -24,13 +25,13 @@ export default function Field({name, label, error, type = 'text', onChange, onBl
           id={name}
           name={name}
           aria-label={label}
+          {...rest}
           className={`w-full px-4 py-2 border-2 border-gray-400 rounded-lg bg-white focus:outline-none focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200 ${
             error ? 'border-error focus:ring-error' : 'border-gray-300 focus:ring-primary'
           } ${disabled ? 'bg-gray-100 cursor-not-allowed' : ''} ${tooltip ? 'pr-10' : ''}`}
           type={type}
           onChange={onChange}
           disabled={disabled}
-          {...rest}
           onBlur={handleBlur}
         />
         {tooltip && (
diff --git a/src/components/Login/LoginForm.jsx b/src/components/Login/LoginForm.jsx
new file mode 100644
index 0000000..b5d33cf
--- /dev/null
+++ b/src/components/Login/LoginForm.jsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import {Field, Formik, Form} from 'formik';
+
+import Button from '../Button.jsx';
+import ErrorMessage from '../ErrorMessage.jsx';
+import TextField from '../Field.jsx';
+import loginSchema from '../../schemas/login';
+
+export default function LoginForm({onLogin, isLoging, error}) {
+  return (
+    <Formik initialValues={{username: '', password: ''}} validationSchema={loginSchema} onSubmit={onLogin}>
+        <Form>
+          <div className="flex flex-col gap-6">
+            <Field name="username">
+              {({field, meta}) => (
+                <TextField 
+                  {...field}
+                  label="Usuario *" 
+                  placeholder="usuario@indec.gob.ar"
+                  error={meta.touched && meta.error ? meta.error : null}
+                />
+              )}
+            </Field>
+            <Field name="password">
+              {({field, meta}) => (
+                <TextField 
+                  {...field}
+                  type="password"
+                  label="Contraseña *" 
+                  placeholder="123456"
+                  error={meta.touched && meta.error ? meta.error : null}
+                />
+              )}
+            </Field>
+          <Button
+            type="submit"
+            data-testid="login-button"
+            disabled={isLoging}
+            label="Ingresar"
+          />
+            {error && (
+              <ErrorMessage error={error.status === 401 ? 'Credenciales incorrectas.' : 'Ha ocurrido un error.'}/>
+            )}
+          </div>
+        </Form>
+    </Formik>
+  );
+}
diff --git a/src/components/Login/index.jsx b/src/components/Login/index.jsx
new file mode 100644
index 0000000..5878b8a
--- /dev/null
+++ b/src/components/Login/index.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+import LoginForm from './LoginForm.jsx';
+
+export default function Login({title, onLogin, isLoging, error}) {
+  return (
+    <>
+      <div className="grid grid-cols-1 sm:grid-cols-2 h-screen">
+        <div
+          className="flex flex-col justify-center items-center text-white p-8"
+          style={{
+            backgroundColor: '#0093E9',
+            background: 'linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)'
+          }}
+        >
+          <h1 className="text-5xl font-bold text-center uppercase">{title}</h1>
+        </div>
+        <div className="flex flex-col gap-3 justify-center p-3">
+          <h2 className="font-bold text-2xl">Login</h2>
+          <LoginForm isLoging={isLoging} onLogin={onLogin} error={error}/>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/src/components/index.js b/src/components/index.js
index 92a0fb9..53b8e2f 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -4,6 +4,7 @@ export {default as Field} from './Field.jsx';
 export {default as Footer} from './Footer.jsx';
 export {default as Header} from './Header/index.jsx';
 export {default as Loading} from './Loading.jsx';
+export {default as Login} from './Login/index.jsx';
 export {default as Modal} from './Modal/index.jsx';
 export {default as Pagination} from './Pagination.jsx';
 export {default as Select} from './Select.jsx';
diff --git a/src/schemas/login.js b/src/schemas/login.js
new file mode 100644
index 0000000..1c24fa8
--- /dev/null
+++ b/src/schemas/login.js
@@ -0,0 +1,6 @@
+import * as yup from 'yup';
+
+export default yup.object({
+  username: yup.string().required('Debe ingresar su nombre de usuario.'),
+  password: yup.string().required('Debe ingresar su contraseña.')
+});
diff --git a/src/stories/Login.stories.js b/src/stories/Login.stories.js
new file mode 100644
index 0000000..b760b98
--- /dev/null
+++ b/src/stories/Login.stories.js
@@ -0,0 +1,41 @@
+import {fn} from '@storybook/test';
+
+import Login from '../components/Login';
+import '../components/output.css';
+
+export default {
+  title: 'Login',
+  component: Login,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen'
+  },
+  argTypes: {
+    title: {
+      control: 'text',
+      description: 'Title displayed on the left side of the login screen'
+    }
+  },
+  args: {
+    onLogin: fn(),
+    title: 'Sistema INDEC'
+  }
+};
+
+export const Default = {};
+
+export const LoggingIn = {
+  args: {
+    isLoging: true
+  }
+};
+
+export const WithError = {
+  args: {
+    title: 'Sistema INDEC',
+    error: {
+      status: 401,
+      message: 'Unauthorized'
+    }
+  }
+};
diff --git a/src/stories/Pagination.stories.js b/src/stories/Pagination.stories.js
index 03e40aa..36f6253 100644
--- a/src/stories/Pagination.stories.js
+++ b/src/stories/Pagination.stories.js
@@ -1,6 +1,6 @@
 import {fn} from '@storybook/test';
 
-import {Pagination} from '../components/Pagination.jsx';
+import Pagination from '../components/Pagination.jsx';
 import '../components/output.css';
 
 export default {