diff --git a/src/Component/Notice/FAQList.vue b/src/Component/Notice/FAQList.vue
index 3775fb3..7895876 100644
--- a/src/Component/Notice/FAQList.vue
+++ b/src/Component/Notice/FAQList.vue
@@ -1,25 +1,157 @@
 <template>
-  <div>
-    <h2 class="text-lg font-bold mb-4">자주 묻는 질문 TOP 5</h2>
-    <ul class="space-y-4">
+  <div class="p-6 bg-gray-100 min-h-screen">
+    <!-- 공지사항 제목 및 더보기 -->
+    <div class="flex justify-between items-center mb-6">
+      <h2 class="text-xl font-bold text-gray-800">최신뉴스</h2>
+      <a href="#" class="text-sm text-blue-500 hover:underline">더보기</a>
+    </div>
+
+    <!-- 공지사항 리스트 -->
+    <ul class="space-y-6">
       <li
-        v-for="faq in faqs"
-        :key="faq.id"
-        class="border-b pb-2"
+        v-for="notice in paginatedNotices"
+        :key="notice.id"
+        class="neumorphic-card p-4 rounded-lg transition-all duration-300 hover:shadow-lg"
       >
-        <!-- 질문 -->
-        <p class="text-base font-medium text-gray-900">{{ faq.question }}</p>
-        <!-- 답변 -->
-        <p class="text-sm text-gray-500">{{ faq.answer }}</p>
+        <div>
+          <!-- 공지사항 제목 -->
+          <p class="text-lg font-bold text-gray-900">{{ notice.title }}</p>
+          <!-- 카테고리 및 날짜 -->
+          <div class="flex justify-between text-sm text-gray-500 mt-2">
+            <span>{{ notice.category }}</span>
+            <span>{{ notice.date }}</span>
+          </div>
+          <!-- 공지사항 내용 -->
+          <p class="text-sm text-gray-700 mt-3">{{ notice.description }}</p>
+        </div>
       </li>
     </ul>
+
+    <!-- 페이지네이션 -->
+    <div class="flex justify-center mt-8 space-x-4">
+      <button
+        v-for="page in totalPages"
+        :key="page"
+        @click="currentPage = page"
+        :class="{
+          'neumorphic-button-active': currentPage === page,
+          'neumorphic-button': currentPage !== page,
+        }"
+        class="px-4 py-2 rounded-lg text-sm font-bold transition-all duration-300 hover:shadow-lg active:shadow-inner"
+      >
+        {{ page }}
+      </button>
+    </div>
   </div>
 </template>
 
 <script setup>
-import { useNoticeStore } from "@/stores/notice";
+import { ref, computed } from "vue";
+
+// 공지사항 더미 데이터
+const notices = ref([
+  {
+    id: 1,
+    title: "서비스 점검 안내",
+    category: "시스템 점검",
+    date: "2024-11-21",
+    description: "11월 23일 오전 2시부터 6시까지 시스템 점검이 예정되어 있습니다.",
+  },
+  {
+    id: 2,
+    title: "신규 기능 업데이트",
+    category: "공지",
+    date: "2024-11-20",
+    description: "새로운 대시보드 기능이 추가되었습니다. 많은 이용 부탁드립니다.",
+  },
+  {
+    id: 3,
+    title: "이용약관 변경 안내",
+    category: "법적 안내",
+    date: "2024-11-15",
+    description: "12월 1일부터 적용되는 새로운 이용약관을 확인해주세요.",
+  },
+  {
+    id: 4,
+    title: "회원 가입 이벤트",
+    category: "이벤트",
+    date: "2024-11-10",
+    description: "회원 가입 이벤트가 진행 중입니다. 지금 가입하고 특별한 혜택을 받아보세요!",
+  },
+  {
+    id: 5,
+    title: "긴급 공지: 서비스 장애 복구",
+    category: "긴급 공지",
+    date: "2024-11-05",
+    description: "서버 장애로 인해 불편을 끼쳐드려 죄송합니다. 현재 복구 작업이 완료되었습니다.",
+  },
+  {
+    id: 6,
+    title: "신규 서버 배포",
+    category: "시스템 점검",
+    date: "2024-11-03",
+    description: "신규 서버가 성공적으로 배포되었습니다. 성능이 향상되었습니다.",
+  },
+  {
+    id: 7,
+    title: "보안 업데이트",
+    category: "보안",
+    date: "2024-10-28",
+    description: "중요 보안 패치가 적용되었습니다. 최신 버전을 확인해주세요.",
+  },
+]);
+
+// 페이지네이션 상태
+const currentPage = ref(1); // 현재 페이지
+const itemsPerPage = ref(3); // 페이지당 항목 수
+
+// 페이지네이션 계산
+const totalPages = computed(() => Math.ceil(notices.value.length / itemsPerPage.value));
 
