update

src/app/+job/feature/job.component.html

 <div class="tw-max-w-3xl tw-mx-auto">
   <div class="tw-flex tw-flex-row tw-flex-wrap tw-mt-6">
-        <nz-card *ngFor="let job of jobList?.rows" class="tw-w-full tw-my-1 hover:tw-scale-105 tw-transition" [nzTitle]="job.title" [nzExtra]="companyLink">
+    <nz-card
+      *ngFor="let job of jobList?.rows"
+      class="tw-w-full tw-my-1"
+      [nzTitle]="job.title"
+      [nzExtra]="companyLink"
+    >
       <ng-template #companyLink>
         <a href="{{ job.company_url }}">{{ job.company_url }}</a>
       </ng-template>
-            <div class="tw-flex tw-flex-cols tw-flex-wrap tw-gap-3">
+      <div class="tw-flex tw-flex-row tw-flex-wrap tw-gap-3">
         <div class="tw-pointer-events-auto tw-flex">
-                    <nz-avatar class="tw-my-auto" nzSrc="{{ job.company_logo }}"></nz-avatar>
+          <nz-avatar
+            class="tw-my-auto"
+            nzSrc="{{ job.company_logo }}"
+          ></nz-avatar>
         </div>
         <div>
-                    <p>Created at: {{ job.created_at | date: 'dd/mm/YYYY'}}</p>
+          <p>Created at: {{ job.created_at | date : "dd/MM/YYYY" }}</p>
           <p>Company name: {{ job.company }}</p>
           <p>Location: {{ job.location }}</p>
         </div>
-                <div>
-                    
+        <div class="tw-flex-grow tw-grid tw-justify-end ">
+            <button class="tw-h-10 tw-px-2 tw-border tw-rounded-lg hover:tw-bg-black hover:tw-text-white tw-transition">
+                Apply
+            </button>
         </div>
       </div>
     </nz-card>
 
-
     <div class="tw-w-full tw-grid tw-justify-items-center tw-my-3">
-            <nz-pagination (nzPageIndexChange)="onPageIndexChange($event)" [nzPageIndex]="pageIndex" [nzPageSize]="pageSize" [nzTotal]="jobList?.itemCount || 0 * 10">
-
+      <nz-pagination
+        (nzPageIndexChange)="onPageIndexChange($event)"
+        [nzPageIndex]="pageIndex"
+        [nzPageSize]="pageSize"
+        [nzTotal]="jobList?.itemCount || 0 * 10"
+      >
       </nz-pagination>
     </div>
   </div>
-
 </div>

src/app/+shell/ui/components/header/feature/header.component.html

@@ -3,7 +3,8 @@
         <img src="https://yt3.googleusercontent.com/y4J_Fs5ksRlxx6_LzT1VKxVqH_T8Vyn_RN_YYgLJhuMzBS5qxTgm7NlEcMkQd3hgCpfWtYcEUg=s900-c-k-c0x00ffffff-no-rj" class="tw-border tw-rounded-full tw-w-10 tw-h-10 tw-mt-3 tw-float-left">
     </a>
   <ul nz-menu nzMode="horizontal">
-    <li nz-menu-item>Home</li>
+    <li nz-menu-item routerLink="/home" routerLinkActive="active">Home</li>
+    <li nz-menu-item routerLink="/jobs" routerLinkActive="active">Jobs</li>
     <ng-container *ngIf="!isLoggedIn()">
       <li nz-menu-item routerLink="/login" routerLinkActive="active">Login</li>
       <li nz-menu-item>Register</li>
@@ -16,7 +17,7 @@
   <ng-container *ngIf="isLoggedIn()">
     <div class="tw-flex-grow">
       <div class="tw-grid tw-justify-items-end">
-        <img nz-dropdown nzTrigger="click" [nzDropdownMenu]="menu" src="https://avatars.githubusercontent.com/u/92918544?v=4" class="tw-border tw-rounded-full tw-w-10 tw-h-10 tw-mt-3 tw-float-left">
+        <img nz-dropdown nzTrigger="click" [nzDropdownMenu]="menu" src="https://avatars.githubusercontent.com/u/92918544?v=4" class="tw-border tw-rounded-full tw-w-10 tw-h-10 tw-mt-3 tw-float-left tw-cursor-pointer">
         <nz-dropdown-menu #menu="nzDropdownMenu">
           <ul nz-menu>
             <li nz-menu-item>Profile</li>