diff --git a/src/modules/05_placement/components/probation/MainDetail.vue b/src/modules/05_placement/components/probation/MainDetail.vue
new file mode 100644
index 000000000..9a77753f8
--- /dev/null
+++ b/src/modules/05_placement/components/probation/MainDetail.vue
@@ -0,0 +1,141 @@
+<template>
+	<!-- <div class="toptitle text-dark col-12 row items-center">จัดการบัญชี 2</div> -->
+  <q-card flat bordered class="col-12">
+    <q-layout
+      view="hHh Lpr lff"
+      container
+      class="shadow-2 rounded-borders page-relative"
+      style="height: 82vh"
+    >
+			<q-header class="bg-grey-1">
+				<q-toolbar>
+					<div class="text-h6 text-weight-medium text-dark col-12 row items-center q-py-md">
+						<q-btn
+							icon="mdi-arrow-left"
+							unelevated
+							round
+							dense
+							flat
+							color="primary"
+							class="q-mr-sm"
+							@click="router.go(-1)"
+						/>
+							บันทึกผลการทดลองปฏิบัติหน้าที่ราชการของ นายสมคิด ยอดใจ
+					</div>
+				</q-toolbar>
+				<q-separator/>
+			</q-header>
+			<q-drawer
+        v-model="drawer"
+        show-if-above
+
+				:width="150"
+        :breakpoint="500"
+				class="bg-grey-1"
+        bordered
+      >
+        <q-scroll-area class="fit" :horizontal-thumb-style="{ opacity: 0 }">
+          <q-list class="text-grey-7">
+            <q-item 
+							dense
+							active
+							class="q-py-sm"
+							active-class="text-primary bg-teal-1 text-weight-medium"
+							clickable 
+							v-ripple>
+              <q-item-section avatar style="min-width: 40px">
+                <q-icon size="18px" name="mdi-file-edit" />
+              </q-item-section>
+
+              <q-item-section>
+                บันทึกผล
+              </q-item-section>
+            </q-item>
+
+            <q-item 
+							active-class="text-primary bg-teal-1 text-weight-medium"
+							clickable
+							class="q-py-sm"
+							dense 
+							v-ripple>
+              <q-item-section avatar style="min-width: 40px">
+                <q-icon size="18px" name="mdi-file-star" />
+              </q-item-section>
+
+              <q-item-section>
+                ประเมินผล
+              </q-item-section>
+            </q-item>
+
+            <q-item 
+							active-class="text-primary bg-teal-1 text-weight-medium"
+							clickable 
+							class="q-py-sm"
+							dense
+							v-ripple>
+              <q-item-section avatar style="min-width: 40px">
+                <q-icon size="18px" name="mdi-file-chart" />
+              </q-item-section>
+
+              <q-item-section>
+                รายการ
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-scroll-area>
+      </q-drawer>
+      <q-page-container>
+				<q-layout
+					view="hHh Lpr lff"
+					container
+					style="height: 72vh"
+				>
+					<q-header class="bg-grey-1">
+							<div class="bg-grey-1">
+									<div class="col-12 row q-gutter-x-md items-center">
+										<q-tabs dense v-model="tab" active-class="text-primary text-weight-medium" indicator-color="grey-1" class="text-grey-7">
+											<q-tab name="save1" label="บันทึกผลครั้งที่ 1" />
+											<q-tab name="save2" label="บันทึกผลครั้งที่ 2" />
+											<q-tab name="save3" label="บันทึกผลครั้งที่ 3" />
+										</q-tabs>
+										<div>
+											<q-btn color="blue" flat dense icon="mdi-plus">
+												<q-tooltip>
+													เพิ่มบันทึกผลการทดลอง
+												</q-tooltip>
+											</q-btn>
+										</div>
+									</div>
+								<q-separator/>
+							</div>
+						</q-header>
+						<q-page-container>
+							<div class="col-12 row">
+								<Form />
+							</div>
+						</q-page-container>
+					</q-layout>
+    	</q-page-container>
+    </q-layout>
+	</q-card>
+</template>
+<script setup lang="ts">
+import { useRouter } from "vue-router";
+import { ref } from "vue";
+import Form from "@/modules/05_placement/components/probation/form.vue";
+
+const router = useRouter();
+const drawer = ref<boolean>(true);
+const	tab = ref('save1');
+</script>
+<style lang="scss" scope>
+.btn-absolute {
+  z-index: 50;
+  position: absolute;
+  left: 200px;
+  top: 10px;
+}
+.btnShadow {
+  box-shadow: 0 1px 2px rgb(0 0 0 / 10%), 3px 3px 7px 1px rgba(95, 95, 95, 0.15) !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/modules/05_placement/components/probation/form.vue b/src/modules/05_placement/components/probation/form.vue
index 8fcec5c40..0939b34ba 100644
--- a/src/modules/05_placement/components/probation/form.vue
+++ b/src/modules/05_placement/components/probation/form.vue
@@ -1,7 +1,7 @@
 <!-- card ข้อมูลส่วนตัว -->
 <template>
 	<div class="q-pb-md">
-		<div class="toptitle text-dark col-12 row items-center">
+		<!-- <div class="toptitle text-dark col-12 row items-center">
 			<q-btn
 				icon="mdi-arrow-left"
 				unelevated
@@ -13,26 +13,26 @@
 				@click="router.go(-1)"
 			/>
 			ฟอร์มแบบประเมินสำหรับผู้ดูแล
-		</div>
-		<q-card bordered class="col-12 text-dark">
+		</div> -->
+		<div class="col-12 text-dark">
 			<div class="row col-12 q-pa-lg">
 				<div class="row col-12 q-gutter-lg">
 					<div class="col-12 row">
 						<div class="col-12 text-top0 row items-center ">
 							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
 							วันเริ่มทดลองปฎิบัติหน้าที่ราชการ ตั้งแต่วันที่
-							<span class="text-primary q-px-sm">{{date2Thai(dateToday)}}</span> 
+							<span class="text-black q-px-sm">{{date2Thai(dateToday)}}</span> 
 							ถึงวันที 
-							<span class="text-primary q-px-sm">{{date2Thai(dateEnd)}}</span>
+							<span class="text-black q-px-sm">{{date2Thai(dateEnd)}}</span>
 						</div>
 						<div class="col-12 text-top0 row items-center">
 							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
 							การทดลองปฏิบัติหน้าที่ราชการมีผล ดังนี้
-							<span class="text-primary q-px-sm">{{ "ครั้งที่" + period }}</span>
+							<span class="text-black q-px-sm">{{ "ครั้งที่" + period }}</span>
 							ระหว่างวันที่
-							<span class="text-primary q-px-sm">{{ date2Thai(dateToday)}}</span>
+							<span class="text-black q-px-sm">{{ date2Thai(dateToday)}}</span>
 							ถึงวันที่
-							<span class="text-primary q-px-sm">{{date2Thai(dateEnd)}}</span>
+							<span class="text-black q-px-sm">{{date2Thai(dateEnd)}}</span>
 						</div>
 						<div class="col-12 q-pt-md">
 							<q-separator size="3px" color="grey-2" />
@@ -831,10 +831,10 @@
 				</div>
 			</div>
 			<q-separator />
-			<div class="flex justify-end q-pa-sm q-gutter-sm">
-				<q-btn unelevated label="บันทึก" color="public"/>
+			<div class="flex justify-end q-px-sm q-pt-sm">
+				<q-btn dense class="q-px-md" unelevated label="บันทึก" color="public"/>
 			</div>
-		</q-card>
+		</div>
 	</div>
 </template>
 <script setup lang="ts">
@@ -845,7 +845,7 @@ import { useQuasar } from "quasar";
 import router from "@/router";
 
 const $q = useQuasar();
-const ratingColors = [ 'light-green-3', 'light-green-6', 'green', 'green-9', 'green-10' ];
+const ratingColors = [ 'light-blue-3', 'light-blue-6', 'blue', 'blue-9', 'blue-10' ];
 const list1_1 = [
 	{id: '1', label: 'ผลผลิตของงานที่คาดหวัง 1'},
 	{id: '2', label: 'ผลผลิตของงานที่คาดหวัง 2'},
@@ -944,5 +944,7 @@ const onReset = () => {
     padding-bottom: 5px;
     color: #02A998;
 }
-
+.q-rating__icon{
+	text-shadow: transparent !important;
+}
 </style>
\ No newline at end of file
diff --git a/src/modules/05_placement/router.ts b/src/modules/05_placement/router.ts
index 3a677935d..417accbaf 100644
--- a/src/modules/05_placement/router.ts
+++ b/src/modules/05_placement/router.ts
@@ -30,7 +30,7 @@ const probationForm = () =>
   import("@/modules/05_placement/components/probation/form.vue");
 
 const probationWorkAdd = () =>
-  import("@/modules/05_placement/components/probation/AddWork.vue");
+  import("@/modules/05_placement/components/probation/MainDetail.vue");
 export default [
   {
     path: "/placement",