Setup a very basic ui

ui/src/components/Sidebar.tsx

@@ -0,0 +1,38 @@
+import Link from 'next/link';
+import { Home, Settings, BarChart2, BrainCircuit } from 'lucide-react';
+
+const Sidebar = () => {
+  const navigation = [
+    { name: 'Dashboard', href: '/dashboard', icon: Home },
+    { name: 'Train', href: '/train', icon: BrainCircuit },
+    { name: 'Settings', href: '/settings', icon: Settings },
+  ];
+
+  return (
+    <div className="flex flex-col w-64 bg-gray-900 text-gray-100">
+      <div className="p-4">
+        <h1 className="text-xl">
+            <img src="/ostris_logo.png" alt="Ostris AI Toolkit" className="w-auto h-8 mr-3 inline" />
+            Ostris - AI Toolkit
+        </h1>
+      </div>
+      <nav className="flex-1">
+        <ul className="px-2 py-4 space-y-2">
+          {navigation.map(item => (
+            <li key={item.name}>
+              <Link
+                href={item.href}
+                className="flex items-center px-4 py-2 text-gray-300 hover:bg-gray-800 rounded-lg transition-colors"
+              >
+                <item.icon className="w-5 h-5 mr-3" />
+                {item.name}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </nav>
+    </div>
+  );
+};
+
+export default Sidebar;

ui/src/components/ThemeProvider.tsx

@@ -0,0 +1,11 @@
+'use client';
+
+import { createContext, useContext, useEffect, useState } from 'react';
+
+const ThemeContext = createContext({ isDark: true });
+
+export const ThemeProvider = ({ children }: { children: React.ReactNode }) => {
+  const [isDark, setIsDark] = useState(true);
+
+  return <ThemeContext.Provider value={{ isDark }}>{children}</ThemeContext.Provider>;
+};