diff --git a/web/src/app/app/datasets/[datasetId]/editor/EditorContent.tsx b/web/src/app/app/datasets/[datasetId]/editor/EditorContent.tsx
index 75668e5a8..b1bf59006 100644
--- a/web/src/app/app/datasets/[datasetId]/editor/EditorContent.tsx
+++ b/web/src/app/app/datasets/[datasetId]/editor/EditorContent.tsx
@@ -10,7 +10,7 @@ import { runSQL } from '@/api/buster_rest';
 import type { RustApiError } from '@/api/buster_rest/errors';
 import isEmpty from 'lodash/isEmpty';
 import type { AppSplitterRef } from '@/components/ui/layout/AppSplitter';
-import { AppVerticalSplitterWithGap } from '@/components/ui/layout/AppVerticalSplitterWithGap';
+import { AppVerticalCodeSplitter } from '@/components/features/AppVerticalCodeSplitter';
 import { useDatasetPageContextSelector } from '../_DatasetsLayout/DatasetPageContext';
 
 export const EditorContent: React.FC<{
@@ -73,7 +73,7 @@ export const EditorContent: React.FC<{
       <EditorContainerSubHeader selectedApp={selectedApp} setSelectedApp={setSelectedApp} />
       <div className={cx('h-full w-full overflow-hidden p-5', styles.container)}>
         {selectedApp === EditorApps.PREVIEW && (
-          <AppVerticalSplitterWithGap
+          <AppVerticalCodeSplitter
             autoSaveId="dataset-editor"
             ref={splitterRef}
             sql={sql}
diff --git a/web/src/components/ui/layout/AppVerticalSplitterWithGap/AppVerticalSplitterWithGap.stories.tsx b/web/src/components/features/AppVerticalCodeSplitter/AppVerticalCodeSplitter.stories.tsx
similarity index 82%
rename from web/src/components/ui/layout/AppVerticalSplitterWithGap/AppVerticalSplitterWithGap.stories.tsx
rename to web/src/components/features/AppVerticalCodeSplitter/AppVerticalCodeSplitter.stories.tsx
index 1d9a03170..0dd5537ee 100644
--- a/web/src/components/ui/layout/AppVerticalSplitterWithGap/AppVerticalSplitterWithGap.stories.tsx
+++ b/web/src/components/features/AppVerticalCodeSplitter/AppVerticalCodeSplitter.stories.tsx
@@ -1,9 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { AppVerticalSplitterWithGap } from './AppVerticalSplitterWithGap';
+import { AppVerticalCodeSplitter } from './AppVerticalCodeSplitter';
 
-const meta: Meta<typeof AppVerticalSplitterWithGap> = {
-  title: 'UI/Layouts/AppVerticalSplitterWithGap',
-  component: AppVerticalSplitterWithGap,
+const meta: Meta<typeof AppVerticalCodeSplitter> = {
+  title: 'UI/Layouts/AppVerticalCodeSplitter',
+  component: AppVerticalCodeSplitter,
   parameters: {
     layout: 'fullscreen'
   },
@@ -11,7 +11,7 @@ const meta: Meta<typeof AppVerticalSplitterWithGap> = {
 };
 
 export default meta;
-type Story = StoryObj<typeof AppVerticalSplitterWithGap>;
+type Story = StoryObj<typeof AppVerticalCodeSplitter>;
 
 const mockData: Record<string, string | number | null>[] = [
   { id: 1, name: 'Sample Data 1' },
diff --git a/web/src/components/ui/layout/AppVerticalSplitterWithGap/AppVerticalSplitterWithGap.tsx b/web/src/components/features/AppVerticalCodeSplitter/AppVerticalCodeSplitter.tsx
similarity index 85%
rename from web/src/components/ui/layout/AppVerticalSplitterWithGap/AppVerticalSplitterWithGap.tsx
rename to web/src/components/features/AppVerticalCodeSplitter/AppVerticalCodeSplitter.tsx
index 96ec5e9d2..8a5f679ee 100644
--- a/web/src/components/ui/layout/AppVerticalSplitterWithGap/AppVerticalSplitterWithGap.tsx
+++ b/web/src/components/features/AppVerticalCodeSplitter/AppVerticalCodeSplitter.tsx
@@ -1,10 +1,10 @@
 import React, { forwardRef } from 'react';
-import { AppSplitter, type AppSplitterRef } from '../AppSplitter';
+import { AppSplitter, type AppSplitterRef } from '@/components/ui/layout/AppSplitter';
 import { SQLContainer } from './SQLContainer';
 import { DataContainer } from './DataContainer';
 import type { IDataResult } from '@/api/asset_interfaces';
 
-export interface AppVerticalSplitterWithGapProps {
+export interface AppVerticalCodeSplitterProps {
   sql: string;
   setSQL: (sql: string) => void;
   runSQLError: string | null;
@@ -19,10 +19,7 @@ export interface AppVerticalSplitterWithGapProps {
   gapAmount?: number;
 }
 
-export const AppVerticalSplitterWithGap = forwardRef<
-  AppSplitterRef,
-  AppVerticalSplitterWithGapProps
->(
+export const AppVerticalCodeSplitter = forwardRef<AppSplitterRef, AppVerticalCodeSplitterProps>(
   (
     {
       sql,
@@ -77,4 +74,4 @@ export const AppVerticalSplitterWithGap = forwardRef<
   }
 );
 
-AppVerticalSplitterWithGap.displayName = 'AppVerticalSplitterWithGap';
+AppVerticalCodeSplitter.displayName = 'AppVerticalCodeSplitter';
diff --git a/web/src/components/ui/layout/AppVerticalSplitterWithGap/DataContainer.tsx b/web/src/components/features/AppVerticalCodeSplitter/DataContainer.tsx
similarity index 85%
rename from web/src/components/ui/layout/AppVerticalSplitterWithGap/DataContainer.tsx
rename to web/src/components/features/AppVerticalCodeSplitter/DataContainer.tsx
index c573eeb53..404675b91 100644
--- a/web/src/components/ui/layout/AppVerticalSplitterWithGap/DataContainer.tsx
+++ b/web/src/components/features/AppVerticalCodeSplitter/DataContainer.tsx
@@ -2,8 +2,8 @@ import type { IDataResult } from '@/api/asset_interfaces';
 import { createStyles } from 'antd-style';
 import React from 'react';
 import isEmpty from 'lodash/isEmpty';
-import AppDataGrid from '../../table/AppDataGrid';
-import { IndeterminateLinearLoader } from '../../loaders';
+import { AppDataGrid } from '@/components/ui/table/AppDataGrid';
+import { IndeterminateLinearLoader } from '@/components/ui/loaders/IndeterminateLinearLoader';
 
 export const DataContainer: React.FC<{
   data: IDataResult;
@@ -17,7 +17,7 @@ export const DataContainer: React.FC<{
     <div className={cx(styles.container, 'relative h-full w-full overflow-hidden', className)}>
       <IndeterminateLinearLoader
         className={cx(
-          'absolute left-0 top-0 z-10 w-full',
+          'absolute top-0 left-0 z-10 w-full',
           fetchingData && hasData ? 'block' : 'hidden!'
         )}
       />
diff --git a/web/src/components/ui/layout/AppVerticalSplitterWithGap/SQLContainer.tsx b/web/src/components/features/AppVerticalCodeSplitter/SQLContainer.tsx
similarity index 80%
rename from web/src/components/ui/layout/AppVerticalSplitterWithGap/SQLContainer.tsx
rename to web/src/components/features/AppVerticalCodeSplitter/SQLContainer.tsx
index 04d931502..c00a4d519 100644
--- a/web/src/components/ui/layout/AppVerticalSplitterWithGap/SQLContainer.tsx
+++ b/web/src/components/features/AppVerticalCodeSplitter/SQLContainer.tsx
@@ -1,20 +1,20 @@
-import { AppMaterialIcons } from '../../icons';
-import { AppCodeEditor } from '../../inputs/AppCodeEditor';
+import { Command, Xmark, CircleWarning, ReturnKey } from '@/components/ui/icons';
+import { AppCodeEditor } from '@/components/ui/inputs/AppCodeEditor';
 import { useBusterNotifications } from '@/context/BusterNotifications';
 import { useMemoizedFn } from 'ahooks';
-import { Button, Divider } from 'antd';
 import { createStyles } from 'antd-style';
-import React, { useEffect, useMemo, useState } from 'react';
+import { Button } from '@/components/ui/buttons/Button';
+import React, { useEffect, useState } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
-import type { AppVerticalSplitterWithGapProps } from './AppVerticalSplitterWithGap';
+import type { AppVerticalCodeSplitterProps } from './AppVerticalCodeSplitter';
 
 export const SQLContainer: React.FC<{
   className?: string;
   sql: string | undefined;
   setDatasetSQL: (sql: string) => void;
   onRunQuery: () => Promise<void>;
-  onSaveSQL?: AppVerticalSplitterWithGapProps['onSaveSQL'];
-  disabledSave?: AppVerticalSplitterWithGapProps['disabledSave'];
+  onSaveSQL?: AppVerticalCodeSplitterProps['onSaveSQL'];
+  disabledSave?: AppVerticalCodeSplitterProps['disabledSave'];
   error?: string | null;
 }> = React.memo(
   ({ disabledSave, className = '', sql, setDatasetSQL, onRunQuery, onSaveSQL, error }) => {
@@ -47,32 +47,33 @@ export const SQLContainer: React.FC<{
           onChange={setDatasetSQL}
           onMetaEnter={onRunQueryPreflight}
         />
-        <Divider className="my-0!" />
+        <div className="bg-border-color my-0! h-[0.5px] w-full" />
         <div className="relative flex items-center justify-between px-4 py-2.5">
-          <Button type="default" onClick={onCopySQL}>
-            Copy SQL
-          </Button>
+          <Button onClick={onCopySQL}>Copy SQL</Button>
 
           <div className="flex items-center gap-2">
             {onSaveSQL && (
               <Button
                 disabled={disabledSave || !sql || isRunning}
-                color="default"
-                variant="solid"
+                variant="black"
                 onClick={onSaveSQL}>
                 Save
               </Button>
             )}
 
             <Button
-              type="default"
+              variant="default"
               loading={isRunning}
               disabled={!sql}
               className="flex items-center space-x-0"
-              onClick={onRunQueryPreflight}>
-              <span>Run</span>
-              <AppMaterialIcons icon="keyboard_command_key" />
-              <AppMaterialIcons icon="keyboard_return" />
+              onClick={onRunQueryPreflight}
+              suffix={
+                <div className="flex items-center">
+                  <Command />
+                  <ReturnKey />
+                </div>
+              }>
+              Run
             </Button>
           </div>
 
@@ -104,7 +105,7 @@ const ErrorContainer: React.FC<{
           className={cx(styles.errorContainer, 'absolute right-0 bottom-full left-0 mx-4 mb-2')}>
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-2">
-              <AppMaterialIcons icon="error" />
+              <CircleWarning />
               <span>{error}</span>
             </div>
             <button
@@ -113,7 +114,7 @@ const ErrorContainer: React.FC<{
                 styles.closeButton,
                 'rounded-sm p-0.5 transition-colors hover:bg-black/5'
               )}>
-              <AppMaterialIcons icon="close" className="text-sm" />
+              <Xmark />
             </button>
           </div>
         </motion.div>
diff --git a/web/src/components/features/AppVerticalCodeSplitter/index.ts b/web/src/components/features/AppVerticalCodeSplitter/index.ts
new file mode 100644
index 000000000..cd6746631
--- /dev/null
+++ b/web/src/components/features/AppVerticalCodeSplitter/index.ts
@@ -0,0 +1 @@
+export * from './AppVerticalCodeSplitter';
diff --git a/web/src/components/ui/layout/AppVerticalSplitterWithGap/index.ts b/web/src/components/ui/layout/AppVerticalSplitterWithGap/index.ts
deleted file mode 100644
index 9bd5583ce..000000000
--- a/web/src/components/ui/layout/AppVerticalSplitterWithGap/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './AppVerticalSplitterWithGap';
diff --git a/web/src/controllers/MetricController/MetricViewResults/MetricViewResultsController.tsx b/web/src/controllers/MetricController/MetricViewResults/MetricViewResultsController.tsx
index 92278f7bc..44b101670 100644
--- a/web/src/controllers/MetricController/MetricViewResults/MetricViewResultsController.tsx
+++ b/web/src/controllers/MetricController/MetricViewResults/MetricViewResultsController.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo } from 'react';
 import type { MetricViewProps } from '../config';
 import { useMetricIndividual } from '@/context/Metrics';
-import { AppVerticalSplitterWithGap } from '@/components/ui/layout/AppVerticalSplitterWithGap';
+import { AppVerticalCodeSplitter } from '@/components/features/AppVerticalCodeSplitter';
 import { useMemoizedFn, useUnmount } from 'ahooks';
 import { IDataResult } from '@/api/asset_interfaces';
 import { useMetricLayout } from '../useMetricLayout';
@@ -82,7 +82,7 @@ export const MetricViewResults: React.FC<MetricViewProps> = React.memo(({ metric
 
   return (
     <div ref={containerRef} className="h-full w-full p-3">
-      <AppVerticalSplitterWithGap
+      <AppVerticalCodeSplitter
         ref={appSplitterRef}
         autoSaveId={autoSaveId}
         sql={sql}