diff --git a/fission/.env b/fission/.env
deleted file mode 100644
index f5c2b2b526..0000000000
--- a/fission/.env
+++ /dev/null
@@ -1,2 +0,0 @@
-VITE_SYNTHESIS_SERVER_PATH=/
-# VITE_SYNTHESIS_SERVER_PATH=https://synthesis.autodesk.com/
\ No newline at end of file
diff --git a/fission/bun.lockb b/fission/bun.lockb
deleted file mode 100755
index 397fe36750..0000000000
Binary files a/fission/bun.lockb and /dev/null differ
diff --git a/fission/src/Synthesis.tsx b/fission/src/Synthesis.tsx
index 9edd6954a1..d303e6c0b3 100644
--- a/fission/src/Synthesis.tsx
+++ b/fission/src/Synthesis.tsx
@@ -52,9 +52,9 @@ import DriverStationPanel from "@/panels/simulation/DriverStationPanel"
 import ManageAssembliesModal from "@/modals/spawning/ManageAssembliesModal.tsx"
 import World from "@/systems/World.ts"
 import { AddRobotsModal, AddFieldsModal, SpawningModal } from "@/modals/spawning/SpawningModals.tsx"
-import ImportMirabufModal from "@/modals/mirabuf/ImportMirabufModal.tsx"
 import ImportLocalMirabufModal from "@/modals/mirabuf/ImportLocalMirabufModal.tsx"
 import APS from "./aps/APS.ts"
+import ImportMirabufPanel from "@/ui/panels/mirabuf/ImportMirabufPanel.tsx"
 import Skybox from "./ui/components/Skybox.tsx"
 import PokerPanel from "@/panels/PokerPanel.tsx"
 
@@ -212,7 +212,6 @@ const initialModals = [
     <MatchModeModal key="match-mode" modalId="match-mode" />,
     <ConfigMotorModal key="config-motor" modalId="config-motor" />,
     <ManageAssembliesModal key="manage-assemblies" modalId="manage-assemblies" />,
-    <ImportMirabufModal key="import-mirabuf" modalId="import-mirabuf" />,
     <ImportLocalMirabufModal key="import-local-mirabuf" modalId="import-local-mirabuf" />,
 ]
 
@@ -225,6 +224,7 @@ const initialPanels: ReactElement[] = [
     <ConfigureShotTrajectoryPanel key="config-shot-trajectory" panelId="config-shot-trajectory" />,
     <ScoringZonesPanel key="scoring-zones" panelId="scoring-zones" />,
     <ZoneConfigPanel key="zone-config" panelId="zone-config" />,
+    <ImportMirabufPanel key="import-mirabuf" panelId="import-mirabuf" />,
     <PokerPanel key="poker" panelId="poker" />,
 ]
 
diff --git a/fission/src/aps/APS.ts b/fission/src/aps/APS.ts
index 6c5ae6388c..4ac006addf 100644
--- a/fission/src/aps/APS.ts
+++ b/fission/src/aps/APS.ts
@@ -8,14 +8,14 @@ export const APS_USER_INFO_UPDATE_EVENT = "aps_user_info_update"
 
 const CLIENT_ID = "GCxaewcLjsYlK8ud7Ka9AKf9dPwMR3e4GlybyfhAK2zvl3tU"
 
-const ENDPOINT_SYNTHESIS_CODE = `${import.meta.env.VITE_SYNTHESIS_SERVER_PATH}api/aps/code`
-export const ENDPOINT_SYNTHESIS_CHALLENGE = `${import.meta.env.VITE_SYNTHESIS_SERVER_PATH}api/aps/challenge`
+const ENDPOINT_SYNTHESIS_CODE = `/api/aps/code`
+export const ENDPOINT_SYNTHESIS_CHALLENGE = `/api/aps/challenge`
 
 const ENDPOINT_AUTODESK_AUTHENTICATION_AUTHORIZE = "https://developer.api.autodesk.com/authentication/v2/authorize"
 const ENDPOINT_AUTODESK_AUTHENTICATION_TOKEN = "https://developer.api.autodesk.com/authentication/v2/token"
 const ENDPOINT_AUTODESK_USERINFO = "https://api.userprofile.autodesk.com/userinfo"
 
