diff --git a/shop.py b/shop.py
index d4ac297..c9266ae 100644
--- a/shop.py
+++ b/shop.py
@@ -3,9 +3,6 @@ from pprint import pprint
 import db
 import os.path
 
-
-MOBILES = ["android", "iphone", "blackberry"]
-
 application = Flask(__name__)
 application.config["DEBUG"] = True
 application.secret_key = b'*$#@U9423jr92jioJKL_)_;dasfj()12'
@@ -39,9 +36,6 @@ def index():
         res = db.get_items(session["id"], session["active_id"])
     data = {"title": "Shopping List", "results": res, "session": session, "list_ids": session["list_ids"]}
 
-    for device in MOBILES:
-        if device in request.user_agent.platform:
-            return render_template('mobile.html', data=data)
     return render_template('index.html', data=data)
 
 @application.route('/post', methods=['POST'])
diff --git a/static/css/main.css b/static/css/main.css
index 2ee1ca8..d899016 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -50,4 +50,65 @@ body {
     top: 2px;
     right: 2px;
     padding-left: 10px;
-}
\ No newline at end of file
+}
+
+@media screen and (min-width: 600px) {
+    .main {
+        width: 90%;
+        flex-direction: row;
+        display: flex;
+    }
+    }
+    .list {
+        
+  }
+  .navbutt {
+    width: 100%;
+    /* justify-content: center; */
+    display: flex;
+    
+    
+  }
+
+@media screen and (min-width: 800px) {
+    .main {
+      width: 100%;
+      justify-content: center;
+      display: flex;
+      
+      
+    }
+    .form {
+        width: 100%;
+        /* justify-content: center; */
+        display: flex;
+        
+        
+      }
+      .navbutt {
+        width: 100%;
+        /* justify-content: center; */
+        display: flex;
+        align-items: center;
+        
+        
+      }
+
+      .contain {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+      }
+    .list {
+        /* width: 90%; */
+        flex-direction: row;
+        justify-content: center;
+        display: flex;
+    }
+
+    .innerContain {
+        display: flex;
+        flex-direction: column;
+        width: 90%;
+    }
+  }
\ No newline at end of file
diff --git a/templates/addForm.html b/templates/addForm.html
index 8cbf7db..22ca8a3 100644
--- a/templates/addForm.html
+++ b/templates/addForm.html
@@ -1,4 +1,4 @@
-<div>
+<div style="width: 100%">
     <form action="/post" method="post">
         <p style="display: inline">Item: </p>
         <input class="form-control" id="addbox" style="display: inline" type="text" name="item" value=""><br><br>
@@ -8,7 +8,6 @@
             {% endfor %}
         </select>
         <div style="text-align: center; padding-bottom: 2px"><input class="btn btn-secondary" type="submit"
-                style="text-align: center" name="addValue" value="Submit">
-    </form>
+                style="text-align: center" name="addValue" value="Submit"></div>
     </form>
 </div>
\ No newline at end of file
diff --git a/templates/footer.html b/templates/footer.html
new file mode 100644
index 0000000..03563ac
--- /dev/null
+++ b/templates/footer.html
@@ -0,0 +1,11 @@
+    <!-- jQuery library -->
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+
+    <!-- Popper JS -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
+
+    <!-- Latest compiled JavaScript -->
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/templates/header.html b/templates/header.html
index c2f60d0..13d9cbe 100644
--- a/templates/header.html
+++ b/templates/header.html
@@ -6,5 +6,5 @@
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
         <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-        <link rel="stylesheet" content="text/css" href="/static/css/main.css"/>
+        <link rel="stylesheet" content="text/css" href="/static/css/main.css?ver=2"/>
     </head>
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index 259539d..279dc27 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,8 +1,8 @@
 {% include "header.html" %}
