diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
index 01c5050..24d3d21 100644
--- a/src/components/Sidebar.jsx
+++ b/src/components/Sidebar.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { CircleUserRound, ChevronLeft, ChevronRight, Check, X, Plus } from 'lucide-react';
-import { useSupabaseAuth, useNotes } from '../integrations/supabase';
+import { useSupabaseAuth, useNotes, useTags } from '../integrations/supabase';
 import { useNavigate } from 'react-router-dom';
 import {
   DropdownMenu,
@@ -20,7 +20,7 @@ import { Button } from "@/components/ui/button";
 import { format } from 'date-fns';
 import AddTagModal from './AddTagModal';
 
-const Sidebar = ({ activeFilters, toggleFilter, clearFilters, categories, addNewCategory }) => {
+const Sidebar = ({ activeFilters, toggleFilter, clearFilters, addNewCategory }) => {
   const [isCollapsed, setIsCollapsed] = useState(false);
   const { session, logout } = useSupabaseAuth();
   const navigate = useNavigate();
@@ -28,6 +28,7 @@ const Sidebar = ({ activeFilters, toggleFilter, clearFilters, categories, addNew
   const [isProfileDialogOpen, setIsProfileDialogOpen] = useState(false);
   const [isAddTagModalOpen, setIsAddTagModalOpen] = useState(false);
   const { data: notes, isLoading: notesLoading } = useNotes();
+  const { data: tags, isLoading: tagsLoading } = useTags();
 
   useEffect(() => {
     const handleResize = () => {
@@ -91,27 +92,31 @@ const Sidebar = ({ activeFilters, toggleFilter, clearFilters, categories, addNew
         </button>
       </div>
       <nav className="flex-grow">
-        {categories.map((category) => (
-          <div
-            key={category.name}
-            className="flex items-center mb-2 cursor-pointer hover:bg-gray-800 rounded-md p-2 transition-colors"
-            onClick={() => toggleFilter(category.name)}
-          >
-            {activeFilters.includes(category.name) ? (
-              <Check className={`w-3 h-3 ${category.color} rounded-full mr-3`} />
-            ) : (
-              <div className={`w-2 h-2 rounded-full ${category.color} mr-3`}></div>
-            )}
-            {!isCollapsed && (
-              <>
-                <span className="flex-grow">{category.name}</span>
-                <span className={`${category.color} text-xs px-2 py-1 rounded-full min-w-[24px] flex items-center justify-center`}>
-                  {getCategoryCount(category.name).toString()}
-                </span>
-              </>
-            )}
-          </div>
-        ))}
+        {tagsLoading ? (
+          <div>Loading tags...</div>
+        ) : (
+          tags?.map((tag) => (
+            <div
+              key={tag.tag}
+              className="flex items-center mb-2 cursor-pointer hover:bg-gray-800 rounded-md p-2 transition-colors"
+              onClick={() => toggleFilter(tag.tag)}
+            >
+              {activeFilters.includes(tag.tag) ? (
+                <Check className={`w-3 h-3 ${tag.color} rounded-full mr-3`} />
+              ) : (
+                <div className={`w-2 h-2 rounded-full ${tag.color} mr-3`}></div>
+              )}
+              {!isCollapsed && (
+                <>
+                  <span className="flex-grow">{tag.tag}</span>
+                  <span className={`${tag.color} text-xs px-2 py-1 rounded-full min-w-[24px] flex items-center justify-center`}>
+                    {getCategoryCount(tag.tag).toString()}
+                  </span>
+                </>
+              )}
+            </div>
+          ))
+        )}
         {!isCollapsed && (
           <Button
             variant="ghost"
diff --git a/src/integrations/supabase/hooks/useNotes.js b/src/integrations/supabase/hooks/useNotes.js
index b88c6f2..3b0a4cd 100644
--- a/src/integrations/supabase/hooks/useNotes.js
+++ b/src/integrations/supabase/hooks/useNotes.js
@@ -7,25 +7,6 @@ const fromSupabase = async (query) => {
     return data;
 };
 
-/*
-### notes
-
-| name       | type                     | format | required |
-|------------|--------------------------|--------|----------|
-| id         | integer                  | bigint | true     |
-| created_at | timestamp with time zone | string | true     |
-| title      | text                     | string | false    |
-| content    | text                     | string | false    |
-| color      | text                     | string | false    |
-| tag        | text                     | string | false    |
-
-Note: 
-- 'id' is the Primary Key.
-- 'created_at' has a default value of now().
-- 'color' has a default value of 'pink'.
-- 'tag' has a default value of 'Work'.
-*/
-
 export const useNote = (id) => useQuery({
     queryKey: ['notes', id],
     queryFn: () => fromSupabase(supabase.from('notes').select('*').eq('id', id).single()),
@@ -64,4 +45,9 @@ export const useDeleteNote = () => {
             queryClient.invalidateQueries({ queryKey: ['notes'] });
         },
     });
-};
\ No newline at end of file
+};
+
+export const useTags = () => useQuery({
+    queryKey: ['tags'],
+    queryFn: () => fromSupabase(supabase.from('tags').select('*')),
+});
\ No newline at end of file
diff --git a/src/integrations/supabase/index.js b/src/integrations/supabase/index.js
index 29ae2f6..506a3a7 100644
--- a/src/integrations/supabase/index.js
+++ b/src/integrations/supabase/index.js
@@ -1,6 +1,6 @@
 import { supabase } from './supabase';
 import { SupabaseAuthProvider, useSupabaseAuth, SupabaseAuthUI } from './auth';
-import { useNote, useNotes, useAddNote, useUpdateNote, useDeleteNote } from './hooks/useNotes';
+import { useNote, useNotes, useAddNote, useUpdateNote, useDeleteNote, useTags } from './hooks/useNotes';
 
 export {
   supabase,
@@ -11,5 +11,6 @@ export {
   useNotes,
   useAddNote,
   useUpdateNote,
-  useDeleteNote
+  useDeleteNote,
+  useTags
 };
\ No newline at end of file