diff --git a/css/src/style.scss b/css/src/style.scss
index 3a80b02..c4cb71e 100644
--- a/css/src/style.scss
+++ b/css/src/style.scss
@@ -416,6 +416,27 @@ a {
   //
 }
 
+.nationLayout {
+  display: flex;
+  flex-direction: column;
+}
+@media (min-width: 601px) {
+  .nationLayout {
+    display: flex;
+    flex-direction: row;
+  }
+}
+.nationFlag {
+  border-radius: 12px;
+}
+.nationCoreInfo {
+  flex-grow: 1;
+  display: flex;
+  gap: 1rem;
+  flex-direction: column;
+  flex-wrap: wrap;
+}
+
 .pageFooter {
   opacity: 0.8;
 
diff --git a/template/nation.twig b/template/nation.twig
index 8e2cf0c..81c45bc 100644
--- a/template/nation.twig
+++ b/template/nation.twig
@@ -3,13 +3,20 @@
 {% include 'includes/hero.twig' %}
 
 {% include 'includes/nav.twig' with {'page': 'nation'} %}
-    
+
 <main class="pageContent container">
-  <h1> {{ nation.name }} </h1>
-  <p style="font-family:monospace"> {{ nation.short }} </p>
-  <hr>
-  <img style="border-radius: 12px" height="128px" src="{{ nation.flag }}"  alt="{{ nation.name }}'s flag." />
-  <p> {{ nation.description }} </p>
+  <div class="nationLayout">
+    <div class="nationCoreInfo">
+      <h1> {{ nation.name }} </h1>
+      <p style="font-family:monospace"> {{ nation.short }} </p>
+      <hr>
+      <img class="nationFlag" src="{{ nation.flag }}" alt="{{ nation.name }}'s flag." />
+    </div>
+    <div class="nationCoreInfo">
+      <h3> Description </h3>
+      <p> {{ nation.description }} </p>
+    </div>
+  </div>
 </main>
 
 {% include 'includes/footer.twig' %}