diff --git a/package-lock.json b/package-lock.json
index a06955bd..f37c9253 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "js-cookie": "^3.0.5",
         "pinia": "^2.3.0",
         "tailwind-scrollbar-hide": "^2.0.0",
+        "v3-infinite-loading": "^1.3.2",
         "vue": "^3.5.13",
         "vue-chartjs": "^5.3.2",
         "vue-router": "^4.5.0",
@@ -5653,6 +5654,12 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "license": "MIT"
     },
+    "node_modules/v3-infinite-loading": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/v3-infinite-loading/-/v3-infinite-loading-1.3.2.tgz",
+      "integrity": "sha512-2Bg8X8nqd9tKEOJdITABtuX2BMSYo/t+eZOAD+9/xz0fGyGDclglmWjo9Zs4dr/T63liO7EniBAunBesM2QhBA==",
+      "license": "MIT"
+    },
     "node_modules/vite": {
       "version": "6.0.7",
       "resolved": "https://registry.npmjs.org/vite/-/vite-6.0.7.tgz",
diff --git a/package.json b/package.json
index 4adbec52..c293994b 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "js-cookie": "^3.0.5",
     "pinia": "^2.3.0",
     "tailwind-scrollbar-hide": "^2.0.0",
+    "v3-infinite-loading": "^1.3.2",
     "vue": "^3.5.13",
     "vue-chartjs": "^5.3.2",
     "vue-router": "^4.5.0",
diff --git a/src/api/auth.ts b/src/api/auth.ts
index bafbad6c..653a443f 100644
--- a/src/api/auth.ts
+++ b/src/api/auth.ts
@@ -1,8 +1,10 @@
 import { axiosInstance } from '@/utils/axios'
 import Cookies from 'js-cookie'
 import type { loginDataTypes } from '@/types/auth'
+import { useMemberStore } from '@/stores/member'
 
 export const postLogin = async (loginData: loginDataTypes, sessionId: string) => {
+  const memberStore = useMemberStore()
   const response = await axiosInstance.post('/api/auths/login', loginData, {
     headers: { sessionId: sessionId }
   })
@@ -10,19 +12,33 @@ export const postLogin = async (loginData: loginDataTypes, sessionId: string) =>
     path: '/',
     sameSite: 'strict'
   })
