diff --git a/static/css/style.css b/static/css/style.css
index ce60af9..af846f7 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -292,20 +292,20 @@ input {
 .clip-win.gif-clip {
     width: calc(100% - 2*8px - 3*5px);
     max-width: 720px;
-    /* max-height: 70%; */
+    padding-bottom: 3px;
 }
 
 .gif-clip .button {
     max-width: 120px;
     padding: 0.5rem;
-    margin: 0.5rem;
+    margin: 0.4rem;
     display: inline-flex;
 }
 
 .gif-clip > #gif_area {
     overflow-y: auto;
     max-height: 350px;
-    padding: 1rem;
+    width: 100%;
 }
 
 #dialog {
diff --git a/static/index.html b/static/index.html
index 958f309..1d61d51 100644
--- a/static/index.html
+++ b/static/index.html
@@ -197,13 +197,13 @@
 
     <!-- Gif Clip -->
     <div id="gif_clip" class="clip-win gif-clip is-hidden">
+        <div id="gif_area"></div>
         <div>
-            <input type="text" id="gif_search" placeholder="Search" style="width: calc(100% - 4rem); display: inline-flex;">
-            <a onclick="$('#gif_clip').addClass('is-hidden');" style="float: right; padding: 6px 6px;">
-                <img src="img/close.svg" alt="X" style="height: 1.8rem; width: auto; cursor: pointer; display:inline-flexbox;">
+            <input type="text" id="gif_search" placeholder="Search" style="width: calc(100% - 4rem); display: inline-flex; margin-top: 3px;">
+            <a onclick="$('#gif_clip').addClass('is-hidden');" style="float: right; margin-top: 12px; margin-right: 9px; vertical-align: middle; display:inline-flexbox;">
+                <img src="img/close.svg" alt="X" style="height: 1.8rem; width: auto; cursor: pointer;">
             </a>
         </div>
-        <div id="gif_area"></div>
     </div>
 
     <!-- vayakti -->