diff --git a/app/assets/stylesheets/desktop/desktop-component.scss b/app/assets/stylesheets/desktop/desktop-component.scss
new file mode 100644
index 00000000..37b203db
--- /dev/null
+++ b/app/assets/stylesheets/desktop/desktop-component.scss
@@ -0,0 +1,361 @@
+@import "desktop-helper";
+
+.noSelect {
+	@include no-select;
+}
+
+/* tinygrid */
+.s_grid_row {
+	overflow: hidden;
+	position: relative;
+	margin-bottom: 12px;
+
+	.s_grid {
+		float: left;
+		margin: 0 0 0 12px;
+		@include box-sizing;
+
+		&:first-child {
+			margin-left: 0;
+		}
+	}
+	// fixed width column
+	// full width 420px
+	@for $i from 1 through 12 {
+		.s_grid_#{$i} {
+			width: 36px * $i - 12px;
+		}
+	}
+
+	&:last-child {
+		margin-bottom: 0;
+	}
+	
+	// fixed height row
+	// full height 428px
+	@for $j from 1 through 10 {
+		.s_grid_h_#{$j} {
+			height: 44px * $j - 12px;
+		}
+	}
+}
+
+/* simple dropdown menu */
+.sdm {
+	position: relative;
+}
+.sdm_t { 
+	cursor: default;
+	@include transition-type(all, 0.3);
+}
+.sdm:hover .sdm_o {
+	display: block;
+}
+.sdm_o {
+	display: none;
+	position: absolute;
+	z-index: 9;
+	left: 0;
+	top: 60px;
+	font-size: 15px;
+	}
+.sdm_o li {
+	border-top: solid 1px #f2f2f2;
+}
+.sdm_o li:first-child {
+	border: none;
+}
+.sdm_o a {
+	display: block;
+}
+.sdm_o .admtxt {
+	display: block;
+	line-height: 36px;
+}
+
+/* simple dropdown menu with indicator */
+.sdm_mdr .sdm_t {
+	padding-right: 12px;
+}
+.sdm_mdr .mdr {
+	position: absolute;
+	right: 0;
+}
+
+/* simple menu */
+.s_menu { 
+	font-size: 15px;
+	line-height: 36px;
+}
+.s_menu li {
+	border-top: solid 1px #ddd;
+}
+.s_menu li:first-child {
+	border: none;
+}
+.s_menu a {
+	display: block;
+}
+
+/* simple tabs */
+.s_tab {
+	font-size: 15px;
+	line-height: 36px;
+}
+.stb_h {}
+.stb_v {}
+.s_tab ul {
+	overflow: hidden;
+}
+.s_tab li {
+	float: left;
+}
+.s_tab a {
+	display: block;
+}
+.s_tab .admbg {
+	background-color: #f0f0f0;
+}
+.st_c {
+	display: none;
+}
+.st_c:first-child {
+	display: block;
+}
+
+/* simple form */
+.s_form {
+	font-size: 15px;
+	
+	// basic style
+	label {
+		font-size: 13px;
+		font-weight: normal;
+		display: inline-block;
+		vertical-align: middle;
+		width: 100px;
+		margin-right: 24px;
+		color: #777;
+
+		&.s_grid {
+			line-height: 32px;
+		}
+	}
+	input[type=text],
+	input[type=password],
+	select {
+		height: 32px;
+		margin-top: 0;
+		margin-bottom: 0;
+	}
+	input[type=file] {
+		// margin: 0px;
+		vertical-align: baseline;
+	}
+	input[type=text],
+	input[type=password],
+	textarea {
+		border: solid 1px $gray;
+		font-size: 15px;
+		margin-top: 0;
+		margin-bottom: 0;
+		padding: 6px;
+		@include transition-type(all, 0.3);
+		@include box-sizing;
+
+		&:focus {
+			background-color: lighten($gray, 10%);
+		}
+	}
+	textarea {
+		resize: none;
+
+		&.full_height {
+			height: 456px;
+		}
+	}
+	.s_table {
+		width: 100%;
+	}
+	.s_table th,
+	.s_table td {
+		padding: 6px 0;
+	}
+	.s_table th {
+		text-align: left;
+	}
+	.s_table td {
+		vertical-align: middle;
+	}
+	.s_table thead th {
+		border-bottom: solid 1px #eee;
+	}
+}
+
+
+.check_box_g {
+	padding: 4px 8px;
+	// border: solid 1px $gray;
+	@include box-sizing;
+
+	li { 
+		margin: 0 6px 6px 0;
+		padding: 0;
+	}
+	li,
+	li > * {
+		display: inline-block;
+		vertical-align: middle;
+	}
+	label { 
+		width: auto;
+		margin: 0;
+	}
+	> label {
+		font-size: 15px;
+		display: block;
+		padding: 4px 0;
+	}
+	li label {
+		padding-left: 4px;
+	}
+}
+
+/* tool bar */
+.toolbar {
+	background-color: #f0f0f0;
+	font-size: 15px;
+	line-height: 36px;
+	position: relative;
+	z-index: 9;
+}
+.toolbar .sdm, .toolbar .fn_g {
+	display: inline-block;
+	vertical-align: top;
+}
+.toolbar .sdm_o {
+	top: 36px;
+	background-color: #f0f0f0;
+}
+.toolbar button {
+	border: none;
+	outline: none;
+	padding: 0 16px;
+	margin: 0;
+	font-family: inherit;
+	font-size: 15px;
+	vertical-align: top;
+}
+.toolbar .fn_btn {
+	display: inline-block;
+	vertical-align: top;
+}
+
+/* tiny scrollbar */
+.tinycanvas {
+	overflow: hidden;
+	position: relative;
+	height: 100%;
+
+	.viewport {
+		width: auto;
+		height: 100%;
+		overflow: hidden;
+		position: relative;
+	}
+	.overview {
+		position: absolute;
+		left: 0;
+		top: 0;
+		min-width: 100%;
+		height: 100%;
+
+		> .column {
+			float: left;
+			border-right: solid 1px #eee;
+			padding: 0 12px 0 0;
+			margin: 0 12px 0 0;
+			height: 100%;
+			
+			&:last-child {
+				padding-right: 0;
+				margin-right: 0;
+				border-right: 0;
+			}
+			> ul {
+				height: 100%;
+			}
+			.datalist_item {
+				overflow: hidden;
+				padding-top: 3px;
+				@include box-sizing;
+				
+				&:first-child {
+					padding-top: 0;
+				}
+				.inner {
+					position: relative;
+					width: 100%;
+					height: 100%;
+					@include box-sizing;
+				}
+			}
+		}
+	}
+	.track {
+		height: 100%;
+		width: 6px;
+		position: relative;
+	}
+	.thumb {
+		height: 6px;
+		width: 6px;
+		cursor: pointer;
+		overflow: hidden;
+		position: absolute;
+		top: 0;
+		
+		.end {
+			overflow: hidden;
+			height: 6px;
+			width: 6px;
+		}
+	}
+	.scrollbar {
+		position: absolute;
+		z-index: 9;
+		visibility: hidden;
+		opacity: 0;
+		@include transition-type(opacity, 0.3);
+
+		&.dragging {
+			opacity: 1;
+			visibility: visible;
+		}
+		&.sb_h {
+			left: 0;
+			bottom: -6px;
+			height: 6px;
+		}
+		&.sb_v {
+			right: 0;
+			top: 0;
+			width: 6px;
+		}
+	}
+	.scrollbar.disable,
+	&:hover .scrollbar.disable {
+		visibility: hidden !important;
+	}
+	&:hover .scrollbar {
+		visibility: visible;
+		opacity: 1;
+	}
+}
+.toolbar + .tinycanvas,
+.s_tab + .tinycanvas {
+	height: 480px;
+}
+#panel_r .tinycanvas {
+	padding: 12px 0;
+}
\ No newline at end of file