diff --git a/package-lock.json b/package-lock.json
index d9f194d6..b4641d82 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,7 @@
         "framer-motion": "^11.3.17",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-router-dom": "^6.26.1",
         "tailwindcss": "^3.4.7",
         "typescript": "^5.3.3"
       },
@@ -1052,6 +1053,15 @@
         "node": ">=14"
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.19.1",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.1.tgz",
+      "integrity": "sha512-S45oynt/WH19bHbIXjtli6QmwNYvaz+vtnubvNpNDvUOoA/OWh6j1OikIP3G+v5GHdxyC6EXoChG3HgYGEUfcg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rollup/rollup-darwin-arm64": {
       "version": "4.9.6",
       "cpu": [
@@ -5948,6 +5958,38 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.26.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.1.tgz",
+      "integrity": "sha512-kIwJveZNwp7teQRI5QmwWo39A5bXRyqpH0COKKmPnyD2vBvDwgFXSqDUYtt1h+FEyfnE8eXr7oe0MxRzVwCcvQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.19.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.26.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.26.1.tgz",
+      "integrity": "sha512-veut7m41S1fLql4pLhxeSW3jlqs+4MtjRLj0xvuCEXsxusJCbs6I8yn9BxzzDX2XDgafrccY6hwjmd/bL54tFw==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.19.1",
+        "react-router": "6.26.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "license": "MIT",
diff --git a/package.json b/package.json
index be46e271..49c4d2ac 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "framer-motion": "^11.3.17",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.1",
     "tailwindcss": "^3.4.7",
     "typescript": "^5.3.3"
   },
diff --git a/src/App.tsx b/src/App.tsx
new file mode 100644
index 00000000..c0cb3af4
--- /dev/null
+++ b/src/App.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Outlet, RouterProvider, createBrowserRouter } from 'react-router-dom';
+
+import Nav from '@components/Nav';
+import BorrowPage from '@pages/borrow/BorrowPage';
+import LandingPage from '@pages/landing/LandingPage';
+import LendPage from '@pages/lend/LendPage';
+import LiquidatePage from '@pages/liquidate/LiquidatePage';
+
+const PageWrapper = () => (
+  <>
+    <Nav />
+    <main className="max-w-screen w-256">
+      <Outlet />
+    </main>
+  </>
+);
+
+const router = createBrowserRouter([
+  {
+    element: <PageWrapper />,
+    children: [
+      { path: '', element: <LandingPage /> },
+      { path: 'lend', element: <LendPage /> },
+      { path: 'borrow', element: <BorrowPage /> },
+      { path: 'liquidate', element: <LiquidatePage /> },
+    ],
+  },
+]);
+
+const App = () => {
+  return (
+    <React.StrictMode>
+      <RouterProvider router={router} />
+    </React.StrictMode>
+  );
+};
+
+export default App;
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 5b619639..8893fa95 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -1,4 +1,5 @@
 import type { PropsWithChildren } from 'react';
