diff --git a/app.js b/app.js
index e69de29..20ed151 100644
--- a/app.js
+++ b/app.js
@@ -0,0 +1 @@
+alert("Test")
diff --git a/index.html b/index.html
index 763b073..c9665e3 100644
--- a/index.html
+++ b/index.html
@@ -1 +1,22 @@
-
\ No newline at end of file
+
+
+
+ Praying Times
+
+
+
+ Get Praying Times Anywhere
+
+
+
+
+
+
+
+
+
+
Here is the praying times of and
+
+
+
+
\ No newline at end of file
diff --git a/index.pug b/index.pug
index 4284e36..29de5d4 100644
--- a/index.pug
+++ b/index.pug
@@ -1 +1,20 @@
doctype
+html
+ head
+ title Praying Times
+ link(rel="stylesheet", href="style.css")
+ body
+ h1 Get Praying Times Anywhere
+
+ .block
+ label.city_label Enter Your City Name
+ input.city
+ .block
+ label.code_label Enter The Country Code
+ input.code
+ .show
+ h3 Here is the praying times of
+ span#show_city
+ | and
+ span#show_country
+ script(src="app.js")
diff --git a/style.css b/style.css
index 329651d..e200232 100644
--- a/style.css
+++ b/style.css
@@ -1,3 +1,32 @@
+* {
+ font-family: sans-serif;
+ color: #1E1C06;
+ box-sizing: border-box;
+}
+h1 {
+ text-align: center;
+}
+
+body {
+ background-color: #E1DC9F;
+}
+
+div {
+ margin: 20px auto;
+ width: min(800px, 90%);
+}
+
+input {
+ padding: 10px 20px;
+ border-radius: 5px;
+ border: none;
+ width: 100%;
+}
+
+label {
+ display: block;
+ margin: 10px 0;
+}
/*# sourceMappingURL=style.css.map */
diff --git a/style.css.map b/style.css.map
index 4c9b008..420f9f8 100644
--- a/style.css.map
+++ b/style.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"style.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["style.sass"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AACF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA","file":"style.css"}
\ No newline at end of file
diff --git a/style.sass b/style.sass
index e69de29..ff7836e 100644
--- a/style.sass
+++ b/style.sass
@@ -0,0 +1,23 @@
+*
+ font-family: sans-serif
+ color: #1E1C06
+ box-sizing: border-box
+
+h1
+ text-align: center
+
+body
+ background-color: #E1DC9F
+
+div
+ margin: 20px auto
+ width: min(800px, 90%)
+input
+ padding: 10px 20px
+ border-radius: 5px
+ border: none
+ width: 100%
+
+label
+ display: block
+ margin: 10px 0