diff --git a/src/apps/api/serializers/datasets.py b/src/apps/api/serializers/datasets.py
index 110aba43f..f3f9eee76 100644
--- a/src/apps/api/serializers/datasets.py
+++ b/src/apps/api/serializers/datasets.py
@@ -62,6 +62,28 @@ def create(self, validated_data):
         return instance
 
 
+class DatasetSerializer(serializers.ModelSerializer):
+    created_by = serializers.SerializerMethodField()
+
+    class Meta:
+        model = Data
+        fields = (
+            'id',
+            'type',
+            'name',
+            'description',
+            'file_size',
+            'license',
+            'downloads',
+            'is_verified',
+            'created_when',
+            'created_by',
+        )
+
+    def get_created_by(self, obj):
+        return obj.created_by.username
+
+
 class DataSimpleSerializer(serializers.ModelSerializer):
 
     class Meta:
diff --git a/src/apps/api/tests/test_datasets.py b/src/apps/api/tests/test_datasets.py
index fb50b5f76..5b52b4b95 100644
--- a/src/apps/api/tests/test_datasets.py
+++ b/src/apps/api/tests/test_datasets.py
@@ -1,9 +1,11 @@
 from django.urls import reverse
 from faker import Factory
+from django.test import TestCase
 from rest_framework.test import APITestCase
 from datasets.models import Data
 from factories import UserFactory, DataFactory
 from utils.data import pretty_bytes, gb_to_bytes
+from unittest.mock import patch
 
 
 faker = Factory.create()
@@ -86,3 +88,221 @@ def test_dataset_api_check_quota(self):
             'file_size': file_size,
         })
         assert resp.status_code == 201
