diff --git a/coral/src/main.tsx b/coral/src/main.tsx
index 2fdbc3c95b..82d85e470c 100644
--- a/coral/src/main.tsx
+++ b/coral/src/main.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import App from "./App";
 import "@aivenio/design-system/dist/styles.css";
+import App from "@/App";
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
diff --git a/coral/tsconfig.json b/coral/tsconfig.json
index 3d0a51a86e..b16a9bff58 100644
--- a/coral/tsconfig.json
+++ b/coral/tsconfig.json
@@ -1,5 +1,9 @@
 {
   "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
     "target": "ESNext",
     "useDefineForClassFields": true,
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
diff --git a/coral/vite.config.ts b/coral/vite.config.ts
index 86302e5cc6..307027d698 100644
--- a/coral/vite.config.ts
+++ b/coral/vite.config.ts
@@ -1,7 +1,11 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
+import { resolve } from "path";
 
+const rootPath = resolve(__dirname);
 // https://vitejs.dev/config/
+
+// console.log("rootPath", rootPath);
 export default defineConfig({
   plugins: [react()],
   define: {
@@ -16,4 +20,9 @@ export default defineConfig({
       EXAMPLE: "",
     },
   },
+  resolve: {
+    alias: {
+      "@": resolve(rootPath, "./src"),
+    },
+  },
 });