diff --git a/.gitmodules b/.gitmodules
index dba2cdd..7156992 100644
--- a/.gitmodules
+++ b/.gitmodules
@@ -1,6 +1,3 @@
-[submodule "proxstar/static/css/csh-material-bootstrap"]
-	path = proxstar/static/css/csh-material-bootstrap
-	url = https://github.com/ComputerScienceHouse/csh-material-bootstrap.git
 [submodule "proxstar/static/noVNC"]
 	path = proxstar/static/noVNC
 	url = https://github.com/novnc/noVNC.git
diff --git a/proxstar/static/css/circle.css b/proxstar/static/css/circle.css
index 4fceb9d..2b7fcef 100644
--- a/proxstar/static/css/circle.css
+++ b/proxstar/static/css/circle.css
@@ -1004,62 +1004,39 @@
   -o-transform: rotate(360deg);
   transform: rotate(360deg);
 }
-/*.c100:hover {
+.c100:hover {
   cursor: default;
 }
 .c100:hover > span {
-  width: 3.33em;
+/*  width: 3.33em;
   line-height: 3.33em;
-  font-size: 0.3em;
+  font-size: 0.3em;*/
   color: #307bbb;
 }
-.c100:hover:after {
+/*.c100:hover:after {
   top: 0.04em;
   left: 0.04em;
   width: 0.92em;
   height: 0.92em;
 }*/
-.c100.dark {
-  background-color: #777777;
-}
-.c100.dark .bar,
-.c100.dark .fill {
-  border-color: #c6ff00 !important;
-}
-.c100.dark > span {
-  color: #777777;
-}
-.c100.dark:after {
-  background-color: #666666;
-}
-.c100.dark:hover > span {
-  color: #c6ff00;
-}
 .c100.green .bar,
 .c100.green .fill {
-  border-color: #4db53c !important;
+  border-color: #4caf50 !important;
 }
 .c100.green:hover > span {
-  color: #4db53c;
-}
-.c100.green.dark .bar,
-.c100.green.dark .fill {
-  border-color: #5fd400 !important;
-}
-.c100.green.dark:hover > span {
-  color: #5fd400;
+  color: #4caf50;
 }
 .c100.orange .bar,
 .c100.orange .fill {
-  border-color: #dd9d22 !important;
+  border-color: #ff9800 !important;
 }
 .c100.orange:hover > span {
-  color: #dd9d22;
+  color: #ff9800;
 }
-.c100.orange.dark .bar,
-.c100.orange.dark .fill {
-  border-color: #e08833 !important;
+.c100.red .bar,
+.c100.red .fill {
+  border-color: #e51c23 !important;
 }
-.c100.orange.dark:hover > span {
-  color: #e08833;
+.c100.red:hover > span {
+  color: #e51c23;
 }
diff --git a/proxstar/static/css/csh-material-bootstrap b/proxstar/static/css/csh-material-bootstrap
deleted file mode 160000
index bfeaa12..0000000
--- a/proxstar/static/css/csh-material-bootstrap
+++ /dev/null
@@ -1 +0,0 @@
-Subproject commit bfeaa127d622489c5f46bdbb0c931da33f89e25a
diff --git a/proxstar/static/css/styles.css b/proxstar/static/css/styles.css
index c09a51a..7545f56 100644
--- a/proxstar/static/css/styles.css
+++ b/proxstar/static/css/styles.css
@@ -1,7 +1,3 @@
-body {
-    padding-top: 100px;
-}
-
 footer {
     text-align: center;
     margin: 20px 0;
@@ -11,6 +7,10 @@ table, th, td {
     border: 1px solid black;
 }
 
+.content {
+    padding-top: 20px;
+}
+
 .panel {
     text-align: center;
 }
@@ -47,6 +47,7 @@ table, th, td {
 
 .nav-list {
     text-align: left;
+    display: block;
 }
 
 .nav-list .nav-header {
@@ -65,31 +66,14 @@ table, th, td {
     margin-top: 5px;
 }
 
-.proxstar-ejectbtn {
+.proxstar-vmbtn {
     width: 20px;
     height: 20px;
     text-align: center;
-    padding: 0px 1px 0px 0px;
+    padding: 1px 0px 0px 0px;
     border-radius: 15px;
 }
 
-.proxstar-changebtn {
-    width: 20px;
-    height: 20px;
-    text-align: center;
-    padding: 0px 0px 0px 1px;
-    border-radius: 15px;
-}
-
-.proxstar-renewbtn {
-    width: 20px;
-    height: 20px;
-    text-align: center;
-    padding: 0px 0px 0px 0px;
-    border-radius: 15px;
-    line-height: 1;
-}
-
 .proxstar-poolbtn {
     padding: 0;
     width: 55px;
diff --git a/proxstar/templates/base.html b/proxstar/templates/base.html
index ffc1436..53ed98a 100644
--- a/proxstar/templates/base.html
+++ b/proxstar/templates/base.html
@@ -6,102 +6,82 @@
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
     <meta name="theme-color" content="#B0197E">
     <link rel="shortcut icon" href="https://assets.csh.rit.edu/uploads/favicon.ico" type="image/x-icon">
-    <link rel="stylesheet" href="/static/css/csh-material-bootstrap/dist/css/csh-material-bootstrap.css">
+    <link rel="stylesheet" href="https://s3.csh.rit.edu/csh-material-bootstrap/4.0.0/dist/csh-material-bootstrap.min.css" media="screen">
     <link rel="stylesheet" href="/static/css/styles.css">
     <link rel="stylesheet" href="/static/css/circle.css">
     <link rel="manifest" href="/static/manifest.json">
 </head>
 <body>
 {% block nav %}
-    <nav class="navbar navbar-inverse navbar-fixed-top">
+    <nav class="navbar navbar-expand-lg navbar-dark bg-primary justify-content-center">
         <div class="container">
-            <div class="navbar-header">
-                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
-                        aria-expanded="false" aria-controls="navbar">
-                    <span class="sr-only">Toggle navigation</span>
-                    <span class="icon-bar"></span>
-                    <span class="icon-bar"></span>
-                    <span class="icon-bar"></span>
-                </button>
-                <a class="navbar-brand" href="/">Proxstar</a>
-            </div>
-            <div id="navbar" class="navbar-collapse collapse">
-                <ul class="nav navbar-nav">
+            <a class="navbar-brand abs" href="/">Proxstar</a>
+            <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarResponsive">
+                <ul class="navbar-nav mr-auto">
                     {% if user.active %}
-                    <li>
-                        <a href="/">
-                            <span class="glyphicon glyphicon-th-list"></span>
+                    <li class="nav-item navbar-user dropdown">
+                        <a class="nav-link" href="/">
+                            <i class="fas fa-th-list"></i>
                             VM List
                         </a>
                     </li>
-                    <li>
-                        <a href="/vm/create">
-                            <span class="glyphicon glyphicon-plus-sign"></span>
+                    <li class="nav-item navbar-user dropdown">
+                        <a class="nav-link" href="/vm/create">
+                            <i class="fas fa-plus-circle"></i>
                             Create VM
                         </a>
                     </li>
                     {% if user.rtp %}
-                    <li>
-                        <a href="/rq">
-                            <span class="glyphicon glyphicon-eye-open"></span>
+                    <li class="nav-item navbar-user dropdown">
+                        <a class="nav-link" href="/rq">
+                            <i class="fas fa-tachometer-alt"></i>
                             RQ Dashboard
                         </a>
                     </li>
-                    <li>
-                        <a href="/settings">
-                            <span class="glyphicon glyphicon-cog"></span>
+                    <li class="nav-item navbar-user dropdown">
+                        <a class="nav-link" href="/settings">
+                            <i class="fas fa-cog"></i>
                             Settings
                         </a>
                     </li>
                     {% endif %}
                     {% endif %}
                 </ul>
-                <ul class="nav navbar-nav navbar-right">
-                    <li class="dropdown navbar-user">
-                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"
-                           role="button" aria-expanded="false">
-                            <img src="https://profiles.csh.rit.edu/image/{{ user.name }}"
-                                 title="{{ user.name }}">
+                <ul class="nav navbar-nav ml-auto">
+                    <li class="nav-item navbar-user dropdown">
+                        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="user01">
+                            <img src="https://profiles.csh.rit.edu/image/{{ user.name }}">
                             {{ user.name }}
                             <span class="caret"></span>
                         </a>
-                        <ul class="dropdown-menu" role="menu">
-                            <li>
-                                <a href="https://profiles.csh.rit.edu/user/{{ user.name }}">
-                                    <span class="glyphicon glyphicon-user"></span>
-                                    Profile
-                                </a>
-                            </li>
-                            <li>
-                                <a href="https://members.csh.rit.edu/">
-                                    <span class="glyphicon glyphicon-globe"></span>
-                                    Members Portal
-                                </a>
-                            </li>
-                            <li>
-                                <a href="/logout">
-                                    Logout
-                                </a>
-                            </li>
-                        </ul>
+                        <div class="dropdown-menu" aria-labelledby="user01">
+                            <a class="dropdown-item" href="/logout">Logout</a>
+                        </div>
                     </li>
                 </ul>
             </div>
         </div>
     </nav>
 {% endblock %}
-<body>
+<div class="content">
 {% block body %}
 {% endblock %}
+</div>
 <footer>
     <br>
     <div class="version">
 	<a class="footer-version" href="https://github.com/com6056/proxstar/tree/{{config["GIT_REVISION"]}}">Proxstar ({{config["GIT_REVISION"]}})</a>
     </div>
 </footer>
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
-<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
 <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
+<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/solid.js" integrity="sha384-+Ga2s7YBbhOD6nie0DzrZpJes+b2K1xkpKxTFFcx59QmVPaSA8c7pycsNaFwUK6l" crossorigin="anonymous"></script>
+<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/fontawesome.js" integrity="sha384-7ox8Q2yzO/uWircfojVuCQOZl+ZZBg2D2J5nkpLqzH1HY0C1dHlTKIbpRz/LG23c" crossorigin="anonymous"></script>
 <script src="/static/js/script.js"></script>
 </body>
 </body>
diff --git a/proxstar/templates/create.html b/proxstar/templates/create.html
index 32d0250..c66faa3 100644
--- a/proxstar/templates/create.html
+++ b/proxstar/templates/create.html
@@ -6,13 +6,13 @@
         {% if user['rtp'] %}
         <div class="col-md-12 col-sm-12">
         {% else %}
-        <div class="col-md-9 col-sm-12">
+        <div class="col-lg-9 col-md-8 col-sm-12">
         {% endif %}
-            <div class="panel panel-default">
-                <div class="panel-heading">
-                    <h3 class="panel-title">Create VM</h3>
+            <div class="card bg-light mb-3">
+                <div class="card-header">
+                    <h3 class="card-title">Create VM</h3>
                 </div>
-                <div class="panel-body">
+                <div class="card-body">
                     {% if limits['disk'] - usage['disk'] <= 0 %}
                         <p>Before you can create any more VMs, you must first delete existing VMs until you have enough disk resources available.</p>
                     {% else %}
@@ -71,27 +71,29 @@
                         </select>
                     </div>
                     {% endif %}
-                    <button class="btn btn-success" id="create-vm" name="create" data-max_cpu="{{ limits['cpu'] - usage['cpu'] }}" data-max_mem="{{ limits['mem'] - usage['mem'] }}" data-max_disk="{{ limits['disk'] - usage['disk'] }}">CREATE</button>
+                    <div class="text-center">
+                        <button class="btn btn-success" id="create-vm" name="create" data-max_cpu="{{ limits['cpu'] - usage['cpu'] }}" data-max_mem="{{ limits['mem'] - usage['mem'] }}" data-max_disk="{{ limits['disk'] - usage['disk'] }}">CREATE</button>
+                    </div>
                     {% endif %}
                 </div>
             </div>
         </div>
         {% if not user['rtp'] %}
-        <div class="col-md-3 col-sm-12">
-            <div class="panel panel-default">
-                <div class="panel-heading">
-                    <h3 class="panel-title">Current Usage</h3>
+        <div class="col-lg-3 col-md-4 col-sm-12">
+            <div class="card bg-light mb-3">
+                <div class="card-header">
+                    <h3 class="card-title">Current Usage</h3>
                 </div>
-                <div class="panel-body">
+                <div class="card-body">
                     <div class="resource-usage">
-                        <div class="col-md-12 col-sm-4">
-                            CPU Cores
-                            {% if percents['cpu'] <= 50 %}
+                        <div class="col-md-12 text-center">
+                            <p>CPU Cores</p>
+                            {% if percents['cpu'] <= 60 %}
                             <div class="c100 p{{ percents['cpu'] }} green">
-                            {% elif percents['cpu'] <= 75 %}
-                            <div class="c100 p{{ percents['cpu'] }} blue">
-                            {% else %}
+                            {% elif percents['cpu'] <= 80 %}
                             <div class="c100 p{{ percents['cpu'] }} orange">
+                            {% else %}
+                            <div class="c100 p{{ percents['cpu'] }} red">
                             {% endif %}
                                 <span>{{ usage['cpu'] }}/{{ limits['cpu'] }}</span>
                                 <div class="slice">
@@ -100,14 +102,14 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col-md-12 col-sm-4">
-                            Memory (GB)
-                            {% if percents['mem'] <= 50 %}
+                        <div class="col-md-12 text-center">
+                            <p>Memory (GB)</p>
+                            {% if percents['mem'] <= 60 %}
                             <div class="c100 p{{ percents['mem'] }} green">
-                            {% elif percents['mem'] <= 75 %}
-                            <div class="c100 p{{ percents['mem'] }} blue">
-                            {% else %}
+                            {% elif percents['mem'] <= 80 %}
                             <div class="c100 p{{ percents['mem'] }} orange">
+                            {% else %}
+                            <div class="c100 p{{ percents['mem'] }} red">
                             {% endif %}
                                 <span>{{ usage['mem'] }}/{{ limits['mem'] }}</span>
                                 <div class="slice">
@@ -116,14 +118,14 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col-md-12 col-sm-4">
-                            Disk (GB)
-                            {% if percents['disk'] <= 50 %}
+                        <div class="col-md-12 text-center">
+                            <p>Disk (GB)</p>
+                            {% if percents['disk'] <= 60 %}
                             <div class="c100 p{{ percents['disk'] }} green">
-                            {% elif percents['disk'] <= 75 %}
-                            <div class="c100 p{{ percents['disk'] }} blue">
-                            {% else %}
+                            {% elif percents['disk'] <= 80 %}
                             <div class="c100 p{{ percents['disk'] }} orange">
+                            {% else %}
+                            <div class="c100 p{{ percents['disk'] }} red">
                             {% endif %}
                                 <span>{{ usage['disk'] }}/{{ limits['disk'] }}</span>
                                 <div class="slice">
diff --git a/proxstar/templates/list_vms.html b/proxstar/templates/list_vms.html
index e4978bf..a498783 100644
--- a/proxstar/templates/list_vms.html
+++ b/proxstar/templates/list_vms.html
@@ -5,9 +5,9 @@
     <div class="row">
         {% if user['rtp'] and rtp_view != True %}
         <div class="col-md-12 col-sm-12">
-            <div class="panel panel-default">
-                <div class="panel-heading">
-                    <p>{{ rtp_view }}</p>
+            <div class="card bg-light mb-3">
+                <div class="card-header text-center">
+                    <h5 class="card-title">{{ rtp_view }}</h5>
                 </div>
             </div>
         </div>
@@ -15,24 +15,24 @@
         {% if not vms %}
         <div class="col-md-12 col-sm-12">
             <div class="panel panel-default">
-                <div class="panel-body">
+                <div class="panel-body text-center">
                     <p>It looks like you don't have any VMs! If you want to create a VM, click <a href="/vm/create">here</a>.</p>
                 </div>
             </div>
         </div>
         {% elif vms == 'INACTIVE' %}
         <div class="col-md-12 col-sm-12">
-            <div class="panel panel-default">
-                <div class="panel-body">
+            <div class="card bg-light mb-3">
+                <div class="card-body text-center">
                     <p>Only active members have access to create Proxmox VMs. If you believe this is an error, please contact an RTP.</p>
                 </div>
             </div>
         </div>
         {% elif rtp_view != True %}
             {% for vm in vms %}
-                <div class="col-md-3 col-sm-4 col-xs-6">
-                    <div class="panel panel-default">
-                        <div class="panel-body">
+                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
+                    <div class="card bg-light mb-3">
+                        <div class="card-body text-center">
                             {% if not vm.get('pending', False) %}
                             <a href="/vm/{{ vm['vmid'] }}">
                                 <p>{{ vm['name'] }}</p>
@@ -47,58 +47,60 @@
             {% endfor %}
         {% else %}
             {% for pool in vms %}
-                <div class="col-md-3 col-sm-4 col-xs-12">
-                    <div class="panel panel-default">
-                        <div class="panel-heading">
-                            <img class="user-img pull-left" src="https://profiles.csh.rit.edu/image/{{ pool['user'] }}" title="{{ pool['user'] }}">
-                            <h3 class="panel-title user-title">
+                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
+                    <div class="card bg-light mb-3">
+                        <div class="card-header text-center">
+                            <img class="user-img float-left" src="https://profiles.csh.rit.edu/image/{{ pool['user'] }}" title="{{ pool['user'] }}">
+                            <h5 class="card-title user-title">
                                 <a href="/user/{{ pool['user'] }}">
                                     {{ pool['user'] }}
                                 </a>
-                            </h3>
-                            <span class="pull-right">{{ pool['num_vms'] }}</span>
+                            </h5>
+                            <span class="float-right">{{ pool['num_vms'] }}</span>
                         </div>
-                        <div class="panel-body">
+                        <div class="card-body">
                             <div class="resource-bar">
-                                <span class="pull-left">CPU</span>
+                                <span class="float-left">CPU</span>
                                 <div class="progress" data-toggle="tooltip" title="{{ pool['usage']['cpu'] }}/{{ pool['limits']['cpu'] }}">
-                                    {% if pool['percents']['cpu'] <= 50 %}
-                                    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="{{ pool['percents']['cpu'] }}" aria-valuemin="0" aria-valuemax="100" style="width:{{ pool['percents']['cpu'] }}%"></div>
-                                    {% elif pool['percents']['cpu'] <= 75 %}
-                                    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="{{ pool['percents']['cpu'] }}" aria-valuemin="0" aria-valuemax="100" style="width:{{ pool['percents']['cpu'] }}%"></div>
+                                    {% if pool['percents']['cpu'] <= 60 %}
+                                    <div class="progress-bar bg-success" role="progressbar" aria-valuenow="{{ pool['percents']['cpu'] }}" aria-valuemin="0" aria-valuemax="100" style="width:{{ pool['percents']['cpu'] }}%"></div>
+                                    {% elif pool['percents']['cpu'] <= 80 %}
+                                    <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="{{ pool['percents']['cpu'] }}" aria-valuemin="0" aria-valuemax="100" style="width:{{ pool['percents']['cpu'] }}%"></div>
                                     {% else %}
-                                    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="{{ pool['percents']['cpu'] }}" aria-valuemin="0" aria-valuemax="100" style="width:{{ pool['percents']['cpu'] }}%"></div>
+                                    <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="{{ pool['percents']['cpu'] }}" aria-valuemin="0" aria-valuemax="100" style="width:{{ pool['percents']['cpu'] }}%"></div>
                                     {% endif %}
                                 </div>
                             </div>
                             <div class="resource-bar">
-                                <span class="pull-left">MEM</span>
+                                <span class="float-left">MEM</span>
                                 <div class="progress" data-toggle="tooltip" title="{{ pool['usage']['mem'] }}GB/{{ pool['limits']['mem'] }}.0GB">
-                                    {% if pool['percents']['mem'] <= 50 %}
-                                    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="{{ pool['percents']['mem'] }}" aria-valuemin="0" aria-valuemax="100" style="width:{{ pool['percents']['mem'] }}%"></div>
-                                    {% elif pool['percents']['mem'] <= 75 %}
-                                    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="{{ pool['percents']['mem'] }}" aria-valuemin="0" aria-valuemax="100" style="width:{{ pool['percents']['mem'] }}%"></div>
+                                    {% if pool['percents']['mem'] <= 60 %}
+                                    <div class="progress-bar bg-success" role="progressbar" aria-valuenow="{{ pool['percents']['mem'] }}" aria-valuemin="0" aria-valuemax="100" style="width:{{ pool['percents']['mem'] }}%"></div>
+                                    {% elif pool['percents']['mem'] <= 80 %}
+                                    <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="{{ pool['percents']['mem'] }}" aria-valuemin="0" aria-valuemax="100" style="width:{{ pool['percents']['mem'] }}%"></div>
                                     {% else %}
-                                    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="{{ pool['percents']['mem'] }}" aria-valuemin="0" aria-valuemax="100" style="width:{{ pool['percents']['mem'] }}%"></div>
+                                    <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="{{ pool['percents']['mem'] }}" aria-valuemin="0" aria-valuemax="100" style="width:{{ pool['percents']['mem'] }}%"></div>
                                     {% endif %}
                                 </div>
                             </div>
                             <div class="resource-bar">
-                                <span class="pull-left">DISK</span>
+                                <span class="float-left">DISK</span>
                                 <div class="progress" data-toggle="tooltip" title="{{ pool['usage']['disk'] }}GB/{{ pool['limits']['disk'] }}GB">
-                                    {% if pool['percents']['disk'] <= 50 %}
-                                    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="{{ pool['percents']['disk'] }}" aria-valuemin="0" aria-valuemax="100" style="width:{{ pool['percents']['disk'] }}%"></div>
-                                    {% elif pool['percents']['disk'] <= 75 %}
-                                    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="{{ pool['percents']['disk'] }}" aria-valuemin="0" aria-valuemax="100" style="width:{{ pool['percents']['disk'] }}%"></div>
+                                    {% if pool['percents']['disk'] <= 60 %}
+                                    <div class="progress-bar bg-success" role="progressbar" aria-valuenow="{{ pool['percents']['disk'] }}" aria-valuemin="0" aria-valuemax="100" style="width:{{ pool['percents']['disk'] }}%"></div>
+                                    {% elif pool['percents']['disk'] <= 80 %}
+                                    <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="{{ pool['percents']['disk'] }}" aria-valuemin="0" aria-valuemax="100" style="width:{{ pool['percents']['disk'] }}%"></div>
                                     {% else %}
-                                    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="{{ pool['percents']['disk'] }}" aria-valuemin="0" aria-valuemax="100" style="width:{{ pool['percents']['disk'] }}%"></div>
+                                    <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="{{ pool['percents']['disk'] }}" aria-valuemin="0" aria-valuemax="100" style="width:{{ pool['percents']['disk'] }}%"></div>
                                     {% endif %}
                                 </div>
                             </div>
-                            <button class="btn btn-info proxstar-poolbtn edit-limit" data-user="{{ pool['user'] }}" data-cpu="{{ pool['limits']['cpu'] }}" data-mem="{{ pool['limits']['mem'] }}" data-disk="{{ pool['limits']['disk'] }}">EDIT</button>
-                            {% if not pool['vms'] %}
-                            <button class="btn btn-danger proxstar-poolbtn delete-user" data-user="{{ pool['user'] }}">DELETE</button>
+                            <div class="text-center">
+                                <button class="btn btn-info proxstar-poolbtn edit-limit" data-user="{{ pool['user'] }}" data-cpu="{{ pool['limits']['cpu'] }}" data-mem="{{ pool['limits']['mem'] }}" data-disk="{{ pool['limits']['disk'] }}">EDIT</button>
+                                {% if not pool['vms'] %}
+                                <button class="btn btn-danger proxstar-poolbtn delete-user" data-user="{{ pool['user'] }}">DELETE</button>
                             {% endif %}
+                            </div>
                         </div>
                     </div>
                 </div>
diff --git a/proxstar/templates/settings.html b/proxstar/templates/settings.html
index e92a9c6..51204ab 100644
--- a/proxstar/templates/settings.html
+++ b/proxstar/templates/settings.html
@@ -28,10 +28,10 @@
                                     <td>{{ template['disk'] }}</td>
                                     <td>
                                         <button class="btn btn-sm btn-info edit-template" data-template_id="{{ template['id'] }}" data-template_name="{{ template['name'] }}" data-template_username="{{ template['username'] }}" data-template_disk="{{ template['disk'] }}">
-                                            <span class="glyphicon glyphicon-pencil"></span>
+                                            <i class="fas fa-edit"></i>
                                         </button>
                                         <button class="btn btn-sm btn-danger delete-template" data-template_id="{{ template['id'] }}">
-                                            <span class="glyphicon glyphicon-remove"></span>
+                                            <i class="fas fa-trash-alt"></i>
                                         </button>
                                     </td>
                                 </tr>
@@ -60,20 +60,20 @@
                                     <td class="col-md-9">{{ pool }}</td>
                                     <td class="col-md-3">
                                         <button class="btn btn-sm btn-danger delete-ignored-pool" data-pool="{{ pool }}">
-                                            <span class="glyphicon glyphicon-remove"></span>
+                                            <i class="fas fa-trash-alt"></i>
                                         </button>
                                     </td>
                                 </tr>
                             {% endfor %}
                         </tbody>
                     </table>
-                    <div class="col-md-9 col-xs-9">
-                        <input type="text" id="pool" class="form-control">
-                    </div>
-                    <div class="col-md-3 col-xs-3">
-                    <button class="btn btn-sm btn-success add-ignored-pool">
-                        <span class="glyphicon glyphicon-plus"></span>
-                    </button>
+                    <div class="input-group">
+                        <input type="text" class="form-control" id="pool">
+                        <span class="input-group-btn">
+                            <button class="btn btn-sm btn-success add-ignored-pool" type="button">
+                                <i class="fas fa-plus"></i>
+                            </button>
+                        </span>
                     </div>
                 </div>
             </div>
@@ -97,20 +97,20 @@
                                     <td class="col-md-9">{{ username }}</td>
                                     <td class="col-md-3">
                                         <button class="btn btn-sm btn-danger delete-allowed-user" data-user="{{ username }}">
-                                            <span class="glyphicon glyphicon-remove"></span>
+                                            <i class="fas fa-trash-alt"></i>
                                         </button>
                                     </td>
                                 </tr>
                             {% endfor %}
                         </tbody>
                     </table>
-                    <div class="col-md-9 col-xs-9">
-                        <input type="text" id="user" class="form-control">
-                    </div>
-                    <div class="col-md-3 col-xs-3">
-                    <button class="btn btn-sm btn-success add-allowed-user">
-                        <span class="glyphicon glyphicon-plus"></span>
-                    </button>
+                    <div class="input-group">
+                        <input type="text" class="form-control" id="user">
+                        <span class="input-group-btn">
+                            <button class="btn btn-sm btn-success add-allowed-user" type="button">
+                                <i class="fas fa-plus"></i>
+                            </button>
+                        </span>
                     </div>
                 </div>
             </div>
diff --git a/proxstar/templates/vm_details.html b/proxstar/templates/vm_details.html
index 166845c..bfcc95b 100644
--- a/proxstar/templates/vm_details.html
+++ b/proxstar/templates/vm_details.html
@@ -3,12 +3,113 @@
 
 <div class="container">
     <div class="row">
-        <div class="col-md-3 col-md-push-9 col-sm-12">
-            <div class="panel panel-default">
-                <div class="panel-heading">
-                    <h3 class="panel-title">Actions</h3>
+        <div class="col-md-3 col-md-pull-3 col-sm-12">
+            <div class="card bg-light mb-3">
+                <div class="card-header">
+                    <h3 class="card-title">Resources</h3>
                 </div>
-                <div class="panel-body">
+                <div class="card-body">
+                    <ul class="nav nav-list">
+                        <li class="nav-header">Boot Order</li>
+                        <li>
+                            {{ vm.boot_order|join(', ') }}
+                            <button class="btn btn-default proxstar-vmbtn" id="edit-boot-order" data-vmid="{{ vm.id }}" data-vmname="{{ vm.name }}" data-boot_order="{{ vm.boot_order_json }}">
+                                <i class="fas fa-cog"></i>
+                            </button>
+                        </li>
+                        <li class="nav-header">Interfaces</li>
+                        {% for interface in vm.interfaces %}
+                        <li>{{ interface[0] }}: {{ interface[2] }}</li>
+                        {% endfor %}
+                        <li class="nav-header">Disks</li>
+                        {% for disk in vm.disks %}
+                        <li>
+                            {{ disk[0] }}: {{ disk[1] }}GB
+                            <button class="btn btn-default proxstar-vmbtn resize-disk" id="resize-disk" name="resize" data-vmid="{{ vm.id }}" data-disk="{{ disk[0] }}" data-usage="{{ usage['disk'] }}" data-limit="{{ limits['disk'] }}">
+                                <i class="fas fa-cog"></i>
+                            </button>
+                        </li>
+                        {% endfor %}
+                        <li class="nav-header">ISO</li>
+                        <li>
+                            {{ vm.iso }}
+                            {% if vm.iso != 'None' %}
+                            <button class="btn btn-danger proxstar-vmbtn" id="eject-iso" name="eject" data-vmid="{{ vm.id }}" data-iso="{{ vm.iso }}">
+                                <i class="fas fa-eject"></i>
+                            </button>
+                            {% endif %}
+                            <button class="btn btn-default proxstar-vmbtn" id="change-iso" name="change" data-vmid="{{ vm.id }}" data-iso="{{ vm.iso }}">
+                                <i class="fas fa-cog"></i>
+                            </button>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-6 col-md-pull-3 col-sm-12">
+            <div class="card bg-light mb-3">
+                <div class="card-header">
+                    <h3 class="card-title">VM Details</h3>
+                </div>
+                <div class="card-body">
+                    <dl class="dl-horizontal">
+                        <dt>Name</dt>
+                        <dd>{{ vm.name }}</dd>
+                        <dt>DNS Name</dt>
+                        <dd>{{ vm.name }}.csh.rit.edu</dd>
+                        <dt>ID</dt>
+                        <dd>{{ vm.id }}</dd>
+                        <dt>Status</dt>
+                        <dd>{{ vm.qmpstatus }}</dd>
+                        <dt>Node</dt>
+                        <dd>{{ vm.node }}</dd>
+                        <dt>Cores</dt>
+                        <dd>
+                            {{ vm.cpu }}
+                            {% if vm.qmpstatus == 'running' or vm.qmpstatus == 'suspended' or vm.qmpstatus == 'paused' %}
+                            <button class="btn btn-default proxstar-vmbtn" id="change-cores" data-vmid="{{ vm.id }}" data-usage="{{ usage['cpu'] - vm.cpu }}" data-limit="{{ limits['cpu'] }}">
+                                <i class="fas fa-cog"></i>
+                            </button>
+                            {% else %}
+                            <button class="btn btn-default proxstar-vmbtn" id="change-cores" data-vmid="{{ vm.id }}" data-usage=0 data-limit="{{ limits['cpu'] }}">
+                                <i class="fas fa-cog"></i>
+                            </button>
+                            {% endif %}
+                        </dd>
+                        <dt>Memory</dt>
+                        <dd>
+                            {% if vm.mem < 1024 %}
+                            {{ vm.mem }}MB
+                            {% else %}
+                            {{ vm.mem // 1024 }}GB
+                            {% endif %}
+                            {% if vm.qmpstatus == 'running' or vm.qmpstatus == 'suspended' or vm.qmpstatus == 'paused' %}
+                            <button class="btn btn-default proxstar-vmbtn" id="change-mem" data-vmid="{{ vm.id }}" data-usage="{{ usage['mem'] - vm.config['memory'] // 1024 }}" data-limit="{{ limits['mem'] }}">
+                                <i class="fas fa-cog"></i>
+                            </button>
+                            {% else %}
+                            <button class="btn btn-default proxstar-vmbtn" id="change-mem" data-vmid="{{ vm.id }}" data-usage=0 data-limit="{{ limits['mem'] }}">
+                                <i class="fas fa-cog"></i>
+                            </button>
+                            {% endif %}
+                        </dd>
+                        <dt>Expiration</dt>
+                        <dd>
+                            {{ vm.expire.strftime('%m/%d/%Y') }}
+                            <button class="btn btn-success proxstar-vmbtn" id="renew-vm" name="renew" data-vmid="{{ vm.id }}" data-vmname="{{ vm.name }}">
+                                <i class="fas fa-plus"></i>
+                            </button>
+                        </dd>
+                    </dl>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-3 col-md-push-9 col-sm-12">
+            <div class="card bg-light mb-3">
+                <div class="card-header">
+                    <h3 class="card-title">Actions</h3>
+                </div>
+                <div class="card-body text-center">
                     {% if vm.qmpstatus == 'stopped' %}
                     {% if not usage_check %}
                     <button class="btn btn-success proxstar-actionbtn" id="start-vm" name="start" data-vmid="{{ vm.id }}" data-vmname="{{ vm.name }}">START</button>
@@ -36,107 +137,6 @@
                 </div>
             </div>
         </div>
-        <div class="col-md-3 col-md-pull-3 col-sm-12">
-            <div class="panel panel-default">
-                <div class="panel-heading">
-                    <h3 class="panel-title">Resources</h3>
-                </div>
-                <div class="panel-body">
-                    <ul class="nav nav-list">
-                        <li class="nav-header">Boot Order</li>
-                        <li>
-                            {{ vm.boot_order|join(', ') }}
-                            <button class="btn btn-default proxstar-changebtn" id="edit-boot-order" data-vmid="{{ vm.id }}" data-vmname="{{ vm.name }}" data-boot_order="{{ vm.boot_order_json }}">
-                                <span class="glyphicon glyphicon-cog"></span>
-                            </button>
-                        </li>
-                        <li class="nav-header">Interfaces</li>
-                        {% for interface in vm.interfaces %}
-                        <li>{{ interface[0] }}: {{ interface[2] }}</li>
-                        {% endfor %}
-                        <li class="nav-header">Disks</li>
-                        {% for disk in vm.disks %}
-                        <li>
-                            {{ disk[0] }}: {{ disk[1] }}GB
-                            <button class="btn btn-default proxstar-changebtn resize-disk" id="resize-disk" name="resize" data-vmid="{{ vm.id }}" data-disk="{{ disk[0] }}" data-usage="{{ usage['disk'] }}" data-limit="{{ limits['disk'] }}">
-                                <span class="glyphicon glyphicon-cog"></span>
-                            </button>
-                        </li>
-                        {% endfor %}
-                        <li class="nav-header">ISO</li>
-                        <li>
-                            {{ vm.iso }}
-                            {% if vm.iso != 'None' %}
-                            <button class="btn btn-danger proxstar-ejectbtn" id="eject-iso" name="eject" data-vmid="{{ vm.id }}" data-iso="{{ vm.iso }}">
-                                <span class="glyphicon glyphicon-eject"></span>
-                            </button>
-                            {% endif %}
-                            <button class="btn btn-default proxstar-changebtn" id="change-iso" name="change" data-vmid="{{ vm.id }}" data-iso="{{ vm.iso }}">
-                                <span class="glyphicon glyphicon-cog"></span>
-                            </button>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-        <div class="col-md-6 col-md-pull-3 col-sm-12">
-            <div class="panel panel-default">
-                <div class="panel-heading">
-                    <h3 class="panel-title">VM Details</h3>
-                </div>
-                <div class="panel-body">
-                    <dl class="dl-horizontal">
-                        <dt>Name</dt>
-                        <dd>{{ vm.name }}</dd>
-                        <dt>DNS Name</dt>
-                        <dd>{{ vm.name }}.csh.rit.edu</dd>
-                        <dt>ID</dt>
-                        <dd>{{ vm.id }}</dd>
-                        <dt>Status</dt>
-                        <dd>{{ vm.qmpstatus }}</dd>
-                        <dt>Node</dt>
-                        <dd>{{ vm.node }}</dd>
-                        <dt>Cores</dt>
-                        <dd>
-                            {{ vm.cpu }}
-                            {% if vm.qmpstatus == 'running' or vm.qmpstatus == 'suspended' or vm.qmpstatus == 'paused' %}
-                            <button class="btn btn-default proxstar-changebtn" id="change-cores" data-vmid="{{ vm.id }}" data-usage="{{ usage['cpu'] - vm.cpu }}" data-limit="{{ limits['cpu'] }}">
-                                <span class="glyphicon glyphicon-cog"></span>
-                            </button>
-                            {% else %}
-                            <button class="btn btn-default proxstar-changebtn" id="change-cores" data-vmid="{{ vm.id }}" data-usage=0 data-limit="{{ limits['cpu'] }}">
-                                <span class="glyphicon glyphicon-cog"></span>
-                            </button>
-                            {% endif %}
-                        </dd>
-                        <dt>Memory</dt>
-                        <dd>
-                            {% if vm.mem < 1024 %}
-                            {{ vm.mem }}MB
-                            {% else %}
-                            {{ vm.mem // 1024 }}GB
-                            {% endif %}
-                            {% if vm.qmpstatus == 'running' or vm.qmpstatus == 'suspended' or vm.qmpstatus == 'paused' %}
-                            <button class="btn btn-default proxstar-changebtn" id="change-mem" data-vmid="{{ vm.id }}" data-usage="{{ usage['mem'] - vm.config['memory'] // 1024 }}" data-limit="{{ limits['mem'] }}">
-                                <span class="glyphicon glyphicon-cog"></span>
-                            </button>
-                            {% else %}
-                            <button class="btn btn-default proxstar-changebtn" id="change-mem" data-vmid="{{ vm.id }}" data-usage=0 data-limit="{{ limits['mem'] }}">
-                                <span class="glyphicon glyphicon-cog"></span>
-                            </button>
-                            {% endif %}
-                        </dd>
-                        <dt>Expiration</dt>
-                        <dd>
-                            {{ vm.expire.strftime('%m/%d/%Y') }}
-                            <button class="btn btn-success proxstar-renewbtn" id="renew-vm" name="renew" data-vmid="{{ vm.id }}" data-vmname="{{ vm.name }}">
-                                <span class="glyphicon glyphicon-plus"></span>
-                            </button>
-                        </dd>
-                    </dl>
-                </div>
-            </div>
-        </div>
     </div>
 </div>