diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 6ab6a4f..b9f7e15 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1976,6 +1976,17 @@
         "tslib": "^1.9.3"
       }
     },
+    "@material/image-list": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@material/image-list/-/image-list-5.1.0.tgz",
+      "integrity": "sha512-LFl7W8AFp2baFY38BBGVX5C6c/zZoPOsHsRMhVP8jvIH5q1BfUg6SaXkleos6Yxmy+18hdPnVuWdAQ38hhje8Q==",
+      "requires": {
+        "@material/feature-targeting": "^5.1.0",
+        "@material/shape": "^5.1.0",
+        "@material/theme": "^5.1.0",
+        "@material/typography": "^5.1.0"
+      }
+    },
     "@material/layout-grid": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/@material/layout-grid/-/layout-grid-5.1.0.tgz",
@@ -2232,6 +2243,16 @@
         "@rmwc/types": "^6.0.5"
       }
     },
+    "@rmwc/image-list": {
+      "version": "6.1.4",
+      "resolved": "https://registry.npmjs.org/@rmwc/image-list/-/image-list-6.1.4.tgz",
+      "integrity": "sha512-InoH774C/YtMeTbfG/+9z5TxOu0Nj1ZC7rS3xGdhPpIJ2FNtPvZQE8rD2+WlbscVR38fX8qX8LLHbjuMs63lyQ==",
+      "requires": {
+        "@material/image-list": "^5.1.0",
+        "@rmwc/base": "^6.1.4",
+        "@rmwc/types": "^6.0.5"
+      }
+    },
     "@rmwc/line-ripple": {
       "version": "6.1.4",
       "resolved": "https://registry.npmjs.org/@rmwc/line-ripple/-/line-ripple-6.1.4.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 664ead2..82e0a1a 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -7,6 +7,7 @@
     "@rmwc/drawer": "^6.1.4",
     "@rmwc/grid": "^6.1.4",
     "@rmwc/icon": "^6.1.4",
+    "@rmwc/image-list": "^6.1.4",
     "@rmwc/list": "^6.1.4",
     "@rmwc/textfield": "^6.1.4",
     "@rmwc/theme": "^6.1.4",
diff --git a/frontend/public/avatar.jpg b/frontend/public/avatar.jpg
new file mode 100644
index 0000000..ff8be14
Binary files /dev/null and b/frontend/public/avatar.jpg differ
diff --git a/frontend/public/places.jpg b/frontend/public/places.jpg
new file mode 100644
index 0000000..707f522
Binary files /dev/null and b/frontend/public/places.jpg differ
diff --git a/frontend/public/things.jpeg b/frontend/public/things.jpeg
new file mode 100644
index 0000000..d176154
Binary files /dev/null and b/frontend/public/things.jpeg differ
diff --git a/frontend/src/App.js b/frontend/src/App.js
index 83c37af..4f41842 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -20,7 +20,7 @@ const App = () => {
         options={{
           primary: '#812ce5',
           secondary: '#ffffff',
-          onPrimary: '#ffffff',
+          onPrimary: '#812ce5',
           textPrimaryOnBackground: '#000',
         }}
       >
diff --git a/frontend/src/App.scss b/frontend/src/App.scss
index 2b7b7a5..b640bf5 100644
--- a/frontend/src/App.scss
+++ b/frontend/src/App.scss
@@ -2,7 +2,7 @@ $font: 'Inter', sans-serif !important;
 $primary-color: #ffffff;
 $secondary-color: #812ce5;
 $font-color: #000000;
-$link-color: #4c959a;
+$link-color: #4800b2;
 $primary-light-color: #eadafb;
 $primary-dark-color: #4800b2;
 
@@ -45,13 +45,14 @@ p {
 }
 
 .top-app-bar {
-  background-color: $secondary-color;
+  background-color: $primary-color;
+  border-bottom: 1px solid #e0e0e0;
 }
 
 .header-title {
   display: flex;
   text-decoration: none;
-  color: #ffffff !important;
+  color: #812ce5 !important;
   align-content: space-between;
 }
 
@@ -65,6 +66,7 @@ p {
 /* sidenav styles start */
 .drawer {
   position: fixed;
+  margin: 1px 0px !important;
 }
 
 .drawer-content {
@@ -130,11 +132,15 @@ p {
 
 .search-bar {
   border-radius: 4px !important;
-  background-color: white !important;
+  background-color: #f1f3f4 !important;
   height: 40px;
   width: 100%;
 }
 
+.search-bar:focus {
+  outline: none !important;
+}
+
 @media only screen and (max-width: 600px) {
   .search-bar-section {
     max-width: 180px;
@@ -144,4 +150,4 @@ p {
 .grid-cols > .mdc-layout-grid__inner {
   display: flex;
   justify-content: space-between;
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/SideNav.js b/frontend/src/components/SideNav.js
index a96df42..f686306 100644
--- a/frontend/src/components/SideNav.js
+++ b/frontend/src/components/SideNav.js
@@ -50,7 +50,7 @@ const SideNav = (props) => {
                   className="nav-link"
                   activeClassName="activated"
                   exact
-                  to={item.link_to}
+                  to={`/${item.link_to}`}
                 >
                   <ListItem className="list-item">
                     <Icon className="side-nav-icon" icon={item.icon} />
diff --git a/frontend/src/components/explore/ExploreEntity.js b/frontend/src/components/explore/ExploreEntity.js
new file mode 100644
index 0000000..019a445
--- /dev/null
+++ b/frontend/src/components/explore/ExploreEntity.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  ImageList,
+  ImageListImage,
+  ImageListItem,
+  ImageListSupporting,
+  ImageListLabel,
+} from '@rmwc/image-list';
+import '@rmwc/image-list/styles';
+
+const ExploreEntity = ({ data }) => {
+  return (
+    <>
+      <ImageList
+        withTextProtection
+        style={{
+          columnGap: '12px',
+        }}
+      >
+        {data.map((src) => (
+          <ImageListItem key={src.image} style={{ marginBottom: '12px' }}>
+            <ImageListImage src={src.image} style={{ width: '180px' }} />
+            <ImageListSupporting>
+              <ImageListLabel>{src.label}</ImageListLabel>
+            </ImageListSupporting>
+          </ImageListItem>
+        ))}
+      </ImageList>
+    </>
+  );
+};
+
+ExploreEntity.propTypes = {
+  data: PropTypes.array,
+};
+
+export default ExploreEntity;
diff --git a/frontend/src/components/explore/ExploreEntityList.js b/frontend/src/components/explore/ExploreEntityList.js
new file mode 100644
index 0000000..9b38717
--- /dev/null
+++ b/frontend/src/components/explore/ExploreEntityList.js
@@ -0,0 +1,58 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  ImageList,
+  ImageListImage,
+  ImageListItem,
+  ImageListImageAspectContainer,
+} from '@rmwc/image-list';
+import '@rmwc/image-list/styles';
+
+const ExploreEntityList = ({ data, type }) => {
+  const stylePeopleList = {
+    radius: '50%',
+    width: '10%',
+    margin: '0px 6px 6px 6px',
+  };
+
+  const stylePlacesThigsList = {
+    radius: '6px',
+    width: '13%',
+    margin: '0px 6px 12px 6px',
+  };
+
+  return (
+    <>
+      <ImageList>
+        {data.map((src) => (
+          <ImageListItem
+            key={src}
+            style={
+              type === 'PeopleList' ? stylePeopleList : stylePlacesThigsList
+            }
+          >
+            <ImageListImageAspectContainer>
+              <ImageListImage
+                src={src}
+                style={{
+                  borderRadius:
+                    type === 'PeopleList'
+                      ? stylePeopleList.radius
+                      : stylePlacesThigsList.radius,
+                  cursor: 'pointer',
+                }}
+              />
+            </ImageListImageAspectContainer>
+          </ImageListItem>
+        ))}
+      </ImageList>
+    </>
+  );
+};
+
+ExploreEntityList.propTypes = {
+  type: PropTypes.string,
+  data: PropTypes.array,
+};
+
+export default ExploreEntityList;
diff --git a/frontend/src/components/header/Header.js b/frontend/src/components/header/Header.js
index 860c45b..24e6d16 100644
--- a/frontend/src/components/header/Header.js
+++ b/frontend/src/components/header/Header.js
@@ -30,6 +30,7 @@ const Header = ({ toggleSideNav }) => {
             <SearchBar />
           </TopAppBarSection>
           <TopAppBarSection alignEnd>
+            <TopAppBarActionItem icon="file_upload" />
             <TopAppBarActionItem icon="help" />
             <TopAppBarActionItem icon="settings" />
           </TopAppBarSection>
diff --git a/frontend/src/components/index.js b/frontend/src/components/index.js
index 1d2c0dd..2bf3058 100644
--- a/frontend/src/components/index.js
+++ b/frontend/src/components/index.js
@@ -1,5 +1,7 @@
 import Content from './Content';
 import SideNav from './SideNav';
 import Header from './header/Header';
+import ExploreEntityList from './explore/ExploreEntityList';
+import ExploreEntity from './explore/ExploreEntity';
 
-export { Content, SideNav, Header };
+export { Content, SideNav, Header, ExploreEntityList, ExploreEntity };
diff --git a/frontend/src/pages/explore/Explore.js b/frontend/src/pages/explore/Explore.js
index 1c2fc36..d38aeec 100644
--- a/frontend/src/pages/explore/Explore.js
+++ b/frontend/src/pages/explore/Explore.js
@@ -1,8 +1,41 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { Grid, GridCell } from '@rmwc/grid';
+import { ExploreEntityList } from '../../components';
 import '@rmwc/grid/styles';
 
+const peopleList = [
+  '/avatar.jpg',
+  '/avatar.jpg',
+  '/avatar.jpg',
+  '/avatar.jpg',
+  '/avatar.jpg',
+  '/avatar.jpg',
+  '/avatar.jpg',
+  '/avatar.jpg',
+  '/avatar.jpg',
+];
+
+const placesList = [
+  '/places.jpg',
+  '/places.jpg',
+  '/places.jpg',
+  '/places.jpg',
+  '/places.jpg',
+  '/places.jpg',
+  '/places.jpg',
+];
+
+const thingsList = [
+  '/things.jpeg',
+  '/things.jpeg',
+  '/things.jpeg',
+  '/things.jpeg',
+  '/things.jpeg',
+  '/things.jpeg',
+  '/things.jpeg',
+];
+
 const Explore = () => {
   return (
     <>
@@ -16,6 +49,11 @@ const Explore = () => {
           </Link>
         </GridCell>
       </Grid>
+      <Grid>
+        <GridCell desktop={12} tablet={12} phone={12}>
+          <ExploreEntityList type="PeopleList" data={peopleList} />
+        </GridCell>
+      </Grid>
       <Grid className="grid-cols">
         <GridCell desktop={10} tablet={6} phone={3}>
           Places
@@ -26,6 +64,11 @@ const Explore = () => {
           </Link>
         </GridCell>
       </Grid>
+      <Grid>
+        <GridCell desktop={12} tablet={12} phone={12}>
+          <ExploreEntityList type="PlacesList" data={placesList} />
+        </GridCell>
+      </Grid>
       <Grid className="grid-cols">
         <GridCell desktop={10} tablet={6} phone={3}>
           Things
@@ -36,6 +79,11 @@ const Explore = () => {
           </Link>
         </GridCell>
       </Grid>
+      <Grid>
+        <GridCell desktop={12} tablet={12} phone={12}>
+          <ExploreEntityList type="ThingsList" data={thingsList} />
+        </GridCell>
+      </Grid>
     </>
   );
 };
diff --git a/frontend/src/pages/explore/People.js b/frontend/src/pages/explore/People.js
index 7fbf506..4efe520 100644
--- a/frontend/src/pages/explore/People.js
+++ b/frontend/src/pages/explore/People.js
@@ -1,7 +1,45 @@
 import React from 'react';
+import { Grid, GridCell } from '@rmwc/grid';
+import { ExploreEntity } from '../../components';
 
 const People = () => {
-  return <>People</>;
+  const peopleData = [
+    { image: '/avatar.jpg', label: 'People' },
+    { image: '/avatar.jpg', label: 'People' },
+    { image: '/avatar.jpg', label: 'People' },
+    { image: '/avatar.jpg', label: 'People' },
+    { image: '/avatar.jpg', label: 'People' },
+    { image: '/avatar.jpg', label: 'People' },
+    { image: '/avatar.jpg', label: 'People' },
+    { image: '/avatar.jpg', label: 'People' },
+    { image: '/avatar.jpg', label: 'People' },
+    { image: '/avatar.jpg', label: 'People' },
+    { image: '/avatar.jpg', label: 'People' },
+    { image: '/avatar.jpg', label: 'People' },
+    { image: '/avatar.jpg', label: 'People' },
+    { image: '/avatar.jpg', label: 'People' },
+    { image: '/avatar.jpg', label: 'People' },
+    { image: '/avatar.jpg', label: 'People' },
+    { image: '/avatar.jpg', label: 'People' },
+    { image: '/avatar.jpg', label: 'People' },
+    { image: '/avatar.jpg', label: 'People' },
+    { image: '/avatar.jpg', label: 'People' },
+  ];
+
+  return (
+    <>
+      <Grid className="grid-cols">
+        <GridCell desktop={10} tablet={6} phone={3}>
+          People
+        </GridCell>
+      </Grid>
+      <Grid>
+        <GridCell desktop={12} tablet={12} phone={12}>
+          <ExploreEntity data={peopleData} />
+        </GridCell>
+      </Grid>
+    </>
+  );
 };
 
 export default People;
diff --git a/frontend/src/pages/explore/Places.js b/frontend/src/pages/explore/Places.js
index bd99f8b..eab6334 100644
--- a/frontend/src/pages/explore/Places.js
+++ b/frontend/src/pages/explore/Places.js
@@ -1,7 +1,45 @@
 import React from 'react';
+import { Grid, GridCell } from '@rmwc/grid';
+import { ExploreEntity } from '../../components';
 
 const Places = () => {
-  return <>Places</>;
+  const placesData = [
+    { image: '/places.jpg', label: 'Places' },
+    { image: '/places.jpg', label: 'Places' },
+    { image: '/places.jpg', label: 'Places' },
+    { image: '/places.jpg', label: 'Places' },
+    { image: '/places.jpg', label: 'Places' },
+    { image: '/places.jpg', label: 'Places' },
+    { image: '/places.jpg', label: 'Places' },
+    { image: '/places.jpg', label: 'Places' },
+    { image: '/places.jpg', label: 'Places' },
+    { image: '/places.jpg', label: 'Places' },
+    { image: '/places.jpg', label: 'Places' },
+    { image: '/places.jpg', label: 'Places' },
+    { image: '/places.jpg', label: 'Places' },
+    { image: '/places.jpg', label: 'Places' },
+    { image: '/places.jpg', label: 'Places' },
+    { image: '/places.jpg', label: 'Places' },
+    { image: '/places.jpg', label: 'Places' },
+    { image: '/places.jpg', label: 'Places' },
+    { image: '/places.jpg', label: 'Places' },
+    { image: '/places.jpg', label: 'Places' },
+  ];
+
+  return (
+    <>
+      <Grid className="grid-cols">
+        <GridCell desktop={10} tablet={6} phone={3}>
+          Places
+        </GridCell>
+      </Grid>
+      <Grid>
+        <GridCell desktop={12} tablet={12} phone={12}>
+          <ExploreEntity data={placesData} />
+        </GridCell>
+      </Grid>
+    </>
+  );
 };
 
 export default Places;
diff --git a/frontend/src/pages/explore/Things.js b/frontend/src/pages/explore/Things.js
index 64bc2fb..823a892 100644
--- a/frontend/src/pages/explore/Things.js
+++ b/frontend/src/pages/explore/Things.js
@@ -1,7 +1,45 @@
 import React from 'react';
+import { Grid, GridCell } from '@rmwc/grid';
+import { ExploreEntity } from '../../components';
 
 const Things = () => {
-  return <>Things</>;
+  const thingsData = [
+    { image: '/things.jpeg', label: 'Things' },
+    { image: '/things.jpeg', label: 'Things' },
+    { image: '/things.jpeg', label: 'Things' },
+    { image: '/things.jpeg', label: 'Things' },
+    { image: '/things.jpeg', label: 'Things' },
+    { image: '/things.jpeg', label: 'Things' },
+    { image: '/things.jpeg', label: 'Things' },
+    { image: '/things.jpeg', label: 'Things' },
+    { image: '/things.jpeg', label: 'Things' },
+    { image: '/things.jpeg', label: 'Things' },
+    { image: '/things.jpeg', label: 'Things' },
+    { image: '/things.jpeg', label: 'Things' },
+    { image: '/things.jpeg', label: 'Things' },
+    { image: '/things.jpeg', label: 'Things' },
+    { image: '/things.jpeg', label: 'Things' },
+    { image: '/things.jpeg', label: 'Things' },
+    { image: '/things.jpeg', label: 'Things' },
+    { image: '/things.jpeg', label: 'Things' },
+    { image: '/things.jpeg', label: 'Things' },
+    { image: '/things.jpeg', label: 'Things' },
+  ];
+
+  return (
+    <>
+      <Grid className="grid-cols">
+        <GridCell desktop={10} tablet={6} phone={3}>
+          Things
+        </GridCell>
+      </Grid>
+      <Grid>
+        <GridCell desktop={12} tablet={12} phone={12}>
+          <ExploreEntity data={thingsData} />
+        </GridCell>
+      </Grid>
+    </>
+  );
 };
 
 export default Things;