diff --git a/src/components/Sections/CTASection.tsx b/src/components/Sections/CTASection.tsx
new file mode 100644
index 0000000..5ba27c0
--- /dev/null
+++ b/src/components/Sections/CTASection.tsx
@@ -0,0 +1,104 @@
+
+import React from "react";
+import styled from "styled-components";
+import { colors } from "@theme/colors";
+import Anchor from "@components/Anchor";
+
+const Section = styled.section<{ colors: string }>`
+  ${(p) => p.colors}
+
+  display: flex;
+  justify-content: center;
+  text-align: center;
+  align-items: baseline;
+  padding: 2rem 0;
+
+  flex-direction: row;
+  @media screen and (max-width: 600px) {
+    flex-direction: column;
+  }
+
+  a {
+    color: inherit;
+  }
+
+  & > a {
+    font-weight: 700;
+    text-decoration: none;
+    margin: 0.5rem 1rem 0;
+    font-size: 1rem;
+    text-transform: uppercase;
+    letter-spacing: 0.1rem;
+  }
+
+  & > h1 {
+    a {
+      text-decoration: underline;
+    }
+    a:hover {
+      text-decoration: none;
+    }
+  }
+`;
+
+type Colors = "orange1" | "lightBlue" | "darkBlue" | "blue1" | "lightTurquoise";
+
+interface CTASectionProps {
+  bgColor?: Colors;
+  link?: string;
+  linkText?: string;
+}
+
+const textColors = (bgColor: Colors) => {
+  switch(bgColor) {
+  case "orange1": return `
+color: ${colors.white};
+background-color: ${colors[bgColor]};
+a:hover {
+  color: ${colors.darkBlue};
+}
+`;
+
+  case "darkBlue": return `
+background-color: ${colors[bgColor]};
+color: ${colors.white};
+  `;
+
+  case "lightBlue": return `
+background-color: ${colors[bgColor]};
+color: ${colors.darkBlue};
+a:hover {
+  color: ${colors.white};
+}
+  `;
+
+  case "lightTurquoise": return `
+background-color: ${colors[bgColor]};
+color: ${colors.darkBlue};
+a:hover {
+  color: ${colors.white};
+}
+  `;
+  case "blue1": return `
+background-color: ${colors[bgColor]};
+color: ${colors.white};
+a:hover {
+  color: ${colors.darkBlue};
+}
+  `;
+  default: return ""
+  }
+}
+
+const CTASection: React.FC<CTASectionProps> = ({ bgColor = "orange1", link, linkText, children }) => (
+  <Section colors={textColors(bgColor)}>
+    <h1>{children}</h1>
+    {link && (
+      <Anchor to={link}>
+        <h4>{linkText}</h4>
+      </Anchor>
+    )}
+  </Section>
+);
+
+export default CTASection;
\ No newline at end of file
diff --git a/src/components/Sections/SossoSection.tsx b/src/components/Sections/SossoSection.tsx
deleted file mode 100644
index 3bf9a24..0000000
--- a/src/components/Sections/SossoSection.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-
-import styled from "styled-components";
-import { PageSection } from "@components/index";
-import { colors } from "@theme/colors";
-
-const SössöSection = styled(PageSection)`
-  color: ${colors.white};
-  background-color: ${colors.orange1};
-
-  display: flex;
-  justify-content: center;
-  text-align: center;
-  align-items: flex-end;
-
-  @media screen and (max-width: 600px - 1px) {
-    flex-flow: column nowrap;
-    align-items: center;
-  }
-
-  a {
-    text-decoration: underline;
-  }
-
-   & > a {
-    font-weight: 700;
-    text-decoration: none;
-    margin: 0.5rem 1rem 0;
-    font-size: 1rem;
-    text-transform: uppercase;
-    letter-spacing: 0.1rem;
-  }
-
-  h3, p {
-    font-size: 1.5rem;
-    font-weight: 200;
-    margin-block-start: 0;
-    margin-block-end: 0;
-  }
-
-  a:hover {
-    color: ${colors.darkBlue};
-  }
-`;
-
-export default SössöSection;
\ No newline at end of file
diff --git a/src/components/Sections/TextSection.tsx b/src/components/Sections/TextSection.tsx
index 022f94d..df0dab9 100644
--- a/src/components/Sections/TextSection.tsx
+++ b/src/components/Sections/TextSection.tsx
@@ -1,8 +1,7 @@
 import React from "react";
 import styled from "styled-components";
