diff --git a/app/dimiru/components/DimiBarChart.vue b/app/dimiru/components/DimiBarChart.vue
new file mode 100644
index 00000000..538512fd
--- /dev/null
+++ b/app/dimiru/components/DimiBarChart.vue
@@ -0,0 +1,99 @@
+<script>
+export default {
+  name: 'DimiBarChart',
+  props: {
+    progress: {
+      type: Number,
+      default: 0
+    },
+    color: {
+      type: String,
+      default: 'red',
+      validator: c => ['mustard', 'orange', 'pink', 'red'].includes(c)
+    }
+  },
+  computed: {
+    computedClass () {
+      return {
+        [this.color]: true,
+        'progress--small': (this.small)
+      }
+    },
+    barStyle () {
+      return {
+        height: ((this.progress > 100) ? 100 : this.progress) + '%'
+      }
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="barchart">
+    <div
+      class="barchart__background"
+      :class="computedClass"
+    >
+      <div
+        class="barchart__bar"
+        :class="computedClass"
+        :style="barStyle"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.barchart {
+  height: 100%;
+
+  &__bar,
+  &__background {
+    width: 48px;
+    border-radius: 24px;
+  }
+
+  &__bar {
+    position: absolute;
+    bottom: 0;
+    min-height: 48px;
+  }
+
+  &__background {
+    position: relative;
+    height: 100%;
+  }
+
+  &__bar.red {
+    background-color: $red;
+  }
+
+  &__bar.pink {
+    background-color: $pink;
+  }
+
+  &__bar.mustard {
+    background-color: $mustard;
+  }
+
+  &__bar.orange {
+    background-color: $orange;
+  }
+
+  &__background.red {
+    background-color: rgba(232, 60, 61, 0.5);
+  }
+
+  &__background.pink {
+    background-color: rgba(255, 128, 129, 0.5);
+  }
+
+  &__background.mustard {
+    background-color: rgba(253, 184, 18, 0.5);
+  }
+
+  &__background.orange {
+    background-color: rgba(245, 105, 61, 0.5);
+  }
+}
+</style>
diff --git a/app/dimiru/components/DimiProgressbar.vue b/app/dimiru/components/DimiProgressbar.vue
new file mode 100644
index 00000000..09ef9664
--- /dev/null
+++ b/app/dimiru/components/DimiProgressbar.vue
@@ -0,0 +1,100 @@
+<script>
+export default {
+  name: 'DimiProgressbar',
+  props: {
+    progress: {
+      type: Number,
+      default: 0
+    },
+    color: {
+      type: String,
+      default: 'red',
+      validator: c => ['mustard', 'orange', 'pink', 'red'].includes(c)
+    },
+    small: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    computedClass () {
+      return {
+        [this.color]: true,
+        'progress--small': (this.small)
+      }
+    },
+    barStyle () {
+      return {
+        width: ((this.progress > 100) ? 100 : this.progress) + '%'
+      }
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="progress">
+    <div
+      class="progress__background"
+      :class="computedClass"
+    >
+      <div
+        class="progress__bar"
+        :class="computedClass"
+        :style="barStyle"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.progress {
+  width: 100%;
+
+  &__bar,
+  &__background {
+    height: 48px;
+    border-radius: 24px;
+  }
+
+  &__bar.red {
+    background-color: $red;
+  }
+
+  &__bar.pink {
+    background-color: $pink;
+  }
+
+  &__bar.mustard {
+    background-color: $mustard;
+  }
+
+  &__bar.orange {
+    background-color: $orange;
+  }
+
+  &__background {
+    width: 100%;
+  }
+
+  &__background.red {
+    background-color: rgba(232, 60, 61, 0.5);
+  }
+
+  &__background.pink {
+    background-color: rgba(255, 128, 129, 0.5);
+  }
+
+  &__background.mustard {
+    background-color: rgba(253, 184, 18, 0.5);
+  }
+
+  &__background.orange {
+    background-color: rgba(245, 105, 61, 0.5);
+  }
+
+  &--small {
+    height: 32px;
+  }
+}
+</style>
diff --git a/app/dimiru/components/index.js b/app/dimiru/components/index.js
index 58cd41cc..1d080175 100644
--- a/app/dimiru/components/index.js
+++ b/app/dimiru/components/index.js
@@ -1,7 +1,7 @@
 export { default as DimiBadge } from './DimiBadge.vue'
-export { default as DimiBadgeGroup } from './DimiBadgeGroup.vue'
-export { default as DimiButton } from './DimiButton.vue'
 export { default as DimiButtonGroup } from './DimiButtonGroup.vue'
+export { default as DimiBarChart } from './DimiBarChart.vue'
+export { default as DimiButton } from './DimiButton.vue'
 export { default as DimiButtonRadio } from './DimiButtonRadio.vue'
 export { default as DimiCard } from './DimiCard.vue'
 export { default as DimiCheckbox } from './DimiCheckbox.vue'
@@ -17,5 +17,6 @@ export { default as DimiMenu } from './DimiMenu.vue'
 export { default as DimiMenuItem } from './DimiMenuItem.vue'
 export { default as DimiModal } from './DimiModal.vue'
 export { default as DimiNavbar } from './DimiNavbar.vue'
+export { default as DimiProgressbar } from './DimiProgressbar.vue'
 export { default as DimiTab } from './DimiTab.vue'
 export { default as DimiTimeInput } from './DimiTimeInput.vue'
diff --git a/app/pages/paths/management/ManageRequest.vue b/app/pages/paths/management/ManageRequest.vue
new file mode 100644
index 00000000..1adc848e
--- /dev/null
+++ b/app/pages/paths/management/ManageRequest.vue
@@ -0,0 +1,325 @@
+<script>
+import ContentWrapper from '@/components/ContentWrapper.vue'
+
+export default {
+  name: 'ManageRequest',
+  components: { ContentWrapper },
+
+  computed: {
+    today: () => new Date().getDate(),
+    month: () => 1 + new Date().getMonth(),
+    year: () => new Date().getFullYear()
+  }
+}
+</script>
+
+<template>
+  <content-wrapper>
+    <h1 slot="header">
+      <span class="icon-request" />신청 현황
+    </h1>
+    <dimi-card
+      slot="main"
+    >
+      <div class="dashboard">
+        <div class="dashboard__row">
+          <div class="dashboard__item dashboard__snack">
+            <h1 class="dashboard__title">
+              <span class="icon-muffin" /> {{ month }}월 간식 신청 현황
+            </h1>
+            <div class="dashboard__content">
+              <div class="dashboard__field">
+                <div class="dashboard__day">
+                  총인원 620명 중<br>
+                  150명 신청
+                </div>
+                <div class="dashboard__percent">
+                  24%
+                </div>
+              </div>
+              <dimi-progressbar
+                class="snack"
+                :progress="24"
+                color="orange"
+                :small="false"
+              />
+            </div>
+          </div>
+          <div class="dashboard__item dashboard__circle">
+            <h1 class="dashboard__title">
+              <span class="icon-club-sm" /> {{ year }}년 동아리 가입 신청 현황
+            </h1>
+            <div class="dashboard__content">
+              차트 컴포넌트를 만들자
+            </div>
+          </div>
+        </div>
+        <div class="dashboard__row">
+          <div class="dashboard__item dashboard__afterschool">
+            <h1 class="dashboard__title">
+              <span class="icon-ball" /> {{ year }}년 상반기 방과 후 활동 신청 현황
+            </h1>
+            <div class="dashboard__content">
+              <div class="dashboard__cell">
+                <div class="dashboard__day">
+                  월요일
+                </div>
+                <dimi-bar-chart
+                  class="afterschool"
+                  :progress="50"
+                  color="mustard"
+                />
+                <div class="dashboard__percent">
+                  50%(310명)
+                </div>
+              </div>
+              <div class="dashboard__cell">
+                <div class="dashboard__day">
+                  화요일
+                </div>
+                <dimi-bar-chart
+                  class="afterschool"
+                  :progress="25"
+                  color="mustard"
+                />
+                <div class="dashboard__percent">
+                  25%(155명)
+                </div>
+              </div>
+              <div class="dashboard__cell">
+                <div class="dashboard__day">
+                  수요일
+                </div>
+                <dimi-bar-chart
+                  class="afterschool"
+                  :progress="60"
+                  color="mustard"
+                />
+                <div class="dashboard__percent">
+                  60%(372명)
+                </div>
+              </div>
+              <div class="dashboard__cell">
+                <div class="dashboard__day">
+                  목요일
+                </div>
+                <dimi-bar-chart
+                  class="afterschool"
+                  :progress="50"
+                  color="mustard"
+                />
+                <div class="dashboard__percent">
+                  50%(310명)
+                </div>
+              </div>
+              <div class="dashboard__cell">
+                <div class="dashboard__day">
+                  금요일
+                </div>
+                <dimi-bar-chart
+                  class="afterschool"
+                  :progress="80"
+                  color="mustard"
+                />
+                <div class="dashboard__percent">
+                  80%(496명)
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="dashboard__row">
+          <div class="dashboard__item dashboard__">
+            <h1 class="dashboard__title">
+              <span class="icon-comment" /> {{ month }}월 2주차 상담 신청 현황 - 진로 상담
+            </h1>
+            <div class="dashboard__content">
+              차트 컴포넌트를 만들자
+            </div>
+          </div>
+        </div>
+        <div class="dashboard__row">
+          <div class="dashboard__item">
+            <h1 class="dashboard__title">
+              <span class="icon-internet-class" /> {{ month }}월 {{ today }}일 인강실 사용 신청 현황
+            </h1>
+            <div class="dashboard__content">
+              <div class="dashboard__ingang">
+                <div class="dashboard__ingang--field">
+                  <div class="dashboard__time">
+                    1타임
+                  </div>
+                  <div class="dashboard__day">
+                    30석 중 24석 신청
+                  </div>
+                </div>
+                <dimi-progressbar
+                  class="ingang"
+                  :progress="80"
+                  color="red"
+                  :small="true"
+                />
+              </div>
+              <div class="dashboard__ingang">
+                <div class="dashboard__ingang--field">
+                  <div class="dashboard__time">
+                    2타임
+                  </div>
+                  <div class="dashboard__day">
+                    30석 중 12석 신청
+                  </div>
+                </div>
+                <dimi-progressbar
+                  class="ingang"
+                  :progress="40"
+                  color="pink"
+                  :small="true"
+                />
+              </div>
+            </div>
+          </div>
+          <div class="dashboard__item">
+            <h1 class="dashboard__title">
+              <span class="icon-hourglass" /> {{ month }}월 2주차 잔류 신청 현황
+            </h1>
+            <div class="dashboard__content">
+              차트 컴포넌트를 만들자
+            </div>
+          </div>
+        </div>
+      </div>
+    </dimi-card>
+  </content-wrapper>
+</template>
+
+<style lang="scss" scoped>
+.dashboard {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  color: $gray;
+
+  &__title {
+    color: $gray-dark;
+    font-size: 24px;
+    font-weight: $font-weight-bold;
+  }
+
+  &__row {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  &__row:not(:first-child) {
+    margin-top: 2em;
+  }
+
+  &__item {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    padding: 1em;
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    margin-top: 1.5em;
+  }
+
+  &__field {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    line-height: 1.8;
+  }
+
+  &__snack &__percent {
+    color: $orange;
+    font-size: 48px;
+    font-weight: $font-weight-regular;
+  }
+
+  &__snack &__status {
+    display: flex;
+  }
+
+  &__snack &__field {
+    @include until($tablet) {
+      flex-direction: column;
+    }
+  }
+
+  &__snack &__percent {
+    line-height: normal;
+  }
+
+  &__afterschool &__title {
+    margin-bottom: 0.7em;
+  }
+
+  &__afterschool &__content {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding-right: 2.5em;
+    padding-left: 2.5em;
+  }
+
+  &__afterschool &__cell {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  &__afterschool &__day {
+    margin-bottom: 0.8em;
+    color: $gray-dark;
+    font-size: 18px;
+    font-weight: $font-weight-regular;
+  }
+
+  &__afterschool &__percent {
+    margin-top: 1em;
+  }
+
+  &__ingang {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+    justify-content: space-between;
+  }
+
+  &__ingang--field {
+    display: flex;
+    width: 50%;
+    flex-direction: column;
+  }
+
+  &__ingang:first-child {
+    margin-bottom: 2em;
+  }
+
+  &__time {
+    color: $gray-dark;
+    font-size: 16px;
+    font-weight: $font-weight-bold;
+  }
+}
+
+.progress.snack {
+  display: flex;
+  margin-top: 1em;
+}
+
+.progress.ingang {
+  display: flex;
+  padding-left: 0.5em;
+}
+
+.barchart.afterschool {
+  display: flex;
+  height: 120px;
+}
+</style>
diff --git a/app/router/routers/management.js b/app/router/routers/management.js
index 1b5e521c..838e6f05 100644
--- a/app/router/routers/management.js
+++ b/app/router/routers/management.js
@@ -2,6 +2,7 @@ import withPrefix from '@/src/util/path-with-prefix'
 
 const ManageWrapper = () => import('@/pages/paths/management/ManageWrapper.vue')
 const ManageMain = () => import('@/pages/paths/management/ManageMain.vue')
+const ManageRequest = () => import('@/pages/paths/management/ManageRequest.vue')
 const ManageAssignment = () => import('@/pages/paths/management/ManageAssignment.vue')
 const ManageAfterschool = () => import('@/pages/paths/management/ManageAfterschool.vue')
 const ManageCounsel = () => import('@/pages/paths/management/ManageCounsel.vue')
@@ -28,6 +29,14 @@ export default [
       path: '/',
       component: ManageWrapper,
       children: [
+        {
+          path: 'request',
+          name: 'management/request',
+          component: ManageRequest,
+          meta: {
+            title: '디미고인 > 신청 현황'
+          }
+        },
         {
           path: 'assignment',
           name: 'management/assignment',