diff --git a/src/component/bg.svelte b/src/component/bg.svelte
index a325b29..a0df3a1 100644
--- a/src/component/bg.svelte
+++ b/src/component/bg.svelte
@@ -7,15 +7,22 @@
 
   let { darkTheme = $bindable() } = $props();
   let timeScale = 1;
+  let animated = false;
 
   $effect(() => {
     darkTheme;
 
     for (let i = 0; i < gradients.length; i++) {
+      // This re-renders each gradient so their new color will be correct
       let gradient = gradients[i];
       gradient.color = getRandomColor();
       gradient.prepareBuffer();
     }
+
+    if (!animated && ctx) {
+      // Don't try to render if ctx hasn't initialized yet
+      render();
+    }
   });
 
   let particleImages: { [key: string]: HTMLImageElement } = {};
@@ -58,8 +65,13 @@
         return {};
       });
 
+    Promise.all(Object.values(imagePromises)).then(() => {
+      render();
+    });
+
     resize();
     init();
+    render();
     animate();
 
     window.addEventListener("resize", resize);
@@ -70,6 +82,10 @@
     canvas.height = window.innerHeight;
 
     canvasDpiScaler(canvas, ctx);
+
+    if (!animated) {
+      render();
+    }
   }
 
   const clamp = (val: number, min: number, max: number) =>
@@ -190,7 +206,7 @@
       ctx.save();
       // The source images are black, so we are inverting them
       // different amounts to get different shades of gray
-      ctx.filter = darkTheme ? "invert(0.15)" : "invert(0.8)";
+      ctx.filter = darkTheme ? "invert(0.1)" : "invert(0.9)";
 
       // Draw center of rotation
       // ctx.beginPath();
@@ -286,14 +302,14 @@
   }
 
   function init() {
-    /*/
-     * Calculate the proper amount of particles
-     * 25920 is our constant, equal to x in (1080*1920)/x = 80
-     * Because the subjectively correct amount of particles for a 1080p
-     * display is 80, so to calculate the proper amount for any window size,
-     * just do (width * height) / 25920
-    /*/
-    let particleCount = (window.innerWidth * window.innerHeight) / 25920;
+    let isMobile = /Mobile|Android|iPhone/i.test(navigator.userAgent);
+    let particleCount: number;
+    if (isMobile) {
+      particleCount = 25;
+    }
+    else {
+      particleCount = 40;
+    }
 
     particles = [];
     for (let i = 0; i < particleCount; i++) {
@@ -305,7 +321,7 @@
     }
   }
 
-  function animate() {
+  function render() {
     ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
 
     for (let i_gradient = 0; i_gradient < gradients.length; i_gradient++) {
@@ -319,6 +335,12 @@
       particle.update();
       particle.draw();
     }
+  }
+
+  function animate() {
+    if (animated) {
+      render();
+    }
 
     requestAnimationFrame(animate);
   }
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 60677b0..a1dd8fc 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -17,7 +17,7 @@
   let darkTheme = $state(false);
 
   /*/
-   * This is necesarry for pages to read the theme,
+   * This is necessary for pages to read the theme,
    * sucks that we have to use an anonymous function
    * just to grab a variable
   /*/
diff --git a/src/script/cookie.ts b/src/script/cookie.ts
index 534d1f4..6afd0d9 100644
--- a/src/script/cookie.ts
+++ b/src/script/cookie.ts
@@ -1,7 +1,12 @@
 // The magic cookie system is so stupid
 
-export function setCookie(cname: string, cvalue: string) {
-	document.cookie = cname + "=" + cvalue + ";";
+export function setCookie(
+	cname: string,
+	cvalue: string,
+	sameSite: string = "Lax",
+) {
+	document.cookie =
+		cname + "=" + cvalue + ";" + "SameSite" + "=" + sameSite + ";";
 }
 
 // Credit: https://www.w3schools.com/js/js_cookies.asp