diff --git a/src/popup.html b/src/popup.html
index 6390d99..e48c3ac 100644
--- a/src/popup.html
+++ b/src/popup.html
@@ -13,78 +13,89 @@
 		height: 600px !important;
 		max-height: 600px !important;
 		overflow-y: scroll;
+		background-color: rgb(247, 245, 245);
 	}
 </style>
 </head>
 <body>
-	<div class="container">
-		<h4 class="center">SCRUM Helper</h4>
-		<h6 class="center">
-			SCRUM helper prefills the Scrums in google groups, with your FOSSASIA's contributions.
-		</h6>
-		<br />
-		<div class="row center">
-			<div class="switch">
-				<label>
-					Disable
-					<input type="checkbox" id="enable">
-					<span class="lever"></span>
-					Enable
-				</label>
-			</div>
-		</div>
-		<div class="row">
-			<div class="col s12">
-				<ul class="tabs">
-					<li class="tab col s6" title="I am doing CodeHeat!"><a id="codeheatTab" href="#codeheatBox">CodeHeat</a></li>
-					<li class="tab col s6" title="I am doing GSoC!"><a id="gsocTab" href="#gsocBox">GSoC</a></li>
-				</ul>
-			</div>
-		</div>
-		<div class="row">
-            <div class="input-field col s12">
-                <input placeholder="Your Project Name" id="projectName" type="text">
-                <label for="projectName">Your Project Name</label>
-            </div>
-			<div class="input-field col s12">
-				<input placeholder="Required for getting data from github" id="githubUsername" type="text">
-				<label for="githubUsername">Your Github Username</label>
-			</div>
-			<div class="col s12"><span>Fetch your contributions between:</span>
-				<input type="checkbox" class="filled-in" id="lastWeekContribution"/>
-				<label for="lastWeekContribution">Show past <span id="noDays"></span> from today</label>
-			</div>
+	<div class="container" style="background-color: rgba(245, 239, 239, 0.898); border-radius: 20px; margin-top: 2px;">
+			<div style=" padding: 4px; border-radius: 20px; margin-bottom: 4px;">
+				<div style="background-color: rgb(255, 255, 255); padding-top: 4px; padding-bottom: 1px; padding-left: 4px; padding-right: 8px; border-radius: 20px; margin-bottom: 4px;">
+					<h4 class="center">SCRUM Helper</h4> 
+					<h6 class="center">
+						SCRUM helper prefills the Scrums in google groups and email clients, with your FOSSASIA's contributions.
+					</h6>
+					<br />
+					<div class="row center">
+						<div class="switch">
+							<label>
+								Disable
+								<input type="checkbox" id="enable">
+								<span class="lever"></span>
+								Enable```
+							</label>
+						</div>
+					</div>
+					<div class="row">
+						<div class="col s12">
+							<ul class="tabs">
+								<li class="tab col s6" title="I am doing CodeHeat!"><a id="codeheatTab" href="#codeheatBox">CodeHeat</a></li>
+								<li class="tab col s6" title="I am doing GSoC!"><a id="gsocTab" href="#gsocBox">GSoC</a></li>
+							</ul>
+						</div>
+					</div>
+				</div>
+			<div>
 
-			<div class="input-field col s6">
-				<div>Starting Date:</div>
-				<input id="startingDate" type="date" class="datepicker" placeholder=" ">
-				
-			</div>
-			<div class="input-field col s6">
-				<div>Ending Date</div>
-				<input id="endingDate" type="date" class="datepicker" placeholder=" ">
-			</div>
-			<div class="col s12">
-				<br />
-				<input type="checkbox" class="filled-in" id="showOpenLabel"/>
-				<label for="showOpenLabel">Show Open/Closed Label</label>
-			</div>
-			<div class="input-field col s12">
-				<input placeholder="Reason" id="userReason" type="text">
-				<label for="userReason">What is stopping you from doing your work?</label>
-			</div>
-			<div class="col s12">
-				
-				<h5>Note:</h5>
-				<h6>
-					<ul>
-						<li>The PRs fetched are according to the date last reviewed by anyone. So if you reviewed a PR 10 days back, and someone reviewed it 2 days back, it will appear in your last week's activity. See <a target="_blank" href="https://github.com/fossasia/scrum_helper/issues/20">this issue</a>.
-						</li>
-						<li>By using the extension you understand that there might be discrepancies in the SCRUM generated. You are advised to edit the SCRUM afterwards to remove any discrepancies.
-						</li>
-					</ul>
-				</h6>
+			<div style="background-color: rgb(255, 255, 255); padding: 4px; padding-right: 8px; border-radius: 20px; margin-bottom: 4px;">
+				<div class="row ">
+					<div class="input-field col s12">
+						<input placeholder="Your Project Name" id="projectName" style="border: 1px solid #000000; padding: 2px; background-color: rgb(236, 235, 234); border-radius: 10px; height: 25px; margin-top: 5px; box-shadow: 0px 5px 5px rgb(229, 228, 228);" type="text">
+						<label class="black-text" for="projectName">Your Project Name</label>
+					</div>
+					<div class="input-field col s12">
+						<input placeholder="Required for getting data from github" id="projectName" style="border: 1px solid #000000; padding: 2px; background-color: rgb(236, 235, 234); border-radius: 10px; height: 25px; margin-top: 5px; box-shadow: 0px 5px 5px rgb(229, 228, 228);" type="text">
+						<label class="black-text" for="githubUsername">Your Github Username</label>
+					</div>
+					<div class="col s12"><span>Fetch your contributions between:</span>
+						<input type="checkbox" class="filled-in" id="lastWeekContribution"/>
+						<label class="black-text" for="lastWeekContribution">Show past <span id="noDays"></span> from today</label>
+					</div>
+
+					<div class="input-field col s6">
+						<div>Starting Date:</div>
+						<input id="startingDate" type="date" class="datepicker" placeholder=" ">
+						
+					</div>
+					<div class="input-field col s6">
+						<div>Ending Date</div>
+						<input id="endingDate" type="date" class="datepicker" placeholder=" ">
+					</div>
+					<div class="col s12">
+						<br />
+						<input type="checkbox" class="filled-in" id="showOpenLabel"/>
+						<label class="black-text" for="showOpenLabel">Show Open/Closed Label</label>
+					</div>
+					<div class="input-field col s12">
+						<input placeholder="Reason" id="userReason" type="text" style="border: 1px solid #000000; padding: 2px; background-color: rgb(236, 235, 234); border-radius: 10px; height: 25px; margin-top: 5px; box-shadow: 0px 5px 5px rgb(229, 228, 228);">
+						<label for="userReason">What is stopping you from doing your work?</label>
+					</div>
+				</div>
 			</div>
+			
+			<div style="background-color: rgb(255, 255, 255); padding: 2px; margin-top: 4px; border-radius: 20px;">
+				<div class="col s12">
+					<h5>Note:</h5>
+					<h6>
+						<ul>
+							<li>The PRs fetched are according to the date last reviewed by anyone. So if you reviewed a PR 10 days back, and someone reviewed it 2 days back, it will appear in your last week's activity. See <a target="_blank" href="https://github.com/fossasia/scrum_helper/issues/20">this issue</a>.
+							</li>
+							<li>By using the extension you understand that there might be discrepancies in the SCRUM generated. You are advised to edit the SCRUM afterwards to remove any discrepancies.
+							</li>
+						</ul>
+					</h6>
+				</div>
+			</div>	
 		</div>
 
 		<hr />