diff --git a/packages/flare/bin/constants.py b/packages/flare/bin/constants.py
index 6374a9b..a06b30f 100644
--- a/packages/flare/bin/constants.py
+++ b/packages/flare/bin/constants.py
@@ -8,12 +8,15 @@
 REALM = APP_NAME + "_realm"
 KV_COLLECTION_NAME = "event_ingestion_collection"
 CRON_JOB_THRESHOLD_SINCE_LAST_FETCH = timedelta(minutes=10)
+NO_FILTER_VALUE = "none"
 
 
 class PasswordKeys(Enum):
     API_KEY = "api_key"
     TENANT_ID = "tenant_id"
     INGEST_METADATA_ONLY = "ingest_metadata_only"
+    SEVERITIES_FILTER = "severities_filter"
+    SOURCE_TYPES_FILTER = "source_types_filter"
 
 
 class CollectionKeys(Enum):
diff --git a/packages/flare/bin/cron_job_ingest_events.py b/packages/flare/bin/cron_job_ingest_events.py
index e50ceb6..1fce9fa 100644
--- a/packages/flare/bin/cron_job_ingest_events.py
+++ b/packages/flare/bin/cron_job_ingest_events.py
@@ -16,6 +16,7 @@
 from constants import CRON_JOB_THRESHOLD_SINCE_LAST_FETCH
 from constants import HOST
 from constants import KV_COLLECTION_NAME
+from constants import NO_FILTER_VALUE
 from constants import SPLUNK_PORT
 from constants import CollectionKeys
 from constants import PasswordKeys
@@ -40,6 +41,8 @@ def main(logger: Logger, app: client.Application) -> None:
     api_key = get_api_key(app=app)
     tenant_id = get_tenant_id(app=app)
     ingest_metadata_only = get_ingest_metadata_only(app=app)
+    severities_filter = get_severities_filter(app=app)
+    source_types_filter = get_source_types_filter(app=app)
 
     save_last_fetched(app=app)
     save_last_ingested_tenant_id(app=app, tenant_id=tenant_id)
@@ -50,6 +53,8 @@ def main(logger: Logger, app: client.Application) -> None:
         api_key=api_key,
         tenant_id=tenant_id,
         ingest_metadata_only=ingest_metadata_only,
+        severities=severities_filter,
+        source_types=source_types_filter,
     ):
         save_last_fetched(app=app)
 
@@ -104,6 +109,28 @@ def get_ingest_metadata_only(app: client.Application) -> bool:
     )
 
 
+def get_severities_filter(app: client.Application) -> list[str]:
+    severities_filter = get_storage_password_value(
+        app=app, password_key=PasswordKeys.SEVERITIES_FILTER.value
+    )
+
+    if severities_filter and severities_filter != NO_FILTER_VALUE:
+        return severities_filter.split(",")
+
+    return []
+
+
+def get_source_types_filter(app: client.Application) -> list[str]:
+    source_types_filter = get_storage_password_value(
+        app=app, password_key=PasswordKeys.SOURCE_TYPES_FILTER.value
+    )
+
+    if source_types_filter and source_types_filter != NO_FILTER_VALUE:
+        return source_types_filter.split(",")
+
+    return []
+
+
 def get_next(app: client.Application, tenant_id: int) -> Optional[str]:
     return get_collection_value(
         app=app, key=f"{CollectionKeys.get_next_token(tenantId=tenant_id)}"
@@ -222,6 +249,8 @@ def fetch_feed(
     api_key: str,
     tenant_id: int,
     ingest_metadata_only: bool,
+    severities: list[str],
+    source_types: list[str],
 ) -> Iterator[tuple[dict, str]]:
     try:
         flare_api = FlareAPI(api_key=api_key, tenant_id=tenant_id)
@@ -230,7 +259,11 @@ def fetch_feed(
         start_date = get_start_date(app=app)
         logger.info(f"Fetching {tenant_id=}, {next=}, {start_date=}")
         for event_next in flare_api.fetch_feed_events(
-            next=next, start_date=start_date, ingest_metadata_only=ingest_metadata_only
+            next=next,
+            start_date=start_date,
+            ingest_metadata_only=ingest_metadata_only,
+            severities=severities,
+            source_types=source_types,
         ):
             yield event_next
     except Exception as e:
diff --git a/packages/flare/bin/flare.py b/packages/flare/bin/flare.py
index e1177e9..e99af3f 100644
--- a/packages/flare/bin/flare.py
+++ b/packages/flare/bin/flare.py
@@ -50,10 +50,14 @@ def fetch_feed_events(
         next: Optional[str] = None,
         start_date: Optional[date] = None,
         ingest_metadata_only: bool,
+        severities: list[str],
+        source_types: list[str],
     ) -> Iterator[tuple[dict, str]]:
         for response in self._fetch_event_feed_metadata(
             next=next,
             start_date=start_date,
+            severities=severities,
+            source_types=source_types,
         ):
             event_feed = response.json()
             self.logger.debug(event_feed)
@@ -71,6 +75,8 @@ def _fetch_event_feed_metadata(
         *,
         next: Optional[str] = None,
         start_date: Optional[date] = None,
+        severities: list[str],
+        source_types: list[str],
     ) -> Iterator[requests.Response]:
         data: Dict[str, Any] = {
             "from": next if next else None,
@@ -79,7 +85,9 @@ def _fetch_event_feed_metadata(
                     "gte": start_date.isoformat()
                     if start_date
                     else date.today().isoformat()
-                }
+                },
+                "severity": severities if len(severities) > 0 else None,
+                "types": source_types if len(source_types) > 0 else None,
             },
         }
 
@@ -98,7 +106,22 @@ def _fetch_full_event_from_uid(self, *, uid: str) -> dict:
         self.logger.debug(event)
         return event
 
+    def fetch_api_key_validation(self) -> requests.Response:
+        return self.flare_client.get(
+            url="/tokens/test",
+        )
+
     def fetch_tenants(self) -> requests.Response:
         return self.flare_client.get(
             url="/firework/v2/me/tenants",
         )
+
+    def fetch_filters_severity(self) -> requests.Response:
+        return self.flare_client.get(
+            url="/firework/v4/events/filters/severities",
+        )
+
+    def fetch_filters_source_types(self) -> requests.Response:
+        return self.flare_client.get(
+            url="/firework/v4/events/filters/types",
+        )
diff --git a/packages/flare/bin/flare_external_requests.py b/packages/flare/bin/flare_external_requests.py
index 4eb4eed..65a75f4 100644
--- a/packages/flare/bin/flare_external_requests.py
+++ b/packages/flare/bin/flare_external_requests.py
@@ -12,6 +12,20 @@
 from logger import Logger
 
 
+class FlareValidateApiKey(splunk.rest.BaseRestHandler):
+    def handle_POST(self) -> None:
+        payload = self.request["payload"]
+        params = parse.parse_qs(payload)
+
+        if "apiKey" in params:
+            flare_api = FlareAPI(api_key=params["apiKey"][0])
+            flare_api.fetch_api_key_validation()
+            self.response.setHeader("Content-Type", "application/json")
+            self.response.write(json.dumps({}))
+        else:
+            raise Exception("API Key is required")
+
+
 class FlareUserTenants(splunk.rest.BaseRestHandler):
     def handle_POST(self) -> None:
         logger = Logger(class_name=__file__)
@@ -20,10 +34,44 @@ def handle_POST(self) -> None:
 
         if "apiKey" in params:
             flare_api = FlareAPI(api_key=params["apiKey"][0])
-            user_tenants_response = flare_api.fetch_tenants()
-            tenants_response = user_tenants_response.json()
-            logger.debug(tenants_response)
+            response = flare_api.fetch_tenants()
+            response_json = response.json()
+            logger.debug(f"FlareUserTenants: {response_json}")
+            self.response.setHeader("Content-Type", "application/json")
+            self.response.write(json.dumps(response_json))
+        else:
+            raise Exception("API Key is required")
+
+
+class FlareFiltersSeverity(splunk.rest.BaseRestHandler):
+    def handle_POST(self) -> None:
+        logger = Logger(class_name=__file__)
+        payload = self.request["payload"]
+        params = parse.parse_qs(payload)
+
+        if "apiKey" in params:
+            flare_api = FlareAPI(api_key=params["apiKey"][0])
+            response = flare_api.fetch_filters_severity()
+            response_json = response.json()
+            logger.debug(f"FlareFiltersSeverity: {response_json}")
+            self.response.setHeader("Content-Type", "application/json")
+            self.response.write(json.dumps(response_json))
+        else:
+            raise Exception("API Key is required")
+
+
+class FlareFiltersSourceTypes(splunk.rest.BaseRestHandler):
+    def handle_POST(self) -> None:
+        logger = Logger(class_name=__file__)
+        payload = self.request["payload"]
+        params = parse.parse_qs(payload)
+
+        if "apiKey" in params:
+            flare_api = FlareAPI(api_key=params["apiKey"][0])
+            response = flare_api.fetch_filters_source_types()
+            response_json = response.json()
+            logger.debug(f"FlareFiltersSourceTypes: {response_json}")
             self.response.setHeader("Content-Type", "application/json")
