diff --git a/static/css/reflections.css b/static/css/reflections.css
index 666ca33..f58af07 100644
--- a/static/css/reflections.css
+++ b/static/css/reflections.css
@@ -165,12 +165,47 @@ button {
   align-items: center;
 }
 
+.ref-action-btn{
+  display:inline-flex;
+  align-items:center;
+  gap:8px;
+  padding:10px 16px;
+  border-radius:999px;
+  border:1px solid var(--blue-10);
+  background:#fff;
+  font-size:14px;
+  cursor:pointer;
+  text-decoration:none;
+}
+
+.ref-action-primary{
+  background:#5b6ee1;
+  color:#fff;
+  border:0;
+}
+
+.ref-action-icon{
+  width:18px;
+  height:18px;
+  object-fit:contain;
+}
+
+.ref-filters-actions{
+  display: flex;            /* 핵심 */
+  align-items: center;
+  gap: 12px;
+  flex: 1;                  /* 오른쪽 끝까지 영역 확장 */
+  min-width: 0;
+  flex-wrap: nowrap;
+}
+
 .ref-writebtn {
   margin-left: auto;
   text-decoration: none;
   text-align: center;
   border-radius: 999px;
-  width: 15%;
+  width: auto;
+  white-space: nowrap;  /* 글씨 줄바꿈 방지 */
   padding: 10px 30px;
   font-size: 14px;
   font-weight: 600;
@@ -211,6 +246,26 @@ button {
 .bookmark-filter-btn.is-active .bookmark-icon { color:  var(--blue-40);
 }
 
+/* @media (max-width: 768px){
+
+  .ref-action-btn{
+    width:42px;
+    height:42px;
+    padding:0;
+    justify-content:center;
+    border-radius:50%;
+  }
+
+  .ref-action-txt{
+    display:none;
+  }
+
+  .ref-action-icon{
+    width:20px;
+    height:20px;
+  }
+} */
+
 /* =========================
    List / Card (피그마처럼 넓고 둥글고, 테두리+은은한 그림자)
 ========================= */
@@ -1208,10 +1263,6 @@ button.ref-btn{
   .ref-list {
     max-width: 85%;
   }
-
-  .ref-writebtn {
-    width: 18%;
-  }
 }
 
 /* ===== 태블릿 (768px ~ 1023px) ===== */
@@ -1240,17 +1291,16 @@ button.ref-btn{
   }
 
   .ref-selectbox {
-    font-size: 13px;
+    font-size: 14px;
     padding: 9px 40px 9px 16px;
   }
 
   .bookmark-filter-btn {
-    padding: 9px 40px 9px 16px;
+    padding: 9px 18px 9px 16px;
     font-size: 13px;
   }
 
   .ref-writebtn {
-    width: 20%;
     padding: 9px 20px;
     font-size: 13px;
   }
@@ -1290,36 +1340,81 @@ button.ref-btn{
     font-size: 12px;
   }
 
-  /* 필터 영역 2줄 배치 */
-  .ref-filters {
-    flex-wrap: wrap;
-    gap: 10px 8px;
+  /* 1) 필터 한 줄 + 2영역(셀렉트 / 액션) */
+  .ref-filters{
+    display:flex;
+    flex-wrap: nowrap;
+    align-items:center;
+    gap: 10px;
   }
 
-  /* 위 줄: 정렬 / 역할 */
-  .ref-select-container {
-    flex: 0 0 calc(50% - 4px);
+  /* 2) 셀렉트 2개가 남은 영역 1:1 */
+  .ref-filters-selects{
+    flex: 1;
+    display:flex;
+    gap: 8px;
     min-width: 0;
   }
-
-  .ref-selectbox {
+  .ref-filters-selects .ref-select-container{
+    flex: 1;
+    min-width: 0;
+  }
+  .ref-filters-selects .ref-selectbox{
     width: 100%;
     min-width: 0;
-    font-size: 12px;
-    padding: 9px 36px 9px 14px;
   }
 
-  .ref-selectchev {
-    right: 10px;
+  /* 3) 오른쪽 원형 2개 고정 */
+  .ref-filters-actions{
+    /* margin-left: auto; */
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex: 0 0 auto;
+  }
+
+  /* 4) 북마크/글쓰기: 원형 버튼으로 강제(기존 pill/width/flex 전부 씹어먹음) */
+  .ref-filters-actions .bookmark-filter-btn,
+  .ref-filters-actions .ref-writebtn{
+    box-sizing: border-box;
+    width: 40px;
+    height: 40px;
+    min-width: 40px;
+    min-height: 40px;
+    padding: 0 !important;
+    border-radius: 50%;
+    display: inline-flex !important;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+    flex: 0 0 40px !important;
+    white-space: nowrap;
   }
 
-  /* 아래 줄: 북마크 / 글쓰기 */
-  .bookmark-filter-btn {
-    flex: 0 0 calc(50% - 4px);
-    justify-content: center;
-    padding: 9px 14px;
-    font-size: 12px;
-    gap: 4px;
+  /* 5) 모바일에서는 텍스트 숨김 */
+  .ref-filters-actions .ref-action-txt{
+    display:none !important;
+  }
+
+  /* 6) 아이콘 정렬/크기 고정 (svg/img baseline 제거) */
+  .ref-filters-actions .ref-action-icon{
+    width: 20px;
+    height: 20px;
+    display:block;
+    object-fit: contain;
+  }
+
+  /* 7) 글쓰기 버튼 색 유지 */
+  .ref-filters-actions .ref-writebtn{
+    background: var(--blue-40);
+    border: 0;
+    color: #fff;
+    text-decoration:none;
+  }
+
+
+  .ref-selectchev {
+    right: 10px;
   }
 
   .bookmark-filter-btn .bookmark-icon {
@@ -1327,13 +1422,6 @@ button.ref-btn{
     height: 14px;
   }
 
-  .ref-writebtn {
-    flex: 0 0 calc(50% - 4px);
-    width: auto;
-    padding: 9px 14px;
-    font-size: 12px;
-  }
-
   /* 카드 레이아웃 */
   .note-card {
     flex-direction: column;
@@ -1428,7 +1516,7 @@ button.ref-btn{
   }
 
   .ref-selectbox {
-    font-size: 11px;
+    font-size: 12px;
     padding: 8px 32px 8px 12px;
   }
 
diff --git a/templates/reflections/note_list.html b/templates/reflections/note_list.html
index 68b909b..7361a0b 100644
--- a/templates/reflections/note_list.html
+++ b/templates/reflections/note_list.html
@@ -14,6 +14,7 @@
   {# 상단 컨트롤 영역 #}
   <section class="ref-controls">
     <form class="ref-search" method="get" action="">
+      
       <div class="ref-searchbar">
         <span class="ref-searchicon" aria-hidden="true">
           <!-- 돋보기 아이콘 -->
@@ -30,50 +31,62 @@
       </div>
 
       <div class="ref-filters">
-        <div class="ref-select-container">
-          <select name="sort" class="ref-selectbox" data-auto-submit>
-            <option value="new"   {% if sort == "new" %}selected{% endif %}>최신순</option>
-            <option value="old"   {% if sort == "old" %}selected{% endif %}>오래된순</option>
-            <option value="title" {% if sort == "title" %}selected{% endif %}>제목순</option>
-          </select>
-          <span class="ref-selectchev" aria-hidden="true">
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
-              <path d="M7 10l5 5 5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-            </svg>
-          </span>
+        <!-- 정렬 -->
+        <div class="ref-filters-selects">
+          <div class="ref-select-container">
+            <select name="sort" class="ref-selectbox" data-auto-submit>
+              <option value="new"   {% if sort == "new" %}selected{% endif %}>최신순</option>
+              <option value="old"   {% if sort == "old" %}selected{% endif %}>오래된순</option>
+              <option value="title" {% if sort == "title" %}selected{% endif %}>제목순</option>
+            </select>
+            <span class="ref-selectchev" aria-hidden="true">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
+                <path d="M7 10l5 5 5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+            </span>
+          </div>
+          <!-- 스택 필터 -->
+          <div class="ref-select-container">
+            <select name="roles" class="ref-selectbox" data-auto-submit>
+              <option value="" {% if not role %}selected{% endif %}>전체</option>
+              <option value="PM" {% if "PM" == role %}selected{% endif %}>기획</option>
+              <option value="FRONTEND" {% if "FRONTEND" == role %}selected{% endif %}>프론트엔드</option>
+              <option value="BACKEND" {% if "BACKEND" == role %}selected{% endif %}>백엔드</option>
+              <option value="none" {% if "none" == role %}selected{% endif %}>개인 회고</option>
+            </select>
+            <span class="ref-selectchev" aria-hidden="true">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
+                <path d="M7 10l5 5 5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+            </span>
+          </div>
         </div>
-
-        <div class="ref-select-container">
-          <select name="roles" class="ref-selectbox" data-auto-submit>
-            <option value="" {% if not role %}selected{% endif %}>전체</option>
-            <option value="PM" {% if "PM" == role %}selected{% endif %}>기획</option>
-            <option value="FRONTEND" {% if "FRONTEND" == role %}selected{% endif %}>프론트엔드</option>
-            <option value="BACKEND" {% if "BACKEND" == role %}selected{% endif %}>백엔드</option>
-            <option value="none" {% if "none" == role %}selected{% endif %}>개인 회고</option>
-          </select>
-          <span class="ref-selectchev" aria-hidden="true">
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
-              <path d="M7 10l5 5 5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        <div class="ref-filters-actions">
+          <!-- 북마크 필터 버튼 -->
+          <button
+            type="button"
+            class="bookmark-filter-btn {% if bookmarked %}is-active{% endif %}"
+            data-bookmark-filter
+            aria-pressed="{% if bookmarked %}true{% else %}false{% endif %}"
+          >
+            <!-- 채워진 북마크 -->
+            <svg class="ref-action-icon bookmark-icon"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 16 16"
+                aria-hidden="true">
+              <path d="M2 2v13.5a.5.5 0 0 0 .74.439L8 13.069l5.26 2.87A.5.5 0 0 0 14 15.5V2a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2"/>
             </svg>
-          </span>
+            <span class="ref-action-txt">북마크</span>
+          </button>
+          
+          <!-- 글쓰기 버튼 -->
+          <a href="{% url 'reflections:note_create' %}" class="ref-writebtn">
+              <img src="{% static 'images/pencil_icon.png' %}"
+                class="ref-action-icon"
+                alt="">
+            <span class="ref-action-txt">글쓰기</span>
+          </a>
         </div>
-        <button
-          type="button"
-          class="bookmark-filter-btn {% if bookmarked %}is-active{% endif %}"
-          data-bookmark-filter
-          aria-pressed="{% if bookmarked %}true{% else %}false{% endif %}"
-        >
-          <!-- 채워진 북마크 -->
-          <svg class="bookmark-icon"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 16 16"
-              aria-hidden="true">
-            <path d="M2 2v13.5a.5.5 0 0 0 .74.439L8 13.069l5.26 2.87A.5.5 0 0 0 14 15.5V2a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2"/>
-          </svg>
-          <span>북마크</span>
-        </button>
-
-        <a href="{% url 'reflections:note_create' %}" class="ref-writebtn">글쓰기</a>
       </div>
     </form>
   </section>