diff --git a/assets/components/entities/entity.vue b/assets/components/entities/entity.vue
index 51a759b8..b1dcf1d6 100644
--- a/assets/components/entities/entity.vue
+++ b/assets/components/entities/entity.vue
@@ -168,7 +168,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import 'theme';
+@import 'breakpoints';
 
 .info {
 	display: flex;
@@ -231,7 +231,7 @@ export default {
 	display: none;
 }
 
-@media(max-width: $breakpoint0) {
+@media(max-width: $breakpoint-micro) {
 	.logo-parent,
 	.link-child .icon {
 		display: none;
diff --git a/assets/components/header/header.vue b/assets/components/header/header.vue
index 3575becc..e998eb46 100644
--- a/assets/components/header/header.vue
+++ b/assets/components/header/header.vue
@@ -178,7 +178,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import 'theme';
+@import 'breakpoints';
 
 .header {
     height: 3rem;
@@ -320,7 +320,7 @@ export default {
     }
 }
 
-@media(max-width: $breakpoint2) {
+@media(max-width: $breakpoint-kilo) {
     .search-full {
         display: none;
     }
@@ -334,7 +334,7 @@ export default {
     }
 }
 
-@media(max-width: $breakpoint0) {
+@media(max-width: $breakpoint-micro) {
     .nav {
         display: none;
     }
@@ -347,4 +347,10 @@ export default {
         padding: 0 0 0 .5rem;
     }
 }
+
+@media(max-width: $breakpoint-nano) {
+	.header-toggles {
+		display: none;
+	}
+}
 </style>
diff --git a/webpack.config.babel.js b/webpack.config.babel.js
index 52e2650a..2f1f93eb 100644
--- a/webpack.config.babel.js
+++ b/webpack.config.babel.js
@@ -67,6 +67,7 @@ export default {
 	resolve: {
 		alias: {
 			theme: path.join(__dirname, 'assets/css/_theme.scss'),
+			breakpoints: path.join(__dirname, 'assets/css/_breakpoints.scss'),
 			config: path.join(__dirname, `assets/js/config/${process.env.NODE_ENV || 'default'}.js`),
 		},
 	},