edit styles

src/app/styles/global-styles.scss

@@ -458,6 +458,86 @@
 	}
 }
 
+.dropdown-wrapper {
+	position: relative;
+	width: 100%;
+
+	.dropdown-button {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+
+		width: 100%;
+		padding: 8px 16px;
+
+		font-size: 14px;
+		font-weight: 500;
+		line-height: 1.25;
+
+		background-color: #ffffff;
+		border: 2px solid #e2e8f0;
+		border-radius: 12px;
+
+		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+
+		transition: background-color 0.2s ease-in-out;
+
+		&:hover {
+			background-color: #f9fafb;
+		}
+
+		&:focus {
+			outline: none;
+			box-shadow: 0 0 0 2px rgba(99, 101, 241, 0.53);
+			outline: 2px solid transparent;
+			outline-offset: 2px;
+		}
+	}
+
+	.dropdown-list {
+		position: absolute;
+		right: 0;
+		z-index: 10;
+		width: 100%;
+		margin-top: 8px;
+
+		transform-origin: top right;
+
+		background-color: #ffffff;
+		border: 2px solid #e2e8f0;
+		border-radius: 12px;
+
+		box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+			0 4px 6px -2px rgba(0, 0, 0, 0.05);
+
+		&:focus {
+			outline: none;
+		}
+	}
+
+	.dropdown-item {
+		display: flex;
+		align-items: center;
+
+		width: 100%;
+		padding: 8px 16px;
+
+		font-size: 14px;
+		text-align: left;
+
+		cursor: pointer;
+		user-select: none;
+
+		&:hover {
+			background-color: #dbeafe;
+		}
+
+		&.current {
+			font-weight: 700;
+		}
+	}
+}
+
 .yaPreloadingSuggestBlockContainer {
 	height: 52px !important;
 }

src/app/styles/pages-styles.scss

@@ -329,12 +329,23 @@
 
 	.drag-drop-zone {
 		border: 3px dashed v.$p-color;
-		border-radius: 15px;
-		padding: 40px 20px;
+		border-radius: .75rem;
+		padding: 2rem;
 		text-align: center;
 		background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
 		margin-bottom: 20px;
-		transition: all 0.3s ease;
+		transition: all .2s ease-in-out;
+
+		&.dragging {
+			border-color: #3b82f6;
+			background-color: #eff6ff;
+		}
+
+		&:hover {
+			border-color: #764ba2;
+			background: linear-gradient(135deg, #e0f2fe, #ddd6fe);
+			transform: scale(1.01);
+		}
 
 		.icon {
 			width: 70px;
@@ -352,12 +363,13 @@
 		.description {
 			color: v.$text-s;
 			margin-bottom: 5px;
-			text-align: start;
+			text-align: center;
 		}
 
 		.btn-primary {
 			background: v.$p-color;
-			margin-bottom: 40px;
+			margin-bottom: 10px;
+			margin-top: 20px;
 		}
 	}
 
@@ -529,8 +541,10 @@
 				padding-right: 0.5rem;
 				padding-top: 0.25rem;
 				padding-bottom: 0.25rem;
-				border: 1px solid;
-				border-radius: 0.375rem;
+				border: 2px solid #e2e8f0;
+				border-radius: 10px;
+				box-shadow: 0 1px 2px #0000000d;
+				/*  */
 
 				&:hover {
 					background-color: v.$bg-light;
@@ -548,12 +562,12 @@
 				gap: 0.25rem;
 
 				button {
-					border: 1px solid v.$p-color;
+					border: 2px solid v.$p-color;
 					padding-left: 0.75rem;
 					padding-right: 0.75rem;
 					padding-top: 0.25rem;
 					padding-bottom: 0.25rem;
-					border-radius: 0.375rem;
+					border-radius: 10px;
 
 					&.current {
 						background-color: v.$p-color;