diff --git a/package-lock.json b/package-lock.json
index 8e7fe6a..e71d1a2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
 			"dependencies": {
 				"@lucide/svelte": "^0.487.0",
 				"@tailwindcss/vite": "^4.1.3",
+				"country-list-js": "^3.1.8",
 				"i18n": "^0.15.3",
 				"lucide-svelte": "^0.475.0",
 				"marked": "^16.2.0",
@@ -2136,6 +2137,12 @@
 				"node": ">= 8"
 			}
 		},
+		"node_modules/arg": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/arg/-/arg-4.1.0.tgz",
+			"integrity": "sha512-ZWc51jO3qegGkVh8Hwpv636EkbesNV5ZNQPCtRa+0qytRYPEs9IYT9qITY9buezqUH5uqyzlWLcufrzU2rffdg==",
+			"license": "MIT"
+		},
 		"node_modules/argparse": {
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -2283,6 +2290,15 @@
 				"node": ">=8.0.0"
 			}
 		},
+		"node_modules/bytes": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
+			"integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
 		"node_modules/callsites": {
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -2410,6 +2426,15 @@
 				"node": "^14.18.0 || >=16.10.0"
 			}
 		},
+		"node_modules/content-type": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
+			"integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
 		"node_modules/convert-source-map": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
@@ -2458,6 +2483,14 @@
 				}
 			}
 		},
+		"node_modules/country-list-js": {
+			"version": "3.1.8",
+			"resolved": "https://registry.npmjs.org/country-list-js/-/country-list-js-3.1.8.tgz",
+			"integrity": "sha512-IMlhr9dRoGNnNDR072teYBk7YztQ/rOTahJPTRF3vkxdyhxdbKEi7ZDBjHW0Yy3mKtxr5clbdCLsEaLlyZsAHg==",
+			"dependencies": {
+				"micro": "^9.3.3"
+			}
+		},
 		"node_modules/cssesc": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -2538,6 +2571,15 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/depd": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
+			"integrity": "sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
 		"node_modules/detect-indent": {
 			"version": "6.1.0",
 			"resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-6.1.0.tgz",
@@ -2914,6 +2956,22 @@
 				"node": ">=12.0.0"
 			}
 		},
+		"node_modules/http-errors": {
+			"version": "1.7.3",
+			"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.3.tgz",
+			"integrity": "sha512-ZTTX0MWrsQ2ZAhA1cejAwDLycFsd7I7nVtnkT3Ol0aqodaKW+0CTZDQ1uBv5whptCnc8e8HeRRJxRs0kmm/Qfw==",
+			"license": "MIT",
+			"dependencies": {
+				"depd": "~1.1.2",
+				"inherits": "2.0.4",
+				"setprototypeof": "1.1.1",
+				"statuses": ">= 1.5.0 < 2",
+				"toidentifier": "1.0.0"
+			},
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
 		"node_modules/human-id": {
 			"version": "4.1.3",
 			"resolved": "https://registry.npmjs.org/human-id/-/human-id-4.1.3.tgz",
@@ -2944,6 +3002,18 @@
 				"url": "https://github.com/sponsors/mashpie"
 			}
 		},
