diff --git a/css/base.css b/css/base.css
index c623f90c..126389de 100644
--- a/css/base.css
+++ b/css/base.css
@@ -3,13 +3,12 @@
 body {
   font-family: Inconsolata, Helvetica, sans-serif;
   font-size: 20px;
-  padding: 3em;
   background: #e5ffe5; }
 
 h1 {
   font-family: "Noto Serif KR", Georgia, serif;
   font-weight: 200;
-  border-bottom: 20px #ffffff solid; }
+  border-bottom: 0.25em #ffffff solid; }
 
 h2, h3 {
   font-family: "Noto Serif KR", Georgia, serif;
@@ -23,26 +22,44 @@ li {
 .grid {
   display: grid;
   grid-template-columns: repeat(4, [col] 1fr [col]);
+  grid-template-rows: fit-content, fit-content, auto;
   grid-row-gap: 2em;
-  grid-column-gap: 1em;
-  grid-gap: .5em; }
+  grid-column-gap: 1em; }
 
 @media screen and (min-width: 200px) {
-  .item {
+  #title, #description, #summary {
+    grid-column: span 4; }
+  body {
+    padding: 1em; }
+  .list, .item {
     grid-column: span 4; }
   h1 {
-    font-size: 2em; }
+    font-size: 3em; }
   h2 {
-    font-size: 1em; } }
+    font-size: 1.25em; } }
 
 @media screen and (min-width: 600px) {
+  body {
+    padding: 3em; }
+  #title, #description, #summary {
+    grid-column: span 2; }
   .item {
     grid-column: span 2; }
   h1 {
     font-size: 4em; }
   h2 {
-    font-size: 1.5em; } }
+    font-size: 1.3em; } }
 
 @media screen and (min-width: 1024px) {
-  .item {
+  #title {
+    grid-column: 1 / span 1;
+    grid-row: 1; }
+  #description {
+    grid-column: 2 / span 1;
+    grid-row: 1; }
+  #summary {
+    grid-column: 1 / span 2;
+    grid-row: 2; }
+  .list {
+    grid-row: span 3;
     grid-column: span 1; } }
diff --git a/index.html b/index.html
index 983cf94f..77a71586 100644
--- a/index.html
+++ b/index.html
@@ -9,18 +9,22 @@
     <link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
 </head>
 <body>
+
 <div class="grid">
-	<div class="item">
+	<div class="item" id="title">
 		<h1>Self-Defined</h1>
-		<p>A list of words to know to better understand one another.</p>
-		<p>For now, this stands as a list only; definitions and resources will be the next phase of the project.</p>
-		<h3>Submit a word/Volunteer to help</h3>
-		<p>Send unlisted words to or volunteer your time by messaging <a href="http://www.twitter.com/tatianatmac" target="_blank">@tatianatmac on Twitter</a>.</p>	
 	</div>		
-	<div class="item">
-		<h2>A modern dictionary to reflect today's entire world</h2>
+
+	<div class="item" id="description">
+		<h2>A modern dictionary about us, written by us</h2>
 	</div>
-	<div class="item">
+	<div class="item" id="summary">	
+		<p>For now, this stands as a list only, from which you can self-educate. Future phases will include definitions and resources.</p>
+		<h3>Participate</h3>
+		<p>Send unlisted words to or chat about volunteering to help: <a href="http://www.twitter.com/tatianatmac" target="_blank">@tatianatmac on Twitter</a>.</p>	
+	</div>
+
+	<div class="list">
 		<ul>
 			<li>Ablelism</li>
 			<li>Auto Immune Disorder (AIDS)</li>
@@ -77,7 +81,7 @@
 			<li>invisible disabilities</li>
 		</ul>
 </div>
-<div class="item">
+<div class="list">
 	<ul>
 		<li>Marginalized</li>
 		<li>Minority</li>
@@ -133,6 +137,5 @@
 		<li>womanism</li>
 	</ul>
 </div>
-
 </body>
 </html>
\ No newline at end of file
diff --git a/scss/base.scss b/scss/base.scss
index f39e63d9..4bfc5f47 100644
--- a/scss/base.scss
+++ b/scss/base.scss
@@ -9,6 +9,7 @@
   $black: #222222;
   $white: #ffffff;
   $pistachio: #e5ffe5;
+  $yellow: #ffff00;
 
   $dark-grey: #4F4F4F;
   $mid-grey: #767676; // the lightest shade of grey you can get away with, #a11y
@@ -29,14 +30,13 @@
 body {
   font-family: $sans-serif;
   font-size: 20px;
-  padding: 3em;
   background: #e5ffe5;
   }
 
 h1 {
   font-family: $serif;
   font-weight: $thin;
-  border-bottom: 20px $white solid;
+  border-bottom: .25em $white solid;
 }
 
 h2, h3 {
@@ -55,28 +55,49 @@ li {
 .grid {
   display: grid;
   grid-template-columns: repeat(4, [col] 1fr [col]);
+  grid-template-rows: fit-content, fit-content, auto;
   grid-row-gap: 2em;
   grid-column-gap: 1em;
-  grid-gap: .5em;
+}
+
+.item {
 }
 
 
+// MEDIA // 
 
 @media screen and (min-width: 200px) {
-  .item {
+
+  #title, #description, #summary {
+  grid-column: span 4;
+  }
+
+  body {
+  padding: 1em;
+  }
+
+  .list, .item {
   grid-column: span 4;
   }
 
   h1 {
-    font-size: 2em;
+    font-size: 3em;
   }
 
   h2 {
-    font-size: 1em;
+    font-size: 1.25em;
   }
 }
 
 @media screen and (min-width: 600px) {
+  body {
+  padding: 3em;
+  }
+
+  #title, #description, #summary {
+    grid-column: span 2;
+  }
+
   .item {
   grid-column: span 2;
   }
@@ -86,12 +107,29 @@ li {
   }
 
   h2 {
-    font-size: 1.5em;
+    font-size: 1.3em;
   }
 }
 
 @media screen and (min-width: 1024px) {
-  .item {
+
+  #title {
+    grid-column: 1 / span 1;
+    grid-row: 1
+  }
+
+   #description {
+    grid-column: 2 / span 1;
+    grid-row: 1
+  }
+
+   #summary {
+    grid-column: 1 / span 2;
+    grid-row: 2
+  }
+
+  .list {
+  grid-row: span 3;
   grid-column: span 1;
   }
 }
\ No newline at end of file
