diff --git a/src/components/app-form/AppFormElement.ts b/src/components/app-form/AppFormElement.ts
index e213aa5..ed946f3 100644
--- a/src/components/app-form/AppFormElement.ts
+++ b/src/components/app-form/AppFormElement.ts
@@ -35,7 +35,7 @@ class AppFormElement extends BaseComponentElement {
 	};
 
 	public onSubmit = (e) => {
-		e.preventDefault();
+		//e.preventDefault();
 		if (!this.isValid) {
 			return;
 		}
@@ -135,7 +135,13 @@ class AppFormElement extends BaseComponentElement {
 
 		return html`
 			<div class="app-form">
-				<form app-action="submit:app-form#onSubmit" data-target="app-form.formElement">
+				<form
+					app-action="submit:app-form#onSubmit"
+					data-target="app-form.formElement"
+					autocomplete="on"
+					method="POST"
+					action="javascript:void(0)"
+				>
 					${this.renderInput ? this.customRender() : html`<slot data-target="app-form.innerSlot"></slot>`}
 					${renderError(this.error)}
 					<div class="form-buttons">
diff --git a/src/components/app-loader/AppLoaderElement.ts b/src/components/app-loader/AppLoaderElement.ts
index eb64eca..61a9cc4 100644
--- a/src/components/app-loader/AppLoaderElement.ts
+++ b/src/components/app-loader/AppLoaderElement.ts
@@ -51,7 +51,9 @@ class AppLoaderElement extends BaseComponentElement {
 			}
 			return html``;
 		};
-		return html`${renderLoader(this.finished, this.loading)}`;
+		return html`<div class="loader-wrapper">
+			<div class="loader-relative">${renderLoader(this.finished, this.loading)}</div>
+		</div>`;
 	};
 }
 
diff --git a/src/components/app-pagination/AppPaginationElement.ts b/src/components/app-pagination/AppPaginationElement.ts
index 11aa89e..fd91bdf 100644
--- a/src/components/app-pagination/AppPaginationElement.ts
+++ b/src/components/app-pagination/AppPaginationElement.ts
@@ -142,18 +142,28 @@ class AppPaginationElement extends BaseComponentElement {
 						<span class="--total">(${items?.length}) / ${totalItems} Total Items</span>
 						<div class="--footer">
 							<span class="--pages">Page ${page} of ${pageRange}</span>
-							<button
-								class="btn btn-primary btn-squared ${page <= 1 ? 'disabled' : ''}"
-								app-action="click:app-pagination#pageBack"
-							>
-								Prev
-							</button>
-							<button
-								class="btn btn-primary btn-squared ${page >= pageRange ? 'disabled' : ''}"
-								app-action="click:app-pagination#pageNext"
-							>
-								Next
-							</button>
+							${page <= 1 || this.loader.loading
+								? html` <button
+										class="btn btn-primary btn-squared disabled"
+										disabled
+										app-action="click:app-pagination#pageBack"
+								  >
+										Prev
+								  </button>`
+								: html` <button class="btn btn-primary btn-squared" app-action="click:app-pagination#pageBack">
+										Prev
+								  </button>`}
+							${page >= pageRange || this.loader.loading
+								? html` <button
+										class="btn btn-primary btn-squared disabled"
+										disabled
+										app-action="click:app-pagination#pageNext"
+								  >
+										Next
+								  </button>`
+								: html`<button class="btn btn-primary btn-squared" app-action="click:app-pagination#pageNext">
+										Next
+								  </button>`}
 						</div>
 					</div>
 				`;
@@ -161,9 +171,10 @@ class AppPaginationElement extends BaseComponentElement {
 		};
 
 		return html`<div class="app-pagination">
-			<table class="${this.tableLayout}">
+			<table class="${this.tableLayout} ${this.loader && this.loader.loading ? '--loading' : ''}">
 				${renderItems()} ${renderPagination()}
 			</table>
+			${this.loader && this.loader.loading ? html`<circle-loader></circle-loader>` : html``}
 		</div>`;
 	};
 }
