1 files changed, 53 insertions, 2 deletions
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
index b50a93775..2b07c4efb 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
@@ -92,14 +92,65 @@
     }
 }
 
+.resizable {
+    background: rgba(0, 0, 0, 0.2);
+    width: 100px;
+    height: 100px;
+    position: absolute;
+    top: 100px;
+    left: 100px;
+
+    .resizers {
+        width: 100%;
+        height: 100%;
+        border: 3px solid #69a6db;
+        box-sizing: border-box;
+
+        .resizer {
+            position: absolute;
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            /*magic to turn square into circle*/
+            background: white;
+            border: 3px solid #69a6db;
+        }
+
+        .resizer.top-left {
+            left: -3px;
+            top: -3px;
+            cursor: nwse-resize;
+            /*resizer cursor*/
+        }
+
+        .resizer.top-right {
+            right: -3px;
+            top: -3px;
+            cursor: nesw-resize;
+        }
+
+        .resizer.bottom-left {
+            left: -3px;
+            bottom: -3px;
+            cursor: nesw-resize;
+        }
+
+        .resizer.bottom-right {
+            right: -3px;
+            bottom: -3px;
+            cursor: nwse-resize;
+        }
+    }
+}
+
 .progressivizeMove-frame {
-    width: 40px;
+    width: 20px;
     border-radius: 2px;
     z-index: 100000;
     color: white;
     text-align: center;
     background-color: #5a9edd;
-    transform: translate(-105%, -110%);
+    transform: translate(-110%, 110%);
 }
 
 .progressivizeButton:hover {