diff --git a/frontend/common/services/useWarehouseConnection.ts b/frontend/common/services/useWarehouseConnection.ts
index 4c98437a6ad3..2ff3fe3f7527 100644
--- a/frontend/common/services/useWarehouseConnection.ts
+++ b/frontend/common/services/useWarehouseConnection.ts
@@ -36,6 +36,17 @@ export const warehouseConnectionService = service
           url: `environments/${environmentId}/warehouse-connections/`,
         }),
       }),
+      updateWarehouseConnection: builder.mutation<
+        Res['warehouseConnections'][number],
+        Req['updateWarehouseConnection']
+      >({
+        invalidatesTags: [{ id: 'LIST', type: 'WarehouseConnection' }],
+        query: ({ environmentId, id, ...body }) => ({
+          body,
+          method: 'PATCH',
+          url: `environments/${environmentId}/warehouse-connections/${id}/`,
+        }),
+      }),
     }),
   })
 
@@ -43,4 +54,5 @@ export const {
   useCreateWarehouseConnectionMutation,
   useDeleteWarehouseConnectionMutation,
   useGetWarehouseConnectionsQuery,
+  useUpdateWarehouseConnectionMutation,
 } = warehouseConnectionService
diff --git a/frontend/common/types/requests.ts b/frontend/common/types/requests.ts
index 85042872f0f4..7dd713129e41 100644
--- a/frontend/common/types/requests.ts
+++ b/frontend/common/types/requests.ts
@@ -971,7 +971,18 @@ export type Req = {
     gitlab_project_id: number
   }>
   getWarehouseConnections: { environmentId: string }
-  createWarehouseConnection: { environmentId: string; warehouse_type: string }
+  createWarehouseConnection: {
+    environmentId: string
+    warehouse_type: string
+    name?: string
+    config?: Record<string, string>
+  }
   deleteWarehouseConnection: { environmentId: string; id: number }
+  updateWarehouseConnection: {
+    environmentId: string
+    id: number
+    name?: string
+    config?: Record<string, string>
+  }
   // END OF TYPES
 }
diff --git a/frontend/common/types/responses.ts b/frontend/common/types/responses.ts
index 6474a37289ee..b3edece5bd24 100644
--- a/frontend/common/types/responses.ts
+++ b/frontend/common/types/responses.ts
@@ -955,11 +955,6 @@ export type IdentityTrait = {
   trait_value: FlagsmithValue
 }
 
