diff --git a/assets/css/extra.css b/assets/css/extra.css
index 07b78b9..377c3f1 100644
--- a/assets/css/extra.css
+++ b/assets/css/extra.css
@@ -3,6 +3,7 @@
 	--text: rgb(45, 45, 45);
 	--box-main: #eef4f3;
 	--box-toggle: rgb(215 238 233);
+	--box-separation: rgb(215 238 233);
 	--box-toggleOn: rgb(28 232 138);
 	--item-bg: #dddddd;
 	--box-shadow: none;
@@ -16,20 +17,22 @@
 }
 
 :root[theme="dark"] {
-	--background: rgb(40, 40, 40);
-	--text: white;
-	--box-main: rgb(80, 80, 80);
-	--box-toggle: rgb(70, 70, 70);
-	--box-toggleOn: rgb(28 232 138);
-	--item-bg: rgb(75, 75, 75);
+	--background: #121212;
+	--text: rgb(229, 229, 229);
+	--box-main: #1d1d1d;
+	--box-toggle: #191919;
+	--box-separation: #2e2e2e;
+	--box-toggleOn: #2e2e2e;
+	--item-bg: #191919;
 	--box-shadow: none;
-	--select: rgb(127, 253, 127);
-	--greenBtn: #6acd29;
-	--greenBtn-bottom: #4c8824;
-	--redBtn: #d64d4f;
-	--redBtn-bottom: #854243;
+	--select: rgb(68 214 141);
+	--greenBtn: #24D166;
+	--greenBtn-bottom: #3e6c20;
+	--redBtn: #c82b2d;
+	--redBtn-bottom: #803334;
 	--blueBtn: rgb(80, 128, 230);
 	--blueBtn-bottom: rgb(44, 78, 180);
+	--border: none;
 }
 
 :root[theme="frappe"] {
@@ -37,6 +40,7 @@
 	--text: #e2e8ff;
 	--box-main: #303446;
 	--box-toggle: #414559;
+	--box-separation: #414559;
 	--box-toggleOn: #607dc1;
 	--item-bg: #414559;
 	--select: #8caaee;
@@ -52,6 +56,7 @@
 	--text: #d2d6df;
 	--box-main: #4d515d;
 	--box-toggle: #2f333d;
+	--box-separation: #2f333d;
 	--box-toggleOn: #13a3b7;
 	--item-bg: #4d515d;
 	--select: #57b6c2;
@@ -67,6 +72,7 @@
 	--text: #00ff41;
 	--box-main: #0c2216;
 	--box-toggle: #214338;
+	--box-separation: #214338;
 	--box-toggleOn: #24782e;
 	--item-bg: #214338;
 	--select: #00ff41;
@@ -83,6 +89,7 @@
 	--text: #292d31;
 	--box-main: #ffffff;
 	--box-toggle: #f3f3f3;
+	--box-separation: #f3f3f3;
 	--box-toggleOn: #cce5ff;
 	--item-bg: #3a66d150;
 	--select: #cce5ff;
@@ -99,6 +106,7 @@
 	--text: #4c4f69;
 	--box-main: #eff1f5;
 	--box-toggle: #e6e9ef;
+	--box-separation: #e6e9ef;
 	--box-toggleOn: #cce5ff;
 	--item-bg: #bcc0cc;
 	--select: #cce5ff;
@@ -115,6 +123,7 @@
 	--text: #a4b1b3;
 	--box-main: #003745;
 	--box-toggle: #2e4c52;
+	--box-separation: #2e4c52;
 	--box-toggleOn: #005a6f;
 	--item-bg: #003745;
 	--select: #2aa198;
diff --git a/assets/css/index.css b/assets/css/index.css
index 5b105f8..77b6f20 100644
--- a/assets/css/index.css
+++ b/assets/css/index.css
@@ -13,6 +13,7 @@
 	--text: rgb(45, 45, 45);
 	--box-main: #eef4f3;
 	--box-toggle: rgb(215 238 233);
+	--box-separation: rgb(215 238 233);
 	--box-toggleOn: rgb(28 232 138);
 	--item-bg: #dddddd;
 	--box-shadow: none;
@@ -26,13 +27,13 @@
 }
 
 :root[theme="dark"] {
-	--background: #141d28;
-	--text: white;
-	--box-main: #161b26;
-	--box-toggle: #141924;
-	--box-separation: #1c2331;
-	--box-toggleOn: #1d2835;
-	--item-bg: rgb(75, 75, 75);
+	--background: #121212;
+	--text: rgb(229, 229, 229);
+	--box-main: #1d1d1d;
+	--box-toggle: #191919;
+	--box-separation: #2e2e2e;
+	--box-toggleOn: #2e2e2e;
+	--item-bg: #191919;
 	--box-shadow: none;
 	--select: rgb(68 214 141);
 	--greenBtn: #24D166;
@@ -41,6 +42,7 @@
 	--redBtn-bottom: #803334;
 	--blueBtn: rgb(80, 128, 230);
 	--blueBtn-bottom: rgb(44, 78, 180);
+	--border: none;
 }
 
 :root[theme="frappe"] {
@@ -48,6 +50,7 @@
 	--text: #e2e8ff;
 	--box-main: #303446;
 	--box-toggle: #414559;
+	--box-separation: #414559;
 	--box-toggleOn: #607dc1;
 	--item-bg: #414559;
 	--select: #8caaee;
@@ -63,6 +66,7 @@
 	--text: #d2d6df;
 	--box-main: #4d515d;
 	--box-toggle: #2f333d;
+	--box-separation: #2f333d;
 	--box-toggleOn: #13a3b7;
 	--item-bg: #4d515d;
 	--select: #57b6c2;
@@ -78,6 +82,7 @@
 	--text: #00ff41;
 	--box-main: #0c2216;
 	--box-toggle: #214338;
+	--box-separation: #214338;
 	--box-toggleOn: #24782e;
 	--item-bg: #214338;
 	--select: #00ff41;
@@ -94,6 +99,7 @@
 	--text: #292d31;
 	--box-main: #ffffff;
 	--box-toggle: #f3f3f3;
+	--box-separation: #f3f3f3;
 	--box-toggleOn: #cce5ff;
 	--item-bg: #3a66d150;
 	--select: #cce5ff;
@@ -110,6 +116,7 @@
 	--text: #4c4f69;
 	--box-main: #eff1f5;
 	--box-toggle: #e6e9ef;
+	--box-separation: #e6e9ef;
 	--box-toggleOn: #cce5ff;
 	--item-bg: #bcc0cc;
 	--select: #cce5ff;
@@ -126,6 +133,7 @@
 	--text: #a4b1b3;
 	--box-main: #003745;
 	--box-toggle: #2e4c52;
+	--box-separation: #2e4c52;
 	--box-toggleOn: #005a6f;
 	--item-bg: #003745;
 	--select: #2aa198;
@@ -173,15 +181,12 @@ body {
 	background-color: rgb(137, 226, 255);
 	color: rgb(35, 35, 35);
 	border: none;
-	border-bottom: 4px solid rgb(63, 169, 205);
 	padding: 10px;
 	border-radius: 10px;
 	cursor: pointer;
 	position: relative;
 }
 #tryBtn:active {
-	top: 4px;
-	margin-bottom: 4px;
 	border: none;
 }
 
