diff --git a/src/app.css b/src/app.css
index 0e2b4b2..65610a7 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,9 +1,14 @@
 @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,600;0,900;1,100;1,500&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;700&display=swap');
 
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
+.fira {
+	font-family: 'Fira Code', monospace;
+}
+
 @font-face {
 	font-family: 'Calderious';
 	src: url('/fonts/CALDERIOUS.ttf');
@@ -70,6 +75,10 @@ hr {
 	text-decoration: underline;
 }
 
+.dotsandlines {
+	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='500' preserveAspectRatio='none' viewBox='0 0 1440 500'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1069%26quot%3b)' fill='none'%3e%3cuse xlink:href='%23SvgjsSymbol1076' x='0' y='0'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsSymbol1076' x='720' y='0'%3e%3c/use%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1069'%3e%3crect width='1440' height='500' fill='white'%3e%3c/rect%3e%3c/mask%3e%3cpath d='M-1 0 a1 1 0 1 0 2 0 a1 1 0 1 0 -2 0z' id='SvgjsPath1073'%3e%3c/path%3e%3cpath d='M-3 0 a3 3 0 1 0 6 0 a3 3 0 1 0 -6 0z' id='SvgjsPath1074'%3e%3c/path%3e%3cpath d='M-5 0 a5 5 0 1 0 10 0 a5 5 0 1 0 -10 0z' id='SvgjsPath1072'%3e%3c/path%3e%3cpath d='M2 -2 L-2 2z' id='SvgjsPath1071'%3e%3c/path%3e%3cpath d='M6 -6 L-6 6z' id='SvgjsPath1070'%3e%3c/path%3e%3cpath d='M30 -30 L-30 30z' id='SvgjsPath1075'%3e%3c/path%3e%3c/defs%3e%3csymbol id='SvgjsSymbol1076'%3e%3cuse xlink:href='%23SvgjsPath1070' x='30' y='30' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1070' x='30' y='90' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1070' x='30' y='150' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1071' x='30' y='210' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1072' x='30' y='270' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1073' x='30' y='330' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1070' x='30' y='390' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1070' x='30' y='450' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1070' x='30' y='510' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1072' x='90' y='30' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1070' x='90' y='90' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1070' x='90' y='150' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1072' x='90' y='210' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1070' x='90' y='270' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1071' x='90' y='330' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1072' x='90' y='390' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1074' x='90' y='450' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1072' x='90' y='510' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1074' x='150' y='30' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1071' x='150' y='90' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1074' x='150' y='150' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1074' x='150' y='210' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1072' x='150' y='270' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1072' x='150' y='330' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1075' x='150' y='390' stroke='rgba(4%2c 125%2c 255%2c 0.1)' stroke-width='3'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1074' x='150' y='450' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1072' x='150' y='510' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1074' x='210' y='30' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1070' x='210' y='90' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1070' x='210' y='150' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1072' x='210' y='210' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1072' x='210' y='270' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1070' x='210' y='330' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1070' x='210' y='390' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1073' x='210' y='450' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1070' x='210' y='510' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1072' x='270' y='30' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1070' x='270' y='90' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1070' x='270' y='150' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1070' x='270' y='210' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1072' x='270' y='270' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1072' x='270' y='330' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1070' x='270' y='390' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1072' x='270' y='450' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1073' x='270' y='510' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1070' x='330' y='30' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1070' x='330' y='90' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1072' x='330' y='150' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1072' x='330' y='210' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1072' x='330' y='270' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1070' x='330' y='330' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1071' x='330' y='390' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1070' x='330' y='450' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1072' x='330' y='510' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1070' x='390' y='30' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1072' x='390' y='90' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1074' x='390' y='150' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1073' x='390' y='210' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1072' x='390' y='270' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1073' x='390' y='330' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1072' x='390' y='390' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1073' x='390' y='450' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1072' x='390' y='510' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1073' x='450' y='30' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1070' x='450' y='90' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1070' x='450' y='150' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1071' x='450' y='210' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1071' x='450' y='270' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1072' x='450' y='330' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1070' x='450' y='390' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1070' x='450' y='450' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1070' x='450' y='510' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1074' x='510' y='30' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1070' x='510' y='90' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1072' x='510' y='150' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1074' x='510' y='210' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1070' x='510' y='270' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1075' x='510' y='330' stroke='rgba(4%2c 125%2c 255%2c 0.1)' stroke-width='3'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1070' x='510' y='390' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1070' x='510' y='450' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1071' x='510' y='510' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1070' x='570' y='30' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1071' x='570' y='90' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1070' x='570' y='150' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1071' x='570' y='210' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1071' x='570' y='270' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1072' x='570' y='330' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1073' x='570' y='390' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1074' x='570' y='450' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1073' x='570' y='510' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1070' x='630' y='30' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1072' x='630' y='90' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1074' x='630' y='150' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1070' x='630' y='210' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1072' x='630' y='270' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1072' x='630' y='330' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1071' x='630' y='390' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1073' x='630' y='450' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1070' x='630' y='510' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1073' x='690' y='30' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1072' x='690' y='90' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1070' x='690' y='150' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1070' x='690' y='210' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1070' x='690' y='270' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1074' x='690' y='330' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1070' x='690' y='390' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1070' x='690' y='450' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1070' x='690' y='510' stroke='rgba(4%2c 125%2c 255%2c 0.1)'%3e%3c/use%3e%3c/symbol%3e%3c/svg%3e");
+}
+
 .backg {
 	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1000' height='4000' preserveAspectRatio='none' viewBox='0 0 1000 4000'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1072%26quot%3b)' fill='none'%3e%3crect width='1000' height='4000' x='0' y='0' fill='rgba(243%2c 244%2c 246%2c 1)'%3e%3c/rect%3e%3cpath d='M322.6957896427178 1012.5715450325381L159.95270018013207 831.4802616486547 90.66067255486604 1032.718922014166z' fill='rgba(191%2c 219%2c 254%2c 0.2)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M568.244%2c2832.447C600.696%2c2831.035%2c623.882%2c2804.839%2c640.036%2c2776.658C656.077%2c2748.674%2c666.422%2c2715.736%2c651.553%2c2687.111C635.664%2c2656.521%2c602.709%2c2637.839%2c568.244%2c2638.445C534.739%2c2639.034%2c506.581%2c2660.915%2c489.857%2c2689.953C473.168%2c2718.931%2c468.634%2c2754.115%2c484.752%2c2783.414C501.425%2c2813.724%2c533.684%2c2833.951%2c568.244%2c2832.447' fill='rgba(191%2c 219%2c 254%2c 0.2)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M1141.982840070039 223.15446202120583L1055.7248183090524 19.943297384308806 852.5136536721552 106.20131914529551 938.7716754331419 309.41248378219257z' fill='rgba(191%2c 219%2c 254%2c 0.2)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M258.5889060127539 281.35918881629607L147.05790512748686 109.61650817390006-24.68477551490912 221.1475090591671 86.8462253703579 392.89018970156314z' fill='rgba(191%2c 219%2c 254%2c 0.2)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M484.05 2086.43 a172.61 172.61 0 1 0 345.22 0 a172.61 172.61 0 1 0 -345.22 0z' fill='rgba(191%2c 219%2c 254%2c 0.2)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M228.80454984414283 1290.2062106934764L398.1407448763988 1254.3813294449294 298.8771207482494 1140.1915922616452z' fill='rgba(191%2c 219%2c 254%2c 0.2)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M173.813%2c3765.279C235.301%2c3769.971%2c305.139%2c3758.098%2c335.296%2c3704.308C365.065%2c3651.209%2c333.276%2c3589.283%2c301.64%2c3537.276C271.685%2c3488.033%2c231.449%2c3439.325%2c173.813%2c3438.846C115.572%2c3438.362%2c68.631%2c3483.193%2c42.255%2c3535.121C18.37%2c3582.145%2c23.858%2c3636.753%2c50.031%2c3682.542C76.428%2c3728.722%2c120.775%2c3761.232%2c173.813%2c3765.279' fill='rgba(191%2c 219%2c 254%2c 0.2)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M980.126%2c1915.224C1071.263%2c1916.123%2c1126.54%2c1823.516%2c1167.489%2c1742.092C1203.379%2c1670.727%2c1217.733%2c1588.948%2c1179.479%2c1518.821C1139.652%2c1445.809%2c1063.256%2c1396.092%2c980.126%2c1398.617C900.644%2c1401.031%2c838.094%2c1460.149%2c800.702%2c1530.328C765.735%2c1595.955%2c767.637%2c1671.061%2c799.055%2c1738.459C837.252%2c1820.398%2c889.725%2c1914.333%2c980.126%2c1915.224' fill='rgba(191%2c 219%2c 254%2c 0.2)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M405.1853855765305 346.8608745257303L328.1984935445406 678.8837825568656 614.5972264875737 596.7602673982816z' fill='rgba(191%2c 219%2c 254%2c 0.2)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M957.4302400556646 3480.210793484157L1005.7179870853452 3253.034804889443 730.2542514609507 3431.9230464544767z' fill='rgba(191%2c 219%2c 254%2c 0.2)' class='triangle-float3'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1072'%3e%3crect width='1000' height='4000' fill='white'%3e%3c/rect%3e%3c/mask%3e%3cstyle%3e %40keyframes float1 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-10px%2c 0)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float1 %7b animation: float1 5s infinite%3b %7d %40keyframes float2 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-5px%2c -5px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float2 %7b animation: float2 4s infinite%3b %7d %40keyframes float3 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(0%2c -10px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float3 %7b animation: float3 6s infinite%3b %7d %3c/style%3e%3c/defs%3e%3c/svg%3e");
 }
