diff --git a/public/images/polygon_button.png b/public/images/polygon_button.png
new file mode 100644
index 0000000..9f174b5
Binary files /dev/null and b/public/images/polygon_button.png differ
diff --git a/src/app.postcss b/src/app.postcss
index e130309..3311ec3 100644
--- a/src/app.postcss
+++ b/src/app.postcss
@@ -45,7 +45,7 @@ h1 {
 
 #app {
   max-width: 1280px;
-  max-height: 100vh;
+  max-height: 300vh;
   margin: 0 auto;
   padding: 2rem;
   text-align: center;
diff --git a/src/route/DetailPage.svelte b/src/route/DetailPage.svelte
index ba8075b..12f44a8 100644
--- a/src/route/DetailPage.svelte
+++ b/src/route/DetailPage.svelte
@@ -77,6 +77,9 @@ let problems = [
                 <h5 class="mb-2 text-xl font-bold tracking-tight text-gray-900 dark:text-white">요약</h5>
                 <P align={'left'}>K-평균은 클러스터링 방법으로, 클러스터 중심의 초기 위치를 기반으로 각 샘플을 가장 가까운 클러스터에 할당합니다.<br> 중심 K-평균 알고리즘은 할당된 샘플의 평균을 사용하여 클러스터 중심의 위치를 업데이트합니다.<br> 샘플을 클러스터에 할당하고 클러스터 중심을 업데이트하는 과정이 반복됩니다.<br> K-평균 모델을 훈련하기 전에 데이터 준비가 필요합니다.<br> 첫 번째 클러스터는 가장 가까운 샘플을 기반으로 결정됩니다.<br> squeeze=True인 경우, 샘플의 수가 10보다 작으면 첫 번째 클러스터에서 오류가 발생할 수 있습니다.<br> 두 번째와 세 번째 클러스터는 가장 가까운 샘플을 기반으로 결정됩니다.<br> 클러스터 중심은 슬라이싱 연산을 사용하여 얻을 수 있습니다.<br> 팔꿈치 방법은 k 값을 증가시키고 관성(클러스터 중심과 할당된 샘플 간의 제곱 거리의 합)를 계산하여 최적의 k 값을 찾는 데 사용됩니다.<br> 최적의 k는 관성 감소율이 둔화하기 시작하는 지점에서 선택됩니다</P>
             </Card>
+            <div class="w-full">
+              <a href="/"><img src="images/khu_mon_logo.png" alt="logo" width="50%" style=" margin-bottom: 5%;" class=" justify-items-center ml-28"></a>
+            </div>
         </div>
     </div>
     <div class=" ml-2">
@@ -84,16 +87,8 @@ let problems = [
             <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">문제</h5>
             {#each problems as problem}
             <P align={'left'} class = " font-extrabold mb-4">Q{problem.problem_no}. {problem.question}</P>
-            {#if isOpenedAnswer}
-            <button style="width: 3%;" on:click={changeIsOpenedAnswer}></button>
-            {/if}
-            {#if !isOpenedAnswer}
-            <button style="width: 3%;" on:click={changeIsOpenedAnswer}></button>
-            {/if}
-
-            {#if isOpenedAnswer}
-            <P align={'left'} class = " font-extrabold mb-4">정답 : {problem.answer}</P>
-            {/if}
+            <Button id="b{problem.problem_no}" color="alternative" disabled >정답</Button>
+            <Popover class="w-64 text-sm font-light" triggeredBy="#b{problem.problem_no}"><P align={'left'} class = " font-extrabold mb-4">정답 : {problem.answer}</P></Popover>
             {/each}
         </Card>
     </div>
diff --git a/src/route/MainPage.svelte b/src/route/MainPage.svelte
index 8ff6a17..72498e0 100644
--- a/src/route/MainPage.svelte
+++ b/src/route/MainPage.svelte
@@ -1,10 +1,16 @@
 <script>
     import LoginPage from "./LoginPage.svelte";
+    import axios from 'axios'
     import { SpeedDial,P,Search,Button,Table, TableBody, TableBodyCell, TableBodyRow, TableHead, TableHeadCell, Checkbox, TableSearch } from 'flowbite-svelte';
     import {PlusSolid} from 'flowbite-svelte-icons'
     let id = sessionStorage.getItem("id")
     let accessCode = sessionStorage.getItem("access-code")
     let nickName = sessionStorage.getItem("nickName")
+    axios.get("http://localhost:8080/api/learning-materials",{
+        headers:{"Authorization":"Bearer " + accessCode},
+      }).then(
+        response => console.log(response)
+      )
 
 </script>
 
@@ -45,7 +51,7 @@
     <TableBody tableBodyClass="divide-y">
       <TableBodyRow>
         <TableBodyCell><Checkbox></Checkbox></TableBodyCell>
-        <TableBodyCell>인공지능 프로그래밍</TableBodyCell>
+        <TableBodyCell><a href="#/detail_page" style="color: black;">인공지능 프로그래밍</a></TableBodyCell>
         <TableBodyCell>MP4</TableBodyCell>
         <TableBodyCell>5개</TableBodyCell>
         <TableBodyCell>2023.01.03</TableBodyCell>
diff --git a/src/route/Upload.svelte b/src/route/Upload.svelte
index de88478..f15a552 100644
--- a/src/route/Upload.svelte
+++ b/src/route/Upload.svelte
@@ -4,11 +4,10 @@
     import axios from 'axios'
     import MainPage from './MainPage.svelte';
 
-    let title = ""
-    let content = ""
-
+    let title
+    let content
     let value = null
-    let file = null
+    let file
     let accessCode = sessionStorage.getItem("access-code")
   const dropHandle = (event) => {
     value = [];
@@ -58,8 +57,9 @@
   }
 
   </script>
-{#if accessCode}
 
+{#if accessCode}
+<body >
 <form on:submit|preventDefault={send}>
 <div class="flex flex-col" >
 
@@ -87,13 +87,14 @@
     }}
     on:change={handleChange}
     defaultClass="flex flex-col justify-center items-center w-full h-64 bg-gray-50 rounded-lg border-2 border-gray-300 border-dashed cursor-pointer dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600"
+    required
     >
     <svg aria-hidden="true" class="mb-3 w-10 h-10 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" /></svg>
     {#if value == null}
       <p class="mb-2 text-sm text-gray-500 dark:text-gray-400"><span class="font-semibold">Click to upload</span> or drag and drop</p>
       <p class="text-xs text-gray-500 dark:text-gray-400">PDF, PNG, MP4</p>
     {:else}
-      <p>{showFiles(value)}</p>
+      <P>{showFiles(value)}</P>
     {/if}
   </Dropzone>
 </div>
@@ -103,9 +104,9 @@
 
 </div>
 </form>
-
+</body>
 {:else}
     <LoginPage />
 
 
-{/if}
\ No newline at end of file
+{/if}