diff --git a/src/components/CreateNewModal.jsx b/src/components/CreateNewModal.jsx
index 57459cd..4d8009f 100644
--- a/src/components/CreateNewModal.jsx
+++ b/src/components/CreateNewModal.jsx
@@ -31,7 +31,7 @@ export class CreateNewModal extends Component {
 					<div style="flex:1;" class="tac">
 						<svg
 							width="287px"
-							height="150px"
+							height="80px"
 							viewBox="0 0 287 197"
 							version="1.1"
 							xmlns="http://www.w3.org/2000/svg"
@@ -117,7 +117,7 @@ export class CreateNewModal extends Component {
 					<div style="flex:1" class="tac ml-2">
 						<svg
 							width="286px"
-							height="150px"
+							height="80px"
 							viewBox="0 0 286 196"
 							version="1.1"
 							style={`opacity:${this.state.isFileModeSelected ? '1' : '0.4'}`}
diff --git a/src/components/MainHeader.jsx b/src/components/MainHeader.jsx
index 0885c6a..77f7eb5 100644
--- a/src/components/MainHeader.jsx
+++ b/src/components/MainHeader.jsx
@@ -22,11 +22,11 @@ export function MainHeader(props) {
 					<div class="main-header__btn-wrap  flex  flex-v-center">
 						<button
 							id="runBtn"
-							class="hide btn--dark flex flex-v-center hint--rounded hint--bottom-left"
+							class="hide btn btn btn--dark flex flex-v-center hint--rounded hint--bottom-left"
 							aria-label="Run preview (Ctrl/⌘ + Shift + 5)"
 							onClick={props.runBtnClickHandler}
 						>
-							<svg style="width: 14px; height: 14px;">
+							<svg>
 								<use xlinkHref="#play-icon" />
 							</svg>
 							<Trans>Run</Trans>
@@ -37,7 +37,7 @@ export function MainHeader(props) {
 								onClick={props.addLibraryBtnHandler}
 								data-event-category="ui"
 								data-event-action="addLibraryButtonClick"
-								class="btn--dark flex-v-center hint--rounded hint--bottom-left"
+								class="btn btn--dark hint--rounded hint--bottom-left"
 								aria-label={i18n._(t`Add a JS/CSS library`)}
 							>
 								<Trans>Add library</Trans>{' '}
@@ -54,30 +54,24 @@ export function MainHeader(props) {
 						)}
 
 						<button
-							class="btn--dark flex  flex-v-center hint--rounded hint--bottom-left"
+							class="btn btn--dark hint--rounded hint--bottom-left"
 							aria-label="Start a new creation"
 							onClick={props.newBtnHandler}
 						>
-							<svg
-								style="vertical-align:middle;width:14px;height:14px"
-								viewBox="0 0 24 24"
-							>
+							<svg viewBox="0 0 24 24">
 								<path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
 							</svg>
 							<Trans>New</Trans>
 						</button>
 						<button
 							id="saveBtn"
-							class={`btn--dark flex  flex-v-center hint--rounded hint--bottom-left ${
+							class={`btn btn--dark hint--rounded hint--bottom-left ${
 								props.isSaving ? 'is-loading' : ''
 							} ${props.unsavedEditCount ? 'is-marked' : 0}`}
 							aria-label="Save current creation (Ctrl/⌘ + S)"
 							onClick={props.saveBtnHandler}
 						>
-							<svg
-								style="vertical-align:middle;width:14px;height:14px"
-								viewBox="0 0 24 24"
-							>
+							<svg viewBox="0 0 24 24">
 								<path d="M15,9H5V5H15M12,19A3,3 0 0,1 9,16A3,3 0 0,1 12,13A3,3 0 0,1 15,16A3,3 0 0,1 12,19M17,3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V7L17,3Z" />
 							</svg>
 							<svg class="btn-loader" width="15" height="15" stroke="#fff">
@@ -87,16 +81,13 @@ export function MainHeader(props) {
 						</button>
 						<button
 							id="openItemsBtn"
-							class={`btn--dark flex flex-v-center hint--rounded hint--bottom-left ${
+							class={`btn btn--dark hint--rounded hint--bottom-left ${
 								props.isFetchingItems ? 'is-loading' : ''
 							}`}
 							aria-label="Open a saved creation (Ctrl/⌘ + O)"
 							onClick={props.openBtnHandler}
 						>
-							<svg
-								style="width:14px;height:14px;vertical-align:middle;"
-								viewBox="0 0 24 24"
-							>
+							<svg viewBox="0 0 24 24">
 								<path d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z" />
 							</svg>
 							<svg class="btn-loader" width="15" height="15" stroke="#fff">
@@ -108,7 +99,7 @@ export function MainHeader(props) {
 							onClick={props.loginBtnHandler}
 							data-event-category="ui"
 							data-event-action="loginButtonClick"
-							class="hide-on-login btn--dark flex  flex-v-center  hint--rounded  hint--bottom-left"
+							class="hide-on-login btn btn--dark hint--rounded  hint--bottom-left"
 							aria-label="Login/Signup"
 						>
 							<Trans>Login</Trans>/<Trans>Signup</Trans>
diff --git a/src/components/SidePane.jsx b/src/components/SidePane.jsx
index b26a845..b529413 100644
--- a/src/components/SidePane.jsx
+++ b/src/components/SidePane.jsx
@@ -79,10 +79,7 @@ function File({
 							class="btn btn--dark"
 							onClick={onRenameBtnClick.bind(null, file)}
 						>
-							<svg
-								viewBox="0 0 24 24"
-								style="vertical-align:middle;width:14px;height:14px"
-							>
+							<svg viewBox="0 0 24 24">
 								<path d="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z" />
 							</svg>
 						</button>
@@ -92,10 +89,7 @@ function File({
 							class="btn btn--dark"
 							onClick={onRemoveBtnClick.bind(null, file)}
 						>
-							<svg
-								viewBox="0 0 24 24"
-								style="vertical-align:middle;width:14px;height:14px"
-							>
+							<svg viewBox="0 0 24 24">
 								<path d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z" />
 							</svg>
 						</button>
@@ -236,18 +230,15 @@ export class SidePane extends Component {
 				onDragOver={this.dragOverHandler.bind(this)}
 				onDrop={this.dropHandler.bind(this)}
 			>
-				<div class="flex jc-sb" style="padding: 5px 10px">
+				<div class="d-f jc-sb ai-c" style="padding: 5px 10px">
 					Files
-					<div class="flex flex-v-center">
+					<div class="flex ai-c">
 						<button
 							type="button"
 							class="btn btn--dark"
 							onClick={this.addFileButtonClickHandler.bind(this)}
 						>
-							<svg
-								viewBox="0 0 24 24"
-								style="vertical-align:middle;width:14px;height:14px"
-							>
+							<svg viewBox="0 0 24 24">
 								<path d="M13,9H18.5L13,3.5V9M6,2H14L20,8V20A2,2 0 0,1 18,22H6C4.89,22 4,21.1 4,20V4C4,2.89 4.89,2 6,2M11,15V12H9V15H6V17H9V20H11V17H14V15H11Z" />
 							</svg>
 						</button>
@@ -256,10 +247,7 @@ export class SidePane extends Component {
 							class="btn btn--dark"
 							onClick={this.addFolderButtonClickHandler.bind(this)}
 						>
-							<svg
-								viewBox="0 0 24 24"
-								style="vertical-align:middle;width:14px;height:14px"
-							>
+							<svg viewBox="0 0 24 24">
 								<path d="M10,4L12,6H20A2,2 0 0,1 22,8V18A2,2 0 0,1 20,20H4C2.89,20 2,19.1 2,18V6C2,4.89 2.89,4 4,4H10M15,9V12H12V14H15V17H17V14H20V12H17V9H15Z" />
 							</svg>
 						</button>
diff --git a/src/components/Switch.jsx b/src/components/Switch.jsx
index dea1545..475d097 100644
--- a/src/components/Switch.jsx
+++ b/src/components/Switch.jsx
@@ -3,7 +3,7 @@ import { h } from 'preact';
 export default function Switch({
 	checked,
 	onChange,
-	labels,
+	labels = [],
 	children,
 	showBothLabels
 }) {
diff --git a/src/style.css b/src/style.css
index 5e975e3..0dee3e4 100644
--- a/src/style.css
+++ b/src/style.css
@@ -87,6 +87,9 @@ button {
 .flex {
 	display: flex;
 }
+.d-f {
+	display: flex;
+}
 
 .flex-grow {
 	flex-grow: 1;
@@ -95,7 +98,9 @@ button {
 .flex-v-center {
 	align-items: center;
 }
-
+.ai-c {
+	align-items: center;
+}
 .flex-h-center {
 	justify-content: center;
 }
@@ -759,6 +764,8 @@ body > #demo-frame {
 
 .btn--dark > svg {
 	fill: #9297b3;
+	width: 20px;
+	height: 20px;
 }
 .btn--dark > svg:not(:last-child) {
 	margin-right: 4px;