diff --git a/assets/img/ic_back.png b/assets/img/ic_back.png
new file mode 100644
index 0000000..feaf539
Binary files /dev/null and b/assets/img/ic_back.png differ
diff --git a/assets/img/ic_forward_black.png b/assets/img/ic_forward_black.png
new file mode 100644
index 0000000..cd833d4
Binary files /dev/null and b/assets/img/ic_forward_black.png differ
diff --git a/components/footer.vue b/components/footer.vue
index 51f9480..a6b1128 100644
--- a/components/footer.vue
+++ b/components/footer.vue
@@ -56,6 +56,10 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import "~/assets/css/_device.scss";
 
+* {
+  font-family: Spoqa Han Sans Neo;
+}
+
 footer {
   margin-top: auto;
 }
diff --git a/components/header.vue b/components/header.vue
index debd71f..8d1fa43 100644
--- a/components/header.vue
+++ b/components/header.vue
@@ -64,6 +64,9 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 @import "~/assets/css/_device.scss";
+* {
+  font-family: Spoqa Han Sans Neo;
+}
 
 nav {
   display: flex;
diff --git a/components/project/card.vue b/components/project/card.vue
index c8e4a00..a2c7161 100644
--- a/components/project/card.vue
+++ b/components/project/card.vue
@@ -1,8 +1,10 @@
 <template>
   <div>
-    <img class="thumbnail" :src="project.thumbnail" />
-    <p class="name">{{ project.app_name }}</p>
-    <p class="time">{{ project.th }} | {{ project.year }}</p>
+    <nuxt-link :to="`project/${project.idx}`">
+      <img class="thumbnail" :src="project.thumbnail" />
+      <p class="name">{{ project.app_name }}</p>
+      <p class="time">{{ project.th }} | {{ project.year }}</p>
+    </nuxt-link>
     <div class="links">
       <a
         v-for="(link, platform) in project.link"
@@ -32,14 +34,19 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 @import "~/assets/css/_device.scss";
-
+* {
+  font-family: Spoqa Han Sans Neo;
+}
+.name {
+  cursor: pointer;
+}
+a {
+  text-decoration: none;
+}
 .links {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  a {
-    text-decoration: none;
-  }
 }
 .link-item {
   font-weight: bold;
diff --git a/components/toolbar.vue b/components/toolbar.vue
new file mode 100644
index 0000000..28679f5
--- /dev/null
+++ b/components/toolbar.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="container" @click="$router.go(-1)">
+    <img class="leading" src="~/assets/img/ic_back.png" />
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "@vue/composition-api";
+export default defineComponent({
+  name: "Toolbar",
+});
+</script>
+
+<style lang="scss" scoped>
+* {
+  font-family: Spoqa Han Sans Neo;
+}
+.container {
+  height: 56px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  .leading {
+    margin: 16px;
+    height: 24px;
+    width: 24px;
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/content/_projects/5.json b/content/_projects/5.json
new file mode 100644
index 0000000..0c6c6d9
--- /dev/null
+++ b/content/_projects/5.json
@@ -0,0 +1,21 @@
+{
+  "idx": "5",
+  "app_name": "",
+  "thumbnail": "https://drive.google.com/uc?export=view&id=",
+  "th": "th",
+  "year": "",
+  "team_name": "이끼",
+  "members": [
+    "허지인",
+    "안경문",
+    "유채은",
+    "성송현",
+    "인정민",
+    "김소연",
+    "김준희",
+    "김성재"
+  ],
+  "description": "",
+  "ppt": "",
+  "link": {}
+}
diff --git a/content/_projects/6.json b/content/_projects/6.json
new file mode 100644
index 0000000..436a9fc
--- /dev/null
+++ b/content/_projects/6.json
@@ -0,0 +1,12 @@
+{
+  "idx": "6",
+  "app_name": "",
+  "thumbnail": "https://drive.google.com/uc?export=view&id=",
+  "th": "12th",
+  "year": "",
+  "team_name": "뭐 있겄지",
+  "members": ["아무개", "아무개"],
+  "description": "",
+  "ppt": "",
+  "link": {}
+}
diff --git a/content/_projects/habitkery.json b/content/_projects/habitkery.json
new file mode 100644
index 0000000..94df20c
--- /dev/null
+++ b/content/_projects/habitkery.json
@@ -0,0 +1,23 @@
+{
+  "idx": "1",
+  "app_name": "Habitkery",
+  "thumbnail": "https://drive.google.com/uc?export=view&id=1XyPcA3KsEO04sZ5pbdWVep3D6MmASEf7",
+  "th": "19th",
+  "year": "2021",
+  "team_name": "이끼",
+  "members": [
+    "허지인",
+    "안경문",
+    "유채은",
+    "성송현",
+    "인정민",
+    "김소연",
+    "김준희",
+    "김성재"
+  ],
+  "description": "좋은 습관은 나와의 약속을 하나씩 지켜갈 때 만들어져요. 거창한 목표가 아니더라도 작은 것부터 하나씩 시작해나가면 어느새 좋은 습관이 형성되어 있을 거예요.\n\n3일을 목표로 생활 속 습관을 하나씩 만들어보세요. 3일 연속으로 습관 완료 시 누군가의 달콤한 응원과 함께 조각 케익이 도착합니다. 같은 종류의 케익을 8조각 모으면 홀케익을 완성할 수 있어요.\n\n습관을 함께하는 다른 사람들과 서로 응원을 주고받으며 즐겁게 습관을 실천하세요!",
+  "ppt": "https://www.naver.com",
+  "link": {
+    "android": "https://www.naver.com"
+  }
+}
diff --git "a/content/_projects/\353\204\244\353\262\210\354\247\270 \354\225\261 \354\235\264\353\246\204.json" "b/content/_projects/\353\204\244\353\262\210\354\247\270 \354\225\261 \354\235\264\353\246\204.json"
new file mode 100644
index 0000000..1c221e4
--- /dev/null
+++ "b/content/_projects/\353\204\244\353\262\210\354\247\270 \354\225\261 \354\235\264\353\246\204.json"	
@@ -0,0 +1,23 @@
+{
+  "idx": "4",
+  "app_name": "네번째 앱 이름",
+  "thumbnail": "https://drive.google.com/uc?export=view&id=",
+  "th": "17th",
+  "year": "2020",
+  "team_name": "이끼",
+  "members": [
+    "허지인",
+    "안경문",
+    "유채은",
+    "성송현",
+    "인정민",
+    "김소연",
+    "김준희",
+    "김성재"
+  ],
+  "description": "좋은 습관은 나와의 약속을 하나씩 지켜갈 때 만들어져요. 거창한 목표가 아니더라도 작은 것부터 하나씩 시작해나가면 어느새 좋은 습관이 형성되어 있을 거예요.\n\n3일을 목표로 생활 속 습관을 하나씩 만들어보세요. 3일 연속으로 습관 완료 시 누군가의 달콤한 응원과 함께 조각 케익이 도착합니다. 같은 종류의 케익을 8조각 모으면 홀케익을 완성할 수 있어요.\n\n습관을 함께하는 다른 사람들과 서로 응원을 주고받으며 즐겁게 습관을 실천하세요!",
+  "ppt": "https://www.naver.com",
+  "link": {
+    "web": "https://www.naver.com"
+  }
+}
diff --git "a/content/_projects/\353\221\220\353\262\210\354\247\270 \354\225\261 \354\235\264\353\246\204.json" "b/content/_projects/\353\221\220\353\262\210\354\247\270 \354\225\261 \354\235\264\353\246\204.json"
new file mode 100644
index 0000000..fb8e8e1
--- /dev/null
+++ "b/content/_projects/\353\221\220\353\262\210\354\247\270 \354\225\261 \354\235\264\353\246\204.json"	
@@ -0,0 +1,14 @@
+{
+  "idx": "2",
+  "app_name": "두번째 앱 이름",
+  "thumbnail": "https://drive.google.com/uc?export=view&id=",
+  "th": "20th",
+  "year": "2021",
+  "team_name": "뭐 있겄지",
+  "members": ["아무개", "아무개"],
+  "description": "좋은 습관은 나와의 약속을 하나씩 지켜갈 때 만들어져요. 거창한 목표가 아니더라도 작은 것부터 하나씩 시작해나가면 어느새 좋은 습관이 형성되어 있을 거예요.\n\n3일을 목표로 생활 속 습관을 하나씩 만들어보세요. 3일 연속으로 습관 완료 시 누군가의 달콤한 응원과 함께 조각 케익이 도착합니다. 같은 종류의 케익을 8조각 모으면 홀케익을 완성할 수 있어요.\n\n습관을 함께하는 다른 사람들과 서로 응원을 주고받으며 즐겁게 습관을 실천하세요!",
+  "ppt": "https://www.naver.com",
+  "link": {
+    "ios": "https://www.naver.com"
+  }
+}
diff --git "a/content/_projects/\354\204\270\353\262\210\354\247\270 \354\225\261 \354\235\264\353\246\204.json" "b/content/_projects/\354\204\270\353\262\210\354\247\270 \354\225\261 \354\235\264\353\246\204.json"
new file mode 100644
index 0000000..1adbb06
--- /dev/null
+++ "b/content/_projects/\354\204\270\353\262\210\354\247\270 \354\225\261 \354\235\264\353\246\204.json"	
@@ -0,0 +1,15 @@
+{
+  "idx": "3",
+  "app_name": "세번째 앱 이름",
+  "thumbnail": "https://drive.google.com/uc?export=view&id=",
+  "th": "19th",
+  "year": "2021",
+  "team_name": "뭐 있겄지",
+  "members": ["아무개", "아무개"],
+  "description": "좋은 습관은 나와의 약속을 하나씩 지켜갈 때 만들어져요. 거창한 목표가 아니더라도 작은 것부터 하나씩 시작해나가면 어느새 좋은 습관이 형성되어 있을 거예요.\n\n3일을 목표로 생활 속 습관을 하나씩 만들어보세요. 3일 연속으로 습관 완료 시 누군가의 달콤한 응원과 함께 조각 케익이 도착합니다. 같은 종류의 케익을 8조각 모으면 홀케익을 완성할 수 있어요.\n\n습관을 함께하는 다른 사람들과 서로 응원을 주고받으며 즐겁게 습관을 실천하세요!",
+  "ppt": "https://www.naver.com",
+  "link": {
+    "android": "https://www.naver.com",
+    "ios": "https://www.naver.com"
+  }
+}
diff --git a/layouts/detail.vue b/layouts/detail.vue
index 7ee38a7..2e4ee5d 100644
--- a/layouts/detail.vue
+++ b/layouts/detail.vue
@@ -12,4 +12,8 @@ export default defineComponent({
 });
 </script>
 
-<style></style>
+<style class="scss" scoped>
+.background {
+  height: 100vh;
+}
+</style>
diff --git a/models/project.js b/models/project.js
index ba54442..5c8bcac 100644
--- a/models/project.js
+++ b/models/project.js
@@ -1,9 +1,10 @@
 import { Model } from "@vuex-orm/core";
 export default class Project extends Model {
   static entity = "projects";
+  static primaryKey = "idx";
   static fields() {
     return {
-      idx: this.uid(),
+      idx: this.attr(null),
       app_name: this.string(),
       thumbnail: this.string(),
       th: this.string(),
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 616e26a..de1d741 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -2,13 +2,17 @@ import type { NuxtConfig } from "@nuxt/types";
 
 const config: NuxtConfig = {
   target: "static",
-  head:{
-    meta:[{charset: 'utf-8'}, {name: 'viewport', content: 'width=device-width, initial-scale=1'}]
+  // ssr: false,
+  head: {
+    meta: [
+      { charset: "utf-8" },
+      { name: "viewport", content: "width=device-width, initial-scale=1" },
+    ],
   },
   modules: ["@nuxt/content"],
   components: true,
   content: {
-    nestedProperties: ["a.b"],
+    nestedProperties: ["projects.idx"],
     extendParser: {
       ".custom": (file) => ({
         body: file.split("\n").map((line) => line.trim()),
@@ -17,12 +21,11 @@ const config: NuxtConfig = {
   },
   buildModules: ["@nuxt/typescript-build"],
   plugins: ["~/plugins/composition-api"],
-  css:["~/assets/css/reset.css", "~/assets/css/webfont.css", "~/assets/css/_device.scss"],
-  // image:{
-  //   facebook: "~/assets/img/facebook.png",
-  //   github: "~/assets/img/github.png",
-  //   instagram: "~/assets/img/instagram.png",
-  // },
+  css: [
+    "~/assets/css/reset.css",
+    "~/assets/css/webfont.css",
+    "~/assets/css/_device.scss",
+  ],
 };
 
 export default config;
diff --git a/pages/index.vue b/pages/index.vue
index d6c610d..455ea4c 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -26,6 +26,9 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 @import "~/assets/css/_device.scss";
+* {
+  font-family: Spoqa Han Sans Neo;
+}
 
 .container {
   width: 100%;
diff --git a/pages/project/_id.vue b/pages/project/_id.vue
new file mode 100644
index 0000000..d686206
--- /dev/null
+++ b/pages/project/_id.vue
@@ -0,0 +1,181 @@
+<template>
+  <div class="container">
+    <!-- <pre>{{ project }}</pre> -->
+    <div class="contents">
+      <div class="information">
+        <h1 class="name">{{ project.app_name }}</h1>
+        <div class="th-year">{{ project.th }} | {{ project.year }}</div>
+        <div class="team-members">
+          {{ project.team_name }} | {{ project.members.join(" ") }}
+        </div>
+      </div>
+      <div class="thumbnail"><img :src="project.thumbnail" /></div>
+      <div class="description">{{ project.description }}</div>
+      <div class="ppt">
+        <p>최종 발표 자료</p>
+        <img src="~/assets/img/ic_forward_black.png" alt="arrow" />
+      </div>
+    </div>
+    <div class="links">
+      <a
+        v-for="(link, platform) in project.link"
+        :key="platform"
+        class="link-item"
+        :href="link"
+      >
+        {{ platform }}
+      </a>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "@vue/composition-api";
+// import Project from "~/models/project";
+export default defineComponent({
+  name: "ProjectDetail",
+  layout: "detail",
+  async asyncData({ $content, params }) {
+    console.debug(params);
+    // console.log(extra);
+    // 곧장 바로 들어온 경우 불러오지 못하므로 content에서 불러오도록 처리가 필요하다.
+    // const project = Project.find(id);
+    const [project] = await $content("_projects")
+      .where({ idx: params.id })
+      .fetch();
+    console.log(project);
+    return {
+      project: project,
+    };
+  },
+  data() {
+    return {
+      project: {},
+    };
+  },
+  fetchOnServer: false,
+});
+</script>
+
+<style lang="scss" scoped>
+@import "~/assets/css/_device.scss";
+* {
+  font-family: Spoqa Han Sans Neo;
+}
+
+.container {
+  height: calc(100% - 56px);
+  display: flex;
+  flex-direction: column;
+}
+.contents {
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.information {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.name {
+  font-style: normal;
+  font-weight: bold;
+  font-size: 24px;
+  line-height: 36px;
+  letter-spacing: -0.02em;
+
+  color: #000000;
+}
+.th-year {
+  font-style: normal;
+  font-weight: normal;
+  font-size: 12px;
+  line-height: 18px;
+  letter-spacing: -0.02em;
+
+  color: #777777;
+}
+.team-members {
+  font-style: normal;
+  font-weight: normal;
+  font-size: 14px;
+  line-height: 21px;
+  letter-spacing: -0.02em;
+
+  color: #000000;
+}
+.thumbnail {
+  width: 100%;
+  img {
+    width: 100%;
+    border-radius: 8px;
+  }
+}
+.description {
+  white-space: pre-wrap;
+
+  font-style: normal;
+  font-weight: normal;
+  font-size: 14px;
+  line-height: 21px;
+  letter-spacing: -0.02em;
+
+  color: #000000;
+}
+.ppt {
+  display: flex;
+  width: 130px;
+  cursor: pointer;
+  p {
+    padding-right: 8px;
+    font-style: normal;
+    font-weight: bold;
+    font-size: 16px;
+    line-height: 24px;
+    letter-spacing: -0.02em;
+
+    color: #000000;
+  }
+  img {
+    width: 16px;
+    height: 16px;
+    margin: auto;
+  }
+}
+a {
+  text-decoration: none;
+}
+.links {
+  margin-top: auto;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.link-item {
+  font-weight: bold;
+  font-size: 16px;
+  line-height: 24px;
+  text-align: center;
+  letter-spacing: -0.02em;
+
+  color: #000000;
+  width: 100%;
+  height: 45px;
+  line-height: 45px;
+  text-align: center;
+  border: 1px solid #dddddd;
+  margin-right: 8px;
+  cursor: pointer;
+}
+.link-item:last-child {
+  margin: 0;
+}
+
+@include desktop {
+  .thumbnail {
+    height: 445px;
+  }
+} ;
+</style>
diff --git a/pages/project/index.vue b/pages/project/index.vue
index 64a0530..db77e85 100644
--- a/pages/project/index.vue
+++ b/pages/project/index.vue
@@ -22,10 +22,10 @@
 
 <script>
 import { defineComponent } from "@vue/composition-api";
+import Project from "~/models/project";
 
 export default defineComponent({
   name: "Project",
-  components: ["ProjectCard"],
   fetchOnServer: false,
   setup() {
     return {};
@@ -34,13 +34,21 @@ export default defineComponent({
     return { projects: [] };
   },
   async fetch() {
-    const { results } = await this.$content("projects").only("results").fetch();
-    const { rawData } = results[0].result;
-    console.log(rawData);
-    const [_, ...projects] = rawData;
-    this.projects = projects.map((project) => this.Project(project));
+    const _projects = await this.FetchAll();
+    Project.create({ data: _projects });
+    this.projects = _projects;
   },
   methods: {
+    FetchAll: async function () {
+      const { results } = await this.$content("projects")
+        .only("results")
+        .fetch();
+      const { rawData } = results[0].result;
+      const [_, ...projects] = rawData;
+      console.debug(_);
+      const _projects = projects.map((project) => this.Project(project));
+      return _projects;
+    },
     // Project object 생성자
     Project: function (columns) {
       if (columns.length != 12) {
@@ -93,6 +101,9 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 @import "~/assets/css/_device.scss";
+* {
+  font-family: Spoqa Han Sans Neo;
+}
 .container {
   width: 100%;
 }