diff --git a/examples/src/AgentMetadata.tsx b/examples/src/Components/AgentMetadata.tsx
similarity index 77%
rename from examples/src/AgentMetadata.tsx
rename to examples/src/Components/AgentMetadata.tsx
index bfc15bf3..dc5a9043 100644
--- a/examples/src/AgentMetadata.tsx
+++ b/examples/src/Components/AgentMetadata.tsx
@@ -1,18 +1,17 @@
 import React from "react";
-import { AgentData } from "../../type-declarations/simularium/types";
+import { AgentData } from "../../../type-declarations/simularium/types";
 
 interface AgentMetadataProps {
     agentData: AgentData;
 }
 
 const AgentMetadata = ({ agentData }: AgentMetadataProps): JSX.Element => {
-
-    const getContents = () => {
         if (agentData.instanceId === -1) {
-            return <div>No agent selected</div>;
+            return <div className="ui-container">No agent selected</div>;
         }
         return (
-            <div>
+            <div className="ui-container">
+                <div>Agent metadata</div>
                 <div> uniqueID: {agentData.instanceId}</div>
                 <div> agentType: {agentData.type}</div>
                 <div>
@@ -28,7 +27,4 @@ const AgentMetadata = ({ agentData }: AgentMetadataProps): JSX.Element => {
         );
     };
 
-    return <div>Agent Metadata: {getContents()}</div>;
-};
-
 export default AgentMetadata;
diff --git a/examples/src/ColorPicker.tsx b/examples/src/Components/ColorPicker.tsx
similarity index 98%
rename from examples/src/ColorPicker.tsx
rename to examples/src/Components/ColorPicker.tsx
index 8db0aa33..26e0d35d 100644
--- a/examples/src/ColorPicker.tsx
+++ b/examples/src/Components/ColorPicker.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { UIDisplayData } from "../../src";
+import { UIDisplayData } from "../../../src";
 
 type ColorPickerProps = {
     uiDisplayData: UIDisplayData;
@@ -90,7 +90,7 @@ const ColorPicker = ({
     };
 
     return (
-        <>
+        <div className="ui-container">
             <span>Color change agent selections:</span>
             <select id="agentSelect" onChange={handleAgentSelection}>
                 <option value=""> Select Agent</option>
@@ -139,7 +139,7 @@ const ColorPicker = ({
             <button onClick={() => addColorToColorArray(colorToAppend)}>
                 Add color to color array
             </button>
-        </>
+        </div>
     );
 };
 
diff --git a/examples/src/ConversionForm/BaseInput.tsx b/examples/src/Components/ConversionForm/BaseInput.tsx
similarity index 100%
rename from examples/src/ConversionForm/BaseInput.tsx
rename to examples/src/Components/ConversionForm/BaseInput.tsx
diff --git a/examples/src/ConversionForm/CollectionInput.tsx b/examples/src/Components/ConversionForm/CollectionInput.tsx
similarity index 100%
rename from examples/src/ConversionForm/CollectionInput.tsx
rename to examples/src/Components/ConversionForm/CollectionInput.tsx
diff --git a/examples/src/ConversionForm/InputSwitch.tsx b/examples/src/Components/ConversionForm/InputSwitch.tsx
similarity index 100%
rename from examples/src/ConversionForm/InputSwitch.tsx
rename to examples/src/Components/ConversionForm/InputSwitch.tsx
diff --git a/examples/src/ConversionForm/index.tsx b/examples/src/Components/ConversionForm/index.tsx
similarity index 100%
rename from examples/src/ConversionForm/index.tsx
rename to examples/src/Components/ConversionForm/index.tsx
diff --git a/examples/src/RecordMovieComponent.tsx b/examples/src/Components/RecordMovieComponent.tsx
similarity index 83%
rename from examples/src/RecordMovieComponent.tsx
rename to examples/src/Components/RecordMovieComponent.tsx
index 48499818..5d95987e 100644
--- a/examples/src/RecordMovieComponent.tsx
+++ b/examples/src/Components/RecordMovieComponent.tsx
@@ -3,11 +3,15 @@ import React, { useState, useEffect } from "react";
 interface RecordMovieComponentProps {
     startRecordingHandler: () => void;
     stopRecordingHandler: () => void;
+    setRecordingEnabled: () => void;
+    isRecordingEnabled: boolean;
 }
 
 const RecordMovieComponent = ({
     startRecordingHandler,
     stopRecordingHandler,
+    setRecordingEnabled,
+    isRecordingEnabled,
 }: RecordMovieComponentProps): JSX.Element => {
     // recording time measured in seconds
     const [isRecording, setIsRecording] = useState<boolean>(false);
@@ -43,10 +47,15 @@ const RecordMovieComponent = ({
     };
 
     return (
-        <div>
+        <div className="ui-container">
+            <button onClick={() => setRecordingEnabled()}>
+                {isRecordingEnabled ? "Disable" : "Enable"} Recording
+            </button>
             <button
                 onClick={startRecording}
-                disabled={isRecording || !browserSupported}
+                disabled={
+                    isRecording || !browserSupported || !isRecordingEnabled
+                }
             >
                 Start Recording
             </button>
diff --git a/examples/src/Viewer.tsx b/examples/src/Viewer.tsx
index 3f10b358..f5fa2fb4 100644
--- a/examples/src/Viewer.tsx
+++ b/examples/src/Viewer.tsx
@@ -1,23 +1,7 @@
 import React from "react";
-import { isEqual, findIndex, map, reduce } from "lodash";
+import { isEqual, findIndex, reduce } from "lodash";
 import { v4 as uuidv4 } from "uuid";
-
-import type {
-    ISimulariumFile,
-    UIDisplayData,
-    SelectionStateInfo,
-    SelectionEntry,
-} from "../../type-declarations";
-import { nullAgent, TrajectoryType } from "../../src/constants";
-import SimulariumViewer, {
-    SimulariumController,
-    RenderStyle,
-    loadSimulariumFile,
-    FrontEndError,
-    ErrorLevel,
-    NetConnectionParams,
-    TrajectoryFileInfo,
-} from "../../src/index";
+import { InputParams } from "tweakpane";
 
 /**
  * NOTE: if you are debugging an import/build issue
@@ -32,7 +16,23 @@ import SimulariumViewer, {
 //     FrontEndError,
 //     ErrorLevel,
 // } from "../es";
-import "../../style/style.css";
+import SimulariumViewer, {
+    SimulariumController,
+    RenderStyle,
+    loadSimulariumFile,
+    FrontEndError,
+    ErrorLevel,
+    NetConnectionParams,
+    TrajectoryFileInfo,
+} from "../../src/index";
+import { nullAgent, TrajectoryType } from "../../src/constants";
+
+import type {
+    ISimulariumFile,
+    UIDisplayData,
+    SelectionStateInfo,
+    SelectionEntry,
+} from "../../type-declarations";
 import { AgentData } from "../../type-declarations/simularium/types";
 import PointSimulator from "./simulators/PointSimulator";
 import BindingSimulator from "./simulators/BindingSimulator2D";
@@ -41,8 +41,15 @@ import PdbSimulator from "./simulators/PdbSimulator";
 import SinglePdbSimulator from "./simulators/SinglePdbSimulator";
 import CurveSimulator from "./simulators/CurveSimulator";
 import SingleCurveSimulator from "./simulators/SingleCurveSimulator";
-import ColorPicker from "./ColorPicker";
-import RecordMovieComponent from "./RecordMovieComponent";
+import MetaballSimulator from "./simulators/MetaballSimulator";
+
+import ColorPicker from "./Components/ColorPicker";
+import RecordMovieComponent from "./Components/RecordMovieComponent";
+import ConversionForm from "./Components/ConversionForm";
+import AgentMetadata from "./Components/AgentMetadata";
+
+import { agentColors } from "./constants";
+import { BaseType, CustomType } from "./types";
 import {
     SMOLDYN_TEMPLATE,
     UI_BASE_TYPES,
@@ -50,9 +57,9 @@ import {
     UI_TEMPLATE_DOWNLOAD_URL_ROOT,
     UI_TEMPLATE_URL_ROOT,
 } from "./api-settings";
-import ConversionForm from "./ConversionForm";
-import MetaballSimulator from "./simulators/MetaballSimulator";
-import AgentMetadata from "./AgentMetadata";
+
+import "../../style/style.css";
+import "./style.css";
 
 let playbackFile = "TEST_LIVEMODE_API";
 let queryStringFile = "";
@@ -62,26 +69,6 @@ if (urlParams.has("file")) {
     playbackFile = queryStringFile;
 }
 
-const agentColors = [
-    "#fee34d",
-    "#f7b232",
-    "#bf5736",
-    "#94a7fc",
-    "#ce8ec9",
-    "#58606c",
-    "#0ba345",
-    "#9267cb",
-    "#81dbe6",
-    "#bd7800",
-    "#bbbb99",
-    "#5b79f0",
-    "#89a500",
-    "#da8692",
-    "#418463",
-    "#9f516c",
-    "#00aabf",
-];
-
 interface ViewerState {
     renderStyle: RenderStyle;
     particleTypeNames: string[];
@@ -113,34 +100,6 @@ interface ViewerState {
     followObjectData: AgentData;
 }
 
-interface BaseType {
-    isBaseType: true;
-    id: string;
-    data: string;
-    match: string;
-}
-
-export interface CustomParameters {
-    name: string;
-    data_type: string;
-    description: string;
-    required: boolean;
-    help: string;
-    options?: string[];
-}
-
-interface CustomType {
-    [key: string]: {
-        "python::module": string;
-        "python::object": string;
-        parameters: CustomParameters;
-    };
-}
-
-interface InputParams {
-    localBackendServer: boolean;
-}
-
 const simulariumController = new SimulariumController({});
 
 let currentFrame = 0;
@@ -386,16 +345,21 @@ class Viewer extends React.Component<InputParams, ViewerState> {
     public convertFile(obj: Record<string, any>, fileType: TrajectoryType) {
         const fileName = uuidv4() + ".simularium";
         simulariumController
-            .convertTrajectory(this.netConnectionSettings, obj, fileType, fileName)
+            .convertTrajectory(
+                this.netConnectionSettings,
+                obj,
+                fileType,
+                fileName
+            )
             .then(() => {
                 this.clearPendingFile();
             })
             .then(() => {
                 simulariumController.changeFile(
-                    { netConnectionSettings: this.netConnectionSettings, },
+                    { netConnectionSettings: this.netConnectionSettings },
                     fileName,
-                    true,
-                )
+                    true
+                );
             })
             .catch((err) => {
                 console.error(err);
@@ -410,7 +374,7 @@ class Viewer extends React.Component<InputParams, ViewerState> {
         const simulariumFile = fileName.includes(".simularium")
             ? trajectoryFile
             : null;
-        this.setState({ initialPlay: true})
+        this.setState({ initialPlay: true });
         return simulariumController
             .handleFileChange(simulariumFile, fileName, geoAssets)
             .catch(console.log);
@@ -507,13 +471,18 @@ class Viewer extends React.Component<InputParams, ViewerState> {
             []
         );
         const uniqueTags: string[] = [...new Set(allTags)];
-        if (isEqual(uiDisplayData, this.state.selectionStateInfo.appliedColors)) {
+        if (
+            isEqual(uiDisplayData, this.state.selectionStateInfo.appliedColors)
+        ) {
             return;
         }
         this.setState({
             particleTypeNames: uiDisplayData.map((a) => a.name),
             particleTypeTags: uniqueTags,
-            selectionStateInfo: {...initialState.selectionStateInfo, appliedColors: uiDisplayData},
+            selectionStateInfo: {
+                ...initialState.selectionStateInfo,
+                appliedColors: uiDisplayData,
+            },
         });
     }
 
@@ -978,24 +947,16 @@ class Viewer extends React.Component<InputParams, ViewerState> {
                     updateAgentColorArray={this.updateAgentColorArray}
                     setColorSelectionInfo={this.setColorSelectionInfo}
                 />
-                <button
-                    onClick={() =>
-                        this.setRecordingEnabled(!this.state.isRecordingEnabled)
-                    }
-                >
-                    {this.state.isRecordingEnabled ? "Disable" : "Enable"}{" "}
-                    Recording
-                </button>
-                {this.state.isRecordingEnabled && (
-                    <RecordMovieComponent
-                        startRecordingHandler={
-                            simulariumController.startRecording
-                        }
-                        stopRecordingHandler={
-                            simulariumController.stopRecording
-                        }
-                    />
-                )}
+                <RecordMovieComponent
+                    startRecordingHandler={simulariumController.startRecording}
+                    stopRecordingHandler={simulariumController.stopRecording}
+                    setRecordingEnabled={() => {
+                        this.setRecordingEnabled(
+                            !this.state.isRecordingEnabled
+                        );
+                    }}
+                    isRecordingEnabled={this.state.isRecordingEnabled}
+                />
                 <AgentMetadata agentData={this.state.followObjectData} />
                 <div className="viewer-container">
                     <SimulariumViewer
diff --git a/examples/src/constants.ts b/examples/src/constants.ts
new file mode 100644
index 00000000..4d705558
--- /dev/null
+++ b/examples/src/constants.ts
@@ -0,0 +1,19 @@
+export const agentColors: string[] = [
+    "#fee34d",
+    "#f7b232",
+    "#bf5736",
+    "#94a7fc",
+    "#ce8ec9",
+    "#58606c",
+    "#0ba345",
+    "#9267cb",
+    "#81dbe6",
+    "#bd7800",
+    "#bbbb99",
+    "#5b79f0",
+    "#89a500",
+    "#da8692",
+    "#418463",
+    "#9f516c",
+    "#00aabf",
+];
diff --git a/examples/src/style.css b/examples/src/style.css
new file mode 100644
index 00000000..33d54b73
--- /dev/null
+++ b/examples/src/style.css
@@ -0,0 +1,6 @@
+.ui-container {
+    border: 1px solid black;
+    padding: 6px;
+    border-radius: 6px;
+    width: fit-content;
+}
\ No newline at end of file
diff --git a/examples/src/types.ts b/examples/src/types.ts
new file mode 100644
index 00000000..678e1125
--- /dev/null
+++ b/examples/src/types.ts
@@ -0,0 +1,28 @@
+export interface CustomParameters {
+    name: string;
+    data_type: string;
+    description: string;
+    required: boolean;
+    help: string;
+    options?: string[];
+}
+
+export interface BaseType {
+    isBaseType: true;
+    id: string;
+    data: string;
+    match: string;
+}
+
+export interface CustomType {
+    [key: string]: {
+        "python::module": string;
+        "python::object": string;
+        parameters: CustomParameters;
+    };
+}
+
+export interface InputParams {
+    localBackendServer: boolean;
+    useOctopus: boolean;
+}