diff --git a/client/src/app/app-routing.module.ts b/client/src/app/app-routing.module.ts
index 2683a7f..672fa44 100644
--- a/client/src/app/app-routing.module.ts
+++ b/client/src/app/app-routing.module.ts
@@ -72,7 +72,7 @@ const loginGuard: CanActivateFn = (
       // redirect to redirectUrl query param
       console.log(route.queryParams['redirectUrl']);
       return router.createUrlTree([
-        router.parseUrl(route.queryParams['redirectUrl'] ?? '/recipes'),
+        router.parseUrl(route.queryParams['redirectUrl'] ?? 'select-country'),
       ]);
       // return false;
     })
@@ -94,15 +94,15 @@ const routes: Routes = [
       ),
   },
   {
-    path: '',
+    path: 'select-country',
+    loadComponent: () => import('./core/department/select-country.component').then(m => m.SelectCountryComponent),
+    canActivate: [authGuard]
+  },
+  {
+    path: ':department',
     loadComponent: () =>
       import('./core/layout/layout.component').then((m) => m.LayoutComponent),
     children: [
-      {
-        path: '',
-        pathMatch: 'full',
-        redirectTo: 'recipes',
-      },
       {
         path: 'recipes',
         loadComponent: () =>
@@ -126,20 +126,25 @@ const routes: Routes = [
       //       (m) => m.ChangelogComponent
       //     ),
       // },
-      {
-        path: 'unauthorized',
-        loadComponent: () => import('./core/auth/unauthorized.component').then((m) => m.UnauthorizedComponent)
-      },
-      {
-        path: 'notfound',
-        loadComponent: () => import('./core/notfound.component').then((m) => m.NotfoundComponent)
-      },
-      {
-        path: '**',
-        redirectTo: 'notfound',
-      },
     ],
   },
+  {
+    path: 'unauthorized',
+    loadComponent: () => import('./core/auth/unauthorized.component').then((m) => m.UnauthorizedComponent)
+  },
+  {
+    path: 'notfound',
+    loadComponent: () => import('./core/notfound.component').then((m) => m.NotfoundComponent)
+  },
+  {
+    path: '',
+    pathMatch: 'full',
+    redirectTo: 'select-country'
+  },
+  {
+    path: '**',
+    redirectTo: 'notfound',
+  },
 ];
 
 @NgModule({
diff --git a/client/src/app/core/department/select-country.component.ts b/client/src/app/core/department/select-country.component.ts
new file mode 100644
index 0000000..05ff938
--- /dev/null
+++ b/client/src/app/core/department/select-country.component.ts
@@ -0,0 +1,44 @@
+import { Component } from '@angular/core';
+import {CommonModule, NgOptimizedImage} from '@angular/common';
+
+@Component({
+  standalone: true,
+  imports: [CommonModule, NgOptimizedImage],
+  template: `
+      <div class="flex flex-row sm:flex-col gap-5 items-center justify-center h-screen bg-[#EAE6E1]">
+      <h1 class="font-bold text-amber-950 text-3xl hidden sm:block">Select Product</h1>
+          <div class="flex flex-col sm:flex-row gap-10 items-center justify-center rounded border-dashed border-4 border-amber-800 p-5 ml-5 mr-5">
+              <button *ngFor="let country of countries"
+                      class="transition-transform duration-300 ease-in-out transform shadow-lg hover:scale-110 hover:shadow-xl">
+                  <img ngSrc="{{country.img}}" alt="{{country.country}}" width="200" height="225" priority="true"/>
+              </button>
+          </div>
+          <div class="flex flex-col sm:flex-row gap-10 items-center justify-center rounded border-dashed border-4 border-amber-800 p-5 ml-5 mr-5">
+              <button *ngFor="let alpha of alphas"
+                      class="transition-transform duration-300 ease-in-out transform hover:scale-110 hover:shadow-xl">
+                  <img ngSrc="{{alpha.img}}" alt="{{alpha.alphaName}}" width="200" height="225" priority="true"/>
+              </button>
+          </div>
+      </div>
+  `
+})
+export class SelectCountryComponent {
+  countries: {country: string; img: string}[] = [{
+    country: 'Thai',
+    img: 'assets/departments/tha_plate.png'
+  }, {
+    country: 'Malaysia',
+    img: 'assets/departments/mys_plate.png'
+  }, {
+    country: 'Australia',
+    img: 'assets/departments/aus_plate.png'
+  }]
+
+  alphas: {alphaName: string; img: string}[] = [
+    {
+      alphaName: 'ALPHA-3',
+      img: 'assets/departments/alpha-3.png'
+    }
+  ]
+
+}
diff --git a/client/src/assets/departments/alpha-3.png b/client/src/assets/departments/alpha-3.png
new file mode 100644
index 0000000..b493c1c
Binary files /dev/null and b/client/src/assets/departments/alpha-3.png differ
diff --git a/client/src/assets/departments/aus_plate.png b/client/src/assets/departments/aus_plate.png
new file mode 100644
index 0000000..7d906ca
Binary files /dev/null and b/client/src/assets/departments/aus_plate.png differ
diff --git a/client/src/assets/departments/mys_plate.png b/client/src/assets/departments/mys_plate.png
new file mode 100644
index 0000000..3bb130c
Binary files /dev/null and b/client/src/assets/departments/mys_plate.png differ
diff --git a/client/src/assets/departments/tha_plate.png b/client/src/assets/departments/tha_plate.png
new file mode 100644
index 0000000..ad42242
Binary files /dev/null and b/client/src/assets/departments/tha_plate.png differ