diff --git a/image.png b/image.png
new file mode 100644
index 0000000..1a1237d
Binary files /dev/null and b/image.png differ
diff --git a/location_app/app/functions/auth/base.py b/location_app/app/functions/auth/base.py
index c7f8e0b..494fcab 100644
--- a/location_app/app/functions/auth/base.py
+++ b/location_app/app/functions/auth/base.py
@@ -1,18 +1,19 @@
 import sqlite3 as sql
 from datetime import datetime
 
+"""Validation for fields"""
 
-database_user = "app/databases/users.db" 
+database_user = "app/databases/users.db"                                     # Taking the databases
 database_locations = 'app/databases/locations.db'
 
 def create():
     with sql.connect(database_user) as cur:
-        try:
+        try:                                                                 # Tries the sql table
             cur.execute("CREATE TABLE UserDatabase(username VARCHAR2(20), password VARCHAR2(20), realname VARCHAR2(20), dob VARCHAR2(20), weight VARCHAR2(20));") 
         except:
             pass
 
-def user_exists(username):
+def user_exists(username):                                                   # Checks for username
     with sql.connect(database_user) as cur:
         com = f"SELECT count(*) FROM UserDatabase WHERE username='{username}';"
         print(com)
@@ -22,7 +23,7 @@ def user_exists(username):
         else:
             return True
         
-def tid_exists(username):
+def tid_exists(username):                                                   # Checks for tid
     with sql.connect(database_locations) as cur:
         com = f"SELECT count(*) FROM Location WHERE tid='{username}';"
         print(com)
@@ -32,7 +33,7 @@ def tid_exists(username):
         else:
             return True
         
-def compare(username, value_in, value_type):
+def compare(username, value_in, value_type):                                # Comparing
     with sql.connect(database_user) as cur:
         com = f"SELECT {value_type} FROM UserDatabase WHERE username='{username}';"
         print(com)
@@ -43,14 +44,14 @@ def compare(username, value_in, value_type):
         else:
             return False
         
-def check_month(month, day):
+def check_month(month, day):                                                # Checks the month and day 
     if month in [1, 3, 5, 7, 8, 10, 12]:
         if (day > 0 and day <= 31):
             return True
         else:
             return False
     elif month == 2:
-        if (day > 0 and day <= 28):
+        if (day > 0 and day <= 28):                                         # Checking February
             return True
         else:
             return False
@@ -60,7 +61,7 @@ def check_month(month, day):
         else:
             return False
         
-def check_date(day, month, year):
+def check_date(day, month, year):                                           # Checks  full date        
     today = datetime.today().strftime('%Y-%m-%d').split("-")
     if int(year) > int(today[0]):
         return False
diff --git a/location_app/app/functions/auth/change_password.py b/location_app/app/functions/auth/change_password.py
index c7148f1..107a648 100644
--- a/location_app/app/functions/auth/change_password.py
+++ b/location_app/app/functions/auth/change_password.py
@@ -1,17 +1,17 @@
 import sqlite3 as sql
-from app.functions.auth import base
+from app.functions.auth import base                                     # Imports base for later use
 
 
 database_user = "app/databases/users.db" 
 
-def change_password(data):
+def change_password(data):                                              # Changing password 
     base.create()
     _status = check_pass_data(data)
     if _status == "success":
         new_password(data)
     return _status
     
-def check_pass_data(data):
+def check_pass_data(data):                                              # Checking password data
     _status = check_empty(data)
     if _status == "ok":
         if base.tid_exists(data['username']):
@@ -26,7 +26,7 @@ def check_pass_data(data):
         return _status
         
 
-def check_empty(data):
+def check_empty(data):                                                  # Checks the entry to see if empty
     if data['username'] == "":
         return "empty_id"
     elif data['day'] == "0":
@@ -42,7 +42,7 @@ def check_empty(data):
     else:
         return "ok"
 
-def new_password(data):
+def new_password(data):                                                 # Updates database with new password
     con = sql.connect(database_user)                                   
     cur = con.cursor()
     com = f"UPDATE UserDatabase SET password='{data['password']}' WHERE username='{data['username']}';"
diff --git a/location_app/app/functions/auth/create_profile.py b/location_app/app/functions/auth/create_profile.py
index 26da05f..7b925c5 100644
--- a/location_app/app/functions/auth/create_profile.py
+++ b/location_app/app/functions/auth/create_profile.py
@@ -1,17 +1,17 @@
-import sqlite3 as sql
+import sqlite3 as sql                                                       # Imports sql for use within database
 from app.functions.auth import base
 
 
 database_user = "app/databases/users.db" 
  
-def create_profile(data):
+def create_profile(data):                                                   # Creating new data for a new user
     base.create()
     _status = check_prof_data(data)
     if _status == "success":
         make_user(data)
     return _status
         
-def check_prof_data(data):
+def check_prof_data(data):                                                  # Checking new
     print(data)
     _status = check_empty(data)
     if _status == "ok":
diff --git a/location_app/app/functions/data_tools/data_getter.py b/location_app/app/functions/data_tools/data_getter.py
index 34dbd1c..128e11e 100644
--- a/location_app/app/functions/data_tools/data_getter.py
+++ b/location_app/app/functions/data_tools/data_getter.py
@@ -2,15 +2,15 @@ import sqlite3 as sql
 import time
 
 
-database_user = "app/databases/users.db"   
+database_user = "app/databases/users.db"                                    # Grabs the database
 database_locations = "app/databases/locations.db"   
 
 
 # user
-def get_user_for(username):
+def get_user_for(username):                                             
     with sql.connect(database_user) as cur:
-        res = cur.execute(f"SELECT * FROM UserDatabase WHERE username='{username}';").fetchone()[0]
-        return res
+        res = cur.execute(f"SELECT username, realname, dob, weight FROM UserDatabase WHERE username='{username}';").fetchone()
+        return [res, get_filtered_data_for(username)]                       # Returns required data 
         
 
         
diff --git a/location_app/app/mqtt/__init__.py b/location_app/app/mqtt/__init__.py
index 8056420..ba52a04 100644
--- a/location_app/app/mqtt/__init__.py
+++ b/location_app/app/mqtt/__init__.py
@@ -1,4 +1,4 @@
-from flask_mqtt import Mqtt
+from flask_mqtt import Mqtt                     # MQTT using flask
 from app.mqtt import mqtt_message_handler
 
 def init_app(app):
