diff --git a/components/docs/Collection.vue b/components/docs/Collection.vue
new file mode 100644
index 000000000..7cf26374f
--- /dev/null
+++ b/components/docs/Collection.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="collection">
+    <h2>
+      <i class="material-icons">folder</i>
+      {{ collection.name || $t("none") }}
+    </h2>
+    <span class="folder" v-for="(folder, index) in collection.folders" :key="index">
+      <DocsFolder :folder="folder" />
+    </span>
+    <div v-for="(request, index) in collection.requests" :key="index">
+      <DocsRequest :request="request" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    collection: Object,
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.collection {
+  @apply flex;
+  @apply flex-col;
+  @apply justify-center;
+  @apply flex-1;
+  @apply p-4;
+
+  .material-icons {
+    @apply mr-4;
+  }
+}
+</style>
diff --git a/components/docs/Folder.vue b/components/docs/Folder.vue
new file mode 100644
index 000000000..0d7a4c526
--- /dev/null
+++ b/components/docs/Folder.vue
@@ -0,0 +1,42 @@
+<template>
+  <div class="folder">
+    <h3>
+      <i class="material-icons">folder_open</i>
+      {{ folder.name || $t("none") }}
+    </h3>
+    <div v-for="(folder, index) in folder.folders" :key="index">
+      <DocsFolder :folder="folder" />
+    </div>
+    <div v-for="(request, index) in folder.requests" :key="index">
+      <DocsRequest :request="request" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    folder: Object,
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.folder {
+  @apply flex;
+  @apply flex-col;
+  @apply justify-center;
+  @apply flex-1;
+  @apply p-4;
+
+  .material-icons {
+    @apply mr-4;
+  }
+}
+
+.folder {
+  @apply border-l;
+  @apply border-brdColor;
+  @apply mt-4;
+}
+</style>
diff --git a/components/docs/Request.vue b/components/docs/Request.vue
new file mode 100644
index 000000000..926827761
--- /dev/null
+++ b/components/docs/Request.vue
@@ -0,0 +1,150 @@
+<template>
+  <div class="request">
+    <h4>
+      <i class="material-icons">insert_drive_file</i>
+      {{ request.name || $t("none") }}
+    </h4>
+    <p class="doc-desc" v-if="request.url">
+      <span>
+        {{ $t("url") }}: <code>{{ request.url || $t("none") }}</code>
+      </span>
+    </p>
+    <p class="doc-desc" v-if="request.path">
+      <span>
+        {{ $t("path") }}:
+        <code>{{ request.path || $t("none") }}</code>
+      </span>
+    </p>
+    <p class="doc-desc" v-if="request.method">
+      <span>
+        {{ $t("method") }}:
+        <code>{{ request.method || $t("none") }}</code>
+      </span>
+    </p>
+    <p class="doc-desc" v-if="request.auth">
+      <span>
+        {{ $t("authentication") }}:
+        <code>{{ request.auth || $t("none") }}</code>
+      </span>
+    </p>
+    <p class="doc-desc" v-if="request.httpUser">
+      <span>
+        {{ $t("username") }}:
+        <code>{{ request.httpUser || $t("none") }}</code>
+      </span>
+    </p>
+    <p class="doc-desc" v-if="request.httpPassword">
+      <span>
+        {{ $t("password") }}:
+        <code>{{ request.httpPassword || $t("none") }}</code>
+      </span>
+    </p>
+    <p class="doc-desc" v-if="request.bearerToken">
+      <span>
+        {{ $t("token") }}:
+        <code>{{ request.bearerToken || $t("none") }}</code>
+      </span>
+    </p>
+    <h4 v-if="request.headers">{{ $t("headers") }}</h4>
+    <span v-if="request.headers">
+      <p v-for="header in request.headers" :key="header.key" class="doc-desc">
+        <span>
+          {{ header.key || $t("none") }}:
+          <code>{{ header.value || $t("none") }}</code>
+        </span>
+      </p>
+    </span>
+    <h4 v-if="request.params">{{ $t("parameters") }}</h4>
+    <span v-if="request.params">
+      <p v-for="parameter in request.params" :key="parameter.key" class="doc-desc">
+        <span>
+          {{ parameter.key || $t("none") }}:
+          <code>{{ parameter.value || $t("none") }}</code>
+        </span>
+      </p>
+    </span>
+    <h4 v-if="request.bodyParams">{{ $t("payload") }}</h4>
+    <span v-if="request.bodyParams">
+      <p v-for="payload in request.bodyParams" :key="payload.key" class="doc-desc">
+        <span>
+          {{ payload.key || $t("none") }}:
+          <code>{{ payload.value || $t("none") }}</code>
+        </span>
+      </p>
+    </span>
+    <p class="doc-desc" v-if="request.rawParams">
+      <span>
+        {{ $t("parameters") }}:
+        <code>{{ request.rawParams || $t("none") }}</code>
+      </span>
+    </p>
+    <p class="doc-desc" v-if="request.contentType">
+      <span>
+        {{ $t("content_type") }}:
+        <code>{{ request.contentType || $t("none") }}</code>
+      </span>
+    </p>
+    <p class="doc-desc" v-if="request.requestType">
+      <span>
+        {{ $t("request_type") }}:
+        <code>{{ request.requestType || $t("none") }}</code>
+      </span>
+    </p>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    request: Object,
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.request {
+  @apply flex;
+  @apply flex-col;
+  @apply justify-center;
+  @apply flex-1;
+  @apply p-4;
+
+  .material-icons {
+    @apply mr-4;
+  }
+}
+.request {
+  @apply border;
+  @apply border-brdColor;
+  @apply rounded-lg;
+  @apply mt-4;
+
+  h4 {
+    @apply mt-4;
+  }
+}
+
+.doc-desc {
+  @apply flex;
+  @apply flex-col;
+  @apply justify-center;
+  @apply flex-1;
+  @apply p-4;
+
+  .material-icons {
+    @apply mr-4;
+  }
+}
+
+.doc-desc {
+  @apply text-fgLightColor;
+  @apply border-b;
+  @apply border-dashed;
+  @apply border-brdColor;
+  @apply m-0;
+
+  &:last-child {
+    @apply border-b-0;
+  }
+}
+</style>
diff --git a/pages/doc.vue b/pages/doc.vue
index 8e2fb576b..3b2484ce1 100644
--- a/pages/doc.vue
+++ b/pages/doc.vue
@@ -76,204 +76,8 @@
               </div>
             </div>
             <div>
