diff --git a/src/main/resources/static/css/blog.css b/src/main/resources/static/css/blog.css
index 51c9bfe..cda216b 100644
--- a/src/main/resources/static/css/blog.css
+++ b/src/main/resources/static/css/blog.css
@@ -34,19 +34,19 @@
     line-height: 30px;
     width: 100%;
     padding: 0;
-    margin: 2px;
+    /*margin: 2px;*/
+    margin-top: 5px;
+    margin-bottom: 5px;
     align-content: center;
     top: 0;
     bottom: 0;
     color: white;
-    background: #40404564;
+    /*background: #40404564;*/
     position: relative;
-    outline-width: thin;
-    outline-color: #ec914b8f;
-    border-color: #ec914b8f;
-    border-style: groove;
-    border-width: 1px;
+    border: 1px solid #393b42;
     height: var(--ButtonHeight);
+    border-radius: 10px;
+    background: #00000044;
 }
 #title_field {
 font-size: 20px;
@@ -157,4 +157,10 @@ a.btn_layerClose:hover {
     overflow: hidden;
     overflow-y: hidden;
     overflow-x: hidden;
+}
+#editor {
+    border: 1px solid #393b42;
+    padding: 1px;
+    border-radius: 10px;
+    background: #00000044;
 }
\ No newline at end of file
diff --git a/src/main/resources/static/css/common.css b/src/main/resources/static/css/common.css
index 05b495c..2498fb5 100644
--- a/src/main/resources/static/css/common.css
+++ b/src/main/resources/static/css/common.css
@@ -8,9 +8,10 @@
 }
 
 html {
+    background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='46.5' height='46.5' patternTransform='scale(1) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='%23000000ff'/><path d='M27.31-2.917a5 5 0 010 5.834m-8.12 0a5 5 0 010-5.834m-4.827 7.501a10 10 0 010-9.169m17.774.001a10 10 0 010 9.169M10.181 7.36a15 15 0 01-.001-14.722m26.14 0a15 15 0 010 14.724m-9.01 36.22a5 5 0 010 5.835m-8.12 0a5 5 0 010-5.834m-4.827 7.501a10 10 0 010-9.169m17.774.001a10 10 0 010 9.169M10.181 53.86a15 15 0 01-.001-14.723m26.14 0a15 15 0 010 14.724m6.12-27.693a5 5 0 010-5.834m-4.827 7.5a10 10 0 010-9.169M33.431 30.61a15 15 0 01-.001-14.722M4.06 20.332a5 5 0 010 5.835m4.827-7.501a10 10 0 010 9.169m4.183-11.947a15 15 0 010 14.724'  stroke-linecap='square' stroke-width='1.5' stroke='%23c15d1ae3' fill='none'/><path d='M43.582 42.44a5 5 0 015.835 0m-7.501-4.827a10 10 0 019.169 0M39.138 33.43a15 15 0 0114.724 0m-56.781 9.01a5 5 0 015.836 0m-7.501-4.827a10 10 0 019.169 0M-7.362 33.43a15 15 0 0114.724 0M49.417 4.06a5 5 0 01-5.834 0m7.501 4.827a10 10 0 01-9.169 0m11.946 4.182a15 15 0 01-14.723.001M2.917 4.06a5 5 0 01-5.834 0m7.501 4.827a10 10 0 01-9.169 0M7.36 13.069a15 15 0 01-14.722.001m27.694 6.12a5 5 0 015.835 0m0 8.12a5 5 0 01-5.834 0m7.5 4.827a10 10 0 01-9.168 0m.001-17.774a10 10 0 019.169 0m2.776 21.956a15 15 0 01-14.723.001m0-26.14a15 15 0 0114.724 0'  stroke-linecap='square' stroke-width='1.5' stroke='%23ffffff72' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(-93,-93)' fill='url(%23a)'/></svg>");
     margin: 1vh 1vw;
-    background: var(--DEFAULT_LAYER_BACK);
 }
+
 #where{
     table-layout: fixed;
 }
