diff --git a/src/components/Nav.svelte b/src/components/Nav.svelte
index 54a72dc..6e72597 100644
--- a/src/components/Nav.svelte
+++ b/src/components/Nav.svelte
@@ -50,20 +50,15 @@
   nav {
     position: sticky;
     top: 0;
-    background: rgb(31, 22, 94);
+    background: #f2f6f6;
     z-index: 1;
     padding: 0.5em;
-    box-shadow: 0px 2px 4px #090808;
+    box-shadow: 0px 1px 3px #959595;
   }
 
   nav a {
     padding: 0.4em 0.5em;
-    text-decoration: none;
-  }
-
-  nav a:hover {
-    text-decoration: underline
-  }
+	}
 </style>
 
 <nav>
diff --git a/src/components/portfolio/project.svelte b/src/components/portfolio/project.svelte
index aa285c4..73b7bf5 100644
--- a/src/components/portfolio/project.svelte
+++ b/src/components/portfolio/project.svelte
@@ -2,16 +2,22 @@
   export let project
 </script>
 
+<style>
+  .project-image {
+    float: right;
+    width: 25%;
+  }
+
+</style>
+
 <article class="project">
   <h3>{project.name}</h3>
   <section class="description">
+    {#if project.image}
+        <img src="{project.image.source}" class="project-image" alt="{project.image.image_description}" />
+    {/if}
     {@html project.description}
   </section>
-  {#if project.image}
-    <aside>
-      <img src="{project.image}" class="project-image" alt="{project.image.description}" />
-    </aside>
-  {/if}
   <aside>
   </aside>
 </article>
diff --git a/src/components/portfolio/projects.svelte b/src/components/portfolio/projects.svelte
deleted file mode 100644
index dbf1c56..0000000
--- a/src/components/portfolio/projects.svelte
+++ /dev/null
@@ -1,99 +0,0 @@
-<section class="projects">
-  <h3>Projects</h3>
-
-  <article class="project">
-    <h5>Signal Hub Manager</h5>
-    <p><em>Signal Hub</em> is an end-to-end <strong>Big Data analytics platform</strong> for large enterprises. It accelerates the process of extracting insights and intelligence from large volumes of data, including data of different types and in different formats.</p>
-    <p>I worked on <em>Signal Hub</em> as a front-end developer. Working on the part of the platform called <em>Workbench</em>. <em>Workbench</em> is an <strong>IDE for data analyst</strong>.
-        It allows to create and tweak various models and transformations which are then deployed to other parts of the platform. Users are able to create workflows and see the results of his work with pleasant visuals.
-    </p>
-    <p>This project is built with modern web technologies including: <strong>AngularJS</strong>, <strong>React</strong>, <strong>D3</strong>, <strong>Highcharts</strong>, <strong>Jest</strong>, <strong>Webpack</strong>.</p>
-    <p>I was part of a large distributed team of ~20 developers &amp; ~6 testers which were working on the whole platform.</p>
-  </article>
-
-  <article class="project">
-    <h5>SHIP (Structured heard input process)</h5>
-    <p><em>SHIP</em> is a web application for <strong>editors</strong> who actively <strong>track trades offers and bids</strong> on the commodity market.</p>
-    <p>It was built for a price reporting company <em>S&P Global Platts</em>. This company is a provider of energy and commodities information and a source of benchmark price assessments in the <em>physical energy markets</em>.</p>
-    <p><em>SHIP</em> was suited for a very easy and quick workflow for editors.</p>
-    <p>Team consisted of 3 front-end and 3 back-end developers. I was a <strong>leader of the front-end</strong> part of the project.</p>
-    <p>The application was built with <strong>AngularJS and Redux</strong>. The challenging part was working with <strong>Cassandra database</strong>.</p>
-  </article>
-
-  <article class="project">
-    <h5>FX Salestrader (<a href="http://www.caplin.com/business/fx-sales" target="_blank">www.caplin.com/business/fx-sales.com</a>)</h5>
-    <p>The main function of <em>Caplin FX Sales</em> is to allow sales users to <string>trade on behalf of their clients</string>. This needs to be an efficient workflow providing all the relevant information to the sales user.</p>
-
-    <p>Main technologies used: <strong>Websockets</strong>, Custom Front-end JavaScript MVVM Framework (Knockout, BRJS)</p>
-    <p>We worked on this project in a team of 6 developers and 3 testers</p>
-  </article>
-
-  <article class="project">
-    <h5>Skosy</h5>
-    <p><em>Skosy</em> is a web application which purpose is to <strong>automate writing of integration tests</strong> for web sites.</p>
-    <p>I worked on a <em>proof of concept</em> front-end portion of this application, which was able to create a list of steps for testing.</p>
-    <p>I worked on this project in a team of 2 front-end developers.</p>
-  </article>
-
-  <article class="project">
-    <h5>Livesport.tv <a href="http://www.livesport.tv" target="_blank">(www.livesport.tv)</a></h5>
-    <p><em>Livesport.tv</em> is a network of premium online sports channels, featuring all the top sports competitions from around the world.</p>
-    <p>I worked on this project as a front-end developer. I maintained all livesport channels and I worked on new features and enhancements of websites.</p>
-    <p>Project was built on top of <strong>Freemarker</strong> templating language.</p>
-    <p>The team consisted of 2 developers and 1 tester.</p>
-  </article>
-
-  <article class="project">
-    <h5>beIN SPORTS France &amp; beIN SPORTS USA</h5>
-    <p><em>beIN Sports</em> is a global network of sports channels jointly owned and operated by <em>Qatari Sports Investments</em>, an affiliate of <em>Al Jazeera Media Networks</em></p>
-    <p>I worked on this project as a front-end developer. I maintained official websites of beIN SPORTS France and USA (<a href="http://www.beinsports.fr" target="_blank">www.beinsports.fr</a>, <a href="http://www.beinsports.tv" target="_blank">www.beinsports.tv</a>).</p>
-    <p>Project was built on top of <strong>Freemarker</strong> templating language.</p>
-    <p>I worked on this project in a team consisting of 7 members.</p>
-  </article>
-  
-  <!-- <div class="project">
-    <h5>Norsk Toppfotball</h5>
-    <p>I worked on this project as a front-end developer. I maintained official websites of all Norweigian Football teams - NTF Network (<a href="http://www.toppfotball.no" target="_blank">www.toppfotball.no</a>)<br>
-    <p>Project was built on top of <strong>Freemarker</strong> templating language.</p>
-    <p>I worked on this project in a team consisting of 4 members.</p>
-  </div> -->
-
-  <article class="project">
-    <h5>Košice Peace Marathon (<a href="http://www.kosicemarathon.com/" target="_blank">www.kosicemarathon.com</a>)</h5>
-    <p><em>Košice Peace Marathon</em> is the oldest marathon in Europe and the third-oldest in the world.</p>
-    <p>
-      I worked on this project as a front-end and an back-end developer. I've built a <strong>custom CMS</strong>for website and for registration of participants. Also created an application for actual event for signing participants.
-      <br>
-      The application was able to create a start list of all participants and provide various statistics about them.
-    </p>  
-    <p>I've built this project alone and then one maintainer joined me.</p>
-  </article>
-
-  <article class="project">
-    <h5>CK Vive (<a href="http://www.ckvive.sk" target="_blank">www.ckvive.sk</a>)</h5>
-    <p><em>CK Vive</em> is a travel agency.</p>
-    <p>
-      I worked on this project as a front-end and an back-end developer. I've created new <strong>custom CMS</strong> for adding destinations and apartmans into offering.<br>
-    <p>I've built this project on top of <strong>PHP</strong>, <strong>MySQL</strong> and <strong>JavaScript</strong>.</p>
-    <p>I worked on this project alone.</p>
-  </article>
-
-  <section class="small-projects">
-    <h4>Smaller projects</h4>
-    <p class="small-description">
-      I'd built these projects while I was in high-school working externally for eSOLUTIONS s.r.o
-    </p>
-    <article class="smaller-project">
-      <p>VZT MONT s.r.o. (<a href="http://www.vztmont.sk" target="_blank">www.vztmont.sk</a>)</p>
-      <p>I've created a presentation website for company dealing with air-conditioning</p>
-    </article>
-    <article class="smaller-project">
-      <p>TK Projekt s.r.o.(<a href="http://www.tkprojekt.sk" target="_blank">www.tkprojekt.sk</a>)</p>
-      <p>I've created a presentation website from template for company dealing with air-conditioning</p>
-    </article>
-    <article class="smaller-project">
-      <p>Tatra Audit s.r.o.(<a href="http://www.tatraauditke.sk" target="_blank">www.tatraauditke.sk</a>)</p>
-      <p>I've created a presentation website from template for auditing company</p>
-    </article>
-  </section>
-</section>
\ No newline at end of file
diff --git a/src/routes/_layout.svelte b/src/routes/_layout.svelte
index cc71b21..899e069 100644
--- a/src/routes/_layout.svelte
+++ b/src/routes/_layout.svelte
@@ -6,23 +6,17 @@
 
 <style>
   .app-content {
-		background: linear-gradient(176deg, rgb(31, 22, 94) 0%,rgb(67, 117, 236) 100%);
-    background-attachment: fixed;
-		color:#f2f0f0;
+		background: #f2f6f6;
   }
 
 	main {
 		position: relative;
-		max-width: 56em;
+		max-width: 700px;
 		padding: 2em;
 		margin: 0 auto;
 		box-sizing: border-box;
 	}
 
-  :global(::selection) {
-    background: #0dd0d0;
-  }
-
 </style>
 
 <div class="app-content">
diff --git a/src/routes/portfolio/index.svelte b/src/routes/portfolio/index.svelte
index b09725b..9775421 100644
--- a/src/routes/portfolio/index.svelte
+++ b/src/routes/portfolio/index.svelte
@@ -23,6 +23,28 @@
     margin-top: -3em;
     visibility: hidden;
   }
+
+  section[id] {
+    margin-top: 2em;
+  }
+
+  h1 {
+    text-shadow: 2px 2px 1px #c8c4b7;
+  }
+
+  #personal-information :global(h3), #personal-information :global(h2) {
+    margin: 1em 0 0.5em;
+  }
+
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  li {
+    margin: 1.5em 0;
+  }
 </style>
 
 <svelte:head>
