diff --git a/src/features/surveys/features/SurveyCreator/components/ActionButtons/ActionButtons.tsx b/src/features/surveys/features/SurveyCreator/components/ActionButtons/ActionButtons.tsx
index b26910c3..0cafd667 100644
--- a/src/features/surveys/features/SurveyCreator/components/ActionButtons/ActionButtons.tsx
+++ b/src/features/surveys/features/SurveyCreator/components/ActionButtons/ActionButtons.tsx
@@ -23,7 +23,7 @@ export default function ActionButtons() {
   } = useSurveyCreatorContext();
 
   return (
-    <div className="mt-4">
+    <div className="mt-2">
       {questions.length < MAX_QUESTIONS && !isEditMode && (
         <AddQuestionButton onClick={addQuestion} />
       )}
diff --git a/src/features/surveys/features/SurveyCreator/components/AddQuestionButton/AddQuestionButton.tsx b/src/features/surveys/features/SurveyCreator/components/AddQuestionButton/AddQuestionButton.tsx
index 1e030814..e8e2646a 100644
--- a/src/features/surveys/features/SurveyCreator/components/AddQuestionButton/AddQuestionButton.tsx
+++ b/src/features/surveys/features/SurveyCreator/components/AddQuestionButton/AddQuestionButton.tsx
@@ -1,8 +1,5 @@
 import { PlusCircleIcon } from '@heroicons/react/outline';
-import Button, {
-  ButtonSize,
-  ButtonVariant,
-} from 'shared/components/Button/Button';
+import Button, { ButtonSize } from 'shared/components/Button/Button';
 import NewQuestionModal from 'features/surveys/features/SurveyCreator/components/NewQuestionModal/NewQuestionModal';
 import useModal from 'features/surveys/hooks/useModal';
 import { DraftQuestion } from 'features/surveys/features/SurveyCreator/managers/createSurveyManager/createSurveyManager';
@@ -14,14 +11,13 @@ interface AddQuestionButtonProps {
 export const AddQuestionButton = ({ onClick }: AddQuestionButtonProps) => {
   const { closeModal, isModalOpen, openModal } = useModal();
   return (
-    <div className="mb-2">
+    <div className="mb-2 rounded-md shadow-sm">
       <Button
         onClick={openModal}
-        variant={ButtonVariant.OUTLINE}
         sizeType={ButtonSize.FULL}
         icon={<PlusCircleIcon className="h-5 w-5" />}
       >
-        Add Question
+        Add new block
       </Button>
 
       <NewQuestionModal
diff --git a/src/features/surveys/features/SurveyCreator/components/EmojiPicker/EmojiPicker.tsx b/src/features/surveys/features/SurveyCreator/components/EmojiPicker/EmojiPicker.tsx
index 00c222e7..96123e4f 100644
--- a/src/features/surveys/features/SurveyCreator/components/EmojiPicker/EmojiPicker.tsx
+++ b/src/features/surveys/features/SurveyCreator/components/EmojiPicker/EmojiPicker.tsx
@@ -49,21 +49,20 @@ function EmojiPicker({
 
   return (
     <div>
-      <button
-        type="button"
-        className="label-text flex h-12 w-14 items-center justify-center rounded-md border bg-zinc-50 p-3 shadow-sm transition hover:scale-95"
+      <Button
+        className="label-text flex h-11 w-14 items-center justify-center rounded-md border bg-zinc-50 shadow-sm transition hover:scale-95"
         onClick={() => setDisplayPicker(!displayPicker)}
       >
         {!addEmoji ? (
-          <Emoji size={28} shortcodes={pickedEmoji || ''} />
+          <Emoji size={27} shortcodes={pickedEmoji || ''} />
         ) : (
-          <PlusSmIcon className="w-[22px]" />
+          <PlusSmIcon className="w-[20px]" />
         )}
-      </button>
+      </Button>
       {onEmoteRemove && (
         <Button
           onClick={() => onEmoteRemove(index, questionIndex)}
-          className="mt-1 w-14"
+          className="mt-1 w-14 py-1.5"
           variant={ButtonVariant.DANGER}
           icon={<TrashIcon className="h-[15px] w-[15px]" />}
         />
diff --git a/src/features/surveys/features/SurveyCreator/components/LogicalJump/Condition.tsx b/src/features/surveys/features/SurveyCreator/components/LogicalJump/Condition.tsx
index 17033d6e..c4230d9a 100644
--- a/src/features/surveys/features/SurveyCreator/components/LogicalJump/Condition.tsx
+++ b/src/features/surveys/features/SurveyCreator/components/LogicalJump/Condition.tsx
@@ -48,81 +48,79 @@ export default function Condition({
       ComparisonType.SUBMITTED;
 
   return (
-    <>
-      <div className="mb-2 flex items-center justify-between gap-4">
-        <div className="flex flex-grow items-center gap-4">
-          {elseCondition ? (
-            <div className="mt-1 flex items-center gap-4">
-              <ArrowDownIcon className="h-4 w-4" />
-              Else continue to the next question
-            </div>
-          ) : (
-            <>
-              <ArrowRightIcon className="h-4 w-4" />
-              if this answer
-              <Select
-                classNames="flex-grow"
-                required
-                submitted={isSubmitted}
-                disabled={isEditMode}
-                selectedValue={
-                  currentQuestion.logicPaths?.[stepIndex].comparisonType
-                }
-                onChangeCallback={(option) =>
-                  updateLogicPath(questionIndex, stepIndex, {
-                    comparisonType: option.value as ComparisonType,
-                  })
-                }
-                options={conditionOptions?.comparisons ?? []}
-              />
-              {displayAnswersOptions && (
-                <Select
-                  classNames="flex-grow"
-                  disabled={isEditMode}
-                  required
-                  submitted={isSubmitted}
-                  emojiContent={currentQuestion.type === QuestionType.EMOJI}
-                  selectedValue={
-                    currentQuestion.logicPaths?.[stepIndex].selectedOption ??
-                    undefined
-                  }
-                  onChangeCallback={(option) =>
-                    updateLogicPath(questionIndex, stepIndex, {
-                      selectedOption: option.value,
-                    })
-                  }
-                  options={conditionOptions?.options ?? []}
-                />
-              )}
-              jump to
+    <div className="mb-2 flex items-center justify-between gap-4">
+      <div className="flex flex-grow items-center gap-4">
+        {elseCondition ? (
+          <div className="mt-1 flex items-center gap-4">
+            <ArrowDownIcon className="h-4 w-4" />
+            Else continue to the next question
+          </div>
+        ) : (
+          <>
+            <ArrowRightIcon className="h-4 w-4" />
+            if this answer
+            <Select
+              classNames="flex-grow"
+              required
+              submitted={isSubmitted}
+              disabled={isEditMode}
+              selectedValue={
+                currentQuestion.logicPaths?.[stepIndex].comparisonType
+              }
+              onChangeCallback={(option) =>
+                updateLogicPath(questionIndex, stepIndex, {
+                  comparisonType: option.value as ComparisonType,
+                })
+              }
+              options={conditionOptions?.comparisons ?? []}
+            />
+            {displayAnswersOptions && (
               <Select
                 classNames="flex-grow"
                 disabled={isEditMode}
                 required
                 submitted={isSubmitted}
+                emojiContent={currentQuestion.type === QuestionType.EMOJI}
                 selectedValue={
-                  currentQuestion.logicPaths?.[stepIndex].nextQuestionId ??
+                  currentQuestion.logicPaths?.[stepIndex].selectedOption ??
                   undefined
                 }
                 onChangeCallback={(option) =>
                   updateLogicPath(questionIndex, stepIndex, {
-                    nextQuestionId: option.value,
-                    endSurvey: option.value === END_OF_SURVEY || undefined,
+                    selectedOption: option.value,
                   })
                 }
-                options={conditionOptions?.jumpQuestions ?? []}
+                options={conditionOptions?.options ?? []}
               />
-            </>
-          )}
-        </div>
-
-        {!elseCondition && !isEditMode && (
-          <TrashIcon
-            onClick={() => removeLogicPath(questionIndex, stepIndex)}
-            className="h-4 w-4 cursor-pointer text-red-800"
-          />
+            )}
+            jump to
+            <Select
+              classNames="flex-grow"
+              disabled={isEditMode}
+              required
+              submitted={isSubmitted}
+              selectedValue={
+                currentQuestion.logicPaths?.[stepIndex].nextQuestionId ??
+                undefined
+              }
+              onChangeCallback={(option) =>
+                updateLogicPath(questionIndex, stepIndex, {
+                  nextQuestionId: option.value,
+                  endSurvey: option.value === END_OF_SURVEY || undefined,
+                })
+              }
+              options={conditionOptions?.jumpQuestions ?? []}
+            />
+          </>
         )}
       </div>
-    </>
+
+      {!elseCondition && !isEditMode && (
+        <TrashIcon
+          onClick={() => removeLogicPath(questionIndex, stepIndex)}
+          className="h-4 w-4 cursor-pointer text-red-800"
+        />
+      )}
+    </div>
   );
 }
diff --git a/src/features/surveys/features/SurveyCreator/components/LogicalJump/LogicalJump.tsx b/src/features/surveys/features/SurveyCreator/components/LogicalJump/LogicalJump.tsx
index d134a5f4..ddd841b3 100644
--- a/src/features/surveys/features/SurveyCreator/components/LogicalJump/LogicalJump.tsx
+++ b/src/features/surveys/features/SurveyCreator/components/LogicalJump/LogicalJump.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
-import Button from 'shared/components/Button/Button';
+import Button, { ButtonSize } from 'shared/components/Button/Button';
 import Condition from 'features/surveys/features/SurveyCreator/components/LogicalJump/Condition';
 import { TerminalIcon } from '@heroicons/react/outline';
 import { QuestionMarkCircleIcon } from '@heroicons/react/solid';
 import { Tooltip } from 'react-tooltip';
 import { useSurveyCreatorContext } from 'features/surveys/features/SurveyCreator/managers/createSurveyManager/context';
+import { MAX_LOGIC_PATHS } from 'shared/constants/surveysConfig';
 
 export interface ConditionSelect {
   name: string;
@@ -58,10 +59,11 @@ export default function LogicalJump({
         </div>
       )}
 
-      {!isEditMode && (
+      {!isEditMode && conditions.length < MAX_LOGIC_PATHS && (
         <Button
           onClick={() => addLogicPath(questionIndex)}
           className="mt-4"
+          sizeType={ButtonSize.SMALL}
           icon={<TerminalIcon className="mr-1 h-5 w-5" />}
         >
           Add path
diff --git a/src/features/surveys/features/SurveyCreator/components/NewQuestionModal/NewQuestionModal.tsx b/src/features/surveys/features/SurveyCreator/components/NewQuestionModal/NewQuestionModal.tsx
index d84a569f..becf29ea 100644
--- a/src/features/surveys/features/SurveyCreator/components/NewQuestionModal/NewQuestionModal.tsx
+++ b/src/features/surveys/features/SurveyCreator/components/NewQuestionModal/NewQuestionModal.tsx
@@ -79,7 +79,7 @@ export default function NewQuestionModal({
     <StyledDialog
       isOpen={isOpened}
       onClose={closeModal}
-      title={'Choose question type'}
+      title={'Choose block type'}
       content={
         <div className="mt-6 flex flex-col gap-2 sm:mt-4 sm:flex-row">
           <NewQuestionModalButton
diff --git a/src/features/surveys/features/SurveyCreator/components/PreviewPanel/PreviewPanel.tsx b/src/features/surveys/features/SurveyCreator/components/PreviewPanel/PreviewPanel.tsx
index 4e81f670..609861f5 100644
--- a/src/features/surveys/features/SurveyCreator/components/PreviewPanel/PreviewPanel.tsx
+++ b/src/features/surveys/features/SurveyCreator/components/PreviewPanel/PreviewPanel.tsx
@@ -1,6 +1,5 @@
 import clsx from 'clsx';
 import SurveyDisplay from 'features/surveys/features/SurveyDisplay/SurveyDisplay';
-import Background from 'layout/Background/Background';
 import React from 'react';
 import { useSurveyCreatorContext } from 'features/surveys/features/SurveyCreator/managers/createSurveyManager/context';
 import { usePreviewPanelContext } from 'features/surveys/features/SurveyCreator/managers/previewPanelManager/context';
@@ -29,7 +28,7 @@ export default function PreviewPanel() {
 
       <div
         className={clsx(
-          'fixed bottom-0 right-0 top-[var(--navigation-height)] w-[550px] max-w-[calc(100vw-(100vw-100%))] items-center overflow-hidden border-l transition-transform duration-500 ease-in-out',
+          'fixed bottom-0 right-0 top-[var(--navigation-height)] w-[550px] max-w-[calc(100vw-(100vw-100%))] items-center overflow-hidden border-l shadow transition-transform duration-500 ease-in-out',
           !isPanelOpened && 'translate-x-full'
         )}
       >
@@ -42,8 +41,8 @@ export default function PreviewPanel() {
 
           <XIcon onClick={togglePanel} className="h-5 w-5 cursor-pointer" />
         </div>
-        <div className="no-scrollbar h-[calc(100%-42px)] overflow-auto p-6 px-4">
-          <Background hideAccents />
+        <div className="no-scrollbar h-[calc(100%-42px)] overflow-auto bg-white p-6 ">
+          {/* <Background hideAccents /> */}
           <SurveyDisplay
             previewMode
             restartTrigger={restartTrigger}
diff --git a/src/features/surveys/features/SurveyCreator/components/QuestionBlocks/ChoiceQuestionBlock/ChoiceQuestionBlock.tsx b/src/features/surveys/features/SurveyCreator/components/QuestionBlocks/ChoiceQuestionBlock/ChoiceQuestionBlock.tsx
index 8dfb7491..c95debe0 100644
--- a/src/features/surveys/features/SurveyCreator/components/QuestionBlocks/ChoiceQuestionBlock/ChoiceQuestionBlock.tsx
+++ b/src/features/surveys/features/SurveyCreator/components/QuestionBlocks/ChoiceQuestionBlock/ChoiceQuestionBlock.tsx
@@ -1,6 +1,9 @@
 import { PlusIcon, TrashIcon } from '@heroicons/react/outline';
-import Button, { ButtonVariant } from 'shared/components/Button/Button';
-import Input from 'shared/components/Input/Input';
+import Button, {
+  ButtonSize,
+  ButtonVariant,
+} from 'shared/components/Button/Button';
+import Input, { InputSize } from 'shared/components/Input/Input';
 import { MAX_OPTIONS, MIN_OPTIONS } from 'shared/constants/surveysConfig';
 import useTranslation from 'next-translate/useTranslation';
 import { useSurveyCreatorContext } from 'features/surveys/features/SurveyCreator/managers/createSurveyManager/context';
@@ -32,7 +35,7 @@ export default function ChoiceQuestionBlock({
   };
 
   return (
-    <div>
+    <div className="mt-[2px]">
       {options.map((option, index) => (
         <div className="flex w-full gap-2" key={index}>
           <div className="block flex-grow">
@@ -41,7 +44,8 @@ export default function ChoiceQuestionBlock({
               value={option}
               placeholder="Answer..."
               error={getAnswerError(option)}
-              className="mt-[2px]"
+              className="mt-0 !bg-white"
+              inputSize={InputSize.SMALL}
               onChange={(e) =>
                 handleOptionChange(
                   index,
@@ -53,18 +57,20 @@ export default function ChoiceQuestionBlock({
           </div>
           {options.length > MIN_OPTIONS && (
             <Button
-              className="mt-[2px] h-[42px] w-[42px]"
               variant={ButtonVariant.DANGER}
+              sizeType={ButtonSize.SMALL}
               icon={<TrashIcon className="h-4 w-4" />}
+              className="w-[40px]"
               onClick={() => handleOptionRemove(index, questionIndex)}
             />
           )}
         </div>
       ))}
       {options.length < MAX_OPTIONS && (
-        <div className="mb-3 mt-2">
+        <div className="mb-3 mt-0">
           <Button
-            className="ml-auto"
+            className="w-full"
+            sizeType={ButtonSize.SMALL}
             onClick={() => handleAddingNewOption('', questionIndex)}
           >
             Add New Option <PlusIcon className="ml-2 h-4 w-4" />
diff --git a/src/features/surveys/features/SurveyCreator/components/QuestionBlocks/EmojiQuestionBlock/EmojiQuestionBlock.tsx b/src/features/surveys/features/SurveyCreator/components/QuestionBlocks/EmojiQuestionBlock/EmojiQuestionBlock.tsx
index 3bd5e507..123d1e9d 100644
--- a/src/features/surveys/features/SurveyCreator/components/QuestionBlocks/EmojiQuestionBlock/EmojiQuestionBlock.tsx
+++ b/src/features/surveys/features/SurveyCreator/components/QuestionBlocks/EmojiQuestionBlock/EmojiQuestionBlock.tsx
@@ -16,10 +16,10 @@ export default function EmojiQuestionBlock({
 
   return (
     <div
-      className="mb-5 mt-1"
+      className="mb-4 mt-2"
       style={{
         display: 'grid',
-        gridTemplateColumns: 'repeat(auto-fit, 58px)',
+        gridTemplateColumns: 'repeat(auto-fit, 56px)',
         justifyContent: 'space-between',
         gridGap: '8px',
       }}
diff --git a/src/features/surveys/features/SurveyCreator/components/QuestionBlocks/QuestionBlockWrapper/QuestionBlockWrapper.tsx b/src/features/surveys/features/SurveyCreator/components/QuestionBlocks/QuestionBlockWrapper/QuestionBlockWrapper.tsx
index 93fe85fe..b67e8cd8 100644
--- a/src/features/surveys/features/SurveyCreator/components/QuestionBlocks/QuestionBlockWrapper/QuestionBlockWrapper.tsx
+++ b/src/features/surveys/features/SurveyCreator/components/QuestionBlocks/QuestionBlockWrapper/QuestionBlockWrapper.tsx
@@ -4,7 +4,7 @@ import {
   TrashIcon,
 } from '@heroicons/react/outline';
 import React, { ChangeEvent, PropsWithChildren } from 'react';
-import Input from 'shared/components/Input/Input';
+import Input, { InputSize } from 'shared/components/Input/Input';
 import useTranslation from 'next-translate/useTranslation';
 import {
   MAX_QUESTION_LENGTH,
@@ -16,6 +16,7 @@ import clsx from 'clsx';
 import QuestionTypeIcons from 'shared/components/QuestionTypeIcons/QuestionTypeIcons';
 import { useSurveyCreatorContext } from 'features/surveys/features/SurveyCreator/managers/createSurveyManager/context';
 import { DraftQuestion } from 'features/surveys/features/SurveyCreator/managers/createSurveyManager/createSurveyManager';
+import Button, { ButtonSize } from 'shared/components/Button/Button';
 
 interface QuestionBlockWrapperProps {
   index: number;
@@ -68,12 +69,13 @@ export default function QuestionBlockWrapper({
   };
 
   return (
-    <div className="relative rounded-md border border-l-4 border-indigo-200 bg-white shadow-sm">
-      <div className="flex flex-col items-start gap-1 px-3 pb-1 pt-3 sm:flex-row sm:gap-2">
+    <div className="relative rounded-md border border-l-4 border-secondary-200  border-l-secondary-300 bg-white shadow-sm">
+      <div className="flex flex-col items-start gap-1 pe-2 ps-2 pt-2 sm:flex-row sm:gap-2">
         <div className="flex w-full items-start gap-2">
-          <button
+          <Button
             onClick={onExpand}
-            className="h-[42px] cursor-pointer rounded-md border border-opacity-100 bg-zinc-50 p-[13px]"
+            sizeType={ButtonSize.SMALL}
+            className="bg-secondary-50"
           >
             <ChevronDownIcon
               className={clsx(
@@ -81,7 +83,7 @@ export default function QuestionBlockWrapper({
                 !questionData.expanded && '-rotate-90'
               )}
             />
-          </button>
+          </Button>
 
           <div className="hidden sm:block">
             <QuestionTypeIcons type={questionData.type} index={index} />
@@ -95,7 +97,8 @@ export default function QuestionBlockWrapper({
               }
               value={questionData.title}
               error={questionError()}
-              className="mt-0 h-[42px]"
+              className="mt-0 !bg-white"
+              inputSize={InputSize.SMALL}
               maxLength={MAX_QUESTION_LENGTH}
               data-test-id={`question-input-${index}`}
             />
@@ -111,21 +114,22 @@ export default function QuestionBlockWrapper({
             <div className="flex gap-2">
               {isDraggingPossible && (
                 <div
-                  className="h-[42px] cursor-pointer rounded-md border bg-zinc-50 p-[13px] shadow-sm hover:scale-95"
+                  className="h-[38px] cursor-pointer rounded-md border bg-secondary-50 p-[12px] shadow-sm hover:scale-95"
                   {...dragHandleProps}
                 >
-                  <SelectorIcon className="w-[15px]" />
+                  <SelectorIcon className="w-[14px]" />
                 </div>
               )}
               {isRemovingPossible && (
-                <button
+                <Button
                   onClick={() => removeQuestion(index)}
+                  sizeType={ButtonSize.SMALL}
                   disabled={isEditMode}
                   data-test-id={`remove-question-${index}`}
-                  className="h-[42px] cursor-pointer rounded-md border border-red-200 bg-red-200 p-[13px] shadow-sm hover:scale-95 disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:scale-100"
+                  className=" cursor-pointer rounded-md border border-red-200 bg-red-200 p-[13px] shadow-sm hover:scale-95 disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:scale-100"
                 >
                   <TrashIcon className="w-[15px] text-red-900" />
-                </button>
+                </Button>
               )}
             </div>
           )}
@@ -133,7 +137,7 @@ export default function QuestionBlockWrapper({
       </div>
 
       {questionData.expanded && (
-        <div className="mb-3 px-3">
+        <div className="mb-2.5 px-2">
           {isEditMode ? (
             <div className="relative opacity-50">
               <div className="absolute z-50 h-full w-full cursor-not-allowed"></div>
@@ -146,10 +150,10 @@ export default function QuestionBlockWrapper({
 
           <div className="relative min-h-[36px] border-t pt-2">
             {!!advancedSettings && (
-              <div className="hidden w-full border-l-2 border-indigo-200 text-left text-sm md:block">
+              <div className="w-fulltext-left hidden text-sm md:block">
                 <button
                   onClick={toggleAdvancedSettings}
-                  className="flex w-auto cursor-pointer items-center gap-2  py-1 pl-2"
+                  className="flex w-auto cursor-pointer items-center gap-2 py-1 pl-1.5"
                 >
                   <ChevronDownIcon
                     className={clsx(
@@ -160,7 +164,7 @@ export default function QuestionBlockWrapper({
                   Show advanced settings
                 </button>
                 {questionData.advancedSettingsExpanded && (
-                  <div className="ml-8 mr-2 mt-2 py-2">{advancedSettings}</div>
+                  <div className="ml-8 mr-2 mt-1 py-2">{advancedSettings}</div>
                 )}
               </div>
             )}
diff --git a/src/features/surveys/features/SurveyCreator/components/QuestionsSection/QuestionsSection.tsx b/src/features/surveys/features/SurveyCreator/components/QuestionsSection/QuestionsSection.tsx
index 0072ce43..041aacc2 100644
--- a/src/features/surveys/features/SurveyCreator/components/QuestionsSection/QuestionsSection.tsx
+++ b/src/features/surveys/features/SurveyCreator/components/QuestionsSection/QuestionsSection.tsx
@@ -15,7 +15,7 @@ export default function QuestionsSection() {
     useSurveyCreatorContext();
 
   return (
-    <div className="mt-4">
+    <div className="mt-2">
       {isEditMode && (
         <Note title={t('editNoteTitle')} description={t('editNote')} />
       )}
diff --git a/src/features/surveys/features/SurveyCreator/components/TitleAndConfigSection/TitleAndConfigSection.tsx b/src/features/surveys/features/SurveyCreator/components/TitleAndConfigSection/TitleAndConfigSection.tsx
index 1b0f2766..67ce2799 100644
--- a/src/features/surveys/features/SurveyCreator/components/TitleAndConfigSection/TitleAndConfigSection.tsx
+++ b/src/features/surveys/features/SurveyCreator/components/TitleAndConfigSection/TitleAndConfigSection.tsx
@@ -4,8 +4,11 @@ import useModal from 'features/surveys/hooks/useModal';
 import useTranslation from 'next-translate/useTranslation';
 
 import React from 'react';
-import Button, { ButtonVariant } from 'shared/components/Button/Button';
-import Input from 'shared/components/Input/Input';
+import Button, {
+  ButtonSize,
+  ButtonVariant,
+} from 'shared/components/Button/Button';
+import Input, { InputSize } from 'shared/components/Input/Input';
 import { MAX_TITLE_LENGTH } from 'shared/constants/surveysConfig';
 import { useSurveyCreatorContext } from 'features/surveys/features/SurveyCreator/managers/createSurveyManager/context';
 import { usePreviewPanelContext } from 'features/surveys/features/SurveyCreator/managers/previewPanelManager/context';
@@ -40,23 +43,25 @@ export default function TitleAndConfigSection() {
             error={error}
             maxLength={MAX_TITLE_LENGTH}
             onChange={handleChangeTitle}
+            inputSize={InputSize.SMALL}
           />
         </div>
 
         <div className="flex gap-2">
           <Button
-            className="h-[42px] flex-grow whitespace-nowrap"
+            className="flex-grow whitespace-nowrap"
             variant={ButtonVariant.PRIMARY}
             onClick={openOptionsSurveyModal}
             icon={<CogIcon className="h-5 w-5" />}
             data-test-id="options-button"
+            sizeType={ButtonSize.SMALL}
           >
             <span className="ms-1">{t('options')}</span>
           </Button>
           <Button
-            className="h-[42px]"
             onClick={togglePanel}
             variant={ButtonVariant.PRIMARY}
+            sizeType={ButtonSize.SMALL}
             icon={
               isPanelOpened ? (
                 <EyeOffIcon className="h-5 w-5" />
diff --git a/src/features/surveys/features/SurveyCreator/managers/createSurveyManager/createSurveyManager.ts b/src/features/surveys/features/SurveyCreator/managers/createSurveyManager/createSurveyManager.ts
index c3439c07..6270c326 100644
--- a/src/features/surveys/features/SurveyCreator/managers/createSurveyManager/createSurveyManager.ts
+++ b/src/features/surveys/features/SurveyCreator/managers/createSurveyManager/createSurveyManager.ts
@@ -264,7 +264,10 @@ export const useCreateSurveyManager = (initialData?: SurveyWithQuestions) => {
       if (
         question.logicPaths?.some(
           (path) =>
-            !path.selectedOption || !path.comparisonType || !path.nextQuestionId
+            (path.comparisonType !== ComparisonType.SUBMITTED &&
+              !path.selectedOption) ||
+            !path.comparisonType ||
+            !path.nextQuestionId
         )
       ) {
         questionIndexesToExpand.push(index);
diff --git a/src/features/surveys/features/SurveyCreator/managers/previewPanelManager/previewPanelManager.ts b/src/features/surveys/features/SurveyCreator/managers/previewPanelManager/previewPanelManager.ts
index 1a863eb9..24a63502 100644
--- a/src/features/surveys/features/SurveyCreator/managers/previewPanelManager/previewPanelManager.ts
+++ b/src/features/surveys/features/SurveyCreator/managers/previewPanelManager/previewPanelManager.ts
@@ -1,13 +1,13 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 export const usePreviewPanelManager = () => {
   const [isPanelOpened, setIsPanelOpened] = useState(false);
 
-  useEffect(() => {
-    if (window.innerWidth > 1280) {
-      setIsPanelOpened(true);
-    }
-  }, []);
+  // useEffect(() => {
+  //   if (window.innerWidth > 1280) {
+  //     setIsPanelOpened(true);
+  //   }
+  // }, []);
 
   const togglePanel = () => {
     setIsPanelOpened((prev) => !prev);
diff --git a/src/features/surveys/features/SurveyDisplay/SurveyDisplayContent.tsx b/src/features/surveys/features/SurveyDisplay/SurveyDisplayContent.tsx
index 1d74ac0e..46e514c1 100644
--- a/src/features/surveys/features/SurveyDisplay/SurveyDisplayContent.tsx
+++ b/src/features/surveys/features/SurveyDisplay/SurveyDisplayContent.tsx
@@ -5,6 +5,8 @@ import AllQuestionsView from 'features/surveys/features/SurveyDisplay/components
 import SurveyNoActive from 'features/surveys/features/SurveyDisplay/components/SurveyNoActive/SurveyNoActive';
 import ThankYou from 'features/surveys/features/SurveyDisplay/components/ThankYou';
 import clsx from 'clsx';
+import NoSurveys from '/public/images/no-surveys.svg';
+import Image from 'next/image';
 
 export default function SurveyDisplayContent() {
   const { formData, isSurveyFinished, previewMode } = useSurveyDisplayContext();
@@ -16,11 +18,25 @@ export default function SurveyDisplayContent() {
           <ThankYou />
         </div>
       ) : formData?.isActive ? (
-        formData.oneQuestionPerStep ? (
-          <OneQuestionView />
-        ) : (
-          <AllQuestionsView />
-        )
+        <>
+          {formData.oneQuestionPerStep ? (
+            <OneQuestionView />
+          ) : (
+            <AllQuestionsView />
+          )}
+
+          {formData.questions.length === 0 && (
+            <>
+              <Image
+                className="mx-auto mb-6 w-[160px] -translate-x-3"
+                src={NoSurveys}
+                alt="no surveys"
+                height={165}
+              />
+              <p>There are no questions in this survey</p>
+            </>
+          )}
+        </>
       ) : (
         <SurveyNoActive />
       )}
diff --git a/src/features/surveys/features/SurveyDisplay/components/AnswersComponent/AnswersComponentFactory.tsx b/src/features/surveys/features/SurveyDisplay/components/AnswersComponent/AnswersComponentFactory.tsx
index b35f925e..4dcf595e 100644
--- a/src/features/surveys/features/SurveyDisplay/components/AnswersComponent/AnswersComponentFactory.tsx
+++ b/src/features/surveys/features/SurveyDisplay/components/AnswersComponent/AnswersComponentFactory.tsx
@@ -57,7 +57,7 @@ export const AnswersComponentFactory = (
       )}
 
       {formData.oneQuestionPerStep && (
-        <div className="mt-6 flex flex-col gap-x-4 gap-y-2 sm:flex-row">
+        <div className="mt-6 flex flex-col-reverse gap-x-4 gap-y-2 sm:flex-row">
           {isBackButtonVisible && (
             <Button
               variant={ButtonVariant.OUTLINE}
diff --git a/src/pages/api/survey/index.ts b/src/pages/api/survey/index.ts
index f0b3f703..fbdad808 100644
--- a/src/pages/api/survey/index.ts
+++ b/src/pages/api/survey/index.ts
@@ -5,6 +5,7 @@ import prismadb from '../../../../lib/prismadb';
 import serverAuth from '../../../../lib/serverAuth';
 import { ComparisonType, QuestionType } from '@prisma/client';
 import {
+  MAX_LOGIC_PATHS,
   MAX_QUESTIONS,
   MAX_QUESTION_LENGTH,
   MAX_TITLE_LENGTH,
@@ -61,6 +62,10 @@ export const isSurveyValid = (survey: CreateEditSurveyPayload) => {
         question.title.trim() === '' ||
         question.title.length > MAX_QUESTION_LENGTH
     ) ||
+    survey.questions.some(
+      (question) =>
+        question.logicPaths && question.logicPaths.length > MAX_LOGIC_PATHS
+    ) ||
     survey.questions.length < MIN_QUESTIONS ||
     survey.questions.length > MAX_QUESTIONS
   ) {
diff --git a/src/shared/components/Button/Button.tsx b/src/shared/components/Button/Button.tsx
index 4df62bb2..b192c7bb 100644
--- a/src/shared/components/Button/Button.tsx
+++ b/src/shared/components/Button/Button.tsx
@@ -12,10 +12,11 @@ export enum ButtonVariant {
   FLAT = 'btn-flat',
 }
 export enum ButtonSize {
-  DEFAULT = '',
-  MEDIUM = 'w-32',
-  LARGE = 'w-40',
-  FULL = 'w-full',
+  SMALL = 'SMALL',
+  DEFAULT = 'DEFAULT',
+  MEDIUM = 'MEDIUM',
+  LARGE = 'LARGE',
+  FULL = ' FULL',
 }
 export interface ButtonProps {
   variant?: ButtonVariant;
@@ -44,7 +45,11 @@ const Button = ({
     className={clsx(
       'btn relative flex items-center justify-center',
       variant,
-      sizeType,
+      sizeType === ButtonSize.SMALL && 'h-[38px] px-3 py-1 text-sm',
+      sizeType === ButtonSize.DEFAULT && '',
+      sizeType === ButtonSize.MEDIUM && 'w-32',
+      sizeType === ButtonSize.LARGE && 'w-40 ',
+      sizeType === ButtonSize.FULL && 'w-full',
       className
     )}
     style={style}
diff --git a/src/shared/components/Input/Input.tsx b/src/shared/components/Input/Input.tsx
index 4403836e..53e493c0 100644
--- a/src/shared/components/Input/Input.tsx
+++ b/src/shared/components/Input/Input.tsx
@@ -2,6 +2,11 @@ import clsx from 'clsx';
 import React, { useState } from 'react';
 import { EyeIcon, EyeOffIcon } from '@heroicons/react/solid';
 
+export enum InputSize {
+  SMALL = 'SMALL',
+  MEDIUM = 'MEDIUM',
+}
+
 interface InputProps {
   label?: string;
   type?: React.HTMLInputTypeAttribute;
@@ -12,6 +17,7 @@ interface InputProps {
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
   className?: string;
   centeredError?: boolean;
+  inputSize?: InputSize;
 }
 
 function Input({
@@ -24,6 +30,7 @@ function Input({
   error,
   className,
   centeredError,
+  inputSize = InputSize.MEDIUM,
   ...props
 }: InputProps & React.HTMLProps<HTMLInputElement>) {
   const [showPassword, setShowPassword] = useState(false);
@@ -41,8 +48,10 @@ function Input({
           placeholder={placeholder}
           onChange={onChange}
           className={clsx(
-            'my-2 block w-full rounded-md border bg-zinc-50 px-4 py-2 shadow-sm focus:outline-none',
+            'my-2 block w-full rounded-md border bg-zinc-50 shadow-sm focus:outline-none',
             error && 'border-red-400',
+            inputSize === InputSize.SMALL && 'h-[38px] px-3 py-1.5',
+            inputSize === InputSize.MEDIUM && 'px-4 py-2 ',
             className
           )}
           {...props}
diff --git a/src/shared/components/QuestionTypeIcons/QuestionTypeIcons.tsx b/src/shared/components/QuestionTypeIcons/QuestionTypeIcons.tsx
index 9f5371ad..4fe4cbc9 100644
--- a/src/shared/components/QuestionTypeIcons/QuestionTypeIcons.tsx
+++ b/src/shared/components/QuestionTypeIcons/QuestionTypeIcons.tsx
@@ -31,7 +31,7 @@ export default function QuestionTypeIcons({
         )}`}
       </Tooltip>
       <div
-        className="mx-1 flex h-[42px] w-[26px] items-center justify-center px-[1px] text-gray-400"
+        className="mx-1 flex h-[38px] w-[25px] items-center justify-center px-[1px] text-gray-400"
         data-tooltip-id={`my-tooltip-${index}`}
       >
         {type === QuestionType.EMOJI && <EmojiIcon />}
diff --git a/src/shared/components/Select/Select.tsx b/src/shared/components/Select/Select.tsx
index 9c56e163..0ba96bb9 100644
--- a/src/shared/components/Select/Select.tsx
+++ b/src/shared/components/Select/Select.tsx
@@ -79,7 +79,7 @@ export default function Select({
               <Listbox.Option
                 key={optionIdx}
                 className={({ active }) =>
-                  `relative cursor-default select-none py-1 text-sm px-4 ${
+                  `relative cursor-default select-none py-1 text-sm text-left px-4 ${
                     active ? 'bg-indigo-100 text-indigo-400' : 'text-gray-900'
                   }`
                 }
diff --git a/src/shared/constants/surveysConfig.ts b/src/shared/constants/surveysConfig.ts
index 2881ded7..1a0636b5 100644
--- a/src/shared/constants/surveysConfig.ts
+++ b/src/shared/constants/surveysConfig.ts
@@ -9,9 +9,11 @@ export const MAX_TITLE_LENGTH = 255;
 export const MAX_QUESTIONS = 10;
 export const MIN_QUESTIONS = 0;
 
-export const MAX_OPTIONS = 6;
+export const MAX_OPTIONS = 8;
 export const MIN_OPTIONS = 2;
 
+export const MAX_LOGIC_PATHS = 8;
+
 export const MAX_QUESTION_LENGTH = 255;
 export const MAX_ANSWER_LENGTH = 255;