@@ -6,7 +6,7 @@ def init_app(app):
 
     @mqtt.on_connect()
     def handle_connect(client, userdata, flags, rc):
-        mqtt.subscribe('owntracks/4009user/#')
+        mqtt.subscribe('owntracks/4009user/#')  #owntracks subscribing to mqtt
 
     @mqtt.on_message()
     def handle_mqtt_message(client, userdata, msg):
diff --git a/location_app/app/mqtt/mqtt_message_handler.py b/location_app/app/mqtt/mqtt_message_handler.py
index 12b6bd9..3195779 100644
--- a/location_app/app/mqtt/mqtt_message_handler.py
+++ b/location_app/app/mqtt/mqtt_message_handler.py
@@ -1,4 +1,4 @@
-from geopy.geocoders import Nominatim
+from geopy.geocoders import Nominatim                   # Imports nominatim API 
 import sqlite3 as sql
 import json, os, time
 
@@ -6,28 +6,28 @@ import json, os, time
 database_locations = 'app/databases/locations.db'
 
 def getMsg(msg):
-    con = sql.connect(database_locations)                                   
+    con = sql.connect(database_locations)               # connecys to db, amkes cursor                      
     cur = con.cursor()
-    geolocator = Nominatim(user_agent="Web_app")
-    try:
+    geolocator = Nominatim(user_agent="Web_app")        # starts nominatim
+    try:                                                # Tries SQL to create table
         cur.execute("CREATE TABLE Location(tid VARCHAR2(2), longitude NUMBER(10,6), latitude NUMBER(10,6), city VARCHAR2(20), road VARCHAR2(30), date VARCHAR2(20), time VARCHAR2(20), tst INT(15));") 
     except:
         pass                                                            
-    data = json.loads(msg.payload.decode("utf8"))                       
+    data = json.loads(msg.payload.decode("utf8"))                      
     tid = data["tid"]
     lat = data["lat"]
     lon = data["lon"]
     location = geolocator.reverse(f"{data['lat']},{data['lon']}")
-    city = location.raw["address"]["city"]
+    city = location.raw["address"]["city"]              # Puts data into small array to be used later
     road = location.raw["address"]["road"]
     tst = data["tst"]
-    _time = time.strftime('%H:%M:%S', time.localtime(tst))
+    _time = time.strftime('%H:%M:%S', time.localtime(tst))#sets time format
     _date = time.strftime('%d-%m-%Y', time.localtime(tst))
     com = f"INSERT INTO Location values('{tid}','{lon}','{lat}','{city}','{road}','{_date}','{_time}','{tst}');"
     print(com)
     cur.execute(com)
     
-    con.commit()
+    con.commit()                                        # commits changes to db
     cur.close()
-    con.close()
+    con.close()#                                        # closes connection
     
\ No newline at end of file
diff --git a/location_app/app/routes/__init__.py b/location_app/app/routes/__init__.py
index c5e743c..2764b46 100644
--- a/location_app/app/routes/__init__.py
+++ b/location_app/app/routes/__init__.py
@@ -3,7 +3,8 @@ from .main import main_bl
 from .map import map_bl
 from .login import login_bl
 from .profile import prof_bl
-from .images import images_bl
+from .average import average_bl
+from .picture import picture_bl
 
 def init_app(app):
     app.register_blueprint(index_bl)
@@ -11,4 +12,5 @@ def init_app(app):
     app.register_blueprint(map_bl, url_prefix="/map")
     app.register_blueprint(login_bl, url_prefix="/login")
     app.register_blueprint(prof_bl, url_prefix="/profile")
-    app.register_blueprint(images_bl, url_prefix="/images")
\ No newline at end of file
+    app.register_blueprint(average_bl, url_prefix="/average")
+    app.register_blueprint(picture_bl, url_prefix="/picture")
\ No newline at end of file
diff --git a/location_app/app/routes/average.py b/location_app/app/routes/average.py
new file mode 100644
index 0000000..36c22f2
--- /dev/null
+++ b/location_app/app/routes/average.py
@@ -0,0 +1,10 @@
+from flask import Blueprint, render_template, request, url_for, escape, redirect, session
+from app.functions.data_tools import data_getter
+
+average_bl = Blueprint('average', __name__)
+
+
+@average_bl.route("/", methods = ["GET"])
+def index():
+    return render_template("average/index.html", 
+                           locations = data_getter.get_locations_for(session['username']))
diff --git a/location_app/app/routes/images.py b/location_app/app/routes/images.py
deleted file mode 100644
index 6db5c06..0000000
--- a/location_app/app/routes/images.py
+++ /dev/null
@@ -1,10 +0,0 @@
-from flask import Blueprint, url_for, send_file
-
-images_bl = Blueprint('images', __name__)
-
-# @images_bl.route("/", methods = ["GET", "POST"])
-
-    
-@images_bl.route("/dot", methods = ["GET"])
-def dot():
-    return send_file('static/img/dot.svg')
diff --git a/location_app/app/routes/main.py b/location_app/app/routes/main.py
index d29323c..dfaa3ec 100644
--- a/location_app/app/routes/main.py
+++ b/location_app/app/routes/main.py
@@ -5,7 +5,8 @@ main_bl = Blueprint('main', __name__)
 
 @main_bl.route("/")
 def index():
-    return render_template("main/index.html", locations = data_getter.get_locations_for(session['username']))
+    return render_template("main/index.html", 
+                           locations = data_getter.get_locations_for(session['username']))
 
 @main_bl.route("/logout")
 def logout():
