diff --git a/.DS_Store b/.DS_Store
index 921a659..5ee08d0 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/recmu/api/src/schema.graphql b/recmu/api/src/schema.graphql
index e753f58..c40334b 100644
--- a/recmu/api/src/schema.graphql
+++ b/recmu/api/src/schema.graphql
@@ -150,6 +150,11 @@ type Query {
     )
 }
 
+type Query {
+  getSongCatalog(songName: String): [String]
+    @cypher(statement: "MATCH (s:song) RETURN s.name")
+}
+
 type Query {
   songCount: Int @cypher(statement: "MATCH (n:song) RETURN count(*) as count")
 }
diff --git a/recmu/web-react/src/App.js b/recmu/web-react/src/App.js
index 53d8e21..109f4b0 100644
--- a/recmu/web-react/src/App.js
+++ b/recmu/web-react/src/App.js
@@ -49,6 +49,7 @@ import {
 import { SearchOutlined } from '@material-ui/icons'
 import Dashboard from './components/Dashboard'
 import LikedSongs from './components/LikedSongs'
+import SongCatalogue from './components/SongCatalogue.js'
 
 function Copyright() {
   return (
@@ -266,9 +267,12 @@ export default function App() {
           {/* <Route exact path="/businesses" component={UserList} />z */}
           {/* <Route path="/aboutUs" component={AboutUs} /> */}
           {/* <Route exact path="/users" component={UserList} /> */}
+
           <Route path="/About" component={AboutUsPage} />
           {/* <SongCatalogue /> */}
+          {/* <Route path="Dashboard" component={Dashboard} /> */}
           <Route path="/likedSongs" component={LikedSongs} />
+          <Route path="/SongCatalogue" component={SongCatalogue} />
         </Switch>
       </div>
     )
@@ -299,7 +303,21 @@ export default function App() {
               noWrap
               className={classes.title}
             >
-              RecMu
+              <Link to="/" className={classes.navLink}>
+                RecMu
+              </Link>
+            </Typography>
+
+            <Typography
+              component="h1"
+              variant="h6"
+              color="inherit"
+              noWrap
+              className={classes.aboutUs}
+            >
+              <Link to="/SongCatalogue" className={classes.navLink}>
+                Song Catalog
+              </Link>
             </Typography>
 
             <Typography
diff --git a/recmu/web-react/src/components/AboutUs.js b/recmu/web-react/src/components/AboutUs.js
index 00b5f62..3be6bb3 100644
--- a/recmu/web-react/src/components/AboutUs.js
+++ b/recmu/web-react/src/components/AboutUs.js
@@ -9,18 +9,22 @@
 // }
 
 import * as React from 'react'
-//import * as ReactDOM from 'https://cdn.skypack.dev/react-dom@17.0.1'
-// import styles from "./AboutUs.scss";
 import './AboutUs.scss'
 
 function AboutUsPage() {
   return (
     <div className="wrapper">
       <Card
-        img="https://images.unsplash.com/photo-1536304929831-ee1ca9d44906?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ"
-        title="The Everyday Salad"
-        description="Take your boring salads up a knotch. This recipe is perfect for lunch
-          and only contains 5 ingredients!"
+        img="https://images.unsplash.com/photo-1600442715242-3e496a4d7ec8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1469&q=80"
+        title="Welcome to RecMu"
+        description="Prepare for RecMu...The finest musical recommendations, finally within your reach. With RecMu, it’s easy to find the right music or podcast for every moment – on your phone, your computer, your tablet and more.
+
+        There are millions of tracks and episodes on RecMu. So whether you’re behind the wheel, working out, partying or relaxing, the right music or podcast is always at your fingertips. Choose what you want to listen to, or let RecMu surprise you.
+        
+        You can also browse through the collections of friends, artists, and celebrities, or create a radio station and just sit back.
+        
+        Soundtrack your life with RecMu. 
+        Brought to you by Anni Shao, Paul Chon and Pranav Ghaskadbi"
       />
     </div>
   )
@@ -34,13 +38,9 @@ function Card(props) {
         <h2 className="card__title">{props.title}</h2>
         <p className="card__description">{props.description}</p>
       </div>
-      <button className="card__btn">View Recipe</button>
+      {/* <button className="card__btn">View Recipe</button> */}
     </div>
   )
 }
 
-//ReactDOM.render(<AboutUsPage />, document.getElementById('root'))
-
-// export default AboutUs
-
 export default AboutUsPage
diff --git a/recmu/web-react/src/components/AboutUs.scss b/recmu/web-react/src/components/AboutUs.scss
index 56442fa..b9ba575 100644
--- a/recmu/web-react/src/components/AboutUs.scss
+++ b/recmu/web-react/src/components/AboutUs.scss
@@ -33,22 +33,34 @@ body {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(12rem, 16rem));
   gap: 2rem;
-  justify-content: center;
+  justify-content: left;
+  align-items: center;
+  // height: 1200;
+  // width: 100%;
+
+  height: 80vh;
+  width: 40vh;
 }
 
 .card {
   overflow: hidden;
-  box-shadow: 0 2px 20px $clr-gray300;
+  // box-shadow: 0 2px 20px $clr-gray300;
   border-radius: $radius;
   display: flex;
   flex-direction: column;
+
+  // height: 2000;
+  // width: 1200px;
+
+  height: 90vh;
+  width: 80vw;
   justify-content: space-between;
   cursor: pointer;
   transition: transform 200ms ease-in;
-  background-color: #29e6a7;
+  background-color: whitesmoke;
 
   &__image {
-    height: 12rem;
+    height: 35rem;
     width: 100%;
     object-fit: cover;
   }
diff --git a/recmu/web-react/src/components/LikedSongs.js b/recmu/web-react/src/components/LikedSongs.js
index 7ce055b..fe6d330 100644
--- a/recmu/web-react/src/components/LikedSongs.js
+++ b/recmu/web-react/src/components/LikedSongs.js
@@ -14,11 +14,6 @@ const GET_LIKED_SONGS_QUERY = gql`
     findLikedSongs(userName: $userName)
   }
 `
-const GET_REL_ALBUMS_QUERY = gql`
-  query($albumName: String) {
-    findRelatedAlbums(albumName: $albumName)
-  }
-`
 
 const REMOVE_SONG_FROM_LIKES_QUERY = gql`
   query($userName: String, $songName: String) {
@@ -41,7 +36,7 @@ export default function LikedSongs() {
     console.log(error)
     return <p>Error: help!</p>
   }
-  console.log('Liked songs: ' + data)
+  console.log('Liked songs: ' + data.findLikedSongs)
 
   //   const [dislikeSongQuery, { loading2, error2, data2 }] = useLazyQuery(
   //     REMOVE_SONG_FROM_LIKES_QUERY
diff --git a/recmu/web-react/src/components/SongCatalogue.js b/recmu/web-react/src/components/SongCatalogue.js
index 969f75c..e681816 100644
--- a/recmu/web-react/src/components/SongCatalogue.js
+++ b/recmu/web-react/src/components/SongCatalogue.js
@@ -1,11 +1,9 @@
 import React from 'react'
-//import { Link } from 'react-router-dom'
 import { makeStyles } from '@material-ui/core/styles'
 import Typography from '@material-ui/core/Typography'
 import Title from './Title'
 import { useQuery, gql } from '@apollo/client'
 import { Box, Card } from '@material-ui/core'
-//import clsx from 'clsx'
 import { useTheme } from '@material-ui/core/styles'
 import FavoriteIcon from '@mui/icons-material/Favorite'
 import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder'
@@ -22,36 +20,41 @@ const useStyles = makeStyles({
   },
 })
 
-const GET_COUNT_QUERY = gql`
-  query() {
-    findSongCatalog()
+const GETSONGCATALOG = gql`
+  query($name: String) {
+    getSongCatalog(name: $name)
   }
 `
 
-export default function Deposits({ songName }) {
-  const theme = useTheme()
+// const GET_COUNT_QUERY = gql`
+//   query($songName: String) {
+//     findRelatedSongs(songName: $songName)
+//   }
+// `
 
+export default function SongCatalogue() {
+  const theme = useTheme()
+  const songName = 'anything'
   const classes = useStyles(theme)
   //const fixedHeightPaper = clsx(classes.paper, classes.fixedHeight)
 
-  const { loading, error, data } = useQuery(GET_COUNT_QUERY, {
-    variables: { songName },
-  })
+  // const { loading, error, data } = useQuery(GETSONGCATALOG, {
+  //   variables: { songName },
+  // })
+
+  const { loading, error, data } = useQuery(GETSONGCATALOG)
 
   if (loading) return 'Loading...'
   if (error) return <p>Error: help!</p>
+
+  console.log('Liked songs: ' + data.getSongCatalog)
   return (
     <React.Fragment>
       <h2>Our Music Catalog</h2>
-      <Title>Prepare your ears..{songName}</Title>
+      <Title>Prepare your ears..</Title>
       <Typography color="textSecondary" className={classes.depositContext}>
-        {data.findRelatedSongs.length} Songs found
+        {data.getSongCatalog.length} Songs found
       </Typography>
-      <div>
-        {/*<Link to="/songs" className={classes.navLink}>
-          View songs
-        </Link>*/}
-      </div>
       <Box
         sx={{
           display: 'flex',
@@ -64,7 +67,7 @@ export default function Deposits({ songName }) {
           flexdirection: 'column',
         }}
       >
-        {data.findRelatedSongs.map((result) => (
+        {data.getSongCatalog.map((result) => (
           // <h2 key={result.songName}>{result}</h2>
           <Card key={result.songName}>
             <Typography component="p" variant="h4" className={classes.results}>
@@ -79,3 +82,95 @@ export default function Deposits({ songName }) {
     </React.Fragment>
   )
 }
+
+// import React, { useState } from 'react'
+// import { useQuery, useLazyQuery, gql } from '@apollo/client'
+// import { useEffect } from 'react'
+// import ListGroup from 'react-bootstrap/ListGroup'
+// import Badge from 'react-bootstrap/Badge'
+// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+// import Button from 'react-bootstrap/Button'
+
+// import { faHeart } from '@fortawesome/free-solid-svg-icons'
+// import { faXmark } from '@fortawesome/free-solid-svg-icons'
+
+// export default function LikedSongs() {
+//   const [likedSongs, setLikedSongs] = useState([])
+//   const [userName, setUsername] = useState('Default')
+//   const [songToDislike, setSongToDislike] = useState('')
+
+//   const { loading, error, data } = useQuery(GET_LIKED_SONGS_QUERY, {
+//     variables: { userName },
+//   })
+//   if (loading) return 'Loading...'
+//   if (error) {
+//     console.log(error)
+//     return <p>Error: help!</p>
+//   }
+//   console.log('Liked songs: ' + data.findLikedSongs)
+
+//   //   const [dislikeSongQuery, { loading2, error2, data2 }] = useLazyQuery(
+//   //     REMOVE_SONG_FROM_LIKES_QUERY
+//   //   )
+//   //   const [dislikeSongQuery, { l, e, d }] = useLazyQuery(
+//   //     REMOVE_SONG_FROM_LIKES_QUERY
+//   //   )
+
+//   //   useEffect(() => {
+//   //     if (songToDislike) {
+//   //       dislikeSongQuery({
+//   //         variables: {
+//   //           userName: userName,
+//   //           songName: songToDislike,
+//   //         },
+//   //       })
+//   //     }
+//   //   }, [])
+
+//   //   const dislikeSong = (e) => {
+//   //     const songName = e.target.name
+//   //     setSongToDislike(songName)
+//   //     //   dislikeSongQuery({
+//   //     //     variables: { userName, songName },
+//   //     //   })
+//   //   }
+
+//   const createLikedSongsList = (row) => {
+//     return (
+//       <ListGroup.Item
+//         as="li"
+//         className="d-flex justify-content-between align-items-start"
+//       >
+//         <div className="ms-2 me-auto">
+//           <div className="fw-bold">{row}</div>
+//         </div>
+
+//         <FontAwesomeIcon
+//           className="mx-4"
+//           style={{ color: 'red', fontSize: '20px' }}
+//           icon={faHeart}
+//         />
+
+//         {/* <button name={row}>
+//           <FontAwesomeIcon
+//             style={{
+//               color: 'black',
+//               fontSize: '20px',
+//             }}
+//             icon={faXmark}
+//           />
+//           X
+//         </button> */}
+//       </ListGroup.Item>
+//     )
+//   }
+
+//   console.log('Liked songs: ', likedSongs)
+//   return (
+//     <div>
+//       <ListGroup>
+//         {data.findLikedSongs.map((i) => createLikedSongsList(i))}
+//       </ListGroup>
+//     </div>
+//   )
+// }
diff --git a/recmu/web-react/src/components/SongSearch.js b/recmu/web-react/src/components/SongSearch.js
index 9327d6c..7e170d0 100644
--- a/recmu/web-react/src/components/SongSearch.js
+++ b/recmu/web-react/src/components/SongSearch.js
@@ -71,8 +71,8 @@ export default function Deposits({ songName }) {
               {result}
             </Typography>
             {/* <FontAwesomeIcon icon="fa-solid fa-heart" /> */}
-            <FavoriteIcon />
-            <FavoriteBorderIcon />
+            {/* <FavoriteIcon />
+            <FavoriteBorderIcon /> */}
           </Card>
         ))}
       </Box>