diff --git a/server/routes.py b/server/routes.py
index 7d7e2cb..de35ceb 100644
--- a/server/routes.py
+++ b/server/routes.py
@@ -39,6 +39,13 @@ def index():
     else:
         return flask.render_template('login.html')
 
+@app.route("/view")
+def view():
+    if not current_user.is_authenticated:
+        return flask.render_template('login.html')
+    else:
+        return (flask.render_template('view.html'))
+    
 @app.route("/calendar")
 @login_required
 def calendar():
diff --git a/server/static/css/.main.css.swp b/server/static/css/.main.css.swp
deleted file mode 100644
index 24b1385..0000000
Binary files a/server/static/css/.main.css.swp and /dev/null differ
diff --git a/server/static/css/main.css b/server/static/css/main.css
index e9bdac8..c40e035 100644
--- a/server/static/css/main.css
+++ b/server/static/css/main.css
@@ -106,11 +106,14 @@ body *
     left: 0;
     right: 0;
     bottom: 0;
-    background-color:  #2196F3;
+    background-color: #ddd; 
     -webkit-transition: .4s;
     transition: .4s;
   }
-  
+
+.slider.on {
+    background-color:  #2196F3;
+ } 
   .slider:before {
     position: absolute;
     content: "";
@@ -123,15 +126,15 @@ body *
     transition: .4s;
   }
   
-  input:checked + .slider {
+  input:checked + .slider.on{
     background-color: #ccc;
   }
   
-  input:focus + .slider {
+  input:focus + .slider.on {
     box-shadow: 0 0 1px #ccc;
   }
   
-  input:checked + .slider:before {
+  input:checked + .slider.on:before {
     -webkit-transform: translateX(-13px);
     -ms-transform: translateX(-13px);
     transform: translateX(-13px);
@@ -162,6 +165,12 @@ body *
    text-decoration: none;
 }
 
+.container .preview {
+    width: 20rem;
+    height: 20rem;
+    margin: 1rem 3rem 4rem 3rem;
+}
+
 .container .button.logout {
     background-color: #ddd;
 }
diff --git a/server/static/res/sunview.png b/server/static/res/sunview.png
new file mode 100755
index 0000000..6a0cb5d
Binary files /dev/null and b/server/static/res/sunview.png differ
diff --git a/server/template/.account.html.swp b/server/template/.account.html.swp
deleted file mode 100644
index 5a4b778..0000000
Binary files a/server/template/.account.html.swp and /dev/null differ
diff --git a/server/template/calendar.html b/server/template/calendar.html
index 5bef014..ed8f6d1 100644
--- a/server/template/calendar.html
+++ b/server/template/calendar.html
@@ -18,7 +18,7 @@
             <!-- Rounded switch -->
             <label class="switch">
                 <input class="toggle" id={{item.calendarId}} type="checkbox" toggled={{item.toggle}} onclick="toggleReaction(this)">
-                <span class="slider round"></span>
+                <span class="slider on round"></span>
             </label>
         </div>
 
diff --git a/server/template/view.html b/server/template/view.html
new file mode 100644
index 0000000..80581e4
--- /dev/null
+++ b/server/template/view.html
@@ -0,0 +1,43 @@
+{% extends "sidebar.html" %}
+{% block body%}
+<div class="container profile">
+    <p class="name">Sun View</p>
+</div>
+<div class="container">
+    <i class="fa fa-arrow-left" style="font-size: 4rem; color: #ddd; margin-bottom: 3rem"></i>
+    <img class="preview" src="/static/res/sunview.png" alt="Profile Picture"></img> 
+    <i class="fa fa-arrow-right" style="font-size: 4rem; color: #ddd; margin-bottom: 3rem"></i>
+</div>
+<div class="sub container">
+    <p class=name>Sun</p>
+    <div style="flex-grow: 1"></div>
+<label class="switch">
+    <input class="toggle" id=Sun type="checkbox" toggled="True" >
+    <span class="slider round"></span>
+</label>
+</div> 
+<div class="sub container">
+    <p class=name>Planet</p>
+    <div style="flex-grow: 1"></div>
+<label class="switch">
+    <input class="toggle" id=Sun type="checkbox" toggled="True" >
+    <span class="slider round"></span>
+</label>
+</div> 
+<div class="sub container">
+    <p class=name>Dwarf</p>
+    <div style="flex-grow: 1"></div>
+    <label class="switch"> 
+    <input class="toggle" id=Sun type="checkbox" toggled="True" >
+    <span class="slider round"></span>
+</label>
+</div> 
+<div class="sub container">
+    <p class=name>Calendar</p>
+    <div style="flex-grow: 1"></div>
+    <label class="switch">
+    <input class="toggle" id=Sun type="checkbox" toggled="True" >
+    <span class="slider round"></span>
+</label>
+</div> 
+{% endblock %}