-const store = useNoticeStore();
-const { faqs } = store;
+// 현재 페이지에 해당하는 공지사항만 필터링
+const paginatedNotices = computed(() => {
+  const start = (currentPage.value - 1) * itemsPerPage.value;
+  const end = start + itemsPerPage.value;
+  return notices.value.slice(start, end);
+});
 </script>
 
+<style scoped>
+/* 뉴모피즘 카드 스타일 */
+.neumorphic-card {
+  background: #ffffff;
+  border-radius: 12px;
+  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1), -10px -10px 20px rgba(255, 255, 255, 0.8);
+  transition: box-shadow 0.3s ease-in-out, transform 0.2s ease-in-out;
+}
+
+.neumorphic-card:hover {
+  box-shadow: 15px 15px 30px rgba(0, 0, 0, 0.2), -15px -15px 30px rgba(255, 255, 255, 0.9);
+  transform: scale(1.02);
+}
+
+/* 뉴모피즘 버튼 스타일 */
+.neumorphic-button {
+  background: #ffffff;
+  border-radius: 12px;
+  box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.1), -6px -6px 12px rgba(255, 255, 255, 0.8);
+  color: #333;
+  transition: all 0.3s ease-in-out;
+}
+
+.neumorphic-button:hover {
+  box-shadow: inset 6px 6px 12px rgba(0, 0, 0, 0.1), inset -6px -6px 12px rgba(255, 255, 255, 0.9);
+  transform: translateY(-2px);
+}
+
+.neumorphic-button-active {
+  background: #5995ed;
+  color: white;
+  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2), -4px -4px 8px rgba(255, 255, 255, 0.8);
+}
+
+.neumorphic-button:active {
+  box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.2), inset -4px -4px 8px rgba(255, 255, 255, 0.9);
+  transform: scale(0.98);
+}
+</style>
diff --git a/src/Component/Notice/MainInfo.vue b/src/Component/Notice/MainInfo.vue
index 30e8801..badd776 100644
--- a/src/Component/Notice/MainInfo.vue
+++ b/src/Component/Notice/MainInfo.vue
@@ -1,53 +1,156 @@
 <template>
-  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-    <!-- 최신 공지사항 및 뉴스 -->
-    <div>
-      <div class="flex justify-between items-center mb-4">
-        <h2 class="text-lg font-bold">최신 공지사항 및 뉴스</h2>
-        <a href="#" class="text-sm text-blue-500 hover:underline">더보기</a>
-      </div>
-      <ul class="space-y-4">
-        <li
-          v-for="notice in notices"
-          :key="notice.id"
-          class="flex justify-between items-start border-b pb-2"
-        >
-          <div>
-            <p class="text-sm font-bold text-gray-700">{{ notice.category }}</p>
-            <p class="text-base font-medium text-gray-900">{{ notice.title }}</p>
-          </div>
-          <span class="text-sm text-gray-500">{{ notice.date }}</span>
-        </li>
-      </ul>
+  <div class="p-6 bg-gray-100 min-h-screen">
+    <!-- 공지사항 제목 및 더보기 -->
+    <div class="flex justify-between items-center mb-6">
+      <h2 class="text-xl font-bold text-gray-800">공지사항</h2>
     </div>
 
