diff --git a/app/content copy.tsx b/app/content copy.tsx
new file mode 100644
index 0000000..00b9558
--- /dev/null
+++ b/app/content copy.tsx	
@@ -0,0 +1,29 @@
+"use client"
+
+import React from "react";
+import "bootstrap/dist/css/bootstrap.css";
+
+export default function Content() {
+
+    return <>
+        <div className="container py-5">
+
+            <div className="row justify-content-center">
+                <div className="col-lg-6">
+
+                    <h1 className="text-center m-0 mb-3">Country List :)</h1>
+
+                    <ul className="list-group">
+                        <li className="list-group-item">🇨🇦 Canada</li>
+                        <li className="list-group-item">🇺🇸 United States</li>
+                        <li className="list-group-item">🇧🇷 Brazil</li>
+                    </ul>
+
+                    <p className="text-center mt-2 text-muted">TODO: Connect to database</p>
+
+                </div>
+            </div>
+
+        </div>
+    </>
+}
\ No newline at end of file
diff --git a/app/content.tsx b/app/content.tsx
index d063714..7fb8c27 100644
--- a/app/content.tsx
+++ b/app/content.tsx
@@ -1,29 +1,28 @@
-"use client"
-
-import React from "react";
+import { useEffect, useState } from "react";
+import { createClient } from "@supabase/supabase-js";
 import "bootstrap/dist/css/bootstrap.css";
 
-export default function Content() {
-
-    return <>
-        <div className="container py-5">
-
-            <div className="row justify-content-center">
-                <div className="col-lg-6">
+const supabase = createClient("https://ldflrmmpbclglcbnwzhz.supabase.co", "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImxkZmxybW1wYmNsZ2xjYm53emh6Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3MjcxMjYyODcsImV4cCI6MjA0MjcwMjI4N30.hR7Bm3j4qxHxAYebfh_LSFZMB7GNTcuXbJ-V1mlupYA");
 
-                    <h1 className="text-center m-0 mb-3">Country List</h1>
+function App() {
+  const [countries, setCountries] = useState([]);
 
-                    <ul className="list-group">
-                        <li className="list-group-item">🇨🇦 Canada</li>
-                        <li className="list-group-item">🇺🇸 United States</li>
-                        <li className="list-group-item">🇧🇷 Brazil</li>
-                    </ul>
+  useEffect(() => {
+    getCountries();
+  }, []);
 
-                    <p className="text-center mt-2 text-muted">TODO: Connect to database</p>
+  async function getCountries() {
+    const { data } = await supabase.from("countries").select();
+    setCountries(data);
+  }
 
-                </div>
-            </div>
+  return (
+    <ul>
+      {countries.map((country) => (
+        <li key={country.name}>{country.name}</li>
+      ))}
+    </ul>
+  );
+}
 
-        </div>
-    </>
-}
\ No newline at end of file
+export default App;
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 9f8f72e..d3bab51 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,10 +1,11 @@
 {
-  "name": "desn3035-e3-playground",
+  "name": "desn3035-e3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "dependencies": {
+        "@supabase/supabase-js": "^2.45.4",
         "bootstrap": "^5.3.3",
         "next": "^14.2.9",
         "react": "^18.3.1",
@@ -177,6 +178,80 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
+    "node_modules/@supabase/auth-js": {
+      "version": "2.65.0",
+      "resolved": "https://registry.npmjs.org/@supabase/auth-js/-/auth-js-2.65.0.tgz",
+      "integrity": "sha512-+wboHfZufAE2Y612OsKeVP4rVOeGZzzMLD/Ac3HrTQkkY4qXNjI6Af9gtmxwccE5nFvTiF114FEbIQ1hRq5uUw==",
+      "license": "MIT",
+      "dependencies": {
+        "@supabase/node-fetch": "^2.6.14"
+      }
+    },
+    "node_modules/@supabase/functions-js": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@supabase/functions-js/-/functions-js-2.4.1.tgz",
+      "integrity": "sha512-8sZ2ibwHlf+WkHDUZJUXqqmPvWQ3UHN0W30behOJngVh/qHHekhJLCFbh0AjkE9/FqqXtf9eoVvmYgfCLk5tNA==",
+      "license": "MIT",
+      "dependencies": {
+        "@supabase/node-fetch": "^2.6.14"
+      }
+    },
+    "node_modules/@supabase/node-fetch": {
+      "version": "2.6.15",
+      "resolved": "https://registry.npmjs.org/@supabase/node-fetch/-/node-fetch-2.6.15.tgz",
+      "integrity": "sha512-1ibVeYUacxWYi9i0cf5efil6adJ9WRyZBLivgjs+AUpewx1F3xPi7gLgaASI2SmIQxPoCEjAsLAzKPgMJVgOUQ==",
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-url": "^5.0.0"
+      },
+      "engines": {
+        "node": "4.x || >=6.0.0"
+      }
+    },
+    "node_modules/@supabase/postgrest-js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/@supabase/postgrest-js/-/postgrest-js-1.16.1.tgz",
+      "integrity": "sha512-EOSEZFm5pPuCPGCmLF1VOCS78DfkSz600PBuvBND/IZmMciJ1pmsS3ss6TkB6UkuvTybYiBh7gKOYyxoEO3USA==",
+      "license": "MIT",
+      "dependencies": {
+        "@supabase/node-fetch": "^2.6.14"
+      }
+    },
+    "node_modules/@supabase/realtime-js": {
+      "version": "2.10.2",
+      "resolved": "https://registry.npmjs.org/@supabase/realtime-js/-/realtime-js-2.10.2.tgz",
+      "integrity": "sha512-qyCQaNg90HmJstsvr2aJNxK2zgoKh9ZZA8oqb7UT2LCh3mj9zpa3Iwu167AuyNxsxrUE8eEJ2yH6wLCij4EApA==",
+      "license": "MIT",
+      "dependencies": {
+        "@supabase/node-fetch": "^2.6.14",
+        "@types/phoenix": "^1.5.4",
+        "@types/ws": "^8.5.10",
+        "ws": "^8.14.2"
+      }
+    },
+    "node_modules/@supabase/storage-js": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/@supabase/storage-js/-/storage-js-2.7.0.tgz",
+      "integrity": "sha512-iZenEdO6Mx9iTR6T7wC7sk6KKsoDPLq8rdu5VRy7+JiT1i8fnqfcOr6mfF2Eaqky9VQzhP8zZKQYjzozB65Rig==",
+      "license": "MIT",
+      "dependencies": {
+        "@supabase/node-fetch": "^2.6.14"
+      }
+    },
+    "node_modules/@supabase/supabase-js": {
+      "version": "2.45.4",
+      "resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.45.4.tgz",
+      "integrity": "sha512-E5p8/zOLaQ3a462MZnmnz03CrduA5ySH9hZyL03Y+QZLIOO4/Gs8Rdy4ZCKDHsN7x0xdanVEWWFN3pJFQr9/hg==",
+      "license": "MIT",
+      "dependencies": {
+        "@supabase/auth-js": "2.65.0",
+        "@supabase/functions-js": "2.4.1",
+        "@supabase/node-fetch": "2.6.15",
+        "@supabase/postgrest-js": "1.16.1",
+        "@supabase/realtime-js": "2.10.2",
+        "@supabase/storage-js": "2.7.0"
+      }
+    },
     "node_modules/@swc/counter": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
