diff --git a/src/lib/components/Topnav.svelte b/src/lib/components/Topnav.svelte
index 0aa4d35..ac60c09 100644
--- a/src/lib/components/Topnav.svelte
+++ b/src/lib/components/Topnav.svelte
@@ -1,40 +1,3 @@
-<div class="top">
-    <div class="logo-cont">
-        <a href="/"><img alt="cv logo" class="logo" loading="eager" rel="preload" src="/CVHS-logo.png"/></a>
-        <div class="top-text">CVHS Locker System</div>
-    </div>
-
-    <div class="icon-cont">
-        <a href="/">
-            <div class="icon-stack">
-                <div class="material-symbols-outlined">home</div>
-                <div class="stack-text">Home</div>
-            </div>
-        </a>
-
-        <a href="/register">
-            <div class="icon-stack">
-                <div class="material-symbols-outlined">person_add</div>
-                <div class="stack-text">Register</div>
-            </div>
-        </a>
-
-        <a href="/lookup">
-            <div class="icon-stack">
-                <div class="material-symbols-outlined">search</div>
-                <div class="stack-text">Lookup</div>
-            </div>
-        </a>
-
-        <a href="/help">
-            <div class="icon-stack">
-                <div class="material-symbols-outlined">help</div>
-                <div class="stack-text">Help</div>
-            </div>
-        </a>
-    </div>
-</div>
-
 <style>
     .logo-cont a {
         display: inherit;
@@ -138,9 +101,46 @@
     }
 
     @media only screen and (max-width: 600px) {
-        .top{
+        .top {
             display: none;
         }
 
     }
 </style>
+
+<div class="top">
+    <div class="logo-cont">
+        <a href="/"><img alt="cv logo" class="logo" loading="eager" rel="preload" src="/CVHS-logo.png"/></a>
+        <div class="top-text">CVHS Locker System</div>
+    </div>
+
+    <div class="icon-cont">
+        <a href="/">
+            <div class="icon-stack">
+                <div class="material-symbols-outlined">home</div>
+                <div class="stack-text">Home</div>
+            </div>
+        </a>
+
+        <a href="/register">
+            <div class="icon-stack">
+                <div class="material-symbols-outlined">person_add</div>
+                <div class="stack-text">Register</div>
+            </div>
+        </a>
+
+        <a href="/lookup">
+            <div class="icon-stack">
+                <div class="material-symbols-outlined">search</div>
+                <div class="stack-text">Lookup</div>
+            </div>
+        </a>
+
+        <a href="/help">
+            <div class="icon-stack">
+                <div class="material-symbols-outlined">help</div>
+                <div class="stack-text">Help</div>
+            </div>
+        </a>
+    </div>
+</div>
diff --git a/src/lib/components/admin/Chart.svelte b/src/lib/components/admin/Chart.svelte
index 7016104..e50bc27 100644
--- a/src/lib/components/admin/Chart.svelte
+++ b/src/lib/components/admin/Chart.svelte
@@ -20,7 +20,7 @@
         ],
     };
 
-    import { Doughnut } from "svelte-chartjs";
+    import {Doughnut} from "svelte-chartjs";
 
     import {
         Chart as ChartJS,
@@ -34,4 +34,4 @@
     ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale);
 </script>
 
-<Doughnut {data} width={100} options={{ maintainAspectRatio: false }} />
+<Doughnut {data} width={100} options={{ maintainAspectRatio: false }}/>
diff --git a/src/lib/components/admin/Topadmin.svelte b/src/lib/components/admin/Topadmin.svelte
index 94bf464..28ddf01 100644
--- a/src/lib/components/admin/Topadmin.svelte
+++ b/src/lib/components/admin/Topadmin.svelte
@@ -30,7 +30,7 @@
         color: #d6d6d6;
     }
 