-
-<body>
-    <h1 class="container" style="text-align: center">{{ data["title"] }}, {{data["session"]["username"].title()}}
-        <div class="dropdown">
+<div class="contain">
+<div class="innerContain">
+    <div class="navbutt">
+        <div class="dropdown" style="position: relative; padding-top: 2px;">
             <form action="/post" method="post" id="test">
                 <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2"
                     data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
@@ -22,42 +22,28 @@
                 </div>
             </form>
         </div>
-    </h1>
-    <!-- <aside> -->
-    <div id="addForm">
-        {% include "addForm.html" %}
-    </div>
-    </div>
-    <!-- </aside> -->
-    <div class="container">
-        {% include "list.html" %}
-    </div>
-    <div id="logout">
+        <div style="padding-left: 2px; padding-right: 2px;">
         <form action="/post" method="POST">
-            <button type="submit" name="logout" class="btn btn-secondary"><i style="padding-top: 3px;"
-                    class="material-icons">
+            <button type="submit" name="logout" class="btn btn-secondary"><i class="material-icons">
                     exit_to_app
                 </i></button>
         </form>
-        <div style="padding-top: 3px;">
-            <a href="admin">
-                <button onclick="window.location='admin'" class="btn btn-secondary"><i style="padding-top: 3px;"
-                        class="material-icons">
-                        vpn_key
-                    </i></button></a>
-        </div>
-        <div>
-
-        </div>
     </div>
-    <!-- jQuery library -->
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+        <a href="admin">
+            <button onclick="window.location='admin'" class="btn btn-secondary"><i class="material-icons">
+                    vpn_key
+                </i></button></a>
+                <h1 style="padding-left: 5px;">Welcome {{session["username"].title()}}</h1>
+    </div>
+    <div class="form">
 
-    <!-- Popper JS -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
-
-    <!-- Latest compiled JavaScript -->
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
-</body>
-
-</html>
\ No newline at end of file
+        {% include "addForm.html" %}
+        
+    </div>
+    <div class="list">
+        {% include "list.html" %}
+    </div>
+</div>
+</div>
+</div>
+{% include "footer.html" %}
\ No newline at end of file
diff --git a/templates/old_index.html b/templates/old_index.html
new file mode 100644
index 0000000..8cd84d6
--- /dev/null
+++ b/templates/old_index.html
@@ -0,0 +1,52 @@
+{% include "header.html" %}
+
+<body>
+    <h1 class="container" style="text-align: center">{{ data["title"] }}, {{data["session"]["username"].title()}}
+        <div class="dropdown">
+            <form action="/post" method="post" id="test">
+                <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2"
+                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    {% set id  = session["list_ids"] %}
+                    {% set actid = session["active_id"] %}
+                    {% if actid == "0" %}
+                    ALL
+                    {% else %}
+                    {{ id[actid] }}
+                    {% endif %}
+                </button>
+                <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
+                    <button class="dropdown-item" type="submit" value="0" id="" name="list">All</button>
+                    {% for listid in data["list_ids"] %}
+                    <button class="dropdown-item" type="submit" value="{{listid}}" name="list">{{id[listid]}}</button>
+                    {% endfor %}
+                </div>
+            </form>
+        </div>
+    </h1>
+    <!-- <aside> -->
+    <div id="addForm">
+        {% include "addForm.html" %}
+    </div>
+    </div>
+    <!-- </aside> -->
+    <div class="container">
+        {% include "list.html" %}
+    </div>
+    <div id="logout">
+        <form action="/post" method="POST">
+            <button type="submit" name="logout" class="btn btn-secondary"><i style="padding-top: 3px;"
+                    class="material-icons">
+                    exit_to_app
+                </i></button>
+        </form>
+        <div style="padding-top: 3px;">
+            <a href="admin">
+                <button onclick="window.location='admin'" class="btn btn-secondary"><i style="padding-top: 3px;"
+                        class="material-icons">
+                        vpn_key
+                    </i></button></a>
+        </div>
+        <div>
+
+        </div>
+    </div>