diff --git a/app/nfts/[slug]/error.tsx b/app/nfts/[slug]/error.tsx
new file mode 100644
index 0000000..fa7462e
--- /dev/null
+++ b/app/nfts/[slug]/error.tsx
@@ -0,0 +1,17 @@
+"use client";
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error;
+  reset: () => void;
+}) {
+  return (
+    <div className="min-h-screen text-white flex flex-col space-y-10 justify-center items-center">
+      <h2 className="text-2xl font-bold">Something went wrong!</h2>
+      <p className="text-sm">{error.message}</p>
+      <button onClick={() => reset()}>Try again</button>
+    </div>
+  );
+}
diff --git a/app/nfts/[slug]/layout.tsx b/app/nfts/[slug]/layout.tsx
new file mode 100644
index 0000000..0610ee2
--- /dev/null
+++ b/app/nfts/[slug]/layout.tsx
@@ -0,0 +1,14 @@
+import Header from "@/components/Header";
+
+export default function NFTsLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="min-h-screen bg-[url('/images/background.jpg')] bg-cover bg-fixed bg-black/80 bg-blend-multiply">
+      <Header />
+      {children}
+    </div>
+  );
+}
diff --git a/app/nfts/[slug]/loading.tsx b/app/nfts/[slug]/loading.tsx
new file mode 100644
index 0000000..9384f45
--- /dev/null
+++ b/app/nfts/[slug]/loading.tsx
@@ -0,0 +1,11 @@
+import NFTCardSkeleton from "@/components/NFTCardSkeleton";
+
+export default function Loading() {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5 mx-24 mt-20 py-10">
+      {[...Array(8)].map((_, i) => (
+        <NFTCardSkeleton key={i} />
+      ))}
+    </div>
+  );
+}
diff --git a/app/nfts/[slug]/page.tsx b/app/nfts/[slug]/page.tsx
new file mode 100644
index 0000000..b27d12d
--- /dev/null
+++ b/app/nfts/[slug]/page.tsx
@@ -0,0 +1,66 @@
+import React from "react";
+import NFTCard from "@/components/NFTCard";
+import { NFT } from "@/typings";
+import { ethers } from "ethers";
+import abi from "@/artifacts/contracts/ByteBunch.sol/ByteBunch.json";
+
+type Props = {
+  params: {
+    slug: string;
+  };
+};
+
+const ipfsToHttps = (ipfs: string) => {
+  const gateway = "https://ipfs.io/ipfs/";
+  const url = ipfs.replace("ipfs://", gateway);
+  return url;
+};
+
+const getData = async (address: string) => {
+  try {
+    const signer = new ethers.InfuraProvider(
+      "sepolia",
+      process.env.INFURA_API_KEY
+    );
+    const contract = new ethers.Contract(
+      process.env.NEXT_PUBLIC_CONTRACT_ADDRESS!,
+      abi.abi,
+      signer
+    );
+
+    const tokens = await contract.walletOfOwner(address);
+
+    const data = await Promise.all(
+      tokens.map(async (token: any) => {
+        const metadata = await contract.tokenURI(token);
+        const metadataJSON = await fetch(ipfsToHttps(metadata));
+        const metadataJSONParsed = await metadataJSON.json();
+        metadataJSONParsed.image = ipfsToHttps(metadataJSONParsed.image);
+        return metadataJSONParsed;
+      })
+    );
+
+    return data;
+  } catch (error: any) {
+    throw new Error(error.message);
+  }
+};
+
+const NFTs = async ({ params }: Props) => {
+  const address = params.slug;
+
+  const data: NFT[] = await getData(address);
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5 mx-24 mt-20 py-10">
+      {data.length > 0 ? (
+        data.map((item) => <NFTCard key={item.name} data={item} />)
+      ) : (
+        <div className="text-center text-2xl text-gray-50 col-span-4">
+          No NFTs found for address {address}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default NFTs;
diff --git a/app/nfts/page.tsx b/app/nfts/page.tsx
deleted file mode 100644
index 35b5155..0000000
--- a/app/nfts/page.tsx
+++ /dev/null
@@ -1,165 +0,0 @@
-"use client";
-import React, { use, useEffect, useState } from "react";
-import { sepolia } from "@/utils/networks";
-import { toast } from "react-hot-toast";
-import { ethers } from "ethers";
-import abi from "@/artifacts/contracts/ByteBunch.sol/ByteBunch.json";
-import Image from "next/image";
-
-type Props = {};
-
-declare let window: any;
-
-export type NFT = {
-  dna: string;
-  name: string;
-  description: string;
-  image: string;
-  edition: number;
-  date: number;
-  attributes: Attribute[];
-};
-
-export type Attribute = {
-  trait_type: string;
-  value: string;
-};
-
-const NFTs = (props: Props) => {
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string>();
-  const [data, setData] = useState<NFT[]>([]);
-
-  const switchNetwork = async () => {
-    try {
-      await window.ethereum.request({
-        method: "wallet_switchEthereumChain",
-        params: [{ chainId: sepolia.chainId }],
-      });
-    } catch (error) {
-      toast.error("Please switch to Sepolia Network");
-    }
-  };
-
-  const getSigner = async () => {
-    try {
-      const provider = new ethers.BrowserProvider(window.ethereum);
-      const network = await provider.getNetwork();
-      const chainId = Number(ethers.formatUnits(network.chainId)) * 10e17;
-
-      if (chainId !== parseInt(sepolia.chainId)) {
-        switchNetwork();
-        throw new Error("Please switch to Sepolia Network and try again");
-      }
-
-      const signer = await provider.getSigner();
-      return signer;
-    } catch (error: any) {
-      throw new Error(error.message.split("(")[0]);
-    }
-  };
-
-  const getContract = async () => {
-    try {
-      const signer = await getSigner();
-
-      const contract = new ethers.Contract(
-        process.env.NEXT_PUBLIC_CONTRACT_ADDRESS!,
-        abi.abi,
-        signer
-      );
-
-      return contract;
-    } catch (error: any) {
-      throw new Error(error.message.split("(")[0]);
-    }
-  };
-
-  const getTokenURI = async (tokenId: Number) => {
-    try {
-      const contract = await getContract();
-      const tokenURI = await contract.tokenURI(tokenId);
-
-      return tokenURI;
-    } catch (error: any) {
-      throw new Error(error.message.split("(")[0]);
-    }
-  };
-
-  const getMetadata = async (tokenId: Number) => {
-    try {
-      const tokenURI = await getTokenURI(tokenId);
-      const url = ipfsToHttps(tokenURI);
-
-      const metadata = await fetch(url);
-      const metadataJSON: NFT = await metadata.json();
-      metadataJSON.image = ipfsToHttps(metadataJSON.image);
-
-      return metadataJSON;
-    } catch (error: any) {
-      throw new Error(error.message.split("(")[0]);
-    }
-  };
-
-  useEffect(() => {
-    const loadNFTs = async () => {
-      setLoading(true);
-      try {
-        const signer = await getSigner();
-        const contract = await getContract();
-        const tokens = await contract.walletOfOwner(signer.getAddress());
-
-        tokens.map(async (token: any) => {
-          const data = await getMetadata(token);
-          setData((prev: any) => [...prev, data]);
-        });
-      } catch (error: any) {
-        setError(error.message.split("(")[0]);
-      }
-      setLoading(false);
-    };
-    loadNFTs();
-  }, []);
-
-  const ipfsToHttps = (ipfs: string) => {
-    const gateway = "https://ipfs.io/ipfs/";
-    const url = ipfs.replace("ipfs://", gateway);
-    return url;
-  };
-
-  if (loading) return <div>Loading...</div>;
-  if (error) return <div>{error}</div>;
-  
-  return (
-    <div>
-      <h1>NFTs</h1>
-      <div className="grid grid-cols-3 gap-5 mx-24">
-        {data.map((item) => (
-          <div
-            key={item.name}
-            className="border-2 border-gray-200 rounded-lg p-4"
-          >
-            <Image width={500} height={500} src={item.image} alt={item.name} />
-            <div className="text-center">
-              <h2 className="text-lg font-bold">{item.name}</h2>
-              <p className="text-sm">{item.description}</p>
-            </div>
-            <div>
-              {item.attributes.map((attribute) => (
-                <div
-                  key={attribute.trait_type + attribute.value}
-                  className="text-sm"
-                >
-                  <span className="font-bold">{attribute.trait_type}: </span>
-                  <span>{attribute.value}</span>
-                </div>
-              ))}
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-};
-
-export default NFTs;
diff --git a/components/Header.tsx b/components/Header.tsx
new file mode 100644
index 0000000..8b9c953
--- /dev/null
+++ b/components/Header.tsx
@@ -0,0 +1,22 @@
+import Link from "next/link";
+
+export default function Header() {
+  return (
+    <header className="bg-gray-900 shadow fixed top-0 w-full z-50">
+      <nav
+        className="mx-auto flex max-w-7xl items-center p-6 lg:px-8"
+        aria-label="Global"
+      >
+        <div className="flex-1 flex justify-around">
+          <Link href="/" className="-m-1.5 p-1.5">
+            <h1 className="text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl">
+              <span className="text-cyan-500">Byte</span>{" "}
+              <span className="text-amber-500">Bunch</span>
+            </h1>
+            <span className="sr-only">Byte Bunch</span>
+          </Link>
+        </div>
+      </nav>
+    </header>
+  );
+}
diff --git a/components/NFTCard.tsx b/components/NFTCard.tsx
new file mode 100644
index 0000000..844bc3a
--- /dev/null
+++ b/components/NFTCard.tsx
@@ -0,0 +1,33 @@
+import { NFT } from "@/typings";
+import Image from "next/image";
+import Link from "next/link";
+import React from "react";
+
+type Props = {
+  data: NFT;
+};
+
+const NFTCard = ({ data }: Props) => {
+  return (
+    <Link href={`/nfts/${data.name}`}>
+      <div className="max-w-sm mx-auto bg-gradient-to-l from-cyan-900 to-cyan-900 bg-black/70 bg-blend-multiply border border-cyan-950 rounded-lg shadow hover:shadow-md group transition-all duration-300 ease-in-out">
+        <div className="w-full h-80 overflow-hidden rounded-t-lg shadow">
+          <Image
+            className="h-full w-full object-cover rounded-t-lg group-hover:scale-110 transition-all duration-300 ease-in-out"
+            src={data.image}
+            alt={data.name}
+            width={500}
+            height={500}
+          />
+        </div>
+        <div className="p-5">
+          <h5 className="mb-2 text-xl font-bold tracking-tight text-gray-50">
+            {data.name}
+          </h5>
+        </div>
+      </div>
+    </Link>
+  );
+};
+
+export default NFTCard;
diff --git a/components/NFTCardSkeleton.tsx b/components/NFTCardSkeleton.tsx
new file mode 100644
index 0000000..0b03ff3
--- /dev/null
+++ b/components/NFTCardSkeleton.tsx
@@ -0,0 +1,18 @@
+const NFTCardSkeleton = () => {
+  return (
+    <div className="max-w-sm w-full mx-auto bg-gradient-to-l from-cyan-900 to-cyan-900 bg-black/70 bg-blend-multiply border border-cyan-950 rounded-lg shadow hover:shadow-md group transition-all duration-300 ease-in-out">
+      <div className="w-full h-80 overflow-hidden rounded-t-lg shadow">
+        <div className="w-full h-full bg-gray-800 animate-pulse"></div>
+      </div>
+      <div className="p-5">
+        <h5 className="mb-2 text-xl font-bold tracking-tight text-gray-50">
+          <div className="h-full w-full rounded-full bg-gray-800 animate-pulse text-transparent">
+            &nbsp;
+          </div>
+        </h5>
+      </div>
+    </div>
+  );
+};
+
+export default NFTCardSkeleton;
diff --git a/typings.d.ts b/typings.d.ts
new file mode 100644
index 0000000..857eea0
--- /dev/null
+++ b/typings.d.ts
@@ -0,0 +1,14 @@
+export type NFT = {
+  dna: string;
+  name: string;
+  description: string;
+  image: string;
+  edition: number;
+  date: number;
+  attributes: Attribute[];
+};
+
+export type Attribute = {
+  trait_type: string;
+  value: string;
+};