diff --git a/.DS_Store b/.DS_Store
index 9e95116..87f896e 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/docs/docs.css b/docs/docs.css
index b5f8c95..dc705c7 100644
--- a/docs/docs.css
+++ b/docs/docs.css
@@ -3,6 +3,12 @@
   src: url("fonts/FindersKeepers.ttf")
 }
 
+@font-face {
+  font-family: Chicago_12;
+  src: url("fonts/ChiKareGo2.ttf"); 
+}
+
+
 * {
   box-sizing: border-box;
 }
@@ -10,11 +16,10 @@
 body {
   margin: 0;
   padding: 0;
-  overflow-x: hidden;
 }
 
 main {
-  width: 95rem;
+  width: 90rem;
   margin-left: 240px;
   margin-bottom: 60px;
   margin-top: 25px;
@@ -25,7 +30,6 @@ main {
 }
 
 
-
 aside {
   width: 200px;
   position: fixed;
@@ -76,6 +80,19 @@ h3 {
   vertical-align: center;
 }
 
+.modal-text, .alert-text {
+  font-family: Chicago_12;
+  font-size: 1.2em;
+  margin-top: 10px;
+  vertical-align: center;
+}
+
+.modeless-text {
+  font-family: Chicago_12;
+  font-size: 1em;
+  vertical-align: center;
+}
+
 
 p {
   font-family: Geneva;
@@ -110,10 +127,21 @@ pre {
   font-size: 13px;
 }
 
+.modal-dialog {
+  width: 50%;
+}
 
 .btn.active {
   background: black;
   border-radius:6px;
   color: white;
   font-family: Chicago_12;
+}
+
+.square {
+  width: 50px;
+  height: 50px;
+  background-color: transparent;
+  border: 1.5px solid black;
+  padding-right: 46px;
 }
\ No newline at end of file
diff --git a/docs/index.html.ejs b/docs/index.html.ejs
index cd30a80..1f85e30 100644
--- a/docs/index.html.ejs
+++ b/docs/index.html.ejs
@@ -159,19 +159,69 @@
             `)%>
 
             <p>
-              We can also have a bordered dialog, which typically has some interactive component within it.
+              We can also have a modal dialog box, which typically has some interactive component within it.
             </p>
 
             <%- example(`
-            <div class="outer-border">
+            <div class="modal-dialog outer-border">
               <div class="inner-border center">
-                <p class="dialog-text">The Macintosh Finder, Version 1.0 (18 Jan 84)</p>
-                <p class="dialog-text">&copy; 1984 Apple Computer</p>
+
+                <div class="modal-contents">
+                  <p class="modal-text">Modal Dialog</p>
+                  <div style="padding-left: 20px;">
+                    <div class="field-row">
+                      <input id="radio4" type="radio" name="second-example">
+                      <label for="radio4">Room</label>
+                    </div>
+                    <div class="field-row">
+                      <input id="radio5" type="radio" name="second-example">
+                      <label for="radio5">For</label>
+                    </div>
+                    <div class="field-row">
+                      <input id="radio6" type="radio" name="second-example">
+                      <label for="radio6">Stuff</label>
+                    </div>
+                    
+                  </div>
+
+                  <section class="field-row" style="justify-content: flex-end">
+                    <button class="btn">Cancel</button>
+                    <button class="btn" style="width:95px;">OK</button>
+                  </section>
+                
+                </div>
+
+                
               </div>
             </div>
+            `)%>
 
-            
-            
+            <p>
+              A modeless dialog box looks like a window without a size box, zoom box, or
+              scroll bars.
+            </p>
+
+            <%- example(`
+            <div class="window" style="width:30rem;">
+              <div class="title-bar"> 
+                <button class="close"></button>
+                <h1 class="title">Modeless Dialog</h1>
+                <button class="hidden"></button>
+              </div>
+              <div class="separator"></div>
+              
+              <div class="modeless-dialog">
+                <section class="field-row" style="justify-content: flex-start">
+                  <p class="modeless-text">Find:</p>
+                  <input type="text" style="width:100%;" placeholder=""/>
+
+                </section>
+                <section class="field-row" style="justify-content: flex-end">
+                  <button class="btn">Cancel</button>
+                  <button class="btn" style="width:95px;">Find</button>
+                </section>
+              </div>
+            </div>
             `)%>
   
   
@@ -182,6 +232,30 @@
               actions
               <footer>&mdash; Apple HI Guidelines, p. 176</footer>
             </blockquote>
+
+            <p>Alert boxes also have a double-outline frame. T</p>
+
+            <%- example(`
+            <div class="alert-box outer-border"  style="width:30rem;">
+              <div class="inner-border">
+
+                <div class="alert-contents" style="padding-left: 30px; padding-right:30px;">
+                  <section class="field-row" style="justify-content: flex-start">
+                    <div class="square"></div>
+                    <p class="alert-text" style="padding-left:10px;">This is a standard alert box. The text would be placed here. This is where more text appears</p>
+                  </section>
+
+                  <section class="field-row" style="justify-content: flex-end">
+                    <button class="btn">Cancel</button>
+                    <button class="btn" style="width:95px;">OK</button>
+                  </section>
+                
+                </div>
+
+                
+              </div>
+            </div>
+            `)%>
           </div>
         </section>
   
@@ -430,7 +504,7 @@
 
 
   
-            <p>You can also add a details bar to a window by adding<code>.details__bar</code> below the title bar.</p>
+            <p>You can also add a details bar to a window by adding<code>.details-bar</code> below the title bar.</p>
 
             <%- example(`
             
@@ -440,7 +514,7 @@
                 <h1 class="title">Window With Details</h1>
                 <button class="resize"></button>
               </div>
-              <div class="details__bar">
+              <div class="details-bar">
                 <span>some</span>
                 <span>more</span>
                 <span>details</span>
@@ -460,7 +534,7 @@
                 <div class="inactive-title-bar"> 
                   <h1 class="title">Inactive Window</h1>
                 </div>
-                <div class="details__bar">
+                <div class="details-bar">
                   <span>some</span>
                   <span>more</span>
                   <span>details</span>
diff --git a/package-lock.json b/package-lock.json
index 3dfb12e..aa843e8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
 {
-  "name": "system.css",
+  "name": "@sakun/system.css",
   "version": "0.1.0",
   "lockfileVersion": 1,
   "requires": true,
diff --git a/package.json b/package.json
index 671ea3b..ed3fecb 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "system.css",
+  "name": "@sakun/system.css",
   "version": "0.1.0",
   "description": "A design system for building retro Apple interfaces",
   "main": "dist/system.css",
diff --git a/style.css b/style.css
index 5fdc1ca..560ef7c 100644
--- a/style.css
+++ b/style.css
@@ -156,17 +156,14 @@ h2 {
   font-size: 2em;
 }
 
+/* buttons */
+
 .standard-button {
   display: block;
   min-width: 59px;
   min-height: 20px;
 }
 
-/*p {
-  font-family: Monaco;
-  font-size: 22px;
-}*/
-
 /* dialogs */
 
 .standard-dialog {
@@ -176,6 +173,22 @@ h2 {
   background-color: white;
 }
 
+.modal-dialog, .alert-box {
+  width: auto;
+  padding: 13px;
+}
+
+.modal-contents, .alert-contents {
+  padding: 10px;
+}
+
+.modeless-dialog {
+  height: 100%;
+  padding: 0.5rem 0.5rem;
+  font-size: 18px;
+  letter-spacing: -0.025em;
+}
+
 .inner-border {
   border-color: black;
   border-top: 3.5px solid;
@@ -336,7 +349,7 @@ h2 {
   font-size: 1rem;
 }
 
-.details__bar {
+.details-bar {
   flex: none;
   display: flex;
   flex-direction: row;