diff --git a/Modules/Website/db.yml b/Modules/Website/db.yml
new file mode 100644
index 0000000..2304464
--- /dev/null
+++ b/Modules/Website/db.yml
@@ -0,0 +1,19 @@
+
+
+Task:
+    id: integer
+    timestamp: ts
+    hash: string
+    url: string
+    audio_only: bool
+    status: int
+    format: optional string
+
+
+File:
+    id: integer
+    hash: String
+    timestamp: ts
+    format: String
+    filename: String
+    local_path: String
diff --git a/Modules/Website/index.html b/Modules/Website/index.html
index 3162007..e908401 100644
--- a/Modules/Website/index.html
+++ b/Modules/Website/index.html
@@ -11470,16 +11470,45 @@ var $mdgriffith$elm_ui$Internal$Model$Bottom = {$: 'Bottom'};
 var $mdgriffith$elm_ui$Element$alignBottom = $mdgriffith$elm_ui$Internal$Model$AlignY($mdgriffith$elm_ui$Internal$Model$Bottom);
 var $mdgriffith$elm_ui$Internal$Model$Right = {$: 'Right'};
 var $mdgriffith$elm_ui$Element$alignRight = $mdgriffith$elm_ui$Internal$Model$AlignX($mdgriffith$elm_ui$Internal$Model$Right);
-var $mdgriffith$elm_ui$Element$Background$color = function (clr) {
+var $mdgriffith$elm_ui$Element$rgba = $mdgriffith$elm_ui$Internal$Model$Rgba;
+var $mdgriffith$elm_ui$Internal$Model$boxShadowClass = function (shadow) {
+	return $elm$core$String$concat(
+		_List_fromArray(
+			[
+				shadow.inset ? 'box-inset' : 'box-',
+				$mdgriffith$elm_ui$Internal$Model$floatClass(shadow.offset.a) + 'px',
+				$mdgriffith$elm_ui$Internal$Model$floatClass(shadow.offset.b) + 'px',
+				$mdgriffith$elm_ui$Internal$Model$floatClass(shadow.blur) + 'px',
+				$mdgriffith$elm_ui$Internal$Model$floatClass(shadow.size) + 'px',
+				$mdgriffith$elm_ui$Internal$Model$formatColorClass(shadow.color)
+			]));
+};
+var $mdgriffith$elm_ui$Internal$Flag$shadows = $mdgriffith$elm_ui$Internal$Flag$flag(19);
+var $mdgriffith$elm_ui$Element$Border$shadow = function (almostShade) {
+	var shade = {blur: almostShade.blur, color: almostShade.color, inset: false, offset: almostShade.offset, size: almostShade.size};
 	return A2(
 		$mdgriffith$elm_ui$Internal$Model$StyleClass,
-		$mdgriffith$elm_ui$Internal$Flag$bgColor,
+		$mdgriffith$elm_ui$Internal$Flag$shadows,
 		A3(
-			$mdgriffith$elm_ui$Internal$Model$Colored,
-			'bg-' + $mdgriffith$elm_ui$Internal$Model$formatColorClass(clr),
-			'background-color',
-			clr));
+			$mdgriffith$elm_ui$Internal$Model$Single,
+			$mdgriffith$elm_ui$Internal$Model$boxShadowClass(shade),
+			'box-shadow',
+			$mdgriffith$elm_ui$Internal$Model$formatBoxShadow(shade)));
 };
+var $author$project$Files$cardShadow = $mdgriffith$elm_ui$Element$Border$shadow(
+	{
+		blur: 8,
+		color: A4($mdgriffith$elm_ui$Element$rgba, 0, 0, 0, 0.2),
+		offset: _Utils_Tuple2(0, 4),
+		size: 4
+	});
+var $author$project$Files$cardShadowOver = $mdgriffith$elm_ui$Element$Border$shadow(
+	{
+		blur: 16,
+		color: A4($mdgriffith$elm_ui$Element$rgba, 0, 0, 0, 0.2),
+		offset: _Utils_Tuple2(0, 4),
+		size: 8
+	});
 var $elm$html$Html$Attributes$download = function (fileName) {
 	return A2($elm$html$Html$Attributes$stringProperty, 'download', fileName);
 };
@@ -11524,7 +11553,117 @@ var $mdgriffith$elm_ui$Element$download = F2(
 	});
 var $mdgriffith$elm_ui$Internal$Model$ContentInfo = {$: 'ContentInfo'};
 var $mdgriffith$elm_ui$Element$Region$footer = $mdgriffith$elm_ui$Internal$Model$Describe($mdgriffith$elm_ui$Internal$Model$ContentInfo);
-var $mdgriffith$elm_ui$Element$rgba = $mdgriffith$elm_ui$Internal$Model$Rgba;
+var $mdgriffith$elm_ui$Internal$Model$Hover = {$: 'Hover'};
+var $mdgriffith$elm_ui$Internal$Model$PseudoSelector = F2(
+	function (a, b) {
+		return {$: 'PseudoSelector', a: a, b: b};
+	});
+var $mdgriffith$elm_ui$Internal$Flag$hover = $mdgriffith$elm_ui$Internal$Flag$flag(33);
+var $mdgriffith$elm_ui$Internal$Model$Class = F2(
+	function (a, b) {
+		return {$: 'Class', a: a, b: b};
+	});
+var $mdgriffith$elm_ui$Internal$Model$Nearby = F2(
+	function (a, b) {
+		return {$: 'Nearby', a: a, b: b};
+	});
+var $mdgriffith$elm_ui$Internal$Model$NoAttribute = {$: 'NoAttribute'};
+var $mdgriffith$elm_ui$Internal$Model$TransformComponent = F2(
+	function (a, b) {
+		return {$: 'TransformComponent', a: a, b: b};
+	});
+var $elm$virtual_dom$VirtualDom$mapAttribute = _VirtualDom_mapAttribute;
+var $mdgriffith$elm_ui$Internal$Model$mapAttrFromStyle = F2(
+	function (fn, attr) {
+		switch (attr.$) {
+			case 'NoAttribute':
+				return $mdgriffith$elm_ui$Internal$Model$NoAttribute;
+			case 'Describe':
+				var description = attr.a;
+				return $mdgriffith$elm_ui$Internal$Model$Describe(description);
+			case 'AlignX':
+				var x = attr.a;
+				return $mdgriffith$elm_ui$Internal$Model$AlignX(x);
+			case 'AlignY':
+				var y = attr.a;
+				return $mdgriffith$elm_ui$Internal$Model$AlignY(y);
+			case 'Width':
+				var x = attr.a;
+				return $mdgriffith$elm_ui$Internal$Model$Width(x);
+			case 'Height':
+				var x = attr.a;
+				return $mdgriffith$elm_ui$Internal$Model$Height(x);
+			case 'Class':
+				var x = attr.a;
+				var y = attr.b;
+				return A2($mdgriffith$elm_ui$Internal$Model$Class, x, y);
+			case 'StyleClass':
+				var flag = attr.a;
+				var style = attr.b;
+				return A2($mdgriffith$elm_ui$Internal$Model$StyleClass, flag, style);
+			case 'Nearby':
+				var location = attr.a;
+				var elem = attr.b;
+				return A2(
+					$mdgriffith$elm_ui$Internal$Model$Nearby,
+					location,
+					A2($mdgriffith$elm_ui$Internal$Model$map, fn, elem));
+			case 'Attr':
+				var htmlAttr = attr.a;
+				return $mdgriffith$elm_ui$Internal$Model$Attr(
+					A2($elm$virtual_dom$VirtualDom$mapAttribute, fn, htmlAttr));
+			default:
+				var fl = attr.a;
+				var trans = attr.b;
+				return A2($mdgriffith$elm_ui$Internal$Model$TransformComponent, fl, trans);
+		}
+	});
+var $mdgriffith$elm_ui$Internal$Model$removeNever = function (style) {
+	return A2($mdgriffith$elm_ui$Internal$Model$mapAttrFromStyle, $elm$core$Basics$never, style);
+};
+var $mdgriffith$elm_ui$Internal$Model$unwrapDecsHelper = F2(
+	function (attr, _v0) {
+		var styles = _v0.a;
+		var trans = _v0.b;
+		var _v1 = $mdgriffith$elm_ui$Internal$Model$removeNever(attr);
+		switch (_v1.$) {
+			case 'StyleClass':
+				var style = _v1.b;
+				return _Utils_Tuple2(
+					A2($elm$core$List$cons, style, styles),
+					trans);
+			case 'TransformComponent':
+				var flag = _v1.a;
+				var component = _v1.b;
+				return _Utils_Tuple2(
+					styles,
+					A2($mdgriffith$elm_ui$Internal$Model$composeTransformation, trans, component));
+			default:
+				return _Utils_Tuple2(styles, trans);
+		}
+	});
+var $mdgriffith$elm_ui$Internal$Model$unwrapDecorations = function (attrs) {
+	var _v0 = A3(
+		$elm$core$List$foldl,
+		$mdgriffith$elm_ui$Internal$Model$unwrapDecsHelper,
+		_Utils_Tuple2(_List_Nil, $mdgriffith$elm_ui$Internal$Model$Untransformed),
+		attrs);
+	var styles = _v0.a;
+	var transform = _v0.b;
+	return A2(
+		$elm$core$List$cons,
+		$mdgriffith$elm_ui$Internal$Model$Transform(transform),
+		styles);
+};
+var $mdgriffith$elm_ui$Element$mouseOver = function (decs) {
+	return A2(
+		$mdgriffith$elm_ui$Internal$Model$StyleClass,
+		$mdgriffith$elm_ui$Internal$Flag$hover,
+		A2(
+			$mdgriffith$elm_ui$Internal$Model$PseudoSelector,
+			$mdgriffith$elm_ui$Internal$Model$Hover,
+			$mdgriffith$elm_ui$Internal$Model$unwrapDecorations(decs)));
+};
 var $mdgriffith$elm_ui$Internal$Flag$borderRound = $mdgriffith$elm_ui$Internal$Flag$flag(17);
 var $mdgriffith$elm_ui$Element$Border$rounded = function (radius) {
 	return A2(
@@ -11556,37 +11695,6 @@ var $mdgriffith$elm_ui$Element$row = F2(
 						attrs))),
 			$mdgriffith$elm_ui$Internal$Model$Unkeyed(children));
 	});
