diff --git a/client/index.html b/client/index.html
index ad34c80..43e4aa0 100644
--- a/client/index.html
+++ b/client/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/bikelane-icon.png" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Bikelane - Web</title>
   </head>
diff --git a/client/src/assets/bikelane-icon.png b/client/public/favicon.png
similarity index 100%
rename from client/src/assets/bikelane-icon.png
rename to client/public/favicon.png
diff --git a/client/src/App.tsx b/client/src/App.tsx
index 4263df3..b7d615c 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -7,28 +7,42 @@ function App() {
 
   return (
     <Layout>
-      <table className="table-auto" style={{ tableLayout: "auto" }}>
-        <thead>
+      <table className="min-w-full divide-y divide-gray-200 shadow rounded-lg overflow-hidden">
+        <thead className="bg-gray-50">
           <tr>
-            <th>#</th>
-            <th>Username</th>
-            <th>First name</th>
-            <th>Last name</th>
-            <th>Email</th>
-            <th>Password</th>
-            <th>Created</th>
+            <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+              #
+            </th>
+            <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+              Username
+            </th>
+            <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+              First name
+            </th>
+            <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+              Last name
+            </th>
+            <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+              Email
+            </th>
+            <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+              Password
+            </th>
+            <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+              Created
+            </th>
           </tr>
         </thead>
-        <tbody>
+        <tbody className="bg-white divide-y divide-gray-100">
           {users.map((user: any, idx: number) => (
-            <tr key={user.id}>
-              <td>{idx + 1}</td>
-              <td>{user.username}</td>
-              <td>{user.first_name}</td>
-              <td>{user.last_name}</td>
-              <td>{user.email}</td>
-              <td>{user.password}</td>
-              <td>{user.created}</td>
+            <tr key={user.id} className="hover:bg-blue-50 transition">
+              <td className="px-4 py-2 whitespace-nowrap">{idx + 1}</td>
+              <td className="px-4 py-2 whitespace-nowrap">{user.username}</td>
+              <td className="px-4 py-2 whitespace-nowrap">{user.first_name}</td>
+              <td className="px-4 py-2 whitespace-nowrap">{user.last_name}</td>
+              <td className="px-4 py-2 whitespace-nowrap">{user.email}</td>
+              <td className="px-4 py-2 whitespace-nowrap">{user.password}</td>
+              <td className="px-4 py-2 whitespace-nowrap">{user.created}</td>
             </tr>
           ))}
         </tbody>
diff --git a/client/src/assets/bicycle-solid-full.svg b/client/src/assets/bicycle-solid-full.svg
new file mode 100644
index 0000000..bdad4ca
--- /dev/null
+++ b/client/src/assets/bicycle-solid-full.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="10" width="10" viewBox="0 0 640 640"><!--!Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M331.7 107.3C336 100.3 343.7 96 352 96L456 96C469.3 96 480 106.7 480 120C480 133.3 469.3 144 456 144L390.4 144L462.6 292.4C473.3 289.5 484.5 288 496 288C566.7 288 624 345.3 624 416C624 486.7 566.7 544 496 544C425.3 544 368 486.7 368 416C368 374 388.2 336.8 419.4 313.4L399 271.5L325.5 418.5C323.2 423.3 319.2 427.3 314.1 429.7C313.5 430 312.9 430.2 312.3 430.4C309.4 431.5 306.4 432 303.4 431.9L271 432C263.1 495.1 209.3 544 144 544C73.3 544 16 486.7 16 416C16 345.3 73.3 288 144 288C154.8 288 165.2 289.3 175.2 291.8L203.7 234.9L192.2 208L152 208C138.7 208 128 197.3 128 184C128 170.7 138.7 160 152 160L208 160C217.6 160 226.3 165.7 230.1 174.5L244.4 208L368.1 208L330.4 130.5C326.8 123.1 327.2 114.3 331.6 107.3zM228.5 292.7L182.9 384L267.7 384L228.6 292.7zM305.7 351L353.2 256L265 256L305.7 351zM474.4 426.5L444.7 365.5C431.9 378.5 424 396.3 424 416C424 455.8 456.2 488 496 488C535.8 488 568 455.8 568 416C568 376.2 535.8 344 496 344C493.3 344 490.5 344.2 487.9 344.5L517.6 405.5C523.4 417.4 518.4 431.8 506.5 437.6C494.6 443.4 480.2 438.4 474.4 426.5zM149.2 432C129 432 115.8 410.7 124.9 392.6L149.1 344.1C147.4 344 145.7 343.9 144 343.9C104.2 343.9 72 376.1 72 415.9C72 455.7 104.2 487.9 144 487.9C178.3 487.9 206.9 464 214.2 431.9L149.2 431.9z"/></svg>
\ No newline at end of file
diff --git a/client/src/assets/circle-user-solid-full.svg b/client/src/assets/circle-user-solid-full.svg
new file mode 100644
index 0000000..a3a1822
--- /dev/null
+++ b/client/src/assets/circle-user-solid-full.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M463 448.2C440.9 409.8 399.4 384 352 384L288 384C240.6 384 199.1 409.8 177 448.2C212.2 487.4 263.2 512 320 512C376.8 512 427.8 487.3 463 448.2zM64 320C64 178.6 178.6 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576C178.6 576 64 461.4 64 320zM320 336C359.8 336 392 303.8 392 264C392 224.2 359.8 192 320 192C280.2 192 248 224.2 248 264C248 303.8 280.2 336 320 336z"/></svg>
\ No newline at end of file
diff --git a/client/src/components/LoginCard.tsx b/client/src/components/LoginCard.tsx
index f13ae78..8a80d32 100644
--- a/client/src/components/LoginCard.tsx
+++ b/client/src/components/LoginCard.tsx
@@ -42,12 +42,13 @@ const LoginCard: React.FC<LoginCardProps> = ({ onClose }) => {
                     .then((users) => {
                       localStorage.setItem("users", JSON.stringify(users));
                     });
+                  document.location.reload();
                 } else if (response.status === 401) {
                   alert("Invalid credentials");
                 }
               })
               .catch((error) => {
-                console.error("Login failed:", error);
+                console.log("Login failed: ", error);
               });
           }}
           className="space-y-4 text-black"
