diff --git a/frontend/package.json b/frontend/package.json
index 3237063..9b9e7f3 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -40,6 +40,9 @@
     "@angular-devkit/build-angular": "14.0.0-next.4",
     "@angular/cli": "^14.0.0-next.6",
     "@angular/compiler-cli": "^14.0.0-next.7",
+    "@fontsource/material-icons": "^4.5.4",
+    "@fontsource/material-icons-outlined": "^4.5.4",
+    "@fontsource/roboto": "^4.5.5",
     "@types/jasmine": "~4.0.0",
     "@types/node": "^17.0.22",
     "@types/validator": "^13.7.1",
diff --git a/frontend/src/assets/css/opensans.css b/frontend/src/assets/css/opensans.css
deleted file mode 100644
index b6bbe41..0000000
--- a/frontend/src/assets/css/opensans.css
+++ /dev/null
@@ -1,118 +0,0 @@
-html {
-  font-family: 'Open Sans', 'Arial', sans-serif;
-}
-@supports (font-variation-settings: normal) {
-  html {
-    font-family: 'Open Sans', 'Arial', sans-serif;
-  }
-}
-
-@font-face {
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Open Sans'), url('/fonts/OpenSans-Regular.ttf') format('truetype');
-}
-@font-face {
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Open Sans'), url('/fonts/OpenSans-Regular.ttf') format('truetype');
-}
-@font-face {
-  font-family: 'Open Sans';
-  font-style: italic;
-  font-weight: 400;
-  src: local('Open Sans'), url('/fonts/OpenSans-Italic.ttf') format('truetype');
-}
-@font-face {
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-weight: 300;
-  src: local('Open Sans'), url('/fonts/OpenSans-Light.ttf') format('truetype');
-}
-@font-face {
-  font-family: 'Open Sans';
-  font-style: italic;
-  font-weight: 300;
-  src: local('Open Sans'),
-    url('/fonts/OpenSans-LightItalic.ttf') format('truetype');
-}
-@font-face {
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-weight: 600;
-  src: local('Open Sans'),
-    url('/fonts/OpenSans-SemiBold.ttf') format('truetype');
-}
-@font-face {
-  font-family: 'Open Sans';
-  font-style: italic;
-  font-weight: 600;
-  src: local('Open Sans'),
-    url('/fonts/OpenSans-SemiBoldItalic.ttf') format('truetype');
-}
-@font-face {
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-weight: 700;
-  src: local('Open Sans'), url('/fonts/OpenSans-Bold.ttf') format('truetype');
-}
-@font-face {
-  font-family: 'Open Sans';
-  font-style: italic;
-  font-weight: 700;
-  src: local('Open Sans'),
-    url('/fonts/OpenSans-BoldItalic.ttf') format('truetype');
-}
-@font-face {
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-weight: 800;
-  src: local('Open Sans'),
-    url('/fonts/OpenSans-ExtraBold.ttf') format('truetype');
-}
-@font-face {
-  font-family: 'Open Sans';
-  font-style: italic;
-  font-weight: 800;
-  src: local('Open Sans'),
-    url('/fonts/OpenSans-ExtraBoldItalic.ttf') format('truetype');
-}
-@font-face {
-  font-family: 'Open Sans Light';
-  font-style: normal;
-  font-weight: 300;
-  src: local('Open Sans Light'),
-    url('/fonts/OpenSans-Light-webfont.ttf') format('truetype');
-}
-@font-face {
-  font-family: 'Open Sans Condensed';
-  font-style: normal;
-  font-weight: 700;
-  src: local('Open Sans Condensed'),
-    url('/fonts/OpenSans-CondBold.ttf') format('truetype');
-}
-
-@font-face {
-  font-family: 'Open Sans var';
-  font-weight: 100 900;
-  font-style: oblique 0deg 10deg;
-  src: url('/fonts/OpenSans-VariableFont.ttf') format('ttf');
-}
-
-@font-face {
-  font-family: 'Open Sans var alt';
-  font-weight: 100 900;
-  font-style: normal;
-  font-named-instance: 'Regular';
-  src: url('/fonts/OpenSans-VariableFont.ttf') format('ttf');
-}
-
-@font-face {
-  font-family: 'Open Sans var alt';
-  font-weight: 100 900;
-  font-style: italic;
-  font-named-instance: 'Italic';
-  src: url('/fonts/OpenSans-VariableFont-Italic.ttf') format('ttf');
-}
diff --git a/frontend/src/assets/fonts/OpenSans-Bold.ttf b/frontend/src/assets/fonts/OpenSans-Bold.ttf
deleted file mode 100644
index fd79d43..0000000
Binary files a/frontend/src/assets/fonts/OpenSans-Bold.ttf and /dev/null differ
diff --git a/frontend/src/assets/fonts/OpenSans-BoldItalic.ttf b/frontend/src/assets/fonts/OpenSans-BoldItalic.ttf
deleted file mode 100644
index 9bc8009..0000000
Binary files a/frontend/src/assets/fonts/OpenSans-BoldItalic.ttf and /dev/null differ
diff --git a/frontend/src/assets/fonts/OpenSans-CondBold.ttf b/frontend/src/assets/fonts/OpenSans-CondBold.ttf
deleted file mode 100644
index 83966f2..0000000
Binary files a/frontend/src/assets/fonts/OpenSans-CondBold.ttf and /dev/null differ
diff --git a/frontend/src/assets/fonts/OpenSans-ExtraBold.ttf b/frontend/src/assets/fonts/OpenSans-ExtraBold.ttf
deleted file mode 100644
index 21f6f84..0000000
Binary files a/frontend/src/assets/fonts/OpenSans-ExtraBold.ttf and /dev/null differ
diff --git a/frontend/src/assets/fonts/OpenSans-ExtraBoldItalic.ttf b/frontend/src/assets/fonts/OpenSans-ExtraBoldItalic.ttf
deleted file mode 100644
index 31cb688..0000000
Binary files a/frontend/src/assets/fonts/OpenSans-ExtraBoldItalic.ttf and /dev/null differ
diff --git a/frontend/src/assets/fonts/OpenSans-Italic.ttf b/frontend/src/assets/fonts/OpenSans-Italic.ttf
deleted file mode 100644
index c90da48..0000000
Binary files a/frontend/src/assets/fonts/OpenSans-Italic.ttf and /dev/null differ
diff --git a/frontend/src/assets/fonts/OpenSans-Light-webfont.ttf b/frontend/src/assets/fonts/OpenSans-Light-webfont.ttf
deleted file mode 100644
index 63af664..0000000
Binary files a/frontend/src/assets/fonts/OpenSans-Light-webfont.ttf and /dev/null differ
diff --git a/frontend/src/assets/fonts/OpenSans-Light.ttf b/frontend/src/assets/fonts/OpenSans-Light.ttf
deleted file mode 100644
index 0d38189..0000000
Binary files a/frontend/src/assets/fonts/OpenSans-Light.ttf and /dev/null differ
diff --git a/frontend/src/assets/fonts/OpenSans-LightItalic.ttf b/frontend/src/assets/fonts/OpenSans-LightItalic.ttf
deleted file mode 100644
index 68299c4..0000000
Binary files a/frontend/src/assets/fonts/OpenSans-LightItalic.ttf and /dev/null differ
diff --git a/frontend/src/assets/fonts/OpenSans-Regular.ttf b/frontend/src/assets/fonts/OpenSans-Regular.ttf
deleted file mode 100644
index db43334..0000000
Binary files a/frontend/src/assets/fonts/OpenSans-Regular.ttf and /dev/null differ
diff --git a/frontend/src/assets/fonts/OpenSans-SemiBold.ttf b/frontend/src/assets/fonts/OpenSans-SemiBold.ttf
deleted file mode 100644
index 99db86a..0000000
Binary files a/frontend/src/assets/fonts/OpenSans-SemiBold.ttf and /dev/null differ
diff --git a/frontend/src/assets/fonts/OpenSans-SemiBoldItalic.ttf b/frontend/src/assets/fonts/OpenSans-SemiBoldItalic.ttf
deleted file mode 100644
index 8cad4e3..0000000
Binary files a/frontend/src/assets/fonts/OpenSans-SemiBoldItalic.ttf and /dev/null differ
diff --git a/frontend/src/assets/fonts/OpenSans-VariableFont-Italic.ttf b/frontend/src/assets/fonts/OpenSans-VariableFont-Italic.ttf
deleted file mode 100644
index 0fea34b..0000000
Binary files a/frontend/src/assets/fonts/OpenSans-VariableFont-Italic.ttf and /dev/null differ
diff --git a/frontend/src/assets/fonts/OpenSans-VariableFont.ttf b/frontend/src/assets/fonts/OpenSans-VariableFont.ttf
deleted file mode 100644
index 51dd3c3..0000000
Binary files a/frontend/src/assets/fonts/OpenSans-VariableFont.ttf and /dev/null differ
diff --git a/frontend/src/assets/hello.txt b/frontend/src/assets/hello.txt
deleted file mode 100644
index 7e60b94..0000000
--- a/frontend/src/assets/hello.txt
+++ /dev/null
@@ -1 +0,0 @@
-pog
diff --git a/frontend/src/index.html b/frontend/src/index.html
index 332c2d9..ee74f1f 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -2,12 +2,37 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="/assets/image/logo/picsur.ico" />
+    <link
+      rel="icon"
+      href="/assets/image/logo/picsur.svg"
+      type="image/svg+xml"
+    />
+
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     <link rel="stylesheet" href="/assets/css/normalize.css" />
 
