diff --git a/docs/index.xml b/docs/index.xml
index 71e6549..73fce6c 100644
--- a/docs/index.xml
+++ b/docs/index.xml
@@ -15,51 +15,271 @@
   <liststyle>
     <item>
       <value>list</value>
-      <label>리스트</label>
+      <label>[베이직] 리스트 (1단)</label>
     </item>
     <item>
       <value>grid</value>
-      <label>그리드</label>
+      <label>[베이직] 그리드 (3단)</label>
     </item>
     <item>
       <value>gallery</value>
-      <label>갤러리</label>
+      <label>[베이직] 갤러리 (3단)</label>
     </item>
     <item>
       <value>Z</value>
-      <label>지그재그</label>
+      <label>[베이직] Z</label>
     </item>
   </liststyle>
   <cover>
-    <item>
-      <name>empty-line</name>
-      <label>빈 줄</label>
-      <description>빈 줄입니다.</description>
-    </item>
     <item>
       <name>list</name>
-      <label>리스트</label>
-      <description>리스트 형태로 글을 보여줍니다.</description>
+      <label>[베이직] 리스트 (1단)</label>
+      <description>리스트 (1단)</description>
     </item>
     <item>
       <name>grid</name>
-      <label>그리드</label>
-      <description>그리드 형태로 글을 보여줍니다.</description>
+      <label>[베이직] 그리드 (3단)</label>
+      <description>그리드 (3단)</description>
     </item>
     <item>
       <name>Z</name>
-      <label>지그재그</label>
-      <description>지그재그 형태로 글을 보여줍니다.</description>
+      <label>[베이직] Z</label>
+      <description>Z</description>
     </item>
     <item>
       <name>slider</name>
-      <label>슬라이더</label>
-      <description>슬라이더 형태로 글을 보여줍니다.</description>
+      <label>[베이직] 슬라이더</label>
+      <description>슬라이더</description>
     </item>
     <item>
       <name>gallery</name>
