diff --git a/src/main/resources/static/css/custom.css b/src/main/resources/static/css/custom.css
index c3d2941..a170960 100644
--- a/src/main/resources/static/css/custom.css
+++ b/src/main/resources/static/css/custom.css
@@ -1,8 +1,10 @@
 /* 이 파일은 커스텀 파일입니다*/
 body {
-    font-family: 'NotoSansKR', sans-serif !important;
+    font-family: 'NanumGothicCoding', sans-serif !important;
+    /*font-family: 'NotoSansKR', sans-serif !important;*/
     /*font-family: 'Nanum Gothic', sans-serif !important;*/
     /*font-family: 'NanumBarunGothic', sans-serif !important;*/
+
     font-weight: bold;
 }
 
@@ -1924,4 +1926,44 @@ footer div.foot_info span {
 
 .response_headers td{
     padding: 1px !important;
-}
\ No newline at end of file
+}
+.api_request_info {
+    display: flex;
+    flex-direction: row;
+    width: 100%; /* Makes the div take the full width of its parent */
+}
+
+.editableInput {
+    white-space: normal;
+    overflow: hidden;
+}
+
+.form-floating {
+    flex-grow: 0; /* This ensures that these elements do not grow and only take as much space as they need */
+}
+
+.form-floating.editableInput {
+    flex-grow: 1; /* This allows the editableInput to grow and take up remaining space */
+    display: flex; /* This will align the contenteditable div and the hidden input inside it */
+    max-width: calc(100vw - 840px);
+}
+
+.editableInputContent {
+    white-space: normal;
+    flex-grow: 1;
+    overflow: hidden; /* Add scrollbars when content overflows */
+    word-break: break-word; /* Breaks long words to prevent overflow */
+    /*max-width: 100%; !* Optional, depending on layout *!*/
+}
+
+.editableInputContent:focus {
+    white-space: nowrap;
+}
+
+.send, .save {
+    flex-grow: 0; /* Prevent buttons from growing */
+}
+
+.editableInput .variable {
+    color: red;
+}
diff --git a/src/main/resources/static/css/font.css b/src/main/resources/static/css/font.css
index 75926f4..5caeb88 100644
--- a/src/main/resources/static/css/font.css
+++ b/src/main/resources/static/css/font.css
@@ -1,4 +1,11 @@
 /* 폰트 시작*/
+@font-face {
+    font-family: 'NanumGothicCoding';
+    font-style: normal;
+    font-weight: 300;
+    local('NanumGothicCoding-Regular'),
+    url(/fonts/NanumGothicCoding-Regular.ttf) format('truetype');
+}
 @font-face {
     font-family: 'NotoSansKR';
     font-style: normal;
@@ -36,4 +43,4 @@
     url(/fonts/NotoSansKR-Medium.woff2) format('woff2'),
     url(/fonts/NotoSansKR-Medium.woff) format('woff'),
     url(/fonts/NotoSansKR-Medium.ttf) format('truetype');
-}
\ No newline at end of file
+}
diff --git a/src/main/resources/static/fonts/NanumGothicCoding-Regular.ttf b/src/main/resources/static/fonts/NanumGothicCoding-Regular.ttf
new file mode 100644
index 0000000..990066a
Binary files /dev/null and b/src/main/resources/static/fonts/NanumGothicCoding-Regular.ttf differ