diff --git a/lib/js/components/SurveyQuestions/SurveyQuestion.consts.ts b/lib/js/components/SurveyQuestions/SurveyQuestion.consts.ts
index 269340009..f292f2593 100644
--- a/lib/js/components/SurveyQuestions/SurveyQuestion.consts.ts
+++ b/lib/js/components/SurveyQuestions/SurveyQuestion.consts.ts
@@ -2,3 +2,8 @@ export const SURVEY_QUESTION_STATES = {
 	DEFAULT: 'default',
 	DISABLED: 'disabled',
 } as const;
+
+export const SURVEY_QUESTION_SCALE_CONTAINERS = {
+	ONE: 'one',
+	TWO: 'two',
+} as const;
diff --git a/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.stories.ts b/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.stories.ts
index 1df61b337..0df378bc9 100644
--- a/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.stories.ts
+++ b/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.stories.ts
@@ -1,6 +1,6 @@
 import SurveyQuestionScale from './SurveyQuestionScale.vue';
 import { SURVEY_TOGGLE_MEANINGS } from '../../SurveyToggle';
-import { SURVEY_QUESTION_STATES } from '../SurveyQuestion.consts';
+import { SURVEY_QUESTION_SCALE_CONTAINERS, SURVEY_QUESTION_STATES } from '../SurveyQuestion.consts';
 
 import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 
@@ -15,7 +15,7 @@ const StoryTemplate: StoryFn<typeof SurveyQuestionScale> = (args, { updateArgs }
 		return { ...args };
 	},
 	template:
-		'<survey-question-scale :title="title" :scale-options="scaleOptions" :elaboration-value="elaborationValue" :elaborationLabel="elaborationLabel" :placeholder="placeholder" :selected-value="selectedValue" :state="state" @select-change="selectedValueUpdate" @elaboration-change="elaborationUpdate">' +
+		'<survey-question-scale :title="title" :scale-options="scaleOptions" :elaboration-value="elaborationValue" :elaborationLabel="elaborationLabel" :placeholder="placeholder" :selected-value="selectedValue" :state="state" :containers="containers" @select-change="selectedValueUpdate" @elaboration-change="elaborationUpdate">' +
 		'<template v-if="explanation" #explanation><div v-html="explanation" /></template>' +
 		'</survey-question-scale>',
 	methods: {
@@ -37,6 +37,7 @@ const args = {
 	explanation:
 		'<h3 style="text-align: center; margin-bottom: 16px;">Jak ocenić, czy slajdy i diagramy były zrozumiałe?</h3>\n<div>Wyczerpujące materiały dają poczucie pełnego zrozumienia, przy jednoczesnym usystematyzowaniu informacji. Wpływa na to nie tylko ich jakość, ale też ilość.</div>',
 	placeholder: 'Wpisz swoją odpowiedź',
+	containers: SURVEY_QUESTION_SCALE_CONTAINERS.TWO,
 	scaleOptions: [
 		{
 			value: '1',
@@ -75,6 +76,10 @@ const argTypes = {
 	elaborationValue: { control: { type: 'text' } },
 	selectedValue: { control: false },
 	explanation: { control: { type: 'text' } },
+	containers: {
+		control: { type: 'select' },
+		options: Object.values(SURVEY_QUESTION_SCALE_CONTAINERS),
+	},
 	scaleOptions: { control: { type: 'object' } },
 	state: {
 		control: { type: 'select', options: Object.values(SURVEY_QUESTION_STATES) },
@@ -111,7 +116,7 @@ const StoryLimitedWidthTemplate: StoryFn<typeof SurveyQuestionScale> = (args, {
 		return { ...args };
 	},
 	template:
-		'<div style="max-width: 600px"><survey-question-scale :title="title" :scale-options="scaleOptions" :elaboration-value="elaborationValue" :elaborationLabel="elaborationLabel" :placeholder="placeholder" :selected-value="selectedValue" :state="state" @select-change="selectedValueUpdate" @elaboration-change="elaborationUpdate">' +
+		'<div style="max-width: 600px"><survey-question-scale :title="title" :scale-options="scaleOptions" :elaboration-value="elaborationValue" :elaborationLabel="elaborationLabel" :placeholder="placeholder" :selected-value="selectedValue" :containers="containers" :state="state" @select-change="selectedValueUpdate" @elaboration-change="elaborationUpdate">' +
 		'<template v-if="explanation" #explanation><div v-html="explanation" /></template>' +
 		'</survey-question-scale></div>',
 	methods: {
@@ -125,7 +130,13 @@ const StoryLimitedWidthTemplate: StoryFn<typeof SurveyQuestionScale> = (args, {
 });
 
 export const LimitedWidth = StoryLimitedWidthTemplate.bind({});
-LimitedWidth.argTypes = argTypesDisabled;
+LimitedWidth.argTypes = {
+	...argTypesDisabled,
+	containers: {
+		control: { type: 'select' },
+		options: Object.values(SURVEY_QUESTION_SCALE_CONTAINERS),
+	},
+} as ArgTypes;
 
 LimitedWidth.args = {
 	title: "Main question write here if it's long it will collapse.",
@@ -134,6 +145,7 @@ LimitedWidth.args = {
 	explanation:
 		'<h3 class="modalHeader" style="text-align: center; margin-bottom: 16px;">Jak ocenić, czy slajdy i diagramy były zrozumiałe?</h3>\n<div>Wyczerpujące materiały dają poczucie pełnego zrozumienia, przy jednoczesnym usystematyzowaniu informacji. Wpływa na to nie tylko ich jakość, ale też ilość.</div>',
 	placeholder: 'Wpisz swoją odpowiedź',
+	containers: SURVEY_QUESTION_SCALE_CONTAINERS.TWO,
 	scaleOptions: [
 		{
 			value: '1',
@@ -176,54 +188,8 @@ const StorySevenOptionsTemplate: StoryFn<typeof SurveyQuestionScale> = (args, {
 	data() {
 		return { elaboration: '' };
 	},
-	created() {
-		this.scaleOptions = [
-			{
-				value: '1',
-				label: 'Nie zgadzam się',
-				meaning: SURVEY_TOGGLE_MEANINGS.PRIMARY,
-				content: '1',
-			},
-			{
-				value: '2',
-				label: '',
-				meaning: SURVEY_TOGGLE_MEANINGS.PRIMARY,
-				content: '2',
-			},
-			{
-				value: '3',
-				label: '',
-				meaning: SURVEY_TOGGLE_MEANINGS.PRIMARY,
-				content: '3',
-			},
-			{
-				value: '4',
-				label: 'Trochę',
-				meaning: SURVEY_TOGGLE_MEANINGS.PRIMARY,
-				content: '4',
-			},
-			{
-				value: '5',
-				label: '',
-				meaning: SURVEY_TOGGLE_MEANINGS.PRIMARY,
-				content: '5',
-			},
-			{
-				value: '6',
-				label: '',
-				meaning: SURVEY_TOGGLE_MEANINGS.PRIMARY,
-				content: '6',
-			},
-			{
-				value: '7',
-				label: 'Zgadzam się',
-				meaning: SURVEY_TOGGLE_MEANINGS.PRIMARY,
-				content: '7',
-			},
-		];
-	},
 	template:
-		'<survey-question-scale title="title" :scale-options="scaleOptions" elaborationLabel="elaborationLabel" :elaboration-value="elaboration" :selected-value="selectedValue" @select-change="selectedValueUpdate" />',
+		'<survey-question-scale title="title" :scale-options="scaleOptions" elaborationLabel="elaborationLabel" :elaboration-value="elaboration" :selected-value="selectedValue" :containers="containers" @select-change="selectedValueUpdate" />',
 	methods: {
 		selectedValueUpdate(selectedValue) {
 			updateArgs({ selectedValue });
@@ -232,4 +198,58 @@ const StorySevenOptionsTemplate: StoryFn<typeof SurveyQuestionScale> = (args, {
 });
 
 export const SevenOptions = StorySevenOptionsTemplate.bind({});
-SevenOptions.argTypes = argTypesDisabled;
+SevenOptions.argTypes = {
+	...argTypesDisabled,
+	containers: {
+		control: { type: 'select' },
+		options: Object.values(SURVEY_QUESTION_SCALE_CONTAINERS),
+	},
+} as ArgTypes;
+
+SevenOptions.args = {
+	containers: SURVEY_QUESTION_SCALE_CONTAINERS.ONE,
+	scaleOptions: [
+		{
+			value: '1',
+			label: 'Nie zgadzam się',
+			meaning: SURVEY_TOGGLE_MEANINGS.PRIMARY,
+			content: '1',
+		},
+		{
+			value: '2',
+			label: '',
+			meaning: SURVEY_TOGGLE_MEANINGS.PRIMARY,
+			content: '2',
+		},
+		{
+			value: '3',
+			label: '',
+			meaning: SURVEY_TOGGLE_MEANINGS.PRIMARY,
+			content: '3',
+		},
+		{
+			value: '4',
+			label: 'Trochę',
+			meaning: SURVEY_TOGGLE_MEANINGS.PRIMARY,
+			content: '4',
+		},
+		{
+			value: '5',
+			label: '',
+			meaning: SURVEY_TOGGLE_MEANINGS.PRIMARY,
+			content: '5',
+		},
+		{
+			value: '6',
+			label: '',
+			meaning: SURVEY_TOGGLE_MEANINGS.PRIMARY,
+			content: '6',
+		},
+		{
+			value: '7',
+			label: 'Zgadzam się',
+			meaning: SURVEY_TOGGLE_MEANINGS.PRIMARY,
+			content: '7',
+		},
+	],
+} as Args;
diff --git a/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.vue b/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.vue
index c7d87b3ba..8fa219d51 100644
--- a/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.vue
+++ b/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.vue
@@ -24,34 +24,79 @@
 						@click="showModal = true"
 					/>
 				</div>
-				<div class="surveyQuestionScale__content">
-					<template
-						v-for="(option, index) in scaleOptions"
-						:key="`surveyQuestionScale-${index}`"
+				<div
+					class="surveyQuestionScale__content"
+					:class="{ '-oneContainer': containers === SURVEY_QUESTION_CONTAINERS.ONE }"
+				>
+					<div
+						class="surveyQuestionScale__container"
+						:class="{
+							'-oneContainer': containers === SURVEY_QUESTION_CONTAINERS.ONE,
+						}"
 					>
-						<div
-							v-if="option.standalone"
-							class="surveyQuestionScale__toggleSeparator"
-						/>
-						<div class="surveyQuestionScale__toggle">
-							<survey-toggle
-								:meaning="option.meaning"
-								:content-text="option.content"
-								:label="option.label"
-								:status="
-									selectedValue === option.value
-										? SURVEY_TOGGLE_STATUSES.SELECTED
-										: SURVEY_TOGGLE_STATUSES.DEFAULT
-								"
-								:state="
-									state === SURVEY_QUESTION_STATES.DISABLED
-										? SURVEY_TOGGLE_STATES.DISABLED
-										: SURVEY_TOGGLE_STATES.DEFAULT
-								"
-								@click="onToggleClick(option.value)"
-							/>
-						</div>
-					</template>
+						<template
+							v-for="(option, index) in scaleOptions"
+							:key="`surveyQuestionScale-${index}`"
+						>
+							<div
+								class="surveyQuestionScale__toggle"
+								:class="{
+									'-hideOnDesktop':
+										option.standalone &&
+										containers === SURVEY_QUESTION_CONTAINERS.TWO,
+								}"
+							>
+								<survey-toggle
+									:meaning="option.meaning"
+									:content-text="option.content"
+									:label="option.label"
+									:status="
+										selectedValue === option.value
+											? SURVEY_TOGGLE_STATUSES.SELECTED
+											: SURVEY_TOGGLE_STATUSES.DEFAULT
+									"
+									:state="
+										state === SURVEY_QUESTION_STATES.DISABLED
+											? SURVEY_TOGGLE_STATES.DISABLED
+											: SURVEY_TOGGLE_STATES.DEFAULT
+									"
+									@click="onToggleClick(option.value)"
+								/>
+							</div>
+						</template>
+					</div>
+
+					<div
+						v-if="
+							standaloneOptions.length > 0 &&
+							containers === SURVEY_QUESTION_CONTAINERS.TWO
+						"
+						class="surveyQuestionScale__container -justifyEnd -hideOnMobile"
+					>
+						<template
+							v-for="(option, index) in standaloneOptions"
+							:key="`surveyQuestionScale-standalone-${index}`"
+						>
+							<div class="surveyQuestionScale__toggle">
+								<survey-toggle
+									:meaning="option.meaning"
+									:content-text="option.content"
+									:label="option.label"
+									:status="
+										selectedValue === option.value
+											? SURVEY_TOGGLE_STATUSES.SELECTED
+											: SURVEY_TOGGLE_STATUSES.DEFAULT
+									"
+									:state="
+										state === SURVEY_QUESTION_STATES.DISABLED
+											? SURVEY_TOGGLE_STATES.DISABLED
+											: SURVEY_TOGGLE_STATES.DEFAULT
+									"
+									@click="onToggleClick(option.value)"
+								/>
+							</div>
+						</template>
+					</div>
 				</div>
 
 				<template v-if="selectedValue !== null && elaborationLabel !== null">
@@ -108,31 +153,34 @@
 		background: $color-neutral-background;
 		border-radius: $radius-s;
 		display: flex;
-		justify-content: space-between;
 		overflow-x: auto;
 		padding: $space-s $space-xxs;
 
 		@media #{breakpoint-s()} {
+			gap: $space-l;
 			padding: $space-s $space-l;
+
+			&:not(.-oneContainer) {
+				justify-content: center;
+				overflow-x: initial;
+			}
+		}
+
+		&.-oneContainer {
+			overflow-x: auto;
 		}
 	}
 
 	&__toggle {
 		display: flex;
 		justify-content: center;
-		margin-right: $space-xxs;
 
-		&:last-child {
-			margin-right: 0;
-		}
-	}
+		&.-hideOnDesktop {
+			display: flex;
 
-	&__toggleSeparator {
-		display: none;
-
-		@media #{breakpoint-s()} {
-			display: block;
-			width: $space-l;
+			@media #{breakpoint-s()} {
+				display: none;
+			}
 		}
 	}
 
@@ -154,22 +202,44 @@
 	&__elaborationInput {
 		margin-top: $space-xxs;
 	}
+
+	&__container {
+		display: flex;
+		flex: 1;
+		flex-direction: row;
+		gap: $space-l;
+
+		&.-justifyEnd {
+			justify-content: flex-end;
+		}
+
+		&.-oneContainer {
+			justify-content: space-between;
+		}
+
+		&.-hideOnMobile {
+			display: none;
+
+			@media #{breakpoint-s()} {
+				display: flex;
+			}
+		}
+	}
 }
 </style>
 
 <script lang="ts">
 import DsCard from '../../Cards/Card';
-import IconButton from '../../Buttons/IconButton';
+import IconButton, { ICON_BUTTON_COLORS } from '../../Buttons/IconButton';
 import { ICON_SIZES, ICONS } from '../../Icons/Icon';
 import DsButton, { BUTTON_TYPES } from '../../Buttons/Button';
-import { ICON_BUTTON_COLORS } from '../../Buttons/IconButton';
 import DsModal from '../../Modal';
 import SurveyToggle, {
 	SURVEY_TOGGLE_MEANINGS,
 	SURVEY_TOGGLE_STATES,
 	SURVEY_TOGGLE_STATUSES,
 } from '../../SurveyToggle';
-import { SURVEY_QUESTION_STATES } from '../SurveyQuestion.consts';
+import { SURVEY_QUESTION_SCALE_CONTAINERS, SURVEY_QUESTION_STATES } from '../SurveyQuestion.consts';
 import SurveyQuestionTextarea from '../';
 import { SurveyQuestionScaleOption } from '../SurveyQuestion.domain';
 import { randomString } from '../../../utils/string';
@@ -219,6 +289,13 @@ export default {
 			type: String,
 			default: null,
 		},
+		containers: {
+			type: String,
+			default: SURVEY_QUESTION_SCALE_CONTAINERS.TWO,
+			validator(containers) {
+				return Object.values(SURVEY_QUESTION_SCALE_CONTAINERS).includes(containers);
+			},
+		},
 	},
 	emits: ['elaboration-change', 'select-change'],
 	data() {
@@ -233,8 +310,16 @@ export default {
 			SURVEY_TOGGLE_STATES: Object.freeze(SURVEY_TOGGLE_STATES),
 			SURVEY_TOGGLE_STATUSES: Object.freeze(SURVEY_TOGGLE_STATUSES),
 			SURVEY_QUESTION_STATES: Object.freeze(SURVEY_QUESTION_STATES),
+			SURVEY_QUESTION_CONTAINERS: Object.freeze(SURVEY_QUESTION_SCALE_CONTAINERS),
 		};
 	},
+	computed: {
+		standaloneOptions() {
+			return this.scaleOptions.filter(
+				(option: SurveyQuestionScaleOption) => option.standalone,
+			);
+		},
+	},
 	methods: {
 		onToggleClick(value: string) {
 			this.$emit('select-change', this.selectedValue === value ? null : value);