diff --git a/frontend/src/component/feature/StrategyTypes/GeneralStrategy/GeneralStrategy.styles.ts b/frontend/src/component/feature/StrategyTypes/GeneralStrategy/GeneralStrategy.styles.ts
index 8693a7b480..75b187d585 100644
--- a/frontend/src/component/feature/StrategyTypes/GeneralStrategy/GeneralStrategy.styles.ts
+++ b/frontend/src/component/feature/StrategyTypes/GeneralStrategy/GeneralStrategy.styles.ts
@@ -1,13 +1,15 @@
 import { makeStyles } from 'tss-react/mui';
 
 export const useStyles = makeStyles()(theme => ({
+    container: {
+        display: 'grid',
+        gap: theme.spacing(4),
+    },
     helpText: {
-        color: 'rgba(0, 0, 0, 0.54)',
+        color: theme.palette.text.secondary,
         fontSize: theme.fontSizes.smallerBody,
         lineHeight: '14px',
-        margin: '0.5rem 0',
-    },
-    generalSection: {
-        margin: '1rem 0',
+        margin: 0,
+        marginTop: theme.spacing(1),
     },
 }));
diff --git a/frontend/src/component/feature/StrategyTypes/GeneralStrategy/GeneralStrategy.tsx b/frontend/src/component/feature/StrategyTypes/GeneralStrategy/GeneralStrategy.tsx
index fa9639cff0..75b782b170 100644
--- a/frontend/src/component/feature/StrategyTypes/GeneralStrategy/GeneralStrategy.tsx
+++ b/frontend/src/component/feature/StrategyTypes/GeneralStrategy/GeneralStrategy.tsx
@@ -53,14 +53,13 @@ const GeneralStrategy = ({
     }
 
     return (
-        <>
+        <div className={styles.container}>
             {strategyDefinition.parameters.map(
                 ({ name, type, description, required }) => {
                     if (type === 'percentage') {
                         const value = parseParameterNumber(parameters[name]);
                         return (
                             <div key={name}>
-                                <br />
                                 <RolloutSlider
                                     name={name}
                                     onChange={onChangePercentage.bind(
@@ -103,7 +102,7 @@ const GeneralStrategy = ({
                             value.length > 0 ? !regex.test(value) : false;
 
                         return (
-                            <div key={name} className={styles.generalSection}>
+                            <div key={name}>
                                 <TextField
                                     error={error}
                                     helperText={
@@ -132,7 +131,7 @@ const GeneralStrategy = ({
                     } else if (type === 'boolean') {
                         const value = parseParameterString(parameters[name]);
                         return (
-                            <div key={name} style={{ padding: '20px 0' }}>
+                            <div key={name}>
                                 <Tooltip
                                     title={description}
                                     placement="right-end"
@@ -158,7 +157,7 @@ const GeneralStrategy = ({
                     } else {
                         const value = parseParameterString(parameters[name]);
                         return (
-                            <div key={name} className={styles.generalSection}>
+                            <div key={name}>
                                 <TextField
                                     rows={1}
                                     placeholder=""
@@ -185,7 +184,7 @@ const GeneralStrategy = ({
                     }
                 }
             )}
-        </>
+        </div>
     );
 };
 
diff --git a/frontend/src/component/feature/StrategyTypes/StrategyInputList/StrategyInputList.tsx b/frontend/src/component/feature/StrategyTypes/StrategyInputList/StrategyInputList.tsx
index 51b0529684..ffd22ad756 100644
--- a/frontend/src/component/feature/StrategyTypes/StrategyInputList/StrategyInputList.tsx
+++ b/frontend/src/component/feature/StrategyTypes/StrategyInputList/StrategyInputList.tsx
@@ -1,5 +1,12 @@
 import React, { ChangeEvent, useState } from 'react';
-import { Button, Chip, TextField, Typography } from '@mui/material';
+import {
+    Button,
+    Chip,
+    TextField,
+    Typography,
+    styled,
+    TextFieldProps,
+} from '@mui/material';
 import { Add } from '@mui/icons-material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { ADD_TO_STRATEGY_INPUT_LIST, STRATEGY_INPUT_LIST } from 'utils/testIds';
@@ -12,6 +19,21 @@ interface IStrategyInputList {
     disabled: boolean;
 }
 
+const Container = styled('div')(({ theme }) => ({
+    display: 'grid',
+    gap: theme.spacing(1),
+}));
+
+const ChipsList = styled('div')(({ theme }) => ({
+    display: 'flex',
+    gap: theme.spacing(1),
+}));
+
+const InputContainer = styled('div')(({ theme }) => ({
+    display: 'flex',
+    gap: theme.spacing(1),
+}));
+
 const StrategyInputList = ({
     name,
     list,
@@ -61,49 +83,42 @@ const StrategyInputList = ({
         );
     };
 
-    // @ts-expect-error
-    const onChange = e => {
-        setInput(e.currentTarget.value);
+    const onChange: TextFieldProps['onChange'] = event => {
+        setInput(event.currentTarget.value);
     };
 
     return (
-        <div>
+        <Container>
             <Typography variant="subtitle2" component="h2">
                 List of {name}
             </Typography>
-            <div
-                style={{
-                    display: 'flex',
-                    flexWrap: 'wrap',
-                    margin: '10px 0',
-                }}
-            >
-                {list.map((entryValue, index) => (
-                    <Chip
-                        key={index + entryValue}
-                        label={
-                            <StringTruncator
-                                maxWidth="300"
-                                text={entryValue}
-                                maxLength={50}
+            <ConditionallyRender
+                condition={list.length > 0}
+                show={
+                    <ChipsList>
+                        {list.map((entryValue, index) => (
+                            <Chip
+                                key={index + entryValue}
+                                label={
+                                    <StringTruncator
+                                        maxWidth="300"
+                                        text={entryValue}
+                                        maxLength={50}
+                                    />
+                                }
+                                onDelete={
+                                    disabled ? undefined : () => onClose(index)
+                                }
+                                title="Remove value"
                             />
-                        }
-                        style={{ marginRight: '3px' }}
-                        onDelete={disabled ? undefined : () => onClose(index)}
-                        title="Remove value"
-                    />
-                ))}
-            </div>
+                        ))}
+                    </ChipsList>
+                }
+            />
             <ConditionallyRender
                 condition={!disabled}
                 show={
-                    <div
-                        style={{
-                            display: 'flex',
-                            alignItems: 'center',
-                            gap: '1rem',
-                        }}
-                    >
+                    <InputContainer>
                         <TextField
                             name={`input_field`}
                             variant="outlined"
@@ -128,10 +143,10 @@ const StrategyInputList = ({
                         >
                             Add
                         </Button>
-                    </div>
+                    </InputContainer>
                 }
             />
-        </div>
+        </Container>
     );
 };