diff --git a/index.html b/index.html
index 250afdf..e6acabf 100644
--- a/index.html
+++ b/index.html
@@ -15,73 +15,70 @@
 		<div class="banner">
 
 		</div>
-		<div class="options">
-			<h1>Lored's Markdown</h1>
-			<form class="options-grid-container">
-				<input class="txt-input" type="text" id="title" name="banner-title" placeholder="Title">
-				<input class="txt-input" type="text" id="subtitle" name="banner-subtitle" placeholder="Subtitle">
-				
-				<input class="txt-input" type="url" id="bg-img-link" name="bg-img-link" placeholder="Background Image link">
-				<input class="txt-input" type="url" id="icon" name="icon" placeholder="Icon name or link">
-				<div class="style-layout">
-					<label for="layout">Layout</label>
-					<select class="txt-input" name="layout" id="layout">
-						<option value="horizontal">Horizontal</option>
-						<option value="vertical">Vertical</option>
-					</select>
-				</div>
-
-				<div class="style-layout">
-					<label for="bg-color">Background</label>
-					<input type="color" id="bg-color" name="bg-color">
-				</div>
-
-				<div class="center-txt-vertically span-2" >
-					<input type="checkbox" id="rtl" name="rtl">
-					<label for="rtl">Right-to-left</label>
-				</div>
-				
-				<input class="txt-input span-2" type="url" name="repo-url" id="repo-url" placeholder="Repository url"> 
-
-				<div class="list-of-items">
-					<label for="show-info">Show info:</label>
-					<div class="center-txt-vertically">
-						<input type="checkbox" id="issues" value="issues" name="show-info">
-						<label for="issues">Issues</label><br>
+		<div class="centralize-verticaly">
+			<div class="options">
+				<h1>Lored's Markdown</h1>
+				<form class="options-grid-container">
+					<input class="txt-input" type="text" id="title" name="banner-title" placeholder="Title">
+					<input class="txt-input" type="text" id="subtitle" name="banner-subtitle" placeholder="Subtitle">
+			
+					<input class="txt-input" type="url" id="icon" name="icon" placeholder="Icon name or link">
+					<input class="txt-input" type="url" id="bg-img-link" name="bg-img-link" placeholder="Background Image link">
+					<div class="style-layout">
+						<label for="layout">Layout</label>
+						<select class="txt-input" name="layout" id="layout">
+							<option value="horizontal">Horizontal</option>
+							<option value="vertical">Vertical</option>
+						</select>
+						<div class="center-txt-vertically">
+							<input type="checkbox" id="rtl" name="rtl">
+							<label for="rtl">Right-to-left</label>
+						</div>
 					</div>
-					<div class="center-txt-vertically">
-						<input type="checkbox" id="prs" value="prs" name="show-info">
-						<label for="prs">Pull requests</label><br>
+					<div class="style-layout">
+						<label for="bg-color">Background</label>
+						<input type="color" id="bg-color" name="bg-color">
 					</div>
-					<div class="center-txt-vertically">
-						<input type="checkbox" id="contributors" value="contributors" name="show-info">
-						<label for="contributors">Contributors</label><br>
+			
+					<input class="txt-input span-all" type="url" name="repo-url" id="repo-url" placeholder="Repository url">
+					<div class="list-of-items">
+						<label for="show-info">Show info:</label>
+						<div class="center-txt-vertically">
+							<input type="checkbox" id="issues" value="issues" name="show-info">
+							<label for="issues">Issues</label><br>
+						</div>
+						<div class="center-txt-vertically">
+							<input type="checkbox" id="prs" value="prs" name="show-info">
+							<label for="prs">Pull requests</label><br>
+						</div>
+						<div class="center-txt-vertically">
+							<input type="checkbox" id="contributors" value="contributors" name="show-info">
+							<label for="contributors">Contributors</label><br>
+						</div>
+						<br>
 					</div>
-					<br>	
-				</div>
-
-				<div class="list-of-items">
-					<label for="deco">Event decoration:</label>
-
-					<div class="center-txt-vertically">
-						<input type="radio" id="halloween" value="halloween" name="deco">
-						<label for="halloween">Halloween</label><br>
+					<div class="list-of-items">
+						<label for="deco">Event decoration:</label>
+						<div class="center-txt-vertically">
+							<input type="radio" id="halloween" value="halloween" name="deco">
+							<label for="halloween">Halloween</label><br>
+						</div>
+						<div class="center-txt-vertically">
+							<input type="radio" id="christmas" value="christmas" name="deco">
+						<label for="christmas">Christmas</label><br>
+						</div>
+						<div class="center-txt-vertically">
+							<input type="radio" id="easter" value="easter" name="deco">
+						<label for="easter">Easter</label><br>
+						</div>
+						<div class="center-txt-vertically">
+							<input type="radio" id="pride" value="pride" name="deco">
+							<label for="pride">Pride month</label><br>
+						</div>
+			
 					</div>
