diff --git a/Pipfile b/Pipfile
new file mode 100644
index 000000000..b5846df18
--- /dev/null
+++ b/Pipfile
@@ -0,0 +1,11 @@
+[[source]]
+name = "pypi"
+url = "https://pypi.org/simple"
+verify_ssl = true
+
+[dev-packages]
+
+[packages]
+
+[requires]
+python_version = "3.8"
diff --git a/api/accounts/models.py b/api/accounts/models.py
index 3cd3b25a3..3a480b860 100644
--- a/api/accounts/models.py
+++ b/api/accounts/models.py
@@ -42,6 +42,7 @@ class Profile(models.Model):
         'community.Event', related_name='people', null=True, blank=True)
     connections = models.ManyToManyField(
         'self', related_name='friends', null=True, blank=True)
+    
     # Posts, comments, and replies to be defined as foreign key on those respective models within forum app
     # CoTrip media defined as foreign key in community app
     groups = models.ManyToManyField(
diff --git a/api/community/serializers.py b/api/community/serializers.py
index 96e0398ea..3446e8083 100644
--- a/api/community/serializers.py
+++ b/api/community/serializers.py
@@ -4,7 +4,7 @@
 class GroupSerializer(serializers.ModelSerializer):
     class Meta:
         model = Group
-        fields = '__all__'
+        fields = ['title', 'description', 'location', 'posts', 'members']
 
 class EventSerializer(serializers.ModelSerializer):
     group = serializers.CharField()
diff --git a/api/trip/urls.py b/api/trip/urls.py
index 11317c7de..5546d070a 100644
--- a/api/trip/urls.py
+++ b/api/trip/urls.py
@@ -18,5 +18,5 @@
     path('activity', ActivityList.as_view(), name='activity_list'),
     path('location/bystate', LocationListByState.as_view(), name='location_list_by_state'),
     path('location/states', StateList.as_view(), name='state_list'),
-    path('activity/<int:pk>', ActivityDetail.as_view(), name='activity_detail')
+    path('activity/<int:pk>', ActivityDetail.as_view(), name='activity_detail'),
 ]
diff --git a/client/src/App.js b/client/src/App.js
index e43e1aa19..afb744be6 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -37,6 +37,7 @@ import { fas } from "@fortawesome/free-solid-svg-icons";
 import { far } from "@fortawesome/free-regular-svg-icons";
 import { BASE_URL } from "./services/constants";
 import { handleSignup, handleLogin, handleLogout } from "./services/User";