@@ -197,12 +272,17 @@
       "version": "22.5.4",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-22.5.4.tgz",
       "integrity": "sha512-FDuKUJQm/ju9fT/SeX/6+gBzoPzlVCzfzmGkwKvRHQVxi4BntVbyIwf6a4Xn62mrvndLiml6z/UBXIdEVjQLXg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "undici-types": "~6.19.2"
       }
     },
+    "node_modules/@types/phoenix": {
+      "version": "1.6.5",
+      "resolved": "https://registry.npmjs.org/@types/phoenix/-/phoenix-1.6.5.tgz",
+      "integrity": "sha512-xegpDuR+z0UqG9fwHqNoy3rI7JDlvaPh2TY47Fl80oq6g+hXT+c/LEuE43X48clZ6lOfANl5WrPur9fYO1RJ/w==",
+      "license": "MIT"
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.12",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
@@ -221,6 +301,15 @@
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/@types/ws": {
+      "version": "8.5.12",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.12.tgz",
+      "integrity": "sha512-3tPRkv1EtkDpzlgyKyI8pGsGZAGPEaXeu0DOj5DI25Ja91bdAYddYHbADRYVrZMRbfW+1l5YwXVDKohDJNQxkQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/bootstrap": {
       "version": "5.3.3",
       "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
@@ -484,6 +573,12 @@
         }
       }
     },
+    "node_modules/tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
+      "license": "MIT"
+    },
     "node_modules/tslib": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz",
@@ -508,8 +603,44 @@
       "version": "6.19.8",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
       "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
-      "dev": true,
       "license": "MIT"
+    },
+    "node_modules/webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/whatwg-url": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+      "license": "MIT",
+      "dependencies": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
+      }
+    },
+    "node_modules/ws": {
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
+      "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index aa6cb7b..67dc379 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@supabase/supabase-js": "^2.45.4",
     "bootstrap": "^5.3.3",
     "next": "^14.2.9",
     "react": "^18.3.1",