diff --git a/ell-studio/src/components/layouts/GenericPageLayout.js b/ell-studio/src/components/layouts/GenericPageLayout.js
index 948df84d..06a4aec2 100644
--- a/ell-studio/src/components/layouts/GenericPageLayout.js
+++ b/ell-studio/src/components/layouts/GenericPageLayout.js
@@ -23,16 +23,16 @@ const GenericPageLayout = ({
           selectedTrace={selectedTrace}
           setSelectedTrace={setSelectedTrace}
           showSidebar={showSidebar}
-          containerClass="flex flex-col h-full"
+          containerClass="flex flex-col h-full bg-background"
         >
-          <div className="p-6">
+          <div className="p-6 bg-background">
             {children}
           </div>
         </InvocationsLayout>
       </ResizablePanel>
-      <ResizableHandle withHandle className="my-handle" />
+      <ResizableHandle withHandle className="my-handle bg-border" />
       <ResizablePanel defaultSize={30} minSize={20} className="bg-background" style={{ display: sidebarVisible ? 'block' : 'none' }}>
-        <ScrollArea className="h-full">
+        <ScrollArea className="h-full bg-background">
           {sidebarContent}
         </ScrollArea>
       </ResizablePanel>
diff --git a/ell-studio/src/pages/Invocations.js b/ell-studio/src/pages/Invocations.js
index ad1e2a61..073d3b81 100644
--- a/ell-studio/src/pages/Invocations.js
+++ b/ell-studio/src/pages/Invocations.js
@@ -145,24 +145,30 @@ const Invocations = () => {
       setSelectedTrace={setSelectedTrace}
       sidebarContent={sidebarContent}
     >
-      <div className="flex justify-between items-center mb-6">
-        <h1 className="text-2xl font-semibold text-white flex items-center">
-          Invocations
-        </h1>
-      </div>
+      <div className="bg-background text-foreground">
+        <div className="flex justify-between items-center mb-6">
+          <h1 className="text-2xl font-semibold">Invocations</h1>
+          <div className="flex items-center space-x-2">
+            <button
+              className={`px-3 py-1 rounded text-xs ${isPolling ? 'bg-primary text-primary-foreground' : 'bg-secondary text-secondary-foreground'}`}
+              onClick={togglePolling}
+            >
+              {isPolling ? <FiPause className="inline mr-1" /> : <FiPlay className="inline mr-1" />}
+              {isPolling ? 'Pause' : 'Resume'}
+            </button>
+          </div>
+        </div>
 
-      {/* Search bar, advanced filters, and controls */}
-      <div className="mb-6 space-y-4">
-        <div className="flex items-center space-x-4">
-          <div className="flex-grow relative">
+        <div className="mb-6 flex items-center space-x-4">
+          <div className="relative flex-grow">
             <input
               type="text"
               placeholder="Search invocations..."
-              className="w-full bg-[#2d333b] text-white px-4 py-2 rounded-md pl-10"
+              className="w-full pl-10 pr-4 py-2 bg-input text-foreground rounded-md"
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
             />
-            <FiSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
+            <FiSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground" />
           </div>
           <button 
             className="flex items-center px-3 py-2 bg-[#2d333b] text-sm rounded hover:bg-gray-700"
@@ -171,13 +177,6 @@ const Invocations = () => {
             <FiFilter className="mr-2" />
             Advanced Filters
           </button>
-          <button
-            className={`flex items-center px-3 py-2 ${isPolling ? 'bg-blue-600' : 'bg-[#2d333b]'} rounded hover:bg-gray-700`}
-            onClick={togglePolling}
-          >
-            {isPolling ? <FiPause className="mr-2" /> : <FiPlay className="mr-2" />}
-            {isPolling ? 'Pause Updates' : 'Resume Updates'}
-          </button>
         </div>
         
         {advancedFilters.isOpen && (
@@ -238,23 +237,22 @@ const Invocations = () => {
           </div>
         )}
         
+        <div className="flex items-center space-x-2 mb-6">
+          <button className="flex items-center px-2 py-1 bg-secondary text-secondary-foreground text-xs rounded hover:bg-secondary/80">
+            <FiColumns className="mr-1" />
+            Columns
+          </button>
+        </div>
+        <InvocationsTable 
+          invocations={filteredInvocations} 
+          currentPage={currentPage}
+          expandAll={true}
+          setCurrentPage={setCurrentPage}
+          pageSize={pageSize}
+          onSelectTrace={handleSelectTrace} 
+          currentlySelectedTrace={selectedTrace}
+        />
       </div>
-
-      <div className="flex items-center space-x-2 mb-6">
-        <button className="flex items-center px-2 py-1 bg-[#1c2128] text-xs rounded hover:bg-gray-700">
-          <FiColumns className="mr-1" />
-          Columns
-        </button>
-      </div>
-      <InvocationsTable 
-        invocations={filteredInvocations} 
-        currentPage={currentPage}
-        expandAll={true}
-        setCurrentPage={setCurrentPage}
-        pageSize={pageSize}
-        onSelectTrace={handleSelectTrace} 
-        currentlySelectedTrace={selectedTrace}
-      />
     </GenericPageLayout>
   );
 };
diff --git a/ell-studio/src/pages/LMP.js b/ell-studio/src/pages/LMP.js
index a9004c9e..9cc2f66a 100644
--- a/ell-studio/src/pages/LMP.js
+++ b/ell-studio/src/pages/LMP.js
@@ -129,141 +129,142 @@ function LMP() {
       setSelectedTrace={setSelectedTrace}
       sidebarContent={sidebar}
     >
-      <div className="flex justify-between items-center mb-6">
-        <h1 className="text-lg flex items-center">
-          <Link to={`/lmp/${lmp?.name}`}>
-            <Card>
-              <LMPCardTitle lmp={lmp} />
-            </Card>
-          </Link>
-        </h1>
-      </div>
+      <div className="bg-background text-foreground">
+        <div className="flex justify-between items-center mb-6">
+          <h1 className="text-lg flex items-center">
+            <Link to={`/lmp/${lmp?.name}`}>
+              <Card className="bg-card text-card-foreground">
+                <LMPCardTitle lmp={lmp} />
+              </Card>
+            </Link>
+          </h1>
+        </div>
 
-      <main className="overflow-y-auto hide-scrollbar">
-        <div className="mb-6 bg-card rounded-lg p-4">
-          <div className="flex justify-between items-center mb-4">
-            <div className="flex items-center space-x-4">
-              <h2 className="text-md font-semibold text-card-foreground">Language Model Program</h2>
-              {(id || requestedInvocationId) && (
-                <>
-                  <span className="text-muted-foreground mx-2">•</span>
-                  <VersionBadge
-                    version={
-                      id
-                        ? lmp?.version_number + 1
-                        : requestedInvocation?.lmp.version_number + 1
-                    }
-                    hash={id ? lmp?.lmp_id : requestedInvocation?.lmp_id}
-                  />
-                </>
-              )}
+        <main className="overflow-y-auto hide-scrollbar">
+          <div className="mb-6 bg-card rounded-lg p-4">
+            <div className="flex justify-between items-center mb-4">
+              <div className="flex items-center space-x-4">
+                <h2 className="text-md font-semibold text-card-foreground">Language Model Program</h2>
+                {(id || requestedInvocationId) && (
+                  <>
+                    <span className="text-muted-foreground mx-2">•</span>
+                    <VersionBadge
+                      version={
+                        id
+                          ? lmp?.version_number + 1
+                          : requestedInvocation?.lmp.version_number + 1
+                      }
+                    />
+                  </>
+                )}
+              </div>
+              <div className="flex space-x-4 items-center">
+                {previousVersion && (
+                  <>
+                    {viewMode === "Diff" && (
+                      <div className="flex items-center text-sm text-muted-foreground">
+                        <FiGitCommit className="mr-2" />
+                        <span className="mr-2">Comparing to </span>
+                        <VersionBadge
+                          version={previousVersion.version_number + 1}
+                          hash={previousVersion.lmp_id}
+                          className="opacity-40"
+                        />
+                      </div>
+                    )}
+                    <ToggleSwitch
+                      leftLabel="Source"
+                      rightLabel="Diff"
+                      isRight={viewMode === "Diff"}
+                      onToggle={handleViewModeToggle}
+                    />
+                  </>
+                )}
+                <button
+                  className="p-1 rounded bg-secondary hover:bg-secondary/80 transition-colors"
+                  onClick={handleCopyCode}
+                >
+                  <FiCopy className="w-4 h-4" />
+                </button>
+              </div>
             </div>
-            <div className="flex space-x-4 items-center">
-              {previousVersion && (
-                <>
-                  {viewMode === "Diff" && (
-                    <div className="flex items-center text-sm text-muted-foreground">
-                      <FiGitCommit className="mr-2" />
-                      <span className="mr-2">Comparing to </span>
-                      <VersionBadge
-                        version={previousVersion.version_number + 1}
-                        hash={previousVersion.lmp_id}
-                        className="opacity-40"
-                      />
-                    </div>
-                  )}
-                  <ToggleSwitch
-                    leftLabel="Source"
-                    rightLabel="Diff"
-                    isRight={viewMode === "Diff"}
-                    onToggle={handleViewModeToggle}
-                  />
-                </>
-              )}
-              <button
-                className="p-1 rounded bg-secondary hover:bg-secondary/80 transition-colors"
-                onClick={handleCopyCode}
-              >
-                <FiCopy className="w-4 h-4" />
-              </button>
+            <div className="overflow-hidden">
+              <LMPSourceView
+                lmp={lmp}
+                selectedInvocation={selectedTrace}
+                showDependenciesInitial={!!id}
+                previousVersion={previousVersion}
+                viewMode={previousVersion ? viewMode : "Source"}
+              />
             </div>
           </div>
-          <div className="overflow-hidden">
-            <LMPSourceView
-              lmp={lmp}
-              selectedInvocation={selectedTrace}
-              showDependenciesInitial={!!id}
-              previousVersion={previousVersion}
-              viewMode={previousVersion ? viewMode : "Source"}
-            />
-          </div>
-        </div>
 
-        <div className="mb-6">
-          <div className="flex border-b border-border">
-            {["Runs", "Version History"].map((tab) => (
-              <button
-                key={tab}
-                className={`px-4 py-2 focus:outline-none ${
-                  activeTab === tab.toLowerCase().replace(" ", "_")
-                    ? "text-primary border-b-2 border-primary font-medium"
-                    : "text-muted-foreground hover:text-foreground"
-                }`}
-                onClick={() =>
-                  setActiveTab(tab.toLowerCase().replace(" ", "_"))
-                }
-              >
-                {tab}
-              </button>
-            ))}
-          </div>
+          <div className="mb-6">
+            <div className="flex border-b border-border">
+              {["Runs", "Version History"].map((tab) => (
+                <button
+                  key={tab}
+                  className={`px-4 py-2 focus:outline-none ${
+                    activeTab === tab.toLowerCase().replace(" ", "_")
+                      ? "text-primary border-b-2 border-primary font-medium"
+                      : "text-muted-foreground hover:text-foreground"
+                  }`}
+                  onClick={() =>
+                    setActiveTab(tab.toLowerCase().replace(" ", "_"))
+                  }
+                >
+                  {tab}
+                </button>
+              ))}
+            </div>
 
-          <div className="mt-4">
-            {activeTab === "runs" && (
-              <>
-                <div className="flex justify-between items-center mb-4">
-                  <div className="flex space-x-2">
-                    <button className="px-3 py-1 bg-secondary text-secondary-foreground rounded text-xs hover:bg-secondary/80 transition-colors flex items-center">
-                      <FiFilter className="mr-1" /> 1 filter
-                    </button>
-                    <button className="px-3 py-1 bg-secondary text-secondary-foreground rounded text-xs hover:bg-secondary/80 transition-colors">
-                      Last 7 days
-                    </button>
-                    <button className="px-3 py-1 bg-secondary text-secondary-foreground rounded text-xs hover:bg-secondary/80 transition-colors">
-                      Root Runs
-                    </button>
-                    <button className="px-3 py-1 bg-secondary text-secondary-foreground rounded text-xs hover:bg-secondary/80 transition-colors">
-                      LLM Calls
-                    </button>
-                    <button className="px-3 py-1 bg-secondary text-secondary-foreground rounded text-xs hover:bg-secondary/80 transition-colors">
-                      All Runs
+            <div className="mt-4">
+              {activeTab === "runs" && (
+                <>
+                  <div className="flex justify-between items-center mb-4">
+                    <div className="flex space-x-2">
+                      <button className="px-3 py-1 bg-secondary text-secondary-foreground rounded text-xs hover:bg-secondary/80 transition-colors flex items-center">
+                        <FiFilter className="mr-1" /> 1 filter
+                      </button>
+                      <button className="px-3 py-1 bg-secondary text-secondary-foreground rounded text-xs hover:bg-secondary/80 transition-colors">
+                        Last 7 days
+                      </button>
+                      <button className="px-3 py-1 bg-secondary text-secondary-foreground rounded text-xs hover:bg-secondary/80 transition-colors">
+                        Root Runs
+                      </button>
+                      <button className="px-3 py-1 bg-secondary text-secondary-foreground rounded text-xs hover:bg-secondary/80 transition-colors">
+                        LLM Calls
+                      </button>
+                      <button className="px-3 py-1 bg-secondary text-secondary-foreground rounded text-xs hover:bg-secondary/80 transition-colors">
+                        All Runs
+                      </button>
+                    </div>
+                    <button className="p-1 rounded bg-secondary hover:bg-secondary/80 transition-colors">
+                      <FiColumns className="w-4 h-4" />
                     </button>
                   </div>
-                  <button className="p-1 rounded bg-secondary hover:bg-secondary/80 transition-colors">
-                    <FiColumns className="w-4 h-4" />
-                  </button>
-                </div>
-                <InvocationsTable
-                  invocations={invocations}
-                  currentPage={currentPage}
-                  pageSize={pageSize}
-                  setCurrentPage={setCurrentPage}
-                  producingLmp={lmp}
-                  onSelectTrace={(trace) => {
-                    setSelectedTrace(trace);
-                    setSearchParams({ i: trace.id });
-                  }}
-                  currentlySelectedTrace={selectedTrace}
-                  omitColumns={omitColumns}
-                />
-              </>
-            )}
-            {activeTab === "version_history" && (
-              <VersionHistoryPane versions={versionHistory} />
-            )}
+                  <InvocationsTable
+                    invocations={invocations}
+                    currentPage={currentPage}
+                    pageSize={pageSize}
+                    setCurrentPage={setCurrentPage}
+                    producingLmp={lmp}
+                    onSelectTrace={(trace) => {
+                      setSelectedTrace(trace);
+                      setSearchParams({ i: trace.id });
+                    }}
+                    currentlySelectedTrace={selectedTrace}
+                    omitColumns={omitColumns}
+                  />
+                </>
+              )}
+              {activeTab === "version_history" && (
+                <VersionHistoryPane versions={versionHistory} />
+              )}
+            </div>
           </div>
-        </div>
-      </main>
+        </main>
+      </div>
     </GenericPageLayout>
   );
 }