diff --git a/frontend-37/src/assets/info.svg b/frontend-37/src/assets/info.svg
new file mode 100644
index 00000000..8b754a9f
--- /dev/null
+++ b/frontend-37/src/assets/info.svg
@@ -0,0 +1,5 @@
+<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="9.75" cy="9" r="8.25" stroke="#C1C1C1" stroke-width="1.5"/>
+<path d="M10.3644 6.73239C10.3644 7.07175 10.0893 7.34686 9.74997 7.34686C9.4106 7.34686 9.1355 7.07175 9.1355 6.73239C9.1355 6.39303 9.4106 6.11792 9.74997 6.11792C10.0893 6.11792 10.3644 6.39303 10.3644 6.73239Z" fill="#C1C1C1" stroke="#C1C1C1"/>
+<path d="M9.75 13.0657V8.5791" stroke="#C1C1C1" stroke-width="2"/>
+</svg>
diff --git a/frontend-37/src/assets/inputBgMongo.png b/frontend-37/src/assets/inputBgMongo.png
new file mode 100644
index 00000000..52846ead
Binary files /dev/null and b/frontend-37/src/assets/inputBgMongo.png differ
diff --git a/frontend-37/src/assets/inputBgPGSQL.png b/frontend-37/src/assets/inputBgPGSQL.png
new file mode 100644
index 00000000..7632992f
Binary files /dev/null and b/frontend-37/src/assets/inputBgPGSQL.png differ
diff --git a/frontend-37/src/assets/run.svg b/frontend-37/src/assets/run.svg
new file mode 100644
index 00000000..ee88ffcf
--- /dev/null
+++ b/frontend-37/src/assets/run.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="16" viewBox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.7074 7.79529L1.25877 0.481237C0.728548 0.110081 0 0.489404 0 1.13662V14.8636C0 15.5108 0.728549 15.8901 1.25877 15.519L11.7074 8.20491C11.8496 8.10538 11.8496 7.89482 11.7074 7.79529Z" fill="white"/>
+</svg>
diff --git a/frontend-37/src/features/playground/TopBar.tsx b/frontend-37/src/features/playground/TopBar.tsx
index 7d0851bc..c791e6b3 100644
--- a/frontend-37/src/features/playground/TopBar.tsx
+++ b/frontend-37/src/features/playground/TopBar.tsx
@@ -2,31 +2,33 @@ import saveImg from "@/assets/save.svg";
 import uploadImg from "@/assets/upload.svg";
 import { templateStore } from "@/shared/store/templateStore";
 import { Button } from "@/shared/ui/Button";
-import { ModalWindow } from "@/shared/ui/ModalWindow";
 import { TopBar } from "@/shared/ui/TopBar";
 import { TopBarElement } from "@/shared/ui/TopBarElement";
 import { useState } from "react";
 import styles from "./TopBar.module.css";
 import { TemplateChoice } from "../template-choice";
-import { Upload } from "./Upload";
 