-enum PipelineStatus {
-  DRAFT = 'DRAFT',
-  ACTIVE = 'ACTIVE',
-}
-
 export interface ReleasePipeline {
   id: number
   name: string
@@ -1098,17 +1093,28 @@ export type ExperimentResults = {
 }
 
 export type WarehouseConnectionStatus =
+  | 'created'
   | 'pending_connection'
   | 'connected'
   | 'errored'
 
 export type WarehouseType = 'flagsmith' | 'snowflake' | 'clickhouse'
 
+export type SnowflakeConfig = {
+  account_identifier: string
+  warehouse: string
+  database: string
+  schema: string
+  role: string
+  user: string
+}
+
 export type WarehouseConnection = {
   id: number
   warehouse_type: WarehouseType
   status: WarehouseConnectionStatus
   name: string
+  config: SnowflakeConfig | Record<string, never>
   created_at: string
 }
 
diff --git a/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/CreateWarehouseConnectionModal.tsx b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/CreateWarehouseConnectionModal.tsx
new file mode 100644
index 000000000000..bc036821daed
--- /dev/null
+++ b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/CreateWarehouseConnectionModal.tsx
@@ -0,0 +1,222 @@
+import { FC, FormEvent, useMemo, useState } from 'react'
+import { Req } from 'common/types/requests'
+import { WarehouseConnection } from 'common/types/responses'
+import InputGroup from 'components/base/forms/InputGroup'
+import Button from 'components/base/forms/Button'
+import ErrorMessage from 'components/ErrorMessage'
+import SearchableSelect from 'components/base/select/SearchableSelect'
+
+type CreateWarehouseConnectionModalProps = {
+  connection?: WarehouseConnection
+  save: (
+    data: Omit<Req['createWarehouseConnection'], 'environmentId'>,
+  ) => Promise<unknown>
+}
+
+const warehouseTypeOptions = [{ label: 'Snowflake', value: 'snowflake' }]
+
+const getButtonLabel = (isEdit: boolean, isSaving: boolean): string => {
+  if (isSaving) return isEdit ? 'Saving...' : 'Creating...'
+  return isEdit ? 'Save Changes' : 'Create Connection'
+}
+
+const CreateWarehouseConnectionModal: FC<
+  CreateWarehouseConnectionModalProps
+> = ({ connection, save }) => {
+  const isEdit = !!connection
+  const initialConfig = connection?.config as Record<string, string> | null
+
+  const [name, setName] = useState(connection?.name ?? '')
+  const [warehouseType] = useState(connection?.warehouse_type ?? 'snowflake')
+  const [accountIdentifier, setAccountIdentifier] = useState(
+    initialConfig?.account_identifier ?? '',
+  )
+  const [warehouse, setWarehouse] = useState(
+    initialConfig?.warehouse ?? 'COMPUTE_WH',
+  )
+  const [database, setDatabase] = useState(
+    initialConfig?.database ?? 'FLAGSMITH',
+  )
+  const [schema, setSchema] = useState(initialConfig?.schema ?? 'ANALYTICS')
+  const [role, setRole] = useState(initialConfig?.role ?? 'FLAGSMITH_LOADER')
+  const [user, setUser] = useState(initialConfig?.user ?? 'FLAGSMITH_SERVICE')
+  const [isSaving, setIsSaving] = useState(false)
+  const [error, setError] = useState(false)
+
+  const isValid = !!name && !!accountIdentifier
+
+  const hasChanges = useMemo(() => {
+    if (!isEdit) return true
+    return (
+      name !== (connection?.name ?? '') ||
+      accountIdentifier !== (initialConfig?.account_identifier ?? '') ||
+      warehouse !== (initialConfig?.warehouse ?? '') ||
+      database !== (initialConfig?.database ?? '') ||
+      schema !== (initialConfig?.schema ?? '') ||
+      role !== (initialConfig?.role ?? '') ||
+      user !== (initialConfig?.user ?? '')
+    )
+  }, [
+    isEdit,
+    connection,
+    initialConfig,
+    name,
+    accountIdentifier,
+    warehouse,
+    database,
+    schema,
+    role,
+    user,
+  ])
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault()
+    if (!isValid || !hasChanges) return
+
+    setIsSaving(true)
+    setError(false)
+    try {
+      await save({
+        config: {
+          account_identifier: accountIdentifier,
+          database,
+          role,
+          schema,
+          user,
+          warehouse,
+        },
+        name,
+        warehouse_type: warehouseType,
+      })
+      closeModal()
+      toast(
+        isEdit
+          ? 'Warehouse connection updated'
+          : 'Warehouse connection created',
+      )
+    } catch {
+      setError(true)
+      setIsSaving(false)
+    }
+  }
+
+  return (
+    <form
+      onSubmit={handleSubmit}
+      className='px-4 py-2 d-flex flex-column gap-2'
+    >
+      <InputGroup
+        title='Type'
+        noMargin
+        component={
+          <SearchableSelect
+            placeholder='Select type'
+            options={warehouseTypeOptions}
+            value={warehouseType}
+            displayedLabel={
+              warehouseTypeOptions.find((o) => o.value === warehouseType)?.label
+            }
+            isSearchable={false}
+            onChange={() => {}}
+          />
+        }
+      />
+      <InputGroup
+        title='Name'
+        noMargin
+        inputProps={{
+          className: 'w-100',
+          name: 'name',
+        }}
+        value={name}
+        onChange={(e: InputEvent) => setName(Utils.safeParseEventValue(e))}
+        isValid={!!name}
+        placeholder='e.g. Production Snowflake'
+      />
+      <InputGroup
+        title='Account Identifier'
+        noMargin
+        inputProps={{
+          className: 'w-100',
+          name: 'accountIdentifier',
+        }}
+        value={accountIdentifier}
+        onChange={(e: InputEvent) =>
+          setAccountIdentifier(Utils.safeParseEventValue(e))
+        }
+        isValid={!!accountIdentifier}
+        placeholder='e.g. xy12345.us-east-1'
+      />
+      <InputGroup
+        title='Warehouse'
+        noMargin
+        inputProps={{
+          className: 'w-100',
+          name: 'warehouse',
+        }}
+        value={warehouse}
+        onChange={(e: InputEvent) => setWarehouse(Utils.safeParseEventValue(e))}
+        placeholder='COMPUTE_WH'
+      />
+      <InputGroup
+        title='Database'
+        noMargin
+        inputProps={{
+          className: 'w-100',
+          name: 'database',
+        }}
+        value={database}
+        onChange={(e: InputEvent) => setDatabase(Utils.safeParseEventValue(e))}
+        placeholder='FLAGSMITH'
+      />
+      <InputGroup
+        title='Schema'
+        noMargin
+        inputProps={{
+          className: 'w-100',
+          name: 'schema',
+        }}
+        value={schema}
+        onChange={(e: InputEvent) => setSchema(Utils.safeParseEventValue(e))}
+        placeholder='ANALYTICS'
+      />
+      <InputGroup
+        title='Role'
+        noMargin
+        inputProps={{
+          className: 'w-100',
+          name: 'role',
+        }}
+        value={role}
+        onChange={(e: InputEvent) => setRole(Utils.safeParseEventValue(e))}
+        placeholder='FLAGSMITH_LOADER'
+      />
+      <InputGroup
+        title='User'
+        noMargin
+        inputProps={{
+          className: 'w-100',
+          name: 'user',
+        }}
+        value={user}
+        onChange={(e: InputEvent) => setUser(Utils.safeParseEventValue(e))}
+        placeholder='FLAGSMITH_SERVICE'
+      />
+      {error && (
+        <ErrorMessage
+          error={`Failed to ${
+            isEdit ? 'update' : 'create'
+          } warehouse connection. Please try again.`}
+        />
+      )}
+      <div className='text-right mt-2'>
+        <Button type='submit' disabled={isSaving || !isValid || !hasChanges}>
+          {getButtonLabel(isEdit, isSaving)}
+        </Button>
+      </div>
+    </form>
+  )
+}
+
+CreateWarehouseConnectionModal.displayName = 'CreateWarehouseConnectionModal'
+export default CreateWarehouseConnectionModal
diff --git a/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseConnectionCard.tsx b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseConnectionCard.tsx
index fbfaa2eb91c0..1413d91b21bd 100644
--- a/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseConnectionCard.tsx
+++ b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseConnectionCard.tsx
@@ -1,7 +1,8 @@
-import React, { FC, useState } from 'react'
+import React, { FC, useRef, useState } from 'react'
 import {
   WarehouseConnection,
   WarehouseConnectionStatus,
+  WarehouseType,
 } from 'common/types/responses'
 import ColorSwatch from 'components/ColorSwatch'
 import Tooltip from 'components/Tooltip'
