diff --git a/flake.nix b/flake.nix
index 3216138..8833f93 100644
--- a/flake.nix
+++ b/flake.nix
@@ -20,6 +20,14 @@
             rustfmt
             pre-commit
             rustPackages.clippy
+
+            # for exif/rexiv2 crates
+            /*
+            pkg-config
+            libexif
+            gexiv2
+            glib
+            */
           ];
           RUST_SRC_PATH = rustPlatform.rustLibSrc;
         };
diff --git a/src/main.rs b/src/main.rs
index f9bdd4e..92621df 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -94,8 +94,10 @@ async fn main_async() -> tide::Result<()> {
 }
 
 async fn get_index(req: Request<ServerState>) -> tide::Result {
+    log::info!("get_index");
     let name = normalize_topic(req.param("name")?);
     let mut path = req.state().args.root_dir.clone();
+    path.push("indexes");
     path.push(format!("{}.json", name));
 
     let index = smol::fs::read_to_string(path).await?;
@@ -113,8 +115,13 @@ async fn create_index(mut req: Request<ServerState>) -> tide::Result {
     let index: Index = req.body_json().await?;
     let name = normalize_topic(&index.name);
     let mut path = req.state().args.root_dir.clone();
-    path.push(format!("{}.json", name));
+    path.push("indexes");
+
+    if !path.exists() {
+        smol::fs::create_dir_all(&path).await?;
+    }
 
+    path.push(format!("{}.json", name));
     if path.exists() {
         return Err(to_badreq(anyhow!("Index already exists")));
     }
diff --git a/ui/src/lib/img.ts b/ui/src/lib/img.ts
index 1b2e066..802d0fa 100644
--- a/ui/src/lib/img.ts
+++ b/ui/src/lib/img.ts
@@ -1,7 +1,12 @@
 // Img server address
-//export const img_server: string = "http://localhost:2342";
+//export const img_server: string = "http://127.0.0.1:2342";
 export const img_server: string = "https://img.smdhi.xyz:8080";
 
+interface Index {
+    name: string;
+    topics: string[];
+}
+
 export async function get_image_names(topic: string): Promise<string[]> {
   try {
     // Make a GET request to the endpoint
@@ -38,3 +43,31 @@ async function processFile(topic: string, file) {
       throw new Error(`Error in upload: ${response.statusText}`);
     }
 }
+
+export async function get_index(index: string): Promise<Index> {
+    const response = await fetch(`${img_server}/index/${index}`);
+    //const response = await fetch(`http://127.0.0.1:2342/index/test`);
+
+    console.log("response\n", response);
+    if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    // Parse the json and check it matches the `Index` type
+    const data: Index = await response.json();
+
+    return data;
+}
+
+export async function create_index(
+    index: string,
+    topics: list[string]): Promise<void> {
+    // Make a POST request to the img server /new-index with a json body
+    const response = await fetch(`${img_server}/new-index`, {
+        method: 'POST',
+        body: JSON.stringify({
+            name: index,
+            topics: topics
+        }),
+    });
+}
diff --git a/ui/src/routes/+page.ts b/ui/src/routes/+page.ts
index 6a831ef..51317a3 100644
--- a/ui/src/routes/+page.ts
+++ b/ui/src/routes/+page.ts
@@ -1,5 +1,3 @@
-import { get_image_names } from '$lib/img.ts';
-
 export function load({ params }) {
     return {
     }
diff --git a/ui/src/routes/[topic]/+page.ts b/ui/src/routes/[topic]/+page.ts
index d485639..a65cf4e 100644
--- a/ui/src/routes/[topic]/+page.ts
+++ b/ui/src/routes/[topic]/+page.ts
@@ -1,7 +1,7 @@
 import { get_image_names } from '$lib/img.ts';
 
-export function load({ params }) {
-    const imgs = get_image_names(params.topic);
+export async function load({ params }) {
+    const imgs = await get_image_names(params.topic);
     return {
         topic: params.topic,
         images: imgs,
diff --git a/ui/src/routes/index/[index]/+page.svelte b/ui/src/routes/index/[index]/+page.svelte
index 9d5192e..4878f51 100644
--- a/ui/src/routes/index/[index]/+page.svelte
+++ b/ui/src/routes/index/[index]/+page.svelte
@@ -1,8 +1,8 @@
 <script>
-    import Nav from "../../components/Nav.svelte";
+    import Nav from "../../../components/Nav.svelte";
     import { img_server, handle_file_upload } from "$lib/img.ts";
     import { goto } from "$app/navigation";
-    import Uploading from '../../components/Uploading.svelte';
+    import Uploading from '../../../components/Uploading.svelte';
     export let data;
     const index = data.index_name;
     const topics = data.topics;
@@ -17,7 +17,7 @@
 <ul>
     {#each topics as topic}
         <li>
-            <a href="/{index}/{topic}">{topic}</a>
+            <a href="/{topic}">{topic}</a>
         </li>
     {/each}
 </ul>
diff --git a/ui/src/routes/index/[index]/+page.ts b/ui/src/routes/index/[index]/+page.ts
index 4ab1faf..d07254f 100644
--- a/ui/src/routes/index/[index]/+page.ts
+++ b/ui/src/routes/index/[index]/+page.ts
@@ -1,9 +1,9 @@
-import { get_image_names, get_index } from '$lib/img.ts';
+import { get_index } from '$lib/img.ts';
 
-export function load({ params }) {
-    const imgs = get_image_names(params.index);
+export async function load({ params }) {
+    const index = await get_index(params.index);
     return {
         index_name: params.index,
-        topics: get_index(params.index).topics,
+        topics: index.topics,
     }
 }
diff --git a/ui/src/routes/new-index/+page.svelte b/ui/src/routes/new-index/+page.svelte
index 1870eba..1c7dbcd 100644
--- a/ui/src/routes/new-index/+page.svelte
+++ b/ui/src/routes/new-index/+page.svelte
@@ -1,5 +1,6 @@
 <script>
     import { create_index } from "$lib/img.ts";
+    import Nav from '../../components/Nav.svelte';
     let name;
     let topics;
     let submit_result;