+		"node_modules/iconv-lite": {
+			"version": "0.4.24",
+			"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+			"integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+			"license": "MIT",
+			"dependencies": {
+				"safer-buffer": ">= 2.1.2 < 3"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
 		"node_modules/immutable": {
 			"version": "5.1.3",
 			"resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.3.tgz",
@@ -2990,8 +3060,7 @@
 		"node_modules/inherits": {
 			"version": "2.0.4",
 			"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-			"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-			"dev": true
+			"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
 		},
 		"node_modules/intl-messageformat": {
 			"version": "10.7.18",
@@ -3505,6 +3574,23 @@
 				"node": ">=0.12"
 			}
 		},
+		"node_modules/micro": {
+			"version": "9.4.1",
+			"resolved": "https://registry.npmjs.org/micro/-/micro-9.4.1.tgz",
+			"integrity": "sha512-Lpjcbp6Y9GJIfewxDfTmu9eW0rt0MGo+Gs1d3yJLFa7mhErtKkCngGhDbA/O1gqUjEwsHh+jWPg8BJ0Bx4AgFA==",
+			"license": "MIT",
+			"dependencies": {
+				"arg": "4.1.0",
+				"content-type": "1.0.4",
+				"raw-body": "2.4.1"
+			},
+			"bin": {
+				"micro": "bin/micro.js"
+			},
+			"engines": {
+				"node": ">= 8.0.0"
+			}
+		},
 		"node_modules/micromatch": {
 			"version": "4.0.8",
 			"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
@@ -3843,6 +3929,21 @@
 			"integrity": "sha512-xWPJIrK1zu5Ypn898fBp8RHkT/9ibquV2Kv24S/JY9VYEhMBMKur1gHVsOiNUh7PHP9uCgejjpZUHUIXXKoU/g==",
 			"license": "GPL-3.0"
 		},
+		"node_modules/raw-body": {
+			"version": "2.4.1",
+			"resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.1.tgz",
+			"integrity": "sha512-9WmIKF6mkvA0SLmA2Knm9+qj89e+j1zqgyn8aXGd7+nAduPoqgI9lO57SAZNn/Byzo5P7JhXTyg9PzaJbH73bA==",
+			"license": "MIT",
+			"dependencies": {
+				"bytes": "3.1.0",
+				"http-errors": "1.7.3",
+				"iconv-lite": "0.4.24",
+				"unpipe": "1.0.0"
+			},
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
 		"node_modules/readdirp": {
 			"version": "4.1.2",
 			"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
@@ -3933,6 +4034,12 @@
 			"integrity": "sha512-6pNbSMW6OhAi9j+N8V+U715yBQsaWJ7eyEUaOrawX+isg5ZxhUlV1NipNtgaKHmFGiABwt+ZF04Ii+3Xjkg+8w==",
 			"license": "ISC"
 		},
+		"node_modules/safer-buffer": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+			"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+			"license": "MIT"
+		},
 		"node_modules/sander": {
 			"version": "0.5.1",
 			"resolved": "https://registry.npmjs.org/sander/-/sander-0.5.1.tgz",
@@ -3980,6 +4087,12 @@
 			"integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
 			"dev": true
 		},
+		"node_modules/setprototypeof": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
+			"integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==",
+			"license": "ISC"
+		},
 		"node_modules/sirv": {
 			"version": "3.0.1",
 			"resolved": "https://registry.npmjs.org/sirv/-/sirv-3.0.1.tgz",
@@ -4039,6 +4152,15 @@
 				"kysely": "*"
 			}
 		},
+		"node_modules/statuses": {
+			"version": "1.5.0",
+			"resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
+			"integrity": "sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
 		"node_modules/strip-indent": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
@@ -4743,6 +4865,15 @@
 				"node": ">=8.0"
 			}
 		},
+		"node_modules/toidentifier": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
+			"integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=0.6"
+			}
+		},
 		"node_modules/totalist": {
 			"version": "3.0.1",
 			"resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
@@ -4776,6 +4907,15 @@
 				"node": ">=14.17"
 			}
 		},
