diff --git a/src/assets/scss/_globals.scss b/src/assets/scss/_globals.scss
index ea7038e..7154e88 100644
--- a/src/assets/scss/_globals.scss
+++ b/src/assets/scss/_globals.scss
@@ -7,8 +7,8 @@ $grey2: #efece4;
 $orange1: #d57a2d;
 $orange2: #dd934e;
 $blue: #57b2df;
-$green1: #beddeb;
-$green2: #c0dcd9;
+$light-turquoise: #beddeb;
+$green: #c0dcd9;
 $sand: #fdf9d7;
 
 $font: 'Montserrat', sans-serif;
diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss
index fa7f62f..9165781 100644
--- a/src/components/Button/Button.scss
+++ b/src/components/Button/Button.scss
@@ -18,7 +18,7 @@
     color: $blue;
     font-weight: 800;
     letter-spacing: 1.5px;
-    border: 1px solid $green2;
+    border: 1px solid $light-turquoise;
   }
 
   &.filled {
diff --git a/src/components/HeroAsideItem/HeroAsideItem.scss b/src/components/HeroAsideItem/HeroAsideItem.scss
index 30086cf..c066960 100644
--- a/src/components/HeroAsideItem/HeroAsideItem.scss
+++ b/src/components/HeroAsideItem/HeroAsideItem.scss
@@ -14,7 +14,6 @@
   }
 
   h2 {
-    color: $light-blue;
     text-transform: uppercase;
     letter-spacing: 3px;
     font-size: 18px;
@@ -22,7 +21,6 @@
   }
 
   p {
-    color: $white;
     font-size: 14px;
   }
 
diff --git a/src/components/HeroAsideSection/HeroAsideSection.scss b/src/components/HeroAsideSection/HeroAsideSection.scss
index a92e142..0a8012e 100644
--- a/src/components/HeroAsideSection/HeroAsideSection.scss
+++ b/src/components/HeroAsideSection/HeroAsideSection.scss
@@ -13,4 +13,25 @@
   text-align: left;
   font-weight: 300;
   padding: 3rem 1rem 2rem;
+
+  &.dark-blue {
+    background-color: $dark-blue;
+
+    h2 {
+      color: $light-blue;
+    }
+
+    p {
+      color: $white;
+    }
+  }
+
+  &.light-turquoise {
+    background-color: $light-turquoise;
+
+    h2,
+    p {
+      color: $dark-blue;
+    }
+  }
 }
diff --git a/src/components/HeroAsideSection/HeroAsideSection.tsx b/src/components/HeroAsideSection/HeroAsideSection.tsx
index e32ddfb..4b68930 100644
--- a/src/components/HeroAsideSection/HeroAsideSection.tsx
+++ b/src/components/HeroAsideSection/HeroAsideSection.tsx
@@ -2,32 +2,30 @@ import * as React from "react";
 import "./HeroAsideSection.scss";
 import HeroAsideItem from "../HeroAsideItem";
 
-export interface HeroAsideSectionProps {}
+export enum BackgroundColor {
+  DarkBlue,
+  LightTurquoise,
+}
+export interface HeroAsideSectionProps {
+  backgroundColor: BackgroundColor;
+}
 export interface HeroAsideSectionState {}
 