diff --git a/location_app/app/routes/picture.py b/location_app/app/routes/picture.py
new file mode 100644
index 0000000..6e744ea
--- /dev/null
+++ b/location_app/app/routes/picture.py
@@ -0,0 +1,11 @@
+from flask import Blueprint, render_template, request, url_for, escape, redirect, session
+from app.functions.data_tools import data_getter
+
+picture_bl = Blueprint('picture', __name__)
+
+
+@picture_bl.route("/", methods = ["GET"])
+def index():
+    return render_template("picture/index.html", 
+                           user = session['username'])
+
diff --git a/location_app/app/routes/profile.py b/location_app/app/routes/profile.py
index b38044d..d0ba9a0 100644
--- a/location_app/app/routes/profile.py
+++ b/location_app/app/routes/profile.py
@@ -5,4 +5,7 @@ prof_bl = Blueprint('prof', __name__)
 
 @prof_bl.route("/", methods = ["GET", "POST"])
 def index():
-    return render_template("profile/index.html")
+    return render_template("profile/index.html",
+                           user = data_getter.get_user_for(session['username']),
+                           locations = data_getter.get_map_locations_for(session['username']),
+                           dates = data_getter.get_map_location_dates(session['username']))
diff --git a/location_app/app/static/css/average/index.css b/location_app/app/static/css/average/index.css
new file mode 100644
index 0000000..e69de29
diff --git a/location_app/app/static/css/base.css b/location_app/app/static/css/base.css
index 4cfbac5..5cb12b9 100644
--- a/location_app/app/static/css/base.css
+++ b/location_app/app/static/css/base.css
@@ -3,10 +3,11 @@
     padding: 0;
 }
 body {
-    background-image: url('../img/earth.jpg');
-    background-repeat: no-repeat;
+/*     background-image: url('../img/earth.jpg'); */
+    background-color: #3EA4E8;
+/*     background-repeat: no-repeat;
     background-attachment: fixed;
-    background-size: cover;
+    background-size: cover; */
     font-family: Gill Sans, sans-serif;
     font-variant: small-caps;
     display: grid;
diff --git a/location_app/app/static/css/base_page.css b/location_app/app/static/css/base_page.css
index 8f1f1a5..77835d2 100644
--- a/location_app/app/static/css/base_page.css
+++ b/location_app/app/static/css/base_page.css
@@ -2,42 +2,35 @@
     background-color: white;
     grid-area: container;
     display: grid;
-    grid-template-columns: 1fr 4fr 4fr 4fr 4fr 1fr;
+    grid-template-columns: 1fr 16fr 1fr;
     grid-template-rows: 1.5fr auto 1.5fr 5fr 1.5fr auto 1.5fr;
     grid-template-areas:
-        '. . . . . .'
-        '. title title title title .'
-        '. . . . . .'
-        '. b_1 b_2 b_3 b_4 .'
-        '. . . . . .'
-        '. c_main c_main c_main c_main .'
-        '. . . . . .';
+        '. . .'
+        '. title .'
+        '. . .'
+        '. btnss .'
+        '. . .'
+        '. c_main .'
+        '. . .';
 }
 .title {
     grid-area: title;
     display: grid;
 }
+.btnss {
+    grid-area: btnss;
+    grid-template-columns: 1fr 0.2fr 1fr 0.2fr 1fr 0.2fr 1fr;
+    grid-template-rows: 1fr; 
+    display: grid;
+    grid-template-areas:
+        'b_1 . b_2 . b_3 . b_4'
+}
 .title_text {
     margin: 20px;
     justify-self: center;
     align-self: center;
     font-size: 7vw;
 }
-.button_main {
-    text-align: center;
-    display: grid;
-}
-.main_button {
-    justify-self: center;
-    align-self: center;
-    width: 80%;
-    font-size: 2vw;
-    border-radius: 10em;
-    padding: 0.5vh;
-}
-.danger {
-    background-color: #ff5252;
-}
 .button_profile {
     grid-area: b_1;
 }
