diff --git a/app.py b/app.py
index cd18645..47a3ec6 100644
--- a/app.py
+++ b/app.py
@@ -190,5 +190,12 @@ def delete(id):
 
 
 # TODO:
+
+# - categoryes are added to the wrong card, fix it
+# - check for double tags
+# - add more topic tags 
+
+# - add title to cards
 # - list the cards
 # - put its category inside
+
diff --git a/library.db b/library.db
index 9c019f7..3062bf4 100644
Binary files a/library.db and b/library.db differ
diff --git a/static/style_default.css b/static/style_default.css
index d982553..e9c7245 100644
--- a/static/style_default.css
+++ b/static/style_default.css
@@ -1,5 +1,5 @@
 body{
-    
+    font-family: sans-serif;
 }
 
 /* .formPanel{
@@ -14,8 +14,53 @@ body{
 .all-cards{
     display: flex;
     flex-flow: row;
+    flex-wrap: wrap; 
+    width: 100vw;
+
 }
 .card{
+    flex-basis: 400px;
+    height: 400px;
     border: 1px solid rgb(147, 93, 255);
     padding: 4px;
+}
+
+.card-header{
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 16px;
+}
+
+.card-header h6{
+    margin: 0;
+    font-size: 1.8ch;
+}
+
+.card .topics {
+    display: inline-block;
+    margin-bottom: 16px;
+    
+}
+.card .topics > * {
+    font-size: 1.8ch;
+    color: white;
+    background-color: rgb(147, 93, 255);
+}
+
+.topic-tag::before{
+    content: "—";
+}
+
+.btn {
+    text-decoration: none;
+    background-color: white;
+    border: none;
+    color: grey;
+}
+
+.btn:hover{
+    cursor: pointer;
+    background: grey;
+    color: white;
+    transition: background 0.4s, color 0.4s;
 }
\ No newline at end of file
diff --git a/templates/base.html b/templates/base.html
index 6cb558e..fe06706 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -7,15 +7,13 @@
         <!-- <script src="{{url_for('static', filename='addnew_panel.js')}}"></script> -->
 	</head>
 	<body>
-		<ul class="navbar-nav">
-			<li class="nav-item active">
-				<a class="nav-link" href="{{ url_for('create') }}">New</a>
-			</li>
+		<nav class="navbar-nav">
+			
 	
 			<li class="nav-item active">
 				<a class="nav-link" href="#">About</a>
 			</li>
-			</ul>
+		</nav>
 
 		{% for message in get_flashed_messages() %}
 			<div class="alert alert-danger">{{ message }}</div>
diff --git a/templates/home.html b/templates/home.html
index 398263c..deb5909 100644
--- a/templates/home.html
+++ b/templates/home.html
@@ -4,6 +4,9 @@
     <h1>{% block title %} Welcome to grgr's library {% endblock %}</h1>
 
         <div class="all-cards">
+            <div class="card" id="new-card">
+				<a class="nav-link" href="{{ url_for('create') }}">+</a>
+            </div>
             {% for category, cards in categories.items() %}
             
 
@@ -12,33 +15,36 @@
                     <div class="card-header">
                         <h6 class = "category">{{ category }}</h6>
 
+                        <button class="btn" id="edit-btn">
+                            <a class="btn btn-warning btn-sm" href="{{ url_for('edit', id=card['id']) }}">edit</a>
+                        </button>
+            
+            
+                        <div class="btn" id="delete-btn">
+                            <form action="{{ url_for('delete', id=card['id']) }}" method="POST">
+                                <input type="submit" value="delete" class="btn btn-danger btn-sm">
+                            </form>
+                        </div>
+                        
                         
-                        {% if card['topics'] %}
-                            {% for topic in card['topics'] %}
-                                <h6 class="topic">
-                                    {{ topic['content'] }}
-                                </h6>
-                            {% endfor %}
-                        {% endif %}
                         
                     </div>
 
-
+                    {% if card['topics'] %}
+                        <div class="topics">
+                            {% for topic in card['topics'] %}
+                                <span class="topic-tag">
+                                    {{ topic['content'] }}
+                                </span>
+                            {% endfor %}
+                        </div>
+                    {% endif %}
                     
-                        <div class="list-group-card">{{ card['content'] }}</div>
+                    <div class="list-group-card">{{ card['content'] }}</div>
                 
                         <div class="row">
                 
-                            <div class="col-12 col-md-3">
-                                <a class="btn btn-warning btn-sm" href="{{ url_for('edit', id=card['id']) }}">Edit</a>
-                            </div>
-                
-                
-                            <div class="col-12 col-md-3">
-                                <form action="{{ url_for('delete', id=card['id']) }}" method="POST">
-                                    <input type="submit" value="Delete" class="btn btn-danger btn-sm">
-                                </form>
-                            </div>
+                            
                         </div>
                 </div>
                 {% endfor %}
