diff --git a/server/forms.py b/server/forms.py
index 311ec75..2f1dda0 100644
--- a/server/forms.py
+++ b/server/forms.py
@@ -28,4 +28,8 @@ class RegistrationForm(FlaskForm):
     def validate_email(self, email):
         user = User.query.filter_by(email=email.data).first()
         if user is not None:
-            raise ValidationError('Please use a different email address.')
\ No newline at end of file
+            raise ValidationError('Please use a different email address.')
+
+class DeviceForm(FlaskForm):
+    deviceId=StringField('New Device ID', validators=[DataRequired()])
+    submit = SubmitField('Add New Device')
diff --git a/server/googleHandler.py b/server/googleHandler.py
index b36b089..888acd6 100644
--- a/server/googleHandler.py
+++ b/server/googleHandler.py
@@ -104,7 +104,7 @@ def calendarsFromDb():
     calendars = dbCalendar.getCalendars(dbCalendar, current_user.id)
     pyCalendars = []
     for calendar in calendars:
-        name = calendar.name
+        name = (calendar.name[:16] + '..') if len(calendar.name)> 18 else calendar.name
         calendarId = calendar.calendar_id
         toggle = calendar.toggle
         color = calendar.color
diff --git a/server/models.py b/server/models.py
index b28cbce..048fb0a 100644
--- a/server/models.py
+++ b/server/models.py
@@ -88,3 +88,7 @@ class Calendar(db.Model):
         
         db.session.add(newcal)
         db.session.commit()
+        
+class Device(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    deviceId = db.Column(db.String(128), index=True)
diff --git a/server/routes.py b/server/routes.py
index de35ceb..10e6750 100644
--- a/server/routes.py
+++ b/server/routes.py
@@ -19,8 +19,8 @@ import requests
 import server.googleHandler as google
 
 from server import login_manager, app, db
-from server.forms import LoginForm, RegistrationForm
-from server.models import User, Calendar
+from server.forms import LoginForm, RegistrationForm, DeviceForm
+from server.models import User, Calendar, Device
 
 os.environ['OAUTHLIB_INSECURE_TRANSPORT'] = '1'
 
@@ -45,7 +45,23 @@ def view():
         return flask.render_template('login.html')
     else:
         return (flask.render_template('view.html'))
+
+@app.route("/devices", methods=['GET', 'POST'])
+def devices():
+    if not current_user.is_authenticated:
+        return flask.render_template('login.html')
     
+    device = Device()
+    device.deviceId="Anthon-Mouse-Car"
+    devices = [device]
+    form = DeviceForm()
+    if form.validate_on_submit():
+        print(form.deviceId.data, flush=True)
+        # TODO add device to database here
+        
+    return flask.render_template('devices.html', devices=devices, form=form)
+
+
 @app.route("/calendar")
 @login_required
 def calendar():
@@ -67,6 +83,7 @@ def emaillogin():
         return redirect(url_for('account'))
     return render_template('emaillogin.html', title='Sign In', form=form)
 
+
 @app.route('/register', methods=['GET', 'POST'])
 def register():
     if current_user.is_authenticated:
@@ -81,7 +98,7 @@ def register():
         db.session.commit()
         flash('Congratulations, you are now a registered user!')
         return redirect(url_for('emaillogin'))
-    return render_template('register.html', title='Register', form=form)
+    return flask.render_template('register.html', title='Register', form=form)
 
 @app.route("/test")
 def testAPI():
diff --git a/server/static/css/main.css b/server/static/css/main.css
index c40e035..3dfcf24 100644
--- a/server/static/css/main.css
+++ b/server/static/css/main.css
@@ -179,6 +179,15 @@ body *
     background-color: #b51409;
 }
 
+.container .button.adddevice {
+    background-color: #ddd;
+    color: white;
+}
+.container .button.addcalendar {
+    background-color: #ddd;
+    color: white;
+}
+
 .sub.container {
     width: 20rem;
     justify-content: left;
diff --git a/server/template/calendar.html b/server/template/calendar.html
index ed8f6d1..2043fb3 100644
--- a/server/template/calendar.html
+++ b/server/template/calendar.html
@@ -1,20 +1,19 @@
 {% extends "sidebar.html" %}
 {% block body%}
 
-<div style="height: 50px">
-    <div style="width: 30%; float: left; margin-left: 10%">Calendar</div>
-    <div style="width: 30%; float: left">Show on device</div>
-    <div style="width: 30%; float: left">Color</div>
+<div class="container">
+    <div style="width: 15rem; margin: 1rem">Calendar</div>
+    <div style="width: 10rem; margin: 1rem; padding-right: 5rem">Show on device</div>
+    <div style="width: 2rem; margin: 1rem">Color</div>
 </div>
 
-<div>
     {% for item in calendars %}
-    <div style="height: 30px">
+    <div class="container">
         <!--Name-->
-        <div style="width: 30%; float: left; font-size: 10px; text-align: left; margin-left: 10%">{{ item.name }}</div>
+        <div style="width: 15rem; margin: 1rem;">{{ item.name }}</div>
 
         <!--Toggle-->
-        <div style="width: 30%; float: left">
+        <div style="width: 10rem; margin: 1rem; padding-right: 5rem">
             <!-- Rounded switch -->
             <label class="switch">
                 <input class="toggle" id={{item.calendarId}} type="checkbox" toggled={{item.toggle}} onclick="toggleReaction(this)">
@@ -23,7 +22,7 @@
         </div>
 
         <!--Color Selector-->
-        <div style="width: 30%; float: left">
+        <div style="width: 2rem; margin: 1rem;">
         <div class="colorPickSelector" id={{item.calendarId}}  defaultColor={{item.color}}></div>
             <!--svg height="20" width="20">
                 <circle cx="10" cy="10" r="10" stroke="black" stroke-width="0" fill={{ item.color }} />
@@ -32,8 +31,9 @@
         
     </div>
     {% endfor %}
- 
-</div>
+    <div class="container">
+        <div class="button addcalendar" style="width: auto; margin: 4rem">Add Calendar</div>
+    </div> 
 
 <script type="text/javascript">
     
diff --git a/server/template/devices.html b/server/template/devices.html
new file mode 100644
index 0000000..ec8f310
--- /dev/null
+++ b/server/template/devices.html
@@ -0,0 +1,36 @@
+{% extends "sidebar.html" %}
+{% block body%}
+
+<div class="container">
+    <div style="width: 15rem; margin: 1rem">Device ID</div>
+    <div style="width: 10rem; margin: 1rem; padding-right: 5rem">Link Status</div>
+    <div style="width: 2rem; margin: 1rem">Action</div>
+</div>
+
+    {% for item in devices %}
+    <div class="container">
+        <!--Name-->
+        <div style="width: 15rem; margin: 1rem;">{{ item.deviceId }}</div>
+
+        <!--Toggle-->
+        <div style="width: 10rem; margin: 1rem; padding-right: 5rem">
+           Connected 
+        </div>
+
+        <!--Color Selector-->
+        <div style="width: 2rem; margin: 1rem;">
+            <button type="button">Unlink</button>
+        </div>
+        
+    </div>
+    {% endfor %}
+    <form action="" method="post">
+    <div class="container">
+        {{ form.hidden_tag() }}
+        {{ form.deviceId.label }}
+        {{ form.deviceId(size=32) }}
+        {{ form.submit() }}
+    </div> 
+    </form>
+
+{% endblock %}