diff --git a/components/Act/ActListSection.js b/components/Act/ActListSection.js
index 0be818491..b3fc8bb90 100644
--- a/components/Act/ActListSection.js
+++ b/components/Act/ActListSection.js
@@ -6,7 +6,7 @@ import ActSearchInput from './ActSearchInput'
 import ActMenu from './ActMenu'
 import ActCard from './ActCard'
 import styled from 'styled-components'
-import { List } from 'antd'
+import { List, Card } from 'antd'
 import { useRouter } from 'next/router'
 
 const escapeRegex = require('../../server/util/regexUtil')
@@ -80,31 +80,42 @@ export const ActListSection = () => {
       <ActSearchInput value={search} onSearch={handleSearch} loading={activities.loading} />
       <SidebarGrid>
         <ActMenu acts={acts} onClick={handleMenu} />
-        <List
+        <div>
+          <List
           // grid={{ gutter: 16, column: 3 }}
-          grid={{
-            gutter: 16,
-            xs: 1,
-            sm: 2,
-            md: 2,
-            lg: 3,
-            xl: 3,
-            xxl: 3
-          }}
-          dataSource={acts}
-          loading={activities.loading}
-          pagination={{
-            defaultCurrent: 1,
-            defaultPageSize: 12,
-            hideOnSinglePage: true
+            grid={{
+              gutter: 16,
+              xs: 1,
+              sm: 2,
+              md: 2,
+              lg: 3,
+              xl: 3,
+              xxl: 3
+            }}
+            dataSource={acts}
+            loading={activities.loading}
+            pagination={{
+              defaultCurrent: 1,
+              defaultPageSize: 12,
+              hideOnSinglePage: true
             // size: 'small'
-          }}
-          renderItem={(act) => (
-            <List.Item>
-              <ActCard act={act} />
-            </List.Item>
-          )}
-        />,
+            }}
+            renderItem={(act) => (
+              <List.Item>
+                <ActCard act={act} />
+              </List.Item>
+            )}
+          />
+          <Card>Cant find what you want?
+            <a
+              target='_blank'
+              rel='noopener noreferrer'
+              href='https://voluntarily.atlassian.net/servicedesk/customer/portal/2/group/3/create/17'
+            >
+            Suggest an activity here
+            </a>
+          </Card>
+        </div>
       </SidebarGrid>
     </>
   )
diff --git a/components/Act/ActMenu.js b/components/Act/ActMenu.js
index bf6f7c596..8dee627dd 100644
--- a/components/Act/ActMenu.js
+++ b/components/Act/ActMenu.js
@@ -1,6 +1,8 @@
 import { Menu } from 'antd'
 import styled from 'styled-components'
 
+import { useRouter } from 'next/router'
+import Link from 'next/link'
 /**
  *
  * @param {*} acts - array of activities with offerOrg
@@ -45,7 +47,7 @@ const ActivityMenu = styled(Menu)`
 
 const ActMenu = ({ acts, onClick }) => {
   const [counts, orgs] = countOfferOrgs(acts)
-
+  const router = useRouter()
   return (
     <ActivityMenu>
       <Menu
@@ -61,6 +63,13 @@ const ActMenu = ({ acts, onClick }) => {
               </Menu.Item>
             )
           })}
+
+          <Menu.Item key='back'>
+            <Link href={`/a/${router.query.type}`}>
+           See all
+            </Link>
+          </Menu.Item>
+
         </Menu.ItemGroup>
         {/* <Menu.ItemGroup className='color'>More filters</Menu.ItemGroup> */}
       </Menu>
diff --git a/components/Act/__tests__/ActMenu.spec.js b/components/Act/__tests__/ActMenu.spec.js
deleted file mode 100644
index 51b6a7251..000000000
--- a/components/Act/__tests__/ActMenu.spec.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react'
-import test from 'ava'
-import { renderWithIntl } from '../../../lib/react-intl-test-helper'
-import acts from '../../../server/api/activity/__tests__/activity.fixture'
-import objectid from 'objectid'
-
-import ActMenu from '../ActMenu'
-
-test.before('Setup fixtures', (t) => {
-  // not using mongo or server here so faking ids
-  acts.map(p => { p._id = objectid().toString() })
-  t.context.acts = acts
-})
-
-test('render the activity menu headers', t => {
-  const wrapper = renderWithIntl(<ActMenu acts={t.context.acts} />)
-  t.true(wrapper.exists('.ant-menu-item-group-title'))
-  t.is(wrapper.find('li').length, 3)
-})
diff --git a/components/Home/HomeTabs.js b/components/Home/HomeTabs.js
index aa115e5a5..1a1429ae0 100644
--- a/components/Home/HomeTabs.js
+++ b/components/Home/HomeTabs.js
@@ -59,12 +59,13 @@ export const HomeTabs = ({ person, onChange, defaultTab }) =>
   <VTabs defaultActiveKey={defaultTab} onChange={onChange}>
     <TabPane tab={homeDiscoverTab} key='discover' style={{ overflow: 'visible' }}>
       <ProfilePanel>
