diff --git a/.DS_Store b/.DS_Store
index 7877a07..23147fa 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/app/__init__.py b/app/__init__.py
index a1cb2a7..981b170 100755
--- a/app/__init__.py
+++ b/app/__init__.py
@@ -16,7 +16,7 @@ app = Flask(__name__)
 app.config['SECRET_KEY'] = 'super secret key'
 #app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:////tmp/mydatabase.db'
 app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
-app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///' + os.path.join(basedir, 'mydatabase.db')
+app.config['SQLALCHEMY_DATABASE_URI'] = 'rqlite+pyrqlite://localhost:4001/'
 db = SQLAlchemy(app)
 
 app.config.from_object(__name__)
diff --git a/app/models.py b/app/models.py
index b103540..64061c9 100755
--- a/app/models.py
+++ b/app/models.py
@@ -23,6 +23,8 @@ class Book(db.Model):
         backref=db.backref('books', lazy=True))
     tags = db.relationship('Tag', secondary=tags, lazy='subquery',
         backref=db.backref('books', lazy=True))
+    scapeX = db.Column(db.Numeric(10,2))
+    scapeY = db.Column(db.Numeric(10,2))
 
     def __init__(self, title, file, cover, fileformat, category):
         self.title = title
@@ -30,6 +32,8 @@ class Book(db.Model):
         self.cover = cover
         self.fileformat = fileformat
         self.category = category
+        self.scapeX = 0
+        self.scapeY = 0
 
 
     def __repr__(self):
diff --git a/app/templates/base.html b/app/templates/base.html
index fc7e9b7..91396d2 100755
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -38,14 +38,48 @@
     <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
     <script src="{{ url_for("static", filename="js/app.js") }}"></script>
     <script>
+
+
+
     $( ".no_cover" ).each(function() {
-      var randomColor = '#'+ ('000000' + Math.floor(Math.random()*16777215).toString(16)).slice(-6);
+      var string = $(this).children("p").html()
+      var randomColor = colorHash(string).rgb
 
       $(this).css({
         'background-color' : randomColor,
       });
+
     }
   )
+
+  function colorHash(inputString){
+	var sum = 0;
+
+	for(var i in inputString){
+		sum += inputString.charCodeAt(i);
+	}
+
+	r = ~~(('0.'+Math.sin(sum+1).toString().substr(6))*256);
+	g = ~~(('0.'+Math.sin(sum+2).toString().substr(6))*256);
+	b = ~~(('0.'+Math.sin(sum+3).toString().substr(6))*256);
+
+	var rgb = "rgb("+r+", "+g+", "+b+")";
+
+	var hex = "#";
+
+	hex += ("00" + r.toString(16)).substr(-2,2).toUpperCase();
+	hex += ("00" + g.toString(18)).substr(-2,2).toUpperCase();
+	hex += ("00" + b.toString(20)).substr(-2,2).toUpperCase();
+
+	return {
+		 r: r
+		,g: g
+		,b: b
+		,rgb: rgb
+		,hex: hex
+	};
+}
+
     </script>
   </body>
 </html>
diff --git a/app/templates/edit_book_detail.html b/app/templates/edit_book_detail.html
index 0125983..f7f9a27 100755
--- a/app/templates/edit_book_detail.html
+++ b/app/templates/edit_book_detail.html
@@ -11,7 +11,9 @@
     {{ form.csrf_token }}
 
     <div class="form-group"><h1 class="header">{{ form.title.label }} {{ form.title(size=20, class="form-control") }}</h1></div>
+    <object class="no_cover" data="../../static/img/default_cover.png" type="image/png" width="150">
         <img src="../../uploads/cover/{{ book.cover }}" width="200">
+      </object>
         <br>  <br>
     <div data-toggle="fieldset" id="phone-fieldset">
          {{ form.author.label }}  <button type="button" data-toggle="fieldset-add-row"
