7 files changed, 52 insertions, 6 deletions
diff --git a/react-frontend/src/App.js b/react-frontend/src/App.js
index fd7d648..34632eb 100644
--- a/react-frontend/src/App.js
+++ b/react-frontend/src/App.js
@@ -5,6 +5,7 @@ import Visualization from './components/Visualization.js';
 import HubList from './components/HubList.js';
 import Loading from './components/Loading.js';
 import Modal from './components/Modal.js';
+import logo from './components/images/logo.png';
 
 // CSS import
 import './css/App.css';
@@ -64,7 +65,8 @@ function App() {
       {(!hasLoaded) ? <Loading></Loading> :     
         <div className="App">
           <Modal>PHP</Modal>
-          <header className="App-header">Welcome to WatchDogs!</header>
+          <header id="in-app-logo-holder" className="App-header">
+            <img id="in-app-logo" src={logo} alt="logo"/></header>
           <div className="Canvas-filler Canvas-filler-1"></div>
           <div className="Canvas-filler Canvas-filler-2"></div>
           <div className="Canvas-filler Canvas-filler-3"></div>
diff --git a/react-frontend/src/components/TimeSelector.js b/react-frontend/src/components/TimeSelector.js
index 6960807..652a9ec 100644
--- a/react-frontend/src/components/TimeSelector.js
+++ b/react-frontend/src/components/TimeSelector.js
@@ -34,7 +34,7 @@ function TimeSelector(props) {
         <DateSelector side={"left"} name={"Start Date"} className="Coord-select-left" clickedFunc={setCurrent}
           changedFunc={setStartDate}  disabled={current==='start' || props.isChanging} value={toValue(startDate)}></DateSelector>
         <div>
-          <h2>Adjust Timeframe :)</h2>
+          <h2>Adjust Timeframe</h2>
           <button className="Btn Route-btn" onClick={() => changeTimeframe()}
           disabled={current!=="" || props.isChanging}>Change Timeframe</button>
         </div>
diff --git a/react-frontend/src/components/images/logo.png b/react-frontend/src/components/images/logo.png
new file mode 100644
index 0000000..7e4e9ee
--- /dev/null
+++ b/react-frontend/src/components/images/logo.png
diff --git a/react-frontend/src/components/images/mainlogo.png b/react-frontend/src/components/images/mainlogo.png
new file mode 100644
index 0000000..a26df0f
--- /dev/null
+++ b/react-frontend/src/components/images/mainlogo.png
diff --git a/react-frontend/src/css/App.css b/react-frontend/src/css/App.css
index 90e9046..f632a7f 100644
--- a/react-frontend/src/css/App.css
+++ b/react-frontend/src/css/App.css
@@ -49,9 +49,14 @@
   font-size: calc(10px + 2vmin);
   color: white;
   z-index: 10;
-  background-color: #333333;
-  border-radius: 5px;
   margin: 5px;
+  
+}
+
+#in-app-logo-holder {
+  border: 7px solid rgb(7, 94, 12);
+  border-radius: 5px;
+  background-color: white;
 }
 
 .App-link {
@@ -73,4 +78,8 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
+}
+
+#in-app-logo {
+  width: 200px;
 }
 \ No newline at end of file
diff --git a/react-frontend/src/css/Landing.css b/react-frontend/src/css/Landing.css
index e6841f8..0a5a845 100644
--- a/react-frontend/src/css/Landing.css
+++ b/react-frontend/src/css/Landing.css
@@ -1,3 +1,7 @@
+html {
+    scroll-behavior: smooth;
+  }
+
 .nav-bar{
     position: fixed;
     top: 0px;
@@ -43,6 +47,7 @@ body {
     display: flex;
     flex-direction: column;
     width: 80vw;
+    scroll-behavior: smooth slow;
 }
 main {
     margin-top: 65px;
@@ -51,7 +56,7 @@ main {
 }
 
 .intro {
-    height: 1000px;  
+    height: 900px;  
     width: 100vw;
     background-color:  rgb(3, 2, 24);
     color: white;  
@@ -59,8 +64,27 @@ main {
     left: -10px;
 }
 
+#enter-watchdogs {
+    background-color: rgb(206, 206, 206);
+    color: rgba(10, 9, 71);
+    border: 2px solid rgb(255, 255, 255);
+    border-radius: 5px;
+    padding: 5px 10px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    height: 70px;
+    width: 200px;
+    font-weight: bold;
+    font-family:sans-serif;
+}
+#enter-watchdogs:hover {
+    background-color: #94ff73;
+  }
+
 .app-preview {
-    height: 1000px;
+    height: 900px;
     width: 100vw;
     background-color:  #b7ffb9;
     color: white;
@@ -70,6 +94,17 @@ main {
     left: -10px;
 }
 
+#preview {
+    width: 70vw;
+    border: 10px solid rgb(255, 255, 255);
+    border-radius: 5px;
+}
+
+#preview-text {
+    color:#868686;
+    font-size: small;
+}
+
 section {
   width: 100vw;
   overflow: hidden;
diff --git a/react-frontend/src/images/previewwatchdog.png b/react-frontend/src/images/previewwatchdog.png
new file mode 100644
index 0000000..56669d8
--- /dev/null
+++ b/react-frontend/src/images/previewwatchdog.png