diff --git a/src/layouts/TheTop.vue b/src/layouts/TheTop.vue
index 8843357..b1b13a1 100644
--- a/src/layouts/TheTop.vue
+++ b/src/layouts/TheTop.vue
@@ -38,25 +38,36 @@
                 <!-- Notification -->
                 <li class="nav-item dropdown-notifications navbar-dropdown dropdown me-3 me-xl-2 p-0">
                     <a
-                        class="nav-link dropdown-toggle hide-arrow p-0"
-                        href="javascript:void(0);"
-                        data-bs-toggle="dropdown"
-                        data-bs-auto-close="outside"
-                        aria-expanded="false"
+                    class="nav-link dropdown-toggle hide-arrow p-0"
+                    href="javascript:void(0);"
+                    data-bs-toggle="dropdown"
+                    data-bs-auto-close="outside"
+                    aria-expanded="false"
                     >
-                        <span class="position-relative">
-                            <i class="bx bx-bell bx-md"></i>
-                            <span class="badge rounded-pill bg-danger badge-dot badge-notifications border"></span>
-                        </span>
+                    <span class="position-relative">
+                        <i class="bx bx-bell bx-md"></i>
+                        <!-- 알림이 있을 경우에만 뱃지를 표시 -->
+                        <span
+                        v-if="notificationCount > 0"
+                        class="badge rounded-pill bg-danger badge-dot badge-notifications border"
+                        ></span>
+                    </span>
                     </a>
                     <ul class="dropdown-menu dropdown-menu-end p-0">
-                        <li class="dropdown-notifications-list scrollable-container p-3">
-                            알림이 없습니다.
-                            <!-- <ul class="list-group list-group-flush">
-                                <li class="list-group-item list-group-item-action dropdown-notifications-item">
-                                </li>
-                            </ul> -->
-                        </li>
+                    <li class="dropdown-notifications-list scrollable-container p-3">
+                        <!-- 알림이 없으면 "알림이 없습니다." 메시지 표시 -->
+                        <div v-if="notificationCount === 0">
+                        알림이 없습니다.
+                        </div>
+                        <!-- 알림이 있을 때 목록 렌더링-->
+                        <div v-else>
+                        <ul>
+                            <li v-for="notification in notifications" :key="notification.id">
+                            {{ notification.text }}
+                            </li>
+                        </ul>
+                        </div>
+                    </li>
                     </ul>
                 </li>
                 <!--/ Notification -->
@@ -120,6 +131,8 @@
     const selectedProject = ref(null);
     const weather = ref({});
     const dailyWeatherList = ref([]);
+    const notifications = ref([]);
+    const notificationCount = ref(0);
 
     const weatherReady = computed(() => {
         return (