diff --git a/src/theme/app.scss b/src/theme/app.scss
index 6edad7058ba178d9422a9b50d6adf0864d62048e..3a591dbca1c6f5f385e8b8e7110bc6a9e827d9b6 100644
--- a/src/theme/app.scss
+++ b/src/theme/app.scss
@@ -165,62 +165,175 @@ body,
 	}
 }
 
+/* nprogress progress bar follows theme color
+------------------------------- */
+#nprogress {
+	.bar {
+		background: var(--el-color-primary) !important;
+		z-index: 9999999 !important;
+	}
+}
+
+/* flex layout
+------------------------------- */
+.flex {
+	display: flex;
+}
+
+.flex-auto {
+	flex: 1;
+	overflow: hidden;
+}
+
+.flex-center {
+	@extend .flex;
+	flex-direction: column;
+	width: 100%;
+	overflow: hidden;
+}
+
+.flex-margin {
+	margin: auto;
+}
+
+.flex-warp {
+	display: flex;
+	flex-wrap: wrap;
+	align-content: flex-start;
+	margin: 0 -5px;
+
+	.flex-warp-item {
+		padding: 5px;
+
+		.flex-warp-item-box {
+			width: 100%;
+			height: 100%;
+		}
+	}
+}
+
+/* cursor mouse shape
+------------------------------- */
+.cursor-default {
+	cursor: default !important;
+}
+
+.cursor-help {
+	cursor: help !important;
+}
+
+.cursor-pointer {
+	cursor: pointer !important;
+}
+
+.cursor-move {
+	cursor: move !important;
+}
+
+/* width/height 100%
+------------------------------- */
 .w100 {
-  width: 100% !important;
+	width: 100% !important;
 }
 
 .h100 {
-  height: 100% !important;
+	height: 100% !important;
 }
 
 .vh100 {
-  height: 100vh !important;
+	height: 100vh !important;
 }
 
 .max100vh {
-  max-height: 100vh !important;
+	max-height: 100vh !important;
 }
 
 .min100vh {
-  min-height: 100vh !important;
+	min-height: 100vh !important;
+}
+
+/* color value
+------------------------------- */
+.color-primary {
+	color: var(--el-color-primary);
+}
+
+.color-success {
+	color: var(--el-color-success);
 }
 
+.color-warning {
+	color: var(--el-color-warning);
+}
+
+.color-danger {
+	color: var(--el-color-danger);
+}
+
+.color-info {
+	color: var(--el-color-info);
+}
+
+/* Font Size Global Style
+------------------------------- */
 @for $i from 10 through 32 {
-  .font#{$i} {
-    font-size: #{$i}px !important;
-  }
-}
-
-@for $i from 5 through 20 {
-  .mt#{$i} {
-    margin-top: #{$i}px !important;
-  }
-
-  .mr#{$i} {
-    margin-right: #{$i}px !important;
-  }
-
-  .mb#{$i} {
-    margin-bottom: #{$i}px !important;
-  }
-
-  .ml#{$i} {
-    margin-left: #{$i}px !important;
-  }
-
-  .pt#{$i} {
-    padding-top: #{$i}px !important;
-  }
-
-  .pr#{$i} {
-    padding-right: #{$i}px !important;
-  }
-
-  .pb#{$i} {
-    padding-bottom: #{$i}px !important;
-  }
-  
-  .pl#{$i} {
-    padding-left: #{$i}px !important;
-  }
+	.font#{$i} {
+		font-size: #{$i}px !important;
+	}
+}
+
+/* Outer margin, inner margin global style
+------------------------------- */
+@for $i from 1 through 35 {
+	.mt#{$i} {
+		margin-top: #{$i}px !important;
+	}
+
+	.mr#{$i} {
+		margin-right: #{$i}px !important;
+	}
+
+	.mb#{$i} {
+		margin-bottom: #{$i}px !important;
+	}
+
+	.ml#{$i} {
+		margin-left: #{$i}px !important;
+	}
+
+	.pt#{$i} {
+		padding-top: #{$i}px !important;
+	}
+
+	.pr#{$i} {
+		padding-right: #{$i}px !important;
+	}
+
+	.pb#{$i} {
+		padding-bottom: #{$i}px !important;
+	}
+
+	.pl#{$i} {
+		padding-left: #{$i}px !important;
+	}
+}
+
+.width-100 {
+	width: 100px;
+}
+
+.width-150 {
+	width: 150px;
+}
+
+.width-200 {
+	width: 200px;
+}
+
+.width-250 {
+	width: 250px;
+}
+
+.width-300 {
+	width: 300px;
 }
\ No newline at end of file