diff --git a/client/src/styles/partials/bdsettings/button.scss b/client/src/styles/partials/bdsettings/button.scss
index b093e9a7..14b72dde 100644
--- a/client/src/styles/partials/bdsettings/button.scss
+++ b/client/src/styles/partials/bdsettings/button.scss
@@ -1,87 +1,122 @@
 .bd-settingsButton {
-    position: absolute;
-    z-index: 1;
-    top: 22px;
-    width: 70px;
+	position: absolute;
+	z-index: 1;
+	top: 22px;
+	width: 70px;
+	height: 48px;
+	left: 0;
+	box-shadow: 0 1px 0 rgba(0, 0, 0, .2), 0 2px 0 rgba(0, 0, 0, .06);
+	opacity: 1;
+
+	.platform-darwin & { // sass-lint:disable-line class-name-format
+		top: 27px;
+	}
+
+	.platform-linux & { // sass-lint:disable-line class-name-format
+		top: 0;
+	}
+
+	.bd-settingsButtonBtn {
+		backface-visibility: hidden;
+		-webkit-backface-visibility: hidden;
+		width: 70px;
     height: 48px;
-    left: 0;
-    box-shadow: 0 1px 0 rgba(0, 0, 0, .2), 0 2px 0 rgba(0, 0, 0, .06);
-    opacity: 1;
+		cursor: pointer;
+		filter: grayscale(100%);
+		opacity: .5;
+		position: relative;
+		transition: all .3s cubic-bezier(.4,0,0,1);
 
-    .platform-darwin & { // sass-lint:disable-line class-name-format
-        top: 27px;
-    }
+		&::before,
+		&::after {
+			content:"";
+			display: block;
+			position: absolute;
+			top:0;
+			left:0;
+			background-repeat: no-repeat;
+			background-position: center;
+		}
 
-    .platform-linux & { // sass-lint:disable-line class-name-format
-        top: 0;
-    }
+		&::before {
+			width: 70px;
+    	height: 48px;
+			background-image: $logoSmallBw;
+			background-size: 50% 50%;
+			opacity: 1;
+			transition:all .3s cubic-bezier(.4,0,0,1), opacity .01s;
+		}
+		&::after {
+			width: 130px;
+			height: 43px;
+			background-image: $logoBigBw;
+			background-size: 100% 100%;
+			transform:translate(-7px,2px)scale(0.5);
+			opacity: 0;
+			transition:all .3s cubic-bezier(.4,0,0,1);
+		}
 
-    .bd-settingsButtonBtn {
-        background-image: $logoSmallBw;
-        background-size: 50% 50%;
-        background-repeat: no-repeat;
-        background-position: center;
-        width: 100%;
-        height: 100%;
-        cursor: pointer;
-        filter: grayscale(100%);
-        opacity: .5;
-        transition: all .4s ease-in-out;
+		&:not(.bd-loading) {
+			&:hover {
+				filter: none;
+				opacity: 1;
+			}
+		}
 
-        &:not(.bd-loading) {
-            &:hover {
-                filter: none;
-                opacity: 1;
-            }
-        }
+		&.bd-loading {
+			animation: bd-settingsButtonPulse 1.5s infinite;
+		}
 
-        &.bd-loading {
-            animation: bd-settingsButtonPulse 1.5s infinite;
-        }
+		&.bd-updates {
+			filter: hue-rotate(250deg) !important; // sass-lint:disable-line no-important
+			opacity: 1 !important; // sass-lint:disable-line no-important
+		}
+	}
 
-        &.bd-updates {
-            filter: hue-rotate(250deg) !important; // sass-lint:disable-line no-important
-            opacity: 1 !important; // sass-lint:disable-line no-important
-        }
-    }
+	&.bd-hideButton {
+		animation: bd-fadeOut .4s ease-out;
 
-    &.bd-hideButton {
-        animation: bd-fadeOut .4s ease-out;
+		&.bd-active {
+			animation: bd-fadeIn .4s ease-in;
+		}
 
-        &.bd-active {
-            animation: bd-fadeIn .4s ease-in;
-        }
+		&:not(.bd-active) {
+			&:not(.bd-animating) {
+				display: none;
+			}
+		}
+	}
 
-        &:not(.bd-active) {
-            &:not(.bd-animating) {
-                display: none;
-            }
-        }
-    }
+	&.bd-active {
+		opacity: 1;
+	}
 
-    &.bd-active {
-        opacity: 1;
-    }
+	&.bd-active,
+	&.bd-hideButton {
+		background: transparent;
+		box-shadow: none;
 
-    &.bd-active,
-    &.bd-hideButton {
-        background: transparent;
-        box-shadow: none;
+		.bd-settingsButtonBtn {
+			filter: none;
+			opacity: 1;
+			width: 130px;
+			height: 43px;
+			transform:translate(25px,18px);
+			cursor: default;
+			&::before{
+				opacity:0;
+				transform:translate(-16px,-3px)scale(1.9);
+				transition:all .3s cubic-bezier(.4,0,0,1), opacity .1s .3s;
+			}
+			&::after{
+				opacity: 1;
+				transform:scale(1);
+			}
+		}
+	}
 
-        .bd-settingsButtonBtn {
-            background-image: $logoBigBw;
-            background-size: 100% 100%;
-            filter: none;
-            opacity: 1;
-            width: 130px;
-            height: 43px;
-            margin: 18px 0 17px 25px;
-            cursor: default;
-        }
-    }
-
-    &.bd-active,
-    &.bd-animating {
-        z-index: 3001;
-    }
+	&.bd-active,
+	&.bd-animating {
+		z-index: 3001;
+	}
 }
