diff --git a/frontend/src/app/components/navbar/navbar.component.html b/frontend/src/app/components/navbar/navbar.component.html
index 2fd652f..6eb0adb 100644
--- a/frontend/src/app/components/navbar/navbar.component.html
+++ b/frontend/src/app/components/navbar/navbar.component.html
@@ -86,7 +86,7 @@
     </div>
 
     <!-- Mobile Menu -->
-    <div id="mobile-menu" class="sm:hidden hidden">
+    <div id="mobile-menu" class="sm:hidden hidden px-4">
         <a routerLink="/" routerLinkActive="text-blue-500 active-route" [routerLinkActiveOptions]="{exact: true}"
             class="block px-4 py-2 text-md font-medium hover:bg-gray-100 font-mountain text-black">Početna</a>
         <a routerLink="/lokacije" routerLinkActive="text-blue-500 active-route"
diff --git a/frontend/src/app/pages/login/login.component.html b/frontend/src/app/pages/login/login.component.html
index 98e2c94..bb46294 100644
--- a/frontend/src/app/pages/login/login.component.html
+++ b/frontend/src/app/pages/login/login.component.html
@@ -1,7 +1,8 @@
 <div class="font-[sans-serif]">
   <div class="min-h-screen flex items-center justify-center py-6 px-4">
     <div class="grid md:grid-cols-2 items-center gap-4 max-w-6xl w-full">
-      <div class="border border-gray-300 rounded-lg p-6 max-w-md w-full shadow-[0_2px_22px_-4px_rgba(93,96,127,0.2)] mx-auto md:mx-0">
+      <div
+        class="border border-gray-300 rounded-lg p-6 max-w-md w-full shadow-[0_2px_22px_-4px_rgba(93,96,127,0.2)] mx-auto md:mx-0">
         <form [formGroup]="loginForm" (ngSubmit)="login()" class="space-y-4">
           <div class="mb-8">
             <h3 class="text-gray-800 text-3xl font-extrabold">Prijavi se</h3>
@@ -10,17 +11,25 @@ <h3 class="text-gray-800 text-3xl font-extrabold">Prijavi se</h3>
           <div>
             <label class="text-gray-800 text-sm mb-2 block">Korisničko ime</label>
             <div class="relative flex items-center">
-              <input formControlName="username" type="text" class="w-full text-sm text-gray-800 border border-gray-300 px-4 py-3 rounded-lg outline-blue-600" placeholder="Enter user name" />
-              <svg xmlns="http://www.w3.org/2000/svg" fill="#bbb" stroke="#bbb" class="w-[18px] h-[18px] absolute right-4" viewBox="0 0 24 24">
+              <input formControlName="username" type="text"
+                class="w-full text-sm text-gray-800 border border-gray-300 px-4 py-3 rounded-lg outline-blue-600"
+                placeholder="Unesite email" />
+              <svg xmlns="http://www.w3.org/2000/svg" fill="#bbb" stroke="#bbb"
+                class="w-[18px] h-[18px] absolute right-4" viewBox="0 0 24 24">
                 <circle cx="10" cy="7" r="6" data-original="#000000"></circle>
-                <path d="M14 15H6a5 5 0 0 0-5 5 3 3 0 0 0 3 3h12a3 3 0 0 0 3-3 5 5 0 0 0-5-5zm8-4h-2.59l.3-.29a1 1 0 0 0-1.42-1.42l-2 2a1 1 0 0 0 0 1.42l2 2a1 1 0 0 0 0-1.42l-.3-.29H22a1 1 0 0 0 0-2z" data-original="#000000"></path>
+                <path
+                  d="M14 15H6a5 5 0 0 0-5 5 3 3 0 0 0 3 3h12a3 3 0 0 0 3-3 5 5 0 0 0-5-5zm8-4h-2.59l.3-.29a1 1 0 0 0-1.42-1.42l-2 2a1 1 0 0 0 0 1.42l2 2a1 1 0 0 0 0-1.42l-.3-.29H22a1 1 0 0 0 0-2z"
+                  data-original="#000000"></path>
               </svg>
             </div>