-    <!-- 자주 묻는 질문 -->
-    <div>
-      <div class="flex justify-between items-center mb-4">
-        <h2 class="text-lg font-bold">자주 묻는 질문 TOP 5</h2>
-        <a href="#" class="text-sm text-blue-500 hover:underline">더보기</a>
-      </div>
-      <ul class="space-y-4">
-        <li
-          v-for="faq in faqs"
-          :key="faq.id"
-          class="border-b pb-2"
-        >
-          <p class="text-base font-medium text-gray-900">{{ faq.question }}</p>
-          <p class="text-sm text-gray-500">{{ faq.answer }}</p>
-        </li>
-      </ul>
+    <!-- 공지사항 리스트 -->
+    <ul class="space-y-6">
+      <li
+        v-for="notice in paginatedNotices"
+        :key="notice.id"
+        class="neumorphic-card p-4 rounded-lg transition-all duration-300 hover:shadow-lg"
+      >
+        <div>
+          <!-- 공지사항 제목 -->
+          <p class="text-lg font-bold text-gray-900">{{ notice.title }}</p>
+          <!-- 카테고리 및 날짜 -->
+          <div class="flex justify-between text-sm text-gray-500 mt-2">
+            <span>{{ notice.category }}</span>
+            <span>{{ notice.date }}</span>
+          </div>
+          <!-- 공지사항 내용 -->
+          <p class="text-sm text-gray-700 mt-3">{{ notice.description }}</p>
+        </div>
+      </li>
+    </ul>
+
+    <!-- 페이지네이션 -->
+    <div class="flex justify-center mt-8 space-x-4">
+      <button
+        v-for="page in totalPages"
+        :key="page"
+        @click="currentPage = page"
+        :class="{
+          'neumorphic-button-active': currentPage === page,
+          'neumorphic-button': currentPage !== page,
+        }"
+        class="px-4 py-2 rounded-lg text-sm font-bold transition-all duration-300 hover:shadow-lg active:shadow-inner"
+      >
+        {{ page }}
+      </button>
     </div>
   </div>
 </template>
 
 <script setup>
-import { useNoticeStore } from "@/stores/notice";
+import { ref, computed } from "vue";
+
+// 공지사항 더미 데이터
+const notices = ref([
+  {
+    id: 1,
+    title: "서비스 점검 안내",
+    category: "시스템 점검",
+    date: "2024-11-21",
+    description: "11월 23일 오전 2시부터 6시까지 시스템 점검이 예정되어 있습니다.",
+  },
+  {
+    id: 2,
+    title: "신규 기능 업데이트",
+    category: "공지",
+    date: "2024-11-20",
+    description: "새로운 대시보드 기능이 추가되었습니다. 많은 이용 부탁드립니다.",
+  },
+  {
+    id: 3,
+    title: "이용약관 변경 안내",
+    category: "법적 안내",
+    date: "2024-11-15",
+    description: "12월 1일부터 적용되는 새로운 이용약관을 확인해주세요.",
+  },
+  {
+    id: 4,
+    title: "회원 가입 이벤트",
+    category: "이벤트",
+    date: "2024-11-10",
+    description: "회원 가입 이벤트가 진행 중입니다. 지금 가입하고 특별한 혜택을 받아보세요!",
+  },
+  {
+    id: 5,
+    title: "긴급 공지: 서비스 장애 복구",
+    category: "긴급 공지",
+    date: "2024-11-05",
+    description: "서버 장애로 인해 불편을 끼쳐드려 죄송합니다. 현재 복구 작업이 완료되었습니다.",
+  },
+  {
+    id: 6,
+    title: "신규 서버 배포",
+    category: "시스템 점검",
+    date: "2024-11-03",
+    description: "신규 서버가 성공적으로 배포되었습니다. 성능이 향상되었습니다.",
+  },
+  {
+    id: 7,
+    title: "보안 업데이트",
+    category: "보안",
+    date: "2024-10-28",
+    description: "중요 보안 패치가 적용되었습니다. 최신 버전을 확인해주세요.",
+  },
+]);
+
+// 페이지네이션 상태
+const currentPage = ref(1); // 현재 페이지
+const itemsPerPage = ref(3); // 페이지당 항목 수
+
+// 페이지네이션 계산
+const totalPages = computed(() => Math.ceil(notices.value.length / itemsPerPage.value));
 
-const store = useNoticeStore();
-const { notices, faqs } = store;
+// 현재 페이지에 해당하는 공지사항만 필터링
+const paginatedNotices = computed(() => {
+  const start = (currentPage.value - 1) * itemsPerPage.value;
+  const end = start + itemsPerPage.value;
+  return notices.value.slice(start, end);
+});
 </script>
 
 <style scoped>
