diff --git a/apps/front/src/component/Page/PageContent.vue b/apps/front/src/component/Page/PageContent.vue
new file mode 100644
index 0000000..dea329e
--- /dev/null
+++ b/apps/front/src/component/Page/PageContent.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { TitleBlock } from '../../markdown';
+import PageTitle from './PageTitle.vue';
+
+defineProps<{
+    content: TitleBlock;
+}>();
+</script>
+
+<template>
+    <div class="pageContent">
+        <PageTitle :value="content.value" :level="content.level" />
+        <p v-for="line in content.subBlocks" :key="line.value">{{ line.value }} - {{ line.type }}</p>
+        <div class="pageSubBlock">
+            <PageContent v-for="titleBlock in content.subTitleBlock" :key="titleBlock.value" :content="titleBlock" />
+        </div>
+    </div>
+</template>
+
+<style lang="scss"></style>
\ No newline at end of file
diff --git a/apps/front/src/component/Page/PageMetadata.vue b/apps/front/src/component/Page/PageMetadata.vue
new file mode 100644
index 0000000..d2dac56
--- /dev/null
+++ b/apps/front/src/component/Page/PageMetadata.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { DocHeader } from '@portfolio/api-client';
+
+defineProps<{
+    metadata: DocHeader;
+}>();
+</script>
+
+<template>
+    <div class="pageHeader">
+        <h1>{{ metadata.title }}</h1>
+        <p>{{ metadata.date }}</p>
+    </div>
+</template>
\ No newline at end of file
diff --git a/apps/front/src/component/Page/PageRender.vue b/apps/front/src/component/Page/PageRender.vue
index f9995b0..45a8431 100644
--- a/apps/front/src/component/Page/PageRender.vue
+++ b/apps/front/src/component/Page/PageRender.vue
@@ -1,14 +1,28 @@
 <script setup lang="ts">
 import { Page } from '@portfolio/api-client';
-
+import PageMetadata from './PageMetadata.vue';
+import PageContent from './PageContent.vue';
+import { TitleBlock, transformContent } from '../../markdown';
+import { ref, watch } from 'vue';
 const props = defineProps<{
     page: Page;
 }>();
+
+let contentBlock = ref<TitleBlock[]>(transformContent(props.page.content));
+
+watch(() => props.page.content, (newValue, oldValue) => {
+    if (newValue !== oldValue) {
+        contentBlock.value = transformContent(newValue);
+    }
+})
+
 </script>
 
 <template>
-    <div>
-        <h1>{{ page.name }}</h1>
-        <p>{{ page.content }}</p>
+    <div class="pageView">
+        <PageMetadata :metadata="page.metadata" />
+        <div class="pageContent">
+            <PageContent v-for="block in contentBlock" :key="block.value" :content="block" />
+        </div>
     </div>
 </template>
