diff --git a/public/index.html b/public/index.html
index 6652c7dd60ad34f6d80148f3c8e6876702d19854..e00d32dd0946fcf74b2eb654d5ca20dced94264a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,23 +1,33 @@
<!DOCTYPE html>
<html>
- <head>
- <meta charset="utf-8">
- <meta name="generator" content="GitLab Pages">
- <title>Plain HTML site using GitLab Pages</title>
- <link rel="stylesheet" href="style.css">
- </head>
- <body>
- <div class="navbar">
- <a href="https://pages.gitlab.io/plain-html/">Plain HTML Example</a>
- <a href="https://gitlab.com/pages/plain-html/">Repository</a>
- <a href="https://gitlab.com/pages/">Other Examples</a>
- </div>
-
- <h1>Hello World!</h1>
-
- <p>
- This is a simple plain-HTML website on GitLab Pages, without any fancy static site generator.
- </p>
- </body>
+<head>
+<meta charset= "utf-8">
+<title>Learn Frontend WebDev</title>
+<link rel='stylesheet' href='styles.css'/>
+<h1>Welcome to my page!</h1>
+<p><a href="indexdark.html">Toggle dark mode</a></p>
+</head>
+<body>
+<h2>I made this page with the sole purpose to learn more about design with css, html, and javascript.</h2>
+<p>I actually never use html both and css professionally. However i do have a bit of experience writing back when blogspot was still a thing, i was 13 arround that time. I stopped writing 1 or 2 months later because i'm bored. It's basically felt like doing a homework in ms office which is a weekly thing to do for 13yo me (Yes, our teacher taught us to do our homework on ms office). And i didn't even interested to learn more about css or html that time since all thing could be drag n dropped.</p>
+<p>You might wonder "Well, why would't you told us why suddenly you had an idea that you would want to learn more about frontend webdev instead of telling an unrelated story" </p>
+<p>Well that's a good question. I can't even think of any single logical reason besides "well learning new things is kinda fun" </p>
+<h2>With all that out of the way. I would like to present you with my list of worthwhile link that consist of article, post or meme.</h2>
+<ul>
+<li><a href="https://cheatsheetseries.owasp.org">https://cheatsheetseries.owasp.org</a></li>
+<li><a href="https://ctftime.org">ctftime.org</a></li>
+<li><a href="https://alexcabal.com/creating-the-perfect-gpg-keypair">Creating the perfect GPG keys</a></li>
+<li><a href="https://codeberg.org/crimeflare/cloudflare-tor">A detailed insight towards cloudflare centralized reverse-proxies</a></li>
+<li><a href="https://w3.org">w3.org</a></li>
+<h2>Feel free to gives me some frontend webdev related advice or say "Hi !" by either tagging me on mastodon or by commenting on my repo. You could find both of the link at the bottom of the page.</h2>
+<h2>
+</h2>
+</body>
+<footer>
+<h6>https://gitlab.com/ravenci/learnwebdev
+<a href="https://gitlab.com/ravenci/learnwebdev/"> or you could click here</a>
+</h6>
+<h6><a href="https://qoto.org/@ravenclaw"> or click here</a></h6>
+</footer>
</html>
diff --git a/public/indexdark.html b/public/indexdark.html
new file mode 100644
index 0000000000000000000000000000000000000000..d7df1dcb1a52d12285e8c03ce99ead5302dde7d8
--- /dev/null
+++ b/public/indexdark.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset= "utf-8">
+<title>Learn Frontend WebDev</title>
+<link rel='stylesheet' href='styles.css'/>
+<h1>Welcome to my page!</h1>
+<p><a href="index.html">Toggle Light mode</a></p>
+</head>
+<body>
+<h2>I made this page with the sole purpose to learn more about design with css, html, and javascript.</h2>
+<p>I actually never use html both and css professionally. However i do have a bit of experience writing back when blogspot was still a thing, i was 13 arround that time. I stopped writing 1 or 2 months later because i'm bored. It's basically felt like doing a homework in ms office which is a weekly thing to do for 13yo me (Yes, our teacher taught us to do our homework on ms office). And i didn't even interested to learn more about css or html that time since all thing could be drag n dropped.</p>
+<p>You might wonder "Well, why would't you told us why suddenly you had an idea that you would want to learn more about frontend webdev instead of telling an unrelated story" </p>
+<p>Well that's a good question. I can't even think of any single logical reason besides "well learning new things is kinda fun" </p>
+<h2>With all that out of the way. I would like to present you with my list of worthwhile link that consist of article, post or meme.</h2>
+<ul>
+<li><a href="https://cheatsheetseries.owasp.org">https://cheatsheetseries.owasp.org</a></li>
+<li><a href="https://ctftime.org">ctftime.org</a></li>
+<li><a href="https://alexcabal.com/creating-the-perfect-gpg-keypair"></a></li>
+<li><a href="https://codeberg.org/crimeflare/cloudflare-tor"></a></li>
+<li><a href="https://w3.org"></a></li>
+<h2>Feel free to gives me some frontend webdev related advice or say "Hi !" by either tagging me on mastodon or by commenting on my repo. You could find both of the link at the bottom of the page.</h2>
+<h2>
+</h2>
+</body>
+<footer>
+<h6>https://gitlab.com/ravenci/learnwebdev
+<a href="https://gitlab.com/ravenci/learnwebdev/"> or you could click here</a>
+</h6>
+<h6><a href="https://qoto.org/@ravenclaw"> or click here</a></h6>
+</footer>
+</html>
+
diff --git a/public/styles.css b/public/styles.css
new file mode 100644
index 0000000000000000000000000000000000000000..167b4210fbf51805c844c5aa9fc847dfb0174755
--- /dev/null
+++ b/public/styles.css
@@ -0,0 +1,4 @@
+html {
+background-color: white;
+text-color: black;
+}
diff --git a/public/stylesdark.css b/public/stylesdark.css
new file mode 100644
index 0000000000000000000000000000000000000000..3593c8c9b79a91996c0a76f727daa25d31e22145
--- /dev/null
+++ b/public/stylesdark.css
@@ -0,0 +1,7 @@
+html {
+background-color: black;
+color: white;
+}
+a {
+color: #00ff00;
+}