-var $mdgriffith$elm_ui$Internal$Model$boxShadowClass = function (shadow) {
-	return $elm$core$String$concat(
-		_List_fromArray(
-			[
-				shadow.inset ? 'box-inset' : 'box-',
-				$mdgriffith$elm_ui$Internal$Model$floatClass(shadow.offset.a) + 'px',
-				$mdgriffith$elm_ui$Internal$Model$floatClass(shadow.offset.b) + 'px',
-				$mdgriffith$elm_ui$Internal$Model$floatClass(shadow.blur) + 'px',
-				$mdgriffith$elm_ui$Internal$Model$floatClass(shadow.size) + 'px',
-				$mdgriffith$elm_ui$Internal$Model$formatColorClass(shadow.color)
-			]));
-};
-var $mdgriffith$elm_ui$Internal$Flag$shadows = $mdgriffith$elm_ui$Internal$Flag$flag(19);
-var $mdgriffith$elm_ui$Element$Border$shadow = function (almostShade) {
-	var shade = {blur: almostShade.blur, color: almostShade.color, inset: false, offset: almostShade.offset, size: almostShade.size};
-	return A2(
-		$mdgriffith$elm_ui$Internal$Model$StyleClass,
-		$mdgriffith$elm_ui$Internal$Flag$shadows,
-		A3(
-			$mdgriffith$elm_ui$Internal$Model$Single,
-			$mdgriffith$elm_ui$Internal$Model$boxShadowClass(shade),
-			'box-shadow',
-			$mdgriffith$elm_ui$Internal$Model$formatBoxShadow(shade)));
-};
-var $author$project$Files$shadow = $mdgriffith$elm_ui$Element$Border$shadow(
-	{
-		blur: 2,
-		color: A3($mdgriffith$elm_ui$Element$rgb, 0.5, 0.5, 0.5),
-		offset: _Utils_Tuple2(2, 2),
-		size: 2
-	});
 var $mdgriffith$elm_ui$Element$spacingXY = F2(
 	function (x, y) {
 		return A2(
@@ -11605,13 +11713,14 @@ var $author$project$Files$viewFile = function (file) {
 		_List_fromArray(
 			[
 				$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
-				$mdgriffith$elm_ui$Element$Background$color(
-				A3($mdgriffith$elm_ui$Element$rgb, 0.8, 0.8, 0.8)),
 				$mdgriffith$elm_ui$Element$padding(10),
 				$mdgriffith$elm_ui$Element$Border$rounded(3),
-				$author$project$Files$shadow,
+				$author$project$Files$cardShadow,
 				$mdgriffith$elm_ui$Element$height(
-				$mdgriffith$elm_ui$Element$px(110))
+				$mdgriffith$elm_ui$Element$px(110)),
+				$mdgriffith$elm_ui$Element$mouseOver(
+				_List_fromArray(
+					[$author$project$Files$cardShadowOver]))
 			]),
 		A2(
 			$mdgriffith$elm_ui$Element$column,
@@ -11709,7 +11818,7 @@ var $author$project$Files$view = function (model) {
 				$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink),
 				$mdgriffith$elm_ui$Element$centerX,
 				$mdgriffith$elm_ui$Element$spacing(36),
-				$mdgriffith$elm_ui$Element$padding(10)
+				$mdgriffith$elm_ui$Element$padding(20)
 			]),
 		_List_fromArray(
 			[
@@ -11743,26 +11852,153 @@ var $author$project$Files$view = function (model) {
 							[
 								$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
 								$mdgriffith$elm_ui$Element$centerX,
-								$mdgriffith$elm_ui$Element$spacing(10)
+								$mdgriffith$elm_ui$Element$spacing(20)
 							]),
 						A2($elm$core$List$map, $author$project$Files$viewFile, model.files));
 				}
 			}()
 			]));
 };
-var $author$project$MainPage$None = {$: 'None'};
+var $author$project$MainPage$AAC = {$: 'AAC'};
+var $author$project$MainPage$AudioFormat = function (a) {
+	return {$: 'AudioFormat', a: a};
+};
+var $author$project$MainPage$Auto = {$: 'Auto'};
+var $author$project$MainPage$FLV = {$: 'FLV'};
+var $author$project$MainPage$First = {$: 'First'};
+var $author$project$MainPage$Last = {$: 'Last'};
+var $author$project$MainPage$MP3 = {$: 'MP3'};
+var $author$project$MainPage$MP4 = {$: 'MP4'};
+var $author$project$MainPage$Mid = {$: 'Mid'};
+var $author$project$MainPage$OGG = {$: 'OGG'};
+var $author$project$MainPage$OPUS = {$: 'OPUS'};
 var $author$project$MainPage$PostForm = function (a) {
 	return {$: 'PostForm', a: a};
 };
 var $author$project$MainPage$UpdateForm = function (a) {
 	return {$: 'UpdateForm', a: a};
 };
-var $mdgriffith$elm_ui$Internal$Model$Below = {$: 'Below'};
-var $mdgriffith$elm_ui$Internal$Model$Nearby = F2(
-	function (a, b) {
-		return {$: 'Nearby', a: a, b: b};
+var $author$project$MainPage$UpdateFormAudioOnlyChanged = function (a) {
+	return {$: 'UpdateFormAudioOnlyChanged', a: a};
+};
+var $author$project$MainPage$UpdateFormFormatChnaged = function (a) {
+	return {$: 'UpdateFormFormatChnaged', a: a};
+};
+var $author$project$MainPage$VideoFormat = function (a) {
+	return {$: 'VideoFormat', a: a};
+};
+var $author$project$MainPage$WAV = {$: 'WAV'};
+var $author$project$MainPage$WEBM = {$: 'WEBM'};
+var $mdgriffith$elm_ui$Internal$Model$CenterY = {$: 'CenterY'};
+var $mdgriffith$elm_ui$Element$centerY = $mdgriffith$elm_ui$Internal$Model$AlignY($mdgriffith$elm_ui$Internal$Model$CenterY);
+var $mdgriffith$elm_ui$Element$rgb255 = F3(
+	function (red, green, blue) {
+		return A4($mdgriffith$elm_ui$Internal$Model$Rgba, red / 255, green / 255, blue / 255, 1);
 	});
-var $mdgriffith$elm_ui$Internal$Model$NoAttribute = {$: 'NoAttribute'};
+var $author$project$Color$color = {
+	blue: A3($mdgriffith$elm_ui$Element$rgb255, 114, 159, 207),
+	darkBlue: A3($mdgriffith$elm_ui$Element$rgb, 0, 0, 0.9),
+	darkCharcoal: A3($mdgriffith$elm_ui$Element$rgb255, 46, 52, 54),
+	grey: A3($mdgriffith$elm_ui$Element$rgb, 0.9, 0.9, 0.9),
+	lightBlue: A3($mdgriffith$elm_ui$Element$rgb255, 197, 232, 247),
+	lightGrey: A3($mdgriffith$elm_ui$Element$rgb255, 224, 224, 224),
+	red: A3($mdgriffith$elm_ui$Element$rgb, 0.8, 0, 0),
+	white: A3($mdgriffith$elm_ui$Element$rgb255, 255, 255, 255)
+};
+var $mdgriffith$elm_ui$Element$Background$color = function (clr) {
+	return A2(
+		$mdgriffith$elm_ui$Internal$Model$StyleClass,
+		$mdgriffith$elm_ui$Internal$Flag$bgColor,
+		A3(
+			$mdgriffith$elm_ui$Internal$Model$Colored,
+			'bg-' + $mdgriffith$elm_ui$Internal$Model$formatColorClass(clr),
+			'background-color',
+			clr));
+};
+var $mdgriffith$elm_ui$Internal$Flag$borderColor = $mdgriffith$elm_ui$Internal$Flag$flag(28);
+var $mdgriffith$elm_ui$Element$Border$color = function (clr) {
+	return A2(
+		$mdgriffith$elm_ui$Internal$Model$StyleClass,
+		$mdgriffith$elm_ui$Internal$Flag$borderColor,
+		A3(
+			$mdgriffith$elm_ui$Internal$Model$Colored,
+			'bc-' + $mdgriffith$elm_ui$Internal$Model$formatColorClass(clr),
+			'border-color',
+			clr));
+};
+var $mdgriffith$elm_ui$Element$none = $mdgriffith$elm_ui$Internal$Model$Empty;
+var $mdgriffith$elm_ui$Internal$Model$BorderWidth = F5(
+	function (a, b, c, d, e) {
+		return {$: 'BorderWidth', a: a, b: b, c: c, d: d, e: e};
+	});
+var $mdgriffith$elm_ui$Element$Border$width = function (v) {
+	return A2(
+		$mdgriffith$elm_ui$Internal$Model$StyleClass,
+		$mdgriffith$elm_ui$Internal$Flag$borderWidth,
+		A5(
+			$mdgriffith$elm_ui$Internal$Model$BorderWidth,
+			'b-' + $elm$core$String$fromInt(v),
+			v,
+			v,
+			v,
+			v));
+};
+var $author$project$MainPage$audioOnlyCheckbox = function (isChecked) {
+	var knob = A2(
+		$mdgriffith$elm_ui$Element$el,
+		_List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$width(
+				$mdgriffith$elm_ui$Element$px(36)),
+				$mdgriffith$elm_ui$Element$height(
+				$mdgriffith$elm_ui$Element$px(36)),
+				$mdgriffith$elm_ui$Element$Border$rounded(6),
+				$mdgriffith$elm_ui$Element$Border$width(2),
+				$mdgriffith$elm_ui$Element$Border$color($author$project$Color$color.blue),
+				$mdgriffith$elm_ui$Element$Background$color($author$project$Color$color.white)
+			]),
+		$mdgriffith$elm_ui$Element$none);
+	return A2(
+		$mdgriffith$elm_ui$Element$el,
+		_List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$width(
+				$mdgriffith$elm_ui$Element$px(120)),
+				$mdgriffith$elm_ui$Element$height(
+				$mdgriffith$elm_ui$Element$px(48)),
+				$mdgriffith$elm_ui$Element$centerY,
+				$mdgriffith$elm_ui$Element$padding(4),
+				$mdgriffith$elm_ui$Element$Border$rounded(6),
+				$mdgriffith$elm_ui$Element$Border$width(2),
+				$mdgriffith$elm_ui$Element$Border$color($author$project$Color$color.blue),
+				$mdgriffith$elm_ui$Element$Background$color(
+				isChecked ? $author$project$Color$color.lightBlue : $author$project$Color$color.white)
+			]),
+		A2(
+			$mdgriffith$elm_ui$Element$row,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+				]),
+			isChecked ? _List_fromArray(
+				[
+					A2(
+					$mdgriffith$elm_ui$Element$el,
+					_List_fromArray(
+						[$mdgriffith$elm_ui$Element$centerX]),
+					$mdgriffith$elm_ui$Element$text('Audio')),
+					knob
+				]) : _List_fromArray(
+				[
+					knob,
+					A2(
+					$mdgriffith$elm_ui$Element$el,
+					_List_fromArray(
+						[$mdgriffith$elm_ui$Element$centerX]),
+					$mdgriffith$elm_ui$Element$text('Video'))
+				])));
+};
+var $mdgriffith$elm_ui$Internal$Model$Below = {$: 'Below'};
 var $mdgriffith$elm_ui$Element$createNearby = F2(
 	function (loc, element) {
 		if (element.$ === 'Empty') {
@@ -11774,7 +12010,6 @@ var $mdgriffith$elm_ui$Element$createNearby = F2(
 var $mdgriffith$elm_ui$Element$below = function (element) {
 	return A2($mdgriffith$elm_ui$Element$createNearby, $mdgriffith$elm_ui$Internal$Model$Below, element);
 };
-var $author$project$Color$blue = A3($mdgriffith$elm_ui$Element$rgb, 0, 0, 0.8);
 var $mdgriffith$elm_ui$Internal$Model$Button = {$: 'Button'};
 var $elm$json$Json$Encode$bool = _Json_wrap;
 var $elm$html$Html$Attributes$boolProperty = F2(
@@ -11855,10 +12090,6 @@ var $mdgriffith$elm_ui$Element$Input$onKeyLookup = function (lookup) {
 				},
 				isKey)));
 };
-var $mdgriffith$elm_ui$Internal$Model$Class = F2(
-	function (a, b) {
-		return {$: 'Class', a: a, b: b};
-	});
 var $mdgriffith$elm_ui$Internal$Flag$cursor = $mdgriffith$elm_ui$Internal$Flag$flag(21);
 var $mdgriffith$elm_ui$Element$pointer = A2($mdgriffith$elm_ui$Internal$Model$Class, $mdgriffith$elm_ui$Internal$Flag$cursor, $mdgriffith$elm_ui$Internal$Style$classes.cursorPointer);
 var $mdgriffith$elm_ui$Element$Input$space = ' ';
@@ -11923,8 +12154,6 @@ var $mdgriffith$elm_ui$Element$Input$button = F2(
 				_List_fromArray(
 					[label])));
 	});
