diff --git a/images/smolNews_transparent-grey.png b/images/smolNews_transparent-grey.png
new file mode 100644
index 0000000..1936d9e
Binary files /dev/null and b/images/smolNews_transparent-grey.png differ
diff --git a/index.html b/index.html
index 2b4fdfa..127c6b1 100644
--- a/index.html
+++ b/index.html
@@ -9,8 +9,10 @@
   <link rel="icon" href="https://i.ibb.co/jvVTdPM/nobackground-withoutname2.png">
 </head>
 <body>
-  <div class="container mt-5">
-    <h1 class="text-center">smolNews</h1>
+  <div class="container mt-5 mx-auto">
+    <div class="text-center mb-4">
+      <img src="/images/smolNews_transparent-grey.png" alt="smolNews" class="title-logo">
+    </div>
     <div class="form-group">
       <select id="topicSelect" class="form-control">
         <option value="">All Topics</option>
diff --git a/style.css b/style.css
index af5f2ed..cd46ad9 100644
--- a/style.css
+++ b/style.css
@@ -1,52 +1,235 @@
+
+:root {
+  --bg-dark: #202020;
+  --card-dark: #2d2d2d;
+  --text-light: #ffffff;
+  --accent: #0078d4;
+  --border-radius: 8px;
+}
+
+body {
+  background-color: var(--bg-dark);
+  color: var(--text-light);
+  font-family: 'Segoe UI', system-ui, sans-serif;
+  transition: background-color 0.3s;
+}
+
+.container {
+  max-width: 1200px;
+  padding: 2rem;
+}
+
+.title-logo {
+  max-width: 300px;
+  height: auto;
+  opacity: 0;
+  animation: fadeIn 0.5s ease-out forwards;
+}
+
+@media (max-width: 768px) {
+  .title-logo {
+    max-width: 200px;
+  }
+}
+
+.form-control {
+  background-color: var(--card-dark);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  color: var(--text-light);
+  border-radius: var(--border-radius);
+  padding: 0.75rem;
+  transition: all 0.2s ease;
+}
+
+.form-control:focus {
+  background-color: var(--card-dark);
+  border-color: var(--accent);
+  color: var(--text-light);
+  box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.25);
+}
+
+.btn {
+  border-radius: var(--border-radius);
+  padding: 0.75rem 1.5rem;
+  transition: transform 0.2s, background-color 0.2s;
+}
+
+.btn:active {
+  transform: scale(0.98);
+}
+
+.btn-primary {
+  background-color: var(--accent);
+  border: none;
+}
+
+.btn-primary:hover {
+  background-color: #106ebe;
+}
+
+.card {
+  background-color: var(--card-dark);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: var(--border-radius);
+  transition: transform 0.2s;
+  opacity: 0;
+  animation: slideUp 0.5s ease-out forwards;
+}
+
+.card:hover {
+  transform: translateY(-2px);
+}
+
 .card-horizontal {
   display: flex;
   flex-direction: row;
   align-items: center;
+  gap: 1.5rem;
+  padding: 1rem;
 }
 
 .card-horizontal img {
-  width: 337px;
+  width: 300px;
   height: 200px;
-  margin-right: 15px;
+  border-radius: var(--border-radius);
   object-fit: cover;
+  flex-shrink: 0;
 }
 
-.modal-body img {
-  max-width: 100%;
-  height: auto;
-  margin-bottom: 15px;
+@media (min-width: 769px) {
+  .card-horizontal img {
+    width: 300px;
+    height: 200px;
+  }
 }
 
-.modal-dialog {
-  max-width: 800px;
+.modal-content {
+  background-color: var(--card-dark);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: var(--border-radius);
 }
 
-.article-metadata {
-  color: #666;
-  font-size: 0.9em;
-  margin-bottom: 15px;
+.modal-header {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }
 
-.icon-small {
-  width: 10%; /* Set the width to 10% */
+.modal-footer {
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.close {
+  color: var(--text-light);
+  opacity: 0.7;
 }
 
 .message {
-  position: fixed;                  
-  top: 20px;                       
-  right: 20px;                    
-  z-index: 1000;                  
-  padding: 10px 15px;             
-  border-radius: 20px;         
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); 
-  max-width: 300px;              
-  font-size: 14px;              
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  z-index: 1000;
+  padding: 1rem 1.5rem;
+  border-radius: var(--border-radius);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  max-width: 300px;
+  font-size: 14px;
+  animation: slideIn 0.3s ease-out;
 }
 
-.text-success {     
-  color: #155724;                 
+.text-success {
+  color: #ffffff;
 }
 
-.text-danger {  
-  color: #721c24;                 
-}
\ No newline at end of file
+.text-danger {
+  color: #ffffff;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateX(100px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.icon-small {
+  width: 120px;
+  opacity: 0.8;
+  transition: opacity 0.2s;
+}
+
+.icon-small:hover {
+  opacity: 1;
+}
+
+@media (max-width: 768px) {
+  .container {
+    padding: 1rem;
+  }
+  
+  .card-horizontal {
+    flex-direction: column;
+    text-align: center;
+  }
+  
+  .card-horizontal img {
+    width: 100%;
+    height: 200px;
+    margin-bottom: 1rem;
+  }
+  
+  .form-group {
+    margin-bottom: 0.75rem;
+  }
+  
+  .btn {
+    width: 100%;
+    margin-bottom: 1rem;
+  }
+  
+  h1 {
+    font-size: 1.75rem;
+  }
+  
+  .modal-dialog {
+    margin: 0.5rem;
+  }
+  
+  .message {
+    width: 90%;
+    right: 5%;
+    top: 10px;
+  }
+}
+
+@media (max-width: 480px) {
+  .card-horizontal img {
+    height: 180px;
+  }
+  
+  h1 {
+    font-size: 1.5rem;
+  }
+  
+  .container {
+    padding: 0.5rem;
+  }
+}
