diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index 552beef8..bd7001de 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -1,8 +1,7 @@
 <template>
 	<div id="app">
 		<menubar />
-		<router-view />
-
+		<router-view style="height: 100%" />
 		<t-modal v-if="activeModal">
 			<components :is="modal"></components>
 		</t-modal>
@@ -66,6 +65,10 @@ export default {
 </script>
 
 <style lang="sass">
+html, body, #app
+	width: 100%
+	height: 100%
+
 .t-overlay
 	position: fixed
 	top: 0
diff --git a/src/renderer/assets/css/_container.sass b/src/renderer/assets/css/_container.sass
deleted file mode 100644
index f8324855..00000000
--- a/src/renderer/assets/css/_container.sass
+++ /dev/null
@@ -1,18 +0,0 @@
-.container
-	width: 100%
-	padding-right: 15px
-	padding-left: 15px
-	margin-right: auto
-	margin-left: auto
-
-@media (min-width: 576px)
-	.container
-		max-width: 540px
-
-@media (min-width: 768px)
-	.container
-		max-width: 720px
-
-@media (min-width: 992px)
-	.container
-		max-width: 960px
diff --git a/src/renderer/assets/css/all.sass b/src/renderer/assets/css/all.sass
index f431dee6..0a6d6300 100644
--- a/src/renderer/assets/css/all.sass
+++ b/src/renderer/assets/css/all.sass
@@ -1,6 +1,5 @@
 @import 'base'
 @import 'font'
 @import 'utilities'
-@import 'container'
 @import 'type'
 @import 'spacing'
diff --git a/src/renderer/assets/css/utilities/_settings.sass b/src/renderer/assets/css/utilities/_settings.sass
index 8916a7e8..7fe1c32a 100644
--- a/src/renderer/assets/css/utilities/_settings.sass
+++ b/src/renderer/assets/css/utilities/_settings.sass
@@ -1,7 +1,5 @@
 .settings
-
 	&__input
-		
 		&:not(:last-child)
 			margin-bottom: .8rem
 
@@ -12,14 +10,9 @@
 			border: 1px solid #eee
 			border-radius: .3rem
 			padding: 1rem
-			
-			&__item
-				display: flex
-				flex-direction: row
-				align-items: center
 
+			&__item
 				p
-				
 					a
 						border-bottom: 1px solid #00adb5
 
diff --git a/src/renderer/components/BlankSlate.vue b/src/renderer/components/BlankSlate.vue
new file mode 100644
index 00000000..042e85b4
--- /dev/null
+++ b/src/renderer/components/BlankSlate.vue
@@ -0,0 +1,23 @@
+<template>
+	<t-flexbox justify-content="center" align-items="center" class="blankslate">
+		No content to show
+	</t-flexbox>
+</template>
+
+<script>
+import TFlexbox from "./TLayouts/TFlexbox";
+
+export default {
+	name: "BlankSlate",
+	components: {
+		TFlexbox
+	}
+};
+</script>
+
+<style lang="sass">
+.blankslate
+	width: 100%
+	font-size: 12px
+	color: #7A7D84
+</style>
diff --git a/src/renderer/components/TLayouts/TContainer.vue b/src/renderer/components/TLayouts/TContainer.vue
new file mode 100644
index 00000000..dcffc0e2
--- /dev/null
+++ b/src/renderer/components/TLayouts/TContainer.vue
@@ -0,0 +1,46 @@
+<template>
+	<div
+		class="container"
+		:class="{
+			container__fluid: fluid
+		}"
+	>
+		<slot />
+	</div>
+</template>
+
+<script>
+export default {
+	name: "TContainer",
+	props: {
+		fluid: {
+			type: Boolean,
+			default: false
+		}
+	}
+};
+</script>
+
+<style lang="sass">
+.container
+	width: 100%
+	padding-right: 15px
+	padding-left: 15px
+	margin-right: auto
+	margin-left: auto
+
+.container__fluid
+	min-width: 100%
+
+@media (min-width: 576px)
+	.container
+		max-width: 540px
+
+@media (min-width: 768px)
+	.container
+		max-width: 720px
+
+@media (min-width: 992px)
+	.container
+		max-width: 960px
+</style>
diff --git a/src/renderer/components/TLayouts/TFlexbox.vue b/src/renderer/components/TLayouts/TFlexbox.vue
new file mode 100644
index 00000000..f615b12a
--- /dev/null
+++ b/src/renderer/components/TLayouts/TFlexbox.vue
@@ -0,0 +1,47 @@
+<template>
+	<div
+		:style="{
+			display: 'flex',
+			flexDirection: flexDirection,
+			justifyContent: justifyContent,
+			flexWrap: flexWrap,
+			alignItems: alignItems,
+			alignSelf: alignSelf,
+			flexGrow: flexGrow
+		}"
+	>
+		<slot />
+	</div>
+</template>
+
+<script>
+export default {
+	name: "TFlexbox",
+	props: {
+		flexDirection: {
+			type: String,
+			default: null
+		},
+		flexWrap: {
+			type: String,
+			default: null
+		},
+		justifyContent: {
+			type: String,
+			default: null
+		},
+		alignItems: {
+			type: String,
+			default: null
+		},
+		alignSelf: {
+			type: String,
+			default: null
+		},
+		flexGrow: {
+			type: Number,
+			default: null
+		}
+	}
+};
+</script>
diff --git a/src/renderer/components/TLayouts/TScrollbar.vue b/src/renderer/components/TLayouts/TScrollbar.vue
new file mode 100644
index 00000000..66d9f68e
--- /dev/null
+++ b/src/renderer/components/TLayouts/TScrollbar.vue
@@ -0,0 +1,26 @@
+<template>
+	<vue-scrollbar :style="{ height: height, width: width }">
+		<slot />
+	</vue-scrollbar>
+</template>
+
+<script>
+import VueScrollbar from "vue2-scrollbar";
+
+export default {
+	name: "TScrollbarLayout",
+	components: {
+		VueScrollbar
+	},
+	props: {
+		height: {
+			type: String,
+			default: null
+		},
+		width: {
+			type: String,
+			default: null
+		}
+	}
+};
+</script>
diff --git a/src/renderer/components/commit/commitHistoryItem.vue b/src/renderer/components/commit/commitHistoryItem.vue
index 71d51ac6..f197671a 100644
--- a/src/renderer/components/commit/commitHistoryItem.vue
+++ b/src/renderer/components/commit/commitHistoryItem.vue
@@ -1,25 +1,30 @@
 <template>