-var $mdgriffith$elm_ui$Internal$Model$CenterY = {$: 'CenterY'};
-var $mdgriffith$elm_ui$Element$centerY = $mdgriffith$elm_ui$Internal$Model$AlignY($mdgriffith$elm_ui$Internal$Model$CenterY);
 var $mdgriffith$elm_ui$Internal$Model$LivePolite = {$: 'LivePolite'};
 var $mdgriffith$elm_ui$Element$Region$announce = $mdgriffith$elm_ui$Internal$Model$Describe($mdgriffith$elm_ui$Internal$Model$LivePolite);
 var $mdgriffith$elm_ui$Element$Input$applyLabel = F3(
@@ -12084,87 +12313,54 @@ var $mdgriffith$elm_ui$Element$Input$checkbox = F2(
 							icon(checked)
 						]))));
 	});
-var $mdgriffith$elm_ui$Internal$Flag$borderColor = $mdgriffith$elm_ui$Internal$Flag$flag(28);
-var $mdgriffith$elm_ui$Element$Border$color = function (clr) {
+var $mdgriffith$elm_ui$Element$Input$Selected = {$: 'Selected'};
+var $mdgriffith$elm_ui$Internal$Model$paddingName = F4(
+	function (top, right, bottom, left) {
+		return 'pad-' + ($elm$core$String$fromInt(top) + ('-' + ($elm$core$String$fromInt(right) + ('-' + ($elm$core$String$fromInt(bottom) + ('-' + $elm$core$String$fromInt(left)))))));
+	});
+var $mdgriffith$elm_ui$Element$paddingEach = function (_v0) {
+	var top = _v0.top;
+	var right = _v0.right;
+	var bottom = _v0.bottom;
+	var left = _v0.left;
+	if (_Utils_eq(top, right) && (_Utils_eq(top, bottom) && _Utils_eq(top, left))) {
+		var topFloat = top;
+		return A2(
+			$mdgriffith$elm_ui$Internal$Model$StyleClass,
+			$mdgriffith$elm_ui$Internal$Flag$padding,
+			A5(
+				$mdgriffith$elm_ui$Internal$Model$PaddingStyle,
+				'p-' + $elm$core$String$fromInt(top),
+				topFloat,
+				topFloat,
+				topFloat,
+				topFloat));
+	} else {
+		return A2(
+			$mdgriffith$elm_ui$Internal$Model$StyleClass,
+			$mdgriffith$elm_ui$Internal$Flag$padding,
+			A5(
+				$mdgriffith$elm_ui$Internal$Model$PaddingStyle,
+				A4($mdgriffith$elm_ui$Internal$Model$paddingName, top, right, bottom, left),
+				top,
+				right,
+				bottom,
+				left));
+	}
+};
+var $mdgriffith$elm_ui$Element$Border$roundEach = function (_v0) {
+	var topLeft = _v0.topLeft;
+	var topRight = _v0.topRight;
+	var bottomLeft = _v0.bottomLeft;
+	var bottomRight = _v0.bottomRight;
 	return A2(
 		$mdgriffith$elm_ui$Internal$Model$StyleClass,
-		$mdgriffith$elm_ui$Internal$Flag$borderColor,
+		$mdgriffith$elm_ui$Internal$Flag$borderRound,
 		A3(
-			$mdgriffith$elm_ui$Internal$Model$Colored,
-			'bc-' + $mdgriffith$elm_ui$Internal$Model$formatColorClass(clr),
-			'border-color',
-			clr));
-};
-var $author$project$Color$darkBlue = A3($mdgriffith$elm_ui$Element$rgb, 0, 0, 0.9);
-var $mdgriffith$elm_ui$Internal$Flag$fontAlignment = $mdgriffith$elm_ui$Internal$Flag$flag(12);
-var $mdgriffith$elm_ui$Element$Font$center = A2($mdgriffith$elm_ui$Internal$Model$Class, $mdgriffith$elm_ui$Internal$Flag$fontAlignment, $mdgriffith$elm_ui$Internal$Style$classes.textCenter);
-var $elm$core$Basics$pi = _Basics_pi;
-var $elm$core$Basics$degrees = function (angleInDegrees) {
-	return (angleInDegrees * $elm$core$Basics$pi) / 180;
-};
-var $mdgriffith$elm_ui$Internal$Model$InFront = {$: 'InFront'};
-var $mdgriffith$elm_ui$Element$inFront = function (element) {
-	return A2($mdgriffith$elm_ui$Element$createNearby, $mdgriffith$elm_ui$Internal$Model$InFront, element);
-};
-var $mdgriffith$elm_ui$Internal$Model$MoveY = function (a) {
-	return {$: 'MoveY', a: a};
-};
-var $mdgriffith$elm_ui$Internal$Model$TransformComponent = F2(
-	function (a, b) {
-		return {$: 'TransformComponent', a: a, b: b};
-	});
-var $mdgriffith$elm_ui$Internal$Flag$moveY = $mdgriffith$elm_ui$Internal$Flag$flag(26);
-var $mdgriffith$elm_ui$Element$moveUp = function (y) {
-	return A2(
-		$mdgriffith$elm_ui$Internal$Model$TransformComponent,
-		$mdgriffith$elm_ui$Internal$Flag$moveY,
-		$mdgriffith$elm_ui$Internal$Model$MoveY(-y));
-};
-var $mdgriffith$elm_ui$Element$none = $mdgriffith$elm_ui$Internal$Model$Empty;
-var $mdgriffith$elm_ui$Internal$Model$Rotate = F2(
-	function (a, b) {
-		return {$: 'Rotate', a: a, b: b};
-	});
-var $mdgriffith$elm_ui$Internal$Flag$rotate = $mdgriffith$elm_ui$Internal$Flag$flag(24);
-var $mdgriffith$elm_ui$Element$rotate = function (angle) {
-	return A2(
-		$mdgriffith$elm_ui$Internal$Model$TransformComponent,
-		$mdgriffith$elm_ui$Internal$Flag$rotate,
-		A2(
-			$mdgriffith$elm_ui$Internal$Model$Rotate,
-			_Utils_Tuple3(0, 0, 1),
-			angle));
-};
-var $mdgriffith$elm_ui$Internal$Model$Transparency = F2(
-	function (a, b) {
-		return {$: 'Transparency', a: a, b: b};
-	});
-var $mdgriffith$elm_ui$Internal$Flag$transparency = $mdgriffith$elm_ui$Internal$Flag$flag(0);
-var $mdgriffith$elm_ui$Element$transparent = function (on) {
-	return on ? A2(
-		$mdgriffith$elm_ui$Internal$Model$StyleClass,
-		$mdgriffith$elm_ui$Internal$Flag$transparency,
-		A2($mdgriffith$elm_ui$Internal$Model$Transparency, 'transparent', 1.0)) : A2(
-		$mdgriffith$elm_ui$Internal$Model$StyleClass,
-		$mdgriffith$elm_ui$Internal$Flag$transparency,
-		A2($mdgriffith$elm_ui$Internal$Model$Transparency, 'visible', 0.0));
-};
-var $mdgriffith$elm_ui$Element$Input$white = A3($mdgriffith$elm_ui$Element$rgb, 1, 1, 1);
-var $mdgriffith$elm_ui$Internal$Model$BorderWidth = F5(
-	function (a, b, c, d, e) {
-		return {$: 'BorderWidth', a: a, b: b, c: c, d: d, e: e};
-	});
-var $mdgriffith$elm_ui$Element$Border$width = function (v) {
-	return A2(
-		$mdgriffith$elm_ui$Internal$Model$StyleClass,
-		$mdgriffith$elm_ui$Internal$Flag$borderWidth,
-		A5(
-			$mdgriffith$elm_ui$Internal$Model$BorderWidth,
-			'b-' + $elm$core$String$fromInt(v),
-			v,
-			v,
-			v,
-			v));
+			$mdgriffith$elm_ui$Internal$Model$Single,
+			'br-' + ($elm$core$String$fromInt(topLeft) + ('-' + ($elm$core$String$fromInt(topRight) + ($elm$core$String$fromInt(bottomLeft) + ('-' + $elm$core$String$fromInt(bottomRight)))))),
+			'border-radius',
+			$elm$core$String$fromInt(topLeft) + ('px ' + ($elm$core$String$fromInt(topRight) + ('px ' + ($elm$core$String$fromInt(bottomRight) + ('px ' + ($elm$core$String$fromInt(bottomLeft) + 'px'))))))));
 };
 var $mdgriffith$elm_ui$Element$Border$widthXY = F2(
 	function (x, y) {
@@ -12195,65 +12391,116 @@ var $mdgriffith$elm_ui$Element$Border$widthEach = function (_v0) {
 			bottom,
 			left));
 };
