diff --git a/MyWebsite/MyWebsite/Controllers/HomeController.cs b/MyWebsite/MyWebsite/Controllers/HomeController.cs
index ee883f6..e93e427 100644
--- a/MyWebsite/MyWebsite/Controllers/HomeController.cs
+++ b/MyWebsite/MyWebsite/Controllers/HomeController.cs
@@ -6,6 +6,7 @@ namespace MyWebsite.Controllers
 {
     public class HomeController : Controller
     {
+        // TODO: Add more specific OpenGraph meta tags
         public IActionResult Index() =>
             View();
 
diff --git a/MyWebsite/MyWebsite/Views/Gallery/Details.cshtml b/MyWebsite/MyWebsite/Views/Gallery/Details.cshtml
index c026b79..ed9e509 100644
--- a/MyWebsite/MyWebsite/Views/Gallery/Details.cshtml
+++ b/MyWebsite/MyWebsite/Views/Gallery/Details.cshtml
@@ -12,7 +12,9 @@
 
     <div>
         <h1>@((ViewData["CurrentImage"] as Image).Title)</h1>
-        <p class="date">Creation date: <a>@((ViewData["CurrentImage"] as Image).CreationDate.ToShortDateString())</a></p>
+        <span>Creation date: @((ViewData["CurrentImage"] as Image).CreationDate.ToShortDateString())</span>
         <p>@((ViewData["CurrentImage"] as Image).Description)</p>
     </div>
-</article>
\ No newline at end of file
+</article>
+
+<link rel="stylesheet" type="text/css" href="~/css/Gallery.css" />
\ No newline at end of file
diff --git a/MyWebsite/MyWebsite/Views/Gallery/Index.cshtml b/MyWebsite/MyWebsite/Views/Gallery/Index.cshtml
index 378ee03..c963081 100644
--- a/MyWebsite/MyWebsite/Views/Gallery/Index.cshtml
+++ b/MyWebsite/MyWebsite/Views/Gallery/Index.cshtml
@@ -12,4 +12,6 @@
     {
         <a asp-action="Details" asp-route-id="@image.FileName"><img title="@image.Title" src="~/images/Gallery/@image.FileName"/></a>
     }
-</article>
\ No newline at end of file
+</article>
+
+<link rel="stylesheet" type="text/css" href="~/css/Gallery.css" />
\ No newline at end of file
diff --git a/MyWebsite/MyWebsite/Views/Shared/Index.cshtml b/MyWebsite/MyWebsite/Views/Shared/Index.cshtml
index adc4a24..f37e105 100644
--- a/MyWebsite/MyWebsite/Views/Shared/Index.cshtml
+++ b/MyWebsite/MyWebsite/Views/Shared/Index.cshtml
@@ -1,10 +1,47 @@
 
 @{
-    ViewData["Title"] = "About me";
+    ViewData["Title"] = "Hello, World!";
 }
 
 <article>
-    
+    <div class="block intro">
+		<div class="content">
+			<p style="font-family: 'Press Start 2P'">Hello, World!</p>
+			<p>My name is Michael<br/>
+			and I'm a C# developer.</p>
+		</div>
+		<img class="background" src="~/images/cvbg.png"/>
+	</div>
+	<!--<div class="block">
+		<div class="content">
+			<p>I was born in Russian town Lispetsk in 00's. At the age of 14 I discovered the magic of programming</p>
+		</div>
+	</div>-->
+	<div class="block sut">
+		<div class="content">
+            <p>Now I'm studying at The Bonch-Bruevich Saint-Petersburg State University of Telecommunications on Infocommunication Systems bachelor's degree</p>
+		</div>
+		<img class="background" src="~/images/sut.jpg"/>
+	</div>
+	<!--<div class="block">
+		<div class="content">
+			<p>I was born in Russian town Lispetsk in 00's. At the age of 14 I discovered the magic of programming</p>
+		</div>
+	</div>-->
+	<!--<div class="goto">
+        <div class="keyword">goto </div>
+        <div class="currentItem">Introduction;</div>
+		<div class="list">
+            <a href="#intro">Introduction</a>;<br/>
+            <a href="#about">About_me</a>;<br/>
+            <a href="#skills">My_skills</a>;<br/>
+            <a href="#portfolio">My_projects</a>;<br/>
+            <a href="#contact">Contact_me</a>;<br/>
+		</div>
+	</div>-->
 </article>
 
+<link rel="stylesheet" type="text/css" href="~/css/AboutMe.css" />
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap&subset=cyrillic">
+
 <partial name="~/Views/Shared/ContactsBlock.cshtml"/>
\ No newline at end of file
diff --git a/MyWebsite/MyWebsite/Views/Shared/_Layout.cshtml b/MyWebsite/MyWebsite/Views/Shared/_Layout.cshtml
index 396c4d9..d077e46 100644
--- a/MyWebsite/MyWebsite/Views/Shared/_Layout.cshtml
+++ b/MyWebsite/MyWebsite/Views/Shared/_Layout.cshtml
@@ -25,7 +25,8 @@
 </head>
     <body onload="UpdateProjects()">
         <nav class="navbar">
-            <a id="header" asp-controller="Home" asp-action="Index">XFox111.NET</a>
+            <a asp-controller="Home" asp-action="Index">XFox111.NET</a>
+
             <menu type="toolbar" class="main-menu">
                 <li><a asp-controller="About" asp-action="Index">AboutMe();</a></li>
                 <li><a asp-controller="CV" asp-action="Index">CV();</a></li>
@@ -33,10 +34,17 @@
                 <li><a asp-controller="Gallery" asp-action="Index">Arts();</a></li>
                 <li><a asp-controller="Contacts" asp-action="Index">Contacts();</a></li>
             </menu>
-            <div class="sideheader">
-                <button style="display:none;" type="button" class="navbar-toggle">Menu</button>
-                <a asp-controller="Home" asp-action="SwitchLanguage" lang="ru">РУС &#xE12B;</a>
-            </div>
+
+            <a asp-controller="Home" asp-action="SwitchLanguage" lang="ru">РУС &#xE12B;</a>
+            <a style="cursor: pointer; display:none;" class="menu-toggle" onclick="ToggleMenu();">&#xE700;</a>
+
+            <menu type="toolbar" id="compact-menu" style="display:none">
+                <li><a asp-controller="About" asp-action="Index">AboutMe();</a></li>
+                <li><a asp-controller="CV" asp-action="Index">CV();</a></li>
+                <li><a asp-controller="Projects" asp-action="Index">Projects();</a></li>
+                <li><a asp-controller="Gallery" asp-action="Index">Arts();</a></li>
+                <li><a asp-controller="Contacts" asp-action="Index">Contacts();</a></li>
+            </menu>
         </nav>
 
         <main>
@@ -44,7 +52,7 @@
         </main>
 
         <footer>
-            <p class="comment">// Copyright &copy;2019 <b>Michael "XFox" Gordeev</b></p>
+            <span class="comment">// Copyright &copy;2019 <b>Michael "XFox" Gordeev</b></span>
 
             <a class="socicon-mailru" href="mailto:michael.xfox@outlook.com" target="_blank" title="Mailbox"></a>
             <a class="socicon-linkedin" href="https://linkedin.com/in/xfox" target="_blank" title="LinkedIn"></a>
diff --git a/MyWebsite/MyWebsite/wwwroot/Gallery.json b/MyWebsite/MyWebsite/wwwroot/Gallery.json
index d4ed8c5..6aedea3 100644
--- a/MyWebsite/MyWebsite/wwwroot/Gallery.json
+++ b/MyWebsite/MyWebsite/wwwroot/Gallery.json
@@ -1,9 +1,9 @@
 [
   {
-    "FileName": "FirstAvatar.png",
-    "Title": "First avatar I ever made",
+    "FileName": "cvbg.png",
+    "Title": "About me background image",
     "CreationDate": "2016-07-31T00:00:00",
-    "Description": ""
+    "Description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In viverra velit tellus, in lacinia elit venenatis sed. Nullam eget enim condimentum, aliquet orci eget, pretium risus. Ut convallis auctor magna non pharetra. Sed et lacus metus. Ut lobortis et velit id tempor. Fusce suscipit at justo in volutpat. Donec facilisis sollicitudin ligula, vitae volutpat ligula rhoncus sit amet. In viverra elit sodales bibendum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
   },
   {
     "FileName": "VectorAvatar.svg",
diff --git a/MyWebsite/MyWebsite/wwwroot/css/AboutMe.css b/MyWebsite/MyWebsite/wwwroot/css/AboutMe.css
new file mode 100644
index 0000000..5aae167
--- /dev/null
+++ b/MyWebsite/MyWebsite/wwwroot/css/AboutMe.css
@@ -0,0 +1,46 @@
+article {
+    margin: 0px;
+}
+
+.block {
+    position: relative;
+}
+.block .content {
+    position: absolute;
+}
+.block .background {
+    width: 100%;
+}
+
+/*.goto {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    background-color: #1e1e1e;
+    border-radius: 5px;
+    padding: 5px;
+    color: white;
+}*/
+
+
+.intro {
+    color: white;
+    background-color: #00a7dc;
+    font-size: 36px;
+    text-shadow: 2px 2px 1px black;
+}
+.intro .content {
+    bottom: 50px;
+    left: 50px;
+    max-width: 65%;
+}
+
+.sut {
+    color: white;
+    background-color: #ff8000;
+    font-size: 24px;
+    text-shadow: 2px 2px 1px black;
+}
+.sut .content {
+    margin: 50px 50px;
+}
\ No newline at end of file
diff --git a/MyWebsite/MyWebsite/wwwroot/css/Gallery.css b/MyWebsite/MyWebsite/wwwroot/css/Gallery.css
new file mode 100644
index 0000000..b912b44
--- /dev/null
+++ b/MyWebsite/MyWebsite/wwwroot/css/Gallery.css
@@ -0,0 +1,23 @@
+.gallery img {
+    object-fit: cover;
+    max-height: 200px;
+    max-width: 100%;
+    margin: 2px;
+    transition: .25s;
+}
+.gallery img:hover {
+    filter: brightness(125%);
+    transform: scale(1.25);
+}
+
+.image-overview-block img {
+    max-height: 50vh;
+    max-width: 100%;
+    float: left;
+}
+.image-overview-block div {
+    display: inline-block;
+}
+.image-overview-block h1 {
+    margin-bottom: 0px;
+}
\ No newline at end of file
diff --git a/MyWebsite/MyWebsite/wwwroot/css/Style.css b/MyWebsite/MyWebsite/wwwroot/css/Style.css
index 0ce0345..8f51b29 100644
--- a/MyWebsite/MyWebsite/wwwroot/css/Style.css
+++ b/MyWebsite/MyWebsite/wwwroot/css/Style.css
@@ -16,20 +16,16 @@
     src: url("/fonts/segoeUI.eot?#iefix") format("embedded-opentype"), url("/fonts/segoeUI.otf") format("opentype"), url("/fonts/segoeUI.svg") format("svg"), url("/fonts/segoeUI.ttf") format("truetype"), url("/fonts/segoeUI.woff") format("woff"), url("/fonts/segoeUI.woff2") format("woff2");
 }
 
-body {
-    margin: 0px;
-    font-family: Consolas, 'Segoe MDL2 Assets';
-}
-
+/*Header styles*/
 .navbar {
+    display: grid;
+    grid-template-columns: auto 1fr auto auto;
+    grid-column-gap: 10px;
+    grid-template-rows: auto auto;
     background-color: #343434;
     position: sticky;
     z-index: 10;
-    top: 0%;
-    right: 0%;
-    left: 0%;
     padding: 10px;
-    min-height: 35px;
     font-size: 26px;
 }
 
@@ -37,44 +33,57 @@ body {
     text-decoration: none;
     color: white;
 }
-.navbar a:hover {
-    color: gray;
-}
-
-footer a {
-    text-decoration: none;
-    color: black;
-}
-footer a:hover {
-    color: orangered;
-}
-
-.main-menu {
-    display: inline;
-    list-style: none;
+.navbar a:hover { 
+    color: gray; 
 }
 
+.main-menu { margin: 0px; }
 .main-menu li {
     display: inline-block;
     font-size: 20px;
     margin-right: 20px;
 }
 
-.sideheader {
-    float: right;
+#compact-menu {
+    grid-row: 2/2;
+    list-style: none;
+}
+#compact-menu li {
+    font-size: 20px;
+    margin-top: 10px;
 }
 
+/*Footer styles*/
 footer {
-    padding: 0px 10px;
+    padding: 10px;
     display: grid;
     align-items: center;
     grid-template-columns: 1fr auto auto auto;
     grid-column-gap: 10px;
 }
-footer svg { width: 1.4em; }
+footer a {
+    text-decoration: none;
+    color: black;
+}
+footer a:hover { 
+    color: orangered;
+}
 
+/*Body styles*/
+body {
+    margin: 0px;
+    font-family: Consolas, 'Segoe MDL2 Assets';
+}
 main {
-    min-height: calc(100vh - 130px);
+    min-height: calc(100vh - 115px);    /*Page height minus footer requred space*/
+}
+
+header a {
+    text-decoration: none;
+    color: black;
+}
+header a:hover {
+    text-decoration: underline;
 }
 
 article, header {
@@ -85,43 +94,6 @@ article a:visited, article a:link {
     color: blue;
 }
 
-header a {
-    text-decoration: none;
-    color: black;
-}
-header a:hover {
-    color: black;
-    text-decoration: underline;
-}
-
-.image-overview-block img {
-    max-height: 50vh;
-    float: left;
-    display: inline;
-}
-.image-overview-block div {
-    margin: 10px;
-    display: inline-block;
-}
-.image-overview-block div h1 {
-    margin-bottom: 0px;
-}
-.image-overview-block .date {
-    margin: 0px;
-}
-
-.gallery img {
-    transition: .25s;
-    object-fit: cover;
-    max-width: 300px;
-    height: 200px;
-    margin: 2px;
-}
-.gallery img:hover {
-    filter: brightness(125%);
-    transform: scale(1.25);
-}
-
 .comment, .comment:visited {
     color: #57a64a;
 }
\ No newline at end of file
diff --git a/MyWebsite/MyWebsite/wwwroot/images/Gallery/cvbg.png b/MyWebsite/MyWebsite/wwwroot/images/Gallery/cvbg.png
new file mode 100644
index 0000000..f63d5e2
Binary files /dev/null and b/MyWebsite/MyWebsite/wwwroot/images/Gallery/cvbg.png differ
diff --git a/MyWebsite/MyWebsite/wwwroot/js/site.js b/MyWebsite/MyWebsite/wwwroot/js/site.js
index 9b91891..3fa586b 100644
--- a/MyWebsite/MyWebsite/wwwroot/js/site.js
+++ b/MyWebsite/MyWebsite/wwwroot/js/site.js
@@ -1,11 +1,21 @@
-function ToggleImageSize()
+function ToggleMenu()
+{
+    var menu = document.getElementById("compact-menu");
+
+    if (menu.style.display == "none")
+        menu.style.display = "initial";
+    else
+        menu.style.display = "none";
+}
+
+function ToggleImageSize()
 {
     var image = document.getElementById("image");
 
     if (image.style.maxHeight == "none")
     {
         image.style.maxHeight = "50vh";
-        image.style.maxWidth = "initial";
+        image.style.maxWidth = "100%";
     }
     else
     {