@@ -80,15 +81,19 @@ const LoginCard: React.FC<LoginCardProps> = ({ onClose }) => {
               className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
             />
           </div>
-          <input
-            type="submit"
-            value="Login"
-            className="w-full bg-blue-600 text-white font-semibold py-2 rounded-md hover:bg-blue-700 transition"
-          />
+          {Cookies.get("name") ? (
+            <p></p>
+          ) : (
+            <input
+              type="submit"
+              value="Login"
+              className="w-full bg-blue-600 text-white font-semibold py-2 rounded-md hover:bg-blue-700 transition"
+            />
+          )}
         </form>
         {Cookies.get("name") ? (
           <button
-            className="w-full bg-blue-600 text-white font-semibold py-2 rounded-md hover:bg-blue-700 transition"
+            className="w-full bg-black text-white font-semibold py-2 rounded-md hover:bg-green-400 transition"
             onClick={logout}
           >
             Logout
diff --git a/client/src/layout/Layout.tsx b/client/src/layout/Layout.tsx
index 04af9f4..fb4ddfa 100644
--- a/client/src/layout/Layout.tsx
+++ b/client/src/layout/Layout.tsx
@@ -1,17 +1,77 @@
 import React from "react";
 import Header from "../components/Header";
+import userIcon from "../assets/circle-user-solid-full.svg";
+import logoIcon from "../assets/bicycle-solid-full.svg";
+import Cookies from "js-cookie"; // Add this import
 
 type LayoutProps = {
   children: React.ReactNode;
 };
 
 const Layout: React.FC<LayoutProps> = ({ children }) => {
+  const isLoggedIn = !!Cookies.get("name"); // Check login status
+
   return (
-    <div className="flex flex-col min-h-screen bg-gray-100">
+    <div className="flex flex-col min-h-screen bg-gradient-to-br from-blue-50 via-blue-100 to-blue-200">
       <Header />
-      <main className="flex-1">{children}</main>
-      <footer className="bg-gray-800 text-white p-4 text-center">
-        <p>&copy; {new Date().getFullYear()} Bikelane Web</p>
+      <div className="flex flex-1">
+        {isLoggedIn && (
+          <>
+            {/* Sidebar */}
+            <aside className="w-72 bg-white/90 shadow-2xl rounded-r-3xl p-8 flex flex-col gap-10 border-r border-blue-100">
+              <div className="flex items-center gap-4 mb-10">
+                <img
+                  src={logoIcon}
+                  alt="Bikelane Logo"
+                  className="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center shadow-lg"
+                />
+                <span className="font-extrabold text-2xl text-blue-700 tracking-wide drop-shadow">
+                  Bikelanes
+                </span>
+              </div>
+              <nav>
+                <ul className="space-y-6">
+                  <li>
+                    <a
+                      href="/#"
+                      className="flex items-center gap-3 px-4 py-3 rounded-xl text-blue-700 font-medium bg-blue-50 hover:bg-blue-200 hover:text-blue-900 transition-all shadow-sm"
+                    >
+                      <img src={userIcon} alt="Users" className="w-6 h-6" />
+                      <span className="text-lg">Users</span>
+                    </a>
+                  </li>
+                  {/* Add more links as needed */}
+                </ul>
+              </nav>
+              <div className="mt-auto text-xs text-blue-300 text-center pt-6 border-t border-blue-100">
+                <span>Bikelane pre-0.1</span>
+              </div>
+            </aside>
+            {/* Main content */}
+            <main className="flex-1 p-10 bg-white/80 rounded-l-3xl shadow-2xl m-6 overflow-auto">
+              {children}
+            </main>
+          </>
+        )}
+      </div>
+      <footer className="bg-gradient-to-r from-blue-800 via-blue-900 to-blue-800 text-blue-100 py-6 px-5 text-center rounded-t-3xl shadow-xl mt-8 tracking-wide border-t border-blue-700">
+        <div className="flex flex-col items-center gap-2">
+          <span className="font-bold text-lg tracking-widest drop-shadow">
+            Bikelane Web
+          </span>
+          <span className="text-xs text-blue-200">
+            &copy; {new Date().getFullYear()} —
+            <a
+              href="https://git.the1s.de/theis.gaedigk/bikelane"
+              className="underline hover:text-blue-300 transition"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              GitHub Repository
+            </a>
+            <span className="ml-1">| Fork me please 🚲</span>
+          </span>
+        </div>
       </footer>
     </div>
   );

#	Username	First name	Last name	Email	Password	Created	+ # +	+ Username +	+ First name +	+ Last name +	+ Email +	+ Password +	+ Created +
{idx + 1}	{user.username}	{user.first_name}	{user.last_name}	{user.email}	{user.password}	{user.created}
{idx + 1}	{user.username}	{user.first_name}	{user.last_name}	{user.email}	{user.password}	{user.created}