-					<div class="center-txt-vertically">
-						<input type="radio" id="christmas" value="christmas" name="deco">
-					<label for="christmas">Christmas</label><br>
-					</div>
-					<div class="center-txt-vertically">
-						<input type="radio" id="easter" value="easter" name="deco">
-					<label for="easter">Easter</label><br>
-					</div>
-					<div class="center-txt-vertically">
-						<input type="radio" id="pride" value="pride" name="deco">
-						<label for="pride">Pride month</label><br>
-					</div>
-					
-				</div>
-			</form>
+				</form>
+			</div>
 		</div>
 	</div>
 </body>
diff --git a/src/css/style.css b/src/css/style.css
index 959769d..601bcd7 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -4,6 +4,9 @@
 	--banner-color: #b1b1b1;
 	--banner-bgc: #000;
 	--options-bgc: #0a0a0a;
+	--border-color: #404040;
+	--dark-txt-color: #404040;
+	--light-txt-color: #ffffff;
 }
 
 html, body {
@@ -38,20 +41,19 @@ body {
 }
 
 .options {
-	background-color: var(--options-bgc);
+	/* background-color: var(--options-bgc); */
 	color: white;
 	padding: 70px;
-	overflow: auto;
-}
+/* 	overflow: auto;
+ */}
 
 input::placeholder {
-	color:#404040;
+	color: var(--dark-txt-color);
 	text-shadow: none;
-
 }
 
 label {
-	color: #3c3c3c;
+	color: var(--dark-txt-color);
 	font-size: 1.5rem;
 }
 
@@ -63,23 +65,23 @@ h1, input {
 	text-shadow: 0 0 5px #fff;
 }
 
-.txt-input, select {
-	background: #0a0a0a;
-	border: solid 1px #404040;
+.txt-input, select, .style-layout > input[type="color"] {
+	background: var(--options-bgc);
+	border: solid 1px var(--border-color);
 	height: 3rem;
-	color: black;
 	border-radius: 6px;
-	width: 18rem;
+	width: 20rem;
 	
 	padding-left: 1rem;
 	padding-right: 1rem;
 	font-size: 1.5rem;
-	color: #fff;
+	color: var(--light-txt-color);
 	font-weight: 400;
 	transition: all .2s ease-in-out;
+	box-sizing: border-box;
 }
 
-input:focus, select:focus {
+input:focus, select:focus, .style-layout > input[type="color"]:focus {
 	outline: none !important;
 	border: solid 1px #a3a3a3 ;
 	box-shadow: 0px 0px 0px 4px #3f3f46;
@@ -88,13 +90,12 @@ input:focus, select:focus {
 .options-grid-container {
 	display: grid;
 	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
-	align-items: center;
+	align-items: start;
 	row-gap: 30px;
 }
 
 #layout {
-	color: #404040;
-	width: calc(20rem + 2px);
+	color: var(--dark-txt-color);
 }
 
 
@@ -115,6 +116,8 @@ input[type="radio"], input[type="checkbox"] {
 
 }
 
+/*checkbox*/
+
 input[type="radio"]:focus, input[type="checkbox"]:focus {
 	border-style: none;
 	box-shadow: none;
@@ -148,35 +151,21 @@ label {
 	gap: 10px;
 } 
 
-.span-2 {
+.span-all {
 	grid-column: 1 / -1;
 }
 
+#bg-img-link {
+	align-self: center;
+}
+
 .style-layout {
 	display: grid;
 	gap: 15px;
 }
 
-.style-layout > input[type="color"] {
-	margin: 0;
-	background: none;
-	justify-self: start;
-	height: 3rem;
-	width: calc(20rem + 2px);
-	border-radius: 6px;
-	border: solid 1px #404040;
-
-}
-
-.style-layout > input[type="color"]:focus {
-	outline: none !important;
-	border: solid 1px #a3a3a3 ;
-	box-shadow: 0px 0px 0px 4px #3f3f46;
-}
-
-
-.container > div {
-	row-gap: 100 px;
+ .style-layout > input[type="color"] {
+	padding: 0;
 }
 
 @media only screen and (max-width: 800px) {
@@ -192,3 +181,11 @@ label {
 		overflow-x: hidden;
 	}
 }
+
+.centralize-verticaly {
+	display: grid;
+	align-content: center;
+	background-color: var(--options-bgc);
+	overflow: auto;
+	overflow-x: hidden;
+}
\ No newline at end of file