diff --git a/public/img/FilterMenus.PNG b/public/img/FilterMenus.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..0a83d71b99cd8f58352dd588523d5d60ddc89aed
Binary files /dev/null and b/public/img/FilterMenus.PNG differ
diff --git a/public/img/FilterOptions.PNG b/public/img/FilterOptions.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..61d33e661bb28ef457094f7f301d2ba68e85f6c8
Binary files /dev/null and b/public/img/FilterOptions.PNG differ
diff --git a/public/img/SortMenu.PNG b/public/img/SortMenu.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..8b7c8cb3b47f22ae10656bcacd80c6ebea3f7ade
Binary files /dev/null and b/public/img/SortMenu.PNG differ
diff --git a/public/styles.css b/public/styles.css
index 2c5b51d2161ff7b54a9eb3aa4bc2e364f7f646f0..ecd2241d06a5f7e0519bd1d8d10418ee219e3046 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -29,6 +29,12 @@ body {
   font-weight: 500;
   color: #000000; }
 
+.heading-tertiary {
+  font-size: 2.5rem;
+  font-family: "Baloo Paaji 2", cursive;
+  font-weight: 500;
+  color: #000000; }
+
 .heading-third {
   font-family: "Baloo Paaji 2", cursive;
   font-size: 3.2rem;
@@ -306,3 +312,43 @@ body {
 .test {
   height: 0;
   overflow: hidden; }
+
+.container-instructions {
+  display: grid;
+  grid-template-columns: [full-start] minmax(6rem, 1fr) [center-start] repeat(8, [col-start] minmax(min-content, 16rem) [col-end]) [center-end] minmax(6rem, 1fr) [full-end];
+  grid-template-rows: 7.5rem 50vh min-content min-content min-content; }
+
+.section-instructions {
+  font-family: "Baloo Paaji 2", cursive;
+  font-weight: 500;
+  padding: 8rem 12rem;
+  position: relative;
+  justify-content: center;
+  display: flex;
+  grid-column: center-start / center-end; }
+  .section-instructions__boxes {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
+    grid-column-gap: 12rem;
+    grid-row-gap: 8rem;
+    margin-bottom: 10rem; }
+  .section-instructions__btn-box {
+    display: flex;
+    justify-content: center; }
+
+.FilterInstructionBox {
+  padding-bottom: 1rem;
+  height: 25rem; }
+
+.instructionHeader {
+  padding-bottom: 0.1rem !important; }
+
+.section-instructions ul {
+  margin-left: 6rem; }
+
+.section-instructions ol {
+  margin-left: 2rem; }
+
+.GuideImage {
+  width: 30rem;
+  float: right; }
diff --git a/sass/base/_typography.scss b/sass/base/_typography.scss
index f8a4afde89998ccf47ab47d7c890d34331668016..0f6053070f12ce2c66ac12afc75cb3dedda7ca5e 100644
--- a/sass/base/_typography.scss
+++ b/sass/base/_typography.scss
@@ -18,6 +18,12 @@ body {
     color: $color-black;
 }
 
+.heading-tertiary {
+    font-size: 2.5rem;
+    font-family: $font-secondary;
+    font-weight: 500;
+    color: $color-black;
+}
 .heading-third {
     font-family: $font-secondary;
     font-size: 3.2rem;
diff --git a/sass/main.scss b/sass/main.scss
index 0bd595d2bf075dd73ba627d38a2a8aa73db04c7b..3dcfa79fef8824d53b65b229c385ad2ad0ad7e7d 100644
--- a/sass/main.scss
+++ b/sass/main.scss
@@ -14,4 +14,5 @@
 @import "layouts/navigation";
 
 @import "pages/home";
-@import "pages/assignments";
\ No newline at end of file
+@import "pages/assignments";
+@import "pages/instructions";
\ No newline at end of file
diff --git a/src/components/App.js b/src/components/App.js
index b7ce8c0f9b52c850e5c357420a96bb4dfa61846e..a3f9e0d3b7086767b3d858e79fa165fe41b21063 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -3,6 +3,7 @@ import { Router, Route } from 'react-router-dom';
 
 import Home from './Home';
 import Assignments from './Assignments';
+import Instructions from './Instructions';
 import history from '../history';
 
 const App = () => {
@@ -11,6 +12,7 @@ const App = () => {
             <Router history={history}>
                 <Route path="/" exact component={Home} />
                 <Route path="/assignments" exact component={Assignments} />
+                <Route path="/instructions" exact component={Instructions} />
             </Router>
         </div>
     );
diff --git a/src/components/Instructions/filterInstructions.js b/src/components/Instructions/filterInstructions.js
new file mode 100644
index 0000000000000000000000000000000000000000..74b7909d715b8b6f61c9a232b82580264e67a14f
--- /dev/null
+++ b/src/components/Instructions/filterInstructions.js
@@ -0,0 +1,36 @@
+import React, { Component } from 'react';
+import { withNamespaces } from 'react-i18next';
+
+
+class FilterInstructions extends Component {
+    render() {
+        const { t } = this.props;
+        
+        return (
+            <div>
+                <h2 className="section-instructions heading-secondary instructionHeader ">{t('Lajittelu ja filtteröinti')}</h2>
+                <section className="section-instructions FilterInstructionBox" >
+                    <div className="section-instructions__boxes">
+                        <div >
+                            <img src='./img/SortMenu.PNG' className="GuideImage" alt="What the sort options look like"/>
+                        </div>
+                        <div>
+                            <h3 className="heading-tertiary instructionHeader">{t('Lajittelu')}</h3>
+                            <p className="introduction-text">{t("Voit järjestää toimeksianotha valitsemalla 'Järjestä tulokset' -valiksota haluamasi järjestys")}</p>
+                        </div>
+                    </div>
+                </section>
+                <section className="section-instructions">
+                    <div className="section-instructions__boxes">
+                        <div >
+                            <img src='./img/FilterOptions.PNG' className="GuideImage" alt="Different filter options"/>
+                        </div>
+                        <div>
+                            <h3 className="heading-tertiary instructionHeader">{t('Filtteröinti')}</h3>
+                            <p className="introduction-text">{t("Voit filtteröidä toimeksiantoja mm.alan ja tiimiroolin mukaan, jolloin saat juuri sinulle sopivia/sinua kiinnostavia toimeksiantoja!")}</p>
+                        </div>
+                    </div>
+                </section>
+            </div>
+        )}}
+export default withNamespaces()(FilterInstructions);
\ No newline at end of file
diff --git a/src/components/Instructions/index.js b/src/components/Instructions/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..1baa9624edbd442f7e1aa0d36721ed2adc7f0faa
--- /dev/null
+++ b/src/components/Instructions/index.js
@@ -0,0 +1,28 @@
+import React, { Component } from 'react';
+import { Helmet } from 'react-helmet';
+import { withNamespaces } from 'react-i18next';
+
+import Navbar from '../Navbar';
+import Header from '../Header';
+import InstructionsContent from './instructionsContent';
+import Footer from '../Footer';
+import FilterInstructions from './filterInstructions';
+
+class Instructions extends Component {
+    render() {
+        const { t } = this.props;
+        return (
+            <div>
+                <Helmet>FF Marketplace - Instructions</Helmet>
+                <div  className="container-instructions">
+                    <Navbar />
+                    <Header />
+                    <InstructionsContent />
+                    </div>
+                    <FilterInstructions />
+                    <Footer />
+            </div>
+        )
+    }
+}
+export default withNamespaces()(Instructions);
\ No newline at end of file
diff --git a/src/components/Instructions/instructionsContent.js b/src/components/Instructions/instructionsContent.js
new file mode 100644
index 0000000000000000000000000000000000000000..9bb0769f6b234617368f02cf619a296e43c9c18c
--- /dev/null
+++ b/src/components/Instructions/instructionsContent.js
@@ -0,0 +1,33 @@
+import React, { Component } from 'react';
+import { withNamespaces } from 'react-i18next';
+
+
+class InstructionsContent extends Component {
+    render() {
+        const { t } = this.props;
+        return (
+            <section className="section-instructions">
+                <div>
+                    <h3 className="heading-tertiary">{t('Kuinka palvelua käytetään')}:</h3>
+                    <ol>
+                        <li className="introduction-text">{t('Siirry selaamaan toimeksiantoja')}</li>
+                        <li className="introduction-text">{t('Lajittele ja filtteröi toimeksiantoja kiinostuksesi ja osaamisesi mukaan')}</li>
+                        <li className="introduction-text">{t('Näet toimeksiantotuloksia, jotka sopisivat sinulle parhaiten!')}</li>
+                        <li className="introduction-text">{t('Toimeksiannoista näet seuraavat tiedot')}:</li>
+                        <ul>
+                            <li className="introduction-text">{t('Toimeksiannon nimi')}</li>
+                            <li className="introduction-text">{t('Kuvaus')}</li>
+                            <li className="introduction-text">{t('Rooleja/Ominaisuuksia, joita haetaan tiimiin')}</li>
+                        </ul>
+                        <li className="introduction-text">{t('Kiinnitä itsesi haluamaasi toimeksiannon rooliin painamalla "Valitsen paikan"')}</li>
+                        <li className="introduction-text">{t('Kirjaudu sisään opiskelijatunnuksellasi. kirjauduttuasi olet vahvistanut paikan itsellesi')}</li>
+                        <li className="introduction-text">{t('Saat vahvistusviestin koulun sähköpostiisi valinnastasi.')}</li>
+                        <li className="introduction-text">{t('Odota, että tiimi täyttyy')}</li>
+                        <li className="introduction-text">{t('Kun tiimi on täynnä, saat siitä ilmoituksen sähköpostiisi.')}</li>
+                    </ol>
+                </div>
+            </section>
+        )
+    }
+}
+export default withNamespaces() ( InstructionsContent);
\ No newline at end of file
diff --git a/src/translations/en/translation.json b/src/translations/en/translation.json
index 33ef725f0be8c77841bb391bb6ad10da104aefe9..549a8d788263ccdf375b39f1f0400d1a99e71024 100644
--- a/src/translations/en/translation.json
+++ b/src/translations/en/translation.json
@@ -5,13 +5,33 @@
     "Ota yhteyttä": "Contact us",
 
     "Mikä on Future Factory?": "What is Future Factory?",
-    "Jamk Future Factory on kansainvälisesti tunnustettu opintojakso, joka kerää vuosittain tuhansia opiskelijoita kehittämään omia projektityöskentelyn taitojaan!": "Englanniksi",
-    "Lue lisää Future Factorysta": "Englanniksi",
-    "Tietoa FF Marketplacesta": "Englanniksi",
-    "FF Marketplace on paikka, jossa opiskelijat voivat helposti selailla yritysten toimeksiantoja ja valita omien kriteeriensä perusteella mielenkiintoisimman projektin.": "Englanniksi",
-    "FF Marketplacen ohjeet": "Englanniksi",
+    "Jamk Future Factory on kansainvälisesti tunnustettu opintojakso, joka kerää vuosittain tuhansia opiskelijoita kehittämään omia projektityöskentelyn taitojaan!": "JAMK Future Factory is internationally recognised course which gets thousands of student annually to develop their own project working skills.",
+    "Lue lisää Future Factorysta": "Read more about Future Factory",
+    "Tietoa FF Marketplacesta": "Information about FF Marketplace",
+    "FF Marketplace on paikka, jossa opiskelijat voivat helposti selailla yritysten toimeksiantoja ja valita omien kriteeriensä perusteella mielenkiintoisimman projektin.": "FF Markeplace is a place where students are able to easily browse assignments given by companies and select the one that interests them the most.",
+    "FF Marketplacen ohjeet": "FF Marketplace instructions",
 
-    "Selaamaan toimeksiantoja": "Englanniksi",
+    "Selaamaan toimeksiantoja": "Browse assignments",
 
-    "Enää muutama paikka jäljellä!": "Englanniksi"
+    "Enää muutama paikka jäljellä!": "Only few places left!",
+
+    "Kuinka palvelua käytetään": "How to use this service",
+    "Siirry selaamaan toimeksiantoja" : "Navigate to Assignments",
+    "Lajittele ja filtteröi toimeksiantoja kiinostuksesi ja osaamisesi mukaan" : "Sort and filter assignments based on your interests and skills",
+    "Näet toimeksiantotuloksia, jotka sopisivat sinulle parhaiten!" : "Page will show the available assignments that fit you the best",
+    "Toimeksiannoista näet seuraavat tiedot" : "Inside the assignments, you can find following information",
+    "Toimeksiannon nimi":"Name of assignment",
+    "Kuvaus": "Description",
+    "Rooleja/Ominaisuuksia, joita haetaan tiimiin":"Roles/Abilities that the team needs",
+    "Kiinnitä itsesi haluamaasi toimeksiannon rooliin painamalla 'Valitsen paikan'":"Reserve a role from a team in the assignment by clicking 'Choose Role'",
+    "Kirjaudu sisään opiskelijatunnuksellasi. kirjauduttuasi olet vahvistanut paikan itsellesi":"Log in using your student number to reserve the role for yourself",
+    "Saat vahvistusviestin koulun sähköpostiisi valinnastasi.": "You can choose to get a confirmation email from your choice",
+    "Odota, että tiimi täyttyy":"Wait for the team to fill up",
+    "Kun tiimi on täynnä, saat siitä ilmoituksen sähköpostiisi.":"When the team is full, you will get an email telling you about it",
+
+    "Lajittelu ja filtteröinti":"Sorting and filtering",
+    "Lajittelu" : "Sorting",
+    "Voit järjestää toimeksianotha valitsemalla 'Järjestä tulokset' -valiksota haluamasi järjestys":"You can sort available assignments by selecting an option from the 'Sort assignments' dropdown menu.",
+    "Filtteröinti":"Filtering",
+    "Voit filtteröidä toimeksiantoja mm.alan ja tiimiroolin mukaan, jolloin saat juuri sinulle sopivia/sinua kiinnostavia toimeksiantoja!":"You can filter assignments, for example by field & role. Doing this, the page will only show the assignments with teams most fitting for you!"
 }
\ No newline at end of file