diff --git a/package-lock.json b/package-lock.json
index 62f082a2..97208ff9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3235,6 +3235,11 @@
       "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
       "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg=="
     },
+    "attr-accept": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.2.tgz",
+      "integrity": "sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg=="
+    },
     "autoprefixer": {
       "version": "10.4.4",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.4.tgz",
@@ -5626,6 +5631,21 @@
       "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
       "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
     },
+    "file-selector": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.6.0.tgz",
+      "integrity": "sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==",
+      "requires": {
+        "tslib": "^2.4.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.4.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
+          "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
+        }
+      }
+    },
     "filelist": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz",
@@ -10112,6 +10132,16 @@
         "scheduler": "^0.19.1"
       }
     },
+    "react-dropzone": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.2.3.tgz",
+      "integrity": "sha512-O3om8I+PkFKbxCukfIR3QAGftYXDZfOE2N1mr/7qebQJHs7U+/RSL/9xomJNpRg9kM5h9soQSdf0Gc7OHF5Fug==",
+      "requires": {
+        "attr-accept": "^2.2.2",
+        "file-selector": "^0.6.0",
+        "prop-types": "^15.8.1"
+      }
+    },
     "react-error-overlay": {
       "version": "6.0.10",
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz",
diff --git a/package.json b/package.json
index 2ee8e622..0de75ea1 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "react-cytoscapejs": "^1.2.1",
     "react-datetime-picker": "^3.5.0",
     "react-dom": "^16.14.0",
+    "react-dropzone": "^14.2.3",
     "react-helmet": "^6.1.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "^5.0.0",
diff --git a/src/components/SliceViewer/DetailForm.jsx b/src/components/SliceViewer/DetailForm.jsx
index 3558267d..8db22e2d 100644
--- a/src/components/SliceViewer/DetailForm.jsx
+++ b/src/components/SliceViewer/DetailForm.jsx
@@ -1,5 +1,4 @@
 import React, { Component } from 'react'
-import { CopyToClipboard } from 'react-copy-to-clipboard';
 import CopyButton from "../common/CopyButton";
 import { default as portalData } from "../../services/portalData.json";
 
@@ -82,15 +81,30 @@ export default class DetailForm extends Component {
                 }
                 <div className="row mb-2">
                   <label>Cores</label>
-                  <input type="number" className="form-control" defaultValue={data.capacities.core} disabled/>
+                  <input
+                    type="text"
+                    className="form-control"
+                    defaultValue={data.capacities.core > 0? data.capacities.core : "configuring"}
+                    disabled
+                  />
                 </div>
                 <div className="row mb-2">
                   <label>RAM(GB)</label>
-                  <input type="number" className="form-control" defaultValue={data.capacities.ram} disabled/>
+                  <input
+                    type="text"
+                    className="form-control"
+                    defaultValue={data.capacities.ram > 0? data.capacities.ram : "configuring"}
+                    disabled
+                  />
                 </div>
                 <div className="row mb-2">
                   <label>Disk(GB)</label>
-                  <input type="number" className="form-control" defaultValue={data.capacities.disk} disabled />
+                  <input
+                    type="text"
+                    className="form-control"
+                    defaultValue={data.capacities.disk > 0? data.capacities.disk : "configuring"}
+                    disabled
+                  />
                 </div>
               </div>
             }
diff --git a/src/components/SliceViewer/Graph.jsx b/src/components/SliceViewer/Graph.jsx
index 654e0a20..9f3a794d 100644
--- a/src/components/SliceViewer/Graph.jsx
+++ b/src/components/SliceViewer/Graph.jsx
@@ -9,6 +9,7 @@ import IconLink from '../../imgs/SliceComponentIcons/Link.png';
 import IconSharedNIC from '../../imgs/SliceComponentIcons/SharedNIC.png';
 import IconSmartNIC from '../../imgs/SliceComponentIcons/SmartNIC.png';
 import IconNVME from '../../imgs/SliceComponentIcons/NVME.png';
+import IconStorage from '../../imgs/SliceComponentIcons/RotatingStorage.png';
 import IconNS from '../../imgs/SliceComponentIcons/NetworkService.png';
 import _ from "lodash";
 import { OverlayTrigger, Tooltip } from 'react-bootstrap';
@@ -76,11 +77,6 @@ export default class Graph extends Component {
 
   }
 