diff --git a/src/components/input-field/InputFieldElement.ts b/src/components/input-field/InputFieldElement.ts
index 60e0cbf..29ccb62 100644
--- a/src/components/input-field/InputFieldElement.ts
+++ b/src/components/input-field/InputFieldElement.ts
@@ -33,7 +33,7 @@ class InputFieldElement extends BaseComponentElement {
 		this.validator = new Validator(this, this.appForm, this.rules);
 		this.randId = `${name}${randomId()}`;
 		this.update();
-		this.validate();
+		//this.validate();
 	};
 
 	setError = (error) => {
@@ -83,11 +83,12 @@ class InputFieldElement extends BaseComponentElement {
 		if (!this.changed && e?.target?.value) {
 			this.changed = true;
 		}
-		this.validate();
+		//this.validate();
 		this.appForm?.inputChange(e);
 	};
 
 	render = (): TemplateResult => {
+		console.log('e');
 		const renderMessage = (label: string) => {
 			if (this.label) {
 				return html`<label for="${this.randId}">${this.label}${this.required ? ' (*)' : ''}</label>`;
@@ -105,19 +106,20 @@ class InputFieldElement extends BaseComponentElement {
 		const renderInput = (type) => {
 			if (this.pattern) {
 				return html` <input
+					name="${this.name}"
+					autocomplete="${this.name}"
 					type="${this.type}"
 					pattern="${this.pattern}"
 					step="0.01"
 					data-target="input-field.inp"
 					id="${this.randId}"
-					app-action="
-                    input:input-field#inputChange
-                    blur:input-field#validateDisplay
-					${this.customAction ? this.customAction : ''}
-                "
+					app-action=" input:input-field#inputChange blur:input-field#validateDisplay
+				${this.customAction ? this.customAction : ''} "
 				/>`;
 			}
 			return html` <input
+				name="${this.name}"
+				autocomplete="${this.name}"
 				type="${this.type}"
 				data-target="input-field.inp"
 				id="${this.randId}"
diff --git a/src/pages/login-page/LoginPageElement.ts b/src/pages/login-page/LoginPageElement.ts
index 76585b0..5d75bf6 100644
--- a/src/pages/login-page/LoginPageElement.ts
+++ b/src/pages/login-page/LoginPageElement.ts
@@ -78,24 +78,31 @@ class LoginPageElement extends BasePageElement {
 		return _return;
 	}
 
+	renderForms = () => {
+		return html` <input-field
+				data-type="email"
+				data-name="email"
+				data-label="E-mail"
+				data-targets="login-page.inputs"
+				data-rules="required|is_email"
+			></input-field>
+			<input-field
+				data-type="password"
+				data-name="password"
+				data-label="Password"
+				data-targets="login-page.inputs"
+				data-rules="required"
+			>
+			</input-field>`;
+	};
+
 	render = (): TemplateResult => {
 		return html`
-			<app-form data-custom="login-page#onSubmit" data-target="login-page.appForm">
-				<input-field
-					data-type="email"
-					data-name="email"
-					data-label="E-mail"
-					data-targets="login-page.inputs"
-					data-rules="required|is_email"
-				></input-field>
-				<input-field
-					data-type="password"
-					data-name="password"
-					data-label="Password"
-					data-targets="login-page.inputs"
-					data-rules="required"
-				>
-				</input-field>
+			<app-form
+				data-custom="login-page#onSubmit"
+				data-target="login-page.appForm"
+				data-render-input="login-page#renderForms"
+			>
 			</app-form>
 			<div>
 				<app-link data-to="/register" data-title="Create new account"></app-link>
diff --git a/src/styles/app-loader/app-loader.scss b/src/styles/app-loader/app-loader.scss
index 2614f49..f6415e2 100644
--- a/src/styles/app-loader/app-loader.scss
+++ b/src/styles/app-loader/app-loader.scss
@@ -1,27 +1,42 @@
-.loader {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 5px;
-    width: 0;
-    background-color: $blue-09;
-    z-index: 2000;
-    &.--loading {
-        animation: animateBar 5s linear;
-    }
+.loader-wrapper {
+	position: absolute;
+	width: 100%;
+	left: 0;
+	right: 0;
+	height: 5px;
+	.loader-relative {
+		position: relative;
+		height: 5px;
+		width: 100%;
+		overflow: hidden;
+		.loader {
+			position: absolute;
+			top: 0;
+			left: -30%;
+			height: 5px;
+			width: 30%;
+			background-color: $blue-09;
+			z-index: 2000;
+			&.--loading {
+				animation: animateBar 2s linear infinite;
+			}
 
-    &.--removing {
-        width: 100%;
-    }
+			&.--removing {
+				width: 100%;
+			}
+		}
+	}
 }
 
 .progress .progress-bar {
 }
 @keyframes animateBar {
-    0% {
-        width: 0;
-    }
-    100% {
-        width: 100%;
-    }
+	0%,
+	100% {
+		left: -30%;
+	}
+
+	100% {
+		left: 100%;
+	}
 }
diff --git a/src/styles/app-pagination/app-pagination.scss b/src/styles/app-pagination/app-pagination.scss
index eab5a90..ff587bf 100644
--- a/src/styles/app-pagination/app-pagination.scss
+++ b/src/styles/app-pagination/app-pagination.scss
@@ -1,5 +1,11 @@
 app-pagination {
 	.app-pagination {
+		position: relative;
+		circle-loader > .circle-loader {
+			position: absolute;
+			inset: 0;
+			margin: auto;
+		}
 		table.transactions-table {
 			margin: 0 0 3em 0;
 			padding: 0;
@@ -8,6 +14,14 @@ app-pagination {
 			border: 1px solid $gray-09;
 			border-radius: 4px;
 			display: block;
+			&.--loading {
+				min-height: 80px;
+				tr {
+					td {
+						visibility: hidden;
+					}
+				}
+			}
 			tr {
 				background-color: $gray-07;
 				padding: 4px 12px;