diff --git a/assets/Ready.png b/assets/Ready.png
new file mode 100644
index 0000000..06b14a8
Binary files /dev/null and b/assets/Ready.png differ
diff --git a/assets/atari-rainbow.png b/assets/atari-rainbow.png
new file mode 100644
index 0000000..e382483
Binary files /dev/null and b/assets/atari-rainbow.png differ
diff --git a/assets/atari-red-logo.png b/assets/atari-red-logo.png
new file mode 100644
index 0000000..8faac40
Binary files /dev/null and b/assets/atari-red-logo.png differ
diff --git a/assets/atari-red.png b/assets/atari-red.png
new file mode 100644
index 0000000..7d63847
Binary files /dev/null and b/assets/atari-red.png differ
diff --git a/assets/atari-symbol-only.png b/assets/atari-symbol-only.png
new file mode 100644
index 0000000..ba9d3c3
Binary files /dev/null and b/assets/atari-symbol-only.png differ
diff --git a/assets/atari-white.png b/assets/atari-white.png
new file mode 100644
index 0000000..826b2c1
Binary files /dev/null and b/assets/atari-white.png differ
diff --git a/css/index.css b/css/index.css
index cf3aa66..744d1e2 100644
--- a/css/index.css
+++ b/css/index.css
@@ -26,8 +26,8 @@
 */
 
 * {
-	margin: 0;
-	padding: 10;
+	margin: 2px;
+	padding: 5px;
 	box-sizing: border-box;
 }
 
@@ -77,6 +77,13 @@ HTML
   font-weight: normal;
   font-style: normal;
 }