diff --git a/location_app/app/static/css/buttons.css b/location_app/app/static/css/buttons.css
new file mode 100644
index 0000000..9fe4df1
--- /dev/null
+++ b/location_app/app/static/css/buttons.css
@@ -0,0 +1,119 @@
+* {
+	box-sizing: border-box;
+}
+
+a[class*="btn"] {text-decoration: none;}
+input[class*="btn"], 
+button[class*="btn"] {
+    border: 0;
+    font-family: Gill Sans, sans-serif;
+    font-variant: small-caps;
+}
+
+.btn-3d {
+	position: relative;
+	display: inline-block;
+	font-size: 2vw;
+	padding: 20px 0;
+    width: 100%;
+	color: white;
+	margin: 10px 0;
+	border-radius: 6px;
+	text-align: center;
+	transition: top .01s linear;
+	text-shadow: 0 1px 0 rgba(0,0,0,0.15);
+}
+
+.btn-3d.red:hover    {background-color: #e74c3c;}
+.btn-3d.blue:hover   {background-color: #699DD1;}
+.btn-3d.green:hover  {background-color: #80C49D;}
+.btn-3d.purple:hover {background-color: #D19ECB;}
+.btn-3d.yellow:hover {background-color: #F0D264;}
+.btn-3d.cyan:hover   {background-color: #82D1E3;}
+
+.btn-3d:active {
+    top: 9px;
+}
+.btn-3d.red {
+	background-color: #e74c3c;
+	box-shadow: 0 0 0 1px #c63702 inset,
+                0 0 0 2px rgba(255,255,255,0.15) inset,
+                0 8px 0 0 #C24032,
+                0 8px 0 1px rgba(0,0,0,0.4),
+				0 8px 8px 1px rgba(0,0,0,0.5);
+}
+.btn-3d.red:active {
+	box-shadow: 0 0 0 1px #c63702 inset,
+				0 0 0 2px rgba(255,255,255,0.15) inset,
+				0 0 0 1px rgba(0,0,0,0.4);
+}
+
+.btn-3d.blue {
+	background-color: #6DA2D9;
+	box-shadow: 0 0 0 1px #6698cb inset,
+				0 0 0 2px rgba(255,255,255,0.15) inset,
+				0 8px 0 0 rgba(110, 164, 219, .7),
+				0 8px 0 1px rgba(0,0,0,.4),
+				0 8px 8px 1px rgba(0,0,0,0.5);
+}
+.btn-3d.blue:active {
+	box-shadow: 0 0 0 1px #6191C2 inset,
+				0 0 0 2px rgba(255,255,255,0.15) inset,
+				0 0 0 1px rgba(0,0,0,0.4);
+}
+
+.btn-3d.green {
+	background-color: #82c8a0;
+	box-shadow: 0 0 0 1px #82c8a0 inset,
+				0 0 0 2px rgba(255,255,255,0.15) inset,
+				0 8px 0 0 rgba(126, 194, 155, .7),
+				0 8px 0 1px rgba(0,0,0,.4),
+				0 8px 8px 1px rgba(0,0,0,0.5);
+}
+.btn-3d.green:active {
+	box-shadow: 0 0 0 1px #82c8a0 inset,
+				0 0 0 2px rgba(255,255,255,0.15) inset,
+				0 0 0 1px rgba(0,0,0,0.4);
+}
+
+.btn-3d.purple {
+	background-color: #cb99c5;
+	box-shadow: 0 0 0 1px #cb99c5 inset,
+				0 0 0 2px rgba(255,255,255,0.15) inset,
+				0 8px 0 0 rgba(189, 142, 183, .7),
+				0 8px 0 1px rgba(0,0,0,.4),
+				0 8px 8px 1px rgba(0,0,0,0.5);
+}
+.btn-3d.purple:active {
+	box-shadow: 0 0 0 1px #cb99c5 inset,
+				0 0 0 2px rgba(255,255,255,0.15) inset,
+				0 0 0 1px rgba(0,0,0,0.4);
+}
+
+.btn-3d.cyan {
+	background-color: #7fccde;
+	box-shadow: 0 0 0 1px #7fccde inset,
+				0 0 0 2px rgba(255,255,255,0.15) inset,
+				0 8px 0 0 rgba(102, 164, 178, .6),
+				0 8px 0 1px rgba(0,0,0,.4),
+				0 8px 8px 1px rgba(0,0,0,0.5);
+}
+.btn-3d.cyan:active {
+	box-shadow: 0 0 0 1px #7fccde inset,
+				0 0 0 2px rgba(255,255,255,0.15) inset,
+				0 0 0 1px rgba(0,0,0,0.4);
+}
+
+.btn-3d.yellow {
+	background-color: #F0D264;
+	box-shadow: 0 0 0 1px #F0D264 inset,
+				0 0 0 2px rgba(255,255,255,0.15) inset,
+				0 8px 0 0 rgba(196, 172, 83, .7),
+				0 8px 0 1px rgba(0,0,0,.4),
+				0 8px 8px 1px rgba(0,0,0,0.5);
+}
+.btn-3d.yellow:active {
+	box-shadow: 0 0 0 1px #F0D264 inset,
+				0 0 0 2px rgba(255,255,255,0.15) inset,
+				0 0 0 1px rgba(0,0,0,0.4);
+}
\ No newline at end of file
diff --git a/location_app/app/static/css/login/create.css b/location_app/app/static/css/login/create.css
index e53d19b..54cd98e 100644
--- a/location_app/app/static/css/login/create.css
+++ b/location_app/app/static/css/login/create.css
@@ -50,10 +50,8 @@
 }
 .form_inside {
     display: grid;
-    justify-content: start;
-    align-content: center;
     grid-template-columns: 2fr 2fr;
-    grid-template-rows: 0.25fr 1.5fr 0.15fr 1.5fr 0.15fr 1.5fr 0.15fr 1.5fr 0.15fr 1.5fr 1.5fr 1.5fr;
+    grid-template-rows: 0.25fr 1.5fr 0.15fr 1.5fr 0.15fr 1.5fr 0.15fr 1.5fr 0.15fr 1.5fr 1.5fr auto;
     grid-template-areas:
         '. .'
         'user user'
@@ -66,7 +64,7 @@
         '. .'
         'pass pass'
         'r_pass r_pass'
-        '. c_button';
+        'c_button c_button';
 }
 .username {
     display: grid;
@@ -125,15 +123,9 @@
     grid-area: r_pass;
 }
 .create_button_area {
-    display: grid;
-    justify-content: end;
     align-content: center;
     grid-area: c_button;
 }
-.create_button {
-    font-size: 1.5vw;
-    border-radius: 10em;
-}
 .error_text {
     color: red;
     font-size: 1.5vw;
diff --git a/location_app/app/static/css/login/forgot.css b/location_app/app/static/css/login/forgot.css
index 64c4dbd..9df056d 100644
--- a/location_app/app/static/css/login/forgot.css
+++ b/location_app/app/static/css/login/forgot.css
@@ -49,10 +49,8 @@
 }
 .form_inside {
     display: grid;
-    justify-content: start;
-    align-content: center;
     grid-template-columns: 2fr 2fr;
-    grid-template-rows: 0.5fr 1.5fr 0.5fr 1.5fr 0.5fr 1.5fr 1.5fr 1fr;
+    grid-template-rows: 0.5fr 1.5fr 0.5fr 1.5fr 0.5fr 1.5fr 1.5fr auto;
     grid-template-areas:
         '. .'
         'user user'
@@ -61,7 +59,7 @@
         '. .'
         'pass pass'
         'r_pass r_pass'
-        '. forgot_button';
+        'forgot_button forgot_button';
 }
 .username {
     display: grid;
@@ -100,9 +98,6 @@
     grid-area: r_pass;
 }
 .forgot_button_area {
-    display: grid;
-    justify-content: end;
-    align-content: center;
     grid-area: forgot_button;
 }
 .forgot_button {
diff --git a/location_app/app/static/css/login/index.css b/location_app/app/static/css/login/index.css
index d52d2d6..6b09b89 100644
--- a/location_app/app/static/css/login/index.css
+++ b/location_app/app/static/css/login/index.css
@@ -52,16 +52,25 @@
     justify-content: start;
     align-content: center;
     grid-template-columns: 2fr 2fr;
-    grid-template-rows: 0.5fr 1.5fr 0.5fr 1.5fr 0.5fr 1.5fr 1.5fr;
+/*     grid-template-rows: 0.5fr 1.5fr 0.5fr 1.5fr 0.5fr 1.5fr 1.5fr; */
+    grid-template-rows: 20px auto 20px auto 20px auto auto;
     grid-template-areas:
         '. .'
         'user user'
         '. .'
         'pass pass'
         '. .'
-        'f_pass login_button'
+        'btns btns'
         'c_acc c_acc';
 }
+.btns {
+    display: grid;
+    grid-area: btns;
+    grid-template-columns: 1fr 1fr 0.2fr 1fr;
+    
+    grid-template-areas:
+        'f_pass f_pass . login_button';
+}
 .username {
     display: grid;
     justify-content: center stretch;
@@ -83,33 +92,14 @@
     font-size: 2vw;
 }
 .login_button_area {
-    display: grid;
-    justify-content: end;
-    align-content: center;
     grid-area: login_button;
 }
-.login_button {
-    font-size: 2vw;
-    border-radius: 10em;
-}
 .fpass_area {
-    display: grid;
-    justify-content: start;
-    align-content: center;
     grid-area: f_pass;
 }
-.fpass_text {
-    font-size: 2vw;
-}
 .cacc_area {
-    display: grid;
-    justify-content: center;
-    align-content: center;
     grid-area: c_acc;
 }
-.cacc_text {
-    font-size: 2vw;
-}
 .error_text {
     color: red;
     font-size: 1.5vw;
diff --git a/location_app/app/static/css/picture/index.css b/location_app/app/static/css/picture/index.css
new file mode 100644
index 0000000..e69de29
diff --git a/location_app/app/static/css/profile/index.css b/location_app/app/static/css/profile/index.css
index e69de29..8547669 100644
--- a/location_app/app/static/css/profile/index.css
+++ b/location_app/app/static/css/profile/index.css
@@ -0,0 +1,125 @@
+.content_main {
+    display: grid;
+    grid-template-columns: 0.5fr 0.5fr 0.5fr 0.5fr;
+    grid-template-rows: 1fr 0.5fr 0.5fr 1fr 0.5fr 1fr 0.5fr 1fr 0.5fr 0.5fr 1fr 0.5fr 1fr;
+    grid-template-areas:
+        'p_title p_title p_title p_title'
+        '. . . .'
+        'ID name p_pic p_pic'
+        'ID1 name1 p_pic p_pic'
+        'date type p_pic p_pic'
+        'date1 type1 p_pic p_pic'
+        'colorr weight p_pic p_pic'
+        'colorr1 weight1 p_pic p_pic'
+        '. . . .'
+        'city tcal cal speed'
+        'city1 tcal1 cal1 speed1'
+        'street tdist dist .'
+        'street1 tdist1 dist1 .';
+}
+.p_title {
+    grid-area: p_title;
+    text-align: center;
+    font-size: 5vw;
+}
+.p_pic {
+    grid-area: p_pic;
+    display: grid;
+    justify-items: center;
+}
+.p_pic img {
+    object-fit: cover;
+    width: 70%;
+    max-height: 100%;
+}
+.label {
+    font-size: 2vw;
+}
+.info {
+    font-size: 3vw;
+}
+.ID {
+    grid-area: ID;
+}
+.name {
+    grid-area: name;
+}
+.date {
+    grid-area: date;
+}
+.color {
+    grid-area: colorr;
+}
+.weight {
+    grid-area: weight;
+}
+.city {
+    grid-area: city;
+}
+.street {
+    grid-area: street;
+}
+.cal {
+    grid-area: cal;
+}
+.type {
+    grid-area: type;
+}
+.speed {
+    grid-area: speed;
+}
+.dist {
+    grid-area: dist;
+}
+.tdist {
+    grid-area: tdist;
+}
+.tcal {
+    grid-area: tcal;
+}
+.ID1 {
+    grid-area: ID1;
+}
+.name1 {
+    grid-area: name1;
+}
+.date1 {
+    grid-area: date1;
+}
+.weight1 {
+    grid-area: weight1;
+}
+.color1 {
+    grid-area: colorr1;
+}
+.city1 {
+    grid-area: city1;
+}
+.street1 {
+    grid-area: street1;
+}
+.cal1 {
+    grid-area: cal1;
+}
+.tcal1 {
+    grid-area: tcal1;
+}
+.type1 {
+    grid-area: type1;
+}
+.speed1 {
+    grid-area: speed1;
+}
+.dist1 {
+    grid-area: dist1;
+}
+.tdist1 {
+    grid-area: tdist1;
+}
+.ccolor {
+    margin: 0 15px 0 0;
+    width: 2vw;
+    height: 2vw;
+    display: inline-block;
+    border-radius: 100%;
+}
\ No newline at end of file
diff --git a/location_app/app/static/img/favicon.ico b/location_app/app/static/img/favicon.ico
new file mode 100644
index 0000000..b200897
Binary files /dev/null and b/location_app/app/static/img/favicon.ico differ
diff --git a/location_app/app/static/img/picture/first.png b/location_app/app/static/img/picture/first.png
new file mode 100644
index 0000000..9650218
Binary files /dev/null and b/location_app/app/static/img/picture/first.png differ
diff --git a/location_app/app/static/img/picture/second.png b/location_app/app/static/img/picture/second.png
new file mode 100644
index 0000000..9650218
Binary files /dev/null and b/location_app/app/static/img/picture/second.png differ
diff --git a/location_app/app/static/js/average/index.js b/location_app/app/static/js/average/index.js
new file mode 100644
index 0000000..e69de29
diff --git a/location_app/app/static/js/map/index.js b/location_app/app/static/js/map/index.js
index 8283153..cb489d3 100644
--- a/location_app/app/static/js/map/index.js
+++ b/location_app/app/static/js/map/index.js
@@ -70,7 +70,7 @@ function center_map(points = 0) {
         ol.extent.extend(area, points[1].getSource().getExtent());
         map.getView().fit(area, {
             size: map.getSize(),
-            maxZoom: 21.5
+            maxZoom: 20
         });
     }
 }
@@ -251,12 +251,12 @@ function get_dot_data(layer) {
                     "Time: " + layer.get('time')]);
     } else {
         if(layer.get('special') == "start") {
-            show_alert(["This is Start!", 
+            show_alert(["Your journey started here!", 
                         "Time: " + layer.get('time'), 
                         "Your total distance is: " + layer.get('total_distance'), 
                         "Your total calories are: " + layer.get('total_calories')]);
-        } else if(layer.get('special') == "start") {
-            show_alert(["This is End!",
+        } else if(layer.get('special') == "end") {
+            show_alert(["Your journey ended here!",
                         "Time: " + layer.get('time'), 
                         "Your total distance is: " + layer.get('total_distance'), 
                         "Your total calories are: " + layer.get('total_calories')]);
diff --git a/location_app/app/static/js/map/math.js b/location_app/app/static/js/math.js
similarity index 93%
rename from location_app/app/static/js/map/math.js
rename to location_app/app/static/js/math.js
index 966d9a9..e3b7a81 100644
--- a/location_app/app/static/js/map/math.js
+++ b/location_app/app/static/js/math.js
@@ -84,5 +84,9 @@ function get_calories(loc1, loc2) {
 }
 
 function format_calories(calories) {
-    return (Math.round(calories * 100) / 100) + " calories";
+    if (calories > 1000) {
+        return (Math.round(calories / 10) / 100) + " kcal";
+    } else {
+        return (Math.round(calories * 100) / 100) + " cal";
+    }
 }
\ No newline at end of file
diff --git a/location_app/app/static/js/picture/index.js b/location_app/app/static/js/picture/index.js
new file mode 100644
index 0000000..e69de29
diff --git a/location_app/app/static/js/profile/index.js b/location_app/app/static/js/profile/index.js
new file mode 100644
index 0000000..fcf9a37
--- /dev/null
+++ b/location_app/app/static/js/profile/index.js
@@ -0,0 +1,61 @@
+var locations;
+var weight;
+var dates;
+var distance = 0;
+var calories = 0;
+var tdistance = 0;
+var tcalories = 0;
+var tspeed = 0;
+var color;
+
+function setup(_locations, _weight, _dates, _color) {
+    locations = _locations;
+    weight = _weight;
+    dates = _dates;
+    color = _color;
+    
+    window.onload = function(){
+        cycle_through_dates();
+        console.log(document.getElementById("qw").textContent);
+        document.getElementById("type").innerHTML = '<p class="info">' + "Adventurer" + '</p>';
+        document.getElementById("speed").innerHTML = '<p class="info">' + format_speed(tspeed) + '</p>';
+        document.getElementById("color").style.backgroundColor = color;
+        document.getElementById("tdist").innerHTML = '<p class="info">' + format_distance(tdistance) + '</p>';
+        document.getElementById("tcal").innerHTML = '<p class="info">' + format_calories(tcalories) + '</p>';
+        document.getElementById("cal").innerHTML = '<p class="info">' + format_calories(calories) + '</p>';
+        document.getElementById("dist").innerHTML = '<p class="info">' + format_distance(distance) + '</p>';
+    };
+}
+
+function cycle_through_dates() {
+    for(i = 0; i < dates.length; i++) {
+        var this_date_loc = [];
+        var this_date_dist = 0;
+        var this_date_cal = 0;
+        for(j = 0; j < locations.length; j++) {
+            if(locations[j][2] == dates[i]) {
+                this_date_loc.push(locations[j]);
+            }
+        }
+        for(j = 0; j < this_date_loc.length - 1; j++) {
+            var dis = get_distance(this_date_loc[j], this_date_loc[j + 1]);
+            this_date_dist += dis;
+            this_date_cal += get_calories(this_date_loc[j], this_date_loc[j + 1]);
+            var speed = get_speed(this_date_loc[j], this_date_loc[j + 1]);
+            var time = get_time(this_date_loc[j], this_date_loc[j + 1]);
+            if(speed > tspeed && dis < 100 && time > 2) {
+                tspeed = speed;
+            } else if(speed > tspeed && time > 10) {
+                tspeed = speed;
+            }
+        }
+        distance += this_date_dist;
+        calories += this_date_cal;
+        if(this_date_dist > tdistance) {
+            tdistance = this_date_dist;
+        }
+        if(this_date_cal > tcalories) {
+            tcalories = this_date_cal;
+        }
+    }
+}
diff --git a/location_app/app/static/js/test.js b/location_app/app/static/js/test.js
new file mode 100644
index 0000000..6c6dbb7
--- /dev/null
+++ b/location_app/app/static/js/test.js
@@ -0,0 +1,4 @@
+function test() {
+    var a = document.getElementById("month")
+    console.log(a.options[a.selectedIndex].text);
+}
\ No newline at end of file
diff --git a/location_app/app/templates/average/index.html b/location_app/app/templates/average/index.html
new file mode 100644
index 0000000..35009de
--- /dev/null
+++ b/location_app/app/templates/average/index.html
@@ -0,0 +1,44 @@
+{% extends 'base_page.html' %}
+
+<!-- TITLE -->
+{% block title %} Average {% endblock %} 
+
+<!-- JS -->
+{% block js %}
+
+<script type="text/javascript" src="{{ url_for('static', filename='js/average/index.js') }}"></script> 
+<script type="text/javascript" src="{{ url_for('static', filename='js/math.js') }}"></script> 
+
+{% endblock %}
+
+<!-- CSS -->
+{% block css %}
+
+<link rel="stylesheet" href="{{ url_for('static', filename='css/average/index.css') }}"/>
+
+{% endblock %}
+
+<!-- BUTTON -->
+{% block b1 %} 
+<a class="btn-3d yellow" href="{{url_for('main.index')}}">Home</a>
+{% endblock %}
+
+{% block b2 %} 
+<a class="btn-3d green" href="{{url_for('map.index')}}">Map</a>
+{% endblock %}
+
+{% block b3 %}
+<a class="btn-3d purple" href="{{url_for('prof.index')}}">Profile</a>
+{% endblock %}
+
+
+<!-- Body -->
+{% block body %}
+<div class="content_main">
+    <a href="https://codepen.io/FelipeMarcos/details/tfhEg" class="btn-3d yellow">Buttons</a>
+</div>
+{% endblock %}
+
+
+
+
diff --git a/location_app/app/templates/base.html b/location_app/app/templates/base.html
index 189b647..2e5e397 100644
--- a/location_app/app/templates/base.html
+++ b/location_app/app/templates/base.html
@@ -8,7 +8,9 @@
     <meta name="author" content="">
     {% block basejs %}{% endblock %}
     <title>{% block title %}{% endblock %}</title>
-    <link href="{{ url_for('static', filename='css/base.css') }}" rel="stylesheet" />
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/base.css') }}"/>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/buttons.css') }}"/>
+    <link rel="shortcut icon" href="{{ url_for('static', filename='img/favicon.ico') }}">
     {% block basecss %}{% endblock %}
 </head>
 <body>
diff --git a/location_app/app/templates/base_page.html b/location_app/app/templates/base_page.html
index 226fbee..b378c95 100644
--- a/location_app/app/templates/base_page.html
+++ b/location_app/app/templates/base_page.html
@@ -17,19 +17,21 @@
     <div class="title">
         <p class="title_text shadow">Trackmaster</p>
     </div>
-    <div class="button_main button_profile">
-        {% block b1 %}{% endblock %}
-    </div>
-    <div class="button_main button_map">
-        {% block b2 %}{% endblock %}
-    </div>
-    <div class="button_main button_3">
-        {% block b3 %}{% endblock %}
-    </div>
-    <div class="button_main button_logout">
-        <form action="{{url_for('main.logout')}}" method="GET">
-              <button class="main_button danger">Log out</button>
-        </form>
+    <div class="btnss">
+        <div class="button_profile">
+            {% block b1 %}{% endblock %}
+        </div>
+        <div class="button_map">
+            {% block b2 %}{% endblock %}
+        </div>
+        <div class="button_3">
+            {% block b3 %}{% endblock %}
+        </div>
+        <div class="button_logout">
+            <form action="{{url_for('main.logout')}}" method="GET">
+                  <button  class="btn-3d red">Log out</button>
+            </form>
+        </div>
     </div>
     {% block body %}{% endblock %}
 </div>
diff --git a/location_app/app/templates/login/create.html b/location_app/app/templates/login/create.html
index e343f4b..62cb865 100644
--- a/location_app/app/templates/login/create.html
+++ b/location_app/app/templates/login/create.html
@@ -5,6 +5,7 @@
 
 <!-- JS -->
 {% block basejs %}
+<script type="text/javascript" src="{{ url_for('static', filename='js/test.js') }}"></script> 
 {% endblock %}
 
 <!-- CSS -->
@@ -22,6 +23,9 @@
         <div class="create">
             <p class="create_text">Create Account</p>
         </div>
+        <button onclick="test()">
+            aaaa
+        </button>
         <div class="form">
             <form action="{{url_for('login.create_account')}}" method="POST">
                 <div class="form_inside">
@@ -94,7 +98,7 @@
                         {% endif %}
                     </div>
                     <div class="create_button_area">
-                        <button class="create_button" type="submit">Create Account</button>
+                        <button class="btn-3d blue" type="submit">Create Account</button>
                     </div>
                 </div>
             </form>
diff --git a/location_app/app/templates/login/forgot.html b/location_app/app/templates/login/forgot.html
index faaa587..301eedf 100644
--- a/location_app/app/templates/login/forgot.html
+++ b/location_app/app/templates/login/forgot.html
@@ -80,7 +80,7 @@
                         {% endif %}
                     </div>
                     <div class="forgot_button_area">
-                        <button class="forgot_button" type="submit">Reset Password</button>
+                        <button class="btn-3d blue" type="submit">Reset Password</button>
                     </div>
                 </div>
             </form>
diff --git a/location_app/app/templates/login/index.html b/location_app/app/templates/login/index.html
index 8ceb405..6c9b780 100644
--- a/location_app/app/templates/login/index.html
+++ b/location_app/app/templates/login/index.html
@@ -43,14 +43,16 @@
                         <p class="error_text">Empty password</p>
                         {% endif %}
                     </div>
-                    <div class="login_button_area">
-                        <button class="login_button" type="submit">Login</button>
-                    </div>
-                    <div class="fpass_area">
-                        <a class="fpass_text" href="{{url_for('login.forgot_password')}}">Forgot password?</a>
-                    </div>
+                    <div class="btns">
+                        <div class="login_button_area">
+                            <button class="btn-3d blue">Login</button>
+                        </div>
+                        <div class="fpass_area">
+                            <a class="btn-3d green" href="{{url_for('login.forgot_password')}}">Forgot password?</a>
+                        </div>
+                    </div>  
                     <div class="cacc_area">
-                        <a class="cacc_text" href="{{url_for('login.create_account')}}">Create Account</a>
+                        <a class="btn-3d green" href="{{url_for('login.create_account')}}">Create account</a>
                     </div>
                 </div>
             </form>
diff --git a/location_app/app/templates/main/index.html b/location_app/app/templates/main/index.html
index b99edb2..c5afb5d 100644
--- a/location_app/app/templates/main/index.html
+++ b/location_app/app/templates/main/index.html
@@ -14,21 +14,15 @@
 
 <!-- BUTTON -->
 {% block b1 %} 
-<form action="{{url_for('prof.index')}}" method="GET">
-      <button class="main_button">Profile</button>
-</form>
+<a class="btn-3d yellow" href="{{url_for('prof.index')}}">Profile</a>
 {% endblock %}
 
 {% block b2 %} 
-<form action="{{url_for('map.index')}}" method="GET">
-      <button class="main_button">Map</button>
-</form>
+<a class="btn-3d green" href="{{url_for('map.index')}}">Map</a>
 {% endblock %}
 
 {% block b3 %}
-<form action="test" method="GET">
-      <button class="main_button">Test</button>
-</form>
+<a class="btn-3d purple" href="{{url_for('average.index')}}">Average</a>
 {% endblock %}
 
 <!-- Body -->
diff --git a/location_app/app/templates/map/index.html b/location_app/app/templates/map/index.html
index f1e2333..79b6b9d 100644
--- a/location_app/app/templates/map/index.html
+++ b/location_app/app/templates/map/index.html
@@ -8,7 +8,7 @@
 <script type="text/javascript" src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
 
 <script type="text/javascript" src="{{ url_for('static', filename='js/map/index.js') }}"></script> 
-<script type="text/javascript" src="{{ url_for('static', filename='js/map/math.js') }}"></script> 
+<script type="text/javascript" src="{{ url_for('static', filename='js/math.js') }}"></script> 
 
 {% endblock %}
 
@@ -23,25 +23,18 @@
 
 <!-- Buttons -->
 {% block b1 %} 
-<form action="{{url_for('main.index')}}" method="GET">
-      <button class="main_button">Home</button>
-</form>
+<a class="btn-3d yellow" href="{{url_for('main.index')}}">Home</a>
 {% endblock %}
 
 {% block b2 %} 
-<form action="{{url_for('prof.index')}}" method="GET">
-      <button class="main_button">Profile</button>
-</form>
+<a class="btn-3d green" href="{{url_for('prof.index')}}">Profile</a>
 {% endblock %}
 
 {% block b3 %}
-<form action="test" method="GET">
-      <button class="main_button">Test</button>
-</form>
+<a class="btn-3d purple" href="{{url_for('average.index')}}">Average</a>
 {% endblock %}
 
 
-
 <!-- Body -->
 {% block body %}
 <div class="content_main" id="map">
diff --git a/location_app/app/templates/picture/index.html b/location_app/app/templates/picture/index.html
new file mode 100644
index 0000000..a2e3ac0
--- /dev/null
+++ b/location_app/app/templates/picture/index.html
@@ -0,0 +1,18 @@
+{% extends 'base.html' %}
+
+<!-- TITLE -->
+{% block title %} Select Profile Picture {% endblock %}
+
+<!-- JS -->
+{% block basejs %}
+{% endblock %}
+
+<!-- CSS -->
+{% block basecss %}
+{% endblock %}
+
+<!-- BODY -->
+{% block basebody %}
+<div class="container">
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/location_app/app/templates/profile/index.html b/location_app/app/templates/profile/index.html
index 3c5e203..11a1560 100644
--- a/location_app/app/templates/profile/index.html
+++ b/location_app/app/templates/profile/index.html
@@ -1,44 +1,126 @@
-{% extends 'base_page.html' %}
+{% extends 'base_page.html' %} 
 
-{% block title %} Profile {% endblock %} 
+{% block title %} Profile {% endblock %}
 
 <!-- JS -->
-{% block js %}
+{% block js %} 
 
+<script type="text/javascript" src="{{ url_for('static', filename='js/profile/index.js') }}"></script> 
+<script type="text/javascript" src="{{ url_for('static', filename='js/math.js') }}"></script> 
 
 {% endblock %}
 
 <!-- CSS -->
 {% block css %}
 
-<link rel="stylesheet" href="{{ url_for('static', filename='css/profile/index.css') }}"/>
+<link rel="stylesheet" href="{{ url_for('static', filename='css/profile/index.css') }}" />
 
 {% endblock %}
 
 <!-- Buttons -->
 {% block b1 %} 
-<form action="{{url_for('main.index')}}" method="GET">
-      <button class="main_button">Home</button>
-</form>
+<a class="btn-3d yellow" href="{{url_for('main.index')}}">Home</a>
 {% endblock %}
 
 {% block b2 %} 
-<form action="{{url_for('map.index')}}" method="GET">
-      <button class="main_button">Map</button>
-</form>
+<a class="btn-3d green" href="{{url_for('map.index')}}">Map</a>
 {% endblock %}
 
 {% block b3 %}
-<form action="test" method="GET">
-      <button class="main_button">Test</button>
-</form>
+<a class="btn-3d purple" href="{{url_for('average.index')}}">Average</a>
 {% endblock %}
 
 
 <!-- Body -->
 {% block body %}
 <div class="content_main">
-    
+    <script>
+        setup({{ locations | tojson }}, '{{user[0][3]}}', {{ dates | tojson }}, '#000000');
+    </script>
+    <div class="p_title">
+        <p class="shadow">My profile</p>
+    </div>
+    <div class="p_pic" id="pic">
+        <img src="{{ url_for('static', filename='img/picture/first.png') }}" alt="profile">
+    </div>
+    <div class="ID">
+        <p class="label" id="qw">ID:</p>
+    </div>
+    <div class="name">
+        <p class="label">Name:</p>
+    </div>
+    <div class="date">
+        <p class="label">Birthday:</p>
+    </div>
+    <div class="color">
+        <p class="label">Favourite color:</p>
+    </div>
+    <div class="weight">
+        <p class="label">Weight:</p>
+    </div>
+    <div class="city">
+        <p class="label">Favourite city:</p>
+    </div>
+    <div class="street">
+        <p class="label">Favourite Street:</p>
+    </div>
+    <div class="cal">
+        <p class="label">Total calories burnt:</p>
+    </div>
+    <div class="tcal">
+        <p class="label">Top calories:</p>
+    </div>
+    <div class="speed">
+        <p class="label">Top speed:</p>
+    </div>
+    <div class="type">
+        <p class="label">Your type:</p>
+    </div>
+    <div class="dist">
+        <p class="label">Total distance:</p>
+    </div>
+    <div class="tdist">
+        <p class="label">Top distance:</p>
+    </div>
+    <div class="ID1">
+        <p class="info">{{user[0][0]}}</p>
+    </div>
+    <div class="name1">
+        <p class="info">{{user[0][1]}}</p>
+    </div>
+    <div class="date1">
+        <p class="info">{{user[0][2]}}</p>
+    </div>
+    <div class="weight1">
+        <p class="info">{{user[0][3]}}</p>
+    </div>
+    <div class="color1">
+        <p class="ccolor" id="color"></p>
+    </div>
+    <div class="city1">
+        <p class="info">{{user[1][0][0]}}</p>
+    </div>
+    <div class="street1">
+        <p class="info">{{user[1][1][0]}}</p>
+    </div>
+    <div class="cal1" id="cal">
+        <p class="info">???</p>
+    </div>
+    <div class="tcal1" id="tcal">
+        <p class="info">???</p>
+    </div>
+    <div class="speed1" id="speed">
+        <p class="info">???</p>
+    </div>
+    <div class="type1" id="type">
+        <p class="info">???</p>
+    </div>
+    <div class="dist1" id="dist">
+        <p class="info">???</p>
+    </div>
+    <div class="tdist1" id="tdist">
+        <p class="info">???</p>
+    </div>
 </div>
 {% endblock %}