+        <PersonalGoalSection />
         <RecommendedOpsSection />
       </ProfilePanel>
     </TabPane>
     <TabPane tab={homeActiveTab} key='active' style={{ overflow: 'visible' }}>
       <ProfilePanel>
-        <PersonalGoalSection />
+
         <ActiveOpsSection />
         <InterestedOpsSection />
       </ProfilePanel>
diff --git a/components/LandingPageComponents/Hero.js b/components/LandingPageComponents/Hero.js
index 791fdc2c6..727bad96a 100644
--- a/components/LandingPageComponents/Hero.js
+++ b/components/LandingPageComponents/Hero.js
@@ -3,6 +3,7 @@ import React from 'react'
 import { FormattedMessage } from 'react-intl'
 import styled from 'styled-components'
 import { LearnMoreButton, SignUpButton } from '../../components/VTheme/Buttons'
+import { HeroItem, HeroText } from '../VTheme/VTheme'
 // import { Button } from 'antd'
 // const Search = Input.Search
 
@@ -29,122 +30,6 @@ max-width: 80rem;
   }
 `
 
-// start left hand video side
-const HeroItem = styled.div`
-position: relative;
-padding: 1.5rem;
-    width: 100%;
-    background-color: black;
-    height:40vh;
-    min-height: 400px;
-    max-height: 450px;
-    overflow: hidden;
-    border-radius: 24px;
-    
- box-shadow:  20px 20px 60px #d9d9d9; 
-        img {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      top: 0;
-      left: 0;
-
-    z-index: 0;
-    object-fit: cover;
-    object-position: center;
-    }
-  
-
-@media screen and (min-width: 1025px) {
-  -webkit-transition: all 0.2s;
-  transition: all 0.2s;
-:hover {
-  box-shadow: 1px 1px 12px 2px rgba(10,10,10,0.1);
-  transform: scale(1.04);
-  
-  h1 {
-    -webkit-transition: all 0.2s;
-  transition: all 0.2s;
-    color: #FFD9FB;
-  }
-}
-}
-
-    @media screen and (max-width: 1024px) {
-  border-radius: 0;
-  height:50vh;
-  img {
-    height: 100%;
-
-    object-position: center top;
-  }
-  }
-  @media screen and (max-width: 768px) {
-height:50vh;
-  }
- 
-
-
-`
-
-// end left hand video side
-
-const HeroText = styled.section`
-  display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
-    height: 100%;
-    align-items: flex-start;
-    justify-content: flex-end;
-z-index: 100;
-
-
-    h1 {
-font-weight: 600;
-font-size: 2rem;
-line-height: 1.5;
-letter-spacing: -0.2px;
-z-index: 100;
-
-color: white;
-}
-p {
-  min-height: 60px;
-  font-size: 1.25rem;
-  font-weight: 400;
-letter-spacing: 0;
-z-index: 100;
-margin-bottom: 0;
-
-color: white;
-}
-
-  @media screen and (min-width: 768px) and (max-width: 1025px) {
-    padding: 1.5rem;
-    h1 {
-    font-size:2.5rem;
-  }
-    p {
-      font-size: 1.5rem;
-  line-height: 1.5;
-  min-height: initial;
-
- }
-  }
-  @media screen and (max-width: 768px) {
-  h1 {
-    font-size: 2rem;
-    line-height: 1.5;
-    margin-bottom: 0;
-    
-  }
-  p {
-    font-size: 1.5rem;
-  }
-  }
-  
-`
-
 const CTAGrid = styled.section`
 max-width: 80rem;
 border-radius: 24px;
