diff --git a/src/App.tsx b/src/App.tsx
index 393d143..d9dade8 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,7 +1,7 @@
-import FeedsPanel from "./FeedsPanel";
-import NavigationBar from "./NavigationBar";
-import SettingsPanel from "./SettingsPanel";
-import useNavigation, { routes } from "./hooks/useNavigation";
+import FeedsPanel from "@/components/FeedsPanel";
+import NavigationBar from "@/components/NavigationBar";
+import SettingsPanel from "@/components/SettingsPanel";
+import useNavigation, { routes } from "@/hooks/useNavigation";
 
 export default function App() {
 	const { location } = useNavigation();
diff --git a/src/FeedsPanel.tsx b/src/components/FeedsPanel.tsx
similarity index 91%
rename from src/FeedsPanel.tsx
rename to src/components/FeedsPanel.tsx
index ba2e3ed..d2a112b 100644
--- a/src/FeedsPanel.tsx
+++ b/src/components/FeedsPanel.tsx
@@ -2,9 +2,9 @@ import Box from "@mui/material/Box";
 import Card from "@mui/material/Card";
 import Typography from "@mui/material/Typography";
 
-import useRSSFeeds from "./hooks/useRSSFeeds";
-import useSettings from "./hooks/useSettings";
-import sortFeedItemsByDate from "./utils";
+import useRSSFeeds from "@/hooks/useRSSFeeds";
+import useSettings from "@/hooks/useSettings";
+import sortFeedItemsByDate from "@/utils";
 
 interface CardProps {
 	title: string;
diff --git a/src/NavigationBar.tsx b/src/components/NavigationBar.tsx
similarity index 94%
rename from src/NavigationBar.tsx
rename to src/components/NavigationBar.tsx
index e012d7b..098cb70 100644
--- a/src/NavigationBar.tsx
+++ b/src/components/NavigationBar.tsx
@@ -3,7 +3,7 @@ import Button from "@mui/material/Button";
 import Toolbar from "@mui/material/Toolbar";
 import Typography from "@mui/material/Typography";
 
-import useNavigation, { routes } from "./hooks/useNavigation";
+import useNavigation, { routes } from "@/hooks/useNavigation";
 
 const title = {
 	flexGrow: 1,
diff --git a/src/SettingsPanel.tsx b/src/components/SettingsPanel.tsx
similarity index 97%
rename from src/SettingsPanel.tsx
rename to src/components/SettingsPanel.tsx
index 3bedcd0..b729a6c 100644
--- a/src/SettingsPanel.tsx
+++ b/src/components/SettingsPanel.tsx
@@ -10,7 +10,7 @@ import { useState } from "react";
 
 import { css } from "@emotion/react";
 
-import useSettings from "./hooks/useSettings";
+import useSettings from "@/hooks/useSettings";
 
 const urlCard = {
 	margin: "5px",
diff --git a/tsconfig.json b/tsconfig.json
index 4efbc70..7573407 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -6,7 +6,10 @@
         "moduleResolution": "node",
         "esModuleInterop": true,
         "skipLibCheck": true,
-        "rootDir": "."
+        "rootDir": ".",
+        "paths": {
+            "@/*": ["./src/*"]
+        }
     },
     "include": ["src/**/*", "netlify/**/*"]
 }