+const colors = new Map<BackgroundColor, string>([
+  [BackgroundColor.DarkBlue, "dark-blue"],
+  [BackgroundColor.LightTurquoise, "light-turquoise"],
+]);
+
 class HeroAsideSection extends React.Component<HeroAsideSectionProps, HeroAsideSectionState> {
   render() {
+    const { backgroundColor } = this.props;
+    const bgClass = colors.get(backgroundColor);
+    const className = `hero-aside-section ${bgClass}`;
     return (
-      <div className="hero-aside-section">
-        <HeroAsideItem
-          title="Vasta-aloittanut opiskelija"
-          linkHref="/kilta/fuksi"
-          linkText="Fuksit">
-          Fuksikasvatusta, ISO-toimintaa, lorem
-          ipsum dolor sit ja amet.
-        </HeroAsideItem>
-        <HeroAsideItem
-          title="Harkitsetko uraa alalla?"
-          linkHref="/opinnot_ja_ura"
-          linkText="Opinnot ja ura">
-          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>
+      <div className={className}>
+        <div className="hero-aside-section-block">
+          {this.props.children}
+        </div>
       </div>
     );
   }
diff --git a/src/components/PageSection/PageSection.scss b/src/components/PageSection/PageSection.scss
index cba8b0c..c927b41 100644
--- a/src/components/PageSection/PageSection.scss
+++ b/src/components/PageSection/PageSection.scss
@@ -1,13 +1,16 @@
 @import "../../assets/scss/globals";
 
 .page-section {
-  padding: 2rem 1rem;
   background-color: $dark-blue;
   display: flex;
   flex-flow: row wrap;
   justify-content: space-between;
   position: relative;
 
+  .padded {
+    padding: 2rem 1rem 3rem;
+  }
+
   &:not(.card-section) {
     @media screen and (max-width: 800px - 1px) {
       flex-flow: column nowrap;
diff --git a/src/components/PageSection/PageSection.tsx b/src/components/PageSection/PageSection.tsx
index 8c439a2..d243abc 100644
--- a/src/components/PageSection/PageSection.tsx
+++ b/src/components/PageSection/PageSection.tsx
@@ -12,6 +12,7 @@ export interface PageSectionProps {
   center?: boolean;
   bottomBorder?: boolean;
   cardSection?: boolean;  // does section contain a grid of cards
+  fullSize?: boolean;
 }
 export interface PageSectionState {}
 
@@ -23,11 +24,12 @@ const colors = new Map<BackgroundColor, string>([
 
 class PageSection extends React.Component<PageSectionProps, PageSectionState> {
   render() {
-    const { backgroundColor, children, center, bottomBorder, cardSection } = this.props;
+    const { backgroundColor, children, center, bottomBorder, cardSection, fullSize } = this.props;
     const centerClass = center ? "center" : "";
     const borderClass = bottomBorder ? "bottom-border" : "";
     const cardsClass = cardSection ? "card-section" : "";
-    const className = `page-section ${colors.get(backgroundColor)} ${centerClass} ${borderClass} ${cardsClass}`;
+    const nonPaddedClass = fullSize ? "" : "padded";
+    const className = `page-section ${colors.get(backgroundColor)} ${centerClass} ${borderClass} ${cardsClass} ${nonPaddedClass}`;
     return (
       <div className={className}>
         {children}
diff --git a/src/pages/FrontPage/FrontPage.tsx b/src/pages/FrontPage/FrontPage.tsx
index 6a3e740..760e800 100644
--- a/src/pages/FrontPage/FrontPage.tsx
+++ b/src/pages/FrontPage/FrontPage.tsx
@@ -11,12 +11,15 @@ import { StaticContext } from "../../server/StaticContext";
 import * as BeerImage from "../../assets/img/beer.jpeg";
 import PageSection from "../../components/PageSection";
 import { BackgroundColor as PageSectionColor }  from "../../components/PageSection/PageSection";
+import { BackgroundColor as HeroAsideColor } from "../../components/HeroAsideSection/HeroAsideSection";
+
 import PageLink from "../../components/PageLink/PageLink";
 import HeroMainSection from "../../components/HeroMainSection";
 import HeroAsideSection from "../../components/HeroAsideSection";
 import Button, { ButtonType } from "../../components/Button";
 import Ribbon from "../../components/Ribbon";
 import SponsorReel from "../../components/SponsorReel";
+import HeroAsideItem from "../../components/HeroAsideItem";
 
 interface FrontPageProps {
   staticContext: StaticContext;
@@ -88,7 +91,7 @@ class FrontPage extends React.Component<FrontPageProps, FrontPageState> {
     const { events, feed } = this.state;
     return (
       <div className="front-page">
-        <PageSection backgroundColor={PageSectionColor.DarkBlue}>
+        <PageSection backgroundColor={PageSectionColor.DarkBlue} fullSize>
           <HeroMainSection>
             <h1>Aalto-yliopiston Sähköinsinöörikilta</h1>
             <p>on elektroniikan ja sähkötekniikan opiskelijoiden järjestö.
@@ -98,7 +101,26 @@ class FrontPage extends React.Component<FrontPageProps, FrontPageState> {
             <Button type={ButtonType.Hero} onClick={() => { }}>Killan tehtävät&nbsp;›</Button>
             <Button type={ButtonType.Hero} onClick={() => { }}>Vastapainoa opiskelulle&nbsp;›</Button>
           </HeroMainSection>
-          <HeroAsideSection>
+          <HeroAsideSection backgroundColor={HeroAsideColor.DarkBlue}>
+            <HeroAsideItem
+              title="Vasta-aloittanut opiskelija"
+              linkHref="/kilta/fuksi"
+              linkText="Fuksit">
+              Fuksikasvatusta, ISO-toimintaa, lorem
+              ipsum dolor sit ja amet.
+            </HeroAsideItem>
+            <HeroAsideItem
+              title="Harkitsetko uraa alalla?"
+              linkHref="/opinnot_ja_ura"
+              linkText="Opinnot ja ura">
+              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>
         <PageSection backgroundColor={PageSectionColor.White} cardSection>
diff --git a/src/pages/GuildPage/GuildPage.scss b/src/pages/GuildPage/GuildPage.scss
new file mode 100644
index 0000000..ca644f9
--- /dev/null
+++ b/src/pages/GuildPage/GuildPage.scss
@@ -0,0 +1,3 @@
+.guild-page {
+  width: inherit;
+}
diff --git a/src/pages/GuildPage/GuildPage.tsx b/src/pages/GuildPage/GuildPage.tsx
new file mode 100644
index 0000000..bedd8e1
--- /dev/null
+++ b/src/pages/GuildPage/GuildPage.tsx
@@ -0,0 +1,70 @@
+import * as React from "react";
+import Helmet from "react-helmet";
+import "./GuildPage.scss";
+import PageSection from "../../components/PageSection";
+import HeroMainSection from "../../components/HeroMainSection";
+import HeroAsideSection from "../../components/HeroAsideSection";
+import HeroAsideItem from "../../components/HeroAsideItem";
+import Button from "../../components/Button";
+import { ButtonType } from "../../components/Button";
+
+import { BackgroundColor as PageSectionColor } from "../../components/PageSection/PageSection";
+import { BackgroundColor as HeroAsideColor } from "../../components/HeroAsideSection/HeroAsideSection";
+
+export interface GuildPageProps {}
+export interface GuildPageState {}
+
+class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
+  render() {
+    return (
+      <div className="guild-page">
+        <Helmet>
+          <link rel="canonical" href="https://sik.ayy.fi/kilta" />
+        </Helmet>
+        <div className="front-page">
+          <PageSection backgroundColor={PageSectionColor.DarkBlue} fullSize>
+            <HeroMainSection>
+              <h1>Kilta koostuu sähkötekniikan ja
+              elektroniikan (ELEC) tutkinto-ohjelmissa
+              opiskelevista
+              opiskelijoista</h1>
+              <p>Vapaa-ajan jäsenpalvelujen lisäksi killan tehtävänä
+              on edistää jäsentensä opintoja, tarjota uraohjausta ja
+              fuksikasvatusta. Jokaiselle jäsenelle löytyy varmasti
+              jotakin—kaukomaita, opiskelijalehti Sössöä, ja kiltaaktiivina
+              pääset kartuttamaan kokemusta, josta on
+              hyötyä myös työelämässä.</p>
+              <p>Arvot estrumquias doluptatur aut quam fugiti cus debit
+              landisciis eatemperes eumquibus di blat que sim etus idis
+              dolut labor ad magnat.</p>
+            </HeroMainSection>
+            <HeroAsideSection backgroundColor={HeroAsideColor.LightTurquoise}>
+              <HeroAsideItem
+                title="Toverielämää ja sähkötekniikkaa"
+                linkHref="/kilta/tehtavat"
+                linkText="Killan tehtavat ja tarina">
+              </HeroAsideItem>
+              <HeroAsideItem
+                title="Aktiivinen hallinto"
+                linkHref="/kilta/organisaatio"
+                linkText="Organisaatio">
+              </HeroAsideItem>
+              <HeroAsideItem
+                title="Kilta-aktiivit järjestävät monipuolista toimintaa"
+                linkHref="/kilta/organisaatio"
+                linkText="Toimikunnat ja jaokset">
+              </HeroAsideItem>
+              <HeroAsideItem
+                title="Edut jäsenille"
+                linkHref="/kilta/yliopisto"
+                linkText="Yliopiston jäsenedut">
+              </HeroAsideItem>
+            </HeroAsideSection>
+          </PageSection>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default GuildPage;
diff --git a/src/pages/GuildPage/index.ts b/src/pages/GuildPage/index.ts
new file mode 100644
index 0000000..7dac43e
--- /dev/null
+++ b/src/pages/GuildPage/index.ts
@@ -0,0 +1,2 @@
+import GuildPage from "./GuildPage";
+export default GuildPage;
diff --git a/src/routes.tsx b/src/routes.tsx
index ebebda2..cf49b10 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -3,13 +3,14 @@ import { Fragment } from "react";
 import { Switch, Route, DefaultRoute } from "react-router-dom";
 import Helmet from "react-helmet";
 import FrontPage from "./pages/FrontPage";
+import GuildPage from "./pages/GuildPage";
 import NotFoundPage from "./pages/NotFoundPage";
 import CommonPage from "./pages/CommonPage";
 import JsonLD from "./components/JsonLD";
 import "./index.scss";
 
-const renderFrontPage = (props): JSX.Element => {
-  return <CommonPage page={FrontPage} {...props} />;
+const renderPage = (Page) => (props): JSX.Element => {
+  return <CommonPage page={Page} {...props} />;
 };
 
 const Routes = () => (
@@ -26,7 +27,8 @@ const Routes = () => (
       "url": "https://sik.ayy.fi",
     }} />
     <Switch>
-      <Route exact path="/" render={renderFrontPage} />
+      <Route exact path="/" render={renderPage(FrontPage)} />
+      <Route path="/kilta" render={renderPage(GuildPage)} />
       <Route component={NotFoundPage} />
     </Switch>
   </Fragment>