diff --git a/src/template.html b/src/template.html
index bfeebc9..293638a 100644
--- a/src/template.html
+++ b/src/template.html
@@ -8,6 +8,9 @@
 	%sapper.base%
 
 	<link rel='stylesheet' href='global.css'>
+	<link rel="stylesheet" href="print.css" media="print">
+	<link rel="stylesheet" href="fonts.css">
+	<!-- <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,600i&display=swap&subset=latin-ext" rel="stylesheet">  -->
 	<link rel='manifest' href='manifest.json'>
 	<link rel='icon' type='image/png' href='favicon.png'>
 
diff --git a/static/fonts.css b/static/fonts.css
new file mode 100644
index 0000000..3e69896
--- /dev/null
+++ b/static/fonts.css
@@ -0,0 +1,13 @@
+@font-face {
+  font-family: Cantarell;
+  src: local("Cantarell"), url(/fonts/cantarell/Cantarell-Regular.otf) format('opentype');
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Cantarell;
+  src: local("Cantarell"), url(/fonts/cantarell/Cantarell-Thin.otf) format('opentype');
+  font-weight: 200;
+  font-display: swap;
+}
+
diff --git a/static/fonts/cantarell/Cantarell-Bold.otf b/static/fonts/cantarell/Cantarell-Bold.otf
new file mode 100644
index 0000000..1a5954b
Binary files /dev/null and b/static/fonts/cantarell/Cantarell-Bold.otf differ
diff --git a/static/fonts/cantarell/Cantarell-ExtraBold.otf b/static/fonts/cantarell/Cantarell-ExtraBold.otf
new file mode 100644
index 0000000..e7b5213
Binary files /dev/null and b/static/fonts/cantarell/Cantarell-ExtraBold.otf differ
diff --git a/static/fonts/cantarell/Cantarell-Light.otf b/static/fonts/cantarell/Cantarell-Light.otf
new file mode 100644
index 0000000..5f0fa78
Binary files /dev/null and b/static/fonts/cantarell/Cantarell-Light.otf differ
diff --git a/static/fonts/cantarell/Cantarell-Regular.otf b/static/fonts/cantarell/Cantarell-Regular.otf
new file mode 100644
index 0000000..d92de43
Binary files /dev/null and b/static/fonts/cantarell/Cantarell-Regular.otf differ
diff --git a/static/fonts/cantarell/Cantarell-Thin.otf b/static/fonts/cantarell/Cantarell-Thin.otf
new file mode 100644
index 0000000..fe58785
Binary files /dev/null and b/static/fonts/cantarell/Cantarell-Thin.otf differ
diff --git a/static/global.css b/static/global.css
index 283cd77..c6c6fdb 100644
--- a/static/global.css
+++ b/static/global.css
@@ -4,26 +4,53 @@ html {
 
 body {
 	margin: 0;
-	font-family: Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-	font-size: 14px;
+	font-family: Cantarell, Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+	font-size: 16px;
 	line-height: 1.5;
-	color: #333;
+	color: #42436a;	
 }
 
 h1, h2, h3, h4, h5, h6 {
 	margin: 0 0 0.5em 0;
-	font-weight: 400;
+	font-weight: 200;
 	line-height: 1.2;
+	text-shadow: 1px 1px 1px #c6c4b7;
+	color: #212138;
+	letter-spacing: -0.01em;
 }
 
 h1 {
-	font-size: 2em;
+	font-size: 2.5em;
+}
+
+h2 {
+	font-size: 1.7em;
+}
+
+h3 {
+	font-size: 1.5em;
+}
+
+h4 {
+	font-size: 1.3em;
 }
 
 a {
-	color: inherit;
+	color: #2e2ed9;
+	text-decoration: none;
+	transition: 0.2s;
 }
 
+a:visited {
+	color: #9a2ed9;
+}
+
+a:hover {
+	color: #2e86d9;
+	text-decoration: underline;
+}
+
+
 code {
 	font-family: menlo, inconsolata, monospace;
 	font-size: calc(1em - 2px);
@@ -33,8 +60,23 @@ code {
 	border-radius: 2px;
 }
 
-@media (min-width: 400px) {
+p {
+	margin: 0;
+}
+
+
+::selection {
+	background: #0dd0d0;
+}
+
+@media only screen and (min-width: 400px) {
 	body {
-		font-size: 16px;
+		font-size: 18px;
 	}
-}
\ No newline at end of file
+}
+
+@media only screen and (min-width: 700px) {
+	body {
+		font-size: 24px;
+	}
+}
diff --git a/static/print.css b/static/print.css
new file mode 100644
index 0000000..2a3e6cc
--- /dev/null
+++ b/static/print.css
@@ -0,0 +1,7 @@
+body {
+  font-size: 12px;
+}
+
+.app-content nav {
+  display: none;
+}
\ No newline at end of file