diff --git a/index.js b/index.js
index 86598f2..0122744 100644
--- a/index.js
+++ b/index.js
@@ -40,7 +40,7 @@ app.post('/back_login', (req, res) => {
             db.gv("users","login",ilogin,(udata)=>{
                 if(ipass == udata["pass"]){
                     console.log(udata["uuid"]+" logged in by login & pass from "+cook["sid"]);
-                    res.cookie("uuid",udata["uuid"],{maxAge:1000000});
+                    res.cookie("uuid",udata["uuid"],{maxAge:1000000,path:"/;SameSite=Strict"});
 
                     db.gv("users","uuid",udata["uuid"],(rdata)=>{
                         // console.log(rdata["sids"]);
@@ -157,7 +157,7 @@ app.post("/get_sid" , (req,res) =>{
     let inp = req.body;
     let sid = func.get_uuid(inp["name"]);
     var week = 7 * 24 * 3600 * 1000;
-    res.cookie("sid",sid,{maxAge:(week)});
+    res.cookie("sid",sid,{maxAge:(week),path:"/;SameSite=Strict"});
     res.send({out:"good"});
 
 });
@@ -208,7 +208,12 @@ app.get("/main", (req,res) =>{
 });
 
 app.get('/', (req, res) => {
-    res.redirect('login');
+    if(req.cookies["uuid"] != null){
+        res.redirect('main');
+    }
+    else{
+        res.redirect('login');
+    }
 });
 
 app.all('*', (req, res) => {
diff --git a/public/lib/fn.js b/public/lib/fn.js
index e60c85c..91003eb 100644
--- a/public/lib/fn.js
+++ b/public/lib/fn.js
@@ -39,7 +39,8 @@ function log_by_sid() {
     // const sid = $.cookie("sid");
     console.log("log");
     if($.cookie('sid') == null){
-        get_sid(location.hostname);
+        // get_sid(location.hostname);
+        clear_ck(false);
     }else{
     $.post( "/sid_log")
     .done(function( res ) {
@@ -53,19 +54,19 @@ function log_by_sid() {
     })}
 }
 
-function clear_ck(){
+function clear_ck(redirect = true){
     $.cookie("uuid",null);
     $.cookie("sid",null);
-    goto("login");
+    get_sid(location.hostname);
+    if (redirect) goto("login");
 }
 
 function check_sid(){
     console.log("checking sid");
-    if($.cookie('sid') == null){
+    if($.cookie('sid') == null || $.cookie('uuid') == null){
         clear_ck();
     }
     else{        
-        console.log("ping");
         $.post( "/sid_log")
         .done(function( res ) {
             if(res["out"] == "bad"){
@@ -75,6 +76,13 @@ function check_sid(){
     }
 }
 
+function logout() {
+    let dialog = confirm("logout?");
+    if(dialog){
+        clear_ck();
+    }
+}
+
 
 function get_sid(hostname){
     $.post( "/get_sid", { name:hostname })
diff --git a/public/lib/inter.js b/public/lib/inter.js
new file mode 100644
index 0000000..f40881b
--- /dev/null
+++ b/public/lib/inter.js
@@ -0,0 +1,98 @@
+window.dragMoveListener = dragMoveListener
+let root = document.getElementById("drags");
+var objs = {};
+if ($.cookie("objs") != null){
+    load_local();
+}
+
+
+function add(obj){
+    if (objs[obj] == null) objs[obj] = {};
+    if ((objs[obj]["count"] == null)){(objs[obj]["count"] = 0)}
+    let count = Object.keys(objs[obj]).length -1;
+    // console.log(obj,objs[obj+"_count"],objs[obj+"_s"]);
+    root.innerHTML += "<div class='"+obj+" drag' id="+obj+"_"+count+">"+obj+"</div>";
+    objs[obj][obj+"_"+count] = {};
+    objs[obj]["count"]+=1;
+    console.log(objs);
+}
+
+function create(clas,obj,x,y,inside){
+    if (inside == null || inside == "") inside = "[]";
+    root.innerHTML += "<div class='"+clas+" drag' id="+obj+">"+inside+"</div>";
+    let obj_doc = document.getElementById(obj);
+    set_pos(obj_doc,x,y);
+}
+
+function load_local(){
+    objs = JSON.parse($.cookie("objs"));
+    // console.log(objs);
+    Object.entries(objs).forEach(([keys, values]) => {
+        // console.log(keys,values);
+        Object.entries(values).forEach(([key, value]) => {
+            if(key != "count"){
+                // console.log(key,value);
+                create(keys,key,value["x"],value["y"],value["body"]);
+            }
+        })
+    });
+}
+
+function save(){
+    $.cookie("objs",JSON.stringify(objs),{path:"/;SameSite=Strict"});
+}
+
+function set_pos(obj,x,y){
+    obj.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
+    obj.setAttribute('data-x', x)
+    obj.setAttribute('data-y', y)
+}
+
+function dragMoveListener (event) {
+    var drag = event.target
+    var x = (parseFloat(drag.getAttribute('data-x')) || 0) + event.dx
+    var y = (parseFloat(drag.getAttribute('data-y')) || 0) + event.dy
+    set_pos(drag,x,y);
+}
+        
+interact('.drag').draggable({
+    inertia: true,
+    // modifiers: [
+    // interact.modifiers.restrictRect({restriction: 'parent',endOnly: true}),
+    // interact.modifiers.snap({targets: [interact.snappers.grid({ x: 5, y: 5 })],range: Infinity,relativePoints: [ { x: 0, y: 0 } ]}),],
+    // autoScroll: true,
+    listeners: {move: dragMoveListener, end (event) {}}
+})
+
+interact('.trash').dropzone({
+    accept: '.drag',
+    overlap: 0.2,
+
+    ondragenter: function (event) {var drag = event.relatedTarget;var zone = event.target; zone.classList.add('drop-target');drag.classList.add('can-drop');},
+    ondragleave: function (event) {var drag = event.relatedTarget;var zone = event.target;zone.classList.remove('drop-target');drag.classList.remove('in_zone');drag.classList.remove('can-drop');},
+    ondrop: function (event) {
+        var drag = event.relatedTarget
+        delete objs[drag.classList[0]][drag.id];
+        drag.remove();
+        console.log(objs);
+        drag.classList.add('in_zone')
+        drag.classList.remove('can-drop')
+    },
+    ondropdeactivate: function (event) {var zone = event.target;zone.classList.remove('drop-active');zone.classList.remove('drop-target');}
+})
+
+interact('.dropzone').dropzone({
+    accept: '.drag',
+    overlap: 0.5,
+
+    ondragenter: function (event) {var drag = event.relatedTarget;var zone = event.target;zone.classList.add('drop-target');drag.classList.add('can-drop');},
+    ondragleave: function (event) {var drag = event.relatedTarget;var zone = event.target;zone.classList.remove('drop-target');drag.classList.remove('in_zone');drag.classList.remove('can-drop');},
+    ondrop: function (event) {
+        var drag = event.relatedTarget
+        objs[drag.classList[0]][drag.id] = {y:drag.getAttribute('data-y'),x:drag.getAttribute('data-x'),body:drag.innerHTML};
+        // $.cookie("objs",JSON.stringify(objs));
+        drag.classList.add('in_zone')
+        drag.classList.remove('can-drop')
+    },
+    ondropdeactivate: function (event) {var zone = event.target;zone.classList.remove('drop-active');zone.classList.remove('drop-target');}
+})
\ No newline at end of file
diff --git a/views/header.ejs b/views/header.ejs
new file mode 100644
index 0000000..c285cf3
--- /dev/null
+++ b/views/header.ejs
@@ -0,0 +1,11 @@
+<style>
+    header{
+        display: flex;
+        /* width: 90%; */
+        justify-content: space-evenly;
+    }
+</style>
+<header>
+    <div>puzzle</div>
+    <div><button onclick="logout();">logout</button></div>
+</header>
\ No newline at end of file
diff --git a/views/main.ejs b/views/main.ejs
index 3b38170..54f7953 100644
--- a/views/main.ejs
+++ b/views/main.ejs
@@ -1,159 +1,65 @@
+<style>
+    .drag{
+        height: 50px;
+        width: 50px;
+        position: absolute;
+        text-align: center;
+    }
+
+    .dropzone {
+        background-color: #bfe4ff;
+        border: dashed 4px transparent;
+        border-radius: 4px;
+        height: 140px;
+        margin: 10px auto 30px;
+        padding: 10px;
+        width: 80%;
+        transition: background-color 0.3s;
+    }
+
+    .trash {
+        background-color: #bfe4ff;
+        border: dashed 4px transparent;
+        border-radius: 4px;
+        margin: 10px auto 30px;
+        padding: 10px;
+        height: 50px;
+        width: 50px;
+        transition: background-color 0.3s;
+        z-index: -1;
+    }
+
+    .drop-active {
+        border-color: #aaa;
+    }
+
+    .drop-target {
+        background-color: #29e;
+        border-color: #fff;
+        border-style: solid;
+    }
+</style>
+
 <%- include('./static/start.ejs',{name:'main',async: true}) %>
-    <h1>none</h1>
-    <h1>hello</h1>
-
-    <style>
-        .drag{
-            height: 50px;
-            width: 50px;
-            position: absolute;
-            text-align: center;
-        }
-
-        .dropzone {
-            background-color: #bfe4ff;
-            border: dashed 4px transparent;
-            border-radius: 4px;
-            height: 140px;
-            margin: 10px auto 30px;
-            padding: 10px;
-            width: 80%;
-            transition: background-color 0.3s;
-        }
-
-        .trash {
-            background-color: #bfe4ff;
-            border: dashed 4px transparent;
-            border-radius: 4px;
-            margin: 10px auto 30px;
-            padding: 10px;
-            height: 50px;
-            width: 50px;
-            transition: background-color 0.3s;
-            z-index: -1;
-        }
-
-        .drop-active {
-            border-color: #aaa;
-        }
-
-        .drop-target {
-            background-color: #29e;
-            border-color: #fff;
-            border-style: solid;
-        }
-    </style>
-
-    <div id="drags"></div>
-
-      <div class="dropzone"></div>
-      <div class="trash"></div>
-
-       <button onclick="add('cube')">add</button>
-       <button onclick="save()">save</button>
-
-    <script>
-        window.dragMoveListener = dragMoveListener
-        let root = document.getElementById("drags");
-        var objs = {};
-        if ($.cookie("objs") != null){
-            load_local();
-        }
-        
-
-        function add(obj){
-            if (objs[obj] == null) objs[obj] = {};
-            if ((objs[obj]["count"] == null)){(objs[obj]["count"] = 0)}
-            let count = Object.keys(objs[obj]).length -1;
-            // console.log(obj,objs[obj+"_count"],objs[obj+"_s"]);
-            root.innerHTML += "<div class='"+obj+" drag' id="+obj+"_"+count+">"+obj+"</div>";
-            objs[obj][obj+"_"+count] = {};
-            objs[obj]["count"]+=1;
-            console.log(objs);
-        }
-
-        function create(clas,obj,x,y,inside){
-            if (inside == null || inside == "") inside = "[]";
-            root.innerHTML += "<div class='"+clas+" drag' id="+obj+">"+inside+"</div>";
-            let obj_doc = document.getElementById(obj);
-            set_pos(obj_doc,x,y);
-        }
-
-        function load_local(){
-            objs = JSON.parse($.cookie("objs"));
-            // console.log(objs);
-            Object.entries(objs).forEach(([keys, values]) => {
-                // console.log(keys,values);
-                Object.entries(values).forEach(([key, value]) => {
-                    if(key != "count"){
-                        // console.log(key,value);
-                        create(keys,key,value["x"],value["y"],value["body"]);
-                    }
-                })
-            });
-        }
-
-        function save(){
-            $.cookie("objs",JSON.stringify(objs));
-        }
-
-        function set_pos(obj,x,y){
-            obj.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
-            obj.setAttribute('data-x', x)
-            obj.setAttribute('data-y', y)
-        }
-        
-        function dragMoveListener (event) {
-            var drag = event.target
-            var x = (parseFloat(drag.getAttribute('data-x')) || 0) + event.dx
-            var y = (parseFloat(drag.getAttribute('data-y')) || 0) + event.dy
-            set_pos(drag,x,y);
-        }
-                
-        interact('.drag').draggable({
-            inertia: true,
-            // modifiers: [
-            // interact.modifiers.restrictRect({restriction: 'parent',endOnly: true}),
-            // interact.modifiers.snap({targets: [interact.snappers.grid({ x: 5, y: 5 })],range: Infinity,relativePoints: [ { x: 0, y: 0 } ]}),],
-            // autoScroll: true,
-            listeners: {move: dragMoveListener, end (event) {}}
-        })
-
-        interact('.trash').dropzone({
-            accept: '.drag',
-            overlap: 0.2,
-
-            ondragenter: function (event) {var drag = event.relatedTarget;var zone = event.target; zone.classList.add('drop-target');drag.classList.add('can-drop');},
-            ondragleave: function (event) {var drag = event.relatedTarget;var zone = event.target;zone.classList.remove('drop-target');drag.classList.remove('in_zone');drag.classList.remove('can-drop');},
-            ondrop: function (event) {
-                var drag = event.relatedTarget
-                delete objs[drag.classList[0]][drag.id];
-                drag.remove();
-                console.log(objs);
-                drag.classList.add('in_zone')
-                drag.classList.remove('can-drop')
-            },
-            ondropdeactivate: function (event) {var zone = event.target;zone.classList.remove('drop-active');zone.classList.remove('drop-target');}
-        })
-
-        interact('.dropzone').dropzone({
-            accept: '.drag',
-            overlap: 0.5,
-
-            ondragenter: function (event) {var drag = event.relatedTarget;var zone = event.target;zone.classList.add('drop-target');drag.classList.add('can-drop');},
-            ondragleave: function (event) {var drag = event.relatedTarget;var zone = event.target;zone.classList.remove('drop-target');drag.classList.remove('in_zone');drag.classList.remove('can-drop');},
-            ondrop: function (event) {
-                var drag = event.relatedTarget
-                objs[drag.classList[0]][drag.id] = {y:drag.getAttribute('data-y'),x:drag.getAttribute('data-x'),body:drag.innerHTML};
-                // $.cookie("objs",JSON.stringify(objs));
-                drag.classList.add('in_zone')
-                drag.classList.remove('can-drop')
-            },
-            ondropdeactivate: function (event) {var zone = event.target;zone.classList.remove('drop-active');zone.classList.remove('drop-target');}
-        })
+<%- include('./header.ejs') %>
+<script src="/lib/interact.min.js"></script>
 
 
-    </script>
+<h1>none</h1>
+<h1>hello</h1>
+
+
+
+<div id="drags"></div>
+
+<div class="dropzone"></div>
+<div class="trash"></div>
+
+<button onclick="add('cube')">add</button>
+<button onclick="save()">save</button>
+
+
+<script src="/lib/inter.js"></script>
 <%- include('./static/end.ejs') %>
 
 
diff --git a/views/static/start.ejs b/views/static/start.ejs
index 901fc90..8e7da05 100644
--- a/views/static/start.ejs
+++ b/views/static/start.ejs
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <script src="/lib/interact.min.js"></script>
+    <!-- <script src="/lib/interact.min.js"></script> -->
     <script src="/lib/jquery.js"></script>
     <script src="/lib/jquery.cookie.js"></script>
     <script src="/lib/fn.js"></script>
@@ -13,5 +13,5 @@
     <!-- <script> document.querySelector("title").innerHTML += $.cookie("uuid"); </script> -->
 </head>
 <body>
-    
+
 <script>if("<%= name %>" != "login") check_sid();</script>