diff --git a/assets/css/dark.css b/assets/css/dark.css
deleted file mode 100755
index 01879fa..0000000
--- a/assets/css/dark.css
+++ /dev/null
@@ -1,49 +0,0 @@
-/* Dark mode */
-@media (prefers-color-scheme:dark) {
-  body {
-    background-color: #2d383e;
-  }
-
-  h1, h2, h3 {
-    color: white;
-  }
-
-  header {
-    background-color: #182329;
-  }
-
-  main {
-    color: white;
-  }
-
-  .menu {
-    color: white;
-  }
-
-  a {
-    color: #CC99FF;
-  }
-
-  a:hover {
-    color: white;
-    text-decoration: underline;
-  }
-
-  .content {
-    background-color: #182329;
-  }
-
-  main p {
-    color: #C8C8C8;
-  }
-
-  section {
-    background-color: #182329;
-  }
-
-  footer {
-    background-color: #182329;
-    color: #C8C8C8;
-  }
-
-}
diff --git a/assets/css/light.css b/assets/css/light.css
deleted file mode 100755
index c1d5682..0000000
--- a/assets/css/light.css
+++ /dev/null
@@ -1,67 +0,0 @@
-/* Light mode */
-@media (prefers-color-scheme:light) {
-  body {
-    background-color: #AAAAAA;
-    color: black;
-  }
-
-  h1, h2, h3 {
-    color: black;
-  }
-
-  header {
-    background-color: white;
-  }
-
-  main {
-    color: black;
-  }
-
-  .menu {
-    color: black;
-  }
-
-  .menu * {
-    color: black;
-  }
-
-  li a {
-    color: black;
-  }
-
-  li a:hover {
-    color: #CC99FF;
-    text-decoration: underline;
-  }
-
-  li a:visited {
-
-    /*color: blue;*/
-  }
-
-  .content {
-    background-color: white;
-  }
-
-  main p {
-    color: black;
-  }
-
-  main a, footer a {
-    color: black;
-  }
-
-  main a:hover, footer a:hover {
-    color: black;
-  }
-
-  section {
-    background-color: white;
-  }
-
-  footer {
-    background-color: white;
-    color: black;
-  }
-
-}
diff --git a/assets/css/normalize.css b/assets/css/normalize.css
deleted file mode 100644
index 192eb9c..0000000
--- a/assets/css/normalize.css
+++ /dev/null
@@ -1,349 +0,0 @@
-/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
-
-/* Document
-   ========================================================================== */
-
-/**
- * 1. Correct the line height in all browsers.
- * 2. Prevent adjustments of font size after orientation changes in iOS.
- */
-
-html {
-  line-height: 1.15; /* 1 */
-  -webkit-text-size-adjust: 100%; /* 2 */
-}
-
-/* Sections
-   ========================================================================== */
-
-/**
- * Remove the margin in all browsers.
- */
-
-body {
-  margin: 0;
-}
-
-/**
- * Render the `main` element consistently in IE.
- */
-
-main {
-  display: block;
-}
-
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
-/* Grouping content
-   ========================================================================== */
-
-/**
- * 1. Add the correct box sizing in Firefox.
- * 2. Show the overflow in Edge and IE.
- */
-
-hr {
-  box-sizing: content-box; /* 1 */
-  height: 0; /* 1 */
-  overflow: visible; /* 2 */
-}
-
-/**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-
-pre {
-  font-family: monospace, monospace; /* 1 */
-  font-size: 1em; /* 2 */
-}
-
-/* Text-level semantics
-   ========================================================================== */
-
-/**
- * Remove the gray background on active links in IE 10.
- */
-
-a {
-  background-color: transparent;
-}
-
-/**
- * 1. Remove the bottom border in Chrome 57-
- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
- */
-
-abbr[title] {
-  border-bottom: none; /* 1 */
-  text-decoration: underline; /* 2 */
-  text-decoration: underline dotted; /* 2 */
-}
-
-/**
- * Add the correct font weight in Chrome, Edge, and Safari.
- */
-
-b,
-strong {
-  font-weight: bolder;
-}
-
-/**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-
-code,
-kbd,
-samp {
-  font-family: monospace, monospace; /* 1 */
-  font-size: 1em; /* 2 */
-}
-
-/**
- * Add the correct font size in all browsers.
- */
-
-small {
-  font-size: 80%;
-}
-
-/**
- * Prevent `sub` and `sup` elements from affecting the line height in
- * all browsers.
- */
-
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-sup {
-  top: -0.5em;
-}
-
-/* Embedded content
-   ========================================================================== */
-
-/**
- * Remove the border on images inside links in IE 10.
- */
-
-img {
-  border-style: none;
-}
-
-/* Forms
-   ========================================================================== */
-
-/**
- * 1. Change the font styles in all browsers.
- * 2. Remove the margin in Firefox and Safari.
- */
-
-button,
-input,
-optgroup,
-select,
-textarea {
-  font-family: inherit; /* 1 */
-  font-size: 100%; /* 1 */
-  line-height: 1.15; /* 1 */
-  margin: 0; /* 2 */
-}
-
-/**
- * Show the overflow in IE.
- * 1. Show the overflow in Edge.
- */
-
-button,
-input { /* 1 */
-  overflow: visible;
-}
-
-/**
- * Remove the inheritance of text transform in Edge, Firefox, and IE.
- * 1. Remove the inheritance of text transform in Firefox.
- */
-
-button,
-select { /* 1 */
-  text-transform: none;
-}
-
-/**
- * Correct the inability to style clickable types in iOS and Safari.
- */
-
-button,
-[type="button"],
-[type="reset"],
-[type="submit"] {
-  -webkit-appearance: button;
-}
-
-/**
- * Remove the inner border and padding in Firefox.
- */
-
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-/**
- * Restore the focus styles unset by the previous rule.
- */
-
-button:-moz-focusring,
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
-
-/**
- * Correct the padding in Firefox.
- */
-
-fieldset {
-  padding: 0.35em 0.75em 0.625em;
-}
-
-/**
- * 1. Correct the text wrapping in Edge and IE.
- * 2. Correct the color inheritance from `fieldset` elements in IE.
- * 3. Remove the padding so developers are not caught out when they zero out
- *    `fieldset` elements in all browsers.
- */
-
-legend {
-  box-sizing: border-box; /* 1 */
-  color: inherit; /* 2 */
-  display: table; /* 1 */
-  max-width: 100%; /* 1 */
-  padding: 0; /* 3 */
-  white-space: normal; /* 1 */
-}
-
-/**
- * Add the correct vertical alignment in Chrome, Firefox, and Opera.
- */
-
-progress {
-  vertical-align: baseline;
-}
-
-/**
- * Remove the default vertical scrollbar in IE 10+.
- */
-
-textarea {
-  overflow: auto;
-}
-
-/**
- * 1. Add the correct box sizing in IE 10.
- * 2. Remove the padding in IE 10.
- */
-
-[type="checkbox"],
-[type="radio"] {
-  box-sizing: border-box; /* 1 */
-  padding: 0; /* 2 */
-}
-
-/**
- * Correct the cursor style of increment and decrement buttons in Chrome.
- */
-
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
-  height: auto;
-}
-
-/**
- * 1. Correct the odd appearance in Chrome and Safari.
- * 2. Correct the outline style in Safari.
- */
-
-[type="search"] {
-  -webkit-appearance: textfield; /* 1 */
-  outline-offset: -2px; /* 2 */
-}
-
-/**
- * Remove the inner padding in Chrome and Safari on macOS.
- */
-
-[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-/**
- * 1. Correct the inability to style clickable types in iOS and Safari.
- * 2. Change font properties to `inherit` in Safari.
- */
-
-::-webkit-file-upload-button {
-  -webkit-appearance: button; /* 1 */
-  font: inherit; /* 2 */
-}
-
-/* Interactive
-   ========================================================================== */
-
-/*
- * Add the correct display in Edge, IE 10+, and Firefox.
- */
-
-details {
-  display: block;
-}
-
-/*
- * Add the correct display in all browsers.
- */
-
-summary {
-  display: list-item;
-}
-
-/* Misc
-   ========================================================================== */
-
-/**
- * Add the correct display in IE 10+.
- */
-
-template {
-  display: none;
-}
-
-/**
- * Add the correct display in IE 10.
- */
-
-[hidden] {
-  display: none;
-}
diff --git a/assets/css/stylesheet.css b/assets/css/stylesheet.css
index ce1fe91..660bdc0 100755
--- a/assets/css/stylesheet.css
+++ b/assets/css/stylesheet.css
@@ -1,68 +1,32 @@
-/* Quartznet main stylesheet */
-
-/*
-* Base rules
-*/
-
-html {
-  box-sizing: border-box;
-}
-
-*, *:before, *:after {
-  box-sizing: inherit;
-}
-
 body {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Segoe UI Symbol", "Segoe UI Emoji", "Apple Color Emoji", Roboto, Helvetica, Arial, sans-serif;
-  font-size: 18px;
+  font-family: 'Open Sans', sans-serif;
   font-display: swap;
+  font-size: 1rem;
   line-height: 1.8;
 }
 
-h1, h2, h3, h4, h5, h6 {
-  font-weight: bold;
-  line-height: 1.2;
-  padding: 0;
-}
-
-p {
-  margin: 15px 0;
-}
-
-/*
-https://stackoverflow.com/questions/36229356/whats-the-equivalent-of-the-container-bootstrap-class-in-purecss-io
-bootstrap container code
-*/
-.container {
-  padding-right: 15px;
-  padding-left: 15px;
-  margin-right: auto;
-  margin-left: auto;
-  /* max-width: 80%; */
-}
-
-img {
-  max-width: 100%;
-}
-
-
-/*
-* Layout starts here!
-*/
-
-header {
-  min-height: 50px;
-  /* text-align: center; */
-  border-bottom: 5px solid gray;
+.overlay {
+  display: flex;
+  background-image: url("/quartznet/assets/images/bluenebula2.png");
+  background-size: cover;
+  background-position: center;
+  min-height: 200px;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
 }
 
 .title {
-  font-size: 3em;
-  text-decoration: none;
-  margin: 0;
-  padding: 0;
   display: inline-block;
-  line-height: 80px;
+  font-size: 3rem;
+  text-decoration: none;
+}
+
+nav {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
 }
 
 /* flexbox navbar test*/
@@ -73,8 +37,9 @@ nav ul {
 }
 
 nav ul li {
-  font-size: 1.2em;
+  font-size: 1rem;
   text-align: center;
+  padding: 5px;
 }
 
 nav li {
@@ -87,122 +52,67 @@ nav li a {
   text-decoration: none;
 }
 
-nav li a:hover {
-  text-decoration: underline;
-}
-
-/* Contains all content */
 main {
-  padding-top: 20px;
-  /*Extra space to push footer to the bottom when there is not much content*/
-  /* @TODO fix height calculation. No way to get height of window as far as I know. Only the vertical height...*/
-  /* min-height: calc(100vh - 340px); */
-  min-height: 710px;
+  margin-top: 30px;
+  min-height: 600px;
 }
 
-
-/*
-* Content types
-*/
-
+/* Content types */
 section {
   border-radius: 5px;
-  min-height: 380px;
-  margin-bottom: 2em;
   padding: 5px 20px;
 }
 
-/* Login form styling. Work in progress. */
-.login-form {
-  margin: 0 auto;
-  width: 50%;
+/*Simple css to style it like a toggle switch*/
+.theme-switch-wrapper {
+  display: flex;
+  align-items: center;
 }
-
-.form-control, .btn {
-  min-height: 38px;
-}
-
-.form-label-group {
+.theme-switch {
+  display: inline-block;
+  height: 24px;
   position: relative;
-  margin-bottom: 1rem;
+  width: 40px;
 }
 
-.form-label-group>input, .form-label-group>label {
-  padding: var(--input-padding-y) var(--input-padding-x);
+.theme-switch input {
+  display:none;
 }
 
-.form-label-group>label {
-  position: absolute;
-  top: 0;
+.slider {
+  background-color: #ccc;
+  bottom: 0;
+  cursor: pointer;
   left: 0;
-  display: block;
-  width: 100%;
-  margin-bottom: 0;  /* Override default `<label>` margin */
-  line-height: 1.5;
-  color: #495057;
-  border: 1px solid transparent;
-  border-radius: .25rem;
-  transition: all .1s ease-in-out;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transition: .2s;
 }
 
-.form-label-group input::-webkit-input-placeholder {
-  color: transparent;
+.slider:before {
+  background-color: #fff;
+  bottom: 4px;
+  content: "";
+  height: 16px;
+  left: 4px;
+  position: absolute;
+  transition: .2s;
+  width: 16px;
 }
 
-.form-label-group input:-ms-input-placeholder {
-  color: transparent;
+input:checked + .slider {
+  background-color: #66bb6a;
+}
+input:checked + .slider:before {
+  transform: translateX(16px);
 }
 
-.form-label-group input::-ms-input-placeholder {
-  color: transparent;
+.slider.round {
+  border-radius: 34px;
 }
-
-.form-label-group input::-moz-placeholder {
-  color: transparent;
-}
-
-.form-label-group input::placeholder {
-  color: transparent;
-}
-
-.form-label-group input:not(:placeholder-shown) {
-  padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));
-  padding-bottom: calc(var(--input-padding-y) / 3);
-}
-
-.form-label-group input:not(:placeholder-shown)~label {
-  color: #777;
-  font-size: 12px;
-  padding-top: calc(var(--input-padding-y) / 3);
-  padding-bottom: calc(var(--input-padding-y) / 3);
-}
-
-footer {
-  font-size: 18px;
-  padding: 5px;
-  text-align: center;
-}
-
-/*
-* Responsice design(tablet/mobile)
-*/
-
-@media (min-width: 768px) {
-  .container {
-    width: 750px;
-  }
-}
-
-@media (min-width: 992px) {
-  .container {
-    width: 970px;
-  }
-}
-
-@media (min-width: 1200px) {
-  .container {
-    width: 1170px;
-  }
+.slider.round:before {
+  border-radius: 50%;
 }
 
 /* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@@ -212,6 +122,10 @@ footer {
     text-align: center;
   }
 
+  nav {
+    flex-direction: column;
+  }
+
   nav ul {
     flex-direction: column;
     margin: 0 auto;
diff --git a/assets/css/themes.css b/assets/css/themes.css
index 6d98597..2254613 100755
--- a/assets/css/themes.css
+++ b/assets/css/themes.css
@@ -1,138 +1,74 @@
 
+/*Default theme*/
+:root {
+  --background-color: #fdfdfd;
+  --headings-color: #111111;
+  --font-color: #333333;
 
-/* Themes(light and dark) */
-
-
-/* Light theme */
-html {
-  --background-color: #383c4a;
-  --section-color: #2a2e3a;
-  --text-color: #C8C8C8;
-  --headings-color: #ffffff;
-  --header-color: #2e323e;
   --site-name-color: #ffffff;;
   --site-description-color: #ffffff;
   --nav-link-color: #57cc8a;
   --nav-link-hover-color: #ffffff;
   --link-color: #8bb8df;
   --link-color-hover: 8bb8df;
-  --border-color: #808080;
-  --footer-color: #2e323e;
 }
 
-@media (prefers-color-scheme:light) {
-  body {
-    background-color: var(--background-color);
-    color: var(--text-color);
-  }
-
-  h1, h2, h3, h4, h5, h6 {
-    color: var(--headings-color);
-  }
-
-  header {
-    background-color: var(--header-color);
-  }
-
-  .menu {
-    color: white;
-  }
-
-  a {
-    color: #CC99FF;
-  }
-
-  a:hover {
-    color: white;
-    text-decoration: underline;
-  }
-
-  .content {
-    background-color: #ffffff;
-  }
-
-  main p {
-    color: black;
-  }
-
-  section {
-    background-color: #ffffff;
-  }
-
-  footer {
-    background-color: #182329;
-    color: #C8C8C8;
-  }
-}
-
-
 /* Dark theme */
 html[data-theme='dark'] {
-  --background-color: #383c4a;
-  --section-color: #2a2e3a;
-  --text-color: #C8C8C8;
+  --background-color: #232629;
   --headings-color: #ffffff;
-  --header-color: #2e323e;
+  --font-color: #ffffff;
+  
   --site-name-color: #ffffff;;
   --site-description-color: #ffffff;
   --nav-link-color: #57cc8a;
   --nav-link-hover-color: #ffffff;
   --link-color: #8bb8df;
   --link-color-hover: 8bb8df;
-  --border-color: #808080;
-  --footer-color: #2e323e;
+  --border-color: #3d3d3d;
 }
 
-@media (prefers-color-scheme:dark) {
-  body {
-    background-color: #383c4a;
-    color: var(--text-color);
-  }
-
-  h1, h2, h3 {
-    color: white;
-  }
-
-  header {
-    /* background-color: #182329; */
-    background-color: #2e323e;
-  }
-
-  main {
-    color: #ffffff;
-  }
-
-  .title {
-    color: #ffffff;
-  }
-
-  .menu {
-    color: #ffffff;
-  }
-
-  a {
-    color: #CC99FF;
-  }
-
-  a:hover {
-    color: white;
-  }
-
-  .content {
-    background-color: #182329;
-  }
-
-  main p {
-    color: #C8C8C8;
-  }
-
-  section {
-    background-color: #2a2e3a;
-  }
-
-  footer {
-    background-color: #2e323e;
-    border-top: 1px solid var(--border-color);
-    color: #C8C8C8;
-  }
+body {
+  background-color: var(--background-color);
+  color: var(--font-color);
+}
+
+h1, h2, h3, h4, h5 {
+  color: var(--headings-color);
+}
+
+hr {
+  background-color: #eeeeee;
+}
+
+header {
+  /* background-color: #4e5b69; */
+  border-bottom: 2px solid #eeeeee;
+}
+
+nav {
+  /* background-color: rgba(0, 0, 0, 10); */
+  /* background-color: #232629; */
+  /* background-color: #23262980; */
+}
+
+li a:hover {
+  border-bottom: 3px solid white;
+  text-decoration: none;
+}
+
+a {
+  color: #CC99FF;
+}
+
+a:hover {
+  color: white;
+}
+
+main p {
+  /* color: #C8C8C8; */
+}
+
+footer {
+
 }
diff --git a/includes/head.php b/includes/head.php
index 3618d9b..80caf6f 100755
--- a/includes/head.php
+++ b/includes/head.php
@@ -7,21 +7,16 @@
   <meta name="keywords" content="quartznet, software, games, tools"/>
   <meta name="author" content="quartznet"/>
 
-  <!-- Open Graph meta tags -->
+  <!-- Open Graph tags -->
   <meta property="og:title" content="quartznet" />
   <meta property="og:description" content="We are software and game developers." />
 
   <!-- Load CSS -->
-  <link rel="stylesheet" href="/quartznet/assets/css/normalize.css">
+  <link rel="stylesheet" href="/quartznet/assets/css/bootstrap.min.css" defer>
   <link href="/quartznet/assets/css/stylesheet.css" rel="stylesheet">
   <link href="/quartznet/assets/css/themes.css" rel="stylesheet">
-  <!-- <link rel="stylesheet" href="/quartznet/assets/css/dark.css" media="(prefers-color-scheme: dark)"> -->
-  <!-- <link rel="stylesheet" href="/quartznet/assets/css/light.css" media="(prefers-color-scheme: no-preference), (prefers-color-scheme: light)"> -->
 
-    <!-- Load fonts -->
-  <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
-
-  <!-- Load icons -->
+  <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
   <link rel="icon" href="/quartznet/assets/favicon.ico">
 
   <!-- Global site tag (gtag.js) - Google Analytics -->