diff --git a/main.go b/main.go
index f6093a6..366f25e 100644
--- a/main.go
+++ b/main.go
@@ -537,6 +537,9 @@ func initServerHandlers() {
 	http.HandleFunc("/setup-admin", setupAdminHandler)
 	http.HandleFunc("/login", loginHandler)
 	http.HandleFunc("/logout", logoutHandler)
+
+	fs := http.FileServer(http.Dir("static"))
+	http.Handle("/static/", http.StripPrefix("/static/", fs))
 }
 
 func main() {
diff --git a/static/logo.png b/static/logo.png
new file mode 100644
index 0000000..a9f5d0f
Binary files /dev/null and b/static/logo.png differ
diff --git a/static/style.css b/static/style.css
new file mode 100644
index 0000000..81d8d49
--- /dev/null
+++ b/static/style.css
@@ -0,0 +1,136 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f4f4f4;
+    margin: 0;
+    padding: 0;
+    color: #06041f;
+}
+
+/* Header settings */
+
+header {
+    background-color: #06041f;
+    color: #fff;
+    padding: 20px;
+    text-align: center;
+}
+
+.header-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.logo {
+    height: 75px;
+}
+
+header h1 {
+    flex-grow: 1;
+    margin: 0;
+    font-size: 2em;
+    color: #47d7ac;
+}
+
+.nav-buttons a {
+    text-decoration: none;
+    margin: 0 10px;
+    padding: 10px 20px;
+    background-color: #47d7ac;
+    color: #fff;
+    border-radius: 5px;
+    font-weight: bold;
+    transition: background-color 0.3s ease;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.nav-buttons a:hover {
+    background-color: #35a895;
+}
+
+.nav-buttons i {
+    margin-right: 8px;
+}
+
+/* home */
+.tiles ul {
+    list-style-type: none;
+    padding: 0;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    margin: 20px 0;
+}
+
+.tiles li {
+    background-color: #ffffff;
+    border: 2px solid #47d7ac;
+    border-radius: 10px;
+    padding: 15px;
+    width: 180px;
+    text-align: center;
+    margin: 10px;
+    transition: transform 0.3s;
+}
+
+.tiles li:hover {
+    transform: scale(1.1);
+}
+
+.tiles a {
+    text-decoration: none;
+    color: #06041f;
+    font-size: 16px;
+    display: block;
+}
+
+.tiles .tile-icon {
+    font-size: 40px;
+    margin-bottom: 10px;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+th,
+td {
+    border: 1px solid #ddd;
+    padding: 8px;
+    text-align: center;
+}
+
+th {
+    background-color: #47d7ac;
+}
+
+td {
+    background-color: #fff;
+}
+
+h1 {
+    color: #06041f;
+}
+
+button {
+    background-color: #47d7ac;
+    color: #06041f;
+    padding: 8px 16px;
+    border: none;
+    cursor: pointer;
+    border-radius: 4px;
+}
+
+button:hover {
+    background-color: #35a895;
+}
+
+.main {
+    margin-left: 20px;
+    margin-right: 20px;
+}
\ No newline at end of file
diff --git a/templates/css.html b/templates/css.html
deleted file mode 100644
index c7f208a..0000000
--- a/templates/css.html
+++ /dev/null
@@ -1,140 +0,0 @@
-<!-- css.html -->
-<style>
-    body {
-        font-family: Arial, sans-serif;
-        background-color: #f4f4f4;
-        margin: 0;
-        padding: 0;
-        color: #06041f;
-    }
-
-    /* Header settings */
-
-    header {
-        background-color: #06041f;
-        color: #fff;
-        padding: 20px;
-        text-align: center;
-    }
-
-    .header-content {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        max-width: 1200px;
-        margin: 0 auto;
-    }
-
-    .logo {
-        width: 50px;
-        height: auto;
-    }
-
-    header h1 {
-        flex-grow: 1;
-        margin: 0;
-        font-size: 2em;
-        color: #47d7ac;
-    }
-
-    .nav-buttons a {
-        text-decoration: none;
-        margin: 0 10px;
-        padding: 10px 20px;
-        background-color: #47d7ac;
-        color: #fff;
-        border-radius: 5px;
-        font-weight: bold;
-        transition: background-color 0.3s ease;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-    }
-
-    .nav-buttons a:hover {
-        background-color: #35a895;
-    }
-
-    .nav-buttons i {
-        margin-right: 8px;
-    }
-
-    /* home */
-    .tiles ul {
-        list-style-type: none;
-        padding: 0;
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-around;
-        margin: 20px 0;
-    }
-
-    .tiles li {
-        background-color: #ffffff;
-        border: 2px solid #47d7ac;
-        border-radius: 10px;
-        padding: 15px;
-        width: 180px;
-        text-align: center;
-        margin: 10px;
-        transition: transform 0.3s;
-    }
-
-    .tiles li:hover {
-        transform: scale(1.1);
-    }
-
-    .tiles a {
-        text-decoration: none;
-        color: #06041f;
-        font-size: 16px;
-        display: block;
-    }
-
-    .tiles .tile-icon {
-        font-size: 40px;
-        margin-bottom: 10px;
-    }
-
-    table {
-        width: 100%;
-        border-collapse: collapse;
-    }
-
-    th,
-    td {
-        border: 1px solid #ddd;
-        padding: 8px;
-        text-align: center;
-    }
-
-    th {
-        background-color: #47d7ac;
-    }
-
-    td {
-        background-color: #fff;
-    }
-
-    h1 {
-        color: #06041f;
-    }
-
-    button {
-        background-color: #47d7ac;
-        color: #06041f;
-        padding: 8px 16px;
-        border: none;
-        cursor: pointer;
-        border-radius: 4px;
-    }
-
-    button:hover {
-        background-color: #35a895;
-    }
-
-    .main {
-        margin-left: 20px;
-        margin-right: 20px;
-    }
-</style>
\ No newline at end of file
diff --git a/templates/head.html b/templates/head.html
index 86e3a13..a748c72 100644
--- a/templates/head.html
+++ b/templates/head.html
@@ -2,5 +2,5 @@
 <head>
     <title>TMS - Nagarro Training Solutions</title>
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
-    {{template "css.html" .}}
+    <link rel="stylesheet" href="/static/style.css">
 </head>
diff --git a/templates/header.html b/templates/header.html
index 5968576..0f65009 100644
--- a/templates/header.html
+++ b/templates/header.html
@@ -1,6 +1,6 @@
 <header>
     <div class="header-content">
-        <img src="logo.png" alt="Training Management Logo" class="logo">
+        <img src="/static/logo.png" alt="Training Management Logo" class="logo">
         <h1>Nagarro Training Solutions</h1>
         <nav class="nav-buttons">
             <a href="/" class="btn"><i class="fas fa-home"></i> Home</a>