-var $mdgriffith$elm_ui$Element$Input$defaultCheckbox = function (checked) {
-	return A2(
-		$mdgriffith$elm_ui$Element$el,
-		_List_fromArray(
-			[
-				$mdgriffith$elm_ui$Internal$Model$htmlClass('focusable'),
-				$mdgriffith$elm_ui$Element$width(
-				$mdgriffith$elm_ui$Element$px(14)),
-				$mdgriffith$elm_ui$Element$height(
-				$mdgriffith$elm_ui$Element$px(14)),
-				$mdgriffith$elm_ui$Element$Font$color($mdgriffith$elm_ui$Element$Input$white),
-				$mdgriffith$elm_ui$Element$centerY,
-				$mdgriffith$elm_ui$Element$Font$size(9),
-				$mdgriffith$elm_ui$Element$Font$center,
-				$mdgriffith$elm_ui$Element$Border$rounded(3),
-				$mdgriffith$elm_ui$Element$Border$color(
-				checked ? A3($mdgriffith$elm_ui$Element$rgb, 59 / 255, 153 / 255, 252 / 255) : A3($mdgriffith$elm_ui$Element$rgb, 211 / 255, 211 / 255, 211 / 255)),
-				$mdgriffith$elm_ui$Element$Border$shadow(
-				{
-					blur: 1,
-					color: checked ? A4($mdgriffith$elm_ui$Element$rgba, 238 / 255, 238 / 255, 238 / 255, 0) : A3($mdgriffith$elm_ui$Element$rgb, 238 / 255, 238 / 255, 238 / 255),
-					offset: _Utils_Tuple2(0, 0),
-					size: 1
-				}),
-				$mdgriffith$elm_ui$Element$Background$color(
-				checked ? A3($mdgriffith$elm_ui$Element$rgb, 59 / 255, 153 / 255, 252 / 255) : $mdgriffith$elm_ui$Element$Input$white),
-				$mdgriffith$elm_ui$Element$Border$width(
-				checked ? 0 : 1),
-				$mdgriffith$elm_ui$Element$inFront(
-				A2(
-					$mdgriffith$elm_ui$Element$el,
-					_List_fromArray(
-						[
-							$mdgriffith$elm_ui$Element$Border$color($mdgriffith$elm_ui$Element$Input$white),
-							$mdgriffith$elm_ui$Element$height(
-							$mdgriffith$elm_ui$Element$px(6)),
-							$mdgriffith$elm_ui$Element$width(
-							$mdgriffith$elm_ui$Element$px(9)),
-							$mdgriffith$elm_ui$Element$rotate(
-							$elm$core$Basics$degrees(-45)),
-							$mdgriffith$elm_ui$Element$centerX,
-							$mdgriffith$elm_ui$Element$centerY,
-							$mdgriffith$elm_ui$Element$moveUp(1),
-							$mdgriffith$elm_ui$Element$transparent(!checked),
-							$mdgriffith$elm_ui$Element$Border$widthEach(
-							{bottom: 2, left: 2, right: 0, top: 0})
-						]),
-					$mdgriffith$elm_ui$Element$none))
-			]),
-		$mdgriffith$elm_ui$Element$none);
+var $author$project$MainPage$formatButton = F3(
+	function (position, label, state) {
+		var corners = function () {
+			switch (position.$) {
+				case 'First':
+					return {bottomLeft: 6, bottomRight: 0, topLeft: 6, topRight: 0};
+				case 'Mid':
+					return {bottomLeft: 0, bottomRight: 0, topLeft: 0, topRight: 0};
+				default:
+					return {bottomLeft: 0, bottomRight: 6, topLeft: 0, topRight: 6};
+			}
+		}();
+		var borders = function () {
+			switch (position.$) {
+				case 'First':
+					return {bottom: 2, left: 2, right: 2, top: 2};
+				case 'Mid':
+					return {bottom: 2, left: 0, right: 2, top: 2};
+				default:
+					return {bottom: 2, left: 0, right: 2, top: 2};
+			}
+		}();
+		return A2(
+			$mdgriffith$elm_ui$Element$el,
+			_List_fromArray(
+				[
+					$mdgriffith$elm_ui$Element$paddingEach(
+					{bottom: 10, left: 20, right: 20, top: 10}),
+					$mdgriffith$elm_ui$Element$Border$roundEach(corners),
+					$mdgriffith$elm_ui$Element$Border$widthEach(borders),
+					$mdgriffith$elm_ui$Element$Border$color($author$project$Color$color.blue),
+					$mdgriffith$elm_ui$Element$Background$color(
+					_Utils_eq(state, $mdgriffith$elm_ui$Element$Input$Selected) ? $author$project$Color$color.lightBlue : $author$project$Color$color.white)
+				]),
+			A2(
+				$mdgriffith$elm_ui$Element$el,
+				_List_fromArray(
+					[$mdgriffith$elm_ui$Element$centerX, $mdgriffith$elm_ui$Element$centerY]),
+				$mdgriffith$elm_ui$Element$text(label)));
+	});
+var $author$project$MainPage$audioFormatName = function (format) {
+	switch (format.$) {
+		case 'MP3':
+			return 'mp3';
+		case 'OPUS':
+			return 'opus';
+		case 'AAC':
+			return 'aac';
+		default:
+			return 'wav';
+	}
 };
+var $author$project$MainPage$videoFormatName = function (format) {
+	switch (format.$) {
+		case 'FLV':
+			return 'flv';
+		case 'MP4':
+			return 'mp4';
+		case 'OGG':
+			return 'ogg';
+		default:
+			return 'wav';
+	}
+};
+var $author$project$MainPage$formatName = function (format) {
+	switch (format.$) {
+		case 'Auto':
+			return 'Auto';
+		case 'AudioFormat':
+			var audio = format.a;
+			return $author$project$MainPage$audioFormatName(audio);
+		default:
+			var video = format.a;
+			return $author$project$MainPage$videoFormatName(video);
+	}
+};
+var $mdgriffith$elm_ui$Element$Input$Option = F2(
+	function (a, b) {
+		return {$: 'Option', a: a, b: b};
+	});
+var $mdgriffith$elm_ui$Element$Input$optionWith = F2(
+	function (val, view) {
+		return A2($mdgriffith$elm_ui$Element$Input$Option, val, view);
+	});
+var $author$project$MainPage$formatOption = F2(
+	function (format, position) {
+		return A2(
+			$mdgriffith$elm_ui$Element$Input$optionWith,
+			format,
+			A2(
+				$author$project$MainPage$formatButton,
+				position,
+				$author$project$MainPage$formatName(format)));
+	});
 var $mdgriffith$elm_ui$Element$Input$Above = {$: 'Above'};
 var $mdgriffith$elm_ui$Element$Input$Label = F3(
 	function (a, b, c) {
 		return {$: 'Label', a: a, b: b, c: c};
 	});
 var $mdgriffith$elm_ui$Element$Input$labelAbove = $mdgriffith$elm_ui$Element$Input$Label($mdgriffith$elm_ui$Element$Input$Above);
-var $mdgriffith$elm_ui$Element$Input$OnRight = {$: 'OnRight'};
-var $mdgriffith$elm_ui$Element$Input$labelRight = $mdgriffith$elm_ui$Element$Input$Label($mdgriffith$elm_ui$Element$Input$OnRight);
+var $mdgriffith$elm_ui$Element$Input$HiddenLabel = function (a) {
+	return {$: 'HiddenLabel', a: a};
+};
+var $mdgriffith$elm_ui$Element$Input$labelHidden = $mdgriffith$elm_ui$Element$Input$HiddenLabel;
+var $mdgriffith$elm_ui$Element$Input$OnLeft = {$: 'OnLeft'};
+var $mdgriffith$elm_ui$Element$Input$labelLeft = $mdgriffith$elm_ui$Element$Input$Label($mdgriffith$elm_ui$Element$Input$OnLeft);
+var $mdgriffith$elm_ui$Internal$Model$MoveY = function (a) {
+	return {$: 'MoveY', a: a};
+};
+var $mdgriffith$elm_ui$Internal$Flag$moveY = $mdgriffith$elm_ui$Internal$Flag$flag(26);
 var $mdgriffith$elm_ui$Element$moveDown = function (y) {
 	return A2(
 		$mdgriffith$elm_ui$Internal$Model$TransformComponent,
@@ -12294,7 +12541,312 @@ var $mdgriffith$elm_ui$Element$Input$Placeholder = F2(
 		return {$: 'Placeholder', a: a, b: b};
 	});
 var $mdgriffith$elm_ui$Element$Input$placeholder = $mdgriffith$elm_ui$Element$Input$Placeholder;
-var $author$project$Color$red = A3($mdgriffith$elm_ui$Element$rgb, 0.8, 0, 0);
+var $mdgriffith$elm_ui$Element$Input$Row = {$: 'Row'};
+var $mdgriffith$elm_ui$Element$Input$AfterFound = {$: 'AfterFound'};
+var $mdgriffith$elm_ui$Element$Input$BeforeFound = {$: 'BeforeFound'};
+var $mdgriffith$elm_ui$Element$Input$Idle = {$: 'Idle'};
+var $mdgriffith$elm_ui$Element$Input$NotFound = {$: 'NotFound'};
+var $mdgriffith$elm_ui$Element$Input$column = F2(
+	function (attributes, children) {
+		return A4(
+			$mdgriffith$elm_ui$Internal$Model$element,
+			$mdgriffith$elm_ui$Internal$Model$asColumn,
+			$mdgriffith$elm_ui$Internal$Model$div,
+			A2(
+				$elm$core$List$cons,
+				$mdgriffith$elm_ui$Element$height($mdgriffith$elm_ui$Element$shrink),
+				A2(
+					$elm$core$List$cons,
+					$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+					attributes)),
+			$mdgriffith$elm_ui$Internal$Model$Unkeyed(children));
+	});
+var $mdgriffith$elm_ui$Element$Input$downArrow = 'ArrowDown';
+var $mdgriffith$elm_ui$Internal$Model$filter = function (attrs) {
+	return A3(
+		$elm$core$List$foldr,
+		F2(
+			function (x, _v0) {
+				var found = _v0.a;
+				var has = _v0.b;
+				switch (x.$) {
+					case 'NoAttribute':
+						return _Utils_Tuple2(found, has);
+					case 'Class':
+						var key = x.a;
+						return _Utils_Tuple2(
+							A2($elm$core$List$cons, x, found),
+							has);
+					case 'Attr':
+						var attr = x.a;
+						return _Utils_Tuple2(
+							A2($elm$core$List$cons, x, found),
+							has);
+					case 'StyleClass':
+						var style = x.b;
+						return _Utils_Tuple2(
+							A2($elm$core$List$cons, x, found),
+							has);
+					case 'Width':
+						var width = x.a;
+						return A2($elm$core$Set$member, 'width', has) ? _Utils_Tuple2(found, has) : _Utils_Tuple2(
+							A2($elm$core$List$cons, x, found),
+							A2($elm$core$Set$insert, 'width', has));
+					case 'Height':
+						var height = x.a;
+						return A2($elm$core$Set$member, 'height', has) ? _Utils_Tuple2(found, has) : _Utils_Tuple2(
+							A2($elm$core$List$cons, x, found),
+							A2($elm$core$Set$insert, 'height', has));
+					case 'Describe':
+						var description = x.a;
+						return A2($elm$core$Set$member, 'described', has) ? _Utils_Tuple2(found, has) : _Utils_Tuple2(
+							A2($elm$core$List$cons, x, found),
+							A2($elm$core$Set$insert, 'described', has));
+					case 'Nearby':
+						var location = x.a;
+						var elem = x.b;
+						return _Utils_Tuple2(
+							A2($elm$core$List$cons, x, found),
+							has);
+					case 'AlignX':
+						return A2($elm$core$Set$member, 'align-x', has) ? _Utils_Tuple2(found, has) : _Utils_Tuple2(
+							A2($elm$core$List$cons, x, found),
+							A2($elm$core$Set$insert, 'align-x', has));
+					case 'AlignY':
+						return A2($elm$core$Set$member, 'align-y', has) ? _Utils_Tuple2(found, has) : _Utils_Tuple2(
+							A2($elm$core$List$cons, x, found),
+							A2($elm$core$Set$insert, 'align-y', has));
+					default:
+						return A2($elm$core$Set$member, 'transform', has) ? _Utils_Tuple2(found, has) : _Utils_Tuple2(
+							A2($elm$core$List$cons, x, found),
+							A2($elm$core$Set$insert, 'transform', has));
+				}
+			}),
+		_Utils_Tuple2(_List_Nil, $elm$core$Set$empty),
+		attrs).a;
+};
+var $mdgriffith$elm_ui$Internal$Model$get = F2(
+	function (attrs, isAttr) {
+		return A3(
+			$elm$core$List$foldr,
+			F2(
+				function (x, found) {
+					return isAttr(x) ? A2($elm$core$List$cons, x, found) : found;
+				}),
+			_List_Nil,
+			$mdgriffith$elm_ui$Internal$Model$filter(attrs));
+	});
+var $mdgriffith$elm_ui$Element$Input$leftArrow = 'ArrowLeft';
+var $mdgriffith$elm_ui$Element$Input$rightArrow = 'ArrowRight';
+var $mdgriffith$elm_ui$Element$Input$row = F2(
+	function (attributes, children) {
+		return A4(
+			$mdgriffith$elm_ui$Internal$Model$element,
+			$mdgriffith$elm_ui$Internal$Model$asRow,
+			$mdgriffith$elm_ui$Internal$Model$div,
+			A2(
+				$elm$core$List$cons,
+				$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+				attributes),
+			$mdgriffith$elm_ui$Internal$Model$Unkeyed(children));
+	});
+var $mdgriffith$elm_ui$Element$Input$upArrow = 'ArrowUp';
+var $mdgriffith$elm_ui$Element$Input$radioHelper = F3(
+	function (orientation, attrs, input) {
+		var track = F2(
+			function (opt, _v14) {
+				var found = _v14.a;
+				var prev = _v14.b;
+				var nxt = _v14.c;
+				var val = opt.a;
+				switch (found.$) {
+					case 'NotFound':
+						return _Utils_eq(
+							$elm$core$Maybe$Just(val),
+							input.selected) ? _Utils_Tuple3($mdgriffith$elm_ui$Element$Input$BeforeFound, prev, nxt) : _Utils_Tuple3(found, val, nxt);
+					case 'BeforeFound':
+						return _Utils_Tuple3($mdgriffith$elm_ui$Element$Input$AfterFound, prev, val);
+					default:
+						return _Utils_Tuple3(found, prev, nxt);
+				}
+			});
+		var renderOption = function (_v11) {
+			var val = _v11.a;
+			var view = _v11.b;
+			var status = _Utils_eq(
+				$elm$core$Maybe$Just(val),
+				input.selected) ? $mdgriffith$elm_ui$Element$Input$Selected : $mdgriffith$elm_ui$Element$Input$Idle;
+			return A2(
+				$mdgriffith$elm_ui$Element$el,
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$pointer,
+						function () {
+						if (orientation.$ === 'Row') {
+							return $mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink);
+						} else {
+							return $mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill);
+						}
+					}(),
+						$mdgriffith$elm_ui$Element$Events$onClick(
+						input.onChange(val)),
+						function () {
+						if (status.$ === 'Selected') {
+							return $mdgriffith$elm_ui$Internal$Model$Attr(
+								A2($elm$html$Html$Attributes$attribute, 'aria-checked', 'true'));
+						} else {
+							return $mdgriffith$elm_ui$Internal$Model$Attr(
+								A2($elm$html$Html$Attributes$attribute, 'aria-checked', 'false'));
+						}
+					}(),
+						$mdgriffith$elm_ui$Internal$Model$Attr(
+						A2($elm$html$Html$Attributes$attribute, 'role', 'radio'))
+					]),
+				view(status));
+		};
+		var prevNext = function () {
+			var _v5 = input.options;
+			if (!_v5.b) {
+				return $elm$core$Maybe$Nothing;
+			} else {
+				var _v6 = _v5.a;
+				var val = _v6.a;
+				return function (_v7) {
+					var found = _v7.a;
+					var b = _v7.b;
+					var a = _v7.c;
+					switch (found.$) {
+						case 'NotFound':
+							return $elm$core$Maybe$Just(
+								_Utils_Tuple2(b, val));
+						case 'BeforeFound':
+							return $elm$core$Maybe$Just(
+								_Utils_Tuple2(b, val));
+						default:
+							return $elm$core$Maybe$Just(
+								_Utils_Tuple2(b, a));
+					}
+				}(
+					A3(
+						$elm$core$List$foldl,
+						track,
+						_Utils_Tuple3($mdgriffith$elm_ui$Element$Input$NotFound, val, val),
+						input.options));
+			}
+		}();
+		var optionArea = function () {
+			if (orientation.$ === 'Row') {
+				return A2(
+					$mdgriffith$elm_ui$Element$Input$row,
+					A2(
+						$elm$core$List$cons,
+						$mdgriffith$elm_ui$Element$Input$hiddenLabelAttribute(input.label),
+						attrs),
+					A2($elm$core$List$map, renderOption, input.options));
+			} else {
+				return A2(
+					$mdgriffith$elm_ui$Element$Input$column,
+					A2(
+						$elm$core$List$cons,
+						$mdgriffith$elm_ui$Element$Input$hiddenLabelAttribute(input.label),
+						attrs),
+					A2($elm$core$List$map, renderOption, input.options));
+			}
+		}();
+		var events = A2(
+			$mdgriffith$elm_ui$Internal$Model$get,
+			attrs,
+			function (attr) {
+				_v3$3:
+				while (true) {
+					switch (attr.$) {
+						case 'Width':
+							if (attr.a.$ === 'Fill') {
+								return true;
+							} else {
+								break _v3$3;
+							}
+						case 'Height':
+							if (attr.a.$ === 'Fill') {
+								return true;
+							} else {
+								break _v3$3;
+							}
+						case 'Attr':
+							return true;
+						default:
+							break _v3$3;
+					}
+				}
+				return false;
+			});
+		return A3(
+			$mdgriffith$elm_ui$Element$Input$applyLabel,
+			_Utils_ap(
+				A2(
+					$elm$core$List$filterMap,
+					$elm$core$Basics$identity,
+					_List_fromArray(
+						[
+							$elm$core$Maybe$Just($mdgriffith$elm_ui$Element$alignLeft),
+							$elm$core$Maybe$Just(
+							$mdgriffith$elm_ui$Element$Input$tabindex(0)),
+							$elm$core$Maybe$Just(
+							$mdgriffith$elm_ui$Internal$Model$htmlClass('focus')),
+							$elm$core$Maybe$Just($mdgriffith$elm_ui$Element$Region$announce),
+							$elm$core$Maybe$Just(
+							$mdgriffith$elm_ui$Internal$Model$Attr(
+								A2($elm$html$Html$Attributes$attribute, 'role', 'radiogroup'))),
+							function () {
+							if (prevNext.$ === 'Nothing') {
+								return $elm$core$Maybe$Nothing;
+							} else {
+								var _v1 = prevNext.a;
+								var prev = _v1.a;
+								var next = _v1.b;
+								return $elm$core$Maybe$Just(
+									$mdgriffith$elm_ui$Element$Input$onKeyLookup(
+										function (code) {
+											if (_Utils_eq(code, $mdgriffith$elm_ui$Element$Input$leftArrow)) {
+												return $elm$core$Maybe$Just(
+													input.onChange(prev));
+											} else {
+												if (_Utils_eq(code, $mdgriffith$elm_ui$Element$Input$upArrow)) {
+													return $elm$core$Maybe$Just(
+														input.onChange(prev));
+												} else {
+													if (_Utils_eq(code, $mdgriffith$elm_ui$Element$Input$rightArrow)) {
+														return $elm$core$Maybe$Just(
+															input.onChange(next));
+													} else {
+														if (_Utils_eq(code, $mdgriffith$elm_ui$Element$Input$downArrow)) {
+															return $elm$core$Maybe$Just(
+																input.onChange(next));
+														} else {
+															if (_Utils_eq(code, $mdgriffith$elm_ui$Element$Input$space)) {
+																var _v2 = input.selected;
+																if (_v2.$ === 'Nothing') {
+																	return $elm$core$Maybe$Just(
+																		input.onChange(prev));
+																} else {
+																	return $elm$core$Maybe$Nothing;
+																}
+															} else {
+																return $elm$core$Maybe$Nothing;
+															}
+														}
+													}
+												}
+											}
+										}));
+							}
+						}()
+						])),
+				events),
+			input.label,
+			optionArea);
+	});
+var $mdgriffith$elm_ui$Element$Input$radioRow = $mdgriffith$elm_ui$Element$Input$radioHelper($mdgriffith$elm_ui$Element$Input$Row);
 var $mdgriffith$elm_ui$Element$Input$TextInputNode = function (a) {
 	return {$: 'TextInputNode', a: a};
 };