@@ -22,8 +23,9 @@ body {
     user-select: none;
     -webkit-user-select: none;
     align-content: center;
+    background: var(--DEFAULT_LAYER_BACK);
     padding: 1vh 1vw;
-    background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='45' height='51.96' patternTransform='scale(2) rotate(20)'><rect x='0' y='0' width='100%' height='100%' fill='%23202025ff'/><path d='M52.48 44.47a15 15 0 01-14.96 0 15 15 0 00-7.48 12.96M7.48 44.42a15 15 0 01-14.96 0M15 57.44c0-5.35-2.9-10.35-7.52-13.02a15 15 0 017.48-12.97M7.48 18.5a14.97 14.97 0 01-14.98-.03m15.02-.03A15 15 0 0115 5.47a15 15 0 00-4.4-10.62m23.8.05A15 15 0 0030 5.53a15 15 0 017.48 12.96 14.9 14.9 0 0015.02-.03m-22.5 13a15.13 15.13 0 017.52 13.01m-7.56-39a15 15 0 01-14.96 0M7.48 18.5a15 15 0 017.48 12.96 15 15 0 0015.04 0 15 15 0 017.48-12.96'  stroke-width='3' stroke='%23ec914b8f' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(-38,-21.84)' fill='url(%23a)'/></svg>")
+    border-radius: 10px;
 }
 
 body > *{
@@ -43,7 +45,7 @@ body > *{
 
 header {
     top: 0;
-    background: var(--DEFAULT_LAYER_BACK);
+    /*background: var(--DEFAULT_LAYER_BACK);*/
     border-top: #ec914b8f;
     border-radius: 10px 30px;
     border-width: 1px;
@@ -114,8 +116,7 @@ h2 {
     position: relative;
     overflow-y: auto;
     overflow-x: clip;
-    height: 68vh;
-    max-height: 68vh;
+    height: 78vh;
     min-height: 8vh;
 }
 
@@ -132,7 +133,7 @@ footer {
     display: flex;
     bottom: 0;
     border-top: #ec914b8f;
-    background: var(--DEFAULT_LAYER_BACK);
+    /*background: var(--DEFAULT_LAYER_BACK);*/
     border-radius: 30px 10px;
     border-width: 1px;
     height: 5vh;
diff --git a/src/main/resources/static/js/blog.js b/src/main/resources/static/js/blog.js
index d6b2947..d6e95f1 100644
--- a/src/main/resources/static/js/blog.js
+++ b/src/main/resources/static/js/blog.js
@@ -60,5 +60,5 @@ function showPosition(position) {
     }
 
 
-    document.getElementById('location_field').value = "Lat: " + position.coords.latitude + ", Lon: " + position.coords.longitude;
+    document.getElementById('location_field').textContent = "Lat: " + position.coords.latitude + ", Lon: " + position.coords.longitude;
 }
\ No newline at end of file
diff --git a/src/main/resources/templates/content/blog/viewer.html b/src/main/resources/templates/content/blog/viewer.html
index 403dfb1..ca896f4 100644
--- a/src/main/resources/templates/content/blog/viewer.html
+++ b/src/main/resources/templates/content/blog/viewer.html
@@ -14,12 +14,16 @@
         let onChange = () => {console.log(editor.getMarkdown())}
         document.addEventListener("DOMContentLoaded", onLoaded);
         function onLoaded() {
-            baseData.title = urldecode([[${srcPost.title}]]);
-            baseData.content = urldecode([[${srcPost.content}]]);
-            var h = document.querySelector('#main_layer').getBoundingClientRect().height + 'px'
+            baseData.title = [[${srcPost.title}]];
+            baseData.content = [[${srcPost.content}]];
+            baseData.firstPostLon = [[${srcPost.firstPostLon}]];
+            baseData.firstPostLat = [[${srcPost.firstPostLat}]];
+            document.getElementById('location_field').textContent = "Lat: " + baseData.firstPostLat + ", Lon: " + baseData.firstPostLon;
+            $('#title_layer').text(baseData.title)
+            var h = document.querySelector('#main_layer').getBoundingClientRect().height * 0.7
             editor = new toastui.Editor({
                 el: document.querySelector('#editor'),
-                height: '500px',
+                height: h+ 'px',
                 width:'100%',
                 viewer: true,
                 usageStatistics : false,
@@ -27,21 +31,18 @@
                 theme:"dark",
             });
         }
-        function save() {
-            console.log(editor.getHTML())
-        }
     </script>
 </th:block>
 <th:block layout:fragment="content" id="content">
     <div id="main_layer">
-        <input id="title_layer" />
+        <label id="title_layer" class="write_option" ></label>
         <div id="editor" ></div>
-        <div id="hashtag_layer">
-            <select > </select>
-            <input id="hashtag"  />
-        </div>
-        <div id="controll_layer" >
-            <button onclick="save()">asdsad</button>
+        <div class="write_controllbox">
+            <div class="write_option btn-example" to="#popLayer1" onclick="openPopup(this)"  ></div>
+            <div style="width: 15px" ></div>
+            <div class="write_option btn-example" to="#popLayer2" onclick="openPopup(this)" id="hashtag_field"></div>
+            <div style="width: 15px" ></div>
+            <label class="write_option" readonly id="location_field"></label>
         </div>
     </div>
 </th:block>
diff --git a/src/main/resources/templates/content/blog/write.html b/src/main/resources/templates/content/blog/write.html
index 42835de..b721185 100644
--- a/src/main/resources/templates/content/blog/write.html
+++ b/src/main/resources/templates/content/blog/write.html
@@ -30,11 +30,7 @@
             console.log(style.getPropertyValue('--FooterHeight'))
             console.log(style.getPropertyValue('--TopHeight'))
             var editorHeght = (
-                document.querySelector('#main_layer').getBoundingClientRect().height -
-                (
-                    Number(style.getPropertyValue('--ButtonHegit').replace("px","") * 3)
-                    + Number(style.getPropertyValue('--TopHeight').replace("px",""))
-                )
+                document.querySelector('#main_layer').getBoundingClientRect().height * 0.7
             )
 
             editor = new toastui.Editor({
@@ -115,8 +111,10 @@
             <div class="write_controllbox">
 
                 <div class="write_option btn-example" to="#popLayer1" onclick="openPopup(this)"  ></div>
+                <div style="width: 15px" ></div>
                 <div class="write_option btn-example" to="#popLayer2" onclick="openPopup(this)" id="hashtag_field"></div>
-                <label for="location_field"></label><input class="write_option" readonly id="location_field"/>
+                <div style="width: 15px" ></div>
+                <label class="write_option" readonly id="location_field"></label>
             </div>
             <h1><button id="save" class="write_option" style="width: 100%; position: relative"  onclick="save()">저장하셈</button></h1>
         </th:block>