diff --git a/front-end/src/assets/base.css b/front-end/src/assets/base.css
index 33b01d6..9e9a6f7 100644
--- a/front-end/src/assets/base.css
+++ b/front-end/src/assets/base.css
@@ -6,9 +6,24 @@
 :root {
   --color-black: #363636;
   --color-white: #ffffff;
+  --font-size-base: 16px;
+  --wac-font-size--small: calc(var(--font-size-base) * 0.75);
+  --wac-font-size--med: var(--font-size-base);
+  --wac-font-size--lg: calc(var(--font-size-base) * 1.25);
+  --wac-font-size--xl: calc(var(--font-size-base) * 1.5);
+  --wac-font-size--xxl: calc(var(--font-size-base) * 2);
+  --wac-font-size--xxxl: calc(var(--font-size-base) * 3);
+  --wac-font-size--xxxxl: calc(var(--font-size-base) * 4);
+}
+
+@media screen and (max-width: 940px) {
+  :root {
+    --font-size-base: 16px;
+  }
 }
 
 body {
-  background-color: var(--color-background);
+  background-color: var(--color-white);
   font-family: 'Inter', sans-serif;
-}
+  font-size: var(--wac-font-size--med);
+}
\ No newline at end of file
diff --git a/front-end/src/assets/main.css b/front-end/src/assets/main.css
index 5b6cdb5..e6f8f41 100644
--- a/front-end/src/assets/main.css
+++ b/front-end/src/assets/main.css
@@ -1,8 +1,5 @@
 @import './base.css';
 