diff --git a/src/lib/header/Nav.svelte b/src/lib/header/Nav.svelte
index 53917fb..e67cb5c 100644
--- a/src/lib/header/Nav.svelte
+++ b/src/lib/header/Nav.svelte
@@ -19,7 +19,8 @@
 			<NavButton url="/#blog" text="Blog" />
 			<NavButton url="/#portfolio" text="Portfolio" />
 			<NavButton url="/#about" text="About" />
-			<NavButton url="/#vr" text="Virtual Reality" />
+			<NavButton url="/#vr" text="VR" />
+			<NavButton url="/#furry" text="Furry" />
 			<NavButton url="/#contact" text="Contact" />
 		</div>
 	</div>
@@ -32,7 +33,8 @@
 			<NavButton url="/#blog" text="Blog" />
 			<NavButton url="/#portfolio" text="Portfolio" />
 			<NavButton url="/#about" text="About" />
-			<NavButton url="/#vr" text="Virtual Reality" />
+			<NavButton url="/#vr" text="VR" />
+			<NavButton url="/#furry" text="Furry" />
 			<NavButton url="/#contact" text="Contact" />
 			<hr class="bg-white" />
 			<ThemeSwitcher />
diff --git a/src/lib/home/Blog.svelte b/src/lib/home/Blog.svelte
index 0f18101..a9e6f7d 100644
--- a/src/lib/home/Blog.svelte
+++ b/src/lib/home/Blog.svelte
@@ -40,10 +40,11 @@
 
     onMount(() => {
         if(browser) {
-            const slider: HTMLElement = document.querySelector('.items');
+            const slider: HTMLElement = document.querySelector('.items-blog');
             let isDown = false;
             let startX;
             let scrollLeft;
+            let lastKnownScrollLeft;
 
             slider.addEventListener('mousedown', (e) => {
                 isDown = true;
@@ -68,8 +69,9 @@
                 console.log(walk);
             });
             slider.addEventListener('wheel', (evt) => {
-                evt.preventDefault();
                 slider.scrollLeft += evt.deltaY;
+                if(slider.scrollLeft != lastKnownScrollLeft) evt.preventDefault();
+                lastKnownScrollLeft = slider.scrollLeft;
             });
         }
     });