-import { PageSection } from "@components/index";
 
-const StyledSection = styled(PageSection)`
+const StyledSection = styled.section`
   display: grid;
   padding: 24px;
 
diff --git a/src/components/index.tsx b/src/components/index.tsx
index 67c7a1f..190dc7f 100644
--- a/src/components/index.tsx
+++ b/src/components/index.tsx
@@ -5,7 +5,7 @@ export { default as TextAnchor } from "./TextAnchor";
 export { default as PageSection } from "./Sections/PageSection";
 export { default as Divider } from "./Divider";
 export { default as CardSection } from "./Sections/CardSection";
-export { default as SossoSection } from "./Sections/SossoSection";
+export { default as CTASection } from "./Sections/CTASection";
 export { default as TextSection } from "./Sections/TextSection";
 export { default as InfoBox } from "./InfoBox";
 export { default as Accordion } from "./Accordion";
diff --git a/src/views/ActualPage/ActualPageView.tsx b/src/views/ActualPage/ActualPageView.tsx
index a0ea631..8e59127 100644
--- a/src/views/ActualPage/ActualPageView.tsx
+++ b/src/views/ActualPage/ActualPageView.tsx
@@ -1,15 +1,13 @@
 import React from "react";
 import styled from "styled-components";
-
-import Accordion from "@components/Accordion";
 import { Event } from "@models/Event";
 import { Post } from "@models/Feed";
+
+import { Divider, CTASection, TextSection, Accordion } from "@components/index";
+import ActualPageHero from "./ActualPageHero";
 import EventCalendar from "./EventCalendar";
 import News from "./News";
 
