diff --git a/docs/README.md b/docs/README.md
index 9719114..d3ebf8e 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -1,5 +1,5 @@
 <p align="center">
-    <img src="https://raw.githubusercontent.com/moiSentineL/flomo/main/assets/flomo-speed.gif" width="500">
+    <img src="https://raw.githubusercontent.com/moiSentineL/flomo/main/docs/assets/flomo-speed.gif" width="500">
 </p>
 
 # flomo
@@ -23,7 +23,7 @@ And as developers/creators/romantics, we experience that state of "flow" often.
 This can easily be shown with a graph:
 
 <p align="center">
-    <img src="https://raw.githubusercontent.com/moiSentineL/flomo/main/assets/flow-graph.png" width="500">
+    <img src="https://raw.githubusercontent.com/moiSentineL/flomo/main/docs/assets/flow-graph.png" width="500">
 </p>
 
 However, we can exploit that to our advantage and work efficiently, by finding the **right time** to take a break. And that right time is when the "flow" is depleting.
diff --git a/docs/assets/css/style.scss b/docs/assets/css/style.scss
new file mode 100644
index 0000000..ff9937e
--- /dev/null
+++ b/docs/assets/css/style.scss
@@ -0,0 +1 @@
+@import "{{ site.theme }}";
diff --git a/assets/flomo-speed.gif b/docs/assets/flomo-speed.gif
similarity index 100%
rename from assets/flomo-speed.gif
rename to docs/assets/flomo-speed.gif
diff --git a/assets/flow-graph.png b/docs/assets/flow-graph.png
similarity index 100%
rename from assets/flow-graph.png
rename to docs/assets/flow-graph.png