diff --git a/apps/obsidian/package.json b/apps/obsidian/package.json
index 0620a5dd1..5a3ffc497 100644
--- a/apps/obsidian/package.json
+++ b/apps/obsidian/package.json
@@ -15,18 +15,19 @@
     "@types/node": "^16.11.6",
     "@typescript-eslint/eslint-plugin": "5.29.0",
     "@typescript-eslint/parser": "5.29.0",
+    "autoprefixer": "^10.4.21",
     "builtin-modules": "3.3.0",
     "esbuild": "0.17.3",
     "obsidian": "^1.7.2",
+    "postcss": "^8.5.3",
+    "tailwindcss": "^3.4.17",
     "tslib": "2.4.0",
     "tsx": "^4.19.2",
-    "typescript": "4.7.4",
-    "tailwindcss": "^3.3.0",
-    "postcss": "^8.4.24",
-    "autoprefixer": "^10.4.14"
+    "typescript": "4.7.4"
   },
   "dependencies": {
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "tailwindcss-animate": "^1.0.7"
   }
-}
\ No newline at end of file
+}
diff --git a/apps/obsidian/src/components/DiscourseContextView.tsx b/apps/obsidian/src/components/DiscourseContextView.tsx
index 1ffc0df24..3e4140ab7 100644
--- a/apps/obsidian/src/components/DiscourseContextView.tsx
+++ b/apps/obsidian/src/components/DiscourseContextView.tsx
@@ -51,36 +51,23 @@ const DiscourseContext = ({ activeFile }: DiscourseContextProps) => {
     }
     return (
       <>
-        <div style={{ marginBottom: "1.5rem" }}>
-          <div
-            style={{
-              fontSize: "1.2em",
-              fontWeight: "bold",
-              marginBottom: "8px",
-            }}
-          >
+        <div className="mb-6">
+          <div className="text-md mb-2 font-bold">
             {nodeType.name || "Unnamed Node Type"}
           </div>
 
           {nodeType.format && (
-            <div style={{ marginBottom: "4px" }}>
-              <span style={{ fontWeight: "bold" }}>Content: </span>
+            <div className="mb-1">
+              <span className="font-bold">Content: </span>
               {extractContentFromTitle(nodeType.format, activeFile.basename)}
             </div>
           )}
         </div>
 
-        <div className="relationships-section">
-          <h5
-            style={{
-              marginTop: "1rem",
-              marginBottom: "0.75rem",
-              borderBottom: "1px solid var(--background-modifier-border)",
-              paddingBottom: "0.25rem",
-            }}
-          >
+        <div>
+          <h4 className="border-modifier-border mb-3 mt-4 border-b pb-1">
             Relationships
-          </h5>
+          </h4>
           <RelationshipSection key={activeFile.path} activeFile={activeFile} />
         </div>
       </>
@@ -89,7 +76,7 @@ const DiscourseContext = ({ activeFile }: DiscourseContextProps) => {
 
   return (
     <div>
-      <h4 style={{ marginTop: 0 }}>Discourse Context</h4>
+      <h3>Discourse Context</h3>
       {renderContent()}
     </div>
   );
diff --git a/apps/obsidian/src/components/DropdownSelect.tsx b/apps/obsidian/src/components/DropdownSelect.tsx
index f8d0de40f..e5d870576 100644
--- a/apps/obsidian/src/components/DropdownSelect.tsx
+++ b/apps/obsidian/src/components/DropdownSelect.tsx
@@ -70,16 +70,7 @@ const DropdownSelect = <T,>({
     };
   }, []);
 
-  return (
-    <div
-      ref={containerRef}
-      className="dropdown-select"
-      style={{
-        width: "100%",
-        position: "relative",
-      }}
-    />
-  );
+  return <div ref={containerRef} className="dropdown-select relative w-full" />;
 };
 
 export default DropdownSelect;
