diff --git a/Apollo/assets/images/s1.jpg b/Apollo/assets/images/s1.jpg
new file mode 100644
index 00000000..56e46e17
Binary files /dev/null and b/Apollo/assets/images/s1.jpg differ
diff --git a/Apollo/assets/images/s2.jpg b/Apollo/assets/images/s2.jpg
new file mode 100644
index 00000000..be22794f
Binary files /dev/null and b/Apollo/assets/images/s2.jpg differ
diff --git a/Apollo/assets/images/s3.jpg b/Apollo/assets/images/s3.jpg
new file mode 100644
index 00000000..64333ccf
Binary files /dev/null and b/Apollo/assets/images/s3.jpg differ
diff --git a/Apollo/assets/images/s5.jpg b/Apollo/assets/images/s5.jpg
new file mode 100644
index 00000000..62d00ade
Binary files /dev/null and b/Apollo/assets/images/s5.jpg differ
diff --git a/Apollo/assets/images/s6.jpg b/Apollo/assets/images/s6.jpg
new file mode 100644
index 00000000..217924ed
Binary files /dev/null and b/Apollo/assets/images/s6.jpg differ
diff --git a/Apollo/assets/views/editEmployeeDetails.html b/Apollo/assets/views/editEmployeeDetails.html
index 4fc76479..93ed996b 100644
--- a/Apollo/assets/views/editEmployeeDetails.html
+++ b/Apollo/assets/views/editEmployeeDetails.html
@@ -327,7 +327,7 @@
                                             <label>
                                                    Permanent Address
                                                 </label>
-                                            <textarea placeholder="Enter Permenent Address" tabindex="15" class="form-control textdsc" name="address1" ng-model="p.PermanentAddress"></textarea>
+                                            <textarea placeholder="Enter Permanent Address" tabindex="15" class="form-control textdsc" name="address1" ng-model="p.PermanentAddress"></textarea>
                                             <span class="error text-small block" ng-if="Form.address1.$dirty && Form.address1.$invalid">Permanent Address is required</span>
                                         </div>
                                         <div class="col-md-4 form-group" ng-class="{'has-error':Form.address2.$dirty && Form.address2.$invalid}">
diff --git a/Apollo/assets/views/employeeDetails.html b/Apollo/assets/views/employeeDetails.html
index 3856d551..f36c0137 100644
--- a/Apollo/assets/views/employeeDetails.html
+++ b/Apollo/assets/views/employeeDetails.html
@@ -343,7 +343,7 @@
                                             <label>
                                                    Permanent Address
                                                 </label>
-                                            <textarea placeholder="Enter Permenent Address" tabindex="15" class="form-control textdsc" name="address1" ng-model="myModel.address1"></textarea>
+                                            <textarea placeholder="Enter Permanent Address" tabindex="15" class="form-control textdsc" name="address1" ng-model="myModel.address1"></textarea>
                                             <span class="error text-small block" ng-if="Form.address1.$dirty && Form.address1.$invalid">Permanent Address is required</span>
                                         </div>
                                         <div class="col-md-4 form-group" ng-class="{'has-error':Form.address2.$dirty && Form.address2.$invalid}">
diff --git a/Apollo/assets/views/login_login.html b/Apollo/assets/views/login_login.html
index b34ff42f..8e94d429 100644
--- a/Apollo/assets/views/login_login.html
+++ b/Apollo/assets/views/login_login.html
@@ -1,3 +1,116 @@
+<style>
+ @import url(https://fonts.googleapis.com/css?family=Varela+Round);
+ 
+
+.slides {
+    padding: 0;
+    width: 100%;
+    height: 420px;
+    display: block;
+    margin: 0 auto;
+    position: relative;
+}
+
+.slides * {
+    user-select: none;
+    -ms-user-select: none;
+    -moz-user-select: none;
+    -khtml-user-select: none;
+    -webkit-user-select: none;
+    -webkit-touch-callout: none;
+}
+
+.slides input { display: none; }
+
+.slide-container { display: block; }
+
+.slide {
+    top: 0; 
+    width: 100%;
+    height: 420px;
+    display: block;
+    position: absolute;
+
+    transform: scale(0);
+
+    transition: all .7s ease-in-out;
+}
+
+.slide img {
+    width: 100%;
+    height: 100%;
+}
+
+.nav label {
+    width: 200px;
+    height: 100%;
+    display: none;
+    position: absolute;
+
+	  opacity: 0;
+    z-index: 9;
+    cursor: pointer;
+
+    transition: opacity .2s;
+
+    color: #FFF;
+    font-size: 156pt;
+    text-align: center;
+    line-height: 380px;
+    font-family: "Varela Round", sans-serif;
+    background-color: rgba(255, 255, 255, .3);
+    text-shadow: 0px 0px 15px rgb(119, 119, 119);
+}
+
+.slide:hover + .nav label { opacity: 0.5; }
+
+.nav label:hover { opacity: 1; }
+
+.nav .next { right: 0; }
+
+input:checked + .slide-container  .slide {
+    opacity: 1;
+
+    transform: scale(1);
+
+    transition: opacity 1s ease-in-out;
+}
+
+input:checked + .slide-container .nav label { display: block; }
+
+.nav-dots {
+	width: 100%;
+	bottom: 9px;
+	height: 11px;
+	display: block;
+	position: absolute;
+	text-align: center;
+}
+
+.nav-dots .nav-dot {
+	top: -5px;
+	width: 11px;
+	height: 11px;
+	margin: 0 4px;
+	position: relative;
+	border-radius: 100%;
+	display: inline-block;
+	background-color: rgba(0, 0, 0, 0.6);
+}
+
+.nav-dots .nav-dot:hover {
+	cursor: pointer;
+	background-color: rgba(0, 0, 0, 0.8);
+}
+
+input#img-1:checked ~ .nav-dots label#img-dot-1,
+input#img-2:checked ~ .nav-dots label#img-dot-2,
+input#img-3:checked ~ .nav-dots label#img-dot-3,
+input#img-4:checked ~ .nav-dots label#img-dot-4,
+input#img-5:checked ~ .nav-dots label#img-dot-5{
+	background: rgba(0, 0, 0, 0.8);
+}
+</style> 
 <!-- start: LOGIN -->
 <div class="row" style="margin-bottom: 1%;margin-top:-4%">
 	<div class="col-md-2 col-md-offset-1 col-xs-10 col-xs-offset-1">
