diff --git a/assets/css/style.css b/assets/css/style.css
new file mode 100644
index 0000000..f004a58
--- /dev/null
+++ b/assets/css/style.css
@@ -0,0 +1,117 @@
+/*-----------------------------------*\
+  #style.css
+\*-----------------------------------*/
+
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: #f8f9fa;
+            color: #343a40;
+            text-align: center;
+        }
+
+        .header {
+            color: 006699;
+            text-align: center;
+        }
+
+        main {
+            max-width: 600px;
+            margin: 60px auto;
+            background-color: #fff;
+            padding: 10px;
+            border-radius: 18px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+        }
+
+        input[type="text"],
+        input[type="date"],
+        label,
+        button {
+            padding: 8px;
+            margin: 7px;
+            border: none;
+            border-radius: 5px;
+            font-size: 13px;
+            display: inline-block;
+            vertical-align: middle;
+        }
+
+        label {
+            min-width: 10px;
+            text-align: right;
+        }
+
+        input[type="text"],
+        input[type="date"] {
+            width: calc(25% - 4px);
+            box-sizing: border-box;
+        }
+
+        .date-inputs {
+            display: inline-block;
+            margin: 2;
+        }
+
+        button {
+            background-color: #339966;
+            color: white;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+
+        button:hover {
+            background-color: #0056b3;
+        }
+
+        table {
+            border-collapse: collapse;
+            width: 100%;
+            margin-top: 16px;
+        }
+
+        th, td {
+            border: 1px solid #ddd;
+            padding: 5px;
+            text-align: center;
+			font-size: 14px;
+        }
+
+        th {
+            background-color: #006699;
+            color: white;
+			text-align: center;
+        }
+
+        th:first-child, td:first-child {
+            border-left: none;
+        }
+
+        th:last-child, td:last-child {
+            border-right: none;
+        }
+
+        tr:nth-child(even) {
+            background-color: #f2f2f2;
+        }
+		
+		a {
+		text-decoration: none;
+		color: 339966;
+		
+		}
+
+        #noteContainer {
+            margin-top: 10px;
+            display: none;
+            font-style: italic;
+        }
+		
+		#apiRequestsInfoContainer {
+		font-size: 13px;
+        background-color: #f2f2f2;
+        padding: 5px 0px 1px 0px;
+        border-radius: 10px;
+		}
+		
\ No newline at end of file
diff --git a/assets/images/favicon.ico b/assets/images/favicon.ico
new file mode 100644
index 0000000..7f1960b
Binary files /dev/null and b/assets/images/favicon.ico differ
diff --git a/index.html b/index.html
index f07541c..2affb94 100644
--- a/index.html
+++ b/index.html
@@ -4,121 +4,15 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Global User Contributions</title>
-    <style>	
-        body {
-            font-family: Arial, sans-serif;
-            margin: 0;
-            padding: 0;
-            background-color: #f8f9fa;
-            color: #343a40;
-            text-align: center;
-        }
-
-        .header {
-            color: 006699;
-            text-align: center;
-        }
-
-        main {
-            max-width: 600px;
-            margin: 60px auto;
-            background-color: #fff;
-            padding: 10px;
-            border-radius: 18px;
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-        }
-
-        input[type="text"],
-        input[type="date"],
-        label,
-        button {
-            padding: 8px;
-            margin: 7px;
-            border: none;
-            border-radius: 5px;
-            font-size: 13px;
-            display: inline-block;
-            vertical-align: middle;
-        }
-
-        label {
-            min-width: 10px;
-            text-align: right;
-        }
-
-        input[type="text"],
-        input[type="date"] {
-            width: calc(25% - 4px);
-            box-sizing: border-box;
-        }
-
-        .date-inputs {
-            display: inline-block;
-            margin: 2;
-        }
-
-        button {
-            background-color: #339966;
-            color: white;
-            cursor: pointer;
-            transition: background-color 0.3s ease;
-        }
-
-        button:hover {
-            background-color: #0056b3;
-        }
-
-        table {
-            border-collapse: collapse;
-            width: 100%;
-            margin-top: 16px;
-        }
-
-        th, td {
-            border: 1px solid #ddd;
-            padding: 5px;
-            text-align: center;
-			font-size: 14px;
-        }
-
-        th {
-            background-color: #006699;
-            color: white;
-			text-align: center;
-        }
-
-        th:first-child, td:first-child {
-            border-left: none;
-        }
-
-        th:last-child, td:last-child {
-            border-right: none;
-        }
-
-        tr:nth-child(even) {
-            background-color: #f2f2f2;
-        }
-		
-		a {
-		text-decoration: none;
-		color: 339966;
-		
-		}
-
-        #noteContainer {
-            margin-top: 10px;
-            display: none;
-            font-style: italic;
-        }
-		
-		#apiRequestsInfoContainer {
-		font-size: 13px;
-        background-color: #f2f2f2;
-        padding: 5px 0px 1px 0px;
-        border-radius: 10px;
-		}
-		
-    </style>
+  <!--
+    - favicon
+  -->
+  <link rel="shortcut icon" href="./assets/images/favicon.ico" type="image/x-icon">
+
+  <!--
+    - custom css link
+  -->
+  <link rel="stylesheet" href="./assets/css/style.css">
 </head>
 <body>
 <main>