diff --git a/src/App.js b/src/App.js
index 2f1bec3..e52eedb 100644
--- a/src/App.js
+++ b/src/App.js
@@ -7,14 +7,14 @@ import moment from 'moment'
 import styled from 'styled-components'
 import { Loader } from 'semantic-ui-react'
 import CssReset from 'styles/cssReset'
-import PrivateRoute from './components/PrivateRoute'
-import { initGA, logPageView } from './components/analytics/Analytics'
-import { useAuth0 } from './components/auth/react-auth0-wrapper'
-import NavBar from './components/nav/NavBar'
-import NavBottom from './components/nav/NavBottom'
+import PrivateRoute from 'components/PrivateRoute'
+import { initGA, logPageView } from 'components/analytics/Analytics'
+import { useAuth0 } from 'components/auth/react-auth0-wrapper'
+import NavBar from 'components/nav/NavBar'
 import * as types from 'actions/actionTypes'
-import { Mixpanel } from './components/analytics/Mixpanel'
-import MixpanelMessages from './components/analytics/MixpanelMessages'
+import { Mixpanel } from 'components/analytics/Mixpanel'
+import MixpanelMessages from 'components/analytics/MixpanelMessages'
+import NavBottom from 'components/nav/NavBottom'
 
 const Landing = lazy(() => import('components/Landing'))
 const Profile = lazy(() => import('components/profile/Profile'))
diff --git a/src/actions/actionTypes.js b/src/actions/actionTypes.js
index f73a73b..df2eea6 100644
--- a/src/actions/actionTypes.js
+++ b/src/actions/actionTypes.js
@@ -28,10 +28,6 @@ export const FETCH_POSTS_REQUEST = 'FETCH_POSTS_REQUEST'
 export const FETCH_POSTS_SUCCESS = 'FETCH_POSTS_SUCCESS'
 export const FETCH_POSTS_FAILURE = 'FETCH_POSTS_FAILURE'
 
-export const CREATE_POST_REQUEST = 'CREATE_POST_REQUEST'
-export const CREATE_POST_SUCCESS = 'CREATE_POST_SUCCESS'
-export const CREATE_POST_FAILURE = 'CREATE_POST_FAILURE'
-
 export const RECEIVE_POST_SUCCESS = 'RECEIVE_POST_SUCCESS'
 
 export const POST_LIKE_REQUEST = 'POST_LIKE_REQUEST'
@@ -101,10 +97,6 @@ export const SET_UNREAD_NOTIFICATION_NUM = 'SET_UNREAD_NOTIFICATION_NUM'
 export const INCREMENT_UNREAD_NOTIFICATION_NUM =
   'INCREMENT_UNREAD_NOTIFICATION_NUM'
 
-export const DELETE_POST_REQUEST = 'DELETE_POST_REQUEST'
-export const DELETE_POST_SUCCESS = 'DELETE_POST_SUCCESS'
-export const DELETE_POST_FAILURE = 'DELETE_POST_FAILURE'
-
 export const DELETE_REPLY_REQUEST = 'DELETE_REPLY_REQUEST'
 export const DELETE_REPLY_SUCCESS = 'DELETE_REPLY_SUCCESS'
 export const DELETE_REPLY_FAILURE = 'DELETE_REPLY_FAILURE'
diff --git a/src/actions/index.js b/src/actions/index.js
index 49a9825..059eac3 100644
--- a/src/actions/index.js
+++ b/src/actions/index.js
@@ -19,39 +19,6 @@ export const fetchGroupPosts = id => async dispatch => {
     dispatch({ type: actionTypes.FETCH_POSTS_FAILURE, payload: err })
   }
 }
-export const createGroupPost = (token, data, socket) => async dispatch => {
-  const { userId, groupId, post_content } = data
-  if (token) {
-    // If post content is not blank
-    if (!post_content.match(/^\s+$/)) {
-      try {
-        dispatch({ type: actionTypes.CREATE_POST_REQUEST })
-        const post = await axiosWithAuth([token]).post(
-          `/posts/group/${groupId}`,
-          {
-            user_id: userId,
-            group_id: groupId,
-            post_content: post_content,
-          }
-        )
-        dispatch({
-          type: actionTypes.CREATE_POST_SUCCESS,
-          payload: post.data.postResult,
-        })
-
-        socket.emit('groupPost', {
-          post: post.data.postResult,
-          room: groupId,
-        })
-
-        Mixpanel.activity(userId, MixpanelMessages.POST_CREATED)
-      } catch (err) {
-        console.log(err)
-        dispatch({ type: actionTypes.CREATE_POST_FAILURE, payload: err })
-      }
-    }
-  }
-}
 
 export const receiveGroupPost = data => async dispatch => {
   console.log('DATA IN RECEIVE', data)
@@ -419,7 +386,7 @@ export const createReply = (token, data, socket) => async dispatch => {
       })
     }
   } catch (err) {
-    console.log(err);
+    console.log(err)
   }
 }
 
@@ -453,16 +420,6 @@ export const receiveReplyDislike = data => dispatch => {
   dispatch({ type: actionTypes.RECEIVE_REPLY_DISLIKE, payload: data.likeType })
 }
 