@@ -55,56 +168,74 @@
 <div class="container-fluid container-fullw bg-white">
 	<div class="row">
 
-		<div class="col-sm-12">
-			<div class="col-sm-6">
-				<div class="panel panel-white no-radius text-center">
-					<div class="panel-body">
-						<span class="fa-stack fa-2x"> <i class="fa fa-square fa-stack-2x text-green"></i> <i class="fa fa-smile-o fa-stack-1x fa-inverse"></i> </span>
-						<h2 class="StepTitle">Announcement Will Coming Soon</h2><br>
-						<marquee><p class="text-small">
-							Announcement will coming soon.. stay turn.
-						</p></marquee>
-
-					</div>
-				</div>
-			</div>
-			<div class="col-sm-6">
-				<div class="panel panel-white no-radius text-center">
-					<div class="panel-body">
-						<span class="fa-stack fa-2x"> <i class="fa fa-square fa-stack-2x text-yellow"></i> <i class="fa fa-smile-o  fa-stack-1x fa-inverse"></i> </span>
-						<h2 class="StepTitle">Announcement Will Coming Soon</h2><br>
-						<marquee><p class="text-small">
-							Announcement will coming soon.. stay turn.
-						</p></marquee>
-
-					</div>
-				</div>
-			</div>
-			<div class="col-sm-6">
-				<div class="panel panel-white no-radius text-center">
-					<div class="panel-body">
-						<span class="fa-stack fa-2x"> <i class="fa fa-square fa-stack-2x text-purple"></i> <i class="fa fa-smile-o  fa-stack-1x fa-inverse"></i> </span>
-						<h2 class="StepTitle">Announcement Will Coming Soon</h2><br>
-						<marquee><p class="text-small">
-							Announcement will coming soon.. stay turn.
-						</p></marquee>
-
-					</div>
-				</div>
-			</div>
-			<div class="col-sm-6">
-				<div class="panel panel-white no-radius text-center">
-					<div class="panel-body">
-						<span class="fa-stack fa-2x"> <i class="fa fa-square fa-stack-2x text-azure"></i> <i class="fa fa-smile-o  fa-stack-1x fa-inverse"></i> </span>
-						<h2 class="StepTitle">Announcement Will Coming Soon</h2><br>
-						<marquee><p class="text-small">
-							Announcement will coming soon.. stay turn.
-						</p></marquee>
-
-					</div>
-				</div>
-			</div>
+		<div class="col-sm-12 col-xs-12">
+		 <ul class="slides">
+    <input type="radio" name="radio-btn" id="img-1" checked />
+    <li class="slide-container">
+		<div class="slide">
+			<img src="assets/images/s1.jpg" />
+        </div>
+		<div class="nav">
+			<label for="img-6" class="prev">&#x2039;</label>
+			<label for="img-2" class="next">&#x203a;</label>
 		</div>
+    </li>
+
+    <input type="radio" name="radio-btn" id="img-2" />
+    <li class="slide-container">
+        <div class="slide">
+          <img src="assets/images/s2.jpg" />
+        </div>
+		<div class="nav">
+			<label for="img-1" class="prev">&#x2039;</label>
+			<label for="img-3" class="next">&#x203a;</label>
+		</div>
+    </li>
+
+    <input type="radio" name="radio-btn" id="img-3" />
+    <li class="slide-container">
+        <div class="slide">
+          <img src="assets/images/s3.jpg" />
+        </div>
+		<div class="nav">
+			<label for="img-2" class="prev">&#x2039;</label>
+			<label for="img-4" class="next">&#x203a;</label>
+		</div>
+    </li>
+
+    <input type="radio" name="radio-btn" id="img-4" />
+    <li class="slide-container">
+        <div class="slide">
+          <img src="assets/images/s5.jpg" />
+        </div>
+		<div class="nav">
+			<label for="img-3" class="prev">&#x2039;</label>
+			<label for="img-5" class="next">&#x203a;</label>
+		</div>
+    </li>
+
+    <input type="radio" name="radio-btn" id="img-5" />
+    <li class="slide-container">
+        <div class="slide">
+          <img src="assets/images/s6.jpg" />
+        </div>
+		<div class="nav">
+			<label for="img-4" class="prev">&#x2039;</label>
+			<label for="img-6" class="next">&#x203a;</label>
+		</div>
+    </li>
+ 
+
+    <li class="nav-dots">
+      <label for="img-1" class="nav-dot" id="img-dot-1"></label>
+      <label for="img-2" class="nav-dot" id="img-dot-2"></label>
+      <label for="img-3" class="nav-dot" id="img-dot-3"></label>
+      <label for="img-4" class="nav-dot" id="img-dot-4"></label>
+      <label for="img-5" class="nav-dot" id="img-dot-5"></label> 
+    </li>
+</ul>
+
+	   </div>
 	</div>
 </div>
 <!-- End: View Of Announcement -->
\ No newline at end of file