-  saveJSON = () => {
-    var jsonBlob = new Blob([ JSON.stringify( this.cy.json() ) ], { type: 'application/javascript;charset=utf-8' });
-    saveAs( jsonBlob, `${this.props.sliceName}.json` );
-  }
-
   savePNG = () => {
     var png64 = this.cy.png({
       'bg': 'white',
@@ -105,15 +101,18 @@ export default class Graph extends Component {
             Reset Layout
           </button>
           <div className="d-flex flex-row-reverse">
-            <OverlayTrigger
-              placement="top"
-              delay={{ show: 100, hide: 300 }}
-              overlay={renderTooltip("slice-download-tooltip", "Export the topology in the Cytoscape JSON format used at initialisation.")}
-            >
-              <button onClick={this.saveJSON} className="btn btn-sm btn-outline-primary ml-2">
-                Download JSON
-              </button>
-            </OverlayTrigger>
+            {
+              this.props.isNewSlice && 
+              <OverlayTrigger
+                placement="top"
+                delay={{ show: 100, hide: 300 }}
+                overlay={renderTooltip("slice-download-tooltip", "Export the topology setup as JSON file.")}
+              >
+                <button onClick={this.props.onSaveJSON} className="btn btn-sm btn-outline-primary ml-2">
+                  Download JSON
+                </button>
+              </OverlayTrigger>
+            }
             <button onClick={this.savePNG} className="btn btn-sm btn-outline-primary ml-2">Download PNG</button>
             {
               this.props.isNewSlice && 
@@ -219,6 +218,16 @@ export default class Graph extends Component {
                 "width": 100,
               }
             },
+            {
+              "selector": ".graphStorage",
+              "style": {
+                "background-image": `${IconStorage}`,
+                "background-fit": "contain",
+                "background-color": "#fff",
+                "height": 70,
+                "width": 100,
+              }
+            },
             {
               "selector": ".graphLink",
               "style": {
diff --git a/src/components/SliceViewer/NewSliceDetailForm.jsx b/src/components/SliceViewer/NewSliceDetailForm.jsx
index bfb4d963..2406f6d8 100644
--- a/src/components/SliceViewer/NewSliceDetailForm.jsx
+++ b/src/components/SliceViewer/NewSliceDetailForm.jsx
@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import SingleComponent from './SingleComponent';
 import validator from  "../../utils/sliceValidator";
+import Dropfile from "../common/Dropfile";
 
 export default class NewSliceDetailForm extends Component {
   state = {
@@ -12,6 +13,8 @@ export default class NewSliceDetailForm extends Component {
     isRamChanged: false,
     disk: 0,
     isDiskChanged: false,
+    BootScript: "",
+    isBootScriptChanged: false,
     showVMComponent: false,
     validationResult: {
       isValid: true,
@@ -62,6 +65,11 @@ export default class NewSliceDetailForm extends Component {
     this.setState({ disk, validationResult, isDiskChanged: true });
   }
 
+  handleBootScriptChange = (e) => {
+    const BootScript = e.target.value;
+    this.setState({ BootScript, isBootScriptChanged: true });
+  }
+
   handleShowVMComponent = () => {
     const showOrNot = this.state.showVMComponent;
     this.setState({ showVMComponent: !showOrNot });
@@ -70,13 +78,15 @@ export default class NewSliceDetailForm extends Component {
   handleVMUpdate = (e) => {
     e.preventDefault();
     const data = this.props.data;
-    const { nodeName, core, ram, disk, isNameChanged, isCoreChanged, isRamChanged, isDiskChanged } = this.state;
+    const { nodeName, core, ram, disk, BootScript, isNameChanged, isCoreChanged,
+      isRamChanged, isDiskChanged, isBootScriptChanged } = this.state;
     const newName = isNameChanged ? nodeName : data.properties.name;
     const newCore = isCoreChanged ? core : JSON.parse(data.capacities).core;
     const newRam = isRamChanged ? ram : JSON.parse(data.capacities).ram;
     const newDisk = isDiskChanged ? disk : JSON.parse(data.capacities).disk;
+    const newBootScript = isBootScriptChanged ? BootScript : data.BootScript;
     const capacities = JSON.stringify({"core": newCore, "ram": newRam, "disk": newDisk});
-    this.props.onVMUpdate({ vm_id: this.props.data.id, new_name: newName, new_capacities: capacities });
+    this.props.onVMUpdate({ vm_id: this.props.data.id, new_name: newName, new_capacities: capacities, new_boot_script: newBootScript });
   }
 
   isCPAvailable = () => {
@@ -114,6 +124,10 @@ export default class NewSliceDetailForm extends Component {
     this.props.onSingleComponentAdd(data);
   }
 
+  handleFileDrop = (textStr) => {
+    this.props.onJsonUpload(textStr);
+  }
+
   getVMComponents = () => {
     const vm_component_ids = [];
 
@@ -154,7 +168,21 @@ export default class NewSliceDetailForm extends Component {
         <form>
             {
               (!data || !data.properties) && (
-                <div className="my-3"><i className="fa fa-info-circle mx-2" />Click an element on the topology to view details or make changes. </div>
+                <div className="my-3">
+                  {
+                    this.props.nodes.length > 0 && 
+                    <span>
+                      <i className="fa fa-info-circle mx-2" />
+                      Click an element on the topology to view details or make changes.
+                    </span>
+                  }
+                  {
+                    this.props.nodes.length === 0 && 
+                    <Dropfile
+                      onFileDrop={this.handleFileDrop}
+                    />
+                  }
+                </div>
               )
             }
 
@@ -225,6 +253,16 @@ export default class NewSliceDetailForm extends Component {
                 {
                   this.state.showVMComponent &&
                   <div className="form-row px-3">
+                     <div className="col-12">
+                      <label for="BootScript" className="slice-builder-label">Boot Script (optional)</label>
+                      <textarea
+                        className="form-control"
+                        id="BootScript"
+                        rows="1"
+                        defaultValue={data.BootScript}
+                        onChange={this.handleBootScriptChange}
+                      />
+                     </div>
                      <div className="col-12">
                       <SingleComponent
                         addedComponents={this.getVMComponents()}
diff --git a/src/components/SliceViewer/SideNodes.jsx b/src/components/SliceViewer/SideNodes.jsx
index 60735c55..a5a6501a 100644
--- a/src/components/SliceViewer/SideNodes.jsx
+++ b/src/components/SliceViewer/SideNodes.jsx
@@ -18,6 +18,7 @@ class SideNodes extends React.Component {
     nodeComponents: [],
     imageType: "qcow2",
     selectedImageRef: "default_rocky_8",
+    BootScript: ""
   }
 
   osImageToAbbr = {
@@ -36,9 +37,11 @@ class SideNodes extends React.Component {
 
   handleAddNode = () => {
     // type: currently only support 'VM'
-    const { selectedSite, nodeName, nodeType, core, ram, disk, imageType, selectedImageRef, nodeComponents } = this.state;
+    const { selectedSite, nodeName, nodeType, core, ram, disk,
+      imageType, selectedImageRef, nodeComponents, BootScript } = this.state;
     const image = `${selectedImageRef},${imageType}`;
-    this.props.onNodeAdd(nodeType, selectedSite, nodeName, Number(core), Number(ram), Number(disk), image, nodeComponents);
+    this.props.onNodeAdd(nodeType, selectedSite, nodeName, Number(core),
+      Number(ram), Number(disk), image, nodeComponents, BootScript);
     this.setState({
       selectedSite: "",
       nodeName: "",
@@ -49,6 +52,7 @@ class SideNodes extends React.Component {
       nodeComponents: [],
       imageType: "qcow2",
       selectedImageRef: "default_rocky_8",
+      BootScript: "",
     })
   }
 
@@ -103,7 +107,11 @@ class SideNodes extends React.Component {
   }
 
   handleImageRefChange = (e) => {
-    this.setState({ selectedImageRef: e.target.value })
+    this.setState({ selectedImageRef: e.target.value });
+  }
+
+  handleBootScriptChange = (e) => {
+    this.setState({ BootScript: e.target.value });
   }
 
   getSiteResource = () => {
@@ -138,14 +146,14 @@ class SideNodes extends React.Component {
   }
 
   render() {
-    const { selectedSite, nodeName, imageType, selectedImageRef, core, ram, disk, nodeComponents } = this.state;
+    const { selectedSite, nodeName, imageType, selectedImageRef, core, ram,
+      disk, BootScript, nodeComponents } = this.state;
     const validationResult = validator.validateNodeComponents(selectedSite, nodeName, this.props.nodes, core, ram, disk, nodeComponents);
     const renderTooltip = (id, content) => (
       <Tooltip id={id}>
         {content}
       </Tooltip>
     );
-
     return(
       <div>
         {this.props.resources !== null &&
@@ -279,6 +287,27 @@ class SideNodes extends React.Component {
                   {validationResult.message}
                 </div>
               }
+              <div className="form-row">
+                <div className="form-group slice-builder-form-group col-md-12">
+                  <label for="BootScript" className="slice-builder-label">
+                    Boot Script (optional)
+                    <OverlayTrigger
+                      placement="right"
+                      delay={{ show: 100, hide: 300 }}
+                      overlay={renderTooltip("boot-script-tooltip", portalData.helperText.bootScriptDescription)}
+                    >
+                      <i className="fa fa-question-circle text-secondary ml-2"></i>
+                    </OverlayTrigger>
+                  </label>
+                  <textarea
+                    className="form-control"
+                    id="BootScript"
+                    rows="1"
+                    value={BootScript}
+                    onChange={this.handleBootScriptChange}
+                  />
+                </div>
+              </div>
             </div>
             <div className="mt-2 bg-light node-components-panel">
               <SingleComponent
diff --git a/src/components/SliceViewer/SingleComponent.jsx b/src/components/SliceViewer/SingleComponent.jsx
index ea599231..e7c6f2b5 100644
--- a/src/components/SliceViewer/SingleComponent.jsx
+++ b/src/components/SliceViewer/SingleComponent.jsx
@@ -9,7 +9,8 @@ export default class SingleComponent extends Component {
       "GPU": ["RTX6000", "Tesla T4"],
       "SmartNIC": ["ConnectX-6", "ConnectX-5"],
       "SharedNIC": ["ConnectX-6"],
-      "NVME": ["P4510"]
+      "NVME": ["P4510"],
+      "Storage": ["NAS"]
     },
     modelDetails: {
       "RTX6000": "NVIDIA Corporation TU102GL [Quadro RTX 6000/8000] (rev a1)",
@@ -17,6 +18,7 @@ export default class SingleComponent extends Component {
       "ConnectX-6": "Mellanox ConnectX-6 VPI MCX653 dual port 100Gbps",
       "ConnectX-5": "Mellanox ConnectX-5 Dual Port 10/25GbE",
       "P4510": "Dell Express Flash NVMe P4510 1TB SFF",
+      "NAS": "Site-local NAS share"
     },
     componentType: "",
     componentName: "",
@@ -88,6 +90,7 @@ export default class SingleComponent extends Component {
                   <option value="SmartNIC">SmartNIC</option>
                   <option value="SharedNIC">SharedNIC</option>
                   <option value="NVME">NVME</option>
+                  <option value="Storage">Storage</option>
                 </select>
               </div>
               <div className="form-group slice-builder-form-group col-md-3">
diff --git a/src/components/SshKey/GenerateKey.jsx b/src/components/SshKey/GenerateKey.jsx
index c58da98c..c85b34cc 100644
--- a/src/components/SshKey/GenerateKey.jsx
+++ b/src/components/SshKey/GenerateKey.jsx
@@ -10,7 +10,7 @@ class GenerateKey extends Form {
     data: {
       name: "",
       description: "",
-      keyType: "",
+      keyType: "sliver",
     },
     errors: {},
     nameTooltip: {
diff --git a/src/components/SshKey/UploadKey.jsx b/src/components/SshKey/UploadKey.jsx
index 8ba9b77f..1d1150b4 100644
--- a/src/components/SshKey/UploadKey.jsx
+++ b/src/components/SshKey/UploadKey.jsx
@@ -10,7 +10,7 @@ class UploadKey extends Form {
     data: {
       publickey: "",
       description: "",
-      keyType: "",
+      keyType: "sliver",
     },
     errors: {},
     publickeyTooltip: {
diff --git a/src/components/common/Dropfile.jsx b/src/components/common/Dropfile.jsx
new file mode 100644
index 00000000..147e7f03
--- /dev/null
+++ b/src/components/common/Dropfile.jsx
@@ -0,0 +1,40 @@
+import React, {useCallback} from 'react'
+import {useDropzone} from 'react-dropzone'
+
+const DropFile = props => {
+  const { onFileDrop } = props;
+
+  const onDrop = useCallback((acceptedFiles) => {
+    acceptedFiles.forEach((file) => {
+      const reader = new FileReader()
+
+      reader.onabort = () => console.log('file reading was aborted')
+      reader.onerror = () => console.log('file reading has failed')
+      reader.readAsText(file)
+      reader.onload = () => {
+        // Do whatever you want with the file contents
+        const textStr = reader.result
+        onFileDrop(textStr)
+      }
+    })
+  }, [])
+
+  const {getRootProps, getInputProps} = useDropzone({
+    onDrop,
+    accept: {
+    'application/json': [],
+  }})
+
+  return (
+    <div {...getRootProps()}>
+      <input {...getInputProps()} />
+      <p className="pl-2 cursor-pointer">
+        <i className="fa fa-cloud-upload mx-2" />
+        Click to select or drag &amp; drop your slice topology JSON file here.
+      </p>
+    </div>
+  )
+}
+
+
+export default DropFile;
\ No newline at end of file
diff --git a/src/pages/NewSliceForm.jsx b/src/pages/NewSliceForm.jsx
index b19c5d71..d82ed282 100644
--- a/src/pages/NewSliceForm.jsx
+++ b/src/pages/NewSliceForm.jsx
@@ -4,7 +4,7 @@ import { v4 as uuidv4 } from 'uuid';
 import _ from "lodash";
 import moment from 'moment';
 import { toast } from "react-toastify";
-
+import { saveAs } from "file-saver";
 import ProjectTags from "../components/SliceViewer/ProjectTags";
 import SideNodes from '../components/SliceViewer/SideNodes';
 import SideLinks from '../components/SliceViewer/SideLinks';
@@ -13,12 +13,10 @@ import NewSliceDetailForm from '../components/SliceViewer/NewSliceDetailForm';
 import SpinnerWithText from "../components/common/SpinnerWithText";
 import Calendar from "../components/common/Calendar";
 import { OverlayTrigger, Tooltip } from 'react-bootstrap';
-
 import sliceParser from "../services/parser/sliceParser.js";
 import builder from "../utils/sliceBuilder.js";
 import editor from "../utils/sliceEditor.js";
 import validator from "../utils/sliceValidator.js";
-
 import { sitesNameMapping }  from "../data/sites";
 import sitesParser from "../services/parser/sitesParser";
 import { getResources } from "../services/resourceService.js";
@@ -69,6 +67,16 @@ class NewSliceForm extends React.Component {
     this.setState({ graphID: uuidv4() });
   }
 
+  // componentDidMount() {
+  //   const resources =  {
+  //     "model": "{\"directed\": false, \"multigraph\": false, \"graph\": {}, \"nodes\": [{\"GraphID\": \"2c6257f9-66ad-41f3-9610-b57a4771733f\", \"Class\": \"CompositeNode\", \"NodeID\": \"cc04181b-580a-4afe-816a-a9228ddc6412\", \"Name\": \"RENC\", \"Type\": \"Server\", \"Capacities\": \"{\\\"core\\\": 192, \\\"cpu\\\": 6, \\\"disk\\\": 14400, \\\"ram\\\": 1536, \\\"unit\\\": 3}\", \"CapacityAllocations\": \"\", \"StitchNode\": \"false\", \"Site\": \"RENC\", \"id\": 8641}, {\"GraphID\": \"2c6257f9-66ad-41f3-9610-b57a4771733f\", \"Class\": \"NetworkService\", \"NodeID\": \"75904c3d-2098-4976-ba92-e4373b31b483\", \"Name\": \"RENC_ns\", \"Type\": \"MPLS\", \"id\": 8642}, {\"GraphID\": \"2c6257f9-66ad-41f3-9610-b57a4771733f\", \"Class\": \"Component\", \"NodeID\": \"b50fe758-ef38-44fb-9044-f125e9da9613\", \"Name\": \"GPU-RTX6000\", \"Type\": \"GPU\", \"Model\": \"RTX6000\", \"Capacities\": \"{\\\"unit\\\": 2}\", \"CapacityAllocations\": \"\", \"StitchNode\": \"false\", \"id\": 8643}, {\"GraphID\": \"2c6257f9-66ad-41f3-9610-b57a4771733f\", \"Class\": \"Component\", \"NodeID\": \"c3485578-bf5b-446d-8626-f2fe1242d756\", \"Name\": \"GPU-Tesla T4\", \"Type\": \"GPU\", \"Model\": \"Tesla T4\", \"Capacities\": \"{\\\"unit\\\": 4}\", \"CapacityAllocations\": \"\", \"StitchNode\": \"false\", \"id\": 8644}, {\"GraphID\": \"2c6257f9-66ad-41f3-9610-b57a4771733f\", \"Class\": \"Component\", \"NodeID\": \"e99b6419-3b20-4486-9141-4a5db5d3f043\", \"Name\": \"NVME-P4510\", \"Type\": \"NVME\", \"Model\": \"P4510\", \"Capacities\": \"{\\\"disk\\\": 10000, \\\"unit\\\": 10}\", \"CapacityAllocations\": \"\", \"StitchNode\": \"false\", \"id\": 8645}, {\"GraphID\": \"2c6257f9-66ad-41f3-9610-b57a4771733f\", \"Class\": \"Component\", \"NodeID\": \"f02875f0-3b0e-44d7-aa2d-3638889b2f68\", \"Name\": \"SharedNIC-ConnectX-6\", \"Type\": \"SharedNIC\", \"Model\": \"ConnectX-6\", \"Capacities\": \"{\\\"unit\\\": 381}\", \"CapacityAllocations\": \"\", \"StitchNode\": \"false\", \"id\": 8646}, {\"GraphID\": \"2c6257f9-66ad-41f3-9610-b57a4771733f\", \"Class\": \"Component\", \"NodeID\": \"cd98cad7-27d9-496e-a98e-4a8b858101c9\", \"Name\": \"SmartNIC-ConnectX-6\", \"Type\": \"SmartNIC\", \"Model\": \"ConnectX-6\", \"Capacities\": \"{\\\"unit\\\": 2}\", \"CapacityAllocations\": \"\", \"StitchNode\": \"false\", \"id\": 8647}, {\"GraphID\": \"2c6257f9-66ad-41f3-9610-b57a4771733f\", \"Class\": \"Component\", \"NodeID\": \"2cd82afc-e4f5-40c1-953c-6818b02f1815\", \"Name\": \"SmartNIC-ConnectX-5\", \"Type\": \"SmartNIC\", \"Model\": \"ConnectX-5\", \"Capacities\": \"{\\\"unit\\\": 2}\", \"CapacityAllocations\": \"\", \"StitchNode\": \"false\", \"id\": 8648}], \"links\": [{\"Class\": \"has\", \"source\": 8641, \"target\": 8642}, {\"Class\": \"has\", \"source\": 8641, \"target\": 8643}, {\"Class\": \"has\", \"source\": 8641, \"target\": 8644}, {\"Class\": \"has\", \"source\": 8641, \"target\": 8645}, {\"Class\": \"has\", \"source\": 8641, \"target\": 8646}, {\"Class\": \"has\", \"source\": 8641, \"target\": 8647}, {\"Class\": \"has\", \"source\": 8641, \"target\": 8648}]}"
+  //   }
+  //   const parsedObj = sitesParser(resources, sitesNameMapping.acronymToShortName);
+  //   this.setState({ parsedResources: parsedObj });
+  //   // generate a graph uuid for the new slice
+  //   this.setState({ graphID: uuidv4() });
+  // }
+
   refreshSSHKey = async () => {
     this.setState({ showKeySpinner: true });
 
@@ -153,6 +161,23 @@ class NewSliceForm extends React.Component {
     }
   }
 
+  handleSaveJSON = () => {
+    const sliceJSON = {
+      "directed": false,
+      "multigraph": false,
+      "graph": {},
+      "nodes": this.state.sliceNodes,
+      "links": this.state.sliceLinks,
+    }
+
+    var jsonBlob = new Blob([ JSON.stringify(sliceJSON) ], { type: 'application/javascript;charset=utf-8' });
+    if(this.state.sliceName !== "") {
+      saveAs(jsonBlob, `${this.state.sliceName}.json`);
+    } else {
+      saveAs(jsonBlob, `new-slice.json`);
+    }
+  }
+
   handleUseDraft = () => {
     const sliceDraft = JSON.parse(localStorage.getItem("sliceDraft"));
     this.setState({ 
@@ -162,6 +187,20 @@ class NewSliceForm extends React.Component {
     });
   }
 
+  handleJsonUpload = (sliceStr) => {
+    // similar to use draft
+    const sliceJSON = JSON.parse(sliceStr);
+    try {
+      this.setState({ 
+        sliceNodes: sliceJSON.nodes,
+        sliceLinks: sliceJSON.links,
+        graphID: sliceJSON.nodes.length > 0 ? sliceJSON.nodes[0].GraphID : ""
+      });
+    } catch (err) {
+      toast.error("Failed to render the slice topology. Please try with a different slice JSON file.")
+    }
+  }
+
   handleClearGraph = () => {
     this.setState({ sliceNodes: [], sliceLinks: [], selectedData: null, selectedCPs: [] });
   }
@@ -194,7 +233,7 @@ class NewSliceForm extends React.Component {
     });
   }
 
-  handleNodeAdd = (type, site, name, core, ram, disk, image, sliceComponents) => {
+  handleNodeAdd = (type, site, name, core, ram, disk, image, sliceComponents, BootScript) => {
     const { graphID, sliceNodes, sliceLinks } =  this.state;
 
     const node = {
@@ -206,7 +245,8 @@ class NewSliceForm extends React.Component {
         "ram": ram,
         "disk": disk,
       },
-      "image": image
+      "image": image,
+      "BootScript": BootScript
     };
 
     if (type === "VM") {
@@ -222,7 +262,7 @@ class NewSliceForm extends React.Component {
   }
 
   handleVMUpdate = (data) => {
-    // data: vm_id, new_name and new_capacities
+    // data: vm_id, new_name, new_capacities and new_boot_script
     const updated_nodes = editor.updateVM(data, this.state.sliceNodes);
     this.setState({ sliceNodes: updated_nodes });
     toast.success("VM updated successfully.")
@@ -542,6 +582,7 @@ class NewSliceForm extends React.Component {
                     onNodeDelete={this.handleNodeDelete}
                     onVMUpdate={this.handleVMUpdate}
                     onSingleComponentAdd={this.handleSingleComponentAdd}
+                    onJsonUpload={this.handleJsonUpload}
                   />
                   <Graph
                     className="align-self-end"
@@ -553,6 +594,7 @@ class NewSliceForm extends React.Component {
                     onSaveDraft={() => this.handleSaveDraft("withMessage")}
                     onUseDraft={this.handleUseDraft}
                     onClearGraph={this.handleClearGraph}
+                    onSaveJSON={this.handleSaveJSON}
                   />
                 </div>
               </div>
diff --git a/src/pages/SliceViewer.jsx b/src/pages/SliceViewer.jsx
index 277ebc3a..022eb043 100644
--- a/src/pages/SliceViewer.jsx
+++ b/src/pages/SliceViewer.jsx
@@ -14,6 +14,7 @@ import sliceErrorParser from "../services/parser/sliceErrorParser.js";
 import sliceTimeParser from "../utils/sliceTimeParser.js";
 import { toast } from "react-toastify";
 import { default as portalData } from "../services/portalData.json";
+import { saveAs } from "file-saver";
 // import { default as res } from "../services/mockData/slices/slice1.json";
 
 export default class SliceViewer extends Component { 
@@ -102,6 +103,11 @@ export default class SliceViewer extends Component {
   handleNodeSelect = (selectedData) => {
     this.setState({ selectedData });
   }
+
+  handleSaveJSON = () => {
+    var jsonBlob = new Blob([ JSON.stringify(this.state.slice) ], { type: 'application/javascript;charset=utf-8' });
+    saveAs( jsonBlob, `${this.state.sliceName}.json` );
+  }
   
   render() {
     const stateColors = {
@@ -197,6 +203,7 @@ export default class SliceViewer extends Component {
                   sliceName={slice.name}
                   defaultSize={{"width": 0.75, "height": 0.75, "zoom": 1}}
                   onNodeSelect={this.handleNodeSelect}
+                  onSaveJSON={this.handleSaveJSON}
                 />
               }
               {
diff --git a/src/services/parser/sliceParser.js b/src/services/parser/sliceParser.js
index 2ecf94ea..4d713e2d 100644
--- a/src/services/parser/sliceParser.js
+++ b/src/services/parser/sliceParser.js
@@ -59,6 +59,24 @@ export default function parseSlice(slice, sliceType) {
     return siteId;
   }
   
+  const parseCapacityHints = (capacityHintsStr) => {
+    // Input string example: "fabric.c2.m8.d10"
+    // Output: {"core":2,"disk":10,"ram":8}
+    const capacitiesObj = {
+      core: 0,
+      ram: 0,
+      disk: 0
+    };
+    
+    if (capacityHintsStr === "") return capacitiesObj;
+
+    const arr = capacityHintsStr.split(".");
+    capacitiesObj.core = parseInt(arr[1].slice(1));
+    capacitiesObj.ram = parseInt(arr[2].slice(1));
+    capacitiesObj.disk = parseInt(arr[3].slice(1));
+    return capacitiesObj;
+  }
+
   const generateDataElement = (data, id) => {
     const properties = {};
     const originalNode = objNodes[id];
@@ -80,15 +98,24 @@ export default function parseSlice(slice, sliceType) {
       if (sliceType === "new") {
         data.capacities = originalNode.Capacities ? originalNode.Capacities : null;
       } else {
-        data.capacities = originalNode.Capacities ? JSON.parse(originalNode.Capacities) : null;
+        if(originalNode.Class !== "NetworkNode") {
+          data.capacities = originalNode.Capacities ? JSON.parse(originalNode.Capacities) : null;
+        } else {
+          // parse CapacityHints for VM nodes to get actual allocated capacities.
+          // example: "CapacityHints": "{"instance_type": "fabric.c2.m8.d10"}"
+          const capacityHints = originalNode.CapacityHints ? JSON.parse(originalNode.CapacityHints) : null;
+          const capacityHintsStr = capacityHints ? capacityHints.instance_type : "";
+          data.capacities = parseCapacityHints(capacityHintsStr);
+        }
       }
     }
 
-    // add parent site node/ management IP address if it's network node.
-    if (originalNode.Site) { 
+    // add parent site node/ management IP address if it's VM node.
+    if (originalNode.Site) {
       data.parent = getSiteIdbyName(originalNode.Site);
       data.properties.MgmtIp = originalNode.MgmtIp || "";
       data.properties.ImageRef = originalNode.ImageRef || "";
+      data.BootScript = originalNode.BootScript || ""
     }
   }
 
@@ -192,8 +219,8 @@ export default function parseSlice(slice, sliceType) {
     // "has" => parent/ child nodes.
     if (link.label === "has") {
       // 2 main categories for "has"
-      // 1. VM node has NIC/ GPU/ NVME... / or vice versa
-      if (["SmartNIC", "SharedNIC", "GPU", "NVME"].includes(objNodes[link.target].Type) && 
+      // 1. VM node has NIC/ GPU/ NVME/ Storage or vice versa
+      if (["SmartNIC", "SharedNIC", "GPU", "NVME", "Storage"].includes(objNodes[link.target].Type) && 
         objNodes[link.source].Type === "VM") {
         if (!parentNodeIds.includes(link.source)) {
           // Store VM info, will 
@@ -202,9 +229,9 @@ export default function parseSlice(slice, sliceType) {
         data.parent = link.source;
         generateDataElement(data, link.target);
         elements.push(data);
-      } else if (["SmartNIC", "SharedNIC", "GPU", "NVME"].includes(objNodes[link.source].Type) && 
+      } else if (["SmartNIC", "SharedNIC", "GPU", "NVME", "Storage"].includes(objNodes[link.source].Type) && 
       objNodes[link.target].Type === "VM") {
-        // EXCEPTION: NIC/ GPU/ NVME has VM
+        // EXCEPTION: NIC/ GPU/ NVME/ Storage has VM
         if (!parentNodeIds.includes(link.target)) {
           parentNodeIds.push(link.target);
         }
diff --git a/src/services/portalData.json b/src/services/portalData.json
index 36789ab8..b7d31260 100644
--- a/src/services/portalData.json
+++ b/src/services/portalData.json
@@ -22,7 +22,8 @@
     "nodeDescription": "Node: An individual element (e.g., virtual machine) in a topology that is connected to other nodes to represent the physical and logical structure of a network.",
     "preferredEmailDescription": "Please choose your preferred contact email among the addresses given to us by your Identity Provider.",
     "privacyPreferencesDescription": "Please check the information you want to be available to other FABRIC users.",
-    "publicProjectDescription": " Public projects are visible to all FABRIC users while private projects are only visible to project members and facility operators."
+    "publicProjectDescription": " Public projects are visible to all FABRIC users while private projects are only visible to project members and facility operators.",
+    "bootScriptDescription": "Boot Script (also called 'User Data Scripts') is used to customize the VM after it's provisioned."
   },
   "jiraLinks": {
     "projectLeadRequest":  "https://fabric-testbed.atlassian.net/servicedesk/customer/portal/2/group/11/create/41",
diff --git a/src/styles/App.scss b/src/styles/App.scss
index e7ba733c..2e9d72e0 100644
--- a/src/styles/App.scss
+++ b/src/styles/App.scss
@@ -281,7 +281,8 @@ a:hover {
 }
 
 th,
-ul {
+ul,
+.cursor-pointer {
   cursor: pointer;
 }
 
diff --git a/src/utils/sliceBuilder.js b/src/utils/sliceBuilder.js
index acbf3e86..4017ac57 100644
--- a/src/utils/sliceBuilder.js
+++ b/src/utils/sliceBuilder.js
@@ -7,6 +7,7 @@ const modelDetails = {
   "ConnectX-6": "Mellanox ConnectX-6 VPI MCX653 dual port 100Gbps",
   "ConnectX-5": "Mellanox ConnectX-5 Dual Port 10/25GbE",
   "P4510": "Dell Express Flash NVMe P4510 1TB SFF",
+  "NAS": "Site-local NAS share"
 }
 
 const generateID = (data) => {
@@ -25,10 +26,9 @@ const addComponent = (node, component, graphID, vm_node_id, component_node_id, c
   const nodes_to_add = [];
   const links_to_add = [];
 
-  // For GPU and NVME, only 1 node and 1 link to add.
+  // For GPU/ NVME/ Storage, only 1 node and 1 link to add.
   // For NIC, add 1 node and 1 link first.
   const component_node = {
-    "labels": ":Component:GraphNode",
     "Class": "Component",
     "Name": component.name,
     "Capacities": JSON.stringify({"unit": 1}),
@@ -41,6 +41,11 @@ const addComponent = (node, component, graphID, vm_node_id, component_node_id, c
     "GraphID": graphID,
   }
 
+  // For Storage component, add local name
+  if(component.type === "Storage") {
+    component_node.Labels = JSON.stringify({"local_name": component.name});
+  }
+
   const link = {
     "label": "has",
     "Class": "has",
@@ -60,7 +65,6 @@ const addComponent = (node, component, graphID, vm_node_id, component_node_id, c
     // Add NIC has OVS link
     // Add 1 Connection Points and OVS has CP link
     const ovs_node = {
-      "labels": ":GraphNode:NetworkService",
       "Name": `${node.site}-${node.name}-${component.name}-ovs`,
       "Class": "NetworkService",
       "NodeID": uuidv4(),
@@ -76,7 +80,6 @@ const addComponent = (node, component, graphID, vm_node_id, component_node_id, c
     }
 
     const cp_node =   {
-      "labels": ":ConnectionPoint:GraphNode",
       "Labels": JSON.stringify({"local_name": "p1"}),
       "Class": "ConnectionPoint",
       "Type": "SharedPort",
@@ -131,7 +134,6 @@ const addComponent = (node, component, graphID, vm_node_id, component_node_id, c
     // Add NIC has OVS link
     // Add 2 Connection Points and OVS has CP link
     const ovs_node = {
-      "labels": ":GraphNode:NetworkService",
       "Name": `${node.site}-${node.name}-${component.name}-ovs`,
       "Class": "NetworkService",
       "NodeID": uuidv4(),
@@ -147,7 +149,6 @@ const addComponent = (node, component, graphID, vm_node_id, component_node_id, c
     }
 
     const cp_node_1 =   {
-      "labels": ":ConnectionPoint:GraphNode",
       "Labels": JSON.stringify({"local_name": "p1"}),
       "Class": "ConnectionPoint",
       "Type": "DedicatedPort",
@@ -164,7 +165,6 @@ const addComponent = (node, component, graphID, vm_node_id, component_node_id, c
     }
 
     const cp_node_2 =   {
-      "labels": ":ConnectionPoint:GraphNode",
       "Labels": JSON.stringify({"local_name": "p2"}),
       "Class": "ConnectionPoint",
       "Type": "DedicatedPort",
@@ -225,7 +225,7 @@ const addComponent = (node, component, graphID, vm_node_id, component_node_id, c
     })
   }
 
-  if (component.type === "NVME" || component.type === "GPU"){
+  if (["NVME", "GPU", "Storage"].includes(component.type)){
     component_node.layout =  JSON.stringify({
       "parentID": vm_node_id,
       "relevantNodeIDs": [component_node_id],
@@ -256,7 +256,6 @@ const addVM = (node, components, graphID, nodes, links) => {
   }
 
   const vm_node = {
-    "labels": ":GraphNode:NetworkNode",
     "Class": "NetworkNode",
     "Name": node.name,
     "Site": node.site,
@@ -267,6 +266,7 @@ const addVM = (node, components, graphID, nodes, links) => {
     "NodeID": uuidv4(),
     "GraphID": graphID,
     "StitchNode": "false",
+    "BootScript": node.BootScript
   }
 
   if (components.length > 0) {
@@ -311,7 +311,6 @@ const addLink = (type, name, selectedCPs, graphID, nodes, links) => {
   if (type === "L2Bridge") {
     const siteName = selectedCPs[0].properties.name.substr(0, selectedCPs[0].properties.name.indexOf('-'));
     network_service_node = {
-      "labels": ":GraphNode:NetworkService",
       "Name": name,
       "Site": siteName,
       "Class": "NetworkService",
@@ -327,7 +326,6 @@ const addLink = (type, name, selectedCPs, graphID, nodes, links) => {
     }
   } else {
     network_service_node = {
-      "labels": ":GraphNode:NetworkService",
       "Name": name,
       "Class": "NetworkService",
       "NodeID": uuidv4(),
@@ -357,8 +355,7 @@ const addLink = (type, name, selectedCPs, graphID, nodes, links) => {
     relevantLinkIDs.push(new_link_id_starts, new_link_id_starts + 1, new_link_id_starts + 2);
 
     const new_ns_cp = {
-      "labels": ":ConnectionPoint:GraphNode",
-      // "Labels": JSON.stringify({"local_name": `p${i}`}),
+      "Labels": JSON.stringify({"local_name": `p${i}`}),
       "Class": "ConnectionPoint",
       "Type": "ServicePort",
       "Name": `${cp.properties.name}-p${i}`,
diff --git a/src/utils/sliceEditor.js b/src/utils/sliceEditor.js
index 954581db..a915cf0d 100644
--- a/src/utils/sliceEditor.js
+++ b/src/utils/sliceEditor.js
@@ -150,6 +150,7 @@ const updateVM = (data, nodes) => {
     if (parseInt(data.vm_id) === parseInt(node.id)) {
       node.Name = data.new_name;
       node.Capacities = data.new_capacities;
+      node.BootScript = data.new_boot_script;
     } 
     updated_nodes.push(node);
   }