diff --git a/README.md b/README.md
index 7534d0384..b12b4a9f0 100644
--- a/README.md
+++ b/README.md
@@ -41,7 +41,7 @@
 You can view your application's file structure and click on a snapshot to view
 your app's state. State can be visualized in a Component Graph, JSON Tree, or
 Performance Graph. Snapshot history can be visualized in the History tab.
-The Web Metrics tab provides some useful metrics for site performance. The accessibility tab 
+The Web Metrics tab provides some useful metrics for site performance. The accessibility tab
 visualizes an app's accessibility tree per state change.
 Snapshots can be compared with the previous snapshot, which can be viewed in Diff mode.
 <br>
@@ -89,7 +89,7 @@ Download the recorded snapshots as a JSON file and upload them to access state t
 </p>
 <br>
 
-### 🔹 Reconnect and Status
+### 🔹 and Status
 
 If Reactime loses its connection to the tab you're monitoring, simply click the "reconnect" button to resume your work. You'll notice a circle located to the right of the button, which will appear as either red (indicating disconnection) or green (signifying a successful reconnection).
 <br>
diff --git a/demo-app-next/next-env.d.ts b/demo-app-next/next-env.d.ts
index 4f11a03dc..a4a7b3f5c 100644
--- a/demo-app-next/next-env.d.ts
+++ b/demo-app-next/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
diff --git a/demo-app-next/tsconfig.json b/demo-app-next/tsconfig.json
index 093985aaf..1203d7cb2 100644
--- a/demo-app-next/tsconfig.json
+++ b/demo-app-next/tsconfig.json
@@ -1,6 +1,10 @@
 {
   "compilerOptions": {
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": false,
@@ -12,8 +16,15 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "target": "ES2017"
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }
diff --git a/demo-app/package.json b/demo-app/package.json
index 17ed638c0..4003e82fa 100644
--- a/demo-app/package.json
+++ b/demo-app/package.json
@@ -9,6 +9,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.16.7",
+    "@babel/plugin-transform-runtime": "^7.25.9",
     "@babel/preset-env": "^7.16.7",
     "@babel/preset-react": "^7.16.7",
     "@types/express": "^4.17.13",
@@ -17,6 +18,7 @@
     "@types/react-dom": "^17.0.19",
     "babel-loader": "^8.2.3",
     "copy-webpack-plugin": "^10.2.0",
+    "core-js": "^3.39.0",
     "css-loader": "^6.5.1",
     "html-webpack-plugin": "^5.5.0",
     "node": "^16.0.0",
diff --git a/demo-app/src/client/Components/Buttons.tsx b/demo-app/src/client/Components/Buttons.tsx
index b27abfe24..60235aa92 100644
--- a/demo-app/src/client/Components/Buttons.tsx
+++ b/demo-app/src/client/Components/Buttons.tsx
@@ -1,22 +1,82 @@
-import React from 'react';
-import Increment from './Increment';
+import React, { Component, useState } from 'react';
 
-function Buttons(): JSX.Element {
-  const buttons = [];
-  for (let i = 0; i < 4; i++) {
-    buttons.push(<Increment key={i} />);
+type ButtonProps = {
+  id: string;
+  label: string;
+  color?: string;
+  initialCount?: number;
+};
+
+type IncrementClassState = {
+  count: number;
+};
+
+class IncrementClass extends Component<ButtonProps, IncrementClassState> {
+  state = {
+    count: this.props.initialCount || 0,
+  };
+
+  handleClick = (): void => {
+    this.setState((prevState: IncrementClassState) => ({
+      count: prevState.count + 1,
+    }));
+  };
+
+  render(): JSX.Element {
+    return (
+      <div>
+        <button
+          id={this.props.id}
+          className='increment'
+          onClick={this.handleClick}
+          style={{ backgroundColor: this.props.color }}
+        >
+          {this.props.label} {this.state.count} times.
+        </button>
+      </div>
+    );
   }
+}
+
+const IncrementFunction = (props: ButtonProps): JSX.Element => {
+  const [count, setCount] = useState(props.initialCount || 0);
+
+  const handleClick = (): void => {
+    setCount((prev) => prev + 1);
+  };
 
   return (
-    <div className='buttons'>
-      <h1>Stateful Buttons</h1>
-      <h4>
-        These buttons are functional components that each manage their own state with the useState
-        hook.
-      </h4>
-      {buttons}
+    <div>
+      <button
+        id={props.id}
+        className='increment'
+        onClick={handleClick}
+        style={{ backgroundColor: props.color }}
+      >
+        {props.label} {count} times.
+      </button>
     </div>
   );
+};
+
+class Buttons extends Component {
+  render(): JSX.Element {
+    return (
+      <div className='buttons'>
+        <h1>Mixed State Counter</h1>
+        <h4>First two buttons use class components, last two use function components.</h4>
+        <IncrementClass id='class1' label='Class Button 1:' color='#f00008' initialCount={5} />
+        <IncrementClass id='class2' label='Class Button 2:' color='#62d6fb' />
+        <IncrementFunction
+          id='func1'
+          label='Function Button 1:'
+          color='#6288fb'
+          initialCount={10}
+        />
+        <IncrementFunction id='func2' label='Function Button 2:' color='#ff6569' />
+      </div>
+    );
+  }
 }
 
 export default Buttons;
diff --git a/demo-app/src/client/Components/FunctionalReducerCounter.tsx b/demo-app/src/client/Components/FunctionalReducerCounter.tsx
new file mode 100644
index 000000000..85effd454
--- /dev/null
+++ b/demo-app/src/client/Components/FunctionalReducerCounter.tsx
@@ -0,0 +1,231 @@
+import React, { useState, useReducer } from 'react';
+
+type CounterProps = {
+  initialCount?: number;
+  step?: number;
+  title?: string;
+  theme?: {
+    backgroundColor?: string;
+    textColor?: string;
+  };
+};
+
+type CounterState = {
+  count: number;
+  history: number[];
+  lastAction: string;
+};
+
+type CounterAction =
+  | { type: 'INCREMENT' }
+  | { type: 'DECREMENT' }
+  | { type: 'DOUBLE' }
+  | { type: 'RESET' }
+  | { type: 'ADD'; payload: number }
+  | { type: 'SET_STATE'; payload: CounterState };
+
+type SecondaryCounterState = {
+  count: number;
+  multiplier: number;
+  lastOperation: string;
+  history: number[];
+};
+
+type SecondaryCounterAction =
+  | { type: 'MULTIPLY' }
+  | { type: 'DIVIDE' }
+  | { type: 'SET_MULTIPLIER'; payload: number }
+  | { type: 'RESET' }
+  | { type: 'SET_STATE'; payload: SecondaryCounterState };
+
+function counterReducer(state: CounterState, action: CounterAction, step: number): CounterState {
+  switch (action.type) {
+    case 'INCREMENT':
+      return {
+        ...state,
+        count: state.count + step,
+        history: [...state.history, state.count + step],
+        lastAction: 'INCREMENT',
+      };
+    case 'DECREMENT':
+      return {
+        ...state,
+        count: state.count - step,
+        history: [...state.history, state.count - step],
+        lastAction: 'DECREMENT',
+      };
+    case 'DOUBLE':
+      return {
+        ...state,
+        count: state.count * 2,
+        history: [...state.history, state.count * 2],
+        lastAction: 'DOUBLE',
+      };
+    case 'RESET':
+      return {
+        count: 0,
+        history: [],
+        lastAction: 'RESET',
+      };
+    case 'ADD':
+      return {
+        ...state,
+        count: state.count + action.payload,
+        history: [...state.history, state.count + action.payload],
+        lastAction: `ADD ${action.payload}`,
+      };
+    case 'SET_STATE':
+      return {
+        ...action.payload,
+        lastAction: 'SET_STATE',
+      };
+    default:
+      return state;
+  }
+}
+
+function secondaryCounterReducer(
+  state: SecondaryCounterState,
+  action: SecondaryCounterAction,
+): SecondaryCounterState {
+  switch (action.type) {
+    case 'MULTIPLY':
+      return {
+        ...state,
+        count: state.count * state.multiplier,
+        history: [...state.history, state.count * state.multiplier],
+        lastOperation: `Multiplied by ${state.multiplier}`,
+      };
+    case 'DIVIDE':
+      return {
+        ...state,
+        count: state.count / state.multiplier,
+        history: [...state.history, state.count / state.multiplier],
+        lastOperation: `Divided by ${state.multiplier}`,
+      };
+    case 'SET_MULTIPLIER':
+      return {
+        ...state,
+        multiplier: action.payload,
+        history: [...state.history],
+        lastOperation: `Set multiplier to ${action.payload}`,
+      };
+    case 'RESET':
+      return {
+        count: 0,
+        multiplier: 2,
+        history: [],
+        lastOperation: 'Reset',
+      };
+    case 'SET_STATE':
+      return {
+        ...action.payload,
+        lastOperation: 'SET_STATE',
+      };
+    default:
+      return state;
+  }
+}
+
+function FunctionalReducerCounter({
+  initialCount = 0,
+  step = 1,
+  title = 'Function-based Reducer Counter',
+  theme = {
+    backgroundColor: '#ffffff',
+    textColor: '#330002',
+  },
+}: CounterProps): JSX.Element {
+  const [clickCount, setClickCount] = useState(0);
+  const [lastClickTime, setLastClickTime] = useState<Date | null>(null);
+  const [averageTimeBetweenClicks, setAverageTimeBetweenClicks] = useState<number>(0);
+
+  const [state, dispatch] = useReducer(
+    (state: CounterState, action: CounterAction) => counterReducer(state, action, step),
+    {
+      count: initialCount,
+      history: [],
+      lastAction: 'none',
+    },
+  );
+
+  const [secondaryState, secondaryDispatch] = useReducer(secondaryCounterReducer, {
+    count: initialCount,
+    multiplier: 2,
+    history: [],
+    lastOperation: 'none',
+  });
+
+  return (
+    <div
+      className='reducer-counter'
+      style={{
+        backgroundColor: theme.backgroundColor,
+        color: theme.textColor,
+      }}
+    >
+      <h2>{title}</h2>
+
+      <div className='counter-value'>
+        <h3>Primary Counter: {state.count}</h3>
+      </div>
+
+      <div className='counter-buttons'>
+        <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment (+{step})</button>
+        <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement (-{step})</button>
+        <button onClick={() => dispatch({ type: 'DOUBLE' })}>Double Value</button>
+        <button onClick={() => dispatch({ type: 'ADD', payload: 5 })}>Add 5</button>
+        <button onClick={() => dispatch({ type: 'RESET' })}>Reset</button>
+      </div>
+
+      <div className='counter-info'>
+        <h4>History:</h4>
+        <div className='history-list'>
+          {state.history.map((value, index) => (
+            <span key={index}>
+              {value}
+              {index < state.history.length - 1 ? ' → ' : ''}
+            </span>
+          ))}
+        </div>
+      </div>
+
+      <div
+        className='secondary-counter'
+        style={{ marginTop: '2rem', borderTop: '1px solid #ccc', paddingTop: '1rem' }}
+      >
+        <h3>Secondary Counter: {secondaryState.count}</h3>
+        <div className='counter-buttons'>
+          <button onClick={() => secondaryDispatch({ type: 'MULTIPLY' })}>
+            Multiply by {secondaryState.multiplier}
+          </button>
+          <button onClick={() => secondaryDispatch({ type: 'DIVIDE' })}>
+            Divide by {secondaryState.multiplier}
+          </button>
+          <button
+            onClick={() =>
+              secondaryDispatch({ type: 'SET_MULTIPLIER', payload: secondaryState.multiplier + 1 })
+            }
+          >
+            Increase Multiplier
+          </button>
+          <button onClick={() => secondaryDispatch({ type: 'RESET' })}>Reset</button>
+        </div>
+        <div className='counter-info'>
+          <h4>Current Multiplier: {secondaryState.multiplier}</h4>
+          <h4>History:</h4>
+          <div className='history-list'>
+            {secondaryState.history.map((value, index) => (
+              <span key={index}>
+                {value}
+                {index < secondaryState.history.length - 1 ? ' → ' : ''}
+              </span>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default FunctionalReducerCounter;
diff --git a/demo-app/src/client/Components/FunctionalStateCounter.tsx b/demo-app/src/client/Components/FunctionalStateCounter.tsx
new file mode 100644
index 000000000..a49916177
--- /dev/null
+++ b/demo-app/src/client/Components/FunctionalStateCounter.tsx
@@ -0,0 +1,97 @@
+import React, { useState } from 'react';
+
+type CounterProps = {
+  initialCount?: number;
+  step?: number;
+  title?: string;
+  theme?: {
+    backgroundColor?: string;
+    textColor?: string;
+  };
+};
+
+function FunctionalStateCounter({
+  initialCount = 0,
+  step = 1,
+  title = 'Function-based State Counter',
+  theme = {
+    backgroundColor: '#ffffff',
+    textColor: '#330002',
+  },
+}: CounterProps): JSX.Element {
+  const [count, setCount] = useState(initialCount);
+  const [history, setHistory] = useState<number[]>([]);
+  const [lastAction, setLastAction] = useState('none');
+
+  const handleAction = (type: string, payload?: number) => {
+    let newCount = count;
+    switch (type) {
+      case 'INCREMENT':
+        newCount = count + step;
+        setCount(newCount);
+        setHistory([...history, newCount]);
+        setLastAction('INCREMENT');
+        break;
+      case 'DECREMENT':
+        newCount = count - step;
+        setCount(newCount);
+        setHistory([...history, newCount]);
+        setLastAction('DECREMENT');
+        break;
+      case 'DOUBLE':
+        newCount = count * 2;
+        setCount(newCount);
+        setHistory([...history, newCount]);
+        setLastAction('DOUBLE');
+        break;
+      case 'ADD':
+        newCount = count + (payload || 0);
+        setCount(newCount);
+        setHistory([...history, newCount]);
+        setLastAction(`ADD ${payload}`);
+        break;
+      case 'RESET':
+        setCount(0);
+        setHistory([]);
+        setLastAction('RESET');
+        break;
+    }
+  };
+
+  return (
+    <div
+      className='reducer-counter'
+      style={{
+        backgroundColor: theme.backgroundColor,
+        color: theme.textColor,
+      }}
+    >
+      <h2>{title}</h2>
+      <div className='counter-value'>
+        <h3>Current Count: {count}</h3>
+      </div>
+
+      <div className='counter-buttons'>
+        <button onClick={() => handleAction('INCREMENT')}>Increment (+{step})</button>
+        <button onClick={() => handleAction('DECREMENT')}>Decrement (-{step})</button>
+        <button onClick={() => handleAction('DOUBLE')}>Double Value</button>
+        <button onClick={() => handleAction('ADD', 5)}>Add 5</button>
+        <button onClick={() => handleAction('RESET')}>Reset</button>
+      </div>
+
+      <div className='counter-info'>
+        <h4>History:</h4>
+        <div className='history-list'>
+          {history.map((value, index) => (
+            <span key={index}>
+              {value}
+              {index < history.length - 1 ? ' → ' : ''}
+            </span>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default FunctionalStateCounter;
diff --git a/demo-app/src/client/Components/Home.tsx b/demo-app/src/client/Components/Home.tsx
index cafff52ef..22f2d1f4d 100644
--- a/demo-app/src/client/Components/Home.tsx
+++ b/demo-app/src/client/Components/Home.tsx
@@ -1,22 +1,74 @@
 import React from 'react';
+import { useTheme } from '../../contexts/ThemeContext';
+import { useAuth } from '../../contexts/AuthContext';
 
 function Home(): JSX.Element {
+  const { theme } = useTheme();
+  const { user, login, logout } = useAuth();
+
   return (
-    <div className='about'>
+    <div
+      className='about'
+      style={{
+        backgroundColor: theme.backgroundColor,
+        color: theme.textColor,
+      }}
+    >
       <h2>REACTIME - DEMO APP</h2>
+
+      {user ? (
+        <div>
+          <p>Welcome, {user.username}!</p>
+          <button
+            onClick={logout}
+            style={{
+              backgroundColor: theme.primaryColor,
+              color: theme.backgroundColor,
+              padding: '8px 16px',
+              border: 'none',
+              borderRadius: '4px',
+              cursor: 'pointer',
+            }}
+          >
+            Logout
+          </button>
+        </div>
+      ) : (
+        <div>
+          <p>Please log in:</p>
+          <button
+            onClick={() => login('testUser')}
+            style={{
+              backgroundColor: theme.primaryColor,
+              color: theme.backgroundColor,
+              padding: '8px 16px',
+              border: 'none',
+              borderRadius: '4px',
+              cursor: 'pointer',
+            }}
+          >
+            Login as Test User
+          </button>
+          <button
+            onClick={() => login('admin')}
+            style={{
+              backgroundColor: theme.secondaryColor,
+              color: theme.backgroundColor,
+              padding: '8px 16px',
+              border: 'none',
+              borderRadius: '4px',
+              marginLeft: '8px',
+              cursor: 'pointer',
+            }}
+          >
+            Login as Admin
+          </button>
+        </div>
+      )}
+
       <p>
         "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
-        ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
-        laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
-        voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
-        cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
-      </p>
-      <p>
-        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
-        ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
-        laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
-        voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
-        cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+        ut labore et dolore magna aliqua..."
       </p>
     </div>
   );
diff --git a/demo-app/src/client/Components/Increment.tsx b/demo-app/src/client/Components/Increment.tsx
deleted file mode 100644
index 3836152a7..000000000
--- a/demo-app/src/client/Components/Increment.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React, { useState } from 'react';
-function Increment(): JSX.Element {
-  const [count, setCount] = useState(0);
-  return (
-    <div>
-      <button className='increment' onClick={() => setCount(count + 1)}>
-        You clicked me {count} times.
-      </button>
-    </div>
-  );
-}
-
-export default Increment;
diff --git a/demo-app/src/client/Components/Nav.tsx b/demo-app/src/client/Components/Nav.tsx
index c289f8d81..53e12d553 100644
--- a/demo-app/src/client/Components/Nav.tsx
+++ b/demo-app/src/client/Components/Nav.tsx
@@ -11,7 +11,10 @@ function Nav(): JSX.Element {
         Tic-Tac-Toe
       </Link>
       <Link className='link' to='/buttons'>
-        Counter
+        State Counter
+      </Link>
+      <Link className='link' to='/reducer'>
+        Reducer Counter
       </Link>
     </div>
   );
diff --git a/demo-app/src/client/Components/ReducerCounter.tsx b/demo-app/src/client/Components/ReducerCounter.tsx
new file mode 100644
index 000000000..65b5d6155
--- /dev/null
+++ b/demo-app/src/client/Components/ReducerCounter.tsx
@@ -0,0 +1,141 @@
+import React, { Component } from 'react';
+
+type CounterProps = {
+  initialCount?: number;
+  step?: number;
+  title?: string;
+  theme?: {
+    backgroundColor?: string;
+    textColor?: string;
+  };
+};
+
+type CounterState = {
+  count: number;
+  history: number[];
+  lastAction: string;
+};
+
+type CounterAction =
+  | { type: 'INCREMENT' }
+  | { type: 'DECREMENT' }
+  | { type: 'DOUBLE' }
+  | { type: 'RESET' }
+  | { type: 'ADD'; payload: number };
+
+class ReducerCounter extends Component<CounterProps, CounterState> {
+  static defaultProps = {
+    initialCount: 0,
+    step: 1,
+    title: 'Class-based Reducer Counter',
+    theme: {
+      backgroundColor: '#ffffff',
+      textColor: '#330002',
+    },
+  };
+
+  static initialState(initialCount: number): CounterState {
+    return {
+      count: initialCount,
+      history: [],
+      lastAction: 'none',
+    };
+  }
+
+  static reducer(state: CounterState, action: CounterAction, step: number): CounterState {
+    switch (action.type) {
+      case 'INCREMENT':
+        return {
+          ...state,
+          count: state.count + step,
+          history: [...state.history, state.count + step],
+          lastAction: 'INCREMENT',
+        };
+      case 'DECREMENT':
+        return {
+          ...state,
+          count: state.count - step,
+          history: [...state.history, state.count - step],
+          lastAction: 'DECREMENT',
+        };
+      case 'DOUBLE':
+        return {
+          ...state,
+          count: state.count * 2,
+          history: [...state.history, state.count * 2],
+          lastAction: 'DOUBLE',
+        };
+      case 'RESET':
+        return {
+          ...ReducerCounter.initialState(0),
+          lastAction: 'RESET',
+        };
+      case 'ADD':
+        return {
+          ...state,
+          count: state.count + action.payload,
+          history: [...state.history, state.count + action.payload],
+          lastAction: `ADD ${action.payload}`,
+        };
+      default:
+        return state;
+    }
+  }
+
+  constructor(props: CounterProps) {
+    super(props);
+    this.state = ReducerCounter.initialState(props.initialCount || 0);
+    this.dispatch = this.dispatch.bind(this);
+  }
+
+  dispatch(action: CounterAction): void {
+    this.setState((currentState) =>
+      ReducerCounter.reducer(currentState, action, this.props.step || 1),
+    );
+  }
+
+  render(): JSX.Element {
+    const { title, theme } = this.props;
+
+    return (
+      <div
+        className='reducer-counter'
+        style={{
+          backgroundColor: theme?.backgroundColor,
+          color: theme?.textColor,
+        }}
+      >
+        <h2>{title}</h2>
+        <div className='counter-value'>
+          <h3>Current Count: {this.state.count}</h3>
+        </div>
+
+        <div className='counter-buttons'>
+          <button onClick={() => this.dispatch({ type: 'INCREMENT' })}>
+            Increment (+{this.props.step})
+          </button>
+          <button onClick={() => this.dispatch({ type: 'DECREMENT' })}>
+            Decrement (-{this.props.step})
+          </button>
+          <button onClick={() => this.dispatch({ type: 'DOUBLE' })}>Double Value</button>
+          <button onClick={() => this.dispatch({ type: 'ADD', payload: 5 })}>Add 5</button>
+          <button onClick={() => this.dispatch({ type: 'RESET' })}>Reset</button>
+        </div>
+
+        <div className='counter-info'>
+          <h4>History:</h4>
+          <div className='history-list'>
+            {this.state.history.map((value, index) => (
+              <span key={index}>
+                {value}
+                {index < this.state.history.length - 1 ? ' → ' : ''}
+              </span>
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default ReducerCounter;
diff --git a/demo-app/src/client/Components/ThemeToggle.tsx b/demo-app/src/client/Components/ThemeToggle.tsx
new file mode 100644
index 000000000..58d05abeb
--- /dev/null
+++ b/demo-app/src/client/Components/ThemeToggle.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { useTheme } from '../../contexts/ThemeContext';
+
+const ThemeToggle = (): JSX.Element => {
+  const { theme, toggleTheme } = useTheme();
+
+  return (
+    <button
+      onClick={toggleTheme}
+      style={{
+        backgroundColor: theme.primaryColor,
+        color: theme.backgroundColor,
+        padding: '8px 16px',
+        border: 'none',
+        borderRadius: '4px',
+        cursor: 'pointer',
+        position: 'fixed',
+        top: '10px',
+        right: '10px',
+      }}
+    >
+      Toggle Theme
+    </button>
+  );
+};
+
+export default ThemeToggle;
diff --git a/demo-app/src/client/Router.tsx b/demo-app/src/client/Router.tsx
index 47dc6e14b..8c2196639 100644
--- a/demo-app/src/client/Router.tsx
+++ b/demo-app/src/client/Router.tsx
@@ -1,31 +1,62 @@
+// src/client/Router.tsx
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { ThemeProvider } from '../contexts/ThemeContext';
+import { AuthProvider } from '../contexts/AuthContext';
 import Nav from './Components/Nav';
 import Board from './Components/Board';
 import Home from './Components/Home';
 import Buttons from './Components/Buttons';
-// import ButtonsWithMoreHooks from './Components/ButtonsWithMoreHooks';
+import ReducerCounter from './Components/ReducerCounter';
+import FunctionalReducerCounter from './Components/FunctionalReducerCounter';
+import FunctionalStateCounter from './Components/FunctionalStateCounter';
+import ThemeToggle from './Components/ThemeToggle';
 
 const domNode = document.getElementById('root');
+if (!domNode) throw new Error('Root element not found');
 const root = createRoot(domNode);
 
-root.render(
-  <BrowserRouter key='BrowserRouter'>
-    <Nav key='Nav' />
-    <Routes key='Routes'>
-      <Route path='/' element={<Home key='Home' />} />
-      <Route path='/tictactoe' element={<Board key='Board' />} />
-      {/* Switch between the two "buttons" paths below via commenting/uncommenting to alternate between
-          the public facing Buttons page and the fiber node hooks research page "ButtonsWithMoreHooks" */}
-      <Route path='/buttons' element={<Buttons key='Buttons' />} />
-      {/* <Route path='/buttons' element={<ButtonsWithMoreHooks key='ButtonsWithMoreHooks'/>} /> */}
-    </Routes>
-  </BrowserRouter>,
-
-  /** Comment out everything above this and uncomment the line below as ButtonsWithMoreHooks import statement to skip all of the
-   *  router components and make fiber node hooks research easier */
+const CounterPage = () => (
+  <div style={{ display: 'flex', justifyContent: 'center', gap: '2rem', flexWrap: 'wrap' }}>
+    <ReducerCounter
+      key='ReducerCounter'
+      initialCount={5}
+      step={2}
+      title='Class Counter'
+      theme={{ backgroundColor: '#f5f5f5', textColor: '#2a2a2a' }}
+    />
+    <FunctionalReducerCounter
+      key='FunctionalReducerCounter'
+      initialCount={10}
+      step={3}
+      title='Functional Reducer'
+      theme={{ backgroundColor: '#e8f4f8', textColor: '#2b4d59' }}
+    />
+    <FunctionalStateCounter
+      key='FunctionalStateCounter'
+      initialCount={15}
+      step={5}
+      title='Functional State'
+      theme={{ backgroundColor: '#f8f4e8', textColor: '#594b2b' }}
+    />
+  </div>
+);
 
-  // <ButtonsWithMoreHooks/>
+root.render(
+  <AuthProvider>
+    <ThemeProvider>
+      <BrowserRouter>
+        <ThemeToggle />
+        <Nav />
+        <Routes>
+          <Route path='/' element={<Home />} />
+          <Route path='/tictactoe' element={<Board />} />
+          <Route path='/buttons' element={<Buttons />} />
+          <Route path='/reducer' element={<CounterPage />} />
+        </Routes>
+      </BrowserRouter>
+    </ThemeProvider>
+  </AuthProvider>,
 );
diff --git a/demo-app/src/client/index.html b/demo-app/src/client/index.html
index dc7e8777a..180bd93fe 100644
--- a/demo-app/src/client/index.html
+++ b/demo-app/src/client/index.html
@@ -1,9 +1,9 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
-    <title>Reactime</title>
+    <title>Demo App</title>
     <!-- <link rel="icon" type="image/x-icon" href="../../../assets/logos/blackWhiteSquareIcon.png"> -->
-    <link rel="stylesheet" type="text/css" href="./style.css">
+    <link rel="stylesheet" type="text/css" href="./style.css" />
   </head>
   <body>
     <main id="root"></main>
diff --git a/demo-app/src/client/style.css b/demo-app/src/client/style.css
index a5c315ab6..f111f0c38 100644
--- a/demo-app/src/client/style.css
+++ b/demo-app/src/client/style.css
@@ -1,10 +1,10 @@
 @import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
 
 :root {
-  --primary-red-color: #F00008;
+  --primary-red-color: #f00008;
   --background-color1: #f6f6f6;
   --secondary-blue-color: #62d6fb;
-  --fire-rose-red: #FF6569;
+  --fire-rose-red: #ff6569;
   --secondary-color: #6288fb;
   --text-color: #330002;
 }
@@ -15,7 +15,9 @@ body {
   background-color: var(--background-color1);
 }
 
-h1, h2, h4 {
+h1,
+h2,
+h4 {
   text-align: center;
 }
 
@@ -23,18 +25,18 @@ h1, h2, h4 {
 
 .nav {
   background-image: linear-gradient(
-  0deg,
-  hsl(358deg 100% 47%) 5%,
-  hsl(359deg 90% 51%) 24%,
-  hsl(360deg 91% 54%) 33%,
-  hsl(360deg 93% 57%) 41%,
-  hsl(360deg 94% 59%) 48%,
-  hsl(360deg 95% 60%) 54%,
-  hsl(359deg 97% 62%) 61%,
-  hsl(359deg 98% 64%) 69%,
-  hsl(359deg 99% 65%) 79%,
-  hsl(358deg 100% 67%) 100%
-);
+    0deg,
+    hsl(358deg 100% 47%) 5%,
+    hsl(359deg 90% 51%) 24%,
+    hsl(360deg 91% 54%) 33%,
+    hsl(360deg 93% 57%) 41%,
+    hsl(360deg 94% 59%) 48%,
+    hsl(360deg 95% 60%) 54%,
+    hsl(359deg 97% 62%) 61%,
+    hsl(359deg 98% 64%) 69%,
+    hsl(359deg 99% 65%) 79%,
+    hsl(358deg 100% 67%) 100%
+  );
 
   display: flex;
   justify-content: space-evenly;
@@ -50,7 +52,7 @@ h1, h2, h4 {
   text-decoration: none;
   text-align: center;
 
-  color: #FFF4F4;
+  color: #fff4f4;
 }
 
 .link:hover {
@@ -83,7 +85,7 @@ h1, h2, h4 {
   color: #330002;
 
   margin-top: 2em;
-  
+
   padding-top: 1em;
   padding-bottom: 1em;
   padding-left: 4em;
@@ -114,7 +116,7 @@ h1, h2, h4 {
 
   background-color: #ffffff;
   border-style: solid;
-  border-color: #FF6569;
+  border-color: #ff6569;
   border-radius: 5px;
 
   margin-top: 20px;
@@ -122,12 +124,12 @@ h1, h2, h4 {
 
   width: 100%;
 
-  padding: .5em;
+  padding: 0.5em;
 }
 
 #reset:hover {
   color: #ffffff;
-  background-color: var(--primary-red-color)
+  background-color: var(--primary-red-color);
 }
 
 /* Counter */
@@ -163,7 +165,7 @@ h1, h2, h4 {
 
   width: 100%;
 
-  padding: .5em;
+  padding: 0.5em;
 }
 
 .increment:hover {
@@ -187,4 +189,57 @@ h1, h2, h4 {
 .hook-data-section p {
   text-align: center;
   margin: 8px;
-}
\ No newline at end of file
+}
+/* Add these styles to your style.css file */
+
+.reducer-counter {
+  background-color: #ffffff;
+  color: #330002;
+  padding: 2em;
+  margin-top: 2em;
+  max-width: 500px;
+  margin-left: auto;
+  margin-right: auto;
+  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+}
+
+.counter-value {
+  text-align: center;
+  font-size: 1.2em;
+  margin: 1em 0;
+}
+
+.counter-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  justify-content: center;
+  margin: 1em 0;
+}
+
+.counter-buttons button {
+  color: #ffffff;
+  font-size: 1em;
+  background-color: var(--primary-red-color);
+  border: 2px solid #ffffff;
+  border-radius: 5px;
+  padding: 0.5em 1em;
+  cursor: pointer;
+}
+
+.counter-buttons button:hover {
+  background-color: var(--secondary-blue-color);
+}
+
+.counter-info {
+  text-align: center;
+  margin-top: 2em;
+}
+
+.history-list {
+  margin: 1em 0;
+  padding: 1em;
+  background-color: var(--background-color1);
+  border-radius: 5px;
+  word-wrap: break-word;
+}
diff --git a/demo-app/src/contexts/AuthContext.tsx b/demo-app/src/contexts/AuthContext.tsx
new file mode 100644
index 000000000..a1109470c
--- /dev/null
+++ b/demo-app/src/contexts/AuthContext.tsx
@@ -0,0 +1,37 @@
+import React, { createContext, useState, useContext } from 'react';
+
+type User = {
+  username: string;
+  isAdmin: boolean;
+} | null;
+
+type AuthContextType = {
+  user: User;
+  login: (username: string) => void;
+  logout: () => void;
+};
+
+export const AuthContext = createContext<AuthContextType>({
+  user: null,
+  login: () => {},
+  logout: () => {},
+});
+
+export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [user, setUser] = useState<User>(null);
+
+  const login = (username: string) => {
+    setUser({
+      username,
+      isAdmin: username === 'admin',
+    });
+  };
+
+  const logout = () => {
+    setUser(null);
+  };
+
+  return <AuthContext.Provider value={{ user, login, logout }}>{children}</AuthContext.Provider>;
+};
+
+export const useAuth = () => useContext(AuthContext);
diff --git a/demo-app/src/contexts/ThemeContext.tsx b/demo-app/src/contexts/ThemeContext.tsx
new file mode 100644
index 000000000..7c3be3a57
--- /dev/null
+++ b/demo-app/src/contexts/ThemeContext.tsx
@@ -0,0 +1,49 @@
+import React, { createContext, useState, useContext } from 'react';
+
+type Theme = {
+  backgroundColor: string;
+  textColor: string;
+  primaryColor: string;
+  secondaryColor: string;
+};
+
+type ThemeContextType = {
+  theme: Theme;
+  toggleTheme: () => void;
+};
+
+const defaultTheme: Theme = {
+  backgroundColor: '#ffffff',
+  textColor: '#330002',
+  primaryColor: '#f00008',
+  secondaryColor: '#62d6fb',
+};
+
+const darkTheme: Theme = {
+  backgroundColor: '#222222',
+  textColor: '#ffffff',
+  primaryColor: '#ff6569',
+  secondaryColor: '#6288fb',
+};
+
+export const ThemeContext = createContext<ThemeContextType>({
+  theme: defaultTheme,
+  toggleTheme: () => {},
+});
+
+export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [isDark, setIsDark] = useState(false);
+
+  const toggleTheme = () => {
+    setIsDark(!isDark);
+  };
+
+  const value = {
+    theme: isDark ? darkTheme : defaultTheme,
+    toggleTheme,
+  };
+
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+};
+
+export const useTheme = () => useContext(ThemeContext);
diff --git a/demo-app/webpack.config.js b/demo-app/webpack.config.js
index 84e00598d..8dae226ab 100644
--- a/demo-app/webpack.config.js
+++ b/demo-app/webpack.config.js
@@ -17,13 +17,43 @@ module.exports = {
         use: {
           loader: 'babel-loader',
           options: {
-            presets: ['@babel/preset-env', '@babel/preset-react'],
+            presets: [
+              [
+                '@babel/preset-env',
+                {
+                  targets: {
+                    node: 'current',
+                    browsers: ['last 2 versions', 'not dead', 'not < 2%', 'not ie 11'],
+                  },
+                  useBuiltIns: 'usage',
+                  corejs: 3,
+                },
+              ],
+              [
+                '@babel/preset-react',
+                {
+                  runtime: 'automatic',
+                },
+              ],
+            ],
+            plugins: ['@babel/plugin-transform-runtime'],
           },
         },
       },
       {
         test: /\.tsx?$/,
-        use: 'ts-loader',
+        use: [
+          {
+            loader: 'ts-loader',
+            options: {
+              transpileOnly: true,
+              compilerOptions: {
+                target: 'es2018',
+                module: 'esnext',
+              },
+            },
+          },
+        ],
         exclude: /node_modules/,
       },
     ],
diff --git a/package.json b/package.json
index 6a006e972..2299394ae 100644
--- a/package.json
+++ b/package.json
@@ -127,6 +127,8 @@
   ],
   "license": "ISC",
   "devDependencies": {
+    "@babel/parser": "^7.26.2",
+    "@babel/types": "^7.26.0",
     "@testing-library/jest-dom": "^6.1.5",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.1",
@@ -186,6 +188,7 @@
     "jest-environment-jsdom": "^29.7.0",
     "jsondiffpatch": "^0.5.0",
     "lodash": "^4.17.21",
+    "lucide-react": "^0.468.0",
     "node": "^18.12.1",
     "prettier": "^3.1.1",
     "rc-slider": "^10.5.0",
diff --git a/src/app/App.tsx b/src/app/App.tsx
index df58c3232..199e209aa 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -1,8 +1,6 @@
 import React from 'react';
 import { MemoryRouter as Router } from 'react-router-dom';
 import MainContainer from './containers/MainContainer';
-import { ThemeProvider } from '@mui/material/styles';
-import theme from './styles/theme';
 
 /*
   'currentTab' is the current active tab within Google Chrome.
@@ -12,12 +10,10 @@ import theme from './styles/theme';
 
 function App(): JSX.Element {
   return (
-    <ThemeProvider theme={theme}>
-      <Router>
-        {/* we wrap our application with the <Router> tag so that all components that are nested will have the react-router context */}
-        <MainContainer />
-      </Router>
-    </ThemeProvider>
+    <Router>
+      {/* we wrap our application with the <Router> tag so that all components that are nested will have the react-router context */}
+      <MainContainer />
+    </Router>
   );
 }
 
diff --git a/src/app/FrontendTypes.ts b/src/app/FrontendTypes.ts
index ceb834b5d..f949a49b7 100644
--- a/src/app/FrontendTypes.ts
+++ b/src/app/FrontendTypes.ts
@@ -108,6 +108,12 @@ export interface ActionContainerProps {
   actionView: boolean;
   setActionView: React.Dispatch<React.SetStateAction<boolean>>;
   toggleActionContainer: () => void;
+  snapshots: any;
+  currLocation: any;
+}
+
+export interface ProvConContainerProps {
+  currentSnapshot: any;
 }
 
 export interface StateContainerProps {
@@ -249,7 +255,7 @@ export interface HandleProps {
 
 export interface MainSliderProps {
   className: string;
-  snapshotsLength: number;
+  snapshots: any[];
 }
 
 export interface DefaultMargin {
@@ -297,12 +303,10 @@ export interface StepsObj {
 }
 
 export interface LinkControlProps {
-  layout: string;
   orientation: string;
   linkType: string;
   stepPercent: number;
   selectedNode: string;
-  setLayout: (layout: string) => void;
   setOrientation: (orientation: string) => void;
   setLinkType: (linkType: string) => void;
   setStepPercent: (percent: number) => void;
@@ -333,7 +337,6 @@ export interface Node {
 }
 
 export interface LinkComponent {
-  layout: string;
   linkType: string;
   orientation: string;
 }
@@ -396,4 +399,22 @@ export interface AxContainer {
   };
   snapshots: [];
   currLocation: object;
-}
\ No newline at end of file
+}
+
+export interface FilteredNode {
+  name?: string;
+  state?: any;
+  hooksState?: any;
+  props?: any;
+  componentData?: {
+    context?: any;
+    hooksState?: any;
+    props?: any;
+  };
+  children?: FilteredNode[];
+  context?: any;
+}
+
+export interface FilteredNodeChildren {
+  [key: string]: FilteredNode;
+}
diff --git a/src/app/components/Actions/Action.tsx b/src/app/components/Actions/Action.tsx
index 34f84b740..ee6247aae 100644
--- a/src/app/components/Actions/Action.tsx
+++ b/src/app/components/Actions/Action.tsx
@@ -1,95 +1,59 @@
-/* eslint-disable react/require-default-props */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable react/no-unused-prop-types */
-
 import React from 'react';
 import ReactHover, { Trigger, Hover } from 'react-hover';
 import { changeView, changeSlider } from '../../slices/mainSlice';
 import { ActionProps, OptionsCursorTrueWithMargin } from '../../FrontendTypes';
 import { useDispatch } from 'react-redux';
 
-/*
-  This render's the individual snapshot components on the left side column
-*/
-
-/**
- * @function Action
- * @param selected : The selected action in the array of state changes
- * @param displayName : Label showing sequence number of state change, reflects changes in Chart.tsx
- * @param componentName : Displays the name of compenent's state being changed
- * @param last : The last index in the array
- * @param sliderIndex: Index of the slider in the array of state changes
- * (clicking the block changes the slider, related to MainSlider.tsx slider)
- * @param componentData: Displays react fiber data
- * @param viewIndex:  Index of the tab in the array when timejump is made
- * @method dispatch Executes actions that changes state in reactime
- * @method handleOnkeyDown Executes key commands
- *
- */
-
 const Action = (props: ActionProps): JSX.Element => {
-  //here we are adding useSelector and useDispatch for RTK state conversion
   const dispatch = useDispatch();
 
-  // We destructure the 'props' that were passed into this component
   const {
-    selected, // boolean on whether the current index is the same as the viewIndex in 'ActionContainer'
-    last, // boolean on (whether the view index is less than 0) AND if (the index is the same as the last snapshot's index value in hierarchyArr) in 'ActionContainer'
-    index, // from snapshot.index in "ActionContainer's" 'hierarchyArr'
-    sliderIndex, // from tabs[currentTab] object in 'ActionContainer'
-    displayName, // from snapshot.displayName in "ActionContainer's" 'hierarchyArr'
-    componentData, // from snapshot.componentData in "ActionContainer's" 'hierarchyArr'
-    viewIndex, // from tabs[currentTab] object in 'ActionContainer'
+    selected,
+    last,
+    index,
+    sliderIndex,
+    displayName,
+    componentData,
+    viewIndex,
     isCurrIndex,
-    handleOnkeyDown, // function that allows arrows keys to jump between snapshots defined in 'ActionContainer.tsx'
+    handleOnkeyDown,
   } = props;
 
-  /**
-   * @function cleanTime: Displays render times for state changes
-   * @returns render display time in seconds in milliseconds
-   */
-
   const cleanTime = (): string => {
     if (!componentData || !componentData.actualDuration) {
-      // if there is no 'componentData' or 'componentData.actualDuration'
       return 'NO TIME';
     }
 
-    let seconds: number | string; // seconds is undefined but can take a number or a string
-    let milliseconds: any = componentData.actualDuration; // milliseconds is of any type and taken from the 'componentData.actualDuration'
+    let seconds: number | string;
+    let milliseconds: any = componentData.actualDuration;
 
     if (Math.floor(componentData.actualDuration) > 60) {
-      // if the milliseconds is greater than 60
-      seconds = Math.floor(componentData.actualDuration / 60); // we divide our milliseconds by 60 to determine our seconds
-      seconds = JSON.stringify(seconds); // and we convert our seconds into a string
+      seconds = Math.floor(componentData.actualDuration / 60);
+      seconds = JSON.stringify(seconds);
 
       if (seconds.length < 2) {
-        // if the seconds string is only a single digit
-        seconds = '0'.concat(seconds); // we can add a 0 in front of it so that if 'seconds = "1"' it will come out as 'seconds = "01"'
+        seconds = '0'.concat(seconds);
       }
-      milliseconds = Math.floor(componentData.actualDuration % 60); // Our true milliseconds then becomes the remainder of dividing our initial milliseconds by 60
+      milliseconds = Math.floor(componentData.actualDuration % 60);
     } else {
-      seconds = '00'; // if we haven't even reached one second yet, our seconds are 00
+      seconds = '00';
     }
 
-    milliseconds = Number.parseFloat(milliseconds as string).toFixed(2); // we convert our milliseconds string into a floating point number that has up to two decimal places.
-    const arrayMilliseconds: [string, number] = milliseconds.split('.'); // we split our milliseconds using the decimal and come out with an array of two numbers
+    milliseconds = Number.parseFloat(milliseconds as string).toFixed(2);
+    const arrayMilliseconds: [string, number] = milliseconds.split('.');
 
     if (arrayMilliseconds[0].length < 2) {
-      // if our millisecond string only has one digit
-      arrayMilliseconds[0] = '0'.concat(arrayMilliseconds[0]); // we add a 0 in front of it so that in the a sample number of '1' becomes '01'
+      arrayMilliseconds[0] = '0'.concat(arrayMilliseconds[0]);
     }
 
     if (index === 0) {
-      // if this is the initial snapshot
-      return `${seconds}:${arrayMilliseconds[0]}.${arrayMilliseconds[1]}`; // we give it a timestamp
+      return `${seconds}:${arrayMilliseconds[0]}.${arrayMilliseconds[1]}`;
     }
-    return `+${seconds}:${arrayMilliseconds[0]}.${arrayMilliseconds[1]}`; // if these are succeeding snapshots, we add a '+' to the timestamp
+    return `+${seconds}:${arrayMilliseconds[0]}.${arrayMilliseconds[1]}`;
   };
 
-  const displayTime: string = cleanTime(); // we run cleanTime on the creation of this component so that we can get the timestamp
+  const displayTime: string = cleanTime();
 
-  // creates an options object that 'ReactHover' component will use to modify it's behaviour
   const optionsCursorTrueWithMargin: OptionsCursorTrueWithMargin = {
     followCursor: true,
     shiftX: 20,
@@ -123,9 +87,15 @@ const Action = (props: ActionProps): JSX.Element => {
                   placeholder={`Snapshot: ${displayName}`}
                 />
               </div>
-              <button className='time-button' type='button'>
-                {displayTime}
-              </button>
+              {isCurrIndex ? (
+                <button className='current-snap' type='button'>
+                  {`Snapshot: ${displayName}`}
+                </button>
+              ) : (
+                <button className='time-button' type='button'>
+                  {displayTime}
+                </button>
+              )}
               {isCurrIndex ? (
                 <button className='current-location' type='button'>
                   Current
diff --git a/src/app/components/Actions/DropDown.tsx b/src/app/components/Actions/DropDown.tsx
new file mode 100644
index 000000000..fa7e38e75
--- /dev/null
+++ b/src/app/components/Actions/DropDown.tsx
@@ -0,0 +1,32 @@
+import Select from 'react-select';
+import React from 'react';
+
+const DropDown = ({
+  dropdownSelection,
+  setDropdownSelection,
+}: {
+  dropdownSelection: string;
+  setDropdownSelection: (value: string) => void;
+}): JSX.Element => {
+  const handleChange = (selected: { value: string; label: string }) => {
+    setDropdownSelection(selected.value);
+  };
+
+  const options = [
+    { value: 'Time Jump', label: 'Time Jump' },
+    { value: 'Providers / Consumers', label: 'Providers / Consumers' },
+  ];
+
+  return (
+    <div className='dropdown-container'>
+      <Select
+        placeholder='Select Hook'
+        onChange={handleChange}
+        options={options}
+        value={options.find((option) => option.value === dropdownSelection)}
+      />
+    </div>
+  );
+};
+
+export default DropDown;
diff --git a/src/app/components/Actions/RecordButton.tsx b/src/app/components/Actions/RecordButton.tsx
new file mode 100644
index 000000000..d907d8358
--- /dev/null
+++ b/src/app/components/Actions/RecordButton.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Switch } from '@mui/material';
+
+const RecordButton = ({ isRecording, onToggle }) => {
+  return (
+    <div className='record-button-container'>
+      <div className='record-label'>
+        <div
+          className={`record-icon ${isRecording ? 'recording' : ''}`}
+          style={{
+            backgroundColor: isRecording ? '#ef4444' : '#9ca3af',
+            transition: 'background-color 0.3s ease',
+          }}
+        />
+        <span>Record</span>
+      </div>
+      <Switch
+        checked={isRecording}
+        onChange={onToggle}
+        sx={{
+          '& .MuiSwitch-switchBase': {
+            color: '#9ca3af',
+          },
+          '& .MuiSwitch-track': {
+            backgroundColor: '#e5e7eb',
+          },
+          '& .MuiSwitch-switchBase.Mui-checked': {
+            color: '#374151',
+          },
+          '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
+            backgroundColor: '#0284c7',
+          },
+        }}
+      />
+    </div>
+  );
+};
+
+export default RecordButton;
diff --git a/src/app/components/Actions/RouteDescription.tsx b/src/app/components/Actions/RouteDescription.tsx
index 80e17e382..dbd5b753a 100644
--- a/src/app/components/Actions/RouteDescription.tsx
+++ b/src/app/components/Actions/RouteDescription.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import Slider from 'rc-slider';
+import VerticalSlider from '../TimeTravel/VerticalSlider';
 
 /*
   Render's the red route description on app's left sided column between the clear button and the list of state snapshots. The route description is derived from the first state snapshot.
@@ -12,10 +14,19 @@ const RouteDescription = (props: RouteProps): JSX.Element => {
   const { actions } = props;
 
   const url: URL = new URL(actions[0].props.routePath); // Use new URL to use the url.pathname method.
+
   return (
-    <div className='routedescription'>
-      <h3 className='route'>Route: {url.pathname}</h3>
-      {actions}
+    <div className='route-container'>
+      <div className='route-header'>Route: {url.pathname}</div>
+      <div className='route-content' style={{ height: `${actions.length * 40.5}px` }}>
+        <div>
+          <VerticalSlider className='main-slider' snapshots={actions} />
+        </div>
+        <div className='actions-container'>
+          {/* actual snapshots per route */}
+          {actions}
+        </div>
+      </div>
     </div>
   );
 };
diff --git a/src/app/components/Actions/SwitchApp.tsx b/src/app/components/Actions/SwitchApp.tsx
deleted file mode 100644
index 03c2c4757..000000000
--- a/src/app/components/Actions/SwitchApp.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import React from 'react';
-import Select from 'react-select';
-import { setTab } from '../../slices/mainSlice';
-//importing these methods for RTK
-import { useSelector, useDispatch } from 'react-redux';
-import { MainState, RootState } from '../../FrontendTypes';
-import { current } from '@reduxjs/toolkit';
-
-/*
-  This is the dropdown menu on the left column above the 'clear' button and the state snapshots list. It allows us to switch between which website/application we are currently working on.
-
-  Currently, it doesn't seem to be fully implemented since switching applications doesn't change to snapshots that are relevant into the newly selected application
-*/
-
-const SwitchAppDropdown = (): JSX.Element => {
-  //here we are adding useSelector and useDispatch for RTK state conversion
-  const dispatch = useDispatch();
-  const { currentTab, tabs }: MainState = useSelector((state: RootState) => state.main);
-
-  const tabsArray: {}[] = []; // tabsArray is an empty array that will take objects as it's elements
-  Object.keys(tabs).forEach((tab) => {
-    // We populate our 'tabsArray' with objects derived from the 'tab' that is currently being iterated on.
-    tabsArray.unshift({ value: tab, label: tabs[tab].title });
-  });
-
-  const currTab: {} = {
-    // we create a 'currTab' object and populate it's values from the 'currentTab' that was destructured from our context object
-    value: currentTab,
-    label: tabs[currentTab].title,
-  };
-
-  const customStyles: {} = {
-    menu: (provided, state): {} => {
-      // we define a menu method that takes in two parameters
-      const outline: string = state.isSelected ? 'transparent' : 'transparent'; // why does this ternary even matter if the end result is the same?
-      const margin: number = 0;
-
-      return { ...provided, outline, margin }; // we return an object that adds the ouline and margin to the provided object
-    },
-  };
-
-  return (
-    <Select
-      className='tab-select-container'
-      classNamePrefix='tab-select'
-      value={currTab}
-      styles={customStyles}
-      onChange={(e): void => {
-        dispatch(setTab(parseInt(e.value, 10)));
-      }}
-      options={tabsArray}
-    />
-  );
-};
-
-export default SwitchAppDropdown;
diff --git a/src/app/components/Buttons/StatusDot.tsx b/src/app/components/Buttons/StatusDot.tsx
index b07845dff..1f427e5ed 100644
--- a/src/app/components/Buttons/StatusDot.tsx
+++ b/src/app/components/Buttons/StatusDot.tsx
@@ -1,26 +1,7 @@
 import React from 'react';
-import styled from 'styled-components';
-
-const Dot = styled('div')({
-  borderRadius: '50%',
-  width: '12px',
-  height: '12px',
-  display: 'inline-block',
-});
 
 const StatusDot = ({ status }) => {
-  let color: 'green' | 'red';
-  switch (status) {
-    case 'active':
-      color = 'green';
-      break;
-    case 'inactive':
-      color = 'red';
-      break;
-    default:
-      color = 'green';
-  }
-  return <Dot style={{ backgroundColor: color }} />;
+  return <span className={`status-dot ${status}`} />;
 };
 
 export default StatusDot;
diff --git a/src/app/components/Buttons/Tutorial.tsx b/src/app/components/Buttons/Tutorial.tsx
index 7e86bc094..73ded07f5 100644
--- a/src/app/components/Buttons/Tutorial.tsx
+++ b/src/app/components/Buttons/Tutorial.tsx
@@ -7,10 +7,10 @@ import { Component } from 'react';
 import 'intro.js/introjs.css';
 import { TutorialProps, TutorialState, StepsObj } from '../../FrontendTypes';
 import { Button } from '@mui/material';
-import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
 const { Steps } = require('intro.js-react'); //Must be required in. This enables compatibility with TS. If imported in, throws ts error of not rendering steps as a class component correctly. The package 'intro.js-react' is small React wrapper around Intro.js. The wrapper provides support for both steps and hints. https://introjs.com/docs/
 import { setCurrentTabInApp, tutorialSaveSeriesToggle } from '../../slices/mainSlice';
-import { useDispatch, useSelector } from 'react-redux';
+import { HelpCircle } from 'lucide-react';
+
 /*
   This is the tutorial displayed when the "How to use" button is clicked
   This needs to be a class component to be compatible with updateStepElement from intro.js
@@ -103,7 +103,7 @@ export default class Tutorial extends Component<TutorialProps, TutorialState> {
           },
           {
             title: 'Toggle Record Button',
-            element: '#recordBtn',
+            element: '.record-button-container',
             intro:
               '<ul><li>Toggle record button to pause state changes on target application</li></ul>',
             position: 'right',
@@ -193,43 +193,6 @@ export default class Tutorial extends Component<TutorialProps, TutorialState> {
               '<ul><li>Here we can analyze the render times of our app</li> <li>This is the current series of state changes within our app</li> <li>Mouse over the bargraph elements for details on each specific component</li></ul>',
             position: 'top',
           },
-          {
-            title: 'Saving Series & Actions',
-            element: '.save-series-button',
-            intro: '<ul><li>Click here to save your current series data</li></ul>',
-            position: 'top',
-          },
-          {
-            title: 'Saving Series & Actions',
-            element: '#seriesname',
-            intro: '<ul><li>We can now give our series a name or leave it at the default</li></ul>',
-            position: 'top',
-          },
-          {
-            title: 'Saving Series & Actions',
-            element: '.actionname',
-            intro:
-              '<ul><li>If we wish to save a specific action to compare later, give it a name here</li></ul>',
-            position: 'top',
-          },
-          {
-            title: 'Saving Series & Actions',
-            element: '.save-series-button',
-            intro:
-              '<ul><li>Press save series again.</li> <li>Your series and actions are now saved!</li></ul>',
-            position: 'top',
-          },
-          {
-            title: 'Comparison Tab',
-            element: '#router-link-performance-comparison',
-            intro: "<ul><li>Now let's head over to the comparison tab</li></ul>",
-            position: 'top',
-          },
-          {
-            title: 'Comparing Series',
-            intro: '<ul><li>Here we can select a saved series or action to compare</li></ul>',
-            position: 'top',
-          },
         ];
         break;
       case 'webmetrics':
@@ -359,13 +322,8 @@ export default class Tutorial extends Component<TutorialProps, TutorialState> {
           onBeforeChange={(currentStepIndex) => onChangeHandler(currentStepIndex)} // Callback called before changing the current step.
           ref={(steps) => (this.steps = steps)} // ref allows access to intro.js API
         />
-        <Button
-          variant='outlined'
-          className='howToUse-button'
-          type='button'
-          onClick={() => startIntro()}
-        >
-          <HelpOutlineIcon className='button-icon' sx={{ pr: 1 }} /> Tutorial
+        <Button className='howToUse-button' type='button' onClick={() => startIntro()}>
+          <HelpCircle className='button-icon' size={18} /> Tutorial
         </Button>
       </>
     );
diff --git a/src/app/components/DiffRoute/Diff.tsx b/src/app/components/DiffRoute/Diff.tsx
deleted file mode 100644
index 340c88790..000000000
--- a/src/app/components/DiffRoute/Diff.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import React from 'react';
-import { diff, formatters } from 'jsondiffpatch';
-// const jsondiffpatch = require('jsondiffpatch');
-import Parse from 'html-react-parser';
-import {
-  CurrentTab,
-  DiffProps,
-  MainState,
-  RootState,
-  StatelessCleaning,
-} from '../../FrontendTypes';
-import { useSelector } from 'react-redux';
-
-/**
- * Displays tree showing two specific versions of tree:
- * one with specific state changes, the other the whole tree
- * @param props props from maincontainer
- * @returns a diff tree or a string stating no state changes have happened
- */
-
-function Diff(props: DiffProps): JSX.Element {
-  const {
-    snapshot, // snapshot from 'tabs[currentTab]' object in 'MainContainer'
-    show, // boolean that is dependent on the 'Route' path; true if 'Route' path === '/diffRaw'
-  } = props;
-  const { currentTab, tabs }: MainState = useSelector((state: RootState) => state.main);
-  const { snapshots, viewIndex, sliderIndex }: Partial<CurrentTab> = tabs[currentTab];
-
-  let previous: unknown; // = (viewIndex !== -1) ? snapshots[viewIndex - 1] : previous = snapshots[sliderIndex - 1]
-
-  if (viewIndex !== -1 && snapshots && viewIndex) {
-    // snapshots should not have any property < 0. A viewIndex of '-1' means that we had a snapshot index that occurred before the initial snapshot of the application state... which is impossible. '-1' therefore means reset to the last/most recent snapshot.
-    previous = snapshots[viewIndex - 1]; // set previous to the snapshot that is before the one we are currently viewing
-  } else if (snapshots && sliderIndex) {
-    previous = snapshots[sliderIndex - 1]; // if viewIndex was an impossible index, we will get our snapshots index using 'sliderIndex.' sliderIndex should have already been reset to the latest snapshot index. Previous is then set to the snapshot that occurred immediately before our most recent snapshot.
-  }
-
-  /*
-    State snapshot objects have the following structure:
-    {
-      children: array of objects
-      componentData: object
-      isExpanded: Boolean
-      name: string
-      route: object
-      state: string
-    }
-
-     // cleaning preview from stateless data
-  */
-  const statelessCleaning = (obj: StatelessCleaning) => {
-    const newObj = { ...obj }; // duplicate our input object into a new object
-
-    if (newObj.name === 'nameless') {
-      // if our new object's name is nameless
-      delete newObj.name; // delete the name property
-    }
-    if (newObj.componentData) {
-      // if our new object has a componentData property
-      delete newObj.componentData; // delete the componentData property
-    }
-    if (newObj.state === 'stateless') {
-      // if if our new object's state is stateless
-      delete newObj.state; // delete the state property
-    }
-
-    if (newObj.stateSnaphot) {
-      // if our new object has a stateSnaphot property
-      newObj.stateSnaphot = statelessCleaning(obj.stateSnaphot); // run statelessCleaning on the stateSnapshot
-    }
-
-    if (newObj.children) {
-      // if our new object has a children property
-      newObj.children = [];
-      if (obj.children.length > 0) {
-        // and if our input object's children property is non-empty, go through each children object from our input object and determine, if the object being iterated on either has a stateless state or has a children array with a non-zero amount of objects. Objects that fulfill the above that need to be cleaned through statelessCleaning. Those that are cleaned through this process are then pushed to the new object's children array.
-        obj.children.forEach(
-          (element: { state?: Record<string, unknown> | string; children?: [] }) => {
-            if (element.state !== 'stateless' || element.children.length > 0) {
-              const clean = statelessCleaning(element);
-              newObj.children.push(clean);
-            }
-          },
-        );
-      }
-    }
-    return newObj; // return the cleaned state snapshot(s)
-  };
-
-  const previousDisplay: StatelessCleaning = statelessCleaning(previous); // displays stateful data from the first snapshot that was taken before our current snapshot.
-
-  const delta = diff(previousDisplay, snapshot); // diff function from 'jsondiffpatch' returns the difference in state between 'previousDisplay' and 'snapshot'
-
-  const html = formatters.html.format(delta, previousDisplay); // formatters function from 'jsondiffpatch' returns an html string that shows the difference between delta and the previousDisplay
-  // console.log(html);
-
-  if (show)
-    formatters.html.showUnchanged(); // shows unchanged values if we're on the '/diffRaw' path
-  else formatters.html.hideUnchanged(); // hides unchanged values
-
-  if (previous === undefined || delta === undefined) {
-    // if there has been no state changes on the target/hooked application, previous and delta would be undefined.
-    return (
-      <div className='no-data-message'>
-        {' '}
-        Make state changes and click on a Snapshot to see the difference between that snapshot and
-        the previous one.{' '}
-      </div>
-    );
-  }
-  return <div>{Parse(html)}</div>; // HTMLReactParser from 'html-react-parser' package converts the HTML string into a react component.
-}
-
-export default Diff;
diff --git a/src/app/components/DiffRoute/DiffRoute.tsx b/src/app/components/DiffRoute/DiffRoute.tsx
deleted file mode 100644
index 081f7ebd1..000000000
--- a/src/app/components/DiffRoute/DiffRoute.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from 'react';
-import { MemoryRouter as Router, Route, NavLink, Routes } from 'react-router-dom';
-import Diff from './Diff';
-import { DiffRouteProps } from '../../FrontendTypes';
-
-/*
-  Loads the appropriate DiffRoute view and renders the 'Tree' and 'Raw' navbar buttons after clicking on the 'Diff' button located near the top rightmost corner.
-*/
-
-// 'DiffRoute' only passed in prop is 'snapshot' from 'tabs[currentTab]' object in 'MainContainer'
-const DiffRoute = (props: DiffRouteProps): JSX.Element => (
-  <div className='diff-container'>
-    <div className='navbar'>
-      <NavLink
-        className={(navData) => (navData.isActive ? 'is-active router-link' : 'router-link')}
-        to='/diff/tree'
-      >
-        Tree
-      </NavLink>
-      <NavLink
-        className={(navData) => (navData.isActive ? 'is-active router-link' : 'router-link')}
-        to='/diff/diffRaw'
-      >
-        Raw
-      </NavLink>
-    </div>
-    <div>
-      <Routes>
-        <Route path='/diffRaw' element={<Diff snapshot={props.snapshot} show />} />
-        <Route path='/tree' element={<Diff snapshot={props.snapshot} show={false} />} />
-      </Routes>
-    </div>
-  </div>
-);
-
-export default DiffRoute;
diff --git a/src/app/components/StateRoute/AxMap/Ax.tsx b/src/app/components/StateRoute/AxMap/Ax.tsx
index 6093e8293..4c0385b61 100644
--- a/src/app/components/StateRoute/AxMap/Ax.tsx
+++ b/src/app/components/StateRoute/AxMap/Ax.tsx
@@ -3,16 +3,13 @@ import { useDispatch, useSelector } from 'react-redux';
 import { Group } from '@visx/group';
 import { hierarchy, Tree } from '@visx/hierarchy';
 import { LinearGradient } from '@visx/gradient';
-import { pointRadial } from 'd3-shape';
 import LinkControls from './axLinkControls';
 import getLinkComponent from './getAxLinkComponents';
 import { useTooltip, useTooltipInPortal, defaultStyles } from '@visx/tooltip';
 import ToolTipDataDisplay from './ToolTipDataDisplay';
 import { ToolTipStyles } from '../../../FrontendTypes';
 import { localPoint } from '@visx/event';
-import AxLegend from './axLegend';
-import { renderAxLegend } from '../../../slices/AxSlices/axLegendSlice';
-import type { RootState } from '../../../store';
+import { toggleExpanded, setCurrentTabInApp } from '../../../slices/mainSlice';
 
 const defaultMargin = {
   top: 30,
@@ -52,7 +49,7 @@ export default function AxTree(props) {
     showTooltip, // function to set tooltip state
     hideTooltip, // function to close a tooltip
   } = useTooltip(); // returns an object with several properties that you can use to manage the tooltip state of your component
-  
+
   const {
     containerRef, // Access to the container's bounding box. This will be empty on first render.
     TooltipInPortal, // TooltipWithBounds in a Portal, outside of your component DOM tree
@@ -65,20 +62,20 @@ export default function AxTree(props) {
   const tooltipStyles: ToolTipStyles = {
     ...defaultStyles,
     minWidth: 60,
-    maxWidth: 300,
-    backgroundColor: 'rgb(15,15,15)',
-    color: 'white',
-    fontSize: '16px',
+    maxWidth: 250,
+    maxHeight: '300px',
     lineHeight: '18px',
-    fontFamily: 'Roboto',
-    zIndex: 100,
     pointerEvents: 'all !important',
+    margin: 0,
+    padding: 0,
+    borderRadius: '8px',
+    overflowY: 'auto',
+    overflowX: 'auto',
   };
 
-  const [layout, setLayout] = useState('cartesian');
   const [orientation, setOrientation] = useState('horizontal');
-  const [linkType, setLinkType] = useState('diagonal');
-  const [stepPercent, setStepPercent] = useState(0.5);
+  const [linkType, setLinkType] = useState('step');
+  const [stepPercent, setStepPercent] = useState(0.0);
 
   const innerWidth: number = totalWidth - margin.left - margin.right;
   const innerHeight: number = totalHeight - margin.top - margin.bottom - 60;
@@ -87,32 +84,23 @@ export default function AxTree(props) {
   let sizeWidth: number;
   let sizeHeight: number;
 
-  if (layout === 'polar') {
-    origin = {
-      x: innerWidth / 2,
-      y: innerHeight / 2,
-    };
-    sizeWidth = 2 * Math.PI;
-    sizeHeight = Math.min(innerWidth, innerHeight) / 2;
+  origin = { x: 0, y: 0 };
+  if (orientation === 'vertical') {
+    sizeWidth = innerWidth;
+    sizeHeight = innerHeight;
   } else {
-    origin = { x: 0, y: 0 };
-    if (orientation === 'vertical') {
-      sizeWidth = innerWidth;
-      sizeHeight = innerHeight;
-    } else {
-      sizeWidth = innerHeight;
-      sizeHeight = innerWidth;
-    }
+    sizeWidth = innerHeight;
+    sizeHeight = innerWidth;
   }
 
-  const LinkComponent = getLinkComponent({ layout, linkType, orientation });
+  const LinkComponent = getLinkComponent({ linkType, orientation });
 
   const currAxSnapshot = JSON.parse(JSON.stringify(axSnapshots[currLocation.index]));
 
   // root node of currAxSnapshot
   const rootAxNode = JSON.parse(JSON.stringify(currAxSnapshot[0]));
 
-  // array that holds each ax tree node with children property 
+  // array that holds each ax tree node with children property
   const nodeAxArr = [];
 
   // populates ax nodes with children property; visx recognizes 'children' in order to properly render a nested tree
@@ -157,29 +145,22 @@ export default function AxTree(props) {
   populateNodeAxArr(rootAxNode);
 
   // Conditionally render ax legend component (RTK)
-  const { axLegendButtonClicked } = useSelector((state: RootState) => state.axLegend);
   const dispatch = useDispatch();
 
   return totalWidth < 10 ? null : (
     <div>
-      <div id='axControls'>
+      <div className='axControls'>
         <LinkControls
-          layout={layout}
           orientation={orientation}
           linkType={linkType}
           stepPercent={stepPercent}
-          setLayout={setLayout}
           setOrientation={setOrientation}
           setLinkType={setLinkType}
           setStepPercent={setStepPercent}
         />
-
-        <button id='axLegendButton' onClick={() => dispatch(renderAxLegend())}>
-          Generate Ax Tree Legend
-        </button>
       </div>
 
-      <svg ref={containerRef} width={totalWidth + 0.2*totalWidth} height={totalHeight}>
+      <svg ref={containerRef} width={totalWidth + 0.2 * totalWidth} height={totalHeight}>
         <LinearGradient id='root-gradient' from='#488689' to='#3c6e71' />
         <LinearGradient id='parent-gradient' from='#488689' to='#3c6e71' />
         <rect
@@ -187,9 +168,10 @@ export default function AxTree(props) {
           width={sizeWidth / aspect}
           height={sizeHeight / aspect + 0}
           rx={14}
-         onClick={() => {
+          onClick={() => {
             hideTooltip();
-          }}/>
+          }}
+        />
         <Group transform={`scale(${aspect})`} top={margin.top} left={margin.left}>
           <Tree
             root={hierarchy(nodeAxArr[0], (d) => (d.isExpanded ? null : d.children))}
@@ -208,7 +190,6 @@ export default function AxTree(props) {
                     fill='none'
                   />
                 ))}
-                // code relating to each node in tree
                 {tree.descendants().map((node, key) => {
                   const widthFunc = (name): number => {
                     // returns a number that is related to the length of the name. Used for determining the node width.
@@ -223,11 +204,7 @@ export default function AxTree(props) {
                   let top: number;
                   let left: number;
 
-                  if (layout === 'polar') {
-                    const [radialX, radialY] = pointRadial(node.x, node.y);
-                    top = radialY;
-                    left = radialX;
-                  } else if (orientation === 'vertical') {
+                  if (orientation === 'vertical') {
                     top = node.y;
                     left = node.x;
                   } else {
@@ -299,7 +276,7 @@ export default function AxTree(props) {
                       }
                     }
                   } else {
-                    aspect = Math.max(aspect, 0.2);
+                    aspect = Math.max(aspect, 0.5);
                   }
                   const handleMouseAndClickOver = (event): void => {
                     const coords = localPoint(event.target.ownerSVGElement, event);
@@ -318,17 +295,16 @@ export default function AxTree(props) {
                     <Group top={top} left={left} key={key} className='rect'>
                       {node.depth === 0 && (
                         <rect
-                          className={node.children ? 'compMapParent' : 'compMapChild'}
+                          className={'compMapRoot'}
                           height={height}
                           width={width}
                           y={-height / 2}
                           x={-width / 2}
-                          fill="url('#parent-gradient')"
                           strokeWidth={1.5}
                           strokeOpacity='1'
-                          rx={node.children ? 4 : 10}
+                          rx={8}
                           onClick={() => {
-                            node.data.isExpanded = !node.data.isExpanded;
+                            dispatch(toggleExpanded(node.data));
                             hideTooltip();
                           }}
                         />
@@ -340,12 +316,11 @@ export default function AxTree(props) {
                           width={width}
                           y={-height / 2}
                           x={-width / 2}
-                          fill="url('#parent-gradient')"
                           strokeWidth={1.5}
                           strokeOpacity='1'
-                          rx={node.children ? 4 : 10}
+                          rx={8}
                           onClick={() => {
-                            node.data.isExpanded = !node.data.isExpanded;
+                            dispatch(toggleExpanded(node.data));
                             hideTooltip();
                           }}
                           // Mouse Enter Rect (Component Node) -----------------------------------------------------------------------
@@ -428,10 +403,9 @@ export default function AxTree(props) {
           }}
         >
           <div>
-            <div>
-              {/*tooltipData['name'].value cannot be referred to using dot notation so using brackets here overrides typescript's strict data typing which was interfering with accessiccing this property */}
-                <strong>{JSON.stringify(tooltipData['name'].value)}</strong>
-              </div>
+            <div className='tooltip-header'>
+              <h3 className='tooltip-title'>{tooltipData['name'].value}</h3>
+            </div>
             <div>
               {/* Ax Node Info below names the tooltip title because of how its passed to the ToolTipDataDisplay container*/}
               <ToolTipDataDisplay containerName='Ax Node Info' dataObj={tooltipData} />
@@ -439,13 +413,6 @@ export default function AxTree(props) {
           </div>
         </TooltipInPortal>
       )}
-
-      <div>
-        { axLegendButtonClicked ? 
-          <AxLegend /> : ''
-        }
-      </div>
-      
     </div>
   );
 }
diff --git a/src/app/components/StateRoute/AxMap/AxMap.tsx b/src/app/components/StateRoute/AxMap/AxContainer.tsx
similarity index 99%
rename from src/app/components/StateRoute/AxMap/AxMap.tsx
rename to src/app/components/StateRoute/AxMap/AxContainer.tsx
index 12e2ca801..719d57645 100644
--- a/src/app/components/StateRoute/AxMap/AxMap.tsx
+++ b/src/app/components/StateRoute/AxMap/AxContainer.tsx
@@ -37,5 +37,3 @@ const AxContainer = (props: AxContainer) => {
 };
 
 export default AxContainer;
-
-
diff --git a/src/app/components/StateRoute/AxMap/ToolTipDataDisplay.tsx b/src/app/components/StateRoute/AxMap/ToolTipDataDisplay.tsx
index c0f4507ec..5580e7636 100644
--- a/src/app/components/StateRoute/AxMap/ToolTipDataDisplay.tsx
+++ b/src/app/components/StateRoute/AxMap/ToolTipDataDisplay.tsx
@@ -18,7 +18,6 @@ const colors = {
   base07: '#e7e9db',
   base08: '#ef6155',
   base09: '#824508', //base09 is orange for booleans and numbers. This base in particular fails to match the entered color.
-  // base09: '#592bad', // alternative purple
   base0A: '#fec418',
   base0B: '#48b685',
   base0C: '#5bc4bf',
@@ -68,7 +67,7 @@ const ToolTipDataDisplay = ({ containerName, dataObj }) => {
   }
 
   return (
-    <div className='tooltipData' key={`${containerName}-data-container`}>
+    <div key={`${containerName}-data-container`}>
       <JSONTree
         data={printableObject} // data to be rendered, a snapshot object
         theme={{ extend: colors, tree: () => ({ className: `tooltipData-JSONTree` }) }} // theme set to a base16 theme that has been extended to include  "className: 'json-tree'"
diff --git a/src/app/components/StateRoute/AxMap/axLegend.tsx b/src/app/components/StateRoute/AxMap/axLegend.tsx
deleted file mode 100644
index 9ebe139a5..000000000
--- a/src/app/components/StateRoute/AxMap/axLegend.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-
-const AxLegend = () => {
-    return (
-        <div>
-            Nodes from the accessibility tree have either a role <strong>role</strong> or <strong>internalRole</strong>
-            <ul>
-                <li>
-                    <i><b>Role</b></i> refers to <strong> ARIA </strong> roles, which indicate the purpose of the element to assistive technologies, like screen readers.
-                    All of the nodes rendered in this tree have a role of 'role'
-                </li>
-                <li>
-                    <i><b>internalRole</b></i> refers to browser-specific roles <strong> Chrome </strong> for its own accessibility processing
-                </li>
-            </ul>
-
-            <p> Each node is given a property labeled <strong>ignored</strong>. Nodes read by the screen reader have their ignored property evaluate to <strong>false</strong>. 
-            Nodes not read by the screen reader evaluate to <strong>true</strong>.</p>
-
-            <p> Nodes labeled as <strong>no name</strong> are visible to a screen reader, but were not given a name label.</p>
-        </div>
-    );
-}
-
-export default AxLegend;
\ No newline at end of file
diff --git a/src/app/components/StateRoute/AxMap/axLinkControls.tsx b/src/app/components/StateRoute/AxMap/axLinkControls.tsx
index 433936919..04347a693 100644
--- a/src/app/components/StateRoute/AxMap/axLinkControls.tsx
+++ b/src/app/components/StateRoute/AxMap/axLinkControls.tsx
@@ -1,78 +1,61 @@
 import React from 'react';
 
-const controlStyles = { fontSize: 10 };
-
-type Props = {
-  layout: string;
-  orientation: string;
-  linkType: string;
-  stepPercent: number;
-  setLayout: (layout: string) => void;
-  setOrientation: (orientation: string) => void;
-  setLinkType: (linkType: string) => void;
-  setStepPercent: (percent: number) => void;
-};
-
-export default function LinkControls({
-  layout,
+const AxLinkControls = ({
   orientation,
   linkType,
   stepPercent,
-  setLayout,
   setOrientation,
   setLinkType,
   setStepPercent,
-}: Props) {
+}) => {
   return (
-    <div style={controlStyles}>
-      <label>layout:</label>&nbsp;
-      <select
-        onClick={(e) => e.stopPropagation()}
-        onChange={(e) => setLayout(e.target.value)}
-        value={layout}
-      >
-        <option value="cartesian">cartesian</option>
-        <option value="polar">polar</option>
-      </select>
-      &nbsp;&nbsp;
-      <label>orientation:</label>&nbsp;
-      <select
-        onClick={(e) => e.stopPropagation()}
-        onChange={(e) => setOrientation(e.target.value)}
-        value={orientation}
-        disabled={layout === 'polar'}
-      >
-        <option value="vertical">vertical</option>
-        <option value="horizontal">horizontal</option>
-      </select>
-      &nbsp;&nbsp;
-      <label>link:</label>&nbsp;
-      <select
-        onClick={(e) => e.stopPropagation()}
-        onChange={(e) => setLinkType(e.target.value)}
-        value={linkType}
-      >
-        <option value="diagonal">diagonal</option>
-        <option value="step">step</option>
-        <option value="curve">curve</option>
-        <option value="line">line</option>
-      </select>
-      {linkType === 'step' && layout !== 'polar' && (
-        <>
-          &nbsp;&nbsp;
-          <label>step:</label>&nbsp;
+    <div className='link-controls'>
+      <div className='control-group'>
+        <label className='control-label'>Orientation:</label>
+        <select
+          className='control-select'
+          onClick={(e) => e.stopPropagation()}
+          onChange={(e) => setOrientation(e.target.value)}
+          value={orientation}
+        >
+          <option value='vertical'>vertical</option>
+          <option value='horizontal'>horizontal</option>
+        </select>
+      </div>
+
+      <div className='control-group'>
+        <label className='control-label'>Link:</label>
+        <select
+          className='control-select'
+          onClick={(e) => e.stopPropagation()}
+          onChange={(e) => setLinkType(e.target.value)}
+          value={linkType}
+        >
+          <option value='diagonal'>diagonal</option>
+          <option value='step'>step</option>
+          <option value='curve'>curve</option>
+          <option value='line'>line</option>
+        </select>
+      </div>
+
+      {linkType === 'step' && (
+        <div className='control-group'>
+          <label className='control-label'>Step:</label>
           <input
             onClick={(e) => e.stopPropagation()}
-            type="range"
+            type='range'
             min={0}
             max={1}
             step={0.1}
             onChange={(e) => setStepPercent(Number(e.target.value))}
             value={stepPercent}
-            disabled={linkType !== 'step' || layout === 'polar'}
+            disabled={linkType !== 'step'}
+            className='control-range'
           />
-        </>
+        </div>
       )}
     </div>
   );
-}
+};
+
+export default AxLinkControls;
diff --git a/src/app/components/StateRoute/AxMap/getAxLinkComponents.tsx b/src/app/components/StateRoute/AxMap/getAxLinkComponents.tsx
index 33316542f..26ce0426f 100644
--- a/src/app/components/StateRoute/AxMap/getAxLinkComponents.tsx
+++ b/src/app/components/StateRoute/AxMap/getAxLinkComponents.tsx
@@ -15,27 +15,15 @@ import {
 } from '@visx/shape';
 
 export default function getLinkComponent({
-  layout,
   linkType,
   orientation,
 }: {
-  layout: string;
   linkType: string;
   orientation: string;
 }) {
   let LinkComponent;
 
-  if (layout === 'polar') {
-    if (linkType === 'step') {
-      LinkComponent = LinkRadialStep;
-    } else if (linkType === 'curve') {
-      LinkComponent = LinkRadialCurve;
-    } else if (linkType === 'line') {
-      LinkComponent = LinkRadialLine;
-    } else {
-      LinkComponent = LinkRadial;
-    }
-  } else if (orientation === 'vertical') {
+ if (orientation === 'vertical') {
     if (linkType === 'step') {
       LinkComponent = LinkVerticalStep;
     } else if (linkType === 'curve') {
diff --git a/src/app/components/StateRoute/ComponentMap/ComponentMap.tsx b/src/app/components/StateRoute/ComponentMap/ComponentMap.tsx
index ed52beff5..1436468d3 100644
--- a/src/app/components/StateRoute/ComponentMap/ComponentMap.tsx
+++ b/src/app/components/StateRoute/ComponentMap/ComponentMap.tsx
@@ -22,30 +22,23 @@ import { toggleExpanded, setCurrentTabInApp } from '../../../slices/mainSlice';
 import { useDispatch } from 'react-redux';
 import { LinkTypesProps, DefaultMargin, ToolTipStyles } from '../../../FrontendTypes';
 
-const linkStroke = '#F00008'; //#F00008 original
-const rootStroke = '#F00008'; //#F00008 original
-const nodeParentFill = '#161521'; //#161521 original
-const nodeChildFill = '#62d6fb'; //#62d6fb original
-const nodeParentStroke = '#F00008'; //#F00008 original
-const nodeChildStroke = '#4D4D4D'; //#4D4D4D original
-let stroke = ''; 
-
-/* Heat Map Colors (for links) */
-const lightOrange = '#F1B476';
-const darkOrange = '#E4765B';
-const red = '#C64442';
-const plum = '#8C2743';
+let stroke = '';
+
+const lightWeight = '#94a3b8'; // Lightest gray for minimal props
+const mediumWeight = '#64748b'; // Medium gray for light prop load
+const heavyWeight = '#556579';
+const veryHeavy = '#475569'; // Darker gray for medium load
 
 const defaultMargin: DefaultMargin = {
   top: 30,
-  left: 30,
-  right: 55,
+  left: 20,
+  right: 20,
   bottom: 70,
 };
 
 const nodeCoords: object = {};
 let count: number = 0;
-let aspect: number = 1; // aspect resizes the component map container to accommodate large node trees on complex sites
+let aspect: number = 1;
 let nodeCoordTier = 0;
 let nodeOneLeft = 0;
 let nodeTwoLeft = 2;
@@ -57,11 +50,12 @@ export default function ComponentMap({
   margin = defaultMargin,
   currentSnapshot, // from 'tabs[currentTab].stateSnapshot object in 'MainContainer'
 }: LinkTypesProps): JSX.Element {
-  const [layout, setLayout] = useState('cartesian'); // We create a local state "layout" and set it to a string 'cartesian'
   const [orientation, setOrientation] = useState('vertical'); // We create a local state "orientation" and set it to a string 'vertical'.
-  const [linkType, setLinkType] = useState('diagonal'); // We create a local state "linkType" and set it to a string 'diagonal'.
-  const [stepPercent, setStepPercent] = useState(0.5); // We create a local state "stepPercent" and set it to a number '0.5'. This will be used to scale the Map component's link: Step to 50%
+  const [linkType, setLinkType] = useState('step'); // We create a local state "linkType" and set it to a string 'step'.
+  const [stepPercent, setStepPercent] = useState(0.0); // We create a local state "stepPercent" and set it to a number '0.0'. This will be used to scale the Map component's link: Step to 0%
   const [selectedNode, setSelectedNode] = useState('root'); // We create a local state "selectedNode" and set it to a string 'root'.
+  const [forceUpdate, setForceUpdate] = useState(false);
+
   const dispatch = useDispatch();
 
   const toolTipTimeoutID = useRef(null); //useRef stores stateful data that’s not needed for rendering.
@@ -70,6 +64,14 @@ export default function ComponentMap({
     dispatch(setCurrentTabInApp('map')); // dispatch sent at initial page load allowing changing "immer's" draft.currentTabInApp to 'map' to facilitate render.
   }, [dispatch]);
 
+  // force app to re-render to accurately calculate aspect ratio upon initial load
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setForceUpdate((prev) => !prev);
+    }, 100);
+    return () => clearTimeout(timer);
+  }, []);
+
   // setting the margins for the Map to render in the tab window.
   const innerWidth: number = totalWidth - margin.left - margin.right;
   const innerHeight: number = totalHeight - margin.top - margin.bottom - 60;
@@ -80,33 +82,19 @@ export default function ComponentMap({
 
   /*
     We begin setting the starting position for the root node on the maps display. 
-    The 'polar layout' sets the root node to the relative center of the display box based on the size of the browser window. 
-    The 'cartesian layout' (else conditional) sets the root nodes location either in the left middle *or top middle of the browser window relative to the size of the browser.
+    The default view sets the root nodes location either in the left middle *or top middle of the browser window relative to the size of the browser.
   */
 
-  if (layout === 'polar') {
-    // 'polar layout' option
-    origin = {
-      x: innerWidth / 2,
-      y: innerHeight / 2,
-    };
-
-    // set the sizeWidth and sizeHeight
-    sizeWidth = 2 * Math.PI;
-    sizeHeight = Math.min(innerWidth, innerHeight) / 2;
+  origin = { x: 0, y: 0 };
+  if (orientation === 'vertical') {
+    sizeWidth = innerWidth;
+    sizeHeight = innerHeight;
   } else {
-    // 'cartesian layout' option
-    origin = { x: 0, y: 0 };
-    if (orientation === 'vertical') {
-      sizeWidth = innerWidth;
-      sizeHeight = innerHeight;
-    } else {
-      // if the orientation isn't vertical, swap the width and the height
-      sizeWidth = innerHeight;
-      sizeHeight = innerWidth;
-    }
+    // if the orientation isn't vertical, swap the width and the height
+    sizeWidth = innerHeight;
+    sizeHeight = innerWidth;
   }
-
+  //}
   const {
     tooltipData, // value/data that tooltip may need to render
     tooltipLeft, // number used for tooltip positioning
@@ -128,29 +116,14 @@ export default function ComponentMap({
   const tooltipStyles: ToolTipStyles = {
     ...defaultStyles,
     minWidth: 60,
-    maxWidth: 300,
-    backgroundColor: 'rgb(15,15,15)',
-    color: 'white',
-    fontSize: '16px',
+    maxWidth: 250,
+    maxHeight: '300px',
     lineHeight: '18px',
-    fontFamily: 'Roboto',
-    zIndex: 100,
     pointerEvents: 'all !important',
-  };
-
-  const scrollStyle: {} = {
-    minWidth: '60',
-    maxWidth: '300',
-    minHeight: '20px',
-    maxHeight: '200px',
-    overflowY: 'scroll',
-    overflowWrap: 'break-word',
-  };
-
-  const formatRenderTime: string = (time: number): string => {
-    if (!time) return 'No time information';
-    const renderTime = time.toFixed(3);
-    return `${renderTime} ms `;
+    margin: 0,
+    padding: 0,
+    borderRadius: '8px',
+    overflowY: 'auto',
   };
 
   const nodeList: [] = []; // create a nodeList array to store our nodes as a flat array
@@ -172,7 +145,69 @@ export default function ComponentMap({
     }
   };
 
-  collectNodes(currentSnapshot);
+  // check if any data should be displayed in tool tip display
+  const hasDisplayableData = (nodeData) => {
+    // Check if the node has props
+    const hasProps =
+      nodeData.componentData?.props && Object.keys(nodeData.componentData.props).length > 0;
+
+    // Check if the node has state
+    const hasState =
+      (nodeData.componentData?.state && Object.keys(nodeData.componentData.state).length > 0) ||
+      (nodeData.componentData?.hooksState &&
+        Object.keys(nodeData.componentData.hooksState).length > 0);
+
+    // Check if the node has reducer states
+    const hasReducers =
+      nodeData.componentData?.reducerStates && nodeData.componentData.reducerStates.length > 0;
+
+    return hasProps || hasState || hasReducers;
+  };
+
+  const shouldIncludeNode = (node) => {
+    // Return false if node has any context properties
+    if (node?.componentData?.context && Object.keys(node.componentData.context).length > 0) {
+      return false;
+    }
+    // Return false if node name ends with 'Provider'
+    if (node?.name && node.name.endsWith('Provider')) {
+      return false;
+    }
+    return true;
+  };
+
+  const processTreeData = (node) => {
+    if (!node) return null;
+
+    // Create a new node
+    const newNode = { ...node };
+
+    if (node.children) {
+      // Process all children first
+      const processedChildren = node.children
+        .map((child) => processTreeData(child))
+        .filter(Boolean); // Remove null results
+
+      // For each child that shouldn't be included, replace it with its children
+      newNode.children = processedChildren.reduce((acc, child) => {
+        if (shouldIncludeNode(child)) {
+          // If child should be included, add it directly
+          acc.push(child);
+        } else {
+          // If child should be filtered out, add its children instead
+          if (child.children) {
+            acc.push(...child.children);
+          }
+        }
+        return acc;
+      }, []);
+    }
+
+    return newNode;
+  };
+  // filter out Conext Providers
+  let filtered = processTreeData(currentSnapshot);
+  collectNodes(filtered);
 
   // @ts
   // find the node that has been selected and use it as the root
@@ -188,24 +223,21 @@ export default function ComponentMap({
     if (startNode === null) startNode = rootNode;
   };
 
-  findSelectedNode(); // locates the rootNode... do we really need this? This function is only used once... it's here.
+  findSelectedNode(); // locates the rootNode
 
   // controls for the map
   const LinkComponent: React.ComponentType<unknown> = getLinkComponent({
-    layout,
     linkType,
     orientation,
   });
-  return totalWidth < 10 ? null : ( 
+  return totalWidth < 10 ? null : (
     <div>
       <LinkControls
-        layout={layout}
         orientation={orientation}
         linkType={linkType}
         stepPercent={stepPercent}
         snapShots={currentSnapshot}
         selectedNode={selectedNode}
-        setLayout={setLayout}
         setOrientation={setOrientation}
         setLinkType={setLinkType}
         setStepPercent={setStepPercent}
@@ -213,7 +245,6 @@ export default function ComponentMap({
       />
 
       <svg ref={containerRef} width={totalWidth} height={totalHeight + 0}>
-        {/* <LinearGradient id='root-gradient' from='#e75e62' to='#f00008' /> */}
         <LinearGradient id='root-gradient' from='#488689' to='#3c6e71' />
         <LinearGradient id='parent-gradient' from='#488689' to='#3c6e71' />
         <rect
@@ -231,11 +262,10 @@ export default function ComponentMap({
             size={[sizeWidth / aspect, sizeHeight / aspect]}
             separation={(a, b) => (a.parent === b.parent ? 0.5 : 0.5) / a.depth}
           >
-
             {(tree) => (
-              <Group top={origin.y + 35} left={origin.x + 50 / aspect}>
+              <Group top={origin.y + 35} left={origin.x + 50}>
                 {tree.links().map((link, i) => {
-                  const linkName = link.source.data.name; 
+                  const linkName = link.source.data.name;
                   const propsObj = link.source.data.componentData.props;
                   const childPropsObj = link.target.data.componentData.props;
                   let propsLength;
@@ -246,65 +276,103 @@ export default function ComponentMap({
                   }
                   if (childPropsObj) {
                     childPropsLength = Object.keys(childPropsObj).length;
-
                   }
-                  // go to https://en.wikipedia.org/wiki/Logistic_function 
+                  // go to https://en.wikipedia.org/wiki/Logistic_function
                   // for an explanation of Logistic functions and parameters used
                   const yshift = -3;
                   const x0 = 5;
                   const L = 25;
-                  const k = .4;
-                  const strokeWidthIndex = yshift + L / (1 + Math.exp(-k * (childPropsLength - x0)));
+                  const k = 0.4;
+                  const strokeWidthIndex =
+                    yshift + L / (1 + Math.exp(-k * (childPropsLength - x0)));
 
                   if (strokeWidthIndex <= 1) {
                     stroke = '#808080';
                   } else {
                     if (childPropsLength <= 1) {
-                      stroke = lightOrange;
+                      stroke = lightWeight;
                     } else if (childPropsLength <= 2) {
-                      stroke = darkOrange;
+                      stroke = mediumWeight;
                     } else if (childPropsLength <= 3) {
-                      stroke = red;
+                      stroke = heavyWeight;
                     } else {
-                      stroke = plum;
+                      stroke = veryHeavy;
                     }
-                    // stroke = '#df6f37'
                   }
 
                   return (
-                  <LinkComponent
-                    className='compMapLink'
-                    key={i}
-                    data={link}
-                    percent={stepPercent}
-                    stroke={stroke} // color of the link --not used--
-                    strokeWidth= {strokeWidthIndex} /* strokeWidth */ // width of the link
-                    fill='none'
-                  />
-                  )
-                })
-                }
+                    <LinkComponent
+                      className='compMapLink'
+                      key={i}
+                      data={link}
+                      percent={stepPercent}
+                      stroke={stroke} // color of the link --not used--
+                      strokeWidth={strokeWidthIndex} /* strokeWidth */ // width of the link
+                      fill='none'
+                    />
+                  );
+                })}
 
                 {tree.descendants().map((node, key) => {
-                  const widthFunc: number = (name) => {
-                    //returns a number that is related to the length of the name. Used for determining the node width.
-                    const nodeLength = name.length;
-                    //return nodeLength * 7 + 20; //uncomment this line if we want each node to be directly proportional to the name.length (instead of nodes of similar sizes to snap to the same width)
+                  const calculateNodeWidth = (text: string): number => {
+                    const nodeLength = text.length;
                     if (nodeLength <= 5) return nodeLength + 50;
                     if (nodeLength <= 10) return nodeLength + 120;
                     return nodeLength + 140;
                   };
 
-                  const width: number = widthFunc(node.data.name); // the width is determined by the length of the node.name
-                  const height: number = 25;
+                  // Find the maximum width for any node
+                  const findMaxNodeWidth = (nodeData: any): number => {
+                    // If no children, return current node width
+                    if (!nodeData.children) {
+                      return calculateNodeWidth(nodeData.name);
+                    }
+
+                    // Get width of current node
+                    const currentWidth = calculateNodeWidth(nodeData.name);
+
+                    // Get max width from children
+                    const childrenWidths = nodeData.children.map((child) =>
+                      findMaxNodeWidth(child),
+                    );
+
+                    // Return the maximum width found
+                    return Math.max(currentWidth, ...childrenWidths);
+                  };
+
+                  // Truncate text for nodes that exceed a certain length
+                  const truncateText = (text: string, width: number, maxWidth: number): string => {
+                    // Calculate approximate text width
+                    const estimatedTextWidth = text.length * 8;
+
+                    // If this node's width is close to the max width (within 10%), truncate it
+                    if (width >= maxWidth * 0.9) {
+                      const maxChars = Math.floor((width - 30) / 8); // -30 for padding + ellipsis
+                      return `${text.slice(0, maxChars)}...`;
+                    }
+
+                    return text;
+                  };
+
+                  const getNodeDimensions = (
+                    name: string,
+                    rootNode: any,
+                  ): { width: number; displayText: string } => {
+                    const width = calculateNodeWidth(name);
+                    const maxWidth = findMaxNodeWidth(rootNode);
+                    const displayText = truncateText(name, width, maxWidth);
+
+                    return { width, displayText };
+                  };
+
+                  // Usage in your render function:
+                  const { width, displayText } = getNodeDimensions(node.data.name, startNode);
+
+                  const height: number = 35;
                   let top: number;
                   let left: number;
 
-                  if (layout === 'polar') {
-                    const [radialX, radialY] = pointRadial(node.x, node.y);
-                    top = radialY;
-                    left = radialX;
-                  } else if (orientation === 'vertical') {
+                  if (orientation === 'vertical') {
                     top = node.y;
                     left = node.x;
                   } else {
@@ -376,38 +444,59 @@ export default function ComponentMap({
                       }
                     }
                   } else {
-                    aspect = Math.max(aspect, 0.2);
+                    aspect = Math.max(aspect, 1);
                   }
 
                   // mousing controls & Tooltip display logic
-                  const handleMouseAndClickOver: void = (event) => {
-                    const coords = localPoint(event.target.ownerSVGElement, event);
-                    const tooltipObj = { ...node.data };
-
-                    showTooltip({
-                      tooltipLeft: coords.x,
-                      tooltipTop: coords.y,
-                      tooltipData: tooltipObj,
-                      // this is where the data for state and render time is displayed
-                      // but does not show props functions and etc
-                    });
+                  const handleMouseAndClickOver = (event, nodeData) => {
+                    // Only show tooltip if the node has data to display
+                    if (hasDisplayableData(nodeData)) {
+                      const coords = localPoint(event.target.ownerSVGElement, event);
+                      const tooltipObj = { ...nodeData };
+
+                      showTooltip({
+                        tooltipLeft: coords.x,
+                        tooltipTop: coords.y,
+                        tooltipData: tooltipObj,
+                      });
+                    }
                   };
 
                   return (
                     <Group top={top} left={left} key={key} className='rect'>
+                      // Replace the root node rect rendering block with this:
                       {node.depth === 0 && (
-                        <circle
+                        <rect
                           className='compMapRoot'
-                          r={25} // increase from 12 to 25 to improve visibility
-                          fill="url('#root-gradient')"
-                          //stroke={rootStroke}
+                          height={height}
+                          width={width}
+                          y={-height / 2}
+                          x={-width / 2}
+                          rx={10}
                           onClick={() => {
                             dispatch(toggleExpanded(node.data));
                             hideTooltip();
                           }}
+                          onMouseEnter={(event) => {
+                            if (hasDisplayableData(node.data)) {
+                              if (toolTipTimeoutID.current !== null) {
+                                clearTimeout(toolTipTimeoutID.current);
+                                hideTooltip();
+                              }
+                              toolTipTimeoutID.current = null;
+                              handleMouseAndClickOver(event, node.data);
+                            }
+                          }}
+                          onMouseLeave={() => {
+                            if (hasDisplayableData(node.data)) {
+                              toolTipTimeoutID.current = setTimeout(() => {
+                                hideTooltip();
+                                toolTipTimeoutID.current = null;
+                              }, 300);
+                            }
+                          }}
                         />
                       )}
-
                       {/* This creates the rectangle boxes for each component
                        and sets it relative position to other parent nodes of the same level. */}
                       {node.depth !== 0 && (
@@ -417,57 +506,31 @@ export default function ComponentMap({
                           width={width}
                           y={-height / 2}
                           x={-width / 2}
-                          fill="url('#parent-gradient')"
-                          //color={'#ff0000'}
-                          //fill={node.children ? nodeParentFill : nodeChildFill}
-                          //stroke={
-                          //   node.data.isExpanded && node.data.children.length > 0
-                          //     ? nodeParentStroke
-                          //     : nodeChildStroke
-                          // }
-                          strokeWidth={1.5}
-                          strokeOpacity='1'
-                          rx={node.children ? 4 : 10}
+                          rx={10}
                           onClick={() => {
                             dispatch(toggleExpanded(node.data));
                             hideTooltip();
                           }}
-                          // Mouse Enter Rect (Component Node) -----------------------------------------------------------------------
-                          /** This onMouseEnter event fires when the mouse first moves/hovers over a component node.
-                           * The supplied event listener callback produces a Tooltip element for the current node. */
-
                           onMouseEnter={(event) => {
-                            /** This 'if' statement block checks to see if you've just left another component node
-                             * by seeing if there's a current setTimeout waiting to close that component node's
-                             * tooltip (see onMouseLeave immediately below). If so it clears the tooltip generated
-                             * from that component node so a new tooltip for the node you've just entered can render. */
-                            if (toolTipTimeoutID.current !== null) {
-                              clearTimeout(toolTipTimeoutID.current);
-                              hideTooltip();
+                            if (hasDisplayableData(node.data)) {
+                              if (toolTipTimeoutID.current !== null) {
+                                clearTimeout(toolTipTimeoutID.current);
+                                hideTooltip();
+                              }
+                              toolTipTimeoutID.current = null;
+                              handleMouseAndClickOver(event, node.data);
                             }
-                            // Removes the previous timeoutID to avoid errors
-                            toolTipTimeoutID.current = null;
-                            //This generates a tooltip for the component node the mouse has entered.
-                            handleMouseAndClickOver(event);
                           }}
-                          // Mouse Leave Rect (Component Node) --------------------------------------------------------------------------
-                          /** This onMouseLeave event fires when the mouse leaves a component node.
-                           * The supplied event listener callback generates a setTimeout call which gives the
-                           * mouse a certain amount of time between leaving the current component node and
-                           * closing the tooltip for that node.
-                           * If the mouse enters the tooltip before the timeout delay has passed, the
-                           * setTimeout event will be canceled. */
                           onMouseLeave={() => {
-                            // Store setTimeout ID so timeout can be cleared if necessary
-                            toolTipTimeoutID.current = setTimeout(() => {
-                              // hideTooltip unmounts the tooltip
-                              hideTooltip();
-                              toolTipTimeoutID.current = null;
-                            }, 300);
+                            if (hasDisplayableData(node.data)) {
+                              toolTipTimeoutID.current = setTimeout(() => {
+                                hideTooltip();
+                                toolTipTimeoutID.current = null;
+                              }, 300);
+                            }
                           }}
                         />
                       )}
-
                       {/* Display text inside of each component node */}
                       <text
                         className={
@@ -478,13 +541,10 @@ export default function ComponentMap({
                               : 'compMapChildText'
                         }
                         dy='.33em'
-                        fontSize='20px'
-                        fontFamily='Roboto'
                         textAnchor='middle'
                         style={{ pointerEvents: 'none' }}
-                        //fill={node.depth === 0 ? '#161521' : node.children ? 'white' : '#161521'}
                       >
-                        {node.data.name}
+                        {displayText}
                       </text>
                     </Group>
                   );
@@ -496,43 +556,24 @@ export default function ComponentMap({
       </svg>
       {tooltipOpen && tooltipData && (
         <TooltipInPortal
-          // set this to random so it correctly updates with parent bounds
           key={Math.random()}
           top={tooltipTop}
           left={tooltipLeft}
           style={tooltipStyles}
-          //------------- Mouse Over TooltipInPortal--------------------------------------------------------------------
-          /** After the mouse enters the tooltip, it's able to persist by clearing the setTimeout
-           *  that would've unmounted it */
           onMouseEnter={() => {
             clearTimeout(toolTipTimeoutID.current);
             toolTipTimeoutID.current = null;
           }}
-          //------------- Mouse Leave TooltipInPortal -----------------------------------------------------------------
-          /** When the mouse leaves the tooltip, the tooltip unmounts */
           onMouseLeave={() => {
             hideTooltip();
           }}
         >
           <div>
-            <div>
-              <strong>{tooltipData.name}</strong>
+            <div className='tooltip-header'>
+              <h3 className='tooltip-title'>{tooltipData.name}</h3>
             </div>
-            <div className='tooltipKey'>
-              Key: {tooltipData.componentData.key !== null ? tooltipData.componentData.key : 'null'}
-            </div>
-            <div> Render time: {formatRenderTime(tooltipData.componentData.actualDuration)} </div>
-
             <div>
-              <ToolTipDataDisplay containerName='Props' dataObj={tooltipData.componentData.props} />
-              <ToolTipDataDisplay
-                containerName='State'
-                dataObj={
-                  tooltipData.componentData.hooksIndex
-                    ? tooltipData.componentData.hooksState
-                    : tooltipData.componentData.state
-                }
-              />
+              <ToolTipDataDisplay data={tooltipData} />
             </div>
           </div>
         </TooltipInPortal>
diff --git a/src/app/components/StateRoute/ComponentMap/LinkControls.tsx b/src/app/components/StateRoute/ComponentMap/LinkControls.tsx
index 69b80447f..ceaa948fd 100644
--- a/src/app/components/StateRoute/ComponentMap/LinkControls.tsx
+++ b/src/app/components/StateRoute/ComponentMap/LinkControls.tsx
@@ -1,119 +1,118 @@
-/* eslint-disable jsx-a11y/label-has-associated-control */
 import React from 'react';
-import { LinkControlProps, ControlStyles, DropDownStyle, Node } from '../../../FrontendTypes';
-// Font size of the Controls label and Dropdowns
-const controlStyles: ControlStyles = {
-  //fontSize: '16px',
-  padding: '10px',
-};
 
-const dropDownStyle: DropDownStyle = {
-  margin: '0.1em',
-  //fontSize: '16px',
-  fontFamily: 'Roboto, sans-serif',
-  borderRadius: '4px',
-  borderStyle: 'solid',
-  borderWidth: '1px',
-  backgroundColor: '#d9d9d9',
-  color: '#161617',
-  padding: '2px',
-};
+const LinkControls = ({
+  linkType,
+  stepPercent,
+  setOrientation,
+  setLinkType,
+  setStepPercent,
+  setSelectedNode,
+  snapShots,
+}) => {
+  const collectNodes = (node) => {
+    const nodeList = [];
+    nodeList.push(node);
+    for (let i = 0; i < nodeList.length; i += 1) {
+      const cur = nodeList[i];
+      if (cur.children?.length > 0) {
+        cur.children.forEach((child) => nodeList.push(child));
+      }
+    }
+    return nodeList;
+  };
+
+  const shouldIncludeNode = (node) => {
+    // Return false if node has any context properties
+    if (node?.componentData?.context && Object.keys(node.componentData.context).length > 0) {
+      return false;
+    }
+    // Return false if node name ends with 'Provider'
+    if (node?.name && node.name.endsWith('Provider')) {
+      return false;
+    }
+    return true;
+  };
+
+  const processTreeData = (node) => {
+    if (!node) return null;
 
-// use BFS to put all the nodes under snapShots(which is the tree node) into an array
-const nodeList: Node[] = [];
+    // Create a new node
+    const newNode = { ...node };
 
-const collectNodes = (node: Node): void => {
-  nodeList.splice(0, nodeList.length);
-  /* We used the .splice method here to ensure that nodeList
-  did not accumulate with page refreshes */
-  nodeList.push(node);
-  for (let i = 0; i < nodeList.length; i += 1) {
-    const cur = nodeList[i];
-    if (cur.children?.length > 0) {
-      cur.children.forEach((child) => nodeList.push(child));
+    if (node.children) {
+      // Process all children first
+      const processedChildren = node.children
+        .map((child) => processTreeData(child))
+        .filter(Boolean); // Remove null results
+
+      // For each child that shouldn't be included, replace it with its children
+      newNode.children = processedChildren.reduce((acc, child) => {
+        if (shouldIncludeNode(child)) {
+          // If child should be included, add it directly
+          acc.push(child);
+        } else {
+          // If child should be filtered out, add its children instead
+          if (child.children) {
+            acc.push(...child.children);
+          }
+        }
+        return acc;
+      }, []);
     }
-  }
-};
 
-export default function LinkControls({
-  layout, // from the layout local state (initially 'cartesian') in 'ComponentMap'
-  linkType, // from linkType local state (initially 'vertical') in 'ComponentMap'
-  stepPercent, // from stepPercent local state (initially '0.5') in 'ComponentMap'
-  setLayout, // from the layout local state in 'ComponentMap'
-  setOrientation, // from the orientation local state in 'ComponentMap'
-  setLinkType, // from the linkType local state in 'ComponentMap'
-  setStepPercent, // from the stepPercent local state in 'ComponentMap'
-  setSelectedNode, // from the selectedNode local state in 'ComponentMap'
-  snapShots,
-}: LinkControlProps): JSX.Element {
-  collectNodes(snapShots);
+    return newNode;
+  };
+  const filtered = processTreeData(snapShots);
+  const nodeList = collectNodes(filtered);
 
   return (
-    <div className='comp-map-options' style={controlStyles}>
-      {' '}
-      {/* Controls for the layout selection */}
-      <label>Layout:</label>
-      &nbsp;{' '}
-      {/* This is a non-breaking space - Prevents an automatic line break at this position */}
-      <select
-        className='comp-map-dropdown'
-        onClick={(e) => e.stopPropagation()}
-        onChange={(e) => setLayout(e.target.value)}
-        // value={layout}
-        style={dropDownStyle}
-      >
-        <option value='cartesian'>Cartesian</option>
-        <option value='polar'>Polar</option>
-      </select>
-      &nbsp;&nbsp;
-      <label>Orientation:</label>{' '}
-      {/* Toggle record button to pause state changes on target application */}
-      {/* Controls for the Orientation selection, this dropdown will be disabled when the polar layout is selected as it is not needed */}
-      &nbsp;
-      <select
-        onClick={(e) => e.stopPropagation()}
-        onChange={(e) => setOrientation(e.target.value)}
-        disabled={layout === 'polar'}
-        style={dropDownStyle}
-      >
-        <option value='vertical'>Vertical</option>
-        <option value='horizontal'>Horizontal</option>
-      </select>
-      &nbsp;&nbsp;
-      <label>Link:</label> {/* Controls for the link selections. */}
-      &nbsp;
-      <select
-        onClick={(e) => e.stopPropagation()}
-        onChange={(e) => setLinkType(e.target.value)}
-        style={dropDownStyle}
-      >
-        <option value='diagonal'>Diagonal</option>
-        <option value='step'>Step</option>
-        <option value='line'>Line</option>
-      </select>
-      <label> Select:</label> {/* Controls for the select selections. */}
-      &nbsp;
-      <select
-        id='selectInput'
-        name='nodeOptions'
-        onChange={(e) => setSelectedNode(e.target.value)}
-        style={dropDownStyle}
-      >
-        {nodeList.map(
-          (node) =>
-            node.children.length > 0 && (
+    <div className='link-controls'>
+      <div className='control-group'>
+        <label className='control-label'>Orientation:</label>
+        <select
+          onClick={(e) => e.stopPropagation()}
+          onChange={(e) => setOrientation(e.target.value)}
+          className='control-select'
+        >
+          <option value='vertical'>Vertical</option>
+          <option value='horizontal'>Horizontal</option>
+        </select>
+      </div>
+
+      <div className='control-group'>
+        <label className='control-label'>Link:</label>
+        <select
+          onClick={(e) => e.stopPropagation()}
+          onChange={(e) => setLinkType(e.target.value)}
+          className='control-select'
+        >
+          <option value='step'>Step</option>
+          <option value='diagonal'>Diagonal</option>
+          <option value='line'>Line</option>
+        </select>
+      </div>
+
+      <div className='control-group'>
+        <label className='control-label'>Select:</label>
+        <select
+          id='selectInput'
+          name='nodeOptions'
+          onChange={(e) => setSelectedNode(e.target.value)}
+          className='control-select'
+        >
+          {nodeList.map((node) =>
+            node.children.length > 0 ? (
               <option key={node.name} value={node.name}>
                 {node.name}
               </option>
-            ),
-        )}
-      </select>
-      {/* This is the slider control for the step option */}
-      {linkType === 'step' && layout !== 'polar' && (
-        <>
-          &nbsp;&nbsp;
-          <label>Step:</label>
-          &nbsp;
+            ) : null,
+          )}
+        </select>
+      </div>
+
+      {linkType === 'step' && (
+        <div className='control-group'>
+          <label className='control-label'>Step:</label>
           <input
             onClick={(e) => e.stopPropagation()}
             type='range'
@@ -122,10 +121,13 @@ export default function LinkControls({
             step={0.1}
             onChange={(e) => setStepPercent(Number(e.target.value))}
             value={stepPercent}
-            disabled={linkType !== 'step' || layout === 'polar'}
+            disabled={linkType !== 'step'}
+            className='control-range'
           />
-        </>
+        </div>
       )}
     </div>
   );
-}
+};
+
+export default LinkControls;
diff --git a/src/app/components/StateRoute/ComponentMap/ToolTipDataDisplay.tsx b/src/app/components/StateRoute/ComponentMap/ToolTipDataDisplay.tsx
index 452eb8c12..bf19f5307 100644
--- a/src/app/components/StateRoute/ComponentMap/ToolTipDataDisplay.tsx
+++ b/src/app/components/StateRoute/ComponentMap/ToolTipDataDisplay.tsx
@@ -1,70 +1,110 @@
 import React from 'react';
 import { JSONTree } from 'react-json-tree';
 
-/*
-  Code that show's the tooltip of our JSON tree
-*/
+const ToolTipDataDisplay = ({ data }) => {
+  if (!data) return null;
 
-const colors = {
-  scheme: 'paraiso',
-  author: 'jan t. sott',
-  base00: '#2f1e2e',
-  base01: '#41323f',
-  base02: '#4f424c',
-  base03: '#776e71',
-  base04: '#8d8687',
-  base05: '#a39e9b',
-  base06: '#b9b6b0',
-  base07: '#e7e9db',
-  base08: '#ef6155',
-  base09: '#824508', //base09 is orange for booleans and numbers. This base in particular fails to match the entered color.
-  // base09: '#592bad', // alternative purple
-  base0A: '#fec418',
-  base0B: '#48b685',
-  base0C: '#5bc4bf',
-  base0D: '#06b6ef',
-  base0E: '#815ba4',
-  base0F: '#e96ba8',
-};
+  const jsonTheme = {
+    scheme: 'custom',
+    base00: 'transparent',
+    base0B: '#1f2937', // dark navy for strings
+    base0D: '#60a5fa', // Keys
+    base09: '#f59e0b', // Numbers
+    base0C: '#EF4444', // Null values
+  };
 
-const ToolTipDataDisplay = ({ containerName, dataObj }) => {
-  const printableObject = {}; // The key:value properties of printableObject will be rendered in the JSON Tree
+  // Helper function to parse stringified JSON in object values
+  const parseStringifiedValues = (obj) => {
+    if (!obj || typeof obj !== 'object') return obj;
 
-  if (!dataObj) {
-    // If state is null rather than an object, print "State: null" in tooltip
-    printableObject[containerName] = dataObj;
-  } else {
-    /*
-      Props often contain circular references. 
-      Messages from the backend must be sent as JSON objects (strings). 
-      JSON objects can't contain circular ref's, so the backend filters out problematic values by stringifying the values of object properties and ignoring any values that fail the conversion due to a circular ref. The following logic converts these values back to JS so they display clearly and are collapsible.
-    */
-    const data = {};
-    for (const key in dataObj) {
-      if (typeof dataObj[key] === 'string') {
+    const parsed = { ...obj };
+    for (const key in parsed) {
+      if (typeof parsed[key] === 'string') {
         try {
-          data[key] = JSON.parse(dataObj[key]);
-        } catch {
-          data[key] = dataObj[key];
+          // Check if the string looks like JSON
+          if (parsed[key].startsWith('{') || parsed[key].startsWith('[')) {
+            const parsedValue = JSON.parse(parsed[key]);
+            parsed[key] = parsedValue;
+          }
+        } catch (e) {
+          // If parsing fails, keep original value
+          continue;
         }
-      } else {
-        data[key] = dataObj[key];
+      } else if (typeof parsed[key] === 'object') {
+        parsed[key] = parseStringifiedValues(parsed[key]);
+      }
+    }
+    return parsed;
+  };
+
+  const formatReducerData = (reducerStates) => {
+    // Check if reducerStates exists and is an object
+    if (!reducerStates || typeof reducerStates !== 'object') {
+      return {};
+    }
+
+    // Handle both array and object formats
+    const statesArray = Array.isArray(reducerStates) ? reducerStates : Object.values(reducerStates);
+
+    return statesArray.reduce((acc, reducer) => {
+      // Add additional type checking for reducer object
+      if (reducer && typeof reducer === 'object') {
+        acc[reducer.hookName || 'Reducer'] = reducer.state;
       }
+      return acc;
+    }, {});
+  };
+
+  const renderSection = (title, content, isReducer = false) => {
+    if (
+      !content ||
+      (Array.isArray(content) && content.length === 0) ||
+      Object.keys(content).length === 0
+    ) {
+      return null;
     }
-    /*
-      Adds container name (State, Props, future different names for hooks) at top of object so everything nested in it will collapse when you click on it.
-    */
-    printableObject[containerName] = data;
-  }
+
+    // Parse any stringified JSON before displaying
+    const parsedContent = parseStringifiedValues(content);
+
+    if (isReducer && parsedContent) {
+      // Only try to format if we have valid content
+      const formattedData = formatReducerData(parsedContent);
+
+      // Check if we have any formatted data to display
+      if (Object.keys(formattedData).length === 0) {
+        return null;
+      }
+
+      return (
+        <div className='tooltip-section'>
+          {Object.entries(formattedData).map(([hookName, state]) => (
+            <div key={hookName}>
+              <div className='tooltip-section-title'>{hookName}</div>
+              <div className='tooltip-data'>
+                <JSONTree data={state} theme={jsonTheme} hideRoot shouldExpandNode={() => true} />
+              </div>
+            </div>
+          ))}
+        </div>
+      );
+    }
+
+    return (
+      <div className='tooltip-section'>
+        <div className='tooltip-section-title'>{title}</div>
+        <div className='tooltip-data'>
+          <JSONTree data={parsedContent} theme={jsonTheme} hideRoot shouldExpandNode={() => true} />
+        </div>
+      </div>
+    );
+  };
 
   return (
-    <div className='tooltipData' key={`${containerName}-data-container`}>
-      <JSONTree
-        data={printableObject} // data to be rendered, a snapshot object
-        theme={{ extend: colors, tree: () => ({ className: `tooltipData-JSONTree` }) }} // theme set to a base16 theme that has been extended to include  "className: 'json-tree'"
-        shouldExpandNodeInitially={() => true} // determines if node should be expanded when it first renders (root is expanded by default)
-        hideRoot={true} // hides the root node
-      />
+    <div className='tooltip-container'>
+      {renderSection('Props', data.componentData?.props)}
+      {renderSection('State', data.componentData?.state || data.componentData?.hooksState)}
+      {renderSection(null, data.componentData?.reducerStates, true)}
     </div>
   );
 };
diff --git a/src/app/components/StateRoute/ComponentMap/getLinkComponent.ts b/src/app/components/StateRoute/ComponentMap/getLinkComponent.ts
index 979141275..600c884fa 100644
--- a/src/app/components/StateRoute/ComponentMap/getLinkComponent.ts
+++ b/src/app/components/StateRoute/ComponentMap/getLinkComponent.ts
@@ -15,29 +15,17 @@ import {
 import { LinkComponent } from '../../../FrontendTypes';
 
 /*
-  Changes the shape of the LinkComponent based on the layout, linkType, and orientation
+  Changes the shape of the LinkComponent based on the linkType, and orientation
 */
 
 export default function getLinkComponent({
-  layout,
   linkType,
   orientation,
 }: LinkComponent): React.ComponentType<unknown> {
   let LinkComponent: React.ComponentType<unknown>;
 
-  if (layout === 'polar') {
-    // if the layout is polar, linkType can be either step, curve, line, or a plain LinkRadial.
-    if (linkType === 'step') {
-      LinkComponent = LinkRadialStep;
-    } else if (linkType === 'curve') {
-      LinkComponent = LinkRadialCurve;
-    } else if (linkType === 'line') {
-      LinkComponent = LinkRadialLine;
-    } else {
-      LinkComponent = LinkRadial;
-    }
-  } else if (orientation === 'vertical') {
-    // if the layout isn't polar and the orientation is vertical, linkType can be either step, curve, line, or a plain LinkVertical
+if (orientation === 'vertical') {
+    // if the orientation is vertical, linkType can be either step, curve, line, or a plain LinkVertical
     if (linkType === 'step') {
       LinkComponent = LinkVerticalStep;
     } else if (linkType === 'curve') {
diff --git a/src/app/components/StateRoute/ComponentMap/heatMapLegend.tsx b/src/app/components/StateRoute/ComponentMap/heatMapLegend.tsx
deleted file mode 100644
index 1440ad2a6..000000000
--- a/src/app/components/StateRoute/ComponentMap/heatMapLegend.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from "react";
-
-export default function HeatMapLegend() {
-  return (
-    <div className="heat-map-legend-container">
-        <div className="heat-level-one"></div>
-        <div className="heat-level-two"></div>
-        <div className="heat-level-three"></div>
-        <div className="heat-level-four"></div>
-    </div>
-  );
-}
\ No newline at end of file
diff --git a/src/app/components/StateRoute/History.tsx b/src/app/components/StateRoute/History.tsx
index a836fb1c4..9cfc79bf3 100644
--- a/src/app/components/StateRoute/History.tsx
+++ b/src/app/components/StateRoute/History.tsx
@@ -14,12 +14,16 @@ import { changeView, changeSlider, setCurrentTabInApp } from '../../slices/mainS
 */
 
 const defaultMargin: DefaultMargin = {
-  top: 30,
+  top: 60,
   left: 30,
   right: 55,
   bottom: 70,
 };
 
+// Fixed node separation distances
+const FIXED_NODE_HEIGHT = 150; // Vertical distance between nodes
+const FIXED_NODE_WIDTH = 200; // Horizontal distance between nodes
+
 // main function exported to StateRoute
 // below we destructure the props
 function History(props: Record<string, unknown>): JSX.Element {
@@ -36,126 +40,86 @@ function History(props: Record<string, unknown>): JSX.Element {
   const dispatch = useDispatch();
 
   const svgRef = React.useRef(null);
-  const root = JSON.parse(JSON.stringify(hierarchy)); // why do we stringify and then parse our hierarchy back to JSON? (asked 7/31/23)
+  const root = JSON.parse(JSON.stringify(hierarchy));
   // setting the margins for the Map to render in the tab window.
   const innerWidth: number = totalWidth - margin.left - margin.right;
   const innerHeight: number = totalHeight - margin.top - margin.bottom - 60;
 
-  function labelCurrentNode(d3root) {
-    // iterates through the parents of a node and applies a color property
-    if (d3root.data.index === currLocation.index) {
-      // node.data aka d3root.data allows us to access associated node data. So if node.index === currLocation.index...
-
-      let currNode = d3root; // make our input the currNode
-
-      while (currNode.parent) {
-        // while there are parent nodes
-        currNode.color = '#999'; // change or give the node a color property
-        currNode = currNode.parent; // change currNode to the parent
-      }
-
-      currNode.color = '#999'; // when there are no more parent nodes, change or give the last node a color property
-
-      return d3root; // return the modified d3root
-    }
-
-    let found;
-
-    if (!d3root.children) {
-      // if root has no children array
-      return found; // return undefined
-    }
-
-    d3root.children.forEach((child) => {
-      // for each child node within the children array
-      if (!found) {
-        // if found is undefined
-        found = labelCurrentNode(child); //
-      }
-    });
-    return found; // return's the found child node
-  }
-
   function findDiff(index) {
-    // determines the difference between our current index and the index-1 snapshot and produces an html string
     const statelessCleaning = (obj: {
-      //'statelessCleaning' functions in the same way as the 'statelessCleaning' function in Diff.tsx
       name?: string;
       componentData?: object;
       state?: string | any;
       stateSnaphot?: object;
       children?: any[];
     }) => {
-      const newObj = { ...obj }; // duplicate our input object into a new object
+      if (!obj) return {}; // Add null check
 
-      if (newObj.name === 'nameless') {
-        // if our new object's name is nameless
-        delete newObj.name; // delete the name property
-      }
-      if (newObj.componentData) {
-        // if our new object has a componentData property
-        delete newObj.componentData; // delete the componentData property
-      }
-      if (newObj.state === 'stateless') {
-        // if if our new object's state is stateless
-        delete newObj.state; // delete the state property
-      }
+      const newObj = { ...obj };
+      if (newObj.name === 'nameless') delete newObj.name;
+      if (newObj.componentData) delete newObj.componentData;
+      if (newObj.state === 'stateless') delete newObj.state;
       if (newObj.stateSnaphot) {
-        // if our new object has a stateSnaphot property
-        newObj.stateSnaphot = statelessCleaning(obj.stateSnaphot); // run statelessCleaning on the stateSnapshot
+        newObj.stateSnaphot = statelessCleaning(obj.stateSnaphot);
       }
-
       if (newObj.children) {
-        // if our new object has a children property
         newObj.children = [];
-        if (obj.children.length > 0) {
-          // and if our input object's children property is non-empty, go through each children object from our input object and determine, if the object being iterated on either has a stateless state or has a children array with a non-zero amount of objects. Objects that fulfill the above that need to be cleaned through statelessCleaning. Those that are cleaned through this process are then pushed to the new object's children array.
+        // Add null check for children array
+        if (Array.isArray(obj.children) && obj.children.length > 0) {
           obj.children.forEach((element: { state?: object | string; children?: [] }) => {
-            if (element.state !== 'stateless' || element.children.length > 0) {
+            // Add null check for element
+            if (
+              element &&
+              ((element.state && element.state !== 'stateless') ||
+                (element.children && element.children.length > 0))
+            ) {
               const clean = statelessCleaning(element);
               newObj.children.push(clean);
             }
           });
         }
       }
-      return newObj; // return the cleaned state snapshot(s)
+      return newObj;
     };
 
     function findStateChangeObj(delta, changedState = []) {
-      // function determines whether delta has resulted in a changedState. Function would return an empty array if there were no changes to state and an array of objects that changed state.
-      if (!delta.children && !delta.state) {
-        // if delta doesn't have a children property or a state property
-        return changedState; // returns an empty array
-      }
-
+      if (!delta) return changedState; // Add null check
+      if (!delta.children && !delta.state) return changedState;
       if (delta.state && delta.state[0] !== 'stateless') {
-        // ignore stateless delta objects
-        changedState.push(delta.state); // and push stateful delta objects to changedState
-      }
-
-      if (!delta.children) {
-        // if the delta doesn't have any children
-        return changedState; // return the changedState array with any and all stateful delta objects.
+        changedState.push(delta.state);
       }
-
+      if (!delta.children) return changedState;
       Object.keys(delta.children).forEach((child) => {
-        // but if the delta object did have children, we iterate through each child object
-        // if (isNaN(child) === false) {
-        changedState.push(...findStateChangeObj(delta.children[child])); // recursively call this function on each child object. Push every 'stateful' child into the changedState array.
-        // }
+        if (delta.children[child]) {
+          // Add null check
+          changedState.push(...findStateChangeObj(delta.children[child]));
+        }
       });
+      return changedState;
+    }
 
-      return changedState; // return the changedState array with any and all stateful delta objects.
+    if (index === 0) return 'Initial State';
+
+    // Add null checks for snapshots
+    if (!snapshots || !snapshots[index] || !snapshots[index - 1]) {
+      return 'No state changes';
     }
 
-    const delta = diff(
-      // 'diff' function from 'jsondiffpatch' returns the difference in state between the (snapshot that occurred before the indexed snapshot) and the (indexed snapshot).
-      statelessCleaning(snapshots[index - 1]),
-      statelessCleaning(snapshots[index]),
-    );
-    const changedState = findStateChangeObj(delta); // determines if delta had any stateful changes
-    const html = formatters.html.format(changedState[0]); // formats the difference into html string
-    return html; // return html string
+    try {
+      const delta = diff(
+        statelessCleaning(snapshots[index - 1]),
+        statelessCleaning(snapshots[index]),
+      );
+
+      if (!delta) return 'No state changes';
+
+      const changedState = findStateChangeObj(delta);
+      console.log('changed state', formatters.html.format(changedState[0]));
+      return changedState.length > 0 ? formatters.html.format(changedState[0]) : 'No state changes';
+    } catch (error) {
+      console.error('Error in findDiff:', error);
+      return 'Error comparing states';
+    }
   }
 
   /**
@@ -163,145 +127,119 @@ function History(props: Record<string, unknown>): JSX.Element {
    */
 
   const makeD3Tree = () => {
-    const svg = d3.select(svgRef.current); // d3.select Selects the first element/node that matches svgRef.current. If no element/node match returns an empty selection. If multiple elements/nodes match the selector, only the first matching element/node (in document order) will be selected.
-    svg.selectAll('*').remove(); // Selects all elements. The elements will be selected in document order (top-to-bottom). We then remove the selected elements/nodes from the DOM. This is important as to ensure that the SVG is empty before rendering the D3 based visualization to avoid interference/overlap with any previously rendered content.
-    const tree = (data) => {
-      // function that takes in data and turns it into a d3 tree.
-      const treeRoot = d3.hierarchy(data); // 'd3.hierarchy' constructs a root node from the specified hierarchical data.
-      return d3.tree().size([innerWidth, innerHeight])(treeRoot); // d3.tree creates a new tree layout with a size option of innerWidth (~line 41) and innerHeight (~line 42). We specify our new tree layout's root as 'treeRoot' which assigns an x and y property to each node to represent an [x, y] coordinate system.
-    };
+    const svg = d3.select(svgRef.current);
+    svg.selectAll('*').remove();
+
+    // Create tree layout with fixed node size
+    const treeLayout = d3
+      .tree()
+      .nodeSize([FIXED_NODE_WIDTH, FIXED_NODE_HEIGHT])
+      .separation((a, b) => {
+        // Increase separation between unrelated subtrees
+        return a.parent === b.parent ? 1.2 : 2;
+      });
 
-    const d3root = tree(root); // create a d3. tree from our root
-    const currNode = labelCurrentNode(d3root); // iterate through our nodes and apply a color property
+    // Create hierarchy and compute initial layout
+    const d3root = d3.hierarchy(root);
+    treeLayout(d3root);
+
+    // Calculate the bounds of the tree
+    let minX = Infinity;
+    let maxX = -Infinity;
+    let minY = Infinity;
+    let maxY = -Infinity;
+
+    d3root.each((d) => {
+      minX = Math.min(minX, d.x);
+      maxX = Math.max(maxX, d.x);
+      minY = Math.min(minY, d.y);
+      maxY = Math.max(maxY, d.y);
+    });
 
-    const g = svg //serves as a container for the nodes and links within the D3 Visualization of the tree
-      .append('g') // create an element 'g' on svg
-      .attr(
-        'transform',
-        `translate(${margin.left},${d3root.height === 0 ? totalHeight / 2 : margin.top})`, //Set the position of the group 'g' by translating it horizontally by 'margin.left' pixels and vertically based on the conditional expression.
-      );
+    // Calculate the actual dimensions needed
+    const actualWidth = maxX - minX + FIXED_NODE_WIDTH;
+    const actualHeight = maxY - minY + FIXED_NODE_HEIGHT;
+
+    // Set SVG dimensions to accommodate the tree
+    const svgWidth = Math.max(actualWidth + margin.left + margin.right, totalWidth);
+    svg
+      .attr('width', svgWidth)
+      .attr('height', Math.max(actualHeight + margin.top + margin.bottom, totalHeight));
+
+    // Calculate center offset to keep root centered
+    const rootOffset = -d3root.x;
+    const horizontalCenter = svgWidth / 2;
+
+    // Create container group and apply transforms
+    const g = svg
+      .append('g')
+      .attr('transform', `translate(${horizontalCenter + rootOffset},${margin.top})`);
 
-    const link = g //responsible for rendering the links or connectors between the nodes in the d3 Tree
-      .selectAll('.link') // select all elements that contain the string '.link' and return a selection
+    // Draw links
+    const link = g
+      .selectAll('.link')
       .data(d3root.descendants().slice(1))
       .enter()
       .append('path')
-      .attr('class', 'link')
-      .attr('stroke', '#161617')
-      .attr('fill', 'none')
-      .attr(
-        //defines the path attribute (d) for each link (edge) between nodes, using a Bézier curve (C) to connect the source node's coordinates (d.x, d.y) to the midpoint between the source and target nodes and then to the target node's coordinates (d.parent.x, d.parent.y)
-        'd',
-        (d) =>
-          `M${d.x},${d.y}C${d.x},${(d.y + d.parent.y) / 2} ${d.parent.x},${
-            (d.y + d.parent.y) / 2
-          } ${d.parent.x},${d.parent.y}`,
-      )
       .attr('class', (d) => {
-        // Adding a class based on the current node's data
-        if (d.data.index === currLocation.index) {
-          return 'link current-link'; // Apply both 'link' and 'current-link' classes
-        }
-        return 'link'; // Apply only the 'link' class
+        return d.data.index === currLocation.index ? 'link current-link' : 'link';
+      })
+      .attr('d', (d) => {
+        return `M${d.x},${d.y}
+                C${d.x},${(d.y + d.parent.y) / 2}
+                  ${d.parent.x},${(d.y + d.parent.y) / 2}
+                  ${d.parent.x},${d.parent.y}`;
       });
 
-    const node = g //responsible for rendering nodes in d3 visualization tree
+    // Create node groups
+    const node = g
       .selectAll('.node')
       .data(d3root.descendants())
       .enter()
       .append('g')
-      .style('cursor', 'pointer')
-      .attr('class', `snapshotNode`)
+      .attr('class', (d) => {
+        const baseClass = 'node';
+        const internalClass = d.children ? ' node--internal' : '';
+        const activeClass = d.data.index === currLocation.index ? ' active' : '';
+        return baseClass + internalClass + activeClass;
+      })
+      .attr('transform', (d) => `translate(${d.x},${d.y})`)
       .on('click', (event, d) => {
         dispatch(changeView(d.data.index));
         dispatch(changeSlider(d.data.index));
-        /*
-          created popup div and appended it to display div(returned in this function) 
-
-          D3 doesn't utilize z-index for priority, rather decides on placement by order of rendering needed to define the return div with a className to have a target to append to with the correct level of priority
-        */
-        function renderToolTip() {
-          const [x, y] = d3.pointer(event);
-          const div = d3
-            .select('.display:first-child')
-            .append('div')
-            .attr('class', `tooltip`)
-            .attr('id', `tt-${d.data.index}`)
-            .style('left', `${event.clientX - 10}px`)
-            .style('top', `${event.clientY - 10}px`)
-            .style('max-height', `25%`)
-            .style('overflow', `scroll`);
-          d3.selectAll('.tooltip').html(findDiff(d.data.index));
-        }
-
-        if (d3.selectAll('.tooltip')._groups['0'].length === 0) {
-          renderToolTip(); //if there are no tooltips left in the doc, we call the function to create a new tooltip
-        } else {
-          if (d3.selectAll(`#tt-${d.data.index}`)._groups['0'].length === 0) {
-            // if there is no tooltip with the specific id
-            d3.selectAll('.tooltip').remove(); //remove any existing tooltips
-            renderToolTip(); //call the function again to create a new tooltip
-          }
-        }
-      })
-      .on('mouseenter', function (event, d) {
-        const [x, y] = d3.pointer(event);
-        if (d3.selectAll('.tooltip')._groups['0'].length === 0) {
-          const div = d3
-            .select('.display:first-child')
-            .append('div')
-            .attr('class', `tooltip`)
-            .attr('id', `tt-${d.data.index}`)
-            .style('left', `${event.clientX + 0}px`)
-            .style('top', `${event.clientY + 0}px`)
-            .style('max-height', `25%`)
-            .style('overflow', `auto`)
-            .on('mouseenter', function (event, d) {})
-            .on('mouseleave', function (event, d) {
-              d3.selectAll('.tooltip').remove().style('display', 'hidden');
-            });
-
-          d3.selectAll('.tooltip').html(findDiff(d.data.index));
-        }
-      })
-      .on('mouseleave', function (event, d) {
-        if (event.relatedTarget.id !== `tt-${d.data.index}`) {
-          d3.selectAll('.tooltip').transition().delay(100).remove();
-        }
-      })
-
-      .attr('transform', function (d) {
-        return `translate(${d.x},${d.y})`;
-      });
-
-    const tooltip = d3
-      .select('.tooltip')
-      .on('mousemove', function (event, d) {
-        d3.select('.tooltip').style('opacity', '1');
-      })
-      .on('mouseleave', function (event, d) {
-        d3.selectAll('.tooltip').remove();
       });
 
+    // Add rectangles for nodes with consistent size
     node
-      .append('circle')
-      .attr('fill', (d) => {
-        if (d.data.index === currLocation.index) {
-          return '#284b63';
-        }
-        return d.color ? d.color : '#555';
-      })
-      .attr('r', 18);
-
+      .append('rect')
+      .attr('width', 200)
+      .attr('height', 120)
+      .attr('x', -100)
+      .attr('y', -40)
+      .attr('rx', 8)
+      .attr('ry', 8);
+
+    // Add snapshot titles
     node
       .append('text')
-      .attr('dy', '0.31em')
+      .attr('dy', '-20')
       .attr('text-anchor', 'middle')
-      .attr('fill', 'white')
-      .text((d) => `${d.data.name}.${d.data.branch}`)
-      .clone(true)
-      .lower()
-      .attr('stroke', 'white');
+      .attr('class', 'snapshot-title')
+      .text((d) => `Snapshot ${d.data.index + 1}`);
+
+    // Add state changes text
+    node
+      .append('foreignObject')
+      .attr('x', -85)
+      .attr('y', -15)
+      .attr('width', 170)
+      .attr('height', 90)
+      .append('xhtml:div')
+      .style('font-size', '12px')
+      .style('text-align', 'left')
+      .style('padding-left', '8px')
+      .html((d) => findDiff(d.data.index));
+
     return svg.node();
   };
 
diff --git a/src/app/components/StateRoute/PerformanceVisx/BarGraph.tsx b/src/app/components/StateRoute/PerformanceVisx/BarGraph.tsx
index 1b07f9223..3966b7e68 100644
--- a/src/app/components/StateRoute/PerformanceVisx/BarGraph.tsx
+++ b/src/app/components/StateRoute/PerformanceVisx/BarGraph.tsx
@@ -24,7 +24,7 @@ const margin = {
   top: 30,
   right: 30,
   bottom: 0,
-  left: 50,
+  left: 70,
 };
 const axisColor = '#161617';
 const axisTickLabelColor = '#363638';
@@ -32,11 +32,10 @@ const axisLabelColor = '#363638';
 const tooltipStyles = {
   ...defaultStyles,
   minWidth: 60,
-  //backgroundColor: 'rgba(0,0,0,0.9)', //defaults to white
-  //color: 'white', //defaults to a gray
-  fontSize: '16px',
   lineHeight: '18px',
-  fontFamily: 'Roboto',
+  pointerEvents: 'all !important',
+  padding: '8px',
+  borderRadius: '8px',
 };
 
 const BarGraph = (props: BarGraphProps): JSX.Element => {
@@ -75,7 +74,7 @@ const BarGraph = (props: BarGraphProps): JSX.Element => {
 
   const keys = Object.keys(data.componentData);
   const getSnapshotId = (d: snapshot) => d.snapshotId; // data accessor (used to generate scales) and formatter (add units for on hover box). d comes from data.barstack post filtered data
-  const formatSnapshotId = (id) => `Snapshot ID: ${id}`; // returns snapshot id when invoked in tooltip section
+  const formatSnapshotId = (id) => `ID: ${id}`; // returns snapshot id when invoked in tooltip section
   const formatRenderTime = (time) => `${time} ms `; // returns render time when invoked in tooltip section
 
   const snapshotIdScale = scaleBand<string>({
@@ -91,16 +90,16 @@ const BarGraph = (props: BarGraphProps): JSX.Element => {
   });
 
   const LMcolorScale = [
-    '#a0c1d6',
-    '#669bbc',
-    '#105377',
-    '#003049',
-    '#55a8ac',
-    '#3c6e71',
-    '#1c494b',
-    '#c1676d',
-    '#c1121f',
-    '#780000',
+    '#14b8a6', // Teal (matching existing accent)
+    '#0d9488', // Darker teal (matching existing accent)
+    '#3c6e71', // Primary strong teal
+    '#284b63', // Primary blue
+    '#2c5282', // Deeper blue
+    '#1a365d', // Navy
+    '#2d3748', // Blue gray
+    '#4a5568', // Darker blue gray
+    '#718096', // Medium blue gray
+    '#a0aec0', // Light blue gray
   ];
 
   const colorScale = scaleOrdinal<string>({
@@ -121,53 +120,11 @@ const BarGraph = (props: BarGraphProps): JSX.Element => {
     data,
   };
 
-  useEffect(() => {
-    // Animates the save series button.
-    const saveButtons = document.getElementsByClassName('save-series-button'); // finds the buttom in the DOM
-    for (let i = 0; i < saveButtons.length; i++) {
-      if (tabs[currentTab].seriesSavedStatus === 'saved') {
-        saveButtons[i].classList.add('animate');
-        saveButtons[i].innerHTML = 'Saved!';
-      } else {
-        saveButtons[i].innerHTML = 'Save Series';
-        saveButtons[i].classList.remove('animate');
-      }
-    }
-  });
-
-  const saveSeriesClickHandler = () => {
-    // function to save the currently selected series
-    if (tabs[currentTab].seriesSavedStatus === 'inputBoxOpen') {
-      const actionNames = document.getElementsByClassName('actionname');
-      for (let i = 0; i < actionNames.length; i += 1) {
-        toStorage.data.barStack[i].name = actionNames[i].value;
-      }
-      dispatch(save({ newSeries: toStorage, newSeriesName: seriesNameInput })); // saves the series under seriesName
-      setSeriesNameInput(`Series ${comparison.length}`); // sends a reducer that saves the series/toStorage object the user wants to chrome local storage
-      return;
-    }
-    //if for some reason, code doesn't hit in first conditional, we have error handling below to account it
-    dispatch(save({ newSeries: toStorage, newSeriesName: '' })); // or use a default value for newSeriesName
-  };
-
-  const textbox = // Need to change so textbox isn't empty before saving
-    tabs[currentTab].seriesSavedStatus === 'inputBoxOpen' ? (
-      <input
-        type='text'
-        id='seriesname'
-        placeholder='Enter Series Name'
-        onChange={(e) => setSeriesNameInput(e.target.value)}
-      />
-    ) : null;
   return (
     <div className='bargraph-position'>
       <div className='saveSeriesContainer'>
-        {textbox}
-        <button type='button' className='save-series-button' onClick={saveSeriesClickHandler}>
-          Save Series
-        </button>
         <form className='routesForm' id='routes-formcontrol'>
-          <label id='routes-dropdown'>Select Route: </label>
+          <label id='routes-dropdown'>Route: </label>
           <select
             className='performance-dropdown'
             labelId='demo-simple-select-label'
@@ -181,20 +138,24 @@ const BarGraph = (props: BarGraphProps): JSX.Element => {
           >
             <option>All Routes</option>
             {allRoutes.map((route) => (
-              <option className='routes'>{route}</option>
+              <option key={route} className='routes'>
+                {route}
+              </option>
             ))}
           </select>
         </form>
         <form className='routesForm' id='routes-formcontrol'>
-          <label id='routes-dropdown'>Select Snapshot: </label>
+          <label id='routes-dropdown'>Snapshot: </label>
           <select
-            labelid='demo-simple-select-label'
+            labelId='demo-simple-select-label'
             id='snapshot-select'
             onChange={(e) => setSnapshot(e.target.value)}
           >
             <option value='All Snapshots'>All Snapshots</option>
             {filteredSnapshots.map((route) => (
-              <option className='routes'>{route.snapshotId}</option>
+              <option key={route.snapshotId} className='routes'>
+                {route.snapshotId}
+              </option>
             ))}
           </select>
         </form>
@@ -299,17 +260,18 @@ const BarGraph = (props: BarGraphProps): JSX.Element => {
             fontSize: 11,
             textAnchor: 'middle',
           })}
+          tickFormat={() => ''} // Add this line to hide tick labels
         />
-        <Text x={-yMax / 2 - 75} y='15' transform='rotate(-90)' fontSize={16} fill={axisLabelColor}>
+        <Text x={-yMax / 2 - 75} y='30' transform='rotate(-90)' fontSize={16} fill={axisLabelColor}>
           Rendering Time (ms)
         </Text>
         <br />
         {snapshot === 'All Snapshots' ? (
-          <Text x={xMax / 2 + 15} y={yMax + 70} fontSize={16} fill={axisLabelColor}>
+          <Text x={xMax / 2 + 15} y={yMax + 62} fontSize={16} fill={axisLabelColor}>
             Snapshot ID
           </Text>
         ) : (
-          <Text x={xMax / 2 + 15} y={yMax + 70} fontSize={16} fill={axisLabelColor}>
+          <Text x={xMax / 2 + 15} y={yMax + 62} fontSize={16} fill={axisLabelColor}>
             Components
           </Text>
         )}
@@ -324,11 +286,15 @@ const BarGraph = (props: BarGraphProps): JSX.Element => {
             left={tooltipLeft}
             style={tooltipStyles}
           >
-            <div style={{ color: colorScale(tooltipData.key) }}>
+            <div
+              style={{
+                color: colorScale(tooltipData.key),
+                paddingBottom: '8px',
+              }}
+            >
               {' '}
               <strong>{tooltipData.key}</strong>{' '}
             </div>
-            <div>{'State: ' + data.componentData[tooltipData.key].stateType}</div>
             <div> {'Render time: ' + formatRenderTime(tooltipData.bar.data[tooltipData.key])} </div>
             <div>
               {' '}
diff --git a/src/app/components/StateRoute/PerformanceVisx/BarGraphComparison.tsx b/src/app/components/StateRoute/PerformanceVisx/BarGraphComparison.tsx
deleted file mode 100644
index 82b8ce6c5..000000000
--- a/src/app/components/StateRoute/PerformanceVisx/BarGraphComparison.tsx
+++ /dev/null
@@ -1,485 +0,0 @@
-// @ts-nocheck
-/// <reference lib="dom" />
-/* eslint-disable no-param-reassign */
-import React, { useEffect, useState } from 'react';
-import { BarStack } from '@visx/shape';
-import { Group } from '@visx/group';
-import { Grid } from '@visx/grid';
-import { AxisBottom, AxisLeft } from '@visx/axis';
-import { scaleBand, scaleLinear, scaleOrdinal } from '@visx/scale';
-import { useTooltip, useTooltipInPortal, defaultStyles } from '@visx/tooltip';
-import { Text } from '@visx/text';
-import { schemeTableau10 } from 'd3-scale-chromatic';
-import Select from '@mui/material/Select';
-import MenuItem from '@mui/material/MenuItem';
-import FormControl from '@mui/material/FormControl';
-import { useTheme } from '@mui/material/styles';
-import { Button, InputLabel } from '@mui/material';
-import { onHover, onHoverExit, deleteSeries, setCurrentTabInApp } from '../../../slices/mainSlice';
-import { useSelector, useDispatch } from 'react-redux';
-import {
-  snapshot,
-  TooltipData,
-  Margin,
-  BarGraphComparisonProps,
-  ActionObj,
-  Series,
-} from '../../../FrontendTypes';
-
-/* DEFAULTS */
-const margin: Margin = {
-  top: 30,
-  right: 30,
-  bottom: 0,
-  left: 50,
-};
-const axisColor = '#161617';
-const axisTickLabelColor = '#363638';
-const axisLabelColor = '#363638';
-const background = '#ffffff';
-const tooltipStyles = {
-  ...defaultStyles,
-  minWidth: 60,
-  // backgroundColor: 'rgba(0,0,0,0.9)', //defaults to white
-  // color: 'white', //defaults to gray
-  fontSize: '14px',
-  lineHeight: '18px',
-  fontFamily: 'Roboto',
-};
-
-const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
-  const dispatch = useDispatch();
-  const tabs = useSelector((state) => state.main.tabs);
-  const currentTab = useSelector((state) => state.main.currentTab);
-
-  const {
-    width, // from ParentSize provided in StateRoute
-    height, // from ParentSize provided in StateRoute
-    data, // Acquired from getPerfMetrics(snapshots, getSnapshotIds(hierarchy)) in 'PerformanceVisx'
-    comparison, // result from invoking 'allStorage' in 'PerformanceVisx'
-    setSeries, // setter function to update the state located in 'PerfomanceVisx'
-    series, // initialized as boolean, can be an object, from state set in 'PerformanceVisx'
-    setAction, // setter function to update the state located in 'PerfomanceVisx'
-  } = props;
-  const [snapshots] = useState(0); // creates a local state snapshots and sets it to a value of 0 (why is there no setter function? Also, why use state when it's only referenced once and never changed? 08/03/2023)
-  const [open, setOpen] = useState(false); // creates a local state setOpen and sets it to false (why is there no setter function? 08/03/2023)
-  const [picOpen, setPicOpen] = useState(false); // creates a local state setPicOpen and sets it to false (why is there no setter function? 08/03/2023)
-  const [buttonLoad, setButtonLoad] = useState(false); //tracking whether or not the clear series button is clicked
-  const theme = useTheme(); // MUI hook that allows access to theme variables inside your functional React components
-
-  useEffect(() => {
-    dispatch(setCurrentTabInApp('performance-comparison')); // dispatch sent at initial page load allowing changing "immer's" draft.currentTabInApp to 'performance-comparison' to facilitate render.
-  }, [dispatch]);
-
-  const currentIndex: number = tabs[currentTab].sliderIndex;
-
-  const {
-    tooltipData, // value/data that tooltip may need to render
-    tooltipLeft, // number used for tooltip positioning
-    tooltipTop, // number used for tooltip positioning
-    tooltipOpen, // boolean whether the tooltip state is open or closed
-    showTooltip, // function to set tooltip state
-    hideTooltip, // function to close a tooltip
-  } = useTooltip<TooltipData>(); // returns an object with several properties that you can use to manage the tooltip state of your component
-  let tooltipTimeout: number;
-
-  const {
-    containerRef, // Access to the container's bounding box. This will be empty on first render.
-    TooltipInPortal, // Visx component that renders Tooltip or TooltipWithBounds in a Portal, outside of your component DOM tree
-  } = useTooltipInPortal();
-
-  const keys: string[] = Object.keys(data.componentData);
-
-  // data accessor (used to generate scales) and formatter (add units for on hover box)
-  const getSnapshotId = (d: snapshot) => d.snapshotId;
-  const formatSnapshotId = (id: string): string => `Snapshot ID: ${id}`;
-  const formatRenderTime = (time: string): string => `${time} ms`;
-  const getCurrentTab = (storedSeries: ActionObj) => storedSeries.currentTab;
-
-  // create visualization SCALES with cleaned data
-  const xAxisPoints: string[] = ['currentTab', 'comparison'];
-  const snapshotIdScale = scaleBand<string>({
-    domain: xAxisPoints, // the domain array/xAxisPoints elements will place the bars along the x-axis
-    padding: 0.2,
-  });
-
-  const calculateMaxTotalRender = (serie: number): number => {
-    // This function will iterate through the snapshots of the series, and grab the highest render times (sum of all component times). We'll then use it in the renderingScale function and compare with the render time of the current tab. The max render time will determine the Y-axis's highest number.
-    const currentSeriesBarStacks: ActionObj[] = !comparison[serie]
-      ? []
-      : comparison[serie].data.barStack;
-    if (currentSeriesBarStacks.length === 0) return 0;
-
-    let currentMax = -Infinity;
-
-    for (let i = 0; i < currentSeriesBarStacks.length; i += 1) {
-      const renderTimes: number[] = Object.values(currentSeriesBarStacks[i]).slice(1);
-      const renderTotal: number = renderTimes.reduce((acc, curr) => acc + curr);
-
-      if (renderTotal > currentMax) currentMax = renderTotal;
-    }
-    return currentMax;
-  };
-
-  const renderingScale = scaleLinear<number>({
-    // this function will use the domain array to assign each key a different color to make rectangle boxes and use range to set the color scheme each bar
-    domain: [0, Math.max(calculateMaxTotalRender(series), data.maxTotalRender)], // [minY, maxY] the domain array on rendering scale will set the coordinates for Y-axis points.
-    nice: true,
-  });
-
-  const LMcolorScale = ['#a0c1d6','#669bbc','#105377','#003049','#55a8ac','#3c6e71','#1c494b','#c1676d','#c1121f','#780000']
-  const colorScale = scaleOrdinal<string, string>({
-    domain: keys, // the domain array will assign each key a different color to make rectangle boxes
-    range: LMcolorScale, // and use range to set the color scheme each bar
-  });
-
-  // setting max dimensions and scale ranges
-  const xMax = width - margin.left - margin.right;
-  const yMax = height - margin.top - 200;
-  snapshotIdScale.rangeRound([0, xMax]);
-  renderingScale.range([yMax, 0]);
-
-  const handleSeriesChange = (event: Event) => {
-    if (!event) {
-      return;
-    }
-    const target = event.target as HTMLInputElement;
-    if (target) {
-      setSeries(target.value);
-      setAction(false);
-    }
-  };
-
-  const handleClose = () => {
-    setOpen(false);
-  };
-
-  const handleOpen = () => {
-    setOpen(true);
-  };
-
-  const handleActionChange = (event: Event) => {
-    const target = event.target as HTMLInputElement;
-    if (!target.value) return;
-    if (target) {
-      setAction(target.value);
-      setSeries(false);
-    }
-  };
-
-  const picHandleClose = () => {
-    setPicOpen(false);
-  };
-
-  const picHandleOpen = () => {
-    setPicOpen(true);
-  };
-
-  function setXpointsComparison() {
-    // manually assigning X -axis points with tab ID.
-    comparison[series].data.barStack.forEach((elem: ActionObj) => {
-      elem.currentTab = 'comparison';
-    });
-    return comparison[series].data.barStack;
-  }
-
-  function setXpointsCurrentTab() {
-    data.barStack.forEach((element) => {
-      element.currentTab = 'currentTab';
-    });
-    return data.barStack;
-  }
-
-  const seriesList: ActionObj[][] = comparison.map((action: Series) => action.data.barStack);
-  const actionsList: ActionObj[] = seriesList.flat();
-  const testList: string[] = actionsList.map((elem: ActionObj) => elem.name);
-
-  const finalList = [];
-  for (let i = 0; i < testList.length; i += 1) {
-    if (testList[i] !== '' && !finalList.includes(testList[i])) finalList.push(testList[i]);
-  }
-
-  return (
-    <div>
-      <div className='series-options-container'>
-        <div className='dropdown-and-delete-series-container'>
-          {/*'Clear Series' MUI button that clears any saved series*/}
-          <Button
-            //className='delete-button'
-            variant='contained'
-            sx={{ p: 2, color: 'white' }}
-            onClick={() => {
-              setButtonLoad(true);
-              dispatch(deleteSeries());
-              setTimeout(() => {
-                setButtonLoad(false);
-              }, 1000);
-            }}
-            style={
-              buttonLoad
-                ? { backgroundColor: '#62d6fb' }
-                : { backgroundColor: '#ff6569', color: 'black' }
-            }
-          >
-            {buttonLoad ? 'Deleted' : 'Clear All Series'}
-          </Button>
-
-          <FormControl sx={{ m: 1, minWidth: 180 }} size='small'>
-            <InputLabel
-              id='simple-select-outlined-label'
-              sx={{ color: '#161617', p: 2, fontSize: '16px' }}
-            >
-              COMPARE SERIES
-            </InputLabel>
-            <Select
-              variant='filled'
-              labelId='simple-select-outlined-label'
-              id='simple-select-outlined-label'
-              value={series}
-              label='Compare Series'
-              onClose={handleClose}
-              onOpen={handleOpen}
-              onChange={handleSeriesChange}
-              sx={{
-                backgroundColor: '#d9d9d9',
-                color: 'white',
-                height: 34,
-                fontWeight: 400,
-                pt: 0,
-                pb: 0,
-              }}
-            >
-              {!comparison.length ? (
-                <MenuItem>No series available</MenuItem>
-              ) : (
-                [
-                  <MenuItem>None</MenuItem>,
-                  ...comparison.map((tabElem, index) => (
-                    <MenuItem key={`MenuItem${tabElem.name}`} value={index}>
-                      {tabElem.name}
-                    </MenuItem>
-                  )),
-                ]
-              )}
-            </Select>
-          </FormControl>
-          {/* Mui 'Compare Series Dropdown ENDS here */}
-
-          {/*==============================================================================================================================*/}
-          {/*commented the below portion out, as bargraphComparisonActions.tsx is not currently functional, can re implement later on */}
-          {/*==============================================================================================================================*/}
-
-          {/* {   <h4 style={{ padding: '0 1rem' }}>Compare Actions </h4>
-          <StyledFormControl variant='filled'>
-            {' '}
-            {/* MUI styled 'FormControl' component */}
-          {/* <InputLabel
-              id='snapshot-select-label'
-              sx={{ fontSize: '1.2rem' }}
-              style={{ color: 'white' }}
-            >
-              Compare Actions
-            </InputLabel>
-            <StyledSelect // MUI styled 'Select' component
-              labelId='snapshot-select-label'
-              id='snapshot-select-label'
-              open={picOpen}
-              onClose={picHandleClose}
-              onOpen={picHandleOpen}
-              value={action} // snapshots
-              onChange={handleActionChange}
-            >
-              {!comparison[snapshots] ? (
-                <MenuItem>No snapshots available</MenuItem>
-              ) : (
-                finalList.map((elem) => <MenuItem value={elem}>{elem}</MenuItem>)
-              )}
-            </StyledSelect>
-          </StyledFormControl>
-          */}
-          {/*==============================================================================================================================*/}
-          {/*==============================================================================================================================*/}
-        </div>
-      </div>
-
-      <svg ref={containerRef} width={width} height={height}>
-        <rect x={0} y={0} width={width} height={height} fill={background} rx={14} />
-        <Grid
-          top={margin.top}
-          left={margin.left}
-          xScale={snapshotIdScale}
-          yScale={renderingScale}
-          width={xMax}
-          height={yMax}
-          stroke='black'
-          strokeOpacity={0.1}
-          xOffset={snapshotIdScale.bandwidth() / 2}
-        />
-        <Group top={margin.top} left={margin.left}>
-          <BarStack // Current Tab bar stack.
-            data={setXpointsCurrentTab()} // array of data that generates a stack
-            keys={keys} // array of keys corresponding to stack layers
-            x={getCurrentTab} // returns the value mapped to the x of a bar
-            xScale={snapshotIdScale} // takes in a value and maps it to an x axis position
-            yScale={renderingScale} // takes in a value and maps it to an y axis position
-            color={colorScale} // returns the desired color for a bar with a given key and index
-          >
-            {(
-              barStacks, // overides render function which is past the configured stack generator
-            ) =>
-              barStacks.map((barStack, idx) => {
-                // Uses map method to iterate through all components, creating a rect component, from visx, for each iteration. height, width, etc are calculated by visx to set X and Y scale. The scaler will used the passed in function and will run it on the array thats outputted by data
-                const bar = barStack.bars[currentIndex];
-                if (Number.isNaN(bar.bar[1]) || bar.height < 0) {
-                  bar.height = 0;
-                }
-                return (
-                  <rect
-                    key={`bar-stack-${idx}-NewView`}
-                    x={bar.x}
-                    y={bar.y}
-                    height={bar.height === 0 ? null : bar.height}
-                    width={bar.width}
-                    fill={bar.color}
-                    /* TIP TOOL EVENT HANDLERS */
-                    // Hides tool tip once cursor moves off the current rect
-                    onMouseLeave={() => {
-                      // Hides tool tip once cursor moves off the current rect
-                      dispatch(
-                        onHoverExit(data.componentData[bar.key].rtid),
-                        (tooltipTimeout = window.setTimeout(() => {
-                          hideTooltip();
-                        }, 300)),
-                      );
-                    }}
-                    // Cursor position in window updates position of the tool tip
-                    onMouseMove={(event) => {
-                      // Cursor position in window updates position of the tool tip
-                      dispatch(onHover(data.componentData[bar.key].rtid));
-                      if (tooltipTimeout) clearTimeout(tooltipTimeout);
-                      const top = event.clientY - margin.top - bar.height;
-                      const left = bar.x + bar.width / 2;
-                      showTooltip({
-                        tooltipData: bar,
-                        tooltipTop: top,
-                        tooltipLeft: left,
-                      });
-                    }}
-                  />
-                );
-              })
-            }
-          </BarStack>
-          <BarStack
-            data={!comparison[series] ? [] : setXpointsComparison()} // Comparison Barstack (populates based on series selected) to set X and Y scale, it  will used the passed in function and will run it on the array thats outputted by data. setXpointsComparison() iterates through each ActionObj in comparison[series].data.barStack, assigns a currentTab = 'comparison property, and returns the modified comparison[series].data.barStack if comparison[series] does not exist
-            keys={keys}
-            x={getCurrentTab}
-            xScale={snapshotIdScale}
-            yScale={renderingScale}
-            color={colorScale}
-          >
-            {(barStacks) =>
-              barStacks.map((barStack, idx) => {
-                // Uses map method to iterate through all components, creating a react component (from visx) for each iteration. height/width/etc. are calculated by visx.
-                if (!barStack.bars[currentIndex]) {
-                  return <h1>No Comparison</h1>;
-                }
-                const bar = barStack.bars[currentIndex];
-                if (Number.isNaN(bar.bar[1]) || bar.height < 0) {
-                  bar.height = 0;
-                }
-                return (
-                  <rect
-                    key={`bar-stack-${idx}-${bar.index}`}
-                    x={bar.x}
-                    y={bar.y}
-                    height={bar.height === 0 ? null : bar.height}
-                    width={bar.width}
-                    fill={bar.color}
-                    /* TIP TOOL EVENT HANDLERS */
-                    onMouseLeave={() => {
-                      // Hides tool tip once cursor moves off the current rect
-                      dispatch(
-                        onHoverExit(data.componentData[bar.key].rtid),
-                        (tooltipTimeout = window.setTimeout(() => {
-                          hideTooltip();
-                        }, 300)),
-                      );
-                    }}
-                    onMouseMove={(event) => {
-                      // Cursor position in window updates position of the tool tip
-                      dispatch(onHover(data.componentData[bar.key].rtid));
-                      if (tooltipTimeout) clearTimeout(tooltipTimeout);
-                      const top = event.clientY - margin.top - bar.height;
-                      const left = bar.x + bar.width / 2;
-                      showTooltip({
-                        tooltipData: bar,
-                        tooltipTop: top,
-                        tooltipLeft: left,
-                      });
-                    }}
-                  />
-                );
-              })
-            }
-          </BarStack>
-        </Group>
-        <AxisLeft
-          top={margin.top}
-          left={margin.left}
-          scale={renderingScale}
-          stroke={axisColor}
-          tickStroke={axisColor}
-          strokeWidth={2}
-          tickLabelProps={() => ({
-            fill: axisTickLabelColor,
-            fontSize: 11,
-            verticalAnchor: 'middle',
-            textAnchor: 'end',
-          })}
-        />
-        <AxisBottom
-          top={yMax + margin.top}
-          left={margin.left}
-          scale={snapshotIdScale}
-          stroke={axisColor}
-          tickStroke={axisColor}
-          strokeWidth={2}
-          tickLabelProps={() => ({
-            fill: axisTickLabelColor,
-            fontSize: 11,
-            textAnchor: 'middle',
-          })}
-        />
-        <Text x={-xMax / 2} y='15' transform='rotate(-90)' fontSize={12} fill={axisLabelColor}>
-          Rendering Time (ms)
-        </Text>
-        <Text x={xMax / 2} y={yMax + 65} fontSize={12} fill={axisLabelColor}>
-          Series ID
-        </Text>
-      </svg>
-      {/* FOR HOVER OVER DISPLAY */}
-      {tooltipOpen && tooltipData && (
-        <TooltipInPortal
-          key={Math.random()} // update tooltip bounds each render
-          top={tooltipTop}
-          left={tooltipLeft}
-          style={tooltipStyles}
-        >
-          <div style={{ color: colorScale(tooltipData.key) }}>
-            {' '}
-            <strong>{tooltipData.key}</strong>{' '}
-          </div>
-          <div>{'State: ' + data.componentData[tooltipData.key].stateType}</div>
-          <div>{'Render time: ' + formatRenderTime(tooltipData.bar.data[tooltipData.key])}</div>
-          <div>
-            {' '}
-            <small>{formatSnapshotId(getSnapshotId(tooltipData.bar.data))}</small>
-          </div>
-        </TooltipInPortal>
-      )}
-    </div>
-  );
-};
-
-export default BarGraphComparison;
diff --git a/src/app/components/StateRoute/PerformanceVisx/BarGraphComparisonActions.tsx b/src/app/components/StateRoute/PerformanceVisx/BarGraphComparisonActions.tsx
deleted file mode 100644
index 837e4ba03..000000000
--- a/src/app/components/StateRoute/PerformanceVisx/BarGraphComparisonActions.tsx
+++ /dev/null
@@ -1,332 +0,0 @@
-// @ts-nocheck
-import React, { useEffect, useState } from 'react';
-import { BarStack } from '@visx/shape';
-import { Group } from '@visx/group';
-import { Grid } from '@visx/grid';
-import { AxisBottom, AxisLeft } from '@visx/axis';
-import { scaleBand, scaleLinear, scaleOrdinal } from '@visx/scale';
-import { useTooltip, useTooltipInPortal, defaultStyles } from '@visx/tooltip';
-import { Text } from '@visx/text';
-import { schemeSet3 } from 'd3-scale-chromatic';
-import { styled } from '@mui/system';
-import Select from '@mui/material/Select';
-import MenuItem from '@mui/material/MenuItem';
-import FormControl from '@mui/material/FormControl';
-import { useTheme } from '@mui/material/styles';
-import { Button } from '@mui/material';
-import { deleteSeries, setCurrentTabInApp } from '../../../slices/mainSlice';
-import { useDispatch } from 'react-redux';
-import { TooltipData, Margin, BarGraphComparisonAction, ActionObj } from '../../../FrontendTypes';
-
-/* DEFAULTS */
-const margin: Margin = {
-  top: 30,
-  right: 30,
-  bottom: 0,
-  left: 50,
-};
-const axisColor = '#ff0000'; //#62d6fb
-const background = '#242529';
-const tooltipStyles = {
-  ...defaultStyles,
-  minWidth: 60,
-  backgroundColor: 'rgba(0,0,0,0.9)',
-  color: 'white',
-  fontSize: '14px',
-  lineHeight: '18px',
-  fontFamily: 'Roboto',
-};
-
-const BarGraphComparisonActions = (props: BarGraphComparisonAction) => {
-  const dispatch = useDispatch();
-  const {
-    width, // from ParentSize provided in StateRoute
-    height, // from ParentSize provided in StateRoute
-    data,
-    comparison, // returned value from invoking 'allStorage()' in 'PerformanceVisx' which is an array of objects
-    setSeries, // setter function to update the state located in 'PerfomanceVisx'
-    series, // boolean from state set in 'PerformanceVisx'
-    setAction, // setter function to update the state located in 'PerfomanceVisx'
-    action, // boolean from state set in 'PerformanceVisx'
-  } = props;
-  const [snapshots] = React.useState(0); // creates a local state snapshots and sets it to a value of 0 (why is there no setter function? 08/03/2023)
-  const [setOpen] = React.useState(false); // creates a local state setOpen and sets it to false (why is there no setter function? Also this is never used in this file... 08/03/2023)
-  const [setPicOpen] = React.useState(false); // creates a local state setPicOpen and sets it to false (why is there no setter function? Also this is never used in this file... 08/03/2023)
-
-  useEffect(() => {
-    // send dispatch only on initial page load
-    dispatch(setCurrentTabInApp('performance-comparison')); // dispatch sent at initial page load allowing changing "immer's" draft.currentTabInApp to 'performance-comparison' to facilitate render.
-  }, []);
-
-  const {
-    tooltipOpen, // boolean whether the tooltip state is open or closed
-    tooltipLeft, // number used for tooltip positioning
-    tooltipTop, // number used for tooltip positioning
-    tooltipData, // value/data that tooltip may need to render
-    hideTooltip, // function to close a tooltip
-    showTooltip, // function to set tooltip state
-  } = useTooltip<TooltipData>(); // returns an object with several properties that you can use to manage the tooltip state of your component
-  let tooltipTimeout: number;
-
-  const {
-    containerRef, // Access to the container's bounding box. This will be empty on first render.
-    TooltipInPortal, // TooltipWithBounds in a Portal, outside of your component DOM tree
-  } = useTooltipInPortal(); // Visx hook
-
-  const keys = Object.keys(data[0]).filter(
-    (componentName) =>
-      componentName !== 'name' && componentName !== 'seriesName' && componentName !== 'snapshotId',
-  );
-
-  const getSeriesName = (action: ActionObj): string => action.seriesName; // data accessor (used to generate scales) and formatter (add units for on hover box)
-  const seriesNameScale = scaleBand<string>({
-    // create visualization SCALES with cleaned data.
-    domain: data.map(getSeriesName), // the domain array/xAxisPoints elements will place the bars along the x-axis
-    padding: 0.2,
-  });
-
-  const calculateMaxTotalRender = () => {
-    // This function will iterate through the snapshots of the series, and grab the highest render times (the sum of all component times). We'll then use it in the renderingScale function and compare with the render time of the current tab. The max render time will determine the Y-axis's highest number.
-    let currentMax = -Infinity;
-    for (let i = 0; i < data.length; i += 1) {
-      let currentSum = 0;
-      for (const key of keys) if (data[i][key]) currentSum += data[i][key];
-      if (currentSum > currentMax) currentMax = currentSum;
-    }
-    return currentMax;
-  };
-
-  // the domain array on rendering scale will set the coordinates for Y-aix points.
-  const renderingScale = scaleLinear<number>({
-    domain: [0, calculateMaxTotalRender()], // [minY, maxY] the domain array on rendering scale will set the coordinates for Y-axis points.
-    nice: true, // boolean on whether to round extreme values
-  });
-
-  const colorScale = scaleOrdinal<string>({
-    // the domain array will assign each key a different color to make rectangle boxes and use range to set the color scheme each bar
-    domain: keys,
-    range: schemeSet3,
-  });
-
-  // setting max dimensions and scale ranges
-  const xMax = width - margin.left - margin.right;
-  const yMax = height - margin.top - 200;
-  seriesNameScale.rangeRound([0, xMax]);
-  renderingScale.range([yMax, 0]);
-
-  const StyledFormControl = styled(FormControl)(({ theme }) => ({
-    margin: theme.spacing(1),
-    minWidth: 80,
-    height: 30,
-  }));
-
-  const StyledSelect = styled(Select)({
-    minWidth: 80,
-    fontSize: '.75rem',
-    fontWeight: 200,
-    height: 30,
-  });
-
-  const handleSeriesChange = (event) => {
-    if (!event) return;
-    setSeries(event.target.value);
-    setAction(false);
-  };
-
-  const handleActionChange = (event) => {
-    if (!event) return;
-    setAction(event.target.value);
-    setSeries(false);
-  };
-
-  const seriesList = comparison.map((elem) => elem.data.barStack);
-  const actionsList = seriesList.flat();
-  const testList = actionsList.map((elem) => elem.name);
-
-  const finalList = [];
-  for (let i = 0; i < testList.length; i += 1) {
-    if (testList[i] !== '' && !finalList.includes(testList[i])) finalList.push(testList[i]);
-  }
-
-  return (
-    <div>
-      <div className='series-options-container'>
-        <div className='dropdown-and-delete-series-container'>
-          <Button
-            variant='contained'
-            sx={{ p: 2, color: 'white' }}
-            className='delete-button'
-            onClick={() => {
-              setButtonLoad(true);
-              setAction(false);
-              setSeries(true);
-              dispatch(deleteSeries());
-              setTimeout(() => {
-                setButtonLoad(false);
-              }, 1000);
-            }}
-            style={
-              buttonLoad
-                ? { backgroundColor: theme.palette.primary.main }
-                : { backgroundColor: theme.palette.secondary.main }
-            }
-          >
-            {buttonLoad ? 'Deleted' : 'Clear Series'}
-          </Button>
-          <h4 style={{ padding: '0 1rem' }}>Compare Series: </h4>
-          <StyledFormControl variant='outlined'>
-            <StyledSelect
-              style={{ color: 'white' }}
-              labelId='simple-select-outlined-label'
-              id='simple-select-outlined'
-              value={series}
-              onChange={handleSeriesChange}
-            >
-              {!comparison.length ? (
-                <MenuItem>No series available</MenuItem>
-              ) : (
-                comparison.map((tabElem, index) => (
-                  <MenuItem key={`MenuItem${tabElem.name}`} value={index}>
-                    {tabElem.name}
-                  </MenuItem>
-                ))
-              )}
-            </StyledSelect>
-          </StyledFormControl>
-          <h4 style={{ padding: '0 1rem' }}>Compare Actions </h4>
-          <StyledFormControl variant='outlined'>
-            <StyledSelect
-              style={{ color: 'white' }}
-              labelId='snapshot-select'
-              id='snapshot-select'
-              value={action} // snapshots
-              onChange={handleActionChange}
-            >
-              {!comparison[snapshots] ? (
-                <MenuItem>No snapshots available</MenuItem>
-              ) : (
-                finalList.map((elem) => (
-                  <MenuItem key={`MenuItem${elem}`} value={elem}>
-                    {elem}
-                  </MenuItem>
-                ))
-              )}
-            </StyledSelect>
-          </StyledFormControl>
-        </div>
-      </div>
-
-      <svg ref={containerRef} width={width} height={height}>
-        <rect x={0} y={0} width={width} height={height} fill={background} rx={14} />
-        <Grid
-          top={margin.top}
-          left={margin.left}
-          xScale={seriesNameScale}
-          yScale={renderingScale}
-          width={xMax}
-          height={yMax}
-          stroke='black'
-          strokeOpacity={0.1}
-          xOffset={seriesNameScale.bandwidth() / 2}
-        />
-        <Group top={margin.top} left={margin.left}>
-          <BarStack
-            data={data}
-            keys={keys}
-            x={getSeriesName}
-            xScale={seriesNameScale}
-            yScale={renderingScale}
-            color={colorScale}
-          >
-            {(barStacks) =>
-              barStacks.map((barStack) =>
-                barStack.bars.map((bar) => (
-                  <rect
-                    key={`bar-stack-${bar.bar.data.seriesName}-${bar.key}`}
-                    x={bar.x}
-                    y={bar.y}
-                    height={bar.height === 0 ? null : bar.height}
-                    width={bar.width}
-                    fill={bar.color}
-                    /* TIP TOOL EVENT HANDLERS */
-                    // Hides tool tip once cursor moves off the current rect.
-                    onMouseLeave={() => {
-                      tooltipTimeout = window.setTimeout(() => {
-                        hideTooltip();
-                      }, 300);
-                    }}
-                    // Cursor position in window updates position of the tool tip.
-                    onMouseMove={(event) => {
-                      if (tooltipTimeout) clearTimeout(tooltipTimeout);
-                      const top = event.clientY - margin.top - bar.height;
-                      const left = bar.x + bar.width / 2;
-                      showTooltip({
-                        tooltipData: bar,
-                        tooltipTop: top,
-                        tooltipLeft: left,
-                      });
-                    }}
-                  />
-                )),
-              )
-            }
-          </BarStack>
-          {/* Insert Action Comparison Barstack here */}
-        </Group>
-        <AxisLeft
-          //className="perf-axis"
-          top={margin.top}
-          left={margin.left}
-          scale={renderingScale}
-          stroke={axisColor}
-          tickStroke={axisColor}
-          strokeWidth={2}
-          tickLabelProps={() => ({
-            fill: 'rgb(231, 231, 231)',
-            fontSize: 11,
-            verticalAnchor: 'middle',
-            textAnchor: 'end',
-          })}
-        />
-        <AxisBottom
-          top={yMax + margin.top}
-          left={margin.left}
-          scale={seriesNameScale}
-          stroke={axisColor}
-          tickStroke={axisColor}
-          strokeWidth={2}
-          tickLabelProps={() => ({
-            fill: 'rgb(231, 231, 231)',
-            fontSize: 11,
-            textAnchor: 'middle',
-          })}
-        />
-        <Text x={-xMax / 2} y='15' transform='rotate(-90)' fontSize={12} fill='#FFFFFF'>
-          Rendering Time (ms)
-        </Text>
-        <Text x={xMax / 2} y={yMax + 65} fontSize={12} fill='#FFFFFF'>
-          Series Name
-        </Text>
-      </svg>
-      {/* FOR HOVER OVER DISPLAY */}
-      {tooltipOpen && tooltipData && (
-        <TooltipInPortal
-          key={Math.random()} // update tooltip bounds each render
-          top={tooltipTop}
-          left={tooltipLeft}
-          style={tooltipStyles}
-        >
-          <div style={{ color: colorScale(tooltipData.key) }}>
-            <strong>{tooltipData.key}</strong>
-          </div>
-          <div>{`${tooltipData.bar.data[tooltipData.key]} ms`}</div>
-          <div>
-            <small>{tooltipData.bar.data.seriesName}</small>
-          </div>
-        </TooltipInPortal>
-      )}
-    </div>
-  );
-};
-
-export default BarGraphComparisonActions;
diff --git a/src/app/components/StateRoute/PerformanceVisx/PerformanceVisx.tsx b/src/app/components/StateRoute/PerformanceVisx/PerformanceVisx.tsx
index 24ffbe82f..e13f649e7 100644
--- a/src/app/components/StateRoute/PerformanceVisx/PerformanceVisx.tsx
+++ b/src/app/components/StateRoute/PerformanceVisx/PerformanceVisx.tsx
@@ -4,10 +4,7 @@
 /* eslint-disable max-len */
 import React, { useState, useEffect } from 'react';
 import { MemoryRouter as Router, Route, NavLink, Routes, Navigate } from 'react-router-dom';
-import RenderingFrequency from './RenderingFrequency';
 import BarGraph from './BarGraph';
-import BarGraphComparison from './BarGraphComparison';
-import BarGraphComparisonActions from './BarGraphComparisonActions';
 import { useDispatch, useSelector } from 'react-redux';
 import { setCurrentTabInApp } from '../../../slices/mainSlice';
 import {
@@ -186,10 +183,7 @@ const PerformanceVisx = (props: PerformanceVisxProps): JSX.Element => {
   } = props;
   const dispatch = useDispatch();
   const { currentTabInApp }: MainState = useSelector((state: RootState) => state.main);
-  const NO_STATE_MSG = 'No state change detected. Trigger an event to change state';
   const data = getPerfMetrics(snapshots, getSnapshotIds(hierarchy));
-  const [series, setSeries] = useState(true);
-  const [action, setAction] = useState(false);
   const [route, setRoute] = useState('All Routes');
   const [snapshot, setSnapshot] = useState('All Snapshots');
 
@@ -252,74 +246,7 @@ const PerformanceVisx = (props: PerformanceVisxProps): JSX.Element => {
 
   return (
     <>
-      <div className='performance-nav-bar-container'>
-        <NavLink
-          className={(navData) =>
-            navData.isActive ? 'is-active router-link-performance' : 'router-link-performance'
-          }
-          end
-          to='/performance/'
-        >
-          Snapshots View
-        </NavLink>
-        <NavLink
-          className={(navData) =>
-            navData.isActive ? 'is-active router-link-performance' : 'router-link-performance'
-          }
-          id='router-link-performance-comparison'
-          to='/performance/comparison'
-        >
-          Comparison View
-        </NavLink>
-        <NavLink
-          className={(navData) =>
-            navData.isActive ? 'is-active router-link-performance' : 'router-link-performance'
-          }
-          to='/performance/componentdetails'
-        >
-          Component Details
-        </NavLink>
-      </div>
-
-      {/* {renderForTutorial()} */}
-
       <Routes>
-        <Route
-          path='/comparison'
-          element={
-            hierarchy && series !== false ? (
-              <BarGraphComparison
-                comparison={allStorage()}
-                data={data}
-                width={width}
-                height={height}
-                setSeries={setSeries}
-                series={series}
-                setAction={setAction}
-              />
-            ) : (
-              <BarGraphComparisonActions
-                comparison={allStorage()}
-                data={getActions()}
-                width={width}
-                height={height}
-                setSeries={setSeries}
-                action={action}
-                setAction={setAction}
-              />
-            )
-          }
-        />
-        <Route
-          path='/componentdetails'
-          element={
-            hierarchy ? (
-              <RenderingFrequency data={data.componentData} />
-            ) : (
-              <div className='noState'>{NO_STATE_MSG}</div>
-            )
-          }
-        />
         <Route
           path='/'
           element={
diff --git a/src/app/components/StateRoute/PerformanceVisx/RenderingFrequency.tsx b/src/app/components/StateRoute/PerformanceVisx/RenderingFrequency.tsx
deleted file mode 100644
index 0c85dc44d..000000000
--- a/src/app/components/StateRoute/PerformanceVisx/RenderingFrequency.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable react/prop-types */
-import React, { useState, useEffect } from 'react';
-import { setCurrentTabInApp } from '../../../slices/mainSlice';
-import { useDispatch } from 'react-redux';
-
-/*
-  
-*/
-
-const RenderingFrequency = (props) => {
-  const perfData = props.data;
-  const dispatch = useDispatch();
-  useEffect(() => {
-    dispatch(setCurrentTabInApp('performance-comparison')); // dispatch sent at initial page load allowing changing "immer's" draft.currentTabInApp to 'performance-comparison' to facilitate render.
-  }, []);
-
-  return (
-    <div>
-      {Object.keys(perfData).map((componentName) => {
-        const currentComponent = perfData[componentName];
-        return (
-          <ComponentCard
-            key={componentName}
-            componentName={componentName}
-            stateType={currentComponent.stateType}
-            averageRenderTime={(
-              currentComponent.totalRenderTime / currentComponent.renderFrequency
-            ).toFixed(3)}
-            renderFrequency={currentComponent.renderFrequency}
-            rtid={currentComponent.rtid}
-            information={perfData[componentName].information}
-          />
-        );
-      })}
-    </div>
-  );
-};
-
-const ComponentCard = (props): JSX.Element => {
-  const { componentName, stateType, averageRenderTime, renderFrequency, information } = props;
-  const [expand, setExpand] = useState(false);
-
-  // render time for each component from each snapshot
-  // differences in state change that happened prior;
-
-  const dataComponentArray = [];
-  for (let i = 0; i < information.length; i++) {
-    dataComponentArray.push(
-      <DataComponent
-        key={`DataComponent${i}`}
-        header={Object.keys(information[i])}
-        paragraphs={Object.values(information[i])}
-      />,
-    );
-  }
-
-  return (
-    <div className='borderStyling'>
-      <div className={expand ? 'ExpandStyledGridElement' : 'StyledGridElement'}>
-        <div className='RenderLeft'>
-          <h3>{componentName} </h3>
-          <h4>{stateType}</h4>
-          <h4>average time: {averageRenderTime} ms</h4>
-        </div>
-        <div
-          onClick={() => {
-            if (expand === true) {
-              setExpand(false);
-            } else {
-              setExpand(true);
-            }
-          }}
-          className='RenderRight'
-        >
-          <p>{renderFrequency}</p>
-        </div>
-      </div>
-      <div className={expand === true ? 'DataComponent' : null}>
-        {expand === true ? dataComponentArray : null}
-      </div>
-    </div>
-  );
-};
-
-const DataComponent = (props) => {
-  const { header, paragraphs } = props;
-
-  return (
-    <div className='borderCheck'>
-      <h4> {header}</h4>
-      <p>{`renderTime: ${paragraphs[0].rendertime}`}</p>
-    </div>
-  );
-};
-
-export default RenderingFrequency;
diff --git a/src/app/components/StateRoute/StateRoute.tsx b/src/app/components/StateRoute/StateRoute.tsx
index 82aa0a8a4..c6911e79d 100644
--- a/src/app/components/StateRoute/StateRoute.tsx
+++ b/src/app/components/StateRoute/StateRoute.tsx
@@ -15,24 +15,20 @@ import { useDispatch, useSelector } from 'react-redux';
 import PerformanceVisx from './PerformanceVisx/PerformanceVisx';
 import WebMetricsContainer from './WebMetrics/WebMetricsContainer';
 import { MainState, RootState, StateRouteProps } from '../../FrontendTypes';
-import type AxContainer from './AxMap/AxMap';
-
-/*
-  Loads the appropriate StateRoute view and renders the Map, Performance, History, Webmetrics, and Tree navbar buttons after clicking on the 'State' button located near the top rightmost corner.
-*/
+import AxContainer from './AxMap/AxContainer';
 
 const History = require('./History').default;
-const NO_STATE_MSG = 'No state change detected. Trigger an event to change state'; // message to be returned if there has been no state change detected in our hooked/target app
+const NO_STATE_MSG = 'No state change detected. Trigger an event to change state';
 
 const StateRoute = (props: StateRouteProps) => {
   const {
-    axSnapshots, // from 'tabs[currentTab]' object in 'MainContainer'
-    snapshot, // from 'tabs[currentTab]' object in 'MainContainer'
-    hierarchy: propsHierarchy, // from 'tabs[currentTab]' object in 'MainContainer'
-    snapshots, // from 'tabs[currentTab].snapshotDisplay' object in 'MainContainer'
-    viewIndex: propsViewIndex, // from 'tabs[currentTab]' object in 'MainContainer'
-    webMetrics, // from 'tabs[currentTab]' object in 'MainContainer'
-    currLocation, // from 'tabs[currentTab]' object in 'MainContainer'
+    axSnapshots,
+    snapshot,
+    hierarchy: propsHierarchy,
+    snapshots,
+    viewIndex: propsViewIndex,
+    webMetrics,
+    currLocation,
   } = props;
 
   const { tabs, currentTab }: MainState = useSelector((state: RootState) => state.main);
@@ -40,158 +36,117 @@ const StateRoute = (props: StateRouteProps) => {
   const hierarchy = propsHierarchy || tabsHierarchy;
   const viewIndex = propsViewIndex || tabsViewIndex;
 
-
-  // lines 45 - 63 contains functionality to disable the accessibility features in Reactime.
   const dispatch = useDispatch();
   const [showTree, setShowTree] = useState(false);
-  const [selectedValue, setSelectedValue] = useState('disable');
   const [showParagraph, setShowParagraph] = useState(true);
 
   const enableAxTreeButton = () => {
     dispatch(toggleAxTree('toggleAxRecord'));
     dispatch(setCurrentTabInApp('AxTree'));
-    setSelectedValue('enable');
     setShowParagraph(false);
     setShowTree(true);
   };
 
-  const disableAxTree = () => {
-    dispatch(toggleAxTree('toggleAxRecord'));
-    setSelectedValue('disable');
-    setShowParagraph(true);
-    setShowTree(false);
-  };
-
   return (
     <div className='app-body'>
-      <div className='navbar'>
-        {/* all classnames below are functionally defined for styling purposes */}
-        <NavLink
-          to='/'
-          className={(navData) =>
-            navData.isActive ? 'is-active router-link map-tab map-tab1' : 'router-link map-tab map-tab1'
-          }
-          end
-        >
-          Map
-        </NavLink>
-        <NavLink
-          className={(navData) =>
-            navData.isActive ? 'is-active router-link map-tab' : 'router-link map-tab'
-          }
-          to='/performance'
-        >
-          Performance
-        </NavLink>
-        <NavLink
-          className={(navData) =>
-            navData.isActive ? 'is-active router-link history-tab' : 'router-link history-tab'
-          }
-          to='/history'
-        >
-          History
-        </NavLink>
-        <NavLink
-          className={(navData) =>
-            navData.isActive
-              ? 'is-active router-link web-metrics-tab'
-              : 'router-link web-metrics-tab'
-          }
-          to='/webMetrics'
-        >
-          Web Metrics
-        </NavLink>
-        <NavLink
-          className={(navData) =>
-            navData.isActive ? 'is-active router-link tree-tab' : 'router-link tree-tab'
-          }
-          to='/tree'
-        >
-          Tree
-        </NavLink>
-        <NavLink
-          className={(navData) =>
-            navData.isActive
-              ? 'is-active router-link accessibility-tab'
-              : 'router-link accessibility-tab'
-          }
-          to='/accessibility'
-        >
-          Accessibility
-        </NavLink>
+      <div className='main-navbar-container'>
+        <div className='main-navbar'>
+          <NavLink
+            to='/'
+            className={(navData) =>
+              navData.isActive ? 'is-active router-link map-tab' : 'router-link map-tab'
+            }
+            end
+          >
+            Map
+          </NavLink>
+          <NavLink
+            className={(navData) =>
+              navData.isActive ? 'is-active router-link performance' : 'router-link performance-tab'
+            }
+            to='/performance'
+          >
+            Performance
+          </NavLink>
+          <NavLink
+            className={(navData) =>
+              navData.isActive ? 'is-active router-link history-tab' : 'router-link history-tab'
+            }
+            to='/history'
+          >
+            History
+          </NavLink>
+          <NavLink
+            className={(navData) =>
+              navData.isActive
+                ? 'is-active router-link web-metrics-tab'
+                : 'router-link web-metrics-tab'
+            }
+            to='/webMetrics'
+          >
+            Web Metrics
+          </NavLink>
+          <NavLink
+            className={(navData) =>
+              navData.isActive ? 'is-active router-link tree-tab' : 'router-link tree-tab'
+            }
+            to='/tree'
+          >
+            Tree
+          </NavLink>
+          <NavLink
+            className={(navData) =>
+              navData.isActive
+                ? 'is-active router-link accessibility-tab'
+                : 'router-link accessibility-tab'
+            }
+            to='/accessibility'
+          >
+            Accessibility
+          </NavLink>
+        </div>
       </div>
+
       <div className='app-content'>
         <Routes>
           <Route
             path='/accessibility'
             element={
-              // showTree is initially set to a falsely value, therefore, lines 155 - 189 is executed first. Once showTree is set to truthy by clicking the enable button, lines 129 - 154 is executed
-              // state is a key component here in order to update the accessibility tree 
               showTree ? (
                 <div>
-                     <input
-                          type='radio'
-                          value='enable'
-                          checked={selectedValue === 'enable'}
-                          onChange={() => {
-                            enableAxTreeButton();
-                          }}
-                        />
-                        <label htmlFor='enable'>Enable</label>
-                        <input
-                          type='radio'
-                          value='disable'
-                          checked={selectedValue === 'disable'}
-                          onChange={() => {
-                            disableAxTree();
-                          }}
-                        />
-                        <label htmlFor='disable'>Disable</label>
-                    {showTree && <AxContainer
-                      axSnapshots={axSnapshots}
-                      snapshot={snapshot}
-                      snapshots={snapshots}
-                      currLocation={currLocation}
-                      />} 
+                  <AxContainer
+                    axSnapshots={axSnapshots}
+                    snapshot={snapshot}
+                    snapshots={snapshots}
+                    currLocation={currLocation}
+                  />
                 </div>
               ) : (
                 <div>
                   {showParagraph && (
-                    <p>
-                      A Note to Developers: Reactime is using the Chrome Debugger API in order to
-                      grab the Accessibility Tree. Enabling this option will allow you to record
-                      Accessibility Tree snapshots, but will result in the Chrome browser notifying
-                      you that the Chrome Debugger has started.
-                    </p>
+                    <div className='accessibility-text'>
+                      <p>
+                        A Note to Developers: Reactime is using the Chrome Debugger API in order to
+                        grab the Accessibility Tree. Enabling this option will allow you to record
+                        Accessibility Tree snapshots, but will result in the Chrome browser
+                        notifying you that the Chrome Debugger has started.
+                      </p>
+                    </div>
                   )}
-                  <div>
-                    {
-                      <input
-                        type='radio'
-                        value='enable'
-                        checked={selectedValue === 'enable'}
-                        onChange={() => {
-                          enableAxTreeButton();
-                        }}
-                      />
-                    }
+                  <div className='accessibility-controls'>
+                    <input
+                      type='radio'
+                      id='enable'
+                      name='accessibility'
+                      value='enable'
+                      onChange={enableAxTreeButton}
+                    />
                     <label htmlFor='enable'>Enable</label>
-                    {
-                      <input
-                        type='radio'
-                        value='disable'
-                        checked={selectedValue === 'disable'}
-                        onChange={() => {
-                          disableAxTree();
-                        }}
-                      />
-                    }
-                    <label htmlFor='disable'>Disable</label>
                   </div>
                 </div>
               )
             }
-          ></Route>
+          />
           <Route
             path='/history'
             element={
@@ -202,8 +157,6 @@ const StateRoute = (props: StateRouteProps) => {
                       width={width}
                       height={height}
                       hierarchy={hierarchy}
-                      // Commented out dispatch that was prop drilled as conversion to RTK might invalidate need for prop drilling to access dispatch
-                      // dispatch={dispatch}
                       sliderIndex={sliderIndex}
                       viewIndex={viewIndex}
                       currLocation={currLocation}
@@ -221,13 +174,12 @@ const StateRoute = (props: StateRouteProps) => {
             element={
               hierarchy ? (
                 <div style={{ height: '100%' }}>
-                  <ParentSize className='performanceContainer'>
+                  <ParentSize>
                     {({ width, height }) => (
                       <PerformanceVisx
                         width={width}
                         height={height}
                         snapshots={snapshots}
-                        // note: is propdrilled within Performance Visx, but doesn't seem to be used
                         changeSlider={changeSlider}
                         changeView={changeView}
                         hierarchy={hierarchy}
@@ -252,8 +204,7 @@ const StateRoute = (props: StateRouteProps) => {
               hierarchy ? (
                 <ParentSize className='componentMapContainer'>
                   {({ width, height }) => {
-                    // eslint-disable-next-line react/prop-types
-                    const maxHeight: number = 1200;
+                    const maxHeight = 1200;
                     const h = Math.min(height, maxHeight);
                     return (
                       <ComponentMap
@@ -274,4 +225,3 @@ const StateRoute = (props: StateRouteProps) => {
 };
 
 export default StateRoute;
-
diff --git a/src/app/components/StateRoute/Tree.tsx b/src/app/components/StateRoute/Tree.tsx
index 6c1ba84ef..7d83c30d5 100644
--- a/src/app/components/StateRoute/Tree.tsx
+++ b/src/app/components/StateRoute/Tree.tsx
@@ -55,20 +55,22 @@ const Tree = (props: TreeProps) => {
 
   return (
     <>
-      {snapshot && (
-        // @ts-ignore
-        <JSONTree
+      <div className='tree-component'>
+        {snapshot && (
           // @ts-ignore
-          data={snapshots[currLocation.index] || snapshot} // data to be rendered, a snapshot object
-          theme={{ extend: colors, tree: () => ({ className: 'json-tree' }) }} // theme set to a base16 theme that has been extended to include  "className: 'json-tree'"
-          shouldExpandNodeInitially={() => true} // determines if node should be expanded when it first renders (root is expanded by default)
-          getItemString={getItemString} // allows the customization of how arrays, objects, and iterable nodes are displayed.
-          labelRenderer={(raw: any[]) => {
-            //  renders a label if the first element of raw is a number.
-            return typeof raw[0] !== 'number' ? <span>{raw[0]}</span> : null;
-          }}
-        />
-      )}
+          <JSONTree
+            // @ts-ignore
+            data={snapshots[currLocation.index] || snapshot} // data to be rendered, a snapshot object
+            theme={{ extend: colors, tree: () => ({ className: 'json-tree' }) }} // theme set to a base16 theme that has been extended to include  "className: 'json-tree'"
+            shouldExpandNodeInitially={() => true} // determines if node should be expanded when it first renders (root is expanded by default)
+            getItemString={getItemString} // allows the customization of how arrays, objects, and iterable nodes are displayed.
+            labelRenderer={(raw: any[]) => {
+              //  renders a label if the first element of raw is a number.
+              return typeof raw[0] !== 'number' ? <span>{raw[0]}</span> : null;
+            }}
+          />
+        )}
+      </div>
     </>
   );
 };
diff --git a/src/app/components/StateRoute/WebMetrics/WebMetrics.tsx b/src/app/components/StateRoute/WebMetrics/WebMetrics.tsx
index 164530fc3..4bad170e0 100644
--- a/src/app/components/StateRoute/WebMetrics/WebMetrics.tsx
+++ b/src/app/components/StateRoute/WebMetrics/WebMetrics.tsx
@@ -30,7 +30,6 @@ const radialGraph = (props) => {
             margin: 0,
             size: '75%',
             background: 'transparent',
-            // background: '#242529',
             image: props.overLimit
               ? 'https://static.vecteezy.com/system/resources/thumbnails/012/042/301/small/warning-sign-icon-transparent-background-free-png.png'
               : undefined,
@@ -51,7 +50,7 @@ const radialGraph = (props) => {
           track: {
             background: '#161617',
             strokeWidth: '3%',
-            margin: 0, // margin is in pixels
+            margin: 0,
             dropShadow: {
               enabled: true,
               top: -3,
@@ -111,18 +110,18 @@ const radialGraph = (props) => {
     <div className='metric'>
       <ReactHover options={optionsCursorTrueWithMargin}>
         <Trigger type='trigger'>
-          <div id='chart'>
+          <div id='chart' className='chart-container'>
             <Charts
               options={state.options}
               series={state.series}
               type='radialBar'
-              height={350}
-              width={350}
+              height={250}
+              width={250}
             />
           </div>
         </Trigger>
         <Hover type='hover'>
-          <div style={{ zIndex: 1, position: 'relative', padding: '0.5rem 1rem' }} id='hover-box'>
+          <div className='metric-tooltip' id='hover-box'>
             <p>
               <strong>{props.name}</strong>
             </p>
diff --git a/src/app/components/TimeTravel/MainSlider.tsx b/src/app/components/TimeTravel/VerticalSlider.tsx
similarity index 73%
rename from src/app/components/TimeTravel/MainSlider.tsx
rename to src/app/components/TimeTravel/VerticalSlider.tsx
index 7af7c7673..58dc63916 100644
--- a/src/app/components/TimeTravel/MainSlider.tsx
+++ b/src/app/components/TimeTravel/VerticalSlider.tsx
@@ -6,7 +6,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { HandleProps, MainSliderProps, MainState, RootState } from '../../FrontendTypes';
 
 const { Handle } = Slider; // component constructor of Slider that allows customization of the handle
-
+//takes in snapshot length
 const handle = (props: HandleProps): JSX.Element => {
   const { value, dragging, index, ...restProps } = props;
 
@@ -27,9 +27,9 @@ const handle = (props: HandleProps): JSX.Element => {
   );
 };
 
-function MainSlider(props: MainSliderProps): JSX.Element {
+function VerticalSlider(props: MainSliderProps): JSX.Element {
   const dispatch = useDispatch();
-  const { snapshotsLength } = props; // destructure props to get our total number of snapshots
+  const { snapshots } = props; // destructure props to get our total number of snapshots
   const [sliderIndex, setSliderIndex] = useState(0); // create a local state 'sliderIndex' and set it to 0.
   const { tabs, currentTab }: MainState = useSelector((state: RootState) => state.main);
   const { currLocation } = tabs[currentTab]; // we destructure the currentTab object
@@ -37,8 +37,15 @@ function MainSlider(props: MainSliderProps): JSX.Element {
   useEffect(() => {
     if (currLocation) {
       // if we have a 'currLocation'
-      //@ts-ignore
-      setSliderIndex(currLocation.index); // set our slider thumb position to the 'currLocation.index'
+      let correctedSliderIndex;
+
+      for (let i = 0; i < snapshots.length; i++) {
+        //@ts-ignore -- ignores the errors on the next line
+        if (snapshots[i].props.index === currLocation.index) {
+          correctedSliderIndex = i;
+        }
+      }
+      setSliderIndex(correctedSliderIndex);
     } else {
       setSliderIndex(0); // just set the thumb position to the beginning
     }
@@ -47,22 +54,20 @@ function MainSlider(props: MainSliderProps): JSX.Element {
   return (
     <Slider
       className='travel-slider'
-      color='#0af548'
+      vertical='true'
+      reverse='true'
+      height='100%'
       min={0} // index of our first snapshot
-      max={snapshotsLength - 1} // index of our last snapshot
+      max={snapshots.length - 1} // index of our last snapshot
       value={sliderIndex} // currently slider thumb position
       onChange={(index: any) => {
         // when the slider position changes
         setSliderIndex(index); // update the sliderIndex
-      }}
-      onAfterChange={() => {
-        // after updating the sliderIndex
-        dispatch(changeSlider(sliderIndex)); // updates currentTab's 'sliderIndex' and replaces our snapshot with the appropriate snapshot[sliderIndex]
-        dispatch(pause()); // pauses playing and sets currentTab object'a intervalId to null
+        dispatch(changeSlider(snapshots[index].props.index));
       }}
       handle={handle}
     />
   );
 }
 
-export default MainSlider;
+export default VerticalSlider;
diff --git a/src/app/containers/ActionContainer.tsx b/src/app/containers/ActionContainer.tsx
index d81e995a1..e1892f537 100644
--- a/src/app/containers/ActionContainer.tsx
+++ b/src/app/containers/ActionContainer.tsx
@@ -1,28 +1,25 @@
 /* eslint-disable max-len */
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import Action from '../components/Actions/Action';
-import SwitchAppDropdown from '../components/Actions/SwitchApp';
 import { emptySnapshots, changeView, changeSlider } from '../slices/mainSlice';
 import { useDispatch, useSelector } from 'react-redux';
 import RouteDescription from '../components/Actions/RouteDescription';
+import DropDown from '../components/Actions/DropDown';
+import ProvConContainer from './ProvConContainer';
 import { ActionContainerProps, CurrentTab, MainState, Obj, RootState } from '../FrontendTypes';
 import { Button, Switch } from '@mui/material';
+import RecordButton from '../components/Actions/RecordButton';
 
 /*
   This file renders the 'ActionContainer'. The action container is the leftmost column in the application. It includes the button that shrinks and expands the action container, a dropdown to select the active site, a clear button, the current selected Route, and a list of selectable snapshots with timestamps.
 */
 
 // resetSlider locates the rc-slider elements on the document and resets it's style attributes
-const resetSlider = () => {
-  const slider = document.querySelector('.rc-slider-handle');
-  const sliderTrack = document.querySelector('.rc-slider-track');
-  if (slider && sliderTrack) {
-    slider.setAttribute('style', 'left: 0');
-    sliderTrack.setAttribute('style', 'width: 0');
-  }
-};
 
 function ActionContainer(props: ActionContainerProps): JSX.Element {
+  const [dropdownSelection, setDropdownSelection] = useState('Time Jump');
+  const actionsEndRef = useRef(null as unknown as HTMLDivElement);
+
   const dispatch = useDispatch();
   const { currentTab, tabs, port }: MainState = useSelector((state: RootState) => state.main);
 
@@ -30,28 +27,20 @@ function ActionContainer(props: ActionContainerProps): JSX.Element {
   const {
     toggleActionContainer, // function that handles Time Jump Sidebar view from MainContainer
     actionView, // local state declared in MainContainer
-    setActionView, // function to update actionView state declared in MainContainer
+    setActionView, // function to update actionView state declared in MainContainer,
+    snapshots,
   } = props;
   const [recordingActions, setRecordingActions] = useState(true); // We create a local state 'recordingActions' and set it to true
   let actionsArr: JSX.Element[] = []; // we create an array 'actionsArr' that will hold elements we create later on
   // we create an array 'hierarchyArr' that will hold objects and numbers
   const hierarchyArr: (number | {})[] = [];
 
-  /* 
-  function to traverse state from hierarchy and also getting information on display name and component name
-  
-  the obj parameter is an object with the following structure:
-    {
-      stateSnapshot: {
-        route: any;
-        children: any[];
-      };
-    name: number;
-    branch: number;
-    index: number;
-    children?: [];
+  // Auto scroll when snapshots change
+  useEffect(() => {
+    if (actionsEndRef.current) {
+      actionsEndRef.current.scrollIntoView({ behavior: 'smooth' });
     }
-  */
+  }, [snapshots]); // Dependency on snapshots array
 
   const displayArray = (obj: Obj): void => {
     if (
@@ -65,7 +54,7 @@ function ActionContainer(props: ActionContainerProps): JSX.Element {
         //This utility can be used to map the properties of a type to another type) and populate it's properties with
         //relevant values from our argument 'obj'.
         index: obj.index,
-        displayName: `${obj.name}.${obj.branch}`,
+        displayName: `${obj.index + 1}`,
         state: obj.stateSnapshot.children[0].state,
         componentName: obj.stateSnapshot.children[0].name,
         routePath: obj.stateSnapshot.route.url,
@@ -80,6 +69,7 @@ function ActionContainer(props: ActionContainerProps): JSX.Element {
     if (obj.children) {
       // if argument has a 'children' array, we iterate through it and run 'displayArray' on each element
       obj.children.forEach((element): void => {
+        //recursive call
         displayArray(element);
       });
     }
@@ -127,6 +117,7 @@ function ActionContainer(props: ActionContainerProps): JSX.Element {
       const selected = index === viewIndex; // boolean on whether the current index is the same as the viewIndex
       const last = viewIndex === -1 && index === hierarchyArr.length - 1; // boolean on whether the view index is less than 0 and if the index is the same as the last snapshot's index value in hierarchyArr
       const isCurrIndex = index === currLocation.index;
+
       return (
         <Action
           key={`action${index}`}
@@ -147,11 +138,6 @@ function ActionContainer(props: ActionContainerProps): JSX.Element {
     },
   );
 
-  // JR: this is questionable, why would you always set it to true?
-  // useEffect(() => {
-  //   setActionView(true);
-  // }, [setActionView]);
-
   // Function sends message to background.js which sends message to the content script
   const toggleRecord = (): void => {
     port.postMessage({
@@ -191,54 +177,49 @@ function ActionContainer(props: ActionContainerProps): JSX.Element {
               className='toggle'
             >
               {' '}
-              {/* JR: updating onClick to stop propagation so that it detects the click only on the arrow and not the parent*/}
               <i />
             </a>
           </aside>
           <div className='collapse'>Collapse</div>
         </div>
-        {/* <a type='button' id='recordBtn' onClick={toggleRecord}>
-          <i />
-          <div
-            className='toggle-record'
-            style={{ display: 'flex', alignItems: 'center', textAlign: 'right' }}
-          >
-            Record
-          </div>
-          {recordingActions ? <Switch defaultChecked /> : <Switch />}
-        </a> */}
       </div>
       {actionView ? (
         <div className='action-button-wrapper'>
-          <a type='button' id='recordBtn' onClick={toggleRecord}>
-            <i />
-            <div
-              className='toggle-record'
-              style={{ display: 'flex', alignItems: 'center', textAlign: 'right' }}
-            >
-              Record
-            </div>
-            {recordingActions ? <Switch defaultChecked /> : <Switch />}
-          </a>
-          <SwitchAppDropdown />
-          <div className='action-component exclude'>
+          <RecordButton
+            isRecording={recordingActions}
+            onToggle={() => {
+              toggleRecord();
+              setRecordingActions(!recordingActions);
+            }}
+          />
+          <DropDown
+            dropdownSelection={dropdownSelection}
+            setDropdownSelection={setDropdownSelection}
+          />
+          <div className='clear-button-container'>
             <Button
-              className='clear-button'
-              variant='contained'
-              //style={{ backgroundColor: '#ff6569' }}
+              className='clear-button-modern'
+              variant='text'
               onClick={() => {
                 dispatch(emptySnapshots()); // set slider back to zero, visually
-                resetSlider();
+                dispatch(changeSlider(0));
               }}
               type='button'
             >
               Clear
             </Button>
           </div>
-          {/* Rendering of route description components */}
-          {Object.keys(routes).map((route, i) => (
-            <RouteDescription key={`route${i}`} actions={routes[route]} />
-          ))}
+          <div className='snapshots'>
+            {dropdownSelection === 'Providers / Consumers' && (
+              <ProvConContainer currentSnapshot={currLocation.stateSnapshot} />
+            )}
+            {dropdownSelection === 'Time Jump' &&
+              Object.keys(routes).map((route, i) => (
+                <RouteDescription key={`route${i}`} actions={routes[route]} />
+              ))}
+            {/* Add ref for scrolling */}
+            <div ref={actionsEndRef} />
+          </div>
         </div>
       ) : null}
     </div>
diff --git a/src/app/containers/ButtonsContainer.tsx b/src/app/containers/ButtonsContainer.tsx
index 2eadc0e76..9af8f1ea8 100644
--- a/src/app/containers/ButtonsContainer.tsx
+++ b/src/app/containers/ButtonsContainer.tsx
@@ -5,17 +5,13 @@ import { Button } from '@mui/material';
 //importing necesary material UI components for dialogue popup
 import { Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material';
 import Tutorial from '../components/Buttons/Tutorial';
-import LockIcon from '@mui/icons-material/Lock';
-import LockOpenIcon from '@mui/icons-material/LockOpen';
-import FileDownloadIcon from '@mui/icons-material/FileDownload';
-import FileUploadIcon from '@mui/icons-material/FileUpload';
 import { toggleMode, importSnapshots, startReconnect } from '../slices/mainSlice';
 import { useDispatch, useSelector } from 'react-redux';
 import StatusDot from '../components/Buttons/StatusDot';
-import LoopIcon from '@mui/icons-material/Loop';
 import CloseIcon from '@mui/icons-material/Close';
 import WarningIcon from '@mui/icons-material/Warning';
 import { MainState, RootState } from '../FrontendTypes';
+import { Lock, Unlock, Download, Upload, RefreshCw, X, AlertTriangle } from 'lucide-react';
 
 function exportHandler(snapshots: []): void {
   // function that takes in our tabs[currentTab] object to be exported as a JSON file. NOTE: TypeScript needs to be updated
@@ -91,115 +87,106 @@ function ButtonsContainer(): JSX.Element {
 
   return (
     <div className='buttons-container'>
-      <Button
-        className='pause-button'
-        variant='outlined'
-        type='button'
-        onClick={() => dispatch(toggleMode('paused'))}
-      >
-        {paused ? (
-          <LockIcon className='button-icon' sx={{ pr: 1 }} />
-        ) : (
-          <LockOpenIcon className='button-icon' sx={{ pr: 1 }} />
-        )}
-        {paused ? 'Locked' : 'Unlocked'}
-      </Button>
-      <Button
-        className='export-button'
-        variant='outlined'
-        type='button'
-        //@ts-ignore
-        onClick={() => exportHandler(tabs[currentTab])}
-      >
-        <FileDownloadIcon className='button-icon' sx={{ pr: 1 }} />
-        Download
-      </Button>
-      <Button variant='outlined' className='import-button' onClick={() => importHandler(dispatch)}>
-        <FileUploadIcon className='button-icon' sx={{ pr: 1 }} />
-        Upload
-      </Button>
-      {/* The component below renders a button for the tutorial walkthrough of Reactime */}
-      <Tutorial dispatch={dispatch} currentTabInApp={currentTabInApp} />
-      {/* adding a button for reconnection functionality 10/5/2023 */}
-      <Button
-        variant='outlined'
-        className='reconnect-button'
-        type='button'
-        //update onClick functionality to include a popup that contains....
-        onClick={handleReconnectClick}
-        endIcon={
-          <span style={{ position: 'relative', display: 'flex', alignItems: 'center' }}>
-            <StatusDot status={connectionStatus ? 'active' : 'inactive'} />
-          </span>
-        }
-      >
-        <LoopIcon className='button-icon' sx={{ pr: 1 }} />
-        Reconnect
-      </Button>
-      <Dialog className='dialog-pop-up' open={reconnectDialogOpen} onClose={handleReconnectCancel}>
-        <div className='close-icon-pop-up-div'>
-          <CloseIcon
-            type='button'
-            onClick={() => handleReconnectCancel()}
-            className='close-icon-pop-up'
-          />
-        </div>
-        <div className='warning-header-container'>
-          <WarningIcon className='warning-icon-pop-up' />
-          <DialogTitle className='dialog-pop-up-header'>WARNING</DialogTitle>
-        </div>
-        <DialogContent className='dialog-pop-up-contents'>
-          <h3>Status: {connectionStatus ? 'Connected' : 'Disconnected'}</h3>
-          {connectionStatus ? (
-            <>
-              Reconnecting while Reactime is still connected to the application may cause unforeseen
-              issues. Are you sure you want to proceed with the reconnection?
-            </>
+      <div className='buttons-wrapper'>
+        <Button
+          className='pause-button'
+          type='button'
+          onClick={() => dispatch(toggleMode('paused'))}
+        >
+          {paused ? (
+            <Lock className='button-icon' size={18} />
           ) : (
-            <>
-              Reactime has unexpectedly disconnected from your application. To continue using
-              Reactime, please reconnect.
-              <br />
-              <br />
-              WARNING: Reconnecting can sometimes cause unforeseen issues, consider downloading the
-              data before proceeding with the reconnection, if needed.
-            </>
+            <Unlock className='button-icon' size={18} />
           )}
-        </DialogContent>
-
-        <DialogActions className='dialog-pop-up-actions'>
-          <Button
-            onClick={() => handleReconnectCancel()}
-            className='cancel-button-pop-up'
-            type='button'
-            variant='contained'
-            style={{ backgroundColor: '#474c55' }}
-          >
-            Cancel
-          </Button>
-          {!connectionStatus && (
+          {paused ? 'Locked' : 'Unlocked'}
+        </Button>
+        <Button
+          className='export-button'
+          type='button'
+          //@ts-ignore
+          onClick={() => exportHandler(tabs[currentTab])}
+        >
+          <Download className='button-icon' size={18} />
+          Download
+        </Button>
+        <Button className='import-button' onClick={() => importHandler(dispatch)}>
+          <Upload className='button-icon' size={18} />
+          Upload
+        </Button>
+        {/* The component below renders a button for the tutorial walkthrough of Reactime */}
+        <Tutorial dispatch={dispatch} currentTabInApp={currentTabInApp} />
+        {/* adding a button for reconnection functionality 10/5/2023 */}
+        <Button
+          className='reconnect-button'
+          type='button'
+          //update onClick functionality to include a popup that contains....
+          onClick={handleReconnectClick}
+          endIcon={
+            <span style={{ position: 'relative', display: 'flex', alignItems: 'center' }}>
+              <StatusDot status={connectionStatus ? 'active' : 'inactive'} />
+            </span>
+          }
+        >
+          <RefreshCw className='button-icon' size={18} />
+          Reconnect
+        </Button>
+        <Dialog
+          className='dialog-pop-up'
+          open={reconnectDialogOpen}
+          onClose={handleReconnectCancel}
+        >
+          <div className='close-icon-pop-up-div'>
+            <CloseIcon
+              type='button'
+              onClick={() => handleReconnectCancel()}
+              className='close-icon-pop-up'
+            />
+          </div>
+          <div className='warning-header-container'>
+            <WarningIcon className='warning-icon-pop-up' />
+            <DialogTitle className='dialog-pop-up-header'>WARNING</DialogTitle>
+          </div>
+          <DialogContent className='dialog-pop-up-contents'>
+            <h3>Status: {connectionStatus ? 'Connected' : 'Disconnected'}</h3>
+            {connectionStatus ? (
+              <>
+                Reconnecting while Reactime is still connected to the application may cause
+                unforeseen issues. Are you sure you want to proceed with the reconnection?
+              </>
+            ) : (
+              <>
+                Reactime has unexpectedly disconnected from your application. To continue using
+                Reactime, please reconnect.
+                <br />
+                <br />
+                WARNING: Reconnecting can sometimes cause unforeseen issues, consider downloading
+                the data before proceeding with the reconnection, if needed.
+              </>
+            )}
+          </DialogContent>
+
+          <DialogActions className='dialog-pop-up-actions'>
             <Button
-              // @ts-ignore
-              onClick={() => exportHandler(tabs[currentTab])}
+              onClick={() => handleReconnectCancel()}
+              className='cancel-button-pop-up'
               type='button'
-              className='download-button-pop-up'
               variant='contained'
-              color='primary'
+              style={{ backgroundColor: '#474c55' }}
             >
-              Download
+              Cancel
             </Button>
-          )}
-          <Button
-            onClick={() => handleReconnectConfirm()}
-            type='button'
-            className='reconnect-button-pop-up'
-            variant='contained'
-            style={{ backgroundColor: '#F00008' }}
-          >
-            Reconnect
-          </Button>
-        </DialogActions>
-      </Dialog>
+            <Button
+              onClick={() => handleReconnectConfirm()}
+              type='button'
+              className='reconnect-button-pop-up'
+              variant='contained'
+              style={{ backgroundColor: '#F00008' }}
+            >
+              Reconnect
+            </Button>
+          </DialogActions>
+        </Dialog>
+      </div>
     </div>
   );
 }
diff --git a/src/app/containers/MainContainer.tsx b/src/app/containers/MainContainer.tsx
index 9f91bd980..4fee77640 100644
--- a/src/app/containers/MainContainer.tsx
+++ b/src/app/containers/MainContainer.tsx
@@ -19,7 +19,6 @@ import {
 } from '../slices/mainSlice';
 import { useDispatch, useSelector } from 'react-redux';
 import { MainState, RootState } from '../FrontendTypes';
-import HeatMapLegend from '../components/StateRoute/ComponentMap/heatMapLegend';
 
 /*
   This is the main container where everything in our application is rendered
@@ -33,7 +32,7 @@ function MainContainer(): JSX.Element {
   const { connectionStatus }: MainState = useSelector((state: RootState) => state.main);
 
   // JR 12.22.23: so far this log always returns true
-  // console.log('MainContainer connectionStatus at initialization: ', connectionStatus);
+  console.log('MainContainer connectionStatus at initialization: ', connectionStatus);
 
   const [actionView, setActionView] = useState(true); // We create a local state 'actionView' and set it to true
 
@@ -41,6 +40,9 @@ function MainContainer(): JSX.Element {
   const toggleActionContainer = () => {
     setActionView(!actionView); // sets actionView to the opposite boolean value
 
+    const bodyContainer = document.getElementById('bodyContainer');
+    bodyContainer.classList.toggle('collapsed');
+
     const toggleElem = document.querySelector('aside'); // aside is like an added text that appears "on the side" aside some text.
     toggleElem.classList.toggle('no-aside'); // toggles the addition or the removal of the 'no-aside' class
 
@@ -212,6 +214,8 @@ function MainContainer(): JSX.Element {
           actionView={actionView}
           setActionView={setActionView}
           toggleActionContainer={toggleActionContainer}
+          snapshots={snapshots}
+          currLocation={currLocation}
         />
         {/* @ts-ignore */}
         {snapshots.length ? (
@@ -231,9 +235,11 @@ function MainContainer(): JSX.Element {
             />
           </div>
         ) : null}
-        {/* @ts-ignore */}
-        <TravelContainer snapshotsLength={snapshots.length} />
-        <ButtonsContainer />
+        <div className='bottom-controls'>
+          {/* @ts-ignore */}
+          <TravelContainer snapshotsLength={snapshots.length} />
+          <ButtonsContainer />
+        </div>
       </div>
     </div>
   );
diff --git a/src/app/containers/ProvConContainer.tsx b/src/app/containers/ProvConContainer.tsx
new file mode 100644
index 000000000..e2137116d
--- /dev/null
+++ b/src/app/containers/ProvConContainer.tsx
@@ -0,0 +1,200 @@
+import React, { useState } from 'react';
+import { ProvConContainerProps, FilteredNode } from '../FrontendTypes';
+import { JSONTree } from 'react-json-tree';
+
+const ProvConContainer = (props: ProvConContainerProps): JSX.Element => {
+  const jsonTheme = {
+    scheme: 'custom',
+    base00: 'transparent',
+    base0B: '#1f2937', // dark navy for strings
+    base0D: '#60a5fa', // Keys
+    base09: '#f59e0b', // Numbers
+    base0C: '#EF4444', // Null values
+  };
+
+  //deconstruct props
+  const { currentSnapshot } = props;
+
+  //parse through node
+  const keepContextAndProviderNodes = (node) => {
+    if (!node) return null;
+
+    // Check if this node should be kept
+    const hasContext =
+      node?.componentData?.context && Object.keys(node.componentData.context).length > 0;
+    const isProvider = node?.name && node.name.endsWith('Provider');
+    const shouldKeepNode = hasContext || isProvider;
+
+    // Process children first
+    let processedChildren = [];
+    if (node.children) {
+      processedChildren = node.children
+        .map((child) => keepContextAndProviderNodes(child))
+        .filter(Boolean); // Remove null results
+    }
+
+    // If this node should be kept or has kept children, return it
+    if (shouldKeepNode || processedChildren.length > 0) {
+      return {
+        ...node,
+        children: processedChildren,
+      };
+    }
+
+    // If neither the node should be kept nor it has kept children, filter it out
+    return null;
+  };
+  const contextProvidersOnly = keepContextAndProviderNodes(currentSnapshot);
+
+  const filterComponentProperties = (node: any): FilteredNode | null => {
+    if (!node) return null;
+
+    // Helper function to check if an object is empty (including nested objects)
+    const isEmptyObject = (obj: any): boolean => {
+      if (!obj) return true;
+      if (Array.isArray(obj)) return obj.length === 0;
+      if (typeof obj !== 'object') return false;
+
+      // Check each property recursively
+      for (const key in obj) {
+        const value = obj[key];
+        if (typeof value === 'object') {
+          if (!isEmptyObject(value)) return false;
+        } else if (value !== undefined && value !== null) {
+          return false;
+        }
+      }
+      return true;
+    };
+
+    // Create a new object for the filtered node
+    const filteredNode: FilteredNode = {};
+
+    // Flatten root level props if they exist
+    if (node.props && !isEmptyObject(node.props)) {
+      Object.entries(node.props).forEach(([key, value]) => {
+        if (!isEmptyObject(value)) {
+          filteredNode[`prop_${key}`] = value;
+        }
+      });
+    }
+
+    // Flatten componentData properties into root level if they exist
+    if (node.componentData.context && !isEmptyObject(node.componentData.context)) {
+      // Add context directly if it exists
+      Object.entries(node.componentData.context).forEach(([key, value]) => {
+        if (!isEmptyObject(value)) {
+          filteredNode[`${key}`] = value;
+        }
+      });
+
+      // Flatten componentData.props if they exist
+      if (node.componentData.props && !isEmptyObject(node.componentData.props)) {
+        Object.entries(node.componentData.props).forEach(([key, value]) => {
+          if (!isEmptyObject(value)) {
+            filteredNode[`${key}`] = value;
+          }
+        });
+      }
+
+      // Flatten componentData.hooksState if it exists
+      if (node.componentData.hooksState && !isEmptyObject(node.componentData.hooksState)) {
+        Object.entries(node.componentData.hooksState).forEach(([key, value]) => {
+          if (!isEmptyObject(value)) {
+            filteredNode[`${key}`] = value;
+          }
+        });
+      }
+    }
+
+    // Flatten root level hooksState if it exists
+    if (node.hooksState && !isEmptyObject(node.hooksState)) {
+      Object.entries(node.hooksState).forEach(([key, value]) => {
+        if (!isEmptyObject(value)) {
+          filteredNode[`hook_${key}`] = value;
+        }
+      });
+    }
+
+    // Process children and add them using the node's name as the key
+    if (node.hasOwnProperty('children') && Array.isArray(node.children)) {
+      for (const child of node.children) {
+        const filteredChild = filterComponentProperties(child);
+        if (filteredChild && !isEmptyObject(filteredChild) && child.name) {
+          filteredNode[child.name] = filteredChild;
+        }
+      }
+    }
+
+    // Only return the node if it has at least one non-empty property
+    return isEmptyObject(filteredNode) ? null : filteredNode;
+  };
+  const filteredProviders = filterComponentProperties(contextProvidersOnly);
+  console.log('filtered', filteredProviders);
+
+  const parseStringifiedValues = (obj) => {
+    if (!obj || typeof obj !== 'object') return obj;
+
+    const parsed = { ...obj };
+    for (const key in parsed) {
+      if (typeof parsed[key] === 'string') {
+        try {
+          // Check if the string looks like JSON
+          if (parsed[key].startsWith('{') || parsed[key].startsWith('[')) {
+            const parsedValue = JSON.parse(parsed[key]);
+            parsed[key] = parsedValue;
+          }
+        } catch (e) {
+          // If parsing fails, keep original value
+          continue;
+        }
+      } else if (typeof parsed[key] === 'object') {
+        parsed[key] = parseStringifiedValues(parsed[key]);
+      }
+    }
+    return parsed;
+  };
+
+  const renderSection = (title, content, isReducer = false) => {
+    if (
+      !content ||
+      (Array.isArray(content) && content.length === 0) ||
+      Object.keys(content).length === 0
+    ) {
+      return null;
+    }
+
+    // Parse any stringified JSON before displaying
+    const parsedContent = parseStringifiedValues(content);
+
+    return (
+      <div className='tooltip-section'>
+        <div className='tooltip-section-title'>{title}</div>
+        <div className='tooltip-data'>
+          <JSONTree
+            data={parsedContent}
+            theme={jsonTheme}
+            hideRoot
+            shouldExpandNode={() => true}
+            shouldExpandNodeInitially={() => true}
+          />
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div>
+      <div className='route-header'>Providers / Consumers</div>
+      {filteredProviders ? (
+        <div>{renderSection(null, filteredProviders)}</div>
+      ) : (
+        <div className='accessibility-text '>
+          <p>No providers or consumers found in the current component tree.</p>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ProvConContainer;
diff --git a/src/app/containers/StateContainer.tsx b/src/app/containers/StateContainer.tsx
index 9dc9136bd..06f1a58b7 100644
--- a/src/app/containers/StateContainer.tsx
+++ b/src/app/containers/StateContainer.tsx
@@ -8,7 +8,6 @@ import StateRoute from '../components/StateRoute/StateRoute';
 import DiffRoute from '../components/DiffRoute/DiffRoute';
 import { StateContainerProps } from '../FrontendTypes';
 import { Outlet } from 'react-router';
-import HeatMapLegend from '../components/StateRoute/ComponentMap/heatMapLegend';
 
 // eslint-disable-next-line react/prop-types
 const StateContainer = (props: StateContainerProps): JSX.Element => {
@@ -19,48 +18,17 @@ const StateContainer = (props: StateContainerProps): JSX.Element => {
     viewIndex, // from 'tabs[currentTab]' object in 'MainContainer'
     webMetrics, // from 'tabs[currentTab]' object in 'MainContainer'
     currLocation, // from 'tabs[currentTab]' object in 'MainContainer'
-    axSnapshots,// from 'tabs[currentTab]' object in 'MainContainer'
+    axSnapshots, // from 'tabs[currentTab]' object in 'MainContainer'
   } = props;
 
   return (
     <>
-    <div className='state-container'>
-      <div className='main-navbar-container'>
-        <div className='main-navbar-text' />
-        <div className='main-navbar'>
-          <NavLink
-            className={(navData) =>
-              navData.isActive ? 'is-active main-router-link' : 'main-router-link'
-            }
-            to='/'
-          >
-            State
-          </NavLink>
-          <NavLink
-            className={(navData) =>
-              navData.isActive ? 'is-active main-router-link' : 'main-router-link'
-            }
-            to='/diff'
-          >
-            Diff
-          </NavLink>
-        </div>
-      </div>
-      <HeatMapLegend />
-      <Routes>
-        <Route
-          path='/diff/*'
-          element={
-            <div>
-              <DiffRoute snapshot={snapshot} />
-              {/* <Outlet/> */}
-            </div>
-          }
-        />
-        <Route
-          path='/*'
-          element={
-            <div style={{ height: '100%' }}>
+      <div className='state-container'>
+        <div className='main-navbar-container--structural'></div>
+        <Routes>
+          <Route
+            path='/*'
+            element={
               <StateRoute
                 axSnapshots={axSnapshots}
                 webMetrics={webMetrics}
@@ -70,13 +38,10 @@ const StateContainer = (props: StateContainerProps): JSX.Element => {
                 snapshots={snapshots}
                 currLocation={currLocation}
               />
-              {/* <Outlet/> */}
-              {/* <HeatMapLegend /> */}
-            </div>
-          }
-        />
-      </Routes>
-    </div>
+            }
+          />
+        </Routes>
+      </div>
     </>
   );
 };
diff --git a/src/app/containers/TravelContainer.tsx b/src/app/containers/TravelContainer.tsx
index 7fc2506a2..9bda1a623 100644
--- a/src/app/containers/TravelContainer.tsx
+++ b/src/app/containers/TravelContainer.tsx
@@ -1,6 +1,5 @@
 /* eslint-disable max-len */
 import React, { useState } from 'react';
-import MainSlider from '../components/TimeTravel/MainSlider';
 import Dropdown from '../components/TimeTravel/Dropdown';
 import {
   playForward,
@@ -85,7 +84,6 @@ function TravelContainer(props: TravelContainerProps): JSX.Element {
       >
         {playing ? 'Pause' : 'Play'}
       </Button>
-      <MainSlider className='main-slider' snapshotsLength={snapshotsLength} />
       <Button
         variant='contained'
         className='backward-button'
diff --git a/src/app/slices/AxSlices/axLegendSlice.tsx b/src/app/slices/AxSlices/axLegendSlice.tsx
deleted file mode 100644
index 08e29e2ff..000000000
--- a/src/app/slices/AxSlices/axLegendSlice.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { createSlice } from '@reduxjs/toolkit';
-
-export const axLegendSlice = createSlice({
-    name: 'axLegend',
-    initialState: {
-        axLegendButtonClicked: false,
-    },
-    reducers: {
-        renderAxLegend: (state) => {
-            if (!state.axLegendButtonClicked) state.axLegendButtonClicked = true;
-            else state.axLegendButtonClicked = false;
-        }
-    }
-})
-
-export const { renderAxLegend } = axLegendSlice.actions;
-
-export default axLegendSlice.reducer;
\ No newline at end of file
diff --git a/src/app/slices/mainSlice.ts b/src/app/slices/mainSlice.ts
index 98fd12d6e..86292fa41 100644
--- a/src/app/slices/mainSlice.ts
+++ b/src/app/slices/mainSlice.ts
@@ -202,6 +202,7 @@ export const mainSlice = createSlice({
     },
 
     changeSlider: (state, action) => {
+      //should really be called jump to snapshot
       const { port, currentTab, tabs } = state;
       const { hierarchy, snapshots } = tabs[currentTab] || {};
 
@@ -209,6 +210,8 @@ export const mainSlice = createSlice({
       const nameFromIndex = findName(action.payload, hierarchy);
       // nameFromIndex is a number based on which jump button is pushed
 
+      console.log('changeSlider to ', action.payload);
+
       port.postMessage({
         action: 'jumpToSnap',
         payload: snapshots[action.payload],
@@ -449,7 +452,15 @@ export const mainSlice = createSlice({
 
     toggleExpanded: (state, action) => {
       const { tabs, currentTab } = state;
-      // find correct node from currLocation and toggle isExpanded
+      const snapshot = tabs[currentTab].currLocation.stateSnapshot;
+
+      // Special case for root node
+      if (action.payload.name === 'root' && snapshot.name === 'root') {
+        snapshot.isExpanded = !snapshot.isExpanded;
+        return;
+      }
+
+      // Regular case for other nodes
       const checkChildren = (node) => {
         if (_.isEqual(node, action.payload)) {
           node.isExpanded = !node.isExpanded;
@@ -459,7 +470,7 @@ export const mainSlice = createSlice({
           });
         }
       };
-      checkChildren(tabs[currentTab].currLocation.stateSnapshot);
+      checkChildren(snapshot);
     },
 
     deleteSeries: (state) => {
diff --git a/src/app/store.ts b/src/app/store.ts
index 459bf1fbb..9ed9da56e 100644
--- a/src/app/store.ts
+++ b/src/app/store.ts
@@ -1,13 +1,11 @@
 //Import store from redux tool kit
 import { configureStore } from '@reduxjs/toolkit';
 import { mainSlice } from './slices/mainSlice';
-import { axLegendSlice } from './slices/AxSlices/axLegendSlice';
 
 //Export Store
 export const store = configureStore({
   reducer: {
     main: mainSlice.reducer,
-    axLegend: axLegendSlice.reducer,
   },
   middleware: (getDefaultMiddleware) => getDefaultMiddleware({ serializableCheck: false }),
 });
diff --git a/src/app/styles/abstracts/_variablesLM.scss b/src/app/styles/abstracts/_variablesLM.scss
index 75501f4af..b1eec554c 100644
--- a/src/app/styles/abstracts/_variablesLM.scss
+++ b/src/app/styles/abstracts/_variablesLM.scss
@@ -9,7 +9,6 @@ $text-font-stack: 'Outfit', sans-serif !default;
 $primary-color: #284b63;
 $primary-color-weak: #81929e;
 $primary-color-strong: #3c6e71;
-$secondary-color: #df6f37;
 
 //gradient used for some buttons
 $primary-strong-gradient: linear-gradient(
@@ -25,18 +24,12 @@ $background-color-weak: #d9d9d9;
 $contrasting-color: #161617;
 $contrasting-color-weak: #353536;
 
-/// HEATMAP COLORS
-$heat-level-1: #F1B476;
-$heat-level-2: #E4765B;
-$heat-level-3: #C64442;
-$heat-level-4: #8C2743;
-
 /////////////////////////////////////////////////////////////////////
 // ALL OF THE FOLLOWING COLORS SHOULD REFERENCE A COLOR FROM ABOVE //
 /////////////////////////////////////////////////////////////////////
 
 /// @type Color
- 
+
 //general text color theme
 $dark-text: $contrasting-color;
 $light-text: $background-color;
@@ -70,14 +63,10 @@ $tab-arrow-indicator: lighten($contrasting-color, 30%);
 //SNAPSHOTS AND ROUTES LIST
 $action-tab-background: $background-color;
 $action-cont-border: $contrasting-color;
-//$action-clear-button: $primary-color; //currently being handled by mui theme.ts file
-//$action-clear-button-text: $background-color; //currently being handled by mui theme.ts file
-$route-bar: $primary-color-strong;
-$route-bar-text: $light-text;
 $indiv-action-input-bg: $background-color-strong;
 $indiv-action-selected: darken($background-color, 15%);
 $indiv-action-selected-text: $light-text;
-$indiv-action-filler-text: lighten($contrasting-color,60%);
+$indiv-action-filler-text: lighten($contrasting-color, 60%);
 $indiv-action-custom-text: $dark-text;
 $indiv-action-border: $contrasting-color-weak;
 $indiv-action-time: $primary-color-weak;
@@ -98,12 +87,12 @@ $header-button-inactive-text: $dark-text;
 $header-button-hover: lighten($header-button-inactive, 20%);
 
 //the buttons/tabs controlling what is displayed in STATECONTAINER (Map, Performance, History, Web Metrics, Tree)
-$navbar-background: $background-color; //this color only shows up in Diff mode when buttons don't fill the whole bar //DIFF FEATURE IS CURRENTLY COMMENTED OUT 
+$navbar-background: $background-color; //this color only shows up in Diff mode when buttons don't fill the whole bar //DIFF FEATURE IS CURRENTLY COMMENTED OUT
 $navbar-selected: $primary-color-strong;
 $navbar-selected-text: $light-text;
 $navbar-unselected: $primary-color-weak;
 $navbar-unselected-text: $dark-text;
-$navbar-hover: darken($navbar-unselected,15%);
+$navbar-hover: darken($navbar-unselected, 15%);
 
 $state-background: $background-color-strong;
 $state-cont-border: $contrasting-color;
diff --git a/src/app/styles/base/_base.scss b/src/app/styles/base/_base.scss
deleted file mode 100644
index 3dc53f1cc..000000000
--- a/src/app/styles/base/_base.scss
+++ /dev/null
@@ -1,65 +0,0 @@
-html {
-  margin: 0;
-  padding: 0;
-  height: 100%;
-}
-
-body {
-  margin: 0;
-  height: 100%;
-}
-
-#root {
-  height: 100%;
-}
-
-.travel-container {
-  grid-area: travel;
-}
-.action-container {
-  grid-area: actions;
-  transition: 0.5s;
-}
-
-.perf-rect {
-  fill: $perf-background;
-}
-
-.state-container-container {
-  grid-area: states;
-}
-
-.buttons-container {
-  //color: #ff0000;
-  grid-area: buttons;
-  //border-color: #ff0000;
-}
-
-.action-container {
-  border-style: solid;
-  border-color: $action-cont-border;
-  border-width: 0px;
-}
-
-.state-container {
-  border-style: solid;
-  border-color: $state-cont-border;
-  border-width: 0px;
-}
-
-.travel-container {
-  border-style: solid;
-  border-color: $travel-top-border;
-  border-left: 0px;
-  border-right: 0px;
-  border-bottom: 0px;
-}
-
-.saveSeriesContainer {
-  padding-bottom: 15px;
-  padding-top: 10px;
-}
-
-.performance-dropdown {
-  background-color: #f5b9b9;
-}
diff --git a/src/app/styles/base/_typography.scss b/src/app/styles/base/_typography.scss
deleted file mode 100644
index c550ea0d2..000000000
--- a/src/app/styles/base/_typography.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-body {
-  color: $contrasting-color;
-  font: normal 16px $text-font-stack;
-}
diff --git a/src/app/styles/components/_actionComponent.scss b/src/app/styles/components/_actionComponent.scss
index b28f8fcfc..523e3bfcc 100644
--- a/src/app/styles/components/_actionComponent.scss
+++ b/src/app/styles/components/_actionComponent.scss
@@ -1,53 +1,127 @@
-.action-component {
-  padding: 3px 10px;
-  display: grid;
-  grid-template-columns: none;
-  align-items: center;
-  height: 24px;
-  // background-color: $brand-color;
-  // border-bottom-style: solid;
-  // border-bottom-width: 1px;
-  // background-color: none;
-  // border-color: #292929;
-  // border-color: $border-color;
-  cursor: pointer;
-  overflow: hidden;
-  @extend %disable-highlight;
+.route-container {
+  width: 100%;
 }
 
-.clear-button {
-  background-color:#187924;
-  color:#187924;
+.route-header {
+  background-color: #1f2937;
+  color: #ffffff;
+  padding: 10px;
+  font-size: 14px;
 }
 
-.action-component-text {
-  margin-bottom: 8px;
-  color: $indiv-action-custom-text
+.route-content {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 50px;
+}
+
+/* Container for individual action */
+.individual-action {
+  margin: 0;
+  padding: 0;
+}
+
+.action-component {
+  display: flex;
+  padding: 6px 16px;
+  background: white;
+  border-bottom: 1px solid #e5e7eb;
+  transition: background-color 200ms ease;
+}
+
+.action-component:hover {
+  background-color: #f9fafb;
 }
 
 .action-component.selected {
-  //font-size: 16px;
-  background-color: $indiv-action-selected;
-  color: $indiv-action-selected-text
+  background-color: #f3f4f6;
 }
 
-.action-component.exclude {
-  color: #ff0000;
+.action-component-trigger {
+  width: 100%;
   display: flex;
-  justify-content: center;
-  margin-top: 10px;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.action-component-text {
+  flex: 1;
 }
 
-.action-component:focus {
+/* Input styling */
+.actionname {
+  border: none;
+  background: transparent;
+  font-size: 1rem;
+  color: #374151;
+  width: 100%;
+  padding: 2px 0;
+}
+
+.actionname::placeholder {
+  color: #6b7280;
+}
+
+.actionname:focus {
   outline: none;
 }
 
-.action-component-trigger {
-  display: grid;
-  grid-template-columns: 4fr 1fr;
+/* Button styling */
+.time-button,
+.jump-button,
+.current-location {
+  min-width: 90px;
+  height: 28px; /* Fixed height for better vertical centering */
+  padding: 0 8px; /* Reduced vertical padding */
+  border-radius: 6px;
+  font-size: 0.9375rem;
+  font-weight: 500;
+  display: flex;
   align-items: center;
-  //height: 20px;
-  cursor: pointer;
-  overflow: hidden;
-  @extend %disable-highlight;
+  justify-content: center;
+  border: none;
+  transition: all 200ms ease;
+  margin: 0;
+}
+
+.time-button {
+  color: #6b7280;
+  background: transparent;
+}
+
+.jump-button {
+  color: white;
+  background: #111827;
+}
+
+.jump-button:hover {
+  background: #374151;
+}
+
+.current-location {
+  color: #059669;
+  background: #ecfdf5;
+}
+
+/* Hide/show button transitions */
+.action-component:hover .time-button {
+  display: none;
+}
+
+.action-component:hover .jump-button {
+  display: block;
+}
+
+.jump-button {
+  display: none;
+}
+
+.current-snap {
+  font-weight: bold;
+  border: none;
+  background: transparent;
+  font-size: 1rem;
+  color: #374151;
+  width: 100%;
+  padding: 2px 32px 2px 0px;
 }
diff --git a/src/app/styles/components/_ax.scss b/src/app/styles/components/_ax.scss
index 1185b8c24..da40c30a0 100644
--- a/src/app/styles/components/_ax.scss
+++ b/src/app/styles/components/_ax.scss
@@ -1,6 +1,62 @@
 // Ax.tsx
-#axControls {
-    display: inline-flex;
-    position: sticky;
-    left: 0;
-}
\ No newline at end of file
+.axControls {
+  display: flex;
+  justify-content: space-evenly;
+}
+
+/* Container for the radio controls */
+.accessibility-controls {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 12px 24px;
+}
+
+/* Hide the default radio inputs */
+.accessibility-controls input[type='radio'] {
+  display: none;
+}
+
+/* Style the labels as buttons */
+.accessibility-controls label {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 60px;
+  padding: 6px 12px;
+  font-family: 'Outfit', sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  color: white;
+  background-color: #14b8a6;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 200ms ease;
+  user-select: none;
+}
+.accessibility-controls label:hover {
+  background-color: #0d9488;
+  transform: translateY(-1px);
+}
+
+.accessibility-text {
+  padding: 12px 24px;
+  max-width: 800px;
+  line-height: 1.5;
+}
+
+.accessibility-text p {
+  margin: 0;
+  color: #374151;
+  font-size: 16px;
+  font-family: 'Outfit', sans-serif;
+}
+
+.tooltipData-JSONTree {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  padding: 8px 12px;
+  border-bottom: 1px solid #e5e7eb;
+  transition: background-color 150ms ease;
+}
diff --git a/src/app/styles/components/_buttons.scss b/src/app/styles/components/_buttons.scss
index 5eb55191e..4ba62e7b9 100644
--- a/src/app/styles/components/_buttons.scss
+++ b/src/app/styles/components/_buttons.scss
@@ -1,80 +1,5 @@
 @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');
 
-.save-series-button {
-  padding: 3px;
-  outline: transparent;
-  color: $performance-save-series-button-text;
-  font-size: 16px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-style: solid;
-  border-color: transparent;
-  border-radius: 5px;
-  cursor: pointer;
-  line-height: 1.5em;
-  font: 400 16px 'Outfit', sans-serif;
-  width: 120px;
-  background: $performance-save-series-button;
-  height: 30px;
-  position: absolute;
-  right: 3rem;
-
-  &.animate {
-    background: rgb(41, 164, 41);
-  }
-}
-
-.delete-button {
-  padding: 3px;
-  outline: transparent;
-  color: white;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-style: solid;
-  border-color: transparent;
-  border-radius: 3px;
-  cursor: pointer;
-  line-height: 1.5em;
-  font: 300 16px 'Outfit', sans-serif;
-  font-size: $button-text-size;
-  width: 120px;
-  height: 30px;
-
-  &.animate {
-    background-color: rgb(41, 164, 41);
-  }
-}
-
-.empty-button {
-  padding: 3px;
-  outline: transparent;
-  color: black;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-style: solid;
-  border-color: transparent;
-  border-radius: 3px;
-  cursor: pointer;
-  line-height: 1.5em;
-  font: 500 16px 'Roboto', sans-serif;
-  width: 120px;
-  //background: #ff0000;
-}
-
-.clear-button {
-  background: #3256f1;
-  background-color: #050787;
-  color: #3256f1;
-}
-
-.empty-button:hover {
-  color: black;
-  box-shadow: #ff0001;
-}
-
 .state-dropdown {
   width: 240px;
   margin-left: 20px;
@@ -87,7 +12,9 @@
 .action-component:hover .jump-button {
   opacity: 1;
   transform: rotateX(0deg);
-  transition: opacity 300ms, transform 0.15s linear;
+  transition:
+    opacity 300ms,
+    transform 0.15s linear;
 }
 
 .time-button {
@@ -114,7 +41,9 @@
   background-color: #232529;
   color: #ffffff;
   transform: rotateX(90deg);
-  transition: opacity 300ms, transform 0.15s linear;
+  transition:
+    opacity 300ms,
+    transform 0.15s linear;
   opacity: 0;
   display: flex;
   align-items: center;
@@ -123,13 +52,6 @@
   padding-bottom: 5px;
 }
 
-.jump-button:hover {
-  // remove the blue border when button is clicked
-  color: $jump-text;
-  background-color: $jump-hover;
-  cursor: pointer;
-}
-
 .current-location {
   outline: none;
   height: $time-button-height;
@@ -139,11 +61,6 @@
   border-radius: 3px;
 }
 
-.empty-button:hover {
-  color: white;
-  background-color: #ff0001;
-}
-
 .play-button {
   width: 100px;
   height: 25px;
@@ -181,24 +98,7 @@
   cursor: pointer;
 }
 
-// .pause-button {
-//   color: #ff0000;
-//   background-color: #ff0000;
-// }
-
-.import-button:hover,
-.howToUse-button:hover,
-.export-button:hover,
-.pause-button:hover,
-.reconnect-button:hover {
-  //@extend %button-shared;
-  color: $function-bar-text-hover;
-  box-shadow: 1px 1px 2px 1px rgba(30, 86, 171, 0.25);
-  transform: translate3d(0, -3px, 0);
-}
-
 .svg-inline--fa {
-  //color: $blue-brand;
   margin-right: 0.75em;
   display: inline-block;
   font-size: inherit;
@@ -207,198 +107,126 @@
   vertical-align: -0.125em;
 }
 
-%button-shared {
-  padding: 5px;
-  outline: none;
+/* sidebar button open and closing functionality */
+/* Container for arrow and collapse text */
+#arrow {
+  height: 44px;
   display: flex;
-  justify-content: center;
   align-items: center;
-  cursor: pointer;
-  line-height: 1.5em;
-  font: 300 16px 'Outfit', sans-serif;
-  font-size: $button-text-size;
-
-  background: #ff0001;
-  border-radius: 5px;
-  position: relative;
-  border: 1px solid #b8c4c240;
-
-  @extend %disable-highlight;
-}
-
-// Save button
-.dropdown-dark {
-  background: #444;
-  border-color: #111111 #0a0a0a black;
-  background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.4));
-  background-image: -moz-linear-gradient(top, transparent, rgba(0, 0, 0, 0.4));
-  background-image: -o-linear-gradient(top, transparent, rgba(0, 0, 0, 0.4));
-  background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.4));
-  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 1px rgba(0, 0, 0, 0.2);
-  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 1px rgba(0, 0, 0, 0.2);
+  background-color: white;
 }
 
-.dropdown-dark:before {
-  border-bottom-color: #aaa;
-}
-
-.dropdown-dark:after {
-  border-top-color: #aaa;
+/* Base toggle styling */
+.toggle {
+  height: 100%;
+  width: 45px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  cursor: pointer;
 }
 
-.dropdown-dark .dropdown-select {
-  color: #aaa;
-  text-shadow: 0 1px black;
-  background: #444;
-  /* Fallback for IE 8 */
+/* Modern chevron using border technique - default facing left */
+.toggle i {
+  position: relative;
+  width: 6px;
+  height: 6px;
+  border-right: 2px solid #6b7280;
+  border-bottom: 2px solid #6b7280;
+  transform: rotate(135deg); /* Changed to 135deg to face left by default */
+  transition: transform 0.3s ease;
+  display: block;
 }
 
-.dropdown-dark .dropdown-select:focus {
-  color: #ccc;
+/* Clean up unused pseudo-elements */
+.toggle i::before,
+.toggle i::after {
+  display: none;
 }
 
-.dropdown-dark .dropdown-select > option {
-  background: #444;
-  text-shadow: 0 1px rgba(0, 0, 0, 0.4);
+/* Rotation for collapsed state - rotate to face right */
+.no-aside .toggle i {
+  transform: rotate(-45deg); /* Changed to -45deg to face right when collapsed */
 }
 
-.MuiSelect-icon {
-  color: lightgrey !important;
+/* Hover state matching modern UI */
+.toggle:hover i {
+  border-color: #374151;
 }
 
-.series-options-container {
-  margin: 0 1rem;
+/* Modern collapse text styling */
+.collapse {
+  display: flex;
+  align-items: center;
+  color: #6b7280;
+  font-size: 1.1rem;
+  font-weight: 500;
+  font-family: 'Outfit', sans-serif;
+  transition: color 0.2s ease;
 }
 
-.snapshotId-header {
-  font-size: 1rem;
+.record-button-container {
+  display: flex;
+  align-items: center;
+  padding: 4px 16px;
+  background: transparent;
+  gap: 8px;
 }
 
-.dropdown-and-delete-series-container {
-
+.record-label {
   display: flex;
   align-items: center;
-  justify-content: space-around;
-  margin: 16px 0 24px 0;
+  gap: 8px;
+  color: #374151;
+  font-size: 14px;
+  font-weight: 500;
 }
 
-.close-button-container {
-  display: flex;
-  justify-content: flex-end;
+.record-icon {
+  width: 10px;
+  height: 10px;
+  background-color: #ef4444;
+  border-radius: 50%;
+  transition: opacity 0.3s ease;
 }
 
-.closebtn {
-  font-size: 20px;
-  color: #818181;
-  background-color: transparent;
-  border: none;
-  box-shadow: none;
+.record-icon.recording {
+  animation: pulse 2s infinite;
 }
 
-.closebtn:hover {
-  color: #f1f1f1;
+@keyframes pulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+  100% {
+    opacity: 1;
+  }
 }
 
-.side-bar-button {
-  width: 80px;
-  height: 30px;
-  padding: 0 2rem;
+/* Hover state for the entire action area */
+#arrow:hover .collapse {
+  color: #374151;
 }
 
-/* sidebar button open and closing functionality */
+/* Smooth transition for sidebar */
 aside {
-  //background: #242529;
-  color: #fff;
-  transition: width 1s;
-  width: 100%; //JR
+  background-color: white;
+  transition: width 0.3s ease;
 }
 
 .no-aside {
   width: 45px;
-  // margin-right: 15px;
-}
-
-//JR added for collapse label
-.collapse {
-  color: $collapse-text;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
 }
 
+/* Hide collapse text when sidebar is collapsed */
 .hidden {
   display: none;
 }
 
-.toggle:hover {
-  cursor: pointer;
-}
-
-.toggle {
-  // display: block;
-  // position: relative;
-  // margin-top: 1rem;
-  height: 100%; //JR
-}
-
-/* toggle i handles arrow animation */
-.toggle i,
-.toggle i::after,
-.toggle i::before {
-  position: absolute;
-  width: 27px;
-  height: 4px;
-  border-radius: 4px;
-  transition: transform 0.15s;
-  background-color: $icon-primary;
-}
-
-.toggle i {
-  top: 16px;
-  left: 10px;
-  display: block;
-  background: $icon-primary;
-}
-
-.toggle i::before {
-  top: -6px;
-}
-
-.toggle i::after {
-  bottom: -6px;
-}
-
-.toggle i::after,
-.toggle i::before {
-  content: '';
-  display: block;
-  // top: -5px;
-}
-
-.toggle i::before {
-  transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1);
-}
-
-.toggle i::after {
-  transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1);
-}
-
-.no-aside .toggle i::before,
-.no-aside .toggle i::after {
-  transform: none;
-}
-
-#arrow {
-  // margin-bottom: 40px;
-  // display: flex;
-  // justify-content: flex-start;
-
-  //JR
-  height: 100%;
-  display: grid;
-  grid-template-columns: 45px 1fr;
-}
-
 /* ^ sidebar button open and closing functionality */
 .reconnect-button-pop-up {
   padding: 3px;
@@ -449,8 +277,6 @@ aside {
   border-radius: 3px;
   line-height: 1.5em;
   outline: transparent;
-  //background: $blue-color-gradient;
-  //box-shadow: $box-shadow-blue;
   &:hover {
     color: $contrasting-color;
     background-color: #ff0001;
@@ -462,3 +288,19 @@ aside {
   margin-left: 5px;
   margin-right: -22px;
 }
+
+.clear-button-modern {
+  width: 100% !important;
+  background-color: #f3f4f6 !important;
+  color: #374151 !important;
+  font-size: 0.875rem !important;
+  font-weight: 500 !important;
+  text-transform: uppercase !important;
+  padding: 0.375rem 1rem !important;
+  border-radius: 0.375rem !important;
+  transition: background-color 200ms ease-in-out !important;
+}
+
+.clear-button-modern:hover {
+  background-color: #e5e7eb !important;
+}
diff --git a/src/app/styles/components/_componentMap.scss b/src/app/styles/components/_componentMap.scss
index 565c14b66..c1735a1fe 100644
--- a/src/app/styles/components/_componentMap.scss
+++ b/src/app/styles/components/_componentMap.scss
@@ -1,46 +1,150 @@
-// .compMapLink {
-//   // stroke: $map-link;
-//   stroke: $secondary-color;
-// }
-.compMapLink:hover {
-  box-shadow: 10px 10px rgb(163, 205, 24);
-};
+/* Component Map Container */
+.componentMapContainer {
+  fill: #f9fafb;
+  transition: all 0.3s ease;
+  overflow: auto;
+}
+.componentMapContainer svg {
+  background-color: #f9fafb;
+}
 
-.comp-map-options {
-  color: $map-options-label;
+#root {
+  height: 100%;
 }
 
-//this was supposed to control the dropDownStyle object in LinkControls.tsx (the dropdown menus in ComponentMap)
-// .comp-map-dropdown {
-//   backgroundColor: #ff0008;
-//   color: #ff0007;
-//   background: #ff0006;
-// }
+/* Node Styling */
+.compMapParent,
+.compMapChild {
+  fill: #ffffff;
+  stroke: #e5e7eb;
+  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.05));
+  transition: all 0.2s ease;
+}
 
-// .compMapParent {
-//   //fill: $map-parent-fill;
-//   //stroke: $map-parent-stroke;
-// }
+.compMapParent:hover,
+.compMapChild:hover {
+  stroke: #14b8a6;
+  stroke-width: 2px;
+  cursor: pointer;
+  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
+}
 
-.compMapParentText {
-  fill: $map-parent-text
+/* Root Node Styling */
+.compMapRoot {
+  fill: #14b8a6;
+  stroke: #0d9488;
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
+  transition: all 0.2s ease;
 }
 
-.compMapChild {
-  fill: $map-child-fill;
-  stroke: $map-child-stroke;
+.compMapRoot:hover {
+  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
+  cursor: pointer;
+  transform: scale(1.05);
 }
 
+/* Text Styling */
+.compMapRootText {
+  fill: #ffffff;
+  font-family: 'Outfit', sans-serif;
+  font-weight: 500;
+  user-select: none;
+}
+
+.compMapParentText,
 .compMapChildText {
-  fill: $map-child-text;
+  fill: #374151;
+  font-family: 'Outfit', sans-serif;
+  font-weight: 500;
+  user-select: none;
 }
 
-.compMapRoot {
-  //fill: $map-root-fill;
-  stroke: $map-root-stroke;
+/* Link Styling */
+.compMapLink {
+  stroke-linecap: round;
+  transition: all 0.3s ease;
 }
 
-.compMapRootText {
-  fill: $map-root-text;
+.compMapLink:hover {
+  stroke-width: 2;
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
 }
 
+.link-controls {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 12px 16px;
+  background: white;
+  border-bottom: 1px solid #e5e7eb;
+  justify-content: space-between;
+  max-width: 1200px;
+}
+
+.control-group {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.control-label {
+  font-size: 14px;
+  font-weight: 500;
+  color: #4b5563;
+  user-select: none;
+}
+
+.control-select {
+  background-color: #f9fafb;
+  border: 1px solid #e5e7eb;
+  color: #374151;
+  font-size: 14px;
+  padding: 6px 12px;
+  border-radius: 6px;
+  min-width: 100px;
+  cursor: pointer;
+  transition: all 200ms ease;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  background-size: 16px;
+}
+
+.control-select:hover {
+  border-color: #d1d5db;
+  background-color: #f3f4f6;
+}
+
+.control-select:focus {
+  outline: none;
+  border-color: #14b8a6;
+  box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.1);
+}
+
+.control-range {
+  appearance: none;
+  width: 120px;
+  height: 4px;
+  border-radius: 2px;
+  background: #e5e7eb;
+  outline: none;
+  margin: 0;
+  cursor: pointer;
+
+  &::-webkit-slider-thumb {
+    appearance: none;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: #14b8a6;
+    cursor: pointer;
+    transition: all 200ms ease;
+    border: none;
+
+    &:hover {
+      background: #0d9488;
+      transform: scale(1.1);
+    }
+  }
+}
diff --git a/src/app/styles/components/_jsonTree.scss b/src/app/styles/components/_jsonTree.scss
deleted file mode 100644
index 95bdf5e4c..000000000
--- a/src/app/styles/components/_jsonTree.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.json-tree {
-  font-size: 13px;
-  overflow: auto;
-  margin: 10px;
-  padding: 0;
-  width: 900px;
-  background-color: $tree-background;
-  list-style: none;
-}
diff --git a/src/app/styles/components/_performanceVisx.scss b/src/app/styles/components/_performanceVisx.scss
index e631e27d1..dc57ee8a2 100644
--- a/src/app/styles/components/_performanceVisx.scss
+++ b/src/app/styles/components/_performanceVisx.scss
@@ -1,75 +1,77 @@
 @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');
 
-#RenderContainer {
+.saveSeriesContainer {
   display: flex;
-  justify-content: center;
-}
-
-.MuiSwitch-colorPrimary.Mui-checked {
-  color: $icon-primary !important;
-}
-
-.MuiSwitch-switchBase {
-  color: $icon-secondary !important;
-}
-
-.MuiSwitch-track {
-  background-color: $icon-bg !important;
+  align-items: center;
+  padding: 12px 16px;
+  background-color: white;
+  max-width: 1200px;
+  justify-content: space-around;
+  border-bottom: 1px solid #e5e7eb;
 }
 
-.MuiTypography-body1 {
-  font-size: 2em !important;
+.routesForm {
+  display: flex;
+  align-items: center;
+  gap: 10px;
 }
 
-#routes-formcontrol {
-  padding: 3px;
-  margin-left: 50px;
-  font: 400 16px 'Outfit', sans-serif;
-  text-align: left;
+#routes-dropdown {
+  font-size: 14px;
+  font-weight: 500;
+  color: #4b5563;
+  user-select: none;
+  white-space: nowrap;
 }
 
-#routes-dropdown {
-  color: $performance-options-label !important;
-  font: 400 16px 'Outfit', sans-serif;
-  text-align: left;
+.performance-dropdown,
+#routes-select,
+#snapshot-select,
+.control-select {
+  background-color: #f9fafb;
+  border: 1px solid #e5e7eb;
+  color: #374151;
+  font-size: 14px;
+  padding: 6px 12px;
+  border-radius: 6px;
+  min-width: 140px;
+  cursor: pointer;
+  transition: all 200ms ease;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  background-size: 16px;
 }
 
-.saveSeriesContainer {
-  #routes-select,
-  #snapshot-select {
-    background-color: $performance-options-dropdown !important;
-  }
+.performance-dropdown:hover,
+#routes-select:hover,
+#snapshot-select:hover,
+.control-select:hover {
+  border-color: #d1d5db;
+  background-color: #f3f4f6;
 }
 
-.saveSeriesContainer {
-  #routes-select,
-  #snapshot-select {
-    &:hover {
-      cursor: pointer;
-    }
-  }
+.performance-dropdown:focus,
+#routes-select:focus,
+#snapshot-select:focus,
+.control-select:focus {
+  outline: none;
+  border-color: #14b8a6;
+  box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.1);
 }
 
-#routes-select,
-#snapshot-select {
-  color: white !important;
-  font: 400 16px 'Outfit', sans-serif;
-  text-align: left;
-  width: 120px;
-  height: 30px;
-  border-radius: 5px;
-  text-align: center;
+.routes,
+.control-select option {
+  padding: 0.5rem;
+  color: #1e293b;
 }
 
-#seriesname {
-  float: right;
-  width: 220px;
-  margin-right: 165px;
-  height: 24px;
+// bar graph background
+.perf-rect {
+  fill: #f9fafb;
 }
 
-input:focus,
-textarea:focus,
-select:focus {
-  outline: none;
+.bargraph-position {
+  background-color: #f9fafb;
 }
diff --git a/src/app/styles/components/_rc-slider.scss b/src/app/styles/components/_rc-slider.scss
index e50d273a2..89137886a 100644
--- a/src/app/styles/components/_rc-slider.scss
+++ b/src/app/styles/components/_rc-slider.scss
@@ -1,250 +1,230 @@
 .rc-slider {
-	position: relative;
-	width: 100%;
-	margin: 20px;
-	border-radius: 6px;
-	-ms-touch-action: none;
-	touch-action: none;
-	box-sizing: border-box;
-	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  position: relative;
+  width: 100%;
+  margin: 12px;
+  border-radius: 6px;
+  -ms-touch-action: none;
+  touch-action: none;
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
 .rc-slider * {
-	box-sizing: border-box;
-	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 .rc-slider-rail {
-	position: absolute;
-	width: 100%;
-	background-color: $slider-rail-right;
-	height: 4px;
-	border-radius: 6px;
+  position: absolute;
+  width: 100%;
+  background-color: $slider-rail-right;
+  height: 4px;
+  border-radius: 6px;
 }
 .rc-slider-track {
-	position: absolute;
-	left: 0;
-	height: 4px;
-	border-radius: 6px;
-	background-color: $slider-rail-left;
+  position: absolute;
+  left: 0;
+  height: 4px;
+  border-radius: 6px;
+  background-color: $slider-rail-left;
 }
 .rc-slider-handle {
-	position: absolute;
-	margin-left: -10px;
-	margin-top: -10px;
-	width: 25px;
-	height: 25px;
-	cursor: pointer;
-	cursor: -webkit-grab;
-	cursor: grab;
-	border-radius: 50%;
-	background: $slider-handle;
-	-ms-touch-action: pan-x;
-	touch-action: pan-x;
+  position: absolute;
+  margin-left: -8px;
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  cursor: -webkit-grab;
+  cursor: grab;
+  border-radius: 50%;
+  background: #374151;
+  border: none;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease;
+  -ms-touch-action: pan-x;
+  touch-action: pan-x;
 }
 .rc-slider-handle:focus {
-	border-color: #ff0001;
-	outline: none;
-}
-.rc-slider-handle-click-focused:focus {
-	border-color: #ff0001;
+  outline: none;
 }
+
 .rc-slider-handle:hover {
-	border-color: #ff0001;
+  transform: scale(1.1);
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
 }
 .rc-slider-handle:active {
-	//background: #f00004;
-	border-color: #ff0001;
-	cursor: -webkit-grabbing;
-	cursor: grabbing;
+  cursor: -webkit-grabbing;
+  cursor: grabbing;
+  transform: scale(1.1);
+  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
 }
 .rc-slider-mark {
-	position: absolute;
-	top: 18px;
-	left: 0;
-	width: 100%;
-	font-size: 16px;
+  position: absolute;
+  top: 18px;
+  left: 0;
+  width: 100%;
+  font-size: 16px;
 }
 .rc-slider-mark-text {
-	position: absolute;
-	display: inline-block;
-	vertical-align: middle;
-	text-align: center;
-	cursor: pointer;
-	color: #999;
+  position: absolute;
+  display: inline-block;
+  vertical-align: middle;
+  text-align: center;
+  cursor: pointer;
+  color: #999;
 }
 .rc-slider-mark-text-active {
-	color: #666;
+  color: #666;
 }
 .rc-slider-step {
-	position: absolute;
-	width: 100%;
-	height: 4px;
-	background: transparent;
-}
-.rc-slider-dot {
-	position: absolute;
-	bottom: -2px;
-	margin-left: -4px;
-	width: 8px;
-	height: 8px;
-	border: 2px solid #ff0001;
-	background-color: #fff;
-	cursor: pointer;
-	border-radius: 50%;
-	vertical-align: middle;
-}
-.rc-slider-dot-active {
-	border-color: #96dbfa;
-}
-.rc-slider-disabled {
-	background-color: #ff0001;
+  position: absolute;
+  width: 100%;
+  height: 4px;
+  background: transparent;
 }
+
 .rc-slider-disabled .rc-slider-track {
-	background-color: #ccc;
+  background-color: #ccc;
 }
 .rc-slider-disabled .rc-slider-handle,
 .rc-slider-disabled .rc-slider-dot {
-	border-color: #ccc;
-	box-shadow: none;
-	background-color: #fff;
-	cursor: not-allowed;
+  border-color: #ccc;
+  box-shadow: none;
+  background-color: #fff;
+  cursor: not-allowed;
 }
 .rc-slider-disabled .rc-slider-mark-text,
 .rc-slider-disabled .rc-slider-dot {
-	cursor: not-allowed !important;
+  cursor: not-allowed !important;
 }
 .rc-slider-vertical {
-	width: 14px;
-	height: 100%;
-	padding: 0 5px;
+  width: 14px;
+  height: 100%;
+  padding: 0 5px;
 }
 .rc-slider-vertical .rc-slider-rail {
-	height: 100%;
-	width: 4px;
+  height: 100%;
+  width: 4px;
 }
 .rc-slider-vertical .rc-slider-track {
-	left: 5px;
-	bottom: 0;
-	width: 4px;
+  left: 5px;
+  bottom: 0;
+  width: 4px;
 }
 .rc-slider-vertical .rc-slider-handle {
-	margin-left: -5px;
-	margin-bottom: -7px;
-	-ms-touch-action: pan-y;
-	touch-action: pan-y;
+  -ms-touch-action: pan-y;
+  touch-action: pan-y;
 }
 .rc-slider-vertical .rc-slider-mark {
-	top: 0;
-	left: 18px;
-	height: 100%;
+  top: 0;
+  left: 18px;
+  height: 100%;
 }
 .rc-slider-vertical .rc-slider-step {
-	height: 100%;
-	width: 4px;
-}
-.rc-slider-vertical .rc-slider-dot {
-	left: 2px;
-	margin-bottom: -4px;
+  height: 100%;
+  width: 4px;
 }
+
 .rc-slider-vertical .rc-slider-dot:first-child {
-	margin-bottom: -4px;
+  margin-bottom: -4px;
 }
 .rc-slider-vertical .rc-slider-dot:last-child {
-	margin-bottom: -4px;
+  margin-bottom: -4px;
 }
 .rc-slider-tooltip-zoom-down-enter,
 .rc-slider-tooltip-zoom-down-appear {
-	animation-duration: 0.3s;
-	animation-fill-mode: both;
-	display: block !important;
-	animation-play-state: paused;
+  animation-duration: 0.3s;
+  animation-fill-mode: both;
+  display: block !important;
+  animation-play-state: paused;
 }
 .rc-slider-tooltip-zoom-down-leave {
-	animation-duration: 0.3s;
-	animation-fill-mode: both;
-	display: block !important;
-	animation-play-state: paused;
+  animation-duration: 0.3s;
+  animation-fill-mode: both;
+  display: block !important;
+  animation-play-state: paused;
 }
 .rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active,
 .rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active {
-	animation-name: rcSliderTooltipZoomDownIn;
-	animation-play-state: running;
+  animation-name: rcSliderTooltipZoomDownIn;
+  animation-play-state: running;
 }
 .rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active {
-	animation-name: rcSliderTooltipZoomDownOut;
-	animation-play-state: running;
+  animation-name: rcSliderTooltipZoomDownOut;
+  animation-play-state: running;
 }
 .rc-slider-tooltip-zoom-down-enter,
 .rc-slider-tooltip-zoom-down-appear {
-	transform: scale(0, 0);
-	animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+  transform: scale(0, 0);
+  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
 }
 .rc-slider-tooltip-zoom-down-leave {
-	animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+  animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
 }
 @keyframes rcSliderTooltipZoomDownIn {
-	0% {
-		opacity: 0;
-		transform-origin: 50% 100%;
-		transform: scale(0, 0);
-	}
-	100% {
-		transform-origin: 50% 100%;
-		transform: scale(1, 1);
-	}
+  0% {
+    opacity: 0;
+    transform-origin: 50% 100%;
+    transform: scale(0, 0);
+  }
+  100% {
+    transform-origin: 50% 100%;
+    transform: scale(1, 1);
+  }
 }
 @keyframes rcSliderTooltipZoomDownOut {
-	0% {
-		transform-origin: 50% 100%;
-		transform: scale(1, 1);
-	}
-	100% {
-		opacity: 0;
-		transform-origin: 50% 100%;
-		transform: scale(0, 0);
-	}
+  0% {
+    transform-origin: 50% 100%;
+    transform: scale(1, 1);
+  }
+  100% {
+    opacity: 0;
+    transform-origin: 50% 100%;
+    transform: scale(0, 0);
+  }
 }
 .rc-slider-tooltip {
-	position: absolute;
-	left: -9999px;
-	top: -9999px;
-	visibility: visible;
-	box-sizing: border-box;
-	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  position: absolute;
+  left: -9999px;
+  top: -9999px;
+  visibility: visible;
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 .rc-slider-tooltip * {
-	box-sizing: border-box;
-	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 .rc-slider-tooltip-hidden {
-	display: none;
+  display: none;
 }
 .rc-slider-tooltip-placement-top {
-	padding: 4px 0 8px 0;
+  padding: 4px 0 8px 0;
 }
 .rc-slider-tooltip-inner {
-	padding: 6px 2px;
-	min-width: 24px;
-	height: 24px;
-	font-size: 16px;
-	line-height: 1;
-	color: #fff;
-	text-align: center;
-	text-decoration: none;
-	background-color: #6c6c6c;
-	border-radius: 6px;
+  padding: 6px 2px;
+  min-width: 24px;
+  height: 24px;
+  font-size: 16px;
+  line-height: 1;
+  color: #fff;
+  text-align: center;
+  text-decoration: none;
+  background-color: #6c6c6c;
+  border-radius: 6px;
 }
 .rc-slider-tooltip-arrow {
-	position: absolute;
-	width: 0;
-	height: 0;
-	border-color: transparent;
-	border-style: solid;
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
 }
 .rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow {
-	bottom: 4px;
-	left: 50%;
-	margin-left: -4px;
-	border-width: 4px 4px 0;
-	border-top-color: #6c6c6c;
+  bottom: 4px;
+  left: 50%;
+  margin-left: -4px;
+  border-width: 4px 4px 0;
+  border-top-color: #6c6c6c;
 }
diff --git a/src/app/styles/components/_renderingFrequency.scss b/src/app/styles/components/_renderingFrequency.scss
deleted file mode 100644
index 3786192d2..000000000
--- a/src/app/styles/components/_renderingFrequency.scss
+++ /dev/null
@@ -1,115 +0,0 @@
-.borderStyling {
-  border-radius: 5px;
-  border: 1px solid rgba(184, 196, 194, 0.25);
-  box-shadow: 2px 3px 4px 2px rgba(0, 0, 0, 0.2);
-  width: 53vw;
-}
-
-.borderCheck {
-  border: 1px solid rgba(184, 196, 194, 0.25);
-  box-shadow: 2px 3px 4px 2px rgba(0, 0, 0, 0.2);
-  padding: 5px;
-  width: 10vw;
-  height: 25vw;
-  overflow-y: scroll;
-  overflow-wrap: break-word;
-  overscroll-behavior: contain;
-}
-
-.DataComponent {
-  padding-left: 30px;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  width: 50vw;
-  height: 40vw;
-  overflow-y: scroll;
-  overflow-wrap: break-word;
-  overscroll-behavior: contain;
-}
-
-.StyledGridElement {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background: $background-color-strong;
-  padding: 20px;
-  height: 5vh;
-  margin: 20px 10px;
-  font-family: 'Roboto', sans-serif;
-
-  h3 {
-    color: $primary-color;
-    margin-bottom: 5px;
-    margin-top: 5px;
-    text-transform: uppercase;
-    font-size: 16px;
-    font-weight: 500;
-  }
-
-  h4 {
-    color: $primary-color-strong;
-    margin-bottom: 5px;
-    margin-top: 5px;
-    font-weight: 300;
-  }
-
-  p {
-    color: $primary-color-strong;
-    line-height: 20px;
-    text-align: center;
-    font-size: 18px;
-    line-height: 18px;
-  }
-}
-
-.ExpandStyledGridElement {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  background: $background-color-strong;
-  padding: 20px;
-  margin: 20px 10px;
-  font-family: 'Roboto', sans-serif;
-
-  h3 {
-    color: $primary-color;
-    margin-bottom: 5px;
-    margin-top: 5px;
-    text-transform: uppercase;
-    font-size: 16px;
-    font-weight: 500;
-  }
-
-  h4 {
-    color: $primary-color-strong;
-    margin-bottom: 5px;
-    margin-top: 5px;
-    font-weight: 300;
-  }
-
-  p {
-    color: $primary-color-strong;
-    line-height: 20px;
-    text-align: center;
-    font-size: 18px;
-    line-height: 18px;
-  }
-}
-
-.RenderRight {
-  cursor: pointer;
-  padding-right: 5px;
-  border-right: 5px;
-  //background: $blue-color-gradient;
-  width: 50px;
-  padding: 0 0.5em;
-  right: 10%;
-  opacity: 70%;
-  transition: 0.3s;
-}
-
-.RenderRight:hover {
-  opacity: 100%;
-}
diff --git a/src/app/styles/components/_sliderHandle.scss b/src/app/styles/components/_sliderHandle.scss
deleted file mode 100644
index 5806235cd..000000000
--- a/src/app/styles/components/_sliderHandle.scss
+++ /dev/null
@@ -1,170 +0,0 @@
-.rc-tooltip.rc-tooltip-zoom-enter,
-.rc-tooltip.rc-tooltip-zoom-leave {
-	display: block;
-}
-.rc-tooltip-zoom-enter,
-.rc-tooltip-zoom-appear {
-	opacity: 0;
-	animation-duration: 0.3s;
-	animation-fill-mode: both;
-	animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
-	animation-play-state: paused;
-}
-.rc-tooltip-zoom-leave {
-	animation-duration: 0.3s;
-	animation-fill-mode: both;
-	animation-timing-function: cubic-bezier(0.6, -0.3, 0.74, 0.05);
-	animation-play-state: paused;
-}
-.rc-tooltip-zoom-enter.rc-tooltip-zoom-enter-active,
-.rc-tooltip-zoom-appear.rc-tooltip-zoom-appear-active {
-	animation-name: rcToolTipZoomIn;
-	animation-play-state: running;
-}
-.rc-tooltip-zoom-leave.rc-tooltip-zoom-leave-active {
-	animation-name: rcToolTipZoomOut;
-	animation-play-state: running;
-}
-@keyframes rcToolTipZoomIn {
-	0% {
-		opacity: 0;
-		transform-origin: 50% 50%;
-		transform: scale(0, 0);
-	}
-	100% {
-		opacity: 1;
-		transform-origin: 50% 50%;
-		transform: scale(1, 1);
-	}
-}
-@keyframes rcToolTipZoomOut {
-	0% {
-		opacity: 1;
-		transform-origin: 50% 50%;
-		transform: scale(1, 1);
-	}
-	100% {
-		opacity: 0;
-		transform-origin: 50% 50%;
-		transform: scale(0, 0);
-	}
-}
-.rc-tooltip {
-	position: absolute;
-	z-index: 1070;
-	display: block;
-	visibility: visible;
-	font-size: 16px;
-	line-height: 1.5;
-	opacity: 0.9;
-}
-.rc-tooltip-hidden {
-	display: none;
-}
-.rc-tooltip-placement-top,
-.rc-tooltip-placement-topLeft,
-.rc-tooltip-placement-topRight {
-	padding: 5px 0 9px 0;
-}
-.rc-tooltip-placement-right,
-.rc-tooltip-placement-rightTop,
-.rc-tooltip-placement-rightBottom {
-	padding: 0 5px 0 9px;
-}
-.rc-tooltip-placement-bottom,
-.rc-tooltip-placement-bottomLeft,
-.rc-tooltip-placement-bottomRight {
-	padding: 9px 0 5px 0;
-}
-.rc-tooltip-placement-left,
-.rc-tooltip-placement-leftTop,
-.rc-tooltip-placement-leftBottom {
-	padding: 0 9px 0 5px;
-}
-.rc-tooltip-inner {
-	padding: 8px 10px;
-	color: #fff;
-	text-align: left;
-	text-decoration: none;
-	background-color: #ff0001;
-	border-radius: 6px;
-	box-shadow: 0 0 4px rgba(0, 0, 0, 0.17);
-	min-height: 34px;
-}
-.rc-tooltip-arrow {
-	position: absolute;
-	width: 0;
-	height: 0;
-	border-color: transparent;
-	border-style: solid;
-}
-.rc-tooltip-placement-top .rc-tooltip-arrow,
-.rc-tooltip-placement-topLeft .rc-tooltip-arrow,
-.rc-tooltip-placement-topRight .rc-tooltip-arrow {
-	bottom: 4px;
-	margin-left: -5px;
-	border-width: 5px 5px 0;
-	border-top-color: #ff0001;
-}
-.rc-tooltip-placement-top .rc-tooltip-arrow {
-	left: 50%;
-}
-.rc-tooltip-placement-topLeft .rc-tooltip-arrow {
-	left: 15%;
-}
-.rc-tooltip-placement-topRight .rc-tooltip-arrow {
-	right: 15%;
-}
-.rc-tooltip-placement-right .rc-tooltip-arrow,
-.rc-tooltip-placement-rightTop .rc-tooltip-arrow,
-.rc-tooltip-placement-rightBottom .rc-tooltip-arrow {
-	left: 4px;
-	margin-top: -5px;
-	border-width: 5px 5px 5px 0;
-	border-right-color: #ff0001;
-}
-.rc-tooltip-placement-right .rc-tooltip-arrow {
-	top: 50%;
-}
-.rc-tooltip-placement-rightTop .rc-tooltip-arrow {
-	top: 15%;
-	margin-top: 0;
-}
-.rc-tooltip-placement-rightBottom .rc-tooltip-arrow {
-	bottom: 15%;
-}
-.rc-tooltip-placement-left .rc-tooltip-arrow,
-.rc-tooltip-placement-leftTop .rc-tooltip-arrow,
-.rc-tooltip-placement-leftBottom .rc-tooltip-arrow {
-	right: 4px;
-	margin-top: -5px;
-	border-width: 5px 0 5px 5px;
-	border-left-color: #ff0001;
-}
-.rc-tooltip-placement-left .rc-tooltip-arrow {
-	top: 50%;
-}
-.rc-tooltip-placement-leftTop .rc-tooltip-arrow {
-	top: 15%;
-	margin-top: 0;
-}
-.rc-tooltip-placement-leftBottom .rc-tooltip-arrow {
-	bottom: 15%;
-}
-.rc-tooltip-placement-bottom .rc-tooltip-arrow,
-.rc-tooltip-placement-bottomLeft .rc-tooltip-arrow,
-.rc-tooltip-placement-bottomRight .rc-tooltip-arrow {
-	top: 4px;
-	margin-left: -5px;
-	border-width: 0 5px 5px;
-	border-bottom-color: #ff0001;
-}
-.rc-tooltip-placement-bottom .rc-tooltip-arrow {
-	left: 50%;
-}
-.rc-tooltip-placement-bottomLeft .rc-tooltip-arrow {
-	left: 15%;
-}
-.rc-tooltip-placement-bottomRight .rc-tooltip-arrow {
-	right: 15%;
-}
diff --git a/src/app/styles/components/d3graph.css b/src/app/styles/components/d3graph.css
index d98105b1d..8e78fd101 100644
--- a/src/app/styles/components/d3graph.css
+++ b/src/app/styles/components/d3graph.css
@@ -1,105 +1,127 @@
 @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');
-body {
-	background-color: black;
+/* Base node styling */
+.node {
+  cursor: pointer;
+  fill-opacity: 1;
+  transition: all 200ms ease;
 }
 
-.node {
-	cursor: pointer;
-	fill-opacity: 0.8;
+/* Node rectangle styling */
+.node rect {
+  fill: #ffffff;
+  stroke: #e5e7eb;
+  stroke-width: 1px;
+  transition: all 200ms ease;
+}
+
+.node:hover rect {
+  stroke: #14b8a6;
+  stroke-width: 2px;
+  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
 }
 
-/*   this represents leaf nodes aka nodes with no children */
+/* Node text styling */
 .node text {
-	fill: #fae6e4;
-	background-color: red;
-	font-size: 10px;
-	font-family: 'Outfit', sans-serif;
+  font-family: 'Outfit', sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  fill: #374151;
+}
+
+/* Parent node specific styling */
+.node--internal rect {
+  fill: #ffffff;
+  stroke: #e5e7eb;
+}
+
+.node--internal:hover rect {
+  stroke: #14b8a6;
+  stroke-width: 2px;
 }
 
-/*   modifies text of parent nodes (has children) */
 .node--internal text {
-	fill: white;
-	font-size: 10px;
+  font-family: 'Outfit', sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  fill: #374151;
+}
+
+/* Current/active node styling */
+.node.active rect {
+  stroke: #14b8a6;
+  stroke-width: 2px;
 }
+
+/* Link styling */
 .link {
-	fill: none;
-	stroke: #161617;
-	stroke-opacity: 0.4;
-	stroke-width: 3px;
+  fill: none;
+  stroke: #e5e7eb;
+  stroke-width: 2px;
+  transition: stroke 200ms ease;
+}
+
+.link:hover {
+  stroke: #d1d5db;
+}
+
+/* Current path highlight */
+.link.current-link {
+  stroke: #14b8a6;
+  stroke-opacity: 0.6;
 }
 
+/* Tooltip styling */
 div.tooltip {
-	position: absolute;
-	padding: 0.5rem 1rem;
-	color: white;
-	z-index: 100;
-	font-size: 14px;
-	font-family: 'Outfit', sans-serif;
-	background: rgb(17, 17, 17, 0.9);
-	box-shadow: rgb(33 33 33 / 20%) 0px 1px 2px;
-	border-radius: 5px;
-	max-width: 300px;
-}
-
-.d3-tip {
-	line-height: 1;
-	padding: 6px;
-	background: #679dca;
-	color: #2b2f39;
-	border-radius: 4px;
-	font-size: 13px;
-	max-width: 400px;
-	overflow-wrap: break-word;
-	font-family: 'Overpass Mono', monospace;
-}
-
-/* Creates a small triangle extender for the tooltip */
-.d3-tip:after {
-	box-sizing: border-box;
-	display: inline;
-	font-size: 15px;
-	line-height: 1;
-	color: #679dca;
-	content: '\25BC';
-	position: absolute;
-	text-align: center;
-}
-
-/* Style northward tooltips specifically */
-.d3-tip.n:after {
-	margin: -2px 0 0 0;
-	top: 100%;
-	left: 0;
-}
-
-.history-d3-container {
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-	height: calc(100% - 70px);
-}
-
-.perf-d3-container {
-	height: calc(100% - 70px);
-}
-
-.perf-d3-svg {
-	display: block;
-}
-
-.perf-chart-labels {
-	font: 1.3em sans-serif;
-	fill: #2a2f3a;
-	pointer-events: none;
-	text-anchor: middle;
-}
-
-/* .link {
-	stroke: #ccc;
-	stroke-width: 1.5;
-} */
-  
-/* .current-link {
-	stroke: red; 
-	stroke-width: 2.5; /* Adjust the width as needed */
-/* } */ 
+  position: absolute;
+  padding: 12px;
+  color: #374151;
+  z-index: 100;
+  font-family: 'Outfit', sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  border-radius: 8px;
+  max-width: 250px;
+}
+
+/* Container styling */
+.display {
+  background-color: #f9fafb;
+  height: 100%;
+  width: 100%;
+  overflow: auto; /* Enable scrolling */
+  position: relative; /* Create new stacking context */
+}
+
+/* State changes text container styling */
+.node foreignObject div {
+  max-height: 100%; /* Fixed height for scroll container */
+  overflow-y: scroll;
+  overflow-x: hidden;
+  scrollbar-width: thin;
+  padding-right: 6px;
+  scrollbar-color: #cbd5e1 #f1f5f9;
+}
+
+/* Custom scrollbar styling for Webkit browsers */
+.node foreignObject div::-webkit-scrollbar {
+  width: 6px;
+}
+
+.node foreignObject div::-webkit-scrollbar-track {
+  background: #f1f5f9;
+  border-radius: 3px;
+}
+
+.node foreignObject div::-webkit-scrollbar-thumb {
+  background: #cbd5e1;
+  border-radius: 3px;
+}
+
+.node foreignObject div::-webkit-scrollbar-thumb:hover {
+  background: #94a3b8;
+}
diff --git a/src/app/styles/components/diff.css b/src/app/styles/components/diff.css
index caf3d4087..5a2e70385 100644
--- a/src/app/styles/components/diff.css
+++ b/src/app/styles/components/diff.css
@@ -1,150 +1,87 @@
 @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');
 .jsondiffpatch-delta {
   font-family: 'Outfit', sans-serif;
-  font-size: 16px;
+  font-size: 14px;
   margin: 0;
-  padding: 0 0 0 12px;
+  padding: 0;
   display: inline-block;
 }
 .jsondiffpatch-delta pre {
   font-family: 'Outfit', sans-serif;
-  font-size: 16px;
+  font-size: 14px;
   margin: 0;
   padding: 0;
   display: inline-block;
 }
 ul.jsondiffpatch-delta {
   list-style-type: none;
-  padding: 0 0 0 20px;
+  padding: 0;
   margin: 0;
 }
 .jsondiffpatch-delta ul {
   list-style-type: none;
-  padding: 0 0 0 20px;
+  padding: 0;
   margin: 0;
 }
+
 .jsondiffpatch-added .jsondiffpatch-property-name,
 .jsondiffpatch-added .jsondiffpatch-value pre,
 .jsondiffpatch-modified .jsondiffpatch-right-value pre,
 .jsondiffpatch-textdiff-added {
-  background: #5a6c46;
+  color: #14b8a6;
 }
 .jsondiffpatch-deleted .jsondiffpatch-property-name,
 .jsondiffpatch-deleted pre,
 .jsondiffpatch-modified .jsondiffpatch-left-value pre,
 .jsondiffpatch-textdiff-deleted {
-  background: #fccdda;
   text-decoration: line-through;
+  color: #dc2626;
 }
-.jsondiffpatch-unchanged,
-.jsondiffpatch-movedestination {
-  color: #81929e;
-}
-.jsondiffpatch-unchanged,
-.jsondiffpatch-movedestination > .jsondiffpatch-value {
-  transition: all 0.5s;
-  -webkit-transition: all 0.5s;
-  overflow-y: hidden;
-}
-.jsondiffpatch-unchanged-showing .jsondiffpatch-unchanged,
-.jsondiffpatch-unchanged-showing .jsondiffpatch-movedestination > .jsondiffpatch-value {
-  max-height: 100px;
-}
-.jsondiffpatch-unchanged-hidden .jsondiffpatch-unchanged,
-.jsondiffpatch-unchanged-hidden .jsondiffpatch-movedestination > .jsondiffpatch-value {
-  max-height: 0;
-}
-.jsondiffpatch-unchanged-hiding .jsondiffpatch-movedestination > .jsondiffpatch-value,
-.jsondiffpatch-unchanged-hidden .jsondiffpatch-movedestination > .jsondiffpatch-value {
-  display: block;
-}
-.jsondiffpatch-unchanged-visible .jsondiffpatch-unchanged,
-.jsondiffpatch-unchanged-visible .jsondiffpatch-movedestination > .jsondiffpatch-value {
-  max-height: 100px;
-}
-.jsondiffpatch-unchanged-hiding .jsondiffpatch-unchanged,
-.jsondiffpatch-unchanged-hiding .jsondiffpatch-movedestination > .jsondiffpatch-value {
-  max-height: 0;
-}
-.jsondiffpatch-unchanged-showing .jsondiffpatch-arrow,
-.jsondiffpatch-unchanged-hiding .jsondiffpatch-arrow {
-  display: none;
-}
+
 .jsondiffpatch-value {
   display: inline-block;
 }
 .jsondiffpatch-property-name {
   display: inline-block;
-  padding-right: 5px;
-  vertical-align: top;
+  padding-right: 4px;
 }
+
 .jsondiffpatch-property-name:after {
   content: ': ';
 }
-.jsondiffpatch-child-node-type-array > .jsondiffpatch-property-name:after {
-  content: ': [';
-}
-.jsondiffpatch-child-node-type-array:after {
-  content: '],';
-}
-div.jsondiffpatch-child-node-type-array:before {
-  content: '[';
-}
-div.jsondiffpatch-child-node-type-array:after {
-  content: ']';
-}
-.jsondiffpatch-child-node-type-object > .jsondiffpatch-property-name:after {
-  content: ': {';
-}
-.jsondiffpatch-child-node-type-object:after {
-  content: '},';
-}
-div.jsondiffpatch-child-node-type-object:before {
-  content: '{';
-}
-div.jsondiffpatch-child-node-type-object:after {
-  content: '}';
-}
-.jsondiffpatch-value pre:after {
-  content: ',';
-}
+
 li:last-child > .jsondiffpatch-value pre:after,
 .jsondiffpatch-modified > .jsondiffpatch-left-value pre:after {
   content: '';
 }
+
 .jsondiffpatch-modified .jsondiffpatch-value {
   display: inline-block;
 }
+
 .jsondiffpatch-modified .jsondiffpatch-right-value {
-  margin-left: 5px;
-}
-.jsondiffpatch-moved .jsondiffpatch-value {
-  display: none;
+  margin-left: 6px;
 }
+
 .jsondiffpatch-moved .jsondiffpatch-moved-destination {
   display: inline-block;
-  background: #ffffbb;
-  color: #888;
+  color: #ffffbb;
 }
+
 .jsondiffpatch-moved .jsondiffpatch-moved-destination:before {
   content: ' => ';
 }
-ul.jsondiffpatch-textdiff {
-  padding: 0;
-}
+
 .jsondiffpatch-textdiff-location {
-  color: #bbb;
+  color: #ffffbb;
   display: inline-block;
   min-width: 60px;
 }
+
 .jsondiffpatch-textdiff-line {
   display: inline-block;
 }
+
 .jsondiffpatch-textdiff-line-number:after {
   content: ',';
 }
-.jsondiffpatch-error {
-  background: red;
-  color: white;
-  font-weight: bold;
-}
diff --git a/src/app/styles/layout/_actionContainer.scss b/src/app/styles/layout/_actionContainer.scss
index 57a5655fe..dda9f975f 100644
--- a/src/app/styles/layout/_actionContainer.scss
+++ b/src/app/styles/layout/_actionContainer.scss
@@ -1,9 +1,26 @@
 .action-container {
-  // overflow: auto;
+  background: white;
+  border-right: 1px solid #e5e7eb;
+  transition: width 0.3s ease;
   overflow-x: hidden;
-  background-color: $action-tab-background;
+  overflow-y: auto;
+  height: 100%;
+
+  .action-button-wrapper {
+    opacity: 1;
+    visibility: visible;
+    transition:
+      opacity 0.2s ease,
+      visibility 0.2s ease;
+  }
 }
 
+.collapsed .action-container {
+  .action-button-wrapper {
+    opacity: 0;
+    visibility: hidden;
+  }
+}
 .actionname {
   background-color: $indiv-action-input-bg;
   border: 1px solid $indiv-action-border;
@@ -14,34 +31,22 @@
   color: $indiv-action-filler-text;
 }
 
-#recordBtn {
-  color: #ffb3b3;
-  height: 100%;
-  display: flex;
-  margin-left: 10px;
-}
-
 .actionToolContainer {
-  color: #873b3b;
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  height: 35px;
+  border-bottom: 1px solid #e5e7eb;
 }
 
-#recordBtn .fa-regular {
-  height: 100%;
-  width: 28px;
+.toggle-record {
+  color: $toggle-record-text;
 }
 
-.route {
-  background-color: $route-bar;
-  color: $route-bar-text;
-  padding-left: 10px;
-  padding-top: 5px;
-  padding-bottom: 5px;
+.clear-button-container {
+  padding: 16px;
 }
 
-.toggle-record {
-  color: $toggle-record-text;
-}
\ No newline at end of file
+.dropdown-container {
+  padding: 4px 16px;
+}
+
+
diff --git a/src/app/styles/layout/_bodyContainer.scss b/src/app/styles/layout/_bodyContainer.scss
index c0f95df21..84893bb6a 100644
--- a/src/app/styles/layout/_bodyContainer.scss
+++ b/src/app/styles/layout/_bodyContainer.scss
@@ -2,23 +2,22 @@
   height: 100%;
   overflow: hidden;
   display: grid;
-  grid-template-columns: min-content 1fr;
-  grid-template-rows: 1fr minmax(min-content, 5%) minmax(min-content, 5%);
+  grid-template-columns: 280px 1fr;
+  grid-template-rows: 1fr auto;
   grid-template-areas:
     'actions states'
-    'travel travel'
-    'buttons buttons';
-}
+    'bottom bottom';
+  transition: grid-template-columns 0.3s ease;
 
-/* if extension width is less than 500px, stack the body containers */
-@media (max-width: 500px) {
-  .body-container {
-    grid-template-rows: 3fr 5fr 1fr;
-    grid-template-columns: auto;
-    grid-template-areas:
-      'actions'
-      'states'
-      'travel'
-      'buttons';
+  &.collapsed {
+    grid-template-columns: 45px 1fr;
   }
 }
+
+.bottom-controls {
+  grid-area: bottom;
+  display: flex;
+  width: 100%;
+  border-top: 1px solid #e5e7eb;
+  background: white;
+}
diff --git a/src/app/styles/layout/_buttonsContainer.scss b/src/app/styles/layout/_buttonsContainer.scss
index c0ed67b3a..520ccad40 100644
--- a/src/app/styles/layout/_buttonsContainer.scss
+++ b/src/app/styles/layout/_buttonsContainer.scss
@@ -1,14 +1,22 @@
 @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');
-* {
-  font-family: 'Outfit', sans-serif;
-}
+
 .buttons-container {
-  //color: #ff0000;
-  margin: 0 1% 0 1%;
-  display: grid;
-  grid-template-columns: repeat(5, 1fr);
-  grid-gap: 1%;
-  padding: 1% 0 1% 0;
+  display: flex;
+  align-items: center;
+  background: white;
+  border-top: 1px solid #e5e7eb;
+  width: 100%;
+}
+
+.buttons-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  max-width: 1200px;
+  width: 100%;
+  margin: 0 auto;
+  padding: 0 24px;
+  gap: 16px;
 }
 
 .introjs-tooltip {
@@ -20,31 +28,11 @@
   padding-left: 2px;
 }
 
-// .introjs-helperLayer{
-//   // border: 2px solid yellow
-// }
-
-.tools-container {
-  display: flex;
-  justify-content: space-between;
-  border: 0.5px solid grey;
-  background-color: #35383e;
-  padding: 3px;
-  margin-bottom: 1rem;
-}
-
 #seriesname {
   background-color: #333;
   color: white;
 }
 
-@media (max-width: 500px) {
-  .buttons-container {
-    //color: #ff0000;
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
 .introjs-nextbutton {
   background-color: none;
   color: #3256f1;
@@ -74,31 +62,30 @@
 
 .dialog-pop-up {
   border: 1px solid #ff0001;
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); 
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
   padding: 13px;
 }
 
 .dialog-pop-up-header {
   color: #ff0001;
-  padding: 8px 16px;  
-  font-size: 20px; 
+  padding: 8px 16px;
+  font-size: 20px;
   font-family: $text-font-stack;
 }
 
 .dialog-pop-up-contents {
   background-color: $pop-up-window-background;
-  color: $pop-up-window-text; 
+  color: $pop-up-window-text;
   font-family: $text-font-stack;
-  line-height: 1.4;  
-  padding: 0px 15px 15px 15px !important;  
+  line-height: 1.4;
+  padding: 0px 15px 15px 15px !important;
 }
 
 .dialog-pop-up-actions {
   padding: 15px;
-  background-color: #ff0001; 
+  background-color: #ff0001;
 }
 
-
 .close-icon-pop-up-div {
   height: 40px;
   width: 100%;
@@ -115,3 +102,50 @@
   height: 20%;
 }
 
+.buttons-container button {
+  display: flex;
+  align-items: center;
+  color: #6b7280;
+  font-size: 1rem;
+  font-weight: 500;
+  background: transparent;
+  border: none;
+  border-radius: 0.375rem;
+  transition: all 200ms ease;
+  gap: 8px;
+}
+
+.buttons-container button:hover {
+  background-color: #f3f4f6;
+}
+
+.status-dot {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+}
+
+.status-dot.active {
+  background-color: #14b8a6;
+  animation: pulse 2s infinite;
+}
+
+.status-dot.inactive {
+  background-color: #9ca3af;
+}
+
+@keyframes pulse {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.7;
+    transform: scale(1.1);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
diff --git a/src/app/styles/layout/_errorContainer.scss b/src/app/styles/layout/_errorContainer.scss
index 4f2057094..68275e2c7 100644
--- a/src/app/styles/layout/_errorContainer.scss
+++ b/src/app/styles/layout/_errorContainer.scss
@@ -1,83 +1,84 @@
 @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');
 * {
-	font-family: 'Outfit', sans-serif;
+  font-family: 'Outfit', sans-serif;
 }
 .error-container {
-	height: 100%;
-	margin: 0 auto;
-	background-color: $loader-background;
+  height: 100%;
+  margin: 0 auto;
+  background-color: $loader-background;
   color: $loader-text;
-	overflow: hidden;
-	font: 'Outfit', sans-serif;
+  overflow: hidden;
+  font: 'Outfit', sans-serif;
 
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	a {
-		color: rgb(91, 54, 54);
-		margin-top: 1%;
-		height: 3%;
-	}
-	img {
-		text-align: center;
-		padding-top: 5%;
-		padding-bottom: 1.5%;
-	}
-	p {
-		padding: 0;
-		text-align: center;
-		margin: 2% 0;
-	}
-	.loaderChecks {
-		padding: 1%;
-		border: 1px solid;
-		border-style: solid;
-		border-color: loader-checks-border;
-		display: grid;
-		grid-template-columns: 4fr 1fr;
-		grid-template-rows: repeat(3, 1fr);
-		grid-column-gap: .5%;
-		grid-row-gap: .5%;
-		justify-content: center;
-		align-items: center;
-	}
-	.loaderChecks span {
-		margin: 0 auto;
-		display: inline;
-	}
-	h2 {
-		padding-left: 2%;
-		padding-right: 2%;
-	}
-	.check, .fail{
-		font-size: 3em;
-		color: green;
-		margin: 0;
-		align-self: center;
-		justify-self: center;
-	}
-	.fail{
-		color: red;
-	}
-	.errorMsg{
-		text-align: center;
-		font-weight: bold;
-	}
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  a {
+    color: rgb(91, 54, 54);
+    margin-top: 1%;
+    height: 3%;
+  }
+  img {
+    text-align: center;
+    padding-top: 5%;
+    padding-bottom: 1.5%;
+  }
+  p {
+    padding: 0;
+    text-align: center;
+    margin: 2% 0;
+  }
+  .loaderChecks {
+    padding: 1%;
+    border: 1px solid;
+    border-style: solid;
+    border-color: loader-checks-border;
+    display: grid;
+    grid-template-columns: 4fr 1fr;
+    grid-template-rows: repeat(3, 1fr);
+    grid-column-gap: 0.5%;
+    grid-row-gap: 0.5%;
+    justify-content: center;
+    align-items: center;
+  }
+  .loaderChecks span {
+    margin: 0 auto;
+    display: inline;
+  }
+  h2 {
+    padding-left: 2%;
+    padding-right: 2%;
+  }
+  .check,
+  .fail {
+    font-size: 3em;
+    color: green;
+    margin: 0;
+    align-self: center;
+    justify-self: center;
+  }
+  .fail {
+    color: red;
+  }
+  .errorMsg {
+    text-align: center;
+    font-weight: bold;
+  }
 
-	.launchContentButton {
-		background: $launch-button;
+  .launchContentButton {
+    background: $launch-button;
     color: $launch-button-text;
     margin: 3px;
-		padding: 5px 10px;
+    padding: 5px 10px;
     border-radius: 5px;
     border: 1px solid rgb(36, 37, 41);
-	}
+  }
 
-	.launchContentButton:hover {
+  .launchContentButton:hover {
     background: $launch-button-hover;
   }
 
-	.launchContentButton:active {
-		box-shadow: 1px 1px 10px black;
+  .launchContentButton:active {
+    box-shadow: 1px 1px 10px black;
   }
 }
diff --git a/src/app/styles/layout/_headContainer.scss b/src/app/styles/layout/_headContainer.scss
deleted file mode 100644
index a8317d0d7..000000000
--- a/src/app/styles/layout/_headContainer.scss
+++ /dev/null
@@ -1,118 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');
-* {
-  font-family: 'Outfit', sans-serif;
-}
-
-.head-container {
-  height: 5%;
-  background: linear-gradient(
-    90deg,
-    rgba(41, 41, 41, 1) 0%,
-    rgba(51, 51, 51, 1) 50%,
-    rgba(41, 41, 41, 1) 100%
-  );
-}
-
-.head-container {
-  display: flex;
-  flex-direction: row-reverse;
-  align-items: center;
-  justify-content: center;
-}
-
-div .tab-select-container {
-  //background-color: #ff0002;
-  font-size: 14px;
-  height: 40px;
-  width: 100%;
-  margin-bottom: 0;
-}
-
-.tab-select-container:focus {
-  background-color: #ff0006;
-
-  outline: none;
-}
-
-.tab-select-container:active {
-  outline: none;
-  border-color: transparent;
-}
-
-.tab-select-container {
-  //background-color: #ff0004;
-  height: 70%;
-
-  .tab-select__control:focus {
-    outline: none;
-  }
-  div.tab-select-container.css-2b097c-container {
-    background-color: #ff0003;
-    margin: 0;
-  }
-
-  .tab-select__control,
-  .tab-select__menu {
-    outline: none;
-    font-size: 14px;
-    border-style: none;
-    background-color: $tab-dropdown-background;
-    z-index: 2;
-    margin-bottom: 0;
-    @extend %disable-highlight;
-  }
-  .tab-select__single-value {
-    color: $tab-select-text;
-  }
-  .tab-select__value-container {
-    background-color: $tab-select-background;
-    margin: 0;
-    padding: 0px;
-  }
-  .tab-select__value-container:focus {
-    outline: none;
-  }
-  .tab-select__option:hover {
-    margin-top: 0;
-    background-color: $tab-dropdown-hover;
-    color: black;
-  }
-  .tab-select__option--is-selected,
-  .tab-select__option--is-focused {
-    background-color: transparent;
-    outline: transparent;
-  }
-  .tab-select__indicator {
-    color:$tab-arrow-indicator;
-    padding: 0;
-  }
-  .tab-select__indicator-separator {
-    margin-top: 3px;
-    margin-bottom: 3px;
-    background-color: $tab-vertical-line;
-  }
-
-  .css-1uccc91-singleValue {
-    margin-left: 8px;
-  }
-  // removes the cursor from blinking
-  .css-w8afj7-Input {
-    color: transparent;
-  }
-
-  // removes min-height of dropdown and change it to 100%
-  .css-yk16xz-control,
-  .css-1pahdxg-control {
-    min-height: initial;
-    height: 100%;
-    border: none;
-    outline: none;
-    margin-bottom: 0;
-    border-radius: 0;
-  }
-  .css-yk16xz-control:focus,
-  .css-1pahdxg-control:focus {
-    outline: none;
-    border-radius: 0;
-  }
-}
diff --git a/src/app/styles/layout/_mainContainer.scss b/src/app/styles/layout/_mainContainer.scss
index 8e85a3ba5..8b2662137 100644
--- a/src/app/styles/layout/_mainContainer.scss
+++ b/src/app/styles/layout/_mainContainer.scss
@@ -1,10 +1,13 @@
 .main-container {
   height: 100%;
   margin: 0 auto;
-  background-color: $function-bar-background;
+  background-color: white;
   overflow: hidden;
 }
 
 .state-container-container {
   display: contents;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
 }
diff --git a/src/app/styles/layout/_stateContainer.scss b/src/app/styles/layout/_stateContainer.scss
index 16e5e3795..ad5d2b1f8 100644
--- a/src/app/styles/layout/_stateContainer.scss
+++ b/src/app/styles/layout/_stateContainer.scss
@@ -1,292 +1,163 @@
 .state-container {
-  font-size: 10px;
   overflow: auto;
-  background-color: $state-background;
-}
-
-.toggleAC {
-  background: #ff0001;
-  height: 50%;
-  text-decoration: none;
-  border: none;
-}
-
-.toggleAC:focus {
-  outline: none;
-  box-shadow: none;
-}
-
-.state-container .main-navbar {
-  background-color: $state-background;
-  color: #ff0000;
+  height: 100%;
   display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: center;
-  height: 35px;
-  margin: 6px;
-}
-
-.state-container .componentMapContainer {
-  height: 95% !important;
-  fill: $state-background;
+  flex-direction: column;
 }
 
-.state-container .main-navbar-container {
-  position: sticky;
-  top: 0px;
-  left: 0px;
-  z-index: 1;
-  background-color: $state-background;
-
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  height: 35px;
+.app-content,
+.app-body {
+  height: 100%;
+  overflow: hidden;
 }
 
-.no-data-message {
-  color: #ff0001;
-  font: normal 13px $text-font-stack;
-  padding: 10px;
+.main-navbar-container--structural {
+  height: 0;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  visibility: hidden;
+  pointer-events: none;
 }
 
 .state-container {
-  .main-navbar-text {
-    margin: 6px;
-  }
-
-  .main-router-link {
-    font-size: 14px;
-    height: 75%;
-    width: 75px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    text-decoration: none;
-    color: $header-button-inactive-text;
-
-    background: $header-button-inactive;
-    border-radius: 5px;
-    border: 1px solid rgba(184, 196, 194, 0.25);
-  }
-
-  .main-router-link:hover {
-    background: $header-button-hover;
-  }
-
-  .main-router-link.is-active {
-    background: $header-button-active;
-    color: $header-button-active-text;
-    margin: 3px;
-    border-radius: 5px;
-    border: 1px solid rgb(36, 37, 41);
-  }
-
   .router-link {
-    height: 100%;
-    // width: 34%;
-    width: 10%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: $navbar-unselected;
+    padding: 8px 16px;
+    font-size: 14px;
+    font-weight: 500;
+    border: none;
+    border-bottom: 2px solid transparent;
+    color: #4b5563;
     text-decoration: none;
-    color: $navbar-unselected-text;
-
-    font-size: 75%;
-    // border-top-right-radius: 10px;
-    // border-top-left-radius: 10px;
-    overflow: hidden;
-  }
-
-  .map-tab1 {
-    border-top-left-radius: 5px;
-    border-bottom-left-radius: 5px;
-  }
-
-  .accessibility-tab {
-    border-top-right-radius: 5px;
-    border-bottom-right-radius: 5px;
-  }
-
-  .router-link:hover {
-    background-color: $navbar-hover;
-  }
-
-  .router-link.is-active {
-    background-color: $navbar-selected;
-    color: $navbar-selected-text;
-  }
-
-  .navbar {
-    // background-color: $navbar-background;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    height: 30px;
-    position: fixed;
-    top: 4px; //should revisit to figure out a more dynamic way of sticking the navbar to the bottom of the main-navbar // <- tried placing the main nav on the same line to save space but ran into problems with the svg div of the tree + animation. Will need closer inspection
-    left: 50%;
-    transform: translateX(-50%);
-    width: 65vw;
-    z-index: 1;
-
-
-    @extend %disable-highlight;
+    background-color: transparent;
+    cursor: pointer;
+    transition:
+      color 200ms ease,
+      border-color 200ms ease;
+    margin: 0;
+    position: relative;
+    white-space: nowrap;
+
+    &:hover {
+      color: #1f2937;
+      background-color: transparent;
+    }
+
+    &.is-active {
+      border-bottom: 2px solid #0d9488;
+      color: #0d9488;
+      background-color: transparent;
+    }
   }
 
   .main-navbar {
-    background-color: $header-background;
     display: flex;
     flex-direction: row;
-    justify-content: flex-start;
+    justify-content: space-between;
     align-items: center;
-    height: 35px;
-    margin: 6px;
+    gap: 8px;
+    width: 100%;
   }
 
   .main-navbar-container {
-    top: 0px;
-    left: 0px;
-    z-index: 1;
-    background-color: $header-background;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    height: 40px;
+    border-bottom: 1px solid #e5e7eb;
+    background: white;
+    padding: 4.5px 24px;
   }
 }
 
-.no-data-message {
-  color: #ff0001;
-  font: normal 13px $text-font-stack;
-  padding: 10px;
+// tool tip styles
+.tooltip-header {
+  padding: 8px 8px 8px 12px;
+  background-color: #14b8a6;
+  border: 1px solid #0d9488;
+  border-radius: 8px;
 }
 
-.performance-nav-bar-container {
-  background-color: #ff0002;
-  display: flex;
-  border: $performance-subtab-border;
-  height: 30px;
+.tooltip-title {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 500;
+  color: #f3f4f6;
 }
 
-.router-link-performance {
-  height: 100%;
-  width: 34%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: $state-background;
-  text-decoration: none;
-  color: $performance-subtab-text;
+.tooltip-container {
+  width: 250px;
+  background-color: #ffffff;
+  border-radius: 8px;
+  font-family: 'Outfit', sans-serif;
+  overflow: hidden;
 }
 
-.router-link-performance:hover {
-  background-color: $performance-subtab-hover;
+.tooltip-section {
+  padding: 8px 12px;
+  border-bottom: 1px solid #e5e7eb;
+  transition: background-color 150ms ease;
 }
 
-.router-link-performance.is-active {
-  font-weight: 600;
+.tooltip-section:last-child {
+  border-bottom: none;
 }
 
-// Web Metrics Container
-.web-metrics-container {
-  display: grid;
-  grid-template-columns: auto auto;
-  justify-content: center;
-}
-
-//container for metrics
-.metric {
-  min-height: 200px;
-  min-width: 200px;
+.tooltip-section-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: #14b8a6;
 }
 
-.bargraph {
-  position: relative;
-  margin-top: 1rem;
+.tooltip-content {
+  max-height: 400px;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: #cbd5e1 transparent;
 }
 
-.bar-graph-axis {
-  stroke: cornflowerblue;
+.tooltip-item {
+  padding: 8px 0;
+  border-bottom: 1px solid rgba(107, 114, 128, 0.1);
 }
 
-#hover-box {
-  max-width: 230px;
-  background-color: #51565e;
-  border-radius: 5px;
-  color: white;
+.tooltip-item:last-child {
+  border-bottom: none;
 }
 
-.bargraph-position {
-  position: relative;
+.tooltip-data {
+  border-left: 2px solid #0d9488;
 }
 
-// tool tip styles
-
-.visx-tooltip {
-  overflow-y: auto;
-  overflow-wrap: break-word;
-  pointer-events: all !important;
+.tooltip-container {
+  animation: tooltipFade 150ms ease-out;
 }
 
-.tooltipKey {
-  margin-bottom: -1px;
+// Web Metrics Container
+.web-metrics-container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
 }
 
-.historyToolTip {
-  z-index: 2;
+.metric {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
-// .state-container .router-link {
-//   border: 0.5px solid rgba(0, 0, 0, 0.5);
-//   border-bottom: none;
-// }
-
-.tooltipData {
-  background-color: #373737;
-  margin-top: 4px;
-  margin-bottom: 4px;
-  padding: 2px;
-  max-height: 30vh;
+#hover-box {
+  max-width: 250px;
+  background-color: #51565e;
+  border-radius: 8px;
+  color: white;
 }
 
-.tooltipData-JSONTree {
+/* Tree styling */
+.json-tree {
+  overflow: auto;
   list-style: none;
-  margin-top: 1px;
-  margin-bottom: 1px;
-  margin-left: 2px;
-  margin-right: 2px;
-  padding: 0px;
-  overflow-y: auto;
-  max-height: 30vh;
-  scrollbar-color: #919499 #51565e;
+  padding: 16px;
+  margin: 0 0 50px;
 }
 
-.tooltipData-JSONTree::-webkit-scrollbar-thumb {
-  background: #919499;
-}
-
-.tooltipData-JSONTree::-webkit-scrollbar-track {
-  background: #51565e;
-}
-
-.app-body {
-  height: 100%;
-}
-
-.app-content {
+.tree-component {
   height: 100%;
+  overflow: auto;
 }
-
-.heat-map-legend-container {
-  display: flex;
-  height: 3px;
-  width: 200px;
-  background-image: linear-gradient(to right, $heat-level-1, $heat-level-2, $heat-level-3, $heat-level-4);
-}
-
diff --git a/src/app/styles/layout/_travelContainer.scss b/src/app/styles/layout/_travelContainer.scss
index 9938c8027..3aa3139bf 100644
--- a/src/app/styles/layout/_travelContainer.scss
+++ b/src/app/styles/layout/_travelContainer.scss
@@ -1,63 +1,27 @@
 .travel-container {
-  background: $travel-background;
-  // background: linear-gradient(
-  // 	90deg,
-  // 	rgba(41, 41, 41, 1) 0%,
-  // 	rgba(51, 51, 51, 1) 50%,
-  // 	rgba(41, 41, 41, 1) 100%
-  // );
-  // border-color: $border-color;
-  // display: flex;
-  // flex-direction: row;
-  // align-items: center;
-  // justify-content: space-around;
-
+  background: white;
   display: flex;
   flex-direction: row;
   align-items: center;
-  justify-content: space-around;
-}
-
-.visx-group {
-  margin-top: 10px;
+  border-top: 1px solid #e5e7eb;
 }
 
 .react-select-container {
   font-size: 16px;
   min-width: 90px;
   margin: 8px;
-  .react-select__control {
-    background-color: $speed-dropdown;
-    border-color: transparent;
-    @extend %disable-highlight;
-  }
-  .react-select__control:hover {
-    cursor: pointer;
-  }
-  .react-select__menu {
-    background-color: $speed-dropdown-expanded;
-    color: $speed-dropdown-text;
-    @extend %disable-highlight;
-  }
-  .react-select__single-value {
-    color: $speed-dropdown-text;
-  }
-  .react-select__option:hover {
-    background-color: $speed-dropdown-expanded-hover;
-    cursor: pointer;
-  }
-  .react-select__option--is-selected,
-  .react-select__option--is-focused {
-    background-color: transparent;
-    cursor: pointer;
-  }
+}
 
-  // removes the cursor from blinking
-  .css-w8afj7-Input {
-    color: transparent;
-  }
+.react-select__control {
+  background-color: #f3f4f6 !important;
+  border: none !important;
+  border-radius: 0.375rem !important;
+  min-height: 30px !important;
+  box-shadow: none !important;
 }
 
-.button-icon {
-  color: $icon-primary;
+.react-select__single-value {
+  color: #374151 !important;
+  font-size: 0.875rem !important;
+  font-weight: 500 !important;
 }
diff --git a/src/app/styles/main.scss b/src/app/styles/main.scss
index f6ea13579..afabfd2c9 100644
--- a/src/app/styles/main.scss
+++ b/src/app/styles/main.scss
@@ -6,50 +6,38 @@
   font-size: 14px;
 }
 
-/* width */
-::-webkit-scrollbar {
-  width: 5px;
-  height: 8px;
+html {
+  margin: 0;
+  padding: 0;
+  height: 100%;
 }
 
-/* Track */
-::-webkit-scrollbar-track {
-  // background: rgb(20, 20, 20);
-  background: none;
-}
-
-/* Handle */
-::-webkit-scrollbar-thumb {
-  background: rgb(67, 67, 71);
-}
-
-/* Handle on hover */
-::-webkit-scrollbar-thumb:hover {
-  background: rgb(97, 97, 97);
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
 }
 
 // 1. Configuration and helpers
 @import 'abstracts/variablesLM';
-//@import 'abstracts/variables';
 
 // 3. Base stuff
-@import 'base/base', 'base/helpers', 'base/typography';
+@import 'base/helpers';
 
 // 4. Layout-related sections
 @import 'layout/mainContainer', 'layout/bodyContainer', 'layout/actionContainer',
-'layout/errorContainer', 'layout/stateContainer', 'layout/travelContainer',
-'layout/buttonsContainer', 'layout/headContainer.scss';
+  'layout/errorContainer', 'layout/stateContainer', 'layout/travelContainer',
+  'layout/buttonsContainer';
 
 // 5. Components
-@import 'components/buttons', 'components/actionComponent',
-'components/jsonTree', 'components/renderingFrequency',
-'components/performanceVisx', 'components/componentMap', 'components/ax';
+@import 'components/buttons', 'components/actionComponent', 'components/performanceVisx',
+  'components/componentMap', 'components/ax';
 
 // slider component
-@import './components/rc-slider', './components/sliderHandle';
+@import './components/rc-slider';
 
 // d3 chart component
-@import './components/d3graph.css';
+@import './components/d3graph';
 
 // diff component
-@import './components/diff';
\ No newline at end of file
+@import './components/diff';
diff --git a/src/app/styles/theme.ts b/src/app/styles/theme.ts
deleted file mode 100644
index d3e93e2bc..000000000
--- a/src/app/styles/theme.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { createTheme } from '@mui/material/styles';
-const theme = createTheme({
-  // typography: {
-  //   fontSize: 2,
-  // },
-  palette: {
-    primary: {
-      main: '#3c6e71',
-    },
-    secondary: {
-      main: '#3c6e71',
-    },
-  },
-  components: {
-    // Name of the component
-
-    MuiButton: {
-      styleOverrides: {
-        // Name of the slot
-        root: {
-          // Some CSS
-          fontSize: '0.8rem',
-          letterSpacing: '0.1rem',
-          lineHeight: '0.8rem',
-        },
-      },
-    },
-  },
-});
-
-export default theme;
diff --git a/src/backend/controllers/createTree.ts b/src/backend/controllers/createTree.ts
index 86f6aee4c..d49d134fe 100644
--- a/src/backend/controllers/createTree.ts
+++ b/src/backend/controllers/createTree.ts
@@ -193,11 +193,8 @@ export default function createTree(currentFiberNode: Fiber): Tree {
     // If user use setState to define/manage state, the state object will be stored in stateNode.state => grab the state object stored in the stateNode.state
     // Example: for tic-tac-toe demo-app: Board is a stateful component that use setState to store state data.
     if ((tag === ClassComponent || tag === IndeterminateComponent) && stateNode?.state) {
-      // Save component's state and setState() function to our record for future time-travel state changing. Add record index to snapshot so we can retrieve.
       componentData.index = componentActionsRecord.saveNew(stateNode);
-      // Save state information in componentData.
       componentData.state = stateNode.state;
-      // Pass to front end
       newState = componentData.state;
     }
 
@@ -205,47 +202,54 @@ export default function createTree(currentFiberNode: Fiber): Tree {
     // Check if currentFiberNode is a stateful functional component when user use useState hook.
     // If user use useState to define/manage state, the state object will be stored in memoizedState => grab the state object & its update method (dispatch) from memoizedState
     // Example: for Stateful buttons demo-app: Increment is a stateful component that use useState hook to store state data.
-    if (
-      (tag === FunctionComponent ||
-        tag === IndeterminateComponent ||
-        //TODO: Need reasoning for why we evaluate context provider
-        /**
-         * So far I haven't seen a case where hook data is stored for ContextProviders in memoized state. So far
-         * I've seen some data a non-null memoize state on browser router, but queue is null. Routes has some good info on memoized props,
-         * but that's not being addressed here. useContext providers also have null for memoized state.
-         */
-        tag === ContextProvider) &&
-      memoizedState
-    ) {
+    // Inside the _createTree function where we handle functional components
+    if ((tag === FunctionComponent || tag === IndeterminateComponent) && memoizedState) {
       if (memoizedState.queue) {
         try {
-          // Obtain all hooksStates & the corresponding udpate method from memoizedState
           const hooksStates = getHooksStateAndUpdateMethod(memoizedState);
-          // Obtain variable names by parsing the function definition stored in elementType.
           const hooksNames = getHooksNames(elementType.toString());
 
-          // Intialize state & index:
           componentData.hooksState = {};
+          componentData.reducerStates = []; // New array to store reducer states
           componentData.hooksIndex = [];
 
-          hooksStates.forEach(({ state, component }, i) => {
-            // Save component's state and dispatch() function to our record for future time-travel state changing. Add record index to snapshot so we can retrieve.
+          hooksStates.forEach(({ state, component, isReducer, lastAction, reducer }, i) => {
             componentData.hooksIndex.push(componentActionsRecord.saveNew(component));
-            // Save state information in componentData.
-            componentData.hooksState[hooksNames[i].varName] = state;
+
+            if (isReducer) {
+              // Store reducer-specific information
+              componentData.reducerStates.push({
+                state,
+                lastAction,
+                reducerIndex: i,
+                hookName: hooksNames[i]?.hookName || `Reducer ${i}`,
+              });
+            } else {
+              // Regular useState hook
+              componentData.hooksState[hooksNames[i]?.varName || `State: ${i}`] = state;
+            }
           });
-          // Pass to front end
-          newState = componentData.hooksState;
+          newState = {
+            ...componentData.hooksState,
+            reducers: componentData.reducerStates,
+          };
         } catch (err) {
-          // COMMENT OUT TO AVOID PRINTING ON THE CONSOLE OF USER - KEEP IT FOR DEBUGGING PURPOSE
-          // console.log({
-          //   Message: 'Error in createTree during obtaining state from functionalComponent',
-          //   componentName,
-          //   err,
-          // });
+          console.log('Error extracting component state:', {
+            componentName,
+            memoizedState,
+            error: err,
+          });
         }
       }
     }
+    if (tag === ContextProvider && !elementType._context.displayName) {
+      let stateData = memoizedProps.value;
+      if (stateData === null || typeof stateData !== 'object') {
+        stateData = { CONTEXT: stateData };
+      }
+      componentData.context = filterAndFormatData(stateData);
+      componentName = 'Context';
+    }
 
     // -----------------ADD COMPONENT DATA TO THE OUTPUT TREE-------------------
 
diff --git a/src/backend/controllers/statePropExtractors.ts b/src/backend/controllers/statePropExtractors.ts
index c01adfe21..0f1a3980f 100644
--- a/src/backend/controllers/statePropExtractors.ts
+++ b/src/backend/controllers/statePropExtractors.ts
@@ -1,4 +1,5 @@
-import parse from 'html-react-parser';
+import { parse } from '@babel/parser';
+import { Node, CallExpression, MemberExpression, Identifier } from '@babel/types';
 import { HookStateItem, Fiber } from '../types/backendTypes';
 import { exclude } from '../models/filterConditions';
 
@@ -69,10 +70,29 @@ export function getHooksStateAndUpdateMethod(
   const hooksStates: Array<HookStateItem> = [];
   while (memoizedState) {
     if (memoizedState.queue) {
-      hooksStates.push({
-        component: memoizedState.queue,
-        state: memoizedState.memoizedState,
-      });
+      // Check if this is a reducer hook by looking at the lastRenderedReducer
+      const isReducer = memoizedState.queue.lastRenderedReducer?.name !== 'basicStateReducer';
+
+      if (isReducer) {
+        // For useReducer hooks, we want to store:
+        // 1. The current state
+        // 2. The last action that was dispatched (if available)
+        // 3. The reducer function itself
+        hooksStates.push({
+          component: memoizedState.queue,
+          state: memoizedState.memoizedState,
+          isReducer: true,
+          lastAction: memoizedState.queue.lastRenderedAction || null,
+          reducer: memoizedState.queue.lastRenderedReducer || null,
+        });
+      } else {
+        // Regular useState hook
+        hooksStates.push({
+          component: memoizedState.queue,
+          state: memoizedState.memoizedState,
+          isReducer: false,
+        });
+      }
     }
     memoizedState = memoizedState.next;
   }
@@ -86,62 +106,125 @@ export function getHooksStateAndUpdateMethod(
  * @returns - An array of objects with key: hookName (the name of setState method) | value: varName (the state variable name)
  */
 export function getHooksNames(elementType: string): { hookName: string; varName: string }[] {
-  // Initialize empty object to store the setters and getter
-  // Abstract Syntax Tree
-  let AST: any;
   try {
-    AST = parse(elementType).body;
-    // Begin search for hook names, only if ast has a body property.
-    // Statements get all the names of the hooks. For example: useCount, useWildcard, ...
+    const AST = parse(elementType, {
+      sourceType: 'module',
+      plugins: ['jsx', 'typescript'],
+    });
+
     const statements: { hookName: string; varName: string }[] = [];
-    /** All module exports always start off as a single 'FunctionDeclaration' type
-     * Other types: "BlockStatement" / "ExpressionStatement" / "ReturnStatement"
-     * Iterate through AST of every functional component declaration
-     * Check within each functional component declaration if there are hook declarations & variable name declaration */
-    AST.forEach((functionDec: any) => {
-      let declarationBody: any;
-      if (functionDec.expression?.body) declarationBody = functionDec.expression.body.body;
-      // check if functionDec.expression.body exists, then set declarationBody to functionDec's body
-      else declarationBody = functionDec.body?.body ?? [];
-      // Traverse through the function's funcDecs and Expression Statements
-      declarationBody.forEach((elem: any) => {
-        // Hooks will always be contained in a variable declaration
-        if (elem.type === 'VariableDeclaration') {
-          // Obtain the declarations array from elem.
-          const { declarations } = elem;
-          // Obtain the reactHook:
-          // Due to difference in babel transpilation in browser vs for jest test, expression is stored in differen location
-          const expression =
-            declarations[0]?.init?.callee?.expressions || //work for browser
-            declarations[0]?.init?.arguments?.[0]?.callee?.expressions; //work for jest test;
-
-          //For a functional definition that isn't a hook, it won't have the callee being searched for above. This line will cause this forEach execution to stop here in this case.
-          if (expression === undefined) return;
-          let reactHook: string;
-          reactHook = expression[1].property?.name;
-          if (reactHook === 'useState') {
-            // Obtain the variable being set:
-            let varName: string =
-              // Points to second to last element of declarations because webpack adds an extra variable when converting files that use ES6
-              declarations[declarations.length - 2]?.id?.name || // work react application;
-              (Array.isArray(declarations[0]?.id?.elements)
-                ? declarations[0]?.id?.elements[0]?.name
-                : undefined); //work for nextJS application
-            // Obtain the setState method:
-            let hookName: string =
-              //Points to last element of declarations because webpack adds an extra variable when converting files that use ES6
-              declarations[declarations.length - 1]?.id?.name || // work react application;
-              (Array.isArray(declarations[0]?.id?.elements)
-                ? declarations[0]?.id?.elements[0]?.name
-                : undefined); //work for nextJS & Remix
-            // Push reactHook & varName to statements array
-            statements.push({ hookName, varName });
+
+    const isIdentifierWithName = (node: any, name: string): boolean => {
+      return node?.type === 'Identifier' && node.name === name;
+    };
+
+    const processArrayPattern = (pattern: any): { setter: string; getter: string } | null => {
+      if (pattern.type === 'ArrayPattern' && pattern.elements.length === 2) {
+        const result = {
+          getter: pattern.elements[0].name,
+          setter: pattern.elements[1].name,
+        };
+        return result;
+      }
+      return null;
+    };
+
+    const extractReducerName = (node: any): string | null => {
+      if (node.type === 'Identifier') {
+        return node.name;
+      }
+
+      if (node.type === 'ArrowFunctionExpression' && node.body.type === 'CallExpression') {
+        if (node.body.callee.type === 'Identifier') {
+          return node.body.callee.name;
+        }
+      }
+
+      return null;
+    };
+
+    function traverse(node: Node) {
+      if (!node) return;
+
+      if (node.type === 'VariableDeclaration') {
+        node.declarations.forEach((declaration) => {
+          if (declaration.init?.type === 'CallExpression') {
+            // Check for Webpack transformed pattern
+            const isWebpackPattern =
+              declaration.init.callee?.type === 'SequenceExpression' &&
+              declaration.init.callee.expressions?.[1]?.type === 'MemberExpression';
+
+            // Get the hook name for Webpack pattern
+            let webpackHookName: string | null = null;
+            if (isWebpackPattern && declaration.init.callee?.type === 'SequenceExpression') {
+              const memberExpr = declaration.init.callee.expressions[1] as any;
+              if (memberExpr?.property?.type === 'Identifier') {
+                webpackHookName = memberExpr.property.name;
+              }
+            }
+
+            // Check for direct pattern
+            const directCallee = declaration.init.callee as any;
+            const isDirectPattern =
+              directCallee?.type === 'Identifier' &&
+              (directCallee.name === 'useState' || directCallee.name === 'useReducer');
+
+            // Check for namespaced pattern
+            const isNamespacedPattern =
+              declaration.init.callee?.type === 'MemberExpression' &&
+              (declaration.init.callee as any).property?.type === 'Identifier' &&
+              ((declaration.init.callee as any).property.name === 'useState' ||
+                (declaration.init.callee as any).property.name === 'useReducer');
+
+            if (isWebpackPattern || isDirectPattern || isNamespacedPattern) {
+              const arrayPattern = processArrayPattern(declaration.id);
+              if (arrayPattern) {
+                const isReducer =
+                  webpackHookName === 'useReducer' ||
+                  (isDirectPattern && directCallee?.name === 'useReducer') ||
+                  (isNamespacedPattern &&
+                    (declaration.init.callee as any).property?.name === 'useReducer');
+
+                if (isReducer) {
+                  // Handle useReducer
+                  if (declaration.init.arguments?.length > 0) {
+                    const reducerName = extractReducerName(declaration.init.arguments[0]);
+                    if (reducerName) {
+                      statements.push({
+                        hookName: reducerName,
+                        varName: arrayPattern.getter,
+                      });
+                    }
+                  }
+                } else {
+                  // Handle useState
+                  statements.push({
+                    hookName: arrayPattern.setter,
+                    varName: arrayPattern.getter,
+                  });
+                }
+              }
+            }
+          }
+        });
+      }
+
+      // Recursively traverse
+      for (const key in node) {
+        if (node[key] && typeof node[key] === 'object') {
+          if (Array.isArray(node[key])) {
+            node[key].forEach((child: Node) => traverse(child));
+          } else {
+            traverse(node[key] as Node);
           }
         }
-      });
-    });
+      }
+    }
+
+    traverse(AST);
     return statements;
   } catch (err) {
-    throw new Error('getHooksNameError' + err.message);
+    console.error('AST Parsing Error:', err);
+    throw new Error('getHooksNameError: ' + err.message);
   }
 }
diff --git a/src/backend/controllers/timeJump.ts b/src/backend/controllers/timeJump.ts
index 1f0918b12..bf7a1e85c 100644
--- a/src/backend/controllers/timeJump.ts
+++ b/src/backend/controllers/timeJump.ts
@@ -3,102 +3,89 @@ import { Status } from '../types/backendTypes';
 import Tree from '../models/tree';
 import { update } from 'lodash';
 
-// THIS FILE CONTAINS NECCESSARY FUNCTIONALITY FOR TIME-TRAVEL FEATURE
-
-/**
- *
- * This is a closure function to keep track of mode (jumping or not jumping)
- * @param mode - The current mode (i.e. jumping)
- * @returns an async function that takes an `targetSnapshot`, then invokes `updateReactFiberTree` based on the state provided within that target snapshot
- *
- */
 export default function timeJumpInitiation(mode: Status) {
-  /**
-   * This function is to reset jumping mode to false when user hover the mouse over the browser body
-   */
   const resetJumpingMode = (): void => {
     mode.jumping = false;
   };
-  /**
-   * This function that takes a `targetSnapshot` then invokes `updateReactFiberTree` to update the React Application on the browser to match states provided by the `targetSnapshot`
-   * @param targetSnapshot - The target snapshot to re-render. The payload from index.ts is assigned to targetSnapshot
-   */
+
   return async function timeJump(targetSnapshot: Tree): Promise<void> {
     mode.jumping = true;
-    // Reset mode.navigating
     delete mode.navigating;
-    // Traverse the snapshotTree to update ReactFiberTree
     updateReactFiberTree(targetSnapshot).then(() => {
-      // Remove Event listener for mouse over
       document.removeEventListener('mouseover', resetJumpingMode);
-      // Since in order to change state, user will need to navigate to browser
-      // => set an event listener to resetJumpingMode when mouse is over the browser
       document.addEventListener('mouseover', resetJumpingMode, { once: true });
     });
   };
 }
 
-/**
- * This recursive function receives the target snapshot from front end and will update the state of the fiber tree if the component is stateful
- * @param targetSnapshot - Target snapshot portrays some past state we want to travel to.
- * @param circularComponentTable - A table contains visited components
- *
- */
 async function updateReactFiberTree(
-  //TypeScript Note: Adding a tree type to targetSnapshot throws errors for destructuring componentData below. Not sure how precisely to fix
   targetSnapshot,
   circularComponentTable: Set<any> = new Set(),
 ): Promise<void> {
   if (!targetSnapshot) return;
-  // Base Case: if has visited, return
-  if (circularComponentTable.has(targetSnapshot)) {
-    return;
-  } else {
-    circularComponentTable.add(targetSnapshot);
-  }
-  // ------------------------STATELESS/ROOT COMPONENT-------------------------
-  // Since stateless component has no data to update, continue to traverse its child nodes:
+  if (circularComponentTable.has(targetSnapshot)) return;
+
+  circularComponentTable.add(targetSnapshot);
+
   if (targetSnapshot.state === 'stateless' || targetSnapshot.state === 'root') {
     targetSnapshot.children.forEach((child) => updateReactFiberTree(child, circularComponentTable));
     return;
   }
 
-  // Destructure component data:
-  const { index, state, hooksIndex, hooksState } = targetSnapshot.componentData;
-  // ------------------------STATEFUL CLASS COMPONENT-------------------------
-  // Check if it is a stateful class component
-  // Index can be zero => falsy value => DO NOT REMOVE NULL
+  const { index, state, hooksIndex, hooksState, reducerStates } = targetSnapshot.componentData;
+
+  // Handle class components
   if (index !== null) {
-    // Obtain the BOUND update method at the given index
     const classComponent = componentActionsRecord.getComponentByIndex(index);
-    // This conditional avoids the error that occurs when classComponent is undefined
     if (classComponent !== undefined) {
-      // Update component state
-      await classComponent.setState(
-        // prevState contains the states of the snapshots we are jumping FROM, not jumping TO
-        (prevState) => state,
-      );
+      await classComponent.setState(() => state);
     }
-    // Iterate through new children after state has been set
     targetSnapshot.children.forEach((child) => updateReactFiberTree(child, circularComponentTable));
     return;
   }
 
-  // ----------------------STATEFUL FUNCTIONAL COMPONENT----------------------
-  // Check if it is a stateful functional component
-  // if yes, grab all relevant components for this snapshot by its index
-  // call dispatch on each component passing in the corresponding currState value
-  //index can be zero => falsy value => DO NOT REMOVE NULL
+  // Handle hooks
   if (hooksIndex !== null) {
-    // Obtain the array of BOUND update methods at the given indexes.
-    // NOTE: each useState will be a separate update method. So if a component have 3 useState, we will obtain an array of 3 update methods.
     const functionalComponent = componentActionsRecord.getComponentByIndexHooks(hooksIndex);
-    // Update component state
-    for (let i in functionalComponent) {
-      await functionalComponent[i].dispatch(Object.values(hooksState)[i]);
+
+    // Handle regular useState hooks
+    if (hooksState) {
+      const stateEntries = Object.entries(hooksState);
+      for (let i = 0; i < stateEntries.length; i++) {
+        const [key, value] = stateEntries[i];
+        if (functionalComponent[i]?.dispatch) {
+          await functionalComponent[i].dispatch(value);
+        }
+      }
     }
-    // Iterate through new children after state has been set
-    targetSnapshot.children.forEach((child) => updateReactFiberTree(child));
+
+    // Handle reducer hooks
+    if (reducerStates && reducerStates.length > 0) {
+      for (const reducerState of reducerStates) {
+        const { state: targetState, reducerIndex, hookName } = reducerState;
+        const reducer = functionalComponent[reducerIndex];
+
+        if (reducer?.dispatch) {
+          try {
+            // Use SET_STATE action to update the state
+            const setStateAction = {
+              type: 'SET_STATE',
+              payload: targetState,
+            };
+
+            await reducer.dispatch(setStateAction);
+          } catch (error) {
+            console.error('Error updating reducer state:', {
+              hookName,
+              error,
+              componentName: targetSnapshot.name,
+            });
+          }
+        }
+      }
+    }
+
+    targetSnapshot.children.forEach((child) => updateReactFiberTree(child, circularComponentTable));
     return;
   }
 }
diff --git a/src/backend/types/backendTypes.ts b/src/backend/types/backendTypes.ts
index 844e18e2d..863a4d38d 100644
--- a/src/backend/types/backendTypes.ts
+++ b/src/backend/types/backendTypes.ts
@@ -67,7 +67,12 @@ export interface ComponentData {
   index: number | null;
   /** {functional component only} - An object contains all states of the current functional component */
   hooksState: {} | null;
-  /** {functional component only} - An array of index of the bound dispatch method stored in `componentActionsRecord` */
+  reducerStates?: Array<{
+    state: any;
+    lastAction: any;
+    reducerIndex: number;
+    hookName: string;
+  }> /** {functional component only} - An array of index of the bound dispatch method stored in `componentActionsRecord` */;
   hooksIndex: number[] | null;
   /** An object contains all props of the current component */
   props: { [key: string]: any };
@@ -84,10 +89,11 @@ export interface ComponentData {
  * @member component - contains bound dispatch method to update state of the current functional component
  */
 export interface HookStateItem {
-  /** states within the current functional component */
-  state: any;
-  /** an object contains bound dispatch method to update state of the current functional component */
   component: any;
+  state: any;
+  isReducer: boolean;
+  lastAction?: any;
+  reducer?: Function;
 }
 
 export type WorkTag =
diff --git a/src/extension/background.js b/src/extension/background.js
index 01d3353dc..aa829f6db 100644
--- a/src/extension/background.js
+++ b/src/extension/background.js
@@ -16,6 +16,25 @@ let activeTab;
 const tabsObj = {};
 // Will store Chrome web vital metrics and their corresponding values.
 const metrics = {};
+function setupKeepAlive() {
+  //ellie
+  // Create an alarm that triggers every 4.9 minutes (under the 5-minute limit)
+  chrome.alarms.create('keepAlive', { periodInMinutes: 0.5 });
+
+  chrome.alarms.onAlarm.addListener((alarm) => {
+    if (alarm.name === 'keepAlive') {
+      console.log('Keep-alive alarm triggered.');
+      pingServiceWorker();
+    }
+  });
+}
+// Ping the service worker to keep it alive
+function pingServiceWorker() {
+  // Use a lightweight API call to keep the service worker active
+  chrome.runtime.getPlatformInfo(() => {
+    console.log('Service worker pinged successfully');
+  });
+}
 
 // function pruning the chrome ax tree and pulling the relevant properties
 const pruneAxTree = (axTree) => {
@@ -267,14 +286,14 @@ function changeCurrLocation(tabObj, rootNode, index, name) {
 
 async function getActiveTab() {
   return new Promise((resolve, reject) => {
-    chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
+    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
       if (tabs.length > 0) {
         resolve(tabs[0].id);
       } else {
-        reject(new Error('No active tab'))
+        reject(new Error('No active tab'));
       }
     });
-  })
+  });
 }
 
 /*
@@ -307,19 +326,29 @@ chrome.runtime.onConnect.addListener(async (port) => {
   portsArr.push(port); // push each Reactime communication channel object to the portsArr
   // sets the current Title of the Reactime panel
 
-/**
- * Sends messages to ports in the portsArr array, triggering a tab change action.
- */
+  /**
+   * Sends messages to ports in the portsArr array, triggering a tab change action.
+   */
   function sendMessagesToPorts() {
     portsArr.forEach((bg, index) => {
-        bg.postMessage({
-            action: 'changeTab',
-            payload: { tabId: activeTab.id, title: activeTab.title },
-        });
+      bg.postMessage({
+        action: 'changeTab',
+        payload: { tabId: activeTab.id, title: activeTab.title },
+      });
     });
-}
+  }
+  if (port.name === 'keepAlivePort') {
+    console.log('Keep-alive port connected:', port);
 
-  
+    // Keep the port open by responding to any message
+    port.onMessage.addListener((msg) => {
+      console.log('Received message from content script:', msg);
+    });
+
+    port.onDisconnect.addListener(() => {
+      console.warn('Keep-alive port disconnected.');
+    });
+  }
   if (portsArr.length > 0 && Object.keys(tabsObj).length > 0) {
     //if the activeTab is not set during the onActivate API, run a query to get the tabId and set activeTab
     if (!activeTab) {
@@ -330,8 +359,8 @@ chrome.runtime.onConnect.addListener(async (port) => {
           activeTab = tab;
           sendMessagesToPorts();
         }
-        });
-    };
+      });
+    }
   }
 
   if (Object.keys(tabsObj).length > 0) {
@@ -341,12 +370,28 @@ chrome.runtime.onConnect.addListener(async (port) => {
     });
   }
 
-  // every time devtool is closed, remove the port from portsArr
+  // Handles port disconnection by removing the disconnected port and attempting reconnection after 1s delay
+  // This prevents permanent connection loss during idle periods or temporary disconnects -ellie
   port.onDisconnect.addListener((e) => {
     for (let i = 0; i < portsArr.length; i += 1) {
       if (portsArr[i] === e) {
         portsArr.splice(i, 1);
-        chrome.runtime.sendMessage({ action: 'portDisconnect', port: e.name });
+        setTimeout(async () => {
+          try {
+            const newPort = chrome.runtime.connect({ name: 'reconnected' }); // Attempt to reconnect
+            if (newPort) {
+              portsArr.push(newPort); // Add the new port to the array
+              newPort.onMessage.addListener((msg) => {
+                console.log('Message received on reconnected port:', msg);
+              });
+              console.log('Port successfully reconnected');
+            } else {
+              console.warn('Failed to reconnect port');
+            }
+          } catch (error) {
+            console.warn('Port reconnection attempt failed:', error);
+          }
+        }, 1000);
         break;
       }
     }
@@ -428,7 +473,6 @@ chrome.runtime.onConnect.addListener(async (port) => {
         toggleAxRecord = !toggleAxRecord;
 
         await replaceEmptySnap(tabsObj, tabId, toggleAxRecord);
-
         // sends new tabs obj to devtools
         if (portsArr.length > 0) {
           portsArr.forEach((bg) =>
@@ -599,13 +643,26 @@ chrome.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
         break;
       }
 
-      // DUPLICATE SNAPSHOT CHECK
-      // This may be where the bug is coming from that when Reactime fails to collect
-      // state. If they happen to take the same actual duration, it won't record the snapshot.
-      const previousSnap =
-        tabsObj[tabId]?.currLocation?.stateSnapshot?.children[0]?.componentData?.actualDuration;
-      const incomingSnap = request.payload.children[0].componentData.actualDuration;
-      if (previousSnap === incomingSnap) {
+      // DUPLICATE SNAPSHOT CHECK -ellie
+      const isDuplicateSnapshot = (previous, incoming) => {
+        if (!previous || !incoming) return false;
+        const prevData = previous?.componentData;
+        const incomingData = incoming?.componentData;
+
+        // Check if both snapshots have required data
+        if (!prevData || !incomingData) return false;
+
+        const timeDiff = Math.abs(
+          (incomingData.timestamp || Date.now()) - (prevData.timestamp || Date.now()),
+        );
+        return prevData.actualDuration === incomingData.actualDuration && timeDiff < 1000;
+      };
+
+      const previousSnap = tabsObj[tabId]?.currLocation?.stateSnapshot?.children[0];
+      const incomingSnap = request.payload.children[0];
+
+      if (isDuplicateSnapshot(previousSnap, incomingSnap)) {
+        console.warn('Duplicate snapshot detected, skipping');
         break;
       }
 
@@ -626,7 +683,6 @@ chrome.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
             addedAxSnap = 'emptyAxSnap';
             tabsObj[tabId].axSnapshots.push(addedAxSnap);
           }
-
           sendToHierarchy(
             tabsObj[tabId],
             new HistoryNode(tabsObj[tabId], request.payload, addedAxSnap),
@@ -671,47 +727,25 @@ chrome.tabs.onRemoved.addListener((tabId) => {
 });
 
 // when a new url is loaded on the same tab,
-// this remove the tabid from the tabsObj, recreate the tab and inject the script
-chrome.tabs.onUpdated.addListener((tabId, changeInfo) => {
-  // check if the tab title changed to see if tab need to restart
-  if (changeInfo && tabsObj[tabId]) {
-    if (changeInfo.title && changeInfo.title !== tabsObj[tabId].title) {
-      // tell devtools which tab to delete
-      if (portsArr.length > 0) {
-        portsArr.forEach((bg) =>
-          bg.postMessage({
-            action: 'deleteTab',
-            payload: tabId,
-          }),
-        );
-      }
-
-      // delete the tab from the tabsObj
-      delete tabsObj[tabId];
-      delete reloaded[tabId];
-      delete firstSnapshotReceived[tabId];
-
-      // recreate the tab on the tabsObj
-      tabsObj[tabId] = createTabObj(changeInfo.title);
-    }
+//ellie
+chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
+  if (changeInfo.status === 'complete' && tab.url) {
+    chrome.scripting.executeScript({
+      target: { tabId },
+      files: ['content.bundle.js'],
+    });
   }
 });
 
-// when tab view is changed, put the tabid as the current tab
+// When tab view is changed, put the tabId as the current tab
 chrome.tabs.onActivated.addListener((info) => {
-  // get info about tab information from tabId
+  // Get info about the tab information from tabId
   chrome.tabs.get(info.tabId, (tab) => {
-    // never set a reactime instance to the active tab
+    // Never set a reactime instance to the active tab
     if (!tab.pendingUrl?.match('^chrome-extension')) {
       activeTab = tab;
 
-      /**this setInterval is here to make sure that the app does not stop working even
-       * if chrome pauses to save energy. There is probably a better solution, but v25 did
-       * not have time to complete.
-      */
-      setInterval(() => {
-        console.log(activeTab)
-      }, 10000);
+      // Send messages to active ports about the tab change
       if (portsArr.length > 0) {
         portsArr.forEach((bg) =>
           bg.postMessage({
@@ -725,15 +759,21 @@ chrome.tabs.onActivated.addListener((info) => {
 });
 
 // when reactime is installed
-// create a context menu that will open our devtools in a new window
+//ellie
 chrome.runtime.onInstalled.addListener(() => {
-  chrome.contextMenus.create({
-    id: 'reactime',
-    title: 'Reactime',
-    contexts: ['page', 'selection', 'image', 'link'],
+  chrome.tabs.query({}, (tabs) => {
+    tabs.forEach((tab) => {
+      chrome.scripting.executeScript({
+        target: { tabId: tab.id },
+        files: ['content.bundle.js'],
+      });
+    });
   });
 });
 
+chrome.runtime.onStartup.addListener(() => {
+  setupKeepAlive();
+});
 // when context menu is clicked, listen for the menuItemId,
 // if user clicked on reactime, open the devtools window
 
diff --git a/src/extension/build/devtools.html b/src/extension/build/devtools.html
index bc851747d..de554fb40 100644
--- a/src/extension/build/devtools.html
+++ b/src/extension/build/devtools.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>Reactime v23</title>
+    <title>Reactime v26.0</title>
   </head>
 
   <body>
diff --git a/src/extension/build/manifest.json b/src/extension/build/manifest.json
index d0fbf3db8..140139dbb 100644
--- a/src/extension/build/manifest.json
+++ b/src/extension/build/manifest.json
@@ -1,6 +1,6 @@
 {
   "name": "Reactime",
-  "version": "25.0.0",
+  "version": "26.0",
   "devtools_page": "devtools.html",
   "description": "A Chrome extension that helps debug React applications by memorizing the state of components with every render.",
   "manifest_version": 3,
@@ -12,18 +12,30 @@
     "48": "assets/whiteBlackSquareIcon48.png",
     "128": "assets/whiteBlackSquareIcon128.png"
   },
+
   "content_scripts": [
     {
       "matches": ["http://localhost/*"],
       "js": ["bundles/content.bundle.js"]
     }
   ],
+
   "web_accessible_resources": [
     {
-      "resources": ["bundles/backend.bundle.js"],
+      "resources": ["bundles/backend.bundle.js", "bundles/content.bundle.js"],
       "matches": ["<all_urls>"]
     }
   ],
-  "permissions": ["contextMenus", "tabs", "activeTab", "scripting", "system.display", "debugger"],
+
+  "permissions": [
+    "contextMenus",
+    "tabs",
+    "activeTab",
+    "scripting",
+    "system.display",
+    "debugger",
+    "alarms"
+  ],
+
   "host_permissions": ["<all_urls>"]
 }
diff --git a/src/extension/build/panel.html b/src/extension/build/panel.html
index b97ee64aa..9c475132a 100644
--- a/src/extension/build/panel.html
+++ b/src/extension/build/panel.html
@@ -1,10 +1,10 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title style="color: #ffffff">Reactime 23.0</title>
+    <title style="color: #ffffff">Reactime v26.0</title>
   </head>
 
   <body>
diff --git a/src/extension/contentScript.ts b/src/extension/contentScript.ts
index b1ae376bf..c2bd3b6ed 100644
--- a/src/extension/contentScript.ts
+++ b/src/extension/contentScript.ts
@@ -2,6 +2,24 @@
 // in Web Metrics tab of Reactime app.
 import { onTTFB, onLCP, onFID, onFCP, onCLS, onINP } from 'web-vitals';
 
+chrome.runtime.sendMessage({ type: 'SIGN_CONNECT' });
+console.log('Content script loaded.');
+
+function establishConnection() {
+  const port = chrome.runtime.connect({ name: 'keepAlivePort' }); // Reconnect if we lose connection to the port at any time
+  port.onMessage.addListener((msg) => {
+    console.log('Received message from background:', msg);
+  });
+
+  port.onDisconnect.addListener(() => {
+    console.warn('Port disconnected, attempting to reconnect...');
+    setTimeout(establishConnection, 1000); // Retry after 1 second
+  });
+}
+
+// Initially establish connection
+establishConnection();
+
 // Reactime application starts off with this file, and will send
 // first message to background.js for initial tabs object set up.
 // A "tabs object" holds the information of the current tab,
@@ -27,6 +45,8 @@ window.addEventListener('message', (msg) => {
   const { action }: { action: string } = msg.data;
   if (action === 'recordSnap') {
     if (isRecording) {
+      // add timestamp to payload for the purposes of duplicate screenshot check in backgroundscript -ellie
+      msg.data.payload.children[0].componentData.timestamp = Date.now();
       chrome.runtime.sendMessage(msg.data);
     }
   }