-            <div *ngIf="loginForm.get('username')?.touched && loginForm.get('username')?.invalid" class="text-red-500 text-sm">
-              <div *ngIf="loginForm.get('username')?.errors?.['username'] && loginForm.get('username')?.touched" class="text-red-600 text-sm mt-1">
+            <div *ngIf="loginForm.get('username')?.touched && loginForm.get('username')?.invalid"
+              class="text-red-500 text-sm">
+              <div *ngIf="loginForm.get('username')?.errors?.['username'] && loginForm.get('username')?.touched"
+                class="text-red-600 text-sm mt-1">
                 Unesite važeću email adresu.
               </div>
-              <div *ngIf="loginForm.get('username')?.errors?.['required'] && loginForm.get('username')?.touched" class="text-red-600 text-sm mt-1">
+              <div *ngIf="loginForm.get('username')?.errors?.['required'] && loginForm.get('username')?.touched"
+                class="text-red-600 text-sm mt-1">
                 Korisničko ime je obavezno.
               </div>
             </div>
@@ -29,21 +38,30 @@ <h3 class="text-gray-800 text-3xl font-extrabold">Prijavi se</h3>
           <div>
             <label class="text-gray-800 text-sm mb-2 block">Lozinka</label>
             <div class="relative flex items-center">
-              <input formControlName="password" type="password" class="w-full text-sm text-gray-800 border border-gray-300 px-4 py-3 rounded-lg outline-blue-600" placeholder="Enter password" />
-              <svg xmlns="http://www.w3.org/2000/svg" fill="#bbb" stroke="#bbb" class="w-[18px] h-[18px] absolute right-4 cursor-pointer" viewBox="0 0 128 128">
-                <path d="M64 104C22.127 104 1.367 67.496.504 65.943a4 4 0 0 1 0-3.887C1.367 60.504 22.127 24 64 24s62.633 36.504 63.496 38.057a4 4 0 0 1 0 3.887C126.633 67.496 105.873 104 64 104zM8.707 63.994C13.465 71.205 32.146 96 64 96c31.955 0 50.553-24.775 55.293-31.994C114.535 56.795 95.854 32 64 32 32.045 32 13.447 56.775 8.707 63.994zM64 88c-13.234 0-24-10.766-24-24s10.766-24 24-24 24 10.766 24 24-10.766 24-24 24zm0-40c-8.822 0-16 7.178-16 16s7.178 16 16 16 16-7.178 16-16-7.178-16-16-16z" data-original="#000000"></path>
+              <input formControlName="password"  [type]="passwordVisible ? 'text' : 'password'"
+                class="w-full text-sm text-gray-800 border border-gray-300 px-4 py-3 rounded-lg outline-blue-600"
+                placeholder="Unesite lozinku" />
+              <svg xmlns="http://www.w3.org/2000/svg" fill="#bbb" stroke="#bbb"
+                (click)="togglePasswordVisibility()"
+                class="w-[18px] h-[18px] absolute right-4 cursor-pointer" viewBox="0 0 128 128">
+                <path
+                  d="M64 104C22.127 104 1.367 67.496.504 65.943a4 4 0 0 1 0-3.887C1.367 60.504 22.127 24 64 24s62.633 36.504 63.496 38.057a4 4 0 0 1 0 3.887C126.633 67.496 105.873 104 64 104zM8.707 63.994C13.465 71.205 32.146 96 64 96c31.955 0 50.553-24.775 55.293-31.994C114.535 56.795 95.854 32 64 32 32.045 32 13.447 56.775 8.707 63.994zM64 88c-13.234 0-24-10.766-24-24s10.766-24 24-24 24 10.766 24 24-10.766 24-24 24zm0-40c-8.822 0-16 7.178-16 16s7.178 16 16 16 16-7.178 16-16-7.178-16-16-16z"
+                  data-original="#000000"></path>
               </svg>
             </div>
-            <div *ngIf="loginForm.get('password')?.touched && loginForm.get('password')?.invalid" class="text-red-500 text-sm">
+            <div *ngIf="loginForm.get('password')?.touched && loginForm.get('password')?.invalid"
+              class="text-red-500 text-sm">
               Lozinka je obavezna i mora imati najmanje 6 znakova.
             </div>
           </div>
