diff --git a/client/about_us.html b/client/about_us.html
new file mode 100644
index 000000000..d3c581dcb
--- /dev/null
+++ b/client/about_us.html
@@ -0,0 +1,25 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Music: Broad Horizons</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="Wrapper">
+        <div class='header'>
+            <h2> INST377 group 102-01 </h2>
+        </div>
+        <p>
+            This is Minghan Cai and Filip Radmanovic's final project for INST377
+        </p>
+        <div class='footer'>
+            <p>Go to <a href='index.html'>Our project's main page</a></p>
+            <p>MingC98 <a href='https://github.com/MingC98/INST377-Lab-Work'>My Github account</a></p>
+            <p>eniteCZ <a href='https://github.com/eniteCZ/INST377-Lab-Work'>My Github account</a></p>
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
diff --git a/client/script.js b/client/script.js
index 948cee0db..22a5eb84f 100644
--- a/client/script.js
+++ b/client/script.js
@@ -139,11 +139,14 @@ function injectHTML(list) {
 async function init(){
     const submit = document.querySelector('#submit');
 
+    document.getElementById("music_list").style.display = "none";
+
     let songArray = await songNamesArray();
     submit.addEventListener('click', (e) => {
         e.preventDefault();
         injectHTML(songArray);
         console.log(songArray);
+        document.getElementById("music_list").style.display = "block";
     })
 
 }
diff --git a/client/styles.css b/client/styles.css
index e69de29bb..dbb25833e 100644
--- a/client/styles.css
+++ b/client/styles.css
@@ -0,0 +1,59 @@
+html {
+    background-color: rgb(130, 187, 231);
+    font-size: 16px;
+    min-width: 300px;
+    overflow-x: hidden;
+    overflow-y: scroll;
+  
+    /* these are specific to different browsers */
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+    -webkit-text-size-adjust: 100%;
+    -moz-text-size-adjust: 100%;
+    text-size-adjust: 100%;
+  }
+
+  .header {
+    font-size: 2em;
+    margin-block-start: 0.67em;
+    margin-block-end: 0.67em;
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+    font-weight: bold;
+  }
+
+  .header h2 {
+    font-size: 1em;
+  }
+  .wrapper {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    flex: 10;
+  }
+
+  .box {
+    background-color: rgba(36, 34, 163, 0.4);
+    border: 2px dashed;
+    border-radius: 4px;
+  
+    width: fit-content;
+    height: fit-content;
+    padding: 0.5rem;
+    margin: 0 auto;
+  }
+
+  .search_bar {
+    background-color: rgba(240, 248, 255, 0);
+    height: fit-content;
+    padding: 1.5rem;
+  }
+
+  .footer {
+    flex-shrink: 0;
+    padding: 1rem;
+    font-size: 1.2rem;
+    font-weight: 600;
+  }
\ No newline at end of file
diff --git a/index.html b/index.html
index 980cab4ed..5965a4f2b 100644
--- a/index.html
+++ b/index.html
@@ -7,11 +7,23 @@
     <link rel="stylesheet" href="./client/styles.css">
 </head>
 <body>
-    <h1> New Horizons </h1>
     <div class="Wrapper">
-        <button type="button", id="Submit">Broaden my horizon!</button>
+        <div class='header'>
+            <h1> New Horizons </h1>
+        </div>
+        <div>
+            <label for="music">Form playlist</label>
+            <input type="music" name="music" id="musico" />
+        </div>
+        <div class="search_bar">
+            <button type="button", id="Submit">Broaden my horizon!</button>
+        </div>
         <div class="box", id="music_list"></div>
+        <div class='footer'>
+            <p>Go to <a href='https://open.spotify.com/'>Spotify</a></p>
+        </div>
     </div>
     <script src="./client/script.js"></script>
 </body>
-</html>
\ No newline at end of file
+</html>
+
