diff --git a/src/App.css b/src/App.css
index 1894d1d..52be712 100644
--- a/src/App.css
+++ b/src/App.css
@@ -12,17 +12,22 @@ body {
 }
 
 #country-info {
-  display: flex;
-  background-color: white;
+  width: 100%;
+  background-color: rgb(179, 179, 179);
   z-index: 10;
+  position: fixed;
+  bottom: 0px;
+  padding: 0.5rem;
 }
 
 .country-flag {
-  width: 8rem;
+  width: 3rem;
 }
 
 .map-container {
-  position: relative;
+  position: sticky;
+  top: 0;
+  background-color: white;
 }
 
 .tools {
diff --git a/src/App.tsx b/src/App.tsx
index ee5132d..23b9eb9 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -4,21 +4,12 @@ import "./App.css";
 import { BrowserRouter, Route, Link, Routes } from "react-router-dom";
 import { PointCountryGame } from "./pages/PointCountryGame";
 import { PointCountryInfo } from "./pages/PointCountryInfo";
+import { IntroPage } from "./pages/IntroPage";
 
 function App() {
   return (
     <>
-      <BrowserRouter>
-        <nav>
-          <ul>
-            <li>
-              <Link to="/point-country-game">Point Country Game</Link>
-            </li>
-            <li>
-              <Link to="/point-country-info">Point Country info</Link>
-            </li>
-          </ul>
-        </nav>
+      <BrowserRouter basename="countries">
         <Routes>
           <Route
             path="/point-country-game"
@@ -28,7 +19,7 @@ function App() {
             path="/point-country-info"
             element={<PointCountryInfo />}
           ></Route>
-          <Route path="/" element={<App />}></Route>
+          <Route path="/" element={<IntroPage />}></Route>
         </Routes>
       </BrowserRouter>
     </>
diff --git a/src/assets/Map.tsx b/src/assets/Map.tsx
index 4e59001..14e8625 100644
--- a/src/assets/Map.tsx
+++ b/src/assets/Map.tsx
@@ -5,19 +5,23 @@ import {
   TransformComponent,
   useControls,
   useTransformContext,
+  zoom,
 } from "react-zoom-pan-pinch";
 import { MapControls } from "../components/MapControls";
 
 export const Map = ({
   onPathClick,
+  selectedCountry,
 }: {
   onPathClick: (e: MouseEvent) => void;
+  selectedCountry: string;
 }) => {
   const MAX_SCALE = 1000;
   const maxStroke = 0.35;
   const minStroke = 0.075;
   const [strokeWidth, setStrokeWidth] = useState(0.07);
   const ref = useRef();
+  const mapRef = useRef();
 
   const onZoom = (a, b) => {
     const newStrokeWidth = getStrokeWidth(a.state.scale);
@@ -39,7 +43,7 @@ export const Map = ({
   return (
     <div className="map-container">
       <TransformWrapper ref={ref} maxScale={MAX_SCALE} onZoom={onZoom}>
-        {({ zoomIn, zoomOut, resetTransform, ...rest }) => (
+        {({ zoomIn, zoomOut, resetTransform, zoomToElement, ...rest }) => (
           <>
             <MapControls
               isMaxScale={
@@ -47,6 +51,9 @@ export const Map = ({
               }
               isMinScale={ref?.current?.instance?.transformState?.scale === 1}
               onZoomWithButtons={onZoomWithButtons}
+              zoomToElement={zoomToElement}
+              selectedCountry={selectedCountry}
+              wrapperRef={mapRef}
             />
             <TransformComponent>
               <svg
@@ -60,6 +67,7 @@ export const Map = ({
                   aspectRatio: "1.515",
                   preserveAspectRatio: "xMidYMid meet",
                 }}
+                ref={mapRef}
               >
                 <path
                   d="m 479.68275,331.6274 -0.077,0.025 -0.258,0.155 -0.147,0.054 -0.134,0.027 -0.105,-0.011 -0.058,-0.091 0.006,-0.139 -0.024,-0.124 -0.02,-0.067 0.038,-0.181 0.086,-0.097 0.119,-0.08 0.188,0.029 0.398,0.116 0.083,0.109 10e-4,0.072 -0.073,0.119 z"
diff --git a/src/components/MapControls.tsx b/src/components/MapControls.tsx
index e7b6db2..0a4585d 100644
--- a/src/components/MapControls.tsx
+++ b/src/components/MapControls.tsx
@@ -1,17 +1,31 @@
-import { useControls } from "react-zoom-pan-pinch";
+import { useEffect } from "react";
+import { ReactZoomPanPinchRef, useControls } from "react-zoom-pan-pinch";
 
 type MapControlsProps = {
   isMaxScale: boolean;
   isMinScale: boolean;
   onZoomWithButtons: Function;
+  zoomToElement: Function;
+  selectedCountry: string;
+  wrapperRef: React.Ref<ReactZoomPanPinchRef>;
 };
 
 export const MapControls = ({
   isMaxScale,
   isMinScale,
   onZoomWithButtons,
+  zoomToElement,
+  selectedCountry,
+  wrapperRef,
 }: MapControlsProps) => {
   const { zoomIn, zoomOut /* resetTransform */ } = useControls();
+  useEffect(() => {
+    const countryPath = wrapperRef?.current?.querySelector(
+      `[title="${selectedCountry}"]`
+    );
+    zoomToElement(countryPath);
+    //(node: HTMLElement | string, scale?: number, animationTime?: number, animationType?: keyof typeof animations) => void;
+  }, [selectedCountry]);
   return (
     <div className="tools">
       <button
diff --git a/src/pages/IntroPage.tsx b/src/pages/IntroPage.tsx
new file mode 100644
index 0000000..50f864c
--- /dev/null
+++ b/src/pages/IntroPage.tsx
@@ -0,0 +1,16 @@
+import { Link } from "react-router-dom";
+
+export const IntroPage = () => {
+  return (
+    <nav>
+      <ul>
+        <li>
+          <Link to="/point-country-game">Point Country Game</Link>
+        </li>
+        <li>
+          <Link to="/point-country-info">Point Country info</Link>
+        </li>
+      </ul>
+    </nav>
+  );
+};
diff --git a/src/pages/PointCountryInfo.tsx b/src/pages/PointCountryInfo.tsx
index e5d2abb..981b3da 100644
--- a/src/pages/PointCountryInfo.tsx
+++ b/src/pages/PointCountryInfo.tsx
@@ -26,6 +26,7 @@ export function PointCountryInfo() {
       official: "",
     },
   });
+  const [countryList, setCountryList] = useState([]);
 
   useEffect(() => {
     if (!country) {
@@ -39,6 +40,15 @@ export function PointCountryInfo() {
       });
   }, [country]);
 
+  useEffect(() => {
+    fetch(`https://restcountries.com/v3.1/all`)
+      .then((response) => response.json())
+      // 4. Setting *dogImage* to the image url that we received from the response above
+      .then((data) => {
+        setCountryList(data);
+      });
+  }, []);
+
   function onClickPais(e: MouseEvent) {
     if (selectedPath.current) {
       selectedPath.current.setAttribute("style", "fill:black");
@@ -56,32 +66,33 @@ export function PointCountryInfo() {
   }
   return (
     <div className="app-page">
-      <Map onPathClick={onClickPais} />
+      <Map onPathClick={onClickPais} selectedCountry={country} />
 
       <div id="country-info">
         {countryInfo ? (
           <>
-            <div>
-              <h2>{country}</h2>{" "}
+            <p>
               <img className="country-flag" src={countryInfo.flags.svg} />
-            </div>
-            <div>
-              <p>
-                <strong>Official name:</strong> {countryInfo.name.official}
-              </p>
-              <p>
-                <strong>Capital:</strong> {countryInfo?.capital}
-              </p>
-              <p>
-                <strong>Languages:</strong>{" "}
-                {Object.values(countryInfo?.languages).map((l) => l + ", ")}
-              </p>
-            </div>
+              <strong>{country}</strong>
+              <br />
+              {countryInfo.name.official}
+              <br />
+              <strong>Capital:</strong> {countryInfo?.capital}
+            </p>
           </>
         ) : (
           "no info :/"
         )}
       </div>
+      <div id="country-list">
+        <ul>
+          {countryList.map((country) => (
+            <li onClick={() => setCountry(country.name.common)}>
+              {country.name.common}
+            </li>
+          ))}
+        </ul>
+      </div>
     </div>
   );
 }