diff --git a/src/components/App/component.tsx b/src/components/App/component.tsx
index 5c1d4f4..c9b93e8 100644
--- a/src/components/App/component.tsx
+++ b/src/components/App/component.tsx
@@ -44,39 +44,42 @@ const App = () => {
   const [projectId] = useLocalStorage("patchProjectId", "new");
   const { loadProject } = useProjectActions(projectId);
   const onVmInit = () => {
-      loadProject();
+    loadProject();
   }
   useInitializedVm(onVmInit);
 
   useThreadAutoSave(patchVM, saveTargetThreads, editorTab);
   useMonitorProjectChange(setProjectChanged, [targetIds])
-  
+
 
   return (
     <ThemeProvider theme={mode === "dark" ? darkTheme : lightTheme}>
-      <SplashScreen renderCondition={true}>
-        <ToastContainer
-          theme="dark"
-          position="top-center"
-         />
-        <Grid container item direction="row" width={'100%'} sx={{
-          position: "absolute",
-          width: "100%",
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-          padding: 0,
-          margin: 0,
-          paddingBottom: "0px",
-          zIndex: -1,
-          overflowY: "auto",
-          backgroundColor: 'background.default',
-          color: "text.primary",
-        }}>
-          <ModalSelector />
-          <TopBar mode={mode} setMode={setMode} />
-          <Grid item container direction="row" className="leftContainer">
+      {!patchVM ?
+        <SplashScreen renderCondition={false} />
+        :
+        <SplashScreen renderCondition={true}>
+          <ToastContainer
+            theme="dark"
+            position="top-center"
+          />
+          <Grid container item direction="row" width={'100%'} sx={{
+            position: "absolute",
+            width: "100%",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            padding: 0,
+            margin: 0,
+            paddingBottom: "0px",
+            zIndex: -1,
+            overflowY: "auto",
+            backgroundColor: 'background.default',
+            color: "text.primary",
+          }}>
+            <ModalSelector />
+            <TopBar mode={mode} setMode={setMode} />
+            <Grid item container direction="row" className="leftContainer">
               <Grid item className="assetHolder" sx={{
                 padding: "8px",
                 borderRightWidth: "1px",
@@ -87,24 +90,26 @@ const App = () => {
                 justifyContent: "space-between",
               }}>
                 <VerticalButtons>
-                  <EditorTabButton tab={EditorTab.CODE} icon={<DataObjectIcon/>}/>
-                  <EditorTabButton tab={EditorTab.COSTUMES} icon={<TheaterComedyIcon/>}/>
-                  <EditorTabButton tab={EditorTab.SOUNDS} icon={<MusicNoteIcon/>}/>
-                  <EditorTabButton tab={EditorTab.VARIABLES} icon={<PublicIcon/>}/>
+                  <EditorTabButton tab={EditorTab.CODE} icon={<DataObjectIcon />} />
+                  <EditorTabButton tab={EditorTab.COSTUMES} icon={<TheaterComedyIcon />} />
+                  <EditorTabButton tab={EditorTab.SOUNDS} icon={<MusicNoteIcon />} />
+                  <EditorTabButton tab={EditorTab.VARIABLES} icon={<PublicIcon />} />
                 </VerticalButtons>
-                <LegalDialogueButton/>
+                <LegalDialogueButton />
               </Grid>
               <Grid item xs>
                 <EditorPane />
               </Grid>
             </Grid>
-          <Grid item className="rightContainer">
-            <GamePane />
-            <SpritePane />
+            <Grid item className="rightContainer">
+              <GamePane />
+              <SpritePane />
+            </Grid>
           </Grid>
-        </Grid>
-      </SplashScreen>
+        </SplashScreen>
+      }
     </ThemeProvider>
+
   );
 }
 
diff --git a/src/components/SpritePane/SpriteCard.tsx b/src/components/SpritePane/SpriteCard.tsx
index ea0cc10..bcfc71f 100644
--- a/src/components/SpritePane/SpriteCard.tsx
+++ b/src/components/SpritePane/SpriteCard.tsx
@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { ItemCard } from '../ItemCard';
 import getCostumeUrl from '../../util/get-costume-url';
 import { Target } from '../EditorPane/types';
@@ -13,21 +13,50 @@ type SpriteCardProps = {
 export function SpriteCard({ target }: SpriteCardProps) {
     const [editingTarget, setEditingTarget] = useEditingTarget();
 
-    
+    let inputName = ''
+
+    // Upon a name change, re-render the sprite's card in a local variable.
+    // useEffect(() => {
+    //     if ((target?.sprite?.name).length > 16) {
+    //         inputName = (target?.sprite?.name).substring(0, 13) + '...'
+    //     }
+    //     else {
+    //         inputName = target?.sprite?.name
+    //     }
+
+    // }, [target?.sprite?.name])
+
     const onClick = () => {
         setEditingTarget(target.id);
     }
 
-    return(
-        <ItemCard
-            title={target?.sprite?.name}
-            selected={editingTarget?.id === target.id}
-            onClick={onClick}
-            key={target?.sprite?.name}
-            width={120}
-            height={120}
-        >
-            <CostumeImage costume={target?.sprite?.costumes[0]} className="costumeCardImage" />
-        </ItemCard>
+    return (
+        <>
+            {target?.sprite?.name.length > 13 ?
+                <ItemCard
+                    title={target?.sprite?.name.substring(0, 10) + '...'}
+                    selected={editingTarget?.id === target.id}
+                    onClick={onClick}
+                    key={target?.sprite?.name}
+                    width={120}
+                    height={120}
+                >
+                    <CostumeImage costume={target?.sprite?.costumes[0]} className="costumeCardImage" />
+                </ItemCard>
+                :
+                <ItemCard
+                    title={target?.sprite?.name}
+                    selected={editingTarget?.id === target.id}
+                    onClick={onClick}
+                    key={target?.sprite?.name}
+                    width={120}
+                    height={120}
+                >
+                    <CostumeImage costume={target?.sprite?.costumes[0]} className="costumeCardImage" />
+                </ItemCard>
+            }
+        </>
+
+
     );
 }
\ No newline at end of file
diff --git a/src/components/SpritePane/SpriteName.tsx b/src/components/SpritePane/SpriteName.tsx
index 7e0f2dd..f430d0c 100644
--- a/src/components/SpritePane/SpriteName.tsx
+++ b/src/components/SpritePane/SpriteName.tsx
@@ -37,17 +37,21 @@ export function SpriteName() {
         setName(editingTarget.sprite.name);
     }, [editingTarget]);
 
-    return(<Grid display="flex">
-        <HorizontalButtons sx={{marginBottom: '12px'}}>
-            <TextField 
+    useEffect(() => {
+        console.log("user is typing")
+    }, [name])
+
+    return (<Grid display="flex">
+        <HorizontalButtons sx={{ marginBottom: '12px' }}>
+            <TextField
                 value={name}
                 onChange={onChange}
                 fullWidth
                 size="small"
                 disabled={targetIds[0] == editingTarget?.id}
-                sx={{minWidth: '532px'}}
+                sx={{ minWidth: '532px' }}
             />
-            <IconButton icon={<SaveIcon />} color="success" onClick={handleSave} disabled={nameSaved || !patchVM.editingTarget.isSprite()} sx={{height: '40px'}} />
+            <IconButton icon={<SaveIcon />} color="success" onClick={handleSave} disabled={nameSaved || !patchVM.editingTarget.isSprite()} sx={{ height: '40px' }} />
         </HorizontalButtons>
     </Grid>);
 }
\ No newline at end of file
diff --git a/src/components/TopBar/FileDropDown/component.tsx b/src/components/TopBar/FileDropDown/component.tsx
index 6235ab4..090c835 100644
--- a/src/components/TopBar/FileDropDown/component.tsx
+++ b/src/components/TopBar/FileDropDown/component.tsx
@@ -52,7 +52,7 @@ export const FileDropDown = ({ cloudEnabled }: FielDropDownProps) => {
     }
 
     const authenticatedOptions = [
-        { label: "New", onClick: handleNew},
+        { label: "New Blank Project", onClick: handleNew},
         { label: "Save Now", onClick: handleSaveNow},
         { label: "Save As A Copy", onClick: handleSaveCopy},
         { label: "Load From Your Computer", onClick: handleUpload},
diff --git a/src/components/TopBar/component.tsx b/src/components/TopBar/component.tsx
index 3936790..2006b4b 100644
--- a/src/components/TopBar/component.tsx
+++ b/src/components/TopBar/component.tsx
@@ -76,6 +76,7 @@ const SaveButton = () => {
   const { saveProject } = useProjectActions();
 
   const handleSaveNow = async () => {
+    console.log("Pressed save")
     await saveAllThreads();
     if (user) {
       saveProject(projectName);
diff --git a/src/hooks/useProjectActions.ts b/src/hooks/useProjectActions.ts
index 22a3cf8..648c9fa 100644
--- a/src/hooks/useProjectActions.ts
+++ b/src/hooks/useProjectActions.ts
@@ -56,6 +56,7 @@ export const useProjectActions = (defaultProjectId?: string) => {
         if (!projectSnapshot.exists() || loadFailed) {
             console.warn("Project does not exist. Creating default project.");
             setNewProject(true);
+            // TODO: debug this when new project is loaded.
             const vmStateJson = defaultPatchProject as unknown;
             await loadSerializedProject(vmStateJson as VmState, true);
         }