diff --git a/biome.json b/biome.json
index 79bf787..59687b5 100644
--- a/biome.json
+++ b/biome.json
@@ -9,7 +9,8 @@
       "recommended": true,
       "correctness": {
         "noUnusedVariables": "error",
-        "useExhaustiveDependencies": "warn"
+        "useExhaustiveDependencies": "warn",
+        "noUnknownFunction": "warn"
       },
       "a11y": {
         "useKeyWithClickEvents": "warn",
diff --git a/bun.lockb b/bun.lockb
index 47db92d..70f927e 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index eeb1726..65dd219 100644
--- a/package.json
+++ b/package.json
@@ -35,7 +35,6 @@
     "immer": "^10.1.1",
     "lucide-react": "^0.428.0",
     "next-themes": "^0.3.0",
-    "prettier": "^3.4.1",
     "react": "^19.0.0-rc-fb9a90fa48-20240614",
     "react-dom": "^19.0.0-rc-fb9a90fa48-20240614",
     "react-ga4": "^2.1.0",
@@ -44,6 +43,7 @@
     "starknet": "^6.11.0",
     "starknetkit": "^2.3.3",
     "tailwind-merge": "^2.5.5",
+    "tailwindcss": "^4.0.0-beta.4",
     "tailwindcss-animate": "^1.0.7",
     "twgl.js": "^5.5.4",
     "use-debounce": "^10.0.4",
@@ -54,7 +54,6 @@
   "devDependencies": {
     "@anthropic-ai/sdk": "^0.32.1",
     "@biomejs/biome": "1.9.4",
-    "@eslint/js": "^9.16.0",
     "@types/bun": "^1.1.14",
     "@types/node": "^22.10.1",
     "@types/react": "npm:types-react@rc",
@@ -63,17 +62,8 @@
     "@vitejs/plugin-react-swc": "^3.7.2",
     "autoprefixer": "^10.4.20",
     "bun": "^1.1.38",
-    "eslint": "^9.16.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-react": "^7.37.2",
-    "eslint-plugin-react-hooks": "^5.1.0-rc-fb9a90fa48-20240614",
-    "eslint-plugin-react-refresh": "^0.4.14",
-    "globals": "^15.12.0",
-    "postcss": "^8.4.49",
-    "slint": "^0.1.0",
-    "tailwindcss": "^4.0.0-beta.4",
+    "globals": "^15.13.0",
     "typescript": "^5.7.2",
-    "typescript-eslint": "^8.16.0",
     "vite": "^5.4.11",
     "vite-plugin-glsl": "^1.3.1",
     "vite-plugin-pwa": "^0.20.5",
diff --git a/src/components/AppList.tsx b/src/components/AppList.tsx
index 0876be9..f25c8da 100644
--- a/src/components/AppList.tsx
+++ b/src/components/AppList.tsx
@@ -16,10 +16,9 @@ const AppList = () => {
     <div className="flex items-center space-x-2">
       {apps.map((app, index) => (
         <div
-          key={app.action}
+          key={app.name}
           className={`${selectedAppIndex === index ? 'bg-white/10' : ''} py-2 px-3 rounded-md cursor-pointer`}
           onClick={() => onSelect(index)}
-          onKeyDown={(e) => e.key === 'Enter' && onSelect(index)}
         >
           {app.icon}
         </div>
diff --git a/src/components/ColorPallette.tsx b/src/components/ColorPallette.tsx
index 1406e6e..32e8b04 100644
--- a/src/components/ColorPallette.tsx
+++ b/src/components/ColorPallette.tsx
@@ -56,7 +56,7 @@ export const ColorPalette = ({
       className={cn(
         'bg-slate-900 fixed mx-auto bottom-1 left-0 right-0 flex items-center justify-center shadow-md transition-all duration-300 ease-in-out rounded-full',
         isOpen
-          ? 'max-w-[340px] px-4 h-[50px]'
+          ? 'max-w-[360px] px-4 h-[50px]'
           : 'w-12 h-12 rounded-full cursor-pointer hover:bg-slate-800'
       )}
       onClick={isOpen ? undefined : () => setIsOpen(true)}
@@ -68,11 +68,11 @@ export const ColorPalette = ({
           isOpen ? 'flex opacity-100 w-[calc(100%-40px)]' : 'hidden opacity-0'
         )}
       >
-        <div className="flex items-center space-x-2 h-full flex-grow">
+        <div className="flex items-center space-x-2 h-full grow">
           {[...customColors, ...COLOR_PALETTE].map((color, index) => (
             <button
               key={index}
-              className={`flex-shrink-0 w-8 h-8 rounded-full ${
+              className={`shrink-0 w-8 h-8 rounded-full ${
                 selectedColor === color ? 'ring-2 ring-black ring-offset-2' : ''
               }`}
               style={{
diff --git a/src/components/CoordinateFinder.tsx b/src/components/CoordinateFinder.tsx
index 13af67e..88582c5 100644
--- a/src/components/CoordinateFinder.tsx
+++ b/src/components/CoordinateFinder.tsx
@@ -24,7 +24,7 @@ const CoordinateFinder = ({
   };
 
   return (
-    <div className="fixed top-[60px] right-4 p-2 lg:p-3 rounded-lg bg-gradient-to-br from-white/50 to-white/30 backdrop-blur-sm shadow-lg">
+    <div className="fixed top-[60px] right-4 p-2 lg:p-3 rounded-lg bg-linear-to-br from-white/50 to-white/30 backdrop-blur-xs shadow-lg">
       <div className="flex items-center space-x-2">
         <label htmlFor="x" className="flex items-center text-white lg:font-semibold text-xs lg:text-base h-full">
           X:
@@ -32,7 +32,7 @@ const CoordinateFinder = ({
             type="number"
             id="x"
             value={localPos.x}
-            className="text-xs rounded-md focus:outline-none focus:border-slate-900 p-1 ml-1 bg-transparent w-fit max-w-[6ch] appearance-none border border-white [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+            className="text-xs rounded-md focus:outline-hidden focus:border-slate-900 p-1 ml-1 bg-transparent w-fit max-w-[6ch] appearance-none border border-white [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
             onChange={(e) => handleInputChange("x", Number(e.target.value) || 0)}
           />
         </label>
@@ -42,7 +42,7 @@ const CoordinateFinder = ({
             type="number"
             id="y"
             value={localPos.y}
-            className="text-xs rounded-md focus:outline-none focus:border-slate-900 p-1 ml-1 bg-transparent w-fit max-w-[6ch] appearance-none border border-white [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+            className="text-xs rounded-md focus:outline-hidden focus:border-slate-900 p-1 ml-1 bg-transparent w-fit max-w-[6ch] appearance-none border border-white [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
             onChange={(e) => handleInputChange("y", Number(e.target.value) || 0)}
           />
         </label>
diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
index 0e5200a..62cd5f2 100644
--- a/src/components/ui/Button.tsx
+++ b/src/components/ui/Button.tsx
@@ -1,47 +1,56 @@
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
 
-import { cn } from "@/utils/index";
+import { cn } from '@/utils/index'
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {
-        default: "h-10 px-4 py-2",
-        sm: "h-9 rounded-md px-3",
-        lg: "h-11 rounded-md px-8",
-        icon: "h-10 w-10",
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
       },
     },
     defaultVariants: {
-      variant: "default",
-      size: "default",
+      variant: 'default',
+      size: 'default',
     },
-  },
-);
+  }
+)
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
+  asChild?: boolean
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button";
-    return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
-  },
-);
-Button.displayName = "Button";
+    const Comp = asChild ? Slot : 'button'
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = 'Button'
 
-export { Button, buttonVariants };
+export { Button, buttonVariants }
diff --git a/src/components/ui/Dialog.tsx b/src/components/ui/Dialog.tsx
index e007b1a..f06a8bd 100644
--- a/src/components/ui/Dialog.tsx
+++ b/src/components/ui/Dialog.tsx
@@ -36,13 +36,13 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:rounded-lg',
         className
       )}
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
diff --git a/src/components/ui/DropDownMenu.tsx b/src/components/ui/DropDownMenu.tsx
index 6ce4dbe..076a0d7 100644
--- a/src/components/ui/DropDownMenu.tsx
+++ b/src/components/ui/DropDownMenu.tsx
@@ -25,7 +25,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent data-[state=open]:bg-accent",
       inset && "pl-8",
       className,
     )}
@@ -79,7 +79,7 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
       inset && "pl-8",
       className,
     )}
@@ -95,7 +95,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
       className,
     )}
     checked={checked}
@@ -118,7 +118,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
       className,
     )}
     {...props}
diff --git a/src/index.css b/src/index.css
index 41bf1cb..db73bd8 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,8 +1,10 @@
-@import url("https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&display=swap');
 
-@import "tailwindcss";
+@import 'tailwindcss';
 @plugin 'tailwindcss-animate';
 
+@variant dark (&:is(.dark *));
+
 @layer base {
   :root {
     --background: 0 0% 100%;
@@ -88,12 +90,9 @@
   --color-card: hsl(var(--card));
   --color-card-foreground: hsl(var(--card-foreground));
 
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
-
-  --font-family-poppins: var(--font-poppins);
-  --font-family-inter: var(--font-inter);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
 
   --animate-accordion-down: accordion-down 0.2s ease-out;
   --animate-accordion-up: accordion-up 0.2s ease-out;
@@ -102,26 +101,52 @@
     from {
       height: 0;
     }
-
     to {
       height: var(--radix-accordion-content-height);
     }
   }
-
   @keyframes accordion-up {
     from {
       height: var(--radix-accordion-content-height);
     }
-
     to {
-      height: "0";
+      height: 0;
     }
   }
 }
 
+@utility container {
+  margin-inline: auto;
+  padding-inline: 2rem;
+  @media (width >= theme(--breakpoint-sm)) {
+    max-width: none;
+  }
+  @media (width >= 1400px) {
+    max-width: 1400px;
+  }
+}
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}
+
 @layer base {
   * {
-    font-family: "Silkscreen", sans-serif;
+    font-family: 'Silkscreen', sans-serif;
     touch-action: pan-x pan-y;
     user-select: none;
     -webkit-user-select: none;