+
+
+class DatasetDetailTests(TestCase):
+    def setUp(self):
+        self.owner = UserFactory(username="owner")
+        self.other_user = UserFactory(username="other")
+        self.client.force_login(self.owner)
+
+        # Create datasets
+        self.public_dataset = DataFactory(
+            name="Public Dataset",
+            is_public=True,
+            created_by=self.owner,
+            type=Data.PUBLIC_DATA
+        )
+
+        self.private_dataset = DataFactory(
+            name="Private Dataset",
+            is_public=False,
+            created_by=self.owner,
+            type=Data.INPUT_DATA
+        )
+
+        self.other_private_dataset = DataFactory(
+            name="Other User's Private Dataset",
+            is_public=False,
+            created_by=self.other_user,
+            type=Data.REFERENCE_DATA
+        )
+
+    def test_view_public_dataset(self):
+        # Public dataset should be accessible by anyone
+        self.client.logout()
+        response = self.client.get(reverse("datasets:detail", args=[self.public_dataset.pk]))
+        self.assertEqual(response.status_code, 200)
+
+    def test_view_private_dataset_as_owner(self):
+        # Owner should be able to access their own private dataset
+        response = self.client.get(reverse("datasets:detail", args=[self.private_dataset.pk]))
+        self.assertEqual(response.status_code, 200)
+
+    def test_view_private_dataset_as_other_user(self):
+        # Another user should not be able to access a private dataset
+        self.client.force_login(self.other_user)
+        response = self.client.get(reverse("datasets:detail", args=[self.private_dataset.pk]))
+        self.assertEqual(response.status_code, 404)
+
+    def test_view_nonexistent_dataset(self):
+        # Accessing a non-existent dataset should return 404
+        response = self.client.get(reverse("datasets:detail", args=[99999]))
+        self.assertEqual(response.status_code, 404)
+
+
+class DatasetDownloadTests(TestCase):
+    def setUp(self):
+        self.owner = UserFactory(username="owner")
+        self.other_user = UserFactory(username="other")
+        self.client.force_login(self.owner)
+
+        self.public_dataset = DataFactory(
+            is_public=True,
+            created_by=self.owner,
+            downloads=5
+        )
+
+        self.private_dataset = DataFactory(
+            is_public=False,
+            created_by=self.owner,
+            downloads=2
+        )
+
+    @patch("datasets.views.make_url_sassy")  # Replaces the real `make_url_sassy` function in this test only
+    def test_download_public_dataset(self, mock_make_url_sassy):
+        # Mock the URL that would normally be generated for the file
+        # This avoids depending on actual file storage or signature logic
+        mock_make_url_sassy.return_value = "http://codebench-storage/public_dataset.zip"
+
+        response = self.client.get(reverse("datasets:download_by_pk", args=[self.public_dataset.pk]))
+
+        # Should redirect to the URL
+        self.assertEqual(response.status_code, 302)
+        self.assertEqual(response["Location"], "http://codebench-storage/public_dataset.zip")
+
+        # Should increment download count
+        self.public_dataset.refresh_from_db()
+        self.assertEqual(self.public_dataset.downloads, 6)
+
+    @patch("datasets.views.make_url_sassy")  # Replaces the real `make_url_sassy` function in this test only
+    def test_download_private_dataset_as_owner(self, mock_make_url_sassy):
+        # Mock the URL that would normally be generated for the file
+        # This avoids depending on actual file storage or signature logic
+        mock_make_url_sassy.return_value = "http://codebench-storage/private_dataset.zip"
+
+        response = self.client.get(reverse("datasets:download_by_pk", args=[self.private_dataset.pk]))
+
+        self.assertEqual(response.status_code, 302)
+        self.assertEqual(response["Location"], "http://codebench-storage/private_dataset.zip")
+
+        self.private_dataset.refresh_from_db()
+        self.assertEqual(self.private_dataset.downloads, 3)
+
+    def test_download_private_dataset_as_other_user(self):
+        # Authenticate as a different user who is not the owner
+        self.client.force_login(self.other_user)
+
+        response = self.client.get(reverse("datasets:download_by_pk", args=[self.private_dataset.pk]))
+
+        # Should return 404 (access denied)
+        self.assertEqual(response.status_code, 404)
+
+    def test_download_nonexistent_dataset(self):
+        response = self.client.get(reverse("datasets:download_by_pk", args=[99999]))
+
+        # Should return 404 (access denied)
+        self.assertEqual(response.status_code, 404)
+
+
+class DatasetCreateTests(APITestCase):
+    def setUp(self):
+        self.user = UserFactory(username='creator', password='creator')
+        self.client.login(username='creator', password='creator')
+
+    @patch("api.views.datasets.make_url_sassy")  # Replaces the real `make_url_sassy` function in this test only
+    def test_create_dataset_success(self, mock_make_url_sassy):
+        fake_sassy_url = "https://codabench-storage/dataset.zip"
+        mock_make_url_sassy.return_value = fake_sassy_url
+
+        # Case 1: Without is_public (should default to False)
+        resp = self.client.post(reverse("data-list"), {
+            'name': 'my-new-dataset',
+            'type': Data.PUBLIC_DATA,
+            'request_sassy_file_name': faker.file_name(extension='.zip'),
+            'file_size': 1234,
+            'file_name': faker.file_name(),
+        })
+        self.assertEqual(resp.status_code, 201)
+        self.assertIn("key", resp.data)
+        self.assertEqual(resp.data["sassy_url"], fake_sassy_url)
+
+        dataset = Data.objects.get(name="my-new-dataset")
+        self.assertEqual(dataset.created_by, self.user)
+        self.assertFalse(dataset.is_public)
+        mock_make_url_sassy.assert_called_once_with(dataset.data_file.name, 'w')
+
+        # Case 2: With is_public=True
+        mock_make_url_sassy.reset_mock()
+        resp = self.client.post(reverse("data-list"), {
+            'name': 'my-public-dataset',
+            'type': Data.PUBLIC_DATA,
+            'request_sassy_file_name': faker.file_name(extension='.zip'),
+            'file_size': 1234,
+            'file_name': faker.file_name(),
+            'is_public': True
+        })
+        self.assertEqual(resp.status_code, 201)
+        dataset = Data.objects.get(name="my-public-dataset")
+        self.assertTrue(dataset.is_public)
+        mock_make_url_sassy.assert_called_once_with(dataset.data_file.name, 'w')
+
+    def test_cannot_create_dataset_with_missing_fields(self):
+
+        # missing file_size
+        resp = self.client.post(reverse("data-list"), {
+            'name': 'incomplete-dataset',
+            'file_name': faker.file_name(),
+            'type': Data.PUBLIC_DATA,
+            'request_sassy_file_name': faker.file_name(extension='.zip'),
+
+        })
+        self.assertEqual(resp.status_code, 400)
+        self.assertIn("file_size", resp.data)
+        self.assertEqual(resp.data["file_size"], "This field is required.")
+
+        # missing request_sassy_file_name
+        resp = self.client.post(reverse("data-list"), {
+            'name': 'incomplete-dataset',
+            'file_name': faker.file_name(),
+            'type': Data.PUBLIC_DATA,
+            'file_size': 1234,
+        })
+        self.assertEqual(resp.status_code, 400)
+        self.assertIn("request_sassy_file_name", resp.data)
+        self.assertEqual(resp.data["request_sassy_file_name"][0], "This field is required.")
+
+        # missing type
+        resp = self.client.post(reverse("data-list"), {
+            'name': 'incomplete-dataset',
+            'file_name': faker.file_name(),
+            'file_size': 1234,
+            'request_sassy_file_name': faker.file_name(extension='.zip'),
+        })
+        self.assertEqual(resp.status_code, 400)
+        self.assertIn("type", resp.data)
+        self.assertEqual(resp.data["type"][0], "This field is required.")
+
+    def test_cannot_create_dataset_with_invalid_file_size(self):
+        resp = self.client.post(reverse("data-list"), {
+            'name': 'invalid-size-dataset',
+            'file_name': faker.file_name(),
+            'type': Data.PUBLIC_DATA,
+            'request_sassy_file_name': faker.file_name(),
+            'file_size': "not-a-number",  # invalid type
+        })
+
+        self.assertEqual(resp.status_code, 400)
+        self.assertIn("file_size", resp.data)
+        self.assertEqual(resp.data["file_size"][0], "A valid number is required.")
+
+    def test_cannot_create_dataset_unauthenticated(self):
+        self.client.logout()
+        resp = self.client.post(reverse("data-list"), {
+            'name': 'unauth-dataset',
+            'file_name': faker.file_name(),
+            'type': Data.PUBLIC_DATA,
+            'request_sassy_file_name': faker.file_name(),
+            'file_size': 1234,
+        })
+        self.assertEqual(resp.status_code, 403)
diff --git a/src/apps/api/tests/test_public_datasets.py b/src/apps/api/tests/test_public_datasets.py
new file mode 100644
index 000000000..4ae1c515c
--- /dev/null
+++ b/src/apps/api/tests/test_public_datasets.py
@@ -0,0 +1,106 @@
+from rest_framework.test import APIClient
+from django.test import TestCase
+from factories import UserFactory, DataFactory
+from datasets.models import Data
+
+
+class PublicDatasetsTests(TestCase):
+    def setUp(self):
+        # Set up test client and authenticate as a test user
+        self.client = APIClient()
+        self.user = UserFactory()
+        self.client.force_authenticate(user=self.user)
+
+        # Create public datasets with varying metadata to test filters and sorting
+        self.dataset1 = DataFactory(
+            name="Climate Data",
+            description="Temperature and rainfall records",
+            is_public=True,
+            type=Data.PUBLIC_DATA,
+            license="MIT",
+            is_verified=True,
+            downloads=10
+        )
+
+        self.dataset2 = DataFactory(
+            name="Vision Dataset",
+            description="Images for computer vision",
+            is_public=True,
+            type=Data.PUBLIC_DATA,
+            license=None,
+            is_verified=False,
+            downloads=25
+        )
+
+        self.dataset3 = DataFactory(
+            name="Unverified Text",
+            description="NLP dataset",
+            is_public=True,
+            type=Data.PUBLIC_DATA,
+            license="Apache 2.0",
+            is_verified=False,
+            downloads=5
+        )
+
+        self.dataset4 = DataFactory(
+            name="Recent Genomics",
+            description="DNA sequences",
+            is_public=True,
+            type=Data.PUBLIC_DATA,
+            downloads=40,
+            is_verified=True
+        )
+
+    def test_default_ordering_recently_added(self):
+        # Test default ordering by ID in descending order (most recently created datasets first)
+        response = self.client.get("/api/datasets/public/")
+        self.assertEqual(response.status_code, 200)
+        ids = [d["id"] for d in response.data["results"]]
+        self.assertEqual(ids, sorted(ids, reverse=True))  # Default ordering by -id
+
+    def test_ordering_by_most_downloaded(self):
+        # Test ordering datasets by download count in descending order
+        response = self.client.get("/api/datasets/public/?ordering=most_downloaded")
+        self.assertEqual(response.status_code, 200)
+        downloads = [d["downloads"] for d in response.data["results"]]
+        self.assertEqual(downloads, sorted(downloads, reverse=True))
+
+    def test_filter_by_search_term(self):
+        # Test full-text search in dataset name and description
+        response = self.client.get("/api/datasets/public/?search=vision")
+        self.assertEqual(response.status_code, 200)
+        names = [d["name"].lower() + d["description"].lower() for d in response.data["results"]]
+        self.assertTrue(all("vision" in text for text in names))
+
+    def test_filter_by_has_license_true(self):
+        # Test filtering datasets that have a license field set
+        response = self.client.get("/api/datasets/public/?has_license=true")
+        self.assertEqual(response.status_code, 200)
+        results = response.data["results"]
+        self.assertTrue(all(d["license"] is not None for d in results))
+
+    def test_filter_by_is_verified_true(self):
+        # Test filtering datasets that are verified (is_verified=True)
+        response = self.client.get("/api/datasets/public/?is_verified=true")
+        self.assertEqual(response.status_code, 200)
+        results = response.data["results"]
+        self.assertTrue(all(d["is_verified"] is True for d in results))
+
+    def test_combined_filter_verified_with_license(self):
+        # Test filtering datasets that are both verified and have a license
+        response = self.client.get("/api/datasets/public/?is_verified=true&has_license=true")
+        self.assertEqual(response.status_code, 200)
+        results = response.data["results"]
+        for d in results:
+            self.assertTrue(d["is_verified"])
+            self.assertIsNotNone(d["license"])
+
+    def test_combined_search_and_filter(self):
+        # Test applying both search and is_verified filters together
+        response = self.client.get("/api/datasets/public/?search=genomics&is_verified=true")
+        self.assertEqual(response.status_code, 200)
+        results = response.data["results"]
+
+        # Expect exactly one match with the correct name
+        self.assertEqual(len(results), 1)
+        self.assertEqual(results[0]["name"], "Recent Genomics")
diff --git a/src/apps/api/views/datasets.py b/src/apps/api/views/datasets.py
index 8618af38e..6ceec39eb 100644
--- a/src/apps/api/views/datasets.py
+++ b/src/apps/api/views/datasets.py
@@ -9,8 +9,9 @@
 from rest_framework.filters import SearchFilter
 from rest_framework.response import Response
 from rest_framework.viewsets import ModelViewSet
+from rest_framework.permissions import AllowAny
 