-              <span class="collection" v-for="(collection, index) in this.items" :key="index">
-                <h2>
-                  <i class="material-icons">folder</i>
-                  {{ collection.name || $t("none") }}
-                </h2>
-                <span class="folder" v-for="(folder, index) in collection.folders" :key="index">
-                  <h3>
-                    <i class="material-icons">folder_open</i>
-                    {{ folder.name || $t("none") }}
-                  </h3>
-                  <span class="request" v-for="(request, index) in folder.requests" :key="index">
-                    <h4>
-                      <i class="material-icons">insert_drive_file</i>
-                      {{ request.name || $t("none") }}
-                    </h4>
-                    <p class="doc-desc" v-if="request.url">
-                      <span>
-                        {{ $t("url") }}: <code>{{ request.url || $t("none") }}</code>
-                      </span>
-                    </p>
-                    <p class="doc-desc" v-if="request.path">
-                      <span>
-                        {{ $t("path") }}:
-                        <code>{{ request.path || $t("none") }}</code>
-                      </span>
-                    </p>
-                    <p class="doc-desc" v-if="request.method">
-                      <span>
-                        {{ $t("method") }}:
-                        <code>{{ request.method || $t("none") }}</code>
-                      </span>
-                    </p>
-                    <p class="doc-desc" v-if="request.auth">
-                      <span>
-                        {{ $t("authentication") }}:
-                        <code>{{ request.auth || $t("none") }}</code>
-                      </span>
-                    </p>
-                    <p class="doc-desc" v-if="request.httpUser">
-                      <span>
-                        {{ $t("username") }}:
-                        <code>{{ request.httpUser || $t("none") }}</code>
-                      </span>
-                    </p>
-                    <p class="doc-desc" v-if="request.httpPassword">
-                      <span>
-                        {{ $t("password") }}:
-                        <code>{{ request.httpPassword || $t("none") }}</code>
-                      </span>
-                    </p>
-                    <p class="doc-desc" v-if="request.bearerToken">
-                      <span>
-                        {{ $t("token") }}:
-                        <code>{{ request.bearerToken || $t("none") }}</code>
-                      </span>
-                    </p>
-                    <h4 v-if="request.headers.length > 0">{{ $t("headers") }}</h4>
-                    <span v-if="request.headers">
-                      <p v-for="header in request.headers" :key="header.key" class="doc-desc">
-                        <span>
-                          {{ header.key || $t("none") }}:
-                          <code>{{ header.value || $t("none") }}</code>
-                        </span>
-                      </p>
-                    </span>
-                    <h4 v-if="request.params.length > 0">{{ $t("parameters") }}</h4>
-                    <span v-if="request.params">
-                      <p v-for="parameter in request.params" :key="parameter.key" class="doc-desc">
-                        <span>
-                          {{ parameter.key || $t("none") }}:
-                          <code>{{ parameter.value || $t("none") }}</code>
-                        </span>
-                      </p>
-                    </span>
-                    <h4 v-if="request.bodyParams">{{ $t("payload") }}</h4>
-                    <span v-if="request.bodyParams">
-                      <p v-for="payload in request.bodyParams" :key="payload.key" class="doc-desc">
-                        <span>
-                          {{ payload.key || $t("none") }}:
-                          <code>{{ payload.value || $t("none") }}</code>
-                        </span>
-                      </p>
-                    </span>
-                    <p class="doc-desc" v-if="request.rawParams">
-                      <span>
-                        {{ $t("parameters") }}:
-                        <code>{{ request.rawParams || $t("none") }}</code>
-                      </span>
-                    </p>
-                    <p class="doc-desc" v-if="request.contentType">
-                      <span>
-                        {{ $t("content_type") }}:
-                        <code>{{ request.contentType || $t("none") }}</code>
-                      </span>
-                    </p>
-                    <p class="doc-desc" v-if="request.requestType">
-                      <span>
-                        {{ $t("request_type") }}:
-                        <code>{{ request.requestType || $t("none") }}</code>
-                      </span>
-                    </p>
-                  </span>
-                </span>
-                <span
-                  class="request"
-                  v-for="(request, index) in collection.requests"
-                  :key="`request-${index}`"
-                >
-                  <h4>
-                    <i class="material-icons">insert_drive_file</i>
-                    {{ request.name || $t("none") }}
-                  </h4>
-                  <p class="doc-desc" v-if="request.url">
-                    <span>
-                      {{ $t("url") }}: <code>{{ request.url || $t("none") }}</code>
-                    </span>
-                  </p>
-                  <p class="doc-desc" v-if="request.path">
-                    <span>
-                      {{ $t("path") }}: <code>{{ request.path || $t("none") }}</code>
-                    </span>
-                  </p>
-                  <p class="doc-desc" v-if="request.method">
-                    <span>
-                      {{ $t("method") }}:
-                      <code>{{ request.method || $t("none") }}</code>
-                    </span>
-                  </p>
-                  <p class="doc-desc" v-if="request.auth">
-                    <span>
-                      {{ $t("authentication") }}:
-                      <code>{{ request.auth || $t("none") }}</code>
-                    </span>
-                  </p>
-                  <p class="doc-desc" v-if="request.httpUser">
-                    <span>
-                      {{ $t("username") }}:
-                      <code>{{ request.httpUser || $t("none") }}</code>
-                    </span>
-                  </p>
-                  <p class="doc-desc" v-if="request.httpPassword">
-                    <span>
-                      {{ $t("password") }}:
-                      <code>{{ request.httpPassword || $t("none") }}</code>
-                    </span>
-                  </p>
-                  <p class="doc-desc" v-if="request.bearerToken">
-                    <span>
-                      {{ $t("token") }}:
-                      <code>{{ request.bearerToken || $t("none") }}</code>
-                    </span>
-                  </p>
-                  <h4 v-if="request.headers.length > 0">{{ $t("headers") }}</h4>
-                  <span v-if="request.headers">
-                    <p v-for="header in request.headers" :key="header.key" class="doc-desc">
-                      <span>
-                        {{ header.key || $t("none") }}:
-                        <code>{{ header.value || $t("none") }}</code>
-                      </span>
-                    </p>
-                  </span>
-                  <h4 v-if="request.params.length > 0">{{ $t("parameters") }}</h4>
-                  <span v-if="request.params">
-                    <p v-for="parameter in request.params" :key="parameter.key" class="doc-desc">
-                      <span>
-                        {{ parameter.key || $t("none") }}:
-                        <code>{{ parameter.value || $t("none") }}</code>
-                      </span>
-                    </p>
-                  </span>
-                  <h4 v-if="request.bodyParams">{{ $t("payload") }}</h4>
-                  <span v-if="request.bodyParams">
-                    <p v-for="payload in request.bodyParams" :key="payload.key" class="doc-desc">
-                      <span>
-                        {{ payload.key || $t("none") }}:
-                        <code>{{ payload.value || $t("none") }}</code>
-                      </span>
-                    </p>
-                  </span>
-                  <p class="doc-desc" v-if="request.rawParams">
-                    <span>
-                      {{ $t("parameters") }}:
-                      <code>{{ request.rawParams || $t("none") }}</code>
-                    </span>
-                  </p>
-                  <p class="doc-desc" v-if="request.contentType">
-                    <span>
-                      {{ $t("content_type") }}:
-                      <code>{{ request.contentType || $t("none") }}</code>
-                    </span>
-                  </p>
-                  <p class="doc-desc" v-if="request.requestType">
-                    <span>
-                      {{ $t("request_type") }}:
-                      <code>{{ request.requestType || $t("none") }}</code>
-                    </span>
-                  </p>
-                </span>
+              <span v-for="(collection, index) in this.items" :key="index">
+                <DocsCollection :collection="collection" />
               </span>
             </div>
           </div>
@@ -287,52 +91,6 @@
   </div>
 </template>
 
-<style scoped lang="scss">
-.collection,
-.doc-desc,
-.folder,
-.request {
-  @apply flex;
-  @apply flex-col;
-  @apply justify-center;
-  @apply flex-1;
-  @apply p-4;
-
-  .material-icons {
-    @apply mr-4;
-  }
-}
-
-.folder {
-  @apply border-l;
-  @apply border-brdColor;
-  @apply mt-4;
-}
-
-.request {
-  @apply border;
-  @apply border-brdColor;
-  @apply rounded-lg;
-  @apply mt-4;
-
-  h4 {
-    @apply mt-4;
-  }
-}
-
-.doc-desc {
-  @apply text-fgLightColor;
-  @apply border-b;
-  @apply border-dashed;
-  @apply border-brdColor;
-  @apply m-0;
-
-  &:last-child {
-    @apply border-b-0;
-  }
-}
-</style>
-
 <script>
 import { fb } from "~/helpers/fb"
 import Mustache from "mustache"