diff --git a/frontend/src/assets/icon/boardIcon/boardComment.svg b/frontend/src/assets/icon/boardIcon/boardComment.svg
new file mode 100644
index 00000000..ef632535
--- /dev/null
+++ b/frontend/src/assets/icon/boardIcon/boardComment.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M8 13.5H16M8 8.5H12" stroke="#28303f" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M6.09881 19C4.7987 18.8721 3.82475 18.4816 3.17157 17.8284C2 16.6569 2 14.7712 2 11V10.5C2 6.72876 2 4.84315 3.17157 3.67157C4.34315 2.5 6.22876 2.5 10 2.5H14C17.7712 2.5 19.6569 2.5 20.8284 3.67157C22 4.84315 22 6.72876 22 10.5V11C22 14.7712 22 16.6569 20.8284 17.8284C19.6569 19 17.7712 19 14 19C13.4395 19.0125 12.9931 19.0551 12.5546 19.155C11.3562 19.4309 10.2465 20.0441 9.14987 20.5789C7.58729 21.3408 6.806 21.7218 6.31569 21.3651C5.37769 20.6665 6.29454 18.5019 6.5 17.5" stroke="#28303f" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
diff --git a/frontend/src/assets/icon/boardIcon/boardDelete.svg b/frontend/src/assets/icon/boardIcon/boardDelete.svg
new file mode 100644
index 00000000..38d81f87
--- /dev/null
+++ b/frontend/src/assets/icon/boardIcon/boardDelete.svg
@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="0.5" y="0.5" width="39" height="39" rx="3.5" fill="white" stroke="#D7DBEC"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M26 16V27C26 28.1046 25.1046 29 24 29H16C14.8954 29 14 28.1046 14 27V16H26ZM24 18H16V27H24V18ZM20 11C20.5523 11 21 11.4477 21 12V13H26C26.5523 13 27 13.4477 27 14C27 14.5523 26.5523 15 26 15H14C13.4477 15 13 14.5523 13 14C13 13.4477 13.4477 13 14 13H19V12C19 11.4477 19.4477 11 20 11Z" fill="#1E5EFF"/>
+</svg>
diff --git a/frontend/src/assets/icon/boardIcon/boardEdit.svg b/frontend/src/assets/icon/boardIcon/boardEdit.svg
new file mode 100644
index 00000000..a280431a
--- /dev/null
+++ b/frontend/src/assets/icon/boardIcon/boardEdit.svg
@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="0.5" y="0.5" width="39" height="39" rx="3.5" fill="white" stroke="#D7DBEC"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M27 27C27.5523 27 28 27.4477 28 28C28 28.5523 27.5523 29 27 29H13C12.4477 29 12 28.5523 12 28C12 27.4477 12.4477 27 13 27H27ZM26.003 11.5849L27.4151 12.997C28.195 13.7769 28.195 15.0414 27.4151 15.8213L19.1778 24.0586C19.025 24.2114 18.8268 24.3105 18.6129 24.341L14 25L14.659 20.3871C14.6895 20.1732 14.7886 19.975 14.9414 19.8222L23.1787 11.5849C23.9586 10.805 25.2231 10.805 26.003 11.5849ZM24.5909 12.997L16.5891 20.9988L16.354 22.646L18.0012 22.4109L26.003 14.4091L24.5909 12.997Z" fill="#1E5EFF"/>
+</svg>
diff --git a/frontend/src/assets/icon/boardIcon/quillEditor.svg b/frontend/src/assets/icon/boardIcon/quillEditor.svg
index 394fb556..0e36698a 100644
--- a/frontend/src/assets/icon/boardIcon/quillEditor.svg
+++ b/frontend/src/assets/icon/boardIcon/quillEditor.svg
@@ -1,5 +1,4 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M10.5502 3C6.69782 3.00694 4.6805 3.10152 3.39128 4.39073C2 5.78202 2 8.02125 2 12.4997C2 16.9782 2 19.2174 3.39128 20.6087C4.78257 22 7.0218 22 11.5003 22C15.9787 22 18.218 22 19.6093 20.6087C20.8985 19.3195 20.9931 17.3022 21 13.4498" stroke="#28303F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-    <path d="M11.0556 13C10.3322 3.86635 16.8023 1.27554 21.9805 2.16439C22.1896 5.19136 20.7085 6.32482 17.8879 6.84825C18.4326 7.41736 19.395 8.13354 19.2912 9.02879C19.2173 9.66586 18.7846 9.97843 17.9194 10.6036C16.0231 11.9736 13.8264 12.8375 11.0556 13Z" stroke="#28303F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-    <path d="M9 17C11 11.5 12.9604 9.63636 15 8" stroke="#28303F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M5.07579 17C4.08939 4.54502 12.9123 1.0121 19.9734 2.22417C20.2585 6.35185 18.2389 7.89748 14.3926 8.61125C15.1353 9.38731 16.4477 10.3639 16.3061 11.5847C16.2054 12.4534 15.6154 12.8797 14.4355 13.7322C11.8497 15.6004 8.85421 16.7785 5.07579 17Z" stroke="#28303F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M4 22C4 15.5 7.84848 12.1818 10.5 10" stroke="#28303F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
diff --git a/frontend/src/assets/icon/chatIcon/clip 2.svg b/frontend/src/assets/icon/chatIcon/clip 2.svg
new file mode 100644
index 00000000..e4290cd4
--- /dev/null
+++ b/frontend/src/assets/icon/chatIcon/clip 2.svg	
@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M19.5 20.2539L19.5 9.67393C19.5 7.58393 17.97 5.72393 15.89 5.52393C13.51 5.29393 11.5 7.16393 11.5 9.50393L11.5 21.8639C11.5 23.1739 12.44 24.3639 13.74 24.4939C15.24 24.6439 16.5 23.4739 16.5 22.0039L16.5 11.5039C16.5 10.9539 16.05 10.5039 15.5 10.5039C14.95 10.5039 14.5 10.9539 14.5 11.5039L14.5 20.2539C14.5 20.6639 14.16 21.0039 13.75 21.0039C13.34 21.0039 13 20.6639 13 20.2539L13 11.6439C13 10.3339 13.94 9.14393 15.24 9.01393C16.74 8.86393 18 10.0339 18 11.5039L18 21.8339C18 23.9239 16.47 25.7839 14.39 25.9839C12 26.2139 10 24.3439 10 22.0039L10 9.73393C10 6.86393 12.1 4.29393 14.96 4.02393C18.25 3.72393 21 6.28393 21 9.50393L21 20.2539C21 20.6639 20.66 21.0039 20.25 21.0039C19.84 21.0039 19.5 20.6639 19.5 20.2539Z" fill="#28303F"/>
+</svg>
diff --git a/frontend/src/assets/icon/chatIcon/code 2.svg b/frontend/src/assets/icon/chatIcon/code 2.svg
new file mode 100644
index 00000000..b8e4b06b
--- /dev/null
+++ b/frontend/src/assets/icon/chatIcon/code 2.svg	
@@ -0,0 +1,5 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="48" height="48" rx="12" fill="#FAF5FF"/>
+    <path d="M33 19V29C33 32 31.5 34 28 34H20C16.5 34 15 32 15 29V19C15 16 16.5 14 20 14H28C31.5 14 33 16 33 19Z" stroke="#9F7AEA" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M26.5 16.5V18.5C26.5 19.6 27.4 20.5 28.5 20.5H30.5M22 25L20 27L22 29M26 25L28 27L26 29" stroke="#9F7AEA" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/frontend/src/assets/icon/chatIcon/docs 2.svg b/frontend/src/assets/icon/chatIcon/docs 2.svg
new file mode 100644
index 00000000..58f65b01
--- /dev/null
+++ b/frontend/src/assets/icon/chatIcon/docs 2.svg	
@@ -0,0 +1,5 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="48" height="48" rx="12" fill="#EBF8FF"/>
+    <path d="M33 19V29C33 32 31.5 34 28 34H20C16.5 34 15 32 15 29V19C15 16 16.5 14 20 14H28C31.5 14 33 16 33 19Z" stroke="#4299E1" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M26.5 16.5V18.5C26.5 19.6 27.4 20.5 28.5 20.5H30.5M20 25H24M20 29H28" stroke="#4299E1" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/frontend/src/assets/icon/chatIcon/download 2.svg b/frontend/src/assets/icon/chatIcon/download 2.svg
new file mode 100644
index 00000000..d4927f07
--- /dev/null
+++ b/frontend/src/assets/icon/chatIcon/download 2.svg	
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z" stroke="#615EF0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M9 11.51L12 14.51L15 11.51M12 14.51V6.51001M6 16.51C9.89 17.81 14.11 17.81 18 16.51" stroke="#615EF0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/frontend/src/assets/icon/chatIcon/img 2.svg b/frontend/src/assets/icon/chatIcon/img 2.svg
new file mode 100644
index 00000000..48a7d47c
--- /dev/null
+++ b/frontend/src/assets/icon/chatIcon/img 2.svg	
@@ -0,0 +1,5 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="48" height="48" rx="12" fill="#F0FFF4"/>
+    <path d="M21 34H27C32 34 34 32 34 27V21C34 16 32 14 27 14H21C16 14 14 16 14 21V27C14 32 16 34 21 34Z" stroke="#48BB78" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M14.6699 30.95L19.5999 27.64C20.3899 27.11 21.5299 27.17 22.2399 27.78L22.5699 28.07C23.3499 28.74 24.6099 28.74 25.3899 28.07L29.5499 24.5C30.3299 23.83 31.5899 23.83 32.3699 24.5L33.9999 25.9M20.9999 22C21.5304 22 22.0391 21.7893 22.4141 21.4142C22.7892 21.0391 22.9999 20.5304 22.9999 20C22.9999 19.4696 22.7892 18.9609 22.4141 18.5858C22.0391 18.2107 21.5304 18 20.9999 18C20.4695 18 19.9608 18.2107 19.5857 18.5858C19.2106 18.9609 18.9999 19.4696 18.9999 20C18.9999 20.5304 19.2106 21.0391 19.5857 21.4142C19.9608 21.7893 20.4695 22 20.9999 22Z" stroke="#48BB78" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/frontend/src/assets/icon/chatIcon/pdf 2.svg b/frontend/src/assets/icon/chatIcon/pdf 2.svg
new file mode 100644
index 00000000..5f27c43c
--- /dev/null
+++ b/frontend/src/assets/icon/chatIcon/pdf 2.svg	
@@ -0,0 +1,5 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="48" height="48" rx="12" fill="#FFF5F5"/>
+    <path d="M20 24.2H27M20 28.2H24.38M22 18H26C28 18 28 17 28 16C28 14 27 14 26 14H22C21 14 20 14 20 16C20 18 21 18 22 18Z" stroke="#F56565" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M28 16.02C31.33 16.2 33 17.43 33 22V28C33 32 32 34 27 34H21C16 34 15 32 15 28V22C15 17.44 16.67 16.2 20 16.02" stroke="#F56565" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/frontend/src/assets/icon/chatIcon/sendIcon 2.svg b/frontend/src/assets/icon/chatIcon/sendIcon 2.svg
new file mode 100644
index 00000000..281968ec
--- /dev/null
+++ b/frontend/src/assets/icon/chatIcon/sendIcon 2.svg	
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M16.1401 2.96004L7.11012 5.96004C1.04012 7.99004 1.04012 11.3 7.11012 13.32L9.79012 14.21L10.6801 16.89C12.7001 22.96 16.0201 22.96 18.0401 16.89L21.0501 7.87004C22.3901 3.82004 20.1901 1.61004 16.1401 2.96004ZM16.4601 8.34004L12.6601 12.16C12.5101 12.31 12.3201 12.38 12.1301 12.38C11.9401 12.38 11.7501 12.31 11.6001 12.16C11.4606 12.0189 11.3824 11.8285 11.3824 11.63C11.3824 11.4316 11.4606 11.2412 11.6001 11.1L15.4001 7.28004C15.6901 6.99004 16.1701 6.99004 16.4601 7.28004C16.7501 7.57004 16.7501 8.05004 16.4601 8.34004Z" fill="#2D5BFF"/>
+</svg>
diff --git a/frontend/src/assets/icon/etc/kanban 2.svg b/frontend/src/assets/icon/etc/kanban 2.svg
new file mode 100644
index 00000000..8bffc76c
--- /dev/null
+++ b/frontend/src/assets/icon/etc/kanban 2.svg	
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M7.99988 6C7.99988 3.79086 9.79074 2 11.9999 2H17.9999C20.2091 2 21.9999 3.79086 21.9999 6V12C21.9999 14.2091 20.2091 16 17.9999 16H13.0078V12H7.99988V6Z" fill="#93AAFD"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M5.99994 8C3.7908 8 1.99994 9.79086 1.99994 12V18C1.99994 20.2091 3.7908 22 5.99994 22H12C14.2091 22 16 20.2091 16 18V12C16 9.79086 14.2091 8 12 8H5.99994ZM12.5644 13.6833C12.8372 13.3716 12.8056 12.8978 12.4938 12.625C12.1821 12.3523 11.7083 12.3839 11.4355 12.6956L8.56563 15.9755C8.47753 16.0762 8.32578 16.0896 8.22131 16.0061L6.46849 14.6038C6.14504 14.3451 5.67307 14.3975 5.41431 14.7209C5.15556 15.0444 5.208 15.5164 5.53145 15.7751L7.28427 17.1774C8.01555 17.7624 9.0778 17.668 9.69449 16.9632L12.5644 13.6833Z" fill="#28303F"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/src/assets/icon/etc/persona 2.svg b/frontend/src/assets/icon/etc/persona 2.svg
new file mode 100644
index 00000000..0d457ef8
--- /dev/null
+++ b/frontend/src/assets/icon/etc/persona 2.svg	
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M22 12C22 15.0134 20.6672 17.7154 18.5588 19.5488C16.8031 21.0756 14.5095 22 12 22C9.49052 22 7.19694 21.0756 5.44117 19.5488C3.33285 17.7154 2 15.0134 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" fill="#93AAFD"/>
+    <circle cx="12" cy="10" r="3" fill="#28303F"/>
+    <path d="M18.5588 19.5488C17.5654 16.8918 15.0036 15 12 15C8.99637 15 6.43459 16.8918 5.44116 19.5488C7.19693 21.0756 9.49052 22 12 22C14.5095 22 16.8031 21.0756 18.5588 19.5488Z" fill="#28303F"/>
+</svg>
diff --git a/frontend/src/assets/icon/menu/kanban 3.svg b/frontend/src/assets/icon/menu/kanban 3.svg
new file mode 100644
index 00000000..2d256b11
--- /dev/null
+++ b/frontend/src/assets/icon/menu/kanban 3.svg	
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.33533 17.0064L5.67074 22.3356C5.4855 22.7061 5.03499 22.8562 4.66451 22.671C4.29403 22.4858 4.14386 22.0352 4.3291 21.6648L6.65855 17.0059L8.33533 17.0064ZM17.3416 17.0064L19.6707 21.6648C19.856 22.0352 19.7058 22.4858 19.3353 22.671C18.9648 22.8562 18.5143 22.7061 18.3291 22.3356L15.6645 17.0064C15.6645 17.0064 17.2783 17.0064 17.3416 17.0064ZM12.7499 17.0064V20.0002C12.7499 20.4144 12.4141 20.7502 11.9999 20.7502C11.5857 20.7502 11.2499 20.4144 11.2499 20.0002V17.0064H12.7499Z" fill="#28303F"/>
+    <path d="M22 14C22 15.6569 20.6569 17 19 17L5 17C3.34314 17 2 15.6569 2 14L2 5C2 3.34315 3.34315 2 5 2L19 2C20.6569 2 22 3.34315 22 5L22 14Z" fill="#93AAFD"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M6.25 7C6.25 6.58579 6.58579 6.25 7 6.25H17C17.4142 6.25 17.75 6.58579 17.75 7C17.75 7.41421 17.4142 7.75 17 7.75H7C6.58579 7.75 6.25 7.41421 6.25 7Z" fill="#28303F"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M6.25 12C6.25 11.5858 6.58579 11.25 7 11.25H12C12.4142 11.25 12.75 11.5858 12.75 12C12.75 12.4142 12.4142 12.75 12 12.75H7C6.58579 12.75 6.25 12.4142 6.25 12Z" fill="#28303F"/>
+</svg>
diff --git a/frontend/src/assets/icon/menu/kanban 4.svg b/frontend/src/assets/icon/menu/kanban 4.svg
new file mode 100644
index 00000000..2d256b11
--- /dev/null
+++ b/frontend/src/assets/icon/menu/kanban 4.svg	
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.33533 17.0064L5.67074 22.3356C5.4855 22.7061 5.03499 22.8562 4.66451 22.671C4.29403 22.4858 4.14386 22.0352 4.3291 21.6648L6.65855 17.0059L8.33533 17.0064ZM17.3416 17.0064L19.6707 21.6648C19.856 22.0352 19.7058 22.4858 19.3353 22.671C18.9648 22.8562 18.5143 22.7061 18.3291 22.3356L15.6645 17.0064C15.6645 17.0064 17.2783 17.0064 17.3416 17.0064ZM12.7499 17.0064V20.0002C12.7499 20.4144 12.4141 20.7502 11.9999 20.7502C11.5857 20.7502 11.2499 20.4144 11.2499 20.0002V17.0064H12.7499Z" fill="#28303F"/>
+    <path d="M22 14C22 15.6569 20.6569 17 19 17L5 17C3.34314 17 2 15.6569 2 14L2 5C2 3.34315 3.34315 2 5 2L19 2C20.6569 2 22 3.34315 22 5L22 14Z" fill="#93AAFD"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M6.25 7C6.25 6.58579 6.58579 6.25 7 6.25H17C17.4142 6.25 17.75 6.58579 17.75 7C17.75 7.41421 17.4142 7.75 17 7.75H7C6.58579 7.75 6.25 7.41421 6.25 7Z" fill="#28303F"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M6.25 12C6.25 11.5858 6.58579 11.25 7 11.25H12C12.4142 11.25 12.75 11.5858 12.75 12C12.75 12.4142 12.4142 12.75 12 12.75H7C6.58579 12.75 6.25 12.4142 6.25 12Z" fill="#28303F"/>
+</svg>
diff --git a/frontend/src/assets/icon/menu/list 3.svg b/frontend/src/assets/icon/menu/list 3.svg
new file mode 100644
index 00000000..85593691
--- /dev/null
+++ b/frontend/src/assets/icon/menu/list 3.svg	
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M2 6.5C2 5.94772 2.44772 5.5 3 5.5H6C6.55228 5.5 7 5.94772 7 6.5V9.5C7 10.0523 6.55228 10.5 6 10.5H3C2.44772 10.5 2 10.0523 2 9.5V6.5Z" fill="#28303F"/>
+    <path d="M2 14.5C2 13.9477 2.44772 13.5 3 13.5H6C6.55228 13.5 7 13.9477 7 14.5V17.5C7 18.0523 6.55228 18.5 6 18.5H3C2.44772 18.5 2 18.0523 2 17.5V14.5Z" fill="#93AAFD"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M9.25 6.25C9.25 5.83579 9.58579 5.5 10 5.5L16 5.5C16.4142 5.5 16.75 5.83579 16.75 6.25C16.75 6.66421 16.4142 7 16 7L10 7C9.58579 7 9.25 6.66421 9.25 6.25Z" fill="#93AAFD"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M9.25 14.25C9.25 13.8358 9.58579 13.5 10 13.5H16C16.4142 13.5 16.75 13.8358 16.75 14.25C16.75 14.6642 16.4142 15 16 15H10C9.58579 15 9.25 14.6642 9.25 14.25Z" fill="#28303F"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M9.25 9.75C9.25 9.33579 9.58579 9 10 9L22 9C22.4142 9 22.75 9.33579 22.75 9.75C22.75 10.1642 22.4142 10.5 22 10.5L10 10.5C9.58579 10.5 9.25 10.1642 9.25 9.75Z" fill="#93AAFD"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M9.25 17.75C9.25 17.3358 9.58579 17 10 17H22C22.4142 17 22.75 17.3358 22.75 17.75C22.75 18.1642 22.4142 18.5 22 18.5H10C9.58579 18.5 9.25 18.1642 9.25 17.75Z" fill="#28303F"/>
+</svg>
diff --git a/frontend/src/assets/icon/menu/list 4.svg b/frontend/src/assets/icon/menu/list 4.svg
new file mode 100644
index 00000000..85593691
--- /dev/null
+++ b/frontend/src/assets/icon/menu/list 4.svg	
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M2 6.5C2 5.94772 2.44772 5.5 3 5.5H6C6.55228 5.5 7 5.94772 7 6.5V9.5C7 10.0523 6.55228 10.5 6 10.5H3C2.44772 10.5 2 10.0523 2 9.5V6.5Z" fill="#28303F"/>
+    <path d="M2 14.5C2 13.9477 2.44772 13.5 3 13.5H6C6.55228 13.5 7 13.9477 7 14.5V17.5C7 18.0523 6.55228 18.5 6 18.5H3C2.44772 18.5 2 18.0523 2 17.5V14.5Z" fill="#93AAFD"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M9.25 6.25C9.25 5.83579 9.58579 5.5 10 5.5L16 5.5C16.4142 5.5 16.75 5.83579 16.75 6.25C16.75 6.66421 16.4142 7 16 7L10 7C9.58579 7 9.25 6.66421 9.25 6.25Z" fill="#93AAFD"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M9.25 14.25C9.25 13.8358 9.58579 13.5 10 13.5H16C16.4142 13.5 16.75 13.8358 16.75 14.25C16.75 14.6642 16.4142 15 16 15H10C9.58579 15 9.25 14.6642 9.25 14.25Z" fill="#28303F"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M9.25 9.75C9.25 9.33579 9.58579 9 10 9L22 9C22.4142 9 22.75 9.33579 22.75 9.75C22.75 10.1642 22.4142 10.5 22 10.5L10 10.5C9.58579 10.5 9.25 10.1642 9.25 9.75Z" fill="#93AAFD"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M9.25 17.75C9.25 17.3358 9.58579 17 10 17H22C22.4142 17 22.75 17.3358 22.75 17.75C22.75 18.1642 22.4142 18.5 22 18.5H10C9.58579 18.5 9.25 18.1642 9.25 17.75Z" fill="#28303F"/>
+</svg>
diff --git a/frontend/src/assets/icon/menu/timeline 3.svg b/frontend/src/assets/icon/menu/timeline 3.svg
new file mode 100644
index 00000000..f518b70a
--- /dev/null
+++ b/frontend/src/assets/icon/menu/timeline 3.svg	
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M2.25 7C2.25 6.58579 2.58579 6.25 3 6.25H7C7.41421 6.25 7.75 6.58579 7.75 7C7.75 7.41421 7.41421 7.75 7 7.75H3C2.58579 7.75 2.25 7.41421 2.25 7Z" fill="#93AAFD"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M2.25 17C2.25 16.5858 2.58579 16.25 3 16.25H9C9.41421 16.25 9.75 16.5858 9.75 17C9.75 17.4142 9.41421 17.75 9 17.75H3C2.58579 17.75 2.25 17.4142 2.25 17Z" fill="#93AAFD"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M16.25 17C16.25 16.5858 16.5858 16.25 17 16.25H21C21.4142 16.25 21.75 16.5858 21.75 17C21.75 17.4142 21.4142 17.75 21 17.75H17C16.5858 17.75 16.25 17.4142 16.25 17Z" fill="#93AAFD"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M14.25 7C14.25 6.58579 14.5858 6.25 15 6.25L21 6.25C21.4142 6.25 21.75 6.58579 21.75 7C21.75 7.41421 21.4142 7.75 21 7.75L15 7.75C14.5858 7.75 14.25 7.41421 14.25 7Z" fill="#93AAFD"/>
+    <circle cx="15" cy="17" r="3" fill="#28303F"/>
+    <circle cx="9" cy="7" r="3" fill="#28303F"/>
+</svg>
diff --git a/frontend/src/assets/icon/menu/timeline 4.svg b/frontend/src/assets/icon/menu/timeline 4.svg
new file mode 100644
index 00000000..f518b70a
--- /dev/null
+++ b/frontend/src/assets/icon/menu/timeline 4.svg	
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M2.25 7C2.25 6.58579 2.58579 6.25 3 6.25H7C7.41421 6.25 7.75 6.58579 7.75 7C7.75 7.41421 7.41421 7.75 7 7.75H3C2.58579 7.75 2.25 7.41421 2.25 7Z" fill="#93AAFD"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M2.25 17C2.25 16.5858 2.58579 16.25 3 16.25H9C9.41421 16.25 9.75 16.5858 9.75 17C9.75 17.4142 9.41421 17.75 9 17.75H3C2.58579 17.75 2.25 17.4142 2.25 17Z" fill="#93AAFD"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M16.25 17C16.25 16.5858 16.5858 16.25 17 16.25H21C21.4142 16.25 21.75 16.5858 21.75 17C21.75 17.4142 21.4142 17.75 21 17.75H17C16.5858 17.75 16.25 17.4142 16.25 17Z" fill="#93AAFD"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M14.25 7C14.25 6.58579 14.5858 6.25 15 6.25L21 6.25C21.4142 6.25 21.75 6.58579 21.75 7C21.75 7.41421 21.4142 7.75 21 7.75L15 7.75C14.5858 7.75 14.25 7.41421 14.25 7Z" fill="#93AAFD"/>
+    <circle cx="15" cy="17" r="3" fill="#28303F"/>
+    <circle cx="9" cy="7" r="3" fill="#28303F"/>
+</svg>
diff --git a/frontend/src/common/component/PaginationComponent.vue b/frontend/src/common/component/PaginationComponent.vue
new file mode 100644
index 00000000..467575ac
--- /dev/null
+++ b/frontend/src/common/component/PaginationComponent.vue
@@ -0,0 +1,47 @@
+<script setup>
+import { defineProps } from 'vue';
+defineProps({
+  currentPage: Number,
+  totalPages: Number,
+});
+</script>
+
+<template>
+  <div class="pagination">
+    <button @click="$emit('prev-page')" :disabled="currentPage === 1">
+      &lt;
+    </button>
+    <button
+        v-for="page in totalPages"
+        :key="page"
+        @click="$emit('go-to-page', page)"
+        :class="{ active: page === currentPage }"
+    >
+      {{ page }}
+    </button>
+    <button @click="$emit('next-page')" :disabled="currentPage === totalPages">
+      &gt;
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.pagination {
+  display: flex;
+  justify-content: center;
+  margin: 20px 0;
+}
+
+.pagination button {
+  background: none;
+  border: 1px solid #ddd;
+  padding: 5px 10px;
+  margin: 0 5px;
+  cursor: pointer;
+}
+
+.pagination button.active {
+  background-color: #007bff;
+  color: white;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/common/component/SearchComponent.vue b/frontend/src/common/component/SearchComponent.vue
index 707969f4..70357387 100644
--- a/frontend/src/common/component/SearchComponent.vue
+++ b/frontend/src/common/component/SearchComponent.vue
@@ -36,7 +36,7 @@ defineProps({
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 20px;
+  padding: 30px;
   background-color: #fff;
   border-radius: 8px;
   //box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.05);
diff --git a/frontend/src/layouts/component/Modal/NotificationModal 2.vue b/frontend/src/layouts/component/Modal/NotificationModal 2.vue
new file mode 100644
index 00000000..6a3aed90
--- /dev/null
+++ b/frontend/src/layouts/component/Modal/NotificationModal 2.vue	
@@ -0,0 +1,24 @@
+<script setup>
+import { useNotificationStore } from '@/store/socket/useNotifyStore';
+
+const notificationStore = useNotificationStore();
+</script>
+
+<template>
+  <div>
+    <div v-for="notification in notificationStore.notifications" :key="notification.id">
+      {{ notification.message }}
+    </div>
+  </div>
+</template>
+
+<style scoped>
+  div {
+    position: fixed;
+    top: 0;
+    right: 0;
+    background-color: white;
+    border: 1px solid black;
+    padding: 10px;
+  }
+</style>
\ No newline at end of file
diff --git a/frontend/src/layouts/component/Modal/WorkspaceModal 2.vue b/frontend/src/layouts/component/Modal/WorkspaceModal 2.vue
new file mode 100644
index 00000000..be14a850
--- /dev/null
+++ b/frontend/src/layouts/component/Modal/WorkspaceModal 2.vue	
@@ -0,0 +1,109 @@
+<script setup>
+import user1 from '@/assets/icon/persona/user1.svg';
+// import user2 from '@/assets/icon/persona/user2.svg';
+// import user3 from '@/assets/icon/persona/user3.svg';
+import plus from '@/assets/icon/menu/plus.svg';
+// import { useRouter } from 'vue-router';
+// import { defineProps } from 'vue';
+import {workspaceData} from "@/static/workspaceData";
+
+// const router = useRouter();
+
+</script>
+
+<template>
+  <div class="workspace-list-container">
+    <div>
+      <p>Workspace List</p>
+    </div>
+
+    <hr>
+
+    <ul>
+      <li>
+        <router-link to="/my/dashboard">
+          <img :src="user1" alt="user">
+          <p>My Space</p>
+        </router-link>
+      </li>
+      <li v-for="(workspace) in workspaceData" :key="workspace.workspaceId">
+        <router-link :to="'/workspace/' + workspace.workspaceId + '/dashboard'">
+          <img :src="workspace.persona" alt="workspace1">
+          <p>{{ workspace.workspaceName }}</p>
+        </router-link>
+      </li>
+    </ul>
+
+    <hr>
+
+    <div>
+      <router-link to="/workspace/scrum/workspace">
+        <img :src="plus" class="plus" alt="plus-btn">
+        <p>Add Workspace</p>
+      </router-link>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.workspace-list-container {
+  background-color: #F3F6FF;
+  padding: 20px;
+  border-radius: 10px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  position: absolute;
+  top: 50px;
+  right: 10px;
+  width: 180px;
+}
+
+p {
+  font-weight: 500;
+  margin: 0;
+}
+
+hr {
+  border: 1px solid #dfe5f1;
+  width: 100%;
+  margin: 10px 0;
+}
+
+ul {
+  text-decoration: none;
+  padding: 0;
+
+  li {
+    list-style: none;
+    padding: 0.5rem;
+    gap: 0.625rem;
+    display: flex;
+    align-items: center;
+
+    &:hover {
+      background-color: #C6D2FD;
+      color: white;
+      border-radius: 10px;
+    }
+  }
+}
+
+a {
+  display: flex;
+  text-decoration: none;
+  color: #222;
+  align-items: center;
+  gap: 10px;
+
+  img {
+    width: 40px;
+    height: 40px;
+  }
+}
+
+.plus {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  background-color: #93AAFD;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/layouts/component/WorkSpaceMenu.vue b/frontend/src/layouts/component/WorkSpaceMenu.vue
index 4cd52c0c..08a34ec8 100644
--- a/frontend/src/layouts/component/WorkSpaceMenu.vue
+++ b/frontend/src/layouts/component/WorkSpaceMenu.vue
@@ -1,40 +1,43 @@
 <script setup>
 import { useRoute } from 'vue-router';
+import {computed} from "vue";
+import {workspaceData} from "@/static/workspaceData";
 // import { workspaceData } from "@/static/workspaceData";
 // import { computed } from "vue";
 
 const route = useRoute();
 const workspaceId = route.params.workspaceId;
+const workspace = computed(() => workspaceData.find(ws => ws.workspaceId === workspaceId));
 </script>
 
 <template>
   <ul>
     <li>
-      <router-link :to="`/workspace/${workspaceId}/dashboard`">
+      <router-link :to="`/workspace/${workspace}/dashboard`">
         <i class="icon-dashboard"/>
         <p class="outfit">Dashboard</p>
       </router-link>
     </li>
     <li>
-      <router-link :to="`/workspace/${workspaceId}/monthly`">
+      <router-link :to="`/workspace/${workspace}/monthly`">
         <i class="icon-schedule"/>
         <p class="outfit">Schedule</p>
       </router-link>
     </li>
     <li>
-      <router-link :to="`/workspace/${workspaceId}/board/qa/list`">
+      <router-link :to="`/workspace/${workspace}/scrum/board/qa/list`">
         <i class="icon-board"/>
         <p class="outfit">Board</p>
       </router-link>
       <ul class="submenu">
         <li>
-          <router-link :to="`/workspace/${workspaceId}/board/qa/list`">
+          <router-link :to="`/workspace/${workspace}/scrum/board/qa/list`">
             <i class="icon-qa"/>
             <p class="outfit">QA Board</p>
           </router-link>
         </li>
         <li>
-          <router-link :to="`/workspace/${workspaceId}/board/error/list`">
+          <router-link :to="`/workspace/${workspaceId}/scrum/board/error/list`">
             <i class="icon-errors"/>
             <p class="outfit">Errors</p>
           </router-link>
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index 66bcc596..63211f3a 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -237,7 +237,7 @@ const routes = [
                                         component: () => import('@/view/board/list/QAList.vue')
                                     },
                                     {
-                                        path: 'detail',
+                                        path: 'detail/:id',
                                         name: 'QADetail',
                                         component: () => import('@/view/board/detail/QADetail.vue')
                                     },
diff --git a/frontend/src/static/index 2.js b/frontend/src/static/index 2.js
deleted file mode 100644
index 18d4b6bd..00000000
--- a/frontend/src/static/index 2.js	
+++ /dev/null
@@ -1 +0,0 @@
-// static
\ No newline at end of file
diff --git a/frontend/src/static/qaListData.js b/frontend/src/static/qaListData.js
new file mode 100644
index 00000000..02ed8a09
--- /dev/null
+++ b/frontend/src/static/qaListData.js
@@ -0,0 +1,11 @@
+export const qaListData =[
+    {
+        title: '게시판 제목 1', author: 'seung-eun', state: 'done', date: 'May 5, 2020'
+    },
+    {
+        title: '게시판 제목 2', author: 'seung-eun1', state: 'In Progress', date: 'May 5, 2020'
+    },
+    {
+        title: '게시판 제목 3', author: 'seung-eun2', state: 'done', date: 'May 5, 2020'
+    },
+];
\ No newline at end of file
diff --git a/frontend/src/view/board/component/BoardDetail.vue b/frontend/src/view/board/component/BoardDetail.vue
new file mode 100644
index 00000000..83042c6b
--- /dev/null
+++ b/frontend/src/view/board/component/BoardDetail.vue
@@ -0,0 +1,105 @@
+<script setup>
+import { computed, defineProps } from 'vue';
+
+defineProps({
+  title: String,
+  status: String,
+  subheading: String,
+  descriptionList: Array,
+  owner: String,
+});
+
+const statusClass = computed(() => {
+  return status === 'In Progress' ? 'in-progress' : 'done';
+});
+</script>
+
+<template>
+  <div class="task-card">
+    <div class="header">
+      <p class="title">{{ title }}</p>
+      <span class="status" :class="statusClass">{{ status }}</span>
+    </div>
+    <div class="description">
+      <p class="sub-heading">{{ subheading }}</p>
+      <ul>
+        <li v-for="(item, index) in descriptionList" :key="index" class="description-content">{{ item }}</li>
+      </ul>
+    </div>
+    <div class="footer">
+      <p><strong>담당자:</strong> {{ owner }}</p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.task-card {
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  padding: 20px;
+  width: 100%;
+  background-color: white;
+  box-sizing: border-box;
+  min-height: 400px;
+  display: flex;
+  flex-direction: column;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.title {
+  font-size: 24px;
+  font-weight: 500;
+  margin: 0;
+}
+
+.sub-heading {
+  font-size: 16px;
+  font-weight: 500;
+  margin: 0;
+}
+
+.description-content{
+  font-size: 14px;
+  margin-top: 10px;
+}
+
+.status {
+  padding: 5px 10px;
+  border-radius: 12px;
+  font-size: 14px;
+}
+
+.in-progress {
+  background-color: rgba(236, 72, 153, 0.1);
+  color: rgb(236, 72, 153);
+}
+
+.done {
+  background-color: rgba(34, 197, 94, 0.1);
+  color: rgb(34, 197, 94);
+}
+
+.description {
+  margin-top: 15px;
+  margin-bottom: 20px;
+}
+
+.description h4 {
+  margin-bottom: 10px;
+}
+
+.description ul {
+  list-style: none;
+  padding: 0;
+}
+
+.footer {
+  margin-top: auto;
+  font-size: 14px;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/view/board/component/BoardList.vue b/frontend/src/view/board/component/BoardList.vue
new file mode 100644
index 00000000..739c4288
--- /dev/null
+++ b/frontend/src/view/board/component/BoardList.vue
@@ -0,0 +1,135 @@
+<script setup>
+import {computed, defineProps} from 'vue';
+import {workspaceData} from "@/static/workspaceData";
+import {useRoute} from "vue-router";
+
+const route = useRoute();
+const workspaceId = route.params.workspaceId;
+const workspace = computed(() => workspaceData.find(ws => ws.workspaceId === workspaceId));
+
+defineProps({
+  items: Array,
+  thcolumn: String,
+  column: String,
+  boardType: String,
+});
+</script>
+
+<template>
+  <table class="board-table">
+    <thead>
+    <tr>
+<!--      <th>-->
+<!--        <input type="checkbox" id="check-all"/>-->
+<!--        <label for="check-all" class="check-box"></label>-->
+<!--      </th>-->
+      <th>게시글 제목</th>
+      <th>작성자</th>
+      <th>{{thcolumn}}</th>
+      <th>작성 시간</th>
+      <th></th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr v-for="(item, index) in items" :key="index">
+<!--      <td>-->
+<!--        <input type="checkbox" id="check"/>-->
+<!--        <label for="check" class="check-box"></label>-->
+<!--      </td>-->
+      <td class="title">
+        <router-link :to="`/workspace/${workspace}/scrum/board/${boardType}/detail/${index}`">
+        {{ item.title }}
+        </router-link>
+      </td>
+      <td>{{ item.author }}</td>
+      <td>{{ item[column] }}</td>
+      <td>{{ item.date }}</td>
+      <td class="action-bundle">
+        <button @click="$emit('edit-item', item)" class="action-btn edit-btn">
+          <i class="edit-icon"></i>
+        </button>
+        <button @click="$emit('delete-item', item)" class="action-btn delete-btn">
+          <i class="delete-icon"></i>
+        </button>
+      </td>
+    </tr>
+    </tbody>
+  </table>
+</template>
+
+<style scoped>
+a{
+  text-decoration: none;
+  color: #28303F;
+}
+
+.board-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 0 30px;
+}
+
+.board-table th,
+.board-table td {
+  padding: 10px;
+  text-align: center;
+  border-bottom: 1px solid #E6E9F4;
+}
+
+.board-table th {
+  background-color: #fff;
+  font-size: 14px;
+  font-weight: 400;
+  color: #5A607F;
+}
+
+input[type="checkbox"]{
+  display: none;
+}
+input[type="checkbox"] + label{
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  border:1px solid #D7DBEC;
+  position: relative;
+}
+input[id="check"]:checked + label::after{
+  content:'✔';
+  font-size: 15px;
+  width: 20px;
+  height: 20px;
+  text-align: center;
+  position: absolute;
+  left: 0;
+  top:0;
+}
+
+.title {
+  text-align: left;
+  padding-left: 20px !important;
+}
+
+.action-bundle {
+  width: 200px;
+}
+
+.action-btn {
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+  margin-right: 5px;
+}
+
+.edit-icon {
+  width: 40px;
+  height: 40px;
+  display: block;
+  background-image: url("@/assets/icon/boardIcon/boardEdit.svg");
+}
+.delete-icon {
+  width: 40px;
+  height: 40px;
+  display: block;
+  background-image: url("@/assets/icon/boardIcon/boardDelete.svg");
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/view/board/component/DateComment.vue b/frontend/src/view/board/component/DateComment.vue
new file mode 100644
index 00000000..5f3d2714
--- /dev/null
+++ b/frontend/src/view/board/component/DateComment.vue
@@ -0,0 +1,53 @@
+<script setup>
+import { computed, defineProps } from 'vue';
+
+const props = defineProps({
+  date: String,
+  comments: Number
+});
+
+const formattedDate = computed(() => {
+  return props.date;
+});
+</script>
+
+<template>
+  <div class="date-comment">
+    <span class="date">{{ formattedDate }}</span>
+    <div class="comments">
+      <i class="comment-icon"></i>
+      <span class="comment-count">{{ comments }}</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.date-comment {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  justify-content: space-between;
+  margin-top: 20px;
+  padding: 0 10px;
+}
+
+.date {
+  margin-right: 10px;
+}
+
+.comments {
+  display: flex;
+  align-items: center;
+}
+
+.comment-icon {
+  background-image: url("@/assets/icon/boardIcon/boardComment.svg");
+  width: 24px;
+  height: 24px;
+  margin-right: 5px;
+}
+
+.comment-count {
+  font-size: 14px;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/view/board/create/BoardCreate.vue b/frontend/src/view/board/component/PostComment.vue
similarity index 67%
rename from frontend/src/view/board/create/BoardCreate.vue
rename to frontend/src/view/board/component/PostComment.vue
index 7498dc4c..f79cdd81 100644
--- a/frontend/src/view/board/create/BoardCreate.vue
+++ b/frontend/src/view/board/component/PostComment.vue
@@ -3,9 +3,7 @@
 </script>
 
 <template>
-<div>
-  <h1>BoardCreate</h1>
-</div>
+
 </template>
 
 <style scoped>
diff --git a/frontend/src/view/board/create/QACreate.vue b/frontend/src/view/board/create/QACreate.vue
index e3078932..3839e340 100644
--- a/frontend/src/view/board/create/QACreate.vue
+++ b/frontend/src/view/board/create/QACreate.vue
@@ -1,13 +1,131 @@
 <script setup>
+import {inject} from "vue";
+import QuillEditor from "@/common/component/Editor/QuillEditor.vue";
 
+const contentsTitle = inject('contentsTitle');
+const contentsDescription = inject('contentsDescription');
+
+contentsTitle.value = 'QA 게시글 만들기';
+contentsDescription.value = 'QA 게시글을 만들어 보세요!';
 </script>
 
 <template>
-<div>
-  <h1>QACreate</h1>
+  <div class="qa-detail-container">
+    <div class="qa-note-container">
+      <div class="qa-input-wrap">
+        <div class="qa-title-container">
+        <span class="column">
+          <i class="qa-title column-icon"></i>
+          게시글 제목
+        </span>
+          <input  class="title-editor" placeholder="게시글 제목" />
+        </div>
+        <!--      설명 추가하기-->
+        <div class="language-section">
+        <span class="column">
+          <i class="languages column-icon"></i>
+          설명 추가하기
+        </span>
+          <input class="language-editor" placeholder="언어" />
+        </div>
+    <QuillEditor/>
+  </div>
+</div>
+    <button class="save-button">저장하기</button>
 </div>
 </template>
 
 <style scoped>
+.qa-detail-container{
+  padding: 30px;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 100%;
+  height: 100%;
+  justify-content: space-between;
+  box-sizing: border-box;
+}
+
+.qa-note-container {
+  //padding: 30px;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 100%;
+  height: 100%;
+  justify-content: space-between;
+  box-sizing: border-box;
+  //height: 100%;
+  //overflow-y: auto;
+  //display: flex;
+  //flex-direction: column-reverse;
+}
+
+.qa-input-wrap{
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.qa-title-container{
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
+
+.qa-title{
+  background-image: url("@/assets/icon/boardIcon/quillEditor.svg");
+  width: 24px;
+  height: 24px;
+  margin-right: 5px;
+}
+
+.title-editor {
+  width: 100%;
+  height: 2rem;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  padding: 0 10px;
+}
+
+.column{
+  display: flex;
+  align-items: center;
+  width: 10rem;
+  gap: 10px;
+}
+
+.languages{
+  background-image: url("@/assets/icon/boardIcon/quillDescription.svg");
+  width: 24px;
+  height: 24px;
+  margin-right: 5px;
+}
+
+.language-section{
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
+
+.language-editor {
+  width: 100%;
+  height: 2rem;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  padding: 0 10px;
+}
 
+.save-button {
+  background-color: #e0e8ff;
+  color: #666daf;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  //margin-top: 20px;
+  width: 150px;
+  margin-left: auto;
+}
 </style>
\ No newline at end of file
diff --git a/frontend/src/view/board/detail/BoardDetail.vue b/frontend/src/view/board/detail/BoardDetail.vue
deleted file mode 100644
index 7498dc4c..00000000
--- a/frontend/src/view/board/detail/BoardDetail.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<script setup>
-
-</script>
-
-<template>
-<div>
-  <h1>BoardCreate</h1>
-</div>
-</template>
-
-<style scoped>
-
-</style>
\ No newline at end of file
diff --git a/frontend/src/view/board/detail/QADetail.vue b/frontend/src/view/board/detail/QADetail.vue
index 97cdd4fd..adff2c8d 100644
--- a/frontend/src/view/board/detail/QADetail.vue
+++ b/frontend/src/view/board/detail/QADetail.vue
@@ -1,13 +1,37 @@
 <script setup>
+import BoardDetail from "@/view/board/component/BoardDetail.vue";
+import {inject} from "vue";
+import DateComment from "@/view/board/component/DateComment.vue";
 
+const contentsTitle = inject('contentsTitle');
+const contentsDescription = inject('contentsDescription');
+
+contentsTitle.value = 'QA 상세 보기';
+contentsDescription.value = 'QA를 확인하세요!';
 </script>
 
 <template>
-<div>
-  <h1>QADetail</h1>
-</div>
+  <div class="qa-detail-container">
+    <BoardDetail
+        title="프론트엔드 오류"
+        status="Done"
+        subheading="필터링 후 선택 기능 오류"
+        :descriptionList="[
+      '사용자가 검색할 때, 필터를 통해 검색한 내용을 거른 후 검색할 수 있어야 합니다.',
+      '셀렉트 박스를 통해 필터를 누르고 나면, 하위 아이템들이 필터 된 것들로 제공되어야 합니다.'
+    ]"
+        owner="최승은"
+    />
+    <DateComment
+        date="Aug 19, 2021"
+        :comments="3"
+    />
+  </div>
+
 </template>
 
 <style scoped>
-
+.qa-detail-container{
+  padding: 30px;
+}
 </style>
\ No newline at end of file
diff --git a/frontend/src/view/board/list/BoardList.vue b/frontend/src/view/board/list/BoardList.vue
deleted file mode 100644
index 021b034a..00000000
--- a/frontend/src/view/board/list/BoardList.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<script setup>
-
-</script>
-
-<template>
-  <div>
-    <h1>BoardList</h1>
-  </div>
-</template>
-
-<style scoped>
-
-</style>
\ No newline at end of file
diff --git a/frontend/src/view/board/list/QAList.vue b/frontend/src/view/board/list/QAList.vue
index e5931e0d..ed726a1e 100644
--- a/frontend/src/view/board/list/QAList.vue
+++ b/frontend/src/view/board/list/QAList.vue
@@ -1,10 +1,71 @@
 <script setup>
+import {computed, inject, ref} from 'vue';
+import { qaListData } from "@/static/qaListData";
+import { workspaceData } from "@/static/workspaceData";
+import Pagination from '@/common/component/PaginationComponent.vue';
+import BoardList from "@/view/board/component/BoardList.vue";
+import SearchComponent from "@/common/component/SearchComponent.vue";
+import {useRoute} from "vue-router";
 
+const route = useRoute();
+const workspaceId = route.params.workspaceId;
+const workspace = computed(() => workspaceData.find(ws => ws.workspaceId === workspaceId));
+
+const contentsTitle = inject('contentsTitle');
+const contentsDescription = inject('contentsDescription');
+
+contentsTitle.value = workspace.value ? `${workspace.value.workspaceName} QA Board List` : 'QA Board List';
+contentsDescription.value = 'QA 목록을 확인하세요!';
+
+const currentPage = ref(1);
+const itemsPerPage = 10;
+
+const totalPages = computed(() => Math.ceil((qaListData.value?.length || 0) / itemsPerPage));
+
+// const paginatedQaListData = computed(() => {
+//   const start = (currentPage.value - 1) * itemsPerPage;
+//   const end = start + itemsPerPage;
+//   return qaListData.value ? qaListData.value.slice(start, end) : [];
+// });
+
+const prevPage = () => {
+  if (currentPage.value > 1) {
+    currentPage.value--;
+  }
+};
+
+const nextPage = () => {
+  if (currentPage.value < totalPages.value) {
+    currentPage.value++;
+  }
+};
+
+const goToPage = (page) => {
+  currentPage.value = page;
+};
+
+const editItem = (item) => {
+  console.log('Editing:', item);
+};
+
+const deleteItem = (item) => {
+  console.log('Deleting:', item);
+};
 </script>
 
 <template>
-  <div>
-    <h1>QAList</h1>
+  <div class="board-list-container">
+    <div class="header">
+      <SearchComponent :link="`/workspace/${workspaceId}/scrum/board/qa/create`" />
+    </div>
+    <BoardList :items="qaListData" thcolumn="상태" column="state" board-type="qa" @edit-item="editItem" @delete-item="deleteItem" />
+    <Pagination
+        :currentPage="currentPage"
+        :totalPages="totalPages"
+        @prev-page="prevPage"
+        @next-page="nextPage"
+        @go-to-page="goToPage"
+    />
   </div>
 </template>
 
diff --git a/frontend/src/view/chat/ChatInitialPage 2.vue b/frontend/src/view/chat/ChatInitialPage 2.vue
new file mode 100644
index 00000000..337ebffe
--- /dev/null
+++ b/frontend/src/view/chat/ChatInitialPage 2.vue	
@@ -0,0 +1,29 @@
+<script setup>
+import ChatComponent from "@/view/chat/component/ChatComponent.vue";
+import ChatRoomList from "@/view/chat/component/ChatRoomList.vue";
+import FileList from "@/view/chat/component/FileList.vue";
+
+</script>
+
+<template>
+  <div class="chat-room">
+    <ChatComponent />
+    <div class="chat-sidebar">
+      <ChatRoomList/>
+      <FileList/>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.chat-room{
+  display: flex;
+}
+.chat-sidebar {
+  display: flex;
+  flex-direction: column;
+  width: 370px;
+  height: calc(100vh - 60px);
+  border-left: 1px solid #e0e0e0;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/view/chat/ChatRoomPage 2.vue b/frontend/src/view/chat/ChatRoomPage 2.vue
new file mode 100644
index 00000000..f1c6f39a
--- /dev/null
+++ b/frontend/src/view/chat/ChatRoomPage 2.vue	
@@ -0,0 +1,28 @@
+<script setup>
+import ChatRoomComponent from "@/view/chat/component/ChatRoomComponent.vue";
+import ChatRoomList from "@/view/chat/component/ChatRoomList.vue";
+import FileList from "@/view/chat/component/FileList.vue";
+</script>
+
+<template>
+  <div class="chat-room">
+    <ChatRoomComponent />
+    <div class="chat-sidebar">
+      <ChatRoomList/>
+      <FileList/>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.chat-room{
+  display: flex;
+}
+.chat-sidebar {
+  display: flex;
+  flex-direction: column;
+  width: 370px;
+  height: calc(100vh - 60px);
+  border-left: 1px solid #e0e0e0;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/view/chat/component/ChatComponent 2.vue b/frontend/src/view/chat/component/ChatComponent 2.vue
new file mode 100644
index 00000000..e6e01529
--- /dev/null
+++ b/frontend/src/view/chat/component/ChatComponent 2.vue	
@@ -0,0 +1,113 @@
+<script setup>
+import { ref } from 'vue';
+import chatNoData from '@/assets/img/chatNoData.svg';
+import FriendsModal from './FriendsModal.vue';
+
+const showModal = ref(false);
+
+const openModal = () => {
+  showModal.value = true;
+};
+
+const closeModal = () => {
+  showModal.value = false;
+};
+</script>
+
+<template>
+  <div class="chat-container">
+    <div class="chat-messages">
+      <div class="chat-msg-container">
+        <img :src="chatNoData" class="nodata-svg" alt="no Data">
+        <div class="nodata-info">
+          <p>채팅을 시작해보세요</p>
+          <button @click="openModal" class="open-btn">채팅방 추가</button>
+        </div>
+
+      </div>
+    </div>
+    <FriendsModal v-if="showModal" @close="closeModal"/>
+  </div>
+</template>
+
+<style scoped>
+.chat-container {
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - 60px);
+  width: 100%;
+  position: relative;
+}
+
+.chat-messages {
+  overflow-y: auto;
+  padding: 10px;
+  height: 100%;
+  //margin-top: 60px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.chat-msg-container{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+  p{
+    font-weight: 500;
+    font-size: 20px;
+    color: #28303F;
+  }
+}
+
+.nodata-svg{
+  width: 200px;
+  height: 200px;
+  margin: 0 auto;
+}
+
+.nodata-info{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: absolute;
+  bottom: -50px;
+}
+
+.chat-input input {
+  flex-grow: 1;
+  border: none;
+  padding: 10px;
+  border-radius: 20px;
+  background-color: #f1f1f1;
+}
+
+.chat-input input:focus {
+  outline: none;
+}
+
+.chat-input button {
+  margin-left: 10px;
+  background-color: #fff;
+  border: none;
+  cursor: pointer;
+}
+
+.chat-input button:disabled {
+  background-color: #ccc;
+  color: #909090;
+}
+
+.open-btn {
+  background-color: #C6D2FD;
+  //font-size: 24px;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 20px;
+  cursor: pointer;
+  color: #28303F;
+  margin-top: 10px;
+  font-weight: 500;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/view/chat/component/ChatMessage 2.vue b/frontend/src/view/chat/component/ChatMessage 2.vue
new file mode 100644
index 00000000..6be01000
--- /dev/null
+++ b/frontend/src/view/chat/component/ChatMessage 2.vue	
@@ -0,0 +1,78 @@
+<script setup>
+import space6 from '@/assets/icon/persona/space6.svg';
+import { defineProps } from 'vue';
+import { chat } from '@/static/chatData';
+// import { ref } from "vue";
+
+const message= chat.filter((item) => item.messageType === 'TEXT');
+
+defineProps({
+  // message: {
+  //   type: Object,
+  //   required: true,
+  // },
+  isOwnMessage: {
+    type: Boolean,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div :class="['message-container', isOwnMessage ? 'own' : '']">
+    <img v-if="!isOwnMessage" class="profile-pic" :src="space6" alt="profile"/>
+    <div class="message-content">
+      <div class="message-bubble">
+        <p>{{ message.messageContents || 'No message' }}</p>
+      </div>
+      <span class="timestamp">{{ message.createdAt || 'No time' }}</span>
+    </div>
+    <img v-if="isOwnMessage" class="profile-pic" :src="space6" alt="profile"/>
+  </div>
+</template>
+
+<style scoped>
+.message-container {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 15px;
+}
+
+.own {
+  flex-direction: row-reverse;
+  img{
+    display: none;
+  }
+}
+
+.profile-pic {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  margin: 0 10px;
+}
+
+.message-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.message-bubble {
+  background-color: #f1f1f1;
+  padding: 10px;
+  border-radius: 20px;
+  max-width: 250px;
+}
+
+.own .message-bubble {
+  background-color: #4a90e2;
+  color: white;
+}
+
+.timestamp {
+  font-size: 12px;
+  color: #888;
+  margin-top: 5px;
+  align-self: flex-end;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/view/chat/component/ChatRoomComponent 2.vue b/frontend/src/view/chat/component/ChatRoomComponent 2.vue
new file mode 100644
index 00000000..0e671495
--- /dev/null
+++ b/frontend/src/view/chat/component/ChatRoomComponent 2.vue	
@@ -0,0 +1,131 @@
+<script setup>
+import {ref} from 'vue';
+import {useChatMessageStore} from '@/store/socket/chat/useChatMessageStore';
+import Message from './ChatMessage.vue';
+import space3 from '@/assets/icon/persona/space3.svg';
+import clip from '@/assets/icon/chatIcon/clip.svg';
+import send from '@/assets/icon/chatIcon/sendIcon.svg';
+
+const newMessage = ref('');
+const chatStore = useChatMessageStore();
+
+const fileInput = ref(null);
+
+const triggerFileInput = () => {
+  fileInput.value.click();
+};
+</script>
+
+<template>
+  <div class="chat-container">
+    <div class="chat-header">
+      <img :src="space3" alt="img">
+      <p>{{ chatPartner }}</p>
+    </div>
+
+    <div class="chat-messages">
+      <div class="chat-msg-container">
+        <Message
+            v-for="(message) in chatStore.messages"
+            :key="message.id"
+            :message="message.content"
+            :isOwnMessage="message.isOwn"
+        />
+      </div>
+    </div>
+
+    <div class="chat-input">
+      <div>
+        <input ref="fileInput" type="file" style="display: none;"/>
+        <img :src="clip" alt="clip" @click="triggerFileInput">
+      </div>
+      <input v-model="newMessage" type="text" placeholder="Type a message" @keyup.enter="sendMessage"/>
+      <button @click="sendMessage">
+        <img :src="send" alt="send">
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.chat-container {
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - 60px);
+  width: 100%;
+  position: relative;
+}
+
+.chat-header {
+  background-color: #f5f6f9;
+  padding: 10px;
+  text-align: center;
+  font-size: 20px;
+  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.15);
+  position: sticky;
+  width: 100%;
+  z-index: 10;
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  box-sizing: border-box;
+
+  img {
+    width: 40px;
+    height: 40px;
+  }
+
+  h2 {
+    font-size: 20px;
+  }
+}
+
+.chat-messages {
+  overflow-y: auto;
+  padding: 10px;
+  height: 100%;
+  flex-direction: column-reverse;
+  display: flex;
+}
+
+.chat-msg-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.chat-input {
+  display: flex;
+  border-top: 1px solid #ddd;
+  padding: 10px;
+  background-color: #fff;
+  position: sticky;
+  bottom: 0;
+  width: 100%;
+  box-sizing: border-box;
+  height: 50px;
+}
+
+.chat-input input {
+  flex-grow: 1;
+  border: none;
+  padding: 10px;
+  border-radius: 20px;
+  background-color: #f1f1f1;
+}
+
+.chat-input input:focus {
+  outline: none;
+}
+
+.chat-input button {
+  margin-left: 10px;
+  background-color: #fff;
+  border: none;
+  cursor: pointer;
+}
+
+.chat-input button:disabled {
+  background-color: #ccc;
+  color: #909090;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/view/scrum/Task/TaskTemplate 2.vue b/frontend/src/view/scrum/Task/TaskTemplate 2.vue
new file mode 100644
index 00000000..478b7313
--- /dev/null
+++ b/frontend/src/view/scrum/Task/TaskTemplate 2.vue	
@@ -0,0 +1,15 @@
+<script setup>
+import TaskViewBar from "@/view/scrum/Task/component/TaskViewBar.vue";
+</script>
+
+<template>
+  <div>
+    <TaskViewBar/>
+    <router-view />
+  </div>
+
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/src/view/scrum/Task/component/AvatarGroup 2.vue b/frontend/src/view/scrum/Task/component/AvatarGroup 2.vue
new file mode 100644
index 00000000..2b80fc18
--- /dev/null
+++ b/frontend/src/view/scrum/Task/component/AvatarGroup 2.vue	
@@ -0,0 +1,31 @@
+<script setup>
+import { defineProps } from 'vue';
+
+defineProps({
+  avatars: {
+    type: Array,
+    required: true
+  }
+});
+</script>
+
+<template>
+  <div class="task-avatars">
+    <img v-for="(avatar, index) in avatars" :key="index" :src="avatar" class="avatar" alt="Avatar" />
+  </div>
+</template>
+
+<style scoped>
+.task-avatars {
+  display: flex;
+  margin-right: 10px;
+}
+
+.avatar {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  margin-left: -10px;
+  border: 2px solid #fff;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/view/scrum/Task/component/TaskViewBar 2.vue b/frontend/src/view/scrum/Task/component/TaskViewBar 2.vue
new file mode 100644
index 00000000..c6dbc126
--- /dev/null
+++ b/frontend/src/view/scrum/Task/component/TaskViewBar 2.vue	
@@ -0,0 +1,182 @@
+<script setup>
+import { ref, watch } from 'vue';
+import {useRoute, useRouter} from 'vue-router';
+
+const route = useRoute();
+const router = useRouter();
+const showAvatarGroup = ref(true);
+
+watch(
+    () => route.path,
+    (newPath) => {
+      showAvatarGroup.value = !newPath.startsWith('/my');
+    },
+    { immediate: true}
+)
+
+import user1 from '@/assets/icon/persona/user1.svg';
+import user2 from '@/assets/icon/persona/user2.svg';
+import user3 from '@/assets/icon/persona/user3.svg';
+import user4 from '@/assets/icon/persona/user4.svg';
+
+const currentView = ref('board');
+const avatars = ref([
+  { src: user1, alt: 'User 1' },
+  { src: user2, alt: 'User 2' },
+  { src: user3, alt: 'User 3' },
+  { src: user4, alt: 'User 4' }
+]);
+
+const setView = (view) => {
+  currentView.value = view;
+  const basePath = route.path.split('/').slice(0, -1).join('/');
+  router.push(`${basePath}/${view}`);
+};
+
+const to = ref('kanban');
+</script>
+
+<template>
+  <div class="view-toggle-bar">
+    <div class="view-toggle-buttons">
+      <router-link
+          :to="to.startsWith('my') ? `/my/task/${currentView}` : to.startsWith('workspace') ? `/workspace/scrum/task/${currentView}` : to"
+          :class="{ active: currentView === 'kanban' }"
+          @click="setView('kanban')"
+      >
+        <i class="icon-kanban"></i>
+        Kanban
+      </router-link>
+      <div class="v-line"/>
+      <router-link
+          :to="to.startsWith('my') ? `/my/task/${currentView}` : to.startsWith('workspace') ? `/workspace/task/${currentView}` : to"
+          :class="{ active: currentView === 'list' }" @click="setView('list')">
+        <i class="icon-list"></i>
+        List
+      </router-link>
+      <div class="v-line"/>
+      <router-link
+          :to="to.startsWith('my') ? `/my/task/${currentView}` : to.startsWith('workspace') ? `/workspace/task/${currentView}` : to"
+          :class="{ active: currentView === 'timeline' }" @click="setView('timeline')">
+        <i class="icon-timeline"></i>
+        TimeLine
+      </router-link>
+    </div>
+
+    <div v-if="showAvatarGroup" class="avatar-group">
+      <img v-for="(avatar, index) in avatars" :key="index" :src="avatar.src" :alt="avatar.alt" class="avatar" />
+      <button class="add-avatar-btn">+</button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+i{
+  width: 24px;
+  display: block;
+  height: 24px;
+}
+a{
+  display: flex;
+  text-decoration: none;
+  //padding: 10px;
+  color: #28303F;
+  border-radius: 4px;
+  margin: 5px 10px;
+  padding: 5px;
+  &:hover, &:focus{
+    background-color: #C6D2FD;
+  }
+}
+.icon-kanban{
+  background-image: url("@/assets/icon/menu/kanban.svg");
+}
+.icon-list{
+  background-image: url("@/assets/icon/menu/list.svg");
+}
+.icon-timeline{
+  background-image: url("@/assets/icon/menu/timeline.svg");
+}
+.view-toggle-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  //padding: 10px;
+  margin: 10px 30px;
+}
+
+.view-toggle-buttons {
+  display: flex;
+  align-items: center;
+  //border: 1px solid #cccccc;
+  background-color: #F3F6FF;
+  border-radius: 4px;
+  margin-top: 10px;
+}
+
+.view-toggle-buttons button {
+  background: none;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  padding: 10px 20px;
+  margin-right: 10px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+}
+
+.view-toggle-buttons button.active {
+  background-color: #e0f7fa;
+  border-color: #00bcd4;
+}
+
+.view-toggle-buttons i {
+  margin-right: 8px;
+}
+
+.avatar-group {
+  display: flex;
+  align-items: center;
+}
+
+.avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  margin-left: -10px;
+  border: 2px solid white;
+}
+
+.more-avatars {
+  background-color: #f0f0f0;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-left: -10px;
+  font-size: 14px;
+}
+
+.add-avatar-btn {
+  background-color: transparent;
+  border: 2px solid #e0e0e0;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-left: 10px;
+  cursor: pointer;
+  color: #00bcd4;
+  font-size: 24px;
+}
+
+.v-line {
+  border-left : 1px solid #93AAFD;
+  height : 24px;
+  margin: 0 10px;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/view/scrum/Task/kanban/component/KanbanCard 3.vue b/frontend/src/view/scrum/Task/kanban/component/KanbanCard 3.vue
new file mode 100644
index 00000000..643e01bd
--- /dev/null
+++ b/frontend/src/view/scrum/Task/kanban/component/KanbanCard 3.vue	
@@ -0,0 +1,74 @@
+<script setup>
+import { defineProps } from 'vue';
+
+defineProps({
+  task: {
+    type: Object,
+    required: true
+  }
+});
+</script>
+
+<template>
+  <div class="task-card">
+    <p>{{ task.title }}</p>
+    <div class="labels">
+      <span v-for="label in task.labels" :key="label" class="label">{{ label }}</span>
+    </div>
+    <div class="task-footer">
+      <div class="avatars">
+        <img v-for="avatar in task.avatars" :key="avatar" :src="avatar" class="avatar" alt="users"/>
+      </div>
+      <span class="due-date">{{ task.dueDate }}</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.task-card {
+  background-color: #F7F8FA;
+  border-radius: 8px;
+  padding: 15px;
+  margin-bottom: 15px;
+}
+
+p {
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.labels {
+  margin: 10px 0;
+}
+
+.label {
+  background-color: #e0f7fa;
+  padding: 5px 10px;
+  border-radius: 20px;
+  margin-right: 5px;
+  font-size: 12px;
+  color: #28303F;
+}
+
+.task-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.avatars {
+  display: flex;
+  align-items: center;
+}
+
+.avatar {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  margin-right: 5px;
+}
+
+.due-date {
+  font-size: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/view/scrum/Task/kanban/component/KanbanCard 4.vue b/frontend/src/view/scrum/Task/kanban/component/KanbanCard 4.vue
new file mode 100644
index 00000000..643e01bd
--- /dev/null
+++ b/frontend/src/view/scrum/Task/kanban/component/KanbanCard 4.vue	
@@ -0,0 +1,74 @@
+<script setup>
+import { defineProps } from 'vue';
+
+defineProps({
+  task: {
+    type: Object,
+    required: true
+  }
+});
+</script>
+
+<template>
+  <div class="task-card">
+    <p>{{ task.title }}</p>
+    <div class="labels">
+      <span v-for="label in task.labels" :key="label" class="label">{{ label }}</span>
+    </div>
+    <div class="task-footer">
+      <div class="avatars">
+        <img v-for="avatar in task.avatars" :key="avatar" :src="avatar" class="avatar" alt="users"/>
+      </div>
+      <span class="due-date">{{ task.dueDate }}</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.task-card {
+  background-color: #F7F8FA;
+  border-radius: 8px;
+  padding: 15px;
+  margin-bottom: 15px;
+}
+
+p {
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.labels {
+  margin: 10px 0;
+}
+
+.label {
+  background-color: #e0f7fa;
+  padding: 5px 10px;
+  border-radius: 20px;
+  margin-right: 5px;
+  font-size: 12px;
+  color: #28303F;
+}
+
+.task-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.avatars {
+  display: flex;
+  align-items: center;
+}
+
+.avatar {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  margin-right: 5px;
+}
+
+.due-date {
+  font-size: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/view/scrum/Task/kanban/component/KanbanColumn 3.vue b/frontend/src/view/scrum/Task/kanban/component/KanbanColumn 3.vue
new file mode 100644
index 00000000..ad54b959
--- /dev/null
+++ b/frontend/src/view/scrum/Task/kanban/component/KanbanColumn 3.vue	
@@ -0,0 +1,103 @@
+<script setup>
+import { computed, defineProps, ref, watch } from 'vue';
+import { VueDraggableNext } from 'vue-draggable-next';
+import TaskCard from './KanbanCard.vue';
+
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true
+  }
+});``
+
+const getTaskCountBackgroundColor = (status) => {
+  if (status === 'No Status') return 'rgba(234, 179, 8, 0.1)';
+  else if (status === 'To Do') return 'rgba(236, 72, 153, 0.1)';
+  else if (status === 'In Progress') return 'rgba(168, 85, 247, 0.1)';
+  else return 'rgba(34, 197, 94, 0.1)';
+}
+const getTaskCountColor = (status) => {
+  if (status === 'No Status') return 'rgba(234, 179, 8)';
+  else if (status === 'To Do') return 'rgba(236, 72, 153)';
+  else if (status === 'In Progress') return 'rgba(168, 85, 247)';
+  else return 'rgba(34, 197, 94)';
+}
+
+const taskCountBgStyle = computed(() => {
+  return getTaskCountBackgroundColor(props.data.status);
+});
+
+const taskCountColorStyle = computed(() => {
+  return getTaskCountColor(props.data.status);
+});
+
+const tasks = ref([...props.data.tasks]);
+
+watch(() => props.data.tasks, (newTasks) => {
+  tasks.value = [...newTasks];
+});
+</script>
+
+<template>
+  <div class="task-column">
+    <div class="column-header">
+      <p>{{ data.status }}</p>
+      <span class="task-count" :style="{ backgroundColor: taskCountBgStyle, color: taskCountColorStyle }">{{ data.tasks.length }}</span>
+    </div>
+    <VueDraggableNext :list="tasks" item-key="id" group="tasks" draggable=".task-card" handle=".task-card">
+      <TaskCard v-for="(task) in tasks" :key="task.id" :task="task"/>
+    </VueDraggableNext>
+    <div class="add-task-card">
+      <span class="plus">+</span> <span class="add-text">Add Task</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.task-column {
+  width: 100%;
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 10px;
+}
+
+.column-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0 0 10px 5px;
+}
+
+p {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.task-count {
+  padding: 0 10px;
+  border-radius: 30px;
+}
+
+.add-task-card {
+  background-color: #F7F8FA;
+  border-radius: 8px;
+  padding: 10px;
+  margin-bottom: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+}
+
+.plus {
+  font-weight: bold;
+  background-color: #C7CED9;
+  color: #fff;
+  padding: 0 7px;
+  border-radius: 50%;
+}
+
+.add-text {
+  font-size: 12px;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/view/scrum/Task/kanban/component/KanbanColumn 4.vue b/frontend/src/view/scrum/Task/kanban/component/KanbanColumn 4.vue
new file mode 100644
index 00000000..8fcf2334
--- /dev/null
+++ b/frontend/src/view/scrum/Task/kanban/component/KanbanColumn 4.vue	
@@ -0,0 +1,103 @@
+<script setup>
+import { computed, defineProps, ref, watch } from 'vue';
+import { VueDraggableNext } from 'vue-draggable-next';
+import TaskCard from './KanbanCard.vue';
+
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true
+  }
+});``
+
+const getTaskCountBackgroundColor = (status) => {
+  if (status === 'No Status') return 'rgba(234, 179, 8, 0.1)';
+  else if (status === 'To Do') return 'rgba(236, 72, 153, 0.1)';
+  else if (status === 'In Progress') return 'rgba(168, 85, 247, 0.1)';
+  else return 'rgba(34, 197, 94, 0.1)';
+}
+const getTaskCountColor = (status) => {
+  if (status === 'No Status') return 'rgba(234, 179, 8)';
+  else if (status === 'To Do') return 'rgba(236, 72, 153)';
+  else if (status === 'In Progress') return 'rgba(168, 85, 247)';
+  else return 'rgba(34, 197, 94)';
+}
+
+const taskCountBgStyle = computed(() => {
+  return getTaskCountBackgroundColor(props.data.status);
+});
+
+const taskCountColorStyle = computed(() => {
+  return getTaskCountColor(props.data.status);
+});
+
+const tasks = ref([...props.data.tasks]);
+
+watch(() => props.data.tasks, (newTasks) => {
+  tasks.value = [...newTasks];
+});
+</script>
+
+<template>
+  <div class="task-column">
+    <div class="column-header">
+      <p>{{ data.status }}</p>
+      <span class="task-count" :style="{ backgroundColor: taskCountBgStyle, color: taskCountColorStyle }">{{ tasks.length }}</span>
+    </div>
+    <VueDraggableNext :list="tasks" item-key="id" group="tasks" draggable=".task-card" handle=".task-card">
+      <TaskCard v-for="(task) in tasks" :key="task.id" :task="task"/>
+    </VueDraggableNext>
+    <div class="add-task-card">
+      <span class="plus">+</span> <span class="add-text">Add Task</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.task-column {
+  width: 100%;
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 10px;
+}
+
+.column-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0 0 10px 5px;
+}
+
+p {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.task-count {
+  padding: 0 10px;
+  border-radius: 30px;
+}
+
+.add-task-card {
+  background-color: #F7F8FA;
+  border-radius: 8px;
+  padding: 10px;
+  margin-bottom: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+}
+
+.plus {
+  font-weight: bold;
+  background-color: #C7CED9;
+  color: #fff;
+  padding: 0 7px;
+  border-radius: 50%;
+}
+
+.add-text {
+  font-size: 12px;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/view/scrum/Task/list/component/ListContainer 3.vue b/frontend/src/view/scrum/Task/list/component/ListContainer 3.vue
new file mode 100644
index 00000000..33764c4b
--- /dev/null
+++ b/frontend/src/view/scrum/Task/list/component/ListContainer 3.vue	
@@ -0,0 +1,86 @@
+<script setup>
+import ListItem from './ListItem.vue';
+import { computed, defineProps, ref, watch } from 'vue';
+import { VueDraggableNext } from 'vue-draggable-next';
+
+const props = defineProps({
+  data: {
+    type: Array,
+    required: true
+  }
+});
+
+const getTaskCountBackgroundColor = (status) => {
+  if (status === 'No Status') return 'rgba(234, 179, 8, 0.1)';
+  else if (status === 'To Do') return 'rgba(236, 72, 153, 0.1)';
+  else if (status === 'In Progress') return 'rgba(168, 85, 247, 0.1)';
+  else return 'rgba(34, 197, 94, 0.1)';
+}
+const getTaskCountColor = (status) => {
+  if (status === 'No Status') return 'rgba(234, 179, 8)';
+  else if (status === 'To Do') return 'rgba(236, 72, 153)';
+  else if (status === 'In Progress') return 'rgba(168, 85, 247)';
+  else return 'rgba(34, 197, 94)';
+}
+
+const taskCountBgStyle = computed(() => {
+  return getTaskCountBackgroundColor(props.data.status);
+});
+
+const taskCountColorStyle = computed(() => {
+  return getTaskCountColor(props.data.status);
+});
+
+const tasks = ref([...props.data.tasks]);
+
+watch(() => props.data.tasks, (newTasks) => {
+  tasks.value = [...newTasks];
+});
+</script>
+
+<template>
+  <div class="task-column">
+    <div class="column-header">
+      <div class="column-title">
+        <p>{{ data.status }}</p>
+        <span class="task-count" :style="{ backgroundColor: taskCountBgStyle, color: taskCountColorStyle }">{{ tasks.length }}</span>
+      </div>
+      <div class="add-task-card">
+        <span class="plus">+</span> <span class="add-text">Add Task</span>
+      </div>
+    </div>
+    <VueDraggableNext :list="tasks" item-key="id" group="tasks" draggable=".task-card" handle=".task-card">
+      <ListItem v-for="(task) in tasks" :key="task.id" :task="task"/>
+    </VueDraggableNext>
+  </div>
+</template>
+
+<style scoped>
+.task-column {
+  background-color: #fff;
+  padding: 20px;
+}
+
+.column-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0 0 10px 5px;
+}
+
+.column-title{
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+p {
+font-size: 14px;
+font-weight: 500;
+}
+
+.task-count {
+  padding: 0 10px;
+  border-radius: 30px;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/view/scrum/Task/list/component/ListContainer 4.vue b/frontend/src/view/scrum/Task/list/component/ListContainer 4.vue
new file mode 100644
index 00000000..33764c4b
--- /dev/null
+++ b/frontend/src/view/scrum/Task/list/component/ListContainer 4.vue	
@@ -0,0 +1,86 @@
+<script setup>
+import ListItem from './ListItem.vue';
+import { computed, defineProps, ref, watch } from 'vue';
+import { VueDraggableNext } from 'vue-draggable-next';
+
+const props = defineProps({
+  data: {
+    type: Array,
+    required: true
+  }
+});
+
+const getTaskCountBackgroundColor = (status) => {
+  if (status === 'No Status') return 'rgba(234, 179, 8, 0.1)';
+  else if (status === 'To Do') return 'rgba(236, 72, 153, 0.1)';
+  else if (status === 'In Progress') return 'rgba(168, 85, 247, 0.1)';
+  else return 'rgba(34, 197, 94, 0.1)';
+}
+const getTaskCountColor = (status) => {
+  if (status === 'No Status') return 'rgba(234, 179, 8)';
+  else if (status === 'To Do') return 'rgba(236, 72, 153)';
+  else if (status === 'In Progress') return 'rgba(168, 85, 247)';
+  else return 'rgba(34, 197, 94)';
+}
+
+const taskCountBgStyle = computed(() => {
+  return getTaskCountBackgroundColor(props.data.status);
+});
+
+const taskCountColorStyle = computed(() => {
+  return getTaskCountColor(props.data.status);
+});
+
+const tasks = ref([...props.data.tasks]);
+
+watch(() => props.data.tasks, (newTasks) => {
+  tasks.value = [...newTasks];
+});
+</script>
+
+<template>
+  <div class="task-column">
+    <div class="column-header">
+      <div class="column-title">
+        <p>{{ data.status }}</p>
+        <span class="task-count" :style="{ backgroundColor: taskCountBgStyle, color: taskCountColorStyle }">{{ tasks.length }}</span>
+      </div>
+      <div class="add-task-card">
+        <span class="plus">+</span> <span class="add-text">Add Task</span>
+      </div>
+    </div>
+    <VueDraggableNext :list="tasks" item-key="id" group="tasks" draggable=".task-card" handle=".task-card">
+      <ListItem v-for="(task) in tasks" :key="task.id" :task="task"/>
+    </VueDraggableNext>
+  </div>
+</template>
+
+<style scoped>
+.task-column {
+  background-color: #fff;
+  padding: 20px;
+}
+
+.column-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0 0 10px 5px;
+}
+
+.column-title{
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+p {
+font-size: 14px;
+font-weight: 500;
+}
+
+.task-count {
+  padding: 0 10px;
+  border-radius: 30px;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/view/scrum/Task/list/component/ListItem 3.vue b/frontend/src/view/scrum/Task/list/component/ListItem 3.vue
new file mode 100644
index 00000000..d9ced5f2
--- /dev/null
+++ b/frontend/src/view/scrum/Task/list/component/ListItem 3.vue	
@@ -0,0 +1,120 @@
+<script setup>
+import { defineProps } from 'vue';
+
+defineProps({
+  task: {
+    type: Object,
+    required: true
+  }
+});
+</script>
+
+<template>
+  <div class="task-card">
+    <div class="task-content">
+      <div class="task-title">
+        <div class="task-status-indicator"></div>
+        <span>{{ task.title }}</span>
+      </div>
+
+    </div>
+    <div class="list-items">
+      <div class="labels">
+        <span v-for="label in task.labels" :key="label" class="label">{{ label }}</span>
+      </div>
+      <div class="list-item-bundle">
+        <div class="task-meta">
+          <div class="avatars">
+            <img v-for="avatar in task.avatars" :key="avatar" :src="avatar" class="avatar" alt="users"/>
+          </div>
+        </div>
+        <div class="list-item-end">
+          <span class="task-id">{{ task.taskNumber }}</span>
+          <span class="due-date">{{ task.dueDate }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.task-card {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 15px;
+  background-color: #f7f8fa;
+  border-radius: 8px;
+  margin-bottom: 15px;
+}
+
+.task-content {
+  display: flex;
+}
+
+.task-title {
+  display: flex;
+  align-items: center;
+}
+
+.task-status-indicator {
+  width: 10px;
+  height: 10px;
+  background-color: #22c55e;
+  border-radius: 50%;
+  margin-right: 10px;
+}
+
+.labels {
+  background-color: rgba(234, 179, 8, 0.1);
+  color: #f87171;
+  font-size: 12px;
+  padding: 2px 8px;
+  border-radius: 8px;
+  margin-top: 5px;
+}
+
+.task-meta {
+  display: flex;
+  align-items: center;
+}
+
+.task-id {
+  font-size: 14px;
+  color: #6b7280;
+}
+.due-date {
+  font-size: 10px;
+}
+.avatars {
+  display: flex;
+  align-items: center;
+}
+
+.avatar {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  margin-right: 5px;
+}
+
+.list-items{
+  display: flex;
+  justify-content: space-between;
+  width: 70%;
+  align-items: center;
+}
+
+.list-item-bundle{
+  width: 30%;
+  display: flex;
+  justify-content: space-between;
+}
+
+.list-item-end{
+  width: 30%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/view/scrum/Task/list/component/ListItem 4.vue b/frontend/src/view/scrum/Task/list/component/ListItem 4.vue
new file mode 100644
index 00000000..d9ced5f2
--- /dev/null
+++ b/frontend/src/view/scrum/Task/list/component/ListItem 4.vue	
@@ -0,0 +1,120 @@
+<script setup>
+import { defineProps } from 'vue';
+
+defineProps({
+  task: {
+    type: Object,
+    required: true
+  }
+});
+</script>
+
+<template>
+  <div class="task-card">
+    <div class="task-content">
+      <div class="task-title">
+        <div class="task-status-indicator"></div>
+        <span>{{ task.title }}</span>
+      </div>
+
+    </div>
+    <div class="list-items">
+      <div class="labels">
+        <span v-for="label in task.labels" :key="label" class="label">{{ label }}</span>
+      </div>
+      <div class="list-item-bundle">
+        <div class="task-meta">
+          <div class="avatars">
+            <img v-for="avatar in task.avatars" :key="avatar" :src="avatar" class="avatar" alt="users"/>
+          </div>
+        </div>
+        <div class="list-item-end">
+          <span class="task-id">{{ task.taskNumber }}</span>
+          <span class="due-date">{{ task.dueDate }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.task-card {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 15px;
+  background-color: #f7f8fa;
+  border-radius: 8px;
+  margin-bottom: 15px;
+}
+
+.task-content {
+  display: flex;
+}
+
+.task-title {
+  display: flex;
+  align-items: center;
+}
+
+.task-status-indicator {
+  width: 10px;
+  height: 10px;
+  background-color: #22c55e;
+  border-radius: 50%;
+  margin-right: 10px;
+}
+
+.labels {
+  background-color: rgba(234, 179, 8, 0.1);
+  color: #f87171;
+  font-size: 12px;
+  padding: 2px 8px;
+  border-radius: 8px;
+  margin-top: 5px;
+}
+
+.task-meta {
+  display: flex;
+  align-items: center;
+}
+
+.task-id {
+  font-size: 14px;
+  color: #6b7280;
+}
+.due-date {
+  font-size: 10px;
+}
+.avatars {
+  display: flex;
+  align-items: center;
+}
+
+.avatar {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  margin-right: 5px;
+}
+
+.list-items{
+  display: flex;
+  justify-content: space-between;
+  width: 70%;
+  align-items: center;
+}
+
+.list-item-bundle{
+  width: 30%;
+  display: flex;
+  justify-content: space-between;
+}
+
+.list-item-end{
+  width: 30%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/view/scrum/Task/timeline/vue-draggable-resizable 2.css b/frontend/src/view/scrum/Task/timeline/vue-draggable-resizable 2.css
new file mode 100644
index 00000000..e69de29b
diff --git a/frontend/src/view/scrum/meeting/component/MeetingCard 2.vue b/frontend/src/view/scrum/meeting/component/MeetingCard 2.vue
new file mode 100644
index 00000000..71bb9216
--- /dev/null
+++ b/frontend/src/view/scrum/meeting/component/MeetingCard 2.vue	
@@ -0,0 +1,140 @@
+<script setup>
+import { defineProps, computed } from 'vue';
+import {workspaceData} from "@/static/workspaceData";
+const props = defineProps({
+  id: Number,
+  title: String,
+  label: String,
+  contents: String,
+  participants: Array,
+  startDate: String
+});
+
+const labelClass = computed(() => {
+  if (props.label === 'Front') return 'label-Front';
+  if (props.label === 'Backend') return 'label-Backend';
+  if (props.label === 'Design') return 'label-design';
+  if (props.label === 'DB') return 'label-DB';
+  return 'label-default';
+});
+</script>
+
+<template>
+  <router-link :to="`/workspace/${workspaceData.workspaceId}/scrum/meeting/detail/${props.id}`" class="card">
+    <div class="card-header">
+      <p class="card-title">{{ title }}</p>
+      <span :class="labelClass">{{ label }}</span>
+    </div>
+    <p class="card-contents">{{ contents }}</p>
+    <div class="card-footer">
+      <div class="participants">
+        <img v-for="(image, index) in participants" :key="index" :src="image" alt="Participant" />
+        <span>{{ participants.length }} 명 참여</span>
+      </div>
+      <div>
+        <span class="applicants">{{ startDate }}</span>
+      </div>
+    </div>
+  </router-link>
+</template>
+
+<style scoped>
+a{
+  text-decoration: none;
+}
+.card {
+  background-color: #F7F8FA;
+  border-radius: 8px;
+  padding: 20px;
+  //box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
+}
+
+.card-contents {
+  //margin-top: 10px;
+  font-size: 14px;
+  color: #657081;
+  display: -webkit-box;
+  overflow: hidden;
+  word-break: break-all;
+  word-wrap: break-word;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  height: 45px;
+  margin-top: 10px;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: #28303F;
+}
+
+.card-title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.label-Front {
+  color: #9333EA;
+  background-color: #F6EEFE;
+  padding: 3px 10px;
+  border-radius: 15px;
+  font-size: 12px;
+}
+
+.label-Backend {
+  color: #CA8A04;
+  background-color: #F9F0D0;
+  padding: 3px 10px;
+  border-radius: 15px;
+  font-size: 12px;
+}
+
+.label-Design {
+  color: #DB2777;
+  background-color: #FBDBEA;
+  padding: 3px 10px;
+  border-radius: 15px;
+  font-size: 12px;
+}
+
+.label-DB {
+  color: #16A34A;
+  background-color: #E9F9EF;
+  padding: 3px 10px;
+  border-radius: 15px;
+}
+
+.card-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 20px;
+}
+
+.participants{
+  display: flex;
+  align-items: center;
+}
+
+.participants img {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  margin-right: 5px;
+}
+
+.participants span {
+  margin-left: 10px;
+  color: #28303F;
+}
+
+.applicants {
+  font-size: 14px;
+  font-weight: 400;
+  color: #657081;
+}
+</style>
\ No newline at end of file