@@ -10,33 +11,52 @@ import Button from 'components/base/forms/Button'
 import WarehouseEventCodeHelp from './WarehouseEventCodeHelp'
 import WarehouseStats from './WarehouseStats'
 import useCollapsibleHeight from 'common/hooks/useCollapsibleHeight'
+import useOutsideClick from 'common/useOutsideClick'
 
 type WarehouseConnectionCardProps = {
   connection: WarehouseConnection
   onDelete: () => void
+  onEdit?: () => void
 }
 
 const STATUS_COLOUR: Record<WarehouseConnectionStatus, string> = {
   connected: '#27AE60',
+  created: '#F2C94C',
   errored: '#EB5757',
   pending_connection: '#F2C94C',
 }
 
 const STATUS_LABEL: Record<WarehouseConnectionStatus, string> = {
   connected: 'Connected',
+  created: 'Created',
   errored: 'Errored',
   pending_connection: 'Pending Connection',
 }
 
+const TYPE_LABEL: Partial<Record<WarehouseType, string>> = {
+  clickhouse: 'ClickHouse',
+  snowflake: 'Snowflake',
+}
+
+const isSetupStatus = (status: WarehouseConnectionStatus) =>
+  status === 'created' || status === 'pending_connection'
+
 const WarehouseConnectionCard: FC<WarehouseConnectionCardProps> = ({
   connection,
   onDelete,
+  onEdit,
 }) => {
   const [open, setOpen] = useState(false)
+  const [menuOpen, setMenuOpen] = useState(false)
+  const menuRef = useRef<HTMLDivElement>(null)
   const { contentRef, style: collapsibleStyle } = useCollapsibleHeight(open)
 
-  const handleDelete = (e: React.MouseEvent) => {
-    e.stopPropagation()
+  useOutsideClick(menuRef as React.RefObject<HTMLElement>, () =>
+    setMenuOpen(false),
+  )
+
+  const handleDelete = () => {
+    setMenuOpen(false)
     openConfirm({
       body: 'Are you sure you want to remove this warehouse connection?',
       onYes: onDelete,
@@ -44,16 +64,63 @@ const WarehouseConnectionCard: FC<WarehouseConnectionCardProps> = ({
     })
   }
 
+  const handleEdit = () => {
+    setMenuOpen(false)
+    onEdit?.()
+  }
+
+  const displayName =
+    connection.warehouse_type === 'flagsmith'
+      ? connection.name
+      : `${connection.name} (${
+          TYPE_LABEL[connection.warehouse_type] ?? connection.warehouse_type
+        })`
+
+  const renderBody = () => {
+    if (isSetupStatus(connection.status)) {
+      if (connection.warehouse_type === 'flagsmith') {
+        return (
+          <>
+            <WarehouseEventCodeHelp />
+            <Button className='align-self-end' theme='primary'>
+              Send your first event
+            </Button>
+          </>
+        )
+      }
+      return (
+        <pre className='bg-dark text-white p-3 rounded'>
+          {'SELECT * FROM users'}
+        </pre>
+      )
+    }
+    return (
+      <WarehouseStats
+        errored={connection.status === 'errored'}
+        lastEventReceived='19 May 2026, 14:32'
+        totalEventsReceived={1247}
+        uniqueEventsCount={38}
+      />
+    )
+  }
+
   return (
-    <div className='d-flex flex-column px-3 py-3 accordion-card m-0'>
-      <button
-        type='button'
+    <div className='d-flex flex-column px-3 py-3 accordion-card m-0 mb-2'>
+      <div
+        role='button'
+        tabIndex={0}
         className='d-flex flex-row align-items-center justify-content-between btn--accordion-header'
         onClick={() => setOpen(!open)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault()
+            setOpen(!open)
+          }
+        }}
         aria-expanded={open}
       >
         <div className='d-flex flex-row align-items-center gap-2'>
-          <span className='font-weight-medium'>{connection.name}</span>
+          <span className='font-weight-medium'>{displayName}</span>
           <Tooltip
             title={
               <ColorSwatch
@@ -68,35 +135,56 @@ const WarehouseConnectionCard: FC<WarehouseConnectionCardProps> = ({
           </Tooltip>
         </div>
         <div className='d-flex flex-row align-items-center gap-2'>
-          <span
-            role='button'
-            tabIndex={-1}
-            className='btn btn-with-icon'
-            onClick={handleDelete}
+          <div
+            ref={menuRef}
+            className='feature-action'
+            style={{ position: 'relative' }}
           >
-            <Icon name='trash-2' width={20} fill='#656D7B' />
-          </span>
+            <Button
+              size='xSmall'
+              className='btn btn-with-icon'
+              onClick={(e: React.MouseEvent) => {
+                e.stopPropagation()
+                setMenuOpen(!menuOpen)
+              }}
+            >
+              <Icon name='more-vertical' width={16} fill='#656D7B' />
+            </Button>
+            {menuOpen && (
+              <div
+                className='feature-action__list placed-bottom'
+                style={{ right: 0 }}
+              >
+                {onEdit && (
+                  <div
+                    className='feature-action__item'
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      handleEdit()
+                    }}
+                  >
+                    <Icon name='edit' width={16} fill='#656D7B' />
+                    <span>Edit</span>
+                  </div>
+                )}
+                <div
+                  className='feature-action__item'
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    handleDelete()
+                  }}
+                >
+                  <Icon name='trash-2' width={16} fill='#656D7B' />
+                  <span>Delete</span>
+                </div>
+              </div>
+            )}
+          </div>
           <Icon name={open ? 'chevron-up' : 'chevron-down'} width={16} />
         </div>
-      </button>
+      </div>
       <div ref={contentRef} style={collapsibleStyle}>
-        <div className='mt-3 mb-2 d-flex flex-column gap-3'>
-          {connection.status === 'pending_connection' ? (
-            <>
-              <WarehouseEventCodeHelp />
-              <Button className='align-self-end' theme='primary'>
-                Send your first event
-              </Button>
-            </>
-          ) : (
-            <WarehouseStats
-              errored={connection.status === 'errored'}
-              lastEventReceived='19 May 2026, 14:32'
-              totalEventsReceived={1247}
-              uniqueEventsCount={38}
-            />
-          )}
-        </div>
+        <div className='mt-3 mb-2 d-flex flex-column gap-3'>{renderBody()}</div>
       </div>
     </div>
   )
diff --git a/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/index.tsx b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/index.tsx
index 37e1505021ac..eaf7acbdbdb7 100644
--- a/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/index.tsx
+++ b/frontend/web/components/pages/environment-settings/tabs/warehouse-tab/index.tsx
@@ -1,12 +1,16 @@
-import React, { FC } from 'react'
+import { FC } from 'react'
 import {
   useCreateWarehouseConnectionMutation,
   useDeleteWarehouseConnectionMutation,
   useGetWarehouseConnectionsQuery,
+  useUpdateWarehouseConnectionMutation,
 } from 'common/services/useWarehouseConnection'
+import { WarehouseConnection } from 'common/types/responses'
+import Button from 'components/base/forms/Button'
 import Loader from 'components/Loader'
 import Setting from 'components/Setting'
 import WarehouseConnectionCard from './WarehouseConnectionCard'
+import CreateWarehouseConnectionModal from './CreateWarehouseConnectionModal'
 
 type WarehouseTabProps = {
   environmentId: string
@@ -24,6 +28,64 @@ const WarehouseTab: FC<WarehouseTabProps> = ({ environmentId }) => {
   const [createConnection, { isLoading: isCreating }] =
     useCreateWarehouseConnectionMutation()
   const [deleteConnection] = useDeleteWarehouseConnectionMutation()
+  const [updateConnection] = useUpdateWarehouseConnectionMutation()
+
+  const hasFlagsmithConnection = connections?.some(
+    (c) => c.warehouse_type === 'flagsmith',
+  )
+  const hasConnections = !!connections?.length
+
+  const handleCreateFlagsmith = () => {
+    createConnection({
+      environmentId,
+      warehouse_type: 'flagsmith',
+    })
+      .unwrap()
+      .then(() => toast('Warehouse connection created'))
+      .catch(() => toast('Failed to create warehouse connection', 'danger'))
+  }
+
+  const handleConfirmFlagsmith = () => {
+    openConfirm({
+      body: 'This will enable a Flagsmith Warehouse connection for this environment. Are you sure you want to proceed?',
+      onYes: handleCreateFlagsmith,
+      title: 'Connect Flagsmith Warehouse',
+    })
+  }
+
+  const handleOpenCreateDrawer = () => {
+    openModal(
+      'Connect Warehouse',
+      <CreateWarehouseConnectionModal
+        save={(data) => createConnection({ environmentId, ...data }).unwrap()}
+      />,
+      'side-modal side-modal--narrow',
+    )
+  }
+
+  const handleOpenEditDrawer = (connection: WarehouseConnection) => {
+    openModal(
+      'Edit Warehouse',
+      <CreateWarehouseConnectionModal
+        connection={connection}
+        save={(data) =>
+          updateConnection({
+            environmentId,
+            id: connection.id,
+            ...data,
+          }).unwrap()
+        }
+      />,
+      'side-modal side-modal--narrow',
+    )
+  }
+
+  const handleDelete = (connection: WarehouseConnection) => {
+    deleteConnection({ environmentId, id: connection.id })
+      .unwrap()
+      .then(() => toast('Warehouse connection removed'))
+      .catch(() => toast('Failed to remove warehouse connection', 'danger'))
+  }
 
   if (isLoading) {
     return (
@@ -43,53 +105,53 @@ const WarehouseTab: FC<WarehouseTabProps> = ({ environmentId }) => {
     )
   }
 
-  const hasNoConnection = !connections || connections.length === 0
-
-  if (hasNoConnection) {
-    return (
-      <div className='mt-4 col-md-12'>
-        <Setting
-          title='Connect Flagsmith Warehouse'
-          description='Enable a hosted warehouse connection for this environment to collect experimentation data.'
-          checked={false}
-          disabled={isLoading || isCreating}
-          onChange={() =>
-            openConfirm({
-              body: 'This will enable a Flagsmith Warehouse connection for this environment. Are you sure you want to proceed?',
-              onYes: () =>
-                createConnection({
-                  environmentId,
-                  warehouse_type: 'flagsmith',
-                })
-                  .unwrap()
-                  .then(() => toast('Warehouse connection created'))
-                  .catch(() =>
-                    toast('Failed to create warehouse connection', 'danger'),
-                  ),
-              title: 'Connect Flagsmith Warehouse',
-            })
-          }
-        />
-      </div>
-    )
-  }
-
   return (
-    <div className='mt-4 col-md-12'>
-      {connections.map((connection) => (
-        <WarehouseConnectionCard
-          key={connection.id}
-          connection={connection}
-          onDelete={() =>
-            deleteConnection({ environmentId, id: connection.id })
-              .unwrap()
-              .then(() => toast('Warehouse connection removed'))
-              .catch(() =>
-                toast('Failed to remove warehouse connection', 'danger'),
-              )
-          }
-        />
-      ))}
+    <div className='mt-4 col-md-12 d-flex flex-column gap-5'>
+      {!hasFlagsmithConnection && (
+        <div>
+          <Setting
+            title='Connect Flagsmith Warehouse'
+            description='Enable a hosted warehouse connection for this environment to collect experimentation data.'
+            checked={false}
+            disabled={isLoading || isCreating}
+            onChange={handleConfirmFlagsmith}
+          />
+        </div>
+      )}
+      <div>
+        {hasConnections ? (
+          <>
+            <div className='d-flex justify-content-end mb-3'>
+              <Button onClick={handleOpenCreateDrawer} size='small'>
+                Configure a warehouse
+              </Button>
+            </div>
+            {connections.map((connection) => (
+              <WarehouseConnectionCard
+                key={connection.id}
+                connection={connection}
+                onDelete={() => handleDelete(connection)}
+                onEdit={
+                  connection.warehouse_type !== 'flagsmith'
+                    ? () => handleOpenEditDrawer(connection)
+                    : undefined
+                }
+              />
+            ))}
+          </>
+        ) : (
+          <div>
+            <h5 className='fw-bold'>Connect an external Warehouse</h5>
+            <p className='text-muted mb-3'>
+              Flagsmith lets you connect your own data warehouse to collect
+              experimentation data.
+            </p>
+            <Button onClick={handleOpenCreateDrawer} size='small'>
+              Configure a warehouse
+            </Button>
+          </div>
+        )}
+      </div>
     </div>
   )
 }
diff --git a/frontend/web/styles/project/_modals.scss b/frontend/web/styles/project/_modals.scss
index afcd8d0e1cf3..bc3dc69e3f71 100644
--- a/frontend/web/styles/project/_modals.scss
+++ b/frontend/web/styles/project/_modals.scss
@@ -253,6 +253,12 @@ $side-width: 800px;
   display: none !important;
 }
 
+@include media-breakpoint-up(md) {
+  .side-modal--narrow .modal-dialog {
+    width: 640px !important;
+  }
+}
+
 @media (max-width: 600px) {
   /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */
   .side-modal__footer {