diff --git a/nginx/vue/src/assets/css/cv_styles.css b/nginx/vue/public/css/cv_styles.css
similarity index 100%
rename from nginx/vue/src/assets/css/cv_styles.css
rename to nginx/vue/public/css/cv_styles.css
diff --git a/nginx/vue/src/assets/css/styles.css b/nginx/vue/public/css/styles.css
similarity index 59%
rename from nginx/vue/src/assets/css/styles.css
rename to nginx/vue/public/css/styles.css
index 1f937c2..fe78407 100644
--- a/nginx/vue/src/assets/css/styles.css
+++ b/nginx/vue/public/css/styles.css
@@ -1,3 +1,40 @@
+/* Fonts */
+@font-face {
+    font-family: "AldoTheApache";
+    src: url("/fonts/AldotheApache.ttf") format("truetype");
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "RobotFont";
+    src: url("/fonts/Robot_Font.otf") format("opentype");
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "m12";
+    src: url("/fonts/m12.ttf") format("truetype");
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "big_noodle_titling";
+    src: url("/fonts/big_noodle_titling.ttf") format("truetype");
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "CreatoDisplay";
+    src: url("/fonts/CreatoDisplay-Bold.otf") format("opentype");
+    font-weight: normal;
+    font-style: normal;
+}
+
+/* Printing */
 @media print {
     .no-print {
         display: none !important;
diff --git a/nginx/vue/src/assets/fonts/AldotheApache.ttf b/nginx/vue/public/fonts/AldotheApache.ttf
similarity index 100%
rename from nginx/vue/src/assets/fonts/AldotheApache.ttf
rename to nginx/vue/public/fonts/AldotheApache.ttf
diff --git a/nginx/vue/src/assets/fonts/CreatoDisplay-Bold.otf b/nginx/vue/public/fonts/CreatoDisplay-Bold.otf
similarity index 100%
rename from nginx/vue/src/assets/fonts/CreatoDisplay-Bold.otf
rename to nginx/vue/public/fonts/CreatoDisplay-Bold.otf
diff --git a/nginx/vue/src/assets/fonts/CreatoDisplay-Regular.otf b/nginx/vue/public/fonts/CreatoDisplay-Regular.otf
similarity index 100%
rename from nginx/vue/src/assets/fonts/CreatoDisplay-Regular.otf
rename to nginx/vue/public/fonts/CreatoDisplay-Regular.otf
diff --git a/nginx/vue/src/assets/fonts/Robot_Font.otf b/nginx/vue/public/fonts/Robot_Font.otf
similarity index 100%
rename from nginx/vue/src/assets/fonts/Robot_Font.otf
rename to nginx/vue/public/fonts/Robot_Font.otf
diff --git a/nginx/vue/src/assets/fonts/big_noodle_titling.ttf b/nginx/vue/public/fonts/big_noodle_titling.ttf
similarity index 100%
rename from nginx/vue/src/assets/fonts/big_noodle_titling.ttf
rename to nginx/vue/public/fonts/big_noodle_titling.ttf
diff --git a/nginx/vue/src/assets/fonts/m12.ttf b/nginx/vue/public/fonts/m12.ttf
similarity index 100%
rename from nginx/vue/src/assets/fonts/m12.ttf
rename to nginx/vue/public/fonts/m12.ttf
diff --git a/nginx/vue/src/views/CV.vue b/nginx/vue/src/views/CV.vue
index aadcdce..bad1b6b 100644
--- a/nginx/vue/src/views/CV.vue
+++ b/nginx/vue/src/views/CV.vue
@@ -349,276 +349,5 @@
 </template>
 
 <style scoped>
-/* Fonts */
-@font-face {
-    font-family: "AldoTheApache";
-    src: url("@/assets/fonts/AldotheApache.ttf") format("truetype");
-    font-weight: normal;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: "RobotFont";
-    src: url("@/assets/fonts/Robot_Font.otf") format("opentype");
-    font-weight: normal;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: "m12";
-    src: url("@/assets/fonts/m12.ttf") format("truetype");
-    font-weight: normal;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: "big_noodle_titling";
-    src: url("@/assets/fonts/big_noodle_titling.ttf") format("truetype");
-    font-weight: normal;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: "CreatoDisplay";
-    src: url("@/assets/fonts/CreatoDisplay-Bold.otf") format("opentype");
-    font-weight: normal;
-    font-style: normal;
-}
-
-/* Variables */
-:root {
-    /* Blue - Beige */
-    /* --primary: #153448;
-  --secondary: #3C5B6F;
-  --tertiary: #948979;
-  --quaternary: #f5bb78;
-  --background: #DFD0B8; */
-
-    /* Blue - Turqouise */
-    /* --primary: #161D6F;
-  --secondary: #0B2F9F;
-  --tertiary: #98DED9;
-  --quaternary: #C7FFD8;
-  --background: #C2EFD1; */
-
-    /* Red - Blue */
-    /* --primary: #ff204e; */
-    /* --secondary: #a0153e; */
-    /* --tertiary: #5d0341; */
-    /* --quaternary: #3a0e41; */
-    /* --background: #00224d; */
-
-    /* Blue - Brown */
-    /* --primary: #35374B; */
-    /* --secondary: #344955; */
-    /* --tertiary: #50727b; */
-    /* --quaternary: #78a083; */
-    /* --background: #c7b077; */
-
-    /* Black - White */
-    --primary: black;
-    --secondary: black;
-    --tertiary: black;
-    --quaternary: #cccccc;
-    --background: white;
-
-    /* Blue - White */
-    /* --primary: #201e43; */
-    /* --secondary: #134b70; */
-    /* --tertiary: #508c9b; */
-    /* --quaternary: #cceeee; */
-    /* --background: #eeeeee; */
-
-    --font-heading: big_noodle_titling;
-    --font-text: CreatoDisplay;
-    --font-size-text: 90%;
-    --font-size-heading: 2.5em;
-    --font-size-tableheading: 1.2em;
-}
-
-/* A5 Page */
-.a5page {
-    /* overflow: scroll; */
-    display: flex;
-    flex-direction: column;
-    font-family: var(--font-text);
-    height: 148mm;
-    width: 210mm;
-    padding: 5mm;
-    box-sizing: border-box;
-    background-color: var(--background);
-    box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2);
-    border: solid 2px var(--primary);
-}
-
-/* A4 Page */
-.a4page {
-    font-family: var(--font-text);
-    width: 210mm;
-    /* Standard A4 width */
-    height: 297mm;
-    /* Standard A4 height */
-    padding: 10mm;
-    box-sizing: border-box;
-    background-color: var(--background);
-    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
-    border: 1px solid var(--primary);
-    overflow: auto;
-    /* Enables scrolling when content exceeds height */
-    margin: 0 auto;
-    /* Centers the page horizontally */
-}
-
-/* Component Styling */
-body {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    line-height: 1.6;
-    margin: 0;
-    padding: 0;
-}
-
-h1,
-h2,
-h3,
-h4 {
-    color: var(--primary);
-    font-family: var(--font-heading);
-    text-transform: capitalize;
-    text-align: center;
-}
-
-h1 {
-    font-size: var(--font-size-heading);
-}
-
-h2 {
-    margin: 0px;
-    border-bottom: 2px solid var(--primary);
-}
-
-p {
-    color: var(--secondary);
-    font-size: var(--font-size-text);
-    margin-top: 0.3em;
-    margin-bottom: 0.5em;
-}
-
-table {
-    color: var(--secondary);
-    width: 100%;
-    border-collapse: collapse;
-}
-
-td {
-    /* border: 2px solid var(--tertiary); */
-    border-top: 1px solid var(--tertiary);
-    padding: 1px 0px 1px 10px;
-    font-size: var(--font-size-text);
-    text-align: center;
-}
-
-th {
-    border: 2px solid var(--tertiary);
-    padding: 1px 0px 1px 7px;
-    font-family: var(--font-heading);
-    font-size: var(--font-size-tableheading);
-    background-color: var(--quaternary);
-    text-align: left;
-}
-
-a {
-    text-decoration: none;
-    color: inherit;
-}
-
-a:hover,
-a:visited {
-    color: inherit;
-}
-
-/* Classes */
-/* Cover Navigation (for ease of use) */
-.cover-nav {
-    position: fixed;
-    top: 0.5vh;
-    /* Position the element at the top of the screen */
-    left: 80vw;
-    /* Position the element at the left of the screen */
-    border: 2px solid var(--tertiary);
-    width: 19.5vw;
-    /* Make the element span the width of the screen (optional) */
-    background-color: var(--background);
-    /* Set a background color to avoid overlap issues */
-    z-index: 1000;
-    /* Ensures the element is above other content */
-}
-
-.cover-nav td,
-tr {
-    font-family: var(--font-text);
-    border: 0;
-}
-
-.cover-nav th {
-    text-align: center;
-    align-items: center;
-    border-bottom: 2px solid var(--tertiary);
-}
-
-@media print {
-    .no-print {
-        display: none !important;
-    }
-}
-
-/* Cover letter styling */
-textarea {
-    width: 100%;
-    height: 100%;
-    padding: 10px;
-    box-sizing: border-box;
-    border: 0px solid var(--primary);
-    resize: none;
-    font-family: var(--font-text);
-}
-
-/* Contact At Top of Page */
-.contact {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    border-bottom: 2px solid var(--primary);
-}
-
-.contact-details {
-    display: flex;
-    flex-direction: column;
-    text-align: right;
-}
-
-.contact-details p {
-    margin: 2px 0;
-}
-
-/* Interests and Skills at bottom of page */
-.interests {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    border-top: solid 2px var(--primary);
-}
-
-.interests td,
-tr,
-th {
-    border: 0;
-}
-
-.row-leftalign {
-    /* background-image: url("https://www.fridakahlo.org/assets/img/paintings/without-hope.jpg"); */
-    text-align: left;
-}
+@import url("/css/cv_styles.css");
 </style>