diff --git a/src/components/ConfigCover.css b/src/components/ConfigCover.css
index 527c92b..5e246c3 100644
--- a/src/components/ConfigCover.css
+++ b/src/components/ConfigCover.css
@@ -16,7 +16,7 @@ body {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	padding: 15px;
+	padding: 30px;
 }
 .blog-cover {
 	display: flex;
@@ -51,6 +51,7 @@ input[type=number]{
 	background-color: #00e68a;
 	margin-top: 10px;
 	box-shadow: 4px 4px #676683;
+	font-size: 18px;
 
 }
 
diff --git a/src/components/ConfigCover.js b/src/components/ConfigCover.js
index a31d6a7..f689359 100644
--- a/src/components/ConfigCover.js
+++ b/src/components/ConfigCover.js
@@ -50,6 +50,7 @@ class ConfigCover extends React.Component {
 						<input
 							type="color"
 							value={this.state.foregroundColor}
+							className="mr-4"
 							onChange={(e) => this.setState({ foregroundColor: e.target.value })}
 						/>
 						<label>Text</label>
@@ -114,7 +115,7 @@ class ConfigCover extends React.Component {
 
 					<div className="d-flex flex-row mt-2">
 						<label>Dowload As</label>
-						<select onChange={(e) => this.setState({ download: e.target.value })} className="form-control input-md" value={this.state.download}>
+						<select onChange={(e) => this.setState({ download: e.target.value })} className="form-control input-md ml-2" value={this.state.download}>
 							<option>PNG</option>
 							<option>JPEG</option>
 						</select>
diff --git a/src/components/CoverImage.css b/src/components/CoverImage.css
index f58b3f5..e486ee0 100644
--- a/src/components/CoverImage.css
+++ b/src/components/CoverImage.css
@@ -19,7 +19,7 @@
    align-items: center;
    vertical-align: middle;
    padding:50px;
-   font-size:40px;
+   font-size:35px;
    font-weight: 600;
    border:none;   
 }