-      <label>갤러리</label>
-      <description>갤러리 형태로 글을 보여줍니다.</description>
+      <label>[베이직] 갤러리 (3단)</label>
+      <description>갤러리</description>
+    </item>
+    <item>
+      <name>profile</name>
+      <label>[포트폴리오] 프로필</label>
+      <description>[포트폴리오] 프로필</description>
+    </item>
+    <item>
+      <name>poster</name>
+      <label>[포트폴리오] 포스터</label>
+      <description>[포트폴리오] 포스터</description>
+    </item>
+    <item>
+      <name>square</name>
+      <label>[포트폴리오] 스퀘어</label>
+      <description>[포트폴리오] 스퀘어</description>
+    </item>
+    <item>
+      <name>picture-1-1-l</name>
+      <label>[포트폴리오] 사진 (1:1)/왼쪽</label>
+      <description>[포트폴리오] 사진 (1:1)/왼쪽</description>
+    </item>
+    <item>
+      <name>picture-1-1-c</name>
+      <label>[포트폴리오] 사진 (1:1)/중앙</label>
+      <description>[포트폴리오] 사진 (1:1)/중앙</description>
+    </item>
+    <item>
+      <name>picture-1-1-r</name>
+      <label>[포트폴리오] 사진 (1:1)/오른쪽</label>
+      <description>[포트폴리오] 사진 (1:1)/오른쪽</description>
+    </item>
+    <item>
+      <name>picture-2-3-l</name>
+      <label>[포트폴리오] 사진 (2:3)/왼쪽</label>
+      <description>[포트폴리오] 사진 (2:3)/왼쪽</description>
+    </item>
+    <item>
+      <name>picture-2-3-c</name>
+      <label>[포트폴리오] 사진 (2:3)/중앙</label>
+      <description>[포트폴리오] 사진 (2:3)/왼쪽</description>
+    </item>
+    <item>
+      <name>picture-2-3-r</name>
+      <label>[포트폴리오] 사진 (2:3)/오른쪽</label>
+      <description>[포트폴리오] 사진 (2:3)/왼쪽</description>
+    </item>
+    <item>
+      <name>list-2</name>
+      <label>[포트폴리오] 리스트 (2단)</label>
+      <description>[포트폴리오] 리스트 (2단)</description>
+    </item>
+    <item>
+      <name>grid-2</name>
+      <label>[포트폴리오] 그리드 (2단)</label>
+      <description>[포트폴리오] 그리드 (2단)</description>
+    </item>
+    <item>
+      <name>N</name>
+      <label>[포트폴리오] N</label>
+      <description>[포트폴리오] N</description>
+    </item>
+    <item>
+      <name>Z-</name>
+      <label>[포트폴리오] Z-</label>
+      <description>[포트폴리오] Z-</description>
+    </item>
+    <item>
+      <name>title-summary-1/2</name>
+      <label>[타이포그래피] 제목과 설명 (1/2)</label>
+      <description>[타이포그래피] 제목과 설명 (1/2)</description>
+    </item>
+    <item>
+      <name>title-summary-2</name>
+      <label>[타이포그래피] 제목과 설명 (2단)</label>
+      <description>[타이포그래피] 제목과 설명 (2단)</description>
+    </item>
+    <item>
+      <name>title-l-2xl</name>
+      <label>[타이포그래피] 제목 (2X-Large)/왼쪽</label>
+      <description>[타이포그래피] 제목 (2X-Large)/왼쪽</description>
+    </item>
+    <item>
+      <name>title-c-2xl</name>
+      <label>[타이포그래피] 제목 (2X-Large)/중앙</label>
+      <description>[타이포그래피] 제목 (2X-Large)/중앙</description>
+    </item>
+    <item>
+      <name>title-r-2xl</name>
+      <label>[타이포그래피] 제목 (2X-Large)/오른쪽</label>
+      <description>[타이포그래피] 제목 (2X-Large)/오른쪽</description>
+    </item>
+    <item>
+      <name>title-l-xl</name>
+      <label>[타이포그래피] 제목 (X-Large)/왼쪽</label>
+      <description>[타이포그래피] 제목 (X-Large)/왼쪽</description>
+    </item>
+    <item>
+      <name>title-c-xl</name>
+      <label>[타이포그래피] 제목 (X-Large)/중앙</label>
+      <description>[타이포그래피] 제목 (X-Large)/중앙</description>
+    </item>
+    <item>
+      <name>title-r-xl</name>
+      <label>[타이포그래피] 제목 (X-Large)/오른쪽</label>
+      <description>[타이포그래피] 제목 (X-Large)/오른쪽</description>
+    </item>
+    <item>
+      <name>title-l-lg</name>
+      <label>[타이포그래피] 제목 (Large)/왼쪽</label>
+      <description>[타이포그래피] 제목 (Large)/왼쪽</description>
+    </item>
+    <item>
+      <name>title-c-lg</name>
+      <label>[타이포그래피] 제목 (Large)/중앙</label>
+      <description>[타이포그래피] 제목 (Large)/중앙</description>
+    </item>
+    <item>
+      <name>title-r-lg</name>
+      <label>[타이포그래피] 제목 (Large)/오른쪽</label>
+      <description>[타이포그래피] 제목 (Large)/오른쪽</description>
+    </item>
+    <item>
+      <name>title-l</name>
+      <label>[타이포그래피] 제목/왼쪽</label>
+      <description>[타이포그래피] 제목/왼쪽</description>
+    </item>
+    <item>
+      <name>title-c</name>
+      <label>[타이포그래피] 제목/중앙</label>
+      <description>[타이포그래피] 제목/중앙</description>
+    </item>
+    <item>
+      <name>title-r</name>
+      <label>[타이포그래피] 제목/오른쪽</label>
+      <description>[타이포그래피] 제목/오른쪽</description>
+    </item>
+    <item>
+      <name>summary-title-1/2</name>
+      <label>[타이포그래피] 설명과 제목 (1/2)</label>
+      <description>[타이포그래피] 설명과 제목 (1/2)</description>
+    </item>
+    <item>
+      <name>summary-l</name>
+      <label>[타이포그래피] 설명/왼쪽</label>
+      <description>[타이포그래피] 설명/왼쪽</description>
+    </item>
+    <item>
+      <name>summary-c</name>
+      <label>[타이포그래피] 설명/중앙</label>
+      <description>[타이포그래피] 설명/중앙</description>
+    </item>
+    <item>
+      <name>summary-r</name>
+      <label>[타이포그래피] 설명/오른쪽</label>
+      <description>[타이포그래피] 설명/오른쪽</description>
+    </item>
+    <item>
+      <name>button-l</name>
+      <label>[타이포그래피] 버튼/왼쪽</label>
+      <description>[타이포그래피] 버튼/왼쪽</description>
+    </item>
+    <item>
+      <name>button-c</name>
+      <label>[타이포그래피] 버튼/중앙</label>
+      <description>[타이포그래피] 버튼/중앙</description>
+    </item>
+    <item>
+      <name>button-r</name>
+      <label>[타이포그래피] 버튼/오른쪽</label>
+      <description>[타이포그래피] 버튼/오른쪽</description>
+    </item>
+    <item>
+      <name>link-l</name>
+      <label>[타이포그래피] 링크/왼쪽</label>
+      <description>[타이포그래피] 링크/왼쪽</description>
+    </item>
+    <item>
+      <name>link-c</name>
+      <label>[타이포그래피] 링크/중앙</label>
+      <description>[타이포그래피] 링크/중앙</description>
+    </item>
+    <item>
+      <name>link-r</name>
+      <label>[타이포그래피] 링크/오른쪽</label>
+      <description>[타이포그래피] 링크/오른쪽</description>
+    </item>
+    <item>
+      <name>keyword-l</name>
+      <label>[타이포그래피] 키워드/왼쪽</label>
+      <description>[타이포그래피] 키워드/왼족</description>
+    </item>
+    <item>
+      <name>keyword-c</name>
+      <label>[타이포그래피] 키워드/중앙</label>
+      <description>[타이포그래피] 키워드/중앙</description>
+    </item>
+    <item>
+      <name>keyword-r</name>
+      <label>[타이포그래피] 키워드/오른쪽</label>
+      <description>[타이포그래피] 키워드/오른쪽</description>
+    </item>
+    <item>
+      <name>empty-line-1</name>
+      <label>[베이직] 빈 줄 (1)</label>
+      <description>빈 줄입니다.</description>
+    </item>
+    <item>
+      <name>empty-line-2</name>
+      <label>[베이직] 빈 줄 (2)</label>
+      <description>빈 줄입니다.</description>
+    </item>
+    <item>
+      <name>empty-line-3</name>
+      <label>[베이직] 빈 줄 (3)</label>
+      <description>빈 줄입니다.</description>
+    </item>
+    <item>
+      <name>empty-line-4</name>
+      <label>[베이직] 빈 줄 (4)</label>
+      <description>빈 줄입니다.</description>
+    </item>
+    <item>
+      <name>empty-line-5</name>
+      <label>[베이직] 빈 줄 (5)</label>
+      <description>빈 줄입니다.</description>
     </item>
   </cover>
   <variables>