diff --git a/client/src/styles/partials/bdsettings/sidebarview.scss b/client/src/styles/partials/bdsettings/sidebarview.scss
index 8c7daf43..a585e31a 100644
--- a/client/src/styles/partials/bdsettings/sidebarview.scss
+++ b/client/src/styles/partials/bdsettings/sidebarview.scss
@@ -1,178 +1,180 @@
 .bd-settings {
-    position: absolute;
-    top: 22px;
-    left: 0;
-    bottom: 0;
-    z-index: 1001;
-    width: 310px;
-    transform: translateX(-100%) translateY(-100%);
-    opacity: 0;
-    transition: all .4s ease-in-out;
-    pointer-events: none;
+	position: absolute;
+	backface-visibility: hidden;
+	-webkit-backface-visibility: hidden;
+	top: 22px;
+	left: 0;
+	bottom: 0;
+	z-index: 1001;
+	width: 310px;
+	transform: translateX(-310px);
+	opacity: 0;
+	transition: transform .3s cubic-bezier(.4,0,0,1), opacity .25s ease;
+	pointer-events: none;
 
-    &.bd-active {
-        width: 900px;
-        transform: none;
-        opacity: 1;
-    }
+	&.bd-active {
+		width: 900px;
+		transform: none;
+		opacity: 1;
+	}
 
-    .bd-settingsX {
-        position: absolute;
-        top: 18px;
-        left: 255px;
-        border: 2px solid #6e6e6e;
-        border-radius: 50%;
-        width: 25px;
-        height: 25px;
-        justify-content: center;
-        display: flex;
-        align-items: center;
-        cursor: pointer;
+	.bd-settingsX {
+		position: absolute;
+		top: 18px;
+		left: 255px;
+		border: 2px solid #6e6e6e;
+		border-radius: 50%;
+		width: 25px;
+		height: 25px;
+		justify-content: center;
+		display: flex;
+		align-items: center;
+		cursor: pointer;
 
-        .platform-darwin & { // sass-lint:disable-line class-name-format
-            top: 43px;
-        }
+		.platform-darwin & { // sass-lint:disable-line class-name-format
+			top: 43px;
+		}
 
-        .bd-xText {
-            color: #72767d;
-            position: absolute;
-            top: 32px;
-            font-weight: 600;
-            font-size: 13px;
-        }
+		.bd-xText {
+			color: #72767d;
+			position: absolute;
+			top: 32px;
+			font-weight: 600;
+			font-size: 13px;
+		}
 
-        .bd-materialDesignIcon {
-            justify-content: center;
-            display: flex;
-            fill: #72767d;
-        }
+		.bd-materialDesignIcon {
+			justify-content: center;
+			display: flex;
+			fill: #72767d;
+		}
 
-        &:hover {
-            background-color: hsla(218, 5%, 47%, .3);
+		&:hover {
+			background-color: hsla(218, 5%, 47%, .3);
 
-            .bd-materialDesignIcon {
-                fill: #fff;
-            }
-        }
-    }
+			.bd-materialDesignIcon {
+				fill: #fff;
+			}
+		}
+	}
 
-    .bd-info {
-        display: flex;
-        align-items: flex-end;
-        overflow: hidden;
-        padding: 0 25px;
-        margin: 10px 0;
+	.bd-info {
+		display: flex;
+		align-items: flex-end;
+		overflow: hidden;
+		padding: 0 25px;
+		margin: 10px 0;
 
-        .bd-vtext {
-            color: #414245;
-            font-weight: 700;
-            font-size: 12px;
-            flex-grow: 1;
-            height: 20px;
-            cursor: default;
-            user-select: none;
-        }
+		.bd-vtext {
+			color: #414245;
+			font-weight: 700;
+			font-size: 12px;
+			flex-grow: 1;
+			height: 20px;
+			cursor: default;
+			user-select: none;
+		}
 
-        .bd-materialButton {
-            cursor: pointer;
+		.bd-materialButton {
+			cursor: pointer;
 
-            &:hover {
-                .bd-materialDesignIcon {
-                    fill: #fff;
-                }
-            }
-        }
+			&:hover {
+				.bd-materialDesignIcon {
+					fill: #fff;
+				}
+			}
+		}
 
-        .bd-materialDesignIcon {
-            fill: #414245;
+		.bd-materialDesignIcon {
+			fill: #414245;
 
-            &:hover {
-                fill: #fff;
-            }
-        }
-    }
+			&:hover {
+				fill: #fff;
+			}
+		}
+	}
 
-    .bd-sidebarView {
-        &::after {
-            content: '';
-            height: 100%;
-            width: 310px;
-            background-color: #202225;
-            top: 100%;
-            display: block;
-            position: absolute;
-        }
+	.bd-sidebarView {
+		&::after {
+			content: '';
+			height: 100%;
+			width: 310px;
+			background-color: #202225;
+			top: 100%;
+			display: block;
+			position: absolute;
+		}
 
-        .bd-sidebarRegion {
-            .bd-scroller {
-                padding-top: 0;
-            }
-        }
+		.bd-sidebarRegion {
+			.bd-scroller {
+				padding-top: 0;
+			}
+		}
 
-        .bd-contentRegion {
-            width: 590px;
-        }
+		.bd-contentRegion {
+			width: 590px;
+		}
 
-        &.bd-active {
-            .bd-contentRegion {
-                transition: transform .4s ease-in-out, opacity .2s ease;
-                transform: none;
-                opacity: 1;
-            }
-        }
+		&.bd-active {
+			.bd-contentRegion {
+				transition: all .3s cubic-bezier(.4,0,0,1);
+				transform: none;
+				opacity: 1;
+			}
+		}
 
-        &.bd-stop {
-            .bd-sidebarRegion {
-                z-index: 1003;
-            }
+		&.bd-stop {
+			.bd-sidebarRegion {
+				z-index: 1003;
+			}
 
-            .bd-contentRegion {
-                z-index: 1002;
-            }
-        }
-    }
+			.bd-contentRegion {
+				z-index: 1002;
+			}
+		}
+	}
 
-    .platform-darwin & { // sass-lint:disable-line class-name-format
-        top: 0;
+	.platform-darwin & { // sass-lint:disable-line class-name-format
+		top: 0;
 
-        .bd-sidebarView {
-            .bd-sidebarRegion {
-                padding-top: 22px;
-            }
-        }
-    }
+		.bd-sidebarView {
+			.bd-sidebarRegion {
+				padding-top: 22px;
+			}
+		}
+	}
 
-    .platform-linux & { // sass-lint:disable-line class-name-format
-        top: 0;
-    }
+	.platform-linux & { // sass-lint:disable-line class-name-format
+		top: 0;
+	}
 
-    &:not(.bd-active) > .bd-sidebarView.bd-active, // sass-lint:disable-line force-element-nesting
-    &.bd-settingsOut .bd-sidebarView.bd-active { // sass-lint:disable-line force-element-nesting
-        .bd-contentRegion {
-            transform: translate(-600px, 0%);
-            opacity: 0;
-            width: 590px;
-        }
-    }
+	&:not(.bd-active) > .bd-sidebarView.bd-active, // sass-lint:disable-line force-element-nesting
+	&.bd-settingsOut .bd-sidebarView.bd-active { // sass-lint:disable-line force-element-nesting
+		.bd-contentRegion {
+			transform: translate(-600px, 0%);
+			opacity: 0;
+			width: 590px;
+		}
+	}
 
-    &:not(.bd-active) {
-        .bd-sidebarView {
-            &.bd-active {
-                .bd-contentRegion {
-                    transform: translate(-600px, 100%);
-                }
-            }
-        }
-    }
+	&:not(.bd-active) {
+		.bd-sidebarView {
+			&.bd-active {
+				.bd-contentRegion {
+					transform: translate(-600px, 100%);
+				}
+			}
+		}
+	}
 }
 
 .bd-sidebar {
-    .bd-settingsButton {
-        position: absolute;
-        top: 0;
+	.bd-settingsButton {
+		position: absolute;
+		top: 0;
 
-        .platform-darwin & { // sass-lint:disable-line class-name-format
-            top: 22px;
-        }
-    }
+		.platform-darwin & { // sass-lint:disable-line class-name-format
+			top: 22px;
+		}
+	}
 }
