diff --git a/assets/css/style.css b/assets/css/style.css
index 33bb759..62199c6 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -125,7 +125,7 @@ nav.navbar.bootsnav {
 /*.navbar-brand*/
 .navbar-header a.navbar-brand,.navbar-header a.navbar-brand:hover,.navbar-header a.navbar-brand:focus {
     display: inline-block;
-    color: #d92cf9;
+    color: #FFC700;
     font-size: 20px;
     font-weight: 600;
     padding: 33px 0px 57px;
@@ -145,7 +145,7 @@ nav.navbar.bootsnav ul.nav > li > a {
     transition: 0.3s linear;
 }
 nav.navbar.bootsnav ul.nav > li > a {padding: 35px 10px;}
-nav.navbar.bootsnav ul.nav > li > a:hover,nav.navbar.bootsnav ul.nav > li > a:focus,nav.navbar.bootsnav ul.nav > li.active>a{color: #d92cf9;}
+nav.navbar.bootsnav ul.nav > li > a:hover,nav.navbar.bootsnav ul.nav > li > a:focus,nav.navbar.bootsnav ul.nav > li.active>a{color: #FFC700;}
 
 nav.navbar.bootsnav ul.nav > li.dropdown > a.dropdown-toggle:after {
     content: "";
@@ -155,7 +155,7 @@ nav.navbar.bootsnav ul.nav > li.dropdown span {
     margin-left: 15px;
 }
 .sticky-wrapper.is-sticky nav.navbar.bootsnav ul.nav > li > a {color:#6a708e;}
-.sticky-wrapper.is-sticky nav.navbar.bootsnav ul.nav > li > a:hover,.sticky-wrapper.is-sticky nav.navbar.bootsnav ul.nav > li > a:focus,.sticky-wrapper.is-sticky nav.navbar.bootsnav ul.nav > li.active>a{color: #d92cf9;}
+.sticky-wrapper.is-sticky nav.navbar.bootsnav ul.nav > li > a:hover,.sticky-wrapper.is-sticky nav.navbar.bootsnav ul.nav > li > a:focus,.sticky-wrapper.is-sticky nav.navbar.bootsnav ul.nav > li.active>a{color: #FFC700;}
 /*.nav li*/
 
 
@@ -169,7 +169,7 @@ nav.navbar.bootsnav ul.nav > li.dropdown span {
     -webkit-box-shadow: inset 0 0 8px #000;
 }
 .menu-ui-design::-webkit-scrollbar-thumb {
-  background-color: #d92cf9;
+  background-color: #FFC700;
 }
 /*.menu-ui-design*/
 
@@ -179,11 +179,11 @@ nav.navbar.bootsnav ul.nav > li.dropdown span {
 nav.navbar.bootsnav .navbar-toggle {
     position: relative;
     background-color: transparent;
-    border: 1px solid #d92cf9;
+    border: 1px solid #FFC700;
     padding: 10px;
     top: 0;
 }
-nav.navbar.bootsnav .navbar-toggle i{color: #d92cf9;}
+nav.navbar.bootsnav .navbar-toggle i{color: #FFC700;}
 /*.navbar-toggle */
 
 
@@ -197,10 +197,12 @@ nav.navbar.bootsnav .navbar-toggle i{color: #d92cf9;}
     justify-content: center;
     position:relative;
     background:url(../images/background.png)no-repeat;
+    background-size: 100% auto; /* Make the background width fill the width of the screen */
+    height: 100vh; /* Set the height to 100% of the viewport height */
     /* background-color: #FFC700; */
     /* background-size:cover; */
     /* background-position: center; */
-    height: 648px;;
+    /* height: 648px; */
 }
 .welcome-hero:before{
     position:absolute;
@@ -236,7 +238,7 @@ nav.navbar.bootsnav .navbar-toggle i{color: #d92cf9;}
     /*text-transform: uppercase;*/
     line-height: 1.5; 
 }
-.header-text h2 span {color: #d92cf9;}
+.header-text h2 span {color: #FFC700;}
 
 
 
@@ -420,7 +422,7 @@ nav.navbar.bootsnav .navbar-toggle i{color: #d92cf9;}
 }
 .timeline-horizontal-border i {
     font-size:  10px;
-    color: #d92cf9;
+    color: #FFC700;
     margin-right:  5px;
 }
 span.single-timeline-horizontal {
@@ -562,7 +564,7 @@ span.single-timeline-horizontal.spacial-horizontal-line {width: 88px;}
 }
 
 .timeline-content span>i, .experience-time span>i {
-    color: #d92cf9;
+    color: #FFC700;
     position: absolute;
     font-size: 10px;
     left: -14.5%;
@@ -655,11 +657,11 @@ span.single-timeline-horizontal.spacial-horizontal-line {width: 88px;}
     content: " ";
     width:100%;
     height: 100%;
-    background: #d92cf9;
-    background: -moz-linear-gradient(left, #d92cf9 0%, #b636ff 100%);
-    background: -webkit-linear-gradient(left, #d92cf9 0%,#b636ff 100%);
-    background: linear-gradient(to right, #d92cf9 0%,#b636ff 100%);
-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d92cf9', endColorstr='#b636ff',GradientType=1 );
+    background: #FFC700;
+    background: -moz-linear-gradient(left, #FFC700 0%, #b636ff 100%);
+    background: -webkit-linear-gradient(left, #FFC700 0%,#b636ff 100%);
+    background: linear-gradient(to right, #FFC700 0%,#b636ff 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFC700', endColorstr='#b636ff',GradientType=1 );
     -webkit-transform:scale(0);
     -moz-transform:scale(0);
     -ms-transform:scale(0);
diff --git a/index.html b/index.html
index 2a92bff..29ccf2e 100644
--- a/index.html
+++ b/index.html
@@ -116,15 +116,16 @@
 			<div class="section-heading text-center">
 				<h2>Overview</h2>
 			</div>
-			<div class="container">
+			<div class="container
 				<div class="about-content">
 					<div class="row">
-						<div class="event-description">
+						<div class="event-description" style="font-size: larger; font-weight: bold;">
 							This is a website for taxi drivers in Chicago. We want to help Chicago drivers find the areas and locations with the highest passenger flow through visualizing past passenger data, taking into account time factors such as seasons, time periods and weather.
 						</div>
 						<br><br>
 						<div class="event-description">
-							The data set we mainly use is Chicago 2023 Taxi Trip Dataset，sourced from Taxi Trips - 2023 | City of Chicago | Data Portal.
+							The data set we mainly use is Chicago 2023 Taxi Trip Dataset, sourced from <a href="https://data.cityofchicago.org/Transportation/Taxi-Trips-2023/e55j-2ewb/about_data">https://data.cityofchicago.org/Transportation/Taxi-Trips-2023/e55j-2ewb/about_data</a>
+
 						</div>
 						<br><br>
 						<div class="event-description">
@@ -183,11 +184,8 @@ <h2>The location with the highest number of orders.</p></h2>
 						<div class="container">
 							<div class="about-content">
 								<div class="row">
-									<div class="single-about-txt">
-										<h3>
-											<p>Picture waiting...</p>
-											<!-- <img src = "assets/images/viz/OrderInfluencedByHours.jpg"> -->
-										</h3>
+									<div class="single-about-txt text-center" style="margin-left: 300px;">
+											<iframe src="https://socialdatadash1-61a56570ae3b.herokuapp.com" frameborder="0" width="100%" height="670px"></iframe>
 									</div>								
 								</div>
 							</div>
@@ -250,6 +248,7 @@ <h2>The two areas with the most commuting.<br><br><br><p></h2>
 							<div class="row">
 								<div>
 									<iframe src="assets/html/MAP_PLOT.html" frameborder="0" width="100%" height="500"></iframe>
+									
 								</div>
 						</div>
 					</div>
@@ -284,9 +283,10 @@ <h2>The areas with the most long orders.<br><br><br><p></h2>
 					<div class="container">
 						<div class="about-content">
 							<div class="row">
-								<div>
-									<p>Dash Picture waiting</p>
-								</div>
+								<div class="single-about-txt text-center" style="margin-left: 55px;">
+										<iframe src="https://dash2-a606fc82305f.herokuapp.com" frameborder="0" width="100%" height="670px"></iframe>
+								</div>								
+							</div>
 						</div>
 					</div>
 					<div>