diff --git a/components.js b/components.js
index e3e47c8..f2ff113 100644
--- a/components.js
+++ b/components.js
@@ -1197,6 +1197,8 @@ customElements.define('sm-switch', class extends HTMLElement {
     connectedCallback() {
         if (this.hasAttribute('disabled'))
             this.switch.classList.add('disabled')
+        if (this.hasAttribute('checked'))
+            this.input.checked = true
         this.addEventListener('keyup', e => {
             if ((e.code === "Enter" || e.code === "Space") && !this.isDisabled) {
                 this.input.click()
@@ -1325,7 +1327,7 @@ smSelect.innerHTML = `
             <polyline points="63.65 15.99 32 47.66 0.35 15.99"/>
         </svg>
     </div>
-    <div class="options hide">
+    <div part="options" class="options hide">
         <slot></slot> 
     </div>
 </div>`;
diff --git a/css/main.css b/css/main.css
index de79453..d77337f 100644
--- a/css/main.css
+++ b/css/main.css
@@ -12,6 +12,7 @@ body {
   --foreground-color: 255, 255, 255;
   --background-color: rgba(var(--foreground-color), 1);
   --dark-shade: #f8f8f8;
+  --error-color: #E53935;
   --hue: 255;
   --saturation: 61%;
   --lightness: 39%;
@@ -182,7 +183,7 @@ strong {
   stroke-linecap: round;
 }
 
-sm-popup sm-input:not(:last-of-type) {
+sm-popup > sm-input:not(:last-of-type) {
   margin-bottom: 1rem;
 }
 sm-popup sm-textarea {
@@ -582,10 +583,16 @@ button:disabled {
   max-width: 100%;
 }
 
+sm-select::part(options) {
+  max-height: 50vh;
+}
+
 table {
+  border-collapse: collapse;
   position: relative;
 }
 table input {
+  position: relative;
   padding: 0.4rem;
   border: thin solid rgba(var(--text-color), 0.3);
   font-size: 1rem;
@@ -624,13 +631,22 @@ td {
   width: 10ch;
 }
 
+#group_by::part(popup) {
+  min-height: 80vh;
+}
+#group_by sm-select:last-of-type {
+  margin-left: 0.5rem;
+}
+
 #side_bar {
   position: fixed;
   transform: translateX(-100%);
   background: var(--dark-shade);
 }
+#side_bar > .flex:first-of-type {
+  padding: 0 1rem;
+}
 #side_bar .section-header {
-  padding: 1rem;
   margin-bottom: 0;
   background: inherit;
 }
@@ -715,6 +731,122 @@ td {
   margin-bottom: 1.5rem;
 }
 
+#new_sheet_popup p {
+  font-size: 0.9rem;
+}
+
+#specify_columns,
+#specify_editors,
+#specify_details {
+  gap: 1rem;
+  margin-top: 1rem;
+  padding-top: 1rem;
+}
+#specify_columns h4,
+#specify_editors h4,
+#specify_details h4 {
+  font-weight: 500;
+  font-size: 0.9rem;
+  margin-bottom: 0.2rem;
+}
+
+#columns_container {
+  flex-wrap: wrap;
+}
+
+#editors_container,
+#columns_container,
+#additional_fields {
+  gap: 0.4rem;
+}
+
+#specify_editors {
+  border-top: solid 1px rgba(var(--text-color), 0.2);
+}
+
+#add_editor sm-input,
+#add_column sm-input,
+#add_detail sm-input {
+  width: 100%;
+}
+#add_editor .icon,
+#add_column .icon,
+#add_detail .icon {
+  height: 3rem;
+  width: 3rem;
+  padding: 1rem;
+  cursor: pointer;
+}
+
+#add_detail {
+  gap: 0.2rem;
+  grid-template-columns: 1fr auto;
+  grid-template-areas: ". add" ". add";
+}
+#add_detail .icon {
+  grid-area: add;
+  align-self: flex-end;
+}
+
+.editor-card,
+.column-card,
+.details-card {
+  border-radius: 0.3rem;
+  background: rgba(var(--text-color), 0.06);
+}
+.editor-card .icon,
+.column-card .icon,
+.details-card .icon {
+  padding: 0.3rem;
+  cursor: pointer;
+}
+.editor-card .editor-address,
+.column-card .editor-address,
+.details-card .editor-address {
+  font-family: "Roboto", sans-serif;
+  font-size: 0.9rem;
+  font-weight: 400;
+  opacity: 0.8;
+}
+
+.editor-card {
+  padding: 0.4rem 0.8rem;
+}
+
+.column-card {
+  padding: 0.4rem 0.6rem;
+}
+.column-card .icon {
+  margin-left: 0.4rem;
+}
+
+.details-card {
+  gap: 0.2rem;
+  padding: 0.6rem 0.8rem;
+  grid-template-columns: 1fr auto;
+  grid-template-areas: ". close" ". close";
+}
+.details-card h4, .details-card h5 {
+  font-family: "Roboto", sans-serif;
+  margin: 0 !important;
+}
+.details-card h5 {
+  font-weight: 400;
+  opacity: 0.8;
+}
+.details-card h4 {
+  font-size: 1rem !important;
+}
+.details-card .icon {
+  grid-area: close;
+}
+
+@media screen and (max-width: 640px) {
+  #group_by_view {
+    overflow: auto;
+    max-width: calc(100vw - 3rem);
+  }
+}
 @media screen and (min-width: 640px) {
   sm-popup::part(popup) {
     width: 24rem;
@@ -752,6 +884,10 @@ td {
     position: relative;
     transform: none;
   }
+
+  #group_by::part(popup) {
+    width: 80vw;
+  }
 }
 @media screen and (min-width: 1920px) {
   #home_page, #main_header {
diff --git a/css/main.min.css b/css/main.min.css
index d252b2c..441d8e0 100644
--- a/css/main.min.css
+++ b/css/main.min.css
@@ -1 +1 @@
-a,h1,h2,h3,h4,h5{font-weight:600}.align-center,.popup-header{align-items:center}.copy-row .copy,.overflow-ellipsis{text-overflow:ellipsis;white-space:nowrap}.capitalize,button{text-transform:capitalize}.person-card,button{-webkit-tap-highlight-color:transparent}.copy-row .copy,.overflow-ellipsis,th{white-space:nowrap}*{box-sizing:border-box;padding:0;margin:0;font-family:Roboto,sans-serif}button,h1,h2,h3,h4,h5{font-family:Poppins,sans-serif}body{--accent-color:#169685;--text-color:17,17,17;--text-color-light:85,85,85;--foreground-color:255,255,255;--background-color:rgba(var(--foreground-color), 1);--dark-shade:#f8f8f8;--hue:255;--saturation:61%;--lightness:39%;color:rgba(var(--text-color),1);font-size:16px;background:var(--dark-shade);background-size:cover}body[data-theme=dark]{--accent-color:#00BFA6;--text-color:238,238,238;--text-color-light:170,170,170;--foreground-color:26,26,26;--background-color:#111;--dark-shade:#080808;--hue:255;--saturation:39%;--lightness:70%}a{text-decoration:none;color:var(--accent-color)}.dark-text{color:#111}h1{font-size:3.5rem}h2{font-size:2rem}h3{font-size:1.5rem}h4{font-size:1rem}h5{font-size:.8rem}p{line-height:1.5;max-width:65ch;color:rgba(var(--text-color),.9)}strong{font-weight:500}::-moz-focus-inner{border:none}.bottom-padding{padding-bottom:1.5rem}.top-padding{padding-top:1em}.bottom-margin{margin-bottom:1.5rem}.top-margin{margin-top:1.5rem}#confirmation .flex,#main_loader sm-button,#sign_in_popup p,sm-popup sm-textarea{margin-top:1rem}.flex{display:flex}.grid{display:grid}.grid-2{grid-template-columns:auto auto;gap:1em}.direction-column{flex-direction:column}.justify-right{margin-left:auto}.space-between{justify-content:space-between}.label{margin-bottom:.4rem}.light-text{opacity:.7}.hide{opacity:0;pointer-events:none}.hide-completely{display:none!important}.breakable{word-break:break-all}.overflow-ellipsis{overflow:hidden}.separator{padding:.1em}.no-transformations{transform:none!important}.icon{height:1.2rem;width:1.2rem;overflow:visible;stroke:rgba(var(--text-color),1);opacity:.8;fill:none;stroke-width:6;stroke-linejoin:round;stroke-linecap:round}sm-popup sm-input:not(:last-of-type){margin-bottom:1rem}.popup-header{padding:1.5rem;padding-bottom:0;display:flex;width:100%}.popup-header .icon{margin-right:1rem;padding:.2rem;stroke-width:10;cursor:pointer}.popup-header button,.popup-header sm-button{width:auto;margin-left:auto}button{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:.6rem 1.2rem;font-weight:600;cursor:pointer;border-radius:.3rem;color:var(--accent-color);transition:transform .3s;border:none;background:rgba(var(--text-color),.1)}#main_header h5,.copy-row h4,.sheet-card h4,.sheet-card h5{font-family:Roboto,sans-serif}button:focus{outline:solid thin}button:disabled{cursor:default;background:rgba(var(--text-color),.4)}.primary-btn{background:var(--accent-color);justify-content:center;color:rgba(var(--foreground-color),1)}#main_header,#sign_in_popup::part(background){background:rgba(var(--foreground-color),1)}#confirmation,.sheet-card{flex-direction:column}#confirmation h4{font-weight:500;margin-bottom:1.5rem}#confirmation .flex sm-button:first-of-type{margin-right:.6em;margin-left:auto}#sign_in_popup h3{margin-top:2rem}#sign_in_popup h4{font-weight:500;margin-bottom:3rem}#sign_in_popup button{margin:1rem 0}#sign_in_popup p{margin-bottom:0!important}.copy-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.5rem;width:auto}.copy-row h4{margin-bottom:0;font-weight:400}.copy-row .icon{cursor:pointer;padding:.4rem;height:1.8rem;width:1.8rem}.copy-row .copy{overflow:hidden}#main_loader{text-align:center;place-content:center;height:100vh;width:100vw;position:fixed;left:0}#main_loader svg,.loader{fill:none;height:2rem;overflow:visible}#main_loader sm-button{margin-left:0;width:max-content;justify-self:center}#main_loader svg{width:2rem;stroke:var(--accent-color);stroke-width:6;stroke-linecap:round;stroke-dashoffset:210;stroke-dasharray:210;justify-self:center;align-self:center;margin-bottom:2rem}#main_loader h3{width:100%;font-weight:400;word-spacing:.16em}.loader{stroke-width:10;stroke:var(--accent-color);width:2rem;stroke-dashoffset:230;stroke-dasharray:230;padding:2px;justify-self:center}.animate-loader{animation:load 2.6s infinite,rotate 1s infinite linear}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes load{50%{stroke-dashoffset:0}100%{stroke-dashoffset:-210}}#main_header{padding:1rem;box-shadow:0 .1rem .2rem #00010}#main_header h5{font-weight:500;opacity:.8}#main_header h4{font-size:1.2rem}#home_page{padding:1rem 1.5rem}.section-header{position:sticky;top:0;z-index:1;background:var(--dark-shade);padding:1rem 0;margin-bottom:1rem}.section-header h4{font-size:1.2rem;opacity:.8;font-weight:500}#user_icon{width:2.4rem;height:2.4rem;padding:.6rem;cursor:pointer;background:rgba(var(--text-color),.1);border-radius:2rem}#sheets_container{gap:2rem 1.5rem;grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));margin-bottom:3rem;animation:slide-up .6s forwards cubic-bezier(.175,.885,.32,1.275)}@keyframes slide-up{from{transform:translateY(2rem)}to{transform:none}}#add_new_sheet .icon{height:2rem;width:2rem;stroke-width:10;stroke:#fff;stroke-linecap:square;opacity:1;top:50%;transform:translateY(-50%);position:absolute}#add_new_sheet .card{display:flex;align-items:center;justify-content:center;position:relative;background:url(card-bg1.svg),#A7003E;background-size:cover}.sheet-card{position:relative;display:flex;align-items:center;cursor:pointer}.sheet-card:active .card{transform:scale(.95)}.sheet-card .card{position:relative;border-radius:.4rem;background:url(card-bg2.svg) center,rgba(var(--text-color),.06);background-size:contain;padding:1rem;padding-top:66%;width:100%;transition:box-shadow .3s,transform .3s}#sheet_type,.sheet-card h5{background:rgba(var(--text-color),.1)}.sheet-card h4{font-weight:400;opacity:.9;margin-top:.8rem;text-align:center;max-width:90%}.sheet-card h5{position:absolute;top:0;right:0;margin:.5rem 0;padding:.4rem .6rem;border-radius:.2rem 0 0 .2rem;font-weight:500;opacity:.8}#sheet_editors .editor,table input{background:rgba(var(--text-color),.06)}#right,#sheet_container,table{position:relative}#sheet_page{width:100vw;height:100vh;overflow-x:hidden}#sheet_heading{font-weight:600;opacity:.9}#sheet_type{padding:.3rem .6rem;border-radius:.3rem;margin:0 1rem;font-weight:500;opacity:.8}#sheet_description{margin-top:.8rem;opacity:.8}#sheet_editors{gap:.5rem;flex-wrap:wrap;color:rgba(var(--text-color),.7);font-size:.9rem}#sheet_editors .editor{padding:.4rem .6rem;border-radius:.4rem}#go_to_home,#toggle_details{height:2.4rem;width:2.4rem;padding:.7rem;cursor:pointer}#go_to_home,#go_to_home+h5{transform:translateX(-1rem);cursor:pointer}#go_to_home+h5{font-weight:500;opacity:.9}#toggle_details{transform:rotateX(180deg);transition:transform .3s}#sheet_details{padding:1rem;margin-bottom:1rem}#sheet_details .flex:first-of-type{margin-bottom:1rem}#sheet_details .flex:nth-of-type(2){margin-bottom:1rem}#sheet_details .flex:not(:first-of-type){margin-bottom:.3rem}#sheet_details .flex:not(:first-of-type) .icon{cursor:pointer;margin-right:1rem;height:100%}#sheet_details.collapse{padding:.5rem 1rem;margin-bottom:0}#sheet_details.collapse .flex{margin-bottom:0}#sheet_details.collapse #toggle_details{transform:none}#sheet_details.collapse #sheet_heading{font-size:1.2rem;font-weight:600;opacity:.9}#sheet_details.collapse #sheet_description,#sheet_details.collapse #sheet_editors,#sheet_details.collapse #sheet_type{display:none}#sheet_container{overflow:auto;max-height:100%;bottom:0;max-width:100%}table input{padding:.4rem;border:thin solid;font-size:1rem;width:100%;border-radius:.3rem;color:inherit}table input:disabled{border:transparent}th{position:sticky;top:0;background:linear-gradient(rgba(var(--text-color),.06),rgba(var(--text-color),.06)),rgba(var(--foreground-color),1);text-align:left;line-height:1;font-weight:500;z-index:1;padding:1rem .8rem;box-shadow:0 .2rem .4rem #00020}tr:nth-of-type(2n){background-color:rgba(var(--text-color),.04)}td{padding:.4rem .8rem;opacity:.9}.grade-input{width:10ch}#side_bar{position:fixed;transform:translateX(-100%);background:var(--dark-shade)}#side_bar .section-header{padding:1rem;margin-bottom:0;background:inherit}#right{display:flex;flex-direction:column;overflow:auto;max-height:100vh;background:rgba(var(--foreground-color),1);animation:slide-right .6s forwards cubic-bezier(.175,.885,.32,1.275)}@keyframes slide-right{from{transform:translateX(-2rem)}to{transform:translateX(0)}}#people_container{overflow:auto;max-height:calc(100vh - 3.6rem);gap:1.5rem}.person-card{display:grid;align-items:center;grid-template-columns:auto 1fr;grid-template-areas:"initials ." "initials .";cursor:pointer;padding:0 1rem;transition:transform .3s}.person-card:active{transform:scale(.95)}.person-card:first-of-type{margin-top:1.5rem}.person-card:last-of-type{margin-bottom:2rem}.person-initials{grid-area:initials;display:flex;justify-content:center;height:2.6rem;width:2.6rem;font-size:1.2rem!important;font-weight:500;align-items:center;border-radius:2rem;margin-right:1rem;text-transform:uppercase;opacity:1!important;color:var(--accent-color);background:rgba(var(--text-color),.06)}.person-name{font-size:.9rem;opacity:.9;font-weight:500;text-transform:capitalize}.person-flo-id{opacity:.7;font-weight:400}#user_popup sm-button{margin-top:.5rem}#user_popup section:not(:last-of-type){margin-bottom:1.5rem}@media screen and (min-width:640px){sm-popup::part(popup){width:24rem}#main_header{padding:1.2rem 3rem}#home_page,#main_header{grid-template-columns:1fr 80vw 1fr;grid-template-areas:". main ."}#main_header>div,#main_section{grid-area:main}#sheets_container{gap:2rem;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr))}#sheet_page.toggle-side-bar{grid-template-columns:19rem 1fr}#sheet_page:not(.toggle-side-bar) #side_bar{grid-template-columns:1fr;position:fixed;transform:translateX(-100%)}#side_bar{position:relative;transform:none}}@media screen and (min-width:1920px){#home_page,#main_header{grid-template-columns:1fr 60vw 1fr;grid-template-areas:". main ."}}@media (any-hover:hover){:root{scrollbar-width:thin}::-webkit-scrollbar{width:.7rem;height:.7rem}::-webkit-scrollbar-track{border-radius:10px}::-webkit-scrollbar-thumb{border-radius:10px;background:rgba(var(--text-color),.2)}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color),.4)}#people_container::-webkit-scrollbar{width:.4rem}#right{z-index:1;box-shadow:-.5rem 0 .5rem #00010}}
\ No newline at end of file
+#main_header h5,*,.column-card .editor-address,.copy-row h4,.details-card .editor-address,.details-card h4,.details-card h5,.editor-card .editor-address,.sheet-card h4,.sheet-card h5{font-family:Roboto,sans-serif}a,h1,h2,h3,h4,h5{font-weight:600}.align-center,.popup-header{align-items:center}.copy-row .copy,.overflow-ellipsis{text-overflow:ellipsis;white-space:nowrap}.capitalize,button{text-transform:capitalize}.person-card,button{-webkit-tap-highlight-color:transparent}*{box-sizing:border-box;padding:0;margin:0}button,h1,h2,h3,h4,h5{font-family:Poppins,sans-serif}body{--accent-color:#169685;--text-color:17,17,17;--text-color-light:85,85,85;--foreground-color:255,255,255;--background-color:rgba(var(--foreground-color), 1);--dark-shade:#f8f8f8;--error-color:#E53935;--hue:255;--saturation:61%;--lightness:39%;color:rgba(var(--text-color),1);font-size:16px;background:var(--dark-shade);background-size:cover}body[data-theme=dark]{--accent-color:#00BFA6;--text-color:238,238,238;--text-color-light:170,170,170;--foreground-color:26,26,26;--background-color:#111;--dark-shade:#080808;--hue:255;--saturation:39%;--lightness:70%}a{text-decoration:none;color:var(--accent-color)}.dark-text{color:#111}h1{font-size:3.5rem}h2{font-size:2rem}h3{font-size:1.5rem}h4{font-size:1rem}h5{font-size:.8rem}p{line-height:1.5;max-width:65ch;color:rgba(var(--text-color),.9)}strong{font-weight:500}::-moz-focus-inner{border:none}.bottom-padding{padding-bottom:1.5rem}.top-padding{padding-top:1em}.bottom-margin{margin-bottom:1.5rem}.top-margin{margin-top:1.5rem}#confirmation .flex,#main_loader sm-button,#sign_in_popup p,sm-popup sm-textarea{margin-top:1rem}.flex{display:flex}.grid{display:grid}.grid-2{grid-template-columns:auto auto;gap:1em}.direction-column{flex-direction:column}.justify-right{margin-left:auto}.space-between{justify-content:space-between}.label{margin-bottom:.4rem}.light-text{opacity:.7}.hide{opacity:0;pointer-events:none}.hide-completely{display:none!important}.breakable{word-break:break-all}.overflow-ellipsis{overflow:hidden}.separator{padding:.1em}.no-transformations{transform:none!important}.icon{height:1.2rem;width:1.2rem;overflow:visible;stroke:rgba(var(--text-color),1);opacity:.8;fill:none;stroke-width:6;stroke-linejoin:round;stroke-linecap:round}sm-popup>sm-input:not(:last-of-type){margin-bottom:1rem}.popup-header{padding:1.5rem;padding-bottom:0;display:flex;width:100%}.popup-header .icon{margin-right:1rem;padding:.2rem;stroke-width:10;cursor:pointer}.popup-header button,.popup-header sm-button{width:auto;margin-left:auto}button{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:.6rem 1.2rem;font-weight:600;cursor:pointer;border-radius:.3rem;color:var(--accent-color);transition:transform .3s;border:none;background:rgba(var(--text-color),.1)}button:focus{outline:solid thin}button:disabled{cursor:default;background:rgba(var(--text-color),.4)}.primary-btn{background:var(--accent-color);justify-content:center;color:rgba(var(--foreground-color),1)}#main_header,#sign_in_popup::part(background){background:rgba(var(--foreground-color),1)}#confirmation,.sheet-card{flex-direction:column}#confirmation h4{font-weight:500;margin-bottom:1.5rem}#confirmation .flex sm-button:first-of-type{margin-right:.6em;margin-left:auto}#sign_in_popup h3{margin-top:2rem}#sign_in_popup h4{font-weight:500;margin-bottom:3rem}#sign_in_popup button{margin:1rem 0}#sign_in_popup p{margin-bottom:0!important}.copy-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.5rem;width:auto}.copy-row h4{margin-bottom:0;font-weight:400}.copy-row .icon{cursor:pointer;padding:.4rem;height:1.8rem;width:1.8rem}.copy-row .copy{overflow:hidden}#main_loader{text-align:center;place-content:center;height:100vh;width:100vw;position:fixed;left:0}#main_loader svg,.loader{fill:none;height:2rem;overflow:visible}#main_loader sm-button{margin-left:0;width:max-content;justify-self:center}#main_loader svg{width:2rem;stroke:var(--accent-color);stroke-width:6;stroke-linecap:round;stroke-dashoffset:210;stroke-dasharray:210;justify-self:center;align-self:center;margin-bottom:2rem}#main_loader h3{width:100%;font-weight:400;word-spacing:.16em}.loader{stroke-width:10;stroke:var(--accent-color);width:2rem;stroke-dashoffset:230;stroke-dasharray:230;padding:2px;justify-self:center}.animate-loader{animation:load 2.6s infinite,rotate 1s infinite linear}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes load{50%{stroke-dashoffset:0}100%{stroke-dashoffset:-210}}#main_header{padding:1rem;box-shadow:0 .1rem .2rem #00010}#main_header h5{font-weight:500;opacity:.8}#main_header h4{font-size:1.2rem}#home_page{padding:1rem 1.5rem}.section-header{position:sticky;top:0;z-index:1;background:var(--dark-shade);padding:1rem 0;margin-bottom:1rem}.section-header h4{font-size:1.2rem;opacity:.8;font-weight:500}#user_icon{width:2.4rem;height:2.4rem;padding:.6rem;cursor:pointer;background:rgba(var(--text-color),.1);border-radius:2rem}#sheets_container{gap:2rem 1.5rem;grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));margin-bottom:3rem;animation:slide-up .6s forwards cubic-bezier(.175,.885,.32,1.275)}@keyframes slide-up{from{transform:translateY(2rem)}to{transform:none}}#add_new_sheet .icon{height:2rem;width:2rem;stroke-width:10;stroke:#fff;stroke-linecap:square;opacity:1;top:50%;transform:translateY(-50%);position:absolute}#add_new_sheet .card{display:flex;align-items:center;justify-content:center;position:relative;background:url(card-bg1.svg),#A7003E;background-size:cover}.sheet-card{position:relative;display:flex;align-items:center;cursor:pointer}.sheet-card:active .card{transform:scale(.95)}.sheet-card .card{position:relative;border-radius:.4rem;background:url(card-bg2.svg) center,rgba(var(--text-color),.06);background-size:contain;padding:1rem;padding-top:66%;width:100%;transition:box-shadow .3s,transform .3s}#sheet_type,.sheet-card h5{background:rgba(var(--text-color),.1)}.sheet-card h4{font-weight:400;opacity:.9;margin-top:.8rem;text-align:center;max-width:90%}.sheet-card h5{position:absolute;top:0;right:0;margin:.5rem 0;padding:.4rem .6rem;border-radius:.2rem 0 0 .2rem;font-weight:500;opacity:.8}#sheet_editors .editor,.column-card,.details-card,.editor-card,.person-initials,table input{background:rgba(var(--text-color),.06)}#right,#sheet_container,table,table input{position:relative}#sheet_page{width:100vw;height:100vh;overflow-x:hidden}#sheet_heading{font-weight:600;opacity:.9}#go_to_home+h5,#sheet_type,.person-initials,.person-name,th{font-weight:500}#sheet_type{padding:.3rem .6rem;border-radius:.3rem;margin:0 1rem;opacity:.8}#sheet_description{margin-top:.8rem;opacity:.8}#sheet_editors{gap:.5rem;flex-wrap:wrap;color:rgba(var(--text-color),.7);font-size:.9rem}#sheet_editors .editor{padding:.4rem .6rem;border-radius:.4rem}#go_to_home,#toggle_details{height:2.4rem;width:2.4rem;padding:.7rem;cursor:pointer}#go_to_home,#go_to_home+h5{transform:translateX(-1rem);cursor:pointer}#go_to_home+h5{opacity:.9}#toggle_details{transform:rotateX(180deg);transition:transform .3s}#sheet_details{padding:1rem;margin-bottom:1rem}#sheet_details .flex:first-of-type{margin-bottom:1rem}#sheet_details .flex:nth-of-type(2){margin-bottom:1rem}#sheet_details .flex:not(:first-of-type){margin-bottom:.3rem}#sheet_details .flex:not(:first-of-type) .icon{cursor:pointer;margin-right:1rem;height:100%}#sheet_details.collapse{padding:.5rem 1rem;margin-bottom:0}#sheet_details.collapse .flex{margin-bottom:0}#sheet_details.collapse #toggle_details{transform:none}#sheet_details.collapse #sheet_heading{font-size:1.2rem;font-weight:600;opacity:.9}#sheet_details.collapse #sheet_description,#sheet_details.collapse #sheet_editors,#sheet_details.collapse #sheet_type{display:none}#sheet_container{overflow:auto;max-height:100%;bottom:0;max-width:100%}sm-select::part(options){max-height:50vh}table{border-collapse:collapse}table input{padding:.4rem;border:thin solid;font-size:1rem;width:100%;border-radius:.3rem;color:inherit}table input:disabled{border:transparent}th{position:sticky;top:0;background:linear-gradient(rgba(var(--text-color),.06),rgba(var(--text-color),.06)),rgba(var(--foreground-color),1);text-align:left;line-height:1;z-index:1;padding:1rem .8rem;white-space:nowrap;box-shadow:0 .2rem .4rem #00020}tr:nth-of-type(2n){background-color:rgba(var(--text-color),.04)}td{padding:.4rem .8rem;opacity:.9}.grade-input{width:10ch}#group_by::part(popup){min-height:80vh}#group_by sm-select:last-of-type{margin-left:.5rem}#side_bar{position:fixed;transform:translateX(-100%);background:var(--dark-shade)}#side_bar>.flex:first-of-type{padding:0 1rem}#side_bar .section-header{margin-bottom:0;background:inherit}#right{display:flex;flex-direction:column;overflow:auto;max-height:100vh;background:rgba(var(--foreground-color),1);animation:slide-right .6s forwards cubic-bezier(.175,.885,.32,1.275)}@keyframes slide-right{from{transform:translateX(-2rem)}to{transform:translateX(0)}}#people_container{overflow:auto;max-height:calc(100vh - 3.6rem);gap:1.5rem}.person-card{display:grid;align-items:center;grid-template-columns:auto 1fr;grid-template-areas:"initials ." "initials .";cursor:pointer;padding:0 1rem;transition:transform .3s}.person-card:active{transform:scale(.95)}.person-card:first-of-type{margin-top:1.5rem}.person-card:last-of-type{margin-bottom:2rem}.person-initials{grid-area:initials;display:flex;justify-content:center;height:2.6rem;width:2.6rem;font-size:1.2rem!important;align-items:center;border-radius:2rem;margin-right:1rem;text-transform:uppercase;opacity:1!important;color:var(--accent-color)}.person-name{font-size:.9rem;opacity:.9;text-transform:capitalize}.person-flo-id{opacity:.7;font-weight:400}#user_popup sm-button{margin-top:.5rem}#user_popup section:not(:last-of-type){margin-bottom:1.5rem}#new_sheet_popup p{font-size:.9rem}#specify_columns,#specify_details,#specify_editors{gap:1rem;margin-top:1rem;padding-top:1rem}#specify_columns h4,#specify_details h4,#specify_editors h4{font-weight:500;font-size:.9rem;margin-bottom:.2rem}#columns_container{flex-wrap:wrap}#additional_fields,#columns_container,#editors_container{gap:.4rem}#add_detail,.details-card{gap:.2rem;grid-template-columns:1fr auto}#specify_editors{border-top:solid 1px rgba(var(--text-color),.2)}#add_column sm-input,#add_detail sm-input,#add_editor sm-input{width:100%}#add_column .icon,#add_detail .icon,#add_editor .icon{height:3rem;width:3rem;padding:1rem;cursor:pointer}#add_detail{grid-template-areas:". add" ". add"}#add_detail .icon{grid-area:add;align-self:flex-end}.column-card,.details-card,.editor-card{border-radius:.3rem}.column-card .icon,.details-card .icon,.editor-card .icon{padding:.3rem;cursor:pointer}.column-card .editor-address,.details-card .editor-address,.editor-card .editor-address{font-size:.9rem;font-weight:400;opacity:.8}.editor-card{padding:.4rem .8rem}.column-card{padding:.4rem .6rem}.column-card .icon{margin-left:.4rem}.details-card{padding:.6rem .8rem;grid-template-areas:". close" ". close"}.details-card h4,.details-card h5{margin:0!important}.details-card h5{font-weight:400;opacity:.8}.details-card h4{font-size:1rem!important}.details-card .icon{grid-area:close}@media screen and (max-width:640px){#group_by_view{overflow:auto;max-width:calc(100vw - 3rem)}}@media screen and (min-width:640px){sm-popup::part(popup){width:24rem}#main_header{padding:1.2rem 3rem}#home_page,#main_header{grid-template-columns:1fr 80vw 1fr;grid-template-areas:". main ."}#main_header>div,#main_section{grid-area:main}#sheets_container{gap:2rem;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr))}#sheet_page.toggle-side-bar{grid-template-columns:19rem 1fr}#sheet_page:not(.toggle-side-bar) #side_bar{grid-template-columns:1fr;position:fixed;transform:translateX(-100%)}#side_bar{position:relative;transform:none}#group_by::part(popup){width:80vw}}@media screen and (min-width:1920px){#home_page,#main_header{grid-template-columns:1fr 60vw 1fr;grid-template-areas:". main ."}}@media (any-hover:hover){:root{scrollbar-width:thin}::-webkit-scrollbar{width:.7rem;height:.7rem}::-webkit-scrollbar-track{border-radius:10px}::-webkit-scrollbar-thumb{border-radius:10px;background:rgba(var(--text-color),.2)}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color),.4)}#people_container::-webkit-scrollbar{width:.4rem}#right{z-index:1;box-shadow:-.5rem 0 .5rem #00010}}
\ No newline at end of file
diff --git a/css/main.scss b/css/main.scss
index 36be367..14c9696 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -11,6 +11,7 @@ body {
     --foreground-color: 255, 255, 255;
     --background-color: rgba(var(--foreground-color), 1);
     --dark-shade: #f8f8f8;
+    --error-color: #E53935;
     --hue: 255;
     --saturation: 61%;
     --lightness: 39%;
@@ -177,7 +178,7 @@ strong{
 }
 
 sm-popup{  
-    sm-input:not(:last-of-type) {
+    & > sm-input:not(:last-of-type) {
         margin-bottom: 1rem;
     }
     sm-textarea{
@@ -575,9 +576,14 @@ button {
     bottom: 0;
     max-width: 100%;
 }
+sm-select::part(options){
+    max-height: 50vh;
+}
 table{
+    border-collapse: collapse;
     position: relative;
     input{
+        position: relative;
         padding: 0.4rem;
         border: thin solid rgba(var(--text-color), 0.3);
         font-size: 1rem;
@@ -615,12 +621,23 @@ td{
     width: 10ch;
 }
 
+#group_by{
+    &::part(popup){
+        min-height: 80vh;
+    }
+    sm-select:last-of-type{
+        margin-left: 0.5rem;
+    }
+}
+
 #side_bar{
     position: fixed;
     transform: translateX(-100%);
     background: var(--dark-shade);
+    & > .flex:first-of-type{
+        padding: 0 1rem;
+    }
     .section-header{
-        padding: 1rem;
         margin-bottom: 0;
         background: inherit;
     }
@@ -705,6 +722,109 @@ td{
     }
 }
 
+#new_sheet_popup{
+    p{
+        font-size: 0.9rem;
+    }
+}
+
+#specify_columns,
+#specify_editors,
+#specify_details{
+    h4{
+        font-weight: 500;
+        font-size: 0.9rem;
+        margin-bottom: 0.2rem;
+    }
+    gap: 1rem;
+    margin-top: 1rem;
+    padding-top: 1rem;
+}
+#columns_container{
+    flex-wrap: wrap;
+}
+#editors_container,
+#columns_container,
+#additional_fields{
+    gap: 0.4rem;
+}
+#specify_editors{
+    border-top: solid 1px rgba(var(--text-color), 0.2);
+}
+#add_editor,
+#add_column,
+#add_detail{
+    sm-input{
+        width: 100%;
+    }
+    .icon{
+        height: 3rem;
+        width: 3rem;
+        padding: 1rem;
+        cursor: pointer;
+    }
+}
+#add_detail{
+    gap: 0.2rem;
+    grid-template-columns: 1fr auto;
+    grid-template-areas: '. add' '. add';
+    .icon{
+        grid-area: add;
+        align-self: flex-end;
+    }
+}
+.editor-card,
+.column-card,
+.details-card{
+    border-radius: 0.3rem;
+    background: rgba(var(--text-color), 0.06);
+    .icon{
+        padding: 0.3rem;
+        cursor: pointer;
+    }
+    .editor-address{
+        font-family: 'Roboto', sans-serif;
+        font-size: 0.9rem;
+        font-weight: 400;
+        opacity: 0.8;
+    }
+}
+.editor-card{
+    padding: 0.4rem 0.8rem;
+}
+.column-card{
+    padding: 0.4rem 0.6rem;
+    .icon{
+        margin-left: 0.4rem;
+    }
+}
+.details-card{
+    gap: 0.2rem;
+    padding: 0.6rem 0.8rem;
+    grid-template-columns: 1fr auto;
+    grid-template-areas: '. close' '. close';
+    h4, h5{
+        font-family: 'Roboto', sans-serif;
+        margin: 0 !important;
+    }
+    h5{
+        font-weight: 400;
+        opacity: 0.8;
+    }
+    h4{
+        font-size: 1rem !important;
+    }
+    .icon{
+        grid-area: close;
+    }
+}
+
+@media screen and (max-width: 640px){
+    #group_by_view{
+        overflow: auto;
+        max-width: calc(100vw - 3rem);
+    }
+}
 @media screen and (min-width: 640px){
     sm-popup::part(popup){
         width: 24rem;
@@ -739,6 +859,11 @@ td{
         position: relative;
         transform: none;
     }
+    #group_by{
+        &::part(popup){
+            width: 80vw;
+        }
+    }
 }
 @media screen and (min-width: 1920px){
     #home_page, #main_header{
diff --git a/index.html b/index.html
index b6ca0b3..5fbb87a 100644
--- a/index.html
+++ b/index.html
@@ -77,9 +77,9 @@
                     hideLoader()
                     //display add buttons if subAdmin, else hide
                     if (floGlobals.subAdmins.includes(myFloID)) {
-                        document.querySelectorAll('sub-admin-option').forEach(option => option.classList.remove('hide-completely'))
+                        document.querySelectorAll('.sub-admin-option').forEach(option => option.classList.remove('hide-completely'))
                     } else {
-                        document.querySelectorAll('sub-admin-option').forEach(option => option.classList.add('hide-completely'))
+                        document.querySelectorAll('.sub-admin-option').forEach(option => option.classList.add('hide-completely'))
                     }
                 }).catch(error => {
                     reactor.dispatchEvent("startUpErrorLog", `Failed to download objectData`)
@@ -133,6 +133,8 @@
             Sign In
         </button>
     </sm-popup>
+
+    <!-- User settings popup -->
     <sm-popup id="user_popup">
         <header class="popup-header" slot="header">
             <svg class="icon" onclick="this.closest('sm-popup').hide()" viewBox="0 0 64 64">
@@ -164,10 +166,45 @@
             </div>
         </section>
     </sm-popup>
+
+    <!-- Add a person popup -->
+    <sm-popup id="add_person_popup">
+        <header class="popup-header" slot="header">
+            <svg class="icon" onclick="this.closest('sm-popup').hide()" viewBox="0 0 64 64">
+                <title>close popup</title>
+                <line x1="64" y1="0" x2="0" y2="64" />
+                <line x1="64" y1="64" x2="0" y2="0" />
+            </svg>
+            <h4>
+                Add new person
+            </h4>
+            <button onclick="addPerson()" class="primary-btn expand" type="submit" disabled>
+                Add
+            </button>
+        </header>
+        <sm-input id="person_flo_id_input" floId placeholder="FLO ID*" animate required></sm-input>
+        <sm-input id="person_name_input" placeholder="Name*" animate required></sm-input>
+        <div id="specify_details" class="grid">
+            <div class="flex direction-column">
+                <h4>Additional details</h4>
+                <p>Add more details about a person. Specify type of information and actual detail.</p>
+            </div>
+            <div id="additional_fields" class="grid"></div>
+            <div id="add_detail" class="grid align-center">
+                <sm-input id="add_detail_type_input" exclude placeholder="Type"></sm-input>
+                <sm-input id="add_detail_value_input" exclude placeholder="Value"></sm-input>
+                <svg class="icon" onclick="addDetails()" viewBox="0 0 64 64">
+                    <title>Add detail</title>
+                    <polyline points="0.35 31.82 21.45 52.98 63.65 10.66"/>
+                </svg>
+            </div>
+        </div>
+    </sm-popup>
+    <!-- Create new sheet popup -->
     <sm-popup id="new_sheet_popup">
         <header class="popup-header" slot="header">
             <svg class="icon" onclick="this.closest('sm-popup').hide()" viewBox="0 0 64 64">
-                <title>close</title>
+                <title>close popup</title>
                 <line x1="64" y1="0" x2="0" y2="64" />
                 <line x1="64" y1="64" x2="0" y2="0" />
             </svg>
@@ -178,20 +215,62 @@
                 Create
             </button>
         </header>
-        <sm-input placeholder="Name" required></sm-input>
-        <sm-textarea placeholder="Description" required></sm-textarea>
+        <sm-input id="sheet_title_input" placeholder="Name*" animate required></sm-input>
+        <sm-textarea id="sheet_description_input" placeholder="Description" animate required></sm-textarea>
+        <div id="specify_columns" class="grid">
+            <div class="flex direction-column">
+                <h4>Add Columns</h4>
+                <p>Columns will be added as the order you added them.</p>
+            </div>
+            <div id="columns_container" class="flex"></div>
+            <div id="add_column" class="flex align-center space-between">
+                <sm-input id="add_column_input" exclude placeholder="Column title"></sm-input>
+                <svg class="icon" onclick="addColumn()" viewBox="0 0 64 64">
+                    <title>Add this column</title>
+                    <polyline points="0.35 31.82 21.45 52.98 63.65 10.66"/>
+                </svg>
+            </div>
+        </div>
+        <div class="flex align-center space-between top-margin">
+            Make sheet private
+            <sm-switch onchange="toggleEditors()"></sm-switch>
+        </div>
+        <div id="specify_editors" class="grid hide-completely">
+            <div class="flex direction-column">
+                <h4>Add editors</h4>
+                <p>Only specified editors will be able to update this sheet.</p>
+            </div>
+            <div id="editors_container" class="grid"></div>
+            <div id="add_editor" class="flex align-center space-between">
+                <sm-input id="add_editor_input" exclude placeholder="Editor's FLO Address"></sm-input>
+                <svg class="icon" onclick="addEditor()" viewBox="0 0 64 64">
+                    <title>Add this editor</title>
+                    <polyline points="0.35 31.82 21.45 52.98 63.65 10.66"/>
+                </svg>
+            </div>
+        </div>
     </sm-popup>
+
+    <!-- Group by popup -->
     <sm-popup id="group_by">
-        <div>Group Title By</div>
-        <div class="i-2" id="group_by_menu">
-            <select>
-                <option value="count">Count</option>
-                <option value="total" selected>Total</option>
-                <option value="avg">Avg</option>
-                <option value="max">Max</option>
-                <option value="min">Min</option>
-            </select>
-            <select></select>
+        <header class="popup-header" slot="header">
+            <svg class="icon" onclick="this.closest('sm-popup').hide()" viewBox="0 0 64 64">
+                <title>close popup</title>
+                <line x1="64" y1="0" x2="0" y2="64" />
+                <line x1="64" y1="64" x2="0" y2="0" />
+            </svg>
+            <h4 id="group_by_title">
+            </h4>
+        </header>
+        <div class="flex align-center" id="group_by_menu">
+            <sm-select id="first_select" class="justify-right">
+                <sm-option value="count">Count</sm-option>
+                <sm-option value="total" selected>Total</sm-option>
+                <sm-option value="avg">Avg</sm-option>
+                <sm-option value="max">Max</sm-option>
+                <sm-option value="min">Min</sm-option>
+            </sm-select>
+            <sm-select id="second_select"></sm-select>
         </div>
         <div class="table-container" id="group_by_view"></div>
     </sm-popup>
@@ -221,19 +300,21 @@
         </section>
         <section id="sheet_page" class="page toggle-side-bar grid hide-completely">
             <nav id="side_bar">
-                <div class="flex align-center">
+                <div class="flex align-center space-between">
                     <h4 class="section-header">People</h4>
+                    <sm-button class="small sub-admin-option" onclick="showPopup('add_person_popup')">Add person</sm-button>
                 </div>
                 <div id="people_container" class="grid"></div>
             </nav>
             <section id="right">
                 <section id="sheet_details" class="collapse">
-                    <div class="flex align-center" onclick="showPage('home_page')">
-                        <svg class="icon" id="go_to_home" viewBox="0 0 64 64">
+                    <div class="flex align-center">
+                        <svg class="icon" onclick="showPage('home_page')" id="go_to_home" viewBox="0 0 64 64">
                             <title>Go back to homepage</title>
                             <polyline points="48.01 0.35 16.35 32 48.01 63.65"/>
                         </svg>
                         <h5>Sheets</h5>
+                        <sm-button class="small justify-right" onclick="showPopup('group_by')">Group by</sm-button>
                     </div>
                     <div class="flex align-center">
                         <svg class="icon" onclick="toggleSideBar()" viewBox="0 0 64 64">
@@ -340,6 +421,16 @@
             popupStack.peek().popup.hide()
         }
 
+        document.addEventListener('popupclosed', e => {
+            let popup = e.detail.popup
+            switch(popup.id){
+                case 'new_sheet_popup':
+                    columnsContainer.innerHTML = ''
+                    editorsContainer.innerHTML = ''
+                break;
+            }
+        })
+
         const loaderPage = document.getElementById('main_loader'),
                 mainHeader = document.getElementById('main_header')
         function showLoader() {
@@ -554,7 +645,7 @@
                 }
             })
             document.addEventListener('keyup', (e) => {
-                if (e.target.closest('sm-input')) {
+                if (e.target.closest('sm-input:not([exclude])')) {
                     if (e.key === 'Enter') {
                         e.target.closest('sm-popup').querySelector("[type='submit']")
                             .click();
@@ -644,18 +735,118 @@
                     <h5 class="person-flo-id overflow-ellipsis">${floId}</h5>
                 `
                 return card
+            },
+            editorCard(floId){
+                let card = document.createElement('div')
+                card.classList.add('editor-card', 'flex', 'space-between', 'align-center')
+                setAttributes(card, {
+                    'data-flo-id': floId
+                })
+                card.innerHTML = `
+                    <h4 class="editor-address">${floId}</h4>
+                    <svg class="icon" onclick="this.parentNode.remove()" viewBox="0 0 64 64">
+                        <title>Remove editor</title>
+                        <line x1="64" y1="0" x2="0" y2="64" />
+                        <line x1="64" y1="64" x2="0" y2="0" />
+                    </svg>
+                `
+                return card
+            },
+            columnCard(title){
+                let card = document.createElement('div')
+                card.classList.add('column-card', 'flex', 'space-between', 'align-center')
+                setAttributes(card, {
+                    'data-column-title': title
+                })
+                card.innerHTML = `
+                    <h5 class="column-title">${title}</h5>
+                    <svg class="icon" onclick="this.parentNode.remove()" viewBox="0 0 64 64">
+                        <title>Remove column</title>
+                        <line x1="64" y1="0" x2="0" y2="64" />
+                        <line x1="64" y1="64" x2="0" y2="0" />
+                    </svg>
+                `
+                return card
+            },
+            detailsCard(type, value){
+                let card = document.createElement('div')
+                card.classList.add('details-card', 'grid', 'align-center')
+                setAttributes(card, {
+                    'data-type': type,
+                    'data-value': value
+                })
+                card.innerHTML = `
+                    <h5 class="type">${type}</h5>
+                    <h4 class="value">${value}</h4>
+                    <svg class="icon" onclick="this.parentNode.remove()" viewBox="0 0 64 64">
+                        <title>Remove this field</title>
+                        <line x1="64" y1="0" x2="0" y2="64" />
+                        <line x1="64" y1="64" x2="0" y2="0" />
+                    </svg>
+                `
+                return card
             }
         }
 
         const sheetDetails = document.getElementById('sheet_details')
         const sheetPage = document.getElementById('sheet_page')
+        
+        const addEditorInput = document.getElementById('add_editor_input')
+        const specifyEditors = document.getElementById('specify_editors')
+        const editorsContainer = document.getElementById('editors_container')
+        
+        const addColumnInput = document.getElementById('add_column_input')
+        const columnsContainer = document.getElementById('columns_container')
+        
+        const additionalFields = document.getElementById('additional_fields')
+        const personFloIdInput = document.getElementById('person_flo_id_input')
+        const personNameInput = document.getElementById('person_name_input')
+        const addDetailTypeInput = document.getElementById('add_detail_type_input')
+        const addDetailValueInput = document.getElementById('add_detail_value_input')
 
+        function addEditor(){
+            let address = addEditorInput.value.trim()
+            if(address === '') return;
+            if(floCrypto.validateAddr(address)){
+                editorsContainer.append(render.editorCard(address))
+                addEditorInput.value = ''
+            }
+            else{
+                notify('Invalid editor FLO address', 'error')
+            }
+        }
+        function addColumn(){
+            let columnTitle = addColumnInput.value.trim()
+            if(columnTitle !== ''){
+                columnsContainer.append(render.columnCard(columnTitle))
+                addColumnInput.value = ''
+
+            }
+            else
+                notify("Column name should be specified.", 'error')
+        }
+
+        function addDetails(){
+            let type = addDetailTypeInput.value.trim()
+            let value = addDetailValueInput.value.trim()
+            if(type !== '' && value !== ''){
+                additionalFields.append(render.detailsCard(type, value))
+                addDetailTypeInput.value = ''
+                addDetailValueInput.value = ''
+            }
+            else
+                notify('Please enter both type and value', 'error')
+        }
+        
         function toggleDetails(){
             sheetDetails.classList.toggle('collapse')
         }
         function toggleSideBar(){
             sheetPage.classList.toggle('toggle-side-bar')
         }
+        function toggleEditors(){
+            specifyEditors.classList.toggle('hide-completely')
+        }
 
         const allPages = document.querySelectorAll('.page')
         function showPage(page){
@@ -689,38 +880,24 @@
                 this.parentNode.dataset["unsaved"] = '0'
                 notify("Save Successful")
             }).catch(error => notify(`Save Unsuccessful [${error}]`, error))
-        })
-
-        document.getElementById('add-person').addEventListener("click", function (e) {
-            document.getElementById("add-person-form").parentNode.classList.remove('hide')
         })*/
 
-        /*document.forms['add-person-form']['add-field'].addEventListener("click", function (e) {
-            let field = document.createElement("div")
-            field.classList.add("input-container")
-            field.classList.add("i-2b")
-            field.innerHTML = `<input type="text" placeholder="Type" />: 
-                <input type="text" placeholder="Value" /> 
-                <input type="button" value="&#x2717;" onclick="removeElement(this.parentNode)"/>`
-            document.getElementById("additional-fields").appendChild(field)
-        })
+        const firstSelect = document.getElementById('first_select')
+        const secondSelect = document.getElementById('second_select')
 
-        document.getElementById('view-group_by').addEventListener("click", function (e) {
-            document.getElementById("group_by").parentNode.classList.remove("hide")
-        })*/
-
-        document.getElementById('group_by_menu').children[0].addEventListener("change", function (e) {
+        document.getElementById('first_select').addEventListener("change", function (e) {
             try {
                 let title = floGlobals.currentSheet.title;
                 let sheet = floGlobals.currentSheet.sheet;
                 let type = this.value;
+                console.log(this)
                 if (type === 'count') {
-                    this.nextSibling.classList.add("hide")
+                    secondSelect.classList.add("hide-completely")
                     let data = logSheet.groupLogsBy.count(title, sheet)
                     renderGroupByView("count", data)
                 } else {
-                    this.nextSibling.classList.remove("hide")
-                    let column = this.nextSibling.value;
+                    secondSelect.classList.remove("hide-completely")
+                    let column = secondSelect.value;
                     let data = logSheet.groupLogsBy[type](title, sheet, column);
                     renderGroupByView(`${type}(${column})`, data)
                 }
@@ -729,11 +906,12 @@
             }
         })
 
-        document.getElementById('group_by_menu').children[1].addEventListener("change", function (e) {
+        document.getElementById('second_select').addEventListener("change", function (e) {
             try {
+                console.log(this)
                 let title = floGlobals.currentSheet.title;
                 let sheet = floGlobals.currentSheet.sheet;
-                let type = this.previousSibling.value;
+                let type = firstSelect.value;
                 let column = this.value;
                 let data = logSheet.groupLogsBy[type](title, sheet, column);
                 renderGroupByView(`${type}(${column})`, data)
@@ -765,19 +943,17 @@
 
         function addPerson() {
             try {
-                let form = document.forms["add-person-form"]
-                let floID = form.floID.value.trim();
-                let name = form.name.value.trim();
-                let otherDetails = {
-                    "Gender": form.gender.value,
-                    "Contact": form.contact.value,
-                }
-                let fields = document.getElementById("additional-fields").getElementsByTagName("input")
-                for (let i = 0; i < fields.length; i += 3)
-                    otherDetails[fields[i].value] = fields[i + 1].value
+                let floID = personFloIdInput.value.trim();
+                let name = personNameInput.value.trim();
+                let otherDetails = {}
+                let fields = additionalFields.querySelectorAll('.type, .value')
+                for (let i = 0; i < fields.length; i += 2)
+                    otherDetails[fields[i].textContent] = fields[i + 1].textContent
+                console.log(fields, otherDetails)
+                return
                 logSheet.addPerson(floID, name, otherDetails)
                 renderPersonCard(floID, logSheet.viewPerson(floID))
-                form.reset()
+                hidePopup()
                 notify(`Added Person: ${floID}`)
                 showSave()
             } catch (error) {
@@ -785,22 +961,25 @@
             }
         }
 
+        const   sheetTitleInput = document.getElementById('sheet_title_input'),
+                sheetDescriptionInput = document.getElementById('sheet_description_input')
+
         function createSheet() {
             try {
-                let form = document.forms["new-sheet-form"]
-                let title = form.title.value.trim().replace(" ", "_");
-                let description = form.description.value.trim();
-                let columns = form.columns.value.trim().split('\n');
-                let writers = form.writers.value.trim();
-                if (writers === '')
-                    writers = floGlobals.subAdmins;
-                else if (writers.toUpperCase() === 'PUBLIC')
-                    writers = null;
-                else
-                    writers = writers.split('\n').filter(i => floCrypto.validateAddr(i))
-                logSheet.createNewSheet(title, description, columns, writers)
+                let title = sheetTitleInput.value.trim().replace(" ", "_");
+                let description = sheetDescriptionInput.value.trim();
+                let columns = []
+                let editors = []
+                columnsContainer.querySelectorAll('.column-title').forEach(column => columns.push(column.textContent))
+                editorsContainer.querySelectorAll('.editor-address').forEach(editor => editors.push(editor.textContent))
+                return
+                if (editors === '')
+                    editors = floGlobals.subAdmins;
+                else if (editors.toUpperCase() === 'PUBLIC')
+                    editors = null;
+                logSheet.createNewSheet(title, description, columns, editors)
                 renderSheetList([title])
-                form.reset()
+                hidePopup()
                 notify(`Created New Sheet: ${title}`)
                 showSave()
             } catch (error) {
@@ -1012,19 +1191,21 @@
                 let row = document.createElement('tr')
                 row.setAttribute("title", parseVectorClock(data.vc))
                 row.append(createCell(data.floID))
-                row.append(createCell().appendChild(createGradeField(data.vc, data.grade)))
+                let gradeF = document.createElement('td')
+                gradeF.append(createGradeField(data.vc, data.grade))
+                row.append(gradeF)
                 data.log.forEach(l => row.append(createCell(l)))
                 frag.append(row)
             }
             tableBody.append(frag)
             if(!onlyRenderTable){
                 //Add options for groupBy 
-                document.getElementById('group_by').children[0].textContent = `Group ${title} by`;
+                document.getElementById('group_by_title').textContent = `Group ${removeUnderscore(title)} by`;
                 document.getElementById('group_by_view').innerHTML =
-                    `<table><th><tr><td>FLO ID</td><td><i>null</i></td></tr></th></table>`
+                    `<table><thead><tr><th>FLO ID</th><th><i>null</i></th></tr></thead></table>`
                 let colSelect = clearElement(document.getElementById('group_by_menu').children[1]);
                 attributes.forEach(a => {
-                    let opt = document.createElement('option');
+                    let opt = document.createElement('sm-option');
                     opt.setAttribute('value', a);
                     opt.textContent = a;
                     colSelect.appendChild(opt)