diff --git a/front/src/App.svelte b/front/src/App.svelte
index ef978b5..dd7a050 100644
--- a/front/src/App.svelte
+++ b/front/src/App.svelte
@@ -2,11 +2,9 @@
     import Router from 'svelte-spa-router';
     import { replace, link } from 'svelte-spa-router';
     import active from 'svelte-spa-router/active'
+    import { TwitterLogo, FacebookLogo, InstagramLogo, TiktokLogo } from 'phosphor-svelte';
+
     import routes from '%/routes.js';
-    import TwitterLogo from 'phosphor-svelte/lib/TwitterLogo';
-    import FacebookLogo from 'phosphor-svelte/lib/FacebookLogo';
-    import InstagramLogo from 'phosphor-svelte/lib/InstagramLogo';
-    import TiktokLogo from 'phosphor-svelte/lib/TiktokLogo';
     import Logo from '/LogoAlt.svg';
 
     const links = {
diff --git a/front/src/components/DropDown.svelte b/front/src/components/DropDown.svelte
index a4d8a9e..bd390c1 100644
--- a/front/src/components/DropDown.svelte
+++ b/front/src/components/DropDown.svelte
@@ -1,5 +1,5 @@
 <script>
-    import CaretDown from "phosphor-svelte/lib/CaretDown";
+    import { CaretDown } from "phosphor-svelte";
 
     export let open = false;
     export let name;
diff --git a/front/src/components/MenuItem.svelte b/front/src/components/MenuItem.svelte
index 3fb1c70..12e7254 100644
--- a/front/src/components/MenuItem.svelte
+++ b/front/src/components/MenuItem.svelte
@@ -1,11 +1,7 @@
 <script>
     import { link } from 'svelte-spa-router';
-    import Acorn from 'phosphor-svelte/lib/Acorn';
-    import Fish from 'phosphor-svelte/lib/Fish';
-    import Leaf from 'phosphor-svelte/lib/Leaf';
-    import Pepper from 'phosphor-svelte/lib/Pepper';
-    import ArrowUpRight from 'phosphor-svelte/lib/ArrowUpRight';
-    import GrainsSlash from 'phosphor-svelte/lib/GrainsSlash';
+    import { Acorn, Fish, Leaf, Pepper, ArrowUpRight, GrainsSlash } from 'phosphor-svelte';
+    
     import LoadingImage from '/MenuItemLoadingAlt.svg';
 
     export let id;
diff --git a/front/src/lib/testData.js b/front/src/lib/testData.js
index 21ba179..225d03d 100644
--- a/front/src/lib/testData.js
+++ b/front/src/lib/testData.js
@@ -29,7 +29,7 @@ export default Items = [
     },
     {
         name: "half eaten mouldy bread",
-        price: -9999,
+        price: -99,
         labels: ["nut"],
     },
     {
diff --git a/front/src/pages/Page404.svelte b/front/src/pages/Page404.svelte
index 317c88f..8603b36 100644
--- a/front/src/pages/Page404.svelte
+++ b/front/src/pages/Page404.svelte
@@ -1,5 +1,5 @@
 <script>
-    import SmileySad from "phosphor-svelte/lib/SmileySad";
+    import { SmileySad } from "phosphor-svelte";
 </script>
 
 <div>
diff --git a/front/src/pages/PageContact.svelte b/front/src/pages/PageContact.svelte
index 0389d84..f7cc9d9 100644
--- a/front/src/pages/PageContact.svelte
+++ b/front/src/pages/PageContact.svelte
@@ -1,5 +1,6 @@
 <script>
-    import PaperPlaneRight from "phosphor-svelte/lib/PaperPlaneRight";
+    import { PaperPlaneRight } from "phosphor-svelte";
+
     import DropDown from "%/components/DropDown.svelte";
     import { expandOnTyping } from "%/lib/utils.js";
 
diff --git a/front/src/pages/PageIndex.svelte b/front/src/pages/PageIndex.svelte
index 96698cb..b0e2353 100644
--- a/front/src/pages/PageIndex.svelte
+++ b/front/src/pages/PageIndex.svelte
@@ -2,7 +2,8 @@
     import { onMount } from "svelte";
     import { link } from 'svelte-spa-router';
     import { map, tileLayer, marker } from 'leaflet';
-    import ArrowUpRight from "phosphor-svelte/lib/ArrowUpRight";
+    import { ArrowUpRight } from "phosphor-svelte";
+
     import MenuList from "%/components/MenuList.svelte";
     import { getPopularToday } from "%/lib/api.js";
     import BannerImage from '/BannerExampleImage.jpg';
diff --git a/front/src/pages/PageItem.svelte b/front/src/pages/PageItem.svelte
index ca84e2c..f056617 100644
--- a/front/src/pages/PageItem.svelte
+++ b/front/src/pages/PageItem.svelte
@@ -32,12 +32,6 @@
     <MenuList items={items} />
 </div>
 
-<div class="spacer"></div>
-<div class="other">
-    <h2>Popular</h2>
-    <MenuList items={items} />
-</div>
-
 <style lang="scss">
     @import "%/styles/vars";
 
diff --git a/front/src/pages/PageMenu.svelte b/front/src/pages/PageMenu.svelte
index 1408e47..1149ef5 100644
--- a/front/src/pages/PageMenu.svelte
+++ b/front/src/pages/PageMenu.svelte
@@ -1,5 +1,6 @@
 <script>
-    import ArrowClockwise from "phosphor-svelte/lib/ArrowClockwise";
+    import { ArrowClockwise } from "phosphor-svelte";
+
     import MenuList from "%/components/MenuList.svelte";
     import DropDown from "%/components/DropDown.svelte";
     import { getMenuItems } from "%/lib/api.js";
diff --git a/front/svelte.config.js b/front/svelte.config.js
index b0683fd..d8c1bae 100644
--- a/front/svelte.config.js
+++ b/front/svelte.config.js
@@ -1,7 +1,11 @@
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
+import { phosphorSvelteOptimize } from "phosphor-svelte/preprocessor"
 
 export default {
-  // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
-  // for more information about preprocessors
-  preprocess: vitePreprocess(),
+    // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
+    // for more information about preprocessors
+    preprocess: [
+        phosphorSvelteOptimize(),
+        vitePreprocess()
+    ],
 }
diff --git a/front/vite.config.js b/front/vite.config.js
index a642a9e..41d84d7 100644
--- a/front/vite.config.js
+++ b/front/vite.config.js
@@ -3,10 +3,13 @@ import { svelte } from '@sveltejs/vite-plugin-svelte'
 
 // https://vitejs.dev/config/
 export default defineConfig({
+    base: './',
     plugins: [
         svelte(),
     ],
-    base: './',
+    optimizeDeps: {
+        exclude: ["phosphor-svelte"],
+    },
     resolve: {
         alias: {
             '%': __dirname + '/src',