diff --git a/src/assets/scss/common.scss b/src/assets/scss/common.scss
index 2118e22..30b37ff 100644
--- a/src/assets/scss/common.scss
+++ b/src/assets/scss/common.scss
@@ -65,6 +65,13 @@ $mobile-header-height : 100px;
   font-size: $font-size;
 }
 
+@mixin root-container {
+  background: $back-color;
+  width: 100%;
+  min-height: 100%;
+  height: 100%;
+  overflow: auto;
+}
 
 
 
diff --git a/src/components/common/Loading.vue b/src/components/common/Loading.vue
new file mode 100644
index 0000000..c08b1f0
--- /dev/null
+++ b/src/components/common/Loading.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="loading">
+    <img src="@/assets/images/loading.gif" alt="loading">
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.loading {
+  @include flex-box(row, center, 0px);
+  position: absolute;
+  background: rgba(255, 255, 255, 0.8);
+  top: $nav-bar-height;
+  left: $side-bar-width;
+  width: calc(100% - $side-bar-width);
+  height: calc(100% - $nav-bar-height);
+  z-index: 9999;
+
+  img {
+    width: 160px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/common/TheNavBar.vue b/src/components/common/TheNavBar.vue
index c09af11..7dbeefa 100644
--- a/src/components/common/TheNavBar.vue
+++ b/src/components/common/TheNavBar.vue
@@ -33,11 +33,11 @@ export default {
   .nav-bar {
     @include flex-box(row, space-between, 0px);
     background-color: $theme-color;
-    position: fixed;
+    position: absolute;
     top: 0px;
     left: 0px;
     height: $nav-bar-height;
-    width: 100vw;
+    width: 100%;
     padding: 0px 20px;
     z-index: 2;
     .nav-info {
diff --git a/src/components/common/TheSideBar.vue b/src/components/common/TheSideBar.vue
index 5484bcf..828fd82 100644
--- a/src/components/common/TheSideBar.vue
+++ b/src/components/common/TheSideBar.vue
@@ -40,11 +40,11 @@ export default {
 
 <style lang="scss" scoped>
   .side-bar {
-    position: fixed;
+    position: absolute;
     left: 0;
-    top:60px;
+    top: $nav-bar-height;
     width: $side-bar-width;
-    height: calc(100vh - $nav-bar-height);;
+    height: calc(100% - $nav-bar-height);;
     box-shadow: 3px 0px 4px 0px rgb(0, 0, 0, 0.25);
     z-index: 1;
     @include flex-box(column, space-between, 0px);
diff --git a/src/components/contract/create/ContractChooseInfo.vue b/src/components/contract/create/ContractChooseInfo.vue
index b51ef60..560b504 100644
--- a/src/components/contract/create/ContractChooseInfo.vue
+++ b/src/components/contract/create/ContractChooseInfo.vue
@@ -109,6 +109,7 @@ export default {
 
 .right-side {
   background-color: white;
+  max-width: 800px;
   padding: 50px;
   border-radius: 10px;
   box-shadow: $base-shadow;
diff --git a/src/components/invoice/detail/InvoiceInfo.vue b/src/components/invoice/detail/InvoiceInfo.vue
index e3536e6..2d2afb4 100644
--- a/src/components/invoice/detail/InvoiceInfo.vue
+++ b/src/components/invoice/detail/InvoiceInfo.vue
@@ -18,7 +18,6 @@
     </div>
     <div class="info-box">
       <span class="title">계약 정보</span>
-
       <div class="double-info">
         <TitleInfoVue title="계약ID" :info="String(invoiceDetailStore.data.contractId)" />
         <TitleInfoVue title="청구ID" :info="String(invoiceDetailStore.data.invoiceId)" />
@@ -46,7 +45,6 @@
 <script>
 import { mapStores } from 'pinia';
 import { toDateFromDateTime } from '@/utils/formatter';
-import { getInvoice } from '@/utils/invoice';
 import TitleInfoVue from '../../common/info/TitleInfo.vue';
 import { useInvoiceDetailStore } from '@/stores/invoice/invoiceDetail';
 
@@ -73,21 +71,12 @@ export default {
       return toDateFromDateTime(this.invoiceDetailStore.data.updatedAt);
     },
   },
-  async created() {
-    this.invoiceDetailStore.$reset();
-    const result = await getInvoice(this.$route.params.id);
-
-    if (result.code !== 200) {
-      // 예외 처리
-    }
-  }
-
 }
 </script>
 
 <style lang="scss" scoped>
 .invoice-info {
-  @include flex-box(column, space-between, 20px);
+  @include flex-box(column, center, 20px);
   width: 100%;
   height: 100%;
 }
diff --git a/src/components/item/ItemInfo.vue b/src/components/item/ItemInfo.vue
index d6b657e..1a2cbeb 100644
--- a/src/components/item/ItemInfo.vue
+++ b/src/components/item/ItemInfo.vue
@@ -39,8 +39,8 @@ export default {
   @include flex-box(column, center, 20px);
   width: 100%;
   img {
-    width: 320px;
-    height: 320px;
+    width: 250px;
+    height: 250px;
     object-fit: cover;
     border: $theme-color solid 3px;
     border-radius: 10px;
diff --git a/src/main.js b/src/main.js
index a22429c..19144d7 100644
--- a/src/main.js
+++ b/src/main.js
@@ -9,6 +9,7 @@ import piniaPersist from 'pinia-plugin-persist'
 
 import App from './App.vue'
 import router from './router'
+import { useLoadingStore } from './stores/loading'
 
 const app = createApp(App)
 const pinia = createPinia();
diff --git a/src/router/index.js b/src/router/index.js
index 80d9300..1901201 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -10,7 +10,7 @@ const router = createRouter({
       component: () => import('@/views/MainView.vue'),
       meta: { 
         requiresAuth: true,
-        nonMember: false,  
+        forMember: false,  
       },
       children: [
         {
@@ -93,6 +93,11 @@ const router = createRouter({
           name:'settingPayment',
           component: () => import('@/views/setting/SettingPaymentView.vue')
         },
+        {
+          path : '/no-data',
+          name: 'noData',
+          component: () => import('@/views/error/NoDataView.vue')
+        }
       ]
     },
     {
@@ -101,7 +106,7 @@ const router = createRouter({
       component: () => import('@/views/auth/AuthView.vue'),
       meta: { 
         requiresAuth: false,
-        nonMember: false, 
+        forMember: false, 
       },
       children: [
         {
@@ -122,7 +127,7 @@ const router = createRouter({
       component: () => import('@/views/MobileView.vue'),
       meta: { 
         requiresAuth: false,
-        nonMember: true,
+        forMember: true,
       },
       children: [
         {
@@ -257,6 +262,23 @@ const router = createRouter({
         },
       ]
     },
+    {
+      path: "/notFound",
+      name: "notFound",
+      meta: { 
+        requiresAuth: false,
+        forMember: true,
+      },
+      component: () => import('@/views/error/NotFoundView.vue')
+    },
+    {
+      path: "/:pathMatch(.*)*",
+      redirect: "/notFound",
+      meta: { 
+        requiresAuth: false,
+        forMember: true,
+      },
+    }
   ]
 });
 
@@ -265,7 +287,7 @@ router.beforeEach((to, from, next) => {
 
   if (to.meta.requiresAuth && !authStore.isLoggedIn) {
     next('/login');
-  } else if (!to.meta.nonMember && !to.meta.requiresAuth && authStore.isLoggedIn) {
+  } else if (!to.meta.forMember && !to.meta.requiresAuth && authStore.isLoggedIn) {
     next('');
   } else {
     next();
diff --git a/src/stores/loading.js b/src/stores/loading.js
new file mode 100644
index 0000000..2fb497c
--- /dev/null
+++ b/src/stores/loading.js
@@ -0,0 +1,14 @@
+import { defineStore } from 'pinia'
+
+export const useLoadingStore = defineStore('loading', {
+  state() {
+    return {
+      isLoading: false,
+    }
+  },
+  actions: {
+    setIsLoading(value) {
+      this.isLoading = value;
+    }
+  },
+})
\ No newline at end of file
diff --git a/src/utils/axios.js b/src/utils/axios.js
index caee3f3..074c096 100644
--- a/src/utils/axios.js
+++ b/src/utils/axios.js
@@ -28,6 +28,7 @@ const mainAxios = axios.create({
   withCredentials: true
 })
 
+
 mainAxios.interceptors.response.use(
   (response) => {
     return response.data;
@@ -37,12 +38,13 @@ mainAxios.interceptors.response.use(
     if (error.response.data.code === 401) {
       const authStore = useAuthStore();
       authStore.logout();
-    // 만료된 엑세스 토큰
+      // 만료된 엑세스 토큰
     } else if (error.response.data.code === 419) {
       await mainAxios.post('auth/reissue')
       return await mainAxios(error.config);
-    // 그 외의 예외
+      // 존재하지 않는 데이터
     } else {
+    // 그 외의 예외
       return error.response.data;
     }
   }
diff --git a/src/utils/contract.js b/src/utils/contract.js
index 4c7b26e..0b4a8c2 100644
--- a/src/utils/contract.js
+++ b/src/utils/contract.js
@@ -3,11 +3,13 @@ import { fileAxios, mainAxios } from "./axios";
 import { useContractCreateStore } from "@/stores/contract/contractCreate";
 import { useContractDetailStore } from "@/stores/contract/contractDetail";
 import { useContractBulkStore } from "@/stores/contract/contractBulk";
+import { useLoadingStore } from "@/stores/loading";
 
 const contractListStore = useContractListStore();
 const contractDetailStore = useContractDetailStore();
 const constractCreateStore = useContractCreateStore();
 const contractBulkStore = useContractBulkStore();
+const loadingStore = useLoadingStore();
 
 // 계약 목록 조회
 async function getContractList() {
@@ -37,6 +39,8 @@ async function getContract(contractId) {
   
   if (result.code === 200) {
     contractDetailStore.setData(result.data);
+  } if (result.code === 404) {
+    
   }
 
   return result;
@@ -44,6 +48,8 @@ async function getContract(contractId) {
 
 // 계약 생성
 async function createContract() {
+  loadingStore.setIsLoading(true);
+
   const data = {
     "memberId": constractCreateStore.member.id,
     "itemId": constractCreateStore.item.id,
@@ -59,11 +65,15 @@ async function createContract() {
 
   const result = await mainAxios.post('contracts', data);
 
+  loadingStore.setIsLoading(false);
+
   return result;
 }
 
 // 계약 대량 등록
 async function createContractBulk(file) {
+  loadingStore.setIsLoading(true);
+
   const formData = new FormData();
   formData.append('file', file, 'file');
 
@@ -77,11 +87,15 @@ async function createContractBulk(file) {
     }
   }
 
+  loadingStore.setIsLoading(false);
+
   return result;
 }
 
 // 계약 수정
 async function editContract(contractId) {
+  loadingStore.setIsLoading(true);
+
   const data = {
     "itemPrice": constractCreateStore.item.price,
     "itemAmount": constractCreateStore.item.count,
@@ -93,10 +107,10 @@ async function editContract(contractId) {
     "paymentDueCycle": constractCreateStore.paymentDueCycle
   }
 
-  console.log(data)
-
   const result = await mainAxios.put(`contracts/${contractId}`, data);
 
+  loadingStore.setIsLoading(false);
+
   return result;
 }
 
diff --git a/src/utils/invoice.js b/src/utils/invoice.js
index ffa5b9f..1875a32 100644
--- a/src/utils/invoice.js
+++ b/src/utils/invoice.js
@@ -2,15 +2,21 @@ import { useInvoiceListStore } from "@/stores/invoice/invoiceList";
 import { mainAxios } from "./axios";
 import { useInvoiceDetailStore } from "@/stores/invoice/invoiceDetail";
 import { useInvoiceCreateStore } from "@/stores/invoice/invoiceCreate";
+import { useLoadingStore } from "@/stores/loading";
 
 const invoiceListStore = useInvoiceListStore();
 const invoiceDetailStore = useInvoiceDetailStore();
 const invoiceCreateStore = useInvoiceCreateStore();
+const loadingStore = useLoadingStore();
+
 
 // 청구서 전송
 async function sendInvoice(invoiceId) {
+  loadingStore.setIsLoading(true);
   const result = await mainAxios.get(`invoices/${invoiceId}/send`);
 
+  loadingStore.setIsLoading(false);
+
   return result;
 }
 
diff --git a/src/utils/item.js b/src/utils/item.js
index b377496..98584cd 100644
--- a/src/utils/item.js
+++ b/src/utils/item.js
@@ -3,6 +3,8 @@ import { fileAxios, mainAxios } from "./axios";
 
 const itemStore = useItemStore();
 
+
+
 // 아이템 목록 조회
 async function getItemList() {
 
diff --git a/src/views/MainView.vue b/src/views/MainView.vue
index eef3505..98d8d88 100644
--- a/src/views/MainView.vue
+++ b/src/views/MainView.vue
@@ -1,33 +1,53 @@
 <template>
-  <div class="main-view" >
+  <div class="main-view" :style="{ width: width + 'px', height: height + 'px'}">
     <TheNavBarVue/>
     <TheSideBarVue/>
     <div class="main-content">
       <RouterView/>
     </div>
+    <LoadingVue v-show="loadingStore.isLoading"/>
   </div>
 </template>
 
 <script>
 import TheNavBarVue from "@/components/common/TheNavBar.vue";
 import TheSideBarVue from "@/components/common/TheSideBar.vue";
+import LoadingVue from "@/components/common/Loading.vue";
+import { useLoadingStore } from "@/stores/loading";
+import { mapStores } from "pinia";
 
 export default {
   name: 'MainView',
+  watch: {
+
+  },
+  data() {
+    return {
+      width: window.innerWidth,
+      height: window.innerHeight
+    }
+  },
   components: {
     TheNavBarVue, 
-    TheSideBarVue  
+    TheSideBarVue,
+    LoadingVue  
   },
+  computed: {
+    ...mapStores(useLoadingStore),
+  }
 }
 </script>
 
 <style lang="scss" scoped>
+  .main-view {
+    position:relative;
+  }
   .main-content {
-    position: fixed;
+    position: absolute;
     top: $nav-bar-height;
     left: $side-bar-width;
-    width: calc(100vw - $side-bar-width);
-    height: calc(100vh - $nav-bar-height);
-    overflow-x: auto;
+    overflow: auto;
+    width: calc(100% - $side-bar-width);
+    height: calc(100% - $nav-bar-height);
   }
 </style>
\ No newline at end of file
diff --git a/src/views/contract/ContractBulkCreateView.vue b/src/views/contract/ContractBulkCreateView.vue
index 133c3dc..c3baa8b 100644
--- a/src/views/contract/ContractBulkCreateView.vue
+++ b/src/views/contract/ContractBulkCreateView.vue
@@ -72,11 +72,10 @@ export default {
 
 <style lang="scss" scoped>
 .root-container {
-  @include flex-box(row, center, 100px);
-  background: $back-color;
-  width: 100%;
+  @include flex-box(row, center, 50px);
+  @include root-container;
   height: 100%;
-  padding: 100px 30px;
+  padding: 50px;
 }
 
 .left-side {
diff --git a/src/views/contract/ContractCreateView.vue b/src/views/contract/ContractCreateView.vue
index e2333b4..94a3efb 100644
--- a/src/views/contract/ContractCreateView.vue
+++ b/src/views/contract/ContractCreateView.vue
@@ -2,23 +2,23 @@
   <div class="root-container">
     <div class="left-side">
       <ContractCreateInfoVue />
-      <div class="warning-msg">{{warningMsg}}</div>
+      <div class="warning-msg">{{ warningMsg }}</div>
       <div class="btn-box" v-if="contractCreateStore.step === 0">
-        <WarningWideBtnVue title="취소" :func="routeContratList"/>
-        <ThemeWideBtnVue title="다음" :func="() => changeStep(1)"/>
+        <WarningWideBtnVue title="취소" :func="routeContratList" />
+        <ThemeWideBtnVue title="다음" :func="() => changeStep(1)" />
       </div>
       <div class="btn-box" v-if="contractCreateStore.step === 1">
-        <ThemeWideBtnVue title="이전" :func="() => changeStep(0)"/>
-        <ThemeWideBtnVue title="다음" :func="() => changeStep(2)"/>
+        <ThemeWideBtnVue title="이전" :func="() => changeStep(0)" />
+        <ThemeWideBtnVue title="다음" :func="() => changeStep(2)" />
       </div>
       <div class="btn-box" v-if="contractCreateStore.step === 2">
-        <ThemeWideBtnVue title="이전" :func="() => changeStep(1)"/>
-        <SuccessWideBtnVue title="완료" :func="createContract"/>
+        <ThemeWideBtnVue title="이전" :func="() => changeStep(1)" />
+        <SuccessWideBtnVue title="완료" :func="createContract" />
       </div>
     </div>
-    <ContractChooseMemberVue v-if="contractCreateStore.step === 0"/>
-    <ContractChooseItemVue v-if="contractCreateStore.step === 1"/>
-    <ContractChooseInfoVue v-if="contractCreateStore.step === 2"/>
+    <ContractChooseMemberVue v-if="contractCreateStore.step === 0" />
+    <ContractChooseItemVue v-if="contractCreateStore.step === 1" />
+    <ContractChooseInfoVue v-if="contractCreateStore.step === 2" />
   </div>
 </template>
 
@@ -50,13 +50,13 @@ export default {
     return {
       warningMsg: ''
     }
-  },  
+  },
   computed: {
     ...mapStores(useContractCreateStore),
   },
   methods: {
     routeContratList() {
-      this.$router.push({name: 'contract'});
+      this.$router.push({ name: 'contract' });
     },
     changeStep(step) {
       this.contractCreateStore.setStep(step);
@@ -81,18 +81,17 @@ export default {
 
 <style lang="scss" scoped>
 .root-container {
-  @include flex-box(row, space-between, 100px);
-  background: $back-color;
-  width: 100%;
-  height: 100%;
-  padding: 60px 130px;
+  @include flex-box(row, center, 100px);
+  @include root-container;
+  height: auto;
+  padding: 30px 30px;
 }
 
 .left-side {
   @include flex-box(column, space-between, 20px);
   min-width: 700px;
   width: 40%;
-  min-height: 100%;
+  height: 100%;
   padding: 40px 50px;
   border-radius: 10px;
   box-shadow: $base-shadow;
diff --git a/src/views/contract/ContractDetailView.vue b/src/views/contract/ContractDetailView.vue
index 9257c5a..a1f786a 100644
--- a/src/views/contract/ContractDetailView.vue
+++ b/src/views/contract/ContractDetailView.vue
@@ -106,7 +106,11 @@ export default {
   },
   async created() {
     this.consentDetailStore.$reset();
-    await getContract(this.$route.params.id);
+    const result = await getContract(this.$route.params.id);
+    if (result.code === 404) {
+      this.$router.push({name: 'noData'});
+      return;
+    }
     await getConsent(this.contractDetailStore.data.member.id);
   }
 }
@@ -117,9 +121,8 @@ export default {
 
 .root-container {
   @include flex-box(row, space-between, 100px);
-  background: $back-color;
-  width: 100%;
-  height: 100%;
+  @include root-container;
+  height: auto;
   padding: 60px 130px;
 }
 
diff --git a/src/views/contract/ContractEditView.vue b/src/views/contract/ContractEditView.vue
index 65776f5..9e14cbf 100644
--- a/src/views/contract/ContractEditView.vue
+++ b/src/views/contract/ContractEditView.vue
@@ -2,13 +2,13 @@
   <div class="root-container">
     <div class="left-side">
       <ContractEditInfoVue />
-      <div class="warning-msg">{{warningMsg}}</div>
+      <div class="warning-msg">{{ warningMsg }}</div>
       <div class="btn-box" v-if="contractCreateStore.step === 2">
-        <WarningWideBtnVue title="취소" :func="routeContratDetail"/>
-        <SuccessWideBtnVue title="완료" :func="editContract"/>
+        <WarningWideBtnVue title="취소" :func="routeContratDetail" />
+        <SuccessWideBtnVue title="완료" :func="editContract" />
       </div>
     </div>
-    <ContractChooseInfoVue v-if="contractCreateStore.step === 2"/>
+    <ContractChooseInfoVue v-if="contractCreateStore.step === 2" />
   </div>
 </template>
 
@@ -34,7 +34,7 @@ export default {
     return {
       warningMsg: ''
     }
-  },  
+  },
   computed: {
     ...mapStores(useContractCreateStore),
     ...mapStores(useContractDetailStore)
@@ -55,7 +55,11 @@ export default {
   async created() {
     this.contractCreateStore.setStep(2);
     if (this.contractDetailStore.data.id !== Number(this.$route.params.id)) {
-      await getContract(this.$route.params.id);
+      const result = await getContract(this.$route.params.id);
+      if (result.code === 404) {
+        this.$router.push({ name: 'noData' });
+        return;
+      }
     }
     this.contractCreateStore.setAllDataFromDetailStore(this.contractDetailStore.data);
   }
@@ -64,11 +68,10 @@ export default {
 
 <style lang="scss" scoped>
 .root-container {
-  @include flex-box(row, space-between, 100px);
-  background: $back-color;
-  width: 100%;
-  height: 100%;
-  padding: 60px 130px;
+  @include flex-box(row, center, 50px);
+  @include root-container;
+  height: auto;
+  padding: 30px 30px;
 }
 
 .left-side {
diff --git a/src/views/contract/ContractListView.vue b/src/views/contract/ContractListView.vue
index 729d83c..c473671 100644
--- a/src/views/contract/ContractListView.vue
+++ b/src/views/contract/ContractListView.vue
@@ -74,8 +74,7 @@ export default {
 
 .root-container {
   @include flex-box(column, space-between, 20px);
-  background: $back-color;
-  width: 100%;
+  @include root-container;
   height: 100%;
   padding: 30px 40px
 }
diff --git a/src/views/error/NoDataView.vue b/src/views/error/NoDataView.vue
new file mode 100644
index 0000000..a3ebe30
--- /dev/null
+++ b/src/views/error/NoDataView.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="root-container">
+    <img src="@/assets/images/warn.png" alt="warning">
+    <div class="main-container">
+      <span>존재하지 않는 데이터입니다.</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NoDataView',
+}
+</script>
+
+<style lang="scss" scoped>
+  .root-container {
+    @include flex-box(column, center, 40px);
+    @include root-container;
+    img {
+      width: 150px;
+    }
+    .main-container {
+      @include flex-box(row, center, 20px);
+      span {
+        font-weight: bold;
+        font-size: 18px;
+      }
+      i {
+        @include base-icon;
+        font-size: 24px;
+      }
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/views/error/NotFoundView.vue b/src/views/error/NotFoundView.vue
new file mode 100644
index 0000000..de241ee
--- /dev/null
+++ b/src/views/error/NotFoundView.vue
@@ -0,0 +1,42 @@
+<template>
+  <div class="root-container">
+    <img src="@/assets/images/warn.png" alt="warning">
+    <div class="main-container">
+      <i class="bi bi-arrow-left-square-fill" @click="goBack"></i>
+      <span>요청하신 페이지를 찾을 수 없습니다.</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NotFoundView',
+  methods: {
+    goBack() {
+      this.$router.go(-1);
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .root-container {
+    @include flex-box(column, center, 40px);
+    width: 100vw;
+    height: 100vh;
+    img {
+      width: 150px;
+    }
+    .main-container {
+      @include flex-box(row, center, 20px);
+      span {
+        font-weight: bold;
+        font-size: 18px;
+      }
+      i {
+        @include base-icon;
+        font-size: 24px;
+      }
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/views/home/HomeView.vue b/src/views/home/HomeView.vue
index 381f7b1..0164948 100644
--- a/src/views/home/HomeView.vue
+++ b/src/views/home/HomeView.vue
@@ -79,9 +79,8 @@ export default {
 <style lang="scss" scoped>
 .root-container {
   @include flex-box(row, center, 0px);
-  background: $back-color;
-  width: 100%;
-  height: 100%;
+  @include root-container;
+  height: auto;
   padding: 30px 50px
 }
 
diff --git a/src/views/invoice/InvoiceCreateView.vue b/src/views/invoice/InvoiceCreateView.vue
index e05c52c..0548724 100644
--- a/src/views/invoice/InvoiceCreateView.vue
+++ b/src/views/invoice/InvoiceCreateView.vue
@@ -125,9 +125,7 @@ export default {
 
 .root-container {
   @include flex-box(column, space-between, 30px);
-  background: $back-color;
-  width: 100%;
-  height: 100%;
+  @include root-container;
   padding: 30px 40px
 }
 
diff --git a/src/views/invoice/InvoiceDetailView.vue b/src/views/invoice/InvoiceDetailView.vue
index c409191..f37cba6 100644
--- a/src/views/invoice/InvoiceDetailView.vue
+++ b/src/views/invoice/InvoiceDetailView.vue
@@ -37,6 +37,7 @@ import { mapStores } from 'pinia'
 import { usePaymentStore } from '@/stores/invoice/payment'
 import { sendInvoice } from '@/utils/invoice'
 import { useInvoiceDetailStore } from '@/stores/invoice/invoiceDetail'
+import { getInvoice } from '@/utils/invoice';
 
 
 export default {
@@ -80,6 +81,14 @@ export default {
       }
     },
   },
+  async created() {
+    this.invoiceDetailStore.$reset();
+    const result = await getInvoice(this.$route.params.id);
+    if (result.code === 404) {
+      this.$router.push({ name: 'noData' });
+      return;
+    }
+  }
 }
 </script>
 
@@ -87,14 +96,13 @@ export default {
 @import "../../assets/scss/component/table.scss";
 .root-container {
   @include flex-box(row, center, 100px);
-  background: $back-color;
-  width: 100%;
-  height: 100%;
-  padding: 60px 130px;
+  @include root-container;
+  padding: 60px 50px;
 }
 
 .left-side {
   @include flex-box(column, center, 20px);
+  box-sizing: border-box;
   min-width: 700px;
   width: 40%;
   min-height: 100%;
@@ -102,13 +110,13 @@ export default {
   border-radius: 10px;
   box-shadow: $base-shadow;
   background-color: white;
-
 }
 
 .right-side {
   @include flex-box(column, space-between, 20px);
   width: 700px;
   height: 100%;
+  min-height: 700px;
   padding: 30px 0;
 
   .btn-box {
diff --git a/src/views/invoice/InvoiceListView.vue b/src/views/invoice/InvoiceListView.vue
index 8f92423..27e5f53 100644
--- a/src/views/invoice/InvoiceListView.vue
+++ b/src/views/invoice/InvoiceListView.vue
@@ -64,9 +64,7 @@ export default {
 
 .root-container {
   @include flex-box(column, space-between, 20px);
-  background: $back-color;
-  width: 100%;
-  height: 100%;
+  @include root-container;
   padding: 30px 40px
 }
 
diff --git a/src/views/item/ItemDetailView.vue b/src/views/item/ItemDetailView.vue
index 1c56552..500fd59 100644
--- a/src/views/item/ItemDetailView.vue
+++ b/src/views/item/ItemDetailView.vue
@@ -95,7 +95,10 @@ export default {
     }
   },
   async mounted() {
-    await getItem(this.$route.params.id);
+    const result = await getItem(this.$route.params.id);
+    if (result.code === 404) {
+      this.$router.push({name: 'noData'});
+    }
     this.contractListStore.$reset();
     await this.getContractList();
     this.setupWatchers();
@@ -108,10 +111,9 @@ export default {
 
 .root-container {
   @include flex-box(row, space-between, 20px);
-  background: $back-color;
-  width: 100%;
+  @include root-container;
   height: 100%;
-  padding: 60px 50px
+  padding: 20px 50px
 }
 
 .left-side {
diff --git a/src/views/item/ItemListView.vue b/src/views/item/ItemListView.vue
index a8e7a9c..9ca3808 100644
--- a/src/views/item/ItemListView.vue
+++ b/src/views/item/ItemListView.vue
@@ -16,7 +16,6 @@
 
 <script>
 import ThemeIconBtnVue from '@/components/common/btn/ThemeIconBtn.vue';
-import SearchInputVue from '@/components/common/input/SearchInput.vue';
 import PaginationBarVue from '@/components/common/PaginationBar.vue';
 import ItemTableVue from '@/components/item/table/ItemTable.vue';
 import ItemCreateModalVue from '@/components/item/modal/ItemCreateModal.vue';
@@ -30,7 +29,6 @@ export default {
   name : 'ItemListView',
   components: {
     ThemeIconBtnVue,
-    SearchInputVue,
     PaginationBarVue,
     ItemTableVue,
     ItemCreateModalVue,
@@ -84,9 +82,7 @@ export default {
 
 .root-container {
   @include flex-box(column, space-between, 20px);
-  background: $back-color;
-  width: 100%;
-  height: 100%;
+  @include root-container;
   padding: 30px 40px
 }
 
diff --git a/src/views/member/MemberBulkCreateView.vue b/src/views/member/MemberBulkCreateView.vue
index e194bea..7f6362f 100644
--- a/src/views/member/MemberBulkCreateView.vue
+++ b/src/views/member/MemberBulkCreateView.vue
@@ -73,10 +73,9 @@ export default {
 <style lang="scss" scoped>
 .root-container {
   @include flex-box(row, center, 100px);
-  background: $back-color;
-  width: 100%;
+  @include root-container;
   height: 100%;
-  padding: 100px 50px;
+  padding: 40px;
 }
 
 .left-side {
diff --git a/src/views/member/MemberDetailView.vue b/src/views/member/MemberDetailView.vue
index 3327f51..4902709 100644
--- a/src/views/member/MemberDetailView.vue
+++ b/src/views/member/MemberDetailView.vue
@@ -96,7 +96,10 @@ export default {
     }
   },
   async mounted() {
-    await getMember(this.$route.params.id);
+    const result = await getMember(this.$route.params.id);
+    if (result.code === 404) {
+      this.$router.push({name: 'noData'});
+    }
     this.contractListStore.$reset();
     await this.getContractList();
     this.setupWatchers();
@@ -109,17 +112,16 @@ export default {
 
 .root-container {
   @include flex-box(row, space-between, 20px);
-  background: $back-color;
-  width: 100%;
+  @include root-container;
   height: 100%;
-  padding: 60px 50px
+  padding: 20px 30px
 }
 
 .left-side {
   @include flex-box(column, space-between, 0px);
   width: 400px;
   height: 100%;
-  padding: 40px 30px;
+  padding: 20px 30px;
   border-radius: 10px;
   box-shadow: $base-shadow;
   background-color: white;