diff --git a/src/app/presentation/case-study/case-study.component.html b/src/app/presentation/case-study/case-study.component.html
index b66e32df..b87529f9 100644
--- a/src/app/presentation/case-study/case-study.component.html
+++ b/src/app/presentation/case-study/case-study.component.html
@@ -1,6 +1,11 @@
-<div class="markdown title center">
-  <h1>案例学习</h1>
-</div>
-
-<component-markdown-render [src]="'assets/docs/casestudies/daocloud.md'"></component-markdown-render>
-<component-markdown-render [src]="'assets/docs/casestudies/cmb.md'"></component-markdown-render>
+<mat-drawer-container class="case-study">
+  <mat-drawer mode="side" opened class="left-drawer">
+    <h2>案例（源自互联网收集）</h2>
+    <ul>
+      <li *ngFor="let case of cases" (click)="clickCase(case.source)">{{case.displayName}}</li>
+    </ul>
+  </mat-drawer>
+  <mat-drawer-content>
+    <component-markdown-render [src]="src"></component-markdown-render>
+  </mat-drawer-content>
+</mat-drawer-container>
diff --git a/src/app/presentation/case-study/case-study.component.scss b/src/app/presentation/case-study/case-study.component.scss
index e69de29b..b8ad5153 100644
--- a/src/app/presentation/case-study/case-study.component.scss
+++ b/src/app/presentation/case-study/case-study.component.scss
@@ -0,0 +1,23 @@
+.case-study {
+  min-height: 600px;
+  height: 100%;
+}
+
+.left-drawer {
+  width: 15%;
+  min-width: 200px;
+  padding-left: 20px;
+  min-height: 100vh;
+  height: 100vh;
+
+  h2 {
+    margin-top: 20px;
+    text-align: center;
+  }
+
+  li {
+    font-size: 1.2rem;
+    padding: 1rem;
+    display: block;
+  }
+}
diff --git a/src/app/presentation/case-study/case-study.component.ts b/src/app/presentation/case-study/case-study.component.ts
index 7f54945c..84321478 100644
--- a/src/app/presentation/case-study/case-study.component.ts
+++ b/src/app/presentation/case-study/case-study.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {Title} from '@angular/platform-browser';
 
 @Component({
@@ -7,6 +7,12 @@ import {Title} from '@angular/platform-browser';
   styleUrls: ['./case-study.component.scss']
 })
 export class CaseStudyComponent implements OnInit {
+  cases = [
+    {displayName: 'DaoCloud', source: 'daocloud'},
+    {displayName: '美团外卖', source: 'meituan'},
+    {displayName: '招商银行', source: 'cmb'},
+  ];
+  src = `assets/docs/casestudies/meituan.md`;
 
   constructor(title: Title) {
     title.setTitle('DevOps 学习平台 Ledge - 案例学习');
@@ -15,4 +21,7 @@ export class CaseStudyComponent implements OnInit {
   ngOnInit(): void {
   }
 
+  clickCase(source: string) {
+    this.src = `assets/docs/casestudies/${source}.md`;
+  }
 }
diff --git a/src/app/shared/custom-material.module.ts b/src/app/shared/custom-material.module.ts
index 40d23e6c..cf11a4f4 100644
--- a/src/app/shared/custom-material.module.ts
+++ b/src/app/shared/custom-material.module.ts
@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatMenuModule } from '@angular/material/menu';
 import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 import {MatSliderModule} from '@angular/material/slider';
+import {MatDrawer, MatSidenavModule} from '@angular/material/sidenav';
 
 const modules = [
   MatToolbarModule,
@@ -11,6 +12,7 @@ const modules = [
   MatMenuModule,
   MatProgressSpinnerModule,
   MatSliderModule,
+  MatSidenavModule
 ];
 
 @NgModule({