-import { Divider, SossoSection, TextSection } from "@components/index";
-import Anchor from "@components/Anchor";
-import ActualPageHero from "./ActualPageHero";
 
 interface ActualPageViewProps {
   events: Event[];
@@ -38,12 +36,13 @@ const ActualPageView: React.FC<ActualPageViewProps> = ({events, feed}) => {
 
       <News feed={feed} />
 
-      <SossoSection backgroundColor="light-turquoise" textColor="dark-blue">
-        <h3>Kuvia tapahtumista.</h3>
-        <Anchor to="https://sosso.fi">
-          Kuvagalleria&nbsp;›
-        </Anchor>
-      </SossoSection>
+      <CTASection
+        bgColor="lightTurquoise"
+        link="sik.kuvat.fi"
+        linkText="Kuvagalleria&nbsp;›"
+      >
+        Kuvia tapahtumista.
+      </CTASection>
 
       <Gallery>
         <img src="https://placehold.it/400x400" />
@@ -51,12 +50,13 @@ const ActualPageView: React.FC<ActualPageViewProps> = ({events, feed}) => {
         <img src="https://placehold.it/400x400" />
       </Gallery>
 
-      <SossoSection>
-        <h3>Sinustako kilta-aktiivi?</h3>
-        <Anchor to="https://sosso.fi">
-          Tule mukaan kiltatoimintaan&nbsp;›
-        </Anchor>
-      </SossoSection>
+      <CTASection
+        bgColor="blue1"
+        link="#"
+        linkText="Tule mukaan kiltatoimintaan&nbsp;›"
+      >
+        Sinustako kilta-aktiivi?
+      </CTASection>
 
       <TextSection>
         <h3>Yritystapahtumia ja vastapainoa opiskelulle</h3>
diff --git a/src/views/CorporatePage/CorporatePageView.tsx b/src/views/CorporatePage/CorporatePageView.tsx
index 2ea18d8..34e3e92 100644
--- a/src/views/CorporatePage/CorporatePageView.tsx
+++ b/src/views/CorporatePage/CorporatePageView.tsx
@@ -1,8 +1,7 @@
 import React from "react";
 import CorporatePageHero from "./CorporatePageHero";
 import PageLink from "@components/PageLink";
-import { SossoSection, TextSection } from "@components/index";
-import Anchor from "@components/Anchor";
+import { CTASection, TextSection } from "@components/index";
 
 const CorporatePageView: React.FC = () => (
   <>
@@ -57,12 +56,13 @@ const CorporatePageView: React.FC = () => (
       </div>
     </TextSection>
 
-    <SossoSection>
-      <h3>Mainos Sössöön?</h3>
-      <Anchor to="https://sosso.fi">
-        <h4>Killan lehden mediakortin löydät täältä›</h4>
-      </Anchor>
-    </SossoSection>
+    <CTASection
+      bgColor="orange1"
+      link="https://sosso.fi"
+      linkText="Killan lehden mediakortin löydät täältä&nbsp;›"
+    >
+      Mainos Sössöön?
+    </CTASection>
 
     <TextSection>
       <h3 id="tyopaikat">Työpaikkailmoitukset</h3>
diff --git a/src/views/FreshmenPage/FreshmenPageView.tsx b/src/views/FreshmenPage/FreshmenPageView.tsx
index cd40a3a..fc4cc80 100644
--- a/src/views/FreshmenPage/FreshmenPageView.tsx
+++ b/src/views/FreshmenPage/FreshmenPageView.tsx
@@ -3,7 +3,7 @@ import styled from "styled-components";
 import FreshmenPageHero from "./FreshmenPageHero";
 import PageLink from "@components/PageLink";
 import Anchor from "@components/Anchor";
-import { SossoSection, TextSection, InfoBox } from "@components/index";
+import { CTASection, TextSection, InfoBox } from "@components/index";
 
 const KippariImage = styled.img`
   max-width:100%;
@@ -56,12 +56,13 @@ const FreshmenPageView: React.FC = () => (
         </div>
       </aside>
     </TextSection>
-    <SossoSection>
-      <h3>Killassa tapahtuu kaikenlaista!</h3>
-      <Anchor to="/kilta/toiminta">
-        <h4>Seuraa killan tapahtumia</h4>
-      </Anchor>
-    </SossoSection>
+    <CTASection
+      bgColor="lightBlue"
+      link="/kilta/toiminta"
+      linkText="Seuraa killan tapahtumia"
+    >
+      Killassa tapahtuu kaikenlaista!
+    </CTASection>
 
     <TextSection>
       <h3 id="isot">Isoryhmät</h3>
diff --git a/src/views/FrontPage/FrontPageView.tsx b/src/views/FrontPage/FrontPageView.tsx
index ad4cad0..281ceb2 100644
--- a/src/views/FrontPage/FrontPageView.tsx
+++ b/src/views/FrontPage/FrontPageView.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import { Card, PageLink, Divider, CardSection, SossoSection } from "@components/index";
+import { Card, PageLink, Divider, CardSection, CTASection } from "@components/index";
 import FrontPageHero from "./FrontPageHero";
 import { Event } from "@models/Event";
 import { Post } from "@models/Feed";
@@ -62,10 +62,13 @@ const FrontPageView: React.FC<FrontPageViewProps> = ({ events, feed }) => (
 
       </CardSection>
 
-      <SossoSection>
-        <h3>Sössöä vuodesta 1969.</h3>
-        <Anchor to="https://sosso.fi">Lue opiskelijalehden viimeisin numero&nbsp;›</Anchor>
-      </SossoSection>
+      <CTASection
+        bgColor="orange1"
+        link="https://sosso.fi"
+        linkText="Lue opiskelijalehden viimeisin numero&nbsp;›"
+      >
+        Sössöä vuodesta 1969.
+      </CTASection>
 
       <CardSection>
         {feed.map(inst => (
diff --git a/src/views/GuildPage/GuildPageView.tsx b/src/views/GuildPage/GuildPageView.tsx
index 47c0f02..32b27c2 100644
--- a/src/views/GuildPage/GuildPageView.tsx
+++ b/src/views/GuildPage/GuildPageView.tsx
@@ -3,7 +3,7 @@ import styled from "styled-components";
 import PageLink from "@components/PageLink";
 import TextAnchor from "@components/TextAnchor";
 import Anchor from "@components/Anchor";
-import { SossoSection, TextSection, InfoBox, Accordion } from "@components/index";
+import { CTASection, TextSection, InfoBox, Accordion } from "@components/index";
 import GuildPageHero from "./GuildPageHero";
 import FullWidthSection from "@components/Sections/FullWidthSection";
 
@@ -76,9 +76,9 @@ const GuildPageView: React.FC = () => (
       </aside>
     </TextSection>
 
-    <SossoSection>
-      <p>Killan hallinto koostuu XXX henkilöstä.</p>
-    </SossoSection>
+    <CTASection bgColor="lightBlue">
+      Killan hallinto koostuu XXX henkilöstä.
+    </CTASection>
 
     <TextSection>
       <h3 id="organisaatio">Organisaatio</h3>
@@ -101,9 +101,9 @@ const GuildPageView: React.FC = () => (
       </aside>
     </TextSection>
 
-    <SossoSection>
-      <p>Kiltatoimintaa järjestää ja ylläpitää kilta-aktiivit, <Anchor to="/toimikunnat">toimikunnat</Anchor> ja <Anchor to="/jaokset">jaokset</Anchor>.</p>
-    </SossoSection>
+    <CTASection bgColor="darkBlue">
+      Kiltatoimintaa järjestää ja ylläpitää kilta-aktiivit, <Anchor to="/toimikunnat">toimikunnat</Anchor> ja <Anchor to="/jaokset">jaokset</Anchor>.
+    </CTASection>
 
     <Column>
       <FullWidthSection>
@@ -157,9 +157,7 @@ const GuildPageView: React.FC = () => (
       </p>
     </TextSection>
 
-    <SossoSection>
-      <p id="jasenedut">Jäsenedut vuonna 2019</p>
-    </SossoSection>
+    <CTASection bgColor="orange1">Jäsenedut vuonna 2019</CTASection>
 
     <TextSection>
       <h3>Aalto-yliopiston tarjoamat monenlaiset edut</h3>
diff --git a/src/views/StudiesPage/StudiesPageView.tsx b/src/views/StudiesPage/StudiesPageView.tsx
index 3c6db86..22ab147 100644
--- a/src/views/StudiesPage/StudiesPageView.tsx
+++ b/src/views/StudiesPage/StudiesPageView.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import PageLink from "@components/PageLink";
 import Anchor from "@components/Anchor";
-import { SossoSection, TextSection } from "@components/index";
+import { CTASection, TextSection } from "@components/index";
 import StudiesPageHero from "./StudiesPageHero";
 
 const StudiesPageView: React.FC = () => (
@@ -45,12 +45,13 @@ const StudiesPageView: React.FC = () => (
 
     </TextSection>
 
-    <SossoSection>
-      <h3>Hae opiskelemaan!</h3>
-      <Anchor to="https://aalto.fi">
-        <h4>Lue lisää Aallon sivuilta</h4>
-      </Anchor>
-    </SossoSection>
+    <CTASection
+      bgColor="orange1"
+      link="#"
+      linkText="Lue lisää Aallon sivuilta&nbsp;›"
+    >
+      Hae opiskelemaan!
+    </CTASection>
 
     <TextSection>
       <h3 id="yliopisto">Yliopiston järjestelmiä</h3>