diff --git a/src/modules/commands/source.ts b/src/modules/commands/source.ts
index 8aad7e8..412c888 100644
--- a/src/modules/commands/source.ts
+++ b/src/modules/commands/source.ts
@@ -38,12 +38,14 @@ function createSlashCommandSource(options: {
 // Create the extension that uses our custom completion source.
 export function slashCommandAutocompletion(options: { prefix: string, customCommands: SlashCommand[] } = { prefix: '/', customCommands: [] }) {
   return autocompletion({
-    override: [createSlashCommandSource(options)]
+    override: [createSlashCommandSource(options)],
+    tooltipClass: () => "tooltip-autocomplete",
+    optionClass: () => "completion-label",
   })
 }
 
 // Create a decoration for highlighting slash commands
-const slashCommandMark = Decoration.mark({ class: "cm-slashCommand" })
+const slashCommandMark = Decoration.mark({ class: "cm-slash-command" })
 
 export function createSlashCommandHighlighter({ prefix, customCommands }: { prefix: string, customCommands: SlashCommand[] }) {
   return ViewPlugin.fromClass(class {
diff --git a/styles.css b/styles.css
index 3d6d5e6..750953b 100644
--- a/styles.css
+++ b/styles.css
@@ -118,25 +118,34 @@
 	height: 10em;
 }
 
-/* Custom reccomendations */
-.cm-tooltip-autocomplete {
-	background-color: var(--background-secondary) !important;
+.tooltip-autocomplete{
+	background-color: var(--background-primary-alt) !important;
 	color: var(--text-normal) !important;
-	font-size: var(--font-ui-small) !important;	
-}
-
-.cm-tooltip.cm-tooltip-below{
-	top: auto !important;
-	bottom: -2.2rem !important;
+	width: min(102%, var(--line-width)) !important;
+	margin-left: -1.1rem;
+	overflow: hidden;
+	border: 1px solid var(--background-modifier-border) !important;
+	border-radius: 4px;
+	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
 
 }
-.cm-completionLabel{
+
+.completion-label{
 	font-size: var(--font-ui-small);
 	font-weight: var(--font-normal);
+	font-family: var(--font-interface-theme);
+	border-radius: 4px;
+	margin-left: -1em;
+}
+
+.cm-tooltip.cm-tooltip-below {
+	top: 100%;
+	margin-top: 0.8em;   
+	bottom: auto;
 }
 
 /* Slash command highlighting */
-.cm-slashCommand {
+.cm-slash-command {
   color: var(--text-accent);
   
 }
\ No newline at end of file