diff --git a/src/renderer/assets/css/_spacing.sass b/src/renderer/assets/css/_spacing.sass
index b6e40580..58b87cee 100644
--- a/src/renderer/assets/css/_spacing.sass
+++ b/src/renderer/assets/css/_spacing.sass
@@ -17,3 +17,19 @@
 @for $i from 1 through 10
 	.m-#{$i}
 		margin: $i + rem
+
+@for $i from 1 through 10
+	.mt-#{$i}
+		margin-top: $i + rem
+
+@for $i from 1 through 10
+	.ml-#{$i}
+		margin-left: $i + rem
+
+@for $i from 1 through 10
+	.mb-#{$i}
+		margin-bottom: $i + rem
+
+@for $i from 1 through 10
+	.mr-#{$i}
+		margin-right: $i + rem
diff --git a/src/renderer/assets/css/_utilities.sass b/src/renderer/assets/css/_utilities.sass
index 91af4046..c03d8abc 100644
--- a/src/renderer/assets/css/_utilities.sass
+++ b/src/renderer/assets/css/_utilities.sass
@@ -1,5 +1,7 @@
+@import "utilities/alignment"
 @import "utilities/cursor"
 @import "utilities/display"
 @import "utilities/flex"
+@import "utilities/overflow"
 @import "utilities/scrollbar"
 @import "utilities/settings"
diff --git a/src/renderer/assets/css/utilities/_alignment.sass b/src/renderer/assets/css/utilities/_alignment.sass
new file mode 100644
index 00000000..b2869cba
--- /dev/null
+++ b/src/renderer/assets/css/utilities/_alignment.sass
@@ -0,0 +1,8 @@
+.text-left
+  text-align: left
+.text-center
+  text-align: center
+.text-right
+  text-align: right
+.text-justify
+  text-align: justify
\ No newline at end of file
diff --git a/src/renderer/assets/css/utilities/_display.sass b/src/renderer/assets/css/utilities/_display.sass
index e5c92eeb..d7334689 100644
--- a/src/renderer/assets/css/utilities/_display.sass
+++ b/src/renderer/assets/css/utilities/_display.sass
@@ -4,6 +4,17 @@
 .d-flex
 	display: flex
 
+.static
+	position: static
+.fixed
+	position: fixed
+.absolute
+	position: absolute
+.relative
+	position: relative
+.sticky
+	position: sticky
+
 .opacity-0
 	opacity: 0
 
