diff --git a/index.html b/index.html
index 829c852..48edc7c 100644
--- a/index.html
+++ b/index.html
@@ -10,9 +10,11 @@
         <!-- This is the container where the Vue.js application will render to. -->
         <div id="wrapper">
             <div>
-                <hr color="#ec8d2e">
+<!--                <hr color="#ec8d2e">-->
+                <hr class="separator separator--line" />
                 <h1 class="header_title">battleship_eecs448</h1>
-                <hr color="#ec8d2e">
+                <hr class="separator separator--dotter" />
+<!--                <hr color="#ec8d2e">-->
             </div>
 
             <!-- The top level component. This controls showing/hiding grids &c. -->
@@ -25,7 +27,8 @@
                     <form>
                     <button class="btn github" onClick="window.open('https://github.com/EECS-448-Battleship');">GitHub Repo</button>
                 </form>
-                    <hr color="#ec8d2e">
+<!--                    <hr color="#ec8d2e">-->
+                    <hr class="separator separator--line" />
                 </div>
             </footer>
         </div>
diff --git a/src/style/components.css b/src/style/components.css
index 5c7c2d8..ea9a1d9 100644
--- a/src/style/components.css
+++ b/src/style/components.css
@@ -400,3 +400,77 @@ p {
     text-align: center;
     margin: 20px;
 }
+
+/********** HR LINES************
+********************************/
+
+.separator {
+    border: 0;
+}
+
+.separator--line {
+    border: 0;
+    border-bottom: 5px solid #ec8d2e;
+    width: 0;
+    -webkit-animation: separator-width 1s ease-out forwards;
+    animation: separator-width 1s ease-out forwards;
+}
+
+@-webkit-keyframes separator-width {
+    0% {
+        width: 0;
+    }
+    100% {
+        width: 100%;
+    }
+}
+
+@keyframes separator-width {
+    0% {
+        width: 0;
+    }
+    100% {
+        width: 100%;
+    }
+}
+
+@-webkit-keyframes dot-move-right {
+    0% {
+        left: 0;
+    }
+    100% {
+        left: 32px;
+    }
+}
+
+@keyframes dot-move-right {
+    0% {
+        left: 0;
+    }
+    100% {
+        left: 32px;
+    }
+}
+@-webkit-keyframes dot-move-left {
+    0% {
+        left: 0;
+    }
+    100% {
+        left: -32px;
+    }
+}
+@keyframes dot-move-left {
+    0% {
+        left: 0;
+    }
+    100% {
+        left: -32px;
+    }
+}
+.separator--dotter {
+    border: 0;
+    border-bottom: 5px dotted #ec8d2e;
+    width: 0;
+    -webkit-animation: separator-width 1.5s ease-out forwards;
+    animation: separator-width 1.5s ease-out forwards;
+}