diff --git a/components/LandingPageComponents/WhoSection.js b/components/LandingPageComponents/WhoSection.js
new file mode 100644
index 000000000..24e490456
--- /dev/null
+++ b/components/LandingPageComponents/WhoSection.js
@@ -0,0 +1,107 @@
+
+import React from 'react'
+import styled from 'styled-components'
+import { H2, TripleGrid, HeroText, HeroItemStatic } from '../VTheme/VTheme'
+import { FormattedMessage } from 'react-intl'
+
+const PersonaBox = styled.section`
+@media screen and (max-width: 1300px) {
+  margin: 0 1rem;
+}
+ 
+`
+
+const PersonaHeader = styled.div`
+margin: 4rem 0;
+text-align: center;
+
+h2 {
+  font-weight: 700;
+  
+}
+
+@media screen and (max-width: 768px) {
+  margin-top: 2rem;
+}
+`
+const ComingSoonTag = styled.p`
+position: absolute;
+z-index: 1200;
+background-color: black;
+padding: 0.5rem 1rem;
+border-radius: 120px;
+font-weight: 700;
+color: white;
+font-size: 1.2rem;
+
+
+`
+
+const WhoSection = () => (
+  <PersonaBox>
+    <PersonaHeader>
+      <H2>Who we help</H2>
+    </PersonaHeader>
+    <TripleGrid>
+      <HeroItemStatic>
+
+        <HeroText>
+          <h1>
+            <FormattedMessage
+              id='who.title.schools'
+              defaultMessage='Schools'
+            />
+          </h1>
+          <p>
+            <FormattedMessage
+              id='who.body.schools'
+              defaultMessage='Connect your class or school with industry volunteers and experts'
+            />
+          </p>
+
+        </HeroText>
+        <img src='/static/img/landing-pages/school.png' />
+      </HeroItemStatic>
+      <HeroItemStatic>
+        <ComingSoonTag>Coming Soon</ComingSoonTag>
+        <HeroText>
+          <h1>
+            <FormattedMessage
+              id='who.title.communities'
+              defaultMessage='Communities'
+            />
+          </h1>
+          <p>
+            <FormattedMessage
+              id='who.body.communities'
+              defaultMessage='White label the site to manage your volunteers safely'
+            />
+          </p>
+
+        </HeroText>
+        <img src='/static/img/landing-pages/community.png' />
+      </HeroItemStatic>
+      <HeroItemStatic>
+        <ComingSoonTag>Coming Soon</ComingSoonTag>
+        <HeroText>
+          <h1>
+            <FormattedMessage
+              id='who.title.business'
+              defaultMessage='Small businesses '
+            />
+          </h1>
+          <p>
+            <FormattedMessage
+              id='who.body.business'
+              defaultMessage='Connect with experts to mentor and give free advice'
+            />
+          </p>
+
+        </HeroText>
+        <img src='/static/img/landing-pages/business.png' />
+      </HeroItemStatic>
+    </TripleGrid>
+
+  </PersonaBox>
+)
+export default WhoSection
diff --git a/components/VTheme/VTheme.js b/components/VTheme/VTheme.js
index 00abe4bbf..7eb350458 100644
--- a/components/VTheme/VTheme.js
+++ b/components/VTheme/VTheme.js
@@ -342,7 +342,7 @@ export const TripleGrid = styled.div`
 
   @media screen and (min-width: 768px) and (max-width: 1280px) {
     margin: 0 auto;
-    grid-template-columns: repeat(auto-fit, 25rem);
+    grid-template-columns: 1fr;
     justify-content: center;
     justify-items: center;
   }
@@ -350,7 +350,7 @@ export const TripleGrid = styled.div`
   @media screen and (max-width: 767px) {
     grid-template-columns: 1fr;
     grid-row-gap: 2rem;
-    grid-gap: 0rem;
+    grid-gap: 2rem;
   }
 ` // end triplegrid
 
@@ -505,6 +505,120 @@ text-align: center;
   padding: 2rem 0;
 }
 `
+
+export const HeroItem = styled.div`
+position: relative;
+padding: 1.5rem;
+    width: 100%;
+    background-color: black;
+    height:40vh;
+    min-height: 400px;
+    max-height: 450px;
+    overflow: hidden;
+    border-radius: 24px;
+    
+ box-shadow:  20px 20px 60px #d9d9d9; 
+        img {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      
+
+    z-index: 0;
+    object-fit: cover;
+    object-position: top;
+    }
+  
+
+@media screen and (min-width: 1025px) {
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+:hover {
+  box-shadow: 1px 1px 12px 2px rgba(10,10,10,0.1);
+  transform: scale(1.04);
+  
+  h1 {
+    -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+    color: #FFD9FB;
+  }
+}
+}
+
+    @media screen and (max-width: 1024px) {
+  border-radius: 0;
+  height:50vh;
+  img {
+    height: 100%;
+
+    object-position: center top;
+  }
+  }
+  @media screen and (max-width: 768px) {
+height:50vh;
+  }
+ 
+
+
+`
+
+export const HeroItemStatic = styled.div`
+position: relative;
+padding: 1.5rem;
+    width: 100%;
+    background-color: black;
+    height:40vh;
+    min-height: 400px;
+    max-height: 450px;
+    overflow: hidden;
+    border-radius: 24px;
+    
+ box-shadow:  20px 20px 60px #d9d9d9; 
+        img {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      
+
+    z-index: 0;
+    object-fit: cover;
+    object-position: top;
+    }
+  
+
+@media screen and (min-width: 1025px) {
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+
+  h1 {
+    -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+    color: #FFD9FB;
+  }
+}
+}
+
+    @media screen and (max-width: 1024px) {
+  border-radius: 0;
+  height:50vh;
+  img {
+    height: 100%;
+
+    object-position: center top;
+  }
+  }
+  @media screen and (max-width: 768px) {
+height:50vh;
+  }
+ 
+
+
+`
+
 /*
 ====================================================
 
@@ -517,6 +631,62 @@ I have done a terrible example so far, but will aim to fix usage soon
 ====================================================
 */
 