@@ -90,7 +92,7 @@
             {#if posts.length == 1}
                 <p class="p-10 text-sm opacity-50">No more posts to show...</p>
             {:else}
-                <div class="grid grid-flow-col grid-rows-2 grid-cols-[repeat(12, 400px)] w-full gap-5 overflow-x-scroll pb-5 scrollbar scrollbar-thumb-white dark:scrollbar-thumb-black scrollbar-h-3 scrollbar-track-transparent scrollbar-thumb-rounded-full items">
+                <div class="grid grid-flow-col grid-rows-2 grid-cols-[repeat(12, 400px)] w-full gap-5 overflow-x-scroll pb-5 scrollbar scrollbar-thumb-white dark:scrollbar-thumb-black scrollbar-h-3 scrollbar-track-transparent scrollbar-thumb-rounded-full items-blog">
                     {#each posts as post, key}
                         {#if key != 0}
                             <Preview url={post.url} title={post.title} date={post.date} image={post.image} featured={false} isNew={post.isNew} />
diff --git a/src/lib/home/Furry.svelte b/src/lib/home/Furry.svelte
new file mode 100644
index 0000000..062b67b
--- /dev/null
+++ b/src/lib/home/Furry.svelte
@@ -0,0 +1,75 @@
+<script lang="ts">
+	import { browser } from "$app/env";
+	import { onMount } from "svelte";
+
+    onMount(() => {
+        if(browser) {
+            const slider: HTMLElement = document.querySelector('.items');
+            let isDown = false;
+            let startX;
+            let scrollLeft;
+            let lastKnownScrollLeft;
+
+            slider.addEventListener('mousedown', (e) => {
+                isDown = true;
+                slider.classList.add('active');
+                startX = e.pageX - slider.offsetLeft;
+                scrollLeft = slider.scrollLeft;
+            });
+            slider.addEventListener('mouseleave', () => {
+                isDown = false;
+                slider.classList.remove('active');
+            });
+            slider.addEventListener('mouseup', () => {
+                isDown = false;
+                slider.classList.remove('active');
+            });
+            slider.addEventListener('mousemove', (e) => {
+                if(!isDown) return;
+                e.preventDefault();
+                const x = e.pageX - slider.offsetLeft;
+                const walk = (x - startX) * 1; //scroll-fast
+                slider.scrollLeft = scrollLeft - walk;
+                console.log(walk);
+            });
+            slider.addEventListener('wheel', (evt) => {
+                slider.scrollLeft += evt.deltaY;
+                if(slider.scrollLeft != lastKnownScrollLeft) evt.preventDefault();
+                lastKnownScrollLeft = slider.scrollLeft;
+            });
+        }
+    });
+</script>
+
+<main class="flex flex-col gap-20 relative @container">
+    <div class="absolute top-0 -mt-40" id="furry"></div>
+
+	<div class="flex flex-col gap-10">
+        <h3 class="whitepigeon text-blue-600 text-center -rotate-3 font-bold text-6xl @2xl:text-8xl">Party animal</h3>
+
+        <p class="text-center opacity-80 text-xl max-w-6xl mx-auto">
+            Being a furry is a big part of my life, and my most expensive hobby.
+            Furries are people who really like the cartoon animals from shows and movies, and come together to celebrate the creativity of human individuals.
+            I created several characters that I use to express myself, one of which is the black cat on this website called Mid.
+            Below are some of my adventures as a furry with the people I love being around.
+        </p>
+
+        <div class="flex gap-5 overflow-x-auto p-10 scrollbar scrollbar-thumb-white dark:scrollbar-thumb-black scrollbar-h-3 scrollbar-track-transparent scrollbar-thumb-rounded-full items">
+            <img src="/homepage/furry/2.jpg" class="rounded-xl shadow-xl h-[60vh]" alt="ended" />
+            <img src="/homepage/furry/3.jpg" class="rounded-xl shadow-xl h-[60vh]" alt="ended" />
+            <video class="rounded-xl shadow-xl h-[60vh]" controls autoplay muted loop height="60vh" width="auto">
+                <source src="/homepage/furry/4.mp4" type="video/mp4">
+                    Your browser does not support the video tag.
+            </video>
+            <img src="/homepage/furry/6.jpg" class="rounded-xl shadow-xl h-[60vh]" alt="ended" />
+            <video class="rounded-xl shadow-xl h-[60vh]" controls autoplay muted loop height="60vh" width="auto">
+                <source src="/homepage/furry/5.mp4" type="video/mp4">
+                    Your browser does not support the video tag.
+            </video>
+            <video class="rounded-xl shadow-xl h-[60vh]" controls autoplay muted loop height="60vh" width="auto">
+                <source src="/homepage/furry/7.mp4" type="video/mp4">
+                    Your browser does not support the video tag.
+            </video>
+        </div>
+    </div>
+</main>
\ No newline at end of file
diff --git a/src/lib/home/Portfolio.svelte b/src/lib/home/Portfolio.svelte
index 3c9ce8c..e473120 100644
--- a/src/lib/home/Portfolio.svelte
+++ b/src/lib/home/Portfolio.svelte
@@ -301,9 +301,6 @@
                         {/each}
                     </div>
                 </div>
-                <i class="text-gray-800 dark:text-gray-100 text-sm">
-                    Specialties marked in bold.
-                </i>
             </Card>
         </div>
     </div>
diff --git a/src/lib/home/Sona.svelte b/src/lib/home/Sona.svelte
index 9cc523f..3947246 100644
--- a/src/lib/home/Sona.svelte
+++ b/src/lib/home/Sona.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 	import Card from "./Card.svelte";
 
 	function calculateAge(birthday) { // birthday is a date
@@ -8,65 +8,89 @@
 	}
 </script>
 
-<main class="@container container flex flex-col gap-20 relative">
+<main class="flex flex-col gap-10 lg:gap-20 container relative fira">
 	<div class="absolute top-0 -mt-40" id="about"></div>
 
-	<section class="grid grid-cols-1 @6xl:grid-cols-4 px-5 gap-5">
-		<div class="@6xl:col-span-2 p-5 flex flex-col gap-10">
-			<h3 class="whitepigeon text-blue-600 font-bold text-4xl @2xl:text-6xl">About me</h3>
-			<h4 class="font-normal text-lg">
-				Hello, I'm Pascal, but my internet name is Mid. Nice to have you here on my website! I'm a {calculateAge(new Date("2001-10-30"))} year old programmer and tech enthusiast from The Netherlands.
-				If you want to know a little more about me, here are some details. :)
-			</h4>
-		</div>
+    <h3 class="flex gap-5 lg:gap-10 items-end">
+        <span class="text-3xl lg:text-8xl text-blue-500 font-bold"><b>$</b>about_me</span>
+		<span class="text-lg lg:text-4xl font-extrabold">== "over mij"</span>
+    </h3>
+    <div class="grid lg:grid-cols-5 gap-5">
+		<div class="lg:col-span-3 flex flex-col gap-5">
+			<div class="flex flex-wrap gap-2 bg-black bg-opacity-5 dark:bg-opacity-50 p-5">
+				<p class="text-lg">
+					Hey there! I'm Pascal, but my internet name is Mid. Nice to have you here on my website. I'm a {calculateAge(new Date("2001-10-30"))} year old programmer and tech enthusiast from The Netherlands. If you want to know a little more about me, here are some of the things I like to do. For my past experience and portfolio, you can go <a href="#portfolio" class="a">here</a>.
+				</p>
+			</div>
 
-		<img src="/homepage/sona/pink.png" class="rounded-xl object-cover @6xl:aspect-square" alt="fursona" />
+			<hr class="lg:block hidden opacity-20 w-1/2 mx-auto my-5"/>
 
-		<img src="/homepage/sona/MidFingers.jpg" class="rounded-xl object-cover @6xl:aspect-square" alt="fursona"/>
+			<div class="flex flex-col gap-5 relative text-sm p-5 border-black border-opacity-10 dark:border-opacity-40 border-4">
+				<span id="about-computers" class="absolute top-0 -mt-40"></span>
 
-		<img src="/homepage/proxmox.png" class="rounded-xl @6xl:col-span-2" alt="proxmox environment" />
+				<h4 class="text-lg font-bold">🖥 Computers</h4>
 
-		<span class="@6xl:col-span-2 flex flex-col gap-2">
-			<Card>
-				<b class="text-xl">🖥 Computer tech</b>
 				<p>
 					I love everything tech, as was probably obvious. But it goes beyond creating software.
 					I also built my own computer, and like to maintain hardware. At home I run a server rack equipped with a few Dell processing servers, doing my own research and hosting webservers, bots, multiplayer games and more using software like TrueNAS, Proxmox and Linux.
 					<br/><br/>
 					I daily-drive Linux as my operating systems out of a passion for FOSS and often tinker around with things like RAID and backups and getting all my favorite games to run.
 				</p>
-			</Card>
-		</span>
 
-		<img src="/homepage/sona/martin.png" class="rounded-xl object-cover @6xl:aspect-square" alt="fursona" />
+				<img src="/homepage/proxmox.png" alt="proxmox environment" />
+			</div>
 
-		<img src="/homepage/sona/koffie.png" class="rounded-xl object-cover @6xl:aspect-square w-full" alt="fursona" />
+			<div class="flex flex-col gap-5 relative text-sm p-5 border-black border-opacity-10 dark:border-opacity-40 border-4">
+				<span id="about-furry" class="absolute top-0 -mt-40"></span>
 
-		<img src="/homepage/sona/vr.png" class="@6xl:col-span-2 @6xl:row-span-3 rounded-xl object-cover h-full" alt="fursona" />
-
-		<span class="@6xl:col-span-2">
-			<Card>
-				<b class="text-xl">🦊 Furry fandom</b>
+				<h4 class="text-lg font-bold">🦊 Furry</h4>
 
 				<p>
-					Being a furry is an important hobby and a creative outlet for me. In the digital world I express myself as Mid, he is an anthropomorphic cat with black fur and blue hair and some unusually large whiskers, and he's my main character. You'll see Mid in some places on this website. There are also Martin the pine marten, Seffy the protogen, Koffie the rexouium and many more.
+					Being a furry is an important hobby and a creative outlet for me. In the digital world I express myself as Mid, an anthropomorphic cat with black fur and blue hair. You'll see him in some places on this website. There are also Martin the pine marten, Seffy the protogen, Koffie the rexouium and many more.
+					<!-- For more on my fluffy side, there's a section detailing my various characters <a href="#furry" class="a">here</a>. -->
 				</p>
-			</Card>
-		</span>
+			</div>
+
+			<div class="flex flex-col gap-5 relative text-sm p-5 border-black border-opacity-10 dark:border-opacity-40 border-4">
+				<span id="about-drones" class="absolute top-0 -mt-40"></span>
 
-		<img src="/homepage/sona/car.jpeg" class="rounded-xl object-cover @6xl:aspect-[3/2] @6xl:col-span-2" alt="car image" />
+				<h4 class="text-lg font-bold">🛩️ Drones</h4>
 
-		<img src="/homepage/drone.jpeg" class="rounded-xl object-cover @6xl:aspect-[2/1] @6xl:col-span-2" alt="drone shot" />
+				<p>
+					I like to go out there and make drone videos and pictures with my DJI drones, enjoying nature outdoors and capturing its beauty. More recently I've made some videos for Allroadevents.nl during a few offroading trips.
+				</p>
 
-		<Card>
-			<b class="text-xl">🛩️ Drones</b>
-			<p>
-				I like to go out there and make drone videos and pictures with my DJI drones, enjoying nature outdoors and capturing its beauty.
-				<br/><br/>
-				More recently I've made some videos for Allroadevents.nl during a few offroading trips.
-			</p>
-		</Card>
+				<div class="grid grid-cols-2 gap-1">
+					<img src="/homepage/drone.jpeg" class="object-cover @6xl:aspect-[2/1]" alt="drone shot" />
+					<img src="/homepage/drone2.jpeg" class="object-cover @6xl:aspect-[2/1]" alt="drone shot" />
+				</div>
+			</div>
+		</div>
 
-		<img src="/homepage/drone2.jpeg" class="rounded-xl h-full object-cover" alt="drone shot" />
-	</section>
+		<div class="mt-5 lg:mt-0 lg:col-span-2 flex flex-col gap-5">
+			<div class="flex flex-col gap-1 text-sm p-5 border-black border-opacity-20 dark:border-opacity-60 border-dashed border-4">
+				<h4 class="-mt-12 lg:-mt-16 lg:text-lg bg-gray-200 dark:bg-gray-800 -mx-2 text-blue-500">
+					<b>////////////////////////////////////////</b><br/>
+					<b>//</b> user details<br/>
+					<b>////////////////////////////////////////</b>
+				</h4>
+
+				<span class="h-2"></span>
+				<span>&lt;age&gt; <bold class="font-bold text-base">{calculateAge(new Date("2001-10-30"))}</bold> &lt;/age&gt;</span>
+				<span>&lt;pronouns&gt; <bold class="font-bold lg:text-base">he / him</bold> &lt;/pronouns&gt;</span>
+				<span>&lt;profession&gt; <bold class="font-bold lg:text-base">software engineer</bold> &lt;/profession&gt;</span>
+				<span>&lt;nationality&gt; <bold class="font-bold lg:text-base">dutch 🇳🇱</bold> &lt;/nationality&gt;</span>
+				<span class="h-5"></span>
+				<span>&lt;hobby&gt; <bold class="font-bold lg:text-base">coding</bold> &lt;/hobby&gt;</span>
+				<a href="#about-computers" class="group">&lt;hobby&gt; <bold class="font-bold lg:text-base group-hover:underline text-[#2563EB]">computers</bold> &lt;/hobby&gt;</a>
+				<a href="#about-furry" class="group">&lt;hobby&gt; <bold class="font-bold lg:text-base group-hover:underline text-[#2563EB]">furry</bold> &lt;/hobby&gt;</a>
+				<span class="h-5"></span>
+				<span>&lt;favorite&gt; <bold class="font-bold lg:text-base">coffee</bold> &lt;/favorite&gt;</span>
+				<a href="#about-drones" class="group">&lt;favorite&gt; <bold class="font-bold lg:text-base group-hover:underline text-[#2563EB]">drones</bold> &lt;/favorite&gt;</a>
+				<span>&lt;favorite&gt; <bold class="font-bold lg:text-base">3D printing</bold> &lt;/favorite&gt;</span>
+			</div>
+
+			<img src="/homepage/sona/peaceful.png" alt="fursona" />
+		</div>
+    </div>
 </main>
\ No newline at end of file
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 8863c87..62297a6 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,12 +1,10 @@
 <script>
 	import Banner from "$lib/home/Banner.svelte";
 	import Blog from "$lib/home/Blog.svelte";
-	import Card from "$lib/home/Card.svelte";
-	import Form from "$lib/home/Form.svelte";
 	import Portfolio from "$lib/home/Portfolio.svelte";
-	import Quote from "$lib/home/Quote.svelte";
 	import Sona from "$lib/home/Sona.svelte";
 	import Virtual from "$lib/home/Virtual.svelte";
+	import Furry from "$lib/home/Furry.svelte";
 </script>
 
 <svelte:head>
@@ -17,7 +15,7 @@
 	<Banner />
 
 	<section class="flex flex-col">
-		<div class="bg-gradient-to-br bg-gray-200 dark:bg-gray-800 py-20">
+		<div class="bg-gray-200 dark:bg-gray-800 py-20">
 			<Blog/>
 		</div>
 
@@ -25,15 +23,27 @@
 		<svg class="dark:hidden block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#e5e7eb" fill-opacity="1" d="M0,224L48,186.7C96,149,192,75,288,69.3C384,64,480,128,576,133.3C672,139,768,85,864,101.3C960,117,1056,203,1152,234.7C1248,267,1344,245,1392,234.7L1440,224L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"></path></svg>
 	</section>
 
-	<div class="backg flex flex-col gap-40 pb-40 bg-top bg-cover">
+	<div class="flex flex-col gap-40 pb-40">
 		<Portfolio/>
 
-		<hr class="container opacity-10 mx-auto w-1/2"/>
+		<div class="flex flex-col">
+			<img class="dark:hidden block scale-150 lg:scale-100" src="/homepage/aboutwhite.svg" />
+			<img class="hidden dark:block scale-150 lg:scale-100" src="/homepage/aboutdark.svg" />
 
-		<Sona/>
+			<div class="bg-gray-200 dark:bg-gray-800 py-20 lg:-mt-20">
+				<Sona/>
+			</div>
 
-		<hr class="container opacity-10 mx-auto w-1/2"/>
+			<img class="dark:hidden block rotate-180 lg:-mt-10 scale-150 lg:scale-100" src="/homepage/aboutwhite.svg" />
+			<img class="hidden dark:block rotate-180 lg:-mt-10 scale-150 lg:scale-100" src="/homepage/aboutdark.svg" />
+		</div>
+
+		<div class="bg-repeat-y bg-contain dotsandlines">
+			<Virtual/>
+		</div>
+
+		<!-- <hr class="container opacity-10 mx-auto w-1/2"/>
 
-		<Virtual/>
+		<Furry/> -->
 	</div>
 </main>
\ No newline at end of file
diff --git a/static/homepage/aboutdark.svg b/static/homepage/aboutdark.svg
new file mode 100644
index 0000000..94b1e03
--- /dev/null
+++ b/static/homepage/aboutdark.svg
@@ -0,0 +1 @@
+<svg id="visual" viewBox="0 0 1440 200" width="1440" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><path d="M0 128L80 128L80 78L160 78L160 82L240 82L240 101L320 101L320 139L400 139L400 62L480 62L480 121L560 121L560 80L640 80L640 63L720 63L720 62L800 62L800 125L880 125L880 60L960 60L960 86L1040 86L1040 125L1120 125L1120 94L1200 94L1200 106L1280 106L1280 136L1360 136L1360 97L1440 97L1440 60L1440 201L1440 201L1360 201L1360 201L1280 201L1280 201L1200 201L1200 201L1120 201L1120 201L1040 201L1040 201L960 201L960 201L880 201L880 201L800 201L800 201L720 201L720 201L640 201L640 201L560 201L560 201L480 201L480 201L400 201L400 201L320 201L320 201L240 201L240 201L160 201L160 201L80 201L80 201L0 201Z" fill="#1f2937"></path></svg>
\ No newline at end of file
diff --git a/static/homepage/aboutwhite.svg b/static/homepage/aboutwhite.svg
new file mode 100644
index 0000000..ae9ccc2
--- /dev/null
+++ b/static/homepage/aboutwhite.svg
@@ -0,0 +1 @@
+<svg id="visual" viewBox="0 0 1080 200" width="1080" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><path d="M0 75L60 75L60 129L120 129L120 64L180 64L180 107L240 107L240 91L300 91L300 73L360 73L360 113L420 113L420 138L480 138L480 87L540 87L540 102L600 102L600 90L660 90L660 68L720 68L720 108L780 108L780 65L840 65L840 84L900 84L900 63L960 63L960 118L1020 118L1020 111L1080 111L1080 83L1080 201L1080 201L1020 201L1020 201L960 201L960 201L900 201L900 201L840 201L840 201L780 201L780 201L720 201L720 201L660 201L660 201L600 201L600 201L540 201L540 201L480 201L480 201L420 201L420 201L360 201L360 201L300 201L300 201L240 201L240 201L180 201L180 201L120 201L120 201L60 201L60 201L0 201Z" fill="#E5E7EB"></path></svg>
\ No newline at end of file
diff --git a/static/homepage/furry/2.jpg b/static/homepage/furry/2.jpg
new file mode 100644
index 0000000..9265391
Binary files /dev/null and b/static/homepage/furry/2.jpg differ
diff --git a/static/homepage/furry/3.jpg b/static/homepage/furry/3.jpg
new file mode 100644
index 0000000..50bf9aa
Binary files /dev/null and b/static/homepage/furry/3.jpg differ
diff --git a/static/homepage/furry/4.mp4 b/static/homepage/furry/4.mp4
new file mode 100644
index 0000000..d811cb5
Binary files /dev/null and b/static/homepage/furry/4.mp4 differ
diff --git a/static/homepage/furry/5.mp4 b/static/homepage/furry/5.mp4
new file mode 100644
index 0000000..1656e0b
Binary files /dev/null and b/static/homepage/furry/5.mp4 differ
diff --git a/static/homepage/furry/6.jpg b/static/homepage/furry/6.jpg
new file mode 100644
index 0000000..d9cb314
Binary files /dev/null and b/static/homepage/furry/6.jpg differ
diff --git a/static/homepage/furry/7.mp4 b/static/homepage/furry/7.mp4
new file mode 100644
index 0000000..28f14b7
Binary files /dev/null and b/static/homepage/furry/7.mp4 differ
diff --git a/static/homepage/sona/hai.png b/static/homepage/sona/hai.png
new file mode 100644
index 0000000..5d6584b
Binary files /dev/null and b/static/homepage/sona/hai.png differ
diff --git a/static/homepage/sona/peaceful.png b/static/homepage/sona/peaceful.png
new file mode 100644
index 0000000..448c701
Binary files /dev/null and b/static/homepage/sona/peaceful.png differ
diff --git a/static/homepage/vr/vr.png b/static/homepage/vr/vr.png
index 984d8c6..86bcc3b 100644
Binary files a/static/homepage/vr/vr.png and b/static/homepage/vr/vr.png differ