diff --git a/src/app/assets/styles/common.css b/src/app/assets/styles/common.css
index 8135d735..6f8a7dfe 100644
--- a/src/app/assets/styles/common.css
+++ b/src/app/assets/styles/common.css
@@ -123,6 +123,8 @@ h6 {
 
 * {
   box-sizing: border-box;
+  margin: 0;
+  padding: 0;
 }
 
 .border {
diff --git a/src/features/create-request/ui/steps/common-step/common-step.module.css b/src/features/create-request/ui/steps/common-step/common-step.module.css
index 1418a30a..39cea526 100644
--- a/src/features/create-request/ui/steps/common-step/common-step.module.css
+++ b/src/features/create-request/ui/steps/common-step/common-step.module.css
@@ -1,41 +1,52 @@
 .mainWrapper {
-  position: relative;
-  top: -8px;
+  display: grid;
+  grid-template-rows: 1fr min-content;
+  grid-template-columns: 52px 1fr;
+  grid-template-areas:
+    '. content'
+    '. button';
+  row-gap: 40px;
+  column-gap: 20px;
+  margin-top: 40px;
 }
-.container {
-  margin: 50px 0 0 76px;
+
+.content {
+  grid-area: content;
   display: flex;
   flex-direction: column;
-  width: 450px;
-  min-height: 150px;
+  row-gap: 20px;
 }
 
-.buttonsWrapper {
+.content__item_wrapper {
   display: flex;
-  justify-content: flex-end;
-  margin-top: 45px;
+  flex-direction: row;
+  gap: 5px;
+  justify-content: space-between;
 }
 
-.prevButton {
-  margin-right: 20px;
+.content__item_description {
+  display: grid;
+  row-gap: 5px;
+  grid-template-areas:
+    'category category'
+    'description description'
+    'moreButton .'
+    '. editButton';
+  grid-template-rows: min-content 1fr repeat(2, min-content);
+  grid-template-columns: 1fr min-content;
 }
 
-.addressWrapper {
+.buttonsWrapper {
+  grid-area: button;
   display: flex;
-  margin-top: 20px;
-}
-
-.address {
-  max-width: 269px;
-}
-
-.typeOfTask {
-  margin: 15px 0 0;
+  justify-content: flex-end;
+  gap: 10px;
 }
 
 .descriptionForTask {
-  height: auto;
-  max-height: 64px;
+  grid-area: description;
+  width: 454px;
+  height: 65px;
   transition: max-height 0.3s ease;
   overflow: hidden;
   display: -webkit-box;
@@ -45,7 +56,7 @@
 }
 
 .descriptionForTask.expanded {
-  max-height: min-content;
+  height: min-content;
   resize: none;
   transition: var(--transition-hover);
   box-sizing: border-box;
@@ -66,120 +77,84 @@
   -webkit-line-clamp: unset;
 }
 
-.dateWrapper {
+.readMoreButton {
+  grid-area: moreButton;
+  justify-self: start;
+  background: none;
+  border: none;
+  color: var(--colors-interface-primary);
+  cursor: pointer;
+  align-self: flex-start;
+}
+
+.content__item_description .editButton {
+  grid-area: editButton;
+  white-space: nowrap;
+}
+
+.category {
+  grid-area: category;
+}
+
+.addressOutput {
   display: flex;
-  column-gap: 20px;
+  align-items: center;
+  gap: 5px;
+  max-width: 300px;
 }
 
-.categories {
-  padding: 7px 2px 5px 10px;
-  margin-top: 20px;
+.addressOutput svg {
+  flex-shrink: 0;
+}
+
+.dateAndTime {
+  display: flex;
+  gap: 30px;
 }
 
 @media (max-width: 735px) {
-  .container {
-    align-items: flex-start;
-    margin: 3px 0 0 0;
-    width: 270px;
-    height: 300px;
-  }
   .mainWrapper {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+    margin-top: 0;
+    grid-template-rows: min-content 1fr min-content;
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      'title'
+      'content'
+      'button';
+    justify-items: center;
+    height: 550px;
+    row-gap: 30px;
   }
-  .buttonsWrapper {
-    gap: 10px;
-    margin-top: 80px;
-    justify-content: center;
-    width: 260px;
-    position: relative;
-    bottom: -140px;
-  }
-  .task {
-    align-self: center;
-    position: relative;
-    bottom: -10px;
+
+  .content__item_wrapper {
+    flex-direction: column;
   }
 
-  .headerWrapper {
-    background: linear-gradient(
-      90deg,
-      rgba(255, 255, 255, 0) 0%,
-      var(--colors-interface-primary) 49.28%,
-      rgba(255, 255, 255, 0) 100%
-    );
+  .title__mobile {
+    grid-area: title;
     width: 240px;
-    height: 1px;
-    margin-top: 4px;
-    align-self: center;
     position: relative;
-    bottom: -10px;
+    text-align: center;
   }
 
-  .dateWrapper {
-    margin: 40px 0 0;
-    position: relative;
-    column-gap: 45px;
+  .gradient {
+    position: absolute;
+    bottom: -4px;
   }
 
-  .addressWrapper {
-    position: relative;
-    margin-top: 17px;
-    left: -4px;
-  }
-  .typeOfTask {
-    margin-top: 5px;
-    margin-bottom: 10px;
+  .content__item_description {
+    grid-template-areas:
+      'category category'
+      'description description'
+      'moreButton .'
+      'editButton .';
   }
 
   .descriptionForTask {
-    height: auto;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-height: 64px;
-    max-width: 250px;
-    transition: max-height 0.3s ease;
-    display: -webkit-box;
-    -webkit-line-clamp: 4;
-    -webkit-box-orient: vertical;
-    overflow-wrap: anywhere;
-  }
-
-  .descriptionForTask.expanded {
-    min-height: 185px;
-    -webkit-line-clamp: unset;
-    text-align: start;
-    appearance: auto;
-    -webkit-rtl-ordering: logical;
-    cursor: text;
-    overflow-wrap: break-word;
-    background-color: field;
+    width: 100%;
   }
 
-  .categories {
-    width: 250px;
-    margin-top: 17px;
-    margin-bottom: 13px;
-  }
-
-  .prevButton {
-    margin-right: 0;
+  .buttonsWrapper {
+    align-self: flex-end;
   }
 }
-.edit_button {
-  padding-left: 10px;
-  padding-bottom: 0;
-  display: flex;
-  align-items: flex-end;
-}
-
-.readMoreButton {
-  background: none;
-  border: none;
-  color: var(--colors-interface-primary);
-  cursor: pointer;
-  padding: 0;
-  align-self: flex-start;
-  margin-top: 5px;
-}
diff --git a/src/features/create-request/ui/steps/common-step/common-step.tsx b/src/features/create-request/ui/steps/common-step/common-step.tsx
index efe61a97..ce4aaaa4 100644
--- a/src/features/create-request/ui/steps/common-step/common-step.tsx
+++ b/src/features/create-request/ui/steps/common-step/common-step.tsx
@@ -6,7 +6,6 @@ import { useAppDispatch, useAppSelector } from 'app/hooks';
 import { useTruncatedText } from 'shared/hooks';
 import {
   changeCurrentStep,
-  changeStepDecrement,
   closePopup,
   openPopup,
   clearState,
@@ -17,6 +16,7 @@ import {
   Typography,
   EditButton,
   CategoriesBackground,
+  GradientDivider,
 } from 'shared/ui';
 import {
   CreateTaskDto,
@@ -50,14 +50,14 @@ export const CommonStep = ({ isMobile }: ICommonStepProps) => {
   const { isTruncated, isExpanded, toggleIsShowingMore } =
     useTruncatedText(textRef);
 
-  const handlePreviousStepClick = () => {
-    dispatch(changeStepDecrement());
+  const handleClosePopup = () => {
+    dispatch(closePopup());
   };
 
   const parseDate = parse(date, 'dd.MM.yyyy', new Date());
   const formattedDate = format(parseDate, 'yyyy.MM.dd');
 
-  const categorySize = category.title.length > 22 ? 'large' : 'medium';
+  const categorySize = category.title.length > 15 ? 'large' : 'medium';
 
   const handleSubmitClick = () => {
     let requestData = {};
@@ -117,160 +117,93 @@ export const CommonStep = ({ isMobile }: ICommonStepProps) => {
 
   return (
     <div className={styles.mainWrapper}>
-      <div className={classNames(styles.container)}>
-        {isMobile ? (
-          <>
-            <Typography
-              tag={'h2'}
-              color={'black'}
-              fontFamily={'primaryFont'}
-              content={'Дело'}
-              extraClass={styles.task}
-            />
-            <div className={styles.headerWrapper} />
-            <div className={styles.dateWrapper}>
-              {!termlessRequest ? (
-                <>
-                  <Typography variant={'paragraph-bold'} content={date} />
-                  <Typography
-                    variant={'paragraph-bold'}
-                    content={time}
-                    extraClass={styles.time}
-                  />
-                </>
-              ) : (
-                <Typography
-                  variant={'paragraph-bold'}
-                  content={'Заявка без срока'}
-                />
-              )}
-            </div>
-            {isTypeEdit && (
-              <EditButton
-                extClassName={styles.edit_button}
-                label="Изменить дату и время"
-                onClick={() => handleEditButton('date')}
-              />
-            )}
-            <div className={styles.addressWrapper}>
-              <Icon icon="LocationIcon" color="blue" />
-              <Typography variant={'support'} content={address} />
-            </div>
-            {isTypeEdit && (
-              <EditButton
-                extClassName={styles.edit_button}
-                label="Изменить адрес"
-                onClick={() => handleEditButton('coordinates')}
-              />
+      {isMobile && (
+        <>
+          <Typography
+            tag={'h2'}
+            variant={'title'}
+            extraClass={styles.title__mobile}
+          >
+            Дело
+            <GradientDivider extClassName={styles.gradient} />
+          </Typography>
+        </>
+      )}
+
+      <div className={styles.content}>
+        <div className={styles.content__item_wrapper}>
+          <Typography
+            variant={isMobile ? 'paragraph-bold' : 'subtitle'}
+            extraClass={styles.dateAndTime}
+          >
+            {!termlessRequest ? (
+              <>
+                <span>{date}</span>
+                <span>{time}</span>
+              </>
+            ) : (
+              'Заявка без срока'
             )}
-            <CategoriesBackground
-              theme="primary"
-              size={categorySize}
-              content={category.title}
-              extClassName={styles.categories}
-            />
-            <Typography
-              color={'darkGray'}
-              extraClass={classNames(styles.descriptionForTask, {
-                [styles.expanded]: isExpanded,
-              })}
-              ref={textRef}
-              content={description}
+          </Typography>
+          {isTypeEdit && (
+            <EditButton
+              label="Изменить дату и время"
+              onClick={() => handleEditButton('date')}
             />
-            {isTruncated && (
-              <button
-                onClick={toggleIsShowingMore}
-                className={styles.readMoreButton}
-              >
-                {isExpanded ? 'Скрыть' : 'Читать'}
-              </button>
-            )}
-            {isTypeEdit && (
-              <EditButton
-                extClassName={styles.edit_button}
-                label="Изменить задание"
-                onClick={() => handleEditButton('description')}
-              />
-            )}
-          </>
-        ) : (
-          <>
-            <div className={styles.dateWrapper}>
-              {!termlessRequest ? (
-                <>
-                  <Typography variant={'title'} content={date} />
-                  <Typography
-                    variant={'title'}
-                    content={[time, termlessRequest]}
-                    extraClass={styles.time}
-                  />
-                </>
-              ) : (
-                <Typography variant={'title'} content={'Заявка без срока'} />
-              )}
-              {isTypeEdit ? (
-                <EditButton
-                  extClassName={styles.edit_button}
-                  label="Изменить дату и время"
-                  onClick={() => handleEditButton('date')}
-                />
-              ) : null}
-            </div>
-            <div className={styles.addressWrapper}>
-              <Icon icon="LocationIcon" color="blue" />
-              <Typography
-                content={address}
-                extraClass={classNames({ [styles.address]: isTypeEdit })}
-              />
-              {isTypeEdit && (
-                <EditButton
-                  extClassName={styles.edit_button}
-                  label="Изменить адрес"
-                  onClick={() => handleEditButton('coordinates')}
-                />
-              )}
-            </div>
-            <CategoriesBackground
-              theme="primary"
-              size={categorySize}
-              content={category.title}
-              extClassName={styles.categories}
+          )}
+        </div>
+
+        <div className={styles.content__item_wrapper}>
+          <div className={styles.addressOutput}>
+            <Icon icon="LocationIcon" color="blue" />
+            <Typography variant={'paragraphResize'} content={address} />
+          </div>
+          {isTypeEdit && (
+            <EditButton
+              label="Изменить адрес"
+              onClick={() => handleEditButton('coordinates')}
             />
-            <Typography
-              color={'darkGray'}
-              extraClass={classNames(styles.descriptionForTask, {
-                [styles.expanded]: isExpanded,
-              })}
-              ref={textRef}
-              content={description}
+          )}
+        </div>
+
+        <div className={styles.content__item_description}>
+          <CategoriesBackground
+            theme="primary"
+            size={categorySize}
+            content={category.title}
+            extClassName={styles.category}
+          />
+          <Typography
+            color={'darkGray'}
+            extraClass={classNames(styles.descriptionForTask, {
+              [styles.expanded]: isExpanded,
+            })}
+            ref={textRef}
+            content={description}
+          />
+          {isTruncated && (
+            <button
+              onClick={toggleIsShowingMore}
+              className={styles.readMoreButton}
+            >
+              {isExpanded ? 'Скрыть' : 'Читать'}
+            </button>
+          )}
+          {isTypeEdit && (
+            <EditButton
+              label="Изменить задание"
+              onClick={() => handleEditButton('description')}
+              extClassName={styles.editButton}
             />
-            {isTruncated && (
-              <button
-                onClick={toggleIsShowingMore}
-                className={styles.readMoreButton}
-              >
-                {isExpanded ? 'Скрыть' : 'Читать'}
-              </button>
-            )}
-            {isTypeEdit && (
-              <EditButton
-                extClassName={styles.edit_button}
-                label="Изменить задание"
-                onClick={() => handleEditButton('description')}
-              />
-            )}
-          </>
-        )}
+          )}
+        </div>
       </div>
       <div className={styles.buttonsWrapper}>
-        {!isTypeEdit && (
-          <Button
-            buttonType="secondary"
-            label="Вернуться"
-            onClick={handlePreviousStepClick}
-            extClassName={styles.prevButton}
-          />
-        )}
+        <Button
+          buttonType="secondary"
+          label="Вернуться"
+          onClick={handleClosePopup}
+        />
         <Button
           buttonType="primary"
           label="Опубликовать"
diff --git a/src/features/create-request/ui/steps/index.tsx b/src/features/create-request/ui/steps/index.tsx
index a1e08fd0..cfe02f6e 100644
--- a/src/features/create-request/ui/steps/index.tsx
+++ b/src/features/create-request/ui/steps/index.tsx
@@ -110,7 +110,9 @@ export const Request = ({ isMobile = true }: RequestProps) => {
           phoneNumber={data.phone}
           handleCloseClick={() => setIsOpen(true)}
           isMobile={isMobile}
-          extClassName={isMobile ? styles.mainPopUpWrapperMobile : undefined}
+          extClassName={
+            isMobile ? styles.mainPopUpWrapperMobile : styles.mainPopUpWrapper
+          }
         >
           {isOpen && (
             <div className={styles.tooltipOverlay}>
diff --git a/src/features/create-request/ui/steps/styles.module.css b/src/features/create-request/ui/steps/styles.module.css
index 0e6a4e26..c80fe11f 100644
--- a/src/features/create-request/ui/steps/styles.module.css
+++ b/src/features/create-request/ui/steps/styles.module.css
@@ -8,6 +8,11 @@
   height: auto;
   width: 300px;
   min-height: 600px;
+  padding: 30px 15px 45px 15px;
+}
+
+.mainPopUpWrapper {
+  padding: 20px 30px 45px 30px;
 }
 
 .mainPopupOuterDiv {
diff --git a/src/shared/ui/typography/styles.module.css b/src/shared/ui/typography/styles.module.css
index 2c4f9c0b..124200be 100644
--- a/src/shared/ui/typography/styles.module.css
+++ b/src/shared/ui/typography/styles.module.css
@@ -125,7 +125,7 @@
   line-height: var(--line-height-small); /* 16.8px */
 }
 
-@media screen and (max-width: 920px) {
+@media screen and (max-width: 735px) {
   .servicesText {
     font-size: 8px;
     line-height: 9.6px;