diff --git a/src/App.tsx b/src/App.tsx
index f7e80a4..905e29a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,16 +1,14 @@
-import { createShapeId, TLUiComponents } from "@tldraw/tldraw";
 import "@tldraw/tldraw/tldraw.css";
-import "./css/style.css"
-import React, { useEffect, useState } from "react";
+import "@/css/style.css"
+import React, { } from "react";
 import ReactDOM from "react-dom/client";
-import { HTMLShape } from "./ts/shapes/HTMLShapeUtil";
-import { Default } from "./ts/components/Default";
-import { Canvas } from "./ts/components/Canvas";
-import { Toggle } from "./ts/components/Toggle";
-import { usePhysics } from "./ts/hooks/usePhysics.ts"
-import { createShapes } from "./utils";
+import { Default } from "@/ts/components/Default";
+import { Canvas } from "@/ts/components/Canvas";
+import { Toggle } from "@/ts/components/Toggle";
+import { usePhysics } from "@/ts/hooks/usePhysics.ts"
+import { createShapes } from "@/utils";
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
-import { Contact } from "./ts/components/Contact.tsx";
+import { Contact } from "@/ts/components/Contact.tsx";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(<App />);
 
diff --git a/src/ts/components/Canvas.tsx b/src/ts/components/Canvas.tsx
index e4c5c80..94fb5f6 100644
--- a/src/ts/components/Canvas.tsx
+++ b/src/ts/components/Canvas.tsx
@@ -1,6 +1,6 @@
 import { Tldraw, TLShape, TLUiComponents } from "@tldraw/tldraw";
-import { SimController } from "../physics/PhysicsControls";
-import { HTMLShapeUtil } from "../shapes/HTMLShapeUtil";
+import { SimController } from "@/ts/physics/PhysicsControls";
+import { HTMLShapeUtil } from "@/ts/shapes/HTMLShapeUtil";
 
 const components: TLUiComponents = {
   HelpMenu: null,
diff --git a/src/ts/components/Toggle.tsx b/src/ts/components/Toggle.tsx
index b1b3833..74f3a0b 100644
--- a/src/ts/components/Toggle.tsx
+++ b/src/ts/components/Toggle.tsx
@@ -2,7 +2,7 @@ export function Toggle() {
   return (
     <>
       <button id="toggle-physics" onClick={() => window.dispatchEvent(new CustomEvent('togglePhysicsEvent'))}>
-        <img src="src/assets/gravity.svg" alt="Toggle Physics" />
+        <img src="assets/gravity.svg" alt="Toggle Physics" />
       </button>
     </>
   );
diff --git a/tsconfig.json b/tsconfig.json
index 54de499..ae3bf28 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,5 +1,10 @@
 {
   "compilerOptions": {
+    "baseUrl": "./src",
+    "paths": {
+      "@/*": ["*"],
+      "src/*": ["./src/*"],
+    },
     "target": "ES2020",
     "useDefineForClassFields": true,
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
@@ -21,5 +26,6 @@
     "noFallthroughCasesInSwitch": true
   },
   "include": ["src"],
+  
   "references": [{ "path": "./tsconfig.node.json" }]
 }
diff --git a/vite.config.ts b/vite.config.ts
index 7726f73..7450621 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -9,4 +9,9 @@ export default defineConfig({
     wasm(),
     topLevelAwait()
   ],
+  resolve: {
+    alias: {
+      '@': '/src',
+    },
+  },
 })