diff --git a/client/src/app/core/auth/userPermissions.ts b/client/src/app/core/auth/userPermissions.ts
index 962df6f..65d1169 100644
--- a/client/src/app/core/auth/userPermissions.ts
+++ b/client/src/app/core/auth/userPermissions.ts
@@ -3,9 +3,12 @@ export enum UserPermissions {
   THAI_PERMISSION = 1 << 0,
   MALAY_PERMISSION = 1 << 1,
   AUS_PERMISSION = 1 << 2,
+  ALPHA3_PERMISSION = 1 << 3,
 
+  VIEWER = 1 << 4,
+  EDITOR = 1 << 7,
 
-  SUPER_ADMIN_PERMISSION = THAI_PERMISSION | MALAY_PERMISSION | AUS_PERMISSION
+  SUPER_ADMIN_PERMISSION = THAI_PERMISSION | MALAY_PERMISSION | AUS_PERMISSION | ALPHA3_PERMISSION | (EDITOR | VIEWER)
 }
 
 export function getPermissions(perms: number) : UserPermissions[] {
diff --git a/client/src/app/core/callback/callback.component.ts b/client/src/app/core/callback/callback.component.ts
index 4958b5a..8f6986d 100644
--- a/client/src/app/core/callback/callback.component.ts
+++ b/client/src/app/core/callback/callback.component.ts
@@ -24,7 +24,7 @@ export class CallbackComponent implements OnInit {
           email: params['email'],
           name: params['name'],
           picture: params['picture'],
-          permissions: getPermissions(params['permissions'])
+          permissions: getPermissions(params['permissions']),
         });
       }
 
diff --git a/client/src/app/core/department/department.component.ts b/client/src/app/core/department/department.component.ts
index b730115..399bbde 100644
--- a/client/src/app/core/department/department.component.ts
+++ b/client/src/app/core/department/department.component.ts
@@ -1,6 +1,8 @@
 import { Component } from '@angular/core';
 import { CommonModule, NgOptimizedImage } from '@angular/common';
 import { Router } from '@angular/router';