-/* 추가 스타일은 필요에 따라 정의하세요 */
+/* 뉴모피즘 카드 스타일 */
+.neumorphic-card {
+  background: #ffffff;
+  border-radius: 12px;
+  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1), -10px -10px 20px rgba(255, 255, 255, 0.8);
+  transition: box-shadow 0.3s ease-in-out, transform 0.2s ease-in-out;
+}
+
+.neumorphic-card:hover {
+  box-shadow: 15px 15px 30px rgba(0, 0, 0, 0.2), -15px -15px 30px rgba(255, 255, 255, 0.9);
+  transform: scale(1.02);
+}
+
+/* 뉴모피즘 버튼 스타일 */
+.neumorphic-button {
+  background: #ffffff;
+  border-radius: 12px;
+  box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.1), -6px -6px 12px rgba(255, 255, 255, 0.8);
+  color: #333;
+  transition: all 0.3s ease-in-out;
+}
+
+.neumorphic-button:hover {
+  box-shadow: inset 6px 6px 12px rgba(0, 0, 0, 0.1), inset -6px -6px 12px rgba(255, 255, 255, 0.9);
+  transform: translateY(-2px);
+}
+
+.neumorphic-button-active {
+  background: #5995ed;
+  color: white;
+  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2), -4px -4px 8px rgba(255, 255, 255, 0.8);
+}
+
+.neumorphic-button:active {
+  box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.2), inset -4px -4px 8px rgba(255, 255, 255, 0.9);
+  transform: scale(0.98);
+}
 </style>
diff --git a/src/Component/Notice/NoticeList.vue b/src/Component/Notice/NoticeList.vue
index a29e19f..2817797 100644
--- a/src/Component/Notice/NoticeList.vue
+++ b/src/Component/Notice/NoticeList.vue
@@ -1,28 +1,156 @@
 <template>
-  <div>
-    <h2 class="text-lg font-bold mb-4">최신 공지사항 및 뉴스</h2>
-    <ul class="space-y-4">
+  <div class="p-6 bg-gray-100 min-h-screen">
+    <!-- 공지사항 제목 및 더보기 -->
+    <div class="flex justify-between items-center mb-6">
+      <h2 class="text-xl font-bold text-gray-800">공지사항</h2>
+    </div>
+
+    <!-- 공지사항 리스트 -->
+    <ul class="space-y-6">
       <li
-        v-for="notice in notices"
+        v-for="notice in paginatedNotices"
         :key="notice.id"
-        class="border-b pb-2"
+        class="neumorphic-card p-4 rounded-lg transition-all duration-300 hover:shadow-lg"
       >
-        <!-- 공지 분류 및 등록일 -->
-        <div class="flex justify-between items-center">
-          <span class="text-sm font-bold text-gray-700">{{ notice.category }}</span>
-          <span class="text-sm text-gray-500">{{ notice.date }}</span>
+        <div>
+          <!-- 공지사항 제목 -->
+          <p class="text-lg font-bold text-gray-900">{{ notice.title }}</p>
+          <!-- 카테고리 및 날짜 -->
+          <div class="flex justify-between text-sm text-gray-500 mt-2">
+            <span>{{ notice.category }}</span>
+            <span>{{ notice.date }}</span>
+          </div>
+          <!-- 공지사항 내용 -->
+          <p class="text-sm text-gray-700 mt-3">{{ notice.description }}</p>
         </div>
-        <!-- 공지 제목 -->
-        <p class="text-base font-medium text-gray-900">{{ notice.title }}</p>
       </li>
     </ul>
+
+    <!-- 페이지네이션 -->
+    <div class="flex justify-center mt-8 space-x-4">
+      <button
+        v-for="page in totalPages"
+        :key="page"
+        @click="currentPage = page"
+        :class="{
+          'neumorphic-button-active': currentPage === page,
+          'neumorphic-button': currentPage !== page,
+        }"
+        class="px-4 py-2 rounded-lg text-sm font-bold transition-all duration-300 hover:shadow-lg active:shadow-inner"
+      >
+        {{ page }}
+      </button>
+    </div>
   </div>
 </template>
 
 <script setup>