-            self.response.write(json.dumps(tenants_response))
+            self.response.write(json.dumps(response_json))
         else:
             raise Exception("API Key is required")
diff --git a/packages/flare/src/main/resources/splunk/default/restmap.conf b/packages/flare/src/main/resources/splunk/default/restmap.conf
index e5b7847..35f5fc5 100644
--- a/packages/flare/src/main/resources/splunk/default/restmap.conf
+++ b/packages/flare/src/main/resources/splunk/default/restmap.conf
@@ -1,4 +1,19 @@
+[script:flare_external_requests_api_key_validation]
+match=/fetch_api_key_validation
+handler=flare_external_requests.FlareValidateApiKey
+python.version = python3
+
 [script:flare_external_requests_user_tenants]
 match=/fetch_user_tenants
 handler=flare_external_requests.FlareUserTenants
 python.version = python3
+
+[script:flare_external_requests_filters_severities]
+match=/fetch_filters_severities
+handler=flare_external_requests.FlareFiltersSeverity
+python.version = python3
+
+[script:flare_external_requests_filters_source_types]
+match=/fetch_filters_source_types
+handler=flare_external_requests.FlareFiltersSourceTypes
+python.version = python3
diff --git a/packages/flare/src/main/resources/splunk/default/web.conf b/packages/flare/src/main/resources/splunk/default/web.conf
index e310a5d..546b97d 100644
--- a/packages/flare/src/main/resources/splunk/default/web.conf
+++ b/packages/flare/src/main/resources/splunk/default/web.conf
@@ -1,3 +1,15 @@
+[expose:flare_external_requests_api_key_validation]
+pattern=fetch_api_key_validation
+methods=POST
+
 [expose:flare_external_requests_user_tenants]
 pattern=fetch_user_tenants
 methods=POST
+
+[expose:flare_external_requests_filters_severities]
+pattern=fetch_filters_severities
+methods=POST
+
+[expose:flare_external_requests_filters_source_types]
+pattern=fetch_filters_source_types
+methods=POST
diff --git a/packages/react-components/src/ConfigurationScreen.css b/packages/react-components/src/ConfigurationScreen.css
index 40d7782..20b846b 100644
--- a/packages/react-components/src/ConfigurationScreen.css
+++ b/packages/react-components/src/ConfigurationScreen.css
@@ -17,6 +17,7 @@
     width: 800px;
     gap: 1.5rem;
     align-self: center;
