diff --git a/components/_preview.hbs b/components/_preview.hbs
index 61a5078..2fd5ffd 100644
--- a/components/_preview.hbs
+++ b/components/_preview.hbs
@@ -4,18 +4,6 @@
         <meta charset="UTF-8">
         <link rel="stylesheet" href="{{ path '/main.css' }}">
         <title>Preview</title>
-		<script>
-			document.addEventListener("DOMContentLoaded", function(){
-					Array.from(document.getElementsByClassName('LP-Main__Sidebar')).forEach(function(element){
-							element.classList.add('LP-Main__Sidebar--hidden')
-					})
-					setTimeout(function(){
-						Array.from(document.getElementsByClassName('LP-Main__Sidebar')).forEach(function(element){
-							element.classList.remove('LP-Main__Sidebar--hidden')
-					})
-				}, 500)
-			})
-		</script>
     </head>
     <body>
         {{{ yield }}}
diff --git a/components/main.scss b/components/main.scss
index ee3c842..759217e 100644
--- a/components/main.scss
+++ b/components/main.scss
@@ -100,16 +100,6 @@ body{
 }
 
 @media(max-width: $-viewport-toggle-sidebar){
-	@keyframes slide_out_siedebar{
-		from{left: -1 * $-sidebar-width;}
-		to{left: 0;}
-	}
-	
-	@keyframes slide_in_siedebar{
-		from{left: 0;}
-		to{left: -1 * $-sidebar-width;}
-	}
-
 	.LP-Wrapper__Site{
 		grid-template-columns: 0 1fr;
 	}
@@ -123,6 +113,7 @@ body{
 		height: 100vh;
 		top: 60px;
 		border-right: 1px solid $-light-brown;
+		transition: left 0.3s;
 
 		&--hidden{
 			visibility: hidden;
@@ -130,14 +121,11 @@ body{
 	}
 
 	#toggle_sidebar:checked ~ .LP-Main__Sidebar{
-		animation-name: slide_out_siedebar;
-		animation-duration: .3s;
 		left: 0 ;
 	}
 
 	#toggle_sidebar ~ .LP-Main__Sidebar{
-		animation-name: slide_in_siedebar;
-		animation-duration: .3s;
+		left: -1 * $-sidebar-width;
 	}
 
 	.LP-Menu__TriggerLabel{
