diff --git a/assets/css/lg-screen-style.css b/assets/css/lg-screen-style.css
new file mode 100644
index 0000000..f2652a0
--- /dev/null
+++ b/assets/css/lg-screen-style.css
@@ -0,0 +1,121 @@
+@media screen and (min-width: 1501px) {
+  .mobile-note-header {
+    display: none;
+  }
+  #note-list {
+    display: none;
+    overflow-y: scroll;
+  }
+  #note-table_wrapper {
+    width: 97%;
+  }
+  .container #sidebar-link.toggle {
+    left: 25em;
+  }
+  .container {
+    display: grid;
+    height: 100vh;
+    grid-template-columns: 25em 60px 35% 0.98fr;
+    grid-template-rows: 60px 1fr;
+    gap: 5px 5px;
+    grid-auto-flow: row;
+    grid-template-areas: "sidebar-header ref-btn-header ref-header note-header" "sidebar ref-btn ref-text notes";
+    transition: grid-template-columns 0.5s ease-in-out;
+  }
+  .container p {
+    margin: 0 0 1em 0;
+  }
+  .container .fields-container {
+    display: none;
+  }
+  .container.sidebar-collapsed {
+    grid-template-columns: 0px 60px 35% 0.98fr;
+  }
+  .container.sidebar-collapsed #sidebar-link.toggle {
+    left: 0;
+  }
+  .bottom-row {
+    height: calc(100vh - 75px);
+  }
+  .notes {
+    display: flex;
+    flex-direction: column;
+    grid-template-columns: 1fr;
+    grid-template-rows: 75px 1fr;
+    gap: 2px 0px;
+    grid-template-areas: "fields-container" "note-text";
+    grid-area: notes;
+  }
+  .notes .fields-container {
+    justify-content: space-evenly;
+    flex-wrap: wrap;
+    width: 99.5%;
+  }
+  .notes .fields-container input[type=text], .notes .fields-container select {
+    background-color: var(--background);
+    color: var(--text);
+    height: 1.5em;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    border-radius: 0.375em;
+    border: solid 1px var(--dark);
+    outline: 0;
+    padding: 0 1em;
+    text-decoration: none;
+    font-size: 14pt;
+    font-weight: 400;
+    line-height: 1.65;
+    flex-basis: auto;
+    flex-grow: 1;
+    flex-shrink: 2;
+    min-width: 50px;
+    max-width: 200px;
+  }
+  .notes .note-text {
+    height: 100%;
+    width: 100%;
+  }
+  .notes .note-text textarea {
+    height: -webkit-fill-available;
+    height: -moz-available;
+    height: stretch;
+    width: -webkit-fill-available;
+    width: -moz-available;
+    width: stretch;
+    border-radius: 10px;
+    background-color: transparent;
+    color: var(--text);
+    font-family: "Roboto Sans";
+  }
+  .note-header, .ref-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .note-header h2, .ref-header h2 {
+    margin: 0;
+  }
+  .note-header select, .ref-header select {
+    background-color: var(--background);
+    color: var(--text);
+    height: 1.5em;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    border-radius: 0.375em;
+    border: solid 1px var(--dark);
+    outline: 0;
+    padding: 0 1em;
+    text-decoration: none;
+    font-size: 14pt;
+    font-weight: 400;
+    line-height: 1.65;
+    flex-basis: auto;
+    flex-grow: 1;
+    flex-shrink: 2;
+    min-width: 50px;
+    max-width: 200px;
+    margin-right: 3px;
+  }
+}/*# sourceMappingURL=lg-screen-style.css.map */
\ No newline at end of file
diff --git a/assets/css/lg-screen-style.css.map b/assets/css/lg-screen-style.css.map
new file mode 100644
index 0000000..7a0667f
--- /dev/null
+++ b/assets/css/lg-screen-style.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["lg-screen-style.scss","lg-screen-style.css"],"names":[],"mappings":"AAAA;EACA;IACC,aAAA;ECCC;EDEF;IACC,aAAA;IACA,kBAAA;ECAC;EDGF;IACC,UAAA;ECDC;EDIF;IACI,UAAA;ECFF;EDKF;IACC,aAAA;IACA,aAAA;IACA,2CAAA;IACA,4BAAA;IACA,YAAA;IACA,mBAAA;IACA,4GACC;IAGD,kDAAA;ECNC;EDQD;IACC,iBAAA;ECNA;EDSD;IACC,aAAA;ECPA;EDUD;IACC,0CAAA;ECRA;EDUA;IACC,OAAA;ECRD;EDaF;IACC,0BAAA;ECXC;EDcF;IACC,aAAA;IACA,sBAAA;IACA,0BAAA;IACA,4BAAA;IACA,YAAA;IACA,mDAAA;IAEA,gBAAA;ECbC;EDeD;IACC,6BAAA;IACA,eAAA;IACA,YAAA;ECbA;EDgBA;IACC,mCAAA;IACA,kBAAA;IACA,aAAA;IACA,qBAAA;IACA,wBAAA;IAEA,gBAAA;IACA,sBAAA;IACA,6BAAA;IACA,UAAA;IACA,cAAA;IACA,qBAAA;IACA,eAAA;IACA,gBAAA;IACA,iBAAA;IACA,gBAAA;IACA,YAAA;IACA,cAAA;IACA,eAAA;IACA,gBAAA;ECdD;EDkBD;IACC,YAAA;IACA,WAAA;EChBA;EDkBA;IACC,8BAAA;IAAA,sBAAA;IAAA,eAAA;IACA,6BAAA;IAAA,qBAAA;IAAA,cAAA;IACA,mBAAA;IACA,6BAAA;IACA,kBAAA;IACA,0BAAA;EChBD;EDqBF;IACC,aAAA;IACA,8BAAA;IACA,mBAAA;ECnBC;EDqBD;IACC,SAAA;ECnBA;EDsBD;IACC,mCAAA;IACA,kBAAA;IACA,aAAA;IACA,qBAAA;IACA,wBAAA;IAEA,gBAAA;IACA,sBAAA;IACA,6BAAA;IACA,UAAA;IACA,cAAA;IACA,qBAAA;IACA,eAAA;IACA,gBAAA;IACA,iBAAA;IACA,gBAAA;IACA,YAAA;IACA,cAAA;IACA,eAAA;IACA,gBAAA;IACA,iBAAA;ECpBA;AACF","file":"lg-screen-style.css"}
\ No newline at end of file
diff --git a/assets/css/lg-screen-style.scss b/assets/css/lg-screen-style.scss
new file mode 100644
index 0000000..8fe7570
--- /dev/null
+++ b/assets/css/lg-screen-style.scss
@@ -0,0 +1,141 @@
+@media screen and (min-width: 1501px) {
+.mobile-note-header {
+	display: none;
+}
+
+#note-list {
+	display: none;
+	overflow-y: scroll
+}
+
+#note-table_wrapper {
+	width: 97%;
+}
+
+.container #sidebar-link.toggle {
+    left: 25em;
+}
+
+.container {
+	display: grid;
+	height: 100vh;
+	grid-template-columns: 25em 60px 35% 0.98fr;
+	grid-template-rows: 60px 1fr;
+	gap: 5px 5px;
+	grid-auto-flow: row;
+	grid-template-areas:
+		"sidebar-header ref-btn-header ref-header note-header"
+		"sidebar ref-btn ref-text notes";
+
+	transition: grid-template-columns 0.5s ease-in-out;
+
+	p {
+		margin: 0 0 1em 0;
+	}
+
+	.fields-container {
+		display: none;
+	}
+
+	&.sidebar-collapsed {
+		grid-template-columns: 0px 60px 35% 0.98fr;
+
+		#sidebar-link.toggle {
+			left: 0;
+		}
+	}
+}
+
+.bottom-row { 
+	height: calc(100vh - 75px);
+}
+
+.notes {
+	display: flex;
+	flex-direction: column;
+	grid-template-columns: 1fr;
+	grid-template-rows: 75px 1fr;
+	gap: 2px 0px;
+	grid-template-areas: "fields-container" "note-text";
+
+	grid-area: notes;
+
+	.fields-container {
+		justify-content: space-evenly;
+		flex-wrap: wrap;
+		width: 99.5%;
+		// height: 75px;
+
+		input[type="text"], select {
+			background-color: var(--background);
+			color: var(--text);
+			height: 1.5em;
+			-moz-appearance: none;
+			-webkit-appearance: none;
+			-ms-appearance: none;
+			appearance: none;
+			border-radius: 0.375em;
+			border: solid 1px var(--dark);
+			outline: 0;
+			padding: 0 1em;
+			text-decoration: none;
+			font-size: 14pt;
+			font-weight: 400;
+			line-height: 1.65;
+			flex-basis: auto;
+			flex-grow: 1;
+			flex-shrink: 2;
+			min-width: 50px;
+			max-width: 200px;
+		}
+	}
+
+	.note-text {
+		height: 100%;
+		width: 100%;
+
+		textarea {
+			height: stretch;
+			width: stretch;
+			border-radius: 10px;
+			background-color: transparent;
+			color: var(--text);
+			font-family: 'Roboto Sans';
+		}
+	}
+}
+
+.note-header, .ref-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+
+	h2 {
+		margin: 0;
+	}
+
+	select {
+		background-color: var(--background);
+		color: var(--text);
+		height: 1.5em;
+		-moz-appearance: none;
+		-webkit-appearance: none;
+		-ms-appearance: none;
+		appearance: none;
+		border-radius: 0.375em;
+		border: solid 1px var(--dark);
+		outline: 0;
+		padding: 0 1em;
+		text-decoration: none;
+		font-size: 14pt;
+		font-weight: 400;
+		line-height: 1.65;
+		flex-basis: auto;
+		flex-grow: 1;
+		flex-shrink: 2;
+		min-width: 50px;
+		max-width: 200px;
+		margin-right: 3px;
+	}
+}
+}