+    <meta name="author" content="Rubikscraft" />
+    <meta
+      name="description"
+      content="Picsur is an opsource solution for easy image sharing."
+    />
+
+    <!-- OpenGraph -->
+    <meta property="og:title" content="Picsur" />
+    <meta property="og:site_name" content="Picsur" />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://picsur.rubikscraft.nl" />
+    <meta
+      property="og:image"
+      content="https://picsur.rubikscraft.nl/assets/image/logo/picsur.svg"
+    />
+    <meta
+      property="og:description"
+      content="Picsur is an opsource solution for easy image sharing."
+    />
+
     <title>Picsur</title>
   </head>
   <body class="mat-typography mat-app-background">
diff --git a/frontend/src/scss/fixes.scss b/frontend/src/scss/fixes.scss
index 99a269d..194aaba 100644
--- a/frontend/src/scss/fixes.scss
+++ b/frontend/src/scss/fixes.scss
@@ -14,6 +14,8 @@ app-root {
 html {
   box-sizing: border-box;
   color-scheme: dark;
+  // Default font is sans family
+  font-family: sans-serif;
 }
 
 *,
diff --git a/frontend/src/scss/fonts.scss b/frontend/src/scss/fonts.scss
new file mode 100644
index 0000000..d508deb
--- /dev/null
+++ b/frontend/src/scss/fonts.scss
@@ -0,0 +1,3 @@
+@import "~@fontsource/roboto/index.css";
+@import "~@fontsource/material-icons/index.css";
+@import "~@fontsource/material-icons-outlined/index.css";
diff --git a/frontend/src/scss/index.scss b/frontend/src/scss/index.scss
index f4c8754..ca3222c 100644
--- a/frontend/src/scss/index.scss
+++ b/frontend/src/scss/index.scss
@@ -1,3 +1,4 @@
+@import "./fonts.scss";
 @import "./material-theme.scss";
 @import "./bootstrap.scss";
 @import "./fixes.scss";
diff --git a/frontend/src/scss/material-theme.scss b/frontend/src/scss/material-theme.scss
index b4ef430..313761c 100644
--- a/frontend/src/scss/material-theme.scss
+++ b/frontend/src/scss/material-theme.scss
@@ -10,8 +10,6 @@
 // have to load a single css file for Angular Material in your app.
 
 // Fonts
-@import "https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp";
-@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap");
 
 $fontConfig: (
   display-4: mat-typography-level(112px, 112px, 300, "Roboto", -0.0134em),
diff --git a/workspace.code-workspace b/picsur.code-workspace
similarity index 100%
rename from workspace.code-workspace
rename to picsur.code-workspace
diff --git a/yarn.lock b/yarn.lock
index d2c0b87..f933e5f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1361,6 +1361,21 @@
   dependencies:
     text-decoding "^1.0.0"
 
+"@fontsource/material-icons-outlined@^4.5.4":
+  version "4.5.4"
+  resolved "https://registry.yarnpkg.com/@fontsource/material-icons-outlined/-/material-icons-outlined-4.5.4.tgz#23ce468b7c569d1c717061cb8c5a69b3cb3fba12"
+  integrity sha512-2SLQe/pAlOzoE2Kd5cBxqTgI9U63hf3a7RrCF8GFvgPkYhF6WOcIzFzsLc1Fdf+UhcYS+Hgpp6o8peguwZGK9Q==
+
+"@fontsource/material-icons@^4.5.4":
+  version "4.5.4"
+  resolved "https://registry.yarnpkg.com/@fontsource/material-icons/-/material-icons-4.5.4.tgz#bfedde9352c36dbbacb6b49d190a1ce1e5917756"
+  integrity sha512-YGmXkkEdu6EIgpFKNmB/nIXzZocwSmbI01Ninpmml8x8BT0M6RR++V1KqOfpzZ6Cw/FQ2/KYonQ3x4IY/4VRRA==
+
+"@fontsource/roboto@^4.5.5":
+  version "4.5.5"
+  resolved "https://registry.yarnpkg.com/@fontsource/roboto/-/roboto-4.5.5.tgz#4ecc38e690469378e2ec2a97f9c12282c654cc93"
+  integrity sha512-Pe1p+gAO6K0aLxBXlLoJRHVx352tVc/v/7DOnvM3t+FYXb+KUga9aCD1NpnDfd0kKnWXqrZyAXguyyFWDDuphw==
+
 "@gar/promisify@^1.0.1", "@gar/promisify@^1.1.3":
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6"
@@ -5499,7 +5514,17 @@ minimatch@^3.0.4:
   dependencies:
     brace-expansion "^1.1.7"
 
-minimist@1.2.5, minimist@^1.2.0, minimist@^1.2.6, "minimist@npm:minimist-lite":
+minimist@1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
+  integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
+
+minimist@^1.2.0, minimist@^1.2.6:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44"
+  integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==
+
+"minimist@npm:minimist-lite":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/minimist-lite/-/minimist-lite-2.2.1.tgz#abb71db2c9b454d7cf4496868c03e9802de9934d"
   integrity sha512-RSrWIRWGYoM2TDe102s7aIyeSipXMIXKb1fSHYx1tAbxAV0z4g2xR6ra3oPzkTqFb0EIUz1H3A/qvYYeDd+/qQ==