diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss
index 8b71216..70896ac 100644
--- a/src/components/Button/Button.scss
+++ b/src/components/Button/Button.scss
@@ -3,14 +3,21 @@
 .button {
   -webkit-appearance: none;
   border-radius: none;
-  padding: 0.5rem 1rem;
+  padding: 0.8rem 2rem;
   margin: 0.5rem;
-  border: 2px solid $blue;
-  font-size: 1rem;
-  font-weight: 500;
+  font-size: 10px;
+  background: none;
+  text-transform: uppercase;
+
+  &.hero {
+    background-color: $dark-blue;
+    color: $blue;
+    font-weight: 500;
+    letter-spacing: 1.5px;
+    border: 1px solid $white;
+  }
 
   &:hover {
-    border: 2px solid $dark-blue;
     cursor: pointer;
   }
 
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 27d76cd..adb9f3d 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -3,12 +3,15 @@ import "./Button.scss";
 
 export interface ButtonProps {
   onClick: () => void;
+  type: string;
 }
 
 export default class Button extends React.Component<ButtonProps, undefined> {
   render() {
+    const { type } = this.props;
+    const className = `button ${type}`;
     return (
-      <button onClick={this.props.onClick} className="button">
+      <button onClick={this.props.onClick} className={className}>
         {this.props.children}
       </button>
     );
diff --git a/src/pages/FrontPage/FrontPage.tsx b/src/pages/FrontPage/FrontPage.tsx
index e14ee31..56cfc75 100644
--- a/src/pages/FrontPage/FrontPage.tsx
+++ b/src/pages/FrontPage/FrontPage.tsx
@@ -11,6 +11,7 @@ import PageSection from "../../components/PageSection";
 import { BackgroundColor as PageSectionColor }  from "../../components/PageSection/PageSection";
 import HeroMainSection from "../../components/HeroMainSection";
 import HeroAsideSection from "../../components/HeroAsideSection";
+import Button from "../../components/Button";
 
 interface FrontPageProps {
   staticContext: StaticContext;
@@ -71,6 +72,8 @@ class FrontPage extends React.Component<FrontPageProps, FrontPageState> {
             Kilta kasaa yhteen yli 600 alansa huippua, jotka ovat
             avainasemassa vauhdilla sähköistyvän maailmamme
             kehityksessä.</p>
+            <Button type="hero" onClick={() => { }}>Killan tehtävät ›</Button>
+            <Button type="hero" onClick={() => { }}>Vastapainoa opiskelulle ›</Button>
           </HeroMainSection>
           <HeroAsideSection>
             Kikkeli