-          <div *ngIf="errorMessage" class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
+          <div *ngIf="errorMessage" class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
+            role="alert">
             <span class="block sm:inline">{{ errorMessage }}</span>
           </div>
           <div class="flex flex-wrap items-center justify-between gap-4">
             <div class="flex items-center">
-              <input formControlName="rememberMe" id="remember-me" type="checkbox" class="h-4 w-4 shrink-0 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" />
+              <input formControlName="rememberMe" id="remember-me" type="checkbox"
+                class="h-4 w-4 shrink-0 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" />
               <label for="remember-me" class="ml-3 block text-sm text-gray-800">
                 Zapamti me
               </label>
@@ -57,15 +75,23 @@ <h3 class="text-gray-800 text-3xl font-extrabold">Prijavi se</h3>
           </div>
 
           <div class="!mt-8">
-            <button type="submit" class="w-full shadow-xl py-3 px-4 text-sm tracking-wide rounded-lg text-white bg-blue-600 hover:bg-blue-700 focus:outline-none" [disabled]="loginForm.invalid">
-              Prijavi se
+            <button type="submit"
+              class="w-full shadow-xl py-3 px-4 text-sm tracking-wide rounded-lg text-white bg-blue-600 hover:bg-blue-700 focus:outline-none flex items-center justify-center"
+              [disabled]="loading || loginForm.invalid">
+              <span *ngIf="loading"
+                class="animate-spin inline-block h-4 w-4 border-2 border-current border-t-transparent rounded-full mr-2"
+                role="status" aria-label="loading">
+                <span class="sr-only">Loading...</span>
+              </span>
+              <span>Prijava</span>
             </button>
           </div>
         </form>
       </div>
       <div class="md:h-full">
-        <img src="../../../assets/images/prijava.jpg" class="w-full h-full object-cover rounded" alt="Dining Experience" />
+        <img src="../../../assets/images/prijava.jpg" class="w-full h-full object-cover rounded"
+          alt="Dining Experience" />
       </div>
     </div>
   </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/pages/login/login.component.ts b/frontend/src/app/pages/login/login.component.ts
index 761a678..911045a 100644
--- a/frontend/src/app/pages/login/login.component.ts
+++ b/frontend/src/app/pages/login/login.component.ts
@@ -15,6 +15,8 @@ export class LoginComponent implements OnInit {
   returnUrl: string = '/';
   loginForm: FormGroup;
   errorMessage: string | undefined;
+  loading = false;
+  passwordVisible = false;
 
   constructor(
     private authService: AuthService,
@@ -30,11 +32,13 @@ export class LoginComponent implements OnInit {
   }
 
   login(): void {
+    this.loading = true;
     const { username, password, rememberMe } = this.loginForm.value;
     this.authService
       .signIn(username, password)
       .subscribe({
         next: (success) => {
+          this.loading = false; // Stop loading when login is complete
           if (success) {
             // If login is successful, redirect to the returnUrl
             this.returnUrl =
@@ -46,6 +50,7 @@ export class LoginComponent implements OnInit {
           }
         },
         error: (error: HttpErrorResponse) => {
+          this.loading = false; // Stop loading when login is complete
           // Handle HTTP error responses or other errors
           if (error.status === 404) {
             this.handleError('Korisnik ne postoji.');
@@ -65,6 +70,10 @@ export class LoginComponent implements OnInit {
     this.errorMessage = message;
   }
 
+  togglePasswordVisibility(): void {
+    this.passwordVisible = !this.passwordVisible;
+  }
+
   ngOnInit(): void {
     if (this.authService.isLoggedIn()) {
       this.router.navigate(['/dashboard']);
diff --git a/frontend/src/environments/environment.ts b/frontend/src/environments/environment.ts
index fe36f2f..30ba284 100644
--- a/frontend/src/environments/environment.ts
+++ b/frontend/src/environments/environment.ts
@@ -1,4 +1,4 @@
 export const environment = {
     production: false,
-    apiUrl: 'http://localhost:4000/api'
+    apiUrl: 'http://localhost:5500/api'
 };