diff --git a/client/src/styles/partials/generic/drawers.scss b/client/src/styles/partials/generic/drawers.scss
index f7dc1b64..cc2be433 100644
--- a/client/src/styles/partials/generic/drawers.scss
+++ b/client/src/styles/partials/generic/drawers.scss
@@ -26,14 +26,23 @@
         position: relative;
         margin-right: 15px;
 
-        .bd-chevron1,
-        .bd-chevron2 {
+        .bd-chevron1 {
             position: absolute;
+            svg{
+                transform: scale(1) translateY(0);
+            }
+        }
+
+        .bd-chevron2{
+            position: absolute;
+            svg{
+                visibility: hidden;
+                transform: scale(1.4,.5) translateY(6px) rotate(180deg);
+            }
         }
 
         svg {
-            transition: transform .5s ease;
-            transform: none;
+            transition: transform .2s cubic-bezier(.2,0,0,1);
         }
     }
 
@@ -70,16 +79,16 @@
             .bd-drawerOpenButton {
                 .bd-chevron1 {
                     svg {
-                        transform: rotate(90deg);
+                        transform: scale(1.4,.5) translateY(-6px);
+                        visibility: hidden;
                     }
                 }
             }
 
             .bd-chevron2 {
-                margin-left: -4px;
-
                 svg {
-                    transform: rotate(270deg);
+                    visibility: visible;
+                    transform: scale(1) translateY(0) rotate(180deg);
                 }
             }
         }
