diff --git a/frontend-web/src/pages/Data/DataSource/form/DatabaseForm.tsx b/frontend-web/src/pages/Data/DataSource/form/DatabaseForm.tsx
index 317dff9..85c5620 100644
--- a/frontend-web/src/pages/Data/DataSource/form/DatabaseForm.tsx
+++ b/frontend-web/src/pages/Data/DataSource/form/DatabaseForm.tsx
@@ -72,7 +72,6 @@ const DatabaseForm = props => {
         <TextField
           label="Password"
           name="password"
-          type="password"
           value={formData?.default?.password || ''}
           required
           fullWidth
diff --git a/frontend-web/src/pages/Data/DataSource/form/OracleDatabaseForm.tsx b/frontend-web/src/pages/Data/DataSource/form/OracleDatabaseForm.tsx
new file mode 100644
index 0000000..51103a5
--- /dev/null
+++ b/frontend-web/src/pages/Data/DataSource/form/OracleDatabaseForm.tsx
@@ -0,0 +1,126 @@
+import React from 'react';
+import { Stack, TextField } from '@mui/material';
+import SubmitButton from '@/components/button/SubmitButton';
+
+const inputStyle = {
+  width: '800px',
+};
+
+const OracleDatabaseForm = props => {
+  const { testConnect, formData, setFormData } = props;
+  const handleSubmit = data => {
+    data.preventDefault();
+    const item = {
+      name: data.target.name.value,
+      host: data.target.host.value,
+      port: Number(data.target.port.value),
+      user: data.target.user.value,
+      password: data.target.password.value,
+      database: data.target.database.value,
+      instanceName: data.target.instanceName.value,
+      fetchAsString: data.target.fetchAsString.value,
+      requestTimeout: data.target.requestTimeout.value,
+    };
+    testConnect(item);
+  };
+
+  const handleNameChange = event => {
+    setFormData(prevState => ({ ...prevState, [event.target.name]: event.target.value }));
+  };
+
+  const handleChange = event => {
+    setFormData(prevState => ({ ...prevState, oracle: { ...prevState.oracle, [event.target.name]: event.target.value } }));
+  };
+
+  return (
+    <Stack component="form" sx={{ maxWidth: 800, mx: 'auto', mt: 3 }} onSubmit={handleSubmit}>
+      <Stack sx={{ display: 'flex', justifyContent: 'space-between' }} spacing="20px">
+        <TextField
+          label="이름"
+          name="name"
+          value={formData?.name || ''}
+          required
+          fullWidth
+          sx={inputStyle}
+          onChange={handleNameChange}
+        />
+        <TextField
+          label="Host"
+          name="host"
+          value={formData?.oracle?.host || ''}
+          required
+          fullWidth
+          sx={inputStyle}
+          onChange={handleChange}
+        />
+        <TextField
+          label="Port"
+          name="port"
+          type="number"
+          value={formData?.oracle?.port || ''}
+          required
+          fullWidth
+          sx={inputStyle}
+          onChange={handleChange}
+        />
+        <TextField
+          label="User"
+          name="user"
+          value={formData?.oracle?.user || ''}
+          required
+          fullWidth
+          sx={inputStyle}
+          onChange={handleChange}
+        />
+        <TextField
+          label="Password"
+          name="password"
+          value={formData?.oracle?.password || ''}
+          required
+          fullWidth
+          sx={inputStyle}
+          onChange={handleChange}
+        />
+        <TextField
+          label="Database"
+          name="database"
+          value={formData?.oracle?.database || ''}
+          required
+          fullWidth
+          sx={inputStyle}
+          onChange={handleChange}
+        />
+        <TextField
+          label="InstanceName"
+          name="instanceName"
+          value={formData?.oracle?.instanceName || ''}
+          required
+          fullWidth
+          sx={inputStyle}
+          onChange={handleChange}
+        />
+        <TextField
+          label="FetchAsString"
+          name="fetchAsString"
+          value={formData?.oracle?.fetchAsString || ''}
+          required
+          fullWidth
+          sx={inputStyle}
+          onChange={handleChange}
+        />
+        <TextField
+          label="RequestTimeout"
+          name="requestTimeout"
+          value={formData?.oracle?.requestTimeout || ''}
+          required
+          fullWidth
+          sx={inputStyle}
+          onChange={handleChange}
+        />
+        <SubmitButton label="TEST CONNECT" type="submit" sx={{ height: '50px', fontSize: '13px' }} />
+      </Stack>
+    </Stack>
+  );
+};
+
+export default OracleDatabaseForm;
diff --git a/frontend-web/src/pages/Data/DataSource/form/SnowflakeDatabaseForm.tsx b/frontend-web/src/pages/Data/DataSource/form/SnowflakeDatabaseForm.tsx
new file mode 100644
index 0000000..3df9d84
--- /dev/null
+++ b/frontend-web/src/pages/Data/DataSource/form/SnowflakeDatabaseForm.tsx
@@ -0,0 +1,118 @@
+import React from 'react';
+import { Stack, TextField } from '@mui/material';
+import SubmitButton from '@/components/button/SubmitButton';
+
+const inputStyle = {
+  width: '800px',
+};
+
+const SnowflakeDatabaseForm = props => {
+  const { testConnect, formData, setFormData } = props;
+  const handleSubmit = data => {
+    data.preventDefault();
+    const item = {
+      name: data.target.name.value,
+      account: data.target.account.value,
+      username: data.target.username.value,
+      password: data.target.password.value,
+      database: data.target.database.value,
+      application: data.target.application.value,
+      schema: data.target.schema.value,
+      warehouse: data.target.warehouse.value,
+    };
+    testConnect(item);
+  };
+
+  const handleNameChange = event => {
+    setFormData(prevState => ({ ...prevState, [event.target.name]: event.target.value }));
+  };
+
+  const handleChange = event => {
+    setFormData(prevState => ({
+      ...prevState,
+      snowflake: { ...prevState.snowflake, [event.target.name]: event.target.value },
+    }));
+  };
+
+  return (
+    <Stack component="form" sx={{ maxWidth: 800, mx: 'auto', mt: 3 }} onSubmit={handleSubmit}>
+      <Stack sx={{ display: 'flex', justifyContent: 'space-between' }} spacing="20px">
+        <TextField
+          label="이름"
+          name="name"
+          value={formData?.name || ''}
+          required
+          fullWidth
+          sx={inputStyle}
+          onChange={handleNameChange}
+        />
+        <TextField
+          label="Account"
+          name="account"
+          value={formData?.snowflake?.account || ''}
+          required
+          fullWidth
+          sx={inputStyle}
+          onChange={handleChange}
+        />
+        <TextField
+          label="Username"
+          name="username"
+          value={formData?.snowflake?.username || ''}
+          required
+          fullWidth
+          sx={inputStyle}
+          onChange={handleChange}
+        />
+        <TextField
+          label="Password"
+          name="password"
+          value={formData?.snowflake?.password || ''}
+          required
+          fullWidth
+          sx={inputStyle}
+          onChange={handleChange}
+        />
+        <TextField
+          label="Database"
+          name="database"
+          value={formData?.snowflake?.database || ''}
+          required
+          fullWidth
+          sx={inputStyle}
+          onChange={handleChange}
+        />{' '}
+        <TextField
+          label="Application"
+          name="application"
+          value={formData?.snowflake?.application || ''}
+          required
+          fullWidth
+          sx={inputStyle}
+          onChange={handleChange}
+        />
+        <TextField
+          label="Schema"
+          name="schema"
+          value={formData?.snowflake?.schema || ''}
+          required
+          fullWidth
+          sx={inputStyle}
+          onChange={handleChange}
+        />
+        <TextField
+          label="Warehouse"
+          name="warehouse"
+          value={formData?.snowflake?.warehouse || ''}
+          required
+          fullWidth
+          sx={inputStyle}
+          onChange={handleChange}
+        />
+        <SubmitButton label="TEST CONNECT" type="submit" sx={{ height: '50px', fontSize: '13px' }} />
+      </Stack>
+    </Stack>
+  );
+};
+
+export default SnowflakeDatabaseForm;
diff --git a/frontend-web/src/pages/Data/DataSource/index.tsx b/frontend-web/src/pages/Data/DataSource/index.tsx
index 5d41292..3f85fb8 100644
--- a/frontend-web/src/pages/Data/DataSource/index.tsx
+++ b/frontend-web/src/pages/Data/DataSource/index.tsx
@@ -14,6 +14,8 @@ import SqliteDatabaseForm from '@/pages/Data/DataSource/form/SqliteDatabaseForm'
 import BigQueryDatabaseForm from '@/pages/Data/DataSource/form/BigQueryDatabaseForm';
 import { SnackbarContext } from '@/contexts/AlertContext';
 import { LoadingContext } from '@/contexts/LoadingContext';
+import SnowflakeDatabaseForm from '@/pages/Data/DataSource/form/SnowflakeDatabaseForm';
+import OracleDatabaseForm from '@/pages/Data/DataSource/form/OracleDatabaseForm';
 
 function DataSource() {
   const { sourceId } = useParams();
@@ -29,8 +31,8 @@ function DataSource() {
   const [typeList, setTypeList] = useState([]);
   const [formData, setFormData] = useState<any>({
     type: '',
+    name: '',
     default: {
-      name: '',
       host: '',
       port: null,
       user: '',
@@ -38,15 +40,36 @@ function DataSource() {
       database: '',
     },
     sqlite: {
-      name: '',
+      // name: '',
       filename: '',
     },
     bigquery: {
-      name: '',
+      // name: '',
       projectId: '',
       filename: '',
       database: '',
     },
+    oracle: {
+      // name: '',
+      host: '',
+      port: null,
+      user: '',
+      password: '',
+      database: '',
+      instanceName: '',
+      fetchAsString: '',
+      requestTimeout: '',
+    },
+    snowflake: {
+      // name: '',
+      account: '',
+      username: '',
+      password: '',
+      database: '',
+      application: '',
+      schema: '',
+      warehouse: '',
+    },
   });
 
   useLayoutEffect(() => {
@@ -81,14 +104,33 @@ function DataSource() {
           temp.sqlite = {
             filename: databaseInfo.connectionConfig.filename,
           };
-        }
-        if (databaseInfo.type === 'bigquery') {
+        } else if (databaseInfo.type === 'bigquery') {
           temp.bigquery = {
-            name: databaseInfo.connectionConfig.name,
             projectId: databaseInfo.connectionConfig.projectId,
             keyFilename: databaseInfo.connectionConfig.keyFilename,
             schema: databaseInfo.connectionConfig.schema,
           };
+        } else if (databaseInfo.type === 'oracle') {
+          temp.oracle = {
+            host: databaseInfo.connectionConfig.host,
+            port: Number(databaseInfo.connectionConfig.port),
+            user: databaseInfo.connectionConfig.user,
+            password: databaseInfo.connectionConfig.password,
+            database: databaseInfo.connectionConfig.database,
+            instanceName: databaseInfo.connectionConfig.instanceName,
+            fetchAsString: databaseInfo.connectionConfig.fetchAsString,
+            requestTimeout: databaseInfo.connectionConfig.requestTimeout,
+          };
+        } else if (databaseInfo.type === 'snowflake') {
+          temp.snowflake = {
+            account: databaseInfo.connectionConfig.account,
+            username: databaseInfo.connectionConfig.username,
+            password: databaseInfo.connectionConfig.password,
+            database: databaseInfo.connectionConfig.database,
+            application: databaseInfo.connectionConfig.application,
+            schema: databaseInfo.connectionConfig.schema,
+            warehouse: databaseInfo.connectionConfig.warehouse,
+          };
         } else {
           temp.default = {
             host: databaseInfo.connectionConfig.host,
@@ -133,9 +175,9 @@ function DataSource() {
         const list = response.data.data;
         list.map(item => (item.icon = getDatabaseIcon(item.type)));
         setTypeList(list);
-        if (list.length > 0) {
-          setDataType(list[0]);
-        }
+        // if (list.length > 0) {
+        //   setDataType(list[0]);
+        // }
       }
     });
   };
@@ -153,6 +195,10 @@ function DataSource() {
         return 'sqlite';
       case 'bigquery':
         return 'bigquery';
+      case 'oracle':
+        return 'oracle';
+      case 'snowflake':
+        return 'snowflake';
       default:
         return 'default';
     }
@@ -221,6 +267,12 @@ function DataSource() {
         return <SqliteDatabaseForm testConnect={testConnect} formData={formData} setFormData={setFormData} />;
       case 'bigquery':
         return <BigQueryDatabaseForm testConnect={testConnect} formData={formData} setFormData={setFormData} />;
+      case 'oracle':
+        return <OracleDatabaseForm testConnect={testConnect} formData={formData} setFormData={setFormData} />;
+      case 'snowflake':
+        return <SnowflakeDatabaseForm testConnect={testConnect} formData={formData} setFormData={setFormData} />;
+      case undefined:
+        return <Typography sx={{ my: '160px', mx: 'auto' }}>데이터 소스 타입을 먼저 선택해 주세요.</Typography>;
       default:
         return <DatabaseForm testConnect={testConnect} formData={formData} setFormData={setFormData} />;
     }
diff --git a/frontend-web/src/theme/theme.tsx b/frontend-web/src/theme/theme.tsx
index 36a307f..b402c5e 100644
--- a/frontend-web/src/theme/theme.tsx
+++ b/frontend-web/src/theme/theme.tsx
@@ -318,6 +318,26 @@ export default createTheme({
         },
       },
     },
+    MuiAlert: {
+      styleOverrides: {
+        standardSuccess: {
+          color: '#184a00',
+          backgroundColor: '#ecf8e6',
+        },
+        standardError: {
+          color: '#a00000',
+          backgroundColor: '#ffeded',
+        },
+      },
+    },
+    MuiSnackbar: {
+      styleOverrides: {
+        root: {
+          borderRadius: '4px',
+          boxShadow: '2px 2px 4px 0 rgba(0, 0, 0, 0.15)',
+        },
+      },
+    },
     MuiCssBaseline: {
       styleOverrides: {
         'html, body, #root': {
diff --git a/frontend-web/src/widget/settings/FunnelChartSetting.tsx b/frontend-web/src/widget/settings/FunnelChartSetting.tsx
index 9799256..bc07a73 100644
--- a/frontend-web/src/widget/settings/FunnelChartSetting.tsx
+++ b/frontend-web/src/widget/settings/FunnelChartSetting.tsx
@@ -16,19 +16,17 @@ const FunnelChartSetting = props => {
   const [isOneColor, setIsOneColor] = useState(false);
 
   const setColor = () => {
+    if (option.series.color.length) {
+      return;
+    }
     let pieAggrData = [];
-    if (option['series'].field) {
-      pieAggrData = getAggregationDataForChart(
-        dataSet,
-        option['series'].name,
-        option['series'].field,
-        option['series'].aggregation,
-      );
+    if (option.series.field) {
+      pieAggrData = getAggregationDataForChart(dataSet, option.series.name, option.series.field, option.series.aggregation);
     }
     const colorArr = getColorArr(pieAggrData.length);
     console.log(colorArr);
     setOption(prevState => {
-      prevState['series'].color = colorArr;
+      prevState.series.color = colorArr;
       return { ...prevState };
     });
   };
@@ -36,7 +34,7 @@ const FunnelChartSetting = props => {
     if (!isOneColor) {
       setColor();
     }
-  }, [option['series'].field, option['series'].name]);
+  }, [option.series.field, option.series.name]);
 
   const handleSeriesChange = event => {
     setOption(prevState => ({
diff --git a/frontend-web/src/widget/settings/MixedDonutPieChartSetting.tsx b/frontend-web/src/widget/settings/MixedDonutPieChartSetting.tsx
index 164891f..028a058 100644
--- a/frontend-web/src/widget/settings/MixedDonutPieChartSetting.tsx
+++ b/frontend-web/src/widget/settings/MixedDonutPieChartSetting.tsx
@@ -16,6 +16,9 @@ const MixedDonutPieChartSetting = props => {
   console.log(option);
 
   const getColor = () => {
+    if (option.color.length) {
+      return;
+    }
     let aggrData = [];
     if (option.series.field && option.pie.field) {
       const seriesAggrData = getAggregationDataForChart(
diff --git a/frontend-web/src/widget/settings/MixedLinePieChartSetting.tsx b/frontend-web/src/widget/settings/MixedLinePieChartSetting.tsx
index bcf4391..176808c 100644
--- a/frontend-web/src/widget/settings/MixedLinePieChartSetting.tsx
+++ b/frontend-web/src/widget/settings/MixedLinePieChartSetting.tsx
@@ -23,17 +23,20 @@ const MixedLinePieChartSetting = props => {
 
   // console.log(option);
   useEffect(() => {
+    if (option.pie.color.length) {
+      return;
+    }
     let pieAggrData = [];
-    if (option['pie'].field) {
-      pieAggrData = getAggregationDataForChart(dataSet, option['pie'].name, option['pie'].field, option['pie'].aggregation);
+    if (option.pie.field) {
+      pieAggrData = getAggregationDataForChart(dataSet, option.pie.name, option.pie.field, option.pie.aggregation);
     }
     const colorArr = getColorArr(pieAggrData.length);
     console.log(colorArr);
     setOption(prevState => {
-      prevState['pie'].color = colorArr;
+      prevState.pie.color = colorArr;
       return { ...prevState };
     });
-  }, [option['pie'].field, option['pie'].name]);
+  }, [option.pie.field, option.pie.name]);
 
   const handleCenterChange = event => {
     setOption(prevState => {
diff --git a/frontend-web/src/widget/settings/PieChartSetting.tsx b/frontend-web/src/widget/settings/PieChartSetting.tsx
index 6792c45..fadf8df 100644
--- a/frontend-web/src/widget/settings/PieChartSetting.tsx
+++ b/frontend-web/src/widget/settings/PieChartSetting.tsx
@@ -14,22 +14,20 @@ const PieChartSetting = props => {
   const [colorNum, setColorNum] = useState(12);
 
   useEffect(() => {
+    if (option.series.color.length) {
+      return;
+    }
     let pieAggrData = [];
-    if (option['series'].field) {
-      pieAggrData = getAggregationDataForChart(
-        dataSet,
-        option['series'].name,
-        option['series'].field,
-        option['series'].aggregation,
-      );
+    if (option.series.field) {
+      pieAggrData = getAggregationDataForChart(dataSet, option.series.name, option.series.field, option.series.aggregation);
     }
     const colorArr = getColorArr(pieAggrData.length);
     console.log(colorArr);
     setOption(prevState => {
-      prevState['series'].color = colorArr;
+      prevState.series.color = colorArr;
       return { ...prevState };
     });
-  }, [option['series'].field, option['series'].name]);
+  }, [option.series.field, option.series.name]);
 
   const handleSeriesChange = event => {
     setOption(prevState => ({