@@ -12307,6 +12859,12 @@ var $mdgriffith$elm_ui$Internal$Model$Behind = {$: 'Behind'};
 var $mdgriffith$elm_ui$Element$behindContent = function (element) {
 	return A2($mdgriffith$elm_ui$Element$createNearby, $mdgriffith$elm_ui$Internal$Model$Behind, element);
 };
+var $mdgriffith$elm_ui$Element$moveUp = function (y) {
+	return A2(
+		$mdgriffith$elm_ui$Internal$Model$TransformComponent,
+		$mdgriffith$elm_ui$Internal$Flag$moveY,
+		$mdgriffith$elm_ui$Internal$Model$MoveY(-y));
+};
 var $mdgriffith$elm_ui$Element$Input$calcMoveToCompensateForPadding = function (attrs) {
 	var gatherSpacing = F2(
 		function (attr, found) {
@@ -12336,6 +12894,7 @@ var $mdgriffith$elm_ui$Internal$Flag$overflow = $mdgriffith$elm_ui$Internal$Flag
 var $mdgriffith$elm_ui$Element$clip = A2($mdgriffith$elm_ui$Internal$Model$Class, $mdgriffith$elm_ui$Internal$Flag$overflow, $mdgriffith$elm_ui$Internal$Style$classes.clip);
 var $mdgriffith$elm_ui$Element$Input$darkGrey = A3($mdgriffith$elm_ui$Element$rgb, 186 / 255, 189 / 255, 182 / 255);
 var $mdgriffith$elm_ui$Element$Input$defaultTextPadding = A2($mdgriffith$elm_ui$Element$paddingXY, 12, 12);
+var $mdgriffith$elm_ui$Element$Input$white = A3($mdgriffith$elm_ui$Element$rgb, 1, 1, 1);
 var $mdgriffith$elm_ui$Element$Input$defaultTextBoxStyle = _List_fromArray(
 	[
 		$mdgriffith$elm_ui$Element$Input$defaultTextPadding,
@@ -12364,6 +12923,10 @@ var $elm$core$List$head = function (list) {
 		return $elm$core$Maybe$Nothing;
 	}
 };
+var $mdgriffith$elm_ui$Internal$Model$InFront = {$: 'InFront'};
+var $mdgriffith$elm_ui$Element$inFront = function (element) {
+	return A2($mdgriffith$elm_ui$Element$createNearby, $mdgriffith$elm_ui$Internal$Model$InFront, element);
+};
 var $mdgriffith$elm_ui$Element$Input$isConstrained = function (len) {
 	isConstrained:
 	while (true) {
@@ -12436,40 +12999,6 @@ var $elm$html$Html$Events$onInput = function (tagger) {
 			$elm$html$Html$Events$alwaysStop,
 			A2($elm$json$Json$Decode$map, tagger, $elm$html$Html$Events$targetValue)));
 };
-var $mdgriffith$elm_ui$Internal$Model$paddingName = F4(
-	function (top, right, bottom, left) {
-		return 'pad-' + ($elm$core$String$fromInt(top) + ('-' + ($elm$core$String$fromInt(right) + ('-' + ($elm$core$String$fromInt(bottom) + ('-' + $elm$core$String$fromInt(left)))))));
-	});
-var $mdgriffith$elm_ui$Element$paddingEach = function (_v0) {
-	var top = _v0.top;
-	var right = _v0.right;
-	var bottom = _v0.bottom;
-	var left = _v0.left;
-	if (_Utils_eq(top, right) && (_Utils_eq(top, bottom) && _Utils_eq(top, left))) {
-		var topFloat = top;
-		return A2(
-			$mdgriffith$elm_ui$Internal$Model$StyleClass,
-			$mdgriffith$elm_ui$Internal$Flag$padding,
-			A5(
-				$mdgriffith$elm_ui$Internal$Model$PaddingStyle,
-				'p-' + $elm$core$String$fromInt(top),
-				topFloat,
-				topFloat,
-				topFloat,
-				topFloat));
-	} else {
-		return A2(
-			$mdgriffith$elm_ui$Internal$Model$StyleClass,
-			$mdgriffith$elm_ui$Internal$Flag$padding,
-			A5(
-				$mdgriffith$elm_ui$Internal$Model$PaddingStyle,
-				A4($mdgriffith$elm_ui$Internal$Model$paddingName, top, right, bottom, left),
-				top,
-				right,
-				bottom,
-				left));
-	}
-};
 var $mdgriffith$elm_ui$Element$htmlAttribute = $mdgriffith$elm_ui$Internal$Model$Attr;
 var $mdgriffith$elm_ui$Element$Input$isFill = function (len) {
 	isFill:
@@ -12735,6 +13264,11 @@ var $mdgriffith$elm_ui$Element$Input$renderBox = function (_v0) {
 	var left = _v0.left;
 	return $elm$core$String$fromInt(top) + ('px ' + ($elm$core$String$fromInt(right) + ('px ' + ($elm$core$String$fromInt(bottom) + ('px ' + ($elm$core$String$fromInt(left) + 'px'))))));
 };
+var $mdgriffith$elm_ui$Internal$Model$Transparency = F2(
+	function (a, b) {
+		return {$: 'Transparency', a: a, b: b};
+	});
+var $mdgriffith$elm_ui$Internal$Flag$transparency = $mdgriffith$elm_ui$Internal$Flag$flag(0);
 var $mdgriffith$elm_ui$Element$alpha = function (o) {
 	var transparency = function (x) {
 		return 1 - x;
@@ -13047,7 +13581,6 @@ var $author$project$MainPage$updateUrl = F2(
 			form,
 			{url: new_url});
 	});
-var $author$project$Color$white = A3($mdgriffith$elm_ui$Element$rgb, 1, 1, 1);
 var $author$project$MainPage$view = function (model) {
 	return A2(
 		$mdgriffith$elm_ui$Element$column,
@@ -13082,7 +13615,7 @@ var $author$project$MainPage$view = function (model) {
 							$mdgriffith$elm_ui$Element$el,
 							_List_fromArray(
 								[
-									$mdgriffith$elm_ui$Element$Font$color($author$project$Color$red),
+									$mdgriffith$elm_ui$Element$Font$color($author$project$Color$color.red),
 									$mdgriffith$elm_ui$Element$Font$size(14),
 									$mdgriffith$elm_ui$Element$alignRight,
 									$mdgriffith$elm_ui$Element$moveDown(6)
@@ -13109,12 +13642,101 @@ var $author$project$MainPage$view = function (model) {
 					text: model.form.url
 				}),
 				A2(
+				$mdgriffith$elm_ui$Element$row,
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$spacing(10)
+					]),
+				_List_fromArray(
+					[
+						A2(
+						$mdgriffith$elm_ui$Element$Input$checkbox,
+						_List_fromArray(
+							[
+								$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink),
+								$mdgriffith$elm_ui$Element$Font$size(20)
+							]),
+						{
+							checked: model.form.audio_only,
+							icon: $author$project$MainPage$audioOnlyCheckbox,
+							label: $mdgriffith$elm_ui$Element$Input$labelHidden(
+								model.form.audio_only ? 'Audo' : 'Video'),
+							onChange: $author$project$MainPage$UpdateFormAudioOnlyChanged
+						}),
+						A2(
+						$mdgriffith$elm_ui$Element$Input$radioRow,
+						_List_fromArray(
+							[
+								$mdgriffith$elm_ui$Element$Border$rounded(6)
+							]),
+						{
+							label: A2(
+								$mdgriffith$elm_ui$Element$Input$labelLeft,
+								_List_fromArray(
+									[
+										$mdgriffith$elm_ui$Element$paddingEach(
+										{bottom: 0, left: 15, right: 20, top: 0})
+									]),
+								$mdgriffith$elm_ui$Element$text('Format:')),
+							onChange: $author$project$MainPage$UpdateFormFormatChnaged,
+							options: $elm$core$List$concat(
+								_List_fromArray(
+									[
+										_List_fromArray(
+										[
+											A2(
+											$mdgriffith$elm_ui$Element$Input$optionWith,
+											$author$project$MainPage$Auto,
+											A2($author$project$MainPage$formatButton, $author$project$MainPage$First, 'Auto'))
+										]),
+										model.form.audio_only ? _List_fromArray(
+										[
+											A2(
+											$author$project$MainPage$formatOption,
+											$author$project$MainPage$AudioFormat($author$project$MainPage$MP3),
+											$author$project$MainPage$Mid),
+											A2(
+											$author$project$MainPage$formatOption,
+											$author$project$MainPage$AudioFormat($author$project$MainPage$OPUS),
+											$author$project$MainPage$Mid),
+											A2(
+											$author$project$MainPage$formatOption,
+											$author$project$MainPage$AudioFormat($author$project$MainPage$AAC),
+											$author$project$MainPage$Mid),
+											A2(
+											$author$project$MainPage$formatOption,
+											$author$project$MainPage$AudioFormat($author$project$MainPage$WAV),
+											$author$project$MainPage$Last)
+										]) : _List_fromArray(
+										[
+											A2(
+											$author$project$MainPage$formatOption,
+											$author$project$MainPage$VideoFormat($author$project$MainPage$FLV),
+											$author$project$MainPage$Mid),
+											A2(
+											$author$project$MainPage$formatOption,
+											$author$project$MainPage$VideoFormat($author$project$MainPage$MP4),
+											$author$project$MainPage$Mid),
+											A2(
+											$author$project$MainPage$formatOption,
+											$author$project$MainPage$VideoFormat($author$project$MainPage$OGG),
+											$author$project$MainPage$Mid),
+											A2(
+											$author$project$MainPage$formatOption,
+											$author$project$MainPage$VideoFormat($author$project$MainPage$WEBM),
+											$author$project$MainPage$Last)
+										])
+									])),
+							selected: $elm$core$Maybe$Just(model.form.format)
+						})
+					])),
+				A2(
 				$mdgriffith$elm_ui$Element$Input$button,
 				_List_fromArray(
 					[
-						$mdgriffith$elm_ui$Element$Background$color($author$project$Color$blue),
-						$mdgriffith$elm_ui$Element$Font$color($author$project$Color$white),
-						$mdgriffith$elm_ui$Element$Border$color($author$project$Color$darkBlue),
+						$mdgriffith$elm_ui$Element$Background$color($author$project$Color$color.blue),
+						$mdgriffith$elm_ui$Element$Font$color($author$project$Color$color.white),
+						$mdgriffith$elm_ui$Element$Border$color($author$project$Color$color.darkBlue),
 						A2($mdgriffith$elm_ui$Element$paddingXY, 32, 16),
 						$mdgriffith$elm_ui$Element$Border$rounded(3)
 					]),
@@ -13122,20 +13744,6 @@ var $author$project$MainPage$view = function (model) {
 					label: $mdgriffith$elm_ui$Element$text('Download'),
 					onPress: $elm$core$Maybe$Just(
 						$author$project$MainPage$PostForm(model.form))
-				}),
-				A2(
-				$mdgriffith$elm_ui$Element$Input$checkbox,
-				_List_Nil,
-				{
-					checked: model.form.test,
-					icon: $mdgriffith$elm_ui$Element$Input$defaultCheckbox,
-					label: A2(
-						$mdgriffith$elm_ui$Element$Input$labelRight,
-						_List_Nil,
-						$mdgriffith$elm_ui$Element$text('Test')),
-					onChange: function (_v0) {
-						return $author$project$MainPage$None;
-					}
 				})
 			]));
 };
@@ -13871,7 +14479,7 @@ var $author$project$Files$queryFiles = $elm$http$Http$get(
 	});
 var $author$project$Files$init = _Utils_Tuple2($author$project$Files$initModel, $author$project$Files$queryFiles);
 var $author$project$MainPage$initModel = {
-	form: {test: true, url: ''}
+	form: {audio_only: false, format: $author$project$MainPage$Auto, url: ''}
 };
 var $elm$core$Platform$Cmd$map = _Platform_map;
 var $elm$core$Platform$Cmd$none = $elm$core$Platform$Cmd$batch(_List_Nil);
@@ -14235,12 +14843,29 @@ var $author$project$MainPage$formDecoder = A3(
 		$elm$json$Json$Decode$succeed($author$project$MainPage$PostFormResponse)));
 var $author$project$MainPage$formPostEncoder = function (form) {
 	return $elm$json$Json$Encode$object(
-		_List_fromArray(
-			[
-				_Utils_Tuple2(
-				'url',
-				$elm$json$Json$Encode$string(form.url))
-			]));
+		$elm$core$List$concat(
+			_List_fromArray(
+				[
+					_List_fromArray(
+					[
+						_Utils_Tuple2(
+						'url',
+						$elm$json$Json$Encode$string(form.url))
+					]),
+					form.audio_only ? _List_fromArray(
+					[
+						_Utils_Tuple2(
+						'audio_only',
+						$elm$json$Json$Encode$bool(form.audio_only))
+					]) : _List_Nil,
+					_Utils_eq(form.format, $author$project$MainPage$Auto) ? _List_Nil : _List_fromArray(
+					[
+						_Utils_Tuple2(
+						'format',
+						$elm$json$Json$Encode$string(
+							$author$project$MainPage$formatName(form.format)))
+					])
+				])));
 };
 var $elm$http$Http$jsonBody = function (value) {
 	return A2(
@@ -14262,6 +14887,27 @@ var $author$project$MainPage$update = F2(
 						model,
 						{form: new_form}),
 					$elm$core$Platform$Cmd$none);
+			case 'UpdateFormAudioOnlyChanged':
+				var form = model.form;
+				var new_form = _Utils_update(
+					form,
+					{audio_only: !form.audio_only, format: $author$project$MainPage$Auto});
+				return _Utils_Tuple2(
+					_Utils_update(
+						model,
+						{form: new_form}),
+					$elm$core$Platform$Cmd$none);
+			case 'UpdateFormFormatChnaged':
+				var format = msg.a;
+				var form = model.form;
+				var new_form = _Utils_update(
+					form,
+					{format: format});
+				return _Utils_Tuple2(
+					_Utils_update(
+						model,
+						{form: new_form}),
+					$elm$core$Platform$Cmd$none);
 			case 'PostForm':
 				var form = msg.a;
 				return _Utils_Tuple2(
diff --git a/Modules/Website/src/Color.elm b/Modules/Website/src/Color.elm
index 3ea7467..e9e6f55 100644
--- a/Modules/Website/src/Color.elm
+++ b/Modules/Website/src/Color.elm
@@ -3,26 +3,13 @@ module Color exposing (..)
 import Element
 
 
-white : Element.Color
-white =
-    Element.rgb 1 1 1
-
-
-grey : Element.Color
-grey =
-    Element.rgb 0.9 0.9 0.9
-
-
-blue : Element.Color
-blue =
-    Element.rgb 0 0 0.8
-
-
-red : Element.Color
-red =
-    Element.rgb 0.8 0 0
-
-
-darkBlue : Element.Color
-darkBlue =
-    Element.rgb 0 0 0.9
+color =
+    { blue = Element.rgb255 0x72 0x9F 0xCF
+    , darkCharcoal = Element.rgb255 0x2E 0x34 0x36
+    , lightBlue = Element.rgb255 0xC5 0xE8 0xF7
+    , darkBlue = Element.rgb 0 0 0.9
+    , lightGrey = Element.rgb255 0xE0 0xE0 0xE0
+    , white = Element.rgb255 0xFF 0xFF 0xFF
+    , grey = Element.rgb 0.9 0.9 0.9
+    , red = Element.rgb 0.8 0 0
+    }
diff --git a/Modules/Website/src/Files.elm b/Modules/Website/src/Files.elm
index 3ae6e05..dc34232 100644
--- a/Modules/Website/src/Files.elm
+++ b/Modules/Website/src/Files.elm
@@ -1,5 +1,6 @@
 module Files exposing (..)
 
+import Debug exposing (toString)
 import Element exposing (..)
 import Element.Background as Background
 import Element.Border as Border
@@ -10,7 +11,6 @@ import Http
 import Json.Decode exposing (Decoder, int, list, string, succeed)
 import Json.Decode.Pipeline exposing (required)
 import String exposing (left)
-import Debug exposing (toString)
 
 
 type alias File =
@@ -109,13 +109,23 @@ queryFiles =
 -- View --
 
 
-shadow : Attr decorative msg
-shadow =
+cardShadow : Attr decorative msg
+cardShadow =
     Border.shadow
-        { offset = ( 2, 2 )
-        , size = 2
-        , blur = 2
-        , color = rgb 0.5 0.5 0.5
+        { offset = ( 0, 4 )
+        , size = 4
+        , blur = 8
+        , color = rgba 0 0 0 0.2
+        }
+
+
+cardShadowOver : Attr decorative msg
+cardShadowOver =
+    Border.shadow
+        { offset = ( 0, 4 )
+        , size = 8
+        , blur = 16
+        , color = rgba 0 0 0 0.2
         }
 
 
@@ -123,11 +133,13 @@ viewFile : File -> Element Msg
 viewFile file =
     el
         [ width fill
-        , Background.color (rgb 0.8 0.8 0.8)
+
+        --        , Background.color (rgb 0.8 0.8 0.8)
         , padding 10
         , Border.rounded 3
-        , shadow
+        , cardShadow
         , height (px 110)
+        , mouseOver [ cardShadowOver ]
         ]
         (Element.column
             [ width fill
@@ -138,14 +150,14 @@ viewFile file =
                 [ el
                     [ Region.heading 1
                     , alignLeft
-                    , Font.size 24 
+                    , Font.size 24
                     ]
                     (text file.name)
                 , el
                     [ Region.heading 1
                     , alignRight
                     , Font.color (rgba 0 0 0 0.6)
-                    , Font.size 20 
+                    , Font.size 20
                     ]
                     (text (String.concat [ "[", file.status, "]" ]))
                 ]
@@ -154,12 +166,12 @@ viewFile file =
                 , Font.size 16
                 , spacingXY 0 10
                 ]
-                (text (String.concat ["File name: ", file.file_name]))
-            ,el
+                (text (String.concat [ "File name: ", file.file_name ]))
+            , el
                 [ Region.heading 2
                 , Font.size 16
                 ]
-                (text (String.concat ["Source: ", file.source]))
+                (text (String.concat [ "Source: ", file.source ]))
             , download
                 [ Region.footer
                 , Font.color (rgb 0 0 0.8)
@@ -167,7 +179,7 @@ viewFile file =
                 , alignBottom
                 , alignRight
                 ]
-                { url = String.concat ["http://127.0.0.1/api/file/", toString file.id ]
+                { url = String.concat [ "http://127.0.0.1/api/file/", toString file.id ]
                 , label = text "Download"
                 }
             ]
@@ -181,7 +193,7 @@ view model =
         , height shrink
         , centerX
         , spacing 36
-        , padding 10
+        , padding 20
         ]
         [ el
             [ Region.heading 1
@@ -202,7 +214,7 @@ view model =
                 Element.column
                     [ width fill
                     , centerX
-                    , spacing 10
+                    , spacing 20
                     ]
                     (List.map viewFile model.files)
         ]
diff --git a/Modules/Website/src/MainPage.elm b/Modules/Website/src/MainPage.elm
index e16209d..a7fd97a 100644
--- a/Modules/Website/src/MainPage.elm
+++ b/Modules/Website/src/MainPage.elm
@@ -11,11 +11,15 @@ import Http
 import Json.Decode exposing (Decoder, int, string, succeed)
 import Json.Decode.Pipeline exposing (required)
 import Json.Encode as Encode
+import List exposing (map3)
+import Tuple exposing (mapBoth)
+import Html exposing (form)
 
 
 type alias Form =
     { url : String
-    , test : Bool
+    , audio_only : Bool
+    , format : Format
     }
 
 
@@ -28,18 +32,62 @@ initModel : Model
 initModel =
     { form =
         { url = ""
-        , test = True
+        , audio_only = False
+        , format = Auto
         }
     }
 
 
 type Msg
     = UpdateForm Form
+    | UpdateFormAudioOnlyChanged Bool
+    | UpdateFormFormatChnaged Format
     | PostForm Form
     | PostResult (Result Http.Error PostFormResponse)
     | None
 
 
+type AudioFormats
+    = MP3
+    | OPUS
+    | AAC
+    | WAV
+
+audioFormatName : AudioFormats -> String
+audioFormatName format =
+    case format of
+        MP3 -> "mp3"
+        OPUS -> "opus"
+        AAC -> "aac"
+        WAV -> "wav"
+
+
+type VideoFormats
+    = FLV
+    | MP4
+    | OGG
+    | WEBM
+
+videoFormatName : VideoFormats -> String
+videoFormatName format =
+    case format of
+        FLV -> "flv"
+        MP4 -> "mp4"
+        OGG -> "ogg"
+        WEBM -> "wav"
+
+type Format
+    = Auto
+    | AudioFormat AudioFormats
+    | VideoFormat VideoFormats
+
+formatName : Format -> String
+formatName format =
+    case format of
+        Auto -> "Auto"
+        AudioFormat audio -> audioFormatName audio
+        VideoFormat video -> videoFormatName video
+
 
 -- -- Request -- --
 
@@ -57,9 +105,19 @@ formDecoder =
 
 formPostEncoder : Form -> Encode.Value
 formPostEncoder form =
-    Encode.object
-        [ ( "url", Encode.string form.url )
-        ]
+    Encode.object <|
+        List.concat
+            [ [ ( "url", Encode.string form.url ) ]
+            , if form.audio_only then
+                [ ( "audio_only", Encode.bool form.audio_only ) ]
+
+              else
+                []
+            , if form.format == Auto then
+                []
+            else
+                [( "format", Encode.string <| formatName form.format )]
+            ]
 
 
 
@@ -72,6 +130,26 @@ update msg model =
         UpdateForm new_form ->
             ( { model | form = new_form }, Cmd.none )
 
+        UpdateFormAudioOnlyChanged _ ->
+            let
+                form =
+                    model.form
+
+                new_form =
+                    { form | audio_only = not form.audio_only, format = Auto }
+            in
+            ( { model | form = new_form }, Cmd.none )
+
+        UpdateFormFormatChnaged format ->
+            let
+                form =
+                    model.form
+
+                new_form =
+                    { form | format = format }
+            in
+            ( { model | form = new_form }, Cmd.none )
+
         PostForm form ->
             ( model
             , Http.post
@@ -98,6 +176,99 @@ updateUrl form new_url =
 -- -- view -- --
 
 
+audioOnlyCheckbox : Bool -> Element msg
+audioOnlyCheckbox isChecked =
+    let
+        knob =
+            el
+                [ width <| px 36
+                , height <| px 36
+                , Border.rounded 6
+                , Border.width 2
+                , Border.color color.blue
+                , Background.color color.white
+                ]
+                none
+    in
+    el
+        [ width <| px 120
+        , height <| px 48
+        , centerY
+        , padding 4
+        , Border.rounded 6
+        , Border.width 2
+        , Border.color color.blue
+        , Background.color <|
+            if isChecked then
+                color.lightBlue
+
+            else
+                color.white
+        ]
+    <|
+        row [ width fill ] <|
+            if isChecked then
+                [ el [ centerX ] <| text "Audio", knob ]
+
+            else
+                [ knob, el [ centerX ] <| text "Video" ]
+
+
+type ButtonPosition
+    = First
+    | Mid
+    | Last
+
+
+
+--formatButton : ButtonPosition -> String -> OptionState -> Element Msg
+
+
+formatButton : ButtonPosition -> String -> Input.OptionState -> Element msg
+formatButton position label state =
+    let
+        borders =
+            case position of
+                First ->
+                    { left = 2, right = 2, top = 2, bottom = 2 }
+
+                Mid ->
+                    { left = 0, right = 2, top = 2, bottom = 2 }
+
+                Last ->
+                    { left = 0, right = 2, top = 2, bottom = 2 }
+
+        corners =
+            case position of
+                First ->
+                    { topLeft = 6, bottomLeft = 6, topRight = 0, bottomRight = 0 }
+
+                Mid ->
+                    { topLeft = 0, bottomLeft = 0, topRight = 0, bottomRight = 0 }
+
+                Last ->
+                    { topLeft = 0, bottomLeft = 0, topRight = 6, bottomRight = 6 }
+    in
+    el
+        [ paddingEach { left = 20, right = 20, top = 10, bottom = 10 }
+        , Border.roundEach corners
+        , Border.widthEach borders
+        , Border.color color.blue
+        , Background.color <|
+            if state == Input.Selected then
+                color.lightBlue
+
+            else
+                color.white
+        ]
+    <|
+        el [ centerX, centerY ] <|
+            text label
+
+
+formatOption format position =
+    Input.optionWith format <| formatButton position <| formatName format
+
 view : Model -> Element Msg
 view model =
     Element.column
@@ -118,7 +289,7 @@ view model =
             [ spacing 12
             , below
                 (el
-                    [ Font.color red
+                    [ Font.color color.red
                     , Font.size 14
                     , alignRight
                     , moveDown 6
@@ -131,21 +302,52 @@ view model =
             , onChange = \new -> updateUrl model.form new |> UpdateForm
             , label = Input.labelAbove [ Font.size 14 ] (text "Video Url")
             }
+        , Element.row
+            [ spacing 10 ]
+            [ Input.checkbox [ width shrink, Font.size 20 ]
+                { onChange = UpdateFormAudioOnlyChanged
+                , icon = audioOnlyCheckbox
+                , checked = model.form.audio_only
+                , label =
+                    Input.labelHidden <|
+                        if model.form.audio_only then
+                            "Audo"
+
+                        else
+                            "Video"
+                }
+            , Input.radioRow
+                [ Border.rounded 6 ]
+                { onChange = UpdateFormFormatChnaged
+                , selected = Just model.form.format
+                , label = Input.labelLeft [ paddingEach { bottom = 0, top = 0, left = 15, right = 20 } ] <| text "Format:"
+                , options =
+                    List.concat
+                        [ [ Input.optionWith Auto <| formatButton First "Auto" ]
+                        , if model.form.audio_only then
+                            [ formatOption (AudioFormat MP3) Mid 
+                            , formatOption (AudioFormat OPUS) Mid 
+                            , formatOption (AudioFormat AAC) Mid 
+                            , formatOption (AudioFormat WAV) Last 
+                            ]
+
+                          else
+                            [ formatOption (VideoFormat FLV) Mid 
+                            , formatOption (VideoFormat MP4) Mid 
+                            , formatOption (VideoFormat OGG) Mid 
+                            , formatOption (VideoFormat WEBM)Last 
+                            ]
+                        ]
+                }
+            ]
         , Input.button
-            [ Background.color blue
-            , Font.color white
-            , Border.color darkBlue
+            [ Background.color color.blue
+            , Font.color color.white
+            , Border.color color.darkBlue
             , paddingXY 32 16
             , Border.rounded 3
             ]
             { onPress = Just (PostForm model.form)
             , label = Element.text "Download"
             }
-        , Input.checkbox
-            []
-            { checked = model.form.test
-            , icon = Input.defaultCheckbox
-            , label = Input.labelRight [] (text "Test")
-            , onChange = \_ -> None
-            }
         ]