+import { UserService } from '../services/user.service';
+import { UserPermissions } from '../auth/userPermissions';
 
 @Component({
   standalone: true,
@@ -26,6 +28,7 @@ import { Router } from '@angular/router';
             height="225"
             priority="true"
             (click)="onClick(country.id)"
+            *ngIf="acccessibleCountries.includes(country.id)"
           />
         </button>
       </div>
@@ -43,13 +46,18 @@ import { Router } from '@angular/router';
             height="225"
             priority="true"
             (click)="onClick(alpha.id)"
+            *ngIf="acccessibleCountries.includes(alpha.id)"
           />
         </button>
       </div>
     </div>
   `,
 })
+
+
 export class DepartmentComponent {
+  acccessibleCountries:string[] = [];
+
   countries: { id: string; img: string }[] = [
     {
       id: 'tha',
@@ -72,7 +80,32 @@ export class DepartmentComponent {
     },
   ];
 
-  constructor(private router: Router) {}
+  constructor(
+    private router: Router,
+    private _userService: UserService
+  ) {
+    let perms = _userService.getCurrentUser()!.permissions;
+    console.log("GainAccesses",perms)
+
+    for (let perm of perms) {
+      switch (perm) {
+        case UserPermissions.THAI_PERMISSION:
+          this.acccessibleCountries.push('tha');
+          break;
+        case UserPermissions.MALAY_PERMISSION:
+          this.acccessibleCountries.push('mys');
+          break;
+        case UserPermissions.AUS_PERMISSION:
+          this.acccessibleCountries.push('aus');
+          break;
+        case UserPermissions.ALPHA3_PERMISSION:
+          this.acccessibleCountries.push('alpha-3');
+          break;
+        default:
+          break;
+      }
+    }
+  }
 
   onClick(id: string) {
     void this.router.navigate([`/${id}/recipes`]);
diff --git a/client/src/app/core/layout/layout.component.html b/client/src/app/core/layout/layout.component.html
index 1bfd9dd..90fa845 100644
--- a/client/src/app/core/layout/layout.component.html
+++ b/client/src/app/core/layout/layout.component.html
@@ -24,7 +24,7 @@
               ></path>
             </svg>
           </button>
-          <a routerLink="/recipes" class="flex ml-14 max-sm:hidden">
+          <a routerLink="/{{ current_department }}/recipes" class="flex ml-14 max-sm:hidden">
             <img
               src="assets/logo.svg"
               class="h-10 md:h-20 px-4"
diff --git a/client/src/app/core/layout/layout.component.ts b/client/src/app/core/layout/layout.component.ts
index d056d90..edabdf0 100644
--- a/client/src/app/core/layout/layout.component.ts
+++ b/client/src/app/core/layout/layout.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { ActivatedRoute, RouterModule } from '@angular/router';
 import { DatePipe, NgFor, NgIf } from '@angular/common';
 import { GoogleButtonComponent } from 'src/app/shared/googleButton/googleButton.component';
 import { UserService } from '../services/user.service';
@@ -19,16 +19,19 @@ interface MenuItem {
   imports: [RouterModule, NgFor, NgIf, GoogleButtonComponent, DatePipe],
 })
 export class LayoutComponent implements OnInit, OnDestroy {
+
+  current_department = this._router.snapshot.paramMap.get('department')!;
+
   menuItems: MenuItem[] = [
     {
       name: 'Recipe',
       icon_url: 'assets/icons/recipes.svg',
-      link: '/recipes',
+      link: '/'+this.current_department+'/recipes',
     },
     {
       name: 'Log',
       icon_url: 'assets/icons/logs.svg',
-      link: '/log',
+      link: '/'+this.current_department+'/log',
     },
   ];
   date = new Date();
@@ -37,7 +40,12 @@ export class LayoutComponent implements OnInit, OnDestroy {
   user: User | null = null;
   exit$ = new Subject<void>();
 
-  constructor(private _userService: UserService) {}
+
+
+  constructor(
+    private _userService: UserService,
+    private _router: ActivatedRoute
+  ) {}
 
   ngOnInit(): void {
     this._userService.currentUser
diff --git a/client/src/app/features/recipes/recipe-details/recipe-list/recipe-list.component.ts b/client/src/app/features/recipes/recipe-details/recipe-list/recipe-list.component.ts
index 0c0cbea..538055c 100644
--- a/client/src/app/features/recipes/recipe-details/recipe-list/recipe-list.component.ts
+++ b/client/src/app/features/recipes/recipe-details/recipe-list/recipe-list.component.ts
@@ -9,11 +9,13 @@ import {
 } from '@angular/forms';
 import { forEach, isEqual, sortBy } from 'lodash';
 import { first } from 'rxjs';
+import { UserPermissions } from 'src/app/core/auth/userPermissions';
 import {
   RecipeDetail,
   RecipeDetailMat,
 } from 'src/app/core/models/recipe.model';
 import { RecipeService } from 'src/app/core/services/recipe.service';
+import { UserService } from 'src/app/core/services/user.service';
 import { Action, ActionRecord } from 'src/app/shared/actionRecord/actionRecord';
 
 @Component({
@@ -30,7 +32,8 @@ export class RecipeListComponent implements OnInit {
 
   constructor(
     private _recipeService: RecipeService,
-    private _formBuilder: FormBuilder
+    private _formBuilder: FormBuilder,
+    private _userService: UserService
   ) {}
 
   recipeListForm = this._formBuilder.group(
@@ -51,17 +54,17 @@ export class RecipeListComponent implements OnInit {
         result.forEach((recipeDetailMat: RecipeDetailMat) => {
           this.recipeListData.push(
             this._formBuilder.group({
-              isUse: recipeDetailMat.isUse,
-              materialPathId: recipeDetailMat.materialPathId,
+              isUse: [{ value: recipeDetailMat.isUse, disabled: !this.isEditable()}],
+              materialPathId: [{value:recipeDetailMat.materialPathId, disabled: !this.isEditable()}],
               name: [{ value: recipeDetailMat.name, disabled: true }],
-              mixOrder: recipeDetailMat.mixOrder,
-              stirTime: recipeDetailMat.stirTime,
-              powderGram: recipeDetailMat.powderGram,
-              powderTime: recipeDetailMat.powderTime,
-              syrupGram: recipeDetailMat.syrupGram,
-              syrupTime: recipeDetailMat.syrupTime,
-              waterCold: recipeDetailMat.waterCold,
-              waterYield: recipeDetailMat.waterYield,
+              mixOrder: [{ value:recipeDetailMat.mixOrder, disabled: !this.isEditable()}],
+              stirTime: [{value:recipeDetailMat.stirTime, disabled: !this.isEditable()}],
+              powderGram: [{value:recipeDetailMat.powderGram, disabled: !this.isEditable()}],
+              powderTime: [{value:recipeDetailMat.powderTime, disabled: !this.isEditable()}],
+              syrupGram: [{value:recipeDetailMat.syrupGram, disabled: !this.isEditable()}],
+              syrupTime: [{value: recipeDetailMat.syrupTime, disabled: !this.isEditable()}],
+              waterCold: [{value:recipeDetailMat.waterCold, disabled: !this.isEditable()}],
+              waterYield: [{value:recipeDetailMat.waterYield, disabled: !this.isEditable()}],
             })
           );
         });
@@ -99,4 +102,8 @@ export class RecipeListComponent implements OnInit {
   get recipeListData(): FormArray {
     return this.recipeListForm.get('recipeListData') as FormArray;
   }
+
+  isEditable(){
+    return this._userService.getCurrentUser()!.permissions.includes(UserPermissions.EDITOR);
+  }
 }
diff --git a/server/data/database.db b/server/data/database.db
index b09d9a7..c746df4 100644
Binary files a/server/data/database.db and b/server/data/database.db differ
diff --git a/server/enums/permissions/permission.go b/server/enums/permissions/permission.go
index cfc0c51..69debcf 100644
--- a/server/enums/permissions/permission.go
+++ b/server/enums/permissions/permission.go
@@ -6,10 +6,12 @@ const (
 	ThaiPermission Permission = 1 << iota
 	MalayPermission
 	AusPermission
+	Alpha3Permission
 	// NOTE: Add more permission here
-
+	Viewer = 1 << 4
+	Editor = Viewer << 3
 	// SuperAdmin have max uint
-	SuperAdmin = ThaiPermission | MalayPermission | AusPermission
+	SuperAdmin = ThaiPermission | MalayPermission | AusPermission | Alpha3Permission | (Editor | Viewer)
 )
 
 func (userPermissions Permission) IsHavePermission(requiredPermissions Permission) bool {