diff --git a/app/static/.DS_Store b/app/static/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..73d39850681c57533058a143aa8455be23a0953f
Binary files /dev/null and b/app/static/.DS_Store differ
diff --git a/app/static/app/css/katalog_materi.css b/app/static/app/css/katalog_materi.css
new file mode 100644
index 0000000000000000000000000000000000000000..b353788b66f6659cbb9530e56d76bbd7d71608d0
--- /dev/null
+++ b/app/static/app/css/katalog_materi.css
@@ -0,0 +1,193 @@
+/* .main-header {
+ background: #FFFFFF;
+ width: 100%;
+ position: fixed;
+ z-index: 1;
+ padding: 8px 16px;
+ box-shadow: 2px 2px 2px 2px rgb(0,0,0,0.5)
+}
+
+.main-header > div {
+ display: inline-block;
+ vertical-align: middle;
+}
+
+.main-header__brand {
+ color: #364F6B;
+ text-decoration: none;
+ font-size: 20px;
+}
+
+.main-nav {
+ display: inline-block;
+ text-align: right;
+ width: calc(100% - 229px);
+ vertical-align: middle;
+}
+
+.main-nav__items {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+
+.main-nav__item {
+ display: inline-block;
+ margin: 0 16px;
+}
+
+.main-nav__item a {
+ color: #364F6B;
+ text-decoration: none;
+ padding: 3px 0;
+}
+
+.main-nav__item-img {
+ width: 35px;
+ height: 35px;
+ vertical-align: middle;
+}
+
+@media screen and (max-width: 600px) {
+ .main-header {
+ position: relative;
+ text-align: center;
+ }
+
+ .main-header__brand {
+ font-size: 1.7rem;
+ }
+
+ .main-nav {
+ display: block;
+ text-align: center;
+ width: 100%;
+ }
+
+ .main-nav__item {
+ margin: 0;
+ display: block;
+ }
+
+ .main-nav__item a {
+ font-size: 1.4rem;
+ }
+
+ .main-nav__item-img {
+ width: 50px;
+ height: 50px;
+ vertical-align: middle;
+ }
+} */
+
+
+.header {
+ display: flex;
+ flex-direction: column;
+}
+.pageTitle {
+ color: #5B84B1;
+ margin: 5px;
+}
+.description{
+ color: #5B84B1;
+ margin: 5px;
+}
+.searchBar{
+ margin: 5px;
+ padding: 0;
+ display: flex;
+}
+.searchBar .form-group {
+ margin: 0px 10px 0px 0px;
+ padding: 0;
+}
+
+.searchBar .btn-cari {
+ width: 75px;
+ padding: 0;
+ border-radius: 2px;
+ background-color: #ffffff;
+ color: #5B84B1;
+ border: none;
+ box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+}
+
+.searchBar .btn:hover{
+ color: #ffffff;
+ background-color: #5B84B1;
+}
+
+.content {
+ display: flex;
+ margin: 5px;
+}
+
+.content .sidebar {
+ padding: 5px 5px 5px 0;
+}
+.content .sidebar .accordion {
+ border-radius: 2px;
+}
+
+.content .sidebar .accordion .card {
+ border-radius: 0;
+ background-color: #ffffff;
+}
+
+.content .sidebar .accordion .card .card-header {
+ padding: 0;
+ background-color: #5B84B1;
+}
+
+.content .sidebar .accordion .card .card-header .btn {
+ width: 100%;
+ text-align: left;
+ color: #ffffff;
+ border: none;
+}
+.content .sidebar .accordion .card .card-header .btn:focus{
+ box-shadow: none;
+}
+
+.content .books {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+}
+
+.content .books .book {
+ display: flex;
+ margin: 10px;
+ width: 15rem;
+ padding: 5px;
+ border: 1px solid #d4d4d4;
+ border-radius: 2px;
+ box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+}
+
+
+
+.content .books .book .card-body {
+ padding: 5px;
+}
+ .card-title {
+ margin-bottom: 5px;
+ }
+ .card-text {
+ margin-bottom: 5px;
+ }
+
+ .btn-book {
+ width: 75px;
+ margin-right: 5px;
+ border-radius: 2px;
+ background-color: #ffffff;
+ color: #5B84B1;
+ border: none;
+ box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+ }
+ .card-body .btn:hover{
+ color: #ffffff;
+ background-color: #5B84B1;
+ }
\ No newline at end of file
diff --git a/app/static/app/js/katalog_materi.js b/app/static/app/js/katalog_materi.js
new file mode 100644
index 0000000000000000000000000000000000000000..d5e39d4e3bb6548e7b52462710e3d13132539341
--- /dev/null
+++ b/app/static/app/js/katalog_materi.js
@@ -0,0 +1,62 @@
+books: [
+ {
+ cover : 'https://scontent.fbdo6-2.fna.fbcdn.net/v/t1.0-9/60274038_2279638138757984_7988420823012605952_n.jpg?_nc_cat=108&_nc_sid=110474&_nc_oc=AQlRDnDhg1kJjuoXEwYCYWosatAaFqwSiZdMmfbX_ORoTXu7cvJoawUihJPCjHXCqr0&_nc_ht=scontent.fbdo6-2.fna&oh=169b2c36df1a49f6a394208f21d09f7b&oe=5E94FF4E',
+ title : 'Wahyu',
+ author : 'Saul Andre Lumban Gaol',
+ },
+ {
+ cover : 'https://scontent.fbdo6-2.fna.fbcdn.net/v/t1.0-9/60274038_2279638138757984_7988420823012605952_n.jpg?_nc_cat=108&_nc_sid=110474&_nc_oc=AQlRDnDhg1kJjuoXEwYCYWosatAaFqwSiZdMmfbX_ORoTXu7cvJoawUihJPCjHXCqr0&_nc_ht=scontent.fbdo6-2.fna&oh=169b2c36df1a49f6a394208f21d09f7b&oe=5E94FF4E',
+ title : 'Billie Eilish Fans Starter Pack',
+ author : 'Saul Andre Lumban Gaol',
+ },
+ {
+ cover : 'https://static.billboard.com/files/styles/900_wide/public/media/Billie-Eilish-bb12-2019-feat-billboard-strgoia-1240.jpg',
+ title : 'Billie Eilish Fans Starter Pack',
+ author : 'Saul Andre Lumban Gaol',
+ },
+ {
+ cover : 'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQ8Tc7B5K5dRrho7kzd4LyR7g9s2VKfM2CaTQ3U-PGk-ZhKDu7v',
+ title : 'Billie Eilish Fans Starter Pack',
+ author : 'Saul Andre Lumban Gaol',
+ },
+ {
+ cover : 'https://cache.umusic.com/_sites/billieeilish/v2/images/pic-red.jpg',
+ title : 'Billie Eilish Fans Starter Pack',
+ author : 'Saul Andre Lumban Gaol',
+ },
+ {
+ cover : 'https://cache.umusic.com/_sites/billieeilish/v2/images/pic-red.jpg',
+ title : 'Billie Eilish Fans Starter Pack',
+ author : 'Saul Andre Lumban Gaol',
+ },
+ {
+ cover : 'https://media.vanityfair.com/photos/5e2f059bff31f500098c2f0b/2:3/w_887,h_1331,c_limit/Billie-Eilish-Grammys-Curse.jpg',
+ title : 'Billie Eilish Fans Starter Pack',
+ author : 'Saul Andre Lumban Gaol',
+ },
+ {
+ cover : 'https://nyppagesix.files.wordpress.com/2019/08/billie-eilish-2.jpg?quality=80&strip=all&strip=all',
+ title : 'Billie Eilish Fans Starter Pack',
+ author : 'Saul Andre Lumban Gaol',
+ },
+ {
+ cover : 'https://www.herworld.co.id/gallery/teaser/Koleksi-XXL-Bershka-x-Billie-Eilish_41_20190917155600.jpg',
+ title : 'Billie Eilish Fans Starter Pack',
+ author : 'Saul Andre Lumban Gaol',
+ },
+ {
+ cover : 'https://www.herworld.co.id/gallery/teaser/Koleksi-XXL-Bershka-x-Billie-Eilish_41_20190917155600.jpg',
+ title : 'Billie Eilish Fans Starter Pack',
+ author : 'Saul Andre Lumban Gaol',
+ },
+ {
+ cover : 'https://cache.umusic.com/_sites/billieeilish/v2/images/pic-red.jpg',
+ title : 'Billie Eilish Fans Starter Pack',
+ author : 'Saul Andre Lumban Gaol',
+ },
+ {
+ cover : 'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTChEUT2HuZF0a0-Qz_nwQI65zQv8efU4J-bUkjalVLb0Y2TFxh',
+ title : 'Billie Eilish Fans Starter Pack',
+ author : 'Saul Andre Lumban Gaol',
+ },
+ ]
\ No newline at end of file
diff --git a/app/static/app/temp.js b/app/static/app/js/temp.js
similarity index 100%
rename from app/static/app/temp.js
rename to app/static/app/js/temp.js
diff --git a/app/templates/app/katalog_materi.html b/app/templates/app/katalog_materi.html
index 1111ddb6792ba5369a7176d496fef3442aebbb77..6ab7fcf61562fc725fb93c55557bf5ccbe8f2961 100644
--- a/app/templates/app/katalog_materi.html
+++ b/app/templates/app/katalog_materi.html
@@ -1,8 +1,8 @@
{% extends "base.html" %}
{% load static %}
-{% block title %}Test pages{% endblock %}
+{% block title %}Digipus Home{% endblock %}
{% block header %}
-<link rel="stylesheet" type="text/css" href="{% static 'app/katalog_materi.css' %}">
+<link rel="stylesheet" type="text/css" href="{% static 'app/css/katalog_materi.css' %}">
{% endblock header %}
{% block content %}
<div class="container">