diff --git a/static/css/rooms.css b/static/css/rooms.css
new file mode 100644
index 0000000..0519ecb
--- /dev/null
+++ b/static/css/rooms.css
@@ -0,0 +1 @@
+ 
\ No newline at end of file
diff --git a/static/css/starred.css b/static/css/starred.css
new file mode 100644
index 0000000..16af55d
--- /dev/null
+++ b/static/css/starred.css
@@ -0,0 +1,11 @@
+.btn-group .btn.active {
+    background-color: #e6f3f4 !important;
+    border-color: #16767b !important;
+    color: #16767b !important;
+}
+
+.btn-group .btn:not(.active) {
+    background-color: #fff !important;
+    border-color: #e9ecef !important;
+    color: #6c757d !important;
+} 
\ No newline at end of file
diff --git a/static/js/starred.js b/static/js/starred.js
new file mode 100644
index 0000000..1d25adc
--- /dev/null
+++ b/static/js/starred.js
@@ -0,0 +1,58 @@
+let currentView = 'grid';
+
+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize view
+    initializeView();
+});
+
+async function initializeView() {
+    try {
+        const response = await fetch('/api/user/preferred_view');
+        const data = await response.json();
+        currentView = data.preferred_view || 'grid';
+        toggleView(currentView);
+    } catch (error) {
+        console.error('Error fetching preferred view:', error);
+        currentView = 'grid';
+        toggleView(currentView);
+    }
+}
+
+function toggleView(view) {
+    currentView = view;
+    const grid = document.getElementById('fileGrid');
+    const gridBtn = document.getElementById('gridViewBtn');
+    const listBtn = document.getElementById('listViewBtn');
+    
+    // Reset both buttons first
+    gridBtn.classList.remove('active');
+    listBtn.classList.remove('active');
+    
+    if (view === 'grid') {
+        grid.classList.remove('list-view');
+        gridBtn.classList.add('active');
+    } else {
+        grid.classList.add('list-view');
+        listBtn.classList.add('active');
+    }
+    
+    // Save the new preference
+    fetch('/api/user/preferred_view', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'X-CSRFToken': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
+        },
+        body: JSON.stringify({ preferred_view: view })
+    })
+    .then(response => {
+        if (!response.ok) {
+            throw new Error('Network response was not ok');
+        }
+        return response.json();
+    })
+    .then(data => {
+        console.log('Preferred view saved:', data);
+    })
+    .catch(error => console.error('Error saving preferred view:', error));
+} 
\ No newline at end of file
diff --git a/templates/rooms/rooms.html b/templates/rooms/rooms.html
index 0ce5017..327736f 100644
--- a/templates/rooms/rooms.html
+++ b/templates/rooms/rooms.html
@@ -3,6 +3,10 @@
 
 {% block title %}Rooms - DocuPulse{% endblock %}
 
+{% block extra_css %}
+<link rel="stylesheet" href="{{ url_for('static', filename='css/rooms.css') }}">
+{% endblock %}
+
 {% block content %}
 {{ header(
     title="Rooms",
@@ -128,42 +132,6 @@
     </div>
 </div>
 
-<style>
-.hover-shadow {
-    transition: all 0.3s ease;
-}
-
-.hover-shadow:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
-}
-
-.card {
-    border: none;
-    border-radius: 10px;
-}
-
-.card-footer {
-    padding: 1rem;
-}
-
-.btn {
-    border-radius: 5px;
-    font-weight: 500;
-    padding: 0.5rem 1rem;
-    transition: all 0.2s ease;
-}
-
-.btn:hover {
-    transform: translateY(-1px);
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.btn i {
-    font-size: 0.9em;
-}
-</style>
-
 {% block extra_js %}
 <script>
 // Debounce function
diff --git a/templates/starred/starred.html b/templates/starred/starred.html
index bfd1a2c..98229a1 100644
--- a/templates/starred/starred.html
+++ b/templates/starred/starred.html
@@ -3,6 +3,10 @@
 
 {% block title %}Starred - DocuPulse{% endblock %}
 
+{% block extra_css %}
+<link rel="stylesheet" href="{{ url_for('static', filename='css/starred.css') }}">
+{% endblock %}
+
 {% block content %}
 {{ header(
     title="Starred",
@@ -37,78 +41,6 @@
 {% endblock %}
 
 {% block extra_js %}
-<style>
-.btn-group .btn.active {
-    background-color: #e6f3f4 !important;
-    border-color: #16767b !important;
-    color: #16767b !important;
-}
-
-.btn-group .btn:not(.active) {
-    background-color: #fff !important;
-    border-color: #e9ecef !important;
-    color: #6c757d !important;
-}
-</style>
 <script src="{{ url_for('static', filename='js/file-grid.js') }}"></script>
-<script>
-    let currentView = 'grid';
-
-    document.addEventListener('DOMContentLoaded', function() {
-        // Initialize view
-        initializeView();
-    });
-
-    async function initializeView() {
-        try {
-            const response = await fetch('/api/user/preferred_view');
-            const data = await response.json();
-            currentView = data.preferred_view || 'grid';
-            toggleView(currentView);
-        } catch (error) {
-            console.error('Error fetching preferred view:', error);
-            currentView = 'grid';
-            toggleView(currentView);
-        }
-    }
-
-    function toggleView(view) {
-        currentView = view;
-        const grid = document.getElementById('fileGrid');
-        const gridBtn = document.getElementById('gridViewBtn');
-        const listBtn = document.getElementById('listViewBtn');
-        
-        // Reset both buttons first
-        gridBtn.classList.remove('active');
-        listBtn.classList.remove('active');
-        
-        if (view === 'grid') {
-            grid.classList.remove('list-view');
-            gridBtn.classList.add('active');
-        } else {
-            grid.classList.add('list-view');
-            listBtn.classList.add('active');
-        }
-        
-        // Save the new preference
-        fetch('/api/user/preferred_view', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                'X-CSRFToken': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
-            },
-            body: JSON.stringify({ preferred_view: view })
-        })
-        .then(response => {
-            if (!response.ok) {
-                throw new Error('Network response was not ok');
-            }
-            return response.json();
-        })
-        .then(data => {
-            console.log('Preferred view saved:', data);
-        })
-        .catch(error => console.error('Error saving preferred view:', error));
-    }
-</script>
+<script src="{{ url_for('static', filename='js/starred.js') }}"></script>
 {% endblock %} 
\ No newline at end of file