diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
index 9f2e377..9958adf 100644
--- a/src/components/Card/Card.tsx
+++ b/src/components/Card/Card.tsx
@@ -1,53 +1,57 @@
 import React from "react";
 import "./Card.scss";
 import Anchor from "../Anchor";
+import { Button } from "@components/index";
 
-export interface CardProps {
+interface CardProps {
   title: string;
   start_time: string;
   text: string;
   link?: string;
   image?: string;
-  button?: JSX.Element;
+  buttonText?: string;
+  buttonOnClick?: () => void;
 }
-export interface CardState { }
 
-class Card extends React.Component<CardProps, CardState> {
-  render() {
-    const { title, text, link, image, button } = this.props;
-    const options = {
-      day: "numeric",
-      month: "numeric",
-      year: "numeric",
-      hour: "numeric",
-      minute: "2-digit"
-    };
-    const datetime = new Date(this.props.start_time).toLocaleString("fi-FI", options);
+const Card: React.FC<CardProps> = ({ title, text, link, image, buttonText, start_time, buttonOnClick }) => {
+  const options = {
+    day: "numeric",
+    month: "numeric",
+    year: "numeric",
+    hour: "numeric",
+    minute: "2-digit"
+  };
+  const datetime = new Date(start_time).toLocaleString("fi-FI", options);
 
-    const imageElem = image ? (
-      <div style={{ backgroundImage: `url(${image})`, }} className="card__image" />
-    ) : null;
-    if (link) {
-      return (
-        <Anchor to={link} className="card">
-          {imageElem}
-          <div className="card__datetime">{datetime}</div>
-          <div className="card__title">{title}</div>
-          <div className="card__text">{text}</div>
-          <div className="card__button">{button}</div>
-        </Anchor>
-      );
-    }
+  const imageElem = image ? (
+    <div style={{ backgroundImage: `url(${image})`, }} className="card__image" />
+  ) : null;
+  if (link) {
     return (
-      <div className="card">
+      <Anchor to={link} className="card">
         {imageElem}
         <div className="card__datetime">{datetime}</div>
         <div className="card__title">{title}</div>
         <div className="card__text">{text}</div>
-        {button}
-      </div>
+        <div className="card__button">
+          <Button type="filled" onClick={buttonOnClick}>
+            <h6>{buttonText}</h6>
+          </Button>
+        </div>
+      </Anchor>
     );
   }
+  return (
+    <div className="card">
+      {imageElem}
+      <div className="card__datetime">{datetime}</div>
+      <div className="card__title">{title}</div>
+      <div className="card__text">{text}</div>
+      <Button type="filled" onClick={buttonOnClick}>
+        <h6>{buttonText}</h6>
+      </Button>
+    </div>
+  );
 }
 
 export default Card;
diff --git a/src/components/Divider.tsx b/src/components/Divider.tsx
index 797e3fc..1093cdd 100644
--- a/src/components/Divider.tsx
+++ b/src/components/Divider.tsx
@@ -3,7 +3,8 @@ import { colors } from "@theme/colors";
 
 const Divider = styled.hr`
   width: 98%;
-  border-color: ${colors.blue1};
+  border: 0;
+  border-bottom: 2px solid ${colors.blue1};
   margin: 0 auto;
 `;
 
diff --git a/src/components/Footer/Footer.scss b/src/components/Footer/Footer.scss
deleted file mode 100644
index 2def50a..0000000
--- a/src/components/Footer/Footer.scss
+++ /dev/null
@@ -1,90 +0,0 @@
-@import "../../assets/scss/globals";
-
-
-.footer {
-  display: flex;
-  flex-direction: column;
-
-  &__content {
-    display: flex;
-    padding: 16px;
-  }
-
-  h4 {
-    color: color(light-blue);
-    padding: 1.5rem 0;
-  }
-
-  & a {
-    color: color(white1);
-    text-decoration: underline;
-    padding: 0.4rem 0;
-    font-size: 14px;
-  }
-
-  & p {
-    color: color(white1);
-    margin: 0;
-    padding: 0.4rem 0;
-    font-size: 14px;
-  }
-
-  &__info {
-    display: flex;
-    flex-direction: column;
-    flex-basis: 100%;
-    align-items: center;
-
-    &__block {
-      padding: 1rem 0;
-    }
-  }
-
-  &__contacts {
-    display: flex;
-    justify-content: space-between;
-    flex-flow: row nowrap;
-    font-weight: 200;
-
-    @media screen and (max-width: 600px - 1px) {
-      flex-flow: column nowrap;
-    }
-  }
-
-  &__text {
-    display: flex;
-    flex-flow: column;
-    min-width: 180px;
-
-    @media screen and (min-width: 600px) {
-      padding-right: 3rem;
-    }
-  }
-
-  &__links {
-    display: flex;
-    flex-flow: column;
-
-    @media screen and (max-width: 600px - 1px) {
-      margin-top: 2rem;
-    }
-  }
-
-  &__copyright {
-    display: flex;
-    flex-flow: row nowrap;
-    background-color: color(black1);
-    text-align: center;
-    justify-content: center;
-    font-size: 12px;
-    padding: 1rem 0;
-
-    p {
-      padding: 0.5rem 1rem;
-    }
-
-    @media screen and (max-width: 600px - 1px) {
-      flex-flow: column nowrap;
-    }
-  }
-}
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
index c816204..059dad5 100644
--- a/src/components/Footer/Footer.tsx
+++ b/src/components/Footer/Footer.tsx
@@ -1,48 +1,115 @@
 import React from "react";
-import FooterMap from "../FooterMap";
+import styled from "styled-components";
 import Anchor from "../Anchor";
-import "./Footer.scss";
+import { colors } from "@theme/colors";
 
-export interface FooterProps { }
-export interface FooterState { }
+const StyledFooter = styled.footer`
+  display: flex;
+  flex-direction: column;
+  background-color: ${colors.darkBlue};
 
-class Footer extends React.Component<FooterProps, FooterState> {
-  render() {
-    return <React.Fragment>
-      <div className="footer">
-        <div className="footer__content">
-          <div className="footer__info">
-            <div className="footer__info__block">
-              <h4>Aalto-yliopiston Sähköinsinöörikilta ry</h4>
-              <div className="footer__contacts">
-                <div className="footer__text">
-                  <p>TUAS-Talo</p>
-                  <p>Maarintie 8</p>
-                  <p>PL 15500, 00076 Aalto</p>
-                  <br></br>
-                  <br></br>
-                  <p>Y-tunnus: 1627010-1</p>
-                  <p>sik-hallitus@list.ayy.fi</p>
-                  <Anchor to="/yhteystiedot">Yhteystiedot</Anchor>
-                </div>
-                <div className="footer__links">
-                  <Anchor to="/jaseneksi">Jäseneksi</Anchor>
-                  <Anchor to="/palaute">Palaute</Anchor>
-                  <Anchor to="https://static.sika.sik.party">Arkisto</Anchor>
-                  <Anchor to="https://static.sika.sik.party">Materiaalipankki</Anchor>
-                </div>
-              </div>
-            </div>
+  a {
+    color: ${colors.white};
+    display: block;
+    text-decoration: underline;
+    padding: 0.4rem 0;
+    font-size: 14px;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  p {
+    color: ${colors.white};
+    margin: 0;
+    padding: 0.4rem 0;
+    font-size: 14px;
+  }
+`;
+
+const Content = styled.div`
+  display: flex;
+  & > div {
+    flex: 2;
+    padding: 48px 0;
+
+    h4 {
+      color: ${colors.lightBlue};
+      padding: 24px 0;
+    }
+
+    & > div {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+    }
+  }
+`;
+
+const CopyRight = styled.div`
+  display: flex;
+  flex-flow: row nowrap;
+  background-color: ${colors.black};
+  text-align: center;
+  justify-content: center;
+  font-size: 12px;
+  padding: 1rem 0;
+
+  p {
+    padding: 0.5rem 1rem;
+  }
+
+  @media screen and (max-width: 600px - 1px) {
+    flex-flow: column nowrap;
+  }
+`;
+
+const Map = styled.iframe`
+  border: none;
+  flex: 1;
+
+  @media screen and (max-width: 1200px - 1px) {
+    display: none;
+  }
+`;
+
+const Footer: React.FC = () => (
+  <StyledFooter>
+    <Content>
+      <div>
+        <h4>Aalto-yliopiston Sähköinsinöörikilta ry</h4>
+        <div>
+          <div>
+            <p>TUAS-Talo</p>
+            <p>Maarintie 8</p>
+            <p>PL 15500, 00076 Aalto</p>
+            <br></br>
+            <br></br>
+            <p>Y-tunnus: 1627010-1</p>
+            <p>sik-hallitus@list.ayy.fi</p>
+            <Anchor to="/yhteystiedot">Yhteystiedot</Anchor>
+          </div>
+
+          <div>
+            <Anchor to="/jaseneksi">Jäseneksi</Anchor>
+            <Anchor to="/palaute">Palaute</Anchor>
+            <Anchor to="https://static.sika.sik.party">Arkisto</Anchor>
+            <Anchor to="https://static.sika.sik.party">Materiaalipankki</Anchor>
           </div>
-          <FooterMap />
-        </div>
-        <div className="footer__copyright">
-          <p>&copy; Aalto-yliopiston Sähköinsinöörikilta ry</p>
-          <p>webmaster: sik-vtmk@list.ayy.fi</p>
         </div>
       </div>
-    </React.Fragment>;
-  }
-}
+      <Map
+        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1983.6122518000927!2d24.81667815176689!3d60.187150048900186!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x468df5eb3cb4ecf1%3A0x3480cbfeedcc07b6!2sMaarintie+8%2C+02150+Espoo!5e0!3m2!1sfi!2sfi!4v1542413548247"
+        width="600"
+        height="350"
+      />
+    </Content>
+    <CopyRight>
+      <p>&copy; Aalto-yliopiston Sähköinsinöörikilta ry</p>
+      <a href="mailto:sik-vtmk@list.ayy.fi">webmaster: sik-vtmk@list.ayy.fi</a>
+    </CopyRight>
+  </StyledFooter>
+)
 
 export default Footer;
diff --git a/src/components/FooterMap/FooterMap.scss b/src/components/FooterMap/FooterMap.scss
deleted file mode 100644
index 09a3654..0000000
--- a/src/components/FooterMap/FooterMap.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-@import "../../assets/scss/globals";
-
-.footer-map {
-  display: flex;
-
-  @media screen and (max-width: 1200px - 1px) {
-    display: none;
-  }
-
-  iframe {
-    border: none;
-  }
-}
diff --git a/src/components/FooterMap/FooterMap.tsx b/src/components/FooterMap/FooterMap.tsx
index bddca1a..4ede894 100644
--- a/src/components/FooterMap/FooterMap.tsx
+++ b/src/components/FooterMap/FooterMap.tsx
@@ -1,26 +1,16 @@
 import React from "react";
-import "./FooterMap.scss";
+import styled from "styled-components";
 
-const AnyReactComponent = ({ text }) => <div>{text}</div>;
+const IFrame = styled.iframe`
 
-export interface FooterMapProps {}
+`;
 
-export interface FooterMapState {}
-
-class FooterMap extends React.Component<FooterMapProps, FooterMapState> {
-  render() {
-    return (
-      <div className="footer-map">
-        <iframe
-          src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1983.6122518000927!2d24.81667815176689!3d60.187150048900186!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x468df5eb3cb4ecf1%3A0x3480cbfeedcc07b6!2sMaarintie+8%2C+02150+Espoo!5e0!3m2!1sfi!2sfi!4v1542413548247"
-          width="600"
-          height="350"
-        >
-        </iframe>
-      </div>
-
-    );
-  }
-}
+const FooterMap: React.FC = () => (
+  <IFrame
+    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1983.6122518000927!2d24.81667815176689!3d60.187150048900186!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x468df5eb3cb4ecf1%3A0x3480cbfeedcc07b6!2sMaarintie+8%2C+02150+Espoo!5e0!3m2!1sfi!2sfi!4v1542413548247"
+    width="600"
+    height="350"
+  />
+)
 
 export default FooterMap;
diff --git a/src/components/PageLink/PageLink.scss b/src/components/PageLink/PageLink.scss
deleted file mode 100644
index f8f1ba5..0000000
--- a/src/components/PageLink/PageLink.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-@import "../../assets/scss/globals";
-
-
-.page-link {
-  border-left-color: color(blue1);
-  border-left-width: 0.8rem;
-  border-left-style: solid;
-  margin: 0 1rem 1rem 0;
-
-  & p {
-    display: flex;
-    margin-block-start: 0;
-    margin-block-end: 0;
-    color: color(dark-blue);
-    font-size: 1rem;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    font-weight: 800;
-    margin-left: 1rem;
-    margin-bottom: 0.5rem;
-    padding: 0;
-  }
-
-  & a {
-    color: color(dark-blue);
-    margin-left: 1rem;
-    display: flex;
-    text-decoration: none;
-    font-weight: normal;
-  }
-}
diff --git a/src/components/PageLink/PageLink.tsx b/src/components/PageLink/PageLink.tsx
index 5562210..ca69416 100644
--- a/src/components/PageLink/PageLink.tsx
+++ b/src/components/PageLink/PageLink.tsx
@@ -1,23 +1,46 @@
 import React from "react";
-import "./PageLink.scss";
+import styled from "styled-components";
 import TextAnchor from "../TextAnchor";
+import { colors } from "@theme/colors";
 
-export interface PageLinkProps {
+interface PageLinkProps {
   to: string;
   desc: string;
 }
-export interface PageLinkState { }
 
-class PageLink extends React.Component<PageLinkProps, PageLinkState> {
-  render() {
-    const { to, desc } = this.props;
-    return (
-      <div className="page-link">
-        <p>{this.props.children}</p>
-        <TextAnchor to={to}>{desc}</TextAnchor>
-      </div>
-    );
+const StyledPageLink = styled.div`
+  border-left-color: ${colors.blue1};
+  border-left-width: 0.8rem;
+  border-left-style: solid;
+  margin: 0 1rem 1rem 0;
+
+  p {
+    margin-block-start: 0;
+    margin-block-end: 0;
+    color: ${colors.darkBlue};
+    font-size: 1rem;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    font-weight: 800;
+    margin-left: 1rem;
+    margin-bottom: 0.5rem;
+    padding: 0;
   }
-}
+
+  a {
+    display: block;
+    color: ${colors.darkBlue};
+    margin-left: 1rem;
+    text-decoration: none;
+    font-weight: normal;
+  }
+`;
+
+const PageLink: React.FC<PageLinkProps> = ({ to, desc, children }) => (
+  <StyledPageLink>
+    <p>{children}</p>
+    <TextAnchor to={to}>{desc}</TextAnchor>
+  </StyledPageLink>
+);
 
 export default PageLink;
diff --git a/src/components/PageSection/PageSection.tsx b/src/components/PageSection.tsx
similarity index 96%
rename from src/components/PageSection/PageSection.tsx
rename to src/components/PageSection.tsx
index 771c9c3..b32797e 100644
--- a/src/components/PageSection/PageSection.tsx
+++ b/src/components/PageSection.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import { ColorDivProps } from "../ColorDiv/ColorDiv";
+import { ColorDivProps } from "./ColorDiv/ColorDiv";
 import { ColorMapper } from "@theme/colors";
 
 interface PageSectionProps {
diff --git a/src/components/PageSection/index.ts b/src/components/PageSection/index.ts
deleted file mode 100644
index f3fe81c..0000000
--- a/src/components/PageSection/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import PageSection from "./PageSection";
-export default PageSection;
diff --git a/src/components/PageSection2.tsx b/src/components/PageSection2.tsx
new file mode 100644
index 0000000..b44550c
--- /dev/null
+++ b/src/components/PageSection2.tsx
@@ -0,0 +1,91 @@
+import React from "react";
+import styled from "styled-components";
+import { colors } from "@theme/colors";
+
+const Section = styled.section`
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-between;
+  position: relative;
+  padding: 2rem 1rem 2rem;
+
+  &.sectionBg-darkBlue {
+    color: ${colors.white};
+    background-color: ${colors.darkBlue};
+    a:hover {
+      color: ${colors.white};
+    }
+  }
+
+  &.sectionBg-lightBlue {
+    color: ${colors.darkBlue};
+    background-color: ${colors.lightBlue};
+    a:hover {
+      color: ${colors.white};
+    }
+  }
+
+  &.sectionBg-black {
+    color: ${colors.white};
+    background-color: ${colors.black};
+    a:hover {
+      color: ${colors.white};
+    }
+  }
+
+  &.sectionBg-grey1 {
+    color: ${colors.white};
+    background-color: ${colors.grey1};
+    a:hover {
+      color: ${colors.white};
+    }
+  }
+
+  &.sectionBg-grey2 {
+    color: ${colors.white};
+    background-color: ${colors.grey2};
+    a:hover {
+      color: ${colors.white};
+    }
+  }
+
+  &.sectionBg-orange1 {
+    color: ${colors.white};
+    background-color: ${colors.orange1};
+  }
+
+  &.sectionBg-orange2 {
+    color: ${colors.white};
+    background-color: ${colors.orange2};
+    a:hover {
+      color: ${colors.blue1};
+    }
+  }
+
+  &.sectionBg-blue1 {
+    color: ${colors.white};
+    background-color: ${colors.blue1};
+    a:hover {
+      color: ${colors.white};
+    }
+  }
+
+  &.sectionBg-lightTurquoise {
+    color: ${colors.darkBlue};
+    background-color: ${colors.lightTurquoise};
+    a:hover {
+      color: ${colors.white};
+    }
+  }
+
+  &.sectionBg-green1 {
+    color: ${colors.darkBlue};
+    background-color: ${colors.green1};
+  }
+`;
+
+const PageSection: React.FC = (props) => (
+  <Section {...props} />
+);
+
+export default PageSection;
diff --git a/src/components/index.tsx b/src/components/index.tsx
index 84aac83..f40bb65 100644
--- a/src/components/index.tsx
+++ b/src/components/index.tsx
@@ -4,5 +4,5 @@ export { default as Button } from "./Button";
 export { default as Ribbon } from "./Ribbon";
 export { default as SponsorReel } from "./SponsorReel";
 export { default as TextAnchor } from "./TextAnchor";
-export { default as PageSection } from "./PageSection";
+export { default as PageSection } from "./PageSection2";
 export { default as Divider } from "./Divider";
\ No newline at end of file
diff --git a/src/index.scss b/src/index.scss
index 0820280..b5d7679 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -19,6 +19,8 @@ body {
   min-height: 100vh;
   display: flex;
   flex-flow: column nowrap;
+  color: color(black);
+  background-color: color(white1);
 }
 
 body {
diff --git a/src/theme/colors.ts b/src/theme/colors.ts
index e467134..f34cf25 100644
--- a/src/theme/colors.ts
+++ b/src/theme/colors.ts
@@ -48,6 +48,8 @@ export const colors = {
   inherit: "inherit"
 }
 
+export type Colors2 = keyof typeof colors;
+
 export const colorToClass = (color: Colors): string => color ? `color-div__${color}` : undefined;
 export const bgColorToClass = (color: Colors): string => color ? `color-div__background_${color}` : undefined;
 export const hoverColorToClass = (color: Colors): string => color ? `color-div__${color}Hoverable` : undefined;
diff --git a/src/views/ActualPage/EventCalendar.tsx b/src/views/ActualPage/EventCalendar.tsx
index 436c437..7ed204a 100644
--- a/src/views/ActualPage/EventCalendar.tsx
+++ b/src/views/ActualPage/EventCalendar.tsx
@@ -35,11 +35,8 @@ const EventCalendar: React.FC<EventCalendarProps> = ({events}) => {
             start_time={e.start_time}
             text={e.description_fi}
             link={`/events/${e.id}`}
-            button={
-              <Button type="filled" onClick={() => { }}>
-                <h6>Lue lisää&nbsp;›</h6>
-              </Button>
-            }
+            buttonText="Lue lisää&nbsp;›"
+            buttonOnClick={() => {}}
           >
           </Card>
         ))}
diff --git a/src/views/ActualPage/News.tsx b/src/views/ActualPage/News.tsx
index 550eae1..40fdf04 100644
--- a/src/views/ActualPage/News.tsx
+++ b/src/views/ActualPage/News.tsx
@@ -35,11 +35,8 @@ const News: React.FC<NewsProps> = ({feed}) => {
             start_time={post.publish_time}
             text={post.description_fi}
             link={`/feed/${post.id}`}
-            button={
-              <Button type="filled" onClick={() => { }}>
-                <h6>Lue lisää&nbsp;›</h6>
-              </Button>
-            }
+            buttonText="Lue lisää&nbsp;›"
+            buttonOnClick={() => {}}
           >
           </Card>
         ))}
diff --git a/src/views/FrontPage/FrontPageHero.tsx b/src/views/FrontPage/FrontPageHero.tsx
index 2970031..c0b527c 100644
--- a/src/views/FrontPage/FrontPageHero.tsx
+++ b/src/views/FrontPage/FrontPageHero.tsx
@@ -1,52 +1,162 @@
 import React from "react";
-import { PageSection, Button } from "@components/index";
-import HeroMainSection from "@components/Hero/HeroMainSection";
-import HeroAsideSection from "@components/Hero/HeroAsideSection";
-import HeroAsideItem from "@components/Hero/HeroAsideItem";
+import styled from "styled-components";
+import { PageSection } from "@components/index";
+import { colors } from "@theme/colors";
+import Anchor from "@components/Anchor";
+
+const HeroSection = styled(PageSection)`
+  padding: 0;
+  @media screen and (min-width: 800px) {
+    min-height: 85vh;
+  }
+
+  color: ${colors.white};
+  background-color: ${colors.darkBlue};
+  a:hover {
+    color: ${colors.white};
+  }
+`;
+
+const MainSection = styled.section`
+  flex: 6;
+
+  & > div {
+    margin: 15vh auto 0;
+    max-width: 600px;
+    text-align: center;
+    line-height: 1.5rem;
+
+    & > div {
+      min-width: 20%;
+      max-width: fit-content;
+      margin: auto;
+    }
+
+    h1 {
+      line-height: 40px;
+      @media screen and (max-width: 500px) {
+        font-size: 2rem;
+      }
+    }
+
+    p {
+      max-width: 400px;
+      margin: 1em auto;
+      font-weight: 100;
+    }
+  }
+`;
+
+const HeroButton = styled.button`
+  display: block;
+  width: 100%;
+  color: ${colors.blue1};
+  background-color: transparent;
+  padding: 0.8rem 2rem;
+  margin: 0.5rem;
+  font-size: 0.8rem;
+  font-weight: 800;
+  letter-spacing: .1em;
+  text-transform: uppercase;
+  border: 1px solid ${colors.lightTurquoise};
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &:active,
+  &:focus {
+    outline: none;
+  }
+`;
+
+const AsideSection = styled.aside`
+  flex: 4;
+  padding: 3rem 1rem 2rem;
+`;
+
+const AsideItem = styled.article`
+  max-width: 300px;
+  line-height: 1rem;
+  margin-bottom: 1rem;
+
+  h2 {
+    color: ${colors.lightBlue};
+    text-transform: uppercase;
+    letter-spacing: 3px;
+    line-height: 20px;
+  }
+
+  p, a {
+    color: ${colors.lightBlue};
+    font-size: 14px;
+    font-weight: 300;
+    line-height: 20px;
+  }
+
+  a {
+    color: ${colors.blue1};
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.1rem;
+
+    &:hover {
+      color: ${colors.white};
+    }
+  }
+`;
 
 const FrontPageHero: React.FC = () => (
-  <PageSection backgroundColor="dark-blue" fullSize className="lander-hero">
-    <HeroMainSection>
-      <h1>Aalto-yliopiston Sähköinsinöörikilta</h1>
-      <p>
+  <HeroSection fullSize>
+    <MainSection>
+      <div>
+        <h1>Aalto-yliopiston Sähköinsinöörikilta</h1>
+        <p>
           on elektroniikan ja sähkötekniikan opiskelijoiden järjestö. Kilta
           kasaa yhteen yli 600 alansa huippua, jotka ovat avainasemassa
           vauhdilla sähköistyvän maailmamme kehityksessä.
-      </p>
-      <div className="hero-button-container">
-        <Button type="hero" onClick={() => { }}>
-          <h6>Killan tehtävät&nbsp;›</h6>
-        </Button>
-        <Button type="hero" onClick={() => { }}>
-          <h6>Vastapainoa opiskelulle&nbsp;›</h6>
-        </Button>
+        </p>
+        <div>
+          <HeroButton onClick={() => { }}>
+            <span>Killan tehtävät&nbsp;›</span>
+          </HeroButton>
+          <HeroButton onClick={() => { }}>
+            <span>Vastapainoa opiskelulle&nbsp;›</span>
+          </HeroButton>
+        </div>
       </div>
-    </HeroMainSection>
-    <HeroAsideSection textColor="light-blue" backgroundColor="dark-blue">
-      <HeroAsideItem
-        title="Vasta-aloittanut opiskelija"
-        linkHref="/kilta/fuksi"
-        linkText="Fuksit"
-      >
+    </MainSection>
+
+    <AsideSection>
+      <AsideItem>
+        <h2>Vasta-aloittanut opiskelija</h2>
+        <p>
           Fuksikasvatusta, ISO-toimintaa, lorem ipsum dolor sit ja amet.
-      </HeroAsideItem>
-      <HeroAsideItem
-        title="Harkitsetko uraa alalla?"
-        linkHref="/opinnot_ja_ura"
-        linkText="Opinnot ja ura"
-      >
+        </p>
+        <Anchor to={"/kilta/fuksi"}>
+          Fuksit&nbsp; ›
+        </Anchor>
+      </AsideItem>
+      <AsideItem>
+        <h2>Harkitsetko uraa alalla?</h2>
+        <p>
           Oletko abi, vaihtamassa uraa tai valmistumassa?
-      </HeroAsideItem>
-      <HeroAsideItem
-        title="Yhteistyö yritysten kanssa"
-        linkHref="/yritysyhteistyo"
-        linkText="Yritysyhteistyö"
-      >
-          Avoimet työpaikat ja excursiot. Infoa yritysten edustajille ja
-          sponsseille.
-      </HeroAsideItem>
-    </HeroAsideSection>
-  </PageSection>
+        </p>
+        <Anchor to={"/opinnot_ja_ura"}>
+          Opinnot ja ura&nbsp; ›
+        </Anchor>
+      </AsideItem>
+      <AsideItem>
+        <h2>Yhteistyö yritysten kanssa</h2>
+        <p>
+          Avoimet työpaikat ja excursiot. Infoa yritysten edustajille ja sponsseille.
+        </p>
+        <Anchor to={"/yritysyhteistyo"}>
+          Yritysyhteistyö&nbsp; ›
+        </Anchor>
+      </AsideItem>
+    </AsideSection>
+  </HeroSection>
 );
 
 export default FrontPageHero;
\ No newline at end of file
diff --git a/src/views/FrontPage/FrontPageView.tsx b/src/views/FrontPage/FrontPageView.tsx
index 60f08c4..79dec8e 100644
--- a/src/views/FrontPage/FrontPageView.tsx
+++ b/src/views/FrontPage/FrontPageView.tsx
@@ -1,19 +1,59 @@
 import React from "react";
-import { PageSection, Card, PageLink, Button, Ribbon, SponsorReel, TextAnchor, Divider } from "@components/index";
+import styled from "styled-components";
+import { PageSection, Card, PageLink, Ribbon, SponsorReel, TextAnchor, Divider } from "@components/index";
 import FrontPageHero from "./FrontPageHero";
 import { Event } from "@models/Event";
 import { Post } from "@models/Feed";
+import { colors } from "@theme/colors";
 
 interface FrontPageViewProps {
   events: Event[];
   feed: Post[];
 }
 
+const SponsorSection = styled(PageSection)`
+  justify-content: center;
+
+  color: ${colors.black};
+  background-color: ${colors.white};
+  a {
+    color: ${colors.blue1};
+  }
+`;
+
+const CardSection = styled(PageSection)`
+  @media screen and (max-width: 800px - 1px) {
+    flex-flow: column nowrap;
+  }
+
+  color: ${colors.black};
+  background-color: ${colors.white};
+  a {
+    color: ${colors.blue1};
+    &:hover {
+      color: ${colors.darkBlue};
+    }
+  }
+
+  h6 {
+    color: ${colors.orange1};
+  }
+`;
+
+const SössöSection = styled(PageSection)`
+  color: ${colors.white};
+  background-color: ${colors.orange1};
+
+  a:hover {
+    color: ${colors.darkBlue};
+  }
+`;
+
 const FrontPageView: React.FC<FrontPageViewProps> = ({ events, feed }) => (
   <>
     <FrontPageHero />
     <main>
-      <PageSection backgroundColor="white1" cardSection>
+      <CardSection>
         {events.map(event => (
           <Card
             key={event.id}
@@ -22,31 +62,27 @@ const FrontPageView: React.FC<FrontPageViewProps> = ({ events, feed }) => (
             text={event.description_fi}
             link={`/events/${event.id}`}
             image={event.image || event.tags[0].icon}
-            button={
-              <Button type="filled" onClick={() => { }}>
-                <h6>Lue lisää&nbsp;›</h6>
-              </Button>
-            }
+            buttonOnClick={() => {}}
+            buttonText="Lue lisää&nbsp;›"
           />
         ))}
         <div className="card" key="links">
           <PageLink to="/events/" desc="löydät tapahtumakalenterista&nbsp;›">
-              Kaikki tapahtumat
+            Kaikki tapahtumat
           </PageLink>
         </div>
-      </PageSection>
-      <PageSection backgroundColor="orange1">
+      </CardSection>
+
+      <SössöSection>
         <Ribbon>
           <h3>Sössöä vuodesta 1969.</h3>
           <TextAnchor textColor="white1" hoverColor="blue1" to="https://sosso.fi">
             <h4>Lue opiskelijalehden viimeisin numero&nbsp;›</h4>
           </TextAnchor>
         </Ribbon>
-      </PageSection>
-      <PageSection
-        backgroundColor="white1"
-        cardSection
-      >
+      </SössöSection>
+
+      <CardSection>
         {feed.map(inst => (
           <Card
             key={inst.id}
@@ -54,26 +90,24 @@ const FrontPageView: React.FC<FrontPageViewProps> = ({ events, feed }) => (
             start_time={inst.publish_time}
             text={inst.description_fi}
             link={`/feed/${inst.id}`}
-            button={
-              <Button type="filled" onClick={() => { }}>
-                <h6>Lue lisää&nbsp;›</h6>
-              </Button>
-            }
+            buttonOnClick={() => {}}
+            buttonText="Lue lisää&nbsp;›"
           />
         ))}
         <div className="card" key="links">
           <PageLink to="/feed/" desc="ja hallituksen kuulumiset&nbsp;›">
-              Lue tuoreimmat uutiset
+            Lue tuoreimmat uutiset
           </PageLink>
           <PageLink to="https://sik.kuvat.fi" desc="kuvagalleriassa&nbsp;›">
-              Kuvia tapahtumista
+            Kuvia tapahtumista
           </PageLink>
         </div>
-      </PageSection>
-      <PageSection center backgroundColor="white1">
+      </CardSection>
+
+      <SponsorSection>
         <Divider />
         <SponsorReel />
-      </PageSection>
+      </SponsorSection>
     </main>
   </>
 )