-:root {
-}
-
 .v-enter-active,
 .v-leave-active {
   transition: opacity 0.5s ease;
@@ -16,4 +13,4 @@
 .resource-link {
   text-decoration: underline;
   cursor: pointer;
-}
+}
\ No newline at end of file
diff --git a/front-end/src/components/LeafletMap.vue b/front-end/src/components/LeafletMap.vue
index c98e179..2c07852 100644
--- a/front-end/src/components/LeafletMap.vue
+++ b/front-end/src/components/LeafletMap.vue
@@ -98,6 +98,8 @@ watch(
 <style scoped>
 .expand-map-button {
   cursor: pointer;
+  font-weight: 700;
+  padding-bottom: 16px;
 }
 
 #map {
@@ -118,4 +120,20 @@ watch(
   height: 400px;
   transition: height 0.5s ease;
 }
+
+@media (min-width: 940px) {
+  .map-container-expanded,
+  .map-container-collapsed {
+    height: 100%;
+    transition: none;
+  }
+
+  .map-container-collapsed * {
+    pointer-events: all;
+  }
+
+  .expand-map-button {
+    display: none;
+  }
+}
 </style>
diff --git a/front-end/src/components/MoreArtworksByArtist.vue b/front-end/src/components/MoreArtworksByArtist.vue
index 499dbd3..f63edaf 100644
--- a/front-end/src/components/MoreArtworksByArtist.vue
+++ b/front-end/src/components/MoreArtworksByArtist.vue
@@ -70,7 +70,7 @@ const setActiveResource = (newResourceId: string) => {
 .more-artworks-by-artist-title {
   font-style: normal;
   font-weight: 700;
-  font-size: 16px;
+  font-size: var(--wac-font-size--med);
   line-height: 100%;
 
   color: #000000;
diff --git a/front-end/src/components/ResourceDetail.vue b/front-end/src/components/ResourceDetail.vue
index d66a92d..a692098 100644
--- a/front-end/src/components/ResourceDetail.vue
+++ b/front-end/src/components/ResourceDetail.vue
@@ -51,7 +51,7 @@
 .resource-detail-metadata-title {
   font-style: normal;
   font-weight: 700;
-  font-size: 16px;
+  font-size: var(--wac-font-size--med);
   line-height: 100%;
 
   color: #999999;
@@ -60,7 +60,7 @@
 .resource-detail-metadata-content {
   font-style: normal;
   font-weight: 400;
-  font-size: 16px;
+  font-size: var(--wac-font-size--med);
   line-height: 140%;
 
   color: #999999;
@@ -69,14 +69,14 @@
 .resource-detail-header-label {
   font-style: normal;
   font-weight: 400;
-  font-size: 24px;
+  font-size: var(--wac-font-size--lg);
   line-height: 100%;
 }
 
 .resource-detail-header-title {
   font-style: normal;
   font-weight: 900;
-  font-size: 32px;
+  font-size: var(--wac-font-size--xxl);
   line-height: 100%;
 }
 </style>
diff --git a/front-end/src/components/ResourceDetailItem.vue b/front-end/src/components/ResourceDetailItem.vue
index d1f28e9..cad3616 100644
--- a/front-end/src/components/ResourceDetailItem.vue
+++ b/front-end/src/components/ResourceDetailItem.vue
@@ -51,13 +51,12 @@ const imageUrl = props.imageUrl ? import.meta.env.VITE_ARCHES_API_URL + props.im
   flex-direction: column;
   align-items: flex-start;
   padding: 0px;
-  gap: 8px;
 }
 
 .resource-detail-item-header-byline {
   font-style: normal;
   font-weight: 700;
-  font-size: 16px;
+  font-size: var(--wac-font-size--med);
   line-height: 100%;
 
   color: #000000;
@@ -66,7 +65,7 @@ const imageUrl = props.imageUrl ? import.meta.env.VITE_ARCHES_API_URL + props.im
 .resource-detail-item-header-title {
   font-style: normal;
   font-weight: 900;
-  font-size: 24px;
+  font-size: var(--wac-font-size--xxl);
   line-height: 120%;
   text-decoration-line: underline;
 
@@ -76,7 +75,7 @@ const imageUrl = props.imageUrl ? import.meta.env.VITE_ARCHES_API_URL + props.im
 .resource-detail-item-credit {
   font-style: normal;
   font-weight: 400;
-  font-size: 16px;
+  font-size: var(--wac-font-size--med);
   line-height: 140%;
 
   color: #000000;
diff --git a/front-end/src/components/ResourcePanel.vue b/front-end/src/components/ResourcePanel.vue
index ccc7422..af763b9 100644
--- a/front-end/src/components/ResourcePanel.vue
+++ b/front-end/src/components/ResourcePanel.vue
@@ -22,10 +22,7 @@
           v-for="relatedArtwork in resourceRelations.filter(
             (resourceRelation) => graphIdToNameTable[resourceRelation.graph_id] === 'Artwork'
           )"
-          v-else-if="
-            validateArtistSchema(props.resource.resource) &&
-            graphIdToNameTable[props.resource.graph_id] === 'Artist'
-          "
+          v-else-if="graphIdToNameTable[props.resource.graph_id] === 'Artist'"
           :key="relatedArtwork.graph_id"
           :related-artwork="relatedArtwork"
           :id-references="props.idReferences"
@@ -35,10 +32,7 @@
           v-for="relatedArtwork in resourceRelations.filter(
             (resourceRelation) => graphIdToNameTable[resourceRelation.graph_id] === 'Artwork'
           )"
-          v-else-if="
-            validateStructureSchema(props.resource.resource) &&
-            graphIdToNameTable[props.resource.graph_id] === 'Structure'
-          "
+          v-else-if="graphIdToNameTable[props.resource.graph_id] === 'Structure'"
           :key="relatedArtwork.resourceinstanceid"
           :related-artwork="relatedArtwork"
           :id-references="props.idReferences"
@@ -48,23 +42,14 @@
           v-for="relatedArtwork in resourceRelations.filter(
             (resourceRelation) => graphIdToNameTable[resourceRelation.graph_id] === 'Artwork'
           )"
-          v-else-if="
-            validatePhotographerSchema(props.resource.resource) &&
-            graphIdToNameTable[props.resource.graph_id] === 'Photographer'
-          "
+          v-else-if="graphIdToNameTable[props.resource.graph_id] === 'Photographer'"
           :key="relatedArtwork.root_ontology_class"
           :related-artwork="relatedArtwork"
           :id-references="props.idReferences"
           :panel-resource-type="PanelResourceEnum.PHOTOGRAPHER"
         />
       </template>
-      <template
-        v-if="
-          validateArtworkSchema(props.resource.resource) &&
-          graphIdToNameTable[props.resource.graph_id] === 'Artwork'
-        "
-        #more-by-artist
-      >
+      <template v-if="graphIdToNameTable[props.resource.graph_id] === 'Artwork'" #more-by-artist>
         <MoreArtworksByArtist
           :resource="props.resource"
           :resource-relations="resourceRelations"
@@ -93,10 +78,7 @@ import type {
   Resource
 } from '@/types';
 import {
-  validateArtistSchema,
   validateArtworkSchema,
-  validateStructureSchema,
-  validatePhotographerSchema,
   PanelResourceEnum
 } from '@/types';
 import useResourceStore from '@/stores/resourceStore';
@@ -131,9 +113,19 @@ const clearActiveResource = () => {
   align-items: center;
   padding: 8px 0px;
   gap: 8px;
+  font-weight: 700;
 }
 
 .resource-detail-back-button {
   cursor: pointer;
 }
+
+@media (min-width: 940px) {
+  .resource-detail {
+    height: 100vh;
+  }
+  .resource-detail {
+    overflow-y: scroll;
+  }
+}
 </style>
diff --git a/front-end/src/components/SearchList.vue b/front-end/src/components/SearchList.vue
index c58f240..822a573 100644
--- a/front-end/src/components/SearchList.vue
+++ b/front-end/src/components/SearchList.vue
@@ -106,7 +106,6 @@ const filterByType = (type: string) => {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  padding: 0px;
   gap: 32px;
   isolation: isolate;
 }
@@ -149,7 +148,7 @@ button {
   background: none;
   font-style: normal;
   font-weight: 700;
-  font-size: 16px;
+  font-size: var(--wac-font-size--med);
   line-height: 100%;
   display: flex;
   align-items: center;
@@ -166,7 +165,6 @@ button.active {
 .search-bar {
   box-sizing: border-box;
 
-  /* Auto layout */
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -177,4 +175,16 @@ button.active {
   border: 1px solid #000000;
   border-radius: 5px;
 }
+
+@media (min-width: 940px) {
+  .search-list-container {
+    height: 100vh;
+  }
+  .search-results {
+    overflow-y: scroll;
+    padding-top: 40px;
+    mask-image: linear-gradient(to top, transparent, black 10%, black 90%, transparent);
+    mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
+  }
+}
 </style>
diff --git a/front-end/src/components/SearchListItem.vue b/front-end/src/components/SearchListItem.vue
index 5c764e7..f36ed0a 100644
--- a/front-end/src/components/SearchListItem.vue
+++ b/front-end/src/components/SearchListItem.vue
@@ -72,7 +72,7 @@ const setActiveResource = (newResourceId: string) => {
 .search-result-title {
   font-style: normal;
   font-weight: 900;
-  font-size: 16px;
+  font-size: var(--wac-font-size--lg);
   line-height: 120%;
   display: flex;
   align-items: center;
@@ -81,7 +81,7 @@ const setActiveResource = (newResourceId: string) => {
 .search-result-resource-type {
   font-style: normal;
   font-weight: 400;
-  font-size: 14px;
+  font-size: var(--wac-font-size--med);
   line-height: 100%;
 
   display: flex;
@@ -91,8 +91,8 @@ const setActiveResource = (newResourceId: string) => {
 .search-result-resource-description {
   font-style: normal;
   font-weight: 400;
-  font-size: 12px;
-  line-height: 110%;
+  font-size: var(--wac-font-size--small);
+  line-height: 120%;
   display: -webkit-box;
   -webkit-line-clamp: 5;
   line-clamp: 5;
@@ -106,4 +106,16 @@ const setActiveResource = (newResourceId: string) => {
   object-fit: cover;
   flex-shrink: 0;
 }
+@media (min-width: 940px) {
+  .search-result-title {
+    font-size: var(--wac-font-size--xxl);
+  }
+  .search-result-resource-type {
+    font-size: var(--wac-font-size--med);
+  }
+
+  .search-result-resource-description {
+    font-size: var(--wac-font-size--small);
+  }
+}
 </style>
diff --git a/front-end/src/pages/HomePage.vue b/front-end/src/pages/HomePage.vue
index 87b64a1..6a5f1c3 100644
--- a/front-end/src/pages/HomePage.vue
+++ b/front-end/src/pages/HomePage.vue
@@ -1,8 +1,9 @@
 <template>
   <div class="home">
     <div class="welcome">
-      <h2>Wabash Arts Corridor</h2>
-      <p>
+      <p class="blurb">
+        <span class="title">Wabash Arts Corridor</span>
+        <br />
         In 2013, Columbia College Chicago launched the Wabash Arts Corridor to immerse students in
         the creative spirit by using urban spaces and reclaimable resources to revitalize and
         transform the South Loop business district into one of the city’s major cultural assets. The
@@ -12,51 +13,53 @@
         collaborative projects.
       </p>
     </div>
-    <div id="map-container">
-      <LeafletMap
-        v-if="props.resourcesPrefetch && props.idReferences && props.locationsPrefetch"
-        :resources-prefetch="props.resourcesPrefetch"
-        :id-references="props.idReferences"
-        :locations-prefetch="props.locationsPrefetch"
-      />
-      <div v-else class="map-placeholder">Loading Map...</div>
-    </div>
-    <div id="search-list-container">
-      <Transition
-        v-if="
-          resourceStore.resourceId === undefined &&
-          props.resourcesPrefetch &&
-          props.resourceRelationsPrefetch &&
-          props.idReferences &&
-          props.imagesPrefetch
-        "
-      >
-        <SearchList
+    <main>
+      <div id="map-container">
+        <LeafletMap
+          v-if="props.resourcesPrefetch && props.idReferences && props.locationsPrefetch"
           :resources-prefetch="props.resourcesPrefetch"
-          :resource-relations-prefetch="props.resourceRelationsPrefetch"
           :id-references="props.idReferences"
-          :images-prefetch="props.imagesPrefetch"
+          :locations-prefetch="props.locationsPrefetch"
         />
-      </Transition>
-      <ResourcePanelProvider v-else v-slot="{ resource, resourceRelations }">
-        <ResourcePanel
+        <div v-else class="map-placeholder">Loading Map...</div>
+      </div>
+      <div id="search-list-container">
+        <Transition
           v-if="
+            resourceStore.resourceId === undefined &&
+            props.resourcesPrefetch &&
             props.resourceRelationsPrefetch &&
             props.idReferences &&
-            props.imagesPrefetch &&
-            props.resourcesPrefetch &&
-            resourceRelations &&
-            resource
+            props.imagesPrefetch
           "
-          :resource="resource"
-          :resource-relations="resourceRelations"
-          :id-references="props.idReferences"
-          :resource-relations-prefetch="props.resourceRelationsPrefetch"
-          :images-prefetch="props.imagesPrefetch"
-          :resources-prefetch="props.resourcesPrefetch"
-        />
-      </ResourcePanelProvider>
-    </div>
+        >
+          <SearchList
+            :resources-prefetch="props.resourcesPrefetch"
+            :resource-relations-prefetch="props.resourceRelationsPrefetch"
+            :id-references="props.idReferences"
+            :images-prefetch="props.imagesPrefetch"
+          />
+        </Transition>
+        <ResourcePanelProvider v-else v-slot="{ resource, resourceRelations }">
+          <ResourcePanel
+            v-if="
+              props.resourceRelationsPrefetch &&
+              props.idReferences &&
+              props.imagesPrefetch &&
+              props.resourcesPrefetch &&
+              resourceRelations &&
+              resource
+            "
+            :resource="resource"
+            :resource-relations="resourceRelations"
+            :id-references="props.idReferences"
+            :resource-relations-prefetch="props.resourceRelationsPrefetch"
+            :images-prefetch="props.imagesPrefetch"
+            :resources-prefetch="props.resourcesPrefetch"
+          />
+        </ResourcePanelProvider>
+      </div>
+    </main>
     <div class="footer">
       <div class="footer-blurb">
         <h2>About / Credit</h2>
@@ -102,7 +105,6 @@ const props = defineProps<{
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  padding: 32px 16px;
   gap: 64px;
   position: relative;
   overflow-y: scroll;
@@ -112,7 +114,6 @@ const props = defineProps<{
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  padding: 0px;
   gap: 32px;
 }
 
@@ -120,10 +121,67 @@ const props = defineProps<{
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  padding: 0px;
   gap: 8px;
 }
+
 #map-container {
   width: 100%;
 }
+
+.welcome {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  font-size: var(--wac-font-size--med);
+}
+
+.title {
+  font-weight: 900;
+  line-height: 120%;
+  color: #000000;
+}
+
+.blurb {
+  font-weight: 400;
+  line-height: 120%;
+  color: #000000;
+}
+
+#search-list-container {
+  padding-top: 64px;
+}
+
+@media (min-width: 940px) {
+  .home {
+    padding: 64px 64px;
+
+    gap: 64px;
+    background: #ffffff;
+  }
+
+  .welcome {
+    gap: 32px;
+    font-size: var(--wac-font-size--xl);
+    max-width: 860px;
+  }
+
+  main {
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: flex-start;
+    width: 80%;
+    height: 100vh;
+    gap: 64px;
+  }
+  #map-container {
+    width: 50%;
+    height: 100%;
+  }
+  #search-list-container {
+    height: 100%;
+    width: 100%;
+    padding-top: 0px;
+  }
+}
 </style>