diff --git a/components/mainmenu.module.css b/components/mainmenu.module.css
deleted file mode 100644
index 85d3b03..0000000
--- a/components/mainmenu.module.css
+++ /dev/null
@@ -1,73 +0,0 @@
-.menu {
-  border: 1px solid black;
-  height: 100%;
-  width: 100%;
-  display: grid;
-  justify-items: center;
-  padding: 2rem;
-  overflow-y: auto;
-  max-height: 100vh;
-  scrollbar-width: none;
-  grid-row-gap: 0.5em;
-}
-
-.menuLogo {
-  display: grid;
-  place-items: center;
-  cursor: pointer;
-}
-
-.menuLogo > h2 {
-  margin-top: 0;
-}
-
-.menuLogo > img {
-  width: 50%;
-  height: auto;
-  place-self: start center;
-}
-
-.menu > hr {
-  height: 0;
-  width: 100%;
-  border: none;
-  border-top: 0.3rem dotted black;
-  margin: 2rem;
-}
-
-.menuOption {
-  justify-self: start;
-  display: grid;
-  grid-template-areas: 'img title' '. subtitle';
-  grid-template-columns: auto 1fr;
-  align-items: center;
-  grid-column-gap: 1em;
-  cursor: pointer;
-  padding: 0.4em 1em;
-  width: 100%;
-}
-
-.menuOption:hover {
-  background-color: var(--color-main-base);
-  border-radius: 1em;
-}
-
-.menuOption > * {
-  margin: 0;
-}
-
-.menuOption > img {
-  width: 1.2em;
-  height: auto;
-  grid-area: img;
-}
-
-.menuOption > h3 {
-  grid-area: title;
-  font-size: 150%;
-  font-weight: 600;
-}
-
-.menuOption > p {
-  grid-area: subtitle;
-}
\ No newline at end of file
diff --git a/components/mainmenu.tsx b/components/mainmenu.tsx
index 08ff103..7eac8c5 100644
--- a/components/mainmenu.tsx
+++ b/components/mainmenu.tsx
@@ -1,75 +1,67 @@
 import Link from 'next/link'
-import styles from './mainmenu.module.css'
+import styles from '../styles/mainmenu.module.css'
+import { useRouter } from 'next/router'
 
 export default function MainMenu() {
+
+  const router = useRouter();
+
+  function generateMenuOption(url: string, icon: string, title: string, subtitle?: string) {
+    const classActive = router.asPath === url ? styles.active : null;
+    return (
+      <Link href={url} passHref>
+          <div className={styles.menuOption + " " + classActive}>
+            <img src={icon} alt="" />
+            <h3>{title}</h3>
+            <p>{subtitle}</p>
+          </div>
+      </Link>
+    )
+  }
+
   return (
+
     <div className={styles.menu}>
 
       <Link href="/" passHref>
         <div className={styles.menuLogo}>
-          <img src="/icons/accords.png" alt="" />
+          <img src="/icons/accords.svg" alt="" />
           <h2>Accord&apos;s Library</h2>
         </div>
       </Link>
       
       <button>Change language</button>
 
-      <hr></hr>
+      <hr />
 
-      <Link href="/library" passHref>
-        <div className={styles.menuOption}>
-          <img src="/icons/books.png" alt="" />
-          <h3>Library</h3>
-          <p>Browse all physical and digital media</p>
+      {generateMenuOption("/library", "/icons/book-solid.svg", "Library", "Browse all physical and digital media")}
+      {generateMenuOption("/hubs", "/icons/hubs.svg", "Hubs", "Explore all content of a specific game/series")}
+      {generateMenuOption("/chronology", "/icons/timeline-solid.svg", "Chronology", "Follow all events in chronological order")}
+
+      <hr />
+
+      {generateMenuOption("/archive", "/icons/box-archive-solid.svg", "Archive")}
+      {generateMenuOption("/news", "/icons/newspaper-solid.svg", "News")}
+      {generateMenuOption("/gallery", "/icons/images-solid.svg", "Gallery")}
+      {generateMenuOption("/about-us", "/icons/circle-info-solid.svg", "About us")}
+
+      <hr />
+
+      <div className={styles.menuFooter}>
+        <p>This website&rsquo;s content is made available under <a href="https://creativecommons.org/licenses/by-sa/4.0/">CC-BY-SA</a> unless otherwise noted.</p>
+        <a href="https://creativecommons.org/licenses/by-sa/4.0/">
+          <div className={styles.menuFooterCC}>
+            <img src="/icons/creative-commons-brands.svg" alt="" />
+            <img src="/icons/creative-commons-by-brands.svg" alt="" />
+            <img src="/icons/creative-commons-sa-brands.svg" alt="" />
+          </div>
+        </a>
+        <p>Accord&rsquo;s Library is not affiliated with or endorsed by SQUARE ENIX CO. LTD. All game assets and promotional materials belongs to © SQUARE ENIX CO. LTD.</p>
+        <div className={styles.menuFooterSocials}>
+          <a href="https://github.com/Accords-Library"><img src="/icons/github-brands.svg" alt="" /></a>
+          <a href="https://accords-library.com/discord"><img src="/icons/discord-brands.svg" alt="" /></a>
         </div>
-      </Link>
-
-      <Link href="/hubs" passHref>
-        <div className={styles.menuOption}>
-          <img src="/icons/hubs.png" alt="" />
-          <h3>Hubs</h3>
-          <p>Explore all content of a specific game/series</p>
-        </div>
-      </Link>
-
-      <Link href="/chronology" passHref>
-        <div className={styles.menuOption}>
-          <img src="/icons/chronology.png" alt="" />
-          <h3>Chronology</h3>
-          <p>Follow all events in chronological order</p>
-        </div>
-      </Link>
-
-      <hr></hr>
-
-      <Link href="/archive" passHref>
-        <div className={styles.menuOption}>
-          <img src="/icons/archive.png" alt="" />
-          <h3>Archive</h3>
-        </div>
-      </Link>
-
-      <Link href="/news" passHref>
-        <div className={styles.menuOption}>
-          <img src="/icons/news.png" alt="" />
-          <h3>News</h3>
-        </div>
-      </Link>
-
-      <Link href="/gallery" passHref>
-        <div className={styles.menuOption}>
-          <img src="/icons/gallery.png" alt="" />
-          <h3>Gallery</h3>
-        </div>
-      </Link>
-
-      <Link href="/about-us" passHref>
-        <div className={styles.menuOption}>
-          <img src="/icons/info.png" alt="" />
-          <h3>About us</h3>
-        </div>
-      </Link>
-
+      </div>
     </div>
   )
 }
