Use mock data to render first to panels.

html/static/css/main.css

@@ -1,12 +1,12 @@
 /* VARIABLES */
 :root {
-    --color-primary: #a598be;
-    --color-secondary: #e7d6a2;
+    --color-primary: rgb(165, 151, 190);
+    --color-secondary: rgb(231, 214, 162);
     --color-tertiary: #5260ff;
     --color-success: #2dd36f;
     --color-warning: #ffc409;
     --color-danger: #eb445a;
-    --color-dark: #19233e;
+    --color-dark: rgb(25, 35, 62);
     --color-medium: #92949c;
     --color-light: #f4f5f8;
     --base-rem-size: 12px;
@@ -32,10 +32,6 @@ a {
 select {
     color: var(--color-secondary);
     background-color: var(--color-dark);
-}
-
-#select-user {
-    width: 50%;
     text-align: center;
     font-size: 1.5rem;
     padding: 0.8rem;
@@ -46,6 +42,52 @@ select {
     border-right: 0;
 }
 
+input {
+    color: var(--color-secondary);
+    background-color: var(--color-dark);
+    text-align: center;
+    font-size: 1.5rem;
+    padding: 0.8rem;
+    border-style: solid;
+    border-top: 0;
+    border-left: 0;
+    border-right: 0;
+    border-bottom: 1px solid var(--color-secondary);
+}
+
+/* ===== Scrollbar CSS ===== */
+  /* Firefox */
+  * {
+    scrollbar-width: auto;
+    scrollbar-color: var(--color-primary) var(--color-dark);
+  }
+
+  /* Chrome, Edge, and Safari */
+  *::-webkit-scrollbar {
+    width: 0.5rem;
+    height: 0.5rem;
+  }
+
+  *::-webkit-scrollbar-track {
+    background: var(--color-dark);
+  }
+
+  *::-webkit-scrollbar-thumb {
+    background-color: var(--color-primary);
+    border-radius: 5px;
+    border: 0px solid var(--color-secondary);
+  }
+
+#select-party {
+    min-width: 50%;
+    max-width: 80%;
+    
+}
+
+.color-secondary {
+    color: var(--color-secondary);
+}
+
 .container {
     width: 70%;
     margin: 5rem auto;
@@ -54,10 +96,11 @@ select {
     box-shadow:  20px 20px 67px #0c101d,
     -20px -20px 67px #2b3d6c;
     display: flex;
-    gap: 2rem;
+    gap: 2rem 3rem;
     text-align: center;
     flex-wrap: wrap;
     align-items: stretch;
+    justify-content: center;
 }
 
 .container a {
@@ -68,12 +111,26 @@ select {
     color: var(--color-secondary);
 }
 
+.content {
+    width: 100%;
+}
+
 #page-content {
+    display: inline-block;
+    width: 100%;
+    letter-spacing: 1.8px;
+    position: relative;
+    margin-top: 0;
     transition: opacity 0.5s ease-in-out;
+    overflow-y: auto;
+    margin-bottom: 5rem;
+    height: calc(100% - 5rem);
 }
 
 #img-holder {
     width: 40%;
+    min-width: 290px;
+    max-width: 400px;
 }
 
 #img-holder img {
@@ -83,7 +140,7 @@ select {
 .panel {
     width: calc(60% - 2rem);
     position: relative;
-    min-width: 450px;
+    min-width: 290px;
 }
 
 .panel h1 {
@@ -96,16 +153,15 @@ select {
     color: var(--color-secondary);
 }
 
-#page-content {
+.panel-content {
     display: inline-block;
-    width: 100%;
-    margin-bottom: auto;
-    letter-spacing: 1.8px;
     position: relative;
-    margin-top: 0;
-    margin-bottom: 0;
+    height: 450px;
+    width: 100%;
 }
 
+
+
 .btn {
     --color: var(--color-primary);
     --color2: var(--color-dark);
@@ -167,4 +223,19 @@ select {
     position: absolute;
     bottom: 1rem;
     width: 100%;
+}
+
+.user-settings-user {
+    overflow-x: auto;
+    width: 100%;
+    margin-bottom: 3rem;;
+}
+
+#user-settings-users h3 {
+    margin-top: 5rem;;
+}
+
+#user-settings-users td {
+    min-width: 100px;
+    padding-bottom: 0.5rem;
 }