+		"node_modules/unpipe": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+			"integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
 		"node_modules/unplugin": {
 			"version": "2.3.11",
 			"resolved": "https://registry.npmjs.org/unplugin/-/unplugin-2.3.11.tgz",
diff --git a/package.json b/package.json
index c4dba93..1471832 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
 	"dependencies": {
 		"@lucide/svelte": "^0.487.0",
 		"@tailwindcss/vite": "^4.1.3",
+		"country-list-js": "^3.1.8",
 		"i18n": "^0.15.3",
 		"lucide-svelte": "^0.475.0",
 		"marked": "^16.2.0",
diff --git a/src/routes/school/css/+page.svelte b/src/routes/school/css/+page.svelte
index 221b923..5a24081 100644
--- a/src/routes/school/css/+page.svelte
+++ b/src/routes/school/css/+page.svelte
@@ -1,5 +1,8 @@
 <script lang="ts">
   import DoubleRangeSlider from "@src/lib/components/DoubleRangeSlider.svelte";
+  import iso3 from "./iso3.json";
+  import countryList from "country-list-js";
+  import onMount from "@src/optimizers/onMount";
 
   class Range {
     start: number = 0;
@@ -18,51 +21,150 @@
     if (rightRange.start == rightRange.end) return false;
     return true;
   }
+
+  let currentCountry: string = "";
+  let interactiveEmbed: HTMLIFrameElement;
+
+  function selectCountry(country: string, towards: boolean) {
+    currentCountry =
+      "https://deprived.dev/assets/school/social-science/data/interactive/" +
+      country +
+      "-" +
+      (towards ? "in" : "out") +
+      ".html";
+
+    interactiveEmbed.scrollIntoView({
+      behavior: "smooth",
+      block: "start",
+    });
+  }
+
+  function getCountryName(code) {
+    const uppercaseCode = code.toUpperCase();
+
+    // Hardcoded historical and regional exceptions
+    const exceptions = {
+      YDYE: "People's Democratic Republic of Yemen",
+      CMR: "Cameroon",
+      CSK: "Czechoslovakia",
+      YUG: "Yugoslavia",
+      DDR: "German Democratic Republic",
+      EU: "European Union",
+    };
+
+    if (exceptions[uppercaseCode]) {
+      return exceptions[uppercaseCode];
+    }
+
+    const countryData = countryList.findByIso3(uppercaseCode);
+    return countryData ? countryData.name : "Country not found";
+  }
+
+  onMount(() => {
+    console.log(countryList.findByIso3("DNK"));
+  });
 </script>
 
-<div class="flex flex-col items-center justify-center w-full prose">
-  <div class="w-98">
-    <div class="flex w-full justify-between">
-      <div class="-ml-1.5">-1</div>
-      <div>0</div>
-      <div>1</div>
+<div class="flex flex-col w-full h-full pt-40 gap-16">
+  <div class="flex justify-center w-full">
+    <h1 class="text-4xl">Computational Social Science</h1>
+  </div>
+  <div class="flex flex-col items-center justify-center w-full prose">
+    <div class="flex gap-30 justify-between">
+      <div>Negative range</div>
+      <div>Positive range</div>
     </div>
-    <div class="flex gap-8">
-      <DoubleRangeSlider
-        bind:start={leftRange.start}
-        bind:end={leftRange.end}
-      />
-      <DoubleRangeSlider
-        bind:start={rightRange.start}
-        bind:end={rightRange.end}
-      />
+    <div class="w-98">
+      <div class="flex w-full justify-between">
+        <div class="-ml-1.5">-1</div>
+        <div>0</div>
+        <div>1</div>
+      </div>
+      <div class="flex gap-8">
+        <DoubleRangeSlider
+          bind:start={leftRange.start}
+          bind:end={leftRange.end}
+        />
+        <DoubleRangeSlider
+          bind:start={rightRange.start}
+          bind:end={rightRange.end}
+        />
+      </div>
+      <div class="flex w-full justify-around">
+        <div>
+          -{round(1 - leftRange.start).toFixed(1)} --- -{round(
+            1 - leftRange.end,
+          ).toFixed(1)}
+        </div>
+        <div>
+          {round(rightRange.start).toFixed(1)} --- {round(
+            rightRange.end,
+          ).toFixed(1)}
+        </div>
+      </div>
     </div>
-    <div class="flex w-full justify-around">
-      <div>
-        -{round(1 - leftRange.start).toFixed(1)} --- -{round(
-          1 - leftRange.end,
-        ).toFixed(1)}
-      </div>
-      <div>
-        {round(rightRange.start).toFixed(1)} --- {round(rightRange.end).toFixed(
-          1,
-        )}
-      </div>
+    <div class="w-full flex justify-center max-h-screen">
+      <img
+        class="max-h-[80vh] object-contain"
+        src={"https://deprived.dev/assets/school/social-science/data/plots/sentiment_graph_-" +
+          round(1 - leftRange.end).toFixed(1) +
+          "_-" +
+          round(1 - leftRange.start).toFixed(1) +
+          "_" +
+          round(rightRange.start).toFixed(1) +
+          "_" +
+          round(rightRange.end).toFixed(1) +
+          ".jpg"}
+        alt=""
+      />
     </div>
   </div>
-  <div class="w-full flex justify-center max-h-screen">
-    <img
-      class="max-h-[80vh] object-contain"
-      src={"https://deprived.dev/assets/school/social-science/data/plots/sentiment_graph_-" +
-        round(1 - leftRange.end).toFixed(1) +
-        "_-" +
-        round(1 - leftRange.start).toFixed(1) +
-        "_" +
-        round(rightRange.start).toFixed(1) +
-        "_" +
-        round(rightRange.end).toFixed(1) +
-        ".jpg"}
-      alt=""
-    />
+  <div class="w-full flex flex-col items-center gap-10">
+    <div class="w-80">
+      <div class="text-4xl">Interactive graphs</div>
+      <div>
+        The interactive graphs has to be filtered, due to the large amount of
+        connections, making a full interactive graph, requires too much
+        processing power.
+      </div>
+    </div>
+
+    <div style="width: 80%; height: 800px;">
+      <iframe
+        src={currentCountry}
+        width="100%"
+        height="100%"
+        style="border: none; background: transparent;"
+        allowtransparency={true}
+        title="Network Graph"
+        bind:this={interactiveEmbed}
+      >
+      </iframe>
+    </div>
+    <div class="w-[40%]">
+      <div class="text-2xl">List of interactive graphs</div>
+      <table class="table">
+        <tbody>
+          {#each iso3 as country}
+            <tr>
+              <th>{getCountryName(country)}</th>
+              <th
+                ><button
+                  on:click={() => selectCountry(country, false)}
+                  class="btn btn-outline btn-primary">From {country}</button
+                ></th
+              >
+              <th
+                ><button
+                  on:click={() => selectCountry(country, true)}
+                  class="btn btn-outline btn-secondary"
+                  >Towards {country}</button
+                ></th
+              >
+            </tr>
+          {/each}
+        </tbody>
+      </table>
+    </div>
   </div>
 </div>
diff --git a/src/routes/school/css/iso3.json b/src/routes/school/css/iso3.json
new file mode 100644
index 0000000..85b3744
--- /dev/null
+++ b/src/routes/school/css/iso3.json
@@ -0,0 +1,201 @@
+[
+    "AFG",
+    "AGO",
+    "ALB",
+    "AND",
+    "ARE",
+    "ARG",
+    "ARM",
+    "ATG",
+    "AUS",
+    "AUT",
+    "AZE",
+    "BDI",
+    "BEL",
+    "BEN",
+    "BFA",
+    "BGD",
+    "BGR",
+    "BHR",
+    "BHS",
+    "BIH",
+    "BLR",
+    "BLZ",
+    "BOL",
+    "BRA",
+    "BRB",
+    "BRN",
+    "BTN",
+    "BWA",
+    "CAF",
+    "CAN",
+    "CHE",
+    "CHL",
+    "CHN",
+    "CIV",
+    "CMR",
+    "COD",
+    "COG",
+    "COL",
+    "COM",
+    "CPV",
+    "CRI",
+    "CSK",
+    "CUB",
+    "CYP",
+    "CZE",
+    "DDR",
+    "DEU",
+    "DJI",
+    "DMA",
+    "DNK",
+    "DOM",
+    "DZA",
+    "ECU",
+    "EGY",
+    "ERI",
+    "ESP",
+    "EST",
+    "ETH",
+    "EU",
+    "FIN",
+    "FJI",
+    "FRA",
+    "FSM",
+    "GAB",
+    "GBR",
+    "GEO",
+    "GHA",
+    "GIN",
+    "GMB",
+    "GNB",
+    "GNQ",
+    "GRC",
+    "GRD",
+    "GTM",
+    "GUY",
+    "HND",
+    "HRV",
+    "HTI",
+    "HUN",
+    "IDN",
+    "IND",
+    "IRL",
+    "IRN",
+    "IRQ",
+    "ISL",
+    "ISR",
+    "ITA",
+    "JAM",
+    "JOR",
+    "JPN",
+    "KAZ",
+    "KEN",
+    "KGZ",
+    "KHM",
+    "KIR",
+    "KNA",
+    "KOR",
+    "KWT",
+    "LAO",
+    "LBN",
+    "LBR",
+    "LBY",
+    "LCA",
+    "LIE",
+    "LKA",
+    "LSO",
+    "LTU",
+    "LUX",
+    "LVA",
+    "MAR",
+    "MCO",
+    "MDA",
+    "MDG",
+    "MDV",
+    "MEX",
+    "MHL",
+    "MKD",
+    "MLI",
+    "MLT",
+    "MMR",
+    "MNE",
+    "MNG",
+    "MOZ",
+    "MRT",
+    "MUS",
+    "MWI",
+    "MYS",
+    "NAM",
+    "NER",
+    "NGA",
+    "NIC",
+    "NLD",
+    "NOR",
+    "NPL",
+    "NRU",
+    "NZL",
+    "OMN",
+    "PAK",
+    "PAN",
+    "PER",
+    "PHL",
+    "PLW",
+    "PNG",
+    "POL",
+    "PRK",
+    "PRT",
+    "PRY",
+    "PSE",
+    "QAT",
+    "ROU",
+    "RUS",
+    "RWA",
+    "SAU",
+    "SDN",
+    "SEN",
+    "SGP",
+    "SLB",
+    "SLE",
+    "SLV",
+    "SMR",
+    "SOM",
+    "SSD",
+    "STP",
+    "SUR",
+    "SVK",
+    "SVN",
+    "SWE",
+    "SWZ",
+    "SYC",
+    "SYR",
+    "TCD",
+    "TGO",
+    "THA",
+    "TJK",
+    "TKM",
+    "TLS",
+    "TON",
+    "TTO",
+    "TUN",
+    "TUR",
+    "TUV",
+    "TZA",
+    "UGA",
+    "UKR",
+    "URY",
+    "USA",
+    "UZB",
+    "VAT",
+    "VCT",
+    "VEN",
+    "VNM",
+    "VUT",
+    "WSM",
+    "YDYE",
+    "YEM",
+    "YUG",
+    "ZAF",
+    "ZMB",
+    "ZWE"
+]
\ No newline at end of file