diff --git a/static/css/style.css b/static/css/style.css
new file mode 100644
index 0000000..d65c34e
--- /dev/null
+++ b/static/css/style.css
@@ -0,0 +1,249 @@
+:root {
+    --bg: #121C22;
+    --bg-2nd: #637CF9;
+    --bg-card: #1e2832;
+    --fg: #FFFFFF;
+    --fg-muted: #a0aec0;
+    --border-color: #2d3748;
+    --hover-bg: #1a242f;
+}
+
+body {
+    background-color: var(--bg);
+    color: var(--fg);
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+/* Navbar styling */
+.navbar-dark {
+    background-color: var(--bg-2nd) !important;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+}
+
+.navbar-brand {
+    font-weight: 600;
+}
+
+.nav-link {
+    margin: 0 5px;
+}
+
+/* Card styling */
+.card {
+    background-color: var(--bg-card);
+    border-color: var(--border-color);
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    margin-bottom: 20px;
+}
+
+.card-header {
+    background-color: var(--bg-2nd);
+    border-bottom-color: var(--bg-2nd);
+    color: var(--fg);
+    font-weight: 600;
+}
+
+/* Form controls */
+.form-control,
+.form-select {
+    background-color: #2d3748;
+    border-color: var(--border-color);
+    color: var(--fg);
+}
+
+.form-control:focus,
+.form-select:focus {
+    background-color: #2d3748;
+    border-color: var(--bg-2nd);
+    color: var(--fg);
+    box-shadow: 0 0 0 0.2rem rgba(99, 124, 249, 0.25);
+}
+
+.form-control::placeholder {
+    color: var(--fg-muted);
+}
+
+.form-check-input {
+    background-color: #2d3748;
+    border-color: var(--bg-2nd);
+}
+
+.form-check-input:checked {
+    background-color: var(--bg-2nd);
+    border-color: var(--bg-2nd);
+}
+
+/* Buttons */
+.btn-primary {
+    background-color: var(--bg-2nd);
+    border-color: var(--bg-2nd);
+}
+
+.btn-primary:hover,
+.btn-primary:focus {
+    background-color: #5a6fd8;
+    border-color: #5a6fd8;
+}
+
+.btn-outline-secondary {
+    color: var(--fg);
+    border-color: var(--fg-muted);
+}
+
+.btn-outline-secondary:hover {
+    background-color: #2d3748;
+    color: var(--fg);
+}
+
+/* Tables */
+.table {
+    color: var(--fg);
+}
+
+.table thead th {
+    border-bottom-color: var(--border-color);
+    color: var(--fg-muted);
+}
+
+.table tbody tr:hover {
+    background-color: var(--hover-bg);
+}
+
+.table td, .table th {
+    border-color: var(--border-color);
+}
+
+/* Alerts */
+.alert-warning,
+.alert-info,
+.alert-danger,
+.alert-success {
+    background-color: #2d3748;
+    border-color: var(--bg-2nd);
+    color: var(--fg);
+}
+
+.alert-info {
+    border-left: 4px solid var(--bg-2nd);
+}
+
+.alert-danger {
+    border-left: 4px solid #e53e3e;
+}
+
+.alert-success {
+    border-left: 4px solid #38a169;
+}
+
+.alert-warning {
+    border-left: 4px solid #d69e2e;
+}
+
+/* Text colors */
+.text-muted {
+    color: var(--fg-muted) !important;
+}
+
+/* Progress bars */
+.progress {
+    background-color: #2d3748;
+}
+
+.progress-bar {
+    background-color: var(--bg-2nd);
+}
+
+/* List groups */
+.list-group-item {
+    background-color: var(--bg-card);
+    border-color: var(--border-color);
+    color: var(--fg);
+}
+
+.list-group-item:hover {
+    background-color: var(--hover-bg);
+}
+
+.list-group-item-action:focus,
+.list-group-item-action:hover {
+    background-color: var(--hover-bg);
+    color: var(--fg);
+}
+
+/* Badges */
+.badge {
+    font-weight: 500;
+}
+
+/* Download items */
+.download-item {
+    background-color: var(--hover-bg);
+    border-radius: 4px;
+}
+
+.download-item:hover {
+    background-color: #243447;
+}
+
+/* Provider list */
+.provider-list {
+    max-height: 300px;
+    overflow-y: auto;
+}
+
+.provider-item {
+    cursor: move;
+    background-color: var(--hover-bg);
+}
+
+.provider-item:hover {
+    background-color: #243447;
+}
+
+/* Modals */
+.modal-content {
+    background-color: var(--bg-card);
+    color: var(--fg);
+}
+
+.modal-header,
+.modal-footer {
+    border-color: var(--border-color);
+}
+
+/* Spinner */
+.spinner-border {
+    color: var(--bg-2nd);
+}
+
+/* Footer */
+footer {
+    color: var(--fg-muted);
+}
+
+/* Media queries */
+@media (max-width: 768px) {
+    .card-body {
+        padding: 1rem;
+    }
+
+    .container {
+        padding-left: 12px;
+        padding-right: 12px;
+    }
+}
+
+/* Animations */
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+.fade-in {
+    animation: fadeIn 0.3s ease-in;
+}
+
+/* Dark mode toggle */
+.dark-mode-toggle {
+    cursor: pointer;
+}
\ No newline at end of file