diff --git a/src/assets/images/landscapes/ThomasGainsborough/TheBlueBoy.jpg b/src/assets/images/landscapes/ThomasGainsborough/TheBlueBoy.jpg
index 910265b..3ff819d 100644
Binary files a/src/assets/images/landscapes/ThomasGainsborough/TheBlueBoy.jpg and b/src/assets/images/landscapes/ThomasGainsborough/TheBlueBoy.jpg differ
diff --git a/src/pages/ArtDescription.jsx b/src/pages/ArtDescription.jsx
index 72b3cf6..4aeb382 100644
--- a/src/pages/ArtDescription.jsx
+++ b/src/pages/ArtDescription.jsx
@@ -9,19 +9,110 @@ import {
   Tab,
 } from '@nextui-org/react';
 
+const getArtItemById = (id) => {
+  for (const listKey in allLists) {
+    if (Object.prototype.hasOwnProperty.call(allLists, listKey)) {
+      const item = allLists[listKey].find((item) => item.id.toString() === id);
+      if (item) return item;
+    }
+  }
+  return null;
+};
+
+const FlagImage = ({ countryCode }) => {
+  const flagSrc = countryCode
+    ? `http://purecatamphetamine.github.io/country-flag-icons/3x2/${countryCode}.svg`
+    : '';
+  return flagSrc ? (
+    <Image
+      alt={countryCode}
+      src={flagSrc}
+      width={24}
+      height={16}
+      objectFit="cover"
+      className="ml-2"
+    />
+  ) : null;
+};
+
+const ArtInfo = ({ artItem }) => (
+  <Card className="shadow-xl rounded-lg">
+    <CardHeader className="mb-1">
+      <div>
+        <h2 className="text-3xl font-bold text-gray-800">{artItem.name}</h2>
+        <p className="text-sm text-gray-600 mt-1">
+          by {artItem.artistInfo.name}
+        </p>
+      </div>
+    </CardHeader>
+    <CardBody className="space-y-4">
+      <p className="text-gray-700">{artItem.description}</p>
+      <p>
+        <span className="font-semibold">Year: </span>
+        {artItem.date}
+      </p>
+      <p>
+        <span className="font-semibold">Style: </span>
+        {artItem.style}
+      </p>
+      <p>
+        <span className="font-semibold">Dimensions: </span>
+        {artItem.dimensions}
+      </p>
+      <div className="flex items-center">
+        <span className="font-semibold">Location: </span>
+        <span className="ml-2">{artItem.location}</span>
+        <FlagImage countryCode={artItem.countryCode} />
+      </div>
+    </CardBody>
+  </Card>
+);
+const ArtistDetails = ({ artistInfo }) => (
+  <Card className="shadow-xl rounded-lg">
+    <CardHeader className="mb-1 flex items-center space-x-4">
+      <Image
+        src={artistInfo.imageUrl}
+        alt={artistInfo.name}
+        width={100}
+        height={100}
+        objectFit="cover"
+        className="rounded-full"
+      />
+      <div>
+        <h2 className="text-3xl font-bold text-gray-800">{artistInfo.name}</h2>
+        <div className="flex items-center">
+          {artistInfo.nationality}
+          <FlagImage countryCode={artistInfo.countryCode} />
+        </div>
+      </div>
+    </CardHeader>
+    <CardBody className="space-y-4">
+      <p className="text-gray-700">{artistInfo.bio}</p>
+      <p>
+        <span className="font-semibold">Birth Year: </span>
+        {artistInfo.birthYear}
+      </p>
+      <p>
+        <span className="font-semibold">Death Year: </span>
+        {artistInfo.deathYear || 'N/A'}
+      </p>
+      <p>
+        <span className="font-semibold">Notable Works: </span>
+        {artistInfo.notableWorks.join(', ')}
+      </p>
+    </CardBody>
+  </Card>
+);
+
 const ArtDescription = () => {
   const { id } = useParams();
-  const artItem = findArtItemById(id);
+  const artItem = getArtItemById(id);
 
   if (!artItem) {
     return <div className="text-xl font-bold p-4">Artwork not found</div>;
   }
-
-  const flagSrc = getFlagSrc(artItem.countryCode);
-
   return (
     <div className="flex flex-col md:flex-row p-4 gap-6">
-      {/* Image Section */}
       <div className="flex-1">
         <Image
           src={artItem.img}
@@ -32,84 +123,13 @@ const ArtDescription = () => {
           className="shadow-lg rounded-lg"
         />
       </div>
-
-      {/* Info Section */}
       <div className="flex-1">
         <Tabs aria-label="Options">
           <Tab key="Art" title="Art Info">
-            <Card className="shadow-xl rounded-lg">
-              {/* Card Header */}
-              <CardHeader className="mb-1">
-                <div>
-                  <h2 className="text-3xl font-bold text-gray-800">
-                    {artItem.name}
-                  </h2>
-                  <p className="text-sm text-gray-600 mt-1">
-                    by {artItem.artistInfo.name}
-                  </p>
-                </div>
-              </CardHeader>
-
-              {/* Card Body */}
-              <CardBody className="space-y-4">
-                <div className="text-gray-700">{artItem.description}</div>
-
-                <div>
-                  <span className="font-semibold">Year: </span>
-                  {artItem.date}
-                </div>
-                <div>
-                  <span className="font-semibold">Style: </span>
-                  {artItem.style}
-                </div>
-                <div>
-                  <span className="font-semibold">Dimensions: </span>
-                  {artItem.dimensions}
-                </div>
-
-                {/* Location Detail */}
-                <div>
-                  <span className="font-semibold">Location: </span>
-                  {artItem.location}
-                  {flagSrc && (
-                    <img
-                      alt={artItem.countryCode}
-                      src={flagSrc}
-                      className="inline-block w-6 ml-2"
-                    />
-                  )}
-                </div>
-              </CardBody>
-            </Card>
+            <ArtInfo artItem={artItem} />
           </Tab>
-
           <Tab key="Artist" title="Artist Info">
-            <Card className="shadow-xl rounded-lg">
-              {/* Card Header */}
-              <CardHeader className="mb-1">
-                <h2 className="text-3xl font-bold text-gray-800">
-                  {artItem.artistInfo.name}
-                </h2>
-              </CardHeader>
-
-              {/* Card Body */}
-              <CardBody className="space-y-4">
-                <div className="text-gray-700">{artItem.artistInfo.bio}</div>
-                <div>
-                  <span className="font-semibold">Birth Year: </span>
-                  {artItem.artistInfo.birthYear}
-                </div>
-                <div>
-                  <span className="font-semibold">Death Year: </span>
-                  {artItem.artistInfo.deathYear || 'N/A'}
-                </div>
-                <div>
-                  <span className="font-semibold">Nationality: </span>
-                  {artItem.artistInfo.nationality}
-                </div>
-                {/* Add other artist information fields here */}
-              </CardBody>
-            </Card>
+            <ArtistDetails artistInfo={artItem.artistInfo} />
           </Tab>
         </Tabs>
       </div>
@@ -117,20 +137,4 @@ const ArtDescription = () => {
   );
 };
 
-const findArtItemById = (id) => {
-  for (const listKey in allLists) {
-    if (Object.prototype.hasOwnProperty.call(allLists, listKey)) {
-      const item = allLists[listKey].find((item) => item.id.toString() === id);
-      if (item) return item;
-    }
-  }
-  return null;
-};
-
-const getFlagSrc = (countryCode) => {
-  return countryCode
-    ? `http://purecatamphetamine.github.io/country-flag-icons/3x2/${countryCode}.svg`
-    : '';
-};
-
 export default ArtDescription;