@@ -251,7 +256,7 @@ body {
 	color: var(--text);
 	margin: 10px auto;
 	border-radius: 10px;
-	padding: 10px;
+	padding: 20px;
 	align-items: center;
 	justify-content: space-between;
 }
@@ -262,7 +267,7 @@ body {
 	height: 25px;
 	background-color: var(--item-bg);
 	color: var(--text);
-	padding: 10px 25px;
+	padding: 16px 25px;
 	border-radius: 15px;
 	align-items: center;
 	justify-content: space-between;
@@ -283,11 +288,12 @@ body {
 .title {
 	padding: 12px 10px;
 	border-radius: 8px;
+	margin-left: 4px;
 	border: none;
 	outline: none;
 	width: 50%;
 	text-align: center;
-	background-color: var(--box-toggle);
+	background-color: var(--box-separation);
 	color: var(--text);
 	font-size: large;
 	font-family: "Ubuntu";
@@ -315,8 +321,8 @@ body {
 }
 .itemClose {
 	position: absolute;
-	top: 5px;
-	right: 5px;
+	top: 8px;
+	right: 8px;
 	cursor: pointer;
 	cursor: pointer;
 	width: 20px;
@@ -329,9 +335,9 @@ body {
 }
 
 #closeHidden {
-	bottom: 5px;
+	bottom: 7px;
 	position: absolute;
-	right: 5px;
+	right: 10px;
 	cursor: pointer;
 	cursor: pointer;
 	width: 20px;
@@ -350,8 +356,9 @@ body {
 	background-color: var(--box-main);
 	border-radius: 15px;
 	width: 80%;
-	padding: 10px 10px 15px 10px;
+	padding: 10px 10px 25px 10px;
 	color: var(--text);
+	border: var(--border);
 }
 
 #videoBox, #audioBox {
@@ -393,7 +400,7 @@ body {
 .toggleBtn {
 	width: 50%;
 	font-size: x-large;
-	border: none;
+	border: var(--border);
 	background-color: var(--box-toggle);
 	border-radius: 10px;
 	cursor: pointer;
@@ -439,6 +446,10 @@ body {
 	width: 400px;
 }
 
+.formatSelect {
+	margin-right: 4px;
+}
+
 label {
 	position: relative;
 	top: 3px;
@@ -468,7 +479,6 @@ input[type="number"]::-webkit-outer-spin-button {
 	background-color: var(--greenBtn);
 	color: white;
 	border: none;
-	border-bottom: 5.5px solid var(--greenBtn-bottom);
 	font-size: large;
 	cursor: pointer;
 	display: inline-block;
@@ -476,9 +486,8 @@ input[type="number"]::-webkit-outer-spin-button {
 	position: relative;
 }
 .submitBtn:active {
+	background-color: var(--greenBtn-bottom);
 	border: none;
-	top: 5.5px;
-	margin-bottom: 5.5px;
 }
 
 .resumeBtn {
@@ -487,7 +496,6 @@ input[type="number"]::-webkit-outer-spin-button {
 	background-color: rgb(64, 227, 64);
 	color: white;
 	border: none;
-	border-bottom: 4px solid rgb(54, 205, 54);
 	cursor: pointer;
 	display: inline-block;
 	outline: none;
@@ -568,7 +576,6 @@ button {
 	color: white;
 	background-color: var(--blueBtn);
 	border: none;
-	border-bottom: 4px solid var(--blueBtn-bottom);
 	position: relative;
 	padding: 15px;
 	border-radius: 10px;
@@ -590,8 +597,7 @@ button {
 }
 
 #extractBtn:active, .blueBtn:active {
-	top: 4px;
-	margin-bottom: 12px;
+	background-color: var(--blueBtn-bottom);
 	border: none;
 }
 
@@ -599,7 +605,6 @@ button {
 	color: white;
 	background-color: var(--redBtn);
 	border: none;
-	border-bottom: 5px solid var(--redBtn-bottom);
 	position: relative;
 	padding: 15px;
 	border-radius: 10px;
@@ -609,8 +614,7 @@ button {
 }
 
 .advancedToggle:active {
-	top: 5px;
-	margin-bottom: 13px;
+	background-color: var(--blueBtn-bottom);
 	border: none;
 }
 
@@ -887,4 +891,9 @@ body::-webkit-scrollbar-thumb {
 	opacity: 0.8;
 }
 
-/* End */
\ No newline at end of file
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+/* End */
diff --git a/assets/images/close.png b/assets/images/close.png
index 00f9132..a0afcf2 100644
Binary files a/assets/images/close.png and b/assets/images/close.png differ
diff --git a/html/index.html b/html/index.html
index 4fd7061..6c381e4 100644
--- a/html/index.html
+++ b/html/index.html
@@ -47,7 +47,7 @@
         <a id="playlistWin" class="menuItem">Download Playlist</a>
         <!-- <a id="newPlaylistWin" class="menuItem">New Playlist</a> -->
         <a id="preferenceWin" class="menuItem">Preferences</a>
-            <a id="compressorWin" class="menuItem">Compressor</a>
+        <a id="compressorWin" class="menuItem">Compressor</a>
         <a id="aboutWin" class="menuItem">About</a>
         <span id="themeTxt" class="menuItem">Theme:</span>
         <select name="themeToggle" id="themeToggle">
@@ -93,48 +93,54 @@
         </div>
         <p id="title">Title </p>
 
-        <!-- Video tab -->
-        <div id="videoList">
-            <div class="separationBox">
-                <h2 id="videoHeader">Video</h2>
-                <label class="formatSelect">Select Format </label>
-                <select id="videoFormatSelect" class="select">
-                </select>
-                <br>
-                <input type="hidden" name="url" class="url" id="url">
-
-                <!-- Audio options for video -->
-                <div id="audioForVideo">
-                    <h2 id="audioHeader">Audio</h2>
-                    <label class="formatSelect">Select Audio Format </label>
-                    <select id="audioForVideoFormatSelect" class="select">
+        <div class="videoAudioContainer">
+            <!-- Video tab -->
+            <div id="videoList">
+                <div class="separationBox">
+                    <h2 id="videoHeader">Video</h2>
+                    <label class="formatSelect">Select Format </label>
+                    <select id="videoFormatSelect" class="select">
                     </select>
                     <br>
-                    <input type="hidden" name="url" class="url">
+                    <input type="hidden" name="url" class="url" id="url">
+
+                    <!-- Audio options for video -->
+                    <div id="audioForVideo">
+                        <h2 id="audioHeader">Audio</h2>
+                        <label class="formatSelect">Select Audio Format </label>
+                        <select id="audioForVideoFormatSelect" class="select">
+                        </select>
+                        <br>
+                        <input type="hidden" name="url" class="url">
+                    </div>
+                    <br>
                 </div>
-                <br>
-            </div>
 
 
-            <br>
-            <button class="submitBtn" id="videoDownload">Download</button>
-            <button id="advancedVideoToggle" class="advancedToggle" onClick="advancedToggle()">More options</button>
-        </div>
-
-        <!-- Audio tab -->
-        <div id="audioList">
-            <div id="audioPresent">
-                <label class="formatSelect">Select Format </label>
-                <select id="audioFormatSelect" class="select">
-                </select>
                 <br>
-                <input type="hidden" name="url" class="url">
-                <button class="submitBtn" id="audioDownload">Download</button>
-                <button id="advancedAudioToggle" class="advancedToggle" onClick="advancedToggle()">More options</button>
+                <button class="submitBtn" id="videoDownload">Download</button>
+                <button id="advancedVideoToggle" class="blueBtn" onClick="advancedToggle()">More options</button>
+            </div>
+
+            <!-- Audio tab -->
+            <div id="audioList">
+                <div id="audioPresent">
+                    <label class="formatSelect">Select Format </label>
+                    <select id="audioFormatSelect" class="select">
+                    </select>
+                    <br>
+                    <input type="hidden" name="url" class="url">
+                    <button class="submitBtn" id="audioDownload">Download</button>
+                    <button id="advancedAudioToggle" class="blueBtn" onClick="advancedToggle()">More options</button>
+                </div>
             </div>
         </div>
 
         <div id="advanced">
+            <!-- <div class="advancedItem">
+                <p>Custom yt-dlp arguments</p>
+                <input type="text" id="argInput">
+            </div> -->
             <div class="advancedItem">
                 <span id="quitTxt">Close app when download finishes</span>
                 <input type="checkbox" id="quitChecked" class="cb">
diff --git a/html/playlist.html b/html/playlist.html
index 1216679..4ec4748 100644
--- a/html/playlist.html
+++ b/html/playlist.html
@@ -135,7 +135,7 @@
         </div>
 
         <br>
-        <button id="advancedToggle" class="advancedToggle">More options</button>
+        <button id="advancedToggle" class="blueBtn">More options</button>
         <br>
 
         <!-- Hidden -->
diff --git a/src/common.js b/src/common.js
index a07b4c3..ffdb053 100644
--- a/src/common.js
+++ b/src/common.js
@@ -38,8 +38,31 @@ getId("menuIcon").addEventListener("click", () => {
 });
 
 getId("themeToggle").addEventListener("change", () => {
-	document.documentElement.setAttribute("theme", getId("themeToggle").value);
 	localStorage.setItem("theme", getId("themeToggle").value);
+
+	const x = window.innerWidth;
+	const y = 0;
+	const maxRadius = Math.hypot(window.innerWidth, window.innerHeight);
+
+	const transition = document.startViewTransition(() => {
+		document.documentElement.setAttribute("theme", getId("themeToggle").value);
+	});
+
+	transition.ready.then(() => {
+	  document.documentElement.animate(
+		{
+		  clipPath: [
+			`circle(0px at ${x}px ${y}px)`,
+			`circle(${maxRadius}px at ${x}px ${y}px)`
+		  ]
+		},
+		{
+		  duration: 1100,
+		  easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
+		  pseudoElement: '::view-transition-new(root)'
+		}
+	  );
+	});
 });
 
 const storageTheme = localStorage.getItem("theme");