diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index fad28ba..3da0fa4 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -1,5 +1,5 @@
 import { Routes } from '@angular/router';
-import { RecipeView } from './recipe-view/recipe-view.component';
+import { RecipeView } from './recipe-view/recipe-view';
 import { RecipesPage } from './recipes-page/recipes-page';
 
 export const routes: Routes = [
diff --git a/src/app/model/ImageView.model.ts b/src/app/model/ImageView.model.ts
new file mode 100644
index 0000000..d61a982
--- /dev/null
+++ b/src/app/model/ImageView.model.ts
@@ -0,0 +1,10 @@
+import { ResourceOwner } from "./ResourceOwner.model";
+
+export interface ImageView {
+    alt: string;
+    filename: string;
+    height: number | null;
+    owner: ResourceOwner;
+    url: string;
+    width: number | null;
+}
diff --git a/src/app/model/Recipe.model.ts b/src/app/model/Recipe.model.ts
index dcf23cb..2ecfafc 100644
--- a/src/app/model/Recipe.model.ts
+++ b/src/app/model/Recipe.model.ts
@@ -1,3 +1,6 @@
+import { ResourceOwner } from './ResourceOwner.model';
+import { ImageView } from './ImageView.model';
+
 export interface RecipeInfoViews {
     slice: {
         number: number;
@@ -21,16 +24,3 @@ export interface Recipe {
     title: string;
 }
 
-export interface ResourceOwner {
-    id: number;
-    username: string;
-}
-
-export interface ImageView {
-    alt: string;
-    filename: string;
-    height: number | null;
-    owner: ResourceOwner;
-    url: string;
-    width: number | null;
-}
diff --git a/src/app/model/ResourceOwner.model.ts b/src/app/model/ResourceOwner.model.ts
new file mode 100644
index 0000000..1fba2b2
--- /dev/null
+++ b/src/app/model/ResourceOwner.model.ts
@@ -0,0 +1,4 @@
+export interface ResourceOwner {
+    id: number;
+    username: string;
+}
diff --git a/src/app/recipe-view/recipe-view-card/recipe-view-card.component.css b/src/app/recipe-view/recipe-view-card/recipe-view-card.css
similarity index 100%
rename from src/app/recipe-view/recipe-view-card/recipe-view-card.component.css
rename to src/app/recipe-view/recipe-view-card/recipe-view-card.css
diff --git a/src/app/recipe-view/recipe-view-card/recipe-view-card.component.html b/src/app/recipe-view/recipe-view-card/recipe-view-card.html
similarity index 100%
rename from src/app/recipe-view/recipe-view-card/recipe-view-card.component.html
rename to src/app/recipe-view/recipe-view-card/recipe-view-card.html
diff --git a/src/app/recipe-view/recipe-view-card/recipe-view-card.component.spec.ts b/src/app/recipe-view/recipe-view-card/recipe-view-card.spec.ts
similarity index 89%
rename from src/app/recipe-view/recipe-view-card/recipe-view-card.component.spec.ts
rename to src/app/recipe-view/recipe-view-card/recipe-view-card.spec.ts
index d3083d8..5fcdc48 100644
--- a/src/app/recipe-view/recipe-view-card/recipe-view-card.component.spec.ts
+++ b/src/app/recipe-view/recipe-view-card/recipe-view-card.spec.ts
@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { RecipeViewCard } from './recipe-view-card.component';
+import { RecipeViewCard } from './recipe-view-card';
 
 describe('Card', () => {
     let component: RecipeViewCard;
diff --git a/src/app/recipe-view/recipe-view-card/recipe-view-card.component.ts b/src/app/recipe-view/recipe-view-card/recipe-view-card.ts
similarity index 87%
rename from src/app/recipe-view/recipe-view-card/recipe-view-card.component.ts
rename to src/app/recipe-view/recipe-view-card/recipe-view-card.ts
index 338d62f..2441a4e 100644
--- a/src/app/recipe-view/recipe-view-card/recipe-view-card.component.ts
+++ b/src/app/recipe-view/recipe-view-card/recipe-view-card.ts
@@ -6,8 +6,8 @@ import { ImageService } from '../../service/image.service';
 @Component({
     selector: 'app-recipe-view-card',
     imports: [],
-    templateUrl: './recipe-view-card.component.html',
-    styleUrl: './recipe-view-card.component.css',
+    templateUrl: './recipe-view-card.html',
+    styleUrl: './recipe-view-card.css',
 })
 export class RecipeViewCard {
     @Input({ required: true })
diff --git a/src/app/recipe-view/recipe-view.component.css b/src/app/recipe-view/recipe-view.css
similarity index 100%
rename from src/app/recipe-view/recipe-view.component.css
rename to src/app/recipe-view/recipe-view.css
diff --git a/src/app/recipe-view/recipe-view.component.html b/src/app/recipe-view/recipe-view.html
similarity index 100%
rename from src/app/recipe-view/recipe-view.component.html
rename to src/app/recipe-view/recipe-view.html
diff --git a/src/app/recipe-view/recipe-view.component.spec.ts b/src/app/recipe-view/recipe-view.spec.ts
similarity index 91%
rename from src/app/recipe-view/recipe-view.component.spec.ts
rename to src/app/recipe-view/recipe-view.spec.ts
index 10adff5..fb6f9a5 100644
--- a/src/app/recipe-view/recipe-view.component.spec.ts
+++ b/src/app/recipe-view/recipe-view.spec.ts
@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { RecipeView } from './recipe-view.component';
+import { RecipeView } from './recipe-view';
 
 describe('Recipe', () => {
     let component: RecipeView;
diff --git a/src/app/recipe-view/recipe-view.component.ts b/src/app/recipe-view/recipe-view.ts
similarity index 82%
rename from src/app/recipe-view/recipe-view.component.ts
rename to src/app/recipe-view/recipe-view.ts
index 25c3f24..9f4c6ec 100644
--- a/src/app/recipe-view/recipe-view.component.ts
+++ b/src/app/recipe-view/recipe-view.ts
@@ -1,14 +1,14 @@
 import { Component, inject, resource } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { RecipeService } from '../recipe.service';
-import { RecipeViewCard } from './recipe-view-card/recipe-view-card.component';
+import { RecipeService } from '../service/recipe.service';
+import { RecipeViewCard } from './recipe-view-card/recipe-view-card';
 import { injectQuery } from '@tanstack/angular-query-experimental';
 
 @Component({
     selector: 'app-recipe-view',
     imports: [RecipeViewCard],
-    templateUrl: './recipe-view.component.html',
-    styleUrl: './recipe-view.component.css',
+    templateUrl: './recipe-view.html',
+    styleUrl: './recipe-view.css',
 })
 export class RecipeView {
     private recipeService = inject(RecipeService);
diff --git a/src/app/recipes-page/recipes-page.ts b/src/app/recipes-page/recipes-page.ts
index f9e87a7..3b4974f 100644
--- a/src/app/recipes-page/recipes-page.ts
+++ b/src/app/recipes-page/recipes-page.ts
@@ -1,5 +1,5 @@
 import { Component, inject } from '@angular/core';
-import { RecipeService } from '../recipe.service';
+import { RecipeService } from '../service/recipe.service';
 import { injectQuery } from '@tanstack/angular-query-experimental';
 import { RouterLink } from '@angular/router';
 
diff --git a/src/app/recipe.service.spec.ts b/src/app/service/recipe.service.spec.ts
similarity index 100%
rename from src/app/recipe.service.spec.ts
rename to src/app/service/recipe.service.spec.ts
diff --git a/src/app/recipe.service.ts b/src/app/service/recipe.service.ts
similarity index 91%
rename from src/app/recipe.service.ts
rename to src/app/service/recipe.service.ts
index dc82330..e07c3c8 100644
--- a/src/app/recipe.service.ts
+++ b/src/app/service/recipe.service.ts
@@ -1,7 +1,7 @@
 import { inject, Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { firstValueFrom, map } from 'rxjs';
-import { Recipe, RecipeInfoViews, RecipeView } from './model/Recipe.model';
+import { Recipe, RecipeInfoViews, RecipeView } from '../model/Recipe.model';
 
 @Injectable({
     providedIn: 'root',