-from api.pagination import BasicPagination
+from api.pagination import BasicPagination, LargePagination
 from api.serializers import datasets as serializers
 from datasets.models import Data, DataGroup
 from competitions.models import CompetitionCreationTaskStatus
@@ -88,19 +89,38 @@ def get_queryset(self):
         return qs
 
     def get_serializer_class(self):
-        if self.request.method == 'GET':
+        if self.action == 'public':
+            return serializers.DatasetSerializer
+        elif self.request.method == 'GET':
             return serializers.DataDetailSerializer
         else:
             return serializers.DataSerializer
 
+    def get_permissions(self):
+        if self.action == 'public':
+            return [AllowAny()]
+        return super().get_permissions()
+
     def create(self, request, *args, **kwargs):
+        # Check required field
+        if not request.data.get("file_size"):
+            return Response({"file_size": "This field is required."}, status=status.HTTP_400_BAD_REQUEST)
+        # Check file_size is float
+        try:
+            file_size = float(request.data.get('file_size', 0))
+        except (TypeError, ValueError):
+            return Response(
+                {"file_size": ["A valid number is required."]},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
         # Check User quota
         storage_used = float(request.user.get_used_storage_space())
         quota = float(request.user.quota)
         quota = gb_to_bytes(quota)
-        file_size = float(request.data['file_size'])
         if storage_used + file_size > quota:
-            available_space = pretty_bytes(quota - storage_used)
+            available_space = quota - storage_used
+            available_space = pretty_bytes(available_space, return_0_for_invalid=True)
             file_size = pretty_bytes(file_size)
             message = f'Insufficient space. Your available space is {available_space}. The file size is {file_size}. Please free up some space and try again. You can manage your files in the Resources page.'
             return Response({'data_file': [message]}, status=status.HTTP_400_BAD_REQUEST)
@@ -168,6 +188,72 @@ def check_delete_permissions(self, request, dataset):
             if sub.phase:
                 return 'Cannot delete submission: submission belongs to an existing competition. Please visit the competition and delete your submission from there.'
 
+    @action(detail=False, methods=('GET',), pagination_class=LargePagination)
+    def public(self, request):
+        """
+        Retrieve a public list of datasets with optional filtering and ordering.
+
+        This endpoint returns a paginated list of datasets that are public.
+        It supports several optional query parameters for filtering and sorting the results.
+
+        Query Parameters:
+        -----------------
+        - search (str, optional): A search term to filter competitions by their title.
+        - ordering (str, optional): Specifies the order of the results. Supported values:
+            * "recently_added" - Most recently created datasets.
+            * "most_downloaded" - Datasets with the most downloads.
+            Defaults to "recently_added" if not provided or invalid.
+        - has_license (bool, optional): If "true", filters datasets that has license.
+        - is_verified (bool, optional): If "true", filters datasets that are verified.
+
+        Returns:
+        --------
+        - 200 OK: A paginated or full list of serialized datasets matching the filter criteria. The response is serialized using `DatasetSerializer`.
+        """
+
+        # Receive filters from request query params
+        search = request.query_params.get("search")
+        ordering = request.query_params.get("ordering")
+        has_license = request.query_params.get("has_license", "false").lower() == "true"
+        is_verified = request.query_params.get("is_verified", "false").lower() == "true"
+
+        qs = Data.objects.filter(
+            is_public=True,
+            type=Data.PUBLIC_DATA
+        )
+
+        # Filter by title and description (search)
+        if search:
+            qs = qs.filter(
+                Q(name__icontains=search) |
+                Q(description__icontains=search)
+            )
+
+        # Filter by has_license
+        if has_license:
+            qs = qs.filter(license__isnull=False)
+
+        # Filter by is_verified
+        if is_verified:
+            qs = qs.filter(is_verified=True)
+
+        # Apply ordering
+        if ordering == "recently_added":
+            qs = qs.order_by("-id")  # most recently created
+        elif ordering == "most_downloaded":
+            qs = qs.order_by("-downloads")  # descending by download count
+        else:
+            qs = qs.order_by("-id")  # default fallback
+
+        queryset = self.filter_queryset(qs)
+        page = self.paginate_queryset(queryset)
+        if page is not None:
+            serializer = self.get_serializer(page, many=True)
+            return self.get_paginated_response(serializer.data)
+
+        serializer = self.get_serializer(queryset, many=True)
+        return Response(serializer.data)
+
 
 class DataGroupViewSet(ModelViewSet):
     queryset = DataGroup.objects.all()
diff --git a/src/apps/datasets/migrations/0011_auto_20250724_1050.py b/src/apps/datasets/migrations/0011_auto_20250724_1050.py
new file mode 100644
index 000000000..6c4ba0c63
--- /dev/null
+++ b/src/apps/datasets/migrations/0011_auto_20250724_1050.py
@@ -0,0 +1,28 @@
+# Generated by Django 2.2.28 on 2025-07-24 10:50
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('datasets', '0010_auto_20250218_1100'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='data',
+            name='downloads',
+            field=models.PositiveIntegerField(default=0),
+        ),
+        migrations.AddField(
+            model_name='data',
+            name='is_verified',
+            field=models.BooleanField(default=False),
+        ),
+        migrations.AddField(
+            model_name='data',
+            name='license',
+            field=models.CharField(blank=True, max_length=128, null=True),
+        ),
+    ]
diff --git a/src/apps/datasets/models.py b/src/apps/datasets/models.py
index 67edb7343..4e579bbdb 100644
--- a/src/apps/datasets/models.py
+++ b/src/apps/datasets/models.py
@@ -68,6 +68,10 @@ class Data(ChaHubSaveMixin, models.Model):
     competition = models.ForeignKey(Competition, on_delete=models.CASCADE, null=True, related_name='submission')
     file_name = models.CharField(max_length=64, default="")
 
+    is_verified = models.BooleanField(default=False)
+    downloads = models.PositiveIntegerField(default=0)
+    license = models.CharField(max_length=128, null=True, blank=True)
+
     def get_download_url(self):
         return reverse('datasets:download', kwargs={'key': self.key})
 
diff --git a/src/apps/datasets/urls.py b/src/apps/datasets/urls.py
index 3063c612a..7b36e6178 100644
--- a/src/apps/datasets/urls.py
+++ b/src/apps/datasets/urls.py
@@ -7,5 +7,9 @@
 urlpatterns = [
     # path('', views.CompetitionList.as_view(), name="list"),
     path('', views.DataManagement.as_view(), name="management"),
+    path('public/', views.DatasetsPublic.as_view(), name="public"),
+    path('create/', views.DatasetCreate.as_view(), name="create"),
     path('download/<str:key>/', views.download, name="download"),
+    path('<int:pk>/', views.DatasetDetail.as_view(), name="detail"),
+    path('download/id/<int:pk>/', views.download_by_pk, name="download_by_pk"),
 ]
diff --git a/src/apps/datasets/views.py b/src/apps/datasets/views.py
index f7146c422..b6c312970 100644
--- a/src/apps/datasets/views.py
+++ b/src/apps/datasets/views.py
@@ -1,16 +1,64 @@
 from django.contrib.auth.mixins import LoginRequiredMixin
-from django.http import HttpResponseRedirect
+from django.http import HttpResponseRedirect, Http404
 from django.shortcuts import get_object_or_404
-from django.views.generic import TemplateView
+from django.views.generic import TemplateView, DetailView
 
 from datasets.models import Data
 from utils.data import make_url_sassy
+from api.serializers.datasets import DatasetSerializer
 
 
 class DataManagement(LoginRequiredMixin, TemplateView):
     template_name = 'datasets/management.html'
 
 
