diff --git a/api/src/rest/ingredient/types.rs b/api/src/rest/ingredient/types.rs
index e4735a1..1adaf75 100644
--- a/api/src/rest/ingredient/types.rs
+++ b/api/src/rest/ingredient/types.rs
@@ -9,11 +9,11 @@ pub struct Ingredient {
 }
 
 impl From<domain::Ingredient> for Ingredient {
-    fn from(ingr: domain::Ingredient) -> Self {
+    fn from(app: domain::Ingredient) -> Self {
         Self {
-            key: ingr.key,
-            lang: ingr.lang.into(),
-            name: ingr.name,
+            key: app.key,
+            lang: app.lang.into(),
+            name: app.name,
         }
     }
 }
diff --git a/web/domain/ingredient/types.ts b/web/domain/ingredient/types.ts
new file mode 100644
index 0000000..8f44f46
--- /dev/null
+++ b/web/domain/ingredient/types.ts
@@ -0,0 +1,4 @@
+export interface Ingredient {
+  readonly key: string;
+  readonly name: string;
+}
diff --git a/web/repo/ingredient/rest.ts b/web/repo/ingredient/rest.ts
new file mode 100644
index 0000000..45c6db6
--- /dev/null
+++ b/web/repo/ingredient/rest.ts
@@ -0,0 +1,29 @@
+import { Ingredient } from "../../domain/ingredient/types.ts";
+import { RestLang } from "../misc_types.ts";
+import { IngredientRepo } from "./types.ts";
+
+export class RestIngredientRepo implements IngredientRepo {
+  async fetchIngredients(): Promise<Ingredient[]> {
+    const res = await fetch(
+      "http://localhost:33333/api/ingredients",
+      { headers: { "content-type": "application/json" } },
+    );
+
+    const restIngrs: RestIngredient[] = await res.json();
+
+    return restIngrs.map(intoAppIngredient);
+  }
+}
+
+export interface RestIngredient {
+  readonly key: string;
+  readonly lang: RestLang;
+  readonly name: string;
+}
+
+export function intoAppIngredient(rest: RestIngredient): Ingredient {
+  return {
+    key: rest.key,
+    name: rest.name,
+  };
+}
diff --git a/web/repo/ingredient/types.ts b/web/repo/ingredient/types.ts
new file mode 100644
index 0000000..3907757
--- /dev/null
+++ b/web/repo/ingredient/types.ts
@@ -0,0 +1,5 @@
+import { Ingredient } from "../../domain/ingredient/types.ts";
+
+export interface IngredientRepo {
+  fetchIngredients(): Promise<Ingredient[]>;
+}
diff --git a/web/repo/misc_types.ts b/web/repo/misc_types.ts
new file mode 100644
index 0000000..3bc6247
--- /dev/null
+++ b/web/repo/misc_types.ts
@@ -0,0 +1,4 @@
+export enum RestLang {
+  Rus = "Rus",
+  Eng = "Eng",
+}
diff --git a/web/server.ts b/web/server.ts
index fe1ef29..e059a60 100644
--- a/web/server.ts
+++ b/web/server.ts
@@ -6,6 +6,7 @@ import * as log from "./log.ts";
 import { HomePage } from "./views/home.ts";
 import { RecipesPage } from "./views/recipes.ts";
 import { IngredientsPage } from "./views/ingredients.ts";
+import { RestIngredientRepo } from "./repo/ingredient/rest.ts";
 
 if (import.meta.main) {
   await main();
@@ -52,6 +53,9 @@ async function handleRequest(req: Request): Promise<Response> {
     } else if (ctx.locPath === "/recipes") {
       return createHtmlResponse(ren.render(RecipesPage(ctx)));
     } else if (ctx.locPath === "/ingredients") {
+      const repo = new RestIngredientRepo();
+      const ingredients = await repo.fetchIngredients();
+      console.log({ ingredients });
       return createHtmlResponse(ren.render(IngredientsPage(ctx)));
     } else {
       return createHtmlResponse(ren.render(E404Page(ctx)), 404);
@@ -86,7 +90,6 @@ async function tryCreateFileResponse(urlPath: string): Promise<Response> {
 class SkipFile extends Error {}
 
 function createFileResponse(content: string, fileExt: string): Response {
-  log.debug(fileExt);
   return new Response(content, {
     headers: getContentTypeHeader(fileExt),
   });
@@ -115,5 +118,5 @@ function getContentTypeByExt(fileExt: string): string {
 }
 
 function getFileExt(filePath: string): string {
-  return filePath.slice((filePath.lastIndexOf(".") >>> 0) + 1);
+  return filePath.slice((filePath.lastIndexOf(".") - 1 >>> 0) + 2);
 }