diff --git a/app/templates/scape.html b/app/templates/scape.html
new file mode 100644
index 0000000..75745f9
--- /dev/null
+++ b/app/templates/scape.html
@@ -0,0 +1,145 @@
+<html>
+
+<head>
+  <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"/>
+    <style>
+
+     body  .ui-selecting { border:2px solid yellow; }
+     body .ui-selected {border:2px solid black;}
+
+     body {overflow: scroll;}
+     #scape_container{overflow: scroll;width: 100%; height:100vh;}
+     </style>
+</head>
+<body>
+<div id ="scape_container">
+
+
+    {% for book in books|sort(attribute='title', reverse = False) %}
+    <div class = "drag" id = "{{ book.id }}" style="position: absolute;width:40px;height:auto; top:{{ book.scapeY }}px; left:{{ book.scapeX }}px;">
+
+        <object class="no_cover" data="../static/img/default_cover.png" type="image/png" style="width:100%;height:auto;">
+          <p >{{ book.title }}</p>
+        <img src="../uploads/cover/{{ book.cover }}" width="80">
+      </object>
+      <p style="font-size:7px;"><a href="books/{{ book.id }}">{{ book.title }}</a></p>
+    </div>
+      {% endfor %}
+
+    <div id="random" style="padding:2px; margin: 0;position: absolute;width:120px;height:20px;background-color:yellow;z-index:999999999999999999900000000000000;cursor:pointer;">
+        <p  style="padding:0; margin: 0;position: absolute; ">random position</p>
+
+      </div>
+    </div>
+      <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
+      <script src="{{ url_for("static", filename="js/app.js") }}"></script>
+      <script>
+
+
+
+      $( ".no_cover" ).each(function() {
+        var string = $(this).children("p").html()
+        var randomColor = colorHash(string).rgb
+
+        $(this).css({
+          'background-color' : randomColor,
+        });
+
+      }
+    )
+
+    function colorHash(inputString){
+    var sum = 0;
+
+    for(var i in inputString){
+      sum += inputString.charCodeAt(i);
+    }
+
+    r = ~~(('0.'+Math.sin(sum+1).toString().substr(6))*256);
+    g = ~~(('0.'+Math.sin(sum+2).toString().substr(6))*256);
+    b = ~~(('0.'+Math.sin(sum+3).toString().substr(6))*256);
+
+    var rgb = "rgb("+r+", "+g+", "+b+")";
+
+    var hex = "#";
+
+    hex += ("00" + r.toString(16)).substr(-2,2).toUpperCase();
+    hex += ("00" + g.toString(18)).substr(-2,2).toUpperCase();
+    hex += ("00" + b.toString(20)).substr(-2,2).toUpperCase();
+
+    return {
+       r: r
+      ,g: g
+      ,b: b
+      ,rgb: rgb
+      ,hex: hex
+    };
+  }
+
+      </script>
+      <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
+    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
+ <script>
+ $( function() {
+   $( ".drag" ).draggable({ stack: ".drag",
+   stop: function(){
+             var offset = $(this).offset();
+             var id = $(this).attr('id');
+             var xPos = offset.left;
+             var yPos = offset.top;
+             console.log(xPos);
+             console.log(yPos);
+
+             var postForm = { //Fetch form data
+            'id'     : id,
+            'x'     : xPos, //Store name fields value,
+            'y'     : yPos
+        };
+
+             $.ajax({ //Process the form using $.ajax()
+           type      : 'POST', //Method type
+           url       : '/scape', //Your form processing file URL
+           data      : postForm, //Forms name
+           dataType  : 'json'
+         });
+
+
+         } });
+
+ } );
+
+ $( function() {
+ $( ".drag" ).resizable({aspectRatio: true});
+  } );
+/*  $( function() {
+    $( "body" ).selectable();
+  } );*/
+
+$( "#random" ).click(function() {
+console.log("hallo");
+$( ".drag" ).each(function() {
+  var id = $(this).attr('id');
+  var postForm = { //Fetch form data
+  'id'     : id,
+  'x'     : Math.floor(Math.random() * window.innerWidth) , //Store name fields value,
+  'y'     : Math.floor(Math.random() * window.innerHeight)
+  };
+  $( this ).css("top", postForm['y']);
+  $( this ).css("left", postForm['x']);
+
+  $.ajax({ //Process the form using $.ajax()
+  type      : 'POST', //Method type
+  url       : '/scape', //Your form processing file URL
+  data      : postForm, //Forms name
+  dataType  : 'json'
+  });
+
+
+});
+});
+ </script>
+</body>
+
+</html>
diff --git a/app/templates/show_book_detail.html b/app/templates/show_book_detail.html
index 9ecc64d..fe2f773 100755
--- a/app/templates/show_book_detail.html
+++ b/app/templates/show_book_detail.html
@@ -4,9 +4,10 @@
 <div class="container">
 
   <h1 class="header">{{ book.title }}</h1>
-
+  <object class="no_cover" data="../static/img/default_cover.png" type="image/png" width="150">
+    <p hidden="True">{{ book.title }}</p>
   <img src="../uploads/cover/{{ book.cover }}" width="200">
-
+</object>
   <p>Author(s): <ul>{% for author in book.authors %}
 
               <li><a href="{{url_for('show_author_by_id', id=author.id)}}">{{ author.author_name }}</a>  </li>
diff --git a/app/templates/show_books.html b/app/templates/show_books.html
index 2198e38..7fa4d39 100755
--- a/app/templates/show_books.html
+++ b/app/templates/show_books.html
@@ -15,9 +15,9 @@
     {% endif %}
   {% endwith %}
 
-  <table class="library_table" style="width:100%">
-    <tr>
-        <th>Cover</th>
+  <table class="library_table" id="table" style="width:100%">
+    <tr id="header">
+      <th>Cover</th>
       <th>Title</th>
       <th>Author</th>
       <th>Filetype</th>
@@ -27,6 +27,7 @@
     <tr>
       <td>
         <object class="no_cover" data="../static/img/default_cover.png" type="image/png" width="65">
+          <p hidden="True">{{ book.title }}</p>
         <img src="../uploads/cover/{{ book.cover }}" width="80">
       </object>
       </td>