-export const deleteGroupPost = (token, id) => async dispatch => {
-  dispatch({ type: actionTypes.DELETE_POST_REQUEST })
-  const deletedPost = await axiosWithAuth([token]).delete(`/posts/${id}`)
-  if (deletedPost.data) {
-    dispatch({
-      type: actionTypes.DELETE_POST_SUCCESS,
-      payload: deletedPost.data,
-    })
-  }
-}
 export const requestJoinPrivate = (token, data, socket) => async dispatch => {
   dispatch({ type: actionTypes.JOIN_PRIVATE_REQUEST })
   const { user, privateGroupID, adminIds } = data
diff --git a/src/components/Landing.js b/src/components/Landing.js
index 928e5b9..d7dfad4 100644
--- a/src/components/Landing.js
+++ b/src/components/Landing.js
@@ -4,17 +4,8 @@ import styled from 'styled-components'
 import { useAuth0 } from './auth/react-auth0-wrapper'
 import { withRouter } from 'react-router-dom'
 import NavSearch from './nav/NavSearch'
-import Logo2 from '../assets/landing/Logo2.png'
 import LandingImage from '../assets/landing/LandingImage.png'
-import DoSportsTogether from '../assets/landing/DoSportsTogether.png'
 import Logo from '../assets/landing/allegiance-logo.svg'
-import instagram from '../assets/landing/instagram.png'
-import twitter from '../assets/landing/twitter.png'
-import facebook from '../assets/landing/facebook.png'
-import NewWay from '../assets/landing/NewWay.png'
-import SportsBetter from '../assets/landing/SportsBetter.png'
-// import SportIcons from '../assets/landing/SportIcons.png'
-import Baseball from '../assets/landing/Baseball.jpg'
 import { Button } from 'semantic-ui-react'
 import { Icon } from 'semantic-ui-react'
 import { Link } from 'react-router-dom'
@@ -125,21 +116,6 @@ const SportIconsWrapper = styled.div`
   }
 `
 
-const P1 = styled.p`
-  color: white;
-`
-const P2 = styled.span`
-  color: white;
-  font-weight: bold;
-`
-
-const Title = styled.h1`
-  margin: 25px 0 0 25px
-  font-size: 3rem
-  font-weight: bold
-  color: white
-`
-
 const P = styled.p`
   color: white;
   font-size: 2.5rem;
@@ -148,7 +124,7 @@ const P = styled.p`
 const PBold = styled.p`
   color: white;
   font-size: 3rem;
-  font-weight: bold
+  font-weight: bold;
   line-height: 3.5rem;
 `
 
@@ -161,8 +137,6 @@ const Top = styled.div`
   justify-content: space-between;
   height: 67px;
   @media (max-width: 470px) {
-    // flex-direction: column;
-    // height: 100px;
     margin-top: 10px;
     align-items: center;
   }
@@ -190,7 +164,6 @@ const RightTop = styled.div`
   height: 15px;
   @media (max-width: 470px) {
     width: 100%;
-    // margin-bottom: 25px;
     margin-top: 0px;
     font-size: 1.5rem;
   }
@@ -229,9 +202,6 @@ const Bottom = styled.div`
   width: 100%;
   height: 80%;
   margin: 0 auto;
-  // @media (max-width: 700px) {
-  //   background-image: url(${Baseball});
-  // }
   @media (max-width: 500px) {
     text-align: center;
     align-items: center;
@@ -292,33 +262,7 @@ const H1 = styled.h1`
   font-size: 1rem;
   color: grey;
 `
-const RegisterBtn = styled.button`
-  &:hover {
-    background: #ed5959;
-    cursor: pointer;
-  }
 
-  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
-  z-index: 1;
-  width: 163px;
-  color: white;
-  background: #1a4570;
-  font-size: 20px;
-  font-family: 'Roboto', sans-serif;
-  @media (max-width: 800px) {
-    width: 90vw;
-    height: 45px;
-  }
-  //
-`
-const ImageMini = styled.img`
-  &:hover {
-    transition: all 0.2s ease-in-out;
-
-    transform: scale(1.5);
-    cursor: pointer;
-  }
-`
 const About = styled.div`
   &:hover {
     transition: all 0.2s ease-in-out;
diff --git a/src/components/allegiances/AddAllegiance.js b/src/components/allegiances/AddAllegiance.js
index dde70c6..f2b90e6 100644
--- a/src/components/allegiances/AddAllegiance.js
+++ b/src/components/allegiances/AddAllegiance.js
@@ -15,7 +15,7 @@ const AddAllegiance = props => {
   const loggedInAllegiances = useSelector(
     state => state.userReducer.loggedInAllegiances
   )
-  const id = props.id
+  const id = useSelector(state => state.userReducer.loggedInUser.id)
   const dispatch = useDispatch()
 
   //Fetches Auth0 token for axios call
@@ -86,8 +86,8 @@ const AddAllegiance = props => {
       {/* <Link */}
       <Segment
         raised
-        color='blue'
-        style={{ width: '90%', margin: 'auto', marginBottom: '15%' }}
+        color='white'
+        style={{ width: '90%', margin: 'auto', marginBottom: '5%' }}
       >
         <Tab menu={{ borderless: true, pointing: true }} panes={panes} />
         <Link to='/makeallegiance'>
@@ -110,16 +110,17 @@ const ButtonDiv = styled.div`
 
 const JoinBtn = styled.button`
   &:hover {
-    background: #4483cd;
-    cursor: pointer;
+    background-color: #1a4570 !important;
+    cursor: pointer !important;
   }
-  height: 54px;
-  width: 192px;
-  border: none;
-  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
-  color: white;
-  background: #ed5959;
-  font-size: 16px;
+  height: 54px !important;
+  max-width: 400px !important;
+  margin-bottom: 18px !important;
+  border: none !important;
+  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5) !important;
+  color: white !important;
+  background-color: #4483cd !important;
+  font-size: 16px !important;
   font-family: 'Roboto', sans-serif;
   @media (max-width: 500px) {
     width: 90%;
diff --git a/src/components/group-page/GroupAllegiances.js b/src/components/group-page/GroupAllegiances.js
index 35b9b55..b444e7c 100644
--- a/src/components/group-page/GroupAllegiances.js
+++ b/src/components/group-page/GroupAllegiances.js
@@ -34,6 +34,7 @@ const Allegiances = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
+  border: 4px solid red;
   h3 {
     margin: 0 auto;
   }
@@ -44,7 +45,7 @@ const ImageHolder = styled.div`
 
 const LogoHolder = styled.div`
   display: flex;
-  flexdirection: row;
+  flex-direction: row;
   justify-content: center;
   margin-top: 1%;
 `
diff --git a/src/components/groups/CreateGroup.js b/src/components/groups/CreateGroup.js
index 7645cd0..baab621 100644
--- a/src/components/groups/CreateGroup.js
+++ b/src/components/groups/CreateGroup.js
@@ -77,7 +77,7 @@ const CreateGroup = props => {
   return (
     <FormHolder>
       <FormSegment raised color='violet' style={{ margin: 'auto' }}>
-        <Form onSubmit={handleSubmit} error>
+        <Form onSubmit={handleSubmit} error style={{ fontSize: '1.5rem' }}>
           <h4 style={{ fontWeight: 'bold' }}>Select Image</h4>
           <BasicInfoHolder>
             <Modal
diff --git a/src/components/groups/NearbyGroups.js b/src/components/groups/NearbyGroups.js
index 5559ca2..b5f9a87 100644
--- a/src/components/groups/NearbyGroups.js
+++ b/src/components/groups/NearbyGroups.js
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import { useSelector } from 'react-redux'
-import { Loader, Button } from 'semantic-ui-react'
+import { Loader } from 'semantic-ui-react'
 import { axiosWithAuth } from '../utils/axiosWithAuth'
 import useGetToken from '../utils/useGetToken'
 import styled from 'styled-components'
diff --git a/src/components/nav/AllegianceAccordion.js b/src/components/nav/AllegianceAccordion.js
new file mode 100644
index 0000000..d2206ce
--- /dev/null
+++ b/src/components/nav/AllegianceAccordion.js
@@ -0,0 +1,62 @@
+import React, { useState } from 'react'
+import { Accordion, Icon } from 'semantic-ui-react'
+import { useSelector } from 'react-redux'
+import styled from 'styled-components'
+import ProfileAllegiances from '../profile/ProfileAllegiances'
+
+const AllegianceAccordion = () => {
+  const loggedInAllegiances = useSelector(
+    state => state.userReducer.loggedInAllegiances
+  )
+  const [activeIndex, setActiveIndex] = useState({ activeIndex: 0 })
+  const handleClick = (e, titleProps) => {
+    const { index } = titleProps
+
+    const newIndex = activeIndex.activeIndex === index ? -1 : index
+    setActiveIndex({ activeIndex: newIndex })
+  }
+
+  return (
+    <StyledAccordion>
+      <Accordion.Title
+        active={activeIndex.activeIndex === 0}
+        index={0}
+        onClick={handleClick}
+        className='title'
+      >
+        <Icon name='dropdown' />
+        My Alliances
+      </Accordion.Title>
+      <Accordion.Content
+        active={activeIndex.activeIndex === 0}
+        className='accordion-content'
+      >
+        <ProfileAllegiances
+          content={loggedInAllegiances || []}
+          type='group'
+          name={"You don't"}
+          appear={true}
+        />
+      </Accordion.Content>
+    </StyledAccordion>
+  )
+}
+
+export default AllegianceAccordion
+
+const StyledAccordion = styled(Accordion)`
+  position: sticky;
+  top: 64px;
+  left: 0px;
+  z-index: 1 !important;
+  .title {
+    color: #fff !important;
+    background-color: #1a4571;
+    &:hover {
+      text-shadow: 0px 0px 5px #fff !important;
+    }
+  }
+  .accordion-content {
+    padding: 0px !important;
+  }
+`
diff --git a/src/components/nav/AllegianceNav.js b/src/components/nav/AllegianceNav.js
deleted file mode 100644
index d3b6a7d..0000000
--- a/src/components/nav/AllegianceNav.js
+++ /dev/null
@@ -1,9 +0,0 @@
-// SKELETON CODE TO RENDER ALLEGIANCE TO NAV IF IMPLEMENTED
-
-// import React from 'react'
-
-// const AllegianceNav = () => {
-//   return <h1>AllegianceNav</h1>
-// }
-
-// export default AllegianceNav
diff --git a/src/components/nav/NavAccordion.js b/src/components/nav/GroupsAccordion.js
similarity index 87%
rename from src/components/nav/NavAccordion.js
rename to src/components/nav/GroupsAccordion.js
index 4e107a2..92b0bf1 100644
--- a/src/components/nav/NavAccordion.js
+++ b/src/components/nav/GroupsAccordion.js
@@ -4,7 +4,7 @@ import MyGroups from '../profile/MyGroups'
 import { useSelector } from 'react-redux'
 import styled from 'styled-components'
 
-const NavAccordion = () => {
+const GroupsAccordion = () => {
   const loggedInGroups = useSelector(state => state.myGroups)
   const [activeIndex, setActiveIndex] = useState({ activeIndex: 0 })
   const handleClick = (e, titleProps) => {
@@ -29,13 +29,17 @@ const NavAccordion = () => {
         active={activeIndex.activeIndex === 0}
         className='accordion-content'
       >
-        <MyGroups content={loggedInGroups || []} type='group' />
+        <MyGroups
+          content={loggedInGroups || []}
+          type='group'
+          first_name="You don't"
+        />
       </Accordion.Content>
     </StyledAccordion>
   )
 }
 
-export default NavAccordion
+export default GroupsAccordion
 
 const StyledAccordion = styled(Accordion)`
   position: sticky;
diff --git a/src/components/nav/NavBar.js b/src/components/nav/NavBar.js
index 68a3bbe..8262e5a 100644
--- a/src/components/nav/NavBar.js
+++ b/src/components/nav/NavBar.js
@@ -3,12 +3,10 @@ import { useAuth0 } from '../auth/react-auth0-wrapper'
 import { useSelector, useDispatch } from 'react-redux'
 import { useMediaQuery } from 'react-responsive'
 import { Mobile, Tablet } from '../utils/responsive'
-
 import useGetToken from '../utils/useGetToken'
 import UserNav from './UserNav'
 import Navigation from './Navigation'
 import NavSearch from './NavSearch'
-import NavBottom from './NavBottom'
 import styled from 'styled-components'
 import { Loader, Menu, Icon, Modal } from 'semantic-ui-react'
 import {
@@ -35,7 +33,6 @@ import {
   receiveFeedPost,
   receiveFeedReply,
 } from '../feed/actions/index'
-
 const NavBar = props => {
   const { location } = props
   const user = useSelector(state => state.userReducer.loggedInUser)
@@ -48,15 +45,12 @@ const NavBar = props => {
   const [token] = useGetToken()
   const { loading } = useAuth0()
   const [searchOpen, setSearchOpen] = useState(false)
-
   const isMobile = useMediaQuery({
     query: Mobile,
   })
-
   const isTablet = useMediaQuery({
     query: Tablet,
   })
-
   useEffect(() => {
     if (user) {
       const fetchRequests = async () => {
@@ -65,7 +59,6 @@ const NavBar = props => {
       fetchRequests()
     }
   }, [user, dispatch, token])
-
   useEffect(() => {
     const fetchData = async () => {
       if (token && user) {
@@ -99,7 +92,6 @@ const NavBar = props => {
           payload: 1,
         })
       }
-
       if (data.notification.type === 'group_accepted') {
         const group_id = data.notification.type_id
         dispatch(
@@ -180,7 +172,6 @@ const NavBar = props => {
     location.pathname,
     notifications.length,
   ])
-
   if (loading) {
     return (
       <Loader active size='large'>
@@ -253,11 +244,9 @@ const NavBar = props => {
           </Menu.Menu>
         </StickyNav>
       )}
-      {/* {user && props.location.pathname !== '/profile' && <NavBottom />} */}
     </>
   )
 }
-
 const NavIcon = styled(Icon)`
   color: #fff !important;
   opacity: 1 !important;
@@ -265,7 +254,6 @@ const NavIcon = styled(Icon)`
     text-shadow: 0px 0px 2px #fff !important;
   }
 `
-
 const StickyNav = styled(Menu)`
   position: sticky;
   top: 0;
@@ -278,9 +266,7 @@ const StickyNav = styled(Menu)`
   font-size: 1.4rem !important;
   margin-bottom: 0 !important;
 `
-
 const StyledMenuItem = styled(Menu.Item)`
   align-self: center !important;
 `
-
 export default NavBar
diff --git a/src/components/nav/NavBottom.js b/src/components/nav/NavBottom.js
index 0b3fc8f..47458fc 100644
--- a/src/components/nav/NavBottom.js
+++ b/src/components/nav/NavBottom.js
@@ -1,23 +1,14 @@
 import React from 'react'
-import NavAccordion from './NavAccordion'
-
-// ***ADD THESE 2 BACK IF WE ADD ALLEGIANCE TO NAV***
-// import AllegianceNav from './AllegianceNav'
+import GroupsAccordion from './GroupsAccordion'
+import AllegianceAccordion from './AllegianceAccordion'
 
 const NavBottom = () => {
   return (
-    <>
-      <NavAccordion />
-    </>
+    <div>
+      <GroupsAccordion />
+      {/* <AllegianceAccordion /> */}
+    </div>
   )
 }
 
-// ***ADD THESE 2 BACK IF WE ADD ALLEGIANCE TO NAV***
-// const BottomNav = styled.div`
-//   background-color: blue;
-//   color: white;
-//   padding: 7px;
-//   margin-bottom: 15px;
-// `
-
 export default NavBottom
diff --git a/src/components/notifications/InviteNotificationCard.js b/src/components/notifications/InviteNotificationCard.js
index 7bcf8ab..170c637 100644
--- a/src/components/notifications/InviteNotificationCard.js
+++ b/src/components/notifications/InviteNotificationCard.js
@@ -170,12 +170,6 @@ const InviteNotificationsCard = props => {
   )
 }
 
-const CardContent = styled.div`
-  display: flex;
-  width: 100%
-  justify-content: space-around;
-`
-
 const ButtonGroup = styled(Button.Group)`
   display: flex;
   flex-direction: row;
@@ -219,42 +213,4 @@ const CardMessage = styled.div`
   line-height: 25px;
 `
 
-// const CardGroup = styled.div`
-//   display: flex;
-//   flex-direction: column;
-//   align-items: center;
-//   width: 20%;
-//   margin: 1%;
-// `
-
-const Accept = styled.button`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  background: green;
-
-  border-radius: 5px;
-  color: white;
-  height: 40px
-  width: 50px;
-  margin: 1%;
-  border-style: none;
-  cursor: pointer;
-`
-const Decline = styled.button`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  background: red;
-
-  border-radius: 5px;
-  color: white;
-  width: 50px;
-  margin: 1%;
-  border-style: none;
-  cursor: pointer;
-`
-
 export default withRouter(InviteNotificationsCard)
diff --git a/src/components/posts/PostActivity.js b/src/components/posts/PostActivity.js
deleted file mode 100644
index bac90f7..0000000
--- a/src/components/posts/PostActivity.js
+++ /dev/null
@@ -1,95 +0,0 @@
-// import React from 'react'
-
-// ***********  this component does NOTHING  **********************
-
-import { useSelector } from 'react-redux'
-import { axiosWithAuth } from '../utils/axiosWithAuth'
-import useGetToken from '../utils/useGetToken'
-
-import styled from 'styled-components'
-import {
-  Favorite,
-  ThumbUp,
-  ChatBubbleOutline,
-  DeleteOutline,
-} from '@material-ui/icons'
-
-const PostActivity = props => {
-  const userId = useSelector(state => state.userReducer.loggedInUser.id)
-  const [token] = useGetToken()
-  const postLikeId = props.post.likes.find(like => like.user_id === userId)
-  async function addLike(e) {
-    e.preventDefault()
-    const like = await axiosWithAuth([token]).post(
-      `/posts_likes/post/${props.post.id}`,
-      {
-        user_id: userId,
-        post_id: props.post.id,
-      }
-    )
-  }
-
-  async function unLike(e) {
-    e.preventDefault()
-    const unLike = await axiosWithAuth([token]).delete(
-      `/posts_likes/${postLikeId.id}`
-    )
-    if (unLike) {
-    }
-  }
-
-  return (
-    <ActivityContainer>
-      <TopContainer>
-        <h3>{props.post.likes.length} Likes</h3>
-      </TopContainer>
-      <hr />
-      <BottomContainer>
-        <LikeContainer>
-          {!postLikeId && <ThumbUp onClick={addLike} />}
-          {postLikeId && <Favorite onClick={unLike} />}
-        </LikeContainer>
-
-        <ChatBubbleOutline />
-        <DeleteOutline onClick={() => props.deletePost(props.post.id)} />
-      </BottomContainer>
-    </ActivityContainer>
-  )
-}
-
-const ActivityContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  border-top: 1px solid black;
-  height: 7vh;
-  hr {
-    width: 90%;
-    color: lightgray;
-    margin: 0;
-  }
-`
-
-const TopContainer = styled.div`
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-  height: 3vh;
-  h3 {
-    padding: 10px;
-  }
-`
-
-const BottomContainer = styled.div`
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-  height: 4vh;
-  justify-content: space-between;
-  padding: 0 10px 0 10px;
-  margin: 5px 0;
-`
-
-const LikeContainer = styled.div``
-
-export default PostActivity
diff --git a/src/components/posts/PostCard.js b/src/components/posts/PostCard.js
index 3122c2b..ab50b62 100644
--- a/src/components/posts/PostCard.js
+++ b/src/components/posts/PostCard.js
@@ -6,7 +6,7 @@ import Moment from 'react-moment'
 import { ThumbUp, ModeCommentOutlined, DeleteOutline } from '@material-ui/icons'
 import { likePost, dislikePost } from 'actions'
 import useGetToken from '../utils/useGetToken'
-import { deleteGroupPost } from 'actions'
+import { deleteGroupPost } from './store/postActions'
 import { useSelector, useDispatch } from 'react-redux'
 import {
   Card,
diff --git a/src/components/posts/PostForm.js b/src/components/posts/PostForm.js
index 74dc832..f0141b5 100644
--- a/src/components/posts/PostForm.js
+++ b/src/components/posts/PostForm.js
@@ -1,34 +1,36 @@
 import React from 'react'
 import { useSelector, useDispatch } from 'react-redux'
-import useGetToken from '../utils/useGetToken'
 import useForm from '../utils/useForm'
 import styled from 'styled-components'
-import { createGroupPost } from 'actions'
+import { createGroupPost } from './store/postActions'
 import Button from '@material-ui/core/Button'
 import { makeStyles } from '@material-ui/core/styles'
 import { green } from '@material-ui/core/colors'
+import useImageUploader from './postImageUploader'
 
-import { Input } from 'semantic-ui-react'
+import { Input, Modal } from 'semantic-ui-react'
 
 const PostForm = props => {
   const primary = green[500]
   // token for accessing authentication required backend routes
-  const [token] = useGetToken()
   const dispatch = useDispatch()
   const userId = useSelector(state => state.userReducer.loggedInUser.id)
   const socket = useSelector(state => state.socketReducer.socket)
   // useForm custom hook and set timeout custom hook
   const { values, handleChange, handleSubmit } = useForm(submitPost)
+  const { image, UploaderUI, modalOpen, setModal } = useImageUploader()
 
   // callback function to handle submit
   async function submitPost(e) {
     const { groupId } = props
+    console.log('what is image 📸', image)
     var data = {
       userId,
       groupId,
       post_content: values.post_content,
+      img: image,
     }
-    await dispatch(createGroupPost(token, data, socket))
+    await dispatch(createGroupPost(data, socket))
   }
 
   // Material UI
@@ -63,6 +65,21 @@ const PostForm = props => {
           required
           style={{ width: '75%' }}
         />
+        <Modal
+          open={modalOpen}
+          onClose={() => setModal(false)}
+          trigger={
+            <div
+              onClick={() => {
+                setModal(true)
+              }}
+            >
+              upload img
+            </div>
+          }
+        >
+          <UploaderUI displayImage={image} />
+        </Modal>
         <Button
           size='large'
           variant='contained'
diff --git a/src/components/posts/PostsContainer.js b/src/components/posts/PostsContainer.js
index f28e048..447c5b7 100644
--- a/src/components/posts/PostsContainer.js
+++ b/src/components/posts/PostsContainer.js
@@ -74,7 +74,6 @@ const PostListContainer = styled.div`
   flex-direction: column-reverse;
   align-items: center;
   background-color: #e8edf1;
-  // padding-bottom: 15%;
 `
 const PostsWrapper = styled.div`
   background-color: #e8edf1;
diff --git a/src/components/posts/postImageUploader.js b/src/components/posts/postImageUploader.js
new file mode 100644
index 0000000..6ced0a5
--- /dev/null
+++ b/src/components/posts/postImageUploader.js
@@ -0,0 +1,129 @@
+import { useCallback, useState } from 'react'
+import { useDropzone } from 'react-dropzone'
+import React from 'react'
+import axios from 'axios'
+import { Modal, Icon, Button } from 'semantic-ui-react'
+import styled from 'styled-components'
+import Default from 'assets/walter-avi.png'
+
+const useImageUploader = type => {
+  //Imports form custom hook to handle state, form entry and form submission.
+  const [image, setImage] = useState()
+  const [modalOpen, setModal] = useState(false)
+
+  const onDrop = useCallback(acceptedFiles => {
+    const timestamp = Date.now() / 1000
+    let formData = new FormData()
+    formData.append('api_key', process.env.REACT_APP_CLOUDINARY_APIKEY)
+    formData.append('file', acceptedFiles[0])
+    formData.append('timestamp', timestamp)
+    formData.append('upload_preset', process.env.REACT_APP_CLOUDINARY_PRESET)
+    const uploadImage = async () => {
+      const result = await axios.post(
+        process.env.REACT_APP_CLOUDINARY_URL,
+        formData
+      )
+      setImage(result.data.secure_url)
+    }
+    uploadImage()
+  }, [])
+
+  const UploaderUI = props => {
+    const { getRootProps, getInputProps, isDragActive } = useDropzone({
+      onDrop,
+    })
+
+    return (
+      <UploadModal>
+        <Uploader {...getRootProps()}>
+          <input {...getInputProps()} />
+
+          <div>
+            <Icon name='cloud upload' size='huge' color='violet' inverted />
+            {isDragActive ? (
+              <DropText>Drop the files here ...</DropText>
+            ) : (
+              <>
+                <Text style={{ fontSize: '2rem' }}>
+                  Drop your image here...
+                </Text>{' '}
+                <Text>or</Text>
+                <Button color='violet' inverted>
+                  Browse Files
+                </Button>
+              </>
+            )}
+          </div>
+        </Uploader>
+        <PreviewHolder>
+          {'image here => 💅'}
+          <img src={props.displayImage || Default} alt={'Preview'} />
+        </PreviewHolder>
+        <DoneButton>
+          <Button onClick={() => setModal(false)} color='violet' fluid>
+            Done
+          </Button>
+        </DoneButton>
+      </UploadModal>
+    )
+  }
+
+  return {
+    image,
+    UploaderUI,
+    modalOpen,
+    setModal,
+  }
+}
+
+const Uploader = styled.div`
+  background: #fff;
+  padding: 16px;
+  width: 90%;
+  border: 2px dashed lightgrey;
+  display: flex;
+  justify-content: center;
+  text-align: center;
+  margin: auto;
+`
+
+const Text = styled.p`
+  margin: 1rem 0 1rem 0;
+`
+
+const DropText = styled.p`
+  font-size: 2rem;
+  padding: 10%;
+`
+
+const PreviewHolder = styled.div`
+  display: flex;
+  align-items: center;
+  width: 75%;
+  margin: 5% auto;
+  img {
+    border-color: black;
+    object-fit: cover;
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    border: 1px solid black;
+    flex: 0 0 auto;
+  }
+`
+
+const DoneButton = styled.div`
+  width: 50%;
+  display: flex;
+  justify-content: center;
+  margin: auto;
+`
+
+const UploadModal = styled(Modal.Content)`
+  :first-child {
+    display: flex;
+    flex-direction: column;
+  }
+`
+
+export default useImageUploader
diff --git a/src/components/posts/store/postActions.js b/src/components/posts/store/postActions.js
new file mode 100644
index 0000000..caf25f7
--- /dev/null
+++ b/src/components/posts/store/postActions.js
@@ -0,0 +1,46 @@
+import * as t from './postTypes'
+import axios from 'components/utils/axiosWithoutAuth'
+import MixpanelMessages from 'components/analytics/MixpanelMessages'
+import { Mixpanel } from 'components/analytics/Mixpanel'
+
+export const createGroupPost = (data, socket) => async dispatch => {
+  const { userId, groupId, post_content, img } = data
+  // If post content is not blank
+  if (!post_content.match(/^\s+$/)) {
+    try {
+      dispatch({ type: t.CREATE_POST_REQUEST })
+      const post = await axios.post(`/posts/group/${groupId}`, {
+        user_id: userId,
+        group_id: groupId,
+        post_content: post_content,
+        img,
+      })
+      console.log('before dispatch', post.data)
+      dispatch({
+        type: t.CREATE_POST_SUCCESS,
+        payload: post.data.postResult,
+      })
+
+      socket.emit('groupPost', {
+        post: post.data.postResult,
+        room: groupId,
+      })
+
+      Mixpanel.activity(userId, MixpanelMessages.POST_CREATED)
+    } catch (err) {
+      console.log(err)
+      dispatch({ type: t.CREATE_POST_FAILURE, payload: err })
+    }
+  }
+}
+
+export const deleteGroupPost = (token, id) => async dispatch => {
+  dispatch({ type: t.DELETE_POST_REQUEST })
+  const deletedPost = await axios.delete(`/posts/${id}`)
+  if (deletedPost.data) {
+    dispatch({
+      type: t.DELETE_POST_SUCCESS,
+      payload: deletedPost.data,
+    })
+  }
+}
diff --git a/src/components/posts/store/postTypes.js b/src/components/posts/store/postTypes.js
new file mode 100644
index 0000000..09b386e
--- /dev/null
+++ b/src/components/posts/store/postTypes.js
@@ -0,0 +1,7 @@
+export const CREATE_POST_REQUEST = 'CREATE_POST_REQUEST'
+export const CREATE_POST_SUCCESS = 'CREATE_POST_SUCCESS'
+export const CREATE_POST_FAILURE = 'CREATE_POST_FAILURE'
+
+export const DELETE_POST_REQUEST = 'DELETE_POST_REQUEST'
+export const DELETE_POST_SUCCESS = 'DELETE_POST_SUCCESS'
+export const DELETE_POST_FAILURE = 'DELETE_POST_FAILURE'
diff --git a/src/components/profile/MyGroups.js b/src/components/profile/MyGroups.js
index eb978d5..42335b1 100644
--- a/src/components/profile/MyGroups.js
+++ b/src/components/profile/MyGroups.js
@@ -1,7 +1,6 @@
 import React from 'react'
-import { withRouter } from 'react-router'
+import { withRouter, Link } from 'react-router-dom'
 import { Popup, Icon } from 'semantic-ui-react'
-import { Link } from 'react-router-dom'
 import styled from 'styled-components'
 
 // change Default to change group picture default.
@@ -51,7 +50,7 @@ const MyGroups = props => {
       {/* this only renders the account doesnt have any groups */}
       {props.content.length === 0 && (
         <Join>
-          <h4>{`You don't belong to any groups yet.`}</h4>
+          <h4>{`${props.first_name} belong to any groups yet.`}</h4>
         </Join>
       )}
     </LogoHolder>
@@ -59,9 +58,10 @@ const MyGroups = props => {
 }
 
 const LogoHolder = styled.div`
-  padding: 5px
+  padding: 5px;
   display: flex;
   flex-wrap: nowrap;
+  align-items: center;
   overflow-x: auto;
   margin-bottom: 20px;
   background-color: transparent;
diff --git a/src/components/profile/Profile.js b/src/components/profile/Profile.js
index a703749..34a2dc6 100644
--- a/src/components/profile/Profile.js
+++ b/src/components/profile/Profile.js
@@ -79,16 +79,23 @@ const Profile = props => {
         </div>
         <div className='alleg-group-container'>
           <h2>ALLEGIANCES</h2>
-          <ProfileAllegiances
-            loggedInUserId={loggedInUserId}
-            user={profile.id}
-            name={profile.first_name}
-            content={profile.allegiances}
-            type='allegiance'
-            default={Default}
-          />
+          <div className='profile-allegiance-container'>
+            <ProfileAllegiances
+              loggedInUserId={loggedInUserId}
+              user={profile.id}
+              name={profile.first_name + " doesn't"}
+              content={profile.allegiances}
+              type='allegiance'
+              default={Default}
+            />
+          </div>
           <h2>GROUPS</h2>
-          <MyGroups content={profile.groups} />
+          <div className='profile-groups-container'>
+            <MyGroups
+              content={profile.groups}
+              first_name={profile.first_name + " doesn't"}
+            />
+          </div>
         </div>
         <div className='lower-div'>
           <h2>POSTS</h2>
@@ -127,6 +134,17 @@ const ProfileContainer = styled.div`
 `
 
 const InfoHolder = styled.div`
+  padding: 20px;
+  .profile-groups-container {
+    background-color: white;
+    width: 100%;
+    max-width: 800px;
+  }
+  .profile-allegiance-container {
+    background-color: white;
+    width: 100%;
+    max-width: 800px;
+  }
   .name {
     display: flex;
     flex-direction: row;
diff --git a/src/components/profile/ProfileAllegiances.js b/src/components/profile/ProfileAllegiances.js
index 1a9478b..1f722ae 100644
--- a/src/components/profile/ProfileAllegiances.js
+++ b/src/components/profile/ProfileAllegiances.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { withRouter } from 'react-router'
+import { withRouter, Link } from 'react-router-dom'
 import { Popup, Icon } from 'semantic-ui-react'
 import styled from 'styled-components'
 
@@ -15,6 +15,25 @@ const ProfileAllegiances = props => {
 
   return (
     <LogoHolder>
+      <div
+        className={props.appear ? 'appear' : 'disappear'}
+        style={{ margin: '1%' }}
+      >
+        <Link to={`/addallegiance`}>
+          <Popup
+            content={'Add a allegiance'}
+            trigger={
+              <Icon
+                name='plus'
+                size='big'
+                color='grey'
+                style={{ fontSize: '2.86rem' }}
+                default={Default}
+              />
+            }
+          />
+        </Link>
+      </div>
       {!!props.content.length &&
         props.content.map(item => (
           <div
@@ -31,49 +50,42 @@ const ProfileAllegiances = props => {
         ))}
 
       {props.content.length === 0 && (
-        <Join>
-          <h4>{`${props.name} doesn't belong to any allegiance's yet.`}</h4>
-          <Icon
-            name='question circle'
-            size='huge'
-            color='grey'
-            style={{ marginTop: '20px' }}
-          />
-        </Join>
+        <div>
+          <Join>
+            <h4>{`${props.name} belong to any allegiance's yet.`}</h4>
+            {/* <Icon name='question circle' size='huge' color='grey' /> */}
+          </Join>
+        </div>
       )}
     </LogoHolder>
   )
 }
 
 const LogoHolder = styled.div`
-  padding: 5px
-  width: 100%;
   display: flex;
-  justify-content: center;
   flex-wrap: nowrap;
+  align-items: center;
   overflow-x: auto;
-  margin-left: 1%;
-  margin-bottom: 20px;
+  background-color: white;
   &::-webkit-scrollbar {
     display: none;
   }
+  .appear {
+  }
+  .disappear {
+    display: none;
+  }
 `
 
 const Join = styled.div`
   display: flex;
-  flex-direction: column;
+  flex-wrap: column;
   align-items: center;
   font-weight: bold;
   letter-spacing: adjusting;
   font-size: 2rem;
 `
 
-const Nickname = styled.p`
-  font-size: 0.8rem;
-  font-weight: bold;
-  margin-top: 10%;
-`
-
 const GroupLogo = styled.img`
   border-color: black;
   object-fit: cover;
@@ -85,4 +97,9 @@ const GroupLogo = styled.img`
   box-shadow: 3px 4px 8px 3px rgba(0, 0, 0, 0.2);
 `
 
+const Nickname = styled.p`
+  font-size: 0.8rem;
+  font-weight: bold;
+  margin-top: 10%;
+`
 export default withRouter(ProfileAllegiances)
diff --git a/src/components/replies/ReplyContainer.js b/src/components/replies/ReplyContainer.js
index 8778567..eae0893 100644
--- a/src/components/replies/ReplyContainer.js
+++ b/src/components/replies/ReplyContainer.js
@@ -181,7 +181,7 @@ const ReplyCardsContainer = styled.div`
   font-size: 1.4rem;
   max-width: 800px;
   @media (max-width: 500px) {
-    min-width: 350px;
+    min-width: 150px;
     width: 95%;
   }
 `
diff --git a/src/reducers/groupReducer.js b/src/reducers/groupReducer.js
index e69bbc8..6424445 100644
--- a/src/reducers/groupReducer.js
+++ b/src/reducers/groupReducer.js
@@ -1,5 +1,9 @@
 import * as types from 'actions/actionTypes'
-
+import {
+  CREATE_POST_SUCCESS,
+  CREATE_POST_FAILURE,
+  DELETE_POST_SUCCESS,
+} from 'components/posts/store/postTypes'
 const initialState = {
   posts: [],
   arePostsLoading: false,
@@ -50,12 +54,12 @@ export const groupReducer = (state = initialState, action) => {
         arePostsLoading: false,
       }
     case types.RECEIVE_POST_SUCCESS:
-    case types.CREATE_POST_SUCCESS:
+    case CREATE_POST_SUCCESS:
       return {
         ...state,
         posts: [...state.posts, action.payload],
       }
-    case types.CREATE_POST_FAILURE:
+    case CREATE_POST_FAILURE:
       return {
         ...state,
         error: action.payload,
@@ -159,7 +163,7 @@ export const groupReducer = (state = initialState, action) => {
         allegiances: action.payload.allegiances,
         reqs: action.payload.reqs,
       }
-    case types.DELETE_POST_SUCCESS:
+    case DELETE_POST_SUCCESS:
       console.log(action.payload)
       return {
         ...state,