diff --git a/src/app/(main)/project/workspace/[id]/page.tsx b/src/app/(main)/project/workspace/[id]/page.tsx
index 5643d5b..73b229d 100644
--- a/src/app/(main)/project/workspace/[id]/page.tsx
+++ b/src/app/(main)/project/workspace/[id]/page.tsx
@@ -301,15 +301,24 @@ export default function ProjectPage() {
   };
 
   if (tasksLoading) {
-    return (
-      <div className="flex items-center justify-center h-full">
-        <p className="text-gray-400 dark:text-gray-500 text-lg">불러오는 중...</p>
-      </div>
+     return (
+      <div className="flex flex-col h-full bg-background pt-16">
+        <div className="flex-1 flex gap-3 p-3 overflow-hidden">
+          {[1, 2, 3].map((i) => (
+            <div key={i} className="w-80 shrink-0 bg-card rounded-lg border border-border p-4 flex flex-col gap-3">
+              <div className="h-4 w-24 bg-muted rounded animate-pulse" />
+              {[1, 2, 3].map((j) => (
+                <div key={j} className="h-20 bg-muted rounded-lg animate-pulse" />
+              ))}
+            </div>
+          ))}
+        </div>
+    </div>
     );
   }
 
   return (
-    <div className="flex flex-col h-full bg-gray-50 dark:bg-gray-900 pt-14">
+    <div className="flex flex-col h-full bg-background pt-16">
       <div className="flex-1 flex overflow-hidden min-h-0 gap-2 lg:gap-3 p-2 sm:p-3 w-full">
 
         {/* 메인 콘텐츠 */}
diff --git a/src/app/globals.css b/src/app/globals.css
index 0bbabcb..24cfacc 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -143,48 +143,43 @@
 }
 
 .dark {
-  --background: #0D2530;
-  --foreground: #E8F5F7;
-  --card: #1A4A5A;
-  --card-foreground: #E8F5F7;
-  --popover: #1A4A5A;
-  --popover-foreground: #E8F5F7;
-  --primary: #E8F5F7;
-  --primary-foreground: #0D2530;
-  --secondary: #9DD8E3;
-  --secondary-foreground: #0D2530;
-  --muted: #2A6070;
-  --muted-foreground: #9DD8E3;
-  --accent: #6DD5E8;
-  --accent-foreground: #0D2530;
-  --destructive: #EF9A9A;
-  --destructive-foreground: #0D2530;
-  --border: #2A6070;
-  --input: #1A4A5A;
-  --ring: #6DD5E8;
-  --chart-1: #3a6fd8;
+  --background: #0F1117;
+  --foreground: #C8D4DC;
+  --card: #161B27;
+  --card-foreground: #C8D4DC;
+  --popover: #1E2333;
+  --popover-foreground: #C8D4DC;
+  --primary: #C8D4DC;
+  --primary-foreground: #0F1117;
+  --secondary: #6BBAC8;
+  --secondary-foreground: #0F1117;
+  --muted: #1E2535;
+  --muted-foreground: #7A8FA0;
+  --accent: #4FACBA;
+  --accent-foreground: #C8D4DC;
+  --destructive: #F87171;
+  --destructive-foreground: #0F1117;
+  --border: #252D40;
+  --input: #1E2535;
+  --ring: #4FACBA;
   --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: #4db89a;
   --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: #c8a030;
   --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: #9b4fd8;
   --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: #d84a3a;
   --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: #0D2530;
-  --sidebar-foreground: #E8F5F7;
-  --sidebar-primary: #6DD5E8;
-  --sidebar-primary-foreground: #0D2530;
-  --sidebar-accent: #2A6070;
-  --sidebar-accent-foreground: #E8F5F7;
-  --sidebar-border: #2A6070;
-  --sidebar-ring: #6DD5E8;
-
-  --dark-title: #E8F5F7;
-  --dark-body: #E8F5F7;
-  --dark-description: #9DD8E3;
-  --dark-border: #2A6070;
+  --sidebar: #0B0F1A;
+  --sidebar-foreground: #C8D4DC;
+  --sidebar-primary: #4FACBA;
+  --sidebar-primary-foreground: #0F1117;
+  --sidebar-accent: #1E2535;
+  --sidebar-accent-foreground: #C8D4DC;
+  --sidebar-border: #252D40;
+  --sidebar-ring: #4FACBA;
+
+  --dark-title: #C8D4DC;
+  --dark-body: #A8B8C2;
+  --dark-description: #7A8FA0;
+  --dark-border: #252D40;
 }
 
 @layer base {
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index e8627fe..25c8711 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,5 +1,5 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono, Inter } from "next/font/google";
+import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import { Header } from "@/components/layout/Header";
 import Provider from "@/providers/providers";
@@ -16,11 +16,9 @@ const geistMono = Geist_Mono({
   subsets: ["latin"],
 });
 
-const inter = Inter({ subsets: ["latin"] });
-
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Taskry",
+  description: "팀 프로젝트 관리 플랫폼",
 };
 
 export default function RootLayout({
@@ -29,9 +27,9 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en" className="h-full" suppressHydrationWarning>
+    <html lang="ko" className="h-full" suppressHydrationWarning>
       <body
-        className={`${geistSans.variable} ${geistMono.variable} ${inter.className} antialiased h-full overflow-hidden`}
+        className={`${geistSans.variable} ${geistMono.variable} antialiased h-full overflow-hidden`}
         suppressHydrationWarning={true}
       >
         <Provider>
diff --git a/src/components/features/kanban/KanbanColumn.tsx b/src/components/features/kanban/KanbanColumn.tsx
index 6e0135c..006bad0 100644
--- a/src/components/features/kanban/KanbanColumn.tsx
+++ b/src/components/features/kanban/KanbanColumn.tsx
@@ -105,7 +105,7 @@ const KanbanColumn = ({
       `}
     >
       {/* 컬럼 헤더 */}
-      <div className="flex items-center justify-between px-3 sm:px-4 py-2.5 border-b border-border rounded-t-lg bg-[#F0F4F5] dark:bg-muted/30">
+      <div className="flex items-center justify-between px-3 sm:px-4 py-2.5 border-b border-border rounded-t-lg bg-muted/40 dark:bg-muted/30">
         <div className="flex items-center gap-2">
           {collapsible && (
             <button
diff --git a/src/components/features/kanban/MemoView.tsx b/src/components/features/kanban/MemoView.tsx
index a8325f4..4983199 100644
--- a/src/components/features/kanban/MemoView.tsx
+++ b/src/components/features/kanban/MemoView.tsx
@@ -541,7 +541,7 @@ const MemoView = ({ projectId }: MemoFormProps) => {
                 className={`flex-1 px-2 py-1 text-[11px] font-medium rounded transition-colors ${
                   filter === "all"
                     ? "bg-main-500 text-white"
-                    : "bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300 border border-gray-200 dark:border-gray-700 hover:border-main-300"
+                    : "bg-muted text-muted-foreground border border-border hover:border-main-400"
                 }`}
               >
                 전체
@@ -551,7 +551,7 @@ const MemoView = ({ projectId }: MemoFormProps) => {
                 className={`flex-1 px-2 py-1 text-[11px] font-medium rounded transition-colors ${
                   filter === "mine"
                     ? "bg-main-500 text-white"
-                    : "bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300 border border-gray-200 dark:border-gray-700 hover:border-main-300"
+                    : "bg-muted text-muted-foreground border border-border hover:border-main-400"
                 }`}
               >
                 내 메모
@@ -561,7 +561,7 @@ const MemoView = ({ projectId }: MemoFormProps) => {
                 className={`flex-1 px-2 py-1 text-[11px] font-medium rounded transition-colors flex items-center justify-center gap-0.5 ${
                   filter === "pinned"
                     ? "bg-main-500 text-white"
-                    : "bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300 border border-gray-200 dark:border-gray-700 hover:border-main-300"
+                    : "bg-muted text-muted-foreground border border-border hover:border-main-400"
                 }`}
               >
                 <Icon type="pin" size={9} />
@@ -586,7 +586,7 @@ const MemoView = ({ projectId }: MemoFormProps) => {
                 placeholder="메모, 작성자..."
                 value={searchTerm}
                 onChange={(e) => setSearchTerm(e.target.value)}
-                className="w-full pl-6 pr-6 py-1 text-[11px] bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500 input-focus-style"
+                className="w-full pl-6 pr-6 py-1 text-[11px] bg-input border border-border rounded text-foreground placeholder:text-muted-foreground input-focus-style"
               />
               {searchTerm && (
                 <button
@@ -610,7 +610,7 @@ const MemoView = ({ projectId }: MemoFormProps) => {
                 className={`flex-1 px-2 py-1 text-[11px] font-medium rounded transition-colors ${
                   sort === "newest"
                     ? "bg-main-500 text-white"
-                    : "bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300 border border-gray-200 dark:border-gray-700 hover:border-main-300"
+                    : "bg-muted text-muted-foreground border border-border hover:border-main-400"
                 }`}
               >
                 최신순
@@ -620,7 +620,7 @@ const MemoView = ({ projectId }: MemoFormProps) => {
                 className={`flex-1 px-2 py-1 text-[11px] font-medium rounded transition-colors ${
                   sort === "oldest"
                     ? "bg-main-500 text-white"
-                    : "bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300 border border-gray-200 dark:border-gray-700 hover:border-main-300"
+                    : "bg-muted text-muted-foreground border border-border hover:border-main-400"
                 }`}
               >
                 오래된순
@@ -661,7 +661,7 @@ const MemoView = ({ projectId }: MemoFormProps) => {
             placeholder="메모를 입력하세요..."
             disabled={loadingMemos}
             rows={3}
-            className="w-full pt-(--fluid-textarea-p) pb-(--fluid-textarea-p) pl-(--fluid-textarea-p) pr-8 sm:pr-10 border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900/50 rounded-xl resize-none text-sm input-focus-style transition-all placeholder:text-gray-400 dark:placeholder:text-gray-500 text-gray-900 dark:text-gray-100 disabled:opacity-50"
+            className="w-full pt-(--fluid-textarea-p) pb-(--fluid-textarea-p) pl-(--fluid-textarea-p) pr-8 sm:pr-10 border border-border bg-input rounded-xl resize-none text-sm input-focus-style transition-all placeholder:text-muted-foreground text-foreground disabled:opacity-50"
           />
           {newMemo && (
             <button
@@ -806,17 +806,14 @@ const MemoView = ({ projectId }: MemoFormProps) => {
                     {/* 날짜 */}
                     <span className="text-xs text-gray-400 dark:text-gray-400 font-medium">
                       {(() => {
-                        const utcDate = new Date(memo.created_at);
-                        const kstDate = new Date(
-                          utcDate.getTime() - 9 * 60 * 60 * 1000
-                        );
-                        return kstDate.toLocaleString("ko-KR", {
+                   
+                        return new Date(memo.created_at).toLocaleString("ko-KR", {
+                          timeZone: "Asia/Seoul",
                           year: "2-digit",
                           month: "2-digit",
                           day: "2-digit",
                           hour: "2-digit",
                           minute: "2-digit",
-                          second: "2-digit", // 초 추가
                           hour12: false,
                         });
                       })()}
@@ -892,7 +889,7 @@ const MemoView = ({ projectId }: MemoFormProps) => {
                       maxLength={MEMO_MAX_LENGTH}
                       disabled={savingEdit}
                       rows={3}
-                      className="w-full p-2 text-sm border border-main-300 dark:border-main-600 bg-white dark:bg-gray-900 rounded-lg resize-none overflow-hidden text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-main-400 dark:focus:ring-main-500 disabled:opacity-50"
+                      className="w-full p-2 text-sm border border-main-300 dark:border-main-600 bg-input rounded-lg resize-none overflow-hidden text-foreground focus:outline-none focus:ring-2 focus:ring-main-400 dark:focus:ring-main-500 disabled:opacity-50"
                     />
                     <div className="flex items-center justify-between mt-1.5">
                       <span className="text-[11px] text-gray-400">{editContent.length} / {MEMO_MAX_LENGTH} · Ctrl+Enter 저장 · Esc 취소</span>
diff --git a/src/components/layout/BottomNavigation.tsx b/src/components/layout/BottomNavigation.tsx
index 9176b15..7f7ba4d 100644
--- a/src/components/layout/BottomNavigation.tsx
+++ b/src/components/layout/BottomNavigation.tsx
@@ -74,7 +74,7 @@ const BottomNavigation = ({
   ];
 
   return (
-    <div className="border-t bg-white dark:bg-gray-900 shadow-lg h-16">
+    <div className="border-t bg-card border-border shadow-lg h-16">
       <div className="flex justify-center h-full items-center">
         {navItems.map((item) => {
           const isActive = activeView === item.id;
@@ -88,8 +88,8 @@ const BottomNavigation = ({
                 transition-colors duration-200
                 ${
                   isActive
-                    ? "text-main-200 hover:text-main-200/50 dark:text-main-400 dark:hover:text-main-300"
-                    : "text-main-400 hover:text-main-400/50 dark:text-gray-400 dark:hover:text-gray-200"
+                    ? "text-main-600 dark:text-main-400"
+                    : "text-muted-foreground hover:text-foreground"
                 }
               `}
             >
@@ -104,7 +104,7 @@ const BottomNavigation = ({
 
               {/* 하단 보더 */}
               {isActive && (
-                <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-main-200 dark:bg-main-400" />
+                <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-main-600 dark:bg-main-400" />
               )}
             </button>
           );
diff --git a/src/components/layout/Navigation.tsx b/src/components/layout/Navigation.tsx
deleted file mode 100644
index 8a0f691..0000000
--- a/src/components/layout/Navigation.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-"use client"; // TODO use client 추가
-
-import Link from "next/link";
-
-export function Navigation() {
-  return (
-    <nav className="border-b mx-3">
-      <div className="container flex h-14 max-w-screen-2xl justify-between">
-        <div className="flex items-center gap-4">
-          <Link href="/">
-            <h2 className="font-bold text-main-300">Taskry</h2>
-          </Link>
-          {/* <Link href="/sample/icon">
-            <h2>Icon 샘플 페이지</h2>
-          </Link>
-          <Link href="/sample/color">
-            <h2>Color 샘플 페이지</h2>
-          </Link>
-          <Link href="/sample/button">
-            <h2>Button 샘플 페이지</h2>
-          </Link> */}
-        </div>
-        <div className="flex items-center gap-4"></div>
-      </div>
-    </nav>
-  );
-}
diff --git a/src/components/ui/Modal.tsx b/src/components/ui/Modal.tsx
index 0e7d2f0..62c64eb 100644
--- a/src/components/ui/Modal.tsx
+++ b/src/components/ui/Modal.tsx
@@ -12,12 +12,12 @@ const modalInnerClasses = clsx(
   "relative w-[calc(100%-2rem)] max-w-xl min-h-(--fluid-modal-min-h)",
   "py-(--fluid-modal-py) px-(--fluid-modal-px)",
   "flex flex-col items-center justify-center",
-  "border border-gray-100 dark:border-gray-700 rounded-2xl shadow-sm bg-white dark:bg-gray-800"
+  "border border-border rounded-2xl shadow-sm bg-card"
 );
 const modalIconClasses = clsx(
   "size-15 flex items-center justify-center",
   "absolute -top-8 left-1/2 transform -translate-x-1/2",
-  "shadow-lg rounded-full bg-white dark:bg-gray-800"
+  "shadow-lg rounded-full bg-card"
 );
 
 export default function Modal({
@@ -93,7 +93,7 @@ export default function Modal({
           )}
           <button
             onClick={onClose}
-            className="absolute top-3 right-3 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200"
+            className="absolute top-3 right-3 text-muted-foreground hover:text-foreground"
           >
             <Icon type="x" />
           </button>
@@ -103,10 +103,10 @@ export default function Modal({
               children
             ) : (
               <>
-                <h2 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
+                <h2 className="text-2xl font-bold text-foreground">
                   {finalTitle}
                 </h2>
-                <p className="text-base font-medium mt-2 text-gray-700 dark:text-gray-300">
+                <p className="text-base font-medium mt-2 text-muted-foreground">
                   {finalDescription}
                 </p>
 
diff --git a/src/features/project/ui/ProjectInfoPanel.tsx b/src/features/project/ui/ProjectInfoPanel.tsx
index 39807e9..b0b4974 100644
--- a/src/features/project/ui/ProjectInfoPanel.tsx
+++ b/src/features/project/ui/ProjectInfoPanel.tsx
@@ -201,7 +201,7 @@ export default function ProjectInfoPanel({
             {projectName}
           </h4>
           {projectDescription && (
-            <p className="text-sm text-gray-600 dark:text-gray-400">
+            <p className="text-sm text-muted-foreground">
               {projectDescription}
             </p>
           )}
@@ -210,7 +210,7 @@ export default function ProjectInfoPanel({
         {/* 프로젝트 기간 & 타임라인 */}
         {timeline && (
           <section className="space-y-3">
-            <div className="flex items-center gap-2 text-sm font-medium text-gray-700 dark:text-gray-300">
+            <div className="flex items-center gap-2 text-sm font-medium text-foreground">
               <Calendar size={16} />
               <span>프로젝트 기간</span>
             </div>
@@ -218,10 +218,10 @@ export default function ProjectInfoPanel({
             <div className="bg-muted/40 dark:bg-muted/20 rounded-lg p-3 space-y-3">
               {/* 날짜 표시 */}
               <div className="flex justify-between text-sm">
-                <span className="text-gray-600 dark:text-gray-400">
+                <span className="text-muted-foreground">
                   {timeline.startStr}
                 </span>
-                <span className="font-medium text-gray-800 dark:text-gray-200">
+                <span className="font-medium text-foreground">
                   {timeline.status === "before" && (
                     <span className="text-blue-500">
                       시작까지 D-{Math.abs(timeline.elapsedDays)}
@@ -241,14 +241,14 @@ export default function ProjectInfoPanel({
                     <span className="text-red-500">종료됨</span>
                   )}
                 </span>
-                <span className="text-gray-600 dark:text-gray-400">
+                <span className="text-muted-foreground">
                   {timeline.endStr}
                 </span>
               </div>
 
               {/* 타임라인 바 */}
               <div className="relative">
-                <div className="h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+                <div className="h-2 bg-border rounded-full overflow-hidden">
                   <div
                     className={`h-full transition-all duration-300 ${
                       timeline.status === "ended"
@@ -274,7 +274,7 @@ export default function ProjectInfoPanel({
               </div>
 
               {/* 기간 정보 */}
-              <div className="flex justify-between text-xs text-gray-500 dark:text-gray-400">
+              <div className="flex justify-between text-xs text-muted-foreground">
                 <span>총 {timeline.totalDays}일</span>
                 <span>{timeline.progressPercent}% 경과</span>
               </div>
@@ -284,7 +284,7 @@ export default function ProjectInfoPanel({
 
         {/* 작업 현황 */}
         <section className="space-y-3">
-          <div className="flex items-center gap-2 text-sm font-medium text-gray-700 dark:text-gray-300">
+          <div className="flex items-center gap-2 text-sm font-medium text-foreground">
             <CheckCircle2 size={16} />
             <span>작업 현황</span>
           </div>
@@ -293,7 +293,7 @@ export default function ProjectInfoPanel({
             {/* 상태별 개수 */}
             <div className="grid grid-cols-3 gap-2 text-center">
               <div className="bg-card rounded-lg p-2">
-                <div className="flex items-center justify-center gap-1 text-gray-500 dark:text-gray-400 text-xs mb-1">
+                <div className="flex items-center justify-center gap-1 text-muted-foreground text-xs mb-1">
                   <Circle size={10} />
                   할일
                 </div>
@@ -323,11 +323,11 @@ export default function ProjectInfoPanel({
 
             {/* 완료율 바 */}
             <div>
-              <div className="flex justify-between text-xs text-gray-600 dark:text-gray-400 mb-1">
+              <div className="flex justify-between text-xs text-muted-foreground mb-1">
                 <span>완료율</span>
                 <span className="font-medium">{stats.completionRate}%</span>
               </div>
-              <div className="h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+              <div className="h-2 bg-border rounded-full overflow-hidden">
                 <div
                   className="h-full bg-green-500 transition-all duration-300"
                   style={{ width: `${stats.completionRate}%` }}
@@ -340,7 +340,7 @@ export default function ProjectInfoPanel({
         {/* 주의 사항 */}
         {(stats.overdue > 0 || stats.todayDue > 0 || stats.upcoming > 0) && (
           <section className="space-y-3">
-            <div className="flex items-center gap-2 text-sm font-medium text-gray-700 dark:text-gray-300">
+            <div className="flex items-center gap-2 text-sm font-medium text-foreground">
               <AlertTriangle size={16} />
               <span>주의 사항</span>
             </div>
@@ -373,7 +373,7 @@ export default function ProjectInfoPanel({
 
         {/* 팀원 */}
         <section className="space-y-3">
-          <div className="flex items-center gap-2 text-sm font-medium text-gray-700 dark:text-gray-300">
+          <div className="flex items-center gap-2 text-sm font-medium text-foreground">
             <Users size={16} />
             <span>팀원</span>
             <span className="text-gray-400 dark:text-gray-500">
@@ -399,14 +399,14 @@ export default function ProjectInfoPanel({
                   {/* 정보 */}
                   <div className="flex-1 min-w-0">
                     <div className="flex items-center gap-1">
-                      <span className="font-medium text-gray-800 dark:text-gray-200 text-sm truncate">
+                      <span className="font-medium text-foreground text-sm truncate">
                         {member.users.user_name}
                       </span>
                       {member.role === "leader" && (
                         <Crown size={12} className="text-yellow-500" />
                       )}
                     </div>
-                    <div className="text-xs text-gray-500 dark:text-gray-400 truncate">
+                    <div className="text-xs text-muted-foreground truncate">
                       {member.users.email}
                     </div>
                   </div>