-    a{
+    a {
         height: 100%;
     }
 </style>
diff --git a/src/lib/components/app/Map.svelte b/src/lib/components/app/Map.svelte
index 76a557a..6b37b4b 100644
--- a/src/lib/components/app/Map.svelte
+++ b/src/lib/components/app/Map.svelte
@@ -1,6 +1,6 @@
 <script>
-    import { onMount } from "svelte";
-    import { draw } from "svelte/transition";
+    import {onMount} from "svelte";
+    import {draw} from "svelte/transition";
 
     let objects = [];
     let selected = [];
@@ -31,7 +31,7 @@
 
 <style>
 
-    .main{
+    .main {
         width: 100vw;
         height: 100vh;
         display: flex;
@@ -87,42 +87,46 @@
 </style>
 
 
-    <div class="box">
-        <svg viewBox="0 0 1880 1500" class="img">
-            <image
+<div class="box">
+    <svg viewBox="0 0 1880 1500" class="img">
+        <image
                 href="/maps_big.jpg"
                 width="173%"
                 x="-720"
                 y="-142"
-            />
-
-            <text class="texts" x="570" y="310" font-size="100" z="1" fill="blue"
-                >1000</text
-            >
-            <text class="texts" x="110" y="310" font-size="100" z="1" fill="blue"
-                >2000</text
-            >
-            <text class="texts" x="1500" y="895" font-size="100" fill="blue"
-                >7000</text
-            >
-            <text class="texts" x="1106" y="895" font-size="80" fill="blue"
-                >5000</text
-            >
-
-            <g>
-                {#each objects as feature, i}
-                    <!-- svelte-ignore a11y-click-events-have-key-events -->
-                    <!-- svelte-ignore a11y-no-static-element-interactions -->
-                    <path
+        />
+
+        <text class="texts" x="570" y="310" font-size="100" z="1" fill="blue"
+        >1000
+        </text
+        >
+        <text class="texts" x="110" y="310" font-size="100" z="1" fill="blue"
+        >2000
+        </text
+        >
+        <text class="texts" x="1500" y="895" font-size="100" fill="blue"
+        >7000
+        </text
+        >
+        <text class="texts" x="1106" y="895" font-size="80" fill="blue"
+        >5000
+        </text
+        >
+
+        <g>
+            {#each objects as feature, i}
+                <!-- svelte-ignore a11y-click-events-have-key-events -->
+                <!-- svelte-ignore a11y-no-static-element-interactions -->
+                <path
                         stroke="blue"
                         d={feature.data}
                         on:click={() => (selected = feature)}
                         class={`state ${i === select && "flash"}`}
                         in:draw={{ delay: i * 200, duration: 1500 }}
                         stroke-width="14"
-                    />
-                {/each}
-            </g>
-        </svg>
-    </div>
+                />
+            {/each}
+        </g>
+    </svg>
+</div>
 
diff --git a/src/lib/components/app/Select.svelte b/src/lib/components/app/Select.svelte
index c595e44..5d3546d 100644
--- a/src/lib/components/app/Select.svelte
+++ b/src/lib/components/app/Select.svelte
@@ -1,9 +1,12 @@
 <script>
-  import Select from 'svelte-select';
+    import Select from 'svelte-select';
 
     export let items;
     export let value = null;
 
     export let placeholder;
 </script>
-<Select {items} bind:value clearable={false} searchable={false} showChevron={true} placeholder={placeholder} inputStyles="caret-color: transparent;" --list-border-radius="4px" --background="#17171c" --border="2px solid #005cb3" --border-hover="2px solid #577db2"  --border-focused="2px solid #577db2" --list-background="#1a3c69" --item-color="#d6d6d6" --item-hover-bg="#0084ff"/>
\ No newline at end of file
+<Select {items} bind:value clearable={false} searchable={false} showChevron={true} placeholder={placeholder}
+        inputStyles="caret-color: transparent;" --list-border-radius="4px" --background="#17171c"
+        --border="2px solid #005cb3" --border-hover="2px solid #577db2" --border-focused="2px solid #577db2"
+        --list-background="#1a3c69" --item-color="#d6d6d6" --item-hover-bg="#0084ff"/>
\ No newline at end of file
diff --git a/src/lib/components/global/Switch.svelte b/src/lib/components/global/Switch.svelte
index efcaab5..4263258 100644
--- a/src/lib/components/global/Switch.svelte
+++ b/src/lib/components/global/Switch.svelte
@@ -25,10 +25,10 @@
 {#if design == "inner"}
     <div class="s s--inner">
         <button
-            role="switch"
-            aria-checked={checked}
-            aria-labelledby={`switch-${uniqueID}`}
-            on:click={handleClick}
+                role="switch"
+                aria-checked={checked}
+                aria-labelledby={`switch-${uniqueID}`}
+                on:click={handleClick}
         >
             <span>on</span>
             <span>off</span>
@@ -37,28 +37,28 @@
 {:else if design == "slider"}
     <div class="s s--slider" style="font-size:{fontSize}px">
         <button
-            role="switch"
-            aria-checked={checked}
-            aria-labelledby={`switch-${uniqueID}`}
-            on:click={handleClick}
+                role="switch"
+                aria-checked={checked}
+                aria-labelledby={`switch-${uniqueID}`}
+                on:click={handleClick}
         >
         </button>
     </div>
 {:else}
     <div class="s s--multi">
         <div
-            role="radiogroup"
-            class="group-container"
-            aria-labelledby={`label-${uniqueID}`}
-            style="font-size:{fontSize}px"
-            id={`group-${uniqueID}`}
+                role="radiogroup"
+                class="group-container"
+                aria-labelledby={`label-${uniqueID}`}
+                style="font-size:{fontSize}px"
+                id={`group-${uniqueID}`}
         >
             {#each options as option}
                 <input
-                    type="radio"
-                    id={`${option}-${uniqueID}`}
-                    value={option}
-                    bind:group={value}
+                        type="radio"
+                        id={`${option}-${uniqueID}`}
+                        value={option}
+                        bind:group={value}
                 />
                 <label for={`${option}-${uniqueID}`}>
                     {option}
@@ -73,12 +73,14 @@
         --accent-color: #0084ff;
         --gray: #ccc;
     }
+
     /* Inner Design Option */
     .s--inner button {
         padding: 0.5em;
         background-color: #fff;
         border: 1px solid var(--gray);
     }
+
     [role="switch"][aria-checked="true"] :first-child,
     [role="switch"][aria-checked="false"] :last-child {
         display: none;
diff --git a/src/lib/components/oldbotnav.svelte b/src/lib/components/oldbotnav.svelte
index e63cc09..b2fa262 100644
--- a/src/lib/components/oldbotnav.svelte
+++ b/src/lib/components/oldbotnav.svelte
@@ -1,34 +1,11 @@
-<div class="top">
-    <div class="icon-cont">
-        <a href="/">
-            <div class="icon-stack">
-                <div class="material-symbols-outlined" class:active={pageId === 0} >home</div>
-                <div class="stack-text">Home</div>
-            </div>
-        </a>
+<script>
+    export let pageId;
 
-        <a href="/register">
-            <div class="icon-stack">
-                <div class="material-symbols-outlined" class:active={pageId === 1}>person_add</div>
-                <div class="stack-text">Register</div>
-            </div>
-        </a>
+    import {fade} from 'svelte/transition';
 
-        <a href="/lookup">
-            <div class="icon-stack">
-                <div class="material-symbols-outlined" class:active={pageId === 2}>search</div>
-                <div class="stack-text">Lookup</div>
-            </div>
-        </a>
+    let comp1
 
-        <a href="/help">
-            <div class="icon-stack">
-                <div class="material-symbols-outlined" class:active={pageId === 3}>help</div>
-                <div class="stack-text">Help</div>
-            </div>
-        </a>
-    </div>
-</div>
+</script>
 
 <svelte:head>
     <link
@@ -37,15 +14,6 @@
     />
 </svelte:head>
 
-<script>
-    export let pageId;
-
-    import { fade } from 'svelte/transition';
-
-    let comp1
-
-</script>
-
 <style>
     .logo-cont a {
         display: inherit;
@@ -121,7 +89,7 @@
 
     }
 
-    .active{
+    .active {
         background-color: #003566;
         transition: background-color 1s;
     }
@@ -152,10 +120,41 @@
     }
 
 
-
     @media only screen and (min-width: 600px) {
         .top {
             display: none; /* Hide the entire top container */
         }
     }
 </style>
+
+<div class="top">
+    <div class="icon-cont">
+        <a href="/">
+            <div class="icon-stack">
+                <div class="material-symbols-outlined" class:active={pageId === 0}>home</div>
+                <div class="stack-text">Home</div>
+            </div>
+        </a>
+
+        <a href="/register">
+            <div class="icon-stack">
+                <div class="material-symbols-outlined" class:active={pageId === 1}>person_add</div>
+                <div class="stack-text">Register</div>
+            </div>
+        </a>
+
+        <a href="/lookup">
+            <div class="icon-stack">
+                <div class="material-symbols-outlined" class:active={pageId === 2}>search</div>
+                <div class="stack-text">Lookup</div>
+            </div>
+        </a>
+
+        <a href="/help">
+            <div class="icon-stack">
+                <div class="material-symbols-outlined" class:active={pageId === 3}>help</div>
+                <div class="stack-text">Help</div>
+            </div>
+        </a>
+    </div>
+</div>
diff --git a/src/routes/(admin)/admin/dash/+page.svelte b/src/routes/(admin)/admin/dash/+page.svelte
index f0f8535..acbe2bd 100644
--- a/src/routes/(admin)/admin/dash/+page.svelte
+++ b/src/routes/(admin)/admin/dash/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-    
+
 </script>
 
 <form action="https://locker-api.cvapps.net/admin/lockerUpload" method="post" enctype="multipart/form-data">
diff --git a/src/routes/(admin)/admin/edit/+page.svelte b/src/routes/(admin)/admin/edit/+page.svelte
index 6fe91c1..0457441 100644
--- a/src/routes/(admin)/admin/edit/+page.svelte
+++ b/src/routes/(admin)/admin/edit/+page.svelte
@@ -2,6 +2,7 @@
     import LockerEdit from "./views/LockerEdit.svelte";
     import UserEdit from "./views/UserEdit.svelte";
     import CreateUser from "./views/CreateUser.svelte";
+
     let selected = UserEdit;
 
 
@@ -30,7 +31,7 @@
 
     }
 
-    .top-menu{
+    .top-menu {
         display: flex;
         align-items: center;
         justify-content: right;
@@ -40,7 +41,7 @@
         /* background-color:green; */
     }
 
-    .dataselect-button{
+    .dataselect-button {
         /* width: 80px; */
         color: #d6d6d6;
         height: 50px;
@@ -55,16 +56,16 @@
         background-color: #1b2c42;
     }
 
-    .dataselect-button:hover{
+    .dataselect-button:hover {
         /* background-color: ; */
         cursor: pointer;
     }
 
-    .data-active-button{
+    .data-active-button {
         background-color: #003566;
     }
 
-    .sub-scroll{
+    .sub-scroll {
         flex: 1;
         overflow-y: scroll;
     }
@@ -73,9 +74,15 @@
 
 <div class="main">
     <div class="top-menu">
-        <div class="dataselect-button" on:click={() => (selected = UserEdit)} class:data-active-button={selected === UserEdit}>Users</div>
-        <div class="dataselect-button" on:click={() => (selected = LockerEdit)} class:data-active-button={selected === LockerEdit}>Lockers</div>
-        <div class="dataselect-button" on:click={() => (selected = CreateUser)} class:data-active-button={selected === CreateUser}>+ Create</div>
+        <div class="dataselect-button" on:click={() => (selected = UserEdit)}
+             class:data-active-button={selected === UserEdit}>Users
+        </div>
+        <div class="dataselect-button" on:click={() => (selected = LockerEdit)}
+             class:data-active-button={selected === LockerEdit}>Lockers
+        </div>
+        <div class="dataselect-button" on:click={() => (selected = CreateUser)}
+             class:data-active-button={selected === CreateUser}>+ Create
+        </div>
     </div>
     <div class="sub-scroll">
         <svelte:component this={selected}/>
diff --git a/src/routes/(admin)/admin/manage/+page.svelte b/src/routes/(admin)/admin/manage/+page.svelte
index 24e420d..4691b20 100644
--- a/src/routes/(admin)/admin/manage/+page.svelte
+++ b/src/routes/(admin)/admin/manage/+page.svelte
@@ -8,62 +8,6 @@
     <title>Locker - Manage</title>
 </svelte:head>
 
-<div class="main">
-    <div class="grid-container">
-        <div class="grid-item">
-            <div class="subcont-main">
-                <div class="subcont-title">Config Restrictions</div>
-                <div class="subcont-order">
-                    <RegisterEdit/>
-                    <BuildingEdit/>
-                </div>
-            </div>
-
-        </div>
-
-        <div class="grid-item">
-            <div class="subcont-main">
-                <div class="subcont-title">Upload Data</div>
-                <div class="import-cont">
-                    <div class="form">
-                        <form
-                                action="https://locker-api.cvapps.net/admin/lockerUpload"
-                                enctype="multipart/form-data"
-                                method="post"
-                        >
-                            <input
-                                    accept=".csv"
-                                    name="csvFile"
-                                    required
-                                    type="file"
-                            />
-                            <button type="submit">Upload Locker</button>
-                        </form>
-                    </div>
-
-                    <div class="form">
-                        <form
-                                action="https://locker-api.cvapps.net/admin/userUpload"
-                                enctype="multipart/form-data"
-                                method="post"
-                        >
-                            <input
-                                    accept=".csv"
-                                    name="csvFile"
-                                    required
-                                    type="file"
-                            />
-                            <button type="submit">Upload User</button>
-                        </form>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="grid-item"></div>
-        <div class="grid-item"></div>
-    </div>
-</div>
-
 <style>
     :root {
         --text: #d6d6d6;
@@ -150,3 +94,59 @@
         height: 100%;
     }
 </style>
+
+<div class="main">
+    <div class="grid-container">
+        <div class="grid-item">
+            <div class="subcont-main">
+                <div class="subcont-title">Config Restrictions</div>
+                <div class="subcont-order">
+                    <RegisterEdit/>
+                    <BuildingEdit/>
+                </div>
+            </div>
+
+        </div>
+
+        <div class="grid-item">
+            <div class="subcont-main">
+                <div class="subcont-title">Upload Data</div>
+                <div class="import-cont">
+                    <div class="form">
+                        <form
+                                action="https://locker-api.cvapps.net/admin/lockerUpload"
+                                enctype="multipart/form-data"
+                                method="post"
+                        >
+                            <input
+                                    accept=".csv"
+                                    name="csvFile"
+                                    required
+                                    type="file"
+                            />
+                            <button type="submit">Upload Locker</button>
+                        </form>
+                    </div>
+
+                    <div class="form">
+                        <form
+                                action="https://locker-api.cvapps.net/admin/userUpload"
+                                enctype="multipart/form-data"
+                                method="post"
+                        >
+                            <input
+                                    accept=".csv"
+                                    name="csvFile"
+                                    required
+                                    type="file"
+                            />
+                            <button type="submit">Upload User</button>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="grid-item"></div>
+        <div class="grid-item"></div>
+    </div>
+</div>
diff --git a/src/routes/(admin)/admin/manage/BuildingEdit.svelte b/src/routes/(admin)/admin/manage/BuildingEdit.svelte
index 11ca51b..b108816 100644
--- a/src/routes/(admin)/admin/manage/BuildingEdit.svelte
+++ b/src/routes/(admin)/admin/manage/BuildingEdit.svelte
@@ -25,34 +25,6 @@
     }
 </script>
 
-<div class="area-restrictions-cont">
-{#if showData}
-
-        {#each Object.keys(areas) as building}
-            <div class="building">
-                <div class="area-restrictions-title">
-                    Building {building.split("_")[1]}
-                </div>
-                {#each Object.keys(areas[building]) as floor}
-                    <div class="floor">
-                        <div class="area-restrictions-title">
-                            Floor {floor.split("_")[1]}
-                        </div>
-                        <Switch
-                                bind:checked={areas[building][floor]}
-                                fontSize={12}
-                                design="slider"
-                        />
-                    </div>
-                {/each}
-            </div>
-        {/each}
-
-{:else}
-    <Stretch size="60" color="#577db2" unit="px" duration="1s"/>
-{/if}
-</div>
-
 <style>
     .area-restrictions-cont {
         align-items: center;
@@ -100,3 +72,31 @@
         color: #d6d6d6;
     }
 </style>
+
+<div class="area-restrictions-cont">
+    {#if showData}
+
+        {#each Object.keys(areas) as building}
+            <div class="building">
+                <div class="area-restrictions-title">
+                    Building {building.split("_")[1]}
+                </div>
+                {#each Object.keys(areas[building]) as floor}
+                    <div class="floor">
+                        <div class="area-restrictions-title">
+                            Floor {floor.split("_")[1]}
+                        </div>
+                        <Switch
+                                bind:checked={areas[building][floor]}
+                                fontSize={12}
+                                design="slider"
+                        />
+                    </div>
+                {/each}
+            </div>
+        {/each}
+
+    {:else}
+        <Stretch size="60" color="#577db2" unit="px" duration="1s"/>
+    {/if}
+</div>
diff --git a/src/routes/(admin)/admin/settings/+page.svelte b/src/routes/(admin)/admin/settings/+page.svelte
index f54c178..f27f2e3 100644
--- a/src/routes/(admin)/admin/settings/+page.svelte
+++ b/src/routes/(admin)/admin/settings/+page.svelte
@@ -1,4 +1,3 @@
-
 <svelte:head>
     <title>Locker - Settings</title>
 </svelte:head>
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index 7bc8ecd..e8003ae 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -28,6 +28,6 @@
 
 <div class="layout-main">
     <Topnav/>
-        <slot/>
+    <slot/>
     <Botnav/>
 </div>
diff --git a/src/routes/(app)/+page.svelte b/src/routes/(app)/+page.svelte
index 04319f1..10801db 100644
--- a/src/routes/(app)/+page.svelte
+++ b/src/routes/(app)/+page.svelte
@@ -16,21 +16,6 @@
     <meta content="cvapps.net" name="author"/>
 </svelte:head>
 
-<div class="main">
-    <div class="sub">
-        <div class="graphic">
-            <img alt="CVHS falcon logo" class="big-logo" src="/CVHS-logo.png">
-        </div>
-
-        <div class="landing">
-            <h1>Welcome To CV Locker</h1>
-        </div>
-
-
-
-    </div>
-</div>
-
 <style>
     :root {
         --text: #d6d6d6;
@@ -75,3 +60,17 @@
         height: 100%;
     }
 </style>
+
+<div class="main">
+    <div class="sub">
+        <div class="graphic">
+            <img alt="CVHS falcon logo" class="big-logo" src="/CVHS-logo.png">
+        </div>
+
+        <div class="landing">
+            <h1>Welcome To CV Locker</h1>
+        </div>
+
+
+    </div>
+</div>
diff --git a/src/routes/(app)/help/+page.svelte b/src/routes/(app)/help/+page.svelte
index 05ff48e..172db50 100644
--- a/src/routes/(app)/help/+page.svelte
+++ b/src/routes/(app)/help/+page.svelte
@@ -14,17 +14,6 @@
     <meta content="cvapps.net" name="author"/>
 </svelte:head>
 
-<div class="main">
-    <!--    <Topnav />-->
-    <div class="sub">
-        <img alt="CVHS falcon logo" class="big-logo" src="/CVHS-logo.png">
-        <ul class="list">
-            <li><p>Please contact the AP office for help with locker registration: <a href ="mailto:miguelgonzalez@gusd.net" target="_blank">Miguel Gonzalez</a></p></li>
-        </ul>
-    </div>
-    <!--    <Botnav pageId={0}/>-->
-</div>
-
 <style>
     :root {
         --text: #d6d6d6;
@@ -41,23 +30,39 @@
         width: 100vw;
         flex: 1;
     }
-    .list{
-        padding:2vw;
+
+    .list {
+        padding: 2vw;
     }
-    .big-logo{
+
+    .big-logo {
         display: block;
         max-height: 20vh;
         margin-left: auto;
         margin-right: auto;
     }
-    p, a{
+
+    p, a {
         font-size: 20px;
         font-family: 'Montserrat', sans-serif;
         color: #d6d6d6;
         text-align: center;
-        padding:1vh;
+        padding: 1vh;
     }
-    .sub{
+
+    .sub {
     }
 
 </style>
+
+<div class="main">
+    <!--    <Topnav />-->
+    <div class="sub">
+        <img alt="CVHS falcon logo" class="big-logo" src="/CVHS-logo.png">
+        <ul class="list">
+            <li><p>Please contact the AP office for help with locker registration: <a
+                    href="mailto:miguelgonzalez@gusd.net" target="_blank">Miguel Gonzalez</a></p></li>
+        </ul>
+    </div>
+    <!--    <Botnav pageId={0}/>-->
+</div>
diff --git a/src/routes/(app)/lookup/+page.svelte b/src/routes/(app)/lookup/+page.svelte
index 4c8999f..99da064 100644
--- a/src/routes/(app)/lookup/+page.svelte
+++ b/src/routes/(app)/lookup/+page.svelte
@@ -31,14 +31,6 @@
     <meta content="cvapps.net" name="author"/>
 </svelte:head>
 
-<div class="main" in:fade={{ delay: 0, duration: 700, easing: quartOut}}>
-    <svelte:component
-            data={data}
-            on:message={handleMessage}
-            this={selected}
-    />
-</div>
-
 <style>
     .main {
         display: flex;
@@ -48,3 +40,11 @@
         flex: 1;
     }
 </style>
+
+<div class="main" in:fade={{ delay: 0, duration: 700, easing: quartOut}}>
+    <svelte:component
+            data={data}
+            on:message={handleMessage}
+            this={selected}
+    />
+</div>
diff --git a/src/routes/(app)/lookup/views/lookup.svelte b/src/routes/(app)/lookup/views/lookup.svelte
index 8bfaa80..9b9b2ba 100644
--- a/src/routes/(app)/lookup/views/lookup.svelte
+++ b/src/routes/(app)/lookup/views/lookup.svelte
@@ -1,6 +1,6 @@
 <script>
     import {createEventDispatcher, onMount} from "svelte";
-    import { fetchLocker } from "$lib/services/app/mainApi.js";
+    import {fetchLocker} from "$lib/services/app/mainApi.js";
     import {page} from "$app/stores";
     import {goto} from "$app/navigation";
 
@@ -11,7 +11,7 @@
 
     let id = $page.url.searchParams.get('id');
 
-    if(id) {
+    if (id) {
         studentID = id;
         submit();
     }
@@ -34,7 +34,7 @@
             input.style.borderColor = "red";
             input.value = "";
             input.placeholder = "Internal system error";
-            
+
         }
     }
 
@@ -45,7 +45,6 @@
     }
 
 
-
 </script>
 
 <style>
@@ -182,13 +181,13 @@
             <div class="lookup-form" on:keydown={handleKeyPress}>
                 <!--                <label for="username">Student ID Number</label>-->
                 <input
-                    bind:this={input}
-                    bind:value={studentID}
-                    id="studentID"
-                    name="studentID"
-                    placeholder="Student ID"
-                    required
-                    type="text"
+                        bind:this={input}
+                        bind:value={studentID}
+                        id="studentID"
+                        name="studentID"
+                        placeholder="Student ID"
+                        required
+                        type="text"
                 />
 
                 <button class="submit" on:click={submit}>Search</button>
diff --git a/src/routes/(app)/lookup/views/show.svelte b/src/routes/(app)/lookup/views/show.svelte
index a9d7e3f..775d078 100644
--- a/src/routes/(app)/lookup/views/show.svelte
+++ b/src/routes/(app)/lookup/views/show.svelte
@@ -79,7 +79,7 @@
         font-size: 24px;
     }
 
-    .expand{
+    .expand {
         display: flex;
         gap: 10px;
         flex-direction: column;
diff --git a/src/routes/(app)/register/+page.svelte b/src/routes/(app)/register/+page.svelte
index 3b71e52..36e1a86 100644
--- a/src/routes/(app)/register/+page.svelte
+++ b/src/routes/(app)/register/+page.svelte
@@ -15,13 +15,11 @@
 
     let selected;
 
-    $: if($pageView === 0) selected = Status;
-    $: if($pageView === 1) selected = Selection;
-    $: if($pageView === 2) selected = View1;
-    $: if($pageView === 3) selected = View2;
-    $: if($pageView === 4) selected = Final;
-
-
+    $: if ($pageView === 0) selected = Status;
+    $: if ($pageView === 1) selected = Selection;
+    $: if ($pageView === 2) selected = View1;
+    $: if ($pageView === 3) selected = View2;
+    $: if ($pageView === 4) selected = Final;
 
 
 </script>
diff --git a/src/routes/(app)/register/views/Final.svelte b/src/routes/(app)/register/views/Final.svelte
index 3f772f4..b451e6f 100644
--- a/src/routes/(app)/register/views/Final.svelte
+++ b/src/routes/(app)/register/views/Final.svelte
@@ -15,45 +15,31 @@
 
     async function next() {
         studentsArr[0] = $studentId1;
-        if(!$singleLocker) studentsArr[1] = $studentId2;
+        if (!$singleLocker) studentsArr[1] = $studentId2;
 
         let finalArr = {
             "students": studentsArr,
             "location": $selectedLocation,
         }
         let response = await submitLockers(finalArr);
-        if(response.ok){
+        if (response.ok) {
             //clear the regestration stores / kinda jank but ok
             selectedLocation.set({});
             registrationData.set({});
             singleLocker.set(false);
 
             await goto(`/lookup?id=${$studentId1}`);
-            
+
             studentId1.set(null);
             studentId2.set(null);
             pageView.set(0);
-        }else{
+        } else {
             //todo show error reason
         }
     }
 
 </script>
 
-<div class="main" in:slide={{ delay: 250, duration: 600, easing: quartOut, axis: 'x' }}>
-    <div class="box">
-        <div class="box-cont">
-            <div class="box-header">Confirm Locker Selection</div>
-            <div class="small-text">Your locker is assigned randomly</div>
-            <div class="selection-div">
-
-            </div>
-
-            <button class="submit" on:click={next}>{buttonMessage}</button>
-        </div>
-    </div>
-</div>
-
 <style>
     :root {
         --text: #d6d6d6;
@@ -98,7 +84,7 @@
         margin-bottom: 24px;
     }
 
-    .small-text{
+    .small-text {
         text-align: left;
         font-size: 14px;
         color: var(--text);
@@ -164,3 +150,17 @@
         }
     }
 </style>
+
+<div class="main" in:slide={{ delay: 250, duration: 600, easing: quartOut, axis: 'x' }}>
+    <div class="box">
+        <div class="box-cont">
+            <div class="box-header">Confirm Locker Selection</div>
+            <div class="small-text">Your locker is assigned randomly</div>
+            <div class="selection-div">
+
+            </div>
+
+            <button class="submit" on:click={next}>{buttonMessage}</button>
+        </div>
+    </div>
+</div>
diff --git a/src/routes/(app)/register/views/Selection.svelte b/src/routes/(app)/register/views/Selection.svelte
index 13b2d5d..2c43964 100644
--- a/src/routes/(app)/register/views/Selection.svelte
+++ b/src/routes/(app)/register/views/Selection.svelte
@@ -12,7 +12,6 @@
     let buttonMessage = 'Submit';
 
 
-
     let areas = {};
     let data1 = [];
     let data2 = [];
@@ -34,7 +33,7 @@
             floor: value2.label,
             level: value3.label,
         });
-        if(value3.label === "Single") singleLocker.set(true);
+        if (value3.label === "Single") singleLocker.set(true);
 
         console.log($selectedLocation);
         pageView.set(2);
@@ -64,42 +63,13 @@
         }
     }
 
-    function clear(number){
-        if(number === 1) value2 = null;
-        if(number === 2) value3 = null;
+    function clear(number) {
+        if (number === 1) value2 = null;
+        if (number === 2) value3 = null;
     }
 
 </script>
 
-<div class="main" in:slide={{ delay: 250, duration: 600, easing: quartOut, axis: 'x' }}>
-    <div class="box">
-        <div class="box-cont">
-            <div class="box-header">Select locker Location</div>
-
-            <div class="selection-div">
-
-                <div class="input-group">
-                    <div class="selection-label">Building</div>
-                    <Select items={data1} placeholder="Select Building" bind:value={value1}/>
-                </div>
-
-                <div class="input-group">
-                    <div class="selection-label">Floor</div>
-                    <Select items={data2} placeholder="Select Floor" bind:value={value2}/>
-                </div>
-
-                <div class="input-group">
-                    <div class="selection-label">Position</div>
-                    <Select items={data3} placeholder="Select Position" bind:value={value3}/>
-                </div>
-
-            </div>
-
-            <button class="submit" on:click={next}>{buttonMessage}</button>
-        </div>
-    </div>
-</div>
-
 <style>
     :root {
         --text: #d6d6d6;
@@ -144,7 +114,7 @@
         margin-bottom: 24px;
     }
 
-    .small-text{
+    .small-text {
         font-size: 14px;
         color: var(--text);
         margin-bottom: 8px;
@@ -157,11 +127,11 @@
         gap: 15px;
     }
 
-    .input-group{
+    .input-group {
         width: 100%;
     }
 
-    .selection-label{
+    .selection-label {
         font-size: 14px;
         font-weight: bold;
         color: var(--text);
@@ -226,3 +196,32 @@
         }
     }
 </style>
+
+<div class="main" in:slide={{ delay: 250, duration: 600, easing: quartOut, axis: 'x' }}>
+    <div class="box">
+        <div class="box-cont">
+            <div class="box-header">Select locker Location</div>
+
+            <div class="selection-div">
+
+                <div class="input-group">
+                    <div class="selection-label">Building</div>
+                    <Select items={data1} placeholder="Select Building" bind:value={value1}/>
+                </div>
+
+                <div class="input-group">
+                    <div class="selection-label">Floor</div>
+                    <Select items={data2} placeholder="Select Floor" bind:value={value2}/>
+                </div>
+
+                <div class="input-group">
+                    <div class="selection-label">Position</div>
+                    <Select items={data3} placeholder="Select Position" bind:value={value3}/>
+                </div>
+
+            </div>
+
+            <button class="submit" on:click={next}>{buttonMessage}</button>
+        </div>
+    </div>
+</div>
diff --git a/src/routes/(app)/register/views/Status.svelte b/src/routes/(app)/register/views/Status.svelte
index e758430..c7c643e 100644
--- a/src/routes/(app)/register/views/Status.svelte
+++ b/src/routes/(app)/register/views/Status.svelte
@@ -1,9 +1,9 @@
 <script>
     import {createEventDispatcher} from "svelte";
-    import { writable } from "svelte/store";
+    import {writable} from "svelte/store";
     import {onMount} from "svelte";
-    import { fade } from "svelte/transition";
-    import { quartOut } from "svelte/easing";
+    import {fade} from "svelte/transition";
+    import {quartOut} from "svelte/easing";
 
     import {fetchEnabledGrades} from "$lib/services/app/mainApi.js";
     import {pageView} from "../store.js";
@@ -11,7 +11,7 @@
 
     const gradesStore = writable({});
 
-    function next(){
+    function next() {
         pageView.set(1);
     }
 
@@ -20,75 +20,6 @@
     });
 </script>
 
-<div class="main" in:fade={{ delay: 0, duration: 700, easing: quartOut }}>
-    <div class="box">
-        <div class="box-cont">
-            <div class="box-header">Grades that can Register:</div>
-
-            <div class="stat-div">
-                <div class="stat-1-subcont-1">
-                    <div class="stat-1-grade-cont">
-                        <div class="stat-1-grade-element-subcont">
-                            <div
-                                class="material-symbols-outlined filled-icons"
-                                style={$gradesStore.grade_12
-                                    ? "color:darkgreen"
-                                    : "color:darkred"}
-                            >
-                                {$gradesStore.grade_12
-                                    ? "check_circle"
-                                    : "cancel"}
-                            </div>
-                            <div class="stat-1-grade-text">Grade 12</div>
-                        </div>
-                        <div class="stat-1-grade-element-subcont">
-                            <div
-                                class="material-symbols-outlined filled-icons"
-                                style={$gradesStore.grade_11
-                                    ? "color:darkgreen"
-                                    : "color:darkred"}
-                            >
-                                {$gradesStore.grade_11
-                                    ? "check_circle"
-                                    : "cancel"}
-                            </div>
-                            <div class="stat-1-grade-text">Grade 11</div>
-                        </div>
-                        <div class="stat-1-grade-element-subcont">
-                            <div
-                                class="material-symbols-outlined filled-icons"
-                                style={$gradesStore.grade_10
-                                    ? "color:darkgreen"
-                                    : "color:darkred"}
-                            >
-                                {$gradesStore.grade_10
-                                    ? "check_circle"
-                                    : "cancel"}
-                            </div>
-                            <div class="stat-1-grade-text">Grade 10</div>
-                        </div>
-                        <div class="stat-1-grade-element-subcont">
-                            <div
-                                class="material-symbols-outlined filled-icons"
-                                style={$gradesStore.grade_9
-                                    ? "color:darkgreen"
-                                    : "color:darkred"}
-                            >
-                                {$gradesStore.grade_9
-                                    ? "check_circle"
-                                    : "cancel"}
-                            </div>
-                            <div class="stat-1-grade-text">Grade 9</div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <button class="submit" on:click={next}>Start Registration</button>
-        </div>
-    </div>
-</div>
-
 <style>
     :root {
         --text: #d6d6d6;
@@ -201,11 +132,10 @@
     }
 
     .filled-icons {
-        font-variation-settings:
-            "FILL" 1,
-            "wght" 600,
-            "GRAD" 0,
-            "opsz" 24;
+        font-variation-settings: "FILL" 1,
+        "wght" 600,
+        "GRAD" 0,
+        "opsz" 24;
     }
 
     @media only screen and (max-width: 600px) {
@@ -228,8 +158,77 @@
             width: 90vw;
         }
 
-        .stat-1-grade-element-subcont{
+        .stat-1-grade-element-subcont {
             background-color: #090606;
         }
     }
 </style>
+
+<div class="main" in:fade={{ delay: 0, duration: 700, easing: quartOut }}>
+    <div class="box">
+        <div class="box-cont">
+            <div class="box-header">Grades that can Register:</div>
+
+            <div class="stat-div">
+                <div class="stat-1-subcont-1">
+                    <div class="stat-1-grade-cont">
+                        <div class="stat-1-grade-element-subcont">
+                            <div
+                                    class="material-symbols-outlined filled-icons"
+                                    style={$gradesStore.grade_12
+                                    ? "color:darkgreen"
+                                    : "color:darkred"}
+                            >
+                                {$gradesStore.grade_12
+                                    ? "check_circle"
+                                    : "cancel"}
+                            </div>
+                            <div class="stat-1-grade-text">Grade 12</div>
+                        </div>
+                        <div class="stat-1-grade-element-subcont">
+                            <div
+                                    class="material-symbols-outlined filled-icons"
+                                    style={$gradesStore.grade_11
+                                    ? "color:darkgreen"
+                                    : "color:darkred"}
+                            >
+                                {$gradesStore.grade_11
+                                    ? "check_circle"
+                                    : "cancel"}
+                            </div>
+                            <div class="stat-1-grade-text">Grade 11</div>
+                        </div>
+                        <div class="stat-1-grade-element-subcont">
+                            <div
+                                    class="material-symbols-outlined filled-icons"
+                                    style={$gradesStore.grade_10
+                                    ? "color:darkgreen"
+                                    : "color:darkred"}
+                            >
+                                {$gradesStore.grade_10
+                                    ? "check_circle"
+                                    : "cancel"}
+                            </div>
+                            <div class="stat-1-grade-text">Grade 10</div>
+                        </div>
+                        <div class="stat-1-grade-element-subcont">
+                            <div
+                                    class="material-symbols-outlined filled-icons"
+                                    style={$gradesStore.grade_9
+                                    ? "color:darkgreen"
+                                    : "color:darkred"}
+                            >
+                                {$gradesStore.grade_9
+                                    ? "check_circle"
+                                    : "cancel"}
+                            </div>
+                            <div class="stat-1-grade-text">Grade 9</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <button class="submit" on:click={next}>Start Registration</button>
+        </div>
+    </div>
+</div>
diff --git a/src/routes/(app)/register/views/View1.svelte b/src/routes/(app)/register/views/View1.svelte
index 72f38c0..4134691 100644
--- a/src/routes/(app)/register/views/View1.svelte
+++ b/src/routes/(app)/register/views/View1.svelte
@@ -1,7 +1,7 @@
 <script>
-    import { createEventDispatcher } from "svelte";
-    import { slide } from "svelte/transition";
-    import { quartOut } from "svelte/easing";
+    import {createEventDispatcher} from "svelte";
+    import {slide} from "svelte/transition";
+    import {quartOut} from "svelte/easing";
     import {
         validateID,
         sendVerification,
@@ -137,60 +137,17 @@
     <title>Register</title>
 
     <meta
-        content="Register for a locker at Crescenta Valley High School (CVHS) for the upcoming school year. Secure your locker space and stay organized."
-        name="description"
+            content="Register for a locker at Crescenta Valley High School (CVHS) for the upcoming school year. Secure your locker space and stay organized."
+            name="description"
     />
     <meta
-        content="Crescenta Valley High School, CVHS, locker registration, school locker, locker allocation, locker assignment"
-        name="keywords"
+            content="Crescenta Valley High School, CVHS, locker registration, school locker, locker allocation, locker assignment"
+            name="keywords"
     />
-    <meta content="cvapps.net" name="author" />
+    <meta content="cvapps.net" name="author"/>
 </svelte:head>
 
 <!--todo fix layout shift that occurs from transition-->
-<div
-    class="main"
-    in:slide={{ delay: 250, duration: 600, easing: quartOut, axis: "x" }}
->
-    <div class="login">
-        <div class="login-cont">
-            <div class="login-header">Verify IDs</div>
-
-            <form
-                class="login-form"
-                on:keydown={handleKeyPress}
-                on:submit={login}
-            >
-                <label>Student 1</label>
-
-                <input
-                    bind:this={input1}
-                    bind:value={student1}
-                    id="1studentId"
-                    name="1studentId"
-                    placeholder="Student ID"
-                    required
-                    type="text"
-                />
-
-                {#if !$singleLocker}
-                    <label>Student 2</label>
-                    <input
-                        bind:value={student2}
-                        bind:this={input2}
-                        id="2studentId"
-                        name="2studentId"
-                        placeholder="Student ID"
-                        required
-                        type="text"
-                    />
-                {/if}
-                <button class="submit" type="submit">Next</button>
-            </form>
-        </div>
-    </div>
-</div>
-
 <style>
     :root {
         --text: #d6d6d6;
@@ -361,3 +318,46 @@
         }
     }
 </style>
+
+<div
+        class="main"
+        in:slide={{ delay: 250, duration: 600, easing: quartOut, axis: "x" }}
+>
+    <div class="login">
+        <div class="login-cont">
+            <div class="login-header">Verify IDs</div>
+
+            <form
+                    class="login-form"
+                    on:keydown={handleKeyPress}
+                    on:submit={login}
+            >
+                <label>Student 1</label>
+
+                <input
+                        bind:this={input1}
+                        bind:value={student1}
+                        id="1studentId"
+                        name="1studentId"
+                        placeholder="Student ID"
+                        required
+                        type="text"
+                />
+
+                {#if !$singleLocker}
+                    <label>Student 2</label>
+                    <input
+                            bind:value={student2}
+                            bind:this={input2}
+                            id="2studentId"
+                            name="2studentId"
+                            placeholder="Student ID"
+                            required
+                            type="text"
+                    />
+                {/if}
+                <button class="submit" type="submit">Next</button>
+            </form>
+        </div>
+    </div>
+</div>
diff --git a/src/routes/(app)/register/views/View2.svelte b/src/routes/(app)/register/views/View2.svelte
index 24beb1f..be17f04 100644
--- a/src/routes/(app)/register/views/View2.svelte
+++ b/src/routes/(app)/register/views/View2.svelte
@@ -18,15 +18,15 @@
         // pageView.set(3);
     }
 
-    async function checkIDs(){
-        if($singleLocker){
+    async function checkIDs() {
+        if ($singleLocker) {
             let response = await checkVerification($studentId1);
             let json = await response.json();
 
             studentStatusStore.set({student_1: json.verified});
 
-            if($studentStatusStore.student_1) pageView.set(4);
-        }else{
+            if ($studentStatusStore.student_1) pageView.set(4);
+        } else {
             let response1 = await checkVerification($studentId1);
             let response2 = await checkVerification($studentId2);
             let json1 = await response1.json();
@@ -34,7 +34,7 @@
 
             studentStatusStore.set({student_1: json1.verified, student_2: json2.verified});
 
-            if($studentStatusStore.student_1 && $studentStatusStore.student_2) pageView.set(4);
+            if ($studentStatusStore.student_1 && $studentStatusStore.student_2) pageView.set(4);
         }
 
 
@@ -48,55 +48,6 @@
 
 </script>
 
-<div class="main" in:slide={{ delay: 250, duration: 600, easing: quartOut, axis: 'x' }}>
-    <div class="box">
-        <div class="box-cont">
-            <div class="box-header">Verification Status</div>
-            <div class="small-text">Check Your School Email for Verification link</div>
-            <div class="stat-div">
-                <div class="stat-1-subcont-1">
-                    <div class="stat-1-grade-cont">
-
-
-                        <div class="stat-1-grade-element-subcont">
-                            <div
-                                    class="material-symbols-outlined filled-icons"
-                                    style={$studentStatusStore.student_1
-                                    ? "color:darkgreen"
-                                    : "color:darkred"}
-                            >
-                                {$studentStatusStore.student_1
-                                    ? "check_circle"
-                                    : "cancel"}
-                            </div>
-                            <div class="stat-1-grade-text">{$studentId1}</div>
-                        </div>
-
-                        {#if !$singleLocker}
-                            <div class="stat-1-grade-element-subcont">
-                                <div
-                                        class="material-symbols-outlined filled-icons"
-                                        style={$studentStatusStore.student_2
-                                    ? "color:darkgreen"
-                                    : "color:darkred"}
-                                >
-                                    {$studentStatusStore.student_2
-                                        ? "check_circle"
-                                        : "cancel"}
-                                </div>
-                                <div class="stat-1-grade-text">{$studentId2}</div>
-                            </div>
-                        {/if}
-
-                    </div>
-                </div>
-            </div>
-
-            <button class="submit" on:click={next}>{buttonMessage}</button>
-        </div>
-    </div>
-</div>
-
 <style>
     :root {
         --text: #d6d6d6;
@@ -141,7 +92,7 @@
         margin-bottom: 24px;
     }
 
-    .small-text{
+    .small-text {
         text-align: left;
         font-size: 14px;
         color: var(--text);
@@ -247,3 +198,52 @@
         }
     }
 </style>
+
+<div class="main" in:slide={{ delay: 250, duration: 600, easing: quartOut, axis: 'x' }}>
+    <div class="box">
+        <div class="box-cont">
+            <div class="box-header">Verification Status</div>
+            <div class="small-text">Check Your School Email for Verification link</div>
+            <div class="stat-div">
+                <div class="stat-1-subcont-1">
+                    <div class="stat-1-grade-cont">
+
+
+                        <div class="stat-1-grade-element-subcont">
+                            <div
+                                    class="material-symbols-outlined filled-icons"
+                                    style={$studentStatusStore.student_1
+                                    ? "color:darkgreen"
+                                    : "color:darkred"}
+                            >
+                                {$studentStatusStore.student_1
+                                    ? "check_circle"
+                                    : "cancel"}
+                            </div>
+                            <div class="stat-1-grade-text">{$studentId1}</div>
+                        </div>
+
+                        {#if !$singleLocker}
+                            <div class="stat-1-grade-element-subcont">
+                                <div
+                                        class="material-symbols-outlined filled-icons"
+                                        style={$studentStatusStore.student_2
+                                    ? "color:darkgreen"
+                                    : "color:darkred"}
+                                >
+                                    {$studentStatusStore.student_2
+                                        ? "check_circle"
+                                        : "cancel"}
+                                </div>
+                                <div class="stat-1-grade-text">{$studentId2}</div>
+                            </div>
+                        {/if}
+
+                    </div>
+                </div>
+            </div>
+
+            <button class="submit" on:click={next}>{buttonMessage}</button>
+        </div>
+    </div>
+</div>
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
index c3e6a66..7b4f0d2 100644
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { page } from '$app/stores';
+    import {page} from '$app/stores';
 
 </script>
 
@@ -7,39 +7,31 @@
     <title>Lookup</title>
 
     <meta
-        name="description"
-        content="Find your locker at Crescenta Valley High School (CVHS) with our locker lookup tool. Easily locate your locker and get organized for the school year."
+            name="description"
+            content="Find your locker at Crescenta Valley High School (CVHS) with our locker lookup tool. Easily locate your locker and get organized for the school year."
     />
     <meta
-        name="keywords"
-        content="Crescenta Valley High School, CVHS, locker lookup, locker search, school locker"
+            name="keywords"
+            content="Crescenta Valley High School, CVHS, locker lookup, locker search, school locker"
     />
-    <meta name="author" content="cvapps.net" />
+    <meta name="author" content="cvapps.net"/>
 </svelte:head>
 
-<div class="main">
-    <div class="sub">
-        <h1>{$page.status}</h1>
-        <a href="/"><img alt="cv logo" class="logo" loading="eager" rel="preload" src="/CVHS-logo.png"/></a>
-        <h1>{$page.error.message}</h1>
-	</div>
-</div>
-
 <style>
-	:root {
+    :root {
         --text: #d6d6d6;
         --background: #101014;
         --primary: #0084ff;
         --secondary: #1b2c42;
         --accent: #577db2;
     }
-    
-    h1{
+
+    h1 {
         margin: 0;
         font-size: 36px;
     }
 
-    .logo{
+    .logo {
         width: 10vw;
     }
 
@@ -55,13 +47,21 @@
         background-color: var(--background);
     }
 
-	.sub{
-		display: flex;
-		flex-direction: column;
-		gap: 10px;
-		align-items: center;
-		justify-content: center;
-		flex: 1;
-		color: var(--text);
-	}
+    .sub {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        align-items: center;
+        justify-content: center;
+        flex: 1;
+        color: var(--text);
+    }
 </style>
+
+<div class="main">
+    <div class="sub">
+        <h1>{$page.status}</h1>
+        <a href="/"><img alt="cv logo" class="logo" loading="eager" rel="preload" src="/CVHS-logo.png"/></a>
+        <h1>{$page.error.message}</h1>
+    </div>
+</div>
diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
index 77718ba..d4ea2cb 100644
--- a/src/routes/login/+page.svelte
+++ b/src/routes/login/+page.svelte
@@ -1,7 +1,7 @@
 <script>
     // import Topnav from "$lib/components/Topnav.svelte";
-    import { Stretch } from "svelte-loading-spinners";
-    import { goto } from "$app/navigation";
+    import {Stretch} from "svelte-loading-spinners";
+    import {goto} from "$app/navigation";
 
     let username = "";
     let password = "";
@@ -221,7 +221,7 @@
 <div class="main">
     <div class="top">
         <a href="/static"
-            ><img alt="IMS logo" class="logo" src="/CVHS-logo.png" /></a
+        ><img alt="IMS logo" class="logo" src="/CVHS-logo.png"/></a
         >
         <div class="top-text">CVHS Locker System</div>
     </div>
@@ -233,20 +233,20 @@
             <div class="login-form" on:keydown={handleKeyPress}>
                 <label for="username">Username</label>
                 <input
-                    bind:value={username}
-                    id="username"
-                    name="username"
-                    required
-                    type="text"
+                        bind:value={username}
+                        id="username"
+                        name="username"
+                        required
+                        type="text"
                 />
 
                 <label for="password">Password</label>
                 <input
-                    bind:value={password}
-                    id="password"
-                    name="password"
-                    required
-                    type="password"
+                        bind:value={password}
+                        id="password"
+                        name="password"
+                        required
+                        type="password"
                 />
 
                 <button class="submit" on:click={login}>Sign in</button>
@@ -255,7 +255,7 @@
 
         <div class="loading-cont">
             {#if loading}
-                <Stretch size="60" color="#577db2" unit="px" duration="1s" />
+                <Stretch size="60" color="#577db2" unit="px" duration="1s"/>
             {/if}
         </div>
     </div>