-export function PlaygroundTopBar() {
+interface PlaygroundTopBarProps {
+  handleUpload: () => void;
+  handleSave: () => void;
+}
+
+export function PlaygroundTopBar({
+  handleUpload,
+  handleSave,
+}: PlaygroundTopBarProps) {
   const { template } = templateStore();
-  const [showUpload, setShowUpload] = useState(false);
   const [showTemplateChoice, setShowTemplateChoice] = useState(false);
 
   return (
     <TopBar className={styles.topbar} contentClassName={styles.topbarContent}>
       <TopBarElement>
-        <Button
-          className={styles.saveButton}
-          onClick={() => setShowUpload(true)}
-        >
+        <Button className={styles.saveButton} onClick={handleUpload}>
           <img src={uploadImg} alt="Upload"></img>
         </Button>
       </TopBarElement>
       <TopBarElement>
-        <Button className={styles.saveButton}>
+        <Button className={styles.saveButton} onClick={handleSave}>
           <img src={saveImg} alt="Save"></img>
         </Button>
       </TopBarElement>
@@ -38,9 +40,6 @@ export function PlaygroundTopBar() {
           {template}
         </Button>
       </TopBarElement>
-      <ModalWindow isOpen={showUpload} setIsOpen={setShowUpload}>
-        <Upload onClose={() => setShowUpload(false)} />
-      </ModalWindow>
       <ModalWindow
         isOpen={showTemplateChoice}
         setIsOpen={setShowTemplateChoice}
diff --git a/frontend-37/src/features/playground/Upload.module.css b/frontend-37/src/features/playground/Upload.module.css
new file mode 100644
index 00000000..8fc3fd16
--- /dev/null
+++ b/frontend-37/src/features/playground/Upload.module.css
@@ -0,0 +1,23 @@
+.container {
+  width: 416px;
+  height: 243px;
+
+  background-color: white;
+
+  display: flex;
+  flex-direction: column;
+
+  border-radius: 5px;
+}
+
+.titleContainer {
+  background-color: rgba(193, 193, 193, 0.25);
+  padding: 5px;
+
+  box-shadow: inset 0 -1px 0 #c1c1c1;
+}
+
+.title {
+  font-size: 16px;
+  text-align: center;
+}
diff --git a/frontend-37/src/features/playground/Upload.tsx b/frontend-37/src/features/playground/Upload.tsx
index 797e6e3b..4dc1981b 100644
--- a/frontend-37/src/features/playground/Upload.tsx
+++ b/frontend-37/src/features/playground/Upload.tsx
@@ -1,4 +1,5 @@
 import { Button } from "@/shared/ui/Button";
+import styles from "./Upload.module.css";
 import { schemasStore } from "./schemasStore";
 
 export function Upload() {
@@ -7,8 +8,10 @@ export function Upload() {
   const onClick = () => {};
 
   return (
-    <div style={{ marginBottom: 20 }}>
-      <div>Upload data from CSV</div>
+    <div className={styles.container}>
+      <div className={styles.titleContainer}>
+        <div className={styles.title}>Upload data from CSV</div>
+      </div>
       <div>
         <input type="file" />
         <select>
diff --git a/frontend-37/src/features/playground/index.tsx b/frontend-37/src/features/playground/index.tsx
index 5f71b894..360ef899 100644
--- a/frontend-37/src/features/playground/index.tsx
+++ b/frontend-37/src/features/playground/index.tsx
@@ -1,9 +1,12 @@
+import { ModalWindow } from "@/shared/ui/ModalWindow";
+import { DBType } from "@/types/DBType";
 import { useEffect, useState } from "react";
 import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 import styles from "./Playground.module.css";
 import { API_URL } from "../../config/env";
 import { templateStore } from "../../shared/store/templateStore";
 import { PlaygroundTopBar } from "./TopBar";
+import { Upload } from "./Upload";
 import { QueryInput } from "./query-input";
 import { QueryResultList } from "./query-result-list";
 import { SchemaPanel } from "./schema-panel";
@@ -13,8 +16,9 @@ import { schemasStore } from "./schemasStore";
 export function Playground() {
   const session_id = localStorage.getItem("session_id");
   const { updateSchemas } = schemasStore();
-  const [templateType, setTemplateType] = useState("");
+  const [templateType, setTemplateType] = useState("" as DBType);
   const { updateTemplate } = templateStore();
+  const [showUpload, setShowUpload] = useState(false);
 
   useEffect(() => {
     const run = async () => {
@@ -35,7 +39,7 @@ export function Playground() {
       const res3 = await fetch(`${API_URL}/template/${json2.template}`);
       const json3 = await res3.json();
       updateTemplate(json3.name);
-      setTemplateType(json3.type);
+      setTemplateType(json3.type as DBType);
     };
     run();
   }, []);
@@ -44,9 +48,12 @@ export function Playground() {
     <>
       {templateType == "PSQL" ? (
         <div className={styles.pageContainer}>
-          <PlaygroundTopBar />
+          <PlaygroundTopBar
+            handleUpload={() => setShowUpload(true)}
+            handleSave={() => {}}
+          />
 
-          <div className={`mono ${styles.contentContainer}`}>
+          <div className={`fira ${styles.contentContainer}`}>
             <PanelGroup
               direction="vertical"
               style={{
@@ -62,7 +69,7 @@ export function Playground() {
                   }}
                 >
                   <Panel className={styles.topContentPanel}>
-                    <QueryInput />
+                    <QueryInput templateType={templateType} />
                   </Panel>
 
                   <PanelResizeHandle className={styles.verticalResizeHandle} />
@@ -84,12 +91,15 @@ export function Playground() {
       ) : (
         <div className={styles.pageContainer}>
           <div>
-            <PlaygroundTopBar />
+            <PlaygroundTopBar
+              handleUpload={() => setShowUpload(true)}
+              handleSave={() => {}}
+            />
             <div className={styles.mongoSchemaWrapper}>
               <MongoSchema />
             </div>
           </div>
-          <div className={`mono ${styles.contentContainer}`}>
+          <div className={`fira ${styles.contentContainer}`}>
             <PanelGroup
               direction="horizontal"
               style={{
@@ -98,7 +108,7 @@ export function Playground() {
               }}
             >
               <Panel className={styles.topContentPanel}>
-                <QueryInput />
+                <QueryInput templateType={templateType} />
               </Panel>
 
               <PanelResizeHandle className={styles.verticalResizeHandle} />
@@ -110,6 +120,10 @@ export function Playground() {
           </div>
         </div>
       )}
+
+      <ModalWindow isOpen={showUpload} setIsOpen={setShowUpload}>
+        <Upload />
+      </ModalWindow>
     </>
   );
 }
diff --git a/frontend-37/src/features/playground/query-input/HelpButton.module.css b/frontend-37/src/features/playground/query-input/HelpButton.module.css
new file mode 100644
index 00000000..91f4a482
--- /dev/null
+++ b/frontend-37/src/features/playground/query-input/HelpButton.module.css
@@ -0,0 +1,38 @@
+.button {
+  width: 76.5px;
+  height: 40px;
+  border-radius: 5px;
+  border: none;
+  border: 1px solid #c1c1c1;
+  background-color: white;
+  padding-top: 10px;
+  padding-right: 10px;
+  padding-bottom: 10px;
+  padding-left: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  z-index: 2;
+
+  font-family: "Onest", sans-serif;
+  font-size: inherit !important;
+}
+
+.button:hover {
+  cursor: pointer;
+}
+
+.button img {
+  width: 16.5px;
+  height: 16.5px;
+  padding-left: 8px;
+}
+
+.button p {
+  width: 37px;
+  height: 20px;
+  margin: auto;
+
+  color: #666666;
+}
diff --git a/frontend-37/src/features/playground/query-input/HelpButton.tsx b/frontend-37/src/features/playground/query-input/HelpButton.tsx
new file mode 100644
index 00000000..bab3676b
--- /dev/null
+++ b/frontend-37/src/features/playground/query-input/HelpButton.tsx
@@ -0,0 +1,17 @@
+import infoImg from "@/assets/info.svg";
+import styles from "./HelpButton.module.css";
+
+interface HelpButtonProps {
+  handleClick: () => void;
+}
+
+export function HelpButton({ handleClick }: HelpButtonProps) {
+  return (
+    <>
+      <button className={styles.button} onClick={handleClick}>
+        <p>help</p>
+        <img src={infoImg} />
+      </button>
+    </>
+  );
+}
diff --git a/frontend-37/src/features/playground/query-input/QueryInput.module.css b/frontend-37/src/features/playground/query-input/QueryInput.module.css
index b2609139..291c16c8 100644
--- a/frontend-37/src/features/playground/query-input/QueryInput.module.css
+++ b/frontend-37/src/features/playground/query-input/QueryInput.module.css
@@ -7,6 +7,13 @@
   height: 100%;
 
   position: relative;
+
+  font-size: 16px;
+  font-weight: 400;
+
+  line-height: 19px;
+
+  background-color: white;
 }
 
 .wrapper {
@@ -30,7 +37,7 @@
   flex-direction: column;
 
   flex-basis: 42px;
-  color: #d4d4d4;
+  color: #c1c1c1;
   margin-top: 10px;
 
   max-height: 100%;
@@ -41,11 +48,12 @@
   overflow: hidden;
 
   user-select: none;
+
+  background: transparent;
 }
 
 .rowcounter div {
   text-align: right;
-  line-height: 25px;
 }
 
 .textarea {
@@ -56,7 +64,7 @@
   font-family: inherit;
   font-size: inherit;
   font-weight: inherit;
-  line-height: inherit;
+  line-height: inherit !important;
   color: inherit;
 
   /* Ensure it grows and scrolls correctly */
@@ -77,8 +85,42 @@
   z-index: 1;
 
   scrollbar-width: thin;
+
+  color: #1f1f1f;
+
+  background: transparent;
 }
 
 .textarea::selection {
-  background-color: #dedeff;
+  background-color: rgba(169, 169, 255, 0.3);
+}
+
+.bgImg {
+  width: 100%;
+  height: 100%;
+}
+
+.bgMongo {
+  position: absolute;
+  top: 148px;
+  width: 410px;
+  height: 704px;
+}
+
+.bgPSQL {
+  position: absolute;
+  top: 49;
+  width: 736px;
+  height: 862px;
+}
+
+.buttonsWrapper {
+  position: absolute;
+  right: 15px;
+  bottom: 15px;
+
+  display: flex;
+  flex-direction: row;
+
+  gap: 10px;
 }
diff --git a/frontend-37/src/features/playground/query-input/RunButton.module.css b/frontend-37/src/features/playground/query-input/RunButton.module.css
index d9b32639..43b27e2a 100644
--- a/frontend-37/src/features/playground/query-input/RunButton.module.css
+++ b/frontend-37/src/features/playground/query-input/RunButton.module.css
@@ -1,22 +1,21 @@
 .button {
-  width: 111px;
-  height: 53px;
-  border-radius: 10px;
-  border: 1px solid #c1c1c1;
-  background-color: white;
-  padding-top: 6px;
-  padding-right: 9px;
-  padding-bottom: 6px;
-  padding-left: 9px;
+  width: 87px;
+  height: 40px;
+  border-radius: 5px;
+  border: 1px transparent;
+  background-color: #a9a9ff;
+  padding-top: 10px;
+  padding-right: 15px;
+  padding-bottom: 10px;
+  padding-left: 15px;
   display: flex;
   justify-content: center;
   align-items: center;
 
-  position: absolute;
-  right: 10px;
-  bottom: 10px;
-
   z-index: 2;
+
+  font-family: "Onest", sans-serif;
+  font-size: inherit !important;
 }
 
 .button:hover {
@@ -24,14 +23,15 @@
 }
 
 .button img {
-  width: 36px;
-  height: 36px;
-  padding-left: 5px;
+  width: 12px;
+  height: 16px;
+  padding-left: 8px;
 }
 
 .button p {
-  font-size: 24px;
   width: 52px;
   height: 28px;
-  margin-bottom: 32px;
+  margin: auto;
+
+  color: white;
 }
diff --git a/frontend-37/src/features/playground/query-input/RunButton.tsx b/frontend-37/src/features/playground/query-input/RunButton.tsx
index f3a7de4a..da4e14a5 100644
--- a/frontend-37/src/features/playground/query-input/RunButton.tsx
+++ b/frontend-37/src/features/playground/query-input/RunButton.tsx
@@ -1,4 +1,4 @@
-import triangleJpg from "@/assets/triangle.jpg";
+import runImg from "@/assets/run.svg";
 import styles from "./RunButton.module.css";
 
 interface RunButtonProps {
@@ -9,8 +9,8 @@ export function RunButton({ handleClick }: RunButtonProps) {
   return (
     <>
       <button className={styles.button} onClick={handleClick}>
-        <img src={triangleJpg} />
-        <p>run</p>
+        <p>send</p>
+        <img src={runImg} />
       </button>
     </>
   );
diff --git a/frontend-37/src/features/playground/query-input/index.tsx b/frontend-37/src/features/playground/query-input/index.tsx
index 8e733660..18f98136 100644
--- a/frontend-37/src/features/playground/query-input/index.tsx
+++ b/frontend-37/src/features/playground/query-input/index.tsx
@@ -1,9 +1,13 @@
+import mongoImg from "@/assets/inputBgMongo.png";
+import psqlImg from "@/assets/inputBgPGSQL.png";
 import { API_URL } from "@/config/env";
+import { DBType } from "@/types/DBType";
 import { useRef, useState, useEffect } from "react";
 import styles from "./QueryInput.module.css";
 import { queryResultsStore } from "../queryResultsStore";
 import { schemasStore } from "../schemasStore";
 import { QueryResult, DBSchema } from "../types";
+import { HelpButton } from "./HelpButton";
 import { RunButton } from "./RunButton";
 
 export interface QueryResultsResponse {
@@ -15,7 +19,11 @@ export interface QueryResultsResponse {
   };
 }
 
-export function QueryInput() {
+interface QueryInputProps {
+  templateType: DBType;
+}
+
+export function QueryInput({ templateType }: QueryInputProps) {
   const textareaRef = useRef<HTMLTextAreaElement | null>(null);
   const numbersColumnRef = useRef<HTMLDivElement | null>(null);
   const containerRef = useRef<HTMLDivElement | null>(null);
@@ -90,11 +98,18 @@ export function QueryInput() {
 
   return (
     <div className={styles.container} ref={containerRef}>
+      <div className={styles.bgMongo} hidden={templateType != "MGDB"}>
+        <img className={styles.bgImg} src={mongoImg}></img>
+      </div>
+      <div className={styles.bgPSQL} hidden={templateType != "PSQL"}>
+        <img className={styles.bgImg} src={psqlImg}></img>
+      </div>
       <div className={styles.wrapper}>
         <div className={styles.rowcounter} ref={numbersColumnRef}>
           {getNumberRows()}
         </div>
         <textarea
+          spellCheck={false}
           className={styles.textarea}
           onChange={(e) => {
             const rows = e.target.value.split("\n");
@@ -172,7 +187,10 @@ export function QueryInput() {
           ref={textareaRef}
         ></textarea>
       </div>
-      <RunButton handleClick={onRunClicked} />
+      <div className={styles.buttonsWrapper}>
+        <HelpButton handleClick={() => {}} />
+        <RunButton handleClick={onRunClicked} />
+      </div>
     </div>
   );
 }