+    padding-bottom: 2rem;
 }
 
 .content-step {
diff --git a/packages/react-components/src/ConfigurationScreen.tsx b/packages/react-components/src/ConfigurationScreen.tsx
index 35f8996..84502e6 100644
--- a/packages/react-components/src/ConfigurationScreen.tsx
+++ b/packages/react-components/src/ConfigurationScreen.tsx
@@ -1,156 +1,40 @@
-import React, { useEffect, useState, FC } from 'react';
-import {
-    appName,
-    createFlareIndex,
-    redirectToHomepage,
-    fetchApiKey,
-    fetchAvailableIndexNames,
-    fetchCurrentIndexName,
-    fetchIngestMetadataOnly,
-    fetchTenantId,
-    fetchUserTenants,
-    saveConfiguration,
-} from './utils/setupConfiguration';
-import { ConfigurationSteps, Tenant } from './models/flare';
-import './global.css';
+import React, { FC, useEffect, useState } from 'react';
 import './ConfigurationScreen.css';
+import ConfigurationCompletedStep from './components/ConfigurationCompletedStep';
+import ConfigurationInitialStep from './components/ConfigurationInitialStep';
+import ConfigurationUserPreferencesStep from './components/ConfigurationUserPreferencesStep';
 import LoadingBar from './components/LoadingBar';
+import { toastManager } from './components/ToastManager';
 import DoneIcon from './components/icons/DoneIcon';
 import ExternalLinkIcon from './components/icons/ExternalLinkIcon';
-import { toastManager } from './components/ToastManager';
 import ToolIcon from './components/icons/ToolIcon';
-import ConfigurationInitialStep from './components/ConfigurationInitialStep';
-import ConfigurationUserPreferencesStep from './components/ConfigurationUserPreferencesStep';
-import ConfigurationCompletedStep from './components/ConfigurationCompletedStep';
-
-const TOAST_API_KEY_ERROR = 'api_key_error';
-const TOAST_TENANT_SUCCESS = 'tenant_success';
+import './global.css';
+import { ConfigurationStep } from './models/flare';
+import { createFlareIndex, fetchApiKey, redirectToHomepage } from './utils/setupConfiguration';
 
 const ConfigurationScreen: FC<{ theme: string }> = ({ theme }) => {
+    const [configurationStep, setConfigurationStep] = useState(ConfigurationStep.Initial);
     const [apiKey, setApiKey] = useState('');
-    const [tenantId, setTenantId] = useState(-1);
-    const [indexName, setIndexName] = useState(appName);
-    const [errorMessage, setErrorMessage] = useState('');
-    const [tenants, setUserTenants] = useState<Tenant[]>([]);
-    const [isIngestingMetadataOnly, setIsIngestingMetadataOnly] = useState(false);
-    const [isLoading, setIsLoading] = useState(false);
-    const [isCompleted, setIsCompleted] = useState(false);
-    const [indexNames, setIndexNames] = useState<string[]>([]);
 
     toastManager.setTheme(theme);
 
-    function reset(): void {
-        setApiKey('');
-        setTenantId(-1);
-        setUserTenants([]);
-        setIsLoading(false);
-        setIsCompleted(false);
-    }
-
-    function getCurrentConfigurationStep(): ConfigurationSteps {
-        if (tenants.length === 0) {
-            return ConfigurationSteps.Initial;
-        }
-        if (!isCompleted) {
-            return ConfigurationSteps.UserPreferences;
-        }
-
-        return ConfigurationSteps.Completed;
-    }
-
-    const handleApiKeyChange = (e): void => setApiKey(e.target.value);
-    const handleTenantIdChange = (e): void => setTenantId(parseInt(e.target.value, 10));
-    const handleIndexNameChange = (e): void => setIndexName(e.target.value);
-    const handleIsIngestingMetadataChange = (e): void => {
-        setIsIngestingMetadataOnly(e.target.checked);
-    };
-
     const handleBackButton = (): void => {
-        const currentConfigurationStep = getCurrentConfigurationStep();
-        if (currentConfigurationStep === ConfigurationSteps.Initial) {
+        if (configurationStep === ConfigurationStep.Initial) {
             redirectToHomepage();
-        } else if (currentConfigurationStep === ConfigurationSteps.UserPreferences) {
-            setUserTenants([]);
-        } else if (currentConfigurationStep === ConfigurationSteps.Completed) {
-            reset();
+        } else if (configurationStep === ConfigurationStep.UserPreferences) {
+            setConfigurationStep(ConfigurationStep.Initial);
+        } else if (configurationStep === ConfigurationStep.Completed) {
+            setConfigurationStep(ConfigurationStep.Initial);
         }
     };
 
-    const handleSubmitApiKey = (): void => {
-        setIsLoading(true);
-        fetchUserTenants(
-            apiKey,
-            (userTenants: Tenant[]) => {
-                if (tenantId === -1 && userTenants.length > 0) {
-                    setTenantId(userTenants[0].id);
-                }
-                setErrorMessage('');
-                setUserTenants(userTenants);
-                setIsLoading(false);
-            },
-            (error: string) => {
-                setErrorMessage(error);
-                setIsLoading(false);
-                toastManager.show({
-                    id: TOAST_API_KEY_ERROR,
-                    isError: true,
-                    content: 'Something went wrong. Please review your form.',
-                });
-            }
-        );
-    };
-
-    const handleSubmitTenant = (): void => {
-        setIsLoading(true);
-        saveConfiguration(apiKey, tenantId, indexName, isIngestingMetadataOnly)
-            .then(() => {
-                setIsLoading(false);
-                setIsCompleted(true);
-                toastManager.destroy(TOAST_API_KEY_ERROR);
-                toastManager.show({
-                    id: TOAST_TENANT_SUCCESS,
-                    content: 'Configured Flare Account',
-                });
-            })
-            .catch((e: any) => {
-                setIsLoading(false);
-                toastManager.show({
-                    id: TOAST_API_KEY_ERROR,
-                    isError: true,
-                    content: `Something went wrong. ${e.responseText}`,
-                });
-            });
-    };
-
-    function getSelectedTenantName(): string {
-        const filteredTenants = tenants.filter((tenant: Tenant) => tenant.id === tenantId);
-        if (filteredTenants.length > 0) {
-            return filteredTenants[0].name;
-        }
-
-        return 'unknown';
-    }
-
     useEffect(() => {
-        if (isCompleted) {
-            return;
-        }
-        createFlareIndex().then(() => {
-            Promise.all([
-                fetchApiKey(),
-                fetchTenantId(),
-                fetchIngestMetadataOnly(),
-                fetchCurrentIndexName(),
-                fetchAvailableIndexNames(),
-            ]).then(([key, id, ingestMetadataOnly, index, availableIndexNames]) => {
+        if (configurationStep === ConfigurationStep.Initial) {
+            Promise.all([fetchApiKey(), createFlareIndex()]).then(([key]) => {
                 setApiKey(key);
-                setTenantId(id);
-                setIsIngestingMetadataOnly(ingestMetadataOnly);
-                setIndexName(index);
-                setIndexNames(availableIndexNames);
             });
-        });
-    }, [isCompleted]);
+        }
+    }, [configurationStep]);
 
     useEffect(() => {
         const container = document.getElementById('container') as HTMLDivElement;
@@ -160,51 +44,37 @@ const ConfigurationScreen: FC<{ theme: string }> = ({ theme }) => {
         }
     }, [theme]);
 
-    const currentConfigurationStep = getCurrentConfigurationStep();
-
     return (
         <div id="container" className={theme === 'dark' ? 'dark' : ''}>
-            <LoadingBar
-                max={Object.keys(ConfigurationSteps).length / 2}
-                value={currentConfigurationStep}
-            />
+            <LoadingBar max={Object.keys(ConfigurationStep).length / 2} value={configurationStep} />
             <div className="content">
-                <ToolIcon
-                    remSize={6}
-                    hidden={currentConfigurationStep === ConfigurationSteps.Completed}
-                />
-                <DoneIcon
-                    remSize={6}
-                    hidden={currentConfigurationStep !== ConfigurationSteps.Completed}
-                />
+                <ToolIcon remSize={6} hidden={configurationStep === ConfigurationStep.Completed} />
+                <DoneIcon remSize={6} hidden={configurationStep !== ConfigurationStep.Completed} />
                 <div className="content-step">
                     <h2>Configure your Flare Account</h2>
                     <ConfigurationInitialStep
-                        show={currentConfigurationStep === ConfigurationSteps.Initial}
+                        show={configurationStep === ConfigurationStep.Initial}
+                        configurationStep={configurationStep}
                         apiKey={apiKey}
-                        errorMessage={errorMessage}
-                        isLoading={isLoading}
                         onCancelConfigurationClick={handleBackButton}
-                        onSubmitApiKeyClick={handleSubmitApiKey}
-                        onApiKeyChange={handleApiKeyChange}
+                        onApiKeyValidated={() =>
+                            setConfigurationStep(ConfigurationStep.UserPreferences)
+                        }
+                        setApiKey={setApiKey}
                     />
                     <ConfigurationUserPreferencesStep
-                        show={currentConfigurationStep === ConfigurationSteps.UserPreferences}
-                        selectedTenantId={tenantId}
-                        tenants={tenants}
-                        selectedIndexName={indexName}
-                        indexNames={indexNames}
-                        isLoading={isLoading}
-                        isIngestingMetadataOnly={isIngestingMetadataOnly}
+                        show={configurationStep === ConfigurationStep.UserPreferences}
+                        configurationStep={configurationStep}
+                        apiKey={apiKey}
                         onNavigateBackClick={handleBackButton}
-                        onSubmitUserPreferencesClick={handleSubmitTenant}
-                        onTenantIdChange={handleTenantIdChange}
-                        onIndexNameChange={handleIndexNameChange}
-                        onIngestingMetadataChange={handleIsIngestingMetadataChange}
+                        onUserPreferencesSaved={() =>
+                            setConfigurationStep(ConfigurationStep.Completed)
+                        }
                     />
                     <ConfigurationCompletedStep
-                        show={currentConfigurationStep === ConfigurationSteps.Completed}
-                        tenantName={getSelectedTenantName()}
+                        show={configurationStep === ConfigurationStep.Completed}
+                        apiKey={apiKey}
+                        configurationStep={configurationStep}
                         onEditConfigurationClick={handleBackButton}
                     />
                 </div>
diff --git a/packages/react-components/src/components/ConfigurationCompletedStep.tsx b/packages/react-components/src/components/ConfigurationCompletedStep.tsx
index c1e7f43..a41b996 100644
--- a/packages/react-components/src/components/ConfigurationCompletedStep.tsx
+++ b/packages/react-components/src/components/ConfigurationCompletedStep.tsx
@@ -1,20 +1,37 @@
 import React, { FC, useEffect, useState } from 'react';
+import {
+    fetchTenantId,
+    fetchUserTenants,
+    getFlareSearchDataUrl,
+} from '../utils/setupConfiguration';
 import Button from './Button';
-import { getFlareSearchDataUrl } from '../utils/setupConfiguration';
 import ArrowRightIcon from './icons/ArrowRightIcon';
 
+import { ConfigurationStep, Tenant } from '../models/flare';
 import './ConfigurationGlobalStep.css';
 
 const ConfigurationCompletedStep: FC<{
     show: boolean;
-    tenantName: string;
+    apiKey: string;
+    configurationStep: ConfigurationStep;
     onEditConfigurationClick: () => void;
-}> = ({ show, tenantName, onEditConfigurationClick }) => {
+}> = ({ show, apiKey, configurationStep, onEditConfigurationClick }) => {
     const [flareSearchUrl, setFlareSearchUrl] = useState('');
+    const [tenantName, setTenantName] = useState('');
 
     useEffect(() => {
-        getFlareSearchDataUrl().then((url) => setFlareSearchUrl(url));
-    }, []);
+        if (configurationStep === ConfigurationStep.Completed) {
+            Promise.all([getFlareSearchDataUrl(), fetchTenantId(), fetchUserTenants(apiKey)]).then(
+                ([url, tenantId, userTenants]) => {
+                    setFlareSearchUrl(url);
+                    setTenantName(
+                        userTenants.find((tenant: Tenant) => tenant.id === tenantId)?.name ||
+                            'unknown'
+                    );
+                }
+            );
+        }
+    }, [configurationStep]);
 
     return (
         <div hidden={!show}>
diff --git a/packages/react-components/src/components/ConfigurationGlobalStep.css b/packages/react-components/src/components/ConfigurationGlobalStep.css
index e39cd10..ea67c81 100644
--- a/packages/react-components/src/components/ConfigurationGlobalStep.css
+++ b/packages/react-components/src/components/ConfigurationGlobalStep.css
@@ -13,7 +13,7 @@
     width: 100%;
     align-items: flex-start;
     margin-top: 2rem;
-    gap: 1rem;
+    gap: 2rem;
 }
 
 .form-item {
diff --git a/packages/react-components/src/components/ConfigurationInitialStep.tsx b/packages/react-components/src/components/ConfigurationInitialStep.tsx
index a1256f7..588fb72 100644
--- a/packages/react-components/src/components/ConfigurationInitialStep.tsx
+++ b/packages/react-components/src/components/ConfigurationInitialStep.tsx
@@ -1,29 +1,60 @@
-import React, { ChangeEvent, FC } from 'react';
+import React, { FC, useEffect, useState } from 'react';
+import Button from './Button';
 import Label from './Label';
 import Tooltip from './Tooltip';
 import ErrorIcon from './icons/ErrorIcon';
-import Button from './Button';
 
+import { ConfigurationStep } from '../models/flare';
+import { fetchApiKeyValidation } from '../utils/setupConfiguration';
 import './ConfigurationGlobalStep.css';
 import './ConfigurationInitialStep.css';
+import { ToastKeys, toastManager } from './ToastManager';
 
 const ConfigurationInitialStep: FC<{
     show?: boolean;
+    configurationStep: ConfigurationStep;
     apiKey?: string;
-    errorMessage?: string;
-    isLoading?: boolean;
+    setApiKey: (apiKey: string) => void;
     onCancelConfigurationClick: () => void;
-    onSubmitApiKeyClick: () => void;
-    onApiKeyChange: (e: ChangeEvent) => void;
+    onApiKeyValidated: () => void;
 }> = ({
     show = false,
+    configurationStep,
     apiKey = '',
-    errorMessage = '',
-    isLoading = false,
+    setApiKey,
     onCancelConfigurationClick,
-    onSubmitApiKeyClick,
-    onApiKeyChange,
+    onApiKeyValidated,
 }) => {
+    const [errorMessage, setErrorMessage] = useState('');
+    const [isLoading, setIsLoading] = useState(false);
+    const handleApiKeyChange = (e): void => setApiKey(e.target.value);
+
+    const handleSubmitApiKey = (): void => {
+        setIsLoading(true);
+        fetchApiKeyValidation(apiKey)
+            .then(() => {
+                setErrorMessage('');
+                setIsLoading(false);
+                onApiKeyValidated();
+            })
+            .catch((error: any) => {
+                console.log(error);
+                setErrorMessage(error.data);
+                setIsLoading(false);
+                toastManager.show({
+                    id: ToastKeys.ERROR,
+                    isError: true,
+                    content: 'Something went wrong. Please review your form.',
+                });
+            });
+    };
+
+    useEffect(() => {
+        if (configurationStep !== ConfigurationStep.Initial) {
+            setIsLoading(false);
+        }
+    }, [configurationStep]);
+
     return (
         <div hidden={!show}>
             <h5>Enter your API key</h5>
@@ -44,7 +75,7 @@ const ConfigurationInitialStep: FC<{
                         id="apiKey"
                         type="password"
                         value={apiKey}
-                        onChange={onApiKeyChange}
+                        onChange={handleApiKeyChange}
                         className={`input ${errorMessage.length > 0 ? 'border-error' : ''}`}
                         placeholder="Your API Key"
                     />
@@ -57,7 +88,7 @@ const ConfigurationInitialStep: FC<{
                     <Button onClick={(): void => onCancelConfigurationClick()} isSecondary>
                         Cancel
                     </Button>
-                    <Button onClick={(): void => onSubmitApiKeyClick()} isLoading={isLoading}>
+                    <Button onClick={(): void => handleSubmitApiKey()} isLoading={isLoading}>
                         Next
                     </Button>
                 </div>
diff --git a/packages/react-components/src/components/ConfigurationUserPreferencesStep.css b/packages/react-components/src/components/ConfigurationUserPreferencesStep.css
index c367223..67d1cf9 100644
--- a/packages/react-components/src/components/ConfigurationUserPreferencesStep.css
+++ b/packages/react-components/src/components/ConfigurationUserPreferencesStep.css
@@ -2,13 +2,8 @@
     font-size: 0.75rem;
     color: var(--secondary-text-color);
     margin-top: 5px;
-    margin-bottom: 1rem;
 }
 
-.switch-layout {
-    display: flex;
-    flex-direction: row;
-    gap: 0.5rem;
-    align-items: center;
-    margin-top: 1rem;
+.switch-container {
+    margin-top: 0.5rem;
 }
diff --git a/packages/react-components/src/components/ConfigurationUserPreferencesStep.tsx b/packages/react-components/src/components/ConfigurationUserPreferencesStep.tsx
index 92eaf9c..1610fc2 100644
--- a/packages/react-components/src/components/ConfigurationUserPreferencesStep.tsx
+++ b/packages/react-components/src/components/ConfigurationUserPreferencesStep.tsx
@@ -1,47 +1,193 @@
-import React, { ChangeEvent, FC } from 'react';
-import Label from './Label';
+import React, { FC, useEffect, useState } from 'react';
+import {
+    ConfigurationStep,
+    Severity,
+    SourceType,
+    SourceTypeCategory,
+    Tenant,
+} from '../models/flare';
 import Button from './Button';
-import { Tenant } from '../models/flare';
+import Label from './Label';
 import Select from './Select';
 
+import {
+    appName,
+    DEFAULT_FILTER_VALUE,
+    fetchAvailableIndexNames,
+    fetchCurrentIndexName,
+    fetchFiltersSeverities,
+    fetchFiltersSourceTypes,
+    fetchIngestMetadataOnly,
+    fetchSeveritiesFilter,
+    fetchSourceTypesFilter,
+    fetchTenantId,
+    fetchUserTenants,
+    NO_FILTER_VALUE,
+    saveConfiguration,
+} from '../utils/setupConfiguration';
 import './ConfigurationGlobalStep.css';
 import './ConfigurationUserPreferencesStep.css';
+import SeverityOptions from './SeverityOptions';
+import SourceTypeCategoryOptions from './SourceTypeCategoryOptions';
 import Switch from './Switch';
+import { ToastKeys, toastManager } from './ToastManager';
+import Tooltip from './Tooltip';
 
 const ConfigurationUserPreferencesStep: FC<{
     show: boolean;
-    tenants: Tenant[];
-    selectedTenantId: number;
-    indexNames: string[];
-    selectedIndexName: string;
-    isLoading: boolean;
-    isIngestingMetadataOnly: boolean;
+    configurationStep: ConfigurationStep;
+    apiKey: string;
     onNavigateBackClick: () => void;
-    onSubmitUserPreferencesClick: () => void;
-    onTenantIdChange: (e: ChangeEvent) => void;
-    onIndexNameChange: (e: ChangeEvent) => void;
-    onIngestingMetadataChange: (e: ChangeEvent) => void;
-}> = ({
-    show,
-    tenants,
-    selectedTenantId,
-    indexNames,
-    selectedIndexName,
-    isLoading,
-    isIngestingMetadataOnly,
-    onNavigateBackClick,
-    onSubmitUserPreferencesClick,
-    onTenantIdChange,
-    onIndexNameChange,
-    onIngestingMetadataChange,
-}) => {
+    onUserPreferencesSaved: () => void;
+}> = ({ show, configurationStep, apiKey, onNavigateBackClick, onUserPreferencesSaved }) => {
+    const [tenantId, setTenantId] = useState(-1);
+    const [tenants, setUserTenants] = useState<Tenant[]>([]);
+    const [selectedSeverities, setSelectedSeverities] = useState<Severity[]>([]);
+    const [severities, setSeverities] = useState<Severity[]>([]);
+    const [sourceTypeCategories, setSourceTypeCategories] = useState<SourceTypeCategory[]>([]);
+    const [selectedSourceTypes, setSelectedSourceTypes] = useState<SourceType[]>([]);
+    const [indexName, setIndexName] = useState('');
+    const [indexNames, setIndexNames] = useState<string[]>([]);
+    const [isIngestingMetadataOnly, setIsIngestingMetadataOnly] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+
+    const handleTenantIdChange = (e): void => setTenantId(parseInt(e.target.value, 10));
+    const handleIndexNameChange = (e): void => setIndexName(e.target.value);
+    const handleIsIngestingMetadataChange = (e): void =>
+        setIsIngestingMetadataOnly(e.target.checked);
+
+    const handleSubmitUserPreferences = (): void => {
+        setIsLoading(true);
+        let severitiesFilter = selectedSeverities.map((severity) => severity.value).join(',');
+        if (severitiesFilter.length === 0) {
+            severitiesFilter = NO_FILTER_VALUE;
+        }
+        let sourceTypesFilter = selectedSourceTypes.map((sourceType) => sourceType.value).join(',');
+        if (sourceTypesFilter.length === 0) {
+            sourceTypesFilter = NO_FILTER_VALUE;
+        }
+        saveConfiguration(
+            apiKey,
+            tenantId,
+            indexName,
+            isIngestingMetadataOnly,
+            severitiesFilter,
+            sourceTypesFilter
+        )
+            .then(() => {
+                setIsLoading(false);
+                toastManager.destroy(ToastKeys.ERROR);
+                toastManager.show({
+                    id: ToastKeys.SUCCESS,
+                    content: 'Configured Flare Account',
+                });
+                onUserPreferencesSaved();
+            })
+            .catch((e: any) => {
+                setIsLoading(false);
+                toastManager.show({
+                    id: ToastKeys.ERROR,
+                    isError: true,
+                    content: `Something went wrong. ${e.responseText}`,
+                });
+            });
+    };
+
+    useEffect(() => {
+        if (configurationStep === ConfigurationStep.UserPreferences) {
+            Promise.all([
+                fetchTenantId(),
+                fetchIngestMetadataOnly(),
+                fetchCurrentIndexName(),
+                fetchUserTenants(apiKey),
+                fetchFiltersSeverities(apiKey),
+                fetchFiltersSourceTypes(apiKey),
+                fetchAvailableIndexNames(),
+                fetchSeveritiesFilter(),
+                fetchSourceTypesFilter(),
+            ])
+                .then(
+                    ([
+                        id,
+                        ingestMetadataOnly,
+                        index,
+                        userTenants,
+                        availableSeverities,
+                        availableSourceTypeCategories,
+                        availableIndexNames,
+                        severitiesFilter,
+                        sourceTypesFilter,
+                    ]) => {
+                        setTenantId(id);
+                        setIsIngestingMetadataOnly(ingestMetadataOnly);
+                        setIndexName(index);
+                        if (tenantId === -1 && userTenants.length > 0) {
+                            setTenantId(userTenants[0].id);
+                        }
+                        setUserTenants(userTenants);
+                        setSeverities(availableSeverities);
+                        setSourceTypeCategories(availableSourceTypeCategories);
+                        setIndexNames(availableIndexNames);
+
+                        const currentSeverities: Severity[] = [];
+                        severitiesFilter.forEach((severityValue) => {
+                            if (severityValue === DEFAULT_FILTER_VALUE) {
+                                currentSeverities.push(...availableSeverities);
+                            } else {
+                                const foundSeverityMatch = availableSeverities.find(
+                                    (severity) => severity.value === severityValue
+                                );
+                                if (foundSeverityMatch) {
+                                    currentSeverities.push(foundSeverityMatch);
+                                }
+                            }
+                        });
+                        setSelectedSeverities(currentSeverities);
+
+                        const currentSourceTypes: SourceType[] = [];
+                        sourceTypesFilter.forEach((sourceTypeValue) => {
+                            if (sourceTypeValue === DEFAULT_FILTER_VALUE) {
+                                currentSourceTypes.push(
+                                    ...availableSourceTypeCategories.flatMap(
+                                        (category) => category.types
+                                    )
+                                );
+                            } else {
+                                const foundSourceTypeMatch = availableSourceTypeCategories
+                                    .flatMap((category) => category.types)
+                                    .find((sourceType) => sourceType.value === sourceTypeValue);
+                                if (foundSourceTypeMatch) {
+                                    currentSourceTypes.push(foundSourceTypeMatch);
+                                }
+                            }
+                        });
+                        setSelectedSourceTypes(currentSourceTypes);
+                    }
+                )
+                .catch((error: any) => {
+                    toastManager.show({
+                        id: ToastKeys.ERROR,
+                        isError: true,
+                        content: 'Something went wrong.',
+                    });
+                });
+        } else {
+            setTenantId(-1);
+            setIndexName(appName);
+            setUserTenants([]);
+            setSeverities([]);
+            setSourceTypeCategories([]);
+            setIsLoading(false);
+        }
+    }, [configurationStep]);
+
     return (
         <div hidden={!show}>
             <h5>Please select the Tenant you want to ingest events from</h5>
             <div className="form-group">
                 <div className="form-item">
                     <Label>Tenant</Label>
-                    <Select id="tenants" onChange={onTenantIdChange} value={selectedTenantId}>
+                    <Select id="tenants" onChange={handleTenantIdChange} value={tenantId}>
                         {tenants.map((tenant) => {
                             return (
                                 <option key={tenants.indexOf(tenant)} value={tenant.id}>
@@ -54,7 +200,7 @@ const ConfigurationUserPreferencesStep: FC<{
                 </div>
                 <div className="form-item">
                     <Label>Splunk Index for event ingestion</Label>
-                    <Select id="indexes" onChange={onIndexNameChange} value={selectedIndexName}>
+                    <Select id="indexes" onChange={handleIndexNameChange} value={indexName}>
                         {indexNames.map((indexName) => {
                             return (
                                 <option key={indexNames.indexOf(indexName)} value={indexName}>
@@ -65,20 +211,76 @@ const ConfigurationUserPreferencesStep: FC<{
                     </Select>
                 </div>
                 <div className="form-item">
-                    <div className="switch-layout">
-                        <span>Only ingest the metadata of events</span>
+                    <div className="label-tooltip">
+                        <Label>Severity filter</Label>
+                        <Tooltip>
+                            <div>
+                                {
+                                    'Select the minimal alert severity to ignore less critical events associated with this identifier.'
+                                }
+                                <br />
+                                <br />
+                                {'To learn more about severities see '}
+                                <a
+                                    target="_blank"
+                                    href="https://docs.flare.io/understand-event-severity"
+                                >
+                                    Understand Severity Scoring.
+                                </a>
+                            </div>
+                        </Tooltip>
+                    </div>
+                    <SeverityOptions
+                        setSelectedSeverities={setSelectedSeverities}
+                        severities={severities}
+                        selectedSeverities={selectedSeverities}
+                    />
+                </div>
+                <div className="form-item">
+                    <div className="label-tooltip">
+                        <Label>Categories filter</Label>
+                        <Tooltip>
+                            <div>
+                                {'For more details on Identifier Categories, please visit our '}
+                                <a
+                                    target="_blank"
+                                    href="https://docs.flare.io/configure-identifiers"
+                                >
+                                    Documentation.
+                                </a>
+                            </div>
+                        </Tooltip>
+                    </div>
+                    <SourceTypeCategoryOptions
+                        setSelectedSourceTypes={setSelectedSourceTypes}
+                        sourceTypeCategories={sourceTypeCategories}
+                        selectedSourceTypes={selectedSourceTypes}
+                    />
+                </div>
+                <div className="form-item">
+                    <div className="label-tooltip">
+                        <Label>Basic event ingestion</Label>
+                        <Tooltip>
+                            <div>
+                                {
+                                    'Select this option if you want to ingest only the metadata of the events instead of the full data to it.'
+                                }
+                            </div>
+                        </Tooltip>
+                    </div>
+                    <span className="switch-container">
                         <Switch
                             value={isIngestingMetadataOnly}
-                            onChange={onIngestingMetadataChange}
+                            onChange={handleIsIngestingMetadataChange}
                         />
-                    </div>
+                    </span>
                 </div>
                 <div className="button-group">
                     <Button onClick={(): void => onNavigateBackClick()} isSecondary>
                         Back
                     </Button>
                     <Button
-                        onClick={(): void => onSubmitUserPreferencesClick()}
+                        onClick={(): void => handleSubmitUserPreferences()}
                         isLoading={isLoading}
                     >
                         Submit
diff --git a/packages/react-components/src/components/Label.css b/packages/react-components/src/components/Label.css
index 13c7b31..9460f48 100644
--- a/packages/react-components/src/components/Label.css
+++ b/packages/react-components/src/components/Label.css
@@ -1,5 +1,5 @@
 .label {
-    color: var(--secondary-text-color);
+    color: var(--header-text-color);
     display: flex;
     flex-direction: row;
     gap: 0.125rem;
diff --git a/packages/react-components/src/components/SeverityOption.css b/packages/react-components/src/components/SeverityOption.css
new file mode 100644
index 0000000..29972e7
--- /dev/null
+++ b/packages/react-components/src/components/SeverityOption.css
@@ -0,0 +1,28 @@
+.toggle {
+    position: relative;
+    width: 1rem;
+    height: 1rem;
+    display: inline-block;
+    z-index: 2;
+}
+
+.toggle input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.dot {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 1rem;
+    width: 1rem;
+    border-radius: 50%;
+    border-width: 1px;
+    border-style: solid;
+    display: inline-block;
+}
diff --git a/packages/react-components/src/components/SeverityOption.tsx b/packages/react-components/src/components/SeverityOption.tsx
new file mode 100644
index 0000000..4828c8a
--- /dev/null
+++ b/packages/react-components/src/components/SeverityOption.tsx
@@ -0,0 +1,47 @@
+import React, { FC, useState } from 'react';
+
+import { Severity } from '../models/flare';
+import './SeverityOption.css';
+import './Tooltip.css';
+
+const SeverityOption: FC<{
+    isChecked?: boolean;
+    severity: Severity;
+    onCheckChange: (isChecked: boolean) => void;
+}> = ({ isChecked = false, severity, onCheckChange }) => {
+    const [isShowingTooltip, setShowingTooltip] = useState(false);
+
+    return (
+        <div className="tooltip-container">
+            <label
+                className="toggle"
+                onMouseEnter={(_) => setShowingTooltip(true)}
+                onMouseLeave={(_) => setShowingTooltip(false)}
+            >
+                <input
+                    type="checkbox"
+                    checked={isChecked}
+                    onChange={(e) => onCheckChange(e.target.checked)}
+                />
+                <span
+                    className="dot"
+                    style={{
+                        borderColor: severity.color,
+                        backgroundColor: isChecked ? severity.color : '',
+                    }}
+                />
+            </label>
+            <div
+                hidden={!isShowingTooltip}
+                className="tooltip"
+                style={{
+                    zIndex: 1,
+                }}
+            >
+                {severity.label}
+            </div>
+        </div>
+    );
+};
+
+export default SeverityOption;
diff --git a/packages/react-components/src/components/SeverityOptions.css b/packages/react-components/src/components/SeverityOptions.css
new file mode 100644
index 0000000..bf6cb35
--- /dev/null
+++ b/packages/react-components/src/components/SeverityOptions.css
@@ -0,0 +1,6 @@
+#severities-container {
+    display: flex;
+    flex-direction: row;
+    margin-top: 0.5rem;
+    gap: 0.75rem;
+}
diff --git a/packages/react-components/src/components/SeverityOptions.tsx b/packages/react-components/src/components/SeverityOptions.tsx
new file mode 100644
index 0000000..a23465d
--- /dev/null
+++ b/packages/react-components/src/components/SeverityOptions.tsx
@@ -0,0 +1,49 @@
+import React, { FC } from 'react';
+
+import { Severity } from '../models/flare';
+import SeverityOption from './SeverityOption';
+import './SeverityOptions.css';
+
+const SeverityOptions: FC<{
+    severities: Severity[];
+    selectedSeverities: Severity[];
+    setSelectedSeverities: (selectedSeverities: Severity[]) => void;
+}> = ({ severities, selectedSeverities, setSelectedSeverities }) => {
+    const isSeverityChecked = (severity: Severity): boolean => {
+        return (
+            selectedSeverities.findIndex(
+                (selectedSeverity) => selectedSeverity.value === severity.value
+            ) >= 0
+        );
+    };
+
+    const handleOnSeverityChange = (severity: Severity, isChecked: boolean): void => {
+        if (isChecked) {
+            const newSeverities = new Array(...selectedSeverities);
+            newSeverities.push(severity);
+            setSelectedSeverities(newSeverities);
+        } else {
+            const newSeverities = selectedSeverities.filter(
+                (selectedSeverity) => selectedSeverity.value !== severity.value
+            );
+            setSelectedSeverities(newSeverities);
+        }
+    };
+
+    return (
+        <div id="severities-container">
+            {severities.map((severity) => {
+                return (
+                    <SeverityOption
+                        key={severities.indexOf(severity)}
+                        isChecked={isSeverityChecked(severity)}
+                        severity={severity}
+                        onCheckChange={(isChecked) => handleOnSeverityChange(severity, isChecked)}
+                    />
+                );
+            })}
+        </div>
+    );
+};
+
+export default SeverityOptions;
diff --git a/packages/react-components/src/components/SourceTypeCategoryOption.css b/packages/react-components/src/components/SourceTypeCategoryOption.css
new file mode 100644
index 0000000..f6b994f
--- /dev/null
+++ b/packages/react-components/src/components/SourceTypeCategoryOption.css
@@ -0,0 +1,56 @@
+.source-types-category-container {
+    display: flex;
+    flex-direction: column;
+}
+
+.source-types-children-container {
+    margin-left: 2rem;
+    margin-top: 0.25rem;
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    gap: 0.25rem;
+}
+
+.source-types-children-container[hidden] {
+    display: none;
+}
+
+.source-types-category-header {
+    width: 14rem;
+    display: flex;
+    flex-direction: row;
+}
+
+.source-types-category-count {
+    user-select: none;
+    color: var(--secondary-text-color);
+    flex: 1;
+    text-align: end;
+}
+
+.source-types-category {
+    width: 1rem;
+    height: 1rem;
+    margin-left: 0.5rem;
+    cursor: pointer;
+    align-self: center;
+}
+
+.source-types-category > span {
+    display: inline-table;
+    width: 0.5rem;
+    height: 0.5rem;
+    border: solid white;
+    border-width: 0 0 0.125rem 0.125rem;
+}
+
+.source-types-category-expand > span {
+    transform: rotate(-45deg);
+    margin-bottom: 0.5rem;
+}
+
+.source-types-category-collapse > span {
+    transform: rotate(135deg);
+    margin-top: 0.25rem;
+}
diff --git a/packages/react-components/src/components/SourceTypeCategoryOption.tsx b/packages/react-components/src/components/SourceTypeCategoryOption.tsx
new file mode 100644
index 0000000..b752d82
--- /dev/null
+++ b/packages/react-components/src/components/SourceTypeCategoryOption.tsx
@@ -0,0 +1,76 @@
+import React, { FC, useState } from 'react';
+
+import { SourceType, SourceTypeCategory } from '../models/flare';
+import './SourceTypeCategoryOption.css';
+import SourceTypeOption from './SourceTypeOption';
+
+const SourceTypeCategoryOption: FC<{
+    isChecked?: boolean;
+    sourceTypeCategory: SourceTypeCategory;
+    isSourceTypeChecked: (sourceType: SourceType) => boolean;
+    onCategoryCheckChange: (isChecked: boolean) => void;
+    onSourceTypeCheckChange: (sourceType: SourceType, isChecked: boolean) => void;
+}> = ({
+    isChecked = false,
+    sourceTypeCategory,
+    isSourceTypeChecked,
+    onCategoryCheckChange,
+    onSourceTypeCheckChange,
+}) => {
+    const [isExpanded, setExpanded] = useState(true);
+
+    const getSelectedCategoryCount = (): number => {
+        return sourceTypeCategory.types.filter((sourceType) => isSourceTypeChecked(sourceType))
+            .length;
+    };
+
+    const selectedCategoryCount = getSelectedCategoryCount();
+
+    return (
+        <div className="source-types-category-container">
+            <div className="source-types-category-header">
+                <SourceTypeOption
+                    sourceType={sourceTypeCategory}
+                    isChecked={isChecked}
+                    isPartiallyChecked={selectedCategoryCount > 0 && !isChecked}
+                    onCheckChange={(isChecked) => onCategoryCheckChange(isChecked)}
+                />
+
+                <span
+                    hidden={sourceTypeCategory.types.length <= 1}
+                    className="source-types-category-count"
+                >
+                    {selectedCategoryCount}
+                </span>
+                <div
+                    hidden={sourceTypeCategory.types.length <= 1}
+                    className={`source-types-category ${
+                        isExpanded
+                            ? 'source-types-category-collapse'
+                            : 'source-types-category-expand'
+                    }`}
+                    onClick={() => setExpanded(!isExpanded)}
+                >
+                    <span />
+                </div>
+            </div>
+            <div className="source-types-children-container" hidden={!isExpanded}>
+                {sourceTypeCategory.types.length > 1 &&
+                    sourceTypeCategory.types.map((sourceType) => {
+                        return (
+                            <SourceTypeOption
+                                key={sourceTypeCategory.types.indexOf(sourceType)}
+                                sourceType={sourceType}
+                                isChecked={isSourceTypeChecked(sourceType)}
+                                onCheckChange={(isChecked) =>
+                                    onSourceTypeCheckChange(sourceType, isChecked)
+                                }
+                            />
+                        );
+                    })}
+            </div>
+        </div>
+    );
+};
+
+export default SourceTypeCategoryOption;
diff --git a/packages/react-components/src/components/SourceTypeCategoryOptions.css b/packages/react-components/src/components/SourceTypeCategoryOptions.css
new file mode 100644
index 0000000..3a2f3d7
--- /dev/null
+++ b/packages/react-components/src/components/SourceTypeCategoryOptions.css
@@ -0,0 +1,8 @@
+#source-types-categories-container {
+    display: flex;
+    flex-direction: column;
+    margin-top: 0.5rem;
+    gap: 1rem;
+    align-items: start;
+    text-align: start;
+}
diff --git a/packages/react-components/src/components/SourceTypeCategoryOptions.tsx b/packages/react-components/src/components/SourceTypeCategoryOptions.tsx
new file mode 100644
index 0000000..7a3fc17
--- /dev/null
+++ b/packages/react-components/src/components/SourceTypeCategoryOptions.tsx
@@ -0,0 +1,79 @@
+import React, { FC } from 'react';
+
+import { SourceType, SourceTypeCategory } from '../models/flare';
+import SourceTypeCategoryOption from './SourceTypeCategoryOption';
+import './SourceTypeCategoryOptions.css';
+
+const SourceTypeCategoryOptions: FC<{
+    sourceTypeCategories: SourceTypeCategory[];
+    selectedSourceTypes: SourceType[];
+    setSelectedSourceTypes: (selectedSourceTypes: SourceType[]) => void;
+}> = ({ sourceTypeCategories, selectedSourceTypes, setSelectedSourceTypes }) => {
+    const isSourceTypeChecked = (sourceType: SourceType): boolean => {
+        return (
+            selectedSourceTypes.findIndex(
+                (selectedSourceType) => selectedSourceType.value === sourceType.value
+            ) >= 0
+        );
+    };
+
+    const isSourceTypeCategoryChecked = (sourceTypeCategory: SourceTypeCategory): boolean => {
+        return (
+            sourceTypeCategory.types.filter((sourceType) => {
+                return isSourceTypeChecked(sourceType);
+            }).length === sourceTypeCategory.types.length
+        );
+    };
+
+    const handleOnSourceTypeChange = (sourceType: SourceType, isChecked: boolean): void => {
+        if (isChecked) {
+            const newSourceTypes = new Array(...selectedSourceTypes);
+            newSourceTypes.push(sourceType);
+            setSelectedSourceTypes(newSourceTypes);
+        } else {
+            const newSourceTypes = selectedSourceTypes.filter(
+                (selectedSourceType) => selectedSourceType.value !== sourceType.value
+            );
+            setSelectedSourceTypes(newSourceTypes);
+        }
+    };
+
+    const handleOnSourceTypeCategoryChange = (
+        sourceTypeCategory: SourceTypeCategory,
+        isChecked: boolean
+    ): void => {
+        if (isChecked) {
+            const newSourceTypes = new Set(selectedSourceTypes);
+            sourceTypeCategory.types.forEach((sourceType) => newSourceTypes.add(sourceType));
+            setSelectedSourceTypes(new Array(...newSourceTypes));
+        } else {
+            const newSourceTypes = selectedSourceTypes.filter(
+                (selectedSourceType) => sourceTypeCategory.types.indexOf(selectedSourceType) === -1
+            );
+            setSelectedSourceTypes(newSourceTypes);
+        }
+    };
+
+    return (
+        <div id="source-types-categories-container">
+            {sourceTypeCategories.map((sourceTypeCategory) => {
+                return (
+                    <SourceTypeCategoryOption
+                        key={sourceTypeCategories.indexOf(sourceTypeCategory)}
+                        sourceTypeCategory={sourceTypeCategory}
+                        isChecked={isSourceTypeCategoryChecked(sourceTypeCategory)}
+                        isSourceTypeChecked={isSourceTypeChecked}
+                        onCategoryCheckChange={(isChecked) =>
+                            handleOnSourceTypeCategoryChange(sourceTypeCategory, isChecked)
+                        }
+                        onSourceTypeCheckChange={(sourceType, isChecked) =>
+                            handleOnSourceTypeChange(sourceType, isChecked)
+                        }
+                    />
+                );
+            })}
+        </div>
+    );
+};
+
+export default SourceTypeCategoryOptions;
diff --git a/packages/react-components/src/components/SourceTypeOption.css b/packages/react-components/src/components/SourceTypeOption.css
new file mode 100644
index 0000000..d6969ce
--- /dev/null
+++ b/packages/react-components/src/components/SourceTypeOption.css
@@ -0,0 +1,82 @@
+.source-type-container {
+    user-select: none;
+    display: flex;
+    flex-direction: row;
+    gap: 0.5rem;
+    cursor: pointer;
+    align-items: center;
+}
+
+.source-type-option-input {
+    width: 0;
+    height: 0;
+    opacity: 0;
+}
+
+.source-type-checkbox {
+    width: 1rem;
+    height: 1rem;
+    background-color: var(--switch-disabled-bg-color);
+    border: 1px solid var(--button-bg-color);
+    border-radius: 0.125rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+}
+
+.source-type-container:hover .source-type-checkbox {
+    background-color: var(--switch-disabled-hover-bg-color);
+}
+
+.source-type-checkbox-partial {
+    width: 1rem;
+    height: 1rem;
+    background-color: var(--button-bg-color);
+    border: 1px solid var(--button-bg-color);
+    border-radius: 0.125rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+}
+
+.source-type-container:hover .source-type-checkbox-partial {
+    background-color: var(--button-bg-hover-color);
+}
+
+.source-type-checkbox-partial::after {
+    content: '';
+    width: 0.5rem;
+    height: 0;
+    border: solid white;
+    border-width: 0 0 0.125rem 0.125rem;
+    position: absolute;
+}
+
+input:checked + .source-type-checkbox {
+    width: 1rem;
+    height: 1rem;
+    background-color: var(--button-bg-color);
+    border: 1px solid var(--button-bg-color);
+    border-radius: 0.125rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+}
+
+.source-type-container:hover:has(> input:checked) .source-type-checkbox {
+    background-color: var(--button-bg-hover-color);
+}
+
+input:checked + .source-type-checkbox::after {
+    content: '';
+    width: 0.5rem;
+    height: 0.25rem;
+    border: solid white;
+    border-width: 0 0 0.125rem 0.125rem;
+    transform: rotate(-45deg);
+    position: absolute;
+    margin-bottom: 0.125rem;
+}
diff --git a/packages/react-components/src/components/SourceTypeOption.tsx b/packages/react-components/src/components/SourceTypeOption.tsx
new file mode 100644
index 0000000..f340649
--- /dev/null
+++ b/packages/react-components/src/components/SourceTypeOption.tsx
@@ -0,0 +1,31 @@
+import React, { FC } from 'react';
+
+import { SourceType } from '../models/flare';
+import './SourceTypeOption.css';
+
+const SourceTypeOption: FC<{
+    isChecked?: boolean;
+    isPartiallyChecked?: boolean;
+    sourceType: SourceType;
+    onCheckChange: (isChecked: boolean) => void;
+}> = ({ isChecked = false, isPartiallyChecked = false, sourceType, onCheckChange }) => {
+    return (
+        <label className="source-type-container" htmlFor={sourceType.value}>
+            <input
+                className="source-type-option-input"
+                type="checkbox"
+                checked={isChecked}
+                id={sourceType.value}
+                onChange={(e) => onCheckChange(e.target.checked)}
+            />
+            <div
+                className={
+                    isPartiallyChecked ? 'source-type-checkbox-partial' : 'source-type-checkbox'
+                }
+            ></div>
+            {sourceType.label}
+        </label>
+    );
+};
+
+export default SourceTypeOption;
diff --git a/packages/react-components/src/components/ToastManager.tsx b/packages/react-components/src/components/ToastManager.tsx
index 398c7d8..9622039 100644
--- a/packages/react-components/src/components/ToastManager.tsx
+++ b/packages/react-components/src/components/ToastManager.tsx
@@ -10,6 +10,11 @@ interface ToastOptions {
     duration?: number;
 }
 
+export enum ToastKeys {
+    SUCCESS = 'tenant_success',
+    ERROR = 'api_key_error',
+}
+
 const TOAST_CONTAINER_ID = 'toast-container-main';
 
 export class ToastManager {
diff --git a/packages/react-components/src/components/Tooltip.css b/packages/react-components/src/components/Tooltip.css
index fac312f..69a704c 100644
--- a/packages/react-components/src/components/Tooltip.css
+++ b/packages/react-components/src/components/Tooltip.css
@@ -16,10 +16,12 @@
     border: 1px solid var(--button-bg-color);
     border-radius: 8px;
     padding: 0.75rem;
-    width: 12rem;
+    width: max-content;
+    max-width: 12rem;
     text-align: start;
     font-size: 0.75rem;
     user-select: none;
+    z-index: 9999999;
 }
 
 .tooltip::before {
diff --git a/packages/react-components/src/components/Tooltip.tsx b/packages/react-components/src/components/Tooltip.tsx
index a964238..0bc507d 100644
--- a/packages/react-components/src/components/Tooltip.tsx
+++ b/packages/react-components/src/components/Tooltip.tsx
@@ -1,13 +1,15 @@
 import React, { FC, useState } from 'react';
-import TooltipIcon from './icons/TooltipIcon';
 import CloseIcon from './icons/CloseIcon';
+import TooltipIcon from './icons/TooltipIcon';
 
 import './Tooltip.css';
 
 const TOOLTIP_WINDOW_ID = 'tooltip-window';
 
-const Tooltip: FC<{}> = ({ children }) => {
-    const [isOpened, setIsOpened] = useState(false);
+const Tooltip: FC<{
+    openedByDefault?: boolean;
+}> = ({ openedByDefault = false, children }) => {
+    const [isOpened, setIsOpened] = useState(openedByDefault);
 
     function globalClickListener(event: MouseEvent): void {
         const tooltipWindow = document.getElementById(TOOLTIP_WINDOW_ID);
diff --git a/packages/react-components/src/models/constants.ts b/packages/react-components/src/models/constants.ts
new file mode 100644
index 0000000..1eddfb0
--- /dev/null
+++ b/packages/react-components/src/models/constants.ts
@@ -0,0 +1,20 @@
+import { SplunkApplicationNamespace } from "./splunk";
+
+export const appName: string = 'flare';
+export const storageRealm: string = 'flare_integration_realm';
+export const applicationNameSpace: SplunkApplicationNamespace = {
+    owner: 'nobody',
+    app: appName,
+    sharing: 'app',
+};
+export const flareSavedSearchName = 'Flare Search';
+export const DEFAULT_FILTER_VALUE = '*';
+export const NO_FILTER_VALUE = 'none';
+
+export enum PasswordKeys {
+    API_KEY = 'api_key',
+    TENANT_ID = 'tenant_id',
+    INGEST_METADATA_ONLY = 'ingest_metadata_only',
+    SEVERITIES_FILTER = 'severities_filter',
+    SOURCE_TYPES_FILTER = 'source_types_filter',
+}
diff --git a/packages/react-components/src/models/flare.ts b/packages/react-components/src/models/flare.ts
index a4b3720..96d3250 100644
--- a/packages/react-components/src/models/flare.ts
+++ b/packages/react-components/src/models/flare.ts
@@ -3,8 +3,23 @@ export interface Tenant {
     name: string;
 }
 
-export enum ConfigurationSteps {
+export enum ConfigurationStep {
     Initial = 1,
     UserPreferences = 2,
     Completed = 3,
 }
+
+export interface Severity {
+    value: string;
+    label: string;
+    color: string;
+}
+
+export interface SourceType {
+    value: string;
+    label: string;
+}
+
+export interface SourceTypeCategory extends SourceType {
+    types: SourceType[];
+}
diff --git a/packages/react-components/src/models/splunk.ts b/packages/react-components/src/models/splunk.ts
index bed3172..edccf01 100644
--- a/packages/react-components/src/models/splunk.ts
+++ b/packages/react-components/src/models/splunk.ts
@@ -94,15 +94,5 @@ export interface SplunkService {
     indexes: () => SplunkIndexesAccessor;
     savedSearches: () => SplunkSavedSearchAccessor;
     get: (splunkUrlPath: string, data: any) => void;
-    post: (
-        splunkUrlPath: string,
-        data: any,
-        callback: (err: { data: string }, response: any) => void
-    ) => void;
-}
-
-export enum PasswordKeys {
-    API_KEY = 'api_key',
-    TENANT_ID = 'tenant_id',
-    INGEST_METADATA_ONLY = 'ingest_metadata_only',
+    post: (splunkUrlPath: string, data: any) => void;
 }
diff --git a/packages/react-components/src/utils/setupConfiguration.ts b/packages/react-components/src/utils/setupConfiguration.ts
index 147e2be..d587377 100644
--- a/packages/react-components/src/utils/setupConfiguration.ts
+++ b/packages/react-components/src/utils/setupConfiguration.ts
@@ -1,23 +1,13 @@
-import { updateConfigurationFile, getConfigurationStanzaValue } from './configurationFileHelper';
-import { Tenant } from '../models/flare';
+import { applicationNameSpace, appName, DEFAULT_FILTER_VALUE, flareSavedSearchName, PasswordKeys, storageRealm } from '../models/constants';
+import { Severity, SourceTypeCategory, Tenant } from '../models/flare';
 import {
-    PasswordKeys,
-    SplunkApplicationNamespace,
     SplunkCollectionItem,
     SplunkService,
-    SplunkStoragePasswordAccessors,
+    SplunkStoragePasswordAccessors
 } from '../models/splunk';
+import { getConfigurationStanzaValue, updateConfigurationFile } from './configurationFileHelper';
 import { promisify } from './util';
 
-export const appName: string = 'flare';
-const storageRealm: string = 'flare_integration_realm';
-const applicationNameSpace: SplunkApplicationNamespace = {
-    owner: 'nobody',
-    app: appName,
-    sharing: 'app',
-};
-const flareSavedSearchName = 'Flare Search';
-
 async function completeSetup(splunkService: SplunkService): Promise<void> {
     await updateConfigurationFile(splunkService, 'app', 'install', {
         is_configured: 'true',
@@ -57,22 +47,44 @@ function createService(): SplunkService {
     return service;
 }
 
-function fetchUserTenants(
-    apiKey: string,
-    successCallback: (userTenants: Array<Tenant>) => void,
-    errorCallback: (errorMessage: string) => void
-): void {
+function fetchApiKeyValidation(apiKey: string): Promise<boolean> {
     const service = createService();
     const data = { apiKey };
-    service.post('/services/fetch_user_tenants', data, (err, response) => {
-        if (err) {
-            errorCallback(err.data);
-        } else if (response.status === 200) {
-            successCallback(response.data.tenants);
+    return promisify(service.post)('/services/fetch_api_key_validation', data).then(
+        (response: any) => {
+            return true;
         }
+    );
+}
+
+function fetchUserTenants(apiKey: string): Promise<Array<Tenant>> {
+    const service = createService();
+    const data = { apiKey };
+    return promisify(service.post)('/services/fetch_user_tenants', data).then((response: any) => {
+        return response.data.tenants;
     });
 }
 
+function fetchFiltersSeverities(apiKey: string): Promise<Array<Severity>> {
+    const service = createService();
+    const data = { apiKey };
+    return promisify(service.post)('/services/fetch_filters_severities', data).then(
+        (response: any) => {
+            return response.data.severities;
+        }
+    );
+}
+
+function fetchFiltersSourceTypes(apiKey: string): Promise<Array<SourceTypeCategory>> {
+    const service = createService();
+    const data = { apiKey };
+    return promisify(service.post)('/services/fetch_filters_source_types', data).then(
+        (response: any) => {
+            return response.data.categories;
+        }
+    );
+}
+
 function doesPasswordExist(storage: SplunkStoragePasswordAccessors, key: string): boolean {
     const passwordId = `${storageRealm}:${key}:`;
 
@@ -94,18 +106,22 @@ async function savePassword(
         const passwordId = `${storageRealm}:${key}:`;
         await storage.del(passwordId);
     }
-    return promisify(storage.create)({
-        name: key,
-        realm: storageRealm,
-        password: value,
-    });
+    if (value.length > 0) {
+        return promisify(storage.create)({
+            name: key,
+            realm: storageRealm,
+            password: value,
+        });
+    }
 }
 
 async function saveConfiguration(
     apiKey: string,
     tenantId: number,
     indexName: string,
-    isIngestingMetadataOnly: boolean
+    isIngestingMetadataOnly: boolean,
+    severitiesFilter: string,
+    sourceTypesFilter: string
 ): Promise<void> {
     const service = createService();
     const storagePasswords = await promisify(service.storagePasswords().fetch)();
@@ -116,6 +132,8 @@ async function saveConfiguration(
         PasswordKeys.INGEST_METADATA_ONLY,
         `${isIngestingMetadataOnly}`
     );
+    await savePassword(storagePasswords, PasswordKeys.SEVERITIES_FILTER, `${severitiesFilter}`);
+    await savePassword(storagePasswords, PasswordKeys.SOURCE_TYPES_FILTER, `${sourceTypesFilter}`);
     await saveIndexForIngestion(service, indexName);
     const isFirstConfiguration = await fetchIsFirstConfiguration();
     if (isFirstConfiguration) {
@@ -165,10 +183,10 @@ async function updateSavedSearchQuery(
 async function fetchCollectionItems(): Promise<SplunkCollectionItem[]> {
     const service = createService();
     return promisify(service.get)('storage/collections/data/event_ingestion_collection/', {})
-        .then((data: any) => {
+        .then((response: any) => {
             const items: SplunkCollectionItem[] = [];
-            if (data.data) {
-                data.data.forEach((element) => {
+            if (response.data) {
+                response.data.forEach((element) => {
                     items.push({
                         key: element._key,
                         value: element.value,
@@ -183,7 +201,7 @@ async function fetchCollectionItems(): Promise<SplunkCollectionItem[]> {
         });
 }
 
-async function fetchPassword(passwordKey: string): Promise<string> {
+async function fetchPassword(passwordKey: string): Promise<string | undefined> {
     const service = createService();
     const storagePasswords = await promisify(service.storagePasswords().fetch)();
     const passwordId = `${storageRealm}:${passwordKey}:`;
@@ -193,16 +211,17 @@ async function fetchPassword(passwordKey: string): Promise<string> {
             return password._properties.clear_password;
         }
     }
-    return '';
+    return undefined;
 }
 
 async function fetchApiKey(): Promise<string> {
-    return fetchPassword(PasswordKeys.API_KEY);
+    const apiKey = await fetchPassword(PasswordKeys.API_KEY);
+    return apiKey ? apiKey : '';
 }
 
 async function fetchTenantId(): Promise<number> {
     return fetchPassword(PasswordKeys.TENANT_ID).then((tenantId) => {
-        if (tenantId !== '') {
+        if (tenantId) {
             return parseInt(tenantId, 10);
         }
 
@@ -212,14 +231,28 @@ async function fetchTenantId(): Promise<number> {
 
 async function fetchIngestMetadataOnly(): Promise<boolean> {
     return fetchPassword(PasswordKeys.INGEST_METADATA_ONLY).then((isIngestingMetadataOnly) => {
-        if (isIngestingMetadataOnly !== '') {
-            return isIngestingMetadataOnly === 'true';
-        }
-
-        return false;
+        return isIngestingMetadataOnly === 'true';
     });
 }
 
+async function fetchSeveritiesFilter(): Promise<Array<string>> {
+    const savedSeverities = await fetchPassword(PasswordKeys.SEVERITIES_FILTER);
+    if (savedSeverities) {
+        return savedSeverities.split(',');
+    }
+
+    return [DEFAULT_FILTER_VALUE];
+}
+
+async function fetchSourceTypesFilter(): Promise<Array<string>> {
+    const savedSourceTypes = await fetchPassword(PasswordKeys.SOURCE_TYPES_FILTER);
+    if (savedSourceTypes) {
+        return savedSourceTypes.split(',');
+    }
+
+    return [DEFAULT_FILTER_VALUE];
+}
+
 async function createFlareIndex(): Promise<void> {
     const service = createService();
     const isFirstConfiguration = await fetchIsFirstConfiguration();
@@ -285,17 +318,23 @@ async function fetchVersionName(defaultValue: string): Promise<string> {
 }
 
 export {
-    saveConfiguration,
-    fetchUserTenants,
-    fetchApiKey,
-    fetchTenantId,
-    fetchIngestMetadataOnly,
-    redirectToHomepage,
-    getRedirectUrl,
-    getFlareSearchDataUrl,
     createFlareIndex,
+    fetchApiKey,
+    fetchApiKeyValidation,
     fetchAvailableIndexNames,
+    fetchCollectionItems,
     fetchCurrentIndexName,
+    fetchFiltersSeverities,
+    fetchFiltersSourceTypes,
+    fetchIngestMetadataOnly,
+    fetchSeveritiesFilter,
+    fetchSourceTypesFilter,
+    fetchTenantId,
+    fetchUserTenants,
     fetchVersionName,
-    fetchCollectionItems,
+    getFlareSearchDataUrl,
+    getRedirectUrl,
+    redirectToHomepage,
+    saveConfiguration
 };
+