diff --git a/components/core/CarouselSidebarData.js b/components/core/CarouselSidebarData.js
index 25040f89..825caee9 100644
--- a/components/core/CarouselSidebarData.js
+++ b/components/core/CarouselSidebarData.js
@@ -191,26 +191,24 @@ const STYLES_AUTOSAVE = css`
   opacity: 0;
   margin: 26px 24px;
 
-  @keyframes autosave {
+  @keyframes slate-animations-autosave {
     0% {
-      height: 0;
       opacity: 0;
-      margin-left: 0;
+      transform: translateX(0);
     }
     10% {
       opacity: 1;
-      margin-left: 24px;
+      transform: translateX(12px);
     }
     90% {
       opacity: 1;
-      margin-left: 24px;
+      transform: translateX(12px);
     }
     100% {
       opacity: 0;
-      height: 0;
     }
   }
-  animation: autosave 4000ms ease;
+  animation: slate-animations-autosave 4000ms ease;
 `;
 
 export const FileTypeDefaultPreview = () => {
@@ -237,7 +235,7 @@ export default class CarouselSidebarData extends React.Component {
   _ref = null;
 
   state = {
-    name: this.props.data.name ? this.props.data.name : "",
+    name: Strings.isEmpty(this.props.data.name) ? "" : this.props.data.name,
     selected: {},
     isPublic: false,
     copyValue: "",
@@ -252,7 +250,7 @@ export default class CarouselSidebarData extends React.Component {
     window.addEventListener("data-global-carousel-loading", this._handleSetLoading);
     this.setState({ unsavedChanges: true });
     if (this.props.isOwner && !this.props.external) {
-      this.debounceInstance = this.debounce(() => this._handleSave(), 3000);
+      this.debounceInstance = Window.debounce(() => this._handleSave(), 3000);
       let isPublic = false;
       let selected = {};
       const id = this.props.data.id;
@@ -272,15 +270,6 @@ export default class CarouselSidebarData extends React.Component {
     window.removeEventListener("data-global-carousel-loading", this._handleSetLoading);
   };
 
-  debounce = (func, ms) => {
-    let timer;
-
-    return () => {
-      window.clearTimeout(timer);
-      timer = window.setTimeout(func, ms);
-    };
-  };
-
   _handleChange = (e) => {
     this.debounceInstance();
     this.setState({ [e.target.name]: e.target.value, unsavedChanges: true });
@@ -430,12 +419,7 @@ export default class CarouselSidebarData extends React.Component {
               />
             </Boundary>
           ) : (
-            <span
-              css={STYLES_META_TITLE}
-              target="_blank"
-              // href={Strings.getCIDGatewayURL(cid)}
-              onClick={this._handleEditFilename}
-            >
+            <span css={STYLES_META_TITLE} target="_blank" onClick={this._handleEditFilename}>
               {this.state.name}
             </span>
           )}
@@ -446,7 +430,7 @@ export default class CarouselSidebarData extends React.Component {
             {this.state.unsavedChanges == false ? (
               <div css={STYLES_AUTOSAVE}>
                 <SVG.Check height="14px" style={{ marginRight: 4 }} />
-                AutoSaved
+                Filename saved
               </div>
             ) : null}
           </div>
diff --git a/components/core/CarouselSidebarSlate.js b/components/core/CarouselSidebarSlate.js
index 9e3b2e87..fb3f54f9 100644
--- a/components/core/CarouselSidebarSlate.js
+++ b/components/core/CarouselSidebarSlate.js
@@ -92,24 +92,24 @@ const STYLES_AUTOSAVE = css`
   position: absolute;
   opacity: 0;
 
-  @keyframes autosave {
+  @keyframes slate-animations-autosave {
     0% {
       opacity: 0;
-      margin-left: 12px;
+      transform: translateX(12px);
     }
     10% {
       opacity: 1;
-      margin-left: 0;
+      transform: translateX(0px);
     }
     90% {
       opacity: 1;
-      margin-left: 0;
+      transform: translateX(0px);
     }
     100% {
       opacity: 0;
     }
   }
-  animation: autosave 4000ms ease;
+  animation: slate-animations-autosave 4000ms ease;
 `;
 
 const STYLES_SIDEBAR_INPUT_LABEL = css`
@@ -182,10 +182,10 @@ export default class CarouselSidebarSlate extends React.Component {
   _ref = null;
 
   state = {
-    title: this.props.data.title ? this.props.data.title : "",
-    body: this.props.data.body ? this.props.data.body : "",
-    source: this.props.data.source ? this.props.data.source : "",
-    author: this.props.data.author ? this.props.data.author : "",
+    title: Strings.isEmpty(this.props.data.title) ? "" : this.props.data.title,
+    body: Strings.isEmpty(this.props.data.body) ? "" : this.props.data.body,
+    source: Strings.isEmpty(this.props.data.source) ? "" : this.props.data.source,
+    author: Strings.isEmpty(this.props.data.author) ? "" : this.props.data.author,
     selected: {},
     isPublic: false,
     copyValue: "",
@@ -194,13 +194,14 @@ export default class CarouselSidebarSlate extends React.Component {
     unsavedChanges: false,
     pickerLoading: false,
     loading: false,
+    subject: "",
   };
 
   componentDidMount = () => {
     window.addEventListener("slate-global-carousel-loading", this._handleSetLoading);
     this.setState({ unsavedChanges: true });
     if (this.props.isOwner && !this.props.external) {
-      this.debounceInstance = this.debounce(() => this._handleSave(), 3000);
+      this.debounceInstance = Window.debounce(() => this._handleSave(), 3000);
       let isPublic = false;
       let selected = {};
       const id = this.props.data.id;
@@ -224,15 +225,6 @@ export default class CarouselSidebarSlate extends React.Component {
     this.setState({ loading: e.detail.loading });
   };
 
-  debounce = (func, ms) => {
-    let timer;
-
-    return () => {
-      window.clearTimeout(timer);
-      timer = window.setTimeout(func, ms);
-    };
-  };
-
   _handleClose = () => {
     if (this.state.unsavedChanges) {
       this._handleSave();
@@ -263,9 +255,17 @@ export default class CarouselSidebarSlate extends React.Component {
 
   _handleChange = (e) => {
     this.debounceInstance();
-    this.setState({ [e.target.name]: e.target.value, unsavedChanges: true });
+    this.setState({
+      [e.target.name]: e.target.value,
+      unsavedChanges: true,
+      subject: e.target.name == "body" ? "Description" : this._handleCapitalization(e.target.name),
+    });
   };
 
+  _handleCapitalization(str) {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+  }
+
   _handleDownload = () => {
     UserBehaviors.download(this.props.data);
   };
@@ -385,7 +385,7 @@ export default class CarouselSidebarSlate extends React.Component {
             {this.state.unsavedChanges == false && (
               <div css={STYLES_AUTOSAVE}>
                 <SVG.Check height="14px" style={{ marginRight: 4 }} />
-                AutoSaved
+                {this.state.subject} saved
               </div>
             )}
           </React.Fragment>