diff --git a/client/src/components/ascii/animate.js b/client/src/components/ascii/animate.js
index bd32688..3f0e888 100644
--- a/client/src/components/ascii/animate.js
+++ b/client/src/components/ascii/animate.js
@@ -57,7 +57,7 @@ export class Animation extends Component {
           (l, f) => l < f.length ? f.length : l,
           0,
         )
-        const height = frame.toString().split(/\r?\n/).filter(Boolean).length
+        const height = frame.toString().split(/\r?\n/).length
         
         return acc[1] < length*height ? [idx, length*height] : acc
       },
@@ -99,7 +99,7 @@ export class Animation extends Component {
     ]
 
     return (
-      <div style={containerStyle}>
+      <div className={this.animation.className} style={containerStyle}>
         <div style={{position: 'relative', alignSelf: 'flex-start'}}>
           <pre style={{position: 'relative', float: 'left', opacity: 0}}>
             {this.maxFrame}
diff --git a/client/src/components/ascii/pipi.js b/client/src/components/ascii/pipi.js
index 8417f4f..459e09b 100644
--- a/client/src/components/ascii/pipi.js
+++ b/client/src/components/ascii/pipi.js
@@ -36,99 +36,99 @@ export const PipiSauvage = (props) => {
 
 const getTalkingFrames = () =>
   ([String.raw`
-        _____________________ 
-       /383838383838338383838\ 
-       |83/ ------------- \83| 
-       |99||             ||99| 
-       |83||   >◠    ◠<  ||98| 
-       |83||             ||98|   
-       |83||  0   )▾( 0  ||98|  
-       |83||             ||98|   
-       |83\ ------------- /98|    
-        \8989898989898989898/     
-             /888888888\          
-       ========================   
-      / 1 2 3 4 5 6 7 8 9 0 -  \\  
-     / q w e r t y u i o p [ ]  \\
-    / a s d f g h j k l ; ' entr \\ 
-   |  z x c v b n m , . ?  shift  ||
-    -------------------------------`,
+     _____________________ 
+    /383838383838338383838\ 
+    |83/ ------------- \83| 
+    |99||             ||99| 
+    |83||   >◠    ◠<  ||98| 
+    |83||             ||98|   
+    |83||  0   )▾( 0  ||98|  
+    |83||             ||98|   
+    |83\ ------------- /98|    
+     \8989898989898989898/     
+          /888888888\          
+    ========================   
+   / 1 2 3 4 5 6 7 8 9 0 -  \\  
+  / q w e r t y u i o p [ ]  \\
+ / a s d f g h j k l ; ' entr \\ 
+|  z x c v b n m , . ?  shift  ||
+ -------------------------------`,
     String.raw`
-        _____________________ 
-       /383838383838338383838\ 
-       |83/ ------------- \83| 
-       |99||             ||99| 
-       |83||   >●    ●<  ||98| 
-       |83||             ||98|   
-       |83||  0   )●( 0  ||98|  
-       |83||             ||98|   
-       |83\ ------------- /98|    
-        \8989898989898989898/     
-             /888888888\          
-       ========================   
-      / 1 2 3 4 5 6 7 8 9 0 -  \\  
-     / q w e r t y u i o p [ ]  \\
-    / a s d f g h j k l ; ' entr \\ 
-   |  z x c v b n m , . ?  shift  ||
-    -------------------------------`,
+     _____________________ 
+    /383838383838338383838\ 
+    |83/ ------------- \83| 
+    |99||             ||99| 
+    |83||   >●    ●<  ||98| 
+    |83||             ||98|   
+    |83||  0   )●( 0  ||98|  
+    |83||             ||98|   
+    |83\ ------------- /98|    
+     \8989898989898989898/     
+          /888888888\          
+    ========================   
+   / 1 2 3 4 5 6 7 8 9 0 -  \\  
+  / q w e r t y u i o p [ ]  \\
+ / a s d f g h j k l ; ' entr \\ 
+|  z x c v b n m , . ?  shift  ||
+ -------------------------------`,
     String.raw`
-        _____________________ 
-       /383838383838338383838\ 
-       |83/ ------------- \83| 
-       |99||             ||99| 
-       |83||   >●    ●<  ||98| 
-       |83||             ||98|   
-       |83||  0   )▾( 0  ||98|  
-       |83||             ||98|   
-       |83\ ------------- /98|    
-        \8989898989898989898/     
-             /888888888\          
-       ========================   
-      / 1 2 3 4 5 6 7 8 9 0 -  \\  
-     / q w e r t y u i o p [ ]  \\
-    / a s d f g h j k l ; ' entr \\ 
-   |  z x c v b n m , . ?  shift  ||
-    -------------------------------`,
+     _____________________ 
+    /383838383838338383838\ 
+    |83/ ------------- \83| 
+    |99||             ||99| 
+    |83||   >●    ●<  ||98| 
+    |83||             ||98|   
+    |83||  0   )▾( 0  ||98|  
+    |83||             ||98|   
+    |83\ ------------- /98|    
+     \8989898989898989898/     
+          /888888888\          
+    ========================   
+   / 1 2 3 4 5 6 7 8 9 0 -  \\  
+  / q w e r t y u i o p [ ]  \\
+ / a s d f g h j k l ; ' entr \\ 
+|  z x c v b n m , . ?  shift  ||
+ -------------------------------`,
    ])
 
 const getWhistlingFrames = () =>
       ([String.raw`
-        _____________________ 
-       /383838383838338383838\ 
-       |83/ ------------- \83| 
-       |99||             ||99| 
-       |83||  > ◠    ◠ < ||98| 
-       |83||             ||98|   
-       |83||  0   )o( 0  ||98|  
-       |83||             ||98|   
-       |83\ ------------- /98|    
-        \8989898989898989898/     
-             /888888888\          
-       ========================   
-      / 1 2 3 4 5 6 7 8 9 0 -  \\  
-     / q w e r t y u i o p [ ]  \\
-    / a s d f g h j k l ; ' entr \\ 
-   |  z x c v b n m , . ?  shift  ||
-    -------------------------------
+     _____________________ 
+    /383838383838338383838\ 
+    |83/ ------------- \83| 
+    |99||             ||99| 
+    |83||  > ◠    ◠ < ||98| 
+    |83||             ||98|   
+    |83||  0   )o( 0  ||98|  
+    |83||             ||98|   
+    |83\ ------------- /98|    
+     \8989898989898989898/     
+          /888888888\          
+    ========================   
+   / 1 2 3 4 5 6 7 8 9 0 -  \\  
+  / q w e r t y u i o p [ ]  \\
+ / a s d f g h j k l ; ' entr \\ 
+|  z x c v b n m , . ?  shift  ||
+ -------------------------------
 `])
   
 const getSwooningFrames = () => 
       ([String.raw`
-        _____________________ 
-       /383838383838338383838\ 
-       |83/ ------------- \83| 
-       |99||             ||99| 
-       |83||   ❤     ❤   ||98| 
-       |83||  0   ◡   0  ||98|   
-       |83||             ||98|  
-       |83||             ||98|   
-       |83\ ------------- /98|    
-        \8989898989898989898/     
-             /888888888\          
-       ========================   
-      / 1 2 3 4 5 6 7 8 9 0 -  \\  
-     / q w e r t y u i o p [ ]  \\
-    / a s d f g h j k l ; ' entr \\ 
-   |  z x c v b n m , . ?  shift  ||
-    ------------------------------- 
+     _____________________ 
+    /383838383838338383838\ 
+    |83/ ------------- \83| 
+    |99||             ||99| 
+    |83||   ❤     ❤   ||98| 
+    |83||  0   ◡   0  ||98|   
+    |83||             ||98|  
+    |83||             ||98|   
+    |83\ ------------- /98|    
+     \8989898989898989898/     
+          /888888888\          
+    ========================   
+   / 1 2 3 4 5 6 7 8 9 0 -  \\  
+  / q w e r t y u i o p [ ]  \\
+ / a s d f g h j k l ; ' entr \\ 
+|  z x c v b n m , . ?  shift  ||
+ ------------------------------- 
 `])
diff --git a/client/src/components/ascii/speech.js b/client/src/components/ascii/speech.js
new file mode 100644
index 0000000..ce8ecd4
--- /dev/null
+++ b/client/src/components/ascii/speech.js
@@ -0,0 +1,30 @@
+import React from 'react'
+import {range, reduce} from 'lodash'
+import {Animation} from './animate'
+
+
+// this component is for rendering animated speech bubbles which
+// are displayed character by character
+export const SpeechBubble = (props) => {
+  const {text} = props
+
+  // separate the text chars into individual and
+  // cumulative frames!
+  const frames = reduce(
+    range(0, text.length),
+    (acc, idx) => ([
+      ...acc,
+      idx === 0 ?
+        text.charAt(idx)
+        : `${acc[idx-1]}${text.charAt(idx)}`,
+    ]),
+    [],
+  )
+
+  return (
+    <Animation frames={frames}
+               {...props}
+               />
+  )
+
+}
diff --git a/client/src/components/home/index.css b/client/src/components/home/index.css
index 2878de9..2d75df1 100644
--- a/client/src/components/home/index.css
+++ b/client/src/components/home/index.css
@@ -21,10 +21,13 @@ a {
 
 .footer {
     display: flex;
-    justify-content: space-between;
+    justify-content: center;
     grid-area: footer;
-    font-family: 'Noto Sans', sans-serif;
-    font-size: 8.5vw;
+    font-family: monospace;
+    font-size: small;
+    margin-top: 0.7em;
+    margin-bottom: 0.7em;
+    color: #ff7792;
 }
 
 .main {
@@ -34,3 +37,57 @@ a {
     margin-left: 1%;
     margin-right: 1%;
 }
+
+.welcome-container {
+    display: flex;
+    justify-content: center;
+}
+
+
+/* Large Devices, Wide Screens */
+@media only screen and (max-width : 1200px) {
+
+}
+
+/* Medium Devices, Desktops */
+@media only screen and (max-width : 992px) {
+
+}
+
+/* Small Devices, Tablets */
+@media only screen and (max-width : 768px) {
+    .welcome-container {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .pipi-welcome-computer {
+        font-size: 1.4em !important;
+    }
+    
+    .pipi-welcome-speech {
+        font-size: 3.5em !important;
+        text-align: left !important;
+        order: -1 !important;
+        margin-left: 0em !important;
+    }
+}
+
+/* Extra Small Devices, Phones */ 
+@media only screen and (max-width : 480px) {
+    .welcome-container {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .pipi-welcome-computer {
+        font-size: medium !important;
+    }
+    
+    .pipi-welcome-speech {
+        font-size: xx-large !important;
+        text-align: left !important;
+        order: -1 !important;
+        margin-left: 0em !important;
+    }
+}
diff --git a/client/src/components/home/index.js b/client/src/components/home/index.js
index 18e9478..b8e7bdf 100644
--- a/client/src/components/home/index.js
+++ b/client/src/components/home/index.js
@@ -15,6 +15,7 @@ import {Poet} from '../poets/poet'
 import {Poets} from '../poets/poets'
 import {PipiSauvage} from '../ascii/pipi'
 import {Animation} from '../ascii/animate'
+import {SpeechBubble} from '../ascii/speech'
 
 
 const mapStateToProps = state => ({
@@ -46,16 +47,9 @@ class home extends Component {
           <Route path='/issues' component={Issues}/>
           <Route path='/issue/:volume' component={Issue}/>
         </Switch>
-        {
-            // <footer className="footer">
-            //     {
-            //       map(
-            //         range(8),
-            //         i => <IssueNumbers issueId={i} key={i}/>,
-            //       )
-            //     }
-            // </footer>
-        }
+        <footer className={'footer'}>
+          for ai ❤ by ai
+        </footer>
       </div>
     );
   }
@@ -66,36 +60,33 @@ class Welcome extends Component {
     const containerStyle = {
       display: 'flex',
       justifyContent: 'center',
-      border: '1px solid black',
     }
 
-    const welcomeStr = String.raw`
-welc0m3 2 teh
+    const welcomeStr = String.raw`welc0m3 2 teh
 new yorken poesry
-m a g a z i n e
+m a g a z i n e ❤
 `
-    const welcomeFrames = reduce(
-      range(0, welcomeStr.length),
-      (acc, idx) => ([
-        ...acc,
-        idx === 0 ?
-          welcomeStr.charAt(idx)
-          : `${acc[idx-1]}${welcomeStr.charAt(idx)}`,
-      ]),
-      [],
-    )
     
     return (
       <div className={'main'}>
-        <div style={containerStyle}>
-          for ai, by ai
-          <PipiSauvage action='talking'/>
-          <Animation style={{marginLeft: '50px'}}
-                     size={'40px'}
-                     frames={welcomeFrames}
-                     speed={0.1}
-                     repeat={false}
-            />
+        <div className={'welcome-container'}>
+          <PipiSauvage className={'pipi-welcome-computer'}
+                       action='talking'/>
+          <SpeechBubble className={'pipi-welcome-speech'}
+                        style={{marginLeft: '50px'}}
+                        mainStyle={{
+                          color: '#5be6ff',
+                        }}
+                        middleStyle={{
+                          color: '#ffff5b',
+                        }}
+                        bottomStyle={{
+                          color: '#5bffc2',
+                        }}
+                        size={'40px'}
+                        text={welcomeStr}
+                        speed={0.1}
+                        repeat={false}/>
         </div>
       </div>
     )