+  Cookies.set('refreshToken', response.data.refreshToken, {
+    path: '/',
+    sameSite: 'strict'
+  })
+
+  await memberStore.updateMemberInfoWithToken()
   return response.data
 }
 
 export const patchPassword = async (password: string) => {
-  const accessToken = Cookies.get('accessToken')
+  const response = await axiosInstance.patch('/api/members/password', password)
 
-  if (!accessToken) return
+  return response.data
+}
+
+export const deleteLogout = async () => {
+  const memberStore = useMemberStore()
+  const refreshToken = Cookies.get('refreshToken')
 
-  const response = await axiosInstance.patch('/api/members/password', password, {
+  const response = await axiosInstance.delete('/api/auths/logout', {
     headers: {
-      Authorization: `Bearer ${accessToken}`
+      Authorization: `Bearer ${import.meta.env.VITE_ACCESS_TOKEN}`,
+      refreshToken: refreshToken
     }
   })
-
-  return response.data
+  Cookies.remove('accessToken', { path: '/' })
+  Cookies.remove('refreshToken', { path: '/' })
+  await memberStore.updateMemberInfoWithToken()
+  return response
 }
diff --git a/src/api/common.ts b/src/api/common.ts
index 2cdf19a5..73c05ae7 100644
--- a/src/api/common.ts
+++ b/src/api/common.ts
@@ -1,5 +1,23 @@
 import { axiosInstance } from '../utils/axios'
 
+export const getNotification = async (pageNum: number, sizeNum: number) => {
+  const response = await axiosInstance.get(`/api/notifications?page=${pageNum}&size=${sizeNum}`)
+
+  return response.data
+}
+
+export const patchNotificationRead = async (notificationId: number) => {
+  const response = await axiosInstance.patch(`/api/notification/${notificationId}`)
+  console.log(notificationId)
+  return response.data
+}
+
+export const getNotifiCount = async () => {
+  const response = await axiosInstance.get(`/api/notifications/count`)
+  console.log(response.data)
+  return response.data
+}
+
 export const getMainCategory = async () => {
   const response = await axiosInstance.get('/api/main-category')
   return response.data
diff --git a/src/components/EditInformation.vue b/src/components/EditInformation.vue
index be33be70..549368a1 100644
--- a/src/components/EditInformation.vue
+++ b/src/components/EditInformation.vue
@@ -16,7 +16,7 @@
         class="w-24 h-24 rounded-full object-cover border mt-3" />
       <div
         v-else
-        class="w-24 h-24 rounded-full bg-background-1 flex items-center justify-center"></div>
+        class="w-24 h-24 rounded-full bg-background-1 flex items-center justify-center mt-3"></div>
       <!-- 파일 업로드 필요 -->
       <p class="mt-3 text-xs text-primary1 font-bold cursor-pointer">변경</p>
     </div>
@@ -91,7 +91,7 @@ const memberId = ref('Chole.yeon')
 const memberEmail = ref('taskflow123@gachon.ac.kr')
 const memberDepartment = ref('인프라팀')
 const memberJob = ref('인프라 아키텍처')
-const imageUrl = ref('../../public/images/mockProfile.jpg')
+const imageUrl = ref('')
 const isModalVisible = ref(false)
 
 const memberForm = ref({
diff --git a/src/components/top-bar/NotificationModal.vue b/src/components/top-bar/NotificationModal.vue
index 70378eca..9027748c 100644
--- a/src/components/top-bar/NotificationModal.vue
+++ b/src/components/top-bar/NotificationModal.vue
@@ -7,7 +7,7 @@
       class="flex relative w-[1200px] h-[72px] bg-opacity-15"
       @click.self="closeModal">
       <div
-        class="absolute right-6 top-[72px] h-60 w-80 bg-white rounded-lg shadow-[0_3px_10px_rgb(0,0,0,0.2)]">
+        class="absolute right-6 top-[72px] h-60 w-80 bg-white rounded-lg shadow-[0_3px_10px_rgb(0,0,0,0.2)] overflow-hidden">
         <div class="flex relative px-4 pt-3 pb-2 border-b border-border-2">
           <p class="text-body font-bold text-xs">알림</p>
           <div class="absolute right-4">
@@ -25,30 +25,40 @@
             </div>
           </div>
         </div>
-        <div class="max-h-[186px] flex flex-col h-full overflow-y-auto">
-          <div class="overflow-y-scroll flex"></div>
-          <button :class="['flex flex-col border-b py-3 px-4', { 'bg-primary2': isCheck }]">
-            <p class="text-xs text-body font-bold">{{ title }}</p>
-            <div class="flex text-xs pt-2">
-              <span class="text-black">
-                <span class="text-primary1 font-bold">"{{ taskTitle }}"</span>
-                &nbsp;요청이&nbsp;
-                <span class="text-primary1 font-bold">{{ message }}</span>
-                &nbsp;상태로 변경 되었습니다
-              </span>
-            </div>
-          </button>
-          <button :class="['flex flex-col border-b py-3 px-4', { 'bg-primary2': !isCheck }]">
-            <p class="text-xs text-body font-bold">{{ title }}</p>
-            <div class="flex text-xs pt-2">
-              <span class="text-black">
-                <span class="text-primary1 font-bold">"{{ taskTitle }}"</span>
-                &nbsp;요청이&nbsp;
-                <span class="text-primary1 font-bold">{{ message }}</span>
-                &nbsp;상태로 변경 되었습니다
-              </span>
-            </div>
-          </button>
+        <div class="max-h-[185px] flex flex-col h-full overflow-y-auto">
+          <div class="overflow-y-scroll flex flex-col">
+            <button
+              v-for="notification in notifications"
+              :key="notification.notificationId"
+              @click="readNotifi(notification.notificationId)"
+              :class="[
+                'flex flex-col border-b py-3 px-4',
+                { 'bg-primary2': !notification.isRead }
+              ]">
+              <p class="text-xs text-body font-bold">
+                {{ notification.notificationType }}
+              </p>
+              <div class="flex text-xs pt-2">
+                <span class="text-black">
+                  <span class="text-primary1 font-bold"> "{{ notification.taskTitle }}" </span>
+                  &nbsp;요청이&nbsp;
+                  <span class="text-primary1 font-bold">
+                    {{ notification.message }}
+                  </span>
+                  &nbsp;상태로 변경되었습니다.
+                </span>
+              </div>
+            </button>
+            <InfiniteLoading
+              @infinite="loadMoreNotifications"
+              class="flex items-center justify-center"
+              ><template v-slot:complete>
+                <span class="flex py-2 items-center justify-center text-xs text-primary1"
+                  >더 이상 없음</span
+                >
+              </template></InfiniteLoading
+            >
+          </div>
         </div>
       </div>
     </div>
@@ -56,17 +66,50 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
+import InfiniteLoading from 'v3-infinite-loading'
+import 'v3-infinite-loading/lib/style.css'
 import CommonIcons from '../common/CommonIcons.vue'
 import { smallCheckIcon, closeIcon } from '@/constants/iconPath'
+import { getNotification, patchNotificationRead } from '@/api/common'
+
 const props = defineProps<{
   isOpen: boolean
 }>()
 
-const title = ref('작업 상태 변경 알림')
-const taskTitle = ref('VM 생성 요청')
-const message = ref('진행 중')
-const isCheck = ref(true)
+const notifications = ref<any[]>([])
+const page = ref(0)
+const pageSize = 5
+const hasNext = ref(true)
+
+const loadMoreNotifications = async ($state: any) => {
+  try {
+    const response = await getNotification(page.value, pageSize)
+    console.log(response)
+
+    if (response.isFirst) {
+      notifications.value = response.content
+    } else {
+      notifications.value.push(...response.content)
+    }
+
+    hasNext.value = response.hasNext
+
+    if (hasNext.value) {
+      page.value++
+      $state.loaded()
+    } else {
+      $state.complete()
+    }
+  } catch (error) {
+    console.error('알림을 불러오는 중 오류 발생:', error)
+    $state.error()
+  }
+}
+
+const readNotifi = (id: number) => {
+  patchNotificationRead(id)
+}
 
 const emit = defineEmits<{
   (e: 'close'): void
diff --git a/src/components/top-bar/ProfileModal.vue b/src/components/top-bar/ProfileModal.vue
index 766e11cc..f5e1088b 100644
--- a/src/components/top-bar/ProfileModal.vue
+++ b/src/components/top-bar/ProfileModal.vue
@@ -3,6 +3,12 @@
     v-if="isOpen"
     class="fixed inset-0 flex z-50 justify-center"
     @click.self="closeModal">
+    <ModalView
+      :isOpen="isModalVisible"
+      type="successType"
+      @close="closeLogoutModal">
+      <template #header> 로그아웃 되었습니다. </template>
+    </ModalView>
     <div
       class="flex relative w-[1200px] h-[72px] bg-opacity-15"
       @click.self="closeModal">
@@ -11,10 +17,18 @@
         <div
           class="flex items-center justify-center relative px-6 py-8 border-b bg-primary2 border-border-2">
           <div class="flex flex-col items-center justify-center">
-            <div class="w-24 h-24 bg-background-1 rounded-full mb-6"></div>
+            <img
+              v-if="imgUrl"
+              class="rounded-full mb-6 w-24 h-24"
+              :src="info.imageUrl"
+              alt="프로필 이미지" />
+            <div
+              v-else
+              class="w-24 h-24 bg-background-1 rounded-full mb-6" />
             <div>
               <div class="flex flex-col justify-center items-center w-[172px]">
                 <p class="text-xs text-body font-bold">{{ name }}</p>
+
                 <p class="text-black">{{ nickname }}</p>
               </div>
             </div>
@@ -40,6 +54,20 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
+import { deleteLogout } from '@/api/auth'
+import ModalView from '../ModalView.vue'
+import { useMemberStore } from '@/stores/member'
+import { storeToRefs } from 'pinia'
+import { computed } from 'vue'
+
+const isModalVisible = ref(false)
+
+const memberStore = useMemberStore()
+const { info } = storeToRefs(memberStore)
+
+const imgUrl = computed(() => info.value.imageUrl)
+const name = computed(() => info.value.memberName)
+const nickname = computed(() => info.value.nickname)
 
 const router = useRouter()
 
@@ -47,9 +75,6 @@ const props = defineProps<{
   isOpen: boolean
 }>()
 
-const name = ref('벡지연')
-const nickname = ref('Chloe.yeon')
-
 const emit = defineEmits<{
   (e: 'close'): void
 }>()
@@ -61,7 +86,17 @@ const handleEdit = () => {
   router.push('/edit-information')
   emit('close')
 }
+const openLogoutModal = () => {
+  isModalVisible.value = true
+}
+const closeLogoutModal = () => {
+  isModalVisible.value = false
+  emit('close')
+  router.push('/login')
+}
+
 const handleLogout = () => {
-  // 로그아웃 API 추가 필요
+  deleteLogout()
+  openLogoutModal()
 }
 </script>
diff --git a/src/components/top-bar/TopBar.vue b/src/components/top-bar/TopBar.vue
index e3b12a3e..9d1b47e6 100644
--- a/src/components/top-bar/TopBar.vue
+++ b/src/components/top-bar/TopBar.vue
@@ -23,7 +23,7 @@
         <button
           type="button"
           @click="toggleNotifi">
-          <NotificationIcon :new-notification="12" />
+          <NotificationIcon :new-notification="countNotifi" />
         </button>
         <button
           type="button"
@@ -46,7 +46,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, watch } from 'vue'
 import CommonIcons from '../common/CommonIcons.vue'
 import SideBar from './SideBar.vue'
 import { hamburgerIcon } from '../../constants/iconPath'
@@ -55,15 +55,18 @@ import { storeToRefs } from 'pinia'
 import { useMemberStore } from '@/stores/member'
 import NotificationModal from './NotificationModal.vue'
 import ProfileModal from './ProfileModal.vue'
+import { getNotifiCount } from '@/api/common'
 import { useRoute, useRouter } from 'vue-router'
 import { PERMITTED_URL } from '@/constants/common'
 
 const memberStore = useMemberStore()
-const { info } = storeToRefs(memberStore)
+const { isLogined, info } = storeToRefs(memberStore)
 
 const route = useRoute()
 const router = useRouter()
 onMounted(async () => {
+  await fetchNotificationCount()
+
   await memberStore.updateMemberInfoWithToken()
 
   const originUrl = route.path.split('/')[1]
@@ -81,11 +84,20 @@ onMounted(async () => {
 })
 
 const isSideOpen = ref(false)
-const isLogined = ref(true)
+const countNotifi = ref(0)
 
 const isNotifiVisible = ref(false)
 const isProfileVisible = ref(false)
 
+const fetchNotificationCount = async () => {
+  try {
+    const data = await getNotifiCount()
+    countNotifi.value = data.count
+  } catch (error) {
+    console.error('알림 개수 불러오기 실패:', error)
+  }
+}
+
 const toggleNotifi = () => {
   isNotifiVisible.value = !isNotifiVisible.value
 }
@@ -96,4 +108,14 @@ const toggleProfile = () => {
 const onCloseSide = () => {
   isSideOpen.value = false
 }
+
+watch(
+  () => info.value,
+  async newInfo => {
+    if (newInfo.memberName) {
+      await fetchNotificationCount()
+    }
+  },
+  { deep: true }
+)
 </script>
diff --git a/src/stores/member.ts b/src/stores/member.ts
index e1faef45..a3b1ef72 100644
--- a/src/stores/member.ts
+++ b/src/stores/member.ts
@@ -2,6 +2,7 @@ import { defineStore } from 'pinia'
 import { axiosInstance } from '@/utils/axios'
 import { ref } from 'vue'
 import type { User } from '@/types/auth'
+import Cookies from 'js-cookie'
 
 export const useMemberStore = defineStore('memberInfo', () => {
   const info = ref<User>({
@@ -12,15 +13,14 @@ export const useMemberStore = defineStore('memberInfo', () => {
     memberStatus: ''
   })
 
-  async function updateMemberInfoWithToken() {
-    try {
-      const response = await axiosInstance.get('/api/members/info')
+  const refreshToken = ref(Cookies.get('refreshToken') || '')
+  const isLogined = ref(!!refreshToken.value)
 
-      console.log('API Response:', response.data)
-      updateMemberInfo(response.data)
-    } catch (error) {
-      console.error('updata error:', error)
-    }
+  async function updateMemberInfoWithToken() {
+    const response = await axiosInstance.get('/api/members/info')
+    console.log('API Response:', response.data)
+    updateMemberInfo(response.data)
+    isLogined.value = true
   }
 
   function updateMemberInfo(responseData: any) {
@@ -31,13 +31,27 @@ export const useMemberStore = defineStore('memberInfo', () => {
       memberRole: responseData.role || '',
       memberStatus: ''
     }
-
     console.log('Updated member info:', info.value)
   }
 
+  function logout() {
+    info.value = {
+      memberName: '',
+      nickname: '',
+      imageUrl: '',
+      memberRole: '',
+      memberStatus: ''
+    }
+    isLogined.value = false
+    Cookies.remove('accessToken')
+    Cookies.remove('refreshToken')
+  }
+
   return {
     info,
+    isLogined,
     updateMemberInfo,
-    updateMemberInfoWithToken
+    updateMemberInfoWithToken,
+    logout
   }
 })
diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
index 808044c8..1dd39baf 100644
--- a/src/views/LoginView.vue
+++ b/src/views/LoginView.vue
@@ -1,9 +1,11 @@
 <template>
   <div class="max-w-400">
     <div class="py-16">
-      <TitleContainer
-        :title="'TaskFlow\n로그인'"
-        content="아이디와 비밀번호를 입력해주세요" />
+      <div class="text-4xl font-bold text-center">
+        <p class="pb-2">TaskFlow</p>
+        <p class="pb-2">로그인</p>
+      </div>
+      <p class="text-center font-bold text-body">아이디와 비밀번호를 입력해주세요</p>
     </div>
     <form
       @submit.prevent="handleLogin"
@@ -46,7 +48,6 @@
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { postLogin } from '@/api/auth'
-import TitleContainer from '@/components/common/TitleContainer.vue'
 
 const router = useRouter()