diff --git a/pages/about/index.module.css b/pages/about/index.module.css
index ee2deffb..b44a9667 100644
--- a/pages/about/index.module.css
+++ b/pages/about/index.module.css
@@ -3,11 +3,16 @@
   font-size: 48px;
   height: 80px;
   margin-top: auto;
+  padding-left: 20px;
+}
+
+.title::after {
+  content: " Us!";
 }
 
 .headings h2 {
-  color: var(--blue-2);
-  font-size: 24px;
+  color: var(--purple-2);
+  font-weight: 600;
 }
 
 .text {
@@ -20,6 +25,10 @@
   color: black;
 }
 
+.text span {
+  color: var(--blue-2);
+}
+
 .titleContainer {
   display: flex;
   flex-direction: row;
@@ -28,6 +37,7 @@
   max-width: calc(800rem / 16);
   margin: 0 auto;
   overflow-y: clip;
+  overflow-x: clip;
   height: 200px;
 }
 
@@ -61,11 +71,10 @@
 
 .mailingList h2 {
   color: var(--blue-2);
-  font-size: 24px;
 }
 /*for temp mailing list components*/
 
-@media only screen and (max-width: calc(836rem / 16)) {
+@media only screen and (max-width: calc(768rem / 16)) {
   .titleContainer {
     display: flex;
     flex-direction: column;
@@ -73,6 +82,33 @@
     max-width: calc(800rem / 16);
     margin: 0 auto;
     overflow-y: clip;
-    height: 300px;
+    height: 130px;
+  }
+
+  .headings h2 {
+    font-size: 24px;
+  }
+
+  .title {
+    font-size: 24px;
+    font-weight: 600;
+  }
+
+  .title::after {
+    content: "";
+  }
+
+  .codey {
+    width: 140.21px;
+    height: 124.65px;
+    padding-left: 48px;
+  }
+
+  .text ul {
+    padding-left: 20px;
+  }
+
+  .text ol {
+    padding-left: 16px;
   }
 }
diff --git a/pages/about/index.tsx b/pages/about/index.tsx
index f3fca358..80e140bb 100644
--- a/pages/about/index.tsx
+++ b/pages/about/index.tsx
@@ -9,7 +9,7 @@ export default function AboutUs() {
   return (
     <>
       <div className={styles.titleContainer}>
-        <h1 className={styles.title}>About Us!</h1>
+        <h1 className={styles.title}>About</h1>
         <Image src="/about/codey.svg" className={styles.codey} />
       </div>
       <div className={styles.headings}>