diff --git a/app/templates/show_books_grid.html b/app/templates/show_books_grid.html
new file mode 100644
index 0000000..aaecc4f
--- /dev/null
+++ b/app/templates/show_books_grid.html
@@ -0,0 +1,31 @@
+{% extends 'base.html' %}
+
+{% block main %}
+<div class="container">
+  <h1 class="page-header">All Books</h1>
+  {% with messages = get_flashed_messages() %}
+    {% if messages %}
+      <div class="alert alert-success">
+        <ul>
+        {% for message in messages %}
+          <li>{{ message }}</li>
+        {% endfor %}
+        </ul>
+      </div>
+    {% endif %}
+  {% endwith %}
+
+
+        {% for book in books|sort(attribute='title', reverse = False) %}
+<a href="books/{{ book.id }}">
+        <object class="no_cover" data="../static/img/default_cover.png" type="image/png" width="105">
+        <img src="../uploads/cover/{{ book.cover }}" width="80">
+      </object>
+      {{ book.title }}</a>
+
+
+  {% endfor %}
+
+
+</div>
+{% endblock %}
diff --git a/app/views.py b/app/views.py
index b8a5e53..0681b37 100755
--- a/app/views.py
+++ b/app/views.py
@@ -7,7 +7,7 @@ This file creates your application.
 
 from app import app, db
 from flask import Flask, render_template, request, redirect, url_for, flash, send_from_directory, jsonify, abort
-
+import json
 from app.forms import UserForm, UserForm_Edit
 from app.models import Book, BookSchema, Author, AuthorSchema
 from app.cover import get_cover
@@ -59,6 +59,25 @@ def show_books():
     books = db.session.query(Book).all() # or you could have used User.query.all()
     return render_template('show_books.html', books=books)
 
+@app.route('/scape', methods=['POST', 'GET'])
+def scape():
+    if request.method == 'POST':
+        data = request.form
+        book = Book.query.get(data['id'])
+        print(book.scapeX)
+        book.scapeX = data['x']
+        book.scapeY = data['y']
+        db.session.commit()
+    books = db.session.query(Book).all() # or you could have used User.query.all()
+    return render_template('scape.html', books=books)
+
+
+
+@app.route('/books_grid')
+def show_books_grid():
+    books = db.session.query(Book).all() # or you could have used User.query.all()
+    return render_template('show_books_grid.html', books=books)
+
 @app.route('/books/<int:id>')
 def show_book_by_id(id):
     book = Book.query.get(id)
@@ -73,7 +92,7 @@ def remove_book_by_id(id):
     book_to_edit = Book.query.filter_by(id=id).first()
     title = book_to_edit.title
     Book.query.filter_by(id=id).delete()
-    author_table = Author.query.filter_by(user_id=book_to_edit.id).delete()
+    #author_table = Author.query.filter_by(books_id=book_to_edit.id).delete()
     db.session.commit()
     flash("%s deleted from library" % (title))
     return redirect(url_for('show_books'))
diff --git a/xpublibrary.csv b/xpublibrary.csv
index 1725e02..84b288e 100644
--- a/xpublibrary.csv
+++ b/xpublibrary.csv
@@ -29,8 +29,6 @@ The Ultimate Guide to the Vi and Ex Text Editors,Hewlett-Packard,Technical,,,0,,
 Getting Gread Sounds: The Microphone Book,Tom Lubin,Technical,,,0,,
 How to Think Like a Computer Scientist,"Allen B. Downey, Jeffrey Elkner, Chris Meyers",Technical,pdf,1,1,LibGen,
 Python Pocket Reference,Mark Lutz,Technical,pdf,,1,LibGen,
-Things That Talk,Lorraine Daston (Editor),Science/History,,,,,
-The Social Construction of What?,Ian Hacking,Science/History,pdf,1,1,LibGen,
 Instruments and the Imagination,Hankins & Silverman,Science/History,,,,,
 "Mind, Machines and Human Consciousness",Robert Nadeau,Science/History,,,,,
 The Psychopath Test,Jon Ronson,Science/History,pdf,1,1,LibGen,
@@ -76,7 +74,6 @@ Loving Big Brother: Surveillance Culture and Performance Space,John McGrath,Medi
 Selections from Cultural Writings,Antonio Gramsci,Media studies,,,0,,
 Dark Money: The Hidden History of the Billionairs behind the Rise of the Radical Right,Jane Mayer,Media studies,EPUB,,1,Libgen,
 Walter Benjamin for beginners,"Howard Caygill, Alex Coles, Richard Appignanesi",Media studies,,,0,,
-What is Situationism? A Reader,Stewart Home (ed.),Media studies,pdf,1,1,MOTW,
 Cyburbia,James Harkin,Media studies,,,0,,
 Mondothèque::a radiated book/un livre irradiant/een irradiërend boek,"Matthew Fuller +, Sînziana Păltineanu +, Michael Murtaugh +, Dennis Pohl +, ShinJoung Yeo +, Femke Snelting +, Natacha Roussel +, Dick Reckard +, Geraldine Juárez +, Tomislav Medak +, Marcell Mars +, Dušan Barok + and Alexia de Visscher +",Media studies,pdf,1,1,Monoskop,
 Save and Forget,Thomas Walskaar,Media studies,pdf,1,1,Academia.edu,