-import { useNoticeStore } from "@/stores/notice";
+import { ref, computed } from "vue";
+
+// 공지사항 더미 데이터
+const notices = ref([
+  {
+    id: 1,
+    title: "싸탈하고싶다.",
+    category: "시스템 점검",
+    date: "2024-11-21",
+    description: "11월 23일 오전 2시부터 6시까지 시스템 점검이 예정되어 있습니다.",
+  },
+  {
+    id: 2,
+    title: "집가고싶다",
+    category: "공지",
+    date: "2024-11-20",
+    description: "새로운 대시보드 기능이 추가되었습니다. 많은 이용 부탁드립니다.",
+  },
+  {
+    id: 3,
+    title: "이용약관 변경 안내",
+    category: "법적 안내",
+    date: "2024-11-15",
+    description: "12월 1일부터 적용되는 새로운 이용약관을 확인해주세요.",
+  },
+  {
+    id: 4,
+    title: "회원 가입 이벤트",
+    category: "이벤트",
+    date: "2024-11-10",
+    description: "회원 가입 이벤트가 진행 중입니다. 지금 가입하고 특별한 혜택을 받아보세요!",
+  },
+  {
+    id: 5,
+    title: "긴급 공지: 서비스 장애 복구",
+    category: "긴급 공지",
+    date: "2024-11-05",
+    description: "서버 장애로 인해 불편을 끼쳐드려 죄송합니다. 현재 복구 작업이 완료되었습니다.",
+  },
+  {
+    id: 6,
+    title: "신규 서버 배포",
+    category: "시스템 점검",
+    date: "2024-11-03",
+    description: "신규 서버가 성공적으로 배포되었습니다. 성능이 향상되었습니다.",
+  },
+  {
+    id: 7,
+    title: "보안 업데이트",
+    category: "보안",
+    date: "2024-10-28",
+    description: "중요 보안 패치가 적용되었습니다. 최신 버전을 확인해주세요.",
+  },
+]);
+
+// 페이지네이션 상태
+const currentPage = ref(1); // 현재 페이지
+const itemsPerPage = ref(3); // 페이지당 항목 수
+
+// 페이지네이션 계산
+const totalPages = computed(() => Math.ceil(notices.value.length / itemsPerPage.value));
 
-const store = useNoticeStore();
-const { notices } = store;
+// 현재 페이지에 해당하는 공지사항만 필터링
+const paginatedNotices = computed(() => {
+  const start = (currentPage.value - 1) * itemsPerPage.value;
+  const end = start + itemsPerPage.value;
+  return notices.value.slice(start, end);
+});
 </script>
 
+<style scoped>
+/* 뉴모피즘 카드 스타일 */
+.neumorphic-card {
+  background: #ffffff;
+  border-radius: 12px;
+  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1), -10px -10px 20px rgba(255, 255, 255, 0.8);
+  transition: box-shadow 0.3s ease-in-out, transform 0.2s ease-in-out;
+}
+
+.neumorphic-card:hover {
+  box-shadow: 15px 15px 30px rgba(0, 0, 0, 0.2), -15px -15px 30px rgba(255, 255, 255, 0.9);
+  transform: scale(1.02);
+}
+
+/* 뉴모피즘 버튼 스타일 */
+.neumorphic-button {
+  background: #ffffff;
+  border-radius: 12px;
+  box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.1), -6px -6px 12px rgba(255, 255, 255, 0.8);
+  color: #333;
+  transition: all 0.3s ease-in-out;
+}
+
+.neumorphic-button:hover {
+  box-shadow: inset 6px 6px 12px rgba(0, 0, 0, 0.1), inset -6px -6px 12px rgba(255, 255, 255, 0.9);
+  transform: translateY(-2px);
+}
+
+.neumorphic-button-active {
+  background: #5995ed;
+  color: white;
+  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2), -4px -4px 8px rgba(255, 255, 255, 0.8);
+}
+
+.neumorphic-button:active {
+  box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.2), inset -4px -4px 8px rgba(255, 255, 255, 0.9);
+  transform: scale(0.98);
+}
+</style>
diff --git a/src/views/NoticeView.vue b/src/views/NoticeView.vue
index 4e9ff2e..50bb4c1 100644
--- a/src/views/NoticeView.vue
+++ b/src/views/NoticeView.vue
@@ -11,8 +11,8 @@ const activeTab = computed(() => store.activeTab);
 const setActiveTab = store.setActiveTab;
 
 const tabs = [
-  { id: "mainInfo", name: "주요 안내" },
-  { id: "notice", name: "공지사항 및 뉴스" },
+  { id: "mainInfo", name: "공지사항" },
+  { id: "notice", name: "최신 뉴스" },
   { id: "faq", name: "자주 묻는 질문" },
 ];
 </script>