-	<div>
+	<t-flexbox flex-direction="column">
 		<a
-			class="history__item d-flex flex-column"
+			class="history__item"
 			@mouseenter="showFiles(data.hash)"
 			@mouseleave="hideFiles()"
 		>
 			<div :title="data.message" class="history__item__title">
 				{{ data.message }}
 			</div>
-			<div class="history__item__author d-flex flex-row align-items-center">
+			<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") }}
-			</div>
+			</t-flexbox>
 		</a>
-		<div
+		<t-flexbox
 			v-if="
 				$store.state.settings.experimental.quickFilePreview && files.isActive
 			"
+			flex-direction="column"
 			class="history__files"
 		>
 			<dropdown-list class="history__files__dropdown">
@@ -27,18 +32,24 @@
 					{{ item }}
 				</dropdown-item>
 			</dropdown-list>
-		</div>
-	</div>
+		</t-flexbox>
+	</t-flexbox>
 </template>
 
 <script>
 import showMixin from "../../git/show";
 import trimFilePathMixin from "../../mixins/trimFilePath";
+import TFlexbox from "../TLayouts/TFlexbox";
 import DropdownList from "../dropdown/dropdownList";
 import DropdownItem from "../dropdown/dropdownItem";
 
 export default {
 	name: "CommitHistoryItem",
+	components: {
+		TFlexbox,
+		DropdownList,
+		DropdownItem
+	},
 	props: {
 		data: {
 			type: Object,
@@ -53,10 +64,6 @@ export default {
 			}
 		};
 	},
-	components: {
-		DropdownList,
-		DropdownItem
-	},
 	computed: {
 		currentRepository() {
 			return this.$store.getters["workspace/currentRepository"];
diff --git a/src/renderer/components/commit/commitInformation.vue b/src/renderer/components/commit/commitInformation.vue
index 3c381f2a..01c67f43 100644
--- a/src/renderer/components/commit/commitInformation.vue
+++ b/src/renderer/components/commit/commitInformation.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="commit__detail">
-		<div class="commit__detail__author">
+		<t-flexbox flex-direction="row" class="commit__detail__author">
 			<img
 				class="commit__detail__author__image"
 				src="../../../../static/image/user_avatar.png"
@@ -13,7 +13,7 @@
 					{{ commitInformation.author.email }}
 				</p>
 			</div>
-		</div>
+		</t-flexbox>
 		<div class="commit__detail__summary">
 			<div class="commit__detail__summary__title">
 				{{ commitInformation.title }}
@@ -123,9 +123,13 @@
 import showMixin from "../../git/show";
 import diffMixin from "../../git/diff";
 import trimFilePathMixin from "../../mixins/trimFilePath";
+import TFlexbox from "../TLayouts/TFlexbox";
 
 export default {
 	name: "CommitInformation",
+	components: {
+		TFlexbox
+	},
 	computed: {
 		commitInformation() {
 			return this.$store.getters["history/getCommitInformation"];
@@ -268,8 +272,6 @@ export default {
 	&__author
 		padding: 10px
 		border-bottom: 1px solid #DEE0E3
-		display: flex
-		flex-direction: row
 
 		&__image
 			width: 50px
@@ -306,7 +308,6 @@ export default {
 				color: #2E3034
 
 	&__files
-
 		&__summary
 			padding: 10px
 			color: #BEBEBE
diff --git a/src/renderer/components/diff/diffPreview.vue b/src/renderer/components/diff/diffPreview.vue
index 38d5f5eb..f82dd13d 100644
--- a/src/renderer/components/diff/diffPreview.vue
+++ b/src/renderer/components/diff/diffPreview.vue
@@ -1,20 +1,20 @@
 <template>
-	<VueScrollbar class="diff__preview">
+	<t-scrollbar height="90vh">
 		<div>
 			<div v-for="(line, index) in preview" :key="index">
 				{{ line }}
 			</div>
 		</div>
-	</VueScrollbar>
+	</t-scrollbar>
 </template>
 
 <script>
-import VueScrollbar from "vue2-scrollbar";
+import TScrollbar from "../TLayouts/TScrollbar";
 
 export default {
 	name: "DiffPreview",
 	components: {
-		VueScrollbar
+		TScrollbar
 	},
 	props: {
 		preview: {
@@ -24,8 +24,3 @@ export default {
 	}
 };
 </script>
-
-<style lang="sass">
-.diff__preview
-	max-height: 90vh
-</style>
diff --git a/src/renderer/components/dropdown/dropdownList.vue b/src/renderer/components/dropdown/dropdownList.vue
index 83335f07..72d71d2c 100644
--- a/src/renderer/components/dropdown/dropdownList.vue
+++ b/src/renderer/components/dropdown/dropdownList.vue
@@ -1,12 +1,21 @@
 <template>
-	<div :style="{ zIndex: zIndex }" class="dropdown__list">
+	<t-flexbox
+		flex-direction="column"
+		:style="{ zIndex: zIndex }"
+		class="dropdown__list"
+	>
 		<slot />
-	</div>
+	</t-flexbox>
 </template>
 
 <script>
+import TFlexbox from "../TLayouts/TFlexbox";
+
 export default {
 	name: "DropdownList",
+	components: {
+		TFlexbox
+	},
 	props: {
 		zIndex: {
 			type: Number,
@@ -22,9 +31,7 @@ export default {
 	background-color: white
 	border-radius: 3px
 	box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px
-	display: flex
 	font-size: .8rem
-	flex-direction: column
 	padding-top: 6px
 	padding-bottom: 6px
 </style>
diff --git a/src/renderer/components/menubar.vue b/src/renderer/components/menubar.vue
index 2491b7db..af657525 100644
--- a/src/renderer/components/menubar.vue
+++ b/src/renderer/components/menubar.vue
@@ -1,16 +1,16 @@
 <template>
-	<div class="menubar d-flex">
-		<div class="menubar__logo d-flex" @click="homepage()">
+	<t-flexbox class="menubar">
+		<t-flexbox class="menubar__logo" @click="homepage()">
 			<thermalLogo />
-		</div>
-		<div class="menubar__list d-flex align-items-center">
+		</t-flexbox>
+		<t-flexbox align-items="center" class="menubar__list">
 			<!-- File -->
 			<div @click="dropdown('file', true)">
 				<div class="menubar__list__item">
 					File
 				</div>
 				<dropdown-list
-					v-show="menu.file.isActive"
+					v-if="menu.file.isActive"
 					class="menubar__list__item__dropdown"
 					@mouseleave.native="dropdown('file', false)"
 				>
@@ -44,7 +44,7 @@
 					View
 				</div>
 				<dropdown-list
-					v-show="menu.view.isActive"
+					v-if="menu.view.isActive"
 					class="menubar__list__item__dropdown"
 					@mouseleave.native="dropdown('view', false)"
 				>
@@ -87,7 +87,7 @@
 					Repository
 				</div>
 				<dropdown-list
-					v-show="menu.repository.isActive"
+					v-if="menu.repository.isActive"
 					class="menubar__list__item__dropdown"
 					@mouseleave.native="dropdown('repository', false)"
 				>
@@ -125,7 +125,7 @@
 					Branch
 				</div>
 				<dropdown-list
-					v-show="menu.branch.isActive"
+					v-if="menu.branch.isActive"
 					class="menubar__list__item__dropdown"
 					@mouseleave.native="dropdown('branch', false)"
 				>
@@ -162,7 +162,7 @@
 					Help
 				</div>
 				<dropdown-list
-					v-show="menu.help.isActive"
+					v-if="menu.help.isActive"
 					class="menubar__list__item__dropdown"
 					@mouseleave.native="dropdown('help', false)"
 				>
@@ -187,23 +187,21 @@
 					</dropdown-item>
 				</dropdown-list>
 			</div>
-		</div>
+		</t-flexbox>
 		<div class="menubar__drag" />
-		<div class="menubar__title">
-			<div v-if="!!currentRepository" class="menubar__title__repository d-flex">
+		<t-flexbox class="menubar__title">
+			<t-flexbox v-if="!!currentRepository">
 				{{ currentRepository.name }}
 				<div style="padding: 0 5px">
 					-
 				</div>
-			</div>
-			<div class="menubar__title__app">
+			</t-flexbox>
+			<div>
 				Thermal
 			</div>
-		</div>
-		<div class="menubar__controles">
-			<windowsButton />
-		</div>
-	</div>
+		</t-flexbox>
+		<windowsButton />
+	</t-flexbox>
 </template>
 
 <script>
@@ -212,6 +210,7 @@ import dropdownList from "./dropdown/dropdownList";
 import dropdownItem from "./dropdown/dropdownItem";
 import dropdownDivider from "./dropdown/dropdownDivider";
 import windowsButton from "./windowsButton";
+import TFlexbox from "../components/TLayouts/TFlexbox";
 const { shell, remote } = require("electron");
 const childProcess = require("child_process");
 const win = remote.getCurrentWindow();
@@ -223,7 +222,8 @@ export default {
 		dropdownList,
 		dropdownItem,
 		dropdownDivider,
-		windowsButton
+		windowsButton,
+		TFlexbox
 	},
 	data() {
 		return {
@@ -340,9 +340,7 @@ export default {
 
 <style lang="sass">
 .menubar
-	width: 100%
 	background-color: white
-	position: relative
 	z-index: 10
 	border-bottom: 1px solid #DEE0E3
 
@@ -374,12 +372,8 @@ export default {
 
 	&__title
 		position: absolute
-		display: flex
 		left: 50%
-		top: 50%
-		transform: translate(-50%, -50%)
+		top: 10px
+		transform: translate(-50%)
 		font-size: 14px
-
-	&__controles
-		margin-left: auto
 </style>
diff --git a/src/renderer/components/navbar.vue b/src/renderer/components/navbar.vue
index bd6a0b21..39732903 100644
--- a/src/renderer/components/navbar.vue
+++ b/src/renderer/components/navbar.vue
@@ -1,58 +1,100 @@
 <template>
-	<div class="navbar">
-		<div
+	<t-flexbox class="navbar">
+		<t-flexbox
+			flex-direction="column"
+			align-items="center"
 			class="navbar__item"
 			:class="getCommitFeature"
-			@click="openCommitPage()"
+			@click.native="openCommitPage()"
 		>
 			<commitIcon />
 			<p>Commit</p>
-		</div>
-		<div v-if="!!getRemoteUrl" class="navbar__group" :class="getRemoteFeature">
-			<div class="navbar__item" @click="gitPull()">
+		</t-flexbox>
+		<t-flexbox
+			v-if="!!getRemoteUrl"
+			class="navbar__group"
+			:class="getRemoteFeature"
+		>
+			<t-flexbox
+				flex-direction="column"
+				align-items="center"
+				class="navbar__item"
+				@click.native="gitPull()"
+			>
 				<pullIcon />
 				<p>Pull</p>
-			</div>
-			<div class="navbar__item" @click="gitPush()">
+			</t-flexbox>
+			<t-flexbox
+				flex-direction="column"
+				align-items="center"
+				class="navbar__item"
+				@click.native="gitPush()"
+			>
 				<pushIcon />
 				<p>Push</p>
-			</div>
-			<div class="navbar__item">
+			</t-flexbox>
+			<t-flexbox
+				flex-direction="column"
+				align-items="center"
+				class="navbar__item"
+			>
 				<fetchIcon />
 				<p>Fetch</p>
-			</div>
-		</div>
-		<div
+			</t-flexbox>
+		</t-flexbox>
+		<t-flexbox
 			v-else
+			flex-direction="column"
+			align-items="center"
 			:class="[
 				getRemoteFeature,
 				!!getRemoteUrl === false ? 'navbar__group' : ''
 			]"
 			class="navbar__item"
-			@click="newRemote()"
+			@click.native="newRemote()"
 		>
 			<publishIcon />
 			<p>Publish</p>
-		</div>
-		<div class="navbar__group ml-auto">
-			<div class="navbar__item" @click="openTerminal()">
+		</t-flexbox>
+		<t-flexbox class="navbar__group ml-auto">
+			<t-flexbox
+				flex-direction="column"
+				align-items="center"
+				class="navbar__item"
+				@click.native="openTerminal()"
+			>
 				<terminalIcon />
 				<p>Terminal</p>
-			</div>
-			<div class="navbar__item" @click="openFileExplorer()">
+			</t-flexbox>
+			<t-flexbox
+				flex-direction="column"
+				align-items="center"
+				class="navbar__item"
+				@click.native="openFileExplorer()"
+			>
 				<folderIcon />
 				<p>Explorer</p>
-			</div>
-			<div class="navbar__item" @click="openRepositorySettings()">
+			</t-flexbox>
+			<t-flexbox
+				flex-direction="column"
+				align-items="center"
+				class="navbar__item"
+				@click.native="openRepositorySettings()"
+			>
 				<settingsIcon />
 				<p>Settings</p>
-			</div>
-		</div>
-		<div class="navbar__item" @click="switchRepository()">
+			</t-flexbox>
+		</t-flexbox>
+		<t-flexbox
+			flex-direction="column"
+			align-items="center"
+			class="navbar__item"
+			@click.native="switchRepository()"
+		>
 			<switchRepositoryIcon />
 			<p>Switch repo</p>
-		</div>
-	</div>
+		</t-flexbox>
+	</t-flexbox>
 </template>
 
 <script>
@@ -66,6 +108,7 @@ import terminalIcon from "./icon/terminal";
 import folderIcon from "./icon/folder";
 import settingsIcon from "./icon/settings";
 import switchRepositoryIcon from "./icon/switch";
+import TFlexbox from "../components/TLayouts/TFlexbox";
 const { shell } = require("electron");
 const childProcess = require("child_process");
 
@@ -80,7 +123,8 @@ export default {
 		terminalIcon,
 		folderIcon,
 		settingsIcon,
-		switchRepositoryIcon
+		switchRepositoryIcon,
+		TFlexbox
 	},
 	computed: {
 		currentRepository() {
@@ -181,8 +225,6 @@ export default {
 	position: relative
 
 	&__item
-		flex-direction: column
-		align-items: center
 		user-select: none
 
 		&:hover
@@ -205,7 +247,4 @@ export default {
 		.navbar__item
 			&:not(:last-child)
 				margin-right: 15px
-
-.navbar, .navbar__item, .navbar__group
-	display: flex
 </style>
diff --git a/src/renderer/components/sidebar.vue b/src/renderer/components/sidebar.vue
index ba9cd6f9..6ab34b8f 100644
--- a/src/renderer/components/sidebar.vue
+++ b/src/renderer/components/sidebar.vue
@@ -1,32 +1,39 @@
 <template>
-	<div class="repository__sidebar d-flex">
-		<div class="repository__sidebar__group d-flex flex-column">
+	<t-flexbox class="repository__sidebar">
+		<t-flexbox flex-direction="column" class="repository__sidebar__group">
 			<router-link
-				class="repository__sidebar__item d-flex align-items-center"
+				class="repository__sidebar__item"
 				:to="{ name: 'repositoryWorkspace' }"
 			>
-				<folderIcon />
-				<p>Workspace</p>
+				<t-flexbox align-items="center">
+					<folderIcon />
+					<p>Workspace</p>
+				</t-flexbox>
 			</router-link>
 			<router-link
-				class="repository__sidebar__item d-flex align-items-center"
+				class="repository__sidebar__item"
 				:to="{ name: 'repositoryHistory' }"
 			>
-				<clockIcon />
-				<p>History</p>
+				<t-flexbox align-items="center">
+					<clockIcon />
+					<p>History</p>
+				</t-flexbox>
 			</router-link>
 			<router-link
-				class="repository__sidebar__item d-flex align-items-center"
+				class="repository__sidebar__item"
 				:to="{ name: 'repositoryStats' }"
 			>
-				<barIcon />
-				<p>Stats</p>
+				<t-flexbox align-items="center">
+					<barIcon />
+					<p>Stats</p>
+				</t-flexbox>
 			</router-link>
-		</div>
-	</div>
+		</t-flexbox>
+	</t-flexbox>
 </template>
 
 <script>
+import TFlexbox from "./TLayouts/TFlexbox";
 import folderIcon from "./icon/folder";
 import clockIcon from "./icon/clock";
 import barIcon from "./icon/bar";
@@ -34,6 +41,7 @@ import barIcon from "./icon/bar";
 export default {
 	name: "Sidebar",
 	components: {
+		TFlexbox,
 		folderIcon,
 		clockIcon,
 		barIcon
diff --git a/src/renderer/components/windowsButton.vue b/src/renderer/components/windowsButton.vue
index 9ddb598a..44c76311 100644
--- a/src/renderer/components/windowsButton.vue
+++ b/src/renderer/components/windowsButton.vue
@@ -1,9 +1,6 @@
 <template>
-	<div class="windowsControles d-flex align-items-center">
-		<div
-			class="windowsControles__icon windowsControles__minimize"
-			@click="minimize()"
-		>
+	<t-flexbox align-items="center">
+		<t-flexbox class="windowsControles__icon" @click.native="minimize()">
 			<svg
 				xmlns="http://www.w3.org/2000/svg"
 				width="24"
@@ -16,11 +13,8 @@
 			>
 				<line x1="5" y1="12" x2="19" y2="12" />
 			</svg>
-		</div>
-		<div
-			class="windowsControles__icon windowsControles__maximize"
-			@click="maximize()"
-		>
+		</t-flexbox>
+		<t-flexbox class="windowsControles__icon" @click.native="maximize()">
 			<svg
 				xmlns="http://www.w3.org/2000/svg"
 				width="24"
@@ -35,10 +29,10 @@
 					d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"
 				/>
 			</svg>
-		</div>
-		<div
+		</t-flexbox>
+		<t-flexbox
 			class="windowsControles__icon windowsControles__close"
-			@click="close()"
+			@click.native="close()"
 		>
 			<svg
 				xmlns="http://www.w3.org/2000/svg"
@@ -53,16 +47,20 @@
 				<line x1="18" y1="6" x2="6" y2="18" />
 				<line x1="6" y1="6" x2="18" y2="18" />
 			</svg>
-		</div>
-	</div>
+		</t-flexbox>
+	</t-flexbox>
 </template>
 
 <script>
+import TFlexbox from "./TLayouts/TFlexbox";
 const { remote } = require("electron");
 const win = remote.getCurrentWindow();
 
 export default {
 	name: "WindowsButton",
+	components: {
+		TFlexbox
+	},
 	methods: {
 		close() {
 			win.close();
@@ -83,10 +81,8 @@ export default {
 
 <style lang="sass">
 .windowsControles
-
 	&__icon
 		padding: 8px 10px
-		display: flex
 		cursor: pointer
 
 		svg
@@ -98,7 +94,6 @@ export default {
 			background-color: rgba(139, 151, 152, .1)
 
 	&__close
-
 		&:hover
 			background-color: rgb(240, 71, 71)
 			svg
diff --git a/src/renderer/pages/repository/history.vue b/src/renderer/pages/repository/history.vue
index 80d92bd0..503ab139 100644
--- a/src/renderer/pages/repository/history.vue
+++ b/src/renderer/pages/repository/history.vue
@@ -1,9 +1,9 @@
 <template>
-	<div class="history">
-		<div class="history__logs">
-			<div v-if="!commitDetail">
-				<logSkeleton v-if="repositoryLogs.length < 1" />
-				<VueScrollbar v-else class="history__logs__scrollbar">
+	<t-flexbox flex-direction="row" :flex-grow="1">
+		<div ref="historyLogs" class="history__logs">
+			<logSkeleton v-if="repositoryLogs.length < 1" />
+			<div v-show="!commitDetail">
+				<t-scrollbar style="height: calc(100vh - (65px + 34px))">
 					<div>
 						<commitHistoryItem
 							v-for="log in repositoryLogs"
@@ -12,10 +12,10 @@
 							@click.native="gitShow(log.hash)"
 						/>
 					</div>
-				</VueScrollbar>
+				</t-scrollbar>
 			</div>
-			<div v-else class="history__logs__detail">
-				<div class="history__logs__detail__buttons">
+			<div v-if="commitDetail">
+				<t-flexbox flex-direction="row" class="history__logs__detail__buttons">
 					<div
 						class="history__logs__detail__buttons__back"
 						@click="toggleCommitDetail()"
@@ -28,22 +28,18 @@
 					>
 						<fileIcon />
 					</div>
-				</div>
-				<VueScrollbar class="history__logs__detail__scrollbar">
+				</t-flexbox>
+				<vue-scrollbar style="height: calc(100vh - (64px + 34px + 39px))">
 					<commitInformation />
-				</VueScrollbar>
+				</vue-scrollbar>
 			</div>
 		</div>
-		<div class="history__preview">
-			<diffPreview
-				v-if="this.$store.state.history.filePreview.isActive"
-				:preview="commitFileDiffPreview"
-			/>
-			<div v-else>
-				No content to show
-			</div>
-		</div>
-	</div>
+		<diffPreview
+			v-if="this.$store.state.history.filePreview.isActive"
+			:preview="commitFileDiffPreview"
+		/>
+		<blank-slate v-else />
+	</t-flexbox>
 </template>
 
 <script>
@@ -51,9 +47,12 @@ import commitHistoryItem from "../../components/commit/commitHistoryItem";
 import commitInformation from "../../components/commit/commitInformation";
 import diffPreview from "../../components/diff/diffPreview";
 import fileIcon from "../../components/icon/file";
+import TScrollbar from "../../components/TLayouts/TScrollbar";
 import VueScrollbar from "vue2-scrollbar";
 import gitLog from "../../git/log";
 import logSkeleton from "../../components/skeleton/logs";
+import BlankSlate from "../../components/BlankSlate";
+import TFlexbox from "../../components/TLayouts/TFlexbox";
 
 export default {
 	name: "History",
@@ -61,9 +60,12 @@ export default {
 		commitHistoryItem,
 		commitInformation,
 		diffPreview,
+		TScrollbar,
 		VueScrollbar,
 		fileIcon,
-		logSkeleton
+		logSkeleton,
+		BlankSlate,
+		TFlexbox
 	},
 	data() {
 		return {
@@ -115,19 +117,13 @@ export default {
 
 <style lang="sass">
 .history
-	display: flex
-	flex-direction: row
-
 	&__logs
 		border-right: 1px solid #DEE0E3
-		width: 300px
+		min-width: 300px
 
 		&__detail
-
 			&__buttons
-				display: flex
 				padding: 10px
-				flex-direction: row
 				border-bottom: 1px solid #DEE0E3
 
 				&__back
@@ -145,13 +141,4 @@ export default {
 						stroke: #6C6F75
 						width: 18px
 						height: 18px
-
-			&__scrollbar
-				max-height: 80.6vh
-
-		&__scrollbar
-			max-height: 90vh
-
-	&__preview
-		padding: 10px
 </style>
diff --git a/src/renderer/pages/repository/index.vue b/src/renderer/pages/repository/index.vue
index 8ab56a04..503e8a64 100644
--- a/src/renderer/pages/repository/index.vue
+++ b/src/renderer/pages/repository/index.vue
@@ -1,20 +1,28 @@
 <template>
-	<div>
+	<t-flexbox flex-direction="column" :flex-grow="1">
 		<navbar />
-		<div class="col__view">
+		<t-flexbox
+			flex-direction="row"
+			:flex-grow="1"
+			:flex-shrink="1"
+			:flex-basis="0"
+			style="height: 100%"
+		>
 			<sidebar />
 			<router-view />
-		</div>
-	</div>
+		</t-flexbox>
+	</t-flexbox>
 </template>
 
 <script>
+import TFlexbox from "../../components/TLayouts/TFlexbox";
 import navbar from "../../components/navbar";
 import sidebar from "../../components/sidebar";
 
 export default {
 	name: "RepositoryIndex",
 	components: {
+		TFlexbox,
 		navbar,
 		sidebar
 	},
@@ -25,10 +33,3 @@ export default {
 	}
 };
 </script>
-
-<style lang="sass">
-.col__view
-	display: flex
-	height: 86vh
-	flex-direction: row
-</style>
diff --git a/src/renderer/pages/repository/settings.vue b/src/renderer/pages/repository/settings.vue
index 858f27ba..05ac6988 100644
--- a/src/renderer/pages/repository/settings.vue
+++ b/src/renderer/pages/repository/settings.vue
@@ -1,7 +1,7 @@
 <template>
-	<div class="repository__settings w-100">
-		<VueScrollbar class="repository__settings__scrollbar">
-			<div class="repository__settings__content container">
+	<t-flexbox :flex-grow="1">
+		<t-scrollbar height="86vh" width="100%">
+			<t-container style="padding: 20px">
 				<div class="repository__settings__content__header">
 					<h4>Settings</h4>
 					<p>Your local repository settings</p>
@@ -36,7 +36,11 @@
 					<div class="settings__section">
 						<h4>Features</h4>
 						<div class="settings__section__group">
-							<div class="settings__section__group__item">
+							<t-flexbox
+								flex-direction="row"
+								align-items="center"
+								class="settings__section__group__item"
+							>
 								<div>
 									<h6>Commit</h6>
 									<p>Enable/disable commits for this repository</p>
@@ -46,8 +50,12 @@
 									color="#00adb5"
 									class="ml-auto"
 								/>
-							</div>
-							<div class="settings__section__group__item">
+							</t-flexbox>
+							<t-flexbox
+								flex-direction="row"
+								align-items="center"
+								class="settings__section__group__item"
+							>
 								<div>
 									<h6>Remote</h6>
 									<p>Pull, push and fetch</p>
@@ -57,13 +65,17 @@
 									color="#00adb5"
 									class="ml-auto"
 								/>
-							</div>
+							</t-flexbox>
 						</div>
 					</div>
 					<div class="settings__section">
 						<h4>Danger Zone</h4>
 						<div class="settings__section__group">
-							<div class="settings__section__group__item">
+							<t-flexbox
+								flex-direction="row"
+								align-items="center"
+								class="settings__section__group__item"
+							>
 								<div>
 									<h6>Remove this repository</h6>
 									<p>You can add it again</p>
@@ -75,20 +87,22 @@
 									text="Remove"
 									@click.native="removeCurrentRepository()"
 								/>
-							</div>
+							</t-flexbox>
 						</div>
 					</div>
 				</div>
-			</div>
-		</VueScrollbar>
-	</div>
+			</t-container>
+		</t-scrollbar>
+	</t-flexbox>
 </template>
 
 <script>
 import inputTextLabel from "../../components/input/inputTextLabel";
 import Button from "../../components/buttons/Button";
 import { ToggleButton } from "vue-js-toggle-button";
-import VueScrollbar from "vue2-scrollbar";
+import TScrollbar from "../../components/TLayouts/TScrollbar";
+import TFlexbox from "../../components/TLayouts/TFlexbox";
+import TContainer from "../../components/TLayouts/TContainer";
 
 export default {
 	name: "RepositorySettings",
@@ -96,7 +110,9 @@ export default {
 		inputTextLabel,
 		Button,
 		ToggleButton,
-		VueScrollbar
+		TScrollbar,
+		TFlexbox,
+		TContainer
 	},
 	computed: {
 		currentRepository() {
@@ -155,13 +171,7 @@ export default {
 .repository
 
 	&__settings
-
-		&__scrollbar
-			max-height: 86vh
-
 		&__content
-			padding: 20px
-
 			&__header
 				margin-bottom: 1rem
 
diff --git a/src/renderer/pages/repository/stats.vue b/src/renderer/pages/repository/stats.vue
index fc55da07..0108d545 100644
--- a/src/renderer/pages/repository/stats.vue
+++ b/src/renderer/pages/repository/stats.vue
@@ -1,28 +1,30 @@
 <template>
-	<div class="stats w-100">
-		<VueScrollbar class="stats__scrollbar">
-			<div class="container">
-				<div class="stats__content">
-					<div class="stats__content-group">
-						<p>Commits per day</p>
-						<ApexCharts type="area" :options="options" :series="series" />
-					</div>
+	<t-flexbox :flex-grow="1">
+		<t-scrollbar height="86vh" width="100%">
+			<t-container class="stats__content">
+				<div class="stats__content-group">
+					<p>Commits per day</p>
+					<ApexCharts type="area" :options="options" :series="series" />
 				</div>
-			</div>
-		</VueScrollbar>
-	</div>
+			</t-container>
+		</t-scrollbar>
+	</t-flexbox>
 </template>
 
 <script>
 import gitLog from "../../git/log";
 import ApexCharts from "vue-apexcharts";
-import VueScrollbar from "vue2-scrollbar";
+import TScrollbar from "../../components/TLayouts/TScrollbar";
+import TFlexbox from "../../components/TLayouts/TFlexbox";
+import TContainer from "../../components/TLayouts/TContainer";
 
 export default {
 	name: "RepositoryStats",
 	components: {
 		ApexCharts,
-		VueScrollbar
+		TScrollbar,
+		TFlexbox,
+		TContainer
 	},
 	data() {
 		return {
@@ -106,9 +108,6 @@ export default {
 
 <style lang="sass">
 .stats
-	&__scrollbar
-		max-height: 86vh
-
 	&__content
 		margin-top: 2rem
 		margin-bottom: 4rem
diff --git a/src/renderer/pages/repository/workspace.vue b/src/renderer/pages/repository/workspace.vue
index fdcf53c9..a03d2b30 100644
--- a/src/renderer/pages/repository/workspace.vue
+++ b/src/renderer/pages/repository/workspace.vue
@@ -1,20 +1,28 @@
 <template>
-	<div class="workspace">
-		<div class="workspace__files">
-			<div class="workspace__repository">
-				<div class="workspace__branch d-flex align-items-center">
+	<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"
+				>
 					<branchIcon />
 					<p>{{ this.$store.state.commit.activeBranch }}</p>
-				</div>
-				<VueScrollbar class="workspace__changes__scrollbar">
+				</t-flexbox>
+				<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 class="workspace__changes">
-						<div
+					<div v-else>
+						<t-flexbox
 							v-for="file in this.$store.getters['commit/allFiles']"
 							:key="file.path"
-							class="workspace__changes__item d-flex align-items-center"
+							class="workspace__changes__item"
+							align-items="center"
 							@click="previewFileChange(file)"
 						>
 							<input
@@ -24,17 +32,15 @@
 								type="checkbox"
 								:value="file.path"
 							/>
-							<label
-								class="workspace__changes__item__path"
-								:title="file.path"
-								:for="file.path"
-							>
-								<p class="workspace__changes__item__path__name">
-									{{ filePath(file.path) }}
-								</p>
-								<p class="workspace__changes__item__path__file">
-									{{ fileName(file.path) }}
-								</p>
+							<label :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>
+								</t-flexbox>
 							</label>
 							<div
 								:style="'background-color: #' + fileTypeColor(file)"
@@ -42,46 +48,47 @@
 							>
 								{{ fileType(file) }}
 							</div>
-						</div>
+						</t-flexbox>
 					</div>
-				</VueScrollbar>
-			</div>
+				</t-scrollbar>
+			</t-flexbox>
 			<commitMessage
+				ref="commitMessage"
 				padding-top="10px"
 				padding-bottom="10px"
 				padding-left="10px"
 				padding-right="10px"
 			/>
 		</div>
-		<div class="workspace__preview">
-			<diffPreview
-				v-if="this.$store.state.workspace.filePreview.isActive"
-				:preview="fileDiffPreview"
-			/>
-			<div v-else>
-				No file selected.
-			</div>
-		</div>
-	</div>
+		<diffPreview
+			v-if="this.$store.state.workspace.filePreview.isActive"
+			:preview="fileDiffPreview"
+		/>
+		<blank-slate v-else />
+	</t-flexbox>
 </template>
 
 <script>
 import statusMixin from "../../git/status";
 import diffMixin from "../../git/diff";
-import VueScrollbar from "vue2-scrollbar";
+import TScrollbar from "../../components/TLayouts/TScrollbar";
 import commitMessage from "../../components/commit/commitMessage";
 import branchIcon from "../../components/icon/branch";
 import diffPreview from "../../components/diff/diffPreview";
 import fileChangesSkeleton from "../../components/skeleton/fileChanges";
+import BlankSlate from "../../components/BlankSlate";
+import TFlexbox from "../../components/TLayouts/TFlexbox";
 
 export default {
 	name: "Workspace",
 	components: {
 		branchIcon,
-		VueScrollbar,
+		TScrollbar,
 		commitMessage,
 		diffPreview,
-		fileChangesSkeleton
+		fileChangesSkeleton,
+		BlankSlate,
+		TFlexbox
 	},
 	data() {
 		return {
@@ -115,6 +122,14 @@ export default {
 		},
 		fileDiffPreview() {
 			return this.$store.state.workspace.filePreview.preview;
+		},
+		fileChangesSize() {
+			return (
+				this.$refs.workspaceFiles.clientHeight -
+				this.$refs.branchName.clientHeight -
+				this.$refs.commitMessage.clientHeight +
+				"px"
+			);
 		}
 	},
 	mounted() {
@@ -208,9 +223,6 @@ export default {
 
 <style lang="sass">
 .workspace
-	display: flex
-	flex-direction: row
-
 	&__files
 		border-right: 1px solid #DEE0E3
 		width: 300px
@@ -219,8 +231,6 @@ export default {
 		background-color: #EFEFEF
 		padding: 10px 20px
 		border-bottom: 1px solid #DEE0E3
-		position: sticky
-		top: 0
 
 		svg
 			width: 20px
@@ -233,10 +243,6 @@ export default {
 			font-weight: 600
 
 	&__changes
-
-		&__scrollbar
-			height: calc(86vh - (41px + 102px))
-
 		&__item
 			border-bottom: 1px solid #DEE0E3
 			font-size: 12px
@@ -248,8 +254,6 @@ export default {
 				margin-right: 5px
 
 			&__path
-				display: flex
-
 				&__name
 					color: #BEBEBE
 
@@ -260,7 +264,4 @@ export default {
 
 			&:hover
 				background-color: rgba(#EFEFEF, .4)
-
-	&__preview
-		padding: 1rem
 </style>
diff --git a/src/renderer/pages/settings/experimental.vue b/src/renderer/pages/settings/experimental.vue
index a7008dba..5000c75c 100644
--- a/src/renderer/pages/settings/experimental.vue
+++ b/src/renderer/pages/settings/experimental.vue
@@ -7,7 +7,11 @@
 			<a @click="discordURL()">Thermal Discord server</a>.
 		</div>
 		<div class="settings__section__group">
-			<div class="settings__section__group__item">
+			<t-flexbox
+				flex-direction="row"
+				align-items="center"
+				class="settings__section__group__item"
+			>
 				<div>
 					<h6>File changes</h6>
 					<p>
@@ -20,8 +24,12 @@
 					color="#00adb5"
 					class="ml-auto"
 				/>
-			</div>
-			<div class="settings__section__group__item">
+			</t-flexbox>
+			<t-flexbox
+				flex-direction="row"
+				align-items="center"
+				class="settings__section__group__item"
+			>
 				<div>
 					<h6>Quick file preview</h6>
 					<p>
@@ -33,18 +41,20 @@
 					color="#00adb5"
 					class="ml-auto"
 				/>
-			</div>
+			</t-flexbox>
 		</div>
 	</div>
 </template>
 
 <script>
 import { ToggleButton } from "vue-js-toggle-button";
+import TFlexbox from "../../components/TLayouts/TFlexbox";
 const { shell } = require("electron");
 
 export default {
 	name: "ExperimentalFeatures",
 	components: {
+		TFlexbox,
 		ToggleButton
 	},
 	computed: {
diff --git a/src/renderer/pages/settings/index.vue b/src/renderer/pages/settings/index.vue
index 60b57a88..3c5c5094 100644
--- a/src/renderer/pages/settings/index.vue
+++ b/src/renderer/pages/settings/index.vue
@@ -2,26 +2,28 @@
 	<div class="settings d-flex">
 		<settingsSidebar />
 		<div class="w-100">
-			<VueScrollbar class="settings__scrollbar">
-				<div class="container">
+			<t-scrollbar height="95vh">
+				<t-container>
 					<div class="settings__content">
 						<router-view />
 					</div>
-				</div>
-			</VueScrollbar>
+				</t-container>
+			</t-scrollbar>
 		</div>
 	</div>
 </template>
 
 <script>
 import settingsSidebar from "../../components/sidebar/settings";
-import VueScrollbar from "vue2-scrollbar";
+import TScrollbar from "../../components/TLayouts/TScrollbar";
+import TContainer from "../../components/TLayouts/TContainer";
 
 export default {
 	name: "Settings",
 	components: {
 		settingsSidebar,
-		VueScrollbar
+		TScrollbar,
+		TContainer
 	}
 };
 </script>
@@ -29,10 +31,6 @@ export default {
 <style lang="sass">
 .settings
 	height: 95vh
-
-	&__scrollbar
-		max-height: 95vh
-
 	&__content
 		margin-top: 2rem
 		padding: 20px
diff --git a/src/renderer/pages/welcome.vue b/src/renderer/pages/welcome.vue
index 2f651544..34f384b8 100644
--- a/src/renderer/pages/welcome.vue
+++ b/src/renderer/pages/welcome.vue
@@ -1,13 +1,19 @@
 <template>
-	<div class="welcome d-flex align-items-center">
-		<div
-			class="welcome__introduction d-flex flex-column align-items-center ml-auto mr-auto"
+	<t-flexbox
+		align-items="center"
+		justify-content="space-evenly"
+		class="welcome"
+	>
+		<t-flexbox
+			flex-direction="column"
+			align-items="center"
+			style="text-align: center"
 		>
 			<h1>Welcome to Thermal</h1>
-			<p class="welcome__introduction__description">
+			<p style="margin-bottom: 1rem">
 				One stop. Git repository.
 			</p>
-			<div class="welcome__introduction__item d-flex">
+			<t-flexbox style="margin-bottom: 1rem">
 				<div class="welcome__introduction__item__icon" @click="websiteURL()">
 					<linkIcon />
 				</div>
@@ -20,24 +26,23 @@
 				<div class="welcome__introduction__item__icon" @click="discordURL()">
 					<helpIcon />
 				</div>
-			</div>
-		</div>
+			</t-flexbox>
+		</t-flexbox>
 		<div class="welcome__seperate" />
-		<div
-			class="welcome__repository d-flex flex-column align-items-center ml-auto mr-auto"
-		>
+		<t-flexbox flex-direction="column" align-items="center">
 			<div
 				class="welcome__repository__list"
 				@drop.prevent="dropHandler($event)"
 				@dragover.prevent="dropHandler()"
 			>
-				<VueScrollbar class="welcome__repository__scrollbar">
-					<div class="welcome__repository__list__container">
+				<t-scrollbar v-if="getAllRepository.length > 0" height="400px">
+					<div style="padding: 1rem">
 						<div v-if="getAllRepository.length > 0">
-							<div
+							<t-flexbox
 								v-for="(repo, index) in getAllRepository"
 								:key="repo.path"
-								class="welcome__repository__list__item d-flex align-items-center"
+								align-items="center"
+								class="welcome__repository__list__item"
 							>
 								<h6>{{ repo.name | truncateFilter(30) }}</h6>
 								<Button
@@ -52,40 +57,42 @@
 								>
 									<settingsIcon />
 								</div>
-							</div>
+							</t-flexbox>
 						</div>
-						<div
-							v-else
-							@mouseenter="toggleRepositoryExampleModel"
-							@mouseleave="toggleRepositoryExampleModel"
+					</div>
+				</t-scrollbar>
+				<div
+					v-else
+					style="position: relative; padding: 1rem;"
+					@mouseenter="toggleRepositoryExampleModel"
+					@mouseleave="toggleRepositoryExampleModel"
+				>
+					<div>
+						<t-flexbox
+							v-for="repo in repositoryList"
+							:key="repo"
+							align-items="center"
+							class="welcome__repository__list__item welcome__repository__example"
 						>
-							<div>
-								<div
-									v-for="repo in repositoryList"
-									:key="repo"
-									class="welcome__repository__list__item welcome__repository__example d-flex align-items-center"
-								>
-									<h6>{{ repo }}</h6>
-									<Button text="Open" appearance="primary" margin-left="auto" />
-									<div class="welcome__repository__list__item__settings">
-										<settingsIcon />
-									</div>
-								</div>
-							</div>
-							<div
-								v-show="exampleRepositoryModel"
-								class="welcome__repository__example__model"
-							>
-								<Button
-									margin-top="1rem"
-									appearance="primary"
-									text="Add Repository"
-									@click.native="addLocalRepository()"
-								/>
+							<h6>{{ repo }}</h6>
+							<Button text="Open" appearance="primary" margin-left="auto" />
+							<div class="welcome__repository__list__item__settings">
+								<settingsIcon />
 							</div>
-						</div>
+						</t-flexbox>
 					</div>
-				</VueScrollbar>
+					<div
+						v-show="exampleRepositoryModel"
+						class="welcome__repository__example__model"
+					>
+						<Button
+							margin-top="1rem"
+							appearance="primary"
+							text="Add Repository"
+							@click.native="addLocalRepository()"
+						/>
+					</div>
+				</div>
 			</div>
 			<Button
 				v-show="getAllRepository.length > 0"
@@ -94,11 +101,11 @@
 				text="Add Repository"
 				@click.native="addLocalRepository()"
 			/>
-		</div>
+		</t-flexbox>
 		<div class="appMetaData">
 			{{ appVersion }}
 		</div>
-	</div>
+	</t-flexbox>
 </template>
 
 <script>
@@ -108,9 +115,10 @@ import dollarIcon from "../components/icon/dollar";
 import helpIcon from "../components/icon/help";
 import settingsIcon from "../components/icon/settings";
 import Button from "../components/buttons/Button";
+import TScrollbar from "../components/TLayouts/TScrollbar";
 import packageJson from "../../../package.json";
 import * as Sentry from "@sentry/electron";
-import VueScrollbar from "vue2-scrollbar";
+import TFlexbox from "../components/TLayouts/TFlexbox";
 import truncateFilter from "../filters/truncate";
 import addRepository from "../mixins/addRepository";
 const { shell } = require("electron");
@@ -126,9 +134,10 @@ export default {
 		twitterIcon,
 		dollarIcon,
 		helpIcon,
+		TFlexbox,
 		settingsIcon,
 		Button,
-		VueScrollbar
+		TScrollbar
 	},
 	filters: {
 		truncateFilter
@@ -197,16 +206,10 @@ export default {
 
 <style lang="sass">
 .welcome
-	width: 100%
 	height: 100vh
 
 	&__introduction
-		&__description
-			margin-bottom: 1rem
-
 		&__item
-			margin-bottom: 1rem
-
 			&__icon
 				cursor: pointer
 
@@ -224,9 +227,6 @@ export default {
 		background-color: #DEE0E3
 
 	&__repository
-		&__scrollbar
-			max-height: 400px
-
 		&__example
 			user-select: none
 
@@ -234,14 +234,10 @@ export default {
 				position: absolute
 				bottom: 0
 				align-items: center
-				flex-direction: column
 				justify-content: center
 				display: flex
-				opacity: 1
-				transition: opacity .2s ease-in-out
 				width: 93%
 				height: 100%
-				padding: 0 16px
 				background-color: rgba(#fff, .8)
 
 		&__list
@@ -249,9 +245,6 @@ export default {
 			width: 450px
 			border-radius: 1rem
 
-			&__container
-				padding: 1rem
-
 			&__item
 				&:not(:last-child)
 					margin-bottom: .5rem