+class DatasetsPublic(TemplateView):
+    template_name = 'datasets/public.html'
+
+
+class DatasetCreate(LoginRequiredMixin, TemplateView):
+    template_name = 'datasets/create.html'
+
+
+class DatasetDetail(DetailView):
+    queryset = Data.objects.filter(type__in=[Data.PUBLIC_DATA, Data.INPUT_DATA, Data.REFERENCE_DATA])
+    template_name = 'datasets/detail.html'
+
+    def get_object(self, *args, **kwargs):
+        dataset = super().get_object(*args, **kwargs)
+
+        # If dataset is public or (user is authenticated and is owner), return dataset
+        if dataset.is_public or (
+            self.request.user.is_authenticated and dataset.created_by == self.request.user
+        ):
+            return dataset
+
+        # Otherwise return 404
+        raise Http404()
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        dataset = context["object"]
+
+        serializer = DatasetSerializer(dataset)
+        context["object"] = serializer.data
+        return context
+
+
 def download(request, key):
     data = get_object_or_404(Data, key=key)
     return HttpResponseRedirect(make_url_sassy(data.data_file.name))
+
+
+def download_by_pk(request, pk):
+    dataset = get_object_or_404(Data, pk=pk)
+
+    if dataset.is_public or dataset.created_by == request.user:
+        # Increment download count
+        dataset.downloads = (dataset.downloads or 0) + 1
+        dataset.save(update_fields=["downloads"])
+
+        # Redirect to the actual file URL
+        return HttpResponseRedirect(make_url_sassy(dataset.data_file.name))
+
+    raise Http404()
diff --git a/src/static/js/ours/client.js b/src/static/js/ours/client.js
index 410ec34cf..642a3ccfd 100644
--- a/src/static/js/ours/client.js
+++ b/src/static/js/ours/client.js
@@ -186,6 +186,9 @@ CODALAB.api = {
     delete_datasets: function(pk_list) {
         return CODALAB.api.request('POST', `${URLS.API}datasets/delete_many/`, pk_list)
     },
+    get_public_datasets: function (query) {
+        return CODALAB.api.request('GET', URLS.API + "datasets/public/", query)
+    },
     /**
      * Creates a dataset
      * @param {object} metadata - name, description, type, data_file, is_public
diff --git a/src/static/riot/competitions/public-list.tag b/src/static/riot/competitions/public-list.tag
index c84c764f2..75e31369d 100644
--- a/src/static/riot/competitions/public-list.tag
+++ b/src/static/riot/competitions/public-list.tag
@@ -1,6 +1,16 @@
 <public-list>
   <!-- Title -->
-  <h1 class="page-title">Public Benchmarks and Competitions</h1>
+  <div class="page-header">
+    <h1 class="page-title">Public Benchmarks and Competitions</h1>
+    <div class="action-buttons">
+      <a class="create-btn" href="{ URLS.COMPETITION_ADD }">
+        <i class="bi bi-plus-square-fill me-1"></i> Create
+      </a>
+      <a class="create-btn" href="{ URLS.COMPETITION_UPLOAD }">
+        <i class="bi bi-cloud-arrow-up-fill me-1"></i> Upload
+      </a>
+    </div>
+  </div>
 
   <!-- Two-column layout -->
   <div class="content-container">
@@ -283,11 +293,37 @@
       display block
       margin-bottom 5px
 
+    .page-header
+      display flex
+      align-items center
+      justify-content space-between
+      margin-bottom 20px
+
+      .action-buttons
+        display flex
+        gap 10px
+
     .page-title
-      margin 0 0 20px 0
+      margin 0
       font-size 24px
       font-weight bold
       color #1b1b1b
+    
+    .create-btn
+      font-size 14px
+      padding 0.5em 1em
+      background-color #43637a
+      color #fff
+      text-decoration none
+      border-radius 4px
+      display inline-block
+      cursor pointer
+      transition background-color 0.2s ease
+
+      &:hover
+        background-color #2d3f4d
+        color #fff
+        text-decoration none
 
     .content-container
       display flex
@@ -302,16 +338,16 @@
       margin-left 0 !important
       background #f9f9f9
 
-        input[type="text"]
-            width 100%
-            padding 5px
-            margin 5px 0 5px 0
-            border 1px solid #ddd
-            border-radius 4px
+      input[type="text"]
+          width 100%
+          padding 5px
+          margin 5px 0 5px 0
+          border 1px solid #ddd
+          border-radius 4px
 
-        input[type="radio"],
-        input[type="checkbox"]
-            margin-right 5px
+      input[type="radio"],
+      input[type="checkbox"]
+          margin-right 5px
 
     .filter-group
         margin-bottom 20px
@@ -362,10 +398,10 @@
       margin-bottom 6px
 
     .tile-wrapper:hover
-      box-shadow 0 3px 4px -1px #9c9c9c
+      box-shadow 0 3px 4px -1px #cac9c9ff
       transition all 75ms ease-in-out
-      background-color #e8e8e8
-      border solid 1px #b9b9b9
+      background-color #e6edf2
+      border solid 1px #a5b7c5
 
       .comp-stats
         background-color #344d5e
diff --git a/src/static/riot/datasets/create.tag b/src/static/riot/datasets/create.tag
new file mode 100644
index 000000000..4cf434685
--- /dev/null
+++ b/src/static/riot/datasets/create.tag
@@ -0,0 +1,240 @@
+<dataset-create>
+  <div class="ui container dataset-container">
+    <h2 class="ui header">Create Dataset</h2>
+
+    <form class="ui form {error: errors}" ref="form"  enctype="multipart/form-data">
+
+      <!--  Errors  -->
+      <div class="ui message error" show="{ Object.keys(errors).length > 0 }">
+          <div class="header">
+              Errorn (s) creating dataset
+          </div>
+          <ul class="list">
+              <li each="{ error, field in errors }">
+                  <strong>{field}:</strong> {error}
+              </li>
+          </ul>
+      </div>
+      
+      <!-- Name -->
+      <div class="field required">
+        <label>Name</label>
+        <input id="dataset-name" type="text" name="name" ref="name" required placeholder="Enter dataset name" error="{errors.name}">
+      </div>
+
+      <!-- Description -->
+      <div class="field required">
+        <label>Description</label>
+        <textarea id="dataset-description" name="description" ref="description" rows="4" required placeholder="Enter a description..." error="{errors.description}"></textarea>
+      </div>
+
+      <!-- Dataset Type -->
+      <div class="field required">
+        <label>Type</label>
+        <select id="dataset-type" class="ui dropdown" name="type" ref="type" required error="{errors.type}"> 
+          <option value="public_data" selected>Public Data</option>
+          <option value="input_data">Input Data</option>
+          <option value="reference_data">Reference Data</option>
+        </select>
+        <p class="form-note">
+          NOTE: Only datasets with type: public data are listed on the Public Datasets page; input and reference data appear only in your Resources page.
+        </p>
+      </div>
+
+      <!-- Dataset Public -->
+      <div class="field">
+        <label>Make Public</label>
+        <div class="ui checkbox">
+          <input type="checkbox" id="dataset-public" name="is_public" ref="is_public">
+          <label for="dataset-public">List on Public Datasets page</label>
+        </div>
+        <p class="form-note">
+          NOTE: Only datasets that are marked `public` are listed on the Public Datasets.
+        </p>
+      </div>
+
+
+      <!-- Dataset License -->
+      <div class="field required">
+        <label>License</label>
+        <select id="dataset-license" class="ui dropdown" name="license" ref="license" onchange="{on_license_change}" error="{errors.license}">
+          <option value="">Select a License</option>
+          <option value="CC0-1.0">Creative Commons Zero (CC0) 1.0</option>
+          <option value="CC-BY-4.0">Creative Commons Attribution (CC BY) 4.0</option>
+          <option value="CC-BY-SA-4.0">Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0</option>
+          <option value="CC-BY-NC-4.0">Creative Commons Attribution-NonCommercial (CC BY-NC) 4.0
+          <option value="ODC-By">Open Data Commons Attribution License (ODC-By)</option>
+          <option value="ODbL-1.0">Open Database License (ODbL) 1.0</option>
+          <option value="MIT">MIT License</option>
+          <option value="Apache-2.0">Apache License 2.0</option>
+          <option value="GPL-3.0">GNU General Public License v3.0</option>
+          <option value="BSD-3-Clause">BSD 3-Clause License</option>
+          <option value="Research-Only">Research Use Only</option>
+          <option value="N/A">N/A</option>
+          <option value="Other">Other</option>
+        </select>
+      </div>
+
+      <!-- Custom License -->
+      <div class="field" if="{show_custom_license}">
+        <label>Custom License Name</label>
+        <input id="custom-license" type="text" name="custom_license" ref="custom_license" placeholder="Enter license name" error="{errors.custom_license}">
+      </div>
+
+      <!-- File Upload -->
+      <div class="field required">
+        <label>Attach Dataset File (.zip only)</label>
+        <input-file name="data_file" ref="data_file" error="{errors.data_file}" accept=".zip" required></input-file>
+      </div>
+
+      <!-- Submit Button -->
+      <button type="submit" class="ui button bg-codabench" onclick="{check_form}">
+        <i class="bi bi-cloud-arrow-up-fill"></i> Submit Dataset
+      </button>
+    </form>
+  </div>
+
+
+  <script>
+    var self = this
+    self.mixin(ProgressBarMixin)
+
+    self.errors = {}
+    self.show_custom_license = false
+
+    self.on_license_change = function (e) {
+      self.show_custom_license = e.target.value === 'Other'
+      self.update()
+    }
+
+    self.check_form = function (e) {
+      e.preventDefault()
+
+      // Reset upload progress, in case we're trying to re-upload or had errors      
+      self.file_upload_progress_handler(undefined)
+
+      // Form validation
+      self.errors = {}
+      var validate_data = get_form_data(self.refs.form)
+
+      var required_fields = ['name', 'description','type', 'license', 'data_file']
+      required_fields.forEach(field => {
+        if (validate_data[field].trim() === '') {
+            self.errors[field] = "This field is required"
+        }
+      })
+
+      // Additional check for custom license if "Other" is selected
+      if (validate_data['license'] === 'Other') {
+        if (!validate_data['custom_license'] || validate_data['custom_license'].trim() === '') {
+          self.errors['custom_license'] = "Please specify a custom license name"
+        }
+      }
+
+      if (Object.keys(self.errors).length > 0) {
+        // display errors and drop out
+        self.update()
+        return
+      }
+
+      // Call the progress bar wrapper and do the upload
+      self.prepare_upload(self.upload)()
+    }
+
+    self.upload = function () {
+      
+      // Get form data
+      var metadata = get_form_data(self.refs.form)
+
+      // Remove data_file from form data (we don't want to send the file in the meta-data)
+      delete metadata.data_file
+
+      // Set is_public filed from the checkbox value
+      metadata.is_public = self.refs.is_public.checked
+
+      // Get data_file
+      var data_file = self.refs.data_file.refs.file_input.files[0]
+
+      // Upload using create_dataset API
+      CODALAB.api.create_dataset(metadata, data_file, self.file_upload_progress_handler)
+        .done(function (data) {
+            toastr.success("Dataset successfully uploaded!")
+            self.clear_form()
+            setTimeout(function () {
+              self.redirect_to_public_or_resources()
+            }, 2000)
+        })
+        .fail(function (response) {
+            if (response) {
+                try {
+                    var errors = JSON.parse(response.responseText)
+
+                    // Clean up errors to not be arrays but plain text
+                    Object.keys(errors).map(function (key, index) {
+                        errors[key] = errors[key].join('; ')
+                    })
+
+                    self.update({errors: errors})
+                } catch (e) {
+
+                }
+            }
+            toastr.error("Creation failed, error occurred")
+        })
+        .always(function () {
+            self.hide_progress_bar()
+        })
+    }
+
+    self.clear_form = function () {
+
+      self.refs.form.reset()
+
+      // Reset errors and custom license visibility
+      self.errors = {}
+      self.show_custom_license = false
+
+      self.update()
+    }
+
+    self.redirect_to_public_or_resources = function () {
+      const urlParams = new URLSearchParams(window.location.search)
+      const from = urlParams.get('from')
+
+      if (from === 'public') {
+          window.location.href = '/datasets/public/'
+      } else {
+          window.location.href = '/datasets/'
+      }
+    }
+  </script>
+
+  <style>
+    .dataset-container {
+      max-width: 700px;
+      margin: 2rem auto;
+      padding: 2rem;
+      background: #fff;
+      border: 1px solid #ddd;
+      border-radius: 8px;
+    }
+    .form-note {
+      font-style: italic;
+      color: #888;
+      font-size: 0.9rem;
+      margin-top: 0.5rem;
+    }
+    input[type="file"] {
+      border: 1px solid #ccc;
+      padding: 0.75rem;
+      border-radius: 4px;
+    }
+    .bg-codabench{
+        background-color: #43637a !important;
+        color: #fff !important;
+    }
+    .bg-codabench:hover {
+      background-color: #2d3f4d !important;
+    }
+  </style>
+</dataset-create>
diff --git a/src/static/riot/datasets/detail.tag b/src/static/riot/datasets/detail.tag
new file mode 100644
index 000000000..3fd3a61b6
--- /dev/null
+++ b/src/static/riot/datasets/detail.tag
@@ -0,0 +1,96 @@
+<dataset-detail>
+  <div class="ui container dataset-container">
+    <h2 class="ui header">Dataset Details</h2>
+
+    <table class="ui celled table">
+      <tbody if="{dataset}">
+        <tr>
+          <td><strong>Name</strong></td>
+          <td>{dataset.name}</td>
+        </tr>
+        <tr>
+          <td><strong>Description</strong></td>
+          <td>{dataset.description}</td>
+        </tr>
+        <tr>
+          <td><strong>Owner</strong></td>
+          <td>{dataset.created_by}</td>
+        </tr>
+        <tr>
+          <td><strong>Uploaded Date</strong></td>
+          <td>{pretty_date(dataset.created_when)}</td>
+        </tr>
+        <tr>
+          <td><strong>License</strong></td>
+          <td>{dataset.license}</td>
+        </tr>
+        <tr>
+          <td><strong>Downloads</strong></td>
+          <td>{dataset.downloads}</td>
+        </tr>
+        <tr>
+          <td><strong>Verified</strong></td>
+          <td if="{dataset.is_verified}"><i class="bi bi-check-circle-fill green"></td>
+          <td if="{!dataset.is_verified}">No</td>
+        </tr>
+        <tr>
+          <td><strong>File Size</strong></td>
+          <td>{pretty_bytes(dataset.file_size)}</td>
+        </tr>
+        <tr>
+          <td colspan=2>
+            <a class="ui button small primary" target="_blank" href="{URLS.DATASET_DOWNLOAD_BY_PK(dataset.id)}">
+              <i class="bi bi-file-earmark-arrow-down-fill"></i> Download
+            </a>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
+  <script>
+    var self = this
+    self.dataset = {
+        id: opts.id,
+        name: opts.name,
+        description: opts.description,
+        license: opts.license,
+        is_verified: opts.is_verified === 'True',
+        created_when: opts.created_when,
+        created_by: opts.created_by,
+        file_size: opts.file_size,
+        downloads: opts.downloads,
+    }
+
+    self.on('mount', () => {
+        self.update()
+    })
+
+    self.pretty_date = date => luxon.DateTime.fromISO(date).toLocaleString(luxon.DateTime.DATE_FULL)
+
+  </script>
+
+  <style>
+    .dataset-container {
+      max-width: 700px;
+      margin: 2rem auto;
+      padding: 2rem;
+      background: #fff;
+      border: 1px solid #ddd;
+      border-radius: 8px;
+    }
+    .bg-codabench {
+      background-color: #43637a !important;
+      color: #fff !important;
+    }
+    .bg-codabench:hover {
+      background-color: #2d3f4d !important;
+    }
+    table.ui.celled.table td {
+      vertical-align: top;
+    }
+    .green{
+      color: #009022ff;
+    }
+  </style>
+</dataset-detail>
diff --git a/src/static/riot/datasets/public-list.tag b/src/static/riot/datasets/public-list.tag
new file mode 100644
index 000000000..56c3c5679
--- /dev/null
+++ b/src/static/riot/datasets/public-list.tag
@@ -0,0 +1,383 @@
+<public-datasets>
+  <!-- Title -->
+  <div class="page-header">
+    <h1 class="page-title">Public Datasets</h1>
+    <a class="create-btn" href="{ URLS.DATASET_CREATE }?from=public">
+      <i class="bi bi-plus-square-fill me-1"></i> Create
+    </a>
+  </div>
+
+  <!-- Two-column layout -->
+  <div class="content-container">
+
+    <!-- Filters -->
+    <div class="filters-panel">
+        <h3>Filters</h3>
+
+        <div class="filter-group">
+            <label class="filter-label" for="search-title-description"><strong>Search by Title/Description</strong></label>
+            <div class="ui input">
+              <input type="text" id="search-title-description" oninput="{on_title_description_input}" placeholder="Enter title/description...">
+            </div>
+        </div>
+
+        <div class="filter-group">
+            <strong class="filter-label">Order By</strong>
+            <label><input type="radio" name="order" value="most_downloaded" onchange="{set_ordering}"> Most downloaded first</label>
+            <label><input type="radio" name="order" value="recently_added" onchange="{set_ordering}"> Recently added first</label>
+        </div>
+
+        <div class="filter-group">
+            <strong class="filter-label">Dataset properties</strong>
+            <label><input type="checkbox" onchange="{toggle_has_license}"> Has License</label>
+            <label><input type="checkbox" onchange="{toggle_is_verified}"> Is Verified</label>
+        </div>
+
+        <div class="filter-group" show="{should_show_clear_filters()}">
+            <button class="clear-filters-btn ui button" onclick="{clear_all_filters}">Clear All Filters</button>
+        </div>
+    </div>
+
+    <!-- Datasets -->
+    <div class="list-panel">
+        <div id="loading" class="loading-indicator" show="{!datasets}">
+            <div class="spinner"></div>
+        </div>
+
+        <!-- Dataset tiles -->
+        <div each="{dataset in datasets.results}" class="tile-wrapper">
+          <div class="full-width">
+            <a class="link-no-deco" href="../{dataset.id}">
+              <div class="dataset-info">
+                  <h4 class="heading">{dataset.name}</h4>
+                  <p class="dataset-description">{ pretty_description(dataset.description) }</p>
+                  <div class="dataset-stats">
+                    <div title="Created Date"><i class="bi bi-calendar-event-fill"></i> {pretty_date(dataset.created_when)}</div>
+                    <div title="File Size"><i class="bi bi-file-earmark-fill"></i> {pretty_bytes(dataset.file_size)}</div>
+                    <div title="License"><i class="bi bi-shield-shaded"></i> {dataset.license || 'N/A'}</div>
+                    <div title="Downloads"><i class="bi bi-file-earmark-arrow-down-fill"></i> {dataset.downloads}</div>
+                    <div if="{dataset.is_verified}" title="Verified"><i class="bi bi-check-circle-fill green"></i>Verified</div>
+                  </div>
+                  <div class="dataset-stats">
+                    <div class="uploader">
+                      <em>Uploaded by: <strong>{dataset.created_by}</strong></em>
+                    </div>
+                  </div>
+              </div>
+            </a>
+          </div>
+        </div>
+
+        <div class="no-results-message" if="{datasets.results && datasets.results.length === 0}">
+            <div class="ui warning message">
+              <div class="header">No datasets found</div>
+              Try changing your filters or search term.
+            </div>
+        </div>
+
+        <div class="pagination-nav" if="{datasets.next || datasets.previous}">
+            <button show="{datasets.previous}" onclick="{handle_ajax_pages.bind(this, -1)}" class="float-left ui inline button active">Back</button>
+            <button hide="{datasets.previous}" disabled class="float-left ui inline button disabled">Back</button>
+            { current_page } of {Math.ceil(datasets.count / datasets.page_size)}
+            <button show="{datasets.next}" onclick="{handle_ajax_pages.bind(this, 1)}" class="float-right ui inline button active">Next</button>
+            <button hide="{datasets.next}" disabled class="float-right ui inline button disabled">Next</button>
+        </div>
+    </div>
+  </div>
+
+  <script>
+    var self = this
+    self.search_timer = null
+    self.datasets = {}
+
+    self.filter_state = {
+        search: '',
+        ordering: '',
+        has_license: false,
+        is_verified: false,
+    }
+
+    self.on_title_description_input = function(e) {
+        const value = e.target.value
+        self.filter_state.search = value
+        self.update()
+        if (self.search_timer) clearTimeout(self.search_timer)
+        self.search_timer = setTimeout(() => {
+            self.update_datasets_list(1)
+        }, 1000)
+    }
+
+    self.set_ordering = function (e) {
+        self.filter_state.ordering = e.target.value
+        self.update()
+        self.update_datasets_list(1)
+    }
+
+    self.toggle_has_license = function(e) {
+        self.filter_state.has_license = e.target.checked
+        self.update()
+        self.update_datasets_list(1)
+    }
+
+    self.toggle_is_verified = function(e) {
+        self.filter_state.is_verified = e.target.checked
+        self.update()
+        self.update_datasets_list(1)
+    }
+
+    self.should_show_clear_filters = function () {
+        const f = self.filter_state
+        return f.search || f.ordering || f.has_license || f.is_verified
+    }
+
+    self.clear_all_filters = function() {
+        self.filter_state = {
+            search: '',
+            ordering: '',
+            has_license: false,
+            is_verified: false,
+        }
+        document.getElementById('search-title-description').value = ''
+        document.querySelectorAll('input[name="order"]').forEach(r => r.checked = false)
+        document.querySelectorAll('input[type="checkbox"]').forEach(c => c.checked = false)
+        self.update_datasets_list(1)
+    }
+
+    self.one("mount", function () {
+        self.update_datasets_list(self.get_url_page_number_or_default())
+    })
+
+    self.handle_ajax_pages = function (num) {
+        $('.pagination-nav > button').prop('disabled', true)
+        self.update_datasets_list(self.get_url_page_number_or_default() + num)
+    }
+
+    self.update_datasets_list = function (num) {
+        self.current_page = num;
+        $('#loading').show();
+        $('.pagination-nav').hide();
+
+        function handleSuccess(response) {
+            self.datasets = response;
+            $('#loading').hide();
+            $('.pagination-nav').show();
+            history.pushState("", document.title, "?page=" + self.current_page);
+            $('.pagination-nav > button').prop('disabled', false);
+            self.update();
+        }
+
+        return CODALAB.api.get_public_datasets({
+              "page": self.current_page,
+              "search": self.filter_state.search,
+              "ordering": self.filter_state.ordering,
+              "has_license": self.filter_state.has_license,
+              "is_verified": self.filter_state.is_verified
+            })
+            .fail(function (resp) {
+                $('#loading').hide()
+                $('.pagination-nav').show()
+                let message = "Could not load datasets list"
+                try {
+                    const json = JSON.parse(resp.responseText)
+                    if (json.detail) message = json.detail
+                } catch (_) {
+                    if (resp.responseText) message = resp.responseText
+                }
+                toastr.error(message)
+            })
+            .done(handleSuccess);
+    }
+
+    self.pretty_date = function (date_string) {
+        return !!date_string ? luxon.DateTime.fromISO(date_string).toLocaleString(luxon.DateTime.DATE_FULL) : ''
+    }
+
+    self.pretty_description = function (description) {
+        return description.substring(0, 120) + (description.length > 120 ? '...' : '') || ''
+    }
+
+    self.get_url_page_number_or_default = function () {
+        let urlParams = new URLSearchParams(window.location.search)
+        if (urlParams.has('page')) {
+            let p = parseInt(urlParams.get('page'))
+            return p < 1 ? 1 : p
+        }
+        return 1
+    }
+
+    $(window).on('popstate', function () {
+        self.update_datasets_list(self.get_url_page_number_or_default())
+    })
+  </script>
+
+  <style type="text/stylus">
+    public-datasets
+      width 100%
+
+    :scope
+      display block
+      margin-bottom 5px
+
+    .page-header
+      display flex
+      align-items center
+      justify-content space-between
+      margin-bottom 20px
+
+    .page-title
+      margin 0
+      font-size 24px
+      font-weight bold
+      color #1b1b1b
+    
+    .create-btn
+      font-size 14px
+      padding 0.5em 1em
+      background-color #43637a
+      color #fff
+      text-decoration none
+      border-radius 4px
+      display inline-block
+      cursor pointer
+      transition background-color 0.2s ease
+
+      &:hover
+        background-color #2d3f4d
+        color #fff
+        text-decoration none
+
+    .content-container
+      display flex
+      width 100%
+
+    .filters-panel
+      width 250px
+      flex-shrink 0
+      border 1px solid #ddd
+      padding 10px
+      margin-right 10px
+      background #f9f9f9
+
+      input[type="text"]
+        width 100%
+        padding 5px
+        margin 5px 0 5px 0
+        border 1px solid #ddd
+        border-radius 4px
+
+      input[type="radio"],
+      input[type="checkbox"]
+        margin-right 5px
+
+    .filter-group
+      margin-bottom 20px
+
+    .filter-label
+      font-size 14px
+      font-weight bold
+      display block
+      margin-bottom 8px
+
+    .filter-group label
+      display block
+      font-size 13px
+      margin-bottom 6px
+
+    .list-panel
+      flex-grow 1
+
+    .pagination-nav
+      padding 10px 0
+      width 100%
+      text-align center
+      margin-bottom 20px
+
+    .float-left
+      float left
+
+    .float-right
+      float right
+
+    .link-no-deco
+      all unset
+      text-decoration none
+      cursor pointer
+      width 100%
+    
+    .full-width
+      width 100%
+
+    .tile-wrapper
+      display flex
+      border 1px solid #ddd
+      padding 1em
+      margin-bottom 1em
+      border-radius 5px
+      background-color #f9f9f9
+      transition all 75ms ease-in-out
+
+    .tile-wrapper:hover
+      box-shadow 0 3px 4px -1px #cac9c9ff
+      background-color #e6edf2
+      border solid 1px #a5b7c5
+
+    .dataset-info
+      width 100%
+
+    .dataset-info .heading
+      font-size 1.2em
+      margin-bottom 0.3em
+
+    .dataset-description
+      margin-bottom 0.5em
+      font-size 13px
+      line-height 1.15em
+      color #555
+
+    .uploader
+      font-size 0.9em
+      color #777
+
+    .green
+      color #009022ff
+
+    .dataset-stats
+      display flex
+      flex-wrap wrap
+      gap 1em
+      font-size 0.9em
+      align-items center
+      margin-top 0.5em
+      color #555
+
+    .dataset-stats > div
+      display flex
+      align-items center
+      gap 0.4em
+
+    .ui.mini.primary.button
+      padding 0.4em 0.8em
+      font-size 0.85em
+
+    .loading-indicator
+      display flex
+      align-items center
+      padding 20px
+      width 100%
+      margin 0 auto
+
+    .spinner
+      border 4px solid rgba(0,0,0,.1)
+      width 36px
+      height 36px
+      border-radius 50%
+      border-top-color #3498db
+      animation spin 1s ease-in-out infinite
+
+    @keyframes spin
+      0%
+        transform rotate(0deg)
+      100%
+        transform rotate(360deg)
+  </style>
+</public-datasets>
diff --git a/src/templates/base.html b/src/templates/base.html
index 30584b35a..81aa897ff 100644
--- a/src/templates/base.html
+++ b/src/templates/base.html
@@ -95,76 +95,48 @@
                     </div>
                 </span>
                 <div class="right menu item">
-                    <div id="competition_dropdown" class="ui dropdown item">
-                        <div class="text">
-                            <i class="ui small trophy icon"></i>
-                            Benchmarks
-                        </div>
-                        <i class="dropdown icon"></i>
-                        <div class="menu">
-                            <div class="header"></div>
-                            <a class="item" href="{% url "competitions:management" %}">Management</a>
-                            <a class="item" href="{% url "competitions:public" %}">Public</a>
-                        </div>
-                    </div>
-                    <a class="item" href="{% url "tasks:task_management" %}">
-                        <i selenium="tasks" class="ui small file icon"></i>
-                        Resources
+                    <a class="item" href="{% url "competitions:public" %}">
+                        <i class="ui small trophy icon"></i>
+                        Benchmarks/Competitions
                     </a>
-                    <a class="item" href="{% url "queues:management" %}">
-                        <i class="ui small computer icon"></i>
-                        Queue Management
+                    <a class="item" href="{% url "datasets:public" %}">
+                        <i class="ui small database icon"></i>
+                        Datasets
                     </a>
                     {% if user.is_authenticated %}
-                        <div id="user_dropdown" class="ui dropdown item">
+                        <div selenium="user_dropdown" id="user_dropdown" class="ui dropdown item">
                             <div class="text">
                                 <i class="icon user outline"></i>
                                 {{ request.user.username }}
                             </div>
                             <i class="dropdown icon"></i>
                             <div class="menu">
-                                
-                                    <div class="header">Admin management</div>
-{#                                    <a class="item" href="#">Customize Codalab</a>#}
+                                <!-- Admin management -->
+                                <div class="header">Admin management</div>
                                     <a class="item" href="{% url "pages:server_status" %}">Server Status</a>
-                                {% if request.user.is_staff %}
-                                    <a class="item" href="{% url "pages:monitor_queues" %}">Monitor Queues</a>
-                                    <a class="item" href="{% url "admin:index" %}">Django Admin</a>
-                                    <a class="item" href="{% url "su_login" %}">Change User</a>
-                                    <a class="item" href="{% url "analytics:analytics" %}">Analytics</a>
-{#                                    <a class="item" href="#">Health</a>#}
-{#                                    <a class="item" href="#">Users</a>#}
-{#                                    <a class="item" href="#">Submissions</a>#}
-{#                                    <a class="item" href="#" onclick="$('#user_switch_modal').modal('show')">Switch#}
-{#                                        User</a>#}
-                                {% endif %}
+                                    {% if request.user.is_staff %}
+                                        <a class="item" href="{% url "pages:monitor_queues" %}">Monitor Queues</a>
+                                        <a class="item" href="{% url "admin:index" %}">Django Admin</a>
+                                        <a class="item" href="{% url "su_login" %}">Change User</a>
+                                        <a class="item" href="{% url "analytics:analytics" %}">Analytics</a>
+                                    {% endif %}
                                 <div class="ui divider"></div>
+                                <!-- My Resources -->
+                                <div class="header">My Resources</div>
+                                <a class="item" href="{% url 'competitions:management' %}"><i class="icon bi bi-trophy"></i>Competitions</a>
+                                <a selenium="resources" class="item" href="{% url 'tasks:task_management' %}"><i class="icon bi bi-folder"></i>Resources</a>
+                                 <a class="item" href="{% url 'queues:management' %}"><i class="icon bi bi-hourglass"></i>Queues</a>
+                                <div class="ui divider"></div>
+                                <!-- Account -->
                                 <div class="header">Account</div>
-                                <a class="item" href="{% url 'profiles:user_profile' username=user.username %}">
-                                    <i class="icon user"></i>
-                                    View Profile
-                                </a>
-                                <a class="item" href="{% url 'profiles:user_edit' username=user.username %}">
-                                    </i><i class="edit icon"></i>
-                                    Edit profile
-                                </a>
-                                <a class="item" href="{% url 'accounts:user_account' username=user.username %}">
-                                    <i class="cog icon"></i>
-                                    Account
-                                </a>
-                                <a class="item" href="{% url 'profiles:user_notifications' username=user.username %}">
-                                    </i><i class="bell icon"></i>
-                                    Notifications
-                                </a>
-                                <a class="item" href="{% url 'accounts:password_reset' %}">
-                                    <i class="lock icon"></i>
-                                    Change Password
-                                </a>
-                                <a class="item" href="{% url 'accounts:logout' %}">
-                                    <i class="icon sign out"></i>
-                                    Logout
-                                </a>
+                                <a class="item" href="{% url 'profiles:user_profile' username=user.username %}"><i class="icon bi bi-person"></i>View Profile</a>
+                                <a class="item" href="{% url 'profiles:user_edit' username=user.username %}"></i><i class="icon bi bi-pencil-square"></i>Edit profile</a>
+                                <a class="item" href="{% url 'accounts:user_account' username=user.username %}"><i class="icon bi bi-gear"></i>Settings</a>
+                                <a class="item" href="{% url 'profiles:user_notifications' username=user.username %}"></i><i class="icon bi bi-bell"></i>Notifications</a>
+                                <a class="item" href="{% url 'accounts:password_reset' %}"><i class="icon bi bi-lock"></i>Change Password</a>
+                                <a class="item" href="{% url 'accounts:logout' %}"><i class="icon bi bi-door-open"></i>Logout</a>
                                 <div class="ui divider"></div>
+
                                 <div class="header">Organizations</div>
                             {% for org in user.organizations.all %}
                                 {% if user in org.user_record.all %}
@@ -346,6 +318,10 @@ <h4 class="ui inverted header">CodaBench</h4>
             DATASET_DOWNLOAD: function (key) {
                 return "{% url "datasets:download" key=0 %}".replace(0, key)
             },
+            DATASET_DOWNLOAD_BY_PK: function (pk) {
+                return "{% url "datasets:download_by_pk" pk=0 %}".replace(0, pk)
+            },
+            DATASET_CREATE: "{% url "datasets:create" %}",
             // Tasks
             TASK_MANAGEMENT: "{% url "tasks:task_management" %}",
             TASK_DETAIL: function (pk) {
@@ -353,6 +329,7 @@ <h4 class="ui inverted header">CodaBench</h4>
             },
             LOGIN: "{% url 'accounts:login' %}",
             SIGNUP: "{% url 'accounts:signup' %}",
+
         }
         // Django returns <input type="hidden" value="csrf-token-secret"> so we just grab the `value` attribute from this
         CSRF_TOKEN = $('{% csrf_token %}').attr('value')
diff --git a/src/templates/datasets/create.html b/src/templates/datasets/create.html
new file mode 100644
index 000000000..031657415
--- /dev/null
+++ b/src/templates/datasets/create.html
@@ -0,0 +1,6 @@
+{% extends "base.html" %}
+
+{% block content %}
+    <dataset-create>
+    </dataset-create>
+{% endblock %}
diff --git a/src/templates/datasets/detail.html b/src/templates/datasets/detail.html
new file mode 100644
index 000000000..97dd51bc7
--- /dev/null
+++ b/src/templates/datasets/detail.html
@@ -0,0 +1,15 @@
+{% extends "base.html" %}
+{% block content %}
+    <dataset-detail 
+        id='{{ object.id }}'
+        name='{{ object.name }}'
+        description='{{ object.description }}'
+        license='{{ object.license }}'
+        is_verified='{{ object.is_verified }}'
+        created_when='{{ object.created_when }}'
+        created_by='{{ object.created_by }}'
+        file_size='{{ object.file_size }}'
+        downloads='{{ object.downloads }}'
+        
+    ></dataset-detail>
+{% endblock %}
\ No newline at end of file
diff --git a/src/templates/datasets/public.html b/src/templates/datasets/public.html
new file mode 100644
index 000000000..93c933478
--- /dev/null
+++ b/src/templates/datasets/public.html
@@ -0,0 +1,5 @@
+{% extends "base.html" %}
+
+{% block content %}
+    <public-datasets></public-datasets>
+{% endblock %}
diff --git a/src/tests/functional/test_competitions.py b/src/tests/functional/test_competitions.py
index 35f0a80ac..d0f473d0a 100644
--- a/src/tests/functional/test_competitions.py
+++ b/src/tests/functional/test_competitions.py
@@ -59,7 +59,10 @@ def test_upload_v2_competition(self):
     def test_manual_competition_creation(self):
 
         # Dataset Creation
-        self.find('i[selenium="tasks"]').click()
+        # click user menu
+        self.find('div[selenium="user_dropdown"]').click()
+        # click resources item
+        self.find('a[selenium="resources"]').click()
         self.find('div[data-tab="datasets"]').click()
         self.find('i[selenium="add-dataset"]').click()
         self.find('input-text[selenium="scoring-name"] input').send_keys('sCoRiNg NaMe')
diff --git a/src/utils/data.py b/src/utils/data.py
index a609ff796..d1ba3710a 100644
--- a/src/utils/data.py
+++ b/src/utils/data.py
@@ -121,16 +121,16 @@ def put_blob(url, file_path):
     )
 
 
-def pretty_bytes(bytes, decimal_places=1, suffix="B", binary=False):
+def pretty_bytes(bytes, decimal_places=1, suffix="B", binary=False, return_0_for_invalid=False):
 
     # Ensure bytes is a valid number
     try:
         bytes = float(bytes)
     except (ValueError, TypeError):
-        return ""  # Return empty string for invalid inputs
+        return 0 if return_0_for_invalid else ""  # Return 0 or empty string for invalid inputs
 
     if bytes < 0:
-        return ""  # Return empty string for negative values
+        return 0 if return_0_for_invalid else ""  # Return 0 or empty string for invalid inputs
 
     factor = 1024.0 if binary else 1000.0
     units = ['', 'Ki', 'Mi', 'Gi', 'Ti', 'Pi', 'Ei', 'Zi'] if binary else ['', 'k', 'M', 'G', 'T', 'P', 'E', 'Z']