+import { Link } from 'react-router-dom';
 
 export interface ButtonProps {
   onClick: () => void;
@@ -20,15 +21,15 @@ export const SelectButtonWrapper = ({ children }: PropsWithChildren) => (
 );
 
 export interface SelectLinkButtonProps {
-  href: string;
+  to: string;
   selected: boolean;
 }
 
-export const SelectLinkButton = ({ href, selected, children }: PropsWithChildren<SelectLinkButtonProps>) => (
-  <a
+export const SelectLinkButton = ({ to, selected, children }: PropsWithChildren<SelectLinkButtonProps>) => (
+  <Link
     className={`font-bold px-6 py-1.5 rounded-full hover:text-black transition ${selected ? 'bg-white text-black' : 'text-white'}`}
-    href={href}
+    to={to}
   >
     {children}
-  </a>
+  </Link>
 );
diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
index 9e0250c3..564e0023 100644
--- a/src/components/Nav.tsx
+++ b/src/components/Nav.tsx
@@ -1,27 +1,26 @@
+import { Link, useLocation } from 'react-router-dom';
 import logo from '/public/laina_v3_shrinked.png';
 import { SelectButtonWrapper, SelectLinkButton } from './Button';
 
-interface NavProps {
-  pathname: 'index' | 'lend' | 'borrow' | 'liquidate';
-}
+export default function Nav() {
+  const { pathname } = useLocation();
 
-export default function Nav({ pathname }: NavProps) {
   return (
     <nav className="relative max-w-screen-lg mx-auto mb-12 flex justify-between items-center pt-12 pb-6">
       <div>
-        <a href="/">
+        <Link to="/">
           <img src={logo.src} alt="logo" width={200} />
-        </a>
+        </Link>
       </div>
 
       <SelectButtonWrapper>
-        <SelectLinkButton href="/lend" selected={pathname === 'lend'}>
+        <SelectLinkButton to="/lend" selected={pathname === '/lend'}>
           Lend
         </SelectLinkButton>
-        <SelectLinkButton href="/borrow" selected={pathname === 'borrow'}>
+        <SelectLinkButton to="/borrow" selected={pathname === '/borrow'}>
           Borrow
         </SelectLinkButton>
-        <SelectLinkButton href="/liquidate" selected={pathname === 'liquidate'}>
+        <SelectLinkButton to="/liquidate" selected={pathname === '/liquidate'}>
           Liquidate
         </SelectLinkButton>
       </SelectButtonWrapper>
diff --git a/src/env.d.ts b/src/env.d.ts
index d617e091..a2458245 100644
--- a/src/env.d.ts
+++ b/src/env.d.ts
@@ -1,3 +1,4 @@
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />
 
 interface ImportMetaEnv {
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 7de69840..86157dca 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -2,14 +2,11 @@
 import '@fontsource/inter';
 import '@fontsource/inter/600.css';
 
-import Nav from '../components/Nav';
-
 interface Props {
   title: string;
-  pathname: 'index' | 'lend' | 'borrow' | 'liquidate';
 }
 
-const { title, pathname } = Astro.props;
+const { title } = Astro.props;
 ---
 
 <!doctype html>
@@ -23,10 +20,7 @@ const { title, pathname } = Astro.props;
     <title>{title}</title>
   </head>
   <body class="font-sans bg-grey-light min-h-screen">
-    <Nav pathname={pathname} />
-    <main class="max-w-full w-256">
-      <slot />
-    </main>
+    <slot />
   </body>
 </html>
 <style is:global>
diff --git a/src/pages/[...path].astro b/src/pages/[...path].astro
new file mode 100644
index 00000000..b9dc3539
--- /dev/null
+++ b/src/pages/[...path].astro
@@ -0,0 +1,19 @@
+---
+import App from '../App.tsx';
+import Layout from '../layouts/Layout.astro';
+
+export function getStaticPaths() {
+  return [
+    { params: { path: undefined }, props: { title: 'Laina – DeFi made simple.' } },
+    { params: { path: 'lend' }, props: { title: 'Laina – Lend assets' } },
+    { params: { path: 'borrow' }, props: { title: 'Laina – Borrow assets' } },
+    { params: { path: 'liquidate' }, props: { title: 'Laina – Liquidate loans' } },
+  ];
+}
+
+const { title } = Astro.props;
+---
+
+<Layout title={title}>
+  <App client:only />
+</Layout>
diff --git a/src/pages/borrow.astro b/src/pages/borrow.astro
deleted file mode 100644
index ed832127..00000000
--- a/src/pages/borrow.astro
+++ /dev/null
@@ -1,10 +0,0 @@
----
-import ConnectFreighter from '../components/ConnectFreighter.astro';
-import Loan_pool from '../components/borrowing.astro';
-import Layout from '../layouts/Layout.astro';
----
-
-<Layout title="Laina – Borrowing" pathname="borrow">
-  <ConnectFreighter />
-  <Loan_pool />
-</Layout>
diff --git a/src/pages/borrow/BorrowPage.tsx b/src/pages/borrow/BorrowPage.tsx
new file mode 100644
index 00000000..573fdd2f
--- /dev/null
+++ b/src/pages/borrow/BorrowPage.tsx
@@ -0,0 +1,8 @@
+const BorrowPage = () => (
+  <div>
+    <h1 className="text-3xl font-bold mb-8">Borrow Assets</h1>
+    <p>Coming soon!</p>
+  </div>
+);
+
+export default BorrowPage;
diff --git a/src/pages/index.astro b/src/pages/index.astro
deleted file mode 100644
index d5cc4805..00000000
--- a/src/pages/index.astro
+++ /dev/null
@@ -1,12 +0,0 @@
----
-import Layout from '../layouts/Layout.astro';
----
-
-<Layout title="Laina - DeFi made simple." pathname="index">
-  <main>
-    <div>
-      <h1>Landing page</h1>
-      <p>Coming soon!</p>
-    </div>
-  </main>
-</Layout>
diff --git a/src/pages/landing/LandingPage.tsx b/src/pages/landing/LandingPage.tsx
new file mode 100644
index 00000000..1a57b548
--- /dev/null
+++ b/src/pages/landing/LandingPage.tsx
@@ -0,0 +1,8 @@
+const LandingPage = () => (
+  <div>
+    <h1 className="text-3xl font-bold mb-8">Landing page</h1>
+    <p>Coming soon!</p>
+  </div>
+);
+
+export default LandingPage;
diff --git a/src/pages/lend.astro b/src/pages/lend.astro
deleted file mode 100644
index 9553cb83..00000000
--- a/src/pages/lend.astro
+++ /dev/null
@@ -1,27 +0,0 @@
----
-import ConnectFreighter from '../components/ConnectFreighter.astro';
-import { LendableAssetCard } from '../components/LendableAssetCard.tsx';
-import Loan_pool from '../components/lending.astro';
-import StellarIcon from '../images/Stellar_Symbol.png';
-import USDCIcon from '../images/usdc.svg';
-import Layout from '../layouts/Layout.astro';
-
-const currencies = [
-  {
-    name: 'USD Coin',
-    symbol: 'USDC',
-    icon: USDCIcon.src,
-  },
-  {
-    name: 'Stellar Lumen',
-    symbol: 'XLM',
-    icon: StellarIcon.src,
-  },
-];
----
-
-<Layout title="Laina – Lending" pathname="lend">
-  <ConnectFreighter />
-  <h1 class="text-3xl font-bold mb-8">Lend Assets</h1>
-  {currencies.map(({ name, symbol, icon }) => <LendableAssetCard name={name} symbol={symbol} icon={icon} />)}
-</Layout>
diff --git a/src/pages/lend/LendPage.tsx b/src/pages/lend/LendPage.tsx
new file mode 100644
index 00000000..28070a7d
--- /dev/null
+++ b/src/pages/lend/LendPage.tsx
@@ -0,0 +1,29 @@
+import StellarIcon from '../../images/Stellar_Symbol.png';
+import USDCIcon from '../../images/usdc.svg';
+import { LendableAssetCard } from './LendableAssetCard';
+
+const currencies = [
+  {
+    name: 'USD Coin',
+    symbol: 'USDC',
+    icon: USDCIcon.src,
+  },
+  {
+    name: 'Stellar Lumen',
+    symbol: 'XLM',
+    icon: StellarIcon.src,
+  },
+];
+
+const LendPage = () => {
+  return (
+    <>
+      <h1 className="text-3xl font-bold mb-8">Lend Assets</h1>
+      {currencies.map(({ name, symbol, icon }) => (
+        <LendableAssetCard key={name} name={name} symbol={symbol} icon={icon} />
+      ))}
+    </>
+  );
+};
+
+export default LendPage;
diff --git a/src/components/LendableAssetCard.tsx b/src/pages/lend/LendableAssetCard.tsx
similarity index 91%
rename from src/components/LendableAssetCard.tsx
rename to src/pages/lend/LendableAssetCard.tsx
index 03c7041a..06499dba 100644
--- a/src/components/LendableAssetCard.tsx
+++ b/src/pages/lend/LendableAssetCard.tsx
@@ -1,5 +1,5 @@
-import { Button } from './Button';
-import { Card } from './Card';
+import { Button } from '@components/Button';
+import { Card } from '@components/Card';
 
 export interface LendableAssetCardProps {
   name: string;
diff --git a/src/pages/liquidate.astro b/src/pages/liquidate.astro
deleted file mode 100644
index 7f3f6168..00000000
--- a/src/pages/liquidate.astro
+++ /dev/null
@@ -1,13 +0,0 @@
----
-import Layout from '../layouts/Layout.astro';
----
-
-<Layout title="Laina – DeFi made simple" pathname="liquidate">
-  <main>
-    <div>
-      <h1>Liquidate page</h1>
-
-      <p>Coming soon!</p>
-    </div>
-  </main>
-</Layout>
diff --git a/src/pages/liquidate/LiquidatePage.tsx b/src/pages/liquidate/LiquidatePage.tsx
new file mode 100644
index 00000000..85d3b679
--- /dev/null
+++ b/src/pages/liquidate/LiquidatePage.tsx
@@ -0,0 +1,8 @@
+const LiquidatePage = () => (
+  <div>
+    <h1 className="text-3xl font-bold mb-8">Available for Liquidation</h1>
+    <p>Coming soon!</p>
+  </div>
+);
+
+export default LiquidatePage;
diff --git a/tsconfig.json b/tsconfig.json
index 32daddd4..a979c217 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,6 +3,12 @@
   "exclude": ["packages"],
   "compilerOptions": {
     "jsx": "react-jsx",
-    "jsxImportSource": "react"
+    "jsxImportSource": "react",
+    "baseUrl": ".",
+    "paths": {
+      "@images/*": ["src/images/*"],
+      "@components/*": ["src/components/*"],
+      "@pages/*": ["src/pages/*"]
+    }
   }
 }