\ No newline at end of file
diff --git a/apps/front/src/component/Page/PageTitle.vue b/apps/front/src/component/Page/PageTitle.vue
new file mode 100644
index 0000000..4455835
--- /dev/null
+++ b/apps/front/src/component/Page/PageTitle.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+defineProps<{
+    value: string,
+    level: number,
+}>();
+</script>
+
+<template>
+    <div class="pageBlockTitle">
+        <h1 class="pageBlockTitleH pageBlockTitleH1" v-if="level === 1">{{ value }}</h1>
+        <h2 class="pageBlockTitleH pageBlockTitleH2" v-else-if="level === 2">{{ value }}</h2>
+        <h3 class="pageBlockTitleH pageBlockTitleH3" v-else-if="level === 3">{{ value }}</h3>
+        <h4 class="pageBlockTitleH pageBlockTitleH4" v-else>{{ value }}</h4>
+    </div>
+</template>
+
+<style lang="scss">
+.pageBlockTitleH {
+    @apply m-2 tracking-wide;
+}
+
+.pageBlockTitleH1 {
+    @apply font-bold text-5xl;
+}
+
+.pageBlockTitleH2 {
+    @apply font-bold text-4xl;
+}
+
+.pageBlockTitleH3 {
+    @apply font-semibold text-3xl;
+}
+
+.pageBlockTitleH4 {
+    @apply font-medium text-2xl;
+}
+</style>
\ No newline at end of file
diff --git a/apps/front/src/markdown/index.ts b/apps/front/src/markdown/index.ts
new file mode 100644
index 0000000..da27d58
--- /dev/null
+++ b/apps/front/src/markdown/index.ts
@@ -0,0 +1,74 @@
+export enum BlockType {
+  string = 'string',
+  title = 'title',
+  startEndCodeBlock = 'startEndCodeBlock',
+}
+
+export type Block = {
+  type: BlockType;
+  value: string;
+};
+
+export class TitleBlock {
+  type: BlockType = BlockType.title;
+  level = 0;
+  value = '';
+  subBlocks: Block[] = [];
+  subTitleBlock: TitleBlock[] = [];
+
+  constructor(value: string) {
+    this.value = value.replace(new RegExp('#{0,}'), '').trim();
+    this.level = value.split('').filter((char: string) => char === '#').length;
+  }
+
+  appendTitleBlock = (param: TitleBlock) => {
+    if (param.level - 1 === this.level) {
+      this.subTitleBlock.push(param);
+    } else if (this.subTitleBlock.length > 0) {
+      this.subTitleBlock[this.subTitleBlock.length - 1].appendTitleBlock(param);
+    } else {
+      this.subTitleBlock.push(param);
+    }
+  };
+  appendBlock = (block: Block) => {
+    if (this.subTitleBlock.length > 0) {
+      this.subTitleBlock[this.subTitleBlock.length - 1].appendBlock(block);
+    } else {
+      this.subBlocks.push(block);
+    }
+  };
+}
+
+export const transformContent = (content: string): TitleBlock[] => {
+  const titleBlocks: TitleBlock[] = [];
+  const lines = content.split('\n');
+  lines.forEach((line) => {
+    // Title
+    if (line.trim() === '') return;
+    if (line.startsWith('#')) {
+      const titleBlock = new TitleBlock(line);
+      if (
+        titleBlocks.length === 0 ||
+        titleBlocks[titleBlocks.length - 1].level === titleBlock.level
+      )
+        titleBlocks.push(titleBlock);
+      if (titleBlocks[titleBlocks.length - 1].level < titleBlock.level) {
+        titleBlocks[titleBlocks.length - 1].appendTitleBlock(titleBlock);
+      }
+    } else {
+      const block: Block = {
+        type: BlockType.string,
+        value: line,
+      };
+      if (line.startsWith('```')) {
+        block.type = BlockType.startEndCodeBlock;
+      }
+      if (titleBlocks.length === 0) {
+        titleBlocks.push(new TitleBlock(''));
+      }
+      titleBlocks[titleBlocks.length - 1].appendBlock(block);
+    }
+  });
+  console.log(titleBlocks);
+  return titleBlocks;
+};
diff --git a/cicd/Readme.md b/folio_content/content/cicd/portfolio-cicd.md
similarity index 90%
rename from cicd/Readme.md
rename to folio_content/content/cicd/portfolio-cicd.md
index bf2cc90..54080de 100644
--- a/cicd/Readme.md
+++ b/folio_content/content/cicd/portfolio-cicd.md
@@ -1,4 +1,26 @@
-# Monofolio CICD
+---
+date: 2024-08-09T22:51:00Z
+title: "Monofolio-CICD"
+description: |
+    Monofolio CICD
+spec:
+  blog: false
+  project: true
+  doc: true
+tags:
+ - project
+ - Kube
+ - continuous-update
+ - GitOps
+techno:
+  - Kubernetes
+  - ArgoCD
+  - Helm
+  - Terraform
+  - Gitea
+  - Tekton
+  - Kustomize
+---
 
 ## Goal
 
@@ -34,6 +56,10 @@
 - The Release flow is executed and the `beta` version is deployed.
 - If the `beta` version is stable, a new tag is created and the `production` version is deployed.
 
+#### Test
+
+test 12345
+
 ```mermaid
 flowchart TD;
     subgraph "Development flow"