diff --git a/my-app/src/Components/Portfolio/Portfolio.jsx b/my-app/src/Components/Portfolio/Portfolio.jsx
deleted file mode 100644
index a7abe4d..0000000
--- a/my-app/src/Components/Portfolio/Portfolio.jsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import styles from "./Portfolio.module.css";
-import { useContext, useEffect, useState } from "react";
-import { Link } from "react-router-dom";
-import { ThemeContext } from "../../providers/theme.tsx";
-
-export const Portfolio = () => {
-  const [imageId, setImageId] = useState(null);
-  const { theme } = useContext(ThemeContext);
-
-  const [portfolioData, setPortfolioData] = useState(null);
-
-  useEffect(() => {
-    fetch("/photos.json")
-      .then((res) => res.json())
-      .then((data) => {
-        setPortfolioData(data);
-        console.log(data);
-      });
-  }, []);
-  return (
-    portfolioData && (
-      <div className={`${styles["portfolio__container"]} ${styles[theme]}`}>
-        <h1 className={`${styles["portfolio__header"]} ${styles[theme]}`}>
-          Our portfolio
-        </h1>
-        <div className={styles["portfolio"]}>
-          <h3 className={`${styles["portfolio__info"]} ${styles[theme]}`}>
-            We are experienced in taking photos for all kinds of circumstances.
-            <br />
-            Below is a summary of our extensive portfolio, with us you will
-            always look good!
-          </h3>
-        </div>
-        <div className={styles["portfolio__photos"]}>
-          {portfolioData.photos.map((photo) => (
-            <div key={photo.id} className={styles["portfolio__items"]}>
-              <Link to={`/portfolio/${photo.id}`}>
-                <img
-                  src={photo.url}
-                  className={styles["portfolio__photo"]}
-                  data-id={photo.id}
-                  onClick={() => {
-                    setImageId(photo.id);
-                  }}
-                />
-              </Link>
-            </div>
-          ))}
-        </div>
-      </div>
-    )
-  );
-};
diff --git a/my-app/src/Components/Portfolio/Portfolio.tsx b/my-app/src/Components/Portfolio/Portfolio.tsx
index a0838c0..19712a1 100644
--- a/my-app/src/Components/Portfolio/Portfolio.tsx
+++ b/my-app/src/Components/Portfolio/Portfolio.tsx
@@ -2,14 +2,14 @@ import styles from "./Portfolio.module.css";
 import { useContext, useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import { ThemeContext } from "../../providers/theme.tsx";
-import { PortfolioInterface } from "./Portfolio.types";
+import { PortfolioDataInterface } from "./Portfolio.types";
 
 
 export const Portfolio = () => {
-  const [setImageId] = useState(null);
+  const [_, setImageId] = useState<number | null>(null);
   const { theme } = useContext(ThemeContext);
 
-  const [portfolioData, setPortfolioData] = useState<PortfolioInterface | null>(null);
+  const [portfolioData, setPortfolioData] = useState<PortfolioDataInterface | null>(null);
 
   useEffect(() => {
     fetch("/photos.json")
diff --git a/my-app/src/Components/Portfolio/Portfolio.types.ts b/my-app/src/Components/Portfolio/Portfolio.types.ts
index 88fbc4d..7dc8356 100644
--- a/my-app/src/Components/Portfolio/Portfolio.types.ts
+++ b/my-app/src/Components/Portfolio/Portfolio.types.ts
@@ -5,4 +5,8 @@ export interface PortfolioInterface {
     price: number;
     url: string;
     width: number;
-  }
\ No newline at end of file
+  }
+
+export interface PortfolioDataInterface {
+  photos: Array<PortfolioInterface>;
+}
\ No newline at end of file