+@font-face {
+    font-family: 'Atarian System Bold';
+    src: url("../fonts/sf-atarian-system.bold.ttf") format('truetype');
+    font-weight: bold;
+    font-style: normal;
+}
+
 body {
   font-family: 'Atari Classic Chunky';
   justify-content: center;
@@ -106,29 +113,43 @@ p {
 }
 
 pre {
-    width: 60%;
-    border: solid gray 2px;
+    width: 98%;
+    border: solid yellow 2px;
     padding-top: 10px;
     padding-bottom: 0px;
     padding-left:5px;
-    margin-left: 30px;
+    margin-left: 15px;
     background-color: #004d80;
     font-family: 'Atari Classic Chunky';
-    font-size: 0.450em;
+    font-weight: lighter;
+    font-size: 0.525em;
     line-height: 1.2;
     color: #f2f2f2;
 }
 
-.title {
+
+.title-wrap {
+    display:flex;
+    justify-content:center;
+    align-items: center;
+}
+
+.title-title {
     width: 100%;
+    display: inline-block;
     text-align: center;
     font-family: 'Atarian System Regular';
     font-size: 3.0em;
     line-height: 1.1;
-    #color: #f0e6da;
+    /* #color: #f0e6da; */
     color: #fcf4dd;
 }
 
+.title-image {
+    height:50px;
+    width:65px;
+}
+
 .subtitle {
     width: 80%;
     margin: auto;
@@ -137,52 +158,107 @@ pre {
     font-size: 1.0em;
     line-height: 1.1;
     color: #afcde9;
-    #color: #dd504a;
-    #color: #ffb600;
+    /* #color: #dd504a;
+    #color: #ffb600; */
+}
+
+.logo-container{
+    position: absolute;
+    left:210px;
+    top:20px;
+    width:100px;
+}
+
+.logo{
+    width:100%;
 }
 
 .start {
-  font-family: 'Atarian System Regular';
-  font-size: 1.2em;
-  color: #322918;
-  text-align: center;
-  background-color: #fed700;
-  width: 150px;
-  border: 2px solid #322918;
-  padding: 10px;
-  margin: 10px;
+    font-family: 'Atarian System Regular';
+    font-size: 1.2em;
+    color: #322918;
+    text-align: center;
+    background-color: #fed700;
+    width: 150px;
+    border: 2px solid #322918;
+    padding: 10px;
+    margin: 10px;
 }
 
 .select {
-  font-family: 'Atarian System Regular';
-  font-size: 1.2em;
-  color: #322918;
-  text-align: center;
-  background-color: #fab700;
-  width: 150px;
-  border: 2px solid #322918;
-  padding: 10px;
-  margin: 10px;
+    font-family: 'Atarian System Regular';
+    font-size: 1.2em;
+    color: #322918;
+    text-align: center;
+    background-color: #fab700;
+    width: 150px;
+    border: 2px solid #322918;
+    padding: 10px;
+    margin: 10px;
 }
 
 .option {
-  font-family: 'Atarian System Regular';
-  font-size: 1.2em;
-  color: #322918;
-  text-align: center;
-  background-color: #e99e23;
-  width: 150px;
-  border: 2px solid #322918;
-  padding: 10px;
-  margin: 10px;
+    font-family: 'Atarian System Regular';
+    font-size: 1.2em;
+    color: #322918;
+    text-align: center;
+    background-color: #e99e23;
+    width: 150px;
+    border: 2px solid #322918;
+    padding: 10px;
+    margin: 10px;
 }
 
-.button-row {
-    display: flex;
+
+.reset {
+    font-family: 'Atarian System Regular';
+    font-size: 1.2em;
+    color: #322918;
+    text-align: center;
+    background-color: #ae7900;
+    width: 150px;
+    border: 2px solid #322918;
+    padding: 10px;
+    margin: 10px;
+}
+
+.button-row button {
     align-content: center;
     justify-content: center;
+    cursor: pointer;
+    display: flex;
 }
 
+.button-row button:hover {
+   /* background-color: #f0e6da; */
+    font-family: 'Atarian System Bold';
+}
+
+.button-column button {
+    align-content: center;
+    justify-content: center;
+    cursor: pointer;
+    display: block;
+}
+
+.button-column button:not(:last-child) {
+    border-bottom: none;
+}
+
+.button-column button:hover {
+    /* background-color: #f0e6da; */
+    font-family: 'Atarian System Bold';
+}
+
+.shadowbox {
+    width: 55%;
+    background-color: #004d80;
+    border: 3px solid #babebd;
+    box-shadow: 5px 6px #9a9c9b;
+    padding: 5px;
+}
+
+
 /* unvisited link */
 a:link {
   color: #5a97d0;
diff --git a/index.html b/index.html
index 268cf6e..65f8946 100644
--- a/index.html
+++ b/index.html
@@ -1,39 +1,95 @@
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
-<meta http-equiv="content-type" content="text/html; charset=utf-8" />
-<title>Atari High Scores</title>
-<meta name="keywords" content="" />
-<meta name="description" content="" />
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<link rel="stylesheet" type="text/css" href="css/index.css" media="screen" />
-<link rel="icon" type="image/png" href="assets/AtariLogo.png" />
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <title>Atari Code</title>
+    <meta name="keywords" content=""/>
+    <meta name="description" content="A site devoted to learning to code on the Atari 8-Bit line of computers"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" type="text/css" href="css/index.css" media="screen"/>
+    <link rel="icon" type="image/png" href="assets/atari-rainbow.png"/>
 </head>
 <body>
-  <p class="title">Atari Code</p>
-  <p class="subtitle">A site devoted to learning to code on the Atari 8-Bit line of computers</p>
 
-  <div class="button-row"><div class="start">Start</div> <div class="select">Select</div> <div class="option">Option</div></div>
+<div class="title-wrap">
+    <table>
+        <tr>
+            <td>
+                <img src="assets/atari-rainbow.png" class="title-image">
+            </td>
+            <td>
+                <p class="title-title" style="float-wrap: none">Atari Code</p>
+            </td>
+        </tr>
+    </table>
+</div>
+<p class="subtitle">A site devoted to learning to code on the Atari 8-Bit line of computers</p>
 
-  <h1>H1 Test Text</h1>
-  <p>Some standard text.</p>
-  <p class="p2">Some small text</p>
-  <p class="p3">Some very tiny text</p>
+<div class="button-row" style="display: flex; float: top">
+    <button class="Start" onclick="location.href='#'" type="button">Start</button>
+    <button class="Select" onclick="location.href='#'" type="button">Select</button>
+    <button class="Option" onclick="location.href='#'" type="button">Option</button>
+    <button class="Reset" onclick="location.href='#'" type="button">Reset</button>
+</div>
 
-  <h2>H2 Test Text</h2>
-  <p>Some standard text.</p>
-  <p class="p2">Some small text</p>
-  <p class="p3">Some very tiny text</p>
+<div class="button-column" style="float:right">
+    <button class="Reset" onclick="location.href='#'" type="button">Reset</button>
+    <button class="Option" onclick="location.href='#'" type="button">Option</button>
+    <button class="Select" onclick="location.href='#'" type="button">Select</button>
+    <button class="Start" onclick="location.href='#'" type="button">Start</button>
+</div>
 
-  <h3>H3 Test Text</h3>
-  <p>Some standard text.</p>
-  <p class="p2">Some small text</p>
-  <p class="p3">Some very tiny text</p>
 
-  <h4>H4 Test Text</h4>
-  <p class="p2">Here is a code block:</p>
-  <pre>
- 10 PRINT "Hello"
- 20 GOTO 10
+<div>
+    <h1>H1 Test Text</h1>
+    <p>Some standard text.</p>
+    <p class="p2">Some small text</p>
+    <p class="p3">Some very tiny text</p>
+</div>
+
+
+<div style="display: flex">
+    <div class="shadowbox" style="float: left">
+        <h3>Attention!</h3>
+        <p>Hello, this is a highlighted notice!</p>
+    </div>
+
+    <div>
+        <h2>H2 Test Text</h2>
+        <p>Some standard text.</p>
+        <p class="p2">Some small text</p>
+        <p class="p3">Some very tiny text</p>
+    </div>
+</div>
+
+<h3>H3 Test Text</h3>
+<p>Some standard text.</p>
+<p class="p2">Some small text</p>
+<p class="p3">Some very tiny text</p>
+
+<h4>H4 Test Text</h4>
+<p>Here is a code block:</p>
+<pre>
+100 REM PLAYER/MISSILE EXAMPLE
+110 DIM A$(512),B$(20)
+120 X=X+1:READ A:IF A<>-1 THEN B$(X,X)=CHR$(A):GOTO 120
+130 DATA 0,255,129,129,129,129,129,129,129,129,255,0,-1
+2000 POKE 559,62:POKE 704,88
+2020 I=PEEK(106)-16:POKE 54279,I
+2030 POKE 53277,3:POKE 710,224
+2040 VTAB=PEEK(134)+PEEK(135)*256
+2050 ATAB=PEEK(140)+PEEK(141)*256
+2060 OFFS=I*256+1024-ATAB
+2070 HI=INT(OFFS/256):LO=OFFS-HI*256
+2090 POKE VTAB+2,LO:POKE VTAB+3,HI
+3000 Y=60:Z=100:V=1:H=1
+4000 A$(Y,Y+11)=B$:POKE 53248,Z
+4010 Y=Y+V:Z=Z+H
+4020 IF Y>213 OR Y<33 THEN V=-V
+4030 IF Z>206 OR Z<49 THEN H=-H
+4420 GOTO 4000
   </pre>
+
+<p class="p3">Here is some p3 text. It will be interesting to see how this text is rendered.</p>
+
 </body>
 </html>