-interface APSAuth {
+export interface APSAuth {
     access_token: string
     refresh_token: string
     expires_in: number
@@ -23,7 +23,7 @@ interface APSAuth {
     token_type: number
 }
 
-interface APSUserInfo {
+export interface APSUserInfo {
     name: string
     picture: string
     givenName: string
@@ -73,7 +73,14 @@ class APS {
      * Returns the auth data of the current user. See {@link APSAuth}
      * @returns {(APSAuth | undefined)} Auth data of the current user
      */
-    static getAuth(): APSAuth | undefined {
+    static async getAuth(): Promise<APSAuth | undefined> {
+        const auth = this.auth
+        if (!auth) return undefined
+
+        if (Date.now() > auth.expires_at) {
+            console.debug("Expired. Refreshing...")
+            await this.refreshAuthToken(auth.refresh_token, false)
+        }
         return this.auth
     }
 
@@ -83,10 +90,13 @@ class APS {
      */
     static async getAuthOrLogin(): Promise<APSAuth | undefined> {
         const auth = this.auth
-        if (!auth) return undefined
+        if (!auth) {
+            this.requestAuthCode()
+            return undefined
+        }
 
         if (Date.now() > auth.expires_at) {
-            await this.refreshAuthToken(auth.refresh_token)
+            await this.refreshAuthToken(auth.refresh_token, true)
         }
         return this.auth
     }
@@ -158,9 +168,12 @@ class APS {
     /**
      * Refreshes the access token using our refresh token.
      * @param {string} refresh_token - The refresh token from our auth data
+     *
+     * @returns If the promise returns true, that means the auth token is currently available. If not, it means it
+     *           is not readily available, although one may be in the works
      */
-    static async refreshAuthToken(refresh_token: string) {
-        await this.requestMutex.runExclusive(async () => {
+    static async refreshAuthToken(refresh_token: string, shouldRelog: boolean): Promise<boolean> {
+        return this.requestMutex.runExclusive(async () => {
             try {
                 const res = await fetch(ENDPOINT_AUTODESK_AUTHENTICATION_TOKEN, {
                     method: "POST",
@@ -176,12 +189,16 @@ class APS {
                 })
                 const json = await res.json()
                 if (!res.ok) {
-                    MainHUD_AddToast("error", "Error signing in.", json.userMessage)
-                    this.auth = undefined
-                    await this.requestAuthCode()
-                    return
+                    if (shouldRelog) {
+                        MainHUD_AddToast("warning", "Must Re-signin.", json.userMessage)
+                        this.auth = undefined
+                        await this.requestAuthCode()
+                        return false
+                    } else {
+                        return false
+                    }
                 }
-                json.expires_at = json.expires_in + Date.now()
+                json.expires_at = json.expires_in * 1000 + Date.now()
                 this.auth = json as APSAuth
                 if (this.auth) {
                     await this.loadUserInfo(this.auth)
@@ -189,10 +206,12 @@ class APS {
                         MainHUD_AddToast("info", "ADSK Login", `Hello, ${APS.userInfo.givenName}`)
                     }
                 }
+                return true
             } catch (e) {
                 MainHUD_AddToast("error", "Error signing in.", "Please try again.")
                 this.auth = undefined
                 await this.requestAuthCode()
+                return false
             }
         })
     }
@@ -212,7 +231,7 @@ class APS {
                 return
             }
             const auth_res = json.response as APSAuth
-            auth_res.expires_at = auth_res.expires_in + Date.now()
+            auth_res.expires_at = auth_res.expires_in * 1000 + Date.now()
             this.auth = auth_res
             console.log("Preloading user info")
             const auth = await this.getAuth()
diff --git a/fission/src/aps/APSDataManagement.ts b/fission/src/aps/APSDataManagement.ts
index 833794583e..6eac626c53 100644
--- a/fission/src/aps/APSDataManagement.ts
+++ b/fission/src/aps/APSDataManagement.ts
@@ -1,9 +1,45 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import { MainHUD_AddToast } from "@/ui/components/MainHUD"
 import APS from "./APS"
+import TaskStatus from "@/util/TaskStatus"
+import { Mutex } from "async-mutex"
 
 export const FOLDER_DATA_TYPE = "folders"
 export const ITEM_DATA_TYPE = "items"
 
+let mirabufFiles: Data[] | undefined
+const mirabufFilesMutex: Mutex = new Mutex()
+
+export class APSDataError extends Error {
+    error_code: string
+    title: string
+    detail: string
+
+    constructor(error_code: string, title: string, detail: string) {
+        super(title)
+        this.name = "APSDataError"
+        this.error_code = error_code
+        this.title = title
+        this.detail = detail
+    }
+}
+
+export type APSHubError = {
+    Id: string | null
+    HttpStatusCode: string
+    ErrorCode: string
+    Title: string
+    Detail: string
+    AboutLink: string | null
+    Source: string | null
+    meta: object | null
+}
+
+export type Filter = {
+    fieldName: string
+    matchValue: string
+}
+
 export interface Hub {
     id: string
     name: string
@@ -15,13 +51,29 @@ export interface Project {
     folder: Folder
 }
 
+export type DataAttributes = {
+    name: string
+    displayName?: string
+    versionNumber?: number
+    fileType?: string
+}
+
 export class Data {
     id: string
     type: string
+    attributes: DataAttributes
+    href: string | undefined
+
+    raw: any
 
     constructor(x: any) {
         this.id = x.id
         this.type = x.type
+        this.attributes = x.attributes
+
+        this.raw = x
+
+        this.href = x.relationships?.storage?.meta?.link?.href
     }
 }
 
@@ -59,7 +111,7 @@ export class Item extends Data {
 }
 
 export async function getHubs(): Promise<Hub[] | undefined> {
-    const auth = APS.getAuth()
+    const auth = await APS.getAuth()
     if (!auth) {
         return undefined
     }
@@ -73,7 +125,7 @@ export async function getHubs(): Promise<Hub[] | undefined> {
         })
             .then(x => x.json())
             .then(x => {
-                if ((x.data as any[]).length > 0) {
+                if ((x.data as any[] | undefined)?.length ?? 0 > 0) {
                     return (x.data as any[]).map<Hub>(y => {
                         return { id: y.id, name: y.attributes.name }
                     })
@@ -83,12 +135,20 @@ export async function getHubs(): Promise<Hub[] | undefined> {
             })
     } catch (e) {
         console.error("Failed to get hubs")
+        console.error(e)
+        console.log(auth)
+        console.log(APS.userInfo)
+        if (e instanceof APSDataError) {
+            MainHUD_AddToast("error", e.title, e.detail)
+        } else if (e instanceof Error) {
+            MainHUD_AddToast("error", "Failed to get hubs.", e.message)
+        }
         return undefined
     }
 }
 
 export async function getProjects(hub: Hub): Promise<Project[] | undefined> {
-    const auth = APS.getAuth()
+    const auth = await APS.getAuth()
     if (!auth) {
         return undefined
     }
@@ -116,12 +176,15 @@ export async function getProjects(hub: Hub): Promise<Project[] | undefined> {
             })
     } catch (e) {
         console.error("Failed to get hubs")
+        if (e instanceof Error) {
+            MainHUD_AddToast("error", "Failed to get hubs.", e.message)
+        }
         return undefined
     }
 }
 
 export async function getFolderData(project: Project, folder: Folder): Promise<Data[] | undefined> {
-    const auth = APS.getAuth()
+    const auth = await APS.getAuth()
     if (!auth) {
         return undefined
     }
@@ -157,6 +220,134 @@ export async function getFolderData(project: Project, folder: Folder): Promise<D
             })
     } catch (e) {
         console.error("Failed to get folder data")
+        if (e instanceof Error) {
+            MainHUD_AddToast("error", "Failed to get folder data.", e.message)
+        }
+        return undefined
+    }
+}
+
+function filterToQuery(filters: Filter[]): string {
+    return filters.map(filter => encodeURIComponent(`filter[${filter.fieldName}]`) + `=${filter.matchValue}`).join("&")
+}
+
+export async function searchFolder(project: Project, folder: Folder, filters?: Filter[]): Promise<Data[] | undefined> {
+    const auth = await APS.getAuth()
+    if (!auth) return undefined
+    let endpoint = `https://developer.api.autodesk.com/data/v1/projects/${project.id}/folders/${folder.id}/search`
+    if (filters && filters.length > 0) {
+        endpoint += `?${filterToQuery(filters)}`
+    }
+
+    const res = await fetch(endpoint, {
+        method: "GET",
+        headers: {
+            Authorization: `Bearer ${auth.access_token}`,
+        },
+    })
+    if (!res.ok) {
+        MainHUD_AddToast("error", "Error getting cloud files.", "Please sign in again.")
+        return []
+    }
+    const json = await res.json()
+    return json.data.map((data: any) => new Data(data))
+}
+
+export async function searchRootForMira(project: Project): Promise<Data[] | undefined> {
+    return searchFolder(project, project.folder, [{ fieldName: "fileType", matchValue: "mira" }])
+}
+
+export async function downloadData(data: Data): Promise<ArrayBuffer | undefined> {
+    if (!data.href) {
         return undefined
     }
+
+    const auth = await APS.getAuth()
+    if (!auth) {
+        return undefined
+    }
+
+    return await fetch(data.href, {
+        method: "GET",
+        headers: {
+            Authorization: `Bearer ${auth.access_token}`,
+        },
+    }).then(x => x.arrayBuffer())
+}
+
+export function HasMirabufFiles(): boolean {
+    return mirabufFiles != undefined
+}
+
+export async function RequestMirabufFiles() {
+    console.log("Request")
+
+    if (mirabufFilesMutex.isLocked()) {
+        return
+    }
+
+    mirabufFilesMutex.runExclusive(async () => {
+        const auth = await APS.getAuth()
+        if (auth) {
+            getHubs().then(async hubs => {
+                if (!hubs) {
+                    window.dispatchEvent(
+                        new MirabufFilesStatusUpdateEvent({ isDone: true, message: "Failed to get Hubs" })
+                    )
+                    return
+                }
+                const fileData: Data[] = []
+                for (const hub of hubs) {
+                    const projects = await getProjects(hub)
+                    if (!projects) continue
+                    for (const project of projects) {
+                        window.dispatchEvent(
+                            new MirabufFilesStatusUpdateEvent({
+                                isDone: false,
+                                message: `Searching Project '${project.name}'`,
+                            })
+                        )
+                        const data = await searchRootForMira(project)
+                        if (data) fileData.push(...data)
+                    }
+                }
+                window.dispatchEvent(
+                    new MirabufFilesStatusUpdateEvent({
+                        isDone: true,
+                        message: `Found ${fileData.length} file${fileData.length == 1 ? "" : "s"}`,
+                    })
+                )
+                mirabufFiles = fileData
+                window.dispatchEvent(new MirabufFilesUpdateEvent(mirabufFiles))
+            })
+        }
+    })
+}
+
+export function GetMirabufFiles(): Data[] | undefined {
+    return mirabufFiles
+}
+
+export class MirabufFilesUpdateEvent extends Event {
+    public static readonly EVENT_KEY: string = "MirabufFilesUpdateEvent"
+
+    public data: Data[]
+
+    public constructor(data: Data[]) {
+        super(MirabufFilesUpdateEvent.EVENT_KEY)
+
+        this.data = data
+    }
+}
+
+export class MirabufFilesStatusUpdateEvent extends Event {
+    public static readonly EVENT_KEY: string = "MirabufFilesStatusUpdateEvent"
+
+    public status: TaskStatus
+
+    public constructor(status: TaskStatus) {
+        super(MirabufFilesStatusUpdateEvent.EVENT_KEY)
+
+        this.status = status
+    }
 }
diff --git a/fission/src/mirabuf/MirabufLoader.ts b/fission/src/mirabuf/MirabufLoader.ts
index 3b3ecd925b..ce438ec140 100644
--- a/fission/src/mirabuf/MirabufLoader.ts
+++ b/fission/src/mirabuf/MirabufLoader.ts
@@ -1,3 +1,4 @@
+import { Data, downloadData } from "@/aps/APSDataManagement"
 import { mirabuf } from "@/proto/mirabuf"
 import Pako from "pako"
 
@@ -14,6 +15,11 @@ export interface MirabufCacheInfo {
     thumbnailStorageID?: string
 }
 
+export interface MirabufRemoteInfo {
+    displayName: string
+    src: string
+}
+
 type MiraCache = { [id: string]: MirabufCacheInfo }
 
 const robotsDirName = "Robots"
@@ -68,12 +74,14 @@ class MirabufCachingService {
      *
      * @returns {Promise<MirabufCacheInfo | undefined>} Promise with the result of the promise. Metadata on the mirabuf file if successful, undefined if not.
      */
-    public static async CacheRemote(fetchLocation: string, miraType: MiraType): Promise<MirabufCacheInfo | undefined> {
-        const map = MirabufCachingService.GetCacheMap(miraType)
-        const target = map[fetchLocation]
+    public static async CacheRemote(fetchLocation: string, miraType?: MiraType): Promise<MirabufCacheInfo | undefined> {
+        if (miraType) {
+            const map = MirabufCachingService.GetCacheMap(miraType)
+            const target = map[fetchLocation]
 
-        if (target) {
-            return target
+            if (target) {
+                return target
+            }
         }
 
         // Grab file remote
@@ -83,6 +91,28 @@ class MirabufCachingService {
         return await MirabufCachingService.StoreInCache(fetchLocation, miraBuff, miraType)
     }
 
+    public static async CacheAPS(data: Data, miraType: MiraType): Promise<MirabufCacheInfo | undefined> {
+        if (!data.href) {
+            console.error("Data has no href")
+            return undefined
+        }
+
+        const map = MirabufCachingService.GetCacheMap(miraType)
+        const target = map[data.id]
+
+        if (target) {
+            return target
+        }
+
+        const miraBuff = await downloadData(data)
+        if (!miraBuff) {
+            console.error("Failed to download file")
+            return undefined
+        }
+
+        return await MirabufCachingService.StoreInCache(data.id, miraBuff, miraType)
+    }
+
     /**
      * Cache local Mirabuf file
      *
@@ -206,7 +236,14 @@ class MirabufCachingService {
      */
     public static async Remove(key: string, id: MirabufCacheID, miraType: MiraType): Promise<boolean> {
         try {
-            window.localStorage.removeItem(key)
+            const map = this.GetCacheMap(miraType)
+            if (map) {
+                delete map[key]
+                window.localStorage.setItem(
+                    miraType == MiraType.ROBOT ? robotsDirName : fieldsDirName,
+                    JSON.stringify(map)
+                )
+            }
 
             const dir = miraType == MiraType.ROBOT ? robotFolderHandle : fieldFolderHandle
             await dir.removeEntry(id)
@@ -237,12 +274,17 @@ class MirabufCachingService {
     private static async StoreInCache(
         key: string,
         miraBuff: ArrayBuffer,
-        miraType: MiraType,
+        miraType?: MiraType,
         name?: string
     ): Promise<MirabufCacheInfo | undefined> {
         // Store in OPFS
         const backupID = Date.now().toString()
         try {
+            if (!miraType) {
+                console.log("Double loading")
+                miraType = this.AssemblyFromBuffer(miraBuff).dynamic ? MiraType.ROBOT : MiraType.FIELD
+            }
+
             const fileHandle = await (miraType == MiraType.ROBOT ? robotFolderHandle : fieldFolderHandle).getFileHandle(
                 backupID,
                 { create: true }
@@ -282,8 +324,8 @@ class MirabufCachingService {
 }
 
 export enum MiraType {
-    ROBOT,
-    FIELD,
+    ROBOT = 1,
+    FIELD = 2,
 }
 
 export default MirabufCachingService
diff --git a/fission/src/ui/ThemeContext.tsx b/fission/src/ui/ThemeContext.tsx
index ef33d33fac..233907d172 100644
--- a/fission/src/ui/ThemeContext.tsx
+++ b/fission/src/ui/ThemeContext.tsx
@@ -51,6 +51,11 @@ export const colorNameToProp = (colorName: ColorName) => {
             .toLowerCase()
     )
 }
+
+export const colorNameToVar = (colorName: ColorName) => {
+    return `var(${colorNameToProp(colorName)})`
+}
+
 export type Theme = {
     [name in ColorName]: { color: RgbaColor; above: (ColorName | string)[] }
 }
diff --git a/fission/src/ui/ToastContext.tsx b/fission/src/ui/ToastContext.tsx
index a6ee866b88..41dcd6c058 100644
--- a/fission/src/ui/ToastContext.tsx
+++ b/fission/src/ui/ToastContext.tsx
@@ -80,7 +80,7 @@ export const ToastContainer: React.FC = () => {
                             key={t.id}
                             className="w-fit"
                         >
-                            <Toast id={t.id} type={t.type} title={t.title} description={t.description} />
+                            <Toast key={t.id} id={t.id} type={t.type} title={t.title} description={t.description} />
                         </motion.div>
                     ))}
             </AnimatePresence>
diff --git a/fission/src/ui/components/Button.tsx b/fission/src/ui/components/Button.tsx
index 3d18c026ad..3f6f5ada7e 100644
--- a/fission/src/ui/components/Button.tsx
+++ b/fission/src/ui/components/Button.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { ReactNode } from "react"
 import { Button as BaseButton } from "@mui/base/Button"
 
 export enum ButtonSize {
@@ -8,32 +8,35 @@ export enum ButtonSize {
     XL,
 }
 
-type ButtonProps = {
-    value: string
+export type ButtonProps = {
+    value: ReactNode
     colorOverrideClass?: string
+    sizeOverrideClass?: string
     size?: ButtonSize
     onClick?: () => void
     className?: string
 }
 
-const Button: React.FC<ButtonProps> = ({ value, colorOverrideClass, size, onClick, className }) => {
-    let sizeClassNames
+const Button: React.FC<ButtonProps> = ({ value, colorOverrideClass, sizeOverrideClass, size, onClick, className }) => {
+    let sizeClassNames = sizeOverrideClass
 
     if (!size) size = ButtonSize.Medium as ButtonSize
 
-    switch (size) {
-        case ButtonSize.Small:
-            sizeClassNames = "px-2 py-1"
-            break
-        case ButtonSize.Medium:
-            sizeClassNames = "px-4 py-1"
-            break
-        case ButtonSize.Large:
-            sizeClassNames = "px-8 py-2"
-            break
-        case ButtonSize.XL:
-            sizeClassNames = "px-10 py-2"
-            break
+    if (!sizeClassNames) {
+        switch (size) {
+            case ButtonSize.Small:
+                sizeClassNames = "px-4 py-1"
+                break
+            case ButtonSize.Medium:
+                sizeClassNames = "px-6 py-1.5"
+                break
+            case ButtonSize.Large:
+                sizeClassNames = "px-8 py-2"
+                break
+            case ButtonSize.XL:
+                sizeClassNames = "px-10 py-2"
+                break
+        }
     }
 
     return (
@@ -43,7 +46,7 @@ const Button: React.FC<ButtonProps> = ({ value, colorOverrideClass, size, onClic
                 colorOverrideClass
                     ? colorOverrideClass
                     : "bg-gradient-to-r from-interactive-element-left via-interactive-element-right to-interactive-element-left bg-[length:200%_100%] active:bg-right"
-            } w-full h-full ${sizeClassNames} rounded-sm font-semibold cursor-pointer duration-200 border-none focus-visible:outline-0 focus:outline-0 ${
+            } w-fit h-fit ${sizeClassNames} rounded-sm font-semibold cursor-pointer duration-200 border-none focus-visible:outline-0 focus:outline-0 ${
                 className || ""
             }`}
         >
diff --git a/fission/src/ui/components/MainHUD.tsx b/fission/src/ui/components/MainHUD.tsx
index 2827c61129..48f4eeb917 100644
--- a/fission/src/ui/components/MainHUD.tsx
+++ b/fission/src/ui/components/MainHUD.tsx
@@ -95,7 +95,7 @@ const MainHUD: React.FC = () => {
                     value={"Spawn Asset"}
                     icon={<FaPlus />}
                     larger={true}
-                    onClick={() => openModal("spawning")}
+                    onClick={() => openPanel("import-mirabuf")}
                 />
                 <div className="flex flex-col gap-0 bg-background w-full rounded-3xl">
                     <MainHUDButton
@@ -111,11 +111,6 @@ const MainHUD: React.FC = () => {
                         onClick={() => openModal("change-inputs")}
                     />
                     <MainHUDButton value={"MultiBot"} icon={<IoPeople />} onClick={() => openPanel("multibot")} />
-                    <MainHUDButton
-                        value={"Import Mira"}
-                        icon={<IoPeople />}
-                        onClick={() => openModal("import-mirabuf")}
-                    />
                     <MainHUDButton
                         value={"Import Local Mira"}
                         icon={<IoPeople />}
@@ -130,7 +125,9 @@ const MainHUD: React.FC = () => {
                     <MainHUDButton
                         value={"Refresh APS Token"}
                         icon={<IoRefresh />}
-                        onClick={() => APS.isSignedIn() && APS.refreshAuthToken(APS.getAuth()!.refresh_token)}
+                        onClick={async () =>
+                            APS.isSignedIn() && APS.refreshAuthToken((await APS.getAuth())!.refresh_token, true)
+                        }
                     />
                     <MainHUDButton
                         value={"Expire APS Token"}
diff --git a/fission/src/ui/components/Modal.tsx b/fission/src/ui/components/Modal.tsx
index eb43879fc2..04a9577a25 100644
--- a/fission/src/ui/components/Modal.tsx
+++ b/fission/src/ui/components/Modal.tsx
@@ -30,6 +30,7 @@ type ModalProps = {
 const Modal: React.FC<ModalProps> = ({
     children,
     name,
+    modalId,
     icon,
     onCancel,
     onMiddle,
@@ -51,10 +52,11 @@ const Modal: React.FC<ModalProps> = ({
     const iconEl: ReactNode = typeof icon === "string" ? <img src={icon} className="w-6" alt="Icon" /> : icon
 
     return (
-        <ClickAwayListener onClickAway={_ => closeModal()}>
+        <ClickAwayListener onClickAway={_ => closeModal()} key={modalId}>
             <div
-                id={name}
-                className={`${className} backdrop-blur-[4px] absolute w-fit h-fit left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-background text-main-text m-auto border-5 rounded-2xl shadow-sm shadow-slate-800`}
+                id={modalId}
+                key={modalId}
+                className={`${className} flex flex-col absolute max-w-[98vw] max-h-[90vh] w-fit h-fit left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-background text-main-text m-auto border-5 rounded-2xl shadow-sm shadow-slate-800`}
             >
                 {name && (
                     <div id="header" className="flex items-center gap-8 h-16">
@@ -68,7 +70,7 @@ const Modal: React.FC<ModalProps> = ({
                     id="content"
                     className={`${contentClassName} ${
                         !contentClassName?.includes("mx") ? "mx-16" : ""
-                    } flex flex-col gap-4`}
+                    } flex overflow-y-auto flex-col h-fit gap-4`}
                 >
                     {children}
                 </div>
diff --git a/fission/src/ui/components/Panel.tsx b/fission/src/ui/components/Panel.tsx
index bf0703ffce..b8faee4977 100644
--- a/fission/src/ui/components/Panel.tsx
+++ b/fission/src/ui/components/Panel.tsx
@@ -125,7 +125,7 @@ const Panel: React.FC<PanelProps> = ({
     return (
         <div>
             <div
-                className={`absolute ${locationClasses.className} ${className || ""} bg-background text-main-text m-auto border-5 rounded-2xl shadow-sm shadow-slate-800`}
+                className={`absolute ${locationClasses.className} ${className || ""} max-h-[95vh] max-w-[50vw] bg-background text-main-text m-auto border-5 rounded-2xl shadow-sm shadow-slate-800`}
                 style={locationClasses.styles}
                 key={"panel-" + panelId}
             >
@@ -138,13 +138,16 @@ const Panel: React.FC<PanelProps> = ({
                 <div
                     id="content"
                     className={`${contentClassName || ""} ${
-                        !contentClassName?.includes("mx") ? "mx-16" : ""
+                        !contentClassName?.includes("mx") ? "mx-[2rem]" : ""
                     } flex flex-col gap-4 max-h-[75vh]`}
                 >
                     {children}
                 </div>
                 {(cancelEnabled || middleEnabled || acceptEnabled) && (
-                    <div id="footer" className="flex justify-between mx-10 py-8 text-accept-cancel-button-text">
+                    <div
+                        id="footer"
+                        className="flex justify-between mx-[2rem] py-[1rem] text-accept-cancel-button-text"
+                    >
                         {cancelEnabled && (
                             <input
                                 type="button"
diff --git a/fission/src/ui/components/ToggleButtonGroup.tsx b/fission/src/ui/components/ToggleButtonGroup.tsx
new file mode 100644
index 0000000000..8b11fafe59
--- /dev/null
+++ b/fission/src/ui/components/ToggleButtonGroup.tsx
@@ -0,0 +1,22 @@
+import { ToggleButton as ToggleButtonMUI, ToggleButtonGroup as ToggleButtonGroupMUI } from "@mui/material"
+import { styled } from "@mui/system"
+import { colorNameToVar } from "../ThemeContext"
+
+export const ToggleButton = styled(ToggleButtonMUI)({
+    // backgroundColor: "white"
+    "borderColor": "none",
+    "fontFamily": "Artifakt",
+    "fontWeight": 700,
+    "color": "white",
+    "&.Mui-selected": {
+        color: "white",
+        backgroundImage: `linear-gradient(to right, ${colorNameToVar("InteractiveElementLeft")}, ${colorNameToVar("InteractiveElementRight")})`,
+    },
+})
+
+export const ToggleButtonGroup = styled(ToggleButtonGroupMUI)({
+    backgroundColor: colorNameToVar("Background"),
+    fontFamily: "Artifakt",
+    fontWeight: 700,
+    width: "fit-content",
+})
diff --git a/fission/src/ui/modals/mirabuf/ImportMirabufModal.tsx b/fission/src/ui/modals/mirabuf/ImportMirabufModal.tsx
deleted file mode 100644
index cfaff52ff7..0000000000
--- a/fission/src/ui/modals/mirabuf/ImportMirabufModal.tsx
+++ /dev/null
@@ -1,166 +0,0 @@
-import React, { useEffect, useState } from "react"
-import Modal, { ModalPropsImpl } from "@/components/Modal"
-import { FaPlus } from "react-icons/fa6"
-import Button from "@/components/Button"
-import Label, { LabelSize } from "@/components/Label"
-import { Data, Folder, Hub, Item, Project, getFolderData, getHubs, getProjects } from "@/aps/APSDataManagement"
-
-interface ItemCardProps {
-    id: string
-    name: string
-    buttonText: string
-    onClick: () => void
-}
-
-const ItemCard: React.FC<ItemCardProps> = ({ id, name, buttonText, onClick }) => {
-    return (
-        <div
-            key={id}
-            className="flex flex-row align-middle justify-between items-center bg-background rounded-sm p-2 gap-2"
-        >
-            <Label className="text-wrap break-all">{name}</Label>
-            <Button value={buttonText} onClick={onClick} />
-        </div>
-    )
-}
-
-const ImportMirabufModal: React.FC<ModalPropsImpl> = ({ modalId }) => {
-    // update tooltip based on type of drivetrain, receive message from Synthesis
-    // const { showTooltip } = useTooltipControlContext()
-
-    const [selectedHub, setSelectedHub] = useState<Hub | undefined>(undefined)
-    const [selectedProject, setSelectedProject] = useState<Project | undefined>(undefined)
-    const [selectedFolder, setSelectedFolder] = useState<Folder | undefined>(undefined)
-
-    const [hubs, setHubs] = useState<Hub[] | undefined>(undefined)
-    // prettier-ignore
-    useEffect(() => {
-        (async () => {
-            setHubs(await getHubs())
-        })()
-    }, [])
-
-    const [projects, setProjects] = useState<Project[] | undefined>(undefined)
-    // prettier-ignore
-    useEffect(() => {
-        (async () => {
-            if (selectedHub) {
-                setProjects(await getProjects(selectedHub))
-            }
-        })()
-    }, [selectedHub])
-
-    const [folderData, setFolderData] = useState<Data[] | undefined>(undefined)
-    // prettier-ignore
-    useEffect(() => {
-        (async () => {
-            if (selectedProject) {
-                console.log("Project has been selected")
-                if (selectedFolder) {
-                    console.log(`Selecting folder '${selectedFolder.displayName}'`)
-
-                    setFolderData(await getFolderData(selectedProject, selectedFolder))
-                } else {
-                    console.log("Defaulting to project root folder")
-                    const data = await getFolderData(selectedProject, selectedProject.folder)
-                    console.log(`Folder Data:\n${JSON.stringify(data)}`)
-                    setFolderData(data)
-                }
-            }
-        })()
-    }, [selectedProject, selectedFolder])
-
-    useEffect(() => {
-        if (folderData) {
-            console.log(`${folderData.length} items in folder data`)
-        } else {
-            console.log("No folder data")
-        }
-    }, [folderData])
-
-    return (
-        <Modal
-            name={"Manage Assemblies"}
-            icon={<FaPlus />}
-            modalId={modalId}
-            onAccept={() => {
-                // showTooltip("controls", [
-                //     { control: "WASD", description: "Drive" },
-                //     { control: "E", description: "Intake" },
-                //     { control: "Q", description: "Dispense" },
-                // ]);
-            }}
-        >
-            <div className="w-full flex flex-col items-center">
-                {selectedHub ? (
-                    selectedFolder ? (
-                        <>
-                            <Label size={LabelSize.Medium}>Folder: {selectedFolder.displayName}</Label>
-                            <Button value="back to project root" onClick={() => setSelectedFolder(undefined)} />
-                        </>
-                    ) : selectedProject ? (
-                        <>
-                            <Label size={LabelSize.Medium}>Project: {selectedProject.name}</Label>
-                            <Button value="back to projects" onClick={() => setSelectedProject(undefined)} />
-                        </>
-                    ) : (
-                        <>
-                            <Label size={LabelSize.Medium}>Hub: {selectedHub.name}</Label>
-                            <Button value="back to hubs" onClick={() => setSelectedHub(undefined)} />
-                        </>
-                    )
-                ) : (
-                    <></>
-                )}
-            </div>
-            <div className="flex overflow-y-auto flex-col gap-2 min-w-[50vw] max-h-[60vh] bg-background-secondary rounded-md p-2">
-                {!selectedHub
-                    ? hubs?.map(x =>
-                          ItemCard({
-                              name: x.name,
-                              id: x.id,
-                              buttonText: ">",
-                              onClick: () => setSelectedHub(x),
-                          })
-                      )
-                    : !selectedProject
-                      ? projects?.map(x =>
-                            ItemCard({
-                                name: x.name,
-                                id: x.id,
-                                buttonText: ">",
-                                onClick: () => setSelectedProject(x),
-                            })
-                        )
-                      : folderData?.map(x =>
-                            x instanceof Folder
-                                ? ItemCard({
-                                      name: `DIR: ${x.displayName}`,
-                                      id: x.id,
-                                      buttonText: ">",
-                                      onClick: () => setSelectedFolder(x),
-                                  })
-                                : x instanceof Item
-                                  ? ItemCard({
-                                        name: `${x.displayName}`,
-                                        id: x.id,
-                                        buttonText: "import",
-                                        onClick: () => {
-                                            console.log(`Selecting ${x.displayName} (${x.id})`)
-                                        },
-                                    })
-                                  : ItemCard({
-                                        name: `${x.type}: ${x.id}`,
-                                        id: x.id,
-                                        buttonText: "---",
-                                        onClick: () => {
-                                            console.log(`Selecting (${x.id})`)
-                                        },
-                                    })
-                        )}
-            </div>
-        </Modal>
-    )
-}
-
-export default ImportMirabufModal
diff --git a/fission/src/ui/panels/mirabuf/ImportMirabufPanel.tsx b/fission/src/ui/panels/mirabuf/ImportMirabufPanel.tsx
new file mode 100644
index 0000000000..e4498c7e97
--- /dev/null
+++ b/fission/src/ui/panels/mirabuf/ImportMirabufPanel.tsx
@@ -0,0 +1,447 @@
+import React, { ReactNode, useCallback, useEffect, useMemo, useState } from "react"
+import Label, { LabelSize } from "@/components/Label"
+import {
+    Data,
+    GetMirabufFiles,
+    HasMirabufFiles,
+    MirabufFilesStatusUpdateEvent,
+    MirabufFilesUpdateEvent,
+    RequestMirabufFiles,
+} from "@/aps/APSDataManagement"
+import MirabufCachingService, { MirabufCacheInfo, MirabufRemoteInfo, MiraType } from "@/mirabuf/MirabufLoader"
+import World from "@/systems/World"
+import { useTooltipControlContext } from "@/ui/TooltipContext"
+import { CreateMirabuf } from "@/mirabuf/MirabufSceneObject"
+import { Box, Divider, styled } from "@mui/material"
+import { HiDownload } from "react-icons/hi"
+import Button, { ButtonProps, ButtonSize } from "@/ui/components/Button"
+import { ToggleButton, ToggleButtonGroup } from "@/ui/components/ToggleButtonGroup"
+import { IoTrashBin } from "react-icons/io5"
+import { AiOutlinePlus } from "react-icons/ai"
+import Panel, { PanelPropsImpl } from "@/ui/components/Panel"
+import { usePanelControlContext } from "@/ui/PanelContext"
+import TaskStatus from "@/util/TaskStatus"
+import { BiRefresh } from "react-icons/bi"
+
+const DownloadIcon = <HiDownload size={"1.25rem"} />
+const AddIcon = <AiOutlinePlus size={"1.25rem"} />
+const DeleteIcon = <IoTrashBin size={"1.25rem"} />
+const RefreshIcon = <BiRefresh size={"1.25rem"} />
+
+const LabelStyled = styled(Label)({
+    fontWeight: 700,
+    margin: "0pt",
+})
+
+const DividerStyled = styled(Divider)({
+    borderColor: "white",
+})
+
+const ButtonPrimary: React.FC<ButtonProps> = ({ value, onClick }) => {
+    return (
+        <Button
+            size={ButtonSize.Medium}
+            value={value}
+            onClick={onClick}
+            colorOverrideClass="bg-accept-button hover:brightness-90"
+        ></Button>
+    )
+}
+
+const ButtonSecondary: React.FC<ButtonProps> = ({ value, onClick }) => {
+    return (
+        <Button
+            size={ButtonSize.Medium}
+            value={value}
+            onClick={onClick}
+            colorOverrideClass="bg-cancel-button hover:brightness-90"
+        ></Button>
+    )
+}
+
+const ButtonIcon: React.FC<ButtonProps> = ({ value, onClick }) => {
+    return (
+        <Button
+            value={value}
+            onClick={onClick}
+            colorOverrideClass="bg-[#00000000] hover:brightness-90"
+            sizeOverrideClass="p-[0.25rem]"
+        ></Button>
+    )
+}
+
+interface ItemCardProps {
+    id: string
+    name: string
+    primaryButtonNode: ReactNode
+    secondaryButtonNode?: ReactNode
+    primaryOnClick: () => void
+    secondaryOnClick?: () => void
+}
+
+const ItemCard: React.FC<ItemCardProps> = ({
+    id,
+    name,
+    primaryButtonNode,
+    secondaryButtonNode,
+    primaryOnClick,
+    secondaryOnClick,
+}) => {
+    return (
+        <Box
+            component={"div"}
+            display={"flex"}
+            key={id}
+            justifyContent={"space-between"}
+            alignItems={"center"}
+            gap={"1rem"}
+        >
+            <LabelStyled className="text-wrap break-all">{name.replace(/.mira$/, "")}</LabelStyled>
+            <Box
+                component={"div"}
+                display={"flex"}
+                key={`button-box-${id}`}
+                flexDirection={"row-reverse"}
+                gap={"0.25rem"}
+                justifyContent={"center"}
+                alignItems={"center"}
+            >
+                <ButtonPrimary value={primaryButtonNode} onClick={primaryOnClick} />
+                {secondaryButtonNode && secondaryOnClick && (
+                    <ButtonSecondary value={secondaryButtonNode} onClick={secondaryOnClick} />
+                )}
+            </Box>
+        </Box>
+    )
+}
+
+export type MiraManifest = {
+    robots: MirabufRemoteInfo[]
+    fields: MirabufRemoteInfo[]
+}
+
+function GetCacheInfo(miraType: MiraType): MirabufCacheInfo[] {
+    return Object.values(MirabufCachingService.GetCacheMap(miraType))
+}
+
+function SpawnCachedMira(info: MirabufCacheInfo, type: MiraType) {
+    MirabufCachingService.Get(info.id, type).then(assembly => {
+        if (assembly) {
+            CreateMirabuf(assembly).then(x => {
+                if (x) {
+                    World.SceneRenderer.RegisterSceneObject(x)
+                }
+            })
+
+            if (!info.name) MirabufCachingService.CacheInfo(info.cacheKey, type, assembly.info?.name ?? undefined)
+        } else {
+            console.error("Failed to spawn robot")
+        }
+    })
+}
+
+const ImportMirabufPanel: React.FC<PanelPropsImpl> = ({ panelId }) => {
+    const { showTooltip } = useTooltipControlContext()
+    const { closePanel } = usePanelControlContext()
+
+    const [cachedRobots, setCachedRobots] = useState(GetCacheInfo(MiraType.ROBOT))
+    const [cachedFields, setCachedFields] = useState(GetCacheInfo(MiraType.FIELD))
+
+    const [manifest, setManifest] = useState<MiraManifest | undefined>()
+    const [viewType, setViewType] = useState<MiraType>(MiraType.ROBOT)
+
+    const [filesStatus, setFilesStatus] = useState<TaskStatus>({ isDone: false, message: "Waiting on APS..." })
+    const [files, setFiles] = useState<Data[] | undefined>(undefined)
+
+    useEffect(() => {
+        const updateFilesStatus = (e: Event) => {
+            setFilesStatus((e as MirabufFilesStatusUpdateEvent).status)
+        }
+
+        const updateFiles = (e: Event) => {
+            setFiles((e as MirabufFilesUpdateEvent).data)
+        }
+
+        window.addEventListener(MirabufFilesStatusUpdateEvent.EVENT_KEY, updateFilesStatus)
+        window.addEventListener(MirabufFilesUpdateEvent.EVENT_KEY, updateFiles)
+
+        return () => {
+            window.removeEventListener(MirabufFilesStatusUpdateEvent.EVENT_KEY, updateFilesStatus)
+            window.removeEventListener(MirabufFilesUpdateEvent.EVENT_KEY, updateFiles)
+        }
+    })
+
+    useEffect(() => {
+        if (!HasMirabufFiles()) {
+            RequestMirabufFiles()
+        } else {
+            setFiles(GetMirabufFiles())
+        }
+    }, [])
+
+    // Get Default Mirabuf Data, Load into manifest.
+    useEffect(() => {
+        // To remove the prettier warning
+        const x = async () => {
+            fetch(`/api/mira/manifest.json`)
+                .then(x => x.json())
+                .then(x => {
+                    const map = MirabufCachingService.GetCacheMap(MiraType.ROBOT)
+                    const robots: MirabufRemoteInfo[] = []
+                    for (const src of x["robots"]) {
+                        if (typeof src == "string") {
+                            const str = `/api/mira/Robots/${src}`
+                            if (!map[str]) robots.push({ displayName: src, src: str })
+                        } else {
+                            if (!map[src["src"]]) robots.push({ displayName: src["displayName"], src: src["src"] })
+                        }
+                    }
+                    const fields: MirabufRemoteInfo[] = []
+                    for (const src of x["fields"]) {
+                        if (typeof src == "string") {
+                            const str = `/api/mira/Fields/${src}`
+                            if (!map[str]) fields.push({ displayName: src, src: str })
+                        } else {
+                            if (!map[src["src"]]) fields.push({ displayName: src["displayName"], src: src["src"] })
+                        }
+                    }
+                    setManifest({
+                        robots,
+                        fields,
+                    })
+                })
+        }
+        x()
+    }, [])
+
+    // Select a mirabuf assembly from the cache.
+    const selectCache = useCallback(
+        (info: MirabufCacheInfo, type: MiraType) => {
+            SpawnCachedMira(info, type)
+
+            showTooltip("controls", [
+                { control: "WASD", description: "Drive" },
+                { control: "E", description: "Intake" },
+                { control: "Q", description: "Dispense" },
+            ])
+
+            closePanel(panelId)
+        },
+        [showTooltip, closePanel, panelId]
+    )
+
+    // Cache a selected remote mirabuf assembly, load from cache.
+    const selectRemote = useCallback(
+        (info: MirabufRemoteInfo, type: MiraType) => {
+            MirabufCachingService.CacheRemote(info.src, type).then(cacheInfo => {
+                cacheInfo && SpawnCachedMira(cacheInfo, type)
+            })
+
+            closePanel(panelId)
+        },
+        [closePanel, panelId]
+    )
+
+    const selectAPS = useCallback(
+        (data: Data, type: MiraType) => {
+            MirabufCachingService.CacheAPS(data, type).then(cacheInfo => {
+                cacheInfo && SpawnCachedMira(cacheInfo, type)
+            })
+
+            closePanel(panelId)
+        },
+        [closePanel, panelId]
+    )
+
+    // Generate Item cards for cached robots.
+    const cachedRobotElements = useMemo(
+        () =>
+            cachedRobots.map(info =>
+                ItemCard({
+                    name: info.name || info.cacheKey || "Unnamed Robot",
+                    id: info.id,
+                    primaryButtonNode: AddIcon,
+                    primaryOnClick: () => {
+                        console.log(`Selecting cached robot: ${info.cacheKey}`)
+                        selectCache(info, MiraType.ROBOT)
+                    },
+                    secondaryButtonNode: DeleteIcon,
+                    secondaryOnClick: () => {
+                        console.log(`Deleting cache of: ${info.cacheKey}`)
+                        MirabufCachingService.Remove(info.cacheKey, info.id, MiraType.ROBOT)
+
+                        setCachedRobots(GetCacheInfo(MiraType.ROBOT))
+                    },
+                })
+            ),
+        [cachedRobots, selectCache, setCachedRobots]
+    )
+
+    // Generate Item cards for cached fields.
+    const cachedFieldElements = useMemo(
+        () =>
+            cachedFields.map(info =>
+                ItemCard({
+                    name: info.name || info.cacheKey || "Unnamed Field",
+                    id: info.id,
+                    primaryButtonNode: AddIcon,
+                    primaryOnClick: () => {
+                        console.log(`Selecting cached field: ${info.cacheKey}`)
+                        selectCache(info, MiraType.FIELD)
+                    },
+                    secondaryButtonNode: DeleteIcon,
+                    secondaryOnClick: () => {
+                        console.log(`Deleting cache of: ${info.cacheKey}`)
+                        MirabufCachingService.Remove(info.cacheKey, info.id, MiraType.FIELD)
+
+                        setCachedFields(GetCacheInfo(MiraType.FIELD))
+                    },
+                })
+            ),
+        [cachedFields, selectCache, setCachedFields]
+    )
+
+    // Generate Item cards for remote robots.
+    const remoteRobotElements = useMemo(() => {
+        const remoteRobots = manifest?.robots.filter(
+            path => !cachedRobots.some(info => info.cacheKey.includes(path.src))
+        )
+        return remoteRobots?.map(path =>
+            ItemCard({
+                name: path.displayName,
+                id: path.src,
+                primaryButtonNode: DownloadIcon,
+                primaryOnClick: () => {
+                    console.log(`Selecting remote: ${path}`)
+                    selectRemote(path, MiraType.ROBOT)
+                },
+            })
+        )
+    }, [manifest?.robots, cachedRobots, selectRemote])
+
+    // Generate Item cards for remote fields.
+    const remoteFieldElements = useMemo(() => {
+        const remoteFields = manifest?.fields.filter(
+            path => !cachedFields.some(info => info.cacheKey.includes(path.src))
+        )
+        return remoteFields?.map(path =>
+            ItemCard({
+                name: path.displayName,
+                id: path.src,
+                primaryButtonNode: DownloadIcon,
+                primaryOnClick: () => {
+                    console.log(`Selecting remote: ${path}`)
+                    selectRemote(path, MiraType.FIELD)
+                },
+            })
+        )
+    }, [manifest?.fields, cachedFields, selectRemote])
+
+    // Generate Item cards for APS robots and fields.
+    const hubElements = useMemo(
+        () =>
+            files?.map(file =>
+                ItemCard({
+                    name: file.attributes.displayName!,
+                    id: file.id,
+                    primaryButtonNode: DownloadIcon,
+                    primaryOnClick: () => {
+                        console.debug(file.raw)
+                        selectAPS(file, viewType)
+                    },
+                })
+            ),
+        [files, selectAPS, viewType]
+    )
+
+    return (
+        <Panel
+            name={"Select Mirabuf"}
+            icon={AddIcon}
+            panelId={panelId}
+            acceptEnabled={false}
+            cancelName="Back"
+            openLocation="right"
+        >
+            <div className="flex flex-col gap-2 bg-background-secondary rounded-md p-2">
+                <ToggleButtonGroup
+                    value={viewType}
+                    exclusive
+                    onChange={(_, v) => v != null && setViewType(v)}
+                    sx={{
+                        alignSelf: "center",
+                    }}
+                >
+                    <ToggleButton value={MiraType.ROBOT}>Robots</ToggleButton>
+                    <ToggleButton value={MiraType.FIELD}>Fields</ToggleButton>
+                </ToggleButtonGroup>
+                {viewType == MiraType.ROBOT ? (
+                    <>
+                        <LabelStyled size={LabelSize.Medium} className="text-center mt-[4pt] mb-[2pt] mx-[5%]">
+                            {cachedRobotElements
+                                ? `${cachedRobotElements.length} Saved Robot${cachedRobotElements.length == 1 ? "" : "s"}`
+                                : "Loading Saved Robots"}
+                        </LabelStyled>
+                        <DividerStyled />
+                        {cachedRobotElements}
+                    </>
+                ) : (
+                    <>
+                        <LabelStyled size={LabelSize.Medium} className="text-center mt-[4pt] mb-[2pt] mx-[5%]">
+                            {cachedFieldElements
+                                ? `${cachedFieldElements.length} Saved Field${cachedFieldElements.length == 1 ? "" : "s"}`
+                                : "Loading Saved Fields"}
+                        </LabelStyled>
+                        <DividerStyled />
+                        {cachedFieldElements}
+                    </>
+                )}
+                <Box
+                    component={"div"}
+                    display={"flex"}
+                    key={`remote-label-container`}
+                    flexDirection={"row"}
+                    gap={"0.25rem"}
+                    justifyContent={"center"}
+                    alignItems={"center"}
+                >
+                    <LabelStyled size={LabelSize.Medium} className="text-center mt-[4pt] mb-[2pt] mx-[5%]">
+                        {hubElements
+                            ? `${hubElements.length} Remote Asset${hubElements.length == 1 ? "" : "s"}`
+                            : filesStatus.message}
+                    </LabelStyled>
+                    {hubElements && filesStatus.isDone ? (
+                        <ButtonIcon value={RefreshIcon} onClick={() => RequestMirabufFiles()} />
+                    ) : (
+                        <></>
+                    )}
+                </Box>
+                <DividerStyled />
+                {hubElements}
+                {viewType == MiraType.ROBOT ? (
+                    <>
+                        <LabelStyled size={LabelSize.Medium} className="text-center mt-[4pt] mb-[2pt] mx-[5%]">
+                            {remoteRobotElements
+                                ? `${remoteRobotElements.length} Default Robot${remoteRobotElements.length == 1 ? "" : "s"}`
+                                : "Loading Default Robots"}
+                        </LabelStyled>
+                        <DividerStyled />
+                        {remoteRobotElements}
+                    </>
+                ) : (
+                    <>
+                        <LabelStyled size={LabelSize.Medium} className="text-center mt-[4pt] mb-[2pt] mx-[5%]">
+                            {remoteFieldElements
+                                ? `${remoteFieldElements.length} Default Field${remoteFieldElements.length == 1 ? "" : "s"}`
+                                : "Loading Default Fields"}
+                        </LabelStyled>
+                        <DividerStyled />
+                        {remoteFieldElements}
+                    </>
+                )}
+            </div>
+        </Panel>
+    )
+}
+
+export default ImportMirabufPanel
diff --git a/fission/src/util/TaskStatus.ts b/fission/src/util/TaskStatus.ts
new file mode 100644
index 0000000000..c0a3e12364
--- /dev/null
+++ b/fission/src/util/TaskStatus.ts
@@ -0,0 +1,6 @@
+interface TaskStatus {
+    isDone: boolean
+    message: string
+}
+
+export default TaskStatus
diff --git a/fission/src/vite-env.d.ts b/fission/src/vite-env.d.ts
index d812284398..11f02fe2a0 100644
--- a/fission/src/vite-env.d.ts
+++ b/fission/src/vite-env.d.ts
@@ -1,10 +1 @@
 /// <reference types="vite/client" />
-
-interface ImportMetaEnv {
-    readonly VITE_SYNTHESIS_SERVER_PATH: string
-    // more env variables...
-}
-
-interface ImportMeta {
-    readonly env: ImportMetaEnv
-}
diff --git a/fission/vite.config.ts b/fission/vite.config.ts
index ee38e0393c..1f052ab08a 100644
--- a/fission/vite.config.ts
+++ b/fission/vite.config.ts
@@ -7,6 +7,8 @@ const basePath = '/fission/'
 const serverPort = 3000
 const dockerServerPort = 80
 
+const useLocal = false
+
 // https://vitejs.dev/config/
 export default defineConfig({
     plugins: [react(), /* viteSingleFile() */ glsl({
@@ -46,7 +48,7 @@ export default defineConfig({
         // this sets a default port to 3000
         port: serverPort,
         cors: false,
-        proxy: {
+        proxy: useLocal ? {
             '/api/mira': {
                 target: `http://localhost:${serverPort}${basePath}`,
                 changeOrigin: true,
@@ -58,6 +60,12 @@ export default defineConfig({
                 changeOrigin: true,
                 secure: false,
             },
+        } : {
+            '/api': {
+                target: `https://synthesis.autodesk.com/`,
+                changeOrigin: true,
+                secure: true,
+            },
         },
     },
     build: {