first working state

styles/Components.module.css

@@ -2,27 +2,31 @@
   min-height: 90vh;
   max-height: 90vh;
   max-width: 50vw;
-  left: 45vw;
+  left: 40vw;
   position: relative;
   overflow-y: scroll;
   display: flex;
   flex-wrap: wrap;
 }
 
+.preview {
+  max-width: 50vw;
+  left: 0;
+}
+
 .borderKeeper {
   width: 132px !important;
   height: 132px !important;
-  padding: 4px;
+  padding: 6px;
+  margin: 12px;
 }
 
 .borderKeeper > span {
   display: inline-table !important;
 }
 
-.userImage,
-.borderImage {
-  position: relative;
-  left: 0;
+.borderKeeper :nth-child(2) {
+  top: -8em;
 }
 
 .userImage {
@@ -32,9 +36,10 @@
 
 .borderImage {
   z-index: 3;
-  top: -256px !important;
+  transform: scale(1.22);
 }
 
 .selected {
-  border: 1px solid black;
+  border: 3px solid black;
+  z-index: 5;
 }

styles/Home.module.css

@@ -16,7 +16,7 @@
   position: absolute;
   display: flex;
   flex-direction: column;
-  justify-content: end;
+  justify-content: flex-end;
   align-items: flex-end;
   text-align: right;
   width: 50vw;

styles/globals.css

@@ -14,3 +14,17 @@ a {
 * {
   box-sizing: border-box;
 }
+
+.alert {
+  border: 1px black solid;
+  border-radius: 7%;
+  max-width: min-content;
+  padding: 4px;
+  background-color: lightgray;
+  position: relative;
+  left: 45vw;
+}
+
+main {
+  display: flex;
+}