diff --git a/client/src/styles/partials/generic/forms/switches.scss b/client/src/styles/partials/generic/forms/switches.scss
index ceb5c300..c9dba034 100644
--- a/client/src/styles/partials/generic/forms/switches.scss
+++ b/client/src/styles/partials/generic/forms/switches.scss
@@ -47,7 +47,7 @@
             bottom: 3px;
             background: #f6f6f7;
             border-radius: 10px;
-            transition: all .15s ease;
+            transition: all .15s cubic-bezier(.2,0,0,1);
             box-shadow: 0 3px 1px 0 rgba(0, 0, 0, .05), 0 2px 2px 0 rgba(0, 0, 0, .1), 0 3px 3px 0 rgba(0, 0, 0, .05);
         }
 
diff --git a/client/src/styles/partials/sidebarview/sidebar.scss b/client/src/styles/partials/sidebarview/sidebar.scss
index 8993a6af..b05f0018 100644
--- a/client/src/styles/partials/sidebarview/sidebar.scss
+++ b/client/src/styles/partials/sidebarview/sidebar.scss
@@ -1,50 +1,50 @@
 .bd-sidebar {
-    width: 100%;
-    padding-right: 20px;
-    padding: 0;
+	width: 100%;
+	padding-right: 20px;
+	padding: 0;
 
-    .bd-header {
-        padding: 6px 0;
-        margin-left: 10px;
-        margin-top: 15px;
-        color: rgba(255, 255, 255, .15);
-        font-size: 14px;
-        line-height: 16px;
-        text-transform: uppercase;
-        font-weight: 600;
-        flex-shrink: 0;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        font-family: Whitney, Helvetica Neue, Helvetica, Arial, sans-serif;
-    }
+	.bd-header {
+		padding: 6px 0;
+		margin-left: 10px;
+		margin-top: 15px;
+		color: rgba(255, 255, 255, .15);
+		font-size: 14px;
+		line-height: 16px;
+		text-transform: uppercase;
+		font-weight: 600;
+		flex-shrink: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		font-family: Whitney, Helvetica Neue, Helvetica, Arial, sans-serif;
+	}
 
-    .bd-item {
-        border-radius: 3px;
-        margin-bottom: 2px;
-        padding-bottom: 6px;
-        padding-top: 6px;
-        padding: 6px 10px;
-        color: $coldimwhite;
-        cursor: pointer;
-        font-size: 17px;
-        line-height: 20px;
-        position: relative;
-        flex-shrink: 0;
-        font-weight: 500;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        font-family: Whitney, Helvetica Neue, Helvetica, Arial, sans-serif;
+	.bd-item {
+		border-radius: 3px;
+		margin-bottom: 2px;
+		padding-bottom: 6px;
+		padding-top: 6px;
+		padding: 6px 10px;
+		color: $coldimwhite;
+		cursor: pointer;
+		font-size: 17px;
+		line-height: 20px;
+		position: relative;
+		flex-shrink: 0;
+		font-weight: 500;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		font-family: Whitney, Helvetica Neue, Helvetica, Arial, sans-serif;
 
-        &:hover,
-        &.bd-active {
-            background: $colbdgreen;
-            color: #fff;
-        }
-
-        &.bd-active {
-            cursor: default;
-        }
-    }
+		&:hover {
+			background-color: rgba(185,185,185,.1);
+			color: #f6f6f6;
+		}
+		&.bd-active {
+			background: $colbdgreen;
+			color: #fff;
+			cursor: default;
+		}
+	}
 }