diff --git a/src/App.jsx b/src/App.jsx
new file mode 100644
index 0000000..e20cb64
--- /dev/null
+++ b/src/App.jsx
@@ -0,0 +1,20 @@
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import CountryInfoApp from "./components/countryInfoApp";
+import CountryList from "./components/countryList"
+import CountryDetails from "./components/countryDetails";
+
+function App() {
+  return (
+    <>
+      <BrowserRouter>
+        <Routes>
+          <Route path="/" element={<CountryInfoApp />}>
+            <Route index element={<CountryList />} />
+            <Route path="country/:countryName" element={<CountryDetails />}/>
+          </Route>
+        </Routes>
+      </BrowserRouter> 
+    </>
+  );
+}
+export default App;
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..d07ec7e
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,11 @@
+@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap");
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    body {
+       @apply bg-lightBackground dark:bg-darkPrimary font-mainFont
+    }
+}
\ No newline at end of file
diff --git a/src/main.jsx b/src/main.jsx
new file mode 100644
index 0000000..89f91e5
--- /dev/null
+++ b/src/main.jsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App.jsx'
+import './index.css'
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)