\ No newline at end of file
diff --git a/components/menu.tsx b/components/menu.tsx
new file mode 100644
index 0000000..974b32b
--- /dev/null
+++ b/components/menu.tsx
@@ -0,0 +1,16 @@
+import MainMenu from './mainmenu'
+import SubMenu from './submenu'
+import styles from '../styles/menu.module.css'
+
+export default function Menu() {
+  return (
+    <div className={styles.container}>
+        <MainMenu></MainMenu>
+        <SubMenu></SubMenu>
+    </div>
+  )
+}
+
+
+
+
diff --git a/components/submenu.tsx b/components/submenu.tsx
new file mode 100644
index 0000000..191eae0
--- /dev/null
+++ b/components/submenu.tsx
@@ -0,0 +1,10 @@
+import Link from 'next/link'
+import styles from '../styles/submenu.module.css'
+
+export default function MainMenu() {
+  return (
+    <div className={styles.menu}>
+      
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/pages/chronology/index.tsx b/pages/chronology/index.tsx
new file mode 100644
index 0000000..6c6bce6
--- /dev/null
+++ b/pages/chronology/index.tsx
@@ -0,0 +1,20 @@
+import type { NextPage } from 'next'
+import Head from 'next/head'
+import Menu from '../../components/menu'
+
+const Chronology: NextPage = () => {
+  return (
+    <>
+      <Head>
+        <title>Library</title>
+        <meta name="description" content="Generated by create next app" />
+        <link rel="icon" href="/favicon.png" />
+      </Head>
+
+      <Menu></Menu>
+
+    </>
+  )
+}
+
+export default Chronology
diff --git a/pages/index.tsx b/pages/index.tsx
index 440b2a9..14867e3 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,26 +1,19 @@
 import type { NextPage } from 'next'
 import Head from 'next/head'
-import styles from '../styles/Home.module.css'
-import MainMenu from '../components/mainmenu'
+import Menu from '../components/menu'
 
 const Home: NextPage = () => {
   return (
-    <div className={styles.container}>
+    <>
       <Head>
-        <title>Create Next App</title>
+        <title>Accord&rsquo;s Library - Discover • Analyse • Translate • Archive</title>
         <meta name="description" content="Generated by create next app" />
         <link rel="icon" href="/favicon.png" />
       </Head>
 
-      <MainMenu></MainMenu>
-
-      <div className={styles.submenu}></div>
-
-      <main className={styles.main}>
-
-      </main>
-
-    </div>
+      <Menu></Menu>
+      
+    </>
   )
 }
 
diff --git a/pages/library.tsx b/pages/library.tsx
index 471eede..4fd938d 100644
--- a/pages/library.tsx
+++ b/pages/library.tsx
@@ -1,26 +1,19 @@
 import type { NextPage } from 'next'
 import Head from 'next/head'
-import styles from '../styles/Home.module.css'
-import MainMenu from '../components/mainmenu'
+import Menu from '../components/menu'
 
 const Home: NextPage = () => {
   return (
-    <div className={styles.container}>
+    <>
       <Head>
         <title>Library</title>
         <meta name="description" content="Generated by create next app" />
         <link rel="icon" href="/favicon.png" />
       </Head>
 
-      <MainMenu></MainMenu>
+      <Menu></Menu>
 
-      <div className={styles.submenu}></div>
-
-      <main className={styles.main}>
-
-      </main>
-
-    </div>
+    </>
   )
 }
 
diff --git a/public/icons/accords.svg b/public/icons/accords.svg
new file mode 100644
index 0000000..f0cea5f
--- /dev/null
+++ b/public/icons/accords.svg
@@ -0,0 +1,138 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.0"
+   width="580pt"
+   height="580pt"
+   viewBox="0 0 580 580"
+   preserveAspectRatio="xMidYMid meet"
+   id="svg4742"
+   sodipodi:docname="accords.svg"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
+  <defs
+     id="defs4746" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2496"
+     inkscape:window-height="1417"
+     id="namedview4744"
+     showgrid="false"
+     inkscape:zoom="1.2781821"
+     inkscape:cx="140.85185"
+     inkscape:cy="607.74362"
+     inkscape:window-x="56"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4742" />
+  <metadata
+     id="metadata4702">
+Created by potrace 1.16, written by Peter Selinger 2001-2019
+<rdf:RDF>
+  <cc:Work
+     rdf:about="">
+    <dc:format>image/svg+xml</dc:format>
+    <dc:type
+       rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+    <dc:title></dc:title>
+  </cc:Work>
+</rdf:RDF>
+</metadata>
+  <g
+     transform="matrix(0.1,0,0,-0.1,14.0825,562.98365)"
+     id="g4740"
+     style="fill:#000000;stroke:none">
+    <path
+       d="M 2167,5485 C 1614.8604,5364.6389 1142,5104 749,4703 407,4356 164.00488,3935.5042 42,3481 -86.072901,3003.8906 -88.330602,2475.4976 42,1999 170.72748,1528.3635 427,1092 787,739 929,598 1043,505 1193,406 1452,235 1715,115 2008,34 c 483.6738,-154.14226 1081.9939,-141.729 1484,0 210,58 425,145 610,247 703,387 1017.036,901.3456 1281.3812,1504.8052 176.4698,402.8536 202.7128,872.3087 158.4282,1309.8833 C 5506.5215,3444.3662 5334,3866 5209,4093 c -124,225 -269,419 -458,610 -393,401 -870.9531,687.1618 -1419,781 -400.0306,68.4944 -719.4382,98.1282 -1165,1 z m 803,-261 c 80,-37 197,-162 298,-320 46,-71 119,-185 163,-253 44,-68 79,-125 77,-126 -2,-1 -57,17 -123,41 -171,63 -238,110 -525,375 -149,137 -279,241 -344,277 l -31,17 45,6 c 25,3 122,7 215,7 163,2 172,1 225,-24 z m 276,-19 c 99,-19 270,-67 310,-88 53,-28 123,-113 170,-209 25,-51 74,-185 110,-298 36,-113 76,-236 90,-273 13,-38 24,-71 24,-73 0,-3 -17,7 -37,23 -21,16 -73,53 -115,82 -93,64 -164,148 -287,337 -203,314 -242,372 -301,442 -33,39 -57,72 -52,72 6,0 45,-7 88,-15 z m -811,-55 c 93,-47 174,-110 375,-293 213,-194 228,-209 205,-203 -11,3 -74,10 -140,15 -170,13 -202,25 -645,252 -113,57 -239,115 -280,129 -41,13 -79,27 -83,31 -9,7 159,64 293,99 106,28 172,21 275,-30 z m 1660,-288 c 142,-96 169,-197 194,-752 5,-107 8,-196 7,-197 -9,-9 -169,203 -203,269 -25,48 -84,209 -139,378 -80,245 -116,339 -182,474 -7,14 248,-121 323,-172 z m -2180,97 c 67,-22 577,-271 604,-295 6,-6 -16,-10 -151,-34 -159,-27 -221,-21 -568,55 -279,61 -364,75 -449,75 -34,0 -61,3 -61,8 0,8 175,122 263,172 123,69 200,73 362,19 z m 2609,-443 c 123,-123 143,-159 152,-268 8,-97 -7,-205 -67,-483 -27,-126 -53,-245 -57,-264 -7,-33 -9,-31 -64,90 -84,182 -85,193 -118,769 -6,102 -17,214 -25,250 -8,36 -14,69 -15,73 0,16 85,-58 194,-167 z m -3060,139 c 55,-8 169,-31 255,-51 86,-19 193,-43 239,-52 l 83,-16 -131,-63 c -160,-77 -221,-89 -535,-103 -259,-12 -420,-26 -499,-44 -31,-8 -56,-10 -54,-6 2,5 44,54 93,111 95,108 190,194 234,211 78,30 176,34 315,13 z m 1588,-264 c 524,-90 982,-439 1214,-926 253,-531 207,-1151 -122,-1645 -215,-323 -541,-562 -919,-672 -403,-118 -835,-77 -1217,113 -270,135 -521,370 -682,636 -95,158 -175,375 -207,561 -27,158 -27,426 1,584 78,452 347,855 743,1113 169,110 395,199 597,235 151,27 437,27 592,1 z M 1555,4247 c -22,-17 -67,-56 -100,-86 -95,-84 -171,-117 -605,-255 -113,-37 -240,-83 -282,-104 -43,-21 -78,-34 -78,-30 0,15 90,190 142,276 60,99 102,133 208,166 106,34 189,44 481,57 140,6 256,13 258,15 2,2 7,2 10,-1 3,-3 -13,-20 -34,-38 z m 3290,-130 c 85,-131 165,-291 165,-330 0,-106 -64,-272 -209,-546 -50,-94 -98,-189 -107,-211 -9,-23 -20,-38 -24,-33 -13,16 -43,230 -41,303 2,97 21,213 71,435 49,219 70,341 70,418 0,31 3,57 8,57 4,0 34,-42 67,-93 z M 1158,3810 C 1066,3673 1018,3630 825,3505 528,3312 419,3238 366,3190 c -64,-60 -65,-59 -41,66 22,114 71,280 94,317 54,88 213,166 551,272 135,42 247,79 249,81 2,2 8,4 12,4 4,0 -29,-54 -73,-120 z m 3988,-357 c 25,-87 48,-187 51,-223 5,-61 3,-70 -36,-145 -48,-96 -106,-169 -289,-369 -77,-83 -152,-166 -167,-184 -15,-18 -30,-31 -32,-28 -12,12 21,257 45,331 14,44 89,206 167,360 78,154 155,317 171,362 19,54 31,77 37,68 4,-8 28,-85 53,-172 z M 939,3359 C 881,3188 844,3136 575,2845 439,2697 375,2621 330,2550 l -35,-55 -7,50 c -3,28 -7,124 -7,214 -1,194 5,214 97,309 78,80 152,134 365,269 100,63 193,123 207,133 14,10 26,17 28,15 1,-1 -16,-58 -39,-126 z M 841,2849 C 831,2674 825,2658 627,2268 553,2123 483,1974 470,1936 l -23,-69 -14,34 c -32,73 -104,347 -105,393 0,38 9,67 41,130 48,95 112,177 297,377 74,81 144,159 155,173 12,15 23,25 25,23 2,-2 0,-68 -5,-148 z m 4397,-110 -3,-196 -30,-43 c -48,-69 -155,-159 -307,-258 -303,-198 -353,-230 -356,-227 -2,1 15,56 38,121 59,171 100,230 371,524 141,153 203,228 245,294 l 29,46 8,-32 c 5,-18 7,-121 5,-229 z M 869,2413 c 7,-43 19,-104 27,-137 21,-80 7,-184 -62,-500 -30,-137 -61,-299 -68,-360 l -12,-111 -73,110 c -40,61 -92,151 -117,200 l -45,90 11,68 c 18,112 49,192 159,407 58,113 116,229 130,258 14,28 28,52 31,52 3,0 12,-35 19,-77 z m 4321,-154 c -23,-108 -77,-294 -97,-336 -20,-42 -121,-110 -233,-156 -66,-28 -311,-109 -554,-184 -22,-7 -25,-12 61,113 96,142 162,195 583,464 56,36 136,93 179,126 42,34 77,61 78,60 1,-1 -6,-40 -17,-87 z M 1126,1663 c 8,-49 19,-194 24,-323 10,-221 21,-362 37,-455 l 6,-39 -44,34 c -55,44 -242,230 -264,263 -26,40 -36,146 -25,250 5,51 35,210 67,354 l 57,263 64,-130 c 51,-105 66,-147 78,-217 z m 3835,-40 c -74,-143 -165,-280 -202,-302 -79,-48 -250,-75 -544,-86 -88,-3 -189,-8 -225,-11 l -65,-6 40,34 c 22,18 69,59 104,91 88,80 175,118 521,231 162,52 322,109 355,124 33,16 62,28 63,26 2,-1 -19,-47 -47,-101 z m -3693,-85 c 15,-18 56,-64 90,-101 91,-97 116,-156 257,-598 31,-97 72,-209 91,-249 19,-40 33,-75 30,-77 -7,-7 -184,85 -289,151 -76,47 -103,70 -119,99 -35,69 -58,187 -69,347 -13,211 -25,460 -21,460 2,0 15,-15 30,-32 z m 455,-405 c 142,-95 174,-134 368,-438 78,-121 167,-254 200,-294 32,-41 58,-76 56,-77 -6,-6 -159,28 -281,62 -119,34 -135,41 -171,78 -46,47 -101,148 -140,256 -28,80 -155,475 -155,484 0,10 5,7 123,-71 z m 2937,38 c 0,-15 -255,-267 -301,-297 -41,-28 -47,-29 -158,-28 -120,1 -170,9 -431,68 -85,19 -182,40 -214,46 l -60,12 123,60 c 147,72 203,84 431,98 430,26 507,31 540,39 48,12 70,13 70,2 z M 2165,925 c 61,-20 129,-47 152,-61 64,-37 172,-127 348,-289 88,-81 197,-175 242,-208 73,-55 80,-63 60,-69 -36,-10 -379,-9 -418,2 -45,13 -112,70 -177,153 -38,47 -253,371 -336,506 -6,9 -5,12 5,8 8,-3 64,-22 124,-42 z m 1300,-46 c 39,-6 158,-30 265,-54 229,-52 358,-75 411,-75 22,0 39,-4 39,-9 0,-15 -164,-116 -286,-178 l -112,-56 -73,17 c -106,24 -204,66 -464,201 l -230,119 100,18 c 55,11 118,23 140,27 43,9 99,6 210,-10 z m -725,-58 c 116,-9 182,-35 475,-190 109,-57 246,-124 304,-147 123,-50 131,-41 -94,-105 -184,-53 -256,-59 -315,-29 -105,53 -176,109 -395,310 -82,76 -161,148 -175,160 l -25,21 65,-6 c 36,-4 108,-10 160,-14 z"
+       id="path4704"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="scaacccccaaccssccssccccccccccscsccccsccccccccccccsccccccccssccscccccscsccccccccccccccccccccccccccscccssccscccccsscccccccsscscccsccsccsccccccccssccccccccccscccccccccccccccccccccccsccscccccsccccccccccccccccccccccccccsccccsccccccccscsccccccccsccscccccccccssccccaccccccccccccc" />
+    <path
+       d="m 2731,4318 c -51,-27 -47,-108 5,-129 56,-21 113,28 98,85 -11,45 -61,66 -103,44 z"
+       id="path4706"
+       inkscape:connector-curvature="0" />
+    <path
+       d="m 1995,4122 c -59,-12 -75,-84 -28,-122 47,-37 113,-4 113,55 0,45 -40,77 -85,67 z"
+       id="path4708"
+       inkscape:connector-curvature="0" />
+    <path
+       d="m 3494,4117 c -51,-26 -59,-83 -18,-116 15,-12 34,-21 44,-21 33,0 70,39 70,74 0,50 -54,86 -96,63 z"
+       id="path4710"
+       inkscape:connector-curvature="0" />
+    <path
+       d="m 2658,3710 c -105,-56 -155,-207 -113,-346 8,-27 33,-80 56,-119 65,-109 79,-162 86,-309 l 6,-129 -124,6 c -141,7 -196,22 -304,86 -119,70 -216,87 -321,56 -103,-31 -164,-110 -164,-215 0,-105 61,-184 164,-215 105,-31 202,-14 321,56 108,64 163,79 304,86 l 124,6 -6,-124 c -7,-141 -22,-196 -86,-304 -70,-119 -87,-216 -56,-321 31,-103 110,-164 215,-164 105,0 184,61 215,164 31,105 14,202 -56,321 -64,108 -79,163 -86,304 l -6,124 129,-6 c 147,-7 200,-21 309,-86 119,-70 216,-87 321,-56 103,31 164,110 164,215 0,105 -61,184 -164,215 -105,31 -202,14 -321,-56 -109,-65 -162,-79 -309,-86 l -129,-6 6,129 c 7,147 21,200 86,309 23,39 48,92 56,119 42,140 -9,292 -116,346 -51,27 -150,26 -201,0 z"
+       id="path4712"
+       inkscape:connector-curvature="0" />
+    <path
+       d="m 1412,3554 c -47,-32 -16,-124 42,-124 13,0 35,9 50,21 71,55 -18,155 -92,103 z"
+       id="path4714"
+       inkscape:connector-curvature="0" />
+    <path
+       d="m 4021,3544 c -27,-35 -26,-59 4,-89 46,-47 119,-19 117,44 -2,70 -79,98 -121,45 z"
+       id="path4716"
+       inkscape:connector-curvature="0" />
+    <path
+       d="m 2291,3273 c -50,-26 -76,-66 -76,-118 0,-79 77,-144 152,-130 48,9 99,60 108,108 19,100 -95,187 -184,140 z"
+       id="path4718"
+       inkscape:connector-curvature="0" />
+    <path
+       d="m 3121,3273 c -50,-26 -76,-66 -76,-118 0,-79 77,-144 152,-130 48,9 99,60 108,108 19,100 -95,187 -184,140 z"
+       id="path4720"
+       inkscape:connector-curvature="0" />
+    <path
+       d="m 1221,2808 c -51,-27 -47,-108 5,-129 56,-21 113,28 98,85 -11,45 -61,66 -103,44 z"
+       id="path4722"
+       inkscape:connector-curvature="0" />
+    <path
+       d="m 4241,2808 c -51,-27 -47,-108 5,-129 56,-21 113,28 98,85 -11,45 -61,66 -103,44 z"
+       id="path4724"
+       inkscape:connector-curvature="0" />
+    <path
+       d="m 2301,2443 c -50,-26 -76,-66 -76,-118 0,-79 77,-144 152,-130 48,9 99,60 108,108 19,100 -95,187 -184,140 z"
+       id="path4726"
+       inkscape:connector-curvature="0" />
+    <path
+       d="m 3131,2443 c -50,-26 -76,-66 -76,-118 0,-79 77,-144 152,-130 48,9 99,60 108,108 19,100 -95,187 -184,140 z"
+       id="path4728"
+       inkscape:connector-curvature="0" />
+    <path
+       d="m 1407,2042 c -10,-10 -17,-35 -17,-55 0,-30 5,-39 30,-52 16,-8 37,-15 48,-15 26,0 62,42 62,73 0,56 -86,90 -123,49 z"
+       id="path4730"
+       inkscape:connector-curvature="0" />
+    <path
+       d="m 4021,2034 c -12,-15 -21,-34 -21,-44 0,-10 9,-29 21,-44 41,-52 119,-25 121,43 2,68 -79,98 -121,45 z"
+       id="path4732"
+       inkscape:connector-curvature="0" />
+    <path
+       d="m 1966,1489 c -58,-46 -17,-127 62,-120 23,2 52,41 52,69 0,33 -36,72 -67,72 -11,0 -32,-9 -47,-21 z"
+       id="path4734"
+       inkscape:connector-curvature="0" />
+    <path
+       d="m 3472,1487 c -44,-47 -12,-117 53,-117 64,0 90,79 39,119 -35,27 -65,27 -92,-2 z"
+       id="path4736"
+       inkscape:connector-curvature="0" />
+    <path
+       d="m 2731,1298 c -51,-27 -47,-108 5,-129 56,-21 113,28 98,85 -11,45 -61,66 -103,44 z"
+       id="path4738"
+       inkscape:connector-curvature="0" />
+  </g>
+  <circle
+     style="opacity:1;fill:none;fill-opacity:1;stroke:#000000;stroke-width:4.28598452;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
+     id="path4748"
+     cx="289.8765"
+     cy="288.03381"
+     r="280.89658"
+     transform="rotate(0.18369144)" />
+</svg>
diff --git a/public/icons/archive.png b/public/icons/archive.png
deleted file mode 100644
index de4c0a2..0000000
Binary files a/public/icons/archive.png and /dev/null differ
diff --git a/public/icons/books.png b/public/icons/books.png
deleted file mode 100644
index 6405e4c..0000000
Binary files a/public/icons/books.png and /dev/null differ
diff --git a/public/icons/box-archive-solid.svg b/public/icons/box-archive-solid.svg
new file mode 100644
index 0000000..0c0ad85
--- /dev/null
+++ b/public/icons/box-archive-solid.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="box-archive" class="svg-inline--fa fa-box-archive" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M32 432C32 458.5 53.49 480 80 480h352c26.51 0 48-21.49 48-48V160H32V432zM160 236C160 229.4 165.4 224 172 224h168C346.6 224 352 229.4 352 236v8C352 250.6 346.6 256 340 256h-168C165.4 256 160 250.6 160 244V236zM480 32H32C14.31 32 0 46.31 0 64v48C0 120.8 7.188 128 16 128h480C504.8 128 512 120.8 512 112V64C512 46.31 497.7 32 480 32z"></path></svg>
\ No newline at end of file
diff --git a/public/icons/chronology.png b/public/icons/chronology.png
deleted file mode 100644
index a7c8838..0000000
Binary files a/public/icons/chronology.png and /dev/null differ
diff --git a/public/icons/circle-info-solid.svg b/public/icons/circle-info-solid.svg
new file mode 100644
index 0000000..544ac66
--- /dev/null
+++ b/public/icons/circle-info-solid.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle-info" class="svg-inline--fa fa-circle-info" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 128c17.67 0 32 14.33 32 32c0 17.67-14.33 32-32 32S224 177.7 224 160C224 142.3 238.3 128 256 128zM296 384h-80C202.8 384 192 373.3 192 360s10.75-24 24-24h16v-64H224c-13.25 0-24-10.75-24-24S210.8 224 224 224h32c13.25 0 24 10.75 24 24v88h16c13.25 0 24 10.75 24 24S309.3 384 296 384z"></path></svg>
\ No newline at end of file
diff --git a/public/icons/comment.png b/public/icons/comment.png
deleted file mode 100644
index e69de29..0000000
diff --git a/public/icons/creative-commons-brands.svg b/public/icons/creative-commons-brands.svg
new file mode 100644
index 0000000..0ab1e8e
--- /dev/null
+++ b/public/icons/creative-commons-brands.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="creative-commons" class="svg-inline--fa fa-creative-commons" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M245.8 214.9l-33.22 17.28c-9.43-19.58-25.24-19.93-27.46-19.93-22.13 0-33.22 14.61-33.22 43.84 0 23.57 9.21 43.84 33.22 43.84 14.47 0 24.65-7.09 30.57-21.26l30.55 15.5c-6.17 11.51-25.69 38.98-65.1 38.98-22.6 0-73.96-10.32-73.96-77.05 0-58.69 43-77.06 72.63-77.06 30.72-.01 52.7 11.95 65.99 35.86zm143.1 0l-32.78 17.28c-9.5-19.77-25.72-19.93-27.9-19.93-22.14 0-33.22 14.61-33.22 43.84 0 23.55 9.23 43.84 33.22 43.84 14.45 0 24.65-7.09 30.54-21.26l31 15.5c-2.1 3.75-21.39 38.98-65.09 38.98-22.69 0-73.96-9.87-73.96-77.05 0-58.67 42.97-77.06 72.63-77.06 30.71-.01 52.58 11.95 65.56 35.86zM247.6 8.05C104.7 8.05 0 123.1 0 256c0 138.5 113.6 248 247.6 248 129.9 0 248.4-100.9 248.4-248 0-137.9-106.6-248-248.4-248zm.87 450.8c-112.5 0-203.7-93.04-203.7-202.8 0-105.4 85.43-203.3 203.7-203.3 112.5 0 202.8 89.46 202.8 203.3-.01 121.7-99.68 202.8-202.8 202.8z"></path></svg>
\ No newline at end of file
diff --git a/public/icons/creative-commons-by-brands.svg b/public/icons/creative-commons-by-brands.svg
new file mode 100644
index 0000000..6995901
--- /dev/null
+++ b/public/icons/creative-commons-by-brands.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="creative-commons-by" class="svg-inline--fa fa-creative-commons-by" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M314.9 194.4v101.4h-28.3v120.5h-77.1V295.9h-28.3V194.4c0-4.4 1.6-8.2 4.6-11.3 3.1-3.1 6.9-4.7 11.3-4.7H299c4.1 0 7.8 1.6 11.1 4.7 3.1 3.2 4.8 6.9 4.8 11.3zm-101.5-63.7c0-23.3 11.5-35 34.5-35s34.5 11.7 34.5 35c0 23-11.5 34.5-34.5 34.5s-34.5-11.5-34.5-34.5zM247.6 8C389.4 8 496 118.1 496 256c0 147.1-118.5 248-248.4 248C113.6 504 0 394.5 0 256 0 123.1 104.7 8 247.6 8zm.8 44.7C130.2 52.7 44.7 150.6 44.7 256c0 109.8 91.2 202.8 203.7 202.8 103.2 0 202.8-81.1 202.8-202.8 .1-113.8-90.2-203.3-202.8-203.3z"></path></svg>
\ No newline at end of file
diff --git a/public/icons/creative-commons-sa-brands.svg b/public/icons/creative-commons-sa-brands.svg
new file mode 100644
index 0000000..229c271
--- /dev/null
+++ b/public/icons/creative-commons-sa-brands.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="creative-commons-sa" class="svg-inline--fa fa-creative-commons-sa" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M247.6 8C389.4 8 496 118.1 496 256c0 147.1-118.5 248-248.4 248C113.6 504 0 394.5 0 256 0 123.1 104.7 8 247.6 8zm.8 44.7C130.2 52.7 44.7 150.6 44.7 256c0 109.8 91.2 202.8 203.7 202.8 103.2 0 202.8-81.1 202.8-202.8 .1-113.8-90.2-203.3-202.8-203.3zM137.7 221c13-83.9 80.5-95.7 108.9-95.7 99.8 0 127.5 82.5 127.5 134.2 0 63.6-41 132.9-128.9 132.9-38.9 0-99.1-20-109.4-97h62.5c1.5 30.1 19.6 45.2 54.5 45.2 23.3 0 58-18.2 58-82.8 0-82.5-49.1-80.6-56.7-80.6-33.1 0-51.7 14.6-55.8 43.8h18.2l-49.2 49.2-49-49.2h19.4z"></path></svg>
\ No newline at end of file
diff --git a/public/icons/discord-brands.svg b/public/icons/discord-brands.svg
new file mode 100644
index 0000000..c5ec927
--- /dev/null
+++ b/public/icons/discord-brands.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="discord" class="svg-inline--fa fa-discord" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M524.5 69.84a1.5 1.5 0 0 0 -.764-.7A485.1 485.1 0 0 0 404.1 32.03a1.816 1.816 0 0 0 -1.923 .91 337.5 337.5 0 0 0 -14.9 30.6 447.8 447.8 0 0 0 -134.4 0 309.5 309.5 0 0 0 -15.14-30.6 1.89 1.89 0 0 0 -1.924-.91A483.7 483.7 0 0 0 116.1 69.14a1.712 1.712 0 0 0 -.788 .676C39.07 183.7 18.19 294.7 28.43 404.4a2.016 2.016 0 0 0 .765 1.375A487.7 487.7 0 0 0 176 479.9a1.9 1.9 0 0 0 2.063-.676A348.2 348.2 0 0 0 208.1 430.4a1.86 1.86 0 0 0 -1.019-2.588 321.2 321.2 0 0 1 -45.87-21.85 1.885 1.885 0 0 1 -.185-3.126c3.082-2.309 6.166-4.711 9.109-7.137a1.819 1.819 0 0 1 1.9-.256c96.23 43.92 200.4 43.92 295.5 0a1.812 1.812 0 0 1 1.924 .233c2.944 2.426 6.027 4.851 9.132 7.16a1.884 1.884 0 0 1 -.162 3.126 301.4 301.4 0 0 1 -45.89 21.83 1.875 1.875 0 0 0 -1 2.611 391.1 391.1 0 0 0 30.01 48.81 1.864 1.864 0 0 0 2.063 .7A486 486 0 0 0 610.7 405.7a1.882 1.882 0 0 0 .765-1.352C623.7 277.6 590.9 167.5 524.5 69.84zM222.5 337.6c-28.97 0-52.84-26.59-52.84-59.24S193.1 219.1 222.5 219.1c29.67 0 53.31 26.82 52.84 59.24C275.3 310.1 251.9 337.6 222.5 337.6zm195.4 0c-28.97 0-52.84-26.59-52.84-59.24S388.4 219.1 417.9 219.1c29.67 0 53.31 26.82 52.84 59.24C470.7 310.1 447.5 337.6 417.9 337.6z"></path></svg>
\ No newline at end of file
diff --git a/public/icons/gallery.png b/public/icons/gallery.png
deleted file mode 100644
index 5163819..0000000
Binary files a/public/icons/gallery.png and /dev/null differ
diff --git a/public/icons/github-brands.svg b/public/icons/github-brands.svg
new file mode 100644
index 0000000..4e057ba
--- /dev/null
+++ b/public/icons/github-brands.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="github" class="svg-inline--fa fa-github" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg>
\ No newline at end of file
diff --git a/public/icons/hubs.svg b/public/icons/hubs.svg
new file mode 100644
index 0000000..bc6fcf8
--- /dev/null
+++ b/public/icons/hubs.svg
@@ -0,0 +1,32 @@
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="534.000000pt" height="534.000000pt" viewBox="0 0 534.000000 534.000000"
+ preserveAspectRatio="xMidYMid meet">
+<g transform="translate(0.000000,534.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M4182 5201 c-201 -50 -377 -191 -472 -380 -62 -124 -74 -183 -74
+-361 -1 -173 8 -221 61 -347 35 -81 35 -83 17 -107 -25 -32 -504 -594 -527
+-619 -21 -21 -24 -20 -113 17 -118 49 -169 58 -363 63 -266 7 -391 -19 -588
+-123 -100 -53 -87 -56 -228 66 -166 145 -150 110 -150 333 0 216 -6 246 -72
+355 -77 126 -192 219 -325 263 -64 21 -90 24 -223 23 -129 0 -159 -4 -215 -23
+-191 -67 -350 -242 -389 -429 -16 -79 -14 -277 4 -347 28 -105 74 -184 155
+-265 133 -133 232 -170 456 -170 115 0 154 4 209 21 37 11 77 18 89 15 20 -6
+238 -190 264 -223 18 -25 15 -51 -16 -128 -58 -141 -67 -201 -67 -425 1 -229
+11 -284 80 -444 l35 -81 -93 -87 c-128 -121 -119 -118 -219 -75 -141 60 -193
+70 -378 70 -139 0 -177 -3 -243 -21 -203 -57 -375 -184 -483 -357 -91 -147
+-133 -334 -120 -539 8 -126 27 -208 71 -303 99 -214 275 -368 510 -443 98 -32
+345 -40 465 -16 169 35 306 111 426 237 115 122 178 242 210 399 26 129 16
+366 -21 479 -14 46 -24 93 -21 106 3 12 49 62 102 109 108 98 97 96 209 35 91
+-49 228 -94 334 -110 53 -7 143 -10 245 -6 179 6 271 26 415 93 44 20 85 33
+96 30 29 -7 175 -160 175 -182 -1 -11 -7 -46 -15 -79 -20 -82 -19 -280 1 -359
+52 -202 225 -374 425 -421 84 -19 274 -19 358 0 199 47 373 219 426 421 20 78
+20 290 0 368 -53 204 -227 374 -431 422 -54 12 -100 15 -209 10 -77 -3 -160
+-8 -184 -12 l-44 -6 -72 75 c-40 42 -76 85 -80 97 -4 14 8 52 39 118 74 159
+87 221 93 424 8 276 -14 382 -127 595 -60 113 -60 115 -43 138 16 21 449 529
+509 598 28 31 53 34 134 12 85 -23 336 -20 432 4 206 53 375 192 472 388 57
+116 69 177 70 358 0 140 -3 170 -23 235 -80 260 -270 445 -526 510 -104 27
+-325 27 -433 1z m-1382 -2182 c181 -50 338 -178 418 -339 80 -164 90 -283 35
+-441 -69 -201 -216 -347 -417 -414 -110 -37 -176 -41 -278 -16 -251 59 -435
+240 -499 489 -25 100 -24 152 7 258 41 144 114 254 222 339 164 129 340 172
+512 124z"/>
+</g>
+</svg>
diff --git a/public/icons/images-solid.svg b/public/icons/images-solid.svg
new file mode 100644
index 0000000..a23cdc6
--- /dev/null
+++ b/public/icons/images-solid.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="images" class="svg-inline--fa fa-images" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M528 32H144c-26.51 0-48 21.49-48 48v256c0 26.51 21.49 48 48 48H528c26.51 0 48-21.49 48-48v-256C576 53.49 554.5 32 528 32zM223.1 96c17.68 0 32 14.33 32 32S241.7 160 223.1 160c-17.67 0-32-14.33-32-32S206.3 96 223.1 96zM494.1 311.6C491.3 316.8 485.9 320 480 320H192c-6.023 0-11.53-3.379-14.26-8.75c-2.73-5.367-2.215-11.81 1.332-16.68l70-96C252.1 194.4 256.9 192 262 192c5.111 0 9.916 2.441 12.93 6.574l22.35 30.66l62.74-94.11C362.1 130.7 367.1 128 373.3 128c5.348 0 10.34 2.672 13.31 7.125l106.7 160C496.6 300 496.9 306.3 494.1 311.6zM456 432H120c-39.7 0-72-32.3-72-72v-240C48 106.8 37.25 96 24 96S0 106.8 0 120v240C0 426.2 53.83 480 120 480h336c13.25 0 24-10.75 24-24S469.3 432 456 432z"></path></svg>
\ No newline at end of file
diff --git a/public/icons/info.png b/public/icons/info.png
deleted file mode 100644
index 83a940e..0000000
Binary files a/public/icons/info.png and /dev/null differ
diff --git a/public/icons/news.png b/public/icons/news.png
deleted file mode 100644
index b70d9d1..0000000
Binary files a/public/icons/news.png and /dev/null differ
diff --git a/public/icons/newspaper-solid.svg b/public/icons/newspaper-solid.svg
new file mode 100644
index 0000000..89ab7ad
--- /dev/null
+++ b/public/icons/newspaper-solid.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="newspaper" class="svg-inline--fa fa-newspaper" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M480 32H128C110.3 32 96 46.33 96 64v336C96 408.8 88.84 416 80 416S64 408.8 64 400V96H32C14.33 96 0 110.3 0 128v288c0 35.35 28.65 64 64 64h384c35.35 0 64-28.65 64-64V64C512 46.33 497.7 32 480 32zM272 416h-96C167.2 416 160 408.8 160 400C160 391.2 167.2 384 176 384h96c8.836 0 16 7.162 16 16C288 408.8 280.8 416 272 416zM272 320h-96C167.2 320 160 312.8 160 304C160 295.2 167.2 288 176 288h96C280.8 288 288 295.2 288 304C288 312.8 280.8 320 272 320zM432 416h-96c-8.836 0-16-7.164-16-16c0-8.838 7.164-16 16-16h96c8.836 0 16 7.162 16 16C448 408.8 440.8 416 432 416zM432 320h-96C327.2 320 320 312.8 320 304C320 295.2 327.2 288 336 288h96C440.8 288 448 295.2 448 304C448 312.8 440.8 320 432 320zM448 208C448 216.8 440.8 224 432 224h-256C167.2 224 160 216.8 160 208v-96C160 103.2 167.2 96 176 96h256C440.8 96 448 103.2 448 112V208z"></path></svg>
\ No newline at end of file
diff --git a/public/icons/timeline-solid.svg b/public/icons/timeline-solid.svg
new file mode 100644
index 0000000..6177ac2
--- /dev/null
+++ b/public/icons/timeline-solid.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="timeline" class="svg-inline--fa fa-timeline" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M608 224h-64V153.2C572.2 140.9 592 112.8 592 80C592 35.82 556.2 0 512 0c-44.18 0-80 35.82-80 80c0 32.79 19.77 60.89 48 73.25V224H160V153.2C188.2 140.9 208 112.8 208 80C208 35.82 172.2 0 128 0C83.82 0 48 35.82 48 80c0 32.79 19.77 60.89 48 73.25V224H32C14.33 224 0 238.3 0 256s14.33 32 32 32h256v70.75C259.8 371.1 240 399.2 240 432c0 44.18 35.82 80 80 80c44.18 0 80-35.82 80-80c0-32.79-19.77-60.89-48-73.25V288h256c17.67 0 32-14.33 32-32S625.7 224 608 224zM512 48c17.64 0 32 14.36 32 32s-14.36 32-32 32s-32-14.36-32-32S494.4 48 512 48zM128 48c17.64 0 32 14.36 32 32s-14.36 32-32 32s-32-14.36-32-32S110.4 48 128 48zM320 464c-17.64 0-32-14.36-32-32s14.36-32 32-32s32 14.36 32 32S337.6 464 320 464z"></path></svg>
\ No newline at end of file
diff --git a/public/icons/timeline.png b/public/icons/timeline.png
deleted file mode 100644
index e69de29..0000000
diff --git a/public/icons/toggle-off.png b/public/icons/toggle-off.png
deleted file mode 100644
index e69de29..0000000
diff --git a/public/icons/toggle-on.png b/public/icons/toggle-on.png
deleted file mode 100644
index a5152fd..0000000
Binary files a/public/icons/toggle-on.png and /dev/null differ
diff --git a/public/icons/translation.png b/public/icons/translation.png
deleted file mode 100644
index b70d9d1..0000000
Binary files a/public/icons/translation.png and /dev/null differ
diff --git a/styles/globals.css b/styles/globals.css
index c007c98..6c2d558 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -1,35 +1,57 @@
+@import url('https://fonts.googleapis.com/css2?family=Vollkorn:wght@400;500;600;700;800;900&display=swap');
+
+@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap');
+
+
 :root {
   --color-main-light: #ffedd8;
   --color-main-base: #e6ccb2;
   --color-main-dark: #9c6644;
   --color-main-black: #1B1811;
+  --filter-color-main-dark: invert(44%) sepia(29%) saturate(806%) hue-rotate(340deg) brightness(91%) contrast(85%);
 }
 
 html,
 body {
   padding: 0;
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
   background-color: var(--color-main-light);
+  color: var(--color-main-black);
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: "Vollkorn";
+  font-weight: 700;
 }
 
 a {
   color: inherit;
-  text-decoration: none;
+  text-decoration: underline dotted var(--color-main-dark);
+  transition: .1s color;
+  text-underline-offset: 0.15em;
+}
+
+a:hover {
+  color: var(--color-main-dark);
 }
 
 * {
   box-sizing: border-box;
+  font-family: "Zen Maru Gothic";
+  font-weight: 500;
 }
 
 button {
+  display: grid;
+  place-content: center;
+  place-items: center;
   border: .1rem solid var(--color-main-dark);
   color: var(--color-main-dark);
   background: var(--color-main-light);
   border-radius: 100vmax;
   padding: 0.4em 1em;
   cursor: pointer;
+  transition: .1s color, .1s background-color;
 }
 
 button:hover {
diff --git a/styles/mainmenu.module.css b/styles/mainmenu.module.css
new file mode 100644
index 0000000..10650db
--- /dev/null
+++ b/styles/mainmenu.module.css
@@ -0,0 +1,122 @@
+.menu {
+  border-right: 1px solid black;
+  height: 100%;
+  width: 100%;
+  display: grid;
+  justify-items: center;
+  padding: 2rem;
+  overflow-y: auto;
+  max-height: 100vh;
+  grid-row-gap: 0.5em;
+  place-content: start;
+  scrollbar-width: none;
+}
+
+.menu::-webkit-scrollbar {
+  display: none;
+}
+
+.menu > hr {
+  height: 0;
+  width: 100%;
+  border: none;
+  border-top: 0.3rem dotted black;
+  margin: 2rem;
+}
+
+.menuLogo {
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+}
+
+.menuLogo > h2 {
+  margin-top: 1rem;
+}
+
+.menuLogo > img {
+  width: 50%;
+  height: auto;
+  place-self: start center;
+}
+
+.menuOption {
+  justify-self: start;
+  display: grid;
+  grid-template-areas: 'img title' '. subtitle';
+  grid-template-columns: auto 1fr;
+  align-items: center;
+  border-radius: 1em;
+  grid-column-gap: 1em;
+  cursor: pointer;
+  padding: 0.6em 1.2em;
+  width: 100%;
+  transition: .1s background-color;
+}
+
+.menuOption:hover, .menuOption.active {
+  background-color: var(--color-main-base);
+}
+
+.menuOption > * {
+  margin: 0;
+}
+
+.menuOption > img {
+  width: 1.2em;
+  height: auto;
+  grid-area: img;
+}
+
+.menuOption > h3 {
+  grid-area: title;
+  font-size: 150%;
+}
+
+.menuOption > p {
+  grid-area: subtitle;
+}
+
+.menuFooter {
+  text-align: center;
+}
+
+.menuFooterCC {
+  margin-top: 1rem;
+  margin-bottom: 2rem;
+  display: grid;
+  height: 1rem;
+  grid-auto-flow: column;
+  place-content: center;
+  grid-gap: .2rem;
+}
+
+.menuFooterCC img {
+  height: 1.5rem;
+  width: auto;
+}
+
+.menuFooterCC:hover img {
+  filter: var(--filter-color-main-dark);
+}
+
+
+.menuFooterSocials {
+  margin-top: 3rem;
+  margin-bottom: 1rem;
+  display: grid;
+  height: 1rem;
+  grid-auto-flow: column;
+  place-content: center;
+  grid-gap: 2rem;
+}
+
+.menuFooterSocials img {
+  height: 2rem;
+  width: auto;
+  transition: .1s filter;
+}
+
+.menuFooterSocials img:hover {
+  filter: var(--filter-color-main-dark);
+}
\ No newline at end of file
diff --git a/styles/Home.module.css b/styles/menu.module.css
similarity index 56%
rename from styles/Home.module.css
rename to styles/menu.module.css
index e6722bb..6d8b7a6 100644
--- a/styles/Home.module.css
+++ b/styles/menu.module.css
@@ -1,6 +1,6 @@
 .container {
   display: grid;
-  grid-template-columns: 20rem 1fr 5fr;
+  grid-template-columns: 20rem 20rem 1fr;
   min-height: 100vh;
 }
 
diff --git a/styles/submenu.module.css b/styles/submenu.module.css
new file mode 100644
index 0000000..a7e2c20
--- /dev/null
+++ b/styles/submenu.module.css
@@ -0,0 +1,13 @@
+.menu {
+    border-right: 1px solid black;
+    height: 100%;
+    width: 100%;
+    display: grid;
+    justify-items: center;
+    padding: 2rem;
+    overflow-y: auto;
+    max-height: 100vh;
+    grid-row-gap: 0.5em;
+    place-content: start;
+    scrollbar-width: none;
+  }
\ No newline at end of file