diff --git a/ng-ttc-frontend/src/app/component/main-landing/main-landing.component.html b/ng-ttc-frontend/src/app/component/main-landing/main-landing.component.html
index c1d6be5..f935e06 100644
--- a/ng-ttc-frontend/src/app/component/main-landing/main-landing.component.html
+++ b/ng-ttc-frontend/src/app/component/main-landing/main-landing.component.html
@@ -1,4 +1,4 @@
-<div class="min-h-screen bg-gray-100 p-4">
+<div class="min-h-screen bg-gray-100 p-4 overflow-y-auto">
     <header class="flex justify-between items-center py-4 px-2">
         <h1 class="text-xl font-semibold text-gray-800">หน้าหลัก ( landing )</h1>
         <div class="flex space-x-4 text-2xl text-gray-600">
diff --git a/ng-ttc-frontend/src/app/component/main-project/main-project.html b/ng-ttc-frontend/src/app/component/main-project/main-project.html
index 12ed964..0b22c58 100644
--- a/ng-ttc-frontend/src/app/component/main-project/main-project.html
+++ b/ng-ttc-frontend/src/app/component/main-project/main-project.html
@@ -29,15 +29,31 @@
 
                         <!-- เนื้อหา -->
                         <tbody>
+                            @for (item of myPrjMst; track item.prjseq; let i = $index) {
                             <tr class="border-b hover:bg-gray-50 transition duration-100">
-                                <td class="py-3 px-4 text-gray-700">1</td>
-                                <td class="py-3 px-4 font-medium text-gray-800">โครงการปรับปรุงอาคาร</td>
-                                <td class="py-3 px-4 text-yellow-600 font-medium">รออนุมัติ</td>
+                                <td class="py-3 px-4 text-gray-700">{{ i + 1 }}</td>
+                                <td class="py-3 px-4 font-medium text-gray-800">{{ item.prjnam }}</td>
+                                <td class="py-3 px-4 font-medium"
+                                    [ngClass]="{
+                                        'text-yellow-600': item.prjcomstt === 'UAC',
+                                        'text-green-600': item.prjcomstt === 'BAP',
+                                        'text-red-600': item.prjcomstt === 'CN'
+                                    }">
+                                    @if(item.prjcomstt === 'UAC'){ รออนุมัติ }
+                                    @else if(item.prjcomstt === 'BAP'){ อนุมัติแล้ว }
+                                    @else if(item.prjcomstt === 'CN'){ ไม่อนุมัติ }
+                                    @else { {{ item.prjcomstt }} }
+                                </td>
                                 <td class="py-3 px-4 text-center flex flex-row justify-center gap-2">
                                     <button class="px-3 py-1 text-xs font-semibold text-white bg-red-900 rounded-md hover:bg-red-950">แก้ไข</button>
                                     <button class="px-3 py-1 text-xs font-semibold text-white bg-red-900 rounded-md hover:bg-red-950">ติดตาม</button>
                                 </td>
                             </tr>
+                            } @empty {
+                                <tr>
+                                    <td colspan="4" class="py-6 text-center text-gray-500 bg-gray-50">ไม่พบข้อมูลโครงการ</td>
+                                </tr>
+                            }
                         </tbody>
                     </table>
                 </div>
diff --git a/ng-ttc-frontend/src/app/component/main-project/main-project.ts b/ng-ttc-frontend/src/app/component/main-project/main-project.ts
index 4ca2706..8da56e7 100644
--- a/ng-ttc-frontend/src/app/component/main-project/main-project.ts
+++ b/ng-ttc-frontend/src/app/component/main-project/main-project.ts
@@ -4,6 +4,8 @@ import { GeneralService } from '../../services/generalservice';
 import { IDropAct, IStateDrop, IStateResultResponse, IActData, IActSumData } from '../../interfaces/dashboard.interface'
 import { DashboardStateService } from '../../services/state/dashboard-state.service';
 import { Router } from '@angular/router';