diff --git a/apps/obsidian/src/components/NodeTypeSettings.tsx b/apps/obsidian/src/components/NodeTypeSettings.tsx
index c81c967c1..d3190e490 100644
--- a/apps/obsidian/src/components/NodeTypeSettings.tsx
+++ b/apps/obsidian/src/components/NodeTypeSettings.tsx
@@ -131,10 +131,8 @@ const NodeTypeSettings = () => {
       <h3>Node Types</h3>
       {nodeTypes.map((nodeType, index) => (
         <div key={index} className="setting-item">
-          <div
-            style={{ display: "flex", flexDirection: "column", width: "100%" }}
-          >
-            <div style={{ display: "flex", gap: "10px" }}>
+          <div className="flex w-full flex-col">
+            <div className="flex gap-2">
               <input
                 type="text"
                 placeholder="Name"
@@ -142,7 +140,7 @@ const NodeTypeSettings = () => {
                 onChange={(e) =>
                   handleNodeTypeChange(index, "name", e.target.value)
                 }
-                style={{ flex: 1 }}
+                className="flex-2"
               />
               <input
                 type="text"
@@ -151,23 +149,17 @@ const NodeTypeSettings = () => {
                 onChange={(e) =>
                   handleNodeTypeChange(index, "format", e.target.value)
                 }
-                style={{ flex: 2 }}
+                className="flex-1"
               />
               <button
                 onClick={() => confirmDeleteNodeType(index)}
-                className="mod-warning"
+                className="mod-warning p-2"
               >
                 Delete
               </button>
             </div>
             {formatErrors[index] && (
-              <div
-                style={{
-                  color: "var(--text-error)",
-                  fontSize: "12px",
-                  marginTop: "4px",
-                }}
-              >
+              <div className="text-error mt-1 text-xs">
                 {formatErrors[index]}
               </div>
             )}
@@ -175,11 +167,13 @@ const NodeTypeSettings = () => {
         </div>
       ))}
       <div className="setting-item">
-        <div style={{ display: "flex", gap: "10px" }}>
-          <button onClick={handleAddNodeType}>Add Node Type</button>
+        <div className="flex gap-2">
+          <button onClick={handleAddNodeType} className="p-2">
+            Add Node Type
+          </button>
           <button
             onClick={handleSave}
-            className={hasUnsavedChanges ? "mod-cta" : ""}
+            className={`p-2 ${hasUnsavedChanges ? "mod-cta" : ""}`}
             disabled={
               !hasUnsavedChanges || Object.keys(formatErrors).length > 0
             }
@@ -189,9 +183,7 @@ const NodeTypeSettings = () => {
         </div>
       </div>
       {hasUnsavedChanges && (
-        <div style={{ marginTop: "8px", color: "var(--text-muted)" }}>
-          You have unsaved changes
-        </div>
+        <div className="text-muted mt-2">You have unsaved changes</div>
       )}
     </div>
   );
diff --git a/apps/obsidian/src/components/RelationshipSection.tsx b/apps/obsidian/src/components/RelationshipSection.tsx
index 11a392ef1..bb71bc8a3 100644
--- a/apps/obsidian/src/components/RelationshipSection.tsx
+++ b/apps/obsidian/src/components/RelationshipSection.tsx
@@ -246,17 +246,7 @@ const AddRelationship = ({ activeFile }: RelationshipSectionProps) => {
   if (!isAddingRelation) {
     return (
       <button
-        className="add-relation-button"
-        style={{
-          width: "100%",
-          padding: "8px 12px",
-          backgroundColor: "var(--interactive-accent)",
-          color: "var(--text-on-accent)",
-          border: "none",
-          borderRadius: "4px",
-          cursor: "pointer",
-          marginTop: "1rem",
-        }}
+        className="!bg-accent !text-on-accent mt-4 w-full cursor-pointer rounded border-0 px-3 py-2"
         onClick={() => setIsAddingRelation(true)}
       >
         Add a new relation
@@ -266,13 +256,8 @@ const AddRelationship = ({ activeFile }: RelationshipSectionProps) => {
 
   return (
     <div className="relationship-manager">
-      <div
-        className="relationship-type-selector"
-        style={{ marginBottom: "1rem" }}
-      >
-        <label style={{ display: "block", marginBottom: "0.5rem" }}>
-          Relationship Type:
-        </label>
+      <div className="relationship-type-selector mb-4">
+        <label className="mb-2 block">Relationship Type:</label>
         <DropdownSelect<RelationTypeOption>
           options={availableRelationTypes}
           onSelect={(option) => option && setSelectedRelationType(option.id)}
@@ -282,32 +267,15 @@ const AddRelationship = ({ activeFile }: RelationshipSectionProps) => {
       </div>
 
       {compatibleNodeTypes.length > 0 && (
-        <div style={{ marginBottom: "0.75rem" }}>
-          <div
-            style={{
-              fontSize: "0.85rem",
-              color: "var(--text-muted)",
-              background: "var(--background-secondary)",
-              padding: "0.5rem",
-              borderRadius: "4px",
-              display: "flex",
-              alignItems: "center",
-            }}
-          >
-            <span style={{ marginRight: "0.5rem" }}>💡</span>
+        <div className="mb-3">
+          <div className="text-muted flex items-center gap-2 rounded bg-secondary p-2 text-sm">
+            <span className="mr-2">💡</span>
             <span>
               You can link with:{" "}
               {compatibleNodeTypes.map((type) => (
                 <span
                   key={type.id}
-                  style={{
-                    background: "var(--background-modifier-border)",
-                    padding: "0.15rem 0.4rem",
-                    borderRadius: "4px",
-                    marginRight: "0.25rem",
-                    fontSize: "0.8rem",
-                    display: "inline-block",
-                  }}
+                  className="bg-modifier-border mr-1 rounded px-2 py-1 text-sm"
                 >
                   {type.name}
                 </span>
@@ -317,10 +285,8 @@ const AddRelationship = ({ activeFile }: RelationshipSectionProps) => {
         </div>
       )}
 
-      <div style={{ marginBottom: "1rem" }}>
-        <label style={{ display: "block", marginBottom: "0.5rem" }}>
-          Node to link with:
-        </label>
+      <div className="mb-4">
+        <label className="mb-2 block">Node to link with:</label>
         <SearchBar<TFile>
           asyncSearch={searchNodes}
           onSelect={setSelectedNode}
@@ -334,50 +300,27 @@ const AddRelationship = ({ activeFile }: RelationshipSectionProps) => {
           disabled={!selectedRelationType}
         />
         {searchError && (
-          <div
-            style={{
-              color: "var(--text-error)",
-              fontSize: "12px",
-              marginTop: "4px",
-            }}
-          >
+          <div className="text-error mt-2 text-sm">
             Search error: {searchError}
           </div>
         )}
       </div>
 
-      <div className="buttons" style={{ display: "flex", gap: "8px" }}>
+      <div className="flex gap-2">
         <button
           disabled={!selectedNode || !selectedRelationType}
-          style={{
-            flex: 1,
-            padding: "8px 12px",
-            backgroundColor:
-              selectedNode && selectedRelationType
-                ? "var(--interactive-accent)"
-                : "var(--background-modifier-border)",
-            color:
-              selectedNode && selectedRelationType
-                ? "var(--text-on-accent)"
-                : "var(--text-normal)",
-            border: "none",
-            borderRadius: "4px",
-            cursor:
-              selectedNode && selectedRelationType ? "pointer" : "not-allowed",
-          }}
+          className={`flex-1 rounded border-0 px-3 py-2 ${
+            selectedNode && selectedRelationType
+              ? "!bg-accent !text-on-accent cursor-pointer"
+              : "!bg-modifier-border !text-normal cursor-not-allowed"
+          }`}
           onClick={addRelationship}
         >
           Confirm
         </button>
 
         <button
-          style={{
-            padding: "8px 12px",
-            backgroundColor: "var(--background-modifier-border)",
-            border: "none",
-            borderRadius: "4px",
-            cursor: "pointer",
-          }}
+          className="!bg-modifier-border !text-normal cursor-pointer rounded border-0 px-3 py-2"
           onClick={resetState}
         >
           Cancel
@@ -392,9 +335,7 @@ type GroupedRelation = {
   linkedFiles: TFile[];
 };
 
-const CurrentRelationships = ({
-  activeFile,
-}: RelationshipSectionProps) => {
+const CurrentRelationships = ({ activeFile }: RelationshipSectionProps) => {
   const plugin = usePlugin();
   const [groupedRelationships, setGroupedRelationships] = useState<
     GroupedRelation[]
@@ -491,60 +432,27 @@ const CurrentRelationships = ({
   if (groupedRelationships.length === 0) return null;
 
   return (
-    <div className="current-relationships" style={{ marginBottom: "1.5rem" }}>
-      <h4 style={{ marginBottom: "0.5rem", fontSize: "1rem" }}>
-        Current Relationships
-      </h4>
-      <ul
-        style={{
-          listStyle: "none",
-          padding: 0,
-          margin: 0,
-          borderRadius: "4px",
-          border: "1px solid var(--background-modifier-border)",
-        }}
-      >
+    <div className="current-relationships mb-6">
+      <h4 className="mb-2 text-base font-medium">Current Relationships</h4>
+      <ul className="border-modifier-border m-0 list-none rounded border p-0">
         {groupedRelationships.map((group) => (
           <li
             key={`${group.relationTypeOptions.id}-${group.relationTypeOptions.isSource}`}
-            style={{
-              padding: "8px 12px",
-              borderBottom: "1px solid var(--background-modifier-border)",
-            }}
+            className="border-modifier-border border-b px-3 py-2"
           >
-            <div
-              style={{
-                display: "flex",
-                alignItems: "center",
-                marginBottom: "4px",
-              }}
-            >
-              <div style={{ marginRight: "8px" }}>
+            <div className="mb-1 flex items-center">
+              <div className="mr-2">
                 {group.relationTypeOptions.isSource ? "→" : "←"}
               </div>
-              <div style={{ fontWeight: "bold" }}>
-                {group.relationTypeOptions.label}
-              </div>
+              <div className="font-bold">{group.relationTypeOptions.label}</div>
             </div>
 
-            <ul
-              style={{
-                listStyle: "none",
-                padding: 0,
-                margin: 0,
-                marginLeft: "24px",
-              }}
-            >
+            <ul className="m-0 ml-6 list-none p-0">
               {group.linkedFiles.map((file) => (
-                <li
-                  key={file.path}
-                  style={{
-                    marginTop: "4px",
-                  }}
-                >
+                <li key={file.path} className="mt-1">
                   <a
                     href="#"
-                    className="internal-link"
+                    className="text-accent-text"
                     onClick={(e) => {
                       e.preventDefault();
                       plugin.app.workspace.openLinkText(
@@ -552,9 +460,6 @@ const CurrentRelationships = ({
                         activeFile.path,
                       );
                     }}
-                    style={{
-                      color: "var(--text-accent)",
-                    }}
                   >
                     {file.basename}
                   </a>
diff --git a/apps/obsidian/src/components/RelationshipSettings.tsx b/apps/obsidian/src/components/RelationshipSettings.tsx
index 12a507371..e56de238e 100644
--- a/apps/obsidian/src/components/RelationshipSettings.tsx
+++ b/apps/obsidian/src/components/RelationshipSettings.tsx
@@ -135,20 +135,14 @@ const RelationshipSettings = () => {
         <>
           {discourseRelations.map((relation, index) => (
             <div key={index} className="setting-item">
-              <div
-                style={{
-                  display: "flex",
-                  flexDirection: "column",
-                  width: "100%",
-                }}
-              >
-                <div style={{ display: "flex", gap: "10px" }}>
+              <div className="flex w-full flex-col">
+                <div className="flex gap-2">
                   <select
                     value={relation.sourceId}
                     onChange={(e) =>
                       handleRelationChange(index, "sourceId", e.target.value)
                     }
-                    style={{ flex: 1 }}
+                    className="flex-1 pl-2"
                   >
                     <option value="">Source Node Type</option>
                     {plugin.settings.nodeTypes.map((nodeType) => (
@@ -167,7 +161,7 @@ const RelationshipSettings = () => {
                         e.target.value,
                       )
                     }
-                    style={{ flex: 1 }}
+                    className="flex-1 pl-2"
                   >
                     <option value="">Relation Type</option>
                     {plugin.settings.relationTypes.map((relType) => (
@@ -186,7 +180,7 @@ const RelationshipSettings = () => {
                         e.target.value,
                       )
                     }
-                    style={{ flex: 1 }}
+                    className="flex-1 pl-2"
                   >
                     <option value="">Target Node Type</option>
                     {plugin.settings.nodeTypes.map((nodeType) => (
@@ -198,7 +192,7 @@ const RelationshipSettings = () => {
 
                   <button
                     onClick={() => confirmDeleteRelation(index)}
-                    className="mod-warning"
+                    className="mod-warning p-2"
                   >
                     Delete
                   </button>
@@ -207,70 +201,31 @@ const RelationshipSettings = () => {
                 {relation.sourceId &&
                   relation.relationshipTypeId &&
                   relation.destinationId && (
-                    <div
-                      style={{
-                        marginTop: "8px",
-                        color: "var(--text-normal)",
-                        padding: "8px",
-                      }}
-                      className="relationship-visualization"
-                    >
-                      <div
-                        style={{
-                          display: "flex",
-                          alignItems: "center",
-                          justifyContent: "space-between",
-                        }}
-                      >
-                        <div>
+                    <div className="text-normal mt-2 p-2">
+                      <div className="flex items-center justify-between">
+                        <div className="flex-1">
                           {findNodeById(relation.sourceId)?.name ||
                             "Unknown Node"}
                         </div>
 
-                        <div
-                          style={{
-                            display: "flex",
-                            flexDirection: "column",
-                            alignItems: "center",
-                            padding: "0 12px",
-                          }}
-                        >
-                          <div
-                            style={{ display: "flex", alignItems: "center" }}
-                          >
-                            <div
-                              style={{
-                                fontSize: "0.85em",
-                                color: "var(--text-accent)",
-                              }}
-                            >
+                        <div className="flex flex-1 flex-col items-center gap-2 px-4">
+                          <div className="flex items-center">
+                            <div className="text-accent-text text-sm">
                               {findRelationTypeById(relation.relationshipTypeId)
                                 ?.label || "Unknown Relation"}
                             </div>
-                            <div
-                              style={{
-                                margin: "0 4px",
-                                color: "var(--text-accent)",
-                              }}
-                            >
-                              →
-                            </div>
+                            <div className="text-accent-text mx-1">→</div>
                           </div>
-                          <div
-                            style={{
-                              fontSize: "0.85em",
-                              color: "var(--text-muted)",
-                            }}
-                          >
+                          <div className="text-muted text-sm">
                             ←{" "}
-                            <span style={{ color: "var(--text-accent)" }}>
+                            <span className="text-accent-text">
                               {findRelationTypeById(relation.relationshipTypeId)
                                 ?.complement || "Unknown Complement"}
                             </span>
                           </div>
                         </div>
 
-                        <div>
+                        <div className="flex-1 text-right">
                           {findNodeById(relation.destinationId)?.name ||
                             "Unknown Node"}
                         </div>
@@ -281,11 +236,13 @@ const RelationshipSettings = () => {
             </div>
           ))}
           <div className="setting-item">
-            <div style={{ display: "flex", gap: "10px" }}>
-              <button onClick={handleAddRelation}>Add Relation</button>
+            <div className="flex gap-2">
+              <button onClick={handleAddRelation} className="p-2">
+                Add Relation
+              </button>
               <button
                 onClick={handleSave}
-                className={hasUnsavedChanges ? "mod-cta" : ""}
+                className={`p-2 ${hasUnsavedChanges ? "mod-cta" : ""}`}
                 disabled={!hasUnsavedChanges}
               >
                 Save Changes
@@ -293,9 +250,7 @@ const RelationshipSettings = () => {
             </div>
           </div>
           {hasUnsavedChanges && (
-            <div style={{ marginTop: "8px", color: "var(--text-muted)" }}>
-              You have unsaved changes
-            </div>
+            <div className="text-muted mt-2">You have unsaved changes</div>
           )}
         </>
       )}
diff --git a/apps/obsidian/src/components/RelationshipTypeSettings.tsx b/apps/obsidian/src/components/RelationshipTypeSettings.tsx
index 7b71ffb5b..887670bba 100644
--- a/apps/obsidian/src/components/RelationshipTypeSettings.tsx
+++ b/apps/obsidian/src/components/RelationshipTypeSettings.tsx
@@ -106,10 +106,8 @@ const RelationshipTypeSettings = () => {
       <h3>Relation Types</h3>
       {relationTypes.map((relationType, index) => (
         <div key={index} className="setting-item">
-          <div
-            style={{ display: "flex", flexDirection: "column", width: "100%" }}
-          >
-            <div style={{ display: "flex", gap: "10px" }}>
+          <div className="flex w-full flex-col">
+            <div className="flex gap-2">
               <input
                 type="text"
                 placeholder="Label (e.g., supports)"
@@ -117,7 +115,7 @@ const RelationshipTypeSettings = () => {
                 onChange={(e) =>
                   handleRelationTypeChange(index, "label", e.target.value)
                 }
-                style={{ flex: 1 }}
+                className="flex-2"
               />
               <input
                 type="text"
@@ -126,11 +124,11 @@ const RelationshipTypeSettings = () => {
                 onChange={(e) =>
                   handleRelationTypeChange(index, "complement", e.target.value)
                 }
-                style={{ flex: 2 }}
+                className="flex-1"
               />
               <button
                 onClick={() => confirmDeleteRelationType(index)}
-                className="mod-warning"
+                className="mod-warning p-2"
               >
                 Delete
               </button>
@@ -139,11 +137,13 @@ const RelationshipTypeSettings = () => {
         </div>
       ))}
       <div className="setting-item">
-        <div style={{ display: "flex", gap: "10px" }}>
-          <button onClick={handleAddRelationType}>Add Relation Type</button>
+        <div className="flex gap-2">
+          <button onClick={handleAddRelationType} className="p-2">
+            Add Relation Type
+          </button>
           <button
             onClick={handleSave}
-            className={hasUnsavedChanges ? "mod-cta" : ""}
+            className={`p-2 ${hasUnsavedChanges ? "mod-cta" : ""}`}
             disabled={!hasUnsavedChanges}
           >
             Save Changes
@@ -151,9 +151,7 @@ const RelationshipTypeSettings = () => {
         </div>
       </div>
       {hasUnsavedChanges && (
-        <div style={{ marginTop: "8px", color: "var(--text-muted)" }}>
-          You have unsaved changes
-        </div>
+        <div className="text-muted mt-2">You have unsaved changes</div>
       )}
     </div>
   );
diff --git a/apps/obsidian/src/components/SearchBar.tsx b/apps/obsidian/src/components/SearchBar.tsx
index 258b86787..32532fd10 100644
--- a/apps/obsidian/src/components/SearchBar.tsx
+++ b/apps/obsidian/src/components/SearchBar.tsx
@@ -115,42 +115,23 @@ const SearchBar = <T,>({
   }, [onSelect]);
 
   return (
-    <div style={{ position: "relative" }}>
+    <div className="relative">
       <input
         ref={inputRef}
         type="text"
         placeholder={placeholder || "Search..."}
-        style={{
-          width: "100%",
-          padding: "8px",
-          paddingRight: selected ? "36px" : "8px",
-          border: "1px solid var(--background-modifier-border)",
-          borderRadius: "4px",
-          backgroundColor:
-            selected || disabled
-              ? "var(--background-secondary)"
-              : "var(--background-primary)",
-          cursor: disabled ? "not-allowed" : "text",
-          opacity: disabled ? 0.7 : 1,
-        }}
+        className={`w-full p-2 ${
+          selected ? "pr-9" : ""
+        } border-modifier-border rounded border bg-${
+          selected || disabled ? "secondary" : "primary"
+        } ${disabled ? "cursor-not-allowed opacity-70" : "cursor-text"}`}
         readOnly={!!selected || disabled}
         disabled={disabled}
       />
       {selected && !disabled && (
         <button
           onClick={clearSelection}
-          style={{
-            position: "absolute",
-            right: "4px",
-            top: "50%",
-            transform: "translateY(-50%)",
-            background: "none",
-            border: "none",
-            color: "var(--text-muted)",
-            cursor: "pointer",
-            padding: "4px",
-            borderRadius: "4px",
-          }}
+          className="text-muted absolute right-1 top-1/2 -translate-y-1/2 cursor-pointer rounded border-0 bg-transparent p-1"
           aria-label="Clear selection"
         >
           ✕
diff --git a/apps/obsidian/src/components/Settings.tsx b/apps/obsidian/src/components/Settings.tsx
index 715425fdb..225fb0f62 100644
--- a/apps/obsidian/src/components/Settings.tsx
+++ b/apps/obsidian/src/components/Settings.tsx
@@ -12,72 +12,37 @@ const Settings = () => {
   const [activeTab, setActiveTab] = useState("nodeTypes");
 
   return (
-    <div>
+    <div className="flex flex-col gap-2">
       <h2>Discourse Graph Settings</h2>
 
-      <div
-        className="discourse-tabs"
-        style={{
-          marginBottom: "20px",
-          borderBottom: "1px solid var(--background-modifier-border)",
-        }}
-      >
+      <div className="border-modifier-border mb-5 border-b p-2">
         <button
           onClick={() => setActiveTab("nodeTypes")}
-          className={`discourse-tab ${activeTab === "nodeTypes" ? "active" : ""}`}
-          style={{
-            padding: "8px 16px",
-            background:
-              activeTab === "nodeTypes"
-                ? "var(--background-modifier-hover)"
-                : "transparent",
-            border: "none",
-            borderBottom:
-              activeTab === "nodeTypes"
-                ? "2px solid var(--interactive-accent)"
-                : "none",
-            marginRight: "8px",
-            cursor: "pointer",
-          }}
+          className={`discourse-tab mr-2 cursor-pointer border-0 px-4 py-2 ${
+            activeTab === "nodeTypes"
+              ? "!bg-modifier-hover accent-border-bottom"
+              : "!bg-transparent"
+          }`}
         >
           Node Types
         </button>
         <button
           onClick={() => setActiveTab("relationTypes")}
-          className={`discourse-tab ${activeTab === "relationTypes" ? "active" : ""}`}
-          style={{
-            padding: "8px 16px",
-            background:
-              activeTab === "relationTypes"
-                ? "var(--background-modifier-hover)"
-                : "transparent",
-            border: "none",
-            borderBottom:
-              activeTab === "relationTypes"
-                ? "2px solid var(--interactive-accent)"
-                : "none",
-            marginRight: "8px",
-            cursor: "pointer",
-          }}
+          className={`mr-2 cursor-pointer px-4 py-2 ${
+            activeTab === "relationTypes"
+              ? "!bg-modifier-hover accent-border-bottom"
+              : "!bg-transparent"
+          }`}
         >
           Relation Types
         </button>
         <button
           onClick={() => setActiveTab("relations")}
-          className={`discourse-tab ${activeTab === "relations" ? "active" : ""}`}
-          style={{
-            padding: "8px 16px",
-            background:
-              activeTab === "relations"
-                ? "var(--background-modifier-hover)"
-                : "transparent",
-            border: "none",
-            borderBottom:
-              activeTab === "relations"
-                ? "2px solid var(--interactive-accent)"
-                : "none",
-            cursor: "pointer",
-          }}
+          className={`cursor-pointer px-4 py-2 ${
+            activeTab === "relations"
+              ? "!bg-modifier-hover accent-border-bottom"
+              : "!bg-transparent"
+          }`}
         >
           Discourse Relations
         </button>
diff --git a/apps/obsidian/styles.css b/apps/obsidian/styles.css
index 9751d9a61..05a488088 100644
--- a/apps/obsidian/styles.css
+++ b/apps/obsidian/styles.css
@@ -2,11 +2,21 @@
 @tailwind components;
 @tailwind utilities;
 
-.discourse-relations .relationship-visualization {
-  transition: all 0.2s ease;
-}
 
-.discourse-relations .relationship-visualization:hover {
-  background: var(--background-modifier-hover);
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+@layer base {
+  h1 {
+    @apply text-3xl font-bold mb-4;
+  }
+  h2 {
+    @apply text-2xl font-bold mb-3;
+  }
+  h3 {
+    @apply text-xl font-semibold mb-2;
+  }
+  h4 {
+    @apply text-lg font-bold mb-2;
+  }
 }
+.accent-border-bottom {
+  border-bottom: 2px solid var(--interactive-accent) !important;
+}
\ No newline at end of file
diff --git a/apps/obsidian/tailwind.config.ts b/apps/obsidian/tailwind.config.ts
index bed0cbe02..de3ede3c4 100644
--- a/apps/obsidian/tailwind.config.ts
+++ b/apps/obsidian/tailwind.config.ts
@@ -1,7 +1,40 @@
 import type { Config } from "tailwindcss";
 
-const config: Pick<Config, "content" | "presets"> = {
+const config: Pick<Config, "content" | "theme" | "plugins"> = {
   content: ["./src/**/*.{js,jsx,ts,tsx}"],
+  theme: {
+    extend: {
+      // Map Obsidian CSS variables to Tailwind classes
+      colors: {
+        // Background colors
+        primary: "var(--background-primary)",
+        secondary: "var(--background-secondary)",
+        tertiary: "var(--background-tertiary)",
+
+        // Text colors
+        normal: "var(--text-normal)",
+        muted: "var(--text-muted)",
+        "accent-text": "var(--text-accent)",
+        error: "var(--text-error)",
+        "on-accent": "var(--text-on-accent)",
+
+        // Interactive elements
+        accent: {
+          DEFAULT: "var(--interactive-accent)",
+          hover: "var(--interactive-accent-hover)",
+        },
+
+        // Modifiers
+        "modifier-border": "var(--background-modifier-border)",
+        "modifier-form-field": "var(--background-modifier-form-field)",
+        "modifier-error": "var(--background-modifier-error)",
+        "modifier-hover": "var(--background-modifier-hover)",
+      },
+      borderColor: {
+        DEFAULT: "var(--background-modifier-border)",
+      },
+    },
+  },
 };
 
 export default config;
diff --git a/package-lock.json b/package-lock.json
index 1c1309a65..be1978d34 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,18 +28,19 @@
       "license": "MIT",
       "dependencies": {
         "react": "^19.0.0",
-        "react-dom": "^19.0.0"
+        "react-dom": "^19.0.0",
+        "tailwindcss-animate": "^1.0.7"
       },
       "devDependencies": {
         "@types/node": "^16.11.6",
         "@typescript-eslint/eslint-plugin": "5.29.0",
         "@typescript-eslint/parser": "5.29.0",
-        "autoprefixer": "^10.4.14",
+        "autoprefixer": "^10.4.21",
         "builtin-modules": "3.3.0",
         "esbuild": "0.17.3",
         "obsidian": "^1.7.2",
-        "postcss": "^8.4.24",
-        "tailwindcss": "^3.3.0",
+        "postcss": "^8.5.3",
+        "tailwindcss": "^3.4.17",
         "tslib": "2.4.0",
         "tsx": "^4.19.2",
         "typescript": "4.7.4"
@@ -10270,9 +10271,9 @@
       }
     },
     "node_modules/autoprefixer": {
-      "version": "10.4.20",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz",
-      "integrity": "sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==",
+      "version": "10.4.21",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz",
+      "integrity": "sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==",
       "dev": true,
       "funding": [
         {
@@ -10288,13 +10289,12 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
-      "license": "MIT",
       "dependencies": {
-        "browserslist": "^4.23.3",
-        "caniuse-lite": "^1.0.30001646",
+        "browserslist": "^4.24.4",
+        "caniuse-lite": "^1.0.30001702",
         "fraction.js": "^4.3.7",
         "normalize-range": "^0.1.2",
-        "picocolors": "^1.0.1",
+        "picocolors": "^1.1.1",
         "postcss-value-parser": "^4.2.0"
       },
       "bin": {
@@ -10439,9 +10439,9 @@
       }
     },
     "node_modules/browserslist": {
-      "version": "4.24.2",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.2.tgz",
-      "integrity": "sha512-ZIc+Q62revdMcqC6aChtW4jz3My3klmCO1fEmINZY/8J3EpBg5/A/D0AKmBveUh6pgoeycoMkVMko84tuYS+Gg==",
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.4.tgz",
+      "integrity": "sha512-KDi1Ny1gSePi1vm0q4oxSF8b4DR44GF4BbmS2YdhPLOEqd8pDviZOGH/GsmRwoWJ2+5Lr085X7naowMwKHDG1A==",
       "dev": true,
       "funding": [
         {
@@ -10457,11 +10457,10 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
-      "license": "MIT",
       "dependencies": {
-        "caniuse-lite": "^1.0.30001669",
-        "electron-to-chromium": "^1.5.41",
-        "node-releases": "^2.0.18",
+        "caniuse-lite": "^1.0.30001688",
+        "electron-to-chromium": "^1.5.73",
+        "node-releases": "^2.0.19",
         "update-browserslist-db": "^1.1.1"
       },
       "bin": {
@@ -10590,9 +10589,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001680",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001680.tgz",
-      "integrity": "sha512-rPQy70G6AGUMnbwS1z6Xg+RkHYPAi18ihs47GH0jcxIG7wArmPgY3XbS2sRdBbxJljp3thdT8BIqv9ccCypiPA==",
+      "version": "1.0.30001713",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001713.tgz",
+      "integrity": "sha512-wCIWIg+A4Xr7NfhTuHdX+/FKh3+Op3LBbSp2N5Pfx6T/LhdQy3GTyoTg48BReaW/MyMNZAkTadsBtai3ldWK0Q==",
       "funding": [
         {
           "type": "opencollective",
@@ -10606,8 +10605,7 @@
           "type": "github",
           "url": "https://github.com/sponsors/ai"
         }
-      ],
-      "license": "CC-BY-4.0"
+      ]
     },
     "node_modules/ccount": {
       "version": "2.0.1",
@@ -11474,11 +11472,10 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.63",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.63.tgz",
-      "integrity": "sha512-ddeXKuY9BHo/mw145axlyWjlJ1UBt4WK3AlvkT7W2AbqfRQoacVoRUCF6wL3uIx/8wT9oLKXzI+rFqHHscByaA==",
-      "dev": true,
-      "license": "ISC"
+      "version": "1.5.137",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.137.tgz",
+      "integrity": "sha512-/QSJaU2JyIuTbbABAo/crOs+SuAZLS+fVVS10PVrIT9hrRkmZl8Hb0xPSkKRUUWHQtYzXHpQUW3Dy5hwMzGZkA==",
+      "dev": true
     },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
@@ -15906,16 +15903,15 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
-      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
       "funding": [
         {
           "type": "github",
           "url": "https://github.com/sponsors/ai"
         }
       ],
-      "license": "MIT",
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
@@ -16204,11 +16200,10 @@
       "license": "0BSD"
     },
     "node_modules/node-releases": {
-      "version": "2.0.18",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz",
-      "integrity": "sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==",
-      "dev": true,
-      "license": "MIT"
+      "version": "2.0.19",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
+      "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==",
+      "dev": true
     },
     "node_modules/nopt": {
       "version": "7.2.1",
@@ -16893,9 +16888,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.49",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz",
-      "integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==",
+      "version": "8.5.3",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
+      "integrity": "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==",
       "funding": [
         {
           "type": "opencollective",
@@ -16910,9 +16905,8 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
-      "license": "MIT",
       "dependencies": {
-        "nanoid": "^3.3.7",
+        "nanoid": "^3.3.8",
         "picocolors": "^1.1.1",
         "source-map-js": "^1.2.1"
       },
@@ -18731,10 +18725,9 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "3.4.16",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.16.tgz",
-      "integrity": "sha512-TI4Cyx7gDiZ6r44ewaJmt0o6BrMCT5aK5e0rmJ/G9Xq3w7CX/5VXl/zIPEJZFUK5VEqwByyhqNPycPlvcK4ZNw==",
-      "license": "MIT",
+      "version": "3.4.17",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
+      "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
@@ -18771,7 +18764,6 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz",
       "integrity": "sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==",
-      "license": "MIT",
       "peerDependencies": {
         "tailwindcss": ">=3.0.0 || insiders"
       }
@@ -20000,4 +19992,4 @@
       "license": "MIT"
     }
   }
-}
\ No newline at end of file
+}