diff --git a/client/src/components/Artifacts/Artifact.tsx b/client/src/components/Artifacts/Artifact.tsx
index 6ece65fe81..24b5371e00 100644
--- a/client/src/components/Artifacts/Artifact.tsx
+++ b/client/src/components/Artifacts/Artifact.tsx
@@ -35,8 +35,8 @@ const extractContent = (
   return '';
 };
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export function Artifact({
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   node,
   ...props
 }: Artifact & {
@@ -76,7 +76,7 @@ export function Artifact({
 
       setArtifacts((prevArtifacts) => {
         if (
-          (prevArtifacts as Record<string, Artifact | undefined>)[artifactKey] &&
+          (prevArtifacts as Record<string, Artifact | undefined>)[artifactKey] != null &&
           prevArtifacts[artifactKey].content === content
         ) {
           return prevArtifacts;
@@ -103,12 +103,7 @@ export function Artifact({
     updateArtifact();
   }, [updateArtifact]);
 
-  return (
-    <>
-      <CodePreview artifact={artifact} />
-      {/* {props.children} */}
-    </>
-  );
+  return <CodePreview artifact={artifact} />;
 }
 
 // <div className="artifact">
diff --git a/client/src/components/Artifacts/Artifacts.tsx b/client/src/components/Artifacts/Artifacts.tsx
index 79db64bd15..92b052c105 100644
--- a/client/src/components/Artifacts/Artifacts.tsx
+++ b/client/src/components/Artifacts/Artifacts.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useState, useEffect } from 'react';
+import React, { useMemo, useState, useEffect, useRef } from 'react';
 import { useRecoilValue } from 'recoil';
 import * as Tabs from '@radix-ui/react-tabs';
 import { Sandpack } from '@codesandbox/sandpack-react';
@@ -64,11 +64,19 @@ export default function Artifacts() {
   const artifacts = useRecoilValue(store.artifactsState);
   const artifactIds = useRecoilValue(store.artifactIdsState);
 
+  const prevArtifactIdsLengthRef = useRef(artifactIds.length);
+  const [currentArtifactIndex, setCurrentArtifactIndex] = useState(artifactIds.length - 1);
+
   useEffect(() => {
     setIsVisible(true);
   }, []);
 
-  const [currentArtifactIndex, setCurrentArtifactIndex] = useState(artifactIds.length - 1);
+  useEffect(() => {
+    if (artifactIds.length !== prevArtifactIdsLengthRef.current) {
+      setCurrentArtifactIndex(artifactIds.length - 1);
+      prevArtifactIdsLengthRef.current = artifactIds.length;
+    }
+  }, [artifactIds]);
 
   const currentArtifact = useMemo(() => {
     if (artifactIds.length === 0) {
@@ -88,7 +96,7 @@ export default function Artifacts() {
     });
   };
 
-  if (!currentArtifact) {
+  if (currentArtifact === null) {
     return <div>No artifacts available.</div>;
   }