diff --git a/views/Main/Cover.pug b/views/Main/Cover.pug
index f8baf16..85e5224 100644
--- a/views/Main/Cover.pug
+++ b/views/Main/Cover.pug
@@ -22,3 +22,5 @@ s_cover_group
     class='flex flex-col gap-y-12 lg:gap-y-16')
     s_cover_rep
       include Cover/Basic
+      include Cover/Portfolio
+      include Cover/Typography
diff --git a/views/Main/Cover/Portfolio.pug b/views/Main/Cover/Portfolio.pug
new file mode 100644
index 0000000..5bd6e1d
--- /dev/null
+++ b/views/Main/Cover/Portfolio.pug
@@ -0,0 +1,66 @@
+//----------- PROFILE -----------//
+
++cover('profile')
+  +coverTitle()
+  +coverPosts('profile')
+    +coverPost({ link: false })
+
+//----------- GALLERY -----------//
+
++cover('poster')
+  +coverTitle()
+  +coverPosts('poster')
+    +coverPost({ summary: false })
++cover('square')
+  +coverTitle()
+  +coverPosts('square')
+    +coverPost({ summary: false })
+
+//----------- PICTURE -----------//
+
++cover('picture-1-1-l')
+  +coverTitle()
+  +coverPosts('picture-1-1')
+    +coverPost()(class='mr-auto cover-content-left')
++cover('picture-1-1-c')
+  +coverTitle()
+  +coverPosts('picture-1-1')
+    +coverPost()(class='mx-auto cover-content-center')
++cover('picture-1-1-r')
+  +coverTitle()
+  +coverPosts('picture-1-1')
+    +coverPost()(class='ml-auto cover-content-right')
++cover('picture-2-3-l')
+  +coverTitle()
+  +coverPosts('picture-2-3')
+    +coverPost()(class='mr-auto cover-content-left')
++cover('picture-2-3-c')
+  +coverTitle()
+  +coverPosts('picture-2-3')
+    +coverPost()(class='mx-auto cover-content-center')
++cover('picture-2-3-r')
+  +coverTitle()
+  +coverPosts('picture-2-3')
+    +coverPost()(class='ml-auto cover-content-right')
+
+//----------- LIST -----------//
+
++cover('list-2')
+  +coverTitle()
+  +coverPosts('list-2')
+    +coverPost({
+      fallback: false,
+      description: false
+    })
++cover('grid-2')
+  +coverTitle()
+  +coverPosts('grid-2')
+    +coverPost()
++cover('N')
+  +coverTitle()
+  +coverPosts('N')
+    +coverPost()
++cover('Z-')
+  +coverTitle()
+  +coverPosts('Z-')
+    +coverPost()
diff --git a/views/Main/Cover/Typography.pug b/views/Main/Cover/Typography.pug
new file mode 100644
index 0000000..382c807
--- /dev/null
+++ b/views/Main/Cover/Typography.pug
@@ -0,0 +1,224 @@
+//----------- TYPOGRAPHY -----------//
+
++cover('title-summary-1/2')
+  +coverTitle()
+  +coverPosts('title-summary-1/2')
+    +coverPost({
+      link: false,
+      picture: false,
+      description: false
+    })
++cover('title-summary-2')
+  +coverTitle()
+  +coverPosts('title-summary-2')
+    +coverPost({
+      link: false,
+      picture: false,
+      description: false
+    })
++cover('title-l-2xl')
+  +coverTitle()
+  +coverPosts('title-2xl')
+    +coverPost({
+      link: false,
+      picture: false,
+      description: false,
+      summary: false
+    })(class='text-left')
++cover('title-c-2xl')
+  +coverTitle()
+  +coverPosts('title-2xl')
+    +coverPost({
+      link: false,
+      picture: false,
+      description: false,
+      summary: false
+    })(class='text-center')
++cover('title-r-2xl')
+  +coverTitle()
+  +coverPosts('title-2xl')
+    +coverPost({
+      link: false,
+      picture: false,
+      description: false,
+      summary: false
+    })(class='text-right')
++cover('title-l-xl')
+  +coverTitle()
+  +coverPosts('title-xl')
+    +coverPost({
+      link: false,
+      picture: false,
+      description: false
+    })(class='text-left')
++cover('title-c-xl')
+  +coverTitle()
+  +coverPosts('title-xl')
+    +coverPost({
+      link: false,
+      picture: false,
+      description: false
+    })(class='text-center')
++cover('title-r-xl')
+  +coverTitle()
+  +coverPosts('title-xl')
+    +coverPost({
+      link: false,
+      picture: false,
+      description: false
+    })(class='text-right')
++cover('title-l-lg')
+  +coverTitle()
+  +coverPosts('title-lg')
+    +coverPost({
+      link: false,
+      picture: false,
+      description: false
+    })(class='text-left')
++cover('title-c-lg')
+  +coverTitle()
+  +coverPosts('title-lg')
+    +coverPost({
+      link: false,
+      picture: false,
+      description: false
+    })(class='text-center')
++cover('title-r-lg')
+  +coverTitle()
+  +coverPosts('title-lg')
+    +coverPost({
+      link: false,
+      picture: false,
+      description: false
+    })(class='text-right')
++cover('title-l')
+  +coverTitle()
+  +coverPosts('title')
+    +coverPost({
+      link: false,
+      picture: false,
+      description: false
+    })(class='text-left')
++cover('title-c')
+  +coverTitle()
+  +coverPosts('title')
+    +coverPost({
+      link: false,
+      picture: false,
+      description: false
+    })(class='text-center')
++cover('title-r')
+  +coverTitle()
+  +coverPosts('title')
+    +coverPost({
+      link: false,
+      picture: false,
+      description: false
+    })(class='text-right')
++cover('summary-title-1/2')
+  +coverTitle()
+  +coverPosts('summary-title-1/2')
+    +coverPost({
+      link: false,
+      picture: false,
+      description: false
+    })
++cover('summary-l')
+  +coverTitle()
+  +coverPosts('summary')
+    +coverPost({
+      link: false,
+      picture: false,
+      header: false
+    })(class='text-left')
++cover('summary-c')
+  +coverTitle()
+  +coverPosts('summary')
+    +coverPost({
+      link: false,
+      picture: false,
+      header: false
+    })(class='text-center')
++cover('summary-r')
+  +coverTitle()
+  +coverPosts('summary')
+    +coverPost({
+      link: false,
+      picture: false,
+      header: false
+    })(class='text-right')
+
+//----------- BUTTON -----------//
+
++cover('button-l')
+  +coverTitle()
+  +coverPosts('button')(class='justify-start')
+    +coverPost({
+      picture: false,
+      description: false,
+      summary: false
+    })
++cover('button-c')
+  +coverTitle()
+  +coverPosts('button')(class='justify-center')
+    +coverPost({
+      picture: false,
+      description: false,
+      summary: false
+    })
++cover('button-r')
+  +coverTitle()
+  +coverPosts('button')(class='justify-end')
+    +coverPost({
+      picture: false,
+      description: false,
+      summary: false
+    })
++cover('link-l')
+  +coverTitle()
+  +coverPosts('link')(class='justify-start')
+    +coverPost({
+      picture: false,
+      description: false,
+      summary: false
+    })
++cover('link-c')
+  +coverTitle()
+  +coverPosts('link')(class='justify-center')
+    +coverPost({
+      picture: false,
+      description: false,
+      summary: false
+    })
++cover('link-r')
+  +coverTitle()
+  +coverPosts('link')(class='justify-end')
+    +coverPost({
+      picture: false,
+      description: false,
+      summary: false
+    })
++cover('keyword-l')
+  +coverTitle()
+  +coverPosts('keyword')(class='justify-start')
+    +coverPost({
+      picture: false,
+      description: false,
+      summary: false
+    })
++cover('keyword-c')
+  +coverTitle()
+  +coverPosts('keyword')(class='justify-center')
+    +coverPost({
+      picture: false,
+      description: false,
+      summary: false
+    })
++cover('keyword-r')
+  +coverTitle()
+  +coverPosts('keyword')(class='justify-end')
+    +coverPost({
+      picture: false,
+      description: false,
+      summary: false
+    })