wip:

* Dark theme by default
* Re-arranged vue files structure
* Re-arranged the layout file to make it easier to extend

15 files changed, 572 insertions, 504 deletions

diff --git a/src/site/assets/styles/_colors.scss b/src/site/assets/styles/_colors.scss
index f90ecce..6e40102 100644
--- a/src/site/assets/styles/_colors.scss
+++ b/src/site/assets/styles/_colors.scss
@@ -22,4 +22,4 @@ $baseBlueHover: rgb(21, 135, 201);
 $uploaderDropdownColor: #797979;
 
 $boxShadow: 0 10px 15px rgba(4,39,107,0.2);
-$boxShadowLight: 5px 5px 15px rgba(4, 39, 107, 0.2);
+$boxShadowLight: rgba(15, 17, 21, 0.35) 0px 6px 9px 0px;
diff --git a/src/site/assets/styles/dropzone.scss b/src/site/assets/styles/dropzone.scss
index 2d68659..91e0fc1 100644
--- a/src/site/assets/styles/dropzone.scss
+++ b/src/site/assets/styles/dropzone.scss
@@ -347,6 +347,16 @@
 	border-radius: 3px;
 	*/
 }
+.dropzone .dz-preview .result a {
+	cursor: pointer;
+	color: white;
+	text-transform: uppercase;
+	line-height: 30px;
+	&:hover {
+		color: white;
+		text-decoration: underline;;
+	}
+}
 .dropzone .dz-preview:hover .dz-image img {
 	-webkit-transform: scale(1.05, 1.05);
 	-moz-transform: scale(1.05, 1.05);
diff --git a/src/site/assets/styles/style.scss b/src/site/assets/styles/style.scss
index d595a10..c067ef4 100644
--- a/src/site/assets/styles/style.scss
+++ b/src/site/assets/styles/style.scss
@@ -17,13 +17,23 @@ html {
 	background-color: $base-1;
 }
 
+a {
+	color: #5E81AC;
+	&:hover {
+		color: #81A1C1;
+		text-decoration: underline;
+	}
+}
 body,
+p,
+h1,
+h1.title,
 h2.subtitle,
 label.label {
-	color: $defaultTextColor;
+	color: $textColor;
 }
 label.label {
-	font-weight: 300;
+	font-weight: 400;
 }
 
 h4 {
@@ -33,10 +43,10 @@ h4 {
 }
 
 @for $i from 1 through 10 {
-	.mt#{$i} { margin-top: $i + em; }
-	.mb#{$i} { margin-bottom: $i + em; }
-	.ml#{$i} { margin-left: $i + em; }
-	.mr#{$i} { margin-right: $i + em; }
+	.mt#{$i} { margin-top: $i + em !important; }
+	.mb#{$i} { margin-bottom: $i + em !important; }
+	.ml#{$i} { margin-left: $i + em !important; }
+	.mr#{$i} { margin-right: $i + em !important; }
 }
 
 .text-center {
@@ -44,7 +54,7 @@ h4 {
 }
 
 hr {
-	background-color: #c7c7c7;
+	background-color: #c7c7c757;
 	height: 1px;
 }
 // Bulma color changes.
@@ -118,6 +128,21 @@ section p.control button {
 	Register and Login forms
 */
 
+section.hero.is-login, section.hero.is-register {
+	a {
+		font-size: 1.25em;
+		line-height: 2.5em;
+
+		&.button {
+			font-size: 14px !important;
+		}
+	}
+	input {
+		background: #323846;
+		border-radius: 0 !important;
+	}
+}
+/*
 section#login,
 section#register { background-color: $backgroundLight1 !important; }
 section#login input,
@@ -149,7 +174,7 @@ section#register a.is-text {
 	font-size: 1.25em;
 	line-height: 2.5em;
 }
-
+*/
 .modal-card-head, .modal-card-foot {
 	background: $backgroundLight1;
 }
@@ -157,3 +182,69 @@ section#register a.is-text {
 .switch {
 	margin-top: 5px;
 }
+
+.input, .taginput .taginput-container.is-focusable, .textarea, .select select {
+	border: 2px solid #21252d;
+	border-radius: .3em !important;
+	background: rgba(0, 0, 0, 0.15);
+	padding: 1rem;
+	color: $textColor;
+	height: 3rem;
+	&:focus,
+	&:hover {
+		border: 2px solid #21252d;
+	}
+	&::placeholder {
+		color: $textColor;
+	}
+}
+button.button.is-primary {
+	background-color: #323846;
+	border: 2px solid #21252d;
+	color: $textColor;
+	font-size: 1rem;
+    border-top: 0;
+    border-left: 0;
+    border-right: 0;
+	&:hover {
+		background-color: $base-2;
+	}
+	&.big {
+		font-size: 1.25rem;
+	}
+}
+svg.waves {
+	display: block;
+	bottom: -1px;
+	left: 0px;
+	right: 0px;
+	width: 100%;
+	background-color: transparent;
+	pointer-events: none;
+	user-select: none;
+	overflow: hidden;
+}
+div.field-body > div.field { text-align: left; }
+table.table {
+	background: $base-2;
+	color: $textColor;
+	border: 0;
+	thead {
+		th, td {
+			color: $textColor;
+		}
+	}
+	tfoot {
+		background: $base-1;
+		tr.table-footer {
+			.wrapper {
+				display: flex;
+				color: $textColor;
+				justify-content: space-evenly;
+			}
+		}
+	}
+	th, td {
+		border-color: #ffffff1c;
+	}
+}
diff --git a/src/site/components/footer/Footer.vue b/src/site/components/footer/Footer.vue
index 5df8ac3..9f51fee 100644
--- a/src/site/components/footer/Footer.vue
+++ b/src/site/components/footer/Footer.vue
@@ -87,16 +87,6 @@ export default {
 	@import '~/assets/styles/_colors.scss';
 	footer {
 		svg.waves {
-			display: block;
-			bottom: -1px;
-			left: 0px;
-			right: 0px;
-			width: 100%;
-			background-color: transparent;
-			pointer-events: none;
-			user-select: none;
-			overflow: hidden;
-
 			.wave-1 {
 				fill: rgb(55, 61, 76);
 				transition: fill 400ms ease-in-out 0s;
diff --git a/src/site/components/home/links/Links.vue b/src/site/components/home/links/Links.vue
index 1a1f077..41bd271 100644
--- a/src/site/components/home/links/Links.vue
+++ b/src/site/components/home/links/Links.vue
@@ -1,67 +1,3 @@
-<style lang="scss" scoped>
-	@import '~/assets/styles/_colors.scss';
-	.links {
-		margin-bottom: 3em;
-		align-items: stretch;
-		display: flex;
-		justify-content: space-between;
-
-		div.link { cursor: pointer; }
-		.link {
-			background: $backgroundAccent;
-			display: block;
-			width: calc(25% - 2rem);
-			border-radius: 6px;
-			box-shadow: 0 1.5rem 1.5rem -1.25rem rgba(10,10,10,.05);
-			transition-duration: 86ms;
-			transition-property: box-shadow,-webkit-transform;
-			transition-property: box-shadow,transform;
-			transition-property: box-shadow,transform,-webkit-transform;
-			will-change: box-shadow,transform;
-
-			header.bd-footer-star-header {
-				padding: 1.5rem;
-
-				&:hover .bd-footer-subtitle { color: $textColorHighlight; }
-
-				h4.bd-footer-title {
-					color: $textColorHighlight;
-					font-size: 1.5rem;
-					line-height: 1.25;
-					margin-bottom: .5rem;
-					transition-duration: 86ms;
-					transition-property: color;
-					font-weight: 700;
-				}
-
-				p.bd-footer-subtitle {
-					color: $textColor;
-					margin-top: -.5rem;
-					transition-duration: 86ms;
-					transition-property: color;
-					font-weight: 400;
-				}
-			}
-
-			&:hover {
-				box-shadow: 0 3rem 3rem -1.25rem rgba(10,10,10,.1);
-				-webkit-transform: translateY(-.5rem);
-				transform: translateY(-.5rem);
-			}
-		}
-	}
-
-	@media screen and (max-width: 768px) {
-		.links {
-			display: block;
-			padding: 0px 2em;
-			.link {
-				width: 100%;
-				margin-bottom: 1.5em;
-			}
-		}
-	}
-</style>
 <template>
 	<div class="links">
 		<a href="https://github.com/WeebDev/lolisafe"
@@ -92,7 +28,7 @@
 			class="link">
 			<header class="bd-footer-star-header">
 				<h4 class="bd-footer-title">FAQ</h4>
-				<p class="bd-footer-subtitle">dunno</p>
+				<p class="bd-footer-subtitle">We got you covered</p>
 			</header>
 		</router-link>
 	</div>
@@ -127,3 +63,67 @@ export default {
 	}
 };
 </script>
+<style lang="scss" scoped>
+	@import '~/assets/styles/_colors.scss';
+	.links {
+		margin: 7rem 0 3rem 0;
+		align-items: stretch;
+		display: flex;
+		justify-content: space-between;
+
+		div.link { cursor: pointer; }
+		.link {
+			background: $backgroundAccent;
+			display: block;
+			width: calc(25% - 2rem);
+			border-radius: 6px;
+			box-shadow: 0 1.5rem 1.5rem -1.25rem rgba(10,10,10,.05);
+			transition-duration: 86ms;
+			transition-property: box-shadow,-webkit-transform;
+			transition-property: box-shadow,transform;
+			transition-property: box-shadow,transform,-webkit-transform;
+			will-change: box-shadow,transform;
+
+			header.bd-footer-star-header {
+				padding: 1.5rem;
+
+				&:hover .bd-footer-subtitle { color: $textColorHighlight; }
+
+				h4.bd-footer-title {
+					color: $textColorHighlight;
+					font-size: 1.5rem;
+					line-height: 1.25;
+					margin-bottom: .5rem;
+					transition-duration: 86ms;
+					transition-property: color;
+					font-weight: 700;
+				}
+
+				p.bd-footer-subtitle {
+					color: $textColor;
+					margin-top: -.5rem;
+					transition-duration: 86ms;
+					transition-property: color;
+					font-weight: 400;
+				}
+			}
+
+			&:hover {
+				box-shadow: 0 3rem 3rem -1.25rem rgba(10,10,10,.1);
+				-webkit-transform: translateY(-.5rem);
+				transform: translateY(-.5rem);
+			}
+		}
+	}
+
+	@media screen and (max-width: 768px) {
+		.links {
+			display: block;
+			padding: 0px 2em;
+			.link {
+				width: 100%;
+				margin-bottom: 1.5em;
+			}
+		}
+	}
+</style>
diff --git a/src/site/components/navbar/Navbar.vue b/src/site/components/navbar/Navbar.vue
index 78eb650..0b98af0 100644
--- a/src/site/components/navbar/Navbar.vue
+++ b/src/site/components/navbar/Navbar.vue
@@ -1,88 +1,59 @@
-<style lang="scss" scoped>
-	@import '~/assets/styles/_colors.scss';
-	nav.navbar {
-		background: transparent;
-		box-shadow: none;
-
-		.navbar-brand {
-			width: calc(100% - 2em);
-			align-items: flex-start;
-			padding: 1em;
-
-			div.spacer { flex: 1 0 10px; }
-			a.navbar-item {
-				color: $defaultTextColor;
-				font-size: 16px;
-				font-weight: 700;
-				text-decoration-style: solid;
-			}
-			a.navbar-item:hover, a.navbar-item.is-active, a.navbar-link:hover, a.navbar-link.is-active {
-				text-decoration: underline;
-				background: transparent;
-			}
-
-			i {
-				font-size: 2em;
-				&.hidden {
-					width: 0px;
-					height: 1.5em;
-					pointer-events: none;
-				}
-			}
-		}
-
-		&.isWhite {
-			.navbar-brand {
-				a.navbar-item {
-					color: white;
-				}
-			}
-		}
-	}
-</style>
-
 <template>
 	<nav :class="{ isWhite }"
 		class="navbar is-transparent">
 		<div class="navbar-brand">
-			<router-link to="/"
-				class="navbar-item no-active">
-				<i class="icon-ecommerce-safebox" /> {{ config.serviceName }}
-			</router-link>
-
-			<div class="spacer" />
-
-			<template v-if="loggedIn">
-				<router-link
-					to="/dashboard"
-					class="navbar-item no-active"
-					exact>
-					<i class="hidden" />
-					Uploads
-				</router-link>
+			<a role="button"
+				class="navbar-burger burger"
+				aria-label="menu"
+				aria-expanded="false"
+				data-target="navbarBasicExample">
+				<span aria-hidden="true" />
+				<span aria-hidden="true" />
+				<span aria-hidden="true" />
+			</a>
+		</div>
+		<div class="navbar-menu">
+			<div class="navbar-end">
 				<router-link
-					to="/dashboard/albums"
+					to="/"
 					class="navbar-item no-active"
 					exact>
-					<i class="hidden" />
-					Albums
+					Home
 				</router-link>
 				<router-link
-					to="/dashboard/account"
+					to="/"
 					class="navbar-item no-active"
 					exact>
-					<i class="hidden" />
-					Account
-				</router-link>
-			</template>
-			<template v-else>
-				<router-link
-					class="navbar-item"
-					to="/login">
-					<i class="hidden" />
-					Login
+					Docs
 				</router-link>
-			</template>
+				<template v-if="loggedIn">
+					<router-link
+						to="/dashboard"
+						class="navbar-item no-active"
+						exact>
+						Uploads
+					</router-link>
+					<router-link
+						to="/dashboard/albums"
+						class="navbar-item no-active"
+						exact>
+						Albums
+					</router-link>
+					<router-link
+						to="/dashboard/account"
+						class="navbar-item no-active"
+						exact>
+						Account
+					</router-link>
+				</template>
+				<template v-else>
+					<router-link
+						class="navbar-item"
+						to="/login">
+						Login
+					</router-link>
+				</template>
+			</div>
 		</div>
 	</nav>
 </template>
@@ -113,3 +84,49 @@ export default {
 	}
 };
 </script>
+<style lang="scss" scoped>
+	@import '~/assets/styles/_colors.scss';
+	nav.navbar {
+		background: transparent;
+		box-shadow: none;
+		.navbar-brand {
+			a.burger {
+				color: $defaultTextColor;
+			}
+		}
+		.navbar-menu {
+			height: 5rem;
+
+			.navbar-end {
+				padding-right: 2rem;
+			}
+			a.navbar-item {
+				color: $defaultTextColor;
+				font-size: 16px;
+				font-weight: 700;
+				text-decoration-style: solid;
+			}
+			a.navbar-item:hover, a.navbar-item.is-active, a.navbar-link:hover, a.navbar-link.is-active {
+				text-decoration: underline;
+				background: transparent;
+			}
+
+			i {
+				font-size: 2em;
+				&.hidden {
+					width: 0px;
+					height: 1.5em;
+					pointer-events: none;
+				}
+			}
+		}
+
+		&.isWhite {
+			.navbar-brand {
+				a.navbar-item {
+					color: white;
+				}
+			}
+		}
+	}
+</style>
diff --git a/src/site/components/sidebar/Sidebar.vue b/src/site/components/sidebar/Sidebar.vue
index 9fe1be5..a2ad3f4 100644
--- a/src/site/components/sidebar/Sidebar.vue
+++ b/src/site/components/sidebar/Sidebar.vue
@@ -1,34 +1,5 @@
-<style lang="scss" scoped>
-	@import '~/assets/styles/_colors.scss';
-	.dashboard-menu {
-		a {
-			display: block;
-			font-weight: 700;
-			color: #868686;
-			position: relative;
-			padding-left: 40px;
-			height: 35px;
-			&:hover, &:first-child {
-				color: $defaultTextColor;
-			}
-
-			i {
-				position: absolute;
-				font-size: 1.5em;
-				top: -4px;
-				left: 5px;
-			}
-		}
-
-		hr { margin-top: 0.6em; }
-	}
-</style>
 <template>
 	<div class="dashboard-menu">
-		<router-link to="/">
-			<i class="icon-ecommerce-safebox" />lolisafe
-		</router-link>
-		<hr>
 		<router-link to="/dashboard">
 			<i class="icon-com-pictures" />Files
 		</router-link>
@@ -40,12 +11,10 @@
 			<i class="icon-ecommerce-tag-c" />Tags
 		</router-link>
 		-->
-		<hr>
 		<router-link to="/dashboard/account">
 			<i class="icon-ecommerce-tag-c" />Account
 		</router-link>
 		<template v-if="user && user.isAdmin">
-			<hr>
 			<router-link to="/dashboard/admin/users">
 				<i class="icon-setting-gear-a" />Users
 			</router-link>
@@ -67,3 +36,31 @@ export default {
 	}
 };
 </script>
+<style lang="scss" scoped>
+	@import '~/assets/styles/_colors.scss';
+	.dashboard-menu {
+		padding: 2rem;
+		border-radius: 8px;
+
+		a {
+			display: block;
+			font-weight: 700;
+			color: $textColor;
+			position: relative;
+			padding-left: 40px;
+			height: 35px;
+			&:hover{
+				color: white;
+			}
+
+			i {
+				position: absolute;
+				font-size: 1.5em;
+				top: -4px;
+				left: 5px;
+			}
+		}
+
+		hr { margin-top: 0.6em; }
+	}
+</style>
diff --git a/src/site/components/uploader/Uploader.vue b/src/site/components/uploader/Uploader.vue
index 9974e1d..1b03ff8 100644
--- a/src/site/components/uploader/Uploader.vue
+++ b/src/site/components/uploader/Uploader.vue
@@ -22,7 +22,7 @@
 			@vdropzone-error="dropzoneError"
 			@vdropzone-files-added="dropzoneFilesAdded" />
 		<label class="add-more">
-			Add more files
+			Add or drop more files
 		</label>
 
 		<div id="template"
@@ -33,18 +33,11 @@
 					<div class="dz-size"><span data-dz-size /></div>
 				</div>
 				<div class="result">
-					<div class="copyLink">
-						<b-tooltip label="Copy link">
-							<i class="icon-web-code" />
-						</b-tooltip>
-					</div>
 					<div class="openLink">
-						<b-tooltip label="Open file">
-							<a class="link"
-								target="_blank">
-								<i class="icon-web-url" />
-							</a>
-						</b-tooltip>
+						<a class="link"
+							target="_blank">
+							Link
+						</a>
 					</div>
 				</div>
 				<div class="error">
@@ -193,12 +186,14 @@ export default {
 		processResult(file, response) {
 			if (!response.url) return;
 			file.previewTemplate.querySelector('.link').setAttribute('href', response.url);
+			/*
 			file.previewTemplate.querySelector('.copyLink').addEventListener('click', () => {
 				this.$store.dispatch('alert', {
 					text: 'Link copied!'
 				});
 				this.$clipboard(response.url);
 			});
+			*/
 		}
 	}
 };
@@ -210,17 +205,7 @@ export default {
 		width: 400px;
 		margin: 0 auto;
 		max-width: 100%;
-		transition-duration: 86ms;
-		transition-property: box-shadow,-webkit-transform;
-		transition-property: box-shadow,transform;
-		transition-property: box-shadow,transform,-webkit-transform;
-		will-change: box-shadow,transform;
-
-		&:hover, &.hasFiles {
-			box-shadow: 0 1rem 3rem 0rem rgba(10, 10, 10, 0.25);
-			-webkit-transform: translateY(-.5rem);
-			transform: translateY(-.5rem);
-		}
+		position: relative;
 	}
 </style>
 <style lang="scss">
@@ -249,6 +234,7 @@ export default {
 					background: rgba(0, 0, 0, 0.15);
 					border-radius: .3em;
 					color: $uploaderDropdownColor;
+					padding: 0 0 0 1rem;
 				}
 			}
 		}
diff --git a/src/site/layouts/default.vue b/src/site/layouts/default.vue
index 4dc8c0e..1642980 100644
--- a/src/site/layouts/default.vue
+++ b/src/site/layouts/default.vue
@@ -1,17 +1,23 @@
 <template>
 	<div v-bar>
 		<div>
-			<div class="layout">
-				<nuxt-child id="app" />
-				<Footer />
-			</div>
+			<section class="hero is-fullheight has-text-centered">
+				<Navbar :isWhite="true" />
+				<div class="hero-body">
+					<nuxt-child id="app" />
+				</div>
+				<div class="hero-foot">
+					<Footer />
+				</div>
+			</section>
 		</div>
 	</div>
 </template>
 <script>
+import Navbar from '~/components/navbar/Navbar.vue';
 import Footer from '~/components/footer/Footer';
 export default {
-	components: { Footer },
+	components: { Navbar, Footer },
 	computed: {
 		config() {
 			return this.$store.state.config;
@@ -43,7 +49,25 @@ export default {
 </script>
 <style lang="scss">
 	html { overflow: hidden !important; }
-	.layout { height: 100vh; }
+	.is-fullheight { height: 100vh; }
+	.hero-body {
+		padding: 3rem 0 !important;
+		#app {
+			width: 100%;
+			& > .container {
+				margin-top: 5rem;
+			}
+		}
+		> .hero {
+			min-height: auto !important;
+			height: auto !important;
+		}
+	}
 	@import "~/assets/styles/style.scss";
 	@import "~/assets/styles/icons.min.css";
 </style>
+<style lang="scss" scoped>
+	.hero-body {
+		align-items: baseline !important;
+	}
+</style>
diff --git a/src/site/pages/dashboard/albums/index.vue b/src/site/pages/dashboard/albums/index.vue
index 9333ffa..7dee517 100644
--- a/src/site/pages/dashboard/albums/index.vue
+++ b/src/site/pages/dashboard/albums/index.vue
@@ -1,125 +1,3 @@
-<style lang="scss" scoped>
-	@import '~/assets/styles/_colors.scss';
-	div.view-container {
-		padding: 2rem;
-	}
-	div.album {
-		display: flex;
-		flex-wrap: wrap;
-		margin-bottom: 10px;
-
-		div.arrow-container {
-			width: 2em;
-			height: 64px;
-			position: relative;
-			cursor: pointer;
-
-			i {
-				border: 2px solid $defaultTextColor;
-				border-right: 0;
-				border-top: 0;
-				display: block;
-				height: 1em;
-				position: absolute;
-				transform: rotate(-135deg);
-				transform-origin: center;
-				width: 1em;
-				z-index: 4;
-				top: 22px;
-
-				-webkit-transition: transform 0.1s linear;
-				-moz-transition: transform 0.1s linear;
-				-ms-transition: transform 0.1s linear;
-				-o-transition: transform 0.1s linear;
-				transition: transform 0.1s linear;
-
-				&.active {
-					transform: rotate(-45deg);
-				}
-			}
-		}
-		div.thumb {
-			width: 64px;
-			height: 64px;
-			-webkit-box-shadow: $boxShadowLight;
-					box-shadow: $boxShadowLight;
-		}
-
-		div.info {
-			margin-left: 15px;
-			h4 {
-				font-size: 1.5rem;
-				a {
-					color: $defaultTextColor;
-					font-weight: 400;
-					&:hover { text-decoration: underline; }
-				}
-			}
-			span { display: block; }
-			span:nth-child(3) {
-				font-size: 0.9rem;
-			}
-		}
-
-		div.latest {
-			flex-grow: 1;
-			justify-content: flex-end;
-			display: flex;
-			margin-left: 15px;
-
-			span.no-files {
-				font-size: 1.5em;
-				color: #b1b1b1;
-				padding-top: 17px;
-			}
-
-			div.more {
-				width: 64px;
-				height: 64px;
-				background: white;
-				display: flex;
-				align-items: center;
-				padding: 10px;
-				text-align: center;
-				a {
-					line-height: 1rem;
-					color: $defaultTextColor;
-					&:hover { text-decoration: underline; }
-				}
-			}
-		}
-
-		div.details {
-			flex: 0 1 100%;
-			padding-left: 2em;
-			padding-top: 1em;
-			min-height: 50px;
-
-			.b-table {
-				padding: 2em 0em;
-
-				.table-wrapper {
-					-webkit-box-shadow: $boxShadowLight;
-							box-shadow: $boxShadowLight;
-				}
-			}
-		}
-	}
-
-	div.column > h2.subtitle { padding-top: 1px; }
-</style>
-<style lang="scss">
-	@import '~/assets/styles/_colors.scss';
-
-	.b-table {
-		.table-wrapper {
-			-webkit-box-shadow: $boxShadowLight;
-					box-shadow: $boxShadowLight;
-		}
-	}
-</style>
-
-
 <template>
 	<section class="hero is-fullheight dashboard">
 		<div class="hero-body">
@@ -234,18 +112,20 @@
 											</div>
 										</template>
 										<template slot="footer">
-											<div class="has-text-right">
-												<button :class="{ 'is-loading': album.isCreatingLink }"
-													class="button is-primary"
-													style="float: left"
-													@click="createLink(album)">Create new link</button>
-												{{ album.links.length }} / {{ config.maxLinksPerAlbum }} links created
-											</div>
+											<div class="wrapper">
+												<div class="has-text-right">
+													<button :class="{ 'is-loading': album.isCreatingLink }"
+														class="button is-primary"
+														style="float: left"
+														@click="createLink(album)">Create new link</button>
+													{{ album.links.length }} / {{ config.maxLinksPerAlbum }} links created
+												</div>
 
-											<div class="has-text-left">
-												<button class="button is-danger"
-													style="float: right"
-													@click="promptDeleteAlbum(album.id)">Delete album</button>
+												<div class="has-text-left">
+													<button class="button is-danger"
+														style="float: right"
+														@click="promptDeleteAlbum(album.id)">Delete album</button>
+												</div>
 											</div>
 										</template>
 									</b-table>
@@ -353,3 +233,124 @@ export default {
 	}
 };
 </script>
+<style lang="scss" scoped>
+	@import '~/assets/styles/_colors.scss';
+	div.view-container {
+		padding: 2rem;
+	}
+	div.album {
+		display: flex;
+		flex-wrap: wrap;
+		margin-bottom: 10px;
+
+		div.arrow-container {
+			width: 2em;
+			height: 64px;
+			position: relative;
+			cursor: pointer;
+
+			i {
+				border: 2px solid $defaultTextColor;
+				border-right: 0;
+				border-top: 0;
+				display: block;
+				height: 1em;
+				position: absolute;
+				transform: rotate(-135deg);
+				transform-origin: center;
+				width: 1em;
+				z-index: 4;
+				top: 22px;
+
+				-webkit-transition: transform 0.1s linear;
+				-moz-transition: transform 0.1s linear;
+				-ms-transition: transform 0.1s linear;
+				-o-transition: transform 0.1s linear;
+				transition: transform 0.1s linear;
+
+				&.active {
+					transform: rotate(-45deg);
+				}
+			}
+		}
+		div.thumb {
+			width: 64px;
+			height: 64px;
+			-webkit-box-shadow: $boxShadowLight;
+					box-shadow: $boxShadowLight;
+		}
+
+		div.info {
+			margin-left: 15px;
+			text-align: left;
+			h4 {
+				font-size: 1.5rem;
+				a {
+					color: $defaultTextColor;
+					font-weight: 400;
+					&:hover { text-decoration: underline; }
+				}
+			}
+			span { display: block; }
+			span:nth-child(3) {
+				font-size: 0.9rem;
+			}
+		}
+
+		div.latest {
+			flex-grow: 1;
+			justify-content: flex-end;
+			display: flex;
+			margin-left: 15px;
+
+			span.no-files {
+				font-size: 1.5em;
+				color: #b1b1b1;
+				padding-top: 17px;
+			}
+
+			div.more {
+				width: 64px;
+				height: 64px;
+				background: white;
+				display: flex;
+				align-items: center;
+				padding: 10px;
+				text-align: center;
+				a {
+					line-height: 1rem;
+					color: $defaultTextColor;
+					&:hover { text-decoration: underline; }
+				}
+			}
+		}
+
+		div.details {
+			flex: 0 1 100%;
+			padding-left: 2em;
+			padding-top: 1em;
+			min-height: 50px;
+
+			.b-table {
+				padding: 2em 0em;
+
+				.table-wrapper {
+					-webkit-box-shadow: $boxShadowLight;
+							box-shadow: $boxShadowLight;
+				}
+			}
+		}
+	}
+
+	div.column > h2.subtitle { padding-top: 1px; }
+</style>
+<style lang="scss">
+	@import '~/assets/styles/_colors.scss';
+
+	.b-table {
+		.table-wrapper {
+			-webkit-box-shadow: $boxShadowLight;
+					box-shadow: $boxShadowLight;
+		}
+	}
+</style>
diff --git a/src/site/pages/dashboard/index.vue b/src/site/pages/dashboard/index.vue
index 9419fa1..84b0c45 100644
--- a/src/site/pages/dashboard/index.vue
+++ b/src/site/pages/dashboard/index.vue
@@ -1,7 +1,3 @@
-<style lang="scss" scoped>
-	.albumsModal .columns .column { padding: .25rem; }
-</style>
-
 <template>
 	<section class="hero is-fullheight dashboard">
 		<div class="hero-body">
@@ -103,3 +99,6 @@ export default {
 	}
 };
 </script>
+<style lang="scss" scoped>
+	.albumsModal .columns .column { padding: .25rem; }
+</style>
diff --git a/src/site/pages/faq.vue b/src/site/pages/faq.vue
index ed12fd5..bd93086 100644
--- a/src/site/pages/faq.vue
+++ b/src/site/pages/faq.vue
@@ -1,59 +1,45 @@
-<style lang="scss" scoped>
-	@import '~/assets/styles/_colors.scss';
-	article.message { background-color: #ffffff; }
-</style>
-
 <template>
-	<section id="login"
-		class="hero is-fullheight">
-		<Navbar />
-		<div class="hero-body">
-			<div class="container has-text-left">
-				<h2 class="subtitle">What is lolisafe?</h2>
-				<article class="message">
-					<div class="message-body">
-						lolisafe is an easy to use, open source and completely free file upload service. We accept your files, photos, documents, anything, and give you back a shareable link for you to send to others.
-					</div>
-				</article>
+	<div class="container has-text-left">
+		<h2 class="subtitle">What is lolisafe?</h2>
+		<article class="message">
+			<div class="message-body">
+				lolisafe is an easy to use, open source and completely free file upload service. We accept your files, photos, documents, anything, and give you back a shareable link for you to send to others.
+			</div>
+		</article>
 
-				<h2 class="subtitle">Can I run my own lolisafe?</h2>
-				<article class="message">
-					<div class="message-body">
-						Definitely. Head to <a target="_blank" href="https://github.com/WeebDev/lolisafe">our GitHub repo</a> and follow the instructions to clone, build and deploy it by yourself. It's super easy too!
-					</div>
-				</article>
+		<h2 class="subtitle">Can I run my own lolisafe?</h2>
+		<article class="message">
+			<div class="message-body">
+				Definitely. Head to <a target="_blank" href="https://github.com/WeebDev/lolisafe">our GitHub repo</a> and follow the instructions to clone, build and deploy it by yourself. It's super easy too!
+			</div>
+		</article>
 
-				<h2 class="subtitle">How can I keep track of my uploads?</h2>
-				<article class="message">
-					<div class="message-body">
-						Simply create a user on the site and every upload will be associated with your account, granting you access to your uploaded files through our dashboard.
-					</div>
-				</article>
+		<h2 class="subtitle">How can I keep track of my uploads?</h2>
+		<article class="message">
+			<div class="message-body">
+				Simply create a user on the site and every upload will be associated with your account, granting you access to your uploaded files through our dashboard.
+			</div>
+		</article>
 
-				<h2 class="subtitle">What are albums?</h2>
-				<article class="message">
-					<div class="message-body">
-						Albums are a simple way of sorting uploads together. Right now you can create albums through the dashboard and use them only with <a target="_blank" href="https://chrome.google.com/webstore/detail/loli-safe-uploader/enkkmplljfjppcdaancckgilmgoiofnj">our chrome extension</a> which will enable you to <strong>right click -&gt; send to lolisafe</strong> or to a desired album if you have any.
-					</div>
-				</article>
+		<h2 class="subtitle">What are albums?</h2>
+		<article class="message">
+			<div class="message-body">
+				Albums are a simple way of sorting uploads together. Right now you can create albums through the dashboard and use them only with <a target="_blank" href="https://chrome.google.com/webstore/detail/loli-safe-uploader/enkkmplljfjppcdaancckgilmgoiofnj">our chrome extension</a> which will enable you to <strong>right click -&gt; send to lolisafe</strong> or to a desired album if you have any.
+			</div>
+		</article>
 
-				<h2 class="subtitle">Why should I use this?</h2>
-				<article class="message">
-					<div class="message-body">
-						There are too many file upload services out there, and a lot of them rely on the foundations of pomf which is ancient. In a desperate and unsuccessful attempt of finding a good file uploader that's easily extendable, lolisafe was born. We give you control over your files, we give you a way to sort your uploads into albums for ease of access and we give you an api to use with ShareX or any other thing that let's you make POST requests.
-					</div>
-				</article>
+		<h2 class="subtitle">Why should I use this?</h2>
+		<article class="message">
+			<div class="message-body">
+				There are too many file upload services out there, and a lot of them rely on the foundations of pomf which is ancient. In a desperate and unsuccessful attempt of finding a good file uploader that's easily extendable, lolisafe was born. We give you control over your files, we give you a way to sort your uploads into albums for ease of access and we give you an api to use with ShareX or any other thing that let's you make POST requests.
 			</div>
-		</div>
-	</section>
+		</article>
+	</div>
 </template>
 
 <script>
-import Navbar from '~/components/navbar/Navbar.vue';
-
 export default {
 	name: 'Faq',
-	components: { Navbar },
 	data() {
 		return {};
 	},
@@ -62,3 +48,7 @@ export default {
 	}
 };
 </script>
+<style lang="scss" scoped>
+	@import '~/assets/styles/_colors.scss';
+	article.message { background-color: #ffffff; }
+</style>
diff --git a/src/site/pages/index.vue b/src/site/pages/index.vue
index fe54340..0617098 100644
--- a/src/site/pages/index.vue
+++ b/src/site/pages/index.vue
@@ -1,85 +1,32 @@
-<style lang="scss" scoped>
-	@import "~/assets/styles/_colors.scss";
-	div.home {
-		color: $textColor;
-		.columns {
-			.column {
-				&.centered {
-					display: flex;
-					align-items: center;
-				}
-			}
-		}
-
-		h4 {
-			color: $textColorHighlight;
-			margin-bottom: 1em;
-		}
-
-		p {
-			font-size: 1.25em;
-			font-weight: 600;
-			line-height: 1.5;
-
-			strong {
-				color: $textColorHighlight;
-			}
-		}
-
-		div.background {
-			position: fixed;
-			top: 0;
-			left: 0;
-			background: no-repeat scroll 50% 50%;
-			background-size: cover;
-			background-image: url('~assets/images/background.jpg');
-			z-index: -1;
-			height: 100vh;
-			width: 100%;
-			pointer-events: none;
-		}
-	}
-</style>
-
 <template>
-	<div class="home">
-		<section class="hero is-fullheight has-text-centered">
-			<Navbar :isWhite="true" />
-			<div class="hero-body">
-				<div class="container">
-					<div class="columns">
-						<div class="column is-3 is-offset-2">
-							<div class="logo">
-								<Logo />
-							</div>
-						</div>
-						<div class="column is-5 centered">
-							<div class="content-wrapper">
-								<h4>Blazing fast file uploader. For real.</h4>
-								<p>
-									A <strong>modern</strong> and <strong>self-hosted</strong> file upload service that can handle anything you throw at it. Fast uploads, file manager and sharing capabilities all crafted with a beautiful user experience in mind.
-								</p>
-							</div>
-						</div>
+	<div>
+		<div class="container">
+			<div class="columns">
+				<div class="column is-3 is-offset-2">
+					<div class="logo">
+						<Logo />
 					</div>
-					<div class="spacer mt7" />
-					<Uploader v-if="config.publicMode || (!config.publicMode && loggedIn)" />
-					<div v-else>
-						This site has disabled public uploads. You need an account.
+				</div>
+				<div class="column is-5 centered">
+					<div class="content-wrapper">
+						<h4>Blazing fast file uploader. <br>For real.</h4>
+						<p>
+							A <strong>modern</strong> and <strong>self-hosted</strong> file upload service that can handle anything you throw at it. Fast uploads, file manager and sharing capabilities all crafted with a beautiful user experience in mind.
+						</p>
 					</div>
 				</div>
 			</div>
-			<div class="hero-foot">
-				<div class="container">
-					<Links />
-				</div>
+		</div>
+		<div class="container">
+			<Uploader v-if="config.publicMode || (!config.publicMode && loggedIn)" />
+			<div v-else>
+				This site has disabled public uploads. You need an account.
 			</div>
-		</section>
+			<Links />
+		</div>
 	</div>
 </template>
-
 <script>
-import Navbar from '~/components/navbar/Navbar.vue';
 import Logo from '~/components/logo/Logo.vue';
 import Uploader from '~/components/uploader/Uploader.vue';
 import Links from '~/components/home/links/Links.vue';
@@ -87,7 +34,6 @@ import Links from '~/components/home/links/Links.vue';
 export default {
 	name: 'Home',
 	components: {
-		Navbar,
 		Logo,
 		Uploader,
 		Links
@@ -105,3 +51,32 @@ export default {
 	}
 };
 </script>
+<style lang="scss" scoped>
+	@import "~/assets/styles/_colors.scss";
+	.container {
+		color: $textColor;
+		.columns {
+			.column {
+				&.centered {
+					display: flex;
+					align-items: center;
+				}
+			}
+		}
+
+		h4 {
+			color: $textColorHighlight;
+			margin-bottom: 1em;
+		}
+
+		p {
+			font-size: 1.25em;
+			font-weight: 600;
+			line-height: 1.5;
+
+			strong {
+				color: $textColorHighlight;
+			}
+		}
+	}
+</style>
diff --git a/src/site/pages/login.vue b/src/site/pages/login.vue
index d4f376f..cb00a9c 100644
--- a/src/site/pages/login.vue
+++ b/src/site/pages/login.vue
@@ -1,21 +1,15 @@
-<style lang="scss" scoped>
-	@import '~/assets/styles/_colors.scss';
-</style>
-
 <template>
-	<section id="login"
-		class="hero is-fullheight">
-		<Navbar/>
+	<section class="hero is-fullheight is-login">
 		<div class="hero-body">
 			<div class="container">
 				<h1 class="title">
 					Dashboard Access
 				</h1>
-				<h2 class="subtitle">
-					Login or register
+				<h2 class="subtitle mb5">
+					Login to access your files and folders
 				</h2>
 				<div class="columns">
-					<div class="column is-4">
+					<div class="column is-4 is-offset-4">
 						<b-field>
 							<b-input v-model="username"
 								type="text"
@@ -35,9 +29,8 @@
 								to="/register"
 								class="is-text">Don't have an account?</router-link>
 							<span v-else>Registration is closed at the moment</span>
-							<a id="loginBtn"
-								class="button"
-								@click="login">Log in</a>
+							<button class="button is-primary big ml1"
+								@click="login">login</button>
 						</p>
 					</div>
 				</div>
@@ -72,11 +65,8 @@
 </template>
 
 <script>
-import Navbar from '~/components/navbar/Navbar.vue';
-
 export default {
 	name: 'Login',
-	components: { Navbar },
 	data() {
 		return {
 			username: null,
diff --git a/src/site/pages/register.vue b/src/site/pages/register.vue
index b780ec2..2f155c0 100644
--- a/src/site/pages/register.vue
+++ b/src/site/pages/register.vue
@@ -1,21 +1,15 @@
-<style lang="scss" scoped>
-	@import '~/assets/styles/_colors.scss';
-</style>
-
 <template>
-	<section id="register"
-		class="hero is-fullheight">
-		<Navbar />
+	<section class="hero is-fullheight is-register">
 		<div class="hero-body">
 			<div class="container">
 				<h1 class="title">
 					Dashboard Access
 				</h1>
-				<h2 class="subtitle">
+				<h2 class="subtitle mb5">
 					Register for a new account
 				</h2>
 				<div class="columns">
-					<div class="column is-4">
+					<div class="column is-4 is-offset-4">
 						<b-field>
 							<b-input v-model="username"
 								type="text"
@@ -38,9 +32,9 @@
 						<p class="control has-addons is-pulled-right">
 							<router-link to="/login"
 								class="is-text">Already have an account?</router-link>
-							<a :class="{ 'is-loading': isLoading }"
-								class="button is-themed"
-								@click="register">Register</a>
+							<button class="button is-primary big ml1"
+								:disabled="isLoading"
+								@click="register">Register</button>
 						</p>
 					</div>
 				</div>
@@ -50,11 +44,8 @@
 </template>
 
 <script>
-import Navbar from '~/components/navbar/Navbar.vue';
-
 export default {
 	name: 'Register',
-	components: { Navbar },
 	data() {
 		return {
 			username: null,
@@ -74,6 +65,13 @@ export default {
 	methods: {
 		async register() {
 			if (this.isLoading) return;
+			if (!this.username || !this.password || !this.rePassword) {
+				this.$store.dispatch('alert', {
+					text: 'Please fill all fields before attempting to register.',
+					error: true
+				});
+				return;
+			}
 			if (this.password !== this.rePassword) {
 				this.$store.dispatch('alert', {
 					text: 'Passwords don\'t match',