+import { IPrjMst } from '../../interfaces/main.interface'; // เพิ่ม Import Interface
+import { ProjectStateService } from '../../services/state/project-state.service';
 
 
 @Component({
@@ -13,16 +15,44 @@ import { Router } from '@angular/router';
   styleUrl: './main-project.css',
 })
 export class MainProject implements OnInit {
+
+  myPrjMst: IPrjMst[] = []; // ตัวแปรเก็บข้อมูลโครงการ
+
   constructor(
     private generalService: GeneralService,
     private dashboardStateService: DashboardStateService,
+    private projectStateService: ProjectStateService, // Inject ProjectStateService
     private router: Router
   ) {}
 
   ngOnInit(): void {
-
+    this.projectStateService.getStateResult().subscribe((result: IPrjMst[] | null) => {
+      if (result) {
+        this.myPrjMst = result;
+      }
+    });
+    // this.onSearchPrj(); // เรียกดึงข้อมูลเมื่อเริ่มทำงาน
   }
 
+  // // ฟังก์ชันดึงข้อมูลโครงการ
+  // onSearchPrj(): void {
+  //   const uri = '/api/ttc/projectsearch?column=user';
+  //   const request = {}; // body ว่างตามที่ระบุ
+
+  //   this.generalService.postRequest(uri, request).subscribe({
+  //     next: (result: any) => {
+  //       if (result.code === '200') {
+  //         // สำเร็จ: นำข้อมูลใส่ตัวแปร
+  //         this.myPrjMst = result.data;
+  //       } else {
+  //         this.generalService.trowApi(result);
+  //       }
+  //     },
+  //     error: (error: any) => {
+  //       this.generalService.trowApi(error);
+  //     }
+  //   });
+  // }
 
   navigate(path: string) {
     this.router.navigate([path]);
diff --git a/ng-ttc-frontend/src/app/content/main-project-content/main-project-content.html b/ng-ttc-frontend/src/app/content/main-project-content/main-project-content.html
index 636812b..3544b2e 100644
--- a/ng-ttc-frontend/src/app/content/main-project-content/main-project-content.html
+++ b/ng-ttc-frontend/src/app/content/main-project-content/main-project-content.html
@@ -1,8 +1,9 @@
-<div class="h-screen bg-gray-100 flex flex-col">
+<div class="h-full bg-gray-100 flex flex-col w-full"> <!-- แก้ h-screen เป็น h-full -->
 
-    <header class="flex justify-between items-center py-4 px-6">
+    <!-- Header: ใช้ flex-shrink-0 เพื่อไม่ให้โดนบีบ และ bg-white เพื่อให้ตัดกับ content -->
+    <header class="shrink-0 flex justify-between items-center py-4 px-6">
       @if (mode == 'default') {
-      <div class="flex flex-col md:flex-row justify-between items-end mb-6 gap-4">
+      <div class="flex flex-col md:flex-row justify-between items-end gap-4 w-full">
           <div>
             <h1 class="text-2xl font-bold text-gray-800 flex items-center gap-2">
              <span class="w-2 h-8 bg-red-900 rounded-full"></span> รายการโครงการทั้งหมด
@@ -10,9 +11,8 @@
             <p class="text-gray-500 mt-1 text-sm pl-4">ติดตาม สถานะโครงการ และ เสนอโครงการ</p>
             </div>
           </div>
-        <!-- <h1 class="text-3xl font-bold text-gray-800">โครงการทั้งหมด</h1> -->
       } @else if (mode == 'add')  {
-        <div class="flex flex-col md:flex-row justify-between items-end gap-4">
+        <div class="flex flex-col md:flex-row justify-between items-end gap-4 w-full">
               <div>
                 <h1 class="text-2xl font-bold text-gray-800 flex items-center gap-2">
                   <button (click)="onCancelProject()"
@@ -31,7 +31,8 @@
 
     </header>
 
-    <div class="grow overflow-y-auto px-6 pb-6">
+    <!-- Content: ใช้ flex-1 เพื่อกินพื้นที่ที่เหลือ และ overflow-y-auto เพื่อให้ scroll เฉพาะส่วนนี้ -->
+    <div class="flex-1 overflow-y-auto px-6 pb-6">
 
         @if ( mode == 'default') {
             <app-main-project></app-main-project>
diff --git a/ng-ttc-frontend/src/app/content/main-project-content/main-project-content.ts b/ng-ttc-frontend/src/app/content/main-project-content/main-project-content.ts
index 147599c..b2f3c96 100644
--- a/ng-ttc-frontend/src/app/content/main-project-content/main-project-content.ts
+++ b/ng-ttc-frontend/src/app/content/main-project-content/main-project-content.ts
@@ -2,6 +2,7 @@ import { Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { GeneralService } from '../../services/generalservice';
 import { MainProjectAdd } from '../../component/main-project-add/main-project-add'; // Import Dumb Component
+import { ProjectStateService } from '../../services/state/project-state.service';
 
 @Component({
   selector: 'app-main-project-content',
@@ -18,6 +19,7 @@ export class MainProjectContent implements OnInit {
   constructor(
     private route: ActivatedRoute,
     private router: Router,
+    private projectStateService: ProjectStateService, // Inject ProjectStateService
     private generalService: GeneralService
   ) {}
 
@@ -33,6 +35,8 @@ export class MainProjectContent implements OnInit {
         this.mode = 'default';
       }
     });
+
+    this.onSearchPrj();
   }
 
   // รับ Event (save) จากลูก แล้วยิง API
@@ -65,6 +69,26 @@ export class MainProjectContent implements OnInit {
     });
   }
 
+    // ฟังก์ชันดึงข้อมูลโครงการ และ update state
+  onSearchPrj(): void {
+    const uri = '/api/ttc/projectsearch?column=user';
+    const request = {}; // body ว่างตามที่ระบุ
+
+    this.generalService.postRequest(uri, request).subscribe({
+      next: (result: any) => {
+        if (result.code === '200') {
+          // สำเร็จ: นำข้อมูลใส่ State (Pattern: Service ยิง -> ได้ของ -> ยัดใส่ State -> Component Subscribe รอรับ)
+          this.projectStateService.setProjectState(result.data);
+        } else {
+          this.generalService.trowApi(result);
+        }
+      },
+      error: (error: any) => {
+        this.generalService.trowApi(error);
+      }
+    });
+  }
+
   // รับ Event (cancel) จากลูก
   onCancelProject(): void {
       this.router.navigate(['/main/project']);