diff --git a/docs/explanation/driver.md b/docs/explanation/driver.md
new file mode 100644
index 0000000..ad7c264
--- /dev/null
+++ b/docs/explanation/driver.md
@@ -0,0 +1,5 @@
+# uitleg ferry driver kobuki
+
+- nacero driver
+- wsl plugin connect automatisch met wsl omgeving
+-
\ No newline at end of file
diff --git a/docs/home/stappenplan.md b/docs/home/stappenplan.md
new file mode 100644
index 0000000..a9edda0
--- /dev/null
+++ b/docs/home/stappenplan.md
@@ -0,0 +1,5 @@
+- [x] Kobuki werkt met driver.
+- [x] Ik kan de data uitlezen.
+- [ ] Data wordt correct weergegeven.
+- [ ] Ik kan de data laten zien in op de website.
+- [ ] Ik kan de kobuki besturen vanaf de website.
\ No newline at end of file
diff --git a/docs/index.md b/docs/index.md
index ac7427d..c9607bc 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -1 +1,13 @@
-# Welkom
\ No newline at end of file
+# Welkom
+
+
+## benodigdheden
+
+- temperatuur sensor
+- camera
+- time of flight sensor
+- infrarood camera
+
+## idee
+
+Terwijl de kobuki aan het rond rijden is schetst hij een kaart van de omgeving.
\ No newline at end of file
diff --git a/web/app.py b/web/app.py
new file mode 100644
index 0000000..5ea7260
--- /dev/null
+++ b/web/app.py
@@ -0,0 +1,10 @@
+from flask import Flask, render_template
+
+app = Flask(__name__)
+
+@app.route('/')
+def index():
+ return render_template('index.html')
+
+if __name__ == '__main__':
+ app.run(debug=True)
\ No newline at end of file
diff --git a/web/static/images/logo_kobuki.png b/web/static/images/logo_kobuki.png
new file mode 100644
index 0000000..902daf1
Binary files /dev/null and b/web/static/images/logo_kobuki.png differ
diff --git a/web/static/style.css b/web/static/style.css
new file mode 100644
index 0000000..aa40415
--- /dev/null
+++ b/web/static/style.css
@@ -0,0 +1,121 @@
+body {
+ font-family: 'Poppins', sans-serif;
+ text-align: -webkit-center;
+ margin: 0;
+ padding: 0;
+}
+
+/* This is my code for my navbar */
+
+.navbar {
+ display: flex;
+ justify-content: space-between;
+ max-width: 70rem;
+ background-color: #fff;
+ border: 1px solid #f0f0f0;
+ border-radius: 50px;
+ align-items: center;
+ margin: 1.5rem auto 0 auto;
+ padding: 0 30px;
+ top: 0%;
+ bottom: auto;
+ left: 0%;
+ right: 0%;
+}
+
+.imgNav {
+ height: 50px;
+ border-radius: 20px;
+}
+
+.connectButton {
+ border-radius: 10px;
+ height: 100%;
+ width: 100px;
+ box-shadow: none;
+ border: none;
+ font-size: 1rem;
+ height: 40px;
+ background-color: #b3ffb3;
+ }
+
+/* end navbar */
+
+.container {
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+ margin-top: 50px;
+ width: 80%;
+ background-color: white;
+ border-radius: 20px;
+ box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
+ padding: 40px;
+}
+.button-section {
+ position: relative;
+ width: 150px;
+ height: 150px;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.btn {
+ position: absolute;
+ background-color: #007BFF;
+ color: white;
+ border: none;
+ border-radius: 50%;
+ width: 60px;
+ height: 60px;
+ font-size: 1.2em;
+ text-align: center;
+ line-height: 60px;
+ cursor: pointer;
+ transition: transform 0.2s ease, background-color 0.2s ease;
+}
+
+/* Middenknop */
+.btn:nth-child(1) {
+ top: 50%;
+ left: 50%;
+ transform: translate(-125%, -50%);
+}
+
+/* Knop boven */
+.btn:nth-child(2) {
+ top: 0;
+ left: 50%;
+ transform: translateX(-50%);
+}
+
+/* Knop rechts */
+.btn:nth-child(3) {
+ top: 50%;
+ right: 0;
+ transform: translateY(-50%);
+}
+
+/* Knop onder */
+.btn:nth-child(4) {
+ bottom: 0;
+ left: 50%;
+ transform: translateX(-50%);
+}
+
+/* Knop links */
+.btn:nth-child(5) {
+ top: 50%;
+ left: 0;
+ transform: translateY(-50%);
+}
+
+.btn:hover {
+ background-color: #0056b3;
+ /* transform: scale(1.1); */
+}
+
+.btn:active {
+ background-color: #004494;
+}
+
\ No newline at end of file
diff --git a/web/templates/base.html b/web/templates/base.html
new file mode 100644
index 0000000..e7cb16f
--- /dev/null
+++ b/web/templates/base.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+ Document
+
+ {% block head %}{% endblock %}
+
+
+ {% include 'navbar.html' %}
+ {% block content %}
+ {% endblock %}
+
+
\ No newline at end of file
diff --git a/web/templates/index.html b/web/templates/index.html
new file mode 100644
index 0000000..b824f80
--- /dev/null
+++ b/web/templates/index.html
@@ -0,0 +1,19 @@
+{%extends 'base.html'%}
+
+{%block head%}
+
+{%endblock%}
+
+{%block content%}
+
+
+
+
+
+
+
+
+
+
+
+{%endblock%}
\ No newline at end of file
diff --git a/web/templates/navbar.html b/web/templates/navbar.html
new file mode 100644
index 0000000..a45669d
--- /dev/null
+++ b/web/templates/navbar.html
@@ -0,0 +1,25 @@
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
\ No newline at end of file
+