+import GroupPage from "./components/GroupPage/GroupPage"
 
 library.add(
   fab,
diff --git a/client/src/components/GroupPage/GroupPage.css b/client/src/components/GroupPage/GroupPage.css
new file mode 100644
index 000000000..e8902a0a0
--- /dev/null
+++ b/client/src/components/GroupPage/GroupPage.css
@@ -0,0 +1,8 @@
+.wrapper {
+    text-align: center;
+}
+
+h1{
+    display: inline-block;
+}
+
diff --git a/client/src/components/GroupPage/GroupPage.js b/client/src/components/GroupPage/GroupPage.js
new file mode 100644
index 000000000..f162757e7
--- /dev/null
+++ b/client/src/components/GroupPage/GroupPage.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import './GroupPage.css';
+import GroupCard from "../GroupCard/GroupCard";
+import Navbar from '../Navbar/Navbar';
+import Footer from '../Footer/Footer';
+import card1 from "assets/images/card-image-3.png";
+import card2 from "assets/images/card-image-2.png";
+import card3 from "assets/images/card-image.png";
+import people from "assets/images/profile_default.svg";
+
+
+const GroupPage = props => {
+   
+    return (
+        <div>
+            <Navbar 
+            to={"/member-page"} 
+            profileImage={people}
+            />
+            
+            
+            <div className='wrapper'>
+                <h1>Groups You Can Join!</h1>
+            </div>
+            <div className="HomePage__group-cards-container">
+            <span className="HomePage__groupcard-1">
+                <GroupCard
+                name="DIY with your kids"
+                members="98"
+                location="Boston, MA"
+                picture={card1}
+                />
+            </span>
+            <span className="HomePage__groupcard-2">
+                <GroupCard name="Mystery Stories!" members="213" location="NYC" picture={card2} />
+            </span>
+            <span className="HomePage__groupcard-3">
+                <GroupCard name="Bay Cruise" members="98" location="Lisbon" picture={card3} />
+            </span>
+            </div>
+            <Footer />
+        </div>
+    )
+}
+
+
+export default GroupPage
\ No newline at end of file
diff --git a/client/src/components/GroupPage/GroupPage.stories.js b/client/src/components/GroupPage/GroupPage.stories.js
new file mode 100644
index 000000000..100ad4ca0
--- /dev/null
+++ b/client/src/components/GroupPage/GroupPage.stories.js
@@ -0,0 +1,2 @@
+import React from "react";
+import { storiesOf } from "@storybook/react";
\ No newline at end of file
diff --git a/client/src/components/GroupPage/GroupPage.test.js b/client/src/components/GroupPage/GroupPage.test.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/client/src/components/UpcomingTripsCard/UpcomingTripsCard.js b/client/src/components/UpcomingTripsCard/UpcomingTripsCard.js
index 041885455..c24a90ae3 100644
--- a/client/src/components/UpcomingTripsCard/UpcomingTripsCard.js
+++ b/client/src/components/UpcomingTripsCard/UpcomingTripsCard.js
@@ -5,6 +5,7 @@ import Card from "../Card/Card";
 import TripCard from "../TripCard/TripCard";
 
 const UpcomingTripsCard = props => {
+
   return (
     <Card color="pink" className="UpcomingTripsCard" size="large">
       <header className="UpcomingTripsCard__header">Upcoming Trips</header>
diff --git a/client/src/pages/DirectoryPage/DirectoryGroups.js b/client/src/pages/DirectoryPage/DirectoryGroups.js
index 182ddb84b..c7a3f6366 100644
--- a/client/src/pages/DirectoryPage/DirectoryGroups.js
+++ b/client/src/pages/DirectoryPage/DirectoryGroups.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { Component } from "react";
 import "./DirectoryGroups.css";
 import NavBar from "../../components/Navbar/Navbar";
 import people from "assets/images/profile_default.svg";
@@ -14,223 +14,196 @@ import picture1 from "../../assets/images/card_small1.png";
 import picture2 from "../../assets/images/card_small2.png";
 import picture3 from "../../assets/images/card_small3.png";
 import Card from "../../components/Card/Card";
+import { BASE_URL } from '../../services/constants';
+import axios from "axios";
 
 function pillClick(val) {
   console.log(val);
 }
 
 // Page or
-const DirectoryGroups = props => {
-  return (
-    <div className="DirectoryPage">
-      <NavBar page={0} profileImage={people} />
-      <Banner background={Banner__Directory}>
-        <h3 style={{ margin: 0 }}>Directory: My Groups</h3>
-        <InputTextField
-          type="text"
-          variation="wide"
-          name="search directory"
-          placeholder="Search Groups"
-        />
-      </Banner>
-      <div className="secondNav">
-        <a className="secondNav" href="./people">
-          <Button text="My Friends" color="outline" size="long" />
-        </a>{" "}
-        <a className="secondNav" href="./groups">
-          <Button text="My Groups" color="purple" size="long" />
-        </a>
-      </div>
+class DirectoryGroups extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      groups: []
+    }
+  }
 
-      <div className="CommunityPage_SortByButton">
-        <div className="CommunityPage_SortByText">Sort By: Location </div>
-      </div>
-      <div className="CommunityPage_body">
-        <div>
-          <header className="CommunityPage__header">Group Location:</header>
-        </div>
-        <div className="CommunityPage__group-location-container">
-          <Pill
-            className="Pill"
-            text={"Traveling"}
-            size={"wide"}
-            color={"purple"}
-            icon={"white"}
-            onClick={pillClick}
-            selectId={0}
-          />
-          <Pill
-            className="Pill"
-            text={"Traveling"}
-            size={"wide"}
-            color={"pink"}
-            icon={"white"}
-            onClick={pillClick}
-            selectId={0}
-          />
-          <Pill
-            className="Pill"
-            text={"Traveling"}
-            size={"wide"}
-            color={"pink"}
-            icon={"white"}
-            onClick={pillClick}
-            selectId={0}
-          />
-          <Pill
-            className="Pill"
-            text={"Traveling"}
-            size={"wide"}
-            color={"pink"}
-            icon={"white"}
-            onClick={pillClick}
-            selectId={0}
-          />
-          <Pill
-            className="Pill"
-            text={"Traveling"}
-            size={"wide"}
-            color={"pink"}
-            icon={"white"}
-            onClick={pillClick}
-            selectId={0}
-          />{" "}
-          <Pill
-            className="Pill"
-            text={"Traveling"}
-            size={"wide"}
-            color={"pink"}
-            icon={"white"}
-            onClick={pillClick}
-            selectId={0}
-          />{" "}
-          <Pill
-            className="Pill"
-            text={"Traveling"}
-            size={"wide"}
-            color={"pink"}
-            icon={"white"}
-            onClick={pillClick}
-            selectId={0}
-          />
-          <Pill
-            className="Pill"
-            text={"Traveling"}
-            size={"wide"}
-            color={"pink"}
-            icon={"white"}
-            onClick={pillClick}
-            selectId={0}
-          />
-          <Pill
-            className="Pill"
-            text={"Traveling"}
-            size={"wide"}
-            color={"pink"}
-            icon={"white"}
-            onClick={pillClick}
-            selectId={0}
-          />
-          <Pill
-            className="Pill"
-            text={"Traveling"}
-            size={"wide"}
-            color={"pink"}
-            icon={"white"}
-            onClick={pillClick}
-            selectId={0}
+  componentDidMount() {
+    axios.get(`${BASE_URL}/groups`)
+      .then(response => {
+        this.setState({ 
+          groups: response.data
+        })
+      })
+      .catch(error => {
+        console.log('Error while fetching and parsing API request', error);
+      })
+  }
+
+  render() {
+    console.log(this.state)
+    const groups = this.state.groups ? this.state.groups : [];
+    return (
+      <div className="DirectoryPage">
+        <NavBar page={0} profileImage={people} />
+        <Banner background={Banner__Directory}>
+          <h3 style={{ margin: 0 }}>Directory: My Groups</h3>
+          <InputTextField
+            type="text"
+            variation="wide"
+            name="search directory"
+            placeholder="Search Groups"
           />
-        </div>{" "}
-        <a className="seeMore-Button">See More</a>
-        <div>
-          <header className="CommunityPage__header">Groups in WASHINGTON, DC:</header>
+        </Banner>
+        <div className="secondNav">
+          <a className="secondNav" href="./people">
+            <Button text="My Friends" color="outline" size="long" />
+          </a>{" "}
+          <a className="secondNav" href="./groups">
+            <Button text="My Groups" color="purple" size="long" />
+          </a>
         </div>
-        <div className="CommunityPage__groups-in-city-container">
-          <div className="CommunityPage__groupCard-single">
-            <GroupCard
-              name="DIY with your kids"
-              members="98 Members"
-              location="Mixed Locations"
-              picture={picture1}
-            />
+
+        <div className="CommunityPage_SortByButton">
+          <div className="CommunityPage_SortByText">Sort By: Location </div>
+        </div>
+        <div className="CommunityPage_body">
+          <div>
+            <header className="CommunityPage__header">Group Location:</header>
           </div>
-          <div className="CommunityPage__groupCard-single">
-            <GroupCard
-              name="Moms traveling to Hawaii"
-              members="5"
-              location="Chicago, IL"
-              picture={picture2}
+          <div className="CommunityPage__group-location-container">
+           
+            <Pill
+              className="Pill"
+              text={"Traveling"}
+              size={"wide"}
+              color={"purple"}
+              icon={"white"}
+              onClick={pillClick}
+              selectId={0}
             />
-          </div>{" "}
-          <div className="CommunityPage__groupCard-single">
-            <GroupCard
-              name="DIY with your kids"
-              size="wide"
-              members="98 Members"
-              location="Mixed Locations"
-              picture={picture1}
+            <Pill
+              className="Pill"
+              text={"Traveling"}
+              size={"wide"}
+              color={"pink"}
+              icon={"white"}
+              onClick={pillClick}
+              selectId={0}
             />
-          </div>
-          <div className="CommunityPage__groupCard-single">
-            <GroupCard
-              name="Moms traveling to Hawaii"
-              members="5"
-              location="Chicago, IL"
-              picture={picture2}
+            <Pill
+              className="Pill"
+              text={"Traveling"}
+              size={"wide"}
+              color={"pink"}
+              icon={"white"}
+              onClick={pillClick}
+              selectId={0}
             />
-          </div>{" "}
-          <div className="CommunityPage__groupCard-single">
-            <GroupCard
-              name="DIY with your kids"
-              members="98 Members"
-              location="Mixed Locations"
-              picture={picture1}
+            <Pill
+              className="Pill"
+              text={"Traveling"}
+              size={"wide"}
+              color={"pink"}
+              icon={"white"}
+              onClick={pillClick}
+              selectId={0}
             />
-          </div>
-          <div className="CommunityPage__groupCard-single">
-            <GroupCard
-              name="Moms traveling to Hawaii"
-              members="5"
-              location="Chicago, IL"
-              picture={picture2}
+            <Pill
+              className="Pill"
+              text={"Traveling"}
+              size={"wide"}
+              color={"pink"}
+              icon={"white"}
+              onClick={pillClick}
+              selectId={0}
+            />{" "}
+            <Pill
+              className="Pill"
+              text={"Traveling"}
+              size={"wide"}
+              color={"pink"}
+              icon={"white"}
+              onClick={pillClick}
+              selectId={0}
+            />{" "}
+            <Pill
+              className="Pill"
+              text={"Traveling"}
+              size={"wide"}
+              color={"pink"}
+              icon={"white"}
+              onClick={pillClick}
+              selectId={0}
             />
-          </div>{" "}
-          <div className="CommunityPage__groupCard-single">
-            <GroupCard
-              name="DIY with your kids"
-              members="98 Members"
-              location="Mixed Locations"
-              picture={picture1}
+            <Pill
+              className="Pill"
+              text={"Traveling"}
+              size={"wide"}
+              color={"pink"}
+              icon={"white"}
+              onClick={pillClick}
+              selectId={0}
             />
-          </div>
-          <div className="CommunityPage__groupCard-single">
-            <GroupCard
-              name="Moms traveling to Hawaii"
-              members="5"
-              location="Chicago, IL"
-              picture={picture2}
+            <Pill
+              className="Pill"
+              text={"Traveling"}
+              size={"wide"}
+              color={"pink"}
+              icon={"white"}
+              onClick={pillClick}
+              selectId={0}
             />
-          </div>
-          <div className="CommunityPage__groupCard-single">
-            <GroupCard
-              name="Group Name"
-              members="# of "
-              location="Location, State"
-              picture={picture3}
+            <Pill
+              className="Pill"
+              text={"Traveling"}
+              size={"wide"}
+              color={"pink"}
+              icon={"white"}
+              onClick={pillClick}
+              selectId={0}
             />
           </div>{" "}
-          <div className="CommunityPage__groupCard-single">
-            {" "}
-            <Card outline size="medium-wide-directory">
-              <a href="/">Discover New Groups</a>
-            </Card>{" "}
+          <a className="seeMore-Button">See More</a>
+          <div>
+            <header className="CommunityPage__header">Groups in WASHINGTON, DC:</header>
+          </div>
+          <div className="CommunityPage__groups-in-city-container">
+          {groups.map(group =>{
+            console.log(group)
+            let memberLength = 1;
+            if (memberLength){
+              const memberLength = group.members.length;
+            }
+            return(
+              <div className="CommunityPage__groupCard-single">
+              <GroupCard
+                name={group.title}
+                members={memberLength}
+                location={group.location}
+                picture={picture1}
+                id={group.id}
+              />
+              </div>
+            )
+          }) 
+          }
+          
+            <div className="CommunityPage__groupCard-single">
+              {" "}
+              <Card outline size="medium-wide-directory">
+                <a href="/">Discover New Groups</a>
+              </Card>
+            </div>
           </div>
+          <a className="seeAll-Button">See All</a>
         </div>
-        <a className="seeAll-Button">See All</a>
+        <Footer history={this.props.history} handle_logout={this.props.handle_logout} />
       </div>
-      <Footer history={props.history} handle_logout={props.handle_logout} />
-    </div>
-  );
+    );
+  }
 };
 
-export default DirectoryGroups;
+export default DirectoryGroups;
\ No newline at end of file
diff --git a/client/src/pages/MemberProfilePage/MemberProfilePage.js b/client/src/pages/MemberProfilePage/MemberProfilePage.js
index 31d42a611..6e4c83680 100644
--- a/client/src/pages/MemberProfilePage/MemberProfilePage.js
+++ b/client/src/pages/MemberProfilePage/MemberProfilePage.js
@@ -69,8 +69,6 @@ class MemberProfilePage extends Component {
  
   }
 
-
-
   // Runs after a component has been updated
   componentDidUpdate() {}
 
@@ -219,7 +217,7 @@ class MemberProfilePage extends Component {
           </div>
 
           <div className="MemberProfilePage__group-div-Her">
-            <GroupsList heading="Her Groups" moreGroups="View All" to="/" />
+            <GroupsList heading="Your Groups" moreGroups="View All" to="/" />
           </div>
 
           <Footer history={this.props.history} handle_logout={this.props.handle_logout} />