diff --git a/apps/web/src/app/app/(primary_layout)/datasets/[datasetId]/editor/MetadataContainer.tsx b/apps/web/src/app/app/(primary_layout)/datasets/[datasetId]/editor/MetadataContainer.tsx
index e41528510..5d49b53aa 100644
--- a/apps/web/src/app/app/(primary_layout)/datasets/[datasetId]/editor/MetadataContainer.tsx
+++ b/apps/web/src/app/app/(primary_layout)/datasets/[datasetId]/editor/MetadataContainer.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { AppCodeEditor } from '@/components/ui/inputs/AppCodeEditor';
+import { DynamicAppCodeEditor as AppCodeEditor } from '@/components/ui/inputs/AppCodeEditor/DynamicAppCodeEditor';
 import { cn } from '@/lib/classMerge';
 
 export const MetadataContainer: React.FC<{
diff --git a/apps/web/src/app/test/chart-playground/page.tsx b/apps/web/src/app/test/chart-playground/page.tsx
index c6c24d1f1..6da0ca551 100644
--- a/apps/web/src/app/test/chart-playground/page.tsx
+++ b/apps/web/src/app/test/chart-playground/page.tsx
@@ -2,10 +2,10 @@
 
 import { useMemo, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
-import { AppCodeEditor } from '@/components/ui/inputs/AppCodeEditor';
+import { DynamicAppCodeEditor as AppCodeEditor } from '@/components/ui/inputs/AppCodeEditor/DynamicAppCodeEditor';
 import { yamlToJson } from '@/lib/yaml-to-json';
 import { useRunSQL } from '@/api/buster_rest/sql/queryRequests';
-import { BusterChart } from '@/components/ui/charts/BusterChart';
+import { BusterChartDynamic } from '@/components/ui/charts/BusterChartDynamic';
 import {
   ChartConfigPropsSchema,
   type ChartConfigProps,
@@ -232,7 +232,7 @@ export default function ChartPlayground() {
               <h4 className="text-sm font-semibold text-green-800">Chart Ready</h4>
             </div>
             <div className="rounded-lg bg-white p-4 shadow-sm">
-              <BusterChart {...chartConfig} data={data} columnMetadata={columnMetadata} />
+              <BusterChartDynamic {...chartConfig} data={data} columnMetadata={columnMetadata} />
             </div>
           </div>
         )}
diff --git a/apps/web/src/components/features/layouts/AppVerticalCodeSplitter/SQLContainer.tsx b/apps/web/src/components/features/layouts/AppVerticalCodeSplitter/SQLContainer.tsx
index 2c522d049..d51b16424 100644
--- a/apps/web/src/components/features/layouts/AppVerticalCodeSplitter/SQLContainer.tsx
+++ b/apps/web/src/components/features/layouts/AppVerticalCodeSplitter/SQLContainer.tsx
@@ -5,7 +5,7 @@ import { Button } from '@/components/ui/buttons/Button';
 import { FileCard } from '@/components/ui/card/FileCard';
 import { ErrorClosableContainer } from '@/components/ui/error/ErrorClosableContainer';
 import { Command, ReturnKey } from '@/components/ui/icons';
-import { AppCodeEditor } from '@/components/ui/inputs/AppCodeEditor';
+import { DynamicAppCodeEditor as AppCodeEditor } from '@/components/ui/inputs/AppCodeEditor/DynamicAppCodeEditor';
 import { useBusterNotifications } from '@/context/BusterNotifications';
 import { useMemoizedFn } from '@/hooks';
 import type { AppVerticalCodeSplitterProps } from './AppVerticalCodeSplitter';
diff --git a/apps/web/src/components/ui/card/CodeCard.tsx b/apps/web/src/components/ui/card/CodeCard.tsx
index 3aee9e75c..09d4cc88b 100644
--- a/apps/web/src/components/ui/card/CodeCard.tsx
+++ b/apps/web/src/components/ui/card/CodeCard.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { AppCodeEditor } from '@/components/ui/inputs/AppCodeEditor';
+import { DynamicAppCodeEditor as AppCodeEditor } from '@/components/ui/inputs/AppCodeEditor/DynamicAppCodeEditor';
 import { useBusterNotifications } from '@/context/BusterNotifications';
 import { useMemoizedFn } from '@/hooks';
 import { Button } from '../buttons/Button';
diff --git a/apps/web/src/components/ui/inputs/AppCodeEditor/DynamicAppCodeEditor.tsx b/apps/web/src/components/ui/inputs/AppCodeEditor/DynamicAppCodeEditor.tsx
new file mode 100644
index 000000000..b4ac4c2d7
--- /dev/null
+++ b/apps/web/src/components/ui/inputs/AppCodeEditor/DynamicAppCodeEditor.tsx
@@ -0,0 +1,12 @@
+import dynamic from 'next/dynamic';
+import { CircleSpinnerLoaderContainer } from '../../loaders/CircleSpinnerLoaderContainer';
+
+export const DynamicAppCodeEditor = dynamic(
+  () => import('./AppCodeEditor').then((mod) => mod.AppCodeEditor),
+  {
+    ssr: false,
+    loading: () => <CircleSpinnerLoaderContainer className="animate-in fade-in-0 duration-300" />
+  }
+);
+
+export default DynamicAppCodeEditor;
diff --git a/apps/web/src/controllers/TermIndividualController/TermIndividualContent.tsx b/apps/web/src/controllers/TermIndividualController/TermIndividualContent.tsx
index da2f71b08..b51c91621 100644
--- a/apps/web/src/controllers/TermIndividualController/TermIndividualContent.tsx
+++ b/apps/web/src/controllers/TermIndividualController/TermIndividualContent.tsx
@@ -8,7 +8,7 @@ import { Button } from '@/components/ui/buttons';
 import { Card, CardContent, CardHeader } from '@/components/ui/card/CardBase';
 import { Dropdown, type DropdownItems } from '@/components/ui/dropdown';
 import { CircleQuestion, Dots, EditSquare, Trash } from '@/components/ui/icons';
-import { AppCodeEditor } from '@/components/ui/inputs/AppCodeEditor';
+import { DynamicAppCodeEditor as AppCodeEditor } from '@/components/ui/inputs/AppCodeEditor/DynamicAppCodeEditor';
 import { InputTextArea } from '@/components/ui/inputs/InputTextArea';
 import { Text } from '@/components/ui/typography';
 import { EditableTitle } from '@/components/ui/typography/EditableTitle';