+export const HeroText = styled.section`
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+    height: 100%;
+    align-items: flex-start;
+    justify-content: flex-end;
+z-index: 100;
+
+
+    h1 {
+font-weight: 600;
+font-size: 2rem;
+line-height: 1.5;
+letter-spacing: -0.2px;
+z-index: 100;
+
+color: white;
+}
+p {
+  min-height: 60px;
+  font-size: 1.25rem;
+  font-weight: 400;
+letter-spacing: 0;
+z-index: 100;
+margin-bottom: 0;
+
+color: white;
+}
+
+  @media screen and (min-width: 768px) and (max-width: 1025px) {
+    padding: 1.5rem;
+    h1 {
+    font-size:2.5rem;
+  }
+    p {
+      font-size: 1.5rem;
+  line-height: 1.5;
+  min-height: initial;
+
+ }
+  }
+  @media screen and (max-width: 768px) {
+  h1 {
+    font-size: 2rem;
+    line-height: 1.5;
+    margin-bottom: 0;
+    
+  }
+  p {
+    font-size: 1.5rem;
+  }
+  }
+  
+`
+
 export const TextPromo = styled.p`
 font-size:1.5rem;
 font-weight: 400;
diff --git a/lang/en.json b/lang/en.json
index c8590e9f5..46267b22f 100644
--- a/lang/en.json
+++ b/lang/en.json
@@ -613,5 +613,11 @@
   "verificationlabel.vetted": "Police vet passed",
   "VerifyButton.label": "Verify Identity",
   "version": "Version",
-  "volunteer": "Volunteer"
+  "volunteer": "Volunteer",
+  "who.body.business": "Connect with experts to mentor and give free advice",
+  "who.body.communities": "White label the site to manage your volunteers safely",
+  "who.body.schools": "Connect your class or school with industry volunteers and experts",
+  "who.title.business": "Small businesses ",
+  "who.title.communities": "Communities",
+  "who.title.schools": "Schools"
 }
\ No newline at end of file
diff --git a/pages/landing/landing.js b/pages/landing/landing.js
index a01b51ba6..e7b72def8 100644
--- a/pages/landing/landing.js
+++ b/pages/landing/landing.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Helmet } from 'react-helmet'
 import Hero from '../../components/LandingPageComponents/Hero'
-import OfferSection from '../../components/LandingPageComponents/OfferSection'
+// import OfferSection from '../../components/LandingPageComponents/OfferSection'
 // import OpAdd from '../../components/Op/OpAdd'
 // import OpListSection from '../../components/Op/OpListSection'
 import { FullPage } from '../../components/VTheme/VTheme'
@@ -19,6 +19,7 @@ import TakeSupportSection from '../../components/LandingPageComponents/TakeSuppo
 // import HelpSocialSection from '../../components/LandingPageComponents/HelpSocialSection'
 // import HelpOrgsSection from '../../components/LandingPageComponents/HelpOrgsSection'
 import Sponsors from '../../components/LandingPageComponents/Sponsors'
+import WhoSection from '../../components/LandingPageComponents/WhoSection'
 export const Landing = ({ isAuthenticated }) => (
   <>
     <Helmet>
@@ -29,9 +30,12 @@ export const Landing = ({ isAuthenticated }) => (
       isAuthenticated={isAuthenticated}
     />
 
-    <FullPage style={{ marginTop: '0' }}>
-
+    <FullPage>
+      <Divider />
+      <WhoSection />
+      <Divider />
       <HowSection />
+
       <>
         <Sponsors />
         {/* <Testimonial /> */}
@@ -41,7 +45,7 @@ export const Landing = ({ isAuthenticated }) => (
         <Divider />
         <TakeSupportSection />
         <Divider />
-        <OfferSection />
+        {/* <OfferSection /> */}
         {/* <Divider />
         <CorporateSection />
         <Divider />
diff --git a/public/static/img/landing-pages/business.png b/public/static/img/landing-pages/business.png
new file mode 100644
index 000000000..6d4a70664
Binary files /dev/null and b/public/static/img/landing-pages/business.png differ
diff --git a/public/static/img/landing-pages/community.png b/public/static/img/landing-pages/community.png
new file mode 100644
index 000000000..94862b8af
Binary files /dev/null and b/public/static/img/landing-pages/community.png differ
diff --git a/public/static/img/landing-pages/school.png b/public/static/img/landing-pages/school.png
new file mode 100644
index 000000000..534266e9e
Binary files /dev/null and b/public/static/img/landing-pages/school.png differ