diff --git a/src/renderer/assets/css/utilities/_overflow.sass b/src/renderer/assets/css/utilities/_overflow.sass
new file mode 100644
index 00000000..794b39d5
--- /dev/null
+++ b/src/renderer/assets/css/utilities/_overflow.sass
@@ -0,0 +1,40 @@
+.overflow-auto
+  overflow: auto
+
+.overflow-hidden
+  overflow: hidden
+
+.overflow-visible
+  overflow: visible
+
+.overflow-scroll
+  overflow: scroll
+
+.overflow-x-auto
+  overflow-x: auto
+
+.overflow-y-auto
+  overflow-y: auto
+
+.overflow-x-hidden
+  overflow-x: hidden
+
+.overflow-y-hidden
+  overflow-y: hidden
+
+.overflow-x-visible
+  overflow-x: visible
+
+.overflow-y-visible
+  overflow-y: visible
+
+.overflow-x-scroll
+  overflow-x: scroll
+
+.overflow-y-scroll
+  overflow-y: scroll
+
+.scrolling-touch
+  -webkit-overflow-scrolling: touch
+.scrolling-auto
+  -webkit-overflow-scrolling: auto
\ No newline at end of file
diff --git a/src/renderer/components/TButton/TButton.vue b/src/renderer/components/TButton/TButton.vue
index 76de7963..212b777b 100644
--- a/src/renderer/components/TButton/TButton.vue
+++ b/src/renderer/components/TButton/TButton.vue
@@ -50,6 +50,7 @@ export default {
 
 <style lang="sass">
 .t-button
+	transition: 0.15s cubic-bezier(0.34, 0, 0.58, 1), transform 0.15s cubic-bezier(0.34, 0, 0.58, 1)
 	cursor: pointer
 	opacity: 1
 	font:
@@ -65,6 +66,9 @@ export default {
 		width: 1px
 		style: solid
 		radius: 2rem
+	
+	&:hover
+    transform: scale(1.02)
 
 	&__primary
 		color: #ffffff
diff --git a/src/renderer/components/TLayouts/TScrollbar.vue b/src/renderer/components/TLayouts/TScrollbar.vue
index 66d9f68e..237769a2 100644
--- a/src/renderer/components/TLayouts/TScrollbar.vue
+++ b/src/renderer/components/TLayouts/TScrollbar.vue
@@ -1,5 +1,5 @@
 <template>
-	<vue-scrollbar :style="{ height: height, width: width }">
+	<vue-scrollbar :style="{ height: height, width: width, margin: 0, padding: padding }">
 		<slot />
 	</vue-scrollbar>
 </template>
@@ -20,6 +20,10 @@ export default {
 		width: {
 			type: String,
 			default: null
+		},
+		padding: {
+			type: String,
+			default: null
 		}
 	}
 };
diff --git a/src/renderer/components/commit/commitHistoryItem.vue b/src/renderer/components/commit/commitHistoryItem.vue
index f197671a..051353b4 100644
--- a/src/renderer/components/commit/commitHistoryItem.vue
+++ b/src/renderer/components/commit/commitHistoryItem.vue
@@ -1,22 +1,9 @@
 <template>
 	<t-flexbox flex-direction="column">
-		<a
-			class="history__item"
-			@mouseenter="showFiles(data.hash)"
-			@mouseleave="hideFiles()"
-		>
-			<div :title="data.message" class="history__item__title">
-				{{ data.message }}
-			</div>
-			<t-flexbox
-				flex-direction="row"
-				align-items="center"
-				class="history__item__author"
-			>
-				<img
-					class="history__item__author__image"
-					src="../../../../static/image/user_avatar.png"
-				/>
+		<a class="history__item" @mouseenter="showFiles(data.hash)" @mouseleave="hideFiles()">
+			<div :title="data.message" class="history__item__title">{{ data.message }}</div>
+			<t-flexbox flex-direction="row" align-items="center" class="history__item__author">
+				<img class="history__item__author__image" src="../../../../static/image/user_avatar.png" />
 				{{ data.author_name }} committed {{ data.date | moment("from", "now") }}
 			</t-flexbox>
 		</a>
@@ -28,9 +15,7 @@
 			class="history__files"
 		>
 			<dropdown-list class="history__files__dropdown">
-				<dropdown-item v-for="item in files.list" :key="item">
-					{{ item }}
-				</dropdown-item>
+				<dropdown-item v-for="item in files.list" :key="item">{{ item }}</dropdown-item>
 			</dropdown-list>
 		</t-flexbox>
 	</t-flexbox>
@@ -94,13 +79,14 @@ export default {
 <style lang="sass">
 .history
 	&__item
-		padding: 10px
+		padding: 14px
 		font-size: 12px
-		border-bottom: 1px solid #DEE0E3
+		margin-bottom: 0.8rem
 
 		&__title
 			margin-bottom: 6px
 			color: black
+			font-weight: 500
 
 		&__author
 			font-size: 10px
diff --git a/src/renderer/components/diff/diffPreview.vue b/src/renderer/components/diff/diffPreview.vue
index f82dd13d..830b4304 100644
--- a/src/renderer/components/diff/diffPreview.vue
+++ b/src/renderer/components/diff/diffPreview.vue
@@ -1,9 +1,7 @@
 <template>
-	<t-scrollbar height="90vh">
+	<t-scrollbar padding="0.5rem" height="90vh">
 		<div>
-			<div v-for="(line, index) in preview" :key="index">
-				{{ line }}
-			</div>
+			<div v-for="(line, index) in preview" :key="index">{{ line }}</div>
 		</div>
 	</t-scrollbar>
 </template>
diff --git a/src/renderer/components/navbar.vue b/src/renderer/components/navbar.vue
index 39732903..0af4e1a9 100644
--- a/src/renderer/components/navbar.vue
+++ b/src/renderer/components/navbar.vue
@@ -10,11 +10,7 @@
 			<commitIcon />
 			<p>Commit</p>
 		</t-flexbox>
-		<t-flexbox
-			v-if="!!getRemoteUrl"
-			class="navbar__group"
-			:class="getRemoteFeature"
-		>
+		<t-flexbox v-if="!!getRemoteUrl" class="navbar__group" :class="getRemoteFeature">
 			<t-flexbox
 				flex-direction="column"
 				align-items="center"
@@ -33,11 +29,7 @@
 				<pushIcon />
 				<p>Push</p>
 			</t-flexbox>
-			<t-flexbox
-				flex-direction="column"
-				align-items="center"
-				class="navbar__item"
-			>
+			<t-flexbox flex-direction="column" align-items="center" class="navbar__item">
 				<fetchIcon />
 				<p>Fetch</p>
 			</t-flexbox>
@@ -246,5 +238,5 @@ export default {
 
 		.navbar__item
 			&:not(:last-child)
-				margin-right: 15px
+				margin-right: 1.5rem
 </style>
diff --git a/src/renderer/components/sidebar.vue b/src/renderer/components/sidebar.vue
index 6ab34b8f..048ab6ca 100644
--- a/src/renderer/components/sidebar.vue
+++ b/src/renderer/components/sidebar.vue
@@ -1,28 +1,19 @@
 <template>
 	<t-flexbox class="repository__sidebar">
 		<t-flexbox flex-direction="column" class="repository__sidebar__group">
-			<router-link
-				class="repository__sidebar__item"
-				:to="{ name: 'repositoryWorkspace' }"
-			>
+			<router-link class="repository__sidebar__item" :to="{ name: 'repositoryWorkspace' }">
 				<t-flexbox align-items="center">
 					<folderIcon />
 					<p>Workspace</p>
 				</t-flexbox>
 			</router-link>
-			<router-link
-				class="repository__sidebar__item"
-				:to="{ name: 'repositoryHistory' }"
-			>
+			<router-link class="repository__sidebar__item" :to="{ name: 'repositoryHistory' }">
 				<t-flexbox align-items="center">
 					<clockIcon />
 					<p>History</p>
 				</t-flexbox>
 			</router-link>
-			<router-link
-				class="repository__sidebar__item"
-				:to="{ name: 'repositoryStats' }"
-			>
+			<router-link class="repository__sidebar__item" :to="{ name: 'repositoryStats' }">
 				<t-flexbox align-items="center">
 					<barIcon />
 					<p>Stats</p>
@@ -59,7 +50,7 @@ export default {
 
 		&__item
 			padding: 3px 20px
-			margin-bottom: 5px
+			margin-bottom: 1.5rem
 
 			svg
 				width: 20px
diff --git a/src/renderer/pages/repository/workspace.vue b/src/renderer/pages/repository/workspace.vue
index a03d2b30..9a72dfb3 100644
--- a/src/renderer/pages/repository/workspace.vue
+++ b/src/renderer/pages/repository/workspace.vue
@@ -1,53 +1,38 @@
 <template>
 	<t-flexbox flex-direction="row" :flex-grow="1">
-		<div ref="workspaceFiles" class="workspace__files">
-			<t-flexbox flex-direction="column" style="overflow: hidden;">
-				<t-flexbox
-					ref="branchName"
-					align-items="center"
-					class="workspace__branch"
-				>
+		<div ref="workspaceFiles" class="workspace">
+			<t-flexbox flex-direction="column" class="overflow-hidden">
+				<t-flexbox ref="branchName" align-items="center" class="branch">
 					<branchIcon />
 					<p>{{ this.$store.state.commit.activeBranch }}</p>
 				</t-flexbox>
-				<t-scrollbar
-					style="height: calc(100vh - (106px + 41px + 65px + 34px))"
-					width="100%"
-				>
-					<fileChangesSkeleton
-						v-if="this.$store.getters['commit/allFiles'].length < 1"
-					/>
+				<t-scrollbar style="height: calc(100vh - (106px + 41px + 65px + 34px))" width="100%">
+					<fileChangesSkeleton v-if="this.$store.getters['commit/allFiles'].length < 1" />
 					<div v-else>
 						<t-flexbox
 							v-for="file in this.$store.getters['commit/allFiles']"
 							:key="file.path"
-							class="workspace__changes__item"
+							class="changes__item"
 							align-items="center"
-							@click="previewFileChange(file)"
+							@click.native="previewFileChange(file)"
 						>
 							<input
 								v-show="getFeatureValue.commit"
 								v-model="stagedFile"
-								class="workspace__changes__item__checkbox"
+								class="checkbox"
 								type="checkbox"
 								:value="file.path"
 							/>
-							<label :title="file.path" :for="file.path">
+							<label class="cursor-pointer" :title="file.path" :for="file.path">
 								<t-flexbox>
-									<p class="workspace__changes__item__path__name">
-										{{ filePath(file.path) }}
-									</p>
-									<p class="workspace__changes__item__path__file">
-										{{ fileName(file.path) }}
-									</p>
+									<p class="path__name">{{ filePath(file.path) }}</p>
+									<p class="path__file">{{ fileName(file.path) }}</p>
 								</t-flexbox>
 							</label>
 							<div
 								:style="'background-color: #' + fileTypeColor(file)"
-								class="workspace__changes__item__type ml-auto"
-							>
-								{{ fileType(file) }}
-							</div>
+								class="type ml-auto"
+							>{{ fileType(file) }}</div>
 						</t-flexbox>
 					</div>
 				</t-scrollbar>
@@ -60,10 +45,7 @@
 				padding-right="10px"
 			/>
 		</div>
-		<diffPreview
-			v-if="this.$store.state.workspace.filePreview.isActive"
-			:preview="fileDiffPreview"
-		/>
+		<diffPreview v-if="this.$store.state.workspace.filePreview.isActive" :preview="fileDiffPreview" />
 		<blank-slate v-else />
 	</t-flexbox>
 </template>
@@ -223,11 +205,12 @@ export default {
 
 <style lang="sass">
 .workspace
-	&__files
-		border-right: 1px solid #DEE0E3
-		width: 300px
+	border-right: 1px solid #DEE0E3
+	width: 300px
+	max-width: 300px;
+	min-width: 300px;
 
-	&__branch
+	.branch
 		background-color: #EFEFEF
 		padding: 10px 20px
 		border-bottom: 1px solid #DEE0E3
@@ -242,22 +225,21 @@ export default {
 			font-size: 14px
 			font-weight: 600
 
-	&__changes
+	.changes
 		&__item
-			border-bottom: 1px solid #DEE0E3
+			padding: .8rem 10px
 			font-size: 12px
 			color: #2E3034
-			padding: 6px 10px
 			cursor: pointer
 
-			&__checkbox
+			.checkbox
 				margin-right: 5px
 
-			&__path
+			.path
 				&__name
 					color: #BEBEBE
 
-			&__type
+			.type
 				padding: 3px 5px
 				color: white
 				border-radius: 3px
diff --git a/src/renderer/pages/settings/experimental.vue b/src/renderer/pages/settings/experimental.vue
index 5000c75c..6200c6a6 100644
--- a/src/renderer/pages/settings/experimental.vue
+++ b/src/renderer/pages/settings/experimental.vue
@@ -1,46 +1,32 @@
 <template>
 	<div class="experimental">
 		<h4>Experimental Features</h4>
-		<div class="experimental__warning">
+		<div class="warning">
 			Experimental features are projects/features that aren't quite ready. They
 			may break (or disapper) at any time. Let us know what you think on our
-			<a @click="discordURL()">Thermal Discord server</a>.
+			<a
+				@click="discordURL()"
+			>Thermal Discord server</a>.
 		</div>
-		<div class="settings__section__group">
-			<t-flexbox
-				flex-direction="row"
-				align-items="center"
-				class="settings__section__group__item"
-			>
+		<div class="section__group">
+			<t-flexbox flex-direction="row" align-items="center" class="item">
 				<div>
 					<h6>File changes</h6>
 					<p>
 						Preview additions and deletion in file from commit history,
-						<a @click="fileChanges()">click to learn more</a>.
+						<a
+							@click="fileChanges()"
+						>click to learn more</a>.
 					</p>
 				</div>
-				<toggle-button
-					v-model="toggleFileChanges"
-					color="#00adb5"
-					class="ml-auto"
-				/>
+				<toggle-button v-model="toggleFileChanges" color="#00adb5" class="ml-auto" />
 			</t-flexbox>
-			<t-flexbox
-				flex-direction="row"
-				align-items="center"
-				class="settings__section__group__item"
-			>
+			<t-flexbox flex-direction="row" align-items="center" class="item">
 				<div>
 					<h6>Quick file preview</h6>
-					<p>
-						Toggle quick file preview for commit logs.
-					</p>
+					<p>Toggle quick file preview for commit logs.</p>
 				</div>
-				<toggle-button
-					v-model="toggleQuickFilePreview"
-					color="#00adb5"
-					class="ml-auto"
-				/>
+				<toggle-button v-model="toggleQuickFilePreview" color="#00adb5" class="ml-auto" />
 			</t-flexbox>
 		</div>
 	</div>
@@ -97,11 +83,16 @@ export default {
 <style lang="sass">
 .experimental
 
-	&__warning
+	.warning
 		padding: 1rem 0
 		font-size: 12px
 		color: #6C6F75
 
 		a
 			border-bottom: 1px solid #00adb5
+
+	.section__group
+		.item
+			&:not(:first-child)
+					margin-top: 1rem
 </style>
diff --git a/src/renderer/pages/settings/index.vue b/src/renderer/pages/settings/index.vue
index 3c5c5094..738db448 100644
--- a/src/renderer/pages/settings/index.vue
+++ b/src/renderer/pages/settings/index.vue
@@ -4,7 +4,7 @@
 		<div class="w-100">
 			<t-scrollbar height="95vh">
 				<t-container>
-					<div class="settings__content">
+					<div class="content">
 						<router-view />
 					</div>
 				</t-container>
@@ -31,7 +31,7 @@ export default {
 <style lang="sass">
 .settings
 	height: 95vh
-	&__content
+	.content
 		margin-top: 2rem
 		padding: 20px
 </style>
diff --git a/src/renderer/pages/settings/information.vue b/src/renderer/pages/settings/information.vue
index 480eb594..b5f7acd2 100644
--- a/src/renderer/pages/settings/information.vue
+++ b/src/renderer/pages/settings/information.vue
@@ -1,17 +1,11 @@
 <template>
 	<div class="information">
-		<div
-			v-for="section in information"
-			:key="section.name"
-			class="information__section"
-		>
+		<div v-for="section in information" :key="section.name" class="section">
 			<h5>{{ section.name }}</h5>
 			<table class="table">
-				<tbody class="table__item-container">
-					<tr v-for="item in section.data" :key="item.info" class="table__item">
-						<td v-for="info in item" :key="info" class="table__item-line">
-							{{ info }}
-						</td>
+				<tbody class="item-container">
+					<tr v-for="item in section.data" :key="item.info" class="item">
+						<td v-for="info in item" :key="info" class="item-line">{{ info }}</td>
 					</tr>
 				</tbody>
 			</table>
@@ -69,15 +63,16 @@ export default {
 		margin-bottom: 1.5rem
 		width: 100%
 
-		&__item
+		.item
 			display: flex
 			justify-content: space-between
-			border-bottom: 1px solid #EFEFEF
+			margin-top: 1.2rem
+    	padding: 0.2rem
 
 			&:hover
 				background-color: #DEE0E3
 
-		&__item-line
+		.item-line
 			padding: .4rem
 
 			&:first-child
diff --git a/src/renderer/pages/settings/profile.vue b/src/renderer/pages/settings/profile.vue
index 57a330e6..442198d5 100644
--- a/src/renderer/pages/settings/profile.vue
+++ b/src/renderer/pages/settings/profile.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="profile">
-		<div class="profile__avatar">
+		<div class="avatar">
 			<Avatar
 				:src="profileData.author.imageUrl"
 				:title="profileData.author.name"
@@ -17,21 +17,21 @@
 			label="Name"
 			placeholder="Enter your name"
 			name="profile_name"
-			class="profile__field"
+			class="field"
 		/>
 		<inputTextLabel
 			v-model="authorEmail"
 			label="Email"
 			placeholder="Enter your email address"
 			name="profile_email"
-			class="profile__field"
+			class="field"
 		/>
 		<inputTextLabel
 			v-model="authorImage"
 			label="Image"
 			placeholder="Paste your image"
 			name="profile_image"
-			class="profile__field"
+			class="field"
 		/>
 	</div>
 </template>
@@ -89,11 +89,11 @@ export default {
 
 <style lang="sass">
 .profile
-	&__avatar
+	.avatar
 		border-radius: 1rem
 		display: inline-block
 		margin-bottom: 1rem
 
-	&__field
+	.field
 		margin-bottom: 1rem
 </style>
diff --git a/src/renderer/pages/welcome.vue b/src/renderer/pages/welcome.vue
index dd7b3d5c..c0722a1e 100644
--- a/src/renderer/pages/welcome.vue
+++ b/src/renderer/pages/welcome.vue
@@ -1,60 +1,41 @@
 <template>
-	<t-flexbox
-		align-items="center"
-		justify-content="space-evenly"
-		class="welcome"
-	>
-		<t-flexbox
-			flex-direction="column"
-			align-items="center"
-			style="text-align: center"
-		>
+	<t-flexbox align-items="center" justify-content="space-evenly" class="welcome">
+		<t-flexbox flex-direction="column" align-items="center" class="text-center">
 			<h1>Welcome to Thermal</h1>
-			<p style="margin-bottom: 1rem">
-				One stop. Git repository.
-			</p>
-			<t-flexbox style="margin-bottom: 1rem">
-				<div class="welcome__introduction__item__icon" @click="websiteURL()">
+			<p class="mb-1">One stop. Git repository.</p>
+			<t-flexbox class="mb-1">
+				<div class="icon" @click="websiteURL()">
 					<linkIcon />
 				</div>
-				<div class="welcome__introduction__item__icon" @click="twitterURL()">
+				<div class="icon" @click="twitterURL()">
 					<twitterIcon />
 				</div>
-				<div class="welcome__introduction__item__icon" @click="coffeeURL()">
+				<div class="icon" @click="coffeeURL()">
 					<dollarIcon />
 				</div>
-				<div class="welcome__introduction__item__icon" @click="discordURL()">
+				<div class="icon" @click="discordURL()">
 					<helpIcon />
 				</div>
 			</t-flexbox>
 		</t-flexbox>
-		<div class="welcome__separate" />
 		<t-flexbox flex-direction="column" align-items="center">
 			<div
-				class="welcome__repository__list"
+				class="repository__list"
 				@drop.prevent="dropHandler($event)"
 				@dragover.prevent="dropHandler()"
 			>
 				<t-scrollbar v-if="getAllRepository.length > 0" height="400px">
-					<div style="padding: 1rem">
+					<div class="p-1">
 						<div v-if="getAllRepository.length > 0">
 							<t-flexbox
 								v-for="(repo, index) in getAllRepository"
 								:key="repo.path"
 								align-items="center"
-								class="welcome__repository__list__item"
+								class="item"
 							>
 								<h6>{{ repo.name | truncateFilter(30) }}</h6>
-								<t-button
-									margin-left="auto"
-									@click.native="selectCurrentRepository(index)"
-								>
-									Open
-								</t-button>
-								<div
-									class="welcome__repository__list__item__settings"
-									@click="openRepositorySettings(index)"
-								>
+								<t-button margin-left="auto" @click.native="selectCurrentRepository(index)">Open</t-button>
+								<div class="item__settings" @click="openRepositorySettings(index)">
 									<settingsIcon />
 								</div>
 							</t-flexbox>
@@ -63,7 +44,7 @@
 				</t-scrollbar>
 				<div
 					v-else
-					style="position: relative; padding: 1rem;"
+					class="p-1 relative"
 					@mouseenter="toggleRepositoryExampleModel"
 					@mouseleave="toggleRepositoryExampleModel"
 				>
@@ -72,24 +53,17 @@
 							v-for="repo in repositoryList"
 							:key="repo"
 							align-items="center"
-							class="welcome__repository__list__item welcome__repository__example"
+							class="repository__example item"
 						>
 							<h6>{{ repo }}</h6>
-							<t-button margin-left="auto">
-								Open
-							</t-button>
-							<div class="welcome__repository__list__item__settings">
+							<t-button margin-left="auto">Open</t-button>
+							<div class="item__settings">
 								<settingsIcon />
 							</div>
 						</t-flexbox>
 					</div>
-					<div
-						v-show="exampleRepositoryModel"
-						class="welcome__repository__example__model"
-					>
-						<t-button margin-top="1rem" @click.native="addLocalRepository()">
-							Add Repository
-						</t-button>
+					<div v-show="exampleRepositoryModel" class="repository__example__model">
+						<t-button margin-top="1rem" @click.native="addLocalRepository()">Add Repository</t-button>
 					</div>
 				</div>
 			</div>
@@ -97,9 +71,7 @@
 				v-show="getAllRepository.length > 0"
 				margin-top="1rem"
 				@click.native="addLocalRepository()"
-			>
-				Add Repository
-			</t-button>
+			>Add Repository</t-button>
 		</t-flexbox>
 	</t-flexbox>
 </template>
@@ -195,25 +167,23 @@ export default {
 .welcome
 	height: 100vh
 
-	&__introduction
-		&__item
-			&__icon
-				cursor: pointer
+	.icon
+		cursor: pointer
 
-				svg
-					width: 30px
-					height: 30px
-					stroke: #222831
+		svg
+			width: 30px
+			height: 30px
+			stroke: #222831
 
-				&:not(:last-child)
-					margin-right: 20px
+		&:not(:last-child)
+			margin-right: 20px
 
-	&__separate
+	.separate
 		width: 1px
 		height: 480px
 		background-color: #DEE0E3
 
-	&__repository
+	.repository
 		&__example
 			user-select: none
 
@@ -228,13 +198,13 @@ export default {
 				background-color: rgba(#fff, .8)
 
 		&__list
-			border: 1px solid #EFEFEF
+			box-shadow: 0 2px 4px rgba(0,0,0,0.16), 0 2px 4px rgba(0,0,0,0.23);
 			width: 450px
 			border-radius: 1rem
 
-			&__item
+			.item
 				&:not(:last-child)
-					margin-bottom: .5rem
+					margin-bottom: 1.2rem
 
 				h6
 					padding-right: 5px